:root {
  --ink: #07111f;
  --muted: #667084;
  --paper: #f6f8fb;
  --white: #fff;
  --cyan: #5de6e6;
  --cyan-dark: #2dbfc4;
  --lime: #cff83d;
  --violet: #7259ff;
  --coral: #ff6b57;
  --line: rgba(7,17,31,.11);
  --shadow: 0 24px 70px rgba(21,31,50,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Mulish, Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header { position: sticky; top: 0; z-index: 20; height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 clamp(24px, 6vw, 96px); background: rgba(246,248,251,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 900; letter-spacing: -.6px; }
.brand b { color: var(--cyan-dark); }
.brand-mark { width: 34px; height: 28px; position: relative; display: inline-block; border: 7px solid var(--ink); border-radius: 7px 7px 14px 14px; transform: skew(-6deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: 5px; width: 5px; height: 5px; background: var(--ink); border-radius: 50%; }
.brand-mark::before { right: 3px; }.brand-mark::after { right: -3px; }
.brand-mark span::before, .brand-mark span::after { content: ""; position: absolute; background: var(--ink); }
.brand-mark span::before { left: 2px; top: 5px; width: 10px; height: 4px; }.brand-mark span::after { left: 5px; top: 2px; width: 4px; height: 10px; }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 800; }
.desktop-nav a { padding: 30px 0 26px; border-bottom: 3px solid transparent; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--cyan-dark); border-color: var(--cyan-dark); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: transparent; border: 0; cursor: pointer; }
.icon-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 21px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 900; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--cyan); box-shadow: 0 10px 28px rgba(65,212,216,.27); }
.button-ghost { border-color: var(--line); background: var(--white); }
.button-large { min-height: 54px; padding: 0 27px; border-radius: 12px; font-size: 14px; }
.button-light { background: var(--lime); color: var(--ink); }.button-dark { background: var(--ink); color: white; }

