.esii5__in{
  --u: 1px;
  --ink:#032D75;      /* заголовок */
  --head:#002869;     /* подзаголовки шагов */
  --body:#0A3573;     /* основной текст */
  --sub:#0E4F9B;      /* подзаголовок шапки */
  --card-bg:#F3F9FE;
  --card-br:#0A55A8;
  --num:#1A66BC;
  --ic-bg:#D9EDFE;
  --ic-dark:#12539A;  /* обводка иконок */
  --ic-fill:#1E6ABF;  /* заливка иконок */
  --sep:#7FADE7;
  --deco:#6BA4E5;
  --arrow:#1F6CC4;
  --foot-a:#145EA5;
  --foot-b:#0E4F98;
  font-family:"PT Sans","Segoe UI","Open Sans","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  max-width: calc(1055 * var(--u));
  margin:0 auto;
  padding: calc(14 * var(--u)) calc(48 * var(--u)) calc(30 * var(--u));
}
/* 1u = 1px макета шириной 1055px; ниже 1055px блок масштабируется пропорционально */
@supports (width:1vw){
  .esii5__in{ --u: min(1px, 0.0948vw); }
}
.esii5__in *,.esii5__in *::before,.esii5__in *::after{ box-sizing:border-box; }

/* ---------- Шапка ---------- */
.esii5-title{
  margin:0;
  text-align:center;
  color:var(--ink);
  font-size: calc(40 * var(--u));
  line-height: calc(60 * var(--u));
  font-weight:800;
  letter-spacing: calc(-0.4 * var(--u));
}
.esii5-sub{
  position:relative;
  margin: calc(9 * var(--u)) auto 0;
  max-width: calc(800 * var(--u));
  text-align:center;
}
.esii5-sub p{
  margin:0;
  color:var(--sub);
  font-size: calc(22 * var(--u));
  line-height: calc(30 * var(--u));
}
.esii5-sub::before,.esii5-sub::after{
  content:"";
  position:absolute;
  top:50%;
  width: calc(66 * var(--u));
  height: calc(2 * var(--u));
  background:var(--deco);
}
.esii5-sub::before{ left: calc(-118 * var(--u)); }
.esii5-sub::after { right: calc(-118 * var(--u)); }

/* ---------- Список шагов ---------- */
.esii5-steps{ margin: calc(31 * var(--u)) 0 0; }

.esii5-item{ position:relative; }

/* Анимация включается только если отработал скрипт.
   Без JS блок просто виден сразу — контент не пропадает. */
.esii5__in--anim .esii5-item,
.esii5__in--anim .esii5-foot{
  opacity:0;
  transform: translateY(calc(18 * var(--u)));
  transition: opacity .55s ease, transform .55s ease;
}
.esii5__in--anim .esii5-item.is-in,
.esii5__in--anim .esii5-foot.is-in{ opacity:1; transform:none; }

.esii5-card{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--card-bg);
  border: calc(3 * var(--u)) solid var(--card-br);
  border-radius: calc(18 * var(--u));
  padding: calc(24 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u)) calc(86 * var(--u));
}


