/* ========== COMPARISON TABLE SECTION ========== */
.comparison {
    padding: 80px 0;
    background: linear-gradient(to left, #2a2a2a, #1c1c1c);
    color: #fff;
    /* Убираем любые ограничения высоты */
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.comparison .section-title,
.comparison .section-subtitle {
    color: #fff;
}

/* Обёртка для таблицы – только горизонтальный скролл, вертикальный запрещён */
.comparison-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 20px;
    margin: 0;
}

.comparison-table {
    display: flex;
    gap: 24px;
    min-width: 1000px; /* гарантирует горизонтальный скролл при необходимости */
    height: auto;
}

.comparison-column {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 16px;
    width: 232px;
    flex-shrink: 0;
}

.comparison-column.traditional,
.comparison-column.modular {
    background: #fafafa;
    border: 1px solid #f1f1f1;
    width: 288px;
}

.comparison-column.benefit {
    background: #c83030;
    width: 288px;
}

.comparison-header {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 20px;
    min-height: 60px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.comparison-column.traditional .comparison-header,
.comparison-column.modular .comparison-header {
    color: #2c2c2c;
}

.comparison-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(224,224,224,0.3);
    font-size: 16px;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-column.traditional .comparison-row,
.comparison-column.modular .comparison-row {
    color: #2c2c2c;
    border-bottom-color: #e0e0e0;
}

.comparison-row svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.comparison-column.benefit .comparison-row {
    font-weight: 700;
}

/* Мобильная версия – скрыта на десктопе */
.comparison-mobile {
    display: none;
}

/* Стили для мобильных карточек */
.comparison-mobile .comparison-card {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px;
    color: #2c2c2c;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.comparison-mobile .card-title {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
    color: #c83030;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.comparison-mobile .card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.comparison-mobile .card-row:last-child {
    border-bottom: none;
}

.comparison-mobile .card-label {
    font-weight: 600;
    color: #555;
    flex: 0 0 45%;
}

.comparison-mobile .card-value {
    flex: 0 0 50%;
    text-align: right;
    color: #2c2c2c;
}

.comparison-mobile .card-row.traditional .card-value {
    color: #c83030;
}

.comparison-mobile .card-row.modular .card-value {
    color: #02BC4C;
}

.comparison-mobile .card-row.benefit .card-value {
    font-weight: 700;
    color: #c83030;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .comparison-table {
        gap: 16px;
    }
    .comparison-column {
        width: 200px;
    }
    .comparison-column.traditional,
    .comparison-column.modular,
    .comparison-column.benefit {
        width: 250px;
    }
}

@media (max-width: 992px) {
    .comparison-table-wrapper {
        padding-bottom: 15px;
    }
}

/* Мобильные устройства – показываем карточки, скрываем таблицу */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        display: none;
    }
    .comparison-mobile {
        display: block;
    }
    .comparison {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .comparison-mobile .card-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .comparison-mobile .card-label,
    .comparison-mobile .card-value {
        flex: auto;
        width: 100%;
        text-align: left;
    }
}
/* ========== COMPARISON TABLE SECTION ========== */
.comparison {
    padding: 80px 0;
    background: linear-gradient(to left, #2a2a2a, #1c1c1c);
    color: #fff;
    height: auto;
}

.comparison .section-title,
.comparison .section-subtitle {
    color: #fff;
}

/* Обёртка для таблицы – только горизонтальный скролл */
.comparison-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 20px;
}

/* Таблица на Grid */
.comparison-table {
    display: grid;
    grid-template-columns: 232px 288px 288px 288px; /* ширина колонок */
    gap: 24px;
    min-width: 1000px; /* для горизонтального скролла на малых экранах */
}

/* Заголовки и ячейки */
.comparison-header,
.comparison-row {
    font-family: 'Rubik', sans-serif;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    min-height: 60px;   /* фиксированная минимальная высота */
    height: auto;        /* но может расти при сильном переносе */
    box-sizing: border-box;
}

/* Специфичные стили для заголовков */
.comparison-header {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 0; /* убираем лишний margin */
}

/* Цвета фона для разных колонок */
.comparison-header.traditional,
.comparison-header.modular,
.comparison-header.benefit,
.comparison-row.traditional,
.comparison-row.modular,
.comparison-row.benefit {
    background: #fafafa;
    border: 1px solid #f1f1f1;
    color: #2c2c2c;
}

.comparison-header.benefit,
.comparison-row.benefit {
    background: #c83030;
    color: #fff;
}

/* Иконки в ячейках */
.comparison-row svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Жирный шрифт в колонке "Ваша выгода" */
.comparison-row.benefit {
    font-weight: 700;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .comparison-table {
        grid-template-columns: 200px 250px 250px 250px;
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .comparison-table-wrapper {
        padding-bottom: 15px;
    }
}

/* Мобильные устройства – скрываем таблицу, показываем карточки */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        display: none;
    }
    .comparison-mobile {
        display: block;
    }
    .comparison {
        padding: 60px 0;
    }
}