.hero { min-height: 680px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 3vw; padding: 76px clamp(24px, 8vw, 125px) 70px; background: linear-gradient(120deg,#f9fcfd 0%,#eff9fb 54%,#d8f8f8 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(7,17,31,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(7,17,31,.07) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,#000,transparent 70%); }
.hero-copy, .hero-art { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #3b6672; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 3px; display: inline-block; background: var(--cyan-dark); }
.hero h1 { max-width: 700px; margin: 22px 0 22px; font-size: clamp(54px,6vw,88px); line-height: .98; letter-spacing: -5px; }
h1 em, h2 em { color: var(--cyan-dark); font-style: normal; }
.hero-copy > p { max-width: 590px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.play-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 900; }
.play-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--cyan-dark); background: white; border-radius: 50%; box-shadow: 0 8px 24px rgba(8,30,47,.12); font-size: 11px; }
.hero-proof { display: flex; align-items: center; gap: 15px; margin-top: 48px; }
.avatars { display: flex; }.avatars span { width: 35px; height: 35px; display: grid; place-items: center; margin-left: -8px; color: white; background: var(--ink); border: 3px solid white; border-radius: 50%; font-size: 9px; font-weight: 900; }.avatars span:first-child{margin-left:0;background:var(--violet)}.avatars span:nth-child(2){background:var(--coral)}.avatars span:nth-child(3){background:var(--cyan-dark)}.avatars span:last-child{color:var(--ink);background:var(--lime)}
.hero-proof p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.hero-proof strong{color:var(--ink);font-size:13px}

.hero-art { min-height: 490px; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(4px); }.hero-glow-one{width:500px;height:500px;right:-100px;top:30px;background:rgba(93,230,230,.28)}.hero-glow-two{width:280px;height:280px;left:42%;bottom:-100px;background:rgba(114,89,255,.08)}
.orbit { position:absolute; border:1px dashed rgba(7,17,31,.17); border-radius:50%; }.orbit-one{width:440px;height:440px;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-two{width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%)}
.controller { width: 390px; height: 240px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-8deg); border: 10px solid var(--ink); border-radius: 80px 80px 115px 115px; background: linear-gradient(145deg,#fff,#dcecf0); box-shadow: 0 38px 55px rgba(8,33,45,.22),inset -16px -18px 28px rgba(35,71,82,.15); }
.controller::before,.controller::after{content:"";position:absolute;bottom:-27px;width:100px;height:115px;background:#e6f1f3;border:10px solid var(--ink);z-index:-1}.controller::before{left:-2px;border-radius:18px 25px 72px 50px;transform:rotate(17deg)}.controller::after{right:-2px;border-radius:25px 18px 50px 72px;transform:rotate(-17deg)}
.controller-top { position:absolute;width:120px;height:22px;left:125px;top:-10px;border-radius:0 0 14px 14px;background:var(--ink) }
.stick { position:absolute;width:52px;height:52px;border:8px solid #243247;border-radius:50%;background:#53677d;box-shadow:inset 0 0 0 6px #172335 }.stick-left{left:110px;top:117px}
.dpad {position:absolute;left:55px;top:70px;width:64px;height:64px}.dpad i{position:absolute;background:var(--ink);border-radius:5px}.dpad i:first-child{width:25px;height:64px;left:19px}.dpad i:last-child{height:25px;width:64px;top:19px}
.face-buttons {position:absolute;right:50px;top:63px;width:86px;height:86px}.face-buttons i{position:absolute;width:27px;height:27px;border:5px solid var(--ink);border-radius:50%;background:var(--cyan)}.face-buttons i:first-child{left:30px}.face-buttons i:nth-child(2){left:30px;bottom:0;background:var(--coral)}.face-buttons i:nth-child(3){top:30px;left:0;background:var(--lime)}.face-buttons i:last-child{top:30px;right:0;background:var(--violet)}
.controller-light{position:absolute;bottom:28px;left:178px;width:34px;height:8px;background:var(--cyan);border-radius:10px;box-shadow:0 0 16px var(--cyan)}
.floating-card{position:absolute;display:grid;grid-template-columns:auto auto;column-gap:9px;padding:12px 16px;background:rgba(255,255,255,.94);border:1px solid rgba(7,17,31,.08);border-radius:13px;box-shadow:var(--shadow);font-size:11px;animation:float 4s ease-in-out infinite}.floating-card span{grid-row:1/3;font-size:23px}.floating-card small{color:var(--muted);font-size:9px}.fc-one{left:-5px;top:74px}.fc-two{right:-10px;bottom:70px;animation-delay:-2s}.pixel{position:absolute;width:15px;height:15px;background:var(--coral);transform:rotate(20deg)}.p1{left:10%;bottom:60px}.p2{right:6%;top:38px;background:var(--violet)}.p3{right:15%;top:48%;width:9px;height:9px;background:var(--lime)}
@keyframes float{50%{transform:translateY(-9px)}}

.ticker { display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 20px; min-height: 72px; padding: 0 clamp(24px,6vw,96px); color: white; background: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: 1px; text-align: center; }.ticker span{color:var(--cyan);margin-right:12px}
.section { padding: 100px clamp(24px,8vw,125px); }.section-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:38px}.section h2{margin:13px 0 0;font-size:clamp(36px,4vw,56px);line-height:1.05;letter-spacing:-2.6px}.filters{display:flex;gap:8px}.filter{padding:10px 16px;color:var(--muted);background:white;border:1px solid var(--line);border-radius:30px;cursor:pointer;font-size:12px;font-weight:800}.filter.active,.filter:hover{color:white;background:var(--ink)}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.game-card{overflow:hidden;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 15px 45px rgba(20,35,51,.07);transition:.25s}.game-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.game-visual{height:245px;position:relative;overflow:hidden;display:grid;place-items:center}.game-card.coral .game-visual{background:linear-gradient(145deg,#ff8d72,#ff4e5b)}.game-card.violet .game-visual{background:linear-gradient(145deg,#8a72ff,#5137ce)}.game-card.blue .game-visual{background:linear-gradient(145deg,#5de6e6,#3387dd)}.status{position:absolute;left:18px;top:18px;padding:6px 9px;color:white;background:rgba(7,17,31,.85);border-radius:6px;font-size:9px;font-weight:900;letter-spacing:1px}.planet{width:142px;height:142px;border-radius:50%;background:linear-gradient(135deg,#ffd671,#ff8c42);box-shadow:inset -22px -15px 0 rgba(194,72,52,.2),0 30px 50px rgba(71,23,27,.22)}.ship{position:absolute;color:white;font-size:75px;transform:rotate(28deg);text-shadow:0 13px 0 rgba(73,36,47,.2)}.castle{font-size:140px;color:#d9d1ff;text-shadow:0 24px 0 rgba(25,15,80,.22);z-index:2}.moon{position:absolute;width:150px;height:150px;border-radius:50%;background:#a899ff;right:28px;top:25px}.wave{position:absolute;font-size:180px;color:rgba(255,255,255,.55);font-weight:100}.sun{width:105px;height:105px;border-radius:50%;background:#fff29c;box-shadow:0 0 50px #fff29c}.game-body{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px}.game-body p{margin:0 0 5px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}.game-body h3{margin:0;font-size:18px}.rating{color:#a87400;background:#fff8d9;padding:7px 9px;border-radius:7px;font-size:11px;font-weight:900}

.tournament { min-height: 540px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; position:relative;overflow:hidden;color:white;background:var(--violet)}.tournament::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,rgba(93,230,230,.3),transparent 28%),linear-gradient(90deg,transparent,rgba(7,17,31,.15))}.tournament-copy,.trophy-art{position:relative;z-index:2}.eyebrow.light{color:#bffafa}.eyebrow.light span{background:var(--lime)}.tournament h2 em{color:var(--lime)}.tournament-copy>p{max-width:520px;color:#ddd9ff;line-height:1.7}.event-meta{display:flex;gap:42px;margin:29px 0}.event-meta div{display:flex;flex-direction:column}.event-meta b{font-size:19px}.event-meta small{margin-top:3px;color:#c2bbff;font-size:9px;text-transform:uppercase;letter-spacing:1px}.trophy-art{height:380px;display:grid;place-items:center}.trophy-rays{position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.2);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 110px rgba(255,255,255,.025)}.trophy{position:relative;width:230px;height:290px;filter:drop-shadow(0 35px 24px rgba(16,7,77,.3))}.cup{width:220px;height:160px;display:grid;place-items:center;color:#9e7500;background:linear-gradient(135deg,#fff3a4,#dca51c);border:8px solid #ffe882;border-radius:20px 20px 100px 100px;font-size:64px}.cup::before,.cup::after{content:"";position:absolute;top:32px;width:75px;height:88px;border:15px solid #e9bc36;z-index:-1}.cup::before{left:-51px;border-radius:40px 0 0 55px}.cup::after{right:-51px;border-radius:0 40px 55px 0}.stem{width:35px;height:70px;margin:auto;background:linear-gradient(90deg,#bc8713,#ffe76f)}.base{width:145px;height:27px;margin:auto;background:#ffdc51;border:7px solid #d69912;border-radius:8px}.rank-chip{position:absolute;display:flex;flex-direction:column;padding:12px 17px;color:var(--ink);background:white;border-radius:11px;box-shadow:var(--shadow)}.rank-chip b{font-size:20px}.rank-chip span{font-size:8px;font-weight:900;letter-spacing:1px}.rank-one{left:4%;top:29%}.rank-two{right:2%;bottom:18%}

.community{background:white}.community-card{display:grid;grid-template-columns:1.1fr 1fr auto;align-items:center;gap:50px;padding:55px 60px;background:linear-gradient(120deg,#d9fbfa,#f1ffe0);border:1px solid rgba(42,160,164,.18);border-radius:24px}.community-card h2{font-size:clamp(34px,3vw,48px)}.community-card>p{color:var(--muted);line-height:1.7}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;background:#f6f8fb}.faq-intro>p{max-width:390px;color:var(--muted);line-height:1.7}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:22px 0}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-weight:900}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";display:grid;place-items:center;min-width:30px;height:30px;color:var(--cyan-dark);background:#def8f8;border-radius:50%;font-size:19px}.faq-list details[open] summary::after{content:"−"}.faq-list p{max-width:650px;margin:14px 48px 0 0;color:var(--muted);line-height:1.7}
footer{min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px clamp(24px,8vw,125px);color:#9ba6b5;background:var(--ink);font-size:11px}footer .brand{color:white}footer .brand-mark{border-color:white}footer .brand-mark::before,footer .brand-mark::after,footer .brand-mark span::before,footer .brand-mark span::after{background:white}

@media (max-width:1000px){.desktop-nav{display:none}.hero{grid-template-columns:1fr;padding-top:75px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.eyebrow,.hero-actions,.hero-proof{justify-content:center}.hero-art{min-height:420px}.section-heading{align-items:flex-start;flex-direction:column}.game-grid{grid-template-columns:repeat(2,1fr)}.game-card:last-child{grid-column:1/-1}.tournament{grid-template-columns:1fr;text-align:center}.tournament-copy>p{margin-inline:auto}.tournament .eyebrow,.event-meta{justify-content:center}.community-card{grid-template-columns:1fr;text-align:center}.community-card .eyebrow{justify-content:center}.faq{grid-template-columns:1fr}.faq-intro{text-align:center}.faq-intro .eyebrow{justify-content:center}.faq-intro>p{margin-inline:auto}}
@media (max-width:680px){.site-header{height:70px;padding-inline:18px}.header-actions .button-ghost,.icon-button{display:none}.header-actions .button-primary{min-height:39px;padding-inline:14px}.hero{min-height:auto;padding:68px 22px 45px}.hero h1{font-size:52px;letter-spacing:-3px}.hero-copy>p{font-size:16px}.hero-actions{flex-direction:column;gap:18px}.hero-art{min-height:320px}.controller{width:270px;height:170px;border-width:7px}.controller::before,.controller::after{width:70px;height:75px;border-width:7px;bottom:-22px}.controller-top{left:85px;width:88px}.dpad{transform:scale(.72);left:28px;top:41px}.face-buttons{transform:scale(.72);right:25px;top:38px}.stick{transform:scale(.72);left:75px;top:82px}.controller-light{left:118px;bottom:19px}.orbit-one{width:310px;height:310px}.orbit-two{width:240px;height:240px}.floating-card{transform:scale(.82)}.fc-one{left:-10px;top:25px}.fc-two{right:-12px;bottom:28px}.ticker{grid-template-columns:1fr 1fr;padding-block:18px;row-gap:15px}.section{padding:72px 22px}.filters{width:100%;overflow:auto}.game-grid{grid-template-columns:1fr}.game-card:last-child{grid-column:auto}.game-visual{height:220px}.tournament{padding-top:80px}.event-meta{gap:25px}.trophy-art{height:340px;transform:scale(.85)}.community-card{padding:40px 24px}.community-card h2{font-size:34px}footer{flex-direction:column;text-align:center;padding-block:38px}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.floating-card{animation:none}.button,.game-card{transition:none}}