/* 1. СБРОС СТИЛЕЙ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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


body {
    font-family: 'Inter', sans-serif;
    background-color: #0b0c0e;
    color: #ffffff;

    -webkit-font-smoothing: antialiased;
}

/* 2. ГЛАВНЫЙ КОНТЕЙНЕР ЭКРАНА */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 80px;
}

.slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Слайды */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
    display: flex;
    align-items: center;
    padding: 0 80px;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* 3. ЗАДНИЙ ФОН */
.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0.2) 50%, 
        rgba(0, 0, 0, 0.7) 100%
    );
}

/* 4. ШАПКА */
.header {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 3px;
}

.logo span {
    display: block;
    font-size: 10px;
    color: #888;
    letter-spacing: 4px;
    margin-top: 2px;
}

/* КНОПКА МЕНЮ В СТИЛЕ КАТАЛОГА */
.menu-btn {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 3px; /* Широкий межбуквенный интервал */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Тонкая полупрозрачная линия */
    padding-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
    display: inline-block;
}

/* Эффект при наведении курсора */
.menu-btn:hover {
    color: #ffffff;
    border-color: #ffffff; /* Линия снизу становится полностью белой и яркой */
}




.menu-btn:hover { opacity: 1; }

.contacts {
    display: flex;
    align-items: center;
    gap: 25px;
}

.phone {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1px;
}

.socials { display: flex; gap: 15px; }
.socials a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    opacity: 0.6;
    transition: opacity 0.3s;
}
.socials a:hover { opacity: 1; }

/* 5. КОНТЕНТ */
.slide-content {
    position: relative;
    z-index: 10;
    max-width: 480px;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition-delay: 0.2s;
}

.slide.active .slide-content {
    transform: translateY(0);
    opacity: 1;
}

.slide-counter {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 25px;
    letter-spacing: 1px;
}

h1 {
    font-size: 64px;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 35px;
    letter-spacing: -1px;
}

/* Эффект матового стекла */
.info-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 35px;
    border-radius: 2px;
}

.info-card p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    font-weight: 300;
}

.info-card p:last-child { margin-bottom: 0; }

/* 6. УПРАВЛЕНИЕ */
.slider-controls {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrows { display: flex; gap: 40px; }

.arrow-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.2s;
}

.arrow-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.catalog-link {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 6px;
    transition: border-color 0.3s;
}

.catalog-link:hover { border-color: #fff; }

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
    .hero-slider { padding: 25px 30px; }
    .slide { padding: 0 30px; }
    h1 { font-size: 40px; }
    .info-card { padding: 20px; }
    .contacts { display: none; }
}


/* СТИЛИ ЧЕРНОГО БЛОКА НАВИГАЦИИ */
.navigation-bar {
    background-color: #131416;
    color: #ffffff;
    width: 100%;
    position: relative;
    z-index: 999;
}

/* Верхняя строчка-подпись */
.top-announcement {
    text-align: center;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Едва заметный разделитель */
}

/* Контейнер для логотипа, меню и поиска */
.nav-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 80px;
    background-color: #131416;
    width: 100%;
    box-sizing: border-box;
   
}

/* КЛАСС ДЛЯ ФИКСАЦИИ (ВКЛЮЧИТСЯ ПРИ СКРОЛЛЕ) */
.navigation-bar.fixed .nav-main-row {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 15px 80px; /* Меню станет чуть уже и аккуратнее при прокрутке */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   
}

/* Плавная анимация появления меню сверху */
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Корректировка адаптивности для фиксированного меню */
@media (max-width: 1024px) {
    .navigation-bar.fixed .nav-main-row {
        padding: 15px 30px;
    }
}

/* Логотип */
.nav-logo {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1;
}

.nav-logo span {
    display: block;
    font-size: 10px;
    color: #888;
    letter-spacing: 4px;
    margin-top: 3px;
}

/* Главное меню */
.main-menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

.main-menu a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
}

.main-menu a:hover,
.main-menu a.active {
    color: #ffffff; /* Активный пункт или при наведении становится белым */
}

/* Иконка корзины в меню */
.cart-link {
    display: flex;
    align-items: center;
    padding-left: 5px;
}

/* Поисковый блок */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
}

.search-box input {
    width: 100%;
    background-color: #ffffff; /* Белая подложка как на макете */
    border: none;
    padding: 12px 15px 12px 40px; /* Отступ слева под иконку лупы */
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    outline: none;
}

.search-box input::placeholder {
    color: #999;
}

.search-icon {
    position: absolute;
    left: 15px;
    color: #666;
    display: flex;
    align-items: center;
    pointer-events: none; /* Чтобы клик проходил сквозь иконку в инпут */
}

/* Адаптивность под планшеты и мобильные */
@media (max-width: 1024px) {
    .nav-main-row {
        padding: 20px 30px;
        flex-wrap: wrap;
        gap: 20px;
    }
    .main-menu {
        order: 3; /* Переносим меню на новую строку на мобильных */
        width: 100%;
        justify-content: center;
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .nav-main-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .search-box {
        width: 100%;
    }
}




.about-section {
    background-color: #eef0f2; /* Светло-серый фон как на скриншоте */
    color: #1a1a1a; /* Темный цвет текста */
    padding: 120px 80px 80px 80px;
    width: 100%;
    box-sizing: border-box;
}

/* Ограничиваем контент и центрируем его на 1400px, как в каталоге */
.about-content,
.brands-grid {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Двухколоночный контейнер для текста */
.about-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 100px; /* Отступ снизу до брендов перенесен сюда */
}

/* Левая колонка с заголовком */
.about-title-col {
    flex: 1;
    max-width: 550px;
}

.about-title-col h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Правая колонка с описанием */
.about-text-col {
    flex: 1;
    max-width: 550px;
    margin-top: 10px;
}

.about-text-col p {
    font-size: 14px;
    line-height: 1.7;
    color: #4a4a4a;
    font-weight: 300;
}

/* Сетка брендов */
.brands-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 40px;
}

