Блок гарантий для сайта юридических услуг

<section class="vbgyu">
  <div class="vbgyu-wrap">
    <div class="vbgyu-head">
      <h2 class="vbgyu-h2">Гарантии, записанные в договоре</h2>
      <p class="vbgyu-lead">Не обещания на сайте, а пункты соглашения. Каждый можно предъявить, если мы его нарушим.</p>
    </div>

    <div class="vbgyu-grid" id="vbgyu-grid"></div>

    <p class="vbgyu-note">Полный текст гарантий — в разделе 5 договора об оказании юридических услуг. Присылаем его до оплаты, а не после.</p>
  </div>
</section>

<style>
.vbgyu, .vbgyu *, .vbgyu *::before, .vbgyu *::after { box-sizing: border-box; }
.vbgyu {
  --acc: #1d3f6e; --ink: #1b2028; --muted: #5d6672; --line: #dfe3e8; --soft: #f4f6f9;
  --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, 80px) 20px;
}
.vbgyu-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbgyu-head { max-width: 42em; margin-bottom: clamp(26px, 3vw, 42px); }
.vbgyu-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbgyu-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbgyu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vbgyu-item { background: #fff; padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; }
.vbgyu-val { font-family: var(--fh); font-size: clamp(26px, 2.8vw, 36px); line-height: 1; font-weight: 600; color: var(--acc); margin-bottom: 14px; }
.vbgyu-bar { height: 4px; border-radius: 4px; background: var(--soft); overflow: hidden; margin-bottom: 18px; }
.vbgyu-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--acc); transition: width .9s cubic-bezier(.22,1,.36,1); }
.vbgyu-item h3 { font-family: var(--fh); font-size: 17px; line-height: 1.35; font-weight: 600; margin: 0 0 10px; }
.vbgyu-item p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); flex: 1; }
.vbgyu-cond { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: #8a939e; }
.vbgyu-note { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 46em; }

@media (prefers-reduced-motion: reduce) { .vbgyu-bar i { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ГАРАНТИИ: val — показатель (любой текст), bar — заполнение полосы 0–100 ── */
  var GUARANTEES = [
    { val: '0 ₽', bar: 100, ttl: 'Не выиграли — вернём гонорар',
      txt: 'Если суд отказал в списании долгов и это не связано с сокрытием вами имущества или сделок, возвращаем весь гонорар за ведение дела.',
      cond: 'Не распространяется на обязательные расходы: госпошлину, вознаграждение управляющего, публикации.' },
    { val: '20 минут', bar: 92, ttl: 'Отвечаем в рабочее время',
      txt: 'Заявка с сайта попадает напрямую юристу, а не в общий колл-центр. Среднее время первого ответа за прошлый квартал — 14 минут.',
      cond: 'Заявки после 20:00 и в выходные обрабатываются в первый рабочий час.' },
    { val: '486', bar: 88, ttl: 'Завершённых дел, а не начатых',
      txt: 'Считаем только дела, доведённые до определения суда. Незавершённые и переданные другим фирмам в статистику не идут.',
      cond: 'Данные с 2016 года, подтверждаются картотекой арбитражных дел.' },
    { val: 'Фикс', bar: 100, ttl: 'Цена не растёт по ходу дела',
      txt: 'Сумма фиксируется в договоре до начала работы. Дополнительные обособленные споры оплачиваются отдельно и только по вашему письменному согласию.',
      cond: 'Расходы третьих лиц — суда, управляющего, публикаций — в фиксированную цену не входят и оплачиваются по факту.' }
  ];

  var roots = document.querySelectorAll('.vbgyu');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var grid = root.querySelector('#vbgyu-grid');

    grid.innerHTML = GUARANTEES.map(function (g) {
      return '<article class="vbgyu-item"><span class="vbgyu-val">' + g.val + '<\/span>' +
        '<div class="vbgyu-bar"><i data-val="' + g.bar + '"><\/i><\/div>' +
        '<h3>' + g.ttl + '<\/h3><p>' + g.txt + '<\/p>' +
        '<p class="vbgyu-cond">' + g.cond + '<\/p><\/article>';
    }).join('');

    var bars = grid.querySelectorAll('.vbgyu-bar i');
    function fill() { bars.forEach(function (b, i) { setTimeout(function () { b.style.width = b.dataset.val + '%'; }, i * 110); }); }

    if (!('IntersectionObserver' in window)) { fill(); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) { if (e.isIntersecting) { fill(); io.disconnect(); } });
    }, { rootMargin: '0px 0px -12% 0px' });
    io.observe(grid);
    setTimeout(fill, 2500);
  }
})();
</script>

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