/* --- Переменные для "Old Money" стиля --- */
:root {
    --primary-color: #8c6e51; /* Теплый коричневый, как кожа или дерево */
    --secondary-color: #3a3a3a; /* Глубокий темно-серый */
    --tertiary-color: #a69b92; /* Приглушенный бежевый, песочный */
    --background-light: #BE9B7B; /* Светлый, почти белый кремовый */
    --background-dark: #261f18; /* Темный, почти черный, для футера */
    --text-color: #333333; /* Основной текст, слегка темнее черного */
    --muted-color: #555555; /* Приглушенный цвет для второстепенной информации */
    --border-color: #e0e0e0; /* Светлый цвет для границ */
    --gold-accent: #b2967c; /* Легкий золотой акцент */
    --white: #f1e6d2 ;
}

/* --- Общие стили --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cormorant Garamond', serif; /* Основной шрифт с засечками для заголовков и элегантности */
    font-weight: 400; /* Нормальная насыщенность шрифта */
    color: var(--text-color);
    background: var(--background-light);
    line-height: 1.7; /* Увеличенная межстрочная высота для читаемости */
    scroll-behavior: smooth; /* Плавная прокрутка */
}

.container {
    max-width: 1140px; /* Немного сужаем контейнер для ощущения простора */
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600; /* Более насыщенные заголовки */
    color: var(--text-color);
}

h1 { font-size: 52px; line-height: 1.2; }
h2 { font-size: 36px; margin-bottom: 15px; }
h3 { font-size: 24px; margin-bottom: 10px; }
h4 { font-size: 17px; text-transform: uppercase; letter-spacing: 1px; }

p {
    font-family: 'Montserrat', sans-serif; /* Второй шрифт, более простой, для основного текста */
    font-weight: 300; /* Легче, чем в предыдущей версии */
    color: var(--muted-color);
    margin-bottom: 20px;
}

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

