:root{
  --bg:#0b0b0d; --fg:#e8e8ef; --muted:#9aa; --accent:#ff8a00;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 70% 20%, #16161a 0%, #0b0b0d 60%, #070708 100%);
  color:var(--fg); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  overflow:hidden;
}
#fx{position:fixed; inset:0; z-index:0; opacity:.45}

.center{
  position:fixed; inset:0; display:grid; place-items:center; z-index:1;
  text-align:center; padding:24px;
}

.logo{
  width:128px; height:128px; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(255,140,0,.25));
  animation: float 4.5s ease-in-out infinite;
}

.brand{
  margin:14px 0 6px; font-weight:800; letter-spacing:.6px; font-size:clamp(24px,5vw,40px);
}
.tagline{margin:0 0 18px; color:var(--muted)}

.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-block; padding:10px 14px; border-radius:14px; text-decoration:none; color:#111;
  background:#fff; border:1px solid #ffffff22; box-shadow:0 6px 20px rgba(255,255,255,.08);
}
.btn.ghost{background:transparent; color:var(--fg); border:1px solid #ffffff30}

.foot{
  position:fixed; left:0; right:0; bottom:14px; text-align:center; color:#9aa; font-size:12px; z-index:1;
}


@media (prefers-reduced-motion: reduce){ .ring{animation:none} .logo{animation:none} }

@keyframes spin{ to{ transform: rotate(360deg) } }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }