/* ========== Tablet (≤1200px) ========== */
@media (max-width: 1200px) {
    .container-fluid {
        padding-left: 40px;
        padding-right: 40px;
    }

    .hero__title {
        font-size: 48px;
    }
    .why-classvet {
        padding: 80px 0 100px;
    }

    .why-classvet__title {
        font-size: 36px;
    }

    .why-classvet__content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-classvet__text-block {
        padding-right: 0;
    }

    .why-classvet__image {
        max-width: 400px;
        margin: 0 auto;
    }

    .why-classvet__question {
        font-size: 28px;
    }

    .why-classvet__solution-title {
        font-size: 30px;
    }

    .why-classvet__features {
        gap: 20px;
    }

    .feature-card {
        padding: 35px 25px;
    }

    .feature-card__title {
        font-size: 20px;
        min-height: auto;
    }
    .subscription-benefits {
        padding: 80px 0 100px;
    }

    .subscription-benefits__title {
        font-size: 42px;
        margin-bottom: 60px;
    }

    .benefits-grid {
        gap: 25px;
    }

    .benefit-card {
        padding: 35px 30px;
    }

    .benefit-card__title {
        font-size: 24px;
    }

    .benefit-card__text {
        font-size: 15px;
    }

    .benefit-icon svg {
        max-width: 120px;
    }
    .steps-section {
        padding: 80px 0;
    }

    .steps-section__title {
        font-size: 42px;
        margin-bottom: 60px;
    }

    .steps-grid {
        gap: 30px;
    }

    .step-card__inner {
        padding: 35px 25px;
        min-height: 260px;
    }

    .step-card__connector--right {
        right: -40px;
    }

    .cta-section {
        padding: 100px 0;
    }

    .cta-block__title {
        font-size: 46px;
    }

    .cta-block__text {
        font-size: 17px;
    }

}

