#services .service { overflow: hidden; }
#services .service .num { margin-bottom: 8px; }
#services .service-art { position: relative; margin: 4px -10px 16px; color: #e4b8ff; background: radial-gradient(ellipse at center,#b087f21a,transparent 70%); }
#services .service-art-2 { color: #8ee5ff; background: radial-gradient(ellipse at center,#6cccf41a,transparent 70%); }
#services .service-art-3 { color: #ffcea7; background: radial-gradient(ellipse at center,#ffc38a15,transparent 70%); }
.service-art svg { display: block; width: 100%; height: auto; }
.service-art .sa-window { fill: #202439; stroke: currentColor; stroke-opacity: .35; }
.service-art .sa-line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-art-controls { display: flex; justify-content: flex-end; margin-top: 16px; }
.service-art-controls button { font: inherit; font-size: 12px; color: #d6dbee; border: 1px solid #ffffff29; border-radius: 24px; padding: 9px 16px; background: #ffffff06; cursor: pointer; }
.service-art-controls button:hover { border-color: #d7b9ff; }
.service-art-controls button:focus-visible { outline: 2px solid #b9daff; outline-offset: 4px; }
.service-art .sa-build { animation: sa-build 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.service-art .sa-build-2 { animation-delay: .5s; }
.service-art .sa-build-3 { animation-delay: 1s; }
.service-art .sa-device { animation: sa-device 8s ease-in-out infinite both; }
.service-art .sa-cursor { animation: sa-cursor 8s ease-in-out infinite both; }
.service-art .sa-click { animation: sa-click 8s ease-out infinite both; transform-origin: 200px 155px; }
.service-art .sa-notice { animation: sa-notice 8s ease-in-out infinite both; }
.service-art .sa-cta { animation: sa-cta 8s ease-in-out infinite; transform-origin: 180px 153px; }
.service-art .sa-fly-product { animation: sa-cart 8s cubic-bezier(.4,0,.2,1) infinite both; transform-origin: 77px 130px; }
.service-art .sa-cart-done { animation: sa-notice 8s ease-in-out infinite both; }
#services:not(.art-in-view) .service-art *, #services.art-paused .service-art * { animation-play-state: paused !important; }
@keyframes sa-build { 0%,8% { opacity: 0; transform: translateY(14px); } 20%,86% { opacity: 1; transform: translateY(0); } 98%,100% { opacity: 0; transform: translateY(-6px); } }
@keyframes sa-device { 0%,28% { opacity: 0; transform: translate(18px,12px); } 43%,88% { opacity: 1; transform: translate(0,0); } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes sa-cursor { 0%,10% { transform: translate(298px,195px); opacity: 0; } 18% { opacity: 1; } 38%,52% { transform: translate(198px,152px); opacity: 1; } 69%,100% { transform: translate(240px,175px); opacity: 0; } }
@keyframes sa-click { 0%,37% { opacity: 0; transform: scale(.3); } 40% { opacity: .8; } 52%,100% { opacity: 0; transform: scale(1.9); } }
@keyframes sa-notice { 0%,45% { opacity: 0; transform: translateY(9px); } 58%,87% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes sa-cta { 0%,37%,45%,100% { transform: scale(1); } 40% { transform: scale(.94); } }
@keyframes sa-cart { 0%,22% { opacity: 0; transform: translate(0,0) scale(1); } 26% { opacity: 1; } 47% { opacity: .9; transform: translate(155px,-55px) scale(.6); } 57% { opacity: 0; transform: translate(240px,-72px) scale(.15); } 100% { opacity: 0; transform: translate(240px,-72px) scale(.15); } }
@media(prefers-reduced-motion:reduce) {
  .service-art * { animation: none !important; }
  .service-art .sa-fly-product,.service-art .sa-cursor,.service-art .sa-click { display: none; }
  .service-art-controls { display: none; }
}