:root{
  --bg: #0b1020;
  --card: #11162a;
  --text: #e8ebf7;
  --muted: #9aa4c2;
  --brand: #7aa2ff;
  --accent: #69e0c9;
  --ring: rgba(122,162,255,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(180deg, #0a0f1e 0%, #0e1430 100%);
  color: var(--text);
  line-height:1.6;
}
a{color: var(--brand); text-decoration:none}
a:hover{ text-decoration: underline }

.container{ width: min(1100px, 92%); margin: 0 auto; }

.site-header{
  position: sticky; top:0; z-index:1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(10,15,30,.65);
  border-bottom: 1px solid rgba(122,162,255,.12);
}
.site-header .container{
  display:flex; align-items:center; gap: 1rem;
  padding: .8rem 0;
}
.brand{
  font-weight: 800; letter-spacing:.2px; color: var(--text);
  padding:.4rem .6rem; border-radius:.6rem;
}
.brand:hover{ background: rgba(122,162,255,.08); text-decoration:none }

.nav{ display:flex; align-items:center; gap:.4rem; margin-left:auto }
.nav a.nav-link, .dropdown-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem .75rem; border-radius:.6rem; border:1px solid transparent;
  color: var(--text);
}
.nav a.nav-link:hover, .dropdown-toggle:hover{
  background: rgba(122,162,255,.08);
  text-decoration:none;
}
.nav a.nav-link.active, .dropdown-toggle.active{
  border-color: var(--ring);
  background: rgba(122,162,255,.12);
  box-shadow: 0 0 0 .25rem var(--ring);
}

.dropdown{ position:relative }
.dropdown .dropdown-toggle{
  background: rgba(122,162,255,.05);
}
.dropdown .dropdown-menu{
  position: absolute; top: 100%; left: 0;
  display:none; min-width: 14rem;
  background: var(--card);
  border:1px solid rgba(122,162,255,.15);
  border-radius: .8rem;
  padding: .4rem; margin-top:.3rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.dropdown.open .dropdown-menu{ display:block }
.dropdown:hover .dropdown-menu{ display:block }
.dropdown-menu a{
  display:block; padding:.55rem .7rem; border-radius:.6rem; color: var(--text);
}
.dropdown-menu a:hover{ background: rgba(122,162,255,.08); text-decoration:none }
.dropdown-menu a.active{ background: rgba(105,224,201,.12); border:1px solid rgba(105,224,201,.35) }

.nav-toggle{
  display:none;
  margin-left:auto;
  background: transparent; border:1px solid rgba(122,162,255,.25);
  color: var(--text); padding:.5rem .7rem; border-radius:.6rem;
}
.nav.open{ display:flex }

@media (max-width: 860px){
  .nav{ display:none; position:absolute; right:4%; top:64px; flex-direction:column; align-items:stretch; background: var(--card); padding:.6rem; border-radius:.8rem; border:1px solid rgba(122,162,255,.15) }
  .nav a.nav-link, .dropdown-toggle{ width:100% }
  .dropdown .dropdown-menu{ position:static; display:none; box-shadow:none; border:none; background: transparent; padding:0; margin:0 }
  .dropdown.open .dropdown-menu{ display:block }
  .nav-toggle{ display:inline-flex }
}

.content{ padding: 2rem 0 4rem }
.hero{
  background: radial-gradient(1000px 300px at 20% 0%, rgba(122,162,255,.15), transparent 40%),
              radial-gradient(1000px 300px at 80% 0%, rgba(105,224,201,.12), transparent 40%);
  border:1px solid rgba(122,162,255,.12);
  border-radius:1.2rem; padding:2rem; margin-top:1rem;
}
h1{ font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height:1.2; margin:0 0 .75rem 0 }
h2{ font-size: clamp(1.35rem, 1.8vw, 1.6rem); margin:1.4rem 0 .6rem 0 }
.lead{ color: var(--muted); font-size: 1.1rem }
.hero-list{ margin:.6rem 0 0 0 }
.hero-list li{ margin:.25rem 0 }

.steps{ padding-left:1.25rem }
.steps li{ margin:.4rem 0 }

.site-footer{
  border-top: 1px solid rgba(122,162,255,.12);
  padding: 1.2rem 0; color: var(--muted);
}