.architecture-router{position:absolute;z-index:3;left:27%;top:27%;width:22%;padding:18px;border:1px solid #8b7718;border-radius:20px;background:linear-gradient(145deg,rgba(28,26,14,.98),rgba(11,11,11,.98));box-shadow:0 0 0 1px #ffd40012,0 20px 60px rgba(0,0,0,.42),0 0 38px rgba(255,212,0,.08)}
.architecture-router>small{display:block;color:#b6a743;font:600 7px/1.3 'Space Grotesk';letter-spacing:.11em}.architecture-router>strong{display:block;margin-top:7px;color:#f1eee5;font:600 15px/1.15 'Space Grotesk'}.architecture-router>span{display:block;margin-top:9px;color:#98958d;font-size:9px}
.router-device{position:relative;height:68px;margin-top:15px;border:1px solid #5d5420;border-radius:10px;background:linear-gradient(180deg,#171717,#050505);box-shadow:inset 0 1px 0 #ffffff10,0 8px 18px #000}.router-device:before,.router-device:after{content:"";position:absolute;bottom:55px;width:3px;height:38px;border-radius:4px;background:#d4b600;box-shadow:0 0 10px #ffd40022}.router-device:before{left:13px;transform:rotate(-8deg);transform-origin:bottom}.router-device:after{right:13px;transform:rotate(8deg);transform-origin:bottom}.router-device>b{position:absolute;left:13px;top:15px;color:var(--yellow);font:600 21px/1 'Space Grotesk';letter-spacing:-.06em}.router-device>b:after{content:"";position:absolute;left:0;bottom:-7px;width:26px;height:3px;border-radius:99px;background:var(--yellow)}
.router-leds{position:absolute;left:13px;bottom:10px;display:flex;gap:5px}.router-leds i{width:4px;height:4px;border-radius:50%;background:#63d56d;box-shadow:0 0 7px #63d56d;animation:routerLed 1.8s ease-in-out infinite}.router-leds i:nth-child(2){animation-delay:-.6s}.router-leds i:nth-child(3){animation-delay:-1.2s}.router-ports{position:absolute;right:11px;bottom:10px;display:flex;gap:4px}.router-ports i{width:12px;height:9px;border:1px solid #6e6540;border-radius:2px;background:#0a0a0a}.router-ports i:nth-child(1){border-color:var(--yellow)}.router-radio{position:absolute;right:20px;top:15px;width:10px;height:10px;border:2px solid var(--yellow);border-radius:50%}.router-radio:before,.router-radio:after{content:"";position:absolute;inset:-7px;border:1px solid #ffd40050;border-radius:50%;animation:routerSignal 2.6s ease-out infinite}.router-radio:after{animation-delay:1.3s}
.architecture-onprem{left:3%;top:29%;width:21%}.architecture-cloud{left:52%;top:17%;width:25%}.architecture-backup{right:3%;top:29%;width:18%}.architecture-users{left:28%;right:28%}.route-to-router{left:22%;top:41%;width:7%;transform:rotate(0)}.route-to-cloud{left:47%;top:40%;width:8%;transform:rotate(-24deg)}.route-to-backup{left:75%;top:38%;width:9%;transform:rotate(17deg)}.route-to-users{left:64%;top:52%;width:23%;transform:rotate(90deg)}.route-to-router i:nth-child(2),.route-to-cloud i:nth-child(2){animation-direction:reverse}.architecture-status{color:#b6a743}
@keyframes routerLed{50%{opacity:.25}}@keyframes routerSignal{0%{transform:scale(.55);opacity:0}30%{opacity:.8}100%{transform:scale(1.8);opacity:0}}
.cloud-product-router{position:absolute;z-index:3;left:30%;top:36%;padding:20px 10px 12px;border:1px solid #887719;border-radius:9px;background:#0b0b0b;color:var(--yellow);font:600 9px/1 'Space Grotesk';letter-spacing:.05em;box-shadow:0 0 22px rgba(255,212,0,.1)}.cloud-product-router:before{content:"SI";position:absolute;top:6px;left:10px;font-size:11px;letter-spacing:-.04em}.cloud-product-router:after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:var(--yellow)}.cloud-product-cloud{left:59%}.cloud-product-onprem{left:5%;padding-left:10px;padding-right:10px}.cloud-product-users{right:4%;padding-left:9px;padding-right:9px}
@media(max-width:760px){.cloud-architecture{min-height:840px}.architecture-onprem{left:5%;top:10%;width:40%}.architecture-router{left:auto;right:5%;top:9%;width:43%}.architecture-cloud{left:5%;right:auto;top:42%;width:43%}.architecture-backup{right:5%;top:43%;width:40%}.architecture-users{left:7%;right:7%;bottom:7%}.route-to-router{left:42%;top:28%;width:15%;transform:rotate(0)}.route-to-cloud{left:72%;top:31%;width:23%;transform:rotate(112deg)}.route-to-backup{left:44%;top:55%;width:13%;transform:rotate(0)}.route-to-users{left:62%;top:66%;width:24%;transform:rotate(90deg)}.architecture-status{right:16px;bottom:18px}}
@media(prefers-reduced-motion:reduce){.router-leds i,.router-radio:before,.router-radio:after{animation:none}}