@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#0c1118;--panel:#141c26;--panel2:#192431;--text:#f4f7fb;--muted:#94a3b5;--line:#283544;--lime:#c7f36b;--cyan:#65d9d0;--shadow:0 18px 50px #0005}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,22px);border-bottom:1px solid var(--line);background:#0c1118ed;position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:10px;font:700 17px 'Space Grotesk';letter-spacing:1.2px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--lime);color:#101711;border-radius:10px;font-size:20px}.accent{color:var(--lime)}.desktop-nav{display:flex;gap:34px;color:var(--muted);font-size:14px}.desktop-nav a.active,.desktop-nav a:hover{color:var(--lime)}.header-actions{display:flex;gap:12px;align-items:center}.icon-btn,.menu-btn{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;width:40px;height:40px;font-size:19px;cursor:pointer}.login-btn{background:var(--lime);color:#111a10;border:0;border-radius:10px;padding:12px 20px;font-weight:700;cursor:pointer}.menu-btn{display:none}.hero{min-height:390px;margin:34px max(5vw,22px) 0;padding:54px 7%;border:1px solid #293744;border-radius:24px;background:radial-gradient(circle at 78% 40%,#294a48 0,#172a2c 23%,#17212b 55%,#17202a 100%);display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--lime);font-weight:700}.live-dot,.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff6464;margin-right:7px;box-shadow:0 0 12px #ff6464}.hero h1{font:700 clamp(42px,6vw,70px)/1.02 'Space Grotesk';letter-spacing:-3px;margin:20px 0 14px}.hero h1 span{color:var(--lime)}.hero p{color:#b4c0cb;font-size:15px;margin-bottom:28px}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;background:var(--lime);color:#111a10;border:0;border-radius:10px;padding:14px 19px;font-weight:700;font-size:14px;cursor:pointer}.hero-art{width:37%;height:270px;position:relative;display:grid;place-items:center}.orb{position:absolute;border:1px solid #8dd5bd55;border-radius:50%;transform:rotate(-28deg)}.orb-one{width:270px;height:180px}.orb-two{width:340px;height:230px}.hero-ball{font-size:116px;filter:drop-shadow(0 18px 16px #0008);transform:rotate(-20deg);z-index:1}.hero-label{position:absolute;right:0;bottom:15px;font:700 15px 'Space Grotesk';letter-spacing:3px;color:var(--lime);transform:rotate(-8deg)}.ticker{margin:0 max(5vw,22px);padding:17px 22px;border-bottom:1px solid var(--line);display:flex;gap:24px;align-items:center;color:var(--muted);font-size:11px;letter-spacing:1.2px}.ticker b{color:var(--lime);padding:0 10px}.ticker-label{background:#263526;color:var(--lime);padding:7px 10px;border-radius:5px;font-weight:700}.section{padding:58px max(5vw,22px) 20px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.section h2,.panel h2{font:600 30px 'Space Grotesk';margin:8px 0 0;letter-spacing:-1px}.text-link{font-size:13px;color:var(--lime)}.filters{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}.filter{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:9px 15px;cursor:pointer}.filter.active{background:var(--lime);border-color:var(--lime);color:#111a10;font-weight:700}.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.match-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}.match-top{display:flex;justify-content:space-between;align-items:center}.sport-tag{font-size:11px;font-weight:700;letter-spacing:.7px}.status{font-size:9px;letter-spacing:1px;font-weight:700}.status.live{color:#ff7777}.status.upcoming{color:var(--cyan)}.status i{width:6px;height:6px}.competition{font-size:11px;color:var(--muted);margin:20px 0 13px}.teams{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0}.team{display:flex;align-items:center;gap:10px;margin:8px 0}.flag{font-size:23px}.team div{display:flex;flex-direction:column;gap:2px;flex:1}.team b{font-size:13px}.team small{font-size:9px;color:var(--muted)}.team strong{font:600 18px 'Space Grotesk'}.match-note{font-size:11px;color:var(--muted);padding:13px 0}.card-link{display:flex;justify-content:space-between;width:100%;border:0;border-top:1px solid var(--line);padding:14px 0 0;background:none;color:var(--lime);font-size:12px;cursor:pointer}.lower-grid{padding:35px max(5vw,22px) 70px;display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.compact{margin-bottom:15px}.compact h2{font-size:24px}.fixture-row{display:flex;align-items:center;gap:18px;padding:17px 0;border-top:1px solid var(--line)}.date{font-size:9px;color:var(--muted);line-height:1.8;min-width:65px}.date b{font-size:13px;color:var(--text)}.fixture-teams{font-size:13px;flex:1}.fixture-teams small{color:var(--muted);padding:0 6px}.mini-tag{font-size:9px;color:var(--cyan);border:1px solid #3c6666;padding:5px 7px;border-radius:5px}.news-panel h2{margin-bottom:17px}.story{display:flex;gap:13px;align-items:center;border-top:1px solid var(--line);padding:15px 0}.story-icon{font-size:24px;background:var(--panel2);padding:10px;border-radius:10px}.story div{display:flex;flex-direction:column;gap:5px}.story b{font-size:12px}.story small{font-size:10px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:25px max(5vw,22px);display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}.modal-backdrop{position:fixed;inset:0;background:#000b;z-index:10;display:grid;place-items:center;padding:20px}.modal{width:min(100%,420px);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;position:relative;box-shadow:var(--shadow)}.modal h2{font:600 28px 'Space Grotesk';margin:10px 0}.modal p,.form-note{color:var(--muted);font-size:12px;line-height:1.6}.modal label{display:block;font-size:11px;margin:17px 0;color:var(--muted)}.modal input{display:block;width:100%;padding:13px;margin-top:7px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text)}.close-btn{position:absolute;right:18px;top:13px;background:none;border:0;color:var(--muted);font-size:27px;cursor:pointer}.full{width:100%;margin:10px 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--lime);color:#111a10;padding:12px 18px;border-radius:9px;font-size:12px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}body.light{--bg:#f3f6f4;--panel:#fff;--panel2:#edf2ee;--text:#17221c;--muted:#647368;--line:#dce5dd;--shadow:0 18px 50px #243a241c}body.light .topbar{background:#f3f6f4ed}body.light .hero{background:radial-gradient(circle at 78% 40%,#b8d8c4,#e1ece4 55%,#d5e3d9)}body.light .hero p{color:#53675b}
@media(max-width:800px){.desktop-nav{gap:16px}.hero{padding:42px 6%;min-height:350px}.hero-art{width:32%}.hero-ball{font-size:90px}.match-grid{grid-template-columns:1fr 1fr}.lower-grid{grid-template-columns:1fr}footer{flex-wrap:wrap}}
@media(max-width:560px){.topbar{height:65px}.desktop-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--panel);padding:18px 24px;flex-direction:column;border-bottom:1px solid var(--line)}.desktop-nav.open{display:flex}.menu-btn{display:block}.icon-btn{display:none}.login-btn{padding:10px 13px}.hero{margin-top:18px;min-height:430px;align-items:flex-start;padding:34px 25px}.hero h1{font-size:48px}.hero-art{position:absolute;right:8px;bottom:0;width:58%;height:180px;opacity:.85}.hero-ball{font-size:75px}.orb-one{width:180px;height:120px}.orb-two{width:230px;height:155px}.hero-label{right:12px;bottom:4px}.ticker{font-size:9px;gap:10px;line-height:1.7}.ticker b{padding:0 3px}.section{padding-top:42px}.section h2{font-size:26px}.section-heading{align-items:start}.text-link{font-size:11px;margin-top:18px}.match-grid{grid-template-columns:1fr}.lower-grid{padding-bottom:45px}.panel{padding:17px}.fixture-teams{font-size:11px}footer{align-items:flex-start;flex-direction:column}}
