@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,800&family=Inter:wght@400;500;600&display=swap');

:root { --ink:#090b0c; --paper:#f1efe8; --muted:#9a9c98; --orange:#ff5a1f; --blue:#5dc8ff; --line:rgba(241,239,232,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Inter,system-ui,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nav { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.12em; font-size:20px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--orange); color:var(--ink); letter-spacing:0; transform:skew(-7deg); }
nav { display:flex; align-items:center; gap:30px; color:#c9cac7; font-size:13px; }
nav a:hover { color:#fff; }
select { appearance:none; color:var(--paper); background:#141718 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23f1efe8'/%3E%3C/svg%3E") no-repeat right 12px center; border:1px solid #343738; border-radius:2px; padding:9px 32px 9px 11px; font:inherit; }
.hero { min-height:700px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:70px; padding-block:80px; }
.eyebrow,.section-number { color:var(--orange); font-size:11px; font-weight:600; letter-spacing:.2em; }
h1,h2,h3 { font-family:"Barlow Condensed",Impact,sans-serif; margin:0; text-transform:uppercase; line-height:.88; letter-spacing:-.025em; }
h1 { font-size:clamp(78px,9vw,130px); }
h1 em { color:var(--orange); font-style:italic; }
.hero-lede { max-width:530px; color:#b9bbb8; font-size:18px; line-height:1.7; margin:32px 0; }
.hero-actions { display:flex; align-items:center; gap:20px; }
.store-button { display:flex; align-items:center; gap:12px; border:1px solid #4a4d4e; border-radius:9px; padding:10px 18px; min-width:176px; background:#151819; }
.store-button svg { width:28px; fill:#fff; }
.store-button span { font-weight:600; font-size:20px; line-height:1; }
.store-button small { display:block; font-size:9px; font-weight:400; letter-spacing:.03em; margin-bottom:4px; }
.purchase-note { max-width:170px; color:#838683; font-size:11px; line-height:1.5; }
.scoreboard { position:relative; isolation:isolate; padding:38px; background:linear-gradient(145deg,#141819,#090b0c); border:1px solid #2f3333; box-shadow:0 35px 90px #000; transform:rotate(1.5deg); }
.scoreboard:before { content:""; position:absolute; inset:10px; border:1px solid #242829; pointer-events:none; }
.scoreboard-glow { position:absolute; z-index:-1; width:80%; height:80%; background:var(--orange); filter:blur(110px); opacity:.09; }
.score-top { display:flex; justify-content:space-between; align-items:center; color:#8f9290; font:600 13px "Barlow Condensed"; letter-spacing:.16em; border-bottom:1px solid var(--line); padding:0 6px 20px; }
.score-top strong { font-size:29px; color:#f6f0d1; font-variant-numeric:tabular-nums; }
.live-dot { color:var(--orange); }
.teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:38px 0; }
.team { display:grid; text-align:center; }
.team span { color:#949794; font:600 12px "Barlow Condensed"; letter-spacing:.18em; }
.team strong { font:800 clamp(84px,9vw,126px) "Barlow Condensed"; line-height:.95; font-variant-numeric:tabular-nums; }
.team i { height:5px; width:70%; margin:auto; transform:skew(-20deg); }
.home-color { background:var(--orange); box-shadow:0 0 25px #ff5a1f88; }.away-color { background:var(--blue); box-shadow:0 0 25px #5dc8ff66; }
.versus { color:#565a58; font-size:28px; }
.score-footer { display:grid; grid-template-columns:1fr auto 1fr auto; gap:12px; align-items:center; border-top:1px solid var(--line); padding:20px 6px 0; color:#757875; font:600 10px "Barlow Condensed"; letter-spacing:.13em; }
.score-footer b { color:var(--paper); font-size:20px; }
.ticker { overflow:hidden; padding:15px 0; background:var(--orange); color:var(--ink); white-space:nowrap; transform:rotate(-1deg) scale(1.02); font:800 18px "Barlow Condensed"; letter-spacing:.08em; }
.ticker div { width:max-content; animation:ticker 22s linear infinite; }.ticker span { margin-left:40px; }
@keyframes ticker { to { transform:translateX(-50%); } }
.manifesto { padding-block:180px; display:grid; grid-template-columns:.55fr 1.45fr; gap:40px; }
.manifesto h2,.tiers h2,.final-cta h2 { font-size:clamp(56px,7vw,100px); }
.manifesto>p:last-child { grid-column:2; max-width:650px; color:#9b9e9b; font-size:18px; line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feature { min-height:660px; padding:22px 34px 42px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.feature-orange { background:#e94b18; color:#090b0c; }.feature-blue { background:#bee7f7; color:#090b0c; }
.feature .section-number { color:currentColor; opacity:.7; }.feature h3 { font-size:clamp(48px,5vw,75px); max-width:500px; }.feature>p:last-child { max-width:480px; line-height:1.6; }
.feature-art { flex:1; position:relative; }
.watch { position:absolute; left:50%; top:45%; translate:-50% -50%; width:190px; height:230px; border:14px solid #131616; border-radius:55px; background:#060808; color:#fff; box-shadow:0 40px 50px #5c120944; transform:rotate(-8deg); display:grid; grid-template-columns:1fr 1fr; align-content:center; text-align:center; }
.watch:before,.watch:after { content:""; position:absolute; left:62px; width:42px; height:150px; background:#171b1b; z-index:-1; }.watch:before { bottom:100%; }.watch:after { top:100%; }
.watch i,.watch b { font:800 58px "Barlow Condensed"; }.watch i { color:var(--orange); }.watch b { color:var(--blue); }.watch small { grid-column:1/-1; color:#aaa; }
.stat-art { display:flex; gap:16px; align-items:flex-end; justify-content:center; padding-bottom:50px; }
.bar { width:52px; background:#101313; }.b1{height:23%}.b2{height:50%}.b3{height:67%}.b4{height:88%;background:var(--orange)}
.stat-art strong { position:absolute; top:20%; right:7%; font:800 90px "Barlow Condensed"; }
.tiers { padding-block:180px; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.tier-list article { padding:30px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:130px 1fr 1fr; gap:25px; align-items:start; }
.tier-list span { color:#858885; font:600 11px "Barlow Condensed"; letter-spacing:.15em; }.tier-list h3 { font-size:30px; }.tier-list p { margin:0;color:#999c99;line-height:1.55;font-size:14px; }
.tier-list .pro-tier { border-color:var(--orange); }.pro-tier span,.pro-tier h3 { color:var(--orange); }
.final-cta { padding:150px 0; background:var(--paper); color:var(--ink); }
.final-cta .eyebrow { color:#d84513; }.final-cta p:last-child { color:#525653;font-size:17px; }
footer { min-height:190px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:50px; color:#848784; font-size:12px; }
footer>div { display:flex; gap:25px; }footer .brand { color:var(--paper); }
@media (max-width:800px) {
  .shell { width:min(100% - 30px,620px); }.nav { height:70px; }nav>a{display:none}.hero { grid-template-columns:1fr; padding-block:70px; gap:60px; }.scoreboard{padding:25px}.team strong{font-size:85px}.manifesto,.tiers{grid-template-columns:1fr;padding-block:110px;gap:35px}.manifesto>p:last-child{grid-column:1}.feature-grid{grid-template-columns:1fr}.feature{min-height:590px;padding-inline:24px}.tier-list article{grid-template-columns:95px 1fr}.tier-list p{grid-column:2}footer{grid-template-columns:1fr 1fr;padding-block:45px}footer p{grid-column:1/-1}.hero-actions{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker div{animation:none}}