/* Стили для текстовых логотипов */
.brand-item {
    font-size: 22px;
    color: #a5a7a9;
    letter-spacing: 1px;
    font-weight: 400;
    user-select: none;
    transition: color 0.3s ease;
}

.brand-item:hover {
    color: #1a1a1a;
}

.brand-item span {
    font-size: 16px;
    vertical-align: middle;
}

.font-serif {
    font-family: Georgia, serif;
    font-size: 20px;
    letter-spacing: 2px;
}

.font-bold {
    font-weight: 700;
}

/* Адаптивность под планшеты и мобильные экраны */
@media (max-width: 992px) {
    .about-content {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }
    .about-title-col, .about-text-col {
        max-width: 100%;
    }
    .about-title-col h2 {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 60px 30px 40px 30px;
    }
    .brands-grid {
        justify-content: center;
        gap: 40px;
    }
}


/* СТИЛИ ДЛЯ СЕКЦИИ КАТАЛОГА */
.catalog-section {
    background-color: #ffffff; /* Белый фон для контраста */
    padding: 100px 80px;
}

/* Сетка на CSS Grid: 3 колонки */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Карточка категории */
.catalog-card {
    position: relative;
    aspect-ratio: 4 / 3; /* Четкие пропорции карточек */
    overflow: hidden;
    background-color: #131416;
}

.catalog-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Затемняющий слой и контейнер для текста */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Легкое затемнение по умолчанию */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30px;
    transition: background 0.4s ease;
}

.card-overlay h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* Кнопка «Перейти» */
.btn-go {
    display: inline-block;
    align-self: flex-start;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 10px 22px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0; /* Скрыта по умолчанию */
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
}

.btn-go:hover {
    background-color: #1c1d21;
}

/* Эффект наведения (Hover) на карточку */
.catalog-card:hover img {
    transform: scale(1.05); /* Легкое увеличение фото */
}

.catalog-card:hover .card-overlay {
    background: rgba(0, 0, 0, 0.5); /* Усиление затемнения */
}

.catalog-card:hover .btn-go {
    opacity: 1; /* Плавное появление кнопки */
    transform: translateY(0);
}

/* Правый нижний текстовый блок преимуществ */
.catalog-info-block {
    grid-column: span 2; /* Занимает 2 колонки из 3 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 40px 20px 0; /* Отступ справа для выравнивания */
    color: #1a1a1a;
}

.info-description {
    font-size: 14px;
    line-height: 1.7;
    color: #4a4a4a;
    font-weight: 300;
    margin-bottom: 25px;
    max-width: 650px;
}

.info-subtitle {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

/* Список преимуществ с галочками */
.features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.features-list li {
    font-size: 14px;
    color: #555555;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 12px;
}

.check-icon {
    color: #8c8e90; /* Серый цвет птички из оригинального макета */
    font-weight: bold;
    font-size: 14px;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 1024px) {
    .catalog-section {
        padding: 60px 40px;
    }
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr); /* Перестраиваем в 2 колонки */
        gap: 30px;
    }
    .catalog-info-block {
        grid-column: span 2;
        padding-right: 0;
        margin-top: 20px;
    }
}

@media (max-width: 680px) {
    .catalog-grid {
        grid-template-columns: 1fr; /* В одну колонку на смартфонах */
    }
    .catalog-info-block {
        grid-column: span 1;
    }
    .catalog-section {
        padding: 50px 20px;
    }
}

/* СТИЛИ ДЛЯ СЕКЦИИ РЕАЛИЗОВАННЫХ ПРОЕКТОВ (ИСПРАВЛЕННЫЙ ВАРИАНТ) */
.projects-section {
    background-color: #ffffff;
    padding: 80px 80px 100px 80px;
    color: #1a1a1a;
    width: 100%;
    box-sizing: border-box;
}

/* Заголовки */
.projects-header {
    max-width: 1400px;
    margin: 0 auto 60px auto;
}

.projects-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    color: #a5a7a9;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 15px;
    font-weight: 300;
}

.projects-header h2 {
    font-size: 36px;
    font-weight: 400;
    color: #8c857b;
    letter-spacing: 0.5px;
}

/* Сетка карточек проектов — теперь на CSS Grid с жестким ограничением ширины */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0, 1fr) не дает тексту распирать колонки */
    gap: 40px;
    max-width: 1400px; /* Такая же максимальная ширина, как у каталога выше */
    margin: 0 auto 60px auto;
    width: 100%;
}

.project-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0; /* Защита от распирания ячейки длинными словами */
}

/* Изображение проекта */
.project-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f4f4f4;
    margin-bottom: 25px;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-img img {
    transform: scale(1.04);
}

/* Контентная часть под картинкой */
.project-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* Блок с названием и прилегающей кнопкой */
.project-main-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.project-title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #555555;
    letter-spacing: 0.3px;
    /* Разрешаем перенос длинных названий, если они не влезают */
    word-break: break-word; 
}

/* Маленькая черная кнопка "перейти ->" */
.btn-project-go {
    background-color: #131416;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    padding: 14px 18px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Запрещаем кнопке сжиматься и ломать текст внутри себя */
}

