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

<section class="vbpzs">
  <div class="vbpzs-wrap">
    <div class="vbpzs-head">
      <h2 class="vbpzs-h2">Что можно проверить до подписания договора</h2>
      <p class="vbpzs-lead">Шесть пунктов о деньгах, сроках и текущем состоянии стройки. Проценты готовности обновляются по еженедельному отчёту стройконтроля.</p>
    </div>

    <div class="vbpzs-grid">
      <article class="vbpzs-tile">
        <span class="vbpzs-ico" aria-hidden="true">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
            <rect x="4" y="6" width="24" height="20" rx="3"/><circle cx="16" cy="16" r="5.5"/><path d="M16 13.2v5.6M13.6 16h4.8"/><path d="M8 26v3M24 26v3"/>
          </svg>
        </span>
        <h3>Деньги хранятся на эскроу-счёте</h3>
        <p>Оплата уходит на счёт в уполномоченном банке и лежит там до ввода корпуса в эксплуатацию. Застройщик получает эти средства после передачи первых квартир, стройка ведётся на проектное финансирование.</p>
        <span class="vbpzs-note">Сумма на счёте застрахована до 10 млн рублей</span>
      </article>

      <article class="vbpzs-tile">
        <span class="vbpzs-ico" aria-hidden="true">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
            <rect x="4" y="7" width="24" height="21" rx="3"/><path d="M4 13h24M11 4v5M21 4v5"/><path d="M12 20l2.5 2.5L21 16"/>
          </svg>
        </span>
        <h3>Дата передачи ключей записана в договоре</h3>
        <p>В договоре долевого участия стоит квартал передачи и размер неустойки за просрочку. О сдвиге срока застройщик обязан предупредить за два месяца и предложить дополнительное соглашение, подписывать которое вы не обязаны.</p>
        <span class="vbpzs-note">По текущему договору ключи до 30 июня 2027 года</span>
      </article>

      <article class="vbpzs-tile">
        <span class="vbpzs-ico" aria-hidden="true">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
            <path d="M7 29V6l17 5v18"/><path d="M7 11l17 5M7 17l17 5M7 23l17 5"/><path d="M4 29h25"/>
          </svg>
        </span>
        <h3>Готовность корпусов на сегодня</h3>
        <p>Стройконтроль фиксирует этажность, остекление и внутренние сети по итогам каждой недели. К проценту приложен отчёт с фотографиями со стройплощадки и датой съёмки.</p>
        <div class="vbpzs-meters">
          <div class="vbpzs-meter" data-val="92"><p class="vbpzs-mlab">Корпус 1 <b>92%</b></p><span class="vbpzs-bar"><i></i></span></div>
          <div class="vbpzs-meter" data-val="64"><p class="vbpzs-mlab">Корпус 2 <b>64%</b></p><span class="vbpzs-bar"><i></i></span></div>
          <div class="vbpzs-meter" data-val="27"><p class="vbpzs-mlab">Корпус 3 <b>27%</b></p><span class="vbpzs-bar"><i></i></span></div>
        </div>
      </article>

      <article class="vbpzs-tile">
        <span class="vbpzs-ico" aria-hidden="true">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
            <rect x="4" y="6" width="16" height="7" rx="2"/><path d="M20 9.5h5a3 3 0 013 3V17h-9"/><path d="M15.5 17h6v5h-6z"/><path d="M18.5 22v7"/>
          </svg>
        </span>
        <h3>Отделка входит в стоимость квартиры</h3>
        <p>Три готовых варианта отделки можно посмотреть вживую в шоу-квартире на первом этаже первого корпуса. Материалы и раскладка плитки прописаны в приложении к договору, поэтому отделка проходит по ипотеке вместе с квартирой.</p>
        <div class="vbpzs-meters">
          <div class="vbpzs-meter" data-val="70"><p class="vbpzs-mlab">Квартир с чистовой отделкой <b>70%</b></p><span class="vbpzs-bar"><i></i></span></div>
        </div>
      </article>

      <article class="vbpzs-tile">
        <span class="vbpzs-ico" aria-hidden="true">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
            <rect x="4" y="4" width="24" height="24" rx="5"/><path d="M13 23V10h4.5a4 4 0 010 8H13"/>
          </svg>
        </span>
        <h3>Подземный паркинг с лифтом из подъезда</h3>
        <p>480 мест на два корпуса, высота проезда 2,2 метра, есть места под внедорожники и мотоциклы. Место оформляется отдельным договором как самостоятельное помещение и продаётся с рассрочкой до конца стройки.</p>
        <div class="vbpzs-meters">
          <div class="vbpzs-meter" data-val="62"><p class="vbpzs-mlab">Мест уже выкуплено <b>62%</b></p><span class="vbpzs-bar"><i></i></span></div>
        </div>
      </article>

      <article class="vbpzs-tile">
        <span class="vbpzs-ico" aria-hidden="true">
          <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false">
            <path d="M16 28V15"/><path d="M16 15c0-5 3.5-9 8-10 .5 5-3 9.5-8 10z"/><path d="M16 20c-5-.5-8.5-5-8-10 4.5 1 8 5 8 10z"/><path d="M8 28h16"/>
          </svg>
        </span>
        <h3>Двор без машин и с готовым проектом озеленения</h3>
        <p>Проезд только для спецтехники, парковка вынесена под землю и на гостевые карманы у въезда. В проекте две детские площадки по возрастам, спортивная зона и 180 взрослых деревьев с приживаемостью по гарантии подрядчика.</p>
        <div class="vbpzs-meters">
          <div class="vbpzs-meter" data-val="35"><p class="vbpzs-mlab">Работы по двору <b>35%</b></p><span class="vbpzs-bar"><i></i></span></div>
        </div>
      </article>
    </div>
  </div>
