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

<section class="vbpkk">
  <div class="vbpkk-wrap">
    <header class="vbpkk-intro">
      <span class="vbpkk-tag">Клининговая служба по городу и области, с 2016 года</span>
      <h1 class="vbpkk-h1">Наведём порядок так, чтобы <span>переделывать не пришлось</span></h1>
      <p class="vbpkk-lead">Поддерживающая уборка, генеральная, вынос строительной пыли после ремонта, мытьё окон и химчистка мебели. Работу принимаете по чек-листу из 60 пунктов, платите после приёмки.</p>
    </header>

    <div class="vbpkk-board">
      <div class="vbpkk-pick" id="vbpkk-pick" role="group" aria-label="Вид уборки"></div>

      <div class="vbpkk-read">
        <div class="vbpkk-cell">
          <span>Цена от</span>
          <b id="vbpkk-price">2 400 ₽</b>
          <i id="vbpkk-unit">за квартиру 40 м²</i>
        </div>
        <div class="vbpkk-cell">
          <span>Выезд бригады</span>
          <b id="vbpkk-when">через 2 часа</b>
          <i id="vbpkk-slot">свободные окна на сегодня</i>
        </div>
        <div class="vbpkk-cell">
          <span>Время работы</span>
          <b id="vbpkk-time">2-3 часа</b>
          <i id="vbpkk-crew">один клинер</i>
        </div>
      </div>

      <p class="vbpkk-desc" id="vbpkk-desc">Полы, пыль, санузел, кухня и зеркала. Подходит, если дома убирают регулярно и нужно поддержать порядок.</p>

      <div class="vbpkk-acts">
        <a class="vbpkk-btn" href="#raschet">Рассчитать стоимость уборки</a>
        <a class="vbpkk-link" href="#reglament">Что входит в уборку</a>
      </div>
    </div>

    <ul class="vbpkk-stats">
      <li><b>430</b><span>уборок в месяц, из них 96 в офисах и салонах</span></li>
      <li><b>9 лет</b><span>на рынке, в штате 34 клинера с обучением внутри компании</span></li>
      <li><b>71%</b><span>клиентов заказывают повторно в течение квартала</span></li>
    </ul>
  </div>
</section>

<style>
.vbpkk, .vbpkk *, .vbpkk *::before, .vbpkk *::after { box-sizing: border-box; }
.vbpkk {
  --acc: #0f8f7b; --acc-dark: #0b7263; --ink: #16211f; --muted: #5b6f6b; --line: #dde9e6; --soft: #f1f7f5;
  --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, 84px) 20px;
}
.vbpkk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpkk-intro { max-width: 21em; }
.vbpkk-tag { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--acc);
  background: var(--soft); border-radius: 999px; padding: 7px 15px; margin-bottom: 18px; }
.vbpkk-h1 { font-family: var(--fh); font-size: clamp(31px, 4.6vw, 58px); line-height: 1.05; font-weight: 700;
  letter-spacing: -.024em; margin: 0 0 16px; }
.vbpkk-h1 span { color: var(--acc); }
.vbpkk-lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--muted); margin: 0; max-width: 34em; }

.vbpkk-board { margin-top: clamp(26px, 3.4vw, 44px); background: var(--soft); border-radius: 24px;
  padding: clamp(20px, 2.6vw, 30px); }
