/* Start:/local/templates/glassmarket/css/styles.css?1790946126319871*/
/* Отключаем системное свечение при клике на тач-устройствах */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Фолбэк для старых версий */
}




/* Подключение вариативного шрифта Inter */
@font-face {
    font-family: 'Inter';
    src: url('/local/templates/glassmarket/css/../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* 1. Desktop (от 1200px и выше — Режим Автоскейла) */
@media (min-width: 1200px) {
    html {
        /* Задаем базовый размер шрифта для html через vw для пропорционального масштабирования, как делает Tilda */
        /* Предполагаем, что макет 1920px. 1rem будет равен 10px */
        font-size: calc(100vw / 192);
    }
}

/* 2. Mobile (до 1199px) */
@media (max-width: 1199px) {
    html {
        /* Отключаем vw-скейлинг */
        font-size: 10px;
    }

    /* Далее будет использоваться отдельная структура на базе мобильного макета с Flexbox/CSS Grid и медиа-запросами */
}

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}


/* Базовые сбросы */
html {
    background-color: #F9F9F9;
    /* Скрываем нативный скроллбар — используется кастомный */
    scrollbar-width: none;
    /* Firefox */
}

html::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: #F9F9F9;
}

/* Блокировка скролла (попапы, мега-меню, side-menu)
   Примечание: overflow: hidden на html убран — он ломает position: sticky
   у .hero-bg-slider (фоновое видео исчезает при открытии меню).
   Скролл блокируется через Lenis.stop().
   html.scroll-locked остаётся как маркер состояния (используется custom-scrollbar) */

body.body-lock {
    overflow: hidden;
}

/* =========================================
   БАЗОВЫЕ ПРАВИЛА И АВТОСКЕЙЛ
========================================= */

/* Desktop: Автоскейл от 1200px [cite: 40] */
@media (min-width: 1200px) {
    html {
        /* Базовый размер привязан к ширине экрана 1920px (1rem = 10px) [cite: 41] */
        font-size: calc(100vw / 192);
    }


    .mobile-only {
        display: none !important;
    }
}

/* Mobile: Отключение vw-скейлинга до 1199px [cite: 44] */
@media (max-width: 1199px) {
    html {
        font-size: 10px;
        /* Фиксированный базовый размер */
    }

    .desktop-only {
        display: none !important;
    }
}

/* =========================================
   HERO БЛОК (NEW ARCHITECTURE)
========================================= */

.hero-wrapper {
    position: relative;
    width: 100%;
}

.hero-bg-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-slider {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    background-color: #111111;
}

/* Размытие при скролле */
.hero-bg-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-bg-slider.is-blurred::after {
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-bg-slider__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 0;
    filter: blur(3rem);
    -webkit-filter: blur(3rem);
    transform: scale(1.05);

    /* Ровно 1 секунда, плавно туда и обратно */
    transition: opacity 1s ease-in-out, filter 1s ease-in-out, -webkit-filter 1s ease-in-out, transform 1s ease-in-out;



    /*position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;*/
}

.hero-bg-slider__item.active {
    opacity: 1;

    /* Активное состояние: четкое, нормального размера */
    filter: blur(0);
    -webkit-filter: blur(0);
    transform: scale(1);
}

.hero-bg-slider__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-bg-slider__placeholder {
    width: 100%;
    height: 100%;
    background-color: #111111;
}

.hero-main-screen {
    position: relative;
    height: 100vh;
    z-index: 2;
    display: flex;
    align-items: center;
    /*background: linear-gradient(138deg, rgba(255, 166, 49, 0.2) 5%, rgba(255, 166, 49, 0.1) 13%, rgba(255, 6, 0, 0.4) 93%);*/
}

.hero-main-screen__container {
    position: relative;
    width: 100%;
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    height: 100%;
}

/* Текстовая часть */
.hero-main-screen__slides {
    position: absolute;
    top: 33rem;
    left: 3.8rem;
    width: 100%;
    max-width: 100rem;
}

.hero-main-screen__slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;

    opacity: 0;
    pointer-events: none;

    /* Текст уходит в легкое размытие (чтобы не было грязи на фоне сильного блюра видео) */
    filter: blur(1.5rem);
    -webkit-filter: blur(1.5rem);

    /* Ровно 1 секунда, синхронно с фоном */
    transition: opacity 1s ease-in-out, filter 1s ease-in-out, -webkit-filter 1s ease-in-out;

    /* GPU layer promotion для корректного blur на macOS Chrome */
    will-change: filter, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;




    /*position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;*/
}

.hero-main-screen__slide-content.active {

    opacity: 1;
    pointer-events: auto;

    filter: blur(0);
    -webkit-filter: blur(0);

    /* Никаких задержек (0.2s удалено), синхронно с фоном */
    transition: opacity 1s ease-in-out, filter 1s ease-in-out, -webkit-filter 1s ease-in-out;


    /*opacity: 1;
    visibility: visible;*/
}

.hero__title {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13rem;
    line-height: 1;
    margin: 0;
    width: 100%;
    letter-spacing: -0.39rem;
}

.hero__subtitle {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1.4;
    margin: 0;
    width: 80%;
    letter-spacing: -0.052rem;
}

/* Кнопка каталога */
.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 1.3rem;
    padding: 2.7rem 4.5rem;
    text-decoration: none;
    outline: none;
    border: none;
    align-self: flex-start;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hero__btn:focus,
.hero__btn:active {
    outline: none;
    border: none;
}



.hero__btn-text {
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    outline: none;
    border: none;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}



/* =========================================
   УНИВЕРСАЛЬНЫЙ КОМПОНЕНТ: Стеклянная кнопка «Начать проект»
   БЭМ-блок .glass-project-btn
   Используется: hero (index.php), side-menu (header.php), exclusive-hero
========================================= */
.glass-project-btn {
    position: relative;
    width: 61.2rem;
    height: 20.2rem;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.6rem);
    -webkit-backdrop-filter: blur(0.6rem);
    border-radius: 2.2rem;
    display: flex;
    align-items: center;
    padding: 2rem 4rem;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.glass-project-btn:hover {
    background-color: rgba(255, 255, 255, 0.28);
}

.glass-project-btn__media {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    width: 20.4rem;
    height: 19.9rem;
    background-color: #1a1a1a;
    border-radius: 2.2rem;
    overflow: hidden;
    flex-shrink: 0;
}

.glass-project-btn__video {
    width: 102%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.glass-project-btn__title {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 300;
    margin-left: 28rem;
    margin-bottom: 1rem;
    white-space: nowrap;
}

.glass-project-btn__arrow {
    position: absolute;
    top: 3.3rem;
    right: 3.3rem;
    width: 1.7rem;
    height: 1.7rem;
}

/* --- Модификатор для hero (позиционирование на первом экране) --- */
.glass-project-btn--hero {
    position: absolute;
    right: 8.3rem;
    top: 38.8rem;
    transform: scale(0.9);
    transform-origin: top right;
}

/* Контролы */
.hero-main-screen__controls {
    position: absolute;
    bottom: 10rem;
    left: -1.2rem;
    width: calc(100% - 7.6rem);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-main-screen__lines {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

.hero-main-screen__lines-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
}

.hero-main-screen__line-item {
    position: relative;
    cursor: pointer;
    width: 7.2rem;
    height: 1.6rem;
}

.hero-main-screen__line-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.3rem;
    background-color: rgba(243, 243, 243, 0.4);
    border-radius: 0.3rem;
}

.hero-main-screen__line-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.3rem;
    background-color: #ffffff;
    border-radius: 0.3rem;
    /*transition: width 0.3s ease;*/
    transition: none;
}

.hero-main-screen__line-item.active .hero-main-screen__line-progress {
    width: 100%;
    transition: width 7s linear;
    /* Автоскролл */
}

/* Всплывающая подпись над линией */
.hero-main-screen__line-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 0.8rem;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(0.5rem);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.hero-main-screen__line-item:hover .hero-main-screen__line-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   SCROLL БЛОК (Слой 3)
========================================= */

.hero-scroll-section {
    position: relative;
    z-index: 3;
    background-color: transparent;
    padding-top: 35rem;
    padding-bottom: 10rem;
}

.hero-scroll-section__container {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    display: flex;
    justify-content: space-between;
    gap: 10rem;
}

.hero-scroll-section__left {
    width: 40%;
}

.hero-scroll-section__sticky-content {
    /* Пиннинг реализован через GSAP ScrollTrigger */
}

.hero-scroll-section__title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 3.6rem;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.3;
    margin: 0;
}

.hero-scroll-section__right {
    width: 55%;
}

/* Контейнер карточек — gap обязательно сохранять! */
.hero-scroll-section__cards {
    display: flex;
    flex-direction: column;
    /* было 35 */
    gap: 15rem;
    padding-bottom: 45vh;
}

/* --- Карточка инфографики --- */
.hero-scroll-section__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 79.5rem;
    will-change: filter, opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Большое число (инфографика) */
.hero-scroll-section__card-number {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 22.6rem;
    color: #ffffff;
    line-height: 23.2rem;
    letter-spacing: -1.808rem;
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    margin: 0;
}

.hero-scroll-section__card-number-group {
    display: inline;
}

.hero-scroll-section__card-number-space {
    display: inline-block;
    width: 3rem;
    letter-spacing: -2.712rem;
}

/* Описательный текст */
.hero-scroll-section__card-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    color: #ffffff;
    line-height: 1;
    letter-spacing: 0;
    max-width: 47.2rem;
    margin: 0.7rem 0 0 0;
}

/* Нижний блок: картинка слева, ссылка справа-внизу */
.hero-scroll-section__card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 12.3rem;
}

/* Обёртка для фото/видео */
.hero-scroll-section__card-media {
    width: 29.5rem;
    height: 20.3rem;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
}

