/* 03 — Sticky nav + scrollspy */

.navbar {
    position: sticky;
    top: 0;
    background: rgba(0, 3, 8, 0.78);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid rgba(127, 232, 207, 0.12);
    transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease, height 220ms ease, box-shadow 220ms ease;
    will-change: background, border-color;
}

.navbar .nav-container {
    max-width: 1280px;
    margin: 0 auto;
    transition: padding 220ms ease;
}

.navbar.scrolled {
    background: rgba(0, 3, 8, 0.92);
    border-bottom-color: rgba(127, 232, 207, 0.22);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    height: 64px;
}

.navbar.scrolled .nav-container {
    padding: 0 1.5rem;
}

.nav-links a {
    position: relative;
    cursor: pointer;
    transition: color 180ms ease, opacity 180ms ease;
}

.nav-links a:not(.btn-primary):hover {
    color: #fff;
    opacity: 1;
}

.nav-links a:not(.btn-primary)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-primary, #7fe8cf);
    box-shadow: 0 0 12px rgba(127, 232, 207, 0.7);
    transform: translate(-50%, -4px) scale(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
    pointer-events: none;
}

.nav-links a.is-current:not(.btn-primary) {
    color: #fff;
}

.nav-links a.is-current:not(.btn-primary)::after {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}

body.light-theme .navbar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

body.light-theme .navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

body.light-theme .nav-links a:not(.btn-primary):hover {
    color: #0f172a;
}

@media (max-width: 768px) {
    .navbar .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: inline-flex !important;
        position: relative;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
    }

    .mobile-menu-btn i {
        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease;
    }

    .mobile-menu-btn.is-open i {
        transform: rotate(90deg);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .navbar .nav-container,
    .nav-links a,
    .nav-links a::after,
    .mobile-menu-btn i {
        transition: none;
    }
}