/* Connected product ecosystem */
.connected-system{min-height:620px;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;isolation:isolate}
.connected-system:before{content:"";position:absolute;inset:4% -8%;z-index:-3;background:radial-gradient(ellipse at center,rgba(4,231,136,.14),transparent 42%),radial-gradient(ellipse at 62% 48%,rgba(90,183,255,.08),transparent 56%);filter:blur(3px)}
.system-glow{position:absolute;left:50%;top:50%;width:265px;height:265px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(4,231,136,.2),rgba(4,231,136,.045) 48%,transparent 70%);filter:blur(4px)}
.system-path{position:absolute;left:50%;top:50%;z-index:-1;border:1px solid rgba(101,240,180,.18);border-radius:50%;transform:translate(-50%,-50%)}
.system-path:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.path-one{width:83%;height:43%;transform:translate(-50%,-50%) rotate(-12deg)}
.path-one:after{right:9%;top:12%}
.path-two{width:95%;height:68%;transform:translate(-50%,-50%) rotate(18deg);border-color:rgba(90,183,255,.14)}
.path-two:after{left:13%;bottom:7%;background:#5ab7ff;box-shadow:0 0 14px #5ab7ff}
.path-three{width:60%;height:84%;transform:translate(-50%,-50%) rotate(48deg);border-color:rgba(169,144,255,.14)}
.path-three:after{right:6%;bottom:18%;background:#a990ff;box-shadow:0 0 14px #a990ff}
.connected-system .system-kicker{position:absolute;left:4%;top:3%;display:flex;align-items:center;gap:9px;color:var(--mint);font-size:9px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.system-kicker i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.connected-system .system-core{z-index:3;width:184px;height:184px;border-radius:50%;border:1px solid rgba(101,240,180,.62);background:radial-gradient(circle at 32% 25%,#0b5367,#052e43 68%);box-shadow:0 0 0 12px rgba(4,231,136,.035),0 0 80px rgba(4,231,136,.2)}
.connected-system .system-core:before{width:214px;height:214px;border-style:dashed;border-color:rgba(101,240,180,.24);animation:ecosystem-spin 26s linear infinite}
.connected-system .system-core:after{display:none}
.connected-system .system-core span{color:var(--bone);font:750 25px/1.03 Manrope;letter-spacing:-.045em}
.connected-system .system-core small{margin-top:12px;color:var(--green);font-size:8px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.connected-system .system-node{--node-tone:var(--green);inset:auto;z-index:4;min-width:0;width:max-content;max-width:205px;padding:11px 16px 11px 11px;display:flex;align-items:center;gap:11px;border:1px solid color-mix(in srgb,var(--node-tone) 34%,rgba(255,255,255,.12));border-radius:999px;background:rgba(2,27,42,.88);box-shadow:0 18px 42px -28px #000;backdrop-filter:blur(12px);transition:transform .25s,border-color .25s,box-shadow .25s}
.connected-system .system-node:hover,.connected-system .system-node:focus-visible{transform:translateY(-4px);border-color:var(--node-tone);box-shadow:0 20px 45px -27px var(--node-tone);outline:none}
.connected-system .system-node>i{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;color:#022033;background:var(--node-tone);font:800 9px Manrope;font-style:normal;box-shadow:0 0 22px color-mix(in srgb,var(--node-tone) 38%,transparent)}
.connected-system .system-node>span{display:block;min-width:0}
.connected-system .system-node b{color:var(--bone);font:750 12px/1.12 Manrope;white-space:nowrap}
.connected-system .system-node small{margin-top:4px;color:color-mix(in srgb,var(--node-tone) 82%,white);font-size:7px;font-weight:700;letter-spacing:.1em;white-space:nowrap}
.connected-system .n1{left:2%;top:16%}.connected-system .n2{left:37%;top:4%}.connected-system .n3{right:0;top:20%}.connected-system .n4{right:-2%;bottom:20%}.connected-system .n5{left:38%;bottom:3%}.connected-system .n6{left:0;bottom:20%}.connected-system .n7{left:-2%;top:47%}
.connected-system .system-status{bottom:0;max-width:75%;white-space:normal;text-align:center;line-height:1.5}
@keyframes ecosystem-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:1100px){.connected-system{max-width:900px;min-height:650px;margin:12px auto 0}}
@media(max-width:620px){.connected-system{min-height:auto;margin-top:34px;padding:76px 0 0;display:grid;grid-template-columns:1fr;gap:10px}.connected-system:before{inset:0 -30%}.connected-system .system-glow{top:95px;width:210px;height:210px}.connected-system .system-path{display:none}.connected-system .system-kicker{left:50%;top:0;transform:translateX(-50%);white-space:nowrap}.connected-system .system-core{position:relative;left:auto;top:auto;width:156px;height:156px;margin:0 auto 24px;transform:none}.connected-system .system-core:before{width:180px;height:180px}.connected-system .system-node{position:relative;inset:auto!important;width:100%;max-width:none;min-height:62px;padding-right:18px;transform:none}.connected-system .system-node:hover,.connected-system .system-node:focus-visible{transform:translateX(4px)}.connected-system .system-node b{font-size:13px}.connected-system .system-node small{font-size:8px}.connected-system .system-status{position:relative;left:auto;bottom:auto;max-width:none;margin-top:12px;justify-content:center;transform:none}.product-system{min-height:auto}}
@media(prefers-reduced-motion:reduce){.connected-system .system-core:before{animation:none}}