.hero { position: relative; isolation: isolate; }
.hero-connection-flow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-flow-canvas { position: absolute; display: block; overflow: visible; }
.hero-inner { position: relative; z-index: 2; }
.hero-flow-halo { fill: #77dcff; opacity: .2; }
.hero-flow-core { fill: #f2ffff; stroke: #97e9ff; stroke-width: .5; filter: drop-shadow(0 0 1.3px #8de8ff); }
@media (max-width: 700px) { .hero::before { z-index: 1; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .hero-flow-packet { visibility: hidden; } }