/* ==========================================================================
   1. СИСТЕМНЫЕ НАСТРОЙКИ И ПЕРЕМЕННЫЕ ТЕМ (Светлая и Тёмная)
   ========================================================================== */
   :root[data-theme="dark"] {
     --icon-color:rgba(255, 255, 255, 1);
     --text-bw:rgba(255, 255, 255, 1);
      --bg-bw:#060612;
--bg-switcher: #1A1A25;
    --bg-switcher-active: #262630;
--text-switcher:rgba(130, 130, 136, 1);
--text-switcher-active:rgba(255, 255, 255, 1);
--text-menu-link:#5D5D65;
--menu-text-dark: #FFFFFF;
--link-icon:url("svg/menu-link-white.svg");
--bg-pro:url("img/bg-project3.webp");
--menu-bg-right: #1A1A25; 
    --bg-main: #1A1A25;
--map-sup:#828288;
--ticker-static:#5D5D65;
    --text-main: rgba(255, 255, 255, 1);
    --footer-link:#A8A8AC;
    --text-muted: #94a3b8;
    --bg-left:#1A1A25;
    --bg-badge: #11111c;
    --hero-bg-text-color: rgba(255, 255, 255, 0.03);
    
    
    
    --menu-text-muted: #64748b;
}

:root[data-theme="light"] {
     --icon-color:#0900B8;
     --text-bw:#060612;
     --bg-bw:rgba(255, 255, 255, 1);
     --bg-switcher: #EDEDF0;
    --bg-switcher-active: #E1E1E5;
--text-switcher:rgba(6, 6, 18, 0.5);
--text-switcher-active:#060612;
--bg-menu-active:rgba(6, 6, 18, 0.8);
--text-menu-link:#A8A8AC;
--menu-text-dark: #060612;
--link-icon:url("svg/menu-link-dark.svg");
--bg-pro:url("img/bg-project2.webp");
    --bg-main: #EDEDF0;
--map-sup:#838389;
--ticker-static:#A8A8AC;
    --text-main: #060612;
    --text-muted: #475569;
    --footer-link:#5D5D65;

    --bg-badge: #e2e8f0;
    --hero-bg-text-color: rgba(0, 0, 0, 0.04);
   
    --menu-bg-right: #EDEDF0; 
--bg-left:#EDEDF0;
    --menu-text-muted: #7f8c8d;
}

:root {
    --header-height: 90px;
    --menu-width: 860px;
}

/* ==========================================================================
   2. СБРОС СТИЛЕЙ И БАЗОВЫЕ НАСТРОЙКИ
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Oswald';
    font-weight: 500;text-transform: uppercase;
    font-style: normal;
    color: var(--text-main);
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
    background: var(--bg-main);
    min-width: 320px;
}
.font-tiktok {
     font-family: 'TikTok Text', sans-serif;
    font-weight: 400;
    font-style: normal;
}
.font-ps {
    font-family: 'Press Start 2P';
    font-weight: normal;
    font-style: normal;
}
/* Блокировка прокрутки сайта при открытом меню */
body.menu-open {
    overflow: hidden;
    position: relative;
}
body.menu-open::after{content: "";position: absolute;top:0;left:0;right:0;bottom:0;z-index:999;background: rgba(0, 0, 0, 0.8) !important;}
/* ==========================================================================
   3. ГЛАВНАЯ ШАПКА САЙТА (ФЛЕКСЫ) И КНОПКА-ТРАНСФОРМЕР
   ========================================================================== */
/* Строка 102 — Базовое состояние шапки */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 100;
    background-color: transparent;
    
    /* 🌟 Плавный переход для смены цвета и тени хедера */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 🌟 Добавьте в самый конец CSS файла — Стиль при скролле более 100px */
.header.header-scrolled {
    background-color:var(--bg-bw) !important; /* Цвет заливки шапки (замените на нужный, если фон должен быть темным) */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Мягкая тень, отделяющая шапку от контента */
}


.header__left, 
.header__right {
    display: flex;
    align-items: center;
    gap: 30px;
}
.header__right{justify-content: space-between;width: 50%;}
/* Выбор города */
.city-select {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;

}

.city-select-row svg {
  fill: var(--icon-color); 
}
.city-select__arrow svg{ fill: var(--text-bw);}
/* Контейнер для относительного позиционирования */
.city-select {
    position: relative;
    display: inline-block;
}

.city-select__trigger {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: auto 25px;
width: 344.31px;
height: 55px;
background-color: var(--bg-left);

}
.city-select-row{display: flex;align-items: center;gap:12px;}
/* Сам выпадающий список */
.city-select__dropdown {
    position: absolute;
    top: calc(100% + 10px); /* Появляется чуть ниже триггера */
    left: 0;right: 0;
    background-color: var(--bg-left); /* Подстраивается под тему сайта */
    list-style: none;
    padding: 8px 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 110;
    
    /* Изначально скрыт */
    opacity: 0;pointer-events: none;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

/* Класс активации списка */
.city-select.active .city-select__dropdown {
    opacity: 1;
    visibility: visible;pointer-events: auto; 
    transform: translateY(0);
}

/* Поворот стрелочки при открытии */
.city-select.active .city-select__arrow {
    transform: rotate(180deg);
}

/* Элементы списка городов */
.city-select__item {
    padding: 10px 16px;
    font-size: 16px;

    transition: background-color 0.2s ease;
}

/* Почта с зеленым индикатором статуса */
.header-email {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-bw);;
    text-decoration: none;
    letter-spacing: 0.5px;
font-family: Oswald;
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
text-transform: uppercase;


}
#theme-day svg{fill:#5D5D65;}
#theme-day.active svg{fill: var(--icon-color);}
#theme-night svg{fill:#5D5D65;}
#theme-night.active svg{fill: var(--text-bw);}
.header-email__status {
    width: 7px;
    height: 7px;
    background-color: #15B95A;
    border-radius: 50%;
    display: inline-block;
}

/* Переключатель ДЕНЬ / НОЧЬ */
.theme-switcher {
    display: flex;
    background-color: var(--bg-switcher);
}
.theme-switcher__btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-switcher);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    height: 55px;
  width: 130px;font-family: 'Oswald';font-weight:500;justify-content: center;
}
.theme-switcher__btn.active {
    background-color: var(--bg-switcher-active);
    color: var(--text-switcher-active);

}

/* Контейнер кнопок управления */
.header-actions-wrapper {
    display: flex;
    position: relative;
    height: 55px;gap: 8px;
}

.btn-action {
    height: 100%;
    padding: 0 24px;
    border: none;
    font-size: 18px;font-family: 'Oswald';font-weight:500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);width: 239px;
}

