/* ЦКП ckp74.ru: компоненты дизайн-системы. Только токены из tokens.css, без своих чисел.
   Правила: docs/design/design-system.md. Образец: prototype/ds.html. */

/* Кнопки (KittyBox, значения из docs/decisions.md 2026-10-18): высота 48, радиус 12, вес 600, подпись 15.
   Оранжевая CTA одна на экран. Синяя основная: на светлом фоне, не рядом с оранжевой как равная. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 48px; padding: 0 var(--s5); border: 0; border-radius: var(--r);
  font: var(--fw-semibold) var(--fs-button) / 1 var(--font); text-decoration: none; cursor: pointer;
  background: var(--field); color: var(--ink); box-shadow: var(--shadow-btn);
  transition: background var(--dur-fast), box-shadow var(--dur-fast), transform .1s;
}
.btn:hover { background: var(--field-hover); }
.btn:active { transform: scale(.99); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--cta { background: var(--cta); color: var(--cta-ink); box-shadow: 0 8px 20px -8px var(--cta-glow); }
.btn--cta:hover { background: var(--cta-hover); box-shadow: 0 12px 24px -8px var(--cta-glow); transform: translateY(-1px); }
.btn--cta:active { transform: translateY(1px) scale(.99); box-shadow: 0 3px 8px -4px var(--cta-glow); }
.btn--primary { background: var(--blue); color: var(--blue-ink); box-shadow: 0 8px 20px -8px var(--blue-glow); }
.btn--primary:hover { background: var(--blue-hover); box-shadow: 0 12px 24px -8px var(--blue-glow); }
.btn--primary:active { transform: none; box-shadow: 0 3px 8px -4px var(--blue-glow); }
.btn--light { background: var(--surface); color: var(--brand); }
.btn--light:hover { background: var(--tile); }
.btn--quiet { background: var(--field); color: var(--ink); box-shadow: none; }
.btn--glass { background: var(--on-dark-2); color: var(--on-dark); box-shadow: none; }
.btn--glass:hover { background: var(--on-dark-3); }
.btn--lg { min-height: 56px; padding: 0 var(--s6); font-size: var(--fs-lead); }
.btn--sm { min-height: 36px; padding: 0 var(--s4); font-size: var(--fs-small); }
.btn .ic, .btn svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* Поле: заливка без рамки, 48, радиус 12. Подпись над полем. */
.field { display: grid; gap: var(--s2); }
.field > label { font: var(--fw-medium) var(--fs-small) / var(--lh-small) var(--font); color: var(--muted); }
.field input, .field select, .field textarea, .input {
  min-height: 48px; padding: 0 var(--s4); border: 2px solid transparent; border-radius: var(--r);
  background: var(--field); color: var(--ink); font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
}
.field textarea { padding-block: var(--s3); min-height: 96px; }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { background: var(--field-hover); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: 0; background: var(--surface); border-color: var(--ring); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--danger); background: var(--danger-bg); }
.field__hint { font: var(--fw-regular) var(--fs-caption) / var(--lh-caption) var(--font); color: var(--muted); }
.field--error .field__hint { color: var(--danger); }

/* Карточка: surface, радиус 20, тень карточки, отступ 24 (на телефоне 16) */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--s5); text-decoration: none; transition: box-shadow var(--dur) ease; }
a.card:hover, .card--hover:hover { border-color: var(--line-strong); transform: translateY(-2px); }
@media (max-width: 600px) { .card { padding: var(--s4); } }
.card--tile { background: var(--tile); border-color: transparent; box-shadow: var(--shadow-card); }
.card--warm { background: var(--tile-warm); border-color: transparent; box-shadow: var(--shadow-card); }
.card--dark { background: var(--gradient-brand); border-color: transparent; color: var(--on-dark); box-shadow: var(--shadow-card-dark); }
.card--dark .t-body, .card--dark p { color: var(--footer-ink); }
.card--dark h2, .card--dark h3, .card--dark b { color: var(--on-dark); }
.card--dark hr { border: 0; border-top: 1px solid var(--on-dark-line); }
/* QR-код на тёмном фоне только на белой плашке, иначе его не прочитает камера */
.qr-plate { background: var(--surface); padding: var(--s2); border-radius: var(--r); display: block; }

