:root {
  --bg: #0f1220;
  --panel: #171b2f;
  --text: #eef2ff;
  --muted: #b6bfd9;
  --primary: #7c8cff;
  --accent: #3ddc97;
  --danger: #ff5d73;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #262d52 0%, var(--bg) 60%);
  color: var(--text);
}
.container { width: min(1050px, 92%); margin: 0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 1.2rem 0; }
.logo { font-weight: 800; font-size: 1.2rem; }
.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items:center; padding: 2.5rem 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 .7rem; line-height: 1.08; }
.sub { color: var(--muted); font-size: 1.1rem; max-width: 55ch; }
.cta-row { display:flex; gap:.7rem; margin-top: 1rem; flex-wrap:wrap; }
.btn { border:0; border-radius: 10px; padding:.7rem 1rem; font-weight:600; text-decoration:none; display:inline-block; }
.btn-primary { background: var(--primary); color: white; }
.btn-ghost { background: transparent; color: var(--text); border:1px solid #3a446f; }
.phone-mock { background: var(--panel); border:1px solid #2d3660; border-radius: 20px; padding: 1rem; position: relative; min-height: 260px; }
.card { position:absolute; left:50%; transform: translateX(-50%); width: 72%; border-radius:14px; padding: 1rem; text-align:center; font-weight: 700; }
.card.main { top: 70px; background: #222a4b; }
.card.keep { top: 35px; background: rgba(61,220,151,.12); color: var(--accent); border: 1px solid rgba(61,220,151,.4); }
.card.trash { top: 105px; background: rgba(255,93,115,.12); color: var(--danger); border: 1px solid rgba(255,93,115,.4); }
.how { display:grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin-top: 1rem; }
.step { background: #141935; border:1px solid #2b3460; border-radius: 14px; padding: .9rem; }
.step h3 { margin:.2rem 0 .4rem; }
.step p { color: var(--muted); margin: 0; }
.waitlist { margin: 2rem auto 2.5rem; background:#141935; border:1px solid #2b3460; border-radius:14px; padding:1rem; }
.waitlist-form { display:flex; gap:.6rem; flex-wrap:wrap; }
.waitlist-form input { flex:1; min-width: 240px; border-radius:10px; border:1px solid #354073; background:#0f142d; color:white; padding:.7rem; }
.foot { color:#98a2c8; padding-bottom: 1.5rem; }
.foot a { color:#cfd6f4; }
.legal {
  max-width: 860px;
  background: #141935;
  border: 1px solid #2b3460;
  border-radius: 14px;
  padding: 1.1rem;
  margin-bottom: 1.2rem;
}
.legal h1 { margin-top: 0; }
.legal h2 { margin-top: 1.1rem; font-size: 1.05rem; }
.legal p, .legal li { color: var(--muted); line-height: 1.6; }
.legal a { color: #cfd6f4; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
}