:root{
  --bg:#0b0f1a;
  --fg:#e6e9ee;
  --accent:#b3ff66;
  --muted:#9aa3af;
  --card:#121826;
  --border:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(80% 80% at 20% 10%, #162036 0%, var(--bg) 60%);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;justify-content:space-between;align-items:center; gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)}
.brand-logo{width:36px;height:36px;border-radius:8px;display:inline-grid;place-items:center}
.brand-name{font-weight:700}
.nav a{color:var(--fg);opacity:.8;text-decoration:none;margin-left:16px}
.hero{padding:80px 0}
.tag{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#0b0f1a;background:var(--accent); padding:6px 10px;border-radius:999px}
h1{font-size:clamp(32px,6vw,64px);line-height:1.1;margin:16px 0}
h2{font-size:clamp(22px,3.2vw,32px)}
.lead{font-size:clamp(16px,2.4vw,20px); color:var(--muted);max-width:62ch}
.actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}
.button{display:inline-flex;align-items:center;gap:8px; padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:600}
.button.primary{background:var(--accent); color:#0b0f1a}
.button.ghost{border:1px solid var(--border); color:var(--fg); background:transparent}
.section{padding:48px 0;border-top:1px solid var(--border)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:16px}
.card{background:var(--card); padding:18px; border-radius:14px; border:1px solid var(--border)}
.footer{padding:36px 0; color:#8b94a3; font-size:14px}
a{cursor:pointer}
@media (max-width:640px){
  .nav{display:none}
}