/* ============================================================================
   PRISM DESIGN SYSTEM — Payout Partners
   Premium iGaming affiliate program (B2B). Flagship brand: Dice Palace.
   Aesthetic: porcelain ground, liquid-chrome blob, holographic foil,
   light glassmorphism, Satoshi + Switzer, electric indigo.

   ORGANIZATION
   01 Tokens            05 Components
   02 Reset / base      06 Sections & background rhythm
   03 Typography        07 Utilities
   04 Primitives        08 Responsive
                        09 Reduced motion / print
   ============================================================================ */

/* ============================================================================
   01 · TOKENS
   ============================================================================ */
:root{
  /* Grounds */
  --porcelain:#F4F5F7;
  --porcelain-2:#ECEEF2;
  --mist:#E7E9EE;
  --white:#FFFFFF;
  --ink:#0E1116;
  --ink-2:#141A28;

  /* Text */
  --t-ink:#0E1116;
  --t-slate:#565E70;
  --t-mute:#8A90A0;
  --t-on:#F4F5F7;
  --t-on-dim:#AEB4C4;

  /* Accent — indigo */
  --indigo:#4F46E5;
  --indigo-2:#6366F1;
  --indigo-deep:#3730A3;
  --indigo-glow:rgba(79,70,229,.28);
  --indigo-tint:rgba(79,70,229,.10);

  /* Iridescent stops (holographic foil only — never body text) */
  --lilac:#C9B8FF;
  --mint:#B8F2E6;
  --peach:#FFD9C2;
  --sky:#BCD9FF;
  --rose:#FFC2E6;
  --iris:linear-gradient(110deg,#C9B8FF 0%,#B8F2E6 28%,#FFD9C2 56%,#BCD9FF 82%,#FFC2E6 100%);
  --iris-soft:linear-gradient(120deg,rgba(201,184,255,.85),rgba(184,242,230,.85),rgba(255,217,194,.85),rgba(188,217,255,.85));
  --iris-text:linear-gradient(110deg,#9F86FF,#62C9B6,#FFB58E,#7FB4FF,#E58FC2,#9F86FF);

  /* Chrome / metal */
  --chrome-1:#EEF0F4;
  --chrome-2:#C7CCD6;
  --chrome-3:#9AA0AD;
  --chrome-4:#6E7484;

  /* Lines */
  --line:rgba(14,17,22,.10);
  --line-2:rgba(14,17,22,.16);
  --glass-line:rgba(255,255,255,.7);

  /* Glass */
  --glass:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.38);

  /* Radii */
  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --pill:999px;

  /* Shadows */
  --sh-soft:0 24px 50px -28px rgba(40,40,80,.25);
  --sh-card:0 30px 60px -34px rgba(50,50,100,.30);
  --sh-glass:inset 0 1px 0 rgba(255,255,255,.85),0 20px 44px -26px rgba(60,60,110,.30);
  --sh-pop:0 44px 80px -34px rgba(40,50,90,.5);

  /* Fonts */
  --display:"Satoshi",system-ui,-apple-system,sans-serif;
  --sans:"Switzer",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* Layout */
  --maxw:1280px;
  --gut:clamp(16px,4vw,52px);
  --nav-h:72px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============================================================================
   02 · RESET / BASE
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--sans);
  font-weight:400;
  color:var(--t-ink);
  background:var(--porcelain);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* Ambient caustic light wash behind everything */
body::before{
  content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 12%,rgba(201,184,255,.22),transparent 60%),
    radial-gradient(55% 45% at 85% 8%,rgba(188,217,255,.24),transparent 62%),
    radial-gradient(50% 60% at 78% 92%,rgba(184,242,230,.20),transparent 60%),
    radial-gradient(50% 50% at 8% 88%,rgba(255,217,194,.18),transparent 60%);
  animation:caustic 26s ease-in-out infinite;
}
@keyframes caustic{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(2.5%,-2%,0) scale(1.05)}
  66%{transform:translate3d(-2%,2.5%,0) scale(1.04)}
}

/* Fine film grain — quiet premium texture */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

main{position:relative;z-index:2;display:block}
section{position:relative;z-index:2}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus{outline:none}

/* Accessible focus ring */
:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:3px;
  border-radius:6px;
}

::selection{background:rgba(79,70,229,.18);color:var(--ink)}

.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--indigo);color:#fff;padding:10px 16px;border-radius:var(--pill);
  font-family:var(--display);font-weight:700;font-size:14px;
}
.skip-link:focus{left:16px}

/* Layout container */
.wrap,.container{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap--wide{max-width:1440px}
.wrap--narrow{max-width:880px}

/* ============================================================================
   03 · TYPOGRAPHY
   ============================================================================ */
h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--t-ink);
  text-wrap:balance;
}
h1{font-size:clamp(2.8rem,6.5vw,6rem);font-weight:900;line-height:.96;letter-spacing:-.045em}
h2{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:900}
h3{font-size:clamp(1.4rem,2.4vw,2rem)}
h4{font-size:clamp(1.1rem,1.6vw,1.35rem)}
h5{font-size:1rem;letter-spacing:-.01em}

p{color:var(--t-slate);line-height:1.6}
strong,b{font-weight:600;color:var(--t-ink)}

.eyebrow{
  font-family:var(--mono);
  font-size:clamp(10px,1vw,12px);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--t-mute);
}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--t-slate);line-height:1.55;max-width:60ch}
.mono{font-family:var(--mono);letter-spacing:.04em}

.measure{max-width:68ch}
.measure-tight{max-width:54ch}

/* ============================================================================
   04 · PRIMITIVES — holographic foil + glass
   ============================================================================ */

/* Holographic animated text (headlines / accents only) */
.holo-text{
  background:var(--iris-text);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:holoHue 9s ease-in-out infinite;
}
@keyframes holoHue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Iridescent 1px gradient border via mask */
.holo-edge{
  position:relative;
}
.holo-edge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:linear-gradient(125deg,#C9B8FF,#BCD9FF,#fff,#B8F2E6,#FFD9C2,#FFC2E6,#C9B8FF);
  background-size:260% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.95;
  filter:drop-shadow(0 0 6px rgba(201,184,255,.45));
  animation:holoHue 9s ease-in-out infinite;
}

/* Thin animated iridescent "prism light streak" — section divider */
.holo-rule{
  position:relative;height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  overflow:visible;
}
.holo-rule::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent 0%,rgba(201,184,255,.0) 12%,#C9B8FF 32%,#BCD9FF 46%,#fff 54%,#B8F2E6 62%,#FFD9C2 78%,transparent 92%);
  background-size:240% 100%;
  filter:blur(.6px);
  mix-blend-mode:screen;
  opacity:.9;
  animation:streakDrift 8s ease-in-out infinite;
}
@keyframes streakDrift{
  0%,100%{background-position:0% 50%;opacity:.55}
  50%{background-position:100% 50%;opacity:1}
}
.holo-rule--center{max-width:340px;margin-inline:auto}

/* Frosted glass panel */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--r);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--sh-glass);
  overflow:hidden;
}
/* faint frosted texture / rim wash */
.glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.45),transparent 55%),
    radial-gradient(100% 100% at 100% 100%,rgba(201,184,255,.08),transparent 60%);
  opacity:.9;
}
.glass>*{position:relative;z-index:1}