.btn-project-go span {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.btn-project-go:hover {
    background-color: #2c2e33;
}

.btn-project-go:hover span {
    transform: translateX(3px);
}

/* Теги / Категории под описанием */
.project-tags {
    font-size: 11px;
    color: #a5a7a9;
    font-weight: 300;
    margin-top: auto;
}

/* Центральная кнопка снизу */
.projects-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.btn-all-projects {
    display: inline-block;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 12px;
    padding: 14px 45px;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-all-projects:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* АДАПТИВНОСТЬ ПОД ТАБЛЕТЫ И МОБИЛЬНЫЕ */
@media (max-width: 1024px) {
    .projects-section {
        padding: 60px 40px;
    }
    .projects-grid {
        grid-template-columns: 1fr; /* Перестраиваем в одну колонку */
        gap: 50px;
    }
    .project-img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    .projects-header h2 {
        font-size: 28px;
    }
    .projects-section {
        padding: 50px 20px;
    }
    .project-main-info {
        flex-direction: column;
        gap: 15px;
    }
    .btn-project-go {
        width: 100%;
        justify-content: center;
    }
}


/* ПРЕМИАЛЬНЫЙ БЛОК "КАК МЫ РАБОТАЕМ" */
.steps-section-premium {
    background-color: #f8f9fa; /* Изысканный ультра-светлый серый оттенок */
    color: #1a1a1a;
    padding: 120px 80px;
    width: 100%;
    box-sizing: border-box;
}

.steps-section-premium .steps-header {
    text-align: center;
    margin-bottom: 100px;
}

.steps-section-premium .section-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    color: #a5a7a9;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
    font-weight: 400;
}

.steps-section-premium .steps-header h2 {
    font-size: 36px;
    font-weight: 300;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

/* Оболочка таймлайна */
.steps-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Скрытый контейнер для фоновой SVG-линии */
.steps-svg-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 240px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
}

.steps-svg-line svg {
    width: 100%;
    height: 100%;
}

/* Сетка шагов */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Элемент шага */
.step-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 320px; /* Общая высота рабочей зоны волны */
}

/* Внутренняя карточка с контентом */
.step-card-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Позиционирование по вертикали (эффект волны) */
.step-item.is-top {
    justify-content: flex-start;
}

.step-item.is-bottom {
    justify-content: flex-end;
}

/* Блок с номером и бейджем */
.step-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
    position: relative;
}

/* Крупный изящный номер шага */
.step-number {
    font-size: 54px;
    font-weight: 200;
    line-height: 1;
    color: #e0e2e5; /* Полупрозрачный базовый серый */
    font-feature-settings: "lnum"; /* Включение маюскульных цифр */
    transition: color 0.4s ease;
}

/* Строгий текстовый бейдж */
.step-badge {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8c857b; /* Фирменный благородный оттенок */
}

/* Описание задачи */
.step-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #666666;
    font-weight: 300;
    max-width: 220px;
}

/* ИНТЕРАКТИВНЫЙ ЭФФЕКТ (HOVER) */
.step-item:hover .step-card-inner {
    transform: translateY(-8px); /* Плавное деликатное всплытие */
}

.step-item:hover .step-number {
    color: #c5b6a0; /* Смена цвета номера на дорогую бронзу/золото */
}

.step-item:hover .step-desc {
    color: #1a1a1a;
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 1024px) {
    .steps-section-premium {
        padding: 80px 40px;
    }
    
    .steps-svg-line {
        display: none; /* Отключаем горизонтальный SVG на мобильных */
    }
    
    .steps-grid {
        display: flex;
        flex-direction: column;
        gap: 50px;
        position: relative;
        padding-left: 40px;
    }
    
    /* Вертикальная премиальная ось слева */
    .steps-grid::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 10px;
        width: 1px;
        height: calc(100% - 20px);
        background: linear-gradient(180deg, #c5b6a0 0%, #e0e2e5 100%);
    }

    .step-item {
        height: auto !important;
        justify-content: flex-start !important;
    }

    .step-card-inner {
        padding: 0;
        transform: none !important;
    }

    /* Точки-индикаторы на вертикальной оси */
    .step-meta::before {
        content: '';
        position: absolute;
        left: -40px;
        top: 22px;
        width: 13px;
        height: 13px;
        background-color: #f8f9fa;
        border: 2px solid #c5b6a0;
        border-radius: 50%;
        z-index: 5;
    }
    
    .step-meta {
        margin-bottom: 10px;
    }

    .step-number {
        font-size: 40px;
    }
    
    .step-desc {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .steps-section-premium {
        padding: 60px 20px;
    }
    .steps-section-premium .steps-header h2 {
        font-size: 28px;
    }
}

/* СТИЛИ ДЛЯ ПОЛНОЭКРАННОГО ПРОМО-БАННЕРА */
.promo-banner-section {
    position: relative;
    width: 100%;
    height: 70vh; /* Занимает 70% высоты экрана. Можно поставить 100vh для полного экрана */
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Фоновое изображение и его затемнение */
.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Наложение темного фильтра для идеальной читаемости белого текста */
.banner-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45); /* Плотность затемнения */
}

/* Контентный блок по центру */
.banner-content {
    position: relative;
    z-index: 2; /* Выше фона */
    text-align: center;
    color: #ffffff;
    max-width: 900px;
    padding: 0 20px;
}

/* Маленький надзаголовок */
.banner-subtitle {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 25px;
    opacity: 0.9;
}

/* Большой центральный заголовок */
.banner-title {
    font-size: 42px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 45px;
}

/* Белая интерактивная кнопка */
.btn-banner-catalog {
    display: inline-block;
    background-color: #ffffff;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 16px 45px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Эффект при наведении на кнопку */
.btn-banner-catalog:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    transform: scale(1.02); /* Легкое увеличение */
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 992px) {
    .banner-title {
        font-size: 32px;
        letter-spacing: 1px;
    }
}

@media (max-width: 768px) {
    .promo-banner-section {
        height: 60vh;
    }
    .banner-title {
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 35px;
    }
    .banner-subtitle {
        font-size: 11px;
        margin-bottom: 20px;
    }
    .btn-banner-catalog {
        padding: 14px 35px;
        font-size: 11px;
    }
}


