/* ===== Дополнительные стили для собранного сайта (поверх main.css) ===== */

/* --- Рич-контент внутренних страниц --- */
.services__content--rich p { margin-bottom: 18px; }
.services__content--full { margin-left: 0 !important; max-width: 100% !important; width: 100% !important; }

.content__h3 {
  color: #0D025E;
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
  margin: 28px 0 14px; }

.services__content--rich .content__h3:first-child { margin-top: 0; }

.content__ul {
  margin: 0 0 22px 0;
  padding: 0;
  list-style: none; }
.content__ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: #2b2b2b;
  font-size: 17px;
  line-height: 140%; }
.content__ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  background: url(../img/check.svg) no-repeat center / contain; }

/* --- Таблица цен --- */
.content__table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 26px;
  font-size: 16px; }
.content__table thead td {
  background: #0D025E;
  color: #fff;
  font-weight: 600;
  padding: 14px 18px;
  text-align: left;
  line-height: 130%; }
.content__table thead td:last-child { text-align: right; white-space: nowrap; }
.content__table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid #e3eef5;
  color: #2b2b2b;
  line-height: 135%;
  vertical-align: top; }
.content__table tbody td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: #0D025E; }
.content__table tbody tr:nth-child(even) td { background: #f5fafd; }

/* --- Выделенная заметка / предупреждение --- */
.content__note {
  background: #eaf6fc;
  border-left: 4px solid #29ABE2;
  border-radius: 12px;
  padding: 16px 22px;
  margin: 6px 0 24px;
  color: #0D025E;
  font-size: 17px;
  line-height: 140%; }
.content__note a { color: #29ABE2; }

/* --- CTA блок --- */
.cta {
  margin: 10px auto 0;
  max-width: 1302px;
  padding: 0 15px; }
.cta__inner {
  background: #0D025E;
  border-radius: 32px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px; }
.cta__inner h3 { color: #fff; font-size: 28px; font-weight: 500; line-height: 125%; margin: 0; max-width: 720px; }
.cta__inner .btn { background: #29ABE2; border-color: #29ABE2; width: auto; padding: 0 28px; }
.cta__inner .btn:hover { background: #fff; color: #0D025E; border-color: #fff; }

/* === Меню «Услуги»: надёжное раскрытие по КЛИКУ (JS добавляет .is-open) ===
   Отказались от hover: он закрывался при движении по диагонали. Панель
   привязана к контейнеру шапки (а не к триггеру), поэтому не уезжает за край
   экрана; при низком окне включается вертикальная прокрутка. */
.nav { position: relative; z-index: 60; }
.nav .container { position: relative; }
.nav__box ul { z-index: 60; }
.open { position: static; }
/* Гасим relative у промежуточного ul, чтобы офсет-родителем панели стал
   контейнер шапки (.nav .container) — тогда панель по ширине совпадает с
   центрированным контейнером и не уезжает за край экрана. Смещения top/left
   из шаблона переносим в margin, чтобы вид навигации не изменился. */
.nav__box ul.main__ul { position: static !important; top: auto !important;
  left: auto !important; margin-top: 15px; margin-left: 8px; }
.nav .open:before, .nav .open:after { display: none !important; }

/* Стрелка-индикатор у пункта «Услуги» */
.open > a { position: relative; cursor: pointer; }
.open > a::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  vertical-align: middle;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease; }
.open.is-open > a::after { transform: translateY(1px) rotate(-135deg); }

.open__menu--wide {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  max-width: 100%;
  transform: none;
  margin: 8px 0 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(13, 2, 94, 0.16);
  border: 1px solid #eef2f7;
  z-index: 60;
  max-height: calc(100vh - 130px);
  overflow-x: hidden;   /* убираем паразитный горизонтальный скролл */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cdd7e3 transparent; }
/* Аккуратный вертикальный скролл панели (если список выше окна) вместо
   ярко-синей полосы из глобального шаблона. */
.open__menu--wide::-webkit-scrollbar { width: 8px; height: 0; }
.open__menu--wide::-webkit-scrollbar-track { background: transparent; }
.open__menu--wide::-webkit-scrollbar-thumb { background: #cdd7e3; border-radius: 8px; }
.open.is-open .open__menu--wide { display: block !important; }
/* Полностью отключаем открытие по hover из базового шаблона: меню
   управляется ТОЛЬКО кликом (.is-open). Это и убирает «диагональную»
   проблему — наведение больше не открывает и не закрывает панель. */
.open:hover .open__menu--wide { display: none; }
.open__menu--wide:before { display: none !important; }
.open__menu--wide ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 40px;
  padding: 24px 32px; }
.open__menu--wide ul li { margin: 0 !important; min-width: 0 !important; padding: 0 !important; }
.open__menu--wide ul li a {
  color: #2b2b2b;
  font-size: 15px;
  line-height: 130%;
  display: block;
  padding: 7px 0; }
.open__menu--wide ul li a:hover { color: #29ABE2; }

/* --- Защита от «гигантских» иконок ---
   Иконки-стрелки и т.п. остаются обычными <img> с корректным размером.
   Если в http-окружении сработает инлайн-замена SVG, ограничиваем размер,
   чтобы они не растягивались на весь контейнер. */
img.svg, svg.svg, svg.replaced-svg { max-width: 24px; max-height: 24px; }
.blog__arr img.svg, .blog__arr svg.svg,
.swiper-button-next1 img.svg, .swiper-button-prev1 img.svg { max-width: 44px; max-height: 44px; }
.nav__bot img.svg, .footer__tel img.svg { max-width: 20px; max-height: 20px; }

/* --- Логотип (русскоязычный, viewBox 528×190.5, без intrinsic-размеров) --- */
.nav__logo { width: 160px !important; }
.nav__logo img { width: 100%; height: auto; display: block; }
/* Декоративный логотип-разделитель у подвала */
.fig img { width: 150px !important; height: auto; }

/* Подвал: телефоны */
.footer__mail { margin-top: 6px; }

/* Контакты — карточки */
.contacts__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.contacts__card {
  background: #f5fafd;
  border-radius: 24px;
  padding: 28px 30px; }
.contacts__card h3 { color: #0D025E; font-size: 24px; margin: 0 0 16px; font-weight: 600; }
.contacts__card p { color: #2b2b2b; font-size: 16px; line-height: 145%; margin-bottom: 6px; }
.contacts__card a { color: #29ABE2; }
.contacts__card .label { color: #7a8794; font-size: 14px; margin-bottom: 0; }

@media (max-width: 991px) {
  .open__menu--wide ul { grid-template-columns: repeat(2, 1fr); }
  .contacts__grid { grid-template-columns: 1fr; }
  .cta__inner { padding: 28px; }
  .cta__inner h3 { font-size: 22px; }
  /* Mobile menu: allow scrolling so the expanded 24-item services list
     is not cut off by the viewport height. */
  .menu { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .menu .content li a { margin-bottom: 10px; }
}
@media (max-width: 767px) {
  .open__menu--wide ul { grid-template-columns: 1fr; }
  .content__table { font-size: 14px; }
  .content__table thead td, .content__table tbody td { padding: 10px 12px; }
  .nav__logo { width: 124px !important; }
  .fig img { width: 110px !important; }
}

/* ===================== P0: правки по ревью UI/доступности ===================== */

/* --- Контраст: текстовый синий темнее (#1577AB ≈ 4.5:1). Яркий #29ABE2
   оставляем только для заливок кнопок и иконок (не для текста). --- */
.blue { color: #1577AB; }
.content__note a,
.contacts__card a,
.services__content a,
.info__content a,
.local__area a,
.footer__mail a { color: #1577AB; }
.nav__box ul li a:hover,
.open__menu--wide ul li a:hover,
.bread a:hover,
.footer a:hover { color: #1577AB; }
.content__note { border-left-color: #1577AB; }
.contacts__card .label { color: #5a6672; }

/* --- Видимый фокус для клавиатурной навигации --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-btn:focus-visible,
.accordeon__button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #1577AB;
  outline-offset: 2px;
  border-radius: 4px; }

/* --- Макет внутренних страниц (десктоп ≥992px):
   картинка выровнена по верху, компактнее и «липкая» при прокрутке, чтобы
   не оставалось пустого места рядом с длинным текстом. На мобильном (≤991px)
   действует базовая колоночная раскладка из шаблона — её не трогаем. --- */
@media (min-width: 992px) {
  .services__top { align-items: flex-start; }
  .services__image {
    flex: 0 0 460px;
    width: 460px;
    align-self: flex-start; }   /* картинка вверху, не «проваливается» вниз */
  .services__image img {
    width: 100%;
    aspect-ratio: 5 / 4;        /* чуть выше — меньше пустоты рядом с текстом */
    object-fit: cover;
    border-radius: 18px;
    display: block; }
  .services__content { max-width: 820px; }
  .services__top_2 .services__image { align-self: flex-start; }
}

/* --- P1: интерактивные элементы как доступные кнопки --- */
.menu-btn { -webkit-appearance: none; appearance: none; background: transparent; border: 0; padding: 0; }
.accordeon__button { -webkit-appearance: none; appearance: none; background: transparent; font-family: inherit; }

/* ===================== P2: полировка ===================== */

/* Семантический H1 на внутренних страницах визуально как H2 (как в шаблоне) */
.services h1 { margin: 0; font-size: 40px; text-align: center; font-weight: 400; line-height: 140%; }
@media (max-width: 991px) { .services h1 { font-size: 28px; } }
@media (max-width: 576px) { .services h1 { font-size: 23px; line-height: 122%; } }
@media (max-width: 359px) { .services h1 { font-size: 20px; } }

/* Стрелка-индикатор FAQ вместо отсутствующей img/down-arrow.png */
.accordeon__button:after, .accordeon__button2:after {
  background: none !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #0D025E;
  border-bottom: 2px solid #0D025E;
  transform: rotate(45deg);
  top: 4px !important;
  transition: transform 0.3s ease; }
.accordeon__button.active:after, .accordeon__button2.active:after {
  background: none !important;
  border-right: 2px solid #0D025E;
  border-bottom: 2px solid #0D025E;
  transform: rotate(-135deg);
  top: 9px !important; }

/* Тач-таргеты ≥44px в мобильном меню + увеличенная кнопка-бургер */
@media (max-width: 991px) {
  .menu ul > li > a,
  .menu .set > a,
  .menu .content li a { display: inline-block; padding: 11px 0; min-height: 44px; }
  .menu-btn { width: 44px; height: 44px; right: 22px; top: 34px; }
}

/* Резервируем пропорции hero-картинок на мобильном — меньше «скачка» при загрузке */
@media (max-width: 991px) {
  .services__image img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
}

/* ===================== Cookie-баннер + юридические страницы ===================== */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 1100px; margin: 0 auto;
  background: #0D025E; color: #fff;
  border-radius: 18px; padding: 18px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  box-shadow: 0 16px 48px rgba(13, 2, 94, 0.35); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { margin: 0; font-size: 14px; line-height: 150%; flex: 1 1 360px; }
.cookie-banner__text a { color: #8fd3f4; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner__btn { border: 0; border-radius: 12px; padding: 11px 22px; font-size: 15px; cursor: pointer; transition: 0.25s; min-height: 44px; font-family: inherit; }
.cookie-banner__btn--accept { background: #29ABE2; color: #fff; }
.cookie-banner__btn--accept:hover { background: #fff; color: #0D025E; }
.cookie-banner__btn--decline { background: transparent; color: #cdd7e3; border: 1px solid #4a4080; }
.cookie-banner__btn--decline:hover { color: #fff; border-color: #fff; }
@media (max-width: 575px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 16px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1; }
}

/* Юридические страницы — читаемая ширина строки */
.legal { max-width: 900px; margin: 26px auto 0; }
.legal p { color: #2b2b2b; font-size: 16px; line-height: 162%; margin-bottom: 14px; }
.legal .content__h3 { font-size: 21px; }
.legal .content__ul li { font-size: 16px; }
.legal address { font-style: normal; color: #2b2b2b; font-size: 16px; line-height: 160%; }

/* ===== Карточки услуг на главной (.ser): читаемость и переполнение ===== */
/* Заголовки-ссылки были фиолетовыми (цвет посещённой ссылки по умолчанию).
   Делаем их белыми, как задумано дизайном. */
.ser__box a { color: #fff !important; text-decoration: none; }
.ser__box a:hover, .ser__box a:visited, .ser__box a:focus { color: #fff !important; }
.ser__box p a:hover { color: #bfe6f6 !important; }

/* Затемняющая подложка плотнее — белый текст читается и на светлых фото */
.ser__left div:after, .ser__right div:after,
.ser__center div:after, .ser__bottom div:after {
  background: rgba(13, 2, 94, 0.55) !important; }
.ser__left div:hover:after, .ser__right div:hover:after,
.ser__center div:hover:after, .ser__bottom div:hover:after {
  background: rgba(13, 2, 94, 0.78) !important; }

/* При наведении список выравниваем по верху и ужимаем, чтобы он не «вылезал»
   за пределы карточки; всё лишнее аккуратно обрезается по скруглённому краю. */
.ser__left div:hover, .ser__right div:hover,
.ser__center div:hover, .ser__bottom div:hover {
  justify-content: flex-start;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent; }
/* Заголовок карточки при hover — компактнее */
.ser__left div:hover p, .ser__right div:hover p,
.ser__center div:hover p, .ser__bottom div:hover p {
  font-size: 22px;
  line-height: 115%;
  margin-bottom: 8px; }
/* Список при hover — компактнее */
.ser__box ul { width: 100%; }
.ser__box ul li { font-size: 14px; line-height: 120%; margin-bottom: 4px; }
.ser__center div, .ser__bottom div { } /* малые карточки — без изменений размеров */

/* Доступность: видимый фокус на карточках-ссылках */
.ser__box a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* ===== Единая «стрелка» для ссылок «Читать подробнее / Как мы работаем» =====
   Заменяет разнокалиберные SVG (в т.ч. вертикальную arr3) на аккуратный
   правый шеврон цветом текста — выглядит одинаково и не «ломается». */
.link-arrow::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 9px;
  vertical-align: middle;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg); }

/* ===== Блог: одинаковая высота карточек, «Читать» прижата к низу ===== */
.blog .swiper1 .swiper-wrapper { align-items: stretch; }
.blog .swiper1 .swiper-slide { height: auto; }
.blog__content { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
.blog .swiper1 .swiper-slide a { margin-top: auto; }

/* ===== Блок услуг: нижний ряд теперь из 3 карточек (добавлены «Разовые IT-услуги») ===== */
@media (min-width: 992px) { .ser__bottom div { width: 32.3%; } }
@media (max-width: 576px) { .ser__bottom div { max-width: 100%; } }

/* ===== Разделитель с логотипом над подвалом (.fig) =====
   Было: две псевдо-линии со сдвигом margin-right:40px (асимметрия) тёмного
   цвета #0d025e. Делаем одну центрированную тонкую светлую линию — половины
   получаются симметричными относительно логотипа. */
.fig:before {
  left: 0; right: 0; width: auto; margin: 0;
  top: 50%; transform: translateY(-50%);
  height: 1px; border-radius: 0;
  background: #dbe2ee; }
.fig:after { display: none !important; }

/* ===== Фикс списков контента (.content__ul) =====
   Шаблонное правило .services__top ul li (display:flex + квадратный буллет)
   перебивало по специфичности мои списки и ломало строки с <strong>
   (термин и текст разносились в две колонки). Поднимаем специфичность. */
.services__content--rich .content__ul li {
  display: block;
  align-items: initial;
  position: relative;
  padding-left: 30px;
  margin-left: 0;
  margin-bottom: 10px;
  color: #2b2b2b;
  font-size: 17px;
  line-height: 145%; }
.services__content--rich .content__ul li:before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  min-width: 0;
  max-width: 16px;
  margin: 0;
  flex: none;
  border-radius: 0;
  background: url(../img/check.svg) no-repeat center / contain; }

/* ===================== ЛЕНДИНГ услуг (универсальные секции) ===================== */
.landing { display: block; }
.lhero { background: #f5fafd; padding: 64px 0 70px; }
.lhero__box { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.lhero__text { flex: 1 1 440px; }
.lhero__text h1 { font-size: 46px; line-height: 118%; color: #0D025E; font-weight: 600; margin: 12px 0 18px; }
.lhero__lead { font-size: 19px; line-height: 156%; color: #2b2b2b; max-width: 560px; margin: 0 0 28px; }
.lhero__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.lhero__btns .btn { width: auto; padding: 0 30px; height: 50px; }
.lhero__trust { margin-top: 22px; color: #5a6672; font-size: 15px; line-height: 200%; }
.lhero__media { flex: 1 1 380px; }
.lhero__media img { width: 100%; border-radius: 24px; aspect-ratio: 5 / 4; object-fit: cover; box-shadow: 0 30px 60px rgba(13,2,94,.16); }

.lsection { padding: 70px 0; }
.lsection--row { padding: 30px 0; }
.lsection__head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.lsection__head h2 { font-size: 36px; color: #0D025E; font-weight: 600; line-height: 128%; margin: 0; }
.lsection__head h2 .blue { color: #1577AB; }
.lsection__head p { color: #5a6672; font-size: 18px; line-height: 150%; margin: 14px 0 0; }

.lfeatures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lfeature { background: #fff; border: 1px solid #eef2f7; border-radius: 22px; padding: 30px 26px; text-align: center; }
.lfeature img { width: 54px; height: 54px; margin-bottom: 16px; object-fit: contain; }
.lfeature h3 { font-size: 19px; color: #0D025E; font-weight: 600; margin: 0 0 10px; }
.lfeature p { color: #2b2b2b; font-size: 15.5px; line-height: 150%; margin: 0; }

.lrow { display: flex; align-items: center; gap: 54px; flex-wrap: wrap; padding: 40px 0; }
.lrow--rev { flex-direction: row-reverse; }
.lrow__media { flex: 1 1 380px; }
.lrow__media img { width: 100%; border-radius: 24px; aspect-ratio: 4 / 3; object-fit: cover; }
.lrow__text { flex: 1 1 440px; }
.lrow__text h2 { font-size: 30px; color: #0D025E; font-weight: 600; line-height: 128%; margin: 0 0 16px; }
.lrow__text h2 .blue { color: #1577AB; }
.lrow__text p { color: #2b2b2b; font-size: 17px; line-height: 160%; margin: 0 0 14px; }
.lrow__text ul { list-style: none; padding: 0; margin: 18px 0 0; }
.lrow__text li { position: relative; padding-left: 30px; margin-bottom: 11px; color: #2b2b2b; font-size: 16.5px; line-height: 145%; }
.lrow__text li:before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: url(../img/check.svg) no-repeat center / contain; }

.lstats { background: #0D025E; border-radius: 32px; padding: 48px 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lstat { text-align: center; color: #fff; }
.lstat b { display: block; font-size: 46px; font-weight: 700; color: #29ABE2; line-height: 1; }
.lstat span { display: block; margin-top: 12px; font-size: 16px; color: #cdd7e3; line-height: 140%; }

.lsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lstep { background: #f5fafd; border-radius: 22px; padding: 28px 24px; }
.lstep__n { width: 44px; height: 44px; border-radius: 50%; background: #29ABE2; color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lstep h3 { font-size: 18px; color: #0D025E; font-weight: 600; margin: 0 0 8px; }
.lstep p { color: #2b2b2b; font-size: 15px; line-height: 148%; margin: 0; }

@media (max-width: 991px) {
  .lfeatures, .lstats, .lsteps { grid-template-columns: repeat(2, 1fr); }
  .lhero__text h1 { font-size: 36px; }
  .lsection { padding: 50px 0; }
}
@media (max-width: 600px) {
  .lfeatures, .lstats, .lsteps { grid-template-columns: 1fr; }
  .lhero__text h1 { font-size: 29px; }
  .lsection__head h2 { font-size: 26px; }
  .lrow__text h2 { font-size: 24px; }
}

/* ===== Лендинг: FAQ-аккордеон (больше воздуха, разделители, ровный левый край) ===== */
.landing .accordeon-container { margin-top: 6px; }
.landing .accordeon__item { border-bottom: 1px solid #e3eef5; }
.landing .accordeon__item:last-child { border-bottom: none; }
.landing .accordeon__button {
  padding: 22px 42px 22px 0;
  font-size: 19px;
  line-height: 130%;
  color: #0D025E; }
.landing .accordeon__button:hover { color: #29ABE2; }
.landing .accordeon__button:after { top: 28px; }
.landing .accordeon__button.active:after { top: 30px; }
.landing .panel__text {
  margin-top: 0;
  padding: 0 0 24px;
  max-width: 880px;
  color: #2b2b2b;
  font-size: 16.5px;
  line-height: 162%;
  font-weight: 400; }

/* ===== Плашка-ограничение (услуга только в рамках договора) ===== */
.content__note--warn {
  background: #0D025E;
  color: #fff;
  border-left: 4px solid #29ABE2;
  font-weight: 500;
  line-height: 150%; }
.content__note--warn strong { color: #fff; }
.content__note--warn a { color: #8fd3f4; text-decoration: underline; }

/* ---- Связанные услуги (кросс-ссылки) ---- */
.related{padding:10px 0 70px;}
.related .container{max-width:1200px;}
.related__title{margin:6px 0 26px;}
.related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.related__card{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;background:#f5fafd;border:1px solid #dbe2ee;border-radius:14px;
  color:#0D025E;font-weight:600;line-height:1.3;text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.related__card:hover,.related__card:focus-visible{border-color:#29ABE2;
  box-shadow:0 8px 24px rgba(13,2,94,.08);transform:translateY(-2px);}
.related__card i{flex:0 0 auto;width:20px;height:20px;position:relative;}
.related__card i::after{content:"";position:absolute;top:50%;left:2px;width:9px;height:9px;
  border-top:2px solid #29ABE2;border-right:2px solid #29ABE2;
  transform:translateY(-50%) rotate(45deg);transition:left .15s ease;}
.related__card:hover i::after{left:6px;}
@media(max-width:992px){.related__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:576px){.related{padding-bottom:48px;}.related__grid{grid-template-columns:1fr;gap:12px;}
  .related__card{padding:16px 18px;}}

/* ===== Сгруппированное мега-меню услуг (колонки с заголовками) ===== */
.open__menu--wide .megamenu{
  columns:3;column-gap:44px;padding:26px 32px;}
.open__menu--wide .megamenu__group{
  -webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 18px;}
.open__menu--wide .megamenu__title{
  display:block;color:#0D025E;font-weight:700;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px;
  padding-bottom:7px;border-bottom:1px solid #eef2f7;}
.open__menu--wide .megamenu ul{
  display:block;grid-template-columns:none;gap:0;padding:0;margin:0;}
.open__menu--wide .megamenu ul li{margin:0!important;padding:0!important;}
.open__menu--wide .megamenu ul li a{
  color:#2b2b2b;font-size:15px;line-height:130%;display:block;padding:6px 0;}
.open__menu--wide .megamenu ul li a:hover{color:#1577AB;}
@media(max-width:1100px){.open__menu--wide .megamenu{columns:2;}}
@media(max-width:991px){.open__menu--wide .megamenu{columns:2;}}
/* ===== Мобильное меню (бургер): сгруппированные услуги ===== */
@media (max-width: 991px){
  /* Десктопная выпадашка не должна появляться в мобильном меню ни при каких
     состояниях (страховка от наложения абсолютного блока поверх бургер-меню). */
  .open__menu--wide{ display:none !important; }
  .menu .accordion-container .content{ right:0 !important; margin-top:10px; width:100%; }
  /* Услуги в бургер-меню — всегда ОДНА колонка, во всю ширину, карточкой. */
  .menu .megamenu{
    column-count:1 !important; column-width:auto !important; columns:auto !important;
    display:block !important; width:auto !important; max-width:100% !important;
    box-sizing:border-box;
    padding:14px 16px; margin:0; text-align:left;
    background:#f5fafd; border:1px solid #e4ecf5; border-radius:14px; }
  .menu .megamenu__group{
    display:block !important; width:100% !important; margin:0 0 14px; break-inside:auto; }
  .menu .megamenu__group:last-child{ margin-bottom:0; }
  .menu .megamenu__title{
    display:block; text-align:left; color:#0D025E; font-weight:700; font-size:12px;
    letter-spacing:.04em; text-transform:uppercase;
    margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid #dbe6f1; }
  .menu .megamenu ul{
    display:block !important; grid-template-columns:none !important; padding:0; margin:0; }
  .menu .megamenu ul li{
    text-align:left !important; margin:0 !important; width:auto !important; }
  .menu .megamenu ul li a{
    display:block; text-align:left; color:#2b2b2b; font-size:16px; font-weight:400;
    line-height:125%; padding:8px 0; margin:0 !important; }
}

/* ===== Степпер (замена мелких стрелок на крупные кнопки ± для мобильных) ===== */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #cdd7e3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  max-width: 180px; }
.stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border: none;
  background: #f5fafd;
  color: #0D025E;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
  padding: 0;
  font-family: inherit; }
.stepper__btn:hover { background: #29ABE2; color: #fff; }
.stepper__btn:active { background: #1577AB; color: #fff; }
.stepper input[type="number"] {
  width: 100%;
  flex: 1 1 auto;
  border: none;
  border-left: 1px solid #cdd7e3;
  border-right: 1px solid #cdd7e3;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #0D025E;
  height: 48px;
  padding: 0 4px;
  background: #fff;
  font-family: inherit;
  -moz-appearance: textfield;
  appearance: textfield; }
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }
/* Скрываем старые incdec стрелки (если остались в кеше) */
#incdec img, #incdec2 img, #incdec3 img { display: none !important; }

/* Дисклеймер калькулятора */
.calc__disclaimer {
  margin-top: 16px;
  color: #7a8794;
  font-size: 13px;
  line-height: 155%;
  max-width: 800px; }