Первый экран для сайта фитнес-клуба

<section class="vbpfk">
  <div class="vbpfk-wrap">
    <div class="vbpfk-left">
      <h1 class="vbpfk-h1">Зал, в который<br><span>возвращаются</span> в феврале</h1>
      <p class="vbpfk-lead">1 400 м², свободные веса без очереди, тренер на входе бесплатно составит первую программу. Без навязанных персоналок.</p>

      <div class="vbpfk-promo">
        <div class="vbpfk-price">
          <span class="vbpfk-price__lbl">Годовой абонемент</span>
          <div class="vbpfk-price__row">
            <b id="vbpfk-now">21 900 ₽</b>
            <s id="vbpfk-was">32 000 ₽</s>
          </div>
        </div>
        <div class="vbpfk-timer" id="vbpfk-timer"></div>
      </div>

      <form class="vbpfk-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="vbpfkSuccess" data-inputbox=".vbpfk-inp, .vbpfk-consent-inp" novalidate>
        <input type="hidden" name="formservices[]" value="HASH_EMAIL" class="js-formaction-services">
        <input type="hidden" name="form_source" value="Первый экран — фитнес-клуб">
        <div class="vbpfk-row">
          <input type="text" name="Name" class="vbpfk-inp js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" placeholder="Имя">
          <input type="tel" name="Phone" class="vbpfk-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 (___) ___-__-__">
          <button type="submit" class="vbpfk-btn t-submit">Пробная тренировка</button>
        </div>
        <label class="vbpfk-consent">
          <input type="checkbox" name="Privacy" value="Da" class="vbpfk-consent-inp js-tilda-rule" data-tilda-req="1">
          <span class="vbpfk-consent__box"></span>
          <span>Согласен с <a href="/policy" target="_blank" rel="noopener">политикой конфиденциальности</a></span>
        </label>
      </form>
    </div>

    <ul class="vbpfk-facts">
      <li><b>1 400 м²</b><span>три зоны, без пересечения потоков</span></li>
      <li><b>7:00 — 24:00</b><span>в будни, в выходные с 9:00</span></li>
      <li><b>28 тренеров</b><span>с профильным образованием</span></li>
      <li><b>Заморозка</b><span>до 60 дней в год, бесплатно</span></li>
    </ul>
  </div>
</section>

<style>
.vbpfk, .vbpfk *, .vbpfk *::before, .vbpfk *::after { box-sizing: border-box; }
.vbpfk {
  --acc: #d6f24b; --acc-dark: #c2df33; --bg: #131518; --panel: #1c1f24; --ink: #f2f4f6; --muted: #939ba5; --line: #2a2e35;
  --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, 5vw, 88px) 20px;
}
.vbpfk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpfk-left { max-width: 46em; margin-bottom: clamp(30px, 4vw, 52px); }
.vbpfk-h1 { font-family: var(--fh); font-size: clamp(32px, 5vw, 64px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em;
  text-transform: uppercase; margin: 0 0 20px; }
.vbpfk-h1 span { color: var(--acc); }
.vbpfk-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--muted); margin: 0 0 28px; max-width: 32em; }

