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

<section class="vbpre">
  <div class="vbpre-wrap">
    <div class="vbpre-left">
      <h1 class="vbpre-h1">Ремонт квартиры <span>под ключ</span> за 45 дней</h1>
      <p class="vbpre-lead">Фиксируем смету в договоре. Если сроки сорваны по нашей вине — платим неустойку 0,5% за каждый день.</p>

      <div class="vbpre-stats">
        <div class="vbpre-stat"><b data-num>45</b><span>дней средний срок под ключ</span></div>
        <div class="vbpre-stat"><b data-num>218</b><span>объектов сдано с 2019 года</span></div>
        <div class="vbpre-stat"><b data-num>3</b><span>года гарантии на работы</span></div>
      </div>

      <div class="vbpre-acts">
        <a class="vbpre-btn" href="#vbpre-form">Рассчитать смету</a>
        <a class="vbpre-btn vbpre-btn--gh" href="/nashi-raboty">Посмотреть объекты</a>
      </div>
    </div>

    <div class="vbpre-card" id="vbpre-form">
      <svg class="vbpre-plan" viewBox="0 0 320 200" aria-hidden="true" focusable="false">
        <g fill="none" stroke="currentColor" stroke-width="1.5">
          <rect x="12" y="12" width="296" height="176" rx="4"/>
          <path d="M132 12v78M132 128v60M12 90h120M196 12v176M196 104h112"/>
          <path d="M132 90v38" stroke-dasharray="5 5"/>
          <circle cx="240" cy="60" r="16"/><path d="M228 148h40v24h-40z"/>
        </g>
      </svg>

      <div class="vbpre-price">
        <span class="vbpre-price__lbl">Ориентир по вашей площади</span>
        <strong class="vbpre-price__val" id="vbpre-out">от 630 000 ₽</strong>
        <span class="vbpre-price__sub" id="vbpre-sub">черновая + чистовая, без материалов</span>
      </div>

      <label class="vbpre-range">
        <span class="vbpre-range__top">Площадь <b id="vbpre-area">42 м²</b></span>
        <input type="range" id="vbpre-slider" min="20" max="160" step="1" value="42" aria-label="Площадь квартиры в квадратных метрах">
        <span class="vbpre-range__ticks"><i>20</i><i>90</i><i>160</i></span>
      </label>

      <form class="vbpre-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="vbpreSuccess"
            data-inputbox=".vbpre-field input, .vbpre-consent-inp" novalidate>
        <input type="hidden" name="formservices[]" value="HASH_EMAIL" class="js-formaction-services">
        <input type="hidden" name="form_source" value="Первый экран — ремонт под ключ">
        <input type="hidden" name="Ploschad" id="vbpre-hidden" value="42 м²">

        <div class="vbpre-field">
          <input type="text" name="Name" class="js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" placeholder=" ">
          <label>Как к вам обращаться</label>
          <div class="t-input-error"></div>
        </div>
        <div class="vbpre-field">
          <input type="tel" name="Phone" class="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=" ">
          <label>Телефон</label>
          <div class="t-input-error"></div>
        </div>

        <label class="vbpre-consent">
          <input type="checkbox" name="Privacy" value="Da" class="vbpre-consent-inp js-tilda-rule" data-tilda-req="1">
          <span class="vbpre-consent__box"></span>
          <span class="vbpre-consent__txt">Отправляя заявку, вы соглашаетесь с <a href="/policy" target="_blank" rel="noopener">политикой конфиденциальности</a></span>
        </label>

        <button type="submit" class="vbpre-submit t-submit">Вызвать замерщика бесплатно</button>
      </form>
    </div>
  </div>
</section>

<style>
.vbpre, .vbpre *, .vbpre *::before, .vbpre *::after { box-sizing: border-box; }
.vbpre {
  /* ── ПАЛИТРА: меняйте только эти пять строк ── */
  --acc: #e8622a;            /* акцент: кнопки, ползунок, слово в заголовке */
  --acc-dark: #cf5119;       /* акцент при наведении */
  --ink: #1b1b1b;            /* основной текст */
  --muted: #6f6f6f;          /* приглушённый текст */
  --line: #e6e3df;           /* границы */
  --bg: #f6f4f1;             /* фон блока */
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f);
  padding: clamp(36px, 6vw, 84px) 20px;
}
.vbpre-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.vbpre-h1 { font-family: var(--fh); font-size: clamp(31px, 4.6vw, 58px); line-height: 1.06; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 18px; }
.vbpre-h1 span { color: var(--acc); }
.vbpre-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--muted); margin: 0 0 28px; max-width: 30em; }

.vbpre-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.vbpre-stat { border-left: 3px solid var(--acc); padding: 2px 0 2px 14px; }
.vbpre-stat b { display: block; font-family: var(--fh); font-size: clamp(26px, 2.6vw, 36px); line-height: 1; font-weight: 700; }
.vbpre-stat span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--muted); }

.vbpre-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.vbpre-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px;
  border-radius: 10px; font-size: 16px; font-weight: 600; text-align: center; transition: background .2s ease, color .2s ease; }
