/* ═══════════════════════════════════════════════════════════════════════
   ADLTIX — DESIGN SYSTEM
   Palette sampled from the ADLTIX Max Sept 2026 creator campaign deck.
   orange #EF5E1E · neon #D5FF2A · ink #050505/#232323 · paper #F7F7F7

   Signature device: "the tracked line" — a measured hairline carrying a
   travelling marker. Used as heading underline, section seam and data rail.
   Orange = brand, commerce, action.  Neon = signal, AI, live state.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0a. PAGE-TRANSITION CURTAIN — a real, hand-built cross-page wipe.
   Works in every browser (unlike the View Transitions API below, which only
   Chrome/Edge honour), because it's just a fixed panel + a class toggle:
   leaving a page grows an orange curtain up from the bottom to cover the
   screen, then the incoming page recedes it downward from the top. ── */
/* ── AMBIENT BACKGROUND — a quiet AI "signal field" that follows the
   viewport everywhere on the site, in every plain section, not just the
   first screen. (An earlier version pinned this to only the top of the
   document, which "fixed" a clutter complaint by making it invisible
   everywhere else — overcorrected. The actual fix for clutter is a
   sensible, capped dot density, done in the JS below, not hiding the
   effect after one screen.) ── */
/* ═══ AMBIENT LIGHT FIELD ═════════════════════════════════════════════
   Five large light sources distributed across the page — behind the
   hero, behind the main content, at the centre, low on the page, plus a
   smaller accent. Deliberately not corners: the previous version kept
   them at the edges and the middle of the page read as dead white.

   Presence is raised here on purpose. Earlier passes pitched these so
   low they were invisible in practice — "subtle" still has to be seen.
   Light mode runs 12-22% so colour reads as real ambient lighting while
   the page still resolves as white.

   PERFORMANCE: softness is entirely in the gradient falloff, never
   filter:blur(), which repaints its layer every frame. Only transform
   and opacity animate. Sizes are bounded in px so a wide screen does
   not enlarge the composited area. One passive pointer listener writes
   two CSS variables on a rAF; there is no animation loop in JS.

   Durations 26s / 34s / 43s / 52s / 67s share no common factor, so the
   composite state never visibly repeats.
   ═══════════════════════════════════════════════════════════════════ */
.aurora{
  --warm:var(--orange);
  --cool:var(--neon);
  --l1:22%; --l2:16%; --l3:18%; --l4:14%; --l5:12%;
  --mx:0px; --my:0px;
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  contain:strict;isolation:isolate}
html[data-theme=dark] .aurora{--l1:26%; --l2:20%; --l3:22%; --l4:17%; --l5:15%}

.aurora u{position:absolute;display:block;border:0;border-radius:50%;
  will-change:transform,opacity;
  animation-timing-function:cubic-bezier(.4,.05,.6,.95);
  animation-iteration-count:infinite;animation-direction:alternate}

/* 1 · behind the hero, the dominant source */
.aurora u:nth-of-type(1){
  inline-size:min(72vmax,980px);block-size:min(72vmax,980px);
  inset-block-start:-18%;inset-inline-start:-10%;
  background:radial-gradient(ellipse 62% 100% at 50% 50%,
    var(--lum),
    color-mix(in srgb,var(--warm) var(--l1),transparent) 30%,
    var(--shade) 58%,
    color-mix(in srgb,var(--warm) calc(var(--l1)/2.6),transparent) 42%,
    transparent 74%);
  animation-name:flowA;animation-duration:26s}
/* 2 · upper right, cool */
.aurora u:nth-of-type(2){
  inline-size:min(58vmax,780px);block-size:min(58vmax,780px);
  inset-block-start:2%;inset-inline-end:-12%;
  background:radial-gradient(ellipse 62% 100% at 50% 50%,
    var(--lum),
    color-mix(in srgb,var(--cool) var(--l2),transparent) 30%,
    var(--shade) 58%,
    color-mix(in srgb,var(--cool) calc(var(--l2)/2.6),transparent) 42%,
    transparent 74%);
  animation-name:flowB;animation-duration:34s}
/* 3 · centre — stops the middle of the page reading as dead white, and
   this is the one that answers the pointer */
.aurora u:nth-of-type(3){
  inline-size:min(64vmax,860px);block-size:min(64vmax,860px);
  inset-block-start:30%;inset-inline-start:24%;
  background:radial-gradient(ellipse 62% 100% at 50% 50%,
    color-mix(in srgb,var(--warm) var(--l3),transparent),
    color-mix(in srgb,var(--warm) calc(var(--l3)/2.6),transparent) 42%,
    transparent 74%);
  animation-name:flowC;animation-duration:43s;
  translate:var(--mx) var(--my);
  transition:translate 1.6s cubic-bezier(.22,.61,.36,1)}
/* 4 · lower left */
.aurora u:nth-of-type(4){
  inline-size:min(68vmax,900px);block-size:min(68vmax,900px);
  inset-block-end:-16%;inset-inline-start:4%;
  background:radial-gradient(ellipse 62% 100% at 50% 50%,
    color-mix(in srgb,var(--cool) var(--l4),transparent),transparent 72%);
  animation-name:flowD;animation-duration:52s}
/* 5 · lower right accent */
.aurora u:nth-of-type(5){
  inline-size:min(44vmax,560px);block-size:min(44vmax,560px);
  inset-block-end:6%;inset-inline-end:8%;
  background:radial-gradient(ellipse 62% 100% at 50% 50%,
    color-mix(in srgb,var(--warm) var(--l5),transparent),transparent 70%);
  animation-name:flowE;animation-duration:67s}

/* each travels its own way and breathes on opacity, so the field morphs
   rather than merely sliding */
@keyframes flowA{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);opacity:.85}
  50%{transform:translate3d(14vw,8vh,0) scale(1.22) rotate(26deg);opacity:1}
  100%{transform:translate3d(6vw,18vh,0) scale(1.06) rotate(-14deg);opacity:.8}}
@keyframes flowB{
  0%{transform:translate3d(0,0,0) scale(1.1) rotate(0deg);opacity:.75}
  50%{transform:translate3d(-16vw,12vh,0) scale(.92) rotate(-32deg);opacity:1}
  100%{transform:translate3d(-6vw,24vh,0) scale(1.18) rotate(18deg);opacity:.8}}
@keyframes flowC{
  0%{transform:translate3d(0,0,0) scale(.95) rotate(0deg);opacity:.8}
  50%{transform:translate3d(-12vw,-14vh,0) scale(1.24) rotate(21deg);opacity:1}
  100%{transform:translate3d(10vw,-6vh,0) scale(1.02) rotate(-27deg);opacity:.75}}
@keyframes flowD{
  0%{transform:translate3d(0,0,0) scale(1.05) rotate(0deg);opacity:.7}
  50%{transform:translate3d(18vw,-10vh,0) scale(.9) rotate(-24deg);opacity:1}
  100%{transform:translate3d(4vw,-20vh,0) scale(1.2) rotate(31deg);opacity:.8}}
@keyframes flowE{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg) rotate(0deg);opacity:.6}
  50%{transform:translate3d(-14vw,-16vh,0) scale(1.3) rotate(29deg);opacity:.95}
  100%{transform:translate3d(-4vw,-4vh,0) scale(1.08) rotate(-19deg);opacity:.7}}

/* diffusion sheet — keeps light mode reading white top and bottom and
   stops any single source resolving as a visible disc */
.aurora i{display:block;position:absolute;inset:-6%;
  background:linear-gradient(180deg,rgba(255,255,255,.52) 0%,
    rgba(255,255,255,.06) 26%,rgba(255,255,255,0) 60%,
    rgba(255,255,255,.34) 100%)}
html[data-theme=dark] .aurora i{
  background:linear-gradient(180deg,rgba(9,10,13,.5) 0%,transparent 28%,
    transparent 62%,rgba(9,10,13,.66) 100%)}
/* (the rings are <b>; the old blanket hide is gone) */

/* grain — breaks the banding large soft gradients always show */
.aurora::after{content:"";position:absolute;inset:0;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;opacity:.04}
html[data-theme=dark] .aurora::after{opacity:.055}

/* responsive — the effect stays clearly visible on a phone; the count
   drops and the survivors are raised to compensate */
@media(max-width:900px){
  .aurora u:nth-of-type(5){display:none}
  .aurora{--l1:24%; --l2:18%; --l3:20%; --l4:16%}
  .aurora u:nth-of-type(3){translate:none}
}
@media(max-width:600px){.aurora u:nth-of-type(4){display:none}}

@media(prefers-reduced-motion:reduce){
  .aurora u,.aurora u:nth-of-type(1),.aurora u:nth-of-type(2),
  .aurora u:nth-of-type(3),.aurora u:nth-of-type(4),.aurora u:nth-of-type(5){
    animation:none!important;animation-name:none!important;
    translate:none!important;transition:none!important;will-change:auto}
}

/* every direct section needs to sit above the fixed canvas — header,
   mega menu, mobile drawer and the transition curtain already manage
   their own (much higher) z-index elsewhere, so only the plain content
   flow needs lifting here */
main,main>section,.ftr{position:relative;z-index:1}

/* ── PAGE TRANSITION — a thin loading bar sweeping in from the leading
   edge, the same pattern GitHub/Linear/Notion use, plus a soft fade+blur
   on the page content itself while the new page loads. Deliberately not
   a full-screen colour block — that read as loud rather than premium. */
.pt{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:300;
  pointer-events:none;transform-origin:left;
  background:linear-gradient(90deg,var(--orange),var(--neon));
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--orange) 60%,transparent);
  transform:scaleX(0);opacity:0}
html[dir=rtl] .pt{transform-origin:right}
.pt.cover{opacity:1;transform:scaleX(.78);
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .15s}
.pt.reveal{opacity:1;transform:scaleX(1);
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.pt.done{opacity:0;transform:scaleX(1);transition:opacity .35s ease .1s}
body.pt-leaving{transition:opacity .3s ease,filter .3s ease}
body.pt-leaving main,body.pt-leaving .ftr{opacity:.55;filter:blur(3px) saturate(.8);
  transition:opacity .3s ease,filter .3s ease}
@media(prefers-reduced-motion:reduce){.pt{display:none}body.pt-leaving main,body.pt-leaving .ftr{opacity:1;filter:none}}

/* ── 0b. CROSS-PAGE TRANSITIONS (native fallback) ────────────────────────
   Native View Transitions: a smooth cross-fade + subtle rise the moment
   you navigate to another page. Supported browsers animate it automatically;
   everywhere else it's a normal, instant navigation — no fallback needed. */
@view-transition{navigation:auto}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vt-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
::view-transition-old(root){animation:.32s cubic-bezier(.4,0,1,1) both vt-out}
::view-transition-new(root){animation:.42s cubic-bezier(.16,1,.3,1) both vt-in}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* ── 1. TOKENS ─────────────────────────────────────────────────────── */
:root{
  /* brand — restored to the exact values confirmed directly from the
     brand deck (Adltix_Max_Sept_2026...pptx): #EF5E1E appears 74 times,
     #D5FF2A 34 times, both used flat with no gradient variant defined —
     lift/deep below are this build's own derived shades for hover states
     and gradients, not separately specified in the deck */
  --orange:#EF5E1E;
  --orange-lift:#FF7A3D;
  --orange-deep:#C9430C;
  --neon:#D5FF2A;
  --neon-deep:#A8CC12;

  /* orange washes */
  --o-04:color-mix(in srgb,var(--orange) 4%,transparent);
  --o-08:color-mix(in srgb,var(--orange) 8%,transparent);
  --o-16:color-mix(in srgb,var(--orange) 16%,transparent);
  --o-32:color-mix(in srgb,var(--orange) 32%,transparent);
  --o-60:color-mix(in srgb,var(--orange) 60%,transparent);
  /* neon washes — always low opacity, neon is an accent not a surface */
  --n-06:color-mix(in srgb,var(--neon) 6%,transparent);
  --n-14:color-mix(in srgb,var(--neon) 14%,transparent);
  --n-28:color-mix(in srgb,var(--neon) 28%,transparent);
  --n-55:color-mix(in srgb,var(--neon) 55%,transparent);

  /* layout */
  --shell:min(1440px,100% - 48px);
  --shell-tight:min(1120px,100% - 48px);
  --shell-text:min(780px,100% - 44px);
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px;

  /* vertical rhythm — one ladder for the whole site */
  --sp-1:6px; --sp-2:12px; --sp-3:18px; --sp-4:26px;
  --sp-5:38px; --sp-6:54px; --sp-7:76px; --sp-8:104px;
  --sec-y:clamp(44px,3.4vw,58px);
  --sec-y-tight:clamp(32px,2.4vw,40px);

  /* motion */
  --t-xs:.14s; --t-sm:.22s; --t-md:.36s; --t-lg:.62s;
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.32,.5,1);
  --stagger:64ms;
}

html[data-theme=light]{
  color-scheme:light;
  --paper:#FFFFFF;
  --paper-2:#F7F7F7;
  --paper-3:#F0F0EE;
  --text:#0A0A0A;
  --text-2:#5C5F66;
  --text-3:#8A8D94;
  --rule:#E4E4E1;
  --rule-strong:#CFCFCB;
  --ink:#FFFFFF;
  --ink-2:#FAFAFA;
  --ink-3:#F1F1EF;
  --on-ink:#0A0A0A;
  --on-ink-2:#5C5F66;
  --rule-ink:rgba(10,10,10,.10);
  /* the hero media wall keeps a dark scrim in both themes — video needs it */
  --scrim-1:rgba(255,255,255,.995);
  --scrim-2:rgba(255,255,255,.96);
  --scrim-3:rgba(255,255,255,.60);
  --scrim-4:rgba(255,255,255,.20);
  --hero-fg:#0A0A0A;
  --hero-fg-2:#4A4D54;
  --hdr-veil-1:rgba(255,255,255,.92);
  --hdr-veil-2:rgba(255,255,255,.55);
  --plate:rgba(255,255,255,.90);
  --plate-line:rgba(10,10,10,.07);
  --plate-shadow:0 34px 90px -46px rgba(10,10,10,.42);
  --lift:0 24px 60px -34px rgba(5,5,5,.34);
  --lift-sm:0 10px 26px -18px rgba(5,5,5,.4);
  /* neon needs help on white — darken for text use only */
  /* the deck's orange exactly — the previous #C9430C was a darkened
     variant invented for contrast, and it read as a different, duller
     colour beside the real one */
  --orange-text:#EF5E1E;
  /* neon cannot carry text on white: #D5FF2A sits at ~1.4:1, which is
     unreadable. This is the darkest value that still reads as the deck's
     neon family rather than the olive it had drifted to. Anywhere the
     real #D5FF2A needs to show at full strength it is used as a fill
     with dark ink on top, never as text. */
  --neon-text:#6F8F00;
}
html[data-theme=dark]{
  color-scheme:dark;
  --paper:#050505;
  --paper-2:#0C0D0F;
  --paper-3:#131417;
  --text:#F7F7F7;
  --text-2:#9599A1;
  --text-3:#6E727A;
  --rule:rgba(255,255,255,.11);
  --rule-strong:rgba(255,255,255,.22);
  --ink:#0C0D0F;
  --ink-2:#131417;
  --ink-3:#232323;
  --on-ink:#F7F7F7;
  --on-ink-2:#93969D;
  --rule-ink:rgba(255,255,255,.11);
  --scrim-1:rgba(6,7,9,.985);
  --scrim-2:rgba(6,7,9,.95);
  --scrim-3:rgba(8,9,12,.72);
  --scrim-4:rgba(8,9,12,.28);
  --hero-fg:#FFFFFF;
  --hero-fg-2:rgba(255,255,255,.82);
  --hdr-veil-1:rgba(5,5,5,.78);
  --hdr-veil-2:rgba(5,5,5,.24);
  --plate:rgba(7,8,10,.80);
  --plate-line:rgba(255,255,255,.09);
  --plate-shadow:0 34px 90px -46px rgba(0,0,0,.8);
  --lift:0 28px 64px -34px rgba(0,0,0,.8);
  --lift-sm:0 12px 28px -20px rgba(0,0,0,.9);
  --neon-text:#D5FF2A;
  --orange-text:#FF7A3D;
}

/* ── 2. RESET + BASE ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{background:var(--paper)}
body{
  margin:0;background:transparent;color:var(--text);
  font-family:Inter,"Inter Tight",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.62;letter-spacing:-.005em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--t-lg) var(--ease),color var(--t-lg) var(--ease);
}
body.is-locked{overflow:hidden}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:4px}
html[data-theme=dark] :focus-visible{outline-color:var(--neon)}
::selection{background:var(--orange);color:#fff}

.shell{width:var(--shell);margin-inline:auto}
.shell-tight{width:var(--shell-tight);margin-inline:auto}
.shell-text{width:var(--shell-text);margin-inline:auto}
.sec{padding-block:var(--sec-y);position:relative}
.sec-tight{padding-block:var(--sec-y-tight);position:relative}
.skip{position:absolute;inset-inline-start:-9999px;z-index:999;padding:12px 20px;background:var(--orange);color:#fff;border-radius:0 0 var(--r-sm) 0}
.skip:focus{inset-inline-start:0;inset-block-start:0}

/* surfaces */
.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink-2{background:var(--ink-2);color:var(--on-ink)}
/* light theme has no background shift between "ink" and regular white
   sections any more (both are plain white), so each such section gets a
   hairline seam to stay legible as its own block */
html[data-theme=light] .on-ink,html[data-theme=light] .on-ink-2,
html[data-theme=light] .cta-band{border-block-start:1px solid var(--rule)}
.on-paper-2{background:color-mix(in srgb,var(--paper-2) 82%,transparent)}
/* plain sections sit on the moving field rather than hiding it; the
   frost keeps text contrast without going opaque */
.sec:not([class*=on-ink]):not(.cw){backdrop-filter:none}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4,
.on-ink-2 h1,.on-ink-2 h2,.on-ink-2 h3,.on-ink-2 h4{color:var(--on-ink)}
.on-ink .lede,.on-ink .body,.on-ink-2 .lede,.on-ink-2 .body{color:var(--on-ink-2)}

/* ── 3. TYPE SCALE ─────────────────────────────────────────────────────
   One ladder, used everywhere. Section headings are deliberately large:
   the brief called the old ones weak.
   ─────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:"Inter Tight",Inter,system-ui,sans-serif;
  margin:0;font-weight:640;line-height:1.02;letter-spacing:-.036em;
  text-wrap:balance;
}
.t-display{font-size:clamp(3.3rem,7.6vw,6.6rem);font-weight:700;line-height:.96;letter-spacing:-.05em}
.t-hero   {font-size:clamp(2.75rem,6vw,4.9rem);font-weight:700;line-height:.99;letter-spacing:-.046em}
.t-sec    {font-size:clamp(2.3rem,4.5vw,3.85rem);font-weight:660;line-height:1.03;letter-spacing:-.04em}
.t-sub    {font-size:clamp(1.7rem,2.85vw,2.5rem);font-weight:640;line-height:1.1;letter-spacing:-.032em}
.t-card   {font-size:clamp(1.24rem,1.7vw,1.5rem);font-weight:620;line-height:1.18;letter-spacing:-.024em}
.t-mini   {font-size:1.08rem;font-weight:620;line-height:1.28;letter-spacing:-.016em}

.lede{font-size:clamp(1.1rem,1.5vw,1.36rem);line-height:1.6;color:var(--text-2);max-width:62ch;margin:0}
.body{font-size:1.06rem;line-height:1.7;color:var(--text-2);max-width:70ch;margin:0}
.micro{font-size:.86rem;line-height:1.5;color:var(--text-3);margin:0}

/* eyebrow — a measured tick, not an all-caps label */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.83rem;font-weight:580;letter-spacing:-.008em;
  color:var(--orange-text);margin:0 0 var(--sp-3);
}
.eyebrow::before{
  content:"";inline-size:26px;block-size:2px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--orange),var(--o-16));
}
html[dir=rtl] .eyebrow::before{background:linear-gradient(-90deg,var(--orange),var(--o-16))}
.eyebrow--neon{color:var(--neon-text)}
.eyebrow--neon::before{background:linear-gradient(90deg,var(--neon-deep),var(--n-14))}
html[data-theme=dark] .eyebrow--neon::before{background:linear-gradient(90deg,var(--neon),var(--n-14))}
html[data-theme=dark] .on-ink .eyebrow--neon,html[data-theme=dark] .on-ink-2 .eyebrow--neon{color:var(--neon)}

/* section header block — the one pattern every section uses */
.sec-head{max-width:70ch;margin-block-end:var(--sp-5)}
.sec-head .lede{margin-block-start:var(--sp-3)}
.sec-head--center{margin-inline:auto;text-align:center;max-width:74ch}
.sec-head--center .eyebrow{margin-inline:auto}
.sec-head--center .lede{margin-inline:auto}
.sec-head--split{
  max-width:none;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--sp-5) var(--sp-6);align-items:start;
}
.sec-head--split .lede{margin:0;padding-block-start:10px}
.sec-head--split>.btn-row{padding-block-start:10px}
@media (max-width:900px){.sec-head--split{grid-template-columns:1fr;align-items:start}}

/* the tracked line — signature underline for major headings */
.tracked{position:relative;display:block;block-size:2px;inline-size:min(300px,58%);
  margin-block-start:var(--sp-4);border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,var(--rule-strong),transparent)}
html[dir=rtl] .tracked{background:linear-gradient(-90deg,var(--rule-strong),transparent)}
.tracked::after{
  content:"";position:absolute;inset-block:0;inline-size:34%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  transform:translateX(-120%);
}
.is-in .tracked::after{animation:track 2.6s var(--ease) .25s infinite}
@keyframes track{0%{transform:translateX(-120%)}55%,100%{transform:translateX(340%)}}
html[dir=rtl] .is-in .tracked::after{animation-name:track-rtl}
@keyframes track-rtl{0%{transform:translateX(120%)}55%,100%{transform:translateX(-340%)}}
.tracked--neon::after{background:linear-gradient(90deg,transparent,var(--neon),transparent)}

/* ── 4. BUTTONS ────────────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent;--btn-fg:var(--text);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:100px;
  font-size:.96rem;font-weight:560;letter-spacing:-.012em;line-height:1;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t-sm) var(--spring),box-shadow var(--t-md) var(--ease),
             background-color var(--t-sm) var(--ease),color var(--t-sm) var(--ease),
             border-color var(--t-sm) var(--ease);
}
.btn:active{transform:scale(.975)}
.btn svg{flex:0 0 auto;transition:transform var(--t-md) var(--ease-out)}
html[dir=rtl] .btn svg{transform:scaleX(-1)}
.btn:hover svg{transform:translateX(4px)}
html[dir=rtl] .btn:hover svg{transform:scaleX(-1) translateX(4px)}

.btn-primary{
  --btn-fg:#fff;font-weight:620;letter-spacing:-.014em;
  background:var(--orange);
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,
             0 -1px 0 rgba(0,0,0,.14) inset,
             0 10px 26px -12px color-mix(in srgb,var(--orange) 82%,transparent),
             0 2px 6px -2px color-mix(in srgb,var(--orange-deep) 46%,transparent);
}
/* a slow highlight sweeps once on hover — reads as a physical surface */
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(168deg,#FF8A50 0%,var(--orange-lift) 60%,var(--orange) 100%);
  opacity:0;transition:opacity var(--t-md) var(--ease)}
.btn-primary:hover::before{opacity:1}
.btn-primary::after{content:"";position:absolute;inset-block:0;inset-inline-start:-60%;inline-size:45%;
  z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-30%);transition:transform .75s var(--ease-out)}
.btn-primary:hover::after{transform:translateX(420%)}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,
             0 16px 38px -14px color-mix(in srgb,var(--orange) 78%,transparent),
             0 3px 8px -2px color-mix(in srgb,var(--orange-deep) 40%,transparent)}
.btn-primary:active{transform:translateY(0) scale(.98)}

.btn-ink{--btn-bg:var(--text);--btn-fg:var(--paper);font-weight:600}
.btn-ink:hover{box-shadow:var(--lift-sm);transform:translateY(-2px)}
.on-ink .btn-ink,.on-ink-2 .btn-ink,.cta-band .btn-ink{--btn-bg:var(--text);--btn-fg:var(--paper)}

.btn-line{--btn-bd:var(--rule-strong)}
/* the header is now always its own opaque floating capsule, so its "Log in"
   button just uses the normal theme colours — no more hero-fg contrast game */
.btn-line:hover{--btn-bd:var(--orange);--btn-fg:var(--orange-text)}
.on-ink .btn-line,.on-ink-2 .btn-line,.cta-band .btn-line{--btn-bd:var(--rule-strong);--btn-fg:var(--on-ink)}
html[data-theme=dark] .on-ink .btn-line,html[data-theme=dark] .on-ink-2 .btn-line,html[data-theme=dark] .cta-band .btn-line{--btn-bd:rgba(255,255,255,.28)}
.phero .btn-line,.cw .btn-line{--btn-fg:var(--hero-fg);
  --btn-bd:color-mix(in srgb,var(--hero-fg) 34%,transparent);
  --btn-bg:color-mix(in srgb,var(--paper) 72%,transparent);
  backdrop-filter:blur(16px) saturate(150%);font-weight:600;
  box-shadow:0 6px 20px -12px rgba(0,0,0,.5)}
.on-ink .btn-line:hover,.on-ink-2 .btn-line:hover,.cta-band .btn-line:hover{--btn-bd:var(--orange);--btn-fg:var(--orange-text)}
html[data-theme=dark] .on-ink .btn-line:hover,html[data-theme=dark] .cta-band .btn-line:hover{--btn-bd:var(--neon);--btn-fg:var(--neon)}
.phero .btn-line:hover,.cw .btn-line:hover{--btn-bd:var(--orange);--btn-fg:var(--orange-text)}
/* override for the homepage hero specifically: solid white, no blend,
   no theme dependency — always crisp, exactly like the original */
.cw .btn-line{--btn-bg:#fff;--btn-fg:#0A0A0A;--btn-bd:transparent;
  backdrop-filter:none;box-shadow:0 8px 22px -12px rgba(0,0,0,.4)}
.cw .btn-line:hover{--btn-bg:#fff;--btn-fg:var(--orange-deep);--btn-bd:transparent;
  transform:translateY(-2px)}

/* neon button: reserved for AI actions only */
.btn-neon{--btn-fg:#0A0A0A;font-weight:640;letter-spacing:-.014em;
  background:var(--neon);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
             0 10px 26px -12px color-mix(in srgb,var(--neon) 74%,transparent)}
