/* NextGen Robot - WOW-слой (волна A аудита 19.08.2026): стили новых блоков
   конверсии и навигации. Каждая секция помечена ID правки из роадмапа. */


/* @section:announce (W-G4) */

/* Announcement-бар над строкой шапки. ВАЖНО про липкость: в этой сборке
   #site-header и ЕСТЬ .topbar (renderHeader вешает класс на сам <header>,
   пререндер кладёт headerHTML внутрь него), отдельного враппера нет. Если
   сделать бар соседом .topbar внутри общего родителя, у sticky не останется
   запаса хода (высота родителя = бар + строка), и шапка перестанет липнуть.
   Поэтому бар лежит первым элементом ВНУТРИ .topbar, а «уезжание» даёт
   отрицательный top: полоса уходит за верхний край, строка шапки остаётся
   на месте. Бар закрыт - смещения нет, top:0 как раньше.
   Проверено в браузере: вверху страницы строка шапки 36..104, при прокрутке
   она залипает на 0..68, бар уходит в -36..0. */
:root { --ngannc-h: 36px; }

/* без рамки снизу: высота полосы должна ровно совпадать с --ngannc-h,
   иначе при залипании шапки от бара остаётся видимая полоска */
.ngannc { background: var(--ink); color: var(--white); }
.ngannc[hidden] { display: none; }
.ngannc__in {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: var(--ngannc-h);
  padding-left: calc(var(--space-4) + 28px); padding-right: calc(var(--space-4) + 28px);
}
.ngannc__t {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 var(--fs-3)/1.3 var(--font-body);
}
.ngannc__more {
  flex: none; color: var(--white); font: 600 var(--fs-3)/1.3 var(--font-body);
  text-decoration: underline; text-underline-offset: 2px;
}
.ngannc__more:hover { color: var(--accent-soft); }
.ngannc__x {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-xs);
  background: none; color: rgba(255, 255, 255, .72); font: 500 var(--fs-3)/1 var(--font-body);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ngannc__x:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
.ngannc__more:focus-visible, .ngannc__x:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.topbar:has(.ngannc:not([hidden])) { top: calc(-1 * var(--ngannc-h)); }

@media (max-width: 720px) {
  .ngannc__tail { display: none; }   /* на мобиле остаётся короткий «Новое: проект и избранное» */
  .ngannc__in { padding-left: var(--space-3); padding-right: calc(var(--space-3) + 26px); }
  .ngannc__x { right: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { .ngannc__x { transition: none; } }

/* @section:hero (W-H3, W-H12) */

/* W-H1 (второе действие первого экрана без заливки) снят по просьбе заказчика:
   кнопка «Все ИИ» осталась на общем .btn--ghost с белым фоном, чтобы совпадать
   со вторыми кнопками на остальных баннерах карусели. Класс .wh-btn-quiet
   больше нигде не используется и убран. */

/* W-H3: подписи ТТХ на рендере - ссылки на карточку модели. В market.css
   у .hero-mark выключены события мыши; включаем их только когда подпись видна
   (скан её зажёг, курсор на рендере или пришёл фокус с клавиатуры) - иначе над
   картинкой висели бы невидимые ловушки для кликов. */
a.hero-mark { text-decoration: none; cursor: pointer; }
a.hero-mark.lit, #hero-scan-wrap:hover a.hero-mark, a.hero-mark:focus-visible { pointer-events: auto; }
#hero-scan-wrap:hover a.hero-mark, a.hero-mark:focus-visible { opacity: 1; transform: none; }
a.hero-mark::after { content: '→'; margin-left: 4px; opacity: .5; }
a.hero-mark:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
a.hero-mark:hover::after { opacity: 1; }

/* W-H12: сноска-манифест под шагами консалтинга убрана вместе с чёрточкой
   над ней (замечание №138), стили больше не нужны. */

/* @section:form (W-H15, W-H17) */

/* W-H15: чипы над полем сообщения. Разметка - скрытый чекбокс/радио плюс
   стилизованный label: выбор уходит обычным POST и без JavaScript. */
.wh-chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.wh-chips legend { padding: 0; font: 500 var(--fs-3)/1.2 var(--font-body); color: var(--text-2); }
.wh-chips__row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 6px; }
/* форма выкладывает свои label колонкой - чипу нужна строка */
.contact-form .wh-chip { display: inline-flex; gap: 0; margin: 0; }
.wh-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wh-chip span { display: inline-block; padding: 8px 14px; cursor: pointer;
  font: 500 var(--fs-3)/1 var(--font-body); color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--pill);
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.wh-chip:hover span { border-color: var(--text-3); }
.wh-chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.wh-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* W-H17: срок ответа под кнопкой отправки. */
.wh-sla { display: flex; align-items: center; gap: 8px; margin: 0;
  font: 400 var(--fs-3)/1.5 var(--font-body); color: var(--text-2); }
.wh-sla::before { content: ''; flex: none; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .wh-chip span { transition: none; }
}

/* @section:cases (W-H9, W-H10, W-C3, W-C4, W-C6) */
/* W-H9/W-H10: карточка кейса больше не один <a> - внутри появилась вторая
   ссылка. Кликабельность всей плитки даёт растянутая ссылка заголовка,
   кнопка пересчёта лежит поверх этой растяжки. */
.ngm-case { position: relative; transition: box-shadow .15s ease; }
.ngm-case:hover, .ngm-case:focus-within { box-shadow: var(--shadow-lift); }
.ngm-case__link { color: inherit; text-decoration: none; }
.ngm-case__link::after { content: ''; position: absolute; inset: 0; }
.ngm-case__link:focus-visible { outline: none; }
.ngm-case__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-m); }

