/* ═════════════════════════════════════════════════════════════════════
   Новая главная по макету — views/layouts/home_new.php (+ blocks/home_new/*).
   Figma: десктоп 2jXbVCNt8dHUNsaqeReAet (1:215, кадр 1380, контент 1140),
          мобильный tsYBbl7rVOHucFJ4gzutB7 (1:39, кадр 450, поля 10 px).
   Размеры сняты с комплекта Астры (buryakov-claude.zip) в браузере на 1380
   и 450 px. Свои классы .hn-* — чтобы не задеть остальной сайт; блоки
   «Реальные проекты», «Отзывы», FAQ — хабовые (pereezd_hub.css), здесь только
   подгонка под главную. Калькулятор — свой (#calc-new), его не трогаем.

   Переходы ширины: 1200+ — как в макете; 992–1199 — плотнее; 600–991 —
   планшет (две колонки); до 599 — мобильный макет.
   ═════════════════════════════════════════════════════════════════════ */

.home-new-page {
  --hn-green: #94c121;
  --hn-green-dark: #235c33;
  --hn-green-deep: #2e5b35;
  --hn-yellow: #ffdd2d;
  --hn-yellow-hero: #ffe500;
  --hn-gray: #f5f7f8;
  --hn-border: #d7d7d7;
  --hn-text: #333;
  --hn-text-dark: #1d1d1d;
  --hn-muted: #545454;
  --hn-muted-2: rgba(29, 29, 29, .6);
  /* Полоса прокрутки лент — серая, как стандартные полосы браузера на сайте. */
  --hn-scroll-track: #e9eaeb;
  --hn-scroll-thumb: #c1c1c1;
  --hn-scroll-thumb-hover: #a8a8a8;
}
.home-new-page .hn {
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--hn-text);
  padding-top: 204px;                 /* под прилипшую шапку (204 px, как у прежней) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hn .hn-wrap {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.hn p { margin: 0; }
.hn img { max-width: 100%; }

/* Отступы между секциями — 36 px, как в макете (переопределяем хабовые 64 px). */
.home-new-page .hub.hn > section.hn-sec,
.home-new-page .hub.hn > div.hn-calc { margin-top: 36px; }
.home-new-page .hub.hn > section.hn-hero { margin-top: 0; }

/* ── Общая типографика ── */
.hn .hn-h2,
.hn .hn-calc h2 {
  margin: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hn-text-dark);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
.hn .hn-green { color: var(--hn-green); }
.hn .hn-pretitle {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  color: var(--hn-green);
}
.hn .hn-lead {
  font-size: 18px;
  line-height: 23.4px;
  color: var(--hn-muted);
}
.hn .hn-rich p { margin: 0 0 1em; }
.hn .hn-rich p:last-child { margin-bottom: 0; }
.hn .hn-rich strong,
.hn .hn-rich b { font-weight: 700; }
.hn .hn-rich a { color: var(--hn-green-dark); text-decoration: underline; }

