:root {
    /* Main colors */
    --orange: #E16B28;
    --orange-hover: #EE7936;

    /* Monochrome */
    --white: #FFFFFF;
    --black: #000000;
    --page-bg: #F5EEE4;
    --bg1: #E4DFD4;
    --bg2: #E4DFD4;
    --hover1: #ffe7ce;

    /* Other */
    --green: #5A5F4A;
    --green-bg: #22231D;

    /* Основные шрифтовые семейства */
    --manrope: 'Manrope', sans-serif;
    --raleway: 'Raleway', sans-serif;
    --handwritter: 'DO-Script', cursive;
}

/* Подключаем внешку калиграфического шрифта */
    @font-face {
    font-family: 'DO-Script';
    src: url('assets/fonts/DO-Script-Regular.woff') format('woff');
    font-style: normal;
    font-display: swap; /* Чтобы текст не пропадал во время загрузки */
    }

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* cursor: none !important; */
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

/* ============================================================================= */
/* ================================= Тестирование/другое ================================= */
/* ============================================================================= */
/* * {
    outline: 1px solid red !important;
    outline-offset: -1px;
}
 */


/* =====================================================================================================================
Основные шрифтовые семейства 
=======================================================================================================================*/

.title {
    color: #000;
    font-family: var(--raleway);
    font-size: 70px;
    font-style: normal;
    font-weight: 700;
    line-height: 70px; /* 100% */
    letter-spacing: -3.5px;
}

.hand-writter-text {
    color: var(--orange);
    font-family: 'DO-Script', cursive;
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 70px; /* 87.5% */
}

@media (max-width: 764px) {
    .title,
    .hand-writter-text {
        font-size: 60px;
        line-height: 60px;
    }
}

@media (max-width: 764px) {
    .title,
    .hand-writter-text {
        font-size: 46px;
        line-height: 45px;
    }
}

.subtitle {
    color: #000;
    font-family: var(--manrope);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 109.091% */
    letter-spacing: -0.88px;
}

