.shop-network{position:relative;isolation:isolate;overflow:hidden;padding:76px 0 59px;background:radial-gradient(circle at 50% 58%,rgba(25,158,246,.24),transparent 32%),linear-gradient(135deg,#082f67 0%,#075ebd 55%,#073b83 100%);color:#fff}
.shop-network:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(180deg,transparent 4%,#000 38%,#000 75%,transparent)}
.shop-network-inner{position:relative}
.shop-network-heading{max-width:760px;margin:0 auto;text-align:center}
.shop-network-eyebrow{display:inline-flex;align-items:center;gap:9px;color:#a8e7ff;font-size:.71rem;font-weight:800;letter-spacing:.16em;line-height:1.4}
.shop-network-eyebrow:before,.shop-network-eyebrow:after{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.shop-network-heading h2{margin:15px 0 13px;color:#fff;font-size:clamp(2rem,3.9vw,3.35rem);font-weight:800;letter-spacing:-.055em;line-height:1.12;text-wrap:balance}
.shop-network-heading p{max-width:645px;margin:0 auto;color:#d5eaff;font-size:.93rem;line-height:1.75}
.shop-network-stage{position:relative;height:420px;max-width:1050px;margin:31px auto 0;overflow:hidden;border:1px solid rgba(179,226,255,.21);border-radius:30px;background:radial-gradient(circle at 50% 51%,rgba(69,183,255,.23),transparent 31%),linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 55%,rgba(1,33,89,.17));box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 28px 60px rgba(1,25,68,.19)}
.shop-network-stage:before,.shop-network-stage:after{content:"";position:absolute;top:52%;left:50%;width:338px;height:338px;border:1px solid rgba(170,225,255,.12);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.shop-network-stage:after{width:496px;height:496px;border-color:rgba(170,225,255,.07)}
.shop-network-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.shop-network-lines path{fill:none;stroke:#8ddcff;stroke-width:2;stroke-linecap:round;opacity:.58}
.shop-network-lines circle{fill:#b8efff;filter:drop-shadow(0 0 6px rgba(113,220,255,.9))}
.shop-network-lines-mobile{display:none}
.shop-network-hub,.shop-network-node{position:absolute;z-index:1;display:grid;place-items:center;transform:translate(-50%,-50%)}
.shop-network-hub{top:52%;left:50%;width:184px;min-height:184px;gap:4px;padding:15px 12px 12px;border:1px solid rgba(210,243,255,.56);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.08));box-shadow:0 21px 55px rgba(0,23,72,.35),inset 0 1px 0 rgba(255,255,255,.24);backdrop-filter:blur(7px)}
.shop-network-hub-image{display:block;width:130px;height:130px;overflow:hidden;border-radius:29px;background:#086ad5;box-shadow:0 11px 25px rgba(1,28,90,.28)}
.shop-network-hub-image img,.shop-network-node img{display:block;width:100%;height:100%;object-fit:cover}
.shop-network-hub strong{color:#fff;font-size:.84rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.shop-network-node{width:94px;height:94px;padding:4px;border:1px solid rgba(220,245,255,.77);border-radius:24px;background:rgba(255,255,255,.95);box-shadow:0 15px 34px rgba(0,23,70,.27),0 0 0 6px rgba(145,217,255,.09)}
.shop-network-node img{border-radius:19px}
.shop-network-node-1{top:30%;left:17%}
.shop-network-node-2{top:79%;left:30%}
.shop-network-node-3{top:30%;left:83%}
.shop-network-node-4{top:79%;left:70%}
.shop-network-node-5{top:14%;left:50%}
.shop-network-note{margin:17px 0 0;color:#b7d6f4;font-size:.68rem;line-height:1.5;text-align:center}
@media(max-width:760px){.shop-network{padding:58px 0 43px}.shop-network-heading{max-width:550px}.shop-network-heading h2{font-size:clamp(1.9rem,7vw,2.65rem)}.shop-network-heading p{font-size:.82rem}.shop-network-stage{height:390px;max-width:440px;margin-top:27px;border-radius:25px}.shop-network-lines-desktop{display:none}.shop-network-lines-mobile{display:block}.shop-network-stage:before{width:235px;height:235px}.shop-network-stage:after{width:340px;height:340px}.shop-network-hub{top:48.7%;width:148px;min-height:151px;padding:11px 9px 9px;border-radius:27px}.shop-network-hub-image{width:104px;height:104px;border-radius:23px}.shop-network-hub strong{font-size:.72rem}.shop-network-node{width:68px;height:68px;padding:3px;border-radius:19px;box-shadow:0 10px 24px rgba(0,23,70,.27),0 0 0 4px rgba(145,217,255,.09)}.shop-network-node img{border-radius:15px}.shop-network-node-1{top:19%;left:18%}.shop-network-node-2{top:19%;left:82%}.shop-network-node-3{top:66.7%;left:12.5%}.shop-network-node-4{top:66.7%;left:87.5%}.shop-network-node-5{top:89.2%;left:50%}.shop-network-note{max-width:420px;margin:15px auto 0}}
@media(max-width:380px){.shop-network-stage{height:356px}.shop-network-hub{width:132px;min-height:136px}.shop-network-hub-image{width:94px;height:94px}.shop-network-node{width:60px;height:60px}.shop-network-lines-mobile{height:100%}}

/* Motion starts only while this section is in view. The static diagram is the fallback. */
.shop-network-lines .shop-network-flow{stroke:#e0f8ff;stroke-width:2.7;stroke-dasharray:3 28;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 5px rgba(160,237,255,.9))}
.shop-network-hub:before{content:"";position:absolute;z-index:-1;inset:-12px;border:1px solid rgba(181,236,255,.7);border-radius:inherit;opacity:0;pointer-events:none}
.shop-network.is-active .shop-network-lines .shop-network-flow{opacity:.9;animation:shopNetworkFlow 3.6s linear infinite}
.shop-network.is-active .shop-network-hub{animation:shopNetworkHubFloat 5.8s ease-in-out infinite;will-change:transform}
.shop-network.is-active .shop-network-hub:before{animation:shopNetworkHalo 3.8s ease-out infinite}
.shop-network.is-active .shop-network-node{animation:shopNetworkNodeFloat 6.2s ease-in-out infinite;will-change:transform}
.shop-network.is-active .shop-network-node-1{animation-delay:-.4s}
.shop-network.is-active .shop-network-node-2{animation-delay:-2.1s}
.shop-network.is-active .shop-network-node-3{animation-delay:-3.7s}
.shop-network.is-active .shop-network-node-4{animation-delay:-1.3s}
.shop-network.is-active .shop-network-node-5{animation-delay:-4.8s}
.shop-network.is-active .shop-network-stage:before{animation:shopNetworkRing 5s ease-in-out infinite}
.shop-network.is-active .shop-network-stage:after{animation:shopNetworkRing 5s ease-in-out -2.5s infinite}
@keyframes shopNetworkFlow{to{stroke-dashoffset:-31}}
@keyframes shopNetworkHubFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-50%) translateY(-5px)}}
@keyframes shopNetworkNodeFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-50%) translateY(-7px)}}
@keyframes shopNetworkHalo{0%{opacity:.55;transform:scale(.96)}75%,100%{opacity:0;transform:scale(1.22)}}
@keyframes shopNetworkRing{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.shop-network-hub{backdrop-filter:none}.shop-network.is-active .shop-network-flow,.shop-network.is-active .shop-network-hub,.shop-network.is-active .shop-network-hub:before,.shop-network.is-active .shop-network-node,.shop-network.is-active .shop-network-stage:before,.shop-network.is-active .shop-network-stage:after{animation:none;will-change:auto}.shop-network-lines .shop-network-flow{opacity:0}}