:root{--bg:#0b0b0f;--fg:#e8e8ea;--muted:#a1a1aa;--card:#111218;--card-border:#22232c;--accent1:#ff0033;--accent2:#6a5cff;--accent3:#a855f7;--shadow:0 10px 40px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--fg);min-height:100svh;display:grid;place-items:center;overflow:hidden}
.bg{position:fixed;inset:0;pointer-events:none;background:radial-gradient(1200px 800px at 20% 10%, rgba(255,0,51,.22), transparent 60%),radial-gradient(900px 700px at 85% 85%, rgba(255,0,51,.12), transparent 60%),radial-gradient(600px 400px at 10% 80%, rgba(255,0,51,.08), transparent 70%);filter:blur(40px) saturate(120%)}
.brand-blur{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;font-weight:800;letter-spacing:.04em;font-size:18vw;line-height:1;color:#fff;opacity:.035;filter:blur(6px)}
.center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding:24px}
.eyebrow{margin:0;color:var(--muted);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.9rem}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:16px}
.unit{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);padding:22px 18px;backdrop-filter:blur(6px)}
.value{font-weight:800;font-size:48px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.label{margin-top:6px;font-size:.8rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--accent2),var(--accent3));color:#fff;text-decoration:none;font-weight:700;padding:14px 22px;border-radius:999px;box-shadow:0 8px 24px rgba(106,92,255,.35);transition:transform .15s ease, box-shadow .15s ease}
.cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(106,92,255,.45)}
.cta:active{transform:translateY(0)}
.icon{width:20px;height:20px;fill:#fff;opacity:.95}
@media (max-width: 820px){
  .countdown{grid-template-columns:repeat(2,minmax(130px,1fr))}
  .value{font-size:44px}
}
@media (max-width: 420px){
  .countdown{grid-template-columns:repeat(2,minmax(120px,1fr));gap:12px}
  .value{font-size:38px}
}