/* ============================================================================
   SOLUTIONS CASTLE — Premium 3D Editorial Website
   Palette: deep navy + energy cyan.  Type: Plus Jakarta Sans / Syne.
   ========================================================================= */

:root{
  /* brand */
  --navy-900:#02131E;
  --navy-850:#031622;
  --navy-800:#051B2C;
  --navy-700:#072634;
  --navy-600:#0A3145;
  --cyan-500:#00CFC8;
  --cyan-400:#00F0E6;
  --white:#FFFFFF;

  --ink-90:rgba(255,255,255,.90);
  --ink-70:rgba(255,255,255,.68);
  --ink-52:rgba(255,255,255,.52);
  --ink-38:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.055);

  /* type families */
  --ff-latin:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-syne:'Syne', 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-alt:'Syne', 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-ar:'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* standardized fluid typography tokens */
  --type-display: clamp(2.4rem, 6.4vw, 5.4rem);
  --type-display-lh: 0.94;
  --type-h1: clamp(2.0rem, 3.8vw, 3.2rem);
  --type-h1-lh: 1.18;
  --type-h2-panel: clamp(2.2rem, 5.4vw, 4.6rem);
  --type-h2-panel-lh: 0.94;
  --type-h2: clamp(1.65rem, 2.6vw, 2.35rem);
  --type-h2-lh: 1.24;
  --type-h3: clamp(1.25rem, 1.8vw, 1.65rem);
  --type-h3-lh: 1.32;
  --type-h4: clamp(1.02rem, 1.25vw, 1.2rem);
  --type-h4-lh: 1.38;
  --type-lead: clamp(14px, 1.05vw, 17px);
  --type-lead-lh: 1.68;
  --type-body: clamp(13px, 0.92vw, 14.5px);
  --type-body-lh: 1.62;
  --type-small: clamp(11.5px, 0.8vw, 13px);
  --type-small-lh: 1.55;
  --type-eyebrow: clamp(10.5px, 0.76vw, 12px);
  --type-eyebrow-lh: 1.4;
  --type-eyebrow-ls: 0.14em;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);

  /* layout */
  --pad:clamp(20px, 5vw, 84px);
  --maxw:1440px;

  /* scroll geometry (JS keeps these in sync) */
  --seg:1.6;          /* section length, in viewport heights */
  --persp:1500px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  /* native smooth anchor navigation — wheel / trackpad / touch / keys are
     never intercepted by JS; the browser stays in full control of scrolling */
  scroll-behavior:smooth;
  background:var(--navy-900);
}

