.service-network{position:relative;width:100%;aspect-ratio:1;perspective:1000px;direction:ltr;isolation:isolate;background:radial-gradient(circle at center,#3255ad22,transparent 60%)}.network-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 clamp(42px,5vw,68px) Arial;letter-spacing:-3px;color:#fff;text-align:center;text-shadow:0 0 45px #6686d940;z-index:3}.network-logo span{color:#5c7ed5}.network-logo small{display:block;font:8px Arial;letter-spacing:2px;color:#456ac9;margin-top:13px;white-space:nowrap}.network-logo:before{content:'';position:absolute;inset:-35px;border:1px solid #6082d930;border-radius:50%;animation:source-pulse 3.8s ease-out infinite;z-index:-1}.service-orbit{position:absolute;width:29%;aspect-ratio:1;border:0;padding:0;background:#20221d;border-radius:13%;transform-style:preserve-3d;box-shadow:2px 2px 0 #3458b5,4px 4px 0 #35362d,7px 12px 25px #0008;animation:card-hover 6s ease-in-out infinite;cursor:pointer}.card-face{position:absolute;inset:0;overflow:hidden;border-radius:13%;display:block;backface-visibility:hidden}.card-face img{position:absolute;max-width:none;width:109%;height:109%;left:-4.5%;top:-4.5%;object-fit:cover}.service-orbit:after{content:'';position:absolute;inset:0;border-radius:13%;background:linear-gradient(125deg,transparent 25%,#fff2 45%,transparent 65%);pointer-events:none}.card-0{left:8%;top:7%;transform:rotateY(18deg) rotateZ(-10deg)}.card-1{right:8%;top:7%;transform:rotateY(-18deg) rotateZ(10deg);animation-delay:-1.5s}.card-2{left:8%;bottom:7%;transform:rotateY(18deg) rotateZ(8deg);animation-delay:-3s}.card-3{right:8%;bottom:7%;transform:rotateY(-18deg) rotateZ(-8deg);animation-delay:-4.5s}.service-orbit:hover{filter:brightness(1.15)}.service-streams{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.service-streams path{fill:none;stroke:#6d8cdb;stroke-width:1.5;stroke-dasharray:7 13;animation:stream-out 3s linear infinite;opacity:.65}.service-streams path:nth-child(2){animation-delay:-.7s}.service-streams path:nth-child(3){animation-delay:-1.4s}.service-streams path:nth-child(4){animation-delay:-2.1s}@keyframes stream-out{to{stroke-dashoffset:-100}}@keyframes card-hover{50%{translate:0 -10px}}@keyframes source-pulse{0%{scale:.7;opacity:.8}100%{scale:1.6;opacity:0}}
.demo-phone{border:6px solid #74776e;box-shadow:0 0 0 1px #c5c6bd,0 25px 60px #0008;border-radius:45px;overflow:hidden}.demo-phone .device-status{border-radius:35px 35px 0 0}.demo-phone .device-island{width:78px;height:21px;border-radius:20px;background:#000}.demo-phone .demo-screen{border-radius:0 0 32px 32px}
@media(max-width:650px){.service-network{max-width:450px;margin:10px auto}.network-logo{font-size:46px}.network-logo small{font-size:7px;letter-spacing:1px}.service-orbit{width:30%}.network-logo:before{inset:-20px}.service-streams path{stroke-width:2}}@media(prefers-reduced-motion:reduce){.service-orbit,.service-streams path,.network-logo:before{animation:none}}

/* Crisp product faces with restrained perspective and a thin metallic edge. */
.service-network{perspective:1600px}
.service-orbit{width:34%;border-radius:7%;background:linear-gradient(135deg,#abbeef,#2f4fa2 45%,#28271f);box-shadow:1px 2px 0 #889fdc,2px 4px 0 #2d4c9c,3px 6px 0 #302b20,8px 18px 25px #0009;animation-duration:8s;transition:filter .3s,scale .3s}
.service-network .card-face{inset:0;border-radius:7%;transform:translateZ(2px);background:#141414}
.service-network .card-face img{width:109%;height:109%;left:-4.5%;top:-4.5%;object-fit:cover;image-rendering:auto;filter:none}
.service-network .card-2 .card-face img{width:105.71%;height:105.71%;left:-2.855%;top:-2.855%}
.service-network .card-3 .card-face img{width:102.25%;height:102.25%;left:-1.125%;top:-1.125%}
.service-orbit:after{border-radius:7%;transform:translateZ(3px);background:linear-gradient(130deg,#ffffff10,transparent 30%,transparent 80%,#7c9bea0c);box-shadow:inset 0 0 0 1px #99b3f428}
.card-0{left:4%;top:4%;transform:rotateX(5deg) rotateY(10deg) rotateZ(-5deg)}
.card-1{right:4%;top:4%;transform:rotateX(5deg) rotateY(-10deg) rotateZ(5deg)}
.card-2{left:4%;bottom:4%;transform:rotateX(-5deg) rotateY(10deg) rotateZ(4deg)}
.card-3{right:4%;bottom:4%;transform:rotateX(-5deg) rotateY(-10deg) rotateZ(-4deg)}
.service-orbit:hover{filter:brightness(1.04);scale:1.035}
.service-orbit:focus-visible{outline:2px solid #7797e9;outline-offset:8px}
@keyframes card-hover{50%{translate:0 -5px}}
@media(max-width:650px){.service-orbit{width:35%}.network-logo{font-size:39px}.network-logo small{font-size:6px}.network-logo:before{inset:-13px}}
.service-network .card-1 .card-face img{width:120.81%;height:104.85%;left:-10.5%;top:-2.5%;object-fit:fill}

/* Supplied artwork: crop the outer canvas only, preserving the complete card. */
.service-network .service-orbit{animation:none;transform-style:flat;border-radius:6%;box-shadow:0 2px 0 #5f7fd1,0 4px 0 #1d3062,0 14px 26px #0007}
.service-network .card-face{transform:none;border-radius:6%}
.service-network .service-orbit:after{transform:none;background:none;box-shadow:inset 0 0 0 1px #819ada33}
.service-network .card-0{transform:rotate(-2deg)}
.service-network .card-1{transform:rotate(2deg);aspect-ratio:1152/1222}
.service-network .card-2{transform:rotate(2deg)}
.service-network .card-3{transform:rotate(-2deg)}
.service-network .card-0 .card-face img{width:109.424%;height:109.424%;left:-4.712%;top:-4.712%;object-fit:fill}
.service-network .card-1 .card-face img{width:108.854%;height:102.619%;left:-4.427%;top:-1.309%;object-fit:fill}
.service-network .card-2 .card-face img,.service-network .card-3 .card-face img{width:105.378%;height:105.378%;left:-2.689%;top:-2.689%;object-fit:fill}