/* step-illus.css — Square diagram illustrations (How It Works) */
.si-diagram {
  position: relative; width: 340px; height: 340px;
  margin: var(--space-md) auto 0;
}
.si-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.si-node {
  width: 64px; height: 64px; border-radius: 14px;
  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: si-glow 7.5s ease-in-out infinite;
}
.si-node svg { width: 26px; height: 26px; }
.si-node--tl { top: 60px; left: 60px; animation-delay: 0s; }
.si-node--tr { top: 60px; left: 280px; animation-delay: 1.5s; }
.si-node--br { top: 280px; left: 280px; animation-delay: 3s; }
.si-node--bl { top: 280px; left: 60px; animation-delay: 4.5s; }
.si-node--c  { top: 170px; left: 170px; animation-delay: 6s; }
.si-node-label {
  position: absolute; top: calc(100% + 6px);
  font-size: 0.75rem; font-weight: 600;
  white-space: nowrap; color: var(--text-muted);
}
@keyframes si-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) {
  .si-diagram { width: 280px; height: 280px; }
  .si-node { width: 52px; height: 52px; border-radius: 12px; }
  .si-node svg { width: 22px; height: 22px; }
  .si-node--tl { top: 50px; left: 50px; }
  .si-node--tr { top: 50px; left: 230px; }
  .si-node--br { top: 230px; left: 230px; }
  .si-node--bl { top: 230px; left: 50px; }
  .si-node--c  { top: 140px; left: 140px; }
  .si-node-label { font-size: 0.6875rem; }
}