/* ==========================================================================
   Volta - shared stylesheet
   Cinematic dark. A full-bleed film behind every page, white type at full
   opacity over it, a glass chrome layer, and one vivid accent used sparingly.
   Instrument Serif display over Archivo text; Amiri over IBM Plex Sans Arabic
   on the Arabic side. Logical properties throughout, so the RTL mirror runs
   from this same file.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument';src:url('../fonts/instrument-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument';src:url('../fonts/instrument-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plex-arabic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plex-arabic-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Amiri';src:url('../fonts/amiri-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --ink-950:#04060F;      /* deepest ground, never pure black */
  --ink-900:#070B1C;      /* band ground */
  --ink-800:#0B1130;      /* raised band */
  --ink-700:#131A3C;      /* surface in dark */
  --ink-600:#1B2450;

  --fg:#FFFFFF;
  --body:#E4E9F9;         /* 16.8:1 on ink-900 */
  --muted:#B4BEDE;        /* 10.6:1 on ink-900 */
  --line:rgba(180,196,255,.20);
  --line-2:rgba(180,196,255,.38);

  --volt:#3F5CFF;         /* the one accent, in the family of the brand mark */
  --volt-ink:#FFFFFF;
  --volt-text:#93A8FF;    /* 7.6:1 on ink-900 */
  --volt-lite:#C3CEFF;
  --volt-wash:rgba(63,92,255,.16);
  --logo-invert:1;

  --glass:rgba(255,255,255,.12);
  --glass-2:rgba(255,255,255,.19);
  --glass-br:rgba(255,255,255,.22);
  --glass-bl:blur(14px) saturate(1.5);

  --page:var(--ink-950);
  --surface:var(--ink-700);
  --surface-2:var(--ink-600);
  --band-end:var(--ink-950);

  --serif:'Instrument','Amiri',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Plex Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1220px;
  --gut:24px;
  --navh:96px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
/* v4: the site is one committed dark world; the paper light scheme is retired. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
[id]{scroll-margin-block-start:var(--navh)}
:focus-visible{outline:2px solid var(--volt-text);outline-offset:3px;border-radius:3px}
.on-ink :focus-visible,.filmhero :focus-visible{outline-color:#fff}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--volt);color:#fff;padding:12px 20px;z-index:99}
.skip:focus{inset-inline-start:0}
.wrap{inline-size:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.nb{white-space:nowrap}
.anchor-alias{display:block;block-size:0;overflow:hidden}

/* ---------- type scale ---------- */
.h-xl{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5.8vw,5.4rem);line-height:1.0;letter-spacing:-.03em;color:var(--fg)}
.h-lg{font-family:var(--serif);font-weight:400;font-size:clamp(2.15rem,4.5vw,4rem);line-height:1.04;letter-spacing:-.022em;color:var(--fg)}
.h-md{font-family:var(--serif);font-weight:400;font-size:clamp(1.42rem,2.2vw,1.9rem);line-height:1.15;letter-spacing:-.012em;color:var(--fg)}
.h-sm{font-family:var(--sans);font-weight:600;font-size:1.06rem;line-height:1.35;letter-spacing:-.008em;color:var(--fg)}
.h-xl em,.h-lg em{font-style:italic;color:var(--volt-text)}
.lede{font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.55;color:var(--body);max-width:56ch}
.body{font-size:1.04rem;line-height:1.7;color:var(--body);max-width:68ch}
.body p+p{margin-block-start:1em}
.small{font-size:.94rem;line-height:1.6;color:var(--muted)}
:lang(ar) .h-xl,:lang(ar) .h-lg,:lang(ar) .h-md{font-family:'Amiri',Georgia,serif;line-height:1.22;letter-spacing:0}
:lang(ar) .h-xl{font-size:clamp(2.2rem,4.8vw,4.4rem)}
:lang(ar) body,:lang(ar) .h-sm{font-family:'Plex Arabic',var(--sans)}
[lang="ar"] .lede,[lang="ar"] .body{line-height:1.85}
.ltr{direction:ltr;unicode-bidi:isolate}
.tnum{font-variant-numeric:tabular-nums}

/* mono label with an accent bar on the leading edge */
.eyebrow{display:inline-flex;align-items:center;gap:12px;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;
  padding-inline-start:12px;position:relative}
.eyebrow::before{content:"";position:absolute;inset-inline-start:0;inset-block:1px;
  inline-size:2px;background:var(--volt-lite);border-radius:2px}
:lang(ar) .eyebrow{font-family:'Plex Arabic',var(--sans);letter-spacing:.06em;font-size:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid transparent;
  padding:16px 22px 16px 26px;border-radius:999px;font:600 .98rem/1 var(--sans);
  text-decoration:none;cursor:pointer;
  transition:transform .5s var(--ease),background-color .35s var(--ease-soft),border-color .35s var(--ease-soft),box-shadow .5s var(--ease),color .35s var(--ease-soft)}
:lang(ar) .btn{font-family:'Plex Arabic',var(--sans);font-weight:700}
.btn-sm{padding:11px 16px 11px 20px;font-size:.9rem}
.btn i{flex:none;inline-size:26px;block-size:26px;border-radius:999px;display:grid;place-items:center;
  font-style:normal;font-size:.72rem;background:rgba(255,255,255,.22);
  transition:transform .5s var(--ease),background-color .35s var(--ease-soft)}
.btn-sm i{inline-size:21px;block-size:21px;font-size:.62rem}
.btn i svg{inline-size:11px;block-size:11px;fill:none;stroke:currentColor;stroke-width:1.7}
.btn-primary{background:var(--volt);color:var(--volt-ink);box-shadow:0 14px 34px -16px rgba(63,92,255,.95)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -16px rgba(63,92,255,1)}
.btn-primary:hover i{transform:translate(2px,-2px);background:rgba(255,255,255,.34)}
.btn-primary:active{transform:translateY(0) scale(.985)}
/* the loudest object on any film: a solid white pill */
.btn-white,.filmhero .btn-primary,.v-hero .btn-primary,.v-doing .btn-primary,.band .btn-primary,.sec .btn-primary,.cta-band .btn-primary{background:#fff;color:#080B18;border-color:#fff;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.7)}
.btn-white i,.filmhero .btn-primary i,.v-hero .btn-primary i,.v-doing .btn-primary i,.band .btn-primary i,.sec .btn-primary i,.cta-band .btn-primary i{background:rgba(8,11,24,.10)}
.btn-white:hover,.filmhero .btn-primary:hover,.v-hero .btn-primary:hover,.v-doing .btn-primary:hover,.band .btn-primary:hover,.sec .btn-primary:hover,.cta-band .btn-primary:hover{transform:translateY(-2px);background:#fff;color:#080B18;
  box-shadow:0 20px 46px -16px rgba(0,0,0,.75)}
.btn-white:hover i,.filmhero .btn-primary:hover i,.v-hero .btn-primary:hover i,.band .btn-primary:hover i,.sec .btn-primary:hover i{transform:translate(2px,-2px);background:rgba(8,11,24,.16)}
.btn-white:active,.filmhero .btn-primary:active,.v-hero .btn-primary:active,.band .btn-primary:active,.sec .btn-primary:active{transform:translateY(0) scale(.985)}
:lang(ar) .btn-white i svg,:lang(ar) .filmhero .btn-primary i svg,:lang(ar) .v-hero .btn-primary i svg,:lang(ar) .band .btn-primary i svg,:lang(ar) .sec .btn-primary i svg,:lang(ar) .cta-band .btn-primary i svg{transform:scaleX(-1)}
.btn-ghost{border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg);transform:translateY(-2px)}
.on-ink .btn-ghost,.filmhero .btn-ghost{border-color:var(--glass-br);color:#fff;
  background:var(--glass);backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.on-ink .btn-ghost:hover,.filmhero .btn-ghost:hover{border-color:#fff;background:var(--glass-2)}
.tlink{color:var(--volt-text);text-decoration:none;border-block-end:1px solid currentColor;padding-block-end:1px}
.tlink:hover{color:var(--fg)}

/* ---------- glass pill navigation ---------- */
.glass{background:var(--glass);backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl);
  border:1px solid var(--glass-br);border-radius:999px;
  transition:background-color .5s var(--ease-soft),border-color .5s var(--ease-soft),padding .5s var(--ease)}
.site-header{position:fixed;inset-inline:0;inset-block-start:0;z-index:60;
  padding-block-start:clamp(12px,1.7vw,22px);pointer-events:none;
  animation:fadeDown .55s var(--ease) both;animation-delay:60ms}
.site-header::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;
  block-size:calc(var(--navh) + 34px);pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(4,6,15,.82) 0%,rgba(4,6,15,.52) 52%,rgba(4,6,15,0) 100%);
  transition:opacity .5s var(--ease-soft)}
