Калькулятор стоимости юридических услуг

<section class="vbkyy">
  <div class="vbkyy-wrap">
    <div class="vbkyy-head">
      <h2 class="vbkyy-h2">Во что обойдётся ведение дела</h2>
      <p class="vbkyy-lead">Выберите тип дела и стадию, и калькулятор покажет вилку с разбивкой по этапам работы. Итог считается по прайсу фирмы и уточняется после изучения документов.</p>
    </div>

    <div class="vbkyy-grid">
      <div class="vbkyy-panel">
        <div class="vbkyy-f">
          <label class="vbkyy-lbl" for="vbkyy-case">Тип дела</label>
          <select id="vbkyy-case" class="vbkyy-sel"></select>
        </div>
        <div class="vbkyy-f">
          <label class="vbkyy-lbl" for="vbkyy-stage">Стадия</label>
          <select id="vbkyy-stage" class="vbkyy-sel"></select>
        </div>
        <div class="vbkyy-f">
          <label class="vbkyy-lbl" for="vbkyy-speed">Срочность</label>
          <select id="vbkyy-speed" class="vbkyy-sel"></select>
        </div>
        <div class="vbkyy-f vbkyy-f--full">
          <span class="vbkyy-lbl">Представительство в суде</span>
          <div class="vbkyy-rep" id="vbkyy-rep" role="group" aria-label="Нужно ли представительство в суде">
            <button type="button" class="vbkyy-rbtn" data-v="1" aria-pressed="true">Юрист ходит в заседания</button>
            <button type="button" class="vbkyy-rbtn" data-v="0" aria-pressed="false">Только документы</button>
          </div>
        </div>
        <div class="vbkyy-f vbkyy-f--full" id="vbkyy-hbox">
          <div class="vbkyy-lbl vbkyy-lbl--row"><span>Ожидаемое число заседаний</span><b id="vbkyy-hnum">3</b></div>
          <input type="range" id="vbkyy-hear" min="1" max="9" step="1" value="3" aria-label="Ожидаемое число заседаний">
          <div class="vbkyy-ticks"><i>1</i><i>5</i><i>9</i></div>
        </div>
      </div>

      <div class="vbkyy-res">
        <p class="vbkyy-cap">Вилка по вашим параметрам</p>
        <p class="vbkyy-sum" id="vbkyy-sum"></p>
        <div class="vbkyy-bar" id="vbkyy-bar"></div>
        <table class="vbkyy-tbl"><tbody id="vbkyy-rows"></tbody></table>
        <a class="vbkyy-cta" href="#konsultaciya">Обсудить расчёт с юристом</a>
        <p class="vbkyy-note">Расчёт ориентировочный и служит для понимания порядка сумм. Итоговая цена фиксируется договором после изучения документов. Госпошлина, экспертизы и нотариальные расходы оплачиваются отдельно.</p>
      </div>
    </div>
  </div>
</section>

<style>
.vbkyy, .vbkyy *, .vbkyy *::before, .vbkyy *::after { box-sizing: border-box; }
.vbkyy {
  --acc: #33556f; --acc-dark: #274359; --ink: #1c2128; --muted: #5a6472; --line: #dee2e7; --soft: #f2f4f6; --deep: #22272e;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkyy-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkyy-head { max-width: 46em; margin-bottom: clamp(22px, 3vw, 34px); }
.vbkyy-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; }
.vbkyy-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbkyy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 16px; align-items: start; }
.vbkyy-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2.4vw, 28px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vbkyy-f--full { grid-column: 1 / -1; }
.vbkyy-lbl { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 9px; }
.vbkyy-lbl--row { display: flex; justify-content: space-between; align-items: baseline; }
.vbkyy-lbl--row b { font-family: var(--fh); font-size: 19px; color: var(--ink); }
.vbkyy-sel { width: 100%; height: 50px; padding: 0 36px 0 14px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.vbkyy-sel:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbkyy-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.vbkyy-rbtn { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; font-size: 14.5px; line-height: 1.3;
  min-height: 50px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff !important; color: var(--muted) !important; transition: .18s ease; }
.vbkyy-rbtn:hover { border-color: var(--acc); }
.vbkyy-rbtn[aria-pressed="true"] { border-color: var(--acc); background: var(--acc) !important; color: #fff !important; font-weight: 600; }
.vbkyy input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: #dfe3e8; outline: none; }
.vbkyy input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acc); border: 4px solid #fff; box-shadow: 0 1px 5px rgba(28,33,40,.25); cursor: pointer; }
.vbkyy input[type=range]::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--acc); border: 3px solid #fff; cursor: pointer; }
.vbkyy-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #97a0aa; }
.vbkyy-ticks i { font-style: normal; }
.vbkyy-f.is-off { opacity: .4; pointer-events: none; }

