.synapse-section { background: linear-gradient(180deg, #0f172233 0%, #ffffff00 100%); padding: 48px 0; }
.synapse-content { max-width: 1100px; margin: 0 auto; padding: 12px 20px; }
.synapse-title { font-size: 28px; margin: 0 0 8px; color: #0b2140; }
.synapse-lead { margin: 0 0 18px; color: #324a63; }
.synapse-layout { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.synapse-steps { flex: 1 1 320px; list-style: decimal; margin: 0; padding-left: 20px; color: #233245; }
.synapse-steps li { margin: 8px 0; line-height:1.4; }
.synapse-visual { flex: 1 1 320px; display:flex; align-items:center; justify-content:center; }
.synapse-svg { width:100%; max-width:360px; height:180px; }
.node { fill: url(#g1); filter: drop-shadow(0 4px 8px rgba(30,30,60,0.08)); transition: transform 350ms ease; }
.node-input { fill:#00c3ff; }
.node-process { fill:#7b61ff; }
.node-decision { fill:#6a00ff; }
.node-output { fill:#00d08c; }
.link { stroke-opacity:0.95; stroke-linecap:round; opacity:0.9; }
.synapse-note { margin-top:14px; color:#5a6b7b; font-size:14px; }

/* simple pulse animation for nodes */
@keyframes pulse { 0% { transform: scale(1); opacity:1 } 50% { transform: scale(1.08); opacity:0.9 } 100% { transform: scale(1); opacity:1 } }
.node.pulse { animation: pulse 1800ms ease-in-out infinite; }

@media (max-width:768px) {
  .synapse-layout { flex-direction:column; }
  .synapse-svg { height:160px; }
}