/* EMD STUDIO - OFFICIAL STYLESHEET 
   Updated: 2026 
*/

/* 1. БАЗОВЫЕ НАСТРОЙКИ */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --accent-color: #C19A3F; /* Тот самый золотой из логотипа */
    --light-gray: #f9f9f9;
    --border-color: #eeeeee;
    --font-main: 'Onest', sans-serif;
    --font-heading: 'Manrope', sans-serif; /* Для заголовков */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.7;
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
}

/* Настройки для всех заголовков */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 200; /* Делаем заголовки тонкими и премиальными */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1.5rem;
}

/* 2. ОБЩИЕ СТИЛИ */

.container {
    max-width: 1400px; 
    margin: 0 auto;
    padding: 100px 20px;
}

h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 2.5rem); 
    margin-bottom: 50px;
    text-align: left;       
    font-weight: 200;       
    letter-spacing: 3px;    
    text-transform: uppercase;
}

a {
    text-decoration: none; 
    transition: 0.3s ease;
}

section {
    scroll-margin-top: 100px; /* Запас под нашу высокую шапку */
}

.service-row {
    scroll-margin-top: 140px; 
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Увеличили минимальную ширину карточки */
    gap: 30px; /* Добавили пространство между проектами */
    background-color: transparent; /* Убираем серый фон-разделитель */
    border: none;
}

.grid-item {
    background-color: #fff;
    padding: 0; /* Чистое прилегание контента внутри карточки */
    display: flex;
    flex-direction: column;
}
/* 3. ШАПКА И НАВИГАЦИЯ */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.8); 
    
    /* Усиливаем размытие для эффекта дорогого стекла */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    padding: 15px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* При скролле можно сделать чуть плотнее, чтобы текст не сливался */
header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Флекс-контейнер для распределения: Лого | Меню | Контакты */
.header-content {
    max-width: 95%; /* Используем почти всю ширину экрана */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo-block {
    display: flex;
    align-items: center;
    flex: 1; /* Занимает 1 часть пространства слева */
}

.logo-img {
    height: 80px;
    width: auto;
    transition: 0.4s ease;
}

/* Центрированное меню */
.main-menu {
    flex: 2; /* Занимает центральные 2 части пространства */
    display: flex;
    justify-content: center;
    min-width: 600px; /* Гарантируем, что меню не сожмется меньше этого значения */
}

.main-menu ul {
    display: flex;
    list-style: none;
    gap: 40px; /* Увеличили расстояние между пунктами для легкости */
    margin: 0;
    padding: 0;
}

.main-menu ul li a {
    text-decoration: none;
    color: #333333;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    position: relative;
    padding: 10px 0;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

/* Эффект при наведении */
.main-menu ul li a:hover {
    color: #666666; /* Высветление при наведении */
    }

/* Эффект линии, выходящей из центра */
.main-menu ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--accent-color); /* Поменяли с серого на золотой */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.main-menu ul li a:hover::after {
    width: 100%;
}

/* --- СТИЛИ ВЫПАДАЮЩЕГО МЕНЮ (ФИНАЛ) --- */

/* 1. Родительский пункт "Форматы и цены" */
.main-menu ul li.has-dropdown {
    position: relative;
    padding-bottom: 20px; /* "Мостик", чтобы меню не исчезало при движении мыши */
    margin-bottom: -20px;
}

/* 2. Само окно выпадающего меню */
.dropdown-menu {
    position: absolute;
    top: 100%;            
    left: 0px;
    width: max-content;   /* Авто-ширина под самый длинный текст */
    min-width: 220px;
    background: #ffffff;
    
    /* Принудительно делаем список вертикальным */
    display: flex !important;
    flex-direction: column !important; 
    gap: 0 !important;
    list-style: none;
    padding: 5px 0;       /* Компактные отступы сверху и снизу окна */
    margin: 0 !important; 
    
    /* Анимация проявления */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    
    /* Чистый дизайн без теней */
    border: 1px solid #eeeeee; 
    box-shadow: none !important; 
    
    z-index: 999;
}

/* 3. Появление меню при наведении */
.main-menu ul li.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* 4. Технический каркас пунктов списка */
.dropdown-menu li {
    width: 100%;           
    display: block !important; 
    margin: 0 !important;  
    padding: 0 !important;
    line-height: 1 !important;  /* Схлопываем высоту строки самого li */ 
}

/* 5. Внутренние ссылки (шрифт, отступы, цвет) */
.dropdown-menu li a {
    display: block;               /* Ссылка растягивается на всю ширину окна */
    padding: 12px 25px !important; /* Удобная зона для клика */
    font-size: 15px !important;    
    letter-spacing: 1.2px !important; 
    color: #888 !important;           
    text-transform: uppercase;
    position: relative;           /* База для нашей линии */
    transition: all 0.3s ease;
    border: none !important;
    overflow: hidden;             /* Чтобы линия не вылезала за границы */
}

/* 6. Эффект линии при наведении (как в основном меню) */
.dropdown-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;                    /* Прижимаем строго к низу */
    left: 0;                      /* От левого края */
    width: 0;                     /* Начальное состояние — скрыта */
    height: 1px;               
    background-color: var(--accent-color); 
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block !important;
}

