.process {
  background: var(--bg-light);
}

/* Заголовок в этом разделе крупнее стандартного .section-title
   (в Figma 64px против 44px в остальных разделах) */
@media (min-width: 600px) {
  .process .section-title {
    font-size: clamp(38px, 6.4vw, 64px);
  }
}

.glow--process-pink {
  width: 360px;
  height: 360px;
  right: 8%;
  top: 20%;
  background: radial-gradient(circle, rgba(240, 0, 117, 0.16), transparent 70%);
}

.glow--process-blue {
  width: 360px;
  height: 360px;
  left: 6%;
  top: 22%;
  background: radial-gradient(circle, rgba(18, 92, 235, 0.14), transparent 70%);
}

.process-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.process-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 34px -10px rgba(5, 13, 36, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  padding: 22px 22px 26px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  color: var(--white);
  transition: transform var(--transition-base);
}

.process-card:hover,
html.js-anim-ready .process-card.reveal.is-visible:hover {
  transform: scale(1.035);
}

.process-card__glow {
  position: absolute;
  width: 178px;
  height: 178px;
  right: -30px;
  top: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
}

.process-card__index {
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.process-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.process-card h3 {
  font-size: 21px;
  font-weight: 600;
}

.process-card p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.process-card--blue { background: var(--brand-blue-2); }
.process-card--pink { background: var(--brand-pink-2); }
.process-card--orange { background: var(--brand-orange-2); }
.process-card--purple { background: var(--brand-purple); }