/* =========================================================
   Главная страница — перевёрстана по макету «Главная 1»
   (Figma node 1:17919, 1920×6616: шесть экранов по 1080 + подвал 136)

   Собственное пространство имён hp-*, чтобы не пересекаться
   со старыми правилами главной в style.css. Шапка, подвал и
   боковой навигатор остаются общими компонентами.
   ========================================================= */

.hp{
  /* экран = высота вьюпорта: каждый блок занимает ровно один экран.
     Нижняя граница 680px защищает вёрстку на очень низких окнах. */
  --hp-screen: max(680px, 100vh);
  --hp-pad: 60px;
  --hp-red: #cd1f26;
  --hp-ink: #333;
}
@supports (height: 100svh){
  .hp{ --hp-screen: max(680px, 100svh); }
}

/* Постраничное перелистывание реализовано в js/home.js (wheel + клавиши);
   CSS scroll-snap не используется — он конфликтует со scrollTo-анимацией. */

/* Кнопка-«таблетка» из макета (node I1:23545;2112:1496):
   высота 48, радиус 8, 14/24 паддинги, Inter Medium 14/20, стрелка 10px */
.hp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:48px;
  padding:14px 24px;
  border:1px solid var(--hp-red);
  border-radius:8px;
  background:var(--hp-red);
  color:#fff;
  font-family:'Inter',Arial,sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  white-space:nowrap;
  transition: background .2s, border-color .2s;
}
/* Ховер по макету «при наведении» (node 1:11340): красная кнопка
   инвертируется — белый фон, красные рамка/текст/стрелка */
.hp-btn:hover{ background:#fff; color:var(--hp-red); }
.hp-btn__arrow{ width:10px; height:10px; flex-shrink:0; transform:scaleY(-1); transition:filter .2s; }
/* белая стрелка -> #CD1F26 */
.hp-btn:hover .hp-btn__arrow{
  filter:brightness(0) saturate(100%) invert(16%) sepia(85%) saturate(5300%) hue-rotate(352deg) brightness(93%) contrast(96%);
}

/* ============================================================
   ЭКРАН 1 — Герой (node 1:23015)
   ============================================================ */
.hp-hero{
  position:relative;
  min-height:var(--hp-screen);
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.hp-hero__bg{
  position:absolute; inset:0; z-index:-2;
  /* Фон первого экрана — самый тяжёлый файл на сайте, поэтому отдаём его
     в трёх вариантах, а браузер скачивает ровно один:
       1x webp  1920x1440  468 КБ — обычные экраны, попадание 1:1 на 1920;
       2x webp  3072x2304  659 КБ — retina, иначе фон выглядел бы мягче;
       jpg      1920x1440  753 КБ — те, кто не понимает webp.
     Первая строка нужна браузерам без image-set(): они оставят её,
     поддерживающие перезапишут строкой ниже. Исходник был 4096x3072 —
     на макетных разрешениях (до 1920) такой запас не виден, при
     background-size:cover разницы на глаз нет. */
  background:url('../assets/img/hero-bg.jpg') center/cover no-repeat;
  background-image:image-set(
    url('../assets/img/hero-bg.webp') type('image/webp') 1x,
    url('../assets/img/hero-bg@2x.webp') type('image/webp') 2x,
    url('../assets/img/hero-bg.jpg') type('image/jpeg') 1x);
}
.hp-hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:rgba(0,0,0,.3);
}

/* Колонки-разделители: 4 по 384px и пятая 238px (node 1:23238…1:23242).
   Подпись прижата к низу: padding-bottom 400px от низа экрана. */
.hp-hero__cols{
  position:absolute; inset:0;
  z-index:1;               /* колонка при наведении перекрывает герб и заголовок */
  display:flex;
  align-items:stretch;
}
.hp-hero__col{
  position:relative;
  overflow:hidden;         /* как во фрейме макета: содержимое панели обрезается по колонке */
  container-type:inline-size;   /* панель ужимается по ширине самой колонки */
  flex:0 0 384px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:100px;
  /* 400px от низа при 1080 -> 37% высоты экрана */
  padding:40px 0 calc(var(--hp-screen) * .37);
  border-right:1px solid rgba(255,255,255,.4);
}
/* Пятая колонка — последняя на экране: базовая ширина 238px из макета,
   но она забирает весь остаток до правого края (иначе полоса 1774…1920px
   выглядит как ещё одна колонка, особенно когда на ховере фото
   обрывается на 1774px). Разделителей поэтому четыре, а не пять. */
.hp-hero__col:last-child{ flex:1 0 238px; border-right:0; }
.hp-hero__label{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:20px;
  padding-right:20px;
  width:100%;
  transition:opacity .45s cubic-bezier(.33,0,.2,1), transform .45s cubic-bezier(.33,0,.2,1);
}
.hp-hero__marker{
  flex-shrink:0;
  width:15px; height:30px;
  background:var(--hp-red);
}
/* только текстовый span: раньше правило захватывало и маркер,
   а flex:1 0 0 перебивало его ширину 15px и растягивало прямоугольник */
.hp-hero__label span:last-child{
  flex:1 0 0;
  min-width:0;
  font-size:18px;
  font-weight:400;
  line-height:1.4;
  color:#fff;
}

/* ------------------------------------------------------------------
   Колонка при наведении (макет «Главная 1 при наведении», node 1:11340;
   компонент Background / Variant2, node 1:9426).
   Колонка получает собственное фото + затемнение rgba(0,0,0,.4),
   нижняя подпись уходит, сверху (140px) появляется заголовок 36px
   и стопка «стеклянных» карточек со статистикой.
   ------------------------------------------------------------------ */
.hp-hero__col-bg{
  position:absolute; inset:0; z-index:0;
  opacity:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:opacity .7s cubic-bezier(.33,0,.2,1);
  pointer-events:none;
}
.hp-hero__col-bg::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,.4);
}
.hp-hero__col[data-col="rating"]    .hp-hero__col-bg{ background-image:url('../assets/img/hero-col-rating.jpg'); background-image:image-set(url('../assets/img/hero-col-rating.webp') type('image/webp'), url('../assets/img/hero-col-rating.jpg') type('image/jpeg')); }
.hp-hero__col[data-col="activity"]  .hp-hero__col-bg{ background-image:url('../assets/img/hero-col-activity.jpg'); background-image:image-set(url('../assets/img/hero-col-activity.webp') type('image/webp'), url('../assets/img/hero-col-activity.jpg') type('image/jpeg')); }
.hp-hero__col[data-col="geography"] .hp-hero__col-bg{ background-image:url('../assets/img/hero-col-geography.jpg'); background-image:image-set(url('../assets/img/hero-col-geography.webp') type('image/webp'), url('../assets/img/hero-col-geography.jpg') type('image/jpeg')); }
.hp-hero__col[data-col="economy"]   .hp-hero__col-bg{ background-image:url('../assets/img/hero-col-economy.jpg'); background-image:image-set(url('../assets/img/hero-col-economy.webp') type('image/webp'), url('../assets/img/hero-col-economy.jpg') type('image/jpeg')); }
.hp-hero__col[data-col="business"]  .hp-hero__col-bg{ background-image:url('../assets/img/hero-col-business.jpg'); background-image:image-set(url('../assets/img/hero-col-business.webp') type('image/webp'), url('../assets/img/hero-col-business.jpg') type('image/jpeg')); }

/* Панель со статистикой: абсолютная, чтобы подпись внизу не «прыгала» */
.hp-hero__panel{
  position:absolute;
  left:0; right:0; top:140px;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:40px;
  padding:0 30px;
  /* ВАЖНО: на панели-родителе opacity не анимируется — прозрачность
     предка отключает backdrop-filter у карточек (Chromium), и размытие
     «доклеивалось» после фейда. Панель двигается и скрывается,
     а прозрачность анимируют сами карточки и заголовок. */
  visibility:hidden;
  transform:translateY(24px);
  transition:transform .55s cubic-bezier(.33,0,.2,1), visibility 0s linear .55s;
  pointer-events:none;
}
.hp-hero__panel-title,
.hp-hero__panel .hp-hero__stat{
  opacity:0;
  transition:opacity .55s cubic-bezier(.33,0,.2,1);
}
/* ВАЖНО: :hover вынесен в отдельное правило и не смешан с :focus-visible.
   Если браузер не понимает какой-то селектор в списке, он отбрасывает
   ВСЁ правило целиком — при объединении панели не появлялись бы вообще. */
