:root { --ink:#eaf6ff; --bg:#0b1b26; --panel:#10242f; --amber:#ffb347; --mint:#4fffb0; --line:rgba(255,179,71,.25); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(60% 45% at 70% 8%, rgba(255,179,71,.14), transparent 60%),
             radial-gradient(50% 40% at 15% 30%, rgba(79,255,176,.08), transparent 60%),
             linear-gradient(180deg,#0e2230 0%,#0b1b26 55%); }
.nav { display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,48px); position:sticky; top:0; z-index:10;
  background:rgba(11,27,38,.75); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.logo { font-weight:800; letter-spacing:.28em; font-size:18px;
  background:linear-gradient(90deg,var(--amber),var(--mint)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn { display:inline-block; text-decoration:none; font-weight:800; letter-spacing:.08em;
  color:#08222f; background:linear-gradient(120deg,var(--amber),var(--mint));
  border-radius:12px; box-shadow:0 8px 28px rgba(79,255,176,.30); transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(79,255,176,.42); }
.btn-big { font-size:19px; padding:16px 38px; margin-top:18px; }
.btn-small { font-size:14px; padding:9px 20px; }
.hero { display:grid; grid-template-columns:minmax(300px,1fr) minmax(320px,1.2fr); gap:clamp(18px,3vw,40px);
  align-items:center; padding:clamp(28px,5vw,70px) clamp(16px,4vw,48px); max-width:1200px; margin:0 auto; }
h1 { font-size:clamp(40px,7vw,72px); letter-spacing:.06em; line-height:1.05;
  background:linear-gradient(90deg,var(--amber) 10%,var(--mint) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { font-size:clamp(16px,2.3vw,22px); margin-top:10px; color:#c9ecdf; font-weight:600; }
.blurb { margin-top:14px; opacity:.85; font-size:15px; max-width:46ch; }
.fineprint { margin-top:10px; font-size:12px; opacity:.55; }
.hero-frame { position:relative; border-radius:18px; padding:10px;
  background:linear-gradient(140deg,rgba(255,179,71,.35),rgba(79,255,176,.22)); }
#hero-preview { display:block; width:100%; aspect-ratio:4/3; border-radius:12px;
  background:#0b1b26; }
.frame-tag { position:absolute; top:-10px; left:16px; font-size:11px; letter-spacing:.2em;
  background:var(--panel); border:1px solid var(--line); padding:3px 10px; border-radius:8px; color:#ffd9a5; }
.band { padding:clamp(30px,5vw,64px) clamp(16px,4vw,48px); max-width:1200px; margin:0 auto; }
.band h2 { font-size:clamp(22px,3.4vw,32px); margin-bottom:22px; color:#ffd9a5; letter-spacing:.04em; }
.band.alt { background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
#gallery figure { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; }
#gallery img { display:block; width:100%; border-radius:8px; }
#gallery figcaption { font-size:13px; margin-top:8px; opacity:.8; }
#features { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
#features li { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--mint);
  border-radius:12px; padding:14px 16px; font-size:14.5px; }
#features b { color:#ffd9a5; }
#controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:start; }
.ctrl { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; font-size:14.5px; }
.ctrl h3 { color:#4fffb0; margin-bottom:8px; letter-spacing:.08em; font-size:15px; }
.ctrl .goal { color:var(--mint); font-weight:700; }
.ctrl .coin { color:#ffd23f; font-weight:700; }
#controls .btn-big { grid-column:1/-1; justify-self:center; }
kbd { display:inline-block; min-width:26px; text-align:center; background:#1b3544; border:1px solid #33586b;
  border-bottom-width:3px; border-radius:6px; padding:2px 6px; font-size:12px; margin:1px; }
.foot { padding:26px clamp(16px,4vw,48px); text-align:center; font-size:12.5px; opacity:.6; border-top:1px solid var(--line); }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } .hero-frame { order:-1; } }