/* Первый экран v4: белый фон, наклонная синяя плоскость, карусель. Подключать после v3.css.
   Опирается на style.css (.frame, .button, переменные) и v2.css (.v2-stage*, .v2-pass*, .v2-dot*). Скрипт — v2.js без изменений. */
.v4-hero{position:relative;isolation:isolate;overflow:hidden;background:#fff;color:var(--ink)}
/* Синяя плоскость перекрывает голубую по всей длине кромки. */
.v4-hero::before,.v4-hero::after{content:"";position:absolute;inset:0;pointer-events:none}
.v4-hero::before{z-index:-3;background:var(--sky);
  clip-path:polygon(calc(49% - 7px) 0,100% 0,100% 100%,0 100%,0 calc(100% - 20px),calc(40% - 5px) calc(100% - 84px))}
.v4-hero::after{z-index:-2;background:linear-gradient(155deg,#1273ff 0,#005bdf 48%,#0047bd 100%);
  clip-path:polygon(49% 0,100% 0,100% 100%,0 100%,0 calc(100% - 14px),40% calc(100% - 78px))}
.v4-ring{position:absolute;z-index:-1;right:-86px;top:-96px;width:300px;height:300px;border-radius:50%;border:1.5px solid #ffffff73}
.v4-ring::after{content:"";position:absolute;left:34px;bottom:52px;width:10px;height:10px;border-radius:50%;background:#fff}
.v4-dash{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.v4-dash line{stroke:#fff;stroke-opacity:.7;stroke-width:3;stroke-dasharray:.1 10;stroke-linecap:round}

.v4-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.4vw,76px);align-items:center;
  padding-block:clamp(40px,4.6vw,76px) calc(clamp(34px,3.6vw,56px) + 47px)}
.v4-copy{min-width:0}
.v4-hero h1{margin:0;font:800 clamp(36px,4.1vw,64px)/1.03 var(--headline);letter-spacing:-.04em;color:var(--ink)}
.v4-lead{margin:20px 0 0;max-width:min(430px,92%);font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--muted)}
.v4-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:30px}
.v4-actions .button{min-height:58px;padding-inline:26px;font-size:16px}
.v4-actions .button.primary:hover{background:#1a73f2}
.v4-more{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid #101c2d40;font-size:15px;font-weight:600;color:var(--ink)}
.v4-more span{color:var(--blue);transition:transform .2s}
.v4-more:hover{color:var(--blue);border-color:var(--blue)}
.v4-more:hover span{transform:translateX(4px)}
/* Линия-вынос: четыре точки на пунктире */
.v4-route{position:relative;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;max-width:min(400px,80%);margin:clamp(30px,3.4vw,52px) 0 0;padding:0;list-style:none;font-size:13.5px;font-weight:600;color:var(--ink)}
.v4-route::before{content:"";position:absolute;left:6px;right:6px;top:5px;border-top:2.5px dotted var(--blue)}
.v4-route li{position:relative;padding-top:22px}
.v4-route li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;border:2px solid var(--blue);background:#fff}
.v4-route li:last-child{text-align:right}
.v4-route li:last-child::before{left:auto;right:0;background:var(--blue)}

/* Карусель */
.v4-stage{position:relative;min-width:0}
.v4-hero .v2-stage-frame{aspect-ratio:16/10.4;border-radius:18px;background:#0b3f9c;box-shadow:0 30px 60px #06235a59}
.v4-hero .v2-stage-media img{transform:scale(1.03);transition:opacity .8s ease,transform 1.8s cubic-bezier(.2,.6,.2,1)}
.v4-hero .v2-stage-media img.is-active{transform:scale(1)}
.v4-hero .v2-stage-media img:first-child{transform:none;transition:opacity .65s ease}
.v4-hero .v2-stage-frame:has(img:first-child.is-active),
.v4-hero .v2-stage-media:has(img:first-child.is-active){box-shadow:none}
.v4-hero .v2-pass-go{background:#fff;color:var(--blue)}
.v4-hero .v2-dots{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;margin-top:14px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:0 12px 28px #06235a40}
.v4-hero .v2-dot{color:var(--muted)}
.v4-hero .v2-dot span{color:var(--blue)}
.v4-hero .v2-dot::before{background:var(--line)}
.v4-hero .v2-dot i{background:var(--blue)}
.v4-hero .v2-dot:hover,.v4-hero .v2-dot[aria-pressed=true]{color:var(--ink)}
.v4-hero .v2-stage-ctrl button:focus-visible,.v4-hero .v2-dot:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.v4-hero .v2-plain{padding:8px 12px;border-radius:10px;background:#fff}
.v4-hero .v2-plain a{color:var(--ink)}

@media (min-width:861px) and (max-width:940px){
  .v4-hero .v2-dot span{display:none}
}

@media(max-width:860px){
  /* Заголовок и кнопка на белом, кадр на синей полосе, которая доходит до низа экрана */
  .v4-hero::before,.v4-hero::after,.v4-dash{display:none}
  .v4-ring{right:-150px;top:auto;bottom:-170px;z-index:0;border-color:#ffffff59}
  .v4-ring::after{display:none}
  .v4-grid{position:relative;z-index:1;grid-template-columns:minmax(0,1fr);gap:22px;padding-block:24px 30px}
  .v4-copy{display:contents}
  .v4-hero h1{order:1;font-size:clamp(31px,8.6vw,48px)}
  .v4-lead{order:2;margin-top:-8px;max-width:560px}
  .v4-actions{order:3;margin-top:-4px}
  .v4-more{display:none}
  .v4-stage{order:4}
  .v4-stage::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:26%;bottom:-600px;background:linear-gradient(170deg,#1273ff 0,#005bdf 30%,#0047bd 100%);clip-path:polygon(0 56px,100% 0,100% 100%,0 100%)}
  .v4-stage::after{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:26%;height:64px;background:var(--sky);clip-path:polygon(0 50px,100% -6px,100% 2px,0 58px)}
  .v4-route{order:5;max-width:none;margin-top:4px;color:#fff}
  .v4-route::before{border-color:#fff}
  .v4-route li::before{border-color:#fff;background:var(--blue)}
  .v4-route li:last-child::before{background:#fff}
}
@media(max-width:620px){
  .v4-lead{margin-top:-6px;font-size:15px;line-height:1.45}
  .v4-grid{gap:18px;padding-block:22px 26px}
  .v4-actions{margin-top:0}
  .v4-actions .button{width:100%;min-height:54px;justify-content:center}
  .v4-hero .v2-stage-frame{aspect-ratio:auto;box-shadow:none}
  .v4-hero .v2-stage-media{aspect-ratio:16/10.4;box-shadow:0 18px 36px #06235a40}
  .v4-hero .v2-pass{margin-top:10px;padding:12px 12px 12px 14px;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 10px 26px #06235a33}
  .v4-hero .v2-pass-kind{color:var(--blue)}
  .v4-hero .v2-pass small{color:var(--muted)}
  .v4-hero .v2-pass-go{background:var(--blue);color:#fff}
  .v4-hero .v2-dots{margin-top:10px;padding:0 8px;gap:0 6px}
  .v4-route{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .v4-hero .v2-stage-media img{transform:none;transition:none}
  .v4-more span{transition:none}
}