:root {
  --bg-deep:        oklch(0.15 0.05 260);
  --bg-surface:     oklch(0.18 0.05 260);
  --accent-cyan:    oklch(0.75 0.22 195);
  --accent-green:   oklch(0.62 0.22 145);
  --accent-gold:    oklch(0.78 0.18 85);
  --white-warm:     oklch(0.97 0.005 80);
  --border-glass:   rgba(255,255,255,0.08);
  --radius:         14px;
  --easing:         cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{ background:var(--bg-deep); color:var(--white-warm); font-family:'Satoshi',system-ui,sans-serif; font-weight:400; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,video{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.font-display{font-family:'Boska',Georgia,serif;font-weight:900;letter-spacing:-0.02em;line-height:0.95}
.font-body{font-family:'Satoshi',sans-serif}
.accent-cyan{color:var(--accent-cyan)}
.glass{ background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border:1px solid var(--border-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius:var(--radius); }
.section{position:relative;padding:6rem 1.5rem;min-height:100vh;overflow:hidden}
.section__title{font-size:clamp(2.5rem,6vw,5rem);margin-bottom:3rem;text-align:center}
#webgl-container{ position:fixed;inset:0;z-index:0;pointer-events:none; }
.section--hero{display:grid;place-items:center;text-align:center;padding-top:0}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 0%, var(--bg-deep) 80%);z-index:-1}
.hero__content{position:relative;z-index:2;max-width:900px;padding:0 1rem}
.hero__title{font-size:clamp(3rem,12vw,10rem);text-transform:uppercase}
.hero__title .char{display:inline-block;will-change:transform,opacity}
.hero__sub{margin:1.5rem 0 2rem;font-size:clamp(1rem,1.4vw,1.25rem);opacity:0.85}
.btn{ display:inline-block;padding:1rem 2rem;border-radius:999px; text-decoration:none;font-weight:700;letter-spacing:.02em; transition:transform .3s var(--easing), box-shadow .3s var(--easing); }
.btn--primary{ background:var(--accent-cyan);color:#001417; box-shadow:0 0 0 1px rgba(1,170,201,.5), 0 10px 40px -10px var(--accent-cyan); }
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--accent-cyan), 0 18px 50px -10px var(--accent-cyan)}
.btn--rotating{ position:relative;isolation:isolate; background:linear-gradient(var(--bg-deep),var(--bg-deep)) padding-box, conic-gradient(from var(--a,0deg), var(--accent-cyan), #ff00aa, var(--accent-cyan)) border-box; border:2px solid transparent;color:var(--white-warm); animation:spin 4s linear infinite; }
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.section--story{padding:0}
.story__stage{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.story__panel{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s var(--easing)}
.story__panel.is-active{opacity:1}
.story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--easing), transform 4s ease-out}
.story__panel.is-active .story__img{clip-path:inset(0 0 0 0);transform:scale(1.08)}
.story__panel h2{position:relative;z-index:2;font-size:clamp(2.5rem,6vw,6rem);text-align:center;padding:0 1rem;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.players__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;max-width:1200px;margin:0 auto}
.player-card{position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;transform-style:preserve-3d;transition:transform .15s var(--easing)}
.player-card img{width:100%;height:100%;object-fit:cover}
.player-card::after{ content:"";position:absolute;inset:0; background:linear-gradient(120deg, transparent 35%, rgba(1,170,201,.25) 50%, transparent 65%); mix-blend-mode:screen;opacity:0;transition:opacity .3s; }
.player-card:hover::after{opacity:1}
@media (hover:none){ .player-card{transform:none !important} }
.section--horizontal{padding:0}
.horizontal__track{display:flex;width:max-content;height:100vh;align-items:center;gap:2rem;padding:0 2rem}
.horizontal__slide{flex:0 0 80vw;max-width:1200px;position:relative}
.horizontal__slide img{aspect-ratio:21/9;width:100%;height:auto;object-fit:cover;border-radius:var(--radius)}
.horizontal__slide .counter{display:block;font-family:'Boska',serif;font-size:clamp(4rem,12vw,10rem);font-weight:900;color:var(--accent-cyan);line-height:1}
.section--stats{background:var(--bg-deep);position:relative}
.section--stats::before{ content:"";position:absolute;inset:0;opacity:.08;pointer-events:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' /></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;max-width:1200px;margin:0 auto;position:relative;z-index:2}
.stat{text-align:center}
.stat__num{display:block;font-size:clamp(4rem,9vw,7rem);color:var(--white-warm)}
.stat__lbl{display:block;margin-top:.5rem;letter-spacing:.15em;text-transform:uppercase;opacity:.6;font-size:.85rem}
.section--booking{display:grid;place-items:center}
.booking__title{font-size:clamp(2.5rem,7vw,6rem);text-align:center;margin-bottom:2.5rem;position:relative}
.glitch{position:relative}
.glitch::before,.glitch::after{ content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen;animation:glitch 4s infinite; }
.glitch::before{color:var(--accent-cyan);transform:translate(-2px,0)}
.glitch::after{color:#ff00aa;transform:translate(2px,0);animation-delay:.15s}
@keyframes glitch{ 0%,90%,100%{clip-path:inset(0 0 0 0)} 92%{clip-path:inset(10% 0 80% 0)} 94%{clip-path:inset(70% 0 10% 0)} 96%{clip-path:inset(40% 0 50% 0)} }
.booking__form{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:700px;width:100%;padding:2rem}
.booking__form .span-2{grid-column:span 2}
.booking__form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.booking__form input,.booking__form textarea{ padding:.85rem 1rem;background:rgba(255,255,255,.04);border:1px solid var(--border-glass); border-radius:10px;color:var(--white-warm);font:inherit;outline:none;transition:border-color .2s; }
.booking__form input:focus,.booking__form textarea:focus{border-color:var(--accent-cyan)}
.booking__form button{grid-column:span 2;justify-self:center;margin-top:1rem}
.footer{padding:2rem;text-align:center;opacity:.5;font-size:.85rem;border-top:1px solid var(--border-glass)}
@media (max-width:768px){ .booking__form{grid-template-columns:1fr} .booking__form .span-2,.booking__form button{grid-column:span 1} .horizontal__slide{flex-basis:90vw} }