/* СТИЛИ ДЛЯ ДВУХКОЛОНОЧНОГО БЛОКА С ПРЕИМУЩЕСТВАМИ */
.services-features-section {
    background-color: #ffffff; /* Белый фон для контраста с предыдущим баннером */
    padding: 120px 80px;
    width: 100%;
    box-sizing: border-box;
}

/* Главный выравнивающий контейнер (1400px, как у каталога и проектов) */
.services-features-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px; /* Большой презентабельный отступ между колонками */
}

/* ЛЕВАЯ КОЛОНКА С КАРТИНКОЙ */
.services-image-col {
    flex: 1;
    max-width: 550px;
    width: 100%;
}

.services-img-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4; /* Портретное соотношение сторон как на макете */
    overflow: hidden;
    background-color: #f4f4f4;
}

.services-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.services-image-col:hover img {
    transform: scale(1.03); /* Деликатный зум при наведении на колонку */
}

/* ПРАВАЯ КОЛОНКА С КОНТЕНТОМ */
.services-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Мелкие верхние подписи */
.services-meta-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin-bottom: 40px;
}

.services-meta-top span {
    font-size: 11px;
    text-transform: uppercase;
    color: #a5a7a9;
    letter-spacing: 1.5px;
    font-weight: 300;
}

/* Заголовок */
.services-content-col h2 {
    font-size: 38px;
    font-weight: 400;
    color: #8c857b; /* Фирменный благородный оттенок */
    line-height: 1.3;
    letter-spacing: 0.5px;
    margin-bottom: 45px;
}

/* Основное текстовое описание */
.services-main-text {
    font-size: 13px;
    line-height: 1.8;
    color: #666666;
    font-weight: 300;
    max-width: 600px;
    margin-bottom: 60px;
}

/* Сетка мини-преимуществ (2 колонки) */
.features-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 50px; /* Отступы между мини-блоками */
    max-width: 600px;
    margin-bottom: 60px;
}