.hp-hero__col.is-hover .hp-hero__panel-title,
.hp-hero__col.is-hover .hp-hero__stat,
.hp-hero__col:hover .hp-hero__panel-title,
.hp-hero__col:hover .hp-hero__stat{
  opacity:1;
}
.hp-hero__col:focus-within .hp-hero__panel-title,
.hp-hero__col:focus-within .hp-hero__stat{
  opacity:1;
}
.hp-hero__col:focus-visible .hp-hero__panel-title,
.hp-hero__col:focus-visible .hp-hero__stat{
  opacity:1;
}
.hp-hero__panel-title{
  margin:0;
  font-weight:300;
  font-size:36px;
  line-height:1.2;
  text-align:center;
  color:#fff;
}
.hp-hero__stats{
  display:flex;
  flex-direction:column;
  gap:20px;
}
/* Карточка Overlay+Border+OverlayBlur — та же «стеклянная» рецептура,
   что и у карточки новостей героя (node 1:9433) */
.hp-hero__stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:21px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  background:rgba(0,0,0,.3);
  /* плашки появляются сразу размытыми — плавность даёт фейд самой панели */
  backdrop-filter:blur(12.5px);
  -webkit-backdrop-filter:blur(12.5px);
}
.hp-hero__stat-value{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  color:#fff;
  white-space:nowrap;
}
.hp-hero__stat-num{
  font-weight:100;
  font-size:82px;
  line-height:.72;          /* в Figma line-height 96px обрезан по капители */
  letter-spacing:-5px;
  margin-right:-5px;        /* компенсация трекинга после последнего знака */
  text-align:center;
}
.hp-hero__stat-unit{
  font-weight:200;
  font-size:36px;
  line-height:1;
}
.hp-hero__stat-cap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}
.hp-hero__stat-dot{
  flex-shrink:0;
  width:6px; height:6.4px;
}
.hp-hero__stat-cap span{
  font-weight:300;
  font-size:20px;
  line-height:1.4;
  text-align:center;
  color:#fff;
}

/* Собственно ховер / фокус с клавиатуры.
   Каждый селектор — своим правилом (см. пояснение выше). */
.hp-hero__col.is-hover .hp-hero__col-bg,
.hp-hero__col:hover .hp-hero__col-bg{ opacity:1; }
.hp-hero__col:focus-within .hp-hero__col-bg{ opacity:1; }
.hp-hero__col:focus-visible .hp-hero__col-bg{ opacity:1; }

