/* =====================================================================
   TradeLens marketing site. One stylesheet for every page.
   Brand tokens are the app's own.
   ===================================================================== */
:root {
  --bg: #06080B; --bg-2: #0A0D12; --card: #0E1116; --card-2: #12161D;
  --line: #1E242D; --line-2: #2A323D;
  --ink: #E9EDF2; --ink-2: #A3ADB9; --ink-3: #6F7A87;
  --blue: #60A5FA; --green: #34D399; --amber: #FBBF24; --rose: #FB7185; --violet: #C084FC;
  --grad: linear-gradient(90deg, #60A5FA, #34D399);
  --grad-wide: linear-gradient(120deg, #60A5FA 0%, #34D399 45%, #FBBF24 75%, #C084FC 100%);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 68px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
/* clip, never hidden: hidden would make body a scroll container and break every sticky element. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
html.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--green); color: #041018; font-weight: 700; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.mono { font-family: var(--mono); }
.kicker { font: 600 11px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; }
.sec { position: relative; padding: 120px 0; }
.sec.tight { padding: 80px 0; }
.sec-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.sec-head h2 { margin: 18px 0 16px; font: 800 clamp(34px, 5vw, 58px)/1.02 var(--sans); letter-spacing: -.035em; }
.sec-head p { margin: 0 auto; max-width: 620px; color: var(--ink-2); font-size: 18px; }
.h2-side { margin: 18px 0 16px; font: 800 clamp(34px, 4.6vw, 54px)/1.02 var(--sans); letter-spacing: -.035em; }
.p-side { color: var(--ink-2); font-size: 18px; margin: 0 0 18px; }
.pos { color: var(--green); } .neg { color: var(--rose); } .amb { color: var(--amber); }

/* ---------- ambient background ---------- */
.aurora { position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none; filter: blur(80px); opacity: .55; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: drift 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 8vw; top: 4vh; background: radial-gradient(circle, rgba(96,165,250,.55), transparent 65%); }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; right: 6vw; top: 26vh; background: radial-gradient(circle, rgba(52,211,153,.45), transparent 65%); animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 38vw; top: 70vh; background: radial-gradient(circle, rgba(192,132,252,.35), transparent 65%); animation-duration: 38s; animation-delay: -14s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, -4vh) scale(1.12); } 100% { transform: translate(-4vw, 6vh) scale(.95); } }
.grid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(147,164,183,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(147,164,183,.05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 75%); }

/* ---------- the ticker bar: the very top of every page ---------- */
.tickerbar { position: relative; z-index: 52; height: 38px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(96,165,250,.07), rgba(52,211,153,.07) 50%, rgba(192,132,252,.07)), #07090D; view-transition-name: tickerbar; }
.tickerbar .viewport { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tickerbar .track { display: flex; gap: 44px; width: max-content; animation: marquee 64s linear infinite; }
.tickerbar:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tick { display: inline-flex; align-items: center; gap: 10px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.tick b { color: var(--ink); font-weight: 700; }
.tick .g { color: var(--green); } .tick .a { color: var(--amber); } .tick .v { color: var(--violet); } .tick .bl { color: var(--blue); }
.tick svg { width: 13px; height: 13px; }

/* ---------- nav ---------- */
nav.top { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(6,8,11,.66); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; view-transition-name: sitenav; }
nav.top.scrolled { border-bottom-color: var(--line); background: rgba(6,8,11,.82); }
nav.top .row { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 18px var(--sans); letter-spacing: -.02em; }
.brand svg { width: 26px; height: 26px; }
.brand .jc-cade { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .jc-coin { transform-box: fill-box; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .jc-coin { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .brand .jc-coin { transition: none; } }
.nav-links { display: flex; gap: 6px; font-size: 14px; color: var(--ink-2); }
.nav-links a { position: relative; padding: 8px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: rgba(147,164,183,.06); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 12px rgba(52,211,153,.6); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(14,17,22,.7); place-items: center; }
.menu-btn span { position: relative; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: background .2s; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease); }
.menu-btn span::before { transform: translateY(-6px); } .menu-btn span::after { transform: translateY(6px); }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: rotate(45deg); } .menu-open .menu-btn span::after { transform: rotate(-45deg); }
#scrollbar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); pointer-events: none; }

/* the phone menu */
.mnav { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 58px) 24px 28px; background: rgba(6,8,11,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; overflow-y: auto; }
.menu-open .mnav { opacity: 1; visibility: visible; }
.mnav a.big { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--line); font: 800 30px/1.1 var(--sans); letter-spacing: -.03em; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 45ms + 60ms); }
.mnav a.big small { font: 600 11px var(--mono); letter-spacing: .16em; color: var(--ink-3); text-transform: uppercase; }
.mnav a.big.active { color: var(--green); }
.menu-open .mnav a.big { opacity: 1; transform: none; }
.mnav .mcta { display: grid; gap: 10px; margin-top: 28px; }
.mnav .mfoot { margin-top: auto; padding-top: 28px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(14,17,22,.7); color: var(--ink); font: 600 14px var(--sans); transition: transform .25s var(--ease), border-color .25s, background .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); border-color: #3a4452; }
.btn.small { height: 38px; padding: 0 16px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn.primary { border: 0; color: #041018; background: var(--grad); box-shadow: 0 10px 40px -10px rgba(52,211,153,.55), inset 0 1px 0 rgba(255,255,255,.35); overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 3.2s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn.primary:hover { box-shadow: 0 16px 50px -10px rgba(52,211,153,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: translateX(3px); }
.textlink { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--sans); color: var(--green); }
.textlink .arrow { transition: transform .25s var(--ease); } .textlink:hover .arrow { transform: translateX(4px); }

/* ---------- reveal ---------- */
/* Copy is visible by default. It only waits for the scroll reveal once the page
   script has said it is running (html.js), and shows anyway after a moment if
   site.js never wires the reveal up (html.rv-ready). */
.rv { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
html.js .rv:not(.in) { opacity: 0; transform: translateY(40px); }
html.js:not(.rv-ready) .rv:not(.in) { animation: rv-failsafe .6s var(--ease) 2.5s forwards; }
@keyframes rv-failsafe { to { opacity: 1; transform: none; } }

/* ---------- page hero (inner pages) ---------- */
.phero { position: relative; padding: 96px 0 56px; text-align: center; }
.phero .eyebrow { margin-bottom: 26px; }
.phero h1 { margin: 0 auto 22px; max-width: 980px; font: 900 clamp(42px, 6.6vw, 88px)/.96 var(--sans); letter-spacing: -.05em; }
.phero h1 .serif { font-size: 1.06em; }
.phero .lede { max-width: 640px; margin: 0 auto; color: var(--ink-2); font-size: 19px; }
.phero .ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.phero .rings { position: absolute; left: 50%; top: 40px; width: 720px; height: 720px; transform: translateX(-50%); pointer-events: none; z-index: -1; opacity: .55; }
.phero .rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(147,164,183,.12); animation: spin 90s linear infinite; }
.phero .rings i:nth-child(2) { inset: 90px; animation-duration: 60s; animation-direction: reverse; border-style: solid; border-color: rgba(52,211,153,.10); }
.phero .rings i:nth-child(3) { inset: 180px; animation-duration: 40s; border-color: rgba(96,165,250,.12); }
.phero .rings i::after { content: ""; position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); }
.phero .rings i:nth-child(3)::after { background: var(--blue); box-shadow: 0 0 16px var(--blue); }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14,17,22,.6); font: 600 13px var(--sans); color: var(--ink-2); transition: color .2s, border-color .2s, transform .25s var(--ease); }
.jump a:hover { color: var(--ink); border-color: rgba(52,211,153,.5); transform: translateY(-2px); }

