/* ═══════════════════════════════════════════════════════════════════
 * /business — B2B-посадка: обучение сотрудников ИИ, внедрение, ИИ-контур.
 * Язык /present и треков: только токены v4 (--q-*), секция = mono-номер
 * + заголовок с акцентом в <em>. Лимон — одна наклейка гарантии в hero.
 * Источник оффера: docs/b2b/offer.md
 * ═══════════════════════════════════════════════════════════════════ */

.qb { --qb-citron: #E7F34A; --qb-ink: #141519; --qb-glow: rgba(94, 106, 210, .32); }

.qb-sec { padding-block: clamp(64px, 8vw, 104px) 0; }
.qb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--q-s-6); flex-wrap: wrap; margin-bottom: var(--q-s-7); }
.qb-num { font-family: var(--q-font-mono); font-size: var(--q-t-mono); font-weight: var(--q-fw-medium); letter-spacing: .1em; text-transform: uppercase; color: var(--q-accent-hover); margin: 0 0 var(--q-s-3); }
.qb-h2 { font-family: var(--q-font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: var(--q-fw-semibold); line-height: 1.1; letter-spacing: -.025em; color: var(--q-text-hi); margin: 0; max-width: 22ch; text-wrap: balance; }
.qb-h2 em, .qb-h1 em { font-style: normal; color: var(--q-accent-hover); }
.qb-meta { font-family: var(--q-font-mono); font-size: 12px; line-height: 1.6; color: var(--q-text-low); max-width: 36ch; text-align: right; margin: 0; }
.qb-lead { font-size: var(--q-t-lead); line-height: 1.6; color: var(--q-text-mid); max-width: 62ch; margin: var(--q-s-5) 0 0; }
.qb-src { font-family: var(--q-font-mono); font-size: 11.5px; line-height: 1.6; color: var(--q-text-low); margin: var(--q-s-4) 0 0; }

.qb-grid { display: grid; gap: var(--q-s-3); }
.qb-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qb-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qb-mt { margin-top: var(--q-s-3); }

.qb-card { background: var(--q-bg-2); border: 1px solid var(--q-line); border-radius: var(--q-r-xl); padding: var(--q-s-6); min-width: 0; transition: border-color var(--q-dur-fast, 140ms) ease; }
.qb-card:hover { border-color: var(--q-line-hover); }
.qb-card h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: var(--q-fw-semibold); color: var(--q-text-hi); margin: 0 0 var(--q-s-2); text-wrap: balance; }
/* :where — нулевая специфичность, чтобы классы внутри карточки (.qb-hours,
   .qb-badge, .qb-num, .qb-lead) перебивали базовый текст без !important. */
:where(.qb-card) p, :where(.qb-card) li { font-size: var(--q-t-small); line-height: 1.55; color: var(--q-text-mid); margin: 0; }
:where(.qb-card) ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.qb-card li strong, .qb-card p strong { color: var(--q-text-hi); font-weight: var(--q-fw-medium); }
.qb-tag { display: inline-block; font-family: var(--q-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--q-text-low); margin-bottom: var(--q-s-4); }
.qb-tag--acc { color: var(--q-accent-hover); }
.qb-tag--err { color: var(--q-err); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.qb-hero { position: relative; padding-block: clamp(48px, 7vw, 96px) 0; }
.qb-hero::before { content: ""; position: absolute; inset: -120px 0 auto; height: 620px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 55% at 22% 30%, rgba(94, 106, 210, .22), transparent 70%); }
.qb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: end; }
.qb-eyebrow { font-family: var(--q-font-mono); font-size: var(--q-t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--q-text-low); margin: 0 0 var(--q-s-5); }
.qb-h1 { font-family: var(--q-font-display); font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: var(--q-fw-semibold); line-height: 1.03; letter-spacing: -.035em; color: var(--q-text-hi); margin: 0; text-wrap: balance; }
.qb-cta { display: flex; gap: var(--q-s-3); flex-wrap: wrap; margin-top: var(--q-s-7); }
.qb-gcard { position: relative; background: var(--q-bg-2); border: 1px solid var(--q-line-strong); border-radius: var(--q-r-2xl); padding: var(--q-s-7);
  box-shadow: 0 0 0 1px rgba(94, 106, 210, .10), 0 30px 60px -36px rgba(0, 0, 0, .7), 0 0 70px -28px var(--qb-glow); }
