/* =============================================
   BURGER MENU
   ============================================= */

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1100;
    order: 3; /* правее логотипа */
}

.burger__line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-dark);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

/* Анимация → X */
.burger.is-active .burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.burger.is-active .burger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.burger.is-active .burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Оверлей-затемнение */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nav-overlay.is-active {
    opacity: 1;
}

/* =============================================
   MOBILE ≤ 1024px
   ============================================= */
@media (max-width: 1024px) {
    .burger {
        display: flex;
    }

    .header {
        padding-left: 30px;
        padding-right: 30px;
    } 

    .header__btns {
        display: none;
    }

    /* Drawer — выезжает справа */
    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100dvh;
        background: var(--color-cream);
        z-index: 1050;
        padding: 136px 24px 40px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1);
    }
    .dropdown-menu {
        background: var(--color-cream);
    }

    .header__nav.is-active {
        transform: translateX(0);
    }

    /* Список вертикально */
    .nav__list {
        flex-direction: column;
        gap: 0;
    }

    .nav__item {
        border-bottom: 1px solid #f0f0f0;
    }

    .nav__link {
        display: flex;
        justify-content: space-between;
        padding: 14px 0;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
    }

    /* Стрелка — аккордеон */
    .nav__item.is-open .arrow {
        transform: rotate(-180deg);
    }

    /* Dropdown — аккордеон (не hover, а клик) */
    .dropdown-menu {
        position: static;
        display: none; /* JS управляет через is-open */
        box-shadow: none;
        border-radius: 0;
        min-width: unset;
        padding: 0 0 8px 12px;
        margin-top: 0;
    }

    /* Снимаем hover-поведение на мобилке */
    .nav__item:hover .dropdown-menu {
        display: none;
    }

    .nav__item.is-open .dropdown-menu {
        display: flex;
    }

    .dropdown-item {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 8px;
        border-left: 4px solid transparent;
    }
}

/* =============================================
   MOBILE ≤ 480px — drawer на весь экран
   ============================================= */
@media (max-width: 480px) {
    .header__nav {
        width: 100%;
    }
}


