/* Three quiet, CSS-only scenes; the original brand marks remain upright. */
.has-service-art .product-visual{isolation:isolate}
.service-art-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.service-art-scene::before,.service-art-scene::after{content:"";position:absolute;pointer-events:none}
.has-service-art .service-logo-stage{position:relative;z-index:2;display:grid;place-items:center;width:106px;height:106px;border-radius:28px;background:linear-gradient(145deg,#fff,#fffffff0);border:1px solid #fff;box-shadow:0 16px 28px #2f5d4e13,0 3px 7px #2f5d4e08,inset 0 -3px 5px #ffffffa6;animation:priliv-art-float 10s ease-in-out infinite;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.product-card.has-service-art .service-logo-stage .product-logo{width:58px;height:58px;object-fit:contain;transform:none;transition:none}
.popular-grid .has-service-art .service-logo-stage{width:124px;height:124px;border-radius:32px}
.popular-grid .has-service-art .service-logo-stage .product-logo{width:68px;height:68px}
.has-service-art .product-tag,.has-service-art .product-arrow{z-index:3}
.has-service-art .product-tag{background:#ffffffce;backdrop-filter:blur(8px);border:1px solid #ffffff9c}
.has-service-art:is(:hover,:focus-visible) .service-logo-stage{transform:translateY(-4px) scale(1.025);box-shadow:0 23px 36px #2f5d4e1a,0 4px 10px #2f5d4e08,inset 0 -3px 5px #ffffffa6}
.art-orbit{position:absolute;left:50%;top:50%;display:block;border-radius:50%;border:1px solid #7bb99a50;transform:translate(-50%,-50%) rotate(var(--art-angle,0deg));animation:priliv-art-orbit 14s ease-in-out infinite alternate}
.art-node,.art-spark{position:absolute;display:block;animation:priliv-art-drift 11s ease-in-out infinite alternate}
.art-node{width:8px;height:8px;border-radius:50%}
.art-spark{width:7px;height:7px;border-radius:50%}

/* ChatGPT: two mint orbital paths, small satellites, and a white tile. */
.has-service-art[data-service="chatgpt"] .product-visual{background:radial-gradient(ellipse at 18% 12%,#d3f0e2 0,transparent 43%),radial-gradient(ellipse at 92% 83%,#cce5dd 0,transparent 42%),linear-gradient(135deg,#f0faf5,#e1efea)}
.has-service-art[data-service="chatgpt"] .service-logo-stage{animation-delay:-3s}
.has-service-art[data-service="chatgpt"] .service-art-scene::before{left:50%;top:50%;width:210px;height:210px;transform:translate(-50%,-50%);border:1px solid #ffffff96;border-radius:50%;box-shadow:0 0 0 25px #ffffff1f,0 0 0 54px #ffffff18}
.has-service-art[data-service="chatgpt"] .service-art-scene::after{left:50%;bottom:19%;width:113px;height:16px;transform:translateX(-50%);border-radius:50%;background:#4b8c6e10;filter:blur(6px)}
.has-service-art[data-service="chatgpt"] .art-orbit-one{--art-angle:-25deg;width:255px;height:115px;border-color:#76a99466}
.has-service-art[data-service="chatgpt"] .art-orbit-two{--art-angle:28deg;width:275px;height:141px;border-color:#8bbfa752;animation-delay:-7s}
.has-service-art[data-service="chatgpt"] .art-node-one{left:20%;top:65%;background:#79a995;box-shadow:0 0 0 5px #ffffff60}
.has-service-art[data-service="chatgpt"] .art-node-two{right:20%;top:27%;width:10px;height:10px;background:#b1d4c0;box-shadow:0 0 0 5px #ffffff54;animation-delay:-5s}
.has-service-art[data-service="chatgpt"] .art-spark-one{left:31%;top:20%;width:4px;height:4px;background:#95b8a7;animation-delay:-4s}
.has-service-art[data-service="chatgpt"] .art-spark-two{right:30%;bottom:16%;background:#ffffffe0;box-shadow:0 0 0 1px #8eb5a326;animation-delay:-2s}

/* Claude: a warm sun halo and fine radial rays around a round disc. */
.has-service-art[data-service="claude"] .product-visual{background:radial-gradient(ellipse at 52% 48%,#f2d5bc 0,#f8e8d8 40%,transparent 72%),linear-gradient(125deg,#fbf3e8,#f1dfd0)}
.has-service-art[data-service="claude"] .service-logo-stage{border-radius:50%;background:linear-gradient(145deg,#fffdf8,#fff8ed);box-shadow:0 15px 30px #a0643d15,0 3px 8px #a0643d08,inset 0 -3px 6px #ffffffbf;animation-duration:12s;animation-delay:-6s}
.has-service-art[data-service="claude"] .service-art-scene::before{left:50%;top:50%;width:290px;height:290px;transform:translate(-50%,-50%) rotate(-5deg);border-radius:50%;background:repeating-conic-gradient(from 8deg,#bd8b652f 0deg 1deg,transparent 1deg 20deg);-webkit-mask-image:radial-gradient(circle,transparent 0 79px,#000 80px 132px,transparent 133px);mask-image:radial-gradient(circle,transparent 0 79px,#000 80px 132px,transparent 133px);animation:priliv-art-rays 14s ease-in-out infinite alternate}
.has-service-art[data-service="claude"] .service-art-scene::after{left:50%;top:50%;width:172px;height:172px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff6e900 50%,#ffffff35 70%);border:1px solid #fff5e9bf}
.has-service-art[data-service="claude"] .art-orbit-one{--art-angle:0deg;width:209px;height:209px;border-color:#bb896139;animation-duration:12s}
.has-service-art[data-service="claude"] .art-orbit-two{--art-angle:0deg;width:259px;height:259px;border-color:#c492632d;animation-delay:-6s}
.has-service-art[data-service="claude"] .art-node-one{left:25%;top:23%;width:6px;height:6px;background:#d1a57b;box-shadow:0 0 0 4px #fff6ea5e;animation-delay:-2s}
.has-service-art[data-service="claude"] .art-node-two{right:21%;bottom:22%;width:7px;height:7px;background:#d5b18c;animation-delay:-5s}
.has-service-art[data-service="claude"] .art-spark-one{left:19%;bottom:33%;width:4px;height:4px;background:#d0af8f;animation-delay:-3s}
.has-service-art[data-service="claude"] .art-spark-two{right:28%;top:16%;width:5px;height:5px;background:#fffaf1;animation-delay:-7s}

/* Gemini: a blue-lilac light ribbon with a few distant four-point stars. */
.has-service-art[data-service="gemini"] .product-visual{background:radial-gradient(ellipse at 80% 17%,#e6d9fa 0,transparent 48%),radial-gradient(ellipse at 12% 83%,#cce5fa 0,transparent 50%),radial-gradient(ellipse at 50% 50%,#fff 0,transparent 54%),linear-gradient(125deg,#edf4ff,#e6e9fc)}
.has-service-art[data-service="gemini"] .service-logo-stage{border-radius:30px;background:linear-gradient(145deg,#fff,#f9faff);box-shadow:0 17px 35px #626db41a,0 3px 8px #626db409,inset 0 -3px 6px #ffffffd9;animation-duration:11s;animation-delay:-1s}
.has-service-art[data-service="gemini"] .service-art-scene::before{left:50%;top:50%;width:350px;height:66px;transform:translate(-50%,-50%) rotate(-31deg);border-radius:50%;background:linear-gradient(180deg,transparent,#ffffffba 48%,#ffffff26 64%,transparent);filter:blur(8px)}
.has-service-art[data-service="gemini"] .service-art-scene::after{left:50%;top:50%;width:188px;height:188px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #ffffffb8;box-shadow:0 0 0 24px #ffffff20}
.has-service-art[data-service="gemini"] .art-orbit-one{--art-angle:-31deg;width:276px;height:105px;border-color:#aab3df70;animation-duration:13s}
.has-service-art[data-service="gemini"] .art-orbit-two{--art-angle:-29deg;width:309px;height:157px;border-color:#ffffffb3;animation-delay:-6s;animation-duration:13s}
.has-service-art[data-service="gemini"] .art-node-one{left:21%;top:28%;width:5px;height:5px;background:#aabce3;animation-delay:-3s}
.has-service-art[data-service="gemini"] .art-node-two{right:25%;bottom:18%;width:4px;height:4px;background:#b7a9dd;animation-delay:-6s}
.has-service-art[data-service="gemini"] .art-spark{width:21px;height:21px;border-radius:0;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);background:linear-gradient(135deg,#fff,#c5c5ee)}
.has-service-art[data-service="gemini"] .art-spark-one{right:18%;top:21%;animation-delay:-2s}
.has-service-art[data-service="gemini"] .art-spark-two{left:23%;bottom:22%;width:14px;height:14px;background:linear-gradient(135deg,#fff,#a9c9f4);animation-delay:-7s}

@keyframes priliv-art-float{0%,100%{translate:0 3px}50%{translate:0 -3px}}
@keyframes priliv-art-orbit{from{transform:translate(-50%,-50%) rotate(calc(var(--art-angle,0deg) - 5deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--art-angle,0deg) + 5deg))}}
@keyframes priliv-art-drift{from{translate:0 -2px}to{translate:0 3px}}
@keyframes priliv-art-rays{from{transform:translate(-50%,-50%) rotate(-5deg)}to{transform:translate(-50%,-50%) rotate(5deg)}}

@media(max-width:1000px){.popular-grid .has-service-art .service-logo-stage{width:110px;height:110px;border-radius:28px}.popular-grid .has-service-art .service-logo-stage .product-logo{width:61px;height:61px}.popular-grid .has-service-art[data-service="claude"] .service-logo-stage{border-radius:50%}}
@media(min-width:621px) and (max-width:750px){.popular-grid .has-service-art .service-logo-stage{width:96px;height:96px;border-radius:25px}.popular-grid .has-service-art .service-logo-stage .product-logo{width:53px;height:53px}.popular-grid .has-service-art[data-service="claude"] .service-logo-stage{border-radius:50%}.popular-grid .has-service-art .service-art-scene{scale:.9}}
@media(max-width:620px){.popular-grid .has-service-art .service-logo-stage{width:112px;height:112px;border-radius:29px}.popular-grid .has-service-art .service-logo-stage .product-logo{width:62px;height:62px}.popular-grid .has-service-art[data-service="claude"] .service-logo-stage{border-radius:50%}}
@media(prefers-reduced-motion:reduce){.has-service-art,.has-service-art *,.has-service-art ::before,.has-service-art ::after{animation:none!important;transition:none!important}.has-service-art:is(:hover,:focus-visible),.has-service-art:is(:hover,:focus-visible) .service-logo-stage{transform:none}.has-service-art .service-logo-stage,.has-service-art .art-node,.has-service-art .art-spark{translate:none}}