/* ==========================================================================
   1. СБРОС СТИЛЕЙ И ГЛОБАЛЬНЫЕ НАСТРОЙКИ
   ========================================================================== */
* {
    box-sizing: border-box; /* Защищает сетку от деформаций из-за padding и border */
    margin: 0;
    padding: 0;
}

/* Настройки скролла для плавного перехода по якорям меню */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #070A10; 
    color: #E2E8F0;           
    font-family: 'Montserrat', sans-serif;
    /* УСТАНАВЛИВАЕМ БАЗОВЫЙ ТОНКИЙ ШРИФТ ДЛЯ ВСЕГО САЙТА */
    font-weight: 300; 
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; 
}


/* ШИРОКОФОРМАТНЫЙ КОНТЕЙНЕР (1400px) 
   Обеспечивает масштабность визуала на больших мониторах */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px; /* Отступы безопасности для мобильных экранов */
}

/* ==========================================================================
   2. ТЕХНОЛОГИЧНАЯ ШАПКА (Палитра Газпромнефть — глубокий сине-черный)
   ========================================================================== */
.main-header {
    background-color: #0C121C; /* Индустриальный темно-синий фон */
    padding: 20px 0;
    border-bottom: 2px solid #00A4E4; /* Лазерно-голубая фирменная полоса */
    position: sticky;
    top: 0;
    z-index: 100; /* Шапка всегда остается поверх контента при скролле */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Логотип: легкий, без тяжелого Капса */
.logo {
    display: flex;
    flex-direction: column;
}
.logo-title {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.5px;
    color: #ffffff;
}
.logo-subtitle {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #00A4E4; /* Подсветка лазерно-голубым */
    margin-top: 1px;
    letter-spacing: 0.5px;
}

/* Навигация: аккуратные шрифты средней толщины */
.navigation {
    display: flex;
    gap: 30px;
}
.nav-link {
    color: #94A3B8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: #00A4E4; /* Мягкое изменение цвета при наведении */
}

/* Контакты в шапке */
.header-contacts {
    text-align: right;
}
.header-phone {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    display: block;
    transition: color 0.3s;
}
.header-phone:hover {
    color: #00A4E4;
}
.header-hours {
    font-size: 11px;
    color: #64748B;
}




/* ==========================================================================
   3. ГЛАВНЫЙ ЭКРАН (HERO SECTION)
   ========================================================================== */
.hero-section {
    /* Глубокий премиальный градиент от графита к благородному металлическому синему */
    background: linear-gradient(135deg, #0F172A 0%, #070A10 100%);
    padding: 100px 0;
    border-bottom: 1px solid #1E293B;
}

/* Флекс-сетка, распределяющая контент на две широкие колонки */
.hero-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap; /* Корректный перенос на смартфонах */
}

/* Левая текстовая часть */
.hero-info {
    flex: 1;
    min-width: 450px; /* Задаем блоку солидную ширину на 22-дюймовом мониторе */
}

/* Тонкий технологичный шильдик (badge) с легким лазерным свечением */
.tech-badge {
    display: inline-block;
    background-color: rgba(0, 164, 228, 0.08); 
    color: #00A4E4; /* Ярко-голубой цвет ЧПУ лазера */
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    border: 1px solid rgba(0, 164, 228, 0.25);
    letter-spacing: 1px;
}

/* Крупный, читаемый заголовок H1 БЕЗ грубого жирного капса */
.main-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

/* Выделение ключевых слов фирменным цветом */
.highlight {
    color: #00A4E4;
}

/* Крупный премиальный текст описания по заветам Студии Лебедева */
.hero-description {
    color: #94A3B8; /* Мягкий серый цвет текста */
    font-size: 19px;
    font-weight: 400;
    max-width: 600px;
    line-height: 1.6;
}

/* ==========================================================================
   4. СТРОГАЯ ФОРМА ОБРАТНОЙ СВЯЗИ (HERO FORM)
   ========================================================================== */
.form-wrapper {
    background-color: #ffffff;
    color: #1E293B;
    padding: 45px;
    border-radius: 8px;
    width: 100%;
    max-width: 440px; /* Массивная, но пропорциональная форма */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Глубокая объемная тень */
}

.form-heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0F172A;
    letter-spacing: -0.5px;
}

