/* ================== БАЗА ================== */
* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ffffff;
  color: #111;
  font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ================== ПЕРЕМЕННЫЕ ================== */
:root{
  color-scheme: light;
  --header-h: 84px;
  --header-w: min(80.3125vw, 1542px);         /* 1542px при фрейме 1920 */
  --header-radius: clamp(16px, 1.72vw, 33px);
  --block-radius: 33px;  /* нижние скругления */
  --header-xpad: 40px;   /* внутренние отступы слева/справа */

  --gray-40: rgba(103, 103, 103, 1);
}

/* утилита: SF Pro Display */
.ff-sf {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
}

/* ================== ШАПКА ================== */
/* внешний контейнер всегда на всю ширину */
.site-header{
  margin-top: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* внутренняя "таблетка" с тенью и скруглением */
.site-header__inner{
  height: var(--header-h);
  width: var(--header-w);
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 0 0 var(--header-radius) var(--header-radius);
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0 var(--header-xpad);
  overflow: visible;
  white-space: nowrap;          /* единый ряд на десктопе */
}

/* ================== БРЕНД ================== */
.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  min-width: 0;
}
.brand__logo{
  width: 38px;
  height: 38px;
  display: block;
}
.brand__text{
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  line-height: 1;
}
.brand__title{
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  transform: translateY(5px);
}
.brand__subtitle{
  color: var(--gray-40);
  font-family: Lato, Inter, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  letter-spacing: 0;
  text-align: left;
}

section {
  scroll-margin-top: 40px; /* подставь высоту твоей шапки, если будешь менять */
}

/* ================== МЕНЮ ================== */
.main-nav{
  display: flex;
  align-items: center;
  flex: 1 1 auto;                 /* центр адаптивный */
  min-width: 0;
  flex-wrap: nowrap;              /* не переносить ряд */
  margin-left: clamp(24px, 4.2vw, 80px);      /* симметрия к логотипу */
  margin-right: clamp(24px, 4.2vw, 80px);     /* симметрия к телефону */
  gap: clamp(35px, 4.8vw, 93px);   
  justify-content: center;        /* базовый промежуток */
}
.main-nav__link{
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0;
  text-decoration: none;
  transition: opacity .2s ease;
  white-space: nowrap;            /* все пункты — в одну строку */
}
.main-nav__link:hover{ opacity:.7; }

/* длинный пункт: разрешаем перенос ТОЛЬКО ему */
.main-nav__link--long{
  white-space: normal;           /* можно переносить на 2 строки */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: clamp(180px, 20vw, 260px); /* контролируем место для переноса */
  line-height: 32px;
}

/* ================== ТЕЛЕФОН ================== */
.phone-block{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  margin-right: clamp(16px, 2vw, 32px);
  font-family: Lato, Inter, Roboto, Arial, sans-serif;
}
.phone-block__number{
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}
.phone-block__time{
  color: var(--gray-40);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  white-space: normal; /* разрешаем перенос, чтобы не пропадал текст */
}

/* ================== ГОРОД ================== */
.city-select{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  text-align: right;
  flex: 0 0 auto;
  min-width: 0;
}
.city-select__icon{
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: block;
}
.city-select__name{
  color: #000;
  font-weight: 500;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0;
  white-space: nowrap;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

/* ================== БУРГЕР ================== */
.burger-btn{
  display: none;                  /* по умолчанию скрыт */
  margin-left: 16px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  flex-shrink: 0;                 /* не даём бургеру сжиматься */
}
.burger-btn img{
  display:block;
  width:26px;
  height:26px;
}

/* ================== АДАПТИВ — ПОШАГОВО ================== */
/* 1) до 1600 — начнём сжимать интервалы между разделами */
@media (max-width: 1600px){
  .main-nav{ gap: 80px; }
}

/* 2) до 1480 — ещё поджимаем меню и боковые поля */
@media (max-width: 1480px){
  .main-nav{
    gap: 68px;
    margin-left: 64px;
    margin-right: 64px;
  }
}

/* 3) до 1360 — готовим перенос длинного пункта на 2 строки */
@media (max-width: 1360px){
  .main-nav{ gap: 56px; }
  /* длинный пункт уже умеет переноситься за счёт white-space: normal; */
}

/* 4) до 1260 — ещё компактнее, телефон ближе к меню */
@media (max-width: 1260px){
  .main-nav{
    gap: 44px;
    margin-left: 48px;
    margin-right: 48px;
  }
  .phone-block{
    margin-right: 24px;
  }
}

/* 5) до 1120 — скрываем НАЗВАНИЕ города, оставляем только иконку */
@media (max-width: 1120px){
  .city-select__name{ display: none; }
}

/* 6) до 1024 — мобильная шапка: сжимаем элементы, меню прячем, бургер показываем */
@media (max-width: 1024px){
  .site-header__inner{
    height: auto;
    width: 100%;
    max-width: 100%;
    padding: 8px 16px;
    border-radius: 0 0 16px 16px;
    justify-content: space-between;
    white-space: normal; /* даём контенту право переноситься */
    gap: 12px;
  }

  .brand__logo{
    width: 32px;
    height: 32px;
  }

  .brand__title{
    font-size: 16px;
    line-height: 24px;
    transform: translateY(2px);
  }

  .main-nav{ 
    display: none;        /* прячем десктопное меню */
  }

  .burger-btn{ 
    display: inline-flex; /* показываем бургер */
  }

  .phone-block{
    margin-right: 8px;
    flex: 0 1 auto;       /* даём телефону немного сжиматься по ширине */
  }

  .phone-block__number{
    font-size: 16px;
  }
  .phone-block__time{
    font-size: 13px;
  }
}

/* 7) до 768 — ещё компактнее: текст поменьше, ГОРОД ОСТАЁТСЯ (иконка) */
@media (max-width: 768px){
  .site-header__inner{
    padding: 8px 12px;
  }

  .brand__title{
    font-size: 15px;
    line-height: 22px;
    transform: translateY(1px);
  }

  .phone-block__number{
    font-size: 15px;
  }
  .phone-block__time{
    font-size: 12px;
  }

  .city-select__icon{
    width: 22px;
    height: 22px;
  }
}

/* 8) подстраховка на очень узких — ещё чуть сжать элементы */
@media (max-width: 480px){
  .brand__logo{
    width: 30px;
    height: 30px;
  }

  .brand__title{
    font-size: 14px;
    line-height: 20px;
    transform: translateY(0);
  }

  .phone-block__number{
    font-size: 14px;
  }
  .phone-block__time{
    font-size: 11px;
  }

  .city-select__icon{
    width: 20px;
    height: 20px;
  }
}







/* ================== ИСПРАВЛЕНИЯ (ВСТАВИТЬ В КОНЕЦ ФАЙЛА) ================== */

@media (max-width: 1024px) {
  /* 1. Группируем правую часть */
  /* Убираем равномерное распределение */
  .site-header__inner {
    justify-content: flex-start; 
  }

  /* "Магнит": этот отступ автоматически займет всё свободное место 
     между Логотипом и Телефоном, прижав Телефон, Город и Бургер вправо */
  .phone-block {
    margin-left: auto; 
    margin-right: 12px; /* Расстояние между телефоном и иконкой глобуса */
    align-items: flex-end; /* Выравниваем текст телефона по правому краю (опционально) */
    text-align: right;
  }

  /* 2. Синхронизируем размер иконок (Бургер и Глобус) */
  /* Делаем их одинаковыми (например, 24px для планшетов/мобилок) */
  .city-select__icon,
  .burger-btn,
  .burger-btn img {
    width: 24px;
    height: 24px;
    flex: 0 0 24px; /* Запрещаем сжиматься */
  }

  /* 3. Уменьшаем отступ между Глобусом и Бургером */
  .burger-btn {
    margin-left: 8px; /* Было 16px, делаем плотнее */
    padding: 0;       /* Убираем возможные внутренние отступы кнопки */
  }
}

/* Дополнительная коррекция для очень узких экранов (как на скриншоте 480px) */
@media (max-width: 480px) {
  /* Чуть уменьшаем иконки, если нужно, но синхронно */
  .city-select__icon,
  .burger-btn,
  .burger-btn img {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  
  /* Еще плотнее прижимаем телефон к иконкам */
  .phone-block {
    margin-right: 8px; 
  }
  
  /* Минимальный отступ между иконками */
  .burger-btn {
    margin-left: 6px; 
  }
}


/* ============= МОБИЛЬНОЕ МЕНЮ — ПАНЕЛЬ ПОД ШАПКОЙ ============= */

/* Меню по умолчанию скрыто */
.mobile-menu{
  position: fixed;
  top: var(--header-h);   /* начинаем СРАЗУ под шапкой */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;           /* выше контента, шапка отдельно, её не трогаем */
  display: none;
  top: calc(var(--header-h) - 35px);
}

.mobile-menu--open{
  display: block;
}

/* фон под меню: размываем контент, но не шапку (она выше, и меню начинается ниже) */
.mobile-menu__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(3px);
}

/* белый блок меню справа, сразу под шапкой */
.mobile-menu__panel{
  position: absolute;
  top: 0;                 /* верх панели совпадает с top mobile-menu (под шапкой) */
  right: 0;
  width: 190px;           /* аккуратная узкая панель */
  background: #ffffff;
  border-radius: 0 0 0 16px;
  box-shadow: -10px 10px 25px rgba(0,0,0,0.14);
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  transform: translateX(100%);
  transition: transform .35s ease;
}

/* выезд панели */
.mobile-menu--open .mobile-menu__panel{
  transform: translateX(0);
}

.mobile-menu__link{
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  padding: 10px 0;
  text-decoration: none;
  color: #111;
}

.mobile-menu__link:hover{
  opacity: .65;
}

/* меню только на мобиле */
@media (min-width: 1025px){
  .mobile-menu{
    display: none !important;
  }
}





.toast{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}
.toast.show{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1.02);
  animation: toast-fade 1.5s ease forwards;
}
@keyframes toast-fade{
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Основная трёхблочная сетка под шапкой ===== */
.main-layout {
  margin-top: 44px;             /* отступ от шапки на десктопе */
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.layout-container {
  display: flex;
  width: var(--header-w);       /* как у шапки */
  gap: 44px;                    /* расстояние между левой и правой колонками */
}

/* Левая колонка — высокий блок (десктоп) */
.block--left {
  flex: 0 1 52%;                /* ширина относительно правой колонки */
  background: #ffffff;
  border-radius: var(--block-radius);
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);

  /* ГЛАВНОЕ: больше НЕ завязываемся на высоту экрана */
  min-height: auto;

  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  /* «подпорка» под картинку снизу — просто добавляем высоту, а не 100vh */
  padding-bottom: 280px;
  overflow: hidden;
}

/* Правая колонка с двумя блоками (десктоп) */
.right-column {
  flex: 0 1 48%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Правые блоки (верхний и нижний)
   — высота строго по содержимому, не тянем их */
.block--top,
.block--bottom {
  background: #ffffff;
  border-radius: var(--block-radius);
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);

  flex: 0 0 auto;   /* <— ключевая правка */
}

/* ===== Контент внутри левого блока ===== */
.left-content {
  padding: 40px 40px 0 40px;
}

/* Заголовок */
.left-title {
  margin: 0;
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 50px;
  text-align: left;
}

/* Подзаголовок */
.left-subtitle {
  margin-top: 1px;
  margin-bottom: 20px;
  color: #5994FB;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 60px;
  text-align: left;
}

/* Группа мини-блоков */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Мини-блоки */
.feature {
  background-color: #5994FB;
  color: #ffffff;
  border-radius: 1000px;
  padding: 13px 26px;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 38px;
  text-align: left;
  white-space: nowrap;
}

/* Картинка снизу слева (десктоп) */
.image-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  overflow: hidden;
  border-radius: var(--header-radius);
  transform: translateY(40px);
}