@supports ((-webkit-mask-image:radial-gradient(#000,#000)) or (mask-image:radial-gradient(#000,#000))){
  .esii5-card{
    -webkit-mask-image: radial-gradient(circle calc(47 * var(--u)) at calc(33 * var(--u)) calc(39 * var(--u)), rgba(0,0,0,0) 98%, #000 100%);
    mask-image: radial-gradient(circle calc(47 * var(--u)) at calc(33 * var(--u)) calc(39 * var(--u)), rgba(0,0,0,0) 98%, #000 100%);
  }
}

.esii5-card--1{ min-height: calc(176 * var(--u)); }
.esii5-card--2{ min-height: calc(201 * var(--u)); }
.esii5-card--3{ min-height: calc(188 * var(--u)); }
.esii5-card--4{ min-height: calc(182 * var(--u)); }
.esii5-card--5{ min-height: calc(185 * var(--u)); }

.esii5-num{
  position:absolute;
  z-index:2;
  left: calc(-5 * var(--u));
  top: calc(1 * var(--u));
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  border-radius:50%;
  background:var(--num);
  color:#fff;
  font-size: calc(46 * var(--u));
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 calc(3 * var(--u)) calc(9 * var(--u)) rgba(12,60,130,.22);
}

.esii5-ic{
  flex:none;
  width: calc(142 * var(--u));
  height: calc(142 * var(--u));
  border-radius:50%;
  background:var(--ic-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.esii5-ic svg{
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  display:block;
}

.esii5-sep{
  flex:none;
  width: calc(2 * var(--u));
  align-self:stretch;
  margin: calc(2 * var(--u)) calc(38 * var(--u)) calc(2 * var(--u)) calc(34 * var(--u));
  background:var(--sep);
}

.esii5-txt{ flex:1 1 auto; min-width:0; }
.esii5-txt h3{
  margin:0;
  color:var(--head);
  font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight:700;
}
.esii5-txt p{
  margin: calc(10 * var(--u)) 0 0;
  color:var(--body);
  font-size: calc(27 * var(--u));
  line-height: calc(34 * var(--u));
}

.esii5-link{
  height: calc(47 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
}
.esii5-link span{
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  border-radius:50%;
  background:var(--arrow);
  display:flex;
  align-items:center;
  justify-content:center;
}
.esii5-link svg{
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  display:block;
}

.esii5-foot{
  display:flex;
  align-items:center;
  margin: calc(26 * var(--u)) calc(-21 * var(--u)) 0;
  min-height: calc(149 * var(--u));
  border-radius: calc(18 * var(--u));
  padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u)) calc(48 * var(--u));
  background: linear-gradient(180deg,var(--foot-a),var(--foot-b));
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(10,60,120,.18);
}
.esii5-foot-ic{ flex:none; width: calc(91 * var(--u)); height: calc(104 * var(--u)); }
.esii5-foot-ic svg{ width:100%; height:100%; display:block; }
.esii5-foot-sep{
  flex:none;
  width: calc(2 * var(--u));
  height: calc(92 * var(--u));
  margin: 0 calc(35 * var(--u)) 0 calc(44 * var(--u));
  background:rgba(255,255,255,.55);
}
.esii5-foot p{
  margin:0;
  color:#fff;
  font-size: calc(27 * var(--u));
  line-height: calc(34 * var(--u));
}

@media (max-width:700px){
  .esii5__in{ --u:1px; }
  .esii5__in{ padding:14px 12px 24px; }
  .esii5-title{ font-size:24px; line-height:1.2; letter-spacing:-.2px; }
  .esii5-sub{ margin-top:10px; max-width:none; }
  .esii5-sub p{ font-size:14px; line-height:20px; }
  .esii5-sub::before,.esii5-sub::after{ display:none; }
  .esii5-steps{ margin-top:20px; }

  .esii5-card{
    align-items:center;
    padding:34px 16px 18px;
    border-width:2px;
    border-radius:14px;
    min-height:0;
    gap:14px;
  }
  .esii5-num{
    left:-6px; top:-6px;
    width:44px; height:44px;
    font-size:24px;
    box-shadow:0 2px 6px rgba(12,60,130,.22);
  }
  .esii5-ic{ flex:none; width:56px; height:56px; }
  .esii5-ic svg{ width:36px; height:36px; }
  .esii5-sep{ display:none; }
  .esii5-txt{ flex:1 1 auto; margin-top:0; }
  .esii5-txt h3{ font-size:16px; line-height:22px; }
  .esii5-txt p{ font-size:14px; line-height:20px; margin-top:6px; }


  @supports ((-webkit-mask-image:radial-gradient(#000,#000)) or (mask-image:radial-gradient(#000,#000))){
    .esii5-card{
      -webkit-mask-image: radial-gradient(circle 31px at 16px 16px, rgba(0,0,0,0) 97%, #000 100%);
      mask-image: radial-gradient(circle 31px at 16px 16px, rgba(0,0,0,0) 97%, #000 100%);
    }
  }

  .esii5-link{ height:30px; }
  .esii5-link span{ width:30px; height:30px; }
  .esii5-link svg{ width:16px; height:16px; }

  .esii5-foot{
    margin:18px 0 0;
    padding:18px 16px;
    min-height:0;
    border-radius:14px;
  }
  .esii5-foot-ic{ width:44px; height:50px; }
  .esii5-foot-sep{ height:52px; margin:0 16px; }
  .esii5-foot p{ font-size:14px; line-height:20px; }
}

@media (prefers-reduced-motion:reduce){
  .esii5__in--anim .esii5-item,.esii5__in--anim .esii5-foot{ transition:none; opacity:1; transform:none; }
}