/* ==========================================================================
   SECTION: CONNECTED BUSINESS SYSTEM (#connected-system)
   Compact animated pill chain — a pulse travels through it (see
   .flow-dot and the per-connector animation-delay set inline in HTML).
   ========================================================================== */

.flow-chain {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-node {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 1.25rem;
  background: var(--bg-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.flow-node:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-300);
}

.flow-node span.flow-node-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy-900);
}

.flow-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  position: relative;
}

.flow-connector::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--border-subtle);
  transform: translateX(-50%);
}

.flow-connector svg {
  position: relative;
  width: 14px;
  height: 14px;
  color: var(--accent-400);
  background: var(--bg-white);
}

.flow-connector .flow-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-500);
  transform: translateX(-50%);
  animation: flow-dot-travel 4.5s linear infinite;
}

@keyframes flow-dot-travel {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}