body{
  margin:0;
  min-height:100%;
  font-family:var(--ff);
  font-weight:400;
  color:var(--white);
  background:
    radial-gradient(120% 90% at 50% 8%,  #072634 0%, #04121C 45%, #02131E 100%),
    var(--navy-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea, optgroup{ font-family:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
input::placeholder, textarea::placeholder{ font-family:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--cyan-500); color:var(--navy-900); }

/* keyboard focus — visible, on-brand, never invisible */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:4px;
  border-radius:4px;
}
.nav__brand:focus-visible,.foot__brand:focus-visible{ outline-offset:8px; }
.panel a:focus-visible,.panel button:focus-visible{ outline-offset:6px; }

/* respect users who ask for less motion */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ATMOSPHERE — one continuous world behind every section
   ═════════════════════════════════════════════════════════════════════════ */
.atmosphere{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.atmosphere__dust{ position:absolute; inset:0; width:100%; height:100%; }

.atmosphere__grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(to right, rgba(0,240,230,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 12.5% 22%;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%);
          mask-image:radial-gradient(120% 80% at 50% 45%, #000 0%, rgba(0,0,0,.35) 55%, transparent 88%);
  opacity:.9;
}

.atmosphere__horizon{
  position:absolute; left:50%; top:50%; width:180vw; height:180vw;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(0,207,200,.10), transparent 70%);
  opacity:.7;
}

.atmosphere__glow{
  position:absolute; width:78vw; height:78vw; border-radius:50%;
  will-change:transform;
}
.atmosphere__glow--a{
  left:-22vw; top:-28vw;
  background:radial-gradient(closest-side, rgba(0,207,200,.15), rgba(0,207,200,.05) 52%, transparent 74%);
}
.atmosphere__glow--b{
  right:-26vw; bottom:-30vw;
  background:radial-gradient(closest-side, rgba(0,132,180,.20), rgba(0,110,160,.06) 52%, transparent 74%);
}

.atmosphere__vignette{
  position:absolute; inset:0;
  background:radial-gradient(105% 75% at 50% 45%, transparent 42%, rgba(1,9,15,.55) 82%, rgba(1,7,12,.86) 100%);
}

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.055;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION — Sticky Corporate Bar with Solid Backdrop on Scroll
   ═════════════════════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  opacity:1; transform:none;
  background:rgba(2, 19, 30, 0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
             border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
             padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.is-stuck{
  background:#02131E !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  border-bottom:1px solid rgba(0, 240, 230, 0.22) !important;
  box-shadow:0 10px 30px -5px rgba(0,0,0,0.88), 0 1px 0 rgba(0, 240, 230, 0.15) !important;
}

.nav__bg{
  position:absolute; inset:0; pointer-events:none;
}

.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(12px,1.5vw,18px) var(--pad);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(14px,2vw,36px);
  transition:padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.is-stuck .nav__inner{
  padding-top:clamp(9px,1.1vw,12px);
  padding-bottom:clamp(9px,1.1vw,12px);
}

.nav__brand{ display:inline-flex; align-items:center; flex-shrink:0; line-height:0; }
.nav__logo{
  width:auto; height:clamp(26px,2.2vw,34px); max-height:36px; max-width:160px;
  object-fit:contain; display:block;
  transition:opacity .3s var(--ease);
}
.nav__brand:hover .nav__logo{ opacity:.78; }

.nav__links{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  gap:2px;
  background:rgba(3,18,28,0.78);
  border:1px solid rgba(0,240,230,0.18);
  box-shadow:0 10px 30px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.09);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:999px;
  padding:4px;
}

.nav__pill{
  position:absolute;
  top:4px; bottom:4px; left:0;
  width:0;
  border-radius:999px;
  background:var(--cyan-400);
  box-shadow:0 0 24px rgba(0,240,230,0.5), inset 0 1px 1px rgba(255,255,255,0.6);
  pointer-events:none;
  z-index:1;
  opacity:0;
  transform:translate3d(0,0,0);
  transition:transform .32s cubic-bezier(0.22, 1, 0.36, 1),
             width .32s cubic-bezier(0.22, 1, 0.36, 1),
             opacity .22s ease;
}

.nav__pill.is-visible{
  opacity:1;
}

.nav__link{
  position:relative;
  z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px clamp(11px, 1.2vw, 17px);
  font-family:var(--ff);
  font-size:clamp(10.5px,.72vw,11.5px);
  font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-70, rgba(225,255,253,0.72));
  border-radius:999px;
  transition:color .22s ease;
  white-space:nowrap;
  text-decoration:none;
}

.nav__link::after{ display:none !important; }

.nav__link:hover{ color:var(--white); }

.nav__link.is-pill-active{
  color:var(--navy-900) !important;
  font-weight:700 !important;
}

.nav__link.is-current:not(.is-pill-active){
  color:var(--cyan-400);
}

@media (prefers-reduced-motion: reduce) {
  .nav__pill{ transition:none !important; }
}

.nav__right{ display:flex; align-items:center; gap:clamp(8px,1vw,14px); justify-self:end; flex-shrink:0; }

.nav__rule{
  height:1px; background:var(--line-2); transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.nav.is-stuck .nav__rule{ transform:scaleX(1); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  --bh:clamp(44px,3.4vw,50px);
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  height:var(--bh); padding:0 clamp(20px,1.6vw,28px);
  font-size:clamp(10.5px,.75vw,12px); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  border-radius:999px; position:relative; overflow:hidden;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn__arw{ display:inline-block; transition:transform .35s var(--ease); font-size:1.1em; line-height:1; }
.btn:hover .btn__arw{ transform:translateX(4px); }

.btn--solid{
  background:var(--cyan-500); color:var(--navy-900);
  border:1px solid rgba(0,240,230,.35);
  box-shadow:0 0 0 1px rgba(0,240,230,.25), 0 10px 32px -12px rgba(0,207,200,.75);
}
.btn--solid:hover{
  background:var(--cyan-400); color:var(--navy-900);
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(0,240,230,.4), 0 14px 40px -10px rgba(0,240,230,.85);
}

.btn--ghost{
  color:var(--white); border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.03);
}
.btn--ghost:hover{
  border-color:var(--cyan-400); color:var(--cyan-400);
  background:rgba(0,240,230,.08);
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(0,240,230,0.18);
}

.nav__cta{
  --bh:clamp(34px,2.4vw,38px);
  min-height:34px;
  height:var(--bh);
  padding:0 clamp(14px,1.1vw,18px);
  font-size:clamp(10px,0.68vw,11px);
  font-weight:600;
  letter-spacing:.08em;
  gap:0.55em;
  border:1px solid rgba(0,240,230,0.32);
  background:rgba(0,240,230,0.06);
  flex-shrink:0;
}
.nav__cta:hover{
  border-color:var(--cyan-400);
  background:rgba(0,240,230,0.16);
  box-shadow:0 0 18px rgba(0,240,230,0.28);
  color:var(--cyan-400);
  transform:translateY(-1px);
}
.nav__cta .btn__arw{ font-size:0.95em; }

/* ── language switcher ─────────────────────────────────────────────────── */
.lang-switch{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(2,19,30,0.75);
  border:1px solid rgba(0,240,230,0.22);
  border-radius:999px;
  padding:4px 12px;
  min-height:36px;
  height:clamp(34px,2.4vw,38px);
  cursor:pointer;
  flex-shrink:0;
  user-select:none;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.lang-switch:hover{
  border-color:var(--cyan-400);
  background:rgba(0,240,230,.10);
  box-shadow:0 0 14px rgba(0,240,230,0.2);
}
.lang-btn{
  font-family:var(--ff-latin);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink-52);
  transition:color .3s linear;
}
.lang-btn[data-lang="ar"]{
  font-family:var(--ff-ar);
  font-size:12px;
  letter-spacing:0;
}
.lang-btn.is-active{
  color:var(--cyan-400);
  font-weight:700;
}
.lang-sep{
  font-size:11px;
  color:rgba(255,255,255,.25);
}

/* ── burger ──────────────────────────────────────────────────────────────── */
.burger{
  display:none;
  width:44px; height:44px; min-width:44px; min-height:44px;
  position:relative;
  border:1px solid rgba(0,240,230,.25); border-radius:10px;
  background:rgba(2,19,30,0.6);
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.burger:hover{
  border-color:var(--cyan-400);
  background:rgba(0,240,230,0.1);
}
.burger span{
  position:absolute; left:50%; width:18px; height:2px; background:var(--white);
  border-radius:2px;
  transform:translateX(-50%); transition:transform .35s var(--ease), top .35s var(--ease), bottom .35s var(--ease), opacity .25s ease, background .3s ease;
}
.burger span:first-child{ top:16px; }
.burger span:last-child{ bottom:16px; }
.burger.is-open{
  border-color:var(--cyan-400);
  background:rgba(0,240,230,0.14);
}
.burger.is-open span{ background:var(--cyan-400); }
.burger.is-open span:first-child{ top:50%; transform:translateX(-50%) translateY(-50%) rotate(45deg); }
.burger.is-open span:last-child{ bottom:auto; top:50%; transform:translateX(-50%) translateY(-50%) rotate(-45deg); }

/* RTL Layout Adaptations & Arabic Typography (IBM Plex Sans Arabic) */
html[lang="ar"],
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
  --ff: var(--ff-ar);
  --ff-alt: var(--ff-ar);
  --ff-ar: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--ff-ar);

  --type-display: clamp(2.1rem, 5.2vw, 4.2rem);
  --type-display-lh: 1.32;
  --type-h1: clamp(1.85rem, 3.5vw, 2.85rem);
  --type-h1-lh: 1.34;
  --type-h2-panel: clamp(1.95rem, 4.4vw, 3.6rem);
  --type-h2-panel-lh: 1.30;
  --type-h2: clamp(1.55rem, 2.3vw, 2.15rem);
  --type-h2-lh: 1.38;
  --type-h3: clamp(1.2rem, 1.7vw, 1.55rem);
  --type-h3-lh: 1.42;
  --type-h4: clamp(0.98rem, 1.15vw, 1.15rem);
  --type-h4-lh: 1.46;
  --type-lead: clamp(13.5px, 0.95vw, 16px);
  --type-lead-lh: 1.76;
  --type-body: clamp(12.5px, 0.88vw, 14.5px);
  --type-body-lh: 1.74;
  --type-small: clamp(11px, 0.78vw, 12.5px);
  --type-small-lh: 1.64;
  --type-eyebrow: clamp(10.5px, 0.76vw, 12px);
  --type-eyebrow-ls: 0;
}
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--ff-ar) !important;
}

