/* SB Audio FX — site header. Depends on tokens.css */
/* Slim app-promo banner (sits above the sticky header, scrolls away). */
.sb-appbanner { background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(59,130,246,.10)); border-bottom: 1px solid var(--sb-border); }
.sb-appbanner__inner { display: flex; align-items: center; justify-content: center; gap: var(--sb-space-3); min-height: 40px; padding: var(--sb-space-2) 0; position: relative; }
.sb-appbanner__link { display: inline-flex; align-items: center; gap: var(--sb-space-3); color: var(--sb-ink-secondary); font-size: var(--sb-text-sm); font-weight: 500; text-align: center; }
.sb-appbanner__link:hover { color: var(--sb-ink-primary); }
.sb-appbanner__link strong { color: var(--sb-ink-primary); font-weight: 700; }
.sb-appbanner__tag { flex: none; background: var(--sb-brand, #2563eb); color: #fff; font-size: var(--sb-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--sb-radius-pill); }
.sb-appbanner__x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--sb-ink-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.sb-appbanner__x:hover { color: var(--sb-ink-primary); }
@media (max-width: 560px) { .sb-appbanner__tag { display: none; } .sb-appbanner__link { font-size: var(--sb-text-xs); padding-right: 28px; } }
.sb-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--sb-border); background: rgba(5, 6, 10, .72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.sb-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-6); height: 68px; }
.sb-header__brand { display: inline-flex; align-items: center; gap: var(--sb-space-3); font-weight: 800; color: var(--sb-ink-primary); font-size: var(--sb-text-lg); letter-spacing: var(--sb-tracking-tight); }
.sb-header__brand:hover { color: var(--sb-ink-primary); }
.sb-header__mark { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--sb-border-strong); box-shadow: var(--sb-shadow-sm); flex: none; object-fit: cover; background: #000; }
.sb-header__nav { display: none; align-items: center; gap: var(--sb-space-1); }
.sb-header__link { padding: var(--sb-space-2) var(--sb-space-4); border-radius: var(--sb-radius-pill); color: var(--sb-ink-secondary); font-weight: 600; font-size: var(--sb-text-sm); transition: color var(--sb-dur-fast) var(--sb-ease), background var(--sb-dur-fast) var(--sb-ease); }
.sb-header__link:hover { color: var(--sb-ink-primary); background: var(--sb-layer-hover); }
.sb-header__link.is-active { color: var(--sb-ink-primary); background: var(--sb-layer-active); }
.sb-header__actions { display: flex; align-items: center; gap: var(--sb-space-3); }
.sb-header__toggle { display: inline-flex; background: transparent; border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-sm); color: var(--sb-ink-primary); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.sb-header__mobile { display: none; flex-direction: column; gap: 4px; padding: var(--sb-space-4) 0; border-top: 1px solid var(--sb-border); }
.sb-header__mobile.is-open { display: flex; }
.sb-header__mobile a { padding: var(--sb-space-3) var(--sb-space-4); border-radius: var(--sb-radius-md); color: var(--sb-ink-secondary); font-weight: 600; }
.sb-header__mobile a:hover, .sb-header__mobile a.is-active { background: var(--sb-layer-hover); color: var(--sb-ink-primary); }
@media (max-width: 560px) {
  .sb-header__actions .sb-btn { display: none; }   /* free up width; Get the App lives in the menu */
  .sb-header__inner { gap: var(--sb-space-3); }
}
@media (min-width: 860px) {
  .sb-header__nav { display: flex; }
  .sb-header__toggle { display: none; }
  .sb-header__mobile { display: none !important; }
}