/* AIVA Group — CSS страницы «soprovod-websites» (вынесено из инлайн-<style> при рефакторинге).
   Грузится после main.css + site-fixes.css (см. inc/enqueue.php, блок 4b). */
/* ===================================================================
   SERVICE PAGE: «Сопровождение сайтов» — секции только этой страницы (.svc-*)
   Наследует токены/типографику дизайн-системы; новые компоненты — ниже
   =================================================================== */
/* hero layout: текст слева + панель мониторинга справа */
.svc-demo{position:relative;border:1px solid #dadce0;border-radius:var(--r-lg);overflow:hidden;background:#fff;min-height:392px;display:flex;flex-direction:column}
@media(max-width:980px){.svc-hero-grid{grid-template-columns:1fr;gap:40px}.svc-demo-badge{right:5%}}

/* hero demo: кот-смотритель AIVA Group — ходит по сайту, проверяет и чинит блоки (.fb-) */
.fb{display:flex;flex-direction:column;height:432px;background:#fff;border:1px solid #dfe6ec;border-radius:var(--r-lg);overflow:hidden;color:#26333f}
.fb-bar{display:flex;align-items:center;gap:11px;padding:10px 14px;background:#f1f5f8;border-bottom:1px solid #e6ecf1}
.fb-dots{display:flex;gap:6px}.fb-dots i{width:10px;height:10px;border-radius:50%;background:#cdd7df}
.fb-url{flex:1;font-size:11.5px;color:#5f6e7a;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e6ecf1;border-radius:99px;padding:5px 12px}
.fb-url i{font-size:9px;color:#9aabb8}
.fb-status{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#3e9e6e;white-space:nowrap}
.fb-pulse{width:8px;height:8px;border-radius:50%;background:#3e9e6e;position:relative;flex-shrink:0}
.fb-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid #3e9e6e;animation:fbPulse 1.8s ease-out infinite}
@keyframes fbPulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.fb-scene{position:relative;flex:1;background:linear-gradient(180deg,#f5f9fc,#e9f1f6);overflow:hidden}
.fb-blocks{display:flex;gap:14px;padding:26px 24px 0;justify-content:center}
.fb-block{flex:1;max-width:98px;background:#fff;border:1px solid #e1e8ee;border-radius:12px;padding:13px 8px 12px;text-align:center;position:relative;transition:border-color .4s}
.fb-bi{width:34px;height:34px;border-radius:9px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;margin:0 auto 7px;transition:background .4s,color .4s}
.fb-block b{display:block;font-size:11px;font-weight:700;color:#3a4a57}
.fb-badge{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid #fff;background:#e0633f;color:#fff}
.fb-badge .ic-ok{display:none}
.fb-block.fixed .fb-badge{background:#3e9e6e}
.fb-block.fixed .fb-badge .ic-warn{display:none}
.fb-block.fixed .fb-badge .ic-ok{display:inline}
.fb-block.fixed{border-color:#bfe3cf}
.fb-block.fixed .fb-bi{background:#e6f4ea;color:#3e9e6e}
.fb-ground{position:absolute;left:0;right:0;bottom:46px;height:2px;background:#d4dee6}
.fb-bot{position:absolute;bottom:42px;left:0;width:70px;z-index:3}
.fb-svg{width:70px;height:auto;display:block;overflow:visible}
.fb-eyes{transform-box:fill-box;transform-origin:center;animation:fbBlink 3.6s infinite}
@keyframes fbBlink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.12)}}
.fb-tail{transform-box:fill-box;transform-origin:88% 92%;animation:fbTail 3.6s ease-in-out infinite}
@keyframes fbTail{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
.fb-leg{transform-box:fill-box;transform-origin:center top}
.fb-bot.walking .fb-leg-l{animation:fbStep .32s ease-in-out infinite}
.fb-bot.walking .fb-leg-r{animation:fbStep .32s ease-in-out infinite .16s}
@keyframes fbStep{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.fb-arm{transform-box:fill-box;transform-origin:6% 98%}
.fb-bot.fixing .fb-arm{animation:fbWork .42s ease-in-out infinite}
@keyframes fbWork{0%,100%{transform:rotate(0)}50%{transform:rotate(-15deg)}}
.fb-bubble{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;padding:5px 11px;border-radius:99px;white-space:nowrap;opacity:0}
.fb-bubble::after{content:'';position:absolute;bottom:-4px;left:50%;margin-left:-4px;width:8px;height:8px;background:var(--ink);transform:rotate(45deg)}
.fb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 15px;border-top:1px solid #eef2f5;font-size:11px;color:var(--gray)}
.fb-done b{font-family:var(--font-h);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.fb-done i{color:var(--blue);margin-right:3px}
.fb-up{color:#3e9e6e;font-weight:700;white-space:nowrap}.fb-up i{margin-right:3px}
/* интерактив: кликабельные блоки + поглаживание кота */
.fb-block{cursor:pointer;transition:border-color .4s,transform .2s}
.fb-block:hover{border-color:var(--blue);transform:translateY(-3px)}
.fb-block:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fb-block.broken{border-color:#e9b4a4}
.fb-block.broken .fb-bi{background:#fde7e1;color:#e0633f}
.fb-block.shake{animation:fbShake .42s ease}
@keyframes fbShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.fb-bot{cursor:pointer}
.fb-svg{transform-origin:50% 95%}
.fb-bot.petted .fb-svg{animation:fbPet .46s ease}
@keyframes fbPet{0%,100%{transform:scale(1)}40%{transform:scale(1.08) rotate(-3deg)}72%{transform:scale(1.03) rotate(2deg)}}
.fb-heart{position:absolute;color:var(--coral);font-size:14px;pointer-events:none;z-index:6;animation:fbHeart 1.1s ease-out forwards}
@keyframes fbHeart{0%{opacity:0;transform:translateY(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.1)}}
.fb-hint{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--gray);background:#fff;border:1px solid #e6ecf1;border-radius:99px;padding:5px 12px;z-index:5;white-space:nowrap;transition:opacity .45s}
.fb-hint i{color:var(--coral)}
.fb-hint.hide{opacity:0;pointer-events:none}
/* «вау»-слой: тень кота, скан-луч мониторинга, искры при починке, живой спарклайн аптайма */
.fb-shadow{transform-box:fill-box;transform-origin:center}
.fb-bot.walking .fb-shadow{animation:fbSh .32s ease-in-out infinite}
@keyframes fbSh{0%,100%{transform:scaleX(1);opacity:.14}50%{transform:scaleX(.82);opacity:.1}}
.fb-scan{position:absolute;top:12px;bottom:48px;width:2px;left:8%;background:var(--blue);opacity:0;z-index:1;border-radius:2px;animation:fbScan 5.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes fbScan{0%{left:8%;opacity:0}12%{opacity:.4}50%{opacity:.4}88%{opacity:.4}100%{left:92%;opacity:0}}
.fb-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:6;animation:fbSpark .66s ease-out forwards}
@keyframes fbSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}
.fb-float{position:absolute;font-family:var(--font-h);font-weight:800;font-size:13px;color:#3e9e6e;pointer-events:none;z-index:6;white-space:nowrap;animation:fbFloat 1.05s ease-out forwards}
@keyframes fbFloat{0%{opacity:0;transform:translate(-50%,-50%) translateY(5px)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translateY(-26px)}}
.fb-spark-svg{width:50px;height:15px;vertical-align:-3px;margin-right:6px;overflow:visible}
.fb-spark-dot{transform-box:fill-box;transform-origin:center;animation:fbDot 1.7s ease-in-out infinite}
@keyframes fbDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.5}}
@media(prefers-reduced-motion:reduce){.fb-pulse::after,.fb-eyes,.fb-tail,.fb-leg,.fb-arm,.fb-block.shake,.fb-bot.petted .fb-svg,.fb-spark-dot,.fb-bot.walking .fb-shadow{animation:none}.fb-bubble,.fb-hint,.fb-scan{display:none}}
@media(max-width:560px){.fb{height:392px}.fb-blocks{gap:8px;padding:20px 12px 0}.fb-block b{font-size:10px}.fb-bi{width:30px;height:30px}}

/* «что входит» — карточки услуг (стиль .pcard / карточек) */
@media(max-width:980px){.svc-incl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.svc-incl-grid{grid-template-columns:1fr}.svc-incl{padding:72px 0}}

/* цены — тарифные карточки */
.svc-plan{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 32px 34px;background:#fff;transition:border-color .3s,transform .3s}
.svc-plan:hover{border-color:var(--blue);transform:translateY(-6px)}
.svc-plan.feat{border-color:var(--blue)}
.svc-plan.feat:hover{border-color:var(--blue)}
.svc-plan-flag{position:absolute;top:18px;right:18px;background:var(--coral);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:7px 14px;border-radius:999px}
.svc-plan .sp-ic{width:48px;height:48px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:22px}
.svc-plan h3{font-family:var(--font-h);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;color:var(--blue)}
.svc-plan .sp-price{font-family:var(--font-h);font-weight:800;font-size:clamp(28px,2.7vw,36px);letter-spacing:-.02em;margin:24px 0 4px;white-space:nowrap}
.svc-plan .sp-price .per{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--gray);letter-spacing:0}
.svc-plan .sp-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:24px 0 30px;border-top:1px solid var(--line);padding-top:26px}
.svc-plan .sp-list li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;top:2px;font-size:10px;color:var(--blue)}
.svc-price-note i{color:var(--coral)}
@media(max-width:980px){.svc-price-grid{grid-template-columns:1fr;gap:18px}.svc-plan-flag{right:18px}.svc-price{padding:80px 0}}

/* FAQ (та же разметка/JS, что и на главной) */
.faq{padding:84px 0 68px;background:var(--gray-bg);border-top:1px solid var(--line)}

@media(max-width:768px){.faq-q{font-size:16px;padding:20px 0;gap:14px}.faq-q .fq-ic{width:34px;height:34px;font-size:11px}.faq-a p{padding:0 12px 22px 0;font-size:15px}}