:root{--bg:#08090D;--surface:#10131A;--surface2:#161B24;--line:#232A36;--accent:#C6FF3D;--fed:#4C7DFF;--danger:#FF4438;--text:#ECEFF3;--muted:#7C8797}
*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 600px at 85% -10%,rgba(198,255,61,.10),transparent 60%),radial-gradient(700px 500px at -10% 30%,rgba(76,125,255,.08),transparent 60%),var(--bg)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.mark{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.06em;font-size:16px;text-decoration:none}
.mark svg{width:24px;height:24px}.mark b{color:var(--accent)}
.nav{display:flex;gap:22px;color:var(--muted);font-weight:700;font-size:14px}
.nav a{text-decoration:none}.nav a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#08090D;font-weight:900;border-radius:999px;padding:12px 20px;text-decoration:none;font-size:14px;white-space:nowrap}
.play{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#08090D;border-radius:14px;padding:10px 18px 10px 14px;text-decoration:none;line-height:1}
.play svg{width:26px;height:26px}
.play span{display:grid;font-weight:900;font-size:17px;letter-spacing:-.01em}
.play small{font-size:9.5px;letter-spacing:.14em;font-weight:800;opacity:.7;margin-bottom:2px}
.play.big{padding:14px 26px 14px 20px}.play.big span{font-size:21px}.play.big svg{width:32px;height:32px}
.eyebrow{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.accent{color:var(--accent)}
h1{font-size:clamp(42px,6.6vw,78px);font-weight:900;letter-spacing:-.04em;line-height:.98;margin:14px 0 18px}
h2{font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:10px 0 12px}
.lede{color:var(--muted);font-size:18px;line-height:1.55;max-width:34em;margin:0 0 26px}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.small{color:var(--muted);font-size:12.5px}
.proof{display:flex;gap:28px;margin-top:34px}
.proof b{display:block;font-size:30px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof span{color:var(--muted);font-size:12.5px;font-weight:600}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:44px 0 30px}
.phone{justify-self:center;width:min(100%,380px);aspect-ratio:9/17;border-radius:44px;padding:12px;background:linear-gradient(160deg,#20262f,#0c0f15);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06)}
.phone-screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:radial-gradient(120% 80% at 50% 100%,#131923,#08090D 70%);display:flex;flex-direction:column}
.fighter{width:100%;flex:1;min-height:0;display:block}
.hud{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 20px 0}
.hud .n{font-size:64px;font-weight:900;letter-spacing:-.05em;line-height:.9}
.hud small{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--muted);font-weight:800;margin-top:6px}
.hud .clock{font-variant-numeric:tabular-nums;font-weight:900;font-size:26px;color:var(--muted)}
.tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,68,56,.16);border:1px solid var(--danger);color:var(--danger);font-weight:900;font-size:12px;letter-spacing:.14em;padding:7px 12px;border-radius:999px;opacity:0;transition:opacity .15s;backdrop-filter:blur(6px)}
.tag.on{opacity:1}
.depth{position:absolute;right:16px;top:110px;bottom:70px;width:8px;border-radius:4px;background:var(--surface2);overflow:visible}
.depth-fill{position:absolute;left:0;right:0;bottom:0;background:var(--accent);border-radius:4px;height:0}
.depth span{position:absolute;top:-18px;right:-4px;font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:800}
.hud-bottom{display:flex;justify-content:space-between;padding:0 18px 20px}
.pill{font-size:10.5px;font-weight:900;letter-spacing:.14em;padding:6px 10px;border-radius:999px;background:rgba(198,255,61,.12);color:var(--accent)}
.pill.dim{background:var(--surface2);color:var(--muted)}
/* sections */
.section{padding:56px 0}
.section-head{max-width:640px;margin-bottom:26px}
.section-head p,.split p{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.checks li{padding-left:28px;position:relative;font-weight:600;font-size:15px}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--accent);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");}
.checks li::after{content:"";position:absolute;left:4px;top:8px;width:7px;height:4px;border-left:2px solid #08090D;border-bottom:2px solid #08090D;transform:rotate(-45deg)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mode{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;display:grid;gap:8px;align-content:start}
.mode h3{margin:10px 0 0;font-size:19px;font-weight:900;letter-spacing:-.01em}
.mode p{margin:0;color:var(--muted);line-height:1.55;font-size:14.5px}
.mode-demo{height:180px;border-radius:16px;background:var(--surface2);position:relative;display:grid;place-items:center;overflow:hidden}
.ring{width:130px;height:130px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:8}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0}
.ring-text{position:absolute;text-align:center}
.ring-text b{display:block;font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1}
.ring-text small{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.1em}
.tempo{grid-template-rows:auto auto auto;align-content:center;gap:14px}
.beat{display:flex;gap:10px}
.beat span{width:14px;height:14px;border-radius:50%;background:var(--line);transition:transform .08s,background .08s}
.beat span.hit{background:var(--accent);transform:scale(1.5)}
.tempo-read{text-align:center}
.tempo-read b{display:block;font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1}
.tempo-read small{color:var(--muted);font-weight:800;font-size:10.5px;letter-spacing:.14em}
.tempo-bar{width:70%;height:6px;border-radius:3px;background:var(--line);position:relative}
.tempo-cursor{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--accent);margin-left:-8px;left:0}
.ghost{grid-template-rows:auto auto auto;align-content:center;gap:12px;padding:0 18px}
.lane{display:flex;align-items:center;gap:10px;width:100%}
.lane-label{width:76px;font-size:10px;font-weight:900;letter-spacing:.12em}
.lane-track{flex:1;height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.lane-fill{height:100%;width:0;border-radius:5px}
.lane-fill.you{background:var(--accent)}.lane-fill.them{background:#5B6577}
.lane b{width:28px;text-align:right;font-variant-numeric:tabular-nums;font-weight:900}
.dim{color:var(--muted)}
.verdict{font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--accent);text-align:center}
/* judge card */
.judge-card,.ladder-card,.club-card,.coin-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px}
.judge-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:12px 10px;border-radius:12px}
.judge-row+.judge-row{margin-top:4px}
.judge-row span{color:var(--muted);font-weight:700;font-size:13px}
.judge-row b{font-weight:900}
.judge-row .ok{color:var(--accent)}
.judge-row small{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.judge-row.bad{background:rgba(255,68,56,.08)}
.judge-row.bad b{color:var(--danger)}
/* ladder */
.tabs{display:flex;gap:6px;background:var(--surface2);border-radius:999px;padding:4px;margin-bottom:12px}
.tabs span{flex:1;text-align:center;font-size:12.5px;font-weight:800;color:var(--muted);padding:8px 0;border-radius:999px}
.tabs span.on{background:var(--accent);color:#08090D}
.ladder{position:relative;height:300px}
.lrow{position:absolute;left:0;right:0;height:52px;display:grid;grid-template-columns:28px 40px 1fr auto;align-items:center;gap:12px;padding:0 8px;border-radius:12px;top:0;will-change:transform;transition:transform .7s cubic-bezier(.2,.8,.2,1),background .3s}
.lrow.me{background:rgba(198,255,61,.08)}
.lrow .pos{font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
.lrow .face{width:36px;height:36px;border-radius:50%;background:var(--surface2);overflow:hidden}
.lrow .face svg{width:100%;height:100%}
.lrow .who{display:grid;line-height:1.2}
.lrow .who b{font-size:14px;font-weight:800}
.lrow .who small{color:var(--muted);font-size:11.5px}
.lrow .reps{font-weight:900;font-variant-numeric:tabular-nums;font-size:16px}
.ladder-foot{margin-top:8px;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-align:center}
/* club */
.club-card{display:grid;justify-items:center;gap:6px;text-align:center}
.crest-wrap{width:150px;height:150px}
.crest{width:100%;height:100%}
.club-name{font-size:22px;font-weight:900;letter-spacing:-.02em;margin-top:6px}
.club-sub{color:var(--muted);font-size:13px;font-weight:600}
.treasury{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.treasury span{font-size:10.5px;letter-spacing:.14em;color:var(--muted);font-weight:800}
.treasury b{font-size:26px;font-weight:900;color:var(--fed);font-variant-numeric:tabular-nums}
.treasury i{font-style:normal;color:var(--muted);font-size:12px}
.treasury-bar{width:100%;height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}
.treasury-bar div{height:100%;width:0;background:var(--fed);border-radius:4px}
/* season track */
.track-wrap{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line);background:var(--surface);padding:22px 0}
.track-wrap::before,.track-wrap::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:1;pointer-events:none}
.track-wrap::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.track-wrap::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.track{display:flex;gap:14px;width:max-content;padding:0 20px}
.tier .art svg{contain:strict}
.tier{width:120px;flex:none;background:var(--surface2);border:1px solid var(--line);border-radius:18px;padding:12px;display:grid;justify-items:center;gap:6px;text-align:center}
.tier.paid{border-color:rgba(198,255,61,.35)}
.tier .t{font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:800}
.tier .art{width:64px;height:64px;display:grid;place-items:center}
.tier .art svg{width:100%;height:100%}
.tier .name{font-size:12px;font-weight:800;line-height:1.2}
/* coin */
.coin-card{display:grid;justify-items:center;gap:6px;padding:26px}
.coin{perspective:900px}
.coin .c3d{width:220px;aspect-ratio:1;position:relative;transform-style:preserve-3d;transition:transform .25s ease-out;cursor:grab}
.coin .side{position:absolute;inset:0;backface-visibility:hidden;border-radius:50%}
.coin .side svg{width:100%;height:100%;display:block}
.coin .back{transform:rotateY(180deg)}
.coin-name{font-size:20px;font-weight:900;margin-top:10px}
.coin-sub{color:var(--muted);font-size:13px}
/* band */
.band{margin:30px 0;background:linear-gradient(135deg,#1B2410,#0f1320);border:1px solid rgba(198,255,61,.35);border-radius:28px;padding:34px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.band p{color:var(--muted);line-height:1.55;margin:0}
.band-demo{background:rgba(8,9,13,.6);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:10px;justify-items:center}
.mini-num{font-size:64px;font-weight:900;letter-spacing:-.05em;line-height:1}
.mini-bar{width:100%;height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}
.mini-bar div{height:100%;width:0;background:var(--accent)}
.mini-caption{color:var(--muted);font-size:12px;font-weight:700}
.cta-final{text-align:center;padding:60px 0 20px;display:grid;justify-items:center;gap:8px}
.cta-final p{color:var(--muted);margin:0 0 14px}
.foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:var(--muted);font-size:13px;padding:40px 0 56px;border-top:1px solid var(--line);margin-top:40px}
.foot a{color:var(--muted);text-decoration:none;margin-left:14px}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:24px}.nav{display:none}.modes{grid-template-columns:1fr}.split{grid-template-columns:1fr}.split.rev>:first-child{order:2}.band{grid-template-columns:1fr}.proof{gap:18px}.phone{width:min(100%,340px)}}
@media(prefers-reduced-motion:reduce){.tag,.lrow,.coin .c3d{transition:none}}
.hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--muted);background:rgba(8,9,13,.55);border:1px solid var(--line);border-radius:999px;padding:6px 12px;pointer-events:none;transition:opacity .4s}
.hint.off{opacity:0}
/* Interactive athlete showcase: contain the animated body inside its frame. */
.tabs button{flex:1;border:0;background:transparent;font:inherit;text-align:center;font-size:12.5px;font-weight:800;color:var(--muted);padding:9px 0;border-radius:999px;cursor:pointer}
.tabs button.on{background:var(--accent);color:#08090D}
.tabs button:focus-visible{outline:2px solid white;outline-offset:2px}
.ladder,.ladder-panel{height:380px}
.ladder-panel[hidden]{display:none}
.lrow{height:72px;grid-template-columns:22px 58px minmax(0,1fr) auto;gap:10px;padding:0 12px}
.lrow .who{min-width:0;gap:4px}
.lrow .who b,.lrow .who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ladder-avatar{width:54px;height:54px;border-radius:50%;padding:3px;border:2px solid var(--frame);box-shadow:0 0 9px color-mix(in srgb,var(--frame) 28%,transparent)}
.athlete-clip{width:100%;height:100%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 25%,#3d4657,#171c27)}
.athlete-clip canvas{width:100%;height:100%;display:block}
.ladder-avatar.frame-1{border-style:double;border-width:4px;padding:1px}
.ladder-avatar.frame-2{border-style:dashed}
.ladder-avatar.frame-3{border-color:var(--frame) #f3d9ff}
.ladder-emblem{width:50px;height:50px;display:grid;place-items:center;background:color-mix(in srgb,var(--frame) 16%,#171c27);border:2px solid var(--frame);color:var(--frame);border-radius:15px;font-weight:900;font-size:17px}
.ladder-emblem.clubs{clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);border-radius:6px;padding-bottom:5px}
@media(max-width:420px){.lrow{padding:0 8px;gap:7px;grid-template-columns:18px 52px minmax(0,1fr) auto}.ladder-avatar{width:49px;height:49px}.lrow .who b{font-size:12px}.lrow .who small{font-size:10px}.lrow .reps{font-size:14px}.ladder-emblem{width:45px;height:45px}}
@media(prefers-reduced-motion:reduce){.lrow{transition:none}}

.ladder-emblem.countries{border:0;background:transparent;border-radius:0;padding:0}
.country-flag{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 0 0 1px #ffffff20}

.track-viewport{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#697542 transparent;cursor:grab;padding-bottom:12px;overscroll-behavior-x:contain}
.track-viewport.dragging{cursor:grabbing;user-select:none}
.track-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.track-controls{display:flex;align-items:center;gap:8px;margin:16px 0 12px}
.track-controls>span{margin-right:auto;color:var(--muted);font-size:13px;font-weight:700}
.track-controls button{min-width:44px;min-height:44px;padding:8px 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--text);font:inherit;cursor:pointer}
.track-controls button:hover:not(:disabled){border-color:var(--accent)}
.track-controls button:disabled{opacity:.35;cursor:default}
.track-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.track-wrap::before,.track-wrap::after{bottom:24px;width:20px}

/* Compare actual seasonal athlete geometry at the same scale. */
.physique-demo{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:24px;overflow:hidden}
.physique-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;font-weight:700}
.physique-toolbar>div{display:flex;gap:6px}
.physique-demo button{font:inherit;cursor:pointer;color:var(--text);background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-height:44px}
.physique-demo button[aria-pressed=true]{background:var(--accent);color:#08090D;border-color:var(--accent)}
.physique-demo button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.physique-comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px auto;max-width:760px}
.physique-comparison figure{margin:0;border-radius:18px;background:radial-gradient(ellipse at 50% 70%,#202b36,transparent 70%);border:1px solid var(--line);overflow:hidden}
.physique-comparison .physique-earned{border-color:#c6ff3d50;background:radial-gradient(ellipse at 50% 70%,#293823,transparent 70%)}
.physique-comparison figcaption{text-align:center;padding:20px 8px 0;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em}
.physique-comparison figcaption span{display:block;font-size:23px;color:var(--text);letter-spacing:-.02em;margin-top:6px}
.physique-earned figcaption span{color:var(--accent)}
.physique-stage{aspect-ratio:360/430;display:grid;place-items:center}
.physique-stage img{width:100%;height:auto;display:block;max-height:100%;object-fit:contain}
.physique-stage img[hidden]{display:none}
.physique-steps{display:flex;gap:8px;max-width:760px;margin:auto}
.physique-steps button{flex:1;font-weight:800;font-size:18px;padding:12px 4px}
.physique-steps button span{display:block;font-size:10px;font-weight:600;margin-top:3px;opacity:.7}
#physique-status{text-align:center;font-size:13px;color:var(--muted);margin:20px 0 8px;min-height:20px}
.physique-note{text-align:center;font-size:11px;color:var(--muted);margin:0}
@media(max-width:520px){.physique-demo{padding:14px}.physique-toolbar{align-items:flex-start;flex-direction:column}.physique-comparison{gap:8px;margin:16px auto}.physique-comparison figcaption{padding-top:14px;font-size:9px}.physique-comparison figcaption span{font-size:19px}.physique-steps{gap:5px}.physique-steps button{font-size:14px}.physique-note{line-height:1.5}}