.matrix-theme .hero h1.wordmark-ready{position:relative;animation:none}
.wordmark-ready>.wordmark-ink{opacity:var(--wordmark-ink,1)}
.wordmark-particles{position:absolute;top:-40px;left:0;width:100%;height:calc(100% + 80px);pointer-events:none}
.motion-paused .wordmark-ready>.wordmark-ink{opacity:1!important}
.motion-paused .wordmark-particles{visibility:hidden}
.service-visual.has-live-diagram{height:auto;min-height:275px;margin:25px 0 30px;display:block}
.has-live-diagram .network-map,.has-live-diagram .terminal-visual{display:none!important}
.live-diagram{border-block:1px solid #31583c66;padding:13px 0 16px}
.diagram-meta{display:flex;justify-content:space-between;gap:12px;font:400 11px/1.5 var(--mono);letter-spacing:.035em;color:#7ea28a}
.live-diagram svg{display:block;width:100%;height:230px;overflow:visible;margin:8px 0}
.live-diagram svg text{fill:#9ccbad;font:400 14px var(--mono);text-anchor:middle;stroke:none}
.diagram-route{stroke:#2c583b;stroke-width:1}
.diagram-flow{stroke:#a2ffbe;stroke-width:2;stroke-dasharray:8 92;stroke-dashoffset:100;filter:drop-shadow(0 0 4px #7aff99);animation:diagram-transmit 3.45s linear infinite}
.diagram-node rect,.diagram-step>rect{fill:#0a1a10;stroke:#3c6948;stroke-width:1}
.live-diagram .diagram-icon{font-size:21px;fill:#87b597}
.diagram-node.is-active rect,.diagram-step.is-active>rect{stroke:#9bffb6;fill:#113021;filter:drop-shadow(0 0 6px #70ff9b18)}
.diagram-node.is-active .diagram-icon{fill:#bcffcf}
.diagram-step rect,.diagram-step text{transition:fill .3s,stroke .3s}
.diagram-halo{stroke:#7cdc9855;stroke-dasharray:2 7;transform-origin:200px 100px;animation:diagram-orbit 18s linear infinite}
.diagram-queue{stroke:#538265;stroke-width:2;animation:diagram-queue 3.45s ease-in-out infinite}
.diagram-step>circle{fill:#0e2719;stroke:#528562}.diagram-step.is-active>circle{stroke:#b8ffcc}
.live-diagram .diagram-result{font-size:17px;fill:#a6ffc1}
.diagram-layer text{text-anchor:start!important}.diagram-layer path,.diagram-phone path{stroke:#659777}
.diagram-layer{animation:diagram-breathe 5s ease-in-out infinite;animation-delay:calc(var(--layer)*-.5s)}
.reverse-layer{animation:diagram-expand 5.4s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--layer)*-.1s)}
.reverse-layer text{font-size:13px!important}
.diagram-scanner{stroke:#b8ffcc;stroke-width:1;filter:drop-shadow(0 0 5px #94ffb1);animation:diagram-scan 5.4s ease-in-out infinite}
.diagram-phone .diagram-field{fill:#1b3c28;stroke:#4a8e60}
.diagram-tap{fill:#afffc622;stroke:#b7ffc9;transform-origin:95px 108px;animation:diagram-tap 3.45s ease-out infinite}
.diagram-phases{display:flex;gap:8px;justify-content:space-between;font:400 12px/1.5 var(--mono);color:#789882}
.diagram-phases span{display:flex;gap:6px;align-items:center;transition:color .3s}
.diagram-phases i{font:inherit;color:#496d54}.diagram-phases .is-active{color:#b8ffcc}.diagram-phases .is-active i{color:#8bffb0}
.live-diagram:not(.is-running) *{animation-play-state:paused!important}
@keyframes diagram-transmit{to{stroke-dashoffset:0}}
@keyframes diagram-orbit{to{transform:rotate(360deg)}}
@keyframes diagram-queue{0%,100%{opacity:.25;transform:translateY(-3px)}45%,70%{opacity:1;transform:translateY(3px)}}
@keyframes diagram-breathe{50%{transform:translateY(-5px)}}
@keyframes diagram-expand{0%,100%{transform:translateY(calc((1 - var(--layer))*12px))}50%{transform:translateY(calc((var(--layer) - 1)*9px))}}
@keyframes diagram-scan{0%,100%{transform:translateY(-10px);opacity:0}15%,85%{opacity:.8}90%{transform:translateY(155px);opacity:0}}
@keyframes diagram-tap{0%,30%,100%{transform:scale(.5);opacity:0}40%{transform:scale(.8);opacity:1}70%{transform:scale(2.1);opacity:0}}
@media(max-width:760px){.service-visual.has-live-diagram{min-height:230px;margin-block:20px}.live-diagram svg{height:190px}.diagram-meta{font-size:10px}.diagram-phases{font-size:11px;flex-wrap:wrap;justify-content:flex-start;gap:7px 14px}.diagram-phases i{font-size:10px}.live-diagram .diagram-label{font-size:17px}.reverse-layer text{font-size:15px!important}}
@media(prefers-reduced-motion:reduce){.wordmark-ready>.wordmark-ink{opacity:1!important}.wordmark-particles{display:none}.live-diagram *{animation:none!important;transition:none!important}}