:root{
  --gold:#ffc01e; --gold2:#ff9e0d;
  --green:#22e06a; --green2:#1e9e4a;
  --blue:#2b4cd6; --purple:#7b5bff;
  --ink:#040a18;
  --bg0:#071a36; --bg1:#0a2148; --panel:rgba(8,18,40,.78);
  --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'VT323',monospace;color:#eaf2ff;background:#05060f;line-height:1.35;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}

.bg{position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 50% -20%, #1b4f93 0%, #0d2a55 38%, #061634 70%, #040a18 100%);
  background-color:#061025;
}
.bg::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.5;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #ffd21e 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 20%, #22e06a 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 60%, #7b5bff 50%, transparent 51%),
    radial-gradient(2px 2px at 35% 75%, #ff5e7e 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 50%, #4fd2ff 50%, transparent 51%);
  background-size:600px 600px;
}

h1,h2,h3,.brand,.btn{font-family:'Press Start 2P',monospace}
.g{color:var(--green)} .g1{color:var(--gold)} .g2{color:var(--green)}

/* ---------------- NAV ---------------- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px 22px;
  background:rgba(5,8,18,.7);backdrop-filter:blur(8px);border-bottom:2px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;text-decoration:none;color:#fff;text-shadow:0 3px 0 #000}
.brand b{color:var(--gold)}
.brand .cup{font-size:22px}
.nav nav{display:flex;gap:18px;margin-left:auto;font-size:20px}
.nav nav a{text-decoration:none;color:#bcd2f0}
.nav nav a:hover{color:var(--green)}
.btn{display:inline-block;text-decoration:none;border:none;cursor:pointer;border-radius:12px;
  font-size:12px;letter-spacing:1px;padding:14px 18px;color:#0a1220;transition:transform .08s}
.btn-play{background:linear-gradient(180deg,var(--gold),var(--gold2));box-shadow:0 4px 0 #9a5e00}
.btn-buy{background:linear-gradient(180deg,#8a6bff,#5a39d6);color:#fff;box-shadow:0 4px 0 #3b2496}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(2px)}
.btn.big{font-size:15px;padding:18px 26px}
@media(max-width:760px){.nav nav{display:none}}

/* ---------------- HERO ---------------- */
.hero{max-width:1000px;margin:0 auto;text-align:center;padding:54px 20px 30px}
.hero-badge{position:relative;width:140px;height:140px;margin:0 auto 18px;
  display:grid;place-items:center;border-radius:20px;
  background:linear-gradient(180deg,#0d2350,#08152f);border:3px solid var(--border);box-shadow:0 0 0 4px #000,0 12px 40px rgba(0,0,0,.5)}
.hero-badge .trophy{font-size:64px;filter:drop-shadow(0 4px 0 #000)}
.hero-badge .ball{position:absolute;bottom:-14px;font-size:40px;filter:drop-shadow(0 3px 0 #000)}
.hero h1{font-size:clamp(20px,4.4vw,40px);line-height:1.5;text-shadow:0 5px 0 #000,0 0 24px rgba(43,76,214,.5)}
.sub{font-size:clamp(20px,2.6vw,26px);max-width:760px;margin:18px auto 0;color:#cfe0ff}
.sub b{color:var(--gold)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 18px}

.ca{display:inline-flex;align-items:center;gap:10px;background:var(--panel);border:2px solid var(--border);
  border-radius:12px;padding:8px 10px 8px 14px;box-shadow:0 0 0 3px #000;max-width:96vw}
.ca-label{font-size:14px;color:var(--green);letter-spacing:1px}
.ca code{font-size:18px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.ca button{cursor:pointer;border:none;background:#13224a;color:#fff;border-radius:8px;padding:6px 10px;font-size:16px}
.ca button:hover{background:#1d3268}

.ticker{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.ticker li{font-size:19px;background:rgba(8,18,40,.6);border:2px solid var(--border);border-radius:30px;padding:7px 16px}

/* ---------------- SECTIONS ---------------- */
.section{max-width:1080px;margin:0 auto;padding:54px 20px}
.section h2{font-size:clamp(16px,3vw,24px);text-align:center;color:#fff;text-shadow:0 4px 0 #000;margin-bottom:30px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 0 0 3px #000,0 12px 30px rgba(0,0,0,.35)}
.card .ic{font-size:42px;margin-bottom:10px;filter:drop-shadow(0 3px 0 #000)}
.card h3{font-size:13px;line-height:1.5;color:var(--gold);margin-bottom:10px}
.card p{font-size:20px;color:#cfe0ff}
.card p b{color:var(--green)}

/* narrative */
.narrative .narr-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:center}
.narr-text p{font-size:22px;margin-bottom:14px;color:#dfeaff}
.narr-text b{color:var(--gold)}
.narr-flags{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;
  background:linear-gradient(180deg,#0d2350,#08152f);border:2px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 0 0 3px #000}
.narr-flags img{width:100%;height:auto;border:2px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 0 #000;display:block}
@media(max-width:760px){.narrative .narr-grid{grid-template-columns:1fr}}

/* fees flow */
.flow{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap}
.flow-step{flex:1;min-width:220px;background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:22px;text-align:center;box-shadow:0 0 0 3px #000}
.flow-step .ic{font-size:40px}
.flow-step h3{font-size:12px;color:var(--green);margin:12px 0 8px;line-height:1.5}
.flow-step p{font-size:19px;color:#cfe0ff}
.flow .arrow{display:grid;place-items:center;font-size:30px;color:var(--gold)}
.disclaimer{text-align:center;margin-top:24px;font-size:20px;color:#9fd6b4}
@media(max-width:760px){.flow .arrow{transform:rotate(90deg)}}

/* faq */
.faq{max-width:820px}
.faq details{background:var(--panel);border:2px solid var(--border);border-radius:12px;margin-bottom:12px;padding:4px 18px;box-shadow:0 0 0 3px #000}
.faq summary{cursor:pointer;font-size:21px;padding:14px 0;color:var(--gold);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"▸ ";color:var(--green)}
.faq details[open] summary::before{content:"▾ "}
.faq p{font-size:20px;color:#cfe0ff;padding:0 0 16px}
.faq b{color:var(--green)}

/* final cta */
.finalcta{text-align:center;padding:64px 20px}
.finalcta h2{font-size:clamp(18px,3.4vw,30px);text-shadow:0 4px 0 #000;margin-bottom:26px}

footer{text-align:center;padding:36px 20px;border-top:2px solid var(--border);background:rgba(4,7,16,.7)}
.socials{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;font-size:21px}
.socials a{text-decoration:none;color:#cfe0ff}
.socials a:hover{color:var(--green)}
footer p{font-size:17px;color:#7d8db0}