/* Start:/local/templates/main/css/template_styles.css?1778758331245274*/
/*
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃                     СИСТЕМА КНОПОК - ДОКУМЕНТАЦИЯ                      ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

📌 БАЗОВЫЙ КЛАСС
   .btn - применяется ко всем кнопкам (базовый стиль)

📌 МОДИФИКАТОРЫ (используйте вместе с .btn)

   🔴 .btn--primary (Основные красные CTA-кнопки)
      Применение: Все главные призывы к действию в секциях
      Цвет: красный (#ee3f3f) с эффектом hover
      Padding: большой (для акцента)
      Особенности: 
        - Поддерживает :disabled состояние (серая, недоступная)
        - Используется в большинстве секций
      
      Примеры использования:
        <button class="btn btn--primary">Заказать консультацию</button>
        <button class="btn btn--primary" disabled>Отправить</button>

   ⚪ .btn--secondary (Белая кнопка header)
      Применение: Вторичная кнопка в header ("Заказать звонок")
      Цвет: белый фон, при hover - черный фон с белым текстом
      Padding: средний
      
      Пример:
        <button class="btn btn--secondary">Заказать звонок</button>

   🔴 .btn--services (Красная кнопка с иконкой в header)
      Применение: Кнопка "Услуги" в header с иконкой-стрелкой
      Цвет: красный (#ee3f3f) с иконкой
      Padding: компактный
      Особенности: display: flex для размещения иконки
      
      Пример:
        <button class="btn btn--services">
          Услуги
          <img src="icon.png" class="btn__icon" alt="">
        </button>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✅ ПРЕИМУЩЕСТВА
   1. Единая точка управления стилями кнопок
   2. Легко изменить цвет/размер всех кнопок одного типа
   3. Меньше дублирования кода
   4. Понятная семантика модификаторов
   5. Поддержка состояния :disabled из коробки

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

/* Общие стили и сброс */
:root {
  /* Адаптивные значения с ограничениями для больших экранов */
  --header-offset-top: clamp(16px, 1.042vw, 20px);
  --header-padding-vertical: clamp(16px, 1.042vw, 20px);
  --header-border-radius: clamp(30px, 2.448vw, 47px);

  /* Стандартные отступы и размеры с ограничениями */
  --spacing-xs: clamp(5px, 0.26vw, 8px);
  --spacing-sm: clamp(10px, 0.521vw, 12px);
  --spacing-md: clamp(16px, 1.042vw, 20px);
  --spacing-lg: clamp(32px, 2.083vw, 40px);
  --spacing-xl: clamp(60px, 4.167vw, 80px);

  /* Размеры шрифтов с ограничениями */
  --font-size-base: clamp(16px, 1.146vw, 22px);
  --font-size-lg: clamp(20px, 1.354vw, 26px);
  --font-size-xl: clamp(24px, 1.875vw, 36px);
  --font-size-2xl: clamp(28px, 2.5vw, 48px);
  --font-size-3xl: clamp(36px, 3.333vw, 64px);

  /* Максимальная ширина контента */
  --max-content-width: 1900px;
  --max-section-width: 1400px;

  /* Для мобильной версии (переопределяется в медиа-запросе) */
  --header-mobile-offset: 10px;
  --header-mobile-height: 82px; /* padding 20px * 2 + примерная высота контента 42px */
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #e5e5e5;
  /* Динамический padding: верхний = отступ + высота header + доп. отступ, боковые = 0 (отступы теперь в main) */
  padding: calc(var(--header-offset-top) + var(--header-height, 94px) + 20px) 0
    0;
  transition: none;
}

/* Блокировка прокрутки при открытом меню */
body.menu-open {
  overflow: hidden;
}

/* Main контейнер - содержит весь контент кроме header */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* ========================================
   УНИФИЦИРОВАННАЯ СИСТЕМА КНОПОК
   ======================================== */

/* Базовый класс для всех кнопок */
.btn {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-weight: 500;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Модификатор: Основная красная кнопка (CTA) */
.btn--primary {
  background: #f42534;
  color: #ffffff;
  border-radius: clamp(16px, 1.042vw, 20px);
  padding: clamp(20px, 1.641vw, 32px) clamp(28px, 2.188vw, 42px);
  font-size: clamp(18px, 1.354vw, 26px);
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  width: fit-content;
}

.btn--primary:hover {
  background: #fa0012;
}

.btn--primary:disabled {
  background: #ffd8d8;
  color: #ffffff;
  cursor: not-allowed;
}

/* Модификатор: Белая кнопка (вторичная, header) */
.btn--secondary {
  background: #ffffff;
  color: #120f20;
  border-radius: clamp(16px, 1.042vw, 20px);
  padding: clamp(12px, 0.833vw, 16px) clamp(16px, 1.042vw, 20px);
  font-size: clamp(16px, 1.146vw, 22px);
}

.btn--secondary:hover {
  background: #e5e5e5;
}

/* Модификатор: Красная кнопка с иконкой (header services) */
.btn--services {
  background: #f42534;
  color: #ffffff;
  border-radius: clamp(16px, 1.042vw, 20px);
  padding: clamp(10px, 0.703vw, 14px) clamp(16px, 1.042vw, 20px);
  font-size: clamp(16px, 1.146vw, 22px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.417vw, 8px);
  flex-shrink: 0;
}

.btn--services:hover {
  background: #fa0012;
}

.btn--services .btn__icon {
  width: clamp(7px, 0.469vw, 9px);
  height: clamp(3px, 0.234vw, 5px);
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

/* Заголовки секций */
.section__title {
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(30px, 2.604vw, 50px);
  color: #222;
}

/* ========================================
   HEADER DESKTOP (базовые стили для десктопа)
   ======================================== */

.header--desktop {
  position: fixed;
  top: var(--header-offset-top);
  left: 0;
  right: 0;
  z-index: 1200;
  padding: 0;
  background: #ffffff03;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  border-radius: var(--header-border-radius);
  margin: 0 var(--spacing-md);
  transition: backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Убираем blur у header когда overlay активен */
.services-popup__overlay.open ~ .header--desktop,
body.overlay-active .header--desktop {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* Header не должен блюриться когда открыто меню */
.header--desktop .container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md)
    var(--spacing-lg);
}

.header__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Логотип в header */
.header__logo {
  width: clamp(180px, 11.766vw, 226px);
  height: clamp(40px, 2.813vw, 54px);
  flex-shrink: 0;
  object-fit: contain;
}

/* Правый блок */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}
/* Навигация */
.nav {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

.nav__list {
  display: flex;
  gap: clamp(24px, 2.083vw, 40px);
  align-items: center;
}

.nav__item {
  position: relative;
}

/* Элемент с выпадающим меню */
.nav__item--has-dropdown {
  position: relative;
}

.nav__link {
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  color: #494555;
  transition: color 0.3s ease;
  position: relative;
  padding: clamp(4px, 0.26vw, 5px) 0;
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.313vw, 6px);
  white-space: nowrap;
}

.nav__link-icon {
  display: inline-block; /* ✅ Необходимо для transform на SVG */
  width: clamp(7px, 0.469vw, 9px);
  height: clamp(3px, 0.234vw, 5px);
  /* Фильтр для цвета #494555 */
  filter: brightness(0) saturate(100%) invert(29%) sepia(8%) saturate(705%)
    hue-rotate(222deg) brightness(94%) contrast(88%);
  /* ✅ Transform без transition - transition добавляется только при hover/active */
}

.nav__link:hover {
  color: #fa0012;
}

.nav__link:hover .nav__link-icon {
  filter: brightness(0) saturate(100%) invert(37%) sepia(95%) saturate(2791%)
    hue-rotate(346deg) brightness(95%) contrast(93%);
}

/* ✅ Плавная анимация поворота при наведении */
.nav__item--has-dropdown:hover .nav__link-icon {
  transform: rotate(180deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ✅ Плавная анимация поворота обратно при уходе */
.nav__item--has-dropdown .nav__link-icon {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Поворот иконки когда dropdown активен (для программного управления) */
.nav__item--has-dropdown.active .nav__link-icon {
  transform: rotate(180deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   ВЫПАДАЮЩЕЕ МЕНЮ "О КОМПАНИИ"
   ======================================== */

.nav-dropdown {
  position: absolute;
  padding-top: clamp(16px, 1.042vw, 20px);
  top: calc(100% + clamp(16px, 1.042vw, 20px));
  left: 50%;
  transform: translateX(-50%) translateY(clamp(-16px, -1.042vw, -20px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
}

/* Убираем CSS hover, управление только через JavaScript */
.nav-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__container {
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 100%);
  border-radius: clamp(50px, 4.896vw, 94px);
  padding: clamp(40px, 4.167vw, 80px);
  display: flex;
  border: 2px solid #fff;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
  box-shadow: 0 clamp(8px, 0.521vw, 10px) clamp(30px, 2.604vw, 50px)
    rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.nav-dropdown__link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(16px, 1.146vw, 22px);
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: clamp(8px, 0.521vw, 10px) 0;
}

.nav-dropdown__link:hover {
  color: #f42534;
}

.header__phone {
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  color: #494555;
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.header__phone:hover {
  color: #ee3f3f;
}

/* Иконки TG + MAX в шапке — в линию */
.header__social {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.417vw, 8px);
}

.header__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2.083vw, 40px);
  height: clamp(32px, 2.083vw, 40px);
  border-radius: 50%;
  background: transparent;
  transition: opacity 0.2s ease;
}

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

.header__social-link img {
  width: 100%;
  height: 100%;
  display: block;
}

.header__social-link--max img {
  width: 100%;
  height: 100%;
}

/* Бургер меню */
.burger {
  display: none;
  flex-direction: column;
  gap: clamp(4px, 0.26vw, 5px);
  padding: clamp(8px, 0.521vw, 10px);
  flex-shrink: 0;
}

.burger__line {
  width: clamp(20px, 1.302vw, 25px);
  height: clamp(2px, 0.156vw, 3px);
  background-color: #000;
  border-radius: clamp(1px, 0.104vw, 2px);
  transition: all 0.3s ease;
}

.burger.active .burger__line:nth-child(1) {
  transform: rotate(45deg) translate(0.417vw /* 8px */, 0.417vw /* 8px */);
}

.burger.active .burger__line:nth-child(2) {
  opacity: 0;
}

.burger.active .burger__line:nth-child(3) {
  transform: rotate(-45deg) translate(0.365vw /* 7px */, -0.365vw /* -7px */);
}

/* Основные секции */
.section {
  width: 100%;
  background-color: #ffffff;
  border-radius: clamp(50px, 4.896vw, 94px);
  margin-bottom: clamp(16px, 1.042vw, 20px);

  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  border: 2px solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 100%);
}

/* Секция Hero (ИТ-инфраструктура нового уровня) */
.section--hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-items: center;
  padding: 0;
}

.section:first-of-type {
  margin-top: 0;
}

.section .container {
  max-width: var(--max-section-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section__title {
  font-size: clamp(24px, 1.875vw, 36px);
  font-weight: 700;
  margin-bottom: clamp(24px, 2.083vw, 40px);
  color: #222;
}

.hero__content {
  width: auto;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 8.49vw, 163px);
  padding-top: clamp(40px, 3.646vw, 70px);
  padding-left: clamp(40px, 4.167vw, 80px);
  padding-bottom: clamp(40px, 4.167vw, 80px);
  padding-right: clamp(30px, 3.125vw, 60px);
}

.hero__text-group {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.083vw, 40px);
}

.hero__text-group > h1 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  width: auto;
  font-size: clamp(35px, 3.281vw, 63px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
}

.hero__text-group > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  width: auto;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
}

/* Хлебные крошки (Breadcrumbs) */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.042vw, 20px);
  flex-wrap: wrap;
}

.breadcrumbs__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
  text-decoration: none;
  flex-shrink: 0;
}

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

.breadcrumbs__logo-wrapper {
  width: clamp(16px, 1.098vw, 21px);
  height: clamp(18px, 1.25vw, 24px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breadcrumbs__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Окрашивание в цвет текста #9d9d9d */
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(1%)
    hue-rotate(352deg) brightness(89%) contrast(87%);
}

.breadcrumbs__separator-wrapper {
  width: clamp(7px, 0.469vw, 9px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breadcrumbs__separator {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Окрашивание в цвет текста #9d9d9d */
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(1%)
    hue-rotate(352deg) brightness(89%) contrast(87%);
}

.breadcrumbs__link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: left;
  color: rgba(157, 157, 157, 1);
  text-decoration: none;
  transition: text-decoration 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
}

.hero__image {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 1.042vw, 20px);
  padding-left: 0;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(40px, 3.854vw, 74px);
}

/* Кнопки hero-секции */
.hero__button {
  display: block; /* Показываем на десктопе */
}

.hero__button-mobile {
  display: none; /* Скрываем на десктопе */
}

/* Буллеты-статистика в hero */
.hero__stats {
  display: flex;
  gap: clamp(20px, 2.083vw, 40px);
  flex-wrap: wrap;
  margin-top: clamp(8px, 0.833vw, 16px);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(4px, 0.417vw, 8px);
}

.hero__stat-value {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  line-height: 100%;
  color: #1f1933;
}

.hero__stat-value--red {
  color: #f42534;
}

.hero__stat-value--green {
  color: #28a745;
}

.hero__stat-label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 400;
  line-height: 120%;
  color: #494555;
}

/* ======= Hero Home — фон-картинка + белая карточка ======= */
.section--hero-home {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  min-height: clamp(500px, 39.375vw, 756px);
  padding: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.section--hero-home .hero-home__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 74px;
  padding: 70px 80px;
  width: 959px;
  max-width: calc(100% - 40px);
  margin: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  min-height: 716px;
  box-sizing: border-box;
}

.section--hero-home .hero-home__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.section--hero-home .hero-home__title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  text-align: center;
  margin: 0;
}

.section--hero-home .hero-home__desc {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  text-align: center;
  margin: 0;
}

.section--hero-home .hero-home__stats {
  display: flex;
  gap: clamp(10px, 0.833vw, 16px);
  width: 100%;
}

.section--hero-home .hero-home__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  background: #1f1933;
  border-radius: 34px;
  padding: 20px;
  min-height: clamp(100px, 7.24vw, 139px);
}

.section--hero-home .hero-home__stat-value {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(22px, 1.875vw, 36px);
  font-weight: 700;
  line-height: 100%;
  color: #fff;
}

.section--hero-home .hero-home__stat-value--red {
  color: #fff;
}

.section--hero-home .hero-home__stat-value--green {
  color: #fff;
}

.section--hero-home .hero-home__stat-label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 400;
  line-height: 130%;
  color: #fff;
}

.section--hero-home .hero-home__btn {
  width: 439px;
  max-width: 100%;
  height: 94px;
  text-align: center;
  font-size: 22px;
  border-radius: 20px;
  padding: 30px 42px;
  margin-top: auto;
}
/* ======= /Hero Home ======= */

.about-company__button-mobile {
  display: none; /* Скрываем на десктопе */
}

.ready-to-start__button-mobile {
  display: none; /* Скрываем на десктопе */
}

.track-group__button-mobile {
  display: none; /* Скрываем на десктопе */
}

/* Секция Узнайте больше о нашей компании (About Company) */
.section--about-company {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(40px, 3.646vw, 70px);
  padding: 0;
}

.section--about-company > h2 {
  grid-column: 1;
  grid-row: 1;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-top: clamp(40px, 3.646vw, 70px);
  margin-left: clamp(40px, 4.167vw, 80px);
  margin-bottom: 0;
}

.about-company__image {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: clamp(16px, 1.042vw, 20px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
  min-width: 0;
}

.about-company__image img {
  width: 100%;
  object-fit: contain;
  border-radius: clamp(40px, 3.854vw, 74px);
  display: block;
}

.about-company__content {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 3.438vw, 66px);
  margin-right: clamp(40px, 3.646vw, 70px);
  margin-top: clamp(40px, 3.646vw, 70px);
  margin-bottom: clamp(40px, 3.646vw, 70px);
}

.about-company__text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
}

.about-company__text > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin: 0;
}

/* Секция Как построена наша работа? (Work Process) */
.section--work-process {
  padding-top: clamp(40px, 3.646vw, 70px);
}

.work-process {
  max-width: var(--max-section-width);
  margin: 0 auto;
}

.section--work-process > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  text-align: start;
  margin-top: 0;
  margin-bottom: clamp(16px, 1.042vw, 20px);
  margin-left: clamp(40px, 4.167vw, 80px);
}

.section--work-process > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin-bottom: clamp(40px, 3.125vw, 60px);
  margin-left: clamp(40px, 4.167vw, 80px);
}

.section--work-process > .work-process__navigation + p{
  margin-top: clamp(40px, 3.125vw, 60px);

}

.work-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.042vw, 20px);
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
  padding-bottom: clamp(16px, 1.042vw, 20px);
}

.work-process__navigation {
  display: none;
}

.work-process-card {
  background: transparent;
  box-sizing: border-box;
  _border: clamp(1px, 0.104vw, 2px) solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px);
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(24px, 2.083vw, 40px);

  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.work-process-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
  padding-top: clamp(16px, 1.042vw, 20px);
  margin-bottom: clamp(24px, 2.083vw, 40px);
}

.work-process-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(30px, 2.813vw, 54px);
  background: transparent;
}

.work-process-card__content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
  padding-left: clamp(30px, 3.125vw, 60px);
  padding-right: clamp(30px, 3.125vw, 60px);
  text-align: center;
}

.work-process-card__content h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 30px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
}

.work-process-card__content p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin: 0;
}

/* Старые селекторы оставляю для совместимости */
.work-process-card > h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(16px, 1.042vw, 20px);
  margin-left: clamp(30px, 3.125vw, 60px);
}

.work-process-card > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin-left: clamp(30px, 3.125vw, 60px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

/* Секция Тарифы */
.section--pricing {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.167vw, 80px);
}

/* Layout: grid — левая колонка фикс, правая авто */
.pricing__layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: clamp(20px, 2.083vw, 40px);
}
/* Левая панель занимает обе строки */
.pricing__left {
  grid-column: 1;
  grid-row: 1 / 3;
}
/* Карточки — правая колонка, строка 1 */
.pricing__cards-container {
  grid-column: 2;
  grid-row: 1;
}
/* Прайслист — правая колонка, строка 2. Ширина = строго ширина колонки */
.pricing__pricelist {
  grid-column: 2;
  grid-row: 2;
}

/* Левая колонка — верх выровнен с контентом первой карточки */
.pricing__left {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 0 0 420px;
  width: 420px;
  min-width: 420px;
  padding-top: 50px;
  padding-bottom: 10px;
  padding-left: clamp(40px, 4.167vw, 80px);
}

/* Блок с иконками */
.pricing__features-block {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 20px;
  background: #F2F0FD;
  border-radius: 20px;
  border: 2px solid #E5E0F7;
}

.pricing__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pricing__feature-item img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.pricing__feature-title {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  color: #1f1933;
  margin-bottom: 4px;
}

.pricing__feature-desc {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  color: #00000080;
}

/* Контейнер для текста */
.pricing__text-container {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.042vw, 20px);
  flex: 0 1 auto;
  min-width: 0;
}

.pricing__text-container > h2 {
  font-family: Inter, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
}

.pricing__subtitle {
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
}

.pricing__desc {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin: 0;
}

/* Контейнер для карточек */
.pricing__cards-container {
  display: flex;
  gap: clamp(16px, 1.042vw, 20px);
  padding-top: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
  padding-bottom: clamp(16px, 1.042vw, 20px);
  min-width: 0;
}

/* Базовая карточка тарифа */
.pricing-card {
  background: transparent;
  box-sizing: border-box;
  _border: clamp(1px, 0.104vw, 2px) solid;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 50px 10px 24px;
  flex: 1;
  max-width: 433px;
  box-shadow: none;
}

/* Модификаторы для разных цветов границ */
.pricing-card--green {
  _border-color: rgba(142, 255, 119, 1);
  background: #f0ffed;
}

.pricing-card--orange {
  _border-color: rgba(255, 225, 121, 1);
  background: #fffbed;
}

.pricing-card--red {
  _border-color: rgba(255, 166, 166, 1);
  background: #ffeded;
}

/* Заголовок карточки */
.pricing-card__header {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 0.781vw, 15px);
}

/* Название тарифа */
.pricing-card__title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #494555;
}

/* Цена */
.pricing-card__price {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #1f1933;
}

/* Обертка для бейджа и зачеркнутого текста */
.pricing-card__badge-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 0.521vw, 10px);
}

/* Бейдж (флаг) */
.pricing-card__badge {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 0.521vw, 10px);
  padding: clamp(8px, 0.521vw, 10px) clamp(16px, 1.042vw, 20px);
  border-radius: clamp(50px, 5.208vw, 100px);
}

.pricing-card__badge > span {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
}

/* Модификаторы цветов для бейджей */
.pricing-card__badge--green {
  background: #d3ffca;
}

.pricing-card__badge--green > span {
  color: #1e9800;
}

.pricing-card__badge--orange {
  background: #ffe4cd;
}

.pricing-card__badge--orange > span {
  color: #c07700;
}

.pricing-card__badge--red {
  background: #ffd8d8;
}

.pricing-card__badge--red > span {
  color: #ae0000;
}

/* Зачеркнутый текст (скрыт по умолчанию) */
.pricing-card__strikethrough {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  text-decoration: line-through;
  color: #494555;
  display: none;
}

/* Показываем зачеркнутый текст только для красной карточки */
.pricing-card--red .pricing-card__strikethrough {
  display: block;
}

/* Список функций */
.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
}

