:root { --bg: #0d0c0b; --card: #161412; --line: #2a2622; --txt: #ece6df; --mut: #948b81; --cu1: #e9a873; --cu2: #b8693a; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #2a1b12 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--txt); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px;
}
.card {
  width: 100%; max-width: 460px; text-align: center; padding: 44px 28px 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--card);
  border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.logo { display: block; margin: 0 auto 18px; filter: drop-shadow(0 10px 30px rgba(233,168,115,.25)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
h1 {
  margin: 0 0 8px; font-weight: 700; letter-spacing: .32em; font-size: 22px;
  background: linear-gradient(90deg, var(--cu1), var(--cu2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
p { margin: 0; color: var(--mut); }
.links { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.links:empty { display: none; }
a { color: var(--cu1); text-decoration: none; }
.links a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s, background .2s; }
.links a:hover { border-color: var(--cu2); background: rgba(233,168,115,.06); }
footer { margin-top: 26px; color: var(--mut); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } }