Первый экран для сайта юридической фирмы

<section class="vbpyf">
  <div class="vbpyf-wrap">
    <div class="vbpyf-left">
      <h1 class="vbpyf-h1">Банкротство физических лиц под ключ</h1>
      <p class="vbpyf-lead">Ведём дело от первой консультации до определения суда о списании долгов. Работаем по договору с фиксированной ценой — доплат в процессе не бывает.</p>

      <ul class="vbpyf-nums">
        <li><b>486</b><span>дел завершено с 2016 года</span></li>
        <li><b>1,4 млрд ₽</b><span>долгов списано клиентам</span></li>
        <li><b>9 лет</b><span>средний стаж юристов фирмы</span></li>
      </ul>
    </div>

    <div class="vbpyf-card">
      <h2 class="vbpyf-card__ttl">Бесплатная консультация</h2>
      <p class="vbpyf-card__sub">Разберём вашу ситуацию и честно скажем, подходит ли вам банкротство. Если нет — предложим другой путь.</p>

      <form class="vbpyf-form t-form js-form-proccess" role="form" action="#" method="POST"
            data-vibeblock-form="true" data-formactiontype="2" data-error-popup="y" data-success-popup="y"
            data-success-callback="vbpyfSuccess" data-inputbox=".vbpyf-inp, .vbpyf-consent-inp" novalidate>
        <input type="hidden" name="formservices[]" value="HASH_EMAIL" class="js-formaction-services">
        <input type="hidden" name="form_source" value="Первый экран — юридическая фирма">
        <input type="text" name="Name" class="vbpyf-inp js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" placeholder="Ваше имя">
        <input type="tel" name="Phone" class="vbpyf-inp js-tilda-rule js-tilda-mask" data-tilda-req="1"
               data-tilda-rule="phone" data-tilda-mask="+7 (999) 999-99-99" inputmode="tel" placeholder="+7 (___) ___-__-__">
        <label class="vbpyf-consent">
          <input type="checkbox" name="Privacy" value="Da" class="vbpyf-consent-inp js-tilda-rule" data-tilda-req="1">
          <span class="vbpyf-consent__box"></span>
          <span>Отправляя заявку, вы соглашаетесь с <a href="/policy" target="_blank" rel="noopener">политикой конфиденциальности</a></span>
        </label>
        <button type="submit" class="vbpyf-submit t-submit">Записаться на консультацию</button>
      </form>

      <p class="vbpyf-time">Перезваниваем в течение 20 минут в рабочее время. Заявки после 20:00 обрабатываем утром следующего дня.</p>
    </div>
  </div>
</section>

<style>
.vbpyf, .vbpyf *, .vbpyf *::before, .vbpyf *::after { box-sizing: border-box; }
.vbpyf {
  --acc: #1d3f6e; --acc-dark: #16314f; --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, 88px) 20px;
}
.vbpyf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4.5vw, 68px); align-items: center; }
.vbpyf-h1 { font-family: var(--fh); font-size: clamp(29px, 4.1vw, 50px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 0 0 20px; max-width: 15em; }
.vbpyf-lead { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; color: var(--muted); margin: 0 0 34px; max-width: 32em; }

.vbpyf-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  padding-top: 28px; border-top: 1px solid var(--line); }
.vbpyf-nums b { display: block; font-family: var(--fh); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; font-weight: 600; color: var(--acc); }
.vbpyf-nums span { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 8px; }

.vbpyf-card { background: var(--soft); border-radius: 18px; padding: clamp(24px, 2.8vw, 34px); }
.vbpyf-card__ttl { font-family: var(--fh); font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.vbpyf-card__sub { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }
.vbpyf-inp { width: 100%; height: 54px; padding: 0 16px; margin-bottom: 10px; font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.vbpyf-inp:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbpyf-consent { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0 18px; cursor: pointer; font-size: 12px; line-height: 1.5; color: var(--muted); }
.vbpyf-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbpyf-consent__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #c3cad3; border-radius: 4px; background: #fff; position: relative; }
.vbpyf-consent input:checked + .vbpyf-consent__box { background: var(--acc); border-color: var(--acc); }
.vbpyf-consent input:checked + .vbpyf-consent__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vbpyf-consent a, .vbpyf-consent a:link, .vbpyf-consent a:visited, .vbpyf-consent a:hover, .vbpyf-consent a:active, .vbpyf-consent a:focus { color: var(--acc) !important; text-decoration: underline !important; }
.vbpyf-submit { width: 100%; min-height: 56px; border: 0; margin: 0; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px;
  font-weight: 600; cursor: pointer; border-radius: 8px; background: var(--acc) !important; color: #fff !important; transition: background .2s ease; }
.vbpyf-submit:hover { background: var(--acc-dark) !important; }
.vbpyf-time { margin: 16px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.vbpyf-done { text-align: center; padding: 30px 6px; }
.vbpyf-done b { display: block; font-family: var(--fh); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.vbpyf-done span { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) { .vbpyf-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vbpyf-h1 { font-size: clamp(24px, 6.8vw, 32px); } .vbpyf-nums { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .vbpyf * { transition: none !important; } }
</style>

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var form = root.querySelector('.vbpyf-form');
    if (form && !form.__b) {
      form.__b = 1;
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = form.querySelector('button[type="submit"], .t-submit');
        if (btn && typeof window.t_forms__initBtnClick === 'function') {
          try { window.t_forms__initBtnClick({ target: btn, srcElement: btn, preventDefault: function () {} }); } catch (_) {}
        }
      });
    }
    if (!window.vbpyfSuccess) {
      window.vbpyfSuccess = function (f) {
        try { f.innerHTML = '<div class="vbpyf-done"><b>Заявка принята<\/b><span>Юрист перезвонит в течение 20 минут и разберёт вашу ситуацию.<\/span><\/div>'; } catch (e) {}
      };
    }
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно. В форме замените HASH_EMAIL на хеш приёмника из Tilda → Site Settings → Forms.