/* Apple-style A+ content layer — shared by the flagship product pages.
 *
 * Lifted out of products/iphone-17.html when products/iphone-17-air.html needed
 * the same layer: one copy, so a design fix lands on both pages instead of
 * drifting between two inline blocks. Everything is scoped under .aplus / .ap-*,
 * so a page only picks it up where it wraps markup in <div class="aplus">.
 */

/* ===== APPLE-INSPIRED ADDITIONS — DARK THEME ===== */
.aplus{--aplus-max:1320px;--aplus-pad:2rem;--aplus-muted:#a1a1a6;--aplus-border:#2c2c2e;--aplus-card:#1c1c1e;background:#000;color:#f5f5f7}
.aplus a{color:inherit}
.aplus-eyebrow{font-family:var(--font-en);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:#a1a1a6;font-weight:700;margin-bottom:1rem;line-height:1.6}
.aplus-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-1.2px;line-height:1.08;color:#f5f5f7}
.aplus-title em{font-style:normal;background:linear-gradient(90deg,#f5f5f7 10%,#a1a1a6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.aplus-desc{font-size:17px;line-height:1.7;color:#a1a1a6;max-width:680px}
.aplus-section{padding:6rem var(--aplus-pad);max-width:var(--aplus-max);margin:0 auto}
.aplus-divider{height:1px;background:linear-gradient(90deg,transparent,#2c2c2e 20%,#2c2c2e 80%,transparent);margin:0 auto;max-width:var(--aplus-max)}
/* hero magichromatic */
.aplus-hero{padding:7rem 2rem 5rem;text-align:center;background:radial-gradient(800px 400px at 50% -10%,rgba(120,120,255,.08),transparent 60%),#000}
.aplus-hero-inner{max-width:980px;margin:0 auto}
.aplus-hero h2{font-family:var(--font-en);font-size:clamp(3rem,9vw,6.2rem);font-weight:800;letter-spacing:-3px;line-height:.92;color:#f5f5f7;margin-bottom:1rem}
.aplus-hero h2 span{display:block;font-size:clamp(1rem,2.5vw,1.6rem);letter-spacing:8px;font-weight:700;color:#a1a1a6;margin-top:.6rem;text-transform:uppercase}
.aplus-hero p{font-size:19px;color:#a1a1a6;line-height:1.7;margin:1.5rem auto 0;max-width:720px}
.aplus-fan{position:relative;display:flex;align-items:end;justify-content:center;gap:0;margin:4rem auto 1rem;max-width:980px;height:420px;overflow:visible}
.aplus-fan img{width:200px;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));border-radius:42px;transition:transform .6s cubic-bezier(.16,1,.3,1);margin:0 -18px}
.aplus-fan img:nth-child(1){transform:rotate(-12deg) translateY(18px);z-index:1;opacity:.95}
.aplus-fan img:nth-child(2){transform:rotate(-5deg) translateY(6px);z-index:2}
.aplus-fan img:nth-child(3){transform:rotate(0deg) translateY(0);z-index:3;scale:1.05}
.aplus-fan img:nth-child(4){transform:rotate(5deg) translateY(6px);z-index:2}
.aplus-fan img:nth-child(5){transform:rotate(12deg) translateY(18px);z-index:1;opacity:.95}
.aplus-fan:hover img:nth-child(1){transform:rotate(-14deg) translateY(10px)}
.aplus-fan:hover img:nth-child(5){transform:rotate(14deg) translateY(10px)}
.aplus-hero-meta{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:2.5rem;font-family:var(--font-en);font-size:13px;letter-spacing:1.5px;color:#86868b;text-transform:uppercase}
.aplus-hero-meta b{color:#f5f5f7;font-size:13px;display:block;letter-spacing:.5px;margin-bottom:2px;text-transform:none}
.aplus-hero-cta{margin-top:2.2rem;display:inline-flex;align-items:center;gap:.6rem;background:#f5f5f7;color:#000;padding:12px 26px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s,background .2s}
.aplus-hero-cta:hover{background:#fff;transform:translateY(-1px)}
/* highlights carousel - Apple style */
.aplus-highlights{background:#000;padding:5rem 0 6rem;overflow:hidden}
.aplus-highlights-head{max-width:var(--aplus-max);margin:0 auto;padding:0 2rem 2.5rem;display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.aplus-highlights-head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.8px;line-height:1.1}
.aplus-highlights-head p{color:#a1a1a6;font-size:15px;max-width:480px;line-height:1.6}
.aplus-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 2rem 1rem}
.aplus-scroll::-webkit-scrollbar{display:none}
.aplus-track{display:flex;gap:1.4rem;width:max-content;padding-bottom:.5rem}
.aplus-hcard{scroll-snap-align:start;flex:0 0 380px;background:linear-gradient(180deg,#1c1c1e 0%,#0a0a0a 100%);border:1px solid #2c2c2e;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;position:relative;min-height:520px;transition:transform .3s,border-color .3s}
.aplus-hcard:hover{transform:translateY(-4px);border-color:#3a3a3c}
.aplus-hcard-media{height:300px;background:#0a0a0a;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.aplus-hcard-media img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.aplus-hcard-media::after{content:'';position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(to top,#0a0a0a,transparent)}
.aplus-hcard-body{padding:1.6rem 1.7rem 1.8rem;flex:1;display:flex;flex-direction:column;gap:.6rem}
.aplus-hcard-kicker{font-family:var(--font-en);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:#a1a1a6;font-weight:700;line-height:1.5}
.aplus-hcard-title{font-size:17px;font-weight:800;line-height:1.3;color:#f5f5f7}
.aplus-hcard-desc{font-size:14px;line-height:1.6;color:#a1a1a6}
.aplus-hcard-badge{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);color:#f5f5f7;font-size:13px;font-weight:700;letter-spacing:.6px;padding:7px 14px;border-radius:999px;font-family:var(--font-en);text-transform:uppercase;line-height:1.5}
/* design explorer */
.aplus-design{padding:6rem 2rem;background:linear-gradient(180deg,#000 0%,#0a0a0a 100%);border-top:1px solid #1c1c1e;border-bottom:1px solid #1c1c1e}
.aplus-design-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;max-width:var(--aplus-max);margin:0 auto}
.aplus-design-visual{position:relative;background:radial-gradient(520px 520px at 50% 35%,rgba(255,255,255,.06),transparent 70%);border:1px solid #1c1c1e;border-radius:32px;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:560px}
.aplus-design-phone{width:280px;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));border-radius:44px}
.aplus-design-swatches{display:flex;gap:.7rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}
.aplus-dsw{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:default;position:relative}
.aplus-dsw::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--c)}
.aplus-dsw.active{border-color:#f5f5f7;box-shadow:0 0 0 1px #000}
.aplus-design-list{display:grid;gap:1.2rem}
.aplus-ditem{display:flex;gap:1rem;padding:1.4rem 1.3rem;background:#1c1c1e;border:1px solid #2c2c2e;border-radius:18px;transition:border-color .2s}
.aplus-ditem:hover{border-color:#3a3a3c}
.aplus-ditem-icon{width:44px;height:44px;border-radius:12px;background:#0a0a0a;border:1px solid #2c2c2e;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#f5f5f7}
.aplus-ditem h4{font-size:15px;font-weight:800;color:#f5f5f7;margin-bottom:4px}
.aplus-ditem p{font-size:13.5px;color:#a1a1a6;line-height:1.6}
.aplus-design h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.7px;line-height:1.1;margin-bottom:1rem}
.aplus-design .lead{font-size:17px;color:#a1a1a6;line-height:1.7;margin-bottom:2rem}
/* cameras */
.aplus-cameras{padding:6rem 2rem;background:#000}
.aplus-cameras-inner{max-width:var(--aplus-max);margin:0 auto}
.aplus-cameras-head{text-align:center;max-width:760px;margin:0 auto 3.5rem}
.aplus-cameras-head h2{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:1rem}
.aplus-cameras-head p{color:#a1a1a6;font-size:17px;line-height:1.7}
.aplus-cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.aplus-cam-card{background:#0a0a0a;border:1px solid #1c1c1e;border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.aplus-cam-media{height:360px;background:radial-gradient(600px 320px at 50% 0%,rgba(120,140,255,.07),transparent 70%),#0a0a0a;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}
.aplus-cam-media img{max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.aplus-cam-body{padding:1.8rem 1.9rem 2rem}
.aplus-cam-kicker{font-family:var(--font-en);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#ff453a;font-weight:800;margin-bottom:.6rem;line-height:1.5}
.aplus-cam-card:last-child .aplus-cam-kicker{color:#0a84ff}
.aplus-cam-body h3{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:.6rem}
.aplus-cam-body p{font-size:14px;color:#a1a1a6;line-height:1.7;margin-bottom:1rem}
.aplus-cam-feats{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
.aplus-cam-feat{background:#1c1c1e;border:1px solid #2c2c2e;border-radius:14px;padding:.9rem 1rem}
.aplus-cam-feat b{display:block;font-size:13px;font-weight:800;color:#f5f5f7;margin-bottom:2px}
.aplus-cam-feat span{font-size:14px;color:#a1a1a6;line-height:1.65}
.aplus-rear-strip{margin-top:1.4rem;background:#0a0a0a;border:1px solid #1c1c1e;border-radius:28px;padding:2.2rem;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.aplus-rear-strip h3{font-size:22px;font-weight:800;letter-spacing:-.6px;margin-bottom:.6rem}
.aplus-rear-strip p{color:#a1a1a6;font-size:14px;line-height:1.7}
.aplus-rear-badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.aplus-badge{font-family:var(--font-en);font-size:13px;letter-spacing:.6px;font-weight:700;padding:7px 14px;border-radius:999px;background:#1c1c1e;border:1px solid #2c2c2e;color:#f5f5f7;line-height:1.5}
/* performance */
.aplus-perf{padding:6rem 2rem;background:radial-gradient(900px 500px at 50% 0%,rgba(80,255,140,.06),transparent 70%),linear-gradient(180deg,#000 0%,#0a0a0a 100%);border-top:1px solid #1c1c1e;border-bottom:1px solid #1c1c1e}
.aplus-perf-inner{max-width:var(--aplus-max);margin:0 auto;display:grid;grid-template-columns:.95fr 1.05fr;gap:4rem;align-items:center}
.aplus-perf h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;letter-spacing:-1px;line-height:1.05;margin-bottom:1rem}
.aplus-perf h2 i{font-style:normal;color:#30d158}
.aplus-perf .lead{font-size:17px;color:#a1a1a6;line-height:1.7;margin-bottom:2rem}
.aplus-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.aplus-stat{background:#1c1c1e;border:1px solid #2c2c2e;border-radius:20px;padding:1.4rem 1.2rem;text-align:center}
.aplus-stat b{display:block;font-family:var(--font-en);font-size:26px;font-weight:800;letter-spacing:-1px;color:#f5f5f7;line-height:1}
.aplus-stat b small{font-size:13px;font-weight:700;color:#a1a1a6;letter-spacing:0}
.aplus-stat span{display:block;margin-top:.5rem;font-size:13.5px;color:#a1a1a6;line-height:1.6}
.aplus-chip-visual{position:relative;background:#0a0a0a;border:1px solid #1c1c1e;border-radius:28px;padding:2.5rem 2rem;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.aplus-chip-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(520px 300px at 50% 30%,rgba(80,255,140,.12),transparent 70%)}
.aplus-chip{width:220px;height:220px;background:linear-gradient(145deg,#1c1c1e,#0a0a0a);border:1px solid #2c2c2e;border-radius:22px;display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.aplus-chip b{font-family:var(--font-en);font-size:42px;font-weight:900;letter-spacing:-2px;color:#f5f5f7}
.aplus-chip em{display:block;font-family:var(--font-en);font-size:13px;letter-spacing:1.2px;color:#30d158;font-style:normal;font-weight:800;margin-top:4px;line-height:1.5}
.aplus-chip::after{content:'';position:absolute;inset:10px;border:1px solid rgba(255,255,255,.06);border-radius:16px;pointer-events:none}
.aplus-chip-img{width:min(100%,340px);height:auto;display:block;position:relative;z-index:1;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
/* iOS + Intelligence */
.aplus-ecosystem{padding:6rem 2rem;background:#000}
.aplus-eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:var(--aplus-max);margin:0 auto}
.aplus-eco-card{background:#0a0a0a;border:1px solid #1c1c1e;border-radius:28px;overflow:hidden;padding:2.2rem 2rem;position:relative}
.aplus-eco-card h3{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:.6rem;display:flex;align-items:center;gap:.6rem}
.aplus-eco-card h3 i{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:16px}
.aplus-eco-card p{font-size:14px;color:#a1a1a6;line-height:1.7;margin-bottom:1.2rem}
.aplus-eco-list{list-style:none;display:grid;gap:.7rem}
.aplus-eco-list li{display:flex;gap:.7rem;align-items:start;font-size:13.5px;color:#d2d2d7;line-height:1.5}
.aplus-eco-list li::before{content:'✓';width:20px;height:20px;border-radius:50%;background:#1c1c1e;border:1px solid #2c2c2e;display:grid;place-items:center;flex-shrink:0;font-size:13px;color:#30d158;font-weight:800;margin-top:1px}
.aplus-eco-visual{margin-top:1.4rem;height:180px;background:linear-gradient(180deg,#1c1c1e,#0a0a0a);border:1px solid #1c1c1e;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.aplus-eco-visual img{max-width:82%;max-height:82%;object-fit:contain}
/* why tradeinplus - mirrors why apple is best */
.aplus-why{padding:5rem 2rem;background:#0a0a0a;border-top:1px solid #1c1c1e;border-bottom:1px solid #1c1c1e}
.aplus-why-inner{max-width:var(--aplus-max);margin:0 auto}
.aplus-why h2{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.7px;text-align:center;margin-bottom:2.5rem}
.aplus-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.aplus-why-card{background:#1c1c1e;border:1px solid #2c2c2e;border-radius:22px;padding:1.8rem 1.6rem;text-align:center;transition:transform .2s,border-color .2s}
.aplus-why-card:hover{transform:translateY(-3px);border-color:#3a3a3c}
.aplus-why-card i{width:48px;height:48px;border-radius:14px;background:#0a0a0a;border:1px solid #2c2c2e;display:grid;place-items:center;margin:0 auto 1rem;font-style:normal;color:#f5f5f7}
.aplus-why-card h4{font-size:15px;font-weight:800;margin-bottom:.4rem}
.aplus-why-card p{font-size:13.5px;color:#a1a1a6;line-height:1.6}
/* responsive */
@media (max-width:900px){
  .aplus-fan{height:320px}
  .aplus-fan img{width:150px;margin:0 -12px;border-radius:32px}
  .aplus-design-grid,.aplus-cam-grid,.aplus-perf-inner,.aplus-eco-grid,.aplus-why-grid{grid-template-columns:1fr;gap:1.2rem}
  .aplus-rear-strip{grid-template-columns:1fr}
  .aplus-stats{grid-template-columns:repeat(3,1fr)}
  .aplus-chip{width:180px;height:180px}.aplus-chip-img{width:min(100%,240px)}
}
@media (max-width:640px){
  .aplus-hero{padding:5rem 1.5rem 3rem}
  .aplus-hero h2{letter-spacing:-1.5px}
  .aplus-fan{height:260px;margin:2.5rem auto 1rem}
  .aplus-fan img{width:110px;margin:0 -8px;border-radius:24px}
  .aplus-hcard{flex:0 0 300px;min-height:460px}
  .aplus-section{padding:4.5rem 1.5rem}
  .aplus-highlights-head{padding:0 1.5rem 2rem}
  .aplus-scroll{padding:0 1.5rem 1rem}
  .aplus-stats{grid-template-columns:1fr 1fr 1fr;gap:.7rem}
  .aplus-stat b{font-size:22px}
  .aplus-design{padding:4.5rem 1.5rem}
  .aplus-design-visual{min-height:460px;padding:2rem 1rem}
  .aplus-design-phone{width:220px}
  .aplus-cameras,.aplus-perf,.aplus-ecosystem,.aplus-why{padding:4.5rem 1.5rem}
  .aplus-cam-media{height:280px}
}
@media (prefers-reduced-motion:reduce){
  .aplus-fan img,.aplus-hcard,.aplus-why-card,.aplus-ditem{transition:none !important;transform:none !important}
}

/* ============================================================
   APPLE DESIGN SYSTEM LAYER — dark
   مرجع: apple.com/in/iphone-17 (قياسات مأخوذة من الصفحة الحيّة)
   وزن 600 لكل العناوين · سُلّم 64/56/32/28/17 · إيقاع 160/216
   ملاحظة: الـtracking السالب يتطبق على اللاتيني فقط —
   الخط العربي يفضل letter-spacing:0
   ============================================================ */
.aplus{
  --ap-bg:#000;            /* مقابل #fff عند Apple */
  --ap-bg-alt:#0a0a0a;     /* مقابل #f5f5f7 */
  --ap-ink:#f5f5f7;
  --ap-ink-2:#a1a1a6;
  --ap-ink-3:#a1a1a6;
  --ap-line:#1d1d1f;
  --ap-card:#141416;
  --ap-blue:#0071e3;
  --ap-link:#2997ff;
  --ap-pad-t:clamp(72px,9vw,160px);
  --ap-pad-b:clamp(92px,12vw,216px);
  --ap-gut:clamp(20px,4vw,40px);
}

/* ---------- إيقاع الأقسام + تبادل الخلفيات ---------- */
.aplus-hero,.aplus-highlights,.aplus-design,.aplus-cameras,
.aplus-perf,.aplus-ecosystem,.aplus-why,.ap-sec{
  padding-top:var(--ap-pad-t);
  padding-bottom:var(--ap-pad-b);
  padding-left:var(--ap-gut);
  padding-right:var(--ap-gut);
}
.aplus-highlights{padding-left:0;padding-right:0}
.aplus-design,.aplus-perf{background:var(--ap-bg-alt);border-top:1px solid var(--ap-line);border-bottom:1px solid var(--ap-line)}
.aplus-cameras,.aplus-ecosystem,.aplus-hero{background:var(--ap-bg)}
.aplus-highlights{background:var(--ap-bg-alt)}
.aplus-why{background:var(--ap-bg)}
.ap-sec--alt{background:var(--ap-bg-alt)}
.ap-wrap{max-width:1200px;margin:0 auto}

/* ---------- سُلّم الخطوط ---------- */
.aplus h2,.aplus h3,.aplus h4,.aplus .ap-h{font-weight:600;letter-spacing:0;color:var(--ap-ink)}
.aplus [lang="en"],.aplus .ap-lat{letter-spacing:-.02em}

.aplus .ap-eyebrow,.ap-eyebrow{                      /* = Apple "Design." 28/32 w600 */
  font-size:clamp(20px,2.4vw,28px);line-height:1.35;font-weight:600;
  color:var(--ap-ink);margin:0 0 .55rem;letter-spacing:0;
}
.aplus .ap-eyebrow--muted,.ap-eyebrow--muted{color:var(--ap-ink-2)}
.aplus .ap-head,.ap-head{                          /* = Apple section headline 56/60 */
  font-size:clamp(28px,5vw,56px);line-height:1.24;font-weight:600;
  letter-spacing:0;color:var(--ap-ink);margin:0;
}
.aplus .ap-sub,.ap-sub{                           /* = 32/36 */
  font-size:clamp(21px,3vw,32px);line-height:1.3;font-weight:600;color:var(--ap-ink);margin:0;
}
.aplus .ap-body,.ap-body{font-size:17px;line-height:1.65;color:var(--ap-ink-2);margin:1rem 0 0;max-width:62ch}
.aplus .ap-tile-title,.ap-tile-title{font-size:17px;line-height:1.45;font-weight:600;color:var(--ap-ink);margin:0}
.aplus .ap-note,.ap-note{font-size:13px;line-height:1.5;color:var(--ap-ink-3);margin-top:.9rem}

/* توحيد عناوين الأقسام القديمة على سُلّم Apple */
.aplus-hero h2{font-size:clamp(38px,8vw,64px);line-height:1.12;font-weight:600;letter-spacing:-.01em}
.aplus-hero h2 span{font-size:clamp(15px,2vw,21px);letter-spacing:.5px;font-weight:600;color:var(--ap-ink-2);text-transform:none;margin-top:1rem}
.aplus-highlights-head h2,.aplus-design h2,.aplus-cameras-head h2,
.aplus-perf h2,.aplus-why h2,.aplus-ecosystem .aplus-title{
  font-size:clamp(28px,5vw,56px);line-height:1.24;font-weight:600;letter-spacing:0;
}
.aplus-hcard-title,.aplus-cam-body h3,.aplus-ditem h4,
.aplus-eco-card h3,.aplus-why-card h4,.aplus-rear-strip h3{font-weight:600;letter-spacing:0}
.aplus-hcard-title{font-size:17px;line-height:1.45}
.aplus-cam-body h3,.aplus-rear-strip h3{font-size:clamp(19px,2.2vw,24px);line-height:1.25}
.aplus-stat b,.aplus-chip b{font-weight:600}
.aplus-eyebrow{font-size:13px;letter-spacing:2.4px;color:var(--ap-ink-2);font-weight:600}

/* ---------- الأزرار: كبسولة 980px مثل Apple ---------- */
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:980px;padding:11px 22px;font-size:16px;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .22s ease,transform .22s ease,opacity .22s ease}
.ap-btn--fill{background:var(--ap-blue);color:#fff}
.ap-btn--fill:hover{background:#0077ed}
.ap-btn--ghost{background:transparent;color:var(--ap-link);border-color:rgba(41,151,255,.35)}
.ap-btn--ghost:hover{background:rgba(41,151,255,.10)}
.aplus-hero-cta{border-radius:980px;font-weight:600}
.aplus-badge,.aplus-hcard-badge{border-radius:980px;font-weight:600}
.aplus a.ap-link{color:var(--ap-link);text-decoration:none}
.aplus a.ap-link:hover{text-decoration:underline}

/* ---------- ظهور عند التمرير (opacity/transform فقط — بلا CLS) ---------- */
.ap-js .ap-reveal{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.ap-js .ap-reveal.is-in{opacity:1;transform:none}
.ap-js .ap-reveal[data-d="1"]{transition-delay:.08s}
.ap-js .ap-reveal[data-d="2"]{transition-delay:.16s}
.ap-js .ap-reveal[data-d="3"]{transition-delay:.24s}
.ap-js .ap-reveal[data-d="4"]{transition-delay:.32s}

/* ---------- الهيرو: صورة Apple الأصلية + عنوان متدرّج ---------- */
.ap-hero-stage{position:relative;max-width:920px;margin:2.5rem auto 0;
  aspect-ratio:1278/814;display:grid;place-items:center}
.ap-hero-stage img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.75));
  will-change:transform;transform:scale(var(--ap-hs,1))}
.ap-hero-glow{position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%,rgba(169,119,200,.20),transparent 70%),
             radial-gradient(45% 40% at 30% 60%,rgba(111,140,199,.16),transparent 70%),
             radial-gradient(45% 40% at 70% 60%,rgba(99,154,71,.14),transparent 70%);
  filter:blur(20px)}
.ap-magic{                        /* تدرّج عنوان Apple الحقيقي */
  background:linear-gradient(90deg,#a977c8,#6f8cc7 12%,#639a47 24%,#f5f5f7 44%,#f5f5f7 60%,#a977c8 78%,#6f8cc7 88%,#639a47 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- شريط مواصفات التصميم (Display / Shield / Action) ---------- */
.ap-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:3rem}
.ap-strip-card{background:var(--ap-card);border:1px solid var(--ap-line);border-radius:24px;
  overflow:hidden;display:flex;flex-direction:column}
.ap-strip-media{aspect-ratio:16/9;display:grid;place-items:center;padding:14px;
  background:radial-gradient(70% 70% at 50% 40%,rgba(255,255,255,.05),transparent 70%)}
.ap-strip-media img{max-width:100%;max-height:100%;object-fit:contain}
.ap-strip-body{padding:20px 22px 24px}
.aplus .ap-strip-body p,.ap-strip-body p{font-size:14px;line-height:1.6;color:var(--ap-ink-2);margin-top:.4rem}

/* ---------- منتقي الألوان الحقيقي (colornav) ---------- */
.ap-colornav{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.ap-sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  padding:0;cursor:pointer;background:var(--c);position:relative;
  transition:transform .2s ease;outline-offset:6px}
.ap-sw::after{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid transparent;transition:border-color .2s ease}
.ap-sw[aria-checked="true"]::after{border-color:var(--ap-ink)}
.ap-sw:hover{transform:scale(1.08)}
.ap-color-stage{position:relative;display:grid;place-items:center;min-height:min(58vw,440px)}
.ap-color-stage img{grid-area:1/1;max-width:min(72%,300px);height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  opacity:0;transition:opacity .5s ease}
.ap-color-stage img.is-on{opacity:1}
.ap-color-name{margin-top:1.2rem;text-align:center;font-size:17px;font-weight:600;color:var(--ap-ink)}

/* ---------- تمرير لاصق للكاميرا الخلفية (sticky-scroll) ---------- */
.ap-sticky{position:relative;height:220vh}
.ap-sticky-inner{position:sticky;top:0;height:100vh;display:grid;place-items:center;
  overflow:hidden;padding:0 var(--ap-gut)}
.ap-sticky-inner::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 52% at 50% 46%,rgba(0,0,0,.88),rgba(0,0,0,.62) 58%,rgba(0,0,0,.28) 100%)}
.ap-sticky-copy{position:relative;z-index:2;text-align:center;max-width:760px;
  opacity:var(--ap-so,1);transition:opacity .3s linear}
.ap-sticky-img{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.ap-sticky-img img{width:min(112%,1040px);height:auto;opacity:.5;
  transform:scale(var(--ap-ss,1.15));will-change:transform;
  filter:drop-shadow(0 40px 90px rgba(0,0,0,.8))}

/* ---------- تبويبات مزايا الكاميرا الأمامية ---------- */
.ap-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:2.4rem}
.ap-tab{background:var(--ap-card);border:1px solid var(--ap-line);color:var(--ap-ink-2);
  border-radius:980px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background .2s,color .2s,border-color .2s}
.ap-tab[aria-selected="true"]{background:var(--ap-ink);color:#000;border-color:var(--ap-ink)}
.ap-panel{display:none;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.ap-panel.is-on{display:grid}
.ap-panel-media{background:var(--ap-card);border:1px solid var(--ap-line);border-radius:28px;
  overflow:hidden;aspect-ratio:4/5;max-width:440px;width:100%;margin-inline:auto;display:grid;place-items:center}
.ap-panel-media img{width:100%;height:100%;object-fit:cover}

/* ---------- جاليري أفقي بضوابط Apple (all-access-pass) ---------- */
.ap-gal{position:relative}
.ap-gal-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:0 var(--ap-gut) 8px;scroll-padding-inline:var(--ap-gut)}
.ap-gal-track::-webkit-scrollbar{display:none}
.ap-card{scroll-snap-align:center;flex:0 0 min(84vw,360px);background:var(--ap-card);
  border:1px solid var(--ap-line);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.ap-card-media{aspect-ratio:3/4;overflow:hidden;background:#000}
.ap-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.ap-card-body{padding:20px 22px 26px}
.aplus .ap-card-body p,.ap-card-body p{font-size:14px;line-height:1.6;color:var(--ap-ink-2);margin-top:.45rem}
/* شريط التحكم: زر تشغيل 56px + نقاط — مطابق لـ Apple */
.ap-aap{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2rem}
.ap-playpause{width:56px;height:56px;border-radius:32px;flex:0 0 56px;
  background:var(--ap-card);border:1px solid var(--ap-line);color:var(--ap-ink);
  display:grid;place-items:center;cursor:pointer;transition:background .2s}
.ap-playpause:hover{background:#1c1c1e}
.ap-dots{display:flex;align-items:center;gap:10px;height:56px;padding:0 22px;
  background:var(--ap-card);border:1px solid var(--ap-line);border-radius:28px}
.ap-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .25s,transform .25s}
.ap-dot[aria-selected="true"]{background:var(--ap-ink);transform:scale(1.15)}

/* ---------- أرقام كبيرة على طريقة Apple ---------- */
.ap-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;margin-top:3rem}
.ap-fig{text-align:center}
.aplus .ap-fig small,.ap-fig small{display:block;font-size:14px;color:var(--ap-ink-2);font-weight:600}
.aplus .ap-fig b,.ap-fig b{display:block;font-size:clamp(34px,5.5vw,56px);line-height:1.05;font-weight:600;color:var(--ap-ink);margin:.2rem 0}
.aplus .ap-fig span,.ap-fig span{display:block;font-size:14px;color:var(--ap-ink-2);line-height:1.5}

/* ---------- مسؤولية الصور ---------- */
.ap-credit{text-align:center;font-size:13.5px;color:var(--ap-ink-3);padding:0 var(--ap-gut) 3rem;background:var(--ap-bg);line-height:1.8}

@media (max-width:833px){
  .ap-panel.is-on{grid-template-columns:1fr}
  .ap-sticky{height:180vh}
  .ap-hero-stage{aspect-ratio:1/.85}
}
@media (prefers-reduced-motion:reduce){
  .ap-js .ap-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .ap-hero-stage img,.ap-sticky-img img{transform:none!important}
  .ap-sticky{height:auto}
  .ap-sticky-inner{position:static;height:auto;padding:var(--ap-pad-t) var(--ap-gut)}
  .ap-sticky-img{position:relative;inset:auto;margin-top:2rem}
}

.ap-magic{font-style:normal;display:inline}
.aplus-hero h2 i.ap-magic{font-style:normal}

/* ============================================================
   أرضية القراءة + ضبط الاتجاه
   المشكلة: نصوص من 10px لـ 11.5px بتباعد حروف 2–3px (بتتكسر وتتقري بصعوبة)،
   ونص عربي بـ 12.5px، وأسطر لاتينية خالصة جوّه سياق RTL بترتيبها بيتقلب.
   القاعدة: لا لاتيني تحت 12px، ولا عربي تحت 13.5px، والتباعد أقصاه 1.4px.
   ‏unicode-bidi:plaintext بيخلي اتجاه كل سطر يتحدد من أول حرف قوي فيه —
   فالسطر اللاتيني الخالص يبقى LTR والعربي يفضل RTL، من غير أي تعديل في النص.
   لازم يتقرن بـ text-align صريح، وإلا المحاذاة بتتبع الاتجاه المحسوب وتتنطّ.
   ============================================================ */

/* ---------- 1) اتجاه الأسطر المختلطة ---------- */
.aplus .aplus-hcard-kicker,
.aplus .aplus-cam-kicker,
.aplus .aplus-cam-feat b,
.aplus .aplus-cam-feat span,
.aplus .aplus-ditem h4,
.aplus .aplus-eco-list li,
.aplus .ap-tile-title{unicode-bidi:plaintext;text-align:right}
.aplus .aplus-badge,
.aplus .aplus-hcard-badge,
.aplus .aplus-hero-meta b,
.aplus .aplus-hero-meta span,
.aplus .aplus-hero-meta div,
.aplus .aplus-chip b,
.aplus .aplus-chip em,
.aplus .aplus-stat b,
.aplus .aplus-stat span,
.aplus .ap-fig small,
.aplus .ap-fig b,
.aplus .ap-fig span{unicode-bidi:plaintext;text-align:center}

/* ---------- 2) التسميات اللاتينية الصغيرة: 12px بتباعد أهدأ ---------- */
.aplus .aplus-hcard-kicker,
.aplus .aplus-cam-kicker{font-size:13px;letter-spacing:1.4px;line-height:1.5}
.aplus .aplus-eyebrow{font-size:13px;letter-spacing:1.4px;line-height:1.6}
.aplus .aplus-hcard-badge,
.aplus .aplus-badge{font-size:13px;letter-spacing:.6px;padding:7px 14px}
.aplus .aplus-chip em{font-size:13px;letter-spacing:1.2px;line-height:1.5}
.aplus .aplus-hero-meta{font-size:13.5px;letter-spacing:.6px;line-height:1.6}
.aplus .aplus-hero-meta b{font-size:14.5px;letter-spacing:0}

/* ---------- 3) النص العربي الثانوي: 14px فما فوق ---------- */
.aplus .aplus-hcard-desc,
.aplus .aplus-cam-body p,
.aplus .aplus-eco-card p,
.aplus .ap-card-body p,
.aplus .ap-strip-body p,
.aplus .aplus-rear-strip p{font-size:15px;line-height:1.75}
.aplus .aplus-ditem p,
.aplus .aplus-why-card p,
.aplus .aplus-eco-list li{font-size:14.5px;line-height:1.75}
.aplus .aplus-cam-feat b{font-size:14px;line-height:1.5}
.aplus .aplus-cam-feat span{font-size:13.5px;line-height:1.6}
.aplus .aplus-stat span,
.aplus .ap-fig span,
.aplus .ap-fig small{font-size:13.5px;line-height:1.55}
.aplus .aplus-highlights-head p{font-size:17px;line-height:1.65}
.aplus .aplus-ditem h4,
.aplus .aplus-why-card h4{font-size:16px;line-height:1.45}
.aplus .ap-credit,
.ap-credit{font-size:13px;line-height:1.8}

/* ملاحظة: أرضية باقي عناصر الصفحة اتنقلت لـ css/responsive.css (READABILITY FLOOR)
   عشان تسري على كل صفحات المنتجات مش الصفحة دي بس. */
.aplus .ap-credit,.ap-credit{font-size:13.5px;line-height:1.8}

/* على الشاشات الصغيرة النص بيقل أكتر — نثبّت نفس الأرضية */
@media (max-width:640px){
  .aplus .aplus-hcard-desc,
  .aplus .aplus-cam-body p,
  .aplus .ap-card-body p,
  .aplus .ap-strip-body p{font-size:14.5px}
  .aplus .aplus-highlights-head p{font-size:15.5px}
  .aplus .aplus-hero-meta{font-size:13px}
}

/* ============================================================
   PREMIUM MOTION + COMPOSITION LAYER
   ------------------------------------------------------------
   طبقة الترقية السينمائية للصفحات الرائدة. كل حاجة هنا مبنية على
   transform/opacity بس (مافيش top/left/width) عشان الحركة تفضل على
   الـcompositor، ومافيش أي كلاس تخطيط بيتحط من JS بعد أول رسمة —
   ده كان سبب CLS 0.55 قبل كده.
   ============================================================ */

/* ---------- 0) إصلاح: position:sticky كان ميت ----------
   الصفحات دي بتحمّل `body{overflow-x:hidden}`، والـused value لـoverflow-y
   ساعتها بيبقى auto — يعني الـbody نفسه بيبقى صندوق تمرير. أي عنصر
   position:sticky جوّاه بيلزق لصندوق الـbody، والصندوق ده مابيتمرّرش
   (الـviewport هو اللي بيتمرّر)، فاللزق مابيحصلش أبدًا من غير أي خطأ.
   ده كان بيسيب قسم .ap-sticky كتلة سودا فاضية بارتفاع ~1100px بعد ما
   محتواه يعدّي في أول شاشة.

   `clip` بيقص أفقيًا من غير ما يعمل صندوق تمرير، فالـsticky بيرجع يشتغل
   والقص الأفقي زي ما هو. الشرط بـ:has بيقصر القاعدة على الصفحات اللي
   فيها قسم لاصق فعلاً، عشان مانغيّرش سلوك التمرير في صفحة مالهاش داعي. */
@supports selector(body:has(*)) {
  body:has(.ap-sticky){overflow-x:clip}
}

/* ---------- 1) إصلاح: زر الهيرو كان أبيض على أبيض ----------
   `.aplus a{color:inherit}` وزنه (0,2,0) وبيغلب `.aplus-hero-cta`
   (0,1,0)، فالزر كان بيورّث #f5f5f7 فوق خلفية #f5f5f7 — تباين 1:1.
   والـ!important هنا عشان `html[data-theme="dark"] a{color:#fff!important}`
   في الستايل الداخلي للصفحة. */
.aplus a.aplus-hero-cta,
html[data-theme="dark"] .aplus a.aplus-hero-cta{color:#000!important}
.aplus a.aplus-hero-cta:hover,
.aplus a.aplus-hero-cta:focus-visible{color:#000!important}

/* ---------- 2) مسرح الهيرو: الصور مربعة 600×600 ----------
   الـaspect-ratio القديم (1278/814) كان بيتلغي بـ`img{height:auto}`،
   فالمسرح كان بيطلع 920×920 والأجهزة في نص الكادر بـ~500px فراغ ميت
   فوق وتحت. القياس دلوقتي بالارتفاع والصورة بتتوسّع للعرض المتاح. */
.ap-hero-stage{
  aspect-ratio:auto;
  height:auto;
  margin-top:clamp(2rem,5vw,3.5rem);
}
/* الارتفاع على الصورة نفسها، مش نسبة من المسرح: height:100% جوّه
   grid بـplace-items:center مابيتحلّش لقيمة قاطعة، فالصورة كانت بترجع
   لمقاسها الأصلي 600px وتطلع من القسم وتغطي البيانات تحتيها. */
.ap-hero-stage img{
  width:auto;max-width:100%;height:clamp(280px,42vh,500px);
  transform:scale(var(--ap-hs,1)) translate3d(0,var(--ap-par,0px),0);
  transition:filter .6s ease;
}

/* ---------- 3) دخول سينمائي عند فتح الصفحة ----------
   ستاجر يدوي: الخلفية → العنوان → النص → المنتج → البيانات → الزر.
   بيشتغل مرة واحدة، وبيتلغي بالكامل مع prefers-reduced-motion. */
.ap-js .ap-enter>*{opacity:0;transform:translate3d(0,22px,0)}
.ap-js .ap-enter.is-in>*{animation:ap-rise .95s cubic-bezier(.16,1,.3,1) forwards}
.ap-js .ap-enter>*:nth-child(1){animation-delay:.05s}
.ap-js .ap-enter>*:nth-child(2){animation-delay:.14s}
.ap-js .ap-enter>*:nth-child(3){animation-delay:.23s}
.ap-js .ap-enter>*:nth-child(4){animation-delay:.30s}
.ap-js .ap-enter>*:nth-child(5){animation-delay:.46s}
.ap-js .ap-enter>*:nth-child(6){animation-delay:.56s}
.ap-js .ap-enter>*:nth-child(n+7){animation-delay:.64s}
/* المسرح بيدخل بتكبير ناعم بدل الإزاحة — الحركة بتخصّ المنتج نفسه */
.ap-js .ap-enter>.ap-hero-stage{transform:scale(.92)}
.ap-js .ap-enter.is-in>.ap-hero-stage{animation-name:ap-rise-scale;animation-duration:1.4s}
@keyframes ap-rise{to{opacity:1;transform:none}}
@keyframes ap-rise-scale{to{opacity:1;transform:scale(1)}}

/* ---------- 4) صيغ ظهور إضافية حسب أهمية العنصر ---------- */
.ap-js .ap-reveal--scale{opacity:0;transform:scale(.965);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.ap-js .ap-reveal--scale.is-in{opacity:1;transform:none}
.ap-js .ap-reveal--clip{opacity:0;clip-path:inset(14% 0 14% 0 round 28px);
  transition:opacity .8s ease,clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.ap-js .ap-reveal--clip.is-in{opacity:1;clip-path:inset(0 0 0 0 round 28px)}
.ap-js .ap-reveal[data-d="5"]{transition-delay:.40s}
.ap-js .ap-reveal[data-d="6"]{transition-delay:.48s}

/* ---------- 5) شريط تقدّم التمرير ----------
   خيط 2px فوق خالص. transform:scaleX بس، من غير أي إعادة تخطيط. */
.ap-progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:1200;
  pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#2997ff,#a977c8 55%,#f5f5f7);
  opacity:0;transition:opacity .3s ease;
}
html[dir="rtl"] .ap-progress{transform-origin:100% 50%}
.ap-progress.is-on{opacity:1}

/* ---------- 6) لحظة لاصقة للمنتج ----------
   النسخة الأصلية (.ap-sticky) مبنية لصورة كاميرا عريضة بتملا الكادر
   والنص فوقها. صورة منتج طولية جوّه نفس التخطيط بتقعد ورا النص وتبقى
   ضوضا. النسخة دي بتفك التكديس: النص فوق والمنتج تحته، والاتنين في
   نفس العمود — والتمرير بيصغّر المنتج ويطلّع النص. */
.ap-sticky--product{height:175vh}
.ap-sticky--product .ap-sticky-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.4rem,3.5vh,2.6rem);
  /* الهيدر لاصق وبيغطّي أول ~100px من الإطار المثبّت — الحشو العلوي
     بينزّل المحتوى تحته بدل ما أول سطر يتقص. */
  padding-block:clamp(120px,15vh,158px) clamp(1rem,4vh,2.5rem);
}
.ap-sticky--product .ap-sticky-inner::after{content:none}
.ap-sticky--product .ap-sticky-copy{order:1;transform:translate3d(0,calc(var(--ap-sy,0) * -1px),0)}
.ap-sticky--product .ap-sticky-copy .ap-head{margin-bottom:.4rem}
.ap-sticky--product .ap-sticky-img{
  order:2;position:static;inset:auto;min-height:0;
  display:grid;place-items:center;isolation:isolate;
}
/* هالة خفيفة ورا المنتج — بتديله عمق من غير ما تغطي أي نص */
.ap-sticky--product .ap-sticky-img::before{
  content:'';position:absolute;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(120,140,200,.16),transparent 68%);filter:blur(24px);
}
.ap-sticky--product .ap-sticky-img img{
  width:auto;height:min(40vh,380px);opacity:1;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.9));
}
/* أرقام الحواف حوالين اللحظة اللاصقة */
.ap-sticky-figs{
  display:flex;gap:clamp(1.6rem,4vw,3.4rem);justify-content:center;flex-wrap:wrap;
  margin-top:2rem;
}
.ap-sticky-figs div{text-align:center;unicode-bidi:plaintext}
.ap-sticky-figs b{display:block;font-family:var(--font-en);font-size:clamp(24px,3.4vw,38px);
  font-weight:600;letter-spacing:-.02em;color:var(--ap-ink);line-height:1.1}
.ap-sticky-figs b small{font-size:.42em;font-weight:600;color:var(--ap-ink-2);letter-spacing:0}
.ap-sticky-figs span{display:block;margin-top:.35rem;font-size:13.5px;color:var(--ap-ink-2);line-height:1.5}

/* ---------- 7) الإحصاءات كأرقام كبيرة (نفس المحتوى، عرض أفخم) ---------- */
.aplus-stats--figures{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.4rem)}
.aplus-stats--figures .aplus-stat{
  background:transparent;border:0;border-radius:0;padding:0 .6rem;
  border-inline-start:1px solid var(--ap-line);
}
.aplus-stats--figures .aplus-stat:first-child{border-inline-start:0}
.aplus-stats--figures .aplus-stat b{font-size:clamp(38px,6vw,68px);letter-spacing:-.03em;line-height:1}
.aplus-stats--figures .aplus-stat b small{font-size:.34em;letter-spacing:0}
.aplus-stats--figures .aplus-stat span{margin-top:.7rem;font-size:14px}

/* ---------- 8) لوح التصميم: صورة أكبر + طفو خفيف + ألوان تفاعلية ---------- */
.aplus-design-visual{min-height:clamp(420px,52vh,560px);overflow:hidden}
/* الصور طولية (255×416): تحديد العرض بيخلي الارتفاع يتخطى اللوح ويتقص.
   القياس بالارتفاع بيخلي الجهاز يقعد جوّه الإطار على أي مقاس شاشة. */
.aplus-design-phone{height:clamp(280px,40vh,420px);width:auto;max-width:100%}
.aplus-design-stage{transform:translate3d(0,var(--ap-par,0px),0);will-change:transform}
/* الألوان بقت أزرار حقيقية: نفس الشكل + حالات لمس ولوحة مفاتيح */
button.aplus-dsw{cursor:pointer;background:none;padding:0;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),border-color .22s}
button.aplus-dsw:hover{transform:scale(1.12)}
button.aplus-dsw:active{transform:scale(1.02)}
button.aplus-dsw[aria-checked="true"]{border-color:var(--ap-ink)}
.aplus-design-stage{position:relative;display:grid;place-items:center;
  width:100%;min-height:clamp(280px,40vh,420px)}
.aplus-design-stage img{grid-area:1/1;opacity:0;transition:opacity .55s ease}
.aplus-design-stage img.is-on{opacity:1}

/* ---------- 9) الشريحة بتطفو مع التمرير ---------- */
.aplus-chip-img{transform:translate3d(0,var(--ap-par,0px),0);will-change:transform}

/* ---------- 10) تفاعلات دقيقة ---------- */
.aplus-hero-cta{position:relative;overflow:hidden}
.aplus-hero-cta .ap-arrow{display:inline-block;transition:transform .32s cubic-bezier(.16,1,.3,1)}
.aplus-hero-cta:hover .ap-arrow,
.aplus-hero-cta:focus-visible .ap-arrow{transform:translateY(3px)}
.aplus-hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.aplus-why-card,.aplus-ditem,.ap-strip-card{
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s}
.aplus-why-card:hover{transform:translateY(-5px)}
.aplus-why-card i{transition:transform .45s cubic-bezier(.34,1.4,.64,1)}
.aplus-why-card:hover i{transform:translateY(-2px) scale(1.06)}
.ap-color-stage img{transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.ap-color-stage img.is-on{transform:none}
.ap-color-stage img:not(.is-on){transform:scale(.97)}

/* ---------- 10b) عناوين الأقسام الطويلة: عرض قراءة محدود ----------
   56px عبر 1440px بيخلي جملة كاملة تمتد من حافة للحافة وتتقري كلافتة
   مش كعنوان. الحد ده بيكسّرها على سطرين متوازنين. */
.aplus-why h2,.aplus-highlights-head h2{max-width:22ch;margin-inline:auto}
.aplus-design h2,.aplus-perf h2{max-width:16ch}

/* ---------- 11) انتقالات بين الأقسام: تدرّج بدل حافة حادة ---------- */
.ap-seam{height:clamp(70px,9vw,130px);margin:0;border:0;
  background:linear-gradient(180deg,var(--ap-seam-from,#000),var(--ap-seam-to,#0a0a0a))}

@media (max-width:833px){
  .ap-hero-stage img{height:clamp(220px,32vh,340px)}
  .aplus-stats--figures{grid-template-columns:1fr;gap:1.4rem}
  .aplus-stats--figures .aplus-stat{border-inline-start:0;border-top:1px solid var(--ap-line);
    padding:1.1rem .2rem 0;display:flex;align-items:baseline;gap:1rem;text-align:start}
  .aplus-stats--figures .aplus-stat:first-child{border-top:0;padding-top:0}
  .aplus-stats--figures .aplus-stat b{font-size:clamp(32px,9vw,46px);flex:0 0 auto}
  .aplus-stats--figures .aplus-stat span{margin-top:0;text-align:start}
  .aplus-design-phone{height:clamp(240px,44vw,340px)}
  .ap-sticky--product{height:165vh}
  .ap-sticky--product .ap-sticky-img img{height:min(32vh,300px)}
}

/* ---------- 12) احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .ap-js .ap-enter>*,.ap-js .ap-enter.is-in>*{opacity:1!important;transform:none!important;animation:none!important}
  .ap-js .ap-reveal--scale,.ap-js .ap-reveal--clip{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .ap-progress{display:none}
  .ap-hero-stage img,.aplus-design-phone,.aplus-chip-img,
  .aplus-design-stage,.ap-sticky--product .ap-sticky-copy{transform:none!important}
  /* الكتلة الأقدم فوق فيها `.ap-sticky{height:auto}` بوزن (0,1,0)،
     و`.ap-sticky--product{height:175vh}` وزنه (0,2,0) فكان بيغلبها —
     يعني في وضع تقليل الحركة كان هيفضل قسم فاضي بارتفاع 175vh. */
  .ap-sticky--product{height:auto}
  .ap-sticky--product .ap-sticky-inner{
    position:static;height:auto;padding-block:var(--ap-pad-t) var(--ap-pad-b)}
  .ap-sticky--product .ap-sticky-img img{transform:none!important}
  .aplus-hero-cta:hover,.aplus-why-card:hover{transform:none!important}
}