/* Comprehensive Arabic Typography Enforcement Across All Components */
html[lang="ar"], html[dir="rtl"],
html[lang="ar"] body, html[dir="rtl"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[lang="ar"] p, html[dir="rtl"] p,
html[lang="ar"] a, html[dir="rtl"] a,
html[lang="ar"] span, html[dir="rtl"] span,
html[lang="ar"] li, html[dir="rtl"] li,
html[lang="ar"] b, html[dir="rtl"] b,
html[lang="ar"] strong, html[dir="rtl"] strong,
html[lang="ar"] em, html[dir="rtl"] em,
html[lang="ar"] label, html[dir="rtl"] label,
html[lang="ar"] button, html[dir="rtl"] button,
html[lang="ar"] input, html[dir="rtl"] input,
html[lang="ar"] textarea, html[dir="rtl"] textarea,
html[lang="ar"] select, html[dir="rtl"] select,
html[lang="ar"] option, html[dir="rtl"] option,
html[lang="ar"] optgroup, html[dir="rtl"] optgroup,
html[lang="ar"] .display, html[dir="rtl"] .display,
html[lang="ar"] .title, html[dir="rtl"] .title,
html[lang="ar"] .lede, html[dir="rtl"] .lede,
html[lang="ar"] .lead, html[dir="rtl"] .lead,
html[lang="ar"] .eyebrow, html[dir="rtl"] .eyebrow,
html[lang="ar"] .badge, html[dir="rtl"] .badge,
html[lang="ar"] .btn, html[dir="rtl"] .btn,
html[lang="ar"] .nav__link, html[dir="rtl"] .nav__link,
html[lang="ar"] .nav__cta, html[dir="rtl"] .nav__cta,
html[lang="ar"] .menu__nav a, html[dir="rtl"] .menu__nav a,
html[lang="ar"] .menu__foot-meta, html[dir="rtl"] .menu__foot-meta,
html[lang="ar"] .fork__name, html[dir="rtl"] .fork__name,
html[lang="ar"] .fork__desc, html[dir="rtl"] .fork__desc,
html[lang="ar"] .statements, html[dir="rtl"] .statements,
html[lang="ar"] .index, html[dir="rtl"] .index,
html[lang="ar"] .cloud li, html[dir="rtl"] .cloud li,
html[lang="ar"] .stages b, html[dir="rtl"] .stages b,
html[lang="ar"] .stages span, html[dir="rtl"] .stages span,
html[lang="ar"] .sc-consent-title, html[dir="rtl"] .sc-consent-title,
html[lang="ar"] .sc-consent-desc, html[dir="rtl"] .sc-consent-desc,
html[lang="ar"] .sc-consent-btn--accept, html[dir="rtl"] .sc-consent-btn--accept,
html[lang="ar"] .sc-consent-btn--decline, html[dir="rtl"] .sc-consent-btn--decline,
html[lang="ar"] .footer__link, html[dir="rtl"] .footer__link,
html[lang="ar"] .footer__col-title, html[dir="rtl"] .footer__col-title,
html[lang="ar"] .footer__tagline, html[dir="rtl"] .footer__tagline,
html[lang="ar"] .footer__copy, html[dir="rtl"] .footer__copy,
html[lang="ar"] .footer__legal, html[dir="rtl"] .footer__legal {
  font-family: var(--ff-ar) !important;
}

/* Form controls placeholder styling */
html[lang="ar"] input::placeholder,
html[dir="rtl"] input::placeholder,
html[lang="ar"] textarea::placeholder,
html[dir="rtl"] textarea::placeholder {
  font-family: var(--ff-ar) !important;
}

/* English / Latin technical terms, codes, and logos keep Latin font */
.tech-term,
.badge--en,
code,
pre,
.nav__logo,
.lang-btn--en,
.lang-btn[data-lang="en"],
[dir="ltr"],
html[lang="ar"] .tech-term,
html[dir="rtl"] .tech-term,
html[lang="ar"] .badge--en,
html[dir="rtl"] .badge--en,
html[lang="ar"] code,
html[dir="rtl"] code,
html[lang="ar"] pre,
html[dir="rtl"] pre,
html[lang="ar"] .nav__logo,
html[dir="rtl"] .nav__logo,
html[lang="ar"] .lang-btn--en,
html[dir="rtl"] .lang-btn--en,
html[lang="ar"] [dir="ltr"],
html[dir="rtl"] [dir="ltr"] {
  direction: ltr !important;
  display: inline-block;
  unicode-bidi: isolate;
  font-family: var(--ff-latin) !important;
}

html[dir="rtl"] .nav__links{ direction:rtl; }
html[dir="rtl"] .nav__link{
  font-family:var(--ff-ar) !important;
  font-size:12.5px;
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .btn{
  font-family:var(--ff-ar) !important;
  letter-spacing:0;
  font-size:clamp(11.5px, .8vw, 13px);
  text-transform:none;
}
html[dir="rtl"] .btn__arw{ transform:scaleX(-1); }
html[dir="rtl"] .btn:hover .btn__arw{ transform:scaleX(-1) translateX(4px); }
html[dir="rtl"] .fork__side--r{ text-align:left; justify-items:start; }
html[dir="rtl"] .fork__side:not(.fork__side--r){ text-align:right; justify-items:end; }
html[dir="rtl"] .rail{ right:auto; left:clamp(16px,2vw,36px); }

/* Arabic Display & Hero Headings */
html[lang="ar"] .display,
html[dir="rtl"] .display {
  font-family: var(--ff-ar) !important;
  font-weight: 700;
  font-size: var(--type-display);
  line-height: var(--type-display-lh);
  letter-spacing: 0;
  word-spacing: normal;
  text-transform: none;
}
html[lang="ar"] .hero .display,
html[dir="rtl"] .hero .display {
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
}
html[lang="ar"] .display .mask,
html[dir="rtl"] .display .mask {
  padding-bottom: 0.08em;
  overflow: visible;
}
html[lang="ar"] .display .mask:not(:last-child),
html[dir="rtl"] .display .mask:not(:last-child) {
  margin-bottom: 0.04em;
  margin-inline-end: 0.25em;
}
html[lang="ar"] .display--finale,
html[dir="rtl"] .display--finale {
  font-size: var(--type-display);
  line-height: var(--type-display-lh);
  letter-spacing: 0;
  word-spacing: normal;
}
html[lang="ar"] .panel .title,
html[dir="rtl"] .panel .title {
  font-family: var(--ff-ar) !important;
  font-size: var(--type-h2-panel);
  line-height: var(--type-h2-panel-lh);
  letter-spacing: 0;
  word-spacing: normal;
  text-transform: none;
  font-weight: 700;
}
html[lang="ar"] .title,
html[dir="rtl"] .title {
  font-family: var(--ff-ar) !important;
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  letter-spacing: 0;
  word-spacing: normal;
  text-transform: none;
  max-width: 30ch;
  font-weight: 600;
}
html[lang="ar"] .eyebrow,
html[dir="rtl"] .eyebrow {
  font-family: var(--ff-ar) !important;
  letter-spacing: 0;
  font-weight: 600;
}
html[lang="ar"] .lede,
html[lang="ar"] .lead,
html[dir="rtl"] .lede,
html[dir="rtl"] .lead {
  font-family: var(--ff-ar) !important;
  font-size: var(--type-lead);
  letter-spacing: 0;
  line-height: var(--type-lead-lh);
}

@media (max-width: 560px) {
  html[lang="ar"] .display,
  html[dir="rtl"] .display {
    font-size: clamp(1.85rem, 7.8vw, 2.65rem);
    line-height: 1.30;
    margin-top: 10px;
  }
  html[lang="ar"] .panel .title,
  html[dir="rtl"] .panel .title {
    font-size: clamp(1.7rem, 6.8vw, 2.35rem);
    line-height: 1.28;
  }
  html[lang="ar"] .title,
  html[dir="rtl"] .title {
    font-size: clamp(1.4rem, 5.8vw, 1.85rem);
    line-height: 1.34;
  }
}

/* ── mobile menu ─────────────────────────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:10001;
  background:rgba(2, 14, 22, 0.98);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.menu.is-open{
  opacity:1; pointer-events:auto; visibility:visible;
}
.menu__inner{
  width:100%; max-width:580px; margin:0 auto;
  padding:max(16px, env(safe-area-inset-top)) clamp(16px, 4vw, 28px) max(24px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; min-height:100%;
  box-sizing:border-box;
}
.menu__header{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:clamp(16px, 2.5vh, 26px);
}
.menu__brand{
  display:inline-flex; align-items:center;
}
.menu__brand img{
  height:clamp(24px, 5vw, 30px); width:auto; max-width:140px; object-fit:contain;
}
.menu__header-actions{
  display:flex; align-items:center; gap:10px;
}
.menu__close{
  width:44px; height:44px; min-width:44px; min-height:44px;
  border-radius:10px;
  border:1px solid rgba(0,240,230,0.25);
  background:rgba(2,19,30,0.7);
  color:var(--white);
  display:grid; place-items:center;
  font-size:24px; line-height:1;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.menu__close:hover,
.menu__close:focus-visible{
  border-color:var(--cyan-400);
  background:rgba(0,240,230,0.14);
  color:var(--cyan-400);
  transform:rotate(90deg);
}
.menu__nav{
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.menu__nav a{
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  padding:12px 16px;
  min-height:48px;
  font-family:var(--ff);
  font-size:clamp(14.5px, 3.8vw, 17px);
  font-weight:500;
  color:rgba(255,255,255,0.88);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;
  text-decoration:none;
  opacity:0; transform:translateY(12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
}
.menu__nav a i{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px;
  font-family:var(--ff-latin); font-style:normal;
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--cyan-400);
  padding:3px 6px; border-radius:6px;
  background:rgba(0,240,230,0.1);
  border:1px solid rgba(0,240,230,0.2);
  direction:ltr;
}
.menu__nav a:hover{
  background:rgba(0,240,230,0.08);
  border-color:rgba(0,240,230,0.3);
  color:var(--cyan-400);
  transform:translateX(4px);
}
html[dir="rtl"] .menu__nav a:hover{
  transform:translateX(-4px);
}
.menu__nav a.is-current{
  background:rgba(0,240,230,0.12);
  border-color:var(--cyan-400);
  color:var(--white);
  font-weight:600;
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; }
.menu.is-open .menu__nav a:nth-child(1){ transition-delay:.04s; }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.08s; }
.menu.is-open .menu__nav a:nth-child(3){ transition-delay:.12s; }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.16s; }
.menu.is-open .menu__nav a:nth-child(5){ transition-delay:.20s; }
.menu.is-open .menu__nav a:nth-child(6){ transition-delay:.24s; }

.menu__foot-box{
  margin-top:clamp(18px, 3vh, 28px);
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; gap:12px;
}
.menu__cta{
  width:100%;
  justify-content:center;
  --bh:46px;
  font-size:12px;
}
.menu__foot-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-52);
}
html[dir="rtl"] .menu__foot-meta{
  font-family:var(--ff);
  letter-spacing:0;
  text-transform:none;
}

/* ══════════════════════════════════════════════════════════════════════════
   RAIL + CUE
   ═════════════════════════════════════════════════════════════════════════ */
.rail{
  position:fixed; right:clamp(14px,2.4vw,38px); top:50%; transform:translateY(-50%);
  z-index:45; display:grid; justify-items:center; gap:14px;
  font-size:10px; letter-spacing:.18em; color:var(--ink-38);
  opacity:0; transition:opacity 1s var(--ease) .5s;
}
.is-ready .rail{ opacity:1; }
.rail__num{ color:var(--cyan-500); font-weight:600; }
.rail__line{
  width:1px; height:clamp(90px,16vh,180px);
  background:rgba(255,255,255,.14); position:relative; overflow:hidden;
}
.rail__line i{
  position:absolute; left:0; top:0; width:1px; height:0%;
  background:linear-gradient(180deg,var(--cyan-400),var(--cyan-500));
}
.rail__tot{ color:var(--ink-38); }

.cue{
  position:fixed; left:50%; bottom:clamp(14px,2.2vh,28px); transform:translateX(-50%);
  z-index:45; display:grid; justify-items:center; gap:8px;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  opacity:0;
}
.is-ready .cue{ opacity:1; }
.cue.is-hidden{ opacity:0 !important; transform:translateX(-50%) translateY(14px); }
.cue__label{
  font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-38);
}
.cue__line{ width:1px; height:38px; background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
.cue__line i{
  position:absolute; left:0; width:1px; height:40%;
  background:linear-gradient(180deg,transparent,var(--cyan-400),transparent);
  animation:cueRun 2.1s var(--ease-soft) infinite;
}
@keyframes cueRun{ 0%{ top:-45% } 100%{ top:105% } }

/* ══════════════════════════════════════════════════════════════════════════
   WORLD / PANELS
   ═════════════════════════════════════════════════════════════════════════ */
#track{ position:relative; z-index:10; }

.scroll-section{
  position:relative;
  height:var(--seg-px, 160vh);   /* real scrollable height — set from JS */
}

.panel{
  position:fixed; inset:0; z-index:1;
  display:block;
  opacity:0; visibility:hidden; pointer-events:none;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.panel.is-active,.panel.is-out,.panel.is-in{
  visibility:visible;
  will-change:transform, opacity;
}
.panel.is-active{ z-index:22; pointer-events:auto; }
.panel.is-out{ z-index:20; }
.panel.is-in{ z-index:19; }
.panel.is-off{ z-index:1; }

.panel__env{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.panel.is-active .panel__env{ opacity:1; }
.panel.is-out .panel__env,.panel.is-in .panel__env{ opacity:.55; }
.panel__env svg{ width:100%; height:100%; display:block; }
.env-lines{ fill:none; stroke:var(--cyan-400); stroke-width:1; opacity:.14; vector-effect:non-scaling-stroke; }
.env-castle{ stroke:var(--cyan-500); opacity:.9; }
.env-frame{ stroke:var(--white); opacity:.35; }
.env-ring{ stroke:var(--cyan-500); }
.env-axis{ stroke:var(--cyan-400); opacity:.5; }
.env-circuit{ stroke:var(--cyan-500); opacity:.55; }
.env-node{ fill:var(--cyan-400); stroke:none; opacity:.55; }
.env-path{ stroke:var(--cyan-500); stroke-width:1.4; opacity:.4; }

.panel__inner{
  position:absolute; inset:0;
  display:grid; align-content:center;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(80px,10.5vh,120px) var(--pad) clamp(64px,8.5vh,100px);
  will-change:transform, opacity;
}
.panel__inner > *{ max-width:var(--maxw); width:100%; min-width:0; margin-inline:auto; }

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═════════════════════════════════════════════════════════════════════════ */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:var(--type-eyebrow); font-weight:600;
  letter-spacing:var(--type-eyebrow-ls); text-transform:uppercase; color:var(--ink-52);
}
.eyebrow--center{ justify-content:center; }
.eyebrow i{ font-style:normal; color:var(--cyan-500); font-weight:600; letter-spacing:0.12em; }
.eyebrow em{ font-style:normal; color:var(--ink-38); }
.eyebrow .dot{
  width:5px; height:5px; border-radius:50%; background:var(--cyan-400);
  box-shadow:0 0 12px 2px rgba(0,240,230,.6);
}

.display{
  font-family:var(--ff);
  font-weight:800;
  font-size:var(--type-display);
  line-height:var(--type-display-lh);
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:clamp(12px, 1.6vh, 22px) 0 0;
}
.display .mask{ display:block; overflow:hidden; padding-bottom:.03em; }
.display .mask__i{ display:block; }
.display i{ font-style:normal; color:var(--cyan-400); }

/* Landing 3D section panels */
.panel .title{
  font-family:var(--ff);
  font-weight:800;
  font-size:var(--type-h2-panel);
  line-height:var(--type-h2-panel-lh);
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:clamp(14px,2vh,24px) 0 0;
}

/* General & Internal section headings */
.title{
  font-family:var(--ff);
  font-weight:800;
  font-size:var(--type-h2);
  line-height:var(--type-h2-lh);
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:balance;
  max-width:34ch;
  margin:clamp(12px,1.8vh,20px) 0 0;
}
.title--center{ text-align:center; margin-inline:auto; }
.title--sm{ font-size:var(--type-h3); line-height:var(--type-h3-lh); }

.lede,.lead{
  font-size:var(--type-lead);
  font-weight:300; line-height:var(--type-lead-lh); color:var(--ink-70);
  max-width:56ch;
}
.lede{
  font-size:var(--type-lead);
  line-height:var(--type-lead-lh);
  margin:clamp(14px, 1.8vh, 22px) auto 0;
  max-width:48ch;
  text-align:center;
}
.lead{ margin-top:clamp(16px,2.2vh,26px); }
.lead--center{ text-align:center; margin-inline:auto; }
.lead--wide{ max-width:62ch; }
.lead--tight{ max-width:38ch; }

/* masked entrance (reference-style) */
.mask{ display:block; overflow:hidden; }
.mask__i{
  display:block;
  transform:translateY(108%);
  transition:transform 1.15s var(--ease);
}
.panel.is-live .mask__i{ transform:translateY(0); }
.panel.is-live .mask:nth-of-type(2) .mask__i{ transition-delay:.09s; }

.rise{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
.panel.is-live .rise{ opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION LAYOUTS
   ═════════════════════════════════════════════════════════════════════════ */
.hero{ display:grid; justify-items:center; text-align:center; }
.hero .display{ text-align:center; }

.cta-row{
  display:flex; flex-wrap:wrap; gap:clamp(10px, 1vw, 14px);
  margin-top:clamp(18px, 2.4vh, 28px);
}
.cta-row--center{ justify-content:center; }

.hero__meta{
  display:flex; align-items:center; gap:14px; margin-top:clamp(14px, 1.8vh, 22px);
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-38);
}
.hero__meta .sep{ width:22px; height:1px; background:rgba(255,255,255,.16); }

.split{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5.5vw,96px); align-items:center;
}
.split--flip .split__lead{ order:2; }
.split--flip .split__body{ order:1; }
.split__action{ margin-top:24px; }

.stack{ display:grid; justify-items:center; text-align:center; }
.stack--center{ justify-items:center; }

/* statement / index lists */
.statements,.index{ display:grid; gap:clamp(10px,1.5vh,18px); margin-top:clamp(24px,3.4vh,40px); }
.statements li,.index li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.6vw,26px);
  align-items:start;
  padding:clamp(12px,1.6vh,18px) 0;
  border-top:1px solid var(--line);
}
.statements li:last-child,.index li:last-child{ border-bottom:1px solid var(--line); }
.statements i,.index i{
  font-style:normal; font-size:10px; font-weight:600; letter-spacing:.16em;
  color:var(--cyan-500); padding-top:.45em;
}
.statements b,.index b{
  display:block; font-size:clamp(13.5px,1.02vw,16.5px); font-weight:600;
  letter-spacing:.005em; color:var(--white); margin-bottom:4px;
}
.statements span,.index span{ display:block; }
.statements li span>span,.index li span>span{
  font-size:clamp(12px,.88vw,14px); font-weight:300; line-height:1.55; color:var(--ink-52);
}
.statements li,.index li{ transition:border-color .5s var(--ease); }
.statements li:hover,.index li:hover{ border-color:rgba(0,240,230,.35); }
.statements li:hover i,.index li:hover i{ color:var(--cyan-400); }

/* 03 · fork */
.fork{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(18px,4vw,64px);
  margin-top:clamp(30px,5vh,64px);
}
.fork__side{
  display:grid; gap:12px;
  justify-items:start;
  text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .4s var(--ease);
}
.fork__side--r{ text-align:right; justify-items:end; }
.fork__idx{
  font-size:10px; letter-spacing:.24em; color:var(--cyan-500); font-weight:600;
  transition:color .4s var(--ease), text-shadow .4s var(--ease);
}
.fork__name{
  display:block;
  font-family:var(--ff); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,5.2vw,4.4rem); line-height:1.02; letter-spacing:-.03em;
  color:rgba(255,255,255,.92);
  transition:color .55s var(--ease), text-shadow .55s var(--ease), transform .55s var(--ease);
}
html[lang="ar"] .fork__name,
html[dir="rtl"] .fork__name {
  font-family:var(--ff-ar) !important;
  font-size:clamp(1.85rem,4.6vw,3.6rem);
  line-height:1.2;
  letter-spacing:0;
  font-weight:700;
}
.fork__side:hover .fork__name{ color:var(--white); text-shadow:0 0 50px rgba(0,240,230,.45); transform:translateY(-2px); }
.fork__side:hover .fork__idx{ color:var(--cyan-400); text-shadow:0 0 14px rgba(0,240,230,.6); }
.fork__cta{
  margin-top:clamp(6px,1.2vh,14px);
  pointer-events:none;
  width:clamp(144px, 11vw, 168px);
  height:clamp(38px, 4.2vh, 44px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.fork__side:hover .fork__cta{
  border-color:var(--cyan-400);
  color:var(--cyan-400);
  background:rgba(0,240,230,.08);
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(0,240,230,0.18);
}
.fork__side:hover .fork__cta .btn__arw{
  transform:translateX(4px);
}
html[dir="rtl"] .fork__side:hover .fork__cta .btn__arw{
  transform:scaleX(-1) translateX(4px);
}
.fork__side:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:8px;
  border-radius:4px;
}
.fork__axis{
  width:1px; align-self:stretch; min-height:clamp(90px,16vh,180px);
  background:linear-gradient(180deg,transparent,rgba(0,240,230,.42),transparent);
}

/* 06 · stages */
.stages{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.6vw,26px);
  margin-top:clamp(36px,6vh,76px);
  position:relative;
}
.stages::before{
  content:''; position:absolute; left:6%; right:6%; top:5px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,240,230,.32) 12%,rgba(0,240,230,.32) 88%,transparent);
}
.stages li{ display:grid; gap:10px; align-content:start; padding-top:22px; }
.stages li:nth-child(even){ transform:translateY(clamp(14px,3vh,34px)); }
.stages i{
  width:9px; height:9px; border:1px solid var(--cyan-400); background:var(--navy-900);
  transform:rotate(45deg); position:relative; z-index:2;
}
.stages b{
  font-family:var(--ff-alt); font-weight:700; text-transform:uppercase;
  font-size:clamp(14px,1.35vw,22px); letter-spacing:-.01em; color:var(--white);
}
.stages span{
  font-size:clamp(11px,.82vw,13px); font-weight:300; line-height:1.5; color:var(--ink-52);
}