.text-regular {
    color: #000;
    font-family: var(--manrope);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.text-regular-short {
    color: #000;
    font-family: var(--manrope);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.button-l {
    color: #000;
    font-family: var(--manrope);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}



/* =====================================================================================================================
General
=======================================================================================================================*/

.container {
    display: flex;
    max-width: 1680px;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 24px;
}

body {
    background-color: var(--page-bg);
}

/* Базовые стили остаются без изменений */
.button-m-orange {
    color: var(--page-bg);
    font-family: var(--manrope);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px; 
    background-color: var(--orange);
    padding: 22px 60px;
    border-radius: 999px;
    transition: background-color 0.2s ease, transform 0.2s ease; 
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}

.button-m-orange-outline {
    color: var(--page-bg); 
    background-color: transparent;
    font-family: var(--manrope);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    border: 1px solid var(--orange);
    padding: 22px 60px;
    border-radius: 999px;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

@media (max-width: 500px) {
    .button-m-orange,
    .button-m-orange-outline{
        font-size: 16px;
    }
}

/* ОБОРАЧИВАЕМ ХОВЕРЫ В ПРОВЕРКУ МЫШКИ */
@media (hover: hover) {
    .button-m-orange:hover {
        background-color: var(--orange-hover);
        transform: translateY(-2px);
    }

    .button-m-orange-outline:hover {
        background-color: var(--page-bg);
        color: var(--orange); 
        border: 1px solid var(--page-bg);
        transform: translateY(-2px);
    }
}

/* =====================================================================================================================
Header
=======================================================================================================================*/
/* --- ТВОЙ ОРИГИНАЛЬНЫЙ КОД ДЛЯ ДЕСКТОПА --- */
.header-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    max-width: 1680px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    margin: 8px 0px;
    overflow: hidden;
    box-sizing: border-box;
}

.header-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

.header-link-item {
    color: var(--page-bg);
    font-family: var(--manrope);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    transition: color 0.3s ease, transform 0.2s ease;
    padding-right: 24px;
}

.header-action {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}



@media (max-width: 1300px) {
    .header-action .header-btn {
        display: none;
    }
}

.header-langsw {
    color: var(--page-bg);
    text-decoration: none;
}

.header-langsw:hover {
    color: var(--hover1);
}

.header-social-list {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.header-social-item {
    width: 56px;
    height: 56px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.header-social-item:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
    .header-social-item {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

@media (max-width: 768px) {
    .header-social-item {
        width: 42px;
        height: 42px;
    }
}

.header-social-item-icon {
    width: 26px;
    height: 26px;
}

@media (max-width: 768px) {
    .header-social-item-icon {
        width: 20px;
    height: 20px;
    }
}


.header-btn {
    display: flex;
    height: 56px;
    padding: 0 50px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 99px;
    background-color: var(--orange);
    color: var(--page-bg);
    transition: background-color 0.2s ease, transform 0.2s ease; 
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-btn:hover {
    background-color: var(--orange-hover);
}

/* --- СКРЫТИЕ МОБИЛЬНЫХ ЭЛЕМЕНТОВ НА ДЕСКТОПЕ --- */
.menu-open-btn, .logo-mob-white, .logo-mob-black {
    display: none;
}

/* --- АДАПТИВНАЯ ВЕРСИЯ (ПЛАНШЕТ И МОБИЛЬНЫЙ) --- */
@media (max-width: 1024px) {
    .main-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    .header-container {
        position: fixed; /* Для фиксации при скролле */
        left: 0;
        transform: none;
        margin: 0;
        max-width: 100%;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    /* Состояние при скролле */
    .header-container.scrolled {
        background-color: #F5EEE4;
    }

    /* Переключение логотипов */
    .logo-desktop { display: none; }
    .logo-mob-white { display: block; }
    .header-container.scrolled .logo-mob-white { display: none; }
    .header-container.scrolled .logo-mob-black { display: block; }

    /* Бургер и его переключение */
    .menu-open-btn {
        display: block;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        order: -1; /* Ставим слева */
    }
    .burger-black { display: none; }
    .header-container.scrolled .burger-white { display: none; }
    .header-container.scrolled .burger-black { display: block; }

    /* Скрываем десктопную навигацию */
    .desktop-nav {
        display: none;
    }

    /* Корректируем отступы в мобильной шапке */
    .header-links { gap: 16px; }
    
    /* Соцсети и кнопка на планшете */
    .header-action { gap: 12px; }
}

/* ПЛАНШЕТ: Кнопка есть */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-action .header-btn {
        display: flex;
        padding: 0 30px;
        font-size: 14px;
        height: 48px;
    }
}

/* МОБИЛКА: Кнопка пропадает */
@media (max-width: 767px) {
    .header-action .header-btn {
        display: none;
    }
}

/* Скрываем десктопную навигацию */
@media (max-width: 410px) {
    .header-langsw {
        display: none;
    }

}

/* --- СТИЛИ ПОЛНОЭКРАННОГО МЕНЮ --- */
.mobile-menu {
    position: fixed;
    inset: 0;
    background-color: #F5EEE4;
    z-index: 200;
    display: none; /* Скрыто по умолчанию */
    flex-direction: column;
}

.mobile-menu.active {
    display: flex;
}

.mob-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
}

.mob-menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mob-menu-top .header-langsw {
    display: block !important;
    visibility: visible !important;
    color: #000000 !important; /* Делаем черным, чтобы точно увидеть */
    font-size: 20px;
    z-index: 100;
}

.menu-close-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg1);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.mob-menu-center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.mob-logo-center {
    width: 140px;
    margin-bottom: 40px;
}

.mob-nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mob-link {
    font-family: var(--manrope);
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: #000;
}

.mob-menu-bottom {
    padding-top: 20px;
}

.header-action .header-btn {
    font-size: 16px;
    height: 56px;
}

.mob-menu-bottom .header-btn {
    width: 100%;
}


/* =====================================================================================================================
#1 Hero
=======================================================================================================================*/

.hero-wrapper {
    width: 100%;
    height: 100vh;
    background-color: #1C211C; 
    background-image: url(assets/img/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 32px;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    height: 100%;
    gap: 34px; 
    margin: 0 auto;
}


.hero-title {
    color: var(--whute, #F4EFE4);
    font-family: var(--raleway);
    font-size: 90px;
    font-weight: 700;
    line-height: 1.0; /* Немного увеличил, чтобы буквы не слипались */
    letter-spacing: -0.05em; /* Лучше в em, чтобы масштабировалось с текстом */
    text-align: center;
}

/* Спан наследует всё, кроме стиля шрифта */
.hero-title-span {
    font-style: italic;
}

/* Оранжевый цвет */
.hero-title-orange {
    color: var(--orange);
}

.hero-buttons {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

@media (max-width: 764px) {
    .hero-buttons {
        flex-direction: column;
    }
}

/* --- ДЕСКТОП: Логотип ведет себя обычно --- */
.logo {
    position: relative; /* Стандартное поведение */
    left: auto;
    top: auto;
    transform: none;
}

.desktop-nav {
    margin-left: 0; /* Убираем лишний отступ на десктопе */
}

.header-link-item:hover {
    color: var(--hover1);
}

/* --- МОБИЛКА И ПЛАНШЕТ ( < 1024px ) --- */
@media (max-width: 1024px) {
    
    .header-container {
        position: fixed;
        /* Убедись, что контейнер на всю ширину, чтобы отсчет шел от края экрана */
        width: 100%; 
    }

    /* Логотип становится абсолютным ТОЛЬКО ТУТ */
    .logo-mob-white, 
    .logo-mob-black {
        position: absolute;
        /* На мобилках 72px — это очень много (почти четверть экрана), 
           обычно ставят 20-24px. Но если дизайн требует 72px, ставь его: */
        left: 82px; 
        top: 50%;
        transform: translateY(-50%);
        z-index: 15;
    }

    /* Бургер (меню) должен стоять так, чтобы не перекрывать логотип */
    .menu-open-btn {
        position: absolute;
        left: 24px; /* Бургер будет с самого края, а логотип — правее (на 72px) */
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 1400px) {
    .hero-title {
        font-size: 72px;
        font-weight: 700;
        line-height: 1.0; /* Немного увеличил, чтобы буквы не слипались */
    }
}

@media (max-width: 768px) {
    .hero-title br {
        display: none;
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 42px; /* Чуть меньше для узких телефонов */
        letter-spacing: -1px;
    }
}






/* =====================================================================================================================
#2 About 
=======================================================================================================================*/

.about {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-top: 150px; 
    flex: 1 1;
}

.about > * {
    flex: 1; /* Это заставит их растягиваться поровну */
    min-width: 0; /* Страховка, чтобы контент не "распирал" колонку */
}

@media (max-width: 1280px) {
    .about {
        flex-direction: column;
        gap: 32px;
        margin-top: 100px; 
    }
}

.about-title {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (max-width: 764px) {
    .about-title br {
        display: none;
    }
}

.about-advantage-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 768px) {
    .about-advantage-list {
        grid-template-columns: 1fr;
    }
}

.about-advantage-item {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.about-advantage-icon {
    display: flex;
    width: 60px;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--orange);
    border-radius: 16px;
}

.about-advantage-item-text {
    gap: 4px;
}

.about-description {
    display: flex;
    flex-direction: row;
    gap: 48px;
}

.about-description .text-regular {
    flex: 1; /* Каждый блок заберет 1 равную часть пространства */
    text-align: left; 
}

@media (max-width: 768px) {
    .about-description {
        flex-direction: column;
        gap: 36px;
    }
}


.full-bleed-image {
    width: 100%;
    line-height: 0; /* Убирает микро-отступ под картинкой */
}

.full-bleed-image img {
    width: 100%;   /* Растягивает на всю ширину родителя (экрана) */
    height: auto;  /* Самое важное: сохраняет пропорции при любом размере */
    display: block; /* Убирает лишние зазоры снизу */
}

/* =====================================================================================================================
#3 Map 
=======================================================================================================================*/

/* Основная секция */
.map-wrapper {
    display: flex;
    flex-direction: column;
    background-color: var(--green-bg);
    padding: 72px 0 0 0; /* Отступ сверху для красоты */
    overflow: hidden; /* Чтобы карта не раздувала весь сайт */
    margin-top: -5px;
}

@media (max-width: 764px) {
    .map-wrapper {
        padding: 42px 0 0 0;
    }
}

.map-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 24px;
}

@media (max-width: 764px) {
    .map-title {
        flex-direction: column;
        gap: 32px;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.map-title h2 {
    color: var(--page-bg);
}

.map-title span {
    color: var(--orange);
}

.map-title p {
    color: var(--page-bg);
}

.map-description-text {
    max-width: 300px;
    text-align: right;
}

@media (max-width: 764px) {
    .map-description-text {
        flex-direction: column;
        gap: 32px;
        max-width: 100%;
        text-align: left;
    }
}

.map-description-text span {
    color: var(--green);
}


/* ... заголовки оставляем как есть ... */

/* Общая зона карты (неподвижная) */
.map-main-area {
    position: relative; /* Якорь для подсказки */
    width: 100%;
    overflow: hidden;
}

/* Обертка для скролла (движущаяся часть) */
.map-scroll-container {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.map-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Центрирование карты на больших экранах */
.map-image-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ПОДСКАЗКА: замерла по центру */
.swipe-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20; /* Поверх всего */
    
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Добавил фон для читаемости */
    backdrop-filter: blur(4px); /* Эффект стекла */
    border-radius: 99px;
    
    pointer-events: none; /* Пропускает касания сквозь себя на карту */
    opacity: 0; /* Скрыта на десктопе */
    transition: opacity 0.3s ease;
    min-width: max-content;
}

/* Анимация покачивания всей группы */
@keyframes swipeHintMove {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(-55%); }
    75% { transform: translateX(-45%); }
}

.swipe-hint-text {
    color: var(--page-bg);
    font-family: Manrope;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.88px;
}

.swipe-hint-icon {
    width: 48px;
    height: 48px;
}


/* Карта */
.map-bleed-image {
    display: block;
    width: 100%;
    max-width: 1600px;
    height: auto;
    flex-shrink: 0;
}

/* --- АДАПТИВ --- */
@media (max-width: 1024px) {
    .swipe-hint {
        opacity: 1; /* Показываем только на мобилках */
        animation: swipeHintMove 2.5s infinite ease-in-out;
    }

    .map-image-wrapper {
        display: flex; /* Убедись, что это есть */
        justify-content: flex-start; /* Оставляем так, чтобы JS мог скроллить */
        width: max-content; /* ВАЖНО: обертка должна быть по размеру картинки */
    }

    .map-bleed-image {
        max-width: none;
        width: auto;
        height: 100vh; /* Карта на всю высоту экрана */
        display: block;
    }
}


/* =====================================================================================================================
#3 Plans
=======================================================================================================================*/

.plans-wrapper {
    background-color: var(--green-bg);
    margin-top: -2px;
}

.plans-wrapper h2 {
    padding-bottom: 32px;
    color: var(--page-bg);
}

.plans {
    display: flex;
    flex-direction: row;
    padding-bottom: 32px;
    gap: 72px;
    margin-bottom: 42px;
}

.plans h2 {
    color: var(--page-bg);
}

.filter-list {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
}

.filter-selected {
    display: flex;
    padding: 10px 30px 14px 30px;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    color: var(--page-bg);
    transition: color 0.3s ease, background 0.3s ease;
    background: var(--green);
}

.filter-default {
    display: flex;
    padding: 10px 30px 14px 30px;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    color: var(--page-bg);
    transition: color 0.3s ease, background 0.3s ease;
    border: 1px solid var(--green);
}

.filter-body {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    gap: 30px;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--green);
}

.stats-title {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.stats-title-number {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-title-number h4 {
    color: var(--green);
}
.stats-title-number h5 {
    color: var(--page-bg);
    font-family: var(--manrope);
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 60% */
    letter-spacing: -1.6px;
}

.stats-title p {
    color: var(--page-bg);
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 30px;
    padding-bottom: 20px;
}

.specs-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.specs-item h4 {
    color: var(--green);
}

.specs-item h5 {
    color: var(--page-bg);
}

/* Обновленные стили для фильтров */
.filter-btn {
    display: flex;
    padding: 12px 30px 12px 30px;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    font-family: var(--manrope);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    border: 1px solid var(--green);
    color: var(--page-bg);
}

@media (max-width: 764px) {
    .filter-btn {
        padding: 12px 16px 12px 16px;
    }
}

/* Состояние активной кнопки */
.filter-btn.active {
    background: var(--green);
    color: var(--page-bg);
}

.filter-btn:hover {
    background: rgba(90, 95, 74, 0.5); /* Полупрозрачный зеленый */
}

/* Слайдер и Рамка */
.image-frame {
    width: 100%;
    /* Если хочешь фиксированную высоту, но лучше использовать aspect-ratio */
    height: 600px; 
    background-color: #FFFFFF;
    border-radius: 38px;
    padding: 36px; /* Паддинг внутри рамки */
    overflow: hidden; /* Важно для слайдера */
    flex: 1; /* Чтобы занимал оставшееся место справа */
}

@media (max-width: 500px) {
    .image-frame {
        padding: 24px;
        border-radius: 24px;
    }
}


/* Адаптив для блоков */
@media (max-width: 1024px) {
    .plans {
        flex-direction: column;
        gap: 40px;
    }
    
    .image-frame {
        margin-left: 0;
        height: 400px;
    }
}

/* --- 2. Контейнер Свайпера --- */
.planSwiper {
    width: 100%;
    height: 100%;
    padding-bottom: 50px; 
    box-sizing: border-box; /* Чтобы паддинг не увеличивал высоту, а сжимал контент */
}

.swiper-slide {
    width: 100% !important;  
    height: 100%;            
    
    display: flex;            
    justify-content: center;  
    align-items: center;     
    
    box-sizing: border-box;
}

.swiper-slide img {
    /* 1. Размеры */
    max-width: 100%;       
    max-height: 100%;      
    
    width: auto;
    height: auto;
    
    /* 2. Центрирование "Брутфорс" (на случай, если flex не сработал) */
    margin: 0 auto;
    display: block;
    
    /* 3. Пропорции */
    object-fit: contain;
}

/* --- 5. Пагинация (Точки) --- */
.planSwiper .swiper-pagination {
    position: absolute !important;
    bottom: 0 !important; /* Прибиваем к самому низу контейнера */
    left: 0;
    width: 100%;
    height: 20px; /* Высота блока точек */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* --- 6. Стиль точек --- */
.planSwiper .swiper-pagination-bullet {
    width: 18px !important;
    height: 18px !important;
    
    /* ВАЖНО: Делаем серым (#D9D9D9), чтобы было видно на белом фоне.
       Твой var(--page-bg) слишком светлый. */
    background: var(--bg2) !important; 
    opacity: 1;
    margin: 0 6px !important;
    border-radius: 50%;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Чтобы точки не сжимались */
}

/* Активная точка */
.planSwiper .swiper-pagination-bullet-active {
    background: var(--orange) !important;
    transform: scale(1.1);
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
    .image-frame {
        height: 400px; /* Уменьшаем высоту рамки на планшетах */
        margin-left: 0;
    }
}

@media (max-width: 1024px) {
    /* 1. Делаем главный контейнер флекс-колонкой */
    .plans {
        display: flex;
        flex-direction: column;
        gap: 24px; /* Отступы между всеми элементами */
    }

    /* 2. МАГИЯ: "Растворяем" контейнер filter-body */
    .filter-body {
        display: contents; 
        /* Теперь браузер "не видит" этот див, а видит сразу его содержимое 
           прямо внутри .plans */
    }

    /* 3. Управляем порядком (Order) */

    /* Группа 1: Всё содержимое, что было в filter-body (фильтры, текст, спеки), 
       кроме кнопки */
    .filter-list, 
    .divider, 
    .stats-title, 
    .specs-grid {
        order: 1; /* Ставим в самый верх */
    }
    
    .filter-list .text-regular {
        font-size: 14px; /* Ставим в самый верх */
    }

    /* Группа 2: Картинка (ставим посередине) */
    .image-frame {
        order: 2;
        height: 400px; /* Фиксируем высоту для мобилки */
        margin: 0; /* Убираем лишние отступы */
    }

    /* Группа 3: Кнопка (ставим в самый низ) */
    #pdf-btn {
        order: 3;
        width: 100%; /* Растягиваем на всю ширину для удобства нажатия */
        margin-top: 10px;
        box-sizing: border-box; /* Чтобы паддинги не ломали ширину */
    }
}

/* =====================================================================================================================
#4 Why we are
=======================================================================================================================*/


/* Основная сетка */
.why-grid {
    display: grid;
    /* 4 равные колонки (1fr = 1 fraction/часть) */
    grid-template-columns: repeat(4, 1fr); 
    /* 2 ряда. Высота подстраивается под контент, но можно задать min-height */
    grid-template-rows: auto auto; 
    gap: 24px; /* Отступы между карточками */
    margin-top: 120px;
}

/* Общий стиль для всех ячеек */
.why-item {
    border-radius: 24px;
    display: flex;
    flex-direction: column;
}

/* Стиль белых карточек */
.card-bg {
    background-color: #FFFBF6; /* Светло-бежевый, как на макете */
    padding: 32px;
    gap: 16px;
    justify-content: space-between; /* Чтобы текст и иконка расходились красиво */
}

/* ЗАГОЛОВОК */
/* Он занимает 1-ю колонку и 1-й ряд по умолчанию, но для надежности можно задать: */
.header-cell {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    justify-content: center; /* Центрируем текст по вертикали */
    padding-right: 20px;
}

/* --- БОЛЬШАЯ КАРТИНКА (Версия Stability) --- */
.big-image-cell {
    /* Координаты в сетке */
    grid-column: 4 / 5; 
    grid-row: 1 / 3; 
    
    /* ВАЖНО: Разрешаем блоку занимать высоту, которую диктуют соседи */
    align-self: stretch;
    height: auto; 
    min-height: 100%;
    
    /* Контейнер для фиксации картинки */
    position: relative; 
    overflow: hidden; 
    border-radius: 24px;
    display: block; 
    
    /* УБРАЛИ max-height, так как он ломает сетку в Safari */
}

.big-image-cell img {
    /* Абсолютное позиционирование — единственный способ для Safari */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Картинка заполнит блок, обрезая лишнее сверху/снизу */
    object-fit: cover; 
    /* Центрируем фокус, чтобы обрезались небо и земля, а дом был виден */
    object-position: center center;
    
    border-radius: 24px;
}

/* МАЛЕНЬКАЯ КАРТИНКА (Домик внизу) */
.small-image-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* Иконки в карточках */
.why-icon {
    width: 70px;
    height: 70px;
    background-color: var(--orange);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.why-icon img {
    width: 24px;
    height: 24px;
}

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

/* Планшеты (делаем 2 колонки вместо 4) */
@media (max-width: 1280px) {
    .why-grid {
        grid-template-columns: 1fr 1fr; /* 2 колонки */
        /* Рядов станет больше автоматически */
    }

    /* Большая картинка теперь не сбоку, а например внизу на всю ширину или как обычная карточка */
    .big-image-cell {
        grid-column: span 2;
        grid-row: auto;
        
        /* Тут возвращаем фиксированную высоту */
        height: 300px; 
    }
    
    .header-cell {
        grid-column: span 2; /* Заголовок на всю ширину */
    }
    
    .why-item:last-child {
        /* Растягиваем его на обе колонки */
        grid-column: span 2; 
        
        /* Или так: 1 / -1 (от первой линии до последней) */
        /* grid-column: 1 / -1; */
    }
    
    /* ОТКЛЮЧАЕМ фикс Safari, возвращаем обычную картинку */
    .big-image-cell img {
        position: static; 
        width: 100%;
        height: 100%;
    }
}

/* Мобилки (1 колонка) */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr; /* Все в один столбик */
        gap: 16px;
    }

    .big-image-cell, 
    .header-cell {
        grid-column: auto;
    }
    
    .big-image-cell {
        height: 250px;
    }

     .why-item:last-child {
        /* Растягиваем его на обе колонки */
        grid-column: span 1; 
    }

    .why-item br {
        display: none;
    }

    .big-image-cell {
        height: 250px;
    }
}

/* Специальный фикс для мобилок */
@media (max-width: 480px) {
    
    /* 1. Уменьшаем внутренние отступы в карточках */
    .card-bg {
        padding: 24px 20px; /* Было 32px, делаем меньше по бокам */
    }

    /* 2. Защита от распирания сетки */
    .why-item {
        min-width: 0; /* Критически важно для Grid/Flex, чтобы элементы могли сжиматься меньше контента */
        width: 100%;  /* Гарантируем, что элемент не шире родителя */
    }

    /* 3. Уменьшаем иконку, чтобы сэкономить место */
    .why-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }

    /* 4. Страховка для больших картинок */
    .why-item img {
        max-width: 100%;
        height: auto;
    }

    .big-image-cell {
        height: auto;
    }
    
    /* 5. Если заголовок "Теплий" слишком огромный, его тоже надо усмирить */
    /* (Предполагаю класс .title, если он у тебя глобальный - добавь это) */
    .title {
        font-size: 42px; /* Или меньше, если слово не влазит */
        word-wrap: break-word; /* Переносить длинные слова */
    }
}








/* =====================================================================================================================
# Stats
=======================================================================================================================*/


.profit-section {
    position: relative; /* Создаем систему координат для картинки */
    padding: 120px 0 300px 0;
    overflow: hidden; /* Чтобы края картинки не вылезали за пределы секции */
}

.profit-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    /* ВОТ ЭТА СТРОЧКА: */
    /* top — прижмет к верхнему краю, center — отцентрует по горизонтали */
    object-position: center top; 
    
    z-index: 0;
}

/* Контейнер с контентом поднимаем над картинкой */
.profit-container {
    position: relative;
    z-index: 1;
}

/* Ячейки делаем прозрачными, чтобы фон просвечивал */
.profit-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: -1px;
    margin-top: -1px;
}

/* Оранжевая ячейка остается плотной */
.profit-item.highlight-orange {
    background-color: var(--orange);
    backdrop-filter: none;
    z-index: 2;
}

/* --- Твой мобильный адаптив 50/50 --- */
@media (max-width: 600px) {
    .profit-item {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 20px;
    }

    .profit-item .profit-value,
    .profit-item .profit-label {
        flex: 1 1 50%; /* Занимают ровно по половине */
        width: 50%;
    }

    .profit-value {
        font-size: 28px;
    }
}

.profit-title {
    margin-bottom: 40px;
}

/* --- Сетка --- */
.profit-grid {
    display: grid;
    /* 4 равные колонки */
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 48px;
    
    /* Важный нюанс: добавляем отступ слева и сверху на 1px, 
       чтобы компенсировать отрицательные маржины ячеек */
    padding-top: 1px;
    padding-left: 1px;
}

/* --- Стиль обычной ячейки --- */
.profit-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 32px; /* Внутренние отступы */
    gap: 8px;
    
    /* Границы */
    border: 1px solid #CFCBC2; /* Цвет границ (светло-серый) */
    
    /* ТРЮК: Сдвигаем ячейки друг на друга на 1px, 
       чтобы границы не становились жирными (двойными) */
    margin-left: -1px;
    margin-top: -1px;
}

/* --- Оранжевая ячейка (последняя) --- */
.profit-item.highlight-orange {
    background-color: var(--orange);
    border-color: var(--orange); /* Чтобы граница не выделялась */
    z-index: 2; /* Поднимаем её выше, чтобы перекрыть соседние серые рамки */
    position: relative;
}

/* --- Типографика --- */

/* Цифры ($160,000) */
.profit-value {
    color: #000;
    font-family: var(--manrope);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1.4px;
}

/* Подписи (Ціна будинку) */
.profit-label {
    color: #000;
    font-family: var(--manrope);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* Меняем цвет текста в оранжевом блоке на белый */
.profit-item.highlight-orange .profit-value,
.profit-item.highlight-orange .profit-label {
    color: #FFFFFF;
}

/* Центрирование кнопки */
.profit-action {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ================= АДАПТИВ ================= */

/* Планшеты (2 колонки) */
@media (max-width: 1024px) {
    .profit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .profit-value {
        font-size: 40px;
    }
}

@media (max-width: 600px) {
    /* мобила 1 колонка */
    .profit-grid {
        grid-template-columns: 1fr;
    }

    /* 2. Настройки самой карточки */
    .profit-item {
        padding: 24px;
        flex-direction: row; 
        align-items: center; 
        gap: 16px; 
        text-align: left; /* Возвращаем выравнивание текста влево */
    }

    /* 3. Настройка ширины для Цифры и Текста */
    .profit-item .profit-value,
    .profit-item .profit-label {
        flex: 1 1 50%; 
        width: 50%;
    }

    .profit-value {
        font-size: 24px;
        /* Страховка, чтобы длинные цифры не ломали верстку */
        word-break: break-word; 
    }
    
    .profit-action .button-m-orange {
        width: 100%;
        padding: 22px 20px;
    }
}












/* =====================================================================================================================
# галерея
=======================================================================================================================*/

/* --- Секция Галереи (Общие настройки) --- */
.gallery-section {
    background-color: #22231D;
    margin-top: -2px; /* Убираем щели */
    position: relative;
    z-index: 10; /* Слой выше гор */
}

/* Разрешаем элементам вылезать за пределы контейнера (для наложения заголовка) */
.gallery-section .container {
    overflow: visible !important;
}

/* --- Заголовок и фильтры (Наложение на горы) --- */
.gallery-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    margin-top: -204px;
    padding-bottom: 60px;
    position: relative;
    z-index: 20; /* Уровень 20 (самый верхний) */
}

/* Мобильный заголовок */
@media (max-width: 768px) {
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -170px;
        gap: 20px;
    }
}

/* Кнопки фильтра */
.gallery-toggles {
    display: flex;
    gap: 12px;
}

.gallery-toggle-btn {
    padding: 10px 28px;
    border-radius: 99px;
    border: 1px solid #FFF;
    background: transparent;
    color: #FFF;
    font-family: var(--manrope);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-toggle-btn.active,
.gallery-toggle-btn:hover {
    background: #FFF;
    color: #22231D;
}

/* --- Обертка Слайдера --- */
.gallery-slider-wrapper {
    position: relative;
    width: 100%;
}

/* Сам Swiper */
.gallerySwiper {
    width: 100%;
    padding-bottom: 80px; /* Место под точки */
    overflow: hidden; /* Скрываем то, что совсем далеко за краем экрана */
}

/* --- СЛАЙДЫ (Самое важное) --- */
.gallerySwiper .swiper-slide {
    width: 60% !important; 
    height: 70vh !important; 
    position: relative;
    opacity: 0.4; 
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Адаптив ширины слайда */
@media (max-width: 1200px) {
    .gallerySwiper .swiper-slide {
        width: 80% !important;
        height: 70vh !important;
    }
}

@media (max-width: 768px) {
    /* 1. Слайд на всю ширину */
    .gallerySwiper .swiper-slide {
        width: 88% !important;
        height: 300px !important;
        opacity: 1; /* На мобилке сразу показываем ярко, так как соседей почти не видно */
    }
    
    /* 2. Точки: отступ снизу 24px */
    .gallerySwiper .swiper-pagination {
        bottom: 24px !important;
    }
    
    /* Уменьшаем общий отступ контейнера на мобилке, чтобы не было дыры снизу */
    .gallerySwiper {
        padding-bottom: 60px; 
    }
}

/* Активный слайд (Центр) */
.gallerySwiper .swiper-slide-active {
    opacity: 1;
    z-index: 10;
}

/* Картинка внутри слайда */
.gallerySwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Важно: заполняет блок, не растягиваясь */
    display: block;
}

/* --- Навигация (Стрелки) --- */
.gallery-nav-btn {
    position: absolute;
    top: 50%; /* По центру высоты картинки */
    transform: translateY(-50%); 
    width: 54px;
    height: 54px;
    z-index: 50;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    
    /* Поднимаем выше слайдера */
    margin-top: -25px; 
}

.gallery-prev {
    left: 10%; /* Позиция стрелки слева */
    background-image: url('assets/icons/left.svg');
}
.gallery-prev:hover {
    background-image: url('assets/icons/left-hover.svg');
}

.gallery-next {
    right: 10%; /* Позиция стрелки справа */
    background-image: url('assets/icons/right.svg');
}
.gallery-next:hover {
    background-image: url('assets/icons/right-hover.svg');
}

@media (max-width: 768px) {
    .gallery-nav-btn { display: none; } /* Скрываем на мобилках */
}

/* --- Точки (Пагинация) --- */
.gallerySwiper .swiper-pagination {
    bottom: 20px !important; 
    left: 0;
    width: 100%;
}

.gallerySwiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #FFF;
    opacity: 0.4;
    margin: 0 6px !important;
    transition: all 0.3s ease;
}

.gallerySwiper .swiper-pagination-bullet-active {
    background: var(--orange);
    opacity: 1;
    transform: scale(1.2);
}






/* =====================================================================================================================
# Calc
=======================================================================================================================*/

/* --- Секция калькулятора --- */
.calc-section {
    padding: 100px 0;
    position: relative;
    
    /* По умолчанию только цвет. Картинку тут НЕ пишем */
    background: var(--green-bg); 
}

/* 2. СТИЛЬ ДЛЯ ДЕСКТОПА (Только если экран шире 1024px) */
@media (min-width: 1025px) {
    .calc-section {
        /* Картинка загрузится ТОЛЬКО здесь */
        background: url('assets/img/calc-bg.jpg') no-repeat center center;
        background-size: cover;
    }
}

.calc-section h2.title span {
    color: var(--orange) !important;
}

.calc-section h2.title {
    color: var(--page-bg);
}


.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Делим экран пополам */
    gap: 68px;
    align-items: start;
}

/* --- ЛЕВАЯ КАРТОЧКА --- */
.calc-card {
    background-color: var(--page-bg); /* #F4EFE4 бежевый */
    border-radius: 24px;
    padding: 60px;
}

/* --- Стили табов специально для Калькулятора (Светлый фон) --- */

/* --- Стили табов для Калькулятора (Светлый фон) --- */

/* 1. Обычное состояние (Неактивная кнопка) */
.calc-card .filter-btn {
    border-color: var(--bg1); 
    color: var(--black); 
    transition: all 0.3s ease; /* Плавность */
}

/* 2. Активная кнопка */
.calc-card .filter-btn.active {
    background-color: var(--bg1);
    color: var(--black);
}

/* 3. Ховер ТОЛЬКО для неактивных кнопок (:not(.active)) */
/* Это исправляет проблему: фон будет меняться только у выключенных кнопок */
.calc-card .filter-btn:not(.active):hover {
    background-color: rgba(90, 109, 71, 0.1); 
    color: var(--black);
}

/* 4. Ховер для активной кнопки (Жестко фиксируем, чтобы ничего не мигало) */
.calc-card .filter-btn.active:hover {
    background-color: var(--bg1); /* Оставляем темный фон */
    color: var(--black);       /* Оставляем светлый текст */
    cursor: default;             /* Можно убрать "руку", чтобы показать, что она уже выбрана */
}

.filter-wrapper {
    margin-bottom: 20px;
}

/* Список данных */
.calc-data-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--green); /* Тонкая линия */
}

/* Зеленый текст */
.calc-row.highlight-green .calc-val {
    color: #5A6D47; /* Подбери свой зеленый */
}

.calc-label {
    font-family: var(--manrope);
    font-size: 16px;
    color: #000;
    white-space: normal;
    max-width: 60%;
}

.calc-val {
    font-family: var(--manrope);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.88px;
    color: #000;
}

.calc-note {
    font-family: var(--manrope);
    font-size: 12px;
    color: #888;
    margin-bottom: 30px;
    line-height: 1.4;
}

/* --- ПРАВАЯ ЧАСТЬ --- */
.calc-info {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Этапы оплаты */
.payment-steps {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
    flex: 1 1;
}

.payment-item {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
}

@media (min-width: 1300px) {
    .payment-item p {
        max-width: 150px;
    }
}

.payment-percent {
    /* Твой шрифт для цифр */
    color: var(--page-bg);
    font-family: 'Raleway', sans-serif;
    font-size: 150px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* Уменьшил line-height, чтобы не было больших отступов */
    letter-spacing: -8.5px;
}

.payment-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
}

/* Карточки с иконками */
.calc-icons-grid {
    display: flex;
    gap: 24px;
}

.info-card {
    display: flex;
    padding: 30px 30px 30px 30px;
    align-items: center;
    gap: 22px;
    border-radius: 24px;
    background: var(--page-bg);
}

.icon-box {
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--orange);
    flex-shrink: 0;
}

