/* Анимированные иллюстрации услуг (app/lib/illu.php) */
.il { --il-ink: var(--moss); --il-fill: #E1E7CB; --il-accent: var(--leaf); --il-hot: #E5A33A; width: 100%; height: auto; overflow: visible; }
.il .bg { fill: var(--mist); }
.il .s { fill: none; stroke: var(--il-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il .f { fill: var(--il-fill); stroke: var(--il-ink); stroke-width: 3; stroke-linejoin: round; }
.il .w { fill: #fff; stroke: var(--il-ink); stroke-width: 3; stroke-linejoin: round; }
.il .a { fill: var(--il-accent); }
.il .as { fill: none; stroke: var(--il-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.il .h { fill: var(--il-hot); }
.il .hs { fill: none; stroke: var(--il-hot); stroke-width: 3; stroke-linecap: round; }
.il .il-t { font: 700 22px var(--f-display); fill: var(--il-ink); }
.il .il-t-l { font-size: 44px; fill: #fff; }
.il .beam { fill: var(--il-accent); opacity: .55; animation: ilBeam 2.2s ease-in-out infinite; }
.il .heat { fill: var(--il-hot); opacity: .35; transform-box: fill-box; transform-origin: center; animation: ilHeat 2.6s ease-in-out infinite; }
.il .cuff { fill: var(--il-accent); stroke: var(--il-ink); stroke-width: 2.5; opacity: .25; animation: ilCuff 2.4s ease-in-out infinite; }

.il .pulse, .il .glow, .il .ring, .il .breathe, .il .twinkle, .il .blink, .il .shrink, .il .heat { transform-box: fill-box; transform-origin: center; }
.il .pulse { animation: ilPulse 2.4s ease-in-out infinite; }
.il .glow { animation: ilGlow 2.8s ease-in-out infinite; }
.il .ring { animation: ilRing 2.4s ease-out infinite; }
.il .d2 { animation-delay: .8s !important; }
.il .d3 { animation-delay: 1.6s !important; }
.il .d4 { animation-delay: 2.1s !important; }
.il .float { animation: ilFloat 4s ease-in-out infinite; }
.il .dash { stroke-dasharray: 7 9; animation: ilDash 1.1s linear infinite; }
.il .impulse { stroke-dasharray: 26 260; animation: ilImpulse 2.4s linear infinite; }
.il .nerve { stroke-dasharray: 12 10; animation: ilDash 1s linear infinite; }
.il .draw { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); animation: ilDraw 4.5s var(--ease) infinite; }
.il .shrink { transform-origin: left center; animation: ilShrink 6s ease-in-out infinite; }
.il .fade-sync { animation: ilFade 6s ease-in-out infinite; }
.il .swing { transform-box: view-box; transform-origin: var(--ox) var(--oy); animation: ilSwing 4s ease-in-out infinite; }
.il .sway { transform-box: view-box; transform-origin: var(--ox) var(--oy); animation: ilSway 5s ease-in-out infinite; }
.il .upright { transform-box: view-box; transform-origin: var(--ox) var(--oy); animation: ilUpright 5s ease-in-out infinite; }
.il .straighten { animation: ilStraight 5s ease-in-out infinite; }
.il .drop { animation: ilDrop 1.8s ease-in infinite; }
.il .bubble { animation: ilRise 3s ease-in infinite; }
.il .photon { animation: ilPhoton 1.6s ease-in infinite; }
.il .spin-slow, .il .needle { transform-box: view-box; transform-origin: var(--ox) var(--oy); }
.il .spin-slow { animation: ilSpin 14s linear infinite; }
.il .needle { animation: ilNeedle 6s var(--ease) infinite; }
.il .tap { animation: ilTap 1.2s ease-in-out infinite; }
.il .poke { animation: ilPoke 2.6s ease-in-out infinite; }
.il .press { animation: ilPress 2.4s ease-in-out infinite; }
.il .rub { animation: ilRub 2.8s ease-in-out infinite; }
.il .vib { animation: ilVib .25s linear infinite alternate; }
.il .breathe { animation: ilPulse 2s ease-in-out infinite; }
.il .relax { animation: ilRelax 3s ease-in-out infinite; }
.il .stretch { transform-box: fill-box; transform-origin: left top; animation: ilStretch 3s ease-in-out infinite; }
.il .twinkle { animation: ilTwinkle 2.4s ease-in-out infinite; }
.il .blink { animation: ilBlink 2.4s ease-in-out infinite; }
.il .level { animation: ilLevel 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom; }
.il .wave-x { animation: ilWaveX 3s ease-in-out infinite alternate; }

@keyframes ilPulse { 50% { transform: scale(1.14); opacity: .75; } }
@keyframes ilGlow { 50% { opacity: .45; } }
@keyframes ilRing { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ilFloat { 50% { transform: translateY(-7px); } }
@keyframes ilDash { to { stroke-dashoffset: -32; } }
@keyframes ilImpulse { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -260; } }
@keyframes ilDraw { 0% { stroke-dashoffset: var(--len, 300); } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: calc(var(--len, 300) * -1); } }
@keyframes ilShrink { 0%, 15% { transform: scaleX(1); } 50%, 68% { transform: scaleX(.2); } 100% { transform: scaleX(1); } }
@keyframes ilFade { 0%, 15% { opacity: 1; } 50%, 68% { opacity: .08; } 100% { opacity: 1; } }
@keyframes ilSwing { 50% { transform: rotate(var(--rot, 14deg)); } }
@keyframes ilSway { 50% { transform: rotate(8deg); } }
@keyframes ilUpright { 0%, 20% { transform: rotate(10deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(10deg); } }
@keyframes ilStraight { 0%, 15% { transform: translateX(var(--dx)); } 55%, 85% { transform: translateX(0); } 100% { transform: translateX(var(--dx)); } }
@keyframes ilDrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
@keyframes ilRise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
@keyframes ilPhoton { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
@keyframes ilSpin { to { transform: rotate(360deg); } }
@keyframes ilNeedle { 0% { transform: rotate(-70deg); } 30% { transform: rotate(28deg); } 45% { transform: rotate(-14deg); } 60%, 100% { transform: rotate(0); } }
@keyframes ilTap { 50% { transform: translateY(8px); } }
@keyframes ilPoke { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, 8px); } }
@keyframes ilPress { 50% { transform: translateY(6px); } }
@keyframes ilRub { 50% { transform: translateX(26px); } }
@keyframes ilVib { to { transform: translateX(3px); } }
@keyframes ilRelax { 50% { transform: translateY(3px); opacity: .6; } }
@keyframes ilStretch { 50% { transform: scale(1.08, 1.04); } }
@keyframes ilTwinkle { 50% { transform: scale(.6) rotate(20deg); opacity: .5; } }
@keyframes ilBlink { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes ilLevel { from { transform: scaleY(.75); } to { transform: scaleY(1); } }
@keyframes ilWaveX { to { transform: translateX(-20px); } }
@keyframes ilBeam { 50% { opacity: .25; } }
@keyframes ilHeat { 50% { transform: scale(1.18); opacity: .15; } }
@keyframes ilCuff { 0%, 100% { opacity: .2; } 40% { opacity: .95; } }

.il.is-paused *, .a11y-noanim .il * { animation-play-state: paused !important; }

/* Иллюстрация на тёмном фоне */
.on-dark .il, .sec-dark .il { --il-ink: #DDE4C6; --il-fill: #34482A; }
.on-dark .il .bg, .sec-dark .il .bg { fill: rgba(255, 255, 255, .05); }
.on-dark .il .w, .sec-dark .il .w { fill: #2A3A20; }