.hero-scroll-section__card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Ссылка «Узнать больше» */
.hero-scroll-section__card-link {
    display: inline-flex;
    align-items: center;
    gap: 1.3rem;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    letter-spacing: -0.036rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.hero-scroll-section__card-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.hero-scroll-section__card-link-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (NEW ARCHITECTURE)
========================================= */

@media (max-width: 1199px) {
    .hero-main-screen__slides {
        top: 21.8rem;
        left: 1.6rem;
        max-width: calc(100% - 3.2rem);
    }

    .hero__title {
        font-size: 5.6rem;
        line-height: 52px;
        letter-spacing: -1.68px;
    }

    .hero__subtitle {
        /*font-size: 1.6rem;*/
        font-size: 2rem;
        width: 100%;
        letter-spacing: -0.32px;
    }

    .hero__btn {
        padding: 2rem 3rem;
        border-radius: 0.9rem;
    }

    .hero__btn-text {
        font-size: 1.4rem;
    }

    .glass-project-btn--hero {
        top: 55rem;
        right: 1.6rem;
        width: calc(100% - 3.2rem);
        height: auto;
    }

    .hero-scroll-section {
        padding-top: 4rem;
        padding-bottom: 50vh;
        /* Буфер для наскока .js-overlap-section (catalog-sections) */
    }

    .hero-scroll-section__container {
        flex-direction: column;
        padding: 0 2rem;
        gap: 5rem;
    }

    .hero-scroll-section__left,
    .hero-scroll-section__right {
        width: 100%;
    }

    .hero-scroll-section__sticky-content {
        /* На мобилке GSAP-пин отключается через JS (matchMedia) */
    }

    .hero-scroll-section__title {
        font-size: 2.2rem;
    }

    /* На мобилке текст раскрывается анимацией при скролле в зону видимости */
    .hero-scroll-section__title .char {
        color: rgba(255, 255, 255, 0.3);
        transition: color 0.05s ease;
    }

    .hero-scroll-section__card-number {
        font-size: 8rem;
        line-height: 8.4rem;
        letter-spacing: -0.5rem;
    }

    .hero-scroll-section__card-number-space {
        width: 1.5rem;
        letter-spacing: -0.96rem;
    }

    .hero-scroll-section__card-text {
        font-size: 1.8rem;
        max-width: 100%;
        font-weight: 400;
    }

    .hero-scroll-section__cards {
        flex-direction: row;
        gap: 2rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2rem;
        /* Full-bleed: вылезаем за padding контейнера к краям экрана */
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        scroll-padding-left: 2rem;
        /* Скрываем скроллбар */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hero-scroll-section__cards::-webkit-scrollbar {
        display: none;
    }

    .hero-scroll-section__card {
        min-width: 85vw;
        max-width: 85vw;
        flex-shrink: 0;
        scroll-snap-align: start;
        gap: 2rem;
    }

    .hero-scroll-section__card-bottom {
        margin-top: 3rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 5rem;
    }

    .hero-scroll-section__card-media {
        width: 80%;
        height: 16rem;
        flex-shrink: 0;
    }

    .hero-scroll-section__card-link {
        font-size: 1.4rem;
        line-height: 2rem;
        gap: 0.8rem;
        font-weight: 300;
    }

    .hero-scroll-section__card-link-icon {
        width: 1.2rem;
        height: 1.2rem;
    }

    /* --- Мобильные контролы слайдера --- */
    .hero-main-screen__controls--mobile {
        position: absolute;
        bottom: 11rem;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-main-screen__controls--mobile .hero-main-screen__lines {
        display: flex;
        justify-content: center;
    }

    .hero-main-screen__controls--mobile .hero-main-screen__lines-wrapper {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .hero-main-screen__controls--mobile .hero-main-screen__line-item {
        width: 3.4rem;
        height: 1.6rem;
        cursor: pointer;
    }

    .hero-main-screen__controls--mobile .hero-main-screen__line-bg {
        height: 0.2rem;
        border-radius: 0.2rem;
    }

    .hero-main-screen__controls--mobile .hero-main-screen__line-progress {
        height: 0.2rem;
        border-radius: 0.2rem;
    }
}

/* =========================================
   HEADER — Intro Animation Keyframes
========================================= */
@keyframes headerFadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   HEADER (Базовое состояние - Дефолт)
========================================= */

.header {
    position: fixed;
    /* Fixed предотвращает прыжки при скролле */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    padding: 2rem 0;
    transition: background-color 0.4s ease, padding 0.4s ease;
}

.header__container {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Spacer trick: три распорки для плавного центрирования.
   В раскрытом виде: центральный спейсер расталкивает края.
   В компактном виде: боковые спейсеры надуваются, выталкивая контент в центр */
.header__spacer {
    transition: flex-grow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

/* В раскрытом виде: работает только центральный, расталкивая края */
.header__spacer--left,
.header__spacer--right {
    flex-grow: 0.00001;
}

.header__spacer--center {
    flex-grow: 1;
}

/* В компактном виде (скролл): центр сдувается, боковые надуваются, выталкивая контент ровно в центр */
.header--scrolled .header__spacer--left,
.header--scrolled .header__spacer--right {
    flex-grow: 1;
}

.header--scrolled .header__spacer--center {
    flex-grow: 0.00001;
}

/* --- ЛЕВАЯ ЧАСТЬ: Логотип --- */
.header__logo {
    display: flex;
    align-items: center;
    gap: 4.1rem;
    text-decoration: none;
    /* Intro animation — cascade step 1 */
    opacity: 0;
    animation: headerFadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.header__logo-icon {
    position: relative;
    width: 18.5rem;
    height: 7.8rem;
    flex-shrink: 0;
    /* Наша супер-плавная кривая Безье для изменения ширины */
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

.header--scrolled .header__container .header__logo-icon {
    width: 8rem;
}

/* Базовые стили: скрываем всё */
.header__logo-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 1. Темный фон, верх (Основное белое) */
.header:not(.header--scrolled):not(.header--light-theme) .header__logo-icon .header__logo-img--main.header__logo-img--white {
    display: block;
}

/* 2. Темный фон, скролл (Упрощенное белое) */
.header--scrolled:not(.header--light-theme) .header__logo-icon .header__logo-img--simple.header__logo-img--white {
    display: block;
}

/* 3. Светлый фон, верх (Основное цветное) */
.header--light-theme:not(.header--scrolled) .header__logo-icon .header__logo-img--main.header__logo-img--color {
    display: block;
}

/* 4. Светлый фон, скролл (Упрощенное цветное) */
.header--light-theme.header--scrolled .header__logo-icon .header__logo-img--simple.header__logo-img--color {
    display: block;
}

/* ЗАЩИТА: В боковом меню логотип всегда полноразмерный и ВСЕГДА основное белое */
.header__side-menu .header__logo-icon {
    width: 18.5rem !important;
    height: 7.8rem !important;
}

.header__side-menu .header__logo-icon .header__logo-img {
    display: none !important;
}

.header__side-menu .header__logo-icon .header__logo-img--main.header__logo-img--white {
    display: block !important;
}

.header__logo-square {
    position: absolute;
    top: -1.7rem;
    left: -1rem;
    width: 8.7rem;
    height: 8.7rem;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

.header__logo-dots {
    position: absolute;
    left: 1.5rem;
    top: 0;
    width: 12.8rem;
    height: 4.9rem;
    z-index: 2;
}

.header__logo-dot {
    position: absolute;
    height: 2.1rem;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

.header__logo-text {
    color: rgba(255, 255, 255, 0.50);
    font-size: 1.4rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    max-width: 17rem;
    opacity: 1;
}

/* --- ЦЕНТР: Кнопка Play --- */
.header__play-btn {
    position: relative;

    width: 6.1rem;
    height: 5.9rem;
    background-color: #111111;
    border-radius: 1.4rem;
    border: none;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    max-width: 6.5rem;
    min-width: 0;
    opacity: 1;
    /* Intro animation — cascade step 2 */
    opacity: 0;
    animation: headerFadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.header__play-btn:hover {
    transform: scale(1.05);
}

.header__play-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Видео полностью заполнит кнопку, обрезав лишнее */
    z-index: 1;
    /* Кладем на задний план */
    pointer-events: none;
    /* Чтобы видео не перехватывало клик мышкой по кнопке */
}

.header__play-icon {
    position: relative;
    z-index: 2;
    /* Кладем поверх видео */
    /* Если иконке нужен цвет, размер или тень, чтобы она не сливалась с видео — добавь здесь */
    text-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
    /* Легкая тень для контраста */
}

/* --- ПРАВАЯ ЧАСТЬ: Навигация --- */
.header__nav {
    display: flex;
}

.header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4.4rem;
    align-items: center;
}

.header__menu-link {
    color: #ffffff;
    font-size: 1.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 2.4rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.header__menu-link:hover {
    opacity: 0.7;
}

.header__menu-icon {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    background-color: #ffffff;
    mask: url('data:image/svg+xml;utf8,<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 10L1 5.5L5.5 1M5.5 10L10 5.5L5.5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5.5 5.5L10 1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    transition: background-color 0.3s ease;
    position: relative;
    top: 0.15rem;
}

/* --- ДЕЙСТВИЯ: Телефон, Проект, Бургер --- */
.header__actions {
    display: flex;
    align-items: center;
    gap: 9rem;
}

.header__phone {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 0 3.6rem;
    height: 6.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 2.4rem;
    white-space: nowrap;
    overflow: hidden;
    max-width: 23rem;
    opacity: 1;
}

.header__phone:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.header__btn-project {
    /* Скрыта по дефолту */
    opacity: 0;
    max-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}

.header__burger-text {
    /* Скрыт по дефолту */
    opacity: 0;
    max-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.header__menu-capsule {
    display: flex;
    align-items: center;
    gap: 4.4rem;
    /* Intro animation — cascade step 3 */
    opacity: 0;
    animation: headerFadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Пункты меню, скрываемые при скролле */
.header__menu-item--hide-on-scroll {
    overflow: hidden;
    max-width: 30rem;
    opacity: 1;
}

/* Элементы, которые появляются (Лого-текст, Play, Телефон): 
   Коробка едет 1.4с, текст плавно проступает за 0.8с с середины движения (delay 0.6s) */
.header__logo-text,
.header__play-btn,
.header__phone,
.header__menu-item--hide-on-scroll {
    transition: max-width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        padding 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        margin 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        opacity 0.8s ease 0.6s;
}

/* Элементы, которые исчезают (Кнопка проекта, Бургер-текст): 
   Текст плавно тает (0.4с), коробка едет 1.4с */
.header__btn-project,
.header__burger-text {
    transition: opacity 0.4s ease 0s,
        max-width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        padding 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        margin 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

/* Капсула (Возврат наверх): Фон исчезает БЫСТРО (0.2s), геометрия едет плавно (1.4s) */
.header__menu-capsule {
    transition: background-color 0.2s ease 0s,
        border-radius 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        padding 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        gap 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

.header__burger {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem;
}

.header__burger-lines {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.header__burger-line {
    width: 5.2rem;
    height: 0.17rem;
    background-color: #ffffff;
    transition: all 0.3s ease;
}


/* =========================================
   СОСТОЯНИЕ 2: СКРОЛЛ (Компактное меню)
========================================= */
.header--scrolled {
    padding: 3rem 0;
    background-color: transparent !important;
    /* Убираем любой фон у самой шапки (в т.ч. от светлой темы) */
    pointer-events: none;
    /* Позволяет кликать сквозь пустую область шапки */
}

.header--scrolled .header__container {
    pointer-events: auto;
    /* Включаем клики обратно для контента */
    gap: 1.5rem;
    /* Отступ между логотипом и капсулами */
    position: relative;
}

.header--scrolled .header__logo {
    /* Возвращаем логотип в общий поток, чтобы он был рядом с меню */
    position: static;
    margin-right: 0 !important;
    gap: 0 !important;
    /* Дополнительный отступ, чтобы отделить логотип от кнопки 'Начать проект' */
}

/* Элементы, которые исчезают при скролле: 
   Медленно тают за 0.4с, коробка сжимается за 1.4с */
.header--scrolled .header__logo-text,
.header--scrolled .header__play-btn,
.header--scrolled .header__menu-item--hide-on-scroll,
.header--scrolled .header__phone {
    opacity: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    border: none !important;
    pointer-events: none;
    transition: opacity 0.4s ease 0s,
        max-width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        padding 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        margin 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s !important;
}

/* Отступ между элементами header__right */
.header--scrolled .header__actions {
    gap: 0;
}

/* Отступ между капсулами справа */
.header--scrolled .header__right {
    gap: 1.5rem;
}

/* Элементы, которые появляются при скролле: 
   Коробка раздвигается 1.4с, текст проступает ближе к концу (за 0.8с с задержкой 0.6с) */
.header--scrolled .header__btn-project {
    opacity: 1 !important;
    max-width: 30rem !important;
    padding: 0 18rem !important;
    margin-left: -1.5rem !important;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7.8rem;
    background: rgba(221, 225, 231, 0.33);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    border-radius: 1.3rem;
    color: #ffffff;
    font-size: 2.0rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: max-width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        padding 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        margin 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        opacity 0.8s ease 0.6s,
        background-color 0.35s ease,
        /* !!! */
        color 0.35s ease !important;
}

.header--scrolled .header__btn-project:hover {
    background: rgba(221, 225, 231, 0.5);
}

/* Красная капсула при скролле: */
.header--scrolled .header__menu-capsule {
    height: 7.8rem;
    background-color: #DA0100;
    border-radius: 1.3rem;
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    padding: 0 3.2rem;
    gap: 2.6rem;
    /* Дистанция между навигацией и бургером */
    transition: background-color 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        border-radius 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        padding 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        gap 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s !important;
}

.header--scrolled .header__menu {
    gap: 2.6rem;
    /* Дистанция между пунктами меню */
}

/* Текст "Меню" появляется при скролле: 
   Коробка раздвигается 1.4с, текст проступает ближе к концу (за 0.8с с задержкой 0.6с) */
.header--scrolled .header__burger-text {
    opacity: 1 !important;
    max-width: 6rem !important;
    pointer-events: auto;
    color: #F9F9F9 !important;
    font-size: 1.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    transition: max-width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        padding 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        margin 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0s,
        opacity 0.8s ease 0.6s !important;
}

/* Принудительно сохраняем белый цвет текста и иконок внутри красной капсулы при скролле (защита от светлой темы) */
.header--scrolled .header__menu-capsule .header__menu-link {
    color: #ffffff !important;
}

.header--scrolled .header__menu-capsule .header__menu-icon,
.header--scrolled .header__menu-capsule .header__burger-line {
    background-color: #ffffff !important;
}

/* =========================================
   СОСТОЯНИЕ 3: СВЕТЛАЯ ТЕМА (Белый фон)
========================================= */
.header--light-theme {
    background-color: transparent;
}

.header--light-theme .header__menu-link,
.header--light-theme .header__burger-text {
    color: #000000;
}

.header--light-theme .header__logo-text {
    color: rgba(0, 0, 0, 0.50);
}



/* Логотип становится красным */
.header--light-theme .header__logo-square,
.header--light-theme .header__logo-dot {
    background-color: #FF0600;
}

.header--light-theme .header__menu-icon {
    background-color: #808990;
}

.header--light-theme .header__burger-line {
    background-color: #000000;
}

/* Кнопка "Начать проект" на белом фоне */
.header--light-theme .header__btn-project {
    color: #000000;
    background-color: rgba(0, 0, 0, 0.05);
}

.header--light-theme .header__btn-project:hover {
    background-color: rgba(0, 0, 0, 0.1);
}



/* Кнопка телефона на светлых блоках */
.header--light-theme .header__phone {
    color: #000000 !important;
    background: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header--light-theme .header__phone:hover {
    background: #FF0600 !important;
    color: #ffffff !important;
}

/* Красная капсула на светлом фоне — более тёмный оттенок */
.header--light-theme.header--scrolled .header__menu-capsule {
    background-color: #FF0600;
}

/* =========================================
   СКРЫТЫЕ ПАНЕЛИ (Мега-меню и Сайдбар)
========================================= */
.header__mega-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* Пропускаем клики мимо меню */
    z-index: 999;
    visibility: hidden;
    transition: visibility 1.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.header__mega-menu--active {
    visibility: visible;
}

.mega-menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Стеклянный фон */
    background: rgba(0, 0, 0, 0.44);
    backdrop-filter: blur(5rem);
    -webkit-backdrop-filter: blur(5rem);
    border-radius: 0;

    padding: 12rem 13rem 2.7rem 13rem;

    /* Вертикальный скролл внутри панели (как в side-menu) */
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;

    /* Анимация "подъезжает сверху" */
    transform: translateY(-100%);
    transition: transform 1.3s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
    pointer-events: auto;
    /* Включаем клики внутри меню */
}

.mega-menu::-webkit-scrollbar {
    display: none;
}

.header__mega-menu--active .mega-menu {
    transform: translateY(0);
}

/* =========================================
   СТРУКТУРА МЕГА-МЕНЮ
========================================= */

.mega-menu__header {
    /* Заголовок теперь вынесен из .mega-menu, блок пуст */
    display: none;
}

/* Кнопка «Каталог» — чёрная плашка поверх оригинальной ссылки в навигации.
   Расположена ВНЕ .mega-menu, поэтому НЕ двигается при анимации панели.
   Скрыта (opacity: 0), появляется фейдом после завершения анимации панели */
.mega-menu__title {
    position: absolute;
    z-index: 2;
    /* top/left устанавливаются динамически через JS */
    opacity: 0;
    background: #000000;
    backdrop-filter: blur(2.5rem);
    -webkit-backdrop-filter: blur(2.5rem);
    border: none;
    border-radius: 2.4rem;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0 2.5rem;
    height: 4.8rem;
    pointer-events: none;
    /* Не кликабельна пока скрыта */
    transition: opacity 0.35s ease;
}

/* Видимое состояние — появляется фейдом после анимации панели */
.mega-menu__title.megamenu-bubble {
    opacity: 1;
    pointer-events: auto;
}

.mega-menu__title-icon {
    width: 1rem;
    height: 0.6rem;
    background: url('data:image/svg+xml;utf8,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L5 1L9 5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

.mega-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.mega-menu__link {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-decoration: none;
    color: #ffffff;
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    transition: opacity 0.3s ease;
}

.mega-menu__link:hover {
    opacity: 1;
}

.mega-menu__icon {
    width: 8.5rem;
    height: 8.5rem;
    background-color: #f0f3f5;
    border-radius: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.mega-menu__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

/* Контейнер: название + счётчик в одну строку */
.mega-menu__content {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    flex-grow: 1;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu__text {
    font-size: 3.6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1;
}

/* Счётчик — superscript, 16px по макету Figma, полупрозрачный */
.mega-menu__count {
    font-size: 1.6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
    align-self: flex-start;
    padding-top: 0.2rem;
}

/* Стрелка — скрыта по умолчанию, появляется при ховере */
.mega-menu__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: translateX(-1rem);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s ease;
}

.mega-menu__arrow svg {
    width: 100%;
    height: 100%;
}

/* Ховер — текст плавно вправо, стрелка выезжает */
.mega-menu__link:hover .mega-menu__content {
    transform: translateX(1.5rem);
}

.mega-menu__link:hover .mega-menu__arrow {
    opacity: 1;
    transform: translateX(0);
    color: #ffffff;
}

.mega-menu__footer {
    padding-top: 4rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.mega-menu__all {
    display: flex;
    align-items: center;
    gap: 4rem;
    color: #ffffff;
    font-size: 2.0rem;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.mega-menu__all-text {
    transition: transform 0.3s ease;
}

.mega-menu__all:hover .mega-menu__all-text {
    transform: translateX(-0.5rem);
}

.mega-menu__all-icon {
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease;
}

.mega-menu__all-icon svg {
    transform: translateX(0.3rem);
}

.mega-menu__all-icon svg path {
    transition: stroke 0.3s ease;
}

.mega-menu__all:hover .mega-menu__all-icon {
    border-color: #ffffff;
}

.mega-menu__all:hover .mega-menu__all-icon svg path {
    stroke: #ffffff;
}

/* =========================================
   SIDE MENU (ПОЛНОЭКРАННЫЙ БУРГЕР)
   GPU-ускоренная анимация через transform
========================================= */

.header__side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    z-index: 1001;
    padding: 0;
    box-shadow: none;
    pointer-events: auto;
    /* Включаем клики, чтобы меню работало при скролле, несмотря на pointer-events: none у header */
    transform: translateX(100%);
    transition: transform 1.3s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

.header__side-menu--active {
    transform: translateX(0);
}

.header__side-menu-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.side-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    padding: 2vh 4vh 3.8rem;
    color: #ffffff;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.side-menu::-webkit-scrollbar {
    display: none;
}

/* --- Шапка меню --- */
.side-menu__header {
    display: flex;
    justify-content: space-between;
    /*align-items: flex-start;*/
    margin-bottom: 0vh;
    flex-shrink: 0;
}

.side-menu__logo {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-decoration: none;
}

.side-menu__logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    color: #ffffff;
    line-height: 1.4;
}

.side-menu__close {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.side-menu__close-text {
    color: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
}

.side-menu__close-icon {
    position: relative;
    width: 8.4rem;
    height: 8.4rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: border-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-menu__close-icon::before,
.side-menu__close-icon::after {
    content: '';
    position: absolute;
    width: 4.5rem;
    height: 0.2rem;
    background-color: #ffffff;
}

.side-menu__close-icon::before {
    transform: rotate(45deg);
}

.side-menu__close-icon::after {
    transform: rotate(-45deg);
}

.side-menu__close:hover .side-menu__close-icon {
    border-color: #ffffff;
    transform: scale(1.05);
}

/* --- Тело меню (2 колонки) --- */
.side-menu__body {
    display: flex;
    gap: 16rem;
    flex-grow: 1;
    margin-bottom: 4vh;
}

/* Левая часть: Проект + Копирайт */
.side-menu__left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4rem;
    margin-left: 6rem;
}

/* .side-menu__project — теперь использует универсальный .glass-project-btn
   Старые стили удалены, см. секцию «Стеклянная кнопка» выше */

/* Внутри side-menu отключаем backdrop-filter у glass-project-btn,
   чтобы двойной blur не создавал серый артефакт на скруглениях видео */
.side-menu__left .glass-project-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Правая часть: Меню */
.side-menu__right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-right: 16rem;
}

/* Крупное меню сверху */
.side-menu__main-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.side-menu__main-item {
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.1);
}

.side-menu__main-link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 2.5vh 0;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 4.9rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.15rem;
    transition: opacity 0.3s ease;
}

.side-menu__main-link:hover {
    opacity: 0.7;
}

/* Десктоп: анимация сдвига пунктов меню при ховере (как в mega-menu) */
@media (min-width: 1200px) {
    .side-menu__main-link {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease;
    }

    .side-menu__main-link:hover {
        transform: translateX(1.5rem);
        opacity: 1;
    }
}

.side-menu__main-count {
    font-size: 0.55em;
    opacity: 0.5;
    line-height: 1;
    align-self: flex-start;
    margin-top: 0 !important;
    transform: translateY(0.1em);
}

/* Нижний блок (Вторичное меню + Контакты) */
.side-menu__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: auto;
    padding-top: 4vh;
}

.side-menu__secondary-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
}

.side-menu__sec-link {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 3.2rem;
    letter-spacing: -0.024rem;
    transition: opacity 0.3s ease;
}

.side-menu__sec-link:hover {
    opacity: 0.7;
}

.side-menu__sec-count {
    font-size: 0.55em;
    opacity: 0.5;
    line-height: 1;
    align-self: flex-start;
    margin-top: 0 !important;
    transform: translateY(0.1em);
}

.side-menu__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2rem;
}

.side-menu__phone {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1.8rem 4rem;
    border-radius: 1rem;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    transition: background-color 0.3s ease;
}

.side-menu__phone:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.side-menu__email {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    font-weight: 300;
    transition: opacity 0.3s ease;
    margin-top: 2rem;
}

.side-menu__email:hover {
    opacity: 0.7;
}

/* --- Левая часть нижнего блока (Вторичное меню + Адрес) --- */
.side-menu__bottom-left {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.side-menu__dev {
    margin-top: 8.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.side-menu__copy {
    margin-bottom: 2.7rem;
}

.side-menu__copy,
.side-menu__dev {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
}

.side-menu__address {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 1.5;
    max-width: 48.9rem;
    text-align: left;
    margin-top: 2rem;
}

.side-menu__dev-name strong {
    color: #ffffff;
    font-family: 'Formular', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
}

.r-style {
    font-size: 2.4rem;
    color: #ffffff;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ХЕДЕРА
========================================= */
@media (max-width: 1199px) {

    /* --- A. Базовый header и контейнер --- */
    .header {
        padding: 2rem 0;
    }

    .header__container {
        padding: 0 1.6rem;
    }

    /* --- B. Спейсеры: не нужны на мобилке --- */
    .header__spacer {
        display: none;
    }

    /* --- C. Логотип: 124×47 по Figma (12.4rem × 4.7rem) --- */
    .header__logo-icon {
        width: 12.4rem;
        height: 5.7rem;
    }

    .header__logo {
        gap: 0;
    }

    /* При скролле — уменьшаем лого до компактного */
    .header--scrolled .header__container .header__logo-icon {
        width: 6.5rem;
    }

    /* --- D. Правая часть --- */
    /* Обычное меню (без скролла): прижать вправо */
    .header__right {
        gap: 0;
        margin-left: auto;
    }

    /* Капсульное меню (при скролле): свой отступ */
    .header--scrolled .header__right {
        gap: 1.5rem;
        margin-left: 0rem;
        flex: 1;
        min-width: 0;
    }

    /* --- E. Навигация: скрыта на мобилке --- */
    .header__nav {
        display: none;
    }

    /* --- F. Капсула: компактнее на мобилке --- */
    .header__menu-capsule {
        gap: 0;
    }

    /* При скролле — красная капсула, 59px высота по Figma */
    .header--scrolled .header__menu-capsule {
        height: 5.9rem;
        padding: 0 0.7rem;
        gap: 1.5rem;
        border-radius: 1.3rem;
    }

    /* --- G. «Начать проект» при скролле: flex-растяжение на всю доступную ширину --- */
    .header--scrolled .header__btn-project {
        display: flex !important;
        opacity: 1 !important;
        max-width: none !important;
        flex: 1;
        height: 5.9rem;
        padding: 0 2rem !important;
        margin-left: 0 !important;
        font-size: 1.4rem;
        border-radius: 1.3rem;
        background: rgba(221, 225, 231, 0.65);
        letter-spacing: -0.028rem;
        line-height: 2rem;
    }

    /* Базовое состояние (без скролла) — скрыто */
    .header:not(.header--scrolled) .header__btn-project {
        display: none !important;
    }

    /* --- H. Бургер: 46px по Figma (4.6rem) --- */
    .header__burger {
        gap: 3rem;
    }

    .header__burger-lines {
        gap: 0.45rem;
    }

    .header__burger-line {
        width: 3.8rem;
    }

    /* --- I. Скрываем десктопные элементы: телефон, лого-текст, play --- */
    .header__phone {
        display: none !important;
    }

    .header__logo-text {
        display: none !important;
    }

    .header__play-btn {
        display: none !important;
    }

    /* Текст «Меню» при скролле: не показываем на мобилке */
    .header--scrolled .header__burger-text {
        display: none !important;
        opacity: 0 !important;
        max-width: 0 !important;
    }

    /* --- J. Actions: компактный gap --- */
    .header__actions {
        gap: 0;
    }

    /* --- K. Side-menu: мобильная адаптация по Figma (380×1007) --- */
    .header__side-menu {
        width: 100%;
    }

    /* Контейнер: padding 20px по бокам, внутренний скролл */
    .side-menu {
        padding: 2rem;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Кнопка закрытия: 58×58 по Figma (было 84×84) */
    .side-menu__close-icon {
        width: 5.8rem;
        height: 5.8rem;
        margin-right: -3.5rem;
    }

    .side-menu__close-icon::before,
    .side-menu__close-icon::after {
        width: 3.1rem;
    }

    .side-menu__close-text {
        display: none;
    }

    /* Логотип в side-menu: мобильный размер (как в шапке) */
    .header__side-menu .header__logo-icon {
        width: 12.4rem !important;
        height: 4.7rem !important;
    }

    /* Кнопка закрытия: выровнять по центру */
    .side-menu__close {
        align-items: center;
        padding-right: 3.5rem;
    }

    /* Шапка side-menu: вертикальное выравнивание */
    .side-menu__header {
        align-items: center;
    }

    /* Лого-текст: нет в мобильном макете */
    .side-menu__logo-text {
        display: none;
    }

    /* Тело: одна колонка вместо двух (gap 160px → 36px) */
    .side-menu__body {
        flex-direction: column;
        gap: 3.6rem;
    }

    /* Левая часть: скрываем (нет в мобильном макете Figma) */
    .side-menu__left {
        display: none;
    }

    /* Правая часть: убираем margin-right 160px, занимает всю ширину */
    .side-menu__right {
        margin-right: 0;
    }

    /* Главные пункты: 24px/32px по Figma (было 49px) */
    .side-menu__main-link {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: -0.024rem;
        padding: 1.5rem 0;
    }

    /* Счётчики: ~13px по Figma */
    .side-menu__main-count {
        font-size: 1.3rem;
    }

    /* Вторичные пункты: 16px по Figma (было 24px) */
    .side-menu__sec-link {
        font-size: 1.6rem;
        line-height: normal;
        letter-spacing: -0.032rem;
    }

    /* Счётчики вторичных пунктов */
    .side-menu__sec-count {
        font-size: 1.3rem;
    }

    /* Нижний блок: в колонку, прижать влево */
    .side-menu__bottom {
        flex-direction: column;
        gap: 3rem;
        align-items: flex-start;
    }

    /* Контакты: прижать влево, поднять выше адреса (было flex-end, после address) */
    .side-menu__contacts {
        align-items: flex-start;
        align-self: stretch;
        /*order: -1;*/
    }

    /* Телефон: 179×60, font 14px по Figma */
    .side-menu__phone {
        font-size: 1.4rem;
        padding: 0.8rem 1.6rem;
        height: 4rem;
        width: 17.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
    }

    /* Email: ~13px по Figma */
    .side-menu__email {
        font-size: 1.3rem;
        margin-top: 1rem;
    }

    /* Адрес: ~13px, max-width 338px по Figma */
    .side-menu__address {
        font-size: 1.3rem;
        max-width: 33.8rem;
    }

    /* Dev блок: растягиваем на всю ширину для justify-content */
    .side-menu__dev {
        margin-top: 4rem;
        width: 100%;
        justify-content: space-between;
    }

    .r-style {
        font-size: 2.4rem;
        color: #ffffff;
    }
}


/* Новый контейнер для правой части */
.header__right {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    /* Базовый отступ между блоками справа */
}

/* =========================================
   БЛОК КАТАЛОГА (Продукция)
========================================= */

/* Универсальный класс для эффекта нахлёста (overlap) секций */
.js-overlap-section {
    position: relative;
    z-index: 10;
    margin-top: -60vh;
}

.catalog-sections {
    padding-top: 19rem;
    /* Отступ от верхнего блока */
    padding-bottom: 0rem;
    /* было 15 */
    background-color: #f9f9f9;
}

.catalog-sections__container {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
}

.catalog-sections__header {
    position: relative;
    margin-bottom: 6.4rem;
    /* Отступ до сетки карточек */
}

.catalog-sections__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10rem;
    color: #000000;
    line-height: 1;
    letter-spacing: -0.4rem;
    margin: 0 0 6.4rem 0;
}

.catalog-sections__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    color: #000000;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    max-width: 74.1rem;
    margin: 0;
}

.catalog-sections__desc p {
    margin: 0;
}

.catalog-sections__link {
    position: absolute;
    right: 0;
    bottom: 0;
    /* Выравнивание по нижнему краю описания */
    display: flex;
    align-items: center;
    gap: 4rem;
    text-decoration: none;
}

.catalog-sections__link:hover .catalog-sections__link-text {
    transform: translateX(-0.5rem);
}

.catalog-sections__link:hover .catalog-sections__link-icon {
    border-color: #000000;
}

.catalog-sections__link:hover .catalog-sections__link-icon svg path {
    stroke: #000000;
}

.catalog-sections__link-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #000000;
    line-height: 1;
    transition: transform 0.3s ease;
}

.catalog-sections__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 0.1rem solid #e4e4e4;
    color: #000000;
    transition: border-color 0.3s ease;
}

.catalog-sections__link-icon svg {
    transform: translateX(0.3rem);
}

.catalog-sections__link-icon svg path {
    transition: stroke 0.3s ease;
}

.catalog-sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.2rem;
}

.catalog-sections-grid__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: #f0f3f5;
    border-radius: 2rem;
    height: 63.4rem;
    padding: 0 0 5.3rem 6.6rem;
    text-decoration: none;
    overflow: hidden;
}

.catalog-sections-grid__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.catalog-sections-grid__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.catalog-sections-grid__img--hover {
    opacity: 0;
    object-fit: cover;
}

.catalog-sections-grid__item:hover .catalog-sections-grid__img {
    opacity: 0;
}

.catalog-sections-grid__item:hover .catalog-sections-grid__img--hover {
    opacity: 1;
}

.catalog-sections-grid__info {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 1.8rem;
}

.catalog-sections-grid__name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 4.9rem;
    color: #000000;
    line-height: 1.08;
    letter-spacing: -0.147rem;
    margin: 0;
}

.catalog-sections-grid__count {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 2.1rem;
    color: #aba5a6;
    line-height: 1;
    letter-spacing: -0.042rem;
    margin-top: 0.5rem;
    transition: color 0.4s ease;
    /* Выравнивание по базовой линии заголовка */
}

/* Описание раздела (скрыто по умолчанию, появляется на ховере) */
.catalog-sections-grid__desc {
    position: absolute;
    top: 7rem;
    left: 6.3rem;
    z-index: 2;
    max-width: 33.1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.2rem;
    color: #ffffff;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

/* Ховер-эффекты карточки каталога */
.catalog-sections-grid__name {
    transition: color 0.4s ease;
}

.catalog-sections-grid__item:hover .catalog-sections-grid__name {
    color: #ffffff;
}

.catalog-sections-grid__item:hover .catalog-sections-grid__count {
    color: #ffffff;
}

.catalog-sections-grid__item:hover .catalog-sections-grid__desc {
    opacity: 1;
    transform: translateY(0);
}

/* Адаптив для блока каталога (Мобильная версия) */
@media (max-width: 1199px) {
    .catalog-sections {
        padding-top: 8rem;
        padding-bottom: 4rem;
    }

    .catalog-sections__container {
        padding: 0 1.6rem;
    }

    .catalog-sections__header {
        margin-bottom: 0;
    }

    .catalog-sections__title {
        font-size: 4rem;
        margin-bottom: 2.4rem;
        letter-spacing: -0.08rem;
    }

    .catalog-sections__desc {
        font-size: 1.6rem;
        max-width: 100%;
        margin-bottom: 0;
        letter-spacing: -0.032rem;
    }

    .catalog-sections__link {
        position: static;
        margin-top: 3.6rem;
        margin-bottom: 4rem;
        width: 100%;
        justify-content: space-between;
    }

    .catalog-sections__link:hover .catalog-sections__link-text {
        transform: none;
    }

    .catalog-sections__link:hover .catalog-sections__link-icon {
        border-color: #e4e4e4;
    }

    .catalog-sections__link:hover .catalog-sections__link-icon svg path {
        stroke: #C0C8CD;
    }

    .catalog-sections__link-text {
        font-size: 1.6rem;
    }

    .catalog-sections__link-icon {
        width: 3.8rem;
        height: 3.8rem;
    }

    .catalog-sections__link-icon svg {
        width: 0.8rem;
        height: 1.4rem;
    }

    .catalog-sections-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .catalog-sections-grid__item {
        height: 26.2rem;
        padding: 0 0 2.5rem 2.5rem;
        border-radius: 0.8rem;
    }

    .catalog-sections-grid__info {
        gap: 0.8rem;
        align-items: flex-start;
    }

    .catalog-sections-grid__name {
        font-size: 2.4rem;
        letter-spacing: -0.024rem;
    }

    .catalog-sections-grid__count {
        font-size: 1.4rem;
        /*margin-top: 0.6rem;*/
        margin-top: 0rem;
    }

    .catalog-sections-grid__desc {
        display: none;
    }

    /* Отключаем ховеры для карточек на мобилке */
    .catalog-sections-grid__item:hover .catalog-sections-grid__img {
        opacity: 1;
    }

    .catalog-sections-grid__item:hover .catalog-sections-grid__img--hover {
        opacity: 0;
    }

    .catalog-sections-grid__item:hover .catalog-sections-grid__name {
        color: #000000;
    }

    .catalog-sections-grid__item:hover .catalog-sections-grid__count {
        color: #aba5a6;
    }
}

/* =========================================
   PROMO BANNER
========================================= */
.promo-banner {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    height: 20.4rem;
    margin: 4rem auto;
    width: calc(100% - 7.6rem);
    max-width: 184.2rem;
    box-sizing: border-box;
}

.promo-banner__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.promo-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(252, 164, 49, 0.65) 0%, rgba(252, 51, 28, 0.65) 100%);
    z-index: 1;
    pointer-events: none;
}

.promo-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7.7rem;
    height: 100%;
}

.promo-banner__title {
    font-family: 'Inter', sans-serif;
    font-size: 3.6rem;
    font-weight: 400;
    color: #ffffff;
    line-height: normal;
    margin: 0;
}

.promo-banner__button {
    background-color: #ffffff;
    border-radius: 1.3rem;
    padding: 2.7rem 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: normal;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.promo-banner__button:hover {
    background-color: #DA0100;
    color: #ffffff;
}

@media (max-width: 1199px) {
    .promo-banner {
        height: 26.2rem;
        width: calc(100% - 3.2rem);
        margin: 1.6rem auto 0;
        border-radius: 0.8rem;
    }

    .promo-banner__content {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 2.5rem;
    }

    .promo-banner__title {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.33;
        letter-spacing: -0.024rem;
        max-width: 25rem;
        margin: 0;
        align-self: flex-start;
    }

    .promo-banner__button {
        padding: 0;
        height: 6rem;
        font-size: 1.4rem;
        letter-spacing: -0.028rem;
        width: 29rem;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0.9rem;
        margin-bottom: 6rem;
    }
}

/* =========================================
   CUSTOMERS (Ключевые заказчики)
========================================= */
.customers {
    position: relative;
    z-index: 1;
    background-color: #f0f3f5;
    padding: 18rem 0;
    overflow: hidden;
    margin-top: 15rem;
}

.customers__container {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
}

.customers__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 85rem;
    z-index: 2;
}

.customers__info {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.customers__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10rem;
    line-height: 1;
    letter-spacing: -0.4rem;
    color: #000000;
    margin: 0 0 5rem 0;
}

.customers__text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.4;
    color: #000000;
    margin: 0 0 5rem 0;
    max-width: 58rem;
}

.customers__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0600;
    border-radius: 1.3rem;
    padding: 2.7rem 4.5rem;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.customers__btn:hover {
    background-color: #d00500;
}

/* Map background */
.customers__map-image-wrapper {
    position: absolute;
    top: 0;
    left: -3rem;
    width: 158.5rem;
    pointer-events: none;
    z-index: 0;
}

.customers__map-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Маска: прозрачная по краям, черная (видимая) в центре */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.customers__map-dots {
    position: absolute;
    top: 0;
    left: -1rem;
    width: 100%;
    height: 100%;
}

/* Анимация появления точек на карте */
@keyframes dotZoomFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Пульсация одиночной точки на карте */
@keyframes dotPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(3);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.customers__dot {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #ff0600;
    border-radius: 50%;
    /* Начальное скрытое состояние */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.customers__dot--large {
    width: 1.5rem;
    height: 1.5rem;
}

/* Неравномерное появление: анимация запускается ТОЛЬКО при наличии .is-animated на .customers__map-dots */
.customers__map-dots.is-animated .customers__dot:nth-child(1) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(2) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(3) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(4) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(5) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(6) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(7) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(8) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(9) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(10) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(11) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(12) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(13) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(14) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(15) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(16) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(17) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
}

.customers__map-dots.is-animated .customers__dot:nth-child(18) {
    animation: dotZoomFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* Пульсация точки — после всех nth-child правил, чтобы выиграть каскад */
.customers__map-dots.is-animated .customers__dot.is-pulsing {
    animation: dotPulse 0.9s ease-in-out both;
    opacity: 1;
}


.customers__stats {
    position: absolute;
    top: 3rem;
    left: 149.3rem;
    display: flex;
    flex-direction: column;
    gap: 12rem;
    z-index: 2;
}

.customers__stat-item {
    display: flex;
    flex-direction: column;
}

.customers__stat-num {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10rem;
    line-height: 1;
    letter-spacing: -0.4rem;
    color: #000000;
}

.customers__stat-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 3.6rem;
    color: #000000;
}

/* MARQUEE */
.customers__bottom {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5.8rem;
    margin-top: -5rem;
}

.customers__marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.customers__marquee-track {
    display: flex;
    gap: 0.8rem;
    padding-right: 0.8rem;
    /* Fix jump */
    width: max-content;
}

.customers__marquee-track--row1 {
    animation: scroll-left 30s linear infinite;
}

.customers__marquee-track--row2 {
    animation: scroll-left 40s linear infinite reverse;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.customers__logo-card {
    background-color: #ffffff;
    border-radius: 1rem;
    width: 34.7rem;
    height: 20.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 2rem;
}

.customers__logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* MOBILE ADAPTATION */
@media (max-width: 1199px) {
    .customers {
        padding: 5.6rem 0 6rem;
        margin-top: 0;
    }

    .customers__container {
        padding: 0;
        gap: 0;
    }

    .customers__top {
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }

    .customers__info {
        width: 100%;
        min-width: 0;
        padding: 0 2rem;
        order: 1;
        box-sizing: border-box;
    }

    /* Hide desktop button on mobile */
    .customers__btn:not(.customers__btn--mobile) {
        display: none;
    }

    .customers__title {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        margin-bottom: 2.4rem;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .customers__text {
        font-size: 1.6rem;
        line-height: normal;
        letter-spacing: -0.032rem;
        margin-bottom: 0;
    }

    .customers__stats {
        position: relative;
        top: 2rem;
        left: 3rem;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12rem;
        width: 100%;
        padding: 0 2rem;
        margin-top: 0;
        order: 2;
        padding-top: 4rem;
    }

    .customers__stat-num {
        font-size: 5.6rem;
        line-height: 5.2rem;
        letter-spacing: -0.168rem;
    }

    .customers__stat-label {
        font-size: 1.6rem;
        letter-spacing: -0.032rem;
    }

    .customers__map-image-wrapper {
        position: relative;
        top: 0;
        left: 0;
        width: 79.3rem;
        height: 43.5rem;
        margin-left: -39rem;
        margin-top: 0;
        margin-bottom: 0;
        order: 3;
    }

    .customers__map-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Override desktop mask — Figma uses separate overlay divs, but CSS mask is sufficient */
        -webkit-mask-image:
            linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
        mask-image:
            linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    }

    /* Mobile dots positions — recalculated from Figma absolute coords */
    /* Map in Figma: left=-390, top=291, width=793, height=435 */
    /* Formula: left% = (figma_left + 390) / 793 * 100; top% = (figma_top - 291) / 435 * 100 */
    .customers__dot:nth-child(1) {
        left: 73.64% !important;
        top: 49.66% !important;
    }

    .customers__dot:nth-child(2) {
        left: 68.60% !important;
        top: 47.36% !important;
    }

    .customers__dot:nth-child(3) {
        left: 64.69% !important;
        top: 46.90% !important;
    }

    .customers__dot:nth-child(4) {
        left: 70.24% !important;
        top: 40.92% !important;
    }

    .customers__dot:nth-child(5) {
        left: 67.72% !important;
        top: 38.39% !important;
    }

    .customers__dot:nth-child(6) {
        left: 74.40% !important;
        top: 38.16% !important;
    }

    .customers__dot:nth-child(7) {
        left: 69.74% !important;
        top: 37.70% !important;
    }

    .customers__dot:nth-child(8) {
        left: 82.09% !important;
        top: 37.47% !important;
    }

    .customers__dot:nth-child(9) {
        left: 66.21% !important;
        top: 37.47% !important;
    }

    .customers__dot:nth-child(10) {
        left: 61.03% !important;
        top: 37.47% !important;
    }

    .customers__dot:nth-child(11) {
        left: 61.29% !important;
        top: 35.40% !important;
    }

    .customers__dot:nth-child(12) {
        left: 68.73% !important;
        top: 34.94% !important;
    }

    .customers__dot:nth-child(13) {
        left: 79.82% !important;
        top: 34.25% !important;
    }

    .customers__dot:nth-child(14) {
        left: 77.93% !important;
        top: 33.10% !important;
    }

    .customers__dot:nth-child(15) {
        left: 64.69% !important;
        top: 31.03% !important;
    }

    .customers__dot:nth-child(16) {
        left: 68.98% !important;
        top: 30.11% !important;
    }

    .customers__dot:nth-child(17) {
        left: 76.42% !important;
        top: 28.05% !important;
    }

    .customers__dot:nth-child(18) {
        left: 79.44% !important;
        top: 24.14% !important;
    }

    .customers__dot {
        width: 0.3rem;
        height: 0.3rem;
    }

    /* On mobile, the large dot shifts from 4th (desktop) to 15th (Figma mobile) */
    .customers__dot--large {
        width: 0.3rem;
        height: 0.3rem;
    }

    .customers__dot:nth-child(15) {
        width: 0.3rem;
        height: 0.3rem;
    }

    .customers__map-dots {
        left: 0;
    }

    /* Mobile-only button — centered, after map */
    .customers__btn--mobile {
        position: relative;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 23.7rem;
        height: 6rem;
        padding: 1.7rem 2.8rem;
        border-radius: 0.9rem;
        font-size: 1.4rem;
        letter-spacing: -0.028rem;
        line-height: 1.7rem;
        align-self: center;
        order: 4;
        background-color: #ff0600;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        text-decoration: none;
        transition: background-color 0.3s ease;
        box-sizing: border-box;
        margin-bottom: 5rem;
        margin-top: -15rem;
    }

    .customers__logo-card {
        width: 17.4rem;
        height: 10.1rem;
        border-radius: 0.5rem;
    }

    .customers__marquee-track {
        gap: 0.4rem;
        padding-right: 0.4rem;
    }

    .customers__bottom {
        margin-top: 0;
        gap: 0.4rem;
    }
}

/* ==========================================================================
   Блок: Эксклюзивная разработка
   ========================================================================== */

.exclusive-banner {
    position: relative;
    width: 100%;
    max-width: 183.8rem;
    min-height: 80.5rem;
    margin: 0 auto;
    border-radius: 2rem;
    overflow: hidden;
    /* Важно: обрезает картинку бутылки по краям контейнера */
    background-color: transparent;
    /* КРИТИЧЕСКОЕ ТРЕБОВАНИЕ: прозрачный фон */
    display: flex;
    align-items: center;
}

.exclusive-banner__bg-image {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 199.5rem;
    /* Размер из Figma */
    height: 111.4rem;
    object-fit: cover;
    pointer-events: none;
    /* Чтобы картинка не перекрывала клики по контенту */
    z-index: 1;
}

.exclusive-banner__content {
    position: relative;
    z-index: 2;
    /* Помещаем контент поверх фоновых изображений */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 12.5rem 0 12.5rem 9.7rem;
    /* Отступы сверху и слева (125px и 97px из Figma) */
    gap: 44.3rem;
    /* Расстояние между левой и правой колонкой */
}

.exclusive-banner__col--left {
    width: 64.8rem;
    /* Строгая ширина по макету */
}

.exclusive-banner__col--right {
    width: 50.4rem;
    /* Строгая ширина по макету */
    padding-top: 2.2rem;
    /* Компенсация, так как текст справа начинается чуть ниже заголовка (147px - 125px = 22px) */
    display: flex;
    flex-direction: column;
}

.exclusive-banner__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    /* Medium */
    font-size: 7.2rem;
    line-height: 7.8rem;
    /* 78px */
    letter-spacing: -0.216rem;
    /* -2.16px */
    color: #ffffff;
}

.exclusive-banner__subtitle {
    margin: 0 0 2.5rem 0;
    /* Отступ до текста: (270px - 147px) - line-height */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    /* Medium */
    font-size: 3.6rem;
    line-height: 1.2;
    letter-spacing: -0.072rem;
    /* -0.72px */
    color: #ffffff;
}

.exclusive-banner__text {
    margin: 0 0 10.2rem 0;
    /* Отступ до кнопки (572px - 270px - height текста) */
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    /* -0.52px */
    color: #ffffff;
}

.exclusive-banner__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    /* Кнопка по левому краю в колонке */
    padding: 2.7rem 4.5rem;
    background-color: #ff0600;
    border-radius: 1.3rem;
    /* 13px */
    border: none;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Легкий ховер-эффект для интерактивности */
/*.exclusive-banner__btn:hover {
    background-color: #e60500;
    
    transform: translateY(-2px);
}*/

/* Wrapper: паддинги перенесены из inline-стилей HTML */
.exclusive-banner-wrapper {
    padding-top: 16rem;
    padding-bottom: 4rem;
}

/* MOBILE ADAPTATION */
@media (max-width: 1199px) {
    .exclusive-banner-wrapper {
        padding-top: 6rem;
        padding-bottom: 2rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .exclusive-banner {
        max-width: 100%;
        min-height: auto;
        border-radius: 0.8rem;
    }

    /* Градиентный оверлей для читаемости текста на фоне бутылки */
    .exclusive-banner::after {
        content: '';
        position: absolute;
        bottom: -0.8rem;
        left: -16rem;
        width: 68.4rem;
        height: 39.7rem;
        background: linear-gradient(184.95deg, rgba(154, 41, 23, 0) 14.64%, rgb(108, 11, 5) 44.74%);
        z-index: 1;
        pointer-events: none;
    }

    /* Фоновое изображение: центрировано, уменьшено */
    .exclusive-banner__bg-image {
        width: 50rem;
        height: 55rem;
        right: auto;
        left: 30%;
        top: 0rem;
        transform: translateX(calc(-50% + 2rem));
        object-fit: cover;
        object-position: 0% 15%;
    }

    /* Контент: одна колонка */
    .exclusive-banner__content {
        flex-direction: column;
        padding: 3.2rem 2rem;
        gap: 0;
        align-items: flex-start;
    }

    /* Заголовок — наверху */
    .exclusive-banner__col--left {
        width: 27.3rem;
        order: 1;
    }

    /* Подзаголовок + текст + кнопка — ниже бутылки */
    .exclusive-banner__col--right {
        width: 28.2rem;
        order: 2;
        padding-top: 20rem;
    }

    /* Типографика */
    .exclusive-banner__title {
        font-size: 3.2rem;
        line-height: 3.6rem;
        letter-spacing: -0.032rem;
    }

    .exclusive-banner__subtitle {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: -0.024rem;
        margin-bottom: 1.6rem;
    }

    .exclusive-banner__text {
        font-size: 1.6rem;
        line-height: normal;
        letter-spacing: -0.032rem;
        margin-bottom: 3.2rem;
        width: 32rem;
    }

    /* Кнопка — по центру */
    .exclusive-banner__btn {
        width: 32.5rem;
        height: 6rem;
        padding: 1.7rem 2.8rem;
        border-radius: 0.9rem;
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
        align-self: center;
        margin-left: 3.5rem;
    }
}

/* =========================================
   ПРОИЗВОДСТВО И ТЕХНОЛОГИИ (PRODUCTION)
========================================= */

.production {
    /*padding: 12rem 0 55rem;*/
    padding: 12rem 0 25rem;
    background-color: transparent;
}

.production__container {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.production__header {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.production__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10rem;
    line-height: 1;
    letter-spacing: -0.4rem;
    color: #000000;
    margin: 0;
    max-width: 60%;
}

.production__header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.production__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    color: #000000;
    margin: 0;
    max-width: 73rem;
}

.production__link {
    display: flex;
    align-items: center;
    gap: 2rem;
    text-decoration: none;
    color: #000000;
}

.production__link:hover .production__link-text {
    transform: translateX(-0.5rem);
}

.production__link:hover .production__link-icon {
    border-color: #000000;
}

.production__link:hover .production__link-icon svg path {
    stroke: #000000;
}

.production__link-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.production__link-icon {
    width: 5rem;
    height: 5rem;
    border: 0.1rem solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease;
}

.production__link-icon svg {
    transform: translateX(0.3rem);
}

.production__link-icon svg path {
    transition: stroke 0.3s ease;
}

.production__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.3rem;
}

.production__card {
    position: relative;
    width: 100%;
    height: 60.5rem;
    border-radius: 2rem;
    overflow: hidden;
    display: block;
    text-decoration: none;
    transform: translateZ(0);
}

.production__card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.production__card:hover .production__card-img {
    transform: scale(1.05);
}

.production__card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.production__card:hover .production__card-video {
    transform: none;
}

.production__card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 40%);
    pointer-events: none;
}

.production__card-name {
    position: absolute;
    bottom: 4rem;
    left: 4rem;
    right: 4rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1.1;
    letter-spacing: -0.072rem;
    color: #ffffff;
    margin: 0;
    z-index: 2;
}

@media (max-width: 1199px) {
    .production {
        padding: 5.6rem 0 6rem;
    }

    .production__container {
        padding: 0;
        gap: 3.2rem;
        overflow: visible;
    }

    .production__header {
        gap: 2.4rem;
        padding: 0 2.2rem;
    }

    .production__title {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        max-width: 100%;
    }

    .production__header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.4rem;
    }

    /* Скрыть <br> в описании на мобилке — текст идёт потоком */
    .production__desc br {
        display: none;
    }

    .production__desc {
        font-size: 1.6rem;
        letter-spacing: -0.032rem;
        max-width: 100%;
    }

    /* Скрыть ссылку «Подробнее о производстве» на мобилке */
    .production__link {
        display: none;
    }

    /* Горизонтальный слайдер карточек */
    .production__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1.6rem;
        padding: 0;
        scroll-padding-left: 2rem;
        /* Скрыть скроллбар */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .production__grid::-webkit-scrollbar {
        display: none;
    }

    .production__card {
        flex-shrink: 0;
        width: 24.6rem;
        height: 33.4rem;
        border-radius: 1rem;
        scroll-snap-align: start;
    }

    .production__card:first-child {
        margin-left: 2rem;
    }

    .production__card-name {
        font-size: 2rem;
        bottom: 2rem;
        left: 1.8rem;
        right: 1.8rem;
    }

    /* Отключить ховер-эффекты на мобилке */
    .production__card:hover .production__card-img {
        transform: none;
    }

    .production__card:hover .production__card-video {
        transform: none;
    }

    .production__link:hover .production__link-text {
        transform: none;
    }

    .production__link:hover .production__link-icon {
        border-color: rgba(0, 0, 0, 0.15);
    }

    .production__link:hover .production__link-icon svg path {
        stroke: #C0C8CD;
    }
}

/* =========================================
   БЛОК: КАРЬЕРА / КОМАНДА
========================================= */

.team {
    position: relative;
    /* Меняем hidden на clip — это полностью убирает дерганье при фиксации GSAP */
    /*overflow: clip;*/
    overflow: hidden;
    background: linear-gradient(80.19deg, #ffa631 11.65%, #ffa631 19.95%, #ff0600 50.83%);
    /*padding: 10rem 0 15rem;*/
    padding: 10rem 0 40rem;
    /* Отступы секции */

    /* Принудительно отправляем слой на рендер в GPU */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Запрещаем браузеру размывать края при дробных пикселях */
    outline: 1px solid transparent;

    /* Подсказка браузеру, что блок будет двигаться */
    will-change: transform;


}

/* Мягкий градиент на стыке блоков от #F9F9F9 до прозрачного */
.team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* ВЫСОТА ПЕРЕХОДА: Меняй это значение в rem, чтобы настроить глубину размытия */
    height: 105rem;

    background: linear-gradient(to bottom, #F9F9F9 0%, transparent 100%);
    /* background: linear-gradient(to bottom, #F9F9F9 0%, #F9F9F900 65%); */
    z-index: 1;
    /* Ложится поверх фона, но под контент контейнера (у которого z-index: 2) */
    pointer-events: none;
    /* Игнорирует клики, чтобы ничего случайно не перекрыть */
}

/* Размытый блик на фоне */
.team__floating-shape {
    position: absolute;
    top: 23.9rem;
    left: 50%;
    transform: translateX(-50%);
    width: 192.9rem;
    height: 109.6rem;
    background: radial-gradient(50% 50% at 50% 50%, rgba(249, 249, 249, 0.5) 0%, rgba(249, 249, 249, 0) 100%);
    filter: blur(10rem);
    pointer-events: none;
    z-index: 1;
}

/* Декоративное изображение-наложение поверх сетки команды */
.team__overlay-img {
    position: absolute;
    top: -20rem;
    left: 50%;
    transform: translateX(-50%);
    width: 122.9rem;
    height: 86.9rem;
    z-index: 10;
    pointer-events: none;
    object-fit: contain;
}

.team__container {
    position: relative;
    z-index: 2;
    /* Поднимаем контент над бликом */
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
}

/* =========================================
   СЕТКА ФОТО И ТЕКСТОВ
========================================= */

.team__composition {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* 12 колонок для точного позиционирования */
    grid-auto-rows: 5rem;
    /* Шаг сетки по вертикали */
    margin-bottom: 15rem;
}

.team__item {
    display: flex;
    flex-direction: column;
}

/* Поднимаем все текстовые блоки наверх */
.team__item[class*="--text"] {
    width: max-content;
    position: relative;
    /* z-index работает только с позиционированными элементами */
    z-index: 2;
}

/* Опускаем все картинки на базовый уровень */
.team__item[class*="--img"] {
    position: relative;
    z-index: 1;
}


.team__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*border-radius: 2rem;*/
    display: block;
}

.team__text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

.team__item[class*="--text"] {
    width: max-content;
}

.team__text--large {
    font-size: 2.6rem;
    letter-spacing: -0.052rem;
}

/* Позиционирование и точные размеры элементов внутри Grid */

/* Позиционирование и точные размеры элементов внутри Grid */
/* 1. Верхний-левый мужчина */
.team__item--img-1 {
    grid-column: 2;
    grid-row: 1 / span 7;
    width: 26.7rem;
    height: 32.3rem;
}

/* 2. Верхний-правый мужчина */
.team__item--img-2 {
    grid-column: 9;
    grid-row: 3 / span 8;
    width: 41.7rem;
    height: 39.4rem;
}

.team__item--text-2 {
    grid-column: 8;
    grid-row: 10;
    transform: translate(2.5rem, 1rem);
}

/* 3. Центральный-левый мужчина */
.team__item--img-3 {
    grid-column: 3;
    grid-row: 13 / span 6;
    width: 44.7rem;
    height: 25.8rem;
}

.team__item--text-3 {
    grid-column: 2;
    grid-row: 17;
    transform: translate(8.5rem, 2.5rem);
}

/* 4. Центральный-правый мужчина (каска) */
.team__item--img-4 {
    grid-column: 10;
    grid-row: 17 / span 5;
    transform: translate(-4rem, 3rem);
    width: 36.4rem;
    height: 21.0rem;
}

.team__item--text-4 {
    grid-column: 11;
    grid-row: 22;
    transform: translate(-3rem, 0rem);
}

/* 5. Мужчина по центру (квадрат) */
.team__item--img-5 {
    grid-column: 6;
    grid-row: 23 / span 5;
    width: 26.7rem;
    height: 21.5rem;
    transform: translate(-3.5rem, 0rem);
}

.team__item--text-5 {
    grid-column: 8;
    grid-row: 27;
    transform: translate(-4rem, -1.5rem);
}

/* 6. Нижний-левый мужчина */
.team__item--img-6 {
    grid-column: 1;
    grid-row: 26 / span 8;
    transform: translate(5rem, 0rem);
    width: 34.9rem;
    height: 36.2rem;
}

.team__item--text-6 {
    grid-column: 3;
    grid-row: 30;
}

/* 7. Нижняя-правая женщина */
.team__item--img-7 {
    grid-column: 9;
    grid-row: 29 / span 5;
    transform: translate(-9rem, 0rem);
    width: 43.0rem;
    height: 24.8rem;
}

/* =========================================
   НИЖНИЙ БЛОК (Заголовки и кнопка)
========================================= */

.team__bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
    will-change: filter, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.team__bottom-col--left {
    max-width: 68.8rem;
    /* Строгое ограничение ширины по макету */
}

.team__bottom-col--right {
    max-width: 79.8rem;
    /* Строгое ограничение ширины по макету */
}

.team__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 4.8rem;
    line-height: 1;
    letter-spacing: -0.096rem;
    color: #ffffff;
    margin: 0;
}

.team__subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 2.4rem 0;
}

.team__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    color: #ffffff;
    margin: 0 0 4rem 0;
}

/* Кнопка "Смотреть вакансии" */
.team__btn {
    display: inline-flex;
    align-items: center;
    /*background-color: #ffffff;*/
    /*border-radius: 1.6rem;*/
    text-decoration: none;
    /*padding-left: 4.5rem;*/
    transition: opacity 0.3s ease;
}

/*.team__btn:hover {
    opacity: 0.9;
}*/

.team__btn:hover .team__btn-text {
    background-color: #DA0100;
    color: #ffffff;
}

.team__btn-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #000000;
    /*margin-right: 4.5rem;*/
    background-color: #ffffff;
    padding: 2.6rem 5.4rem;
    border-radius: 1.6rem;
    /*border-radius: 1.6rem;
    height: 7.8rem;*/
    transition: background-color 0.35s ease, color 0.35s ease;
}

.team__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.8rem;
    height: 7.8rem;
    background-color: #ff4a45;
    border-radius: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
}

