.landing { margin: 0; background: #0b1220; color: #e2e8f0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; }
.lnav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); background: rgba(11,18,32,.85); border-bottom: 1px solid rgba(255,255,255,.06); }
.lnav-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none; }
.brand span { color: #818cf8; }
.lnav-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lnav-links a { color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: .9rem; }
.lnav-links a:hover { color: #fff; }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; }
.btn.small { padding: 8px 12px; font-size: .85rem; }
.hero {
  padding: 72px 20px 64px;
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(79,70,229,.45), transparent),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(14,165,233,.25), transparent),
    #0b1220;
}
.hero-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.eyebrow { color: #a5b4fc; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 12px 0 16px; color: #fff; }
.lead { color: #94a3b8; font-size: 1.05rem; line-height: 1.6; margin: 0 auto 24px; max-width: 640px; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 560px; margin: 0 auto; }
.hero-stats div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; }
.hero-stats strong { display: block; color: #fff; font-size: 1.1rem; }
.hero-stats span { font-size: .8rem; color: #94a3b8; }
.section { padding: 56px 20px; }
.section.alt { background: rgba(255,255,255,.03); }
.section-inner { max-width: 1000px; margin: 0 auto; }
.section h2 { text-align: center; color: #fff; font-size: 1.6rem; margin: 0 0 28px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 22px; color: #cbd5e1;
}
.card h3 { color: #fff; margin: 8px 0 8px; }
.card p, .card ul { margin: 0; line-height: 1.55; font-size: .95rem; }
.card ul { padding-left: 18px; margin-bottom: 14px; }
.card code { background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 4px; font-size: .85rem; }
.ico { font-size: 1.5rem; }
.steps { max-width: 640px; margin: 0 auto 24px; padding-left: 20px; color: #cbd5e1; line-height: 1.7; }
.steps li { margin-bottom: 10px; }
.center-cta, .center { text-align: center; }
.center-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: #94a3b8; margin-bottom: 18px; }
.lfoot { padding: 28px 20px; border-top: 1px solid rgba(255,255,255,.06); color: #64748b; font-size: .9rem; text-align: center; }
.lfoot a { color: #94a3b8; margin: 0 6px; }
@media (max-width: 800px) {
  .cards3, .split, .hero-stats { grid-template-columns: 1fr; }
}