/* Главный экран (новая верстка). Все правила внутри .hv2 — на остальной сайт не влияют. */
.hv2{
  --hv2-green:#23bd87;--hv2-black:#0a0a0a;--hv2-muted:#6c6c6c;--hv2-intro-dur:230ms;
  --u:min(1px,calc(100vw / 1920));
  position:relative;box-sizing:border-box;padding:calc(100 * var(--u)) 0 calc(226 * var(--u)); /* +margin-top .main-cases (50px) = 276 до «Кейсов», как в макете */
  background:#fff;color:var(--hv2-black);font-family:Jost,Arial,sans-serif;-webkit-font-smoothing:antialiased;
}
.hv2,.hv2 *,.hv2 *::before,.hv2 *::after{box-sizing:border-box}
:where(.hv2) :is(p,h1){margin:0}
:where(.hv2) img{display:block;max-width:none}
:where(.hv2) a{color:inherit;text-decoration:none}
:where(.hv2) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hv2 a:focus-visible,.hv2 button:focus-visible{outline:2px solid var(--hv2-green);outline-offset:5px}
.hv2-container{max-width:1720px;margin-inline:auto;position:relative}
/* Боковые отступы как у .container сайта (main.css), чтобы экран стоял по одной линии с шапкой и кейсами */
@media (max-width:1740px){.hv2-container{padding-inline:36px}}
@media (max-width:1300px){.hv2-container{padding-inline:31px}}
@media (max-width:720px){.hv2-container{padding-inline:10px}}

/* Заголовок */
.hv2-title{position:relative;font-size:calc(120 * var(--u));font-weight:450;line-height:1;letter-spacing:0;width:100%}
.hv2-underline{position:absolute;left:calc(134 * var(--u));top:calc(243.86 * var(--u));width:calc(937.718 * var(--u));height:auto;pointer-events:none}

/* Подчёркнутые слова заголовка: эффект как у h1 .link на боевой главной.
   Буквы и линию собирает bundle.js сайта (все .link), стили main.css привязаны к h1 — повторяем их здесь в em. */
.hv2-title .link{display:inline-block;position:relative;color:inherit;text-decoration:none;vertical-align:top}
.hv2-title .link>div:first-child{display:flex;overflow:hidden;text-shadow:0 1.3em 0 currentColor}
.hv2-title .link span{display:block;backface-visibility:hidden;font-style:normal;transition:transform .84s;transform:translateY(var(--hv2-m,0))}
.hv2-title .link span:nth-child(1){transition-delay:0.05s}.hv2-title .link span:nth-child(2){transition-delay:0.10s}.hv2-title .link span:nth-child(3){transition-delay:0.15s}.hv2-title .link span:nth-child(4){transition-delay:0.20s}.hv2-title .link span:nth-child(5){transition-delay:0.25s}.hv2-title .link span:nth-child(6){transition-delay:0.30s}.hv2-title .link span:nth-child(7){transition-delay:0.35s}.hv2-title .link span:nth-child(8){transition-delay:0.40s}.hv2-title .link span:nth-child(9){transition-delay:0.45s}.hv2-title .link span:nth-child(10){transition-delay:0.50s}.hv2-title .link span:nth-child(11){transition-delay:0.55s}.hv2-title .link span:nth-child(12){transition-delay:0.60s}
.hv2-title .link>div:last-child{position:absolute;pointer-events:none;left:0;right:0;bottom:-3px;height:5px;overflow:hidden}
.hv2-title .link>div:last-child svg{display:block;position:absolute;right:0;top:0;width:300%;height:4px;overflow:visible;fill:none;stroke:var(--hv2-green);stroke-width:4px;stroke-linecap:round;stroke-dasharray:63.5px,128px;stroke-dashoffset:190.25px;transform:translateX(0) translateZ(0);transition:transform var(--hv2-line-d,0s),stroke-dashoffset var(--hv2-line-d,0s)}
.hv2-title .link:hover{--hv2-m:-1.3em;--hv2-line-d:.84s}
.hv2-title .link:hover>div:last-child svg{stroke-dashoffset:63.5px;transform:translateX(65.66%) translateZ(0)}