/* Синяя кнопка заявки */
.btn-action--blue {
    background-color: #0900B8;
    color: #FFFFFF;
    visibility: visible;height:55px;
}
.btn-action--blue svg{fill: #FFFFFF;}
.btn-action--blue:hover {
    background-color: #EDEDF0;
    color:#060612;
}
.btn-action--blue:hover svg{fill: #060612;}

/* Начальное состояние кнопки МЕНЮ */
.btn-action--menu {
    background-color: var(--bg-switcher);
    color: var(--text-bw);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 101;
    width: 128px;
    white-space: nowrap;
}
.btn-action--menu svg{stroke:var(--text-bw);}
/* МЕХАНИКА ТРАНСФОРМАЦИИ ПРИ ОТКРЫТИИ МЕНЮ */

#menu-toggle-activ{display:none;}
body.menu-open #menu-toggle-activ{display:block;position: absolute;z-index: 9999;
  height: 55px;
  top: 15px;
  right: 40px;}
body.menu-open .btn-action--menu {
    position:fixed;
    right: 40px;
    top: 15px;height: 55px;
    /* Расширяется ровно на ширину правой панели выпадающего меню */
    width: calc(var(--menu-width) / 2); 
    background-color: var(--menu-text-dark);
    color: var(--bg-bw);
    justify-content: space-between; 
    padding: 0 30px;
    border-left: none;z-index: 9999;
}

/* Замена знака плюс на крестик */
body.menu-open .menu-icon-state {
    font-size: 0; /* Скрываем исходный плюс */
}
body.menu-open .menu-icon-state::before {
    content: '✕';
    font-size: 13px;
}
/* ==========================================================================
   4. ПЕРВЫЙ ЭКРАН HERO (ГРИДЫ) И ФОНОВЫЙ ТЕКСТ
   ========================================================================== */
/* ==========================================================================
   4. ПЕРВЫЙ ЭКРАН HERO (СТРОГО С ВАШИМИ ТОЧКАМИ-КАРТИНКОЙ)
   ========================================================================== */

.hero {
  display: flex; /* Меняем grid на flex, так проще управлять высотой контента */
    flex-direction: column;
    justify-content: center; /* Центрируем контент по вертикали */
    padding: 0 40px;
    position: relative;
    z-index: 1;
background-color: var(--bg-bw);
padding-top: 80px;
    background-repeat: repeat; 
    background-position: top center;
    background-size: auto; /* Сохраняем оригинальный размер точек из макета */

    
    transition: background-color 0.3s ease;
}

.hero__content {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    /* Используем грид в 2 колонки, чтобы разнести заголовок влево, а виджет вправо */
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: flex-end; /* Выравниваем их по нижней линии */
    position: relative;
    z-index: 5;
    /* Убираем жесткий padding-top, чтобы flex внутри .hero сам идеально отцентрировал блок */
    padding-bottom: 160px; /* Отступ снизу, чтобы заголовок визуально был чуть выше середины */
}
.hero::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    
    /* Подключаем вашу картинку */
   background-image: url('img/bg-toper.webp');
    background-repeat: repeat;
    background-position: top center;
    opacity: 0.94;
    /* Воспроизводим эффект из Figma один в один */
    mix-blend-mode: exclusion; 
    
    z-index: -1; /* Отправляем строго под текст и кнопку */
    pointer-events: none; /* Слой не будет мешать выделению текста и кликам */
}

.hero__title {

    font-size: 64px;
    line-height: 110.00000000000001%;
    letter-spacing: 10%;
    text-transform: uppercase;
}

/* Виджет ТОП-5 */
.top-badge {
    background-color: var(--bg-left);
    padding: 30px;
    width: 273px;
    height: 273px;
    border: 1px solid rgba(128, 128, 128, 0.1);
    transition: background-color 0.3s;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    box-sizing: border-box; /* Чтобы padding не увеличивал размеры 273х273 */
    
    /* Эффект наезда: опускаем плашку вниз прямо на буквы EXNETS */
    position: relative;
    z-index: 6; /* Чтобы она была строго ПОВЕРХ букв */
    transform: translateY(120px); /* Смещаем вниз (подберите число под макет) */
}
.top-badge__title {
    font-size: 32px;
  
}
.top-badge__desc {
    color: var(--text-muted);
  font-family: 'TikTok Text';
font-weight: 400;
font-style: normal;
font-size: 20px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
text-transform: none;
}

/* Огромный бэкграунд Текст EXNETS */
.hero__bg-text {
    position: relative;
    padding-bottom: 40px; /* Намертво прижимаем к нижнему краю первого экрана */
text-align: center;
    width: 100%;
    max-width: 1840px; /* Ширина вашей SVG */
    z-index: 2; /* Лежит под контентом, но над фоновыми точками */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.hero__bg-text svg{ width: 100%;
    height: auto;
    display: block;}
/* Выделение букв EX синим цветом на светлой теме как на макете */
.hero__bg-text svg path {
  fill: var(--text-bw); 
}
.hero__bg-text svg .primary-part{fill:var(--icon-color);}

:root[data-theme="light"] .hero__bg-text::first-letter {
    color: #0022ff;
    opacity: 0.9;
}


/* ==========================================================================
   5. ВЫПАДАЮЩЕЕ БОЛЬШОЕ МЕНЮ (НАЧИНАЕТСЯ ПОД КНОПКАМИ ШАПКИ)
   ========================================================================== */
.nav-menu {
    position: fixed;
    top: calc(var(--header-height) - 20px); /* Выравнивание ровно под уровень кнопок шапки */
    right: 40px; /* Равнение по правой границе контента (совпадает с padding шапки) */
    width: var(--menu-width);
    z-index: 9990; /* Чуть ниже кнопок шапки, чтобы кнопка МЕНЮ перекрывала верх панели */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);pointer-events: none;
}

/* Активация меню */
body.menu-open .nav-menu {
    opacity: 1;pointer-events: auto; 
    visibility: visible;
    transform: translateY(0);
}



.nav-menu__container {
    position: relative; /* Создаем систему координат для фона */
background-color: var(--menu-bg-right);
    z-index: 1;
    display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.menu-open .menu-icon-state svg{display: none;}
/* Изолированный фоновый слой для картинки с эффектом из Figma */
.nav-menu__container::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    
    /* Подключаем вашу картинку */
  background-image: url(img/bg-menu.webp);
    background-repeat: repeat;
    background-position: top center;
      /* Центрирование по горизонтали и вертикали */
  background-position: center center;
  
  /* Повторение только по вертикали (чтобы картинка заполнила всю высоту) */
  background-repeat: repeat-y;
    /* Воспроизводим эффект из Figma один в один */
    mix-blend-mode: exclusion; 
    
    z-index: -1; /* Отправляем строго под текст и кнопку */
    pointer-events: none; /* Слой не будет мешать выделению текста и кликам */
      background-size: 38px auto; 
}


.nav-menu__panel {
    padding: 35px; /* Сбалансированный верхний отступ */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Левая панель с контактами */
.nav-menu__panel--info {

    color: var(--menu-text-dark);
    justify-content: flex-start;
    gap: 40px;
}

.nav-menu__panel--info .btn-action--blue {
    align-self: flex-start;
    height: 50px;
    padding: 0 10px;
}

/* Правая панель со ссылками навигации */
.nav-menu__panel--links {

    justify-content: flex-start;
}

.nav-menu__caption {
font-size: 26px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
text-transform: uppercase;
 color: var(--menu-text-dark);
}

.nav-menu__email {
font-size: 26px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
text-transform: lowercase;
     color: var(--menu-text-dark);
}

.nav-menu__disclaimer {
    font-family: 'TikTok Text';
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 125%;
letter-spacing: 0%;
text-transform: none;
    color: var(--menu-text-dark);
}

/* Списки навигации и треугольные стрелочки */
.menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-list__item {
    position: relative;
    padding-left: 20px; /* Место под треугольник */
}

.menu-list__link {
font-size: 26px;
line-height: 125%;
letter-spacing: 10%;
text-transform: uppercase;

    color: var(--text-menu-link); /* Спокойный серый для неактивных ссылок */
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
    display: inline-block;
}

/* Треугольная стрелочка перед активным пунктом или при наведении */
.menu-list__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Центрируем иконку по вертикали */
   opacity: 0; 
    width: 8px;
    height: 14px;
background-image: var(--link-icon);
}


.menu-list__link:hover, 
.menu-list__link.active {
    color: var(--menu-text-dark);
}

.menu-list__item:hover::before,
.menu-list__item:has(.active)::before {
    opacity: 1;
}


/* ==========================================================================
   6. ПОПАП ОКНО С ФОРМОЙ ЗАЯВКИ
   ========================================================================== */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 150;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.popup.active {
    opacity: 1;
    visibility: visible;
}

.popup__body {
    background: var(--bg-switcher-active);
    padding: 40px;
    width: 100%;
    max-width: 600px;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}

.popup__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--text-main);
    cursor: pointer;
}

.popup__title {
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: bold;
}

.popup__form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popup__form input {
    padding: 14px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background: transparent;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
}
/* ==========================================================================
   Наши услуги и компетенции (Заголовки секции)
   ========================================================================== */
#title-services {
    background-color: var(--bg-left);
}

.container {
    padding: 160px 40px 80px 40px;
}

.big-title {
    color: var(--text-main);
    font-size: 55px;
    line-height: 110%;
    letter-spacing: 10%;
    text-transform: uppercase;
    padding-bottom: 30px;
}