.site-header.stuck::before{opacity:1}
.hbar{display:flex;align-items:center;gap:12px;pointer-events:auto}
.brand{flex:none;line-height:0;padding:11px 19px}
.brand img{inline-size:84px;block-size:auto;filter:invert(1) brightness(2)}
.nav-links{display:flex;gap:2px;margin-inline:auto;padding:5px;flex-wrap:nowrap}
.nav-links a{padding:9px 14px;border-radius:999px;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.84);text-decoration:none;white-space:nowrap;
  transition:color .3s var(--ease-soft),background-color .3s var(--ease-soft)}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.15)}
.nav-links a[aria-current]{background:#fff;color:#080B18}
.nav-cta{flex:none}
.site-header.stuck .glass{background:rgba(5,8,20,.74);border-color:rgba(255,255,255,.15)}
.site-header.stuck .brand{padding-block:9px}
.site-header.stuck .nav-links{padding:4px}
/* ---------- mobile menu: round glass button + full-width glass panel ---------- */
.nav-toggle{display:none;flex:none;inline-size:44px;block-size:44px;padding:0;margin:0;
  align-items:center;justify-content:center;color:#fff;cursor:pointer;border-width:1px;
  transition:background-color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.nav-toggle svg{inline-size:20px;block-size:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.nav-toggle:hover{background:rgba(255,255,255,.17)}
.nav-toggle[aria-expanded="true"]{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.36)}
.mobile-nav{position:fixed;inset-inline:12px;inset-block-start:calc(var(--navh) + 6px);z-index:59;
  pointer-events:auto;
  max-block-size:calc(100svh - var(--navh) - 24px);overflow-y:auto;padding:10px;border-radius:22px;
  background:rgba(6,9,22,.9);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl);
  animation:fadeDown .3s var(--ease-soft) both}
.mobile-nav[hidden]{display:none}
.mobile-nav nav{display:flex;flex-direction:column;gap:2px}
.mobile-nav a{padding:15px 16px;border-radius:14px;font-size:1.02rem;font-weight:500;
  color:rgba(255,255,255,.88);text-decoration:none;text-align:start;
  transition:color .25s var(--ease-soft),background-color .25s var(--ease-soft)}
:lang(ar) .mobile-nav a{font-family:'Plex Arabic',var(--sans);font-weight:600}
.mobile-nav a:hover,.mobile-nav a:focus-visible{color:#fff;background:rgba(255,255,255,.13)}
.mobile-nav a[aria-current]{background:#fff;color:#080B18}
body.nav-open{overflow:hidden}
@media (max-width:1120px){.nav-links{display:none}.nav-cta{margin-inline-start:auto}.nav-toggle{display:inline-flex}}
@media (min-width:1121px){.mobile-nav{display:none !important}}

/* ---------- the film hero, on every page ---------- */
.filmhero{position:relative;isolation:isolate;overflow:clip;
  background:var(--ink-950);color:#fff;
  min-block-size:100svh;display:grid;grid-template-rows:1fr auto;
  padding-block:calc(var(--navh) + 6px) clamp(22px,2.4vw,34px)}
.filmhero-mid{min-block-size:min(90svh,900px)}
.filmhero-media{position:absolute;inset:0;z-index:-3;overflow:clip;background:var(--ink-950)}
.filmhero-media .poster,.filmhero-media .film{
  position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  transform:scale(1.04);animation:drift 40s var(--ease-soft) infinite alternate}
.filmhero-media .poster{opacity:.88;transition:opacity 1s var(--ease-soft)}
.filmhero-media .film{opacity:0;transition:opacity .9s var(--ease-soft)}
.filmhero.playing .film{opacity:.95}
.filmhero.playing .poster{opacity:0}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1.2%,-1.5%,0)}}

/* legibility comes from the scrim, not from dimming the film */
.filmhero-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,6,15,.58) 0%,rgba(4,6,15,.22) 20%,rgba(4,6,15,.10) 40%,
    rgba(4,6,15,.55) 74%,rgba(4,6,15,.88) 90%,var(--ink-950) 100%)}
.filmhero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.75;
  background:radial-gradient(520px 380px at var(--mx,26%) var(--my,62%),rgba(63,92,255,.32),transparent 70%);
  transition:opacity .6s var(--ease-soft)}

.filmhero-body{align-self:end;position:relative;z-index:2}
.filmhero-body .eyebrow{animation:fadeUp .6s var(--ease) both;animation-delay:200ms}
.filmhero-body .lede{margin-block-start:clamp(20px,2.2vw,30px);color:#fff;max-width:46ch;
  text-shadow:0 2px 16px rgba(4,6,15,.6);animation:fadeUp .62s var(--ease) both;animation-delay:820ms}
.hero-actions{margin-block-start:clamp(26px,3vw,38px);display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.hero-actions .btn{min-block-size:56px}
.filmhero-body .hero-actions{animation:fadeUp .62s var(--ease) both;animation-delay:920ms}

/* giant staggered display lines */
.hero-words{margin-block-start:clamp(18px,2.4vw,30px);
  font-family:var(--serif);font-weight:400;color:#fff;
  --avail:min(calc(100vw - (var(--gut) * 2)),calc(var(--wrap) - (var(--gut) * 2)))}
.hwl{display:block;overflow:clip;padding-block-end:.06em;
  --ind:calc(min(var(--i,0),3) * 2.4vw);margin-inline-start:var(--ind);
  font-size:max(2.2rem,min(9.2vw,8.4rem,calc((var(--avail) - var(--ind)) / (var(--len,18) * .47))));
  line-height:.92;letter-spacing:-.042em}
.hw{display:block;white-space:nowrap;text-shadow:0 3px 26px rgba(4,6,15,.5);
  animation:clipUp .78s var(--ease) both;animation-delay:calc(340ms + var(--i,0) * 140ms)}
.hero-words em{font-style:italic;color:#fff}
:lang(ar) .hero-words{font-family:'Amiri',Georgia,serif}
:lang(ar) .hwl{letter-spacing:0;line-height:1.08;padding-block-end:.1em;
  font-size:max(2rem,min(5.7vw,5.2rem,calc((var(--avail) - var(--ind)) / (var(--len,18) * .5))))}
:lang(ar) .hero-words em{font-style:normal}
/* an inner page gives the film and the figures more room than the home page,
   so its display lines stop one step down the scale */
.filmhero-mid .hwl{font-size:max(2.1rem,min(7.2vw,6.1rem,calc((var(--avail) - var(--ind)) / (var(--len,18) * .47))))}
:lang(ar) .filmhero-mid .hwl{font-size:max(1.9rem,min(5.1vw,4.5rem,calc((var(--avail) - var(--ind)) / (var(--len,18) * .5))))}
.filmhero-mid .lede{max-width:52ch;font-size:clamp(1.02rem,1.25vw,1.14rem)}

@media (max-width:760px){
  .hwl,.filmhero-mid .hwl{--ind:0px;font-size:clamp(2.5rem,12.4vw,4.2rem);line-height:.95}
  :lang(ar) .hwl,:lang(ar) .filmhero-mid .hwl{font-size:clamp(2.15rem,10.4vw,3.6rem);line-height:1.18}
  .hw{white-space:normal}
}

/* figures in the bottom corners, each under a hairline */
.filmhero-foot{position:relative;z-index:2;align-self:end;margin-block-start:clamp(30px,4.2vw,56px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.hero-socials{display:flex;gap:8px;flex:none;padding-block-end:2px}
.hero-socials a{display:grid;place-items:center;inline-size:38px;block-size:38px;border-radius:999px;
  background:var(--glass);backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl);
  border:1px solid var(--glass-br);color:#fff;text-decoration:none;
  transition:background-color .4s var(--ease-soft),transform .5s var(--ease),color .4s var(--ease-soft)}
.hero-socials a:hover{background:#fff;color:#080B18;transform:translateY(-2px)}
.hero-socials svg{inline-size:15px;block-size:15px;fill:currentColor}
.hero-socials span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.filmhero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2.4vw,34px);flex:1 1 420px;max-width:620px;margin-inline-start:auto}
.filmhero-stats li{padding-block-start:14px;position:relative;
  animation:fadeUp .6s var(--ease) both;animation-delay:calc(1000ms + var(--i,0) * 90ms)}
.filmhero-stats li::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:1px;background:linear-gradient(to right,var(--volt-lite),rgba(255,255,255,.22))}
[dir="rtl"] .filmhero-stats li::before{background:linear-gradient(to left,var(--volt-lite),rgba(255,255,255,.22))}
.stat-n{display:block;font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.5rem);
  line-height:1;color:#fff;text-shadow:0 2px 18px rgba(4,6,15,.55)}
:lang(ar) .stat-n{font-family:var(--serif)}
.stat-l{display:block;margin-block-start:6px;font-size:.82rem;line-height:1.3;color:rgba(255,255,255,.86)}
:lang(ar) .stat-l{font-size:.78rem;line-height:1.5}
@media (max-width:620px){
  .filmhero-stats{grid-template-columns:1fr 1fr;max-width:none;flex-basis:100%}
  .filmhero-stats li:last-child{display:none}
  .filmhero-foot{gap:18px}
}

/* ---------- sectors marquee ---------- */
.marq{background:var(--ink-900);color:#fff;border-block-end:1px solid rgba(255,255,255,.14);
  overflow:hidden;padding-block:15px}
.marq-track{display:flex;gap:0;inline-size:max-content;animation:slide 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq span{padding-inline:34px;font-size:.95rem;font-weight:500;color:rgba(255,255,255,.72);white-space:nowrap;
  border-inline-end:1px solid rgba(255,255,255,.16)}
.marq span.on{color:#fff}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
:lang(ar) .marq-track{animation-direction:reverse}

/* ---------- sections ---------- */
.sec{padding-block:clamp(72px,9vw,132px)}
.sec-tight{padding-block:clamp(56px,6vw,86px)}
.sec-head{max-width:64ch;margin-block-end:clamp(38px,5vw,64px)}
.sec-head .body{margin-block-start:20px}
.rule-top{border-block-start:1px solid var(--line)}

/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block-start:1px solid var(--line-2)}
.proof li{padding:32px 30px 8px 0;border-inline-end:1px solid var(--line)}
.proof li:last-child{border-inline-end:0;padding-inline-end:0}
.proof .num{display:block;font-family:var(--serif);font-size:clamp(3rem,5.4vw,4.6rem);line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.proof .h-sm{margin-block-start:14px}
.proof p{margin-block-start:8px;color:var(--muted);font-size:.91rem;max-width:26ch}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,1fr)}
  .proof li{padding:26px 22px 22px 0;border-block-end:1px solid var(--line)}
  .proof li:nth-child(2n){border-inline-end:0;padding-inline-end:0}
  .proof li:nth-last-child(-n+2){border-block-end:0}}