</section>

<style>
.vbpzs, .vbpzs *, .vbpzs *::before, .vbpzs *::after { box-sizing: border-box; }
.vbpzs {
  --acc: #1f6f5c; --acc-dark: #175646; --ink: #1a2320; --muted: #5c6c67; --line: #dfe6e3; --soft: #f3f7f5;
  --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;
}
.vbpzs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpzs-head { max-width: 46em; margin-bottom: clamp(26px, 3.2vw, 44px); }
.vbpzs-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; }
.vbpzs-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbpzs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.vbpzs-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(20px, 2.2vw, 28px); transition: border-color .2s ease, box-shadow .2s ease; }
.vbpzs-tile:hover { border-color: var(--acc); box-shadow: 0 10px 28px rgba(26, 35, 32, .06); }
.vbpzs-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: 14px; background: var(--soft); color: var(--acc); }
.vbpzs-ico svg { width: 26px; height: 26px; }
.vbpzs-tile h3 { font-family: var(--fh); font-size: 17.5px; line-height: 1.32; font-weight: 600; margin: 0 0 10px; }
.vbpzs-tile > p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); }
.vbpzs-note { display: inline-block; align-self: flex-start; margin-top: 16px; font-size: 12.5px; line-height: 1.4;
  color: var(--acc-dark); background: var(--soft); border-radius: 999px; padding: 7px 13px; }

.vbpzs-meters { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.vbpzs-mlab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px;
  font-size: 13px; line-height: 1.35; color: var(--muted); }
.vbpzs-mlab b { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--ink); }
.vbpzs-bar { display: block; height: 7px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.vbpzs-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--acc), #38a184); transition: width 1s cubic-bezier(.22,1,.36,1); }

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

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var meters = Array.prototype.slice.call(root.querySelectorAll('.vbpzs-meter'));

    function fill(meter) {
      var v = parseInt(meter.getAttribute('data-val'), 10) || 0;
      if (v < 0) v = 0; if (v > 100) v = 100;
      var line = meter.querySelector('.vbpzs-bar i');
      if (line) line.style.width = v + '%';
    }
    function fillAll() { meters.forEach(fill); }

    if (!('IntersectionObserver' in window)) { fillAll(); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = meters.indexOf(e.target);
        setTimeout(function () { fill(e.target); }, Math.min(i, 6) * 110);
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -12% 0px' });
    meters.forEach(function (m) { io.observe(m); });
    setTimeout(fillAll, 2800);
  }
})();
</script>

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