/* 07 · industries cloud */
.cloud{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:clamp(12px,1.6vw,22px) clamp(16px,2.6vw,36px);
  margin-top:clamp(32px,5.4vh,68px); max-width:1080px; margin-inline:auto;
}
.cloud li{
  position:relative;
  display:inline-flex; align-items:center; gap:clamp(10px,1vw,14px);
  font-size:clamp(12.5px,1.1vw,16.5px); font-weight:500;
  letter-spacing:.02em; color:var(--ink-70);
  padding-top:14px; border-top:1px solid var(--line);
  min-width:clamp(160px,18vw,260px);
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.cloud li::before{
  content:''; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:var(--cyan-400); transition:width .55s var(--ease);
}
html[dir="rtl"] .cloud li::before{
  left:auto; right:0;
}
.cloud li:hover{ color:var(--white); }
.cloud li:hover::before{ width:100%; }
.cloud__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(30px,2.2vw,36px); height:clamp(30px,2.2vw,36px);
  border-radius:8px;
  background:rgba(0,240,230,.06);
  border:1px solid rgba(0,240,230,.2);
  color:var(--cyan-400);
  flex-shrink:0;
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.cloud__icon svg{
  width:clamp(16px,1.2vw,19px); height:clamp(16px,1.2vw,19px);
  display:block;
}
.cloud li:hover .cloud__icon{
  background:rgba(0,240,230,.15);
  border-color:rgba(0,240,230,.5);
  color:var(--cyan-300);
  transform:translateY(-2px);
  box-shadow:0 0 16px rgba(0,240,230,.35);
}

/* 08 · finale */
.finale{ display:grid; justify-items:center; text-align:center; }
.display--finale{ font-size:clamp(2.2rem,10.6vw,9.6rem); }

.foot{
  width:100%; margin-top:clamp(40px,8vh,96px);
  padding-top:clamp(18px,2.4vh,26px); border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(14px,3vw,40px); text-align:left;
}
.foot__brand img{ height:clamp(22px,2vw,30px); width:auto; }
.foot__nav{ display:flex; gap:clamp(12px,2vw,30px); justify-content:center; }
.foot__nav a{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-52);
  transition:color .4s var(--ease);
}
.foot__nav a:hover{ color:var(--cyan-400); }
.foot__copy{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-38);
  text-align:right;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL MULTI-COLUMN FOOTER (Internal Pages & Global)
   ═════════════════════════════════════════════════════════════════════════ */