/* --- АДАПТИВ --- */
@media (max-width: 1300px) {
    .payment-percent {
        font-size: 100px;
        letter-spacing: -2px;
    }
    
}

@media (max-width: 1024px) {
    .calc-grid {
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    .calc-info {
        order: -1; /* Если хочешь, чтобы 50% было сверху над формой */
    }
}


@media (max-width: 768px) {
    .payment-percent {
        font-size: 50px;
        letter-spacing: -2px;
    }
    
    .calc-icons-grid {
        flex-direction: column; /* Карточки друг под другом */
    }
    
    .calc-card {
        padding: 24px;
    }

    .calc-val {
    font-size: 16px;
    }
    .calc-label {
    font-size: 14px;
    }

    .payment-steps {
    gap: 24px;
}
}

.pdf-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none; /* Убираем подчеркивание у ссылки */
}

.pdf-btn img {
    /* Чтобы иконка не сжималась */
    flex-shrink: 0; 
    position: relative;
    z-index: 2; /* Чтобы иконка была чуть выше, если они нахлестываются */
}

.pdf-btn-text {
    /* ОСТАВЛЯЕМ ТОЛЬКО inline-flex */
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    
    /* Отступы по бокам, чтобы текст не прилипал к краям овала */
    padding: 0 24px 0 24px; 

    height: 56px;
    background-color: var(--orange);
    color: var(--page-bg);
    border-radius: 999px;
    
    font-family: var(--manrope);
    font-size: 16px;
    font-weight: 600;
    line-height: 1; /* Для flex-центрирования лучше ставить 1 */
    
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Эффект при наведении на всю ссылку */
.pdf-btn:hover .pdf-btn-text {
    background-color: var(--orange-hover); /* Чуть темнее оранжевый */
}


/* =====================================================================================================================
# Constriction
=======================================================================================================================*/

/* --- Секция Ход Строительства --- */
.construction-section {
    padding: 100px 0 72px 0;
    /* Фон страницы (если он не задан глобально) */
    background-color: var(--page-bg); 
}

/* Заголовок */
.construction-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 55px;
}