.btn-neon:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.44) inset,
             0 16px 38px -14px color-mix(in srgb,var(--neon) 68%,transparent)}
.btn-neon:active{transform:translateY(0) scale(.98)}

/* outlined neon — the creator-side counterpart to the normal orange-hover
   .btn-line, used specifically where a control represents "creators" as
   a category (vs. "brands", which keeps the default orange treatment) */
.btn-line-neon{--btn-bd:var(--neon-deep);--btn-fg:var(--neon-text)}
html[data-theme=dark] .btn-line-neon{--btn-bd:var(--neon);--btn-fg:var(--neon)}
.btn-line-neon:hover{--btn-bd:var(--neon-deep);--btn-fg:var(--neon-text);background:var(--n-06)}
html[data-theme=dark] .btn-line-neon:hover{--btn-bd:var(--neon);--btn-fg:var(--neon);background:var(--n-14)}
/* this button always sits on a fixed white pill regardless of site theme
   (see .cw .btn-line below), so its text needs a colour that reads well
   on white specifically — not the theme-adaptive --neon-text, which
   flips to bright neon in dark mode and would be nearly invisible on a
   white background there */
/* default state matches the orange phase; a fixed shade (not the
   theme-adaptive --orange-text) since this button's own background is
   always white regardless of site theme, same reasoning as the neon fix
   below */
.cw .btn-line-neon{--btn-bg:#fff;--btn-fg:#EF5E1E;--btn-bd:transparent;
  backdrop-filter:none;box-shadow:0 8px 22px -12px rgba(0,0,0,.4);
  transition:box-shadow .5s ease,transform var(--t-md) var(--ease),color .5s ease}
.cw .btn-line-neon:hover{--btn-bg:#fff;--btn-fg:#A8380A;--btn-bd:transparent;
  transform:translateY(-2px)}
/* synced with the headline: while the neon phrase is showing, the creator
   CTA switches to its own green and picks up a soft matching glow — the
   "button below gets coloured too" so the two elements read as one
   coordinated moment. Left exactly as it was for this state, per request. */
#heroCta2.lit{--btn-fg:#5E7800!important;
  box-shadow:0 8px 26px -10px rgba(213,255,42,.65),0 0 0 2px rgba(213,255,42,.35)}
#heroCta2.lit:hover{--btn-fg:#4A6000!important}

.btn-ghost{--btn-fg:var(--text-2);padding-inline:6px}
.btn-ghost:hover{--btn-fg:var(--orange-text)}

.btn-lg{padding:16px 30px;font-size:1.02rem}
.btn-sm{padding:9px 17px;font-size:.87rem}
.hdr .btn-primary{padding-inline:19px}
.btn[aria-busy=true]{pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.btn-note{font-size:.87rem;color:var(--text-3);margin-block-start:var(--sp-3)}

/* text link with a rule that draws on hover */
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:580;color:var(--orange-text);
  position:relative;padding-block-end:3px}
.tlink::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;
  block-size:1.5px;inline-size:100%;background:currentColor;transform:scaleX(0);
  transform-origin:inline-start;transition:transform var(--t-md) var(--ease-out)}
.tlink:hover::after{transform:scaleX(1)}
.on-ink .tlink,.on-ink-2 .tlink,.cta-band .tlink{color:var(--orange)}
html[data-theme=dark] .on-ink .tlink,html[data-theme=dark] .on-ink-2 .tlink,html[data-theme=dark] .cta-band .tlink{color:var(--neon)}

/* ── 5. SURFACE PRIMITIVES ─────────────────────────────────────────── */
.panel{
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);
  padding:clamp(22px,2.4vw,34px);position:relative;
  transition:border-color var(--t-md) var(--ease),transform var(--t-md) var(--ease-out),box-shadow var(--t-md) var(--ease)
}
.on-ink .panel,.on-ink-2 .panel{border-color:var(--rule-ink);background:var(--paper)}
html[data-theme=dark] .on-ink .panel,html[data-theme=dark] .on-ink-2 .panel{background:rgba(255,255,255,.028)}
.panel--hover:hover{border-color:var(--rule-strong);transform:translateY(-4px) scale(1.008);
  box-shadow:var(--lift-sm),0 0 0 1px var(--rule-strong)}
.on-ink .panel--hover:hover,.on-ink-2 .panel--hover:hover{border-color:var(--n-28);box-shadow:none}

.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:100px;
  font-size:.8rem;font-weight:540;border:1px solid var(--rule);color:var(--text-2);background:var(--paper)}
.on-ink .chip,.on-ink-2 .chip,.cta-band .chip{border-color:var(--rule-ink);background:transparent;color:var(--on-ink-2)}
.phero .chip,.cw .chip{border-color:var(--rule-ink);background:transparent;color:var(--hero-fg-2)}
/* feature chips carry the side of the marketplace they belong to:
   anything a brand gets is orange, anything a creator gets is neon.
   Same rule the buttons already follow, applied to the capability
   lists so the two audiences stay visually separable everywhere. */
/* Filled rather than tinted, so the brand palette is actually on screen
   rather than implied. This matters most for the creator side: neon as
   *text* has to be darkened to ~#5E7800 to stay legible on white, which
   reads as olive and not as the deck's colour at all. As a fill with
   near-black text it can be the exact deck value (#D5FF2A) and still
   pass contrast comfortably. Same treatment on the brand side with
   #EF5E1E, so the two sides stay symmetrical. */
.chip--brand{border-color:transparent;background:var(--orange);color:#fff;font-weight:620}
html[data-theme=dark] .chip--brand{background:var(--orange);color:#fff;border-color:transparent}
.on-ink .chip--brand,.on-ink-2 .chip--brand{background:var(--orange);border-color:transparent;color:#fff}
.chip--creator{border-color:transparent;background:var(--neon);color:#0A0A0A;font-weight:620}
html[data-theme=dark] .chip--creator{background:var(--neon);color:#0A0A0A;border-color:transparent}
.on-ink .chip--creator,.on-ink-2 .chip--creator{background:var(--neon);border-color:transparent;color:#0A0A0A}
.chip--live{color:var(--neon-text);border-color:var(--n-28);background:var(--n-06)}
html[data-theme=dark] .on-ink .chip--live,html[data-theme=dark] .on-ink-2 .chip--live{color:var(--neon)}

.dot{inline-size:7px;block-size:7px;border-radius:50%;background:var(--neon);flex:0 0 auto;position:relative}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--n-55);
  animation:dot-pulse 2.4s var(--ease) infinite}
@keyframes dot-pulse{0%{transform:scale(.6);opacity:1}70%,100%{transform:scale(1.5);opacity:0}}

/* stat — big number, small label */
.stat b{display:block;font-family:"Inter Tight",Inter,sans-serif;font-weight:680;
  font-size:clamp(1.9rem,3.1vw,2.9rem);letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums}
.stat>span{display:block;margin-block-start:9px;font-size:.87rem;color:var(--text-2);line-height:1.4}
.stat b span{font:inherit;color:inherit;letter-spacing:inherit}
/* a counter is part of its <b>, never a label — beats any sibling span rule */
b>[data-count],b>span[data-count]{font:inherit;color:inherit;letter-spacing:inherit;display:inline;margin:0}
.on-ink .stat>span,.on-ink-2 .stat>span,.phero .stat>span,.hhero .stat>span{color:var(--on-ink-2)}
.stat--neon b{color:var(--neon-text)}
html[data-theme=dark] .on-ink .stat--neon b{color:var(--neon)}

/* grids */
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── 6. MOTION SYSTEM ──────────────────────────────────────────────────
   Nothing animates on load except the hero's own single sequence.
   Everything else waits for its section to enter the viewport.
   ─────────────────────────────────────────────────────────────────── */
/* PERF NOTE — two things were removed here, both measured:
   1. filter:blur() on the reveal. Blurring an element forces its text to
      be rasterised into a texture and re-blurred every frame. On large
      display type — Arabic worst of all, the glyphs are taller — that is
      what tore the headlines into horizontal bands in Chrome. It resolved
      to blur(0) within 780ms, so it was invisible anyway.
   2. will-change on the whole set. It was never removed after the reveal
      finished, so every [data-rv] element on the page held a permanent
      GPU layer — 61 of them — with a blur pipeline attached. will-change
      is now applied only while the element is actually armed to move
      (.rv-armed, set by the observer) and dropped the moment it lands. */
[data-rv]{
  opacity:0;
  transform:translate3d(0,var(--rv-y,22px),0) scale(var(--rv-s,1));
  transition:opacity .78s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:var(--rv-d,0ms);
}
[data-rv].rv-armed{will-change:opacity,transform}
[data-rv].is-in{opacity:1;transform:none}
[data-rv=fade]{--rv-y:0px}
[data-rv=rise]{--rv-y:46px;--rv-s:.975}
[data-rv=lift]{--rv-y:44px;--rv-s:.985}
[data-rv=side]{--rv-y:0px;transform:translate3d(var(--rv-x,34px),0,0)}
html[dir=rtl] [data-rv=side]{transform:translate3d(calc(var(--rv-x,34px) * -1),0,0)}
@media (max-width:900px){[data-rv=side]{--rv-x:0px;transform:translate3d(0,26px,0)}
  html[dir=rtl] [data-rv=side]{transform:translate3d(0,26px,0)}}
[data-rv=side].is-in{transform:none}
/* the network-strip headline gets extra emphasis: it's the section that
   actually shows the platform's real creators, so its entrance carries a
   touch more weight than a standard section header */
.net-head[data-rv]{--rv-y:56px;--rv-s:.96}
@media(prefers-reduced-motion:reduce){
  [data-rv]{filter:none!important;transition:none!important;opacity:1;transform:none}}

/* stagger container: children reveal in sequence */
[data-rv-group]>*{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .68s var(--ease-out),transform .76s var(--ease-out)}
[data-rv-group].is-in>*{opacity:1;transform:none}
[data-rv-group].is-in>*:nth-child(1){transition-delay:0ms}
[data-rv-group].is-in>*:nth-child(2){transition-delay:calc(var(--stagger) * 1)}
[data-rv-group].is-in>*:nth-child(3){transition-delay:calc(var(--stagger) * 2)}
[data-rv-group].is-in>*:nth-child(4){transition-delay:calc(var(--stagger) * 3)}
[data-rv-group].is-in>*:nth-child(5){transition-delay:calc(var(--stagger) * 4)}
[data-rv-group].is-in>*:nth-child(6){transition-delay:calc(var(--stagger) * 5)}
[data-rv-group].is-in>*:nth-child(7){transition-delay:calc(var(--stagger) * 6)}
[data-rv-group].is-in>*:nth-child(8){transition-delay:calc(var(--stagger) * 7)}
[data-rv-group].is-in>*:nth-child(n+9){transition-delay:calc(var(--stagger) * 8)}

/* word-level reveal for hero + major headings */
.wsplit{display:inline-block;overflow:hidden;vertical-align:top;padding-block-end:.08em;margin-block-end:-.08em}
.wsplit>i{display:inline-block;font-style:inherit;transform:translateY(102%);
  transition:transform .86s var(--ease-out);transition-delay:var(--wd,0ms)}
.is-in .wsplit>i{transform:none}

/* scroll-linked: element scales/brightens with its own scroll progress */
[data-scrub]{--p:0}

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv-group]>*{opacity:1!important;transform:none!important;transition:none!important}
  .wsplit>i{transform:none!important;transition:none!important}
  .is-in .tracked::after,.dot::after{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ── 7. HEADER / NAV — a floating capsule, always solid, sitting a little
   below the top edge with its own shadow, exactly like the reference. It
   no longer needs the old "transparent over the hero, solid once stuck"
   logic — since it's always opaque, --hero-fg contrast games for the
   header specifically are gone (that variable still drives .phero/.cw's
   own buttons and chips, which is unrelated and untouched). ── */
.hdr{position:fixed;inset-block-start:clamp(10px,1.6vw,18px);inset-inline:0;z-index:120;
  display:flex;justify-content:center;pointer-events:none;padding-inline:14px}
.hdr-in{pointer-events:auto;position:relative;z-index:2;width:min(var(--shell),100%);
  display:flex;align-items:center;gap:16px;padding-inline:14px;block-size:76px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--rule);border-radius:100px;
  box-shadow:0 1px 2px rgba(10,10,10,.04),0 16px 34px -18px rgba(10,10,10,.22);
  transition:box-shadow var(--t-md) var(--ease),block-size var(--t-md) var(--ease)}
html[data-theme=dark] .hdr-in{box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 16px 34px -18px rgba(0,0,0,.6)}
.hdr.is-stuck .hdr-in{box-shadow:0 1px 2px rgba(10,10,10,.05),0 20px 40px -16px rgba(10,10,10,.28)}
html[data-theme=dark] .hdr.is-stuck .hdr-in{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -16px rgba(0,0,0,.7)}
.hdr-logo{flex:0 0 auto;line-height:0;padding-inline-start:12px}
.hdr-logo img{block-size:32px;inline-size:auto}
.hdr-logo .l-dark{display:none}.hdr-logo .l-light{display:block}
html[data-theme=dark] .hdr-logo .l-dark{display:block}html[data-theme=dark] .hdr-logo .l-light{display:none}

/* the homepage hero is a fixed-dark video wall regardless of site theme;
   the header itself is always opaque now, so this only still matters for
   the hero's own buttons/chips (.phero, .cw), which read it separately */
body.is-home{--hero-fg:#fff;--hero-fg-2:rgba(255,255,255,.82)}

.hdr-nav{display:flex;gap:5px;margin-inline-start:8px}
.hdr-nav a{position:relative;padding:12px 20px;border-radius:100px;font-size:1rem;font-weight:560;
  color:var(--text-2);background:var(--paper-2);
  transition:color var(--t-sm),background-color var(--t-sm),box-shadow var(--t-sm)}
.hdr-nav a:hover{color:var(--orange-text);background:var(--paper-3)}
/* the active page now fills the whole pill solid — the old version was
   just a slightly-different grey plus a barely-visible 16px underline,
   which read as "almost nothing changed"; this is unmistakable */
.hdr-nav a[aria-current=page]{color:#fff;background:var(--orange);font-weight:640;
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--orange) 70%,transparent)}
.hdr-nav a[aria-current=page]:hover{color:#fff;background:var(--orange)}

.hdr-right{margin-inline-start:auto;display:flex;align-items:center;gap:10px;padding-inline-end:6px}
.lang{display:flex;border:1px solid var(--rule);border-radius:100px;padding:3px;gap:2px}
.lang a{padding:7px 14px;border-radius:100px;font-size:.86rem;font-weight:560;
  color:var(--text-3);transition:var(--t-sm) var(--ease)}
.lang a[aria-current]{background:var(--orange);color:#fff}
.icon-btn{inline-size:44px;block-size:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);color:var(--text-2);transition:var(--t-sm) var(--ease)}
.icon-btn:hover{border-color:var(--orange);color:var(--orange)}
.burger{display:none;inline-size:46px;block-size:46px;border-radius:50%;place-items:center;
  border:1px solid var(--rule);color:var(--text)}

/* mega menu */
.mega{position:absolute;inset-inline:0;inset-block-start:100%;z-index:130;
  background:var(--paper);border-block:1px solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-sm) var(--ease),transform var(--t-sm) var(--ease),visibility var(--t-sm)}
/* invisible bridge across the gap between the header and the panel, so
   travelling from a nav item down into the panel never leaves both */
.mega::before{content:"";position:absolute;inset-inline:0;
  inset-block-start:-22px;block-size:22px}

.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega-in{width:var(--shell);margin-inline:auto;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);gap:34px;padding-block:34px}
/* the [hidden] attribute alone loses to the class-based display:grid above —
   author CSS always outranks the browser's own [hidden]{display:none} rule
   unless restated here, which is why every pane was showing at once */
.mega-in[hidden]{display:none}
.mega h6{margin:0 0 12px;font-size:.78rem;font-weight:600;color:var(--text-3);letter-spacing:-.005em}
.mega a{display:block;padding:7px 0;font-size:.94rem;color:var(--text);transition:color var(--t-sm)}
.mega a:hover{color:var(--orange)}
.mega a small{display:block;font-size:.81rem;color:var(--text-3);font-weight:400;margin-block-start:2px}
.mega-card{border:1px solid var(--rule);border-radius:var(--r-md);padding:18px;background:var(--paper-2)}
.mega-card b{display:block;font-size:.86rem;margin-block-end:12px}
.mega-card .row{display:flex;justify-content:space-between;gap:12px;padding-block:6px;
  font-size:.85rem;border-block-start:1px solid var(--rule)}
.mega-card .row:first-of-type{border:0}
.mega-card .row span:last-child{color:var(--orange);font-weight:560;font-variant-numeric:tabular-nums}

/* mobile nav */
.mnav{position:fixed;inset:0;z-index:130;background:var(--paper);
  transform:translateX(100%);transition:transform var(--t-md) var(--ease);
  display:flex;flex-direction:column;padding:96px 24px 32px;overflow-y:auto}
html[dir=rtl] .mnav{transform:translateX(-100%)}
.mnav.is-open,html[dir=rtl] .mnav.is-open{transform:none}
.mnav a{padding:16px 0;border-block-end:1px solid var(--rule);
  font-family:"Inter Tight",Inter,sans-serif;font-size:1.5rem;font-weight:620;letter-spacing:-.03em}
.mnav a small{display:block;font-size:.86rem;font-weight:400;color:var(--text-3);letter-spacing:0;margin-block-start:3px}
.mnav-foot{margin-block-start:auto;padding-block-start:28px;display:flex;flex-direction:column;gap:10px}
@media (max-width:1060px){
  .hdr-nav{display:none}
  .burger{display:grid}
  .hdr-right .btn:not(.burger){display:none}
  .mega{display:none}
  /* buttons are already hidden below on mobile — that alone was the
     actual cause of the burger being pushed off-screen in RTL, so the
     language switch itself doesn't need to go too; restored so language
     switching is reachable without opening the drawer first */
  .hdr-right{gap:8px}
  .icon-btn{inline-size:40px;block-size:40px}
  .burger{inline-size:42px;block-size:42px}
  .lang a{padding:6px 10px;font-size:.78rem}
}

/* scroll progress */
.prog{position:fixed;inset-block-start:0;inset-inline-start:0;block-size:2.5px;inline-size:0;
  background:linear-gradient(90deg,var(--orange),var(--neon));z-index:140;transition:inline-size .1s linear;
  box-shadow:0 0 12px -2px var(--neon)}
html[dir=rtl] .prog{inset-inline-start:auto;inset-inline-end:0}

/* ── 8. FOOTER ─────────────────────────────────────────────────────── */
.ftr{background:var(--ink-3);color:var(--on-ink);padding-block:var(--sp-7) var(--sp-4)}
.ftr-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px}
.ftr h6,.ftr .ftr-h{margin:0 0 14px;font-size:.8rem;font-weight:600;line-height:1.4;letter-spacing:normal;color:var(--on-ink)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{font-size:.91rem;color:var(--on-ink-2);transition:color var(--t-sm)}
.ftr a:hover{color:var(--orange)}
html[data-theme=dark] .ftr a:hover{color:var(--neon)}
.ftr-brand p{font-size:.92rem;color:var(--on-ink-2);max-width:40ch;margin-block:16px 20px;line-height:1.6}
/* the footer surface tracks the theme like any other .on-ink block, so its
   logo must swap the same way the header's does */
.ftr .l-dark{display:none}.ftr .l-light{display:block}
html[data-theme=dark] .ftr .l-dark{display:block}html[data-theme=dark] .ftr .l-light{display:none}
.ftr-news{display:flex;gap:8px;max-width:340px}
.ftr-news input{flex:1;min-inline-size:0;padding:12px 16px;border-radius:100px;
  border:1px solid var(--rule-ink);background:var(--paper);color:var(--text);font-size:.9rem}
.ftr-news input::placeholder{color:var(--on-ink-2)}
.ftr-bot{margin-block-start:var(--sp-6);padding-block-start:var(--sp-4);
  border-block-start:1px solid var(--rule-ink);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-size:.85rem;color:var(--on-ink-2)}
@media (max-width:980px){.ftr-in{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-brand{grid-column:1/-1}}
@media (max-width:560px){.ftr-in{grid-template-columns:1fr}}

/* ── 9. REUSABLE SECTION PATTERNS ──────────────────────────────────── */

/* 9.1 page hero */
.phero{position:relative;padding-block:clamp(140px,15vw,208px) var(--sec-y);overflow:hidden;
  background:transparent;color:var(--on-ink)}
.phero h1{color:var(--on-ink)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--sp-6);align-items:center}
@media (max-width:1000px){.phero-grid{grid-template-columns:1fr}}
.phero .lede{color:var(--on-ink-2);margin-block-start:var(--sp-4)}
.phero-mesh{position:absolute;inset:0;pointer-events:none;opacity:.9}
.phero-mesh::before,.phero-mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.phero-mesh::before{inline-size:46vw;block-size:46vw;inset-block-start:-16vw;inset-inline-end:-10vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--orange) 34%,transparent),transparent 68%)}
.phero-mesh::after{inline-size:34vw;block-size:34vw;inset-block-end:-14vw;inset-inline-start:-8vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--neon) 13%,transparent),transparent 66%)}
/* fine grid — the "measured" feel, reads as a tracking surface not decoration */
.phero-stats{border:1px solid var(--rule-ink);border-radius:var(--r-lg);
  background:var(--paper);overflow:hidden}
html[data-theme=dark] .phero-stats{background:rgba(255,255,255,.032);backdrop-filter:blur(6px)}
.phero-stats .stat{padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,28px);
  border-block-start:1px solid var(--rule-ink);position:relative}
.phero-stats .stat:first-child{border-block-start:0}
.phero-stats .stat b{color:var(--on-ink)}
.phero-stats .stat:first-child b{color:var(--orange)}
.phero-stats .stat::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  block-size:1px;inline-size:0;background:var(--orange);transition:inline-size .9s var(--ease-out)}
.phero-stats.is-in .stat::after{inline-size:100%}
.phero-stats.is-in .stat:nth-child(2)::after{transition-delay:.16s}
.phero-stats.is-in .stat:nth-child(3)::after{transition-delay:.32s}
.phero-rule{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,var(--rule-ink) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 74%,transparent)}

/* 9.2 numbered process rail — real bordered cards, not a plain divided list.
   Orange for the step number / accent line, neon for the "active" hover
   state — the two allowed accents, on a surface that is always plainly
   white-family in light theme and black-family in dark theme. */
.rail{position:relative;overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rail-track{display:flex;gap:var(--sp-3);inline-size:max-content;will-change:transform;
  direction:ltr;
  animation:railScroll var(--rail-dur,34s) linear infinite}
@media(hover:hover){.rail:hover .rail-track{animation-play-state:paused}}
/* kept running under reduced-motion too, same reasoning as the ambient
   background — a slow horizontal drift, not a jarring effect */
@keyframes railScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir=rtl] .rail-track{animation-name:railScrollR}
@keyframes railScrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
.rail-item{display:flex;flex-direction:column;gap:var(--sp-3);flex:0 0 auto;
  inline-size:min(330px,78vw);
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r-lg);position:relative;
  border:1px solid var(--rule);background:var(--paper);
  transition:border-color var(--t-md) var(--ease),transform var(--t-md) var(--spring),
             box-shadow var(--t-md) var(--ease)}
.on-ink .rail-item,.on-ink-2 .rail-item{border-color:var(--rule-ink)}
/* three colours, cycling: neutral, then the brand's own full-strength
   orange and neon as real card surfaces — not a faint tint of them */
.rail-item:nth-child(3n+2){background:var(--orange);border-color:var(--orange-deep)}
.rail-item:nth-child(3n+2) h3,.rail-item:nth-child(3n+2) .body{color:#fff}
.rail-item:nth-child(3n+2) .rail-n{background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.45);color:#fff}
.rail-item:nth-child(3n+2)::after{background:rgba(255,255,255,.65)}
.rail-item:nth-child(3n){background:var(--neon);border-color:var(--neon-deep)}
.rail-item:nth-child(3n) h3,.rail-item:nth-child(3n) .body{color:#0A0A0A}
.rail-item:nth-child(3n) .rail-n{background:rgba(10,10,10,.1);
  border-color:rgba(10,10,10,.28);color:#0A0A0A}
.rail-item:nth-child(3n)::after{background:rgba(10,10,10,.55)}
.rail-item:hover{transform:translateY(-6px) scale(1.02);z-index:2;box-shadow:var(--lift-sm)}
.rail-item:nth-child(3n+1):hover{border-color:var(--orange)}
.rail-item:nth-child(3n+2):hover{box-shadow:0 20px 44px -18px color-mix(in srgb,var(--orange-deep) 60%,transparent)}
.rail-item:nth-child(3n):hover{box-shadow:0 20px 44px -18px color-mix(in srgb,var(--neon-deep) 45%,transparent)}
.on-ink .rail-item:nth-child(3n+1):hover,.on-ink-2 .rail-item:nth-child(3n+1):hover{border-color:var(--n-28)}
.rail-n{font-family:"Inter Tight",Inter,sans-serif;
  font-size:.86rem;font-weight:700;color:var(--orange-text);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:30px;block-size:30px;border-radius:50%;flex:0 0 auto;
  background:color-mix(in srgb,var(--paper) 60%,transparent);border:1px solid var(--o-32)}
.on-ink .rail-n,.on-ink-2 .rail-n{color:var(--neon-text);border-color:var(--n-28)}
html[data-theme=dark] .on-ink .rail-n,html[data-theme=dark] .on-ink-2 .rail-n{color:var(--neon)}
.rail-n::before{content:attr(data-n)}
.rail-item h3{margin-block-end:2px}
.rail-item .body{max-width:none}
/* a static accent line under the number — the moving row already carries
   the motion, so this stays a fixed mark rather than its own animation */
.rail-item::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:24px;
  block-size:2px;inline-size:32px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--neon))}

/* 9.3 feature blocks — deliberately alternating, not six identical cards */
.feat{display:grid;gap:var(--sp-6)}
.feat-row{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--sp-6);align-items:center}
.feat-row:nth-child(even) .feat-copy{order:2}
@media (max-width:940px){
  .feat-row{grid-template-columns:1fr;gap:var(--sp-4)}
  .feat-row:nth-child(even) .feat-copy{order:0}
}
.feat-copy h3{margin-block-end:var(--sp-3)}
.feat-copy .body{margin-block-end:var(--sp-3)}
.feat-tags{display:flex;flex-wrap:wrap;gap:7px;margin-block-start:var(--sp-3)}