/* Планшеты (до 1024px) */
@media (max-width: 1024px) {
    .subscription-benefits {
        padding: 60px 0 80px;
    }

    .subscription-benefits__title {
        font-size: 36px;
        margin-bottom: 50px;
    }

    /* Перестраиваем grid на 3 колонки */
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Новое позиционирование для 3 колонок */
    .benefit-card[data-benefit="access"] {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .benefit-card[data-benefit="experts"] {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .benefit-icon[data-icon="path"] {
        grid-column: 3;
        grid-row: 1;
        margin: 0;
    }

    .benefit-icon[data-icon="clock"] {
        grid-column: 1;
        grid-row: 2;
    }

    .benefit-card[data-benefit="approach"] {
        grid-column: 2;
        grid-row: 2;
    }

    .benefit-icon[data-icon="globe"] {
        grid-column: 1;
        grid-row: 3;
    }

    .benefit-card[data-benefit="certificates"] {
        grid-column: 2 / 4;
        grid-row: 3;
    }

    .benefit-card[data-benefit="economy"] {
        grid-column: 1;
        grid-row: 4;
    }

    .benefit-icon[data-icon="glasses"] {
        grid-column: 2;
        grid-row: 4;
    }

    .benefit-card[data-benefit="community"] {
        grid-column: 3;
        grid-row: 4;
    }

    .benefit-icon[data-icon="book"] {
        grid-column: 2;
        grid-row: 5;
    }

    .benefit-card {
        padding: 30px 25px;
        min-height: 160px;
    }

    .benefit-card__title {
        font-size: 22px;
    }
    .steps-section {
        padding: 60px 0;
    }

    .steps-section__title {
        font-size: 36px;
        margin-bottom: 50px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 600px;
    }

    .step-card__connector {
        display: none;
    }

    .steps-grid::before {
        display: none;
    }

    .step-card::before {
        top: 20px;
        left: 20px;
        transform: none;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .step-card:hover::before {
        transform: scale(1.2) rotate(360deg);
    }

    .step-card__inner {
        min-height: 200px;
        padding-left: 80px;
    }

    .step-card__header {
        margin-bottom: 20px;
    }

    .cta-section {
        padding: 80px 0;
    }

    .cta-block__title {
        font-size: 40px;
    }

    .cta-block__text {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .cta-block__button {
        padding: 18px 50px;
    }
}

/* ========== Mobile (≤768px) ========== */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero {
        padding: 60px 0;
    }

    .hero__title {
        font-size: 36px;
    }

    .hero__description {
        font-size: 16px;
    }

    .hero__buttons {
        flex-direction: column;
    }

    .hero__buttons .btn {
        width: 100%;
    }

    .hero__illustration {
        margin-top: 40px;
    }
    .why-classvet {
        padding: 60px 0 80px;
    }

    .why-classvet__header {
        margin-bottom: 60px;
    }

    .why-classvet__title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .why-classvet__title br {
        display: none;
    }

    .why-classvet__subtitle {
        font-size: 16px;
    }

    .why-classvet__description {
        font-size: 15px;
    }

    .why-classvet__question {
        font-size: 24px;
        margin: 40px 0 20px;
    }

    .why-classvet__list li {
        font-size: 15px;
        padding-left: 20px;
    }

    .why-classvet__solution {
        padding: 30px 25px;
        border-radius: 15px;
    }

    .why-classvet__solution-title {
        font-size: 24px;
    }

    .why-classvet__solution-title br {
        display: none;
    }

    .why-classvet__solution-text {
        font-size: 15px;
    }

    .why-classvet__features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .feature-card {
        padding: 30px 25px;
    }

    .feature-card__number {
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .feature-card__title {
        font-size: 20px;
    }

    .feature-card__title br {
        display: none;
    }

    .feature-card__content {
        font-size: 14px;
    }

    /* Убираем tooltip на мобильных */
    .feature-card::after {
        display: none;
    }

    /* Убираем hover эффекты на мобильных */
    .feature-card:hover {
        transform: none;
    }
    .subscription-benefits {
        padding: 50px 0 60px;
    }

    .subscription-benefits__title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    /* Перестраиваем grid на 2 колонки */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Все карточки и иконки занимают по 1 колонке */
    .benefit-card,
    .benefit-icon {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }

    /* Большие карточки на всю ширину */
    .benefit-card--large {
        grid-column: span 2 !important;
    }

    .benefit-card {
        padding: 25px 20px;
        min-height: 140px;
    }

    .benefit-card__title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .benefit-card__text {
        font-size: 14px;
    }

    .benefit-icon svg {
        max-width: 100px;
    }

    /* Убираем сложные эффекты на планшетах */
    .benefit-card:hover {
        transform: translateY(-5px);
    }

    .benefit-icon:hover svg {
        transform: scale(1.05);
    }
    .steps-section {
        padding: 50px 0;
    }

    .steps-section__title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .step-card {
        animation-delay: 0s !important;
    }

    .step-card:hover {
        transform: translateY(-5px);
    }

    .step-card::before {
        width: 35px;
        height: 35px;
        font-size: 18px;
        top: 15px;
        left: 15px;
    }

    .step-card__inner {
        padding: 25px 20px 25px 65px;
        min-height: 180px;
    }

    .step-card__number {
        font-size: 18px;
    }

    .step-card__label {
        font-size: 13px;
    }

    .step-card__text {
        font-size: 15px;
    }

    .step-card__logo-svg {
        max-width: 160px;
    }

    .cta-section {
        padding: 60px 0;
    }

    .cta-block__title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .cta-block__title br {
        display: none;
    }

    .cta-block__text {
        font-size: 15px;
        margin-bottom: 35px;
    }

    .cta-block__button {
        padding: 16px 40px;
        font-size: 16px;
    }

    .cta-block__button-logo {
        width: 150px;
    }

    .cta-block__decoration {
        display: none;
    }
    .logo > img {
        width: 50%;
        float: right;
    }
    .mobile-menu__header > .logo > img {
        float: unset;
        margin: 16px 0 0 0;
    }

}

/* ========== Small Mobile (≤480px) ========== */
@media (max-width: 480px) {
    .hero__title {
        font-size: 28px;
    }

    .logo {
        font-size: 24px;
    }
    .why-classvet {
        padding: 40px 0 60px;
    }

    .why-classvet__header {
        margin-bottom: 40px;
    }

    .why-classvet__title {
        font-size: 24px;
        line-height: 1.4;
    }

    .why-classvet__subtitle {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .why-classvet__description {
        font-size: 14px;
    }

    .why-classvet__content {
        gap: 30px;
        margin-bottom: 50px;
    }

    .why-classvet__question {
        font-size: 20px;
        margin: 30px 0 15px;
    }

    .why-classvet__list {
        margin-bottom: 20px;
    }

    .why-classvet__list li {
        font-size: 14px;
        margin-bottom: 12px;
        padding-left: 18px;
    }

    .why-classvet__list li::before {
        width: 5px;
        height: 5px;
        top: 10px;
    }

    .why-classvet__solution {
        padding: 25px 20px;
        margin-top: 30px;
    }

    .why-classvet__solution-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .why-classvet__solution-text {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .why-classvet__solution-subtitle {
        font-size: 16px;
        margin-top: 20px;
    }

    .why-classvet__image {
        max-width: 100%;
    }

    .why-classvet__features {
        gap: 15px;
        margin-top: 30px;
    }

    .feature-card {
        padding: 25px 20px;
        border-radius: 15px;
    }

    .feature-card__number {
        width: 45px;
        height: 45px;
        font-size: 20px;
        margin-bottom: 15px;
    }

    .feature-card__title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .feature-card__content {
        font-size: 14px;
        line-height: 1.6;
    }

    .feature-card__content p {
        margin-bottom: 12px;
    }
    .why-classvet__img {
        width: 40%;
        margin: 0 auto;
    }
    .subscription-benefits {
        padding: 40px 0 50px;
    }

    .subscription-benefits__title {
        font-size: 24px;
        margin-bottom: 30px;
        line-height: 1.3;
    }

    /* Одна колонка на мобильных */
    .benefits-grid {
        grid-template-columns: 100%;
        gap: 15px;
    }

    .benefit-card,
    .benefit-icon {
        grid-column: span 1 !important;
    }

    .benefit-card {
        padding: 25px 20px;
        min-height: 120px;
    }

    .benefit-card--large,
    .benefit-card--medium,
    .benefit-card--small {
        min-height: 120px;
    }

    .benefit-card__title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .benefit-card__text {
        font-size: 13px;
        line-height: 1.5;
    }

    .benefit-icon {
        padding: 15px;
        min-height: 100px;
    }

    .benefit-icon svg {
        max-width: 80px;
    }

    /* Убираем все hover эффекты на мобильных */
    .benefit-card:hover {
        transform: none;
    }

    .benefit-icon:hover svg {
        transform: none;
    }

    /* Упрощаем декоративные элементы */
    .subscription-benefits::before,
    .subscription-benefits::after {
        display: none;
    }
    .benefit-icon{display: none;}
    .steps-section {
        padding: 40px 0;
    }

    .steps-section__title {
        font-size: 24px;
        margin-bottom: 30px;
        line-height: 1.3;
    }

    .steps-grid {
        gap: 30px;
    }

    .step-card::before {
        width: 30px;
        height: 30px;
        font-size: 16px;
        top: 12px;
        left: 12px;
    }

    .step-card__inner {
        padding: 20px 15px 20px 55px;
        min-height: 160px;
        border-radius: 15px;
    }

    .step-card__header {
        margin-bottom: 15px;
    }

    .step-card__number {
        font-size: 16px;
    }

    .step-card__label {
        font-size: 12px;
    }

    .step-card__text {
        font-size: 14px;
        line-height: 1.5;
    }

    .step-card__logo {
        padding: 15px 0;
    }

    .step-card__logo-svg {
        max-width: 140px;
    }

    .cta-section {
        padding: 50px 0;
    }

    .cta-block__title {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .cta-block__text {
        font-size: 14px;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    .cta-block__button {
        padding: 14px 35px;
        font-size: 15px;
        border-radius: 40px;
    }

    .cta-block__button-logo {
        width: 130px;
    }
}
/* Очень маленькие экраны (до 360px) */
@media (max-width: 360px) {
    .steps-section__title {
        font-size: 22px;
    }

    .step-card__inner {
        padding: 18px 12px 18px 50px;
    }

    .step-card__text {
        font-size: 13px;
    }

    .cta-block__title {
        font-size: 24px;
    }

    .cta-block__text {
        font-size: 13px;
    }

    .cta-block__button {
        padding: 12px 30px;
    }

    .cta-block__button-logo {
        width: 120px;
    }
}
/* ========== Tablet (≤1200px) ========== */
@media (max-width: 1200px) {
    .navbar-nav {
        gap: 0;
    }

    .navbar-nav .nav-link {
        margin: 0 12px;
        font-size: 15px;
    }
}

/* ========== Mobile (≤992px) ========== */
@media (max-width: 992px) {
    .mobile-menu-btn {
        display: block;
    }

    .navbar-collapse {
        display: none !important;
    }
}

/* ========== Small Mobile (≤768px) ========== */
@media (max-width: 768px) {
    .header {
        padding: 12px 0;
    }

    .logo {
        font-size: 24px;
    }

    .mobile-menu {
        width: 280px;
    }
    .step-card:hover .step-card__logo-svg {
        transform: none;
    }

    .cta-section::before {
        animation: none;
    }

    .cta-block__decoration {
        animation: none;
    }

    .cta-block__button {
        animation: none;
    }

    .step-card__inner::after {
        display: none;
    }
}

/* ========== Extra Small (≤480px) ========== */
@media (max-width: 480px) {
    .mobile-menu {
        width: 100%;
        max-width: 100vw;
    }
}
/* Landscape ориентация для мобильных */
@media (max-height: 600px) and (orientation: landscape) {
    .why-classvet {
        padding: 40px 0 50px;
    }

    .why-classvet__header {
        margin-bottom: 30px;
    }

    .why-classvet__title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .why-classvet__image {
        max-width: 300px;
    }

    .feature-card {
        padding: 20px 18px;
    }

    .feature-card__number {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: 12px;
    }
    .why-classvet__img {
        width: 40%;
        margin: 0 auto;
    }
    .steps-section {
        padding: 40px 0;
    }

    .steps-section__title {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .step-card::before {
        display: none;
    }

    .step-card__inner {
        padding: 20px;
        min-height: 150px;
    }

    .cta-section {
        padding: 40px 0;
    }

    .cta-block__title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .cta-block__text {
        margin-bottom: 25px;
    }
}
/* Уменьшенное движение */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}