.form-text {
    font-size: 14px;
    color: #64748B;
    margin-bottom: 30px;
}

.callback-form {
    display: flex;
    flex-direction: column;
}

/* Удобные крупные поля ввода */
.input-field {
    width: 100%;
    padding: 16px 18px;
    margin-bottom: 20px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #0F172A;
    background-color: #F8FAFC;
    transition: all 0.3s ease;
}

/* Интерактивное лазерно-синее свечение при клике в поле */
.input-field:focus {
    border-color: #00A4E4;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 164, 228, 0.15);
    outline: none;
}

/* Строгая и мощная кнопка в стиле Газпромнефть */
.submit-button {
    background-color: #00A4E4;
    color: #ffffff;
    border: none;
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 164, 228, 0.3);
}

.submit-button:hover {
    background-color: #0082B6; /* Затемнение при наведении курсора */
}

/* Чекбокс ПД */
.agreement-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    font-size: 11px;
    color: #64748B;
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-input {
    margin-top: 2px;
}




/* ==========================================================================
   5. ШИРОКОФОРМАТНЫЙ КАТАЛОГ КАРКАСОВ
   ========================================================================== */
.catalog-section {
    padding: 100px 0;
    background-color: #0B0F17; /* Чуть более светлый оттенок графита для контраста */
    border-bottom: 1px solid #1E293B;
}

/* Чистые крупные заголовки секций по заветам минимализма */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-title {
    font-size: 36px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}
.section-subtitle {
    font-size: 16px;
    color: #94A3B8;
    max-width: 800px;
    margin: 0 auto;
}

/* Сетка на CSS Grid, которая идеально раскрывается на мониторах 22+ дюймов */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 40px; /* Свободное пространство между карточками */
}

/* Карточки товаров в строгом премиальном стиле */
.product-card {
    background: #121824;
    border-radius: 8px;
    border: 1px solid #1E293B;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Плавный интерактивный эффект при наведении */
.product-card:hover {
    transform: translateY(-5px);
    border-color: #00A4E4;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Область для фото (пока пустая, подготовлена под ваши изображения) */
.product-image {
    height: 260px;
    background-color: #1A2333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #64748B;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #1E293B;
}
.img-placeholder {
    padding: 20px;
    text-align: center;
}

/* Технологичные шильдики на карточках */
.product-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #00A4E4;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-premium {
    background-color: #ffffff;
    color: #070A10;
}

/* Текстовая начинка карточки */
.product-info {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.product-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}
.product-desc {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1; /* Выравнивает нижнюю часть по одной линии */
}

/* Нижняя плашка: Цена + Строгая Кнопка */
.product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #1E293B;
    flex-wrap: wrap; /* Защита: если кнопка и цена не влезают, они мягко перенесутся */
    gap: 15px;
}

.price-box {
    display: flex;
    flex-direction: column;
}
.price-label {
    font-size: 11px;
    color: #64748B;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.price-value {
    font-size: 22px;
    font-weight: 800;
    color: #00A4E4;
}

/* Минималистичная кнопка в карточке */
.product-btn {
    background-color: transparent;
    color: #00A4E4;
    /* ИСПРАВЛЕНИЕ: Делаем изящную тонкую рамку в 1 пиксель */
    border: 1px solid #00A4E4; 
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600; /* Чуть облегчили вес шрифта в кнопке */
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}

.product-btn:hover {
    background-color: #00A4E4;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 164, 228, 0.2);
}



/* ==========================================================================
   6. СТИЛИ ДЛЯ БЛОКА СРАВНЕНИЯ ТЕХНОЛОГИЙ (ЧПУ VS БОЛГАРКА)
   ========================================================================== */
