:root{
  /* Blue palette to match the site */
  --bg:#050811;
  --panel:#0A0F1A;
  --txt:#F2F7FF;
  --muted:#BED2EE;
  --p1:#0EA5FF;      /* electric blue */
  --p2:#2563EB;      /* deep blue */
  --glass:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--txt);
}

/* Navbar accents stay blue (no purple) */
header.navbar.scrolled{box-shadow:0 0 20px rgba(14,165,255,.25)}
header.navbar nav a::after{background:linear-gradient(90deg,var(--p1),var(--p2))}
header.navbar .cta{background:linear-gradient(90deg,var(--p1),var(--p2))}

/* Background FX */
.fx{position:fixed; inset:0; z-index:-1; overflow:hidden}
.stars{
  --dot:radial-gradient(1px 1px at 1px 1px, rgba(255,255,255,.28), transparent 60%);
  background:var(--dot),var(--dot),var(--dot),var(--dot);
  background-size:120px 120px,180px 180px,300px 300px,420px 420px;
  animation: drift 40s linear infinite; opacity:.18;
}
.glow{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 75% 10%, rgba(14,165,255,.16), transparent 60%),
    radial-gradient(600px 340px at 10% 30%, rgba(37,99,235,.12), transparent 60%);
}
.mesh{position:absolute; inset:0; background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px);
  mask-image: radial-gradient(80% 60% at 50% 40%, black, transparent 85%);
}
@keyframes drift{to{background-position:200px 300px,260px 120px,400px 160px,520px 200px}}

/* Layout */
.cs{padding-top:120px}
.wrap{width:min(1100px,92%); margin:auto}

/* Hero */
.hero{min-height:70vh; display:grid; place-items:center; text-align:center}
.kicker{letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#BFE6FF; font-size:.85rem}
.hero h1{font-size:clamp(2.4rem,5.2vw,3.6rem); margin:.4rem 0 1rem}
.lede{color:#D9ECFF; max-width:70ch; margin:0 auto 1.2rem}

.actions{display:flex; gap:12px; justify-content:center; margin:14px 0 10px}
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700; padding:.85rem 1.25rem}
.btn-primary{background:linear-gradient(90deg,var(--p1),var(--p2)); color:#00121e; box-shadow:0 12px 28px rgba(14,165,255,.25)}
.btn-ghost{border:1px solid var(--glass); color:#EAF6FF; background:#0b1420}

.next{list-style:none; padding:0; margin:18px 0 0; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; color:#CFE6FF}
.next li{border:1px solid var(--glass); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border-radius:999px; padding:.45rem .8rem}

/* FAQ */
.faq{padding:40px 0 80px}
.faq h2{text-align:center; margin:0 0 18px}
.qa{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.qa > div{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass); border-radius:16px; padding:16px 18px;
}
.qa h3{margin:0 0 .35rem}
.qa p{margin:0; color:#D7E7FF}

/* Footer headings blue */
footer h3{color:var(--p1)}

/* Responsive */
@media (max-width: 980px){
  .qa{grid-template-columns:1fr}
  .hero{min-height:64vh}
}