/* ---------- hero (home) ---------- */
.hero { padding: 56px 0 40px; }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; min-height: calc(100vh - 150px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(14,17,22,.6); font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(52,211,153,0); } }
.hero h1 { margin: 26px 0 22px; font: 900 clamp(46px, 7vw, 92px)/.95 var(--sans); letter-spacing: -.05em; }
.hero h1 .serif { font-size: 1.08em; font-weight: 600; letter-spacing: -.02em; }
.word { display: inline-block; opacity: 0; transform: translateY(40px) rotate(3deg); animation: rise .9s var(--spring) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.shimmer { background: linear-gradient(90deg, #60A5FA, #34D399, #FBBF24, #34D399, #60A5FA); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: 300% 0; } }
/* A headline word can rise in and shimmer: both animations, or the shimmer would replace the rise and leave it invisible. */
.word.shimmer { animation: rise .9s var(--spring) forwards, shimmer 7s linear infinite; }
.hero .lede { max-width: 560px; color: var(--ink-2); font-size: 19px; line-height: 1.6; margin: 0 0 32px; }
.hero .lede b { color: var(--ink); font-weight: 600; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font: 500 12px var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* the trader card */
.card-stage { position: relative; display: grid; place-items: center; height: 640px; perspective: 1100px; }
.halo { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(96,165,250,.0), rgba(96,165,250,.28), rgba(52,211,153,.3), rgba(251,191,36,.25), rgba(192,132,252,.25), rgba(96,165,250,.0)); filter: blur(40px); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit { position: absolute; width: 560px; height: 560px; border-radius: 50%; border: 1px dashed rgba(147,164,183,.14); animation: spin 60s linear infinite reverse; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); top: -4px; left: calc(50% - 4px); }
.orbit::after { background: var(--blue); box-shadow: 0 0 16px var(--blue); top: auto; bottom: -4px; }
.tcard { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --tier: #FBBF24; position: relative; width: 330px; aspect-ratio: 5 / 7.1; border-radius: 26px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); will-change: transform; }
.tcard.live { transition: transform .08s linear; }
.tcard .face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; padding: 22px 22px 20px; display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, rgba(251,191,36,.20), transparent 55%), linear-gradient(160deg, #1A1508 0%, #0E1116 38%, #0B0E13 100%);
  border: 1px solid rgba(251,191,36,.45); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08), 0 0 60px -20px var(--tier); transition: box-shadow .6s, border-color .6s; }
.tcard .foil { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  background: repeating-linear-gradient(115deg, rgba(255,0,132,.10) 0%, rgba(252,164,0,.10) 7%, rgba(255,255,0,.08) 14%, rgba(0,255,138,.10) 21%, rgba(0,207,255,.12) 28%, rgba(204,76,250,.10) 35%, rgba(255,0,132,.10) 42%);
  background-size: 300% 300%; background-position: var(--mx) var(--my); }
.tcard .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 42%); mix-blend-mode: overlay; }
.tcard .top { display: flex; justify-content: space-between; align-items: flex-start; }
.ovr { font: 900 58px/.9 var(--sans); letter-spacing: -.04em; color: var(--tier); text-shadow: 0 0 30px rgba(251,191,36,.35); }
.ovr small { display: block; margin-top: 6px; font: 700 11px var(--mono); letter-spacing: .2em; color: var(--ink-3); text-shadow: none; }
.tierchip { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(251,191,36,.5); background: rgba(251,191,36,.12); color: var(--amber); font: 700 11px var(--mono); letter-spacing: .18em; }
.tcard .face > * { flex-shrink: 0; }
.avatar { position: relative; width: 132px; height: 132px; margin: 8px auto 6px; }
.avatar svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.avatar .inner { position: absolute; inset: 12px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #273042, #0E1116 70%); border: 1px solid var(--line-2); font: 800 30px var(--sans); letter-spacing: -.02em; }
.avatar .inner span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pname { text-align: center; font: 800 21px/1.1 var(--sans); letter-spacing: -.02em; }
.plevel { text-align: center; margin-top: 6px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.plevel b { color: var(--green); font-weight: 700; }
.attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin: 16px 4px 14px; padding-top: 14px; border-top: 1px solid rgba(251,191,36,.18); }
.attr { display: flex; align-items: baseline; gap: 10px; font: 800 20px var(--sans); }
.attr i { font: 700 11px var(--mono); letter-spacing: .14em; font-style: normal; color: var(--ink-3); }
.xpbar { margin-top: auto; }
.xpbar .lbl { display: flex; justify-content: space-between; font: 600 11px var(--mono); color: var(--ink-3); letter-spacing: .06em; margin-bottom: 7px; }
.xpbar .lbl b { color: var(--ink); font-weight: 600; }
.xpbar .track { position: relative; height: 9px; border-radius: 99px; background: rgba(147,164,183,.14); overflow: hidden; }
.xpbar .fill { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 16px rgba(52,211,153,.6); transition: width .8s var(--ease); }
.xpbar .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: flow 1.6s linear infinite; }
@keyframes flow { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.toast { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12,15,20,.86); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); font: 600 13px var(--sans); white-space: nowrap; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .45s var(--ease), transform .55s var(--spring); pointer-events: none; }
.toast.on { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(-24px) scale(.96); }
.toast .xp { font: 800 13px var(--mono); color: var(--green); }
.toast .ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(52,211,153,.14); color: var(--green); }
.toast.gold .ic { background: rgba(251,191,36,.15); color: var(--amber); } .toast.gold .xp { color: var(--amber); }
.levelup { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; pointer-events: none; }
.levelup .burst { text-align: center; opacity: 0; transform: scale(.6); }
.levelup.on .burst { animation: lvl 2.4s var(--spring) forwards; }
@keyframes lvl { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: 1; transform: scale(1.08); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05) translateY(-20px); } }
.levelup .t1 { font: 700 13px var(--mono); letter-spacing: .4em; color: var(--green); }
.levelup .t2 { font: 900 84px/1 var(--sans); letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(52,211,153,.5)); }
.levelup .t3 { font: 800 20px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
canvas#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }

/* ---------- screenshots: browser frame, phone frame, callouts ---------- */
.frame { position: relative; border-radius: 16px; border: 1px solid var(--line-2); background: #0A0D12; box-shadow: 0 60px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5), 0 30px 90px -50px rgba(52,211,153,.45); overflow: hidden; }
.frame .bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #0D1117; }
.frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A323D; }
.frame .bar i:nth-child(1) { background: rgba(251,113,133,.7); } .frame .bar i:nth-child(2) { background: rgba(251,191,36,.7); } .frame .bar i:nth-child(3) { background: rgba(52,211,153,.7); }
.frame .bar .url { display: flex; align-items: center; gap: 7px; margin: 0 auto; transform: translateX(-26px); padding: 3px 12px; border-radius: 7px; background: rgba(147,164,183,.08); font: 500 11px var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.frame .bar .url svg { width: 11px; height: 11px; flex: none; color: var(--green); }
.frame .shot { position: relative; }
.frame img, .pshot img { width: 100%; height: auto; cursor: zoom-in; }
.frame-glow { position: relative; }
.frame-glow::before { content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 30% 40%, rgba(96,165,250,.35), transparent 70%), radial-gradient(60% 60% at 70% 60%, rgba(52,211,153,.3), transparent 70%); filter: blur(50px); }
.stage3d { perspective: 1800px; }
.stage3d .frame { --tilt: 0deg; --sc: 1; transform: rotateX(var(--tilt)) scale(var(--sc)); transform-origin: 50% 0%; will-change: transform; }
.callout { position: absolute; left: var(--x); top: var(--y); z-index: 3; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .7s var(--spring); transition-delay: var(--d, 0ms); }
.flat .callout { opacity: 1; transform: none; }
/* A guided tour: every pin shows, one label at a time. */
.callout .lbl { opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .4s var(--ease), transform .5s var(--spring); pointer-events: none; }
.callout.on { z-index: 4; }
.callout.on .lbl { opacity: 1; transform: none; }
.callout .pin { cursor: pointer; transition: transform .3s var(--spring); }
.callout:not(.on) .pin { transform: scale(.7); opacity: .75; }
.callout .hit { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 0; padding: 0; background: none; border-radius: 50%; }
.tourbar { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.tourbar button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14,17,22,.7); font: 600 12px var(--sans); color: var(--ink-3); transition: all .3s var(--ease); }
.tourbar button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tourbar button.on { color: var(--ink); border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); }
.tourbar button.on::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.callout .pin { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52,211,153,.25), 0 0 20px rgba(52,211,153,.8); }
.callout .pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(52,211,153,.7); animation: pulse 2.2s ease-out infinite; }
.callout .lbl { position: absolute; left: 16px; bottom: 14px; display: block; width: max-content; max-width: 250px; padding: 10px 13px; border-radius: 12px; border: 1px solid rgba(52,211,153,.4); background: rgba(8,11,15,.92); backdrop-filter: blur(8px); box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); font: 500 13px/1.35 var(--sans); color: var(--ink-2); }
.callout .lbl b { display: block; color: var(--ink); font-weight: 700; font-size: 14px; }
.callout.left .lbl { left: auto; right: 16px; }
.callout.below .lbl { bottom: auto; top: 14px; }
.chiplist { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.chiplist span { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 12px var(--sans); color: var(--ink-2); background: rgba(14,17,22,.7); }
.chiplist span b { color: var(--green); }
.pshot { position: relative; width: 270px; max-width: 100%; padding: 9px; border-radius: 42px; background: #05070A; border: 1px solid var(--line-2); box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.04); }
.pshot img { border-radius: 34px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.pshot::before { content: ""; position: absolute; top: 18px; left: 50%; z-index: 2; width: 74px; height: 20px; border-radius: 12px; background: #05070A; transform: translateX(-50%); }
.trio { position: relative; display: flex; justify-content: center; align-items: center; padding: 20px 0 40px; }
.trio .pshot { flex: none; transition: transform .8s var(--ease); }
.trio .pshot:nth-child(1) { transform: translate(60px, 40px) rotate(-9deg) translateY(var(--py1, 0px)); z-index: 1; }
.trio .pshot:nth-child(2) { z-index: 2; width: 300px; transform: translateY(var(--py2, 0px)); }
.trio .pshot:nth-child(3) { transform: translate(-60px, 40px) rotate(9deg) translateY(var(--py3, 0px)); z-index: 1; }
.caption { margin-top: 14px; text-align: center; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 28px; background: rgba(4,6,9,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; cursor: zoom-out; }
.lightbox.on { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1600px, 100%); max-height: calc(100vh - 56px); width: auto; border-radius: 14px; border: 1px solid var(--line-2); box-shadow: 0 40px 120px -30px rgba(0,0,0,.95); transform: scale(.95); transition: transform .45s var(--spring); }
.lightbox.on img { transform: none; }
.lightbox .x { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(14,17,22,.8); font-size: 22px; line-height: 1; }

/* showcase rows: copy beside a screenshot */
.show { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; padding: 64px 0; }
.show > * { min-width: 0; }
.show.flip .copy { order: 2; }
.show .copy h3 { margin: 14px 0 14px; font: 800 clamp(30px, 3.4vw, 44px)/1.05 var(--sans); letter-spacing: -.03em; }
.show .copy p { margin: 0 0 20px; color: var(--ink-2); font-size: 17px; }
.ticks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.ticks li svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 3px; }
.ticks li b { color: var(--ink); font-weight: 600; }
.xpchip { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 700 13px var(--mono); color: var(--green); padding: 8px 12px; border-radius: 10px; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); }
.xpchip.warn { color: var(--rose); background: rgba(251,113,133,.08); border-color: rgba(251,113,133,.3); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* ---------- stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 22px; background: rgba(12,15,20,.7); overflow: hidden; }
.stat { padding: 30px 26px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 900 46px/1 var(--sans); letter-spacing: -.04em; }
.stat span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 14px; }

/* ---------- the flip (P&L vs process) ---------- */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.versus > * { min-width: 0; }
.vcard { position: relative; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.9), rgba(12,15,20,.9)); padding: 28px; overflow: hidden; }
.vcard h3 { margin: 12px 0 18px; font: 800 26px/1.15 var(--sans); letter-spacing: -.02em; }
.vrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(147,164,183,.08); font-size: 15px; color: var(--ink-2); }
.vrow b { font: 700 16px var(--mono); text-align: right; }
.vcard.bad { border-color: rgba(251,113,133,.35); }
.vcard.bad::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 0% 0%, rgba(251,113,133,.12), transparent 60%); pointer-events: none; }
.vcard.good { border-color: rgba(52,211,153,.4); box-shadow: 0 30px 80px -40px rgba(52,211,153,.5); }
.vcard.good::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 100% 0%, rgba(52,211,153,.14), transparent 60%); pointer-events: none; }
.vs { align-self: center; font: 900 20px var(--mono); color: var(--ink-3); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--bg-2); }
.strike { position: relative; } .strike::after { content: ""; position: absolute; left: -4px; right: -4px; top: 55%; height: 2px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .9s; }
.in .strike::after { transform: scaleX(1); }
.verdict { margin-top: 44px; text-align: center; font: 800 clamp(26px, 3.4vw, 40px)/1.15 var(--sans); letter-spacing: -.03em; }

