.network-visual{min-height:480px;isolation:isolate}.network-grid{position:absolute;inset:10px;border-radius:28px;background:radial-gradient(circle at center,rgba(47,74,255,.17),transparent 43%),linear-gradient(rgba(70,102,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(70,102,255,.07) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px;mask-image:radial-gradient(circle at center,#000 38%,transparent 78%)}.network-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.network-lines path{fill:none;stroke:rgba(84,105,255,.32);stroke-width:1.5;stroke-dasharray:6 9;animation:lineFlow 9s linear infinite}.packet{fill:#6bff70;filter:drop-shadow(0 0 7px #6bff70)}.packet-two,.packet-four{fill:#5b6cff;filter:drop-shadow(0 0 7px #5b6cff)}.network-hub{position:absolute;left:50%;top:50%;width:116px;height:116px;transform:translate(-50%,-50%);display:grid;place-content:center;text-align:center;border-radius:28px;background:linear-gradient(145deg,#243dcc,#111c77);border:1px solid #6474ff;box-shadow:0 0 0 12px rgba(61,79,225,.08),0 0 45px rgba(50,70,255,.35);animation:hubBreathe 3.2s ease-in-out infinite}.network-hub span{font-size:35px;font-weight:800;line-height:1}.network-hub small{font-size:8px;letter-spacing:.18em;color:#8dff87;margin-top:9px}.network-node{position:absolute;width:126px;min-height:82px;padding:12px 13px;border-radius:14px;background:linear-gradient(145deg,rgba(16,38,64,.97),rgba(8,20,36,.97));border:1px solid rgba(88,110,255,.32);box-shadow:0 15px 35px rgba(0,0,0,.28);display:grid;grid-template-columns:31px 1fr;column-gap:8px;align-items:center;animation:nodeFloat 4s ease-in-out infinite}.network-node::after{content:"";position:absolute;inset:-1px;border-radius:14px;border:1px solid transparent;animation:nodeSignal 4s ease-out infinite}.network-node i{grid-row:1/3;font-style:normal;width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:rgba(69,87,255,.15);color:#7280ff;font-size:19px}.network-node b{font-size:11px;align-self:end}.network-node small{font-size:8px;color:#8095aa;align-self:start}.node-computer{left:0;top:42px}.node-wifi{right:0;top:42px;animation-delay:-1s}.node-camera{left:0;bottom:45px;animation-delay:-2s}.node-access{right:0;bottom:45px;animation-delay:-3s}.node-camera i,.node-access i{color:#70ff6c;background:rgba(112,255,108,.08)}.network-status{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;padding:8px 13px;border:1px solid rgba(105,126,255,.2);border-radius:20px;background:rgba(7,17,31,.78);color:#8ea3b7;font-size:10px}.network-status span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6bff70;box-shadow:0 0 9px #6bff70;margin-right:7px;animation:statusBlink 1.8s ease-in-out infinite}@keyframes lineFlow{to{stroke-dashoffset:-150}}@keyframes hubBreathe{50%{box-shadow:0 0 0 21px rgba(61,79,225,.03),0 0 65px rgba(50,70,255,.48);transform:translate(-50%,-50%) scale(1.04)}}@keyframes nodeFloat{50%{transform:translateY(-7px)}}@keyframes nodeSignal{0%,58%{border-color:transparent;transform:scale(1);opacity:0}70%{border-color:rgba(105,126,255,.45);opacity:1}100%{transform:scale(1.13);opacity:0}}@keyframes statusBlink{50%{opacity:.35}}@media(max-width:560px){.network-visual{min-height:390px}.network-node{width:105px;min-height:70px;padding:9px;grid-template-columns:25px 1fr}.network-node i{width:25px;height:25px;font-size:15px}.network-node b{font-size:9px}.network-node small{font-size:7px}.network-hub{width:92px;height:92px;border-radius:22px}.network-hub span{font-size:27px}.node-computer,.node-camera{left:-2px}.node-wifi,.node-access{right:-2px}.network-status{font-size:8px}}@media(prefers-reduced-motion:reduce){.network-lines path,.network-hub,.network-node,.network-node::after,.network-status span{animation:none}.packet{display:none}}