.tech-section {
    padding: 100px 0;
    
    /* ИСПРАВЛЕНИЕ: Подключаем вашу картинку fon01.jpg и накладываем поверх нее 
       полупрозрачный темный градиент, чтобы текст ЧПУ-блока идеально читался */
    background: linear-gradient(135deg, rgba(7, 10, 16, 0.92) 0%, rgba(7, 10, 16, 0.96) 100%), 
                url('fon01.jpg') no-repeat center / cover;
                
    border-bottom: 1px solid #1E293B;
}


/* Сетка для двух карточек сравнения бок о бок */
.tech-compare-grid {
    display: grid;
    /* ИСПРАВЛЕНИЕ: Вместо minmax(450px, 1fr) делаем гибкую сетку, 
       которая автоматически перестроится в 1 колонку на смартфонах */
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

/* Общие стили карточки сравнения */
.tech-card {
    background-color: #121824;
    border-radius: 8px;
    padding: 40px;
    border: 1px solid #1E293B;
    transition: border-color 0.3s ease;
}

.tech-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #1E293B;
}

.tech-status-icon {
    font-size: 24px;
}

.tech-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

/* Список отличий */
.tech-list {
    list-style: none; /* Убираем стандартные маркеры */
}

.tech-list li {
    font-size: 15px;
    color: #94A3B8;
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

/* Маленькие кастомные маркеры-точки перед пунктами */
.tech-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.tech-list li span {
    display: block;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

/* Специфические цвета для плохой технологии */
.tech-bad:hover {
    border-color: #ef4444; /* Красный цвет при наведении */
}
.tech-bad .tech-list li::before {
    background-color: #ef4444;
}

/* Специфические цвета для хорошей технологии (Лазер) */
.tech-good:hover {
    border-color: #00A4E4; /* Лазерно-голубой при наведении */
}
.tech-good .tech-list li::before {
    background-color: #00A4E4;
}

/* ==========================================================================
   7. ШИРОКОФОРМАТНАЯ ГОРИЗОНТАЛЬНАЯ ФОРМА (НА ВЕСЬ ЭКРАН)
   ========================================================================== */
.wide-form-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #0C121C 0%, #070A10 100%);
}

/* Монолитный широкий блок формы */
.wide-form-box {
    background: #ffffff;
    color: #1E293B;
    padding: 60px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    flex-wrap: wrap; /* Чтобы на мобильных инпуты вставали аккуратно под текст */
}

.wide-form-info {
    flex: 1;
    min-width: 400px;
}

.wide-form-title {
    font-size: 32px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.wide-form-text {
    font-size: 15px;
    color: #64748B;
    max-width: 500px;
}

.wide-form-fields {
    flex: 1.2;
    min-width: 450px;
}

/* Выстраиваем поля ввода и кнопку в одну линию */
.horizontal-form {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.wide-input {
    flex: 1;
    min-width: 200px;
    padding: 16px 18px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    background-color: #F8FAFC;
    color: #0F172A;
    transition: all 0.3s;
}

.wide-input:focus {
    border-color: #00A4E4;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 164, 228, 0.15);
    outline: none;
}

.wide-submit-btn {
    background-color: #00A4E4;
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 4px 14px rgba(0, 164, 228, 0.2);
    white-space: nowrap; /* Текст на кнопке не будет переноситься на вторую строку */
}

.wide-submit-btn:hover {
    background-color: #0082B6;
}

.wide-agreement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #64748B;
    cursor: pointer;
}




/* ==========================================================================
   10. СТРОГИЙ ГЕОМЕТРИЧЕСКИЙ АРТ-КОЛЛАЖ (КВАДРАТЫ И ПРЯМОУГОЛЬНИКОВ)
   ========================================================================== */
.gallery-section {
    padding: 40px 0;
    background-color: #070A10;
}

.container-fluid {
    width: 100%;
    padding: 0 4px;
}





/* Строгая квадратная ЧПУ-сетка с автоматическим расчетом пропорций */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
    gap: 4px;                             /* Зазор 4 пикселя */
    
    /* УДАЛЯЕМ жесткую высоту grid-auto-rows: 320px и заменяем на автонастройку: */
    grid-auto-rows: auto; 
}

/* Добавляем жесткое правило пропорций для каждого элемента внутри мозаики */
.gallery-item {
    position: relative;
    overflow: hidden;
    border: none;
    
    /* Браузер сам возьмет ширину колонки и сделает высоту ТОЧНО такой же */
    aspect-ratio: 1 / 1; 
}







/* Элемент мозаики */
.gallery-item {
    position: relative;
    overflow: hidden;
    /* УБРАЛИ КОНТУР у всех стандартных карточек */
    border: none; 
}

.gallery-img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

/* ==========================================================================
   УПРАВЛЕНИЕ ФОНОМ-ЗАГЛУШКОЙ ЧЕРЕЗ HTML-ПАРАМЕТР (--bg-type)
   ========================================================================== */
.gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #57657A;
    font-size: 13px;
    text-align: center;
    padding: 20px;
    transition: all 0.4s ease;
    filter: brightness(0.85);

    /* Логика переключателя фона:
       Если в HTML задано --bg-type: 1 -> подставляется светлый графит (#1E2633)
       Если задано --bg-type: 0 (или любой другой) -> фон становится полностью прозрачным */
    background-color: cubic-bezier(var(--bg-type, 0), 1, 0, 0) == 1 ? #1E2633 : transparent;
    background-color: calc(var(--bg-type, 0) * 1) > 0 ? #1E2633 : transparent;
}

