Блок «Вопрос-ответ» с вкладками для онлайн-школы

<section class="vbvpo">
  <div class="vbvpo-wrap">
    <h2 class="vbvpo-h2">Всё, что спрашивают до старта</h2>
    <p class="vbvpo-lead">Разложили по темам, чтобы не листать двадцать вопросов ради одного своего.</p>

    <div class="vbvpo-tabs" id="vbvpo-tabs" role="tablist" aria-label="Темы вопросов"></div>

    <div class="vbvpo-groups" id="vbvpo-groups">
      <div class="vbvpo-group" data-tab="Обучение">
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Получится совмещать с работой?</button></h3><div class="vbvpo-a"><div><p>Да, курс рассчитан на 8–10 часов в неделю: видео смотрите когда удобно, живые разборы идут по вечерам и записываются. Большинство студентов учатся параллельно с полной занятостью.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Что если я отстану от группы?</button></h3><div class="vbvpo-a"><div><p>Дедлайны по домашним заданиям мягкие: сдать можно позже, проверка всё равно будет. При длительном отставании куратор переносит вас в следующий поток без доплаты — один раз это доступно каждому студенту.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Нужна ли база на входе?</button></h3><div class="vbvpo-a"><div><p>Нет, старт с нуля. Достаточно уверенно пользоваться компьютером. Первый месяц — вводный: если чувствуете, что тяжело, есть бесплатный подготовительный модуль с основами логики и таблиц.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Проверяет ли кто-то домашние задания?</button></h3><div class="vbvpo-a"><div><p>Каждое задание проверяет практикующий специалист и оставляет развёрнутый комментарий, а не «зачёт». Среднее время проверки — до 24 часов в будни. Переделывать можно неограниченно.</p></div></div></div>
      </div>

      <div class="vbvpo-group" data-tab="Оплата">
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Есть ли рассрочка?</button></h3><div class="vbvpo-a"><div><p>Да, до 24 месяцев без переплаты. Оформляется онлайн за 10 минут, первый платёж — через месяц после старта. Досрочное погашение без комиссий и штрафов.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Можно вернуть деньги, если не подойдёт?</button></h3><div class="vbvpo-a"><div><p>В первые 14 дней — полностью и без объяснения причин. Дальше возврат считается пропорционально пройденной программе, порядок прописан в оферте и в договоре.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Положен ли налоговый вычет?</button></h3><div class="vbvpo-a"><div><p>Да, 13% от суммы обучения. У школы есть лицензия на образовательную деятельность, все документы для налоговой готовим по запросу: договор, лицензию и справку об оплате.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Может ли оплатить работодатель?</button></h3><div class="vbvpo-a"><div><p>Может. Выставляем счёт на юридическое лицо, работаем по договору и закрывающим документам. Для команд от трёх человек действует корпоративная скидка.</p></div></div></div>
      </div>

      <div class="vbvpo-group" data-tab="Документы">
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Какой документ выдаёте после курса?</button></h3><div class="vbvpo-a"><div><p>Диплом о профессиональной переподготовке установленного образца — школа работает по образовательной лицензии. Выдаётся при сдаче итогового проекта и не менее 80% домашних заданий.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Нужен ли диплом о высшем образовании?</button></h3><div class="vbvpo-a"><div><p>Для диплома о переподготовке нужен документ о среднем профессиональном или высшем образовании. Если его нет, вы всё равно проходите обучение и получаете сертификат школы — на найм это влияет слабо.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Ценят ли такой диплом работодатели?</button></h3><div class="vbvpo-a"><div><p>Честно: смотрят прежде всего на портфолио и тестовое задание. Диплом помогает пройти формальный фильтр в крупных компаниях и при релокации, но решают проекты, которые вы покажете.</p></div></div></div>
      </div>

      <div class="vbvpo-group" data-tab="Поддержка">
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Помогаете ли с трудоустройством?</button></h3><div class="vbvpo-a"><div><p>Да: разбор резюме, тренировочные собеседования с обратной связью, доступ к закрытому каналу вакансий партнёров. Гарантию трудоустройства не даём — это зависит от вашей активности и рынка.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Останется ли доступ к материалам после выпуска?</button></h3><div class="vbvpo-a"><div><p>Останется навсегда, включая обновления программы. Записи живых разборов и чат потока тоже сохраняются — многие возвращаются к ним уже работая.</p></div></div></div>
        <div class="vbvpo-item"><h3><button type="button" class="vbvpo-q" aria-expanded="false">Есть ли живое общение или только записи?</button></h3><div class="vbvpo-a"><div><p>Каждую неделю созвон с преподавателем: разбор заданий, ответы на вопросы, работа над ошибками. Плюс чат потока с куратором, который отвечает в течение рабочего дня.</p></div></div></div>
      </div>
    </div>
  </div>