/* Текст / плашки + зелёная кнопка */
.hv2-details{margin-top:calc(56 * var(--u));display:grid;grid-template-columns:calc(1200 * var(--u)) 1fr;position:relative;min-height:calc(126 * var(--u))}
/* Текст и плашки лежат в одной ячейке grid: высота блока = высоте большего из них, ничего не наезжает */
.hv2-intro{display:grid;min-width:0}
.hv2-intro-text,.hv2-pills{grid-area:1/1;transition:opacity var(--hv2-intro-dur) ease-in-out,transform var(--hv2-intro-dur) ease-in-out}
.hv2-intro-text{font-size:calc(28 * var(--u));line-height:calc(42 * var(--u));color:var(--hv2-muted)}
/* main.css сайта задаёт p и a свои шрифт, размер и цвет — внутри экрана наследуем от блока */
.hv2-intro-text p{font:inherit;color:inherit;margin:0}
.hv2-intro-text a{font:inherit;color:var(--hv2-black);text-decoration:underline;text-underline-offset:calc(6 * var(--u));text-decoration-thickness:1px;transition:color .2s}
.hv2-intro-text a:hover{color:var(--hv2-green)}
.hv2-pills{display:flex;flex-wrap:wrap;align-content:flex-start;gap:calc(16 * var(--u));width:calc(900 * var(--u));padding-top:calc(6 * var(--u));opacity:0;transform:translateY(calc(10 * var(--u)));pointer-events:none}
.hv2-pills span{border:1px solid #808080;border-radius:44px;padding:calc(8 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u));font-size:calc(20 * var(--u));line-height:calc(30 * var(--u));white-space:nowrap}
.hv2-intro[data-state=pills] .hv2-intro-text{opacity:0;transform:translateY(calc(-10 * var(--u)));pointer-events:none}
.hv2-intro[data-state=pills] .hv2-pills{opacity:1;transform:none;pointer-events:auto}

.hv2-strategy{position:absolute;left:calc(1313 * var(--u));top:calc(-18 * var(--u));width:calc(300 * var(--u));height:calc(128 * var(--u));border-radius:calc(32 * var(--u))!important;background:var(--hv2-green)!important;color:#fff!important;display:flex;align-items:center;text-align:left;padding:calc(24 * var(--u)) calc(34 * var(--u))!important;font-size:calc(32 * var(--u));line-height:calc(36 * var(--u));font-weight:450}
.hv2-arrow{position:absolute;right:calc(22 * var(--u));top:calc(24 * var(--u));width:calc(72 * var(--u));height:calc(72 * var(--u))}
.hv2-arrow img{width:100%;height:auto;transition:transform .3s ease}
/* Стрелка плавно уходит вправо-вверх, как на остальных кнопках сайта */
.hv2-strategy:hover .hv2-arrow img,.hv2-strategy:focus-visible .hv2-arrow img{transform:translate(calc(8 * var(--u)),calc(-8 * var(--u)))}

/* Рейтинги */
.hv2-creds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(30 * var(--u));margin-top:calc(72 * var(--u))}
.hv2-cred-num{height:calc(44 * var(--u));font-size:calc(44 * var(--u));line-height:1;font-weight:450;display:flex;align-items:baseline;gap:calc(8 * var(--u))}
.hv2-cred-num span{font-size:calc(32 * var(--u));font-weight:500}
.hv2-numsign{width:calc(44 * var(--u));height:auto;align-self:center}
.hv2-cred p{font-family:'Open Sans',Arial,sans-serif;font-size:calc(18 * var(--u));line-height:calc(28 * var(--u));color:var(--hv2-muted);margin-top:calc(12 * var(--u))}
.hv2-cred p a{font:inherit;color:#2f2f2f;text-decoration:underline;text-decoration-color:#9d9d9d;text-decoration-thickness:.5px;text-underline-offset:5px;transition:color .2s}
.hv2-cred p a:hover{color:var(--hv2-green)}
.hv2-ministry>img{width:calc(173 * var(--u));height:auto}

/* Мобильные: размеры плавно растут от 360 до 767 px (--m = 1px на ширине 390) */
@media (max-width:767px){
  .hv2{--m:clamp(.9px,calc(100vw / 390),1.55px);padding:calc(40 * var(--m)) 0 calc(58 * var(--m))}
  .hv2-title{font-size:calc(40 * var(--m));line-height:1.08;letter-spacing:-.5px}
  .hv2-title br,.hv2-intro-text br,.hv2-cred p br{display:none}
  .hv2-title .link>div:last-child{display:none}
  .hv2-details{display:flex;flex-direction:column;align-items:flex-start;margin-top:calc(24 * var(--m));min-height:0}
  .hv2-intro{width:100%}
  .hv2-intro-text{font-size:calc(16 * var(--m));line-height:calc(24 * var(--m))}
  .hv2-intro-text p+p{margin-top:calc(4 * var(--m))}
  .hv2-pills{width:100%;gap:calc(8 * var(--m));padding-top:0}
  .hv2-pills span{padding:calc(6 * var(--m)) calc(12 * var(--m));font-size:calc(13 * var(--m));line-height:calc(19 * var(--m));white-space:normal}
  .hv2-strategy{position:relative;left:auto;top:auto;flex:none;width:calc(196 * var(--m));height:calc(76 * var(--m));margin-top:calc(24 * var(--m));padding:calc(12 * var(--m)) calc(18 * var(--m))!important;border-radius:calc(20 * var(--m))!important;font-size:calc(20 * var(--m));line-height:calc(23 * var(--m))}
  .hv2-arrow{top:calc(16 * var(--m));right:calc(16 * var(--m));width:calc(44 * var(--m));height:calc(44 * var(--m))}
  .hv2-strategy:hover .hv2-arrow img,.hv2-strategy:focus-visible .hv2-arrow img{transform:translate(calc(5 * var(--m)),calc(-5 * var(--m)))}
  .hv2-creds{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(28 * var(--m)) calc(16 * var(--m));margin-top:calc(36 * var(--m))}
  .hv2-cred-num{height:calc(30 * var(--m));font-size:calc(28 * var(--m));gap:calc(5 * var(--m))}
  .hv2-cred-num span{font-size:calc(20 * var(--m))}
  .hv2-numsign{width:calc(28 * var(--m))}
  .hv2-cred p{font-size:calc(11 * var(--m));line-height:calc(16 * var(--m));margin-top:calc(8 * var(--m))}
  .hv2-ministry>img{width:calc(120 * var(--m));height:calc(30 * var(--m));object-fit:contain;object-position:left center}
}
/* Нижняя плашка сайта (.wrap-nav-top-fix из home.php) прилипает к низу экрана сразу, как в макете.
   Значения — как у .wrap-nav-top.fix в main.css, который bundle.js включает только после прокрутки на высоту окна. */
/* плашка прилипла к низу экрана — её пустой контейнер не занимает место */
.hv2~.wrap-nav-top-fix{height:0;margin:0;overflow:visible}
.hv2~.wrap-nav-top-fix .wrap-nav-top{position:fixed;bottom:30px;left:50%;top:auto;width:auto;border:none;transform:translateX(-50%);z-index:10}
@media (prefers-reduced-motion:reduce){.hv2 *{transition:none!important}}