/* Подключаем шрифт Montserrat из Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@font-face {
    font-family: 'KOT-Eitai Gothic'; /* Так мы будем обращаться к нему в коде */
    src: url('../fonts/KOT-Eitai-Gothic.ttf') format('truetype'); /* Точный путь к файлу */
    font-weight: 700; /* В макете он у вас везде жирный (Bold) */
    font-style: normal;
    font-display: swap; /* Чтобы текст не пропадал, пока шрифт грузится */
}
@font-face {
    font-family: 'Random Grotesque Standard Medium';
    src: url('../fonts/RandomGrotesque-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap; /* Чтобы текст появился сразу, а шрифт подгрузился долей секунды позже */
}

/* =========================================
   ОБНУЛЕНИЕ И БАЗОВЫЕ НАСТРОЙКИ
   ========================================= */
   html, body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #F8F9FA !important;
    color: #333333 !important;
    overflow-x: hidden;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif; /* Применяем ваш шрифт ко всему сайту */
    font-size: 16px;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ограничитель ширины (чтобы контент не разъезжался на огромных мониторах) */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3, .section-title, .stat-number {
    font-family: 'KOT-Eitai Gothic', sans-serif;
}

/* По умолчанию прячем мобильные блоки на компе */
.mobile-only {
    display: none !important;
}
/* =========================================
   ШАПКА (HEADER)
   ========================================= */
.header {
    position: fixed; /* Шапка "парит" поверх фона */
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 1000; /* Чтобы шапка всегда была поверх всего */
    zoom: 0.94;
}

/* Та самая белая плашка из Фигмы */
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2); /* Ваша тень */
    border-radius: 20px; /* Ваше скругление */
    padding: 5px 60px;
}

.nav ul {
    list-style: none;
    display: flex;
    gap: 70px;
}

.nav a {
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    font-size: 23px;
    transition: color 0.3s;
}

.nav a:hover {
    color: #00AAFF; /* Синий цвет при наведении */
}

.phone a {
    text-decoration: none;
    color: #000000;
    font-weight: 700;
    font-size: 24px;
    transition: color 0.3s;
}
.phone a:hover {
    color: #00AAFF; /* Синий цвет при наведении */
}

/* =========================================
   ВЫПАДАЮЩИЙ ВТОРОЙ НОМЕР В ШАПКЕ
   ========================================= */
.header-phone-wrapper {
    position: relative; /* Делаем обертку "точкой отсчета" для выпадающего меню */
    display: flex;
    align-items: center;
    padding: 10px 0; /* Даем чуть больше зоны для наведения мышки */
}

/* Стили для основного номера (чтобы он выглядел как в твоей Фигме) */
.header-phone-main {
    font-size: 32px;
    color: #000000;
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 10px; /* Немного скруглим, если нужно. Если в макете нет - удали */
    transition: 0.3s;
}

/* Сама выпадающая плашка */
.phone-dropdown {
    position: absolute;
    top: 100%; /* Располагаем ровно под основным номером */
    right: 0.1; /* Прижимаем к правому краю */
    background: #FFFFFF;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    padding: 15px 20px;
    
    /* Прячем блок */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px); /* Чуть сдвигаем вверх для анимации выезда */
    transition: all 0.3s ease;
    z-index: 100; /* Чтобы плашка была поверх всего сайта */
    white-space: nowrap; /* Чтобы номер не переносился на две строки */
}

/* АНИМАЦИЯ: При наведении на обертку -> показываем плашку */
.header-phone-wrapper:hover .phone-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px); /* Опускаем вниз на место */
}

/* Стили для второго номера внутри плашки */
.phone-dropdown a {
    font-size: 24px; /* Сделал чуть меньше основного, чтобы смотрелось аккуратно */
    color: #000000;
    text-decoration: none;
    transition: color 0.3s;
}

.phone-dropdown a:hover {
    color: #00AAFF; /* При наведении второй номер становится синим */
}
/* =========================================
   ГЛАВНЫЙ ЭКРАН (HERO)
   ========================================= */
.hero {
    /* ПРОПИШИТЕ ТУТ ПРАВИЛЬНОЕ ИМЯ ВАШЕЙ КАРТИНКИ С ДОМОМ */
    background-image: url('../images/background1.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; /* Высота на весь экран */
    display: flex;
    align-items: center; /* Центрируем контент по вертикали */
    padding-top: 100px; /* Отступ сверху, чтобы шапка не перекрывала текст */
    zoom: 0.92;
}

/* Делаем две колонки: слева текст, справа форма */
.hero .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 150%;
    gap: 70px;
}

/* --- ЛЕВАЯ ЧАСТЬ ("ТЕМНЯШК" из Фигмы) --- */
.hero-content {
    max-width: 850px; /* По Фигме width: 848px */
    background: rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(15px); /* По Фигме blur(34.85px) */
    padding: 35px 50px; /* Сделал отступы чуть больше для воздуха */
    border-radius: 30px;
}

.hero h1 {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 55px; /* Точно по Фигме */
    line-height: 1.1;
    letter-spacing: -0.03em; /* По Фигме */
    margin-bottom: 25px;
}

.hero .hero-subtitle {
    color: #FFFFFF;
    font-size: 28px; /* Точно по Фигме */
    line-height: 1.1;
    margin-bottom: 33px;
}

/* --- СПИСОК ПРЕИМУЩЕСТВ --- */
.hero-features {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Отступ между строками */
}

.hero-features li {
    display: flex;
    align-items: center; /* Центрируем иконку и текст по одной линии */
    gap: 20px;
    color: #FFFFFF;
    font-size: 25px; /* Точно по Фигме */
    line-height: 1.1;
}

/* Иконки списка */
.feature-icon {
    width: 38px; /* Средний размер иконок из Фигмы (42-46px) */
    height: auto;
    object-fit: contain;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 70px;
}

