:root{
  --bg:#06060f;
  --panel:#0e1020;
  --ink:#eaf2ff;
  --muted:#9aa6c4;
  --cyan:#3ff2ff;
  --magenta:#ff43b4;
  --green:#7fffae;
  --border:rgba(120,150,220,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(1100px 600px at 50% -8%, rgba(63,242,255,.10), transparent 60%),
    radial-gradient(900px 520px at 50% 108%, rgba(255,67,180,.10), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Rajdhani",system-ui,sans-serif;
  font-size:18px;line-height:1.55;
  display:flex;flex-direction:column;
}
h1,h2,h3,.btn,.status,.footer__logo{font-family:"Chakra Petch",system-ui,sans-serif}
a{color:inherit;text-decoration:none}

/* ---------- layout ---------- */
.wrap{
  flex:1;width:100%;max-width:1000px;margin:0 auto;
  padding:clamp(28px,6vw,72px) 24px 56px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.logo{
  width:min(560px,84%);height:auto;display:block;
  margin-bottom:18px;
}

/* coming-soon pill */
.status{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:14px;
  color:var(--cyan);
  padding:7px 16px;border:1px solid var(--border);border-radius:999px;
  background:rgba(63,242,255,.05);
  margin-bottom:30px;
}
.status .dot{
  width:9px;height:9px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ---------- trailer ---------- */
.trailer{
  width:100%;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 0 0 1px rgba(63,242,255,.10), 0 30px 80px rgba(0,0,0,.6),
             0 0 70px rgba(63,242,255,.12);
  background:#000;
}
.trailer video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}

.tag{
  color:var(--muted);font-size:clamp(17px,2.2vw,21px);
  max-width:620px;margin:26px 0 30px;
}

/* ---------- buttons ---------- */
.cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:38px}
.btn{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  padding:15px 30px;border-radius:11px;border:none;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:16px;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn__icon{flex:0 0 auto}
.btn--steam{
  background:linear-gradient(95deg,var(--cyan),#5bc0ff);
  color:#04121a;box-shadow:0 0 28px rgba(63,242,255,.40);
}
.btn--steam:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(63,242,255,.6)}
.cta__msg{min-height:1.2em;color:var(--muted);font-size:15px;letter-spacing:.5px}

/* ---------- mailing list ---------- */
.signup{width:100%;max-width:460px}
.signup__label{
  display:block;color:var(--muted);font-weight:600;letter-spacing:1px;
  text-transform:uppercase;font-size:13px;margin-bottom:10px;
}
.signup__row{display:flex;gap:10px}
.signup input{
  flex:1;min-width:0;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  color:var(--ink);font-family:inherit;font-size:16px;padding:13px 15px;
  transition:border-color .2s, box-shadow .2s;
}
.signup input::placeholder{color:#5e688a}
.signup input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(63,242,255,.15)}
.signup button{
  cursor:pointer;white-space:nowrap;
  background:transparent;border:1.5px solid var(--cyan);border-radius:10px;
  color:var(--cyan);font-family:"Chakra Petch",sans-serif;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;font-size:14px;padding:0 20px;
  transition:background .2s,color .2s;
}
.signup button:hover{background:var(--cyan);color:#04121a}
.signup__msg{min-height:1.3em;margin-top:11px;font-size:15px;letter-spacing:.4px;color:var(--muted)}

/* ---------- footer ---------- */
.footer{
  text-align:center;padding:30px 24px 40px;color:var(--muted);font-size:14px;
  border-top:1px solid var(--border);
}
.footer__logo{font-size:20px;font-weight:700;letter-spacing:2px;color:var(--ink);margin-bottom:6px}
.footer__logo span{color:var(--cyan)}
.footer__small{margin-top:6px;opacity:.7;font-size:13px}

@media (max-width:520px){
  .signup__row{flex-direction:column}
  .signup button{padding:13px 20px}
}