.small-text {
    color: var(--text-main);
    font-family: 'TikTok Text', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 125%;
    letter-spacing: 0%;
    text-transform: none;
}
.popup .form-grid{margin-top:10px;}
.popup .form-footer {
	gap: 20px;
}
.popup .btn-action {
	padding: 0 14px;
}
/* ==========================================================================
   ОСНОВНАЯ СЕТКА ШАБЛОНА
   ========================================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

/* ЭЛЕМЕНТ КАРТОЧКИ */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.3s ease;
    z-index: 1;
   background-color: var(--bg-bw);
    /* Задайте здесь фиксированную высоту карточки из макета Figma, например: */
    aspect-ratio: 960 / 660;
}
.service-card1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(img/uslugi-bg-1.webp);
	background-repeat: repeat;
	background-position: center right;
	background-repeat: repeat-y;
    mix-blend-mode: exclusion;opacity: 0.1;
	z-index: -1;
	pointer-events: none;
	background-size: 38px auto;
}
.service-card1::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(img/uslugi-bg-2.webp);
	background-repeat: repeat;
	background-position: bottom center;
	background-repeat: repeat-x;
    mix-blend-mode: exclusion;
	z-index: -1;
	pointer-events: none;
	background-size: auto 38px ;
}
.service-card2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(img/uslugi-bg-2.webp);
	background-repeat: repeat;
	background-position: bottom center;
	background-repeat: repeat-x;
    mix-blend-mode: exclusion;
	z-index: -1;
	pointer-events: none;
	background-size: auto 38px ;
}
.service-card3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(img/uslugi-bg-3.webp);
	background-repeat: repeat;
	background-position: center right;
	background-repeat: repeat-y;
    mix-blend-mode: exclusion;
	z-index: -1;opacity: 0.1;
	pointer-events: none;
	background-size:  38px auto ;
}
.service-card__btn{color: var(--bg-bw);
display: flex;
flex-direction: row;
align-items: center;
padding: 40px 35px 16px 40px;
gap: 10px;
background-color: var(--menu-text-dark);
flex: none;
order: 1;font-size: 18px;
flex-grow: 0;
z-index: 1;
}
.service-card__btn svg{fill: var(--bg-bw);}
.service-card__btn{text-decoration: none;}
/* 1. ВЕРХНИЙ ЭЛЕМЕНТ: Бэйдж/иконка */
.service-card__badge {
    font-family: 'TikTok Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
    letter-spacing: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px; 
    gap: 12px;
    color: var(--bg-bw);
    background-color: var(--menu-text-dark);
    
    /* Толкает контент ниже себя в центр карточки */
    margin-top: 40px; 
    margin-bottom: auto; 
}

.service-card__badge svg {
    fill: var(--bg-bw);
}
.service-card__title{color: var(--menu-text-dark);
font-size: 36px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
text-align: center;
}
.service-card__hover-text{ font-family: 'TikTok Text', sans-serif;
text-transform: none;
font-weight: 400;
font-size: 20px;
line-height: 125%;
letter-spacing: 0%;
text-align: center;
max-width: 426px;margin-left: auto;margin-right: auto;
}

/* 2. ЦЕНТРАЛЬНЫЙ БЛОК: Заголовок + Скрытый текст */
.service-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding-bottom: 79px;
    /* Толкает нижнюю границу, удерживая заголовок строго по центру */
    margin-bottom: auto; 
}

/* Скрытый по умолчанию текст в центре */
.service-card__hover-text {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    margin-top: 15px; /* Отступ от заголовка */
}

/* 3. НИЖНИЙ ЭЛЕМЕНТ: Кнопка */
.service-card__btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    
    /* Прячем кнопку под нижний срез карточки */
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

/* ==========================================================================
   ЛОГИКА ВЗАИМОДЕЙСТВИЯ (HOVER)
   ========================================================================== */
   .service-card:hover{
background-color: #0900B8;

}
.service-card:hover::before{mix-blend-mode: screen;
  opacity: 1;}
.service-card:hover {
    cursor: pointer;
    	
}

/* Проявляем скрытый текст в центре */
.service-card:hover .service-card__hover-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);color:#FFFFFF;
}

/* Выдвигаем кнопку снизу */
.service-card:hover .service-card__btn {
    transform: translateY(0);
}
/* Проявляем скрытый текст в центре */
.service-card:hover .service-card__title {
    transform: translateY(0);color:#FFFFFF;
}


/* ==========================================================================
   Наши проекты
   ========================================================================== */



/* Контейнер всей секции */
.projects {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 40px;
  position: relative; /* База для позиционирования фонового слоя */
    z-index: 1; /* Создаем контекст наложения */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;background-color: var(--bg-bw);
    padding-top: 100px;
}
.projects::before {
content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Подключаем картинку точек */
    background-image: url('img/bg-project.webp');
    
    /* Размножаем точки плиткой по всей площади секции проектов */
    background-repeat: repeat-x; 
    background-position: top center;
    background-size: auto 691px; /* Оригинальный размер точек из макета */
    
    /* Включаем режим наложения как в Figma */
    mix-blend-mode: exclusion; 
    z-index: -2; /* Отправляем строго под контент, карточки и кнопку */
    pointer-events: none; /* Слой прозрачен для кликов мыши */
}
.projects::after{ content: "";
    position: absolute;top: 0; left: 0; right: 0; bottom: 0;  z-index: -1; /* Отправляем строго под контент, карточки и кнопку */
    pointer-events: none; /* Rectangle 15157 */
background-image: var(--bg-pro);background-repeat: repeat-x;

}
/* Заголовок секции (прижат к правому краю, как на макете) */
.projects__main-title {
    align-self: flex-end;
    margin: 0;
    margin-bottom: -100px;
}


/* ==========================================================================
   ОБНОВЛЕННАЯ ШАХМАТНАЯ СЕТКА (ДЛЯ ДЕСКТОПА)
   ========================================================================== */
/* ==========================================================================
   ОБНОВЛЕННАЯ СЕТКА С УЧЕТОМ ВОДЯНОГО ЗНАКА
   ========================================================================== */
.projects__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    column-gap: 40px; 
    row-gap: 60px; 
    width: 100%;
}

/* ЛЕВАЯ КОЛОНКА */
.projects__grid > .project-card:nth-child(2) { /* первая карточка */
    grid-column: 1;
    grid-row: 1;
}
.projects__grid > .project-card:nth-child(4) { /* третья карточка */
    grid-column: 1;
    grid-row: 2;
}

/* ПРАВАЯ КОЛОНКА */

/* 1. Наша цифра 112+ */
.project-card__bg-watermark {
 grid-column: 2;
    grid-row: 1;
    align-self: flex-end; 
    
    position: relative;
    z-index: 1; /* Остается на нижнем слое */
    
    /* СМЕЩЕНИЕ:
       Первое число (-120px) — двигает цифру ВЛЕВО (подберите под макет)
       Второе число (-240px) — выталкивает цифру НАВЕРХ за пределы ноутбука */
    transform: translate(0, -400px); 
    
    /* Убедитесь, что здесь нет pointer-events, чтобы цифра не мешала ховеру */
    pointer-events: none;
    
    font-size: 128px;
    line-height: 1;
        font-family: 'Press Start 2P';
font-weight: 400;
font-style: Regular;
font-size: 128px;
leading-trim: NONE;
line-height: 108%;
letter-spacing: 0%;
text-transform: uppercase;
    line-height: 1;
    color:rgba(237, 237, 240, 1)
}

/* 2. Карточка с ноутбуком */
.project-card--offset {
    grid-column: 2;
    grid-row: 1 / 3; /* по-прежнему занимает две строки */
    align-self: center; /* по-прежнему идеально центрируется относительно левых */
    
    position: relative;
    z-index: 2; /* приподнимаем над цифрой, чтобы карточка перекрывала её сверху */
}

/* Элемент карточки проекта */
.project-card {
    display: flex;
    flex-direction: column;
    width: 100%;background-color: var(--bg-bw);
}