.dropdown-menu li a:hover {
    color: #333 !important;       /* Текст становится контрастнее */
    background-color: #fcfcfc;    /* Едва заметная подсветка всей строки */
}

.dropdown-menu li a:hover::after {
    width: 100%;                  /* Линия выезжает на всю ширину плашки */
}

/* Блок контактов справа*/
.header-contacts {
    flex: 1; /* Занимает 1 часть пространства справа */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
    font-family: 'Onest', sans-serif;
    white-space: nowrap; /* Никаких переносов строк */
}

.contact-phone, .contact-email, .contact-tg  {
    color: #333333;
}
.contact-email:hover, .contact-tg:hover {
    color: #666666;
}
.contact-phone {
    cursor: default;
    letter-spacing: 0.5px;
    font-size: 18px; /* Чуть уменьшим шрифт, чтобы не теснил меню */
}

.contact-email {
    color: var(--text-color);
    text-decoration: none;
    font-size: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

/* Иконка Телеграма */
.contact-tg {
    text-decoration: none !important;
    border-bottom: none !important; /* Добавьте эту строку */
    outline: none;
    color: #333333;
    font-size: 25px; 
    line-height: 1;
    display: flex;
    align-items: center;
    margin-left: 5px;
    transition: all 0.3s ease;
}

.contact-tg:hover {
    color: #24A1DE;
    transform: scale(1.4) translateY(-1px); /* Легкое увеличение при наведении */
}

/* На случай, если экран узкий, чуть подожмем центральное меню */
.main-menu {
    flex: 1.8; 
}

/* Отключаем кнопку бургера на ПК */
.burger-menu {
    display: none;
}

/* 4. ПЕРВЫЙ ЭКРАН (HERO) */
/* --- БЛОК HERO СО СЛАЙДЕРОМ --- */

#hero {
    position: relative; /* Обязательно для позиционирования слайдов внутри */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    color: white;
    overflow: hidden; /* Чтобы слайды не выходили за границы */
}

/* Контейнер для всех слайдов */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Самый нижний слой */
}

/* Сами слайды */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* По умолчанию скрыты */
    transition: opacity 2s ease-in-out; /* Плавное проявление (Crossfade) */
}

/* Активный слайд, который мы переключаем через JS */
.hero-slide.active {
    opacity: 1;
}

/* Затемняющая вуаль поверх фото (ваш градиент 0.25) */
.hero-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25); /* Тот же уровень затемнения, что был раньше */
    z-index: 2; /* Слой над картинками, но под текстом */
}

/* Текст: поднимаем его над слайдером */
#hero h1, 
#hero p {
    position: relative;
    z-index: 3; /* Самый верхний слой */
}

#hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#hero p {
    font-family: var(--font-main);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 300;
    opacity: 0.8;
}