/* 9.4 visual slab — the container for every in-page product visual */
.slab{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);position:relative}
.on-ink .slab,.on-ink-2 .slab{border-color:var(--rule-ink);background:var(--paper-2)}
html[data-theme=dark] .on-ink .slab,html[data-theme=dark] .on-ink-2 .slab{background:rgba(255,255,255,.03)}
.slab-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-block-end:1px solid var(--rule);font-size:.82rem;color:var(--text-2);background:var(--paper)}
.on-ink .slab-bar,.on-ink-2 .slab-bar{border-block-end-color:var(--rule-ink);background:var(--paper);color:var(--on-ink-2)}
html[data-theme=dark] .on-ink .slab-bar,html[data-theme=dark] .on-ink-2 .slab-bar{background:rgba(255,255,255,.03)}
.slab-bar b{color:var(--text);font-weight:600}
.on-ink .slab-bar b,.on-ink-2 .slab-bar b{color:var(--on-ink)}
.slab-bar .sep{color:var(--text-3)}
.slab-body{padding:clamp(18px,2.2vw,26px)}

/* metric row inside a slab */
.mrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--rule);border-radius:var(--r-sm);overflow:hidden}
.on-ink .mrow,.on-ink-2 .mrow{background:var(--rule-ink)}
.mrow>div{background:var(--paper);padding:16px 18px}
.on-ink .mrow>div,.on-ink-2 .mrow>div{background:var(--paper)}
html[data-theme=dark] .on-ink .mrow>div,html[data-theme=dark] .on-ink-2 .mrow>div{background:var(--ink-2)}
.mrow small{display:block;font-size:.79rem;color:var(--text-3);margin-block-end:7px}
.mrow b{font-family:"Inter Tight",Inter,sans-serif;font-size:1.32rem;font-weight:660;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mrow i{font-style:normal;font-size:.79rem;color:var(--neon-text);margin-inline-start:7px;font-weight:560}
html[data-theme=dark] .on-ink .mrow i,html[data-theme=dark] .on-ink-2 .mrow i{color:var(--neon)}

/* bar chart built from divs — no dependency */
.bars{display:flex;align-items:flex-end;gap:5px;block-size:150px;margin-block-start:var(--sp-3)}
.bars span{flex:1;border-radius:4px 4px 2px 2px;background:var(--o-32);
  block-size:var(--h,20%);transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s var(--ease-out) calc(var(--i,0) * 55ms),background-color var(--t-md)}
.is-in .bars span{transform:none}
.bars span:nth-last-child(-n+3){background:var(--orange)}
.bars span:last-child{background:var(--neon)}

/* 9.5 FAQ */
.faq{border-block-start:1px solid var(--rule);max-width:none}
.on-ink .faq,.on-ink-2 .faq{border-block-start-color:var(--rule-ink)}
.faq details{border-block-end:1px solid var(--rule)}
.on-ink .faq details,.on-ink-2 .faq details{border-block-end-color:var(--rule-ink)}
.faq summary{list-style:none;cursor:pointer;padding-block:var(--sp-4);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(1.06rem,1.55vw,1.28rem);
  font-weight:600;letter-spacing:-.022em;line-height:1.32;
  transition:color var(--t-sm)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange)}
.faq-ico{flex:0 0 auto;inline-size:24px;block-size:24px;border-radius:50%;border:1px solid var(--rule-strong);
  display:grid;place-items:center;margin-block-start:2px;transition:var(--t-md) var(--ease)}
.on-ink .faq-ico,.on-ink-2 .faq-ico{border-color:var(--rule-ink)}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.faq-ico::before{inline-size:10px;block-size:1.6px}
.faq-ico::after{inline-size:1.6px;block-size:10px;transition:transform var(--t-md) var(--ease)}
.faq details[open] .faq-ico{border-color:var(--orange);color:var(--orange);transform:rotate(90deg)}
.faq details[open] .faq-ico::after{transform:scaleY(0)}
.faq-a{padding-block-end:var(--sp-4);max-width:78ch}
.faq-a p{color:var(--text-2);font-size:1rem;line-height:1.7;margin:0}
.on-ink .faq-a p,.on-ink-2 .faq-a p{color:var(--on-ink-2)}
.faq details[open] .faq-a{animation:faq-open .45s var(--ease-out)}
@keyframes faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 9.6 final CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);
  padding-block:clamp(74px,7.4vw,112px);text-align:center}
.cta-band h2{color:var(--on-ink);margin-inline:auto;max-width:20ch}
.cta-band .lede{margin:var(--sp-4) auto 0;color:var(--on-ink-2)}
.cta-band .btn-row{justify-content:center;margin-block-start:var(--sp-5)}
.cta-glow{position:absolute;inset-block-end:-45%;inset-inline-start:50%;translate:-50% 0;
  inline-size:min(900px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--orange) 26%,transparent),transparent 62%)}

/* 9.7 logo marquee */
.mq{overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;gap:56px;align-items:center;inline-size:max-content;will-change:transform;
  direction:ltr;
  animation:mq 46s linear infinite}
@media(hover:hover){.mq:hover .mq-track{animation-play-state:paused}}
.mq.rev .mq-track{animation-direction:reverse}
@keyframes mq{to{transform:translateX(-50%)}}
html[dir=rtl] .mq-track{animation-name:mq-rtl}
@keyframes mq-rtl{to{transform:translateX(50%)}}
img[data-remote]{min-inline-size:1px}
.mq img{block-size:34px;inline-size:auto;object-fit:contain;opacity:.55;
  filter:grayscale(1);transition:var(--t-md) var(--ease)}
.mq img:hover{opacity:1;filter:none}
html[data-theme=dark] .mq img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.8}
/* logo art is dark-on-transparent, so it needs no inversion on the light theme */

/* ── 10. ARABIC / RTL ──────────────────────────────────────────────────
   Arabic gets its own display face, looser leading and no negative
   tracking — Latin tracking values wreck Arabic joins.
   ─────────────────────────────────────────────────────────────────── */
html[lang=ar] body{
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  font-size:17px;line-height:1.85;letter-spacing:0;
}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,html[lang=ar] h5{
  font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;
  letter-spacing:0;line-height:1.34;font-weight:700;
}
html[lang=ar] .t-display{font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.22}
html[lang=ar] .t-hero{font-size:clamp(2.15rem,4.6vw,3.5rem);line-height:1.26}
html[lang=ar] .t-sec{font-size:clamp(1.8rem,3.5vw,2.9rem);line-height:1.3}
html[lang=ar] .t-sub{font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.38}
html[lang=ar] .t-card{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.5}
html[lang=ar] .lede{line-height:1.9;max-width:52ch}
html[lang=ar] .body{line-height:1.95;max-width:56ch}
html[lang=ar] .faq summary{line-height:1.6;font-weight:700}
html[lang=ar] .mnav a{font-size:1.35rem;line-height:1.5}
html[lang=ar] .btn{font-weight:600;letter-spacing:0}
html[lang=ar] .stat b,html[lang=ar] .mrow b{font-family:"Inter Tight",Inter,sans-serif;direction:ltr;unicode-bidi:isolate}
/* numerals stay Latin inside Arabic — that is how the region actually reads them */
html[lang=ar] .num,html[lang=ar] [data-count]{direction:ltr;unicode-bidi:isolate;display:inline-block}

html[dir=rtl] .tlink::after{transform-origin:right}
html[dir=rtl] .mq{-webkit-mask-image:linear-gradient(-90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(-90deg,transparent,#000 7%,#000 93%,transparent)}
html[dir=rtl] .phero-mesh::before{inset-inline-end:auto;inset-inline-start:-10vw}
html[dir=rtl] .phero-mesh::after{inset-inline-start:auto;inset-inline-end:-8vw}
html[dir=rtl] .cta-band h2{max-width:22ch}

/* highlighted headline word — the brand gradient applied to a single key
   word inside an otherwise plain headline, so colour reads as emphasis
   rather than noise. Orange for outcomes/commerce, neon for AI/signal. */
.hl{background:linear-gradient(178deg,#FFA36B 0%,#FF7A3D 32%,#EF5E1E 62%,#C9430C 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--orange)}
.hl-neon{background:linear-gradient(178deg,#E4FF62 0%,#D5FF2A 55%,#A8CC12 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--neon-text)}
/* the bright gradient above reads clearly on a dark background (dark
   theme) but has genuinely poor contrast on white — was reading as
   "barely there" in light mode. Light theme uses a darker-toned gradient
   instead, the same family of green as --neon-text, so it's the same
   accent colour throughout the site, just legible against white too */
html[data-theme=light] .hl-neon{
  background:linear-gradient(178deg,#A8CC12 0%,#8AAE05 55%,#6F8F00 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* the positioning section's left column follows the ROI calculator's own
   colour toggle on the right — when the calculator is switched to neon,
   the "ROI" highlight and the "For brands" button switch too, so the
   whole section reads as one coordinated colour, not two fixed brand/
   creator colours sitting next to a calculator that changed independently */
#posLeft[data-mode=neon] .hl{
  background:linear-gradient(178deg,#E4FF62 0%,#D5FF2A 55%,#A8CC12 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--neon-text)}
html[data-theme=light] #posLeft[data-mode=neon] .hl{
  background:linear-gradient(178deg,#A8CC12 0%,#8AAE05 55%,#6F8F00 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#posLeft[data-mode=neon] .btn-primary{
  background:var(--neon);
  --btn-fg:#0A0A0A;
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,
             0 -1px 0 rgba(0,0,0,.1) inset,
             0 10px 26px -12px color-mix(in srgb,var(--neon) 74%,transparent),
             0 2px 6px -2px color-mix(in srgb,var(--neon-deep) 50%,transparent)}
#posLeft .btn-primary{transition:background .5s ease,box-shadow .5s ease}
#posLeft[data-mode=orange] .btn-line-neon{--btn-bd:var(--orange-deep);--btn-fg:var(--orange-text)}
html[data-theme=dark] #posLeft[data-mode=orange] .btn-line-neon{--btn-bd:var(--orange);--btn-fg:var(--orange)}
#posLeft .btn-line-neon{transition:color .5s ease,border-color .5s ease}
/* the eyebrow tag ("Creators × Brands × AI × Performance") is part of the
   same coordinated colour moment — was staying orange while everything
   else around it switched to neon */
#posLeft[data-mode=neon] .eyebrow{color:var(--neon-text);transition:color .5s ease}
#posLeft[data-mode=neon] .eyebrow::before{background:linear-gradient(90deg,var(--neon-deep),var(--n-14))}
html[dir=rtl] #posLeft[data-mode=neon] .eyebrow::before{background:linear-gradient(-90deg,var(--neon-deep),var(--n-14))}
#posLeft .eyebrow{transition:color .5s ease}
#posLeft .eyebrow::before{transition:background .5s ease}

/* ── 11. UTILITIES ─────────────────────────────────────────────────── */
.u-neon{color:var(--neon-text)}
html[data-theme=dark] .on-ink .u-neon,html[data-theme=dark] .on-ink-2 .u-neon{color:var(--neon)}
.u-orange{color:var(--orange)}
.u-center{text-align:center}
.u-max-40{max-width:40ch}.u-max-52{max-width:52ch}.u-max-64{max-width:64ch}
.u-mt-3{margin-block-start:var(--sp-3)}.u-mt-4{margin-block-start:var(--sp-4)}
.u-mt-5{margin-block-start:var(--sp-5)}.u-mt-6{margin-block-start:var(--sp-6)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.seam{block-size:1px;background:var(--rule);position:relative;overflow:hidden}
.seam::after{content:"";position:absolute;inset-block:0;inline-size:120px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  transform:translateX(-100%);animation:seam 6s var(--ease) infinite}
@keyframes seam{0%{transform:translateX(-100%)}60%,100%{transform:translateX(1200%)}}

/* ── 12. RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:1200px){:root{--shell:min(1240px,100% - 40px)}}
@media (max-width:820px){
  :root{--shell:calc(100% - 34px);--shell-tight:calc(100% - 34px);--shell-text:calc(100% - 34px);
    --sec-y:clamp(62px,11vw,88px);--sec-y-tight:clamp(44px,8vw,62px)}
  body{font-size:16.2px}
  .t-display{font-size:clamp(2.5rem,10.5vw,3.4rem)}
  .t-hero{font-size:clamp(2.25rem,9.4vw,3rem)}
  .t-sec{font-size:clamp(1.92rem,7.6vw,2.4rem)}
  .t-sub{font-size:clamp(1.42rem,5.6vw,1.8rem)}
  .btn{padding:13px 21px;font-size:.93rem}
  .btn-lg{padding:15px 26px;font-size:.98rem}
  .btn-row .btn{flex:1 1 auto;min-inline-size:44%}
  .sec-head{margin-block-end:var(--sp-5)}
  .feat{gap:var(--sp-6)}
  .rail-item{gap:var(--sp-3);padding:20px;inline-size:min(280px,80vw)}
  .phero{padding-block:clamp(112px,26vw,140px) var(--sec-y)}
  .ftr{padding-block:var(--sp-7) var(--sp-4)}
  html[lang=ar] .t-display{font-size:clamp(2rem,8.4vw,2.8rem)}
  html[lang=ar] .t-hero{font-size:clamp(1.85rem,7.6vw,2.5rem)}
  html[lang=ar] .t-sec{font-size:clamp(1.6rem,6.4vw,2.1rem)}
}
@media (max-width:480px){
  .btn-row .btn{inline-size:100%}
  .mrow{grid-template-columns:repeat(2,1fr)}
}

/* print — marketing pages get shared as PDFs more than anyone admits */
@media print{
  .hdr,.mnav,.prog,.cta-glow,.phero-mesh,.phero-rule{display:none!important}
  [data-rv],[data-rv-group]>*{opacity:1!important;transform:none!important}
  body{background:#fff;color:#000}
}

/* mega panel items read as plain text, so nothing signalled they were
   clickable. Given a surface, a border and an arrow that commits on
   hover — they were always links, they just did not look like it. */
.mega-in > div > a{position:relative;display:block;
  padding:11px 36px 11px 14px;border-radius:11px;
  border:1px solid var(--rule);background:var(--paper-2);
  transition:background .2s var(--ease),border-color .2s var(--ease),
             transform .2s var(--ease)}
html[dir=rtl] .mega-in > div > a{padding:10px 13px 10px 34px}
.mega-in > div > a::after{content:"";position:absolute;inset-inline-end:14px;
  inset-block-start:50%;inline-size:7px;block-size:7px;margin-block-start:-4px;
  border-inline-end:2px solid var(--orange);border-block-start:2px solid var(--orange);
  transform:rotate(45deg);opacity:.45;transition:opacity .2s var(--ease),
             transform .2s var(--ease)}
html[dir=rtl] .mega-in > div > a::after{transform:rotate(-135deg)}
.mega-in > div > a + a{margin-block-start:7px}
.mega-in > div > a:hover,
.mega-in > div > a:focus-visible{background:var(--o-08);
  border-color:var(--o-32);transform:translateX(2px)}
html[dir=rtl] .mega-in > div > a:hover,
html[dir=rtl] .mega-in > div > a:focus-visible{transform:translateX(-2px)}
.mega-in > div > a:hover::after,
.mega-in > div > a:focus-visible::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
html[dir=rtl] .mega-in > div > a:hover::after,
html[dir=rtl] .mega-in > div > a:focus-visible::after{transform:rotate(-135deg) translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.mega-in > div > a{transition:none}}

/* the header owns the top of the stack; anything in the hero that
   creates its own layer (the badge uses backdrop-filter) must stay
   under the dropdown or it steals the clicks */
.hdr{z-index:200}
/* .mega was pinned to z-index:1 here, which beat its own z-index:130 and
   dropped the dropdown underneath every layer the hero creates — the
   panel painted behind the video wall instead of over it. The header is
   its own stacking context (z-index:900 below) and main is z-index:0, so
   the panel only has to outrank its siblings inside .hdr, not the page. */
.mega{z-index:130}
.cw-tag{position:relative;z-index:0}

/* main carried position:relative + z-index:1, which put the whole page
   body in its own stacking context above the fixed header's dropdown —
   so clicks on panel items were landing on whatever hero element sat at
   those coordinates. The header must outrank it. */
main{z-index:0}
.hdr{z-index:900}

/* The header is pointer-events:none so the page stays clickable through
   the gaps either side of the floating pill — but that inherits down
   into the dropdown, so the panel and every link inside it were
   unclickable. Restore it on the parts that are meant to be hit. */
.hdr-inner,.hdr-nav,.hdr-nav a,.hdr-cta,.hdr .lang,.hdr .burger{pointer-events:auto}
.mega,.mega *{pointer-events:auto}
.mega:not(.is-open),.mega:not(.is-open) *{pointer-events:none}

/* ── LETTING THE BACKDROP THROUGH ─────────────────────────────────────
   68% of the homepage was covered by sections painting a solid white or
   near-white fill. Whatever the backdrop looked like, two thirds of the
   page hid it completely — which is why it kept reading as a plain
   white page no matter what was built behind it.

   The fills become translucent rather than removed: the sections still
   separate from one another and text keeps its contrast, but the grid
   and the beams now carry the full length of the page instead of
   appearing in the few transparent gaps.
   ─────────────────────────────────────────────────────────────────── */
main > .sec.on-ink{background:rgba(255,255,255,.72)}
main > .sec.on-ink-2{background:rgba(250,250,250,.66)}
main > .sec.on-paper-2{background:rgba(247,247,247,.6)}
main > .cta-band{background:rgba(255,255,255,.74)}
html[data-theme=dark] main > .sec.on-ink{background:rgba(11,12,14,.72)}
html[data-theme=dark] main > .sec.on-ink-2{background:rgba(16,17,20,.68)}
html[data-theme=dark] main > .sec.on-paper-2{background:rgba(14,15,18,.62)}
html[data-theme=dark] main > .cta-band{background:rgba(11,12,14,.74)}


/* ═══ MICRO-INTERACTIONS ══════════════════════════════════════════════
   One shared motion language: the same easing and the same short
   durations everywhere, so the whole product feels made by one hand.

   Everything here animates transform, opacity or box-shadow only, and
   every rule is inside prefers-reduced-motion guards at the end.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --mi-fast:.16s; --mi-base:.28s; --mi-slow:.52s;
  --mi-ease:cubic-bezier(.32,.72,0,1);          /* decisive, no overshoot */
  --mi-spring:cubic-bezier(.34,1.3,.44,1);      /* one gentle overshoot */
}

/* ── card elevation ─────────────────────────────────────────────────
   Lifts on the spring curve, so it arrives with a small settle rather
   than stopping dead. */
.card,.uc,.pr-card,.au-kpi,.fact-row,.int-card,.res-card{
  transition:transform var(--mi-base) var(--mi-ease),
             box-shadow var(--mi-base) var(--mi-ease),
             border-color var(--mi-base) var(--mi-ease)}
.card:hover,.uc:hover,.pr-card:hover,.int-card:hover,.res-card:hover{
  transform:translate3d(0,-4px,0);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.28)}
html[data-theme=dark] .card:hover,html[data-theme=dark] .int-card:hover,
html[data-theme=dark] .res-card:hover{box-shadow:0 22px 48px -24px rgba(0,0,0,.6)}

/* ── buttons ────────────────────────────────────────────────────────
   A press that actually depresses. The sheen is a pseudo-element moved
   by transform, not a repainted gradient. */
.btn{position:relative;overflow:hidden;
  transition:transform var(--mi-fast) var(--mi-ease),
             box-shadow var(--mi-base) var(--mi-ease),
             background-color var(--mi-base) var(--mi-ease)}
.btn:hover{transform:translate3d(0,-1.5px,0)}
.btn:active{transform:translate3d(0,1px,0);transition-duration:.06s}
.btn-primary::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,
    rgba(255,255,255,.26) 50%,transparent 62%);
  transform:translate3d(-140%,0,0);pointer-events:none}
.btn-primary:hover::after{animation:miSheen .72s var(--mi-ease)}
@keyframes miSheen{to{transform:translate3d(140%,0,0)}}

/* ── links and nav ──────────────────────────────────────────────────
   An underline that grows from the side the language reads from. */
.ftr a,.mega-in > div > a{position:relative}
.ftr a::after{content:"";position:absolute;inset-block-end:-2px;
  inset-inline-start:0;inline-size:100%;block-size:1px;
  background:currentColor;transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--mi-base) var(--mi-ease)}
.ftr a:hover::after{transform:scaleX(1)}

/* ── inputs ─────────────────────────────────────────────────────────
   The focus ring expands rather than appearing, which reads as the
   field accepting focus instead of flashing. */
input,textarea,select{
  transition:border-color var(--mi-base) var(--mi-ease),
             box-shadow var(--mi-base) var(--mi-ease)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  box-shadow:0 0 0 4px var(--o-16)}

/* ── loading ────────────────────────────────────────────────────────
   A shimmer that travels by transform. Skeletons only — never applied
   to real content. */
.is-loading{position:relative;overflow:hidden;
  background:var(--paper-2);border-radius:var(--r-md);color:transparent}
.is-loading::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,
    rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translate3d(-100%,0,0);
  animation:miShimmer 1.4s var(--mi-ease) infinite}
html[data-theme=dark] .is-loading::after{
  background:linear-gradient(100deg,transparent 30%,
    rgba(255,255,255,.08) 50%,transparent 70%)}
@keyframes miShimmer{to{transform:translate3d(100%,0,0)}}

/* ── reveals ────────────────────────────────────────────────────────
   Counters and charts already animate on scroll; this gives them the
   same curve as everything else so nothing feels borrowed. */
[data-count],[data-aun],.roi-stat .val{
  font-variant-numeric:tabular-nums;
  transition:color var(--mi-base) var(--mi-ease)}
.chart-line,.au-chart .l,.sparkline path{
  transition:stroke-dashoffset var(--mi-slow) var(--mi-ease)}

/* ── page transition ────────────────────────────────────────────────
   A short fade on leave. Opacity only; nothing reflows. */
body{transition:opacity var(--mi-base) var(--mi-ease)}
body.is-leaving{opacity:0}

@media(prefers-reduced-motion:reduce){
  .card,.uc,.pr-card,.int-card,.res-card,.btn,
  input,textarea,select,body,.ftr a::after{transition:none!important}
  .card:hover,.uc:hover,.btn:hover,.btn:active,
  .int-card:hover,.res-card:hover{transform:none!important}
  .btn-primary:hover::after,.is-loading::after{animation:none!important}
}

/* ═══ CARD ENTRANCE ═══════════════════════════════════════════════════
   Cards appeared with their section rather than arriving. They now rise
   and settle in sequence.

   Scoped deliberately to grids that sit inside a reveal container. An
   earlier version hid any matching card outright and relied on a class
   that never arrives on some pages — it left 31 elements permanently
   invisible on the login screen. Nothing is hidden unless its own
   reveal container is present to bring it back.
   ═══════════════════════════════════════════════════════════════════ */
[data-rv-group] > *{
  opacity:0;transform:translate3d(0,26px,0) scale(.965);
  transition:opacity .62s var(--ease-out),transform .72s cubic-bezier(.22,1.1,.36,1)}
[data-rv-group].is-in > *{opacity:1;transform:none}
[data-rv-group] > :nth-child(2){transition-delay:.08s}
[data-rv-group] > :nth-child(3){transition-delay:.16s}
[data-rv-group] > :nth-child(4){transition-delay:.24s}
[data-rv-group] > :nth-child(5){transition-delay:.32s}
[data-rv-group] > :nth-child(6){transition-delay:.4s}

/* every card responds to the pointer */
.card,.int-card,.res-card,.pr-card,.uc,.fact-row{
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),
             border-color .32s var(--ease-out)}
.card:hover,.int-card:hover,.res-card:hover,.pr-card:hover{
  transform:translate3d(0,-5px,0);border-color:var(--o-32);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.32)}

@media(prefers-reduced-motion:reduce){
  [data-rv-group] > *{opacity:1;transform:none;transition:none;
    transition-delay:0s!important}
  .card:hover,.int-card:hover,.res-card:hover,.pr-card:hover{
    transform:none}
}

/* ═══ PAGE HERO: a staged entrance ════════════════════════════════════
   The inner page heroes rendered fully formed — heading, lede and
   buttons all present on the first frame, so the top of every page felt
   like a printed sheet. They now land in sequence on load.

   Staged with an animation rather than a reveal class, because these
   sit above the fold and the scroll observer never fires for them.
   ═══════════════════════════════════════════════════════════════════ */
.phero .eyebrow,.phero h1,.phero .lede,.phero .btn-row,.phero .phero-note,
.phero .chips,.phero .stat-row{
  animation:pheroIn 1.05s cubic-bezier(.16,1.02,.3,1) backwards}
.phero .eyebrow{animation-delay:.1s}
.phero h1{animation-delay:.26s}
.phero .lede{animation-delay:.5s}
.phero .chips{animation-delay:.66s}
.phero .btn-row{animation-delay:.78s}
.phero .phero-note,.phero .stat-row{animation-delay:.92s}
@keyframes pheroIn{
  from{opacity:0;transform:translate3d(0,46px,0) scale(.97)}
  to{opacity:1;transform:none}}

/* the accent word in a hero heading arrives a beat later */
.phero h1 em,.phero h1 .hl{display:inline-block;
  animation:pheroAccent .9s cubic-bezier(.22,1.14,.36,1) .42s backwards}
@keyframes pheroAccent{
  from{opacity:0;transform:translate3d(0,14px,0) rotate(-1.4deg)}
  to{opacity:1;transform:none}}

/* ── track rows: a stronger arrival ───────────────────────────────────
   These carried the group attribute but nothing distinguished one row
   from the next. Each now slides in from the reading edge with its
   number scaling up behind it.
   ─────────────────────────────────────────────────────────────────── */
.tk[data-rv-group] > *{
  transform:translate3d(-22px,14px,0) scale(.97)}
html[dir=rtl] .tk[data-rv-group] > *{transform:translate3d(22px,14px,0) scale(.97)}
.tk[data-rv-group].is-in > *{transform:none}
.tk .tk-n{display:inline-block;transition:transform .7s cubic-bezier(.22,1.16,.36,1),
  color .5s var(--ease)}
.tk[data-rv-group] > * .tk-n{transform:scale(.6);opacity:.4}
.tk[data-rv-group].is-in > * .tk-n{transform:none;opacity:1}
.tk-row:hover .tk-n{color:var(--orange-text)}

@media(prefers-reduced-motion:reduce){
  .phero .eyebrow,.phero h1,.phero .lede,.phero .btn-row,.phero .phero-note,
  .phero .chips,.phero .stat-row,.phero h1 em,.phero h1 .hl{animation:none}
  .tk[data-rv-group] > *,.tk[data-rv-group] > * .tk-n{transform:none;opacity:1}
}

/* ── TRACK ROWS: a continuous cycle ───────────────────────────────────
   The three rows sat still once revealed. Each now takes its turn
   forward on a shared 13.5s loop — lifting, gaining depth and its
   number taking the brand colour — then handing over to the next.

   One loop drives all three via staggered delays, so nothing schedules
   anything and only transform, box-shadow and colour move.
   ─────────────────────────────────────────────────────────────────── */
.tk[data-rv-group].is-in > *{
  animation:tkCycle 13.5s cubic-bezier(.4,0,.25,1) infinite}
.tk[data-rv-group].is-in > :nth-child(2){animation-delay:4.5s}
.tk[data-rv-group].is-in > :nth-child(3){animation-delay:9s}
@keyframes tkCycle{
  0%,3%{transform:none;box-shadow:0 0 0 0 rgba(0,0,0,0)}
  11%,27%{transform:translate3d(0,-20px,0) scale(1.03);
    box-shadow:0 38px 70px -28px rgba(0,0,0,.34)}
  36%,100%{transform:none;box-shadow:0 0 0 0 rgba(0,0,0,0)}}
html[data-theme=dark] .tk[data-rv-group].is-in > *{
  animation-name:tkCycleDark}
@keyframes tkCycleDark{
  0%,3%{transform:none;box-shadow:0 0 0 0 rgba(0,0,0,0)}
  11%,27%{transform:translate3d(0,-20px,0) scale(1.03);
    box-shadow:0 40px 74px -26px rgba(0,0,0,.68)}
  36%,100%{transform:none;box-shadow:0 0 0 0 rgba(0,0,0,0)}}

/* the number lights up on that row's turn */
.tk[data-rv-group].is-in > * .tk-n{
  animation:tkNum 13.5s cubic-bezier(.4,0,.25,1) infinite}
.tk[data-rv-group].is-in > :nth-child(2) .tk-n{animation-delay:4.5s}
.tk[data-rv-group].is-in > :nth-child(3) .tk-n{animation-delay:9s}
@keyframes tkNum{
  0%,3%{color:var(--text-3);transform:none}
  11%,27%{color:var(--orange-text);transform:scale(1.32)}
  36%,100%{color:var(--text-3);transform:none}}

/* hovering takes over from the cycle */
.tk-row:hover{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){
  .tk[data-rv-group].is-in > *,
  .tk[data-rv-group].is-in > * .tk-n{animation:none}
}

/* ── ACADEMY STRIP: a continuous showcase ─────────────────────────────
   Several frames visible at once, travelling steadily rather than
   swapping one at a time. The set is rendered twice so the loop closes
   with no gap, and the whole track moves on a single transform — the
   compositor carries it and nothing is scheduled.
   ─────────────────────────────────────────────────────────────────── */
.ch-strip{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ch-strip-track{display:flex;gap:clamp(14px,1.8vw,24px);inline-size:max-content;
  animation:chStrip 58s linear infinite;will-change:transform}
html[dir=rtl] .ch-strip-track{animation-name:chStripRtl}
@keyframes chStrip{to{transform:translate3d(-50%,0,0)}}
@keyframes chStripRtl{to{transform:translate3d(50%,0,0)}}
.ch-strip:hover .ch-strip-track{animation-play-state:paused}

.ch-card{position:relative;margin:0;flex:0 0 auto;
  inline-size:clamp(280px,32vw,440px);aspect-ratio:3/4;
  border-radius:var(--r-lg);overflow:hidden;background:transparent;
  border:0;
  box-shadow:0 26px 56px -40px rgba(0,0,0,.4);
  transition:transform .45s var(--ease-out)}
/* pinned to the card's box so nothing of the card shows behind it */
.ch-card img{position:absolute;inset:0;inline-size:100%!important;
  block-size:100%!important;max-inline-size:none;padding:0;margin:0;
  object-fit:cover;object-position:center;display:block;
  transition:transform .9s var(--ease-out)}
.ch-strip:hover .ch-card:hover{transform:translate3d(0,-8px,0)}
.ch-strip:hover .ch-card:hover img{transform:scale(1.05)}
.ch-card figcaption{position:absolute;inset-inline:0;inset-block-end:0;
  padding:30px 16px 14px;font-size:.84rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(10,10,12,.78),transparent)}

@media(max-width:600px){
  .ch-card{inline-size:min(78vw,300px)}
  .ch-strip-track{animation-duration:42s}
}
@media(prefers-reduced-motion:reduce){
  .ch-strip{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .ch-strip-track{animation:none}
}

/* ── ACADEMY HERO: a little more life ─────────────────────────────────
   The heading now arrives a word-group at a time via a clipped wipe, the
   eyebrow's rule draws itself, and the whole block settles rather than
   simply fading. Layered on top of the shared .phero staging, so the
   other pages keep their calmer entrance.
   ─────────────────────────────────────────────────────────────────── */
.phero .eyebrow{position:relative;display:inline-block}
.phero .eyebrow::after{content:"";position:absolute;inset-block-end:-6px;
  inset-inline-start:0;block-size:2px;inline-size:0;border-radius:2px;
  background:var(--orange);
  animation:acRule .9s cubic-bezier(.16,1,.3,1) .55s backwards}
@keyframes acRule{from{inline-size:0}to{inline-size:100%}}

/* the headline wipes up behind its own edge */
.phero h1{clip-path:inset(0 0 -12% 0)}
.phero h1{animation:acHead 1.15s cubic-bezier(.16,1.02,.3,1) .26s backwards}
@keyframes acHead{
  from{opacity:0;transform:translate3d(0,64px,0) scale(.965)}
  to{opacity:1;transform:none}}

/* the lede rises a touch later and further */
.phero .lede{animation:acLede 1.1s cubic-bezier(.16,1,.3,1) .5s backwards}
@keyframes acLede{
  from{opacity:0;transform:translate3d(0,34px,0)}
  to{opacity:1;transform:none}}

/* buttons arrive with a small settle, one after the other */
.phero .btn-row > *{animation:acBtn .8s cubic-bezier(.34,1.32,.44,1) backwards}
.phero .btn-row > :nth-child(1){animation-delay:.82s}
.phero .btn-row > :nth-child(2){animation-delay:.92s}
.phero .btn-row > :nth-child(3){animation-delay:1.02s}
@keyframes acBtn{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.94)}
  to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .phero .eyebrow::after{animation:none;inline-size:100%}
  .phero h1,.phero .lede,.phero .btn-row > *{animation:none}
  .phero h1{clip-path:none}
}

/* ── ACADEMY HERO: a little more character ────────────────────────────
   The staged entrance was working but plain — everything travelled the
   same way. The heading now rises with a slight settle of its own, the
   supporting copy comes from the reading edge rather than straight up,
   and the buttons arrive last with a small spring.
   ─────────────────────────────────────────────────────────────────── */
.phero h1{animation-name:pheroHead;animation-duration:1.15s;
  animation-timing-function:cubic-bezier(.16,1.08,.28,1)}
@keyframes pheroHead{
  from{opacity:0;transform:translate3d(0,54px,0) scale(.965)}
  to{opacity:1;transform:none}}

.phero .lede,.phero .chips{animation-name:pheroSide}
@keyframes pheroSide{
  from{opacity:0;transform:translate3d(-26px,14px,0)}
  to{opacity:1;transform:none}}
html[dir=rtl] .phero .lede,html[dir=rtl] .phero .chips{
  animation-name:pheroSideRtl}
@keyframes pheroSideRtl{
  from{opacity:0;transform:translate3d(26px,14px,0)}
  to{opacity:1;transform:none}}

.phero .btn-row{animation-name:pheroBtns;animation-duration:.95s;
  animation-timing-function:cubic-bezier(.3,1.34,.4,1)}
@keyframes pheroBtns{
  from{opacity:0;transform:translate3d(0,26px,0) scale(.93)}
  to{opacity:1;transform:none}}

/* the eyebrow rule draws itself out before the heading lands */
.phero .eyebrow{position:relative}
.phero .eyebrow::after{content:"";position:absolute;inset-block-end:-6px;
  inset-inline-start:0;block-size:2px;border-radius:2px;background:var(--orange);
  inline-size:0;animation:pheroRule .7s cubic-bezier(.3,1,.4,1) .34s forwards}
@keyframes pheroRule{to{inline-size:100%}}

@media(prefers-reduced-motion:reduce){
  .phero h1,.phero .lede,.phero .chips,.phero .btn-row{animation:none}
  .phero .eyebrow::after{animation:none;inline-size:100%}
}

/* ── PAGE HERO: proportion ────────────────────────────────────────────
   The heading had no size of its own and inherited the browser default,
   which pushed the section past 100% of the viewport on every desktop
   and cropped the copy. Sized explicitly, with the block padding scaled
   to match, so the hero sits comfortably inside one screen.
   ─────────────────────────────────────────────────────────────────── */
.phero h1{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.06;
  letter-spacing:-.028em;max-inline-size:17ch}
.phero .lede{font-size:clamp(1rem,1.35vw,1.16rem);max-inline-size:56ch}
.phero{padding-block-start:clamp(104px,11vw,150px);
  padding-block-end:clamp(48px,5vw,74px)}
@media(max-width:600px){
  .phero h1{font-size:clamp(1.8rem,7.6vw,2.25rem);line-height:1.1;
    max-inline-size:none}
  .phero .lede{font-size:1rem}
  .phero{padding-block-start:84px;padding-block-end:36px}
  .phero .btn-row{margin-block-start:18px}
  .phero .chips{gap:6px;margin-block-start:14px}
  .phero .lede{margin-block-start:14px}
}
@media(max-width:400px){
  .phero h1{font-size:clamp(1.62rem,7vw,2rem)}
  .phero .lede{font-size:.95rem}
  .phero{padding-block-start:78px;padding-block-end:30px}
  .phero .chips .chip{font-size:.7rem;padding:5px 10px}
}

/* ═══ ACADEMY: DEPTH AND CHOREOGRAPHY ═════════════════════════════════
   Motion, depth and interaction only — no copy, colour, image or layout
   change. One easing vocabulary across the page so the whole thing
   reads as a single piece rather than a stack of blocks.

   Everything animates transform, opacity or box-shadow. The light
   sweeps are pseudo-elements moved by transform, so a card never
   repaints as it lights up.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ac-ease:cubic-bezier(.22,1.04,.3,1);
  --ac-spring:cubic-bezier(.3,1.32,.4,1);
}

/* ── every card gets depth, an edge that catches light, and a lift ──── */
.ch-step,.ch-week,.ch-track,.ch-fin,.ch-plan,.ch-q{
  position:relative;isolation:isolate;
  transition:transform .42s var(--ac-ease),
             box-shadow .42s var(--ac-ease),
             border-color .42s var(--ac-ease)}

/* a hairline that brightens from the reading edge on hover */
.ch-step::after,.ch-week::after,.ch-fin::after,.ch-plan::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:2px;background:var(--orange);border-radius:2px;
  transform:scaleY(0);transform-origin:top;z-index:2;
  transition:transform .5s var(--ac-ease)}
.ch-step:hover::after,.ch-week:hover::after,
.ch-fin:hover::after,.ch-plan:hover::after{transform:scaleY(1)}

/* a slow reflection crossing the surface */
.ch-step::before,.ch-week::before,.ch-fin::before,.ch-plan::before,
.ch-track::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(108deg,transparent 38%,
    rgba(255,255,255,.55) 50%,transparent 62%);
  opacity:0;transform:translate3d(-120%,0,0)}
html[data-theme=dark] .ch-step::before,html[data-theme=dark] .ch-week::before,
html[data-theme=dark] .ch-fin::before,html[data-theme=dark] .ch-plan::before,
html[data-theme=dark] .ch-track::before{
  background:linear-gradient(108deg,transparent 38%,
    rgba(255,255,255,.09) 50%,transparent 62%)}
.ch-step:hover::before,.ch-week:hover::before,.ch-fin:hover::before,
.ch-plan:hover::before,.ch-track:hover::before{
  opacity:1;animation:acSweep .85s var(--ac-ease)}
@keyframes acSweep{to{transform:translate3d(120%,0,0)}}

.ch-step:hover,.ch-week:hover,.ch-fin:hover,.ch-plan:hover{
  transform:translate3d(0,-7px,0);
  box-shadow:0 30px 62px -32px rgba(0,0,0,.34)}
html[data-theme=dark] .ch-step:hover,html[data-theme=dark] .ch-week:hover,
html[data-theme=dark] .ch-fin:hover,html[data-theme=dark] .ch-plan:hover{
  box-shadow:0 32px 66px -30px rgba(0,0,0,.72)}
.ch-step > *,.ch-week > *,.ch-fin > *,.ch-plan > *,.ch-track > *{
  position:relative;z-index:3}

/* ── numbers carry the sense of progress ───────────────────────────── */
.ch-step .ch-n,.ch-track .ch-tn{
  transition:transform .5s var(--ac-spring),color .4s var(--ac-ease)}
.ch-step:hover .ch-n,.ch-track:hover .ch-tn{
  transform:scale(1.18) translate3d(0,-2px,0);color:var(--orange-text)}

/* ── week chips respond as a group ─────────────────────────────────── */
.ch-week:hover .ch-chip{transition:transform .4s var(--ac-spring)}
.ch-week:hover .ch-chip.boss{transform:scale(1.12)}

/* ── the journey: each week card sits a little deeper than the last ── */
.ch-weeks > :nth-child(2){transform:translate3d(0,10px,0)}
.ch-weeks > :nth-child(3){transform:translate3d(0,20px,0)}
.ch-weeks > :nth-child(2):hover{transform:translate3d(0,3px,0)}
.ch-weeks > :nth-child(3):hover{transform:translate3d(0,13px,0)}
@media(max-width:860px){
  .ch-weeks > :nth-child(2),.ch-weeks > :nth-child(3){transform:none}
  .ch-weeks > :nth-child(2):hover,.ch-weeks > :nth-child(3):hover{
    transform:translate3d(0,-7px,0)}
}

/* ── buttons: press and a light that follows ───────────────────────── */
.ch-intro .btn,.ch-grad .btn,.ch-end .btn,#ch-pricing .btn{
  transition:transform .2s var(--ac-ease),box-shadow .35s var(--ac-ease)}