/* =========================================
   АДАПТИВНОСТЬ (Мобильная версия)
========================================= */

@media (max-width: 1199px) {

    /* === СЕКЦИЯ === */
    .team {
        padding: 2rem 0 30vh;
        overflow: clip;
        /* clip вместо hidden — поддержка sticky */
        will-change: auto;
    }

    .team::before {
        height: 25rem;
        z-index: 15;
        /* поверх sticky-фото для градиентного перехода */
    }

    .team__floating-shape {
        display: none;
    }

    /* === КОНТЕЙНЕР === */
    .team__container {
        display: flex;
        flex-direction: column;
        padding: 0;
        max-width: 100%;
    }

    /* === OVERLAY → ОБЛОЖКА (pin через GSAP) === */
    .team__overlay-img {
        order: -1;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 27.7rem;
        object-fit: cover;
    }

    /* === КОМПОЗИЦИЯ === */
    .team__composition {
        display: block;
        position: relative;
        grid-template-columns: unset;
        grid-auto-rows: unset;
        margin-bottom: 0rem;
        padding: 0;
        height: 82rem;
    }

    /* Сброс десктопных свойств (высокая специфичность) */
    .team__item[class*="--text"],
    .team__item[class*="--img"] {
        position: absolute;
        grid-column: unset;
        grid-row: unset;
        transform: none;
        aspect-ratio: unset;
    }

    .team__item[class*="--text"] {
        display: block;
        width: auto;
        height: auto;
    }

    /* Скрыть фото 6 и 7 */
    .team__item--img-6,
    .team__item--img-7 {
        display: none;
    }

    /* === ПОЗИЦИОНИРОВАНИЕ ФОТО === */
    .team__item--img-1 {
        left: 2rem;
        top: 19rem;
        width: 10.4rem;
        height: 13.3rem;
    }

    .team__item--img-2 {
        right: 2rem;
        left: auto;
        top: 2rem;
        width: 14.9rem;
        height: 16.6rem;
    }

    .team__item--img-3 {
        right: 1.7rem;
        left: auto;
        top: 28.3rem;
        width: 14.7rem;
        height: 12.2rem;
    }

    .team__item--img-4 {
        right: 2.1rem;
        left: auto;
        top: 54rem;
        width: 12.1rem;
        height: 8.8rem;
    }

    .team__item--img-5 {
        left: 1.2rem;
        top: 63rem;
        width: 19.9rem;
        height: 13.8rem;
    }

    /* === ТЕКСТ «ДОБРО ПОЖАЛОВАТЬ» === */
    .team .team__item--text-2 {
        left: 2rem;
        top: 11.3rem;
        width: 29.3rem;
        z-index: 2;
    }

    .team__text--large {
        font-size: 2rem !important;
        font-weight: 400;
        line-height: 1.2 !important;
        letter-spacing: 0;
    }

    /* === ТИПОГРАФИКА ТЕКСТОВ === */
    .team__text {
        position: relative;
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
        font-weight: 400;
    }

    .team__text br {
        display: none;
    }

    .team__text--large br {
        display: inline;
    }

    /* === СПИСОК ПРЕИМУЩЕСТВ === */
    .team .team__item--text-3 {
        left: 2rem;
        top: 43.4rem;
        width: 34.3rem;
        z-index: 2;
        padding-left: 2.6rem;
    }

    .team .team__item--text-4 {
        left: 2rem;
        top: 51rem;
        width: 34.3rem;
        z-index: 2;
        padding-left: 2.6rem;
    }

    .team .team__item--text-6 {
        left: 2rem;
        top: 54.6rem;
        width: 34.3rem;
        z-index: 2;
        padding-left: 2.6rem;
    }

    .team .team__item--text-5 {
        left: 2rem;
        top: 58.2rem;
        width: 34.3rem;
        z-index: 2;
        padding-left: 2.6rem;
    }

    /* Маркер: вертикальная линейка (первый пункт) */
    .team__item--text-3 .team__text::before {
        content: '';
        position: absolute;
        left: -2.6rem;
        top: 0.8rem;
        width: 0.5rem;
        height: 0.6rem;
        border-radius: 0.25rem;
        background: #ffffff;
    }

    /* Маркер: точки (остальные пункты) */
    .team__item--text-4 .team__text::before,
    .team__item--text-5 .team__text::before,
    .team__item--text-6 .team__text::before {
        content: '';
        position: absolute;
        left: -2.6rem;
        top: 0.75rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: #ffffff;
    }


    /* === НИЖНИЙ БЛОК === */
    .team__bottom-content {
        flex-direction: column;
        padding: 0 2rem;
        gap: 2.4rem;
    }

    .team__bottom-col--left,
    .team__bottom-col--right {
        max-width: 34rem;
    }

    .team__title {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: -0.024rem;
    }

    .team__title br {
        display: none;
    }

    .team__subtitle {
        display: none;
    }

    .team__desc {
        font-size: 1.6rem;
        letter-spacing: -0.032rem;
        margin-bottom: 0;
    }

    .team__desc br {
        display: none;
    }

    /* === КНОПКА === */
    .team__bottom-col--right {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .team__btn {
        align-self: center;
        margin-top: 2.4rem;
    }

    .team__btn-text {
        font-size: 1.4rem;
        padding: 1.7rem 4.8rem;
        border-radius: 0.9rem;
        width: 20rem;
        text-align: center;
    }

    .team__btn-icon {
        width: 5.2rem;
        height: 5.2rem;
        border-radius: 0.9rem;
    }

}


/* =========================================
   БЛОК "НОВОСТИ" (Главная)
========================================= */

.news-main {
    background-color: #f9f9f9;
    padding-top: 15rem;
    padding-bottom: 15rem;
}

.news-main__container {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.news-main__left {
    position: sticky;
    top: 21.3rem;
    display: flex;
    flex-direction: column;
    gap: 60rem;
    /* Расположение по макету */
}

.news-main__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10rem;
    line-height: 1;
    letter-spacing: -0.4rem;
    color: #000000;
    margin: 0;
}

.news-main__btn {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    text-decoration: none;
}

.news-main__btn:hover .news-main__btn-text {
    transform: translateX(-0.5rem);
}

.news-main__btn:hover .news-main__btn-icon {
    border-color: #000000;
}

.news-main__btn:hover .news-main__btn-icon svg path {
    stroke: #000000;
}

.news-main__btn-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #000000;
    transition: transform 0.3s ease;
}

.news-main__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 0.1rem solid #e0e0e0;
    flex-shrink: 0;
    color: #000000;
    transition: border-color 0.3s ease;
}

.news-main__btn-icon svg {
    transform: translateX(0.3rem);
}

.news-main__btn-icon svg path {
    transition: stroke 0.3s ease;
}

.news-main__right {
    width: 105.7rem;
    flex-shrink: 0;
}

.news-main__grid {
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
}

.news-main__card {
    background-color: #ffffff;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    height: 40.9rem;
    position: relative;
    padding: 6.1rem 7.6rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.news-main__card:hover {
    transform: translateY(-0.2rem);
    background-color: #EDEFF1;
}

.news-main__card-header {
    display: flex;
    align-items: center;
    gap: 1.85rem;
    position: absolute;
    top: 6.1rem;
    left: 6.6rem;
}

.news-main__card-bullet {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.news-main__card-category {
    font-family: 'Inter', sans-serif;
    /* IBM Plex Mono если есть, но fallback Inter */
    font-weight: 400;
    font-size: 2.08rem;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0;
}

.news-main__card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 3.01rem;
    line-height: 1.2;
    letter-spacing: -0.06rem;
    color: #000000;
    max-width: 93rem;
    position: absolute;
    bottom: 6.1rem;
    left: 7.6rem;
}

.news-main__card-img-wrapper {
    position: absolute;
    top: 5.67rem;
    right: 4.28rem;
    width: 19.56rem;
    height: 10.18rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.news-main__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Адаптивность для блока Новости */
@media (max-width: 1199px) {

    /* === СЕКЦИЯ === */
    .news-main {
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
    }

    /* === КОНТЕЙНЕР === */
    .news-main__container {
        flex-direction: column;
        gap: 4.6rem;
        padding: 0 2rem;
    }

    /* === ЛЕВАЯ КОЛОНКА → display: contents для перемещения кнопки под карточки === */
    .news-main__left {
        display: contents;
    }

    /* === ЗАГОЛОВОК === */
    .news-main__title {
        order: 1;
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
    }

    /* === КНОПКА «ВСЕ СОБЫТИЯ» — под карточки === */
    .news-main__btn {
        order: 3;
        align-self: flex-start;
        gap: 0;
        justify-content: space-between;
        width: 100%;
    }

    .news-main__btn:hover .news-main__btn-text {
        transform: none;
    }

    .news-main__btn:hover .news-main__btn-icon {
        border-color: #e0e0e0;
    }

    .news-main__btn:hover .news-main__btn-icon svg path {
        stroke: #C0C8CD;
    }

    .news-main__btn-text {
        font-size: 1.6rem;
    }

    .news-main__btn-icon {
        width: 3.8rem;
        height: 3.8rem;
    }

    .news-main__btn-icon svg {
        width: 0.8rem;
        height: 1.4rem;
    }

    /* === ПРАВАЯ КОЛОНКА (карточки) === */
    .news-main__right {
        width: 100%;
        order: 2;
    }

    /* === СЕТКА КАРТОЧЕК === */
    .news-main__grid {
        gap: 1.6rem;
    }

    /* === КАРТОЧКА === */
    .news-main__card {
        height: 23rem;
        min-height: unset;
        padding: 2.8rem;
        border-radius: 0.45rem;
        position: relative;
        overflow: hidden;
    }

    .news-main__card:hover {
        transform: none;
        box-shadow: none;
        background-color: #ffffff;
    }

    /* === ШАПКА КАРТОЧКИ (буллет + категория) === */
    .news-main__card-header {
        position: relative;
        top: 0;
        left: 0;
        gap: 1.3rem;
        margin-bottom: 0;
    }

    .news-main__card-bullet {
        width: 0.8rem;
        height: 0.8rem;
    }

    .news-main__card-category {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1.4rem;
        font-weight: 400;
    }

    /* === ТЕКСТ КАРТОЧКИ === */
    .news-main__card-title {
        position: absolute;
        bottom: 2.8rem;
        left: 2.8rem;
        top: auto;
        margin-top: 0;
        font-size: 1.6rem;
        line-height: 1.3;
        letter-spacing: -0.032rem;
        max-width: 28.4rem;
        width: auto;
    }

    /* === ПРЕВЬЮ-КАРТИНКА (маленькая, справа вверху) === */
    .news-main__card-img-wrapper {
        position: absolute;
        top: 2.2rem;
        right: 2rem;
        left: auto;
        bottom: auto;
        width: 9.4rem;
        height: 4.9rem;
        border-radius: 0.4rem;
        margin-top: 0;
    }
}

/* =========================================
   PROJECT FORM BLOCK
========================================= */
.project-form {
    background-color: #f0f2f3;
    padding: 12.4rem 0 20rem;
    /*border-radius: 2rem;
    margin: 10rem 0;*/
}

.project-form__container {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.project-form__left {
    flex: 1;
    max-width: 67.7rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 15rem;
}

.project-form__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 7.2rem;
    line-height: 7.8rem;
    letter-spacing: -0.216rem;
    color: #000000;
    margin: 0 0 8.2rem 0;
}

.project-form__btn-consultation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0600;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    font-weight: 400;
    border-radius: 1.3rem;
    padding: 2.7rem 4.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 14.7rem;
    align-self: flex-start;
}

.project-form__btn-consultation:hover,
.project-form__submit:hover {
    background-color: #cc0500;
}

.project-form__contacts {
    display: flex;
    flex-direction: column;
    gap: 8.1rem;
}

.project-form__contact-group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-form__contact-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: -0.028rem;
    color: #c0c8cd;
    text-transform: uppercase;
}

