.header { position:sticky; top:0; z-index:100; border-bottom:1px solid #27272e; background:#0d0d0f; color:#f1f1f4; }
.promo-banner { height:30px; overflow:hidden; background:#19253a; color:#f5f7fc; font-size:12px; line-height:30px; letter-spacing:.15px; }
.promo-banner-track { display:flex; width:max-content; animation:promo-scroll 40s linear infinite; }
.promo-banner-group { display:flex; align-items:center; justify-content:space-around; gap:64px; min-width:100vw; padding-inline:32px; flex-shrink:0; }
.promo-banner-group span { white-space:nowrap; }
.promo-banner strong { color:#ff94a6; font-weight:700; }
.promo-banner:hover .promo-banner-track { animation-play-state:paused; }
@keyframes promo-scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .promo-banner-track { animation:none; width:100%; }
  .promo-banner-group { width:100%; min-width:0; justify-content:center; padding-inline:12px; }
  .promo-banner-group + .promo-banner-group,.promo-banner-group span + span { display:none; }
}
.header .nav { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.header .brand { display:flex; align-items:center; gap:11px; font-size:23px; font-weight:800; letter-spacing:-.7px; line-height:1.2; white-space:nowrap; }
.header .brand img { width:44px; height:44px; object-fit:contain; }
.header .brand-sub { display:block; margin-top:4px; font-size:11px; font-weight:500; letter-spacing:.2px; color:var(--muted); }
.header .brand-sub { color:#a1a1b0; }
.header .nav-links { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:500; color:#b4b4c4; }
.header .nav-links>a { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:6px; }
.header .nav-links svg { width:15px; height:15px; }
.header .nav-links .discord-icon { width:18px; fill:currentColor; stroke:none; }
.header .nav-links .nav-discord { color:#99a5ff; }
.header .nav-links>a:not(.button):hover { color:#fff; background:#202026; }
.header .nav-links .nav-account { background:linear-gradient(135deg,#e94560,#c23152); color:#fff; border:0; padding:10px 15px; }
.header .nav-links .nav-account:hover { background:linear-gradient(135deg,#ff5a7e,#e94560); }
.footer a:hover { color:var(--blue); }
.header .button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 19px; border:1px solid transparent; border-radius:8px; font-size:13px; font-weight:600; line-height:1.4; transition:background .15s,border-color .15s; text-align:center; }
.header .button svg { width:19px; height:19px; }
.header .button-primary { background:var(--blue); color:#fff; }
.header .button-primary:hover { background:var(--blue-dark); }
.header .button-outline { border-color:#d7dee8; background:#fff; color:var(--ink); }
.header .button-outline:hover { background:var(--soft); border-color:#b8c8df; }
.header .button-small { min-height:41px; padding:10px 15px; }
.header .menu-toggle { display:none; border:1px solid #35353e; border-radius:7px; padding:8px; background:#1b1b20; color:#f1f1f4; }

.header .container{width:min(1180px,calc(100% - 64px));margin-inline:auto;padding:0}
.header svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.header .nav-links svg{width:15px;height:15px}.header .nav-links .discord-icon{width:18px;fill:currentColor;stroke:none}
.header .nav{color:#b4b4c4;font-size:13px}.header .brand{color:#f1f1f4}
.header .nav-links [aria-current=page]{color:#fff;background:#202026}
@media(max-width:1050px){.header .nav-links{gap:3px;font-size:12px}}
@media(max-width:800px){.header .nav{min-height:74px}.header .menu-toggle{display:flex}.header .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:#0d0d0f;border-bottom:1px solid #27272e;padding:20px;align-items:stretch;gap:5px}.header .nav-links.open{display:flex;flex-direction:column}.header .nav-links>a{padding:10px}.header .container{width:calc(100% - 36px)}}
@media(max-width:520px){.header .brand{font-size:22px}.header .nav-links>a:last-child{display:inline-flex}}