/* цифра-герой: её читают раньше заголовка */
.ngm-case__hero { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.ngm-case__hero-v {
  font: 700 var(--fs-9)/1 var(--font-mono); color: var(--good);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ngm-case__hero-k { font-size: var(--fs-2); line-height: 1.3; color: var(--text-2); }

/* остальные метрики - справочные: мельче и без зелёного */
.ngm-case__rest { gap: var(--space-3); }
.ngm-case__rest .mcard__mv { font: 600 var(--fs-4)/1.2 var(--font-mono); color: var(--text-2); }
.ngm-case__rest .mcard__mk { font-size: var(--fs-1); color: var(--text-3); }

/* вторая ссылка карточки: вход в калькулятор нужного кейса */
.ngm-case__acts { position: relative; z-index: 1; margin: var(--space-3) 0 0; }
.ngm-case__recalc {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface); color: var(--accent);
  font: 600 var(--fs-3)/1 var(--font-body); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.ngm-case__recalc::after { content: '→'; font: 400 var(--fs-3)/1 var(--font-mono); }
.ngm-case__recalc:hover { border-color: var(--accent); background: var(--accent-soft); }
.ngm-case__recalc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* W-C3: открытая методика рядом с калькулятором */
.ngm-method {
  margin-top: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--shadow-card);
}
.ngm-method__sum {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none;
  padding: var(--space-3) var(--space-4); border-radius: var(--r-m);
  font: 600 var(--fs-5)/1.4 var(--font-display); color: var(--text);
}
.ngm-method__sum::-webkit-details-marker { display: none; }
.ngm-method__sum::before {
  content: '+'; width: 1em; text-align: center; color: var(--accent);
  font: 400 var(--fs-6)/1 var(--font-mono);
}
.ngm-method[open] .ngm-method__sum::before { content: '−'; }
.ngm-method__sum:hover { color: var(--accent); }
.ngm-method__sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ngm-method__in { padding: 0 var(--space-4) var(--space-4); max-width: 82ch; }
.ngm-method__in p { margin: 0 0 var(--space-3); font-size: var(--fs-4); line-height: 1.6; color: var(--text-2); }
.ngm-method__in p:last-child { margin-bottom: 0; }
.ngm-method__in b { color: var(--text); }

/* W-C6: шеринг расчёта - кнопка появляется вместе с готовой сметой */
.ngm-share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; }
.ngm-share[hidden] { display: none; }
.ngm-share__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface); color: var(--accent); cursor: pointer;
  font: 600 var(--fs-3)/1 var(--font-body);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ngm-share__btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.ngm-share__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ngm-share__btn--done { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.ngm-share__hint { font-size: var(--fs-2); color: var(--text-3); }
.ngm-share__url {
  flex: 1 1 260px; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2);
  font: 400 var(--fs-2)/1.3 var(--font-mono); color: var(--text-2);
}
.ngm-share__url[hidden] { display: none; }
.ngm-share__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ngm-share:not([hidden]) { animation: ngm-share-in .22s ease-out both; }
  @keyframes ngm-share-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ngm-case, .ngm-case__recalc, .ngm-share__btn { transition: none; }
}

@media (max-width: 640px) {
  .ngm-case__hero-v { font-size: var(--fs-8); }
  .ngm-case__recalc, .ngm-share__btn { width: 100%; justify-content: center; }
  .ngm-method__in { padding: 0 var(--space-3) var(--space-3); }
  .ngm-method__sum { padding: var(--space-3); }
}

/* @section:catalog (W-K7) + @section:services (W-V2, W-S4) */
/* W-K7: SEO-блок каталога - таблица типов техники и FAQ (robots.html) */
.seoq__panel { margin-top: var(--space-4); }
.seoq__panel + .seoq__panel { margin-top: var(--space-4); }
.seoq__panel .panel__t { margin: 0 0 var(--space-3); }