/* Альтернативный чистый способ отработки параметра (для 100% поддержки всеми браузерами) */
.gallery-item[style*="--bg-type: 1"] .gallery-placeholder {
    background-color: #1A2333; /* Сделали фон заглушки заметно светлее, чем общий фон сайта */
}
.gallery-item[style*="--bg-type: 0"] .gallery-placeholder {
    background-color: transparent; /* Полностью прозрачный фон ячейки */
}

/* Эффект оживания при наведении */
.gallery-item:hover .gallery-placeholder {
    transform: scale(1.02);
    filter: brightness(1.1);
}

/* ==========================================================================
   НОВЫЕ СТРОГИЕ ПРОПОРЦИИ ЯЧЕЕК (БЕЗ ГИГАНТСКИХ БЛОКОВ)
   ========================================================================== */
.span-2-1 {
    grid-column: span 2; /* Занимает 2 квадрата в ширину */
    aspect-ratio: 2 / 1; /* Соотношение сторон становится 2 к 1 (прямоугольник из двух квадратов) */
}
.span-1-2 {
    grid-row: span 2;    /* Занимает 2 квадрата в высоту */
    aspect-ratio: 1 / 2; /* Соотношение сторон становится 1 к 2 (вертикальный прямоугольник) */
}


/* ==========================================================================
   ЧИСТЫЕ НАДПИСИ (ТОЛЬКО БЕЛЫЙ ЗАГОЛОВОК, БЕЗ МЕЛКОГО ГОЛУБОГО ТЕКСТА)
   ========================================================================== */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    background: linear-gradient(to top, rgba(7, 10, 16, 0.95) 0%, rgba(7, 10, 16, 0.4) 75%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.35s ease;
    pointer-events: none;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Если нужно, чтобы надпись была видна всегда */
.gallery-overlay.static-info {
    opacity: 1;
    transform: translateY(0);
}

/* Оставили только крупный чистый белый заголовок */
.gallery-item-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.3px;
}

/* ==========================================================================
   ТЕКСТОВЫЕ БЛОКИ 10+ И >150 (КОНТУР ОСТАЕТСЯ ТОЛЬКО ТУТ)
   ========================================================================== */
.gallery-text-block {
    background-color: #0C121C;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
}

/* Класс-фильтр, который оставляет контур ТОЛЬКО на этих двух блоках */
.classic-border {
    border: 1px solid rgba(0, 164, 228, 0.25) !important; 
}

