.step-flow { background: var(--teal-white); }

/* 2-column layout for homepage */
.step-flow__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-xl);
  align-items: start;
}
.step-flow__right { position: sticky; top: 120px; }

/* Steps */
.step-flow__steps { display: flex; flex-direction: column; gap: var(--space-lg); }
.step-flow__step {
  display: grid; grid-template-columns: 80px 1fr;
  gap: var(--space-md); align-items: start;
}
.step-flow__number {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--black); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.step-flow__content h3 { font-size: 1.375rem; margin-bottom: 6px; }
.step-flow__content p { font-size: 1rem; color: var(--text-muted); line-height: 1.6; }
.step-flow__mockup {
  margin-top: var(--space-sm); aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
}

/* ── Square diagram ── */
.step-flow__diagram {
  position: relative; width: 400px; height: 400px;
}
.step-flow__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.step-flow__node {
  width: 76px; height: 76px; border-radius: 16px;
  background: var(--white); border: 2px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  position: absolute; z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0.25;
  animation: node-glow 7.5s ease-in-out infinite;
}
.step-flow__node svg { width: 30px; height: 30px; }
.step-flow__node--tl { top: 70px; left: 70px; animation-delay: 0s; }
.step-flow__node--tr { top: 70px; left: 330px; animation-delay: 1.5s; }
.step-flow__node--br { top: 330px; left: 330px; animation-delay: 3s; }
.step-flow__node--bl { top: 330px; left: 70px; animation-delay: 4.5s; }
.step-flow__node--c  { top: 200px; left: 200px; animation-delay: 6s; }

.step-flow__node-label {
  position: absolute; top: calc(100% + 6px);
  font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap; color: var(--text-muted);
}

@keyframes node-glow {
  0%, 100% { opacity: 0.25; transform: translate(-50%,-50%) scale(1); border-color: rgba(0,0,0,0.08); }
  8% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); border-color: var(--gold); box-shadow: 0 0 20px rgba(253,175,28,0.25); }
  16% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); border-color: var(--gold); }
  22% { opacity: 0.25; transform: translate(-50%,-50%) scale(1); border-color: rgba(0,0,0,0.08); box-shadow: none; }
}

@media (max-width: 768px) {
  .step-flow__layout { grid-template-columns: 1fr; }
  .step-flow__right { display: none; }
  .step-flow__step { grid-template-columns: 48px 1fr; gap: var(--space-sm); }
  .step-flow__number { width: 44px; height: 44px; font-size: 1rem; }
}