/* =========================================================
   ДАРСИ — этапы работы. Левая колонка залипает,
   правая прокручивается и раскрывает этапы.
   ========================================================= */

.stp{
  --s-ink:#0B0B0C;
  --s-muted:rgba(255,255,255,.62);
  --s-line:rgba(255,255,255,.13);
  --s-rose:#E3A9BA;

  position:relative;
  padding:clamp(56px,7vw,110px) var(--pad-x);
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(227,169,186,.10) 0%, rgba(227,169,186,0) 60%),
    var(--s-ink);
  color:#fff;
  letter-spacing:-.022em;
}
.stp__inner{
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,80px);
  align-items:start;
}

/* =========================================================
   ЛЕВАЯ КОЛОНКА — липкая
   ========================================================= */
.stp__aside{position:sticky; top:clamp(90px,10vh,120px)}

.stp__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px); line-height:1; letter-spacing:-.015em;
  margin:0 0 clamp(26px,2.8vw,42px); max-width:16ch;
}
.stp__sub{
  margin:0 0 clamp(22px,2.4vw,32px); max-width:44ch;
  font-size:clamp(14px,1.1vw,17px); line-height:1.5;
  letter-spacing:-.03em; color:var(--s-muted);
}

.stp__photo{
  position:relative; overflow:hidden;
  aspect-ratio:2/3; margin:0 0 clamp(20px,2.2vw,30px);
  background:#141416;
}
.stp__video{
  max-width:none;
  position:absolute; inset:-1px;
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover; display:block;
  transform:scale(1.02);
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.stp__photo:hover .stp__video{transform:scale(1)}
.stp__photo::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(11,11,12,0) 52%, rgba(11,11,12,.66) 100%);
}

/* счётчик поверх фото */
.stp__count{
  position:absolute; left:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; gap:6px;
  padding:clamp(14px,1.4vw,22px);
  font-family:var(--f-head); font-weight:400; letter-spacing:-.01em;
}
.stp__count b{font-size:clamp(26px,2.6vw,40px); line-height:1; color:#fff}
.stp__count span{font-size:clamp(13px,1.1vw,16px); color:rgba(255,255,255,.5)}

.stp__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:clamp(50px,3.4vw,58px); padding:0 clamp(24px,2vw,34px);
  background:var(--accent-grad); color:var(--accent-ink);
  font-family:var(--f-body); font-size:15px; font-weight:400; letter-spacing:-.03em;
  transition:background .25s ease, transform .2s ease;
}
.stp__btn:hover{background:var(--accent-grad-hi); transform:translateY(-1px)}
.stp__btn svg{width:15px; height:15px; fill:currentColor; transition:transform .25s ease}
.stp__btn:hover svg{transform:translateX(3px)}

/* =========================================================
   ПРАВАЯ КОЛОНКА — этапы
   ========================================================= */
.stp__list{
  position:relative; margin:0; padding:0 0 0 clamp(34px,3.4vw,58px); list-style:none;
}
/* вертикальная линия прогресса */
.stp__list::before,
.stp__list::after{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:1px;
}
.stp__list::before{background:var(--s-line)}
.stp__list::after{
  background:linear-gradient(180deg,#F6D6DE,#E3A9BA);
  transform-origin:top; transform:scaleY(var(--p,0));
}

.stp-item{
  position:relative;
  padding:clamp(18px,2vw,28px) 0;
  border-bottom:1px solid var(--s-line);
  opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.stp-item:last-child{border-bottom:0}
.stp-item.is-in{opacity:1; transform:none}

/* точка на линии */
.stp-item::before{
  content:''; position:absolute;
  left:calc(-1 * clamp(34px,3.4vw,58px) - 4px); top:clamp(26px,2.6vw,38px);
  width:9px; height:9px; background:#2A2A2E;
  outline:4px solid var(--s-ink);
  transition:background .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.stp-item.is-in::before{background:var(--s-rose); transform:scale(1.15)}

.stp-item__num{
  display:block; margin:0 0 8px;
  font-size:11.5px; letter-spacing:.14em; color:rgba(255,255,255,.38);
  font-variant-numeric:tabular-nums;
}
.stp-item__name{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(19px,1.7vw,27px); line-height:1.12; letter-spacing:-.015em;
  margin:0 0 10px;
}
.stp-item__txt{
  margin:0 0 10px; max-width:52ch;
  font-size:clamp(13.5px,1vw,15.5px); line-height:1.55;
  letter-spacing:-.03em; color:var(--s-muted);
}
.stp-item__txt:last-of-type{margin-bottom:0}
.stp-item__meta{
  display:inline-block; margin-top:12px;
  padding:5px 11px; background:rgba(255,255,255,.06); border:1px solid var(--s-line);
  font-size:11.5px; letter-spacing:.02em; color:rgba(255,255,255,.6);
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1000px){
  /* одна колонка: заголовок → видео → этапы → кнопка в конце блока */
  .stp__inner{display:flex; flex-direction:column; gap:clamp(22px,3vw,32px)}
  .stp__aside{display:contents}
  .stp__title{order:1; max-width:none; margin-bottom:0}
  .stp__photo{order:2; max-width:none; margin:0; width:100%; align-self:stretch}
  .stp__list{order:3}
  .stp__btn{order:4; align-self:stretch}
  /* левая колонка не липкая — счётчик показывал бы не тот этап */
  .stp__count{display:none}
}

@media (max-width:720px){
  .stp{padding-bottom:calc(var(--bar-h, 0px) + env(safe-area-inset-bottom))}
  .stp__btn{width:100%}
  .stp__list{padding-left:26px}
  .stp-item::before{left:-30px}
  .stp-item__txt{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .stp-item{opacity:1; transform:none; transition:none}
  .stp__list::after{transition:none}
}