:root{
  --bg-1: #071022;
  --bg-2: #0b1220;
  --card: rgba(255,255,255,0.03);
  --muted: #98a0b0;
  --accent: #7c5cff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, #0c1220 0%, transparent 20%), radial-gradient(900px 500px at 90% 90%, #071026 0%, transparent 20%), linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e7eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;align-items:center;justify-content:center;padding:3rem;
}

.site-root{width:100%;max-width:960px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  border-radius:16px;padding:clamp(1.25rem, 2.5vw, 2.5rem);
  box-shadow: 0 6px 30px rgba(2,6,23,0.6);
}

.hero h1{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-0.02em}
.lead{margin-top:0.5rem;color:var(--muted);font-size:clamp(1rem,2.5vw,1.125rem)}

.info{margin-top:1.25rem}
.media-coming{
  display:inline-block;padding:0.5rem 0.9rem;border-radius:999px;
  background: linear-gradient(90deg, rgba(124,92,255,0.12), rgba(124,92,255,0.06));
  color:var(--accent);font-weight:600;font-size:0.95rem;margin:0
}

.foot{margin-top:1.25rem;color:var(--muted)}

/* Responsive: reduce padding on small screens */
@media (max-width:520px){
  body{padding:1.25rem}
  .card{padding:1rem}
  .media-coming{font-size:0.9rem;padding:0.4rem 0.8rem}
}