/* Отдельная функция */
.pricing-card__feature {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: start;
  color: #494555;
}

/* Кнопка в карточке тарифа (прижата к низу) */
.pricing-card .btn--primary {
  margin-top: auto;
  width: 100%;
}

/* Навигация для карусели тарифов (скрыта на desktop) */
.pricing__navigation {
  display: none;
}

.pricing__nav-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.pricing__nav-btn img {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
  transition: filter 0.3s ease;
}

.pricing__nav-btn:hover img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
    hue-rotate(355deg) brightness(93%) contrast(117%);
}

.pricing__nav-btn:disabled {
  cursor: not-allowed;
}

.pricing__nav-btn:disabled img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.pricing__nav-btn:disabled:hover img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

/* ========================================
   TARIFF CARDS v3 — redesigned to new Figma specs
   3 themes: basic (green), optimal (purple), premium (dark+yellow)
   ======================================== */

/* Section: subtle gradient background */
.section--pricing {
  overflow: hidden;
  background: linear-gradient(180deg, #F9F9FB 0%, #F3F3F9 100%) !important;
  padding-top: clamp(40px, 2vw, 80px);
  padding-bottom: clamp(40px, 2vw, 80px);
}

/* Cards container */
.section--pricing .pricing__cards-container {
  gap: clamp(12px, 1vw, 20px);
  padding: clamp(16px, 1.5vw, 30px) clamp(16px, 1.5vw, 30px) clamp(16px, 1.5vw, 30px) 0;
  align-items: stretch;
  background: linear-gradient(180deg, #F9F9FB 0%, #F3F3F9 100%);
  border-radius: clamp(20px, 1.667vw, 32px);
}

/* v3 card base */
.pricing-card--basic,
.pricing-card--optimal,
.pricing-card--premium {
  border-radius: 20px;
  padding: 50px 10px 24px 26px;
  min-width: 0;
  max-width: 433px;
  flex: 0 1 433px;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

/* --- Backgrounds --- */
.pricing-card--basic {
  background: #ffffff;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.14);
}

.pricing-card--optimal {
  background: #ffffff;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.14);
}

.pricing-card--premium {
  background: #1F1933;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.22);
}

/* --- Ribbon "Популярный" (optimal only) --- */
.pricing-card__ribbon {
  position: absolute;
  top: 0;
  right: 0;
  background: #5A3BED;
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  line-height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Уголок-капелька под риббоном — вогнутая кривая */
.pricing-card__ribbon::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  background-image: radial-gradient(circle at 0% 100%, transparent 20px, #5A3BED 20px);
}

/* --- Title/Badge pill --- */
.pricing-card--basic .pricing-card__title,
.pricing-card--optimal .pricing-card__title,
.pricing-card--premium .pricing-card__title {
  display: inline-flex;
  justify-content: center;
  align-self: center;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

/* Badge color — basic: green */
.pricing-card--basic .pricing-card__title {
  background: #ECF1EA;
  color: #1B8A4A;
}

/* Badge color — optimal: purple filled */
.pricing-card--optimal .pricing-card__title {
  background: #5A3BED;
  color: #ffffff;
}

/* Badge color — premium: yellow gradient */
.pricing-card--premium .pricing-card__title {
  background: linear-gradient(180deg, #FFED61 0%, #F8AC01 100%);
  color: #1F1933;
}

/* --- Header alignment --- */
.pricing-card--basic .pricing-card__header,
.pricing-card--optimal .pricing-card__header,
.pricing-card--premium .pricing-card__header {
  align-items: center;
  gap: clamp(10px, 0.8vw, 16px);
  padding-top: clamp(8px, 0.6vw, 12px);
}

/* --- Price container --- */
.pricing-card--basic .pricing-card__price,
.pricing-card--optimal .pricing-card__price,
.pricing-card--premium .pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 100%;
  text-align: center;
  padding: 0 20px;
  font-variant-numeric: proportional-nums;
  font-feature-settings: 'pnum' 1, 'tnum' 0;
}

.pricing-card--basic .pricing-card__price {
  color: #000000;
}

.pricing-card--optimal .pricing-card__price {
  color: #5A3BED;
}

.pricing-card--premium .pricing-card__price {
  background: linear-gradient(180deg, #FFED61 0%, #F8AC01 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-card--premium .pricing-card__price-prefix,
.pricing-card--premium .pricing-card__price-period {
  -webkit-text-fill-color: #ffffff;
}

.pricing-card--optimal .pricing-card__price-period {
  color: #000000;
}

/* "от" */
.pricing-card__price-prefix {
  font-size: 36px;
  font-weight: 700;
}

/* Цифра */
.pricing-card__price-amount {
  font-size: 46px;
  font-weight: 700;
}

/* "₽" */
.pricing-card__price-currency {
  font-size: 36px;
  font-weight: 700;
}

/* "/мес" */
.pricing-card__price-period {
  font-size: 24px;
  font-weight: 400;
}

/* --- Description inside cards --- */
.pricing-card__description {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  text-align: center;
  color: #000000;
  margin: 0;
}

.pricing-card--basic .pricing-card__description,
.pricing-card--optimal .pricing-card__description {
  color: #000000;
}

.pricing-card--premium .pricing-card__description {
  color: #ffffff;
}

/* --- Separator --- */
.pricing-card__separator {
  border: none;
  border-top: 2px solid #0000001A;
  margin: 0;
  width: 100%;
}

.pricing-card--premium .pricing-card__separator {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* --- Features section (grows to push bottom elements down) --- */
.pricing-card--basic .pricing-card__features,
.pricing-card--optimal .pricing-card__features,
.pricing-card--premium .pricing-card__features {
  flex: 1;
  gap: 8px;
}

/* Features heading "Что входит:" */
.pricing-card__features-heading {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 12px;
}

.pricing-card--basic .pricing-card__features-heading {
  color: #207810;
}

.pricing-card--optimal .pricing-card__features-heading {
  color: #5A3BED;
}

.pricing-card--premium .pricing-card__features-heading {
  background: linear-gradient(0deg, #FEC630, #FEC630), linear-gradient(180deg, #FFED61 0%, #F8AC01 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Feature checkmarks: basic — green circle --- */
.pricing-card--basic .pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 28px;
  position: relative;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0%;
  color: #000000;
  min-height: 28px;
}

.pricing-card--basic .pricing-card__feature::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 23px;
  height: 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23207810'/%3E%3Cpath d='M7 12.5l3.5 3.5 6.5-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* --- Feature checkmarks: optimal --- */
.pricing-card--optimal .pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 28px;
  position: relative;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0%;
  color: #000000;
  min-height: 28px;
}

.pricing-card--optimal .pricing-card__feature::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 23px;
  height: 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%235A3BED'/%3E%3Cpath d='M7 12.5l3.5 3.5 6.5-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* --- Feature checkmarks: premium --- */
.pricing-card--premium .pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 28px;
  position: relative;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 0.9);
  min-height: 28px;
}

.pricing-card--premium .pricing-card__feature::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 23px;
  height: 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23FFED61'/%3E%3Cstop offset='100%25' stop-color='%23F8AC01'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='url(%23g)'/%3E%3Cpath d='M7 12.5l3.5 3.5 6.5-7' stroke='%231F1933' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* --- Info block (clock + text) --- */
.pricing-card__info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-radius: 20px;
  border-width: 1px;
  border-style: solid;
}

.pricing-card--basic .pricing-card__info {
  background: #ECF1EA;
  border-color: rgba(60, 140, 58, 0.2);
}

.pricing-card--optimal .pricing-card__info {
  background: #F2F0FD;
  border-color: rgba(89, 59, 236, 0.2);
}

.pricing-card--premium .pricing-card__info {
  background: #3D414D;
  border-color: rgba(255, 255, 255, 0.2);
}

.pricing-card__info-icon {
  flex-shrink: 0;
  width: clamp(20px, 1.3vw, 24px);
  height: clamp(20px, 1.3vw, 24px);
}

.pricing-card--basic .pricing-card__info-icon { color: #1B8A4A; }
.pricing-card--optimal .pricing-card__info-icon { color: #5B3FD4; }
.pricing-card--premium .pricing-card__info-icon { color: #F5C518; }

.pricing-card__info-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-card__info-title {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
}

.pricing-card--basic .pricing-card__info-title { color: #000000; }
.pricing-card--optimal .pricing-card__info-title { color: #000000; }
.pricing-card--premium .pricing-card__info-title { color: #ffffff; }

.pricing-card__info-desc {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 100%;
}

.pricing-card--basic .pricing-card__info-desc { color: #000000; }
.pricing-card--optimal .pricing-card__info-desc { color: #000000; }
.pricing-card--premium .pricing-card__info-desc { color: rgba(255, 255, 255, 0.7); }

/* --- Buttons (override base margin-top: auto since features has flex:1) --- */
.pricing-card--basic .btn--primary,
.pricing-card--optimal .btn--primary,
.pricing-card--premium .btn--primary {
  margin-top: 0;
}

/* Basic: green */
.pricing-card--basic .btn--primary {
  background: #207810;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 20px 16px;
  font-size: 22px;
  font-weight: 700;
  width: 100%;
}
.pricing-card--basic .btn--primary:hover {
  background: #1a6210;
}

/* Optimal: purple */
.pricing-card--optimal .btn--primary {
  background: #5A3BED;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 20px 16px;
  font-size: 22px;
  font-weight: 700;
  width: 100%;
}
.pricing-card--optimal .btn--primary:hover {
  background: #4A2FD4;
}

/* Premium: yellow gradient */
.pricing-card--premium .btn--primary {
  background: linear-gradient(180deg, #FFED61 0%, #F8AC01 100%);
  color: #1F1933;
  border: none;
  border-radius: 20px;
  padding: 20px 16px;
  font-size: 22px;
  font-weight: 700;
  width: 100%;
}
.pricing-card--premium .btn--primary:hover {
  background: linear-gradient(0deg, #f0b820, #f0b820), linear-gradient(180deg, #f0df50 0%, #e89e01 100%);
}

/* --- Footer text --- */
.pricing-card__footer {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #787878;
}

.pricing-card--premium .pricing-card__footer {
  color: #787878;
}

/* --- Extra info block (доп. блок под левой панелью) --- */
.pricing__extra-block {
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.pricing__extra-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 20px;
}
.pricing__extra-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
}
.pricing__extra-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.pricing__extra-label {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1a1a2e;
}
.pricing__extra-price {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #5A3BED;
  margin-top: 4px;
}

/* --- Прайс-лист под тарифами --- */
/* margin-right совпадает с padding-right карточек (.pricing__cards-container),
   чтобы белый фон прайслиста заканчивался на одной линии с карточками.
   Фон карточек-контейнера = фону секции → визуально виден только padding. */
.pricing__pricelist {
  background: #fff;
  border-radius: 20px;
  padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 48px);
  margin: 0 clamp(16px, 2vw, 60px) clamp(20px, 2vw, 40px) 0;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.14);
  overflow: hidden;
  min-width: 0;
}
.pricing__pricelist-title {
  font-family: Inter, sans-serif;
  font-size: clamp(22px, 2vw, 36px);
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  margin: 0 0 clamp(20px, 2.5vw, 40px);
}
.pricing__pricelist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  min-width: 0;
  max-width: 100%;
}
.pricing__pricelist-col {
  min-width: 0;
  overflow: hidden;
}
.pricing__pricelist-col-header span {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.pricing__pricelist-name {
  min-width: 0;
  overflow-wrap: break-word;
}
.pricing__pricelist-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
}
.pricing__pricelist-col-header img {
  flex-shrink: 0;
}
.pricing__pricelist-col-header span {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  color: #000000;
}
.pricing__pricelist-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 2px dashed #0000001A;
}
.pricing__pricelist-name {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 100%;
  color: #000000;
  flex: 1;
}
.pricing__pricelist-price {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  color: #000000;
  white-space: nowrap;
}
.pricing__pricelist-footer {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  color: #787878;
  text-align: center;
  margin-top: clamp(16px, 2vw, 32px);
}
@media (max-width: 1024px) {
  .pricing__pricelist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .pricing__pricelist-grid {
    grid-template-columns: 1fr;
  }
}

/* --- CTA Banner под тарифами --- */
.pricing__cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 40px;
  margin: calc(0px - clamp(38px, 4.167vw, 80px)) clamp(56px, 1.5vw, 30px) 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.pricing__cta-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.pricing__cta-icon {
  width: 67px;
  height: 67px;
  flex-shrink: 0;
}

.pricing__cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing__cta-title {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
  color: #000000;
}

.pricing__cta-desc {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  color: #00000080;
}

.pricing__cta-btn {
  flex-shrink: 0;
  padding: 20px 80px;
  border-radius: 20px;
  border: 2px solid #5A3BED;
  background: transparent;
  color: #5A3BED;
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 100%;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  outline: none;
}

.pricing__cta-btn:hover {
  background: #5A3BED;
  color: #ffffff;
}

.pricing__cta-btn:focus,
.pricing__cta-btn:active {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #5A3BED;
}

/* ========================================
   END TARIFF CARDS v3
   ======================================== */

/* Секция Преимущества */
.advantages {
  max-width: var(--max-section-width);
  margin: 0 auto;
}

.section--advantages {
  padding-top: clamp(40px, 3.646vw, 70px);
}

.section--advantages > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-left: clamp(40px, 4.167vw, 80px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

.section--advantages > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin-left: clamp(40px, 4.167vw, 80px);
  margin-bottom: clamp(40px, 3.646vw, 70px);
}

.advantages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.042vw, 20px);
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
  padding-bottom: clamp(16px, 1.042vw, 20px);
}

.advantage-card {
  background: transparent;
  box-sizing: border-box;
  _border: 2px solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(16px, 1.042vw, 20px);
  padding-bottom: clamp(24px, 2.083vw, 40px);
  
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.advantage-card__image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: clamp(24px, 2.083vw, 40px);
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
}

.advantage-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(30px, 2.813vw, 54px);
  background: rgba(244, 244, 244, 1);
}

.advantage-card__content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
  padding-left: clamp(32px, 2.5vw, 48px);
  padding-right: clamp(32px, 2.5vw, 48px);
  text-align: center;
  justify-content: space-between;
  height: 100%;
}

.advantage-card__content.services {
  text-align: start;
  position: relative;
}

.advantage-card__content h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.4vw, 29px);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
}

.advantage-card__content > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin: 0;
}

/* Старые селекторы оставляю для совместимости */
.advantage-card > h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 700;
  font-style: normal;
  text-align: center;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

.advantage-card__text {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin-left: clamp(30px, 3.125vw, 60px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

/* Секция Отзывы */
.section--reviews {
  gap: clamp(40px, 4.167vw, 80px);
  overflow-x: hidden;
  max-width: 100%;
}

.reviews__container {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(40px, 4.167vw, 80px);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  position: relative;
}

/* Блок слева: Заголовок и кнопка */
.reviews__left-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(40px, 3.646vw, 70px);
  padding-left: clamp(40px, 4.167vw, 80px);
  padding-bottom: clamp(40px, 4.167vw, 80px);
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.reviews__left-block > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
}

/* Блок справа: Карточки отзывов */
.reviews__cards-block {
  column-count: 3;
  column-gap: clamp(16px, 1.042vw, 20px);
  padding: clamp(16px, 1.042vw, 20px);
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Защита от FOUC - гарантируем правильный layout с первого рендера */
  min-width: 0;
  contain: layout style;
}

/* Градиент внизу блока с отзывами — отключён */
.reviews__container::after {
  display: none;
}

/* Карточка отзыва */
.reviews__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(16px, 1.042vw, 20px);
  padding: clamp(30px, 2.604vw, 50px);
  box-sizing: border-box;
  _border: clamp(1px, 0.104vw, 2px) solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px);
  break-inside: avoid;
  margin-bottom: clamp(16px, 1.042vw, 20px);
  _min-height: 100%;
  max-width: 100%;
  width: 100%;
  /* Предотвращаем растягивание за пределы контейнера */
  flex-shrink: 0;
  overflow: hidden;

  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.reviews__card > a, .reviews__card > a img{
  display: block;
  width: 100%;
}
.reviews__card > a {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.reviews__card > a:hover {
  opacity: 0.85;
}

/* Хедер карточки: Фото + Инфо */
.reviews__card-header {
  display: flex;
  gap: clamp(12px, 1.042vw, 20px);
  align-items: center;
  width: 100%;
}

/* Фото пользователя */
.reviews__card-photo {
  width: clamp(50px, 4.167vw, 80px);
  height: clamp(50px, 4.167vw, 80px);
  border-radius: clamp(60px, 5.625vw, 108px);
  object-fit: cover;
  flex-shrink: 0;
}

/* Блок с информацией (имя, компания, дата) */
.reviews__card-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.417vw, 8px);
  justify-content: center;
}

/* Имя пользователя */
.reviews__card-name {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
}

/* Мета-информация: компания и дата */
.reviews__card-meta {
  display: flex;
  gap: clamp(6px, 0.417vw, 8px);
}

/* Название компании */
.reviews__card-company {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #9d9d9d;
  flex: 1;
}

/* Дата отзыва */
.reviews__card-date {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #9d9d9d;
}

/* Текст отзыва */
.reviews__card > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin: 0;
}

/* Ссылка "Весь отзыв" */
.reviews__card-link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #f42534;
  text-decoration: none;
  transition: color 0.3s ease;
}

.reviews__card-link:hover {
  color: #d32030;
}

/* Desktop: кнопки навигации скрыты */
.reviews__navigation {
  display: none;
}

.reviews__nav-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.reviews__nav-btn img {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
  transition: filter 0.3s ease;
}

.reviews__nav-btn:hover img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
    hue-rotate(355deg) brightness(93%) contrast(117%);
}

.reviews__nav-btn:disabled {
  cursor: not-allowed;
}

.reviews__nav-btn:disabled img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.reviews__nav-btn:disabled:hover img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

/* Секция Готовы начать? (Ready to Start) */
.section--ready-to-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(40px, 3.646vw, 70px);
  padding: 0;
}

.section--ready-to-start > h2 {
  grid-column: 1;
  grid-row: 1;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-top: clamp(40px, 3.646vw, 70px);
  margin-left: clamp(40px, 4.167vw, 80px);
  margin-bottom: 0;
}

.ready-to-start__image {
  grid-column: 1;
  grid-row: 2;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: clamp(16px, 1.042vw, 20px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
  min-width: 0;
}

.ready-to-start__image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
  border-radius: clamp(40px, 3.854vw, 74px);
  display: block;
}

.ready-to-start__content {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 3.438vw, 66px);
  margin-right: clamp(40px, 3.646vw, 70px);
  margin-top: clamp(40px, 3.646vw, 70px);
  margin-bottom: clamp(40px, 3.646vw, 70px);
}

.ready-to-start__text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
}

.ready-to-start__text > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin: 0;
}

/* Модификатор для альтернативной версии ready-to-start с списком */
.section--ready-to-start-alt .ready-to-start__text {
  gap: clamp(30px, 2.604vw, 50px);
}

/* Описание (первый абзац) в альтернативной версии */
.ready-to-start__text > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin: 0;
}

/* Список с полоской слева (аналог track-group__list) */
.ready-to-start__text > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: clamp(20px, 1.563vw, 30px);
  border-left: clamp(1px, 0.104vw, 2px) solid #f42534;
}

.ready-to-start__text > ul li {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin-bottom: clamp(4px, 0.26vw, 5px);
}

.ready-to-start__text > ul li:last-child {
  margin-bottom: 0;
}

/* Секция Наши достижения и результаты (Achievements) */
.section--achievements {
  padding-top: clamp(40px, 3.646vw, 70px);
}

.section--achievements > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  text-align: center;
  margin-bottom: clamp(40px, 3.125vw, 60px);
}

.achievements__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.042vw, 20px);
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
  padding-bottom: clamp(16px, 1.042vw, 20px);
}

.achievements__card {
  background: transparent;
  box-sizing: border-box;
  _border: clamp(1px, 0.104vw, 2px) solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: clamp(30px, 3.125vw, 60px);
  min-height: clamp(200px, 15.625vw, 300px);
  
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.achievements__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.042vw, 20px);
  text-align: center;
}

.achievements__card-value {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(36px, 3.333vw, 64px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
}

.achievements__card-label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
}

/* Секция Услуги (Services) */
.services__container {
  max-width: 1400px;
  margin: 0 auto;
}

.section--services {
  padding-top: clamp(40px, 3.646vw, 70px);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header nav"
    "grid grid";
  gap: clamp(40px, 3.125vw, 60px) clamp(24px, 2.083vw, 40px);
}

.services__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.services__header-text {
  flex: 1;
}

.services__header-text > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-left: clamp(40px, 4.167vw, 80px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

.services__header-text > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin-left: clamp(40px, 4.167vw, 80px);
  margin-bottom: 0;
}

.services__navigation {
  grid-area: nav;
  display: none; /* Скрыто на desktop */
  gap: clamp(24px, 2.083vw, 40px);
  flex-shrink: 0;
  align-self: flex-end;
  margin-right: clamp(40px, 4.167vw, 80px);
}

.services__nav-btn {
  width: clamp(28px, 1.875vw, 36px);
  height: clamp(28px, 1.875vw, 36px);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.services__nav-btn img {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
  transition: filter 0.3s ease;
}

.services__nav-btn:hover img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
    hue-rotate(355deg) brightness(93%) contrast(117%);
}

.services__nav-btn:disabled {
  cursor: not-allowed;
}

.services__nav-btn:disabled img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.services__nav-btn:disabled:hover img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.services__grid {
  grid-area: grid;
  display: flex;
  gap: clamp(16px, 1.042vw, 20px);
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
  padding-bottom: clamp(16px, 1.042vw, 20px);
  position: relative;
  overflow: hidden;
}

