/* asuko-brand.css — the tokens DESIGN.md allows. Change values here, meanings there. */
:root{
  --stage:#0a0a0f; --stage-2:#14141c; --ink:#f4f1ea; --ink-mute:#a9a49b;
  --neon:#ff2d8a; --neon-glow:rgba(255,45,138,.35); --blue:#2f7bff; --gold:#d8b45c;
  --seaglass:#7fd8c0; --shell:#f3d3c4; --line:rgba(244,241,234,.12);
  --r-card:14px; --r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Inter,"Segoe UI",sans-serif;
}
html{color-scheme:dark}
body{margin:0;background:var(--stage);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
.kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.display{font-weight:800;letter-spacing:-.02em;line-height:1.05}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:var(--r-pill);
  background:var(--neon);color:#fff;font-weight:700;border:0;cursor:pointer;box-shadow:0 10px 30px var(--neon-glow);
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px var(--neon-glow)}
.card{background:var(--stage-2);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.hairline{border:0;border-top:1px solid var(--line)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--seaglass);display:inline-block;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}