Блок преимуществ транспортной компании для Tilda

<section class="vbptk">
  <div class="vbptk-wrap">
    <div class="vbptk-head">
      <h2 class="vbptk-h2">На чём держится перевозка</h2>
      <p class="vbptk-lead">Шесть вещей, которые видно по документам и в личном кабинете: отметки на маршруте, полис, свои машины и склад. Цифры взяты из отчёта за прошлый квартал.</p>
    </div>

    <div class="vbptk-grid">
      <article class="vbptk-tile">
        <div class="vbptk-top">
          <b class="vbptk-num" data-num="6" data-suf=" отметок">0</b>
          <span class="vbptk-ico">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <circle cx="16" cy="13" r="4"/><path d="M16 29c6-7 9.5-11.3 9.5-16A9.5 9.5 0 0 0 6.5 13c0 4.7 3.5 9 9.5 16z"/>
            </svg>
          </span>
        </div>
        <h3>Отслеживание груза на маршруте</h3>
        <p>Отправка отмечается при приёме, погрузке в рейс, прибытии на каждый транзитный терминал и выдаче. Статус виден в личном кабинете по номеру накладной, изменения приходят на почту.</p>
        <span class="vbptk-fin">Каждую отметку ставит кладовщик терминала вручную</span>
      </article>

      <article class="vbptk-tile">
        <div class="vbptk-top">
          <b class="vbptk-num" data-num="5" data-pre="до " data-suf=" млн ₽">0</b>
          <span class="vbptk-ico">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <path d="M16 3l11 4v9c0 7-4.6 11.6-11 13.5C9.6 27.6 5 23 5 16V7z"/><path d="M11.5 16l3 3 6-6.5"/>
            </svg>
          </span>
        </div>
        <h3>Страхование каждой отправки</h3>
        <p>Полис оформляется на объявленную стоимость при приёме груза, ставка составляет 0,35 процента. При повреждении выплату ведёт страховая компания, срок рассмотрения по договору до двадцати рабочих дней.</p>
        <span class="vbptk-fin">За прошлый год по заявлениям выплачено 11 из 12 случаев</span>
      </article>

      <article class="vbptk-tile">
        <div class="vbptk-top">
          <b class="vbptk-num" data-num="98" data-suf="%">0</b>
          <span class="vbptk-ico">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <path d="M19 3H9a3 3 0 0 0-3 3v20a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V10z"/><path d="M19 3v7h7M11 17h10M11 22h7"/>
            </svg>
          </span>
        </div>
        <h3>Документы уходят день в день</h3>
        <p>Подписанные накладные и акты сканируются в день выгрузки и попадают в кабинет к вечеру. Оригиналы отправляются почтой или собираются в пакет за месяц, если так удобнее бухгалтерии.</p>
        <span class="vbptk-fin">Работаем по электронному документообороту с 2021 года</span>
      </article>

      <article class="vbptk-tile">
        <div class="vbptk-top">
          <b class="vbptk-num" data-num="128" data-suf=" машин">0</b>
          <span class="vbptk-ico">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <path d="M2 8h15v14H2zM17 12h6l4 5v5h-10z"/><circle cx="8" cy="24" r="2.6"/><circle cx="22" cy="24" r="2.6"/>
            </svg>
          </span>
        </div>
        <h3>Машины и водители свои</h3>
        <p>В парке фургоны от полутора тонн, тентованные фуры и рефрижераторы с режимом от минус двадцати. Водители в штате, ремонт идёт в собственной зоне обслуживания, поэтому рейс не срывается из-за подрядчика.</p>
        <span class="vbptk-fin">Средний возраст техники в парке 4 года</span>
      </article>

      <article class="vbptk-tile">
        <div class="vbptk-top">
          <b class="vbptk-num" data-num="4200" data-suf=" м²">0</b>
          <span class="vbptk-ico">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <path d="M4 14L16 5l12 9v14H4z"/><path d="M11 28v-9h10v9M11 23h10"/>
            </svg>
          </span>
        </div>
        <h3>Склад ответственного хранения</h3>
        <p>Груз можно оставить на складе до готовности получателя: стеллажное и напольное хранение, паллетный учёт, температурная зона на 300 квадратных метров. Первые трое суток после прихода бесплатны.</p>
        <span class="vbptk-fin">Дальше 26 рублей за паллето-место в сутки</span>
      </article>

      <article class="vbptk-tile">
        <div class="vbptk-top">
          <b class="vbptk-num" data-num="15" data-suf=" минут">0</b>
          <span class="vbptk-ico">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <path d="M6 12a10 10 0 0 1 20 0v9a4 4 0 0 1-4 4h-4"/><rect x="3" y="13" width="5" height="8" rx="2"/><rect x="24" y="13" width="5" height="8" rx="2"/>
            </svg>
          </span>
        </div>
        <h3>Диспетчер ведёт рейс до выгрузки</h3>
        <p>За заявкой закреплён один сотрудник, он знает маршрут и состояние груза. Среднее время ответа в рабочие часы пятнадцать минут, ночью и в выходные работает дежурная линия по срочным рейсам.</p>
        <span class="vbptk-fin">Телефон диспетчера указан в накладной</span>
      </article>
    </div>
  </div>
