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

<section class="vbpsk">
  <div class="vbpsk-wrap">
    <div class="vbpsk-head">
      <h2 class="vbpsk-h2">Цифры вместо обещаний</h2>
      <p class="vbpsk-lead">Всё, что можно проверить: записью, чеком или отзывом. «Индивидуальный подход» в этот список не попал.</p>
    </div>

    <div class="vbpsk-grid">
      <article class="vbpsk-item">
        <div class="vbpsk-ring" data-val="94">
          <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" class="vbpsk-ring__bg"/>
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" class="vbpsk-ring__fg"/>
          </svg>
          <b>94%</b>
        </div>
        <h3>Возвращаются повторно</h3>
        <p>Доля клиентов, которые записались снова в течение трёх месяцев. Считаем по журналу записи, не по ощущениям.</p>
      </article>

      <article class="vbpsk-item">
        <div class="vbpsk-ring" data-val="100">
          <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" class="vbpsk-ring__bg"/>
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" class="vbpsk-ring__fg"/>
          </svg>
          <b>21 день</b>
        </div>
        <h3>Держится покрытие</h3>
        <p>Минимальный срок, который мы гарантируем. Скололось раньше — переделываем бесплатно, без разбирательств.</p>
      </article>

      <article class="vbpsk-item">
        <div class="vbpsk-ring" data-val="70">
          <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" class="vbpsk-ring__bg"/>
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" class="vbpsk-ring__fg"/>
          </svg>
          <b>7 лет</b>
        </div>
        <h3>Средний стаж мастера</h3>
        <p>Берём в команду от пяти лет практики. Ученики работают только в паре с наставником и по сниженной цене.</p>
      </article>

      <article class="vbpsk-item">
        <div class="vbpsk-ring" data-val="88">
          <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" class="vbpsk-ring__bg"/>
            <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" class="vbpsk-ring__fg"/>
          </svg>
          <b>90 мин</b>
        </div>
        <h3>Один клиент — один слот</h3>
        <p>Мастер не ведёт двоих одновременно. Поэтому не бывает «подождите, я досушу соседку» и переносов на ходу.</p>
      </article>
    </div>
  </div>
</section>

<style>
.vbpsk, .vbpsk *, .vbpsk *::before, .vbpsk *::after { box-sizing: border-box; }
.vbpsk {
  --acc: #b9705f; --ink: #33272a; --muted: #7a6a6c; --line: #ece1dd; --soft: #faf3f1;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbpsk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpsk-head { max-width: 44em; margin-bottom: clamp(28px, 3.4vw, 48px); }
.vbpsk-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbpsk-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbpsk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 2.6vw, 34px); }
.vbpsk-item { text-align: center; }
.vbpsk-ring { position: relative; width: 132px; height: 132px; margin: 0 auto 18px; }
.vbpsk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vbpsk-ring__bg { color: #e6d4ce; }
.vbpsk-ring__fg { color: var(--acc); stroke-dasharray: 276.5; stroke-dashoffset: 276.5; transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); }
.vbpsk-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.vbpsk-item h3 { font-family: var(--fh); font-size: 18px; line-height: 1.3; font-weight: 600; margin: 0 0 8px; }
.vbpsk-item p { margin: 0 auto; max-width: 24em; font-size: 15px; line-height: 1.6; color: var(--muted); }

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

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var rings = root.querySelectorAll('.vbpsk-ring');
    var LEN = 2 * Math.PI * 44;   /* длина окружности радиусом 44 */

    function fill(ring) {
      var val = Math.max(0, Math.min(100, +ring.dataset.val || 0));
      var fg = ring.querySelector('.vbpsk-ring__fg');
      fg.style.strokeDasharray = LEN;
      fg.style.strokeDashoffset = LEN - LEN * val / 100;
    }

    if (!('IntersectionObserver' in window)) { rings.forEach(fill); return; }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = Array.prototype.indexOf.call(rings, e.target);
        setTimeout(function () { fill(e.target); }, i * 120);
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -10% 0px' });
    rings.forEach(function (r) { io.observe(r); });
    setTimeout(function () { rings.forEach(fill); }, 2500);
  }
})();
</script>

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