#about {
    padding-top: 100px;
    padding-bottom: 100px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две равные колонки */
    gap: 80px;
    align-items: center; /* Центрируем текст по вертикали относительно фото */
}

.about-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Совсем легкое скругление */
}

.about-subtitle {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 25px;
    color: var(--text-color);
}

.about-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20px;
}

/* Блок со статистикой (опционально) */
.about-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}

/* Адаптив для мобильных */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr; /* Переход в одну колонку */
        gap: 40px;
    }
    
    .about-image {
        order: -1; /* Фото всегда сверху на мобильных */
    }
}

/* --- СЕКЦИЯ УСЛУГИ (SERVICES) --- */

.services-list {
    display: flex;
    flex-direction: column;
    gap: 140px; 
}

.service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: flex-start; 
}

.service-info {
    position: relative;
    padding-top: 10px;
}

/* ЛИНИЯ: Перенесена в service-info, чтобы охватить текст и цену */
.service-info::before {
    content: '';
    position: absolute;
    left: -50px;

    top: 120px; 
    width: 1px;
    height: 0;
    background-color: var(--accent-color);
    opacity: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Анимация линии при наведении на весь ряд */
.service-row:hover .service-info::before {
    /* Линия растет до самого низа блока info (до конца цены) */
    height: calc(100% - 125px); 
    opacity: 1;
}

/* Зеркальное отображение */
.service-row:nth-child(even) {
    direction: rtl;
}

.service-row:nth-child(even) .service-info {
    direction: ltr; 
    text-align: left;
}

/* Линия в зеркальных блоках тоже слева */
.service-row:nth-child(even) .service-info::before {
    left: -50px;
    right: auto;
}

.service-text {
    font-family: var(--font-main);
    color: #555; 
    font-size: 1.15rem; 
    line-height: 1.8; 
    letter-spacing: 0.2px;
}

/* БЛОК ЦЕНЫ */
.service-price {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    width: fit-content;
}

/* Выравнивание цены для разных колонок */
.service-row:nth-child(odd) .service-price {
    margin-left: 0;
    margin-right: auto;
}

.service-row:nth-child(even) .service-price {
    direction: ltr;
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

/* ТИПОГРАФИКА */
.service-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 100; 
    color: var(--accent-color);
    margin-bottom: 10px;
    display: block;
}

.service-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 2.2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.service-subtitle {
    display: block;
    font-family: var(--font-heading);
    color: #B18A2F; /* Тот самый золотой */
    font-weight: 400;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 45px; /* Отступ перед основным текстом */
}

.price-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: var(--accent-color);
    font-weight: 300;
    line-height: 1;
}

.price-unit {
    font-family: var(--font-main);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
}

/* ФОТО */
.service-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: grayscale(10%);
    display: block;
    margin-top: calc(3rem + 70px);
}

/* АДАПТИВНОСТЬ */
@media (max-width: 992px) {
    .service-row, .service-row:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 40px;
        direction: ltr;
    }
    .service-image img { aspect-ratio: 3/2; height: auto; }
    .service-info::before { display: none; }
}

/* 6. ПОРТФОЛИО */
.portfolio-item {
    background-color: #fff;
    border: 1px solid var(--border-color); /* Начальная рамка */
    padding: 0; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Эффект золотой рамки и подъема при наведении */
.portfolio-item:hover {
    border-color: var(--accent-color);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.portfolio-img {
    width: 100%;
    aspect-ratio: 3 / 4; /* Наш выбранный формат */
    overflow: hidden;
    background-color: #f5f5f5;
    /* Убираем нижнюю границу у фото, если она мешает */
    border-bottom: 1px solid var(--border-color); 
}

.portfolio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Фото заполняет 4:3 без искажений */
    transition: transform 0.8s ease;
}

.portfolio-item:hover .portfolio-img img {
    transform: scale(1.05); /* Плавный зум фото */
}

/* Блок с текстом: решаем проблему прилипания */
.portfolio-info {
    padding: 30px 25px; /* Просторные отступы: 30px сверху/снизу, 25px по бокам */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Расстояние между элементами текста */
}

.service-num {
    font-family: var(--font-main);
    font-size: 12px;
    color: #999; /* Спокойный серый цвет вместо золотого */
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: uppercase;
}

.portfolio-info h3 {
    font-size: 18px;
    margin: 5px 0; 
    letter-spacing: 1px;
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 500;
}

.portfolio-info p {
    font-size: 14px;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

/* 6. РАЗДЕЛ ЭТАПЫ РАБОТЫ (PROCESS) */
#process {
    padding: 100px 0;
    background-color: #fff;
}

/* Заголовок секции */
#process .section-title {
    text-align: left; 
    margin-bottom: 80px;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Контейнер ряда */
.process-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10%; 
    margin-bottom: 120px;
}

