<style data-vb-overrides="true">
#vb-k7p-counter {
padding: 0px 20px calc(128px);
}
</style><section id="vb-k7p-counter" class="vb-k7p-counter" data-section-name="Живой счётчик" aria-labelledby="vb-k7p-counter-title" data-vibeblock-unique-section="yes" style="padding-top: 0px;">
<style>
.vb-k7p-counter,
.vb-k7p-counter * { box-sizing: border-box; }
.vb-k7p-counter input,
.vb-k7p-counter textarea,
.vb-k7p-counter select { font: inherit; }

.vb-k7p-counter {
--vb-k7p-ink: #0a0a0a;
--vb-k7p-canvas: #fffaf0;
--vb-k7p-pink: #ff4d8b;
--vb-k7p-lavender: #b8a4ed;
min-height: 440px;
display: grid;
place-items: center;
overflow: hidden;
padding: clamp(64px, 10vw, 128px) 20px;
position: relative;
background: var(--vb-k7p-canvas);
color: var(--vb-k7p-ink);
text-align: center;
font-family: var(--t-text-font);
isolation: isolate;
}
.vb-k7p-counter::after {
width: clamp(76px, 10vw, 144px);
height: clamp(76px, 10vw, 144px);
right: max(-32px, 8vw);
bottom: -28px;
background: var(--vb-k7p-pink);
}
.vb-k7p-counter__content {
width: 100%;
max-width: 1280px;
display: flex;
flex-direction: column;
align-items: center;
}
.vb-k7p-counter__number {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
max-width: 100%;
color: var(--vb-k7p-ink);
font-family: var(--t-headline-font);
font-size: clamp(48px, 11.25vw, 156px);
font-weight: 500;
letter-spacing: -0.055em;
line-height: .92;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.vb-k7p-counter__digit {
width: .625em;
height: .96em;
overflow: hidden;
position: relative;
}
.vb-k7p-counter__reel {
display: flex;
flex-direction: column;
will-change: transform;
transform: translateY(0);
}
.vb-k7p-counter__digit--rolling .vb-k7p-counter__reel {
transition: transform 720ms cubic-bezier(.22, 1, .36, 1);
transform: translateY(-1em);
}
.vb-k7p-counter__reel span {
display: block;
width: .625em;
height: .96em;
line-height: .92;
text-align: center;
}
.vb-k7p-counter__space {
width: .28em;
height: 1px;
flex: 0 0 auto;
}
.vb-k7p-counter__caption {
margin: clamp(18px, 2.1vw, 28px) 0 0;
color: #3a3a3a;
font-family: var(--t-text-font);
font-size: clamp(15px, 1.5vw, 20px);
font-weight: 400;
line-height: 1.45;
text-wrap: balance;
}
.vb-k7p-counter__caption strong {
color: var(--vb-k7p-ink);
font-family: var(--t-text-font);
font-weight: 600;
}
@media (max-width: 639px) {
.vb-k7p-counter { min-height: 360px; }
.vb-k7p-counter__number { font-size: clamp(40px, 14.5vw, 76px); }
.vb-k7p-counter__caption { max-width: 23ch; }
}
@media (prefers-reduced-motion: reduce) {
.vb-k7p-counter__digit--rolling .vb-k7p-counter__reel { transition: none; }
}
</style>

<div class="vb-k7p-counter__content">
<div id="vb-k7p-counter-value" class="vb-k7p-counter__number" role="status" aria-live="polite" aria-atomic="true" aria-label="Счётчик загружается"></div>
<p id="vb-k7p-counter-title" class="vb-k7p-counter__caption">Столько <strong>маленьких побед</strong> уже стало частью нашего общего дела</p>
</div>

<script>
(function () {
var root = document.getElementById('vb-k7p-counter');
if (!root) return;

var value = root.querySelector('#vb-k7p-counter-value');
var startValue = 1248730;
var startDate = new Date('2025-01-01T00:00:00Z').getTime();
var millisecondsPerUnit = 6000;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var previousDigits = '';
var timerId;

function currentValue() {
return startValue + Math.max(0, Math.floor((Date.now() - startDate) / millisecondsPerUnit));
}

function russianFormat(number) {
return String(number).replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}

function digitElement(digit, previousDigit, animate) {
var column = document.createElement('span');
var reel = document.createElement('span');
column.className = 'vb-k7p-counter__digit';
reel.className = 'vb-k7p-counter__reel';
var before = document.createElement('span');
var after = document.createElement('span');
before.textContent = animate ? previousDigit : digit;
after.textContent = digit;
reel.appendChild(before);
reel.appendChild(after);
column.appendChild(reel);
if (animate) {
requestAnimationFrame(function () { column.classList.add('vb-k7p-counter__digit--rolling'); });
}
return column;
}

function render(number, shouldAnimate) {
var formatted = russianFormat(number);
var oldFormatted = previousDigits;
value.textContent = '';
for (var i = 0; i < formatted.length; i += 1) {
var character = formatted.charAt(i);
if (character === ' ') {
var separator = document.createElement('span');
separator.className = 'vb-k7p-counter__space';
separator.setAttribute('aria-hidden', 'true');
value.appendChild(separator);
} else {
var oldCharacter = oldFormatted.charAt(i);
var changed = shouldAnimate && oldCharacter && oldCharacter !== character;
value.appendChild(digitElement(character, oldCharacter || character, changed && !reducedMotion));
}
}
value.setAttribute('aria-label', russianFormat(number));
previousDigits = formatted;
}

function schedule() {
window.clearTimeout(timerId);
var now = Date.now();
var untilNext = millisecondsPerUnit - ((now - startDate) % millisecondsPerUnit) + 20;
timerId = window.setTimeout(function () {
render(currentValue(), true);
schedule();
}, untilNext);
}

render(currentValue(), false);
schedule();
}());
</script>
</section>