.qb-sticker { display: inline-block; background: var(--qb-citron); color: var(--qb-ink); font-weight: var(--q-fw-bold); font-size: 15px; letter-spacing: -.01em; border-radius: var(--q-r-md); padding: 6px 10px; margin-bottom: var(--q-s-4); font-variant-numeric: tabular-nums; }
.qb-gcard h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: var(--q-fw-semibold); color: var(--q-text-hi); margin: 0 0 var(--q-s-3); }
.qb-gcard p { font-size: var(--q-t-small); line-height: 1.55; color: var(--q-text-mid); margin: 0; }
.qb-gcard a { color: var(--q-accent-hover); }
.qb-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(40px, 5vw, 56px); padding-top: var(--q-s-5); border-top: 1px solid var(--q-line);
  font-family: var(--q-font-mono); font-size: 12px; color: var(--q-text-low); letter-spacing: .02em; list-style: none; padding-left: 0; }
.qb-proof a { color: inherit; text-decoration: underline; text-decoration-color: var(--q-line-strong); text-underline-offset: 3px; }
.qb-proof a:hover { color: var(--q-text-hi); }

/* ── Утечки ───────────────────────────────────────────────────────── */
.qb-leak .qb-big { font-size: var(--q-t-small); color: var(--q-text-hi); font-weight: var(--q-fw-medium); margin-bottom: var(--q-s-2); }

/* ── Заметка-полоса ───────────────────────────────────────────────── */
.qb-note { background: var(--q-bg-1); border: 1px solid var(--q-line); border-radius: var(--q-r-lg); padding: 14px 16px; margin-top: var(--q-s-3); font-size: 14px; line-height: 1.55; color: var(--q-text-mid); }
.qb-note b { color: var(--q-text-hi); font-weight: var(--q-fw-medium); }

/* ── Закон ────────────────────────────────────────────────────────── */
.qb-law { background: var(--q-bg-1); }
.qb-law dl { margin: 0; display: grid; gap: var(--q-s-4); }
.qb-law dt { font-family: var(--q-font-mono); font-size: 12px; color: var(--q-accent-hover); letter-spacing: .02em; }
.qb-law dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--q-text-mid); }
.qb-safety-lead { color: var(--q-text-hi) !important; font-size: 17px !important; margin-bottom: var(--q-s-4) !important; }

/* ── Обучение ─────────────────────────────────────────────────────── */
.qb-lvl .qb-who { font-family: var(--q-font-mono); font-size: 12px; color: var(--q-text-low); text-transform: uppercase; letter-spacing: .05em; }
.qb-lvl h3 { margin-top: var(--q-s-3); }
.qb-hours { font-size: 28px; font-weight: var(--q-fw-semibold); letter-spacing: -.03em; color: var(--q-text-hi) !important; font-variant-numeric: tabular-nums; margin: 2px 0 var(--q-s-1) !important; }
.qb-out { margin-top: var(--q-s-3) !important; padding-top: var(--q-s-3); border-top: 1px solid var(--q-line); font-size: 14px !important; }
.qb-out b { color: var(--q-text-hi); font-weight: var(--q-fw-medium); }
.qb-mod { counter-reset: m; list-style: none; padding: 0 !important; margin: 0; display: grid; gap: var(--q-s-2) !important; }
.qb-mod li { counter-increment: m; display: grid; grid-template-columns: 28px 1fr; gap: var(--q-s-2); }
.qb-mod li::before { content: counter(m, decimal-leading-zero); font-family: var(--q-font-mono); font-size: 12px; color: var(--q-text-low); padding-top: 3px; }
.qb-mod--wk li { grid-template-columns: 52px 1fr; }
.qb-mod--wk li::before { content: "Нед " counter(m); color: var(--q-accent-hover); }
.qb-mod b { color: var(--q-text-hi); font-weight: var(--q-fw-medium); }
.qb-chips { display: flex; flex-wrap: wrap; gap: var(--q-s-2); margin-top: var(--q-s-3); }
.qb-chip { font-size: 14px; line-height: 1.4; border: 1px solid var(--q-line-strong); border-radius: var(--q-r-pill); padding: 6px 12px; color: var(--q-text-mid); }
.qb-chip b { color: var(--q-text-hi); font-weight: var(--q-fw-medium); }