/* Отражение сторон для четных блоков */
.process-row.row-reverse {
    flex-direction: row-reverse;
}

/* Инфо-блок с золотой линией */
.process-info {
    flex: 0 0 45%; 
    position: relative; /* База для линии */
}

/* Настройка линии (аналогично разделу Services) */
.process-info::before {
    content: '';
    position: absolute;
    left: -50px;
    /* top: 110px — линия начнется под номером и заголовком этапа */
    top: 100px; 
    width: 1px;
    height: 0;
    background-color: var(--accent-color);
    opacity: 0;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Анимация линии при наведении */
.process-row:hover .process-info::before {
    height: calc(100% - 110px); 
    opacity: 1;
}

/* Чтобы линия оставалась слева даже в зеркальном режиме row-reverse */
.process-row.row-reverse .process-info::before {
    left: -50px;
    right: auto;
}

/* Контент внутри этапа */
.process-step-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 100;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.process-step-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1.3;
}

.process-step-text p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
}

/* Изображения в этапах */
.process-image {
    flex: 0 0 45%;
    overflow: hidden;
}

.process-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
    margin-top: calc(2.5rem + 60px);
}

.process-row:hover .process-image img {
    transform: scale(1.05);
}

#process .process-row:last-child {
    margin-bottom: 0;
}

/* --- АДАПТИВНОСТЬ PROCESS (Полный объединенный блок) --- */

@media (max-width: 992px) {
    /* 1. Перестраиваем колонки в одну линию (вертикально) */
    .process-row, 
    .process-row.row-reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 80px;
    }

    /* 2. Растягиваем блоки на всю ширину экрана */
    .process-info, 
    .process-image {
        flex: 0 0 100%;
        width: 100%;
    }

    /* 3. Твоя новая настройка для фото (альбомный формат) */
    .process-image img {
        margin-top: 0;
        aspect-ratio: 3 / 2;
        height: auto;
    }

    /* 4. Скрываем золотую линию на мобильных (чтобы не мешала чтению) */
    .process-info::before {
        display: none;
    }
}

/* 7. ФУТЕР */
footer {
    background: #111;
    color: #fff;
    padding: 80px 0 40px;
    text-align: center;
}

.footer-logo-img {
    height: 40px;
    filter: brightness(0) invert(1); /* Делает логотип белым */
    margin-bottom: 30px;
}

.footer-socials {
    margin: 30px 0;
}

.footer-socials a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 0.9rem;
    opacity: 0.7;
}

.footer-socials a:hover {
    opacity: 1;
    color: var(--accent-color);
}

.copyright {
    font-size: 0.75rem;
    opacity: 0.4;
    margin-top: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 8. СЕКЦИЯ КОНТАКТЫ */

#contacts {
    padding-top: 100px;
    padding-bottom: 100px;
}

.contacts-grid {
    display: grid;
    /* Три колонки: фото, текст и список контактов */
    grid-template-columns: 1fr 1.2fr 1fr; 
    gap: 60px;
    align-items: start;
}

/* Стили для первого столбца (Фото) */
.contacts-photo {
    width: 100%;
}

.contact-img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.5s ease;
}