/* ----- liquid-chrome blob ----- */
.chrome-blob{
  position:relative;
  width:var(--blob-size,360px);
  aspect-ratio:1/1;
  border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:
    radial-gradient(38% 30% at 30% 24%,#ffffff 0%,rgba(255,255,255,0) 52%),
    radial-gradient(30% 22% at 68% 60%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 60%),
    radial-gradient(70% 70% at 72% 80%,#7e9bff 0%,rgba(126,155,255,0) 58%),
    conic-gradient(from 210deg at 50% 50%,#C9B8FF,#BCD9FF,#B8F2E6,#FFD9C2,#FFC2E6,#9bb6ff,#C9B8FF);
  box-shadow:
    inset 0 14px 34px rgba(255,255,255,.92),
    inset 0 -34px 66px rgba(54,62,118,.55),
    inset 0 -10px 22px rgba(40,46,92,.45),
    inset 26px 6px 54px rgba(184,242,230,.5),
    inset -22px -4px 50px rgba(201,184,255,.45),
    inset 0 0 0 1.5px rgba(255,255,255,.6),
    inset 0 0 26px rgba(255,255,255,.4),
    0 50px 90px -30px rgba(80,90,160,.55);
  animation:blobMorph 12s ease-in-out infinite,blobFloat 8s ease-in-out infinite;
  will-change:transform,border-radius;
}
/* specular highlight blob */
.chrome-blob::after{
  content:"";position:absolute;inset:13% 24% auto 16%;height:22%;border-radius:50%;z-index:2;
  background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(255,255,255,0));
  filter:blur(2px);transform:rotate(-22deg);
}
/* specular reflection sweep ring */
.chrome-blob::before{
  content:"";position:absolute;inset:8%;border-radius:inherit;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 16% at 50% 18%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(40% 10% at 32% 82%,rgba(255,255,255,.4),rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;filter:blur(1px);
}
@keyframes blobMorph{
  0%,100%{border-radius:46% 54% 58% 42%/52% 44% 56% 48%}
  33%{border-radius:58% 42% 44% 56%/46% 58% 42% 54%}
  66%{border-radius:42% 58% 52% 48%/56% 46% 54% 44%}
}
@keyframes blobFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
/* size variants */
.chrome-blob--xl{--blob-size:clamp(280px,42vw,520px)}
.chrome-blob--md{--blob-size:clamp(160px,22vw,300px)}
.chrome-blob--orb{--blob-size:clamp(56px,8vw,96px)}
/* shape variants per page (recurring object, different silhouette) */
.chrome-blob--pebble{border-radius:60% 40% 55% 45%/55% 50% 50% 45%}
.chrome-blob--drop{border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.chrome-blob--seed{border-radius:70% 30% 70% 30%/40% 60% 40% 60%}
/* parallax wrapper, set by JS */
.blob-stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1}
.blob-stage .chrome-blob{transform:translate3d(var(--px,0),var(--py,0),0)}

/* small chrome orb (decorative) */
.orb{
  position:absolute;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(35% 35% at 32% 28%,#fff,rgba(255,255,255,0) 60%),
    radial-gradient(22% 22% at 70% 38%,rgba(184,242,230,.9),rgba(184,242,230,0) 60%),
    radial-gradient(circle at 70% 75%,#aebdff,#e8ecff);
  box-shadow:inset 0 -6px 14px rgba(80,90,150,.4),inset 0 0 0 1px rgba(255,255,255,.4),0 16px 30px -14px rgba(80,90,160,.5);
  animation:blobFloat 7s ease-in-out infinite;
}

/* light streak (hero beam) */
.streak{
  position:absolute;width:170%;height:10px;left:-35%;top:38%;border-radius:50%;z-index:0;
  background:linear-gradient(90deg,transparent 0%,rgba(201,184,255,.35) 18%,#C9B8FF 34%,#BCD9FF 48%,#fff 56%,#B8F2E6 64%,#FFD9C2 80%,transparent 100%);
  filter:blur(2px);transform:rotate(-18deg);opacity:.9;mix-blend-mode:screen;pointer-events:none;
  animation:streakPulse 8s ease-in-out infinite;
}
.streak::before{
  content:"";position:absolute;left:30%;right:18%;top:50%;height:2px;transform:translateY(-50%);
  border-radius:50%;background:linear-gradient(90deg,transparent,#fff,transparent);filter:blur(.4px);opacity:.95;
}
@keyframes streakPulse{
  0%,100%{opacity:.55;transform:rotate(-18deg) scaleX(.94)}
  50%{opacity:1;transform:rotate(-15deg) scaleX(1.06)}
}

/* ============================================================================
   05 · COMPONENTS
   ============================================================================ */

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1;
  padding:14px 24px;border-radius:var(--pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),background .26s var(--ease),color .26s var(--ease);
  will-change:transform;
}
.btn svg{width:1.05em;height:1.05em}
.btn--lg{padding:17px 30px;font-size:16px}
.btn--sm{padding:10px 18px;font-size:13.5px}
.btn--block{width:100%}

.btn--primary{
  background:linear-gradient(180deg,var(--indigo-2),var(--indigo));
  color:#fff;
  box-shadow:0 14px 30px -12px var(--indigo-glow),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(125deg,#C9B8FF,#BCD9FF,#fff,#B8F2E6,#FFD9C2,#C9B8FF);
  background-size:260% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;animation:holoHue 9s ease-in-out infinite;
}
.btn--primary:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg,var(--indigo-2),var(--indigo-deep));
  box-shadow:0 24px 46px -14px var(--indigo-glow),0 0 0 4px rgba(79,70,229,.12),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--primary:active{transform:translateY(-1px)}

.btn--glass{
  background:var(--glass);
  border-color:var(--glass-line);
  color:var(--t-ink);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:var(--sh-glass);
}
.btn--glass:hover{transform:translateY(-3px);box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.9)}

.btn--ghost{
  background:transparent;border-color:var(--line-2);color:var(--t-slate);
}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--indigo);color:var(--indigo)}

.btn--dark{background:var(--ink);color:#fff;box-shadow:0 16px 36px -18px rgba(0,0,0,.6)}
.btn--dark:hover{transform:translateY(-3px);background:#000}

/* ---------- Pills / tags ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  padding:6px 13px;border-radius:var(--pill);
  background:var(--glass);border:1px solid var(--glass-line);color:var(--t-slate);
  backdrop-filter:blur(8px);
}
.pill--indigo{background:var(--indigo-tint);border-color:rgba(79,70,229,.2);color:var(--indigo)}
.pill--holo{
  background:var(--iris);background-size:200% 100%;color:#2a3350;border-color:rgba(255,255,255,.7);
  animation:holoHue 8s ease-in-out infinite;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 4px var(--indigo-glow)}
.pill .dot--live{background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.18)}

/* ---------- Section opener (numbered editorial) ---------- */
.sec-opener{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,3vw,36px)}
.sec-opener__num{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--indigo)}
.sec-opener__label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--t-mute);white-space:nowrap}
.sec-opener__rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sec-opener__tick{width:8px;height:8px;border-radius:50%;background:var(--iris);background-size:200%;box-shadow:0 0 0 3px rgba(184,242,230,.4);animation:holoHue 8s ease-in-out infinite}

/* section heading block */
.sec-head{max-width:62ch;margin-bottom:clamp(28px,4vw,52px)}
.sec-head h2{margin-bottom:18px}
.sec-head p{font-size:clamp(15px,1.5vw,18px)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .sec-opener{justify-content:center}
.sec-head--center .sec-opener__rule{display:none}

/* ---------- Cards (generic glass card) ---------- */
.card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.8);
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.4),transparent 55%);
}
.card>*{position:relative;z-index:1}
.card--hover:hover{transform:translateY(-8px);box-shadow:var(--sh-pop),inset 0 1px 0 rgba(255,255,255,.85)}
.card--solid{background:var(--white);box-shadow:0 20px 44px -28px rgba(50,50,100,.28),inset 0 1px 0 rgba(255,255,255,.9)}

/* ---------- Commission cards ---------- */
.comm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.ccard{
  position:relative;border-radius:var(--r-lg);padding:26px 22px 24px;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.5),transparent 52%),
    radial-gradient(100% 100% at 100% 100%,rgba(201,184,255,.10),transparent 60%),
    var(--glass);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.8);
  overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  display:flex;flex-direction:column;gap:14px;
}
.ccard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:1;pointer-events:none;
  background:linear-gradient(125deg,#C9B8FF,#BCD9FF,#fff,#B8F2E6,#FFD9C2,#C9B8FF);
  background-size:260% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(201,184,255,.5));
  animation:holoHue 9s ease-in-out infinite;
}
.ccard>*{position:relative;z-index:2}
.ccard:hover{transform:translateY(-8px);box-shadow:var(--sh-pop),inset 0 1px 0 rgba(255,255,255,.85)}
.ccard--feature{
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.55),transparent 52%),
    linear-gradient(165deg,rgba(255,255,255,.72),rgba(231,236,255,.72));
  box-shadow:var(--sh-card),0 0 0 1px rgba(201,184,255,.35),inset 0 1px 0 rgba(255,255,255,.85);
}
.ccard--feature::before{padding:2px;filter:drop-shadow(0 0 10px rgba(188,217,255,.7));animation-duration:7s}
.ccard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ccard__name{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t-slate)}
.ccard__orb{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:
    radial-gradient(35% 35% at 30% 26%,#fff,rgba(255,255,255,0) 60%),
    radial-gradient(24% 24% at 72% 70%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),
    conic-gradient(from 40deg,#C9B8FF,#B8F2E6,#FFD9C2,#BCD9FF,#C9B8FF);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.9),inset 0 -4px 9px rgba(80,90,140,.4),inset 0 0 0 1px rgba(255,255,255,.45),0 10px 20px -10px rgba(100,110,180,.5);
  animation:blobFloat 6s ease-in-out infinite;
}
.ccard__fig{font-family:var(--display);font-size:clamp(34px,4vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1;color:#0E1116}
.ccard__fig small{color:#0E1116}
.ccard__fig small{font-size:.55em;font-weight:700}
.ccard__tag{
  align-self:flex-start;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;
  padding:5px 11px;border-radius:var(--pill);background:var(--indigo-tint);color:var(--indigo);
}
.ccard--feature .ccard__tag{background:var(--iris);background-size:200%;color:#2a3350;animation:holoHue 8s ease-in-out infinite}
.ccard__copy{font-size:13.5px;color:var(--t-slate);line-height:1.5}

/* ---------- Trust strip ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(22px,3vw,34px)}
.trust-strip__item{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-sm);
  padding:14px 16px;backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--t-slate);line-height:1.45;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.trust-strip__item:hover{transform:translateY(-3px);box-shadow:var(--sh-soft),inset 0 1px 0 rgba(255,255,255,.85)}
.trust-strip__item b{display:block;font-family:var(--display);color:var(--t-ink);font-size:18px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px}

/* ---------- Stat rail / marquee ---------- */
.marquee{
  overflow:hidden;position:relative;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.4);backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{display:flex;gap:48px;width:max-content;animation:marqueeScroll 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.marquee__item .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-mute)}
.marquee__item .v{font-family:var(--display);font-size:24px;font-weight:900;letter-spacing:-.02em;color:var(--t-ink)}
.marquee__item .star{color:var(--indigo);font-size:14px}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}

/* glass stat chips row */
.stat-chips{display:flex;flex-wrap:wrap;gap:12px}
.stat-chip{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-sm);
  padding:14px 18px;min-width:140px;backdrop-filter:blur(10px);
  box-shadow:var(--sh-soft),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.stat-chip:hover{transform:translateY(-3px);box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.9)}
.stat-chip .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-mute)}
.stat-chip .v{font-family:var(--display);font-size:30px;font-weight:900;letter-spacing:-.03em;margin-top:4px;color:var(--t-ink)}

/* ---------- Earnings projector ---------- */
.proj{
  position:relative;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-lg);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.85);
  padding:clamp(22px,2.6vw,32px);
  overflow:hidden;
}
.proj::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:radial-gradient(120% 80% at 100% 0%,rgba(201,184,255,.12),transparent 55%);
}
.proj>*{position:relative;z-index:1}
.proj__head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.proj__title{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-mute)}
.proj__tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--pill);background:rgba(14,17,22,.05);border:1px solid var(--line)}
.proj-seg{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;
  padding:7px 14px;border-radius:var(--pill);color:var(--t-slate);
  transition:background .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease);
}
.proj-seg.is-active{background:var(--white);color:var(--indigo);box-shadow:0 4px 12px -6px rgba(40,50,90,.4),inset 0 1px 0 rgba(255,255,255,.9)}
.proj__readout-wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:6px}
.proj__monthly{font-family:var(--display);font-size:clamp(40px,6vw,58px);font-weight:900;letter-spacing:-.04em;line-height:1;
  background:var(--iris-text);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoHue 9s ease-in-out infinite}