.vbpkk-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 8px; margin-bottom: 20px; }
.vbpkk-mode { min-height: 50px; padding: 8px 16px; border: 1.5px solid transparent; margin: 0; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 13px;
  background: #fff !important; color: var(--muted) !important; transition: .18s ease; }
.vbpkk-mode:hover { color: var(--ink) !important; border-color: var(--line); }
.vbpkk-mode--on, .vbpkk-mode--on:hover { background: var(--acc) !important; color: #fff !important; border-color: var(--acc); }

.vbpkk-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px;
  background: var(--line); border-radius: 16px; overflow: hidden; }
.vbpkk-cell { background: #fff; padding: 18px 20px; }
.vbpkk-cell span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.vbpkk-cell b { display: block; font-family: var(--fh); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.1;
  font-weight: 700; letter-spacing: -.02em; }
.vbpkk-cell i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.vbpkk-desc { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 44em; }

.vbpkk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.vbpkk-btn, .vbpkk-btn:link, .vbpkk-btn:visited, .vbpkk-btn:active, .vbpkk-btn:focus { display: inline-flex; align-items: center;
  justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 13px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbpkk-btn:hover { background: var(--acc-dark); color: #fff !important; }
.vbpkk-link, .vbpkk-link:link, .vbpkk-link:visited, .vbpkk-link:active, .vbpkk-link:focus { font-size: 15px; font-weight: 600;
  color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.vbpkk-link:hover { color: var(--acc) !important; }

.vbpkk-stats { list-style: none; margin: clamp(26px, 3.2vw, 42px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.vbpkk-stats li { border-top: 2px solid var(--acc); padding-top: 14px; }
.vbpkk-stats b { display: block; font-family: var(--fh); font-size: clamp(28px, 3.2vw, 38px); line-height: 1;
  font-weight: 700; letter-spacing: -.022em; margin-bottom: 8px; }
.vbpkk-stats span { display: block; font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 560px) {
  .vbpkk-intro { max-width: none; }
  .vbpkk-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vbpkk * { transition: none !important; } }
</style>

<script>
(function () {
  var MODES = [
    { n: 'Поддерживающая', price: '2 400 ₽', unit: 'за квартиру 40 м²', when: 'через 2 часа',
      slot: 'свободные окна на сегодня', time: '2-3 часа', crew: 'один клинер',
      d: 'Полы, пыль на открытых поверхностях, санузел, кухня, зеркала и вынос мусора. Берут, когда дома убирают регулярно и нужно поддержать порядок.' },
    { n: 'Генеральная', price: '5 900 ₽', unit: 'за квартиру 40 м²', when: 'на завтра',
      slot: 'запись за сутки', time: '5-7 часов', crew: 'двое клинеров',
      d: 'Мебель отодвигаем, моем внутри шкафов и техники, снимаем налёт в санузле, чистим плиту и вытяжку. Делают раз в полгода или перед переездом.' },
    { n: 'После ремонта', price: '7 800 ₽', unit: 'за квартиру 40 м²', when: 'на завтра',
      slot: 'выезд бригады из трёх человек', time: '7-9 часов', crew: 'трое клинеров',
      d: 'Убираем строительную пыль в три прохода, снимаем плёнку и следы клея, моем окна и батареи, выносим мелкий мусор в пакетах.' },
    { n: 'Мытьё окон', price: '900 ₽', unit: 'за створку с рамой', when: 'через 3 часа',
      slot: 'работаем при температуре до минус 10', time: 'от 1 часа', crew: 'один клинер',
      d: 'Стекло с двух сторон, рама, подоконник, откосы и москитная сетка. На высоких этажах моем изнутри со снятием створки.' }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var pick = root.querySelector('#vbpkk-pick');
    var out = {
      price: root.querySelector('#vbpkk-price'), unit: root.querySelector('#vbpkk-unit'),
      when: root.querySelector('#vbpkk-when'), slot: root.querySelector('#vbpkk-slot'),
      time: root.querySelector('#vbpkk-time'), crew: root.querySelector('#vbpkk-crew'),
      d: root.querySelector('#vbpkk-desc')
    };
    var html = '';
    for (var j = 0; j < MODES.length; j++) {
      html += '<button type="button" class="vbpkk-mode' + (j === 0 ? ' vbpkk-mode--on' : '') +
        '" data-i="' + j + '" aria-pressed="' + (j === 0 ? 'true' : 'false') + '">' + MODES[j].n + '<\/button>';
    }
    pick.innerHTML = html;

    var btns = pick.querySelectorAll('.vbpkk-mode');
    function show(k) {
      var m = MODES[k];
      out.price.textContent = m.price; out.unit.textContent = m.unit;
      out.when.textContent = m.when; out.slot.textContent = m.slot;
      out.time.textContent = m.time; out.crew.textContent = m.crew;
      out.d.textContent = m.d;
      for (var q = 0; q < btns.length; q++) {
        var on = q === k;
        btns[q].className = 'vbpkk-mode' + (on ? ' vbpkk-mode--on' : '');
        btns[q].setAttribute('aria-pressed', on ? 'true' : 'false');
      }
    }
    for (var b = 0; b < btns.length; b++) {
      btns[b].addEventListener('click', function () { show(+this.getAttribute('data-i')); });
    }
    show(0);
  }
})();
</script>

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