Блок «Этапы строительства дома» для Tilda

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

    <ol class="vbesd-line" id="vbesd-line">
      <li class="vbesd-step">
        <span class="vbesd-dot" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
            <path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/><path d="M9 13h6M9 17h4"/>
          </svg>
        </span>
        <div class="vbesd-body">
          <span class="vbesd-when">Неделя 1</span>
          <h3>Договор с закреплённой сметой</h3>
          <p>Считаем объёмы по проекту и вносим итог в договор отдельным приложением. Цена меняется только письменным дополнением, которое подписываете вы, а не по звонку прораба.</p>
          <span class="vbesd-fact">42 позиции в смете, все с объёмом и ценой</span>
        </div>
      </li>

      <li class="vbesd-step">
        <span class="vbesd-dot" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
            <path d="M3 17h18M5 17V9l7-4 7 4v8"/><path d="M9 17v-4h6v4"/>
          </svg>
        </span>
        <div class="vbesd-body">
          <span class="vbesd-when">Недели 2-4</span>
          <h3>Геология и фундамент</h3>
          <p>Бурим три скважины на глубину 5 метров и подбираем основание по грунту. Заливку ведём бетоном заводского замеса, каждую машину сопровождает паспорт с маркой смеси.</p>
          <span class="vbesd-fact">28 дней набора прочности до нагрузки</span>
        </div>
      </li>

      <li class="vbesd-step">
        <span class="vbesd-dot" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
            <rect x="4" y="8" width="16" height="12" rx="1"/><path d="M4 14h16M10 8v6M14 14v6"/><path d="M4 8l8-4 8 4"/>
          </svg>
        </span>
        <div class="vbesd-body">
          <span class="vbesd-when">Недели 5-10</span>
          <h3>Коробка и перекрытия</h3>
          <p>Каркас собираем на площадке из сухой доски камерной сушки, газобетон кладём на клей с толщиной шва 2 мм. Геометрию проверяем лазерным нивелиром после каждого ряда.</p>
          <span class="vbesd-fact">Отклонение стены до 3 мм на 2 метра</span>
        </div>
      </li>

      <li class="vbesd-step">
        <span class="vbesd-dot" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
            <path d="M2 12L12 4l10 8"/><path d="M5 12v8h14v-8"/><path d="M9 20v-5h6v5"/>
          </svg>
        </span>
        <div class="vbesd-body">
          <span class="vbesd-when">Недели 11-13</span>
          <h3>Кровля и тёплый контур</h3>
          <p>Ставим стропильную систему, кроем крышу и закрываем дом окнами с входной дверью. С этого момента внутри можно работать в любую погоду, а материалы не мокнут под дождём.</p>
          <span class="vbesd-fact">Гарантия на кровельный пирог 5 лет</span>
        </div>
      </li>

      <li class="vbesd-step">
        <span class="vbesd-dot" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
            <path d="M6 3v7a3 3 0 0 0 6 0V3"/><path d="M9 13v8"/><path d="M15 21V9a3 3 0 0 1 6 0v3"/>
          </svg>
        </span>
        <div class="vbesd-body">
          <span class="vbesd-when">Недели 14-18</span>
          <h3>Инженерия и разводка</h3>
          <p>Прокладываем электрику, водоснабжение, канализацию и отопление до штукатурных работ. Схему разводки передаём в бумаге и файлом, чтобы через год вы знали, где проходит труба.</p>
          <span class="vbesd-fact">Опрессовка контура давлением 4 бара</span>
        </div>
      </li>

      <li class="vbesd-step">
        <span class="vbesd-dot" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true">
            <path d="M4 20V9l8-5 8 5v11H4z"/><path d="M9 15l2 2 4-4.5"/>
          </svg>
        </span>
        <div class="vbesd-body">
          <span class="vbesd-when">Недели 19-20</span>
          <h3>Приёмка и передача ключей</h3>
          <p>Обходим дом по листу из 96 пунктов вместе с вами, замечания устраняем за две недели. Передаём исполнительную документацию, паспорта на оборудование и гарантийный талон.</p>
          <span class="vbesd-fact">96 пунктов в листе приёмки</span>
        </div>
      </li>
    </ol>

    <div class="vbesd-foot">
      <p>Средний срок дома площадью 140 м² в каркасе составляет 5 месяцев. Просрочку по нашей вине компенсируем по договору.</p>
      <a class="vbesd-cta" href="#grafik">Посмотреть график стройки</a>
    </div>
  </div>
</section>

<style>
.vbesd, .vbesd *, .vbesd *::before, .vbesd *::after { box-sizing: border-box; }
.vbesd {
  --acc: #8a6a3c; --acc-dark: #6f5430; --ink: #201e1a; --muted: #6c655a; --line: #e6e0d4; --soft: #f7f4ed;
  --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;
}
.vbesd-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbesd-head { max-width: 44em; margin-bottom: clamp(28px, 3.4vw, 46px); }
.vbesd-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; }
.vbesd-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbesd-line { list-style: none; margin: 0; padding: 0; position: relative; }
.vbesd-line::before { content: ''; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.vbesd-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding-bottom: 26px;
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.vbesd-step:last-child { padding-bottom: 0; }
.vbesd-step.vbesd-step--in { opacity: 1; transform: none; }
.vbesd-dot { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--acc); }
.vbesd-dot svg { width: 24px; height: 24px; }
.vbesd-body { padding-top: 3px; }
.vbesd-when { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 8px; }
.vbesd-body h3 { font-family: var(--fh); font-size: clamp(18px, 1.9vw, 22px); line-height: 1.25; font-weight: 600; margin: 0 0 9px; }
.vbesd-body p { margin: 0 0 11px; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 46em; }
.vbesd-fact { display: inline-block; font-size: 13px; font-weight: 600; background: var(--soft); border-radius: 999px; padding: 7px 15px; }

.vbesd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(22px, 2.6vw, 32px); border-top: 1px solid var(--line); }
.vbesd-foot p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 34em; }
.vbesd-cta, .vbesd-cta:link, .vbesd-cta:visited, .vbesd-cta:active, .vbesd-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 12px; font-size: 16px; font-weight: 600; white-space: nowrap;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbesd-cta:hover { background: var(--acc-dark); color: #fff !important; }

@media (max-width: 560px) {
  .vbesd-line::before { left: 21px; }
  .vbesd-step { grid-template-columns: 44px minmax(0, 1fr); gap: 15px; }
  .vbesd-dot { width: 44px; height: 44px; border-radius: 13px; }
  .vbesd-dot svg { width: 20px; height: 20px; }
  .vbesd-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vbesd * { transition: none !important; }
  .vbesd-step { opacity: 1; transform: none; }
}
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var steps = root.querySelectorAll('.vbesd-step');

    function open(el, delay) {
      setTimeout(function () { el.className = 'vbesd-step vbesd-step--in'; }, delay);
    }
    function openAll() {
      for (var n = 0; n < steps.length; n++) open(steps[n], 0);
    }

    if (!('IntersectionObserver' in window)) { openAll(); return; }
    var io = new IntersectionObserver(function (es) {
      for (var e = 0; e < es.length; e++) {
        if (!es[e].isIntersecting) continue;
        var idx = 0;
        for (var s = 0; s < steps.length; s++) { if (steps[s] === es[e].target) idx = s; }
        open(es[e].target, (idx % 3) * 110);
        io.unobserve(es[e].target);
      }
    }, { rootMargin: '0px 0px -8% 0px' });
    for (var k = 0; k < steps.length; k++) io.observe(steps[k]);
    setTimeout(openAll, 2600);
  }
})();
</script>

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