.proj__per{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--t-mute)}
.proj__life{font-size:14px;color:var(--t-slate);margin-bottom:18px}
.proj__life b{font-family:var(--display);font-weight:900;color:var(--t-ink);letter-spacing:-.02em}
.proj__slider-row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.proj__readout{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.02em;min-width:3ch;text-align:right;color:var(--t-ink)}
.proj__slider-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-mute)}

/* range input */
.proj__slider{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--indigo) 0%,var(--indigo-2) var(--fill,55%),var(--mist) var(--fill,55%));
  cursor:pointer;outline:none;
}
.proj__slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(40% 40% at 35% 30%,#fff,#dfe4f5);
  border:2px solid var(--indigo);
  box-shadow:0 4px 12px -3px var(--indigo-glow),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .15s var(--ease);
}
.proj__slider::-webkit-slider-thumb:hover{transform:scale(1.12)}
.proj__slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--indigo);
  background:radial-gradient(40% 40% at 35% 30%,#fff,#dfe4f5);
  box-shadow:0 4px 12px -3px var(--indigo-glow);
}
.proj__slider::-moz-range-track{height:8px;border-radius:var(--pill);background:var(--mist)}
.proj__presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.proj__chip{
  font-family:var(--mono);font-size:11px;font-weight:500;padding:7px 13px;border-radius:var(--pill);
  background:rgba(255,255,255,.6);border:1px solid var(--line);color:var(--t-slate);
  transition:all .22s var(--ease);
}
.proj__chip:hover{border-color:var(--indigo);color:var(--indigo)}
.proj__chip.is-active{background:var(--indigo);border-color:var(--indigo);color:#fff;box-shadow:0 8px 18px -8px var(--indigo-glow)}
.proj__foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--t-mute)}
.proj .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.form-row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.field{position:relative}
.field--float{padding-top:8px}
.field label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-mute);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:15px;line-height:1.4;
  padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:rgba(255,255,255,.78);
  color:var(--t-ink);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:120px;resize:vertical}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23565E70' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;cursor:pointer;
}
.field input::placeholder,.field textarea::placeholder{color:var(--t-mute)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--indigo);background:#fff;
  box-shadow:0 0 0 4px var(--indigo-glow);
}
/* floating label variant */
.field--floating{position:relative}
.field--floating input,.field--floating textarea{padding-top:22px;padding-bottom:8px}
.field--floating label{
  position:absolute;left:16px;top:15px;margin:0;pointer-events:none;
  text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:15px;color:var(--t-mute);
  transition:transform .18s var(--ease),font-size .18s var(--ease),color .18s var(--ease);
}
.field--floating input:focus + label,
.field--floating input:not(:placeholder-shown) + label,
.field--floating textarea:focus + label,
.field--floating textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);
}
.form__success{
  display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--r-sm);
  background:rgba(57,217,138,.12);border:1px solid rgba(57,217,138,.35);color:#0f7a4d;
  font-family:var(--display);font-weight:700;font-size:14px;
}
.form__note{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--t-mute)}

/* ---------- Device / screen mock ---------- */
.device{
  position:relative;border-radius:34px;padding:14px;
  background:linear-gradient(160deg,#fdfdff,#dfe3ec);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 6px rgba(80,90,140,.18);
}
.device--phone{width:min(280px,80vw);aspect-ratio:9/19}
.device--laptop{width:min(620px,92vw);aspect-ratio:16/10;border-radius:22px;padding:12px 12px 0}
.device__screen{
  position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(60% 50% at 30% 20%,rgba(201,184,255,.55),transparent 60%),
    radial-gradient(60% 50% at 80% 80%,rgba(184,242,230,.5),transparent 60%),
    linear-gradient(160deg,#1a2030,#0e1320);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 30px 60px rgba(0,0,0,.4);
}
.device--laptop .device__screen{border-radius:14px}
.device__screen::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  background-size:240% 100%;animation:holoHue 7s ease-in-out infinite;mix-blend-mode:screen;
}
.device__notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36%;height:18px;border-radius:0 0 12px 12px;background:#0e1320;z-index:3}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-soft);-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;background:var(--white);font-size:14.5px;min-width:480px}
table.data thead th{
  background:linear-gradient(180deg,var(--indigo-2),var(--indigo));color:#fff;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-align:left;
  padding:15px 18px;white-space:nowrap;
}
table.data thead th:first-child{border-top-left-radius:var(--r)}
table.data thead th:last-child{border-top-right-radius:var(--r)}
table.data tbody td{padding:14px 18px;border-top:1px solid var(--line);color:var(--t-slate)}
table.data tbody td:first-child{font-family:var(--display);font-weight:700;color:var(--t-ink)}
table.data tbody tr:nth-child(even){background:var(--porcelain-2)}
table.data tbody tr:hover{background:rgba(79,70,229,.05)}

/* ---------- Long-form article / legal typography ---------- */
.prose{max-width:68ch;margin-inline:auto;color:var(--t-slate);font-size:clamp(16px,1.4vw,18px);line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-top:1.8em;color:var(--t-ink)}
.prose h3{font-size:clamp(1.2rem,2vw,1.6rem);margin-top:1.5em;color:var(--t-ink)}
.prose p{color:var(--t-slate)}
.prose a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.prose a:hover{color:var(--indigo-deep)}
.prose strong{color:var(--t-ink)}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul li{list-style:none;position:relative;padding-left:1.4em;margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--iris);background-size:200%}
.prose ol{list-style:decimal;counter-reset:item}
.prose ol li{margin-top:.5em}
.prose blockquote{
  margin:1.6em 0;padding:22px 26px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-line);border-left:3px solid var(--indigo);
  backdrop-filter:blur(10px);box-shadow:var(--sh-soft);
  font-family:var(--display);font-weight:500;font-size:1.12em;color:var(--t-ink);line-height:1.5;
}
.prose blockquote p{color:var(--t-ink)}
.prose .dropcap::first-letter{
  font-family:var(--display);font-weight:900;float:left;font-size:3.4em;line-height:.78;
  padding-right:.08em;margin-top:.04em;
  background:var(--iris-text);background-size:280%;-webkit-background-clip:text;background-clip:text;color:transparent;
}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--porcelain-2);padding:2px 7px;border-radius:6px;color:var(--indigo-deep)}
.prose hr{border:0;height:1px;margin:2em 0}

/* sticky table of contents (terms) */
.toc{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.toc__title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-mute);margin-bottom:12px}
.toc a{display:block;padding:7px 12px;border-radius:var(--r-sm);font-size:13.5px;color:var(--t-slate);border-left:2px solid transparent;transition:all .2s}
.toc a:hover,.toc a.is-active{color:var(--indigo);background:var(--indigo-tint);border-left-color:var(--indigo)}

/* ---------- Blog / news grid ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.post{
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--sh-soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.post:hover{transform:translateY(-8px);box-shadow:var(--sh-pop)}
.post__thumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--mist)}
.post__thumb svg,.post__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-mute);display:flex;gap:12px;flex-wrap:wrap}
.post__title{font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--t-ink)}
.post:hover .post__title{color:var(--indigo)}
.post__excerpt{font-size:14px;color:var(--t-slate);line-height:1.55}
.post__more{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);display:inline-flex;align-items:center;gap:6px}

/* ---------- Testimonial cards ---------- */
.testim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.testim-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,28px);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.testim-card:hover{transform:translateY(-6px);box-shadow:var(--sh-pop)}
.testim-card__stars{display:inline-flex;gap:3px;font-size:15px;letter-spacing:1px;
  background:var(--iris-text);background-size:280%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoHue 9s ease-in-out infinite}
.testim-card__quote{font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.5;color:var(--t-ink)}
.testim-card__foot{display:flex;align-items:center;gap:12px;margin-top:auto}
.testim-card__avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(from 30deg,#C9B8FF,#B8F2E6,#FFD9C2,#BCD9FF,#C9B8FF);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.9),inset 0 -3px 8px rgba(80,90,130,.4)}
.testim-card__name{font-family:var(--display);font-weight:700;font-size:14px;color:var(--t-ink)}
.testim-card__role{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--t-mute)}

/* ---------- FAQ / accordion ---------- */
.faq{display:grid;gap:12px}
.faq__item{
  border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(10px);box-shadow:var(--sh-soft);overflow:hidden;
  transition:box-shadow .26s var(--ease);
}
.faq__item[open]{box-shadow:var(--sh-card)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:18px 22px;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--t-ink);
  list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--indigo-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%234F46E5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;transition:transform .26s var(--ease);
}
.faq__item[open] .faq__q::after{transform:rotate(135deg)}
.faq__a{padding:0 22px 20px;color:var(--t-slate);font-size:15px;line-height:1.6}

/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--t-mute)}
.crumbs a{color:var(--t-slate)}
.crumbs a:hover{color:var(--indigo)}
.crumbs span.sep{color:var(--line-2)}
.crumbs [aria-current]{color:var(--indigo)}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:80;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);
  box-shadow:var(--sh-card);color:var(--indigo);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .26s var(--ease);
}
.to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.to-top:hover{box-shadow:var(--sh-pop);transform:translateY(-3px)}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--iris);background-size:200% 100%;box-shadow:0 0 8px rgba(201,184,255,.6);transition:width .08s linear;animation:holoHue 8s ease-in-out infinite}

/* ---------- Toast (system-wide, injected by JS) ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:200;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:var(--pill);
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--t-ink);
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.85);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease);
  max-width:calc(100vw - 32px);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.toast__icon{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;border-radius:50%;
  background:var(--iris);background-size:200%;color:#2a3350}
.toast__icon svg{width:12px;height:12px}

/* ============================================================================
   NAVIGATION
   ============================================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  background:rgba(244,245,247,.6);
  border-bottom:1px solid rgba(255,255,255,.5);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-scrolled{
  background:rgba(244,245,247,.86);
  border-bottom-color:var(--glass-line);
  box-shadow:0 1px 0 rgba(180,188,205,.4),0 14px 40px -34px rgba(40,50,90,.5);
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.nav__logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.nav__logo svg{height:30px;width:auto;display:block}
.nav__logo-text{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:-.03em;color:var(--t-ink)}

.nav__links{display:flex;align-items:center;gap:4px;list-style:none}
/* the in-list Log in / Apply items exist only for the mobile menu — hide on desktop (the .nav__actions buttons show instead) */
.nav__links .nav__login,.nav__links .nav__apply{display:none}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:500;font-size:14.5px;
  padding:9px 14px;border-radius:var(--pill);color:var(--t-slate);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__link:hover{color:var(--t-ink);background:rgba(14,17,22,.04)}