.footer{
  position:relative;
  z-index:20;
  background:linear-gradient(180deg, rgba(3,15,24,0.85) 0%, rgba(1,9,15,0.98) 100%);
  border-top:1px solid rgba(0,240,230,0.18);
  box-shadow:0 -20px 50px rgba(0,0,0,0.6);
  margin-top:auto;
  overflow:hidden;
}

.footer::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan-400), transparent);
  opacity:0.6;
}

.footer__inner{
  max-width:var(--maxw, 1320px);
  margin:0 auto;
  padding:clamp(48px, 6vw, 76px) var(--pad, 24px) 0;
  display:grid;
  grid-template-columns:minmax(280px, 360px) 1fr;
  gap:clamp(36px, 5vw, 84px);
  align-items:start;
}

.footer__brand{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer__brand .nav__brand{
  display:inline-block;
  line-height:0;
}

.footer__brand .nav__logo{
  height:clamp(26px, 2.5vw, 34px);
  width:auto;
  opacity:0.95;
  transition:opacity 0.3s ease;
}

.footer__brand .nav__logo:hover{ opacity:1; }

.footer__tagline{
  font-size:clamp(13px, 0.9vw, 14.5px);
  font-weight:300;
  line-height:1.7;
  color:var(--ink-70, rgba(225,255,253,0.72));
  max-width:42ch;
}

.footer__cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3.5vw, 48px);
}

