Vrtor.ru Link -

.hero h1 font-size: clamp(2.8rem, 8vw, 5.2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; max-width: 900px;

.features-grid display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 3rem 0 5rem; vrtor.ru

<!-- stats & reliability --> <div class="stats-section"> <div class="stat-item"> <div class="stat-number">99.99%</div> <div>uptime SLA</div> </div> <div class="stat-item"> <div class="stat-number">< 45ms</div> <div>global p95 latency</div> </div> <div class="stat-item"> <div class="stat-number">500+</div> <div>enterprise nodes</div> </div> <div class="stat-item"> <div class="stat-number">∞</div> <div>scalability ceiling</div> </div> </div> .hero h1 font-size: clamp(2.8rem

// floating stat effect: add subtle highlight on hover const stats = document.querySelectorAll('.stat-item'); stats.forEach(stat => stat.addEventListener('mouseenter', () => const numberSpan = stat.querySelector('.stat-number'); if (numberSpan) numberSpan.style.textShadow = '0 0 8px #a78bfa'; ); stat.addEventListener('mouseleave', () => const numberSpan = stat.querySelector('.stat-number'); if (numberSpan) numberSpan.style.textShadow = ''; ); ); .features-grid display: grid

.stat-item text-align: center; flex: 1;

.badge display: inline-flex; background: rgba(130, 100, 220, 0.18); backdrop-filter: blur(4px); border-radius: 40px; padding: 0.3rem 1rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.3px; border: 1px solid rgba(130, 100, 220, 0.3); width: fit-content; margin-bottom: 1.8rem;