/* ═══════════════════════════════════════════
   ПРОЦЕС
═══════════════════════════════════════════ */
.process-section { background: var(--sand); padding: 110px 56px; }
.process-top { text-align: center; margin-bottom: 80px; }
.process-top .tag { justify-content: center; }
.process-top h2 { max-width: 520px; margin: 0 auto; }

.steps { display: grid; grid-template-columns: repeat(4,1fr); position: relative; }
.steps::before {
  content: ''; position: absolute; top: 31px;
  left: calc(12.5% + 22px); right: calc(12.5% + 22px);
  height: 1px;
  background: linear-gradient(to right, var(--moss), var(--terra), var(--gold), var(--moss));
  opacity: .28;
}
.step { padding: 0 24px; text-align: center; }
.step-dot {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--fog); border: 1.5px solid rgba(24,18,8,.16);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--moss);
  position: relative; z-index: 1;
  transition: all .38s;
}
.step:hover .step-dot { background: var(--moss); color: var(--cream); border-color: var(--moss); transform: scale(1.1); }
.step-title { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 12px; color: var(--soil); }
.step-text { font-size: 14px; font-weight: 400; line-height: 1.82; color: rgba(24,18,8,.68); }