Квиз для подбора юридической услуги

<section class="vbkyl">
  <div class="vbkyl-wrap">
    <div class="vbkyl-head">
      <h2 class="vbkyl-h2">С чего начать по вашему вопросу</h2>
      <p class="vbkyl-lead">Четыре вопроса о ситуации и её стадии. В конце покажем направление права и порядок первых действий.</p>
    </div>

    <div class="vbkyl-box">
      <div class="vbkyl-rail" id="vbkyl-rail"></div>
      <div class="vbkyl-main">
        <div class="vbkyl-bar"><i id="vbkyl-fill"></i></div>
        <div class="vbkyl-stage" id="vbkyl-stage" aria-live="polite"></div>
        <div class="vbkyl-foot">
          <button type="button" class="vbkyl-back" id="vbkyl-back" hidden>Вернуться на шаг назад</button>
          <span class="vbkyl-num" id="vbkyl-num"></span>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.vbkyl, .vbkyl *, .vbkyl *::before, .vbkyl *::after { box-sizing: border-box; }
.vbkyl {
  --acc: #2d4f70; --acc-dark: #223d58; --ink: #1c2128; --muted: #5a6472; --line: #dde2e8; --soft: #f3f5f7; --deep: #232a33;
  --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;
}
.vbkyl-wrap { max-width: 1060px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkyl-head { max-width: 46em; margin-bottom: clamp(22px, 3vw, 34px); }
.vbkyl-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkyl-lead, .vbkyl-txt { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.vbkyl-box { display: grid; grid-template-columns: 232px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.vbkyl-rail { background: var(--deep); padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 22px); }
.vbkyl-step { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.vbkyl-step__n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; background: #333c47; color: #98a3b1; transition: .22s ease; }
.vbkyl-step__t { font-size: 13.5px; line-height: 1.35; color: #8a94a2; padding-top: 4px; }
.vbkyl-step.is-now .vbkyl-step__n, .vbkyl-step.is-done .vbkyl-step__n { color: #fff; background: #4a6b8c; }
.vbkyl-step.is-now .vbkyl-step__n { background: var(--acc); }
.vbkyl-step.is-now .vbkyl-step__t { color: #fff; font-weight: 600; }
.vbkyl-step.is-done .vbkyl-step__t { color: #c3ccd6; }
.vbkyl-main { padding: clamp(22px, 2.8vw, 36px); }
.vbkyl-bar { height: 3px; border-radius: 3px; background: var(--soft); overflow: hidden; margin-bottom: clamp(20px, 2.4vw, 28px); }
.vbkyl-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--acc); transition: width .35s cubic-bezier(.22,1,.36,1); }
.vbkyl-q { font-family: var(--fh); font-size: clamp(19px, 2vw, 24px); line-height: 1.28; font-weight: 600; margin: 0 0 18px; }
.vbkyl-opts { display: grid; gap: 8px; }
.vbkyl-opt { display: block; width: 100%; border: 1px solid var(--line); border-left: 3px solid var(--line); margin: 0; text-align: left;
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 15.5px; line-height: 1.45; cursor: pointer;
  background: #fff !important; color: var(--ink) !important; border-radius: 10px; padding: 15px 18px; transition: .18s ease; }
.vbkyl-opt:hover { border-color: var(--acc); background: var(--soft) !important; }
.vbkyl-foot { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.vbkyl-back { border: 0; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none !important; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--muted) !important; text-decoration: underline; }
.vbkyl-num { margin-left: auto; font-size: 13px; color: var(--muted); }
.vbkyl-tag { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc); background: var(--soft); border-radius: 999px; padding: 6px 14px; margin-bottom: 14px; }
.vbkyl-ttl { font-family: var(--fh); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; font-weight: 600; margin: 0 0 12px; }
.vbkyl-txt { font-size: 15.5px; margin-bottom: 22px; }
.vbkyl-ol { counter-reset: vbkyl; list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.vbkyl-ol li { counter-increment: vbkyl; position: relative; padding-left: 40px; font-size: 15px; line-height: 1.6; }
.vbkyl-ol li::before { content: counter(vbkyl); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--acc); color: #fff; }
.vbkyl-doc { background: var(--soft); border-radius: 12px; padding: 15px 17px; margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.vbkyl-doc b { display: block; color: var(--ink); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; }
.vbkyl-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.vbkyl-cta, .vbkyl-cta:link, .vbkyl-cta:visited, .vbkyl-again { display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border: 0; margin: 0; border-radius: 10px; font: inherit; font-size: 15.5px; font-weight: 600;
  cursor: pointer; -webkit-appearance: none; appearance: none; background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkyl-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkyl-again { border: 1px solid var(--line); background: #fff !important; color: var(--ink) !important; font-weight: 400; }
.vbkyl-again:hover { border-color: var(--acc); }
.vbkyl-warn { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .vbkyl-box { grid-template-columns: minmax(0, 1fr); }
  .vbkyl-rail { display: flex; gap: 6px; overflow-x: auto; padding: 14px; }
  .vbkyl-step { flex: 1 0 auto; padding: 0; }
  .vbkyl-step__t { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vbkyl * { transition: none !important; } }
</style>

<script>
(function () {
  var CTA_HREF = '#konsultaciya';

  /* ── ШАГИ КВИЗА: v - код ответа, по нему собирается результат ── */
  var STEPS = [
    { label: 'Сфера вопроса', q: 'К чему ближе ваша ситуация?', opts: [
      { t: 'Семья: имущество, дети, алименты', v: 'family' },
      { t: 'Работа: увольнение, зарплата, оформление', v: 'work' },
      { t: 'Жильё: сделка, соседи, управляющая компания', v: 'home' },
      { t: 'Бизнес: договоры, контрагенты, проверки', v: 'biz' } ] },
    { label: 'Стадия', q: 'На какой стадии всё сейчас?', opts: [
      { t: 'Пока разбираюсь, документов почти нет', v: 'think' },
      { t: 'На руках претензия, отказ или требование', v: 'claim' },
      { t: 'Дело в суде, известна дата заседания', v: 'court' } ] },
    { label: 'Сроки', q: 'Сколько у вас времени?', opts: [
      { t: 'Срок не поджимает', v: 'calm' },
      { t: 'В документах есть дата, до неё пара недель', v: 'soon' },
      { t: 'Ответить или явиться нужно в ближайшие дни', v: 'now' } ] },
    { label: 'Прошлый опыт', q: 'Юрист по вопросу уже участвовал?', opts: [
      { t: 'Нет, обращаюсь впервые', v: 'no' },
      { t: 'Была разовая консультация', v: 'once' },
      { t: 'Дело вёл другой представитель', v: 'other' } ] }
  ];

  /* ── НАПРАВЛЕНИЯ ── */
  var AREAS = {
    family: { ttl: 'Семейное право', who: 'Юрист по семейным делам',
      txt: 'Имущество, дети и алименты связаны между собой, поэтому план действий строится от того, что уже подписано.',
      doc: 'свидетельство о браке, документы на имущество, справки о доходах' },
    work: { ttl: 'Трудовое право', who: 'Юрист по трудовым спорам',
      txt: 'Многое упирается в сроки обращения и в то, что зафиксировано на бумаге.',
      doc: 'трудовой договор, приказы, расчётные листки, переписку' },
    home: { ttl: 'Жилищное право', who: 'Юрист по недвижимости',
      txt: 'Важна цепочка документов на объект: часть вопросов закрывается заявлениями, часть идёт через суд.',
      doc: 'выписку из реестра, договор, акты и квитанции' },
    biz: { ttl: 'Договорное право', who: 'Юрист по хозяйственным спорам',
      txt: 'Многое определяют формулировки договора и первичные документы по сделке.',
      doc: 'договор с приложениями, акты, счета и деловую переписку' }
  };

  /* ── ПЕРВЫЕ ШАГИ ── */
  var BY_STAGE = {
    think: 'Соберите в одну папку договоры, чеки и переписку: неполный набор тоже даёт опору.',
    claim: 'Запишите дату получения претензии: от неё считается срок ответа.',
    court: 'Найдите дело по номеру в картотеке суда и выпишите дату заседания.'
  };
  var BY_TIME = {
    calm: 'Запишитесь на разбор в удобный день и приходите с документами.',
    soon: 'Отметьте крайнюю дату из документов, оставьте два дня запаса на бумаги.',
    now: 'Опишите ситуацию коротко и приложите главный документ.'
  };
  var BY_HELP = {
    no: 'Подготовьте пять вопросов, которые волнуют больше всего.',
    once: 'Возьмите заключение с прошлой консультации: хронологию не придётся собирать заново.',
    other: 'Запросите у прежнего представителя копии поданных документов.'
  };
  var WHEN = { calm: 'В течение дня', soon: 'В течение 3 часов', now: 'В течение часа' };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var idx = 0, ans = [];
    var rail = root.querySelector('#vbkyl-rail'), stage = root.querySelector('#vbkyl-stage');
    var fill = root.querySelector('#vbkyl-fill'), back = root.querySelector('#vbkyl-back'), num = root.querySelector('#vbkyl-num');

    function drawRail() {
      rail.innerHTML = STEPS.map(function (s, n) {
        var cls = n < ans.length ? ' is-done' : (n === idx ? ' is-now' : '');
        return '<div class="vbkyl-step' + cls + '"><span class="vbkyl-step__n">' + (n + 1) + '<\/span>' +
          '<span class="vbkyl-step__t">' + s.label + '<\/span><\/div>';
      }).join('');
    }

    function drawStep() {
      var s = STEPS[idx];
      fill.style.width = (idx / STEPS.length * 100) + '%';
      num.textContent = 'Шаг ' + (idx + 1) + ' из ' + STEPS.length;
      back.hidden = idx === 0;
      drawRail();
      stage.innerHTML = '<h3 class="vbkyl-q">' + s.q + '<\/h3><div class="vbkyl-opts">' +
        s.opts.map(function (o, n) { return '<button type="button" class="vbkyl-opt" data-i="' + n + '">' + o.t + '<\/button>'; }).join('') + '<\/div>';
      var btns = stage.querySelectorAll('.vbkyl-opt');
      for (var n = 0; n < btns.length; n++) {
        btns[n].addEventListener('click', function () {
          ans[idx] = s.opts[+this.getAttribute('data-i')];
          ans.length = idx + 1;
          idx++;
          if (idx < STEPS.length) drawStep(); else drawResult();
        });
      }
    }

    function drawResult() {
      fill.style.width = '100%';
      num.textContent = 'Готово';
      back.hidden = false;
      drawRail();
      var a = AREAS[ans[0].v], st = ans[1].v, tm = ans[2].v, hp = ans[3].v;
      stage.innerHTML = '<span class="vbkyl-tag">Направление<\/span>' +
        '<h3 class="vbkyl-ttl">' + a.ttl + '<\/h3>' +
        '<p class="vbkyl-txt">' + a.txt + '<\/p>' +
        '<ol class="vbkyl-ol"><li>' + BY_STAGE[st] + '<\/li><li>' + BY_TIME[tm] + '<\/li><li>' + BY_HELP[hp] + '<\/li><\/ol>' +
        '<p class="vbkyl-doc"><b>Возьмите на разбор<\/b>' + a.doc + '. Вопрос ведёт ' + a.who.toLowerCase() +
        ', очно или по видеосвязи. Ответ на обращение: ' + WHEN[tm].toLowerCase() + '.<\/p>' +
        '<div class="vbkyl-acts"><a class="vbkyl-cta" href="' + CTA_HREF + '">Записаться на разбор<\/a>' +
        '<button type="button" class="vbkyl-again">Пройти заново<\/button><\/div>' +
        '<p class="vbkyl-warn">Подсказка носит справочный характер. Перспективы и стоимость юрист оценивает после изучения документов.<\/p>';
      var again = stage.querySelector('.vbkyl-again');
      if (again) again.addEventListener('click', function () { idx = 0; ans = []; drawStep(); });
    }

    back.addEventListener('click', function () { if (idx === 0) return; idx--; ans.length = idx; drawStep(); });
    drawStep();
  }
})();
</script>

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