.nav__link.is-active{color:var(--indigo)}
.nav__link.is-active::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 3px var(--indigo-glow)}

/* dropdown */
.nav__item--has-sub{position:relative}
.nav__sub-toggle{display:inline-flex;align-items:center;gap:6px}
.nav__sub-toggle svg{width:11px;height:11px;transition:transform .24s var(--ease)}
.nav__sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__sub{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);
  backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.85);
  padding:8px;list-style:none;
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transform-origin:top left;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.nav__sub-toggle[aria-expanded="true"] + .nav__sub{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.nav__sub a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);
  font-family:var(--display);font-weight:500;font-size:14px;color:var(--t-slate);transition:all .18s var(--ease);
}
.nav__sub a:hover{background:var(--indigo-tint);color:var(--indigo)}
.nav__sub a .sub-orb{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(from 40deg,#C9B8FF,#B8F2E6,#FFD9C2,#BCD9FF,#C9B8FF);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.9),inset 0 -2px 5px rgba(80,90,130,.4)}
.nav__sub a small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--t-mute);font-weight:400}

.nav__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav__burger{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--line);background:var(--glass);
}
.nav__burger span{width:20px;height:2px;border-radius:2px;background:var(--t-ink);transition:transform .26s var(--ease),opacity .26s var(--ease)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================================
   06 · SECTIONS & BACKGROUND RHYTHM
   ============================================================================ */
.section{padding-block:clamp(56px,8vw,120px);position:relative;overflow:hidden}
.section--tight{padding-block:clamp(36px,5vw,72px)}

.bg-porcelain{background:var(--porcelain)}
.bg-white{background:var(--white)}
.bg-tinted{background:var(--porcelain-2)}

/* soft iridescent gradient mesh */
.bg-mesh{
  background:
    radial-gradient(40% 60% at 18% 18%,rgba(201,184,255,.4),transparent 60%),
    radial-gradient(46% 50% at 82% 24%,rgba(188,217,255,.4),transparent 60%),
    radial-gradient(50% 55% at 70% 86%,rgba(184,242,230,.34),transparent 60%),
    radial-gradient(40% 50% at 12% 86%,rgba(255,217,194,.3),transparent 60%),
    var(--porcelain);
  background-size:200% 200%;
  animation:meshDrift 22s ease-in-out infinite;
}
@keyframes meshDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* faint floating chrome orbs */
.bg-orbs{background:var(--porcelain);position:relative}
.bg-orbs::before,.bg-orbs::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px);opacity:.5;
  background:
    radial-gradient(35% 35% at 32% 28%,#fff,rgba(255,255,255,0) 60%),
    radial-gradient(circle at 70% 75%,#c4cdf5,#eef0f8);
  box-shadow:inset 0 -10px 24px rgba(80,90,150,.3),0 30px 60px -24px rgba(80,90,160,.4);
}
.bg-orbs::before{width:200px;height:200px;top:8%;right:-40px;animation:blobFloat 11s ease-in-out infinite}
.bg-orbs::after{width:120px;height:120px;bottom:12%;left:-30px;animation:blobFloat 9s ease-in-out infinite reverse}

/* dramatic dark chrome ground (CTA / footer) */
.bg-ink{
  background:
    radial-gradient(60% 60% at 20% 10%,rgba(99,102,241,.22),transparent 60%),
    radial-gradient(50% 50% at 86% 18%,rgba(184,242,230,.12),transparent 60%),
    radial-gradient(60% 60% at 80% 100%,rgba(201,184,255,.16),transparent 60%),
    linear-gradient(170deg,var(--ink-2),var(--ink));
  color:var(--t-on);
}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:var(--t-on)}
.bg-ink p,.bg-ink .lead{color:var(--t-on-dim)}
.bg-ink .eyebrow,.bg-ink .sec-opener__label{color:var(--t-on-dim)}
.bg-ink .glass{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.bg-ink .glass::after{background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.1),transparent 55%)}
.bg-ink .holo-rule{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.bg-ink .field input,.bg-ink .field select,.bg-ink .field textarea{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;
}
.bg-ink .field input::placeholder,.bg-ink .field textarea::placeholder{color:rgba(255,255,255,.4)}
.bg-ink .field label{color:var(--t-on-dim)}

/* hero specific */
.hero{position:relative;padding-block:clamp(40px,7vw,96px) clamp(48px,8vw,110px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{margin-block:22px}
.hero .lead{margin-bottom:34px;font-size:clamp(1.05rem,1.8vw,1.35rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__micro{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--t-slate)}
.hero__micro span{display:inline-flex;align-items:center;gap:8px}
.hero__micro span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--iris);background-size:200%;box-shadow:0 0 0 3px rgba(184,242,230,.4)}

/* ============================================================================
   07 · UTILITIES
   ============================================================================ */
.flow>*+*{margin-top:var(--flow,1rem)}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.center{text-align:center}
.muted{color:var(--t-mute)}
.slate{color:var(--t-slate)}
.indigo{color:var(--indigo)}
.mt-0{margin-top:0}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
[hidden]{display:none !important}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal][data-reveal-delay="4"]{transition-delay:.32s}

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,90px) 32px}
.footer__blob{position:absolute;top:-60px;right:-60px;z-index:0;opacity:.6;pointer-events:none}
.footer__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.footer__brand{max-width:34ch}
.footer__wordmark{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.04em;margin-bottom:14px;
  background:var(--iris-text);background-size:280%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoHue 9s ease-in-out infinite}
.footer__tagline{color:var(--t-on-dim);font-size:14.5px;line-height:1.6}
.footer__col h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t-on-dim);margin-bottom:16px}
.footer__col ul{display:grid;gap:10px}
.footer__col a{color:var(--t-on);font-size:14.5px;opacity:.82;transition:opacity .2s,color .2s}
.footer__col a:hover{opacity:1;color:#fff}
.footer__socials{display:flex;gap:10px;margin-top:18px}
.footer__socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--t-on);transition:all .22s var(--ease)}
.footer__socials a:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.footer__socials svg{width:18px;height:18px}
.footer__bottom{position:relative;z-index:1;margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.footer__legal{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--t-on-dim);line-height:1.6;max-width:64ch}
.footer__resp{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--t-on-dim)}
.footer__age{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);font-family:var(--display);font-weight:900;font-size:11px;color:#fff;flex:0 0 auto}

/* ============================================================================
   08 · RESPONSIVE
   ============================================================================ */
@media(max-width:1024px){
  .post-grid,.testim-grid{grid-template-columns:repeat(2,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media(max-width:900px){
  :root{--nav-h:64px}
  .hero__grid{grid-template-columns:1fr}
  .blob-stage{max-width:440px;margin-inline:auto;width:100%}
  .comm-grid{grid-template-columns:repeat(2,1fr)}
  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}

  /* mobile nav */
  .nav__burger{display:flex}
  .nav__actions .btn--ghost,.nav__actions .nav__login{display:none}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:6px;
    padding:18px var(--gut) 28px;
    background:rgba(244,245,247,.96);
    backdrop-filter:blur(20px) saturate(150%);
    border-bottom:1px solid var(--glass-line);
    box-shadow:var(--sh-card);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s var(--ease);
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  }
  .nav__links.is-mobile-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__link{padding:13px 16px;font-size:16px;justify-content:space-between}
  .nav__link.is-active::after{margin-left:auto}
  .nav__item--has-sub{display:flex;flex-direction:column}
  .nav__sub{
    position:static;opacity:1;transform:none;pointer-events:auto;box-shadow:none;
    background:transparent;border:0;backdrop-filter:none;padding:2px 0 8px 14px;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease);
  }
  .nav__sub-toggle[aria-expanded="true"] + .nav__sub{max-height:280px}
  .nav__links .btn{margin-top:8px}
  .nav__links .nav__login,.nav__links .nav__apply{display:inline-flex}
}
@media(max-width:600px){
  .comm-grid{grid-template-columns:1fr}
  .trust-strip{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .post-grid,.testim-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .footer__brand{grid-column:auto}
  .device--laptop{width:100%}
  .proj__head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:380px){
  :root{--gut:16px}
  .trust-strip{grid-template-columns:1fr}
  .stat-chip{min-width:0;width:100%}
  .to-top{right:14px;bottom:14px}
}

/* ============================================================================
   09 · REDUCED MOTION / PRINT
   ============================================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .chrome-blob,.orb{animation:none !important}
  .toast{transition:opacity .001ms !important;transform:translate(-50%,0)}
}

@media print{
  .nav,.to-top,.scroll-progress,.grain,.marquee,.footer__socials{display:none !important}
  body{background:#fff;color:#000}
  body::before{display:none}
  .section{padding-block:18px}
  *{box-shadow:none !important;backdrop-filter:none !important}
}

/* ============================================================================
   REVISION 02 — client change pass
   ============================================================================ */

/* (1) Remove hero eyebrow pills across every hero variant */
.hero .pill,.about-hero .pill,.news-hero .pill,.legal-hero .pill,
.article-hero .pill,.post-hero .pill,.article-hero__tag{display:none !important}

/* (11) Remove breadcrumbs everywhere */
.crumbs,.article-hero__crumbs{display:none !important}

/* prevent decorative blobs / light streaks from causing horizontal scroll */
html{overflow-x:hidden}
.hero,.about-hero,.news-hero,.legal-hero,.article-hero,.post-hero{overflow:hidden}

/* (11) Smaller hero height on inner pages (homepage slider keeps its own size) */
.hero:not(.hero--home),
.news-hero,.legal-hero,.article-hero,.post-hero{
  min-height:0 !important;
  padding-block:clamp(26px,4vw,52px) clamp(20px,3vw,40px) !important;
}
.hero:not(.hero--home) h1,.news-hero h1,.legal-hero h1,.post-hero h1{font-size:clamp(2.3rem,4.6vw,4rem)}
.hero:not(.hero--home) .blob-stage{max-width:340px}

/* ---------------------------------------------------------------------------
   (2)+(12) HOMEPAGE HERO — slider, no projector, horizontal, tighter
   --------------------------------------------------------------------------- */
.hero--home{padding-block:clamp(18px,3vw,48px) clamp(14px,2.4vw,34px);min-height:auto}
.hero--home .hero__slides{display:grid}
.hero--home .hero__slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s linear .55s}
.hero--home .hero__slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.hero--home .hero__grid{align-items:center;gap:clamp(24px,4vw,60px)}
.hero--home h1,.hero--home h2{margin-block:0 14px}
.hero--home h2{font-size:clamp(2.6rem,6vw,5.4rem);font-weight:900;line-height:.96;letter-spacing:-.045em}
.hero--home .lead{margin-bottom:24px}
.hero--home .hero__visual{display:grid;place-items:center}