.text-block-content {
    text-align: center;
}

.text-block-num {
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    display: block;
    margin-bottom: 12px;
}

.text-block-desc {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.5;
}

.text-blue .text-block-num {
    color: #00A4E4; /* Цифру >150 подсвечиваем фирменным синим */
}

/* ==========================================================================
   АДАПТИВНОСТЬ ПОД ЭКРАНЫ СМАРТФОНОВ
   ========================================================================== */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 280px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
        gap: 2px;
    }
    .span-2-1, .span-1-2 {
        grid-column: span 1;
        grid-row: span 1;
    }
}




/* ==========================================================================
   11. КРЕАТИВНЫЙ АРТ-ПОДВАЛ (DESIGN FOOTER) - ДЕСКТОРНАЯ ВЕРСИЯ
   ========================================================================== */
.design-footer {
    background-color: #0C121C; /* Темный глубокий индустриальный фон */
    padding: 80px 0 0 0;       /* Снизу 0, чтобы буквы прижимались к краю */
    border-top: 1px solid #1E293B;
    overflow: hidden;          
}

/* Верхняя строка подвала: разнос контента по краям */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;    /* Выравнивание по нижней линии шрифта */
    gap: 40px;
    margin-bottom: 60px;       /* Расстояние до гигантской надписи */
}

