/* ============================================================
   MVisionPro main-v5 — тема Concept-E «Cinema» (11.07.2026)
   Токены и роли: mvisionpro-design-system/v5/tokens.css
   Образец: v5/mockups/inspection-key-screens-v2.html (принят 10-11.07)
   Роли цветов: голубой = зрение/техника/результат (НЕ действие);
   оранжевый = действие/внимание/деньги (заливка = только точки обмена).
   Форма: острые углы; исключения — круглые иконко-кнопки и бейджи 4px.
   ============================================================ */

:root {
  color-scheme: dark;
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #eef4f8;
  background: #02040a;
  font-synthesis: none;
  --page-width: 90rem;

  /* фоны */
  --page: #02040a;
  --bg: #05070a;
  --bg2: #0a0e14;
  --panel: #0e131b;
  --panel-soft: #121b22;

  /* текст */
  --ink: #eef4f8;
  --body-ink: #cdd8e2;
  --muted: #8d9bab;
  --dim: #71808f; /* было #5d6a79: 3.7:1 — не проходил WCAG AA для мелких подписей */

  /* линии */
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.16);

  /* акцент 1: голубой — зрение/результат */
  --cy: #4dd2ff;
  --cy2: #9fe9ff;
  --cy-ink: #04222e;
  --cy-glow: rgba(77, 210, 255, 0.32);
  --cy-wash: rgba(77, 210, 255, 0.07);

  /* акцент 2: оранжевый — обмен/действие */
  --hot: #ff7a45;
  --hot2: #ffd0a8;
  --hot-ink: #1c1004;
  --hot-glow: rgba(255, 122, 69, 0.34);
  --hot-wash: rgba(255, 122, 69, 0.08);

  /* служебные */
  --err: #ff5d5d;
  --ok: #55e6a5;
  --warn: #ffb454;

  /* шрифты */
  --disp: 'Unbounded', sans-serif;
  --sans: 'Manrope', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* ---------- базовые структурные правила ---------- */

.content-grid,
.showroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem;
}

.media-placeholder,
.interactive-placeholder,
.artifact-preview-slot {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 10rem;
  overflow: hidden;
}

/* заглушка-фото: тёмная штриховка + mono-подпись (ph-img из макета) */
.media-placeholder,
.quiz-option__media {
  padding: 1rem;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, #0b1119 0 14px, #0d141d 14px 28px);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
}

/* пока фото нет — заглушки не должны давить пустотой */
.media-placeholder {
  max-height: 24rem;
}

/* миниатюра артефакта-образца: светлый «лист» на тёмном (паттерн .sample из макета) */
.artifact-preview-slot {
  max-height: 18rem;
  min-height: 12rem;
  padding: 1.4rem;
  border: none;
  background: linear-gradient(180deg, #f4f6f8 0%, #e8ecef 100%);
  color: #6a7683;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.55;
  text-align: center;
}

/* нумерованные списки (стек оффера и др.) */
.section ol {
  margin: 0 0 1rem;
  padding-left: 1.6rem;
  display: grid;
  gap: 0.65rem;
}

.section ol li {
  color: var(--body-ink);
  line-height: 1.55;
}

.section ol li::marker {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.85em;
}

.section li strong {
  color: var(--ink);
}

.section ul {
  margin: 0 0 1rem;
  display: grid;
  gap: 0.5rem;
}

.section ul li {
  color: var(--body-ink);
  line-height: 1.55;
}

.section ul li::marker {
  color: var(--cy);
}

.modal__shell {
  max-height: min(90dvh, 56rem);
  overflow: auto;
  overscroll-behavior: contain;
}

.case-story,
.artifact-preview {
  display: grid;
  gap: 1.25rem;
}

/* полный образец документа в модалке: белый лист в тёмной рамке */
.artifact-document {
  display: grid;
  gap: 0.9rem;
}

.artifact-document__frame {
  width: 100%;
  height: min(74vh, 56rem);
  border: 1px solid var(--line2);
  background: #fff;
}

.modal:has(.artifact-document) {
  width: min(94vw, 62rem);
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}

.conditions-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
}