/* Чип симптома: pill, обводка, активный brand */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--icon-btn); padding: 0 var(--s4); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer;
  font: var(--fw-medium) var(--fs-small) / 1 var(--font);
}
.chip:hover { background: var(--tile); }
.chip.on, .chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Тег статуса: таблетка */
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s3); border-radius: var(--r-pill); background: var(--tile); color: var(--brand); font: var(--fw-bold) var(--fs-caption) / 1 var(--font); }
.tag--accent { background: var(--tile-warm); color: var(--accent); }
.tag--danger { background: var(--danger-bg); color: var(--danger); }

/* Таблица: шапка caption на soft, строки разделены line */
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.tbl th { padding: var(--s3) var(--s4); background: var(--soft); color: var(--muted); text-align: left; font: var(--fw-semibold) var(--fs-caption) / var(--lh-caption) var(--font); }
.tbl td { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); vertical-align: middle; }
.tbl .price { font-weight: var(--fw-bold); }
.tbl .price i { font-style: normal; color: inherit; font-weight: inherit; }

/* Иконки: цвет задаёт фон под иконкой. Белый фон: оранжевая. Серый фон (field, soft, bg, line): синяя. Тёмный или синий фон: белая. */
.ic-white { color: var(--icon-on-white); }
.ic-gray { color: var(--icon-on-gray); }
.ic-inline { color: var(--icon-inline); }
.ic-tile { display: grid; place-items: center; flex: none; width: var(--icon-btn); height: var(--icon-btn); border-radius: 50%; background: var(--surface); color: var(--icon-on-white); box-shadow: var(--shadow-tile); }
.ic-tile--dark { background: var(--surface); color: var(--icon-on-white); border-radius: var(--r); box-shadow: none; }
.ic-tile--gray { border-radius: var(--r); background: var(--field); color: var(--icon-on-gray); box-shadow: none; }

/* Логотип: знак (круг с монитором, src/assets/img/logo-mark.svg) и справа столбиком «Центр Компьютерной Поддержки».
   Текст белый или чёрный, не синий, только на синем или тёмном фоне, без плашки. Текст 24% знака, три строки, зазор 15% знака. */
.logo { --logo-size: 60px; display: inline-flex; align-items: center; gap: 0; /* зазор 15% знака до видимого круга уже заложен в поля файла знака */ color: var(--on-dark); text-decoration: none; }
.logo__mark { width: var(--logo-size); height: var(--logo-size); flex: none; }
.logo__mark img { display: block; width: 100%; height: 100%; }
.logo__text { font-size: calc(var(--logo-size) * 0.235); line-height: 1.06; /* высота текста трёх строк 74-75% знака */ font-weight: var(--fw-semibold); text-align: left; letter-spacing: 0.01em; }
.logo--sm { --logo-size: 52px; }