.hp-hero__col.is-hover .hp-hero__panel,
.hp-hero__col:hover .hp-hero__panel{
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.hp-hero__col:focus-within .hp-hero__panel{
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.hp-hero__col:focus-visible .hp-hero__panel{
  visibility:visible;
  transform:none;
  transition-delay:0s;
}

.hp-hero__col.is-hover .hp-hero__label,
.hp-hero__col:hover .hp-hero__label{
  opacity:0;
  transform:translateY(12px);
}
.hp-hero__col:focus-within .hp-hero__label{
  opacity:0;
  transform:translateY(12px);
}
.hp-hero__col:focus-visible .hp-hero__label{
  opacity:0;
  transform:translateY(12px);
}

/* Пятая колонка тянется до правого края, поэтому её ширина зависит от экрана:
   на 1920px она те же 384px, а ближе к 1774px сужается до 238px из макета.
   Кегль ужимаем по фактической ширине колонки, а не по ширине окна. */
@container (max-width: 330px){
  .hp-hero__panel{ padding:0 20px; }
  .hp-hero__panel-title{ font-size:30px; }
  .hp-hero__stat{ padding:18px; gap:16px; }
  .hp-hero__stat-num{ font-size:60px; letter-spacing:-3px; margin-right:-3px; }
  .hp-hero__stat-unit{ font-size:26px; }
  .hp-hero__stat-cap span{ font-size:16px; }
}
@container (max-width: 260px){
  .hp-hero__panel-title{ font-size:24px; }
  .hp-hero__stat-num{ font-size:50px; }
  .hp-hero__stat-unit{ font-size:22px; }
  .hp-hero__stat-cap span{ font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  .hp-hero__col-bg,
  .hp-hero__panel,
  .hp-hero__label{ transition-duration:.01ms; }
  .hp-hero__panel{ transform:none; }
}

/* Герб + заголовок (node 1:23162): блок 827px по центру, сверху 191px */
.hp-hero__center{
  position:absolute;
  top:calc(var(--hp-screen) * .177);   /* 191px при 1080 */
  left:50%;
  transform:translateX(-50%);
  width:827px;
  /* герб/заголовок не перехватывают курсор — иначе колонки под ними
     не получают :hover (в макете панель колонки перекрывает заголовок) */
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40.3px;
}
.hp-hero__logo{ width:157.15px; height:178.58px; }
.hp-hero__title{
  margin:0;
  font-weight:300;
  font-size:57.14px;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}

/* Карточка новости (node 1:23540) */
.hp-hero__news{
  position:absolute;
  z-index:2;               /* остаётся кликабельной поверх колонок */
  left:1566px;
  top:auto;
  bottom:calc(var(--hp-screen) * .039);   /* 42px от низа при 1080 */
  width:324px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding:21px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(12.5px);
  -webkit-backdrop-filter:blur(12.5px);
}
.hp-hero__news h2{
  margin:0;
  font-weight:300;
  font-size:20px;
  line-height:1.4;
  color:#fff;
}
.hp-hero__news-item{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}
.hp-hero__news-date{
  font-weight:300;
  font-size:12px;
  line-height:1.4;
  color:rgba(255,255,255,.5);
}
.hp-hero__news-text{
  font-weight:300;
  font-size:14px;
  line-height:1.4;
  color:#fff;
}
/* По макету ховера: текст остаётся белым и подчёркивается */
.hp-hero__news-text:hover{ text-decoration:underline; }
.hp-hero__news h2:hover{ text-decoration:underline; cursor:pointer; }
.hp-hero__news .hp-btn{ align-self:flex-start; }

/* ============================================================
   ЭКРАН 2 — Инвестируйте в Республику Крым (node 1:22277)
   ============================================================ */
.hp-invest{
  position:relative;
  min-height:var(--hp-screen);
  display:flex;
  flex-direction:column;
  background:#f8fafc;
  overflow:hidden;
}
/* Герб-подложка: object-contain, прозрачность 4% (node 1:22278) */
.hp-invest__watermark{
  position:absolute; inset:0;
  z-index:0;
  background:url('../assets/img/coa-watermark.png') center/contain no-repeat;
  background-image:image-set(url('../assets/img/coa-watermark.webp') type('image/webp'), url('../assets/img/coa-watermark.png') type('image/png'));
  opacity:.04;
  pointer-events:none;
}
/* Фото Главы (node 1:22641): левый край уходит за границу экрана */
.hp-invest__photo{
  position:absolute;
  left:-24px;
  /* фото прижато к плашке «Возникли трудности…» (высота 186px),
     на низких экранах пропорционально ужимается */
  top:auto;
  bottom:186px;
  width:1198px;
  height:min(679px, calc(var(--hp-screen) - 420px));
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
/* Снимок подготовлен ровно под рамку макета (1198×679, прозрачный фон),
   поэтому просто заполняет её без смещений и обрезки */
.hp-invest__photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left bottom;
}

.hp-invest__inner{
  position:relative;
  z-index:2;
  /* 1 1 auto: полоса «Возникли трудности…» занимает нижние 186px экрана,
     содержимое забирает остаток (895px по макету) */
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:40px;
  padding:40px var(--hp-pad);
}
/* Место, которое в макете занимает шапка (node 1:22417) */
.hp-invest__header-space{ height:70px; flex-shrink:0; }

.hp-invest__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.hp-invest__title{
  margin:0;
  font-weight:300;
  font-size:48px;
  line-height:1;
  color:var(--hp-ink);
  white-space:nowrap;
}

.hp-invest__body{
  flex:1 0 0;
  min-height:0;
  display:flex;
  gap:40px;
  align-items:flex-start;
  justify-content:flex-end;
}
.hp-invest__col{
  width:1169px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:40px;
  padding-top:40px;
}
.hp-invest__quote{
  margin:0;
  width:100%;
  font-weight:300;
  font-size:40px;
  line-height:1.5;
  text-align:right;
  color:var(--hp-ink);
}
.hp-invest__sign{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:40px;
  width:100%;
}
.hp-invest__author{
  font-weight:500;
  font-size:18px;
  color:var(--hp-ink);
  white-space:nowrap;
}

/* Полоса «Возникли трудности…» (node 1:22643): высота 186 = 45+96+45 */
.hp-help{
  position:relative;
  z-index:3;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 49 + 87 + 49 + 1px рамки = 186px, как у фрейма в макете */
  padding:49px var(--hp-pad);
  background:#fff;
  border-top:1px solid #b1b1b1;
}
.hp-help__inner{
  flex:1 0 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.hp-help__text{
  display:flex;
  flex-direction:column;
  gap:14.5px;
  width:1031px;
  color:var(--hp-ink);
}
.hp-help__text h2{
  margin:0;
  font-weight:500;
  font-size:32px;
  line-height:normal;
}
.hp-help__text p{
  margin:0;
  font-weight:400;
  font-size:26px;
  line-height:normal;
  white-space:nowrap;
}
.hp-help__right{
  display:flex;
  align-items:flex-start;
  gap:0;
  flex-shrink:0;
}
/* Кнопка «Написать» — синяя госуслуговская (node 1:22650) */
.hp-help__btn{
  display:flex;
  align-items:center;
  padding:28.5px 54.4px 29.5px;
  border-radius:12.08px;
  background:#0d4cd3;
  color:#fff;
  font-weight:600;
  font-size:24.17px;
  line-height:normal;
  white-space:nowrap;
  transition:background .2s;
}
.hp-help__btn:hover{ background:#0a3daf; }
/* Логотип «Госуслуги. Решаем вместе» — SVG из макета (node 1:22652):
   бокс 217.5×82.17, сам логотип 181.25×49.43 с отступом слева 36.25 */
.hp-help__gosuslugi{
  display:block;
  width:181.25px;
  height:auto;
  margin:16.4px 0 16.4px 36.25px;
}
/* Декоративная иллюстрация (node 1:22673) */
.hp-help__art{
  position:absolute;
  left:calc(50% + 304px);
  top:calc(50% - 3px);
  width:142px; height:143px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* ============================================================
   ЭКРАН 3 — Инвестиционные предложения (node 1:21072)
   Раскладка по вертикали: 150 → заголовок 88 → 39 → фильтры 50
   → 39,5 → карточки 424,5 → 43,5 → кнопка 48 → 40 → плашка 120
   ============================================================ */
.hp-offers{
  position:relative;
  min-height:var(--hp-screen);
  display:flex;
  flex-direction:column;
  /* 36,5 снизу: строка заголовка округляется до 89px вместо 88, из-за чего
     экран выходил на 1081px */
  padding:150px 0 36.5px;
  background:var(--navy);
  color:#fff;
}
.hp-offers__head{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 var(--hp-pad);
}
.hp-offers__head h2{
  margin:0;
  font-weight:400;
  font-size:48px;
  line-height:normal;
  color:#fff;
}
.hp-offers__head p{
  margin:0;
  font-weight:400;
  font-size:18px;
  line-height:20px;
  color:#fff;
}

/* Полоса фильтров (node I1:21916;2139:4518) */
.hp-offers__filters{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  height:50px;
  margin-top:39px;
  padding:0 var(--hp-pad);
}
/* Обёртка ленты чипов (её создаёт js/responsive.js для стрелок/затухания
   на мобильных, но элемент есть на всех разрешениях). Без этого правила
   обёртка — обычный блок и меряется по контенту (max-content), из-за чего
   .hp-industry выталкивало за правый край ряда фильтров. flex:1 1 0
   забирает весь остаток строки после фикс-ширины .hp-industry (191px);
   min-width:0 разрешает сжатие ниже контента. На ≤844, где .hp-offers__filters
   становится колонкой, это правило сбрасывается обратно (см. media). */
.hp-offers__chips-row{
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
}
.hp-offers__chips{
  display:flex;
  flex:1 1 0;
  min-width:0;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  /* Затухание у краёв ленты. Раньше поверх вкладок клали полоску с
     градиентом до цвета фона — на белой вкладке она читалась серым
     пятном с заметной кромкой. Здесь вместо накладки маска: сама
     вкладка становится прозрачной и растворяется в фоне, границе
     взяться неоткуда. Ширину затухания включают правила разрешений
     через --fade-l / --fade-r; по умолчанию 0 — маска ничего не режет. */
  --fade-l:0px;
  --fade-r:0px;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image:linear-gradient(90deg,
    transparent 0, #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)), transparent 100%);
}
.hp-offers__chips::-webkit-scrollbar{ display:none; }
.hp-chip{
  flex-shrink:0;
  display:flex;
  align-items:center;
  height:48px;
  padding:14px;
  border:none;
  border-radius:8px;
  background:#fff;
  color:#222;
  font-family:'Inter',Arial,sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:20px;
  text-align:center;
  white-space:nowrap;
  transition: background .2s, color .2s;
}
/* По макету ховера: чип заливается красным */
.hp-chip:hover{ background:var(--hp-red); color:#fff; }
.hp-chip.is-active{
  height:50px;
  background:var(--hp-red);
  color:#fff;
}
/* Выпадающий список «Отрасль» (node I1:21916;2517:16032) */
.hp-industry{ position:relative; width:191px; flex-shrink:0; }
.hp-industry__btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:48px;
  padding:15px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:#222;
  font-family:'Inter',Arial,sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:20px;
  white-space:nowrap;
}
.hp-industry__label{ display:flex; align-items:center; gap:8px; }
.hp-industry__funnel{ width:13px; height:12px; flex-shrink:0; }
.hp-industry__chev{ width:12px; height:12px; flex-shrink:0; transition:transform .2s; }
.hp-industry.open .hp-industry__chev{ transform:rotate(180deg); }
.hp-industry__list{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:100%;
  display:none;
  flex-direction:column;
  padding:8px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  z-index:20;
}
.hp-industry.open .hp-industry__list{ display:flex; }
.hp-industry__list button{
  padding:8px 10px;
  border:none;
  border-radius:6px;
  background:none;
  color:#222;
  font-size:14px;
  text-align:left;
  white-space:nowrap;
}
/* По макету ховера: пункт списка краснеет без подложки */
.hp-industry__list button:hover{ color:var(--hp-red); }

/* Карусель карточек (node I1:21916;2162:2269;2139:4528) */
.hp-offers__carousel{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:39.5px;
  padding:0 var(--hp-pad);
}
.hp-offers__nav{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border:1px solid rgba(51,51,51,.1);
  border-radius:50px;
  background:#fff;
  color:#333;
  transition: background .2s;
}
.hp-offers__nav:hover{ background:#fff; }
.hp-offers__nav svg{ width:7px; height:12px; }
.hp-offers__nav.next svg{ transform:rotate(180deg); }
.hp-offers__track{
  flex:1 1 0;
  min-width:0;
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.hp-offers__track::-webkit-scrollbar{ display:none; }

/* Карточка проекта (node …;2137:1616) */
.hp-card{
  flex:1 0 316.8px;
  min-width:0;
  display:flex;
  flex-direction:column;
  /* 426 из макета (узел 1:41045): кадр 192 + поле 20 + заголовок 75 +
     отступ 16 + три строки свойств 101 + поле 20 + рамки 2.
     Было 424,5 — на три пикселя меньше содержимого, и нижнее поле
     под последней строкой срезалось до 18 вместо макетного 21. */
  height:426px;
  border:1px solid #f1f5f9;
  border-radius:20px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  overflow:hidden;
}
.hp-card__media{
  position:relative;
  flex-shrink:0;
  height:192px;
  background:#f1f5f9;
}
.hp-card__media img{
  width:100%; height:100%;
  object-fit:cover;
}
.hp-card__tag{
  position:absolute;
  left:12px; top:12px;
  padding:5px 11px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  color:var(--hp-ink);
  font-weight:500;
  font-size:10px;
  line-height:15px;
  letter-spacing:.25px;
  text-transform:uppercase;
  white-space:nowrap;
}
.hp-card__body{
  display:flex;
  flex-direction:column;
  padding:20px;
}
.hp-card__title{
  margin:0 0 16px;
  height:75px;
  overflow:hidden;
  font-weight:500;
  font-size:18px;
  line-height:24.75px;
  letter-spacing:-.45px;
  color:var(--hp-ink);
  transition:color .2s;
}
/* По макету ховера: заголовок карточки краснеет и подчёркивается */
.hp-card__title:hover{ color:var(--hp-red); text-decoration:underline; cursor:pointer; }
.hp-card__rows{
  display:flex;
  flex-direction:column;
  gap:11.5px;
}
.hp-card__row{
  display:flex;
  align-items:center;
  gap:10px;
  /* 8 + рамка 1 = 9 по макету: строка целиком 29, а не 30 */
  padding-bottom:8px;
  border-bottom:1px solid #f8fafc;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:#555;
}
.hp-card__row:last-child{ border-bottom:none; padding-bottom:0; line-height:1; }
/* Иконки строк — SVG из макета (fi_747340, fi_8833828, fi_5705109, fi_8695121) */
.hp-card__row img{ width:18px; height:18px; flex-shrink:0; }

.hp-offers__all{
  display:flex;
  justify-content:center;
  margin-top:43.5px;
}

/* Плашка «Поможем подобрать площадку» (node 1:21925) */
.hp-offers__cta{
  position:relative;
  margin-top:40px;
  padding:0 var(--hp-pad);
}
.hp-offers__cta-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  height:119.5px;
  padding:48px 40px;
  border-radius:20px;
  background:#1666b0;
  box-shadow:0 8px 10px -6px rgba(0,0,0,.1);
  overflow:hidden;
}
.hp-offers__cta-box p{
  margin:0;
  font-weight:600;
  font-size:30px;
  line-height:36px;
  color:#fff;
  white-space:nowrap;
}
/* Подложки лежат в слое позиционированных элементов, поэтому текст и кнопку
   тоже поднимаем туда — иначе они окажутся под картинкой */
.hp-offers__cta-box p,
.hp-offers__cta-box .hp-btn,
.hp-success__cta-box p,
.hp-success__cta-box .hp-btn{ position:relative; }

/* Декоративный вензель справа (node 1:21928): 129×166 в позиции x=1633, y=-23.5
   от левого верхнего угла плашки — выступает за её края и обрезается скруглением */
.hp-cta__art{
  position:absolute;
  top:-23.5px;
  right:38px;      /* 1800 − 1633 − 129 */
  width:129px;
  height:166px;
  pointer-events:none;
}

/* Фотография-подложка плашки «Станьте инвестором» (node 1:18874):
   в макете кадр лежит поверх синей заливки в режиме Luminosity на 10% —
   группа при этом с blend mode Pass through, то есть смешивается прямо
   с заливкой плашки, без отдельного слоя-изолятора */
.hp-cta__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.1;
  mix-blend-mode:luminosity;
  pointer-events:none;
}

/* ============================================================
   ЭКРАН 4 — Государственная поддержка (node 1:19833)
   150 → контент 1800×868 (слева 1328, зазор 40, панель 432) → 62
   ============================================================ */
.hp-support{
  min-height:var(--hp-screen);
  padding:150px var(--hp-pad) 62px;
  background:#f8fafc;
}
.hp-support__inner{
  display:flex;
  gap:40px;
  /* stretch: панель навигатора тянется до низа сетки карточек (740px) */
  align-items:stretch;
  max-width:1800px;
  margin:0 auto;
}
.hp-support__main{ flex:1 1 0; min-width:0; }
.hp-support__head{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:88px;
}
.hp-support__head h2{
  margin:0;
  font-weight:300;
  font-size:48px;
  line-height:normal;
  color:var(--hp-ink);
}
.hp-support__head p{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:20px;
  color:var(--hp-ink);
}
.hp-support__grid{
  display:grid;
  /* minmax(0,1fr), а не 1fr: у 1fr нижняя граница — min-content, и колонка
     не может стать уже самой длинной строки внутри карточки. Из-за этого
     на промежуточных ширинах сетка раздувалась шире своего контейнера,
     колонки выходили разной ширины (492 и 549 при 1440) и правый столбец
     наезжал на плашку навигатора. С нулевым минимумом колонки всегда
     равны и всегда помещаются, а перенос берут на себя блоки внутри. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* оба ряда одной высоты: без этого нижний ряд короче верхнего на
     10-12px, потому что текста в нём меньше */
  grid-auto-rows:1fr;
  gap:20px;
  margin-top:40px;
}

/* Карточка меры поддержки (node 1:20306) */
.hp-supcard{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  min-height:360px;
  /* В макете паддинг 41, но текстовые блоки в браузере выше фигмовских
     (там включён text-box-trim) и карточка вырастала до 378px, ломая сетку
     экрана в 1080. 32px возвращают карточку к 360px. */
  padding:32px;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:#fff;
}
.hp-supcard__head{
  display:flex;
  align-items:center;
  gap:14px;
}
.hp-supcard__head h3{
  flex:1 0 0;
  min-width:0;
  margin:0;
  font-weight:500;
  font-size:24px;
  line-height:1.4;
  color:#000002;
  transition:color .2s;
}
/* По макету ховера: заголовок карточки поддержки краснеет */
.hp-supcard__head h3:hover{ color:var(--hp-red); cursor:pointer; }
/* и вся карточка приподнимается тенью (макет наведения, узел 1:14549).
   Тень снята с макета по пикселям: рамка рендера шире карточки ровно на
   25px с каждой стороны, значит смещения нет; затемнение фона #f8fafc
   падает с 22/248 у самой кромки до нуля к 20px — это ровно
   0 0 20px rgba(0,0,0,.18) (совпадение по всем контрольным точкам:
   1px — 22, 5px — 12, 8px — 9, 12px — 5, 16px — 2). */
.hp-supcard{ transition:box-shadow .25s ease; }
.hp-supcard:hover{ box-shadow:0 0 20px rgba(0,0,0,.18); }
.hp-supcard__icon{ flex-shrink:0; width:48px; height:48px; color:var(--hp-red); }
.hp-supcard__body{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:20px;
  /* Когда текстовая колонка и счётчик перестают помещаться в строку,
     счётчик уходит под неё, а не выдавливает карточку по ширине.
     На широких окнах перенос не срабатывает — вид прежний. */
  flex-wrap:wrap;
}
.hp-supcard__col{
  /* база 260 (кнопка 230 + запас), а не 0: при нулевой базе строка
     никогда не переносится, и вместо переноса контент вылезал за поля */
  flex:1 1 260px;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.hp-supcard__desc{
  margin:0;
  max-width:400px;
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  color:var(--hp-ink);
}
.hp-supcard__list{
  margin:0;
  padding-left:21px;
  list-style:disc;
  font-weight:300;
  font-size:14px;
  line-height:1.4;
  color:var(--hp-ink);
}
.hp-supcard__list li + li{ margin-top:5px; }
.hp-supcard__col .hp-btn{ align-self:flex-start; }
/* Подпись кнопки не всегда помещается в узкую карточку: в слайдере
   601-844 карточка 300px, поля съедают 48, а «Подать инвестиционный
   проект» — 294. У .hp-btn глобально стоит nowrap, и текст вылезал за
   скруглённый угол карточки. Здесь разрешаем перенос: подпись уходит
   на вторую строку, кнопка вырастает по высоте. Там, где строка
   помещается (от планшета и шире), вид прежний. */
.hp-supcard .hp-btn{
  height:auto;
  min-height:48px;
  /* 13, а не 14: у .hp-btn высота 48 задана жёстко и поля внутрь не
     складываются. При height:auto высота считается как строка 20 +
     поля + рамка 2, и с 14 получалось бы 50 — кнопка стала бы на два
     пикселя выше прежней. С 13 однострочная кнопка ровно 48. */
  padding-top:13px;
  padding-bottom:13px;
  white-space:normal;
  text-align:center;
}
.hp-supcard__stat{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:20px;
  color:#0057a8;
}
.hp-supcard__num{
  font-weight:200;
  font-size:64px;
  line-height:96px;
  letter-spacing:-5px;
  text-align:right;
  /* число не переносим никогда, а подпись под ним — можно: раньше
     nowrap стоял на всём блоке, и подпись в одну строку задавала
     карточке минимальную ширину под 460px */
  white-space:nowrap;
}
.hp-supcard__cap{
  font-weight:300;
  font-size:20px;
  line-height:1.4;
}

/* Навигатор мер поддержки (node 1:20495) */
.hp-navigator{
  position:relative;
  flex:0 0 432px;
  display:flex;
  flex-direction:column;
  gap:40px;
  margin-top:128px;
  padding:40px;
  border-radius:20px;
  background:#1666b0;
  overflow:hidden;
  color:#fff;
}
/* Водяной знак-герб — точно как в макете (node 1:14738):
   блендинг Pass through (normal), opacity 10%,
   left 33.73% / top 21.84%, размер 132.67% x 88.01% */
.hp-navigator__watermark{
  position:absolute;
  left:33.73%; top:21.84%;
  width:132.67%; height:88.01%;
  max-width:none;      /* глобальный img{max-width:100%} обрезал ширину кадра */
  opacity:.1;
  object-fit:contain;
  pointer-events:none;
}
.hp-navigator__head{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hp-navigator__head h2{
  margin:0;
  font-weight:300;
  font-size:40px;
  line-height:normal;
  color:#fff;
}
.hp-navigator__head p{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  color:#fff;
}
.hp-navigator__form{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.hp-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:15px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:var(--hp-ink);
  font-family:'Inter',Arial,sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:20px;
  text-align:left;
  white-space:nowrap;
}
/* Подпись поля ужимается многоточием, а не выталкивает шеврон за
   скруглённый край: на узких телефонах (320) «Количество рабочих мест»
   не помещалось, и стрелка вылезала из поля на 17px. */
.hp-field > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.hp-field svg{ width:12px; height:12px; flex-shrink:0; }
.hp-navigator__group{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.hp-navigator__group > span{
  font-weight:600;
  font-size:18px;
  line-height:20px;
  color:#fff;
}
.hp-navigator__range{
  display:flex;
  align-items:center;
  gap:10px;
}
.hp-navigator__range .hp-field{ flex:1 0 0; min-width:0; }
/* поля «от/до» — текстовые инпуты */
input.hp-field{ appearance:none; }
input.hp-field::placeholder{ color:var(--hp-ink); opacity:1; }
input.hp-field:focus{ border-color:#1666b0; }
.hp-navigator__dash{
  font-weight:400;
  font-size:16px;
  line-height:20px;
  color:#fff;
}
.hp-navigator .hp-btn{
  width:100%;
  /* как и в карточках поддержки: на узком экране подпись переносится,
     а не выталкивает стрелку за скруглённый край кнопки (на 320
     «Посмотреть все меры поддержки» вылезала на 7px) */
  height:auto;
  min-height:48px;
  padding-top:13px;
  padding-bottom:13px;
  white-space:normal;
  text-align:center;
}

/* ============================================================
   ЭКРАН 5 — Инвестиционная карта (node 1:23886)
   Карта на всю площадь, поверх — градиент и панели слева
   ============================================================ */
.hp-map{
  position:relative;
  min-height:var(--hp-screen);
  overflow:hidden;
  /* Карта по центру и заполняет экран (cover): пустого места по краям нет
     ни при каком соотношении сторон — вместо полей подрезается внешнее
     поле моря. Картинка 2880×1620 (та же рамка, что в макете, но в 1.5×),
     поэтому на больших экранах остаётся резкой. */
  /* По вертикали кадр смещён к югу: на широких экранах cover режет
     сверху и снизу, и при центрировании за кадр уходили Севастополь и
     Ялта — сверху же обрезается только Херсонская область. Сколько
     именно резать сверху, считает js (--map-cut): по умолчанию 70%
     лишней высоты, но не больше, чем позволяет заголовок — иначе пин
     над Армянском поднимался под надпись «Инвестиционная карта». */
  background:#84cef8 url('../assets/img/map-full.jpg') no-repeat;
  background-size:cover;
  background-position:50% calc(-1 * var(--map-cut, 0px));
  background-image:image-set(url('../assets/img/map-full.webp') type('image/webp'), url('../assets/img/map-full.jpg') type('image/jpeg'));
  color:#fff;
}
/* Градиент из макета (node 1:23888): сверху сплошной, к 37% сходит на нет */
.hp-map__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, #0057a8 0%, rgba(0,87,168,0) 37.315%);
  box-shadow:0 4px 4px rgba(0,0,0,.25);
  pointer-events:none;
}
.hp-map__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:40px;
  padding:40px var(--hp-pad);
}
/* Место под шапку. В макете (узел 1:23889) контейнер экрана карты
   начинается на 40, шапка занимает 40…110, заголовок стоит на 150 —
   то есть между низом шапки и заголовком ровно 40.
   Загвоздка в том, что содержимое экрана ужимается под высоту окна
   (js/home.js, fitScreens), а шапка — нет: она прибита к окну и всегда
   70px высотой на 20…90. Поэтому 70px этой распорки на невысоком окне
   превращались, скажем, в 45, заголовок уезжал к 96 и подлезал под
   плашку. Высота ниже компенсирует масштаб: сколько бы ни было сжатие,
   между низом плашки и заголовком остаются те же 40 макета (в масштабе
   экрана). Вывод формулы: заголовок стоит на z*(40 поля + распорка +
   40 зазора) и должен быть не выше 90 + 40*z, откуда распорка =
   90/z - 40; при z=1 это 50, меньше макетных 70, поэтому max().
   --fit-zoom выставляет js на каждом шаге подбора масштаба; без js
   остаётся 1, и распорка равна макетным 70. */
.hp-map__header-space{
  height:max(70px, calc(90px / var(--fit-zoom, 1) - 40px));
  flex-shrink:0;
}
.hp-map__title{
  margin:0;
  font-weight:300;
  font-size:48px;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}

/* Панель фильтров (node I1:23985;2478:16302) */
.hp-map__filters{
  width:380px;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:40px;
  border-radius:20px;
  background:#1666b0;
}
.hp-map__filters h3{
  margin:0;
  font-weight:300;
  font-size:32px;
  line-height:normal;
  color:#fff;
}
.hp-map__legend-title,
.hp-map__filters .hp-map__label{
  font-weight:600;
  font-size:18px;
  line-height:20px;
  color:#fff;
}
.hp-map__checks{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hp-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:400;
  font-size:16px;
  line-height:20px;
  color:#fff;
  cursor:pointer;
}
.hp-check input{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  flex-shrink:0;
  width:14px; height:14px;
  margin:0;
  border:1px solid #e2e8f0;
  border-radius:2px;
  background:#fff;
  cursor:pointer;
}
/* Красный квадрат — SVG-фон, а не ::after: единая картинка центрируется
   рендером субпиксельно точно на любом разрешении и при любом zoom панели
   (псевдоэлемент с margin:auto округлялся и уезжал от центра). */
.hp-check input:checked{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><rect x="2" y="2" width="8" height="8" rx="2" fill="%23cd1f26"/></svg>');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
.hp-map__filters .hp-btn{ width:100%; font-size:16px; }
.hp-map__sublink{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 24px;
  border-radius:30px;
  color:#fff;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  white-space:nowrap;
}
.hp-map__sublink:hover{ color:var(--red-hover); }
.hp-map__sublink img{ width:10px; height:10px; transform:scaleY(-1); }

/* Легенда (node 1:23986) */
.hp-map__legend{
  width:380px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:40px;
  border-radius:20px;
  background:rgba(0,87,168,.4);
}
.hp-legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:400;
  font-size:13px;
  line-height:20px;
  color:#fff;
}
.hp-legend-item i{
  flex-shrink:0;
  width:20px; height:20px;
  border-radius:5px;
}

/* Метки на карте (node 1:24012) */
/* Слой пинов повторяет прямоугольник, в который background-size:cover
   вписывает карту (assets/img/map-full.jpg, 1920×1080). Высота экрана
   зафиксирована на 1080px, поэтому cover растягивает картинку по ширине
   только начиная с 1920px, а ниже — держит 1920px по центру.
   Проценты пинов взяты из макета, поэтому они едут вместе с картой. */
.hp-map__pins{
  position:absolute;
  /* Та же система координат 1920x1080 и та же привязка, что у подложки:
     по горизонтали середина картинки на середине блока, по вертикали
     верх картинки поднят на --map-cut. Оба значения ставит js. */
  left:50%; top:0;
  width:1920px; height:1080px;
  transform-origin:0 0;
  transform:translate(calc(var(--map-scale, 1) * -960px), calc(-1 * var(--map-cut, 0px)))
            scale(var(--map-scale, 1));
  z-index:1;
  transition:opacity .4s ease;
}
/* Пин-диаграмма: векторное кольцо (SVG рисует js по долям категорий).
   border/background сброшены — у <button> браузер рисует свою тёмную
   рамку, из-за неё вокруг объектов была чёрная обводка. */
.hp-pin{
  position:absolute;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  padding:0;
  border:none;
  outline:none;
  background:none;
  -webkit-appearance:none;
  appearance:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:transform .2s;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.hp-pin__ring{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}
.hp-pin span{
  position:relative;
  font-weight:500;
  font-size:16px;
  color:var(--hp-ink);
  transition:font-weight .1s;
}
/* при наведении число жирное (макет) */
.hp-pin:hover span{ font-weight:700; }
/* трёхзначные пины крупнее: 119/102 от базовых 56px -> 66px */
.hp-pin.is-big{ width:66px; height:66px; }
.hp-pin.is-big span{ font-size:19px; }
.hp-pin:hover{ transform:translate(-50%,-50%) scale(1.08); }

/* ============================================================
   ЭКРАН 6 — Истории успеха (node 1:18076)
   150 → заголовок 35 → 40 → галерея 655,5 → 40 → плашка 119,5 → 40
   ============================================================ */
.hp-success{
  min-height:var(--hp-screen);
  padding:150px var(--hp-pad) 40px;
  background:#fff;
}
.hp-success__title{
  margin:0 0 40px;
  font-weight:300;
  /* 48px — как у заголовков остальных экранов */
  font-size:48px;
  line-height:1;
  color:var(--hp-ink);
}
.hp-success__gallery{
  display:flex;
  align-items:stretch;
  height:655.5px;
  border-radius:20px;
  overflow:hidden;
}

/* Панель истории (node 1:34816) — один компонент в двух состояниях.
   Свёрнутая занимает 250 из 1800px макета, раскрытая — 1050; храним доли,
   чтобы пропорции держались и на 1440, и на 1024. */
.hp-story{
  position:relative;
  flex:0 0 13.8889%;          /* 250 / 1800 */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:30px 0;
  border-right:1px solid #fff;
  overflow:hidden;
  transition:flex-basis .55s cubic-bezier(.4, 0, .2, 1), padding .55s cubic-bezier(.4, 0, .2, 1);
}
.hp-story:last-child{ border-right:none; }
.hp-story.is-open{
  flex:0 0 58.3333%;          /* 1050 / 1800 */
  padding:40px 0;
}
.hp-story__photos{
  position:absolute; inset:0;
}
.hp-story__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .45s ease;
}
.hp-story__photo.is-active{ opacity:1; }

/* Свёрнутая — ровная затемняющая вуаль, раскрытая — градиент из макета.
   Размытие включаем маской, иначе backdrop-filter замылил бы и верх кадра,
   тогда как в Figma блюр ограничен непрозрачной частью градиента. */
.hp-story__veil{
  position:absolute; inset:0;
  background:rgba(0,0,0,.6);
  transition:background .45s ease;
}
.hp-story.is-open .hp-story__veil{
  background:linear-gradient(to bottom, rgba(0,0,0,0) 56.522%, rgba(0,0,0,.8) 100%);
  backdrop-filter:blur(12.5px);
  -webkit-backdrop-filter:blur(12.5px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 56.522%, #000 100%);
          mask-image:linear-gradient(to bottom, transparent 56.522%, #000 100%);
}
.hp-story:not(.is-open):hover .hp-story__veil{ background:rgba(0,0,0,.45); }

/* Кнопка раскрытия перекрывает всю свёрнутую плитку: клик по ней разворачивает
   историю, а скринридер получает нормальную семантику. */
.hp-story__open{
  position:absolute; inset:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.hp-story.is-open .hp-story__open{ display:none; }
.hp-story__open:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

.hp-story__label{
  position:relative;
  align-self:flex-start;
  padding:0 30px;
  color:#fff;
  font-weight:400;
  font-size:20px;
  line-height:1.4;
  transition:font-size .3s ease, padding .3s ease;
}
.hp-story.is-open .hp-story__label{
  padding:20px;
  background:var(--hp-red);
  font-weight:500;
  font-size:28px;
  white-space:nowrap;
}

/* Стрелки и подпись живут только в раскрытой панели */
.hp-story__nav,
.hp-story__foot{
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.hp-story.is-open .hp-story__nav,
.hp-story.is-open .hp-story__foot{
  opacity:1;
  visibility:visible;
  transition-delay:.2s;
}
.hp-story__nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
}
.hp-story__nav button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border:1px solid rgba(51,51,51,.1);
  border-radius:50px;
  background:#fff;
  color:#333;
  cursor:pointer;
  transition:background .2s;
}
/* По макету ховера: у стрелки красный фон и белая стрелка */
.hp-story__nav button:hover{ background:var(--hp-red); border-color:var(--hp-red); color:#fff; }
.hp-story__nav[hidden]{ display:none; }
.hp-story__nav svg{ width:7px; height:12px; }
.hp-story__nav .next svg{ transform:rotate(180deg); }
.hp-story__foot{
  position:relative;
  display:flex;
  align-items:center;
  /* не space-between: при нём длина названия и суммы двигала кнопки */
  justify-content:flex-start;
  gap:20px;
  padding:20px 40px 0;
  border-top:1px solid #ddd;
}
/* Кнопки прижаты к правому краю — их положение одинаково на всех слайдах
   независимо от длины названия проекта и суммы инвестиций */
.hp-story__foot .hp-btn:first-of-type{ margin-left:auto; }
.hp-story__foot .hp-btn{ flex-shrink:0; }
.hp-story__name{
  font-weight:500;
  font-size:24px;
  line-height:1.4;
  color:#fff;
  white-space:nowrap;
}
/* У открытого слайда заголовок подчёркивается только при наведении
   на сам заголовок; у свёрнутых колонок — при наведении на всю колонку */
.hp-story__name:hover{ text-decoration:underline; cursor:pointer; }
.hp-story:not(.is-open):hover .hp-story__label{ text-decoration:underline; cursor:pointer; }
.hp-story__price{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  white-space:nowrap;
}
.hp-story__num{
  font-weight:200;
  font-size:96px;
  line-height:96px;
  letter-spacing:-10px;
  text-align:center;
}
.hp-story__unit{
  font-weight:300;
  font-size:40px;
  line-height:96px;
}

/* Нижняя плашка (node 1:18874) — та же, что на экране предложений */
.hp-success__cta{ margin-top:40px; }
.hp-success__cta-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  height:119.5px;
  padding:48px 40px;
  border-radius:20px;
  background:#1666b0;
  box-shadow:0 8px 10px -6px rgba(0,0,0,.1);
  overflow:hidden;
}
.hp-success__cta-box p{
  margin:0;
  font-weight:600;
  font-size:30px;
  line-height:36px;
  color:#fff;
  white-space:nowrap;
}

/* ============================================================
   Адаптив: ниже 1920 экраны перестают быть жёстко 1080px,
   внутренние блоки переходят в поток.
   ============================================================ */
@media (max-width: 1919px){
  .hp-hero__center{ width:auto; max-width:min(827px, calc(100% - 120px)); }
  .hp-hero__title{ white-space:normal; }
  .hp-hero__news{ left:auto; right:60px; }
  .hp-invest__col{ width:auto; max-width:1169px; }
  .hp-invest__photo{ width:min(1198px, 62%); }
  .hp-help__text{ width:auto; flex:1 1 auto; }
  .hp-offers__cta-box p{ white-space:normal; }
}

/* Уже 1920: колонки героя делят ширину экрана поровну (на 1920 в макете
   4×384 + 238, на 1440 — пять равных колонок, макет «1440 ноутбук»), а не
   держат 384px — иначе пятая колонка уезжала за правый край и ховер
   на ней был недоступен. Панели ужимаются под ширину колонки через
   container query (см. .hp-hero__col). Карточка новостей — от правого края. */
@media (max-width: 1919px){
  .hp-hero__col,
  .hp-hero__col:last-child{ flex:1 1 0; min-width:0; }
  .hp-hero__news{ left:auto; right:30px; }
}

@media (max-width: 1600px){
  .hp-hero__title{ font-size:44px; }
  .hp-hero__logo{ width:120px; height:136px; }
  .hp-hero__panel{ top:120px; gap:28px; padding:0 20px; }
  .hp-hero__panel-title{ font-size:28px; }
  .hp-hero__stats{ gap:16px; }
  .hp-hero__stat{ padding:18px; gap:16px; }
  .hp-hero__stat-num{ font-size:62px; letter-spacing:-3px; margin-right:-3px; }
  .hp-hero__stat-unit{ font-size:28px; }
  .hp-hero__stat-cap span{ font-size:16px; }
  .hp-invest__title{ font-size:36px; white-space:normal; }
  .hp-invest__quote{ font-size:30px; }
  .hp-help__text h2{ font-size:26px; }
  .hp-help__text p{ font-size:20px; white-space:normal; }
  .hp-help__btn{ font-size:20px; padding:22px 40px; }
  .hp-offers__head h2{ font-size:36px; }
  .hp-offers__cta-box p{ font-size:24px; line-height:30px; }
  .hp-support__head h2{ font-size:36px; }
  .hp-supcard{ padding:28px; }
  .hp-supcard__head h3{ font-size:20px; }
  .hp-supcard__num{ font-size:48px; line-height:64px; letter-spacing:-3px; }
  .hp-navigator__head h2{ font-size:32px; }
  .hp-story__label{ font-size:18px; }
  .hp-story.is-open .hp-story__label{ font-size:22px; }
  .hp-story__num{ font-size:72px; letter-spacing:-6px; }
  .hp-story__unit{ font-size:30px; }
  .hp-success__cta-box p{ font-size:24px; line-height:30px; }
}

/* ============================================================
   Высотный адаптив ховер-панелей героя: на невысоких окнах
   (ноутбуки 768-900px) панель ужимается, чтобы уместиться в экран
   ============================================================ */
@media (max-height: 940px){
  .hp-hero__panel{ top:110px; gap:24px; }
  .hp-hero__panel-title{ font-size:28px; }
  .hp-hero__stats{ gap:14px; }
  .hp-hero__stat{ padding:14px; gap:12px; }
  .hp-hero__stat-num{ font-size:56px; letter-spacing:-3px; margin-right:-3px; }
  .hp-hero__stat-unit{ font-size:24px; }
  .hp-hero__stat-cap span{ font-size:15px; }
}
@media (max-height: 800px){
  .hp-hero__panel{ top:96px; gap:18px; }
  .hp-hero__panel-title{ font-size:24px; }
  .hp-hero__stat{ padding:10px; gap:8px; }
  .hp-hero__stat-num{ font-size:44px; letter-spacing:-2px; margin-right:-2px; }
  .hp-hero__stat-unit{ font-size:20px; }
  .hp-hero__stat-cap span{ font-size:13px; }
}

/* ============================================================
   Слои инвестиционной карты (Figma секция 1:25699).
   Активный фильтр подменяет карту готовым слоем из макета;
   родные пины и легенда слоя 1 при этом прячутся.
   ============================================================ */
/* Контейнер объектов слоя: система координат макета 1920x1080,
   масштабируется так же, как cover подложки (--map-scale ставит js) */
.hp-map__layer{
  position:absolute;
  /* та же привязка, что у подложки и слоя пинов */
  left:50%; top:0;
  width:1920px; height:1080px;
  transform-origin:0 0;
  transform:translate(calc(var(--map-scale, 1) * -960px), calc(-1 * var(--map-cut, 0px)))
            scale(var(--map-scale, 1));
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
  z-index:1;
}
/* Отдельный объект слоя — векторная SVG-иконка из макета */
.hp-map__obj{
  position:absolute;
  display:block;
}
/* Слой «Реализуемые проекты»: штатные пины в палитре слоя из макета
   (зелёный / оранжевый / розовый) */
/* палитра слоя 7 задаётся при перерисовке кольца в js */
.hp-map.has-layer .hp-map__layer{ opacity:1; }
/* при активном слое прячутся только пины слоя 1;
   легенда остаётся — js подменяет её содержимое легендой слоя */
.hp-map.has-layer .hp-map__pins{ opacity:0; pointer-events:none; }
/* панели управления всегда поверх слоя */
.hp-map__inner{ z-index:2; }
/* легенда слоя — готовая панель из макета */
/* Легенда слоя: SVG-иконка типа 26px (как в панелях легенд макета) + текст */
.hp-legend-item__ico{
  flex-shrink:0;
  width:26px; height:26px;
  display:block;
}
/* «Полезные ископаемые» — две колонки, как в макете (узел 1:28768) */
.hp-map__legend.is-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.hp-map__legend.is-cols .hp-legend-item{ min-width:0; }
.hp-map__legend.is-cols .hp-legend-item span{ overflow-wrap:anywhere; }

/* ============================================================
   Навигатор мер поддержки: выпадающий список «Отрасль»
   (в макете ховера пункт списка краснеет)
   ============================================================ */
.hp-navselect{ position:relative; }
.hp-navselect .hp-field{ width:100%; }
.hp-navselect .hp-field svg{ transition:transform .2s; }
.hp-navselect.open .hp-field svg{ transform:rotate(180deg); }
.hp-navselect__list{
  position:absolute;
  top:calc(100% + 6px); left:0; right:0;
  z-index:6;
  margin:0; padding:8px 0;
  list-style:none;
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.hp-navselect.open .hp-navselect__list{ opacity:1; visibility:visible; transform:none; }
/* нижние поля: список раскрывается вверх (класс ставит js, когда снизу
   в карточке не хватает места) */
.hp-navselect.is-up .hp-navselect__list{
  top:auto;
  bottom:calc(100% + 6px);
  transform:translateY(6px);
  box-shadow:0 -8px 28px rgba(0,0,0,.18);
}
.hp-navselect.is-up.open .hp-navselect__list{ transform:none; }
.hp-navselect__list button{
  display:block; width:100%;
  padding:10px 20px;
  background:none; border:none;
  text-align:left;
  font-size:16px; line-height:1.4;
  color:var(--hp-ink);
  transition:color .15s;
}
.hp-navselect__list button:hover{ color:var(--hp-red); }

/* ============================================================
   Высотный адаптив остальных экранов: контент каждого экрана
   ужимается так, чтобы помещаться в реальную высоту вьюпорта
   (раньше экраны были жёстко свёрстаны под 1080px).
   ============================================================ */
/* Контент экранов сверстан под высоту 1080px. На более низких окнах
   содержимое пропорционально масштабируется: точный коэффициент по
   фактической высоте контента выставляет js/home.js (fitScreens) через
   zoom на внутренних обёртках секций. */

/* ============================================================
   Пины-диаграммы: тултип и окно по ТЗ (рис. 1.20-1.21)
   ============================================================ */
/* Тултип типа объектов при наведении на цветной сегмент */
/* Плашка сегмента при наведении на пин (макет): тёмное стекло,
   цветной квадрат 14px и название категории */
.hp-map-tip{
  position:absolute;
  z-index:6;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  font-size:16px;
  line-height:1.4;
  white-space:nowrap;
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  pointer-events:none;
}
.hp-map-tip.show{ opacity:1; visibility:visible; }
.hp-map-tip .dot{
  width:14px; height:14px;
  border-radius:2px;
  flex-shrink:0;
}

/* Окно со всеми типами объектов у пина */
.hp-map-pop{
  position:absolute;
  z-index:7;
  /* размеры плашки из макета (node 1:30274): 406×24 —
     при них «достопримечательность» (220px) помещается в строку целиком */
  width:406px;
  padding:24px;
  border-radius:16px;
  background:#fff;
  color:var(--hp-ink);
  box-shadow:0 16px 40px rgba(0,0,0,.3);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease;
}
.hp-map-pop.show{ opacity:1; visibility:visible; }
.hp-map-pop h4{
  margin:0 0 10px;
  font-size:16px;
  font-weight:500;
  color:#333;
}
.hp-map-pop .row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  border-radius:8px;
  font-size:14px;
  color:#555;
}
.hp-map-pop .row .sq{
  width:14px; height:14px;
  border-radius:4px;
  flex-shrink:0;
}
.hp-map-pop .row b{
  margin-left:auto;
  font-weight:500;
  color:#333;
}
.hp-map-pop .row.hl{ background:#f1f5f9; }
.hp-map-pop .hp-btn{
  width:100%;
  margin-top:12px;
}

/* ============================================================
   АДАПТИВ ПО МАКЕТАМ FIGMA: 1440 / 1024 / 844 / 390
   (фреймы 1:34924, 1:39229, 1:44685, 1:56420).
   Блоки идут после базовых медиа и перекрывают их по каскаду.
   ============================================================ */

/* Адаптив 1024 / 844 / 390 вынесен в css/responsive.css */

/* ============================================================
   Карточки объектов карты по клику (макеты «Слои карты», 1:25699)
   ============================================================ */
/* .hp-map__inner растянут на всю секцию поверх карты (z-index 2) и его
   пустая область перехватывала клики по объектам — пропускаем курсор
   насквозь, а сами панели оставляем кликабельными */
.hp-map__inner{ pointer-events:none; }
.hp-map__inner > *{ pointer-events:auto; }
.hp-map__header-space,
.hp-map__title{ pointer-events:none; }

/* объекты слоёв кликабельны */
.hp-map__obj{ pointer-events:auto; cursor:pointer; transition:transform .15s ease; }
.hp-map__obj:hover{ transform:scale(1.12); }
/* большие области (дороги, зоны покрытия) не перехватывают клики */
.hp-map__obj.is-area{ pointer-events:none; cursor:default; }

/* крестик закрытия — белая плашка с красным x над карточкой (как в маке) */
.hp-map-pop__close{
  position:absolute;
  top:-56px; right:0;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:12px;
  background:#fff;
  color:var(--hp-red);
  font-size:22px; line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  cursor:pointer;
}
.hp-map-pop__close:hover{ background:#f8f1f1; }

/* заголовок карточки с иконкой объекта */
.hp-map-pop__head{
  display:flex; align-items:center; gap:20px;
  margin-bottom:14px;
}
.hp-map-pop__head h4{
  margin:0;
  /* flex-элемент без min-width:0 не сжимается уже своего содержимого,
     а длинные слова («достопримечательность») не переносятся сами —
     из-за этого заголовок вылезал за края плашки */
  flex:1 1 0;
  min-width:0;
  /* break-word, а не anywhere: длинное слово сначала уходит на новую
     строку целиком и рвётся только если и там не помещается */
  overflow-wrap:break-word;
  font-size:18px; font-weight:500; line-height:26px; color:#000;
}
/* иконка объекта (когда фото нет) */
.hp-map-pop__icon{ width:40px; height:40px; flex-shrink:0; }
/* фото объекта — 80×80, радиус 10, белая рамка 3px (макет 1:30277) */
.hp-map-pop__photo{
  width:80px; height:80px;
  flex-shrink:0;
  object-fit:cover;
  border:3px solid #fff;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* строка «поле — значение» */
.hp-map-pop .frow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0;
  border-bottom:1px solid #eee;
  font-size:14px; color:#666;
}
.hp-map-pop .frow b{ font-weight:600; color:#222; text-align:right; white-space:nowrap; }
.hp-map-pop .frow:last-of-type{ border-bottom:none; }

/* ============================================================
   Появление заголовков разделов при прокрутке:
   текст всплывает снизу и проявляется. Класс is-in ставит
   IntersectionObserver в js/home.js.
   ============================================================ */
.hp-reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.hp-reveal.is-in{
  opacity:1;
  transform:none;
}
/* подзаголовок стартует чуть позже основного — эффект каскада */
.hp-reveal--delay{ transition-delay:.12s; }

@media (prefers-reduced-motion: reduce){
  .hp-reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Боковая панель «Обращение к Главе» (макет node 1:25637)
   ============================================================ */
.hp-drawer{ position:fixed; inset:0; z-index:900; }
.hp-drawer[hidden]{ display:none; }
.hp-drawer__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .3s ease;
}
.hp-drawer__panel{
  position:absolute;
  top:0; right:0;
  width:510px; max-width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:-8px 0 40px rgba(0,0,0,.2);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
}
.hp-drawer.is-open .hp-drawer__scrim{ opacity:1; }
.hp-drawer.is-open .hp-drawer__panel{ transform:none; }

.hp-drawer__head{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:63px;
  padding:0 31px;
  border-bottom:1px solid #e2e8f0;
}
.hp-drawer__head h3{
  margin:0;
  font-weight:500;
  font-size:24px;
  line-height:33px;
  color:var(--hp-ink);
}
.hp-drawer__close{
  position:absolute;
  right:23px; top:50%;
  transform:translateY(-50%);
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  border:none;
  border-radius:50%;
  background:#f1f5f9;
  color:#64748b;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.hp-drawer__close svg{ width:11px; height:11px; }
.hp-drawer__close:hover{ background:#e2e8f0; color:var(--hp-red); }

.hp-drawer__form{
  display:flex;
  flex-direction:column;
  padding:14px 31px 40px;
}
/* Поле-строка: подпись как плейсхолдер, снизу тонкая линия (как в макете) */
.hp-field-line{
  position:relative;
  display:block;
  border-bottom:1px solid #e2e8f0;
}
.hp-field-line input,
.hp-field-line textarea{
  display:block;
  width:100%;
  padding:17px 11px;
  border:none;
  background:none;
  font-family:'Inter',Arial,sans-serif;
  font-size:16px;
  line-height:17px;
  color:var(--hp-ink);
  resize:none;
}
.hp-field-line textarea{ padding-top:20px; min-height:104px; line-height:1.4; }
.hp-field-line input:focus,
.hp-field-line textarea:focus{ outline:none; }
.hp-field-line > span{
  position:absolute;
  left:11px; top:17px;
  font-size:16px;
  line-height:17px;
  color:#94a3b8;
  pointer-events:none;
  transition:opacity .15s;
}
.hp-field-line > span i{ font-style:normal; color:var(--hp-red); }
/* подпись прячется, как только в поле что-то введено или оно в фокусе */
.hp-field-line input:focus + span,
.hp-field-line textarea:focus + span,
.hp-field-line input:not(:placeholder-shown) + span,
.hp-field-line textarea:not(:placeholder-shown) + span{ opacity:0; }
.hp-field-line:focus-within{ border-bottom-color:#1666b0; }

.hp-drawer__captcha{
  display:flex;
  justify-content:center;
  padding:24px 0 20px;
}
.hp-drawer__captcha img{ width:180px; height:60px; }

.hp-drawer__consent{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:24px;
  font-size:12px;
  line-height:1.4;
  color:#64748b;
  cursor:pointer;
}
.hp-drawer__consent input{
  appearance:none; -webkit-appearance:none;
  position:relative;
  flex-shrink:0;
  width:14px; height:14px;
  margin:2px 0 0;
  border:1px solid #e2e8f0;
  border-radius:3px;
  background:#fff;
  cursor:pointer;
}
.hp-drawer__consent input:checked{ background:#1666b0; border-color:#1666b0; }
.hp-drawer__consent input:checked::after{
  content:'';
  position:absolute;
  inset:0; margin:auto;
  width:7px; height:4px;
  border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) translate(0.5px, -1px);
}
.hp-drawer__submit{ width:100%; height:52px; border-radius:8px; }

@media (max-width: 599px), (min-width: 600px) and (max-width: 767px) and (min-height: 600px){
  .hp-drawer__panel{ width:100%; }
  .hp-drawer__form{ padding:14px 20px 32px; }
  .hp-drawer__head{ padding:0 20px; }
}

/* ============================================================
   Строка поиска по сайту (макет node 1:48474)
   ============================================================ */
.hp-search{
  position:fixed;
  top:0; left:0; right:0;
  z-index:950;
  background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.hp-search[hidden]{ display:none; }
.hp-search.is-open{ transform:none; }
.hp-search__inner{
  display:flex;
  align-items:center;
  gap:28px;
  height:150px;
  padding:0 60px;
}
.hp-search__ico{ flex-shrink:0; width:30px; height:30px; color:#64748b; }
.hp-search__input{
  flex:1 1 auto;
  min-width:0;
  border:none;
  background:none;
  font-family:'Inter',Arial,sans-serif;
  font-weight:400;
  font-size:28px;
  line-height:1.2;
  color:var(--hp-ink);
}
.hp-search__input::placeholder{ color:#94a3b8; }
.hp-search__input:focus{ outline:none; }
.hp-search__input::-webkit-search-cancel-button{ display:none; }
.hp-search__close{
  flex-shrink:0;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  border:none;
  background:none;
  color:#333;
  cursor:pointer;
  transition:color .2s;
}
.hp-search__close svg{ width:22px; height:22px; }
.hp-search__close:hover{ color:var(--hp-red); }

@media (max-width: 1024px){
  .hp-search__inner{ height:96px; padding:0 24px; gap:16px; }
  .hp-search__input{ font-size:20px; }
  .hp-search__ico{ width:22px; height:22px; }
}
@media (max-width: 599px), (min-width: 600px) and (max-width: 767px) and (min-height: 600px){
  .hp-search__inner{ height:76px; padding:0 14px; }
  .hp-search__input{ font-size:17px; }
}

/* Стрелки карусели: неактивная — приглушена */
.hp-offers__nav:disabled{ opacity:.35; cursor:default; }
.hp-offers__nav:disabled:hover{ background:#fff; }



/* ============================================================
   Ховеры и появление по ТЗ (рис. 1.4 и список заказчика)
   ============================================================ */
/* Предложения: фото карточки плавно увеличивается на 20% при наведении */
.hp-card__media{ overflow:hidden; }
.hp-card__media img{ transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.hp-card:hover .hp-card__media img{ transform:scale(1.2); }

/* Истории успеха: изображение категории увеличивается при наведении.
   Анимируем opacity и transform вместе — переключение кадров внутри
   раскрытой истории тоже остаётся плавным. */
.hp-story__photo{ transition:opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.hp-story:hover .hp-story__photo{ transform:scale(1.08); }

/* Карточки господдержки всплывают каскадом (класс hp-reveal ставит js);
   transition-delay для каждой карточки свой — задаётся инлайном */
.hp-supcard.hp-reveal{ transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }