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

.vb-k9m {
font-family: var(--t-text-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
background: #ffffff;
color: #0d1117;
padding: clamp(56px, 9vw, 112px) clamp(20px, 4vw, 48px);
}

.vb-k9m__container {
max-width: 1200px;
margin: 0 auto;
}

.vb-k9m__header {
max-width: 760px;
margin-bottom: clamp(36px, 5vw, 64px);
display: flex;
flex-direction: column;
gap: 18px;
}

.vb-k9m__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--t-headline-font, inherit);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6b7280;
}

.vb-k9m__eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: #6b7280;
display: inline-block;
}

.vb-k9m__title {
font-family: var(--t-headline-font, 'Inter', system-ui, sans-serif);
font-size: clamp(2rem, 4.6vw, 3.5rem);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.035em;
margin: 0;
color: #0d1117;
text-wrap: balance;
}

.vb-k9m__subtitle {
font-size: clamp(1rem, 1.4vw, 1.125rem);
line-height: 1.55;
color: #4b5563;
margin: 0;
max-width: 58ch;
}

.vb-k9m__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.vb-k9m__card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: clamp(24px, 2.6vw, 36px);
display: flex;
flex-direction: column;
gap: 22px;
min-width: 0;
position: relative;
transition: border-color 0.2s ease, transform 0.2s ease;
}

.vb-k9m__card:hover {
border-color: #c9ccd1;
}

.vb-k9m__label {
font-family: var(--t-headline-font, inherit);
font-size: 0.9375rem;
font-weight: 500;
color: #0d1117;
letter-spacing: -0.005em;
display: flex;
align-items: center;
justify-content: space-between;
}

.vb-k9m__label-index {
font-family: var(--t-headline-font, inherit);
font-size: 0.75rem;
font-weight: 500;
color: #9ca3af;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
}

.vb-k9m__was,
.vb-k9m__became {
display: flex;
flex-direction: column;
gap: 6px;
}

.vb-k9m__was-tag,
.vb-k9m__became-tag {
font-size: 0.6875rem;
font-weight: 500;
color: #9ca3af;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.vb-k9m__was-value {
font-family: var(--t-headline-font, inherit);
font-size: 1.125rem;
font-weight: 500;
color: #6b7280;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1.2;
}

.vb-k9m__became-value {
container-type: inline-size;
font-family: var(--t-headline-font, 'Inter', system-ui, sans-serif);
font-weight: 700;
color: #0d1117;
font-variant-numeric: tabular-nums;
letter-spacing: -0.04em;
line-height: 1;
font-size: clamp(1.75rem, 12cqi, 3.5rem);
min-width: 0;
}

.vb-k9m__became-stack {
display: inline-grid;
grid-template-areas: 'stack';
align-items: end;
max-width: 100%;
}

.vb-k9m__became-stack > span {
grid-area: stack;
white-space: nowrap;
}

.vb-k9m__became-final {
visibility: hidden;
pointer-events: none;
}

.vb-k9m__became-current {
display: inline-block;
}

.vb-k9m__delta {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 7px 12px 7px 10px;
background: #ecfdf5;
color: #047857;
border-radius: 999px;
font-size: 0.875rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
border: 1px solid #d1fae5;
}

.vb-k9m__delta svg {
width: 11px;
height: 11px;
flex-shrink: 0;
}

.vb-k9m__card--accent {
background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}

@media (max-width: 960px) {
.vb-k9m__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.vb-k9m__card {
padding: 24px;
}
.vb-k9m__became-value {
font-size: clamp(2rem, 10cqi, 3rem);
}
}

@media (max-width: 480px) {
.vb-k9m__became-value {
font-size: clamp(1.75rem, 11cqi, 2.5rem);
}
.vb-k9m__was-value {
font-size: 1rem;
}
.vb-k9m__card {
gap: 18px;
}
}

@media (prefers-reduced-motion: reduce) {
.vb-k9m__card {
transition: none;
}
}

.vb-k9m noscript + style { }
</style>

<div class="vb-k9m__container">
<header class="vb-k9m__header">
<span class="vb-k9m__eyebrow">Кейс · Интернет-магазин одежды</span>
<h2 class="vb-k9m__title" id="vb-k9m-title">Рост в&nbsp;четыре раза за&nbsp;квартал</h2>
<p class="vb-k9m__subtitle">Перезапустили воронку и&nbsp;ассортиментную матрицу. Ниже&nbsp;— три цифры, которые показывают, что получилось.</p>
</header>

<div class="vb-k9m__grid">
<article class="vb-k9m__card">
<div class="vb-k9m__label">
Конверсия в&nbsp;заказ
<span class="vb-k9m__label-index">01</span>
</div>
<div class="vb-k9m__was">
<span class="vb-k9m__was-tag">Было</span>
<span class="vb-k9m__was-value">1,8%</span>
</div>
<div class="vb-k9m__became">
<span class="vb-k9m__became-tag">Стало</span>
<span class="vb-k9m__became-value">
<span class="vb-k9m__became-stack">
<span class="vb-k9m__became-final" aria-hidden="true">7,2%</span>
<span class="vb-k9m__became-current" data-counter="" data-from="1.8" data-to="7.2" data-decimals="1" data-suffix="%" aria-label="Стало 7,2 процента">1,8%</span>
</span>
</span>
</div>
<div class="vb-k9m__delta" aria-label="Рост на 5,4 процентных пункта">
<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="M6 2.5L6 9.5M6 2.5L2.75 5.75M6 2.5L9.25 5.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>+5,4&nbsp;п.&nbsp;п.</span>
</div>
</article>