.vbpre-btn, .vbpre-btn:link, .vbpre-btn:visited, .vbpre-btn:active, .vbpre-btn:focus {
  background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbpre-btn:hover { background: var(--acc-dark); color: #fff !important; }
.vbpre-btn--gh, .vbpre-btn--gh:link, .vbpre-btn--gh:visited, .vbpre-btn--gh:active, .vbpre-btn--gh:focus {
  background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.vbpre-btn--gh:hover { background: #fff; color: var(--ink) !important; }

.vbpre-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: clamp(22px, 2.5vw, 32px); }
.vbpre-plan { position: absolute; right: -40px; top: -30px; width: 260px; color: var(--acc); opacity: .09; pointer-events: none; }

.vbpre-price { position: relative; margin-bottom: 20px; }
.vbpre-price__lbl { display: block; font-size: 13px; color: var(--muted); }
.vbpre-price__val { display: block; font-family: var(--fh); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; font-weight: 700; margin: 4px 0 6px; }
.vbpre-price__sub { display: block; font-size: 13px; color: var(--muted); }

.vbpre-range { position: relative; display: block; margin-bottom: 22px; }
.vbpre-range__top { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.vbpre-range__top b { color: var(--ink); font-weight: 600; }
.vbpre-range__ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #a5a5a5; font-style: normal; }
.vbpre-range__ticks i { font-style: normal; }
.vbpre input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px;
  background: var(--line); outline: none; margin: 0; }
.vbpre input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px;
  border-radius: 50%; background: var(--acc); border: 4px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer; }
.vbpre input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc);
  border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer; }

.vbpre-field { position: relative; margin-bottom: 10px; }
.vbpre-field input { width: 100%; height: 54px; padding: 18px 16px 4px; font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.vbpre-field input:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbpre-field label { position: absolute; left: 17px; top: 17px; font-size: 15px; color: #9a9a9a; pointer-events: none; transition: .15s ease; }
.vbpre-field input:focus + label, .vbpre-field input:not(:placeholder-shown) + label { top: 7px; font-size: 11px; color: var(--muted); }

.vbpre-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 16px; cursor: pointer; font-size: 12px; line-height: 1.45; color: var(--muted); }
.vbpre-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbpre-consent__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #c9c5c0; border-radius: 5px; background: #fff; position: relative; }
.vbpre-consent input:checked + .vbpre-consent__box { background: var(--acc); border-color: var(--acc); }
.vbpre-consent input:checked + .vbpre-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); }
.vbpre-consent input:focus-visible + .vbpre-consent__box { outline: 2px solid var(--acc); outline-offset: 2px; }
.vbpre-consent a, .vbpre-consent a:link, .vbpre-consent a:visited, .vbpre-consent a:hover, .vbpre-consent a:active, .vbpre-consent a:focus {
  color: var(--ink) !important; text-decoration: underline !important; }

.vbpre-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: 10px;
  background: var(--acc) !important; color: #fff !important; transition: background .2s ease; }
.vbpre-submit:hover { background: var(--acc-dark) !important; }

.vbpre-done { text-align: center; padding: 26px 10px; }
.vbpre-done b { display: block; font-family: var(--fh); font-size: 20px; margin-bottom: 6px; }
.vbpre-done span { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) {
  .vbpre-wrap { grid-template-columns: minmax(0, 1fr); }
  .vbpre-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 560px) {
  .vbpre-h1 { font-size: clamp(25px, 6.8vw, 32px); }
  .vbpre-stats { grid-template-columns: minmax(0, 1fr); }
  .vbpre-stat { border-left: 0; border-top: 2px solid var(--acc); padding: 10px 0 0; }
  .vbpre-stat b { font-size: 24px; }
  .vbpre-acts .vbpre-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vbpre * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── ЦЕНА: базовая ставка за м² и вилка ── */
  var PRICE = 15000;   /* базовая цена за квадратный метр, ₽ */
  var MIN = 1.0;       /* нижняя граница вилки */
  var MAX = 1.28;      /* верхняя граница вилки */

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;

    var slider = root.querySelector('#vbpre-slider');
    var area = root.querySelector('#vbpre-area');
    var out = root.querySelector('#vbpre-out');
    var hid = root.querySelector('#vbpre-hidden');

    function money(n) { return Math.round(n / 1000) * 1000; }
    function fmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    function render() {
      var a = +slider.value;
      area.textContent = a + ' м²';
      if (hid) hid.value = a + ' м²';
      out.textContent = 'от ' + fmt(money(a * PRICE * MIN)) + ' до ' + fmt(money(a * PRICE * MAX)) + ' ₽';
    }
    if (slider) { slider.addEventListener('input', render); render(); }

    var form = root.querySelector('.vbpre-form');
    if (form && !form.__b) {
      form.__b = 1;
      /* Tilda не вешает обработчик на .t-submit внутри vibe-блока — зовём вручную */
      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.vbpreSuccess) {
      window.vbpreSuccess = function (f) {
        try {
          f.innerHTML = '<div class="vbpre-done"><b>Заявка принята<\/b>' +
            '<span>Замерщик перезвонит в течение рабочего дня и согласует время.<\/span><\/div>';
        } catch (e) {}
      };
    }
  }
})();
</script>

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