.ch-intro .btn:hover,.ch-grad .btn:hover,.ch-end .btn:hover,
#ch-pricing .btn:hover{transform:translate3d(0,-2.5px,0);
  box-shadow:0 18px 34px -18px rgba(239,94,30,.6)}
.ch-intro .btn:active,.ch-grad .btn:active,.ch-end .btn:active,
#ch-pricing .btn:active{transform:translate3d(0,1px,0);transition-duration:.07s}

/* ── FAQ rows open with weight ─────────────────────────────────────── */
.ch-q{padding-inline:14px;border-radius:var(--r-md);
  margin-inline:-14px}
.ch-q:hover{background:var(--paper-2)}
.ch-q[open]{background:var(--paper-2)}
.ch-q[open] p{animation:acFaq .5s var(--ac-ease)}
@keyframes acFaq{from{opacity:0;transform:translate3d(0,-6px,0)}
  to{opacity:1;transform:none}}

/* ── section rhythm: more air between the big moments ──────────────── */
#challenge,#ch-how,#ch-trail,#ch-tracks,#ch-finish,#ch-grad,
#ch-pricing,#ch-faq,#ch-gallery{padding-block:clamp(32px,3vw,46px)}
#ch-join{padding-block:clamp(40px,3.8vw,58px)}

@media(prefers-reduced-motion:reduce){
  .ch-step,.ch-week,.ch-track,.ch-fin,.ch-plan,.ch-q,
  .ch-step .ch-n,.ch-track .ch-tn{transition:none}
  .ch-step::before,.ch-week::before,.ch-fin::before,.ch-plan::before,
  .ch-track::before{display:none}
  .ch-step:hover,.ch-week:hover,.ch-fin:hover,.ch-plan:hover,
  .ch-weeks > :nth-child(2),.ch-weeks > :nth-child(3){transform:none}
  .ch-q[open] p{animation:none}
}

/* the hero sweep kept running under reduced-motion */
@media(prefers-reduced-motion:reduce){
  .hero-sweep{animation:none!important;opacity:0}
}

/* ═══ LOGIN: AN ENVIRONMENT AROUND THE PANEL ══════════════════════════
   The product panel carried the whole page; everything around it sat
   still. This adds atmosphere behind it — two soft lights drifting on
   long, unequal cycles, and a slow tonal wash — plus a little life to
   the form itself.

   All of it is transform and opacity on pseudo-elements behind the
   content, so nothing on top of them repaints.
   ═══════════════════════════════════════════════════════════════════ */
.auth{position:relative;isolation:isolate}
.auth::before,.auth::after{content:"";position:absolute;pointer-events:none;
  z-index:0;border-radius:50%;filter:none}
.auth::before{
  inline-size:min(62vw,760px);block-size:min(62vw,760px);
  inset-block-start:-22%;inset-inline-start:-16%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--orange) 5%,transparent),transparent 70%);
  animation:authDriftA 38s cubic-bezier(.42,.02,.58,.98) infinite alternate}
.auth::after{
  inline-size:min(50vw,600px);block-size:min(50vw,600px);
  inset-block-end:-18%;inset-inline-end:-12%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--neon) 4%,transparent),transparent 70%);
  animation:authDriftB 53s cubic-bezier(.42,.02,.58,.98) infinite alternate}
@keyframes authDriftA{
  to{transform:translate3d(9%,7%,0) scale(1.14)}}
@keyframes authDriftB{
  to{transform:translate3d(-8%,-6%,0) scale(1.1)}}
html[data-theme=dark] .auth::before{
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--orange) 16%,transparent),transparent 72%)}
html[data-theme=dark] .auth::after{
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--neon) 13%,transparent),transparent 72%)}
.auth > *{position:relative;z-index:1}

/* the panel breathes very slightly, so it never reads as a screenshot */
.auth-art{animation:authFloat 14s ease-in-out infinite}
@keyframes authFloat{50%{transform:translate3d(0,-7px,0)}}

/* form fields answer the pointer and the caret */
.auth-form input{transition:border-color .3s var(--ac-ease,ease),
  box-shadow .3s var(--ac-ease,ease),transform .3s var(--ac-ease,ease)}
.auth-form input:hover{border-color:var(--o-32)}
.auth-form input:focus-visible{box-shadow:0 0 0 4px var(--o-16);
  transform:translate3d(0,-1px,0)}
.auth-form .btn{transition:transform .2s ease,box-shadow .35s ease}
.auth-form .btn:hover{transform:translate3d(0,-2px,0);
  box-shadow:0 18px 34px -18px rgba(239,94,30,.55)}
.auth-form .btn:active{transform:translate3d(0,1px,0);transition-duration:.07s}
.auth-row label{transition:color .25s ease}

@media(prefers-reduced-motion:reduce){
  .auth::before,.auth::after,.auth-art{animation:none}
  .auth-form input:focus-visible,.auth-form .btn:hover,
  .auth-form .btn:active{transform:none}
}

/* ═══ LOGIN FORM: the side that was standing still ════════════════════
   The panel beside it already carries the ambient field and the product
   animation; the form itself had no feedback at all. Focus, hover and
   press now respond, and the fields arrive in sequence with the panel.

   Transform, opacity and box-shadow only — no layout, colour or copy
   change.
   ═══════════════════════════════════════════════════════════════════ */
.auth-inner label,.auth-inner .field,.auth-inner input,.auth-inner .btn,
.auth-inner .auth-switch,.auth-inner .auth-alt{
  transition:border-color .32s var(--ac-ease,cubic-bezier(.22,1.04,.3,1)),
             box-shadow .32s var(--ac-ease,cubic-bezier(.22,1.04,.3,1)),
             transform .28s var(--ac-ease,cubic-bezier(.22,1.04,.3,1)),
             background-color .32s var(--ac-ease,cubic-bezier(.22,1.04,.3,1))}

/* a field that lifts very slightly and rings when it takes focus */
.auth-inner input:hover{border-color:var(--o-32)}
.auth-inner input:focus,.auth-inner input:focus-visible{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 4px var(--o-16),0 10px 26px -18px rgba(239,94,30,.6);
  transform:translate3d(0,-1px,0)}

/* the label follows its field into focus */
.auth-inner .field:focus-within label,
.auth-inner label:has(+ input:focus){color:var(--orange-text)}

/* buttons: press, and a light that crosses the primary one */
.auth-inner .btn{position:relative;overflow:hidden}
.auth-inner .btn:hover{transform:translate3d(0,-2px,0)}
.auth-inner .btn:active{transform:translate3d(0,1px,0);transition-duration:.07s}
.auth-inner .btn-primary::after{content:"";position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,
    rgba(255,255,255,.3) 50%,transparent 60%);
  transform:translate3d(-130%,0,0)}
.auth-inner .btn-primary:hover::after{animation:authSheen .78s var(--ac-ease,ease)}
@keyframes authSheen{to{transform:translate3d(130%,0,0)}}

/* the role switch slides rather than jumps */
.auth-inner .auth-switch button{transition:color .3s ease,transform .3s ease}
.auth-inner .auth-switch button:hover{transform:translate3d(0,-1px,0)}

/* the form arrives in sequence alongside the panel */
.auth-inner > *{animation:authRise .78s cubic-bezier(.2,1.04,.3,1) backwards}
.auth-inner > :nth-child(1){animation-delay:.08s}
.auth-inner > :nth-child(2){animation-delay:.16s}
.auth-inner > :nth-child(3){animation-delay:.24s}
.auth-inner > :nth-child(4){animation-delay:.32s}
.auth-inner > :nth-child(5){animation-delay:.4s}
.auth-inner > :nth-child(6){animation-delay:.48s}
.auth-inner > :nth-child(7){animation-delay:.56s}
@keyframes authRise{
  from{opacity:0;transform:translate3d(0,20px,0)}
  to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .auth-inner > *{animation:none}
  .auth-inner input:focus,.auth-inner .btn:hover,.auth-inner .btn:active,
  .auth-inner .auth-switch button:hover{transform:none}
  .auth-inner .btn-primary:hover::after{animation:none}
}

/* ── SECTION RHYTHM ───────────────────────────────────────────────────
   Neighbouring sections were each padding 101px top and bottom, so more
   than 200px of empty space sat between them on a laptop. Brought down
   across the site; the value still scales with the viewport.
   ─────────────────────────────────────────────────────────────────── */
@media(min-width:1024px){
  main > .sec{padding-block:clamp(30px,2.6vw,40px)}
  /* where two padded sections meet, the gap is the sum of both — so the
     upper half of the second one comes down further */
  main > .sec + .sec{padding-block-start:clamp(24px,2.1vw,32px)}
}

/* ═══ CENTRED HERO — Academy and For Creators ═════════════════════════
   Applied through .phero-centred, which only those two sections carry.
   For Brands and Resources keep the left-aligned composition exactly as
   they are.

   Same tokens as the rest of the site: the brand orange, the existing
   radii, the shared easing. Nothing new enters the palette — the glow
   is built from --o-16 and --o-08, and the accent from --orange.
   ═══════════════════════════════════════════════════════════════════ */
.phero-centred{position:relative;overflow:hidden;isolation:isolate;
  text-align:center}
.phero-centred .shell{position:relative;z-index:2}
.phero-centred .shell > *{margin-inline:auto}
.phero-centred h1{max-inline-size:19ch;margin-inline:auto;
  font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.04;letter-spacing:-.032em}
.phero-centred .lede{max-inline-size:60ch;margin-inline:auto}
.phero-centred .btn-row{justify-content:center}
.phero-centred .eyebrow{display:inline-block}
.phero-centred .chips{justify-content:center}

/* ── the environment: a warm field behind the words ─────────────────── */
.phero-centred::before{content:"";position:absolute;z-index:0;
  inline-size:min(120vw,1180px);aspect-ratio:1.4;
  inset-block-start:-42%;inset-inline-start:50%;
  translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,var(--o-16),var(--o-08) 42%,transparent 72%);
  animation:phGlow 26s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  will-change:transform}
@keyframes phGlow{to{transform:translate3d(0,4%,0) scale(1.12)}}

/* a second, cooler field low and to one side, for depth */
.phero-centred::after{content:"";position:absolute;z-index:0;
  inline-size:min(70vw,620px);aspect-ratio:1;
  inset-block-end:-30%;inset-inline-end:-10%;border-radius:50%;
  background:radial-gradient(closest-side,var(--n-06),transparent 70%);
  animation:phGlow2 34s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  will-change:transform}
@keyframes phGlow2{to{transform:translate3d(-8%,-6%,0) scale(1.16)}}

/* a hairline that draws under the label, tying it to the brand rule */
.phero-centred .eyebrow{position:relative}
.phero-centred .eyebrow::after{content:"";position:absolute;
  inset-block-end:-7px;inset-inline-start:50%;translate:-50% 0;
  block-size:2px;inline-size:0;border-radius:2px;background:var(--orange);
  animation:phRule .8s cubic-bezier(.3,1,.4,1) .5s forwards}
@keyframes phRule{to{inline-size:64%}}

/* ── the headline arrives out of softness ──────────────────────────── */
.phero-centred h1{animation:phHead 1.25s cubic-bezier(.16,1.02,.24,1) backwards;
  animation-delay:.22s}
@keyframes phHead{
  from{opacity:0;filter:blur(14px);transform:translate3d(0,42px,0) scale(.975)}
  60%{filter:blur(0)}
  to{opacity:1;filter:blur(0);transform:none}}
.phero-centred h1 em,.phero-centred h1 .hl{display:inline-block;
  animation:phAccent 1.1s cubic-bezier(.2,1.08,.3,1) .58s backwards}
@keyframes phAccent{
  from{opacity:0;filter:blur(9px);transform:translate3d(0,18px,0)}
  to{opacity:1;filter:blur(0);transform:none}}