/* ── Кнопки блоков (модуль: «Жёлтая» / «Белая с рамкой») ── */
.hn .hn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 41px;
  padding: 12px 32px;
  border: 0;
  border-radius: 24px;
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, transform .2s, color .2s;
}
.hn .hn-btn--yellow { background: var(--hn-yellow); color: var(--hn-text); }
.hn .hn-btn--yellow:hover,
.hn .hn-btn--yellow:focus-visible { background: #ffd200; color: var(--hn-text); box-shadow: 0 4px 12px rgba(255, 201, 40, .35); }
.hn .hn-btn--outline { background: #fff; color: var(--hn-green-dark); box-shadow: inset 0 0 0 1px var(--hn-green); }
.hn .hn-btn--outline:hover,
.hn .hn-btn--outline:focus-visible { background: rgba(148, 193, 33, .1); color: var(--hn-green-dark); }
.hn .hn-btn--block { width: 100%; }
.hn .hn-btn:active { transform: translateY(1px); }

/* ── Плашки ── */
.hn .hn-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}
.hn .hn-badge--green { background: rgba(35, 92, 51, .2); color: var(--hn-green-dark); }
.hn .hn-badge--yellow { border: 1px solid var(--hn-yellow); color: var(--hn-text); }
.hn .hn-badge img { flex: 0 0 auto; }

/* ── Круглые кнопки мессенджеров (50 px) ── */
.hn .hn-msg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: transform .2s, opacity .2s;
}
.hn .hn-msg:hover { transform: translateY(-2px); opacity: .92; }
.hn .hn-msg--tg { background: linear-gradient(180deg, #00afea 0%, #00bfff 100%); }

/* ═══ 1. Первый экран ═══ */
.hn .hn-hero__card {
  position: relative;
  overflow: hidden;
  min-height: 497px;
  padding: 64px 32px;
  border-radius: 24px;
  background: #000;
  color: #fff;
}
.hn .hn-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 41.3%;                        /* 471 из 1140 — фото справа, как в макете */
  overflow: hidden;
  pointer-events: none;
}
/* Фото заполняет свою часть карточки целиком (cover) и прижато к правому
   нижнему углу — как в макете, где сверху срезано ~65 px. У стандартного фото
   левая часть с вшитым текстом отрезана в самом файле. */
.hn .hn-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 100% 100%;
}
.hn .hn-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 19.75%);
}
.hn .hn-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 951px;
}
.hn .hn-hero__badges { display: flex; flex-wrap: wrap; gap: 24px; }
.hn .hn-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hn-green);
  border-radius: 4px;
  background: rgba(148, 193, 33, .5);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: #fff;
}
.home-new-page .wrap .hn .hn-hero__title,
.hn .hn-hero__title {
  display: block;
  max-width: 700px;
  margin: 0;
  font-family: 'Yandex Sans Text', Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  text-align: left;
  text-transform: none;
}
.home-new-page .wrap .hn .hn-hero__title::after { content: none; display: none; }
.hn .hn-hero__points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hn .hn-hero__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  line-height: 23.4px;
  color: #fff;
}
.hn .hn-hero__points img { flex: 0 0 auto; }
.hn .hn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.hn .hn-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 50px;
  padding: 0 32px;
  border-radius: 24px;
  background: var(--hn-yellow-hero);
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--hn-text);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow .2s;
}
.hn .hn-hero__phone:hover,
.hn .hn-hero__phone:focus { color: var(--hn-text); text-decoration: none; box-shadow: 0 6px 18px rgba(255, 229, 0, .35); }
.hn .hn-hero__more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hn .hn-hero__btn {
  min-height: 50px;
  padding: 0 32px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}
.hn .hn-hero__btn.hn-btn--outline {
  background: rgba(0, 0, 0, .46);
  box-shadow: inset 0 0 0 2px var(--hn-yellow-hero);
  color: #fff;
}
.hn .hn-hero__btn.hn-btn--outline:hover,
.hn .hn-hero__btn.hn-btn--outline:focus-visible { background: rgba(0, 0, 0, .65); color: #fff; }
.hn .hn-hero__btn.hn-btn--yellow { background: var(--hn-yellow-hero); }
.hn .hn-hero__rating {
  position: absolute;
  right: 26px;
  bottom: 44px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100px;
  padding: 9px 12px;
  border-radius: 7.6px;
  background: #fff;
  color: #333;
  text-decoration: none;
}
.hn a.hn-hero__rating:hover { text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.hn .hn-hero__rating-top { display: flex; align-items: flex-end; gap: 5px; }
.hn .hn-hero__rating-num {
  font-family: 'Yandex Sans Text', Arial, sans-serif;
  font-size: 34px;
  line-height: 1.2;
  color: #333;
}
.hn .hn-hero__rating-src {
  font-family: 'Yandex Sans Text', Arial, sans-serif;
  font-size: 11.4px;
  line-height: 17px;
  color: #868692;
  white-space: nowrap;
}

/* ═══ 2. Услуги (виджет ServicesTabs) ═══ */
.hn .hn-services__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 12px 0;
}
.hn .hn-seg-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
.hn .hn-seg {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 6px;
  border-radius: 24px;
  background: var(--hn-green-deep);
  overflow-x: auto;
  scrollbar-width: none;
}
.hn .hn-seg::-webkit-scrollbar { display: none; }
/* Вкладка 240 px, как в макете, но сжимается до своего текста, если вкладок
   много (их число задаётся в админке) — прокрутка остаётся последней страховкой. */
.hn .hn-seg__btn {
  flex: 0 1 240px;
  min-width: auto;
  padding: 6px 24px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 23.4px;
  color: #f5f7f8;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.hn .hn-seg__btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hn .hn-seg__btn.is-active {
  border-color: rgba(0, 0, 0, .04);
  background: var(--hn-gray);
  color: var(--hn-text);
}
.hn .hn-seg__btn:focus-visible { outline: 2px solid var(--hn-yellow); outline-offset: 2px; }
.hn .hn-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.hn .hn-svc-grid[hidden] { display: none; }
.hn .hn-span-d1 { grid-column: span 1; }
.hn .hn-span-d2 { grid-column: span 2; }
.hn .hn-span-d3 { grid-column: span 3; }
.hn .hn-span-d4 { grid-column: span 4; }
.hn .hn-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  min-height: 270px;
  padding: 24px;
  border-radius: 16px;
  background: var(--hn-gray);
  transition: box-shadow .2s, transform .2s;
}
.hn .hn-svc__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.hn .hn-svc--linked:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.hn .hn-svc--linked:hover .hn-svc__title { color: var(--hn-green-dark); }
.hn .hn-svc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
/* Высота иконки всегда 48 px, как в макете: у части иконок из набора (и у
   загруженных) собственный размер мельче — без этого они выглядели бы точками. */