.conditions-table th,
.conditions-table td {
  padding: 0.8rem 0.65rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.conditions-table th {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.conditions-table td {
  color: var(--body-ink);
  font-size: 0.94rem;
}

.offer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 320px: колонка не растёт от min-content детей */
  gap: 1rem;
}

@media (max-width: 720px) {
  .modal {
    padding: 0;
  }

  .modal__shell {
    width: 100%;
    max-height: 100dvh;
  }

  .conditions-table,
  .conditions-table tbody,
  .conditions-table tr,
  .conditions-table th,
  .conditions-table td {
    display: block;
  }

  .conditions-table th {
    padding-bottom: 0.2rem;
    border-bottom: none;
  }

  .conditions-table td {
    padding-top: 0;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  padding-bottom: 5.5rem;
  -webkit-font-smoothing: antialiased;
}

body.has-modal {
  overflow: hidden;
}

::selection {
  background: var(--cy);
  color: var(--cy-ink);
}

button,
input,
textarea,
summary {
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 3px;
}

[tabindex='-1']:focus {
  outline: none;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  background: var(--bg2);
  border: 1px solid var(--cy);
  color: var(--ink);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- шапка ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem max(1.25rem, calc((100vw - var(--page-width)) / 2 + 1.5rem));
  border-bottom: 1px solid var(--line);
  background: rgba(3, 5, 10, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.logo {
  width: max-content;
  font-family: var(--disp);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.logo small {
  display: block;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* меню направлений: чип текущего раздела открывает список всех шести */
.header-nav {
  position: relative;
  min-width: 0; /* stretch по ячейке: длинное название режется ellipsis, а не распирает шапку */
}

.header-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--body-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.header-nav__toggle:hover,
.header-nav__toggle[aria-expanded="true"] {
  border-color: var(--line2);
  color: var(--ink);
}

.header-nav__current {
  min-width: 0; /* иначе flex-элемент не сжимается и длинное название распирает шапку */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-nav__caret {
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid var(--cy);
  border-bottom: 1.5px solid var(--cy);
  transform: rotate(45deg) translateY(-20%);
  transition: transform 0.2s;
}

.header-nav__toggle[aria-expanded="true"] .header-nav__caret {
  transform: rotate(225deg) translateY(20%);
}

.header-nav__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  z-index: 30;
  display: grid;
  min-width: 15.5rem;
  padding: 0.4rem;
  border: 1px solid var(--line2);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.header-nav__menu a {
  padding: 0.66rem 0.85rem;
  border-left: 2px solid transparent;
  color: var(--body-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.header-nav__menu a:hover {
  background: var(--panel-soft);
  color: var(--ink);
}

.header-nav__menu a[aria-current="page"] {
  border-left-color: var(--cy);
  color: var(--cy);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--body-ink);
  text-decoration: none;
  transition: color 0.2s;
}

.header-phone:hover {
  color: var(--cy2);
}

.header-phone__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid var(--line2);
  border-radius: 999px;
  color: var(--cy);
  font-size: 0.95rem;
}

.header-contacts {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.header-contacts > .button {
  margin-left: auto;
}

details {
  border: 1px solid var(--line);
  background: var(--panel);
}

summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  padding: 0.85rem 2.6rem 0.85rem 0.95rem;
  font-family: var(--disp);
  font-size: 0.92rem;
  font-weight: 600;
  list-style: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

summary::-webkit-details-marker {
  display: none;
}

/* индикатор раскрытия: тонкий «+» справа */
summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 400;
  transition: color 0.2s, transform 0.2s;
}

details[open] summary::after {
  content: '−';
  color: var(--cy);
}

summary:hover {
  color: var(--cy);
}

details[open] {
  border-color: var(--line2);
}

/* номер шага процесса — квадрат с mono-цифрой */
details[data-disclosure-type="process"] summary span,
.process-list summary span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--line2);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
}

details[data-disclosure-type="process"][open] summary span {
  border-color: var(--cy);
  color: var(--cy);
}

.contact-menu {
  display: grid;
  gap: 0.45rem;
  min-width: 10rem;
  padding: 0.4rem 0.9rem 0.85rem;
  font-family: var(--sans);
}

.contact-menu a {
  text-decoration: none;
  color: var(--body-ink);
}

.contact-menu a:hover {
  color: var(--cy);
}

.contact-menu a[aria-disabled="true"],
a[aria-disabled="true"] {
  color: var(--dim);
  cursor: not-allowed;
}

.preview-notice {
  padding: 0.6rem 1rem;
  border-bottom: 1px dashed var(--line2);
  background: var(--bg2);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ---------- секции ---------- */

.section {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.section__inner {
  width: min(100%, var(--page-width));
  margin: 0 auto;
  padding: 3.4rem 1.25rem;
}

.section--hero .section__inner,
.section--final-cta .section__inner {
  padding-block: 4.5rem;
}

.section--expertise-strip .section__inner,
.section--price-strip .section__inner,
.section--trust .section__inner {
  padding-block: 2.5rem;
}

.section__header {
  max-width: 54rem;
  margin-bottom: 1.9rem;
}

/* кикер: mono, голубой, с оранжевой live-точкой */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 10px var(--hot);
  animation: v5-pulse 2s infinite;
}

@keyframes v5-pulse {
  50% { opacity: 0.35; }
}

/* кикер внутри карточек кейсов — плашка отрасли, без точки */
.case-card .eyebrow,
.case-story .eyebrow {
  display: inline-block;
  width: max-content;
  margin: 0 0 0.4rem;
  padding: 0.32rem 0.6rem;
  background: var(--cy);
  color: var(--cy-ink);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.case-card .eyebrow::before,
.case-story .eyebrow::before {
  content: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
  /* Unbounded широкий: на 320px длинное слово иначе выталкивает страницу вбок (P2-12) */
  overflow-wrap: break-word;
}

h1,
h2 {
  max-width: 50rem;
  margin-bottom: 1.1rem;
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
}

h3 {
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.section__header > p {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.55;
}

.section__header > p b,
.section__header > p strong {
  color: var(--ink);
  font-weight: 600;
}

/* длинный текст секций */
.section p {
  color: var(--body-ink);
}

.section p strong {
  color: var(--ink);
}

/* ---------- hero: полноэкранная сцена с фоновой подложкой ---------- */
.section--hero {
  position: relative;
  overflow: hidden;
  background: var(--page);
}

.section--hero .section__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(34rem, calc(100svh - 8.5rem));
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

.hero-bg--empty {
  background:
    radial-gradient(110% 90% at 78% 30%, rgba(77, 210, 255, 0.14), transparent 55%),
    radial-gradient(70% 55% at 20% 100%, rgba(255, 122, 69, 0.07), transparent 60%),
    var(--page);
}

/* защита текста: слева плотный градиент, снизу — растворение в фон страницы */
.hero-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 4, 10, 0.94) 0%, rgba(2, 4, 10, 0.78) 34%, rgba(2, 4, 10, 0.36) 62%, rgba(2, 4, 10, 0.24) 100%),
    linear-gradient(180deg, rgba(2, 4, 10, 0.55) 0%, transparent 22%, transparent 62%, rgba(2, 4, 10, 0.96) 100%);
}

/* скан-луч по сцене */
.section--hero::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 200px;
  left: -200px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(77, 210, 255, 0.05), rgba(77, 210, 255, 0.18), rgba(159, 233, 255, 0.05), transparent);
  animation: v5-sweep 9s ease-in-out infinite;
}

@keyframes v5-sweep {
  0% { left: -200px; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* HUD-рамка видоискателя */
.hero-hud {
  position: absolute;
  inset: 1.1rem;
  z-index: -1;
  pointer-events: none;
}

.hero-hud__corner {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(77, 210, 255, 0.5);
}

.hero-hud__corner--tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.hero-hud__corner--br {
  right: 0;
  bottom: 0;
  border-top: none;
  border-left: none;
}

.hero-hud__readout {
  position: absolute;
  top: 0.35rem;
  right: 0.2rem;
  color: rgba(159, 233, 255, 0.66);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

.hero-hud__readout::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 8px var(--hot);
  animation: v5-pulse 2s infinite;
}

.section--hero .section__header {
  max-width: 46rem;
  margin-bottom: 1.3rem;
}

.section--hero h1 {
  max-width: 44rem;
}

.section--hero h1 + p {
  max-width: 34rem;
  color: var(--body-ink);
  font-size: 1.02rem;
  line-height: 1.6;
}

.section--hero .cta-row {
  margin-top: 1.4rem;
}

/* моно-чипы (состав, факты, финальные строки) */
.mono-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
}

.mono-chips span {
  min-width: 0;
  max-width: 100%;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--line);
  background: rgba(5, 9, 14, 0.55);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.hero-composition {
  margin-top: 0;
}

.hero-composition span {
  border-color: rgba(77, 210, 255, 0.25);
  color: var(--cy2);
}

.hero-facts {
  margin-top: 1.2rem;
}

/* направления внизу hero */
.hero-directions {
  display: grid;
  gap: 0.6rem;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.direction-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem 0.85rem;
  border: 1px solid var(--line);
  background: rgba(5, 9, 14, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.direction-chip::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s;
}

.direction-chip:hover {
  border-color: var(--line2);
  background: rgba(10, 15, 22, 0.85);
  transform: translateY(-3px);
}

.direction-chip:hover::after {
  transform: scaleX(1);
}

.direction-chip strong {
  font-family: var(--disp);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.direction-chip span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.direction-chip.is-current {
  border-color: rgba(77, 210, 255, 0.5);
}

.direction-chip.is-current strong {
  color: var(--cy);
}

/* ---------- квиз-баннер v2: слева зов, справа документ-награда ---------- */
.section--quiz-banner {
  background:
    radial-gradient(90% 130% at 8% 50%, rgba(255, 122, 69, 0.07), transparent 55%),
    radial-gradient(70% 120% at 92% 20%, rgba(77, 210, 255, 0.08), transparent 60%),
    var(--bg2);
  border-top: 1px solid rgba(255, 122, 69, 0.3);
}

.section--quiz-banner .section__inner {
  padding-block: 3.2rem;
}

.section--quiz-banner h2 {
  max-width: 44rem;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  font-weight: 700;
  line-height: 1.22;
}

.section--quiz-banner .section__header {
  margin-bottom: 1.4rem;
}

.quiz-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.8rem;
  align-items: start;
}

.quiz-banner__main,
.quiz-topics {
  min-width: 0;
}

.quiz-banner__lead {
  max-width: 38rem;
  margin: 0 0 1.1rem;
  color: var(--body-ink);
}

.quiz-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}

.quiz-topics__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--body-ink);
  font-size: 0.88rem;
  font-weight: 600;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.quiz-topics__chip b {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
}

.quiz-banner__note {
  margin: 0.9rem 0 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* документ «Предварительная оценка»: общий компонент баннера и модалки */
.quiz-doc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.7rem;
  align-content: start;
  padding: 1.9rem 1.3rem 1.2rem;
  border: 1px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(77, 210, 255, 0.045), transparent 45%),
    var(--panel);
  text-align: left;
}

button.quiz-doc {
  width: 100%;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

button.quiz-doc:hover {
  border-color: var(--hot);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 122, 69, 0.16);
  transform: translateY(-3px);
}

.quiz-doc__tab {
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 0.32rem 0.7rem;
  background: var(--hot);
  color: var(--hot-ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.quiz-doc__id {
  justify-self: end;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.quiz-doc__row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(5.5rem, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 1.5rem;
}

.quiz-doc__key {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.quiz-doc__val {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.quiz-doc__redacted {
  display: block;
  height: 0.85rem;
  border: 1px dashed rgba(77, 210, 255, 0.28);
  background: repeating-linear-gradient(-45deg, rgba(77, 210, 255, 0.13) 0 5px, rgba(77, 210, 255, 0.03) 5px 11px);
}

.quiz-doc__row--current .quiz-doc__redacted {
  border-color: var(--hot);
  background: repeating-linear-gradient(-45deg, rgba(255, 122, 69, 0.2) 0 5px, rgba(255, 122, 69, 0.05) 5px 11px);
  animation: v5-doc-current 1.3s ease-in-out infinite alternate;
}

@keyframes v5-doc-current {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.quiz-doc__row--filled .quiz-doc__key {
  color: var(--cy);
}

.quiz-doc__divider {
  display: block;
  height: 0;
  margin: 0.3rem 0;
  border-top: 1px dashed var(--line2);
}

.quiz-doc__stamp {
  margin-top: 0.4rem;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

button.quiz-doc .quiz-doc__stamp {
  color: var(--hot);
}

@media (min-width: 52rem) {
  .quiz-banner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.4rem;
  }
}

/* финальный CTA: свечение сверху */
.section--final-cta {
  background: radial-gradient(80% 100% at 50% 0%, rgba(77, 210, 255, 0.06), transparent 60%), var(--bg);
}

/* слоты-заглушки (иллюстрации в списках) */
.slot-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot-list li {
  min-height: 4.25rem;
  padding: 0.9rem;
  border: 1px dashed var(--line2);
  background: rgba(255, 255, 255, 0.02);
  color: var(--body-ink);
  font-size: 0.9rem;
}

.slot-list li > span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- кнопки ---------- */

.cta-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.6rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 100%;
  min-height: 3.1rem;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--line2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--disp);
  font-size: 0.88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: center;
  transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.button:hover {
  border-color: var(--cy);
  color: var(--cy);
  background: transparent;
}

.button--primary {
  border-color: var(--hot);
  background: var(--hot);
  color: var(--hot-ink);
}

.button--primary:hover {
  border-color: var(--hot);
  background: var(--hot);
  color: var(--hot-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--hot-glow);
}

.button:disabled {
  cursor: wait;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* ---------- кейсы: карточка-досье с фото и результатом ---------- */

.case-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.case-list + .case-list {
  margin-top: 1rem;
}

.case-list:not([data-expanded="true"]) .case-card:nth-child(n + 4) {
  display: none;
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.case-card:hover,
.case-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(77, 210, 255, 0.45);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.case-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(140deg, #0b1119, #0d141d);
}

.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.case-card:hover .case-card__media img {
  transform: scale(1.045);
}

.case-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 4, 10, 0.12), transparent 40%, rgba(2, 4, 10, 0.42));
}

.case-card__media--empty {
  aspect-ratio: auto;
  min-height: 3.4rem;
}

.case-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.34rem 0.6rem;
  background: var(--cy);
  color: var(--cy-ink);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.55rem;
  padding: 1.05rem 1.15rem 0.4rem;
}

.case-card h3 {
  margin-bottom: 0;
  font-size: 1.02rem;
}

.case-card__metric {
  position: relative;
  margin: 0;
  padding-left: 0.75rem;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.case-card__metric::before {
  content: '';
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  left: 0;
  width: 3px;
  background: var(--cy);
  box-shadow: 0 0 8px var(--cy-glow);
}

.case-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: auto;
  padding: 0.85rem 1.15rem 1.05rem;
}

.case-card__price {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.case-card__open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-family: var(--disp);
  font-size: 0.78rem;
  font-weight: 700;
  transition: color 0.2s;
}

.case-card__arrow {
  display: inline-block;
  width: 0.85rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.2s;
}

.case-card__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.case-card:hover .case-card__open {
  color: var(--cy);
}

.case-card:hover .case-card__arrow {
  width: 1.25rem;
}

.show-more {
  margin-top: 1.1rem;
}

/* история кейса в модалке */
.case-story h3 {
  max-width: 34rem;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

.case-story p {
  max-width: 42rem;
  color: var(--body-ink);
  font-size: 1rem;
  line-height: 1.62;
}

.case-story p strong {
  color: var(--ink);
}

/* ---------- аккордеоны и процесс ---------- */

.accordion-list,
.process-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
}

.accordion-list details,
.process-list details,
.accordion-list summary,
.process-list summary {
  min-width: 0;
  overflow-wrap: anywhere;
}

.accordion-list details p,
.process-list details p {
  padding: 0 0.95rem 0.95rem;
  margin: 0;
  max-width: 44rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- плавающая кнопка связи ---------- */

.floating-contact {
  position: fixed;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 25;
}

.floating-contact .button {
  border-color: var(--hot);
  background: var(--hot);
  color: var(--hot-ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 6px 20px var(--hot-glow);
}

.floating-contact .button:hover {
  transform: translateY(-2px);
  color: var(--hot-ink);
}

.phone-icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: var(--bg2);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.phone-icon:hover {
  border-color: var(--cy);
  color: var(--cy);
}

.site-footer {
  padding: 2.4rem 1.25rem 7rem;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.7;
  text-align: center;
}

/* ---------- модалки ---------- */

.modal {
  width: min(calc(100% - 1rem), 46rem);
  max-height: calc(100dvh - 1rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 0;
  background: var(--bg2);
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.modal::backdrop {
  background: rgba(2, 4, 8, 0.8);
  backdrop-filter: blur(8px);
}

.modal__shell {
  position: relative;
  padding: 2.9rem 1.25rem 1.4rem;
}

.modal__close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: rgba(2, 4, 8, 0.6);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.3rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.modal__close:hover {
  background: var(--hot);
  border-color: var(--hot);
  color: var(--hot-ink);
}

.modal h2 {
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.16;
}

/* ---------- формы ---------- */

.lead-form {
  display: grid;
  gap: 1.05rem;
}

.lead-form__intro {
  padding-right: 1.8rem;
}

.lead-form__intro p {
  color: var(--muted);
}

.lead-form h2,
.quiz__header h2,
.quiz-result h2 {
  font-size: clamp(1.4rem, 5.5vw, 1.75rem);
}

.form-grid {
  display: grid;
  gap: 0.95rem;
}

.lead-form > label,
.form-grid label {
  display: grid;
  gap: 0.45rem;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lead-form label span,
.reply-channel legend span {
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

input,
textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line2);
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

input:focus,
textarea:focus {
  border-color: var(--cy);
  box-shadow: 0 0 0 1px var(--cy);
}

input::placeholder,
textarea::placeholder {
  color: var(--dim);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--err);
  box-shadow: 0 0 0 1px var(--err);
}

/* свёрнутое необязательное поле: пунктирная строка-приглашение */
.lead-more-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  padding: 0.5rem 0.85rem;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.lead-more-toggle:hover {
  border-color: var(--cy);
  color: var(--ink);
}

.lead-more-toggle > span[aria-hidden] {
  color: var(--cy);
  font-weight: 700;
}

.lead-more-toggle small {
  color: var(--dim);
  font-size: 0.72rem;
}

.lead-more-label {
  display: grid;
  gap: 0.45rem;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reply-channel {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.reply-channel legend {
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reply-channel label {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line2);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.reply-channel label:hover {
  border-color: var(--cy);
  color: var(--cy);
}

.reply-channel label:has(input:checked) {
  border-color: var(--cy);
  background: var(--cy-wash);
  color: var(--cy);
}

/* радио-кружок прячем: состояние канала читается по рамке и фону */
.reply-channel input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.reply-channel label {
  position: relative;
}

.reply-channel label:has(input:focus-visible) {
  outline: 2px solid var(--cy);
  outline-offset: 3px;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* состав обмена + анти-обзвон */
.exchange-slots {
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.exchange-slots p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.exchange-slots p strong,
.exchange-slots p b {
  color: var(--ink);
  font-weight: 600;
}

.form-status {
  min-height: 1.5rem;
  margin: 0;
  font-weight: 600;
}

.form-status[data-state="error"] {
  color: var(--err);
  text-decoration: none;
}

.form-success {
  padding: 1rem 0;
}

.form-success code {
  word-break: break-all;
  font-family: var(--mono);
  color: var(--cy);
}

/* ---------- квиз ---------- */

.quiz-options {
  display: grid;
  gap: 0.7rem;
}

.quiz-option {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.8rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--line2);
  border-radius: 0;
  background: var(--panel);
  color: var(--body-ink);
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

/* вариант с реальной картинкой — широкий медиа-слот */
.quiz-option:has(.quiz-option__media img) {
  grid-template-columns: 5rem 1fr;
}

/* текст плейсхолдера в вариантах не показываем — только штрихованную плитку */
.quiz-option .quiz-option__placeholder {
  display: none;
}

.quiz-option:hover {
  border-color: var(--cy);
  color: var(--cy);
}

.quiz-option[aria-pressed="true"] {
  border: 2px solid var(--cy);
  background: var(--cy-wash);
  color: var(--cy);
}

.quiz-option__media {
  display: grid;
  place-items: center;
  min-height: 3.2rem;
  padding: 0.3rem;
}

.quiz-option__media img {
  width: 100%;
  height: 4rem;
  object-fit: cover;
}

.quiz-option__placeholder {
  padding: 0.3rem;
  color: var(--dim);
  font-size: 0.6rem;
  text-align: center;
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.quiz-status {
  min-height: 1.4rem;
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.quiz-result dl {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.quiz-result dl > div {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 0;
  border: none;
  border-bottom: 1px solid var(--line);
}

.quiz-result dt {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quiz-result dd {
  margin: 0;
  color: var(--body-ink);
  font-size: 0.98rem;
  line-height: 1.5;
}

.quiz-result dl > div:nth-child(2) dd {
  color: var(--hot2);
  font-weight: 600;
}

.quiz-result dl > div:nth-child(3) dd {
  color: var(--cy);
}

/* ---------- шоурум: моно-спеки ---------- */

.showroom-grid > article {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.showroom-grid > article > h3 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

.showroom-grid > article > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.showroom-grid > article > p strong {
  color: var(--ink);
}

.showroom-grid dl {
  display: grid;
  gap: 0;
  margin: 0.2rem 0;
  border-top: 1px solid var(--line);
}

.showroom-grid dl > div {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.15rem 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.showroom-grid dt {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showroom-grid dd {
  min-width: 0;
  margin: 0;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.showroom-grid dd + dd {
  grid-column: 2;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8rem;
}

/* content-grid (доверие, экспертиза, партнёрский пакет) */
.content-grid > article {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.content-grid > article h3 {
  font-size: 0.98rem;
}

.content-grid > article p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* артефакт-образец: ссылка */
.artifact-open-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: max-content;
  max-width: 100%;
  color: var(--cy);
  border-bottom: 1px solid rgba(77, 210, 255, 0.4);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: border-color 0.2s;
}

.artifact-open-link:hover {
  border-bottom-color: var(--cy);
}

/* ---------- адаптив ---------- */

@media (min-width: 48rem) {
  body {
    padding-bottom: 0;
  }

  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .section__inner {
    padding: 6rem 2.75rem;
  }

  .section--hero .section__inner {
    padding-block: 7rem;
  }

  .section--quiz-banner .section__inner {
    padding-block: 3.2rem;
  }

  .section__header {
    margin-bottom: 2.6rem;
  }

  .slot-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* планшет: 2 колонки кейсов и 3 чипа направлений — «Комплектность и сборка»
     и длинные заголовки кейсов не влезали в 5/3-колоночную сетку (P2-19, P2-20) */
  .case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-directions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quiz-banner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 2.4rem;
  }

  .quiz-banner__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-list:not([data-expanded="true"]) .case-card:nth-child(n + 4) {
    display: flex;
  }

  .show-more {
    display: none;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reply-channel {
    grid-template-columns: repeat(3, max-content);
  }

  .reply-channel legend {
    grid-column: 1 / -1;
  }

  .quiz-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal__shell {
    padding: 3rem 2.4rem 2.2rem;
  }

  .floating-panel {
    right: 1.25rem;
    bottom: 1.25rem;
    left: auto;
    width: min(30rem, calc(100% - 2.5rem));
  }

  .site-footer {
    padding-bottom: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .section--hero::after {
    animation: none;
    display: none;
  }

  .eyebrow::before {
    animation: none;
  }

  .button--primary:hover {
    transform: none;
  }

  .case-card:hover,
  .branch-card:hover {
    transform: none;
  }
}

/* ============================================================
   Интерактивы (структурный слой + палитра темы)
   ============================================================ */

.interactive-placeholder--live {
  --interactive-ink: var(--ink);
  --interactive-surface: var(--panel);
  --interactive-surface-soft: #0a0f16;
  --interactive-line: var(--line2);
  --interactive-muted: var(--muted);
  --interactive-accent: var(--hot);
  --interactive-active: #17394a;
  --interactive-success: var(--ok);
  --interactive-warning: var(--warn);
  --interactive-error: var(--err);
  display: block;
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: none;
  background: none;
  color: var(--interactive-ink);
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: normal;
  text-align: start;
}

.interactive-placeholder--live [hidden] {
  display: none;
}

.interactive-live,
.interactive-fallback {
  width: 100%;
}

.interactive-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.interactive-state-copy {
  color: var(--body-ink);
}

.interactive-progress {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inspection-frame__canvas,
.kit-frame,
.factory-map__stage {
  position: relative;
  width: 100%;
}

.inspection-frame__canvas {
  overflow: hidden;
  border: 1px solid var(--interactive-line);
  border-radius: 0;
  background: var(--interactive-surface-soft);
  cursor: crosshair;
}

.inspection-frame__svg,
.kit-frame__svg,
.factory-map__svg,
.code-card__svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--interactive-ink);
}

.technical-backdrop {
  fill: var(--interactive-surface-soft);
  stroke: var(--interactive-line);
}

.technical-grid {
  fill: none;
  stroke: var(--cy);
  stroke-width: 1;
  opacity: 0.08;
}

.tray-shadow,
.casting-shadow,
.package-shadow {
  fill: #000;
  opacity: 0.3;
}

.product-surface,
.kit-tray {
  fill: var(--interactive-surface);
  stroke: var(--muted);
  stroke-width: 4;
}

.product-line,
.seal-line,
.tray-well,
.label-surface path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 4;
  opacity: 0.58;
}

.tray-well {
  fill: var(--interactive-surface-soft);
  stroke-width: 3;
}

.label-surface rect {
  fill: var(--interactive-surface);
  stroke: var(--muted);
  stroke-width: 4;
}

.defect-mark {
  fill: none;
  stroke: var(--interactive-error);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detection-box {
  fill: none;
  stroke: var(--cy);
  stroke-width: 7;
  stroke-dasharray: 18 9;
  opacity: 0;
  transition: opacity 160ms ease;
  filter: drop-shadow(0 0 6px var(--cy-glow));
}

.inspection-frame__canvas.is-detected .detection-box {
  opacity: 1;
}

.demo-plaque rect {
  fill: var(--bg2);
  stroke: var(--line2);
}

.demo-plaque text {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.demo-plaque--small text {
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* скан-линия: голубая (роль «зрение») */
.scan-line {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.28rem;
  background: var(--cy);
  box-shadow: 0 0 1.25rem var(--cy-glow), 0 0 0.4rem var(--cy);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.inspection-frame__canvas.is-scanning .scan-line {
  animation: v5-scan-frame 850ms ease-in-out both;
}

@keyframes v5-scan-frame {
  0% { opacity: 0; transform: translateY(-100%); }
  12%, 88% { opacity: 0.88; }
  100% { opacity: 0; transform: translateY(11200%); }
}

.defect-zone {
  position: absolute;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  cursor: crosshair;
}

.defect-zone--tray {
  top: 30%;
  left: 80%;
  width: 11%;
  height: 37%;
}

.defect-zone--casting {
  top: 16%;
  left: 69%;
  width: 13%;
  height: 29%;
}

.defect-zone--label {
  top: 29%;
  left: 19%;
  width: 31%;
  height: 40%;
}

.inspection-frame[data-answer-state="correct"] .inspection-frame__canvas {
  border-color: var(--interactive-success);
}

.inspection-frame[data-answer-state="wrong"] .inspection-frame__canvas {
  border-color: var(--interactive-warning);
}

.interactive-feedback {
  display: grid;
  gap: 0.45rem;
  min-height: 1.5rem;
  margin-top: 0.8rem;
}

.interactive-feedback p,
.interactive-final p {
  margin-bottom: 0;
}

.interactive-final {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--interactive-line);
  border-left: 3px solid var(--cy);
  border-radius: 0;
  background: var(--interactive-surface);
}

.interactive-disclaimer {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.6;
}

/* игра codes */
.code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.code-card {
  position: relative;
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid var(--interactive-line);
  border-radius: 0;
  background: var(--interactive-surface);
  color: var(--interactive-ink);
  cursor: pointer;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: start;
  transition: border-color 0.18s, transform 0.18s;
}

.code-card:hover {
  border-color: var(--cy);
  transform: translateY(-2px);
}

.code-card[data-choice-state="selected"] {
  border-width: 3px;
  border-color: var(--interactive-warning);
}

.code-card[data-choice-state="correct"] {
  border-width: 3px;
  border-color: var(--interactive-success);
}

.code-card__mark {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: none;
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--interactive-surface);
}

.code-card[data-choice-state] .code-card__mark {
  display: block;
}

.code-card[data-choice-state="correct"] .code-card__mark::after {
  content: "✓";
  display: grid;
  place-items: center;
  color: var(--interactive-success);
}

.code-label {
  fill: #e8edf2;
  stroke: var(--interactive-line);
  stroke-width: 2;
}

.code-modules {
  fill: #10151c;
}

.code-card__svg--c .code-modules {
  opacity: 0.24;
}

.code-effect--glare {
  fill: none;
  stroke: #ffffff;
  stroke-width: 24;
  stroke-linecap: round;
  opacity: 0.78;
}

.code-effect--dirt {
  fill: #4a4f56;
  stroke: #4a4f56;
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.72;
}

/* игра assembly */
.kit-start {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.kit-observation,
.kit-result,
.kit-question {
  display: grid;
  gap: 0.8rem;
}

.kit-timer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem 0.75rem;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
}

.kit-timer__track {
  grid-column: 1 / -1;
  height: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--interactive-line);
  border-radius: 0;
  background: var(--interactive-surface-soft);
}

.kit-timer__track span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cy);
  box-shadow: 0 0 10px var(--cy-glow);
  transform-origin: left center;
}

.kit-observation.is-running .kit-timer__track span {
  animation: v5-kit-timer 3s linear forwards;
}

@keyframes v5-kit-timer {
  to { transform: scaleX(0); }
}

.kit-frame {
  border: 1px solid var(--interactive-line);
  border-radius: 0;
  background: var(--interactive-surface-soft);
}

.kit-cell > rect {
  fill: var(--interactive-surface-soft);
  stroke: var(--interactive-line);
  stroke-width: 3;
}

.kit-cell text {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

.kit-part {
  fill: var(--interactive-active);
  stroke: var(--cy);
  stroke-width: 2;
}

.kit-cell--empty > rect {
  stroke-dasharray: 8 6;
}

.kit-detection {
  fill: none;
  stroke: var(--interactive-error);
  stroke-width: 7;
  stroke-dasharray: 16 8;
}

.kit-answer[aria-pressed="true"] {
  border-width: 3px;
}

.kit-verdict {
  color: var(--cy);
  font-family: var(--mono);
  font-weight: 500;
}

/* карта производства: иллюстрация + живые точки */
.factory-map__stage {
  min-width: 0;
  max-width: 100%;
  min-height: 16rem;
}

.factory-map__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--interactive-line);
  background: var(--interactive-surface-soft);
}

.factory-map__img--empty {
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(77, 210, 255, 0.07), transparent 60%),
    var(--interactive-surface-soft);
}

.factory-map__points {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.factory-map__point {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 5vw, 3.25rem);
  height: clamp(2.25rem, 5vw, 3.25rem);
  padding: 0;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--hot);
  color: var(--hot-ink);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: background 0.2s;
}

.factory-map__point span {
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background: var(--hot-ink);
}

.factory-map__point::after {
  position: absolute;
  inset: -0.45rem;
  border: 1px solid var(--hot);
  border-radius: 50%;
  content: "";
  animation: v5-map-beacon 1.8s ease-out infinite;
}

@keyframes v5-map-beacon {
  from { opacity: 0.8; transform: scale(0.72); }
  to { opacity: 0; transform: scale(1.25); }
}

.factory-map__point[aria-pressed="true"] {
  background: var(--cy);
  box-shadow: 0 0 0 0.3rem var(--cy-wash), 0 0 18px var(--cy-glow);
}

.factory-map__point[aria-pressed="true"] span {
  background: var(--cy-ink);
}

.factory-map__point--receiving { top: 28%; left: 13%; }
.factory-map__point--line { top: 28%; left: 36%; }
.factory-map__point--filling { top: 28%; left: 72%; }
.factory-map__point--marking { top: 66%; left: 47%; }
.factory-map__point--packaging { top: 68%; left: 17%; }
.factory-map__point--warehouse { top: 63%; left: 76%; }
.factory-map__point--shipping { top: 76%; left: 90%; }

/* карточка участка встаёт РЯДОМ с точкой: координаты выставляет JS,
   тут только внешний вид + границы */
.factory-map__card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 0.55rem;
  width: min(19rem, 88%);
  padding: 0.95rem 1.05rem 1.05rem;
  border: 1px solid var(--line2);
  border-top: 2px solid var(--cy);
  border-radius: 0;
  background: rgba(6, 10, 18, 0.96);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);
}

.factory-map__card .eyebrow {
  margin: 0;
  padding-right: 1.8rem;
}

.factory-map__card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.factory-map__card .button {
  width: max-content;
  padding-block: 0.5rem;
  text-decoration: none;
}

.factory-map__card-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s;
}

.factory-map__card-close:hover {
  border-color: var(--hot);
  color: var(--hot);
}

@media (min-width: 48rem) {
  .interactive-progress {
    align-items: center;
  }

  .code-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .interactive-progress {
    display: grid;
  }

  /* QR-игра: 2×2, чтобы все четыре варианта были видны разом */
  .code-grid {
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .code-card {
    padding: 0.5rem;
  }

  .code-card__prompt {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .factory-labels {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inspection-frame__canvas.is-scanning .scan-line,
  .kit-observation.is-running .kit-timer__track span,
  .factory-map__point::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }

  .detection-box {
    transition: none;
  }
}

/* ============================================================
   Слой компонентов v2 (переработка 11.07: «единый организм»)
   ============================================================ */

/* номер секции — кадр плёнки, тонкая нить через страницу */
.section__inner {
  position: relative;
}

.section-index {
  position: absolute;
  top: 3rem;
  right: 1.25rem;
  color: rgba(255, 255, 255, 0.07);
  font-family: var(--disp);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.section[id] {
  scroll-margin-top: 4.5rem;
}

/* ---------- ссылки-чипы и строки действий ---------- */
.link-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 0.55rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--cy);
  cursor: pointer;
  font-family: var(--disp);
  font-size: 0.78rem;
  font-weight: 700;
  transition: border-color 0.2s, background 0.2s;
}

.link-chip:hover {
  border-color: var(--cy);
  background: var(--cy-wash);
}

.action-line {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- оффер: подарки + образец ---------- */
.offer-layout {
  display: grid;
  gap: 2rem;
}

.offer-lead {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.55;
}

.gift-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gift-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.2s, transform 0.2s;
}

.gift-item:hover {
  border-color: var(--line2);
  transform: translateX(4px);
}

.gift-item__num {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid rgba(255, 122, 69, 0.5);
  color: var(--hot);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
}

.gift-item__text strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-family: var(--disp);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.gift-item__text {
  min-width: 0;
}

.gift-item__text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.offer-layout__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 1rem;
  align-content: start;
}

.artifact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.7rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  background: var(--bg2);
}

.artifact-card__label {
  min-width: 0;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.artifact-card__caption {
  margin: 0;
  color: var(--dim);
  font-size: 0.82rem;
  line-height: 1.5;
}

.offer-foot {
  margin-top: 1.6rem;
}

.offer-foot .cta-row {
  margin-top: 0;
}

/* ---------- выносные плашки ---------- */
.callout-plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.5rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cy);
  background: var(--panel);
}

.callout-plate__label {
  min-width: 0;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.callout-plate p {
  margin: 0;
  color: var(--body-ink);
  font-size: 0.92rem;
  line-height: 1.6;
}

.honesty-plate {
  max-width: 46rem;
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.05rem;
  border: 1px dashed rgba(255, 180, 84, 0.35);
  background: rgba(255, 180, 84, 0.04);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---------- карточки с индексами (экспертиза и пр.) ---------- */
.content-grid > article {
  position: relative;
}

.card-index {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.content-grid--expertise {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.content-grid--expertise > article {
  gap: 0.6rem;
  padding: 1.35rem 1.4rem 1.45rem;
  border-top: 2px solid transparent;
  transition: border-color 0.25s, transform 0.25s;
}

.content-grid--expertise > article:hover {
  border-top-color: var(--cy);
  transform: translateY(-3px);
}

.content-grid--expertise > article h3 {
  padding-right: 2rem;
}

.content-grid--expertise > article p {
  color: var(--body-ink);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---------- таймлайн процесса ---------- */
.timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 52rem;
}

.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* 320px: текст сжимается, не выталкивая страницу вбок (P2-12) */
  gap: 1.15rem;
  padding: 1.25rem 0;
}

.timeline__step::before {
  content: '';
  position: absolute;
  top: 3.55rem;
  bottom: -0.1rem;
  left: 1.24rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(77, 210, 255, 0.4), var(--line));
}

.timeline__step:last-child::before {
  display: none;
}

.timeline__node {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(77, 210, 255, 0.45);
  background: var(--panel);
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
}

.timeline__body h3 {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.05rem;
}

.timeline__body p {
  margin: 0;
  max-width: 44rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.62;
}

/* ---------- доверие: баннер + цифры + терминал ---------- */
.trust-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.3rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(77, 210, 255, 0.05), transparent 55%), var(--panel);
}

.trust-banner__mark {
  min-width: 0;
  max-width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(77, 210, 255, 0.45);
  color: var(--cy);
  font-family: var(--disp);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  overflow-wrap: break-word;
}

.trust-banner > div {
  min-width: 0;
}

.trust-banner h3 {
  margin: 0 0 0.25rem;
  font-size: 1.08rem;
}

.trust-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.stat-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.stat-card__value {
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.stat-card__label {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stat-card h3 {
  margin: 0;
  font-size: 0.98rem;
}

.stat-card p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* тест-зона: конкретное место с фото — «сюда приезжают ваши образцы» */
.testzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.testzone__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 13rem;
  object-fit: cover;
}

.testzone__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.7rem;
  align-content: start;
  padding: 1.35rem 1.4rem 1.45rem;
}

.testzone__label {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.testzone__body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.testzone__body > p {
  margin: 0;
  color: var(--body-ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.testzone__recent {
  min-width: 0;
  margin-top: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line2);
}

.testzone__recent-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.testzone__recent ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testzone__recent li {
  position: relative;
  padding-left: 1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.testzone__recent li::before {
  content: '';
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--cy);
}

@media (min-width: 48rem) {
  .testzone {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ---------- уровни/шоурум ---------- */
.showroom-label {
  margin: 2.2rem 0 1rem;
  font-size: 1.05rem;
}

.level-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.45rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.level-tag {
  width: max-content;
  max-width: 100%;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(77, 210, 255, 0.4);
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.level-head h3 {
  margin: 0;
  font-size: 1.12rem;
}

.level-price {
  min-width: 0;
  color: var(--hot2);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  overflow-wrap: break-word;
}

.level-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.4rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  background: var(--bg2);
}

.level-hero__label {
  min-width: 0;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.level-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.level-hero p strong {
  color: var(--ink);
}

.level-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.35rem;
  padding: 0.95rem 1.05rem;
  border: 1px dashed var(--line2);
}

.level-why span {
  min-width: 0;
  color: var(--hot2);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.level-why p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.camera-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--cy);
  background: var(--cy-wash);
}

.camera-view__label {
  min-width: 0;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.camera-view p {
  margin: 0;
  color: var(--body-ink);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* состав поста: чипы 01–08 */
.kit-strip {
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 0.7rem;
}

.kit-strip__label {
  min-width: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.kit-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.kit-strip__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--body-ink);
  font-size: 0.84rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.kit-strip__chip b {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
}

.kit-strip__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.fact-lines {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.3rem;
}

.fact-lines .mono-chips {
  margin: 0;
}

/* ---------- финальный CTA ---------- */
.section--final-cta {
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255, 122, 69, 0.07), transparent 60%),
    var(--bg);
  border-top: 1px solid rgba(255, 122, 69, 0.25);
}

.section--final-cta .section__inner {
  max-width: 56rem;
  text-align: center;
}

.section--final-cta .section__header {
  max-width: none;
  margin-inline: auto;
}

.section--final-cta h2 {
  max-width: none;
  margin-inline: auto;
}

.final-lead {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.section--final-cta .cta-row {
  justify-content: center;
}

.section--final-cta .mono-chips {
  justify-content: center;
  margin-top: 1.5rem;
}

.section--final-cta .section-index {
  display: none;
}

/* ---------- калькулятор ---------- */
.calc {
  display: grid;
  gap: 1.4rem;
  max-width: 62rem;
}

.calc__sliders {
  display: grid;
  gap: 1.3rem;
  padding: 1.5rem 1.5rem 1.7rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.calc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem 1rem;
  align-items: baseline;
}

.calc-row label {
  color: var(--body-ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.calc-row__value {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: right;
}

.calc-range {
  grid-column: 1 / -1;
  width: 100%;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.calc-range:focus {
  box-shadow: none;
}

.calc-range::-webkit-slider-runnable-track {
  height: 4px;
  border: none;
  background: linear-gradient(90deg, var(--cy) 0 var(--fill, 50%), rgba(255, 255, 255, 0.14) var(--fill, 50%) 100%);
}

.calc-range::-moz-range-track {
  height: 4px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
}

.calc-range::-moz-range-progress {
  height: 4px;
  background: var(--cy);
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: calc((1.35rem - 4px) / -2);
  border: 2px solid var(--cy);
  border-radius: 0;
  background: var(--bg2);
  box-shadow: 0 0 0 4px rgba(2, 4, 10, 0.7), 0 0 14px var(--cy-glow);
  transition: background 0.15s, transform 0.15s;
}

.calc-range::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--cy);
  border-radius: 0;
  background: var(--bg2);
  box-shadow: 0 0 0 4px rgba(2, 4, 10, 0.7), 0 0 14px var(--cy-glow);
}

.calc-range:hover::-webkit-slider-thumb,
.calc-range:active::-webkit-slider-thumb {
  background: var(--cy);
  transform: scale(1.08);
}

.calc-range:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 4px;
}

.calc__result {
  display: grid;
  gap: 0.55rem;
  padding: 1.5rem;
  border: 1px solid rgba(77, 210, 255, 0.3);
  background: linear-gradient(180deg, rgba(77, 210, 255, 0.06), transparent 65%), #04070c;
}

.calc__result-label {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.calc__value {
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.calc__note {
  max-width: 44rem;
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.calc__assumptions {
  margin-top: 0.6rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.calc__assumptions summary {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc__assumption-fields {
  display: grid;
  gap: 0.85rem;
  padding: 0.2rem 0.95rem 1rem;
}

.calc__assumptions-note {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.calc__assumption-fields label {
  display: grid;
  gap: 0.4rem;
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- игры: фотослой ---------- */
.inspection-frame__photo,
.kit-frame__photo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.detection-overlay,
.kit-detection-overlay {
  position: absolute;
  border: 2px solid var(--cy);
  box-shadow: 0 0 0 2px rgba(2, 4, 10, 0.4), 0 0 18px var(--cy-glow), inset 0 0 14px rgba(77, 210, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.inspection-frame__canvas.is-detected .detection-overlay {
  opacity: 1;
}

.kit-detection-overlay {
  opacity: 1;
  border-color: var(--err);
  box-shadow: 0 0 0 2px rgba(2, 4, 10, 0.4), 0 0 18px rgba(255, 93, 93, 0.4);
}

.kit-frame {
  position: relative;
}

.game-timer {
  color: var(--cy);
}

.game-timer output {
  font-weight: 500;
}

.code-card__photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.code-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.code-card:hover .code-card__photo img {
  transform: scale(1.6);
}

.code-card__prompt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.code-card__verdict {
  display: none;
  padding: 0.35rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.code-card[data-verdict="read"] .code-card__verdict {
  display: block;
  border: 1px solid rgba(85, 230, 165, 0.4);
  color: var(--ok);
}

.code-card[data-verdict="noread"] .code-card__verdict {
  display: block;
  border: 1px solid rgba(255, 93, 93, 0.45);
  color: var(--err);
}

/* фолбэк-сетка карты без JS */
.production-map {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0;
}

@media (max-width: 47.94rem) {
  /* компактная шапка: логотип + текущий раздел + телефон в одну строку;
     «Написать» здесь лишняя — есть плавающая кнопка и CTA в каждом экране */
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
  }

  .header-contacts > .button {
    display: none;
  }

  /* маячки карты компактнее, чтобы не давили схему */
  .factory-map__point {
    width: 1.7rem;
    height: 1.7rem;
    border-width: 1.5px;
  }

  .section-index {
    top: 2.2rem;
    right: 1rem;
    font-size: 2.1rem;
  }

  .hero-bg img {
    object-position: 72% 50%;
  }

  .hero-bg__scrim {
    background:
      linear-gradient(180deg, rgba(2, 4, 10, 0.82) 0%, rgba(2, 4, 10, 0.55) 45%, rgba(2, 4, 10, 0.88) 100%);
  }

  .hero-directions {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .direction-chip {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
  }

  .direction-chip span {
    font-size: 0.74rem;
  }

  .trust-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

  .timeline__step {
    gap: 0.85rem;
  }

  .code-card:hover .code-card__photo img {
    transform: none;
  }
}

/* совсем узкий экран: телефон в шапке сжимается до иконки-трубки */
@media (max-width: 32.44rem) {
  .header-phone__num {
    display: none;
  }
}

/* мобильная форма заявки плотнее — цель: один экран без прокрутки */
@media (max-width: 47.94rem) {
  .lead-form {
    gap: 0.8rem;
  }

  .lead-form__intro {
    padding-right: 1.6rem;
  }

  .lead-form__intro p,
  .lead-form__intro li {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .lead-form input,
  .lead-form textarea {
    padding: 0.68rem 0.75rem;
  }

  .form-grid {
    gap: 0.7rem;
  }

  .exchange-slots {
    gap: 0.4rem;
    padding: 0.7rem 0.8rem;
  }

  .exchange-slots p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .form-status {
    min-height: 0;
  }
}

@media (min-width: 64rem) {
  .case-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-directions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .offer-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 2.6rem;
  }

  .content-grid--expertise {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-feed__cursor,
  .hero-hud__readout::before,
  .quiz-doc__row--current .quiz-doc__redacted {
    animation: none;
  }

  .case-card:hover .case-card__media img,
  .code-card:hover .code-card__photo img,
  .direction-chip:hover,
  .gift-item:hover {
    transform: none;
  }
}

.offer-photo {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* варианты квиза без фото: прячем штрихованный слот */
.quiz-option .media-placeholder {
  display: none;
}

.quiz-option:not(:has(.quiz-option__media img)) {
  grid-template-columns: 1fr;
}

.quiz-option:not(:has(.quiz-option__media img)) .quiz-option__media {
  display: none;
}

/* заглушка внутри светлого «листа» артефакта — без тёмной штриховки */
.artifact-preview-slot .media-placeholder {
  border: none;
  background: none;
  color: #8a93a0;
  max-height: none;
}

/* плавающая кнопка: появляется после героя */
.floating-contact {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}

body.past-hero .floating-contact {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* слоты под фото железа: компактные, не давят */
.showroom-grid .media-placeholder {
  min-height: 6.5rem;
  max-height: 8.5rem;
  font-size: 0.64rem;
}

.race-line,
.race-line--total {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.race-line--total {
  font-size: 0.8rem;
}

/* ============================================================
   Слой v3 (11.07, волна 2): вердикты игр, старт-гейт, квиз-модалка,
   масштабирование кейсов, ошибки полей, служебное
   ============================================================ */

/* скрытое — скрыто, что бы ни говорил layout (FORM-002) */
[hidden] {
  display: none !important;
}

/* изображения никогда не распирают контейнер */
.case-story img,
.artifact-preview img,
.modal img {
  max-width: 100%;
  height: auto;
}

/* якорные прокрутки не ныряют под шапку */
.inspection-frame,
.interactive-final,
.kit-result,
.verdict-plate,
[data-inspection-frames],
[data-inspection-frame],
[data-kit-result],
.game-start {
  scroll-margin-top: 5.5rem;
}

/* ---------- вердикт игры: заметная плашка результата ---------- */
.verdict-plate {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding: 1.05rem 1.15rem 1.15rem;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--cy);
  background:
    linear-gradient(90deg, rgba(77, 210, 255, 0.07), transparent 55%),
    var(--panel);
}

.verdict-plate--miss {
  border-left-color: var(--hot);
  background:
    linear-gradient(90deg, rgba(255, 122, 69, 0.08), transparent 55%),
    var(--panel);
}

.verdict-plate__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.verdict-plate__badge {
  padding: 0.3rem 0.6rem;
  background: var(--cy);
  color: var(--cy-ink);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.verdict-plate--miss .verdict-plate__badge {
  background: var(--hot);
  color: var(--hot-ink);
}

.verdict-plate__race {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.verdict-plate__line {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}

.verdict-plate__note {
  margin: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
}

/* ---------- старт-гейт игры: постер с размытым кадром, таймер ждёт ---------- */
.game-start {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--hot);
  background:
    linear-gradient(90deg, rgba(255, 122, 69, 0.06), transparent 60%),
    var(--panel);
}

.game-start--poster {
  min-height: clamp(15rem, 34vw, 24rem);
  place-items: center;
}

.game-start__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(9px) brightness(0.42) saturate(0.85);
  transform: scale(1.06);
}

.game-start__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 50% 55%, rgba(2, 4, 10, 0.25), rgba(2, 4, 10, 0.72)),
    linear-gradient(180deg, rgba(2, 4, 10, 0.35), rgba(2, 4, 10, 0.55));
}

.game-start__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  gap: 1rem;
  justify-items: center;
  max-width: 32rem;
  text-align: center;
}

.game-start__challenge,
.game-start__meta {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.game-start:not(.game-start--poster) .game-start__content {
  justify-items: start;
  text-align: left;
}

.game-start__challenge {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(2, 4, 10, 0.8);
}

.game-start__meta {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* финал игры — такой же сильный, как вердикты */
.interactive-final {
  margin-top: 1rem;
  padding: 1.3rem 1.4rem 1.45rem;
  border: 1px solid rgba(77, 210, 255, 0.3);
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(77, 210, 255, 0.08), transparent 60%),
    var(--panel);
}

.interactive-final .race-line--total {
  display: inline-block;
  margin: 0 0 0.8rem;
  padding: 0.45rem 0.7rem;
  background: rgba(77, 210, 255, 0.1);
  border: 1px solid rgba(77, 210, 255, 0.35);
  font-size: 0.86rem;
}

/* ---------- квиз-модалка: прогресс + документ ---------- */
.quiz__layout {
  display: grid;
  gap: 1.6rem;
  align-items: start;
}

.quiz__main {
  display: grid;
  gap: 1.05rem;
}

.quiz__progress {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.quiz__progress-step {
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quiz__progress-track {
  position: relative;
  display: block;
  height: 3px;
  background: var(--line2);
  overflow: hidden;
}

.quiz__progress-track i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: linear-gradient(90deg, var(--cy), var(--hot));
  box-shadow: 0 0 10px var(--cy-glow);
  transition: width 0.4s ease;
}

.quiz__progress-hint {
  grid-column: 1 / -1;
  color: var(--hot);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quiz-doc--live {
  gap: 0.55rem;
  min-width: 0;
}

@media (min-width: 52rem) {
  .quiz__layout {
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    gap: 2rem;
  }
}

@media (max-width: 51.98rem) {
  .quiz-doc--live {
    display: none;
  }
}

/* результат квиза как готовый документ */
.quiz-result__doc-head {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: 1.6rem;
  margin-bottom: 0.9rem;
}

.quiz-result__doc-head .quiz-doc__tab {
  top: 0;
  left: 0;
}

.quiz-result__note {
  color: var(--dim);
  font-size: 0.88rem;
}

/* ---------- кейс-модалка: масштабируется, а не прибита ----------
   ширится сам dialog: расширенный внутренний шелл обрезался бы его границей */
.modal:has(.case-story) {
  width: min(94vw, 62rem);
}

.case-story header .eyebrow {
  margin-bottom: 0.4rem;
}

.case-story header p:not(.eyebrow) {
  margin: 0.5rem 0 0;
  color: var(--cy);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.case-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
}

@media (min-width: 52rem) {
  /* десктоп: текст читается слева, фото и условия — колонкой справа */
  .case-story {
    display: grid;
    grid-template-areas:
      'header header'
      'body   media'
      'body   table'
      'cta    cta';
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 2.2rem;
  }

  .case-story > header { grid-area: header; }
  .case-story > section { grid-area: body; }
  .case-story > .case-gallery { grid-area: media; align-self: start; grid-template-columns: 1fr; }
  .case-story > .conditions-table { grid-area: table; align-self: start; }
  .case-story > .cta-row { grid-area: cta; }
  .case-story > p { grid-column: 1 / -1; }
}

/* ---------- ошибки полей формы (классы для field-level ошибок) ---------- */
.lead-field__error {
  margin: 0.35rem 0 0;
  color: var(--err, #ff6b6b);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.lead-field__counter {
  justify-self: end;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

/* телефон-плейсхолдер в шапке: просто текст */
.header-phone--pending {
  color: var(--dim);
  font-size: 0.9rem;
}

/* невалидная radio-группа канала ответа: рамки нет, краснеют сами плашки */
.reply-channel.lead-field--invalid label {
  border-color: var(--err, #ff6b6b);
}

/* футер: мини-блок контактов + юрлицо и ссылка на справку о данных */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
}

.site-footer a {
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.site-footer a:hover {
  color: var(--cy);
}

.site-footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  justify-content: center;
}

.site-footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.site-footer a.site-footer__contact {
  color: var(--ink);
  text-decoration: none;
}

.site-footer a.site-footer__contact:hover {
  color: var(--cy);
}

.site-footer__contact--pending {
  color: var(--dim);
}

.site-footer__contact-icon {
  color: var(--cy);
  font-size: 0.95em;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
  justify-content: center;
}

/* изображения в секциях никогда не шире контейнера */
.section__inner img {
  max-width: 100%;
  height: auto;
}

/* фото устройств в карточках шоурума и контент-сетках */
.showroom-grid article img,
.content-grid article img {
  width: 100%;
  height: auto;
  margin-top: 0.9rem;
  border: 1px solid var(--line);
}

/* якорная навигация по секциям не ныряет под шапку */
.section {
  scroll-margin-top: 4.5rem;
}

/* плавающая кнопка на телефоне компактнее */
@media (max-width: 36rem) {
  .floating-contact .button {
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
  }
}

/* ===== раскрытие ветки на месте выбора направления (UX-фикс «рывка», 16.07) ===== */
[data-branch-host] > .section {
  scroll-margin-top: 76px; /* заголовок ветки не ныряет под sticky-шапку */
}

[data-branch-host] {
  animation: branch-in 0.45s ease both;
}

@keyframes branch-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-branch-host] {
    animation: none;
  }
}

/* нижний блок выбора направлений на general: чипы те же, что в hero,
   но без hero-контекста — убираем верхнюю линию-отбивку */
.section--directions .hero-directions {
  margin-top: 0.4rem;
  padding-top: 0;
  border-top: 0;
}