/* Shared, decorative technology language; never conveys live system status. */
:root{--tech-cyan:#28c6ef;--tech-green:#45d5ae}
.photo-hero .connection-graph{position:absolute;inset-block:12% 8%;inset-inline-end:1%;inline-size:54%;pointer-events:none;z-index:2;opacity:.8}
.connection-graph svg{inline-size:100%;block-size:100%;overflow:visible}
.connection-links{stroke:#58c7e5;stroke-width:1;opacity:.28}.connection-signals{stroke:var(--tech-cyan);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 4px #28c6ef88)}
.connection-signals path{stroke-dasharray:5 95;animation:connection-flow 7s linear infinite}.connection-signals path:nth-child(2){animation-delay:-2s;stroke:var(--tech-green)}.connection-signals path:nth-child(3){animation-delay:-4s}.connection-signals path:nth-child(4){animation-delay:-6s;stroke:var(--tech-green)}
.connection-halo{fill:#28c6ef09;stroke:#28c6ef44;stroke-width:1}.connection-core{fill:#103b50;stroke:#45d5ae;stroke-width:1}.connection-icon,.connection-node path,.connection-node circle{stroke:#9ee9f5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.connection-node rect{fill:#0c2c40e8;stroke:#5bcfe766}.connection-node text{fill:#d7f7ff;stroke:none;text-anchor:middle;font-family:inherit;font-size:16px;font-weight:700}
body.product-page main .product-hero{position:relative;isolation:isolate;overflow:hidden}
.product-hero>.connection-graph{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16}.product-hero>.connection-graph svg{inline-size:100%;block-size:100%}.product-hero .connection-node text{display:none}.product-hero .connection-node rect,.product-hero .connection-core{fill:none;stroke:#007fa8}.product-hero .connection-icon,.product-hero .connection-node path,.product-hero .connection-node circle{stroke:#007fa8}
.graph-toggle{display:block;position:relative;margin-block:16px 0;margin-inline:auto;background:transparent;border:0;border-block-end:1px solid #52697566;color:#526975;font:inherit;font-size:12px;cursor:pointer;padding:4px 8px}
.tech-surface{position:relative;isolation:isolate;--spot-x:50%;--spot-y:50%;transition:box-shadow .25s,border-color .25s}
.tech-surface::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(230px circle at var(--spot-x) var(--spot-y),#28c6ef16,transparent 75%);transition:opacity .25s;z-index:-1}
.tech-surface:is(:hover,:focus-visible,:focus-within){border-color:#28a8c1!important;box-shadow:0 0 0 1px #28c6ef25,0 8px 28px #13a7bd12!important}.tech-surface:is(.spot-active,:focus-visible,:focus-within)::after{opacity:1}
.tech-surface:not(.button)::before{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;pointer-events:none;background:linear-gradient(90deg,transparent 10%,var(--tech-cyan) 45%,var(--tech-green) 55%,transparent 90%);background-size:250% 100%;opacity:0}
.tech-surface:not(.button):is(:hover,:focus-within)::before{opacity:.85;animation:surface-flow 1.4s ease-out 1}
body main .button.tech-surface:is(:hover,:focus-visible){box-shadow:0 0 0 2px #45d5ae55,0 6px 24px #28c6ef40!important}
.motion-paused .connection-signals path,.graph-paused .connection-signals path,.graph-hidden .connection-signals path,.graph-offscreen .connection-signals path,.page-hidden .connection-signals path,.offscreen .connection-signals path{animation-play-state:paused}
@keyframes connection-flow{to{stroke-dashoffset:-100}}@keyframes surface-flow{from{background-position:200% 0}to{background-position:-50% 0}}
@media(max-width:800px){.photo-hero .connection-graph{inline-size:95%;inset-inline-end:-25%;opacity:.22}.photo-hero .connection-node text{display:none}.product-hero>.connection-graph{opacity:.09}}
@media(hover:none){.tech-surface::after,.tech-surface::before{display:none}}
@media(prefers-reduced-motion:reduce){.connection-signals path,.tech-surface::before{animation:none!important}.tech-surface,.tech-surface::after{transition:none}.graph-toggle{display:none}.connection-signals path{stroke-dasharray:none;opacity:.3}}