/* --- Шапка сайта --- */
.header {
    padding: 25px 0; /* Немного больше отступов */
    background: rgba(255, 255, 255, 0.9); /* Полупрозрачный фон для эффекта */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Тонкая, еле заметная граница */
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(5px); /* Размытие фона позади */
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.logo-container {
    display: flex;
    flex-direction: column; /* Это заставит текст встать друг под другом */
    align-items: flex-start; /* Выравнивание по левому краю */
}

.logo-text {
    font-weight: bold;
    font-size: 20px;
    color: #3D2B1F; /* Темный кофейный */
    line-height: 1.1; /* Чтобы не было слишком большого разрыва */
}

.logo-subtitle {
    font-size: 11px;
    color: #544339; /* Цвет капучино как на картинке */
    letter-spacing: 1px; /* Немного «растянем» буквы для стиля */
    margin-top: 2px; /* Расстояние между основным текстом и подписью */
}
.logo-icon {
    font-size: 28px;
    color: var(--primary-color); /* Акцентный цвет */
}
.logo-text span {
    font-size: 10px;
    color: var(--muted-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.logo-img {
    width: 40px; /* Настройте ширину под ваш логотип */
    height: auto; /* Высота подстроится пропорционально */
    object-fit: contain;
}

.nav a {
    color: var(--text-color);
    margin: 0 20px; /* Больше пространства между ссылками */
    font-weight: 500;
    font-size: 15px;
    position: relative; /* Для анимации подчеркивания */
}

.nav a::after { /* Анимация подчеркивания */
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.nav a:hover {
    color: var(--primary-color);
}

.nav a:hover::after {
    width: 100%;
    left: 0;
    background: var(--primary-color);
}

.phone a {
    color: var(--text-color);
    font-weight: 700;
    font-size: 16px;
}

/* --- Общие стили секций --- */
section {
    padding: 100px 0; /* Больше вертикальных отступов */
}

.section-title {
    text-align: center;
    margin-bottom: 60px; /* Больше отступа под заголовок */
}

.section-title h2 {
    font-size: 44px; /* Более крупный заголовок секции */
    margin-bottom: 15px;
    font-weight: 700;
}

.section-title p {
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 300;
}

/* --- Кнопки --- */
.btn {
    padding: 16px 35px; /* Более крупные кнопки */
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
    background: var(--gold-accent); /* Акцент золотом при наведении */
}

.btn-outline:hover {
    background: var(--background-light); /* Возвращаем светло-кремовый */
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- Анимации для кнопок --- */
.animated-btn-primary {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.animated-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.4s ease-out;
    z-index: 1;
}

.animated-btn-primary:hover::before {
    width: 100%;
}

.animated-btn-outline {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.animated-btn-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--primary-color);
    transition: height 0.4s ease-out;
    z-index: -1; /* Чтобы фон был за текстом */
}

.animated-btn-outline:hover {
    color: var(--white); /* Текст становится белым */
}

.animated-btn-outline:hover::after {
    height: 100%;
}

/* --- Hero --- */
.hero {
    padding: 150px 0; /* Максимальные отступы для Hero */
    min-height: 100vh; /* Полная высота экрана */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* Чтобы эффект масштабирования не вылезал за пределы */
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('placeholder_hero_bg.jpg') no-repeat center center/cover; /* Замените на реальное изображение */
    filter: brightness(0.7); /* Приглушаем фон */
    transform: scale(1); /* Начальное масштабирование */
    transition: all 0.5s ease-out; /* Плавная анимация */
}

.hero-container {
    position: relative; /* Чтобы контент был поверх фона */
    z-index: 10;
}

.hero-content {
    max-width: 750px; /* Немного шире */
    color: var(--white); /* Текст на темном фоне Hero */
    text-align: center;
}

.hero h1 {
    font-size: 56px;
    margin-bottom: 30px;
    color: var(--text-color); /* Заголовок тоже белый */
    font-weight: 700;
}

.hero p {
    font-size: 20px;
    color: var(--text-color); /* Приглушенный текст */
    margin-bottom: 50px;
    font-weight: 300;
}

.hero-btns {
    display: flex;
    justify-content: center; /* Кнопки по центру */
    gap: 25px;
}

.scroll-down { /* Стили для индикатора прокрутки */
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.5);
    animation: bounce 2s infinite;
}

.scroll-down::after { /* Стрелка */
    content: '';
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* --- Блок Услуги --- */
.services {
    background: var(--white); /* Белый фон */
    padding: 100px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Чуть шире карточки */
    gap: 30px;
}

.service-card {
    background: var(--white);
    padding: 40px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-align: center;
}

.service-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.service-icon {
    font-size: 32px; /* Крупнее иконки */
    margin-bottom: 25px;
    color: var(--primary-color);
    background: transparent; /* Убираем фон */
    height: auto;
    width: auto;
    display: inline-block; /* Чтобы центрировать */
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-color);
}

.service-card p {
    font-size: 17px;
    color: var(--muted-color);
    font-weight: 300;
}

/* --- Блок О компании --- */
.about {
    background: var(--background-light); /* Легкий кремовый фон */
    padding: 100px 0;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Центрируем текст */
}

.about h2 {
    font-size: 44px;
    margin-bottom: 30px;
    font-weight: 700;
}

.about p {
    font-size: 17px;
    color: var(--text-color); /* Более темный текст для основной информации */
    font-weight: 300;
    text-align: justify; /* Выравнивание по ширине */
    margin-bottom: 25px;
}

.confidential {
    margin-top: 40px;
    font-style: italic;
    color: var(--muted-color);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center; /* Центрируем */
    font-size: 15px;
}

.lock-icon {
    font-size: 20px;
    color: var(--primary-color);
}

/* --- Блок Команда --- */
.team {
    background: var(--white);
    padding: 100px 0;
}

.team-grid {
    display: flex;
    justify-content: center;
    gap: 40px; /* Больше пространства */
    flex-wrap: wrap;
}

.team-card {
    background: var(--white);
    padding: 40px;
    border: 1px solid var(--border-color);
    text-align: center;
    width: 300px; /* Чуть шире */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); /* Легкая тень */
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.member-photo {
    width: 90px;
    height: 90px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px; /* Крупнее */
    font-weight: 300; /* Легче */
}

.team-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-color);
}

.member-exp {
    display: block;
    font-size: 17px;
    color: var(--muted-color);
    margin-bottom: 20px;
    font-weight: 400;
}

/* Стилизация почты */
.member-social {
    display: flex;
    justify-content: center;
}

.member-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    /* Увеличиваем время анимации до 0.6 секунды */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}

.member-social a:hover {
    background: #148f0e; 
    box-shadow: 0 2px 8px rgba(7, 144, 25, 0.2);
    
    /* Плавное уменьшение */
    transform: scale(0.85); 
}

/* Для иконки внутри тоже замедляем эффекты */
.member-social a img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    transition: all 0.6s ease; 
}

.member-social a:hover img {
    opacity: 1;
    filter: brightness(0) invert(1);
    /* Иконку внутри можно оставить как есть или тоже чуть уменьшить */
    transform: scale(1); 
}

/* --- Контакты и Форма --- */
.contact {
    background: var(--background-light); /* Легкий кремовый фон */
    padding: 100px 0;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Форма немного больше */
    gap: 70px; /* Больше пространства */
    align-items: start; /* Выравнивание по верху */
}

.contact-info h3 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 700;
}

.info-item {
    margin-bottom: 25px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-color);
}

.info-item .info-icon {
    font-size: 24px;
    color: var(--primary-color);
}

