/* =================== НАВИГАЦИЯ =================== */
.nav {
    background: var(--g1);
    border-top: 1px solid var(--g4);
    border-bottom: 1px solid var(--g4);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.nav-link {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 0;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
    outline: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 1000;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, .92) !important;
    transition: background .12s ease, border-color .12s ease, color .12s ease, text-shadow .12s ease;
}

button.nav-link {
    background: transparent !important;
    color: rgba(255, 255, 255, .92) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.nav-link:hover,.nav-link:focus-visible,.drop[data-open="1"] > .nav-link {
    transform: none;
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .92) !important;
    text-shadow: 0 0 14px rgba(255, 121, 64, .18);
}

button.nav-link:hover, button.nav-link:focus-visible, .drop[data-open="1"] > button.nav-link { color: var(--o1) !important; }

.nav-link.active {
    color: rgba(255, 255, 255, .92) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.nav-link--accent,.nav-link--accent.active {
    color: rgba(255, 255, 255, .92) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.nav-link--accent:hover,.nav-link--accent:focus-visible,.nav-link--accent.active:hover,.nav-link--accent.active:focus-visible {
    color: var(--o1) !important;
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

.drop { position: relative; }

.drop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.drop > .nav-link { column-gap: 2px; row-gap: 0; }

.caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    display: inline-block;
    margin-left: 2px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid rgba(255, 255, 255, .80);
    transform: translateY(2px) rotate(0deg);
    transform-origin: center 35%;
    transition: border-top-color .2s ease, transform .25s ease;
}

.drop[data-open="1"] > .nav-link .caret {
    border-top-color: var(--o1);
    transform: translateY(4px) rotate(180deg);
}

.menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    display: none;
    width: max-content;
    min-width: 0;
    max-width: min(360px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(0, 0, 0, .9);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.drop[data-open="1"] .menu { display: block; }

.menu a {
    display: block;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 1000;
    line-height: 1.15;
    color: rgba(255, 255, 255, .95);
    transition:
        color .22s ease,
        filter .35s ease,
        letter-spacing .35s ease,
        text-shadow .3s ease,
        background .12s ease,
        border-color .12s ease;
    transform-origin: center center;
    will-change: transform, filter;
}

.menu a:hover,
.menu a:focus-visible {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
    color: var(--o1);
    animation: nav-liquid .9s ease forwards;
    filter: blur(.15px);
    text-shadow:
        0 0 10px rgba(255, 121, 64, .18),
        0 0 18px rgba(255, 121, 64, .10);
    outline: none;
}

.nav-link__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition:
        color .22s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1),
        filter .35s ease,
        letter-spacing .35s ease,
        text-shadow .3s ease;
    transform-origin: center center;
    will-change: transform, filter;
}

.nav-link:hover .nav-link__label,.nav-link:focus-visible .nav-link__label,.drop[data-open="1"] > .nav-link .nav-link__label {
    color: var(--o1);
    animation: nav-liquid .9s ease forwards;
    filter: blur(.15px);
    text-shadow:
        0 0 10px rgba(255, 121, 64, .18),
        0 0 18px rgba(255, 121, 64, .10);
}

@keyframes nav-liquid {
    0% { transform: scale(1, 1) skewX(0deg); }
    18% { transform: scale(1.06, .94) skewX(-6deg); }
    38% { transform: scale(.96, 1.06) skewX(5deg); }
    58% { transform: scale(1.03, .98) skewX(-3deg); }
    78% { transform: scale(.99, 1.02) skewX(2deg); }
    100% { transform: scale(1, 1) skewX(0deg); }
}


/* =================== АДАПТАЦИЯ НАВИГАЦИИ =================== */
@media (max-width: 820px) {
    .topbar, .topbar .wrap, .topbar-inner, .nav, .nav .wrap, .nav-inner, .drop { overflow: visible !important; }

    .nav { position: relative !important; z-index: 1000 !important; }
    .nav .wrap { position: relative !important; z-index: 1001 !important; }
    .nav-inner { position: relative !important; z-index: 1002 !important; }
    .drop { position: relative !important; z-index: 10 !important; }
    .drop[data-open="1"] { z-index: 9999 !important; }
    .drop .menu { z-index: 10000 !important; }
    .drop:not([data-open="1"]) > .nav-link,
    .drop:not([data-open="1"]) > .nav-link:hover,
    .drop:not([data-open="1"]) > .nav-link:focus,
    .drop:not([data-open="1"]) > .nav-link:focus-visible,
    .drop:not([data-open="1"]) > .nav-link:active {
        background: transparent !important;
        border-color: transparent !important;
        color: rgba(255, 255, 255, .92) !important;
        text-shadow: none !important;
    }

    .drop:not([data-open="1"]) > .nav-link .nav-link__label,
    .drop:not([data-open="1"]) > .nav-link:hover .nav-link__label,
    .drop:not([data-open="1"]) > .nav-link:focus .nav-link__label,
    .drop:not([data-open="1"]) > .nav-link:focus-visible .nav-link__label,
    .drop:not([data-open="1"]) > .nav-link:active .nav-link__label {
        color: rgba(255, 255, 255, .92) !important;
        animation: none !important;
        filter: none !important;
        text-shadow: none !important;
    }

    .drop:not([data-open="1"]) > .nav-link .caret,.drop:not([data-open="1"]) > .nav-link:hover .caret,.drop:not([data-open="1"]) > .nav-link:focus .caret,.drop:not([data-open="1"]) > .nav-link:focus-visible .caret,.drop:not([data-open="1"]) > .nav-link:active .caret {
        border-top-color: rgba(255, 255, 255, .80) !important;
        transform: translateY(2px) rotate(0deg) !important;
    }

    .drop[data-open="1"] > .nav-link {
        background: rgba(255, 255, 255, .06) !important;
        border-color: rgba(255, 255, 255, .12) !important;
        color: var(--o1) !important;
    }

    .drop[data-open="1"] > .nav-link .nav-link__label { color: var(--o1) !important; }
    .drop[data-open="1"] > .nav-link .caret {
        border-top-color: var(--o1) !important;
        transform: translateY(4px) rotate(180deg) !important;
    }
}

@media (max-width: 768px) {
    .nav,.nav-inner,.drop { overflow: visible; }

    .nav-inner {
        position: relative;
        gap: 8px 10px;
        padding: 8px 0;
    }

    .menu {
        min-width: 220px;
        width: max-content;
        max-width: calc(100vw - 20px);
    }

    .menu a {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 640px) {
    .menu {
        min-width: 200px;
        max-width: calc(100vw - 20px);
        padding: 8px;
        border-radius: 12px;
    }

    .menu a {
        padding: 11px 12px;
        font-size: 15px;
        line-height: 1.25;
    }
}

@media (max-width: 320px) {
    .nav-inner {
        flex-direction: column;
        gap: 8px;
        padding: 14px 0;
    }

    .nav-link {
        width: 100%;
        max-width: 100%;
        padding: 9px 10px;
        font-size: 20px;
        white-space: normal;
    }
}