.seoq__scroll { overflow-x: auto; }
.seoq__tbl { width: 100%; min-width: 520px; border-collapse: collapse; }
.seoq__cap { caption-side: bottom; text-align: left; padding-top: var(--space-3);
  font-size: var(--fs-2); color: var(--text-3); }
.seoq__tbl th, .seoq__tbl td { text-align: left; vertical-align: top;
  padding: 11px var(--space-4) 11px 0; border-bottom: 1px solid var(--border); }
.seoq__tbl th:last-child, .seoq__tbl td:last-child { padding-right: 0; }
.seoq__tbl thead th { padding-top: 0; font: 600 var(--fs-1)/1.4 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.seoq__tbl tbody th { font: 600 var(--fs-4)/1.5 var(--font-body); color: var(--text); white-space: nowrap; }
.seoq__tbl tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.seoq__tbl tbody th a:hover { color: var(--accent); border-bottom-color: currentColor; }
.seoq__tbl tbody td { font-size: var(--fs-4); line-height: 1.55; color: var(--text-2); }
.seoq__tbl tbody tr:last-child th, .seoq__tbl tbody tr:last-child td { border-bottom: 0; }
.seoq__c { white-space: nowrap; color: var(--text-3); font-size: var(--fs-3); }
.seoq__n { font: 600 var(--fs-5)/1 var(--font-mono); color: var(--text); }

.seoq__faq { display: grid; gap: 0 var(--space-6); align-items: start; }
@media (min-width: 900px) { .seoq__faq { grid-template-columns: 1fr 1fr; } }
.seoq__q { border-bottom: 1px solid var(--border); }
.seoq__q > summary { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 13px 0; cursor: pointer; list-style: none;
  font: 600 var(--fs-5)/1.5 var(--font-body); color: var(--text); }
.seoq__q > summary::-webkit-details-marker { display: none; }
.seoq__q > summary:hover { color: var(--accent); }
.seoq__q > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
/* «галочка» вместо иконки: маркер details отключён, состояние показываем поворотом */
.seoq__q > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin: 6px 0 0 auto;
  border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg); transition: transform .18s ease; }
.seoq__q[open] > summary::after { transform: rotate(-135deg); }
.seoq__q p { margin: 0 0 var(--space-3); max-width: 72ch;
  font-size: var(--fs-4); line-height: 1.65; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .seoq__q > summary::after { transition: none; } }

.seoq__more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border);
  font-size: var(--fs-3); }
.seoq__more a { color: var(--accent); text-decoration: none; }
.seoq__more a:hover { text-decoration: underline; }

