/* Image and overlay share one 1200 × 800 coordinate system at every breakpoint. */
.mesh-scene { --mesh-play-state: paused; position: absolute; inset: 0; }
.mesh-scene[data-running="true"] { --mesh-play-state: running; }
.mesh-scene__artwork { position: absolute; width: 112%; left: -4%; top: 4%; aspect-ratio: 3 / 2; }
.mesh-scene__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mesh-scene__beam-glow { stroke: #164e49; stroke-width: 6; stroke-opacity: .2; stroke-linecap: round; }
.mesh-scene__beam { stroke: #adffe3; stroke-width: 2.5; stroke-dasharray: 5 8; stroke-linecap: round; animation: mesh-signal-flow 1.5s linear infinite; animation-play-state: var(--mesh-play-state); }
.mesh-scene__node { --node-strength: 0; }
.mesh-scene__node[data-active] { --node-strength: 1; }
.mesh-scene__node-shadow { fill: #173a3b; opacity: .2; }
.mesh-scene__node-halo { fill: #83edc6; fill-opacity: .16; stroke: #c7ffe8; stroke-width: 1.6; opacity: calc(.25 + var(--node-strength) * .7); }
.mesh-scene__pulse { visibility: hidden; transform-origin: 0 0; animation: mesh-node-pulse 2.4s ease-out infinite; animation-play-state: var(--mesh-play-state); }
.mesh-scene__node[data-active] .mesh-scene__pulse { visibility: visible; }
.mesh-scene__pulse ellipse { stroke: #b8ffe3; stroke-width: 1.8; }
.mesh-scene__node-led { fill: #afffce; }
.mesh-scene__person-shadow { fill: #123739; opacity: .26; }
.mesh-scene__phone-signal { filter: drop-shadow(0 1px 2px #103939); }
.mesh-scene__caption { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #abc8d01f; border-radius: 100px; background: #0d1926e6; white-space: nowrap; }
.mesh-scene__status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #c1d8d6; }
.mesh-scene__status > span { width: 5px; height: 5px; border-radius: 50%; background: #a2e8d2; }
@keyframes mesh-signal-flow { to { stroke-dashoffset: -26; } }
@keyframes mesh-node-pulse { 0% { opacity: .65; transform: scale(.8); } 90%, 100% { opacity: 0; transform: scale(1.8); } }
@media (max-width: 767px) {
    .mesh-scene__artwork { width: 110%; left: -5%; top: 0; }
    .wifi-hero__visual:has(.mesh-scene) { aspect-ratio: 1.13; margin-bottom: 8px; }
    .mesh-scene__caption { bottom: -6px; }
}
@media (prefers-reduced-motion: reduce) {
    .mesh-scene__pulse, .mesh-scene__beam { animation: none; }
    .mesh-scene__pulse { display: none; }
}