<article class="vb-k9m__card vb-k9m__card--accent">
<div class="vb-k9m__label">
Средний чек
<span class="vb-k9m__label-index">02</span>
</div>
<div class="vb-k9m__was">
<span class="vb-k9m__was-tag">Было</span>
<span class="vb-k9m__was-value">2&nbsp;400&nbsp;₽</span>
</div>
<div class="vb-k9m__became">
<span class="vb-k9m__became-tag">Стало</span>
<span class="vb-k9m__became-value">
<span class="vb-k9m__became-stack">
<span class="vb-k9m__became-final" aria-hidden="true">5&nbsp;800&nbsp;₽</span>
<span class="vb-k9m__became-current" data-counter="" data-from="2400" data-to="5800" data-decimals="0" data-suffix="&nbsp;₽" aria-label="Стало 5 800 рублей">2&nbsp;400&nbsp;₽</span>
</span>
</span>
</div>
<div class="vb-k9m__delta" aria-label="Рост на 141,67 процента">
<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="M6 2.5L6 9.5M6 2.5L2.75 5.75M6 2.5L9.25 5.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>+141,67%</span>
</div>
</article>

<article class="vb-k9m__card">
<div class="vb-k9m__label">
Выручка за&nbsp;месяц
<span class="vb-k9m__label-index">03</span>
</div>
<div class="vb-k9m__was">
<span class="vb-k9m__was-tag">Было</span>
<span class="vb-k9m__was-value">850&nbsp;000&nbsp;₽</span>
</div>
<div class="vb-k9m__became">
<span class="vb-k9m__became-tag">Стало</span>
<span class="vb-k9m__became-value">
<span class="vb-k9m__became-stack">
<span class="vb-k9m__became-final" aria-hidden="true">3&nbsp;200&nbsp;000&nbsp;₽</span>
<span class="vb-k9m__became-current" data-counter="" data-from="850000" data-to="3200000" data-decimals="0" data-suffix="&nbsp;₽" aria-label="Стало 3 200 000 рублей">850&nbsp;000&nbsp;₽</span>
</span>
</span>
</div>
<div class="vb-k9m__delta" aria-label="Рост на 276,47 процента">
<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="M6 2.5L6 9.5M6 2.5L2.75 5.75M6 2.5L9.25 5.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>+276,47%</span>
</div>
</article>
</div>
</div>

<noscript>
<style>
.vb-k9m__became-final { visibility: visible !important; }
.vb-k9m__became-current { display: none !important; }
</style>
</noscript>

<script>
(function () {
var root = document.querySelector('.vb-k9m');
if (!root) return;

var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var counters = root.querySelectorAll('[data-counter]');

function formatRu(value, decimals) {
var fixed = value.toFixed(decimals);
var parts = fixed.split('.');
var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '\u00A0');
return parts[1] ? intPart + ',' + parts[1] : intPart;
}

function easeOutQuart(t) {
return 1 - Math.pow(1 - t, 4);
}

function setFinal(el) {
var to = parseFloat(el.getAttribute('data-to'));
var decimals = parseInt(el.getAttribute('data-decimals'), 10);
var suffix = el.getAttribute('data-suffix') || '';
el.textContent = formatRu(to, decimals) + suffix;
}

function animateCounter(el) {
if (el.dataset.vbK9mAnimated === '1') return;
el.dataset.vbK9mAnimated = '1';

if (reducedMotion) {
setFinal(el);
return;
}

var from = parseFloat(el.getAttribute('data-from'));
var to = parseFloat(el.getAttribute('data-to'));
var decimals = parseInt(el.getAttribute('data-decimals'), 10);
var suffix = el.getAttribute('data-suffix') || '';
var duration = 1600;
var start = null;

el.textContent = formatRu(from, decimals) + suffix;

function tick(now) {
if (start === null) start = now;
var elapsed = now - start;
var progress = Math.min(elapsed / duration, 1);
var eased = easeOutQuart(progress);
var current = from + (to - from) * eased;
el.textContent = formatRu(current, decimals) + suffix;
if (progress < 1) {
requestAnimationFrame(tick);
} else {
el.textContent = formatRu(to, decimals) + suffix;
}
}

requestAnimationFrame(tick);
}

function fitText() {
var values = root.querySelectorAll('.vb-k9m__became-value');
values.forEach(function (valueEl) {
valueEl.style.fontSize = '';
});
// force reflow
void root.offsetWidth;
values.forEach(function (valueEl) {
var finalSpan = valueEl.querySelector('.vb-k9m__became-final');
if (!finalSpan) return;
var containerW = valueEl.clientWidth;
if (containerW <= 0) return;
var needed = finalSpan.scrollWidth;
if (needed > containerW) {
var currentSize = parseFloat(getComputedStyle(valueEl).fontSize);
if (!isNaN(currentSize) && currentSize > 14) {
var ratio = containerW / needed;
valueEl.style.fontSize = (currentSize * Math.min(ratio, 0.94)) + 'px';
}
}
});
}

if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateCounter(entry.target);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.35 });
counters.forEach(function (c) { observer.observe(c); });
} else {
counters.forEach(animateCounter);
}

var resizeTimer;
function onResize() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(fitText, 80);
}
window.addEventListener('resize', onResize);

function init() {
// Two RAFs to be sure layout/fonts are stable
requestAnimationFrame(function () {
requestAnimationFrame(fitText);
});
}

if (document.readyState === 'complete') {
init();
} else {
window.addEventListener('load', init, { once: true });
}
})();
</script>
</section>