/* Each panel illustrates the work, with a distinct signal and movement. */
.services-section{position:relative;border-block:1px solid var(--line);background:radial-gradient(ellipse at 50% 0,#293b2226,transparent 65%),#09100f}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;perspective:1200px}
.service{--module-accent:#b2f879;--service-x:50%;--service-y:50%;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.8fr);gap:0 18px;padding:28px 30px 24px;border:1px solid #7eac7440;border-radius:10px;background:linear-gradient(145deg,#152119,#0b1412 75%);transform:perspective(900px) rotateX(var(--service-rx,0deg)) rotateY(var(--service-ry,0deg));transition:transform .35s ease-out,border-color .35s,box-shadow .35s}
.service-module-2{--module-accent:#7dd8d1}.service-module-3{--module-accent:#b9aff0}.service-module-4{--module-accent:#e0cc93}
.service:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 300px 220px at var(--service-x) var(--service-y),color-mix(in srgb,var(--module-accent) 9%,transparent),transparent 75%);opacity:.6;transition:opacity .4s}
.service:after{content:'';position:absolute;right:0;top:0;width:65px;height:65px;pointer-events:none;border-top:1px solid var(--module-accent);border-right:1px solid var(--module-accent);border-radius:0 10px 0 0;opacity:.4;transition:width .5s,height .5s,opacity .4s}
.service:is(:hover,:focus-within){border-color:color-mix(in srgb,var(--module-accent) 55%,transparent);box-shadow:0 14px 45px #0003,0 0 30px color-mix(in srgb,var(--module-accent) 5%,transparent)}
.service:is(:hover,:focus-within):before{opacity:1}.service:is(:hover,:focus-within):after{width:110px;height:100px;opacity:.8}
.service-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:30px}
.service-module-id{display:flex;gap:10px;align-items:center;font:10px var(--mono);letter-spacing:.15em;color:#a0b19c}.service-module-id i{width:5px;height:5px;background:var(--module-accent);box-shadow:0 0 12px var(--module-accent);border-radius:50%;animation:service-beacon 4s ease-in-out infinite}
.service-symbol{font:18px var(--mono);color:var(--module-accent);opacity:.7}
.service h3{grid-column:1;grid-row:2;align-self:end;font-size:24px;line-height:1.25;letter-spacing:-.035em;margin:0;overflow-wrap:anywhere;hyphens:auto}
.service>p{grid-column:1;grid-row:3;color:var(--muted);font-size:13px;line-height:1.85;margin:18px 0 25px;overflow-wrap:anywhere}
.service-visual{grid-column:2;grid-row:2/4;align-self:center;min-width:0;position:relative;color:var(--module-accent);padding-bottom:24px;filter:drop-shadow(0 0 15px color-mix(in srgb,var(--module-accent) 10%,transparent));transition:transform .6s}
.service-visual:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#a7ca9c36 .6px,transparent .7px);background-size:16px 16px;mask-image:radial-gradient(ellipse,#000,transparent 70%);z-index:-1}
.service-visual svg{display:block;width:100%;height:165px;overflow:visible;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.service-visual-coordinate{position:absolute;bottom:0;left:0;right:0;text-align:center;font:7px/1.5 var(--mono);letter-spacing:.06em;opacity:.5}
.service-wires{opacity:.26;stroke-width:.9}.service-fine{opacity:.45;stroke-width:1}.service-components{fill:#0b1613;stroke:currentColor;stroke-opacity:.5}
.service-packet{stroke-dasharray:12 240;stroke-dashoffset:250;stroke-width:2;animation:service-signal 4.5s linear infinite;filter:drop-shadow(0 0 4px currentColor)}
.service-packet.delayed{animation-delay:-2.2s}.service-module-3 .service-packet{animation-duration:5.5s}.service-module-4 .service-packet{animation-duration:6s}
.service-hub rect{fill:#17271b;stroke-opacity:.75}.service-hub{animation:service-hub 6s ease-in-out infinite;transform-origin:120px 90px}
.service-device-back{opacity:.5;animation:service-screen-back 8s ease-in-out infinite}.service-device-front{fill:#0d1a17;animation:service-screen-front 8s ease-in-out infinite}.service-device-front .service-fine{fill:none}.service-device-scan{stroke-width:2;animation:service-screen-scan 5s ease-in-out infinite}.service-device-spark{animation:service-beacon 4s ease-in-out infinite;stroke-width:1.5}
.service-flow-core{fill:#161624;animation:service-hub 5s ease-in-out infinite;transform-origin:126px 86px}.service-design-core{fill:#252216;animation:service-hub 7s ease-in-out infinite;transform-origin:120px 30px}
.service-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid #a5c3941a}
.service-tech{font:8px/1.7 var(--mono);letter-spacing:.04em;color:#819b89}
.service-link{display:inline-flex;align-items:center;gap:14px;font:10px/1.6 var(--mono);text-decoration:none;color:var(--module-accent)}.service-link span{font-size:18px;transition:transform .3s}.service-link:is(:hover,:focus-visible) span{transform:translate(3px,-3px)}
.services-section .service :is(.service-module-id i,.service-packet,.service-hub,.service-device-back,.service-device-front,.service-device-scan,.service-device-spark,.service-flow-core,.service-design-core){animation-play-state:paused}
.services-section.is-in-view .service :is(.service-module-id i,.service-packet,.service-hub,.service-device-back,.service-device-front,.service-device-scan,.service-device-spark,.service-flow-core,.service-design-core){animation-play-state:running}
.motion-paused .service,.motion-paused .service *{animation-play-state:paused!important;transform:none!important}
@keyframes service-signal{to{stroke-dashoffset:-250}}
@keyframes service-beacon{0%,100%{opacity:.4}45%{opacity:1}}
@keyframes service-hub{0%,100%{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes service-screen-back{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,-4px)}}
@keyframes service-screen-front{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,4px)}}
@keyframes service-screen-scan{0%,100%{transform:translateY(0);opacity:.1}40%{opacity:1}70%{transform:translateY(21px);opacity:.1}}
@media(max-width:1050px){.service{grid-template-columns:minmax(0,1fr);padding:26px}.service-visual{grid-column:1;grid-row:2;padding-bottom:22px;margin-bottom:24px}.service-visual svg{height:135px}.service h3{grid-row:3;font-size:23px}.service>p{grid-row:4}.service-top{margin-bottom:18px}.service-footer{align-self:end}}
@media(max-width:700px){.services-grid{grid-template-columns:minmax(0,1fr);gap:18px}.service{padding:23px}.service-top{margin-bottom:10px}.service-visual{margin:0 0 24px}.service-visual svg{height:135px}.service h3{font-size:24px}.service>p{font-size:13px;line-height:1.85;margin:14px 0 24px}.service-footer{padding-top:16px}.service-tech{font-size:7px}}
@media(prefers-reduced-motion:reduce){.service{transform:none!important}.service *{animation:none!important}.service:after,.service:before,.service-link span{transition:none}}