.footer__col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer__col-title{
  font-family:var(--ff-alt, 'Syne', sans-serif);
  font-size:clamp(11px, 0.75vw, 12.5px);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cyan-400);
  margin-bottom:6px;
  position:relative;
  display:inline-block;
}

.footer__link,
.footer__item{
  font-size:clamp(13px, 0.88vw, 14px);
  font-weight:400;
  line-height:1.55;
  color:var(--ink-70, rgba(225,255,253,0.7));
  text-decoration:none;
  transition:color 0.25s ease, transform 0.25s ease;
  display:inline-flex;
  align-items:center;
}

a.footer__link:hover{
  color:var(--white);
  transform:translateX(4px);
}

html[dir="rtl"] a.footer__link:hover{
  transform:translateX(-4px);
}

.footer__item,
span.footer__link{
  color:rgba(225,255,253,0.6);
  cursor:default;
}

.footer__bottom{
  margin-top:clamp(36px, 5vw, 60px);
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(1,7,12,0.85);
}

.footer__bottom-inner{
  padding-top:22px;
  padding-bottom:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}

.footer__copy,
.footer__legal{
  font-size:12.5px;
  font-weight:300;
  color:var(--ink-50, rgba(225,255,253,0.5));
  letter-spacing:0.02em;
}

.footer__legal span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