/* Контейнер для картинки (нужен для контроля пропорций и водяных знаков) */
.project-card__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;overflow: hidden;
    cursor: pointer; display: flex;
    align-items: center;
    justify-content: center;
}
/* Белая плашка-оверлей (занимает 100% площади картинки) */
.project-card__overlay {
    position: absolute;
   width: 90%;
height: 90%;
max-width:439px;
max-height:518px;
    background-color: #FFFFFF; /* Белый фон как на макете */
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Текст вверху/центре, синяя кнопка строго внизу */
    align-items: center;
    box-sizing: border-box;
    
    /* По умолчанию скрываем весь блок */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Внутренний контейнер для текста и логотипа (центрирование контента) */
.project-card__overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;gap:100px;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    padding: 24px 20px; /* Внутренние отступы белого квадрата */
    width: 100%;
    box-sizing: border-box;
}

/* Синяя кнопка внизу оверлея */
.project-card__btn-blue {
    width: 100%;
  background-color: #0900B8;
  color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Задайте высоту и паддинги по макету */
    padding: 18px 0; 
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
padding: 40px 135px 16px 40px;

  
    /* Легкая анимация кнопки: приподнимается снизу при появлении оверлея */
    transform: translateY(20px);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.project-card__btn-blue svg{fill: #FFFFFF;}
/* При наведении на картинку — плавно показываем белый оверлей */
.project-card__image-wrapper:hover .project-card__overlay {
    opacity: 1;
    visibility: visible;
}

/* При наведении на картинку — синяя кнопка плавно встает на свое место */
.project-card__image-wrapper:hover .project-card__btn-blue {
    transform: translateY(0);
}
/* Сама картинка */
.project-card__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Текст под картинкой */
.project-card__title {
    margin: 0;
color: var(--menu-text-dark);
  font-size: 36px;
  leading-trim: NONE;
  line-height: 125%;
  letter-spacing: 10%;

    margin-top: 40px; 
}


.project-type{
font-size: 26px;
line-height: 125%;color: #060612;
letter-spacing: 10%;
}
.project-desc{max-width: 319px;margin-left: auto;margin-right: auto; font-family: 'TikTok Text', sans-serif;
font-weight: 400;
font-style: Regular;
font-size: 20px;
line-height: 125%;color: #060612;
letter-spacing: 0%;text-transform: none;
text-align: center;
}
/* ==========================================================================
   БЛОК КНОПКИ "ЗАГРУЗИТЬ ЕЩЕ"
   ========================================================================== */
.projects__action {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Выравнивание кнопки по правому краю */
    margin-top: 0; /* Дистанция от сетки проектов */
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;gap:12px;
    cursor: pointer;
    box-sizing: border-box;
font-size: 18px;
line-height: 125%;
letter-spacing: 10%;
text-transform: uppercase;
color: var(--text-bw);
height:55px;
width:275px;
background-color:var(--bg-switcher) ;
border: none;
}
.btn-load-more svg{stroke:var(--text-bw);}









.about-company {
    position: relative; /* База для фонового слоя внизу */
    z-index: 1;padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Рекомендуется добавить padding-bottom, чтобы контент не перекрывал узор намертво */
    padding-bottom: 120px; 
    background-color: var(--bg-bw);
}
.about-company__subtitle, .about-company__lead{font-family: 'TikTok Text', sans-serif;
font-weight: 400;
font-style: Regular;
font-size: 24px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
color: var(--menu-text-dark);text-transform: none;padding-top: 10px;padding-bottom: 10px;
}
.feature-item__desc{font-family: 'TikTok Text', sans-serif;text-transform: none;
font-weight: 400;
font-style: Regular;
font-size: 20px;
line-height: 125%;
letter-spacing: 0%;
}
.feature-item__title{margin-bottom:10px;}
.feature-item__icon{margin-bottom: 40px;}
/* ==========================================================================
   ФОНОВЫЙ ЭЛЕМЕНТ (КВАДРАТИКИ ВНИЗУ БЛОКА)
   ========================================================================== */
.about-company::before {
    content: "";
    position: absolute;
    bottom: 0; /* Намертво прижимаем узор к нижнему краю секции */
    left: 0;
    right: 0;
    height: 38px; /* Примерная высота полосы с квадратиками из макета */
    
    background-image: url('img/bg-toper.webp'); /* Ваша картинка с точками/квадратиками */
    background-repeat: repeat-x; /* Размножаем только по горизонтали */
    background-position: bottom center;
    background-size: auto;
    
    /* Эффект смешивания из макета */
    mix-blend-mode: exclusion; 
    
    z-index: -1; /* Прячем под элементы и текст */
    pointer-events: none;
}

/* ==========================================================================
   ВЕРХНЯЯ ЧАСТЬ: Описание компании (Смещение вправо)
   ========================================================================== */
.about-company__header {
    display: flex;
    justify-content: flex-end; /* Толкает контент к правому краю */
    width: 100%;
    margin-bottom: 160px; /* Отступ до ряда преимуществ */
}

/* Контейнер для двух абзацев текста */
.about-company__intro {
    width: 100%;
    max-width: 50%; /* Ограничиваем ширину текста, чтобы он стоял аккуратным блоком справа */
}

/* ==========================================================================
   НИЖНЯЯ ЧАСТЬ: Ряд преимуществ (4 колонки)
   ========================================================================== */
.about-company__features {
    display: grid;
    /* Делим строку на 4 абсолютно равные колонки */
    grid-template-columns: repeat(4, 1fr); 
    column-gap: 20px; /* Промежуток между колонками из макета */
    width: 100%;
}

/* Отдельная карточка преимущества */
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Элементы выровнены по левому краю карточки */
}


/* Заголовок преимущества */
.feature-item__title {
    margin: 0;
    margin-bottom: 12px; /* Отступ снизу до описания */
    text-transform: uppercase;
}

/* Описание преимущества */
.feature-item__desc {
    margin: 0;
}

/* ==========================================================================
   награды
   ========================================================================== */

.badges-section {
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   ОСНОВНАЯ СЕТКА (ДЛЯ БОЛЬШИХ ЭКРАНОВ)
   ========================================================================== */
.badges-grid {
    padding:160px 40px;
    display: grid;
    /* Делаем 3 колонки. С помощью minmax задаем им одинаковую ширину, 
       но позволяем им не сжиматься меньше определенного размера из макета */
    grid-template-columns: repeat(4, 1fr);
    /* Расстояние между карточками (задайте точный зазор из Figma) */
    column-gap: 40px; 
    width: 100%;background-color: var(--bg-bw);
}
.badge-card--primary {
    grid-column: span 2; /* Занимает ровно 2 колонки из 4 (то есть левую половину экрана) */
 background-color: #0900B8;
color:#FFFFFF;max-width: 50%;
}
.badge-card--secondary {
    grid-column: span 1; /* Каждая занимает ровно по одной колонке */
background-color: var(--bg-switcher);
}
/* Общий элемент карточки/плашки */
.badge-card {

display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 30px;
gap: 20px;


height: 274px;

}

/* Элементы внутри карточки */
.badge-card__icon,
.badge-card__title {
    margin-top: 0;
    margin-bottom: auto; /* Выталкивает текст описания к самому низу плашки */
}

.badge-card__desc {
    margin-bottom: 0; /* Намертво прижимается к нижнему внутреннему отступу карточки */
    width: 100%;
 font-family: 'TikTok Text', sans-serif;text-transform: none;
font-weight: 400;
font-style: Regular;
font-size: 20px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;

}
.badge-card--secondary .badge-card__title{font-family: 'Press Start 2P';
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: 100%;
letter-spacing: 10%;
text-transform: uppercase;
}
        /* Заглушка сверху, чтобы сайту было откуда скроллиться */
        .spacer-top {
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e8e8ed;
            font-size: 20px;
            color: #86868b;
        }

        /* Заглушка снизу, чтобы можно было проскроллить последний элемент */
        .spacer-bottom {
            height: 80vh;
            background-color: #e8e8ed;
        }
.clients-section .btn-load-more {

    margin-top: 0;
  margin-bottom: -70px
}
        /* ==========================================================================
           ОСНОВНАЯ СТРУКТУРА И СЕТКА БЛОКА (ДЕСКТОП)
           ========================================================================== */
        .clients-section {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Левая колонка уже, правая — шире */
            column-gap: 80px;
            width: 100%;

            margin: 0 auto;
            padding: 160px 40px;
            box-sizing: border-box;
            position: relative;
        }

        /* ЛЕВАЯ КОЛОНКА: Заголовок и кнопка фиксируются на экране */
        .clients-section__sidebar {
            position: sticky;
            top: 100px; /* Дистанция залипания от верхнего края экрана */
            height: calc(100vh - 200px); /* Заставляем контейнер растянуться под высоту экрана */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Толкает заголовок вверх, кнопку вниз */
            box-sizing: border-box;
        }

        .clients-info-top {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }


        /* ПРАВАЯ КОЛОНКА: Список компаний */
        .clients-section__content {
            width: 100%;
        }

        .clients-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 30px; /* Компактные отступы между строками как в макете */
            padding-bottom: 30vh; /* Запас снизу, чтобы последняя строка дошла до триггера */
        }

        /* ЭЛЕМЕНТ СПИСКА (СТРОКА КЛИЕНТА) */
        .client-item {
            position: relative; /* База для абсолютного выноса иконки вправо */
            display: flex;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
        }

        /* Название компании */
        .client-item__name {
font-family: 'Press Start 2P';
font-weight: 400;
font-style: Regular;
font-size: 64px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
text-transform: uppercase;

            color: var(--text-menu-link); /* Изначально пункты серые/блеклые */
            transition: color 0.3s ease;
        }

        /* АБСОЛЮТНЫЙ БЛОК ЛОГОТИПА (Вынесен строго вправо относительно текста) */
        .client-item__logo-box {
            position: absolute;
            top: 50%;
           right: 0;z-index: 9;
            margin-left: 60px; /* Расстояние от букв до белой плашки */
            width: 273px;
            height: 273px;
            background-color: #ffffff; /* Белая плашка под логотип */
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;

            /* Изначально прячем плашку и сдвигаем её вправо на 30px */
            opacity: 0;
            transform: translateY(-50%) translateX(30px); 
            transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .client-item__logo-box svg {
            width: 80px;
            height: 80px;
        }

        /* ==========================================================================
           СОСТОЯНИЕ АКТИВАЦИИ ПРИ СКРОЛЛЕ (Добавляется динамически через JS)
           ========================================================================== */
        
        /* Буквы становятся темными/активными */
        .client-item.is-active .client-item__name {
            color: var(--text-bw); 
        }

        /* Белая плашка с иконкой плавно проявляется и въезжает на место */
        .client-item.is-active .client-item__logo-box {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
.clients-btn-more{background-color: var(--bg-bw);}
/* ==========================================================================
   АРХИТЕКТУРА И СЕТКА СЛАЙДЕРА (ДЕСКТОП ОТ 1023px)
   ========================================================================== */
.journal-section {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 60px 40px 160px 40px;
}

/* Верхняя линия: Заголовок слева, слайдер справа */
.journal-main-row {
    display: block;margin-top: 40px;
    width: 100%;
}

.journal-title {
    margin: 0;
    text-transform: uppercase;
}

/* ЛЕНТА СЛАЙДЕРА (Окно просмотра) */
.journal-slider-viewport {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto; /* Включаем горизонтальный скролл */
    scroll-behavior: smooth; /* Плавная прокрутка при клике на стрелки */
    gap:40px;
    
    /* 💥 ХИТРЫЙ CSS SNAP: карточки будут "магнититься" к краям при прокрутке */
    scroll-snap-type: x mandatory; 
    
    /* Прячем стандартный некрасивый скроллбар браузера */
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
}
.journal-slider-viewport::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* КАРТОЧКА СЛАЙДЕРА */
.journal-card {
    display: flex;
    flex-direction: row; /* Текст слева, картинка справа */
    flex-shrink: 0; /* Запрещаем карточкам сжиматься */
    
    /* Задайте ширину одной карточки по макету, например 50% от окна слайдера, 
       чтобы на экране было видно ровно две штуки, как на макете */
    width: 50%; 
    box-sizing: border-box;
    background-color: var(--bg-switcher-active);
    /* Включаем точку привязки для скролл-эффекта */
    scroll-snap-align: start; 
}
.journal-card:hover{
background: #0900B8;
color: #fff;
}
/* Внутренние блоки карточки */
.journal-card__text-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Заголовок сверху, дата внизу */
    width: 50%;
    box-sizing: border-box;
    padding: 16px 25px;
}

.journal-card__image-block {
    width: 50%;
    box-sizing: border-box;
}

.journal-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заполняет блок без искажения пропорций */
}

/* Нижняя линия управления: Кнопка слева, стрелки справа */
.journal-controls-row {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 3fr; /* Повторяем пропорции верхней сетки */
    align-items: center;
    width: 100%;text-decoration: none;
}

.btn-all-records {
    grid-column: 1; /* Встает строго под заголовок */
    align-self: flex-start;
    text-decoration: none;
}
.slider-arrows {
    grid-column: 2; /* Встает в зону слайдера */
    display: flex;gap: 10px;
    justify-content: flex-end; /* Сдвигаем стрелки в правый нижний угол */
}
.slider-arrows button{width: 218px;
height: 55px;
display: flex;align-items: center;justify-content: center;border: none;
    cursor: pointer;
    background: var(--bg-bw);
}
.btn-all-records svg{fill:var(--text-bw);stroke: transparent;}
.slider-arrows button:hover{background: var(--bg-switcher-active);}
.slider-arrows button svg{fill:var(--text-bw);}
.slider-arrows button:hover svg{fill-opacity:0.35;}
.journal-card__title{ font-family: 'TikTok Text', sans-serif;text-transform: none;
font-weight: 400;
font-style: Regular;
font-size: 24px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
color:var(--text-bw);
}
.journal-card:hover .journal-card__title{color: #fff;}
.journal-card__date{font-family: 'TikTok Text', sans-serif;text-transform: none;

font-size: 18px;
line-height: 125%;
opacity: 0.5;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}

.feedback-section {
    position: relative; /* База для абсолютных координат фонового слоя */
    z-index: 1; /* Создаем изолированный контекст наложения */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-bw);
    padding: 100px 40px 80px;
}
.feedback-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Подключаем фоновую картинку (например, bg-toper.webp или карту) */
    background-image: url('img/bg-form.webp');
    
    /* Настройки повторения и позиционирования под ваш макет */
    background-repeat: repeat; 
    background-position: top center;
    background-size: auto; /* Сохраняем оригинальный размер элементов фона */
    
    /* Воспроизводим эффект смешивания слоев из Figma */
    mix-blend-mode: exclusion; 
    opacity: 0.9;
    z-index: -1; /* Намертво уводим слой под форму, тексты и карту */
    pointer-events: none; /* Слой прозрачен для кликов мыши и тапов */
}
.feedback-section__left,
.feedback-section__right {
    width: 100%;
    position: relative;
}