@media (max-width:480px){.proof{grid-template-columns:1fr}
  .proof li{border-inline-end:0;padding-inline-end:0}
  .proof li:last-child{border-block-end:0}}

/* ---------- offer / the monthly service ---------- */
.offer-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:920px){.offer-grid{grid-template-columns:1fr}}
.panel{padding:7px;border-radius:28px;background:var(--surface-2);border:1px solid var(--line);position:sticky;top:calc(var(--navh) + 12px)}
@media (max-width:920px){.panel{position:static}}
.panel-core{border-radius:21px;background:var(--surface);padding:32px 30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 50px -34px rgba(0,0,0,.72)}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price .num{font-family:var(--serif);font-size:clamp(3rem,5vw,4.2rem);line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.price .unit{font-size:1rem;font-weight:600;color:var(--muted)}
.price-note{margin-block-start:18px;color:var(--muted);font-size:.94rem;line-height:1.6}
.panel-core .btn{margin-block-start:24px;inline-size:100%;justify-content:center}
.tiers{margin-block-start:26px;border-block-start:1px solid var(--line);padding-block-start:22px;display:grid;gap:16px}
.tiers li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.tiers b{font-family:var(--serif);font-size:1.35rem;color:var(--fg);font-weight:400;font-variant-numeric:tabular-nums}
.tiers span{font-size:.91rem;color:var(--muted)}
.incl{display:grid;gap:2px;margin-block-start:8px}
.incl li{padding:20px 0;border-block-end:1px solid var(--line);color:var(--body);font-size:1rem;line-height:1.6}
.incl li:first-child{border-block-start:1px solid var(--line)}
.incl strong{color:var(--fg);font-weight:600}
.excl{margin-block-start:34px;padding:26px 28px;border-radius:20px;background:var(--volt-wash);border:1px solid var(--line)}
.excl h3{font:600 1rem/1.4 var(--sans);color:var(--fg);margin-block-end:10px}
:lang(ar) .excl h3{font-family:'Plex Arabic',var(--sans);font-weight:700}
.excl p{color:var(--muted);font-size:.96rem;line-height:1.7}

/* ---------- bento (verticals) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{position:relative;border-radius:24px;overflow:clip;background:var(--surface);border:1px solid var(--line);
  min-block-size:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  transition:transform .6s var(--ease),border-color .4s var(--ease-soft),box-shadow .6s var(--ease)}
.tile:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 26px 50px -30px rgba(0,0,0,.6)}
.tile>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:0;
  transition:transform 1.1s var(--ease),opacity .6s var(--ease-soft);opacity:.86}
.tile:hover>img{transform:scale(1.05);opacity:1}
.tile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,6,15,0) 24%,rgba(4,6,15,.58) 60%,rgba(4,6,15,.92))}
.tile.plain::after{display:none}
.tile>*{position:relative;z-index:2}
.tile.media h3{color:#fff;text-shadow:0 2px 16px rgba(4,6,15,.5)}
.tile.media p{color:rgba(255,255,255,.86)}
.tile p{margin-block-start:9px;font-size:.95rem;color:var(--muted);max-width:40ch}
.tile-wide{grid-column:span 4}
.tile-half{grid-column:span 3}
.tile-third{grid-column:span 2}
.tile.plain{background:var(--surface);min-block-size:210px}
@media (max-width:900px){.bento{grid-template-columns:1fr}
  .tile-wide,.tile-half,.tile-third{grid-column:span 1}}
.playpill{position:absolute;inset-block-start:20px;inset-inline-start:20px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--glass-br);cursor:pointer;border-radius:999px;
  padding:9px 16px 9px 11px;background:var(--glass);backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl);
  color:#fff;font:600 .82rem/1 var(--sans);transition:background-color .4s var(--ease-soft),transform .5s var(--ease)}
.playpill:hover{background:#fff;color:#080B18;transform:scale(1.03)}
.playpill:hover svg{fill:#080B18}
.playpill svg{inline-size:9px;block-size:9px;fill:#fff;transition:fill .4s var(--ease-soft)}
:lang(ar) .playpill{font-family:'Plex Arabic',var(--sans);font-weight:700}
:lang(ar) .playpill svg{transform:scaleX(-1)}
.tile video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;background:#000;
  z-index:1;opacity:0;transition:opacity .6s var(--ease-soft)}
.tile.playing>img,.tile.playing::after{opacity:0}
.tile.playing h3,.tile.playing p,.tile.playing .playpill{opacity:0;pointer-events:none}
.tile.playing video{opacity:1;z-index:3}

/* ---------- modules ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-block-end:34px}
.filters button{border:1px solid var(--line-2);background:none;color:var(--body);cursor:pointer;
  border-radius:999px;padding:10px 18px;font:500 .9rem/1 var(--sans);
  transition:color .3s var(--ease-soft),background-color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
:lang(ar) .filters button{font-family:'Plex Arabic',var(--sans)}
.filters button:hover{color:var(--fg);border-color:var(--fg)}
.filters button[aria-pressed="true"]{background:var(--fg);color:var(--page);border-color:var(--fg)}
.modlist{border-block-start:1px solid var(--line-2)}
.modlist li{border-block-end:1px solid var(--line);
  transition:opacity .45s var(--ease-soft),transform .45s var(--ease)}
.modlist li[hidden]{display:none}
.modrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 30px;align-items:center;
  padding:24px 0;position:relative;--slide:9px;transition:transform .5s var(--ease)}
[dir="rtl"] .modrow{--slide:-9px}
.modrow:hover{transform:translateX(var(--slide))}
.modrow h3,.modrow h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.24rem,2vw,1.6rem);color:var(--fg);letter-spacing:-.012em;
  display:flex;align-items:center;gap:15px;min-width:0}
:lang(ar) .modrow h3,:lang(ar) .modrow h2{font-family:'Amiri',serif}
.modrow h3 img,.modrow h2 img{flex:none;inline-size:46px;block-size:46px;border-radius:13px;
  transition:transform .6s var(--ease)}
.modrow:hover h3 img,.modrow:hover h2 img{transform:scale(1.06) rotate(-2deg)}
.modrow p{grid-column:1;font-size:.96rem;color:var(--muted);max-width:74ch;margin-block-start:7px;padding-inline-start:61px}
.modrow .tag{font:600 1rem/1 var(--sans);color:var(--volt-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.modcount{margin-block-start:26px;color:var(--muted);font-size:.91rem}
.modrow .links{grid-column:1;padding-inline-start:61px;margin-block-start:12px}
.storelink{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;color:var(--volt-text);
  text-decoration:none;border-block-end:1px solid transparent;transition:color .3s var(--ease-soft)}
.storelink:hover{color:var(--fg);border-block-end-color:currentColor}
.storelink .tech{font:500 .76rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.01em;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 7px;
  direction:ltr;unicode-bidi:isolate}
@media (max-width:560px){.modrow .links{padding-inline-start:0}}
@media (max-width:560px){.modrow h3 img,.modrow h2 img{inline-size:38px;block-size:38px}.modrow p{padding-inline-start:0}
  .modrow{grid-template-columns:1fr;gap:10px}.modrow .tag{grid-column:1}}

/* ---------- apps ---------- */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,34px)}
@media (max-width:820px){.apps{grid-template-columns:1fr}}
.app{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:start;
  padding:28px;border-radius:24px;border:1px solid var(--line);background:var(--surface);
  transition:transform .6s var(--ease),border-color .4s var(--ease-soft)}