/* Выпадающее меню, матовое стекло как у шапки (--glass-header): пункты высотой около 44, зазор между пунктами 4, отступ 12 по вертикали и 16 по горизонтали */
.menu-pop { display: grid; gap: var(--s1); min-width: 240px; padding: var(--s2); background: var(--glass-header); -webkit-backdrop-filter: blur(var(--glass-header-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-header-blur)) saturate(1.3); border: 1px solid var(--on-dark-line); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.menu-pop a { padding: var(--s3) var(--s4); border-radius: var(--s2); color: var(--on-dark); text-decoration: none; white-space: nowrap; font: var(--fw-medium) var(--fs-small) / var(--lh-small) var(--font); }
.menu-pop a:hover { background: var(--on-dark-2); }
.menu-pop a.on, .menu-pop a[aria-current="page"] { color: var(--cta-light); font-weight: var(--fw-semibold); }

/* Пункт верхнего меню на тёмном фоне: отступ 8 по вертикали и 12 по горизонтали, активный светлее */
.nav-link { display: inline-block; padding: var(--s2) var(--s3); border-radius: var(--s3); color: var(--on-dark); text-decoration: none; font: var(--fw-regular) var(--fs-small) / 1.5 var(--font); }
.nav-link:hover { background: var(--on-dark-1); }
.nav-link.on, .nav-link[aria-current="page"] { color: var(--cta-light); font-weight: var(--fw-semibold); }

/* Ссылка на тёмном фоне (подвал): светлая, при наведении белая, текущая страница светлым оранжевым */
.link-dark { color: var(--footer-ink); text-decoration: none; }
.link-dark:hover { color: var(--on-dark); }
.link-dark.on, .link-dark[aria-current="page"] { color: var(--cta-light); font-weight: var(--fw-semibold); }

/* Цена по акции: старая цена сверху зачёркнута, ниже новая крупно без «от» */
.price-old { display: block; font-size: var(--fs-body); font-weight: var(--fw-regular); text-decoration: line-through; opacity: .75; margin-bottom: var(--s1); }

/* Формы по KittyBox (3L): подпись над полем, поле с заливкой без рамки, сегментный переключатель на радио, баннер ошибки над формой */
.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: var(--s2); color: var(--muted); font: var(--fw-medium) var(--fs-small) / var(--lh-small) var(--font); }
.seg-track { display: flex; gap: var(--s1); padding: var(--s1); background: var(--field); border-radius: var(--r-md); }
.seg-track label { position: relative; flex: 1 1 0; }
.seg-track input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; min-height: 0; }
.seg-track span { display: flex; align-items: center; justify-content: center; min-height: var(--icon-btn); padding: 0 var(--s3); white-space: nowrap; border-radius: var(--r); font: var(--fw-semibold) var(--fs-button) / 1 var(--font); }
.seg-track input:checked + span { background: var(--blue); color: var(--blue-ink); }
.seg-track input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.flash { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--field); color: var(--ink); font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font); margin: 0 0 var(--s2); }
.flash--info { color: var(--muted); font-weight: var(--fw-regular); }
.flash--error { background: var(--danger-bg); color: var(--danger); }
.flash svg { width: 22px; height: 22px; flex: none; }
.tbl { font-variant-numeric: tabular-nums; }
.tbl th { letter-spacing: .03em; white-space: nowrap; }
@media (hover: hover) { .tbl tbody tr:hover { background: var(--soft); } }
.tbl tbody tr:active { background: var(--soft); }

/* Модальное окно: dialog.modal с частями. Радиус 24, тень модалки, фон затемнён с размытием. Ошибки формы баннером .flash сверху, не под полем. */
dialog.modal { border: 0; border-radius: var(--r-xl); padding: 0; width: min(92vw, 480px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-modal); }
dialog.modal::backdrop { background: rgb(20 24 29 / .55); backdrop-filter: blur(4px); }
.modal__body { position: relative; display: grid; gap: var(--s5); padding: var(--s6) var(--s6) var(--s5); }
.modal__head { display: grid; gap: var(--s2); padding-right: var(--s7); }
.modal__title { margin: 0; font: var(--fw-bold) var(--fs-h3) / var(--lh-h2) var(--font); }
.modal__hint { margin: 0; color: var(--muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.modal__close { position: absolute; top: var(--s4); right: var(--s4); width: var(--icon-btn); height: var(--icon-btn); display: grid; place-items: center; border: 0; border-radius: var(--r); background: var(--field); color: var(--ink); cursor: pointer; }
.modal__close:hover { background: var(--field-hover); }
.modal__close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.modal__chip { padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--soft); border: 1px solid var(--line); font: var(--fw-semibold) var(--fs-body) / 1.4 var(--font); }
.modal__chip small { display: block; font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--muted); }
.modal__form { display: grid; gap: var(--s3); }
.modal__form form { display: grid; gap: var(--s3); }
.modal__note { margin: 0; color: var(--muted); font: var(--fw-regular) var(--fs-caption) / 1.5 var(--font); }
.modal__or { display: flex; align-items: center; gap: var(--s3); margin: var(--s1) 0; color: var(--muted); font: var(--fw-regular) var(--fs-small) / 1 var(--font); }
.modal__or::before, .modal__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.modal__foot { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--field-hover); color: var(--muted); font: var(--fw-regular) var(--fs-caption) / 1.5 var(--font); }
.modal__done { display: grid; gap: var(--s4); justify-items: center; padding: var(--s5) 0 var(--s2); text-align: center; }
.modal__ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--field); color: var(--brand); }
.modal__view { display: grid; gap: var(--s5); }
.modal__view[hidden], .modal__chip[hidden], .modal__done[hidden] { display: none; }
@media (max-width: 600px) { .modal__body { padding: var(--s5) var(--s4) var(--s4); gap: var(--s4); } .modal__view { gap: var(--s4); } }