.feedback-title {
    margin: 0;
max-width: 800px;
}

/* Контейнер для поля ввода */
.form-group {
    position: relative; /* База координат для лейбла */
    display: flex;
    flex-direction: column;
}
.form-grid{gap: 10px;grid-template-columns: repeat(2, 1fr);
  display: grid;margin-top: 160px; margin-bottom: 40px;}
  .form-group--full {
    grid-column: span 2; /* Заставляем элемент занять обе колонки сетки */
}
/* Настройки самого поля ввода */
.form-input,
.form-textarea {
    width: 100%;
    box-sizing: border-box;
height: 76px;color:var(--text-bw);
background: var(--bg-switcher);border: none;
font-size: 18px;
line-height: 125%;
letter-spacing: 10%;padding: 20px;
font-family: 'Oswald';font-weight:500;text-transform: uppercase;

}
.form-textarea{height: 150px;}
/* 1. БАЗОВОЕ СОСТОЯНИЕ НАДПИСИ (Лейбл стоит на месте обычного плейсхолдера) */
.form-label {
    position: absolute;
    top: 50%;font-size: 18px;
    transform: translateY(-50%);
    /* Смещаем влево, чтобы текст совпадал с началом ввода. 
       Задайте точный отступ из макета */
    left: 20px; font-family: 'Oswald';font-weight:500;text-transform: uppercase;
    color:var(--text-menu-link);
    pointer-events: none; /* Клик проходит сквозь текст прямо в инпут */
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавная анимация */
}