/* Левый инфо-блок */
.footer-info-block {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label {
    font-size: 12px;
    color: #64748B;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.info-email {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}
.info-email:hover {
    color: #00A4E4;
}

.info-address {
    font-size: 15px;
    color: #94A3B8;
    max-width: 350px;
}

/* Правый блок с монументальным телефоном */
.footer-contacts-block {
    text-align: right;
}
.text-right {
    text-align: right;
    display: block;
}

.footer-giant-phone {
    font-size: 42px; /* Массивный чистый номер для мониторов */
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.1;
    letter-spacing: -1px;
    transition: color 0.3s ease;
}
.footer-giant-phone:hover {
    color: #00A4E4;
}

/* ==========================================================================
   ГИГАНТСКАЯ НАДПИСЬ НА СТЫКЕ ФОНОВ (ЭФФЕКТ НАПОЛЗАНИЯ)
   ========================================================================== */
.footer-bottom-accent {
    width: 100%;
    text-align: center;
}

.giant-cta {
    font-size: clamp(32px, 8.5vw, 130px); 
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -3px;
    white-space: nowrap; 
    user-select: none;
    position: relative;
    z-index: 15; /* Буквы ложатся поверх белого фона */
    margin-bottom: -10px; /* Величина наплыва */
}

/* Элементы управления цветом букв */
.giant-cta span {
    display: inline-block;
    transition: all 0.3s ease;
}
.giant-cta span:hover {
    transform: translateY(-10px);
}
.giant-cta span.letter-red { color: #ef4444; }
.giant-cta span.letter-green { color: #22c55e; }
.giant-cta span.letter-blue { color: #3b82f6; }
.giant-cta span.letter-glow {
    color: #00A4E4;
    text-shadow: 0 0 20px rgba(0, 164, 228, 0.6), 0 0 40px rgba(0, 164, 228, 0.2);
}

/* Текстовые блоки 10+ и >150 */
.gallery-text-block { background-color: #0C121C; display: flex; align-items: center; justify-content: center; padding: 35px; }
.classic-border { border: 1px solid rgba(0, 164, 228, 0.25) !important; }
.text-block-content { text-align: center; }
.text-block-num { font-size: 46px; font-weight: 800; color: #ffffff; line-height: 1; display: block; margin-bottom: 12px; }
.text-block-desc { font-size: 13px; color: #94A3B8; line-height: 1.5; }
.text-blue .text-block-num { color: #00A4E4; }

/* САМЫЙ НИЖНИЙ БЕЛЫЙ БЛОК */
.sub-footer {
    background-color: #ffffff;
    color: #475569;
    border-top: 1px solid #E2E8F0;
    position: relative;
    z-index: 5;
    padding: 40px 0 20px 0; /* Тонкая изящная десктопная полоса */
}

.sub-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
}

.policy-link {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s;
    border-bottom: 1px solid #CBD5E1;
    padding-bottom: 2px;
}
.policy-link:hover { color: #00A4E4; border-color: #00A4E4; }
.copyright, .developer { color: #94A3B8; }


/* ==========================================================================
   12. ПОЛНАЯ И БЕЗУПРЕЧНАЯ АДАПТАЦИЯ ДЛЯ СМАРТФОНОВ (768px и меньше)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* Мобильная шапка: закрепленный синий номер телефона */
    .main-header {
        position: sticky !important;
        top: 0 !important;
        padding: 10px 0 !important;
        background-color: #0C121C !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    }
    .header-container {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 15px !important;
    }
    .logo, .navigation, .header-hours {
        display: none !important; /* Прячем громоздкие элементы */
    }
    .header-contacts {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    .header-phone {
        font-size: 20px !important;
        color: #00A4E4 !important;
        display: block !important;
        text-align: center !important;
    }

    /* Мобильный каталог: исправление Хрома и Яндекса */
    .catalog-section { padding: 50px 0 !important; overflow: hidden !important; }
    .catalog-grid { display: flex !important; flex-direction: column !important; gap: 20px !important; }
    .product-card { width: 100% !important; aspect-ratio: auto !important; }
    .product-image { height: 180px !important; }
    .product-info { padding: 20px !important; }
    .product-meta { flex-direction: column !important; align-items: stretch !important; gap: 15px !important; }
    .price-box { align-items: center !important; }
    .product-btn { width: 100% !important; text-align: center !important; }

    /* Блок сравнения технологий */
    .tech-compare-grid { grid-template-columns: 1fr; gap: 20px; }
    .tech-card { padding: 25px; }

    /* Мобильный главный экран (Hero) */
    .hero-container { gap: 30px; }
    .hero-info { min-width: 100%; text-align: center; }
    .main-title { font-size: 32px; }
    .hero-description { font-size: 16px; margin: 0 auto; }
    .form-wrapper { max-width: 100%; padding: 25px; }

    /* Мобильные формы (убираем распирание вширь) */
    .wide-form-box { padding: 30px 20px !important; }
    .wide-form-info { min-width: 100% !important; text-align: center !important; margin-bottom: 20px !important; }
    .wide-form-title { font-size: 24px !important; }
    .wide-form-fields { min-width: 100% !important; }
    .horizontal-form { flex-direction: column !important; gap: 12px !important; }
    .wide-input { width: 100% !important; min-width: 1px !important; }
    .wide-submit-btn { width: 100% !important; min-width: 1px !important; white-space: normal !important; text-align: center !important; }
    .wide-agreement { justify-content: center !important; }

    /* МОБИЛЬНЫЙ ПОДВАЛ И СТЫК НАДПИСИ */
    .footer-top {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 25px !important;
    }
    .footer-info-block { align-items: center !important; text-align: center !important; }
    .info-address { text-align: center !important; }
    .footer-contacts-block { text-align: center !important; width: 100% !important; }
    
    /* Номер телефона в подвале: адаптивный размер в одну строку */
    .footer-giant-phone {
        font-size: clamp(24px, 7.5vw, 34px) !important;
        white-space: nowrap !important; 
        display: block !important;
        text-align: center !important;
    }

    /* Исправление наложения текстов в белом блоке */
    .sub-footer-container {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    /* Тонкая настройка надписи «ПОРАБОТАЕМ?» на мобильных */
    .giant-cta {
        font-size: 8.2vw !important; 
        letter-spacing: -1px !important;
        white-space: nowrap !important;
        position: relative !important;
        z-index: 15 !important;
        
        /* Управление глубиной провала на телефоне: регулируйте этот параметр */
        margin-bottom: -5px !important; 
    }

    .sub-footer {
        padding: 40px 0 25px 0 !important;
    }
} /* Конец мобильного режима */