:root { --bg: #121318; --panel: #1b1d24; --panel-2: #22252e; --line: #2a2d37; --text: #ecedf1; --muted: #9a9daa; --accent: #1db954; --accent-2: #1ed760; --ad: #1db954; --hs-a: #51ecee; --hs-b: #ff537f; --hs-c: #ffb347; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 Inter, system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; }
img, canvas, svg { max-width: 100%; }
h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; margin: 0 0 1rem; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5rem; }
h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
section.wrap { padding-top: 56px; padding-bottom: 56px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.lead { font-size: 1.2rem; color: var(--muted); margin: 0 0 2rem; max-width: 640px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--muted); margin: 0 0 .75rem; }

.topbar { position: sticky; top: 0; z-index: 40; background: rgba(18,19,24,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; font-size: 1.15rem; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links > a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav-links > a:not(.btn):hover, .nav-links > a[aria-current] { color: var(--text); }
@media (max-width: 520px) { .nav-links { gap: 14px; } .nav-links > a:not(.btn) { font-size: .88rem; } }

.btn { display: inline-block; background: var(--accent); color: #000; padding: 12px 22px; border-radius: 8px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.btn:hover { background: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }

footer.wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 32px; padding-bottom: 40px; border-top: 1px solid var(--line); font-size: .9rem; }
footer a { text-decoration: none; }
footer a:hover { color: var(--text); }
.center { text-align: center; padding-top: 18vh; }
@media (max-width: 520px) { .nav-links .opt { display: none; } .nav-links .btn { padding: 8px 14px; font-size: .9rem; } }