/* Кнопки-каналы связи (WhatsApp, Telegram, ВКонтакте, почта): окно заявки и карточка контактов */
.channels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.channel { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s4); border-radius: var(--r); background: var(--field); color: var(--ink); text-decoration: none; font: var(--fw-semibold) var(--fs-small) / 1.2 var(--font); transition: background-color var(--dur-fast) ease; }
.channel:hover { background: var(--field-hover); }
.channel svg { color: var(--icon-on-gray); flex: none; }
.channel:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .channel { transition: none; } }

/* FAQ: аккордеон на details, своя стрелка вместо треугольника браузера (оранжевая, иконка на белом) */
.faqs { display: grid; gap: var(--s3); max-width: 720px; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 var(--s5); box-shadow: var(--shadow-card); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; cursor: pointer; list-style: none; font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--icon-on-white); border-bottom: 2px solid var(--icon-on-white); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur) ease; }
.faq[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r); }
.faq p { margin: 0; padding: 0 0 var(--s4); color: var(--muted); font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Прайс-таблица: карточка .tbl-card с шапкой и таблицей .tbl, строка услуги .svc с плиткой .stile, итоги tfoot, кнопка строки .tbl-act появляется при наведении, на телефоне скрыта: заявку открывает тап по строке */
.tbl-card { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow-x: auto; }
.tbl-card__head { padding: var(--s5) var(--s4) var(--s4); }
.tbl-card__title { margin: 0 0 var(--s1); font: var(--fw-semibold) var(--fs-h4) / var(--lh-h4) var(--font); }
.tbl-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s1); }
.tbl-card__row .tbl-card__title { margin: 0; }
.pick-chip { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3) var(--s1) var(--s2); border-radius: var(--r-pill); background: var(--blue); color: var(--blue-ink); font: var(--fw-medium) var(--fs-caption) / 1.2 var(--font); white-space: nowrap; }
.pick-chip[hidden] { display: none; }
.pick-chip .pick-icon { display: grid; flex: none; }
.pick-chip .pick-icon svg { width: 1.4em; height: 1.4em; display: block; }
.pick-chip.is-in { animation: pick-in var(--dur-slow) var(--ease-out); }
@keyframes pick-in { from { opacity: 0; transform: translateY(var(--s1)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pick-chip.is-in { animation: none; } }
.tbl-card__note { margin: 0; color: var(--muted); font: italic var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.tbl-card .tbl { box-shadow: none; border-radius: 0; background: transparent; }
.tbl td { vertical-align: middle; }
.tbl tbody tr { transition: background-color var(--dur-fast) ease; }
.tbl tbody tr:focus-within { background: var(--soft); }
.svc { display: flex; align-items: center; gap: var(--s3); }
.svc b { font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font); }
.svc small { display: block; color: var(--muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.stile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r); background: var(--field); color: var(--icon-on-gray); }
.stile--lg { width: 52px; height: 52px; border-radius: var(--r-md); }
.stile--lg svg { width: 26px; height: 26px; }
.tbl .term { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.tbl tfoot td { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.tbl tfoot .sub td { color: var(--muted); font-size: var(--fs-small); }
.tbl tfoot .total td { background: var(--soft); color: var(--ink); font-weight: var(--fw-bold); }
.tbl tfoot .total small { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-small); }
.tbl-act { opacity: 0; transition: opacity var(--dur-fast) ease; }
.tbl tbody tr:hover .tbl-act, .tbl tbody tr:focus-within .tbl-act, .tbl-act:focus-visible { opacity: 1; }
@media (hover: none) { .tbl-act { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tbl tbody tr, .tbl-act { transition: none; } }

/* Калькулятор: карточка .calc (слева позиции, справа итог на градиенте), степпер, тумблер, быстрый старт */
.calc { display: grid; grid-template-columns: 1.35fr 1fr; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.calc__main { display: grid; gap: var(--s5); align-content: start; padding: var(--s6); }
.calc__presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.calc__items { display: grid; }
.calc__item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-top: 1px solid var(--field-hover); }
.calc__item:first-child { border-top: 0; padding-top: 0; }
.calc__item b { font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font); }
.calc__item small { display: block; margin-top: 2px; color: var(--muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.bpane { display: grid; gap: var(--s5); }
.bpane[hidden] { display: none; }
.bstep { display: grid; gap: var(--s3); }
.bstep__t { font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font); }
.btiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.btile { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font); text-align: left; cursor: pointer; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.btile svg { flex: none; color: var(--icon-on-gray); }
.btile:hover { background: var(--tile); }
.btile[aria-pressed="true"], .btile:has(.btile__in:checked) { border-color: var(--brand); background: var(--tile); box-shadow: inset 0 0 0 1px var(--brand); }
.btile[aria-pressed="true"] svg, .btile:has(.btile__in:checked) svg { color: var(--brand); }
.btile__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.btile { position: relative; }
.btile:focus-visible, .btile:has(.btile__in:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.bbudget { display: grid; grid-template-columns: 1fr 160px; gap: var(--s3) var(--s4); align-items: center; }
.bbudget__val { grid-column: 1 / -1; font: 800 var(--fs-h2) / 1.1 var(--font); letter-spacing: -.02em; }
.bbudget input[type="range"] { width: 100%; accent-color: var(--brand); }
.bbar { display: flex; height: 12px; overflow: hidden; border-radius: var(--r-pill); background: var(--field-hover); }
.bbar__parts { display: flex; gap: calc(var(--s1) / 2); overflow: hidden; transition: width var(--dur-fast) ease; }
.bseg { flex: 0 1 auto; min-width: 0; height: 100%; background: var(--brand); transition: width var(--dur-fast) ease; }
.bseg--cpu, .bleg__dot--cpu { background: var(--seg-cpu); }
.bseg--gpu, .bleg__dot--gpu { background: var(--seg-gpu); }
.bseg--board, .bleg__dot--board { background: var(--seg-board); }
.bseg--ram, .bleg__dot--ram { background: var(--seg-ram); }
.bseg--disk, .bleg__dot--disk { background: var(--seg-disk); }
.bseg--psu, .bleg__dot--psu { background: var(--seg-psu); }
.bseg--case, .bleg__dot--case { background: var(--seg-case); }
.bleg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s5); }
.bleg:empty, .bleg__hint:empty { display: none; }
@media (min-width: 601px) { .bleg { grid-template-columns: 1fr 1fr; } }
.bleg li { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); margin: calc(var(--s1) * -1) calc(var(--s2) * -1); border-radius: var(--r); color: var(--muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); cursor: default; transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease; }
.bleg li:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.bleg li.is-hot { background: var(--field); }
.bstep.has-hot .bleg li:not(.is-hot) { opacity: .5; }
.bstep.has-hot .bseg:not(.is-hot), .bstep.has-hot .bbar__work:not(.is-hot) { opacity: .3; }
.bseg, .bbar__work { transition: width var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.bleg__dot--work { background: var(--cta); }
.bleg li span { flex: 1; }
.bleg li b { color: var(--ink); font-weight: var(--fw-semibold); }
.bleg__dot { flex: none; width: var(--s3); height: var(--s3); border-radius: var(--r-pill); }
.bleg__hint { display: block; color: var(--muted); font: var(--fw-regular) var(--fs-caption) / 1.5 var(--font); }
.bbar__work { background: var(--cta); transition: width var(--dur-fast) ease; }
/* Белый штрих между запчастями и оранжевой работой; без бюджета (ширина 0) его нет */
.bbar__work:not([style*="width: 0%"]) { border-left: calc(var(--s1) / 2) solid var(--surface); box-sizing: content-box; }
.bhead { display: flex; align-items: center; gap: var(--s4); }
.bhead[hidden] { display: none; }
.bhead__i { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--surface); color: var(--cta); box-shadow: var(--shadow-tile); }
.bhead__t { color: var(--on-dark); font: 800 var(--fs-h2) / 1.1 var(--font); letter-spacing: -.02em; }
.bben { display: grid; gap: var(--s3); padding: var(--s4) 0 0; border-top: 1px solid var(--on-dark-line); }
.bben[hidden] { display: none; }
.bben__t { color: var(--footer-ink-muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.bben ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.bben li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); align-items: start; animation: bben-in var(--dur-slow) ease both; }
.bben li[hidden] { display: none; }
.bben li:nth-child(2) { animation-delay: 60ms; }
.bben li:nth-child(3) { animation-delay: 120ms; }
.bben li:nth-child(4) { animation-delay: 180ms; }
.bben li:nth-child(5) { animation-delay: 240ms; }
.bben__i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); background: rgb(255 255 255 / 0.12); color: var(--on-dark); }
.bben b { color: var(--on-dark); font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font); }
.bben small { display: block; color: var(--footer-ink-muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
@keyframes bben-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 600px) { .bbudget { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .btiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .btile, .bbar__parts, .bbar__work, .bseg { transition: none; } .bben li { animation: none; } }
.calc__note { margin: 0; color: var(--muted); font: var(--fw-regular) var(--fs-caption) / 1.5 var(--font); }
.stepper { display: inline-flex; align-items: center; gap: var(--s1); }
.stepper button { display: grid; place-items: center; width: var(--touch); height: var(--touch); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color var(--dur-fast) ease; }
.stepper button:hover:not(:disabled) { background: var(--field); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper button:focus-visible, .stepper input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.stepper svg { width: var(--icon-sm); height: var(--icon-sm); }
.stepper input { width: 64px; height: var(--touch); border: 0; border-radius: var(--r); background: transparent; color: var(--ink); text-align: center; font: var(--fw-bold) var(--fs-h4) var(--font); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.switch { position: relative; display: inline-block; width: 52px; height: 30px; vertical-align: middle; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--dur-fast) ease; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(15 27 51 / .25); transition: transform var(--dur-fast) ease; }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::after { transform: translateX(22px); }
.switch input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.calc__sum { display: grid; gap: var(--s4); align-content: start; padding: var(--s6); background: var(--gradient-brand); color: var(--on-dark); }
.calc__sum-label { color: var(--footer-ink-muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.calc__sum-priceline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.calc__sum-price { font: 800 var(--fs-h1) / 1.05 var(--font); letter-spacing: -.02em; }
.calc__sum-per { color: var(--footer-ink-muted); font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); }
.calc__sum-lines { list-style: none; margin: 0; padding: var(--s4) 0 0; border-top: 1px solid var(--on-dark-line); display: grid; gap: var(--s2); color: var(--footer-ink); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.calc__sum-lines li { display: flex; justify-content: space-between; gap: var(--s4); }
.calc__sum-lines b { color: var(--on-dark); white-space: nowrap; }
.calc__sum-min { margin: 0; color: var(--footer-ink-muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.calc__sum-min[hidden] { display: none; }
.calc__sum .btn { width: 100%; }
.calc__sum-call { text-align: center; color: var(--footer-ink); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__main, .calc__sum { padding: var(--s5); } .calc__item { grid-template-columns: auto 1fr; } .calc__item .stepper, .calc__item .switch { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .switch span, .switch span::after, .stepper button { transition: none; } }

/* Шаги «Как мы работаем»: ряд тёмных карточек с градиентом, номер в оранжевом круге с коричневым текстом */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step { display: grid; gap: var(--s2); align-content: start; grid-auto-rows: min-content; padding: var(--s5); border-radius: var(--r-lg); background: var(--gradient-brand); color: var(--on-dark); box-shadow: var(--shadow-card-dark); }
.step__n { display: grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); border-radius: 50%; background: var(--cta); color: var(--cta-ink); font: var(--fw-semibold) var(--fs-body) / 1 var(--font); }
.step h3 { margin: 0; color: var(--on-dark); font: var(--fw-semibold) var(--fs-h3) / var(--lh-h3) var(--font); }
.step p { margin: 0; color: var(--footer-ink); font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); }
@media (max-width: 900px) { .steps, .steps--3 { grid-template-columns: 1fr; gap: var(--s4); } .step:has(> .step__n) { grid-template-columns: var(--icon-btn) 1fr; column-gap: var(--s4); } .step > .step__n { grid-row: 1 / 3; } }
@media (max-width: 600px) { .step { padding: var(--s4); } }

/* Полоса призыва: фото, заголовок с текстом, строчная форма. Градиент, радиус 24, одна оранжевая CTA. */
.cta-band { display: grid; grid-template-columns: 144px 1fr auto; gap: var(--s5); align-items: center; padding: var(--s5) var(--s6); border-radius: var(--r-xl); background: var(--gradient-brand); color: var(--on-dark); box-shadow: var(--shadow-card-dark); }
.cta-band__photo { width: 144px; height: 144px; border-radius: 50%; object-fit: cover; background: var(--field); color: var(--muted); display: grid; place-items: center; text-align: center; font: var(--fw-regular) var(--fs-caption) / 1.2 var(--font); overflow: hidden; }
.cta-band__title { margin: 0 0 var(--s2); color: var(--on-dark); font: var(--fw-bold) var(--fs-h2) / var(--lh-h2) var(--font); }
.cta-band__text { margin: 0; color: var(--footer-ink); font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); }
.cta-band__form { display: flex; gap: var(--s3); flex-wrap: wrap; }
.cta-band .input { min-width: 220px; }
@media (max-width: 900px) { .cta-band { grid-template-columns: var(--cta-photo-sm) 1fr; gap: var(--s4); padding: var(--s5); } .cta-band__photo { width: var(--cta-photo-sm); height: var(--cta-photo-sm); } .cta-band__form { grid-column: 1 / -1; } .cta-band .input { flex: 1 1 var(--cta-input-min); min-width: 0; } .cta-band__form .btn { flex: 1 1 auto; } }
@media (max-width: 420px) { .cta-band { grid-template-columns: var(--cta-photo-xs) 1fr; } .cta-band__photo { width: var(--cta-photo-xs); height: var(--cta-photo-xs); } .cta-band__title { font-size: var(--fs-h3); } }

/* Отзывы: светлая карточка .rsum (поведение: src/assets/js/rsum.js). Слева заголовок, звёзды, общая оценка, подпись, дружелюбный текст и ссылки на карты.
   Справа круг из четырёх колец (доля довольных по темам) и легенда. По умолчанию в центре круга самая высокая доля цветом её кольца. При наведении на строку легенды или касании строка
   затемняется, её кольцо выделяется (остальные светлеют), центр показывает её долю и цвет. Сноска со звёздочкой по центру всей карточки.
   Кольцо рисует --p (проценты) на круге с pathLength 100, цвет темы --tone из .tone-1 до .tone-4, звёзды --rate из 5. Без данных кольца пустые. */
.tone-1 { --tone: var(--brand); } .tone-2 { --tone: var(--cta); } .tone-3 { --tone: var(--accent-light); } .tone-4 { --tone: var(--accent); }
.stars { --rate: 0; --star: var(--s5); position: relative; display: block; width: calc(var(--star) * 5); height: var(--star); background: var(--line-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E") 0 0 / var(--star) var(--star) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E") 0 0 / var(--star) var(--star) repeat-x; }
.stars::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--rate) / 5 * 100%); background: var(--icon-on-white); }
.card.rsum { display: grid; grid-template-columns: minmax(25rem, 4fr) 8fr; gap: var(--s5) var(--s7); align-items: center; padding: var(--s6); }
.rsum__text { display: grid; gap: var(--s5); align-content: center; justify-items: start; }
.rsum__rating { display: grid; gap: var(--s2); }
.rsum .stars { --star: var(--s6); }
.rsum__title { margin: 0; font: var(--fw-bold) var(--fs-h3) / var(--lh-h3) var(--font); white-space: nowrap; }
.rsum__score { display: flex; align-items: baseline; gap: var(--s2); font: var(--fw-bold) var(--fs-h1) / 1 var(--font); font-variant-numeric: tabular-nums; }
.rsum__score { flex-wrap: wrap; }
.rsum__score small { color: var(--muted); font: var(--fw-regular) 1em / 1 var(--font); }
.rsum__text p.rsum__lead { margin: 0; color: var(--muted); text-wrap: pretty; font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); max-width: 32em; }
.rsum__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); width: 100%; max-width: 32em; }
.rsum__links .btn { justify-content: center; gap: var(--s1); white-space: nowrap; }
.rsum__body { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: var(--s6); align-items: center; }
.rsum__ring { position: relative; width: 100%; aspect-ratio: 1; }
.rsum__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.rsum__ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.rsum__ring .t { stroke: color-mix(in srgb, var(--tone) 14%, var(--surface)); }
.rsum__ring .v { stroke: var(--tone); stroke-dasharray: var(--p, 0) 100; animation: rsum-draw var(--dur-slow) var(--ease-out) both; }
.rsum__ring g { transition: opacity var(--dur) ease; }
.rsum__mid { position: absolute; inset: 29%; display: grid; place-content: center; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--muted)) 9%, var(--surface)); text-align: center; transition: background var(--dur) ease; }
.rsum__mid b { color: color-mix(in srgb, var(--tone, var(--muted)) 72%, var(--ink)); font: var(--fw-bold) var(--fs-h2) / 1 var(--font); font-variant-numeric: tabular-nums; transition: color var(--dur) ease; }
.rsum__mid span { margin-top: var(--s1); padding-inline: var(--s2); color: var(--muted); font: var(--fw-regular) var(--fs-caption) / var(--lh-caption) var(--font); }
.rsum__legend { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.rsum__legend li { display: grid; grid-template-columns: var(--s2) 1fr auto; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r); cursor: default; transition: background var(--dur) ease; outline-offset: -2px; }
.rsum__legend li.is-on { background: color-mix(in srgb, var(--tone) 10%, var(--bg)); }
.rsum__legend li:focus-visible { outline: 2px solid var(--ring); }
.rsum__legend i { align-self: stretch; border-radius: var(--r-pill); background: var(--tone); }
.rsum__legend b { display: block; font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font); }
.rsum__legend small { display: block; color: var(--muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.rsum__legend output { font: var(--fw-bold) var(--fs-h3) / 1 var(--font); font-variant-numeric: tabular-nums; }
.rsum__legend output::after { content: "*"; margin-left: 2px; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-regular); vertical-align: top; }
.rsum__body.has-active .rsum__ring g:not(.is-on) { opacity: .35; }
.rsum__note { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); font: var(--fw-regular) var(--fs-caption) / var(--lh-caption) var(--font); }
.rsum--empty .rsum__ring .v { stroke-dasharray: 0 100; animation: none; }
@keyframes rsum-draw { from { stroke-dasharray: 0 100; } }
@media (prefers-reduced-motion: reduce) { .rsum__ring .v { animation: none; } }
@media (max-width: 1040px) { .card.rsum { grid-template-columns: 1fr; } .rsum__body { grid-template-columns: 1fr; } .rsum__ring { max-width: 260px; margin-inline: auto; } }
@media (max-width: 600px) { .card.rsum { padding: var(--s4); } .rsum__title { white-space: normal; text-wrap: balance; } .rsum__links { grid-template-columns: 1fr; } .rsum__legend li { padding-inline: var(--s3); } }

