:root{
  --brand-bg: #0f172a;       /* slate-900 */
  --brand-fg: #e2e8f0;       /* slate-200 */
  --brand-accent: #FFD700;   /* gold */
  --brand-accent-2: #FFB800; /* warm golden */
  --brand-muted: #94a3b8;    /* slate-400 */
  --brand-card: #111827;     /* gray-900 */
  --brand-border: #1f2937;   /* gray-800 */
  --max-w: 1100px;
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: var(--brand-fg);
  background: radial-gradient(1200px 700px at 20% -10%, #0b1323 0%, #0b1323 20%, #0f172a 55%, #0b1323 100%);
  line-height:1.5;
}
a{color:var(--brand-accent); text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--max-w); margin:0 auto; padding:0 20px}
header{
  border-bottom:1px solid var(--brand-border);
  position:sticky; top:0; z-index:40;
  background: rgba(9, 13, 23, 0.8); backdrop-filter: blur(8px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.logo{
  display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.4px
}
.logo svg{height:34px; width:auto; display:block}
.badge{padding:6px 10px; border:1px solid var(--brand-border); border-radius:999px; color:var(--brand-muted); font-size:.85rem}
.nav-links{display:flex; gap:14px; align-items:center}
.nav-links a{padding:8px 10px; border-radius:10px; color:var(--brand-fg)}
.nav-links a:hover{background:#0b1220}
.hero{
  padding:68px 0 28px;
}
.hero h1{font-size:clamp(32px, 6vw, 64px); margin:0; line-height:1.05}
.hero .tagline{
  font-size:clamp(18px, 3.5vw, 28px); color:var(--brand-muted); margin-top:8px
}
.hero-cta{
  margin-top:26px; display:flex; gap:12px; flex-wrap:wrap
}
.input{background:#0b1220; color:var(--brand-fg); border:1px solid var(--brand-border); border-radius:12px; padding:14px 14px; min-width:260px}
.btn{
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-2));
  color:#001016; border:0; border-radius:12px; padding:14px 18px; font-weight:700; cursor:pointer
}
.btn.secondary{background:#0b1220; color:var(--brand-fg); border:1px solid var(--brand-border)}
.grid{
  display:grid; gap:16px
}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
@media (max-width:900px){.grid.cols-3{grid-template-columns:1fr}}
.card{
  background:linear-gradient(165deg, #0b1220, #0b1220 60%, #0e1627);
  border:1px solid var(--brand-border);
  border-radius:var(--radius);
  padding:20px;
}
.card h3{margin:0 0 6px 0}
.section{padding:28px 0}
.section h2{font-size:clamp(24px,3.5vw,36px); margin:0 0 10px 0}
.kicker{color:var(--brand-muted); font-size:.95rem; letter-spacing:.4px; text-transform:uppercase}
.footer{
  border-top:1px solid var(--brand-border);
  padding:30px 0 80px;
  color:var(--brand-muted);
}
footer a{color:var(--brand-fg)}
.notice{
  font-size:.9rem; color:#7dd3fc; margin-top:10px
}
.small{font-size:.85rem; color:var(--brand-muted)}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.badges .pill{border:1px dashed var(--brand-border); padding:8px 10px; border-radius:999px; font-size:.85rem; color:var(--brand-muted)}
hr{border:0; border-top:1px solid var(--brand-border); margin:18px 0}