/* =====================================================================
   Tama Square — theater.css
   ستايل مستقل بالكامل لصفحة «مسرح المنتج». لا يعتمد على site.css.
   الطقم: كحلي #121A27 / #172131 / #1B2637 · ذهب #B39359 / #D2B47A / #8F7443
          أوف-وايت #F1ECE3 · ثانوي #B9B3A7 · خافت #7E8798 — لا hex آخر.
   الحركة: transform / opacity / clip-path فقط.
   ===================================================================== */

@property --accent      { syntax: '<color>'; inherits: true; initial-value: #B39359; }
@property --accent-glow { syntax: '<color>'; inherits: true; initial-value: rgba(179,147,89,.28); }
@property --light       { syntax: '<color>'; inherits: true; initial-value: #F1ECE3; }
@property --lx          { syntax: '<length-percentage>'; inherits: true; initial-value: 88%; }   /* موضع المصباح على طاولة الضوء */
@property --spot        { syntax: '<length-percentage>'; inherits: true; initial-value: 0px; }   /* نصف قطر ضوء الشارة */
@property --ba          { syntax: '<angle>';             inherits: true; initial-value: 0deg; }  /* زاوية جهاز الإسقاط */
@property --sx          { syntax: '<percentage>';        inherits: true; initial-value: 50%; }   /* موضع اللمعة على الزجاج */

:root {
  --navy: #121A27; --navy-2: #172131; --card: #1B2637;
  --gold: #B39359; --gold-l: #D2B47A; --gold-d: #8F7443;
  --off: #F1ECE3; --dim: #B9B3A7; --mute: #7E8798;

  --accent: #B39359; --accent-rgb: 179,147,89; --accent-ink: #121A27;
  --accent-glow: rgba(179,147,89,.28); --light: #F1ECE3; --bg-lift: #121A27;

  --font: "Cairo", system-ui, sans-serif;
  --display: "Cairo", system-ui, sans-serif;
  --latin: "Michroma", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --header-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r: 24px;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy); color: var(--off); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; font: 400 1rem/1.75 var(--font); background: var(--navy); color: var(--off); overflow-x: clip; }
main { position: relative; z-index: 1; background: var(--navy); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { inline-size: min(100% - 2.5rem, 1280px); margin-inline: auto; }
.mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-weight: 500; }
.latin { display: block; font-family: var(--latin); font-size: .62rem; letter-spacing: .35em; text-transform: uppercase; direction: ltr; unicode-bidi: isolate; color: var(--mute); margin-block: .25rem .6rem; }
.g { color: var(--accent); transition: color .45s; }
.dim { color: var(--dim); } .mute { color: var(--mute); } .xs { font-size: .74rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font: 700 .8rem/1 var(--font); letter-spacing: .02em; color: var(--accent); }
.eyebrow::before { content: ''; inline-size: 22px; block-size: 1px; background: var(--accent); }
.h-lg { font: 800 clamp(2.2rem, 6vw, 5rem)/1.1 var(--display); letter-spacing: -.01em; }
.h-md { font: 700 clamp(1.8rem, 4vw, 3.2rem)/1.18 var(--display); }
.lead { font-weight: 300; font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: var(--dim); }
.sec-head { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 2rem; margin-block-end: 3rem; }
.sec-head p { color: var(--dim); font-weight: 300; }
.sec-head .eyebrow { margin-block-end: .4rem; }

/* words reveal (يدوي، بلا SplitText) */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block-end: .14em; margin-block-end: -.14em; }
.wi { display: inline-block; will-change: transform; }
.js [data-reveal], .js [data-reveal-item] { opacity: 0; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: 999px; font: 700 .95rem/1 var(--font); border: 1px solid transparent; transition: border-color .3s, color .3s, box-shadow .3s; white-space: nowrap; }
.btn--sm { padding: .68rem 1.15rem; font-size: .85rem; }
.btn--gold { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px var(--accent-glow); }
.btn--gold:hover { box-shadow: 0 14px 40px var(--accent-glow), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn--ghost { border-color: rgba(241,236,227,.22); color: var(--off); background: rgba(23,33,49,.35); backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: var(--accent); }
.btn .ar { flex: none; transition: transform .3s var(--ease); }
.btn:hover .ar { transform: translateX(-4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* needs / review */
.needs { border-block-end: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent); cursor: help; }
body[data-review="on"] .needs { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 3px; }
.review-toggle { position: fixed; inset-block-end: 1.25rem; inset-inline-start: 1.25rem; z-index: 90; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1rem; border: 1px solid rgba(241,236,227,.14); border-radius: 999px; background: rgba(18,26,39,.85); backdrop-filter: blur(10px); font-size: .76rem; color: var(--dim); }
.review-toggle i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
.wa { position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 90; inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 30px var(--accent-glow); }
.toast { position: fixed; inset-block-end: 5.5rem; inset-inline-start: 50%; transform: translate(50%, 20px); z-index: 95; padding: .8rem 1.2rem; border-radius: 14px; background: var(--card); border: 1px solid var(--accent); font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s var(--ease); max-inline-size: min(90vw, 30rem); }
.toast.is-on { opacity: 1; transform: translate(50%, 0); }

/* progress */
.progress { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 2px; z-index: 100; pointer-events: none; }
.progress i { display: block; block-size: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right center; }

/* ------------------------------------------------------------ preloader */
.preloader { position: fixed; inset: 0; z-index: 200; background: var(--navy); display: grid; place-items: center; }
.preloader__in { text-align: center; }
.preloader__name { font-family: var(--latin); font-size: clamp(1rem, 2.6vw, 1.6rem); letter-spacing: .45em; direction: ltr; unicode-bidi: isolate; color: var(--off); padding-inline-start: .45em; }
.preloader__line { inline-size: min(320px, 60vw); block-size: 1px; background: rgba(241,236,227,.12); margin: 1.4rem auto; overflow: hidden; }
.preloader__line i { display: block; block-size: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.preloader__n { font: 500 .78rem var(--mono); color: var(--mute); direction: ltr; }
.no-js .preloader, .no-js .progress { display: none; }
.no-js [data-reveal], .no-js [data-reveal-item] { opacity: 1; }

/* ------------------------------------------------------------ header */
.header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 80; block-size: var(--header-h); border-block-end: 1px solid transparent; transition: background .4s, border-color .4s; }
.header[data-stuck="true"] { background: rgba(18,26,39,.74); backdrop-filter: blur(16px) saturate(1.2); border-color: rgba(241,236,227,.08); }
.header__in { block-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { display: inline-flex; align-items: center; gap: .7rem; }
.logo__mark { inline-size: 36px; block-size: 36px; border-radius: 8px; flex: none; }
.logo__t { display: flex; flex-direction: column; font-family: var(--latin); font-size: .66rem; letter-spacing: .32em; line-height: 1.2; direction: ltr; unicode-bidi: isolate; color: var(--off); }
.logo__t b { font-weight: 400; } .logo__t span { color: var(--mute); font-size: .52rem; }
.nav ul { display: flex; gap: 1.5rem; }
.nav a { position: relative; font: 600 .92rem var(--font); color: var(--dim); transition: color .3s; padding-block: .3rem; }
.nav a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right center; transition: transform .35s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--off); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.header__end { display: flex; align-items: center; gap: 1rem; }
.header__lang { font-size: .72rem; letter-spacing: .12em; color: var(--dim); }
.burger { display: none; position: relative; inline-size: 42px; block-size: 42px; border-radius: 50%; border: 1px solid rgba(241,236,227,.16); }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 50%; top: 50%; inline-size: 18px; block-size: 1.5px; background: var(--off); transform: translate(-50%, -50%); content: ''; transition: transform .3s var(--ease); }
.burger span::before { transform: translate(-50%, -7px); } .burger span::after { transform: translate(-50%, 5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ------------------------------------------------------------ 1) THEATER */
.theater { position: relative; block-size: 100svh; min-block-size: 620px; overflow: hidden; isolation: isolate; background: var(--navy); }
.theater__art { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.theater__art img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% 50%; opacity: 0; transform: scale(1.03); transition: opacity .5s ease-out, transform .5s ease-out; filter: saturate(.85) contrast(1.08) brightness(.72); will-change: opacity, transform; }
.theater__art img.is-on { opacity: 1; transform: scale(1); }
.theater__glass { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; will-change: transform; }
.theater__glass canvas { display: block; inline-size: 100%; block-size: 100%; }
.theater__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to left, rgba(18,26,39,.94) 0%, rgba(18,26,39,.62) 42%, rgba(18,26,39,.12) 100%),
    linear-gradient(to top, var(--navy) 0%, rgba(18,26,39,0) 38%); }
.theater__fog { position: absolute; inset: -20%; z-index: 3; pointer-events: none; }
.fog { position: absolute; inset: 0; opacity: .7; will-change: transform; background: radial-gradient(45% 40% at 60% 60%, rgba(23,33,49,.9), rgba(23,33,49,0) 70%); }
.fog--b { background: radial-gradient(35% 30% at 30% 70%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.theater__beam { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .32; mix-blend-mode: screen;
  background: conic-gradient(from 200deg at 72% -10%, transparent 0 35%, color-mix(in srgb, var(--light) 55%, transparent) 40%, transparent 46% 100%); }
.theater__slab { display: none; position: absolute; left: 6%; top: 40%; inline-size: 52vw; max-inline-size: 520px; aspect-ratio: 6 / 1; border-radius: 999px; transform: rotate(-15deg); z-index: 2;
  background: linear-gradient(120deg, rgba(241,236,227,.18), rgba(241,236,227,.04)); border: 1px solid rgba(241,236,227,.35); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(241,236,227,.35); }
.glass-off .theater__slab { display: block; }
.glass-off .theater__glass { display: none; }

.theater__in { position: relative; z-index: 5; block-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: calc(var(--header-h) + 1rem) 7rem; }
.theater__copy { max-inline-size: 46rem; will-change: transform, opacity; }
.theater h1 { font: 800 clamp(2.6rem, 7.2vw, 6.6rem)/1.1 var(--display); letter-spacing: -.01em; margin-block: .7rem 1.1rem; }
.theater .lead { max-inline-size: 38rem; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: 1.5rem; }
.swatches__l { font: 700 .78rem var(--font); color: var(--mute); margin-inline-end: .3rem; }
.sw { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .95rem .5rem .75rem; border-radius: 999px; border: 1px solid rgba(241,236,227,.14); background: rgba(23,33,49,.55); backdrop-filter: blur(10px); font: 600 .85rem/1 var(--font); color: var(--dim); transition: border-color .3s, box-shadow .3s, color .3s; }
.sw i { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(18,26,39,.45); flex: none; }
.sw small { font: 500 .64rem var(--mono); letter-spacing: .06em; color: var(--mute); direction: ltr; unicode-bidi: isolate; }
.sw:hover { color: var(--off); border-color: rgba(241,236,227,.4); }
.sw[aria-pressed="true"] { color: var(--off); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.theater__meta { position: absolute; z-index: 5; inset-block-end: 2rem; inset-inline-start: max(1.25rem, (100vw - 1280px) / 2); display: flex; gap: 1.4rem; font-size: .76rem; color: var(--mute); }
.theater__meta b { color: var(--off); font-weight: 500; }
.theater__meta span + span::before { content: '·'; margin-inline-end: 1.4rem; color: var(--accent); }

/* لافتة المسرح */
.stagebar { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 6; block-size: 72px; display: flex; align-items: center; overflow: hidden; background: var(--navy-2); border-block-start: 1px solid var(--accent); transform: translateY(100%); will-change: transform; }
.stagebar__track { display: flex; align-items: center; gap: 2.2rem; inline-size: max-content; padding-inline: 1rem; will-change: transform; }
.stagebar__track span { white-space: nowrap; font: 700 .95rem/1 var(--font); color: var(--off); }
.stagebar__track i { flex: none; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--accent); }

/* ------------------------------------------------------------ 2) RUNWAY */
.runway { position: relative; block-size: 100svh; min-block-size: 660px; overflow: hidden; background: var(--navy-2); }
.runway__track { display: flex; align-items: stretch; block-size: 100%; inline-size: max-content; gap: 4vw; padding-inline-start: 9vw; padding-inline-end: 9vw; will-change: transform; }
.slide { position: relative; flex: 0 0 82vw; block-size: 100%; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2.5rem; padding-block: calc(var(--header-h) + 1.5rem) 5rem; isolation: isolate; }
.slide__code { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; white-space: nowrap; font-family: var(--latin); font-size: clamp(6rem, 19vw, 17rem); letter-spacing: .04em; direction: ltr; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 30%, transparent); opacity: .9; transition: -webkit-text-stroke-color .45s; }
.slide__stage { position: relative; z-index: 1; padding-block-end: 20%; }
.slide__fig { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; }
.slide__fig > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 22px; border: 1px solid rgba(241,236,227,.08); transition: border-color .4s, box-shadow .4s; filter: saturate(.9); }
.slide__refl { position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; block-size: 42%; overflow: hidden; border-radius: 0 0 22px 22px; opacity: .5; pointer-events: none; filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 85%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 85%); }
.slide__refl img { position: absolute; inset-block-start: 0; inset-inline: 0; inline-size: 100%; block-size: calc(100% / .42); object-fit: cover; transform: scaleY(-1); }
.slide.is-state .slide__fig > img { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 40px 90px rgba(0,0,0,.55), 0 0 90px var(--accent-glow); }
.slide.is-state .slide__code { opacity: 1; -webkit-text-stroke-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.slide__info { position: relative; z-index: 1; }
.slide__info h3 { font: 800 clamp(1.8rem, 3.4vw, 3rem)/1.15 var(--display); margin-block: .5rem 1rem; }
.slide__info h3 .code { font: 400 .42em var(--latin); letter-spacing: .12em; color: var(--accent); direction: ltr; unicode-bidi: isolate; vertical-align: middle; margin-inline-start: .35em; }
.slide__info p { color: var(--dim); font-weight: 300; margin-block: 1.2rem; max-inline-size: 34rem; }
.slide__spec { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.6rem; padding-block: 1rem; border-block: 1px solid rgba(241,236,227,.1); }
.slide__spec div { display: grid; gap: .15rem; }
.slide__spec dt { font-size: .72rem; color: var(--mute); }
.slide__spec dd { font-size: .95rem; color: var(--off); white-space: nowrap; }
.slide__foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.price { font: 700 1.1rem var(--font); color: var(--accent); }
.runway__ui { position: absolute; z-index: 3; inset-block-end: 1.6rem; inset-inline: max(1.25rem, (100vw - 1280px) / 2); display: flex; align-items: center; gap: 1.2rem; font-size: .8rem; color: var(--mute); }
.runway__bar { flex: 1; block-size: 1px; background: rgba(241,236,227,.12); overflow: hidden; }
.runway__bar i { display: block; block-size: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right center; }
.runway__all { color: var(--off); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------ 3) STORY */
.story { padding-block: 8rem; background: var(--navy); }
.story__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
.story__fig { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); clip-path: inset(49.5% 0% 49.5% 0% round 24px); will-change: clip-path; }
.story__fig img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.story__seam { position: absolute; left: 0; right: 0; top: 50%; block-size: 1px; background: var(--accent); pointer-events: none; box-shadow: 0 0 24px var(--accent-glow); z-index: 2; }
.cap { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.8); opacity: 0; padding: .35rem .8rem; border-radius: 999px; background: rgba(23,33,49,.45); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); font: 700 .78rem/1.4 var(--font); white-space: nowrap; }
.story__b .h-md { margin-block: .6rem 1.2rem; }
.story__list { display: grid; gap: 1.1rem; margin-block-start: 2rem; }
.story__list li { display: flex; gap: 1rem; align-items: flex-start; }
.story__list i { flex: none; inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center; font-size: .78rem; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: rgba(23,33,49,.5); }
.story__list b { display: block; font-weight: 700; margin-block-end: .1rem; }
.story__list div { color: var(--dim); font-weight: 300; font-size: .95rem; }