.phero-centred .eyebrow{animation:phFade .85s var(--ease-out) .06s backwards}
.phero-centred .lede{animation:phFade 1s var(--ease-out) .52s backwards}
.phero-centred .chips{animation:phFade 1s var(--ease-out) .66s backwards}
.phero-centred .btn-row{animation:phRise 1s cubic-bezier(.3,1.2,.4,1) .78s backwards}
.phero-centred .phero-note{animation:phFade 1s var(--ease-out) .9s backwards}
@keyframes phFade{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes phRise{from{opacity:0;transform:translate3d(0,24px,0) scale(.95)}to{opacity:1;transform:none}}

/* ── buttons: a lift with the brand glow underneath ────────────────── */
.phero-centred .btn{transition:transform .26s cubic-bezier(.22,1.04,.3,1),
  box-shadow .34s cubic-bezier(.22,1.04,.3,1)}
.phero-centred .btn-primary:hover{transform:translate3d(0,-3px,0);
  box-shadow:0 20px 38px -18px rgba(239,94,30,.62)}
.phero-centred .btn-line:hover{transform:translate3d(0,-3px,0);
  box-shadow:0 16px 32px -20px rgba(0,0,0,.34)}
.phero-centred .btn:active{transform:translate3d(0,1px,0);transition-duration:.08s}

/* ── mobile: recomposed, not shrunk ────────────────────────────────── */
@media(max-width:700px){
  .phero-centred h1{max-inline-size:none;font-size:clamp(1.95rem,8.6vw,2.7rem);
    line-height:1.1}
  .phero-centred .lede{max-inline-size:44ch}
  .phero-centred .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .phero-centred .btn{justify-content:center}
  .phero-centred::after{display:none}
  .phero-centred::before{inset-block-start:-30%;inline-size:150vw}
}

@media(prefers-reduced-motion:reduce){
  .phero-centred::before,.phero-centred::after,
  .phero-centred .eyebrow::after,.phero-centred h1,
  .phero-centred h1 em,.phero-centred h1 .hl,
  .phero-centred .eyebrow,.phero-centred .lede,.phero-centred .chips,
  .phero-centred .btn-row,.phero-centred .phero-note{animation:none!important}
  .phero-centred .eyebrow::after{inline-size:64%}
  .phero-centred .btn:hover{transform:none}
}

/* ── creators headline: two lines ─────────────────────────────────────
   Wider measure than the shared cap so the sentence breaks in two
   rather than three; the size comes down a touch so both heroes still
   feel like a matched pair.
   ─────────────────────────────────────────────────────────────────── */
/* CONSISTENCY — the size and leading that used to be set here are gone.
   Measured across every page at 1440px, the inner-page hero was 62.4px
   on brands/resources/case-studies/integrations/about/pricing and 67.2px
   on academy, but 48.8px here: a quarter smaller than its own sibling,
   on the page with the second-biggest headline on the site. It is the
   one size on the site that is not on the scale, which is the kind of
   thing a reviewer registers as "inconsistent" without being able to
   name what moved.

   Worse in Arabic: line-height:1.08 is a Latin value, and it beat
   html[lang=ar] .t-display's 1.22 on specificity, so the Arabic headline
   was set with Latin leading and came out cramped — Kufi needs the extra
   room for its ascenders.

   Dropping both lets this headline take the shared .phero-centred size
   and lets Arabic keep its own leading. The wider measure stays, because
   that is about where the sentence breaks, not how big it is — trimmed
   to 24ch since the type is now larger. */
.phero-centred.is-creators h1{max-inline-size:24ch}
@media(max-width:700px){
  .phero-centred.is-creators h1{max-inline-size:none}
}

/* ═══ CARD FAMILY ACROSS THE FOUR PAGES ═══════════════════════════════
   Brands, Creators, Academy and Resources each had their own card
   treatment, so the four read as four different sites. This gives them
   one shared behaviour — the same lift, the same edge that catches
   light, the same accent — while each page keeps its own colour turn.

   Every colour is an existing token. The home page is deliberately
   excluded: its cards are left exactly as they are.
   ═══════════════════════════════════════════════════════════════════ */
.way,.panel,.fpanel,.guide,.rcard,.ch-track{
  position:relative;isolation:isolate;
  transition:transform .4s cubic-bezier(.22,1.04,.3,1),
             box-shadow .4s cubic-bezier(.22,1.04,.3,1),
             border-color .4s cubic-bezier(.22,1.04,.3,1)}

/* the edge that lights up, reading from the text side */
.way::after,.panel::after,.fpanel::after,.guide::after,
.rcard::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:2px;border-radius:2px;background:var(--orange);
  transform:scaleY(0);transform-origin:top;z-index:2;
  transition:transform .46s cubic-bezier(.22,1.04,.3,1)}
.way:hover::after,.panel:hover::after,.fpanel:hover::after,
.guide:hover::after,.rcard:hover::after{transform:scaleY(1)}

/* a reflection crossing the surface once, on entry */
.way::before,.panel::before,.guide::before,.rcard::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(108deg,transparent 38%,
    rgba(255,255,255,.5) 50%,transparent 62%);
  opacity:0;transform:translate3d(-120%,0,0)}
html[data-theme=dark] .way::before,html[data-theme=dark] .panel::before,
html[data-theme=dark] .guide::before,html[data-theme=dark] .rcard::before{
  background:linear-gradient(108deg,transparent 38%,
    rgba(255,255,255,.085) 50%,transparent 62%)}
.way:hover::before,.panel:hover::before,.guide:hover::before,
.rcard:hover::before{
  opacity:1;animation:cardSweep .82s cubic-bezier(.22,1.04,.3,1)}
@keyframes cardSweep{to{transform:translate3d(120%,0,0)}}

.way:hover,.panel:hover,.guide:hover,.rcard:hover{
  transform:translate3d(0,-6px,0);border-color:var(--o-32);
  box-shadow:0 28px 58px -30px rgba(0,0,0,.3)}
html[data-theme=dark] .way:hover,html[data-theme=dark] .panel:hover,
html[data-theme=dark] .guide:hover,html[data-theme=dark] .rcard:hover{
  box-shadow:0 30px 62px -28px rgba(0,0,0,.7)}
.way > *,.panel > *,.guide > *,.rcard > *{position:relative;z-index:3}

@media(prefers-reduced-motion:reduce){
  .way,.panel,.fpanel,.guide,.rcard,.ch-track{transition:none}
  .way::before,.panel::before,.guide::before,.rcard::before{display:none}
  .way:hover,.panel:hover,.guide:hover,.rcard:hover{transform:none}
}

html[data-theme=dark] .ch-fin.tone-2 .t-card{color:inherit}

/* ── dark mode keeps plain card surfaces ──────────────────────────────
   The light-mode tints were still applying in dark, where a black
   heading landed on them and measured 1:1. Cleared outright rather than
   relying on a :not() that other rules were outranking.
   ─────────────────────────────────────────────────────────────────── */
html[data-theme=dark] .way,
html[data-theme=dark] .guide,
html[data-theme=dark] .rcard,
html[data-theme=dark] .ch-fin{
  background:var(--paper)!important;border-color:var(--rule)!important}

/* ── card headings follow the theme ───────────────────────────────────
   .t-card and .t-sub carried no colour of their own, so inside some
   cards they inherited black and vanished in dark mode. Measured: four
   headings on For Creators and two on Academy at 1:1. --text is the
   token that flips per theme.
   ─────────────────────────────────────────────────────────────────── */
.way .t-card,.way h3,
.guide h3,.rcard h3,
.ch-fin .t-card,.ch-step .t-card,.ch-week .t-card,
.ch-track .t-card,.ch-plan .t-card{color:var(--text)}

/* ── the last of the card contrast ────────────────────────────────────
   Three remaining cases, all measured:
   • .ch-fin headings still inheriting black in dark (1:1)
   • .tk-row heading sitting on a tinted surface (1.1:1)
   • the small grey lines under a track and a price at 3.3:1 light /
     4.2:1 dark — readable-ish, but under the 4.5 bar
   ─────────────────────────────────────────────────────────────────── */
.ch-fin .t-card,.ch-fin h3{color:var(--text)!important}
.ch-best,.ch-price-n{color:var(--text-2)}
html[data-theme=dark] .ch-best,
html[data-theme=dark] .ch-price-n{color:#A8ACB4}
html:not([data-theme=dark]) .ch-best,
html:not([data-theme=dark]) .ch-price-n{color:#6B6F77}
/* and no tint under a card whose text is theme-coloured */
/* a page-level rule was still painting the third track card light in
   dark mode, leaving near-white text on a near-white surface */
html[data-theme=dark] .ch-fin{background:var(--paper-2)!important}

/* the calculator's footnote was rendering at 11.84px on a phone */
@media(max-width:600px){
  .roi-note{font-size:13px;line-height:1.5}
}

/* ═══ AMBIENT BACKGROUND SYSTEM ═══════════════════════════════════════
   A global atmospheric layer: orbital rings, drifting light streaks and
   a fine dust field, over the colour clouds already here. It lives in
   the shared shell, so every page gets it from one place.

   Built entirely from existing tokens — --orange, --neon and the paper
   scale. No new colour enters. Light and dark are composed separately
   rather than inverted: light reads as warm sunlight through glass,
   dark as deep space with a low glow.

   Everything sits inside .aurora, which is fixed at z-index -1 with
   pointer-events:none, so content is always above it and nothing here
   can ever intercept a click.
   ═══════════════════════════════════════════════════════════════════ */
.aurora{--amb-ring:rgba(10,10,12,.055);--amb-glow:var(--o-08);
  --amb-dust:rgba(10,10,12,.3);--amb-streak:rgba(255,255,255,.5)}
html[data-theme=dark] .aurora{--amb-ring:rgba(255,255,255,.06);
  --amb-glow:rgba(239,94,30,.1);--amb-dust:rgba(255,255,255,.42);
  --amb-streak:rgba(255,255,255,.07)}

/* ── orbital rings ──────────────────────────────────────────────────
   Four, deliberately unequal: different sizes, offsets and periods, two
   of them partly outside the frame so the composition reads as a
   fragment of something larger rather than circles placed in the middle.
   ─────────────────────────────────────────────────────────────────── */
.amb-ring{position:absolute;display:block;border-radius:50%;
  border:1px solid var(--amb-ring);pointer-events:none;
  will-change:transform,opacity}
/* the leading edge, drawn into the border itself rather than as a
   second masked layer per ring */
.amb-ring.r1,.amb-ring.r3{border-block-start-color:var(--amb-glow)}
.amb-ring.r2{border-inline-start-color:var(--amb-glow)}

.amb-ring.r1{inline-size:min(62vmax,760px);aspect-ratio:1;
  inset-block-start:-26%;inset-inline-end:-18%;
  animation:ambSpin 210s linear infinite,ambBreath 41s ease-in-out infinite alternate}
.amb-ring.r2{inline-size:min(42vmax,520px);aspect-ratio:1;
  inset-block-start:34%;inset-inline-start:-16%;
  animation:ambSpinRev 170s linear infinite,ambBreath 53s ease-in-out infinite alternate}
.amb-ring.r3{inline-size:min(26vmax,320px);aspect-ratio:1;
  inset-block-end:-8%;inset-inline-start:38%;opacity:.7;
  animation:ambSpin 140s linear infinite,ambBreath 33s ease-in-out infinite alternate}
.amb-ring.r4{inline-size:min(22vmax,280px);aspect-ratio:1;
  inset-block-start:12%;inset-inline-start:26%;opacity:.5;
  animation:ambSpinRev 61s linear infinite}
@keyframes ambSpin{to{transform:rotate(360deg)}}
@keyframes ambSpinRev{to{transform:rotate(-360deg)}}
@keyframes ambBreath{to{opacity:.35}}

/* ── light streaks ──────────────────────────────────────────────────
   Wide, barely-there horizontal passes on long, unequal cycles, so they
   read as something crossing far behind rather than a repeating swipe.
   ─────────────────────────────────────────────────────────────────── */
.amb-streak{position:absolute;display:block;block-size:1px;
  inline-size:44vw;inset-inline-start:-46vw;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--amb-streak),transparent);
  opacity:0;will-change:transform,opacity}
.amb-streak.k1{inset-block-start:23%;animation:ambStreak 37s cubic-bezier(.4,0,.5,1) infinite}
.amb-streak.k2{inset-block-start:68%;inline-size:32vw;
  animation:ambStreak 59s cubic-bezier(.4,0,.5,1) infinite 14s}
@keyframes ambStreak{
  0%{transform:translate3d(0,0,0);opacity:0}
  9%{opacity:.85} 62%{opacity:.7}
  100%{transform:translate3d(212vw,0,0);opacity:0}}

/* ── dust ───────────────────────────────────────────────────────────
   One element, not a hundred nodes: a handful of points painted as
   radial gradients and drifted as a single layer.
   ─────────────────────────────────────────────────────────────────── */
.amb-dust{position:absolute;inset:0;display:block;pointer-events:none;
  opacity:.5;will-change:transform;
  background-image:
    radial-gradient(circle at 14% 22%,var(--amb-dust) 0,transparent 1.6px),
    radial-gradient(circle at 83% 46%,var(--amb-dust) 0,transparent 1.7px),
    radial-gradient(circle at 32% 63%,var(--amb-dust) 0,transparent 1.3px),
    radial-gradient(circle at 73% 81%,var(--amb-dust) 0,transparent 1.5px);
  animation:ambDust 88s ease-in-out infinite alternate}
@keyframes ambDust{to{transform:translate3d(2.4vw,-3.2vh,0)}}

/* ── responsive art direction ───────────────────────────────────────
   Not a scaled-down desktop: the tablet drops the smallest ring and one
   streak; the phone keeps a single large ring hanging off the corner,
   a softer dust field and no streaks at all, so nothing ever travels
   across a line of text on a narrow screen.
   ─────────────────────────────────────────────────────────────────── */
.amb-ring.r4{display:none}
@media(min-width:1400px){.amb-ring.r4{display:block}}
@media(max-width:1024px){
  .amb-ring.r3{display:none}
  .amb-streak.k2{display:none}
  .amb-dust{opacity:.38}
}
@media(max-width:700px){
  .amb-ring.r2,.amb-ring.r3{display:none}
  .amb-streak{display:none}
  .amb-ring.r1{inline-size:150vw;inset-block-start:-16%;inset-inline-end:-58%}
  .amb-dust{opacity:.3;inset:-6%}
}

@media(prefers-reduced-motion:reduce){
  .amb-ring,.amb-streak,.amb-dust{animation:none!important}
  .amb-streak{display:none}
}

/* ── home page: clouds only ───────────────────────────────────────────
   The home hero is a full-viewport video wall, so the orbital layer is
   invisible there and still cost 17ms per frame over the page's own
   baseline. It is dropped on that page and kept everywhere else.
   ─────────────────────────────────────────────────────────────────── */
body[data-page=home] .amb-ring,
body[data-page=home] .amb-streak,
body[data-page=home] .amb-dust{display:none}

/* ═══ INTRO SCREEN ════════════════════════════════════════════════════
   Full-screen welcome shown on a fresh entry and on every refresh (not
   when moving between pages of the site). The inline boot script in
   <head> decides before first paint and sets html.ldr-on / .ldr-off.

   Composition follows the reference: a dense hand-drawn doodle wallpaper
   edge to edge, logo and language pill in the top corners, and one
   centred focal column (tile, eyebrow, headline, subtitle, ghost
   percentage over the live counter, slim bar, status line).

   Three colours only: the ink/paper foundation, orange for the headline
   and tile, neon for the live dot, the underline and the bar's head.
   ═══════════════════════════════════════════════════════════════════ */
html.ldr-off .ldr{display:none}
html.ldr-on,html.ldr-on body{overflow:hidden}

.ldr{--l-bg:#0B0B0D;--l-fg:#F5F5F2;--l-mute:rgba(245,245,242,.66);
  --l-faint:rgba(245,245,242,.48);--l-ink:rgba(255,255,255,.07);
  --l-line:rgba(255,255,255,.14);--l-track:rgba(255,255,255,.1);
  --l-hl:var(--neon);--l-tile:rgba(255,255,255,.035);--l-t:720px;
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:var(--l-bg);color:var(--l-fg);overflow:hidden;isolation:isolate;
  /* failsafe: never stays up if the main script cannot run */
  animation:ldrSafety .6s ease 8s forwards}
@keyframes ldrSafety{to{opacity:0;visibility:hidden}}

/* ── the doodle wallpaper ── */
.ldr-doodle{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ldr-doodle::before{content:"";position:absolute;inset:0;
  background:var(--l-ink);
  -webkit-mask:var(--doodle-loader) 0 0/var(--l-t) var(--l-t) repeat;
          mask:var(--doodle-loader) 0 0/var(--l-t) var(--l-t) repeat;
}

/* a low warm glow behind the focal column and a soft edge vignette */
.ldr-veil{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(38% 34% at 50% 44%,color-mix(in srgb,var(--orange) 10%,transparent),transparent 72%),
    radial-gradient(130% 100% at 50% 50%,transparent 58%,var(--l-bg) 100%)}

/* ── top corners ── */
.ldr-top{position:absolute;inset-block-start:0;inset-inline:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) clamp(18px,2.8vw,40px)}
.ldr-logo{display:block;line-height:0}
.ldr-logo img{block-size:clamp(22px,2vw,28px);inline-size:auto}
.ldr-logo .l-light{display:none}
.ldr-logo .l-dark{display:block}
.ldr-lang{display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:100px;border:1px solid var(--l-line);
  background:color-mix(in srgb,var(--l-bg) 70%,transparent);
  color:var(--l-fg);font-weight:600;font-size:.84rem;line-height:1;text-decoration:none;
  transition:border-color .25s ease,background-color .25s ease}
.ldr-lang:hover{border-color:color-mix(in srgb,var(--orange) 55%,transparent)}
.ldr-lang:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.ldr-lang[lang=ar]{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif}
.ldr-lang[lang=en]{font-family:Inter,"Inter Tight",system-ui,sans-serif}

/* ── focal column ── */
.ldr-mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding-inline:24px;max-inline-size:760px;
  transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.ldr-mid > *{margin:0;animation:ldrUp .9s cubic-bezier(.22,1.02,.3,1) backwards}
.ldr-mid > :nth-child(1){animation-delay:.05s}
.ldr-mid > :nth-child(2){animation-delay:.16s}
.ldr-mid > :nth-child(3){animation-delay:.26s}
.ldr-mid > :nth-child(4){animation-delay:.36s}
.ldr-mid > :nth-child(5){animation-delay:.46s}
.ldr-mid > :nth-child(6){animation-delay:.54s}
.ldr-mid > :nth-child(7){animation-delay:.62s}
@keyframes ldrUp{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}

.ldr-tile{inline-size:64px;block-size:64px;border-radius:18px;display:grid;place-items:center;
  color:var(--orange);background:var(--l-tile);
  border:1px solid color-mix(in srgb,var(--orange) 46%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--orange) 5%,transparent),
             0 0 42px -6px color-mix(in srgb,var(--orange) 60%,transparent)}
.ldr-tile svg{animation:ldrPulse 2.8s ease-in-out infinite}
@keyframes ldrPulse{50%{transform:scale(.9) rotate(-8deg);opacity:.72}}

.ldr-eyebrow{margin-block-start:22px!important;display:block;text-wrap:balance;
  font-size:.8rem;font-weight:500;letter-spacing:.02em;line-height:1.5;color:var(--l-faint)}
.ldr-eyebrow i{display:inline-block;vertical-align:middle;margin-inline-end:9px;
  margin-block-start:-2px;inline-size:6px;block-size:6px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 0 0 color-mix(in srgb,var(--neon) 60%,transparent);
  animation:ldrLive 1.8s ease-out infinite}
@keyframes ldrLive{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.ldr-head{margin-block-start:14px!important;color:var(--orange);
  font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.1rem,4.9vw,4rem);line-height:1.06;letter-spacing:-.035em;
  text-wrap:balance}
html[lang=ar] .ldr-head{font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;
  letter-spacing:0;line-height:1.4;font-size:clamp(1.9rem,4.3vw,3.5rem)}
.ldr-hl{font-style:normal;position:relative;display:inline-block;white-space:nowrap}
.ldr-swash{position:absolute;inset-inline:-2%;inset-block-end:-.2em;inline-size:104%;
  block-size:.34em;overflow:visible;fill:none;stroke:var(--l-hl);stroke-linecap:round;
  stroke-width:3.2;vector-effect:non-scaling-stroke}
.ldr-swash path{stroke-dasharray:240;stroke-dashoffset:240;
  animation:ldrDraw .9s cubic-bezier(.6,0,.2,1) .95s forwards}
.ldr-swash path + path{stroke-width:2;opacity:.7;animation-delay:1.15s}
html[lang=ar] .ldr-swash{inset-block-end:-.05em}
@keyframes ldrDraw{to{stroke-dashoffset:0}}

.ldr-sub{margin-block-start:16px!important;max-inline-size:34em;color:var(--l-mute);
  font-size:clamp(1rem,1.25vw,1.13rem);line-height:1.62;text-wrap:balance}

.ldr-count{position:relative;display:grid;place-items:end center;inline-size:100%;
  block-size:clamp(104px,11.5vw,150px);margin-block-start:clamp(22px,3vw,40px)!important}
.ldr-ghost::after{content:attr(data-v)}
.ldr-ghost{position:absolute;inset-inline:0;inset-block-start:0;text-align:center;
  font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:800;
  font-size:clamp(96px,11.5vw,156px);line-height:.86;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.2px var(--l-fg);opacity:.1;
  font-variant-numeric:tabular-nums;direction:ltr;user-select:none}
.ldr-num{position:relative;font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-weight:700;font-size:clamp(1.4rem,1.9vw,1.75rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;direction:ltr;color:var(--l-fg)}

.ldr-track{position:relative;inline-size:min(280px,70vw);block-size:3px;border-radius:100px;
  background:var(--l-track);margin-block-start:14px!important}
.ldr-track i{position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;border-radius:inherit;
  transform:scaleX(0);transform-origin:left center;will-change:transform;
  background:linear-gradient(90deg,var(--orange) 0%,#FF8A4C 55%,var(--neon) 100%)}
.ldr-track b{position:absolute;inset-block-start:50%;left:0;inline-size:7px;block-size:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--neon);will-change:transform;
  box-shadow:0 0 12px 3px color-mix(in srgb,var(--neon) 55%,transparent)}
html[dir=rtl] .ldr-track i{transform-origin:right center}
html[dir=rtl] .ldr-track b{left:auto;right:0;margin:-3.5px -3.5px 0 0}
html[dir=rtl] .ldr-track i{background:linear-gradient(270deg,var(--orange) 0%,#FF8A4C 55%,var(--neon) 100%)}

.ldr-status{margin-block-start:16px!important;min-block-size:1.5em;font-size:.84rem;
  color:var(--l-faint);transition:opacity .32s ease,transform .32s ease}
.ldr-status.is-fade{opacity:0;transform:translate3d(0,4px,0)}

/* ── exit: the column lifts away, then the whole screen dissolves ── */
.ldr.is-out{pointer-events:none;opacity:0;
  transition:opacity .7s cubic-bezier(.4,0,.2,1) .22s,visibility 0s linear .95s;visibility:hidden}
.ldr.is-out .ldr-mid{opacity:0;transform:translate3d(0,-18px,0) scale(.985)}
.ldr.is-out .ldr-doodle{transform:scale(1.06);transition:transform .9s cubic-bezier(.4,0,.2,1)}

@media(max-width:600px){
  .ldr{--l-t:520px}
  .ldr-tile{inline-size:56px;block-size:56px;border-radius:16px}
  .ldr-eyebrow{font-size:.74rem;margin-block-start:18px!important}
  .ldr-lang{padding:8px 13px;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .ldr-tile svg,.ldr-eyebrow i{animation:none}
  .ldr-mid > *{animation:none}
  .ldr-swash path{animation:none;stroke-dashoffset:0}
  .ldr.is-out,.ldr.is-out .ldr-mid,.ldr.is-out .ldr-doodle{transition:opacity .3s linear;transform:none}
}

/* ═══ HERO DOODLE: the four menu pages ════════════════════════════════
   The same hand-drawn wallpaper behind the hero of For brands, For
   creators, Academy and Resources, each with its own icon set. It is a
   new layer under the existing hero content; nothing in the hero moves.
   The layer fades out at the bottom so the hero hands over to the next
   section cleanly, and eases off behind the headline so text stays crisp.
   ═══════════════════════════════════════════════════════════════════ */
.hero-doodle{--hd-ink:rgba(10,10,12,.085);--hd-t:720px;--hd-at:30% 42%;
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%),
    radial-gradient(46% 42% at var(--hd-at),rgba(0,0,0,.55),#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%),
    radial-gradient(46% 42% at var(--hd-at),rgba(0,0,0,.55),#000 100%);
  mask-composite:intersect}
html[dir=rtl] .hero-doodle{--hd-at:70% 42%}
.phero-centred .hero-doodle{--hd-at:50% 42%}
html[data-theme=dark] .hero-doodle{--hd-ink:rgba(255,255,255,.08)}
.hero-doodle::before{content:"";position:absolute;inset:0;
  background:var(--hd-ink);
  -webkit-mask:var(--hd-tile) 0 0/var(--hd-t) var(--hd-t) repeat;
          mask:var(--hd-tile) 0 0/var(--hd-t) var(--hd-t) repeat;
}
body[data-page=brands] .hero-doodle{--hd-tile:var(--doodle-brands)}
body[data-page=creators] .hero-doodle{--hd-tile:var(--doodle-creators)}
body[data-page=academy] .hero-doodle{--hd-tile:var(--doodle-academy)}
body[data-page=resources] .hero-doodle{--hd-tile:var(--doodle-resources)}
.phero .shell{position:relative;z-index:2}
@media(max-width:700px){
  .hero-doodle{--hd-t:520px;--hd-at:50% 34%}
}

/* ═══ COLOUR CARDS ════════════════════════════════════════════════════
   Selected card sets now alternate: a solid brand-orange card, a plain
   card, a solid neon card, a plain card — so a row reads with rhythm
   instead of as a run of identical white boxes. Exact brand values only:
   #EF5E1E and #D5FF2A. Text on both fills is ink (#0A0A0A): white on
   this orange measures 3.3:1, ink measures 6.4:1, and on neon ink is
   near 17:1, so every line stays readable in both themes.

   Each fill carries the same hand-drawn doodle texture as the heroes at
   10%, so the colour cards belong to the same world as the rest of the
   site. Plain cards are untouched, and every existing hover, reveal and
   marquee animation keeps running exactly as before.

   Colour is applied by re-pointing the tokens the card's children
   already use (--text, --text-2, --orange…), so nothing inside the
   cards had to be rewritten.
   ═══════════════════════════════════════════════════════════════════ */

/* which cards take which fill */
html[data-theme] .ch-fin.tone-1,
html[data-theme] .ch-steps > .ch-step:nth-child(4n+1),
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+1),
html[data-theme] .ways > .way:nth-child(4n+1),
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+2),
html[data-theme] .steps5 > .step5-card.s5-o,
html[data-theme] .pillars > .pillar:nth-child(4n+1){
  --card-fill:#EF5E1E;--card-glow:rgba(239,94,30,.55);--card-tex:var(--doodle-card)}

html[data-theme] .ch-fin.tone-2,
html[data-theme] .ch-steps > .ch-step:nth-child(4n+3),
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+2),
html[data-theme] .ways > .way:nth-child(4n+3),
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+3),
html[data-theme] .steps5 > .step5-card.s5-n,
html[data-theme] .pillars > .pillar:nth-child(4n+4){
  --card-fill:#D5FF2A;--card-glow:rgba(213,255,42,.5);--card-tex:var(--doodle-card)}

/* shared treatment for both fills */
html[data-theme] .ch-fin.tone-1,html[data-theme] .ch-fin.tone-2,
html[data-theme] .ch-steps > .ch-step:nth-child(odd),
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+1),
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+2),
html[data-theme] .ways > .way:nth-child(odd),
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+2),
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+3),
html[data-theme] .steps5 > .step5-card:is(.s5-o,.s5-n),
html[data-theme] .pillars > .pillar:nth-child(4n+1),
html[data-theme] .pillars > .pillar:nth-child(4n+4){
  --text:#0A0A0A;--text-2:rgba(10,10,10,.78);--text-3:rgba(10,10,10,.66);
  --on-ink:#0A0A0A;--on-ink-2:rgba(10,10,10,.78);
  --orange:#0A0A0A;--orange-text:#0A0A0A;--neon-text:#0A0A0A;--neon-deep:#0A0A0A;
  --rule:rgba(10,10,10,.16);--rule-ink:rgba(10,10,10,.16);
  color:#0A0A0A!important;
  background:var(--card-tex) 0 0/420px 420px repeat,var(--card-fill)!important;
  border-color:transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 22px 46px -30px var(--card-glow)}