/* Остальные стили для мобильной версии остаются без изменений */
/* ========== COMPARISON TABLE SECTION ========== */
.comparison {
    padding: 80px 0;
    background: linear-gradient(to left, #2a2a2a, #1c1c1c);
    color: #fff;
    height: auto;
}

.comparison .section-title,
.comparison .section-subtitle {
    color: #fff;
}

/* Обёртка для таблицы – только горизонтальный скролл */
.comparison-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 20px;
}

/* Таблица на Grid */
.comparison-table {
    display: grid;
    grid-template-columns: 232px 288px 288px 288px; /* ширина колонок */
    gap: 24px;
    min-width: 1000px; /* для горизонтального скролла */
}

/* Заголовки и ячейки */
.comparison-header,
.comparison-row {
    font-family: 'Rubik', sans-serif;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    min-height: 60px;   /* минимальная высота */
    height: auto;
    box-sizing: border-box;
}

/* Заголовки */
.comparison-header {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 0; /* убираем лишний отступ */
}

/* Стили для колонок */
.comparison-header.traditional,
.comparison-header.modular,
.comparison-row.traditional,
.comparison-row.modular {
    background: #fafafa;
    border: 1px solid #f1f1f1;
    color: #2c2c2c;
}

.comparison-header.benefit,
.comparison-row.benefit {
    background: #c83030;
    color: #fff;
}

/* Иконки в ячейках */
.comparison-row svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Жирный шрифт в колонке "Ваша выгода" */
.comparison-row.benefit {
    font-weight: 700;
}

/* Адаптивность для планшетов */
@media (max-width: 1200px) {
    .comparison-table {
        grid-template-columns: 200px 250px 250px 250px;
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .comparison-table-wrapper {
        padding-bottom: 15px;
    }
}

/* Мобильные устройства – скрываем таблицу, показываем карточки */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        display: none;
    }
    .comparison-mobile {
        display: block;
    }
    .comparison {
        padding: 60px 0;
    }
}

/* Остальные стили для мобильной версии (без изменений) */
.comparison-mobile .comparison-card {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px;
    color: #2c2c2c;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* ... остальные стили мобильной версии остаются как у вас ... */
.comparison-header.benefit,
.comparison-row.benefit {
    border-radius: 20px;
}
Планшеты и небольшие ноутбуки (от 769px до 1100px) */
@media (min-width: 769px) and (max-width: 1100px) {
    .comparison-table {
        /* Можно использовать относительные единицы, но оставим фиксированные,
           чтобы сохранить разницу в цветах колонок */
        grid-template-columns: 180px 220px 220px 220px;
        gap: 12px;
    }

    .comparison-header,
    .comparison-row {
        padding: 12px 10px;        /* уменьшаем внутренние отступы */
        font-size: 15px;           /* чуть мельче текст */
        min-height: 50px;           /* чуть меньше высота */
    }

    .comparison-header {
        font-size: 18px;            /* заголовки тоже уменьшаем */
    }

    .comparison-row svg {
        width: 20px;                /* иконки чуть мельче */
        height: 20px;
        margin-right: 6px;
    }
}

/* Узкие планшеты (от 601px до 768px) – здесь уже скрываем таблицу?
   По текущей логике до 768px включительно таблица скрывается,
   но можно чуть сдвинуть границу, чтобы на совсем узких планшетах
   показывать карточки раньше. По желанию можно изменить 768px на 900px,
   если таблица на 900px уже не влазит. */

/* Если хотим, чтобы на очень узких экранах (например, 600-768) таблица
   не скрывалась, а показывалась с ещё более мелкими размерами,
   добавим запрос: */
@media (max-width: 800px) {
    .comparison-table-wrapper {
        /* Можно оставить как есть, но если таблица всё равно не влезает,
           лучше довериться мобильной версии. */
    }
}

/* Для плавного изменения размера текста можно добавить общее правило: */
.comparison-row span,
.comparison-header {
    font-size: clamp(14px, 2vw, 20px); /* адаптивный размер шрифта */
    /* но осторожно: на больших экранах шрифт может стать слишком крупным,
       лучше оставить фиксированные значения с медиа-запросами. */
}
.comparison-table {
    grid-template-columns: 1.5fr 2fr 2fr 2fr; /* первая колонка чуть уже */
    gap: 16px;
}

/* Тогда минимальные ширины можно ограничить через min-width: */
.comparison-header,
.comparison-row {
    min-width: 150px; /* минимальная ширина ячейки, чтобы контент не сжимался слишком сильно */
}
@media (max-width: 900px) {
    .comparison-table-wrapper {
        display: none;
    }
    .comparison-mobile {
        display: block;
    }
    .comparison {
        padding: 60px 0;
    }
}
.container {
    max-width: 100%;
    overflow-x: hidden; /* предотвращает скролл у контейнера, если что-то вылезло */
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}