/* Градиент слева блока с услугами */
.services__grid::before {
  content: "";
  position: absolute;
  border-radius: 0 0 0 clamp(50px, 4.896vw, 94px);
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(200px, 15.625vw, 300px);
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.services__grid.show-left-gradient::before {
  opacity: 1;
}

/* Градиент справа блока с услугами */
.services__grid::after {
  content: "";
  position: absolute;
  border-radius: 0 0 clamp(50px, 4.896vw, 94px) 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(200px, 15.625vw, 300px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.services__grid.show-right-gradient::after {
  opacity: 1;
}

.services__card {
  background: transparent;
  box-sizing: border-box;
  _border: clamp(1px, 0.104vw, 2px) solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: calc((100% - (3 * clamp(16px, 1.042vw, 20px))) / 4);
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
  padding-top: clamp(16px, 1.042vw, 20px);
  padding-bottom: clamp(24px, 2.083vw, 40px);
  
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.services__card-image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: clamp(24px, 2.083vw, 40px);
}

.services__card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: clamp(30px, 2.813vw, 54px);
  background: transparent;
}

.services__card > h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(16px, 1.042vw, 20px);
  margin-left: clamp(30px, 3.125vw, 60px);
}

.services__card-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: clamp(30px, 3.125vw, 60px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

.services__card-menu li {
  line-height: 100%;
  letter-spacing: 0%;
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

.services__card-menu li:last-child {
  margin-bottom: 0;
}

.services__card-menu a {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  text-decoration: none;
  transition: color 0.3s ease;
}

.services__card-menu a:hover {
  color: #fa0012;
}

/* Секция FAQ */
.section--faq {
  gap: clamp(40px, 4.167vw, 80px);
}

.faq__container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 4.167vw, 80px);
  justify-content: space-between;
  margin: 0 auto;
}

/* Блок слева: Заголовок и кнопка */
.faq__left-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(40px, 3.646vw, 70px);
  padding-left: clamp(40px, 4.167vw, 80px);
  padding-bottom: clamp(40px, 4.167vw, 80px);
}

.faq__left-block > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
}

/* Блок справа: Карточки FAQ */
.faq__cards-block {
  column-count: 2;
  column-gap: clamp(16px, 1.042vw, 20px);
  padding: clamp(16px, 1.042vw, 20px);
  position: relative;
}

/* Карточка FAQ */
.faq__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding: clamp(30px, 2.604vw, 50px);
  box-sizing: border-box;
  border: clamp(1px, 0.104vw, 2px) solid transparent;
  border-radius: clamp(40px, 3.854vw, 74px);
  break-inside: avoid;
  margin-bottom: clamp(16px, 1.042vw, 20px);
  transition: border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

/* Активная карточка FAQ */
.faq__card.active {
  border-color: #f42534;
}

/* Хедер карточки FAQ (вопрос + кнопка) */
.faq__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(16px, 1.042vw, 20px);
  width: 100%;
}

/* Наименование вопроса */
.faq__question-text {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 700;
  font-style: normal;
  line-height: 120%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
  flex: 1;
}

/* Кнопка toggle (плюс/минус) */
.faq__toggle-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  width: clamp(32px, 2.083vw, 40px);
  height: clamp(32px, 2.083vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.faq__toggle-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

/* Ответ на вопрос */
.faq__answer {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 140%;
  letter-spacing: 0%;
  color: #494555;
  margin: 0;
  padding-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    padding-top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Активный ответ (раскрыт) */
.faq__card.active .faq__answer {
  max-height: clamp(1000px, 78.125vw, 1500px);
  opacity: 1;
  padding-top: clamp(20px, 1.563vw, 30px);
  transform: translateY(0);
}

/* Секция Клиенты */
.section--clients {
  padding-top: clamp(40px, 3.646vw, 70px);
  overflow: hidden;
  position: relative;
}

/* 🎯 Градиент слева бесконечной карусели клиентов */
.section--clients::before {
  content: "";
  position: absolute;
  border-radius: 0 0 0 clamp(50px, 4.896vw, 94px);
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(200px, 15.625vw, 300px);
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 10;
  opacity: 1;
}

/* 🎯 Градиент справа бесконечной карусели клиентов */
.section--clients::after {
  content: "";
  position: absolute;
  border-radius: 0 0 clamp(50px, 4.896vw, 94px) 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(200px, 15.625vw, 300px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 10;
  opacity: 1;
}

.clients__header {
  text-align: center;
  margin-bottom: clamp(40px, 3.125vw, 60px);
}

.clients__header > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(16px, 1.042vw, 20px);
}

.clients__header > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin: 0;
}

/* Desktop: бесконечная анимация */
.clients__grid {
  display: flex;
  gap: clamp(24px, 2.083vw, 40px);
  animation: clientsScroll 40s linear infinite;
  width: max-content;
  padding-bottom: clamp(40px, 3.646vw, 70px);
  position: relative;
  overflow: hidden;
}

@keyframes clientsScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.clients__logo {
  flex-shrink: 0;
  width: clamp(300px, 22.917vw, 440px);
  height: clamp(140px, 10.417vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 1.042vw, 20px);
}

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

/* Подвал */
/* ========================================
   МОБИЛЬНОЕ МЕНЮ - СКРЫТО НА ДЕСКТОПЕ
   ======================================== */

/* На десктопе overlay скрыт */
.mobile-menu-overlay {
  display: none;
}

/* ========================================
   FOOTER (БАЗОВЫЕ СТИЛИ ДЕСКТОПА)
   ======================================== */

.footer {
  padding-top: 0;
  gap: clamp(16px, 1.042vw, 20px);
  padding-left: clamp(16px, 1.042vw, 20px);
  padding-right: clamp(16px, 1.042vw, 20px);
}

.footer__container {
  display: flex;
  justify-content: space-between;
  padding: clamp(24px, 2.083vw, 40px) clamp(40px, 4.167vw, 80px);
}

.footer__container > p {
  /* font-size: 22px -> min = 8.8px, mid = 1.146vw, max = 22px */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: left;
  color: #9d9d9d;
  margin: 0;
  flex-shrink: 0;
}

.footer__legal {
  display: flex;
  gap: clamp(24px, 2.083vw, 40px);
  align-items: center;
  flex-shrink: 0;
}

.footer__legal-link {
  /* font-size: 22px -> min = 8.8px, mid = 1.146vw, max = 22px */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #9d9d9d;
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.footer__legal-link:hover {
  color: #1e1b39;
}

/* Секция ИТ для Трак Групп (Track Group) - Карусель кейсов */
.section--track-group {
  overflow: hidden;
  position: relative;
}

.track-group__carousel {
  position: relative;
}

.track-group__navigation {
  position: absolute;
  top: clamp(40px, 4.167vw, 80px);
  right: clamp(40px, 4.167vw, 80px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.042vw, 20px);
  background: rgba(255, 255, 255, 1);
  border-radius: clamp(16px, 1.042vw, 20px);
  padding: clamp(20px, 1.563vw, 30px) clamp(28px, 2.188vw, 42px);
  box-shadow: 0 clamp(3px, 0.208vw, 4px) clamp(16px, 1.042vw, 20px)
    rgba(0, 0, 0, 0.1);
}

.track-group__nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-group__nav-btn img {
  width: clamp(28px, 1.875vw, 36px);
  height: clamp(28px, 1.875vw, 36px);
  display: block;
  filter: none;
  transition: filter 0.3s ease;
}

.track-group__nav-btn:hover img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
    hue-rotate(355deg) brightness(93%) contrast(117%);
}

.track-group__nav-btn:disabled {
  cursor: not-allowed;
}

.track-group__nav-btn:disabled img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.track-group__nav-btn:disabled:hover img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.track-group__nav-text {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
}

/* Контейнер карточек - работает как карусель (аналог services__grid) */
.track-group__cards {
  display: flex;
  gap: 0; /* Нет gap между карточками, они полностью занимают ширину */
  width: 100%;
  overflow: hidden; /* Скрываем карточки за пределами видимой области */
  position: relative;
}

/* Карточка - всегда занимает 100% ширины контейнера */
.track-group__card {
  flex: 0 0 100%; /* Не сжимается, не растягивается, базовая ширина 100% */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.track-group__content {
  display: flex;
  flex-direction: column;
  padding-right: clamp(40px, 4.167vw, 80px);
  padding-top: clamp(40px, 3.646vw, 70px);
  padding-left: clamp(40px, 4.167vw, 80px);
  padding-bottom: clamp(40px, 4.167vw, 80px);
}

.track-group__content > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(24px, 2.083vw, 40px);
}

.track-group__content > p:nth-of-type(1) {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin-bottom: clamp(20px, 1.563vw, 30px);
}

.track-group__content > p:nth-of-type(2) {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 140%;
  letter-spacing: 0%;
  color: #494555;
  margin-bottom: clamp(22px, 1.771vw, 34px);
}

.track-group__list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: clamp(20px, 1.563vw, 30px);
  border-left: clamp(1px, 0.104vw, 2px) solid #f42534;
  margin-bottom: auto;
}

.track-group__list li {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin-bottom: clamp(8px, 0.521vw, 10px);
}

.track-group__list li:last-child {
  margin-bottom: 0;
}

.track-group__image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 1.042vw, 20px);
  padding-left: 0;
}

.track-group__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(40px, 3.854vw, 74px);
}

/* Секция Специальные предложения (Special Offers) */
.section--special-offers {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header nav"
    "grid grid";
  gap: clamp(40px, 3.125vw, 60px) /* 60px */ 2.083vw /* 40px */;
}

.special-offers {
  max-width: 1400px;
  margin: 0 auto;
  margin-bottom: clamp(40px, 3.125vw, 60px) /* 60px */;
}

.special-offers__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.special-offers__header-text {
  flex: 1;
}

.special-offers__header-text > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px) /* 48px */;
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-left: clamp(40px, 4.167vw, 80px) /* 80px */;
  margin-top: clamp(40px, 3.646vw, 70px) /* 70px */;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
}

.special-offers__header-text > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin-left: clamp(40px, 4.167vw, 80px) /* 80px */;
  margin-bottom: 0;
}

.special-offers__navigation {
  grid-area: nav;
  display: flex;
  gap: clamp(24px, 2.083vw, 40px) /* 40px */;
  flex-shrink: 0;
  align-self: flex-end;
  margin-right: clamp(40px, 4.167vw, 80px) /* 80px */;
}

.special-offers__nav-btn {
  width: clamp(28px, 1.875vw, 36px) /* 36px */;
  height: clamp(28px, 1.875vw, 36px) /* 36px */;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.special-offers__nav-btn img {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
  transition: filter 0.3s ease;
}

.special-offers__nav-btn:hover img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
    hue-rotate(355deg) brightness(93%) contrast(117%);
}

.special-offers__nav-btn:disabled {
  cursor: not-allowed;
}

.special-offers__nav-btn:disabled img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.special-offers__nav-btn:disabled:hover img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.special-offers__nav-btn svg {
  width: 100%;
  height: 100%;
  fill: #1f1933;
}

.special-offers__grid {
  grid-area: grid;
  display: flex;
  gap: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-left: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-right: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
  position: relative;
  overflow: hidden;
}

/* Градиент слева блока со спецпредложениями */
.special-offers__grid::before {
  content: "";
  position: absolute;
  border-radius: 0 0 0 4.896vw /* 94px */;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(200px, 15.625vw, 300px) /* 300px */;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.special-offers__grid.show-left-gradient::before {
  opacity: 1;
}

/* Градиент справа блока со спецпредложениями */
.special-offers__grid::after {
  content: "";
  position: absolute;
  border-radius: 0 0 4.896vw /* 94px */ 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(200px, 15.625vw, 300px) /* 300px */;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.special-offers__grid.show-right-gradient::after {
  opacity: 1;
}

.special-offers__card {
  background: transparent;
  box-sizing: border-box;
  _border: clamp(1px, 0.104vw, 2px) /* 2px */ solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px) /* 74px */;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: calc((100% - (3 * 1.042vw /* 20px */)) / 4);
  padding-left: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-right: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-top: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-bottom: clamp(24px, 2.083vw, 40px) /* 40px */;
  min-height: 100%;

  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.special-offers__card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(24px, 2.083vw, 40px) /* 40px */;
}

.special-offers__card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(30px, 2.813vw, 54px) /* 54px */;
  background: transparent;
}

.special-offers__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: max-content;
  padding: 0 2.083vw /* 40px */;
}

.special-offers__card-content > h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
}

.special-offers__card-content > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
  flex-grow: 1;
}

.special-offers__card-link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #f42534;
  text-decoration: none;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
  transition: color 0.3s ease;
}

.special-offers__card-link:hover {
  color: #fa0012;
}

/* ========================================
   SERVICES OPPORTUNITIES СЕКЦИЯ (БЕЗ ИЗОБРАЖЕНИЙ)
   Модифицированная версия special-offers
   ======================================== */

.section--services-opportunities {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header nav"
    "grid grid";
  gap: clamp(40px, 3.125vw, 60px) /* 60px */ 2.083vw /* 40px */;
}

.services-opportunities__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.services-opportunities__header-text {
  flex: 1;
}

.services-opportunities__header-text > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px) /* 48px */;
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-left: clamp(40px, 4.167vw, 80px) /* 80px */;
  margin-top: clamp(40px, 3.646vw, 70px) /* 70px */;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
}

.services-opportunities__header-text > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin-left: clamp(40px, 4.167vw, 80px) /* 80px */;
  margin-bottom: 0;
}

.services-opportunities__navigation {
  grid-area: nav;
  display: flex;
  gap: clamp(24px, 2.083vw, 40px) /* 40px */;
  flex-shrink: 0;
  align-self: flex-end;
  margin-right: clamp(40px, 4.167vw, 80px) /* 80px */;
}

.services-opportunities__nav-btn {
  width: clamp(28px, 1.875vw, 36px) /* 36px */;
  height: clamp(28px, 1.875vw, 36px) /* 36px */;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.services-opportunities__nav-btn img {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
  transition: filter 0.3s ease;
}

.services-opportunities__nav-btn:hover img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
    hue-rotate(355deg) brightness(93%) contrast(117%);
}

.services-opportunities__nav-btn:disabled {
  cursor: not-allowed;
}

.services-opportunities__nav-btn:disabled img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.services-opportunities__nav-btn:disabled:hover img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.services-opportunities__nav-btn svg {
  width: 100%;
  height: 100%;
  fill: #1f1933;
}

.services-opportunities__grid {
  grid-area: grid;
  display: flex;
  gap: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-left: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-right: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
  position: relative;
  overflow: hidden;
}

/* Градиент слева блока с услугами */
.services-opportunities__grid::before {
  content: "";
  position: absolute;
  border-radius: 0 0 0 4.896vw /* 94px */;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(200px, 15.625vw, 300px) /* 300px */;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.services-opportunities__grid.show-left-gradient::before {
  opacity: 1;
}

/* Градиент справа блока с услугами */
.services-opportunities__grid::after {
  content: "";
  position: absolute;
  border-radius: 0 0 4.896vw /* 94px */ 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(200px, 15.625vw, 300px) /* 300px */;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.services-opportunities__grid.show-right-gradient::after {
  opacity: 1;
}

.services-opportunities__card {
  background: transparent;
  box-sizing: border-box;
  _border: clamp(1px, 0.104vw, 2px) /* 2px */ solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px) /* 74px */;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: calc((100% - (3 * 1.042vw /* 20px */)) / 4);
  padding-left: clamp(30px, 3.125vw, 60px) /* 60px */;
  padding-right: clamp(30px, 3.125vw, 60px) /* 60px */;
  padding-top: clamp(40px, 3.125vw, 60px) /* 60px */;
  padding-bottom: clamp(40px, 3.125vw, 60px) /* 60px */;
  min-height: 100%;
  
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.services-opportunities__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  position: relative;
}

.services-opportunities__card-link {
  margin-top: auto;
  align-self: stretch;
  display: block;
}

.services-opportunities__card-content > h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
}

.services-opportunities__card-content > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
  flex-grow: 1;
}

.services-opportunities__card-link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #f42534;
  text-decoration: none;
  margin-bottom: 0;
  transition: color 0.3s ease;
}

.services-opportunities__card-link:hover {
  color: #fa0012;
}

/* Секція Быстрый ответ (Quick Response) */
.section--quick-response {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4.167vw, 80px) /* 80px */;
  padding: 0;
}

.quick-response__content {
  display: flex;
  flex-direction: column;
  padding-top: clamp(20px, 1.563vw, 30px);
  padding-left: clamp(40px, 4.167vw, 80px) /* 80px */;
}

.quick-response__content > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px) /* 48px */;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0 0 1.042vw /* 20px */ 0;
}

.quick-response__content > p:first-of-type {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  margin: 0 0 3.125vw /* 60px */ 0;
}

.quick-response__form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.quick-response__field {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: clamp(8px, 0.521vw, 10px) /* 10px */;
}

.quick-response__field:nth-of-type(2) {
  margin-bottom: clamp(24px, 2.083vw, 40px) /* 40px */;
}

.quick-response__input {
  width: 100%;
  padding: clamp(20px, 1.563vw, 30px) /* 30px */ 2.188vw /* 42px */;
  border: clamp(1px, 0.104vw, 2px) /* 2px */ solid transparent;
  border-radius: clamp(16px, 1.042vw, 20px) /* 20px */;
  background: #ededed;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  font-weight: 400;
  color: #1f1933;
  box-sizing: border-box;
  transition: all 0.3s ease;

  background: #fff;
}

.quick-response__input--checkbox{
  width: auto;
  opacity: 0;
  position: absolute;
  visibility: hidden;
}
.quick-response__input--checkbox:checked + p:before{
  
}
.quick-response__form .quick-response__check-wrap > .quick-response__input--checkbox:checked + p:before{
  display: block;
}
.quick-response__check-wrap{
  flex-direction: row;
  font-weight: 400;
  font-size: 16px;
  color: #9d9d9d;
  cursor: pointer;
}
.quick-response__check-wrap a{
  color: #9d9d9d
}
.quick-response__input::placeholder {
  color: #9d9d9d;
}

/* Default state - пустой input */
.quick-response__input:not(:focus):not(.active):not(.error):not(.warning):not(
    :disabled
  ) {
  background: #ededed;
  border-color: transparent;
  color: #9d9d9d;

  background: #fff;
}

/* Hover state */
.quick-response__input:hover:not(:focus):not(:disabled) {
  background: #e0e0e0;
  border-color: transparent;
}

/* Active state - когда пользователь начал вводить текст */
.quick-response__input.active,
.quick-response__input:not(:placeholder-shown) {
  background: #ffffff;
  border-color: transparent;
  color: #1f1933;
}

/* Focus state - когда input в фокусе */
.quick-response__input:focus {
  outline: none;
  background: #ffffff;
  border-color: #1f1933;
  color: #1f1933;
}

/* Inactive state - заполненный, но не в фокусе */
.quick-response__input:not(:focus):not(:placeholder-shown):not(.error):not(
    .warning
  ) {
  background: #f5f5f5;
  border-color: transparent;
  color: #1f1933;
}

/* Error state */
.quick-response__input.error {
  background: #fff5f5;
  border-color: #ee3f3f;
  color: #ee3f3f;
}

.quick-response__input.error::placeholder {
  color: #ee3f3f;
}

/* Warning state */
.quick-response__input.warning {
  background: #fffbf0;
  border-color: #ffa500;
  color: #ffa500;
}

.quick-response__input.warning::placeholder {
  color: #ffa500;
}

/* Disabled state */
.quick-response__input:disabled {
  background: #f5f5f5;
  border-color: transparent;
  color: #d0d0d0;
  cursor: not-allowed;
  opacity: 0.6;
}

.quick-response__input:disabled::placeholder {
  color: #d0d0d0;
}

/* Текст ошибки/подсказки под input */
.quick-response__error {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(12px, 0.729vw, 14px) /* 14px */;
  font-weight: 400;
  line-height: 120%;
  color: #9d9d9d;
  margin-top: 0;
  padding-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  display: block;
}

/* Показываем текст ошибки */
.quick-response__field.has-error .quick-response__error {
  opacity: 1;
  max-height: clamp(30px, 2.604vw, 50px) /* 50px */;
  margin-top: clamp(6px, 0.417vw, 8px) /* 8px */;
  padding-top: clamp(3px, 0.208vw, 4px) /* 4px */;
  color: #ee3f3f;
}

/* Показываем текст предупреждения */
.quick-response__field.has-warning .quick-response__error {
  opacity: 1;
  max-height: clamp(30px, 2.604vw, 50px) /* 50px */;
  margin-top: clamp(6px, 0.417vw, 8px) /* 8px */;
  padding-top: clamp(3px, 0.208vw, 4px) /* 4px */;
  color: #ffa500;
}

/* Кнопка формы должна растягиваться на всю ширину */
.quick-response__form .btn {
  width: 100%;
  order: 10
}

.quick-response__form > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(12px, 0.833vw, 16px) /* 16px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #1f1933;
  margin-top: clamp(8px, 0.521vw, 10px) /* 10px */;
}

.quick-response__form > p > a {
  transition: color 0.3s ease;
    color: #0000EE; /* Стандартный синий цвет ссылок */
    text-decoration: underline; /* подчеркивание */
    background: none; /* Убираем фоновый цвет */
    font-weight: normal; /* Сбрасываем жирность шрифта */
}

