Новые изменения на сайте

frontend/src/components/home/Steps.astro

@@ -1,5 +1,6 @@
 ---
 import Button from '@components/base/Button.astro';
+import { EXPERIENCE_YEARS } from '@constants';
 
 interface Step {
     number: number;
@@ -103,7 +104,7 @@ const {
             </div>
             <div class="stat-divider"></div>
             <div class="stat-item">
-                <div class="stat-number" data-target="15" data-suffix=" лет">0 лет</div>
+                <div class="stat-number" data-target={EXPERIENCE_YEARS.replace('+', '')} data-suffix="+ лет">0+ лет</div>
                 <div class="stat-label">опыта</div>
             </div>
         </div>
@@ -112,6 +113,40 @@ const {
     </div>
 </section>
 
+<script>
+    function animateCounters() {
+        document.querySelectorAll('.stat-number[data-target]').forEach(counter => {
+            const target = parseInt(counter.getAttribute('data-target') || '0');
+            const suffix = counter.getAttribute('data-suffix') || '';
+            const duration = 2000;
+            const step = target / (duration / 16);
+            let current = 0;
+
+            const update = () => {
+                current = Math.min(current + step, target);
+                counter.textContent = Math.round(current) + suffix;
+                if (current < target) {
+                    requestAnimationFrame(update);
+                }
+            };
+            update();
+        });
+    }
+
+    const statsBar = document.getElementById('stats-bar');
+    if (statsBar) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    animateCounters();
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.3 });
+        observer.observe(statsBar);
+    }
+</script>
+
 <style>
     :root {
         --color-primary: #0a2540;
@@ -219,8 +254,8 @@ const {
 
     /* ИСПРАВЛЕНИЕ LCP: opacity: 1 по умолчанию! */
     .animate-on-scroll {
-        opacity: 1;
-        transform: translateY(0);
+        opacity: 0;
+        transform: translateY(30px);
         will-change: opacity, transform;
     }