/* ═══════════════════════════════════════════════════════════════════════
   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.) ── */
#ambientBg{position:fixed;inset:0;z-index:0;pointer-events:none}
/* 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(66px,6.2vw,104px);
  --sec-y-tight:clamp(44px,4vw,66px);

  /* 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 */
  --neon-text:#5E7800;
  --orange-text:#C9430C;
}
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}}
body{
  margin:0;background:var(--paper);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:var(--paper-2)}
.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:linear-gradient(168deg,var(--orange-lift) 0%,var(--orange) 52%,var(--orange-deep) 100%);
  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:linear-gradient(168deg,#E4FF62 0%,var(--neon) 52%,var(--neon-deep) 100%);
  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:#C9430C;--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)}
.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.
   ─────────────────────────────────────────────────────────────────── */
[data-rv]{
  opacity:0;
  transform:translate3d(0,var(--rv-y,22px),0) scale(var(--rv-s,1));
  filter:blur(var(--rv-b,0px));
  transition:opacity .78s var(--ease-out),transform .9s var(--ease-out),filter .78s var(--ease-out);
  transition-delay:var(--rv-d,0ms);
  will-change:opacity,transform,filter;
}
[data-rv].is-in{opacity:1;transform:none;filter:blur(0)}
[data-rv=fade]{--rv-y:0px}
[data-rv=rise]{--rv-y:46px;--rv-s:.975;--rv-b:5px}
[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;--rv-b:7px}
@media(prefers-reduced-motion:reduce){[data-rv]{filter:none!important}}

/* 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(20px) saturate(170%);
  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%;
  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)}
.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{margin:0 0 14px;font-size:.8rem;font-weight:600;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;
  -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;
  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;-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;
  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,#7A9900 0%,#5E7800 55%,#485E00 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,#7A9900 0%,#5E7800 55%,#485E00 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#posLeft[data-mode=neon] .btn-primary{
  background:linear-gradient(168deg,#E4FF62 0%,var(--neon) 52%,var(--neon-deep) 100%);
  --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}
}