:root{
  --bg:#0b0f1a;
  --surface:#121a2b;
  --card:#0f172a;
  --text:#e6edf3;
  --muted:#9fb0c6;
  --primary:#d4af37; /* gold */
  --secondary:#c0c0c0; /* silver */
  --accent:#e5e4e2;   /* platinum */
  --brand:#1f6feb;    /* blue accent */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, #223356 0%, transparent 60%) , var(--bg);
}
a{color:var(--brand); text-decoration:none}
.container{max-width:1140px; margin:0 auto; padding:0 20px}
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,26,.85); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px}
.nav a{color:var(--text)}
.menu{display:flex; gap:22px}
.btn{display:inline-block; padding:12px 18px; border-radius:14px; font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--primary), #f5d77a); color:#111}
.btn-ghost{background:#ffffff12; color:var(--text); border:1px solid #ffffff22}
.hero{padding:96px 0 48px; text-align:center}
.badge{display:inline-block; padding:6px 10px; border:1px solid #ffffff22; border-radius:24px; color:var(--accent); background:#ffffff10}
h1{font-size:46px; line-height:1.1; margin:16px 0 8px}
h2{font-size:34px; margin:28px 0 12px}
p.lead{color:var(--muted); font-size:18px}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
.card{background:linear-gradient(180deg, #0e1526, #0a1120); border:1px solid #ffffff10; padding:22px; border-radius:18px}
.card h3{margin:6px 0 6px; font-size:22px}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding:2px 8px; border-radius:6px; border:1px solid #ffffff22}
.pricing .tier{position:relative; overflow:hidden}
.tier.best{border:1px solid #f4e7b0; box-shadow: 0 0 0 1px #f4e7b0 inset}
.tier .price{font-size:40px; font-weight:800}
.tier .features li{margin:8px 0}
.video-thumb{position:relative; overflow:hidden; border-radius:16px; border:1px solid #ffffff10}
.video-thumb img{width:100%; display:block}
.video-thumb .play{position:absolute; inset:auto auto 14px 14px; background:#0009; padding:6px 10px; border-radius:12px}
.footer{padding:36px 0 60px; color:#a7b6cc}
.footer a{color:#a7b6cc}
/* Responsive */
@media(max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  h1{font-size:34px}
}
/* FAQ accordion */
.faq-item{border-bottom:1px solid #ffffff14}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; padding:14px 0}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:400px}
/* Toast */
.toast{position:fixed; right:20px; bottom:20px; background:#111c; color:#fff; padding:12px 16px; border-radius:12px; opacity:0; transform:translateY(12px); transition:all .3s ease}
.toast.show{opacity:1; transform:translateY(0)}