/* ── Шаги ─────────────────────────────────────────────────────────── */
.qb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--q-s-3); }
.qb-steps li { background: var(--q-bg-2); border: 1px solid var(--q-line); border-radius: var(--q-r-xl); padding: var(--q-s-5); display: flex; flex-direction: column; gap: var(--q-s-2); min-width: 0; }
.qb-steps h3 { font-size: 17px; margin: 0; color: var(--q-text-hi); font-weight: var(--q-fw-semibold); }
.qb-steps .qb-n { font-family: var(--q-font-mono); font-size: 12px; color: var(--q-accent-hover); }
.qb-steps .qb-dur { font-family: var(--q-font-mono); font-size: 12px; color: var(--q-text-low); }
.qb-steps p { font-size: 14.5px; line-height: 1.5; color: var(--q-text-mid); margin: 0; }

/* ── Пакеты ───────────────────────────────────────────────────────── */
.qb-pack { display: flex; flex-direction: column; gap: var(--q-s-3); }
.qb-pack .qb-seg { font-family: var(--q-font-mono); font-size: 12px; color: var(--q-text-low); text-transform: uppercase; letter-spacing: .05em; }
.qb-pack h3 { font-size: 24px; letter-spacing: -.02em; margin: 0; }
.qb-pack .qb-price { margin-top: auto; padding-top: var(--q-s-4); border-top: 1px solid var(--q-line); font-size: 14px; }

/* ── Гарантии ─────────────────────────────────────────────────────── */
.qb-gmain { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--q-s-7); border-color: var(--q-line-strong); padding: var(--q-s-7);
  box-shadow: 0 0 70px -36px var(--qb-glow); }
.qb-badge { font-size: 44px; font-weight: var(--q-fw-semibold); letter-spacing: -.04em; line-height: 1; color: var(--q-accent-hover) !important; font-variant-numeric: tabular-nums; }
.qb-gmain h3 { font-size: 24px; letter-spacing: -.02em; margin: var(--q-s-3) 0 var(--q-s-3); }
.qb-gmain h4 { font-size: 16px; font-weight: var(--q-fw-semibold); color: var(--q-text-hi); margin: 0 0 var(--q-s-2); }
.qb-gmain ul + h4 { margin-top: var(--q-s-5); }
.qb-formula { font-family: var(--q-font-mono); font-size: 13px !important; line-height: 1.6 !important; color: var(--q-text-hi) !important; background: var(--q-bg-1); border: 1px solid var(--q-line); border-radius: var(--q-r-lg); padding: 12px 14px; margin: var(--q-s-4) 0 !important; }
.qb-gid { font-family: var(--q-font-mono); font-size: 12px; color: var(--q-accent-hover); margin-bottom: var(--q-s-3); display: block; }
.qb-nog { margin: var(--q-s-4) 0 0; font-size: 14px; color: var(--q-text-low); }
.qb-nog b { color: var(--q-text-mid); font-weight: var(--q-fw-medium); }