html[data-theme] .ch-fin.tone-1:hover,html[data-theme] .ch-fin.tone-2:hover,
html[data-theme] .ch-steps > .ch-step:nth-child(odd):hover,
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+1):hover,
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+2):hover,
html[data-theme] .ways > .way:nth-child(odd):hover,
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+2):hover,
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+3):hover,
html[data-theme] .steps5 > .step5-card:is(.s5-o,.s5-n):hover,
html[data-theme] .pillars > .pillar:nth-child(4n+1):hover,
html[data-theme] .pillars > .pillar:nth-child(4n+4):hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 34px 64px -26px var(--card-glow)}

/* the third track: the ink card, inverted per theme */
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+3){
  --text:#F5F5F2;--text-2:rgba(245,245,242,.76);--text-3:rgba(245,245,242,.62);
  --orange-text:#D5FF2A;--rule:rgba(255,255,255,.14);
  color:#F5F5F2!important;border-color:transparent!important;
  background:var(--doodle-card-w) 0 0/420px 420px repeat,#0A0A0A!important;
  box-shadow:0 22px 46px -30px rgba(0,0,0,.6)}
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+3) .ch-tn{color:#D5FF2A}
html[data-theme=dark] .ch-tracks > .ch-track:nth-child(3n+3){
  --text:#0A0A0A;--text-2:rgba(10,10,10,.76);--text-3:rgba(10,10,10,.62);
  --orange-text:#EF5E1E;--rule:rgba(10,10,10,.14);color:#0A0A0A!important;
  background:var(--doodle-card) 0 0/420px 420px repeat,#F5F5F2!important}
html[data-theme=dark] .ch-tracks > .ch-track:nth-child(3n+3) .ch-tn{color:#0A0A0A}

/* small details inside the fills that carried their own colour */
html[data-theme] .ways > .way:nth-child(odd)::after,
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+1)::after,
html[data-theme] .ch-tracks > .ch-track:nth-child(3n+2)::after{background:#0A0A0A!important}
html[data-theme] .pillars > .pillar:nth-child(4n+1) .pillar-n,
html[data-theme] .pillars > .pillar:nth-child(4n+4) .pillar-n{color:#0A0A0A!important}
/* home steps: the number badge turns ink so it still reads on a fill */
html[data-theme] .steps5 > .step5-card:is(.s5-o,.s5-n) .step5-n{
  background:#0A0A0A!important;color:var(--card-fill)!important;box-shadow:none!important}
html[data-theme] .steps5 > .step5-card:is(.s5-o,.s5-n)::before{background:#0A0A0A!important;opacity:.85}
/* the sweep of light reads warmer on a fill */
html[data-theme] .ways > .way:nth-child(odd)::before,
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+2)::before,
html[data-theme] body[data-page=creators] .grid-3 > .panel:nth-child(3n+3)::before{
  background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%)!important}
html[data-theme] .ch-tracks > .ch-track .ch-best,
html[data-theme] .ch-tracks > .ch-track .ch-best b{color:var(--text-2)!important}
html[data-theme] .ch-tracks > .ch-track .ch-best b{color:var(--text)!important}

/* ═══ INTRO: night-only upgrades ══════════════════════════════════════
   Built for a steady 60fps: every moving part is transform or opacity on
   its own small layer, so nothing repaints while the intro runs.
   • a warm light that follows the pointer (drifts on its own when there
     is none, and stays still on touch screens)
   • a light circling the icon tile
   • the headline arriving word by word
   • the page behind is not painted until the intro starts to leave
   ═══════════════════════════════════════════════════════════════════ */
.ldr-spot{position:absolute;left:50%;top:46%;z-index:0;pointer-events:none;
  inline-size:min(90vmax,1100px);aspect-ratio:1;border-radius:50%;
  margin-left:calc(min(90vmax,1100px) / -2);margin-top:calc(min(90vmax,1100px) / -2);
  background:radial-gradient(circle,rgba(239,94,30,.16) 0%,rgba(239,94,30,.07) 26%,rgba(213,255,42,.025) 42%,transparent 60%);
  will-change:transform}

.ldr-tile{position:relative;overflow:hidden;isolation:isolate}
.ldr-tile::before{content:"";position:absolute;inset:-60%;z-index:-2;
  background:conic-gradient(from 0deg,transparent 0deg,#EF5E1E 60deg,#D5FF2A 110deg,transparent 160deg,transparent 360deg);
  animation:ldrOrbit 3.2s linear infinite;will-change:transform}
.ldr-tile::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:16.5px;
  background:#121214}
.ldr-tile svg{position:relative}
@keyframes ldrOrbit{to{transform:rotate(360deg)}}

.ldr-mid > .ldr-head{animation:none}
.ldr-head .w{display:inline-block;animation:ldrWord .9s cubic-bezier(.22,1.02,.3,1) backwards;
  animation-delay:calc(.25s + var(--i) * .08s)}
@keyframes ldrWord{from{opacity:0;transform:translate3d(0,.5em,0) scale(.96)}to{opacity:1;transform:none}}

/* ambient layers behind the intro are not painted until it leaves */
/* (main stays painted under the intro so the page's largest element is
   measured at first paint, not after the intro: better LCP for search) */
html.ldr-on:not(.ldr-leaving) .ftr,
html.ldr-on:not(.ldr-leaving) .aurora{visibility:hidden}

.ldr.is-out{transform:scale(1.02);
  transition:opacity .6s cubic-bezier(.4,0,.2,1) .25s,transform .85s cubic-bezier(.4,0,.2,1) .1s,visibility 0s linear .9s}

@media(prefers-reduced-motion:reduce){
  .ldr-spot,.ldr-tile::before{display:none}
  .ldr-head .w{animation:none}
  .ldr.is-out{transform:none;transition:opacity .3s linear}
}

/* ═══ HOME: "Five steps" in motion ════════════════════════════════════
   The five steps play as one pipeline: a light travels along the top of
   the row from step 1 to step 5, and each card rises and catches a sweep
   of light as the signal reaches it, then settles. One 6s loop.

   Everything moves on the compositor: the rise uses the individual
   `translate` property, so the existing hover lift (on `transform`) still
   works on top of it; the sweep and the travelling light are transform
   and opacity only. It starts once the section has revealed, pauses
   while the pointer is over the steps, and is off under reduced motion.
   ═══════════════════════════════════════════════════════════════════ */
.steps5{container-type:inline-size}
.steps5.is-in > .step5-card{animation:step5Rise 6s cubic-bezier(.45,0,.25,1) infinite;
  animation-delay:calc(1.1s + var(--sd,0s))}
.steps5 > .step5-card:nth-child(1){--sd:0s}
.steps5 > .step5-card:nth-child(2){--sd:.9s}
.steps5 > .step5-card:nth-child(3){--sd:1.8s}
.steps5 > .step5-card:nth-child(4){--sd:2.7s}
.steps5 > .step5-card:nth-child(5){--sd:3.6s}
@keyframes step5Rise{
  0%,22%,100%{translate:0 0}
  7%,13%{translate:0 -10px}}

/* the sweep of light across the card as it rises */
.step5-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 48%,transparent 66%);
  opacity:0;transform:translate3d(-110%,0,0)}
.steps5.is-in > .step5-card::after{animation:step5Sweep 6s cubic-bezier(.45,0,.25,1) infinite;
  animation-delay:calc(1.1s + var(--sd,0s))}
@keyframes step5Sweep{
  0%{opacity:0;transform:translate3d(-110%,0,0)}
  3%{opacity:1}
  16%{opacity:1;transform:translate3d(110%,0,0)}
  17%,100%{opacity:0;transform:translate3d(110%,0,0)}}
.step5-card > *{position:relative;z-index:1}

/* the signal travelling along the top edge of the row (desktop) */
.steps5::after{content:"";position:absolute;z-index:3;pointer-events:none;
  inset-block-start:-5px;inset-inline-start:calc(100% / 10);
  inline-size:10px;block-size:10px;margin-inline-start:-5px;border-radius:50%;
  background:#D5FF2A;box-shadow:0 0 0 4px rgba(213,255,42,.18),0 0 18px 4px rgba(239,94,30,.55);
  opacity:0}
.steps5.is-in::after{animation:step5Signal 6s linear infinite 1.1s}
@keyframes step5Signal{
  0%{opacity:0;transform:translate3d(0,0,0)}
  4%{opacity:1}
  64%{opacity:1;transform:translate3d(80cqw,0,0)}
  70%,100%{opacity:0;transform:translate3d(80cqw,0,0)}}
html[dir=rtl] .steps5.is-in::after{animation-name:step5SignalRtl}
@keyframes step5SignalRtl{
  0%{opacity:0;transform:translate3d(0,0,0)}
  4%{opacity:1}
  64%{opacity:1;transform:translate3d(-80cqw,0,0)}
  70%,100%{opacity:0;transform:translate3d(-80cqw,0,0)}}
@media(max-width:1100px){.steps5::after{display:none}}

.steps5:hover > .step5-card,.steps5:hover > .step5-card::after,
.steps5:hover::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .steps5.is-in > .step5-card,.steps5.is-in > .step5-card::after,.steps5.is-in::after{animation:none}
}

/* ═══ HOME IMAGERY ════════════════════════════════════════════════════
   Photography and renders added to the home page. Every image sits in a
   rounded frame on a near-black ground (so nothing flashes white while it
   loads), slightly over-scaled so the motion layer can drift it inside
   its frame as the page scrolls.
   ═══════════════════════════════════════════════════════════════════ */
.hm-fig{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);
  background:#0B0B0D;isolation:isolate;box-shadow:0 30px 60px -42px rgba(0,0,0,.5)}
.hm-fig img{display:block;inline-size:100%;block-size:100%;object-fit:cover;transform:scale(1.1)}
.hm-fig::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html:not([data-theme=dark]) .hm-fig:not(.world-media--ai)::after{box-shadow:inset 0 0 0 1px rgba(10,10,10,.06)}

.hm-roi,.hm-engine{aspect-ratio:16/10;margin-block-start:var(--sp-5)}
.hm-stage{aspect-ratio:21/9;max-inline-size:1100px;margin:var(--sp-6) auto 0}
.hm-over{position:relative;z-index:2;margin-block-start:clamp(-150px,-11vw,-48px)!important}
.hm-banner{aspect-ratio:21/8;margin-block-end:var(--sp-5)}

/* worlds: the image is the top of the card */
.world-media{aspect-ratio:5/4;box-shadow:none;
  margin:calc(clamp(24px,2.6vw,34px) * -1) calc(clamp(24px,2.6vw,34px) * -1) 22px;
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.world-media::after{border-radius:inherit}
.world-media--ai svg{display:block;inline-size:100%;block-size:100%}
.world-media--ai .hm-link{stroke-dasharray:6 10;animation:hmFlow 1.6s linear infinite}
.world-media--ai .hm-pulse{transform-box:fill-box;transform-origin:center;
  animation:hmPulse 2.2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes hmFlow{to{stroke-dashoffset:-32}}
@keyframes hmPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.5);opacity:0}}

@media(max-width:760px){
  .hm-stage{aspect-ratio:4/3}
  .hm-banner{aspect-ratio:16/9}
  .hm-over{margin-block-start:-36px!important}
}
@media(prefers-reduced-motion:reduce){
  .world-media--ai .hm-link,.world-media--ai .hm-pulse{animation:none}
}

/* ═══ BLOG COVERS (resources grid + article pages) ═══════════════════
   Photograph when media/blog/<slug>-cover.webp exists; otherwise a drawn
   cover: the resources doodle wallpaper, a glow in the category colour
   (guides orange, benchmarks neon, regulation white) and the guide
   number set large in outline. Always on near-black so both themes read.
   ═══════════════════════════════════════════════════════════════════ */
.bcover{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:#0B0B0D;isolation:isolate;margin-block-end:16px}
.bcover img{display:block;inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bart::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(255,255,255,.1);
  -webkit-mask:var(--doodle-resources) 0 0/520px 520px repeat;mask:var(--doodle-resources) 0 0/520px 520px repeat;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bart::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 70% at var(--gx,80%) var(--gy,18%),rgba(239,94,30,.55),rgba(239,94,30,.12) 45%,transparent 70%)}
.bart--benchmarks::after{background:radial-gradient(60% 70% at var(--gx,80%) var(--gy,18%),rgba(213,255,42,.4),rgba(213,255,42,.08) 45%,transparent 70%)}
.bart--regulation::after{background:radial-gradient(60% 70% at var(--gx,80%) var(--gy,18%),rgba(255,255,255,.28),rgba(255,255,255,.05) 45%,transparent 70%)}
.bart-n{position:absolute;z-index:2;inset-inline-start:clamp(16px,2vw,26px);inset-block-end:4px;
  font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:800;line-height:1;
  font-size:clamp(64px,7.5vw,118px);letter-spacing:-.05em;direction:ltr;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.is-feature .bart-n,.art-cover .bart-n{font-size:clamp(110px,13vw,210px)}
.guide:hover .bcover img,.guide:hover .bart::before{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.bcover img,.bart::before{transition:none}}

/* ═══ HOME: photographs on the five steps ═════════════════════════════
   Each step card opens with a photograph that bleeds to the card's edges
   (the scale.com image-card pattern). The five tell one story, connect →
   grow. The photo joins the existing loop: as the card rises, its photo
   eases in a little closer (the `scale` property, so the card's own
   `translate` rise and `transform` hover are untouched). The coloured top
   bar and the light sweep stay above the photo.
   ═══════════════════════════════════════════════════════════════════ */
.step5-card{--s5pad:clamp(20px,2.2vw,28px);--s5img:clamp(128px,10.5vw,168px)}
.step5-media{position:relative;z-index:1;overflow:hidden;background:#0B0B0D;
  margin:calc(var(--s5pad) * -1) calc(var(--s5pad) * -1) 18px;block-size:var(--s5img);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.step5-media img{display:block;inline-size:100%;block-size:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.step5-card:hover .step5-media img{transform:scale(1.08)}
.step5-card::before{z-index:3}
.step5-card::after{z-index:2}
section#how .steps5::before{inset-block-start:calc(var(--s5line,154px))}
@media(min-width:1101px){section#how .steps5{--s5line:calc(clamp(128px,10.5vw,168px) + 36px)}}
.steps5.is-in > .step5-card .step5-media img{animation:step5Img 6s cubic-bezier(.45,0,.25,1) infinite;
  animation-delay:calc(1.1s + var(--sd,0s))}
@keyframes step5Img{0%,22%,100%{scale:1}7%,13%{scale:1.06}}
@media(max-width:640px){.step5-card{--s5img:auto}.step5-media{aspect-ratio:16/9}}
.steps5:hover > .step5-card .step5-media img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.steps5.is-in > .step5-card .step5-media img{animation:none}}

/* ═══ HOME: five steps as an endless rail ═════════════════════════════
   The steps run slowly right-to-left in a loop (the scale.com card-row
   pattern), driven by the site's own [data-drift] rail engine, which
   pauses on hover and only runs while on screen. The set is rendered
   twice for a seamless loop. Everything the cards already did (colour
   fills, photos, the rise-and-sweep loop, hover lift) carries on inside
   the rail; the connector line and the travelling signal belong to the
   static row and are hidden here.
   ═══════════════════════════════════════════════════════════════════ */
.steps5-wrap{overflow:hidden;direction:ltr;padding-block:16px 30px;margin-block:-16px -30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.steps5-wrap .steps5{display:flex;gap:14px;inline-size:max-content;padding-inline-end:14px;
  grid-template-columns:none;container-type:normal;will-change:transform}
.steps5-wrap .steps5 > .step5-card{flex:0 0 clamp(262px,21vw,310px)}
html[dir=rtl] .steps5-wrap .steps5 > .step5-card{direction:rtl}
.steps5-wrap .steps5::before,.steps5-wrap .steps5::after{display:none}
/* top bar and number colour by step, not by position, so copies match */
.steps5-wrap .steps5 > .step5-card::before{background:var(--orange)}
.steps5-wrap .steps5 > .step5-card.s5-alt::before{background:var(--neon)}
.steps5-wrap .steps5 > .step5-card .step5-n{background:var(--orange);
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--orange) 70%,transparent);
  animation-delay:calc(var(--sd,0s) * .56)}
.steps5-wrap .steps5 > .step5-card.s5-alt .step5-n{background:var(--neon);
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--neon) 60%,transparent)}
.steps5-wrap .steps5 > .step5-card.s5-alt:hover{border-color:color-mix(in srgb,var(--neon) 40%,transparent)}
@media(max-width:640px){.steps5-wrap .steps5 > .step5-card{flex-basis:78vw}.steps5-wrap .step5-card{--s5img:auto}}
@media(prefers-reduced-motion:reduce){
  .steps5-wrap{-webkit-mask-image:none;mask-image:none;margin:0;padding:0}
  .steps5-wrap .steps5{flex-wrap:wrap;inline-size:auto;padding:0}
  .steps5-wrap .steps5 > .step5-card{flex:1 1 220px}
  .steps5-wrap .steps5 > .step5-card[aria-hidden]{display:none}
}

/* ═══ HOME: photographs zoom with the scroll ══════════════════════════
   Home photographs zoom out as you scroll past them (120% → 106%, the
   motion layer's `img` kind, `scale` property) while their frame grows
   into place (`media` kind). Replaces the earlier time-based Ken Burns,
   which could not run together with a scroll-linked scale.
   ═══════════════════════════════════════════════════════════════════ */
.hm-fig > img{transform:none}
.hm-learnwide{aspect-ratio:2/1}
@media(max-width:760px){.hm-learnwide{aspect-ratio:16/10}}

/* ═══ SECTIONS AS CARDS (scale.com scroll feel) ═══════════════════════
   As a section enters it rises from 96% to full size, and as it leaves
   the top it recedes to 94%, rounds its corners and dims, so the page
   reads as a stack of cards passing by. Driven by the motion layer with
   the `scale` and `opacity` properties; corners switch on by class (one
   repaint), never animated per frame.
   ═══════════════════════════════════════════════════════════════════ */
main > section.is-card{border-radius:clamp(20px,2.4vw,34px);overflow:clip}

/* sections off screen pause their CSS animations (marquees, loops,
   photo zooms): nothing animates where nobody is looking */
main > section.is-off,main > section.is-off *{animation-play-state:paused!important}

/* ═══ PAGE TO PAGE ════════════════════════════════════════════════════
   Leaving a page: the content recedes (scales to 97% and fades) instead
   of blurring, which is lighter to render and matches the card feel.
   Arriving: the new page rises in. */
body.pt-leaving main,body.pt-leaving .ftr{opacity:0;filter:none;scale:.97;
  transform-origin:50% 30vh;transition:opacity .3s ease,scale .34s cubic-bezier(.4,0,.2,1)}
@keyframes vt-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body.pt-leaving main,body.pt-leaving .ftr{opacity:1;scale:1}}

/* ═══ HOME: THE ORBIT (scale.com "Artificial Intelligence / Real …") ═════
   A pinned scene right after the trust strip: the headline sits in the
   middle with a rotating last word, and photographs scattered around it
   gather in as the scene arrives, then fly outward and grow as you keep
   scrolling. The section is 300vh tall; its inner stage is sticky. The
   default (no JS / reduced motion) is a still constellation.
   ═══════════════════════════════════════════════════════════════════ */
.orbit{position:relative;block-size:300vh}
.orbit-pin{position:sticky;inset-block-start:0;block-size:100vh;block-size:100svh;overflow:hidden;
  display:grid;place-items:center}
.orbit-stage{position:absolute;inset:0;pointer-events:none}
.orbit-t{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);
  inline-size:calc(var(--s) * clamp(64px,8.4vw,136px));border-radius:clamp(10px,1vw,16px);overflow:hidden;
  background:#111;box-shadow:0 26px 50px -30px rgba(0,0,0,.55);
  translate:calc(var(--x) * 1vw) calc(var(--y) * 1vh);will-change:translate,scale,opacity}
.orbit-t img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.orbit-copy{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;
  gap:clamp(22px,2.6vw,34px);padding-inline:24px}
.orbit-h{font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:700;color:var(--text);
  font-size:clamp(2.4rem,6.2vw,5.6rem);line-height:1.02;letter-spacing:-.045em;margin:0}
html[lang=ar] .orbit-h{font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;letter-spacing:0;
  line-height:1.4;font-size:clamp(2rem,5vw,4.4rem)}
.orbit-l1,.orbit-l2{display:block}
.orbit-w{display:inline-grid;vertical-align:bottom;justify-items:start;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.orbit-w b{white-space:nowrap}
.orbit-w b{grid-area:1/1;font-weight:inherit;color:var(--orange);opacity:0;transform:translateY(.5em);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.orbit-w b.is-on{opacity:1;transform:none}
.orbit-w b.is-out{opacity:0;transform:translateY(-.5em)}
@media(max-width:700px){
  .orbit{block-size:240vh}
  .orbit-t{inline-size:calc(var(--s) * clamp(52px,17vw,92px))}
  .orbit-t:nth-child(n+11){display:none}
}
@media(prefers-reduced-motion:reduce){
  .orbit{block-size:auto}
  .orbit-pin{position:relative;block-size:auto;min-block-size:88vh;padding-block:12vh}
  .orbit-w b{transition:none}
}

/* ═══ PAGE TO PAGE: the curtain ═══════════════════════════════════════
   Moving between pages of the site (scale.com / rangerx.ai feel):
   1. click a link: the page recedes and a dark panel carrying the doodle
      texture rises from the bottom with rounded shoulders; the ADLTIX
      mark and the destination's name arrive on it, a thin orange→neon
      line fills along its bottom;
   2. the next page opens already covered (the <head> boot script sees
      the hand-off in sessionStorage before first paint), then the panel
      lifts away upward and the new page is revealed.
   Transform and opacity only. Off under reduced motion; a CSS failsafe
   lifts the panel if the script never runs. Replaces the native
   cross-document view transition, which would fight the curtain.
   ═══════════════════════════════════════════════════════════════════ */
@view-transition{navigation:none}
.ptx{position:fixed;inset:0;z-index:9000;pointer-events:none;visibility:hidden;
  display:grid;place-items:center;color:#F5F5F2;overflow:hidden;
  background:var(--doodle-card-w) 0 0/420px 420px repeat,#0B0B0D;
  transform:translate3d(0,102%,0);border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;
  will-change:transform}
.ptx-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 45% at 50% 48%,rgba(239,94,30,.22),transparent 70%)}
.ptx-in{position:relative;display:grid;justify-items:center;gap:clamp(14px,1.6vw,22px);padding-inline:24px;text-align:center}
.ptx-logo{block-size:clamp(22px,2vw,30px);inline-size:auto;opacity:0;transform:translate3d(0,14px,0)}
.ptx-t{margin:0;font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.4rem,7vw,6.4rem);line-height:1;letter-spacing:-.045em;
  opacity:0;transform:translate3d(0,40px,0)}