/* ------------------------------------------------------------ shared: state image pairs (make finale · chip · academy 03 · footer floor) */
.sx-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease-out; }
.sx-img.is-on { opacity: 1; }

/* ------------------------------------------------------------ 4) MAKE — طاولة الضوء: مصباح واحد يعبر أربع محطات */
.make { position: relative; block-size: 100vh; min-block-size: 680px; overflow: hidden; isolation: isolate; background: var(--navy-2); padding: 0; }
.make__bg { position: absolute; inset: 0; z-index: 0; }
.make__bg > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; transform: scale(1.08); filter: saturate(.8) brightness(.55); will-change: opacity, transform; }
.make__bg [data-station="0"] { opacity: 1; transform: scale(1); }
.make__home-art { display: block; position: absolute; inset: 0; opacity: 0; transform: scale(1.04); will-change: opacity, transform; }
.make__home-art .sx-img { filter: saturate(.85) brightness(.72); object-position: 60% 50%; }
.make__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: opacity;
  background: radial-gradient(70% 60% at 50% 50%, rgba(23,33,49,.35), rgba(23,33,49,.92) 100%), linear-gradient(to top, var(--navy-2) 0, transparent 22%); }
.make__in { position: relative; z-index: 2; block-size: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-block: calc(var(--header-h) + 1rem) 1.75rem; perspective: 1400px; }
.make .sec-head { margin-block-end: 4rem; }   /* فراغ لشريحة المحطة فوق اللوح */
.make .h-lg { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.make .sec-head p { max-inline-size: 34rem; font-size: .95rem; }
.lt { position: relative; align-self: center; --mx: 0px; --my: 0px; --lx: 88%; padding: 0; will-change: transform; }
.lt__slab { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); block-size: clamp(280px, 46vh, 480px); border-radius: 30px; background: rgba(27,38,55,.34); border: 1px solid color-mix(in srgb, var(--light) 22%, transparent); backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(241,236,227,.14), 0 40px 100px rgba(0,0,0,.5); overflow: hidden; }
.pane { position: relative; --px: 50%; --py: 50%; padding: 1.5rem 1.4rem; display: grid; align-content: start; gap: .7rem; opacity: .32; will-change: opacity, transform; }
.pane + .pane { border-inline-end: 1px solid rgba(241,236,227,.08); }
.pane::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(380px circle at var(--px) var(--py), color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); }
.lt.is-lit .pane::before { opacity: 1; }
.pane > * { position: relative; }
.pane.is-lit { opacity: 1; }
.pane__top { display: flex; align-items: baseline; gap: .7rem; }
.pane__top span { font: 700 .95rem var(--font); }
.pane__num { font: 500 1.4rem var(--mono); color: var(--accent); direction: ltr; unicode-bidi: isolate; }
.pane__shot { display: none; }
.pane p { font-size: .88rem; color: var(--dim); font-weight: 300; line-height: 1.7; }
.pane__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-block-start: .4rem; padding-block-start: 1rem; border-block-start: 1px solid rgba(241,236,227,.1); }
.pane__kpis div { display: grid; gap: .1rem; }
.pane__kpis b { font-size: .95rem; color: var(--off); transition: color .4s, text-shadow .4s; }
.pane.is-lit .pane__kpis b { color: var(--accent); text-shadow: 0 0 18px var(--accent-glow); }
.pane__kpis span { font-size: .7rem; color: var(--mute); }
.lt__lamp { position: absolute; z-index: 1; left: 0; top: -46vh; inline-size: 100%; block-size: calc(46vh + 100%); pointer-events: none; mix-blend-mode: screen; opacity: .9;
  background: conic-gradient(at var(--lx) 0%, transparent 0 44%, color-mix(in srgb, var(--accent) 55%, transparent) 47.5%, color-mix(in srgb, var(--accent) 55%, transparent) 52.5%, transparent 56% 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 100%); }
.lt__pool { position: absolute; z-index: 3; left: var(--lx); top: 50%; inline-size: 720px; block-size: 720px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; will-change: transform;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%); }
.lt__chip { position: absolute; z-index: 4; left: var(--lx); top: -.85rem; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: .6rem; padding-block: .4rem; padding-inline: .45rem .9rem; border-radius: 999px; background: rgba(18,26,39,.72); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); backdrop-filter: blur(10px); font: 700 .78rem/1 var(--font); white-space: nowrap; }
.lt__chip-img { position: relative; inline-size: 30px; block-size: 30px; border-radius: 50%; overflow: hidden; flex: none; }
.lt__chip b { color: var(--accent); }
.make__end { display: grid; justify-items: center; gap: .9rem; margin-block-start: 1rem; }
.make__home { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; border-radius: 999px; background: rgba(18,26,39,.72); border: 1px solid var(--accent); box-shadow: 0 0 40px var(--accent-glow); font: 700 .9rem/1 var(--font); opacity: 0; }
.make__home i { inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--accent); }
.make__home b { color: var(--accent); font-weight: 700; }
.make__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-block-start: 0; opacity: 0; }
@media (max-height: 760px) and (min-width: 901px) {
  .make .sec-head p { display: none; }
  .make .h-lg { font-size: 2.4rem; }
  .lt__slab { block-size: clamp(280px, 44vh, 480px); }
}

/* ------------------------------------------------------------ 5) ACADEMY — غرفة العرض: ثلاث شرائح تحت جهاز الإسقاط */
.academy { position: relative; isolation: isolate; overflow: clip; padding-block: 6rem 8rem; background: var(--navy); }
.academy__room { position: absolute; inset: -6%; z-index: 0; pointer-events: none; }
.academy__room img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; filter: blur(28px) brightness(.35) saturate(.9); transform: scale(1.1); transition: opacity .6s; will-change: opacity; }
.academy__room img.is-on { opacity: 1; }
.academy::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--navy) 0, transparent 18%, transparent 82%, var(--navy) 100%); }
.academy__beam { position: absolute; z-index: 1; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .28; --ba: 0deg;
  background: conic-gradient(from var(--ba) at 50% -8%, transparent 0 41%, color-mix(in srgb, var(--accent) 45%, transparent) 46%, color-mix(in srgb, var(--accent) 45%, transparent) 54%, transparent 59% 100%); }