/* ── Калькулятор ──────────────────────────────────────────────────── */
.qb-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--q-s-3); }
.qb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--q-s-4) var(--q-s-4); align-content: start; }
.qb-field label { display: block; font-size: 13px; line-height: 1.4; color: var(--q-text-mid); margin-bottom: 6px; }
.qb-field input, .qb-field select, .qb-field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--q-text-hi); background: var(--q-bg-1); border: 1px solid var(--q-line-strong); border-radius: var(--q-r-lg); padding: 11px 12px; font-variant-numeric: tabular-nums; }
.qb-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.qb-field input:focus, .qb-field select:focus, .qb-field textarea:focus { outline: none; border-color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-accent-soft); }
.qb-hint { font-family: var(--q-font-mono); font-size: 11px; color: var(--q-text-low); margin: 5px 0 0; }
.qb-res { display: flex; flex-direction: column; gap: var(--q-s-4); }
.qb-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--q-s-3); padding-bottom: var(--q-s-3); border-bottom: 1px solid var(--q-line); }
.qb-row span { font-size: 14px; color: var(--q-text-mid); }
.qb-row output { font-size: 24px; font-weight: var(--q-fw-semibold); letter-spacing: -.03em; color: var(--q-text-hi); font-variant-numeric: tabular-nums; text-align: right; }
.qb-verdict { border-radius: var(--q-r-lg); padding: 12px 14px; font-size: 14px; line-height: 1.5; border: 1px solid var(--q-line-strong); background: var(--q-bg-1); color: var(--q-text-mid); }
.qb-verdict b { display: block; font-weight: var(--q-fw-medium); color: var(--q-text-hi); margin-bottom: 2px; }

/* ── Почему мы ────────────────────────────────────────────────────── */
.qb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--q-s-3); margin-top: var(--q-s-3); }
.qb-stat .qb-v { font-size: 32px; font-weight: var(--q-fw-semibold); letter-spacing: -.03em; color: var(--q-text-hi); font-variant-numeric: tabular-nums; }

/* ── Пилот ────────────────────────────────────────────────────────── */
.qb-pilot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--q-s-5); align-items: center; padding: var(--q-s-7); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.qb-faq details { border-top: 1px solid var(--q-line); padding-block: var(--q-s-4); }
.qb-faq details:last-child { border-bottom: 1px solid var(--q-line); }
.qb-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--q-s-4); font-size: 17px; font-weight: var(--q-fw-medium); color: var(--q-text-hi); }
.qb-faq summary::-webkit-details-marker { display: none; }
.qb-faq summary::after { content: "+"; font-family: var(--q-font-mono); color: var(--q-text-low); }
.qb-faq details[open] summary::after { content: "−"; }
.qb-faq details p { margin: var(--q-s-3) 0 0; color: var(--q-text-mid); max-width: 70ch; font-size: var(--q-t-small); line-height: 1.6; }

/* ── Форма ────────────────────────────────────────────────────────── */
.qb-final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start;
  background: var(--q-bg-2); border: 1px solid var(--q-line-strong); border-radius: var(--q-r-2xl); padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 0 80px -40px var(--qb-glow); margin-bottom: clamp(64px, 8vw, 104px); }
.qb-final ul { margin: var(--q-s-5) 0 0; padding-left: 18px; display: grid; gap: var(--q-s-2); color: var(--q-text-mid); font-size: var(--q-t-small); }
.qb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--q-s-4); }
.qb-form .qb-field--wide { grid-column: 1 / -1; }
.qb-form .q-form-error { grid-column: 1 / -1; }
.qb-form button[type="submit"] { grid-column: 1 / -1; justify-content: center; }
.qb-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--q-text-mid); cursor: pointer; }
.qb-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--q-accent); flex: none; }
.qb-check a { color: var(--q-accent-hover); }
.qb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

:where(.qb) a:focus-visible, :where(.qb) summary:focus-visible, :where(.qb) button:focus-visible { outline: 2px solid var(--q-accent-hover); outline-offset: 3px; border-radius: 6px; }

/* ── Адаптив ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .qb-g4, .qb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-hero__grid, .qb-gmain, .qb-calc, .qb-final { grid-template-columns: 1fr; }
  .qb-meta { text-align: left; }
}
@media (max-width: 640px) {
  .qb-g2, .qb-g3, .qb-g4, .qb-steps, .qb-fields, .qb-stats, .qb-form { grid-template-columns: 1fr; }
  .qb-pilot { grid-template-columns: 1fr; padding: var(--q-s-5); }
  .qb-gmain, .qb-gcard { padding: var(--q-s-5); }
  .qb-card { padding: var(--q-s-5); }
}
@media (prefers-reduced-motion: reduce) { .qb-card { transition: none; } }