.quick-response__form > p > a:active {
    color: #0056b3; /* Темно-синий цвет при активном состоянии */
}
.quick-response__form > p > a:hover {
    color: #551A8B; /* Темно-фиолетовый цвет при наведении */
    text-decoration: underline; /* Подчеркивание при наведении */
}

.quick-response__form .quick-response__check-wrap{
  margin-bottom: clamp(8px, 1.042vw, 20px) /* 10px */;
  display: flex;
  gap: 10px

}
.quick-response__form .quick-response__check-wrap > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(12px, 0.833vw, 16px) /* 16px */;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0%;
  text-align: left;
  color: #9d9d9d;
  padding-left: 34px;
  position: relative;
}
.quick-response__form .quick-response__check-wrap > p:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: #F42534;
  width: 24px;
  height: 24px;
  border-radius: 8px;
}
.quick-response__form .quick-response__check-wrap > p:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 4L3 6L8 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e") no-repeat center;
  z-index: 2;
  display: none;
}


.quick-response__form .quick-response__check-wrap p > a {
  transition: color 0.3s ease;
    color: #9d9d9d; /* Стандартный синий цвет ссылок */
    text-decoration: underline; /* подчеркивание */
    background: none; /* Убираем фоновый цвет */
    font-weight: normal; /* Сбрасываем жирность шрифта */
}

.quick-response__form .quick-response__check-wrap p > a:active {
    color: #9d9d9d; /* Темно-синий цвет при активном состоянии */
}
.quick-response__form .quick-response__check-wrap p > a:hover {
    color: #9d9d9d; /* Темно-фиолетовый цвет при наведении */
    text-decoration: underline; /* Подчеркивание при наведении */
}

.quick-response__agreement a {
  color: #9d9d9d;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.quick-response__agreement a:hover {
  color: #ee3f3f;
}

.quick-response__image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-left: 0;
}

.quick-response__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(40px, 3.854vw, 74px) /* 74px */;
  
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.section--blog {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header nav"
    "grid grid";
  gap: clamp(40px, 3.125vw, 60px) /* 60px */ 2.083vw /* 40px */;
}

/* Секция Блог (Blog / Полезные статьи) */
.blog {
  max-width: 1400px;
  margin: 0 auto;
  margin-bottom: clamp(40px, 3.125vw, 60px) /* 60px */;
}

.blog__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.blog__header-text {
  flex: 1;
}

.blog__header-text > h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px) /* 48px */;
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-left: clamp(40px, 4.167vw, 80px) /* 80px */;
  margin-top: clamp(40px, 3.646vw, 70px) /* 70px */;
  margin-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
}

.blog__header-text > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #504d5d;
  margin-left: clamp(40px, 4.167vw, 80px) /* 80px */;
  margin-bottom: 0;
}

.blog__navigation {
  grid-area: nav;
  display: flex;
  gap: clamp(24px, 2.083vw, 40px) /* 40px */;
  flex-shrink: 0;
  align-self: flex-end;
  margin-right: clamp(40px, 4.167vw, 80px) /* 80px */;
}

.blog__nav-btn {
  width: clamp(28px, 1.875vw, 36px) /* 36px */;
  height: clamp(28px, 1.875vw, 36px) /* 36px */;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.blog__nav-btn img {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
  transition: filter 0.3s ease;
}

.blog__nav-btn:hover img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
    hue-rotate(355deg) brightness(93%) contrast(117%);
}

.blog__nav-btn:disabled {
  cursor: not-allowed;
}

.blog__nav-btn:disabled img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.blog__nav-btn:disabled:hover img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
    hue-rotate(188deg) brightness(89%) contrast(87%);
}

.blog__nav-btn svg {
  width: 100%;
  height: 100%;
  fill: #1f1933;
}

.blog__grid {
  grid-area: grid;
  display: flex;
  gap: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-left: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-right: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-bottom: clamp(16px, 1.042vw, 20px) /* 20px */;
  position: relative;
  overflow: hidden; 
}

/* Градиент слева блока с блогом */
.blog__grid::before {
  content: "";
  position: absolute;
  border-radius: 0 0 0 4.896vw /* 94px */;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(200px, 15.625vw, 300px) /* 300px */;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.blog__grid.show-left-gradient::before {
  opacity: 1;
}

/* Градиент справа блока с блогом */
.blog__grid::after {
  content: "";
  position: absolute;
  border-radius: 0 0 4.896vw /* 94px */ 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(200px, 15.625vw, 300px) /* 300px */;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.blog__grid.show-right-gradient::after {
  opacity: 1;
}

.blog__card {
  background: transparent;
  box-sizing: border-box;
  border: clamp(1px, 0.104vw, 2px) /* 2px */ solid rgba(191, 191, 191, 1);
  border-radius: clamp(40px, 3.854vw, 74px) /* 74px */;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: calc((100% - (3 * 1.042vw /* 20px */)) / 4);
  padding-left: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-right: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-top: clamp(16px, 1.042vw, 20px) /* 20px */;
  padding-bottom: clamp(24px, 2.083vw, 40px) /* 40px */;
  min-height: 100%;
}

.blog__card-image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.blog__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(30px, 2.813vw, 54px) /* 54px */;
  background: transparent;
}

.blog__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: max-content;
  padding: 0 2.083vw /* 40px */;
  gap: clamp(16px, 1.042vw, 20px) /* 20px */;
  flex-grow: 1;
}

.blog__card-content > h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
}

.blog__card-content > p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px) /* 20px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  flex-grow: 1;
}

.blog__card-link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  font-weight: 500;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #f42534;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog__card-link:hover {
  color: #fa0012;
}

/* Блок с категорией и датой */
.blog__card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: clamp(6px, 0.417vw, 8px) /* 8px */;
  white-space: nowrap;
  margin-top: auto;
}

.blog__card-category,
.blog__card-date {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(12px, 0.833vw, 16px) /* 16px */;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0%;
  color: #9d9d9d;
  white-space: nowrap;
}

.blog__card-category {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  _flex: 1;
  min-width: 0;
  background: #494555;
  border: 2px solid #494555;

  border-radius: 40px;
  padding: 8px 12px;
  color: #fff
}

.blog__card-date {
  text-align: right;
  flex-shrink: 0;
}

/* 15. Секция: Ссылки и информация */
.section--footer-info {
  padding: clamp(40px, 4.167vw, 80px) /* 80px */ 4.167vw /* 80px */ 2.656vw
    /* 51px */;
  margin: 0;
}

.footer__columns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
  line-height: 100%;
  letter-spacing: 0%;
}

.footer__column {
  flex: 1;
  min-width: 0;
}

.footer__column > h3 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(30px, 2.604vw, 50px) /* 50px */;
}

/* Визуально скрываем placeholder, но сохраняем пространство */
.footer__column-title--placeholder {
  visibility: hidden;
}

.footer__section {
  margin-bottom: clamp(30px, 2.604vw, 50px) /* 50px */;
}

.footer__section:last-child {
  margin-bottom: 0;
}

.footer__section > h4,
.footer__column > h4 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.458vw, 28px) /* 28px */;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(20px, 1.563vw, 30px) /* 30px */;
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px) /* 20px */;
}

.footer__link {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__link:hover {
  color: #ee3f3f;
}

.footer__contact-info {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px) /* 20px */;
}

.footer__phone,
.footer__email {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  line-height: 100%;
  color: #494555;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__phone:hover,
.footer__email:hover {
  color: #ee3f3f;
}

.footer__social {
  display: flex;
  gap: clamp(16px, 1.042vw, 20px) /* 20px */;
  margin-top: clamp(8px, 0.521vw, 10px) /* 10px */;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 2.917vw, 56px);
  height: clamp(44px, 2.917vw, 56px);
  border-radius: 100px;
  background: transparent;
  transition: opacity 0.2s ease;
}

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

.footer__social-link img {
  width: 100%;
  height: 100%;
  display: block;
}

.footer__social-link--max img {
  width: 100%;
  height: 100%;
}

/* ========================================
   ВСПЛЫВАЮЩЕЕ МЕНЮ УСЛУГ
   ======================================== */

/* Overlay с размытием - покрывает всё, кроме header */
.services-popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Размытие фона (всегда 100px без clamp) */
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  /* Лёгкая тонировка (для отладки временно делай 0.2-0.4) */
  background-color: #ffffff03;
  z-index: 500; /* меньше чем у header/menu, больше чем у main */
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Показываем overlay при открытии */
.services-popup__overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Контейнер меню */
.services-popup__container {
  position: fixed;
  /* Позиционируем под header */
  top: calc(
    var(--header-offset-top) + var(--header-height, 94px) +
      clamp(16px, 1.042vw, 20px)
  );
  left: clamp(16px, 1.042vw, 20px);
  right: clamp(16px, 1.042vw, 20px);
  gap: clamp(40px, 4.167vw, 80px);
  border-radius: clamp(50px, 4.896vw, 94px);
  background: #ffffff;
  box-shadow: 0 clamp(16px, 1.042vw, 20px) clamp(60px, 5.208vw, 100px)
    rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  /* Анимация появления */
  transform: translateY(clamp(-16px, -1.042vw, -20px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1100;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 100%);
  border: 2px solid #fff;
}

.services-popup__container.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Блок со ссылками */
.services-popup__links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: clamp(40px, 4.167vw, 80px);
  width: 100%;
  min-width: 0;
  margin-top: clamp(40px, 4.167vw, 80px);
  margin-bottom: clamp(40px, 4.167vw, 80px);
  margin-left: clamp(40px, 4.167vw, 80px);
}

/* Обёртка колонок (аналог footer__column) */
.services-popup__column-wrapper {
  flex: 1;
  min-width: 0;
}

/* Блок заголовков категорий */
.services-popup__categories {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.563vw, 30px);
  width: 100%;
  min-width: 0;
}

.services-popup__categories > h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(20px, 1.458vw, 28px);
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin: 0;
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.services-popup__categories > h3:hover {
  color: #fa0012;
}

.services-popup__categories > h3.active {
  color: #fa0012;
}

/* Колонки с подтемами */
.services-popup__column {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
  width: 100%;
  min-width: 0;
}

.services-popup__link {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(16px, 1.146vw, 22px);
  line-height: 100%;
  letter-spacing: 0%;
  color: #494555;
  text-decoration: none;
  transition: color 0.3s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.services-popup__link:hover {
  color: #fa0012;
}

/* Блок с фотографией */
.services-popup__image {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  _overflow: hidden;
  margin-top: clamp(16px, 1.042vw, 20px);
  margin-right: clamp(16px, 1.042vw, 20px);
  margin-bottom: clamp(16px, 1.042vw, 20px);
  margin-left: auto;
  width: clamp(300px, 22vw, 422px);
  height: clamp(300px, 22vw, 422px);
}

.services-popup__photo {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(40px, 3.854vw, 74px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: scale(0.95);
  z-index: 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12)
}

.services-popup__photo.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
  object-fit: cover;
}

/* Анимация для иконки кнопки */
.btn--services .btn__icon {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--services.active .btn__icon {
  transform: rotate(180deg);
}

/* ========================================
   МОДАЛЬНОЕ ОКНО "ЗАКАЗАТЬ ЗВОНОК"
   ======================================== */

/* Overlay для модального окна (выше всего) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Размытие фона */
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  background-color: #ffffff03;
  z-index: 2000; /* Выше services-popup (z-index: 1100) и его overlay (z-index: 500) */
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Показываем overlay при открытии модального окна */
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Контейнер модального окна */
.modal-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100; /* Выше modal-overlay */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Обёртка для центрирования содержимого */
.modal-popup__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: clamp(16px, 1.042vw, 20px);
  width: auto;
  height: auto;
}

/* Внутренний контейнер с формой */
.modal-popup__container {
  position: relative;
  background: #ffffff;
  border-radius: clamp(50px, 4.896vw, 94px);
  max-width: clamp(700px, 52.083vw, 1000px);
  width: auto;
  height: auto;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 clamp(16px, 1.042vw, 20px) clamp(60px, 5.208vw, 100px)
    rgba(0, 0, 0, 0.15);
  transform: scale(0.9) translateY(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  max-width: clamp(664px, 664px, 664px);
}

.modal-popup.open .modal-popup__container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Кнопка закрытия */
.modal-popup__close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: clamp(60px, 4.167vw, 80px);
  height: clamp(60px, 4.167vw, 80px);
  border-radius: 100px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.modal-popup.open .modal-popup__close {
  transform: scale(1);
  opacity: 1;
}

.modal-popup__close:hover {
  background: #e5e5e5;
}

.modal-popup__close img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.modal-popup .quick-response__input{
  background: #ededed !important;
}
/* Адаптация контента формы внутри модального окна */
.modal-popup .quick-response__content {
  padding: clamp(40px, 4.167vw, 80px);
  width: 100%;
  max-width: 640px;
}

.modal-popup .quick-response__content > h2 {
  text-align: center;
  margin-bottom: clamp(16px, 1.042vw, 20px);
  font-size: clamp(28px, 2.5vw, 36px) /* 48px */;
}

.modal-popup .quick-response__content > p:first-of-type {
  text-align: center;
  margin-bottom: clamp(24px, 2.083vw, 40px);
  font-size: clamp(22px, 2.5vw, 22px) /* 48px */;
}

/* Контейнер успешной отправки */
.modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 1.042vw, 20px);
  text-align: center;
}

.modal-success__image {
  width: 100%;
  height: auto;
  border-radius: clamp(40px, 3.854vw, 74px) /* 74px */;
  margin-bottom: clamp(24px, 2.083vw, 40px) /* 40px */;
}

.modal-success__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: clamp(30px, 3.125vw, 60px) /* 60px */;
  margin-right: clamp(30px, 3.125vw, 60px) /* 60px */;
  margin-bottom: clamp(40px, 3.125vw, 60px) /* 60px */;
  padding: 0 3.854 /* 74px */;
}

.modal-success__content > h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(20px, 1.875vw, 36px) /* 36px */;
  line-height: 100%;
  letter-spacing: 0%;
  color: #1f1933;
  margin-bottom: clamp(8px, 0.521vw, 10px) /* 10px */;
}

.modal-success__content > p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #494555;
  max-width: 430px;
  margin: 0 auto
}

/* Блокировка прокрутки body при открытом модальном окне */
body.modal-open {
  overflow: hidden;
}

/* ========================================
   СТРАНИЦА 404
   ======================================== */

/* Обертка страницы 404 */
#page404Content {
  /* Дополнительные стили при необходимости */
}

/* Специальные стили для секции 404 */
.section--404 {
  /* Можно добавить особенности отображения, если нужно */
}

/* Адаптация изображения 404 */
.section--404 .hero__image img {
  /* Можно настроить размер изображения 404 */
  width: clamp(600px, 55.83vw, 1072px);
}

/* ========================================
   СТИЛИ ДЛЯ ЛЕНИВОЙ ЗАГРУЗКИ ИЗОБРАЖЕНИЙ
   ======================================== */

/**
 * Стили для img элементов с ошибками загрузки
 * Автоматически применяется при срабатывании обработчика ошибок
 */
