:root {
  --space-indigo: #22223b;
  --dusty-grape: #4a4e69;
  --lilac-ash: #9a8c98;
  --almond-silk: #c9ada7;
  --seashell: #f2e9e4;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  min-height: 100%;
  background: radial-gradient(circle at 20% 10%, rgba(34,34,59,.6) 0, rgba(0,0,0,0) 40%),
              radial-gradient(circle at 85% 0%, rgba(74,78,105,.5) 0, rgba(0,0,0,0) 40%),
              linear-gradient(135deg, var(--space-indigo), var(--dusty-grape) 60%, var(--lilac-ash) 100%);
  overflow-x: hidden;
}

.bg-shapes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .25; }
.shape1 { width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, #4a4e69, transparent 60%); top: -80px; left: -60px; }
.shape2 { width: 520px; height: 520px; background: radial-gradient(circle at 60% 40%, #9a8c98, transparent 60%); bottom: -120px; right: -120px; }
.shape3 { width: 250px; height: 250px; background: radial-gradient(circle at 50% 50%, #c9ada7, transparent 60%); top: 60%; left: 60%; transform: translate(-50%, -50%); }

.container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; }
.card { max-width: 720px; text-align: center; padding: 44px 52px; background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.25); border-radius: 28px; backdrop-filter: blur(6px); }

.brand .domain { font-family: Inter, sans-serif; font-weight: 600; font-size: 14px; color: #f7f7f7; opacity: .9;
  display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); margin-bottom: 10px; }

h1 { font-size: 64px; margin: 14px 0 6px; font-weight: 800; letter-spacing: .5px; }
.subtitle { font-size: 18px; color: rgba(255,255,255,.95); margin: 6px auto 20px; }

.countdown { font-size: 16px; color: rgba(255,255,255,.95); margin-top: 8px; }
.time { font-weight: 700; margin: 0 6px; }

.signup { display: flex; gap: .5rem; justify-content: center; align-items: center; margin-top: 14px; }
.signup input { width: 320px; max-width: 100%; padding: 12px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.14);
  color: #fff; outline: none; }
.btn { padding: 12px 18px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, #fff, #ddd); color: #111; font-weight: 700;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.status { margin-top: 12px; color: #e9f7f5; }
.social { display: flex; justify-content: center; gap: 12px; margin-top: 18px; opacity: .95; }
.social a { color: #fff; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); text-decoration: none; }

@media (max-width: 600px) {
  h1 { font-size: 42px; }
  .signup { flex-direction: column; }
  .signup input { width: 100%; }
}