:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#0b74de;
  --muted:#9aa6b2;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(11,116,222,0.08), transparent 8%),
    radial-gradient(800px 400px at 90% 90%, rgba(11,116,222,0.04), transparent 10%),
    var(--bg);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.container{
  width:100%;
  max-width:920px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:32px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:18px;
}
.logo{flex:0 0 48px}
.brand h1{
  margin:0;
  font-size:20px;
  letter-spacing:0.6px;
}
.tag{margin:0;color:var(--muted);font-size:13px}

.hero{text-align:center;padding:26px 16px;border-radius:10px;background:var(--glass);margin-bottom:8px}
.hero h2{margin:0 0 8px;font-size:28px}
.hero p{margin:0 0 18px;color:var(--muted)}

.countdown{display:flex;gap:12px;justify-content:center;margin:16px 0 18px}
.countdown > div{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:10px 14px;border-radius:10px;min-width:72px;
}
.countdown span{display:block;font-size:20px;font-weight:600}
.countdown small{display:block;color:var(--muted);font-size:12px;margin-top:6px}

.waitlist{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.waitlist input{
  min-width:260px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);
  background:transparent;color:inherit;font-size:14px;outline:none;
}
.waitlist button{
  padding:12px 16px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:600;
  cursor:pointer;
}
.note{color:var(--muted);margin-top:12px}

.social{display:flex;gap:12px;justify-content:center;margin-top:18px}
.social a{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.02)}

.footer{text-align:center;margin-top:8px;color:var(--muted);font-size:13px}

/* screen reader only */
.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:520px){
  .countdown{gap:8px}
  .countdown > div{min-width:56px;padding:8px 10px}
  .hero h2{font-size:22px}
}