.info-item div strong {
    color: var(--text-color);
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.contact-form {
    background: var(--white);
    padding: 50px; /* Больше отступов внутри формы */
    border: 1px solid var(--border-color);
    border-radius: 6px; /* Слегка скругленные углы */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px; /* Более крупные поля ввода */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif; /* Шрифт для полей ввода */
    font-size: 15px;
    color: var(--text-color);
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none; /* Убираем стандартный outline */
    box-shadow: 0 0 0 2px rgba(140, 110, 81, 0.2); /* Легкий индикатор фокуса */
}

.form-group textarea {
    height: 120px; /* Увеличиваем поле для сообщений */
    resize: vertical; /* Разрешаем вертикальное изменение размера */
}

.btn-block {
    width: 100%;
}

/* --- Футер --- */
.footer {
    background-color: var(--background-dark); /* Темный фон */
    color: var(--tertiary-color); /* Приглушенный белый текст */
    padding: 100px 0 30px; /* Больше отступов сверху */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* Адаптивная сетка */
    gap: 50px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.logo-text {
    display: flex;
    flex-direction: column; /* Выстраивает элементы в столбик */
    align-items: flex-start; /* Выравнивает их по левому краю (можно center) */
}

.logo-light .logo-text strong {
    color: var(--white); /* Белый заголовок лого */
}

.logo-light .logo-text span {
    color: #a69b92; /* Приглушенный цвет подписи */
}

.footer-desc {
    margin-top: 10px;
    color: #a69b92;
    font-size: 14px;
    font-weight: 300;
}

.footer-col h4 {
    font-size: 16px;
    margin-bottom: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white); /* Заголовки футера белые */
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 15px;
}

.footer-col a {
    color: #a69b92;
    font-size: 14px;
    font-weight: 300;
}

.footer-col a:hover {
    color: var(--primary-color); /* Акцент при наведении */
    text-decoration: underline; /* Легкое подчеркивание */
}

.contact-list li {
    color: #a69b92;
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 300;
}

.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 25px;
    align-items: center;
}

.social-link.max:hover {
    /* Фиолетово-синий градиент (выглядит премиально) */
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    box-shadow: 0 8px 20px rgba(110, 142, 251, 0.4);
}
.social-link.max:hover img {
    filter: brightness(0) invert(1);
}
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px; /* Мягкие углы */
    background: #f0f2f5; /* Светлый фон по умолчанию */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Плавная анимация */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.social-link img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

/* Эффекты при наведении */
.social-link:hover {
    transform: translateY(-5px); /* Кнопка подпрыгивает */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.social-link:hover img {
    transform: scale(1.1); /* Иконка немного увеличивается */
}

/* Индивидуальные цвета при наведении (по желанию) */
.social-link.tg:hover {
    background-color: #26A5E4;
}

.social-link.vk:hover {
    background-color: #0077FF;
}

/* Чтобы иконки становились белыми при наведении, если они темные */
.social-link:hover img {
    filter: brightness(0) invert(1);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    color: #777;
    font-size: 13px;
}
/* --- Адаптивность --- */
@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .hero h1 { font-size: 48px; }
    .section-title h2 { font-size: 32px; }
}

@media (max-width: 992px) {
    .header-inner { flex-wrap: wrap; justify-content: center; }
    .nav { margin-top: 15px; }
    .contact-wrapper, .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { gap: 30px; }
}

@media (max-width: 768px) { /* Скрываем навигацию на маленьких экранах */
    .hero { padding: 100px 0; }
    .hero h1 { font-size: 38px; }
    .hero p { font-size: 16px; }
    .hero-btns { flex-direction: column; align-items: center; }
    .btn { width: 250px; } /* Широкие кнопки */

    .contact-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .contact-info, .contact-form { text-align: center; }
    .info-item { justify-content: center; }

    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-col { align-items: center; }
    .social-icons { justify-content: center; }
}

@media (max-width: 576px) {
    .logo-text strong { font-size: 18px; }
    .hero h1 { font-size: 32px; }
    .section-title h2 { font-size: 28px; }
    .service-card, .team-card, .contact-form { padding: 30px; }
}
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001;
    margin-left: auto; 
}

.bar {
    width: 25px;
    height: 2px;
    background-color: var(--primary-color);
    margin: 3px 0;
    transition: 0.4s;
}

.phone-mobile {
    display: none;
    margin-top: 30px;
}

/* --- Адаптивность --- */
@media (max-width: 992px) {
    .menu-toggle {
        display: flex;
    }

    .nav {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background: var(--white);
        width: 100%;
        height: 100vh;
        text-align: center;
        transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        padding-top: 100px;
        z-index: 1000;
        box-shadow: 10px 0 20px rgba(0,0,0,0.1);
    }

    .nav.active {
        left: 0;
    }

    .nav a {
        margin: 15px 0;
        font-size: 24px;
        display: block;
    }

    .phone-mobile {
        display: block;
    }

    .header-phone-desktop {
        display: none;
    }

    /* Анимация гамбургера в крестик */
    .menu-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    .no-scroll {
        overflow: hidden;
    }
}

/* --- Оптимизация сетки для мобильных --- */
@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 32px;
    }

    .services-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .about p {
        text-align: left; /* На мобильных justify выглядит плохо из-за коротких строк */
    }
}

/* --- Плавный скролл для всех браузеров --- */
html {
    scroll-behavior: smooth;
}