.app:hover{transform:translateY(-4px);border-color:var(--line-2)}
.app>img{inline-size:76px;block-size:76px;border-radius:19px}
.app p{margin-block-start:10px;font-size:.97rem;color:var(--muted)}
.app p.links{margin-block-start:16px}
.badges{display:flex;gap:9px;margin-block-start:18px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:11px;
  padding:8px 13px;font:500 .78rem/1.2 var(--sans);color:var(--muted)}
.badge b{display:block;font-size:.92rem;font-weight:600;color:var(--body)}
.badge span{display:block;line-height:1.25}
.badge svg{inline-size:16px;block-size:16px;fill:currentColor;flex:none}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-block-start:16px}
.links a{font-size:.89rem;color:var(--volt-text);text-decoration:none;border-block-end:1px solid transparent}
.links a:hover{border-block-end-color:currentColor}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.steps li{padding:34px 24px 0 0;position:relative;border-block-start:1px solid var(--line)}
.steps li::before{content:"";position:absolute;inset-block-start:-5px;inset-inline-start:0;
  inline-size:9px;block-size:9px;border-radius:999px;background:var(--line-2);transition:background-color .5s var(--ease-soft),transform .5s var(--ease)}
.steps li.in::before{background:var(--volt);transform:scale(1.3)}
.steps .day{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--volt-text);margin-block-end:10px;font-weight:600}
.steps p{margin-block-start:8px;font-size:.93rem;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr}
  .steps li{padding:26px 0 26px 0}}

/* ---------- faq ---------- */
.faq{border-block-start:1px solid var(--line-2);max-width:900px}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:20px;align-items:center;
  padding:24px 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.14rem,1.8vw,1.42rem);color:var(--fg);
  transition:color .3s var(--ease-soft)}
:lang(ar) .faq summary{font-family:'Amiri',serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--volt-text)}
.faq summary span{position:relative;inline-size:16px;block-size:16px;justify-self:end}
.faq summary span::before,.faq summary span::after{content:"";position:absolute;background:currentColor;
  inset-block-start:50%;inset-inline-start:0;inline-size:16px;block-size:1.5px;margin-block-start:-.75px;
  transition:transform .5s var(--ease)}
.faq summary span::after{transform:rotate(90deg)}
.faq details[open] summary span::after{transform:rotate(0)}
.faq .ans{overflow:hidden;padding-block-end:26px;color:var(--muted);font-size:1rem;line-height:1.72;max-width:72ch}
.faq .ans ul{display:grid;gap:8px;margin-block:10px}
.faq .ans li{padding-inline-start:18px;position:relative}
.faq .ans li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:7px;block-size:1.5px;background:var(--volt-text)}
.faq .ans strong{color:var(--fg)}
.faq details[open] .ans{animation:unfold .5s var(--ease) both}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}
.rail{border-block-start:1px solid var(--line-2)}
.rail li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-block-end:1px solid var(--line);font-size:.94rem}
.rail .k{color:var(--muted)}
.rail .v{color:var(--fg);font-weight:600;text-align:end}

/* ---------- demo / delivery list ---------- */
.demolist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,70px);
  border-block-start:1px solid var(--line-2)}