.contact-img:hover {
    filter: grayscale(0%);
}

/* Стили для второго столбца (Текст) */
.contacts-text h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 1.2;
}

.contacts-text p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    /* Убрал max-width, так как колонка теперь сама ограничивает текст */
}

/* Стили для третьего столбца (Список) */
.contacts-list {
    display: flex;
    flex-direction: column;
}

.contact-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0; /* Немного уменьшил отступ для компактности в три колонки */
    transition: border-color 0.4s ease;
}

.contact-item:first-child {
    padding-top: 0; /* Убираем верхний отступ у первого элемента для выравнивания */
}

.contact-item:hover {
    border-color: var(--accent-color);
}

.contact-item .label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 10px;
}

.contact-link {
    font-family: var(--font-heading);
    font-size: 1.5rem; /* Немного уменьшил шрифт, чтобы длинные email влезали в колонку */
    color: var(--text-color);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.contact-link:hover {
    color: var(--accent-color);
    transform: translateX(10px);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 1024px) {
    .contacts-grid {
        grid-template-columns: 1fr; /* Перестраиваем в один столбец на планшетах/телефонах */
        gap: 40px;
    }

    .contacts-photo {
        max-width: 400px; /* Чтобы фото не было огромным на мобильных */
    }

    .contact-link {
        font-size: 1.8rem; /* Возвращаем крупный размер на мобильных */
    }
}

footer {
    padding: 60px 0;
    background-color: #1a1a1a; /* Или ваш темный цвет */
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* СТИЛЬ СОЦСЕТЕЙ (ЛЕВАЯ ЧАСТЬ) */
.footer-socials {
    flex: 1;
    display: flex;
    gap: 25px;
}

.footer-socials a {
    color: #999;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-socials a:hover {
    color: var(--accent-color); /* Золотистый при наведении */
    transform: translateY(-3px);
}

/* СТИЛЬ КОПИРАЙТА (ЦЕНТР) */
.footer-info {
    flex: 2;
    text-align: center;
}

.footer-info p {
    font-size: 0.85rem;
    opacity: 0.5;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* СТИЛЬ ЛОГОТИПА (ПРАВО) */
.footer-logo {
    flex: 1;
    text-align: right;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 2px;
    font-weight: 300;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-socials {
        justify-content: center;
        order: 2;
    }
    
    .footer-logo {
        text-align: center;
        order: 1;
    }
    
    .footer-info {
        order: 3;
    }
}

/* 9. МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 1024px) {
    .header-content {
        padding: 0 20px;
    }
    .main-menu ul {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* Компактная мобильная шапка */
    header {
        padding: 5px 0;
    }

    header .header-content {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .logo-img {
        height: 45px;
    }
    
    .header-content {
        justify-content: space-between;
        position: relative;
    }

    /* Бургер и Меню */
    .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 16px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
        padding: 0;
    }

    .burger-menu span {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #333333;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .burger-menu.open span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }
    .burger-menu.open span:nth-child(2) {
        opacity: 0;
    }
    .burger-menu.open span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    .main-menu {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        min-width: unset;
    }

    .main-menu.active {
        right: 0;
    }

    .main-menu ul {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .main-menu ul li a {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .dropdown-menu {
        display: none !important; 
    }

    .header-contacts {
        display: none;
    }

    /* Отступы и выравнивание контента */
    .container {
        padding: 40px 20px !important;
    }

    /* Увеличиваем запас для заголовков, чтобы они не уходили под шапку */
    section, .service-row {
        scroll-margin-top: 90px !important;
    }

    .services-list {
        gap: 40px !important; 
    }
    
    .process-row {
        margin-bottom: 30px !important;
    }

    h2 {
        text-align: left !important;
        margin-bottom: 25px !important;
        padding-left: 0 !important;
    }

    #process .section-title {
        margin-bottom: 30px !important;
        text-align: left !important;
    }

    .service-image img,
    .process-image img {
        margin-top: 0 !important;
    }

    .grid-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }    
}