<section class="vb-q9m" id="vb-q9m-results" data-section-name="Результаты кейса" aria-labelledby="vb-q9m-title" data-vibeblock-unique-section="yes">
<style>
.vb-q9m,
.vb-q9m * { box-sizing: border-box; }
.vb-q9m input,
.vb-q9m textarea,
.vb-q9m select { font: inherit; }

.vb-q9m {
--q9m-bg: #ffffff;
--q9m-ink: #0a0a0a;
--q9m-muted: #71717a;
--q9m-line: #e4e4e7;
--q9m-accent: #ea580c;
--q9m-accent-soft: rgba(234, 88, 12, 0.10);
background: var(--q9m-bg);
color: var(--q9m-ink);
padding: clamp(64px, 8vw, 130px) clamp(20px, 5vw, 80px);
font-family: var(--t-text-font, system-ui, sans-serif);
}

.vb-q9m__inner {
max-width: 1240px;
margin: 0 auto;
}

.vb-q9m__head {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: clamp(56px, 7vw, 96px);
}

.vb-q9m__eyebrow {
font-family: var(--t-headline-font, system-ui, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--q9m-accent);
margin: 0;
}

.vb-q9m__title {
font-family: var(--t-headline-font, system-ui, sans-serif);
font-size: clamp(36px, 5.5vw, 64px);
line-height: 1.02;
letter-spacing: -0.025em;
font-weight: 700;
margin: 0;
text-wrap: balance;
max-width: 18ch;
}

.vb-q9m__intro {
font-family: var(--t-text-font, system-ui, sans-serif);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.55;
color: var(--q9m-muted);
margin: 0;
max-width: 56ch;
}

.vb-q9m__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--q9m-line);
border: 1px solid var(--q9m-line);
}

@media (min-width: 560px) {
.vb-q9m__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
.vb-q9m__grid { grid-template-columns: repeat(4, 1fr); }
}

.vb-q9m-metric {
container-type: inline-size;
background: var(--q9m-bg);
padding: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 32px);
display: flex;
flex-direction: column;
gap: clamp(18px, 2.4vw, 28px);
}

.vb-q9m-metric__label {
font-family: var(--t-headline-font, system-ui, sans-serif);
font-size: 14px;
font-weight: 500;
color: var(--q9m-ink);
margin: 0;
letter-spacing: 0.005em;
}

.vb-q9m-metric__stack {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}

.vb-q9m-metric__was {
font-family: var(--t-headline-font, system-ui, sans-serif);
font-size: clamp(13px, 3.5cqw, 17px);
font-weight: 500;
color: var(--q9m-muted);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
line-height: 1.2;
white-space: nowrap;
letter-spacing: -0.005em;
}

.vb-q9m-metric__became {
position: relative;
display: block;
min-width: 0;
overflow: hidden;
}