img.image-error {
  opacity: 0.7;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

/**
 * Плавная загрузка изображений при появлении в viewport
 * loading="lazy" встроенный атрибут браузера
 */
img[loading="lazy"] {
  transition: opacity 0.3s ease-in-out;
}

/**
 * Восстановленное изображение после ошибки
 * Fallback изображение (error.png) получит этот стиль
 */
img[alt*="Ошибка"] {
  filter: grayscale(20%);
}

/**
 * Улучшенная производительность для изображений
 * Содержит их внутри контейнера без смещения контента (CLS)
 */
img {
  max-width: 100%;
  height: auto;
  image-rendering: high-quality;
}

/* ========================================
   ПОКАЗЫВАЕМ МОБИЛЬНУЮ ШАПКУ ТОЛЬКО НА МОБИЛКАХ
   ПО УМОЛЧАНИЮ СКРЫТА НА ДЕСКТОПЕ
   ======================================== */

.header--mobile {
  display: none;
}

/* ========================================
   МЕДИА-ЗАПРОСЫ (MOBILE)
   Breakpoint: 1023px и меньше
   ======================================== */

@media screen and (max-width: 1023px) {
  /* ========================================
     ПЕРЕОПРЕДЕЛЕНИЕ CSS ПЕРЕМЕННЫХ ДЛЯ МОБИЛКИ
     ======================================== */

  :root {
    --header-mobile-offset: 10px;
    --header-mobile-height: 82px; /* padding 20px * 2 + высота контента ~42px */
    -webkit-tap-highlight-color: transparent;
  }

  main {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* ========================================
     ОТКЛЮЧЕНИЕ HOVER ЭФФЕКТОВ НА МОБИЛЬНЫХ
     И ЗАМЕНА НА ACTIVE (НАЖАТИЕ)
     ======================================== */

  /* Кнопки primary */
  .btn--primary:hover {
    background: #f42534;
  }

  .btn--primary:active {
    background: #fa0012;
  }

  /* Кнопки secondary */
  .btn--secondary:hover {
    background: #ffffff;
  }

  .btn--secondary:active {
    background: #e5e5e5;
  }

  /* Кнопки services */
  .btn--services:hover {
    background: #f42534;
  }

  .btn--services:active {
    background: #fa0012;
  }

  /* Навигационные ссылки */
  .nav__link:hover {
    color: #494555;
  }

  .nav__link:active {
    color: #fa0012;
  }

  /* Выпадающее меню ссылки */
  .nav-dropdown__link:hover {
    color: #494555;
  }

  .nav-dropdown__link:active {
    color: #f42534;
  }

  /* Телефон в header */
  .header__phone:hover {
    color: #494555;
  }

  .header__phone:active {
    color: #ee3f3f;
  }

  /* Ссылки в карточке отзыва */
  .reviews__card-link:hover {
    color: #f42534;
  }

  .reviews__card-link:active {
    color: #d32030;
  }

  /* Ссылки в меню услуг */
  .services__card-menu a:hover {
    color: #494555;
  }

  .services__card-menu a:active {
    color: #fa0012;
  }

  /* Ссылки в footer */
  .footer__legal-link:hover {
    color: #9d9d9d;
  }

  .footer__legal-link:active {
    color: #1e1b39;
  }

  /* ========================================
     НАВИГАЦИОННЫЕ КНОПКИ (CARROUSEL)
     Замена :hover на :active для иконок
     ======================================== */

  /* Единый селектор для всех навигационных кнопок */
  .services__nav-btn img,
  .work-process__nav-btn img,
  .clients__nav-btn img,
  .track-group__nav-btn img,
  .reviews__nav-btn img,
  .special-offers__nav-btn img,
  .blog__nav-btn img {
    /* Базовое состояние - без эффекта */
    filter: none;
  }

  /* ОТКЛЮЧАЕМ HOVER ЭФФЕКТ НА МОБИЛКЕ */
  .services__nav-btn:hover img,
  .work-process__nav-btn:hover img,
  .clients__nav-btn:hover img,
  .track-group__nav-btn:hover img,
  .reviews__nav-btn:hover img,
  .special-offers__nav-btn:hover img,
  .blog__nav-btn:hover img {
    /* На мобилке hover не применяется - остаётся базовое состояние */
    filter: none;
  }

  /* АКТИВНОЕ состояние при нажатии (вместо hover) */
  .services__nav-btn:active img,
  .work-process__nav-btn:active img,
  .clients__nav-btn:active img,
  .track-group__nav-btn:active img,
  .reviews__nav-btn:active img,
  .special-offers__nav-btn:active img,
  .blog__nav-btn:active img {
    /* Красный цвет при активации (как было при hover на десктопе) */
    filter: brightness(0) saturate(100%) invert(13%) sepia(98%) saturate(6967%)
      hue-rotate(355deg) brightness(93%) contrast(117%);
  }

  /* ОТКЛЮЧЕННОЕ состояние - сохраняем серый цвет */
  .services__nav-btn:disabled img,
  .work-process__nav-btn:disabled img,
  .clients__nav-btn:disabled img,
  .track-group__nav-btn:disabled img,
  .reviews__nav-btn:disabled img,
  .special-offers__nav-btn:disabled img,
  .blog__nav-btn:disabled img {
    filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
      hue-rotate(188deg) brightness(89%) contrast(87%);
  }

  /* ОТКЛЮЧЕННОЕ + HOVER - не меняем цвет (остаётся серым) */
  .services__nav-btn:disabled:hover img,
  .work-process__nav-btn:disabled:hover img,
  .clients__nav-btn:disabled:hover img,
  .track-group__nav-btn:disabled:hover img,
  .reviews__nav-btn:disabled:hover img,
  .special-offers__nav-btn:disabled:hover img,
  .blog__nav-btn:disabled:hover img {
    filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
      hue-rotate(188deg) brightness(89%) contrast(87%);
  }

  /* ОТКЛЮЧЕННОЕ + НАЖАТИЕ - не меняем цвет (остаётся серым) */
  .services__nav-btn:disabled:active img,
  .work-process__nav-btn:disabled:active img,
  .clients__nav-btn:disabled:active img,
  .track-group__nav-btn:disabled:active img,
  .reviews__nav-btn:disabled:active img,
  .special-offers__nav-btn:disabled:active img,
  .blog__nav-btn:disabled:active img {
    filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(0%)
      hue-rotate(188deg) brightness(89%) contrast(87%);
  }

  /* ========================================
     МОБИЛЬНОЕ МЕНЮ OVERLAY
     ======================================== */

  /* Overlay-слой с padding-top равным высоте header */
  .mobile-menu-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e5e5;
    z-index: 1100; /* Выше main (1), ниже header (1200) */
    padding-top: calc(
      var(--header-mobile-offset) + var(--header-mobile-height)
    );
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  /* Кнопка закрытия меню (Back) внутри overlay */
  .mobile-menu-back {
    min-width: 56px;
    min-height: 42px;
    margin: 20px;
    margin-bottom: 0;
  }

  .mobile-menu-back img {
    object-fit: fill;
    transition: all 0.3s ease;
    transform: rotate(90deg);
  }

  /* Контент внутри overlay - плавная анимация появления */
  .mobile-menu-content {
    animation: slideInContent 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* 🎯 АРХИТЕКТУРА: Адаптация формы для мобильного overlay */
  .mobile-menu-content .quick-response__content--mobile {
    padding: 20px;
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
  }

  .quick-response__content--mobile {
    margin-top: 20px;
  }

  .mobile-menu-content {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 10px;
    padding: 0;
  }

  .mobile-menu-content .quick-response__content > p:first-of-type {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .mobile-menu-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .mobile-menu-content {
    width: 100%;
    padding: 0;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
  }

  /* 🎯 СТИЛИ ДЛЯ СООБЩЕНИЯ ОБ УСПЕХЕ В МОБИЛЬНОМ ОВЕРЛЕЕ */
  .mobile-menu-content .modal-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    background-color: #ffffff;
    border-radius: 20px;
    margin-top: 20px;
  }

  .mobile-menu-content .modal-success__image {
    border-radius: 30px;
    padding: 20px;
    margin: 0;
  }

  .mobile-menu-content .modal-success__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    text-align: start;
    margin: 0;
    padding: 0 20px;
  }

  .mobile-menu-content .modal-success__content > h2 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    line-height: 1.2;
    color: #1f1933;
    margin-bottom: 10px;
  }

  .mobile-menu-content .modal-success__content > p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1.5;
    text-align: start;
    color: #494555;
    margin-bottom: 20px;
  }

  /* Анимация появления контента с небольшим движением снизу */
  @keyframes slideInContent {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Footer остаётся на своём месте (в конце страницы) */
  /* Никаких изменений для .footer в мобилке */

  /* ========================================
     УПРАВЛЕНИЕ ВИДИМОСТЬЮ HEADER
     ======================================== */

  /* Скрываем десктопную версию шапки */
  .header--desktop {
    display: none;
  }

  /* Динамический padding для body (аналогично десктопу) */
  body {
    /* Верхний padding: отступ мобильной шапки + её высота + дополнительный отступ */
    padding: calc(
        var(--header-mobile-offset) + var(--header-mobile-height) + 10px
      )
      0 0 0;
  }

  /* ========================================
     PRIMARY ВНОПКА
     ======================================== */

  .btn--primary {
    width: 100%;
    padding: 20px 0px;
    border-radius: 20px;
    font-size: 18px;
	display: flex;
	justify-content: center;
  }

  /* ========================================
     МОБИЛЬНАЯ ШАПКА (HEADER MOBILE)
     ======================================== */

  .header--mobile {
    display: block;
    position: fixed;
    top: var(--header-mobile-offset);
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 20px;
    background: #ffffff1a;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 20px;
    margin: 0 var(--header-mobile-offset);
    transition: backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      -webkit-backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Убираем blur у header когда overlay активен */
  .services-popup__overlay.open ~ .header--mobile,
  body.overlay-active .header--mobile {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }

  /* Контейнер мобильной шапки */
  .header__mobile-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  /* Логотип мобильной шапки */
  .header__mobile-logo {
    flex-shrink: 0;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Контейнер для кнопок справа */
  .header__mobile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  /* ========================================
     КНОПКА "УСЛУГИ" (МОБИЛЬНАЯ)
     ======================================== */

  .btn--mobile-services {
    width: 92px;
    height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 20px;
    background: #f42534;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #ffffff;
    border: none;
  }

  /* ========================================
     КНОПКА-ИКОНКА (ПЕРЕИСПОЛЬЗУЕМЫЙ КОМПОНЕНТ)
     ======================================== */

  .btn-icon {
    width: 56px;
    height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 20px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .btn-icon img {
    object-fit: contain;
    transition: all 0.3s ease;
  }

  /* Состояние активности для иконки меню - скрываем гамбургер */
  .btn-icon#mobileMenuBtn.menu-active img[src*="menu-mobile"] {
    opacity: 0;
    transform: rotate(90deg) scale(0.3);
  }

  /* Контейнер для изображения крестика - показываем при активности */
  .btn-icon#mobileMenuBtn::after {
    content: url("/local/templates/main/image/icons/close.svg");
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    transition: all 0.3s ease;
    line-height: 1;
    filter: brightness(0);
  }

  .btn-icon#mobileMenuBtn.menu-active::after {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  .section {
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 20px;
    align-items: start;
  }

  .section:last-child {
    margin-bottom: 0;
  }

  /* ========================================
     HERO СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → описание → картинка → кнопка
     ======================================== */

  .section--hero {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

  /* Hero Home — мобилка */
  .section--hero-home {
    padding: 0;
    min-height: auto;
    background-position: center;
  }

  .section--hero-home .hero-home__card {
    width: auto;
    margin: 12px;
    padding: 24px 20px;
    gap: 16px;
    border-radius: 24px;
  }

  .section--hero-home .hero-home__title {
    font-size: 22px;
  }

  .section--hero-home .hero-home__desc {
    font-size: 13px;
  }

  .section--hero-home .hero-home__stats {
    gap: 8px;
  }

  .section--hero-home .hero-home__stat {
    padding: 10px 6px;
    border-radius: 14px;
  }

  .section--hero-home .hero-home__stat-value {
    font-size: 18px;
  }

  .section--hero-home .hero-home__stat-label {
    font-size: 10px;
  }

  .section--hero-home .hero-home__btn {
    font-size: 16px;
    padding: 14px 20px;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 20px;
    order: 1;
  }

  .hero__text-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero__text-group > h1 {
    font-size: 32px;
  }

  .hero__text-group > p {
    font-size: 18px;
  }

  /* Хлебные крошки (мобильная версия) */
  .breadcrumbs {
    gap: 10px;
    flex-wrap: wrap; /* Разрешаем перенос на несколько строк */
    align-items: center; /* Выравнивание по центру по вертикали */
  }

  .breadcrumbs__logo-wrapper {
    width: 15.8px;
    height: 18px;
  }

  .breadcrumbs__separator-wrapper {
    width: 6px;
  }

  .breadcrumbs__logo-link {
    font-size: 14px;
  }

  .breadcrumbs__link {
    font-size: 16px;
    white-space: nowrap; /* Запрещаем перенос текста внутри ссылки */
    flex-shrink: 0; /* Запрещаем сжатие ссылки */
  }

  .hero__image {
    margin: 20px 0;
    padding: 0;
    order: 2;
    justify-content: start;
    align-items: start;
  }

  .hero__image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  /* Управление видимостью кнопок */
  .hero__button {
    display: none; /* Скрываем десктопную кнопку */
  }

  .hero__button-mobile {
    display: block; /* Показываем мобильную кнопку */
    order: 3;
    width: 100%;
    /* Автолейаут */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .hero__stats {
    flex-direction: column;
    gap: 16px;
  }

  .hero__stat {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  /* ========================================
     404 СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Применяем те же стили адаптива что и для .section--hero
     Порядок: заголовок → описание → картинка → кнопка
     ======================================== */

  .section--404 {
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

  .section--404 .hero__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 20px;
    order: 1;
  }

  .section--404 .hero__text-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .section--404 .hero__text-group > h1 {
    font-size: 32px;
  }

  .section--404 .hero__text-group > p {
    font-size: 18px;
  }

  .section--404 .hero__image {
    margin: 20px 0;
    padding: 0;
    order: 2;
  }

  .section--404 .hero__image img {
    width: 320px;
    height: auto;
    border-radius: 10px;
  }

  /* Управление видимостью кнопок в секции 404 */
  .section--404 .hero__button {
    display: none; /* Скрываем десктопную кнопку */
  }

  .section--404 .hero__button-mobile {
    display: block; /* Показываем мобильную кнопку */
    order: 3;
    width: 100%;
    /* Автолейаут */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  /* ========================================
     ABOUT-COMPANY СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → текст → картинка → кнопка
     ======================================== */

  .section--about-company {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 0px;
  }

  .section--about-company > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
    _order: 1;
  }

  .about-company__content a{
    display: none;
  }

  .section.section--about-company > a{
    display: block;
    width: 100%;
  }

  .about-company__text-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .about-company__content {
    _order: 2;

    margin: 0;
  }

  .about-company__text {
    margin-bottom: 20px;
    gap: 10px;
  }

  .about-company__text > p {
    font-size: 18px;
  }

  .about-company__image {
    _order: 3;
    margin: 0 0 20px 0;
  }

  .about-company__image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  /* Управление видимостью кнопок */
  .about-company__button {
    display: none; /* Скрываем десктопную кнопку */
  }

  .about-company__button-mobile {
    display: block; /* Показываем мобильную кнопку */
    order: 4;
    width: 100%;
    /* Автолейаут */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20;
    padding: 20px 0px 20px 0px;
    border-radius: 20px;
    font-size: 18px;
  }

  /* ========================================
     section--achievements секция (достижения
     и результаты)
     ======================================== */

  .section--achievements > h2 {
    font-size: 24px;
    margin: 0 0 20px 0;
    text-align: start;
  }

  .achievements__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: 20px;
    padding: 0;
  }

  .achievements__card {
    border: 2px solid rgba(191, 191, 191, 1);
    border-width: 2px !important;
    border-radius: 20px;
    padding: 20px;
    min-height: auto;
  }

  .achievements__card-content {
    gap: 10px;
  }

  .achievements__card-value {
    font-size: 32px;
  }

  .achievements__card-label {
    font-size: 18px;
  }

  /* ========================================
     READY-TO-START СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → текст → картинка → кнопка
     ======================================== */

  .section--ready-to-start {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 0;
  }

  .section--ready-to-start > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
    order: 1;
  }

  .ready-to-start__content {
    order: 2;
    padding: 0;
    margin: 0;
  }

  .ready-to-start__text {
    margin-bottom: 20px;
    gap: 10px;
  }

  .ready-to-start__text > p {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .ready-to-start__text p:last-child {
    margin: 0;
  }

  .ready-to-start__image {
    order: 3;
    margin: 0 0 20px 0;
  }

  .ready-to-start__image img {
    width: 320px;

    height: auto;
    border-radius: 10px;
  }

  /* Управление видимостью кнопок */
  .ready-to-start__button {
    display: none; /* Скрываем десктопную кнопку */
  }

  .ready-to-start__button-mobile {
    display: block; /* Показываем мобильную кнопку */
    order: 4;
    width: 100%;
  }

  /* Модификатор для альтернативной версии с списком (мобильная версия) */
  .section--ready-to-start-alt .ready-to-start__text {
    gap: 20px;
  }

  .ready-to-start__text > p {
    font-size: 18px;
    margin-bottom: 0;
  }

  .ready-to-start__text > ul {
    padding-left: 10px;
    border-left: 2px solid #f42534;
    margin-bottom: 0;
  }

  .ready-to-start__text > ul li {
    font-size: 16px;
    margin-bottom: 3px;
  }

  .ready-to-start__text > ul li:last-child {
    margin-bottom: 0;
  }

  /* ========================================
     PRICING СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → описание → карусель карточек
     ======================================== */

  .section--pricing {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }

  .pricing__text-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    min-width: 0;
  }

  .pricing__text-container > h2 {
    font-size: 24px;
    margin: 0;
  }

  .pricing__text-container > p {
    font-size: 18px;
    margin: 0;
    line-height: 120%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Карусель карточек тарифов */
  .pricing__cards-container {
    display: flex;
    gap: 20px;
    padding: 0;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Карточка тарифа (мобильная версия) - фиксированная ширина, показываем по 1 карточке */
  .pricing-card {
    flex: 0 0 300px;
    min-width: 300px;
    width: 300px;
    max-width: 300px;
    scroll-snap-align: start;
    border-width: 2px;
    border-radius: 20px;
    padding: 20px;
    gap: 20px;
  }

  .pricing-card__header {
    gap: 10px;
  }

  .pricing-card__title {
    font-size: 18px;
  }

  .pricing-card__price {
    font-size: 18px;
  }

  .pricing-card__badge-wrapper {
    gap: 10px;
  }

  .pricing-card__badge {
    padding: 10px 20px;
    border-radius: 100px;
    gap: 10px;
  }

  .pricing-card__badge > span {
    font-size: 16px;
  }

  .pricing-card__strikethrough {
    font-size: 16px;
  }

  .pricing-card__features {
    gap: 10px;
  }

  .pricing-card__feature {
    font-size: 16px;
  }

  .pricing-card .btn--primary {
    margin-top: auto;
    width: 100%;
  }

  /* Tariff v3 — mobile */

  .pricing__layout {
    grid-template-columns: 1fr;
  }
  .pricing__left {
    grid-row: auto;
  }
  .pricing__cards-container {
    grid-column: 1;
    grid-row: auto;
  }
  .pricing__pricelist {
    grid-column: 1;
    grid-row: auto;
  }

  .pricing__left {
    width: 100%;
    padding: 0;
  }

  .pricing__features-block {
    display: none;
  }

  .pricing-card__description {
    font-size: 12px;
  }

  .pricing-card--basic .pricing-card__title,
  .pricing-card--optimal .pricing-card__title,
  .pricing-card--premium .pricing-card__title {
    font-size: 13px;
    padding: 5px 14px;
  }

  .pricing-card--basic .pricing-card__feature,
  .pricing-card--optimal .pricing-card__feature,
  .pricing-card--premium .pricing-card__feature {
    padding-left: 26px;
    font-size: 13px;
  }

  .pricing-card--basic .pricing-card__feature::before,
  .pricing-card--optimal .pricing-card__feature::before,
  .pricing-card--premium .pricing-card__feature::before {
    width: 18px;
    height: 18px;
  }

  .pricing-card__separator {
    margin: 4px 0;
  }

  .pricing-card__features-heading {
    font-size: 14px;
  }

  .pricing-card__ribbon {
    top: 12px;
    right: 12px;
    font-size: 11px;
    padding: 4px 12px;
  }

  .pricing-card__info {
    padding: 10px;
    gap: 8px;
    border-radius: 12px;
  }

  .pricing-card__info-icon {
    width: 18px;
    height: 18px;
  }

  .pricing-card__info-title {
    font-size: 12px;
  }

  .pricing-card__info-desc {
    font-size: 11px;
  }

  .pricing-card__footer {
    font-size: 10px;
  }

  .pricing-card--basic .pricing-card__price,
  .pricing-card--optimal .pricing-card__price,
  .pricing-card--premium .pricing-card__price {
    font-size: 22px;
  }

  /* Навигация для карусели тарифов (показываем на мобилке) */
  .pricing__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 40px;
  }

  .pricing__nav-btn {
    width: 24px;
    height: 24px;
  }

  /* ========================================
     ADVANTAGES СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     ======================================== */

  .section--advantages > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .section--advantages > p {
    font-size: 18px;
    margin: 0 0 20px 0;
  }

  .advantages__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0;
  }

  .advantage-card {
    border: 2px solid rgba(191, 191, 191, 1);
    border-radius: 20px;
    padding: 0;
  }

  .advantage-card__image {
    margin: 0;
    padding: 20px 20px 0 20px;
  }

  .advantage-card__image img {
    border-radius: 10px;
  }

  .advantage-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }

  .advantage-card__content h3 {
    font-size: 18px;
    margin: 0;
  }

  .advantage-card__content > p {
    font-size: 16px;
    margin: 0;
  }

  /* Старые селекторы для совместимости */
  .advantage-card > h3 {
    font-size: 18px;
    text-align: start;
    margin-bottom: 20px;
  }

  /* секция 3 - section--services */
  .section--services {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "grid"
      "nav";
    padding: 20px;
    gap: 20px;
  }

  .services__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
  }

  .services__header-text {
    order: 1;
  }

  .services__header-text > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .services__header-text > p {
    font-size: 18px;
    margin: 0;
  }

  .services__navigation {
    grid-area: nav;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0;
    align-self: center;
  }

  .services__nav-btn {
    width: 24px;
    height: 24px;
  }

  .services__grid {
    grid-area: grid;
    display: flex;
    gap: 20px;
    padding: 0;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .services__grid::before,
  .services__grid::after {
    display: none; /* Убираем градиенты на мобилке */
  }

  .services__card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    border: 2px solid rgba(191, 191, 191, 1);
    border-radius: 20px;
    padding: 20px;
  }

  .services__card-image {
    margin-bottom: 20px;
  }

  .services__card-image img {
    border-radius: 10px;
  }

  .services__card > h3 {
    font-size: 18px;
    margin: 0px;
    margin-bottom: 20px;
  }

  .services__card-menu {
    margin: 0px;
  }

  .services__card-menu li {
    margin: 0px;
    margin-bottom: 20px;
  }

  .services__card-menu a {
    font-size: 16px;
  }

  /* ========================================
     TRACK-GROUP СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Карусель с прокруткой - аналог services карусели
     Порядок: заголовок → описание → список → картинка → кнопка → навигация
     ======================================== */

  .section--track-group {
    padding: 20px;
  }

  /* Делаем carousel контейнером flex для управления порядком элементов */
  .track-group__carousel {
    display: flex;
    flex-direction: column;
  }

  /* Контейнер карточек превращается в прокручиваемую карусель */
  .track-group__cards {
    display: flex;
    gap: 20px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    order: 1; /* Карточки идут первыми */
  }

  /* Убираем полосу прокрутки */
  .track-group__cards::-webkit-scrollbar {
    display: none;
  }

  .track-group__cards {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  /* Карточка в мобилке */
  .track-group__card {
    flex: 0 0 100%; /* Карточка занимает всю ширину */
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .track-group__content {
    order: 1;
    padding: 0;
    flex-shrink: 0; /* Контент не сжимается */
  }

  .track-group__content > h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .track-group__content > p:nth-of-type(1) {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .track-group__content > p:nth-of-type(2) {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .track-group__list {
    margin-bottom: 0; /* Убираем фиксированный отступ */
    padding-left: 10px;
    border-left: 2px solid #f42534;
  }

  .track-group__list li {
    font-size: 16px;
  }

  .track-group__image {
    order: 2;
    margin-top: auto; /* ДИНАМИЧЕСКИЙ отступ - прижимает изображение вниз */
    margin-bottom: 20px; /* Фиксированный отступ до кнопки */
    padding: 0;
    padding-top: 20px; /* Минимальный отступ сверху */
    flex-shrink: 0; /* Изображение не сжимается */
    align-items: start;
    justify-content: start;
  }

  .track-group__image img {
    width: 300px;
    border-radius: 10px;
  }

  /* Управление видимостью кнопок */
  .track-group__button {
    display: none; /* Скрываем десктопную кнопку */
  }

  .track-group__button-mobile {
    display: block; /* Показываем мобильную кнопку */
    order: 3;
  }

  /* Навигация карусели на мобилке */
  .track-group__navigation {
    position: static; /* Убираем абсолютное позиционирование */
    order: 4; /* Навигация идет ПОСЛЕ кнопки */
    margin: 0;
    margin-top: 20px;
    padding: 0;
    box-shadow: none; /* Убираем тень для мобильной версии */
    background: transparent; /* Делаем фон прозрачным */
    display: flex;
    border-radius: 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: auto;
  }

  .track-group__nav-btn {
    width: 24px;
    height: 24px;
  }

  .track-group__nav-btn img {
    width: 100%;
    height: 100%;
  }

  .track-group__nav-text {
    font-size: 16px;
  }

  /* ========================================
     SPECIAL-OFFERS СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → описание → карусель → кнопки
     ======================================== */

  .section--special-offers {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "grid"
      "nav";
    padding: 20px;
    gap: 20px;
  }

  .special-offers {
    margin-bottom: 0;
  }

  .special-offers__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
  }

  .special-offers__header-text > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .special-offers__header-text > p {
    font-size: 18px;
    margin: 0;
  }

  .special-offers__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0;
    order: 4; /* Навигация четвертая (последняя) */
  }

  .special-offers__nav-btn {
    width: 24px;
    height: 24px;
  }

  .special-offers__grid {
    gap: 20px;
    padding: 0;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .special-offers__grid::before,
  .special-offers__grid::after {
    display: none; /* Убираем градиенты на мобилке */
  }

  .special-offers__card {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgba(191, 191, 191, 1);
    border-radius: 20px;
    padding: 20px;
    scroll-snap-align: start;
    min-height: 100%;
  }

  .special-offers__card-image {
    margin-bottom: 20px;
  }

  .special-offers__card-image img {
    border-radius: 10px;
  }

  .special-offers__card-content {
    padding: 0;
  }

  .special-offers__card-content > h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .special-offers__card-content > p {
    font-size: 16px;
    margin-bottom: 20px;
    flex-grow: 1;
  }

  .special-offers__card-link {
    font-size: 16px;
    margin-bottom: 0;
  }

  /* ========================================
     SERVICES OPPORTUNITIES СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ, БЕЗ ИЗОБРАЖЕНИЙ)
     Порядок: заголовок → описание → карусель → кнопки
     ======================================== */

  .section--services-opportunities {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "grid"
      "nav";
    padding: 20px;
    gap: 20px;
  }

  .services-opportunities__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
  }

  .services-opportunities__header-text > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .services-opportunities__header-text > p {
    font-size: 18px;
    margin: 0;
  }

  .services-opportunities__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0;
    order: 4;
  }

  .services-opportunities__nav-btn {
    width: 24px;
    height: 24px;
  }

  .services-opportunities__grid {
    gap: 20px;
    padding: 0;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .services-opportunities__grid::before,
  .services-opportunities__grid::after {
    display: none;
  }

  .services-opportunities__card {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgba(191, 191, 191, 1);
    border-radius: 20px;
    padding: 30px 20px;
    scroll-snap-align: start;
    min-height: 100%;
  }

  .services-opportunities__card-content {
    display: flex;
    flex-direction: column;
  }

  .services-opportunities__card-content > h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .services-opportunities__card-content > p {
    font-size: 16px;
    margin-bottom: 20px;
    flex-grow: 1;
  }

  .services-opportunities__card-link {
    font-size: 16px;
    margin-bottom: 0;
  }

  /* ========================================
     BLOG СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → описание → карусель → кнопки
     ======================================== */

  .section--blog {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "grid"
      "nav";
    padding: 20px;
    gap: 0;
  }

  .blog {
    margin-bottom: 0;
  }

  .blog__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }

  .blog__header-text > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .blog__header-text > p {
    font-size: 18px;
    margin: 0;
  }

  .blog__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 20px 0 0 0;
    order: 4; /* Навигация четвертая (последняя) */
  }

  .blog__nav-btn {
    width: 24px;
    height: 24px;
  }

  .blog__grid {
    gap: 20px;
    padding: 0;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .blog__grid::before,
  .blog__grid::after {
    display: none; /* Убираем градиенты на мобилке */
  }

  .blog__card {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-width: 2px;
    border-radius: 20px;
    padding: 20px;
    scroll-snap-align: start;
    min-height: 100%;
  }

  .blog__card-image {
    margin-bottom: 20px;
  }

  .blog__card-image img {
    border-radius: 10px;
  }

  .blog__card-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .blog__card-content > h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .blog__card-content > p {
    font-size: 16px;
    margin-bottom: 20px;
    flex-grow: 1;
  }

  .blog__card-link {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .blog__card-meta {
    gap: 5px;
  }

  .blog__card-category,
  .blog__card-date {
    font-size: 16px;
  }

  /* ========================================
     WORK-PROCESS СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → описание → карусель → кнопки
     ======================================== */

  .section--work-process {
    padding: 20px;
  }

  .section--work-process > h2 {
    font-size: 24px;
    margin: 0;
    margin-bottom: 10px;
  }

  .section--work-process > p {
    font-size: 18px;
    margin: 0;
    margin-bottom: 20px;
  }

  .section--work-process > .work-process__navigation + p{
    margin-top: 20px
  
  }

  .work-process__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .work-process__nav-btn {
    width: 24px;
    height: 24px;
  }

  .work-process__grid {
    display: flex;
    gap: 20px;
    padding: 0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .work-process-card {
    flex: 0 0 280px;
    border: 2px solid rgba(191, 191, 191, 1);
    border-radius: 20px;
    padding: 0;
    scroll-snap-align: start;
  }

  .work-process-card__image {
    padding: 20px;
    margin-bottom: 0;
  }

  .work-process-card__image img {
    border-radius: 10px;
  }

  .work-process-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px 20px 20px;
    text-align: center;
  }

  .work-process-card__content h3 {
    font-size: 18px;
    margin: 0;
  }

  .work-process-card__content p {
    font-size: 16px;
    margin: 0;
  }

  /* Старые селекторы для совместимости */
  .work-process-card > h3 {
    font-size: 18px;
    margin: 0px;
    margin-bottom: 10px;
  }

  .work-process-card > p {
    font-size: 16px;
    margin: 0px;
  }

  /* ========================================
     CLIENTS СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Карусель вместо бесконечной анимации
     ======================================== */

  .section--clients {
    padding: 20px;
    overflow: hidden;
  }

  .clients__header {
    text-align: start;
    margin-bottom: 20px;
  }

  .clients__header > h2 {
    font-size: 24px;
    margin: 0 0 10px 0;
  }

  .clients__header > p {
    font-size: 18px;
    margin: 0 0 20px 0;
  }

  /* Показываем градиенты на мобильной версии для плавных краев */
  .section--clients::before,
  .section--clients::after {
    display: block;
    width: 100px;
  }

  /* Включаем бесконечную анимацию на мобилке (как на desktop) */
  .clients__grid {
    display: flex;
    gap: 20px;
    animation: clientsScroll 40s linear infinite;
    width: max-content;
    margin-bottom: 20px;
    padding-bottom: 20px;

    /* Убираем полосу прокрутки */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  /* Убираем полосу прокрутки для Webkit */
  .clients__grid::-webkit-scrollbar {
    display: none;
  }

  .clients__logo {
    flex-shrink: 0;
    width: 200px;
    height: 120px;
    border-radius: 10px;
    padding: 10px;
  }

  /* ========================================
     REVIEWS СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Карусель вместо column-count
     ======================================== */

  /* ========================================
     REVIEWS СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Карусель вместо column-count
     Порядок: заголовок → карусель → кнопка "Все отзывы" → навигация
     ======================================== */

  .section--reviews {
    gap: 20px;
  }

  /* Контейнер превращается в flex для управления порядком */
  .reviews__container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Левый блок с заголовком и кнопкой */
  .reviews__left-block {
    padding: 0;
    margin-bottom: 0;
    display: contents; /* Делаем детей этого блока прямыми детьми container */
  }

  .reviews__left-block > h2 {
    font-size: 24px;
    order: 1; /* Заголовок первый */
  }

  /* Кнопка "Все отзывы" идет после карусели */
  .reviews__left-block .btn {
    order: 3; /* Кнопка третья (после карусели) */
    width: 100%;
  }

  /* Превращаем в карусель */
  .reviews__cards-block {
    column-count: 1;
    display: flex;
    gap: 20px;
    padding: 0;
    padding-bottom: 15px;
    overflow-x: auto;
    overflow-y: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    order: 2; /* Карусель вторая */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  /* WebKit browsers (Safari, Chrome) - кастомный scrollbar для видимости */
  .reviews__cards-block::-webkit-scrollbar {
    height: 8px;
  }

  .reviews__cards-block::-webkit-scrollbar-track {
    background: transparent;
  }

  .reviews__cards-block::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  .reviews__cards-block::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }

  /* Убираем градиент на мобилке */
  .reviews__cards-block::after {
    display: none;
  }

  .reviews__card {
    scroll-snap-align: start;
    padding: 20px;
    gap: 20px;
    border: 2px solid rgba(191, 191, 191, 1);
    margin-bottom: 0;
    border-radius: 20px;
  }

  .reviews__card-header {
    gap: 10px;
  }

  .reviews__card-photo {
    width: 46px;
    height: 46px;
    border-radius: 62.1px;
  }

  .reviews__card-info {
    gap: 4px;
  }

  .reviews__card-name {
    font-size: 16px;
  }

  .reviews__card-company,
  .reviews__card-date {
    font-size: 16px;
  }

  .reviews__card > p {
    font-size: 16px;
  }

  .reviews__card-link {
    font-size: 16px;
  }

  /* Показываем кнопки навигации */
  .reviews__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 20px;
    order: 4; /* Навигация четвертая (последняя) */
  }

  .reviews__nav-btn {
    width: 24px;
    height: 24px;
  }

  /* ========================================
     FAQ СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: заголовок → карточки в столбик → кнопка "Задать вопрос"
     ======================================== */

  .section--faq {
    padding: 20px;
    gap: 20px;
  }

  /* Контейнер превращается в flex для управления порядком */
  .faq__container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Левый блок с заголовком и кнопкой */
  .faq__left-block {
    padding: 0;
    display: contents; /* Делаем детей этого блока прямыми детьми container */
  }

  .faq__left-block > h2 {
    font-size: 24px;
    margin: 0;
    order: 1; /* Заголовок первый */
  }

  /* Кнопка "Задать вопрос" идет после карточек */
  .faq__left-block .btn {
    order: 3; /* Кнопка третья (после карточек) */
    width: 100%;
  }

  /* Карточки в одну колонку */
  .faq__cards-block {
    /* column-count: 1;
    padding: 0;
    column-gap: 0;
    order: 2; /* Карточки вторые */
	display: grid;
	order: 2;
	gap: 10px;
	padding: 0;
  }

  .faq__card {
    padding: 20px;
    border-radius: 20px;
    border-width: 2px;
    //margin-bottom: 10px;
	margin-bottom: 0;
  }

  .faq__card-header {
    gap: 20px;
  }

  .faq__question-text {
    font-size: 18px;
  }

  .faq__toggle-btn {
    width: 24px;
    height: 24px;
  }

  .faq__answer {
    font-size: 18px;
  }

  .faq__card.active .faq__answer {
    max-height: 1000px;
    padding-top: 20px;
  }

  /* ========================================
     QUICK-RESPONSE СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Порядок: фотография → блок с формой
     ======================================== */

  .section--quick-response {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  /* Фотография первая */
  .quick-response__image {
    height: auto;
    width: auto;
    order: 1;
    padding: 0;
  }

  .quick-response__image img {
    height: 236.31px;
    width: 320px;
    border-radius: 10px;
  }

  /* Контент с формой второй */
  .quick-response__content {
    order: 2;
    padding: 0;
    width: 100%;
  }

  .quick-response__content > h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .quick-response__content > p:first-of-type {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .quick-response__input {
    padding: 20px;
    font-size: 18px;
    border-radius: 20px;
    border-width: 2px;
  }

  .quick-response__field {
    margin-bottom: 10px;
  }

  .quick-response__field:nth-of-type(2) {
    margin-bottom: 20px;
  }

  .quick-response__error {
    font-size: 12px;
  }

  .quick-response__field.has-error .quick-response__error,
  .quick-response__field.has-warning .quick-response__error {
    max-height: 50px;
    margin-top: 5px;
    padding-top: 3px;
  }

  .quick-response__form > p {
    font-size: 14px;
    margin-top: 10px;
  }

  .quick-response__form > p > a:hover {
    color: #9d9d9d;
  }

  .quick-response__form > p > a:active {
    color: #1e1b39;
  }

  /* ========================================
     FOOTER СЕКЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ)
     Аккордеон вместо колонок
     ======================================== */

  .section--footer-info {
    background: transparent;
    padding: 0;
    margin: 0px;
  }

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

  .footer__column {
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
  }

  /* Колонка 2 (Услуги) используем display: contents, чтобы её дети стали прямыми детьми .footer__columns */
  .footer__column:nth-child(2) {
    display: contents;
  }

  /* Теперь переупорядочиваем все элементы на уровне .footer__columns */

  /* Колонка 1 - О компании (order: 1) */
  .footer__column:nth-child(1) {
    order: 1;
  }

  /* Заголовок "Услуги" из колонки 2 (order: 2) */
  .footer__column:nth-child(2) > h3 {
    order: 2;
  }

  /* Секция "Услуги 1С" из колонки 2 (order: 3) */
  .footer__column:nth-child(2) > .footer__section:nth-child(2) {
    order: 3;
  }

  /* Колонка 3 - Услуги Битрикс 24 (order: 4) */
  .footer__column:nth-child(3) {
    order: 4;
  }

  /* Колонка 4 - IT-инфраструктура (order: 5) */
  .footer__column:nth-child(4) {
    order: 5;
    margin-top: 10px; /* Отступ от "Услуги Битрикс 24" */
  }

  /* Секция "Серверные решения и сети" из колонки 2 (order: 6) - в конец */
  .footer__column:nth-child(2) > .footer__section:nth-child(3) {
    order: 6;
    margin-top: 10px; /* Отступ от "IT-инфраструктура и оборудование" */
    margin-bottom: 10px; /* Отступ снизу как у остальных секций */
  }

  /* Скрываем placeholder заголовки полностью */
  .footer__column-title--placeholder {
    display: none;
  }

  /* Основные заголовки "О компании" и "Услуги" */
  .footer__column > h3 {
    font-size: 32px;
    margin: 20px;
    visibility: visible;
  }

  /* Секции превращаем в аккордеон-кнопки */
  .footer__section {
    margin-bottom: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 100%);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  }

  /* Заголовок секции становится кнопкой */
  .footer__section > h4,
  .footer__column > h4 {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    _background: #ffffff;
    font-size: 24px;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    /* Transition для border-radius - работает и при открытии и при закрытии */
    transition: border-radius 0.4s ease;
  
    background: #fff;
    background: transparent;
  }

  /* Активное состояние кнопки - углы становятся прямыми ПЛАВНО */
  .footer__section.active > h4 {
    border-radius: 20px 20px 0 0; /* Верхние углы скруглены, нижние прямые */
    transition: border-radius 0.4s ease;
  }

  /* Иконка стрелки для секций внутри колонки */
  .footer__section > h4::after {
    content: "";
    width: 9px;
    height: 4.5px;
    background-image: url("/local/templates/main/image/icons/show-more.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }

  /* Иконка стрелки для заголовков напрямую в колонке (Битрикс 24, IT-инфраструктура) */
  .footer__column > h4::after {
    content: "";
    width: 9px;
    height: 4.5px;
    background-image: url("/local/templates/main/image/icons/show-more.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }

  /* Поворот иконки при активном состоянии (для секций) */
  .footer__section.active > h4::after {
    transform: rotate(180deg);
  }

  /* Поворот иконки при активном состоянии (для колонок) */
  .footer__column.active > h4::after {
    transform: rotate(180deg);
  }

  /* Контент аккордеона (footer__list) - изначально скрыт только в мобилке */
  .footer__columns .footer__list {
    max-height: 0 !important;
    overflow: hidden;
    padding: 0 20px !important;
    gap: 20px;
    opacity: 0;
    background: #ffffff;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out 0.1s; /* Opacity с задержкой */
  }

  /* Активное состояние - список раскрыт (для обычных секций) */
  .footer__section.active .footer__list {
    max-height: 1000px !important;
    opacity: 1;
    padding: 20px !important;
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    margin-top: 0px;
  }

  .footer__link {
    font-size: 18px;
  }

  /* Для колонок 3 и 4 (где h4 вне footer__section) */
  .footer__columns .footer__column > .footer__list {
    max-height: 0 !important;
    overflow: hidden;
    padding: 0 20px !important;
    gap: 20px;
    opacity: 0;
    background: #ffffff;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out 0.1s;
  }

  .footer__column.active > .footer__list {
    max-height: 1000px !important;
    opacity: 1;
    padding: 20px !important;
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    margin-top: -15px;
  }

  /* Контактная информация внутри аккордеона - изначально скрыта */
  .footer__columns .footer__contact-info {
    gap: 15px;
    padding: 0 20px !important;
    max-height: 0 !important;
    overflow: hidden;
    opacity: 0;
    background: #ffffff;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out 0.1s; /* Opacity с задержкой */
  }

  /* Активное состояние - контакты раскрыты */
  .footer__section.active .footer__contact-info {
    max-height: 500px !important;
    opacity: 1;
    padding: 20px !important;
    background: #ffffff;
    border-radius: 0 0 20px 20px;
    margin-top: -15px;
  }

  .footer__phone,
  .footer__email {
    font-size: 16px;
  }

  .footer__social {
    gap: 15px;
    margin-top: 10px;
  }

  .footer__social-link {
    width: 40px;
    height: 40px;
  }

  /* Отключаем hover эффект на мобилке для социальных сетей */
  .footer__social-link:hover {
    background-color: #ffffff;
  }

  /* Эффект при нажатии на социальные сети (как hover на десктопе) */
  .footer__social-link:active {
    background-color: #e5e5e5;
  }

  /* Нижняя часть футера */
  .footer__container {
    padding: 20px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    align-items: center;
  }

  .footer__container > p {
    font-size: 16px;
    text-align: center;
  }

  .footer__legal {
    flex-direction: column;
    gap: 10px;
  }

  .footer__legal-link {
    font-size: 16px;
  }
}

/* ========================================
   СТРАНИЦА ОТЗЫВОВ (REVIEWS PAGE)
   ======================================== */

/* Секция статистики отзывов */
.section--reviews-stats {
  padding: clamp(40px, 4.167vw, 80px);
  gap: clamp(40px, 4.167vw, 80px);
}

.reviews-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 1.563vw, 30px);
  max-width: 100%;
  margin: 0 auto;
}

.reviews-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 0.833vw, 16px);
  padding: clamp(30px, 2.604vw, 50px);
  background: #ffffff;
  border-radius: clamp(30px, 2.604vw, 50px);
  border: 2px solid #e5e5e5;
  text-align: center;
  transition: all 0.3s ease;
}

.reviews-stats__item:hover {
  border-color: #f42534;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(244, 37, 52, 0.1);
}

.reviews-stats__number {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(36px, 3.333vw, 64px);
  font-weight: 700;
  line-height: 100%;
  color: #f42534;
}

.reviews-stats__label {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  line-height: 120%;
  color: #494555;
}

/* Секция списка отзывов */
.section--reviews-list {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.167vw, 80px);
  padding: clamp(40px, 4.167vw, 80px);
}

.reviews-list__header {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 1.875vw, 36px);
  align-items: center;
  text-align: center;
}

.reviews-list__header h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  line-height: 110%;
  color: #1f1933;
  margin: 0;
}