.hn .hn-svc__icon img {
  display: block;
  width: auto;
  height: 48px;
  max-width: 64px;
  object-fit: contain;
}
.hn .hn-svc__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
}
.home-new-page .hn .hn-svc__title {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: var(--hn-text);
  transition: color .2s;
}
.hn .hn-svc__badges { display: flex; flex-wrap: wrap; gap: 16px; }
.hn .hn-svc__text { font-size: 18px; line-height: 23.4px; color: var(--hn-text); }
.hn .hn-svc__btns {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
}
/* Галочка «Центрировать заголовок и все элементы блока» (админка): иконка и
   кнопки и так по центру — выравниваем заголовок, плашки и подзаголовок. */
.hn .hn-svc--center .hn-svc__body { text-align: center; }
.hn .hn-svc--center .hn-svc__badges { justify-content: center; }

/* ═══ 3. О компании ═══ */
.hn .hn-about__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-top: 24px;
}
.hn .hn-about__logo { flex: 0 0 auto; width: 160px; height: 100px; object-fit: contain; }
.hn .hn-about__heading { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hn .hn-about__heading .hn-pretitle { margin: 0; }
.hn .hn-about__body {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-top: 36px;
}
.hn .hn-about__photo {
  position: relative;
  flex: 0 0 48.4%;                    /* 552 из 1140 */
  align-self: stretch;
  min-height: 459px;
  border-radius: 24px;
}
.hn .hn-about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
}
.hn .hn-about__badge {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-top: 3px solid var(--hn-green);
  border-radius: 16px;
  background: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .25));
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.hn .hn-about__badge-num {
  font-family: 'Roboto Var', 'Roboto', Arial, sans-serif;
  font-size: 49.4px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1.48px;
  color: var(--hn-green-deep);
}
.hn .hn-about__badge-text {
  font-family: 'Roboto Var', 'Roboto', Arial, sans-serif;
  font-size: 23.7px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .71px;
  color: var(--hn-text);
}
.hn .hn-about__text {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 0;
  font-size: 18px;
  line-height: 23.4px;
  color: var(--hn-text-dark);
}
.hn .hn-about__text p { margin: 0 0 32px; }
.hn .hn-about__text p:last-child { margin-bottom: 0; }