/* ---------- a day in XP (home) ---------- */
.dayrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dayrow > * { min-width: 0; }
.dstep { position: relative; padding: 24px 22px 22px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.9), rgba(10,13,18,.9)); overflow: hidden; }
.dstep .t { font: 600 11px var(--mono); letter-spacing: .16em; color: var(--ink-3); }
.dstep b { display: block; margin: 12px 0 8px; font: 800 20px/1.15 var(--sans); letter-spacing: -.02em; }
.dstep p { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; }
.dstep .x { font: 800 22px var(--mono); color: var(--green); }
.dstep::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0ms) + 300ms); }
.dstep.in::after { transform: scaleX(1); }
.daytotal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 18px 24px; border-radius: 18px; border: 1px solid rgba(52,211,153,.35); background: linear-gradient(90deg, rgba(52,211,153,.10), rgba(96,165,250,.06)); }
.daytotal span { color: var(--ink-2); }
.daytotal b { font: 900 28px var(--mono); color: var(--green); }

/* ---------- explore cards ---------- */
.explore { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.explore > * { min-width: 0; }
.xcard { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: rgba(14,17,22,.8); overflow: hidden; transition: transform .45s var(--ease), border-color .45s; }
.xcard:hover { transform: translateY(-6px); border-color: rgba(52,211,153,.45); }
.xcard .vis { position: relative; height: 160px; margin: -24px -24px 20px; border-bottom: 1px solid var(--line); overflow: hidden; background: #0A0D12 var(--img) no-repeat; background-size: var(--z, 250%); background-position: var(--pos, 40% 40%); transition: background-size .9s var(--ease); }
.xcard:hover .vis { background-size: calc(var(--z, 250%) + 25%); }
.xcard .vis.pricevis { display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 100%, rgba(52,211,153,.25), transparent 70%), #0A0D12; }
.xcard .vis.pricevis b { position: relative; z-index: 1; font: 900 64px/1 var(--sans); letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xcard .vis.pricevis small { display: block; margin-top: 6px; text-align: center; font: 600 11px var(--mono); letter-spacing: .16em; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.xcard .vis::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14,17,22,.95)); }
.xcard b { font: 800 20px var(--sans); letter-spacing: -.02em; }
.xcard span { margin: 8px 0 18px; color: var(--ink-2); font-size: 14px; }
.xcard .go { margin-top: auto; font: 600 13px var(--mono); letter-spacing: .08em; color: var(--green); text-transform: uppercase; }
.xcard .go i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.xcard:hover .go i { transform: translateX(5px); }

/* ---------- the day (sticky story) ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.story > *, .rating > *, .breaker > *, .duo > *, .split > * { min-width: 0; }
.story-screen { position: sticky; top: calc(var(--nav-h) + 40px); height: 560px; }
.device { position: relative; height: 100%; border-radius: 30px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0F1319, #0A0D12); box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.device .hud { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.device .hud .lv { display: flex; align-items: center; gap: 12px; font: 700 13px var(--mono); letter-spacing: .06em; }
.device .hud .lv .badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: #041018; font: 900 14px var(--sans); }
.device .hud .xpn { font: 800 22px var(--mono); color: var(--green); letter-spacing: -.02em; }
.device .hud .xpn small { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; margin-left: 4px; }
.scene { position: absolute; inset: 72px 0 0; padding: 26px; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .6s var(--ease), transform .7s var(--ease); pointer-events: none; }
.scene.on { opacity: 1; transform: none; }
.scene .when { font: 600 12px var(--mono); letter-spacing: .16em; color: var(--ink-3); }
.scene h4 { margin: 8px 0 20px; font: 800 28px/1.1 var(--sans); letter-spacing: -.02em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 13px var(--sans); color: var(--ink-2); transition: all .4s var(--ease); }
.chip.sel { border-color: rgba(52,211,153,.6); background: rgba(52,211,153,.12); color: var(--ink); transform: scale(1.04); }
.check { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(14,17,22,.8); font-size: 15px; }
.check .box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; transition: all .4s var(--spring); }
.check.on .box { background: var(--green); border-color: var(--green); transform: scale(1.1); }
.check .box svg { width: 14px; height: 14px; stroke: #041018; stroke-width: 3.5; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .4s ease .15s; }
.check.on .box svg { stroke-dashoffset: 0; }
.award { position: absolute; left: 26px; right: 26px; bottom: 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(52,211,153,.4); background: linear-gradient(90deg, rgba(52,211,153,.14), rgba(96,165,250,.08)); opacity: 0; transform: translateY(16px); transition: all .6s var(--spring) .6s; }
.scene.on .award { opacity: 1; transform: none; }
.award b { font: 800 22px var(--mono); color: var(--green); white-space: nowrap; }
.award span { font: 600 14px var(--sans); color: var(--ink-2); }
.tradecard { padding: 18px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(14,17,22,.9); }
.tradecard .r1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tradecard .sym { font: 800 20px var(--sans); } .tradecard .sym small { font: 700 11px var(--mono); color: var(--green); margin-left: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(52,211,153,.12); letter-spacing: .1em; }
.tradecard .pnl { font: 800 20px var(--mono); color: var(--green); }
.meter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 18px; }
.meter .seg { text-align: center; }
.meter .seg i { display: block; height: 8px; border-radius: 99px; background: rgba(147,164,183,.14); position: relative; overflow: hidden; }
.meter .seg i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); transition-delay: var(--d); }
.scene.on .meter .seg i::after { transform: scaleX(1); }
.meter .seg span { display: block; margin-top: 8px; font: 600 10px var(--mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.grade-medal { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #1a1204; font: 900 18px var(--sans); box-shadow: 0 0 24px rgba(251,191,36,.45); }
.lossmeter { margin-top: 10px; }
.lossmeter .top { display: flex; justify-content: space-between; font: 600 12px var(--mono); color: var(--ink-3); margin-bottom: 8px; }
.lossmeter .bar { height: 14px; border-radius: 99px; background: rgba(147,164,183,.12); overflow: hidden; }
.lossmeter .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FBBF24, #FB7185); transition: width 1.6s var(--ease) .2s; }
.scene.on .lossmeter .bar i { width: 82%; }
.lockcard { margin-top: 20px; padding: 18px; border-radius: 16px; border: 1px solid rgba(251,113,133,.4); background: rgba(251,113,133,.08); display: flex; gap: 14px; align-items: center; opacity: 0; transform: scale(.94); transition: all .6s var(--spring) 1.4s; }
.scene.on .lockcard { opacity: 1; transform: none; }
.lockcard svg { width: 34px; height: 34px; color: var(--rose); flex: none; }
.lockcard b { display: block; font: 800 17px var(--sans); }
.lockcard span { font: 500 13px var(--mono); color: var(--ink-2); }
.rc { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; font-size: 15px; color: var(--ink-2); }
.rc .g { font: 800 15px var(--mono); color: var(--ink); opacity: 0; transform: translateX(10px); transition: all .4s var(--ease); transition-delay: var(--d); }
.scene.on .rc .g { opacity: 1; transform: none; }
.stamp { position: absolute; right: 36px; top: 110px; width: 118px; height: 118px; border-radius: 50%; border: 4px solid var(--green); color: var(--green); display: grid; place-items: center; font: 900 46px var(--sans); letter-spacing: -.04em; transform: rotate(-14deg) scale(2.2); opacity: 0; transition: all .45s cubic-bezier(.2, 1.4, .4, 1) 1.5s; box-shadow: inset 0 0 0 4px rgba(52,211,153,.2); }
.scene.on .stamp { opacity: .95; transform: rotate(-14deg) scale(1); }
.steps { display: flex; flex-direction: column; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s; }
.step.on { opacity: 1; }
.step .n { font: 700 12px var(--mono); letter-spacing: .2em; color: var(--green); }
.step h3 { margin: 12px 0 14px; font: 800 clamp(28px, 3.2vw, 40px)/1.08 var(--sans); letter-spacing: -.03em; }
.step p { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 460px; }
.step .xpchip { margin-top: 18px; align-self: flex-start; max-width: 100%; }
.story-dots { display: none; justify-content: center; gap: 8px; margin-top: 16px; }
.story-dots button { width: 34px; height: 6px; border: 0; border-radius: 99px; background: rgba(147,164,183,.2); padding: 0; transition: background .3s, width .3s; }
.story-dots button.on { background: var(--green); width: 48px; }

/* ---------- XP table ---------- */
.xptable { max-width: 900px; margin: 0 auto; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: rgba(12,15,20,.85); }
.xptable .r { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--line); }
.xptable .r:first-child { border-top: 0; }
.xptable .r .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.25); color: var(--green); }
.xptable .r .ic svg { width: 20px; height: 20px; }
.xptable .r.gold .ic { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); color: var(--amber); }
.xptable .r b { display: block; font: 700 16px var(--sans); }
.xptable .r span { color: var(--ink-2); font-size: 14px; }
.xptable .r .v { font: 800 18px var(--mono); color: var(--green); text-align: right; white-space: nowrap; }
.xptable .r.gold .v { color: var(--amber); }
.xptable .r.zero .v { color: var(--ink-3); }
.xptable .r.zero .ic { background: rgba(147,164,183,.06); border-color: var(--line-2); color: var(--ink-3); }