.vbkyy-res { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2.4vw, 28px); }
.vbkyy-cap { margin: 0 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #97a0aa; }
.vbkyy-sum { margin: 0 0 18px; font-family: var(--fh); font-size: clamp(24px, 2.9vw, 33px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.vbkyy-bar { display: flex; height: 8px; border-radius: 8px; overflow: hidden; background: var(--soft); margin-bottom: 18px; }
.vbkyy-bar i { display: block; height: 100%; width: 0; transition: width .45s cubic-bezier(.22,1,.36,1); }
.vbkyy-tbl { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.vbkyy-tbl td { padding: 11px 0; font-size: 14.5px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vbkyy-tbl tr:last-child td { border-bottom: 0; }
.vbkyy-tbl td:last-child { text-align: right; font-weight: 600; white-space: nowrap; padding-left: 12px; }
.vbkyy-tbl td span { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 9px; }
.vbkyy-tbl td i { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin: 3px 0 0 18px; }
.vbkyy-cta, .vbkyy-cta:link, .vbkyy-cta:visited, .vbkyy-cta:focus { display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 10px; font-size: 15.5px; font-weight: 600;
  background: var(--deep); color: #fff !important; text-decoration: none !important; transition: .18s ease; }
.vbkyy-cta:hover { background: var(--acc); color: #fff !important; }
.vbkyy-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 860px) { .vbkyy-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .vbkyy-panel { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .vbkyy * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── КОЭФФИЦИЕНТЫ: правьте цены здесь, разметку трогать не нужно ── */
  var RATES = {
    /* analysis - разбор и позиция, papers - документы, hearing - одно заседание */
    cases: {
      'Семейный спор': { analysis: 4000, papers: 16000, hearing: 6500 },
      'Трудовой спор': { analysis: 3500, papers: 14000, hearing: 6000 },
      'Жилищный спор': { analysis: 5000, papers: 19000, hearing: 7000 },
      'Взыскание долга': { analysis: 4000, papers: 15000, hearing: 6500 },
      'Спор по договору': { analysis: 6000, papers: 24000, hearing: 8500 },
      'Наследственное дело': { analysis: 4500, papers: 17000, hearing: 6500 }
    },
    stages: { 'Досудебная работа': 0.55, 'Первая инстанция': 1, 'Апелляция': 0.8, 'Кассация': 0.7 },
    speeds: { 'Обычный порядок': 1, 'Ускоренно, за 5 дней': 1.2, 'Срочно, за 2 дня': 1.45 },
    support: 0.15,  /* сопровождение и отчёты: доля от суммы этапов */
    spread: 0.18,   /* половина ширины вилки */
    step: 500       /* округление сумм */
  };
  var COLORS = ['#33556f', '#4e7590', '#7d95a8', '#b3c0cb'];

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

  function fmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' ₽'; }
  function round(n) { return Math.round(n / RATES.step) * RATES.step; }
  function opts(o) { return Object.keys(o).map(function (k) { return '<option>' + k + '<\/option>'; }).join(''); }

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var $ = function (s) { return root.querySelector(s); };
    var st = { c: 'Семейный спор', s: 'Первая инстанция', v: 'Обычный порядок', rep: 1, h: 3 };

    $('#vbkyy-case').innerHTML = opts(RATES.cases);
    $('#vbkyy-stage').innerHTML = opts(RATES.stages);
    $('#vbkyy-speed').innerHTML = opts(RATES.speeds);
    $('#vbkyy-stage').value = st.s;

    $('#vbkyy-case').addEventListener('change', function () { st.c = this.value; draw(); });
    $('#vbkyy-stage').addEventListener('change', function () { st.s = this.value; draw(); });
    $('#vbkyy-speed').addEventListener('change', function () { st.v = this.value; draw(); });
    $('#vbkyy-hear').addEventListener('input', function () { st.h = +this.value; draw(); });
    $('#vbkyy-rep').addEventListener('click', function (e) {
      var b = e.target.closest ? e.target.closest('.vbkyy-rbtn') : null;
      if (!b) return;
      var all = this.querySelectorAll('.vbkyy-rbtn');
      for (var n = 0; n < all.length; n++) all[n].setAttribute('aria-pressed', String(all[n] === b));
      st.rep = +b.getAttribute('data-v');
      draw();
    });

    function draw() {
      var c = RATES.cases[st.c], ks = RATES.stages[st.s], kv = RATES.speeds[st.v];
      var rows = [
        { n: 'Разбор ситуации и позиция', v: c.analysis * kv, d: 'изучение документов, письменное заключение' },
        { n: 'Документы и подача', v: c.papers * ks * kv, d: 'иск, отзыв, ходатайства, приложения' }
      ];
      if (st.rep) rows.push({ n: 'Заседания, ' + st.h + ' шт.', v: c.hearing * st.h * ks * kv, d: 'участие юриста, подготовка к каждому' });
      var base = 0, k;
      for (k = 0; k < rows.length; k++) base += rows[k].v;
      rows.push({ n: 'Сопровождение и отчёты', v: base * RATES.support, d: 'переписка, статус по делу, копии документов' });

      var total = base * (1 + RATES.support);
      $('#vbkyy-hnum').textContent = st.h;
      $('#vbkyy-hbox').classList.toggle('is-off', !st.rep);
      $('#vbkyy-sum').textContent = 'от ' + fmt(round(total * (1 - RATES.spread))) + ' до ' + fmt(round(total * (1 + RATES.spread)));

      $('#vbkyy-bar').innerHTML = rows.map(function (r, n) {
        return '<i style="background:' + COLORS[n] + '" data-w="' + (r.v / total * 100) + '"><\/i>';
      }).join('');
      var segs = $('#vbkyy-bar').querySelectorAll('i');
      setTimeout(function () {
        for (var n = 0; n < segs.length; n++) segs[n].style.width = segs[n].getAttribute('data-w') + '%';
      }, 20);

      $('#vbkyy-rows').innerHTML = rows.map(function (r, n) {
        return '<tr><td><span style="background:' + COLORS[n] + '"><\/span>' + r.n + '<i>' + r.d + '<\/i><\/td>' +
          '<td>' + fmt(round(r.v)) + '<\/td><\/tr>';
      }).join('');
    }
    draw();
  }
})();
</script>

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