.project-form__contact-phone {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 1.4;
    color: #ff0600;
    text-decoration: none;
    width: fit-content;
}

.project-form__right {
    width: 103.3rem;
    flex-shrink: 0;
}

.project-form__card {
    background-color: #ffffff;
    border-radius: 1.7rem;
    padding: 8rem 10.6rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.05);
}

.project-form__card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: -0.072rem;
    color: #000000;
    margin: 0 0 4.4rem 0;
}

.project-form__card-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1.4;
    color: #000000;
    margin: 0 0 11.5rem 0;
}

.project-form__form {
    display: flex;
    flex-direction: column;
}

.project-form__input-group {
    display: flex;
    align-items: center;
    margin-bottom: 5.3rem;
}

.project-form__label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.0rem;
    color: #000000;
    width: 14.3rem;
    flex-shrink: 0;
}

.project-form__input {
    flex: 1;
    border: none;
    border-bottom: 1px solid rgba(173, 176, 191, 0.5);
    background: transparent;
    padding: 0 0 1rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    color: #000000;
    outline: none;
    transition: border-color 0.3s ease;
}

.project-form__input:focus {
    border-bottom-color: #ff0600;
}

.project-form__input-group--col {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 6rem;
}

.project-form__input-group--col .project-form__label {
    width: 100%;
    margin-bottom: 2rem;
}

.project-form__input--textarea {
    resize: none;
    overflow: hidden;
    width: 100%;
}

.project-form__products {
    margin-bottom: 14.7rem;
}

.project-form__products-title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.0rem;
    letter-spacing: -0.028rem;
    color: #000000;
    margin-bottom: 2.4rem;
}

.project-form__checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.project-form__checkbox {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    cursor: pointer;
}

.project-form__checkbox-input,
.project-form__consent-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.project-form__checkbox-custom {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(173, 176, 191, 0.5);
    border-radius: 0.3rem;
    flex-shrink: 0;
    transition: border-color 0.3s ease;
}

.project-form__checkbox-input:checked+.project-form__checkbox-custom {
    border-color: rgba(173, 176, 191, 0.5);
}

.project-form__checkbox-input:checked+.project-form__checkbox-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.3rem;
    height: 1.3rem;
    background-color: #ff0600;
    border-radius: 0.85rem;
}

.project-form__checkbox-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.0rem;
    color: #000000;
}

.project-form__footer {
    display: flex;
    flex-direction: column;
    gap: 4.4rem;
}

.project-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    cursor: pointer;
}

.project-form__consent-custom {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(141, 141, 141, 0.5);
    border-radius: 0.3rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
    transition: border-color 0.3s ease;
}

.project-form__consent-input:checked+.project-form__consent-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.3rem;
    height: 1.3rem;
    background-color: #ff0600;
    border-radius: 0.85rem;
}

.project-form__consent-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    letter-spacing: -0.032rem;
    color: #000000;
    max-width: 70.8rem;
}

.project-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0600;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    font-weight: 400;
    border-radius: 1.3rem;
    padding: 2.7rem 4.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-start;
}

/* --- Состояние ошибки для инпутов --- */
.project-form__input.is-error {
    border-bottom-color: #ff0600;
}

/* --- Состояние ошибки для чекбокса согласия --- */
.project-form__consent-custom.is-error {
    border-color: #ff0600;
}

/* --- Текст ошибки под полем --- */
.project-form__input-group {
    position: relative;
}

.project-form__input-group>.form-error-msg {
    position: absolute;
    bottom: -2rem;
    left: 14.3rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1;
    color: #ff0600;
    animation: formErrorAppear 0.3s ease;
}

.project-form__input-group--col>.form-error-msg {
    left: 0;
}

.project-form__consent>.form-error-msg {
    display: block;
    margin-top: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1;
    color: #ff0600;
    animation: formErrorAppear 0.3s ease;
}

@media (max-width: 1199px) {

    /* === СЕКЦИЯ === */
    .project-form {
        padding: 5.6rem 0 4rem;
        margin: 0;
    }

    /* === КОНТЕЙНЕР === */
    .project-form__container {
        flex-direction: column;
        padding: 0 2rem;
        gap: 4.6rem;
    }

    /* === ЛЕВАЯ КОЛОНКА === */
    .project-form__left {
        max-width: 100%;
        margin-bottom: 0;
        position: static;
    }

    /* === ЗАГОЛОВОК === */
    .project-form__title {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        margin-bottom: 3.2rem;
    }

    /* === КНОПКА «ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ» === */
    .project-form__btn-consultation {
        width: auto;
        padding: 1.7rem 2.8rem;
        font-size: 1.4rem;
        border-radius: 0.9rem;
        height: 6rem;
        margin-bottom: 5.6rem;
    }

    /* === КОНТАКТЫ === */
    .project-form__contacts {
        gap: 2.5rem;
    }

    .project-form__contact-label {
        font-size: 1.2rem;
        color: #a1acb4;
    }

    .project-form__contact-phone {
        font-size: 2.4rem;
        line-height: 3.2rem;
    }

    /* === ПРАВАЯ КОЛОНКА === */
    .project-form__right {
        width: 100%;
    }

    /* === КАРТОЧКА === */
    .project-form__card {
        padding: 5.6rem 3rem 4rem;
        border-radius: 1.7rem;
    }

    /* === ЗАГОЛОВОК КАРТОЧКИ === */
    .project-form__card-title {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: -0.024rem;
        margin-bottom: 2rem;
    }

    /* === ОПИСАНИЕ КАРТОЧКИ === */
    .project-form__card-desc {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
        margin-bottom: 6rem;
    }

    /* === INPUT-ГРУППЫ (горизонтальная раскладка как в макете) === */
    .project-form__input-group {
        flex-direction: row;
        align-items: center;
        gap: 0;
        margin-bottom: 3.6rem;
    }

    .project-form__label {
        width: 9rem;
        flex-shrink: 0;
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
    }

    .project-form__input {
        flex: 1;
        min-width: 0;
        font-size: 1.4rem;
    }

    /* === INPUT-ГРУППА КОЛОНОЧНАЯ (textarea) === */
    .project-form__input-group--col {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 4rem;
    }

    .project-form__input-group--col .project-form__label {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.6rem;
    }

    /* === ПРОДУКЦИЯ === */
    .project-form__products {
        margin-bottom: 6rem;
    }

    .project-form__products-title {
        font-size: 1.2rem;
    }

    /* === ЧЕКБОКСЫ === */
    .project-form__checkbox-text {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
    }

    /* === СОГЛАСИЕ === */
    .project-form__consent-text {
        font-size: 1rem;
        line-height: 1.2;
        letter-spacing: -0.03rem;
    }

    /* === КНОПКА «ОТПРАВИТЬ ЗАЯВКУ» === */
    .project-form__submit {
        width: 28rem;
        padding: 1.7rem;
        font-size: 1.4rem;
        border-radius: 0.9rem;
        height: 6rem;
        align-self: flex-start;
    }

    /* === ТЕКСТ ОШИБКИ — мобильное смещение === */
    .project-form__input-group>.form-error-msg {
        left: 9rem;
        font-size: 1rem;
        bottom: -1.6rem;
    }
}

/* =========================================
   FOOTER
========================================= */

.footer {
    position: relative;
    /*background: #ffffff url('/local/templates/glassmarket/css/../images/footer-banner-bg.svg') center bottom / 100% 100% no-repeat;*/
    background: #ffffff url('/local/templates/glassmarket/css/../images/footer-banner-bg.svg') center bottom / 100% auto no-repeat;
    width: 100%;
    z-index: 10;

}

.footer__container {
    max-width: 192rem;
    margin: 0 auto;
    padding-left: 8.9rem;
    padding-right: 8.6rem;
    display: flex;
    flex-direction: column;
}

.footer__main {
    display: grid;
    /*grid-template-columns: 4fr 4fr 3.5fr;*/
    grid-template-columns: 4fr 4fr 3.5fr;
    padding-top: 13.9rem;
    padding-bottom: 10rem;
}

/* --- КОЛОНКИ --- */
.footer__col {
    display: flex;
    flex-direction: column;
}

/* Колонка 1: Контакты */
.footer__logo {
    display: block;
    width: 25.6rem;
    height: 8.5rem;
    margin-bottom: 7.7rem;
}

.footer__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer__logo--mobile {
    display: none;
}

.footer__contact-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 4.5rem;
}

.footer__label {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    color: #c0c8cd;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.footer__phone,
.footer__email {
    font-family: 'Inter', sans-serif;
    font-size: 2.8rem;
    color: #ff0600;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    width: fit-content;
}

.footer__address {
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    color: #000000;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    max-width: 35rem;
}

.footer__map-link {
    font-family: 'Inter', sans-serif;
    font-size: 2.1rem;
    color: #ff0600;
    text-decoration: none;
    width: fit-content;
}

/* Колонка 2: Меню */
.footer__col--nav {
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

.footer__nav-group {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.footer__nav-group--secondary {
    padding-top: 3.4rem;
}

.footer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer__menu-link {
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    color: #000000;
    text-decoration: none;
    display: inline;
}

/* Колонка 3: Отделы и соцсети */
.footer__departments {
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
    margin-bottom: 5rem;
}

.footer__dept {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0600;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    padding: 2.7rem 4.5rem;
    border-radius: 1.3rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 5rem;
    align-self: flex-start;
}

.footer__btn:hover {
    background-color: #d00500;
}

.footer__socials-block {
    display: flex;
    flex-direction: column;
}

.footer__socials {
    display: flex;
    gap: 2rem;
}

.footer__social-link {
    width: 3.8rem;
    height: 3.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border-radius: 50%;*/
    overflow: hidden;
    transition: opacity 0.3s ease;
    /*background-color: #1a7cff;*/
}

.footer__social-link--tg {
    background-color: #0088cc;
}

.footer__social-link:hover {
    opacity: 0.8;
}

.footer__social-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- BOTTOM СЕКЦИЯ --- */
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6rem;
}

.footer__warning-group {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.footer__age {
    width: 3.7rem;
    height: 3.7rem;
    border: 0.1rem solid #c0c8cd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    color: #c0c8cd;
    flex-shrink: 0;
}

.footer__warning {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    color: #c0c8cd;
}

.footer__copyright {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    color: #c0c8cd;
}

.footer__dev {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: 'Inter', sans-serif;
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__dev:hover {
    opacity: 0.7;
}

.footer__dev-label {
    font-size: 1.4rem;
    color: #c0c8cd;
    line-height: 2rem;
    letter-spacing: -0.028rem;
}

.footer__dev-icon {
    width: 6.7rem;
    height: 5.9rem;
    flex-shrink: 0;
}

.footer__dev-logo {
    font-family: 'Formular', sans-serif;
    font-weight: 700;
    font-size: 2.8rem;
    display: flex;
    align-items: flex-start;
}

.footer__dev-reg {
    font-size: 1.6rem;
    margin-left: 0.2rem;
}

.footer__dev-desc {
    font-size: 1.3rem;
    line-height: 1.2;
}

/* --- BANNER --- */
.footer__banner {
    position: relative;
    width: 100%;
    min-height: 25rem;
    display: flex;
    align-items: center;
    /*padding: 6rem 0;*/
    padding: 0rem 0;
}

.footer__banner-inner {
    width: 100%;
    max-width: 192rem;
    margin: 0 auto;
    padding-left: 8.2rem;
    padding-right: 8.6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3.4rem;
}

.footer__banner-play {
    flex-shrink: 0;
    width: 8.7rem;
    height: 8.7rem;
    background-color: #111111;
    border-radius: 1.4rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.footer__banner-play:hover {
    transform: scale(1.05);
}

.footer__banner-play-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.footer__banner-play-icon {
    width: 0;
    height: 0;
    border-top: 0.8rem solid transparent;
    border-bottom: 0.8rem solid transparent;
    border-left: 1.2rem solid #ffffff;
    margin-left: 0.4rem;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0.2rem 0.5rem rgba(0, 0, 0, 0.5));
}

.footer__banner-text {
    font-family: 'Inter', sans-serif;
    font-size: 8.4rem;
    color: #ffffff;
    letter-spacing: -0.336rem;
    line-height: 1;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   FOOTER — Мобильная версия по макету Figma 380px
   ═══════════════════════════════════════════════ */
@media (max-width: 1199px) {

    /* === ФОН ФУТЕРА (мобильная копия — настраивай не ломая десктоп) === */

    .footer {
        background: #ffffff url('/local/templates/glassmarket/css/../images/footer-banner-bg-min.svg') center bottom / 100% auto no-repeat;
    }

    /* === КОНТЕЙНЕР === */


    .footer__container {
        padding: 0 2.3rem;
    }

    /* === ОСНОВНАЯ СЕКЦИЯ (КОЛОНКИ) === */
    .footer__main {
        grid-template-columns: 1fr;
        gap: 4.8rem;
        padding-top: 4.7rem;
        padding-bottom: 4rem;
    }

    /* Мобильный логотип */
    .footer__logo--mobile {
        display: block;
        width: 16.2rem;
        height: 6.2rem;
        margin-bottom: 0;
        order: 0;
    }

    .footer__logo--desktop {
        display: none;
    }

    /* Порядок колонок */
    .footer__col--contacts {
        order: 2;
    }

    .footer__col--nav {
        order: 1;
    }

    .footer__col--actions {
        order: 3;
    }

    /* === НАВИГАЦИЯ (два столбца рядом) === */
    .footer__col--nav {
        flex-direction: row;
        gap: 3rem;
    }

    .footer__nav-group--secondary {
        padding-top: 3.3rem;
    }

    /* === ЛЕЙБЛЫ === */
    .footer__label {
        font-size: 1.3rem;
        line-height: 1.8rem;
        letter-spacing: -0.013rem;
    }

    /* === ПУНКТЫ МЕНЮ === */
    .footer__menu {
        gap: 1.6rem;
    }

    .footer__menu-link {
        font-size: 1.6rem;
        letter-spacing: -0.032rem;
    }

    /* === КОНТАКТЫ === */
    .footer__contact-block {
        gap: 0.8rem;
        margin-bottom: 2rem;
    }

    .footer__phone,
    .footer__email {
        font-size: 2.2rem;
        line-height: 3.2rem;
        letter-spacing: -0.022rem;
    }

    .footer__address {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
        margin-bottom: 0.5rem;
    }

    .footer__map-link {
        font-size: 1.4rem;
    }

    /* === ОТДЕЛЫ === */
    .footer__departments {
        gap: 2.4rem;
        margin-bottom: 3.2rem;
    }

    .footer__dept {
        gap: 0.8rem;
    }

    /* === КНОПКА «ЗАКАЗАТЬ ЗВОНОК» === */
    .footer__btn {
        align-self: stretch;
        width: auto;
        height: 6rem;
        padding: 1.7rem 2.8rem;
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
        border-radius: 0.9rem;
        margin-bottom: 3.2rem;
    }

    /* === СОЦСЕТИ === */
    .footer__socials {
        gap: 2rem;
    }

    .footer__social-link {
        width: 3.5rem;
        height: 3.6rem;
    }

    /* === НИЖНЯЯ СЕКЦИЯ (порядок: Заряд → 18+ → Копирайт) === */
    .footer__bottom {
        flex-direction: column;
        gap: 2rem;
        align-items: flex-start;
        padding-bottom: 3rem;
    }

    .footer__dev {
        order: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .footer__dev-label {
        font-size: 1.3rem;
        color: #000000;
    }

    .footer__dev-icon {
        width: 4.5rem;
        height: 4rem;
    }

    .footer__dev-logo {
        font-size: 2.5rem;
    }

    .footer__dev-desc {
        display: none;
    }

    .footer__warning-group {
        order: 2;
        gap: 1.6rem;
    }

    .footer__age {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.1rem;
        color: #000000;
        border: 0.1rem solid #000000;
    }

    .footer__warning {
        font-size: 1.1rem;
        color: #000000;
    }

    .footer__copyright {
        order: 3;
        font-size: 1.2rem;
        color: #000000;
    }

    /* === БАННЕР === */
    .footer__banner {
        min-height: 6rem;
        padding: 2rem 0 4rem;
    }

    .footer__banner-inner {
        flex-direction: row;
        gap: 2.3rem;
        padding-left: 2.1rem;
        padding-right: 2rem;
        align-items: center;
        text-align: left;
    }

    .footer__banner-play {
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 1.12rem;
    }

    .footer__banner-play-icon {
        border-top-width: 0.5rem;
        border-bottom-width: 0.5rem;
        border-left-width: 0.8rem;
        margin-left: 0.2rem;
    }

    .footer__banner-text {
        font-size: 2rem;
        line-height: normal;
        white-space: normal;
        letter-spacing: normal;
    }
}

/* =========================================
   СТРАНИЦА КАТАЛОГА
========================================= */

/* --- Обертка страницы --- */
.catalog-page {
    position: relative;
    overflow: clip;
}

/* --- Фоновый градиент (абсолютный, под контентом) --- */
.catalog-page__gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 143.8rem;

    z-index: 0;
    background: linear-gradient(74.57deg, rgb(255, 166, 49) 13.76%, rgb(255, 166, 49) 17.13%, rgb(255, 6, 0) 50.83%);
}

/* Диагональный белый оверлей поверх градиента */
.catalog-page__gradient-overlay {
    position: absolute;
    top: 20rem;
    left: -35.3rem;
    width: 271.2rem;
    height: 171.1rem;
    background: linear-gradient(177.78deg, rgb(249, 249, 249) 51.7%, rgba(249, 249, 249, 0) 95.32%);
    transform: rotate(170deg);
    transform-origin: center center;
}

/* --- Шапка каталога (Flex-контейнер) --- */
.catalog-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding-top: 21.4rem;
    padding-left: 5.1rem;
    padding-right: 5.1rem;
    padding-bottom: 5.1rem;
}

/* --- Хлебные крошки --- */
.breadcrumbs {
    margin-top: 5.8rem;
    margin-left: 0.5rem;
}

.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
}

.breadcrumbs__link {
    color: #ffffff;
    text-decoration: none;
}

/* Разделитель-точка между элементами крошек */
.breadcrumbs__item+.breadcrumbs__item::before {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 1.2rem;
    flex-shrink: 0;
}

.breadcrumbs__item--current .breadcrumbs__text {
    color: rgba(255, 255, 255, 0.3);
}

/* --- Строка с заголовком и счетчиком --- */
.catalog-header__title-row {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.catalog-header__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13rem;
    line-height: 1;
    letter-spacing: -0.39rem;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
}

/* Бейдж-счетчик количества товаров */
.catalog-header__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8rem;
    height: 5.8rem;
    background-color: #000000;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.7rem;
}

.catalog-header__counter-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: -0.032rem;
    color: #ffffff;
    line-height: 1;
}

/* --- Горизонтальное меню категорий каталога --- */
.catalog-categories {
    position: relative;
    z-index: 1;
    margin-top: 10.2rem;
    padding-left: 5.7rem;
    padding-right: 5.1rem;
}

/* Возмоожно потребуется удалить */
.catalog-categories__item--active .catalog-categories__link {
    /* Переводим рендер плашки на GPU — убирает шлейф при Lenis-скролле */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;

    /* Отключаем субпиксельное смешивание (убирает цветной шлейф) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Блокируем размытие границ */
    outline: 1px solid transparent;
}

.catalog-categories__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5.5rem;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.catalog-categories__list::-webkit-scrollbar {
    display: none;
}

.catalog-categories__item {
    flex-shrink: 0;
}

.catalog-categories__link {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    /* GPU-промоут для всех пунктов — предотвращает артефакты при скролле */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.catalog-categories__name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: -0.072rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.catalog-categories__count {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: -0.042rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

/* Активное состояние — белый текст, без чёрной капсулы */
/* Дублирующий селектор .catalog-categories__item--active .catalog-categories__link
   находится выше (GPU-ускорение), здесь только визуальные свойства */
.catalog-categories__item--active .catalog-categories__link {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.catalog-categories__item--active .catalog-categories__name,
.catalog-categories__item--active .catalog-categories__count {
    color: #ffffff;
}

/* Чёрная капсула — фиксированно только на «Эксклюзив» */
.catalog-categories__item--exclusive .catalog-categories__link {
    background-color: #000000;
    border-radius: 1.3rem;
    padding: 1.25rem 3.9rem;
}

.catalog-categories__item--exclusive .catalog-categories__name,
.catalog-categories__item--exclusive .catalog-categories__count {
    color: #ffffff;
}

/* Ховер чёрной капсулы «Эксклюзив» */
.catalog-categories__item--exclusive .catalog-categories__link:hover {
    background-color: #FF0600;
}

/* Ховер для неактивных элементов */
.catalog-categories__item:not(.catalog-categories__item--active):not(.catalog-categories__item--exclusive) .catalog-categories__link:hover .catalog-categories__name,
.catalog-categories__item:not(.catalog-categories__item--active):not(.catalog-categories__item--exclusive) .catalog-categories__link:hover .catalog-categories__count {
    color: rgba(255, 255, 255, 0.65);
}

/* =========================================
   КАТАЛОГ: Контентная часть (Sidebar + Grid)
========================================= */

/* --- Общий контейнер: 2 колонки --- */
.catalog-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 4.5rem;
    padding: 5rem 5.1rem 10rem;
}

/* --- Левая колонка: Сайдбар фильтров --- */
.catalog-sidebar {
    flex-shrink: 0;
    width: 42.8rem;
    position: sticky;
    top: 3rem;
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE / Edge */
}

.catalog-sidebar::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari / Opera */
}

.catalog-sidebar__card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(0.6rem);
    -webkit-backdrop-filter: blur(0.6rem);
    border-radius: 2.2rem;
    padding: 5.3rem 4rem 5rem;
}

/* --- Общие стили для заголовков фильтров --- */
.catalog-sidebar__label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    color: #c0c8cd;
    text-transform: uppercase;
    margin: 0 0 2rem;
    padding-left: 1rem;
}

/* --- Разделитель между блоками фильтров --- */
.catalog-sidebar__divider {
    border: none;
    border-style: none;
    border-width: 0;
    padding: 0;
    height: 0.2rem;
    overflow: visible;
    background: transparent;
    background-image: radial-gradient(circle, #C0C8CD 0.1rem, transparent 0.1rem);
    background-size: 0.8rem 0.2rem;
    background-repeat: repeat-x;
    background-position: left center;
    margin: 3.2rem 0;
}

/* --- Кнопка «Сбросить фильтр» --- */
.smart-filter__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1;
    color: #8a9299;
    text-decoration: none;
    cursor: pointer;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    transition: color 0.25s ease, background-color 0.25s ease;
    user-select: none;
}

.smart-filter__reset:hover {
    color: #d14a4a;
    background-color: rgba(209, 74, 74, 0.08);
}

.smart-filter__reset:active {
    color: #b93c3c;
    background-color: rgba(209, 74, 74, 0.14);
}

.smart-filter__reset-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}

/* =========================================
   ФИЛЬТР: Кастомный Dropdown (Тип изделия)
   Стиль: news-filter__dropdown
========================================= */
.catalog-dropdown {
    position: relative;
    width: 100%;
    margin-bottom: 3.5rem;
    z-index: 10;
}

/* --- Кнопка-переключатель (glassmorphic pill) --- */
.catalog-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 6.7rem;
    padding: 0 3.2rem;
    background: rgba(255, 252, 249, 1);
    backdrop-filter: blur(0.6rem);
    -webkit-backdrop-filter: blur(0.6rem);
    border-radius: 1rem;
    border: 0.1rem solid #D8DEE2;
    cursor: pointer;
    outline: none;
    transition: background 0.3s ease;
}

.catalog-dropdown__toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

.catalog-dropdown.is-open .catalog-dropdown__toggle {
    background: rgba(255, 255, 255, 0.45);
}

/* --- Текст выбранного значения --- */
.catalog-dropdown__value {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    font-feature-settings: 'zero';
}

/* --- Стрелка (плавный поворот на 180°) --- */
.catalog-dropdown__arrow {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: #000000;
    transition: transform 0.3s ease;
}

.catalog-dropdown.is-open .catalog-dropdown__arrow {
    transform: rotate(180deg);
}

/* --- Тело (выпадающий список, анимация visibility + translateY) --- */
.catalog-dropdown__body {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    width: 100%;
    z-index: 20;

    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.08);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;

    pointer-events: none;
}

.catalog-dropdown.is-open .catalog-dropdown__body {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- Список (здесь живут отступы) --- */
.catalog-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 1rem 0;
}

/* --- Пункт списка --- */
.catalog-dropdown__link {
    display: block;
    padding: 1.4rem 3.2rem;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    color: #929292;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.catalog-dropdown__link:hover {
    background: #f5f5f5;
}

/* Активный (выбранный) пункт */
.catalog-dropdown__item--active .catalog-dropdown__link {
    color: #000000;
}

/* =========================================
   ФИЛЬТР: Теги «По назначению»
========================================= */
.catalog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 0.7rem;
    margin-bottom: 0;
}

.catalog-tags__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0.6rem 2.4rem;
    border: 0.1rem solid rgba(192, 200, 205, 0.52);
    border-radius: 44.5rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.catalog-tags__item:hover {
    border-color: #999;
}

.catalog-tags__text {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    color: #000000;
    white-space: nowrap;
    font-feature-settings: 'ss04';
}

/* Активный тег */
.catalog-tags__item--active {
    background-color: #ff0601;
    border-color: #ff0601;
}

.catalog-tags__item--active .catalog-tags__text {
    color: #ffffff;
}