/* hero slider dots */
.hero__dots{display:flex;gap:10px;margin-top:clamp(18px,3vw,28px)}
.hero__dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);border:0;padding:0;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.hero__dot:hover{background:var(--t-mute)}
.hero__dot.is-active{background:var(--indigo);transform:scale(1.25);box-shadow:0 0 0 4px var(--indigo-glow)}

/* (12) slide 2 — SiGMA boarding pass (glass + holographic) */
.pass{position:relative;width:min(440px,100%);border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.85);
  animation:blobFloat 8s ease-in-out infinite}
.pass__top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px dashed var(--line-2)}
.pass__brand{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-mute)}
.pass__chip{font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:5px 11px;border-radius:var(--pill);background:var(--indigo-tint);color:var(--indigo)}
.pass__body{padding:22px}
.pass__route{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.pass__code{font-family:var(--display);font-weight:900;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;color:var(--t-ink)}
.pass__path{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line-2),var(--indigo) 50%,var(--line-2));position:relative}
.pass__path::after{content:"\2708";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;color:var(--indigo);background:rgba(244,245,247,.9);padding:0 6px}
.pass__big{font-family:var(--display);font-weight:900;font-size:clamp(44px,7vw,72px);letter-spacing:-.045em;line-height:1;
  background:var(--iris-text);background-size:280%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoHue 9s ease-in-out infinite}
.pass__meta{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line-2)}
.pass__field{display:flex;flex-direction:column;gap:3px}
.pass__field .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-mute)}
.pass__field .v{font-family:var(--display);font-weight:700;font-size:14px;color:var(--t-ink)}

/* ---------------------------------------------------------------------------
   (4) WHY — single-line headline + lede on desktop
   --------------------------------------------------------------------------- */
@media(min-width:1060px){
  #why .sec-head{max-width:none}
  #why .sec-head h2{white-space:nowrap}
  #why .sec-head p{white-space:nowrap;max-width:none;font-size:clamp(13px,1.25vw,16px)}
}

/* ---------------------------------------------------------------------------
   (5) TRAFFIC — one redesigned rail of glass source chips
   --------------------------------------------------------------------------- */
.traffic-rail{margin-block:clamp(10px,2.4vw,22px);padding:22px 0}
.traffic-rail .marquee__track{gap:14px;align-items:center}
.src-chip{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.01em;color:var(--t-ink);
  padding:12px 20px;border-radius:var(--pill);
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.src-chip::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--iris);background-size:200%;box-shadow:0 0 0 3px rgba(184,242,230,.4)}

/* ---------------------------------------------------------------------------
   (6) HOMEPAGE TESTIMONIAL — big, full-width feature
   --------------------------------------------------------------------------- */
.testim-feature{padding:clamp(30px,5vw,64px)!important;border-radius:var(--r-lg)}
.testim-feature__stars{display:inline-flex;gap:4px;font-size:22px;
  background:var(--iris-text);background-size:280%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoHue 9s ease-in-out infinite}
.testim-feature__quote{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.22;
  font-size:clamp(1.5rem,3.4vw,2.7rem);color:var(--t-ink);text-wrap:balance;margin:18px 0 26px}
.testim-feature__foot{display:flex;align-items:center;gap:16px}
.testim-feature__foot .testim-card__avatar{width:54px;height:54px}

/* ---------------------------------------------------------------------------
   (3) BRANDS — wider section, bigger phone, no card shape, mobile faded backdrop
   --------------------------------------------------------------------------- */
#brands .wrap{max-width:1440px}
#brands .hero__grid{grid-template-columns:1fr 1.04fr;gap:clamp(28px,5vw,76px);align-items:center}
#brands .device--phone{width:min(360px,82vw)}
#brands .brand-lede{font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--t-slate);max-width:46ch;margin-top:14px}
@media(max-width:900px){
  #brands{position:relative;overflow:hidden}
  #brands .hero__grid{grid-template-columns:1fr}
  #brands .hero__visual{order:-1;margin-bottom:6px}
  #brands .device--phone{width:min(640px,150vw);margin-inline:auto;animation:none}
  #brands .hero__content{position:relative;z-index:1}
}

/* ---------------------------------------------------------------------------
   (9) ARTICLE pages — drop the "On this page" TOC, widen the prose column
   --------------------------------------------------------------------------- */
.article-toc{display:none !important}
.article-layout{display:block !important}
.article-layout .prose{max-width:74ch !important;margin-inline:auto !important}

/* ---------------------------------------------------------------------------
   (7) INNER PAGES — contain the last (dark) section + gap before the footer
   --------------------------------------------------------------------------- */
main > section.bg-ink:last-child{
  background:transparent !important;
  padding-block:clamp(16px,2.6vw,34px) clamp(40px,6vw,76px) !important;
  overflow:visible;
}
main > section.bg-ink:last-child > .wrap{
  position:relative;border-radius:var(--r-lg);padding:clamp(34px,5vw,72px);overflow:hidden;
  box-shadow:var(--sh-pop);
  background:
    radial-gradient(60% 60% at 18% 8%,rgba(99,102,241,.26),transparent 60%),
    radial-gradient(60% 70% at 84% 104%,rgba(201,184,255,.2),transparent 60%),
    linear-gradient(170deg,var(--ink-2),var(--ink));
}
/* keep any decorative blob inside the contained card (the global bubble handles it) */
main > section.bg-ink:last-child > .footer__blob,
main > section.bg-ink:last-child > .blob-stage,
main > section.bg-ink:last-child > .chrome-blob{display:none}
/* flatten nested glass/cards/cta panels so the contained CTA isn't a card-in-card */
main > section.bg-ink:last-child .glass,
main > section.bg-ink:last-child .card,
main > section.bg-ink:last-child .cta-band{
  background:transparent !important;border-color:rgba(255,255,255,.16) !important;
  box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:0 !important;
}
main > section.bg-ink:last-child .glass::after,
main > section.bg-ink:last-child .card::after,
main > section.bg-ink:last-child .cta-band::after{display:none !important}
main > section.bg-ink:last-child p{color:var(--t-on-dim)}

/* ============================================================================
   REVISION 03 — client change pass 2
   ============================================================================ */

/* Header: fixed and always visible */
.nav{position:fixed;left:0;right:0;top:0}
body{padding-top:var(--nav-h)}

/* (1) Remove hero stat-ticker rails + trust micro-lines everywhere (cleaner heroes) */
.hero .marquee[data-marquee],.hero--home .marquee[data-marquee]{display:none !important}
.hero__micro{display:none !important}

/* (homepage 2) Hero: vertically centered banner, with bigger gaps on the SiGMA slide */
.hero--home{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,4vw,48px)}
.hero--home > .wrap{width:100%}
.hero--home .hero__content{display:flex;flex-direction:column}
.hero--home .hero__slide .hero__content h1,
.hero--home .hero__slide .hero__content h2,
.hero--home .hero__slide .hero__content .lead{margin:0}
.hero--home .hero__slide[data-slide="0"] .hero__content > *+*{margin-top:clamp(16px,2vw,24px)}
.hero--home .hero__slide[data-slide="1"] .hero__content > *+*{margin-top:clamp(24px,3.6vw,42px)}

/* (homepage 7) Mobile hero: graphic first, copy second, smaller graphic */
@media(max-width:900px){
  .hero--home{min-height:auto}
  .hero--home .hero__grid{display:flex;flex-direction:column}
  .hero--home .hero__visual{order:-1}
  .hero--home .blob-stage{max-width:220px;margin-inline:auto}
  .hero--home .pass{max-width:330px;margin-inline:auto}
}

/* (homepage 5) Traffic: chips with NO background; one-line headline + note */
.src-chip{background:none !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;padding:8px 4px !important}
.traffic-rail .marquee__track{gap:clamp(22px,3vw,44px)}
@media(min-width:1040px){
  #traffic .sec-head h2{white-space:nowrap}
  #traffic .lead{white-space:nowrap;max-width:none;font-size:clamp(14px,1.3vw,17px)}
}

/* (homepage 4 + brand 1) Brands: laptop screen, wider, shorter section */
#brands{padding-block:clamp(40px,5vw,72px) !important}
#brands .hero__grid{grid-template-columns:1fr 1.18fr;align-items:center}
.device--laptop{width:min(680px,100%)}
@media(max-width:900px){
  #brands{overflow:visible}
  #brands .hero__grid{display:flex;flex-direction:column}
  #brands .hero__visual{order:-1;position:static;opacity:1;inset:auto;-webkit-mask:none;mask:none}
  #brands .device--laptop{width:min(560px,100%);margin-inline:auto}
}

/* (homepage 8) Mobile: contact form only — drop the chat aside */
@media(max-width:900px){
  #contact aside{display:none !important}
  #contact .hero__grid{display:block}
}

/* (homepage 6) Footer: smaller, fewer components */
.footer{padding-block:clamp(38px,4.5vw,58px) 22px}
.footer__blob{display:none}
.footer__tagline{display:none}
.footer__inner{grid-template-columns:1.2fr repeat(3,1fr);gap:clamp(22px,3vw,40px)}
.footer__wordmark{font-size:23px;margin-bottom:10px}
.footer__socials{margin-top:14px}
.footer__bottom{margin-top:clamp(26px,3.5vw,40px);padding-top:18px;border-top:0}

