/* =========================================
   RESPONSIVE.CSS — стили для мобильной версии (без шапки)
   ========================================= */




.hero-title-desktop {
    display: block;
}

.hero-title-mobile {
    display: none;
}


/* Планшеты (до 992px) */
@media (max-width: 992px) {
    /* Общие отступы секций */
    section {
        padding: 60px 0;
    }
    
    h2 {
        font-size: 32px;
        margin-bottom: 32px;
    }
    
    /* Hero блок */
    .hero h1 {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-image {
        margin-top: -150px;
        margin-right: -150px;
    }
    
    /* Преимущества (6 карточек) */
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Блок "Как проходит работа" */
    .steps-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .step-card-wide {
        grid-column: span 1;
    }
    
    /* Рейтинг и призыв */
    .rating-cta-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .rating-cta-left {
        text-align: center;
        max-width: 100%;
    }
    
    .cta-title {
        text-align: center;
    }
    
    /* Слайдер автомобилей */
    .cars-slider-card {
        width: 300px;
        min-width: calc((100vw - 80px) / 2);
    }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    /* Общие отступы */
    section {
        padding: 40px 0;
    }
    
    h2 {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }
    
    * {
        max-width: 100%;
    }
    
    
    
    
    /* Скрываем эллипсы подсветки */
    .hero-glow,
    .hero-glow2,
    .hero-glow3,
    .footer-glow {
        position: absolute;
        max-width: none;
        /* Не добавляем display: none, оставляем как есть */
    }

 /* Эллипс в Hero блоке */
    .hero-glow {
        width: 800px;
        height: 400px;
        top: 400px;
        left: -10px;
        opacity: 0.25;
        filter: blur(60px);
    }
    
    /* Эллипс в FAQ блоке */
    .hero-glow2 {
        width: 600px;
        height: 300px;
        top: -10px;
        left: -250px;
        opacity: 0.2;
        filter: blur(50px);
    }
    
    /* Эллипс в блоке "Мы в соцсетях" */
    .hero-glow3 {
        width: 700px;
        height: 350px;
        top: -200px;
        left: 50px;
        opacity: 0.2;
        filter: blur(60px);
    }

.footer-glow {
        width: -50px;
        height: 500px;
        bottom: -150px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.2;
        filter: blur(60px);
    }




    /* Hero блок */
.hero-title-desktop {
        display: none;
    }
    
    .hero-title-mobile {
        display: block;
        font-size: 24px;
        font-family: var(--font-family-accent);
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        margin-bottom: 24px;
        line-height: 1.3;
    }


    
    
    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 24px;
    }
    
    .hero .container {
        flex-direction: column;
        padding: 0 20px;
    }
    
    .hero-image {
        margin-top: 30px;
        margin-right: 0;
        text-align: center;
    }
    
    .hero-image img {
        max-width: 110%;
        margin: 0 auto;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
    }
    
    .hero-feature {
        max-width: 100%;
    }
    
    /* Преимущества (6 карточек) */
.advantages-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.advantage-card {
    padding: 24px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.advantage-card .card-icon {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 16px;
}

.advantage-card .card-icon img {
    width: 40px;
    height: 40px;
}

.advantage-card h5 {
    font-size: 18px;
    padding-right: 0;
    margin-bottom: 12px;
}

.advantage-card p {
    font-size: 14px;
    margin-top: 0;
}
    



.callback-section {
        padding: 40px 0;
    }
    
    .callback-card {
        flex-direction: column;
        border-radius: 20px;
        overflow: visible !important;
    }
    
    /* Левая часть с картинкой */
.callback-left {
    position: relative;
    min-height: 280px;
    overflow: visible !important;   /* Меняем с hidden на visible */
    background: transparent;
}

.callback-image {
    position: absolute;
    top: -100px;  /* Увеличиваем выезд вверх */
    left: -10px;  /* Увеличиваем выезд влево */
    width: 140%;  /* Увеличиваем ширину */
    height: 140%;  /* Увеличиваем высоту */
    object-fit: cover;
    z-index: 0;
    pointer-events: none;  /* Чтобы картинка не мешала кликам */
}


    
    /* PDF ссылка */
    .callback-pdf {
        position: absolute !important;
        top: 70% !important;
        left: 75% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    
    .pdf-link img {
    max-width: 124px !important;
    max-height: 124px !important;
    width: auto !important;
    height: auto !important;
}
    
    .pdf-link span {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    /* Правая часть с формой */
    .callback-right {
        padding: 30px 20px;
    }
    
    .callback-right h2 {
        font-size: 24px;
        text-align: left;
    }
    
    .callback-subtitle {
        font-size: 14px;
        text-align: left;
        margin-bottom: 24px;
    }
    
    /* Форма */
    .callback-form {
        gap: 15px;
    }
    
    .form-group input {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .checkbox-label span {
        font-size: 11px;
    }
    
    .callback-form .btn-primary {
        width: 100%;
        min-width: auto;
        padding: 14px 20px;
        font-size: 16px;
    }






























    /* Блок "О компании" */


.about {
    padding: 30px 0;
}

.about-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
}

.about-left h2 {
    font-size: 22px;
    text-align: left;
}

.about-right {
    text-align: left;
}

.about-stats-bg {
    padding: 80px 0 40px 0;
    background-size: 240% auto;
    background-position: center 0%;
    background-repeat: no-repeat;
}

.stats-cards {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    bottom: 0;
    position: relative;
    margin-top: 160px;  /* Опускаем карточки ниже */
}

.stat-card {
    text-align: left;  /* Выравнивание текста по левому краю */
    padding: 20px;
}

.stat-number {
    font-size: 28px;
    text-align: left;  /* Цифры по левому краю */
}

.stat-label {
    text-align: left;  /* Подписи по левому краю */
}


   






    /* Карусель фотографий */


@media (max-width: 768px) {
    * {
        max-width: 100%;
    }
    
    /* Возвращаем нормальную ширину для карусели */
    .carousel-track,
    .carousel-slide,
    .carousel-container {
        max-width: none !important;
    }
}



.fullwidth-carousel {
    padding: 40px 0;
}

.carousel-slide {
    width: 220px;
}

/* Нечётные слайды (1, 3, 5, 7...) — высота 296px */
.carousel-slide:nth-child(odd) {
    height: 296px;
}

/* Чётные слайды (2, 4, 6, 8...) — высота 215px */
.carousel-slide:nth-child(even) {
    height: 215px;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    








    /* Галерея Masonry — горизонтальный скролл на мобильных */
@media (max-width: 768px) {
    /* Заголовки не скроллятся */
    .image-gallery .container {
        overflow: visible;
        padding: 0 20px;
        margin-bottom: 20px;
    }
    
    .gallery-title {
        font-size: 28px;
        margin-bottom: 16px;
        text-align: center;
    }
    
    .gallery-description {
        font-size: 16px;
        margin-bottom: 24px;
        text-align: center;
    }
    
    /* Контейнер для скролла */
    .gallery-scroll-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 20px 0;
    }
    
    .gallery-grid {
        display: flex;
        flex-direction: row;
        gap: 15px;
        width: max-content;
        padding: 0 20px;
    }
    
    .gallery-item {
        width: 260px;
        min-width: 260px;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    
    .gallery-image {
        width: 260px;
        min-width: 260px;
    }
    
    .gallery-image img {
        width: 260px;
        height: auto;
        display: block;
    }

    
    .gallery-caption {
        margin-top: 12px;
        font-size: 14px;
        text-align: center;
    }
    
    /* Скрываем скроллбар */
    .gallery-scroll-container::-webkit-scrollbar {
        display: none;
    }
    
    .gallery-scroll-container {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}
    






    
    /* Рейтинги и статистика */
    .ratings-stats {
        padding: 40px 0;  /* Уменьшил паддинги сверху и снизу */
    }
    
    .ratings-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .ratings-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .rating-card {
        min-width: 328px;  /* Увеличил ширину карточки */
        max-width: 104px;
        width: 100%;
        padding: 25px 30px;
    }
    
    .rating-number {
        font-size: 28px;
    }
    
    .rating-stars {
        font-size: 16px;
    }
    
    .rating-icon img {
        height: 36px;  /* Увеличил иконки */
    }
    
    .rating-text {
        font-size: 13px;
    }

    





    
    /* FAQ блок */
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .faq-left {
        text-align: left;
    }
    
    .faq-left h2 {
        text-align: left;
    }
    
    .faq-left .btn-primary {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;  /* На всю ширину */
        max-width: 320px;  /* Максимальная ширина */
        margin: 0 auto;  /* Центрирование */
        min-width: auto;
    }

    
    .faq-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .faq-question {
        font-size: 16px;
        padding: 16px 20px;
    }
    
    .faq-answer {
        font-size: 14px;
    }
    









    /* Акция */

    
    .promotion-container {
        padding: 80px 20px;
        align-items: flex-start;  /* Выравнивание по левому краю */
        text-align: left;
    }
    
    .promotion-left {
        text-align: left;
        max-width: 100%;
    }


    .promotion-wrapper {
        position: relative;
        top: -80px;  /* Поднимает блок вверх */
    }
    
    .promotion-title {
        font-size: 32px;
        padding-top: 0px;
        text-align: left;
    }
    
    .promotion-subtitle {
        font-size: 16px;
        text-align: left;
        margin-bottom: 20px;
    }
    
    .promotion-features {
        display: flex;
        flex-direction: column;  /* Иконки и текст в колонку */
        align-items: flex-start;
        gap: 15px;
    }
    
    .promotion-feature {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .promotion-feature img {
        width: 40px;
        height: 40px;
    }
    
    .promotion-feature span {
        font-size: 14px;
        text-align: left;
    }
    
    /* Фоновое изображение */
    .promotion-bg {
        background-size: 250%;
        background-position: 50% 0%;
        background-repeat: no-repeat;
    }
    
    /* Таймер */
    .promotion-timer {
        font-size: 64px;
    }
    
    .timer-section {
        padding: 40px 0;
    }



    
    
    /* Блок "Как проходит работа" */
    .work-steps {
        padding: 50px 0;
    }
    
    .work-steps-title {
        font-size: 28px;
    }
    
    .work-steps-subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }
    
    .steps-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .step-card {
        padding: 25px 20px;
        text-align: center;
    }
    
    .step-icon img {
        margin: 0 auto;
    }
    
    .step-title {
        font-size: 16px;
        text-align: center;
    }
    
    .step-desc {
        text-align: center;
    }
    


/* Блок Рейтинг и призыв */

    .rating-cta {
        padding: 40px 0;
    }
    
    .rating-cta-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    
    .rating-cta-left {
        max-width: 100%;
        text-align: left;
    }
    
    .cta-title {
        font-size: 28px;
        text-align: left;
    }
    
    .cta-description {
        font-size: 16px;
        text-align: left;
        margin-bottom: 25px;
    }
    
    .rating-cta-left .btn-primary {
        min-width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .rating-cta-right {
        text-align: center;
    }
    
    .rating-cta-right img {
    max-width: 160%;  /* Увеличиваем ширину */
    height: auto;
    margin-left: 0%;
    
}

/* Блок примеры авто */

    .cars-slider-section {
        padding: 20px 0;
    }
    
    .cars-slider-title {
        font-size: 24px;
        margin-bottom: 32px;
    }
    
    .cars-slider-wrapper {
        padding: 0;
        position: relative;
    }
    
    /* Скрываем кнопки навигации на мобильных */
    .cars-slider-btn {
        display: none !important;
    }
    
    .cars-slider-card {
        width: 300px !important;
        
    }
    
    .cars-card-image {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }
    
    .cars-card-content {
        padding: 15px 0 0 0;
    }
    
    .cars-card-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .cars-card-specs-list {
        margin-bottom: 15px;
    }
    
    .spec-row {
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .spec-label {
        font-size: 13px;
    }
    
    .spec-dots {
        margin: 0 5px;
    }
    
    .spec-value {
        font-size: 13px;
    }
    
    .cars-card-prices {
        gap: 15px;
        padding-top: 8px;
        margin-bottom: 12px;
    }
    
    .price-label {
        font-size: 11px;
    }
    
    .price-value {
        font-size: 18px;
    }
    
    .cars-card-saving {
        font-size: 14px;
        padding-top: 10px;
    }
    
    .saving-value {
        font-size: 24px;
    }
























    .social-showcase {
        padding: 50px 0;
    }
    
    .social-showcase-title {
        font-size: 28px;
        text-align: center;
        margin-bottom: 30px;
    }
    
    /* Общие стили */
.social-features {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .social-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 15px;
        margin-bottom: 40px;
        padding: 0 25px;
    }
    
    .social-feature {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .social-feature span {
    font-size: 14px;
    }
    /* Нечётные (1 и 3) — влево */
    .social-feature:nth-child(odd) {
        justify-self: start;
    }
    
    /* Чётные (2 и 4) — вправо */
    .social-feature:nth-child(even) {
        justify-self: end;
    }
}
    

/* Галерея карточек */
.social-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 20px;
}

/* Левая картинка (Telegram) */
.gallery-item-left {
    order: 1;
    width: calc(30% - 7.5px);
    flex: 0 0 calc(30% - 7.5px);
    height: 216px;  /* Фиксированная высота */
    display: flex;
    flex-direction: column;
}

/* Правая картинка (Max) */
.gallery-item-right {
    order: 2;
    width: calc(30% - 7.5px);
    flex: 0 0 calc(30% - 7.5px);
    height: 216px;  /* Фиксированная высота */
    display: flex;
    flex-direction: column;
}

/* Центральная картинка (YouTube) */
.gallery-item-center {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    height: 216px;  /* Фиксированная высота */
    display: flex;
    flex-direction: column;
}


/* Контейнер для изображения */
.gallery-item-left a,
.gallery-item-right a,
.gallery-item-center a {
    display: block;
    width: 100%;
    line-height: 0;
    flex-shrink: 0;
}

/* Изображения */
.gallery-item-left img,
.gallery-item-right img,
.gallery-item-center img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Подписи — прижимаем к низу */
.social-gallery-caption {
    margin-top: auto;
    font-size: 16px;
    padding: 10px;
    text-align: center;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Уменьшаем иконку стрелки */
.social-gallery-caption img {
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
}



    





    
    /* Кнопки */
    .btn-primary {
        min-width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    /* Контакты */
    .contacts-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }
    
    .contact-block {
        text-align: center;
    }
    
    .contact-address {
        flex: 1;
    }
    
    .contact-phone {
        white-space: normal;
    }
    
    .social-icons-row {
        justify-content: center;
    }
    
    .contact-callback-block {
        display: flex;
        justify-content: center;
    }
    
    .contact-callback-btn {
        width: 100%;
        max-width: 271px;
    }
    
    /* Яндекс карта */
    .yandex-map-wrapper {
        height: 300px;
    }
    
    /* Футер */
    .footer-nav ul {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    
    .footer-nav a {
        white-space: normal;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-legal .separator {
        display: none;
    }
}

/* Маленькие мобильные (до 480px) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .gallery-grid {
        column-count: 1;
    }
    
    .carousel-slide {
        width: 220px;
        height: 170px;
    }
    
    .promotion-timer {
        font-size: 64px;
    }
    
    .contact-callback-btn {
        font-size: 16px;
        padding: 12px 20px;
    }
}