:root{
  --bg-1:#071511;
  --bg-2:#0b1d17;
  --capy:#e58a27;
  --accent:#16c27f;
  --ink:#e8f1ec;
  --muted:#a5b7b0;
  --glass: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
}

/* ==== BASE ==== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background: radial-gradient(60rem 60rem at 10% -10%, #083226 0%, transparent 60%),
              radial-gradient(50rem 50rem at 110% 10%, #0b503b 0%, transparent 60%),
              linear-gradient(180deg,var(--bg-2),var(--bg-1));
  font-family:'Space Grotesk',sans-serif;
  overflow:hidden;
}

/* ==== BLOBS ==== */
.bg{position:fixed; inset:0; pointer-events:none; filter: blur(40px) saturate(120%);}
.blob{position:absolute; border-radius:50%; opacity:.55; transform:translate(-50%,-50%); animation: float 16s ease-in-out infinite}
.b1{left:18%; top:22%; width:520px; height:520px; background: radial-gradient(circle at 30% 30%, #0ee29a, transparent 70%)}
.b2{left:78%; top:15%; width:420px; height:420px; background: radial-gradient(circle at 70% 40%, #1aa067, transparent 70%); animation-delay: -6s}
.b3{left:60%; top:78%; width:560px; height:560px; background: radial-gradient(circle at 50% 60%, #e58a27, transparent 70%); animation-delay: -10s}
@keyframes float{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(calc(-50% + 20px), calc(-50% - 15px))}
}

/* ==== HERO ==== */
.hero{
  position:relative;
  max-width:980px;
  width:92%;
  margin: 6vh auto 0;
  padding: 30px 28px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  backdrop-filter: blur(10px);
  text-align:center;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

/* ==== LOGO ==== */
.logo-wrap{display:flex; justify-content:center; align-items:center; margin: -4px 0 10px}
.brand{
  width: 460px; max-width: 90%;
  height:auto; display:block;
  transition: transform .35s ease;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.35));
}
.brand:hover{ transform: scale(1.04) }

/* ==== TEXT ==== */
.title{
  font-family:'Archivo Black', sans-serif;
  font-size: clamp(2rem, 4.8vw, 3.8rem);
  line-height:1.1;
  margin: 6px 0 10px;
  color: var(--capy);
}
.subtitle{
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--muted);
  margin: 0 0 22px;
}

/* ==== COUNTDOWN ==== */
.countdown{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin: 6px auto 22px;
}
.cell{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 110px;
}
.num{
  font-family:'Archivo Black', sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  color: var(--accent);
  display:block;
}
.lbl{
  display:block; margin-top:4px; font-size:.85rem; color:var(--muted);
}

/* ==== BUTTONS ==== */
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; text-decoration:none;
  font-weight:700; letter-spacing:.4px;
  border:1px solid var(--stroke); color:var(--ink); background:rgba(0,0,0,.12);
}
.btn[aria-disabled="true"]{cursor:not-allowed; opacity:.75}
.btn.primary{ background: var(--accent); color:#0a1c15; border-color: transparent }
.btn.ghost:hover{ background: rgba(255,255,255,.08) }

.foot{ margin-top: 8px; color: var(--muted); font-size:.9rem }

@media (max-width:640px){
  .hero{padding:22px 16px}
  .brand{max-width:92%}
}