.feature-mini-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Тонкая горизонтальная линия над каждым преимуществом */
.divider-line {
    width: 35px; /* Короткая стильная линия как на макете */
    height: 1px;
    background-color: #1a1a1a;
    margin-bottom: 20px;
    opacity: 0.2;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.feature-mini-item h3 {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: #1a1a1a;
    letter-spacing: 0.2px;
}

/* Интерактивный эффект: линия удлиняется при наведении */
.feature-mini-item:hover .divider-line {
    width: 60px;
    opacity: 0.6;
}

/* Нижняя рамка-кнопка */
.services-action {
    margin-top: 10px;
}

.btn-more-about {
    display: inline-block;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 15px 45px;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
}

.btn-more-about:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ УСТРОЙСТВА */
@media (max-width: 1100px) {
    .services-features-container {
        gap: 40px;
    }
    .services-content-col h2 {
        font-size: 30px;
    }
}

@media (max-width: 992px) {
    .services-features-container {
        flex-direction: column; /* Перестраиваем в одну колонку: сначала фото, потом текст */
        align-items: center;
        gap: 60px;
    }
    .services-image-col {
        max-width: 100%; /* Картинка раскрывается шире */
    }
    .services-img-wrapper {
        aspect-ratio: 16 / 10; /* Смена пропорций на горизонтальные для планшетов */
    }
    .services-content-col {
        width: 100%;
    }
    .services-meta-top, .services-main-text, .features-mini-grid {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .services-features-section {
        padding: 60px 20px;
    }
    .features-mini-grid {
        grid-template-columns: 1fr; /* Мини-преимущества встают в один ряд на телефонах */
        gap: 30px;
    }
    .services-content-col h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .services-main-text {
        margin-bottom: 40px;
    }
    .btn-more-about {
        width: 100%;
        text-align: center; /* Кнопка растягивается на мобильном экране */
    }
}


/* СТИЛИ ДЛЯ СЕКЦИИ ОТЗЫВОВ */
.reviews-section {
    background-color: #f8f9fa; /* Мягкий светло-серый фон */
    padding: 100px 80px;
    width: 100%;
    box-sizing: border-box;
}

/* Заголовок секции */
.reviews-header {
    max-width: 1400px;
    margin: 0 auto 50px auto;
    width: 100%;
}

.reviews-header h2 {
    font-size: 20px; /* Аккуратный небольшой заголовок как на макете */
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

/* Сетка карточек на CSS Grid (3 колонки) */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Карточка отзыва */
.review-card {
    background-color: #ffffff;
    border: 1px solid #e0e2e5;
    border-radius: 6px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px; /* Чтобы карточки в одном ряду были одинаковыми */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

/* Верхняя часть карточки (юзер и звезды) */
.review-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Круглая аватарка */
.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e0e2e5;
    flex-shrink: 0;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Заглушка, если нет фото */
.avatar-placeholder {
    width: 100%;
    height: 100%;
    background-color: #d1d4d7;
    position: relative;
}
.avatar-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    background: #a5a7a9;
    border-radius: 50%;
    transform: translate(-50%, -85%);
}
.avatar-placeholder::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 28px;
    height: 14px;
    background: #a5a7a9;
    border-radius: 14px 14px 0 0;
    transform: translateX(-50%);
}

/* Информация о пользователе */
.review-user-info h3 {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.review-date {
    font-size: 11px;
    color: #a5a7a9;
    font-weight: 300;
}

/* Золотые звездочки */
.review-stars {
    color: #ffb703; /* Фирменный золотой цвет рейтинга Яндекса */
    font-size: 13px;
    letter-spacing: 2px;
}

/* Текст отзыва */
.review-text {
    font-size: 13px;
    line-height: 1.6;
    color: #4a4a4a;
    font-weight: 300;
    margin-bottom: 25px;
    flex-grow: 1; /* Распределяет пространство, чтобы ссылка всегда была внизу */
}

/* Ссылка на источник */
.review-source-link {
    font-size: 11px;
    color: #0066cc; /* Спокойный синий цвет ссылки */
    text-decoration: none;
    align-self: flex-end; /* Прижимает ссылку к правому краю */
    transition: color 0.2s ease;
}

.review-source-link:hover {
    color: #004499;
    text-decoration: underline;
}

/* АДАПТИВНОСТЬ ПОД РАЗНЫЕ ЭКРАНЫ */
@media (max-width: 1100px) {
    .reviews-section {
        padding: 60px 40px;
    }
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшетах */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 50px 20px;
    }
    .reviews-grid {
        grid-template-columns: 1fr; /* 1 колонка на телефонах */
        gap: 20px;
    }
    .review-card {
        padding: 20px;
        min-height: auto;
    }
}


/* СТИЛИ ДЛЯ СЕКЦИИ БЛОГА / ЖУРНАЛА */
.blog-section {
    background-color: #ffffff; /* Белый фон */
    padding: 120px 80px;
    width: 100%;
    box-sizing: border-box;
}

/* Шапка секции на флексах */
.blog-header {
    max-width: 1400px;
    margin: 0 auto 60px auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Выравнивание по нижней линии */
    gap: 40px;
}

.blog-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    color: #a5a7a9;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 20px;
    font-weight: 300;
}

.blog-header h2 {
    font-size: 34px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

/* Черная кнопка «Все статьи» */
.btn-all-articles {
    display: inline-block;
    background-color: #131416;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 15px 40px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.btn-all-articles:hover {
    background-color: #2c2e33;
}

/* Сетка из 2-х колонок на CSS Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.article-card {
    display: flex;
    flex-direction: column;
}

/* Адаптивное превью статьи */
.article-img {
    width: 100%;
    aspect-ratio: 16 / 10; /* Широкоформатные карточки */
    overflow: hidden;
    background-color: #f4f4f4;
    margin-bottom: 25px;
}

.article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-img img {
    transform: scale(1.03); /* Аккуратный зум при наведении на всю карточку */
}

/* Контентная часть */
.article-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Заголовок статьи со ссылкой */
.article-title {
    margin-bottom: 25px;
}

.article-title a {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #333333;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
}

.article-title a:hover {
    color: #8c857b; /* Смена цвета при наведении на текст */
}

/* Строка с датой и тегом */
.article-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Прижимает мета-информацию к низу */
    border-top: 1px solid #f0f2f5; /* Едва заметный разделитель */
    padding-top: 15px;
}

.article-date, 
.article-tag {
    font-size: 11px;
    font-weight: 300;
    color: #a5a7a9;
}

.article-tag {
    letter-spacing: 0.3px;
}

/* АДАПТИВНОСТЬ ПОД ТАБЛЕТЫ И МОБИЛЬНЫЕ */
@media (max-width: 992px) {
    .blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-bottom: 40px;
    }
    .blog-grid {
        grid-template-columns: 1fr; /* Перестраиваем в 1 колонку */
        gap: 40px;
    }
    .btn-all-articles {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .blog-section {
        padding: 60px 20px;
    }
    .blog-header h2 {
        font-size: 26px;
    }
    .article-title a {
        font-size: 16px;
    }
}


/* СТИЛИ ДЛЯ СЕКЦИИ ПОДПИСКИ И ГАЛЕРЕИ */
.subscribe-gallery-section {
    background-color: #ffffff; /* Чистый белый фон */
    padding-top: 100px; /* Отступ только сверху, снизу картинки идут в край */
    width: 100%;
    box-sizing: border-box;
}

/* Контейнер для текста и кнопки */
.subscribe-container {
    max-width: 800px;
    margin: 0 auto 80px auto;
    text-align: center;
    padding: 0 20px;
}

.subscribe-container h2 {
    font-size: 28px;
    font-weight: 300;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}

.subscribe-text {
    font-size: 13px;
    line-height: 1.8;
    color: #666666;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto 40px auto;
    letter-spacing: 0.2px;
}

/* Кнопка «ПОДПИСАТЬСЯ» в рамке */
.btn-telegram-subscribe {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    padding: 16px 45px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.telegram-icon {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

/* Эффект наведения на кнопку */
.btn-telegram-subscribe:hover {
    background-color: #131416;
    color: #ffffff;
}

/* Бумажный самолетик взлетает при наведении */
.btn-telegram-subscribe:hover .telegram-icon {
    transform: translate(3px, -3px);
}

/* НИЖНЯЯ ГАЛЕРЕЯ (Бесшовная сетка) */
.instagram-tape-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Ровно 4 колонки */
    width: 100%;
    max-width: 1400px; /* Удерживаем в рамках общей сетки сайта */
    margin: 0 auto;
    padding-bottom: 100px;
}

.tape-item {
    position: relative;
    aspect-ratio: 1 / 1; /* Квадратные изображения */
    overflow: hidden;
    cursor: pointer;
}

.tape-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Легкая матовая вуаль поверх картинок */
.tape-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
}

/* Эффект наведения на картинку галереи */
.tape-item:hover img {
    transform: scale(1.04);
}

.tape-item:hover .tape-overlay {
    background-color: rgba(0, 0, 0, 0.15); /* Деликатное притемнение */
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 992px) {
    .subscribe-gallery-section {
        padding-top: 70px;
    }
    .subscribe-container {
        margin-bottom: 50px;
    }
    .subscribe-container h2 {
        font-size: 24px;
    }
    /* Перестраиваем галерею в сетку 2х2 на планшетах */
    .instagram-tape-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .subscribe-container h2 {
        font-size: 20px;
    }
    .subscribe-text {
        font-size: 12px;
        margin-bottom: 30px;
    }
    .btn-telegram-subscribe {
        width: 100%;
        justify-content: center; /* Кнопка во всю ширину экрана смартфона */
        padding: 14px 20px;
    }
    /* На маленьких телефонах выстраиваем картинки по одной в ряд */
    .instagram-tape-grid {
        grid-template-columns: 1fr;
    }
}


/* СТИЛИ ДЛЯ ФИНАЛЬНОГО ПОДВАЛА САЙТА (ФУТЕРА) */
.main-footer {
    background-color: #131416; /* Глубокий темный фон в цвет шапки */
    color: #ffffff;
    padding: 100px 80px 40px 80px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Сетка основных колонок */
.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Первая колонка шире остальных */
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto 80px auto;
    width: 100%;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* Стилизация логотипа в футере */
.footer-logo {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 30px;
}

.footer-logo span {
    display: block;
    font-size: 10px;
    color: #888;
    letter-spacing: 4px;
    margin-top: 3px;
}

/* Слоган */
.footer-slogan {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    margin-bottom: 40px;
}

/* Контакты (телефон и email) */
.footer-contact-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.footer-contact-item:last-child {
    margin-bottom: 0;
}

.contact-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 400;
}

.contact-value {
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.contact-value:hover {
    color: #c5b6a0; /* Подсветка фирменной бронзой */
}

/* Заголовки меню */
.footer-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 35px;
    text-transform: uppercase;
}

/* Ссылки в меню */
.footer-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 300;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-menu a:hover {
    color: #ffffff;
    padding-left: 2px; /* Легкий интерактивный сдвиг при наведении */
}

/* НИЖНЯЯ ТЕХНИЧЕСКАЯ СТРОКА */
.footer-bottom-bar {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
}

.footer-copyright {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    letter-spacing: 0.2px;
}

/* Иконки соцсетей */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-socials a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #ffffff;
}