/* Фикс для textarea: изначально ставим лейбл не по центру, а чуть выше */
.form-textarea ~ .form-label {
    top: 30px;
}
.form-input:focus-visible,
.form-textarea:focus-visible{background: #fff;border:1px solid #0900B8;color:#060612;
font-family: 'Oswald';font-weight:500;text-transform: uppercase;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;

}
/* ==========================================================================
   МАГИЯ ПЕРЕМЕЩЕНИЯ: КЛИКНУЛИ (focus) ИЛИ ТЕКСТ УЖЕ ВВЕДЕН (not placeholder-shown)
   ========================================================================== */
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
.form-textarea:focus ~ .form-label,
.form-textarea:not(:placeholder-shown) ~ .form-label {
    /* 1. Убираем центрирование и намертво прижимаем к верхнему краю */
    top: 15px; 
    transform: translateY(0);
    
    /* 2. Убираем привязку слева и прижимаем в ПРАВЫЙ ВЕРХНИЙ УГОЛ */
    left: auto;
    right: 30px; /* Отступ от правого края инпута */
    
    /* 3. Уменьшаем размер шрифта (в основном CSS вы зададите точный размер, например 12px) */
font-family: 'TikTok Text', sans-serif;text-transform: none;color: #A8A8AC;
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
text-align: right;
}

/* Нижняя линия: согласие и кнопка */
.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.btn-submit {
    cursor: pointer;
}

/* ==========================================================================
   МЕХАНИКА КАСТОМНОГО ЧЕКБОКСА (По макету)
   ========================================================================== */
/* Общий контейнер (выравниваем чекбокс и текст в одну линию) */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* Намертво прячем стандартный чекбокс браузера, сохраняя доступность */
.custom-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* 🔳 НАШ КАСТОМНЫЙ КВАДРАТ ИЗ МАКЕТА */
.custom-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    
    /* Жесткие размеры и цвет фона из вашего задания */
    width: 22px;
    height: 22px;
    background-color: #060612;
    
    /* Добавьте рамку (border) или скругление углов (border-radius), если они есть на макете */
    
    transition: background-color 0.2s ease;
}

/* Настройки вашей SVG-галочки внутри квадрата */
.custom-checkbox__box svg {
    display: block;
    
    /* Изначально галочка полностью прозрачна и слегка сжата */
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ==========================================================================
   ЛОГИКА АКТИВАЦИИ ЧЕКБОКСА (Когда галочка поставлена)
   ========================================================================== */
/* Общий контейнер (выравниваем чекбокс и текст в одну линию) */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;gap:20px;
}

/* Намертво прячем стандартный чекбокс браузера, сохраняя доступность */
.custom-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* 🔳 НАШ КАСТОМНЫЙ КВАДРАТ ИЗ МАКЕТА */
.custom-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    
    /* Жесткие размеры и цвет фона из вашего задания */
    width: 22px;
    height: 22px;
    background-color: var(--text-bw);
    
    /* Добавьте рамку (border) или скругление углов (border-radius), если они есть на макете */
    
    transition: background-color 0.2s ease;
}

/* Настройки вашей SVG-галочки внутри квадрата */
.custom-checkbox__box svg {
    display: block;
    stroke: var(--bg-bw);
    /* Изначально галочка полностью прозрачна и слегка сжата */
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.custom-checkbox__text{font-family: 'TikTok Text', sans-serif;text-transform: none;color: #A8A8AC;
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
text-align: right;
}
.custom-checkbox__text a{color: #fff;
  border-bottom: dotted 3px #fff;
  padding-left: 4px;
  padding-right: 4px;
  text-decoration: none;}
/* ==========================================================================
   ЛОГИКА АКТИВАЦИИ ЧЕКБОКСА (Когда галочка поставлена)
   ========================================================================== */

/* Как только input получает статус checked, мы плавно проявляем SVG внутри соседнего бокса */
.custom-checkbox__input:checked + .custom-checkbox__box svg {
    opacity: 1;
    transform: scale(1); /* Возвращаем оригинальный размер галочки */
}

/* Поддержка доступности: легкая обводка квадрата, если пользователь переключается клавиатурой (Tab) */
.custom-checkbox__input:focus-visible + .custom-checkbox__box {
    outline: 2px solid #1A3BF5; /* Цвет обводки фокуса */
    outline-offset: 2px;
}

/* ==========================================================================
   ПРАВАЯ КОЛОНКА (АДРЕСНЫЙ БЛОК НА КАРТЕ)
   ========================================================================== */
.map-address-badge {
    position: absolute;
    /* Позиционируйте белую плашку поверх карты по координатам из Figma */
    z-index: 5;
    display: flex;
    flex-direction: column;background: var(--bg-switcher);
    width:273px; height:273px;flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 30px;
gap: 19px;
right: 200px;top:150px;

}
.map-tochka{position: absolute;
  bottom: -34px;
  left: -34px;
  width: 34px;
  height: 34px;}
    .map-address-badge__sub{font-family: 'TikTok Text', sans-serif;text-transform: none;
font-weight: 400;
font-style: Regular;
font-size: 18px;
line-height: 125%;
letter-spacing: 0%;display: block;
margin-bottom:10px;color: var(--map-sup);
}
.map-address-badge__text{font-family: 'TikTok Text', sans-serif;text-transform: none;
font-weight: 400;
font-style: Regular;
font-size: 24px;
line-height: 125%;
letter-spacing: 0%;

}
.map-address-badge__link {
    text-decoration: none;
  font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
display: inline-flex;
  align-items: center;
  justify-content: center;gap:12px;
  color:var(--text-bw);cursor: pointer;
}
.map-address-badge__link svg{fill:var(--text-bw);}
.map-marker-btn {
    position: absolute;
    /* Позиция интерактивной кнопки-точки на карте по координатам из Figma */
    z-index: 4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО "СПАСИБО" (ПОПАП)
   ========================================================================== */
.thanks-popup {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Изначально прячем попап */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Класс активации попапа, который добавит JS после успешной отправки */
.thanks-popup.is-open {
    opacity: 1;
    visibility: visible;
}

.thanks-popup__overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Затемнение фона сайта */
}

.thanks-popup__window {
position: relative;
  z-index: 2;
  background-color: var(--bg-bw);
  box-sizing: border-box;
  padding: 40px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}

.thanks-popup__close {
    position: absolute;
    top:20px; right:20px;
    cursor: pointer;
    background: none;
    border: none;
}
.ticker-section {
    display: flex;
    justify-content: space-between; /* Логотип строго слева, текст строго справа */
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding:70px 40px;
    background: var(--bg-bw);
}

.ticker-section__logo {
    display: flex;
    align-items: center;
}
.ticker-section__logo svg{
	fill: var(--icon-color);
}
.ticker-section__text {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Запрещаем перенос строки, чтобы фразы не прыгали */
}
.ticker-static{color: var(--ticker-static); 
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
text-transform: uppercase;margin-right: 6px;
}
/* Контейнер для динамического текста и скобок */
.ticker-dynamic-wrapper {
    display: inline-flex;
    align-items: center;
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;


}

/* Каретка (мигающий курсор) в конце печатающегося текста */
.ticker-dynamic-text {
    position: relative;
    display: inline-block;
    padding-right: 4px; /* Зазор под курсор */
}

.ticker-dynamic-text::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 2px;
    background-color: currentColor; /* Цвет курсора совпадает с цветом текста */
    
    /* Эффект мигания */
    animation: blinkCursor 0.7s infinite transparent;
}

/* Анимация мигания каретки */
@keyframes blinkCursor {
    50% { background-color: transparent; }
}
/* Главный контейнер подвала */
.footer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  padding: 150px 40px;
  background: var(--bg-bw);
}
.footer-address{
font-weight: 500;
font-style: Medium;
font-size: 42px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
margin-bottom: 25px;
}
.footer-menu-list__item:hover, .footer-menu-list__item.active{color: var(--menu-text-dark); } 
.footer-menu__link{    position: relative;
    padding-right: 20px; /* Место под треугольник */}