html[lang=ar] .ptx-t{font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;letter-spacing:0;line-height:1.35}
.ptx-bar{position:absolute;inset-inline:0;inset-block-end:0;block-size:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#EF5E1E,#D5FF2A)}
html[dir=rtl] .ptx-bar{transform-origin:right}

/* leaving: the curtain rises */
.ptx.is-in{visibility:visible;transform:none;transition:transform .62s cubic-bezier(.76,0,.24,1)}
.ptx.is-in .ptx-logo{opacity:1;transform:none;transition:opacity .4s ease .22s,transform .6s cubic-bezier(.2,.8,.2,1) .22s}
.ptx.is-in .ptx-t{opacity:1;transform:none;transition:opacity .45s ease .3s,transform .7s cubic-bezier(.2,.8,.2,1) .3s}
.ptx.is-in .ptx-bar{transform:scaleX(.82);transition:transform 1.4s cubic-bezier(.16,1,.3,1) .2s}
/* arriving: the next page opens covered, then the curtain lifts away */
html.ptx-arrive .ptx{visibility:visible;transform:none;border-radius:0 0 clamp(24px,3vw,44px) clamp(24px,3vw,44px);
  animation:ptxFailsafe 0s linear 2.5s forwards}
html.ptx-arrive .ptx-logo,html.ptx-arrive .ptx-t{opacity:1;transform:none}
html.ptx-arrive .ptx-bar{transform:scaleX(1)}
.ptx.is-out{visibility:visible;transform:translate3d(0,-102%,0)!important;
  transition:transform .8s cubic-bezier(.76,0,.24,1) .08s}
.ptx.is-out .ptx-in{opacity:0;transform:translate3d(0,-30px,0);transition:opacity .3s ease,transform .5s ease}
@keyframes ptxFailsafe{to{visibility:hidden}}
/* the arriving page rises into place under the lifting curtain */
html.ptx-lift main{animation:ptxRise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes ptxRise{from{opacity:.4;translate:0 60px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.ptx{display:none}html.ptx-lift main{animation:none}}

/* ═══ PAGE PHOTOGRAPHS (inner pages) ══════════════════════════════════
   A few wide photographs on the inner pages (brands, creators, academy,
   about), chosen and placed one per section at most. Same behaviour as
   the home photos: the frame grows into place and the photo zooms out
   as you scroll past (motion layer `media` + `img`).
   ═══════════════════════════════════════════════════════════════════ */
.pfig{position:relative;margin:clamp(32px,4.5vw,64px) 0 0;overflow:hidden;
  border-radius:var(--r-lg);aspect-ratio:21/9;background:#111;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.55)}
.pfig > img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.pfig::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pfig--below-head{margin-block-start:0}
.shell-tight .pfig{aspect-ratio:16/8}
@media(max-width:760px){.pfig{aspect-ratio:4/3;margin-block-start:28px}}

/* ═══ PHOTOS: whole, sharp, a little smaller ══════════════════════════
   Photos now show at their own proportions (nothing cut off), are capped
   at 1000px wide and centred so they are never upscaled past the source,
   and the scroll zoom is gentle (110% → 102%) so they stay crisp. */
.hm-banner{aspect-ratio:1376/768;max-inline-size:1000px;margin-inline:auto}
@media(max-width:760px){.hm-banner{aspect-ratio:1376/768}}
.pfig{aspect-ratio:auto;max-inline-size:1000px;margin-inline:auto}
.pfig > img{block-size:auto}
.shell-tight .pfig{aspect-ratio:auto}
@media(max-width:760px){.pfig{aspect-ratio:auto}}

/* Three worlds: the three cards gather into place (see adltix.js) */
.worlds > .world{will-change:translate,rotate,scale}

/* ═══ FOUR INCOME STREAMS: expanding panels ═══════════════════════════
   Replaces the uneven bento. Four tall panels in one row; one is open
   (wide, description shown), the others fold to slim columns showing
   their number and title. Hover, keyboard focus or tap opens a panel; on
   its own the row steps through the four every few seconds. Width moves
   with flex-grow (a short layout transition on four elements). Colours
   stay: the COLOUR CARDS fills on 1 and 3. Mobile: a plain stack, all
   open.
   ═══════════════════════════════════════════════════════════════════ */
.ways.ways-x{display:flex;gap:12px;block-size:clamp(300px,30vw,380px);grid-template-columns:none}
.ways-x > .way{position:relative;flex:1 1 0;min-inline-size:0;grid-column:auto;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  padding:clamp(20px,2.2vw,30px);transform:none;
  transition:flex-grow .7s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .3s ease}
.ways-x > .way.is-open{flex-grow:3.4}
.ways-x > .way:hover{transform:none}
.ways-x .way-n{position:absolute;inset-block-start:clamp(18px,2vw,26px);inset-inline-start:clamp(20px,2.2vw,30px);
  font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:700;font-size:clamp(2.4rem,4.4vw,4.2rem);
  line-height:1;letter-spacing:-.04em;color:var(--text);opacity:.14;transition:opacity .5s ease}
.ways-x > .way.is-open .way-n{opacity:.3}
.ways-x > .way h3{white-space:nowrap;transition:font-size .5s ease;font-size:clamp(1.05rem,1.4vw,1.35rem)}
.ways-x > .way.is-open h3{font-size:clamp(1.3rem,2vw,1.9rem);white-space:normal}
.ways-x > .way p{max-block-size:0;opacity:0;transform:translate3d(0,12px,0);overflow:hidden;
  max-inline-size:44ch;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),max-block-size .6s ease}
.ways-x > .way.is-open p{max-block-size:12em;opacity:1;transform:none;transition-delay:.18s}
.ways-x > .way:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* folded panels read their title upright at the bottom, trimmed */
.ways-x > .way:not(.is-open) h3{overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){
  .ways.ways-x{flex-direction:column;block-size:auto}
  .ways-x > .way{flex:none;min-block-size:0;justify-content:flex-start;padding-block-start:clamp(64px,16vw,84px)}
  .ways-x > .way p{max-block-size:none;opacity:1;transform:none}
  .ways-x > .way h3{white-space:normal;font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){.ways-x > .way,.ways-x > .way p{transition:none}}
/* home hero wall tilts toward the pointer (adltix.js) */
.cw{perspective:1400px}

/* ═══ SMOOTHNESS ══════════════════════════════════════════════════════
   • the ambient lights pause while the page is actively scrolling
     (html.is-scrolling, set by adltix.js);
   • the header glass blur is 12px (was 20px): behind a 90%-opaque bar it
     looks the same and costs far less on every scrolled frame;
   • the page curtain rises a little quicker. */
/* the flag now sits on .aurora itself (see adltix.js) so pausing the
   lights invalidates ten elements instead of the entire document. The
   html-scoped form is kept for safety if the element is ever absent. */
.aurora.is-scrolling u,.aurora.is-scrolling b,
html.is-scrolling .aurora u,html.is-scrolling .aurora b{animation-play-state:paused}

/* ── the curtain, with more weight ──────────────────────────────────
   Same two moves as before, tuned rather than replaced. The climb is
   fast and decisive; the lift away is slower and eases out long, so the
   page underneath is handed over rather than uncovered. Both are pure
   transform on a single element.
   The name of the page being opened now arrives with a little more
   travel and a fraction more delay, so it lands ON the covered screen
   instead of racing the curtain up. */
.ptx.is-in{transition-duration:.56s!important}
.ptx.is-out{transition-duration:.74s!important}
/* The plate now starts its climb at 0.24s and lands at 0.80s, so the
   mark and the name have to wait for it — at the old 0.12/0.18s they
   were animating in mid-air, before the surface they sit on had
   arrived. They now land just after it settles. */
.ptx.is-in .ptx-logo{
  transition:opacity .3s ease .56s,
             transform .56s cubic-bezier(.16,1,.3,1) .56s!important}
.ptx.is-in .ptx-t{
  transition:opacity .34s ease .64s,
             transform .66s cubic-bezier(.16,1,.3,1) .64s!important}
/* the destination name starts a touch lower so the arrival reads */
.ptx .ptx-t{transform:translate3d(0,52px,0)}
/* and the progress rule under it fills once the plate is there */
.ptx.is-in .ptx-bar{transition:transform 1.4s cubic-bezier(.16,1,.3,1) .6s!important}

/* ═══ CREATOR SPOTLIGHT (home · network) ══════════════════════════════
   The signature moment: a real network creator's ADLTIX profile on a
   phone (her own video), with the platform's cards emerging from behind
   it as you scroll — AI match → her code → an attributed order → her
   commission — joined by a line that draws itself. Pointer depth on
   desktop. Built in HTML/CSS, so it is crisp, bilingual and real.
   ═══════════════════════════════════════════════════════════════════ */
.spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);
  align-items:center;margin-block-start:clamp(56px,8vw,120px)}
.spot-h{margin-block-start:14px;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.02em}
.spot-pts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.spot-pts li{position:relative;padding-inline-start:26px;color:var(--on-ink-2,rgba(245,245,242,.78));line-height:1.55}
.spot-pts li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;inline-size:12px;block-size:12px;
  border-radius:50%;background:#D5FF2A;box-shadow:0 0 0 4px rgba(213,255,42,.14)}
.spot-note{margin-block-start:18px;opacity:.55}
.spot-stage{position:relative;block-size:clamp(460px,44vw,600px);perspective:1400px}
.spot-glow{position:absolute;inset:10% 12%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(239,94,30,.42),rgba(239,94,30,.08) 60%,transparent);filter:blur(18px)}
.spot-phone{position:absolute;inset-block-start:4%;inset-inline-start:50%;inline-size:clamp(210px,19vw,262px);
  aspect-ratio:9/18.6;margin-inline-start:calc(clamp(210px,19vw,262px) / -2);
  border-radius:38px;padding:9px;background:linear-gradient(160deg,#EF5E1E,#c7430f);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08) inset;
  transform-style:preserve-3d;will-change:transform}
html[dir=rtl] .spot-phone{margin-inline-start:0;margin-inline-end:calc(clamp(210px,19vw,262px) / -2);inset-inline-start:auto;inset-inline-end:50%}
.spot-screen{position:relative;block-size:100%;border-radius:30px;overflow:hidden;background:#0B0B0D;display:flex;flex-direction:column}
.spot-screen::before{content:"";position:absolute;z-index:3;inset-block-start:8px;inset-inline-start:50%;translate:-50% 0;
  inline-size:34%;block-size:18px;border-radius:12px;background:#000}
.spot-media{position:relative;flex:0 0 56%;overflow:hidden}
.spot-media video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.spot-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#0B0B0D)}
.spot-profile{position:relative;margin-block-start:-34px;padding:0 14px 14px;display:grid;gap:6px;color:#F5F5F2}
.spot-name{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:6px}
.spot-tick{display:inline-grid;place-items:center;inline-size:16px;block-size:16px;border-radius:50%;background:#D5FF2A;color:#0A0A0A;font-size:.62rem}
.spot-meta{font-size:.68rem;color:rgba(245,245,242,.6)}
.spot-tabs{display:flex;gap:6px;margin-block:6px 2px}
.spot-tabs span{font-size:.66rem;padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.07);color:rgba(245,245,242,.7)}
.spot-tabs .is-on{background:#EF5E1E;color:#fff}
.spot-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);font-size:.7rem}
.spot-row b{flex:1}.spot-row em{font-style:normal;color:#D5FF2A;font-size:.64rem}
.spot-dot{inline-size:8px;block-size:8px;border-radius:50%;background:#EF5E1E}.spot-dot--n{background:#D5FF2A}
.spot-card{position:absolute;z-index:2;padding:14px 16px;border-radius:18px;color:#0A0A0A;
  background:#fff;box-shadow:0 24px 50px -24px rgba(0,0,0,.55);min-inline-size:150px;will-change:transform,opacity}
html[data-theme=dark] .spot-card{background:#F5F5F2}
.spot-k{display:block;font-size:.66rem;font-weight:600;color:rgba(10,10,10,.55);letter-spacing:.01em}
.spot-big{display:block;font-size:1.7rem;letter-spacing:-.03em;margin-block-start:2px}
.spot-big small{font-size:.8rem;font-weight:600;color:rgba(10,10,10,.5)}
.spot-mid{display:block;font-size:1.15rem;letter-spacing:-.02em;margin-block:2px}
.spot-sub{display:block;font-size:.66rem;color:rgba(10,10,10,.55)}
.spot-code{display:block;margin-block:4px;font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;letter-spacing:.06em;
  padding:6px 10px;border-radius:10px;background:#0A0A0A;color:#D5FF2A;direction:ltr}
.spot-facets{display:grid;gap:5px;margin-block-start:8px}
.spot-facets span{position:relative;font-size:.62rem;color:rgba(10,10,10,.6);padding-block-start:6px}
.spot-facets i{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:3px;inline-size:var(--w);border-radius:3px;
  background:linear-gradient(90deg,#EF5E1E,#D5FF2A)}
.spot-card--match{inset-block-start:8%;inset-inline-start:0}
.spot-card--code{inset-block-start:18%;inset-inline-end:0;background:#D5FF2A}
.spot-card--code .spot-k,.spot-card--code .spot-sub{color:rgba(10,10,10,.7)}
.spot-card--order{inset-block-end:24%;inset-inline-start:2%;display:flex;gap:12px;align-items:center}
.spot-ok{flex:none;display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;background:#EF5E1E;color:#fff;font-weight:700}
.spot-card--pay{inset-block-end:6%;inset-inline-end:4%;background:#EF5E1E;color:#0A0A0A}
.spot-card--pay .spot-k,.spot-card--pay .spot-sub{color:rgba(10,10,10,.7)}
.spot-spark{display:block;inline-size:120px;block-size:28px;margin-block:4px}
.spot-spark path{fill:none;stroke:#0A0A0A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.spot-links{position:absolute;inset:0;z-index:1;inline-size:100%;block-size:100%;pointer-events:none;overflow:visible}
.spot-path{fill:none;stroke:#D5FF2A;stroke-width:.45;stroke-dasharray:1 1.6;stroke-linecap:round;opacity:.8;
  vector-effect:non-scaling-stroke;stroke-width:1.6}
html[dir=rtl] .spot-links{transform:scaleX(-1)}
@media(max-width:900px){
  .spot{grid-template-columns:1fr}
  .spot-stage{block-size:540px;max-inline-size:440px;margin-inline:auto;inline-size:100%}
  .spot-card{min-inline-size:130px;padding:11px 13px}
  .spot-big{font-size:1.35rem}
}
@media(max-width:420px){.spot-stage{block-size:500px}.spot-card--match{inset-block-start:2%}.spot-card--code{inset-block-start:14%}}
@media(prefers-reduced-motion:reduce){.spot-phone,.spot-card{transform:none!important;opacity:1!important}}
@media(max-width:600px){
  .spot-phone{inline-size:176px;margin-inline-start:-88px;border-radius:32px;padding:7px}
  html[dir=rtl] .spot-phone{margin-inline-start:0;margin-inline-end:-88px}
  .spot-screen{border-radius:26px}
  .spot-card{min-inline-size:0;inline-size:128px;padding:9px 11px;border-radius:14px}
  .spot-big{font-size:1.15rem}.spot-mid{font-size:.95rem}.spot-code{font-size:.8rem;padding:4px 7px}
  .spot-spark{inline-size:96px;block-size:22px}
  .spot-card--order{inset-block-end:30%;inset-inline-start:0}
  .spot-card--pay{inset-block-end:4%;inset-inline-end:0}
  .spot-card--match{inset-inline-start:0}.spot-card--code{inset-inline-end:0}
  .spot-ok{inline-size:26px;block-size:26px}
}

/* ═══ QA FIXES (pre-production audit) ══════════════════════════════════ */
/* grid children may shrink below their content's width (a wide mockup in
   a feature row pushed the column 60px past a 320px screen) */
.feat-row > *{min-inline-size:0}
/* comfortable tap targets on touch screens without moving the layout:
   the hit area grows, the visual spacing stays exactly the same */
@media(hover:none) and (pointer:coarse){
  .ftr a{display:inline-block;padding-block:9px;margin-block:-9px}
  .ftr-bot a{padding-inline:4px;margin-inline:-4px}
}
/* small controls get an invisible 8px hit margin on touch screens —
   the lang toggle, ROI calculator pills and the login logo link */
@media(hover:none) and (pointer:coarse){
  [data-lang-switch],.roi-pill,.roi-mode-btn,.auth-back{position:relative}
  [data-lang-switch]::before,.roi-pill::before,.roi-mode-btn::before,.auth-back::before{
    content:"";position:absolute;inset:-8px}
}

/* spotlight refinements: the video now fills the whole phone screen like a
   real phone playing a reel (far less crop on laptops), the profile sits
   over it on a dark fade; the connector lines were removed */
.spot-screen{display:block}
.spot-media{position:absolute;inset:0;flex:none}
.spot-media video{object-position:50% 38%}
.spot-media::after{background:linear-gradient(180deg,rgba(11,11,13,0) 38%,rgba(11,11,13,.72) 62%,#0B0B0D 84%)}
.spot-profile{position:absolute;inset-inline:0;inset-block-end:0;margin:0;padding:0 14px 14px}
.spot-links{display:none}
/* Arabic headings carry the same visual weight as the English ones
   (they were set ~30% smaller; Kufi only needs ~15% less at the same rem) */
@media(min-width:761px){
  html[lang=ar] .phero .t-hero{font-size:clamp(2.4rem,5.3vw,4.15rem)}   /* inner-page heroes only — never the home hero slides */
  html[lang=ar] .t-sec{font-size:clamp(2rem,4vw,3.3rem)}
}

/* ═══ PLATFORM SELECTOR (home) ═══════════════════════════════════════
   One clean card with a segmented switch on top (brands / creators /
   academy). A pill slides under the active tab, a thin line fills while
   the tab is shown (it moves on by itself until the visitor chooses),
   and the panel content crossfades with a short rise.
   ═══════════════════════════════════════════════════════════════════ */
.psel{max-inline-size:1120px;margin:clamp(28px,4vw,48px) auto 0;padding:clamp(14px,1.6vw,20px);
  border:1px solid var(--rule);border-radius:clamp(22px,2.4vw,32px);background:var(--paper,#fff);
  box-shadow:0 40px 90px -60px rgba(10,10,10,.35)}
html[data-theme=dark] .psel{background:rgba(255,255,255,.03);box-shadow:0 40px 90px -60px rgba(0,0,0,.9)}
.psel-tabs{position:relative;display:flex;gap:4px;inline-size:max-content;max-inline-size:100%;margin-inline:auto;
  padding:5px;border-radius:100px;background:rgba(10,10,10,.05);overflow-x:auto;scrollbar-width:none}
html[data-theme=dark] .psel-tabs{background:rgba(255,255,255,.06)}
.psel-tabs::-webkit-scrollbar{display:none}
.psel-tab{position:relative;z-index:1;border:0;background:none;cursor:pointer;white-space:nowrap;
  padding:11px clamp(16px,2vw,24px);border-radius:100px;font:600 .92rem/1 inherit;color:var(--text-2);
  transition:color .3s ease}
.psel-tab.is-on{color:#fff}
.psel-tab:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.psel-bar{position:absolute;inset-inline:18%;inset-block-end:5px;block-size:2px;border-radius:2px;background:rgba(255,255,255,.55);
  transform:scaleX(0);transform-origin:left;opacity:0}
html[dir=rtl] .psel-bar{transform-origin:right}
.psel-tab.is-on .psel-bar{opacity:1;animation:pselFill var(--psel-t,7s) linear forwards}
.psel.is-chosen .psel-tab.is-on .psel-bar,.psel:hover .psel-tab.is-on .psel-bar{animation-play-state:paused}
.psel.is-chosen .psel-bar{display:none}
@keyframes pselFill{to{transform:scaleX(1)}}
.psel-pill{position:absolute;z-index:0;inset-block:5px;left:0;inline-size:0;border-radius:100px;
  background:var(--orange);box-shadow:0 8px 20px -10px rgba(239,94,30,.8);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),inline-size .5s cubic-bezier(.2,.8,.2,1)}
.psel-stage{position:relative;margin-block-start:clamp(16px,2vw,24px)}
.psel-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(16px,2.4vw,32px)}
.psel-panel[hidden]{display:none}
.psel-panel.is-on > *{animation:pselIn .6s cubic-bezier(.2,.8,.2,1) both}
.psel-panel.is-on > :nth-child(2){animation-delay:.08s}
@keyframes pselIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.psel-h{margin:0;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.025em}
html[lang=ar] .psel-h{letter-spacing:0;line-height:1.35}
.psel-copy p{margin:14px 0 0;color:var(--text-2);line-height:1.6;max-inline-size:46ch}
.psel-copy ul{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:10px}
.psel-copy li{position:relative;padding-inline-start:24px;line-height:1.5}
.psel-copy li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.5em;inline-size:10px;block-size:10px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px rgba(239,94,30,.14)}
.psel-note{margin:0;padding:0 clamp(16px,2.4vw,32px) 6px;font-size:.72rem;color:var(--text-3,rgba(10,10,10,.5));text-align:end}
/* the little product panels */
.psel-ui{position:relative;padding:20px;border-radius:22px;background:#0B0B0D;color:#F5F5F2;min-block-size:240px;
  box-shadow:0 30px 60px -36px rgba(0,0,0,.6);overflow:hidden}
.psel-ui::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--doodle-card-w) 0 0/420px 420px repeat;opacity:.6}
.psel-ui > *{position:relative}
.psel-uhead{display:flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(245,245,242,.7)}
.psel-uhead em{margin-inline-start:auto;font-style:normal;color:#D5FF2A}
.psel-dot{inline-size:8px;block-size:8px;border-radius:50%;background:#EF5E1E;box-shadow:0 0 0 4px rgba(239,94,30,.2)}
.psel-dot--n{background:#D5FF2A;box-shadow:0 0 0 4px rgba(213,255,42,.18)}
.psel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-block:16px}
.psel-kpis div{padding:12px;border-radius:14px;background:rgba(255,255,255,.06)}
.psel-kpis small,.psel-k{display:block;font-size:.66rem;color:rgba(245,245,242,.6)}
.psel-kpis b{display:block;font-size:1.05rem;margin-block:4px;direction:ltr;text-align:start}
.psel-kpis em{font-style:normal;font-size:.7rem;color:#D5FF2A}
.psel-bars{display:flex;align-items:flex-end;gap:6px;block-size:70px}
.psel-bars i{flex:1;block-size:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#EF5E1E,rgba(239,94,30,.35))}
.psel-panel.is-on .psel-bars i{animation:pselBar .8s cubic-bezier(.2,.8,.2,1) both}
.psel-bars i:nth-child(n){animation-delay:calc(var(--i,0) * 40ms)}
@keyframes pselBar{from{transform:scaleY(.1);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.psel-big{display:block;font-size:2.1rem;letter-spacing:-.03em;margin-block:4px 14px;direction:ltr;text-align:start}
.psel-code{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#D5FF2A;color:#0A0A0A}
.psel-code small{font-size:.66rem;opacity:.7}.psel-code b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em;direction:ltr}
.psel-code em{margin-inline-start:auto;font-style:normal;font-size:.7rem;opacity:.7}
.psel-spark{display:block;inline-size:100%;block-size:48px;margin-block-start:16px}
.psel-spark path{fill:none;stroke:#EF5E1E;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:400;stroke-dashoffset:0}
.psel-panel.is-on .psel-spark path{animation:pselDraw 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes pselDraw{from{stroke-dashoffset:400}}
html[dir=rtl] .psel-spark{transform:scaleX(-1)}
.psel-prog{block-size:8px;border-radius:8px;background:rgba(255,255,255,.08);margin-block:16px 18px;overflow:hidden}
.psel-prog i{display:block;block-size:100%;inline-size:var(--w);border-radius:inherit;background:linear-gradient(90deg,#EF5E1E,#D5FF2A)}
.psel-q{display:block;font-size:1.05rem;line-height:1.4;margin-block:6px 16px}
.psel-chips{display:flex;gap:8px}
.psel-chips span{padding:6px 10px;border-radius:100px;font-size:.72rem;background:rgba(255,255,255,.08)}
.psel-chips span:first-child{background:rgba(213,255,42,.16);color:#D5FF2A}
@media(max-width:820px){
  .psel-panel{grid-template-columns:1fr;padding:14px 6px}
  .psel-tab{padding:10px 14px;font-size:.85rem}
  .psel-ui{min-block-size:0}
  .psel-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .psel-kpis b{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.psel-panel.is-on > *,.psel-bars i,.psel-spark path{animation:none}.psel-bar{display:none}}

/* page curtain: an orange lead layer rises a beat ahead of the dark panel
   and lifts a beat after it, so the change of page reads as two layered
   sheets passing (transform only) */
/* ═══ THE HANDOVER, STAGED ════════════════════════════════════════════
   Why this needed rebuilding: leaving the home page, the transition read
   as nothing happening at all. Recording it frame by frame showed why —
   the whole move played out in near-black. The home hero is a full-bleed
   dark video wall and the curtain is #0B0B0D, so a dark panel climbing
   over a dark page has almost no edge to see, and the outgoing page's
   2.8% scale is invisible on a full-bleed wall.

   There WAS an orange layer meant to lead the dark one — but by 0.07s,
   four frames at 60fps, and stacked BEHIND it. It was covered before the
   eye could catch it: measured across 96 recorded frames, the orange was
   visible in two.

   The brand colour is the one thing that reads against both a black
   video wall and a white inner page, so it now carries the move:

     0.00s  orange sweeps up from the bottom, rounded shoulders
     0.24s  the dark plate follows — a clear beat of pure orange first
     0.34s  the mark and the destination's name rise onto the plate
            (the plate carries a lit top edge, so its travel reads even
             against a dark page)
     ...    hold, then both lift away and the new page rises under them

   Everything below is transform and opacity on two fixed elements. No
   layout, no paint beyond compositing — it costs nothing per frame,
   which is the whole point of doing it this way rather than with a
   library.
   ═══════════════════════════════════════════════════════════════════ */
.ptx-lead{position:fixed;inset:0;z-index:8999;pointer-events:none;background:#EF5E1E;visibility:hidden;
  transform:translate3d(0,102%,0);border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;will-change:transform}

/* LEAVING — orange first, and it is given long enough to be seen */
.ptx.is-in ~ .ptx-lead{visibility:visible;transform:none;
  transition:transform .54s cubic-bezier(.72,0,.18,1)}
/* the dark plate waits a real beat instead of 70ms */
.ptx.is-in{transition-delay:.24s!important}

html.ptx-arrive .ptx-lead{visibility:visible;transform:none;animation:ptxFailsafe 0s linear 2.5s forwards}

/* ARRIVING — the plate lifts, the orange follows a beat behind, so the
   reveal is layered the same way the cover was */
.ptx.is-out ~ .ptx-lead{visibility:visible;transform:translate3d(0,-102%,0)!important;
  transition:transform .82s cubic-bezier(.62,0,.2,1) .16s;
  border-radius:0 0 clamp(24px,3vw,44px) clamp(24px,3vw,44px)}

/* A lit edge along the plate's leading side. This is what makes the
   travel legible when the page underneath is as dark as the plate —
   without it, dark-on-dark has no boundary to follow. */
.ptx::after{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:3px;
  background:linear-gradient(90deg,var(--orange,#EF5E1E),var(--neon,#D5FF2A),var(--orange,#EF5E1E));
  opacity:0;transition:opacity .2s ease}
.ptx.is-in::after{opacity:1;transition-delay:.24s}
html.ptx-arrive .ptx::after{opacity:1}
.ptx.is-out::after{opacity:0}

@media(prefers-reduced-motion:reduce){.ptx-lead{display:none}.ptx::after{display:none}}
@media(max-width:420px){.psel-tab{padding:9px 10px;font-size:.78rem}.psel{padding:10px}}
/* selector: three large figures per tab (replaces the mock screens) */
.psel-stats{display:grid;gap:0;padding:clamp(18px,2.4vw,30px);border-radius:22px;background:#0B0B0D;color:#F5F5F2;
  position:relative;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.psel-stats::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 85% 10%,rgba(239,94,30,.28),transparent 70%),var(--doodle-card-w) 0 0/420px 420px repeat;opacity:.9}
html[dir=rtl] .psel-stats::before{background:radial-gradient(60% 70% at 15% 10%,rgba(239,94,30,.28),transparent 70%),var(--doodle-card-w) 0 0/420px 420px repeat}
.psel-stat{position:relative;display:flex;align-items:baseline;gap:16px;padding-block:16px;border-block-end:1px solid rgba(255,255,255,.1)}
.psel-stat:last-child{border-block-end:0}
.psel-stat b{flex:none;min-inline-size:5.2ch;font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.9rem,3.2vw,2.8rem);letter-spacing:-.03em;line-height:1;color:#fff}
html[lang=ar] .psel-stat b{font-family:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;letter-spacing:0;font-size:clamp(1.6rem,2.8vw,2.4rem)}
.psel-stat:first-child b{color:#EF5E1E}
.psel-stat:nth-child(2) b{color:#D5FF2A}
.psel-stat span{color:rgba(245,245,242,.72);font-size:.95rem;line-height:1.4}
.psel-panel.is-on .psel-stat{animation:pselIn .6s cubic-bezier(.2,.8,.2,1) both}
.psel-panel.is-on .psel-stat:nth-child(2){animation-delay:.08s}
.psel-panel.is-on .psel-stat:nth-child(3){animation-delay:.16s}
@media(max-width:820px){.psel-stat b{min-inline-size:4.6ch}}
@media(prefers-reduced-motion:reduce){.psel-panel.is-on .psel-stat{animation:none}}


/* ═══ ROI CALCULATOR: compact on phones ═══════════════════════════════
   On a phone the calculator ran to ~960px. It keeps every control but
   tightens: smaller fields, the platform and industry pills on one
   swipeable line each, and the four results as a 2×2 grid of tiles. */
@media(max-width:639px){
  .roi-calc{padding:18px!important;border-radius:22px!important}
  .roi-calc h3{font-size:1rem!important;margin:0 0 10px!important}
  .roi-field{margin-block-end:11px!important}
  .roi-field label{font-size:.72rem!important;margin-block-end:5px!important}
  .roi-box{padding:8px 12px!important;min-block-size:0!important;border-radius:12px!important}
  .roi-box b{font-size:1rem!important}
  .roi-note{font-size:.64rem!important;margin-block-start:4px!important;line-height:1.35!important}
  .roi-pills{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;
    margin-inline:-18px;padding-inline:18px;padding-block-end:2px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
  .roi-pills::-webkit-scrollbar{display:none}
  .roi-pill{flex:none!important;padding:6px 11px!important;font-size:.72rem!important}
  .roi-grid2 > div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:8px;
    margin-block-start:14px;padding-block-start:14px;border-block-start:1px solid rgba(255,255,255,.28)}
  .roi-grid2 > div:last-child h3{grid-column:1 / -1}
  .roi-stat{margin:0!important;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.13);display:grid;gap:3px}
  .roi-stat .lbl{font-size:.64rem!important}
  .roi-stat .val{font-size:1.05rem!important}
  .roi-stat .val.hero{font-size:1.3rem!important}
}
@media(max-width:639px){
  .roi-grid2,.roi-grid2 > *{min-inline-size:0}
  .roi-grid2 > div:last-child{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .roi-calc{overflow:hidden}
}

/* ═══ PAGE TO PAGE: the handover, restored ════════════════════════════
   This pair of rules used to switch the whole movement off. They were
   added for a real reason — the page being left faded and blurred and
   the page arriving faded up from opacity .4, so text visibly blinked
   out and back in on every navigation — but switching off the ONLY
   motion was too blunt a cure for it. The problem was never that the
   page moved; it was that it changed OPACITY while it moved.

   So: the movement comes back, and nothing fades.
     · leaving  — the page sinks and settles back a little as the curtain
                  climbs over it. Transform only. No opacity, no blur, no
                  filter, so no text ever thins out.
     · arriving — the page rises the last stretch into place under the
                  lifting curtain, at full strength the whole way.
   Both are transform-only, which is also the cheapest thing a compositor
   can be asked to do, so this costs nothing on the frame budget. The
   curtain itself is unchanged — it was always the good part.
   ═══════════════════════════════════════════════════════════════════ */
body.pt-leaving main,body.pt-leaving .ftr{
  opacity:1!important;filter:none!important;
  /* Travel, not a fade. The earlier values (scale .972, +14px) were
     chosen on an inner page, where a white sheet stepping back against
     a white margin is easy to see. On the home page the same values are
     invisible: its hero is a full-bleed dark wall with no surrounding
     margin, so there is no edge for a 2.8% scale to move against.
     The page now travels UP and back — away from the curtain climbing
     over it, rather than sinking into it — far enough to read on a
     full-bleed page and still transform-only. */
  scale:.955!important;
  translate:0 -42px!important;
  transition:scale .56s cubic-bezier(.62,0,.2,1),
             translate .56s cubic-bezier(.62,0,.2,1)!important;
  transform-origin:50% 30%!important}

html.ptx-lift main{
  animation:ptxRiseIn .82s cubic-bezier(.16,1,.3,1) both!important}
/* no opacity anywhere in this keyframe — that is the whole point */
@keyframes ptxRiseIn{
  from{scale:.972;translate:0 42px}
  to  {scale:1;translate:0 0}}
html.ptx-lift main{transform-origin:50% 38%}

@media(prefers-reduced-motion:reduce){
  body.pt-leaving main,body.pt-leaving .ftr{
    scale:1!important;translate:0!important;transition:none!important}
  html.ptx-lift main{animation:none!important}}

/* ═══ HOME HERO: clean headline changes (final) ═══════════════════════
   The word-by-word rise broke Arabic headlines apart mid-change (words
   arriving out of order, lines half-built, empty frames between slides)
   and felt busy in English too. Each headline now changes as one piece:
   the old slide fades out quickly while the new one fades in and rises a
   few pixels — headline, text and button in a short stagger — with no
   gap and no split words. Same copy, colours, index line and rhythm. */
html body .cw .hero-sweep{display:none!important}
html body .cw .hero-slide :is(h1,h2) .hw{overflow:visible!important;padding:0!important;margin:0!important}
html body .cw .hero-slide :is(h1,h2) i{clip-path:none!important;transform:none!important;transition:none!important;will-change:auto!important}
/* ─────────────────────────────────────────────────────────────────────
   ZERO DEAD TIME. The version above staggered OPACITY as well as
   movement, and the two ends did not meet: the outgoing paragraph
   finished fading at 250ms while the incoming one did not start until
   200ms and was not solid until 650ms. For roughly a quarter of a second
   on every single rotation there was no paragraph on screen at all —
   which is the copy "disappearing" that was reported, made far more
   obvious by the frame times this file has now fixed elsewhere.

   The rule from here on: opacity crosses, movement staggers.
     · every element fades on the SAME clock, delay 0, so the outgoing
       and incoming halves always sum to 1 — there is no instant where
       nothing is painted;
     · the stagger that gives the entrance its shape moves to transform,
       which can lag freely because the element is already opaque while
       it travels.
   Same copy, same colours, same order, same rhythm — no gap.
   ───────────────────────────────────────────────────────────────── */
/* DOUBLE-FADE, the last real gap. The slide was fading at the same time
   as the copy inside it, so what you actually saw was the product of the
   two. Outgoing painted (1-t)², incoming painted t² — and at the halfway
   point that sums to 0.25 + 0.25 = 0.5. The headline genuinely dropped to
   half strength in the middle of every change, which no amount of
   re-timing the two curves can fix while both are fading.

   Opacity now has ONE owner: the copy. The slide itself never fades — it
   is either painted or not painted at all — so the cross is a true
   1 - t + t = 1 at every instant. The slide still hides completely once
   it is neither showing nor leaving, so nothing stale is ever composited
   or clickable. */
html body .cw .hero-slide{
  opacity:0!important;visibility:hidden!important;
  transition:visibility 0s linear .44s!important}
html body .cw .hero-slide.on,
html body .cw .hero-slide.is-out{
  opacity:1!important;visibility:visible!important;
  transition:visibility 0s linear 0s!important}

/* opacity: one clock for everything, no delay, so the cross always
   sums to 1. transform: staggered, which is where the shape comes from. */
html body .cw .hero-slide :is(h1,h2),
html body .cw .hero-slide .lede,
html body .cw .hero-slide .btn-row{
  transition:opacity .42s ease 0s,
             transform .72s cubic-bezier(.22,1,.28,1)!important}

html body .cw .hero-slide:not(.on) :is(h1,h2),
html body .cw .hero-slide:not(.on) .lede,
html body .cw .hero-slide:not(.on) .btn-row{
  opacity:0!important;transition-delay:0s!important}

/* WAITING (not yet shown): parked BELOW, so it rises into place. */
html body .cw .hero-slide:not(.on):not(.is-out) :is(h1,h2){transform:translate3d(0,26px,0)!important}
html body .cw .hero-slide:not(.on):not(.is-out) .lede{transform:translate3d(0,20px,0)!important}
html body .cw .hero-slide:not(.on):not(.is-out) .btn-row{transform:translate3d(0,15px,0)!important}

/* LEAVING: continues UP and out, the same direction the arriving copy is
   travelling — so the change reads as one movement passing through. */
html body .cw .hero-slide.is-out :is(h1,h2){transform:translate3d(0,-22px,0)!important}
html body .cw .hero-slide.is-out .lede{transform:translate3d(0,-17px,0)!important}
html body .cw .hero-slide.is-out .btn-row{transform:translate3d(0,-13px,0)!important}

html body .cw .hero-slide.on :is(h1,h2),
html body .cw .hero-slide.on .lede,
html body .cw .hero-slide.on .btn-row{opacity:1!important;transform:none!important}
/* the stagger, now carried entirely by transform */
html body .cw .hero-slide.on :is(h1,h2){transition-delay:0s,.02s!important}
html body .cw .hero-slide.on .lede{transition-delay:0s,.10s!important}
html body .cw .hero-slide.on .btn-row{transition-delay:0s,.17s!important}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION MOTION — scroll-driven, and it costs nothing
   ═══════════════════════════════════════════════════════════════════════
   What this is for: the movement BETWEEN SECTIONS as you scroll down a
   page. The site already had reveals — an IntersectionObserver adding a
   class, then a CSS transition — but a triggered reveal always plays at
   its own speed regardless of how you are scrolling, so it reads as
   "things fade in" rather than as the page moving with your hand.

   This uses native scroll-driven animations (animation-timeline: view()).
   Every value below is tied to the element's own position in the
   viewport, so the motion is scrubbed by the scroll itself: scroll
   slowly and it moves slowly, flick and it snaps. That connection is
   most of what separates a site that feels expensive from one that
   merely animates.

   The reason this is safe for the frame budget — which is the hard
   constraint on this project — is that a scroll-driven animation on
   transform and opacity is evaluated by the compositor. There is no
   scroll listener, no requestAnimationFrame loop, nothing reading layout
   per frame. Only transform and opacity are animated anywhere below; no
   filter, no width, no top, nothing that would force paint or layout.

   Falls back cleanly: where animation-timeline is unsupported the whole
   block is skipped by @supports and the existing observer reveals carry
   on exactly as before. Off entirely under reduced motion.
   ═══════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* The observer reveals are stood down here so the two systems do not
     animate the same elements against each other. No !important — an
     animation must still be able to win over these. */
  [data-rv],[data-rv-group]>*{opacity:1;transform:none;transition:none}

  /* ── 1. THE SECTION ITSELF ──────────────────────────────────────────
     The band stays put and its CONTENT travels — the section's own
     background is untouched, so the alternating paper/ink rhythm of the
     page never moves. Content arrives as the section enters and settles
     back as it leaves, so a section is doing something the whole time it
     is on screen rather than only at the moment it appears.

     NOTE — this was first written as TWO animations on the one element,
     one for the arrival and one for the departure. It does not work:
     both carry fill:both, so outside its own range each one still
     asserts its start or end value, and the departure — being second in
     the animation-name list — won every shared property. The arrival was
     masked completely, which a trace of one section across its whole
     pass showed as opacity pinned at 1 long before the section was even
     on screen. One animation over the element's whole time in view,
     with the settled state held across the middle, has no such conflict
     and is also cheaper.

     THE SHRINK. The first version of this moved the scale from .966 to 1
     — a 3% change, which is not perceptible on a section-sized block and
     was fairly described as "that doesn't even count as movement". The
     section now recedes properly: it comes up from 0.90, holds at full
     size while it is the thing you are reading, then shrinks away to
     0.87 and lifts as the next section arrives over it. A 13% change is
     unmistakable.

     The origin sits above centre so the block pulls back toward the top
     of the screen rather than collapsing into its own middle — that is
     what makes it read as receding into depth rather than as something
     being squashed.

     A note on what this is NOT. The obvious way to build card-stacking —
     position:sticky on each section so the next scrolls over it — is not
     available here, and it is worth writing down why so nobody tries it
     again: these sections are deliberately transparent. Measured across
     three pages, 2 of 46 have an opaque background; the rest sit between
     0 and 0.74 alpha so the ambient layer shows through them. Make one
     sticky and you see both sections at once through each other. Making
     them opaque would work, and would also delete the ambient background
     the whole site is built on. Transform gets the same read without
     touching a single pixel of the design.

     That prediction was tested rather than assumed: applying sticky plus
     the shrink to the real pages and screenshotting mid-handover showed
     four sections legible through one another at once — "Six jobs the
     platform does for you", "Influencer marketing", "AI creator
     discovery" and "Four steps" all overlapping and unreadable.

     TIMING, taken from the reference implementation of this effect. The
     shrink belongs on the EXIT specifically — not spread across the
     whole time the section is on screen, which is what a single
     cover-0%-to-100% animation does. Spread out, the section is subtly
     changing the entire time you are reading it and never quite settles;
     concentrated on the exit, it holds rock steady while it is the thing
     in front of you and then pulls back decisively as the next arrives.
     That is where the punch comes from.

     It needs two animations, which is the thing that failed earlier —
     but the reason it failed is specific and avoidable. Both had
     fill:both, so the departure asserted its start value (the settled
     state) during the arrival and overrode it. The departure now uses
     fill:forwards, so before its own range it contributes nothing at
     all and the arrival is free to run. After its range it holds the
     shrunk state. In the middle the arrival holds settled and the
     departure is silent. No conflict, and each half gets the range it
     actually wants.

     The SECTION names the timeline and its content follows it, rather
     than the content using view() on itself. Same result wherever the
     content is unclipped, and correct where it is not: a couple of these
     bands clip (.trust-strip, .cta-band), which makes them scroll
     containers, so a .shell inside one was measuring against a scroller
     that never moves and its animation sat frozen. Anchoring to the
     section — whose own scroller is the document — fixes those without
     changing anything about the ones that already worked. */
  main > section{view-timeline-name:--sec}
  main > section > .shell,
  main > section > .shell-wide{
    animation:secIn linear both, secOut linear forwards;
    animation-timeline:--sec, --sec;
    /* The arrival finishes before the section has fully entered and the
       departure does not begin until it has started to leave, which
       leaves a genuine settled window in between. Running each across
       its whole range instead — which is the obvious first choice —
       makes the two nearly meet on a section taller than the viewport,
       so the copy is in motion for almost the entire time it is in
       front of the reader. Traced on a 1228px section: the settled
       window was two samples wide. It is worth a great deal more than
       that. */
    animation-range:entry 0% entry 62%, exit 34% exit 100%;
    transform-origin:50% 0%;
  }
  /* arriving: rises and grows into place */
  @keyframes secIn{
    from{opacity:.15;transform:translate3d(0,90px,0) scale(.90)}
    to  {opacity:1;  transform:none}
  }
  /* leaving: pulls back and away as the next section comes over it */
  @keyframes secOut{
    from{opacity:1;  transform:none}
    to  {opacity:.25;transform:translate3d(0,-30px,0) scale(.86)}
  }

  /* the first section on a page is already on screen at load — it must
     not arrive, or every page starts by animating itself into place */
  main > section:first-of-type > .shell,
  .phero > .shell,.cw > .shell{animation:none}

  /* ── 1b. THE HERO RECEDES ───────────────────────────────────────────
     The first screen was excluded from all of this, because a hero that
     animates IN is a page that animates itself into place on every load.
     But it should still go somewhere when you leave it, and that is the
     move the whole page is judged by — the first thing a visitor does is
     scroll down from it.

     Only the EXIT is animated, so nothing runs on load. The section's
     own background stays edge to edge and its CONTENTS recede inside it:
     the wall, the scrim over it and the copy all pull back together, so
     the hero falls away into depth rather than sliding off. .cw clips,
     so nothing can escape the frame while it shrinks.

     The wall is oversized (1498×1080 against a 1440×900 section), which
     is what makes this safe — at 0.84 it is still larger than the frame,
     so no gap opens at the edges as it pulls back. */
  .cw > .cw-wall,.cw > .cw-scrim,.cw > .cw-in{
    animation:heroRecede linear both;
    animation-timeline:--sec;
    animation-range:exit 0% exit 100%;
    transform-origin:50% 42%;
  }
  @keyframes heroRecede{
    from{transform:none;opacity:1}
    to  {transform:scale(.84) translate3d(0,-5%,0);opacity:.32}
  }
  /* the scroll cue belongs to the first screen only — it leaves early
     rather than shrinking along with everything else */
  .cw > .cw-down{
    animation:heroCueOut linear both;
    animation-timeline:--sec;
    animation-range:exit 0% exit 24%;
  }
  @keyframes heroCueOut{
    from{opacity:1;transform:none}
    to  {opacity:0;transform:translate3d(0,26px,0)}
  }

  /* ── 2. THE HEADING CASCADE ─────────────────────────────────────────
     Eyebrow, headline, supporting line and buttons resolve in order
     rather than together. The stagger is expressed as different RANGES
     rather than delays, because a delay is wall-clock time and would
     break the link to the scroll.

     Headings carrying [data-split] are deliberately left out. Those
     already have their own reveal — every word is wrapped in a clipping
     box and rises from behind its own baseline — and putting this on top
     of it meant three layers of motion on one element: the section's
     travel, the word rise, and this. On a recorded scroll-through the
     result was a headline whose words sat at different opacities and
     stayed half-clipped, because the two systems were resolving on
     different clocks. The word rise is the better effect of the two, so
     it keeps the headline and this cascade takes everything else. */
  .sec-head > *:not([data-split]){animation:partRise linear both;animation-timeline:--sec}
  .sec-head > *:nth-child(1){animation-range:entry 4%  cover 22%}
  .sec-head > *:nth-child(2){animation-range:entry 8%  cover 27%}
  .sec-head > *:nth-child(3){animation-range:entry 12% cover 32%}
  .sec-head > *:nth-child(n+4){animation-range:entry 16% cover 36%}
  @keyframes partRise{
    from{opacity:0;transform:translate3d(0,30px,0)}
    to  {opacity:1;transform:none}
  }

  /* ── 3. CARDS AND GRIDS ─────────────────────────────────────────────
     Cards now turn up out of a tilted plane rather than sliding. This is
     the documented technique for the effect — the grid carries the
     perspective, each card rotates from rotateX back to flat while
     rising and coming forward in Z. It is the single thing that makes a
     grid of cards read as built rather than as a list that faded in.

     Each card is on its OWN view() timeline, so the stagger comes for
     free from where the cards sit: the top row is further through its
     range than the row below at any given moment. That is better than
     the nth-child ranges this replaces, which staggered by DOM order and
     so got a 3-column grid wrong — the fourth card is not later than the
     third, it is directly below it.

     rotateX only, and no transform-style:preserve-3d on the cards. The
     cards do not have 3D children, and preserve-3d would switch off the
     clipping that the rounded corners and overflow rely on.

     A NAMED timeline on the grid, not view() on each card, and the
     reason matters. view() measures the subject against its nearest
     SCROLL CONTAINER, and an ancestor with overflow:hidden is a scroll
     container even though it never scrolls. Several of these grids clip
     (.netstats does), so their cards were resolving against a scroller
     that never moves: the animation attached, reported its name,
     computed a transform, and froze. Traced on .netstats across eight
     scroll positions spanning its whole entrance, currentTime sat at
     41.0021% the entire way.

     That is invisible to every other check — the CSS is valid, the
     element has an animation, nothing errors. The grid names its own
     view timeline instead, and the grid's scroller IS the document, so
     the cards inherit a timeline that actually advances.

     One timeline shared by the grid means the free per-card stagger is
     gone, so it comes back explicitly below — which is the better
     behaviour for a grid anyway, since cards in the same row should
     arrive together rather than by DOM order. */
  [data-rv-group],.steps5,.netstats,.worlds,.iwrap,.split,.roi-grid2{
    perspective:1200px;perspective-origin:50% 38%;
    view-timeline-name:--cardgrid;
  }
  [data-rv-group] > *,
  .steps5 > *,.netstats > div,.worlds > .world,
  .iwrap > .iw,.split > article,.roi-grid2 > *{
    backface-visibility:hidden;
    animation:cardTurn linear both;
    animation-timeline:--cardgrid;
    animation-range:entry 6% cover 44%;
  }
  /* the stagger, restored explicitly */
  [data-rv-group] > *:nth-child(2),.steps5 > *:nth-child(2),
  .netstats > div:nth-child(2),.worlds > .world:nth-child(2){animation-range:entry 10% cover 48%}
  [data-rv-group] > *:nth-child(3),.steps5 > *:nth-child(3),
  .netstats > div:nth-child(3),.worlds > .world:nth-child(3){animation-range:entry 14% cover 52%}
  [data-rv-group] > *:nth-child(n+4),.steps5 > *:nth-child(n+4),
  .netstats > div:nth-child(n+4){animation-range:entry 18% cover 56%}
  @keyframes cardTurn{
    from{opacity:.2;transform:rotateX(16deg) translate3d(0,54px,-110px)}
    to  {opacity:1; transform:none}
  }

  /* Anything inside a rail that is already moving on its own is left
     alone. A card in a marquee is being translated every frame by the
     drift; adding an entrance to it means two systems writing the same
     transform, and the card jumps. */
  [data-drift] [data-rv-group] > *,.cmq *,.cw-wall *,.trust-mq *,
  .agent-track-in > *{animation:none}

  /* ── 4. DEPTH ───────────────────────────────────────────────────────
     A picture drifts against its own frame across the whole time it is
     on screen. This is the one piece that reads as depth rather than
     entrance, and it is what stops a long page feeling flat. The frame
     must clip, or the image would escape it.

     The frame has to clip or the picture escapes it — but that clip is
     exactly what killed this effect. overflow:hidden makes the figure a
     scroll container, so the image inside resolved its view() against a
     scroller that never moves and the drift never ran. It was doing
     nothing at all, which is why switching it off changed no measurement.
     The figure names its own timeline instead; the figure's scroller is
     the document, so the image inherits one that advances. */
  main figure{overflow:hidden;view-timeline-name:--figframe}
  main figure > img{
    animation:mediaDrift linear both;
    animation-timeline:--figframe;
    animation-range:cover 0% cover 100%;
  }
  /* A picture inside a horizontally-scrolling strip is excluded. Those
     strips are scroll containers, so the figure's timeline resolved
     against them and never advanced — the drift was dead on 28 images
     across two pages. Vertical scroll parallax inside a horizontal
     carousel is the wrong effect anyway; this drops it rather than
     forcing a timeline onto something that should not have one. */
  .ch-strip figure > img,.pslide figure > img,
  [data-drift] figure > img,.cmq figure > img,.trust-mq figure > img{animation:none}
  @keyframes mediaDrift{
    from{transform:translate3d(0,-5%,0) scale(1.1)}
    to  {transform:translate3d(0,5%,0)  scale(1.1)}
  }

  /* ── 5. (REMOVED) THE CLIP-PATH LINE WIPE ───────────────────────────
     A clip-path wipe on section headlines was tried here and taken out
     again. A wipe of that kind only works when every LINE sits in its
     own clipping box — which is what the hero does, via .hw. Applied to
     a whole multi-line h2 it clips the entire block as one rectangle, so
     mid-animation it slices straight through the middle of a line and
     cuts the letters in half. Caught on a recorded scroll-through: the
     word "reach" in "You've paid for reach" was sheared horizontally.
     It read as a rendering fault, not as a reveal.
     The headline already moves as part of the .sec-head cascade above,
     which is the right place for it, and measurement showed this layer
     contributed nothing but that risk. */

  /* ── responsive ─────────────────────────────────────────────────────
     A phone shows far less of a section at once, so the same distances
     read as a much bigger move. Amplitudes come down and the ranges
     tighten so content is settled sooner. */
  @media (max-width:900px){
    @keyframes secArrive{
      from{opacity:.4;transform:translate3d(0,40px,0) scale(.982)}
      to  {opacity:1; transform:none}
    }
    @keyframes secDepart{
      from{opacity:1;transform:none}
      to  {opacity:.55;transform:translate3d(0,-18px,0)}
    }
    /* no 3D on a phone — a rotateX big enough to read on a small
       screen distorts the card, and the perspective is wasted */
    @keyframes cardTurn{
      from{opacity:.25;transform:translate3d(0,28px,0)}
      to  {opacity:1;  transform:none}
    }
    [data-rv-group],.steps5,.netstats,.worlds,.iwrap,.split,.roi-grid2{perspective:none}
    /* a phone shows far less of a section at once, so the same shrink
       reads as much larger — the delta comes down but stays visible */
    @keyframes secIn{
      from{opacity:.3;transform:translate3d(0,44px,0) scale(.95)}
      to  {opacity:1; transform:none}
    }
    @keyframes secOut{
      from{opacity:1; transform:none}
      to  {opacity:.45;transform:translate3d(0,-16px,0) scale(.94)}
    }
    main figure > img{animation:none}   /* no parallax on a phone */
  }
}
}

/* skip link: visually hidden in place until focused (the old -9999px park
   widened the page on phones, worst in Arabic) */
.skip:not(:focus){inset-inline-start:0;inset-block-start:0;inline-size:1px;block-size:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ═══ FIRST → SECOND SCREEN: the handover ═════════════════════════════
   Builds on "THE HERO RECEDES": as you leave the first screen its wall,
   scrim and copy now tip back into depth (a slight 3D tilt) while they
   shrink and fade, and the brands strip slides up over the hero like a
   sheet — rounded top edge and a soft shadow that flatten as it lands.
   Scroll-driven CSS only (compositor), nothing runs on load; browsers
   without scroll timelines simply keep the page as it is. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes heroRecede{
      from{transform:none;opacity:1}
      to  {transform:perspective(1400px) rotateX(9deg) scale(.8) translate3d(0,-6%,0);opacity:.24}
    }
    .cw + .trust-strip{position:relative;z-index:3;margin-block-start:-44px;background:var(--paper);
      border-radius:44px 44px 0 0;box-shadow:0 -28px 60px -34px rgba(0,0,0,.55);
      animation:sheetLand linear both;animation-timeline:--sec;animation-range:entry 0% cover 45%}
    @keyframes sheetLand{
      from{border-radius:44px 44px 0 0;box-shadow:0 -28px 60px -34px rgba(0,0,0,.55)}
      to  {border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,0)}
    }
  }
}