.vk-text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 992px) {
    .main-footer {
        padding: 60px 40px 30px 40px;
    }
    .footer-container {
        grid-template-columns: 1fr; /* Перестраиваем все колонки в один столбец */
        gap: 50px;
        margin-bottom: 50px;
    }
    .footer-title {
        margin-bottom: 20px;
    }
    .footer-bottom-bar {
        flex-direction: column-reverse; /* На мобильных иконки будут над копирайтом */
        gap: 25px;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .main-footer {
        padding: 50px 20px 30px 20px;
    }
    .footer-logo {
        margin-bottom: 20px;
    }
    .footer-slogan {
        margin-bottom: 30px;
    }
}


/* ОБЩИЕ СТИЛИ ДЛЯ ИЗОБРАЖЕНИЯ ЛОГОТИПА */
.logo, .nav-logo, .footer-logo {
    display: flex;
    align-items: center;
}

.logo a, .nav-logo a, .footer-logo a {
    display: inline-block;
    line-height: 0; /* Убирает лишние дефолтные отступы снизу у ссылок */
}

.logo img, .nav-logo img, .footer-logo img {
    height: 55px;       /* Фиксированная аккуратная высота для всех логотипов */
    width: auto;        /* Ширина подстроится автоматически с сохранением пропорций */
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* Эффект легкого прозрачного затухания при наведении курсора */
.logo img:hover, .nav-logo img:hover, .footer-logo img:hover {
    opacity: 0.8;
}

/* Корректировка адаптивности: на телефонах делаем логотип чуть компактнее */
@media (max-width: 768px) {
    .logo img, .nav-logo img, .footer-logo img {
        height: 28px;   /* Уменьшенная высота для мобильных экранов */
    }
}

/* СТИЛИ ДЛЯ СЕКЦИИ ВНУТРЕННЕГО КАТАЛОГА */
.catalog-page-section {
    background-color: #ffffff; /* Чистый белый фон */
    padding: 100px 80px;
    width: 100%;
    box-sizing: border-box;
    color: #1a1a1a;
}

/* Общий контейнер на 1400px */
.catalog-page-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Вводная часть (двухколоночный флекс с выравниванием по низу) */
.catalog-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    margin-bottom: 80px;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 40px;
}

.catalog-intro-text {
    max-width: 850px;
}

.catalog-pretitle {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #8c857b; /* Фирменный благородный оттенок */
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.catalog-intro-text p {
    font-size: 13px;
    line-height: 1.8;
    color: #4a4a4a;
    font-weight: 300;
}

/* Кнопка заказа консультации в рамке */
.btn-consultation {
    display: inline-block;
    border: 1px solid #8c857b;
    color: #8c857b;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    padding: 16px 35px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.btn-consultation:hover {
    background-color: #8c857b;
    color: #ffffff;
}

/* Заголовок категории (ДВЕРИ) */
.catalog-category-group {
    margin-top: 20px;
}

.category-header {
    margin-bottom: 45px;
}

.category-header h2 {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #8c857b;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.category-subtitle {
    font-size: 12px;
    color: #a5a7a9;
    font-weight: 300;
}

/* Сетка из 3 колонок */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
}

/* Карточка товара */
.product-item-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #1a1a1a;
}

.product-img-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f4f4f4;
    margin-bottom: 20px;
}

.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Название под картинкой */
.product-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #8c857b; /* Фирменный кофейно-серый цвет */
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

/* Эффекты наведения на карточку товара */
.product-item-card:hover img {
    transform: scale(1.03); /* Деликатное увеличение */
}

