/* === 30 · PROCESS — sticky-сплит + scrub-прогресс === */
.process { position: relative; }
.process::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 40% at 80% 10%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 70%);
}

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.process-aside { position: sticky; top: clamp(4rem, 14vh, 9rem); }
.process-title {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  margin: 1rem 0 1.25rem; max-width: 14ch;
}
.process-title-grad {
  background: var(--grad-eyes); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.process-lead { color: var(--text-dim); max-width: 38ch; }

.process-progress {
  margin-top: 2.2rem; height: 4px; width: min(100%, 280px);
  background: var(--line); border-radius: 999px; overflow: hidden;
}
.process-progress-bar {
  /* scrub анимирует scaleX (компоновщик), а не width (layout каждый кадр) */
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--grad-soft);
  box-shadow: var(--glow-blue);
}

.process-steps {
  list-style: none;
  display: flex; flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.process-step {
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--ice) 16%, transparent);
  border-radius: var(--radius);
  background: rgba(15,21,36,.78);
  transition: border-color .4s, transform .4s, box-shadow .4s;
}
.process-step:hover {
  border-color: color-mix(in srgb, var(--sky) 55%, transparent);
  transform: translateX(6px);
  box-shadow: var(--glow-cyan);
}
.process-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1;
  background: var(--grad-eyes); -webkit-background-clip: text; background-clip: text; color: transparent;
  flex: none;
}
.process-step-body { display: flex; flex-direction: column; gap: .55rem; }
.process-step-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.process-step-head h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.process-time {
  font-size: .78rem; letter-spacing: .08em; color: var(--cyan); font-weight: 600;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  white-space: nowrap;
}
.process-step p { color: var(--text-dim); max-width: 48ch; }

.process-step[data-rise] { opacity: 0; transform: translateY(36px); }

@media (max-width: 820px) {
  .process-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-aside { position: static; }
  .process-progress { display: none; }
}