.vb-q9m-metric__ghost {
visibility: hidden;
display: block;
white-space: nowrap;
font-family: var(--t-headline-font, system-ui, sans-serif);
font-size: clamp(22px, 11cqw, 52px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}

.vb-q9m-metric__counter {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
white-space: nowrap;
font-family: var(--t-headline-font, system-ui, sans-serif);
font-size: clamp(22px, 11cqw, 52px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1;
color: var(--q9m-ink);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}

.vb-q9m-metric__delta {
font-family: var(--t-headline-font, system-ui, sans-serif);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--q9m-accent);
display: inline-flex;
align-items: baseline;
gap: 8px;
align-self: flex-start;
padding: 6px 12px 7px;
background: var(--q9m-accent-soft);
border-radius: 999px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s;
}

.vb-q9m-metric__delta--visible {
opacity: 1;
transform: translateY(0);
}

.vb-q9m-metric__delta-suffix {
font-size: 11px;
font-weight: 600;
opacity: 0.65;
letter-spacing: 0.1em;
text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
.vb-q9m-metric__delta {
opacity: 1 !important;
transform: none !important;
transition: none;
}
}
</style>

<div class="vb-q9m__inner">
<header class="vb-q9m__head">
<p class="vb-q9m__eyebrow">Редизайн&nbsp;· e-commerce&nbsp;· Q1</p>
<h2 class="vb-q9m__title" id="vb-q9m-title">Рост по&nbsp;каждой метрике</h2>
<p class="vb-q9m__intro">Переработали каталог, упростили оформление заказа и&nbsp;подключили персональные рекомендации. Показатели за&nbsp;первый квартал после запуска.</p>
</header>

<div class="vb-q9m__grid">
<article class="vb-q9m-metric" aria-labelledby="vb-q9m-m1">
<h3 class="vb-q9m-metric__label" id="vb-q9m-m1">Конверсия в&nbsp;заказ</h3>
<div class="vb-q9m-metric__stack">
<span class="vb-q9m-metric__was">1,8%</span>
<span class="vb-q9m-metric__became">
<span class="vb-q9m-metric__ghost">7,2%</span>
<span class="vb-q9m-metric__counter">1,8%</span>
</span>
</div>
<span class="vb-q9m-metric__delta">
<span>+5,4</span>
<span class="vb-q9m-metric__delta-suffix">п.&nbsp;п.</span>
</span>
</article>

<article class="vb-q9m-metric" aria-labelledby="vb-q9m-m2">
<h3 class="vb-q9m-metric__label" id="vb-q9m-m2">Средний чек</h3>
<div class="vb-q9m-metric__stack">
<span class="vb-q9m-metric__was">2&nbsp;400&nbsp;₽</span>
<span class="vb-q9m-metric__became">
<span class="vb-q9m-metric__ghost">5&nbsp;800&nbsp;₽</span>
<span class="vb-q9m-metric__counter">2&nbsp;400&nbsp;₽</span>
</span>
</div>
<span class="vb-q9m-metric__delta">
<span>+142%</span>
<span class="vb-q9m-metric__delta-suffix">рост</span>
</span>
</article>

<article class="vb-q9m-metric" aria-labelledby="vb-q9m-m3">
<h3 class="vb-q9m-metric__label" id="vb-q9m-m3">Выручка за&nbsp;месяц</h3>
<div class="vb-q9m-metric__stack">
<span class="vb-q9m-metric__was">850&nbsp;000&nbsp;₽</span>
<span class="vb-q9m-metric__became">
<span class="vb-q9m-metric__ghost">3&nbsp;200&nbsp;000&nbsp;₽</span>
<span class="vb-q9m-metric__counter">850&nbsp;000&nbsp;₽</span>
</span>
</div>
<span class="vb-q9m-metric__delta">
<span>+276%</span>
<span class="vb-q9m-metric__delta-suffix">рост</span>
</span>
</article>

<article class="vb-q9m-metric" aria-labelledby="vb-q9m-m4">
<h3 class="vb-q9m-metric__label" id="vb-q9m-m4">Возврат клиентов</h3>
<div class="vb-q9m-metric__stack">
<span class="vb-q9m-metric__was">12%</span>
<span class="vb-q9m-metric__became">
<span class="vb-q9m-metric__ghost">41%</span>
<span class="vb-q9m-metric__counter">12%</span>
</span>
</div>
<span class="vb-q9m-metric__delta">
<span>+29</span>
<span class="vb-q9m-metric__delta-suffix">п.&nbsp;п.</span>
</span>
</article>
</div>
</div>

<script>
(function() {
var metrics = document.querySelectorAll('.vb-q9m-metric');
var NBSP = ' ';

function formatRu(value, decimals, suffix) {
var fixed = value.toFixed(decimals);
var parts = fixed.split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, NBSP);
var num = parts.join(',');
if (suffix) num += suffix;
return num;
}

function parseRu(str) {
var cleaned = str.replace(/\s/g, '').replace(',', '.');
return parseFloat(cleaned);
}

function stripSymbols(str) {
return str.replace(/[^0-9,.\s]/g, '');
}

function easeOutCubic(t) {
return 1 - Math.pow(1 - t, 3);
}

function detectSuffix(text) {
if (/%/.test(text)) return '%';
if (/₽/.test(text)) return '₽';
return '';
}

function animate(metric, delay) {
var ghost = metric.querySelector('.vb-q9m-metric__ghost');
var counter = metric.querySelector('.vb-q9m-metric__counter');
var was = metric.querySelector('.vb-q9m-metric__was');
var delta = metric.querySelector('.vb-q9m-metric__delta');

var ghostText = ghost.textContent;
var suffix = detectSuffix(ghostText);
var ghostClean = stripSymbols(ghostText);
var decimalsMatch = ghostClean.match(/,(\d+)/);
var decimals = decimalsMatch ? decimalsMatch[1].length : 0;
var finalValue = parseRu(ghostClean);
var startValue = parseRu(stripSymbols(was.textContent));

var duration = 1600;
var startTime = null;

function run(now) {
if (startTime === null) startTime = now;
var elapsed = now - startTime;
var progress = Math.min(elapsed / duration, 1);
var eased = easeOutCubic(progress);
var current = startValue + (finalValue - startValue) * eased;
counter.textContent = formatRu(current, decimals, suffix);
if (progress < 1) {
requestAnimationFrame(run);
} else {
counter.textContent = ghostText;
if (delta) delta.classList.add('vb-q9m-metric__delta--visible');
}
}

if (delay > 0) {
setTimeout(function() { requestAnimationFrame(run); }, delay);
} else {
requestAnimationFrame(run);
}
}

function showFinal(metric) {
var ghost = metric.querySelector('.vb-q9m-metric__ghost');
var counter = metric.querySelector('.vb-q9m-metric__counter');
var delta = metric.querySelector('.vb-q9m-metric__delta');
counter.textContent = ghost.textContent;
if (delta) delta.classList.add('vb-q9m-metric__delta--visible');
}

var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!('IntersectionObserver' in window) || reduced) {
metrics.forEach(showFinal);
return;
}

var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var idx = Array.prototype.indexOf.call(metrics, entry.target);
animate(entry.target, idx * 120);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.25, rootMargin: '0px 0px -8% 0px' });

metrics.forEach(function(m) { observer.observe(m); });
})();
</script>
</section>