:root{
  --bg:#0B1220;
  --ink:#0F172A;
  --panel:#0f172a;
  --card:#0e1526;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#2F6DF6;
  --accent:#22C55E;
  --amber:#f59e0b;
  --blue:#3b82f6;
  --slate:#64748b;
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#0B1220}
a{color:#cde0ff;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;background:rgba(11,18,32,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav a{margin-left:18px;color:#dbeafe;font-weight:500}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-dot{width:12px;height:12px;border-radius:50%;background:var(--brand);display:inline-block}
.brand-text{letter-spacing:.2px}

.hero{padding:72px 0;background:radial-gradient(1200px 600px at 20% -10%, rgba(47,109,246,.25), transparent)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.lead{font-size:18px;color:#cbd5e1;max-width:46ch}
.cta{display:flex;gap:10px;margin-top:18px}
.cta input{flex:1;padding:14px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0d162a;color:#fff}
.cta button{padding:14px 18px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;cursor:pointer}
.cta button:hover{filter:brightness(1.1)}
.mini{font-size:12px;color:var(--muted);margin-top:8px}
.center{text-align:center}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badges span{border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:12px;color:#cbd5e1}

.hero-card{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));padding:18px}
.mock{border-radius:12px;background:#0b1324;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.mock-bar{height:34px;background:#0e162a;border-bottom:1px solid rgba(255,255,255,.06)}
.mock-body{display:grid;grid-template-columns:1fr .9fr;gap:0}
.mock-list{padding:14px}
.mock-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px dashed rgba(255,255,255,.07);color:#d6e0f5}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-green{background:var(--accent)}
.dot-blue{background:var(--blue)}
.dot-amber{background:var(--amber)}
.dot-slate{background:var(--slate)}
.mock-queue{border-left:1px solid rgba(255,255,255,.06);background:#0c1528;padding:14px}
.queue-head{font-weight:700;margin-bottom:8px}
.queue-item{padding:8px 6px;border:1px solid rgba(255,255,255,.06);margin-bottom:8px;border-radius:8px;color:#cbd5e1}

.section{padding:72px 0}
.section.alt{background:#0a1326}
h2{font-size:32px;margin:0 0 10px}
.sub{color:#cbd5e1;max-width:60ch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.card{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:#cbd5e1}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.step{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:14px}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:10px}

.price-card{max-width:520px;margin:18px auto 0;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.price-head{font-weight:700;margin-bottom:8px}
.price-val{font-size:40px;font-weight:800}
.price-val span{font-size:14px;color:var(--muted)}
.price-list{margin:10px 0 0 18px;color:#cbd5e1}
.price-list li{margin:6px 0}

.faq details{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;margin:10px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.faq summary{cursor:pointer;font-weight:600}

.cta-final{padding:72px 0;background:radial-gradient(1200px 600px at 80% -10%, rgba(34,197,94,.18), transparent)}
.footer{border-top:1px solid rgba(255,255,255,.06);padding:22px 0}
.footer-row{display:flex;align-items:center;justify-content:space-between}
.muted{color:var(--muted)}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .nav nav{display:none}
}
.logo-img{
  height: 28px;   /* controls visual size in the nav */
  width: auto;    /* keep aspect ratio */
  display: block; /* avoid baseline gaps */
}
/* One-form layout that matches your style */
.cta-and-prefs .cta { display:flex; gap:10px; margin-top:18px }
.cta-and-prefs .adv{
  margin-top:14px; padding:14px; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.cta-and-prefs .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start }
.cta-and-prefs select, .cta-and-prefs textarea{
  background:#0d162a; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  color:#fff; padding:12px; min-width:400px;
}
.inline{ display:flex; align-items:center; gap:8px; margin-top:10px; color:#cbd5e1 }
.chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#cbd5e1; cursor:pointer;margin-bottom: 12px;
}
.chip input{ accent-color:var(--brand) }
.btn-link{
  display:inline-block; padding:14px 18px; border-radius:10px; font-weight:600;
  background:var(--brand); color:#fff; text-decoration:none;
}
.btn-link:hover{ filter:brightness(1.1); }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width: 640px){
  .cta-and-prefs .cta { flex-direction: column; }
  .cta-and-prefs .cta input[type="email"],
  .cta-and-prefs .cta button { width: 100%; }
}

.ui-demo{
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 6px 28px rgba(0,0,0,.35);
  display:block;
}