.image-mask img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===== Правый верхний блок: тексты и форма ===== */
.rt-top { padding: 40px; }

.rt-title {
  margin: 0;
  font-size: 35px;
  font-weight: 500;
  line-height: 42px;
  color: #000;
  text-align: center;
}
.rt-accent { color: #5994FB;}

.rt-subtitle {
  margin: 4px 0 12px;
  color: #777;
  font-size: 24px;
  font-weight: 500;
  line-height: 38px;
  text-align: center;
}

.rt-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* поле ввода */
.rt-input {
  display: block;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
  border-radius: 50px;
  background: #fff;
  overflow: hidden;
}

.rt-input input {
  display: block;
  width: 100%;
  padding: 14px 22px;
  border: none;
  outline: none;
  background: transparent;

  color: #000;
  font-size: 27px;
  font-weight: 400;
  line-height: 38px;
}

.rt-input input::placeholder {
  color: #c4c4c4;
}

/* кнопка */
.rt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50px;
  background: #5994FB;

  color: #fff;
  font-size: 31px;
  font-weight: 500;
  line-height: 38px;

  padding: 14px 28px;
  cursor: pointer;
  transition: opacity .2s ease, transform .05s ease;
}
.rt-button:hover { opacity: .9; }
.rt-button:active { transform: translateY(1px); }

/* ===== Правый нижний блок ===== */
.rb-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  text-align: left;
}

