:root{ --bg:#0b0d10; --card:#111419; --text:#e8ecf2; --muted:#9aa7b4; --accent:#0A84FF; }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:linear-gradient(160deg,#0b0d10 0%, #0e1216 60%, #0b0d10 100%);
      color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.container{ max-width:980px; margin:0 auto; padding:48px 24px 72px; }
.header{ display:flex; align-items:center; gap:16px; }
.header .badge{ width:100%; display:flex; align-items:center; justify-content:center; }
.header img.wordmark{ width:100%; max-width:640px; height:auto; display:block; border-radius:12px; }
.hero{ margin-top:24px; display:grid; grid-template-columns:1.1fr .9fr; gap:28px; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
       border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:28px; box-shadow:0 10px 40px rgba(0,0,0,0.4); }
h1{ font-size:44px; line-height:1.06; margin:0 0 12px; }
h1 .accent{ color: var(--accent); }
p.lead{ margin:0; font-size:18px; color:var(--muted) }
.cta{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
input[type=email]{ background:#0e1116; color:var(--text); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:14px 16px; min-width:280px; font-size:16px; }
button{ background:var(--accent); color:white; border:0; padding:14px 18px; border-radius:12px; font-weight:700; font-size:16px; cursor:pointer; }
.features{ display:grid; gap:16px; margin-top:18px}
.features .item{ display:flex; gap:12px; align-items:flex-start; color:#c8d1dc; font-size:15px}
.features .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px}
.preview{ display:flex; align-items:center; justify-content:center; }
.preview img{ width:100%; border-radius:14px; border:1px solid rgba(255,255,255,0.08) }
.footer{ margin-top:42px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px }
@media (max-width:900px){ .hero{ grid-template-columns:1fr } .header img.wordmark{max-width:100%} }
.success-message{ color:#0A84FF; margin-top:10px; font-size:14px; display:none; }
.error-message{ color:#ff6565; margin-top:10px; font-size:14px; display:none; }