.product-item-card:hover .product-item-title {
    color: #1a1a1a; /* Текст темнеет при наведении */
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 1024px) {
    .catalog-page-section { padding: 60px 40px; }
    .catalog-intro { flex-direction: column; align-items: flex-start; gap: 30px; }
    .btn-consultation { width: 100%; text-align: center; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

@media (max-width: 650px) {
    .products-grid { grid-template-columns: 1fr; gap: 35px; }
    .catalog-page-section { padding: 50px 20px; }
    .category-header h2 { font-size: 20px; }
}


/* СТИЛИ ДЛЯ КОНТЕНТНОЙ СЕКЦИИ ИСТОРИИ КОМПАНИИ */
.history-section {
    background-color: #ffffff; /* Чистый белый фон */
    padding: 120px 80px;
    width: 100%;
    box-sizing: border-box;
    color: #1a1a1a;
}

/* Общий выравнивающий контейнер (1400px) */
.history-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px; /* Просторный отступ между текстом и фото */
}

/* ЛЕВАЯ КОЛОНКА С ТЕКСТОМ */
.history-content-col {
    flex: 1;
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

/* Мелкий надзаголовок */
.history-pretitle {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #a5a7a9;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* Главный заголовок колонки */
.history-title {
    font-size: 34px;
    font-weight: 400;
    color: #8c857b; /* Фирменный благородный оттенок */
    line-height: 1.3;
    letter-spacing: 0.3px;
    margin-bottom: 45px;
}

/* Абзацы текста */
.history-text-block {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Отступы между абзацами */
}

.history-text-block p {
    font-size: 13px;
    line-height: 1.8;
    color: #555555;
    font-weight: 300;
}

/* ПРАВАЯ КОЛОНКА С ФОТОГРАФИЕЙ */
.history-image-col {
    flex: 1.2; /* Картинка по макету занимает чуть больше места, чем текст */
    width: 100%;
}

.history-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Классические альбомные пропорции как на макете */
    overflow: hidden;
    background-color: #f4f4f4;
}

.history-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Интерактивный микроэффект приближения при наведении на секцию */
.history-container:hover .history-img-wrapper img {
    transform: scale(1.02);
}

/* АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ ЭКРАНОВ */
@media (max-width: 1100px) {
    .history-container {
        gap: 40px;
    }
    .history-title {
        font-size: 28px;
    }
}

@media (max-width: 992px) {
    .history-container {
        flex-direction: column; /* Перестраиваем в одну колонку: сначала текст, затем фото */
        align-items: flex-start;
        gap: 50px;
    }
    .history-content-col,
    .history-image-col {
        max-width: 100%;
        flex: none;
    }
    .history-img-wrapper {
        aspect-ratio: 16 / 10; /* Смена пропорций на широкоформатные на планшетах */
    }
}

@media (max-width: 600px) {
    .history-section {
        padding: 60px 20px;
    }
    .history-title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .history-text-block {
        gap: 20px;
    }
}


/* СТИЛИ ДЛЯ ПОЛНОЭКРАННОГО БАННЕРА КАТЕГОРИИ */
.category-hero-section {
    position: relative;
    width: 100%;
    height: 50vh; /* Занимает 65% высоты экрана для идеального баланса */
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Прижимает текст и крошки к нижнему краю */
    align-items: center;
    padding-bottom: 50px; /* Отступ контента от самого низа */
    overflow: hidden;
    background-color: #0b0c0e;
}

/* Фоновое изображение панорамы */
.category-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.category-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* Сдвигает фокус картинки чуть выше */
}

/* Затемняющий нижний градиент для плавной интеграции и читаемости */
.category-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg, 
        rgba(0, 0, 0, 0.2) 0%, 
        rgba(0, 0, 0, 0.4) 60%, 
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* Декоративный крестик слева */
.hero-deco-cross {
    position: absolute;
    left: 80px;
    bottom: 50px;
    z-index: 10;
    color: rgba(255, 255, 255, 0.3);
    font-size: 24px;
    font-weight: 200;
    user-select: none;
    font-family: 'Inter', sans-serif;
}

/* Центральный блок с текстом */
.category-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    max-width: 800px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Главный заголовок категории */
.category-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: #ffffff;
    text-transform: none; /* Оставляем как на макете, не капсом */
}

/* Блок навигационных крошек */
.hero-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
}

.hero-breadcrumbs a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-breadcrumbs a:hover {
    color: #ffffff;
}

.breadcrumbs-separator {
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
}

.breadcrumbs-current {
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Чтобы длинное название не ломало строку на мобильных */
}

/* АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 1024px) {
    .category-hero-section {
        height: 45vh;
        min-height: 350px;
    }
    .hero-deco-cross {
        left: 40px;
    }
}

@media (max-width: 768px) {
    .category-hero-section {
        padding-bottom: 35px;
    }
    .category-hero-title {
        font-size: 32px;
    }
    .hero-deco-cross {
        display: none; /* Скрываем декор на маленьких экранах, чтобы не мешал */
    }
    .breadcrumbs-current {
        max-width: 180px;
    }
}

/* ==========================================================================
   СЕКЦИЯ СЕРИИ LOFT (ПОЛНЫЙ ИСПРАВЛЕННЫЙ БЛОК ДЛЯ ЗАМЕНЫ)
   ========================================================================== */

/* 1. РОДИТЕЛЬСКИЙ КОНТЕЙНЕР (Симметричные отступы 80px по бокам в общую сетку) */
.loft-premium-section {
    background-color: #ffffff;
    padding: 80px 80px; 
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.loft-flex-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    margin: 0 auto;    /* Центрирование на ультрашироких мониторах */
}

/* 2. ЛЕВАЯ КОЛОНКА (ТЕКСТ + ЧЕРТЕЖИ) */
.loft-left-content {
    flex: 0 0 32%; /* Пропорция ширины левой части */
    max-width: 420px;
    padding-left: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.loft-tagline {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #a5a7a9;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.loft-main-heading {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #1a1a1a;
    margin-bottom: 25px;
    letter-spacing: 0.2px;
}

.loft-text-p {
    font-size: 12px;
    line-height: 1.7;
    color: #666666;
    font-weight: 300;
    margin-bottom: 35px;
}

/* Стилизация темных чертежей профилей */
.profiles-blueprint-box {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.blueprint-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blueprint-name {
    font-size: 11px;
    color: #a5a7a9;
    font-weight: 400;
    text-align: center;
}

.blueprint-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #1a1c1e; /* Темный фон под чертеж */
    position: relative;
    overflow: hidden;
}

/* Имитация белых линий профиля на черном фоне */
.blueprint-mockup-k7, .blueprint-mockup-k6 {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border: 1px solid rgba(255,255,255,0.25);
}
.blueprint-mockup-k7::before {
    content: ''; position: absolute; width: 50%; height: 50%; border-right: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2);
}
.blueprint-mockup-k6::before {
    content: ''; position: absolute; width: 100%; height: 2px; background: rgba(255,255,255,0.15); top: 50%;
}