/* Фильтры категорий */
.reviews-list__filters {
  display: flex;
  gap: clamp(12px, 1.042vw, 20px);
  justify-content: center;
  flex-wrap: wrap;
}

.reviews-filter__btn {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  padding: clamp(12px, 0.833vw, 16px) clamp(24px, 1.875vw, 36px);
  border-radius: clamp(16px, 1.042vw, 20px);
  border: 2px solid #e5e5e5;
  background: #ffffff;
  color: #494555;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reviews-filter__btn:hover {
  border-color: #f42534;
  color: #f42534;
}

.reviews-filter__btn--active {
  background: #f42534;
  color: #ffffff;
  border-color: #f42534;
}

/* Сетка отзывов */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.042vw, 20px);
  width: 100%;
}

/* Рейтинг звезд */
.reviews__card-rating {
  display: flex;
  gap: clamp(4px, 0.313vw, 6px);
  align-items: center;
}

.reviews__star {
  font-size: clamp(18px, 1.354vw, 26px);
  color: #e5e5e5;
  transition: color 0.3s ease;
}

.reviews__star--filled {
  color: #ffc107;
}

.reviews-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(60px, 5.208vw, 100px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(18px, 1.354vw, 26px);
  color: #9d9d9d;
}

.reviews-grid__pagination {
  margin-top: clamp(40px, 3.125vw, 60px);
  display: flex;
  justify-content: center;
}

/* Секция формы отзыва */
.section--review-form {
  padding: clamp(40px, 4.167vw, 80px);
  gap: clamp(40px, 4.167vw, 80px);
}

.review-form__container {
  background: #ffffff;
  border-radius: clamp(40px, 3.854vw, 74px);
  padding: clamp(40px, 4.167vw, 80px);
  border: 2px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.125vw, 60px);
}

.review-form__header {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.042vw, 20px);
  text-align: center;
}

.review-form__header h2 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  line-height: 110%;
  color: #1f1933;
  margin: 0;
}

.review-form__header p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  line-height: 140%;
  color: #494555;
  margin: 0;
}

.review-form__content {
  width: 100%;
}

/* Адаптация для планшетов (768px - 1024px) */
@media (max-width: 1024px) {
  .reviews-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviews-list__filters {
    gap: 12px;
  }

  .reviews-filter__btn {
    font-size: 16px;
    padding: 10px 20px;
  }

  .section--reviews-stats,
  .section--reviews-list,
  .section--review-form {
    padding: 40px 20px;
  }

  .review-form__container {
    padding: 40px 30px;
  }
}

/* Адаптация для мобильных (до 768px) */
@media (max-width: 768px) {
  .reviews-stats__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .reviews-stats__item {
    padding: 24px;
  }

  .reviews-stats__number {
    font-size: 36px;
  }

  .reviews-stats__label {
    font-size: 14px;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .reviews-list__header h2 {
    font-size: 28px;
  }

  .reviews-list__filters {
    gap: 8px;
    width: 100%;
  }

  .reviews-filter__btn {
    font-size: 14px;
    padding: 8px 16px;
    flex: 1 1 auto;
    min-width: fit-content;
  }

  .section--reviews-stats,
  .section--reviews-list,
  .section--review-form {
    padding: 30px 16px;
    gap: 30px;
  }

  .review-form__container {
    padding: 30px 20px;
    border-radius: 30px;
  }

  .review-form__header h2 {
    font-size: 24px;
  }

  .review-form__header p {
    font-size: 14px;
  }
}


/* СТИЛИ SEO БЛОКА */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Общий контейнер страницы */
.page {
    display: flex;
    justify-content: center;
    padding: 20px 20px;
}

.page-inner {
    max-width: 1860px;
    width: 100%;
    _background: #ffffff;
    border-radius: 40px;
    display: flex;
    justify-content: space-between;
    column-gap: 48px;
    align-items: stretch; /* колонки одинаковой высоты по контенту */
}

/* Левая колонка */
.side-panel {
    display: flex;
    flex-direction: column;
    padding: 50px 80px;
}

.left-right-paddings {
	width: 100%;
    z-index: 0;
}

.main-title {
    margin: 0;
    font-size: 48px;
    line-height: 58px;
    font-weight: 700;
    color: #141126;
}

/* Карточка SEO-статьи */
/* Базовый бордер – серый */
.seoX-article {
    padding: 24px 32px 24px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    border: 2px solid #ff4b5f;
    border-radius: clamp(40px, 3.854vw, 74px);
    transition: border-color 0.25s ease;
}

/* когда карточка раскрыта – красный бордер */
.seoX-article--expanded {
    border-color: #F42534;
}

.seoX-section {
	padding: 70px 80px 60px;
}

/* Шапка карточки */
.seoX-article__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.seoX-article__title {
	display: flex;
	justify-content: center;
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    color: #141126;
    flex: 1 1 auto;
}

.seoX-article__collapse {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.seoX-article__icon {
    width: 36px;
    height: 36px;
    display: block;
    transition: filter 0.2s ease;
}

/* по умолчанию (закрыто) – серые или как сейчас */
.seoX-article__icon--minus {
    display: none;
}

/* при раскрытии переключаем иконки */
.seoX-article--expanded .seoX-article__icon--plus {
    display: none;
}

.seoX-article--expanded .seoX-article__icon--minus {
    display: block;
}

/* ----- ЦВЕТ ЧЕРЕЗ filter ----- */

/* базовый цвет иконок в закрытом состоянии (можно не трогать, если они уже ок) */
.seoX-article__icon {
    filter: none; /* или лёгкое затемнение, если хочется */
}

/* когда карточка открыта – красим иконку в красный оттенок */
.seoX-article--expanded .seoX-article__icon {
    /* фильтр подбирается под твои исходные svg. Этот вариант даёт "красный" для чёрных иконок */
    filter: invert(28%) sepia(87%) saturate(3116%) hue-rotate(-5deg) brightness(101%) contrast(102%);
}
/* по умолчанию */
.seoX-article__collapse-icon {
  filter: none;
  transition: filter .2s ease;
}

/* когда открыто — красим */
.seoX-article--expanded .seoX-article__collapse-icon {
  filter: invert(28%) sepia(87%) saturate(3116%) hue-rotate(-5deg) brightness(101%) contrast(102%);
}


/* Окно с содержимым */
.seoX-article__content {
    max-height: 10000px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    position: relative; /* нужно для градиента */
	padding-bottom: 80px;
}

/* Свернутое состояние – видим только первые 220px */
.seoX-article__content--collapsed {
    max-height: 220px;
}

/* Прозрачный градиент вниз высотой 221px,
   работает только когда блок свернут (есть класс --collapsed) */
.seoX-article__content--collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 221px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(219, 219, 219, 0) 100%
    );
}