/* «Показать все» кнопка */
.catalog-tags__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    height: 3.7rem;
}

.catalog-tags__toggle-text {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    color: #c0c8cd;
    white-space: nowrap;
    font-feature-settings: 'ss04';
}

.catalog-tags__toggle-icon {
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.catalog-tags__toggle-icon svg {
    width: 100%;
    height: 100%;
}

.catalog-tags__toggle--expanded .catalog-tags__toggle-icon {
    transform: rotate(0deg);
}

/* =========================================
   ФИЛЬТР: Ёмкость (чипы-кнопки)
========================================= */
.catalog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.catalog-chips__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    border: 0.1rem solid #d8dee2;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.catalog-chips__item:not(.catalog-chips__item--active):hover {
    /*border-color: #999;*/
    background-color: rgba(0, 0, 0, 0.04);
}

.catalog-chips__text {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    color: #000000;
    white-space: nowrap;
    font-feature-settings: 'ss04';
}

/* Активный чип */
.catalog-chips__item--active {
    background-color: #FF0600;
    border-color: #FF0600;
}

.catalog-chips__item--active .catalog-chips__text {
    color: #ffffff;
}

/* =========================================
   ФИЛЬТР: Чекбоксы (Тип венчика)
========================================= */
.catalog-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 3rem;
}

.catalog-checkbox {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    cursor: pointer;
    user-select: none;
}

/* Скрываем системный checkbox */
.catalog-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Кастомный чекбокс-квадрат */
.catalog-checkbox__box {
    position: relative;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 0.1rem solid #d8dee2;
    border-radius: 0.3rem;
    background: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Галочка (скрыта по умолчанию) */
.catalog-checkbox__box::after {
    content: '';
    position: absolute;
    top: 0.4rem;
    left: 0.8rem;
    width: 0.7rem;
    height: 1.2rem;
    border: solid #ffffff;
    border-width: 0 0.2rem 0.2rem 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Состояние checked */
.catalog-checkbox__input:checked+.catalog-checkbox__box {
    background-color: #000000;
    border-color: #000000;
}

.catalog-checkbox__input:checked+.catalog-checkbox__box::after {
    opacity: 1;
}

/* Ховер */
.catalog-checkbox:hover .catalog-checkbox__box {
    border-color: #999;
}

/* Лейбл чекбокса */
.catalog-checkbox__label {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    font-feature-settings: 'zero';
}

/* =========================================
   ПРАВАЯ КОЛОНКА: Основная секция каталога
========================================= */
.catalog-main {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}

/* =========================================
   ПРАВАЯ КОЛОНКА: Сетка товаров
========================================= */
.catalog-grid {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}

.catalog-grid__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7.2rem 1.5rem;
}

/* =========================================
   КАРТОЧКА ТОВАРА
========================================= */
.catalog-card {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    text-decoration: none;
    color: inherit;
}

.catalog-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 38.2rem;
    background-color: #ffffff;
    border-radius: 1.1rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.catalog-card:hover .catalog-card__image-wrapper {
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.08);
}

.catalog-card__image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 90%;
    object-fit: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.catalog-card__info {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: flex-start;
}

.catalog-card__title {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1;
    color: #000000;
    margin: 0;
    font-feature-settings: 'zero';
}

.catalog-card__capacity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    border: 0.1rem solid #c0c8cd;
    border-radius: 0.5rem;
}

.catalog-card__capacity-text {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    color: #000000;
    white-space: nowrap;
    font-feature-settings: 'ss04';
}

/* =========================================
   ПАГИНАЦИЯ (system.pagenavigation)
   Дизайн: Figma node 2617:5708
========================================= */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.6rem;
    padding: 4rem 0 2rem;
    font-family: 'Inter', sans-serif;
}

/* ---- Стрелки «Назад / Вперёд» ---- */
.pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.pagination__arrow:hover {
    color: #DA0100;
    transform: scale(1.15);
}

.pagination__arrow--disabled {
    color: #C0C8CD;
    pointer-events: none;
    opacity: 0.5;
}

.pagination__arrow svg {
    width: 0.9rem;
    height: 1.6rem;
}

/* ---- Список номеров страниц ---- */
.pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 3.6rem;
}

/* ---- Элемент списка ---- */
.pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Ссылка / номер страницы ---- */
.pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    height: 3.4rem;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;
    color: #C0C8CD;
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}

a.pagination__link:hover {
    color: #000000;
}

/* ---- Активная (текущая) страница ---- */
.pagination__link--current {
    color: #000000;
    background-color: #f0f3f5;
    font-weight: 400;
}

/* ---- Троеточие ---- */
.pagination__item--ellipsis .pagination__link {
    color: #C0C8CD;
    cursor: default;
    letter-spacing: 0.2rem;
}

/* ---- Кнопка «Показать ещё» ---- */
.pagination__load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10.3rem;
    padding: 0 3.2rem;
    border: none;
    border-radius: 2.2rem;
    background-color: rgba(192, 200, 205, 0.15);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: #1e1e1e;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    order: -1;
    flex-basis: 100%;
    margin-bottom: 1.6rem;
}

.pagination__load-more:hover {
    background-color: rgba(192, 200, 205, 0.3);
}

/* Состояние, когда flex-wrap нужен для кнопки «Показать ещё» */
.pagination {
    flex-wrap: wrap;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Градиент каталога
========================================= */
@media (max-width: 1199px) {

    /* Переопределяем overflow: clip → overflow-x: clip,
       чтобы position: sticky работал для кнопки фильтра */
    .catalog-page {
        overflow: visible;
        overflow-x: clip;
    }

    /* --- Фоновый градиент --- */
    .catalog-page__gradient-bg {
        height: 81.2rem;
    }

    /* --- Белый оверлей --- */
    .catalog-page__gradient-overlay {
        top: 4rem;
        left: -10rem;
        width: 150rem;
        height: 90rem;
    }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Шапка каталога
========================================= */
@media (max-width: 1199px) {

    /* --- Контейнер шапки --- */
    .catalog-header {
        padding-top: 11.6rem;
        padding-left: 1.8rem;
        padding-right: 1.8rem;
        padding-bottom: 3rem;
    }

    /* --- Строка заголовка + счётчик --- */
    .catalog-header__title-row {
        gap: 0.1rem;
        align-items: center;
    }

    /* --- Заголовок --- */
    .catalog-header__title {
        font-size: 4.5rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        white-space: normal;
    }

    /* --- Бейдж-счётчик --- */
    .catalog-header__counter {
        width: 3.8rem;
        height: 3.8rem;
        margin-top: 0;
        margin-bottom: 5rem;
    }

    .catalog-header__counter-text {
        font-size: 1.05rem;
        letter-spacing: -0.021rem;
    }

    /* --- Хлебные крошки: скрыть на мобилке в каталоге --- */
    .catalog-page .catalog-header .breadcrumbs {
        display: none;
    }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Категории каталога (горизонтальный drag-слайдер)
========================================= */
@media (max-width: 1199px) {

    /* --- Контейнер --- */
    .catalog-categories {
        margin-top: 0;
        padding: 2rem 0 1.2rem 0;
        /* padding: 0 по бокам — элементы уходят за оба края экрана при скролле */
    }

    /* --- Список: уменьшение gap, курсор для drag --- */
    .catalog-categories__list {
        gap: 2.4rem;
        cursor: grab;
        /* padding-left на скроллируемом списке: начальный отступ есть,
           но при скролле элементы уходят за левый край экрана */
        padding-left: 1.8rem;
    }

    .catalog-categories__list.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

    /* --- Название категории --- */
    .catalog-categories__name {
        font-size: 2.4rem;
        font-weight: 400;
    }

    /* --- Счётчик --- */
    .catalog-categories__count {
        font-size: 1.4rem;
    }

    /* --- Ссылка: gap между именем и счётчиком --- */
    .catalog-categories__link {
        gap: 0.53rem;
    }

    /* --- Неактивный цвет (по макету — чуть ярче десктопного) --- */
    .catalog-categories__name,
    .catalog-categories__count {
        color: rgba(255, 255, 255, 0.45);
    }

    /* --- Активный элемент: убираем чёрную капсулу c Эксклюзива на мобильном --- */
    .catalog-categories__item--exclusive .catalog-categories__link {
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Catalog Sidebar → Кнопка + Попап
========================================= */

/* --- Кнопка-триггер «Фильтр» (скрыта на десктопе) --- */
.catalog-filter-toggle {
    display: none;
}

/* --- Попап (скрыт на десктопе) --- */
.catalog-filter-popup {
    display: none;
}

@media (max-width: 1199px) {

    /* Скрываем десктопный сайдбар */
    .catalog-sidebar {
        display: none;
    }

    /* Контентная часть: вертикальный layout */
    .catalog-content {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        padding: 2rem 1.8rem 5rem;
    }

    /* =============================================
       Кнопка «ФИЛЬТР» (видима на мобилке)
    ============================================= */
    .catalog-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6.9rem;
        /*width: 16.5rem;*/
        width: 49%;
        height: 4rem;
        padding: 0.46rem 1.83rem;
        background: rgba(255, 255, 255, 0.8);
        border: none;
        border-radius: 0.56rem;
        cursor: pointer;
        font-family: 'IBM Plex Mono', 'Inter', monospace;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: 0.012rem;
        text-transform: uppercase;
        color: #000000;
        transition: background-color 0.3s ease, color 0.3s ease;
        flex-shrink: 0;
        align-self: flex-start;

        /* Sticky: фиксируется под хедером при скролле,
           останавливается в конце .catalog-content */
        position: sticky;
        top: 9rem;
        z-index: 50;
    }

    .catalog-filter-toggle__icon {
        width: 1.06rem;
        height: 1.36rem;
        flex-shrink: 0;
        transition: color 0.3s ease;
    }

    /* Состояние: фильтры активны */
    .catalog-filter-toggle--active {
        background: #FF0600;
        color: #ffffff;
    }

    /* =============================================
       Попап фильтров (fullscreen bottom-sheet)
    ============================================= */
    .catalog-filter-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

    .catalog-filter-popup.is-open {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    /* Затемнение фона с blur */
    .catalog-filter-popup__overlay {
        position: absolute;
        inset: 0;
        background: rgba(11, 11, 11, 0.2);
        backdrop-filter: blur(2.5rem);
        -webkit-backdrop-filter: blur(2.5rem);
    }

    /* Панель фильтров (bottom sheet) */
    .catalog-filter-popup__panel {
        position: relative;
        z-index: 1;
        background: #ffffff;
        backdrop-filter: blur(0.6rem);
        -webkit-backdrop-filter: blur(0.6rem);
        border-radius: 2.2rem 2.2rem 0 0;
        padding: 4rem 2.5rem 2.5rem;
        max-height: 100vh;
        overflow-y: auto;
        animation: filterPopupSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .catalog-filter-popup__panel::-webkit-scrollbar {
        display: none;
    }

    @keyframes filterPopupSlideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    /* --- Адаптация внутренних элементов фильтров для попапа --- */

    /* Заголовки */
    .catalog-filter-popup__content .catalog-sidebar__label {
        font-size: 1.2rem;
        padding-left: 1rem;
        margin-bottom: 1.5rem;
    }

    /* Dropdown */
    .catalog-filter-popup__content .catalog-dropdown {
        width: 100%;
        margin-bottom: 2.5rem;
    }

    .catalog-filter-popup__content .catalog-dropdown__toggle {
        height: 5rem;
        padding: 0 2.4rem;
        border-radius: 0.8rem;
    }

    .catalog-filter-popup__content .catalog-dropdown__value {
        font-size: 1.4rem;
    }

    .catalog-filter-popup__content .catalog-dropdown__arrow {
        width: 1.6rem;
        height: 1.6rem;
    }

    /* Чипы */
    .catalog-filter-popup__content .catalog-chips {
        gap: 1.6rem;
    }

    .catalog-filter-popup__content .catalog-chips__text {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    .catalog-filter-popup__content .catalog-chips__item--active {
        background-color: #FF0600;
        border-color: #FF0600;
    }

    /* Чекбоксы */
    .catalog-filter-popup__content .catalog-checkboxes {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.6rem;
    }

    .catalog-filter-popup__content .catalog-checkbox__label {
        font-size: 1.4rem;
    }

    .catalog-filter-popup__content .catalog-checkbox__box {
        width: 1.9rem;
        height: 1.9rem;
    }

    .catalog-filter-popup__content .catalog-checkbox__box::after {
        top: 0.3rem;
        left: 0.6rem;
        width: 0.5rem;
        height: 0.9rem;
        border-width: 0 0.2rem 0.2rem 0;
    }

    .catalog-filter-popup__content .catalog-checkbox__input:checked+.catalog-checkbox__box {
        background-color: #FF0600;
        border-color: #FF0600;
    }

    /* Разделители */
    .catalog-filter-popup__content .catalog-sidebar__divider {
        margin: 2.5rem 0;
    }

    /* Сброс фильтра (скрываем десктопную ссылку внутри попапа) */
    .catalog-filter-popup__content .smart-filter__reset {
        display: none;
    }

    /* Теги */
    .catalog-filter-popup__content .catalog-tags__item {
        height: 2.6rem;
        padding: 0.4rem 1.8rem;
    }

    .catalog-filter-popup__content .catalog-tags__text {
        font-size: 1.4rem;
    }

    /* =============================================
       Кнопки действий попапа
    ============================================= */
    .catalog-filter-popup__actions {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 2rem;
        padding-top: 0;
    }

    .catalog-filter-popup__submit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 4.7rem;
        padding: 1.7rem 2rem;
        background: #FF0600;
        color: #ffffff;
        border: none;
        border-radius: 0.5rem;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.25s ease;
    }

    .catalog-filter-popup__submit:active {
        background: #d90500;
    }

    .catalog-filter-popup__reset {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 4.7rem;
        padding: 1.7rem 2rem;
        background: #ffffff;
        color: #000000;
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        transition: box-shadow 0.25s ease;
    }

    .catalog-filter-popup__reset:active {
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
    }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Сетка товаров каталога
========================================= */
@media (max-width: 1199px) {

    /* Сетка: 4 → 2 колонки, уменьшенные gap-ы */
    .catalog-grid__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 0.8rem;
    }

    /* Карточка: уменьшенный gap между картинкой и info */
    .catalog-card {
        gap: 1rem;
    }

    /* Картинка: меньшая высота, скруглённые углы */
    .catalog-card__image-wrapper {
        height: 19.6rem;
        border-radius: 0.56rem;
    }

    /* Название: уменьшенный размер шрифта */
    .catalog-card__title {
        font-size: 1.2rem;
        line-height: normal;
    }

    /* Info-блок: уменьшенный gap */
    .catalog-card__info {
        gap: 0.5rem;
    }

    /* Capacity chip: уменьшенные размеры */
    .catalog-card__capacity {
        padding: 0.56rem 0.7rem;
        border-width: 0.07rem;
        border-radius: 0.5rem;
    }

    .catalog-card__capacity-text {
        font-size: 1.1rem;
        letter-spacing: -0.033rem;
    }

    /* Пагинация: уменьшённая кнопка «Показать ещё» */
    .pagination__load-more {
        height: 5.6rem;
        font-size: 1.4rem;
        border-radius: 1.2rem;
    }
}

/* =========================================
   ДЕТАЛЬНАЯ СТРАНИЦА ТОВАРА
   Дизайн: Figma node 5228:9564
========================================= */

/* --- Обёртка страницы --- */
.product-detail {
    position: relative;
    max-width: 192rem;
    margin: 0 auto;
    padding: 15rem 4rem 10rem;
}

/* --- Верхняя навигация: Кнопка «Назад» + хлебные крошки --- */
.product-detail__nav {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 5rem;
}

/* Круглая кнопка «Назад» */
.product-detail__back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid #D8DEE2;
    background: transparent;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.3s ease;
}

.product-detail__back-btn svg {
    pointer-events: none;
    transform: translateX(-0.3rem);
}

.product-detail__back-btn svg path {
    transition: stroke 0.3s ease;
}

@media (min-width: 1200px) {
    .product-detail__back-btn:hover {
        border-color: #000000;
    }

    .product-detail__back-btn:hover svg path {
        stroke: #000000;
    }
}

/* Хлебные крошки — переопределение для светлого фона */
.breadcrumbs--light .breadcrumbs__link {
    color: #040404;
}

.breadcrumbs--light .breadcrumbs__item+.breadcrumbs__item::before {
    background-color: rgba(0, 0, 0, 0.25);
}

.breadcrumbs--light .breadcrumbs__item--current .breadcrumbs__text {
    color: #c0c8cd;
}

/* --- Левая колонка (обёртка) --- */
.product-detail__left {
    display: flex;
    flex-direction: column;
}

/* --- Заголовок + Бейдж --- */
.product-detail__header {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-bottom: 4rem;
}

.product-detail__title {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 500;
    font-size: 7.2rem;
    line-height: 8rem;
    letter-spacing: -0.216rem;
    color: #000000;
    margin: 0;
}

.product-detail__badges {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.product-detail__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 2.4rem;
    background-color: #ff0601;
    border-radius: 44.5rem;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    color: #ffffff;
    white-space: nowrap;
    font-feature-settings: 'ss04';
}

/* --- Двухколоночная сетка --- */
.product-detail__grid {
    display: grid;
    grid-template-columns: 1fr 96rem;
    gap: 6rem;
    align-items: start;
}

/* =========================================
   ЛЕВАЯ КОЛОНКА: Галерея товара
========================================= */

.product-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-gallery__viewport {
    position: relative;
    width: 100%;
    min-height: 80rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery__slide {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.product-gallery__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.product-gallery__image {
    max-width: 80%;
    max-height: 75rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Стрелки навигации */
.product-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 0.2rem solid #d8dee2;
    background: #F9F9F9;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 2;
}

.product-gallery__arrow:hover {
    background-color: #f0f3f5;
    border-color: #c0c8cd;
}

.product-gallery__arrow svg {
    width: 2.2rem;
    height: 2rem;
}

.product-gallery__arrow--prev {
    left: 2rem;
}

.product-gallery__arrow--next {
    right: 2rem;
}

/* Счётчик фотографий */
.product-gallery__counter {
    margin-top: 2rem;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    font-feature-settings: 'ss04';
    white-space: nowrap;
    align-self: flex-start;
}

.product-gallery__counter-current {
    color: #121111;
}

.product-gallery__counter-separator {
    color: #d2d2d2;
}

/* =========================================
   ПРАВАЯ КОЛОНКА: Информация о товаре
========================================= */

.product-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Лейбл секции «ХАРАКТЕРИСТИКИ» */
.product-info__section-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    color: #c0c8cd;
    text-transform: uppercase;
    margin-bottom: 4rem;
}

/* =========================================
   ПЕРЕКЛЮЧАТЕЛЬ ОБЪЁМОВ
========================================= */

.volume-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 4rem;
}

.volume-switcher__label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 3rem;
    color: #000000;
    margin: 0;
}

.volume-switcher__tabs {
    display: flex;
    align-items: center;
    background-color: #f0f3f5;
    border-radius: 1.2rem;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.volume-switcher__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 13rem;
    height: 5.2rem;
    padding: 0 2.4rem;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: #c0c8cd;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 1.2rem;
    transition: color 0.3s ease, background-color 0.3s ease;
    font-feature-settings: 'zero';
}

.volume-switcher__tab:hover {
    color: #808990;
}

.volume-switcher__tab--active {
    background-color: #ffffff;
    color: #000000;
    border: 0.3rem solid #f0f3f5;
    pointer-events: none;
}

/* =========================================
   ТАБЛИЦА ХАРАКТЕРИСТИК
========================================= */

.product-specs {
    display: flex;
    flex-direction: column;
}

.product-specs__row {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 2.4rem 0;
    border-top: 0.05rem solid #d8dee2;
}

.product-specs__row:last-child {
    border-bottom: 0.05rem solid #d8dee2;
}

.product-specs__key {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 3rem;
    color: #000000;
    width: 42.8rem;
    flex-shrink: 0;
}

.product-specs__value {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1;
    color: #000000;
    white-space: nowrap;
    font-feature-settings: 'zero';
}

.product-specs__value-group {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

/* Иконки в характеристиках */
.product-specs__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    flex-shrink: 0;
    color: #FF0600;
}

.product-specs__icon svg {
    width: 100%;
    height: 100%;
}

/* Ссылка на скачивание чертежа */
.product-specs__download {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    text-decoration: none;
    color: #000000;
    transition: opacity 0.3s ease;
}

.product-specs__download:hover {
    opacity: 0.65;
}

.product-specs__download .product-specs__icon {
    width: 2.1rem;
    height: 2.1rem;
}

/* =========================================
   БЛОК ЧЕРТЕЖА (ПРЕВЬЮ)
========================================= */

.product-drawing {
    margin-top: 3.2rem;
    background-color: #f9f9f9;
    border-radius: 2.2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35rem;
    padding: 3rem;
}

.product-drawing__image {
    max-width: 100%;
    max-height: 30rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* =========================================
   КНОПКИ ДЕЙСТВИЙ
========================================= */

.product-actions {
    display: flex;
    gap: 1.2rem;
    margin-top: 4rem;
}

.product-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2.7rem 4.5rem;
    border-radius: 1.3rem;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    /*transition: opacity 0.3s ease, transform 0.3s ease;*/
}

.product-actions__btn:hover {
    /*opacity: 0.85;*/
    background-color: #DA0100;
    color: #ffffff;
}

.product-actions__btn:active {
    transform: scale(0.98);
}

/* Красная кнопка «Заказать» */
.product-actions__btn--order {
    background-color: #ff0600;
    color: #ffffff;
    flex: 1;
    max-width: 44.9rem;
}

/* Серая кнопка «Позвонить» */
.product-actions__btn--call {
    background-color: rgba(216, 222, 226, 0.2);
    color: #000000;
    flex: 1;
    max-width: 42.6rem;
}

/* =========================================
   ПОХОЖИЕ ИЗДЕЛИЯ
========================================= */

.similar-products {
    margin-top: 10rem;
    padding-top: 5rem;
}

.similar-products__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: -0.072rem;
    color: #000000;
    margin: 0;
}

.similar-products__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5rem;
}

.similar-products__nav {
    display: flex;
    gap: 1.7rem;
}

.similar-products__nav-btn {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid #D8DEE2;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.similar-products__nav-btn svg {
    pointer-events: none;
}

.similar-products__nav-btn--prev svg {
    transform: translateX(-0.3rem);
}

.similar-products__nav-btn--next svg {
    transform: translateX(0.3rem);
}

.similar-products__nav-btn svg path {
    transition: stroke 0.3s ease;
}

@media (min-width: 1200px) {
    .similar-products__nav-btn:hover {
        border-color: #000000;
    }

    .similar-products__nav-btn:hover svg path {
        stroke: #000000;
    }
}

.similar-products__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    margin-left: -4rem;
    margin-right: -4rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

.similar-products__track::-webkit-scrollbar {
    display: none;
}

.similar-products__track.is-dragging {
    cursor: grabbing;
}

.similar-products__track>.catalog-card {
    flex: 0 0 calc((100% - (1.5rem * 5)) / 6);
    min-width: 0;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

/* =========================================
   AJAX: Состояние загрузки при переключении объёмов
========================================= */

.product-detail {
    transition: opacity 0.35s ease;
}

.product-detail.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Детальная страница
========================================= */
@media (max-width: 1199px) {
    .product-detail {
        padding: 12rem 1.6rem 5rem;
    }

    /* Скрываем кнопку «Назад» на мобильном */
    .product-detail__back-btn {
        display: none;
    }

    /* Навигация: убираем лишние отступы */
    .product-detail__nav {
        margin-bottom: 4rem;
        gap: 0;
    }

    /* Хлебные крошки: сброс базовых отступов */
    .product-detail__nav .breadcrumbs {
        margin-top: 0;
        margin-left: 0;
    }

    /* Хлебные крошки: уменьшенный шрифт */
    .product-detail__nav .breadcrumbs__item {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    /* Хлебные крошки: увеличенный отступ между точками-разделителями */
    .product-detail__nav .breadcrumbs__item+.breadcrumbs__item::before {
        margin: 0 1.6rem;
    }

    /* Хлебные крошки: скрываем текущий пункт (название товара) */
    .product-detail__nav .breadcrumbs__item--current {
        display: none;
    }

    /* Заголовок + бейдж: отступ снизу */
    .product-detail__header {
        margin-bottom: 4rem;
    }

    /* Заголовок: точные значения из Figma */
    .product-detail__title {
        font-size: 4rem;
        line-height: 4.2rem;
        letter-spacing: -0.12rem;
    }

    /* Бейдж «Эксклюзив»: уменьшенный размер */
    .product-detail__badge {
        font-size: 0.95rem;
        padding: 0.46rem 1.85rem;
        border: 0.077rem solid rgba(192, 200, 205, 0.52);
    }

    /* --- Двухколоночная сетка → одна колонка --- */
    .product-detail__grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    /* --- Галерея --- */
    .product-gallery__viewport {
        min-height: 39.7rem;
    }

    .product-gallery__image {
        max-height: 39.7rem;
    }

    .product-gallery__arrow {
        width: 3.9rem;
        height: 3.9rem;
    }

    .product-gallery__arrow svg {
        width: 1.8rem;
        height: 1.6rem;
    }

    .product-gallery__arrow--prev {
        left: 0;
    }

    .product-gallery__arrow--next {
        right: 0;
    }

    .product-gallery__counter {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    /* --- Лейбл «ХАРАКТЕРИСТИКИ» --- */
    .product-info__section-label {
        font-size: 1.2rem;
        margin-bottom: 1.7rem;
    }

    /* --- Переключатель объёмов --- */
    .volume-switcher {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        margin-bottom: 3rem;
    }

    .volume-switcher__label {
        font-size: 1.2rem;
        line-height: normal;
        letter-spacing: -0.024rem;
    }

    .volume-switcher__tabs {
        border-radius: 0.7rem;
    }

    .volume-switcher__tab {
        min-width: 8rem;
        height: 3.6rem;
        padding: 0 1.6rem;
        font-size: 1.2rem;
        border-radius: 0.7rem;
    }


    /* --- Таблица характеристик --- */
    .product-specs__row {
        gap: 4.8rem;
        padding: 1rem 0;
    }

    .product-specs__key {
        width: 16.3rem;
        flex-shrink: 0;
        flex: none;
        font-size: 1.2rem;
        line-height: normal;
        letter-spacing: -0.024rem;
    }

    .product-specs__value {
        font-size: 1.2rem;
        letter-spacing: -0.036rem;
    }

    .product-specs__value-group {
        gap: 1.5rem;
    }

    .product-specs__icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .product-specs__download .product-specs__icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* --- Блок чертежа --- */
    .product-drawing {
        border-radius: 0.6rem;
        min-height: 31.6rem;
        margin-top: 2.5rem;
        padding: 2rem;
    }

    /* --- Кнопки действий --- */
    .product-actions {
        flex-direction: column;
        margin-top: 2.5rem;
        gap: 1rem;
    }

    .product-actions__btn {
        height: 6rem;
        padding: 1.7rem 2rem;
        border-radius: 0.9rem;
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
    }

    .product-actions__btn--order,
    .product-actions__btn--call {
        max-width: 100%;
    }

    /* --- Похожие изделия --- */
    .similar-products {
        margin-top: 5rem;
    }

    .similar-products__title {
        font-size: 2.4rem;
    }

    .similar-products__header {
        margin-bottom: 3rem;
    }

    .similar-products__nav-btn {
        width: 3.6rem;
        height: 3.6rem;
    }

    .similar-products__nav-btn svg {
        width: 0.8rem;
        height: 1.4rem;
    }

    .similar-products__track {
        margin-left: -1.6rem;
        margin-right: -1.6rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .similar-products__track>.catalog-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}

/* =========================================
   СТЕКЛЯННЫЙ КУРСОР: скрытие системного курсора над галереей
========================================= */

@media (min-width: 1200px) {
    .product-gallery__slide {
        cursor: none;
    }
}

/* Переопределение курсора для светлой страницы товара */
.product-detail .glass-cursor__text {
    color: #000000;
}

.product-detail .glass-cursor {
    z-index: 1;
    background: rgba(180, 185, 190, 0.2);
    /*border: 1px solid rgba(242, 242, 242, 0.35);*/
}

/* =========================================
   ЛАЙТБОКС-МОДАЛКА ГАЛЕРЕИ
========================================= */

.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.gallery-modal__img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.4rem;
    transform: scale(0.8);
    will-change: transform;
}

.gallery-modal__close {
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 10;
}

.gallery-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.gallery-modal__close svg {
    width: 2.4rem;
    height: 2.4rem;
}

/* Блокировка скролла при открытой модалке */
body.body-lock {
    overflow: hidden;
}

/* =========================================
   СТРАНИЦА КОНТАКТОВ
========================================= */

/* --- Обертка страницы --- */
.contacts-page {
    position: relative;
    background-color: #f9f9f9;
    min-height: 100vh;
}

/* --- Модификатор шапки: белый фон (без градиентов) --- */
.catalog-header--white {
    /*background-color: #ffffff;*/
}

.catalog-header__title--dark {
    color: #000000;
    font-size: 12.5rem;
    letter-spacing: -0.375rem;
}

/* --- Хлебные крошки: тёмная тема (для светлого фона) --- */
.breadcrumbs--dark .breadcrumbs__link {
    color: #000000;
}

.breadcrumbs--dark .breadcrumbs__item+.breadcrumbs__item::before {
    background-color: rgba(0, 0, 0, 0.25);
}

.breadcrumbs--dark .breadcrumbs__item--current .breadcrumbs__text {
    color: #d8dee2;
}

/* --- Общая сетка контента: 2 колонки --- */
.contacts-page__grid {
    position: relative;
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem 13rem;
    display: flex;
    justify-content: space-between;
}

/* --- Левая колонка (sticky, фиксированная высота = высота карты) --- */
.contacts-page__left {
    width: 65rem;
    height: 86.5rem;
    flex-shrink: 0;
    position: sticky;
    top: 5rem;
    z-index: 1;
}

/* --- Карта-подложка (breakout-фон, вылезает влево и вправо под правую колонку) --- */
.contacts-page__map-bleed {
    position: absolute;
    /*top: 7rem;*/
    /*right: -55rem;*/
    right: -49rem;
    width: 100vw;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    /*bottom: 3rem;*/
    bottom: 1rem;
}

/* Общие стили для верхнего и нижнего блендинг-слоя */
.contacts-page__map-bleed::before,
.contacts-page__map-bleed::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 18rem;
    /* Высота зоны растворения и блюра (можно крутить) */
    z-index: 3;
    /* Встаем строго поверх картинки карты */
    pointer-events: none;
    /* Пропускаем клики */
}

/* Мягкий уход в цвет фона + размытие СВЕРХУ */
.contacts-page__map-bleed::before {
    top: 0;
    background: linear-gradient(to bottom, #f9f9f9 0%, rgba(249, 249, 249, 0.7) 40%, rgba(249, 249, 249, 0) 100%);
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    /* Градиентная маска, чтобы сам блюр тоже плавно растворялся, а не обрывался резко */
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* Мягкий уход в цвет фона + размытие СНИЗУ */
.contacts-page__map-bleed::after {
    bottom: 0;
    background: linear-gradient(to top, #f9f9f9 0%, rgba(249, 249, 249, 0.7) 40%, rgba(249, 249, 249, 0) 100%);
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
}

/* Мягкий уход в цвет фона + размытие СПРАВА */
.contacts-page__map-fade-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 30rem;
    height: 100%;
    z-index: 3;
    pointer-events: none;

    /* Плавный уход в цвет фона #f9f9f9 слева направо */
    background: linear-gradient(to right, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.7) 60%, #f9f9f9 100%);

    /* Блюр фона под градиентом */
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);

    /* Маска для плавного растворения самого блюра */
    mask-image: linear-gradient(to right, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
}

.contacts-page__map-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /*object-fit: cover;*/
    object-position: right center;
}

/* Красная точка на карте (абсолютная, привязана к .contacts-page__left) */
.contacts-page__map-pin {
    position: absolute;
    top: 44rem;
    left: 12rem;
    width: 1.4rem;
    height: 1.4rem;
    background-color: #FF0600;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 0.4rem rgba(255, 6, 0, 0.3);
}

/* --- Красная карточка «Мастера стекла» поверх карты (нормальный поток) --- */
.contacts-page__video-card {
    position: relative;
    z-index: 2;
    margin-top: 16.3rem;
    margin-left: 11rem;
    width: 42.3rem;
    height: 25.5rem;
    border-radius: 2rem;
    overflow: hidden;
    background: linear-gradient(135deg, #FF4500 0%, #FF6A00 50%, #FF0600 100%);
}

.contacts-page__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.contacts-page__video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.85) 0%, rgba(255, 106, 0, 0.7) 50%, rgba(255, 6, 0, 0.85) 100%);
    z-index: 2;
}

.contacts-page__video-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 75%;
    padding: 3rem;
}

.contacts-page__video-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contacts-page__video-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 1.4;
    color: #ffffff;
}

.contacts-page__video-logo {
    width: 8.1rem;
    height: 8.1rem;
    flex-shrink: 0;
}

.contacts-page__video-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /*gap: 0rem;
    margin-bottom: 3rem;*/
}

