/* =====================================================================
   05 · ПРОЦЕСС — шаги с линией, которая прорисовывается при прокрутке
   ===================================================================== */
.process { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.process__aside { position: sticky; top: 120px; display: grid; gap: 24px; max-width: 40ch; color: var(--muted); }

.steps { position: relative; display: grid; gap: clamp(40px, 5vw, 72px); padding-left: 56px; }
.steps__line { position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.steps__line i { position: absolute; inset: 0; background: linear-gradient(var(--violet), var(--cyan), var(--lime)); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }

.step { position: relative; display: grid; gap: 10px; }
.step::before {
  content: ""; position: absolute; left: -48px; top: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line); transition: background .4s, border-color .4s, box-shadow .4s;
}
.step.on::before { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 18px color-mix(in srgb, var(--lime) 60%, transparent); }
.step__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
.step__n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.1; color: var(--muted); transition: color .4s; }
.step.on h3, .no-js .step h3 { color: var(--ink); }
.step__time { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.step p { max-width: 52ch; color: var(--ink-soft); }

@media (width <= 800px) {
  .process { grid-template-columns: minmax(0, 1fr); }
  .process__aside { position: static; }
}
@media (width <= 699px) {
  .steps { padding-left: 44px; }
  .step::before { left: -36px; }
  .steps__line { left: 7px; }
}