.construction-subtitle {
    text-align: right;
}

/* СЕТКА (GRID) */
.construction-grid {
    display: grid;
    /* 4 колонки по умолчанию */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* КАРТОЧКА */
.construction-card {
    height: 510px;
    border-radius: 24px;
    overflow: hidden; /* Обрезаем углы картинкам */
    position: relative; /* Чтобы позиционировать футер */
    background-color: #ddd; /* Заглушка, пока грузится фото */
}

/* Слайдер внутри карточки */
.constructionSwiper {
    width: 100%;
    height: 100%;
}

.constructionSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняем всю карточку */
    display: block;
}

/* ФУТЕР КАРТОЧКИ (Дата и стрелки) */
.construction-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px;
    z-index: 10;
    
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none; /* Чтобы клики сквозь пустые места проходили */
}

/* Плашка с датой */
.date-badge {
    padding: 12px 12px;
    background: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(2px);
    border-radius: 99px;
    
    color: #FFF;
    font-family: var(--manrope);
    font-size: 14px;
    font-weight: 500;
    pointer-events: auto;
}

/* Блок стрелок */
.nav-badges {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

/* Круглые кнопки стрелок */
.arrow-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.arrow-badge:hover {
    background: rgba(225, 107, 40, 0.9); /* Оранжевый при наведении */
}

.arrow-badge img {
    width: 24px;
    height: 24px;
}

/* --- СКРЫТИЕ СТРЕЛОК --- */
/* Если Swiper понимает, что слайд всего один, он добавляет этот класс кнопкам */
.arrow-badge.swiper-button-lock {
    display: none !important;
}

/* --- АДАПТИВ --- */
@media (max-width: 1380px) {
    .construction-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшете */
    }
}

