/* ════════════════════════════════════════════════════════════
   header.css — Site header styles
   SXDWallet · 2026
════════════════════════════════════════════════════════════ */

.site-header {
  width: 100%;
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,15,13,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
.header-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 20px; font-weight: 800;
  color: var(--g); letter-spacing: -0.5px;
}
.header-logo-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,200,83,.3), rgba(0,200,83,.1));
  border: 1px solid rgba(0,200,83,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* Nav */
.header-nav {
  display: flex; align-items: center; gap: 6px;
}
.nav-link {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--muted); padding: 6px 12px; border-radius: 8px;
  transition: all .2s; white-space: nowrap;
}
.nav-link:hover { color: var(--g); background: var(--g-glow); }

.nav-link.btn-nav {
  background: var(--g); color: #000;
  padding: 7px 14px; border-radius: 20px;
}
.nav-link.btn-nav:hover { background: var(--g2); }

/* Active page indicator */
.nav-link.active { color: var(--g); }