/* Beat Bastion — raytracergame.com */
:root{
  --bg:#0f1016; --bg2:#141318; --ink:#f4f2fa; --muted:#9b97a8;
  --accent:#7b3fd4; --accent2:#a06bff; --line:#26242e;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.6}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 6vw;position:sticky;top:0;background:rgba(15,16,22,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}
.brand{font-weight:800;letter-spacing:.14em;color:var(--ink);text-decoration:none;font-size:15px}
.brand span{color:var(--accent2)}
.topbar nav{display:flex;gap:26px;align-items:center}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:14px}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.cta{border:1px solid var(--accent);color:var(--accent2);padding:7px 16px;border-radius:999px}
.topbar nav a.cta:hover{background:var(--accent);color:#fff}

/* hero */
.hero{padding:11vh 6vw 8vh;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(123,63,212,.35),transparent 70%)}
.hero h1{font-size:clamp(44px,8vw,88px);font-weight:900;letter-spacing:.04em}
.hero h1 em{font-style:normal;color:var(--accent2);text-shadow:0 0 40px rgba(160,107,255,.55)}
.tagline{margin-top:10px;font-size:clamp(16px,2.2vw,22px);color:var(--accent2);font-weight:600}
.sub{margin:18px auto 0;max-width:620px;color:var(--muted);font-size:15px}
.badges{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.badge{padding:9px 20px;border-radius:999px;font-size:13px;font-weight:600}
.badge.soon{border:1px solid var(--accent);color:var(--accent2);background:rgba(123,63,212,.12)}

/* equalizer */
.eq{display:flex;gap:6px;justify-content:center;align-items:flex-end;height:54px;margin-bottom:34px;opacity:.8}
.eq i{width:7px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent2),var(--accent));animation:eq 1s ease-in-out infinite alternate}
.eq i:nth-child(1){animation-delay:-.05s}.eq i:nth-child(2){animation-delay:-.4s}
.eq i:nth-child(3){animation-delay:-.75s}.eq i:nth-child(4){animation-delay:-.2s}
.eq i:nth-child(5){animation-delay:-.6s}.eq i:nth-child(6){animation-delay:-.9s}
.eq i:nth-child(7){animation-delay:-.3s}.eq i:nth-child(8){animation-delay:-.55s}
.eq i:nth-child(9){animation-delay:-.15s}.eq i:nth-child(10){animation-delay:-.8s}
.eq i:nth-child(11){animation-delay:-.45s}.eq i:nth-child(12){animation-delay:-.65s}
@keyframes eq{from{height:8px}to{height:54px}}

/* feature cards */
.features{margin-top:9vh;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;text-align:left}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:26px 24px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card h3{font-size:16px;margin-bottom:8px;color:var(--accent2)}
.card p{font-size:14px;color:var(--muted)}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 6vw 30px;background:var(--bg2)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr;gap:34px;max-width:1000px;margin:0 auto}
footer p,footer a{color:var(--muted);font-size:13px;text-decoration:none;line-height:1.9}
footer a:hover{color:var(--ink)}
footer strong{color:var(--ink);font-size:14px}
.copyright{text-align:center;margin-top:30px;color:#5d5a68;font-size:12px}

/* legal pages */
.legal-body{max-width:820px;margin:0 auto;padding:60px 6vw 80px}
.legal-body h1{font-size:30px;margin-bottom:6px}
.legal-body .updated{color:var(--muted);font-size:13px;margin-bottom:34px}
.legal-body h2{font-size:19px;margin:34px 0 10px;color:var(--accent2)}
.legal-body p,.legal-body li{color:#c9c6d4;font-size:15px;margin-bottom:10px}
.legal-body ul{padding-left:22px}

@media (max-width:640px){
  .topbar{flex-direction:column;gap:12px}
  .foot-grid{grid-template-columns:1fr}
}