@media (max-width: 768px) {
    .construction-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .construction-subtitle {
        text-align: left;
    }

    .construction-grid {
        grid-template-columns: 1fr; /* 1 колонка на телефоне */
    }
    
    .construction-card {
        height: 400px; /* Чуть ниже на мобилке */
    }
    
    .construction-footer {
        padding: 24px; /* Меньше отступы внутри карточки */
    }
}

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

.faq-section {
    padding: 64px 0;
    background-color: var(--page-bg);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr; /* Левая часть чуть уже */
    gap: 80px;
    align-items: flex-start;
}

/* Заголовок с рукописным текстом */
.faq-handwritten {
    font-family: 'Raleway', sans-serif; /* Поменяй на свой рукописный шрифт */
    color: var(--orange);
    font-size: 80px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.faq-info .pdf-btn {
    margin-top: 40px;
}

/* --- Стили Аккордеона --- */
.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question span {
    font-family: var(--manrope);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    max-width: 80%;
}

/* Круглая иконка + / x */
.faq-icon {
    width: 64px;
    height: 64px;
    background-color: #E6E2DA; /* Светло-серый круг */
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Рисуем плюс через псевдоэлементы */
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    transition: all 0.3s ease;
}

.faq-icon::before { width: 20px; height: 2px; } /* Горизонтальная палка */
.faq-icon::after { width: 2px; height: 20px; }  /* Вертикальная палка */

/* Состояние при открытии (Active) */
.faq-item.active .faq-icon {
    background-color: var(--orange);
    transform: rotate(135deg); /* Поворачиваем, чтобы сделать Х */
}

.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after {
    background-color: #FFF; /* Крестик становится белым */
}

/* Ответ (Скрытый по умолчанию) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Достаточная высота для контента */
}