</section>

<style>
.vbvpo, .vbvpo *, .vbvpo *::before, .vbvpo *::after { box-sizing: border-box; }
.vbvpo {
  --acc: #4b56d2; --ink: #191b2e; --muted: #5f6280; --line: #e3e4ef; --soft: #f4f4fb;
  --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;
}
.vbvpo-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbvpo-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.vbvpo-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }

.vbvpo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.vbvpo-tab { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: #fff !important; color: var(--muted) !important; border-radius: 999px; padding: 10px 20px; font-size: 15px; transition: .18s ease; }
.vbvpo-tab:hover { border-color: var(--acc); color: var(--ink) !important; }
.vbvpo-tab[aria-selected="true"] { background: var(--acc) !important; border-color: var(--acc); color: #fff !important; }

.vbvpo-group { display: none; border-top: 1px solid var(--line); }
.vbvpo-group.is-on { display: block; }
.vbvpo-item { border-bottom: 1px solid var(--line); }
.vbvpo-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvpo-q { display: flex; align-items: flex-start; gap: 16px; width: 100%; border: 0; margin: 0; -webkit-appearance: none; appearance: none;
  background: none !important; color: var(--ink) !important; cursor: pointer; font: inherit; font-family: var(--fh);
  font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.4; text-align: left; padding: 19px 0; transition: color .18s ease; }
.vbvpo-q:hover { color: var(--acc) !important; }
.vbvpo-q::after { content: ''; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; margin-left: auto;
  background: linear-gradient(var(--acc), var(--acc)) center/100% 2px no-repeat, linear-gradient(var(--acc), var(--acc)) center/2px 100% no-repeat;
  transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vbvpo-q[aria-expanded="true"]::after { transform: rotate(135deg); }
.vbvpo-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.vbvpo-a > div { padding: 0 34px 20px 0; }
.vbvpo-a p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .vbvpo * { transition: none !important; } }
</style>

<script>
(function () {
  var roots = document.querySelectorAll('.vbvpo');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var tabsBox = root.querySelector('#vbvpo-tabs');
    var groups = Array.prototype.slice.call(root.querySelectorAll('.vbvpo-group'));

    groups.forEach(function (g, i) {
      var b = document.createElement('button');
      b.type = 'button'; b.className = 'vbvpo-tab'; b.setAttribute('role', 'tab');
      b.setAttribute('aria-selected', i === 0 ? 'true' : 'false');
      b.textContent = g.dataset.tab;
      b.addEventListener('click', function () { select(i); });
      b.addEventListener('keydown', function (e) {
        if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
        e.preventDefault();
        var n = (i + (e.key === 'ArrowRight' ? 1 : -1) + groups.length) % groups.length;
        select(n);
        tabsBox.children[n].focus();
      });
      tabsBox.appendChild(b);
      g.classList.toggle('is-on', i === 0);
    });

    function select(n) {
      groups.forEach(function (g, i) { g.classList.toggle('is-on', i === n); });
      Array.prototype.forEach.call(tabsBox.children, function (b, i) { b.setAttribute('aria-selected', i === n ? 'true' : 'false'); });
      closeAll();
    }

    var items = Array.prototype.slice.call(root.querySelectorAll('.vbvpo-item'));
    function closeAll() {
      items.forEach(function (o) {
        o.querySelector('.vbvpo-q').setAttribute('aria-expanded', 'false');
        o.querySelector('.vbvpo-a').style.maxHeight = '0px';
      });
    }
    items.forEach(function (item) {
      var btn = item.querySelector('.vbvpo-q'), pane = item.querySelector('.vbvpo-a');
      btn.addEventListener('click', function () {
        var open = btn.getAttribute('aria-expanded') === 'true';
        closeAll();
        if (!open) { btn.setAttribute('aria-expanded', 'true'); pane.style.maxHeight = pane.scrollHeight + 'px'; }
      });
    });
  }
})();
</script>

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