.academy > .wrap { position: relative; z-index: 2; }
.stack { display: grid; gap: 1.5rem; padding-block-end: 10vh; }
.card { position: sticky; top: calc(var(--header-h) + 1.25rem + var(--i) * 1.4rem); display: grid; grid-template-columns: .9fr 1.1fr; min-block-size: min(72vh, 580px); border-radius: 26px; overflow: hidden; background: var(--card); border: 1px solid rgba(241,236,227,.08); box-shadow: 0 30px 80px rgba(0,0,0,.45); transform-origin: 50% 0; will-change: transform, opacity; transition: border-color .45s, box-shadow .45s; }
.card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 30px 90px rgba(0,0,0,.55), 0 0 110px var(--accent-glow); }
.card__cover { position: relative; min-block-size: 280px; overflow: hidden; }
.card__cover.is-lens { cursor: none; }
.card__cover.is-lens a { cursor: pointer; }
.card__cover > img, .card__cover .sx-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.85); }
.card__cover .sx-img { opacity: 0; transition: opacity .5s; }
.card__cover .sx-img.is-on { opacity: 1; }
.card__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,38,55,.9), rgba(27,38,55,0) 55%); }
.lens { position: absolute; z-index: 2; left: 0; top: 0; inline-size: 150px; block-size: 150px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; border: 1px solid rgba(241,236,227,.35); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 12px 30px rgba(241,236,227,.12), 0 20px 50px rgba(0,0,0,.45); will-change: transform, opacity; }
.lens img { position: absolute; left: 0; top: 0; max-inline-size: none; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.card__badges { position: absolute; z-index: 1; inset-block-start: 1rem; inset-inline-start: 1rem; display: flex; gap: .4rem; }
.badge { padding: .3rem .7rem; border-radius: 999px; font: 700 .7rem/1.4 var(--font); background: rgba(18,26,39,.7); border: 1px solid rgba(241,236,227,.16); backdrop-filter: blur(8px); }
.badge--gold { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.card__play { position: absolute; z-index: 1; inset-block-end: 1rem; inset-inline-start: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(18,26,39,.7); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); backdrop-filter: blur(10px); font: 700 .8rem/1 var(--font); }
.card__play i { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: .55rem; font-style: normal; }
.card__proj { position: absolute; z-index: 1; inset-block-end: 1rem; inset-inline-end: 1rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(18,26,39,.72); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); backdrop-filter: blur(10px); font: 700 .74rem/1 var(--font); white-space: nowrap; }
.card__proj b { color: var(--accent); }
.card__b { padding: 1.8rem 2rem; display: grid; align-content: start; gap: .8rem; }
.card__n { font-size: .8rem; color: var(--accent); }
.card__b h3 { font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--display); }
.card__b > p { color: var(--dim); font-weight: 300; font-size: .95rem; }
.card__meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--mute); }
details.syllabus { display: grid; gap: .35rem; border-block: 1px solid rgba(241,236,227,.1); padding-block: .8rem; }
.syllabus summary { display: none; }
.syllabus ul { display: grid; gap: .35rem; }
.syllabus li { display: flex; justify-content: space-between; font-size: .88rem; color: var(--dim); }
.syllabus li .mono { color: var(--off); font-size: .78rem; }
.card__inst { display: flex; align-items: center; gap: .7rem; font-size: .85rem; }
.card__inst i { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--navy); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.card__inst b { display: block; } .card__inst span { color: var(--mute); font-size: .75rem; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card__foot .price { font-size: 1.3rem; } .card__foot .price small { font-size: .7rem; color: var(--mute); }

/* ------------------------------------------------------------ 6) PROOF — لحظة الصمت: ضوء واحد يكشف الشارة */
.proof { position: relative; min-block-size: 170vh; padding: 0; display: block; background: var(--navy); }
.proof__stage { position: sticky; top: 0; block-size: 100vh; min-block-size: 640px; overflow: hidden; isolation: isolate; display: grid; align-items: center; --mx: 60%; --my: 46%; --spot: 22vmax; }
.proof__bg { position: absolute; inset: 0; z-index: 0; }
.proof__bg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 62% 50%; will-change: transform; }
.proof__base { filter: brightness(.36) saturate(.65); }
.proof__lit { filter: saturate(.85) brightness(1.02); }
.proof__lit, .proof__tint { -webkit-mask-image: radial-gradient(var(--spot) circle at var(--mx) var(--my), #000 0 52%, transparent 100%); mask-image: radial-gradient(var(--spot) circle at var(--mx) var(--my), #000 0 52%, transparent 100%); }
.proof__tint { position: absolute; inset: 0; mix-blend-mode: screen; background: color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
.proof__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--navy) 0%, rgba(18,26,39,.55) 38%, rgba(18,26,39,.35) 100%); }
.proof__in { position: relative; z-index: 2; text-align: center; max-inline-size: 62rem; display: grid; justify-items: center; gap: 1.4rem; }
.proof h2 { font: 800 clamp(2.2rem, 6vw, 5.2rem)/1.14 var(--display); letter-spacing: -.01em; text-shadow: 0 2px 28px rgba(18,26,39,.65); }
.proof .lead { max-inline-size: 44rem; opacity: 0; text-shadow: 0 2px 28px rgba(18,26,39,.65); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.stamp { padding: .55rem 1.05rem; min-block-size: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: rgba(23,33,49,.5); backdrop-filter: blur(12px); font: 600 .85rem/1.3 var(--font); opacity: 0; }
.proof__btns { justify-content: center; opacity: 0; }

/* ------------------------------------------------------------ 7) CUSTOM — طاولة الطلب: النموذج لوح زجاجي أمام منتجك */
.custom { position: relative; min-block-size: 100vh; isolation: isolate; overflow: hidden; display: grid; align-items: center; padding-block: 7rem; background: var(--navy-2); }
.custom__stage { position: absolute; inset: 0; z-index: 0; }
.custom__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 30% 50%; opacity: 0; transition: opacity .6s ease-out; filter: saturate(.85) brightness(.62); will-change: transform; }
.custom__img.is-on { opacity: 1; }
.custom__tint { position: absolute; inset: 0; mix-blend-mode: screen; background: color-mix(in srgb, var(--accent) 30%, transparent); opacity: 0; pointer-events: none; }
.custom__veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(23,33,49,.94) 0, rgba(23,33,49,.55) 45%, rgba(23,33,49,.12) 100%), linear-gradient(to top, var(--navy-2) 0, transparent 22%), linear-gradient(to bottom, var(--navy) 0, transparent 18%); }
.custom__tag { position: absolute; z-index: 2; inset-block-end: 2rem; inset-inline-start: max(1.25rem, (100vw - 1280px) / 2); padding: .45rem .8rem; border-radius: 999px; background: rgba(18,26,39,.7); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); backdrop-filter: blur(10px); font-size: .72rem; color: var(--off); }
.custom__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; perspective: 1200px; }
.big { display: flex; flex-wrap: wrap; gap: 0 .3em; font: 800 clamp(2.6rem, 7vw, 6.2rem)/1.08 var(--display); letter-spacing: -.01em; margin-block: .6rem 1rem; }
.sw2 { position: relative; display: inline-block; color: var(--dim); }
.sw2 b { position: absolute; inset: 0; color: var(--accent); font-weight: inherit; clip-path: inset(0 0 0 100%); will-change: clip-path; }
.custom__b h3 { font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.3 var(--display); margin-block: .5rem .6rem; }
.custom__b > p { color: var(--dim); font-weight: 300; max-inline-size: 40rem; }
.custom__panel { position: relative; justify-self: end; inline-size: min(100%, 480px); --sx: 50%; will-change: transform; transform-style: preserve-3d; }
.qcard { position: relative; display: grid; gap: .9rem; padding: 1.5rem; border-radius: var(--r); background: rgba(27,38,55,.38); backdrop-filter: blur(24px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: inset 0 1px 0 rgba(241,236,227,.16), 0 40px 100px rgba(0,0,0,.5); overflow: hidden; }
.qcard::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent calc(var(--sx) - 18%), rgba(241,236,227,.14) var(--sx), transparent calc(var(--sx) + 18%)); }
.qcard > * { position: relative; z-index: 1; }
.qcard label { display: grid; gap: .35rem; font: 700 .78rem var(--font); color: var(--mute); }
.qcard input, .qcard select { inline-size: 100%; font: 400 1rem var(--font); color: var(--off); background: var(--navy); border: 1px solid rgba(241,236,227,.12); border-radius: 12px; padding: .85rem 1rem; outline: 0; transition: border-color .3s, box-shadow .3s; appearance: none; -webkit-appearance: none; }
.qcard input.mono { font-family: var(--mono); text-align: start; }
.qcard select { background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(1rem + 5px) 50%, 1rem 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-start: 2rem; }
.qcard input:focus, .qcard select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.qcard__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: .9rem; }
.qcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-start: .3rem; }
.term { font-size: .74rem; color: var(--mute); flex: 1 1 12rem; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term b { color: var(--accent); font-weight: 600; }
.qcard__refl { position: absolute; inset-inline: 8%; inset-block-start: calc(100% + 8px); block-size: 60px; border-radius: 50%; background: radial-gradient(50% 100% at 50% 0, var(--accent-glow), transparent 70%); filter: blur(10px); opacity: .7; pointer-events: none; }

/* ------------------------------------------------------------ 8) FOOTER — الأرضية تحت المسرح: ينكشف من تحت آخر قسم */
.footer { position: sticky; bottom: 0; z-index: 0; min-block-size: min(100vh, 640px); display: grid; align-content: end; overflow: hidden; isolation: isolate; background: var(--navy); padding-block: 3.5rem 2rem; --mx: 50%; --my: 100%; }
.footer.is-flat { position: relative; }
.footer__floor { position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 30vh; z-index: 0; opacity: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000, transparent 60%); mask-image: linear-gradient(to top, #000, transparent 60%); }
.footer__floor .sx-img { transform: scaleY(-1); filter: blur(10px) saturate(.8); }
.footer__fog { position: absolute; inset: auto -20% -50% -20%; block-size: 120%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(900px 60% at var(--mx) var(--my), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.footer__mark { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: -.26em; block-size: 1em; text-align: center; direction: ltr; unicode-bidi: isolate; font-family: var(--latin); font-size: clamp(2.6rem, 7.6vw, 7.5rem); letter-spacing: .12em; line-height: 1; white-space: nowrap; pointer-events: none; will-change: transform, opacity; }
.footer__mark span { position: absolute; inset-inline: 0; inset-block-end: 0; color: transparent; }
.footer__mark b { font-weight: 400; }
.footer__mark-base { -webkit-text-stroke: 1px rgba(241,236,227,.16); }
.footer__mark-lit { -webkit-text-stroke: 1px var(--accent); -webkit-mask-image: radial-gradient(360px circle at var(--mx) var(--my), #000, transparent 70%); mask-image: radial-gradient(360px circle at var(--mx) var(--my), #000, transparent 70%); }
.footer__in { position: relative; z-index: 2; }
.footer__line { block-size: 1px; background: var(--accent); transform-origin: right center; margin-block-end: 3rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer__brand p.dim { margin-block-start: 1.25rem; max-inline-size: 34ch; font-weight: 300; }
.footer__brand p.mono { margin-block-start: 1rem; direction: rtl; }
.footer h4 { font: 700 .85rem var(--font); color: var(--mute); margin-block-end: .5rem; }
.footer li { margin: 0; } .footer li a { display: inline-block; padding-block: .6rem; color: var(--dim); font-size: .92rem; transition: color .3s; } .footer li a:hover { color: var(--accent); }
.footer__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: 2.6rem 1.6rem; padding: 1rem 1.25rem; border-radius: 20px; background: rgba(27,38,55,.42); border: 1px solid rgba(241,236,227,.1); backdrop-filter: blur(14px); }
.footer__cta-t { flex: 1 1 18rem; color: var(--dim); font-weight: 300; }
.footer__cta .btn { min-block-size: 52px; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; padding-block-start: 1.2rem; border-block-start: 1px solid rgba(241,236,227,.08); font-size: .76rem; color: var(--mute); }
.footer__legal a { color: var(--dim); transition: color .3s; } .footer__legal a:hover { color: var(--off); }
.footer__legal a b { color: var(--accent); font-weight: 600; }
.footer__top { color: var(--off); font-weight: 600; display: inline-flex; align-items: center; min-block-size: 44px; }

/* ------------------------------------------------------------ mobile ≤ 900px — لا pins */
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .wrap { inline-size: min(100% - 2rem, 1280px); }
  .sec-head { grid-template-columns: 1fr; gap: .8rem; margin-block-end: 2rem; }
  .h-lg { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .sec-head p { font-size: .95rem; }
  .btn--sm { min-block-size: 44px; }

  .nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 79; background: rgba(18,26,39,.96); backdrop-filter: blur(16px); display: grid; place-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .nav[data-open="true"] { opacity: 1; pointer-events: auto; }
  .nav ul { flex-direction: column; align-items: center; gap: 1rem; }
  .nav a { font-size: 1.4rem; font-weight: 800; min-block-size: 44px; display: inline-flex; align-items: center; }
  .burger { display: inline-block; inline-size: 44px; block-size: 44px; }
  .header .btn { display: none; }

  .theater { block-size: auto; min-block-size: 100svh; display: flex; flex-direction: column; }
  .theater__in { flex: 1; padding-block: calc(var(--header-h) + 2rem) 5rem; }
  .theater h1 { font-size: clamp(2.3rem, 11vw, 3.6rem); }
  .theater__meta { position: static; padding: 0 1rem 1rem; flex-wrap: wrap; gap: .6rem 1rem; }
  .theater__meta span + span::before { margin-inline-end: 1rem; }
  .theater__glass { display: none; }
  .theater__slab { display: block; left: -8%; top: 10%; inline-size: 60vw; }
  .fog--b { display: none; }
  .swatches { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .swatches::-webkit-scrollbar { display: none; }
  .sw { flex: none; scroll-snap-align: start; min-block-size: 44px; }
  .stagebar { position: relative; transform: none; block-size: 64px; }

  .runway { block-size: auto; min-block-size: 0; overflow: visible; padding-block: 3rem 0; }
  .runway__track { inline-size: 100%; block-size: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4vw; padding-inline: 7vw; -webkit-overflow-scrolling: touch; scrollbar-width: none; transform: none !important; }
  .runway__track::-webkit-scrollbar { display: none; }
  .slide { flex: 0 0 86vw; scroll-snap-align: center; scroll-snap-stop: always; grid-template-columns: 1fr; gap: 1.4rem; block-size: auto; padding-block: 1rem 2rem; }
  .slide__code { font-size: clamp(4rem, 26vw, 7rem); top: 22%; }
  .slide__stage { padding-block-end: 16%; }
  .slide__spec { grid-template-columns: repeat(2, auto); gap: 1rem 1.6rem; }
  .runway__ui { position: static; padding: 1.2rem 1rem 2.5rem; }

  .story { padding-block: 5rem; }
  .story__grid { grid-template-columns: 1fr; gap: 2.4rem; }

  /* make — سكة المصباح: كروت رأسية، بركة ضوء تنزل مع السكرول */
  .make { block-size: auto; min-block-size: 0; padding-block: 4rem 4.5rem; }
  .make__bg, .make__veil, .lt__lamp, .lt__chip { display: none; }
  .make__in { display: block; block-size: auto; padding-block: 0; perspective: none; }
  .make .h-lg { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .make .sec-head { margin-block-end: 1.6rem; }
  .lt__hint { display: none; }   /* لا مؤشر على اللمس */
  .lt { inline-size: 100%; padding: 0; transform: none !important; }
  .lt__slab { display: grid; grid-template-columns: 1fr; gap: 1rem; block-size: auto; background: none; border: 0; backdrop-filter: none; box-shadow: none; overflow: visible; border-radius: 0; }
  .pane { opacity: 1; padding: 1.1rem; border-radius: 22px; background: var(--card); border: 1px solid rgba(241,236,227,.1); filter: brightness(.7); transition: filter .5s, border-color .5s; }
  .pane + .pane { border-inline-end: 1px solid rgba(241,236,227,.1); }
  .pane.is-lit { filter: brightness(1); border-color: var(--accent); }
  .pane::before { display: none; }
  .pane__shot { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; margin: 0; }
  .pane__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.8) brightness(.9); }
  .lt__pool { inline-size: 320px; block-size: 320px; left: 50%; top: 0; opacity: .9; }
  .make__end { margin-block-start: 1.5rem; }
  .make__home { opacity: 1; }
  .make__foot { display: grid; grid-template-columns: 1fr; gap: .6rem; inline-size: 100%; opacity: 1; }
  .make__foot .btn { justify-content: center; min-block-size: 48px; }

  /* academy — كروت متتالية، منهج أكورديون */
  .academy { padding-block: 4rem 5rem; }
  .academy__beam, .lens { display: none; }
  .academy__room img { filter: blur(20px) brightness(.3); }
  .stack { padding-block-end: 0; }
  .card { position: relative; top: auto; grid-template-columns: 1fr; min-block-size: 0; }
  .card__cover { min-block-size: 210px; block-size: 56vw; }
  .card__cover::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 55% at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
  .card__play { inset: auto 0 0 0; border-radius: 0; justify-content: center; min-block-size: 48px; }
  .card__proj { inset-inline-end: auto; inset-inline-start: 1rem; inset-block-end: 3.6rem; }
  .card__b { padding: 1.4rem 1.2rem; }
  .syllabus summary { display: flex; justify-content: space-between; align-items: center; min-block-size: 48px; cursor: pointer; list-style: none; font-weight: 700; color: var(--off); }
  .syllabus summary::-webkit-details-marker { display: none; }
  .syllabus summary::after { content: '+'; font-family: var(--mono); color: var(--accent); }
  .syllabus[open] summary::after { content: '–'; }
  .card__foot { flex-wrap: nowrap; }
  .card__foot .btn { min-block-size: 44px; }

  /* proof — ضوء يتّسع مع الاقتراب، بلا sticky */
  .proof { min-block-size: 0; padding: 0; }
  .proof__stage { position: relative; top: auto; block-size: auto; min-block-size: 80svh; padding-block: 5rem 4rem; --spot: 18vmax; }
  .proof__bg img { object-position: 70% 40%; }
  .pills { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; inline-size: 100%; }
  .stamp { justify-content: center; text-align: center; min-block-size: 44px; padding-inline: .6rem; }
  .proof__btns { display: grid; grid-template-columns: 1fr; inline-size: 100%; }
  .proof__btns .btn { justify-content: center; min-block-size: 48px; }

  /* custom — منصّة 52svh ثم نموذج صلب */
  .custom { min-block-size: 0; display: block; padding-block: 0 4.5rem; overflow: clip; }
  .custom__stage { position: relative; block-size: 52svh; min-block-size: 300px; overflow: hidden; }
  .custom__img { object-position: 50% 50%; filter: saturate(.85) brightness(.85); }
  .custom__veil { background: linear-gradient(to top, var(--navy-2) 0, rgba(23,33,49,0) 45%, rgba(18,26,39,.5) 100%); }
  .custom__tag { inset-inline-start: 1rem; inset-block-end: 4.2rem; }   /* فوق حافة الشبكة المتداخلة، بعيداً عن الهيدر الثابت */
  .custom__grid { grid-template-columns: 1fr; gap: 1.6rem; perspective: none; margin-block-start: -3.2rem; }
  .big { font-size: clamp(2.2rem, 11vw, 3rem); }
  .custom__panel { inline-size: 100%; justify-self: stretch; transform: none !important; }
  .qcard::before, .qcard__refl { display: none; }
  .qcard input, .qcard select { min-block-size: 48px; }
  .qcard__row { grid-template-columns: 1fr; }
  .qcard__foot .btn { inline-size: 100%; justify-content: center; min-block-size: 52px; }
  .term { display: block; flex: none; inline-size: 100%; overflow-x: auto; text-overflow: clip; white-space: nowrap; scrollbar-width: none; }
  .term::-webkit-scrollbar { display: none; }

  /* footer — عمودان ثم عمود، الوردمارك سطران */
  .footer { min-block-size: auto; }
  .footer__mark { font-size: 15vw; letter-spacing: .06em; white-space: normal; block-size: 2em; }
  .footer__mark b { display: block; }
  .footer__mark-lit { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cta { display: grid; grid-template-columns: 1fr; }
  .footer__cta .btn { justify-content: center; }
  .footer__floor { block-size: 22vh; }
  .footer__floor .sx-img { filter: blur(6px) saturate(.8); }
  .footer__fog { --mx: 50%; --my: 100%; }
  .footer__legal { padding-block-end: 5.5rem; }
  .footer__legal a, .header__lang, .runway__all { display: inline-flex; align-items: center; min-block-size: 44px; }
  .review-toggle { inset-block-end: 1rem; font-size: .7rem; padding: .5rem .8rem; min-block-size: 44px; }
  .wa { inset-block-end: 1rem; inset-inline-end: 1rem; }

  /* أداء: لا backdrop-filter على القوائم (الهيدر والقائمة يحتفظان به) */
  .pane, .qcard, .stamp, .footer__cta, .btn--ghost, .sw, .cap { backdrop-filter: none; background: var(--card); }
  .card__play, .badge, .custom__tag, .card__proj, .lt__chip { backdrop-filter: none; background: rgba(18,26,39,.88); }
  .badge--gold { background: var(--accent); }
}

@media (max-width: 480px) {
  .slide__spec { grid-template-columns: 1fr 1fr; }
  .cap:nth-of-type(3) { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .term { display: none; }
  .review-toggle { inline-size: 44px; block-size: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .review-toggle [data-review-text] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .review-toggle i { inline-size: 10px; block-size: 10px; }
}

/* ------------------------------------------------------------ reduced motion — لا pin ولا زجاج ولا عدسة، تلاشي فقط */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .theater { block-size: auto; min-block-size: 100svh; display: flex; flex-direction: column; }
  .theater__in { flex: 1; }
  .theater__glass { display: none; }
  .theater__slab { display: block; }
  .theater__meta { position: static; padding: 0 1.25rem 1rem; }
  .stagebar { position: relative; transform: none; }
  .stagebar__track { inline-size: 100%; flex-wrap: wrap; justify-content: center; gap: .8rem 1.4rem; padding-block: .6rem; }
  .stagebar__track [aria-hidden="true"] { display: none; }
  .runway { block-size: auto; min-block-size: 0; overflow: visible; padding-block: 3rem 0; }
  .runway__track { inline-size: 100%; block-size: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: 7vw; transform: none !important; }
  .slide { flex: 0 0 86vw; scroll-snap-align: center; block-size: auto; padding-block: 1rem 2rem; }
  .runway__ui { position: static; padding: 1.2rem 1rem 2.5rem; }
  .story__fig { clip-path: none; }
  .story__seam { display: none; }
  .cap { opacity: 1; transform: translate(-50%, -50%) scale(1); }

  .make { block-size: auto; min-block-size: 0; padding-block: 5rem; }
  .make__in { block-size: auto; }
  .make__bg > img { opacity: 0; }
  .make__bg [data-station="0"] { opacity: 1; transform: none; }
  .lt__lamp, .lt__pool, .lt__chip, .pane::before { display: none; }
  .lt { transform: none !important; }
  .pane { opacity: 1; }
  .pane__kpis b { color: var(--accent); }
  .make__home, .make__foot { opacity: 1; }

  .card { position: relative; top: auto; }
  .lens, .academy__beam { display: none; }

  .proof { min-block-size: 0; }
  .proof__stage { position: relative; --spot: 150vmax; }
  .proof .lead, .stamp, .proof__btns { opacity: 1; }

  .sw2 b { clip-path: inset(0 0 0 0); }
  .custom__tint { opacity: 0 !important; }
  .qcard::before { display: none; }
  .custom__panel { transform: none !important; }

  .footer { position: relative; }
  .footer__mark { transform: none !important; opacity: 1; }
  .footer__fog { opacity: .35; }
  .footer__floor { opacity: .2; }
  .w { overflow: visible; }
}

/* منع أي تمرير أفقي من عناصر المسرح واللافتة */
html { overflow-x: clip; }
.theater, .stagebar { overflow: hidden; }

/* موبايل: هدف لمس للغة، وإخفاء زر المراجعة، ورفع واتساب فوق لافتة المسرح */
@media (max-width: 900px) {
  .header__lang { min-inline-size: 44px; justify-content: center; }
  .review-toggle { display: none; }
  .wa { inset-block-end: calc(64px + .75rem); }
}

/* حقوق التصميم في الفوتر */
.footer__credit { color: var(--accent); font-weight: 700; text-decoration: none; border-block-end: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition: border-color .2s; }
.footer__credit:hover { border-color: var(--accent); }

/* =====================================================================
   MOBILE ART DIRECTION ≤ 900px — إعادة إخراج كل سكشن على الهاتف
   يُلغي قواعد الموبايل الأقدم أعلاه بالتسلسل. لا يمسّ الديسكتوب (≥ 901px).
   ===================================================================== */
/* عناصر DOM للموبايل فقط — مخفية افتراضياً (لا تغيير على الديسكتوب) */
.mbar, .runway__dots, .runway__head { display: none; }

@media (max-width: 900px) {
  /* ---------------------------------------------- إيقاع موحّد */
  :root { --mbar-h: 56px; --sec-pad: 4.5rem; }
  .story, .academy, .make { padding-block: var(--sec-pad); }
  .sec-head { gap: .5rem; margin-block-end: 1.75rem; }
  .sec-head .eyebrow { margin-block-end: .15rem; }
  .sec-head .latin { margin-block: 0 .35rem; }
  .sec-head p { font-size: .95rem; line-height: 1.7; margin-block-start: .3rem; }
  .h-lg, .make .h-lg { font-size: clamp(1.95rem, 8.8vw, 2.6rem); line-height: 1.15; }
  .h-md { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .eyebrow { font-size: .74rem; }
  .btn { min-block-size: 48px; }
  .btn--sm { min-block-size: 44px; }
  .logo { min-block-size: 44px; }
  .toast { inset-block-end: calc(var(--mbar-h) + 1rem + env(safe-area-inset-bottom, 0px)); }

  /* ---------------------------------------------- شريط الإجراءات السفلي (بدل الزر العائم) */
  .wa { display: none; }
  /* backdrop-filter على الهيدر الملتصق يجعل الهيدر «حاوية» للقائمة الثابتة ⇒ عند فتح القائمة نستبدله بخلفية صلبة */
  .header:has(.nav[data-open="true"]) { backdrop-filter: none; background: rgba(18,26,39,.96); }
  .mbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; display: flex; align-items: center; gap: .55rem; block-size: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 .9rem env(safe-area-inset-bottom, 0px); background: rgba(18,26,39,.9); backdrop-filter: blur(16px) saturate(1.2); border-block-start: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(110%); transition: transform .45s var(--ease); }
  .mbar.is-on { transform: none; }
  body:has(.nav[data-open="true"]) .mbar { transform: translateY(110%); }
  .mbar__wa { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: 0 0 auto; min-block-size: 44px; padding-inline: .95rem; border-radius: 999px; border: 1px solid rgba(241,236,227,.16); background: rgba(27,38,55,.6); font: 700 .84rem/1 var(--font); color: var(--off); }
  .mbar__wa svg { color: var(--accent); flex: none; }
  .mbar .btn { flex: 1; justify-content: center; min-block-size: 44px; padding-block: .6rem; font-size: .9rem; }

  /* ---------------------------------------------- 1) hero */
  .theater__in { padding-block: calc(var(--header-h) + 1.25rem) 1.75rem; }
  .theater h1 { font-size: clamp(2.15rem, 10.2vw, 3.2rem); margin-block: .55rem .8rem; }
  .theater .lead { font-size: .98rem; line-height: 1.7; }
  .theater__meta { display: none; }
  .theater__veil { background: linear-gradient(to top, var(--navy) 0%, rgba(18,26,39,.78) 40%, rgba(18,26,39,.22) 100%); }
  .theater__art img { object-position: 62% 40%; filter: saturate(.85) contrast(1.08) brightness(.8); }
  .swatches { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; overflow: visible; padding: 0; margin-block: 1.1rem 1.25rem; scroll-snap-type: none; }
  .swatches__l { grid-column: 1 / -1; margin: 0; }
  .sw { inline-size: 100%; min-inline-size: 0; padding-inline: .7rem .6rem; gap: .4rem; font-size: .78rem; white-space: nowrap; }
  .sw small { font-size: .58rem; margin-inline-start: auto; }
  .theater .btn-row { display: grid; grid-template-columns: 1fr; gap: .55rem; }
  .theater .btn-row .btn { justify-content: center; }
  .stagebar { block-size: 60px; }
  .stagebar__track span { font-size: .86rem; }

  /* ---------------------------------------------- 2) runway — كاروسيل بطاقات 82vw · صورة 4:5 · كود مختوم · شرائح مواصفات */
  .runway { padding-block: var(--sec-pad); }
  .runway__head { display: grid; }
  .runway__track { gap: 3.5vw; padding-inline: 9vw; scroll-padding-inline: 9vw; padding-block: .25rem 1.25rem; }
  .slide { flex: 0 0 82vw; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 0; padding: 0; border-radius: 26px; overflow: hidden; background: var(--card); border: 1px solid rgba(241,236,227,.08); box-shadow: 0 24px 60px rgba(0,0,0,.4); transition: border-color .45s, box-shadow .45s; }
  .slide.is-state { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgba(0,0,0,.45), 0 0 70px var(--accent-glow); }
  .slide__code { position: relative; grid-area: 1 / 1; align-self: end; justify-self: start; left: auto; top: auto; transform: none; z-index: 2; margin: 0 1.1rem 1rem; font-size: clamp(1.7rem, 8.6vw, 2.4rem); letter-spacing: .1em; color: var(--off); -webkit-text-stroke: 0; opacity: .96; text-shadow: 0 2px 24px rgba(18,26,39,.9); transition: color .45s; }
  .slide.is-state .slide__code { color: var(--accent); opacity: 1; -webkit-text-stroke: 0; }
  .slide__stage { grid-area: 1 / 1; z-index: 1; padding: 0; }
  .slide__stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--card) 0%, rgba(27,38,55,.72) 18%, rgba(27,38,55,0) 58%), linear-gradient(to bottom, rgba(18,26,39,.42), transparent 34%); }
  .slide__fig { aspect-ratio: 4 / 5; border-radius: 0; }
  .slide__fig > img { border-radius: 0; border: 0; filter: saturate(.9) contrast(1.04); }
  .slide.is-state .slide__fig > img { border: 0; box-shadow: none; }
  .slide__refl { display: none; }
  .slide__info { grid-area: 2 / 1; display: grid; gap: .55rem; padding: .35rem 1.1rem 1.15rem; align-content: start; }
  .slide__info .eyebrow { order: 0; font-size: .7rem; gap: .45rem; }
  .slide__info .eyebrow::before { inline-size: 14px; }
  .slide__info h3 { order: 1; font-size: clamp(1.35rem, 6.2vw, 1.7rem); line-height: 1.2; margin: 0; }
  .slide__info h3 .code { display: none; }
  .slide__info p { order: 2; margin: 0; font-size: .88rem; line-height: 1.6; max-inline-size: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .slide__spec { order: 3; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .2rem 0 .1rem; border: 0; margin-block-start: .15rem; }
  .slide__spec div { min-inline-size: 0; gap: .12rem; padding: .55rem .7rem; border-radius: 14px; background: rgba(18,26,39,.62); border: 1px solid rgba(241,236,227,.08); }
  .slide__spec div:first-child { grid-column: 1 / -1; }
  .slide__spec dt { font-size: .64rem; line-height: 1.3; }
  .slide__spec dd { font-size: .82rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; min-inline-size: 0; }
  .slide__foot { order: 4; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; margin-block-start: .35rem; }
  .slide__foot .price { font-size: 1.05rem; white-space: nowrap; }
  .slide__foot .btn { justify-content: center; min-block-size: 48px; padding-inline: 1rem; font-size: .88rem; }
  .runway__ui { display: flex; align-items: center; gap: 1rem; padding: .35rem 1rem 0; }
  .runway__bar { display: none; }
  .runway__dots { display: flex; flex: 1; justify-content: center; gap: .45rem; }
  .runway__dots i { inline-size: 8px; block-size: 8px; border-radius: 999px; background: rgba(241,236,227,.18); transition: inline-size .35s var(--ease), background .35s, box-shadow .35s; }
  .runway__dots i.is-on { inline-size: 26px; background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }

  /* ---------------------------------------------- 3) story */
  .story__grid { gap: 1.75rem; }
  .story__b .h-md { margin-block: .5rem .9rem; }
  .story__list { gap: .7rem; margin-block-start: 1.5rem; }
  .story__list li { padding: .85rem .9rem; border-radius: 16px; background: rgba(27,38,55,.55); border: 1px solid rgba(241,236,227,.07); }
  .story__list i { inline-size: 36px; block-size: 36px; font-size: .72rem; }
  .story__list div { font-size: .88rem; }

  /* ---------------------------------------------- 4) make — سكة مضاءة: خط ذهبي، عقدة لكل محطة، الكارت الأقرب للمنتصف مضاء */
  .make::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 34% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), linear-gradient(to bottom, var(--navy) 0, transparent 14%); }
  .make__in { position: relative; z-index: 1; }
  .lt__slab { position: relative; gap: 1.1rem; padding-inline-start: 1.5rem; }
  .lt__slab::before { content: ''; position: absolute; inset-block: .5rem; inset-inline-start: 5px; inline-size: 2px; border-radius: 2px; background: linear-gradient(to bottom, transparent, var(--accent) 6%, var(--accent) 94%, transparent); opacity: .85; box-shadow: 0 0 12px var(--accent-glow); }
  .pane { padding: 0 0 1.05rem; gap: .55rem; border-radius: 22px; background: var(--card); border: 1px solid rgba(241,236,227,.1); filter: brightness(.68) saturate(.85); box-shadow: 0 18px 44px rgba(0,0,0,.35); transition: filter .5s, border-color .5s, box-shadow .5s; }
  .pane + .pane { border-inline-end: 1px solid rgba(241,236,227,.1); }
  .pane.is-lit { filter: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 22px 50px rgba(0,0,0,.45), 0 0 56px var(--accent-glow); }
  .pane::after { content: ''; position: absolute; z-index: 3; inset-inline-start: -1.5rem; inset-block-start: 1.25rem; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--navy-2); border: 2px solid var(--accent); transition: background .4s, box-shadow .4s; }
  .pane.is-lit::after { background: var(--accent); box-shadow: 0 0 0 5px var(--accent-glow), 0 0 22px var(--accent); }
  .pane__top { display: contents; }
  .pane__num { position: absolute; z-index: 2; inset-block-start: .85rem; inset-inline-start: 1rem; font: 400 clamp(1.9rem, 9vw, 2.5rem)/1 var(--latin); color: var(--accent); letter-spacing: .06em; text-shadow: 0 2px 22px rgba(18,26,39,.9); }
  .pane__shot { order: 0; position: relative; aspect-ratio: 16 / 9; border-radius: 21px 21px 0 0; margin: 0; }
  .pane__shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--card) 0, rgba(27,38,55,.4) 30%, transparent 60%), linear-gradient(to bottom, rgba(18,26,39,.55), transparent 45%); }
  .pane__shot img { filter: saturate(.85) brightness(.95); }
  .pane__top span { order: 1; font: 800 1.15rem/1.25 var(--font); margin: -.1rem 1.05rem 0; }
  .pane > p { order: 2; margin-inline: 1.05rem; font-size: .88rem; }
  .pane__kpis { order: 3; margin: .1rem 1.05rem 0; padding: 0; border: 0; gap: .45rem; }
  .pane__kpis div { min-inline-size: 0; padding: .5rem .65rem; border-radius: 12px; background: rgba(18,26,39,.62); border: 1px solid rgba(241,236,227,.08); gap: .1rem; }
  .pane__kpis b { font-size: .86rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  .pane__kpis span { font-size: .64rem; }
  .lt__pool { inline-size: 380px; block-size: 380px; opacity: .8; }
  .make__end { margin-block-start: 1.75rem; gap: 1rem; }
  .make__home { font-size: .84rem; }
  .make__foot { grid-template-columns: 1fr 1fr; gap: .35rem .6rem; }
  .make__foot .btn:first-child { grid-column: 1 / -1; background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 10px 30px var(--accent-glow); min-block-size: 50px; font-size: .92rem; }
  .make__foot .btn:not(:first-child) { background: transparent; border: 0; color: var(--dim); font-size: .8rem; min-block-size: 44px; padding-inline: .3rem; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: .32em; }

  /* ---------------------------------------------- 5) academy — غلاف 16:9، فهرس Michroma، شرائح meta، منهج مغلق */
  .stack { gap: 1.4rem; }
  .card { border-radius: 24px; }
  .card__cover { block-size: auto; min-block-size: 0; aspect-ratio: 16 / 9; }
  .card__cover::after { background: linear-gradient(to top, var(--card) 0, rgba(27,38,55,.55) 26%, rgba(27,38,55,0) 62%), linear-gradient(to bottom, rgba(18,26,39,.45), transparent 40%); }
  .card__badges { inset-block-start: .9rem; inset-inline-start: .9rem; }
  .badge { font-size: .68rem; padding: .32rem .7rem; }
  .card__play { inset-block-start: auto; inset-block-end: .9rem; inset-inline-start: .9rem; inset-inline-end: auto; border-radius: 999px; min-block-size: 44px; padding-inline: .5rem .95rem; justify-content: flex-start; }
  .card__proj { inset-block-end: auto; inset-block-start: .9rem; inset-inline-start: auto; inset-inline-end: .9rem; max-inline-size: calc(100% - 7rem); overflow: hidden; text-overflow: ellipsis; font-size: .68rem; }
  .card__b { position: relative; padding: 1.15rem 1.15rem 1.2rem; gap: .65rem; }
  .card__n { position: absolute; z-index: 2; inset-block-start: calc(-1em - 1rem); direction: ltr; inset-inline-start: 1.1rem; inset-inline-end: auto; font: 400 clamp(2rem, 9.5vw, 2.6rem)/1 var(--latin); color: var(--accent); letter-spacing: .06em; text-shadow: 0 2px 22px rgba(18,26,39,.9); pointer-events: none; }   /* العنصر LTR (.mono) ⇒ inline-start = يسار، مقابل زر التشغيل على اليمين */
  .card__b h3 { font-size: clamp(1.25rem, 5.8vw, 1.5rem); }
  .card__b > p { font-size: .9rem; }
  .card__meta { gap: .4rem; }
  .card__meta span { display: inline-flex; align-items: center; gap: .3rem; padding: .34rem .62rem; border-radius: 999px; background: rgba(18,26,39,.62); border: 1px solid rgba(241,236,227,.08); font-size: .7rem; color: var(--dim); }
  .card__meta b { color: var(--off); }
  details.syllabus { padding-block: .1rem; }
  .card__inst { font-size: .82rem; }
  .card__foot { gap: .75rem; }
  .card__foot .price { font-size: 1.2rem; white-space: nowrap; }
  .card__foot .btn { flex: 1; justify-content: center; min-block-size: 48px; }

  /* ---------------------------------------------- 6) proof — الصورة مرئية خلف تدرّج كحلي، أختام = شرائح صغيرة بنقطة */
  .proof__stage { padding-block: var(--sec-pad); min-block-size: 0; }
  .proof__base { filter: brightness(.62) saturate(.75); }
  .proof__lit { filter: saturate(.9) brightness(1); }
  .proof__veil { background: linear-gradient(to top, var(--navy) 0%, rgba(18,26,39,.78) 34%, rgba(18,26,39,.42) 68%, rgba(18,26,39,.7) 100%); }
  .proof__in { gap: 1.1rem; }
  .proof h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.2; }
  .proof .lead { font-size: .95rem; }
  .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; inline-size: auto; }
  .stamp { min-block-size: 0; padding: .38rem .7rem .38rem .8rem; gap: .45rem; border-radius: 999px; font: 600 .72rem/1.3 var(--font); color: var(--off); background: color-mix(in srgb, var(--accent) 14%, rgba(18,26,39,.7)); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); }
  .stamp::before { content: ''; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
  .proof__btns { gap: .25rem; margin-block-start: .25rem; }
  .proof__btns .btn--gold { min-block-size: 50px; }
  .proof__btns .btn--ghost { background: transparent; border: 0; color: var(--dim); font-size: .85rem; min-block-size: 44px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: .32em; }

  /* ---------------------------------------------- 7) custom — منصّة + وسم الحالة + عنوان + تذكرة + نموذج زجاجي كتكوين واحد */
  .custom { padding-block: 0 var(--sec-pad); }
  .custom__stage { block-size: 50svh; min-block-size: 300px; }
  .custom__veil { background: linear-gradient(to top, var(--navy-2) 0, rgba(23,33,49,.15) 40%, rgba(18,26,39,.55) 100%); }
  .custom__tag { inset-block-end: 4.6rem; font-size: .7rem; }
  .custom__grid { margin-block-start: -3.4rem; gap: 1.4rem; }
  .big { font-size: clamp(2.1rem, 10.4vw, 2.9rem); margin-block: .4rem .8rem; }
  .custom__b h3 { font-size: clamp(1.15rem, 5.4vw, 1.4rem); }
  .custom__b > p { font-size: .92rem; }
  .qcard { padding: 1.2rem; gap: .8rem; border-radius: 22px; background: rgba(27,38,55,.86); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: inset 0 1px 0 rgba(241,236,227,.14), 0 30px 70px rgba(0,0,0,.45); }
  .qcard__row { grid-template-columns: 1fr 1.4fr; }
  .qcard__foot { gap: .6rem; }
  .term { display: block; font-size: .7rem; }

  /* ---------------------------------------------- 8) footer — مضغوط: شعار + سطر، شريط CTA ذهبي، روابط بعمودين، قانوني، وردمارك كامل */
  .footer { min-block-size: 0; padding-block: 2.5rem calc(var(--mbar-h) + 3.4rem + env(safe-area-inset-bottom, 0px)); }
  .footer__line { margin-block-end: 1.4rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; }
  .footer__brand { grid-column: 1 / -1; display: grid; gap: .55rem; padding-block-end: .9rem; border-block-end: 1px solid rgba(241,236,227,.08); margin-block-end: .2rem; }
  .footer__brand p.dim { margin: 0; max-inline-size: none; font-size: .9rem; line-height: 1.55; }
  .footer__brand p.mono { margin: 0; font-size: .68rem; }
  .footer h4 { margin-block-end: .1rem; font-size: .78rem; }
  .footer li a { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: 0; font-size: .86rem; }
  .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__grid > div:last-child ul { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
  .footer__cta { margin-block: 1.4rem 1.1rem; padding: .9rem 1rem .5rem; gap: .5rem; border-radius: 18px; border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  .footer__cta-t { font-size: .84rem; text-align: center; }
  .footer__cta .btn--gold { min-block-size: 52px; }
  .footer__cta .btn--ghost { background: transparent; border: 0; color: var(--dim); min-block-size: 44px; font-size: .84rem; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: .32em; }
  .footer__legal { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: center; padding-block: .9rem 0; font-size: .7rem; }
  .footer__legal > span:nth-child(2), .footer__legal > span:nth-child(3) { grid-column: 1 / -1; }
  .footer__top { grid-column: 2; grid-row: 1; }
  .footer__mark { font-size: 8.4vw; letter-spacing: .14em; white-space: nowrap; block-size: 1em; inset-block-end: calc(var(--mbar-h) + .9rem + env(safe-area-inset-bottom, 0px)); }
  .footer__mark b { display: inline; }
  .footer__mark-lit { display: block; -webkit-mask-image: radial-gradient(240px circle at 50% 100%, #000, transparent 70%); mask-image: radial-gradient(240px circle at 50% 100%, #000, transparent 70%); }
  .footer__floor { block-size: 26vh; }
}

/* ---- تصحيحات ما بعد مراجعة الموبايل (2026-09-19) ---- */
.footer { overflow: clip; }
@media (max-width: 900px) {
  .lt { padding-inline: 1rem; }
  .lt__slab { padding-inline-start: 1.6rem; }
  .story__fig img { inline-size: 114%; max-inline-size: none; margin-inline-end: -14%; }
  .footer__mark { font-size: 8vw; letter-spacing: .12em; }
  .slide__foot .btn { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 10px 26px var(--accent-glow); }
}

/* ---- طلب العميل 2026-09-19: مسافات الهيرو أقل على الموبايل، العناوين الصغيرة أكبر، صورة بطاقة المنتج أقصر ---- */
@media (max-width: 900px) {
  .theater { block-size: auto; min-block-size: 0; }
  .theater__in { block-size: auto; min-block-size: 0; align-content: start; padding-block: calc(var(--header-h) + .5rem) 1.25rem; }
  .theater h1 { margin-block: .4rem .6rem; }
  .theater .lead { margin-block-end: .9rem; }
  .theater__slab { top: 4%; }
  .eyebrow { font-size: .98rem; }
  .eyebrow::before { inline-size: 28px; }
  .latin { font-size: .82rem; letter-spacing: .3em; }
  .runway { padding-block: 2rem 0; }
  #runway .sec-head { margin-block-end: 1.25rem; }
  .slide__fig { aspect-ratio: 4 / 3; max-block-size: 300px; }
}

/* ---- طلب العميل: إزالة خط السكة وعقده من «كيف نصنع» على الموبايل ---- */
@media (max-width: 900px) {
  .lt__slab::before, .pane::after { display: none; }
  .lt__slab { padding-inline-start: 0; }
}

/* ---- بطاقة المنتج على الموبايل: الصورة تملأ عرض البطاقة بارتفاع ثابت ---- */
@media (max-width: 900px) {
  .slide__fig { aspect-ratio: auto; inline-size: 100%; block-size: clamp(210px, 58vw, 300px); max-block-size: none; }
  .runway__dots i { cursor: pointer; position: relative; }
  .runway__dots i::after { content: ''; position: absolute; inset: -14px -6px; }
}

/* ---- طلب العميل: إخفاء الأرقام الكبيرة على البطاقات في الموبايل ---- */
@media (max-width: 900px) {
  .pane__num, .card__n { display: none; }
}

/* ---- طلب العميل: سطر قانوني واحد بلا «إلى الأعلى» ---- */
.footer__legal { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.1rem; grid-template-columns: none; text-align: center; }
.footer__legal > span:first-child::after { content: '·'; color: var(--accent); margin-inline-start: 1.1rem; }
@media (max-width: 900px) { .footer__legal { flex-direction: row; gap: .3rem .9rem; } .footer__legal > span:first-child::after { margin-inline-start: .9rem; } }
@media (max-width: 900px) { .footer__legal { flex-wrap: nowrap; white-space: nowrap; font-size: .74rem; gap: 0 .7rem; } .footer__legal > span:first-child::after { margin-inline-start: .7rem; } }

/* ---- طلب العميل: إخفاء أكواد المنتجات المكتوبة على الموبايل ---- */
@media (max-width: 900px) { .sw small, .slide__code { display: none; } }

/* ---- 2026-09-19 هيرو الموبايل: لوحة ثابتة + حلقة 3D + محاكاة متصفح (طلب العميل) ---- */
.mshow { display: none; }
@media (max-width: 900px) {
  .theater { display: flex; flex-direction: column; block-size: 100svh; min-block-size: 640px; overflow: hidden; }
  .theater__in { flex: 0 0 auto; block-size: auto; min-block-size: 0; padding-block: calc(var(--header-h) + .35rem) 0; }
  .theater__copy { text-align: center; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
  .theater .swatches, .theater .btn--ghost, .theater .stagebar, .theater__slab { display: none; }
  .theater .eyebrow { position: relative; display: inline-flex; align-items: center; block-size: 36px; padding-inline: 42px 14px; border-radius: 18px; gap: 0; max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; font: 400 .78rem/1 var(--font); color: rgba(241,236,227,.94); border: 1px solid rgba(241,236,227,.115); background: linear-gradient(to top, rgba(210,180,122,.175) 0, rgba(210,180,122,.128) 2px, rgba(210,180,122,.075) 4px, rgba(210,180,122,.026) 6px, rgba(255,255,255,.012) 9px, rgba(255,255,255,.012) 100%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
  .theater .eyebrow::before { content: ''; position: absolute; inset-inline-start: 4px; top: 4px; inline-size: 26px; block-size: 26px; border-radius: 8px; background: url(../img/logo-mark.svg) center / contain no-repeat; box-shadow: 0 0 6px rgba(179,147,89,.25), 0 3px 8px -5px rgba(210,180,122,.6); }
  .theater h1 { font-size: clamp(1.85rem, 8.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.01em; margin-block: .85rem .5rem; max-inline-size: 11em; }
  .theater .lead { font-size: .92rem; line-height: 1.5; max-inline-size: 340px; margin-block: 0 1rem; }
  .theater .btn-row { display: flex; justify-content: center; margin: 0; }
  .theater .btn-row .btn--gold { position: relative; overflow: hidden; min-inline-size: 158px; block-size: 52px; padding: 0 26px; border-radius: 13px; border: 0; color: #F1ECE3; font-weight: 600; font-size: 1rem; text-shadow: 0 1px 2px rgba(0,0,0,.5);
    background: linear-gradient(to top, #F1E3C4 1px, #E8D5A8 2px, #DCC48E 3px, #D2B47A 4px, #C4A265 5px, #B39359 6px, #A5864F 7px, #8F7443 8px, #75603A 9px, #5E4D30 10px, #4A3E2B 12px, #3B3327 13px, #2E2B27 14px, #242830 16px, #1E2532 18px, #1B2637 20px, #172131 24px, #121A27 30px, #121A27 100%);
    box-shadow: inset 0 3px 3px -2px rgba(241,236,227,.10), inset 1px 0 0 rgba(255,255,255,.09), inset -1px 0 0 rgba(255,255,255,.09), 1px 0 0 rgba(210,180,122,.17), -1px 0 0 rgba(210,180,122,.17), 0 0 8px rgba(179,147,89,.10), 0 2px 5px -3px rgba(210,180,122,.45); }
  .theater .btn-row .btn--gold::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(241,228,196,.7), rgba(241,228,196,0) 13px), linear-gradient(270deg, rgba(241,228,196,.7), rgba(241,228,196,0) 13px); -webkit-mask: linear-gradient(to top, #000 0, #000 6px, rgba(0,0,0,.4) 12px, rgba(0,0,0,.15) 18px, rgba(0,0,0,.09) 24px, rgba(0,0,0,.02) 30px, rgba(0,0,0,.02) 100%); mask: linear-gradient(to top, #000 0, #000 6px, rgba(0,0,0,.4) 12px, rgba(0,0,0,.15) 18px, rgba(0,0,0,.09) 24px, rgba(0,0,0,.02) 30px, rgba(0,0,0,.02) 100%); }
  .theater .btn-row .btn--gold:hover { transform: translateY(-1px); filter: brightness(1.12); }
  /* العرض: الحلقة بهندستها الكاملة 1172×657 (R=891، 37 بطاقة، قصّ عند 42°) ثم المتصفح أمامها ينزف من أسفل الشاشة */
  .mshow { display: block; position: relative; flex: 1 1 auto; min-block-size: 224px; inline-size: 100%; margin-block-start: .9rem; overflow: hidden; z-index: 5; }
  .mring { position: absolute; left: 50%; margin-left: -586px; top: -446px; width: 1172px; height: 657px; perspective: 891px; perspective-origin: 586px 918px; transform-style: preserve-3d; transform-origin: 586px 466px; transform: scale(1.02); pointer-events: none; }
  .mcard { position: absolute; left: 586px; top: 616px; width: 130px; height: 300px; margin: -150px 0 0 -65px; border-radius: 12px; overflow: hidden; background: #172131; box-shadow: 0 24px 46px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5); backface-visibility: hidden; will-change: transform; }
  .mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mcard.broken img { display: none; }
  .mcard .edge { position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 16px 30px rgba(255,255,255,.05); }
  .mcard .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 10px 14px; background: linear-gradient(180deg, rgba(18,26,39,0), rgba(18,26,39,.92) 62%); font: 700 11px/1.3 var(--font); color: #F1ECE3; text-align: center; }
  .mcard .cap small { display: block; font: 500 7.5px var(--font); color: #D2B47A; letter-spacing: .12em; margin-top: 2px; }
  .mbrowser { position: absolute; left: 50%; transform: translateX(-50%); top: 212px; bottom: 0; width: calc(100% + 40px); border-radius: 22px 22px 0 0; overflow: hidden; z-index: 100; box-shadow: 0 -14px 44px rgba(0,0,0,.55); background: rgba(20,20,26,.82); }
  .mchrome { position: absolute; left: 0; top: 0; width: 100%; height: 36px; background: linear-gradient(180deg, rgba(27,38,55,.7), rgba(18,26,39,.8)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .mdots { position: absolute; left: 22px; top: 14px; display: flex; gap: 3px; direction: ltr; }
  .mdots i { width: 7.6px; height: 7.6px; border-radius: 50%; background: #B39359; opacity: .55; }
  .mdots i:nth-child(2) { opacity: .8; } .mdots i:nth-child(3) { opacity: 1; }
  .momni { position: absolute; left: 50%; transform: translateX(-50%); top: 6px; width: 58%; height: 24px; border-radius: 5px; background: rgba(9,13,26,.93); box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); display: flex; align-items: center; justify-content: center; font: 400 9px var(--mono); color: rgba(241,236,227,.72); direction: ltr; }
  .mpage { position: absolute; left: 7px; right: 6px; top: 36px; bottom: 0; background: #F1ECE3; color: #121A27; overflow: hidden; border-radius: 10px 10px 0 0; }
  .mann { height: 15px; background: #121A27; display: grid; place-items: center; font: 400 6px/1 var(--font); letter-spacing: .06em; color: #cfcfcf; border-radius: 10px 10px 0 0; }
  .mlogo { text-align: center; margin-top: 9px; line-height: 1; direction: ltr; }
  .mlogo b { display: block; font: 400 13px var(--latin); letter-spacing: .14em; color: #121A27; }
  .mlogo small { display: block; font: 400 5px var(--latin); letter-spacing: .3em; color: #3a3a3a; margin-top: 3px; }
  .mhero { position: relative; margin: 14px 18px 0; height: 122px; border-radius: 10px; overflow: hidden; background: linear-gradient(120deg, #22304A, #121A27); }
  .mhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mscrim { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(18,26,39,.72) 0%, rgba(18,26,39,.35) 46%, rgba(18,26,39,0) 72%); }
  html[dir="ltr"] .mscrim { background: linear-gradient(90deg, rgba(18,26,39,.72) 0%, rgba(18,26,39,.35) 46%, rgba(18,26,39,0) 72%); }
  .mcopy { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: #F1ECE3; }
  .mcopy u { display: block; font: 400 7.5px var(--font); letter-spacing: .2em; text-decoration: none; opacity: .9; }
  .mcopy em { display: block; font: 800 18px/1.15 var(--font); font-style: normal; margin-top: 5px; }
  .mcopy i { display: inline-block; margin-top: 8px; padding: 6px 13px; border-radius: 20px; background: #B39359; color: #121A27; font: 600 8.5px/1 var(--font); font-style: normal; }
  .msec { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 18px 10px; }
  .msec b { font: 800 14px var(--font); color: #121A27; } .msec u { font: 400 8px var(--font); letter-spacing: .1em; color: #8a8a8a; text-decoration: none; }
  .mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 18px; }
  .mcard2 .mph { position: relative; display: block; height: 0; padding-bottom: 104%; border-radius: 9px; overflow: hidden; background: linear-gradient(150deg, #22304A, #172131); }
  .mcard2 .mph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mcard2 .mtag { position: absolute; inset-inline-start: 6px; top: 6px; padding: 3px 7px; border-radius: 4px; background: #121A27; color: #F1ECE3; font: 600 7px var(--font); font-style: normal; letter-spacing: .06em; }
  .mcard2 b { display: block; margin-top: 7px; font: 700 10.5px var(--font); color: #121A27; }
  .mcard2 i { display: block; margin-top: 2px; font: 400 8.5px var(--font); font-style: normal; color: #8a8a8a; }
  .mcard2 s { display: block; margin-top: 4px; font: 700 11.5px var(--font); color: #121A27; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .mring { transform: none; } }
@media (max-width: 900px) { .mcard .cap { top: 0; bottom: auto; padding: 14px 10px 64px; background: linear-gradient(180deg, rgba(18,26,39,.94) 38%, rgba(18,26,39,0)); } }

/* ---- طلب العميل: تقليل الفراغ أسفل طاولة الضوء على الديسكتوب — اللوح بارتفاع محتواه ومتوسّط رأسياً ---- */
@media (min-width: 901px) {
  .lt { align-self: center; }
  .lt__slab { block-size: auto; min-block-size: 0; }
  .pane { padding: 1.6rem 1.4rem 1.7rem; }
}

/* =====================================================================
   2026-09-19 — طبقة الحركة على الموبايل (≤ 900px) — MOBILE MOTION LAYER
   كل قسم مشهد صغير: ضوء تقدّم في الهيدر، ستارة قوسية لكل قسم، خط ذهبي تحت العناوين،
   بارالاكس للصور، ضغطة للأزرار، ميل 3D لبطاقات المدرّج + موجة لون، قصة لاصقة،
   مسح ضوء على المحطات، رصّة كروت الأكاديمية، انعكاس الوردمارك يتموّج، شريط الإجراءات بنابض.
   transforms / opacity / clip-path فقط. لا يمسّ الديسكتوب (≥ 901px).
   ===================================================================== */
@keyframes ms-sweep { 0% { transform: translateX(-160%) skewX(-14deg); } 22% { transform: translateX(380%) skewX(-14deg); } 100% { transform: translateX(380%) skewX(-14deg); } }
@keyframes ms-pulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ms-ripple { 0%, 100% { transform: scaleY(-1) skewX(0deg); } 30% { transform: scaleY(-.93) skewX(3deg); } 65% { transform: scaleY(-1.03) skewX(-3deg); } }
.ms-halo, .rw-ripple { display: none; }

@media (max-width: 900px) {
  /* ---- ضوء التقدّم: خط ذهبي رفيع عند حافة الهيدر السفلية ---- */
  .progress { inset-block-start: calc(var(--header-h) - 2px); block-size: 2px; z-index: 81; }
  .progress i { background: linear-gradient(to left, var(--accent), #F1ECE3); box-shadow: 0 0 10px var(--accent), 0 0 3px #F1ECE3; }
  html[dir="ltr"] .progress i { transform-origin: left center; background: linear-gradient(to right, var(--accent), #F1ECE3); }

  /* ---- الهيرو: منظور للحلقة (ميل الجيروسكوب) + مسح ضوئي على الزر الذهبي كل 6 ثوانٍ ---- */
  .mshow { perspective: 1200px; perspective-origin: 50% 40%; }
  .mring { will-change: transform; }
  .theater .btn-row .btn--gold::before { content: ''; position: absolute; inset: -20% auto -20% 0; inline-size: 38%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 0%, rgba(241,236,227,.34) 50%, transparent 100%); transform: translateX(-160%) skewX(-14deg); animation: ms-sweep 6s cubic-bezier(.4, 0, .2, 1) 1.8s infinite; }

  /* ---- الأزرار: ضغطة (scale .97 + توهّج) عند اللمس ---- */
  .btn, .mbar__wa, .card__play, .runway__all, .sw { -webkit-tap-highlight-color: transparent; }
  .btn, .mbar__wa, .card__play { transition: transform .22s var(--ease), box-shadow .3s, border-color .3s, color .3s, background-color .3s; }
  .btn:active, .mbar__wa:active, .card__play:active, .theater .btn-row .btn--gold:active { transform: scale(.97); transition-duration: .08s; }
  .btn--gold:active, .theater .btn-row .btn--gold:active { box-shadow: 0 0 0 7px var(--accent-glow), 0 8px 24px var(--accent-glow); }

  /* ---- الستارة القوسية: هالة ذهبية أعلى القسم تتلاشى مع تسطّح القوس ---- */
  .runway, .story { position: relative; isolation: isolate; }
  .ms-halo { display: block; position: absolute; inset: 0 0 auto 0; block-size: 34vh; z-index: -1; pointer-events: none; background: radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); }
  .academy .ms-halo { z-index: 1; }

  /* ---- العناوين: خط ذهبي يُرسم بعد كشف الكلمات ---- */
  .sec-head h2::after, .story .h-md::after, .proof h2::after { content: ''; display: block; inline-size: 58px; block-size: 2px; margin-block-start: .6rem; border-radius: 2px; background: linear-gradient(to left, var(--accent), #F1ECE3); box-shadow: 0 0 12px var(--accent-glow); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .9s var(--ease) .45s; }
  html[dir="ltr"] .sec-head h2::after, html[dir="ltr"] .story .h-md::after { transform-origin: 0 50%; background: linear-gradient(to right, var(--accent), #F1ECE3); }
  .proof h2::after { margin-inline: auto; transform-origin: 50% 50%; }
  .sec-head h2.is-in::after, .story .h-md.is-in::after, .proof h2.is-in::after { transform: scaleX(1); }

  /* ---- المدرّج: البطاقة تميل نحو المنتصف، الصورة تنزاح عكسها، موجة لون عند تغيّر الحالة ---- */
  .slide { will-change: transform; }
  .slide__fig { overflow: hidden; }
  .slide__fig > img { position: absolute; inset: 0; left: -8%; inline-size: 116%; max-inline-size: none; block-size: 100%; will-change: transform; }
  .rw-ripple { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .rw-ripple i { position: absolute; inset: 0; opacity: 0; transform-origin: var(--rx, 50%) var(--ry, 50%); background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), var(--accent) 0, color-mix(in srgb, var(--accent) 45%, transparent) 16%, transparent 40%); }

  /* ---- لماذا: البقعة تتبع سحب الإصبع (أفقياً) ---- */
  .proof__stage { touch-action: pan-y; }
  .stamp { backface-visibility: hidden; }

  /* ---- كيف نصنع: مسح ضوء يعبر المحطة عند وصولها للمنتصف، الصورة أكبر بقليل للبارالاكس، كبسولة «إلى بيتك» تنبض ---- */
  .pane { position: relative; overflow: hidden; }
  .pane::before { content: ''; display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 34%, rgba(241,236,227,.12) 46%, color-mix(in srgb, var(--accent) 40%, transparent) 50%, rgba(241,236,227,.12) 54%, transparent 66%); transform: translateX(var(--sw, -130%)); }
  .pane__shot img { position: absolute; inset: 0; inline-size: 100%; block-size: 114%; inset-block-start: -7%; will-change: transform; }
  .make__home { position: relative; }
  .make__home.is-pop::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; border: 1px solid var(--accent); pointer-events: none; animation: ms-pulse 1.4s ease-out 2; }

  /* ---- الأكاديمية: زر التشغيل ينبض على الكارت النشط ---- */
  .card__cover > img { block-size: 114%; inset-block-start: -7%; will-change: transform; }
  .card__play i { position: relative; }
  .card__play i::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; }
  .card.is-active .card__play i::after { animation: ms-pulse 2s ease-out infinite; }

  /* ---- الفوتر: انعكاس الوردمارك تحته يتموّج عند نهاية الصفحة ---- */
  .footer__mark { inset-block-end: calc(var(--mbar-h) + .9rem + .8em + env(safe-area-inset-bottom, 0px)); overflow: visible; }
  .footer__mark::after { content: 'TAMA SQUARE'; position: absolute; inset-inline: 0; inset-block-start: 100%; margin-block-start: -.2em; block-size: 1em; line-height: 1; text-align: center; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 75%, transparent); opacity: .55; transform: scaleY(-1); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 82%); mask-image: linear-gradient(to top, #000 0%, transparent 82%); }
  .footer.is-end .footer__mark::after { animation: ms-ripple 3.6s ease-in-out infinite; }

  /* ---- شريط الإجراءات: يدخل بنابض بعد الهيرو ---- */
  .mbar { transition: transform .35s ease-in; }
  .mbar.is-on { transition: transform .8s cubic-bezier(.2, 1.35, .3, 1); }
}

/* البنى اللاصقة (القصة والأكاديمية) فقط عندما تكون الحركة مسموحة — تحت reduced-motion تبقى الأقسام مكدّسة عادية */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* ---- القصة: الصورة لاصقة بارتفاع الشاشة، قصّها ينمو من مربع صغير، والنقاط تنزلق فوقها ---- */
  .story { padding-block-start: 0; overflow: clip; }   /* clip (لا hidden) كي يبقى sticky يعمل — ويقصّ انزلاق النقاط قبل دخولها */
  .story__grid { gap: 0; }
  .story__fig { position: sticky; top: 0; z-index: 0; inline-size: calc(100% + 2rem); margin-inline: -1rem; block-size: 100svh; aspect-ratio: auto; border: 0; border-radius: 0; clip-path: inset(30% 22% 32% 22% round 28px); }
  .story__fig img { inline-size: 100%; max-inline-size: none; block-size: 100%; margin: 0; object-fit: cover; object-position: 50% 45%; will-change: transform; }
  .story__fig::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--navy) 0, rgba(18,26,39,.4) 28%, transparent 55%), linear-gradient(to bottom, rgba(18,26,39,.55), transparent 32%); }
  .story__seam { display: none; }
  .cap { z-index: 2; }
  .story__b { position: relative; z-index: 2; margin-block-start: -36svh; padding-block-start: 2rem; background: linear-gradient(to bottom, transparent 0, var(--navy) 30%); }
  .story__b .eyebrow, .story__b .latin, .story__b .h-md { text-shadow: 0 2px 22px rgba(18,26,39,.9); }
  .story__list li { background: rgba(23,33,49,.94); }

  /* ---- الأكاديمية: رصّة كروت لاصقة — الكارت السابق يصغر ويخفت حين ينزلق التالي فوقه ---- */
  .stack { padding-block-end: 2rem; }
  .card { position: sticky; top: calc(var(--header-h) + .6rem); transform-origin: 50% 0%; }
  /* التعتيم عبر طبقة كحلية فوق الكارت (opacity على الطبقة فقط) — لا شفافية للكارت نفسه كي لا يظهر ما تحته */
  .card::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; background: var(--navy); opacity: var(--stk, 0); pointer-events: none; }
}

/* ---- 2026-09-19 · إصلاحات الموبايل (≤900px): أكواد المنتجات مخفية في الفوتر · رصّة الأكاديمية مسطّحة على الهواتف القصيرة · تعليقات القصة تتلاشى قبل النص ---- */
@media (max-width: 900px) {
  .footer .code { display: none; }
  /* الهاتف القصير: الكارت لا يتّسع بين أعلى الشاشة وشريط الإجراءات → قائمة عادية بلا لصق ولا تصغير (تُدار من tops() في theater.js) */
  .stack--flat .card { position: relative; top: auto !important; transform: none !important; }
  .stack--flat .card::after { display: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* التعليقات: دخول (--cin 0→1) × خروج (--cout 1→0) — يُحرَّكان من theater.js بمتغيّرين مستقلّين */
  .story__fig .cap { opacity: calc(var(--cin, 0) * var(--cout, 1)); transform: translate(-50%, -50%) scale(calc(.7 + .3 * var(--cin, 0) - .15 * (1 - var(--cout, 1)))); }
}

/* ---- طلب العميل: تقليل الفراغ بين الأقسام على الموبايل ---- */
@media (max-width: 900px) {
  :root { --sec-pad: 2.75rem; }
  .make { padding-block: var(--sec-pad) 2rem; }
  .make__end { margin-block-start: 1.25rem; }
  .academy { padding-block: 2.5rem var(--sec-pad); }
  .story, .proof__stage, .custom { padding-block: var(--sec-pad); }
}
@media (max-width: 900px) { .make { padding-block-end: 1.25rem; } .academy { padding-block-start: 1.75rem; } .story { padding-block-end: 2rem; } .make { padding-block-start: 2.25rem; } }

/* ---- طلب العميل: إخفاء شريط الإجراءات السفلي على الموبايل ---- */
@media (max-width: 900px) { .mbar { display: none !important; } :root { --mbar-h: 0px; } body { padding-block-end: 0 !important; } }

/* ---- طلب العميل: وردمارك الفوتر على الموبايل خافت كالديسكتوب (خط محيطي فقط، بلا إضاءة ولا انعكاس) ---- */
@media (max-width: 900px) {
  .footer__mark-lit { display: none !important; }
  .footer__mark::after, .footer__mark::before, .footer__mark-base::after { display: none !important; animation: none !important; }
  .footer__mark { opacity: 1; inset-block-end: -.22em; }
  .footer__mark-base { -webkit-text-stroke: 1px rgba(241,236,227,.16); opacity: 1; }
}

/* ---- طلب العميل: لا خطوط متقطعة تحت البنود ---- */
.needs { border-block-end-style: solid; border-block-end-color: color-mix(in srgb, var(--accent) 35%, transparent); }


/* =====================================================================
   ARC GALLERY — قوس المنتجات (يحلّ محل مدرّج .runway__track/.slide)
   خمس بطاقات طولية 2:3 على قوس ثلاثي الأبعاد: المنتصف مسطّح وأكبر وأسطع،
   الجانبان مائلان للداخل ومدفوعان للخلف. التحويلات تُكتب من theater.js
   (transform/opacity فقط) — هنا الهيكل والألوان والحالات الساكنة.
   القواعد القديمة لـ .runway أعلاه تُحيَّد هنا ولا تُحذف.
   ===================================================================== */
.runway { block-size: auto; min-block-size: 0; overflow: visible; padding-block: clamp(4rem, 7vw, 6.5rem) clamp(3rem, 5vw, 4.5rem); background: var(--navy-2); }
.runway__head { display: grid; }
#runway .arc__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .55rem; margin-block-end: clamp(1.6rem, 3vw, 2.6rem); }
#runway .arc__head .h-lg { max-inline-size: 22ch; }
#runway .arc__head p { max-inline-size: 42rem; margin: 0; }
#runway .arc__head h2::after { margin-inline: auto; }

.arc { position: relative; --cw: clamp(230px, 23vw, 340px); --ch: calc(var(--cw) * 1.5); }
.arc__stage { position: relative; inline-size: 100%; block-size: calc(var(--ch) + 56px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.arc.is-drag .arc__stage { cursor: grabbing; }
.arc__ring { position: absolute; inset: 20px 0 36px; perspective: 1500px; perspective-origin: 50% 42%; }
.arc__glow { position: absolute; left: 50%; bottom: 0; inline-size: min(76vw, 720px); block-size: 190px; transform: translate3d(-50%, 38%, 0); pointer-events: none; z-index: 0;
  background: radial-gradient(52% 58% at 50% 55%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 72%); opacity: .95; transition: background .45s; }

.arc__card { position: absolute; left: 50%; top: 0; inline-size: var(--cw); block-size: var(--ch); margin-inline-start: 0; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid rgba(241,236,227,.1);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: translate3d(-50%, 0, 0); transform-origin: 50% 50%; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; isolation: isolate; transition: border-color .45s, box-shadow .45s; }
.arc__card.is-centre { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 46px 110px rgba(0,0,0,.6), 0 0 96px var(--accent-glow); }
.arc__go { position: absolute; inset: 0; display: block; -webkit-user-drag: none; }
.arc__go img { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; filter: saturate(.92) contrast(1.03); }
.arc__card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(18,26,39,.94) 0%, rgba(18,26,39,.62) 30%, rgba(18,26,39,0) 62%); }
.arc__shade { position: absolute; inset: 0; z-index: 2; background: var(--navy); opacity: 0; pointer-events: none; }
.arc__dimname { position: absolute; inset-inline: 0; inset-block-end: 1.05rem; z-index: 3; text-align: center; font: 700 .86rem/1.2 var(--font); color: var(--dim); opacity: 0; pointer-events: none; padding-inline: .8rem; text-shadow: 0 2px 16px rgba(18,26,39,.9); }
.arc__cap { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; display: grid; gap: .3rem; padding: 1.2rem 1.15rem 1.1rem; opacity: 0; transform: translate3d(0, 14px, 0); pointer-events: none; }
.arc__tag { font: 700 .68rem/1 var(--font); letter-spacing: .02em; color: var(--accent); transition: color .45s; }
.arc__name { font: 800 clamp(1.15rem, 1.5vw, 1.45rem)/1.2 var(--display); margin: 0; color: var(--off); }
.arc__line { margin: 0; font-size: .84rem; line-height: 1.55; font-weight: 300; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arc__spec { margin: 0; font-size: .68rem; line-height: 1.5; color: var(--mute); }
.arc__spec .mono { font-size: .68rem; color: var(--dim); }
.arc__spec .needs { color: var(--dim); }
.arc__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-block-start: .35rem; }
.arc__foot .price { font: 700 .95rem/1 var(--font); color: var(--off); white-space: nowrap; }
.arc__foot .btn { min-block-size: 46px; padding-inline: 1rem; font-size: .82rem; }
.arc__card--custom .arc__foot { justify-content: flex-start; }
.arc__card--custom .arc__foot .btn { flex: 1; justify-content: center; }

.arc__ui { position: relative; z-index: 2; display: flex; direction: ltr; align-items: center; justify-content: center; gap: .9rem; margin-block-start: .2rem; }
.arc__btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid rgba(241,236,227,.16); color: var(--off); background: rgba(23,33,49,.55); transition: border-color .3s, background .3s, color .3s; }
.arc__btn:hover { border-color: var(--accent); color: var(--accent); }
.arc__dots { display: flex; align-items: center; gap: 0; }
.arc__dots i { position: relative; display: grid; place-items: center; inline-size: 44px; block-size: 44px; cursor: pointer; }   /* هدف لمس 44px، والنقطة المرئية في ::before */
.arc__dots i::before { content: ''; display: block; inline-size: 8px; block-size: 8px; border-radius: 999px; background: rgba(241,236,227,.18); transition: inline-size .35s var(--ease), background .35s, box-shadow .35s; }
.arc__dots i.is-on::before { inline-size: 26px; background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }

.arc__end { display: grid; justify-items: center; text-align: center; gap: 1.2rem; margin-block-start: clamp(1.4rem, 3vw, 2.4rem); }
.arc__note { margin: 0; max-inline-size: 44rem; color: var(--dim); font-weight: 300; font-size: .98rem; line-height: 1.8; }
.arc__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.arc__cta .btn { min-block-size: 48px; }

/* ---- موبايل: المنتصف ~72vw والجانبان يطلّان ---- */
@media (max-width: 900px) {
  .runway { padding-block: var(--sec-pad, 2.75rem) 2.25rem; }
  #runway .arc__head { margin-block-end: 1.2rem; gap: .45rem; }
  .arc { --cw: min(72vw, 40svh); }
  .arc__stage { block-size: calc(var(--ch) + 40px); }
  .arc__ring { inset: 12px 0 28px; perspective: 950px; perspective-origin: 50% 45%; }
  .arc__glow { inline-size: 120vw; block-size: 150px; }
  .arc__card { border-radius: 20px; }
  .arc__cap { padding: 1rem .95rem .95rem; gap: .25rem; }
  .arc__name { font-size: clamp(1.15rem, 5.4vw, 1.4rem); }
  .arc__line { font-size: .82rem; }
  .arc__spec { font-size: .64rem; }
  .arc__spec .mono, .arc__spec .needs { white-space: nowrap; }
  .arc__foot .btn { min-block-size: 46px; padding-inline: .9rem; font-size: .8rem; }
  .arc__ui { margin-block-start: .1rem; }
  .arc__end { margin-block-start: 1.3rem; gap: 1rem; }
  .arc__note { font-size: .92rem; line-height: 1.7; }
  .arc__cta { inline-size: 100%; }
  .arc__cta .btn { flex: 1 1 10rem; justify-content: center; }
}

/* ---- reduced motion: صف مسطّح بلا قوس ولا دوران — تمرير أفقي أصلي ---- */
@media (prefers-reduced-motion: reduce) {
  .arc__stage { block-size: auto; overflow: visible; overflow-x: auto; cursor: auto; touch-action: auto; scrollbar-width: none; }
  .arc__stage::-webkit-scrollbar { display: none; }
  .arc__glow { display: none; }
  .arc__ring { position: static; display: flex; gap: 1rem; padding: .25rem 1.25rem 1rem; perspective: none; inline-size: max-content; }
  .arc__card { position: relative; left: auto; flex: 0 0 auto; transform: none !important; opacity: 1 !important; scroll-snap-align: center; }
  .arc__cap { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .arc__shade, .arc__dimname { display: none; }
  .arc__ui { display: none; }
}

/* ---- طلب العميل: كاروسيل أوسع على الديسكتوب + خط أوضح في «كيف نصنع» ---- */
@media (min-width: 901px) {
  .arc { --cw: clamp(270px, 27vw, 430px); }
  .arc__ring { perspective: 1900px; }
  .lt__slab { background: rgba(18,26,39,.72); backdrop-filter: blur(26px) saturate(1.2); }
  .make__veil { background: linear-gradient(180deg, rgba(18,26,39,.55), rgba(18,26,39,.75)); }
  .pane { opacity: .62; }
  .pane p { color: var(--off); font-weight: 400; }
  .pane__kpis span { color: var(--dim); }
  .pane__kpis b { color: var(--off); }
}

/* ---- تصحيح قصّ النقاط والهمزات أسفل الحروف في كشف الكلمات (ي، ء، ج…) ---- */
.w { padding-block: .08em .3em; margin-block: 0; padding-inline: .06em; margin-inline: 0; line-height: inherit; }

/* ---- طلب العميل: لا أكواد منتجات مرئية في أي مكان ---- */
.sw small, .code, .slide__code, .pcard__code, .gallery__code, .arc__code, .phero__code, [data-state-code] { display: none !important; }

/* ---- طلب العميل: عنوان «لماذا Tama Square» أصغر وبتباعد أسطر أوسع كي لا تتراكب النقاط ---- */
.proof h2 { font-size: clamp(2rem, 4.3vw, 4rem) !important; line-height: 1.25 !important; }
@media (max-width: 900px) { .proof h2 { font-size: clamp(1.7rem, 7.4vw, 2.3rem) !important; line-height: 1.28 !important; } }

/* ---- زر واتساب بالهوية: مربع ذهبي بحواف دائرية مثل الشعار + أيقونة واتساب كحلية ---- */
.wa { inline-size: 56px; block-size: 56px; border-radius: 16px; color: #121A27; background: linear-gradient(150deg, #E2CB9A 0%, #D2B47A 30%, #B39359 62%, #8F7443 100%); border: 1px solid rgba(241,236,227,.35); box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(18,26,39,.35), inset 0 1px 0 rgba(241,236,227,.55), inset 0 -3px 8px rgba(18,26,39,.25); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.wa svg { inline-size: 27px; block-size: 27px; filter: drop-shadow(0 1px 0 rgba(241,236,227,.35)); }
.wa::after { content: ''; position: absolute; inset: -6px; border-radius: 20px; border: 1px solid rgba(210,180,122,.55); animation: waRing 2.8s ease-out infinite; pointer-events: none; }
.wa:hover { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 16px 34px rgba(179,147,89,.35), inset 0 1px 0 rgba(241,236,227,.6); }
@keyframes waRing { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa::after { animation: none; opacity: 0; } }

/* ---- هيرو: طبقة WebGL (herofx.js) + لمعة ذهبية على كلمات العنوان الذهبية ---- */
.theater__art > canvas.theater__gl { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.theater__art.is-gl > canvas.theater__gl { opacity: 1; }
.theater__art.is-gl img { opacity: 0 !important; }
.theater h1 .g { padding-block: .1em .42em; margin-block: -.1em -.42em; background: linear-gradient(100deg, var(--accent) 0 38%, #F1ECE3 50%, var(--accent) 62% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tsShine 7s ease-in-out 2.6s infinite; }
@keyframes tsShine { 0%, 60% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .theater h1 .g { animation: none; } }

/* ---- هيرو أقوى: سواتش بصور المنتجات + تدرّج قراءة + مؤشّر تمرير ---- */
.sw { padding-inline: .45rem .95rem; }
.sw i { inline-size: 30px; block-size: 30px; border-radius: 50%; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(241,236,227,.22), 0 2px 8px rgba(0,0,0,.4); }
.sw i img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sw i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--c); mix-blend-mode: soft-light; opacity: .85; }
.sw.is-on i { box-shadow: inset 0 0 0 1px rgba(241,236,227,.5), 0 0 0 2px var(--accent), 0 6px 18px var(--accent-glow); }
.theater__in::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 85% at 78% 45%, rgba(18,26,39,.82) 0%, rgba(18,26,39,.55) 45%, rgba(18,26,39,0) 78%); }
html[dir="ltr"] .theater__in::before { background: radial-gradient(120% 85% at 22% 45%, rgba(18,26,39,.82) 0%, rgba(18,26,39,.55) 45%, rgba(18,26,39,0) 78%); }
.scrollcue { position: absolute; z-index: 6; inset-inline-start: 50%; transform: translateX(-50%); inset-block-end: calc(72px + 1.1rem); display: grid; justify-items: center; gap: .5rem; font: 500 .62rem var(--font); letter-spacing: .28em; color: var(--mute); pointer-events: none; }
.scrollcue i { inline-size: 1px; block-size: 46px; background: linear-gradient(to bottom, transparent, var(--accent) 45%, transparent); position: relative; overflow: hidden; }
.scrollcue i::after { content: ''; position: absolute; inset-inline: -1.5px; block-size: 10px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: cueRun 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cueRun { 0% { transform: translateY(-14px); opacity: 0; } 30%, 60% { opacity: 1; } 100% { transform: translateY(48px); opacity: 0; } }
@media (max-width: 900px) {
  .theater .swatches { display: flex !important; flex-wrap: nowrap; justify-content: center; gap: .55rem; margin-block: .85rem .25rem; overflow: visible; padding: 0; }
  .theater .swatches__l { display: none; }
  .theater .swatches .sw { padding: 3px !important; border-radius: 50% !important; gap: 0 !important; font-size: 0 !important; min-block-size: 44px; min-inline-size: 44px; inline-size: 44px; justify-content: center; }
  .theater .swatches .sw i { inline-size: 36px !important; block-size: 36px !important; }
  .scrollcue { display: none; }
  .theater__in::before { background: linear-gradient(180deg, rgba(18,26,39,.72), rgba(18,26,39,.35) 62%, rgba(18,26,39,0)); }
}
@media (prefers-reduced-motion: reduce) { .scrollcue i::after { animation: none; } }

/* ---- موبايل: زر الهيرو في آخر القسم ---- */
@media (max-width: 900px) {
  .theater .btn-row--end { order: 9; flex: 0 0 auto; display: flex; justify-content: center; inline-size: auto; margin: .2rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 7; }
  .theater .btn-row--end .btn { inline-size: 100%; }
  .theater .swatches { margin-block-end: .9rem; }
}

/* ---- موبايل: تحكّم واضح في مدرّج المنتجات (سحب + سهمان جانبيان ثابتان) ---- */
@media (max-width: 900px) {
  .arc { position: relative; }
  .arc__ui { position: static; }
  .arc__ui .arc__btn { position: absolute; inset-block-start: 42%; transform: translateY(-50%); z-index: 8; inline-size: 46px; block-size: 46px; border-radius: 50%; background: rgba(18,26,39,.78); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(0,0,0,.5); color: var(--accent); }
  .arc__ui .arc__btn:first-of-type { inset-inline-start: .35rem; }
  .arc__ui .arc__btn:last-of-type { inset-inline-end: .35rem; }
  .arc__ui .arc__btn:active { transform: translateY(-50%) scale(.94); }
  .arc__dots { justify-content: center; inline-size: 100%; }
  .arc__stage { touch-action: pan-y !important; }
}

/* ---- تصحيح تراكب أسطر العناوين وقصّ الحروف ---- */
.theater h1 { line-height: 1.0 !important; }
.sec-head h2, .arc__head h2, .phero h1, #proof h2 { line-height: 1.06 !important; }
.theater h1 .g { padding-block: .06em .28em; margin-block: 0; }
@media (max-width: 900px) {
  .theater h1 { line-height: 1.04 !important; }
  .sec-head h2, .arc__head h2, .phero h1, #proof h2 { line-height: 1.12 !important; }
  .w { padding-block: .06em .26em; }
}

/* ---- طلب العميل: إزالة محاكاة المتصفح من هيرو الموبايل وتقليل الفراغ ---- */
@media (max-width: 900px) {
  .mbrowser { display: none !important; }
  .mshow { min-block-size: 210px; margin-block-start: .35rem; }
  .mring { top: -418px; transform: scale(1.06); }
  .theater__in { padding-block-end: 0; }
  .theater h1 { margin-block: .3rem .45rem; }
  .theater .lead { margin-block-end: .55rem; }
  .theater .swatches { margin-block: .55rem .15rem; }
  .theater .btn-row--end { margin-block: .35rem calc(.85rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---- طلب العميل: إخفاء سهمَي المدرّج (السحب والنقاط تكفي) ---- */
.arc__ui .arc__btn { display: none !important; }

/* ---- منع قصّ الحروف النازلة في كشف الكلمات (clip بهامش بدل hidden) ---- */
.w { overflow: clip; overflow-clip-margin: .55em; padding-block: .05em .12em; margin-block: 0; }
.theater h1 .g { padding-block: .05em .12em; }
.theater h1 { line-height: 1.16 !important; }
.sec-head h2, .arc__head h2, .phero h1, #proof h2 { line-height: 1.18 !important; }
@media (max-width: 900px) { .theater h1 { line-height: 1.18 !important; } }

/* =====================================================================
   شارة السلة في الهيدر (cart.js) — على كل الصفحات
   ===================================================================== */
.header__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 12px; color: var(--dim); border: 1px solid transparent; transition: color .3s, border-color .3s, background .3s; }
.header__cart:hover, .header__cart:focus-visible { color: var(--off); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: rgba(27,38,55,.5); }
.header__cart svg { inline-size: 21px; block-size: 21px; }
.header__cart-n { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 .66rem/1 var(--mono); }
.header__cart-n[hidden] { display: none; }
.header__cart.is-bump .header__cart-n { animation: ts-bump .5s var(--ease); }
@keyframes ts-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .header__cart.is-bump .header__cart-n { animation: none; } }

/* ---- فيديو الهيرو ---- */
.theater__vid { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 50%; z-index: 0; filter: saturate(.9) contrast(1.05) brightness(.78); }
.theater__art.has-video img, .theater__art.has-video > canvas.theater__gl { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .theater__vid { display: none; } .theater__art.has-video img { opacity: 1 !important; } }

/* ---- طلب العميل: إخفاء اللوح الزجاجي من الهيرو (الفيديو هو الخلفية) ---- */
.theater__glass { display: none !important; }

/* ---- إلغاء قصّ الكلمات نهائياً: الكشف بالانزلاق والتلاشي بلا قناع ---- */
.w { overflow: visible !important; padding-block: 0 !important; }
.theater h1 .g { padding-block: 0 !important; }

/* ---- الفيديو يملأ الشاشة بوضوح: تخفيف الطبقات فوقه + إزالة الشريط الجانبي ---- */
.theater__slab { display: none !important; }
.theater__vid { filter: saturate(.95) contrast(1.03) brightness(.92); object-position: 50% 50%; }
.theater__art.has-video ~ .theater__veil, .theater .theater__veil { opacity: .5; }
.theater .theater__fog { opacity: .45; }
.theater .theater__beam { opacity: .18; }
.theater__in::before { background: linear-gradient(to left, rgba(18,26,39,.62) 0%, rgba(18,26,39,.28) 38%, rgba(18,26,39,0) 66%) !important; }
html[dir="ltr"] .theater__in::before { background: linear-gradient(to right, rgba(18,26,39,.62) 0%, rgba(18,26,39,.28) 38%, rgba(18,26,39,0) 66%) !important; }
@media (max-width: 900px) {
  .theater__in::before { background: linear-gradient(180deg, rgba(18,26,39,.72) 0%, rgba(18,26,39,.42) 45%, rgba(18,26,39,.1) 100%) !important; }
  .theater .theater__veil { opacity: .55; }
}

/* ---- تباعد أسطر العناوين ومسافات الكلمات بعد إلغاء القناع ---- */
.w { margin-inline-end: .2em; }
.theater h1 { line-height: 1.34 !important; }
#proof h2 { line-height: 1.42 !important; }
.sec-head h2, .arc__head h2, .phero h1, .story h2, .make h2, .academy h2, .custom h2 { line-height: 1.34 !important; }
h1, h2, h3 { text-wrap: balance; }
@media (max-width: 900px) {
  .theater h1 { line-height: 1.3 !important; }
  #proof h2, .sec-head h2, .arc__head h2, .phero h1 { line-height: 1.36 !important; }
}

/* ---- الفيديو يظهر بعرض الشاشة: تعتيم أخف بكثير خلف النص فقط ---- */
.theater__vid { filter: none; }
.theater .theater__veil { opacity: .26 !important; }
.theater .theater__fog { opacity: .3 !important; }
.theater .theater__beam { opacity: .12 !important; }
.theater__in::before { background: linear-gradient(to left, rgba(18,26,39,.5) 0%, rgba(18,26,39,.16) 34%, rgba(18,26,39,0) 58%) !important; }
html[dir="ltr"] .theater__in::before { background: linear-gradient(to right, rgba(18,26,39,.5) 0%, rgba(18,26,39,.16) 34%, rgba(18,26,39,0) 58%) !important; }
.theater h1, .theater .lead, .theater .eyebrow { text-shadow: 0 2px 18px rgba(18,26,39,.75), 0 1px 3px rgba(18,26,39,.6); }
@media (max-width: 900px) {
  .theater__in::before { background: linear-gradient(180deg, rgba(18,26,39,.62) 0%, rgba(18,26,39,.3) 42%, rgba(18,26,39,0) 100%) !important; }
  .theater .theater__veil { opacity: .34 !important; }
}

/* ---- موبايل: الفيديو يغطي كامل الهيرو (بلا فراغ جانبي) ---- */
@media (max-width: 900px) {
  .theater__art { inset: 0 !important; }
  .theater__vid { inline-size: 100% !important; block-size: 100% !important; object-fit: cover !important; object-position: 58% 50%; }
}

/* ---- رجوع اللون الذهبي الصريح لكلمات العنوان (إلغاء لمعة التدرّج) ---- */
.theater h1 .g, .g { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--accent) !important; animation: none !important; }

/* ---- موبايل: إزالة طبقات التعتيم فوق الفيديو في الهيرو ---- */
@media (max-width: 900px) {
  .theater__in::before { display: none !important; }
  .theater .theater__veil { opacity: 0 !important; }
  .theater .theater__fog, .theater .theater__beam { opacity: 0 !important; }
  .theater h1, .theater .lead, .theater .eyebrow { text-shadow: 0 2px 16px rgba(18,26,39,.9), 0 1px 4px rgba(18,26,39,.8); }
}

/* ---- الهيرو: قصّ الشريط الأسود المحفور في الفيديو + الجزء الميت من يمين الكادر ---- */
.theater__vid { transform: translateX(11%) scale(1.3); transform-origin: 50% 50%; }
@media (max-width: 900px) { .theater__vid { transform: scale(1.1) !important; } }


/* ---- الهيرو: بدون أي خلفية أو طبقات فوق الفيديو — الفيديو خام ---- */
.theater__art.has-video::after,
.theater__art.has-video::before { display: none !important; }
.theater .theater__veil,
.theater .theater__fog,
.theater .theater__beam { display: none !important; }
.theater .theater__in::before { display: none !important; }
.theater__vid { filter: none !important; }
.theater h1, .theater .lead, .theater .eyebrow {
  text-shadow: 0 2px 18px rgba(18,26,39,.92), 0 1px 5px rgba(18,26,39,.85);
}

/* ---- تقرير المراجعة (بند 2): محاذاة الشعار ----
   letter-spacing بيضيف مسافة بعد آخر حرف، فالفراغ بين الاسم والشعار كان بيبان
   أكبر من الناحية التانية. نعوّضها بهامش سالب بنفس المقدار فتتساوى المسافة. */
.logo__t { align-items: flex-start; }
.logo__t b, .logo__t span { margin-inline-end: -.32em; }
.logo { gap: .7rem; align-items: center; }

/* ---- تقرير المراجعة (بند 4): الشريط المتحرك ----
   كان في آخر الهيرو فمحدش بياخد باله منه أول ما يفتح الموقع.
   نقلناه تحت القائمة مباشرة — مرئي فوراً بدون تمرير. */
.theater .stagebar {
  inset-block-end: auto !important;
  inset-block-start: var(--header-h) !important;
  transform: none !important;
  block-size: 52px;
  border-block-start: 0;
  border-block-end: 1px solid var(--accent);
  background: color-mix(in srgb, var(--navy-2) 88%, transparent);
  backdrop-filter: blur(6px);
}
.theater .stagebar__track span { font-size: .85rem; }
@media (max-width: 900px) {
  .theater .stagebar {
    display: flex !important;
    position: absolute !important;
    block-size: 44px;
  }
  .theater .stagebar__track { flex-wrap: nowrap; inline-size: max-content; padding-block: 0; gap: 1.4rem; }
  .theater .stagebar__track [aria-hidden="true"] { display: inline; }
  .theater .stagebar__track span { font-size: .74rem; }
}