.faq-answer-content {
    padding-bottom: 32px;
    font-family: var(--manrope);
    font-size: 18px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.6);
    max-width: 90%;
}

/* --- АДАПТИВ --- */
@media (max-width: 1024px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .faq-question span {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .faq-section { padding: 32px 0; }
    
    .faq-handwritten { font-size: 60px; }
    
    .faq-icon { width: 48px; height: 48px; }
    
    .faq-question { padding: 24px 0; }
}


/* =====================================================================================================================
# Footer
=======================================================================================================================*/

/* --- Стили Футера --- */
.footer {
    background-color: #33362A; /* Твой цвет фона */
    padding: 80px 0 22px 0;
    color: var(--page-bg);
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(244, 239, 228, 0.1); /* Тонкая линия разделитель */
}

/* Заголовки в футере */
.footer-title {
    color: var(--page-bg);
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -1.12px;
    margin-bottom: 20px;
}

/* Логотип */
.footer-logo {
    width: 159px;
    height: 216px;
    object-fit: contain;
}

/* Навигация и Списки */
.footer-nav, 
.footer-contacts, 
.footer-location {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-nav a, 
.footer-contacts a {
    text-decoration: none;
    color: var(--page-bg);
    transition: opacity 0.3s ease;
}

.footer-nav a:hover, 
.footer-contacts a:hover {
    color: var(--hover1);;
}

/* Иконки контактов */
.footer-contacts img, 
.footer-location img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Соцсети */
.footer-socials {
    display: flex;
    gap: 10px;
    padding-top: 3px;
}

.social-link {
    width: 56px;
    height: 56px;
    background-color: rgba(0, 0, 0, 0.2); /* Полупрозрачный фон круга */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.social-link:hover {
    background-color: var(--orange);
    transform: translateY(-3px);
}

.social-link img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* Нижняя часть */
.footer-bottom {
    padding-top: 22px;
}

.copyright {
    color: var(--green); /* Твой цвет --green */
    font-size: 14px;
    opacity: 0.8;
}

/* --- АДАПТИВ --- */

@media (max-width: 1200px) {
    .footer-main {
        flex-wrap: wrap; /* Разрешаем перенос колонок */
        gap: 60px;
    }
    
    .footer-col {
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .footer-main {
        flex-direction: column; /* Всё в один столбец */
        gap: 50px;
        text-align: center;
        align-items: center;
    }

    .footer-nav, 
    .footer-contacts, 
    .footer-socials {
        align-items: center;
    }
    
    .footer-title {
        margin-bottom: 20px;
    }

    .footer-logo {
        height: 180px; /* Немного меньше лого на мобилках */
    }
    
    .footer-bottom {
        text-align: center;
    }
}

.footer-location-text {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.footer-location-text p {
    color: var(--page-bg);
}

.footer-nav a span {
    color: var(--green);
}


/* Цвет выделенного текста в секции Прибыль */
.profit-title span {
    color: var(--orange); /* Или любой другой цвет, например #E3743E */
}

/* Если у строки есть класс highlight-green, красим правое значение */
.calc-row.highlight-green .calc-val {
    color: #779652;
    font-weight: 600;    /* Можно сделать жирнее */
}

/* =====================================================================================================================
# Другое
=======================================================================================================================*/



/* Красим текст внутри !! в заголовке */
.construction-header .title span {
    color: var(--orange); /* или #E3743E */
}

/* Красим текст внутри !! в подзаголовке */
.construction-subtitle span {
    color: var(--orange); /* или #E3743E */
}

section[id] {
    scroll-margin-top: 100px;
}

.page-404 {
    padding: 150px 0;
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
    background-image: url(assets/img/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.error-wrapper {
    max-width: auto;
    margin: 0 auto;
}

.error-code {
    font-size: 120px;
    font-family: 'Raleway', sans-serif; /* Твой шрифт из хедера */
    font-weight: 700;
    color: #F4EFE4; /* Светлый цвет как в калькуляторе или оранжевый */
    margin-bottom: 20px;
    line-height: 1;
}

.page-404 .title {
    margin-bottom: 24px;
}

.page-404 .text-regular {
    margin-bottom: 40px;
    opacity: 0.7;
}

.page-404 .button-m-orange {
    display: inline-block;
    text-decoration: none;
}


/* =====================================================================================================================
# Форма записи
=======================================================================================================================*/

/* POPUP STYLES */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Черный 50% */
    z-index: 9999;
    display: none; /* Скрыто по умолчанию */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup-overlay.open {
    display: flex;
    opacity: 1;
}

.popup-wrapper {
    width: 500px;
    max-width: 90%;
    background: #fff;
    padding: 48px;
    position: relative;
    border-radius: 24px; /* Или добавь скругления, если нужно */
}

.popup-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #000;
}

.popup-title {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

/* INPUTS */
.input-group {
    position: relative;
    margin-bottom: 24px;
}

.input-group label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    margin-bottom: 8px;
    color: #000;
}

.input-group input {
    width: 100%;
    height: 50px;
    border: 1px solid #E0E0E0;
    padding: 0 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
    border-radius: 12px;
}

.input-group input:focus {
    border-color: #F46C4F;
}

/* Ошибки */
.input-group input.error {
    border-color: #FF4D4D !important;
    background-color: #FFF5F5 !important;
}

.error-msg {
    display: none; /* Скрыто по умолчанию */
    font-family: 'Manrope', sans-serif;
    color: #FF4D4D;
    font-size: 14px;
    left: 0;
    line-height: 1;
    padding-top: 12px;
}

/* Кнопка */
.popup-submit, .popup-close-btn {
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: center;
}

/* Политика */
.policy-block {
    margin-top: 16px;
    text-align: center;
}

.policy-block a {
    color: #888;
    text-decoration: underline;
    font-size: 12px;
}

/* Состояния */
.popup-state {
    display: none;
}

.popup-state.active {
    display: block;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.popup-state#popup-state-success {
    text-align: center;
}
.success-icon img {
    display: block;      /* Делаем картинку блоком */
    margin: 0 auto 20px;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}