@media (max-width: 980px){
  .footer__inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .footer__cols{
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
  }
}

@media (max-width: 600px){
  .footer__cols{
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer__bottom-inner{
    flex-direction:column;
    text-align:center;
    gap:10px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SO — TRANSITION IDENTITY
   ═════════════════════════════════════════════════════════════════════════ */
.so-stage{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  display:grid; place-items:center;
  perspective:var(--persp); perspective-origin:50% 46%;
}
.so{
  position:relative;
  width:clamp(180px,26vw,420px);
  transform-style:preserve-3d;
  opacity:0;
  will-change:transform, opacity;
}
.so__img{
  position:relative; z-index:2; width:100%; height:auto; display:block;
  filter:
    drop-shadow(0 0 18px rgba(0,240,230,.50))
    drop-shadow(0 0 48px rgba(0,207,200,.28));
}
.so__halo{
  position:absolute; left:50%; top:50%; width:250%; height:250%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(0,240,230,.22), rgba(0,207,200,.07) 46%, transparent 72%);
  opacity:.9; z-index:1;
}
.so__ring{
  position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(0,240,230,.35); border-radius:50%;
  opacity:0; z-index:1;
}
.so__beam{
  position:absolute; left:50%; top:50%; height:1px; width:38vw;
  transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(0,240,230,.55), transparent);
  opacity:0; z-index:1;
}
.so__beam--r{ background:linear-gradient(270deg, rgba(0,240,230,.55), transparent); transform-origin:100% 50%; }

/* ══════════════════════════════════════════════════════════════════════════
   DEBUG
   ═════════════════════════════════════════════════════════════════════════ */
.debug{
  position:fixed; left:16px; bottom:16px; z-index:90;
  font:11px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.06em; color:var(--cyan-400);
  background:rgba(2,19,30,.82); border:1px solid rgba(0,240,230,.3);
  padding:10px 14px; border-radius:6px;
}
.debug b{ color:var(--white); font-weight:600; }

/* ── adaptive quality tiers (set by JS when a device cannot keep up) ─────── */
body[data-q="1"] #dust,
body[data-q="0"] #dust{ display:none; }
body[data-q="0"] .grain{ display:none; }
body[data-q="0"] .atmosphere__glow{ display:none; }
body[data-q="0"] .atmosphere__grid{ opacity:.5; }

/* ══════════════════════════════════════════════════════════════════════════
   NO-JS FALLBACK
   ═════════════════════════════════════════════════════════════════════════ */
.no-js .scroll-section{ height:auto; }
.no-js .panel{
  position:relative; inset:auto; min-height:100vh;
  opacity:1 !important; visibility:visible !important; pointer-events:auto;
  transform:none !important;
}
.no-js .panel__env{ opacity:1; }
.no-js .panel .mask__i{ transform:none; }
.no-js .panel .rise{ opacity:1; transform:none; }
.no-js .so-stage,.no-js .rail,.no-js .cue,.no-js #dust{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .nav__inner{ display:flex; justify-content:space-between; align-items:center; }
}

