:root{
  --navy:#0b1b2b; --navy-2:#0f253a; --gold:#ffd34d; --gold-2:#f3c13c;
  --text:#e6edf3; --muted:#9fb1c3; --card:#12263b; --btn:#20364f;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:var(--text);
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{
  position:sticky; top:0; backdrop-filter:saturate(140%) blur(6px);
  background:rgba(11,27,43,.75); border-bottom:1px solid rgba(255,255,255,.06); z-index:50;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.logo{width:38px;height:38px}
.wordmark{display:flex;flex-direction:column;line-height:1.05}
.wordmark{font-size:1.15rem}
.subtitle{font-size:.8rem;font-weight:400;color:var(--muted)}
.nav a{color:var(--muted);text-decoration:none;margin-left:22px}
.nav a:hover{color:var(--text)}
.btn{padding:10px 16px;border-radius:12px;border:1px solid transparent;text-decoration:none;display:inline-block;transition:transform .08s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:#1a1300;font-weight:700}
.btn-ghost{border-color:rgba(255,255,255,.15);color:var(--text)}
.btn-outline{border-color:var(--gold);color:var(--gold)}
.btn + .btn{margin-left:10px}
.hero{position:relative;padding:84px 0 72px}
.hero-inner{max-width:900px}
.hero h1{font-size:3rem;line-height:1.1;margin:0 0 12px}
.hero .accent{color:var(--gold)}
.lead{color:var(--muted);font-size:1.2rem;max-width:700px}
.cta-group{margin-top:22px}
.glow{position:absolute;inset:auto 0 0 0;height:180px;background:radial-gradient(60% 60% at 50% 0%, rgba(255,211,77,.25), transparent 60%);filter:blur(30px)}
.features{padding:40px 0}
.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); padding:22px;border-radius:16px;border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}
.how{padding:40px 0 64px}
.two-col{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center}
.steps{padding-left:18px;color:var(--muted)}
.panel.demo{background:linear-gradient(160deg,#12263b 0%, #0e2033 100%);border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:24px; min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center; gap:14px;box-shadow:var(--shadow)}
.panel.demo .dot{width:14px;height:14px;border-radius:50%;background:var(--gold);opacity:.85;animation:pulse 2.4s infinite}
.panel.demo .dot:nth-child(2){animation-delay:.3s}
.panel.demo .dot:nth-child(3){animation-delay:.6s}
.caption{color:var(--muted);font-size:.95rem}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.35)}}
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;color:var(--muted)}
.site-footer .container{display:flex;justify-content:space-between;align-items:center}
.site-footer a{color:var(--gold)}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
  .nav a{margin-left:14px}
}
/* --- fix hero buttons clickability --- */
.hero { position: relative; }
.hero .glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero .hero-inner { position: relative; z-index: 1; }
.cta-group .btn { position: relative; z-index: 2; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; }
/* --- end fix --- */