@layer components {
    .site-navbar {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
        padding: var(--space-4) 0;
        background: rgba(0,0,0,.15);
        backdrop-filter: blur(8px);
        transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
    }
    .site-navbar.scrolled {
        background: var(--bg); backdrop-filter: none; box-shadow: var(--shadow-md); padding: var(--space-2) 0;
    }
    body:not(.page-home) .site-navbar {
        background: var(--bg); backdrop-filter: none; box-shadow: var(--shadow-sm);
    }
    .navbar-inner {
        max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-5);
        display: flex; align-items: center; justify-content: space-between;
    }
    .navbar-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
    .navbar-brand .brand-icon {
        width: 36px; height: 36px; border-radius: var(--radius-md);
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 13px; flex-shrink: 0;
        background: var(--gold-400); color: var(--primary-800);
        transition: all var(--transition);
    }
    .navbar-brand .brand-name {
        font-size: var(--text-lg); font-weight: 700; letter-spacing: -.5px;
        color: #fff; transition: color var(--transition);
    }
    .navbar-brand .brand-sub {
        font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
        text-transform: uppercase; color: rgba(255,255,255,.7);
        transition: color var(--transition);
    }
    .site-navbar.scrolled .brand-name,
    body:not(.page-home) .site-navbar .brand-name { color: var(--primary-700); }
    .site-navbar.scrolled .brand-sub,
    body:not(.page-home) .site-navbar .brand-sub { color: var(--steel-500); }
    .nav-links { display: flex; align-items: center; gap: 0; }
    .nav-link {
        display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
        font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
        color: rgba(255,255,255,.95); transition: all var(--transition);
    }
    .nav-link:hover { color: var(--gold-400); background: rgba(255,255,255,.1); }
    .nav-link.active { color: var(--gold-400); }
    .site-navbar.scrolled .nav-link,
    body:not(.page-home) .site-navbar .nav-link { color: var(--steel-700); }
    .site-navbar.scrolled .nav-link:hover,
    body:not(.page-home) .site-navbar .nav-link:hover { color: var(--primary-600); background: var(--primary-50); }
    .site-navbar.scrolled .nav-link.active,
    body:not(.page-home) .site-navbar .nav-link.active { color: var(--primary-600); }
    .nav-dropdown { position: relative; }
    .nav-dropdown .dropdown-menu {
        position: absolute; top: 100%; left: 0; min-width: 140px;
        background: var(--bg); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
        padding: var(--space-1) 0; opacity: 0; visibility: hidden;
        transform: translateY(var(--space-2)); transition: all var(--duration-normal) var(--ease-default);
    }
    .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(2px); }
    .dropdown-item {
        display: block; padding: var(--space-2) 18px; font-size: var(--text-xs);
        color: var(--steel-700); transition: all var(--transition);
    }
    .dropdown-item:hover { background: var(--primary-50); color: var(--primary-600); padding-left: 22px; }
    .nav-caret {
        display: inline-block; width: 12px; height: 12px; margin-left: 2px;
        vertical-align: middle; opacity: .6;
    }
    .mobile-toggle {
        display: none; background: none; border: none; cursor: pointer;
        padding: var(--space-2); width: 40px; height: 40px; position: relative;
    }
    .mobile-toggle span {
        display: block; width: 22px; height: 2px; position: absolute; left: 9px;
        transition: all var(--duration-normal) var(--ease-default); background: #fff;
    }
    .mobile-toggle span:nth-child(1) { top: 12px; }
    .mobile-toggle span:nth-child(2) { top: 19px; }
    .mobile-toggle span:nth-child(3) { top: 26px; }
    .site-navbar.scrolled .mobile-toggle span,
    body:not(.page-home) .site-navbar .mobile-toggle span { background: var(--steel-800); }
    .mobile-toggle.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
    .mobile-toggle.open span:nth-child(2) { opacity: 0; }
    .mobile-toggle.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
    @media (max-width: 768px) {
        .mobile-toggle { display: block; }
        .nav-links {
            display: none; position: absolute; top: 100%; left: 0; right: 0;
            background: var(--bg); box-shadow: var(--shadow-lg);
            flex-direction: column; padding: var(--space-4) 0;
        }
        .nav-links.show { display: flex; }
        .nav-link {
            color: var(--steel-700); padding: var(--space-3) var(--space-5);
            border-radius: 0; width: 100%;
        }
        .nav-link:hover { background: var(--primary-50); color: var(--primary-600); }
        .nav-link.active { color: var(--primary-600); background: var(--primary-50); }
        .nav-dropdown .dropdown-menu {
            position: static; opacity: 1; visibility: visible;
            transform: none; box-shadow: none; padding-left: var(--space-6);
            background: transparent;
        }
        .navbar-brand .brand-name { color: #fff; }
        .site-navbar.scrolled .navbar-brand .brand-name,
        body:not(.page-home) .navbar-brand .brand-name { color: var(--primary-700); }
        .navbar-brand .brand-sub { color: rgba(255,255,255,.7); }
        .site-navbar.scrolled .navbar-brand .brand-sub,
        body:not(.page-home) .navbar-brand .brand-sub { color: var(--steel-500); }
    }
}