:root{color-scheme:only light}
html{background:#02080d!important}body{background:transparent!important;isolation:isolate}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:transparent;color:#eef7fb;font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,select{font:inherit}.depth{position:fixed;inset:0;z-index:0;background:
radial-gradient(circle at 50% -8%,rgba(45,215,255,.55) 0,rgba(9,96,132,.32) 12%,rgba(5,45,67,.18) 30%,transparent 52%),
linear-gradient(180deg,#07364d 0%,#041c2a 28%,#03111b 58%,#01070c 100%);overflow:hidden}
.depth:before{content:"";position:absolute;inset:-12% -18% 0;background:
repeating-linear-gradient(104deg,transparent 0 8%,rgba(109,225,255,.08) 9% 10%,transparent 11% 18%);
filter:blur(16px);transform-origin:top center;animation:shafts 11s ease-in-out infinite alternate}
.depth:after{content:"";position:absolute;inset:0;background:
radial-gradient(ellipse at 50% 8%,rgba(132,234,255,.18),transparent 38%),
radial-gradient(ellipse at 18% 60%,rgba(0,124,170,.10),transparent 35%),
radial-gradient(ellipse at 82% 72%,rgba(0,84,122,.12),transparent 38%);
animation:drift 18s ease-in-out infinite alternate}
@keyframes shafts{0%{transform:translateX(-2%) skewX(-3deg);opacity:.65}100%{transform:translateX(3%) skewX(3deg);opacity:1}}
@keyframes drift{0%{transform:translate3d(-1%,0,0) scale(1)}100%{transform:translate3d(1.5%,1%,0) scale(1.03)}}
#ocean{position:fixed;inset:0;width:100%;height:100%;z-index:1;opacity:.88;pointer-events:none}

body:before,body:after{content:"";position:fixed;left:-10%;right:-10%;height:180px;z-index:1;pointer-events:none;opacity:.22;filter:blur(12px)}
body:before{top:72px;background:radial-gradient(ellipse at 25% 100%,rgba(85,217,255,.55),transparent 46%),radial-gradient(ellipse at 70% 100%,rgba(32,151,198,.42),transparent 48%);animation:surfaceWave 9s ease-in-out infinite alternate}
body:after{top:150px;background:radial-gradient(ellipse at 45% 100%,rgba(56,185,231,.22),transparent 50%),radial-gradient(ellipse at 85% 100%,rgba(18,111,150,.25),transparent 45%);animation:surfaceWave2 13s ease-in-out infinite alternate}
@keyframes surfaceWave{from{transform:translateX(-1%) translateY(0) scaleX(1.01)}to{transform:translateX(2%) translateY(8px) scaleX(.98)}}
@keyframes surfaceWave2{from{transform:translateX(2%) translateY(2px)}to{transform:translateX(-2%) translateY(12px)}}
.hero{position:relative}
.hero:after{content:"";position:absolute;inset:8% 0 6%;z-index:-1;background:radial-gradient(circle at 50% 25%,rgba(60,205,255,.10),transparent 48%);filter:blur(18px);pointer-events:none}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px clamp(18px,4vw,64px);background:rgba(2,8,13,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(88,207,255,.13)}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.08em}.brand img{width:58px;height:58px;object-fit:contain}.brand b{display:block;color:#35c9ff;font-size:.7em;letter-spacing:.24em}.nav nav{display:flex;gap:28px;font-size:.82rem;font-weight:700;text-transform:uppercase}.nav nav a:hover{color:#46d3ff}.menu{display:none;background:none;border:0;color:white;font-size:1.5rem}.hero{min-height:720px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px;max-width:1240px;margin:auto;padding:70px 30px 80px}.hero:before{content:"";position:absolute;left:0;right:0;top:78px;height:600px;background:linear-gradient(110deg,transparent 30%,rgba(54,206,255,.05),transparent 60%);pointer-events:none}.hero-logo{width:min(440px,80%);filter:drop-shadow(0 18px 35px rgba(0,0,0,.5))}.eyebrow{color:#55d7ff;font-size:.76rem;letter-spacing:.25em;font-weight:900}.hero h1,.section h2{font-size:clamp(2.5rem,6vw,5.5rem);line-height:.92;margin:12px 0;text-transform:uppercase;letter-spacing:-.04em}.hero h1 span,.closing h2 span{color:#55d7ff}.lead{max-width:620px;color:#a9c0cc;font-size:1.08rem;line-height:1.7}.actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid rgba(93,211,255,.25);border-radius:8px;background:rgba(3,19,29,.72);color:white;font-weight:800;cursor:pointer}.btn.primary{background:#0a6b95;border-color:#25c7ff}.hero-orb{justify-self:end;width:min(420px,100%);aspect-ratio:1;border-radius:50%;border:1px solid rgba(84,211,255,.18);background:radial-gradient(circle,rgba(15,116,151,.18),rgba(2,9,14,.4) 65%);display:grid;place-content:center;gap:16px;box-shadow:inset 0 0 80px rgba(35,186,235,.08)}.hero-orb div{display:flex;align-items:baseline;gap:14px}.hero-orb strong{font-size:2.2rem;color:#5bdcff}.hero-orb span{color:#9bb3bf;text-transform:uppercase;font-size:.75rem;letter-spacing:.15em}.section{max-width:1240px;margin:auto;padding:90px 30px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.section-head h2{font-size:clamp(2rem,4vw,3.8rem)}.section-head>p{color:#8299a5;max-width:440px}.teams{display:grid;grid-template-columns:1fr 1fr;gap:18px}.team{min-height:350px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;padding:24px;border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;background:rgba(3,13,20,.82)}.team.blue{box-shadow:inset 0 -4px 0 #0879d0}.team.green{box-shadow:inset 0 -4px 0 #20a34a}.team img{width:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 20px 25px #000)}.team h3{font-size:2rem;margin:8px 0}.tag{font-size:.7rem;font-weight:900;letter-spacing:.18em;color:#7bdfff}.green .tag{color:#70e58d}.team p{color:#8da5b1}.text-btn{border:0;background:none;color:white;padding:12px 0;font-weight:800;cursor:pointer}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat,.panel{border:1px solid rgba(255,255,255,.08);background:rgba(3,14,21,.78);border-radius:12px}.stat{padding:22px}.stat span,.stat small{display:block;color:#79909c}.stat strong{display:block;font-size:2.5rem;margin:10px 0}.api-note{padding:7px 11px;border:1px solid rgba(83,214,255,.22);border-radius:999px;color:#65d9ff;font-size:.72rem}.panel{margin-top:14px;padding:24px}.panel p{color:#8da5b1}.fake-table{margin-top:24px}.fake-table>div{display:grid;grid-template-columns:40px 2fr 1.3fr .6fr .6fr;gap:10px;padding:13px;border-top:1px solid rgba(255,255,255,.06)}.fake-table>div:first-child{color:#6e8794;font-size:.72rem;text-transform:uppercase}.tactic-layout{display:grid;grid-template-columns:minmax(300px,700px) 1fr;gap:28px}.pitch{position:relative;aspect-ratio:68/90;border:2px solid rgba(220,255,230,.6);border-radius:8px;background:repeating-linear-gradient(90deg,rgba(23,95,60,.86) 0 12.5%,rgba(18,79,51,.86) 12.5% 25%);overflow:hidden;box-shadow:inset 0 0 70px #03120b}.pitch:before,.pitch:after{content:"";position:absolute;left:25%;width:50%;height:15%;border:2px solid rgba(255,255,255,.5)}.pitch:before{top:-2px}.pitch:after{bottom:-2px}.half{position:absolute;left:0;right:0;top:50%;border-top:2px solid rgba(255,255,255,.45)}.center-circle{position:absolute;width:25%;aspect-ratio:1;border:2px solid rgba(255,255,255,.45);border-radius:50%;left:37.5%;top:43.5%}.player{position:absolute;width:48px;height:48px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #55d7ff;background:#061722;color:#fff;font-weight:900;box-shadow:0 5px 20px #000;cursor:grab;touch-action:none}.player:active{cursor:grabbing}.tactic-controls{display:flex;flex-direction:column;gap:18px;padding:24px;border:1px solid rgba(255,255,255,.08);background:rgba(3,14,21,.78);border-radius:12px;align-self:start}.tactic-controls label{display:grid;gap:8px;color:#8ea4af;font-size:.8rem;text-transform:uppercase;font-weight:800}.tactic-controls select{background:#061722;color:white;border:1px solid #24404e;padding:12px;border-radius:8px}.tactic-controls p{color:#7e949f;line-height:1.6}.closing{display:grid;grid-template-columns:320px 1fr;align-items:center;border-top:1px solid rgba(255,255,255,.07)}.closing img{width:100%}.closing h2{font-size:clamp(2rem,5vw,4rem)}footer{max-width:1240px;margin:auto;padding:30px;display:flex;justify-content:space-between;color:#637985;border-top:1px solid rgba(255,255,255,.07);font-size:.8rem}#toast{position:fixed;right:20px;bottom:20px;background:#061722;border:1px solid #2a9cc8;border-radius:9px;padding:12px 16px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}@media(max-width:850px){.menu{display:block}.nav nav{display:none;position:absolute;top:78px;left:0;right:0;padding:20px;background:#03101a;flex-direction:column}.nav nav.open{display:flex}.hero{grid-template-columns:1fr;min-height:auto;padding-top:50px}.hero-orb{justify-self:start;width:100%;aspect-ratio:auto;border-radius:14px;padding:25px}.teams,.tactic-layout{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.team{grid-template-columns:1fr}.team img{height:240px}.closing{grid-template-columns:1fr}.closing img{max-width:260px}.fake-table{overflow-x:auto}.fake-table>div{min-width:600px}}@media(max-width:520px){.brand span{display:none}.section,.hero{padding-left:18px;padding-right:18px}.stats-grid{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.hero h1{font-size:3rem}.pitch{width:100%}footer{flex-direction:column;gap:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#ocean{display:none}body:before,body:after,.depth:before,.depth:after{animation:none!important}*{animation:none!important;transition:none!important}}
main,footer{position:relative;z-index:2}
