:root{
  --red:#e01820;
  --hot:#ff252d;
  --white:#f5f5f5;
  --muted:#c7c7c7;
  --line:rgba(255,255,255,.10);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% 5%,rgba(120,0,0,.16),transparent 28%),
    linear-gradient(180deg,#080808 0%,#030303 100%);
}

.page{
  width:min(1120px,100%);
  margin:0 auto;
  padding:20px 16px 44px;
}

/* CLEAN HEADER */
.hero{
  min-height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:42px 20px 38px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 58%,rgba(190,0,0,.10),transparent 34%),
    linear-gradient(180deg,#0a0a0a,#060606);
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}

.hero-topline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:var(--hot);
  font-size:12px;
  font-weight:900;
  letter-spacing:6px;
}

.hero-topline span{
  width:90px;
  height:1px;
  background:var(--red);
}

.hero h1{
  margin:18px 0 0;
  font-size:clamp(58px,8.4vw,104px);
  line-height:.92;
  letter-spacing:-3px;
  font-weight:1000;
  color:#f5f5f5;
}

.coming-soon{
  margin-top:7px;
  color:var(--red);
  font-size:clamp(34px,4.8vw,58px);
  line-height:1;
  font-weight:1000;
  font-style:italic;
  letter-spacing:-2px;
  transform:skew(-8deg);
  text-shadow:0 0 18px rgba(255,0,0,.20);
}

.accent{
  margin:26px 0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.accent-line{
  width:120px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--red));
}

.accent-line:last-child{
  background:linear-gradient(90deg,var(--red),transparent);
}

.accent-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hot);
  box-shadow:0 0 18px rgba(255,37,45,.75);
}

.hero-copy{
  margin:0;
  color:#d5d5d5;
  font-size:clamp(13px,1.8vw,17px);
  font-weight:600;
}

/* COUNTDOWN */
.countdown-shell{
  max-width:900px;
  margin:22px auto 24px;
  padding:16px 14px 18px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
  border:1px solid var(--line);
  border-top:3px solid var(--red);
  box-shadow:0 18px 60px rgba(0,0,0,.38);
}

.countdown-title{
  margin-bottom:12px;
  color:#e5e5e5;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:3px;
  font-size:12px;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.unit{
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.08);
  padding:13px 8px 11px;
}

.num{
  display:block;
  font-size:clamp(30px,5vw,50px);
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.label{
  display:block;
  margin-top:6px;
  color:var(--hot);
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* POSTER + LOWER PAGE */
.poster-wrap{
  display:flex;
  justify-content:center;
  margin:0 auto 22px;
}

.poster{
  display:block;
  width:min(100%,820px);
  height:auto;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 100px rgba(0,0,0,.70);
}

.launch-card{
  max-width:820px;
  margin:0 auto;
  padding:24px 18px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));
  border:1px solid var(--line);
}

.launch-card h2{
  margin:0;
  font-size:clamp(26px,4vw,44px);
  text-transform:uppercase;
}

.launch-card h2 span{color:var(--hot)}

.launch-card p{
  margin:10px auto 0;
  max-width:650px;
  color:var(--muted);
  line-height:1.6;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.12);
  background:#111;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hot);
  box-shadow:0 0 16px rgba(255,42,47,.9);
}

footer{
  margin-top:24px;
  text-align:center;
  color:#777;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}

@media(max-width:640px){
  .page{padding:10px 8px 28px}
  .hero{min-height:270px;padding:30px 12px 28px}
  .hero-topline{gap:10px;font-size:10px;letter-spacing:4px}
  .hero-topline span{width:48px}
  .hero h1{font-size:clamp(48px,14vw,72px)}
  .coming-soon{font-size:clamp(28px,9vw,44px)}
  .accent{margin:20px 0 16px}
  .accent-line{width:70px}
  .countdown-shell{padding:14px 10px}
  .countdown{gap:6px}
  .unit{padding:11px 4px 9px}
  .label{font-size:8px;letter-spacing:1.2px}
  .launch-card{padding:20px 14px}
}