.rb-title {
  margin: 0;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  color: #000;
}
.rb-accent { color: #5994FB; }

.rb-subtitle {
  margin: 12px 0 12px;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  color: #000;
}

.rb-list {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}

.rb-list li {
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 8px;
}
.rb-list li:last-child { margin-bottom: 0; }

/* ===== Крупный адаптив для планшета (чуть уменьшаем шрифты) ===== */
@media (max-width: 1200px){
  .rt-title { font-size: 36px; line-height: 38px; }
  .rt-subtitle { font-size: 22px; line-height: 32px; }
  .rt-input input { font-size: 24px; line-height: 34px; }
  .rt-button { font-size: 28px; line-height: 34px; }

  .rb-title,
  .rb-subtitle { font-size: 28px; line-height: 34px; }
  .rb-list li { font-size: 22px; line-height: 30px; }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ: БЛОКИ СТОПКОЙ ===== */
@media (max-width: 1024px){
  .main-layout{
    margin-top: 24px;
    padding: 0 16px 24px;
  }

  .layout-container{
    width: 100%;
    max-width: 600px;         /* приятная ширина на мобилке */
    flex-direction: column;   /* вместо двух колонок — одна */
    gap: 24px;
  }

  /* каждый блок сам по себе, без min-height */
  .block--left,
  .block--top,
  .block--bottom{
    flex: none;
    min-height: auto;
  }

  .right-column{
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .block--left{
    padding-bottom: 0;
  }

  .left-content{
    padding: 24px 20px 0 20px;
  }

  .left-title{
    font-size: 32px;
    line-height: 36px;
  }

  .left-subtitle{
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 16px;
  }

  .features{
    gap: 12px;
  }

  .feature{
    font-size: 15px;
    line-height: 22px;
    padding: 8px 15px;
    white-space: normal;
  }

  .image-mask{
    position: relative;
    transform: none;
    border-radius: 0 0 var(--block-radius) var(--block-radius);
    margin-top: 20px;
  }

  .rt-top{
    padding: 24px 20px 20px;
  }
  .rt-title{
    font-size: 26px;
    line-height: 30px;
  }
  .rt-subtitle{
    font-size: 16px;
    line-height: 22px;
    margin: 8px 0 16px;
  }
  .rt-input input{
    font-size: 18px;
    line-height: 24px;
    padding: 12px 18px;
  }
  .rt-button{
    font-size: 18px;
    line-height: 24px;
    padding: 12px 18px;
  }

  .rb-bottom{
    padding: 20px;
  }
  .rb-title,
  .rb-subtitle{
    font-size: 22px;
    line-height: 26px;
  }
  .rb-list li{
    font-size: 16px;
    line-height: 22px;
  }
}

/* ещё чуть компактнее для очень узких экранов */
@media (max-width: 600px){
  .main-layout{
    padding: 0 12px 20px;
  }

  .left-content{
    padding: 20px 16px 0 16px;
  }

  .left-title{
    font-size: 28px;
    line-height: 32px;
  }
  .left-subtitle{
    font-size: 26px;
    line-height: 30px;
  }

  .rt-top,
  .rb-bottom{
    padding: 20px 23px 18px;
  }

  .rt-title{
    font-size: 26px;
  }

  .rt-accent{
    font-size: 26px;
    white-space: nowrap;
  }

  .rt-input input,
  .rt-button{
    font-size: 16px;
  }
}



/* ===== Модал выбора города ===== */
/* ===== Модал выбора города ===== */
.city-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;               /* .is-open -> display:flex */
  align-items: center;
  justify-content: center;
}

.city-modal.is-open {
  display: flex;
}

/* затемнение + размытие задника */
.city-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

/* карточка модала — белый, радиус, тень */
.city-modal__dialog {
  position: relative;
  width: min(92vw, 720px);
  background: #fff;
  border-radius: var(--header-radius);
  box-shadow:
    376px 518px 179px rgba(0,0,0,0),
    240px 332px 164px rgba(0,0,0,0.01),
    135px 187px 138px rgba(0,0,0,0.05),
    60px 83px 102px rgba(0,0,0,0.09),
    15px 21px 56px rgba(0,0,0,0.1);
  padding: 28px 36px 24px 36px;
}

/* крестик */
.city-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.city-modal__close img {
  width: 30px;
  height: 30px;
}

/* заголовок */
.city-modal__title {
  margin: 0 40px 18px 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
}

/* список городов */
.city-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

/* пункт города */
.city-option {
  display: flex;
  flex-wrap: wrap;            /* даём элементам право переноситься */
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  cursor: pointer;

  color: #000;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;

  transition: transform 0.15s ease, opacity 0.15s ease;
}

.city-option:hover {
  opacity: 0.9;
  transform: translateX(2px);
}

.city-option__flag {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  visibility: hidden;
  margin-top: 2px;
}

/* флаг и выделение выбранного города */
.city-option.is-selected .city-option__flag {
  visibility: visible;
  transform: scale(1.05);
}

.city-option.is-primary {
  color: #000;
}

/* подпись «Выезжаем и…» — ВСЕГДА с новой строки */
.city-note {
  flex-basis: 100%;          /* переносим на новую строку */
  margin-left: 32px;         /* выравниваем по тексту города, а не по флажку */
  color: rgba(103,103,103,1);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

/* когда модал открыт — блокируем скролл страницы */
body.modal-open {
  overflow: hidden;
}

/* ===== Адаптив модалки ===== */

/* планшет и узкий десктоп */
@media (max-width: 1024px) {
  .city-modal__dialog {
    width: min(94vw, 540px);
    padding: 24px 24px 20px 24px;
  }

  .city-modal__title {
    font-size: 26px;
    margin-right: 32px;
    margin-bottom: 14px;
  }

  .city-option {
    font-size: 20px;
  }

  .city-note {
    font-size: 16px;
    margin-left: 30px;
  }

  .city-modal__close img {
    width: 28px;
    height: 28px;
  }
}

/* мобильные телефоны */
@media (max-width: 600px) {
  .city-modal__dialog {
    width: 94vw;
    padding: 20px 18px 18px 18px;
    border-radius: 24px;
  }

  .city-modal__title {
    font-size: 22px;
    margin-right: 28px;
    margin-bottom: 12px;
  }

  .city-option {
    font-size: 18px;
    padding: 6px 0;
    gap: 6px;
  }

  .city-option__flag {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .city-note {
    font-size: 14px;
    margin-left: 28px;
  }

  .city-modal__close {
    top: 10px;
    right: 10px;
  }

  .city-modal__close img {
    width: 24px;
    height: 24px;
  }
}


/* ===== Этапы работы ===== */ 

.steps-wrapper {
  margin-top: 44px;                  /* расстояние от верхних блоков */
  display: flex;
  justify-content: center;
}

.steps-card {
  position: relative;
  width: var(--header-w);
  background: #5994fb;
  border-radius: var(--block-radius);
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;                  /* обрезаем выступающие части иконок */
  color: #ffffff;
  z-index: 4;
}

.steps-inner {
  position: relative;
  z-index: 1;
  padding: 40px 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 32px;
}

.steps-column {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.step-pill {
  display: inline-block;
  padding: 10px 18px;
  margin-bottom: 12px;

  background: #5994fb;
  color: #ffffff;

  border-radius: 999px;      /* форма таблетки */
  font-size: 15px;
  font-weight: 500;
  line-height: 1;

  letter-spacing: 0.02em;
  white-space: nowrap;


  margin: 0;
  color: #ffffff;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0;
  text-align: left;
}

.price-item__text p {
  margin-bottom: 8px;
  margin-top: 8px;
}

.price-item__text ul {
  margin-top: 0;
}

.price-item__text ul li::marker {
  color: #5994fb;
}

/* левую колонку чуть правее */
.steps-column:first-child {
  margin-left: 40px;
}

/* правую колонку чуть левее */
.steps-column:last-child {
  margin-right: 40px;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.step__icon img {
  display: block;
  width: 133px;
  height: auto;
  margin-top: -34px;   /* поднимаем svg вверх */
}

.step__title {
  margin: 0 0 4px 0;
  color: #ffffff;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 43px;
  text-align: left;
}

.step__text {
  margin: 0;
  color: #ffffff;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 22px;
  text-align: left;
}

/* Декоративные иконки по краям блока (десктоп) */
.steps-decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.steps-decor--left {
  top: 50px;
  left: 0;
  transform: translateX(-5%);
  width: 190px;
}

.steps-decor--right {
  right: 0;
  bottom: 0;
  transform: translateX(5%);
  width: 200px;
}

/* мобильная декоративная иконка с трубой (будет только на мобиле) */
.steps-decor--mobile {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 160px;
  pointer-events: none;
  z-index: 0;
}

/* ===== Адаптив блока Этапы ===== */

@media (max-width: 1607px) {
  .steps-decor--right {
    right: 0;
    bottom: 0;
    transform: translateX(5%);
    width: 140px;
}
.steps-decor--left {
    top: 50px;
    left: 0;
    transform: translateX(-5%);
    width: 130px;
}

.steps-inner {
    position: relative;
    z-index: 1;
    padding: 40px 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0px;
    row-gap: 32px;
}

.step {
    gap: 7px;
}
.steps-column:first-child {
    margin-left: 7px;
}

}


@media (max-width: 1383px) {
  .steps-decor--right {
    right: 0;
    bottom: 0;
    transform: translateX(5%);
    width: 110px;
}
.steps-decor--left {
    top: 50px;
    left: 0;
    transform: translateX(-5%);
    width: 106px;
}

.step__icon img {
    width: 105px;
    margin-top: -40px;
}

.step__title {
    font-size: 27px;
}

.step__text {
    font-size: 17px;
}

}


@media (max-width: 1137px) {
 .step__icon img {
    width: 105px;
    margin-top: -27px;
}

}


/* планшеты и мобилки: делаем один столбец */
@media (max-width: 1024px) {
  .steps-wrapper {
    margin-top: 4px;
    padding: 0 16px;
  }

  .steps-card {
    width: 100%;
    border-radius: 28px;
  }

  .steps-inner {
    padding: 24px 20px 80px;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 20px;
  }

  .steps-column,
  .steps-column:first-child,
  .steps-column:last-child {
    margin: 0px 0px 13px 0px;
  }

  .step {
    gap: 25px;
  }

  .step__icon img {
    width: 80px;
    margin-top: 0;
  }

  .step__title {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 4px;
  }

  .step__text {
    font-size: 16px;
    line-height: 20px;
  }

  /* боковые большие картинки нам на мобиле не нужны */
  .steps-decor--left,
  .steps-decor--right {
    display: none;
  }

  /* показываем мобильную иконку с трубой по центру снизу */
  .steps-decor--mobile {
    display: block;
  }
}

/* очень узкие экраны */
@media (max-width: 480px) {
  .steps-wrapper {
    padding: 0 12px;
  }

  .steps-inner {
    padding: 20px 16px 72px;
  }

  .step__icon img {
    width: 68px;
  }

  .step__title {
    font-size: 24px;
    line-height: 28px;
  }

  .step__text {
    font-size: 15px;
    line-height: 20px;
  }

  .steps-decor--mobile {
    width: 120px;
  }
}





/* ===== Тонкая доработка блока Этапов ===== */

/* Увеличиваем расстояние между картинкой и текстом */
.step {
  gap: 28px;           /* было 20px → стало 28px */
}

/* Увеличиваем сами иконки (цифры) на десктопе 
.step__icon img {
  width: 150px;        /* было 133px → стало 150px 
  margin-top: -40px;   /* чуть поднимаем, чтобы выровнять 
}*/

/* Адаптив: мобильная иконка тоже немного больше */
@media (max-width: 1024px) {
  .step {
    gap: 22px;         /* было 16px → стало 22px */
  }

  .step__icon img {
    width: 90px;       /* было 80px → стало 90px */
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .step {
    gap: 20px;
  }

  .step__icon img {
    width: 78px;       /* было 68px → стало 78px */
  }
}




/* ===== Стоимость монтажа ===== */
/* ===== Стоимость монтажа ===== */

.price-section {
  margin-top: 100px;
  display: block;
}

.price-section__inner {
  position: relative;
  width: var(--header-w);
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Плашка с заголовком: ширина = ширина текста + паддинги */
.price-title-pill {
  position: relative;
  display: inline-block;   /* обжимается по содержимому */
  background: #ffffff;
  border-radius: 36px;
  padding: 18px 40px;      /* одинаковый горизонтальный паддинг на всех ширинах */
  z-index: 5;
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
}

/* нижней «юбки» нет */
.price-title-pill::after {
  content: none;
}

.price-title {
  margin: 0;
  display: block;
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

/* Список карточек */
.price-items {
  margin-top: 54px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Карточка */
.price-item {
  position: relative;
  background: #ffffff;
  border-radius: var(--block-radius);
  padding: 32px 32px 20px;
  z-index: 6;
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
  cursor: default;  /* на десктопе по умолчанию не кликабельна */
}

.price-itemm {
  position: relative;
  background: #ffffff;
  border-radius: var(--block-radius);
  padding: 32px 32px 20px;
  z-index: 6;
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
  cursor: default;  /* на десктопе по умолчанию не кликабельна */
  border: 4px solid #5994fb;
}

/* большой круг слева (десктоп) */
.price-item::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #5994fb;
  left: calc(-65px - 23px); /* 23 = 46 / 2 */
}

/* Область текста — на десктопе без ограничений */
.price-item__body {
  position: relative;
  max-height: none;
  overflow: visible;
  transition: max-height .25s ease;
}

.price-itemm__body {
  position: relative;
  max-height: none;
  overflow: visible;
  transition: max-height .25s ease;
}

/* градиент по умолчанию отключён */
.price-item__body::after {
  content: none;
}

/* градиент по умолчанию отключён */
.price-itemm__body::after {
  content: none;
}

/* класс expanded остаётся для мобилки */
.price-item--expanded .price-item__body {
  max-height: 2000px;
}
.price-item--expanded .price-item__body::after {
  opacity: 0;
}

/* Сам текст */
.price-item__text {
  margin: 0;
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0;
  text-align: left;
}

/* класс expanded остаётся для мобилки */
.price-itemm--expanded .price-itemm__body {
  max-height: 2000px;
}
.price-itemm--expanded .price-itemm__body::after {
  opacity: 0;
}

/* Сам текст */
.price-itemm__text {
  margin: 0;
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0;
  text-align: left;
}

/* Стрелка — на десктопе скрыта */
.price-item__toggle-icon {
  display: none;
}

/* ===== Декоративные точки слева (десктоп) ===== */

.price-dots-extra {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.price-dot {
  position: absolute;
  border-radius: 50%;
  background: #5994fb;
  transform: translateY(-50%);
}

/* маленькая 22px — выше */
.price-dot--small {
  width: 22px;
  height: 22px;
  left: calc(-65px - 11px);
  top: 25%;
}

/* средняя 31px — ниже */
.price-dot--middle {
  width: 31px;
  height: 31px;
  left: calc(-65px - 15.5px);
  top: 75%;
}

/* ===== Адаптив блока стоимости ===== */

/* планшет / узкий десктоп */
@media (max-width: 1200px) {
  .price-title {
    font-size: 38px;
  }

  .price-item__text {
    font-size: 26px;
    line-height: 34px;
  }

  .price-itemm__text {
    font-size: 26px;
    line-height: 34px;
  }
}

/* мобилка (<= 768px) — включаем аккордеон и убираем декор слева */
@media (max-width: 768px) {
  .price-section {
    margin-top: 60px;
  }

  .price-section__inner {
    width: 100%;
    padding: 0 16px 24px;
    box-sizing: border-box;
  }

  .price-title-pill {
    padding: 10px 40px;   /* тот же горизонтальный отступ */
    border-radius: 999px; /* больше скругление на маленьких ширинах */
  }

  .price-title {
    font-size: 26px;
    line-height: 30px;
  }

  .price-items {
    margin-top: 36px;
    gap: 24px;
  }

  .price-item {
    padding: 22px 18px 34px;
    border-radius: 24px;
    cursor: pointer; /* на мобилке карточка кликабельна */
  }

  .price-itemm {
    padding: 22px 18px 34px;
    border-radius: 24px;
    cursor: pointer; /* на мобилке карточка кликабельна */
  }

  .price-item__text {
    font-size: 18px;
    line-height: 22px;
  }

  .price-itemm__text {
    font-size: 18px;
    line-height: 22px;
  }

  /* сворачиваем текст */
  .price-item__body {
    max-height: 140px;
    overflow: hidden;
  }

  /* включаем градиент-затухание */
  .price-item__body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 80%
    );
    pointer-events: none;
    transition: opacity .2s ease;
  }

  /* сворачиваем текст */
  .price-itemm__body {
    max-height: 140px;
    overflow: hidden;
  }

  /* включаем градиент-затухание */
  .price-itemm__body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 80%
    );
    pointer-events: none;
    transition: opacity .2s ease;
  }

  /* стрелка — показываем на мобилке */
  .price-item__toggle-icon {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: block;
    width: 16px;
    height: 9px;
    transition: transform .25s ease;
    pointer-events: none;
  }

  .price-item--expanded .price-item__toggle-icon {
    transform: translateX(-50%) rotate(180deg);
  }

  /* на мобилке убираем круг и точки слева */
  .price-item::before,
  .price-dots-extra {
    display: none;
  }

  .step-pill {
    font-size: 15px;
    line-height: 21px;
  }
}

/* очень узкие */
@media (max-width: 480px) {
  .price-section__inner {
    padding: 0 12px 20px;
  }

  .price-title-pill {
    padding: 8px 40px;   /* тот же горизонт по бокам */
  }

  .price-title {
    font-size: 22px;
    line-height: 26px;
  }

  .price-item {
    padding: 20px 14px 32px;
  }

  .price-item__text {
    font-size: 15px;
    line-height: 21px;
  }

  

  .price-item__body {
    max-height: 130px;
  }
}






/* ===== Газификация по назначению ===== */
/* ===== Газификация по назначению ===== */
.purpose-section {
  margin-top: 100px;
}

/* 1) Верх */
.purpose-top {
  width: var(--header-w, 100%);
  max-width: 100%;
  margin: 0 auto 20px;
}

.price-title-pill_2 {
  display: inline-block;
  background: #ffffff;
  border-radius: 999px;
  padding: 18px 40px;
  position: relative;
  z-index: 7;
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
}

/* Остальные плашки (для других блоков, не трогаем) */
.price-title-pill_3,
.price-title-pill_4,
.price-title-pill_5,
.price-title-pill_6,
.price-title-pill_7 {
  display: inline-block;
  background: #ffffff;
  border-radius: 999px;
  padding: 18px 40px;
  position: relative;
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
}

.price-title-pill_4 { z-index: 9; }
.price-title-pill_6 { z-index: 13; }
.price-title-pill_7 { z-index: 17; }

/* 2) Кнопки справа */
.purpose-controls {
  max-width: 100%;
  margin: 0 auto 24px;
  display: flex;
  justify-content: flex-end;
}

.purpose-nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.purpose-nav__btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(88, 144, 244, 1);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.3s, background-color 0.3s;
}

.purpose-nav__btn img {
  width: 18px;
  height: 18px;
  display: block;
}

.purpose-nav__btn.is-disabled,
.purpose-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: #ccc;
}

/* 3) Слайдер — на всю ширину контейнера (.price-section__inner) */
.purpose-slider {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  border-radius: var(--block-radius, 24px);
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
  background: linear-gradient(
    180deg,
    rgba(248, 248, 248, 1),
    rgba(202, 202, 202, 1) 100%
  );
}

.purpose-track {
  display: flex;
  gap: 44px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Карточка */
.purpose-card {
  position: relative;
  z-index: 8;
  background: #ffffff;
  border-radius: var(--block-radius, 24px);
  padding: 40px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden; /* оставляем! */
  box-sizing: border-box;

  flex: 0 0 calc((100% - 88px) / 3);

  /* ✅ FIX: изоляция слоёв (filter у img создаёт новый контекст, это спасает) */
  isolation: isolate;
}

.purpose-card__title {
  margin: 0;
  color: #000;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  min-height: 2.2em;
}

/* картинка-блок */
.purpose-card__image {
  margin-top: auto;
  margin-left: -40px;
  margin-right: -40px;
  margin-bottom: -40px;
  position: relative;
  line-height: 0;

  /* ✅ FIX: даём базовый слой */
  z-index: 1;
}

.purpose-card__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: top;
  margin-top: 35px;

  transition: filter .25s ease, transform .25s ease;
  filter: blur(0);
  -webkit-filter: blur(0);

  /* ✅ FIX: картинка ниже цены */
  position: relative;
  z-index: 1;
}

/* цена */
.purpose-card__price {
  position: absolute;
  left: 50%;
  bottom: 70px;

  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;

  background: #5994fb;
  border-radius: 999px;
  padding: 14px 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ✅ FIX: поверх картинки + не мешает жестам */
  z-index: 10;
  pointer-events: none;
}

.purpose-card__price-text {
  font-family: "SF Pro Display", sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}

/* DESKTOP (есть hover) */
@media (hover: hover) and (pointer: fine){
  .purpose-card:hover .purpose-card__image img{
    filter: blur(6px);
    -webkit-filter: blur(6px);
  }
  .purpose-card:hover .purpose-card__price{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ACTIVE (для мобилки через JS) */
.purpose-card.is-active .purpose-card__image img{
  filter: blur(6px);
  -webkit-filter: blur(6px);
}

.purpose-card.is-active .purpose-card__price{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}




/* ===== АДАПТИВ ===== */

@media (max-width: 1654px) {
  .purpose-card__title {
    font-size: 30px;
  }
}

@media (max-width: 1200px) {
  .purpose-track {
    gap: 28px;
  }

  .purpose-card {
    flex: 0 0 calc((100% - 28px) / 2);
  }

  .purpose-card__title {
    font-size: 32px;
    min-height: 2.4em;
  }
}

@media (max-width: 768px) {
  .purpose-section {
    margin-top: 60px;
  }

  .purpose-controls {
    margin-bottom: 16px;
  }

  .purpose-track {
    gap: 16px;
  }

  .purpose-card {
    flex: 0 0 100%;
    padding: 24px 20px 30px;
  }

  .purpose-card__title {
    font-size: 24px;
    line-height: 1.2;
    min-height: 2.6em;
  }

  .purpose-card__image {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -30px;
  }

  .purpose-card__image img {
    margin-top: 40px; /* вместо !important и дублей */
  }

  .purpose-nav__btn {
    width: 28px;
    height: 28px;
  }

  .purpose-nav__btn img {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 480px) {
  .purpose-card {
    padding: 20px 14px 26px;
    border-radius: 22px;
  }

  .purpose-card__title {
    font-size: 22px;
    line-height: 26px;
    min-height: 2.6em;
  }

  .purpose-card__image {
    margin-left: -14px;
    margin-right: -14px;
    margin-bottom: -26px;
  }

  .purpose-card__image img {
    margin-top: 40px;
  }
}



/* ===== Стоимость услуг ===== */

/* ================== Блок с ценами (Стоимость услуг) ================== */

.services-section {
  margin-top: 100px; /* как и у остальных блоков с заголовком */
}

.services-card {
  margin-top: 44px;
  background: #ffffff;
  border-radius: var(--block-radius);
  padding: 40px;
  box-shadow:
    376px 518px 179px 0px rgba(0, 0, 0, 0),
    240px 332px 164px 0px rgba(0, 0, 0, 0.01),
    135px 187px 138px 0px rgba(0, 0, 0, 0.05),
    60px 83px 102px 0px rgba(0, 0, 0, 0.09),
    15px 21px 56px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 13;
}

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 22px;

  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

  transform: translateX(-55px); /* лёгкий сдвиг влево на десктопе */
}

.service-item {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* тянем всё вправо */
  gap: 40px;
  width: 100%;
}

.service-main {
  display: flex;
  align-items: center;
  background: #5994fb;
  border-radius: 50px;
  overflow: hidden;
  flex: 0 0 auto;
  white-space: nowrap; /* название + цена в одну строку на десктопе */
}

.service-name-pill,
.service-price,
.service-order-btn {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 29px;
  font-weight: 500;
  line-height: 63px;
}

/* левая белая часть */
.service-name-pill {
  box-sizing: border-box;
  background: #ffffff;
  border: 3px solid rgba(88, 144, 244, 1);
  border-radius: 50px;
  padding: 0 40px;
  color: #000000;
  white-space: nowrap;
}

/* правая синяя часть */
.service-price {
  padding: 0 40px;
  color: #ffffff;
  white-space: nowrap;
}

/* кнопка "Заказать" */
.service-order-btn {
  box-sizing: border-box;
  padding: 0 40px;
  min-width: 170px;
  height: 63px;
  border: 3px solid rgba(88, 144, 244, 1);
  border-radius: 50px;
  background: #ffffff;
  color: #5994fb;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.service-order-btn:hover {
  background: #f5f7ff;
}

/* ================== Адаптив: планшет и узкий десктоп ================== */

@media (max-width: 1200px) {
  .services-card {
    padding: 32px 32px;
  }

  .services-list {
    transform: translateX(-30px); /* чуть меньше сдвиг */
  }

  .service-item {
    gap: 28px;
  }

  .service-name-pill,
  .service-price,
  .service-order-btn {
    font-size: 20px;
    line-height: 54px;
    align-self: center;
  }

  .service-order-btn {
    height: 54px;
    min-width: 150px;
  }
}

/* ================== Узкий десктоп / планшет в горизонтали ================== */
@media (max-width: 1500px) {
  /* убираем сильный сдвиг, всё внутри белой карточки */
  .services-list {
    transform: none;
  }

  .service-item {
    gap: 28px;
  }

  /* даём плашке чуть сжиматься внутри строки */
  .service-main {
    flex: 1 1 auto;
    align-items: center;
  }

  /* 🔹 главное: разрешаем перенос названия в 2 строки */
  .service-name-pill {
    white-space: normal;
    line-height: 1.3;
    padding: 8px 32px;    /* чуть больше вертикальный отступ */
  }

  /* цену оставляем в одну строку */
  .service-price {
    white-space: nowrap;
    padding: 0 32px;
  }
}


/* ================== Адаптив: мобилка ================== */

@media (max-width: 768px) {
  .services-section {
    margin-top: 60px;
  }

  .services-card {
    padding: 24px 18px 28px;
    border-radius: 24px;
  }

  .services-list {
    transform: none;          /* убираем сдвиг, центрируем */
    max-width: 100%;
    gap: 18px;
  }

  .service-item {
    flex-direction: column;   /* кнопка под плашкой */
    align-items: center;      /* всё по центру */
    gap: 10px;
  }

  /* 🔹 не растягиваем синюю плашку, по размеру содержимого */
  .service-main {
    flex: 0 0 auto;
    align-self: center;
  }

  .service-name-pill,
  .service-price,
  .service-order-btn {
    font-size: 14px;
    line-height: 42px;
    align-self: center;
  }

  .service-name-pill {
    padding: 0 22px;
    white-space: normal;      /* разрешаем перенос названия услуги */
  }

  .service-price {
    padding: 0 22px;
  }

  .service-order-btn {
    align-self: center;       /* кнопка по центру под строкой */
    min-width: 0;
    height: 44px;
    padding: 0 32px;
  }
}

/* ================== Адаптив: очень узкие (маленькие телефоны) ================== */

@media (max-width: 480px) {
  .services-card {
    padding: 20px 14px 24px;
  }

  .services-list {
    gap: 16px;
  }

  .service-name-pill,
  .service-price,
  .service-order-btn {
    font-size: 14px;
    line-height: 15px;
  }

  .service-name-pill {
    padding: 10px 18px;
  }

  .service-price {
    padding: 0 18px;
  }

  .service-order-btn {
    height: 40px;
    padding: 0 26px;
  }
}



/* ===== Модалка "Сделать заказ" ===== */

.order-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;              /* .is-open -> display:flex */
  align-items: center;
  justify-content: center;
}

.order-modal.is-open {
  display: flex;
}

/* затемнение фона + размытие */
.order-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
}

/* белая карточка модала */
.order-modal__dialog {
  position: relative;
  width: min(92vw, 640px);
  max-height: calc(100vh - 40px);   /* не вылезает за экран */
  background: #fff;
  border-radius: var(--header-radius);
  box-shadow:
    376px 518px 179px rgba(0,0,0,0),
    240px 332px 164px rgba(0,0,0,0.01),
    135px 187px 138px rgba(0,0,0,0.05),
    60px 83px 102px rgba(0,0,0,0.09),
    15px 21px 56px rgba(0,0,0,0.1);
  padding: 32px 40px 28px 40px;
  overflow-y: auto;
}

/* крестик */
.order-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.order-modal__close img {
  width: 33px;
  height: 33px;
}

/* заголовок и подпись-услуга */
.order-modal__title {
  margin: 0 40px 8px 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  color: #000;
}

.order-modal__service {
  margin: 0 0 20px 0;
  font-size: 24px;
  font-weight: 500;
  color: #555;
}

.order-modal__service span {
  color: #000;
}

/* поля формы внутри модала */
#order-form .rt-input input {
  font-size: 22px;
}

/* когда модал открыт — блокируем скролл страницы */
body.modal-open {
  overflow: hidden;
}

/* ===== Адаптив модалки заказа ===== */

@media (max-width: 768px) {
  .order-modal__dialog {
    width: 92vw;
    padding: 24px 20px 20px;
    border-radius: 24px;
  }

  .order-modal__title {
    font-size: 26px;
    line-height: 30px;
    margin-right: 32px;
    margin-bottom: 6px;
  }

  .order-modal__service {
    font-size: 18px;
    margin-bottom: 16px;
  }

  #order-form .rt-input input {
    font-size: 18px;
  }

  .order-modal__close {
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
  }

  .order-modal__close img {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .order-modal__dialog {
    padding: 20px 16px 18px;
  }

  .order-modal__title {
    font-size: 22px;
    line-height: 26px;
  }

  .order-modal__service {
    font-size: 16px;
  }

  #order-form .rt-input input {
    font-size: 16px;
  }
}




/* ===== FAQ (Вопросы) ===== */

.faq-section {
  margin-top: 100px;
  text-align: center;
}

/* контейнер по ширине, как у остальных больших блоков */
.faq-wide {
  width: var(--header-w);
  max-width: 100%;
  margin: 44px auto 0;
}

/* белая карточка с иллюстрацией и текстом */
.faq-wide__card {
  background: #ffffff;
  border-radius: var(--block-radius);
  padding: 40px;
  box-shadow:
    376px 518px 179px rgba(0,0,0,0),
    240px 332px 164px rgba(0,0,0,0.01),
    135px 187px 138px rgba(0,0,0,0.05),
    60px 83px 102px rgba(0,0,0,0.09),
    15px 21px 56px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 56px;
  
  /* ВАЖНО: */
  position: relative; 
  overflow: hidden; /* Обрезает картинку, если она вылезает за скругления */
  min-height: 340px; /* Задай минимальную высоту карточки, чтобы она не сплющилась, если текста мало */
  z-index: 17;
}

/* левая картинка — просто отдельная колонка,
   слегка выносим влево, но без жёстких bottom/margin-хаков */
.faq-wide__image {
  /* Оставляем ширину, чтобы текст справа знал, от чего отталкиваться */
  flex: 0 0 624px; 
  
  /* Убираем flex-выравнивание внутри, оно не нужно для absolute */
  /* display: flex; -> убираем */
  /* align-items: flex-end; -> убираем */
  
  /* ВАЖНО: Делаем этот блок высотой во всю карточку, но "прозрачным" для потока */
  align-self: stretch; 
  position: relative; /* Чтобы позиционировать картинку внутри этого блока */
}

/* 3. Сама картинка */
.faq-wide__image img {
  /* ВАЖНО: Абсолютное позиционирование вырывает картинку из потока. 
     Она перестает толкать границы карточки. */
  position: absolute;
  
  /* Теперь настраивай размер и положение как угодно вручную: */
  width: 760px; /* Можешь ставить хоть 200%, карточка не вырастет */
  
  /* Позиционируем "прибивая" к низу и левому краю обертки */
  bottom: -240px; /* Опускаем вниз */
  left: -135px;   /* Сдвигаем влево */
  
  
  
  max-width: none; /* Разрешаем ей быть больше родителя */
  z-index: 1;
}

/* контент справа */
/* 4. Контент справа */
.faq-wide__content {
  /* --- Старые свойства, которые НУЖНО оставить: --- */
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
  align-items: center;
  max-width: 560px; /* Можно оставить или убрать, margin-auto справится */

  /* --- Новые свойства для центрирования: --- */
  flex: 1 1 auto;
  margin-left: auto;  /* Это выравнивает блок по центру оставшегося места */
  margin-right: auto;
  z-index: 2;         /* Чтобы текст был поверх картинки */
}

.faq-wide__title {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* строка с иконкой + серым текстом */
.faq-wide__text-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.faq-ask-card__icon img {
  width: 64px;
  height: 64px;
  display: block;
}

/* серый текст под заголовком */
.faq-ask-card__text {
  margin: 0;
  color: #9f9f9f;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 43px;
}

/* кнопка "Задать вопрос" */
.faq-ask-card__btn {
  margin-top: 8px;
  padding: 0 60px;
  height: 80px;
  border: none;
  border-radius: 50px;
  background: #5994fb;
  color: #ffffff;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 31px;
  font-weight: 500;
  line-height: 38px;
  cursor: pointer;
  white-space: nowrap;
}

.faq-ask-card__btn:hover {
  background: #4a82e5;
}

/* ===== Адаптив FAQ ===== */

/* планшет / узкий десктоп */
@media (max-width: 1561px) {
  .faq-wide {
    /*width: 100%;*/
    width: var(--header-w);
    box-sizing: border-box;

    /*width: var(--header-w);
    max-width: 100%;
    margin: 44px auto 0;*/
  }

  .faq-wide__card {
    padding: 32px;
    gap: 36px;
  }

  .faq-wide__image {
    flex: 0 0 280px;
  }

  .faq-wide__image img {
    width: 120%;
    transform: translateX(-10%);
  }

  .faq-wide__title {
    font-size: 36px;
  }

  .faq-ask-card__text {
    font-size: 24px;
    line-height: 32px;
  }

  .faq-ask-card__btn {
    height: 68px;
    font-size: 24px;
    padding: 0 44px;
  }

.faq-wide__image img {
  /* ВАЖНО: Абсолютное позиционирование вырывает картинку из потока. 
     Она перестает толкать границы карточки. */
  position: absolute;
  
  /* Теперь настраивай размер и положение как угодно вручную: */
  width: 637px; /* Можешь ставить хоть 200%, карточка не вырастет */
  
  /* Позиционируем "прибивая" к низу и левому краю обертки */
  bottom: -213px; /* Опускаем вниз */
  left: -121px;   /* Сдвигаем влево */
  
  
  
  max-width: none; /* Разрешаем ей быть больше родителя */
  z-index: 1;
}

/* левая картинка — просто отдельная колонка,
   слегка выносим влево, но без жёстких bottom/margin-хаков */
.faq-wide__image {
  /* Оставляем ширину, чтобы текст справа знал, от чего отталкиваться */
  flex: 0 0 451px; 
  
  /* Убираем flex-выравнивание внутри, оно не нужно для absolute */
  /* display: flex; -> убираем */
  /* align-items: flex-end; -> убираем */
  
  /* ВАЖНО: Делаем этот блок высотой во всю карточку, но "прозрачным" для потока */
  align-self: stretch; 
  position: relative; /* Чтобы позиционировать картинку внутри этого блока */
}
}

/* мобилка — картинку убираем, карточка компактная как в макете */
@media (max-width: 970px) {
  .faq-section {
    margin-top: 60px;
  }

  .faq-wide {
    width: 100%;
    margin: 32px auto 0;
    box-sizing: border-box;
    padding: 0 16px;  
  }

  .faq-wide__card {
    padding: 24px 18px 24px;
    border-radius: 24px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: auto;
  }

  .faq-wide__image {
    display: none; /* полностью прячем иллюстрацию */
  }

  .faq-wide__content {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .faq-wide__title {
    font-size: 22px;
    line-height: 26px;
    text-align: center;
  }

  .faq-wide__text-row {
    justify-content: center;
    gap: 12px;
  }

  .faq-ask-card__icon img {
    width: 40px;
    height: 40px;
  }

  .faq-ask-card__text {
    font-size: 16px;
    line-height: 22px;
  }

  .faq-ask-card__btn {
    margin-top: 10px;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
  }
}

/* очень узкие телефоны */
@media (max-width: 480px) {
  .faq-wide__card {
    padding: 20px 14px 20px;
  }

  .faq-wide__title {
    font-size: 20px;     /* исправил с 24px → 20px, чтобы не ломать иерархию */
    line-height: 24px;
  }

  .faq-ask-card__text {
    font-size: 15px;
    line-height: 20px;
  }

  .faq-ask-card__btn {
    height: 44px;
    font-size: 16px;
  }

  .faq-wide {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }
}


/* потом в адаптиве можно будет перестроить в одну колонку */

/* ===== Модалка "Задать вопрос" ===== */

.question-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;                 /* .is-open включит flex */
  align-items: center;
  justify-content: center;
}

.question-modal.is-open {
  display: flex;
}

/* затемнение + размытие задника */
.question-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
}

/* сама карточка */
.question-modal__dialog {
  position: relative;
  width: min(92vw, 640px);
  max-height: 90vh;
  background: #ffffff;
  border-radius: var(--header-radius);
  box-shadow:
    376px 518px 179px rgba(0, 0, 0, 0),
    240px 332px 164px rgba(0, 0, 0, 0.01),
    135px 187px 138px rgba(0, 0, 0, 0.05),
    60px 83px 102px rgba(0, 0, 0, 0.09),
    15px 21px 56px rgba(0, 0, 0, 0.1);
  padding: 32px 40px 28px;
  overflow-y: auto;
}

/* крестик */
.question-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.question-modal__close img {
  width: 32px;
  height: 32px;
}

/* заголовок и подзаголовок */
.question-modal__title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

.question-modal__subtitle {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: #555;
}

/* форма */
.question-modal__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.question-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.question-modal__label {
  font-size: 18px;
  font-weight: 500;
}

.question-modal__input,
.question-modal__textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 18px;
  border: 2px solid #e0e4f5;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.question-modal__input:focus,
.question-modal__textarea:focus {
  border-color: #5994fb;
  box-shadow: 0 0 0 2px rgba(89, 148, 251, 0.15);
}

.question-modal__textarea {
  resize: vertical;
  min-height: 120px;
}

/* кнопка */
.question-modal__submit {
  margin-top: 8px;
  align-self: flex-start;
  padding: 0 40px;
  height: 63px;
  border-radius: 50px;
  border: none;
  background: #5994fb;
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.question-modal__submit:hover {
  opacity: 0.9;
}

/* примечание под формой */
.question-modal__note {
  margin: 8px 0 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #888;
}

/* когда модал открыт — блокируем скролл страницы */
body.modal-open { overflow: hidden; }

/* ===== Адаптив модалки вопроса ===== */

/* планшет / узкий десктоп */
@media (max-width: 1200px) {
  .question-modal__dialog {
    width: min(94vw, 560px);
    padding: 28px 28px 24px;
  }

  .question-modal__title {
    font-size: 28px;
  }

  .question-modal__subtitle {
    font-size: 18px;
  }

  .question-modal__label {
    font-size: 17px;
  }

  .question-modal__input,
  .question-modal__textarea {
    font-size: 16px;
  }

  .question-modal__submit {
    height: 56px;
    font-size: 20px;
    padding: 0 34px;
  }
}

/* мобилка */
@media (max-width: 768px) {
  .question-modal {
    padding: 0 8px; /* чуть воздух по краям экрана */
    box-sizing: border-box;
  }

  .question-modal__dialog {
    width: 100%;
    max-width: 460px;
    padding: 20px 18px 18px;
    border-radius: 24px;
  }

  .question-modal__close {
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
  }

  .question-modal__close img {
    width: 26px;
    height: 26px;
  }

  .question-modal__title {
    font-size: 22px;
    margin-right: 32px; /* чтобы текст не упирался в крестик */
  }

  .question-modal__subtitle {
    font-size: 16px;
    margin-bottom: 18px;
  }

  .question-modal__label {
    font-size: 15px;
  }

  .question-modal__input,
  .question-modal__textarea {
    font-size: 15px;
    border-radius: 14px;
    padding: 10px 12px;
  }

  .question-modal__textarea {
    min-height: 100px;
  }

  .question-modal__submit {
    width: 100%;
    align-self: stretch;
    height: 48px;
    font-size: 17px;
    padding: 0 20px;
    text-align: center;
  }

  .question-modal__note {
    font-size: 12px;
  }
}

/* очень узкие экраны */
@media (max-width: 480px) {
  .question-modal__dialog {
    padding: 18px 14px 16px;
  }

  .question-modal__title {
    font-size: 20px;
  }

  .question-modal__subtitle {
    font-size: 15px;
  }

  .question-modal__submit {
    height: 44px;
    font-size: 16px;
  }
}


/* ===== Контакты ===== */
/* ===== Контакты ===== */

.contacts-section {
  margin-top: 100px;
  text-align: center;
}

/* Контейнер с двумя колонками на десктопе */
.contacts-row {
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 44px;
  margin-left: auto;
  margin-right: auto;
  width: var(--header-w);
  max-width: 100%;
}

/* Белые карточки */
.contacts-card {
  background: #ffffff;
  border-radius: var(--block-radius);
  padding: 40px;
  box-shadow:
    376px 518px 179px rgba(0,0,0,0),
    240px 332px 164px rgba(0,0,0,0.01),
    135px 187px 138px rgba(0,0,0,0.05),
    60px 83px 102px rgba(0,0,0,0.09),
    15px 21px 56px rgba(0,0,0,0.1);
  text-align: center;
  z-index: 20;
}

/* ===== Левая карточка: один блок контакта ===== */

.contacts-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

/* «шапка» блока (иконка + подпись) */
.contacts-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
  width: 100%;
}

.contacts-item__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contacts-item__label {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  color: #9f9f9f;
}

.contacts-item__value {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  color: #000;
  text-align: center;
}

/* кликабельные значения (телефон, e-mail) без подчёркивания */
.contacts-item__value a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.contacts-item__value a:hover {
  text-decoration: none;
}

/* текст про мессенджеры */
.contacts-subtitle {
  margin: 9px 0 18px;
  font-size: 24px;
  font-weight: 500;
}

/* иконки мессенджеров */
.contacts-messengers {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.contacts-messenger {
  display: flex;
  align-items: center;
  gap: 12px;              /* расстояние между иконкой и текстом */
  border-radius: 50px;
  text-decoration: none;
  color: #ffffff;
  background: #24b4e9;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 12px;
  padding-top: 12px;
  border: none;
  cursor: pointer;     
}

.contacts-messengerr {
  display: flex;
  align-items: center;
  gap: 12px;              /* расстояние между иконкой и текстом */
  border-radius: 50px;
  text-decoration: none;
  color: #ffffff;
  background: radial-gradient(136.12% 140.74% at 99.77% 99.04%, #8d28c8 0%, #7c42fa 20%, #007aff 80%, #609ceb 100%);
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 12px;
  padding-top: 12px;
  border: none;
  cursor: pointer;     
}

.contacts-messenger img {
  display: block;
  flex-shrink: 0;
}

.contacts-messenger__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;   /* важно: Telegram не переносится */
  letter-spacing: 0.04em;
}

/* Разделитель между блоками */
.contacts-divider {
  width: 70%;
  height: 3px;
  margin: 12px auto;
  background: #5994fb;
  border-radius: 999px;
}

/* Убираем отступ снизу у последнего элемента */
.contacts-item:last-child {
  margin-bottom: 0;
}

/* ===== Правая карточка — карта ===== */

.contacts-card--map {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 21;
}

.contacts-map-header {
  padding: 30px 40px;
  background: #5994fb;
  color: #fff;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
}

.contacts-map {
  flex: 1;
  min-height: 360px;
  border-radius: 33px;
}

/* ===== Адаптив контактов ===== */

/* планшет / узкий десктоп */
@media (max-width: 1200px) {
  .contacts-row {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    gap: 32px;
  }

  

  .contacts-map-header {
    font-size: 42px;
    padding: 24px 24px;
  }

  .contacts-map {
    min-height: 320px;
  }

  .contacts-item__label {
    font-size: 24px;
  }

  .contacts-item__value {
    font-size: 26px;
    line-height: 32px;
  }

  .contacts-subtitle {
    font-size: 20px;
  }
}

/* мобилка: карточки одна под другой + компактнее */
@media (max-width: 768px) {
  .contacts-section {
    margin-top: 60px;
  }

  .contacts-row {
    grid-template-columns: 1fr;      /* стэк друг под другом */
    width: 100%;
    padding: 0 16px;
    gap: 24px;
  }

  .contacts-card {
    border-radius: 24px;
  }
 
  .contacts-map-header {
    font-size: 30px;
    line-height: 1.2;
    padding: 20px 16px;
  }

  .contacts-map {
    min-height: 260px;
    border-radius: 24px;
  }

  .contacts-item__icon {
    width: 28px;
    height: 28px;
  }

  .contacts-item__label {
    font-size: 20px;
  }

  .contacts-item__value {
    font-size: 18px;
    line-height: 24px;
  }

  .contacts-subtitle {
    font-size: 17px;
    margin: 10px 0 14px;
  }

  .contacts-messengers {
    gap: 14px;
  }

  .contacts-messenger{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 8px;
    padding-top: 8px;
  }

  .contacts-messenger img {
    width: 20px;
    height: 20px;
  }

  .contacts-divider {
    width: 80%;
    height: 2px;
    margin: 10px auto;
  }

  .contacts-messenger__text {
    font-size: 13px;
}
}

/* очень узкие экраны */
@media (max-width: 480px) {
  .contacts-row {
    padding: 0 12px;
    gap: 20px;
  }

  .contacts-card {
    border-radius: 20px;
  }

  .contacts-map-header {
    font-size: 24px;
    padding: 16px 12px;
  }

  .contacts-map {
    min-height: 220px;
    border-radius: 20px;
  }

  .contacts-item__label {
    font-size: 18px;
  }

  .contacts-item__value {
    font-size: 16px;
    line-height: 22px;
  }

  .contacts-subtitle {
    font-size: 16px;
}
}



/* ================== ФУТЕР ================== */

.site-footer {
  margin-top: 100px;
  background: #5994fb; /* Цвет фона как на макете */
  color: #ffffff;
  border-radius: var(--header-radius) var(--header-radius) 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  z-index: 25;
}

/* Внутренний контейнер */
.site-footer__inner {
  width: 100%;
  max-width: var(--header-w);
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* 1. ЛЕВАЯ ЧАСТЬ: Бренд — как в шапке, но белым */
.footer-brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.footer-brand__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.footer-brand__logo {
  width: 38px;
  height: 38px;
  display: block;
}

.footer-brand__text {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  line-height: 1;
}

.footer-brand__title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
}

.footer-brand__subtitle {
  font-family: Lato, Inter, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  opacity: 0.9;
  text-align: left;
}

/* 2. ЦЕНТРАЛЬНАЯ ЧАСТЬ: Навигация */

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 120px;
}

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

.footer-nav__title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  margin-bottom: 4px;
  display: block;
}

.footer-nav__link {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  display: block;
}

.footer-nav__title:hover,
.footer-nav__link:hover {
  color: rgb(222, 222, 222);
  text-decoration: none;
}

/* 3. ПРАВАЯ ЧАСТЬ: Оплата */

.footer-pay {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  text-align: right;
}

.footer-pay__text {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.footer-pay__logo {
  width: 68px;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* НИЖНЯЯ ПЛАШКА */

.site-footer__bottom {
  width: 100%;
  max-width: var(--header-w);
  margin: 0 auto;
  padding: 32px 200px 40px;
}

.footer-disclaimer {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* ===== АДАПТИВ ФУТЕРА ===== */

/* планшет / узкий десктоп */
@media (max-width: 1200px) {
  .site-footer__inner {
    padding: 32px 24px;
    gap: 32px;
  }

  .footer-nav {
    gap: 32px 80px;
  }

  .site-footer__bottom {
    padding: 28px 80px 36px;
  }
  
}


/* мобилка: лого слева, "Принимаем к оплате" справа в одной строке,
   ниже – меню квадратом 2×2 */
@media (max-width: 768px) {
  .site-footer__inner {
    width: 100%;
    max-width: var(--header-w);
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;              /* разрешаем перенос строк */
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 16px 20px;      /* чуть меньше паддинги сверху/снизу */
    row-gap: 20px;
    column-gap: 0;
    text-align: left;
  }

  /* первая строка: логотип слева, оплата справа */
  .footer-brand,
  .footer-pay {
    /*flex: 0 0 50%;*/                /* по 50% ширины */
    min-width: 0;                 /* чтобы не ломать строку */
  }

  .footer-brand {
    display: flex;
    align-items: center;
  }

  .footer-brand__text {
    margin-left: 8px;
  }

  .footer-pay {
    display: flex;
    flex-direction: column;
    align-items: flex-end;        /* прижать к правому краю */
    text-align: right;
    margin-left: auto;            /* добиваем прижим к правому краю */
    gap: 6px;
  }

  .footer-pay__logo {
  margin-left: auto;
}

  /* меню во второй строке: квадрат 2×2 */
  .footer-nav {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 16px;
  }

  .footer-col {
    align-items: flex-start;
  }

  .site-footer__bottom {
    padding: 20px 16px 28px;
  }

  .footer-disclaimer {
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
  }

  .site-footer {
    margin-top: 60px;
  }
}

/* очень узкие экраны – только типографика и паддинги */
@media (max-width: 480px) {
  .site-footer__inner {
    padding: 20px 12px 18px;
  }

  .footer-brand__logo {
    width: 32px;
    height: 32px;
  }

  .footer-brand__title {
    font-size: 16px;
    line-height: 26px;
  }

  .footer-nav__title {
    font-size: 15px;
  }

  .footer-nav__link {
    font-size: 13px;
  }

  .footer-pay__text {
    font-size: 13px;
  }

  .site-footer__bottom {
    padding: 18px 14px 24px;
  }

  .footer-disclaimer {
    font-size: 10px;
  }
}



/* ================== КНОПКА ВЕРХ ================== */
#scroll-top-btn {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #5994fb;
  border: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 500;
  transform: translateY(0); /* базовое положение */
}

#scroll-top-btn.show {
  opacity: 1;
  pointer-events: auto;
  /* transform не трогаем здесь, только через JS */
}

#scroll-top-btn img {
  width: 28px;
  height: 28px;
}



.contacts-messengers {
  display: flex;
  justify-content: center;
  gap: 18px;
}

/* базовая кнопка */
.contacts-messenger {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 54px;            /* ключ: фиксируем высоту обеим */
  padding: 0 16px;
  gap: 12px;

  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* Telegram фон */
.contacts-messenger.is-tg {
  background: #24b4e9;
}

/* MAX фон */
.contacts-messenger.is-max {
  background: radial-gradient(136.12% 140.74% at 99.77% 99.04%, #8d28c8 0%, #7c42fa 20%, #007aff 80%, #609ceb 100%);
}

/* иконка TG */
.contacts-messenger .messenger-ico{
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

/* текст TG */
.contacts-messenger__text{
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* логотип MAX (SVG) — нормируем ширину, чтобы не раздувал кнопку */
.contacts-messenger .messenger-logo{
  height: 26px;           /* высота логотипа */
  width: auto;
  max-width: 92px;        /* ограничение ширины, чтобы пилюля не становилась огромной */
  display: block;
}


@media (max-width: 768px) {
  .contacts-messengers { gap: 12px; }

  .contacts-messenger{
    height: 42px;
    padding: 0 12px;
    gap: 8px;
  }

  .contacts-messenger .messenger-ico{
    width: 20px;
    height: 20px;
  }

  .contacts-messenger__text{
    font-size: 13px;
  }

  .contacts-messenger .messenger-logo{
    height: 20px;
    max-width: 70px;
  }
}

.rt-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}

.rt-agree input {
  margin-top: 3px;
  flex-shrink: 0;
}

.rt-agree a {
  color: inherit;
  text-decoration: underline;
}