.contacts-page__video-company {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0;
    font-feature-settings: 'zero';
}

.contacts-page__video-location {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1;
    color: #ffffff;
    /*text-transform: lowercase;*/
    margin: 0;
    letter-spacing: 0;
    font-feature-settings: 'zero';
}

/* --- Правая колонка: Карточки контактов (поверх карты) --- */
.contacts-page__right {
    width: 105.7rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* --- Стеклянная карточка контакта --- */
.contacts-page__card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(0.6rem);
    border-radius: 2.6rem;
    padding: 6.3rem 5.3rem;
    min-height: 24.7rem;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.contacts-page__card:hover {
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.07);
}

.contacts-page__card--main {
    min-height: 39.7rem;
}

/* Заголовок карточки */
.contacts-page__card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 3.6rem;
    letter-spacing: -0.032rem;
    color: #000000;
    margin: 0 0 3rem 0;
}

/* Тело карточки: информация прижата вправо */
.contacts-page__card-body {
    display: flex;
    align-items: stretch;
    flex: 1;
}

/* Вертикальная разделительная линия — скрыта (отсутствует в дизайне) */
.contacts-page__card-divider {
    display: none;
}

/* Информационный блок (телефон, почта, адрес) — прижат к правому краю */
.contacts-page__card-info {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    width: 47.2rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Группа: метка + значение */
.contacts-page__card-group {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

/* Метка (ТЕЛЕФОН, ПОЧТА, АДРЕС) */
.contacts-page__card-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: -0.028rem;
    color: #c0c8cd;
    text-transform: uppercase;
}

/* Значение (телефон, почта, адрес) */
.contacts-page__card-value {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 1.4;
    color: #000000;
    margin: 0;
    text-decoration: none;
    border-bottom: none;
    word-break: break-word;
}

/* Красный цвет для телефонов и почт */
.contacts-page__card-value--red {
    color: #FF0600;
    width: fit-content;
}

/* Адрес — обычный текст (Inter Regular 18px) */
.contacts-page__card-group p.contacts-page__card-value {
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    letter-spacing: -0.036rem;
    color: #000000;
}

/* Ссылка «Карта проезда» */
.contacts-page__card-link {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.4rem;
    letter-spacing: -0.036rem;
    color: #FF0601;
    text-decoration: none;
    border-bottom: none;
    width: fit-content;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Страница контактов
========================================= */
@media (max-width: 1199px) {

    /* --- Обёртка: обрезаем горизонтальный overflow от breakout-карты --- */
    .contacts-page {
        overflow-x: clip;
    }

    /* --- Сетка: одна колонка, без gap (управляем margin) --- */
    .contacts-page__grid {
        flex-direction: column;
        padding: 0 1.6rem 6rem;
        gap: 0;
    }

    /* --- Левая колонка: sticky, фиксируется при прокрутке --- */
    .contacts-page__left {
        width: 100%;
        height: auto;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* --- Карта-подложка: полноширинный breakout --- */
    .contacts-page__map-bleed {
        position: relative;
        right: auto;
        /*left: -3.6rem;*/
        left: -21.5rem;
        /*width: calc(100% + 36.2rem);*/
        width: calc(100% + 50.2rem);
        height: 50rem;
        z-index: 0;
        bottom: auto;
    }

    /* --- Размытие карты СВЕРХУ: мобилка --- */
    .contacts-page__map-bleed::before {
        height: 17rem;
        background: linear-gradient(to bottom, #f9f9f9 0%, rgba(249, 249, 249, 0.7) 40%, rgba(249, 249, 249, 0) 100%);
        backdrop-filter: blur(1rem);
        -webkit-backdrop-filter: blur(1rem);
        mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    }

    /* --- Размытие карты СНИЗУ: мобилка --- */
    .contacts-page__map-bleed::after {
        height: 17rem;
        background: linear-gradient(to top, #f9f9f9 0%, rgba(249, 249, 249, 0.7) 40%, rgba(249, 249, 249, 0) 100%);
        backdrop-filter: blur(1rem);
        -webkit-backdrop-filter: blur(1rem);
        mask-image: linear-gradient(to top, black 0%, transparent 100%);
        -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    }

    /* --- Размытие справа: уменьшенная ширина для мобилки --- */
    .contacts-page__map-fade-right {
        width: 12rem;
    }

    /* --- Видео-карточка: абсолютная позиция поверх карты для лёгкой настройки --- */
    .contacts-page__video-card {
        position: absolute;
        top: 10rem;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        width: 24rem;
        height: 14.5rem;
        border-radius: 1.4rem;
    }

    .contacts-page__video-content {
        padding: 1.6rem;
        height: 100%;
    }

    .contacts-page__video-title {
        font-size: 1.6rem;
    }

    .contacts-page__video-logo {
        width: 4.5rem;
        height: 4.5rem;
    }

    .contacts-page__video-company,
    .contacts-page__video-location {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }

    .contacts-page__video-bottom {
        gap: 0.1rem;
        margin-bottom: 3rem;
    }

    /* --- Красная точка на карте: репозиция для мобилки --- */
    .contacts-page__map-pin {
        top: 26rem;
        left: 6rem;
        width: 1rem;
        height: 1rem;
        box-shadow: 0 0 0 0.3rem rgba(255, 6, 0, 0.3);
    }

    /* --- Правая колонка: наезжает поверх sticky-блока --- */
    .contacts-page__right {
        width: 100%;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        gap: 1.2rem;
        margin-top: -5rem;
    }

    /* --- Карточки контактов --- */
    .contacts-page__card {
        padding: 3rem 2.4rem;
        min-height: auto;
        border-radius: 2rem;
    }

    .contacts-page__card--main {
        min-height: auto;
    }

    .contacts-page__card-title {
        font-size: 2.4rem;
        line-height: 3rem;
        margin-bottom: 2rem;
    }

    .contacts-page__card-info {
        width: 100%;
        margin-left: 0;
        gap: 2.4rem;
    }

    .contacts-page__card-value {
        font-size: 2rem;
    }

    .contacts-page__card-group p.contacts-page__card-value {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .contacts-page__card-link {
        font-size: 1.5rem;
    }

    /* --- Шапка контактов: заголовок по макету Figma 380px --- */
    .catalog-header--white {
        padding-top: 11.6rem;
        padding-left: 1.8rem;
        padding-right: 1.8rem;
        padding-bottom: 0;
        gap: 4rem;
    }

    .catalog-header__title--dark {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        white-space: normal;
    }

    /* --- Хлебные крошки (тёмная тема) на мобилке --- */
    .catalog-header--white .breadcrumbs {
        margin-top: 0;
        margin-left: 0;
    }

    .catalog-header--white .breadcrumbs__item {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    .catalog-header--white .breadcrumbs__item+.breadcrumbs__item::before {
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 1.6rem;
    }
}

/* =========================================
   СТРАНИЦА НОВОСТЕЙ
========================================= */

/* --- Обертка страницы --- */
.news-page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background-color: #f9f9f9;
}

/* --- Фоновый градиент (абсолютный, под контентом) --- */
.news-page__gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 143.8rem;
    z-index: 0;
    background: linear-gradient(74.57deg, rgb(255, 166, 49) 13.76%, rgb(255, 166, 49) 17.13%, rgb(255, 6, 0) 50.83%);
}

/* Диагональный белый оверлей поверх градиента */
.news-page__gradient-overlay {
    position: absolute;
    top: 9rem;
    left: -35.3rem;
    width: 271.2rem;
    height: 171.1rem;
    background: linear-gradient(177.78deg, rgb(249, 249, 249) 51.7%, rgba(249, 249, 249, 0) 95.32%);
    transform: rotate(170deg);
    transform-origin: center center;
}

/* --- Контентная зона (фильтр + сетка) --- */
.news-page__content {
    position: relative;
    z-index: 1;
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem 12rem;
}

/* =========================================
   ФИЛЬТР НОВОСТЕЙ
========================================= */

.news-filter {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 3rem;
}

.news-filter__dropdown {
    position: relative;
}

.news-filter__toggle {
    display: flex;
    align-items: center;
    gap: 13.5rem;
    height: 6.7rem;
    padding: 0 3.2rem;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(0.6rem);
    -webkit-backdrop-filter: blur(0.6rem);
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.news-filter__toggle:hover {
    background: rgba(255, 255, 255, 0.45);
}

.news-filter__toggle-text {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    font-feature-settings: 'zero';
}

.news-filter__toggle-icon {
    width: 2rem;
    height: 2rem;
    color: #000000;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Состояние открытого dropdown */
.news-filter__dropdown--open .news-filter__toggle-icon {
    transform: rotate(180deg);
}

.news-filter__options {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 100%;
    list-style: none;
    margin: 0;
    padding: 1rem 0;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 10;
}

.news-filter__dropdown--open .news-filter__options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.news-filter__option {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    color: #929292;
    padding: 1.4rem 3.2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.news-filter__option:hover {
    background: #f5f5f5;
}

.news-filter__option--active {
    color: #000000;
}

/* =========================================
   СЕТКА НОВОСТЕЙ
========================================= */

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
}

/* =========================================
   КАРТОЧКА НОВОСТИ
========================================= */

.news-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1rem;
    height: 40.9rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /*transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.04);*/
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-shadow: none;
}

.news-card:hover {
    box-shadow: none;
    transform: translateY(-0.2rem);
    background-color: #EDEFF1;
}

/* --- Верхняя часть карточки: категория + превью --- */
.news-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4.9rem 5.7rem 0;
}

/* --- Категория: буллет + название --- */
.news-card__category {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.news-card__bullet {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.news-card__category-name {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    font-feature-settings: 'zero';
}

/* --- Превью-изображение --- */
.news-card__preview {
    width: 16.9rem;
    height: 8.8rem;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.news-card__preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Нижняя часть карточки: заголовок --- */
.news-card__bottom {
    padding: 0 6.6rem 6rem;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

.news-card__title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.15;
    letter-spacing: -0.052rem;
    color: #000000;
    margin: 0;
}

/* =========================================
   СТРАНИЦА НОВОСТЕЙ — МОБИЛЬНАЯ АДАПТАЦИЯ
========================================= */

@media (max-width: 1199px) {

    /* --- Шапка новостей: catalog-header по макету Figma 380px --- */
    .news-page .catalog-header {
        padding-bottom: 0;
        gap: 4rem;
    }

    .news-page .catalog-header__title {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
    }

    .news-page .catalog-header .breadcrumbs {
        margin-top: 0;
        margin-left: 0;
    }

    .news-page .catalog-header .breadcrumbs__item {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    .news-page .catalog-header .breadcrumbs__item+.breadcrumbs__item::before {
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 1.6rem;
    }

    /* --- Градиент --- */
    .news-page__gradient-bg {
        height: 60rem;
    }

    .news-page__gradient-overlay {
        top: 4rem;
        left: -10rem;
        width: 150rem;
        height: 90rem;
    }

    /* --- Контентная зона --- */
    .news-page__content {
        padding: 0 1.6rem 6rem;
    }

    /* --- Фильтр --- */
    .news-filter {
        justify-content: flex-start;
        margin-bottom: 2rem;
        margin-top: 6rem;
    }

    .news-filter__toggle {
        gap: 6.9rem;
        height: 4rem;
        padding: 0.46rem 1.83rem;
        border-radius: 0.56rem;
    }

    .news-filter__toggle-text {
        font-size: 1.2rem;
        letter-spacing: 0.012rem;
    }

    .news-filter__toggle-icon {
        width: 1.06rem;
        height: 1.36rem;
    }

    .news-filter__option {
        font-size: 1.3rem;
        padding: 1rem 1.83rem;
    }

    /* --- Сетка: 1 колонка на мобилке --- */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    /* --- Карточка --- */
    .news-card {
        height: 23rem;
        border-radius: 0.6rem;
    }

    .news-card__top {
        padding: 3.2rem 3.4rem 0;
    }

    .news-card__category {
        gap: 1rem;
    }

    .news-card__category-name {
        font-size: 1.4rem;
    }

    .news-card__bullet {
        width: 0.8rem;
        height: 0.8rem;
    }

    .news-card__preview {
        width: 10.1rem;
        height: 5.3rem;
        border-radius: 0.3rem;
    }

    .news-card__bottom {
        padding: 0 3.2rem 2.4rem;
    }

    .news-card__title {
        font-size: 1.6rem;
        line-height: 1;
        letter-spacing: -0.032rem;
    }
}

/* =========================================
   ДЕТАЛЬНАЯ СТРАНИЦА НОВОСТИ
========================================= */

.news-detail {
    position: relative;
    max-width: 192rem;
    margin: 0 auto;
    padding: 15rem 4rem 10rem;
}

/* --- Верхняя навигация: Кнопка «Назад» + хлебные крошки --- */
.news-detail__nav {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 5rem;
}

/* Круглая кнопка «Назад» — аналогично product-detail */
.news-detail__back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid #D8DEE2;
    background: transparent;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.3s ease;
}

.news-detail__back-btn svg {
    pointer-events: none;
    transform: translateX(-0.3rem);
}

.news-detail__back-btn svg path {
    transition: stroke 0.3s ease;
}

@media (min-width: 1200px) {
    .news-detail__back-btn:hover {
        border-color: #000000;
    }

    .news-detail__back-btn:hover svg path {
        stroke: #000000;
    }
}

/* --- Главный заголовок (H1) — под крошками, над колонками --- */
.news-detail__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 7.2rem;
    line-height: 7.8rem;
    letter-spacing: -0.216rem;
    color: #000000;
    margin: 0;
    margin-bottom: 7rem;
    max-width: 171.4rem;
}

/* --- Двухколоночная сетка: 1:3 --- */
.news-detail__grid {
    display: grid;
    /*grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);*/
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 21rem;
}

/* --- Левая колонка (Sticky) --- */
.news-detail__left {
    position: sticky;
    top: 10rem;
    align-self: stretch;
    max-height: calc(100vh - 15rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Категория (Тег) — цветной буллет + название */
.news-detail__category {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.news-detail__bullet {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.news-detail__category-name {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    font-feature-settings: 'zero';
}

/* Дата публикации — внизу колонки */
.news-detail__date-block {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.news-detail__date-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: -0.028rem;
    color: #c0c8cd;
    text-transform: uppercase;
}

.news-detail__date-value {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: #000000;
}

/* --- Правая колонка (Контент) --- */
.news-detail__right {
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
    max-width: 90rem;
    align-self: start;
}

/* Текст новости */
.news-detail__text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 3rem;
    color: #000000;
}

.news-detail__text p {
    margin: 0 0 0.8rem;
}

.news-detail__text p:last-child {
    margin-bottom: 0;
}

/* Ссылка на источник (опциональный блок) */
.news-detail__source {
    /* Блок не ломает верстку, если отсутствует */
}

.news-detail__source-link {
    display: inline-flex;
    align-items: center;
    gap: 4rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.news-detail__source-link:hover {
    opacity: 0.65;
}

.news-detail__source-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: #C0C8CD;
}

/* --- Навигация по галерее (стрелки в правой колонке) --- */
.news-detail__gallery-nav {
    display: flex;
    align-items: center;
    gap: 1.7rem;
    justify-content: flex-end;
    width: 100.8rem;
}

.news-detail__gallery-arrow {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid #D8DEE2;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.news-detail__gallery-arrow svg {
    pointer-events: none;
}

.news-detail__gallery-arrow--prev svg {
    transform: translateX(-0.3rem);
}

.news-detail__gallery-arrow--next svg {
    transform: translateX(0.3rem);
}

.news-detail__gallery-arrow svg path {
    transition: stroke 0.3s ease;
}

@media (min-width: 1200px) {
    .news-detail__gallery-arrow:hover {
        border-color: #000000;
    }

    .news-detail__gallery-arrow:hover svg path {
        stroke: #000000;
    }
}

/* =========================================
   ГАЛЕРЕЯ НОВОСТИ (горизонтальный скролл)
========================================= */

.news-detail__gallery {
    position: relative;
    /*margin-top: 4rem;*/
    /* Пробиваем правый край контейнера до конца экрана */
    margin-right: calc(-50vw + 50%);
    padding-right: calc(50vw - 50%);
    overflow: hidden;
    width: 110.8rem;
}

.news-detail__gallery-track {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    cursor: grab;
}

.news-detail__gallery-track::-webkit-scrollbar {
    display: none;
}

.news-detail__gallery-track.is-dragging {
    cursor: grabbing;
}

/* Элементы галереи */
.news-detail__gallery-item {
    flex-shrink: 0;
    height: 52.1rem;
    overflow: hidden;
    border-radius: 0;
    user-select: none;
    -webkit-user-select: none;
}

.news-detail__gallery-item--portrait {
    width: 40.6rem;
}

.news-detail__gallery-item--landscape {
    width: 71.8rem;
}

.news-detail__gallery-item--medium {
    width: 49rem;
}

.news-detail__gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* =========================================
   ПОХОЖИЕ ПУБЛИКАЦИИ
========================================= */

.similar-news {
    margin-top: 10rem;
    padding-top: 5rem;
}

.similar-news__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 5rem;
}

.similar-news__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 4.9rem;
    line-height: 5.28rem;
    letter-spacing: -0.147rem;
    color: #000000;
    margin: 0;
    max-width: 71rem;
}

.similar-news__arrows {
    display: flex;
    align-items: center;
    gap: 1.7rem;
}

.similar-news__arrow {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid #D8DEE2;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.similar-news__arrow svg {
    pointer-events: none;
}

.similar-news__arrow--prev svg {
    transform: translateX(-0.3rem);
}

.similar-news__arrow--next svg {
    transform: translateX(0.3rem);
}

.similar-news__arrow svg path {
    transition: stroke 0.3s ease;
}

@media (min-width: 1200px) {
    .similar-news__arrow:hover {
        border-color: #000000;
    }

    .similar-news__arrow:hover svg path {
        stroke: #000000;
    }
}

/* Горизонтальный слайдер карточек новостей */
.similar-news__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    margin-left: -4rem;
    margin-right: -4rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

.similar-news__track::-webkit-scrollbar {
    display: none;
}

.similar-news__track.is-dragging {
    cursor: grabbing;
}

.similar-news__track>.news-card {
    flex: 0 0 calc((100% - (1.5rem * 3)) / 4);
    min-width: 0;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ: Детальная новость
========================================= */

@media (max-width: 1199px) {
    .news-detail {
        padding: 12rem 1.6rem 5rem;
    }

    /* Скрываем кнопку «Назад» на мобильном */
    .news-detail__back-btn {
        display: none;
    }

    /* Навигация: убираем лишние отступы */
    .news-detail__nav {
        margin-bottom: 0;
        gap: 0;
    }

    /* Хлебные крошки: сброс базовых отступов */
    .news-detail__nav .breadcrumbs {
        margin-top: 0;
        margin-left: 0;
    }

    /* Хлебные крошки: уменьшенный шрифт */
    .news-detail__nav .breadcrumbs__item {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    /* Хлебные крошки: отступ между точками-разделителями */
    .news-detail__nav .breadcrumbs__item+.breadcrumbs__item::before {
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 1.6rem;
    }

    /* Хлебные крошки: скрываем текущий пункт (название новости) */
    .news-detail__nav .breadcrumbs__item--current {
        display: none;
    }

    /* Заголовок: точные значения из Figma (H4: 24px / 32px) */
    .news-detail__title {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: -0.024rem;
        margin-top: 5.4rem;
        margin-bottom: 3.3rem;
    }

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

    /* Мета-строка: дата + категория в горизонтальную линию */
    .news-detail__left {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6.8rem;
    }

    .news-detail__category {
        order: 1;
    }

    .news-detail__date-block {
        order: -1;
        gap: 0.8rem;
    }

    .news-detail__date-label {
        font-size: 1.2rem;
        line-height: normal;
        letter-spacing: 0;
    }

    .news-detail__date-value {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
    }

    .news-detail__category {
        gap: 0.95rem;
    }

    .news-detail__bullet {
        width: 0.775rem;
        height: 0.775rem;
    }

    .news-detail__category-name {
        font-size: 1.4rem;
    }

    /* Правая колонка */
    .news-detail__right {
        gap: 4rem;
        max-width: 100%;
        min-width: 0;
    }

    .news-detail__text {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
    }

    .news-detail__text p {
        margin: 0 0 2rem;
    }

    .news-detail__source-link {
        font-size: 1.4rem;
        gap: 4rem;
    }

    .news-detail__source-icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    /* Галерея: full-bleed от края до края экрана */
    .news-detail__gallery {
        width: calc(100% + 3.2rem);
        margin-left: -1.6rem;
        margin-right: 0;
        padding-right: 0;
        overflow: hidden;
    }

    .news-detail__gallery-track {
        gap: 2.4rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .news-detail__gallery-item {
        height: 29.1rem;
    }

    .news-detail__gallery-item--portrait {
        width: 22.7rem;
    }

    .news-detail__gallery-item--landscape {
        width: 40.1rem;
    }

    .news-detail__gallery-item--medium {
        width: 27.3rem;
    }

    /* Стрелки галереи */
    .news-detail__gallery-nav {
        width: 100%;
        gap: 1.7rem;
    }

    .news-detail__gallery-arrow {
        width: 3.9rem;
        height: 3.9rem;
    }

    /* Фоновый блок — прячем на мобилке */
    .news-detail__bg-block {
        display: none;
    }

    /* Похожие публикации */
    .similar-news {
        margin-top: 5rem;
    }

    .similar-news__header {
        margin-bottom: 2.4rem;
    }

    .similar-news__title {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: -0.024rem;
    }

    /* Стрелки скрыты на мобилке — навигация свайпом */
    .similar-news__arrows {
        display: none;
    }

    .similar-news__track {
        margin-left: -1.6rem;
        margin-right: -1.6rem;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
        gap: 2.4rem;
    }

    .similar-news__track>.news-card {
        flex: 0 0 28.9rem;
        height: 24.8rem;
        border-radius: 0.6rem;
    }
}

/* =========================================
   СТРАНИЦА ПРОИЗВОДСТВА: Hero-блок
========================================= */

/* --- Главная обёртка секции --- */
.production-hero {
    position: relative;
    /* overflow: hidden УБРАН — он ломает sticky для дочерних элементов */
    width: 100%;
}

/* --- Sticky-обёртка фона (видео + оверлей) --- */
.production-hero__bg {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 0;
    overflow: hidden;
}

/* --- Фоновое видео (абсолютно внутри sticky-обёртки) --- */
.production-hero__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Затемняющий градиент поверх видео --- */
.production-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.25) 51.67%);
    pointer-events: none;
}

/* --- Контентная часть (поверх sticky-фона) --- */
.production-hero__content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 3.5rem;
    padding-right: 5rem;
    padding-bottom: 30vh;
    padding-top: 4vh;
    /* защита от наскока .js-overlap-section */
    margin-top: -100vh;
    /* поднимаем контент поверх sticky-фона */
}

/* --- Хлебные крошки (переиспользуем .breadcrumbs__*) --- */
.production-hero__breadcrumbs {
    margin-bottom: 3.2rem;
    margin-left: 0rem;
}

.production-hero__breadcrumbs .breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.production-hero__breadcrumbs .breadcrumbs__item {
    display: flex;
    align-items: center;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    font-feature-settings: 'ss04';
}

.production-hero__breadcrumbs .breadcrumbs__link {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.production-hero__breadcrumbs .breadcrumbs__link:hover {
    opacity: 0.7;
}

.production-hero__breadcrumbs .breadcrumbs__item+.breadcrumbs__item::before {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 1.2rem;
    flex-shrink: 0;
}

.production-hero__breadcrumbs .breadcrumbs__item--current .breadcrumbs__text {
    color: rgba(255, 255, 255, 0.3);
}

/* --- Заголовок --- */
.production-hero__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5rem;
    line-height: 1;
    letter-spacing: -0.375rem;
    color: #ffffff;
    margin: 0 0 3.2rem;
}

/* --- Описание --- */
.production-hero__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    color: #ffffff;
    margin: 0;
    max-width: 63.2rem;
    margin-bottom: 8rem;
    margin-left: 1rem;
}

/* --- Кнопка «Рождение стекла» --- */
.production-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #000000;
    padding: 2.7rem 4.5rem;
    border-radius: 1.3rem;
    text-decoration: none;
    outline: none;
    border: none;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.production-hero__btn:focus,
.production-hero__btn:active {
    outline: none;
    border: none;
}



.production-hero__btn-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: #000000;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}



/* --- Мобильная адаптация --- */
@media (max-width: 1199px) {
    .production-hero__bg {
        height: 75.5rem;
    }

    .production-hero__content {
        min-height: 66.5rem;
        margin-top: -92.5rem;
        padding-left: 1.8rem;
        padding-right: 1.8rem;
        padding-bottom: 33rem;
        justify-content: flex-end;
    }

    .production-hero__breadcrumbs {
        margin-left: 0;
        margin-bottom: 6rem;
    }

    .production-hero__breadcrumbs .breadcrumbs__item {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    .production-hero__breadcrumbs .breadcrumbs__item+.breadcrumbs__item::before {
        margin: 0 1.6rem;
    }

    .production-hero__title {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        margin-bottom: 3.2rem;
    }

    .production-hero__desc {
        font-size: 1.6rem;
        line-height: normal;
        letter-spacing: -0.032rem;
        max-width: 90%;
        margin-bottom: 6.4rem;
        margin-left: 0;
    }

    .production-hero__btn {
        padding: 1.7rem 5.8rem;
        border-radius: 0.9rem;
        height: 2rem;
    }

    .production-hero__btn-text {
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
    }
}

/* =========================================
   БЛОК «ЭТАПЫ ПРОИЗВОДСТВА» (prod-steps)
   Sticky Stacking Cards — каждый слайд
   наезжает поверх предыдущего при скролле
========================================= */

/* --- Главная обёртка секции --- */
.prod-steps {
    position: relative;
    width: 100%;
    background-color: #111111;
}

/* --- Слайд-карточка (sticky stacking) --- */
.prod-steps__slide {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* z-index задаётся inline через PHP: style="z-index: N" */
}

/* Дополнительный скролл-раннуэй после последнего слайда —
   sticky-контент держится на экране пока прокручивается этот блок */
.prod-steps::after {
    content: '';
    display: block;
    height: 80vh;
}

/* --- Внутренняя обёртка слайда (цель для transform-анимации наскока) --- */
.prod-steps__slide-body {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;
}

/* --- Фоновое видео внутри каждого слайда --- */
.prod-steps__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* --- Затемняющий оверлей поверх видео --- */
.prod-steps__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 1;
}

/* --- Контентная сетка слайда (поверх видео) --- */
.prod-steps__slide-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 6rem;
    width: 100%;
    height: 100%;
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    /* Вертикальное центрирование контента */
    align-items: center;
}

/* --- Левая колонка: номер шага --- */
.prod-steps__number {
    flex-shrink: 0;
    width: 69rem;
    padding-right: 5rem;
    padding-left: 8rem;
    padding-bottom: 25rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 22rem;
    line-height: 0.85;
    letter-spacing: -1.2rem;
    color: #ffffff;
    user-select: none;
}

/* --- Правая колонка: информация --- */
.prod-steps__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18.2rem;
    padding-top: 8rem;
    max-width: 72rem;
}

/* --- Заголовок шага --- */
.prod-steps__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 5.4rem;
    line-height: 1.1;
    letter-spacing: -0.16rem;
    color: #ffffff;
    margin: 0;
}

/* --- Разделительная пунктирная линия по центру слайда --- */
.prod-steps__separator {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.3rem;
    z-index: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0.15rem, transparent 0.15rem);
    background-size: 1.2rem 0.3rem;
}

/* --- Описание шага --- */
.prod-steps__text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.55;
    letter-spacing: -0.022rem;
    color: rgba(255, 255, 255, 1);
    margin: 0;
}

/* --- Мобильная адаптация (по макету Figma 380px) --- */
@media (max-width: 1199px) {

    /* Увеличиваем sticky-дистанцию: 120vh в потоке, 100vh визуально */
    .prod-steps__slide {
        height: 120vh;
    }

    .prod-steps__slide-body {
        height: 100vh;
    }

    /* Уменьшаем раннуэй после последнего слайда */
    .prod-steps::after {
        height: 20vh;
    }

    /* Контентная сетка: вертикальная колонка, контент по центру */
    .prod-steps__slide-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 15.3rem;
        padding: 0 2rem;
        max-width: none;
        top: 12rem;
    }

    /* Номер шага: крупный, без прозрачности */
    .prod-steps__number {
        width: 100%;
        font-size: 12.8rem;
        font-weight: 400;
        line-height: 13.2rem;
        letter-spacing: -1.024rem;
        opacity: 1;
        padding: 0;
    }

    /* Информация: gap по Figma */
    .prod-steps__info {
        padding-top: 0;
        gap: 3.2rem;
        max-width: 90%;
    }

    /* Заголовок шага */
    .prod-steps__title {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 3.2rem;
        letter-spacing: -0.024rem;
    }

    /* Описание шага */
    .prod-steps__text {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 2rem;
        letter-spacing: -0.028rem;
    }

    .prod-steps__separator {
        top: 40%;
        height: 0.2rem;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0.1rem, transparent 0.1rem);
        background-size: 0.8rem 0.2rem;
    }

}

