.service-graphic{position:relative;isolation:isolate;overflow:hidden;width:100%;border-radius:24px;border:1px solid rgba(62,200,214,.28);background:radial-gradient(ellipse at 60% 45%,rgba(0,155,179,.17),transparent 65%),linear-gradient(145deg,#101a32,#0b0b25 75%);box-shadow:0 40px 95px -35px rgba(0,0,0,.85);color:#eaf5ff}
.sg-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 28px 0}.sg-eyebrow{display:block;color:#72dce5;font-size:11px;letter-spacing:.16em;font-weight:600}.sg-heading h2{font-size:clamp(19px,2vw,24px);font-weight:500;line-height:1.3;margin:9px 0 0}
.sg-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(117,223,231,.3);background:rgba(62,200,214,.07);color:#b5eef2;cursor:pointer}.sg-toggle:hover{background:rgba(62,200,214,.19)}.sg-toggle:focus-visible{outline:2px solid #75dfe7;outline-offset:4px}.sg-play{display:none}.service-graphic.is-paused .sg-play{display:block}.service-graphic.is-paused .sg-pause{display:none}.service-graphic.is-paused *{animation-play-state:paused!important}
.sg-scene{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:#50c4d1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin:18px 0 0}.sg-surface{fill:#102d42;stroke:#54bfcb;stroke-width:2}.sg-bright{fill:none;stroke:#86eaf0;stroke-width:2.5}.sg-muted{fill:none;stroke:#478297;stroke-width:2}.sg-ring{fill:none;stroke:#2a586f;stroke-width:1}.sg-ring-dashed{fill:none;stroke:#3f7c90;stroke-width:1.5;stroke-dasharray:5 9}.sg-node{fill:#0b273a;stroke:#48bdce;stroke-width:1.5}.sg-platform{fill:#112d45;stroke:#469bb3;stroke-width:1.5}.sg-dot,.sg-packet{fill:#7ce8ed;stroke:#b8ffff}.sg-shield{fill:#123d4d;stroke:#7ce8ed;stroke-width:3;filter:drop-shadow(0 0 16px #3ec8d644)}.sg-threat-fill{fill:#4b2338;stroke:#f38b9e}.sg-threat{stroke:#f38b9e;stroke-width:2}.sg-threat-route{stroke:#724355;stroke-dasharray:4 8;stroke-width:1.3}.sg-barrier{stroke:#76ebcc;stroke-width:4;filter:drop-shadow(0 0 7px #76ebcc88)}.sg-svg-label{fill:#92c9d7;stroke:none;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:1px}
.sg-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px 22px 26px}.sg-tags span{padding:7px 12px;border:1px solid #34465f;border-radius:999px;color:#c0cfe3;font-size:13px;line-height:1.4}
.sg-incoming{animation:sgIncoming 4.5s ease-in-out infinite}.sg-breathe{animation:sgBreathe 4.5s ease-in-out infinite}.sg-float,.sg-book{animation:sgFloat 5s ease-in-out infinite}.sg-rise{animation:sgRise 5.5s ease-in-out infinite}.sg-transfer{animation:sgTransfer 4.5s ease-in-out infinite}.sg-flow{stroke:#67d7dc;stroke-width:2;stroke-dasharray:7 13;animation:sgFlow 4s linear infinite}.sg-signal{stroke:#87eee1;stroke-width:3;stroke-dasharray:130;animation:sgSignal 4s ease-in-out infinite;filter:drop-shadow(0 0 5px #3ec8d655)}.sg-delay{animation-delay:-1.5s}.sg-delay-two{animation-delay:-3s}
@keyframes sgIncoming{0%,15%{transform:translateX(0);opacity:.35}55%{transform:translateX(66px);opacity:1}75%,100%{transform:translateX(66px);opacity:0}}
@keyframes sgBreathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes sgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sgRise{0%,100%{transform:translateY(4px)}50%{transform:translateY(-6px)}}
@keyframes sgTransfer{0%{transform:translateX(0);opacity:0}15%,75%{opacity:1}95%,100%{transform:translateX(170px);opacity:0}}
@keyframes sgFlow{to{stroke-dashoffset:-80}}
@keyframes sgSignal{0%,100%{stroke-dashoffset:130;opacity:.35}50%,75%{stroke-dashoffset:0;opacity:1}}
@media(max-width:480px){.sg-heading{padding:22px 18px 0;gap:8px}.sg-heading h2{font-size:19px}.sg-tags{gap:6px;padding:8px 14px 22px}.sg-tags span{font-size:12px;padding:6px 9px}.sg-scene{margin-top:16px}.sg-svg-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){.service-graphic *{animation:none!important}.sg-incoming{opacity:.65}.sg-toggle{display:none}.sg-signal{stroke-dashoffset:0}}