:root{
  --bg:#0b1020; --fg:#e7edf7; --muted:#a9b4c6; --brand:#2c7a7b; --brand2:#ffb703;
  --card:#101731; --border:#1b2340;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0b1020, #0f1730);
  color:var(--fg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--fg); text-decoration:none}
.nav{
  max-width:1100px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.2px}
.cta{padding:10px 14px; border-radius:10px; background:var(--brand); color:white; font-weight:600}
.cta.ghost{background:transparent; border:1px solid var(--border)}
.hero{
  max-width:900px; margin:80px auto 40px; padding:0 20px; text-align:center;
}
.hero h1{font-size: clamp(32px, 6vw, 56px); margin:0 0 12px}
.sub{color:var(--muted); font-size: clamp(16px, 2.5vw, 20px)}
.form{
  margin:22px auto 8px; display:flex; gap:10px; justify-content:center; max-width:560px;
}
.form input{
  flex:1; padding:14px 16px; border-radius:10px; border:1px solid var(--border); background:#0c142a; color:var(--fg);
}
.form button{
  padding:14px 18px; border-radius:10px; border:0; background:var(--brand2); color:#0d1326; font-weight:800; cursor:pointer;
}
.form button:hover{filter:brightness(1.05)}
.bullets{list-style:none; padding:0; margin:18px 0 6px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; color:var(--muted)}
.footnote{color:var(--muted); font-size:13px; margin-top:10px}
.features{
  max-width:1100px; margin:40px auto 80px; padding:0 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 16px;
}
.card h3{margin:0 0 6px}
.footer{max-width:1100px; margin:30px auto 40px; padding:0 20px; text-align:center; color:var(--muted)}