footer .footer-menu__link::before {
    content: "";
    position: absolute;
    left: auto;
    right: 0;
    top: 50%;
     transform: translateY(-50%) rotate(180deg);
   opacity: 0; 
    width: 8px;
    height: 14px;
background-image: var(--link-icon);
}
.footer-menu-list__item:hover ::before{opacity: 1;}
/* ==========================================================================
   ВЕРХНЯЯ ЧАСТЬ: Трехколоночная сетка (Десктоп)
   ========================================================================== */
.footer__top {
    display: grid;
    /* Делаем 4 колонки, как в блоке преимуществ и плашек! 
       Первая колонка (контакты) займет половину экрана (span 2),  
       а меню 1 и меню 2 займут оставшиеся две колонки. Так все направляющие совпадут! */
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px; /* Тот же зазор, что и во всем проекте */
    width: 100%;
    padding-bottom: 160px;
}

.footer-col--contacts {
    grid-column: span 2; /* Растягиваем левый блок на 2 колонки из 4 */
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;gap:14px;
}

.footer-menu__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
}
.footer-email{
font-weight: 500;
font-style: Medium;
font-size: 26px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 10%;
color:var(--icon-color);
text-decoration: none;
border-bottom: dotted 3px var(--icon-color);
  padding-left: 4px;
  padding-right: 4px;
}
/* ==========================================================================
   НИЖНЯЯ ЧАСТЬ: Мета-данные и огромный логотип
   ========================================================================== */
.footer__bottom {
    display: flex;
    justify-content: space-between; /* Копирайты слева, логотип строго справа */
    align-items: flex-end; /* Прижимаем тексты к нижней линии логотипа */
    width: 100%;padding-top: 50px;
    
    /* Задайте здесь margin-top из макета, чтобы отодвинуть логотип от верхнего меню */
}

.footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;gap:10px;
}

.footer-policy {
    text-decoration: none;
}

.footer-copyright {
    margin: 0;
}

/* Огромный логотип в углу */
.footer-logo {
    display: flex;
    align-items: flex-end;
    line-height: 1;
}
.footer-logo  svg{ width: 100%;
    height: auto;
    display: block;}
/* Выделение букв EX синим цветом на светлой теме как на макете */
.footer-logo  svg path {
  fill: var(--text-bw); 
}
.footer-logo svg .primary-part{fill:var(--icon-color);}
.footer-policy{font-family: 'TikTok Text', sans-serif;text-transform: none;
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
color:var(--footer-link);
}
.footer-copyright{font-family: 'TikTok Text', sans-serif;text-transform: none;
font-weight: 400;
font-style: Regular;
font-size: 18px;
leading-trim: NONE;
line-height: 125%;
letter-spacing: 0%;
color:var(--map-sup);
}


/* ==========================================================================
   7. АДАПТИВНОСТЬ 
   ========================================================================== */
   @media (max-width: 1340px) {
    .city-select__trigger {
	width: 220px;
}  
    body.menu-open .btn-action--menu {
        width: 140px; 
    }

    .header__right {
	justify-content: flex-end;
	width: 70%;
}
.btn-action {
    padding: 0 14px;
}
.theme-switcher__btn {
	width: 100px;
}
.project-card__bg-watermark {
	transform: translate(0, -320px);
}
    .about-company__features {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        gap: 60px;
    }
    .badges-grid {
	grid-template-columns: repeat(3, 1fr);
}
.badge-card--primary {
	grid-column: span 1;
    max-width: 100%;
}
.footer-address {
	font-size: 30px;
}
.menu-list__link {
	font-size: 22px;
}
.project-card__title {
	font-size: 26px;
}
.nav-menu__caption {
	font-size: 22px;

}
 /* Превращаем всю секцию в одну вертикальную колонку */
    .clients-section {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "info"
            "content"
            "button";
        gap: 30px; /* Отступы между блоками */
    }

.clients-section__sidebar {
	height: auto;
	z-index: 2;
	background: var(--bg-switcher);
}
.clients-section__content {
	padding-top: 50px;
}
.clients-list {
	padding-bottom: 0;
}

}
   @media (max-width: 1199px) {
       .hero__title, .client-item__name {
        font-size: 55px;
    }


    /* 2. Стилизуем блок города, когда он переехал внутрь левой панели меню */
    .nav-menu__panel--info .js-move-city {
        margin-bottom: 30px; /* Отступ от города до текста "ПОЖ-ТА, НАПИШИТЕ НАМ" */
        padding: 0;
    }
    

    
}