/* ---------- rating ---------- */
.rating { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.radar-wrap { position: relative; aspect-ratio: 1; max-width: 520px; margin: 0 auto; width: 100%; }
.radar-wrap svg { width: 100%; height: 100%; overflow: visible; }
.radar-lbl { font: 700 12px var(--mono); letter-spacing: .14em; fill: var(--ink-2); }
.tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 28px; }
.tiers div { position: relative; padding: 12px 8px; border-radius: 12px; text-align: center; font: 700 11px var(--mono); letter-spacing: .08em; border: 1px solid var(--line); color: var(--ink-3); transition: all .5s var(--ease); }
.tiers div small { display: block; margin-top: 4px; font-weight: 500; color: var(--ink-3); }
.tiers div.on { color: var(--c); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transform: translateY(-4px); box-shadow: 0 14px 30px -18px var(--c); }
.attr-list { display: grid; gap: 12px; margin-top: 26px; }
.attr-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 14px; align-items: center; font: 600 13px var(--mono); }
.attr-row .b { height: 8px; border-radius: 99px; background: rgba(147,164,183,.12); overflow: hidden; }
.attr-row .b i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width 1.4s var(--ease); transition-delay: var(--d); }
.attr-row .v { text-align: right; color: var(--ink); font-weight: 700; }
.note { margin-top: 22px; padding: 14px 16px; border-left: 2px solid var(--green); background: rgba(52,211,153,.06); border-radius: 0 12px 12px 0; color: var(--ink-2); font-size: 15px; }