</section>

<style>
.vbptk, .vbptk *, .vbptk *::before, .vbptk *::after { box-sizing: border-box; }
.vbptk {
  --acc: #24618f; --ink: #15202b; --muted: #5b6a78; --line: #dfe5eb; --soft: #f3f6f9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 82px) 20px;
}
.vbptk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbptk-head { max-width: 46em; margin-bottom: clamp(26px, 3.4vw, 44px); }
.vbptk-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.022em; margin: 0 0 12px; }
.vbptk-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbptk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.vbptk-tile { background: var(--soft); border-radius: 20px; padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column;
  border: 1px solid transparent; transition: border-color .2s ease, background .2s ease; }
.vbptk-tile:hover { border-color: var(--acc); background: #fff; }
.vbptk-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.vbptk-num { font-family: var(--fh); font-size: clamp(26px, 2.8vw, 34px); line-height: 1; font-weight: 700; letter-spacing: -.025em; color: var(--acc); }
.vbptk-ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; background: #fff; color: var(--acc);
  display: flex; align-items: center; justify-content: center; }
.vbptk-tile:hover .vbptk-ico { background: var(--acc); color: #fff; }
.vbptk-ico svg { width: 24px; height: 24px; }
.vbptk-tile h3 { font-family: var(--fh); font-size: 18px; line-height: 1.3; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; }
.vbptk-tile p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.vbptk-fin { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.45; color: var(--acc); }

@media (max-width: 560px) { .vbptk-tile { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .vbptk * { transition: none !important; } }
</style>

<script>
(function () {
  var roots = document.querySelectorAll('.vbptk');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var nums = root.querySelectorAll('.vbptk-num');
    var still = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

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

    function run(el, delay) {
      var to = +el.getAttribute('data-num') || 0;
      var pre = el.getAttribute('data-pre') || '';
      var suf = el.getAttribute('data-suf') || '';
      if (still) { el.textContent = pre + space(to) + suf; return; }
      var t0 = 0;
      function step(ts) {
        if (!t0) t0 = ts;
        var p = Math.min(1, (ts - t0) / 1200);
        el.textContent = pre + space(Math.round(to * (1 - Math.pow(1 - p, 3)))) + suf;
        if (p < 1) requestAnimationFrame(step);
      }
      setTimeout(function () { requestAnimationFrame(step); }, delay);
    }

    var done = 0;
    function start() { if (done) return; done = 1; for (var j = 0; j < nums.length; j++) run(nums[j], j * 90); }

    if (!('IntersectionObserver' in window)) { start(); return; }
    var io = new IntersectionObserver(function (es) {
      for (var j = 0; j < es.length; j++) {
        if (es[j].isIntersecting) { start(); io.disconnect(); return; }
      }
    }, { rootMargin: '0px 0px -12% 0px' });
    io.observe(root);
    setTimeout(start, 2600);
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.