/* =========================================
   БЛОК «МАСТЕРСТВО В ДЕЙСТВИИ / ПРЕИМУЩЕСТВА»
   .production-philosophy
========================================= */
/* --- Корневой контейнер с градиентным фоном --- */
.production-philosophy {
    background: linear-gradient(75.54deg, #FFA631 17.09%, #FFA631 22.42%, #FF0600 75.71%);
    /*border-radius: 1.5rem;*/
    padding: 16.9rem 0 40rem;
    overflow: hidden;
}

/* --- Внутренняя обёртка (центрирование + отступы) --- */
.production-philosophy__inner {
    max-width: 184.2rem;
    margin: 0 auto;
    padding: 0 3.8rem;
    display: flex;
    flex-direction: column;
}

/* =========================================
   SECTION: HEADER (лейбл + заголовок H2)
========================================= */
.production-philosophy__label {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.64);
    margin: 0 0 3.2rem;
    padding-left: 1.5rem;
}

.production-philosophy__title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 7rem;
    line-height: 7.2rem;
    letter-spacing: -0.14rem;
    color: #ffffff;
    margin: 0 0 8rem;
    max-width: 152.2rem;
}

/* =========================================
   SECTION: TEAM (фотографии + описание)
========================================= */
.production-philosophy__team {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10rem;
    position: relative;
}

/* Левая колонка: стрелки сверху + фотографии снизу */
.production-philosophy__team-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Занимает всю ширину — правая колонка наложится поверх */
    flex: 1;
    min-width: 0;
    max-width: 95rem;
}

/* Навигационные стрелки (паттерн exclusive-slider__nav-btn) */
.production-philosophy__arrows {
    display: flex;
    align-items: center;
    gap: 1.7rem;
}

.production-philosophy__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.3s ease;
}

.production-philosophy__arrow svg {
    pointer-events: none;
}

.production-philosophy__arrow--prev svg {
    transform: translateX(-0.3rem);
}

.production-philosophy__arrow--next svg {
    transform: translateX(0.3rem);
}

.production-philosophy__arrow svg path {
    stroke: rgba(255, 255, 255, 0.3);
    transition: stroke 0.3s ease;
}

/* Фоллбэк: SVG-стрелки через CSS (на случай если Bitrix вырезает inline SVG) */
.production-philosophy__arrow--prev::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1.8rem;
    background: url("data:image/svg+xml,%3Csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1 9L9 17' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateX(-0.1rem);
    transition: background 0.3s ease;
}

.production-philosophy__arrow--next::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1.8rem;
    background: url("data:image/svg+xml,%3Csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L9 9L1 17' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateX(0.1rem);
    transition: background 0.3s ease;
}

/* Скрываем CSS-фоллбэк, если inline SVG присутствует */
.production-philosophy__arrow--prev:has(svg)::before,
.production-philosophy__arrow--next:has(svg)::before {
    display: none;
}

.production-philosophy__arrow:hover {
    border-color: #ffffff;
}

.production-philosophy__arrow:hover svg path {
    stroke: #ffffff;
}

.production-philosophy__arrow--prev:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1 9L9 17' stroke='white' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
}

.production-philosophy__arrow--next:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L9 9L1 17' stroke='white' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* Горизонтальный слайдер фотографий (паттерн similar-products__track) */
.production-philosophy__photos {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    /* Выход за контейнер вправо */
    margin-right: -3.8rem;
    padding-right: 3.8rem;
}

.production-philosophy__photos::-webkit-scrollbar {
    display: none;
}

.production-philosophy__photos.is-dragging {
    cursor: grabbing;
}

.production-philosophy__photo-item {
    width: 29.4rem;
    height: 37.7rem;
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

.production-philosophy__photo-item:nth-child(2) {
    width: 37.4rem;
}

.production-philosophy__photo-item:nth-child(3) {
    width: 35.5rem;
}

.production-philosophy__photo-item:nth-child(4) {
    width: 29.4rem;
}

.production-philosophy__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Правая колонка: текстовое описание (наложение поверх галереи) */
.production-philosophy__team-right {
    position: absolute;
    top: 0;
    right: 20rem;
    width: 52.8rem;
    padding-top: 7rem;
    pointer-events: none;
}

.production-philosophy__team-right>* {
    pointer-events: auto;
}

.production-philosophy__team-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    color: #ffffff;
    margin: 0;
    max-width: 52.8rem;
}

/* =========================================
   SECTION: ADVANTAGES (преимущества)
========================================= */
.production-philosophy__advantages {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Главная разделительная линия перед секцией */
.production-philosophy__divider {
    border: none;
    height: 0.3rem;
    background-color: rgba(255, 255, 255, 0.25);
    margin: 0 0 4rem;
    width: 100%;
}

/* Подзаголовок «ПРЕИМУЩЕСТВА ГЛАСС МАРКЕТ» */
.production-philosophy__adv-label {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.64);
    margin: 0 0 5rem;
}

/* Список пунктов преимуществ */
.production-philosophy__adv-list {
    display: flex;
    flex-direction: column;
}

/* --- Один пункт преимущества --- */
.production-philosophy__adv-item {
    display: flex;
    flex-direction: column;
}

/* Линия-разделитель каждого пункта */
.production-philosophy__adv-line {
    border: none;
    height: 0.2rem;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 0;
    width: 100%;
}

/* Строка пункта: заголовок слева, описание справа */
.production-philosophy__adv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4.5rem 0.5rem;
    gap: 4rem;
    position: relative;
}

/* Заголовок преимущества — НЕАКТИВНОЕ состояние */
.production-philosophy__adv-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10rem;
    line-height: 10rem;
    letter-spacing: -0.4rem;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    opacity: 0.3;
    transform: translateX(0);
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
        transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Описание преимущества — СКРЫТО в неактивном состоянии */
.production-philosophy__adv-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: -0.04rem;
    color: #ffffff;
    margin: 0;
    width: 48.5rem;
    /* Абсолютное позиционирование — не влияет на ширину строки */
    position: absolute;
    right: 34.5rem;
    top: 50%;
    transform: translateY(-50%);
    /* Неактивное: скрыто */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s 0.5s;
    pointer-events: none;
}

/* --- Состояние при наведении --- */
.production-philosophy__adv-item:hover .production-philosophy__adv-title {
    opacity: 1;
    transform: translateX(3rem);
}

.production-philosophy__adv-item:hover .production-philosophy__adv-desc {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s 0s;
    pointer-events: auto;
}

/* --- Модификатор АКТИВНОГО состояния (JS) --- */
.production-philosophy__adv-item--active .production-philosophy__adv-title {
    opacity: 1;
    transform: translateX(3rem);
}

.production-philosophy__adv-item--active .production-philosophy__adv-desc {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s 0s;
    pointer-events: auto;
}

/* Chevron — скрыт на десктопе, виден только в мобильном аккордеоне */
.production-philosophy__adv-chevron {
    display: none;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
========================================= */
@media (max-width: 1199px) {
    .production-philosophy {
        /*border-radius: 1rem;*/
        padding: 5rem 0 5rem;
    }

    .production-philosophy__inner {
        padding: 0 2rem 30rem;
    }

    .production-philosophy__label {
        font-size: 1.4rem;
        letter-spacing: 0.14rem;
        margin-bottom: 2rem;
        padding-left: 0;
    }

    .production-philosophy__title {
        font-size: 3.2rem;
        line-height: 3.6rem;
        letter-spacing: -0.032rem;
        margin-bottom: 4rem;
        max-width: 35rem;
    }

    /* Команда: одна колонка */
    .production-philosophy__team {
        flex-direction: column;
        gap: 5rem;
        margin-bottom: 8rem;
    }

    .production-philosophy__team-left {
        width: 100%;
    }

    .production-philosophy__photos {
        margin-right: -2rem;
        padding-right: 2rem;
    }

    .production-philosophy__photo-item,
    .production-philosophy__photo-item:nth-child(2),
    .production-philosophy__photo-item:nth-child(3),
    .production-philosophy__photo-item:nth-child(4) {
        width: 22rem;
        height: 28rem;
    }

    .production-philosophy__arrows {
        gap: 1.6rem;
        justify-content: flex-end;
    }

    .production-philosophy__arrow {
        width: 4.4rem;
        height: 4.4rem;
    }

    .production-philosophy__team-right {
        position: static;
        width: 100%;
        padding-top: 0;
        pointer-events: auto;
    }

    .production-philosophy__team-desc {
        font-size: 2rem;
        line-height: normal;
        max-width: 100%;
    }

    /* ========== Преимущества: аккордеон ========== */
    .production-philosophy__adv-label {
        font-size: 1.4rem;
        margin-bottom: 3rem;
    }

    /* Строка: заголовок + chevron в ряд, desc — ниже на 100% */
    .production-philosophy__adv-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 0;
        gap: 0;
        cursor: pointer;
    }

    /* Заголовок: приглушён по умолчанию */
    .production-philosophy__adv-title {
        font-size: 3.6rem;
        line-height: 4.4rem;
        letter-spacing: -0.144rem;
        opacity: 0.3;
        transform: none;
        transition: opacity 0.3s ease;
    }

    /* Hover-стили отключаем на мобильном */
    .production-philosophy__adv-item:hover .production-philosophy__adv-title {
        opacity: 0.3;
        transform: none;
    }

    .production-philosophy__adv-item:hover .production-philosophy__adv-desc {
        opacity: 0;
        visibility: hidden;
    }

    /* Активный заголовок */
    .production-philosophy__adv-item--active .production-philosophy__adv-title,
    .production-philosophy__adv-item--active:hover .production-philosophy__adv-title {
        opacity: 1;
        transform: none;
    }

    /* Chevron: видим на мобильном */
    .production-philosophy__adv-chevron {
        display: block;
        flex-shrink: 0;
        width: 1.8rem;
        height: 1.8rem;
        transition: transform 0.3s ease;
        transform: rotate(180deg);
        /* стрелка вниз по умолчанию */
        opacity: 0.3;
    }

    .production-philosophy__adv-item--active .production-philosophy__adv-chevron {
        transform: rotate(0deg);
        /* стрелка вверх при раскрытии */
        opacity: 1;
    }

    /* Описание: скрыто, раскрывается с анимацией через JS (height) */
    .production-philosophy__adv-desc {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        font-size: 1.6rem;
        line-height: normal;
        letter-spacing: -0.032rem;
        height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
            opacity 0.35s ease,
            padding-top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
            visibility 0s 0.4s;
        padding-top: 0;
        pointer-events: none;
    }

    .production-philosophy__adv-item--active .production-philosophy__adv-desc,
    .production-philosophy__adv-item--active:hover .production-philosophy__adv-desc {
        opacity: 1;
        visibility: visible;
        transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
            opacity 0.35s ease,
            padding-top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
            visibility 0s 0s;
        padding-top: 1.5rem;
        pointer-events: auto;
    }
}

/* =========================================
   СТРАНИЦА «ЭКСКЛЮЗИВНАЯ ПРОДУКЦИЯ»: Hero-блок
   .exclusive-hero  |  BEM  |  rem (1rem = 10px)
========================================= */

/* --- Главная обёртка секции --- */
.exclusive-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
}

/* --- Фоновое видео (абсолютный слой, z-index: 0) --- */
.exclusive-hero__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* --- Градиентный оверлей поверх видео --- */
.exclusive-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(70.88deg,
            rgba(255, 166, 49, 0.85) 13.76%,
            rgba(255, 166, 49, 0.85) 17.13%,
            rgba(255, 6, 0, 0.85) 50.83%);
    z-index: 0;
    pointer-events: none;
}

/* --- Контентная сетка (Flexbox, 2 колонки) --- */
.exclusive-hero__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 3.5rem;
}

/* --- Левая колонка --- */
.exclusive-hero__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 85.2rem;
    padding-bottom: 0vh;
    padding-top: 17.5vh;
}

/* --- Хлебные крошки (переиспользуем .breadcrumbs__*) --- */
.exclusive-hero__breadcrumbs {
    margin-bottom: 3.2rem;
    margin-left: 0rem;
}

.exclusive-hero__breadcrumbs .breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.exclusive-hero__breadcrumbs .breadcrumbs__item {
    display: flex;
    align-items: center;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    font-feature-settings: 'ss04';
}

.exclusive-hero__breadcrumbs .breadcrumbs__link {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.exclusive-hero__breadcrumbs .breadcrumbs__link:hover {
    opacity: 0.7;
}

.exclusive-hero__breadcrumbs .breadcrumbs__item+.breadcrumbs__item::before {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 1.2rem;
    flex-shrink: 0;
}

.exclusive-hero__breadcrumbs .breadcrumbs__item--current .breadcrumbs__text {
    color: rgba(255, 255, 255, 0.3);
}

/* --- Заголовок H1 --- */
.exclusive-hero__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13rem;
    line-height: 1;
    letter-spacing: -0.39rem;
    color: #ffffff;
    margin: 0 0 3.2rem;
    max-width: 101.3rem;
}

/* --- Описание --- */
.exclusive-hero__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    color: #ffffff;
    margin: 0;
    max-width: 85.2rem;
    margin-bottom: 8rem;
    margin-left: 0.4rem;
}

/* --- Кнопка --- */
.exclusive-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #000000;
    padding: 2.7rem 4.5rem;
    border-radius: 1.3rem;
    text-decoration: none;
    outline: none;
    border: none;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.exclusive-hero__btn:focus,
.exclusive-hero__btn:active {
    outline: none;
    border: none;
}



.exclusive-hero__btn-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: #000000;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}



/* --- Стеклянная карточка: позиционирование внутри .exclusive-hero --- */
.exclusive-hero .glass-project-btn {
    position: relative;
    top: 4.3rem;
    right: 4.8rem;
    /* Было auto */
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 10rem;
    transform: scale(0.9);
    transform-origin: top right;
}

/* --- Мобильная адаптация --- */
@media (max-width: 1199px) {
    .exclusive-hero {
        height: auto;
        min-height: auto;
    }

    .exclusive-hero__container {
        flex-direction: column;
        padding: 15rem 1.8rem 9.5rem;
    }

    .exclusive-hero__left {
        max-width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .exclusive-hero__breadcrumbs {
        margin-left: 0;
        margin-bottom: 6rem;
    }

    .exclusive-hero__breadcrumbs .breadcrumbs__item {
        font-size: 1.4rem;
        letter-spacing: -0.042rem;
    }

    .exclusive-hero__breadcrumbs .breadcrumbs__item+.breadcrumbs__item::before {
        margin: 0 1.6rem;
    }

    .exclusive-hero__title {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        margin-bottom: 3.2rem;
    }

    .exclusive-hero__desc {
        font-size: 1.6rem;
        line-height: normal;
        letter-spacing: -0.032rem;
        max-width: 100%;
        margin-bottom: 6.4rem;
        margin-left: 0;
    }

    .exclusive-hero__btn {
        padding: 1.7rem 2.8rem;
        border-radius: 0.9rem;
        height: 2rem;
    }

    .exclusive-hero__btn-text {
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
    }
}

/* =========================================
   БЛОК «ПУТЬ К ВАШЕЙ ЭКСКЛЮЗИВНОЙ БУТЫЛКЕ»
   .exclusive-features | BEM | rem (1rem = 10px)
   Инфоблок ID: 9
========================================= */

/* --- Корневая секция --- */
.exclusive-features {
    background-color: #F0F0F0;
    padding: 14.3rem 0 10rem;
    overflow: hidden;
}

/* --- Внутренняя обёртка (центрирование + боковые отступы) --- */
.exclusive-features__inner {
    max-width: 192rem;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    flex-direction: column;
}

/* --- Надзаголовок (лейбл) --- */
.exclusive-features__label {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.64);
    margin: 0 0 3.2rem;
}

/* --- Заголовок H2 --- */
.exclusive-features__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 7.2rem;
    line-height: 7.8rem;
    letter-spacing: -0.216rem;
    color: #000000;
    margin: 0 0 5.8rem;
    max-width: 97.1rem;
}

/* --- Сетка карточек: CSS Grid, 4 колонки --- */
.exclusive-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4.1rem;
}

/* --- Навигация слайдера (скрыта на десктопе) --- */
.exclusive-features__nav {
    display: none;
}

.exclusive-features__nav-btn {
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 50%;
    border: 1px solid #D8DEE2;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.exclusive-features__nav-btn svg {
    pointer-events: none;
}

.exclusive-features__nav-btn--prev svg {
    transform: translateX(-0.3rem);
}

.exclusive-features__nav-btn--next svg {
    transform: translateX(0.3rem);
}

.exclusive-features__nav-btn svg path {
    transition: stroke 0.3s ease;
}

@media (min-width: 1200px) {
    .exclusive-features__nav-btn:hover {
        border-color: #000000;
    }

    .exclusive-features__nav-btn:hover svg path {
        stroke: #000000;
    }
}

/* =========================================
   КАРТОЧКА ПРЕИМУЩЕСТВА (.feature-card)
========================================= */
.feature-card {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    height: 60.4rem;
}

/* --- Фон карточки (абсолютный слой, z-index: 0) --- */
.feature-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 2rem;
}

/* --- Тёмный оверлей (затемнение + нижний градиент) --- */
.feature-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    border-radius: 2rem;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.15) 60%,
            rgba(154, 41, 23, 0.85) 100%);
}

/* --- Контентная обёртка (поверх фона и оверлея) --- */
.feature-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 8.8rem 4.3rem 4.3rem;
    box-sizing: border-box;
}

/* --- Заголовок карточки (вверху) --- */
.feature-card__name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: -0.072rem;
    color: #ffffff;
    margin: 0;
    max-width: 36.9rem;
}

/* --- Контейнер тегов (внизу) --- */
.feature-card__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

/* --- Отдельный тег-капсула (красная плашка) --- */
.feature-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FF0601;
    color: #ffffff;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.6rem 2.4rem;
    height: 4.8rem;
    border-radius: 44.5rem;
    font-feature-settings: 'zero';
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-sizing: border-box;
}