/* Белая кнопка */
.btn-light {
    background: #FFFFFF;
    color: #000000;
    text-decoration: none;
    padding: 25px 45px; /* Сделал крупнее под новый дизайн */
    border-radius: 30px;
    /* font-family: 'Random Grotesque Standard Medium', sans-serif; Твой шрифт из Фигмы */
    font-weight: 500;
    font-size: 26px; /* Точно по Фигме */
    transition: 0.3s;
}

.btn-light:hover {
    background: #e0e0e0;
    transform: scale(1.02);
}

.socials { display: flex; gap: 20px; }
.socials img { width: 75px; height: 75px; } /* Точно по Фигме */

/* =========================================
   ПРАВАЯ ЧАСТЬ (КАРТОЧКА КОНСУЛЬТАЦИИ)
   ========================================= */
.hero-consult-box {
    background: #FFFFFF;
    border-radius: 20px;
    width: 100%;
    max-width: 480px; /* Точно по Фигме */
    min-height: 133px; /* Точно по Фигме */
    padding: 60px 40px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center; 
}

.hero-consult-box h2 {
    color: #000000;
    font-family: 'KOT-Eitai Gothic', sans-serif; /* Твой шрифт из Фигмы */
    font-size: 45px; /* Точно по Фигме */
    font-weight: 700;
    margin-bottom: 37px;
    line-height: 1.2;
}

.hero-consult-box .consult-text {
    font-size: 32px; /* Точно по Фигме */
    color: #000000;
    line-height: 1.1;
    margin-bottom: 50px; 
}

/* Темная кнопка (Написать нам) */
.hero-consult-box .btn-dark {
    width: 100%;
    max-width: 476px; /* Точно по Фигме (ширина синей кнопки) */
    background: #041A53;
    color: #FFFFFF;
    padding: 30px 30px; /* Отступы для высоты кнопки */
    border: none;
    border-radius: 30px;
    font-family: 'Random Grotesque Standard Medium', sans-serif;
    font-size: 40px; /* Точно по Фигме */
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.651); /* Твоя тень из Фигмы */
    transition: 0.3s;
    display: block; /* Чтобы кнопка центрировалась внутри флексбокса */
}

.hero-consult-box .btn-dark:hover {
    background: #0c318f;
    transform: translateY(-3px); 
}

/* ==============================================================
   БЛОК 2: О НАС
   ========================================= */
.about {
    /* Тот самый градиент из вашей Фигмы */
    background: linear-gradient(354.46deg, #171C36 27.77%, #041A53 85.09%);
    padding: 50px 0;
    color: #FFFFFF;
    overflow: hidden; /* Чтобы декорации справа не ломали страницу */
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.781);
    position: relative;
    z-index: 10;
    zoom: 0.95;
}

/* Раскидываем контент налево, а фото направо */
.about-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

/* --- ЛЕВАЯ ЧАСТЬ --- */
.about-content {
    flex: 1; /* Занимает всю левую половину */
    max-width: 820px;
}

.section-title {
    font-size: 55px;
    font-weight: 500;
    margin-bottom: 25px;
}

.about-text {
    font-size: 30px;
    line-height: 1.3;
    margin-bottom: 40px;
    max-width: 500px;
}

.section-subtitle {
    font-size: 47px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 500px;
}

/* --- СЕТКА КАРТОЧЕК --- */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Делаем 2 колонки */
    gap: 17px; /* Отступ между карточками */
}

