:root{
  --primary:#2f3ec9; --primary-600:#2a37b5; --primary-700:#232e98;
  --bg:#f6f7fb; --card:#ffffff; --text:#111318; --muted:#6b7280; --border:#e5e7eb;
  --radius:14px; --shadow:0 10px 30px rgba(22,28,45,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, #e8ebff 0%, transparent 40%) no-repeat, var(--bg);
  line-height:1.58;
}
img{max-width:100%; height:auto}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:24px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--primary); color:#fff; border:none; border-radius:12px;
  padding:12px 18px; font-weight:600; box-shadow:var(--shadow); cursor:pointer;
  transition:.18s transform ease,.18s background-color ease;}
.btn:hover{background:var(--primary-600); transform:translateY(-1px)}
.btn-outline{background:#fff; color:var(--primary); border:1px solid var(--primary); box-shadow:none}
.btn-outline:hover{background:#f2f4ff}

/* Cards / sections */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow)}
.hero-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow)}
.section{padding:44px 0}
.kicker,.eyebrow{font-weight:700; color:var(--primary); letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.muted{color:var(--muted)}
h1{font-size:44px; line-height:1.1; margin:8px 0 12px}
h2{margin:6px 0 8px}
h3{margin:6px 0}
.status-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  border-radius:999px; background:rgba(47,62,201,.12); color:var(--primary); font-weight:600; font-size:14px}
.status-pill--beta::before{content:"●"; font-size:10px; color:#16a34a}
.status-grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:24px}
.status-card{position:relative; display:flex; flex-direction:column; gap:12px}
.status-card__badge{display:inline-flex; align-items:center; gap:8px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:12px; color:var(--primary); background:rgba(47,62,201,.08); padding:8px 12px; border-radius:999px}
.status-card__badge::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--primary)}
.status-card__link{font-weight:600; color:var(--primary)}
.status-card.is-current{border:2px solid var(--primary); box-shadow:0 16px 32px rgba(47,62,201,.15)}
.status-card.is-current .status-card__badge{background:var(--primary); color:#fff}
.status-card.is-current .status-card__badge::before{background:#34d399}
.waitlist-card{display:grid; gap:28px; grid-template-columns:1.2fr 1fr; align-items:flex-start}
.waitlist-card__copy{display:flex; flex-direction:column; gap:12px}
.waitlist-form{display:grid; gap:14px}
.waitlist-form label{font-weight:600; display:flex; flex-direction:column; gap:6px; color:var(--text)}
.waitlist-form .label-title{display:inline-flex; align-items:center; gap:6px}
.waitlist-form .required{color:#dc2626; font-weight:700}
.waitlist-form .input-row{display:inline-flex; align-items:center; gap:6px}
.waitlist-form input,.waitlist-form select{padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  font:inherit; background:#fff; transition:border-color .18s ease, box-shadow .18s ease}
.waitlist-form input:focus,.waitlist-form select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,62,201,.15)}
.waitlist-form input::placeholder{color:#9ca3af}
.waitlist-form label.waitlist-checkbox{display:flex; flex-direction:row; align-items:center; gap:8px; font-weight:500; color:var(--muted)}
.waitlist-form label.waitlist-checkbox input{width:18px; height:18px; order:0}
.waitlist-submit{justify-self:start}
.waitlist-feedback{min-height:20px; margin:0}
.waitlist-feedback.is-success{color:#059669}
.waitlist-feedback.is-error{color:#dc2626}
.waitlist-meta{font-size:14px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:radial-gradient(900px 400px at 90% -40%, #e8ebff 0%, transparent 45%) no-repeat, var(--bg);
  border-bottom:1px solid var(--border); backdrop-filter:saturate(1.2) blur(6px);
}
.site-header__bar{max-width:1100px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.site-header__brand{display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700}
.site-header__brand img{height:38px}
.site-header__nav{display:flex; align-items:center; gap:16px}
.site-header__nav a{color:var(--text); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:10px}
.site-header__nav a:hover{background:#f2f4ff}
.site-header__cta{background:var(--primary); color:#fff !important; box-shadow:var(--shadow);
  border-radius:12px; padding:10px 14px; text-decoration:none}
.site-header__cta:hover{filter:brightness(.95)}
.site-header__menu{display:none; border:1px solid var(--border); background:var(--card); color:var(--text);
  border-radius:12px; padding:8px}

/* Footer */
.site-footer{border-top:1px solid var(--border); color:var(--muted); padding:24px 0 40px; margin-top:44px}
.site-footer__row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px}

/* Layout bits for index */
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; padding:24px 0 10px}
.grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.steps{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.step .num{width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--primary); color:#fff; font-weight:700; margin-bottom:8px; box-shadow:0 8px 18px rgba(47,62,201,.25)}
.phone{aspect-ratio:9/19.5; background:#0b1022; border-radius:28px; border:10px solid #0b1022; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; overflow:hidden}

/* Demo video placeholder */
.video-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#6b7280; background:repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0, rgba(0,0,0,.02) 10px, transparent 10px, transparent 20px);
  font-weight:600; letter-spacing:.02em;
}

/* Modal (Coming Soon) */
.modal-overlay{position:fixed; inset:0; background:rgba(17,19,24,.6); display:none; align-items:center; justify-content:center; z-index:1000}
.modal-overlay.is-open{display:flex}
.modal{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); max-width:460px; width:92%}
.modal h3{margin:0 0 8px}
.modal p{margin:0}
.modal .actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}

/* Responsive */
@media (max-width:920px){
  .site-header__menu{display:inline-flex}
  .site-header__nav{position:absolute; left:0; right:0; top:64px; display:none; flex-direction:column; gap:8px;
    background:var(--card); border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:12px 16px}
  .site-header__nav.is-open{display:flex}
  .site-header__nav a{width:100%}
  .hero{grid-template-columns:1fr; gap:22px}
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .status-grid{grid-template-columns:1fr 1fr}
  .waitlist-card{grid-template-columns:1fr}
  h1{font-size:36px}
}
@media (max-width:540px){
  .grid{grid-template-columns:1fr}
  .status-grid{grid-template-columns:1fr}
}