.feature-card__tag:hover {
    background-color: #E00500;
    transform: scale(1.03);
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (слайдер)
========================================= */
@media (max-width: 1199px) {
    .exclusive-features {
        padding: 6rem 0 5rem;
    }

    .exclusive-features__inner {
        padding: 0;
    }

    .exclusive-features__label {
        font-size: 1.4rem;
        letter-spacing: 0.14rem;
        margin-bottom: 2rem;
        padding: 0 2.4rem;
    }

    .exclusive-features__title {
        font-size: 3.2rem;
        line-height: 3.6rem;
        letter-spacing: -0.032rem;
        margin-bottom: 8rem;
        max-width: 33.2rem;
        padding: 0 2.4rem;
    }

    /* --- Навигация слайдера (видима на мобильном) --- */
    .exclusive-features__nav {
        display: flex;
        gap: 2.3rem;
        align-self: flex-end;
        padding: 0 2.4rem;
        margin-top: -3.9rem;
        margin-bottom: 2.4rem;
    }

    /* --- Грид → горизонтальный слайдер --- */
    .exclusive-features__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 2.3rem;
        padding: 0;
        scroll-padding-left: 2.4rem;
        /* Скрыть скроллбар */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .exclusive-features__grid::-webkit-scrollbar {
        display: none;
    }

    .feature-card {
        flex-shrink: 0;
        width: 24.6rem;
        height: 33.4rem;
        border-radius: 1.1rem;
        scroll-snap-align: start;
    }

    .feature-card:first-child {
        margin-left: 2.4rem;
    }

    .feature-card:last-child {
        margin-right: 2.4rem;
    }

    .feature-card__bg {
        border-radius: 1.1rem;
    }

    .feature-card__overlay {
        border-radius: 1.1rem;
    }

    .feature-card__content {
        padding: 4.9rem 2.4rem 2.4rem;
    }

    .feature-card__name {
        font-size: 2rem;
        letter-spacing: -0.04rem;
        max-width: 20.4rem;
    }

    .feature-card__tags {
        gap: 0.8rem;
    }

    .feature-card__tag {
        font-size: 1rem;
        height: 2.7rem;
        padding: 0.3rem 1.3rem;
        border-radius: 24.6rem;
    }

    /* Отключить ховер-эффекты на мобилке */
    .feature-card__tag:hover {
        background-color: #FF0601;
        transform: none;
    }
}

/* =========================================
   БЛОК «ЭФФЕКТЫ ДЕКОРА»
   .exclusive-effects  |  BEM  |  rem (1rem = 10px)
   Статичная сетка из 4 карточек декора
========================================= */

/* --- Корневая секция --- */
.exclusive-effects {
    background-color: #F0F0F0;
    padding: 5.9rem 0 10rem;
    overflow: hidden;
}

/* --- Внутренняя обёртка (центрирование + боковые отступы) --- */
.exclusive-effects__inner {
    max-width: 192rem;
    margin: 0 auto;
    padding: 0 3.9rem;
    display: flex;
    flex-direction: column;
}

/* --- Заголовок H2 --- */
.exclusive-effects__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 7.2rem;
    line-height: 7.8rem;
    letter-spacing: -0.216rem;
    color: #000000;
    margin: 0 0 3.3rem;
    max-width: 90.2rem;
}

/* --- Описание --- */
.exclusive-effects__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    color: #000000;
    margin: 0 0 6.5rem;
    max-width: 74.4rem;
}

/* --- Сетка карточек: CSS Grid, 4 колонки --- */
.exclusive-effects__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.3rem;
}

/* =========================================
   КАРТОЧКА ДЕКОРА (.decor-card)
========================================= */
.decor-card {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    height: 48.7rem;
    transform: translateZ(0);
}

/* --- Градиентный фон карточки --- */
.decor-card__gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    background: linear-gradient(79.52deg,
            rgb(255, 166, 49) 13.76%,
            rgb(255, 166, 49) 17.13%,
            rgb(255, 6, 0) 50.83%);
    z-index: 0;
}

/* --- Фоновое изображение карточки (<img>) --- */
.decor-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: 2rem;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.decor-card:hover .decor-card__img {
    transform: scale(1.05);
}

/* --- Градиентный оверлей поверх изображения (для читаемости текста) --- */
.decor-card__overlay {
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 2;
    pointer-events: none;
    border-radius: 0 0 2rem 2rem;
    background: linear-gradient(to top,
            rgba(255, 166, 49, 0.6) 3%,
            rgba(104, 50, 24, 0.6) 2%,
            rgba(255, 6, 0, 0) 63%);
}

/* --- Контентная обёртка (заголовок карточки — поверх всего) --- */
.decor-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 0 3.6rem 4.4rem;
    box-sizing: border-box;
}

/* --- Заголовок карточки --- */
.decor-card__name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: -0.072rem;
    color: #ffffff;
    margin: 0;
    max-width: 35.8rem;
}

/* --- Навигация слайдера (скрыта на десктопе и на мобильном — готова к включению) --- */
.exclusive-effects__nav {
    display: none;
}

.exclusive-effects__nav-btn {
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 50%;
    border: 1px solid #D8DEE2;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.exclusive-effects__nav-btn svg {
    pointer-events: none;
}

.exclusive-effects__nav-btn--prev svg {
    transform: translateX(-0.3rem);
}

.exclusive-effects__nav-btn--next svg {
    transform: translateX(0.3rem);
}

.exclusive-effects__nav-btn svg path {
    transition: stroke 0.3s ease;
}

@media (min-width: 1200px) {
    .exclusive-effects__nav-btn:hover {
        border-color: #000000;
    }

    .exclusive-effects__nav-btn:hover svg path {
        stroke: #000000;
    }
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (.exclusive-effects)
   Grid → горизонтальный слайдер
========================================= */
@media (max-width: 1199px) {
    .exclusive-effects {
        padding: 5.6rem 0 5rem;
    }

    .exclusive-effects__inner {
        padding: 0;
    }

    .exclusive-effects__title {
        font-size: 4rem;
        line-height: 4rem;
        letter-spacing: -0.08rem;
        margin-bottom: 2.4rem;
        max-width: 34rem;
        padding: 0 2.2rem;
    }

    .exclusive-effects__desc {
        font-size: 1.6rem;
        letter-spacing: -0.032rem;
        max-width: 34rem;
        margin-bottom: 2.8rem;
        padding: 0 2.2rem;
    }

    /* --- Навигация: скрыта (раскомментировать display:flex для включения) --- */
    /* .exclusive-effects__nav {
        display: flex;
        gap: 2.3rem;
        align-self: flex-end;
        padding: 0 2.2rem;
        margin-top: -3.9rem;
        margin-bottom: 2.4rem;
    } */

    /* --- Грид → горизонтальный слайдер --- */
    .exclusive-effects__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1.6rem;
        padding: 0;
        scroll-padding-left: 2rem;
        /* Скрыть скроллбар */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .exclusive-effects__grid::-webkit-scrollbar {
        display: none;
    }

    .decor-card {
        flex-shrink: 0;
        width: 24.6rem;
        height: 33.4rem;
        border-radius: 1rem;
        scroll-snap-align: start;
    }

    /* Отключить ховер-эффект на мобилке */
    .decor-card:hover .decor-card__img {
        transform: none;
    }

    .decor-card:first-child {
        margin-left: 2rem;
    }

    .decor-card:last-child {
        margin-right: 2rem;
    }

    .decor-card__gradient {
        border-radius: 1rem;
    }

    .decor-card__img {
        border-radius: 1rem;
    }

    .decor-card__overlay {
        border-radius: 0 0 1rem 1rem;
    }

    .decor-card__content {
        padding: 0 1.8rem 2.4rem;
    }

    .decor-card__name {
        font-size: 2rem;
        letter-spacing: -0.04rem;
        max-width: 18.8rem;
    }
}

/* =========================================
   БЛОК «ФОРМАТ РАЗРАБОТКИ»
   .dev-format  |  BEM  |  rem (1rem = 10px)
   Инфоблок ID: 11 | Sticky Sidebar + Steps
========================================= */

/* --- Корневая секция --- */
.dev-format {
    background-color: #F0F0F0;
    padding: 10rem 0 14rem;
}

/* --- Внутренняя обёртка --- */
.dev-format__inner {
    max-width: 192rem;
    margin: 0 auto;
    padding: 0 4rem;
}

/* --- Заголовок H2 --- */
.dev-format__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 7.2rem;
    line-height: 7.8rem;
    letter-spacing: -0.216rem;
    color: #000000;
    margin: 0 0 2.4rem;
}

/* --- Подзаголовок-описание --- */
.dev-format__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: -0.052rem;
    color: #000000;
    margin: 0 0 8rem;
    max-width: 74.4rem;
}

/* --- Сетка: 2 колонки --- */
.dev-format__grid {
    display: flex;
    align-items: stretch;
    gap: 4rem;
}

/* ══════════════════════════════════════
   ЛЕВАЯ КОЛОНКА: Sticky Sidebar
   ══════════════════════════════════════ */
.dev-format__sidebar {
    width: 74.3rem;
    flex-shrink: 0;
}

.dev-format__sidebar-sticky {
    position: sticky;
    top: 15rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

/* =========================================
   КАРТОЧКА РАЗДЕЛА (.dev-section-card)
========================================= */
.dev-section-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 1.7rem;
    width: 100%;
    min-height: 27.3rem;
    padding: 4.4rem 3.3rem 4.4rem 13.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: opacity 0.4s ease;
    opacity: 0.4;
    cursor: pointer;
    user-select: none;
}

.dev-section-card--active {
    opacity: 1;
}

/* --- Кружок с номером --- */
.dev-section-card__number {
    position: absolute;
    top: 4.4rem;
    left: 3.3rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-section-card__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.5rem;
    height: 3.5rem;
}

.dev-section-card__index {
    position: relative;
    z-index: 1;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    color: #000000;
    font-feature-settings: 'ss04';
}

/* --- Заголовок раздела --- */
.dev-section-card__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1.08;
    letter-spacing: -0.072rem;
    color: #000000;
    margin: 2.4rem 0 0;
    max-width: 40.7rem;
}

/* --- Красная плашка (badge) --- */
.dev-section-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FF0601;
    color: #ffffff;
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.048rem;
    white-space: nowrap;
    padding: 0.6rem 2.4rem;
    height: 3rem;
    border-radius: 44.5rem;
    font-feature-settings: 'ss04';
    margin-top: auto;
    align-self: flex-start;
}

/* ══════════════════════════════════════
   ПРАВАЯ КОЛОНКА: Этапы
   ══════════════════════════════════════ */
.dev-format__content {
    flex: 1;
    min-width: 0;
    background-color: #ffffff;
    border-radius: 1.7rem;
    padding: 10.8rem 11.7rem 10rem;
    box-sizing: border-box;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.dev-format__content--transitioning {
    opacity: 0;
    transform: translateY(1.5rem);
}

/* --- Группа этапов по разделу (переключение) --- */
.dev-format__section-group {
    display: none;
}

.dev-format__section-group--active {
    display: block;
}

/* =========================================
   КАРТОЧКА ЭТАПА (.dev-step-card)
========================================= */
.dev-step-card {
    display: flex;
    align-items: flex-start;
    gap: 7.5rem;
}

/* --- Медиа-блок (слева) --- */
.dev-step-card__media {
    width: 16rem;
    height: 16rem;
    border-radius: 3.3rem;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #F0F3F5;
}

.dev-step-card__video,
.dev-step-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Контентный блок (справа) --- */
.dev-step-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2.1rem;
    padding-top: 1rem;
}

/* --- Надзаголовок (STAGE_LABEL) --- */
.dev-step-card__label {
    font-family: 'IBM Plex Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
    color: #C0C8CD;
    margin: 0;
}

/* --- Заголовок этапа --- */
.dev-step-card__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: #000000;
    margin: 0;
}

/* --- Описание этапа --- */
.dev-step-card__text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: -0.04rem;
    color: #000000;
    margin: 0;
}

/* --- Разделитель между карточками --- */
.dev-step-card__divider {
    width: 100%;
    height: 0.1rem;
    background-color: #E0E0E0;
    margin: 7.5rem 0;
}

/* =========================================
   КНОПКА «НА ВЕРХ» (.dev-format__back-to-top)
   Аналог exclusive-hero__btn — размещается
   после dev-format__content внутри __grid.
========================================= */
.dev-format__back-to-top {
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #000000;
    padding: 2.7rem 4.5rem;
    border-radius: 1.3rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 5rem auto 0;
    width: fit-content;
}

.dev-format__back-to-top:hover {
    background-color: #f0f0f0;
    transform: translateY(-0.2rem);
}

.dev-format__back-to-top:active {
    transform: translateY(0);
}

.dev-format__back-to-top:focus {
    background-color: #ffffff;
    outline: none;
}

.dev-format__back-to-top-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    color: #000000;
    white-space: nowrap;
}

/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (.dev-format)
========================================= */
@media (max-width: 1199px) {
    .dev-format {
        padding: 5rem 0 5rem;
    }

    .dev-format__inner {
        padding: 0 2.4rem;
    }

    .dev-format__title {
        font-size: 3.2rem;
        line-height: 3.6rem;
        letter-spacing: -0.032rem;
        margin-bottom: 1.6rem;
    }

    .dev-format__desc {
        font-size: 1.6rem;
        letter-spacing: -0.032rem;
        max-width: 33.1rem;
        margin-bottom: 3.6rem;
    }

    /* Колонки друг под другом */
    .dev-format__grid {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* Отключаем sticky */
    .dev-format__sidebar {
        width: 100%;
    }

    .dev-format__sidebar-sticky {
        position: static;
        gap: 1rem;
    }

    /* Карточка раздела — opacity НЕ переопределяем,
       чтобы неактивная оставалась бледной (opacity: 0.4 из базы) */
    .dev-section-card {
        min-height: 14.3rem;
        padding: 3rem 2.5rem 3rem 7.6rem;
        border-radius: 1rem;
    }

    .dev-section-card__number {
        top: 3rem;
        left: 2.7rem;
        width: 2.3rem;
        height: 2.3rem;
    }

    .dev-section-card__circle {
        width: 2.3rem;
        height: 2.3rem;
    }

    .dev-section-card__index {
        font-size: 1.3rem;
        letter-spacing: -0.039rem;
    }

    .dev-section-card__title {
        font-size: 2rem;
        letter-spacing: -0.04rem;
        margin-top: 0;
        max-width: 100%;
    }

    .dev-section-card__badge {
        font-size: 1rem;
        height: 1.7rem;
        padding: 0.3rem 1.4rem;
        margin-top: 1.5rem;
    }

    /* Правая колонка — блок этапов */
    .dev-format__content {
        padding: 3.2rem 1.8rem;
        border-radius: 1rem;
    }

    /* Карточка этапа — горизонтальный лейаут по макету */
    .dev-step-card {
        flex-direction: row;
        align-items: center;
        gap: 2.2rem;
    }

    .dev-step-card__media {
        width: 6.9rem;
        height: 6.9rem;
        border-radius: 1.5rem;
    }

    .dev-step-card__body {
        gap: 1.4rem;
        padding-top: 0;
    }

    .dev-step-card__label {
        font-size: 1.1rem;
        letter-spacing: 0.11rem;
    }

    .dev-step-card__title {
        font-size: 1.6rem;
        letter-spacing: -0.032rem;
    }

    .dev-step-card__text {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: -0.028rem;
    }

    .dev-step-card__divider {
        margin: 2.4rem 0;
    }

    /* Кнопка «На верх» на мобильном */
    .dev-format__back-to-top {
        display: inline-flex;
        padding: 1.7rem 14.1rem;
        border-radius: 0.9rem;
        margin-top: 0rem;
    }

    .dev-format__back-to-top-text {
        font-size: 1.4rem;
        line-height: 1.7rem;
        letter-spacing: -0.028rem;
    }
}

/* =========================================
   GLASS CURSOR (Glassmorphism кастомный курсор)
========================================= */
.glass-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 33rem;
    height: 33rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);

    /* Скрыт по умолчанию */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* Центрирование текста через Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-cursor__text {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    user-select: none;
}

/* Активное состояние */
.glass-cursor--active {
    opacity: 1;
    visibility: visible;
}

/* Скрытие системного курсора при наведении на карточки каталога (только десктоп) */
@media (min-width: 1200px) {
    .catalog-sections-grid__item {
        cursor: none;
    }
}

/* =========================================
   TEXT REVEAL — построчное появление из маски
   .animate-reveal  →  .is-revealed
   Только transform: translateY, без opacity
========================================= */

/* --- Обёртка-маска для каждой визуальной строки --- */
.reveal-wrapper {
    display: block;
    overflow: hidden;
    line-height: inherit;
}

/* --- Внутренний контейнер со строкой текста --- */
.reveal-content {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 1.2s cubic-bezier(0.5, 0, 0, 1);
    will-change: transform;
}

/* --- Состояние «показано» (класс вешается JS через IntersectionObserver) --- */
.is-revealed .reveal-content {
    transform: translateY(0);
}

/* =========================================
   УТИЛИТА: Красный hover для кнопок
   Класс .hover-red
   Добавить на любую кнопку/ссылку для hover-эффекта
========================================= */
.hover-red {
    position: relative;
    overflow: hidden;
    transition: background-color 0.35s ease, color 0.35s ease;
}

.hover-red:hover {
    background-color: #FF0600 !important;
    color: #ffffff !important;
}

.hover-red>* {
    position: relative;
    z-index: 1;
    transition: color 0.35s ease;
}

.hover-red:hover>* {
    color: #ffffff !important;
}

/* =========================================
   УТИЛИТА: Белый hover для кнопок
   Класс .hover-white
   Добавить на любую кнопку/ссылку для hover-эффекта
========================================= */
.hover-white {
    position: relative;
    overflow: hidden;
    transition: background-color 0.35s ease, color 0.35s ease;
}

.hover-white:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.hover-white>* {
    position: relative;
    z-index: 1;
    transition: color 0.35s ease;
}

.hover-white:hover>* {
    color: #000000 !important;
}

/* =========================================
   POPUP VIDEO — Модальное окно видео
   БЭМ-блок .popup-video
========================================= */

/* --- Контейнер (фиксированный полноэкранный слой) --- */
.popup-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.popup-video--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- Оверлей (затемнение + блюр фона) --- */
.popup-video__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 28, 28, 0.8);
    backdrop-filter: blur(0.6rem);
    -webkit-backdrop-filter: blur(0.6rem);
    cursor: pointer;
}

/* --- Контейнер видео --- */
.popup-video__wrapper {
    position: relative;
    width: 120rem;
    max-width: calc(100% - 5.2rem);
    max-height: calc(100vh - 10rem);
    aspect-ratio: 16 / 9;
    border-radius: 2rem;
    overflow: hidden;
    background: #000000;
}

/* --- Кнопка закрытия --- */
.popup-video__close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #ffffff;
    transition: background 0.3s ease;
    padding: 0;
}

.popup-video__close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.popup-video__close svg {
    width: 1.8rem;
    height: 1.8rem;
}

/* --- Видеоплеер --- */
.popup-video__player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    outline: none;
}

/* --- Мобильная адаптация --- */
@media (max-width: 1199px) {
    .popup-video__wrapper {
        width: calc(100% - 3.2rem);
        border-radius: 1.4rem;
    }

    .popup-video__close {
        top: 1.2rem;
        right: 1.2rem;
        width: 3.4rem;
        height: 3.4rem;
    }

    .popup-video__close svg {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* =========================================
   POPUP FORM — Модальное окно заявки
   БЭМ-блок .popup-form
========================================= */

/* --- Контейнер (фиксированный полноэкранный слой) --- */
.popup-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.popup-form--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- Оверлей (затемнение + блюр фона) --- */
.popup-form__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(116, 116, 116, 0.6);
    backdrop-filter: blur(0.6rem);
    -webkit-backdrop-filter: blur(0.6rem);
    cursor: pointer;
}

/* --- Карточка (десктоп: двухколоночная) --- */
.popup-form__card {
    position: relative;
    width: 166.1rem;
    max-width: calc(100% - 5.2rem);
    background: #ffffff;
    border-radius: 2.6rem;
    padding: 6.8rem 8.1rem 6.8rem;
    z-index: 1;
    transform: translateY(2rem);
    transition: transform 0.35s ease;
}

.popup-form--active .popup-form__card {
    transform: translateY(0);
}

/* --- Контейнер с двумя колонками --- */
.popup-form__container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

/* --- Кнопка закрытия (крестик) --- */
.popup-form__close {
    position: absolute;
    top: 3.9rem;
    right: 4.2rem;
    width: 3.9rem;
    height: 3.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #000000;
    transition: opacity 0.3s ease;
}

.popup-form__close:hover {
    opacity: 0.5;
}

.popup-form__close svg {
    width: 100%;
    height: 100%;
}

/* ============================
   ЛЕВАЯ КОЛОНКА (десктоп)
============================ */
.popup-form__left {
    flex-shrink: 0;
    width: 60.6rem;
    display: flex;
    flex-direction: column;
}

/* Заголовок «Начните свой проект» */
.popup-form__heading {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 7.2rem;
    line-height: 7.8rem;
    letter-spacing: -0.216rem;
    color: #000000;
    margin: 0 0 auto 0;
}

/* Контакты */
.popup-form__contacts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 47.5rem;
}

.popup-form__contact-group {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.popup-form__contact-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    color: #000000;
    text-transform: uppercase;
}

.popup-form__contact-phone {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 1.4;
    color: #ff0600;
    text-decoration: none;
    width: fit-content;
}


/* Кнопка «Заказать консультацию» */
.popup-form__btn-consultation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f3f5;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    font-weight: 400;
    border-radius: 1.3rem;
    padding: 2.7rem 4.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 4rem;
    align-self: flex-start;
}

.popup-form__btn-consultation:hover {
    background-color: #e3e7ea;
}

/* ============================
   ПРАВАЯ КОЛОНКА (форма)
============================ */
.popup-form__right {
    flex: 1;
    max-width: 78.4rem;
}

/* --- Заголовок --- */
.popup-form__title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: -0.072rem;
    color: #000000;
    margin: 0 0 4.4rem 0;
}

/* --- Описание --- */
.popup-form__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 3.0rem;
    color: #000000;
    margin: 0 0 11.5rem 0;
    max-width: 75.8rem;
}

/* --- Форма --- */
.popup-form__form {
    display: flex;
    flex-direction: column;
}

/* --- Группа инпутов (горизонтальная: label + input) --- */
.popup-form__input-group {
    display: flex;
    align-items: center;
    margin-bottom: 5.3rem;
}

.popup-form__label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.0rem;
    line-height: 1;
    color: #000000;
    width: 14.3rem;
    flex-shrink: 0;
}

.popup-form__input {
    flex: 1;
    border: none;
    border-bottom: 1px solid rgba(173, 176, 191, 0.5);
    background: transparent;
    padding: 0 0 1rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    color: #000000;
    outline: none;
    transition: border-color 0.3s ease;
}

.popup-form__input:focus {
    border-bottom-color: #ff0600;
}

/* --- Группа с textarea (колоночная раскладка) --- */
.popup-form__input-group--col {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 6rem;
}

.popup-form__input-group--col .popup-form__label {
    width: 100%;
    margin-bottom: 2rem;
}

.popup-form__input--textarea {
    resize: none;
    overflow: hidden;
    width: 100%;
}

/* --- Подвал формы (согласие + кнопка) --- */
.popup-form__footer {
    display: flex;
    flex-direction: column;
    gap: 4.4rem;
}

/* --- Согласие на обработку данных --- */
.popup-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    cursor: pointer;
}

.popup-form__consent-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.popup-form__consent-custom {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(141, 141, 141, 0.5);
    border-radius: 0.3rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
    transition: border-color 0.3s ease;
}

.popup-form__consent-input:checked+.popup-form__consent-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.3rem;
    height: 1.3rem;
    background-color: #ff0600;
    border-radius: 8rem;
}

.popup-form__consent-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    letter-spacing: -0.032rem;
    color: #000000;
    max-width: 70.8rem;
}

/* --- Кнопка «Отправить заявку» --- */
.popup-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0600;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 2.0rem;
    font-weight: 400;
    border-radius: 1.3rem;
    padding: 2.7rem 4.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: flex-start;
    white-space: nowrap;
}

.popup-form__submit:hover {
    background-color: #cc0500;
}

/* --- Состояние ошибки для инпутов --- */
.popup-form__input.is-error {
    border-bottom-color: #ff0600;
}

/* --- Состояние ошибки для чекбокса согласия --- */
.popup-form__consent-custom.is-error {
    border-color: #ff0600;
}

/* --- Текст ошибки под полем --- */
.popup-form__input-group {
    position: relative;
}

.popup-form__input-group>.form-error-msg {
    position: absolute;
    bottom: -2rem;
    left: 14.3rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1;
    color: #ff0600;
    animation: formErrorAppear 0.3s ease;
}

.popup-form__input-group--col>.form-error-msg {
    left: 0;
}

.popup-form__consent>.form-error-msg {
    display: block;
    margin-top: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1;
    color: #ff0600;
    animation: formErrorAppear 0.3s ease;
}

/* --- Анимация появления ошибки --- */
@keyframes formErrorAppear {
    from {
        opacity: 0;
        transform: translateY(-0.4rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================
   МОБИЛЬНАЯ АДАПТАЦИЯ (< 1200px)
   Одноколоночная: только форма
============================ */
@media (max-width: 1199px) {
    .popup-form__card {
        width: calc(100% - 3.2rem);
        max-width: 35.3rem;
        border-radius: 1.7rem;
        padding: 7.9rem 3.1rem 3.3rem;
    }

    /* Скрываем левую колонку на мобилке */
    .popup-form__left {
        display: none;
    }

    /* Правая колонка занимает всю ширину */
    .popup-form__right {
        max-width: 100%;
    }

    /* Крестик уменьшаем */
    .popup-form__close {
        top: 2.4rem;
        right: 2.4rem;
        width: 2rem;
        height: 2rem;
    }

    /* Заголовок */
    .popup-form__title {
        font-weight: 400;
        font-size: 2.0rem;
        line-height: 1;
        letter-spacing: 0;
        margin: 0 0 1.7rem 0;
    }

    /* Описание */
    .popup-form__desc {
        font-size: 1.2rem;
        line-height: normal;
        letter-spacing: -0.024rem;
        margin: 0 0 4.4rem 0;
        max-width: 29.1rem;
    }

    /* Инпуты */
    .popup-form__input-group {
        margin-bottom: 2.9rem;
    }

    .popup-form__label {
        font-size: 1.4rem;
        line-height: 2.0rem;
        letter-spacing: -0.028rem;
        width: 9.4rem;
    }

    .popup-form__input {
        padding: 0 0 0.8rem 0;
        font-size: 1.4rem;
    }

    .popup-form__input-group--col {
        margin-bottom: 3.6rem;
    }

    .popup-form__input-group--col .popup-form__label {
        margin-bottom: 1.6rem;
    }

    /* Подвал */
    .popup-form__footer {
        gap: 3.7rem;
    }

    /* Согласие */
    .popup-form__consent-text {
        font-size: 1.0rem;
        line-height: 1.2;
        letter-spacing: -0.03rem;
        max-width: 25.9rem;
    }

    /* Кнопка */
    .popup-form__submit {
        font-size: 1.4rem;
        border-radius: 0.9rem;
        padding: 1.7rem 2.8rem;
    }

    /* Текст ошибки — мобильное смещение */
    .popup-form__input-group>.form-error-msg {
        left: 9.4rem;
        font-size: 1rem;
        bottom: -1.6rem;
    }
}

/* =========================================
   КАСТОМНЫЙ СКРОЛЛБАР
   Заменяет нативный. Синхронизирован с Lenis.
========================================= */
.custom-scrollbar {
    position: fixed;
    top: 0;
    right: 0.5rem;
    width: 0.8rem;
    height: 100%;
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.custom-scrollbar.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Ползунок */
.custom-scrollbar__thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    border-radius: 10rem;
    background: rgba(0, 0, 0, 0.2);
    min-height: 4rem;
    cursor: default;
    transition: background 0.2s ease;
    will-change: transform;
}

.custom-scrollbar__thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.custom-scrollbar__thumb:active,
.custom-scrollbar__thumb.is-dragging {
    background: rgba(0, 0, 0, 0.45);
}

/* Скрываем кастомный скроллбар при scroll-lock (попапы, меню) */
html.scroll-locked .custom-scrollbar {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Скрываем на мобилках — там свой оверлейный */
@media (max-width: 1199px) {
    .custom-scrollbar {
        display: none;
    }
}
/* End */
/* /local/templates/glassmarket/css/styles.css?1790946126319871 */