@media (max-width: 1023px) {
        .services-grid {
        display: flex;
        flex-direction: column; /* Складываем карточки строго в один столбик */
    }
    .header {
        padding: 0 20px;
        height: 70px;
    }

       .hero__title, .client-item__name {
        font-size: 40px;
    }

.hero__content {
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	display: flex; flex-wrap: wrap;
	grid-template-columns: 1fr auto;
	align-items: flex-end;
	position: relative;
	z-index: 5;
	padding-bottom: 120px;
}
    .hero {
        padding: 0 20px;
    }


.big-title{font-size: 34px;}
.service-card__title{font-size: 26px;}
    .top-badge {
        justify-self: start;
        width: 100%;
        max-width: 280px;height: auto;
        bottom: 70px;
    }
.hero {
	justify-content: flex-start;
    padding-top: 100px;
}
    .nav-menu {
        right: 0;
        top: 70px;
        width: 100%;
        max-width: 100%;
    }

 

    .nav-menu__panel {
        padding: 40px 20px;
    }

    .nav-menu__panel--info {
        border-right: none;
    }

.nav-menu__container::before {

	background-image: none;

}
.btn-action {
	padding: 0 14px;
	width: 200px;
}

 /* Сбрасываем выравнивание заголовка на мобильных (по левому краю привычнее) */
    .projects__main-title {
        align-self: flex-start;
        margin-bottom: 40px;
    }

    /* Перестраиваем сетку в одну колонку */
    .projects__grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    /* Полностью обнуляем десктопное смещение, иначе на мобильном будут дыры */
    .project-card--offset {
        margin-top: 0;
    }


    /* Кнопку "Загрузить еще" на мобилках центрируем или растягиваем во всю ширину */
    .projects__action {
        justify-content: center;
        margin-top: 40px;
    }
    
    .btn-load-more {
        width: 100%; /* На смартфонах кнопка во всю ширину экрана удобнее для клика */
        max-width: 320px;
    }
        .projects__grid {
        display: flex;
        flex-direction: column; /* всё встает в один столбик */
        gap: 30px;
    }
    
    .project-card__bg-watermark {
        align-self: flex-start; /* выравниваем по левому краю под заголовком */
        transform: none; /* убираем десктопные смещения */
        font-size: 64px; /* уменьшаем размер под мобильный экран */
        margin-bottom: 10px;
    }
     .about-company {
        padding-bottom: 60px; /* Уменьшаем отступ под узор на мобильных */
    }

    /* Верхняя часть: убираем смещение вправо, на мобильном читается лучше по центру/слева */
    .about-company__header {
        justify-content: flex-start;
        margin-bottom: 40px;
    }

    .about-company__intro {
        max-width: 100%; /* Текст растягивается на всю ширину экрана */
    }

.badges-grid {
        display: flex;
        flex-direction: column; /* Складываем всё в один столбик */
        row-gap: 30px;
    }

    /* Обнуляем десктопное растягивание синей карточки */
    .badge-card--primary,
    .badge-card--secondary {
        grid-column: auto; 
        width: 100%;
    }
  /* Переключаем общую сетку секции во флекс-столбик */
    .clients-section {
        display: flex;
        flex-direction: column;
    }

    /* Отключаем десктопное sticky-залипание боковой панели */
    .clients-section__sidebar {
        position: static;
        height: auto;
        display: block; 
    }

    /* Смещаем кнопку «Смотреть все» в самый подвал секции */
    .btn-view-all {
        order: 3; 
        align-self: center; 
    }

    /* Список компаний */
    .clients-list {
        padding-bottom: 0; 
    }

    /* Карточка клиента на мобильном */
    .client-item {
        flex-direction: column; /* Текст и логотип встают друг под друга */
        align-items: center;    /* Центрируем название и логотип по горизонтали */
        text-align: center;
        gap:50px;
    }


    /* МОБИЛЬНЫЙ КОНТЕЙНЕР ЛОГОТИПА (Отцентрирован под текстом) */
.client-item__logo-box {
	position: relative;
	margin-left: 0;
	margin-top: 0;
	width: auto;
	height: 40px;
	opacity: 1;
	transform: translateY(10px) !important;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	background: transparent;
}
.clients-info-top{padding-bottom: 60px;}
    .client-item__logo-box svg, .client-item__logo-box img {
        width: auto;
        height: 40px;
    }

.journal-main-row,
    .journal-controls-row {
        display: flex;
        flex-direction: column; /* Разворачиваем внешние сетки в столбик */
        width: 100%;
    }

    /* 💥 ОСТАВЛЯЕМ СЛАЙДЕР ГОРИЗОНТАЛЬНЫМ ДЛЯ СВАЙПОВ ПАЛЬЦЕМ 💥 */
    .journal-slider-viewport {
        display: flex;
        flex-direction: row; /* Карточки продолжают идти слева направо */
        overflow-x: auto;    /* Разрешаем горизонтальную прокрутку пальцем */
        scroll-snap-type: x mandatory; /* Магнитный эффект свайпа сохраняется */
        width: 100%;
        
        /* Добавьте сюда небольшой отступ снизу из макета, 
           чтобы отделить ленту слайдера от нижней кнопки */
    }

    /* КАРТОЧКА СЛАЙДЕРА НА МОБИЛЬНОМ */
    .journal-card {
        flex-direction: column; /* Внутри самой карточки текст встает НАД картинкой */
        flex-shrink: 0;         /* Запрещаем карточкам сжиматься в гармошку */
        
        /* 💥 ВАЖНО ДЛЯ МОБИЛЬНОГО СЛАЙДЕРА:
           Задаем ширину карточки (например, 80% или 85% от ширины экрана),
           чтобы пользователь видел текущую статью целиком, и сбоку 
           чуть-чуть выглядывал край следующей карточки. Это подскажет, что надо свайпать! */
        width: 85%; 
        
        /* Центрируем карточку по экрану при свайпе */
        scroll-snap-align: center; 
    }

    .journal-card__text-block,
    .journal-card__image-block {
        width: 100%; /* Элементы внутри карточки занимают всю её ширину */
    }

    /* КНОПКА «ВСЕ ЗАПИСИ» */
    .journal-controls-row {
        order: 3; /* Смещаем кнопку под слайдер */
    }

    .btn-all-records {
        align-self: center; /* Центрируем кнопку по горизонтали на смартфонах */
        width: 100%;
        max-width: 320px; /* Ограничиваем ширину для аккуратного вида */
        text-align: center;
    }

    /* Стрелки навигации на мобильном по-прежнему скрываем, 
       так как пальцем листать гораздо удобнее, чем целиться в мелкие кнопки */
    .slider-arrows {
        display: none; 
    }
     .feedback-section {
        display: flex;
        flex-direction: column; /* Сворачиваем колонки в столбик */
    }

    /* Поля формы выстраиваются строго друг под друга */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group--full {
        grid-column: auto;
    }

    /* Подвал формы: согласие и кнопка встают друг под друга */
    .form-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-submit {
        width: 100%; /* Кнопка отправки на мобильных на всю ширину */
        max-width: 320px;
        align-self: center; /* Центрируем её */
    }

    /* Правая колонка с картой падает под форму */
    .feedback-section__right {
        height: 400px; /* Задайте фиксированную высоту области карты на смартфонах */
        margin-top: 60px;
    }
.map-tochka{display: none;}
    .map-address-badge {
        position: static; /* На мобильных плашку можно вытащить в обычный поток над или под картой */
        width: 100%;
    }

 .ticker-section {
        flex-direction: column; /* Элементы встают друг под друга */
        justify-content: center;
        align-content: center;
        text-align: center;
        gap: 30px; /* Зазор между логотипом и текстом на мобильном */
    }

    .ticker-section__logo {
        justify-content: center;
    }

    .ticker-section__text {
        flex-direction: column; /* На узких экранах "С нами вы" и фраза встанут в 2 строки */
        justify-content: center;
        gap: 10px;
    }
    .footer {
        padding: 40px 20px; /* Замените на ваши мобильные паддинги */
    }

    /* Верхние три колонки выстраиваются в один столбик */
    .footer__top {
        display: flex;
        flex-direction: column;
        gap: 35px; /* Отступы между блоками меню на мобильном */
    }

    .footer-col--contacts {
        grid-column: auto;
    }

    /* Нижняя часть полностью перестраивается */
    .footer__bottom {
        display: flex;
        flex-direction: column; /* Элементы встают друг под друга */
        align-items: center;    /* Центрируем всё по середине экрана */
        text-align: center;
        gap: 40px;
    }

    /* Копирайты и политика */
    .footer-meta {
        order: 1; /* Встают НАД логотипом на мобильном */
        align-items: center;
        gap: 10px;
    }

    /* Огромный логотип падает в самый низ футера */
    .footer-logo {
        order: 2; /* Уходит под копирайты */
        justify-content: center;
        width: 100%;
    }


    /* Привязываем элементы к своим зонам */
    .clients-info-top {
        grid-area: info;
    }

    .clients-section__content {
        grid-area: content;
    }

    /* Кнопка падает в самый низ и центрируется */
    .btn-view-all {
        grid-area: button;
        justify-self: center; /* Центрируем кнопку по горизонтали */
        margin-top: 10px;
    }

    /* Сбрасываем лишние флексы или отступы сайдбара на мобильных */
    .clients-section__sidebar {
        display: contents; /* Заставляет браузер игнорировать этот контейнер, распределяя его детей по грид-сетке */
    }


}
@media (max-width: 991px) {
       .js-hide-mobile {
        display: none !important;
    }
   .nav-menu__container {
        grid-template-columns: 1fr; /* Колонки выстраиваются вертикально */
    }
    .project-card__overlay-content {
	padding: 10px;
}
}
@media (max-width: 767px) {
    .about-company__features {
        grid-template-columns: 1fr;
        row-gap: 40px; /* Отступ между карточками по вертикали */
    }
        .city-select, 
.project-card__btn-blue {
	font-size: 18px;
	padding: 20px;
}
.project-type {
	font-size: 20px;
}
.project-desc {
	font-size: 16px;
}
}
@media (max-width: 575px) {



.btn-load-more {
	font-size: 16px;
}
.journal-card {
	width: 100%;
}
.hero__title, .client-item__name {
	font-size: 20px;
}
.nav-menu__caption {
	font-size: 18px;
}
.header__left{display: none;}
.header__left, .header__right {
	gap: 10px;
}
.header__right {
	width: auto;margin: auto;
}
.theme-switcher__btn {
	width: 90px;
	padding: 5px;
}
.btn-action--menu {
	padding: 0 5px;
	width: 100px;
}
.project-card__overlay-content {
	gap: 10px;
}


}
@media (min-width: 768px) {

}


@media (min-width: 1341px) {
.projects__action .btn-load-more {

    margin-top: -50px;margin-bottom: 150px;
}
}
@media (min-width: 1920px) {
    .hero__content {
        grid-template-columns: 1fr auto;
    }
}




.theme-switcher__btn:not(.active):hover, .btn-action--menu:hover, a:hover, .city-select__item:hover, .city-select__trigger:hover, .btn-load-more__text:hover{
    filter: brightness(0.75) !important;
    opacity: 1 !important;
    opacity: 0.75 !important;
}