@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#15132f;--cream:#e7e9f6;--paper:#f3f5fb;--line:#d3d8e8;--gold:#ff5f7e;--lime:#b5ff5a;--muted:#4f5871;--cyan:#26d6e9;--purple:#654de0;--white:#f8f9ff}
body{background:var(--paper);color:var(--ink);font:16px/1.55 'Space Grotesk',Arial,sans-serif}
a:focus-visible{outline:3px solid #e03968;outline-offset:4px}
.topbar{height:84px;border-color:var(--line)}
.brand{font:700 22px/1 'Space Grotesk',Arial,sans-serif;letter-spacing:-.04em}
.brand img{border-radius:10px}
.topbar nav a{font-size:14px}
.topbar nav a:hover,.footer-links a:hover,.text-link:hover{color:#7a36c9}
.hero{min-height:650px;margin-top:22px;margin-bottom:0;padding:66px 62px;color:var(--white);background:radial-gradient(circle at 84% 36%,#483082 0,#272252 34%,#15132f 75%);border-radius:30px;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;opacity:.17;background-image:linear-gradient(#8e8db7 1px,transparent 1px),linear-gradient(90deg,#8e8db7 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent 35%,black 100%)}
.eyebrow,.kicker{font:700 14px/1.3 'Space Grotesk',Arial,sans-serif;letter-spacing:.13em}
.eyebrow{color:var(--lime)}
.live-dot{width:9px;height:9px;background:var(--lime);border:0;box-shadow:0 0 0 4px #b5ff5a33}
.hero h1{max-width:710px;font:700 clamp(60px,7.2vw,101px)/.94 'Space Grotesk',Arial,sans-serif;letter-spacing:-.075em;text-transform:none;margin:29px 0 28px}
.hero h1 em{color:var(--cyan)}
.hero>p{max-width:480px;font-size:18px;line-height:1.55;color:#e4e5f2}
.actions{gap:29px}
.button{background:var(--lime);color:var(--ink);padding:15px 22px;border:0;border-radius:9px;font:700 15px/1.3 'Space Grotesk',Arial,sans-serif;box-shadow:0 8px 0 #89ce37;transition:transform .18s,box-shadow .18s,background .18s}
.button:hover{background:#cbff83;transform:translateY(3px);box-shadow:0 5px 0 #89ce37}
.text-link{font-size:14px}
.hero .text-link:hover{color:var(--cyan)}
.hero-mark{right:43px;top:151px;width:37%;aspect-ratio:1.03;border:2px solid #a788ff;border-radius:23px;background:linear-gradient(145deg,#352e78,#171535);box-shadow:18px 18px 0 #8b68ff38,inset 0 0 0 1px #9c8bf544;transform:rotate(-8deg);opacity:1;display:block;overflow:hidden}
.hero-mark:before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(135deg,transparent 0 37px,#887deb2b 38px 40px);transform:rotate(8deg)}
.hero-mark:after{content:"";position:absolute;left:12%;right:12%;top:50%;height:3px;background:var(--cyan);box-shadow:0 0 18px var(--cyan);transform:rotate(-26deg)}
.hero-ball{position:absolute;width:28%;aspect-ratio:1;border-radius:50%;z-index:2;box-shadow:0 0 0 10px #ffffff14,0 0 35px currentColor;}
.hero-ball-blue{left:14%;top:18%;background:var(--cyan);color:var(--cyan)}
.hero-ball-pink{right:14%;bottom:17%;background:var(--gold);color:var(--gold)}
.hero-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(8deg);z-index:3;color:var(--white);font:700 clamp(44px,5vw,80px)/1 'Space Grotesk',Arial,sans-serif;letter-spacing:-.12em;text-shadow:0 4px 20px #111025}
.track-ball{display:none}
.ticker{margin-top:26px;background:var(--lime);color:var(--ink);border-color:var(--ink)}
.ticker div{font:700 19px/1 'Space Grotesk',Arial,sans-serif;letter-spacing:.06em}
.ticker span{color:#654de0}
.section-head h2,.app-section h2,.closing h2{font:700 clamp(48px,5vw,74px)/1.02 'Space Grotesk',Arial,sans-serif;letter-spacing:-.065em;text-transform:none}
.cup{border-radius:18px;transition:transform .2s,box-shadow .2s;overflow:hidden}
.cup:hover{transform:translateY(-5px);box-shadow:0 18px 28px #15132f30}
.cup-countries{background:#5d4ad4;color:var(--white)}
.cup-clubs{background:#ff8f70;color:var(--ink)}
.cup-top{font:700 17px 'Space Grotesk',Arial,sans-serif}
.cup-symbol{opacity:.26}
.cup h3{font:700 48px/1 'Space Grotesk',Arial,sans-serif;letter-spacing:-.06em;text-transform:none}
.cup p{font-size:16px}
.cup-cta{font-size:14px}
.app-section{background:#e6e8f6;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.app-section .kicker{color:#6247bb}
.app-copy{color:#3b4260}
.app-copy strong{color:var(--ink)}
.light{color:#5034aa}
.light:hover{color:#7a36c9}
footer{background:#dddfeb}
.footer-grid strong{font:700 24px 'Space Grotesk',Arial,sans-serif;letter-spacing:-.05em}
.copyright{border-color:#bec3d5}
.legal h1{font:700 clamp(50px,7vw,86px)/1.02 'Space Grotesk',Arial,sans-serif;letter-spacing:-.065em;text-transform:none}
.legal h2{font:700 29px/1.15 'Space Grotesk',Arial,sans-serif;letter-spacing:-.04em;text-transform:none}
.legal code{background:white}
@media(max-width:850px){.hero{padding:65px 48px}.hero-mark{right:24px;top:195px;width:43%;opacity:.35}.hero h1{max-width:650px}}
@media(max-width:620px){.topbar{height:72px}.brand{font-size:18px}.hero{min-height:690px;margin-top:10px;padding:55px 24px 75px;border-radius:20px}.hero:before{border-radius:20px}.hero h1{font-size:clamp(52px,12vw,70px);max-width:100%}.hero>p{font-size:16px;max-width:340px}.hero-mark{top:auto;bottom:-50px;right:-48px;width:205px;height:205px;opacity:.25}.hero-vs{font-size:40px}.ticker div{font-size:16px}.section-head h2,.app-section h2,.closing h2{font-size:52px}.cup h3{font-size:43px}.actions{gap:23px}.button{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.cup{transition:none}}