/* Modern stylish styles — responsive */
:root{
  --bg1:#071026;
  --bg2:#071a2b;
  --accent1:#06b6d4;
  --accent2:#7c3aed;
  --muted:rgba(255,255,255,0.8);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{
  background: radial-gradient(800px 400px at 10% 10%, rgba(124,58,237,0.06), transparent),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.stage{position:relative;width:100%;max-width:1040px}
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px;
  padding:34px;
  box-shadow: 0 20px 50px rgba(2,6,23,0.6);
  overflow:hidden;
  backdrop-filter: blur(6px);
}
.brand{display:flex;gap:16px;align-items:center;margin-bottom:6px}
.logo img{border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));padding:12px}
.company{font-size:12px;color:#9fc9d5;letter-spacing:1px}
h1{margin:0;font-size:28px}
.tagline{color:#cfe8f2;margin:14px 0 18px;max-width:65%}
.subscribe{display:flex;gap:10px;flex-wrap:wrap}
.subscribe input{
  flex:1;min-width:200px;padding:12px 14px;border-radius:12px;border:none;background:rgba(255,255,255,0.03);color:inherit;outline:none;
}
.btn{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;padding:12px 16px;border-radius:12px;color:#021127;font-weight:700;cursor:pointer;
}
.info{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.info a{background:rgba(255,255,255,0.03);padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none}
footer{margin-top:18px;font-size:13px;color:#8fb8c9}

/* Countdown */
.countdown{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.unit{background:rgba(255,255,255,0.02);padding:12px 14px;border-radius:10px;min-width:72px;text-align:center}
.num{font-weight:800;font-size:18px}
.lbl{font-size:11px;color:#9fbfcf;margin-top:6px}

/* Background decor */
.bg-decor{
  position:absolute;right:-150px;top:-120px;width:520px;height:520px;
  background:conic-gradient(from 180deg at 50% 50%, rgba(124,58,237,0.12), rgba(6,182,212,0.06), transparent);
  filter: blur(40px);transform:rotate(12deg);pointer-events:none;
}

/* Animated rocket */
.anim-wrap{display:flex;align-items:center;justify-content:center;margin:18px 0}
.rocket{width:72px;height:72px;border-radius:50%;position:relative;background:linear-gradient(180deg,#fff 0%, #f1f5f9 40%, #cbd5e1 100%);box-shadow:0 8px 30px rgba(2,6,23,0.4);transform:translateY(0);animation:float 3s ease-in-out infinite}
.rocket::after{content:'';position:absolute;left:18px;right:18px;bottom:-12px;height:28px;border-radius:50%/20px;background:linear-gradient(90deg,var(--accent1),var(--accent2));opacity:0.18}
.flame{position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;width:18px;height:28px;border-radius:10px 10px 16px 16px;background:linear-gradient(180deg,#ff8a00,#ff3d00);box-shadow:0 6px 20px rgba(255,90,0,0.35);animation:flame 0.36s steps(3) infinite}
@keyframes flame{0%{transform:translateX(-50%) scaleY(0.9)}50%{transform:translateX(-50%) scaleY(1.15)}100%{transform:translateX(-50%) scaleY(0.9)}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* Responsive */
@media(max-width:720px){
  .card{padding:20px}
  .tagline{max-width:100%}
  h1{font-size:22px}
}