/* Кнопка "Заказать консультацию" */
.btn-loft-premium {
    display: inline-block;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    padding: 14px 28px;
    text-transform: uppercase;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.btn-loft-premium:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* 3. ПРАВАЯ КОЛОНКА (СЛАЙДЕР С ВЫРАВНЕННЫМ ПРАВЫМ КРАЕМ) */
.loft-right-slider {
    flex: 0 0 64%; /* Оптимальная ширина под общую рамку сайта */
    width: 100%;
    min-width: 0;
}

.loft-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Панорамное соотношение сторон */
    background-color: #f4f4f4;
}

/* Элементы слайдов */
.loft-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loft-slide-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.loft-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ПРЯМОУГОЛЬНЫЕ СТРЕЛКИ НАВИГАЦИИ СТРОГО ПО БОКАМ ФОТОГРАФИИ */
.loft-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(157, 160, 164, 0.75); /* Серый полупрозрачный фон из макета */
    border: none;
    color: #ffffff;
    width: 24px;
    height: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.loft-nav-arrow:hover {
    background-color: #131416;
}

.arrow-prev-loft { left: 0; }
.arrow-next-loft { right: 0; }

/* Оверлей контента поверх фото */
.loft-inner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%);
}

/* Серый бейдж счетчика в левом верхнем углу фотографии */
.loft-live-counter {
    position: absolute;
    top: 35px;
    left: 0;
    background-color: #9da0a4;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    padding: 7px 24px;
    letter-spacing: 0.5px;
    z-index: 10;
}

/* Матовая полоса-подпись */
.loft-caption-panel {
    background-color: rgba(19, 20, 22, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    padding: 12px 20px;
    max-width: 80%;
    line-height: 1.5;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
    border-left: 2px solid #ffffff;
}

/* Кнопка "Перейти" */
.btn-card-redirect {
    display: inline-block;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 9px 22px;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
}

.btn-card-redirect:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* 4. АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА */
@media (max-width: 1024px) {
    .loft-premium-section { padding: 60px 40px; }
    .loft-flex-container { flex-direction: column; align-items: stretch; }
    .loft-left-content { max-width: 100%; flex: none; margin-bottom: 40px; }
    .loft-right-slider { flex: none; }
    .btn-loft-premium { width: 100%; }
}

@media (max-width: 650px) {
    .loft-premium-section { padding: 50px 20px; }
    .loft-viewport { aspect-ratio: 4 / 3; }
    .loft-inner-overlay { padding: 20px 35px; }
    .loft-live-counter { top: 20px; padding: 5px 15px; font-size: 11px; }
    .loft-caption-panel { font-size: 11px; max-width: 100%; padding: 10px 12px; }
    .loft-nav-arrow { height: 44px; width: 20px; font-size: 16px; }
}


/* ==========================================================================
   СЕКЦИЯ СЕТКИ АВТОМОБИЛЬНЫХ БРЕНДОВ
   ========================================================================== */

.brands-catalog-section {
    background-color: #eef0f2;
    padding: 80px 80px;
    width: 100%;
    box-sizing: border-box;
}

.brands-catalog-container {
    max-width: 1400px; /* Удерживаем в рамках общей максимальной ширины сайта */
    margin: 0 auto;
    width: 100%;
}

/* Сетка Grid на 4 колонки */
.brands-catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* Ровно 5 колонок на десктопе */
    gap: 30px 40px; /* Вертикальные и горизонтальные отступы между брендами */
    align-items: center;
}

/* Элемент бренда */
.brand-link-item {
    display: flex;
    align-items: center;
    gap: 15px; /* Зазор между иконкой и текстом */
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.brand-link-item:hover {
    opacity: 0.8; /* Деликатное затухание при наведении */
}

/* Контейнер для логотипа */
.brand-logo-icon {
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Базовые временные заглушки для логотипов (замените на свои img или SVG) */
.logo-placeholder {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
}
.logo-placeholder img{ 
    width:100%;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    }
/* Название бренда */
.brand-name-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a; /* Белый цвет букв */
    letter-spacing: 0.3px;
}
.brand-link-item a {text-decoration: none;}
.brand-link-item a:hover {text-decoration: underline;text-decoration-color: #1a1a1a;}

/* Ячейка со ссылкой "Показать все" в правом нижнем углу */
.brand-show-more-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btn-brand-show-more {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #0066cc; /* Синий цвет ссылки, как на макете */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.btn-brand-show-more:hover {
    color: #004499;
    text-decoration: underline;
}

.arrow-down-icon {
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    transform: scaleX(1.3); /* Делаем стрелочку чуть шире */
}

/* ==========================================================================
   АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
   ========================================================================== */

@media (max-width: 1024px) {
    .brands-catalog-section {
        padding: 60px 40px;
    }
    .brands-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 колонки на планшетах */
        gap: 25px 30px;
    }
}

@media (max-width: 768px) {
    .brands-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 колонки на смартфонах */
        gap: 20px 20px;
    }
    .brand-name-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .brands-catalog-section {
        padding: 40px 20px;
    }
    .brands-catalog-grid {
        grid-template-columns: 1fr; /* В один ряд на самых маленьких телефонах */
        gap: 15px 0;
    }
    .brand-show-more-box {
        margin-top: 10px;
    }
}