/* ---------- levels + seasons ---------- */
.ladder { position: relative; padding: 70px 0 30px; }
.ladder .rail { position: absolute; left: 6%; right: 6%; top: 104px; height: 4px; border-radius: 99px; background: rgba(147,164,183,.12); }
.ladder .rail i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--grad); box-shadow: 0 0 20px rgba(52,211,153,.6); transition: width 2.4s var(--ease); }
.ladder .nodes { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); }
.node { text-align: center; }
.node .dot { width: 22px; height: 22px; margin: 25px auto 0; border-radius: 50%; border: 3px solid var(--line-2); background: var(--bg); transition: all .5s var(--spring); transition-delay: var(--d); }
.node.on .dot { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 6px rgba(52,211,153,.15), 0 0 24px rgba(52,211,153,.6); transform: scale(1.1); }
.node .lv { font: 800 26px var(--sans); letter-spacing: -.03em; color: var(--ink-3); transition: color .5s; transition-delay: var(--d); }
.node.on .lv { color: var(--ink); }
.node .t { margin-top: 16px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.node .x { margin-top: 4px; font: 500 11px var(--mono); color: var(--ink-3); }
.node.here .t { color: var(--green); }
.youare { position: absolute; top: 18px; transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; background: var(--grad); color: #041018; font: 800 11px var(--mono); letter-spacing: .1em; white-space: nowrap; opacity: 0; transition: opacity .5s 2.2s; }
.youare::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #3DC9A5; transform: translateX(-50%) rotate(45deg); }
.in .youare { opacity: 1; }
.seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 70px; }
.medal { position: relative; border-radius: 22px; padding: 28px 18px 22px; text-align: center; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.9), rgba(10,13,18,.9)); overflow: hidden; transition: transform .4s var(--ease); }
.medal:hover { transform: translateY(-6px); }
.medal .disc { position: relative; width: 104px; height: 104px; margin: 0 auto 18px; border-radius: 50%; background: var(--m); box-shadow: inset 0 -8px 16px rgba(0,0,0,.35), inset 0 6px 12px rgba(255,255,255,.35), 0 18px 40px -16px var(--mg); display: grid; place-items: center; overflow: hidden; }
.medal .disc::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.65) 50%, transparent 60%); transform: translateX(-100%); animation: medalsheen 4.5s ease-in-out infinite; animation-delay: var(--sd); }
@keyframes medalsheen { 0%, 60% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
.medal .disc svg { width: 46px; height: 46px; position: relative; z-index: 1; color: rgba(0,0,0,.55); }
.medal b { display: block; font: 800 20px var(--sans); }
.medal span { font: 600 12px var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.challenges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.chal { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(14,17,22,.8); }
.chal svg.pr { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); }
.chal svg.pr circle { fill: none; stroke-width: 6; }
.chal svg.pr .trk { stroke: rgba(147,164,183,.14); }
.chal svg.pr .arc { stroke: url(#g-brand); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; transition: stroke-dashoffset 1.6s var(--ease); transition-delay: var(--d); }
.chal b { display: block; font: 700 16px var(--sans); }
.chal span { font: 500 13px var(--sans); color: var(--ink-2); }
.chal em { display: block; margin-top: 4px; font: 700 12px var(--mono); font-style: normal; color: var(--green); }

/* ---------- achievements ---------- */
.medals { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.ach { perspective: 900px; height: 188px; cursor: default; }
.ach .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.ach:hover .inner, .ach.flip .inner { transform: rotateY(180deg); }
.ach .f, .ach .b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.95), rgba(10,13,18,.95)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; text-align: center; }
.ach .b { transform: rotateY(180deg); font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ach .b b { color: var(--ink); display: block; margin-bottom: 6px; font-size: 14px; }
.ach .b em { margin-top: 10px; font: 700 11px var(--mono); font-style: normal; color: var(--amber); letter-spacing: .08em; }
.hexm { position: relative; width: 78px; height: 86px; margin-bottom: 12px; }
.hexm svg { width: 100%; height: 100%; }
.hexm .num { position: absolute; inset: 0; display: grid; place-items: center; font: 900 16px var(--mono); color: #0b0f14; padding-top: 40px; }
.ach .name { font: 700 14px var(--sans); }
.ach .grp { margin-top: 3px; font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ach.locked .hexm { filter: grayscale(1) brightness(.45); }
.ach.locked .name { color: var(--ink-3); }
.ach.fresh .f { animation: unlock 1.2s var(--spring); border-color: rgba(251,191,36,.6); box-shadow: 0 0 0 1px rgba(251,191,36,.3), 0 20px 50px -20px rgba(251,191,36,.6); }
@keyframes unlock { 0% { transform: scale(.9); } 40% { transform: scale(1.08); } 100% { transform: none; } }
.lockic { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; color: var(--ink-3); }
.ach:not(.locked) .lockic { display: none; }

/* ---------- report card + wrapped ---------- */
.duo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch; }
.panel { position: relative; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.92), rgba(10,13,18,.92)); padding: 34px; overflow: hidden; }
.panel h3 { margin: 12px 0 10px; font: 800 30px/1.1 var(--sans); letter-spacing: -.03em; }
.panel p.sub { margin: 0 0 26px; color: var(--ink-2); }
.rcgrid { display: grid; gap: 10px; }
.rcrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; background: rgba(14,17,22,.8); border: 1px solid var(--line); }
.rcrow .k { font: 600 15px var(--sans); } .rcrow .k small { display: block; font: 400 12px var(--sans); color: var(--ink-3); margin-top: 2px; }
.lg { width: 44px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 900 16px var(--mono); border: 1px solid; transform: scale(0); transition: transform .5s var(--spring); transition-delay: var(--d); }
.in .lg { transform: scale(1); }
.lg.A { color: var(--green); border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); }
.lg.B { color: var(--blue); border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.1); }
.bigstamp { position: absolute; right: 30px; top: 30px; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; border: 5px solid var(--green); color: var(--green); font: 900 50px var(--sans); letter-spacing: -.05em; transform: rotate(-12deg) scale(2.4); opacity: 0; transition: all .5s cubic-bezier(.2, 1.4, .4, 1) 1.3s; }
.in .bigstamp { transform: rotate(-12deg) scale(1); opacity: .92; }
#rcpanel { display: flex; flex-direction: column; }
#rcpanel h3, #rcpanel p.sub { padding-right: 150px; }
.rcfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.rcfoot > span { color: var(--ink-2); font-size: 14px; }
.rcfoot b { font: 900 30px var(--mono); color: var(--green); letter-spacing: -.02em; }
.rcfoot em { font: 700 12px var(--mono); font-style: normal; color: var(--green); padding: 7px 10px; border-radius: 9px; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); white-space: nowrap; }
.phone { position: relative; width: 300px; max-width: 100%; aspect-ratio: 9 / 18.5; margin: 0 auto; border-radius: 42px; padding: 12px; background: #05070A; border: 1px solid var(--line-2); box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.04); }
.phone .screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; }
.bars { position: absolute; z-index: 3; left: 14px; right: 14px; top: 14px; display: flex; gap: 5px; }
.bars span { flex: 1; height: 3px; border-radius: 9px; background: rgba(255,255,255,.25); overflow: hidden; }
.bars span i { display: block; height: 100%; width: 0; background: #fff; }
.slide { position: absolute; inset: 0; padding: 60px 26px 30px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.slide.on { opacity: 1; transform: none; }
.slide .k { font: 700 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.slide .big { margin: 12px 0 8px; font: 900 64px/.95 var(--sans); letter-spacing: -.05em; }
.slide .mid { font: 800 30px/1.08 var(--sans); letter-spacing: -.03em; margin: 12px 0; }
.slide p { margin: 0; font-size: 15px; opacity: .85; }
.s1 { background: radial-gradient(120% 70% at 20% 10%, #1d4ed8, transparent 60%), radial-gradient(120% 70% at 90% 90%, #059669, transparent 60%), #06080b; }
.s2 { background: linear-gradient(160deg, #064e3b, #022c22 55%, #06080b); }
.s3 { background: linear-gradient(160deg, #7c2d12, #451a03 55%, #06080b); }
.s4 { background: linear-gradient(160deg, #312e81, #1e1b4b 55%, #06080b); }
.s5 { background: radial-gradient(120% 80% at 50% 0%, #0e7490, transparent 60%), linear-gradient(180deg, #06080b, #0b1220); }
.flame { width: 58px; height: 58px; color: #FB923C; filter: drop-shadow(0 0 20px rgba(251,146,60,.7)); animation: flick 1.2s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.08) rotate(2deg); } }

/* ---------- breaker ---------- */
.breaker { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.brk-demo { position: relative; padding: 34px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.92), rgba(10,13,18,.92)); }
.brk-demo .trades { display: grid; gap: 10px; }
.brk-demo .tr { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgba(14,17,22,.85); border: 1px solid var(--line); font: 600 14px var(--mono); opacity: 0; transform: translateX(-16px); transition: all .5s var(--ease); }
.brk-demo .tr.on { opacity: 1; transform: none; }
.brk-demo .gauge { margin-top: 22px; }
.brk-demo .gauge .l { display: flex; justify-content: space-between; gap: 10px; font: 600 12px var(--mono); color: var(--ink-3); margin-bottom: 8px; }
.brk-demo .gauge .bar { position: relative; height: 16px; border-radius: 99px; background: rgba(147,164,183,.12); overflow: hidden; }
.brk-demo .gauge .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FBBF24, #FB7185); transition: width .9s var(--ease); }
.tripped { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; padding: 20px; background: rgba(6,8,11,.8); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.tripped.on { opacity: 1; }
.tripped .box { text-align: center; transform: scale(.9); transition: transform .6s var(--spring); }
.tripped.on .box { transform: none; }
.tripped svg { width: 64px; height: 64px; margin: 0 auto 14px; color: var(--rose); }
.tripped b { display: block; font: 900 30px var(--sans); letter-spacing: -.03em; }
.tripped .cd { margin-top: 8px; font: 700 20px var(--mono); color: var(--amber); }
.tripped span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 14px; }

/* ---------- leaderboard ---------- */
.lb { max-width: 820px; margin: 0 auto; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.92), rgba(10,13,18,.92)); padding: 20px; }
.lb .head { display: grid; grid-template-columns: 50px 1fr 110px 110px 80px; gap: 12px; padding: 10px 16px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lb .rows { position: relative; }
.lb .row { position: absolute; left: 0; right: 0; height: 60px; display: grid; grid-template-columns: 50px 1fr 110px 110px 80px; gap: 12px; align-items: center; padding: 0 16px; border-radius: 14px; transition: transform .8s var(--ease), background .4s; }
.lb .row.me { background: linear-gradient(90deg, rgba(52,211,153,.14), rgba(96,165,250,.06)); border: 1px solid rgba(52,211,153,.35); }
.lb .rk { font: 900 20px var(--mono); color: var(--ink-3); }
.lb .al { display: flex; align-items: center; gap: 12px; font: 700 15px var(--sans); min-width: 0; }
.lb .al .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb .al i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 12px var(--sans); font-style: normal; background: var(--av); color: #041018; }
.lb .lvc { font: 600 12px var(--mono); color: var(--ink-2); }
.lb .tier { justify-self: start; padding: 4px 8px; border-radius: 7px; font: 700 10px var(--mono); letter-spacing: .1em; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.lb .sc { font: 800 18px var(--mono); text-align: right; }
.lb-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.lb-tags span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 13px var(--sans); color: var(--ink-2); }
.lb-tags span svg { width: 16px; height: 16px; color: var(--green); }
.example { text-align: center; margin-top: 12px; font: 500 11px var(--mono); color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.scorebox { padding: 30px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.92), rgba(10,13,18,.92)); }
.srow { display: grid; grid-template-columns: 1fr 120px 60px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(147,164,183,.07); font-size: 15px; color: var(--ink-2); }
.srow:first-of-type { border-top: 0; }
.srow .b { height: 8px; border-radius: 99px; background: rgba(147,164,183,.12); overflow: hidden; }
.srow .b i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width 1.2s var(--ease); transition-delay: var(--d); }
.in .srow .b i { width: var(--w); }
.srow .p { font: 700 14px var(--mono); color: var(--ink); text-align: right; }
.stotal { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); font: 700 14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stotal b { color: var(--green); }
.duel { display: grid; gap: 14px; }
.duelist { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(14,17,22,.85); }
.duelist .h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.duelist .h b { font: 800 18px var(--sans); }
.duelist .h span { font: 600 12px var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 12px; }
.dots i { width: 14px; height: 14px; border-radius: 4px; background: rgba(147,164,183,.16); transform: scale(0); transition: transform .35s var(--spring); transition-delay: var(--d); }
.dots i.ok { background: var(--green); box-shadow: 0 0 10px rgba(52,211,153,.5); }
.in .dots i { transform: scale(1); }
.duelist .res { display: flex; justify-content: space-between; align-items: center; font: 600 13px var(--mono); color: var(--ink-2); }
.duelist .res b { font: 900 26px var(--mono); }
.duelist.win { border-color: rgba(52,211,153,.45); box-shadow: 0 20px 60px -30px rgba(52,211,153,.5); }
.duelist.win .res b { color: var(--green); }
.seesnever { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sn { padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: rgba(14,17,22,.8); }
.sn h3 { margin: 10px 0 18px; font: 800 24px var(--sans); letter-spacing: -.02em; }
.sn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sn li { display: flex; gap: 10px; color: var(--ink-2); font-size: 15px; }
.sn li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.sn.yes { border-color: rgba(52,211,153,.35); } .sn.yes li svg { color: var(--green); }
.sn.no { border-color: rgba(251,113,133,.3); } .sn.no li svg { color: var(--rose); }

/* ---------- features grid ---------- */
.feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feat { position: relative; padding: 26px 22px; border-radius: 20px; border: 1px solid var(--line); background: rgba(14,17,22,.75); overflow: hidden; transition: transform .4s var(--ease), border-color .4s; }
.feat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--fx, 50%) var(--fy, 0%), rgba(52,211,153,.12), transparent 60%); opacity: 0; transition: opacity .4s; }
.feat:hover { transform: translateY(-4px); border-color: var(--line-2); }
.feat:hover::before { opacity: 1; }
.feat .ic { position: relative; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25); color: var(--blue); margin-bottom: 18px; }
.feat .ic svg { width: 22px; height: 22px; }
.feat b { position: relative; display: block; font: 700 17px var(--sans); margin-bottom: 8px; }
.feat span { position: relative; font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ---------- compare ---------- */
.compare { max-width: 860px; margin: 0 auto; border-radius: 26px; border: 1px solid var(--line); overflow: hidden; background: rgba(12,15,20,.85); }
.compare .r { display: grid; grid-template-columns: 1fr 170px 170px; align-items: center; padding: 16px 26px; border-top: 1px solid var(--line); font-size: 15px; }
.compare .r:first-child { border-top: 0; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: rgba(18,22,29,.9); }
.compare .r:first-child span:last-child { color: var(--green); }
.compare .r.grp { padding: 12px 26px; background: rgba(18,22,29,.6); font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.compare .c { text-align: center; }
.compare .yes svg { width: 26px; height: 26px; margin: 0 auto; }
.compare .yes path { stroke: var(--green); stroke-width: 3; fill: none; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .5s ease; transition-delay: var(--d); }
.compare.in .yes path { stroke-dashoffset: 0; }
.compare .no { color: var(--ink-3); font: 600 18px var(--mono); }

/* ---------- pricing ---------- */
.beta { max-width: 760px; margin: 0 auto 44px; display: flex; gap: 14px; align-items: center; justify-content: center; padding: 14px 20px; border-radius: 16px; border: 1px solid rgba(52,211,153,.4); background: linear-gradient(90deg, rgba(52,211,153,.12), rgba(96,165,250,.08)); font-weight: 600; text-align: center; }
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
.price { position: relative; padding: 32px 28px; border-radius: 24px; border: 1px solid var(--line); background: rgba(14,17,22,.8); display: flex; flex-direction: column; }
.price.pro { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad-wide) border-box; border: 1.5px solid transparent; box-shadow: 0 40px 90px -40px rgba(52,211,153,.45); transform: translateY(-10px); }
.price .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--grad); color: #041018; font: 800 11px var(--mono); letter-spacing: .12em; white-space: nowrap; }
.price h3 { margin: 0; font: 700 14px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.price .amt { margin: 14px 0 6px; font: 900 48px var(--sans); letter-spacing: -.04em; }
.price .amt small { font: 500 16px var(--sans); color: var(--ink-3); letter-spacing: 0; }
.price p { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; }
.price ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.price li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.price li svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 3px; }
.price .btn { margin-top: auto; width: 100%; }
.price .fine { margin: 10px 0 0; text-align: center; font: 500 11px var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.affil { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 36px; border-radius: 26px; border: 1px solid var(--line); background: radial-gradient(80% 120% at 100% 0%, rgba(251,191,36,.12), transparent 60%), linear-gradient(180deg, rgba(18,22,29,.92), rgba(10,13,18,.92)); }
.affil h3 { margin: 10px 0 10px; font: 800 30px/1.1 var(--sans); letter-spacing: -.03em; }
.affil p { margin: 0; color: var(--ink-2); max-width: 620px; }
.affil .pct { font: 900 84px/1 var(--sans); letter-spacing: -.05em; background: linear-gradient(135deg, #FDE68A, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; }
.affil .pct small { display: block; margin-top: 6px; font: 600 11px var(--mono); letter-spacing: .16em; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }

/* ---------- faq ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 16px; border: 1px solid var(--line); background: rgba(14,17,22,.8); padding: 0 22px; transition: border-color .3s; }
.faq details[open] { border-color: var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 700 17px var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--line-2); font-style: normal; transition: transform .35s var(--ease); color: var(--green); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq .a { padding: 0 0 22px; color: var(--ink-2); font-size: 16px; }

/* ---------- about ---------- */
.manifesto { max-width: 860px; margin: 0 auto; font: 600 clamp(24px, 3vw, 34px)/1.35 var(--sans); letter-spacing: -.02em; color: var(--ink-3); }
.manifesto span { color: var(--ink); transition: color .6s; }
.manifesto p { margin: 0 0 1em; }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.principle { position: relative; padding: 32px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,22,29,.92), rgba(10,13,18,.92)); overflow: hidden; }
.principle .n { font: 900 64px/1 var(--sans); letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.principle h3 { margin: 16px 0 10px; font: 800 24px var(--sans); letter-spacing: -.02em; }
.principle p { margin: 0; color: var(--ink-2); }
.never { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.never div { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line); background: rgba(14,17,22,.8); font-size: 16px; color: var(--ink-2); }
.never div b { color: var(--ink); }
.never svg { width: 26px; height: 26px; flex: none; color: var(--rose); }
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px; border-radius: 24px; border: 1px solid var(--line); background: rgba(14,17,22,.8); }
.contact h3 { margin: 8px 0 6px; font: 800 26px var(--sans); letter-spacing: -.02em; }
.contact p { margin: 0; color: var(--ink-2); }

/* ---------- legal ---------- */
.legal { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.legal > * { min-width: 0; }
.legal nav { position: sticky; top: calc(var(--nav-h) + 30px); display: grid; gap: 4px; }
.legal nav a { padding: 10px 14px; border-radius: 10px; color: var(--ink-2); font-size: 14px; border: 1px solid transparent; }
.legal nav a:hover { color: var(--ink); background: rgba(147,164,183,.06); }
.legal nav a.on { color: var(--ink); border-color: var(--line-2); background: rgba(14,17,22,.8); }
.doc { padding: 34px; margin-bottom: 22px; border-radius: 22px; border: 1px solid var(--line); background: rgba(12,15,20,.85); }
.doc h2 { margin: 6px 0 4px; font: 800 30px var(--sans); letter-spacing: -.03em; }
.doc .date { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.doc p { color: var(--ink-2); font-size: 15px; }
.doc p strong { color: var(--ink); }
.doc a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- final cta ---------- */
.final { text-align: center; padding: 140px 0 120px; }
.final h2 { margin: 18px 0 18px; font: 900 clamp(44px, 7vw, 96px)/.95 var(--sans); letter-spacing: -.05em; }
.final p { color: var(--ink-2); font-size: 19px; max-width: 580px; margin: 0 auto 36px; }
.final .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rookie { position: relative; width: 240px; margin: 0 auto 50px; aspect-ratio: 5 / 7; border-radius: 22px; border: 1px solid var(--line-2); background: radial-gradient(120% 70% at 50% 0%, rgba(147,164,183,.16), transparent 60%), linear-gradient(170deg, #141922, #0B0E13); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
.rookie .q { font: 900 70px/1 var(--sans); color: var(--ink-3); letter-spacing: -.05em; }
.rookie .n { font: 800 18px var(--sans); }
.rookie .l { font: 600 11px var(--mono); letter-spacing: .16em; color: var(--ink-3); }
.rookie .pulse { position: absolute; inset: -2px; border-radius: inherit; border: 1px solid rgba(52,211,153,.6); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.ctaband { position: relative; margin: 40px 0 110px; padding: 64px 40px; border-radius: 32px; text-align: center; overflow: hidden; border: 1px solid rgba(52,211,153,.35); background: radial-gradient(60% 120% at 10% 0%, rgba(96,165,250,.22), transparent 60%), radial-gradient(60% 120% at 90% 100%, rgba(52,211,153,.22), transparent 60%), #0A0D12; }
.ctaband h2 { margin: 14px 0 14px; font: 900 clamp(34px, 5vw, 62px)/1 var(--sans); letter-spacing: -.045em; }
.ctaband p { margin: 0 auto 30px; max-width: 540px; color: var(--ink-2); font-size: 18px; }
.ctaband .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ctaband .spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); opacity: .7; animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-26px); opacity: .9; } }

/* ---------- footer ---------- */
.foot { position: relative; border-top: 1px solid var(--line); padding: 72px 0 0; background: linear-gradient(180deg, rgba(10,13,18,.4), rgba(6,8,11,.9)); overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 48px; }
.foot-brand p { margin: 16px 0 22px; max-width: 320px; color: var(--ink-2); font-size: 15px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot h4 { margin: 0 0 16px; font: 600 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot ul a { color: var(--ink-2); font-size: 14px; transition: color .2s; }
.foot ul a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding: 22px 0; border-top: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wordmark { margin: 10px 0 -2.2vw; font: 900 clamp(64px, 17vw, 250px)/.8 var(--sans); letter-spacing: -.06em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(147,164,183,.14); background: linear-gradient(180deg, rgba(96,165,250,.14), rgba(52,211,153,0) 80%); -webkit-background-clip: text; background-clip: text; user-select: none; pointer-events: none; }

/* ---------- page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .26s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .46s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- responsive ---------- */
/* Until there's room beside the card, the toasts share one spot above it. */
@media (max-width: 1180px) {
  .card-stage { padding-top: 64px; }
  .toast { top: 8px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, 14px) scale(.9); }
  .toast.on { transform: translate(-50%, 0); }
  .toast.out { transform: translate(-50%, -18px) scale(.96); }
  .medals { grid-template-columns: repeat(4, 1fr); }
  .explore { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1020px) {
  .nav-links, .nav-cta .btn:not(.primary) { display: none; }
  .menu-btn { display: grid; }
  .hero .grid { grid-template-columns: 1fr; min-height: 0; }
  .hero { text-align: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero .ctas, .trust { justify-content: center; }
  .card-stage { height: 580px; }
  .versus { grid-template-columns: 1fr; }
  .vs { justify-self: center; }
  .story { grid-template-columns: 1fr; gap: 20px; }
  .story-screen { position: relative; top: 0; height: 540px; }
  .story-dots { display: flex; }
  .step { min-height: 0; padding: 36px 0 0; opacity: 1; }
  .rating, .breaker, .duo, .split, .seesnever { grid-template-columns: 1fr; }
  .seasons { grid-template-columns: repeat(2, 1fr); }
  .challenges { grid-template-columns: 1fr; }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .prices { grid-template-columns: 1fr; max-width: 460px; }
  .price.pro { transform: none; }
  .show, .show.flip { grid-template-columns: 1fr; gap: 34px; padding: 44px 0; }
  .show.flip .copy { order: 0; }
  .dayrow, .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .callout, .tourbar { display: none; }
  .chiplist { display: flex; }
  .foot-top { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; gap: 20px; }
  .legal nav { position: relative; top: 0; display: flex; flex-wrap: wrap; }
  .affil { grid-template-columns: 1fr; text-align: center; }
  .affil p { margin: 0 auto; }
}
@media (max-width: 640px) {
  :root { --nav-h: 62px; }
  .sec { padding: 84px 0; }
  .sec.tight { padding: 60px 0; }
  .wrap { width: calc(100% - 32px); }
  .phero { padding: 64px 0 36px; }
  .phero .rings { width: 480px; height: 480px; }
  .card-stage { height: 560px; padding-top: 64px; overflow: hidden; }
  .tcard { width: 272px; }
  .ovr { font-size: 46px; }
  .avatar { width: 100px; height: 100px; margin: 4px auto 4px; }
  .avatar .inner { inset: 10px; font-size: 24px; }
  .pname { font-size: 18px; }
  .attrs { gap: 4px 18px; margin: 12px 4px 10px; padding-top: 10px; }
  .attr { font-size: 17px; }
  .tcard .face { padding: 18px 18px 16px; }
  .halo { width: 360px; height: 360px; } .orbit { width: 380px; height: 380px; }
  .toast { font-size: 12px; padding: 8px 11px; }
  .ladder .nodes { grid-template-columns: repeat(4, 1fr); row-gap: 30px; }
  .ladder .rail, .youare { display: none; }
  .medals { grid-template-columns: repeat(2, 1fr); }
  .feats, .dayrow, .explore { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 22px 18px; } .stat b { font-size: 36px; }
  .lb { padding: 12px; }
  .lb .head, .lb .row { grid-template-columns: 30px minmax(0, 1fr) 70px 40px; gap: 8px; padding: 0 10px; }
  .lb .head { padding: 10px; }
  .lb .al { gap: 8px; font-size: 14px; } .lb .al i { width: 28px; height: 28px; font-size: 10px; }
  .lb .tier { font-size: 9px; padding: 3px 6px; }
  .lb .head span:nth-child(3), .lb .row .lvc { display: none; }
  .compare .r { grid-template-columns: 1fr 60px 60px; padding: 14px 16px; font-size: 14px; }
  .compare .r:first-child { font-size: 10px; letter-spacing: .06em; }
  .compare .r.grp { padding: 10px 16px; }
  .stamp { right: 22px; top: 96px; width: 96px; height: 96px; font-size: 38px; }
  .bigstamp { width: 96px; height: 96px; font-size: 38px; right: 18px; top: 18px; }
  #rcpanel h3, #rcpanel p.sub { padding-right: 100px; }
  .panel, .scorebox, .sn, .principle, .doc, .contact, .affil { padding: 24px; }
  .tiers div { padding: 10px 2px; font-size: 9px; letter-spacing: .02em; }
  .attr-row { grid-template-columns: 92px 1fr 32px; gap: 10px; }
  .srow { grid-template-columns: 1fr 70px 48px; gap: 10px; font-size: 14px; }
  .xptable .r { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 14px 16px; }
  .xptable .r .ic { width: 34px; height: 34px; }
  .trio .pshot { width: 150px; padding: 6px; border-radius: 26px; }
  .trio .pshot img { border-radius: 21px; }
  .trio .pshot::before { top: 11px; width: 44px; height: 12px; }
  .trio .pshot:nth-child(2) { width: 170px; }
  .trio .pshot:nth-child(1) { transform: translate(34px, 26px) rotate(-8deg); }
  .trio .pshot:nth-child(3) { transform: translate(-34px, 26px) rotate(8deg); }
  .ctaband { padding: 48px 22px; margin-bottom: 80px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .frame .bar .url { max-width: 70%; transform: none; }
  .award { left: 18px; right: 18px; bottom: 18px; padding: 12px 14px; }
  .award span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .rv { opacity: 1; transform: none; }
  .word { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}