/* W-V2: SLA таблицей + шаги инцидента (services.html) */
.slatab { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.slatab__t { width: 100%; border-collapse: collapse; }
.slatab__cap { caption-side: top; text-align: left; padding-bottom: var(--space-3);
  font: 600 var(--fs-1)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.slatab__t th, .slatab__t td { text-align: left; vertical-align: baseline;
  padding: 12px var(--space-4) 12px 0; border-bottom: 1px solid var(--border); }
.slatab__t th:last-child, .slatab__t td:last-child { padding-right: 0; }
.slatab__t thead th { padding-top: 0; font: 600 var(--fs-1)/1.4 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.slatab__t tbody th { width: 32%; font: 600 var(--fs-5)/1.45 var(--font-body); color: var(--text); }
.slatab__t tbody tr:last-child th, .slatab__t tbody tr:last-child td { border-bottom: 0; }
.slatab__v { width: 22%; white-space: nowrap;
  font: 700 var(--fs-7)/1.15 var(--font-mono); letter-spacing: -0.01em; color: var(--text); }
.slatab__f { font-size: var(--fs-4); line-height: 1.5; color: var(--text-2); }
.slatab__lbl { display: none; }

@media (max-width: 640px) {
  .slatab { padding: var(--space-4); }
  .slatab__t, .slatab__t tbody, .slatab__t tr, .slatab__t th, .slatab__t td { display: block; width: auto; }
  .slatab__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .slatab__t tbody tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
  .slatab__t tbody tr:first-child { padding-top: 0; }
  .slatab__t tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .slatab__t th, .slatab__t td { padding: 0; border-bottom: 0; }
  .slatab__v { margin: 2px 0 4px; }
  .slatab__lbl { display: inline; color: var(--text-3); }
}

.incflow { margin-top: var(--space-4); }
.incflow__t { margin: 0 0 var(--space-3); font: 600 var(--fs-1)/1.4 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.incflow__row { display: flex; align-items: stretch; gap: var(--space-4);
  list-style: none; margin: 0; padding: 0; }
.incflow__step { position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: 12px var(--space-3); box-shadow: var(--shadow-card); }
.incflow__n { flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font: 600 var(--fs-2)/24px var(--font-mono); text-align: center; }
.incflow__s { min-width: 0; font-size: var(--fs-4); line-height: 1.4; color: var(--text-2); }
/* стрелка живёт в зазоре между шагами - без лишних узлов в разметке */
.incflow__step:not(:last-child)::after { content: '→'; position: absolute;
  top: 50%; right: calc(var(--space-4) * -1); width: var(--space-4);
  transform: translateY(-50%); text-align: center;
  font-size: var(--fs-4); color: var(--text-3); }

@media (max-width: 760px) {
  .incflow__row { flex-direction: column; }
  .incflow__step:not(:last-child)::after { content: '↓'; top: auto; right: auto;
    bottom: calc(var(--space-4) * -1); left: 50%; width: auto;
    height: var(--space-4); line-height: var(--space-4); transform: translateX(-50%); }
}

/* W-S4: осязаемые результаты аудита - иконка формата у каждого пункта (consulting.html) */
.delv li { align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); }
.delv__ic { flex: none; display: inline-flex; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.delv__ic svg { display: block; width: 100%; height: 100%; }
.delv__x { flex: 1 1 auto; min-width: 0; }
.delv__fmt { flex: none; margin-top: 1px; padding: 4px 7px; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text-3);
  font: 600 var(--fs-1)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }


/* @section:fixes - находки скриншот-диагностики 20.08.2026 */

/* Значение характеристики схлопывалось до нуля при длинном названии
   («Пропускная способность» съедала «300 шт/ч»): теперь значение всегда
   по контенту, длинное название честно обрезается многоточием. */
.prod__specs li { grid-template-columns: minmax(0, 1fr) auto; }
.prod__specs li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod__specs li b { white-space: nowrap; }

/* <button> центрирует содержимое по вертикали - в ряду карточек-кнопок
   (табы кейсов, схемы оплаты) текст стоял на разной высоте. Раскладываем
   содержимое колонкой от верха. */
.case-tab, .fin-scheme { display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start; }

/* Метрики карточек кейсов переносились по-разному (2+1 против 1+1+1),
   и блок метрик с разделительной линией плавал по высоте. Ровная сетка
   и запас высоты подписи выравнивают линию во всём ряду.
   Плашка эффекта решения (--effect) в эту сетку не входит: она в одну строку. */
.mcard__metrics:not(.mcard__metrics--wide):not(.mcard__metrics--effect) { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.mcard__metrics:not(.mcard__metrics--wide) .mcard__mk { min-height: calc(3 * 1.35em); }

/* Стат-полосы внутренних страниц: иконка и текст выравниваются по верху,
   иначе многострочные подписи «плавали» относительно соседних колонок. */
.page-head .statrow > div { align-items: flex-start; }
.page-head .statrow > div > span:last-child { flex: 1 1 auto; }

/* Бейдж статуса кейса: при переносе на две строки строки перекрывались
   (line-height 1 меньше высоты строчного бокса). */
.case-status-badge { line-height: 1.35; }

/* График окупаемости на телефоне прокручивается внутри карточки -
   говорим об этом, а не делаем вид, что график обрезан. */
@media (max-width: 640px) {
  .pbc::after { content: 'график прокручивается вбок'; display: block;
    margin-top: 4px; font-size: var(--fs-1); color: var(--text-3); }
}

/* Мобильная SLA-таблица: caption оставался table-caption и сжимался
   в столбик по слову на строку (проверка прода 20.08). */
@media (max-width: 640px) {
  .slatab__cap { display: block; width: auto; }
  /* и заголовкам строк не оставляем настольные 32% ширины - «Режим
     поддержки» рвался по слову на строку */
  .slatab__t tbody th, .slatab__v { width: auto; }
}

/* Плитки типов: под однострочной подписью резервировалась пустая вторая
   строка, и счётчик «N моделей» повисал в воздухе (замечание владельца
   20.08). Счётчик теперь сразу под подписью, равную высоту карточек
   держит min-height тела, а не невидимые строки. */
.typecard__h { min-height: 0; }
.typecard__n { margin-top: 6px; }
/* текст по центру, как и пэкшот над ним, - плитка читается симметрично
   (просьба владельца 20.08) */
.typecard__body { min-height: 126px; text-align: center; }

/* Витрина в поисковом слое: честные сортировки каталога */
.ss-sort { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ss-sort button { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--pill);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  font: 500 var(--fs-3)/1 var(--font-body);
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
.ss-sort button:hover { border-color: var(--text-3); }
.ss-sort button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ss-sort button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ss-sort button { transition: none; } }

/* Поисковый слой открыт - плавающая кнопка консультации уходит: она
   перекрывала фильтры на мобиле и карточки на десктопе (QA-аудит 23.08). */
body.sslayer-open .adv-fab, body.sslayer-open .adv-menu { display: none !important; }