.vbpfk-promo { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 40px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; margin-bottom: 22px; }
.vbpfk-price__lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.vbpfk-price__row { display: flex; align-items: baseline; gap: 12px; }
.vbpfk-price__row b { font-family: var(--fh); font-size: clamp(26px, 3vw, 38px); line-height: 1; font-weight: 700; color: var(--acc); }
.vbpfk-price__row s { font-size: 16px; color: #6f7883; }
.vbpfk-timer { display: flex; gap: 8px; margin-left: auto; }
.vbpfk-tick { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; text-align: center; min-width: 58px; }
.vbpfk-tick b { display: block; font-family: var(--fh); font-size: 21px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.vbpfk-tick span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.vbpfk-after { font-size: 14px; color: var(--muted); }

.vbpfk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
.vbpfk-inp { width: 100%; height: 56px; padding: 0 16px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--ink); }
.vbpfk-inp::placeholder { color: #6f7883; }
.vbpfk-inp:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbpfk-btn { min-height: 56px; padding: 0 30px; border: 0; margin: 0; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; border-radius: 10px;
  background: var(--acc) !important; color: #131518 !important; transition: background .2s ease; white-space: nowrap; }
.vbpfk-btn:hover { background: var(--acc-dark) !important; }
.vbpfk-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; cursor: pointer; font-size: 12px; line-height: 1.45; color: var(--muted); }
.vbpfk-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbpfk-consent__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #3b414a; border-radius: 5px; position: relative; }
.vbpfk-consent input:checked + .vbpfk-consent__box { background: var(--acc); border-color: var(--acc); }
.vbpfk-consent input:checked + .vbpfk-consent__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #131518; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vbpfk-consent a, .vbpfk-consent a:link, .vbpfk-consent a:visited, .vbpfk-consent a:hover, .vbpfk-consent a:active, .vbpfk-consent a:focus { color: var(--ink) !important; text-decoration: underline !important; }

.vbpfk-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vbpfk-facts li { border-top: 2px solid var(--acc); padding-top: 14px; }
.vbpfk-facts b { display: block; font-family: var(--fh); font-size: clamp(18px, 1.9vw, 24px); font-weight: 700; }
.vbpfk-facts span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.vbpfk-done { padding: 20px 0; }
.vbpfk-done b { display: block; font-family: var(--fh); font-size: 20px; margin-bottom: 6px; }
.vbpfk-done span { font-size: 14px; color: var(--muted); }

@media (max-width: 860px) { .vbpfk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vbpfk-timer { margin-left: 0; } }
@media (max-width: 620px) { .vbpfk-row { grid-template-columns: minmax(0, 1fr); } .vbpfk-h1 { font-size: clamp(27px, 8vw, 38px); } }
@media (prefers-reduced-motion: reduce) { .vbpfk * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── АКЦИЯ ── */
  var DEADLINE = '2026-09-30T23:59:59+03:00';
  var PRICE_NOW = '21 900 ₽';    /* цена по акции */
  var PRICE_FULL = '32 000 ₽';   /* обычная цена */

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var box = root.querySelector('#vbpfk-timer');
    var now = root.querySelector('#vbpfk-now'), was = root.querySelector('#vbpfk-was');
    var end = new Date(DEADLINE).getTime();
    var UNITS = [['дн', 86400000], ['ч', 3600000], ['мин', 60000], ['сек', 1000]];
    var LABELS = [['день', 'дня', 'дней'], ['час', 'часа', 'часов'], ['мин', 'мин', 'мин'], ['сек', 'сек', 'сек']];

    function word(n, forms) { var m = n % 100, k = n % 10; return m > 10 && m < 20 ? forms[2] : k === 1 ? forms[0] : k > 1 && k < 5 ? forms[1] : forms[2]; }

    function tick() {
      var left = end - Date.now();
      if (left <= 0) {
        /* акция закончилась: убираем таймер и зачёркнутую цену */
        box.innerHTML = '<span class="vbpfk-after">Акция завершена, действует обычная цена<\/span>';
        now.textContent = PRICE_FULL;
        if (was) was.style.display = 'none';
        clearInterval(timer);
        return;
      }
      now.textContent = PRICE_NOW;
      var html = '';
      UNITS.forEach(function (u, i) {
        var v = Math.floor(left / u[1]);
        left -= v * u[1];
        html += '<div class="vbpfk-tick"><b>' + (v < 10 ? '0' + v : v) + '<\/b><span>' + word(v, LABELS[i]) + '<\/span><\/div>';
      });
      box.innerHTML = html;
    }
    tick();
    var timer = setInterval(tick, 1000);

    var form = root.querySelector('.vbpfk-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.vbpfkSuccess) {
      window.vbpfkSuccess = function (f) {
        try { f.innerHTML = '<div class="vbpfk-done"><b>Записали на пробную<\/b><span>Администратор перезвонит и подберёт удобное время. Форму с собой брать не нужно.<\/span><\/div>'; } catch (e) {}
      };
    }
  }
})();
</script>

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