/* ===========================================================
   VORS · Process / Timeline
   =========================================================== */
.vors-process {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg);
}

/* Desktop grid: 4 cols with vertical dividers */
.vors-process--desktop {
  display: none;
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px) {
  .vors-process--desktop { display: grid; }
}

.vors-process__step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  position: relative;
}
.vors-process__step + .vors-process__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2rem;
  bottom: 2rem;
  width: 1px;
  background-color: var(--line);
}

/* Огромная цифра — тонкая, с градиентом brand→ink */
.vors-process__num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 200;
  font-size: 5rem;
  line-height: 1;
  background: linear-gradient(180deg, var(--brand) 0%, var(--ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 1024px) { .vors-process__num { font-size: 6rem; } }

.vors-process__title {
  font-family: 'Space Grotesk', 'Inter Tight', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.vors-process__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.vors-process__time {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Mobile: vertical timeline with line + dots */
.vors-process--mobile {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 2.5rem;
  border: none;
  background: transparent;
  overflow: visible;
}
@media (min-width: 768px) { .vors-process--mobile { display: none; } }

.vors-process--mobile::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background-color: var(--line);
}

.vors-process__step--mobile {
  position: relative;
  padding: 1rem 0 1.5rem;
}
.vors-process__step--mobile::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 1.25rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--brand);
  box-shadow: 0 0 0 4px var(--bg);
  animation: vors-process-pulse 2.4s ease-in-out infinite;
}
.vors-process__step--mobile:last-child::before {
  animation: none;
}
.vors-process__step--mobile .vors-process__num {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

@keyframes vors-process-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.7; }
}

/* Last step gets check */
.vors-process__time--check {
  color: var(--brand);
  font-weight: 700;
}

/* На тёмном фоне секции (section-bg-dark) убираем вертикальные разделители колонок */
.section-bg-dark .vors-process__step + .vors-process__step::before {
  display: none;
}

/* На тёмном фоне секции (section-bg-dark) — перекрашиваем мобильную ленту */
.section-bg-dark .vors-process--mobile::before {
  background-color: rgba(255, 255, 255, 0.2);
}
.section-bg-dark .vors-process__step--mobile::before {
  box-shadow: 0 0 0 4px #0E4C7A;
}
.section-bg-dark .vors-process__step--mobile .vors-process__title { color: #fff; }
.section-bg-dark .vors-process__step--mobile .vors-process__text { color: rgba(255, 255, 255, 0.75); }
.section-bg-dark .vors-process__step--mobile .vors-process__num {
  background: linear-gradient(180deg, var(--brand-vivid) 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-bg-dark .vors-process__step--mobile .vors-process__time { color: var(--brand-vivid); }
.section-bg-dark .vors-process__step--mobile .vors-process__time--check { color: var(--brand-vivid); }

/* Animation on view */
.vors-process__step {
  opacity: 0;
  transform: translateY(20px);
  animation: vors-fade-in-up var(--duration-slow) var(--ease) forwards;
}
.vors-process__step:nth-child(1) { animation-delay: 0ms; }
.vors-process__step:nth-child(2) { animation-delay: 150ms; }
.vors-process__step:nth-child(3) { animation-delay: 300ms; }
.vors-process__step:nth-child(4) { animation-delay: 450ms; }