/* Hero =========================================================== */
/* Hero =========================================================== */
@media (max-width: 991px) {
    .hero__main {
        flex-direction: column;
        text-align: center;
    }
    .hero__content {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .section__header {
        padding: 0 20px
    }
    .hero__image {
        margin-top: 40px;
        justify-content: center;
        width: 80%;
    }
    .hero__logos {
        display: none;
    }
}
/* product =========================================================== */
/* product =========================================================== */
@media (max-width: 991px) {
    .product__main {
        flex-direction: column;
        text-align: center;
    }
    .products__nav {
        padding-left: 40px;
        padding-right: 40px;
    }
    .products__panel {
        padding: 0 40px;
    }
    .product__content {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .products__actions {
        display: none;
    }
    .product__image {
        margin-top: 40px;
        justify-content: center;
        width: 80%;
    }

    .box-grid-top, .box-grid-bottom, .products__grid {
        grid-template-columns: 1fr;
    }
    .card--horizontal {
        flex-direction: column;
        padding-right: 32px;
    }
    .card--horizontal .card__image-placeholder {
        width: 100%;
        border-radius: 12px;
        margin-top: 20px;
    }
    .products__grid--2-col {
        grid-template-columns: 1fr;
    }
}



/* Resources =============================================================== */
/* Resources =============================================================== */
@media (max-width: 991px) {
    .resources__grid {
        flex-direction: column;
        align-items: center;
    }
    .resource-card {
        width: 100%;
        max-width: 460px;
        height: 500px;
    }
}

/* Overview =========================================================== */
/* Overview =========================================================== */
@media (max-width: 1180px) {
    .overview-card {
        width: 31%;
    }
}
@media (max-width: 768px) {
    .overview__grid {
        flex-direction: column;
        align-items: center;
    }
    .overview-card {
        width: 100%;
        max-width: 376px;
        height: auto;
        margin-bottom: 24px;
    }
}


/* Perks =========================================================== */
/* Perks =========================================================== */

@media (max-width: 1024px) {
    .perks__main {
        flex-direction: column;
        text-align: center;
    }
}
@media (max-width: 600px) {
    .perks__grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ =========================================================== */
/* FAQ =========================================================== */

@media (max-width: 900px) {
    .faq__list {
        padding: 0 40px;
    }
}


/* CTA Banner =========================================================== */
/* CTA Banner =========================================================== */
@media (max-width: 991px) {
    .cta-banner__main {
        border-radius: 0;
    }
    .cta-banner__wrapper {
        flex-direction: column;
        height: auto;
        padding: 40px;
        text-align: center;
    }
    .cta-banner__content {
        width: 100%;
        height: auto;
        align-items: center;
    }
    .cta-banner__image-wrap {
        margin-top: 40px;
    }
}

/* founder ================================================================ */
/* founder ================================================================ */
@media (max-width: 1100px) {
    .founder-card__image {
        width: 20%;
    }
    .founder-card__content {
        flex: 0.6;
        word-wrap: break-word;
    }
    .founders__flex {
        padding: 0 40px;
    }
}
@media (max-width: 900px) {
    .founder-card__image {
        display: none;
    }
}

/* footer ==================================================================== */
/* footer ==================================================================== */
@media (max-width: 991px) {
    .footer__top {
        align-items: center;
    }
    .footer__top {
        flex-direction: column;
    }
    .footer__bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .footer__legal {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .footer__newsletter {
        max-width: 100%;
        width: 100%;
    }

    .footer__form {
        flex-direction: column;
        align-items: stretch;
        border-radius: 24px;
        padding: 12px;
        gap: 10px;
        max-width: 100%;
    }

    .footer__input {
        width: 100%;
        min-width: 0;
        padding-right: 0;
        text-align: left;
    }

    .footer__submit {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
}

/* FORMATION ========================================================= */
/* FORMATION ========================================================= */
@media (max-width: 991px) {
    .corp-corpTab__container {
        padding: 0 40px
    }
    .orpTab__left {
        border-radius: 0
    }

    .ctaPricing__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .ctaPricing__card {
        border-radius: 0px
    }
}


/* AI-ACCOUNTING =========================================== */
/* AI-ACCOUNTING =========================================== */
@media (max-width: 991px) {
    #player {
        margin-top: 40px;
    }
    .kab__main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .slicecard {
        flex-direction: column;
        align-items: center;
        padding: 50px 50px;
    }
    .slicecard__right {
        display: none;
    }
    .slicecard__left ul {
        margin-bottom: 20px
    }
    .credit__cards {
        flex-direction: column;
        align-items: center;
    }
    
}

/* CONTACT ==================================== */
/* CONTACT ==================================== */
@media (max-width: 991px) {
    .perks .section__header {
        max-width: 75%;
    }
    .partners-fit__grid {
        flex-direction: column;
        align-items: center;
    }
    .referral-promo__container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .offering__grid {
        padding: 0 40px;
    }
    .progressLine__card-wrapper img {
        max-width: 350px;
    }
}


/* BLOG =========================================================== */
/* BLOG =========================================================== */
@media (max-width: 1180px) {
    .hero-news__main {
        gap: 40px;
    }
    .news-card__img {
        margin: 0 auto;
    }
    .news-card {
        padding: 0 40px;
        box-sizing: border-box;
    }
    .mini__title {
        margin-left: 60px;
    }
    .blogs__grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* ABOUT =========================================================== */
/* ABOUT =========================================================== */
@media (max-width: 991px) {
    .aboutHero__main {
        padding: 0 40px;
    }
    .started__top {
        flex-direction: column;
    }
    .started__info {
        padding: 0 40px;
    }
    .started__bottom {
        align-items: center;
        flex-wrap: wrap;
    }
    .people__group {
        align-items: center;
        justify-content: center;
        padding: 0 10%;
    }
}

/* PRICING =========================================================== */
/* PRICING =========================================================== */
@media (max-width: 991px) {
    .plans__main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .vip-club__container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .vip-club__content .btn {
        margin: 0 auto;
    }
    .simple-table td {
        padding-right: 120px;
    }
    .header-plans {
        transform: scale(0.9);
    }
    .header-spacer{
        width: 30%;
    }
}