@media (max-width:1100px){
  .split{ grid-template-columns:1fr; gap:clamp(22px,4vh,44px); }
  .split--flip .split__lead{ order:1; }
  .split--flip .split__body{ order:2; }
  .stages{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:clamp(20px,3vh,34px); }
  .stages::before{ display:none; }
  .stages li:nth-child(even){ transform:none; }
  .rail{ display:none; }
}

@media (max-width:820px){
  :root{ --persp:1100px; }
  .nav__cta{ display:none; }
  .panel__inner{ padding:clamp(75px,9vh,95px) var(--pad) clamp(45px,6vh,65px); }
  .fork{ grid-template-columns:1fr; gap:clamp(18px,3vh,28px); text-align:center; margin-top:clamp(20px,3.5vh,36px); }
  .fork__axis{ width:100%; max-width:260px; height:1px; min-height:1px; margin:0 auto; background:linear-gradient(90deg,transparent,rgba(0,240,230,.45),transparent); }
  .fork__side,
  .fork__side--r,
  html[dir="rtl"] .fork__side,
  html[dir="rtl"] .fork__side--r{
    text-align:center !important;
    justify-items:center !important;
    align-items:center !important;
  }
  .fork__idx{ margin:0 auto; text-align:center; }
  .fork__name{ text-align:center; font-size:clamp(2rem,7vw,3.4rem); line-height:1.12; }
  html[lang="ar"] .fork__name,
  html[dir="rtl"] .fork__name{
    font-size:clamp(1.85rem,6.6vw,2.85rem);
    line-height:1.25;
    letter-spacing:0;
    font-weight:700;
  }
  .fork__cta{
    margin-inline:auto !important;
  }
  .foot{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; }
  .foot__copy{ text-align:center; }
  .cloud li{ min-width:0; }
}

@media (max-width:560px){
  .display{ font-size:clamp(1.9rem,10vw,3.2rem); line-height:.96; margin-top:10px; }
  .panel .title{ font-size:clamp(1.8rem,9vw,2.8rem); line-height:.98; }
  .title{ font-size:clamp(1.5rem,7.5vw,2.0rem); line-height:1.24; }
  .stages{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .statements li,.index li{ gap:12px; }
  .cta-row{ width:100%; margin-top:16px; }
  .cta-row .btn{ flex:1 1 auto; justify-content:center; }
  .lede{ font-size:13.5px; line-height:1.55; margin-top:12px; }
  .hero__meta{ margin-top:12px; font-size:9px; gap:10px; }
}

/* short viewports */
@media (max-height:700px){
  .panel__inner{ padding-top:clamp(70px,9vh,92px); padding-bottom:clamp(48px,6vh,72px); }
  .hero__meta{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .atmosphere__dust{ display:none; }
  .grain{ display:none; }
  .cue__line i{ animation:none; }
  /* scroll still works; the 3D flip is flattened to a calm cross-fade by JS */
}

/* ══════════════════════════════════════════════════════════════════════════
   COOKIE & ANALYTICS PRIVACY CONSENT BANNER
   ═════════════════════════════════════════════════════════════════════════ */
.sc-consent-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 860px;
  margin-inline: auto;
  z-index: 9999;
  background: linear-gradient(135deg, rgba(3, 22, 34, 0.95) 0%, rgba(2, 16, 26, 0.98) 100%);
  border: 1px solid rgba(0, 240, 230, 0.28);
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.75), 0 0 24px -4px rgba(0, 240, 230, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 16px 22px;
  animation: scConsentSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scConsentSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.sc-consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sc-consent-text {
  flex: 1;
}

.sc-consent-title {
  font-family: var(--ff);
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.sc-consent-desc {
  font-family: var(--ff);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-70, rgba(220, 240, 250, 0.75));
  margin: 0;
}

.sc-consent-link {
  color: var(--cyan-400, #00F0E6);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sc-consent-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sc-consent-btn--accept {
  padding: 8px 18px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
}

.sc-consent-btn--decline {
  padding: 8px 14px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
}

@media (max-width: 680px) {
  .sc-consent-banner {
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 14px 16px;
  }
  .sc-consent-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sc-consent-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .sc-consent-btn--accept,
  .sc-consent-btn--decline {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}