.demolist li{padding:26px 0 28px;border-block-end:1px solid var(--line)}
.dhead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.demolist .stack{font-size:.8rem;letter-spacing:.01em;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.demolist p{margin-block-start:11px;font-size:.96rem;color:var(--muted);max-width:52ch}
.demolist strong{color:var(--fg)}
@media (max-width:760px){.demolist{grid-template-columns:1fr}}

/* ---------- cta band + footer ---------- */
.cta-band{background:var(--ink-900);color:#fff;position:relative;overflow:clip;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(680px 400px at 22% 0%,rgba(63,92,255,.38),transparent 68%)}
.cta-band .inner{padding-block:clamp(72px,9vw,124px);max-width:74ch}
.cta-band .h-lg{color:#fff}
.cta-band p{margin-block-start:20px;color:#DCE2F6;font-size:1.07rem;line-height:1.65;max-width:60ch}
.cta-band .hero-actions{margin-block-start:34px}
.cta-band .fine{margin-block-start:24px;font-size:.93rem;color:#B4BEDE}
.cta-band .fine a{color:#fff;font-weight:600}
.site-footer{background:var(--ink-900);color:#fff;border-block-start:1px solid rgba(255,255,255,.14);padding-block:64px 30px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:34px}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.site-footer .mark{inline-size:104px;block-size:auto;filter:invert(1) brightness(2)}
.site-footer .small{color:#B4BEDE}
.foot-col h2{font:600 .8rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#98A3C6;margin-block-end:16px}
:lang(ar) .foot-col h2{font-family:'Plex Arabic',var(--sans);font-weight:700;letter-spacing:0}
.foot-col li{margin-block-end:10px}
.foot-col a{font-size:.95rem;color:#E4E9F9;text-decoration:none;transition:color .3s}
.foot-col a:hover{color:#fff}
.foot-base{margin-block-start:52px;padding-block-start:24px;border-block-start:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.89rem;color:#98A3C6}
.foot-base a{color:#98A3C6;text-decoration:none}
.foot-base a:hover{color:#fff}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-inline-start:auto}
.socials a{display:inline-flex;align-items:center;gap:8px;color:#E4E9F9;text-decoration:none;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 14px 7px 11px;font-size:.85rem;
  transition:background-color .4s var(--ease-soft),color .4s var(--ease-soft),border-color .4s var(--ease-soft)}
.socials a:hover{color:#080B18;background:#fff;border-color:#fff}
.socials svg{inline-size:14px;block-size:14px;fill:currentColor;flex:none}
.hs-form{margin-block-start:32px;max-width:520px}

/* ---------- prose (privacy) ---------- */
.prose{max-width:72ch}
.prose h2{font-family:var(--serif);font-weight:400;font-size:1.72rem;color:var(--fg);margin-block:38px 12px;letter-spacing:-.012em}
:lang(ar) .prose h2{font-family:'Amiri',serif}
.prose p,.prose li{color:var(--body);line-height:1.75;font-size:1rem}
.prose ul{margin-block:12px;display:grid;gap:8px}
.prose li{padding-inline-start:20px;position:relative}
.prose li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:7px;block-size:1.5px;background:var(--volt-text)}
.prose a{color:var(--volt-text)}
.prose p+p{margin-block-start:1em}

/* ---------- motion ---------- */
@keyframes fadeDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,32px,0)}to{opacity:1;transform:none}}
@keyframes clipUp{from{transform:translate3d(0,110%,0)}to{transform:none}}

.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .82s var(--ease),transform .82s var(--ease);
  transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    animation-delay:0ms!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .reveal{opacity:1;transform:none}
  .filmhero-media .poster,.filmhero-media .film{animation:none;transform:none}
  .filmhero-media .film{display:none}
  .filmhero-glow{display:none}
  .marq-track{animation:none}
  .hw{transform:none}
}

/* ---------- ink bands keep their own tokens in every colour scheme ---------- */
.filmhero,.marq,.cta-band,.site-footer,.on-ink{
  --fg:#FFFFFF;
  --body:#E4E9F9;
  --muted:#B4BEDE;
  --line:rgba(255,255,255,.16);
  --line-2:rgba(255,255,255,.34);
  --volt:#3F5CFF;
  --volt-text:#A8B9FF;
  --volt-wash:rgba(63,92,255,.18);
  --surface:#131A3C;
  --surface-2:#1B2450;
  color:var(--body)}

/* ---------- small screens ---------- */
@media (max-width:620px){
  :root{--navh:80px}
  .hbar{gap:10px}
  .brand{padding:9px 15px}
  .brand img{inline-size:74px}
  .nav-cta{font-size:.8rem;padding:10px 15px;white-space:nowrap}
  .nav-cta i{display:none}
  .nav-toggle{inline-size:40px;block-size:40px}
  .mobile-nav{inset-inline:8px}
  .filmhero{padding-block:calc(var(--navh) + 20px) 28px}
  .filmhero-body .lede{font-size:1.02rem;max-width:38ch}
  .filmhero-stats li{padding-block-start:11px}
  .stat-l{font-size:.78rem}
}

/* ==========================================================================
   v4 - the home page rebuilt: a scrubbed film, a moving mesh gradient, glass
   over colour, and real geometry. Specification in _refs/DESIGN-v4.md.
   ========================================================================== */

:root{
  --m0:#04060F; --m1:#0A1030; --m2:#12277A; --m3:#3F5CFF;
  --glass:rgba(255,255,255,.10);
  --glass-2:rgba(255,255,255,.17);
  --glass-br:rgba(255,255,255,.20);
  --glass-bl:blur(16px) saturate(1.4);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
html{overflow-x:clip}
body.v4{background:var(--ink-950);overflow-x:visible}

/* ---------- the moving ground ---------- */
#mesh{position:fixed;inset:0;inline-size:100%;block-size:100%;z-index:-3;
  pointer-events:none;filter:blur(42px) saturate(1.02);opacity:.72}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- the sticky film stage behind the first three screens ---------- */
.filmzone{position:relative}
.filmstage{position:sticky;inset-block-start:0;block-size:100svh;
  z-index:-2;overflow:clip;background:var(--ink-950)}
/* the content is pulled back over the stage, so the stage unpins exactly when
   the last screen of the zone reaches the bottom of the viewport */
.filmzone-content{position:relative;z-index:1;margin-block-start:-100svh}
.filmstage .poster,.filmstage .film,.filmstage .scrub{position:absolute;inset:0;
  inline-size:100%;block-size:100%;object-fit:cover;object-position:center}
.filmstage .poster{opacity:.92;transition:opacity .5s linear}
.filmstage .film{opacity:0;transition:opacity .5s linear}
.filmstage .scrub{opacity:0;transition:opacity .5s linear}
.filmstage.playing .film{opacity:.96}
.filmstage.playing .poster{opacity:0}
.filmstage.scrubbing .scrub{opacity:.96}
.filmstage.scrubbing .film,.filmstage.scrubbing .poster{opacity:0}
.filmstage-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,6,15,.62) 0%,rgba(4,6,15,.20) 22%,rgba(4,6,15,.14) 46%,rgba(4,6,15,.52) 76%,rgba(4,6,15,.90) 100%),
    radial-gradient(120% 70% at 78% 46%,rgba(4,6,15,0) 30%,rgba(4,6,15,.55) 100%)}
.filmstage-glow{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:radial-gradient(560px 400px at var(--mx,30%) var(--my,58%),rgba(63,92,255,.30),transparent 70%)}

/* ---------- hero ---------- */
.v-hero{position:relative;z-index:1;min-block-size:100svh;display:grid;overflow-x:clip;
  padding-block:calc(var(--navh) - 6px) clamp(18px,2vw,26px);color:#fff}
.v-hero-in{display:grid;grid-template-rows:auto 1fr auto auto;inline-size:100%;row-gap:clamp(14px,2vw,24px)}
.v-hero-top{align-self:start;max-inline-size:52%}
.v-hero-top .eyebrow{animation:fadeUp .6s var(--ease) both;animation-delay:180ms}
.v-services{margin-block-start:18px;display:grid;gap:5px;
  font:500 11.5px/1.9 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62);animation:fadeUp .6s var(--ease) both;animation-delay:260ms}
:lang(ar) .v-services{font:500 13px/1.85 'Plex Arabic',var(--sans);letter-spacing:0;text-transform:none}
.v-services b{color:rgba(255,255,255,.92);font-weight:500}
.v-hero-act{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:18px clamp(24px,4vw,64px);align-items:end;position:relative;z-index:2}
.v-intro{justify-self:end;text-align:end;max-inline-size:36ch;
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.55;color:#fff;
  text-wrap:pretty;text-shadow:0 2px 18px rgba(4,6,15,.6);
  animation:fadeUp .62s var(--ease) both;animation-delay:980ms}
[dir="rtl"] .v-intro{text-align:start}
.v-words{align-self:end;max-inline-size:min(100%,60vw);position:relative;z-index:2}
.v-hero .hero-actions{margin-block-start:0}
.v-hero-act .hero-actions{animation:fadeUp .62s var(--ease) both;animation-delay:900ms}

/* the giant lines, bigger and lower-case than v3 */
.v-words .hwl{--ind:calc(min(var(--i,0),3) * 3.1vw);
  font-size:max(2.9rem,min(11.4vw,9.8rem,14.2svh,calc((var(--avail) - var(--ind)) / (var(--len,18) * .455))));
  line-height:.84;letter-spacing:-.048em}
.v-words{--avail:min(calc(60vw - var(--gut)),calc((var(--wrap) - var(--gut) * 2) * .94))}
.v-words .hw{text-shadow:0 4px 34px rgba(4,6,15,.55)}
.v-words em{font-style:italic;color:#fff}
:lang(ar) .v-words .hwl{letter-spacing:0;line-height:1.16;padding-block-end:.12em;
  font-size:max(2.2rem,min(8vw,6.4rem,11.6svh,calc((var(--avail) - var(--ind)) / (var(--len,18) * .5))))}
@media (max-width:900px){
  .v-hero-top{max-inline-size:100%}
  .v-hero-act{grid-template-columns:1fr;align-items:start}
  .v-intro{justify-self:start;text-align:start;order:-1}
  [dir="rtl"] .v-intro{text-align:start}
  .v-words{max-inline-size:100%;--avail:calc(100vw - var(--gut) * 2)}
  .v-words .hwl{--ind:0px;font-size:clamp(2.8rem,14vw,5rem);line-height:.9}
  .v-words .hw{white-space:normal}
  .v-services{display:none}
}

/* three figures along the bottom edge, each under its own hairline */
.v-foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,44px);
  align-items:end;position:relative;z-index:2}
.v-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,32px);
  justify-self:end;inline-size:min(100%,calc((var(--wrap) - var(--gut) * 2) * .5))}
.v-figs li{padding-block-start:15px;position:relative;
  animation:fadeUp .6s var(--ease) both;animation-delay:calc(1000ms + var(--i,0) * 90ms)}
.v-figs li::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;
  background:linear-gradient(to right,var(--volt-lite),rgba(255,255,255,.18))}
[dir="rtl"] .v-figs li::before{background:linear-gradient(to left,var(--volt-lite),rgba(255,255,255,.18))}
.v-figs li::after{content:"";position:absolute;inset-block-start:-7px;inset-inline-start:0;
  inline-size:1px;block-size:13px;background:var(--volt-lite);transform:rotate(24deg);transform-origin:bottom}
.v-figs .stat-n{display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.7rem);
  line-height:1;color:#fff;text-shadow:0 2px 18px rgba(4,6,15,.55)}
.v-figs .stat-l{display:block;margin-block-start:7px;font:500 .78rem/1.35 var(--mono);
  letter-spacing:.04em;color:rgba(255,255,255,.74);text-transform:uppercase}
:lang(ar) .v-figs .stat-l{font-family:'Plex Arabic',var(--sans);letter-spacing:0;text-transform:none;font-size:.8rem}
@media (max-width:760px){
  .v-foot{grid-template-columns:1fr;gap:20px}
  .v-figs{justify-self:start;inline-size:100%;gap:14px}
  .v-figs li:last-child{display:none}
  .v-figs{grid-template-columns:1fr 1fr}
}

/* ---------- the 3D object ---------- */
.v-obj{position:absolute;inset-block-start:calc(var(--navh) + 22px);inset-inline-end:0;
  inline-size:min(38vw,470px);block-size:min(44svh,430px);z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.1s var(--ease-soft) .3s}
.v-obj.on{opacity:1}
.v-obj canvas{inline-size:100%;block-size:100%;display:block}
@media (max-width:900px){
  .v-obj{inset-block-start:9%;inset-inline-end:-8vw;inline-size:74vw;block-size:34svh;opacity:0}
  .v-obj.on{opacity:.72}
}

/* ---------- "what we do": five glass rows ---------- */
.v-doing{position:relative;z-index:1;min-block-size:100svh;display:grid;align-content:center;
  padding-block:clamp(44px,6vh,88px);color:#fff}
.v-doing .eyebrow{margin-block-end:clamp(18px,2.6vw,32px)}
.grows{display:grid;gap:clamp(8px,1vw,12px)}
.grow>a{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:clamp(16px,2.4vw,34px);align-items:center;text-decoration:none;color:#fff;
  min-block-size:clamp(94px,11.4vh,126px);
  padding:clamp(13px,1.5vw,20px) clamp(18px,2.4vw,30px);border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl);
  transition:background-color .45s var(--ease-soft),border-color .45s var(--ease-soft),transform .55s var(--ease)}
.grow>a:hover{background:var(--glass-2);border-color:rgba(255,255,255,.42)}
.grow .idx{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--volt-lite);
  align-self:start;padding-block-start:.55em;font-variant-numeric:tabular-nums}
.row-t{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;
  font-size:clamp(1.45rem,2.5vw,2.3rem);line-height:1.08;color:#fff}
:lang(ar) .row-t{font-family:'Amiri',Georgia,serif;line-height:1.4}
.gpanel-b .row-t{font-size:clamp(1.35rem,2vw,1.9rem)}
.grow p{margin-block-start:6px;font-size:.96rem;line-height:1.5;color:rgba(255,255,255,.82);max-inline-size:56ch}
.growt{min-inline-size:0}
.growfilm{position:relative;flex:none;inline-size:120px;aspect-ratio:16/9;border-radius:11px;
  overflow:clip;background:#05070f;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.growfilm img,.growfilm video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  filter:saturate(1.12) contrast(1.08)}
.growfilm video{opacity:0;transition:opacity .45s var(--ease-soft)}
.growfilm.on video{opacity:1}
.growfilm.on img{opacity:0;transition:opacity .45s var(--ease-soft)}
@media (max-width:1040px){.growfilm{display:none}}
.grow .chev{flex:none;inline-size:38px;block-size:38px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid var(--glass-br);
  transition:background-color .45s var(--ease-soft),transform .55s var(--ease)}
.grow .chev svg{inline-size:12px;block-size:12px;fill:none;stroke:#fff;stroke-width:1.7}
[dir="rtl"] .grow .chev svg{transform:scaleX(-1)}
.grow>a:hover .chev{background:#fff;transform:translateX(3px)}
[dir="rtl"] .grow>a:hover .chev{transform:translateX(-3px)}
.grow>a:hover .chev svg{stroke:#080B18}
@media (max-width:700px){
  .grow>a{grid-template-columns:auto minmax(0,1fr);gap:12px 18px;min-block-size:0}
  .grow .chev{grid-column:2;justify-self:start;margin-block-start:12px;inline-size:32px;block-size:32px}
  .grow p{font-size:.94rem}
}

/* ---------- scrub room ---------- */
.scrubroom{display:none}

/* ---------- bands over the mesh ---------- */
.band{position:relative;z-index:1;color:#fff;
  padding-block:max(140px,clamp(96px,10vw,168px)) clamp(96px,10vw,158px)}
@media (max-width:760px){.band{padding-block:max(112px,14vw) clamp(70px,12vw,110px)}}
.band .eyebrow{margin-block-end:clamp(22px,3vw,38px)}
.band-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,4vw,64px);align-items:end;margin-block-end:clamp(38px,5vw,64px)}
.band-head .h-band{max-inline-size:15ch}
.band-head .lede{padding-block-end:.35em;max-inline-size:52ch}
@media (max-width:880px){.band-head{grid-template-columns:1fr;align-items:start}
  .band-head .lede{padding-block-end:0;margin-block-start:18px}}
.h-band{font-family:var(--serif);font-weight:400;color:#fff;letter-spacing:-.03em;line-height:1.0;
  font-size:clamp(2.6rem,5.4vw,5rem)}
:lang(ar) .h-band{font-family:'Amiri',Georgia,serif;line-height:1.2;letter-spacing:0;
  font-size:clamp(2.2rem,4.6vw,4.2rem)}
.band .lede{color:rgba(255,255,255,.86);max-inline-size:56ch}

/* ---------- evidence, as type rather than as four boxes ---------- */
.figs{display:grid;gap:clamp(26px,4vw,62px)}
.figrow{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,3vw,58px);align-items:end;
  border-block-start:1px solid rgba(255,255,255,.20);padding-block-start:clamp(16px,2vw,26px)}
.figrow:nth-child(even){grid-template-columns:minmax(0,1fr) auto}
.figrow:nth-child(even) .fign{order:2;text-align:end}
.figrow:nth-child(even) .figt{order:1}
.fign{display:block;font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(4.4rem,18vw,15.5rem);line-height:.82;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;text-shadow:0 6px 40px rgba(4,6,15,.4)}
.figt{padding-block-end:clamp(6px,1.4vw,20px)}
.figrow:nth-child(even) .figt{text-align:end}
[dir="rtl"] .figrow:nth-child(even) .figt{text-align:start}
.figrow:nth-child(even) .figt p{margin-inline-start:auto}
.figt h3{font:600 clamp(1.02rem,1.5vw,1.32rem)/1.3 var(--sans);color:#fff}
:lang(ar) .figt h3{font-family:'Plex Arabic',var(--sans);font-weight:700}
.figt p{margin-block-start:10px;font-size:.97rem;line-height:1.6;color:rgba(255,255,255,.80);max-inline-size:44ch}
@media (max-width:760px){
  .figrow,.figrow:nth-child(even){grid-template-columns:1fr;align-items:start;gap:10px}
  .figrow:nth-child(even) .fign{order:0;text-align:start}
  .figrow:nth-child(even) .figt{order:1}
  .fign{font-size:clamp(4rem,26vw,8rem)}
}

/* ---------- sectors: the section pins, the films slide ---------- */
.pinwrap{position:relative;z-index:1}
.pinstage{position:sticky;inset-block-start:0;block-size:100svh;overflow:clip;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  justify-items:stretch;
  padding-block:max(132px,clamp(96px,10vw,150px)) clamp(24px,3vw,40px);color:#fff}
.pinhead{display:grid;justify-items:start;inline-size:100%}
.pinhead .h-band{margin-block-start:16px;max-inline-size:18ch}
.pinhead .lede{margin-block-start:16px;max-inline-size:58ch}
.pfig{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--volt-lite);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:6px 11px}
:lang(ar) .pfig{font-family:'Plex Arabic',var(--sans);letter-spacing:0;text-transform:none}
.pinbar{margin-block-start:clamp(18px,2.4vw,30px);
  margin-inline:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));
  block-size:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:clip}
.pinbar span{display:block;block-size:100%;inline-size:12%;background:#fff;border-radius:2px;
  transform-origin:left center}
[dir="rtl"] .pinbar span{transform-origin:right center}
@media (prefers-reduced-motion:reduce),(max-width:760px){
  .pinstage{position:static;block-size:auto}
  .pinbar{display:none}
}

/* ---------- modules ---------- */
.band-mod{overflow-x:clip;padding-block:max(132px,clamp(96px,9vw,140px)) clamp(72px,8vw,120px)}
.marq2{overflow:clip;padding-block:18px;margin-block:0 clamp(38px,4.6vw,64px);
  border-block:1px solid rgba(255,255,255,.16);
  mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%)}
[dir="rtl"] .marq2{mask-image:linear-gradient(270deg,#000 0,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(270deg,#000 0,#000 78%,transparent 100%)}
.marq2 span:first-child{padding-inline-start:0}
.marq2-track{display:flex;inline-size:max-content;will-change:transform}
.marq2 span{padding-inline:26px;white-space:nowrap;
  font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.1;
  color:rgba(255,255,255,.52)}
.marq2 span:nth-child(3n){color:#fff}
:lang(ar) .marq2 span{font-family:'Amiri',Georgia,serif}
.modcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(26px,5vw,80px);margin-block-start:clamp(30px,4vw,52px)}
@media (max-width:820px){.modcols{grid-template-columns:1fr}}
.modrow2{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:6px 16px;padding-block:15px;text-decoration:none;color:#fff;
  border-block-end:1px solid rgba(255,255,255,.14);
  transition:padding-inline .5s var(--ease),border-color .4s var(--ease-soft)}
.modrow2:hover{padding-inline-start:10px;border-color:rgba(255,255,255,.42)}
.mname{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.42rem);
  letter-spacing:-.012em;line-height:1.2}
:lang(ar) .mname{font-family:'Amiri',Georgia,serif}
.mprice{grid-row:1 / 3;align-self:center;font:600 .98rem/1 var(--sans);color:var(--volt-lite);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mtech{grid-column:1;font:500 .72rem/1 var(--mono);color:rgba(255,255,255,.52);
  direction:ltr;unicode-bidi:isolate}
.band-mod .links{margin-block-start:clamp(26px,3vw,40px)}
.v-obj-cubes{inset-block-start:auto;inset-block-end:2%;inset-inline-end:-4%;
  inline-size:min(34vw,420px);block-size:min(40svh,400px);opacity:0}
.v-obj-cubes.on{opacity:.85}
@media (max-width:1100px){.v-obj-cubes{display:none}}

/* ---------- apps and Bareeq ---------- */
.panels{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(16px,2vw,26px);margin-block-start:clamp(30px,4vw,52px)}
@media (max-width:1000px){.panels{grid-template-columns:1fr}}
.gpanel{padding:clamp(24px,2.8vw,38px);border-radius:26px;
  background:var(--glass);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.gp-lead{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.86);max-inline-size:52ch}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);margin-block:clamp(24px,3vw,36px)}
.phone{position:relative;aspect-ratio:9/17;border-radius:20px;overflow:clip;
  background:#05070f;border:1px solid rgba(255,255,255,.26);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.16)}
.phone::before{content:"";position:absolute;z-index:2;inset-block-start:7px;inset-inline:50%;
  inline-size:34%;block-size:5px;border-radius:99px;background:rgba(255,255,255,.28);
  transform:translateX(-50%)}
[dir="rtl"] .phone::before{transform:translateX(50%)}
.phone video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:.35;
  transition:opacity .6s var(--ease-soft)}
.phone.on video{opacity:1}
@media (max-width:560px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.applines{display:grid;gap:0}
.applines li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-items:baseline;
  padding-block:13px;border-block-start:1px solid rgba(255,255,255,.14)}
.applines b{font:600 .95rem/1.3 var(--sans);color:#fff}
.applines span{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.78)}
@media (max-width:520px){.applines li{grid-template-columns:1fr;gap:4px}}
.gpanel-b .row-t{margin-block-start:14px}
.gpanel-b .gp-lead{margin-block-start:14px}
.bfilm{position:relative;margin-block-start:clamp(22px,2.6vw,32px);border-radius:18px;overflow:clip;
  aspect-ratio:16/10;border:1px solid rgba(255,255,255,.18);background:#05070f}
.bfilm img,.bfilm video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.bfilm video{opacity:0;transition:opacity .7s var(--ease-soft)}
.bfilm.on video{opacity:1}
.bfilm.on img{opacity:0;transition:opacity .7s var(--ease-soft)}

/* ---------- contact ---------- */
.band-contact .lede{margin-block-start:18px}
.band-contact .hero-actions{margin-block-start:clamp(28px,3.4vw,42px)}
.clines{display:flex;flex-wrap:wrap;gap:10px 34px;margin-block-start:clamp(28px,3.4vw,40px);
  font-size:1.02rem}
.clines a{color:#fff;text-decoration:none}
.band-contact .fine{margin-block-start:20px;font-size:.93rem;color:rgba(255,255,255,.72);max-inline-size:60ch}
.band-contact .socials{margin-inline-start:0;margin-block-start:26px}

/* ---------- magnetic buttons and drawn underlines ---------- */
.btn{will-change:transform}
.mag{transition:transform .45s var(--ease),background-color .35s var(--ease-soft),box-shadow .5s var(--ease)}
.mag.pull{transition:transform .12s linear}
.ul-draw{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .42s var(--ease)}
.ul-draw:hover{background-size:100% 1px}
[dir="rtl"] .ul-draw{background-position:100% 100%}

/* ---------- reduced motion, v4 ---------- */
@media (prefers-reduced-motion:reduce){
  .marq2-track{transform:none!important}
  .growfilm video,.ptile video,.phone video,.bfilm video{display:none}
  .phone,.ptile,.bfilm{opacity:1}
  .filmstage .film,.filmstage .scrub{display:none}
  .filmstage .poster{opacity:.92}
  .filmstage-glow{display:none}
  #mesh{filter:blur(46px)}
  .v-obj{display:none}
  .scrubroom{block-size:0}
  .v-doing,.v-hero{min-block-size:auto;padding-block:clamp(70px,9vw,120px)}
}

/* ==========================================================================
   v4 inner pages. The film hero stays; everything under it now sits over the
   same moving mesh, and every navy card becomes glass. No component on the
   site is a solid panel with a hairline border any more.
   ========================================================================== */

/* sections are transparent so the mesh shows, and they clear the fixed nav */
.sec{padding-block:clamp(78px,9vw,132px)}
.sec + .sec,.sec.rule-top{border-block-start:1px solid rgba(255,255,255,.13)}
[id]{scroll-margin-block-start:calc(var(--navh) + 34px)}
.sec .h-lg,.sec .h-md,.sec .h-sm,.sec h2,.sec h3{color:#fff}
.sec .body,.sec .small,.sec p{color:rgba(255,255,255,.82)}
.sec .body strong,.sec strong{color:#fff}

/* the priced panel */
.panel{padding:8px;border-radius:28px;background:rgba(255,255,255,.07);
  border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.panel-core{border-radius:21px;background:rgba(255,255,255,.06);padding:32px 30px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 50px -34px rgba(0,0,0,.72)}
.price .num,.price .unit{color:#fff}
.price .unit{color:rgba(255,255,255,.78)}
.price-note{color:rgba(255,255,255,.78)}
.tiers{border-block-start:1px solid rgba(255,255,255,.16)}
.tiers b{color:#fff}
.tiers span{color:rgba(255,255,255,.76)}

/* included / excluded */
.incl li{border-block-end:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.86)}
.incl li:first-child{border-block-start:1px solid rgba(255,255,255,.14)}
.excl{border-radius:20px;background:var(--glass);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.excl h3{color:#fff}
.excl p{color:rgba(255,255,255,.80)}

/* tiles, app cards, rails, steps, lists */
.tile,.tile.plain{background:var(--glass);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.tile.media{backdrop-filter:none;-webkit-backdrop-filter:none;background:#05070f}
.tile p{color:rgba(255,255,255,.80)}
.app{background:var(--glass);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.app p{color:rgba(255,255,255,.80)}
.badge{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.78)}
.badge b{color:#fff}
.rail{border-block-start:1px solid rgba(255,255,255,.28)}
.rail li{border-block-end:1px solid rgba(255,255,255,.14)}
.rail .k{color:rgba(255,255,255,.72)}
.rail .v{color:#fff}
.steps li{border-block-start:1px solid rgba(255,255,255,.16)}
.steps li::before{background:rgba(255,255,255,.34)}
.steps .day{color:var(--volt-lite)}
.steps p{color:rgba(255,255,255,.80)}
.demolist{border-block-start:1px solid rgba(255,255,255,.28)}
.demolist li{border-block-end:1px solid rgba(255,255,255,.14)}
.demolist .stack{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.78)}
.demolist p{color:rgba(255,255,255,.80)}
.faq{border-block-start:1px solid rgba(255,255,255,.28)}
.faq details{border-block-end:1px solid rgba(255,255,255,.14)}
.faq summary{color:#fff}
.faq .ans{color:rgba(255,255,255,.82)}
.modlist{border-block-start:1px solid rgba(255,255,255,.28)}
.modlist li{border-block-end:1px solid rgba(255,255,255,.14)}
.modrow p{color:rgba(255,255,255,.80)}
.modrow .tag{color:var(--volt-lite)}
.storelink{color:var(--volt-lite)}
.storelink .tech{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.66)}
.filters button{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.86)}
.filters button:hover{border-color:#fff;color:#fff}
.filters button[aria-pressed="true"]{background:#fff;color:#080B18;border-color:#fff}
.modcount{color:rgba(255,255,255,.72)}
.prose p,.prose li{color:rgba(255,255,255,.84)}
.prose h2{color:#fff}
.prose a,.tlink,.links a{color:var(--volt-lite)}
.rule-top{border-block-start-color:rgba(255,255,255,.16)}
.sec-head .body{color:rgba(255,255,255,.84)}

/* the closing band is a mesh band like the rest */
.cta-band{background:none;border-block-start:1px solid rgba(255,255,255,.13)}
.cta-band::before{display:none}
.cta-band .inner{padding-block:clamp(96px,10vw,150px);max-inline-size:var(--wrap);inline-size:100%}
.cta-band .h-lg{max-inline-size:18ch}
.cta-band .inner>p{max-inline-size:58ch}
.cta-band p{color:rgba(255,255,255,.84)}
.cta-band .fine{color:rgba(255,255,255,.72)}

/* the phone masks carry a poster of their own film */
.phone img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.phone.on img{opacity:0;transition:opacity .5s var(--ease-soft)}

/* ==========================================================================
   v5. One persistent scene behind the page: the mesh is the ground (-3), the
   3D stage sits over it (-2), the grain over both (-1), the content above.
   ========================================================================== */
#stage3d{position:fixed;inset:0;inline-size:100%;block-size:100%;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease-soft)}
#stage3d.on{opacity:1}

/* the sectors section: the films are on the ring, the captions ride on top */
.pinwrap{position:relative;z-index:1;block-size:340svh}
.pinstage{position:sticky;inset-block-start:0;block-size:100svh;overflow:clip;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  padding-block:max(132px,clamp(96px,10vw,150px)) clamp(24px,3vw,40px);color:#fff}
.ringcaps{display:grid;gap:14px;align-content:center}
.ringcaps.live{position:fixed;inset:0;display:block;pointer-events:none;z-index:3}
.pcap{position:relative;inline-size:min(430px,80vw);
  padding:16px 20px 18px;border-radius:16px;
  background:var(--glass);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.ringcaps.live .pcap{position:absolute;inset-block-start:0;inset-inline-start:0;
  inset-block-end:auto;inset-inline-end:auto;transform-origin:50% 100%;
  opacity:0;visibility:hidden;will-change:transform,opacity;
  transition:opacity .35s linear}
.pcap h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.16rem,1.5vw,1.44rem);
  line-height:1.14;letter-spacing:-.012em;color:#fff;margin-block-start:9px}
:lang(ar) .pcap h3{font-family:'Amiri',Georgia,serif;line-height:1.4}
.pcap p{margin-block-start:8px;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.82)}
.ringmedia{position:fixed;inset-block-start:0;inset-inline-start:0;
  inline-size:2px;block-size:2px;overflow:hidden;opacity:.001;pointer-events:none;z-index:-9}
.ringmedia img,.ringmedia video{inline-size:2px;block-size:2px}

/* the phone masks are now geometry; the DOM ones only carry the textures */
.phones{position:absolute;inline-size:2px;block-size:2px;overflow:hidden;opacity:.001;
  pointer-events:none;margin:0}
.gpanel .phones{position:absolute}
.gpanel-3d{min-block-size:clamp(320px,42vh,460px)}

@media (prefers-reduced-motion:reduce){
  #stage3d{display:none}
  .pinwrap{block-size:auto}
  .pinstage{position:static;block-size:auto}
  .ringcaps,.ringcaps.live{position:static;display:grid;gap:14px}
  .ringcaps.live .pcap{position:relative;opacity:1!important;visibility:visible!important;transform:none!important}
  .ringmedia{display:none}
  .phones{position:relative;inline-size:auto;block-size:auto;opacity:1;overflow:visible}
}

/* ==========================================================================
   v5 checkpoint B. The scene sits behind real reading, so the two bands where
   geometry and type share the screen get a ground of their own.
   ========================================================================== */

/* the apps band: geometry lives in the trailing 45%, the words keep a scrim */
#apps .band-head,#apps .panels{position:relative;z-index:1}
#apps .band-head::before{content:"";position:absolute;inset:-24px -32px -18px -32px;
  z-index:-1;border-radius:26px;pointer-events:none;
  background:radial-gradient(120% 130% at 12% 40%,rgba(4,6,15,.72) 0%,rgba(4,6,15,.55) 46%,rgba(4,6,15,0) 100%)}
/* the phones own the trailing half of this band, so its head stacks instead
   of putting the supporting line where the geometry lives */
#apps .band-head{grid-template-columns:minmax(0,1fr)}
#apps .band-head .lede{max-inline-size:46ch;padding-block-end:0;margin-block-start:18px}
#apps .band-head .h-band{max-inline-size:13ch}
@media (max-width:1000px){#apps .band-head::before{inset:-18px -20px}}

/* the sectors head keeps its own air above the ring */
.pinhead .h-band{font-size:clamp(2.2rem,4.4vw,4rem)}
/* Amiri carries more leading, so the Arabic head needs its own ceiling and a
   little more room above it or its first line meets the navigation */
:lang(ar) .pinhead .h-band{font-size:clamp(1.8rem,3.4vw,3rem)}
:lang(ar) .pinstage{padding-block-start:max(150px,clamp(112px,11vw,168px))}
:lang(ar) .pinhead .lede{max-inline-size:46ch}
.pinhead .lede{font-size:clamp(1rem,1.15vw,1.1rem);max-inline-size:52ch}
@media (max-width:760px){
  .pinstage{padding-block:max(104px,20vw) clamp(20px,4vw,32px)}
  .pinhead .h-band{font-size:clamp(1.9rem,7.4vw,2.6rem)}
  .pinhead .lede{font-size:.95rem;max-inline-size:34ch}
}

/* ---------- v6: the founder's page ---------- */
.growrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,2.4vw,34px);align-items:center;
  min-block-size:clamp(94px,11vh,126px);
  padding:clamp(15px,1.8vw,23px) clamp(18px,2.4vw,30px);border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-br);
  backdrop-filter:var(--glass-bl);-webkit-backdrop-filter:var(--glass-bl)}
.grow .pfig{align-self:center;white-space:nowrap}
.wins li{padding:clamp(20px,2.4vw,30px)}
.wins h3{margin-block-start:14px;font:600 1rem/1.35 var(--sans);color:#fff}
:lang(ar) .wins h3{font-family:'Plex Arabic',var(--sans);font-weight:700}
.wins p{margin-block-start:9px;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.78)}
.skillcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px)}
@media (max-width:760px){.skillcols{grid-template-columns:1fr}}
.skillcols li{padding-block-start:16px;border-block-start:1px solid rgba(255,255,255,.20)}
.skillcols h3{font:600 .96rem/1.3 var(--sans);color:#fff}
:lang(ar) .skillcols h3{font-family:'Plex Arabic',var(--sans);font-weight:700}
.skillcols .mono{margin-block-start:10px;font:500 .82rem/1.75 var(--mono);
  color:rgba(255,255,255,.76);direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .skillcols .mono{text-align:start}
.pinhead .h-band,.pinhead .lede,.pinhead .eyebrow{justify-self:start}