/* Header: a thin contact strip (desktop), the sticky bar with logo, navigation and actions. */
@layer layout {
    .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-surface) 84%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }

    .site-topbar { display: none; background: var(--gradient-brand); color: color-mix(in srgb, var(--color-on-dark) 85%, transparent); font-size: var(--text-xs); }
    .site-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 40px; }
    .topbar-contact, .topbar-tools { display: flex; align-items: center; gap: var(--space-5); }
    .site-topbar a, .site-topbar .dropdown-trigger { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; font-weight: 500; }
    .site-topbar a:hover, .site-topbar .dropdown-trigger:hover { color: var(--color-accent-soft); }
    .site-topbar .dropdown-trigger { padding: 0; }

    .site-bar { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); }
    .brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; color: var(--color-primary-strong); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; }
    .brand:hover { color: var(--color-primary); }
    .brand-mark { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: var(--radius-sm); background: var(--gradient-vivid); color: var(--color-on-dark); box-shadow: 0 6px 14px color-mix(in srgb, var(--color-primary) 35%, transparent); }

    .site-nav { display: none; }
    .nav-list { display: flex; align-items: center; gap: var(--space-1); }
    .nav-link { display: inline-flex; align-items: center; min-height: 42px; padding-inline: var(--space-4); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: background .18s, color .18s; }
    .nav-link:hover, .nav-link.is-active { color: var(--color-primary); background: var(--color-surface-alt); }

    .theme-toggle .theme-icon-sun, :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
    :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline; }
    .theme-toggle:hover { color: var(--color-primary); }

    .header-actions { display: flex; align-items: center; gap: var(--space-2); }
    .header-phone, .header-cta, .header-account { display: none; }

    @media (min-width: 1024px) {
        .site-topbar { display: block; }
        .site-nav { display: block; }
        .header-cta, .header-account { display: inline-flex; }
        .menu-btn { display: none; }
    }

    @media (min-width: 1024px) and (max-width: 1439px) {
        .site-bar { gap: var(--space-2); }
        .site-nav { min-width: 0; }
        .nav-list { gap: 0; }
        .nav-link { padding-inline: var(--space-2); }
    }

    @media (min-width: 1024px) and (max-width: 1199px) {
        .nav-link { font-size: var(--text-xs); }
        .header-cta { padding-inline: var(--space-3); }
    }

    @media (min-width: 1400px) {
        .header-phone { display: inline-flex; }
    }
}