/* --- RESET --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

@font-face {
    font-family: Bebas Neue;
    src: url('/assets../topNzg-fonts/topNzg-bebasneue.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Open Sans;
    src: url('/assets../topNzg-fonts/topNzg-opensans.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

.body_topNzg {
    background-color: #343434;
    color: #F8FAFC;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ОСНОВНОЙ КОНТЕЙНЕР 1240PX */
.container_topNzg {
    max-width: 1240px;
    margin: 0 auto;
}

/* --- TYPOGRAPHY --- */
h1,
h2,
h3,
.title-label_topNzg,
.nav_topNzg__link,
.btn_topNzg,
.footer_topNzg__heading,
.popup_topNzg__title {
    font-family: Bebas Neue;
}

/* --- HEADER (Split Design) --- */
.header_topNzg {
    background: linear-gradient(to right, #343434 60%, #D1F55C 60%);
    top: 0;
}

.header_topNzg-policy {
    background: #343434;
    top: 0;
}

.about_topNzg__text-policy h2 {
    font-family: Open Sans;
    text-transform: uppercase;
    font-size: 16px;
}

.about_topNzg__text-policy ul {
    list-style: none;
}

.header_topNzg__wrapper {
    display: grid;
    grid-template-columns: 60% 40%;
    /* Совпадает с градиентом */
    align-items: center;
    min-height: 80px;
    padding: 0px 16px;
}

.header_topNzg__left {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;

}

.logo_topNzg {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #D1F55C;
    font-size: 26px;
}

.nav_topNzg__list {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav_topNzg__link {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
}

.nav_topNzg__link:hover {
    color: #D1F55C;
}

.header_topNzg__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 40px;
}

.header_topNzg__socials {
    display: flex;
    gap: 13px;
    align-items: center;
}

.header_topNzg__socials img {
    transition: 0.3s;
}

/* Иконки черные на лаймовом фоне */
.header_topNzg__socials a:hover img {
    transform: scale(1.1);
}

/* --- HERO (Split Design & Centered Content) --- */
.hero_topNzg {
    /* Фоновый градиент на весь экран */
    background: linear-gradient(to right, #343434 60%, #D1F55C 60%);
    overflow: hidden;
    padding: 0px 16px;
}

.hero_topNzg__grid {
    display: grid;
    grid-template-columns: 60% 40%;
    padding-bottom: 100px;
}

/* Левая часть Hero */
.hero_topNzg__left-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero_topNzg__title {
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 44px;
    line-height: 100%;
    padding-bottom: 24px;
    text-transform: uppercase;
}

.hero_topNzg__main-img-box {
    width: 115%;
    max-width: 816px;
    /* Перекрытие вправо */
    position: relative;
    z-index: 10;
}

.hero_topNzg__main-img-box img {
    width: 100%;
    display: block;
}

/* Правая часть Hero */
.hero_topNzg__right-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero_topNzg__side-inner {
    width: 100%;
    max-width: 392px;
    padding-left: 16px;
}

.hero_topNzg__side-img {
    padding-bottom: 24px;
}

.hero_topNzg__side-img img {
    width: 100%;
}

.hero_topNzg__side-text {
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    color: #343434;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* --- BUTTONS --- */
.btn_topNzg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 31px;
    cursor: pointer;
    transition: 0.3s;
    border: none;
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-decoration: none;
}

.btn-div {
    display: flex;
    justify-content: flex-end;
}

.btn_topNzg--dark {
    background-color: #343434;
    color: #F8FAFC;
}

.btn_topNzg--dark:hover {
    background-color: #000;
    transform: translateX(10px);
}

/* --- SECTIONS --- */
.card_topNzg--lime {
    background-color: #D1F55C;
    color: #343434;
}

.about_topNzg__bl {
    display: flex;
    background-color: #D1F55C;
    color: #343434;
    width: 100%;
    max-width: 710px;
    justify-content: center;
    align-items: center;
    padding-left: 116px;
}

.img-ab img {
    width: 100%;
    max-width: 392px;
    height: 416px;
}

.about_topNzg__text p {
    font-family: Open Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
}

.reveal_topNzg {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease-out;
}

.reveal_topNzg.active_topNzg {
    opacity: 1;
    transform: translateY(0);
}

.about_topNzg,
.sp2 {
    padding: 40px 16px;
}

.sport_topNzg img {
    width: 100%;
}

.sp2 {
    background-color: #D0E96A;
    padding: 16px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.title-label_topNzg {
    width: 100%;
    max-width: 317px;
    text-align: center;
    background-color: #D1F55C;
    color: #343434;
    padding: 10px 22px;
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    margin-bottom: 25px;
}

.about_topNzg__grid,
.sport_topNzg__grid {
    display: flex;
    gap: 32px;
}

.sport_topNzg__grid {
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.sport_topNzg__grid2 {
    display: flex;
    align-items: center;
    gap: 32px;
}

.sport_topNzg__content h2 {
    color: #D0E96A;
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    padding-bottom: 8px;
    letter-spacing: 0cm;
}

.sport_topNzg__content2 h2 {
    color: #343434;
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    padding-bottom: 16px;
    letter-spacing: 0cm;
}

.sport_topNzg__content p {
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 140%;
    color: #F8FAFC;
}

.sport_topNzg__content2 p {
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 140%;
    color: #343434;
}

.sp3 {
    padding-bottom: 40px;
}

.sport_topNzg__content2 {
    max-width: 422px;
}

.sport_topNzg__content {
    max-width: 424px;
}

.about_topNzg__text {
    width: 100%;
    max-width: 498px;
}

/* --- FOOTER STYLES --- */
.footer_topNzg {
    background-color: #343434;
    /* Темный фон футера */
    padding: 40px 16px;
    border-top: 1px solid #F8FAFC;
    color: #F8FAFC;
}

.footer_topNzg__main {
    padding-bottom: 24px;
    display: flex;
    gap: 32px;
}

.footer-col_topNzg--brand {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 286px;
}

.mb-20_topNzg {
    padding-bottom: 24px;
}

.sport_topNzg {
    padding: 0 16px;
}

.footer_topNzg__age img {
    width: 40px;
    height: auto;
    display: block;
}

.footer_topNzg__cta {
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-transform: uppercase;
    color: #F8FAFC;
    padding-bottom: 16px;
}

/* Contacts within footer */
.footer_topNzg__contacts {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.contact-item_topNzg {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Open Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #F8FAFC;
}

.contact-item_topNzg a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.contact-item_topNzg a:hover {
    color: #D1F55C;
}

.footer_topNzg__socials {
    display: flex;
    gap: 15px;
}

.footer_topNzg__socials img {
    width: 28px;
    height: auto;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1);
}

.footer_topNzg__socials a:hover img {
    transform: scale(1.15);
}

/* Links & Titles */
.footer-title_topNzg {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: #D1F55C;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.footer-list_topNzg {
    list-style: none;
    padding: 0;
}

.footer-list_topNzg li {
    margin-bottom: 8px;
}

.footer-link_topNzg {
    text-decoration: none;
    font-family: Open Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #F8FAFC;
    transition: color 0.3s ease;
}

.footer-link_topNzg:hover {
    color: #D1F55C;
    text-decoration: underline;
}

.footer-info-text_topNzg {
    font-family: Open Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    max-width: 630px;
}

/* Bottom Copyright */
.footer_topNzg__bottom {
    border-top: 1px solid #F8FAFC;
    text-align: center;
    font-family: Open Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    padding-top: 24px;
}

/* --- POPUPS --- */
.overlay_topNzg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.overlay_topNzg.active_topNzg {
    display: flex;
}

.popup_topNzg {
    padding: 32px;
    text-align: center;
    max-width: 600px;
    width: 100%;
    border: 2px solid #343434;
    border-radius: 10px;
}

.popup_topNzg__btns {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.popup_topNzg__btns button {
    width: 100%;
    max-width: 230px;
    align-items: center;
    justify-content: center;
}

.bt2-p {
    background: transparent;
    border: 1px solid #343434;
}

.popup_topNzg__title {
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 30px;
    color: #343434;
}

/* --- BURGER --- */
.burger_topNzg {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

.burger_topNzg span {
    width: 32px;
    height: 3px;
    background: #F8FAFC;
    border-radius: 2px;
}

.header_topNzg__right a {
    display: flex;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {

    .header_topNzg,
    .hero_topNzg {
        background: #343434;
    }

    .hero_topNzg__grid {
        grid-template-columns: 1fr;
    }

    .header_topNzg__left {
        width: 100%;
        justify-content: space-between;
    }

    .nav_topNzg {
        display: none;
    }

    .burger_topNzg {
        display: flex;
    }

    .header_topNzg__right {
        padding: 0;
        justify-content: space-between;
    }

    .header_topNzg__socials {
        display: none;
    }

    .hero_topNzg__left-side {
        padding: 40px 0;
        text-align: center;
        align-items: center;
    }

    .hero_topNzg__main-img-box {
        width: 100%;
        margin: 0;
    }

    .hero_topNzg__right-side {
        background: #D1F55C;
        padding: 40px 20px;
        justify-content: center;
        text-align: center;
        border-radius: 20px;
    }

    .hero_topNzg__title {
        font-size: 36px;
    }

    .about_topNzg__grid,
    .sport_topNzg__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1250px) {
    .hero_topNzg__main-img-box {
        width: 100%;
    }
}

@media (max-width: 1111px) {
    .about_topNzg__bl {
        padding: 12px;
    }
}

@media (max-width: 760px) {
    .hero_topNzg {
        background: #D0E96A;
    }

    .hero_topNzg__title {
        font-size: 32px;
        letter-spacing: 0cm;
    }

    .hero_topNzg__left-side {
        background: #343434;
        padding: 12px;
        margin-top: 40px;
    }

    .hero_topNzg__side-inner {
        width: 100%;
        max-width: 100%;
        padding-left: 0px;
    }

    .hero_topNzg__right-side {
        padding: 0px;
        padding-top: 24px;
        background-color: transparent;
        text-align: left;
    }

    .hero_topNzg__side-text {
        margin-bottom: 24px;
    }

    .btn-div {
        justify-content: flex-start;
    }

    .hero_topNzg__side-img img {
        width: 100%;
        height: 229px;
        object-fit: cover;
    }

    .about_topNzg__grid,
    .sport_topNzg__grid {
        display: flex;
        gap: 32px;
        flex-direction: column;
    }

    .sport_topNzg__grid {
        align-items: flex-start;
    }

    .sport_topNzg__grid2 {
        display: flex;
        align-items: flex-start;
        gap: 32px;
        flex-direction: column;
    }

    .footer_topNzg__main {
        padding-bottom: 24px;
        display: flex;
        gap: 32px;
        flex-direction: column;
    }
}


@media (max-width: 760px) {
    .btn_topNzg {
        width: 100%;
        justify-content: center;
    }

    .about_topNzg__bl {
        display: block;
    }

    .img-ab img {
        width: 100%;
        max-width: 392px;
        height: 200px;
        object-fit: cover;
    }

    .popup_topNzg__btns {
        display: flex;
        justify-content: center;
        gap: 24px;
        flex-direction: column;
        align-items: center;
    }

    .header_topNzg__left img {
        max-width: 134px;
    }
}

/* Линии бургера */
.burger_topNzg {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    z-index: 1100;
}

.header_topNzg__socials-mob {
    display: none;
}

.burger-line_topNzg {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #343434;
    border-radius: 2px;
    transition: 0.3s;
}

/* Анимация в крестик */
.burger_topNzg.active .burger-line_topNzg:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background-color: #fff;
}

.burger_topNzg.active .burger-line_topNzg:nth-child(2) {
    opacity: 0;
}

.burger_topNzg.active .burger-line_topNzg:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background-color: #fff;
}

/* Выезжающее меню на мобилках */
@media (max-width: 992px) {
    .nav_topNzg {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #282828;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
        z-index: 1000;
    }

    .nav_topNzg.active {
        right: 0;
    }

    .nav_topNzg__list {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .nav_topNzg__link {
        font-size: 32px;
    }

    .header_topNzg__socials-mob {
        display: flex;
        align-items: center;
        gap: 13px;
    }
}

/* Блокировка скролла */
.body_topNzg.lock_topNzg {
    overflow: hidden;
}

.cookie-overlay_topNzg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cookie-overlay_topNzg.active_topNzg {
    display: flex;
}

.cookie-popup_topNzg {
    padding: 32px;
    text-align: center;
    max-width: 900px;
    width: 100%;
    border: 2px solid #343434;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

.cookie-text_topNzg {
    font-family: Bebas Neue;
    font-size: 32px;
    line-height: 1.1;
    color: #343434;
    margin-bottom: 40px;
}

.cookie-btns_topNzg {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* --- ПЛАВНОСТЬ ДЛЯ ПОПАПОВ --- */

/* Контейнер-оверлей для возраста */
.overlay_topNzg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Начальное состояние для анимации */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Активное состояние оверлея */
.overlay_topNzg.active_topNzg {
    opacity: 1;
    visibility: visible;
}

/* Сама карточка попапа возраста */
.popup_topNzg {
    padding: 60px 40px;
    text-align: center;
    max-width: 750px;
    width: 100%;
    border: 2px solid #343434;
    border-radius: 10px;
    /* Эффект вылета */
    transform: scale(0.8) translateY(30px);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Эффект карточки при открытии */
.overlay_topNzg.active_topNzg .popup_topNzg {
    transform: scale(1) translateY(0);
}

/* Контейнер-оверлей для КУКИ */
.cookie-overlay_topNzg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Плавное появление */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.cookie-overlay_topNzg.active_topNzg {
    opacity: 1;
    visibility: visible;
}

/* Карточка КУКИ */
.cookie-popup_topNzg {
    padding: 50px 40px;
    text-align: center;
    max-width: 900px;
    width: 100%;
    border: 2px solid #343434;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
    /* Выезд снизу */
    transform: translateY(100px);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Состояние при открытии КУКИ */
.cookie-overlay_topNzg.active_topNzg .cookie-popup_topNzg {
    transform: translateY(0);
}

@media (max-width: 350px) {
    .header_topNzg__socials-mob {
        display: flex;
        align-items: center;
        gap: 5px;
    }
}

.about_topNzg__text ul {
    padding-top: 24px;
    padding-left: 16px;
}