.stat-card {
    border: 4.4px solid #0059FF; /* Синяя рамка из Фигмы */
    border-radius: 20px;
    padding: 15px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Стили для синих цифр */
.stat-number {
    color: #0059FF;
    font-size: 50px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 7px;
}

/* Слово "более" и "лет" делаем поменьше, как в макете */
.stat-number .small-text {
    font-size: 30px;
    display: inline-block;
    /* Сдвигаем слова ближе к цифрам. Отрицательный отступ "съедает" лишний пробел */
    margin: 0 -10px; 
}

.stat-label {
    font-size: 21.8px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 -10px; 
}
/* Возвращаем текст на место ТОЛЬКО в первой карточке (где 30+) */
.stat-card:first-child .stat-label {
    margin: 0; /* Обнуляем отрицательный отступ */
}

/* Исключение для белой карточки Авито */
.avito-card {
    background-color: #FFFFFF;
    align-items: center; /* Центрируем картинку Авито */
}

.avito-card img {
    max-height: 100px; /* Чтобы картинка не была слишком огромной */
}

/* =========================================
   ПРАВАЯ ЧАСТЬ (ОТЗЫВЫ)
   ========================================= */
.about-reviews {
    flex: 1;
    display: flex;
    flex-direction: column; /* Выстраиваем картинки в колонку сверху вниз */
    align-items: flex-end; /* Прижимаем их все к правому краю */
    gap: 16px; /* Отступ между отзывами */
    max-width: 600px;
}

.review-img {
    height: auto;
    box-sizing: border-box;
    object-fit: contain;
    background: #ffffff00; /* На случай, если картинки прозрачные, подложка будет белой */
}

/* Создаем эффект "лесенки", точно перенося ширину из вашей Фигмы */
.review-img:nth-child(1) { width: 100%; max-width: 600px; }
.review-img:nth-child(2) { width: 100%;  max-width: 600px; }
.review-img:nth-child(3) { width: 100%;  max-width: 600px; }
.review-img:nth-child(4) { width: 100%;  max-width: 600px; }

/* =========================================
   ОБЩИЙ ПОЛОСАТЫЙ ФОН ДЛЯ 3, 4 И 5 БЛОКОВ
   ========================================= */
.pattern-bg-wrapper {
    background-color: #FFFFFF;
    background-image: repeating-linear-gradient(
        -51deg,
        rgba(0, 89, 255, 0.04),
        rgba(0, 89, 255, 0.05) 3px,
        transparent 2px,
        transparent 25px
    );
}
/* ===================================================================
   БЛОК 3: ВИДЫ ИЗДЕЛИЙ И ЦЕНЫ
   ========================================= */
.products {
    padding: 100px 0;
    zoom: 0.92;
}

/* Цвет заголовка для светлых блоков */
.text-dark {
    color: #000000;
    
}
/* --- СЕТКА КАРТОЧЕК --- */
.products-grid {
    display: flex;
    flex-wrap: wrap; /* Позволяет карточкам переноситься на новую строку */
    justify-content: center; /* Центрирует карточки (важно для последнего ряда!) */
    gap: 50px;
    margin-top: 40px;
}

/* --- ДИЗАЙН КАРТОЧКИ --- */
.product-card {
    /* Высчитываем ширину: 3 карточки в ряд минус отступы */
    width: calc(33.333% - 50px); 
    min-width: 320px; /* Чтобы на телефонах не сжимались в точку */
    border-radius: 20px;
    padding: 30px; /* Отступы внутри карточки (снизу 0, чтобы картинка красиво стояла) */
    display: flex;
    flex-direction: column;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Цвета карточек из Фигмы */
.bg-blue-light { background: linear-gradient(160deg, #1D93D2 16%, #0059FF 72%); }
.bg-blue-mid { background: linear-gradient(152deg, #0059FF 10%, #012F86 72%); }
.bg-blue-dark { background: linear-gradient(153deg, #022C7D 18%, #191A29 70%); }

.product-info {
    flex-grow: 1; /* Прижимает картинку к низу карточки */
    color: #FFFFFF;
    margin-bottom: 0px;
}

.product-info h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.product-info p {
    font-size: 21px;
    font-weight: 400;
}

/* --- ФОТОГРАФИЯ ВНУТРИ КАРТОЧКИ --- */
.product-card img {
    /* Тянем картинку влево, вправо и вниз на размер внутренних отступов карточки (30px) */
    margin-left: -60px;
    margin-bottom: -60px;
    
    /* Увеличиваем ширину, чтобы она перекрыла отрицательные отступы */
    width: calc(100% + 120px);
    /* Отменяем базовое ограничение для картинок, которое мы писали в самом начале */
    max-width: none !important; 
    
    /* Задаем высоту, чтобы все фото были одинаковыми */
    height: 400px; 

    display: block;
}

/* --- КНОПКИ ВНИЗУ --- */
.products-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Увеличил отступ между кнопками */
    margin-top: 80px; /* Отступ от карточек */
    zoom: 0.92;
}

/* Белая кнопка с синей рамкой */
.btn-outline {
    display: inline-block;
    background: #FFFFFF;
    color: #041A53;
    border: 3px solid #041A53;
    padding: 20px 50px; /* Сделал крупнее, как в Фигме */
    border-radius: 30px;
    font-size: 30px; /* По Фигме */
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
    text-align: center;
    width: 100%;
    max-width: 520px; /* Чтобы не была бесконечной */
}

.btn-outline:hover {
    background: #041A53;
    color: #FFFFFF;
    transform: scale(1.03);
}

/* Темно-синяя кнопка "Написать нам" в блоке изделий */
.products-actions .btn-dark {
    font-size: 30px; /* По Фигме */
    font-weight: 500;
    color: #FFFFFF; /* Белый текст */
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    background: #041A53;
    box-shadow: 0px 4px 18.3px #000000;
    border-radius: 30px;
    width: 100%;
    max-width: 418px;
    height: auto;
    padding: 30px 20px;
    
    /* Дополнительные настройки для правильного отображения */
    display: inline-block; 
    margin-top: 0;
    transition: all 0.3s ease;
    border: none;
    box-sizing: border-box; /* Чтобы padding не ломал ширину */
}

/* Эффект при наведении */
.products-actions .btn-dark:hover {
    background: #0c318f;
    transform: scale(1.03); /* Кнопка чуть-чуть приподнимается */
}

/* ===================================================================================
   НОВЫЙ БЛОК: ЭТАПЫ РАБОТЫ
   ========================================= */
.work-steps-box {
    margin-top: 170px; /* Отступ от кнопок вниз */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px; /* Ограничиваем ширину, чтобы текст не разъезжался */
    margin-left: auto;
    margin-right: auto;
}

.steps-line-img {
    width: 90%;
    height: auto;
    object-fit: contain;
    margin-bottom: 40px; /* Отступ от картинки до текста */
}

.steps-text-grid {
    display: flex;
    justify-content: space-between;
    width: 90%;
    gap: 40px;
}

.step-item {
    flex: 1; /* Все 3 колонки занимают равное место */
    display: flex;
    flex-direction: column;
}

.step-item h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px; /* По Фигме */
    color: #041A53;
    margin-bottom: 50px;
}

.step-item p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 30px; /* Сделал чуть меньше заголовка для читаемости (в Фигме 40) */
    color: #041A53;
    line-height: 1.2;
}

/* Выравнивание текста по колонкам (как в макете) */
.text-center { align-items: center; text-align: center; }
.text-right { align-items: flex-end; text-align: right; }

/* =======================================================================
   БЛОК 4: КОНТАКТЫ
   ========================================= */

/* Сам темно-синий блок (карточка) */

.contacts-wrapper {
    /* Тот самый градиент из Фигмы */
    background: linear-gradient(354deg, #171C36 27%, #041A53 85%);
    /* Яркая синяя окантовка */
    border: 15px solid #0059FF; 
    border-radius: 30px;
    padding: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.753);
    zoom: 0.92;
}

/* Цвет заголовка для темных блоков */
.text-white {
    color: #FFFFFF !important;
    text-align: left;
    margin-bottom: 30px;
}

/* --- ЛЕВАЯ ЧАСТЬ (ТЕКСТ) --- */
.contacts-info {
    max-width: 530px;
}

.contacts-text {
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1.4;
    margin-bottom: 50px;
}

/* --- КНОПКИ СОЦСЕТЕЙ --- */
.contacts-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}

.btn-social {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    color: #000000;
    text-decoration: none;
    /* Внутренние отступы кнопки */
    padding: 8px 15px; 
    border-radius: 40px;
    width: 320px;
    transition: 0.3s;
}

.btn-social:hover {
    background: #e0e0e0;
    transform: translateX(10px); /* Легкий эффект сдвига при наведении */
}

/* Иконка внутри кнопки */
.btn-social img {
    width: 50px;
    height: 50px;
    /* Убираем рамки/скругления на случай, если они наследовались от других картинок */
    border: none;
    border-radius: 0; 
}

/* Текст внутри кнопки */
.btn-social span {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    /* Хитрый трюк: заставляем текст занять всё свободное место и центрироваться */
    flex-grow: 1;
    text-align: center;
    /* Отступ справа, равный ширине картинки, чтобы текст был ИДЕАЛЬНО по центру кнопки */
    padding-right: 50px; 
}

/* Телефон */
.contacts-phone {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 37px; /* Чуть уменьшил от 56px, чтобы влезало на ноутбуках */
    font-weight: 700;
    transition: 0.3s;
}

.contacts-phone:hover {
    color: #00AAFF; /* Голубой цвет при наведении */
}

/* --- ПРАВАЯ ЧАСТЬ (ФОТО) --- */
.contacts-gallery {
    display: flex;
    gap: 20px;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gallery-item img {
    width: 380px; 
    height: 400px;
    object-fit: cover;
    border: none; /* Убираем рамку, если она наследовалась */
    border-radius: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

.gallery-item p {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* =====================================================================================================================
   БЛОК 5: РАБОТЫ (ГАЛЕРЕЯ)
   ========================================= */
.works {
    padding: 120px 0;
    zoom: 0.92;
}

.works .section-title {
    text-align: left; /* В этом блоке заголовок слева */
    margin-bottom: 40px;
}

/* --- КНОПКИ ФИЛЬТРОВ --- */
.works-filters {
    display: flex;
    flex-wrap: wrap; /* Если кнопок много, они перенесутся на новую строку */
    gap: 15px;
    margin-bottom: 60px;
}

.filter-btn {
    display: inline-block;
    padding: 12px 30px;
    border: 2.5px solid #041A53; /* Темно-синяя рамка */
    border-radius: 30px;
    color: #041A53;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
}

/* Эффект при наведении на кнопку фильтра */
.filter-btn:hover {
    background-color: #041A53;
    color: #FFFFFF;
}

/* --- КАТЕГОРИИ И СЕТКА ФОТОГРАФИЙ --- */
.works-category {
    margin-bottom: 70px; /* Отступ между категориями */
    /* Добавляем невидимый отступ сверху, чтобы при плавной прокрутке 
       заголовок не прилипал к самому верху экрана */
    scroll-margin-top: 50px;
    zoom: 0.95; 
}

.works-category h3 {
    font-size: 32px;
    color: #171C36;
    margin-bottom: 30px;
    font-weight: 700;
}

/* Умная сетка: сама решает, сколько колонок вместить (обычно 4 на ПК) */
.works-grid {
    display: grid;
    /* Минимальная ширина фото 280px, максимальная - 1 доля свободного места */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    align-items: stretch; /* Чтобы фото разной высоты не растягивались */
}

/* Так как рамка уже есть на самой картинке, мы просто задаем ей ширину 100% */
.works-grid img {
    width: 100%;
    height: auto;
    display: block;
    /* Убрали border и border-radius, так как они вшиты в вашу картинку! */
    transition: transform 0.3s ease; /* Добавим легкое увеличение при наведении для красоты */
}

.works-grid img:hover {
    transform: translateY(-6px); /* При наведении фото чуть приподнимается */
}

/* =====================================================================================================
   БЛОК: АДРЕС
   ========================================= */
.address-section {
    background: linear-gradient(354.46deg, #171C36 27.77%, #041A53 70.21%);
    padding: 60px 0;
    color: #FFFFFF;
    box-shadow: 0px 4px 41.3px rgba(0, 0, 0, 0.5); /* Тень из Фигмы */
    position: relative;
    z-index: 10;
    border-radius: 20px; /* По Фигме у блока есть скругление */
    margin: 100px 20px; /* Отступы от других блоков */
    zoom: 0.9;
}

.address-container {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    gap: 60px;
    max-width: 1750px; /* Разрешаем этому блоку быть шире остальных */
    width: 100%;
}

/* --- ЛЕВАЯ ЧАСТЬ --- */
.address-content {
    flex: 1;
    max-width: 800px;
}

.address-content .section-title {
    font-family: 'KOT-Eitai Gothic', sans-serif;
    font-size: 70px;
    margin-bottom: 60px;
    color: #FFFFFF;
    letter-spacing: -0.04em;
}

.address-block {
    margin-bottom: 40px;
}

.address-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    color: #0737B3; /* Синий цвет из Фигмы */
    font-weight: 400;
    margin-bottom: 15px;
}

.address-text {
    font-family: 'KOT-Eitai Gothic', sans-serif;
    font-size: 40px;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    display: block;
}

/* --- КНОПКА АВИТО В АДРЕСЕ --- */
.address-action {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
}

.address-action img {
    width: 100px; /* Размер иконки Авито */
    height: 100px;
    object-fit: contain;
}

.btn-avito-white {
    background: #FFFFFF;
    color: #000000;
    font-size: 30px;
    font-weight: 500;
    padding: 20px 40px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-avito-white:hover {
    background: #e0e0e0;
    transform: scale(1.03);
}

/* --- ПРАВАЯ ЧАСТЬ (КАРТА) --- */
.address-map {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.address-map img {
    width: 150%;
    max-width: 960px; /* Размер из Фигмы */
    height: auto;
    filter: drop-shadow(0px 4px 56px rgba(0, 0, 0, 0.76)); /* Тень карты */
    margin-left: auto;
}

/* Копировать буфер обмена */
/* =====================================================================================================
   ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ (TOAST)
   ======================================================================= */
.toast-notification {
    position: fixed;
    bottom: -100px; /* Прячем его за нижним краем экрана */
    right: 30px;
    background: #02123D; /* Твой фирменный темно-синий */
    color: #FFFFFF;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    font-size: 16px;
    font-weight: 500;
    z-index: 9999; /* Поверх вообще всего */
    opacity: 0;
    transition: all 0.8s ease; /* Плавная анимация выезда */
    pointer-events: none; /* Чтобы клики проходили сквозь него */
}

/* Класс, который JS будет добавлять для показа */
.toast-notification.show {
    bottom: 30px; /* Выезжает вверх */
    opacity: 1;
}

/* ==================================================================================================
   АДАПТАЦИЯ ДЛЯ НОУТБУКОВ И НЕБОЛЬШИХ ЭКРАНОВ (ширина до 1400px)
   ================================================================================================== */
@media (max-width: 1400px) {
    
    /* --- ОБЩИЕ КОНТЕЙНЕРЫ --- */
    /* Даем блокам по бокам немного "воздуха", чтобы они не прилипали к краям экрана */
    .header {
    top: 17px;
    }
    .header .container, .address-container {
        padding-left: 30px;
        padding-right: 30px;
        gap: 30px; /* Уменьшаем расстояние между левыми и правыми колонками */
        zoom: 0.8;
    }
    /* --- ГЛАВНЫЙ ЭКРАН --- */
    .hero {
        zoom: 0.8;
    }
    .hero h1 {
        font-size: 55px; /* Было 70px */
    }
    .hero .hero-subtitle {
        font-size: 30px; /* Было 40px */
    }
    .hero-features li {
        font-size: 26px; /* Было 32px */
    }
    .hero-consult-box h2 {
        font-size: 40px; /* Было 48px */
    }

    /* --- БЛОК О НАС --- */
    .about {
        zoom: 0.8;
    }
    .section-title {
        font-size: 55px; /* Уменьшаем главные заголовки везде */
    }
    .stat-number {
        font-size: 40px; /* Уменьшаем синие цифры статистики */
    }
    .stat-number .small-text {
        font-size: 24px;
    }

    /* --- БЛОК УСЛУГ И ЭТАПОВ --- */
    /* Уменьшаем шрифты в шагах работы, чтобы текст не вылезал за границы */
    .products {
        zoom: 0.8;
    }
    .step-item h4 {
        font-size: 32px;
    }
    .step-item p {
        font-size: 26px;
    }
    .btn-outline, .products-actions .btn-dark {
        font-size: 30px; /* Уменьшаем текст в больших кнопках */
        padding: 20px 40px;
    }

    /* --- БЛОК КОНТАКТЫ И АДРЕС --- */
    .contacts-wrapper {
        padding: 40px; /* Было 70px, на ноутах это слишком много */
        gap: 40px;
        zoom: 0.85;
        justify-content: center;
    }
    .contacts-gallery {
        zoom: 0.95;
    }
    .gallery-item img {
    width: 330px; 
    height: 400px;
    object-fit: cover;
    border: none; /* Убираем рамку, если она наследовалась */
    border-radius: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    }
    .address-content .section-title {
        font-size: 55px;
        margin-bottom: 30px;
    }
    .address-label {
        font-size: 36px;
    }
    .address-text, .contacts-phone {
        font-size: 32px; /* Номера телефонов делаем чуть компактнее */
    }
    .works {
        zoom: 0.85;
    }
    .address-map img {
    width: 110%;
    max-width: 960px; /* Размер из Фигмы */
    height: auto;
    filter: drop-shadow(0px 4px 56px rgba(0, 0, 0, 0.76)); /* Тень карты */
    margin-left: auto;
    zoom: 0.95;
    }
}
/* =====================================================================================================
   АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНОВ (Ширина до 768px)
   ===================================================================================================== */
.mobile-only {
    display: none !important; /* Прячем на компе */
}

@media (max-width: 768px) {
    /* Убиваем стандартный уродливый синий квадрат при тапе на всём мобильном сайте */
    * {
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Делаем красивое голубое свечение текста в меню при нажатии пальцем */
    .mobile-header-container a:active {
        color: #00AAFF !important; /* Яркий голубой цвет */
        transition: color 0.2s ease; /* Добавляем микро-плавность */
    }
    
    /* Заодно сделаем красиво для кнопок-фильтров в блоке "Работы" (Металлические лестницы, Лифты и тд) */
    .mob-filter-btn:active {
        background: #171C36 !important;
        color: #FFFFFF !important;
    }
    /* 1. ПЕРЕКЛЮЧАТЕЛИ И СБРОС */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    body { overflow-x: hidden; }
    * { box-sizing: border-box !important; }

    /* Жестко запрещаем всей странице скроллиться вбок */
    html, body { 
        overflow-x: hidden !important; 
        width: 100% !important;
        margin: 0;
        padding: 0;
    }
    * { box-sizing: border-box !important; }

    /* Насильно возвращаем всем контейнерам ширину 100% вместо 150% с десктопа */
    .container, .hero .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Сбрасываем zoom и отступ сверху на главной секции для мобилки */
    .hero { 
        zoom: 1 !important;
        align-items: flex-start !important;
        padding-top: 100px;
        padding-bottom: 50px !important;
        background-size: cover !important; /* Запрещаем сплющивать, разрешаем только обрезать лишнее */
        background-position: center bottom !important; /* Прижимаем картинку к низу, чтобы ступеньки были в кадре как в Фигме */
        background-repeat: no-repeat !important;
        min-height: 65vh !important;
    }

    /* 2. ШАПКА В ОДНУ СТРОКУ (По-новому в ряд) */
    .mobile-header { 
        padding: 15px;
        position: fixed !important; /* Отрываем шапку от страницы */
        top: 0; /* Прижимаем к самому верху */
        left: 0;
        width: 100%;
        padding: 20px; 
        z-index: 2000; /* Делаем так, чтобы она была поверх всех остальных блоков */
    }
    .mobile-header-container {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 13px 20px;
        display: flex;
        flex-wrap: nowrap; /* Запрещаем перенос */
        justify-content: space-between; /* Распределяем ссылки */
        gap: 8px;
        box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);
        overflow-x: auto; /* Скроллим пальцем, если не влезет */
        scrollbar-width: none;
    }
    .mobile-header-container::-webkit-scrollbar { display: none; }
    .mobile-header-container a {
        font-family: 'Montserrat', sans-serif;
        font-size: 8.5px;
        font-weight: 500;
        max-width: 100px;
        color: #000000;
        text-decoration: none;
        white-space: nowrap; /* Ссылки не ломаются */
    }

    /* 3. ГЛАВНЫЙ ЭКРАН (Прижат к левому краю) */
    .mobile-hero-content {
        background: rgba(0, 0, 0, 0.45); /* Темняшка */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: 20px;
        padding: 30px 20px; /* Вернул отступы побольше, чтобы дышало */
        margin-top: 15px;
        margin-bottom: 20px !important;
        width: 100%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        
        /* ИСПРАВЛЕНИЕ: Прижимаем ВСЁ содержимое блока к левому краю! */
        align-items: flex-start !important; 
    }
    
    .mobile-title {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 29px !important; 
        color: #FFFFFF;
        line-height: 1.1;
        margin-bottom: 15px;
        text-align: left !important;
    }
    
    .mobile-subtitle {
        font-family: 'Montserrat', sans-serif;
        font-size: 14.5px;
        color: #FFFFFF;
        line-height: 1.4;
        margin-bottom: 25px;
        text-align: left !important; /* На всякий случай жестко прижали текст */
    }
    
    .mobile-features {
        list-style: none;
        padding: 0;
        margin: 0 0 25px 0; /* Убрал auto по бокам, чтобы список не центрировался */
        display: flex;
        flex-direction: column;
        gap: 7px; /* Чуть увеличил расстояние между пунктами */
    }
    
    .mobile-features li {
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left; 
    }
    
    .mobile-features img {
        width: 22px;
        height: auto;
    }
    
    /* --- ИСПРАВЛЕНИЕ КНОПКИ И ИКОНОК --- */
    .mobile-hero-actions {
        display: flex !important;
        justify-content: flex-start !important; /* Прижимаем влево */
        align-items: center !important;
        gap: 15px !important;
        width: 100%;
    }
    
    .btn-mobile-white {
        background: #FFFFFF;
        color: #000000;
        font-size: 13px; /* Чуть увеличил текст на кнопке */
        padding: 12px 22px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 500;
    }
    
    /* Добавляем ЖЕСТКИЕ стили для блока с иконками соцсетей */
    .mobile-socials {
        display: flex !important;
        flex-direction: row !important; /* Строго в одну линию! */
        align-items: center !important;
        gap: 15px !important; 
    }
    
    .mobile-socials a {
        display: flex;
    }

    .mobile-socials img {
        width: 35px !important;
        height: 35px !important;
    }

    /* 4. БЛОК 3: ГАЛЕРЕЯ И КОНСУЛЬТАЦИЯ (КАК В ФИГМЕ, С ЗАБЛЮРЕННЫМ ФОНОМ) */
    .mobile-only-consultation {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-top: 15px solid #FFFFFF;
    }

    /* --- Зона консультации (Белая карточка С ЗАБЛЮРЕННЫМ ФОНОМ) --- */
    .mob-consult-section {
        padding: 40px 20px; /* Отступы от синего блока сверху */
        display: flex;
        justify-content: center;
        
        /* НОВЫЕ ПАРАМЕТРЫ ДЛЯ ФОНА */
        position: relative;
        overflow: hidden;
        background: transparent !important;
    }

    /* Псевдоэлемент с заблюренным фоном */
    .mob-consult-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* ПРАВИЛЬНЫЙ ПУТЬ К ИЗОБРАЖЕНИЮ ГЛАВНОГО ЭКРАНА ИЗ style.css */
        background-image: url('../images/background1.png') !important; 
        
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        
        /* ПАРАМЕТРЫ ЗАБЛЮРЕННОСТИ */
        filter: blur(15px); /* Тот же блюр, что и на главном */
        
        /* Масштабируем, чтобы скрыть размытые края на границе */
        transform: scale(1.1); 
        
        z-index: 1; /* Ставим позади карточки */
    }
    .consultation-card {
        background: #FFFFFF;
        padding: 50px 15px;
        border-radius: 20px;
        text-align: center;
        width: 70%;
        max-width: 550px;
        
        /* НОВЫЕ ПАРАМЕТРЫ ДЛЯ СЛОЙНОСТИ */
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.35);
        position: relative;
        z-index: 2;
    }
    
    .consult-title {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        color: #000000;
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .consult-text {
        font-family: 'Montserrat', sans-serif;
        color: #333333;
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 29px;
        font-weight: 300;
    }
    
    .btn-dark-fullbtn {
        background: #03235E; /* Темно-синяя кнопка */
        color: #FFFFFF;
        text-decoration: none;
        padding: 15px 30px;
        border-radius: 30px;
        font-size: 15px;
        display: center; /* Кнопка растягивается */
        font-weight: 300;
        width: 70%;
    }
    /* =========================================
       БЛОК 2: О НАС (МОБИЛКА ПО МАКЕТУ)
       ========================================= */
    .mobile-about-wrapper {
        background: linear-gradient(354deg, #171C36 27%, #041A53 85%);
        box-shadow: 0px 4px 22px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        padding: 30px 20px;
        margin-top: -25px; /* Отступ от главного экрана */
    }
    .mobile-about-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 21px;
        color: #FFFFFF;
        line-height: 1.2;
        margin-bottom: 30px;
        text-align: left;
        max-width: 380px;
    }

    /* --- Сетка статистики 2x2 --- */
    .mob-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Две равные колонки */
        gap: 15px; /* Отступы между карточками */
        margin-bottom: 35px;
    }

    .mob-stat-box {
        border: 2px solid #0059FF;
        border-radius: 12px;
        padding: 15px;
        text-align: left; /* В макете текст прижат влево внутри карточки */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Карточка Авито отличается: она белая и без синей рамки */
    .mob-avito-box {
        background: #FFFFFF;
        border: 2px solid #0059FF; /* Рамка осталась, судя по Фигме */
        padding: 10px; /* Чуть меньше отступ, чтобы картинка влезла */
        align-items: center; /* Центрируем картинку Авито */
    }
    
    .mob-avito-box img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .stat-val {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 31px;
        color: #0059FF;
        font-weight: 700;
        margin-bottom: 5px;
        line-height: 1;
    }

    .val-small {
        font-size: 19px; /* Слова "более" и "лет" поменьше */
    }

    .stat-desc {
        font-size: 16px;
        color: #FFFFFF;
        font-weight: 500;
    }

    /* --- Стопка отзывов --- */
    .mob-reviews-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .mob-reviews-stack img {
        width: 100%;
        max-width: 450px;
        height: auto;
    }
    /* =========================================
       БЛОК 4: ИЗДЕЛИЯ И ЦЕНЫ (МОБИЛКА)
       ========================================= */
    .mobile-products-wrapper {
        padding: 0px 15px;
    }

    .text-dark {
        color: #000000 !important;
        text-align: center !important;
        margin-bottom: 40px;
    }

    /* --- Сетка товаров 2x4 --- */
    .mob-products-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Две равные колонки */
        gap: 15px;
        margin-bottom: 30px;
    }

    .mob-prod-card {
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
        height: 290px; /* Фиксируем высоту как в Фигме */
    }
    .mob-prod-card img {
        width: calc(100% - 15x) !important; /* Делаем картинку чуть уже карточки */
        height: 150px !important; 
        object-fit: cover !important; 
        margin: 0 0px 8px 0px !important; /* Аккуратные отступы: слева, справа и снизу */
    }

    /* Градиенты карточек */
    .bg-mob-light { background: linear-gradient(138deg, #1D93D2 21%, #044ACE 71%); }
    .bg-mob-mid { background: linear-gradient(153deg, #0059FF 10%, #03235E 73%); }
    .bg-mob-dark { background: linear-gradient(153deg, #022C7D 18%, #191A29 71%); }

    .mob-prod-info {
        padding: 15px 12px 10px 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 105px; /* Жестко задаем минимальную высоту текстового блока */
        flex-grow: 1; /* Заставляем текстовый блок занять всё свободное место над картинкой */
    }

    .mob-prod-info h3 {
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #FFFFFF;
        line-height: 1.1;
        margin: 0 0 5px 0;
    }

    .mob-prod-info p {
        font-family: 'Montserrat', sans-serif;
        font-size: 14.7px;
        color: #FFFFFF;
        margin: 0;
        opacity: 0.9;
    }

    .mob-prod-card img {
        width: 100%;
        height: 320px; /* Высота картинки */
        object-fit: cover;
        
    }

    /* --- Кнопки под товарами --- */
    .mob-prod-actions {
        display: flex;
        flex-direction: column; /* Кнопки друг под другом */
        align-items: center;
        gap: 15px;
        margin-bottom: 40px;
    }

    .btn-outline-mob {
        background: transparent;
        color: #041A53;
        border: 2px solid #041A53;
        font-size: 17px;
        padding: 12px 25px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 500;
    }


    .btn-dark-mob {
        background: #041A53;
        color: #FFFFFF;
        font-size: 16px;
        padding: 12px 35px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 500;
    }

    /* --- Этапы работы (Шкала) --- */
    .mob-steps-wrapper {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .mob-steps-img {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .mob-steps-text {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
    }

    .mob-step-col {
        flex: 1; /* Равные колонки для текста */
    }

    .mob-step-col h4 {
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #041A53;
        margin: 0 0 15px 0;
    }

    .mob-step-col p {
        font-size: 16px; /* Мелкий текст, чтобы влезло */
        color: #041A53;
        font-weight: 500;
        margin: 0;
        line-height: 1.2;
    }

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

    /* =========================================
       БЛОК 5: КОНТАКТЫ (МОБИЛКА ПО МАКЕТУ)
       ========================================= */
    .mobile-only-contacts {
        padding: 0 15px 40px 15px; /* Отступы от соседних секций */
    }

    .mob-contacts-box {
        background: linear-gradient(354deg, #171C36 27%, #041A53 85%);
        border-radius: 20px;
        padding: 35px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mob-contacts-title {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 30px;
        color: #FFFFFF;
        margin: 0 0 15px 0;
        letter-spacing: -0.04em;
    }

    .mob-contacts-subtitle {
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 1.3;
        margin: 0 0 25px 0;
        max-width: 350px; /* Чтобы текст переносился как в макете */
    }

    /* Кнопки соцсетей (в столбик) */
    .mob-contacts-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 200px; /* Ширина кнопок по макету */
        margin-bottom: 25px;
    }

    .mob-social-btn {
        background: #FFFFFF;
        color: #000000;
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 500;
    }

    .mob-social-btn img {
        width: 25px;
        height: 25px;
    }

    /* Номер телефона */
    .mob-phones {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        margin-bottom: 35px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .mob-phones a {

        font-size: 20px;
        color: #FFFFFF;
        text-decoration: none;
    }

    /* Фотки До/После (2 колонки) */
    .mob-before-after {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        width: 100%;
        max-width: 520px;
    }

    .mob-ba-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mob-ba-item img {
        height: 180px; /* Высота фоток из макета */
        border-radius: 10px;
        margin-bottom: 15px;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.6); /* Темная тень вокруг фоток */
    }

    .mob-ba-item p {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 700;
        margin: 0;
    }
    /* =========================================
       БЛОК 6: РАБОТЫ (МОБИЛКА ПО МАКЕТУ)
       ========================================= */
    .mob-works-wrapper {
        padding: -5px -5px;
    }

    .mob-title-dark {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 37px;
        color: #000000;
        margin-bottom: 25px;
        text-align: left;
    }

    /* --- Фильтры (Кнопки) --- */
    .mob-filters-container {
        display: flex;
        flex-wrap: wrap; /* Разрешаем кнопкам переноситься на новую строку */
        gap: 10px;
        margin-bottom: 35px;
    }

    .mob-filter-btn {
        background: #FFFFFF;
        border: 2px solid #041A53;
        border-radius: 30px;
        color: #041A53;
        font-size: 16px;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: 500;
        text-align: center;
    }

    /* --- Категории и Сетка картинок --- */
    .mob-works-category {
        margin-bottom: 40px;
    }

    .mob-works-category h3 {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 25px;
        color: #171C36;
        margin-bottom: 20px;
    }

    /* Сетка 2 в ряд */
    .mob-works-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px; /* Отступы между картинками */
    }

    .mob-works-grid img {
        width: 100%;
        height: 350px; /* Фиксированная высота, как в макете */
    }

    /* Сетка для 1 картинки (Ворота) */
    .mob-works-grid-single img {
        width: 100%;
        max-width: 320px; /* Не даем картинке растянуться на весь экран */
        height: auto;
    }
    /* =========================================
       БЛОК 7: АДРЕС (МОБИЛКА ПО МАКЕТУ)
       ========================================= */
    .mob-address-section {
        /* Вешаем фон прямо на секцию, чтобы он растянулся от края до края экрана */
        background: linear-gradient(354deg, #171C36 27%, #041A53 70%);
        width: 100%; 
        padding: 30px 0 20px 0; /* Отступы сверху и снизу */
        border-radius: 20px 20px 0 0;
    }

    .mob-address-title {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 32px;
        color: #FFFFFF;
        text-align: center;
        margin-bottom: 30px;
    }

    .mob-address-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 35px;
        padding-left: 10px; /* Небольшой отступ слева, как в макете */
    }

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

    .mob-info-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 23px;
        color: #004ddd; /* Яркий синий, чтобы круто читалось на темном фоне */
        font-weight: 500;
    }

    .mob-info-text {
        font-family: 'KOT-Eitai Gothic', sans-serif;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 700;
        line-height: 1.3;
        text-decoration: none;
        margin: 0;
    }

    /* Кнопка Авито */
    .mob-avito-btn {
        background: #FFFFFF;
        color: #000000;
        text-decoration: none;
        padding: 12px 20px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 18px;
        font-weight: 500;
        width: 100%;
        max-width: 330px;
        margin: 0 auto 40px auto; /* Центрируем кнопку */
    }

    .mob-avito-btn img {
        width: 28px;
        height: 28px;
    }

    /* Карта с синей рамкой и тенью */
    .mob-map-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    /* =========================================
       ФИНАЛЬНЫЙ ШТРИХ: РЕЗИНОВОСТЬ ДЛЯ РАЗНЫХ ТЕЛЕФОНОВ
       ========================================= */
    
    /* 1. Делаем заголовки гибкими:
       clamp(МИН_РАЗМЕР, ЖЕЛАЕМЫЙ_РАЗМЕР_В_%, МАКС_РАЗМЕР) 
       Текст будет плавно меняться от 22px до 29px в зависимости от ширины экрана */
    .mobile-title, 
    .mob-title-dark, 
    .mob-contacts-title, 
    .mob-address-title, 
    .consult-title {
        font-size: clamp(23px, 6.5vw, 28px) !important;
    }

    /* 2. Подзаголовки и обычный текст */
    .mobile-subtitle, 
    .consult-text, 
    .mob-contacts-subtitle, 
    .mobile-about-text {
        font-size: clamp(14px, 6.5vw, 20px) !important;
    }

    /* 3. Цифры статистики (30+, 100+) */
    .stat-val {
        font-size: clamp(27px, 8vw, 36px) !important;
    } 

    /* 5. Уменьшаем отступы между карточками в сетках на маленьких экранах */
    .mob-products-grid, 
    .mob-works-grid, 
    .mob-before-after {
        gap: clamp(8px, 2vw, 15px) !important;
    }
    /* =========================================
       АНИМАЦИИ НАЖАТИЯ ДЛЯ ВСЕХ КНОПОК
       ========================================= */
    
    /* 1. Добавляем всем кнопкам плавность, чтобы они не дергались резко */
    .btn-mobile-white, 
    .btn-dark-fullbtn, 
    .btn-outline-mob, 
    .btn-dark-mob, 
    .mob-social-btn, 
    .mob-avito-btn {
        transition: transform 0.1s ease, opacity 0.2s ease, background-color 0.2s ease !important;
    }

    /* 2. Эффект "пружинки" при касании пальцем (:active) */
    .btn-mobile-white:active, 
    .btn-dark-fullbtn:active, 
    .btn-dark-mob:active, 
    .mob-social-btn:active, 
    .mob-avito-btn:active {
        transform: scale(0.95) !important; /* Кнопка слегка сжимается */
        opacity: 0.85 !important; /* Слегка темнеет */
    }

    /* 3. Отдельный эффект для прозрачной кнопки "Посмотреть все работы" */
    .btn-outline-mob:active {
        transform: scale(0.95) !important;
        background-color: rgb(4, 26, 83) !important; /* Появляется легкая синяя заливка */
        color: #ffffff !important;
    }
}