
:root {
  --gold: #D4AF37;
  --gold-2: #E5C45A;
  --muted: #A1A1AA;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #000; color: #E5E7EB; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
a { color: inherit; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 18px 0; gap: 12px; }
.logo { display:flex; align-items:center; gap:12px; }
.logo img { width:36px; height:36px; border-radius:50%; border:1px solid rgba(212,175,55,.4); }
.logo .title { font-weight:800; color:#fff; }
.tagline { color: var(--gold); font-style: italic; font-weight:600; font-size: 13px;}
.meta { color: #cfcfcf; font-size: 13px; white-space: nowrap; }

.grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
h1.display { font-size: clamp(34px, 6vw, 54px); line-height: 1.05; font-weight: 900; color: #fff; margin: 12px 0 14px; }
p.lead { color:#d0d0d0; max-width: 60ch; }

.box {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
}
.card { padding: 18px; }
.card h4 { color: var(--gold); margin: 0 0 6px; }

/* Countdown */
#countwrap { position: relative; display:flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.countbox {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  min-width: 90px;
  flex: 1 1 90px;
  max-width: 140px;
}
.countnum { color: var(--gold); font-weight: 800; font-size: clamp(20px, 6vw, 28px); letter-spacing: .05em; }
.countlabel { font-size: 12px; color: #b3b3b3; letter-spacing: .12em; }

/* Email form */
.input, .btn {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,11,.8);
  color: #E5E7EB;
  font-size: 15px;
}
.btn {
  background: var(--gold);
  color: #000;
  font-weight: 700;
  border-color: var(--gold);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }

.links { margin-top: 14px; color:#b3b3b3; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.link { color:#c7c7c7; text-decoration:none; }
.link:hover { color: var(--gold); }

.footer { padding: 40px 0 60px; }
.footer .status { color:#cfcfcf; }
.footer .status .gold { color: var(--gold-2); font-weight:700; }
hr.hr { border: none; border-top: 1px solid rgba(255,255,255,.06); margin: 24px 0; }

/* Launch effects */
.live-pulse { animation: goldPulse 1.2s infinite alternate; }
@keyframes goldPulse {
  from { text-shadow: 0 0 10px #D4AF37, 0 0 20px #E5C45A; }
  to   { text-shadow: 0 0 30px #E5C45A, 0 0 60px #D4AF37; }
}
.confetti { position: absolute; top: -4px; border-radius: 50%; opacity:.9; animation: fall linear forwards; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity:1; } 100% { transform: translateY(160px) rotate(720deg); opacity:0; } }

/* Responsive */
@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; gap: 20px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .meta { align-self: flex-start; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  form[name="notify"] { display:flex; flex-direction: column; gap: 10px; max-width: 640px; }
  form[name="notify"] .input, form[name="notify"] .btn { width: 100%; }
  .logo img { width:32px; height:32px; }
  .tagline { font-size: 12px; }
  .meta { font-size: 12px; color:#bdbdbd; }
}
@media (max-width: 420px) {
  .countbox { min-width: 70px; }
  .countlabel { font-size: 10px; }
}