/* Кнопки */
.btn-main-desktop {
    margin-top: auto;       /* прижимаем к низу левой колонки */
    align-self: flex-start; /* чтобы не растягивалась по ширине */
}

.btn-main-mobile {
    display: none; /* появится только на мобилке */
}

/* Обёртка кнопок "Кнопка" + "Подробнее/Скрыть" */
.seoX-article__more-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 2;
    position: absolute;
    left: 50%;
    bottom: 48px; /* расстояние от низа карточки на десктопе */
    transform: translateX(-50%);
}
/* свернуто: кнопка поверх контента */
.seoX-article__more-wrapper {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2;
}

/* если в JS ещё используется этот класс — он пусть остаётся */
.seoX-article__more-wrapper--hidden {
    display: none;
}

/* Главная картинка */
.seoX-article__image-main {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    margin-bottom: 20px;
}

.seoX-article__image-main img {
    display: block;
    width: 100%;
    height: auto;
}

/* Бейдж -50% */
.seoX-article__badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 8px 20px;
    border-radius: 20px;
    background: #ffffff;
    color: #ff2736;
    font-weight: 600;
    font-size: 18px;
}

/* Текстовые блоки */
.seoX-article__section {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #111827;
	display: flex;
    flex-direction: column;
}

.seoX-article__section--accent {
	border-left: solid #F42534 2px;
	padding-left: 30px;
}

.seoX-article__list--bulleted {
	list-style: disc;
}
/* Общие настройки для пунктов списка внутри SEO-карточки */
.seoX-article__section li {
    white-space: normal;          /* разрешаем нормальный перенос строк */
    overflow-wrap: break-word;    /* переносим длинные "слова"/строки */
    word-break: break-word;       /* дополнительная страховка */
}

/* Нумерованный список */
.seoX-article__list--numbered {
    list-style-type: decimal;
    list-style-position: outside; /* чтобы номер был снаружи, а текст ровно переносился под ним */
    margin-left: 1.5rem;          /* небольшой отступ под номера */
    padding-left: 0;
}

/* Текст/код внутри отдельных строк, который ты оборачиваешь в span */
.seoX-article__code {
    font-family: monospace;       /* если нужен "кодовый" шрифт */
    white-space: pre-wrap;        /* сохраняем переносы, но разрешаем перенос по ширине */
    overflow-wrap: break-word;
    max-width: 100%;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* CTA-секция с кнопкой в центре */
.seoX-article__section--cta {
    display: flex;
    justify-content: center;
    margin: 32px 0; /* отступ сверху и снизу от текста */
}

/* Сама кнопка CTA внутри SEO-блока */
.seoX-article__cta-btn {
    display: inline-flex;    /* чтобы вели себя как нормальный блочный элемент */
    align-items: center;
	justify-content: center;
}

/* раскрыто: кнопка становится обычным блоком под контентом */
.seoX-article--expanded .seoX-article__more-wrapper {
  position: static;
  transform: none;
  margin-top: 16px;
}

.seoX-article__subtitle {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 700;
    color: #141126;
}

.seoX-article__section p {
    margin: 0 0 12px;
    font-size: 22px;
}

.seoX-article__section ul,
.seoX-article__section ol {
    margin: 0 0 0 30px;
    padding: 0;
    font-size: 22px;
    list-style-position: outside;
}

/* Дополнительные картинки */
.seoX-article__image-secondary {
    margin: 0 0 24px;
}

.seoX-article__image-secondary img {
    display: block;
    width: 100%;
    border-radius: 32px;
}

.seoX-article__image-secondary figcaption {
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

/* CTA внутри карточки (если нужно) */
.seoX-article__cta {
    display: flex;
    justify-content: center;
    margin: 8px 0 24px;
}

/* ---------- АДАПТИВ МЕНЬШЕ 1024px ---------- */

@media (max-width: 1023px) {
    .page {
        padding: 20px 20px 0 20px;
    }

    .page-inner {
        display: flex;
        flex-direction: column;
        border-radius: 32px;
    }

    .side-panel {
        padding: 0 0 8px;
    }

    .main-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .seoX-article__title {
        font-size: 24px;
    }

    .seoX-article__subtitle {
        margin: 0 0 8px;
        font-size: 24px;
        font-weight: 700;
        color: #141126;
    }

    .left-right-paddings {
        max-width: none;
        padding: 0;
    }

    .seoX-article {
        border: none;
        padding: 0 0 32px;
        border-radius: 0;
        position: relative;
    }

    .seoX-article__collapse {
        display: none;
    }

    .btn-main-desktop {
        display: none;
    }

    .btn-main-mobile {
        display: block; /* мобильная кнопка "Кнопка" показывается */
    }

    /* --- КНОПКИ НА МОБИЛКЕ: базовое (РАСКРЫТОЕ) состояние --- */
    .seoX-article__more-wrapper {
        position: static;      /* больше не absolute */
        transform: none;
        bottom: auto;
        margin-top: 20px;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
    }

    /* обе кнопки в обёртке растягиваем по ширине */
    .seoX-article__more-wrapper .btn-main-mobile,
    .seoX-article__more-wrapper .seoX-article__more-btn {
        width: 100%;
        max-width: 100%;
    }

    /* --- СВЁРНУТОЕ состояние: обёртка снова поверх контента --- */
    .seoX-article__content--collapsed + .seoX-article__more-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
        transform: none;
        padding: 0;
        margin-top: 0;
    }
	.seoX-article__section--accent {
		display: none;
	}
	  /* раскрыто: уводим вниз под контент */
	  .seoX-article--expanded .seoX-article__more-wrapper {
		position: static;
		transform: none;
		margin-top: 16px;
	  }
}


/* --- БЛОГ --- */
.blog-section {
	padding: 70px 20px 20px;
}

.card__more {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(16px, 1.146vw, 22px);
    font-weight: 500;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
    color: #f42534;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
	padding-left: 60px;
}
.blog__breadcrumbs {
	margin-bottom: 40px;
}

.blog__title {
    font-size: 48px;
    font-weight: 700;
	line-height: 58px;
	margin: 0 0 20px;
}

.section__description {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(18px, 1.895vw, 36px) /* 36px */;
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
    color: #494555;
    margin-bottom: 0;
}

.blog__header-right {
    display: flex;
    gap: 8px;
}

.blog__nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    cursor: pointer;
}

/* Внутренние иконки под стрелки — можно нарисовать через background или ::before */
.blog__nav-btn-icon {
    display: block;
    width: 100%;
    height: 100%;
}

.card__title {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(18px, 1.4vw, 26px);
    font-weight: 700;
    font-style: normal;
	line-height: 1.2;
    letter-spacing: 0%;
    color: #1f1933;
}
.blog-pages-indicator {
    font-size: 22px;
    color: #494555;
    min-width: 48px;
    text-align: center;
    pointer-events: none;
}

.blog__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);   /* ровно 3 карточки */
  grid-template-rows: repeat(1, auto);
  /* align-items: stretch (default) — карточки одной высоты, line-clamp убирает пустоту */
  gap: 20px;
  overflow: hidden;      /* мышью больше не скроллится */
  scroll-behavior: auto; /* не нужно */

  padding: 1px;
  scrollbar-width: none;
  transition: opacity .22s ease;
}
.blog__grid::-webkit-scrollbar { display: none; }
.blog__grid.is-fading { opacity: 0; }


/* Сколько карточек в строке */
.blog-card {
    flex: 0 0 calc(33.333% - 16px);  /* 3 в ряд */
    min-width: 280px;
	background: transparent;
    box-sizing: border-box;
    _border: clamp(1px, 0.104vw, 2px) /* 2px */ solid rgba(191, 191, 191, 1);
    border-radius: clamp(40px, 3.854vw, 74px) /* 74px */;
    display: flex;
    flex-direction: column;
    _justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
    padding-left: clamp(16px, 1.042vw, 20px) /* 20px */;
    padding-right: clamp(16px, 1.042vw, 20px) /* 20px */;
    padding-top: clamp(16px, 1.042vw, 20px) /* 20px */;
    padding-bottom: clamp(24px, 2.083vw, 40px) /* 40px */;
    gap: clamp(16px, 1.042vw, 20px) /* 20px */;
  
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
}
.blog-card__subtitle {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(16px, 1.146vw, 22px);
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0%;
    color: #494555;
    margin-bottom: clamp(16px, 1.042vw, 20px);
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog__nav--mobile {
  display: none;
}

/* мобильный */
@media (max-width: 1023px){
  .blog__grid{ grid-template-columns: 1fr; }

  .blog__header-right {
    display: none !important; /* верхние стрелки скрыть */
  }

  .blog__nav--mobile {
    display: flex;
    justify-content: center;
    margin-top: 16px;         /* отступ от карточек */
  }
	.blog__header-left {
		margin-bottom: 20px;
	}
}

@media (max-width: 1023px) {
	.blog-section {
		padding: 20px;
	}
    .blog-header {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .blog__breadcrumbs {
        margin-bottom: 16px;
    }

    .blog__title {
        font-size: 24px;
        line-height: 1.2;
        margin: 0 0 10px;
    }

    .blog__description {
        font-size: 16px;
        line-height: 1.2;
    }

    /* Стрелки на мобиле — под заголовком, по центру */
    .blog__header-right {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 12px;
    }

    .services-opportunities__navigation {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Сетка карточек — просто колонка, без горизонтального скролла */
    .blog__grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow-x: visible;
        padding-bottom: 0;
        scrollbar-width: auto;
    }

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

    /* Карточка на мобиле — на всю ширину */
    .blog-card {
        flex: none;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 24px;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
        padding-bottom: 24px;
    }
	.blog__card-content {
		gap: 10px;
		max-width: 100%;
	}

    .blog-card__image-wrapper {
        border-radius: 20px !important;
        overflow: hidden;
    }

    .blog__card-content {
        padding-top: 16px;
    }
	.blog-card__subtitle {
		margin-bottom: 10px !important;
	}
}



/* ДЕТАЛЬНЫЙ БЛОГ */
.blog-detail {
    padding: 40px 0 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.blog-detail__inner {
	max-width: 864px;
}

/* Хлебные крошки */
.blog-detail__breadcrumbs {
    margin-bottom: 16px;
    font-size: 13px;
}

/* Заголовок и мета */
.blog-detail__header {
    margin-bottom: 24px;
}

.blog-detail__title {
    margin: 40px 0 20px;
    font-size: 64px;
    line-height: 1.25;
    font-weight: 700;
    color: #111827;
}

.blog-detail__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    line-height: 1;
    color: #9D9D9D;
}

.blog-detail__meta-item {
    white-space: nowrap;
}

/* Картинки */
.blog-detail__image-block {
    margin-bottom: 40px;
}

.blog-detail__image-block--main {
    margin: 40px 0;
}

.blog-detail__image-card {
    object-fit: contain;
    border-radius: clamp(40px, 3.854vw, 74px) /* 74px */;
    overflow: hidden;
}

.blog-detail__image {
    display: block;
    width: 100%;
    height: auto;
}

.blog-detail__image-caption {
	margin-top: 10px;
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    color: #9ca3af;
}

/* Текстовые блоки */
.blog-detail__section {
    margin-bottom: 32px;
}

.blog-detail__section:last-child {

}

.blog-detail__subtitle {
    margin-bottom: 40px;
    font-size: 48px;
    line-height: 1;
    font-weight: 700;
    color: #1F1933;
}
.blog-detail__text h2 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    color: #1F1933;
}

.blog-detail__text {
    font-size: 22px;
    line-height: 1.2;
    color: #1F1933;
	margin-bottom: 40px;
}

.blog-detail__text p {
    margin: 0 0 12px;
}

.blog-detail__text ul,
.blog-detail__text ol {
    margin: 0 0 16px;
    padding-left: 1.4rem;
}

.blog-detail__text li + li {
    margin-top: 4px;
}

/* Кнопка CTA */
.blog-detail__section--conclusion {
    margin-top: 32px;
}
.blog-detail__cta-button {
	display: inline-flex;
	justify-content: center;
}

/* Адаптив до 1023px */
@media (max-width: 1023px) {
    .blog-detail {
        padding: 20px;
    }

    .blog-detail__title {
        font-size: 32px;
		margin: 10px 0;
    }

    .blog-detail__meta {
        flex-direction: row;
        align-items: flex-between;
    	font-size: 16px;
    }

    .blog-detail__subtitle {
        font-size: 24px;
    }

    .blog-detail__text {
        font-size: 18px;
    }
	.blog-detail__section, .blog-detail__subtitle, .blog-detail__text, .blog-detail__image-block {
		margin-bottom: 20px
	}
}


/* ЦЕНЫ */

.page-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
}

.page-header {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 70px 80px 80px;
}

.page-subheader {
    padding: 70px 80px 60px;
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.price-subheader {
    padding: 0 0 20px;
}

.prices__subheader, .employers__subheader, .values__subheader {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.prices__navigation {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 40px;
}

.mobile-navigation {
	display: none;
}
.prices__navigation_desktop {
	display: none;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

.section-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Лента карточек */

.cards-wrapper {
    position: relative;
    padding: 0 20px 20px;
	border-radius: 0 0 clamp(50px, 4.896vw, 94px) clamp(50px, 4.896vw, 94px);
}
.js-employees-carousel, .js-values-carousel, .js-prices-carousel, .prices-section {
	overflow: hidden;
}
.js-employees-row, .js-values-row, .js-prices-row {
	overflow: visible;
}

/* DESKTOP: здесь работает transform из initUniversalCarousel */
.cards-row {
  /* как у тебя уже есть */
  display: flex;
  gap: 20px;

  scroll-behavior: smooth;

  /* 🔽 скрываем сам скроллбар */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE и Edge старые */
}

.cards-row::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Opera */
}


/* ключ: карточка не должна сжиматься */
.card {
  background: transparent;
  _border: 2px solid #BFBFBF;
  border-radius: 74px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;

  flex: 0 0 360px;  /* фиксированная ширина для скролла */
  min-width: 440px;

  padding: clamp(20px, calc(10.77px + 2.56vw), 60px);
  
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  background: #fff;
}

.card-text {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(16px, 1.146vw, 22px);
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
    color: #494555;
}



.price-card__price {
    color: #F42534;
    line-height: 1.2;
}

.price-card__text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(16px, 1.146vw, 22px);
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
    color: #494555;
    flex-grow: 1;
}

/* Кнопки слайдера */

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.06);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    opacity: 1;           /* можно сразу показывать, без is-scrollable */
    pointer-events: auto;
    z-index: 10;
}

.slider-arrow--left {
    left: -6px;
}

.slider-arrow--right {
    right: -6px;
}

.slider-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.slider-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

.slider-arrow svg {
    width: 18px;
    height: 18px;
}

.pagination, reviews__pagination {
	font-size: 22px;
	color: #494555;
}
/* MOBILE */

@media (max-width: 1023px) {
    .page-header,
    .page-subheader {
        gap: 10px;
        padding: 20px;
    }

    .page-subheader {
        padding: 0 0 20px;
    }

    .page-title {
        font-size: 32px;
        margin: 0;
    }
	.user-agreement-title {
		margin-bottom: 20px;
	}

    .section-title {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
    }
	.mobile-navigation {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding-top: 20px;
	}
	.desktop-navigation {
		display: none;
	}
	.js-prices-prev, .js-prices-next, .js-employees-prev, .js-employees-next, .js-values-prev, .js-values-next {
		padding: 9px 16px;
		width: 64px;
		height: 45px;
	}
	.js-prices-prev img, .js-prices-next img {
		width: 24px;
		height: 24px;
	}

  .card {
    flex: 0 0 80%;
    min-width: 300px;
    border-radius: 20px;
  }

    .cards-wrapper {
        padding: 0;
    }

    /* MOBILE: включаем горизонтальный скролл */
    .cards-row {
        scroll-behavior: smooth;
        scrollbar-width: thin;
    }

    .cards-row::-webkit-scrollbar {
        height: 6px;
    }

    .cards-row::-webkit-scrollbar-track {
        background: transparent;
    }

    .cards-row::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.7);
        border-radius: 999px;
    }

    .slider-arrow {
        display: none; /* на маленьких экранах только свайп */
    }

    .footer {
        padding: 0;
    }
}


/* КОНТАКТЫ */

/* Секция контактов */
.contacts-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 20px 20px;
}

/* Единая сетка: 4 колонки */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.contacts-card {
	width: 100%;
	max-width: none;
	justify-content: flex-start;
	gap: 20px;
  min-width: 0;
}

/* 1 строка */
.contacts-card--sales {
  grid-column: 1 / span 1;  /* 1-й столбец */
}
.contacts-card--support {
  grid-column: 2 / span 1;  /* 2-й столбец */
}
.contacts-card--address {
  grid-column: 3 / span 2;  /* 3–4-й столбцы → ширина двух столбцов */
}
/* 2 строка */
.contacts-card--image {
  grid-column: 1 / span 2;  /* 1–2-й столбцы */
}

.contacts-card--map {
  grid-column: 3 / span 2;  /* 3–4-й столбцы */
}