/* Карточка раздела .lcard: плитка с иконкой, название, пояснение, внизу переход со стрелкой (карточка-ссылка a.card.lcard) или пометка (div.card.lcard--static) */
.lcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); color: var(--ink); }
.lcard__title { margin: 0; font: var(--fw-semibold) var(--fs-h4) / var(--lh-h4) var(--font); }
.lcard__text { margin: 0; color: var(--muted); font: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font); }
.lcard__go { display: inline-flex; align-items: center; gap: var(--s1); margin-top: auto; padding-top: var(--s2); color: var(--brand); text-decoration: none; font: var(--fw-semibold) var(--fs-small) / var(--lh-small) var(--font); }
a.lcard__go:hover { text-decoration: underline; }
.lcard--static .lcard__go { color: var(--muted); font-weight: var(--fw-regular); }

/* Окно связи: номер компании по центру между разделителями */
.modal__tel { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: var(--s3) 0 var(--s2); color: var(--ink); text-decoration: none; font: var(--fw-bold) var(--fs-h2) / var(--lh-h1) var(--font); letter-spacing: -.01em; white-space: nowrap; }
.modal__tel svg { width: var(--icon-md); height: var(--icon-md); color: var(--icon-inline); flex: none; }
.modal__tel:hover { text-decoration: underline; }
.modal__tel:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-sm); }

/* Прайс на телефоне: без горизонтальной прокрутки, строка-карточка, заявку открывает тап по строке (кнопка скрыта визуально) */
@media (max-width: 720px) {
  .tbl-card { overflow: hidden; }
  .tbl tbody tr { cursor: pointer; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody { display: block; }
  .tbl tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
  .tbl tbody td { display: block; padding: 0; border: 0; }
  .tbl tbody td:nth-child(2) { white-space: nowrap; text-align: right; }
  .tbl tbody td:nth-child(3) { grid-column: 1 / -1; }
  .tbl .segs.seg-track { flex-wrap: wrap; max-width: 100%; }
  .tbl .svc .stile { display: none; }
  .tbl-act { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
}