/* ═══ 4. Автопарк ═══ */
.hn .hn-fleet__box {
  padding: 32px 20px;
  border-radius: 16px;
  background: var(--hn-gray);
}
.hn .hn-fleet__box .hn-pretitle { margin-bottom: 24px; }
.hn .hn-fleet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.hn .hn-fleet__head .hn-h2 { flex: 0 0 auto; }
.hn .hn-fleet__sub {
  font-size: 18px;
  line-height: 23.4px;
  color: var(--hn-muted-2);
  text-align: right;
}
.hn .hn-car {
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--hn-border);
  border-radius: 16px;
  background: #fff;
  scroll-snap-align: start;
}
.hn .hn-car__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 91px;
  margin-top: 10px;
}
.hn .hn-car__img img { max-height: 91px; width: auto; object-fit: contain; }
.hn .hn-car__name {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--hn-green-deep);
}
.hn .hn-car__specs { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.hn .hn-car__specs > div {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--hn-border);
  line-height: 24px;
}
.hn .hn-car__specs dt {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hn-muted-2);
}
.hn .hn-car__specs dd {
  flex: 1 1 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  text-align: right;
  color: var(--hn-text);
}
.hn .hn-car__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 41px;
  margin-top: auto;
  padding: 0 24px;
  border: 0;
  border-radius: 60px;
  background: var(--hn-yellow);
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .42px;
  text-transform: uppercase;
  color: var(--hn-text);
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}
.hn .hn-car__btn:hover,
.hn .hn-car__btn:focus-visible { background: #ffd200; box-shadow: 0 4px 12px rgba(255, 201, 40, .35); }

/* Лента с прокруткой (автопарк, команда): своя полоса прокрутки — во всю
   ширину ленты, серая. Бегунок тянется мышью и пальцем, щелчок по полосе —
   прокрутка к этому месту (home_new.js). */
.hn .hn-scroller { position: relative; }
.hn .hn-scroller__track {
  display: flex;
  gap: 16px;
  padding-bottom: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.hn .hn-scroller__track::-webkit-scrollbar { display: none; }
.hn .hn-scroller.is-dragging .hn-scroller__track { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.hn .hn-scroller.is-dragging .hn-scroller__track * { user-select: none; }
.hn .hn-scroller::after {                /* мягкое затухание у правого края, пока есть что листать */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 17px;
  width: 39px;
  background: linear-gradient(to right, rgba(245, 247, 248, 0), var(--hn-fade, #f5f7f8));
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.hn .hn-scroller.has-more::after { opacity: 1; }
.hn .hn-team .hn-scroller { --hn-fade: #fff; }
.hn .hn-scroller__bar {
  position: relative;
  height: 6px;
  margin: 8px 0 0;
  border-radius: 16px;
  background: var(--hn-scroll-track);
  cursor: pointer;
  touch-action: none;                    /* палец тянет бегунок, а не страницу */
}
.hn .hn-scroller__bar::before {          /* полоса тонкая — попадать по ней проще */
  content: '';
  position: absolute;
  top: -8px;
  right: 0;
  bottom: -8px;
  left: 0;
}
.hn .hn-scroller__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  border-radius: 16px;
  background: var(--hn-scroll-thumb);
  transition: background-color .2s;
}
.hn .hn-scroller__bar:hover .hn-scroller__thumb,
.hn .hn-scroller.is-bar-drag .hn-scroller__thumb { background: var(--hn-scroll-thumb-hover); }
.hn .hn-scroller.is-static .hn-scroller__bar { display: none; }
.hn .hn-scroller.is-static .hn-scroller__track { cursor: auto; }

/* ═══ 5. География ═══ */
.hn .hn-geo .hn-wrap { padding-top: 32px; padding-bottom: 32px; }
.hn .hn-geo__head .hn-pretitle { margin-bottom: 20px; }
.hn .hn-geo__body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 48px;
}
.hn .hn-geo__left {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.hn .hn-geo__text { font-size: 18px; line-height: 23.4px; color: var(--hn-muted-2); }
.hn .hn-geo__map {
  position: relative;
  flex: 0 0 48.25%;                   /* 550 из 1140 */
  max-width: 550px;
}
.hn .hn-geo__map-img { display: block; width: 100%; height: auto; }
.hn .hn-geo__label {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hn-green);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.hn .hn-geo__label-city {
  font-size: 24.7px;
  font-weight: 700;
  line-height: 1;
  color: var(--hn-green-deep);
  white-space: nowrap;
}
.hn .hn-geo__label-cap {
  font-size: 11.8px;
  line-height: 1;
  letter-spacing: .83px;
  white-space: nowrap;
}
.hn .hn-geo__badge {
  position: absolute;
  top: 39px;
  right: 34px;
  padding: 10px;
  border-radius: 8px;
  background: #fd1d1d;
  font-family: 'Roboto Var', 'Roboto', Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Метки-ссылки (города, популярные услуги) с точкой-разделителем. */
.hn .hn-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hn .hn-tags__item { display: flex; align-items: flex-start; gap: 10px; }
.hn .hn-tags__item::after {
  content: '·';
  font-size: 14px;
  line-height: 21px;
  color: var(--hn-green-deep);
}
.hn .hn-tags__item.is-last::after { content: none; }
.hn .hn-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--hn-border);
  border-radius: 4px;
  background: var(--hn-gray);
  font-size: 18px;
  line-height: 23.4px;
  color: var(--hn-green-deep);
  text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}
.hn a.hn-tag:hover,
.hn a.hn-tag:focus-visible { border-color: var(--hn-green); color: var(--hn-green-dark); text-decoration: none; }
.hn .hn-tag--current,
.hn a.hn-tag--current:hover { border-color: var(--hn-green); background: var(--hn-green); color: #fff; }
.hn .hn-tags__more {
  align-self: center;
  font-size: 18px;
  line-height: 23.4px;
  color: var(--hn-muted-2);
}

/* ═══ 6. Калькулятор — только заголовок, сам калькулятор свой ═══ */
.home-new-page .hn .hn-calc { padding: 0; }
.home-new-page .hn .hn-calc > .container { padding-top: 0; }
.hn .hn-calc h2 { margin: 0 0 24px; }

/* ═══ 7. Команда ═══ */
.hn .hn-team .hn-wrap { padding-top: 32px; padding-bottom: 32px; }
.hn .hn-team .hn-pretitle { margin-bottom: 11px; }
.hn .hn-team__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.hn .hn-team__sub { font-size: 18px; line-height: 23.4px; color: var(--hn-muted-2); }
.hn .hn-team__list { align-items: stretch; padding-top: 24px; }
.hn .hn-person {
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  border: 1px solid var(--hn-border);
  border-radius: 16px;
  background: #fff;
  scroll-snap-align: start;
}
.hn .hn-person__photo {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
  background: #e6efe0;
}
.hn .hn-person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.hn .hn-person__photo--empty img { object-fit: contain; object-position: 50% 50%; }
.hn .hn-person__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: center;
}
.hn .hn-person__name { font-size: 18px; font-weight: 700; color: var(--hn-green-dark); }
.hn .hn-person__pos,
.hn .hn-person__phone { font-size: 14px; color: var(--hn-muted-2); }
.hn .hn-person__phone { text-decoration: none; }
.hn .hn-person__phone:hover { color: var(--hn-green-dark); text-decoration: none; }
.hn .hn-person__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-top: 13px;
}
.hn .hn-person__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid var(--hn-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--hn-muted-2);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.hn .hn-person__link img { flex: 0 0 auto; }
.hn .hn-person__link span {
  overflow: hidden;
  padding-left: 8px;
  border-left: 1px solid var(--hn-border);
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hn .hn-person__link:hover,
.hn .hn-person__link:focus-visible { border-color: var(--hn-green); color: var(--hn-green-dark); text-decoration: none; }

/* ═══ 8. Почему мы + сотрудничество + популярные услуги ═══ */
.hn .hn-why .hn-wrap { padding-top: 32px; padding-bottom: 32px; }
.hn .hn-why__head { padding-bottom: 20px; margin-bottom: 24px; }
.hn .hn-why__head .hn-pretitle { margin-bottom: 10px; }
.hn .hn-why__box {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hn-green);
  border-radius: 16px;
  background: var(--hn-green);
}
.hn .hn-why__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}
.hn .hn-why__cell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 230px;
  padding: 24px;
  background: #fff;
}
/* «Вырезы» на стыках ячеек — как в макете (радиусы 16 px у соседних углов). */
.hn .hn-why__row--top .hn-why__cell:nth-child(3n+1) { border-radius: 8px 0 16px 0; }
.hn .hn-why__row--top .hn-why__cell:nth-child(3n+2) { border-radius: 0 0 16px 16px; }
.hn .hn-why__row--top .hn-why__cell:nth-child(3n+3) { border-radius: 0 8px 0 16px; }
.hn .hn-why__row--bottom .hn-why__cell:nth-child(3n+1) { border-radius: 0 16px 0 8px; }
.hn .hn-why__row--bottom .hn-why__cell:nth-child(3n+2) { border-radius: 16px 16px 0 0; }
.hn .hn-why__row--bottom .hn-why__cell:nth-child(3n+3) { border-radius: 16px 0 8px 0; }
.hn .hn-why__num {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hn-green);
}
.hn .hn-why__cell-body { display: flex; flex-direction: column; gap: 12px; }
.hn .hn-why__cell-title { font-size: 24px; font-weight: 700; line-height: 36px; color: var(--hn-green-deep); }
.hn .hn-why__cell-text { font-size: 14px; line-height: 21px; color: var(--hn-text); }

.hn .hn-coop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 33px 32px;
  background: var(--hn-gray);
}
.hn .hn-coop__left { display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.hn .hn-coop__intro { display: flex; flex-direction: column; gap: 32px; }
.hn .hn-coop__title {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.375;
  color: var(--hn-text);
}
.hn .hn-coop__text { font-size: 18px; line-height: 23.4px; color: var(--hn-text); }
.hn .hn-coop__features { display: flex; flex-direction: column; gap: 32px; }
.hn .hn-coop__feature { display: flex; align-items: center; gap: 24px; }
.hn .hn-coop__feature img { flex: 0 0 64px; width: 64px; height: auto; }
.hn .hn-coop__feature-title { font-size: 24px; font-weight: 700; line-height: 36px; color: #000; }
.hn .hn-coop__feature-text { margin-top: 8px; font-size: 18px; line-height: 23.4px; color: #000; }

/* Форма сотрудничества — та же ContactForm, что на «Контактах». */
.hn .hn-form .form-group { margin: 0 0 20px; }
.hn .hn-form .form-control {
  height: auto;
  min-height: 49px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: var(--hn-text);
  transition: border-color .2s, box-shadow .2s;
}
.hn .hn-form textarea.form-control { min-height: 165px; resize: vertical; }
.hn .hn-form .form-control::placeholder { color: #8a8a8a; }
.hn .hn-form .form-control:focus { border-color: var(--hn-green); box-shadow: 0 0 0 3px rgba(148, 193, 33, .2); }
.hn .hn-form .has-error .form-control { border-color: #d9534f; }
.hn .hn-form .help-block { margin: 6px 0 0; font-size: 13px; }
.hn .hn-form .consent-group { margin-bottom: 8px; padding: 13px; }
.hn .hn-form .consent-label,
.hn .hn-form .hn-form__consent { font-size: 14px; line-height: 21px; color: var(--hn-text); }
.hn .hn-form .hn-form__consent a { color: var(--hn-green-dark); text-decoration: underline; }
.hn .hn-form__submit { padding: 16px; }
.hn .hn-form__submit .hn-btn { min-height: 50px; font-family: 'Roboto', Arial, sans-serif; font-size: 14px; text-transform: none; border-radius: 48px; }

.hn .hn-popular__title { padding: 32px 0; }
.hn .hn-popular .hn-tags { margin-top: 24px; }

/* ═══ 9–11. Реальные проекты, отзывы, FAQ — хабовые блоки, подгонка ═══ */
.hn .hn-projects__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}
.hn .hn-projects__head .hn-pretitle { margin: 0; }
.hn .hn-projects .hub-cases__toggle { margin-bottom: 24px; }
.hn .hn-reviews .hub-reviews__h2 { margin-bottom: 24px; }
.hn .hn-faq .hn-wrap { padding-top: 32px; padding-bottom: 48px; }
.hn .hn-faq .hn-h2 { margin-bottom: 16px; }
.hn .hn-faq.faq-hub-style .panel-group { gap: 8px; margin-top: 0; }
.hn .hn-faq.faq-hub-style .panel,
.hn .hn-faq.faq-hub-style .panel-default,
.hn .hn-faq.faq-hub-style .panel-group .panel { border-bottom-color: #ededed; }
.hn .hn-faq.faq-hub-style .panel-title {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 24px;
  line-height: 36px;
  color: var(--hn-text-dark);
}
.hn .hn-faq.faq-hub-style .panel-title > a { gap: 10px; padding: 8px 0 24px; }
/* В макете главной знак «+» справа от вопроса. */
.hn .hn-faq.faq-hub-style .panel-title > a::before { content: none; display: none; }
.hn .hn-faq.faq-hub-style .panel-title > a::after {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: auto;
  background: url('/image/home_new/ico-plus.svg') center / 24px 24px no-repeat;
  transition: transform .25s ease;
}
.hn .hn-faq.faq-hub-style .panel-title > a[aria-expanded="true"]::after,
.hn .hn-faq.faq-hub-style .panel-title > a:not(.collapsed)::after { transform: rotate(45deg); }
.hn .hn-faq.faq-hub-style .panel-body {
  padding: 0 40px 24px 0;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 18px;
  line-height: 27px;
  color: var(--hn-muted);
}

/* ═══ 12. Быстрый расчёт ═══ */
.hn .hn-cta__card {
  position: relative;
  overflow: hidden;
  min-height: 285px;
  padding: 36px;
  border: 1px solid #cbe4d4;
  border-radius: 16px;
  background: #fff;
}
.hn .hn-cta__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 660px;
}
.hn .hn-cta__card--image .hn-cta__body { max-width: calc(66.5% - 48px); }
.hn .hn-cta__body .hn-badge { margin-bottom: 4px; }
.hn .hn-cta__title {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 54px;
  color: var(--hn-text);
}
.hn .hn-cta__text {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: .18px;
  color: var(--hn-text-dark);
}
.hn .hn-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.hn .hn-cta__btn {
  min-height: 50px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
}
.hn .hn-cta__phone {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 33px;
  color: var(--hn-text);
  white-space: nowrap;
  text-decoration: none;
}
.hn .hn-cta__phone:hover { color: var(--hn-green-dark); text-decoration: none; }
.hn .hn-cta__msg { display: inline-flex; gap: 16px; }
.hn .hn-cta__art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 66.5%;                        /* картинка с 758 px из 1140 */
  overflow: hidden;
  background: #0e3b26;
}
.hn .hn-cta__art img:first-child {
  position: absolute;
  top: -42px;
  left: 0;
  width: 530px;
  max-width: none;
  height: auto;
}
.hn .hn-cta__sparkle {
  position: absolute;
  top: 19px;
  right: 51px;
  width: 39px;
  height: 39px;
}

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

/* 992–1199: контент 940 px */
@media (max-width: 1199.98px) {
  .hn .hn-h2,
  .hn .hn-calc h2 { font-size: 36px; }
  .hn .hn-hero__card { padding: 56px 28px; }
  .hn .hn-hero__title { font-size: 44px; }
  .hn .hn-hero__phone,
  .hn .hn-hero__btn { font-size: 22px; padding: 0 26px; }
  .hn .hn-svc { padding: 20px; }
  .hn .hn-svc-grid { gap: 20px; }
  .home-new-page .hn .hn-svc__title { font-size: 22px; line-height: 32px; }
  .hn .hn-why__cell-title,
  .hn .hn-coop__feature-title { font-size: 22px; line-height: 32px; }
  .hn .hn-coop__title { font-size: 34px; }
  .hn .hn-cta__title { font-size: 32px; line-height: 46px; }
}

/* Планшет: ниже 992 — шапка 71 px */
@media (max-width: 991.98px) {
  .home-new-page .hn { padding-top: 71px; }
  .home-new-page .hub.hn > section.hn-sec,
  .home-new-page .hub.hn > div.hn-calc { margin-top: 32px; }
  .hn .hn-hero .hn-wrap { padding: 0; }
  .hn .hn-hero__card { min-height: 0; padding: 48px 24px; border-radius: 0 0 24px 24px; }
  .hn .hn-hero__photo { left: 30%; }
  .hn .hn-hero__rating { right: 16px; bottom: 16px; }
  .hn .hn-hero__title { max-width: 75%; font-size: 40px; }

  .hn .hn-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hn .hn-span-t1 { grid-column: span 1; }
  .hn .hn-span-t2 { grid-column: span 2; }
  .hn .hn-svc { min-height: 0; }

  .hn .hn-about__head { padding-top: 0; }
  .hn .hn-about__logo { width: 112px; height: 70px; }
  .hn .hn-about__body { flex-direction: column; align-items: stretch; gap: 24px; }
  .hn .hn-about__photo { flex: none; min-height: 0; aspect-ratio: 552 / 459; }
  .hn .hn-about__text { padding: 0; }

  .hn .hn-fleet__head,
  .hn .hn-team__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hn .hn-fleet__sub { text-align: left; }

  .hn .hn-geo__body { flex-direction: column; gap: 32px; margin-top: 32px; }
  .hn .hn-geo__map { flex: none; width: 100%; max-width: 620px; align-self: center; }

  .hn .hn-why__cell { min-height: 0; }
  .hn .hn-coop { grid-template-columns: 1fr; gap: 32px; }
  .hn .hn-coop__left { gap: 32px; }

  .hn .hn-cta__card--image .hn-cta__body { max-width: none; }
  .hn .hn-cta__art { display: none; }
}

/* 600–767: «Почему мы» в две колонки неудобно — ряд по одной */
@media (max-width: 767.98px) {
  .hn .hn-hero__rating { display: none; }
  .hn .hn-why__row { grid-template-columns: 1fr; }
  .hn .hn-why__row .hn-why__cell { border-radius: 16px !important; }
}

/* Телефон — мобильный макет (кадр 450, поля 10 px) */
@media (max-width: 599.98px) {
  .hn .hn-wrap { padding: 0 10px; }
  .hn .hn-h2,
  .hn .hn-calc h2 { font-size: 28px; line-height: 1.25; }
  .hn .hn-lead,
  .hn .hn-geo__text,
  .hn .hn-team__sub,
  .hn .hn-fleet__sub { font-size: 18px; line-height: 23.4px; }
  .home-new-page .hub.hn > section.hn-sec,
  .home-new-page .hub.hn > div.hn-calc { margin-top: 36px; }

  .hn .hn-hero__card { padding: 64px 32px; border-radius: 24px; }
  .hn .hn-hero .hn-wrap { padding: 0; }
  .hn .hn-hero__photo { left: 0; }
  .hn .hn-hero__photo img { object-position: 10% 100%; }
  .hn .hn-hero__badges { gap: 24px; }
  .hn .hn-hero__badge { padding: 6px; font-size: 12px; line-height: 18px; }
  .home-new-page .wrap .hn .hn-hero__title,
  .hn .hn-hero__title { max-width: none; font-size: 32px; font-weight: 700; line-height: 1; }
  .hn .hn-hero__points { background: rgba(0, 0, 0, .16); }
  .hn .hn-hero__actions { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 8px; }
  .hn .hn-hero__more { gap: 8px; flex-wrap: nowrap; }
  .hn .hn-hero__phone,
  .hn .hn-hero__btn { font-size: 26px; padding: 0 32px; }
  .hn .hn-hero__btn { padding: 0 22px; }

  .hn .hn-seg-wrap { margin: 24px 0; }
  .hn .hn-seg__btn { flex: 0 1 auto; padding: 6px 12px; }
  .hn .hn-svc-grid { grid-template-columns: 1fr; }
  .hn .hn-svc-grid > .hn-svc { grid-column: span 1; }

  .hn .hn-about__head { align-items: center; gap: 12px; }
  .hn .hn-about__heading { gap: 12px; }
  .hn .hn-about__logo { width: 56px; height: 35px; }
  .hn .hn-about__badge { left: 8px; bottom: -32px; padding: 16px 20px; gap: 6px; }
  .hn .hn-about__badge-num { font-size: 40px; }
  .hn .hn-about__badge-text { font-size: 19px; }
  .hn .hn-about__photo { margin-bottom: 40px; }

  .hn .hn-fleet .hn-wrap { padding: 0 10px; }
  .hn .hn-fleet__box { padding: 32px 0 32px 0; background: var(--hn-gray); }
  .hn .hn-fleet__box > .hn-pretitle,
  .hn .hn-fleet__head { padding: 0 0 0 0; }
  .hn .hn-car,
  .hn .hn-person { flex-basis: 225px; }

  .hn .hn-geo .hn-wrap { padding-top: 0; padding-bottom: 0; }
  .hn .hn-geo__label-city { font-size: 20px; }

  .hn .hn-team .hn-wrap { padding-top: 0; padding-bottom: 0; }

  .hn .hn-why .hn-wrap { padding-top: 0; padding-bottom: 0; }
  .hn .hn-why__cell { flex-direction: row; align-items: center; gap: 20px; padding: 24px; }
  .hn .hn-why__cell-text { display: none; }                /* мобильный макет: только номер и заголовок */
  .hn .hn-coop { display: none; }                          /* мобильный макет: блока нет */
  .hn .hn-popular__title { padding: 32px 0 0; }

  .hn .hn-faq .hn-wrap { padding-top: 0; padding-bottom: 0; }
  /* Хабовый FAQ на телефоне тянет разделители к краям полями −15 px (под свой
     контейнер 15 px); у главной поля 10 px — иначе страница шире экрана на 5 px. */
  .pereezd-hub-page .hn .hn-faq.faq-hub-style .panel,
  .pereezd-hub-page .hn .hn-faq.faq-hub-style .panel-default,
  .pereezd-hub-page .hn .hn-faq.faq-hub-style .panel-group .panel {
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 10px;
    padding-right: 10px;
  }
  .hn .hn-faq.faq-hub-style .panel-title { font-size: 20px; line-height: 32px; }
  .hn .hn-faq.faq-hub-style .panel-body { padding-right: 0; font-size: 16px; line-height: 24px; }

  .hn .hn-cta__card { padding: 32px; }
  .hn .hn-cta__title { font-size: 32px; line-height: 1.5; }
  .hn .hn-cta__text { font-size: 16px; line-height: 24px; }
  .hn .hn-cta__actions { gap: 16px; }
}

/* Узкие телефоны 320–429: чуть мельче, без горизонтальной прокрутки */
@media (max-width: 429.98px) {
  .hn .hn-hero__card { padding: 40px 20px; }
  .hn .hn-hero__badges { gap: 10px; }
  .home-new-page .wrap .hn .hn-hero__title,
  .hn .hn-hero__title { font-size: 28px; }
  .hn .hn-hero__points li { font-size: 16px; line-height: 21px; }
  .hn .hn-hero__phone { height: 46px; padding: 0 20px; font-size: 21px; }
  .hn .hn-hero__btn { min-height: 46px; padding: 0 16px; font-size: 19px; }
  .hn .hn-hero__more .hn-msg { width: 46px; height: 46px; }
  .hn .hn-hero__more .hn-msg img { width: 100%; height: 100%; }
  .hn .hn-hero__more .hn-msg--tg img { width: 24px; height: 24px; }
  .home-new-page .hn .hn-svc__title { font-size: 21px; line-height: 30px; }
  .hn .hn-svc__text,
  .hn .hn-lead,
  .hn .hn-geo__text { font-size: 16px; line-height: 22px; }
  .hn .hn-badge { letter-spacing: 1.2px; }
  .hn .hn-tag,
  .hn .hn-tags__more { font-size: 16px; line-height: 21px; }
  .hn .hn-why__num { font-size: 32px; }
  .hn .hn-why__cell-title { font-size: 20px; line-height: 28px; }
  .hn .hn-cta__card { padding: 24px 20px; }
  .hn .hn-cta__title { font-size: 26px; }
  .hn .hn-cta__phone { font-size: 20px; }
  .hn .hn-about__badge-num { font-size: 34px; }
  .hn .hn-about__badge-text { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hn .hn-svc,
  .hn .hn-btn,
  .hn .hn-msg,
  .hn .hn-scroller__track,
  .hn .hn-faq.faq-hub-style .panel-title > a::after { transition: none; scroll-behavior: auto; }
}