.contacts-image {
	border-radius: 74px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
/* Чтобы картинка заполняла градиентный блок */
.contacts-card-empty {
  position: relative;
  overflow: hidden;
}

.contacts-page-header {
	padding-bottom: 60px;
}

/* карточка карты — без паддингов и с обрезкой по радиусу */
.contacts-card--map, .contacts-card--image {
	padding: 0 !important;
	overflow: hidden;
	border: none;
}

/* контейнер карты должен иметь высоту */
.contacts-map {
  width: 100%;
  height: 100%;
  min-height: 320px; /* подстрой под макет */
}

/* сам iframe растягивается на весь контейнер */
.contacts-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.contacts-messengers {
    display: flex;
	gap: 20px;
}
.contacts-messengers a {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.contacts-messengers a:hover {
	opacity: 0.8;
}
.contacts-messengers a img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Адаптация до 1023 px: одна колонка */
@media (max-width: 1023px) {
  .contacts-grid {
    grid-template-columns: 1fr;
  }

	.contacts-page-header {
		padding: 0 0 20px;
	}

	.contacts-card {
		gap: 10px;
	}

	.contacts-section {
	  gap: 20px;
	  padding: 0;
	}

  .contacts-card--sales,
  .contacts-card--support,
  .contacts-card--address,
  .contacts-card--image,
  .contacts-card--map {
    grid-column: auto;
  }

  .contacts-map {
    min-height: 240px;
  }
}

/* ПРОЕКТЫ */

.track-group__cards-about {
	display: flex;
	flex-direction: column;
}

/* О КОМПАНИИ */
.сompany-values__card {
	padding: 0;
	max-width: 440px;
	justify-content: flex-start;
}
.company-values__image {
    width: 100%;
    object-fit: contain;
	padding: 20px;
}

.company-values__image img {
    border-radius: clamp(30px, 2.813vw, 54px);
}
.company-values-subheader {
	padding: 20px clamp(20px, calc(10.76923px + 2.56410vw), 60px) clamp(20px, calc(10.76923px + 2.56410vw), 60px);
}
.journey-title {
	text-align: center;
}
.journey__item {
	display: grid;
	grid-template-columns: 1fr 1fr; /* всегда поровну */
	max-width: 100%;
	gap: clamp(20px, 1.28vw + 15.4px, 40px);
}

/* ✅ “обводка” текста года */
.journey__year-text {
	font-weight: 700;
	font-size: clamp(32px, calc(2.05vw + 24.6px), 64px);
	line-height: 1.2;

	color: transparent;                 /* заливка прозрачная */
	-webkit-text-stroke: 2px #BFBFBF;  /* обводка (Chrome/Safari/Edge) */
	text-stroke: 2px #BFBFBF;
}
.journey__list {
	display: grid;
    gap: 20px;
	padding: 0 20px 20px;
}
.journey__card-text {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: clamp(18px, 1.875vw, 36px) /* 36px */;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0%;
    color: #1F1933;
}
.journey__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.journey__quote {
	padding: 20px;
	align-items: center;
	max-height: 316px;
}
.journey__quote-left {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.journey__quote-avatar img {
	max-width: 276px;
	height: 276px;
	border-radius: 54px;
	object-fit: cover;
}

.journey__quote-person {
	padding-left: clamp(10px, 1.28vw + 5.4px, 30px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.journey__quote-name, .journey__quote-title, .journey__quote-text {
	font-size: clamp(16px, 1.28vw + 11.4px, 36px);
	font-weight: 400;
	line-height: 1.2;
}

.journey__quote-role {
	color: #9D9D9D;
	font-size: clamp(16px, 0.38vw + 14.6px, 22px);
	line-height: 1.2;
}
.journey__quote-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
}

.journey__quote-title {
	font-weight: 700;
}

@media (max-width: 1023px) {
	.journey__card {
		gap: 10px;
	}
	.journey__item {
		grid-template-columns: 1fr;
	}
	.journey__list {
		padding: 0;
	}
	.journey__quote-avatar img {
		max-width: 61px;
		height: 61px;
		border-radius: 54px;
		object-fit: cover;
	}
}


/* БЛОК КЛЮЧЕВЫХ СОТРУДНИКОВ */
.employee-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 20px 20px 60px;
	max-width: 440px;
}
.employee-image img {
	border-radius: 54px;
	height: 400px;
	max-width: 400px;
	object-fit: cover;
}
.employee-subheader {
	padding: 0;
}



@media (max-width: 1023px) {
	.employee-image img {
		border-radius: 10px;
		height: 100%;
		max-width: 100%;
		aspect-ratio: 1 / 1;
	}

	.employee-card {
		gap: 20px;
		padding: 20px;
		align-items: start;
		min-width: 300px;
	}
}

/* ВАКАНСИИ */
.section--vacancies {
  --line: rgba(15, 18, 34, 0.18);
}

.vacancies {
  margin: 0 auto;

  display: grid;
  grid-template-columns: clamp(330px, 26.339vw + 60.286px, 566px) 1fr;
  align-items: stretch; /* вместо start */
}

.vacancies__title {
	margin: 0 0 60px;
	font-size: clamp(24px, 1.538vw + 18.46px, 48px);
	line-height: 1.2;
	font-weight: 700;
	}

.vacancies__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 70px 80px;
  height: 100%;
  justify-content: space-between;
}

.vacancies__aside-btn {
	width: auto;
	white-space: nowrap;
	align-self: flex-start;
}

.vacancies__bottom-btn {
  display: none;
  width: 100%;
  margin-top: 18px;
}

/* Accordion */
.vac-acc {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 20px 20px 0;
}

.vac-acc__item {
  border: 2px solid #BFBFBF;
  border-radius: 74px;
  background: #fff;
  overflow: hidden;
		transition: border .35s ease;
}

.vac-acc__summary {
  list-style: none;
  cursor: pointer;
  padding: 60px 60px 60px 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  line-height: 1.2;
  font-weight: 700;
  color: #1F1933;
}

.vac-acc__summary::-webkit-details-marker { display: none; }

.vac-acc__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--text);
  transition: color .2s ease, transform .25s ease;
}

.vac-acc__icon::before {
  content: "+";
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Открытое состояние */
.vac-acc__item[open] {
	border-color: #F42534;
	transition: border-color .35s ease;
}

/* Делаем иконку "красной" через filter (работает, если SVG однотонный/тёмный) */
.vac-acc__item[open] .seo-article__collapse-icon {
  filter: brightness(0) saturate(100%)
          invert(22%) sepia(96%) saturate(7160%)
          hue-rotate(354deg) brightness(103%) contrast(118%);
}

.vac-acc__item[open] .vac-acc__icon {
  color: var(--accent);
  transform: rotate(180deg);
}

.vac-acc__item[open] .vac-acc__icon::before {
  content: "–";
}

/* ====== ПЛАВНОЕ РАСКРЫТИЕ: через JS меняем height у .vac-acc__body ====== */
.vac-acc__body {
	height: 0;
	overflow: hidden;
	/* display:block важно, чтобы UA-правило details не мешало */
	display: block;
	transition: height .35s ease;
}

.vac-acc__body-inner {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	gap: 20px;
	padding: 0 60px 60px 60px;
}
/* ======================================================================== */

.vac-acc__h3 {
	font-size: clamp(18px, 1.154vw + 13.85px, 36px);
	line-height: 1.2;
	color: #504D5D;
	font-weight: 400;
}

.vac-acc__list {
	color: #1F1933;
	list-style: disc;
	list-style-position: inside;
}

.vac-acc__list li {
	color: #1F1933;
	line-height: 1.2;
	font-size: clamp(18px, 0.256vw + 17.08px, 22px);
}

.vac-acc__text {
  color: #1F1933;
  opacity: .92;
}

.vac-acc__btn {
	margin-top: 40px;
	align-self: flex-start;
}
/* Desktop: закрыто padding 60px; открыто padding-bottom 0 */
@media (min-width: 1024px) {
  .vac-acc__item:not([open]) > .vac-acc__summary {
    padding: 60px;
  }

  .vac-acc__item[open] > .vac-acc__summary {
    padding: 60px 60px 20px;
  }
	  /* ВАЖНО: когда закрываем — принудительно делаем "закрытый" padding, но блок ещё открыт */
  .vac-acc__item.is-closing > .vac-acc__summary {
    padding: 60px;
  }
	.vac-acc__summary {
    	transition: padding .25s ease;
  }
}

/* ФОРМА ВАКАНСИИ */

/* Lock scroll when modal open */
body.is-vac-modal-open { overflow: hidden; }

/* Modal container */
.vac-modal{
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  padding: 24px;
}

.vac-modal.is-open{ display: grid; place-items: center; }

.vac-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vac-modal__dialog{
  position: relative;
  width: min(560px, 100%);
  background: #fff;
  border-radius: 32px;
  padding: 44px 40px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  z-index: 1;
}

.vac-modal__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.06);
  cursor: pointer;
}

.vac-modal__title{
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.2;
}

.vac-modal__subtitle{
  margin: 0 0 18px;
  color: rgba(0,0,0,.55);
}

/* You will style your form fields inside template */


/* <=1023px */
@media (max-width: 1023px) {
	.vac-acc__item .seo-article__collapse-icon {
		width: 24px;
		height: 24px;
		align-self: start;
	}
	.vacancies {
	grid-template-columns: 1fr;
	}
	.vac-acc__btn { 
		width: 100%;
		margin: 0;
	}

	.vacancies__aside { 
		position: static;
		padding: 20px 0;
	}
	.vacancies__title {
		margin: 0;
	}
	.vac-acc__summary {
		padding: 20px;
	}
	.vac-acc__item {
		border-radius: 20px;
	}
	.vac-acc {
		padding: 0 0 20px;
	}
	.vac-acc__body-inner {
		padding: 0 20px 20px 20px;
	}

  .vacancies__aside-btn { display: none; }

  .vacancies__bottom-btn { display: inline-flex; }

  .vac-acc__btn { width: 100%; }
}
/* ФОРМА ВАКАНСИИ */

/* ТОЛЬКО для модалки вакансий */
#vacancyModalOverlay {
  z-index: 20000;
  background: rgba(0, 0, 0, 0.35);      /* чтобы блюр был виден */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#vacancyModal {
  z-index: 20001;
}

/* На время открытия — хедер не кликается и визуально уходит в блюр */
body.modal-open .header--desktop,
body.modal-open .header--mobile {
  filter: blur(6px);
  pointer-events: none;
}

.resume-upload__field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 72px;

  background: #fff;

  cursor: pointer;
  user-select: none;
    padding: clamp(20px, 1.563vw, 30px) /* 30px */ 2.188vw /* 42px */;
    border: clamp(1px, 0.104vw, 2px) /* 2px */ solid #BFBFBF;
    border-radius: clamp(16px, 1.042vw, 20px) /* 20px */;

    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(16px, 1.146vw, 22px) /* 22px */;
    font-weight: 400;
    color: #1f1933;
    box-sizing: border-box;
    transition: all 0.3s 
ease;
}

.resume-upload__label {
  font-size: 20px;
  line-height: 1.2;
  color: #111;
}

.resume-upload__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* красный плюс справа */
.resume-upload__plus {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.resume-upload__plus::before,
.resume-upload__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: #f42534;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.resume-upload__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* текст под полем — по центру */
.resume-upload__hint {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  color: #6b7280;
}

.vacancyModal-popup__container {
	max-width: 740px;
}
.vacancyqQuick-response__field {
	margin-bottom: 10px !important;
}
@media (max-width: 1023px) {
	.vacancyQuick-response__content p {
		font-size: 18px !important;
	}
}

/* КАТЕГОРИИ УСЛУГ */
/* Карусель услуг — отдельные классы, не конфликтуют с prices */
.services-carousel__wrapper {
  overflow: hidden; /* режем уезжающие карточки */
	padding: 0 20px 20px;
}

/* Ряд — одна строка */
.services-carousel__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px; /* если у тебя другой gap — поменяй здесь */
  will-change: transform;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* карточки не ужимаются */
.services-carousel__row .services-opportunities__card {
  flex: 0 0 auto;
	max-width: 440px;
}
.services-carousel__navigation {
	gap: 40px;
}

/* навигация */
.services-carousel__navigation--desktop { display: flex; }
.services-carousel__navigation--mobile  { display: none; }

.services-carousel__subheader {
	display: flex;
	justify-content: space-between;
}

@media (max-width: 1023px) {
  .services-carousel__navigation--desktop { display: none; }
  .services-carousel__navigation--mobile  {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }
}

.scroll__up{
  position: fixed;
  bottom: 50px;
  left: 50px;
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0,0,0,.15);
  z-index: 5;
  transition-duration: .5s;
  opacity: 0;
  visibility: hidden;
}
.scroll .scroll__up{
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1023px) {
  .b24-widget-button-position-bottom-right{
    right: 20px !important;
    bottom: 20px !important;
  }
  .scroll__up{
    left: 20px;
    bottom: 20px;
  }
}

.count_need{
  color: #f42534;
  font-weight: 700;
  font-size: 60px;
  position: absolute;
  bottom: -20px;
  right: 20px;
  opacity: .15;
}
.advantages__grid--polza .advantage-card{
  border: none;
  align-items: center;
  text-align: center;
}
.advantages__grid--polza h2{
  text-align: center;
}
.polza__img{
  border: 2px solid rgba(191, 191, 191, 1);
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.advantages__grid--polza{
  grid-template-columns: repeat(5, 1fr);
}

@media screen and (max-width: 1023px) {
  .advantages__grid--polza {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

.advantages__grid--dwh{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 1023px) {
  .advantages__grid--dwh {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/*.section--polza .advantages__grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section--polza .advantages__grid .advantage-card{
  display: grid;
  grid-template-columns: 216px auto;
  align-items: flex-start;
}
.section--polza .advantages__grid .advantage-card .advantage-card__content{
  justify-content: flex-start;
  padding-top: clamp(24px, 2.083vw, 40px);
  padding-left: clamp(16px, 1.042vw, 20px);
}
@media screen and (max-width: 1023px) {
  .section--polza .advantages__grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .section--polza .advantages__grid .advantage-card__image{
    padding: 20px;
  }
}*/

.section--imp .advantage-card__content h3 span{
  display: block;
  color: #fa0012; 
}
.section--imp .advantage-card__content .btn{
  color: #fa0012;
  padding: 0;
  background: transparent;
}

.section--test .advantages__grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section--test .advantages__grid .advantage-card{
  display: grid;
  grid-template-columns: 216px auto;
  align-items: flex-start;
}
.section--test .advantages__grid .advantage-card .advantage-card__content{
  justify-content: flex-start;
  padding-top: clamp(24px, 2.083vw, 40px);
  padding-left: clamp(16px, 1.042vw, 20px);
}
@media screen and (max-width: 1023px) {
  .section--test .advantages__grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .section--test .advantages__grid .advantage-card__image{
    padding: 20px;
  }
}

.page--projects{
  padding-bottom: clamp(16px, 1.042vw, 20px);
}

.section__projects{
  margin-left: -60px;
  margin-right: -60px
}
.section__projects .blog__grid{
  border-radius: clamp(40px, 3.854vw, 74px);
  justify-content: flex-start;
  gap: 65px !important;
  padding-left: clamp(40px, 3.125vw, 60px);
  padding-right: clamp(40px, 3.125vw, 60px);
  grid-auto-columns: calc((100% - 130px) / 3);
  margin-top: clamp(16px, 1.563vw, 30px);
}
.section__projects .blog-card{
  width: 100%;
  align-items: center;
}
.section__projects .blog-card .card__title{
  text-align: center;
  width: 100%;
}
.section__projects .blog-card .blog__card-content{
  align-items: center;
  width: 100%;
}
.section__projects .blog-card .blog-card__image-link{
  width: 100%;
}

/* Превью проектов — пропорции под фото, cover без обрезки */
.section__projects .blog__card-image {
  aspect-ratio: 3 / 2;
}
.section__projects .blog-card .blog__card-meta{
  width: auto;
}
.project__filters-wrap{
  overflow-y: auto;
  padding-right: clamp(40px, 3.125vw, 60px);
}

@media (max-width: 1023px) {
  .section__projects .blog-card{
      flex: none;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      border-radius: 24px;
      padding-left: 16px;
      padding-right: 16px;
      padding-top: 16px;
      padding-bottom: 24px;
  }
  .section__projects{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
  }
}

.project__filters{
  display: flex;
  gap: 20px;
  margin-top: clamp(30px, 3.125vw, 60px);
  overflow-y: auto;

}
.project__item{
  color: rgba(31, 25, 51, 1);
  padding: 30px 42px;
  border-radius: 20px;
  background: #fff;
  line-height: 100%;
  font-size: clamp(16px, 1.695vw, 30px);
  font-weight: 500;
  transition-duration: .25s;
  white-space: nowrap;
}
 
.project__item.active, .project__item:hover{
  background: rgba(244, 37, 52, 1);
  color: #fff;
}


.section__projects .blog-card.hide{
  display: none;
}
@media (max-width: 1023px) {
  .project__filters-wrap{
    margin-right: -20px;
    margin-left: -20px;
    padding-left: 20px;
  }
  .project__item{
    padding: 20px 16px
  }
  .project__filters{
    gap: 10px
  }
  .project__filters-wrap .blog__header-left{
    margin-bottom: 0;
  }
}

/* ========================================
   PROJECT DETAIL — PARSED SECTIONS
   Каждая <h2>-секция DETAIL_TEXT = отдельный блок с опциональным фото
   ======================================== */

.project-section {
  padding: clamp(28px, 2.5vw, 52px) 0;
  border-bottom: 1px solid #f0edf6;
}

.project-section:last-of-type {
  border-bottom: none;
}

/* Секция с картинкой — двухколоночная сетка */
.project-section--with-image {
  display: grid;
  grid-template-columns: 1fr clamp(200px, 28%, 400px);
  gap: clamp(32px, 3vw, 64px);
  align-items: start;
}

/* Чётные секции: картинка слева */
.project-section--alt.project-section--with-image {
  grid-template-columns: clamp(200px, 28%, 400px) 1fr;
}

.project-section--alt .project-section__image-wrap {
  order: -1;
}

/* Картинка */
.project-section__image-wrap {
  flex-shrink: 0;
}

.project-section__image {
  width: 100%;
  border-radius: clamp(12px, 1.25vw, 20px);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

/* Заголовок секции */
.project-section__title {
  font-family: Inter, -apple-system, sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 700;
  color: #1f1933;
  margin: 0 0 clamp(16px, 1.25vw, 28px);
  line-height: 100%;
  text-align: center;
  letter-spacing: 0;
}

/* Текстовый контент */
.project-section__text {
  font-family: Inter, -apple-system, sans-serif;
  color: #494555;
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
}

.project-section__text p {
  margin: 0 0 clamp(12px, 0.833vw, 18px);
}

.project-section__text p:last-child {
  margin-bottom: 0;
}

.project-section__text h3 {
  font-size: clamp(18px, 1.302vw, 25px);
  font-weight: 600;
  color: #1f1933;
  margin: clamp(20px, 1.563vw, 30px) 0 clamp(8px, 0.521vw, 10px);
  line-height: 120%;
}

.project-section__text ul {
  padding-left: clamp(20px, 1.25vw, 24px);
  margin: 0 0 clamp(12px, 0.833vw, 16px);
}

.project-section__text li {
  margin-bottom: clamp(6px, 0.417vw, 8px);
}

/* Вводный блок (до первого h2) — чуть меньше отступов */
.project-section--intro {
  padding-top: 0;
}

/* ---- Мобильная адаптация ---- */
@media (max-width: 900px) {
  .project-section--with-image {
    grid-template-columns: 1fr;
  }
  .project-section--alt .project-section__image-wrap {
    order: 0;
  }
  .project-section__image {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
}
/* === SEO-текст: сворачиваемый блок === */
.seo-text__body {
    max-height: 450px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
}

.seo-text__body.is-expanded {
    max-height: 10000px;
}

.seo-text__body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(236,236,236,0) 0%, #ececec 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.seo-text__body.is-expanded::after {
    opacity: 0;
}

/* Наследуем стили от section--work-process > h2/p (из-за обёртки seo-text__body перестали быть прямыми потомками) */
.seo-text__body > h2 {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(28px, 2.5vw, 48px);
    font-weight: 700;
    font-style: normal;
    line-height: 100%;
    color: #1f1933;
    text-align: start;
    margin-top: 0;
    margin-bottom: clamp(16px, 1.042vw, 20px);
    margin-left: clamp(40px, 4.167vw, 80px);
}

.seo-text__body > p {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(20px, 1.875vw, 36px);
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    color: #504d5d;
    margin-bottom: clamp(40px, 3.125vw, 60px);
    margin-left: clamp(40px, 4.167vw, 80px);
}

.seo-text__body > ul {
    margin-left: clamp(40px, 4.167vw, 80px);
}

.seo-text__more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-bottom: 32px;
}

.seo-text__more.is-hidden {
    display: none;
}
/* === /SEO-текст === */

/* ======= Блок "Другие услуги" ======= */
.section--other-services {
    position: relative;
    overflow: hidden;
    min-height: clamp(380px, 30vw, 580px);
    padding: 0;
    background: #1a1a2e;
    display: flex;
    align-items: stretch;
}

.other-services__image {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    display: block;
}

.other-services__card {
    position: relative;
    z-index: 1;
    background: #E5E5E5;
    border-radius: clamp(50px, 4.896vw, 94px);
    padding: clamp(30px, 3.125vw, 60px);
    width: 63%;
    margin: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start;
    box-sizing: border-box;
}

.other-services__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0%;
    color: #1f1933;
    margin: 0;
}

.other-services__desc {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    color: #494555;
    margin: 0;
}

.other-services__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.other-services__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 42px;
    background: #fff;
    border: none;
    border-radius: 20px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #1F1933;
    text-decoration: none;
    line-height: 100%;
    letter-spacing: 0%;
    transition: background 0.25s ease, color 0.25s ease;
}

.other-services__tag:hover {
    background: #1f1933;
    color: #fff;
}
/* ======= /Другие услуги ======= */

/* ======= Страница "Спасибо" ======= */
.section--thank-you {
    min-height: clamp(500px, 40vw, 700px);
}
.section--thank-you .other-services__card {
    background: #fff;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 0;
}
.section--thank-you .other-services__title {
    font-size: clamp(35px, 3.281vw, 63px);
    font-weight: 700;
    line-height: 120%;
    color: #1f1933;
}
.thank-you__text-wrap {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thank-you__text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #494555;
    margin: 0;
}
.thank-you__text a {
    color: #F42534;
    text-decoration: underline;
    transition: color 0.25s ease;
}
.thank-you__text a:hover {
    color: #c0392b;
}
.thank-you__btn {
    margin-top: 0;
    padding: 30px 42px;
    border-radius: 20px;
    background: #F42534;
    color: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 100%;
    text-decoration: none;
    display: inline-block;
    transition: background 0.25s ease;
}
.thank-you__btn:hover {
    background: #d91e2c;
    color: #fff;
}
/* ======= /Спасибо ======= */

@media (max-width: 1023px) {
    .section--other-services {
        min-height: clamp(300px, 70vw, 500px);
        align-items: flex-end;
    }
    .other-services__image {
        width: 100%;
        height: auto;
        top: auto;
        bottom: 0;
    }
    .other-services__card {
        width: auto;
        margin: 12px;
        border-radius: 20px;
        padding: 24px;
        gap: 16px;
    }
    .other-services__title {
        font-size: clamp(22px, 5.5vw, 32px);
    }
    .other-services__tag {
        font-size: 14px;
        padding: 10px 18px;
        white-space: normal;
    }
    .section--thank-you {
        min-height: auto;
    }
    .thank-you__text {
        font-size: 16px;
    }
}

/* End */


/* Start:/local/templates/main/styles.css?1774539640471*/
/* 
 * Основные стили шаблона IntezGroup
 * Этот файл автоматически подключается Bitrix
 * Основные стили находятся в template_styles.css
 */

/* Базовая нормализация для совместимости с Bitrix */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Обёртка для контента Bitrix */
#workarea {
  width: 100%;
  min-height: 400px;
}

/* End */
/* /local/templates/main/css/template_styles.css?1778758331245274 */
/* /local/templates/main/styles.css?1774539640471 */