/* (brand 4) Provider / payment chips — visible contrast */
.chip{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.72) !important;border:1px solid var(--line-2) !important;color:var(--t-ink) !important;
  font-family:var(--display);font-weight:600;font-size:13.5px;padding:9px 15px !important;border-radius:var(--pill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.chip--live{background:var(--indigo-tint) !important;border-color:rgba(79,70,229,.3) !important;color:var(--indigo) !important}

/* (brand 5) Tables fit on mobile */
@media(max-width:600px){
  table.data{min-width:0;font-size:12.5px}
  table.data thead th,table.data tbody td{padding:10px 9px}
  .bonus-table td{font-size:12px}
}

/* (brand 7) Apply CTA — chrome bubble on the right (desktop), consistent everywhere */
main > section.bg-ink:last-child > .wrap{position:relative;overflow:hidden}
main > section.bg-ink:last-child > .wrap > *{position:relative;z-index:1}
@media(min-width:781px){
  main > section.bg-ink:last-child > .wrap::after{
    content:"";position:absolute;top:50%;right:-70px;transform:translateY(-50%);z-index:0;
    width:clamp(170px,18vw,260px);aspect-ratio:1;border-radius:50%;pointer-events:none;
    background:
      radial-gradient(38% 30% at 32% 26%,#fff,rgba(255,255,255,0) 52%),
      conic-gradient(from 210deg,#C9B8FF,#BCD9FF,#B8F2E6,#FFD9C2,#FFC2E6,#9bb6ff,#C9B8FF);
    box-shadow:inset 0 8px 20px rgba(255,255,255,.45),inset 0 -16px 32px rgba(54,62,118,.5),0 30px 60px -24px rgba(80,90,160,.6);
    opacity:.9;animation:blobFloat 9s ease-in-out infinite;
  }
}

/* (commissions 1) inner-page hero: smaller graphic + bigger copy->cta gap */
.hero:not(.hero--home) .blob-stage{max-width:280px}
.hero:not(.hero--home) .hero__cta{margin-top:clamp(22px,3.2vw,38px)}

/* (news parent 2) remove decorative bubbles at the right edge */
.news-hero__blob,.news-blog__orb{display:none !important}

/* (news child 1) widen the article body to match other sections */
.article-layout .prose{max-width:72rem !important}

/* (brand 2 / news child 3 / about) one-line headings on desktop where they fit */
@media(min-width:1040px){
  #live .sec-head h2,#live h2{white-space:nowrap}
  #mission .sec-head h2{white-space:nowrap}
  .article-hero__head h1,.article-hero h1{text-wrap:balance}
}

/* Apply FAB (injected by prism.js) */
.fab-apply{
  position:fixed;right:24px;bottom:24px;z-index:95;
  display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:var(--pill);
  font-family:var(--display);font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(180deg,var(--indigo-2),var(--indigo));
  box-shadow:0 18px 40px -14px var(--indigo-glow),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.fab-apply:hover{transform:translateY(-3px);box-shadow:0 26px 50px -16px var(--indigo-glow)}
.fab-apply svg{width:15px;height:15px}
.to-top{bottom:88px}
@media(max-width:600px){
  .fab-apply{right:14px;bottom:14px;padding:12px 18px;font-size:14px}
  .to-top{right:14px;bottom:74px;width:42px;height:42px}
}

/* inner-page heroes: graphic first, then copy on mobile */
@media(max-width:900px){
  .hero:not(.hero--home) .hero__grid{display:flex;flex-direction:column}
  .hero:not(.hero--home) .hero__visual{order:-1}
  .hero:not(.hero--home) .blob-stage,.hero:not(.hero--home) .device{margin-inline:auto}
}
/* brand: welcome-bonus copy uses full width */
#bonus .sec-head{max-width:none}
#bonus .sec-head p{max-width:none}

/* ============================================================================
   REVISION 05 — client change pass 4
   ============================================================================ */

/* Homepage apply: remove the fine-print line entirely (desktop + mobile) */
#partner .mono.muted{display:none !important}

/* (3) Remove the scroll-to-top FAB */
.to-top{display:none !important}

/* (4) Mobile header: drop the in-bar Apply CTA + de-chrome the burger */
@media(max-width:900px){
  .nav__actions .nav__apply{display:none}
  .nav__burger{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;width:40px}
}

/* (5) Inner-page hero graphics sized so the banner matches the brand page (~430px) */
.hero:not(.hero--home) .chrome-blob,
.news-hero .chrome-blob,.legal-hero .chrome-blob{--blob-size:clamp(220px,26vw,320px) !important}
.hero:not(.hero--home) .blob-stage,
.news-hero .blob-stage,.legal-hero .blob-stage{max-width:330px;margin-inline:auto}

/* (6) Uniform content width across every page (revert the wider brand section) */
#brands .wrap{max-width:var(--maxw)}

/* (news child) article body fills the full standard width */
.article-layout{max-width:none !important}
.article-layout .prose,.prose{max-width:none !important;margin-inline:0 !important}

/* (2) Footer: socials sit on the same row as the wordmark, pushed to the right */
.footer__socials{margin-top:0}
.footer__nav{display:none}

/* (10) Homepage apply band: same contained card as every other page's last section */
#partner.bg-ink{background:transparent !important;padding-block:clamp(20px,3vw,44px) clamp(36px,5vw,64px) !important;overflow:visible}
#partner.bg-ink > .footer__blob,#partner.bg-ink > .blob-stage,#partner.bg-ink > .chrome-blob{display:none}
#partner.bg-ink > .wrap{
  position:relative;border-radius:var(--r-lg);padding:clamp(34px,5vw,72px);overflow:hidden;box-shadow:var(--sh-pop);
  background:
    radial-gradient(60% 60% at 18% 8%,rgba(99,102,241,.26),transparent 60%),
    radial-gradient(60% 70% at 84% 104%,rgba(201,184,255,.2),transparent 60%),
    linear-gradient(170deg,var(--ink-2),var(--ink));
}
#partner.bg-ink > .wrap > *{position:relative;z-index:1}
@media(min-width:781px){
  #partner.bg-ink > .wrap::after{
    content:"";position:absolute;top:50%;right:-70px;transform:translateY(-50%);z-index:0;
    width:clamp(170px,18vw,260px);aspect-ratio:1;border-radius:50%;pointer-events:none;
    background:radial-gradient(38% 30% at 32% 26%,#fff,rgba(255,255,255,0) 52%),conic-gradient(from 210deg,#C9B8FF,#BCD9FF,#B8F2E6,#FFD9C2,#FFC2E6,#9bb6ff,#C9B8FF);
    box-shadow:inset 0 8px 20px rgba(255,255,255,.45),inset 0 -16px 32px rgba(54,62,118,.5),0 30px 60px -24px rgba(80,90,160,.6);
    opacity:.9;animation:blobFloat 9s ease-in-out infinite;
  }
}
@media(max-width:600px){
  #partner.bg-ink > .wrap{margin-inline:var(--gut);width:auto;padding:clamp(24px,7vw,34px)}
  #partner.bg-ink > .wrap::after{display:none}
}

/* ============================================================================
   REVISION 06 — client change pass 5
   ============================================================================ */

/* Apply card: remove the white stroke (flattened panels + the card itself) */
main > section.bg-ink:last-child > .wrap,
#partner.bg-ink > .wrap{border:0 !important}
main > section.bg-ink:last-child .glass,
main > section.bg-ink:last-child .card,
main > section.bg-ink:last-child .cta-band{border:0 !important}

/* Apply card: align content to the left (was centered on some pages) */
main > section.bg-ink:last-child,
main > section.bg-ink:last-child .center{text-align:left}
main > section.bg-ink:last-child .cluster,
main > section.bg-ink:last-child .cta-band__actions,
main > section.bg-ink:last-child .sec-opener{justify-content:flex-start}
main > section.bg-ink:last-child .cta-band,
main > section.bg-ink:last-child .cta-band__title,
main > section.bg-ink:last-child .cta-band__sub,
main > section.bg-ink:last-child .lead{text-align:left;margin-inline:0;max-width:none}

/* Count-up figures: tabular digits in a fixed inline-block box so animation doesn't jitter the layout */
.ccard__fig,.cmodel__fig,.proj__monthly,.bstat__num,.about-stat__fig,.stat-chip .v{font-variant-numeric:tabular-nums}
[data-count]{font-variant-numeric:tabular-nums}

/* ============================================================================
   REVISION 07 — client change pass 6
   ============================================================================ */

/* (1) Mobile footer: keep wordmark + socials on one row, socials to the right edge */
@media(max-width:700px){
  .footer__inner{flex-direction:row !important;justify-content:space-between;align-items:center;gap:16px}
}

/* (2) Mobile heroes: copy + buttons aligned to the left */
@media(max-width:900px){
  .hero__content,.hero--home .hero__content,.article-hero__head{text-align:left;align-items:flex-start}
  .hero__cta{justify-content:flex-start}
}

/* (3) Mobile news hero: graphic above the text + buttons (like other pages) */
@media(max-width:900px){
  .news-hero .hero__grid{display:flex;flex-direction:column}
  .news-hero .hero__visual{order:-1}
  .news-hero .blob-stage{margin-inline:auto}
}

/* Testimonials: external-link arrow inline next to the partner name (8px gap) */
.ext-arrow{display:inline-block;width:.72em;height:.72em;margin-left:8px;vertical-align:middle;opacity:.85}
.pq__name a,.testim-card__name a{display:inline-flex;align-items:center}

/* ============================================================================
   REVISION 08 — partner-managers section (homepage + about)
   ============================================================================ */
.manager-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.manager-card{text-align:center;align-items:center}
.manager-card__avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:conic-gradient(from 30deg,#C9B8FF,#B8F2E6,#FFD9C2,#BCD9FF,#C9B8FF);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.9),inset 0 -4px 12px rgba(80,90,140,.45),inset 0 0 0 1px rgba(255,255,255,.5),0 16px 30px -14px rgba(100,110,180,.5);
  animation:blobFloat 7s ease-in-out infinite}
.manager-card__avatar--alt{background:conic-gradient(from 120deg,#B8F2E6,#BCD9FF,#FFD9C2,#FFC2E6,#B8F2E6)}
.manager-card__avatar--alt2{background:conic-gradient(from 220deg,#FFD9C2,#FFC2E6,#C9B8FF,#BCD9FF,#FFD9C2)}
.manager-card__initial{font-family:var(--display);font-weight:900;font-size:32px;letter-spacing:-.03em;color:#262e49}
.manager-card__name{margin-bottom:4px}
.manager-card__role{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin-bottom:12px}
.manager-card__copy{font-size:14px;color:var(--t-slate);line-height:1.55;margin-bottom:20px}
.manager-card:nth-child(1) .manager-card__avatar{animation-delay:0s}
.manager-card:nth-child(2) .manager-card__avatar{animation-delay:-1.6s}
.manager-card:nth-child(3) .manager-card__avatar{animation-delay:-3.2s}
/* headline on one line when it fits: widen the head (was capped at 62ch) + normal wrapping */
#managers .sec-head,#blog .sec-head{max-width:none}
#managers .sec-head h2,#blog .sec-head h2{text-wrap:wrap}
@media(max-width:760px){ .manager-grid{grid-template-columns:1fr} }

/* Telegram "Message …" button */
.btn--telegram{background:#229ED9;color:#fff;box-shadow:0 14px 30px -14px rgba(34,158,217,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--telegram:hover{transform:translateY(-3px);background:#1d8dc4;box-shadow:0 22px 42px -16px rgba(34,158,217,.6),inset 0 1px 0 rgba(255,255,255,.35)}

/* ============================================================================
   REVISION 09 — hero SiGMA ticket + manager profile photos
   ============================================================================ */

/* Floating "Meet us at SiGMA" boarding-pass ticket over the hero sphere */
.hero__ticket{
  position:absolute;right:-3%;bottom:2%;z-index:4;width:min(250px,70%);
  display:block;color:inherit;text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;animation:blobFloat 7s ease-in-out infinite;will-change:transform;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hero__ticket:hover{transform:translateY(-5px);box-shadow:var(--sh-pop)}
.hero__ticket .pass__top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px dashed var(--line-2)}
.hero__ticket .pass__brand{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-mute)}
.hero__ticket .pass__chip{font-family:var(--mono);font-size:9px;letter-spacing:.1em;padding:4px 9px;border-radius:var(--pill);background:var(--indigo-tint);color:var(--indigo)}
.hero__ticket .pass__body{padding:14px 15px}
.hero__ticket .pass__big{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.04em;line-height:1;
  background:var(--iris-text);background-size:280%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoHue 9s ease-in-out infinite}
.hero__ticket .pass__route{display:flex;align-items:center;gap:10px;margin:12px 0}
.hero__ticket .pass__code{font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:-.02em;color:var(--t-ink)}
.hero__ticket .pass__path{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line-2),var(--indigo) 50%,var(--line-2));position:relative}
.hero__ticket .pass__path::after{content:"\2708";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;color:var(--indigo);background:rgba(244,245,247,.92);padding:0 5px}
.hero__ticket .pass__meta{display:flex;flex-wrap:wrap;gap:10px 16px;padding-top:12px;border-top:1px dashed var(--line-2)}
.hero__ticket .pass__field{display:flex;flex-direction:column;gap:2px}
.hero__ticket .pass__field .k{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute)}
.hero__ticket .pass__field .v{font-family:var(--display);font-weight:700;font-size:13px;color:var(--t-ink)}
@media(max-width:900px){
  .hero__ticket{position:static;width:100%;max-width:300px;margin:20px auto 0;animation:none}
}

/* Manager cards: real profile photo fills the avatar (falls back to gradient orb) */
.manager-card__avatar img,.manager-card__photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

/* ============================================================================
   REVISION 04 — client change pass 3
   ============================================================================ */

/* (1) Mobile SiGMA boarding pass: full-width graphic */
@media(max-width:900px){
  .hero--home .pass{max-width:100%;width:100%}
  .hero--home .blob-stage{max-width:240px}
}

/* (2) Laptop frame: even padding + clean bottom (no stray stroke); mobile full-width */
.device--laptop{padding:13px;border-radius:20px}
.device--laptop .device__screen{border-radius:12px}
@media(max-width:900px){
  #brands .device--laptop,.hero .device--laptop{width:100% !important;max-width:none}
}

/* (3) Traffic: real chips (pill style) with NO background strip behind the rail */
.traffic-rail{background:none !important;border:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;-webkit-mask:none !important;mask:none !important}
.src-chip{
  background:var(--glass) !important;border:1px solid var(--glass-line) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;
  padding:11px 18px !important;
}

/* (5) Inner-page apply CTA: clear gaps from screen edges on mobile */
@media(max-width:600px){
  main > section.bg-ink:last-child > .wrap{margin-inline:var(--gut);width:auto;padding:clamp(24px,7vw,34px)}
  main > section.bg-ink:last-child > .wrap::after{display:none}
}

/* (6) Uniform inner-hero height (match the brand page) + (7) bigger copy -> CTA gap */
.hero:not(.hero--home),
.news-hero,.legal-hero,.article-hero,.post-hero{
  padding-block:clamp(30px,4.5vw,58px) clamp(26px,3.5vw,46px) !important;
}
.hero:not(.hero--home) .hero__cta,
.news-hero .hero__cta{margin-top:clamp(30px,4.5vw,52px) !important}

/* (10) Article hero headline: sane size + full width (fixes giant one-word-per-line) */
.article-hero__head h1,.article-hero h1,.post-hero h1{
  font-size:clamp(2rem,4vw,3.4rem) !important;max-width:none;line-height:1.06;
}
.article-hero__head,.article-hero .article-hero__head{max-width:none}

/* (11) About mission copy: full width on desktop (no narrow column) */
@media(min-width:1040px){
  #mission .measure{max-width:none}
}

/* (4) Simple footer: brand + single nav row + legal */
.footer__inner{display:flex !important;justify-content:space-between;align-items:center;gap:24px 40px;flex-wrap:wrap;grid-template-columns:none}
.footer__brand{max-width:none}
.footer__nav{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.footer__nav a{color:var(--t-on);font-family:var(--display);font-weight:600;font-size:14.5px;opacity:.85;transition:opacity .2s}
.footer__nav a:hover{opacity:1;color:#fff}
@media(max-width:700px){
  .footer__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .footer__nav{gap:10px 18px}
}

/* ============================================================================
   REVISION 10 — (A) mobile hero fit   (B) dark mode + theme toggle
   ============================================================================ */

/* (A) Mobile hero: shrink the sphere + drop the SiGMA ticket into normal flow so
   the headline is always fully visible (no overlap). */
@media(max-width:900px){
  .hero--home .hero__visual{order:-1}
  .hero--home .blob-stage{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    aspect-ratio:auto;height:auto;max-width:none;width:100%;gap:12px;margin-inline:auto;
  }
  .hero--home .blob-stage .chrome-blob{flex:0 0 auto}
  .hero--home .chrome-blob--xl{--blob-size:clamp(150px,38vw,230px)}
  .hero--home .hero__ticket{
    position:static;transform:none;animation:none;float:none;
    width:min(300px,86%);max-width:300px;margin:0 auto;
  }
}
@media(max-width:600px){
  .hero--home .chrome-blob--xl{--blob-size:clamp(140px,46vw,188px)}
  .hero--home .hero__ticket{width:min(290px,92%)}
}

/* (B) ---------------------------- DARK MODE ---------------------------------
   Tokens flip the whole tokenized system; the rules below patch the handful of
   surfaces that hard-code light colors. Dark grounds derive from the existing
   .bg-ink palette. */
[data-theme="dark"]{
  color-scheme:dark;

  --porcelain:#0C0F15;
  --porcelain-2:#141A26;
  --mist:#1B2230;
  --ink:#10141D;
  --ink-2:#161D2B;

  --t-ink:#EAEDF4;
  --t-slate:#A8AFC1;
  --t-mute:#838B9D;
  --t-on:#F4F5F7;
  --t-on-dim:#AEB4C4;

  --indigo:#6366F1;
  --indigo-2:#7177F3;
  --indigo-deep:#4F46E5;
  --indigo-glow:rgba(129,140,248,.42);
  --indigo-tint:rgba(129,140,248,.17);

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.17);
  --glass-line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.03);

  --sh-soft:0 24px 50px -28px rgba(0,0,0,.6);
  --sh-card:0 30px 60px -34px rgba(0,0,0,.7);
  --sh-glass:inset 0 1px 0 rgba(255,255,255,.10),0 20px 44px -26px rgba(0,0,0,.6);
  --sh-pop:0 44px 80px -34px rgba(0,0,0,.82);
}

/* nav bar */
[data-theme="dark"] .nav{background:rgba(10,13,19,.62);border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .nav.is-scrolled{
  background:rgba(10,13,19,.9);border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 14px 40px -34px rgba(0,0,0,.7);
}
[data-theme="dark"] .nav__link:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] .nav__sub{background:rgba(18,24,36,.97);border-color:var(--line)}

/* solid light surfaces -> dark surfaces */
[data-theme="dark"] .post{background:var(--porcelain-2);border-color:var(--line)}
[data-theme="dark"] .card--solid{background:var(--porcelain-2)}
[data-theme="dark"] .bg-white{background:var(--porcelain-2)}
[data-theme="dark"] table.data{background:var(--porcelain-2)}

/* hard-coded dark text -> theme text */
[data-theme="dark"] .ccard__fig,[data-theme="dark"] .ccard__fig small{color:var(--t-ink)}

/* chips (had a forced light background) */
[data-theme="dark"] .chip{
  background:rgba(255,255,255,.08) !important;border-color:var(--line-2) !important;color:var(--t-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* form fields */
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{
  background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--t-ink);
}
[data-theme="dark"] .field input:focus,[data-theme="dark"] .field select:focus,[data-theme="dark"] .field textarea:focus{
  background:rgba(255,255,255,.10);border-color:var(--indigo);
}
[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8AFC1' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* misc light tints */
[data-theme="dark"] .proj__tabs{background:rgba(255,255,255,.06)}
[data-theme="dark"] .pass__path::after,
[data-theme="dark"] .hero__ticket .pass__path::after{background:var(--porcelain)}

/* tone down the bright inset top-edge highlight so dark cards have no harsh white line */
[data-theme="dark"] .card,
[data-theme="dark"] .glass,
[data-theme="dark"] .stat-chip{box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.10)}
[data-theme="dark"] .card::after,
[data-theme="dark"] .glass::after{background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.06),transparent 55%)}

/* (B) ---------- THEME TOGGLE (header icon + mobile-menu row) ---------- */
.theme-toggle{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--pill);
  background:var(--glass);border:1px solid var(--glass-line);color:var(--t-ink);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);cursor:pointer;flex:0 0 auto;
  transition:background .2s var(--ease),transform .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
[data-theme="dark"] .theme-toggle{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.theme-toggle:hover{transform:translateY(-2px);color:var(--indigo)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle__sun{display:none}
[data-theme="dark"] .theme-toggle__moon{display:none}
[data-theme="dark"] .theme-toggle__sun{display:block}

/* in-menu variant: full-width row, hidden on desktop (mirrors Login/Apply) */
.nav__theme-item{display:none}
.theme-toggle--menu{
  width:100%;height:auto;justify-content:flex-start;gap:11px;border-radius:var(--r-sm);
  padding:13px 16px;font-family:var(--display);font-weight:500;font-size:16px;
}
.theme-toggle--menu .theme-toggle__label{flex:1;text-align:left}
.theme-toggle--menu:hover{transform:none;background:rgba(127,127,160,.12)}
@media(max-width:900px){
  .nav__theme-item{display:block}
  .nav__links .theme-toggle--menu{display:flex;align-items:center}
}

/* dark-mode: lift indigo accent TEXT to AA (buttons keep the saturated indigo bg) — indigo accent text in dark */
[data-theme="dark"] .sec-opener__num,
[data-theme="dark"] .pill--indigo,
[data-theme="dark"] .chip--live,
[data-theme="dark"] .pass__chip,
[data-theme="dark"] .hero__ticket .pass__chip,
[data-theme="dark"] .toc a:hover,
[data-theme="dark"] .toc a.is-active,
[data-theme="dark"] .nav__link.is-active,
[data-theme="dark"] .src-chip{color:#9AA0FF !important}

/* ============================================================================
   REVISION 11 - dark-mode polish: bluer surfaces, darker strokes, fixed contrast
   Targets: commission cards (home .ccard + commissions .cmodel), Dice Palace
   device frame, support channels, article meta-bar.
   ============================================================================ */

/* bluer/purpler dark grounds + glass (less flat grey); lift muted label text */
[data-theme="dark"]{
  --porcelain:#0A0D17;
  --porcelain-2:#161C2D;
  --mist:#1E2438;
  --ink:#10141F;
  --ink-2:#1A2234;
  --glass:rgba(130,140,225,.07);
  --glass-2:rgba(130,140,225,.04);
  --t-mute:#9AA1B4;
}

/* (1) commission cards: bluer fill + dimmer iridescent stroke */
[data-theme="dark"] .ccard,
[data-theme="dark"] .cmodel{
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(129,140,248,.12),transparent 55%),
    radial-gradient(100% 100% at 100% 100%,rgba(201,184,255,.07),transparent 60%),
    var(--porcelain-2);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="dark"] .ccard::before,
[data-theme="dark"] .cmodel::before{
  background:linear-gradient(125deg,rgba(129,140,248,.6),rgba(170,150,255,.45),rgba(129,140,248,.6));
  filter:none;opacity:.5;
}
/* featured (Hybrid) card: indigo-tinted dark panel so the light text is readable */
[data-theme="dark"] .ccard--feature,
[data-theme="dark"] .cmodel--feature{
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(129,140,248,.30),transparent 58%),
    linear-gradient(165deg,rgba(129,140,248,.22),rgba(124,134,224,.06)),
    var(--porcelain-2);
  box-shadow:var(--sh-card),0 0 0 1px rgba(129,140,248,.40),inset 0 1px 0 rgba(255,255,255,.09);
}
[data-theme="dark"] .ccard--feature::before,
[data-theme="dark"] .cmodel--feature::before{opacity:.7}

/* (2) Dice Palace device: dark bezel instead of a bright white frame */
[data-theme="dark"] .device{
  background:linear-gradient(160deg,#232b3e,#0f1421);
  border-color:rgba(255,255,255,.10);
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 6px rgba(0,0,0,.5);
}

/* (3) support channels: blue-tinted cards + readable email link */
[data-theme="dark"] .support-channel{
  background:linear-gradient(160deg,rgba(129,140,248,.13),rgba(124,134,224,.05)),var(--porcelain-2);
  border-color:rgba(129,140,248,.22);
}
[data-theme="dark"] .support-channel__value a{color:#9AA0FF}

/* (4) article meta-bar: dark pills (muted labels lifted via --t-mute above) */
[data-theme="dark"] .meta-bar__author,
[data-theme="dark"] .meta-bar__fact{
  background:rgba(255,255,255,.06);border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* ============================================================================
   REVISION 12 - dark fixes (marquee, dark button, mobile menu, value icons)
   + mobile hero redesign (bigger ball, wide horizontal SiGMA card over the ball)
   ============================================================================ */

/* (screen 1) marquee statement bar: dark translucent in dark mode so text pops */
[data-theme="dark"] .marquee{background:rgba(255,255,255,.05);border-color:var(--line)}

/* (screen 2) "Explore Dice Palace" dark button -> light button on dark sections */
html[data-theme="dark"] .btn--dark{background:#EAEDF4 !important;color:#10141F !important;box-shadow:0 16px 34px -18px rgba(0,0,0,.7)}
html[data-theme="dark"] .btn--dark:hover{background:#fff !important}

/* (screen 3) about value-icon tiles: indigo-tinted (no harsh white wash) in dark */
[data-theme="dark"] .value__icon{
  background:radial-gradient(120% 90% at 30% 20%,rgba(129,140,248,.28),transparent 55%),var(--indigo-tint);
}

/* (screen 4) mobile menu panel: opaque (was see-through light panel in dark) */
@media(max-width:900px){
  .nav__links{background:rgba(244,245,247,.985)}
  [data-theme="dark"] .nav__links{background:rgba(9,12,20,.985);border-bottom-color:rgba(255,255,255,.10)}
}

/* ---- Mobile hero redesign (homepage): bigger ball, wide horizontal SiGMA card ---- */
@media(max-width:600px){
  .hero--home .hero__visual{order:-1}
  .hero--home .blob-stage{
    position:relative;display:block;aspect-ratio:auto;height:auto;
    width:100%;max-width:none;margin:0 auto;padding-bottom:42px;gap:0;
  }
  .hero--home .chrome-blob--xl{--blob-size:clamp(240px,76vw,320px);margin:0 auto}
  .hero--home .hero__ticket{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:min(430px,94vw);max-width:430px;margin:0;animation:none;float:none;
  }
  /* horizontal boarding-pass layout */
  .hero--home .hero__ticket .pass__top{padding:9px 15px}
  .hero--home .hero__ticket .pass__body{
    display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 16px;padding:12px 16px;
  }
  .hero--home .hero__ticket .pass__big{grid-row:1 / 3;margin:0;font-size:clamp(34px,11vw,46px)}
  .hero--home .hero__ticket .pass__route{margin:0}
  .hero--home .hero__ticket .pass__meta{margin:0;padding-top:8px;border-top:1px dashed var(--line-2);gap:8px 14px}
}

/* ============================================================================
   REVISION 13 - theme toggle in header only; brighter purple icons in dark
   ============================================================================ */
.nav__theme-item{display:none !important}
[data-theme="dark"] .value__icon,
[data-theme="dark"] .support-channel__icon,
[data-theme="dark"] .meta-card__icon,
[data-theme="dark"] .pay-card__icon,
[data-theme="dark"] .spec-card__icon,
[data-theme="dark"] .feature__icon,
[data-theme="dark"] .step__icon{color:#AAB0FF}

/* ============================================================================
   REVISION 14 - Dice Palace screenshot slider inside the device frame (shape kept)
   ============================================================================ */
.screen-slider{position:absolute;inset:0;width:100%;height:100%}
.screen-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .9s var(--ease);will-change:opacity}
.screen-slide.is-active{opacity:1}
.screen-slide.is-broken{display:none}
@media(prefers-reduced-motion:reduce){.screen-slide{transition:none}}

/* ============================================================================
   REVISION 15 - match device screen to the real screenshot ratio (~2.03:1)
   so the slider images fill the screen with no trim and no letterbox
   ============================================================================ */
.device--laptop{aspect-ratio:auto}
.device--laptop .device__screen{height:auto;aspect-ratio:1916 / 944}
.screen-slide{object-position:center center}

/* ============================================================================
   REVISION 16 - bulletproof device-screen height (padding-ratio, all browsers)
   + force Brands device fully visible on mobile (override old faded backdrop)
   ============================================================================ */
.device--laptop .device__screen{aspect-ratio:auto;height:0;padding-bottom:49.27%}
@media(max-width:900px){
  #brands .hero__visual{position:static !important;opacity:1 !important;inset:auto !important;z-index:auto !important;pointer-events:auto !important;-webkit-mask:none !important;mask:none !important;transform:none !important}
}

/* ============================================================================
   REVISION 17 - FIX: brands visual collapsed to 28px on mobile because the grid
   uses align-items:center (flex column shrinks items to content). Force full width.
   ============================================================================ */
@media(max-width:900px){
  #brands .hero__grid{align-items:stretch}
  #brands .hero__visual{width:100%;max-width:100%}
  #brands .device--laptop{width:100%;max-width:560px;margin-inline:auto}
}

/* ============================================================================
   REVISION 18 - same collapse fix for the inner-page hero device (Dice Palace)
   ============================================================================ */
@media(max-width:900px){
  .hero:not(.hero--home) .hero__grid{align-items:stretch}
  .hero:not(.hero--home) .hero__visual{width:100%;max-width:100%}
}

/* footer: Terms & Conditions link */
.footer__terms{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--t-on-dim);text-decoration:none;transition:color .2s var(--ease)}
.footer__terms:hover{color:#fff;text-decoration:underline}