/* =========================
   NAVIGATION
========================= */

.navbar {

    position: sticky;
    top: 0;

    --background: #0b0b0b;

    border-bottom: 1px solid rgba(255,255,255,.06);

    z-index: 1000;

}

.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 80px;

}

.logo {

    display: inline-block;

    font-size: clamp(1.3rem, 1.15vw + 1rem, 1.7rem);

    font-weight: 650;

    letter-spacing: -0.02em;

    transition:
        color .3s ease,
        text-shadow .3s ease,
        transform .3s ease;

}

.logo:hover {

    color: #fff;

    transform: translateY(-1px);

    text-shadow:
        0 0 10px rgba(255,255,255,.15),
        0 0 24px rgba(255,255,255,.06);

}

.nav-links {

    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2.5rem);

    list-style: none;

}

.nav-links a {

    color: var(--text-secondary);

    transition: color .25s ease;

}

.nav-links a:hover {

    color: var(--text);

}

.navbar.scrolled {

    background: rgba(7,10,13,.72);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255,255,255,.08);

}