:root{
  --bg: #0b0710;
  --accent: #f2b400;
  --muted: #e9e6e1;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;background:var(--bg);color:var(--muted)}

.hero{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:3rem}

.card{width:min(820px,94%);display:flex;flex-direction:column;gap:0;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));border-radius:14px;padding:2rem 1.6rem;box-shadow:0 18px 50px rgba(0,0,0,0.6);align-items:center;text-align:center}

.content{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0}
.content .logo{max-width:220px;width:48%;height:auto;margin:0 0 1rem 0;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.6))}

h1{font-size:clamp(1.8rem,4vw,3rem);margin:.2rem 0;color:var(--accent);letter-spacing:1px;text-shadow:0 6px 20px rgba(0,0,0,0.6)}
p{margin:.6rem 0 1.1rem;color:rgba(233,230,225,0.95);font-size:1.05rem;line-height:1.45}

.coming-soon{display:inline-block;padding:.6rem 1.1rem;border-radius:999px;background:linear-gradient(90deg, rgba(242,180,0,0.12), rgba(242,180,0,0.06));color:var(--accent);font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,0.45);transition:transform .22s ease}
.coming-soon:hover{transform:translateY(-4px)}

.poster{display:none}

footer{height:56px;display:flex;align-items:center;justify-content:center;color:rgba(233,230,225,0.72);font-size:.95rem;background:linear-gradient(180deg,transparent, rgba(0,0,0,0.25))}

@media (max-width:900px){
  .card{flex-direction:column}
  .poster{order:-1}
  .content .logo{width:56%;margin-bottom:1rem}
}

@media (max-width:520px){
  h1{font-size:1.6rem}
  p{font-size:1rem}
  .card{padding:.8rem}
}