/* ══ banerprint.pro — печать и таблички ════════════════════════════════════
   Светлая тема. Вывески продают свет и ночь — там тёмный фон работает на
   товар. Здесь товар — табличка на стене и печать на бумаге, и смотрят его
   днём: светлый фон честнее показывает цвет и читается быстрее, а человек
   по рекламе решает за полминуты.

   Цвета — только из токенов. Тёмные полосы — навигация по странице:
   «почему мы» и заявка, чтобы глаз ловил, где главное. */

:root {
  /* Светлая тема для всего сайта: общие компоненты (кнопки, поля) берут
     цвета из этих переменных и перекрашиваются сами. */
  --ink: var(--lt-ink);
  --ink-2: var(--lt-ink-2);
  --ink-muted: var(--lt-ink-muted);
  --line: var(--lt-line);
  --line-strong: rgb(15 26 46 / 28%);
  --bg: var(--lt-bg);
  --lh-body: 1.6;
}

body {
  background: var(--lt-bg);
  color: var(--lt-ink);
}

a { color: var(--asp-navy-calm); }

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.wrap--narrow { max-width: var(--container-narrow); }

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asp-blue-deep);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--lt-ink-2);
  max-width: 62ch;
}

.btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-sm);
}

.btn--ghost:hover { background: rgb(41 121 255 / 6%); }

/* ── Шапка ────────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lt-line);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 4rem;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}

.topbar__logo img { width: 7.5rem; height: auto; }

.topbar__dept {
  padding-left: var(--space-3);
  border-left: 1px solid var(--lt-line);
  font-size: var(--fs-sm);
  color: var(--lt-ink-muted);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: clamp(var(--space-3), 1.4vw, var(--space-5));
  margin-inline: auto;
}

.nav a {
  color: var(--lt-ink-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: var(--lt-ink); border-bottom-color: var(--asp-blue); }

.topbar__act {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}

.topbar__tel {
  color: var(--lt-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 1180px) { .topbar__dept { display: none; } }
@media (max-width: 1020px) { .nav { display: none; } .topbar__act { margin-left: auto; } }
@media (max-width: 560px) { .topbar__tel { display: none; } }

/* ── Первый экран ─────────────────────────────────────────────────────────── */

/* Класс не .hero: под этим именем в общем base.css лежит заготовка
   с ограничением ширины, и фон обрезался по бокам. */
.first {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  background:
    radial-gradient(60rem 30rem at 85% 0%, var(--asp-air-100), transparent 70%),
    radial-gradient(40rem 24rem at 0% 100%, rgb(29 233 182 / 10%), transparent 70%),
    var(--lt-bg-2);
  border-bottom: 1px solid var(--lt-line);
}

.first__in {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}

.first h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  margin-bottom: var(--space-5);
}

.first__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.first__sale {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgb(29 233 182 / 16%);
  color: #04574a;
  font-weight: 600;
}

.first__sale b { font-size: var(--fs-lg); }

.page-head__facts,
.first__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-head__facts li,
.first__facts li {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  box-shadow: 0 12px 30px -24px rgb(19 26 45 / 40%);
}

.page-head__facts b,
.first__facts b { font-size: var(--fs-xl); line-height: 1.15; color: var(--lt-ink); }
.page-head__facts span,
.first__facts span { font-size: var(--fs-sm); color: var(--lt-ink-muted); line-height: 1.4; }

@media (max-width: 900px) {
  .first__in { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── Полосы ───────────────────────────────────────────────────────────────── */

.band { padding-block: var(--space-9); }
.band--tint { background: var(--lt-bg); }
.band:not(.band--tint):not(.band--dark) { background: var(--lt-bg-2); }

.band h2 { margin-bottom: var(--space-4); }

/* Тёмная полоса: переопределяем переменные — вложенные кнопки и ссылки
   перекрасятся сами. Каждую строку текста проверяли на контраст:
   переносы между темами — место, где текст пропадает первым. */
.band--dark {
  --ink: #f2fbff;
  --ink-2: #c2d4ea;
  --ink-muted: #9fb0c8;
  --line: rgb(255 255 255 / 14%);
  --line-strong: rgb(255 255 255 / 28%);
  background: var(--asp-navy);
  color: var(--ink);
}

.band--dark .eyebrow { color: var(--asp-teal); }
.band--dark .lead { color: var(--ink-2); }
.band--dark a { color: var(--asp-teal-light); }
/* Кнопки не ссылки по цвету: правило выше красило текст синей кнопки
   в бирюзовый — 3,9:1, ниже порога. */
.band--dark a.btn { color: #fff; }
.band--dark .btn--ghost { color: #fff; }

/* ── Каталог ──────────────────────────────────────────────────────────────── */

.cat {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cat__item a {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  color: var(--lt-ink);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out-quart),
    box-shadow var(--dur) var(--ease-out-quart),
    transform var(--dur) var(--ease-out-quart);
}

.cat__item a:hover {
  border-color: var(--asp-blue);
  box-shadow: 0 18px 40px -28px rgb(41 98 255 / 55%);
  transform: translateY(-2px);
}

.cat__item--main a {
  background: linear-gradient(160deg, var(--asp-air-100), var(--lt-bg-2) 70%);
  border-color: var(--asp-air-400);
}

.cat__ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: rgb(41 121 255 / 10%);
  color: var(--asp-blue-deep);
}

.cat__ico svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cat__item b { font-size: var(--fs-lg); }
.cat__item span { font-size: var(--fs-sm); color: var(--lt-ink-2); line-height: 1.45; }

.cat__item em {
  margin-top: var(--space-2);
  font-style: normal;
  font-weight: 700;
  color: var(--asp-navy-calm);
}

@media (max-width: 900px) { .cat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat { grid-template-columns: 1fr; } }

/* ── Таблички ─────────────────────────────────────────────────────────────── */

/* Виды табличек: слева синяя панель со списком-вкладками, справа карусель.
   Активная карточка по центру, соседние — за ней, повёрнуты и обесцвечены.
   Положение карточки задаёт data-pos: 0 — в центре, −1/1 — соседи,
   x — убрана. Первое положение прописано в разметке, дальше его меняет
   assets/js/vidy.js. */
.vid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  margin-top: var(--space-6);
  border: 1px solid var(--lt-line);
  border-radius: 3rem;
  overflow: hidden;
  background: var(--lt-bg-2);
}

.vid__side {
  display: flex;
  align-items: center;
  padding: var(--space-7) var(--space-6);
  background: var(--asp-blue-deep);
}

.vid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.vid__list button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0.5rem 1.4rem 0.5rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.vid__list button:hover { background: rgb(255 255 255 / 12%); }

.vid__list button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.vid__list button[aria-selected='true'] {
  border-color: #fff;
  background: #fff;
  color: var(--asp-blue-deep);
  box-shadow: 0 12px 28px -14px rgb(9 20 60 / 55%);
}

.vid__num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.vid__list button[aria-selected='true'] .vid__num { background: var(--asp-air-100); color: var(--asp-navy-calm); }

.vid__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 36rem;
  padding: var(--space-6) var(--space-5);
  perspective: 1400px;
  overflow: hidden;
}

.vid__card {
  grid-area: 1 / 1;
  position: relative;
  width: min(24rem, 72%);
  aspect-ratio: 4 / 5;
  border: 8px solid #fff;
  border-radius: 2.25rem;
  overflow: hidden;
  background: var(--asp-navy);
  box-shadow: 0 30px 60px -30px rgb(19 26 45 / 55%);
  transition:
    transform var(--dur-slow) var(--ease-out-quart),
    opacity var(--dur-slow) var(--ease-out-quart),
    filter var(--dur-slow) var(--ease-out-quart);
}

.vid__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Подложка под текст внизу карточки — фото бывают светлыми. */
.vid__card::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgb(8 12 24 / 88%) 70%);
  pointer-events: none;
}

.vid__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-5);
  color: #fff;
}

.vid__tag {
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--asp-navy);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vid__body p {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.35;
}

.vid__body a {
  color: var(--asp-teal-light);
  font-weight: 600;
  text-decoration: none;
}

.vid__body a:hover { text-decoration: underline; }

.vid__card[data-pos='0'] { z-index: 3; }

.vid__card[data-pos='-1'],
.vid__card[data-pos='1'] {
  z-index: 2;
  filter: grayscale(1) brightness(1.05);
  opacity: 0.75;
  cursor: pointer;
}

.vid__card[data-pos='-1'] { transform: translateX(-34%) scale(0.8) rotateY(22deg); }
.vid__card[data-pos='1'] { transform: translateX(34%) scale(0.8) rotateY(-22deg); }

/* Текст у соседей не нужен: он повторяет вкладки и мешает клику. */
.vid__card[data-pos='-1'] .vid__body,
.vid__card[data-pos='1'] .vid__body,
.vid__card[data-pos='-1']::after,
.vid__card[data-pos='1']::after { visibility: hidden; }

.vid__card[data-pos='x'] {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
}

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

@media (max-width: 900px) {
  /* minmax(0, …) обязателен: у простого 1fr нижняя граница — ширина
     содержимого, и лента вкладок растягивала блок втрое шире экрана. */
  .vid { grid-template-columns: minmax(0, 1fr); border-radius: 2rem; }

  /* На телефоне список — лента вкладок с прокруткой вбок. */
  .vid__side { padding: var(--space-4); }

  .vid__list {
    min-width: 0;
    width: 100%;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .vid__list li { flex: none; scroll-snap-align: start; }
  .vid__list button { white-space: nowrap; }
  .vid__stage { min-height: 0; padding: var(--space-5) var(--space-3); }
  .vid__card { width: min(22rem, 78%); }
  .vid__body { padding: var(--space-4); }
  .vid__body p { font-size: var(--fs-base); }
}

.tabl__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  color: var(--lt-ink-2);
}

/* ── Калькулятор ──────────────────────────────────────────────────────────── */

/* Заголовок — над всем блоком; ниже две колонки: слева фото и подсказка
   к выбранному материалу, справа форма. Колонки одной высоты. */
.calc__head { max-width: 46rem; }

.calc {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  margin-top: var(--space-6);
}

.calc__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg);
}

.calc__pic {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--lt-line);
}

.calc__kindtag {
  align-self: flex-start;
  margin: var(--space-2) var(--space-2) 0;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--asp-air-100);
  color: var(--asp-navy-calm);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* .calc__info в селекторе — чтобы перебить общий .band h3 с отступом сверху. */
.calc__info .calc__mname {
  margin: 0 var(--space-2);
  font-size: var(--fs-lg);
  line-height: 1.3;
}

.calc__hint {
  margin: 0 var(--space-2);
  color: var(--lt-ink-2);
  line-height: 1.55;
}

.calc__note {
  margin: auto var(--space-2) 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--lt-line);
  font-size: var(--fs-sm);
  color: var(--lt-ink-muted);
}

.calc__card {
  display: grid;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  box-shadow: 0 24px 60px -40px rgb(19 26 45 / 55%);
}

.calc__kind {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.calc__kind legend {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--lt-ink-2);
}

.calc__kind label { position: relative; }

.calc__kind input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.calc__kind span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--lt-ink-2);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.calc__kind input:checked + span {
  border-color: var(--asp-blue-deep);
  background: var(--asp-blue-deep);
  color: #fff;
}

.calc__kind input:focus-visible + span {
  outline: 2px solid var(--asp-blue);
  outline-offset: 2px;
}

.calc__row {
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--lt-ink-2);
}

.calc__row select,
.calc__row input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-sm);
  background: var(--lt-bg);
  font: inherit;
  font-weight: 400;
  color: var(--lt-ink);
}

.calc__row select:focus,
.calc__row input:focus {
  outline: none;
  border-color: var(--asp-blue);
  box-shadow: 0 0 0 3px rgb(41 121 255 / 18%);
}

/* С клавиатуры нужна именно рамка: подсветка рамки поля при переходе
   по Tab читается хуже, а у формы это единственный ориентир. */
.calc__row select:focus-visible,
.calc__row input:focus-visible {
  outline: 2px solid var(--asp-blue-deep);
  outline-offset: 2px;
}

.calc__size {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calc__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--lt-ink-2);
  cursor: pointer;
}

/* Своё display у метки перебивает атрибут hidden — возвращаем его. */
.calc__check[hidden] { display: none; }

.calc__check input { margin-top: 0.3rem; accent-color: var(--asp-blue-deep); }

.calc__out {
  padding-top: var(--space-4);
  border-top: 1px solid var(--lt-line);
}

.calc__line { margin: 0; font-size: var(--fs-sm); color: var(--lt-ink-muted); }

.calc__sum {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

.calc__sum span { color: var(--lt-ink-2); }

.calc__sum b {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--lt-ink);
  font-variant-numeric: tabular-nums;
}

.calc__warn {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: #fff6db;
  color: #6b4d00;
  font-size: var(--fs-sm);
}

.calc__card .btn { justify-self: start; }

@media (max-width: 900px) { .calc { grid-template-columns: 1fr; gap: var(--space-5); } }
@media (max-width: 480px) { .calc__size { grid-template-columns: 1fr 1fr; } }

/* ── Шаги ─────────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Карточка шага — «стекло» на тёмной полосе. */
.steps li {
  padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%));
  box-shadow: 0 24px 50px -30px rgb(0 0 0 / 80%);
  text-align: center;
}

.steps b {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 10%);
  color: var(--asp-teal-light);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.steps h3 { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-lg); color: #fff; }
.steps p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Круг. Включается скриптом: карточки встают на эллипс вокруг номера
   текущего шага. Текущий — наверху и крупно, остальные по кругу мельче
   и тусклее. Координаты (--x, --y), масштаб и прозрачность считает
   assets/js/steps.js, здесь — только как их применить. */
.steps-ring { position: relative; }

.steps--ring {
  position: relative;
  display: block;
  height: 28rem;
  margin-top: var(--space-5);
}

.steps--ring li {
  position: absolute;
  /* Центр кольца — выше середины: под ним стоит номер шага. */
  top: 11rem;
  left: 50%;
  width: min(19rem, 80%);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1));
  opacity: var(--o, 1);
  z-index: var(--z, 1);
  cursor: pointer;
  transition:
    transform var(--dur-slow) var(--ease-out-quart),
    opacity var(--dur-slow) var(--ease-out-quart);
}

.steps--ring li[aria-current='step'] {
  cursor: default;
  border-color: rgb(255 255 255 / 22%);
  background: linear-gradient(160deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 5%)), var(--asp-navy);
}

/* Дальние карточки — фоном: текст в них не читается и не должен. */
.steps--ring li:not([aria-current='step']) { background-color: var(--asp-navy); }

.steps-ring__num {
  position: absolute;
  top: calc(var(--space-5) + 22rem);
  left: 50%;
  z-index: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.steps-ring__num b {
  font-size: clamp(3.5rem, 3rem + 3vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.steps-ring__num span { color: var(--ink-muted); font-size: var(--fs-sm); }

.steps-ring__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.steps-ring__nav[hidden],
.steps-ring__num[hidden] { display: none; }

.steps-ring__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: rgb(255 255 255 / 5%);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.steps-ring__arrow:hover { background: rgb(255 255 255 / 14%); }

.steps-ring__dots { display: flex; align-items: center; gap: 0.25rem; }

/* Точка — кнопка 24×24 для пальца, видимая часть — 8 px. */
.steps-ring__dots button {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.steps-ring__dots button::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 30%);
  transition: width var(--dur) var(--ease-out-quart), background var(--dur);
}

.steps-ring__dots button[aria-current='true'] { width: 2.25rem; }
.steps-ring__dots button[aria-current='true']::before { width: 1.75rem; background: #fff; }

.steps-ring__arrow:focus-visible,
.steps-ring__dots button:focus-visible,
.steps--ring li:focus-visible {
  outline: 2px solid var(--asp-teal-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .steps--ring li { transition: none; }
}

/* На узком экране соседние карточки выглядывают из-за краёв — обрезаем
   их по ширине блока, иначе появится прокрутка страницы вбок. Номер —
   под текущей карточкой. */
@media (max-width: 700px) {
  .steps--ring {
    height: 18rem;
    overflow-x: clip;
    overflow-y: visible;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .steps-ring__num { position: static; transform: none; margin-top: var(--space-2); }
}

/* ── Готовые решения ──────────────────────────────────────────────────────── */

/* Готовые решения — панели-гармошка. Открытая панель ([data-open]) —
   широкая, с подписью; остальные — узкие полосы, в них видна середина фото
   и значок. Какая открыта, решает assets/js/acc.js. */
.acc {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  height: clamp(22rem, 36vw, 28rem);
}

.acc__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--asp-navy);
  transition: flex-grow var(--dur-slow) var(--ease-out-quart);
}

.acc__item[data-open] {
  flex-grow: 7;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--asp-blue-deep);
}

.acc__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение снизу — под подпись и значок. */
.acc__item::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgb(8 12 24 / 85%));
  pointer-events: none;
}

.acc__item a {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  color: #fff;
  text-decoration: none;
}

.acc__item a:focus-visible {
  outline: 3px solid var(--asp-teal-light);
  outline-offset: -3px;
  border-radius: var(--radius);
}

.acc__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 50%;
  background: rgb(19 26 45 / 70%);
  backdrop-filter: blur(6px);
}

/* Подпись видна только у открытой панели; появляется, когда панель
   уже раскрылась, — иначе текст мнётся в узкой полосе. */
.acc__txt {
  display: grid;
  gap: 0.2rem;
  min-width: 16rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out-quart), visibility 0s linear var(--dur);
}

.acc__item[data-open] .acc__txt {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out-quart) 0.15s, visibility 0s;
}

.acc__txt b { font-size: var(--fs-lg); line-height: 1.25; }
.acc__txt span { font-size: var(--fs-sm); line-height: 1.45; color: #d7e3f4; }

/* Значок в узкой полосе — по центру; скрытая подпись из потока убрана,
   иначе её ширина выталкивала значок за край полосы. */
.acc__item:not([data-open]) a { justify-content: center; }
.acc__item:not([data-open]) .acc__txt { position: absolute; }

/* Что видно в узкой полосе — середина кадра; где главное не в центре,
   точку задаёт --fx в разметке. */
.acc__item img { object-position: var(--fx, 50%) center; }

@media (prefers-reduced-motion: reduce) {
  .acc__item, .acc__txt { transition: none; }
}

/* На телефоне полосы горизонтальные: панели друг под другом,
   открытая — высокая. */
@media (max-width: 700px) {
  .acc { flex-direction: column; height: auto; }
  .acc__item { flex: none; height: 4.5rem; transition: height var(--dur-slow) var(--ease-out-quart); }
  .acc__item[data-open] { height: 20rem; }
  .acc__item:not([data-open]) a { justify-content: flex-start; align-items: center; }
  .acc__txt { min-width: 0; }
  .acc__item:not([data-open]) .acc__txt { position: static; }
  /* В закрытой полосе на телефоне название видно — иначе непонятно, что это. */
  .acc__item:not([data-open]) .acc__txt { opacity: 1; visibility: visible; }
  .acc__item:not([data-open]) .acc__txt span { display: none; }
  .acc__item:not([data-open])::after { inset: 0; background: rgb(8 12 24 / 60%); }
}

/* ── Почему мы ────────────────────────────────────────────────────────────── */

.why {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.why li {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--asp-teal);
}

.why b { font-size: var(--fs-xl); color: #fff; }
.why span { font-size: var(--fs-sm); color: var(--ink-2); }
.why__addr { margin: var(--space-6) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }

@media (max-width: 900px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Вопросы ──────────────────────────────────────────────────────────────── */

.faq {
  border-bottom: 1px solid var(--lt-line);
}

.faq summary {
  padding: var(--space-4) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

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

.faq summary::after {
  content: '+';
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--asp-blue-deep);
  transition: transform var(--dur) var(--ease-out-quart);
}

.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 var(--space-4); color: var(--lt-ink-2); }
.faq summary:focus-visible { outline: 2px solid var(--asp-blue); outline-offset: 4px; }
.faq__more { margin: var(--space-5) 0 0; font-weight: 600; }

/* ── Заявка ───────────────────────────────────────────────────────────────── */

/* ── Заявка ───────────────────────────────────────────────────────────────
   Одна карточка на два столбца: слева обещание, проверяемые факты и прямые
   контакты, справа подборщик и форма Битрикса. Приём и разметка — как
   на signboard.pro: там он уже отработал, и человеку привычнее видеть
   одинаковое решение на сайтах одной компании. */

.zayavka {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--line);
  scroll-margin-top: 6rem;
}

@media (min-width: 901px) {
  .zayavka { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
}

.zayavka__side { display: grid; gap: var(--space-6); }
.zayavka__stub { margin: 0; color: var(--ink-2); }

/* Своё display у строки итога перебивает атрибут hidden — возвращаем его. */
.pick__out[hidden] { display: none; }

.pick {
  display: grid;
  gap: var(--space-5);
}

.pick__h {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.15;
  color: var(--ink);
}

.pick__q {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.pick__q legend {
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pick__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Кнопки вместо выпадающих списков: на телефоне выбор одним касанием,
   и все варианты видны сразу — не приходится открывать, чтобы узнать,
   что вообще предлагают. */
.pick__opts label {
  position: relative;
  display: inline-flex;
}

.pick__opts input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.pick__opts span {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: border-color var(--dur-fast) var(--ease-out-quart),
    background var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
}

.pick__opts label:hover span {
  border-color: var(--line-strong);
  color: var(--ink);
}

.pick__opts input:checked + span {
  border-color: var(--asp-teal);
  background: rgb(29 233 182 / 14%);
  color: #fff;
}

/* Клавиатурный фокус обязан быть виден: сам кружок мы спрятали,
   и без этого человек, идущий табом, не поймёт, где он находится. */
.pick__opts input:focus-visible + span {
  outline: 2px solid var(--asp-teal-light);
  outline-offset: 2px;
}

.pick__out {
  display: grid;
  gap: 0.3rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid rgb(29 233 182 / 40%);
  background: rgb(29 233 182 / 8%);
  font-size: var(--fs-sm);
}

.pick__out b { color: var(--asp-teal-light); }
.pick__out span { color: var(--ink); line-height: 1.55; }

.pick__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

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


.zayavka__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.zayavka__pitch .lead {
  margin: 0;
  max-width: 38ch;
  font-size: var(--fs-base);
}

.zayavka__form {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* Четыре проверяемых факта. Не «качество и профессионализм», а то, что можно
   сверить: год, адрес, документы, реквизиты. */
.proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 11rem), 1fr));
  gap: 0.625rem;
}

.proof li {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 3%);
}

.proof__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--asp-teal);
  margin-bottom: 0.35rem;
}

.proof b {
  font-size: var(--fs-sm);
}

.proof span {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.45;
}

/* Прямые контакты. Пунктир вместо сплошной рамки: это не карточка наравне
   с фактами, а приписка к ним. */
.zayavka__direct {
  padding: 1rem 1.125rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.zayavka__direct p {
  margin: 0 0 0.75rem;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.zayavka__direct ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.zayavka__direct a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 44 px тач-цели: по этим ссылкам звонят с телефона. */
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out-quart);
}

.zayavka__direct a:hover {
  color: var(--asp-teal-light);
}

.zayavka__ico {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 4%);
  color: var(--asp-teal);
}

.zayavka__ico svg {
  width: 1rem;
  height: 1rem;
}

/* ── Форма Битрикса на тёмной полосе ───────────────────────────────────────
   Форма приходит со своим светлым оформлением, рассчитанным на белую
   страницу: на нашей тёмной полосе она встаёт белым прямоугольником
   с невидимыми подписями.

   Перекрашиваем через `!important` — иначе не выйдет: Битрикс раздаёт стили
   инлайном и своим таблицей стилей, загруженной после нашей. Правила держим
   узкими, по классам самой формы, чтобы не задеть остальную страницу.
   Правила — копия signboard.pro: та же CRM, те же классы. */
.b24-mount {
  /* Светлая тема сайта переопределяет --bg; форма стоит на тёмной полосе,
     и заливка автозаполнения должна считаться от тёмного фона. */
  --bg: var(--asp-navy);
  color-scheme: dark;
}

/* Карточку уже нарисовала страница — своя подложка форме не нужна. */
.b24-mount .b24-form,
.b24-mount .b24-form-wrapper,
.b24-mount .b24-form-content,
.b24-mount .b24-form-padding-side,
.b24-mount .b24-form-header-padding {
  background: transparent !important;
  box-shadow: none !important;
}

.b24-mount .b24-form-control {
  /* Именно `background-color`, а не сокращённое `background`: сокращённая
     запись сбрасывает и `background-image`, которой Битрикс рисует стрелку
     у раскрывающихся списков. */
  background-color: rgb(255 255 255 / 6%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
}

.b24-mount .b24-form-control::placeholder {
  color: var(--ink-muted) !important;
}

/* Автозаполнение браузера. Яндекс и Chrome подставляют имя и телефон сами
   и красят такое поле своим стилем: тёмный текст на светлой заливке, поверх
   нашего color. Цвет перебивается только text-fill-color, а заливку —
   внутренней тенью: фон автозаполнения обычным background не снять. */
.b24-mount .b24-form-control:-webkit-autofill,
.b24-mount .b24-form-control:-webkit-autofill:hover,
.b24-mount .b24-form-control:-webkit-autofill:focus,
.b24-mount .b24-form-control:autofill {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--bg) 90%, #fff) inset !important;
  transition: background-color 9999s ease-out 0s;
}

.b24-mount .b24-form-control {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
}

.b24-mount .b24-form-control:focus {
  border-color: var(--asp-teal) !important;
  outline: none !important;
}

/* Гасить рамку у полей формы было ошибкой: с клавиатуры не видно,
   где находишься. Возвращаем её для перехода по Tab. */
.b24-mount .b24-form-control:focus-visible {
  outline: 2px solid var(--asp-teal) !important;
  outline-offset: 2px;
}

/* Подписи — только по своим классам. Цвет обязательной звёздочки не трогаем:
   он несёт смысл, а не оформление. */
.b24-mount .b24-form-control-label,
.b24-mount .b24-form-control-desc,
.b24-mount .b24-form-control-comment,
.b24-mount .b24-form-field-agreement {
  color: var(--ink-2) !important;
}

/* Звёздочку оставляем красной — она несёт смысл, — но светлее битриксовой:
   чистый красный на тёмно-синем не добирает контраста 4,5. */
.b24-mount .b24-form-control-required { color: #ff7a7a !important; }

.b24-mount input[type='checkbox'],
.b24-mount input[type='radio'] {
  accent-color: var(--asp-teal);
}

.b24-mount button {
  background: var(--asp-blue-deep) !important;
  border-color: var(--asp-blue-deep) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
}

.b24-mount,
.b24-mount input,
.b24-mount textarea,
.b24-mount select,
.b24-mount button {
  font-family: var(--font) !important;
}

/* Раскрытый список рисует браузер поверх страницы, и прозрачный фон там
   превращается в белый текст на белом. Ставим явно. */
.b24-mount select option {
  background: var(--bg-deep);
  color: var(--ink);
}

/* ── Подвал ───────────────────────────────────────────────────────────────── */

.foot {
  --ink-2: #c2d4ea;
  --ink-muted: #9fb0c8;
  padding-block: var(--space-8) var(--space-6);
  background: var(--asp-navy-deep);
  color: #f2fbff;
}

.foot__in {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1.3fr repeat(3, 1fr);
}

.foot__logo { width: 9rem; margin-bottom: var(--space-4); }
.foot p { margin: 0 0 var(--space-2); }
.foot__small { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.6; }

.foot__head {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.foot__list a { color: var(--ink-2); text-decoration: none; }
.foot__list a:hover { color: #fff; text-decoration: underline; }

.foot__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 10%);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

@media (max-width: 900px) { .foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__in { grid-template-columns: 1fr; } }

/* На узком телефоне четыре факта в два столбца тесны: «от 1 штуки» ломалось
   на две строки. Цифру делаем помельче, текст — плотнее. */
@media (max-width: 480px) {
  .first__facts li { padding: var(--space-3) var(--space-4); }
  .first__facts b { font-size: var(--fs-lg); }
}

/* ══ Внутренние страницы ═══════════════════════════════════════════════════
   Собираются tools/gen-banerprint.py. Блоки общие для всех шести. */

.nav a[aria-current='page'] {
  color: var(--lt-ink);
  border-bottom-color: var(--asp-blue);
}

.page-head {
  padding-block: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(50rem 24rem at 90% 0%, var(--asp-air-100), transparent 70%),
    var(--lt-bg-2);
  border-bottom: 1px solid var(--lt-line);
}

.page-head h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  margin-bottom: var(--space-4);
}

.page-head__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.crumbs {
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--lt-ink-muted);
}

.crumbs a { color: var(--lt-ink-2); }

/* Карточки видов: таблички, баннеры, наклейки, готовые решения. */
.kinds {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--space-6);
}

.kind {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  scroll-margin-top: 5rem;
}

.kind__img {
  width: calc(100% + var(--space-5) * 2);
  max-width: none;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-3);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.kind { overflow: hidden; }
/* Карточка — flex-колонка, поэтому не justify-self, а align-self. */
.kind__cta { align-self: flex-start; margin-top: var(--space-3); }

.kind h3 { margin: 0; font-size: var(--fs-lg); }
.kind p { margin: 0; color: var(--lt-ink-2); font-size: var(--fs-sm); }
.kind__sub { font-weight: 700; color: var(--lt-ink) !important; margin-top: var(--space-2) !important; }

.kind__price {
  margin-top: auto !important;
  padding-top: var(--space-3);
  border-top: 1px solid var(--lt-line);
  color: var(--asp-navy-calm) !important;
  font-size: var(--fs-base) !important;
}

/* Цель якоря подсвечиваем: человек пришёл по ссылке «адресные таблички»
   и должен сразу увидеть, какая из карточек — ответ на его вопрос. */
.kind:target {
  border-color: var(--asp-blue);
  box-shadow: 0 0 0 3px rgb(41 121 255 / 18%);
}

.list {
  margin: var(--space-2) 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  color: var(--lt-ink-2);
}

/* Таблица цен. Прокручивается вбок в своей рамке, а не страница целиком. */
.price__wrap {
  overflow-x: auto;
  margin-top: var(--space-5);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
}

.price {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.price th,
.price td {
  padding: 0.75rem var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--lt-line);
}

.price th {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-ink-muted);
  background: var(--lt-bg);
}

.price td:last-child,
.price th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price td:last-child { font-weight: 700; color: var(--lt-ink); }
.price tr:last-child td { border-bottom: 0; }

.price__note {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--lt-ink-muted);
  max-width: 70ch;
}

.band h3 { margin-top: var(--space-6); font-size: var(--fs-lg); }

.two {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}

.two h3 { margin-top: var(--space-4); }

.spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--asp-air-100);
}

.spec dt { color: var(--lt-ink-2); font-size: var(--fs-sm); }
.spec dd { margin: 0; font-weight: 700; text-align: right; }

@media (max-width: 800px) { .two { grid-template-columns: 1fr; } }

.terms {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-6) 0 0;
}

.terms dt { font-weight: 700; }
.terms dd { margin: 0; color: var(--lt-ink-2); }

@media (max-width: 600px) { .terms { grid-template-columns: 1fr; gap: var(--space-1) 0; } .terms dd { margin-bottom: var(--space-3); } }

.reqs {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  margin-top: var(--space-5);
}

.req {
  padding: var(--space-5);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
}

.req h3 { margin: 0 0 var(--space-2); }

.files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Заявка внизу внутренних страниц. */
.cta-band { padding-block: var(--space-8); }

.cta-band__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.cta-band h2 { margin: 0 0 var(--space-2); }
.cta-band .lead { margin: 0; }

.cta-band__act {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.cta-band__tel {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
}

/* Четыре вида требований — ровно два на два, а не три плюс одна. */
@media (min-width: 760px) { .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ Страницы документов ═══════════════════════════════════════════════════
   Согласие, политика, СОУТ и 404 — тот же вид, что на signboard.pro:
   узкая колонка текста, короткая шапка с возвратом на главную. */

.doc-page {
  background: var(--lt-bg);
  color: var(--lt-ink);
  --ink: var(--lt-ink);
  --ink-2: var(--lt-ink-2);
  --ink-muted: var(--lt-ink-muted);
  --line: var(--lt-line);
  /* Иначе призрачная кнопка получает белую рамку тёмной темы и на светлом
     фоне выглядит без границ вовсе. */
  --line-strong: rgb(15 26 46 / 28%);
}

/* Подвал страниц-документов: реквизиты мелким шрифтом. */
.doc-foot {
  border-top: 1px solid var(--lt-line);
  background: var(--lt-bg-2);
  padding-block: var(--space-6);
  font-size: var(--fs-sm);
}

.doc-foot .muted {
  margin: 0;
  color: var(--lt-ink-muted);
}

.doc-top {
  border-bottom: 1px solid var(--lt-line);
  background: var(--lt-bg-2);
}

.doc-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--fs-sm);
}

.doc-top__back {
  text-decoration: none;
  font-weight: 600;
}

.doc-top__back:hover {
  color: var(--asp-blue-deep);
}

.doc-top__phone {
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.doc {
  padding-block: var(--space-8);
}

.doc__inner {
  max-width: var(--container-narrow);
}

.doc h1 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.doc h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-7);
}

.doc__meta {
  margin-bottom: var(--space-7);
}

.doc p,
.doc li {
  max-width: 68ch;
}

.doc li {
  margin-bottom: 0.375rem;
}

.doc a {
  color: var(--asp-navy-calm);
}

/* Таблица в документе. Прокручивается вбок в своей рамке: три колонки
   с длинными формулировками на телефон не помещаются никак, а резать
   юридический текст переносами нельзя. */
.doc__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.doc__table th,
.doc__table td {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--lt-line);
  text-align: left;
  vertical-align: top;
  color: var(--lt-ink-2);
}

.doc__table thead th {
  background: var(--lt-bg);
  color: var(--lt-ink);
  font-weight: 600;
}

.doc .tablewrap {
  margin-block: var(--space-5);
  /* Своя прокрутка вбок: три колонки с юридическими формулировками
     на телефон не помещаются, а резать текст нельзя. tabindex в разметке
     делает рамку доступной с клавиатуры. */
  overflow-x: auto;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius);
}

.doc .tablewrap:focus-visible {
  outline: 2px solid var(--asp-blue-deep);
  outline-offset: 2px;
}

/* Ссылки внутри документа специфичнее кнопки и перекрывали её белый текст:
   синее по синему давало 1,76:1. */
.doc a.btn {
  color: #fff;
}

/* Призрачная кнопка на светлой странице: белый текст правила выше делал
   её невидимой — белым по белому. */
.doc a.btn--ghost {
  color: var(--lt-ink);
}

/* Выходы со страницы 404. Список, а не кнопки в ряд: вариантов три,
   и у каждого нужно пояснение — куда он ведёт. */
.err__links {
  margin: var(--space-5) 0;
  padding-left: 1.25rem;
}

.err__links li {
  margin-bottom: 0.5rem;
}

.doc__file {
  margin-block: var(--space-5);
}

/* Смотрелка PDF: высота от экрана, но не выше него — иначе страница
   превращается в один документ без начала и конца. */
.doc__pdf {
  display: block;
  width: 100%;
  height: min(80vh, 46rem);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius);
  background: var(--lt-bg);
}

/* ── Файлы cookie ════════════════════════════════════════════════════════════
   Панель фиксированная, поэтому её появление не двигает раскладку — сдвиг
   здесь был бы обиднее всего: баннер видят все и в первую секунду.

   Скрыт в разметке и показывается скриптом только тому, кто ещё не выбирал:
   вернувшийся посетитель не видит мигания. */

.cookie {
  /* Баннер тёмный на светлом сайте. Цвета светлой темы (тёмный текст),
     которые сайт ставит на :root, здесь сделали бы текст и кнопки
     невидимыми — аудит поймал 1,09:1 у «Только необходимые». Возвращаем
     баннеру переменные тёмной темы. */
  --ink: #f2fbff;
  --ink-2: #c2d4ea;
  --ink-muted: #9fb0c8;
  --line: rgb(255 255 255 / 14%);
  --line-strong: rgb(255 255 255 / 28%);
  position: fixed;
  inset: auto 0 0;
  /* Выше липкой панели телефона: она тоже прижата к низу. */
  z-index: var(--z-toast);
  padding-block: 1rem;
  background: rgb(11 17 31 / 96%);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  color: var(--ink);
}

.cookie__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

.cookie__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.cookie__text a {
  color: var(--asp-teal-light);
}

.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Третья кнопка не должна спорить за внимание с первыми двумя: она ведёт
   не к решению, а к выбору его состава. */
.btn--quiet {
  border-color: transparent;
  background: none;
  color: var(--ink-2);
}

.btn--quiet:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.cookie__tune {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.cookie__cats {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.cookie__cats li {
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 4%);
}

.cookie__cats label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* 44 px тач-цели набираем самой строкой: галочку жмут пальцем. */
  min-height: 44px;
  cursor: pointer;
}

.cookie__cats input:disabled {
  cursor: default;
}

.cookie__cats li:has(input:disabled) label {
  cursor: default;
}

.cookie__cats b {
  font-size: var(--fs-sm);
}

.cookie__cats span {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* На телефоне кнопки баннера растягиваются в строку: в них попадают пальцем. */
@media (max-width: 900px) {
  .cookie__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Кнопка, которая ведёт себя как ссылка: повторный выбор в подвале — это
   не действие на странице, а вызов того же баннера. Вид — как у соседних
   ссылок подвала. */
.foot__link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font: inherit;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.foot__link:hover {
  color: var(--ink);
  border-bottom-color: var(--asp-teal);
}

/* ══ Картинки заказчика ════════════════════════════════════════════════════ */

/* Первый экран и шапки разделов на фоне 3D-сцены. Сцена тёмная, левая
   треть размыта под текст — поэтому здесь светлый текст и свои переменные
   тёмной темы, как у тёмных полос. */
.first--img,
.page-head--img {
  --ink: #f2fbff;
  --ink-2: #c2d4ea;
  --ink-muted: #9fb0c8;
  --line: rgb(255 255 255 / 16%);
  --line-strong: rgb(255 255 255 / 30%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--asp-navy-deep);
  color: var(--ink);
  border-bottom: 0;
}

.first__bg,
.page-head__bg {
  position: absolute;
  inset: 0;
  /* Ниже слоя затемнения (::before, z-index −1): на одном уровне картинка
     рисовалась поверх него, и затемнения не было вовсе. */
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Изделия на сцене справа — держим их в кадре на любой ширине. */
  object-position: 72% center;
}

/* Затемнение слева направо: текст ложится на размытую часть сцены, а на узком
   экране — и на сами изделия, так что без него белый текст местами терялся бы. */
.first--img::before,
.page-head--img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(8 12 24 / 78%) 0%, rgb(8 12 24 / 45%) 45%, transparent 75%);
}

.first--img { padding-block: clamp(3rem, 8vw, 6.5rem); }
.first--img .eyebrow,
.page-head--img .eyebrow { color: var(--asp-teal); }
.first--img .lead,
.page-head--img .lead { color: var(--ink-2); }
.first--img .btn--ghost,
.page-head--img .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 45%); }
.first--img .btn--ghost:hover,
.page-head--img .btn--ghost:hover { background: rgb(255 255 255 / 10%); }
.first--img .first__sale { background: rgb(29 233 182 / 18%); color: var(--asp-teal-light); }

.first--img .first__facts li {
  border-color: rgb(255 255 255 / 14%);
  background: rgb(10 16 32 / 55%);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.first--img .first__facts b { color: #fff; }
.first--img .first__facts span { color: var(--ink-2); }

/* На узком экране изделия сцены оказываются под текстом — затемняем ровнее. */
@media (max-width: 900px) {
  .first--img::before,
  .page-head--img::before { background: rgb(8 12 24 / 62%); }
}

.page-head--img .crumbs,
.page-head--img .crumbs a { color: var(--ink-2); }

/* Полоса повторяет пропорцию кадра (2560 × 1080) — тогда сцена видна
   целиком, без обрезки. Снизу ограничиваем: на очень широком экране
   шапка иначе занимала бы больше экрана, чем нужно. Текст — по центру
   по вертикали. */
.page-head--img {
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  /* Высота — по пропорции кадра (2560 × 1080), то есть 100vw / 2,37.
     Не aspect-ratio: при заданной min-height он начинает задавать ширину,
     и на телефоне полоса распирала страницу до 910 px. */
  min-height: clamp(24rem, calc(100vw / 2.37), 52rem);
}

.page-head--img > .wrap { width: 100%; }

/* Если полоса всё же ниже кадра, показываем ту его часть, где изделия:
   точку задаёт --oy в разметке (её ставит генератор под каждую сцену). */
.page-head--img .page-head__bg { object-position: 72% var(--oy, center); }

.page-head__facts {
  margin-top: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Держим факты в колонке: на всю ширину они ложились прямо на изделия. */
  max-width: 34rem;
}

/* На широком экране — как на первом экране главной: текст не центрируем
   вместе со страницей, иначе он наезжает на изделия сцены. Содержимое
   держим в колонке, чтобы строки не растягивались на весь экран. */
@media (min-width: 1600px) {
  .page-head--img .wrap {
    max-width: none;
    margin-inline: 0;
    /* Шапка ниже первого экрана главной, поэтому кадр здесь не так увеличен
       и текст можно отодвинуть от края дальше — до начала изделий. */
    padding-inline: clamp(2rem, 7vw, 16rem);
  }

  .page-head--img .wrap > * { max-width: 34rem; }
}

.page-head--img .page-head__facts li {
  border-color: rgb(255 255 255 / 14%);
  /* Плотнее, чем на первом экране главной: здесь карточки ложатся прямо
     на изделия сцены, и сквозь полупрозрачные читалось месиво. */
  background: rgb(10 16 32 / 78%);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.page-head--img .page-head__facts b { color: #fff; }
.page-head--img .page-head__facts span { color: var(--ink-2); }

@media (max-width: 900px) { .page-head__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Сцена «комплексное оформление» светлее двух других: затемнение сильнее. */
.page-head--light::before {
  background: linear-gradient(90deg, rgb(8 16 40 / 82%) 0%, rgb(8 16 40 / 55%) 50%, rgb(8 16 40 / 15%) 80%);
}

/* Фото в карточках каталога — вместо значков. */
.cat__img {
  width: calc(100% + var(--space-5) * 2);
  max-width: none;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cat__item a { overflow: hidden; }

/* Работы на главной. */
.works {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.works figure,
.gal figure { margin: 0; }

.works img,
.gal img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.works figcaption,
.gal figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--lt-ink-2);
}

@media (max-width: 1000px) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Галереи во внутренних разделах: примеры материалов — квадраты,
   работы на объектах — 4:3. */
.gal {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gal img { aspect-ratio: 1; }
.gal--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.gal--wide img { aspect-ratio: 4 / 3; }

@media (max-width: 1000px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gal, .gal--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Миниатюра материала в строке прайса. */
.price__mat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.price__mat img,
.price__nophoto {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.price__nophoto { background: var(--lt-bg); border: 1px dashed var(--lt-line); }

/* 3D-иконки на тёмной полосе — с прозрачным фоном (его готовит
   tools/img-banerprint.py из чёрного фона исходников). */
.why img {
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: var(--space-2);
}

/* Строки сетки в карточке не растягиваем: иначе в карточке с коротким
   текстом лишняя высота уходила под иконку и заголовки стояли вразнобой. */
.why li { border-top: 0; padding-top: 0; align-content: start; }

/* Первый экран на картинке. Сцену выравниваем по левому краю кадра:
   слева в ней размытый тёмный фон, изделия — во второй половине, и так
   табличка оказывается правее текстовой колонки, без обрезки и шва.
   Факты — под текстом в два столбца: справа они ложились на табличку. */
.first--img .first__in { grid-template-columns: minmax(0, 38rem); }
.first--img .first__bg { object-position: 0% 60%; }

/* На широком экране кадр сцены по пропорции почти совпадает с полосой:
   картинка растягивается по ширине, и табличка в ней начинается уже
   с 35 % кадра — ровно там, где идёт текст. Сдвигать саму сцену некуда:
   вправо она уезжает за край. Поэтому текст первого экрана не центрируем
   вместе со страницей, а прижимаем к левому краю — изделия остаются
   справа от него целиком. */
@media (min-width: 1600px) {
  .first--img .wrap {
    max-width: none;
    margin-inline: 0;
    /* Отступ слева — сколько позволяет сцена: текстовая колонка должна
       закончиться раньше, чем в кадре начинается табличка. */
    padding-inline: clamp(2rem, 6vw, 7.5rem);
  }
}

/* Сцена «комплексное оформление» пёстрая: витрины, люди, вывески. Под текстом
   её гасим почти полностью, иначе заголовок читается через рисунок. */
.page-head--light::before {
  background: linear-gradient(90deg, rgb(6 12 32 / 92%) 0%, rgb(6 12 32 / 82%) 45%, rgb(6 12 32 / 30%) 75%, transparent 95%);
}

/* В шапках разделов заголовок длиннее, чем на главной, и заходит на изделия
   сцены (на «Печати» — на баннер с надписью). Держим тёмную подложку до
   середины экрана. */
@media (min-width: 901px) {
  .page-head--img:not(.page-head--light)::before {
    background: linear-gradient(90deg, rgb(8 12 24 / 88%) 0%, rgb(8 12 24 / 78%) 45%, rgb(8 12 24 / 25%) 75%, transparent 95%);
  }
}

/* ── Условия: карточки с крупным знаком ────────────────────────────────────
   Сверху — «витрина» карточки: знак рубля, полоски маршрута, срок гарантии.
   Ниже название и текст. */

.feat {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feat li {
  padding: var(--space-5);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out-quart),
    box-shadow var(--dur) var(--ease-out-quart);
}

.feat li:hover {
  border-color: var(--asp-blue);
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -34px rgb(19 26 45 / 55%);
}

.feat__art {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  height: 11rem;
  margin-bottom: var(--space-5);
}

/* Знак рубля покачивается сам и подрастает, когда на карточку наводят. */
.feat__glyph {
  font-size: 7rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--lt-ink);
  animation: feat-float 5s ease-in-out infinite;
  transition: transform var(--dur) var(--ease-out-quart), color var(--dur);
}

.feat li:hover .feat__glyph { transform: scale(1.08); color: var(--asp-blue-deep); }

.feat__num {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--lt-ink);
}

.feat__cap { font-size: var(--fs-sm); color: var(--lt-ink-muted); }

.feat__rule {
  width: 7rem;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--lt-ink);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out-quart), background var(--dur);
}

.feat li:hover .feat__rule { transform: scaleX(1.25); background: var(--asp-teal-deep); }

/* Три полоски — путь «свой транспорт → ТК → самовывоз». Бегут по очереди
   сами и подпрыгивают при наведении на карточку. */
.feat__bars { display: flex; gap: var(--space-2); }

.feat__bars i {
  width: 3.25rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--asp-air-300);
  animation: feat-run 2.6s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.22s);
  transition: transform var(--dur) var(--ease-out-quart);
}

.feat__bars i:nth-child(2) { --d: 1; }
.feat__bars i:nth-child(3) { --d: 2; }
.feat li:hover .feat__bars i { transform: translateY(-4px); }

@keyframes feat-float { 50% { transform: translateY(-8px); } }
@keyframes feat-run { 45%, 100% { opacity: 1; } 25% { opacity: 0.45; } }

.feat__bars i:nth-child(2) { background: var(--asp-air-400); }
.feat__bars i:nth-child(3) { background: var(--asp-blue); }

.feat h3 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.feat p { margin: 0; color: var(--lt-ink-2); font-size: var(--fs-sm); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .feat__glyph,
  .feat__bars i { animation: none; }

  .feat li,
  .feat__glyph,
  .feat__rule,
  .feat__bars i { transition: none; }
}

@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }

/* ── Требования к макетам: карточки с пастельной заливкой ──────────────────
   Оттенок задаёт --n (номер карточки). Значок — 3D-иконка заказчика,
   она декоративная: alt пустой. */

.grads {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.grad {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  transition: transform var(--dur) var(--ease-out-quart), box-shadow var(--dur) var(--ease-out-quart);
  /* Оттенки — из фирменной палитры: воздушный голубой, синий, бирюзовый. */
  --c1: var(--asp-air-100);
  --c2: #f4fbff;
  --acc: var(--asp-blue-deep);
}

.grad[style*='--n: 1'] { --c1: #dfe9fb; --c2: #f3f7ff; --acc: var(--asp-navy-calm); }
.grad[style*='--n: 2'] { --c1: #d9f3f2; --c2: #f1fbfa; --acc: var(--asp-teal-deep); }
.grad[style*='--n: 3'] { --c1: #e4f0ff; --c2: #f5faff; --acc: var(--asp-blue); }

.grad:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -40px rgb(19 26 45 / 55%);
}

.grad__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 75%);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--lt-ink);
}

.grad__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--acc);
}

.grad h3 { margin: 0 0 var(--space-3); font-size: var(--fs-xl); }

/* Справа снизу лежит значок — не пускаем на него строки списка. */
.grad .list {
  margin: 0;
  max-width: min(34rem, calc(100% - 5.5rem));
  color: var(--lt-ink-2);
  font-size: var(--fs-sm);
}

/* Значок в углу — свой у каждой карточки: рулон, постер, ножницы, УФ-лампа.
   Сам покачивается, при наведении подрастает и поворачивается. */
.grad__ico {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 6.5rem;
  height: 6.5rem;
  color: var(--acc);
  opacity: 0.45;
  pointer-events: none;
  animation: feat-float 6s ease-in-out infinite;
  transition: transform var(--dur-slow) var(--ease-out-quart), opacity var(--dur);
}

.grad:hover .grad__ico { transform: scale(1.12) rotate(-6deg); opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .grad,
  .grad__ico { transition: none; animation: none; }
}

@media (max-width: 900px) {
  .grads { grid-template-columns: 1fr; }
  .grad__ico { width: 5rem; height: 5rem; opacity: 0.35; }
}

/* ── Карусель шагов на светлой полосе ──────────────────────────────────────
   Тот же блок, что на главной: там он на тёмном фоне, здесь — на светлом,
   поэтому переопределяем цвета карточек, номера и кнопок. */

.steps-ring--light .steps li {
  border-color: var(--lt-line);
  background: var(--lt-bg-2);
  box-shadow: 0 24px 50px -35px rgb(19 26 45 / 45%);
}

.steps-ring--light .steps b { background: var(--asp-air-100); color: var(--asp-navy-calm); }
.steps-ring--light .steps h3 { color: var(--lt-ink); }
.steps-ring--light .steps p { color: var(--lt-ink-2); }

.steps-ring--light .steps--ring li[aria-current='step'] {
  border-color: var(--asp-blue);
  background: var(--lt-bg-2);
}

.steps-ring--light .steps--ring li:not([aria-current='step']) { background-color: var(--lt-bg-2); }
.steps-ring--light .steps-ring__num b { color: var(--lt-ink); }
.steps-ring--light .steps-ring__num span { color: var(--lt-ink-muted); }

.steps-ring--light .steps-ring__arrow {
  border-color: var(--lt-line);
  background: var(--lt-bg-2);
  color: var(--lt-ink);
}

.steps-ring--light .steps-ring__arrow:hover { background: var(--lt-bg); }
.steps-ring--light .steps-ring__dots button::before { background: var(--asp-air-400); }
.steps-ring--light .steps-ring__dots button[aria-current='true']::before { background: var(--asp-blue-deep); }

.steps-ring--light .steps-ring__arrow:focus-visible,
.steps-ring--light .steps-ring__dots button:focus-visible,
.steps-ring--light .steps--ring li:focus-visible { outline-color: var(--asp-blue-deep); }

/* ── Липкие карточки: виды наклеек ─────────────────────────────────────────
   При прокрутке карточки наезжают друг на друга: каждой — position: sticky
   и свой отступ сверху (--i в разметке). Приём чисто на CSS, скрипта нет.
   Слева текст, справа фото. */

.stik {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.stik__card {
  position: sticky;
  /* Отступ растёт с номером карточки — из-под верхней выглядывает край
     предыдущей, как стопка. 5rem — чтобы шапка сайта не перекрывала. */
  top: calc(5rem + var(--i, 0) * 1.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: 2rem;
  background: var(--asp-air-100);
  scroll-margin-top: 6rem;
}

/* Каждая вторая — другого оттенка: видно, что карточки разные. */
.stik__card:nth-child(even) { background: #e8eefc; }

.stik__text { display: grid; justify-items: start; gap: var(--space-3); }

.stik__text h3 {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  color: var(--lt-ink);
}

.stik__text p { margin: 0; color: var(--lt-ink-2); line-height: 1.6; }
.stik__text .list { margin: 0; color: var(--lt-ink-2); font-size: var(--fs-sm); }

.stik__card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgb(19 26 45 / 55%);
}

@media (max-width: 900px) {
  /* На телефоне стопка не нужна: экран короткий, и карточка, прилипшая
     сверху, съедает половину. Идут обычным столбцом. */
  .stik__card {
    position: static;
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
  }

  .stik__card img { order: -1; }
}

/* ── Бенто: виды баннеров ──────────────────────────────────────────────────
   Карточки разной ширины в шестиколоночной сетке — это и даёт ритм.
   Фото не перекрываем подписью: изделие на снимке мелкое, и подложка
   съедала его нижнюю половину. Поэтому фото сверху, текст под ним.
   Ширину карточки задаёт --w в разметке (в колонках). */

.bento {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
}

.bento__card {
  grid-column: span var(--w, 3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  box-shadow: 0 24px 60px -45px rgb(19 26 45 / 55%);
  scroll-margin-top: 5rem;
}

/* Пропорция кадра постоянная: если тянуть фото на всю высоту ряда,
   у узкой карточки снимок становится вертикальным и обрезает изделие
   по бокам. Высота карточки — по содержимому (align-items: start),
   поэтому пустоты под текстом тоже нет. */
.bento__card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-quart);
}

.bento__card:hover img { transform: scale(1.03); }

.bento__body {
  display: flex;
  flex-direction: column;
  flex: none;
  padding: var(--space-5);
}

.bento__body h3 { margin: 0 0 var(--space-2); font-size: var(--fs-xl); color: var(--lt-ink); }
.bento__body p { margin: 0; color: var(--lt-ink-2); font-size: var(--fs-sm); line-height: 1.5; }

.bento__spec {
  margin-top: auto !important;
  padding-top: var(--space-3);
  border-top: 1px solid var(--lt-line);
  color: var(--lt-ink-muted) !important;
  font-size: var(--fs-xs) !important;
}

/* Отступ сверху у первой строки текста: без наложения он задаётся здесь. */
.bento__spec:not(:first-child) { margin-top: var(--space-4) !important; }

@media (prefers-reduced-motion: reduce) {
  .bento__card img { transition: none; }
  .bento__card:hover img { transform: none; }
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__card { grid-column: span 1; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
}

/* ── Показ видов печати ────────────────────────────────────────────────────
   Слева круг с фотографией и вращающимся пунктирным кольцом, справа —
   описание и шкалы, внизу переключатель. Без скрипта видна первая панель,
   ссылки на цены работают; переключает assets/js/pokaz.js.
   Блок стоит на светлой полосе — цвета берём из светлых токенов. */

.pokaz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: var(--space-7);
}

.pokaz__stage {
  position: relative;
  justify-self: center;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  isolation: isolate;
}

/* Кольцо из пунктира — медленно вращается вокруг фотографии. */
.pokaz__stage::before {
  content: '';
  position: absolute;
  inset: -8%;
  border: 1px dashed var(--lt-line);
  border-top-color: var(--asp-blue);
  border-radius: 50%;
  animation: pokaz-spin 26s linear infinite;
}

/* Свечение под кругом: холодное, как в фирменной сцене. */
.pokaz__stage::after {
  content: '';
  position: absolute;
  inset: 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--asp-air-300), transparent 70%);
  filter: blur(28px);
  opacity: 0.9;
  animation: pokaz-pulse 6s ease-in-out infinite;
}

.pokaz__circle {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--lt-line);
  background: var(--lt-bg-2);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart),
    visibility 0s linear var(--dur-slow);
}

.pokaz__circle[data-on] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart),
    visibility 0s;
}

.pokaz__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pokaz__status {
  position: absolute;
  left: 50%;
  bottom: -1.25rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-pill);
  background: var(--lt-bg-2);
  box-shadow: 0 12px 30px -20px rgb(19 26 45 / 45%);
  font-size: var(--fs-xs);
  color: var(--lt-ink-2);
  white-space: nowrap;
}

.pokaz__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--asp-teal-deep);
  animation: pokaz-blink 2.4s ease-in-out infinite;
}

.pokaz__info { position: relative; }

.pokaz__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity var(--dur) var(--ease-out-quart),
    transform var(--dur) var(--ease-out-quart),
    visibility 0s linear var(--dur);
}

.pokaz__panel[data-on] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur) var(--ease-out-quart) 0.1s,
    transform var(--dur) var(--ease-out-quart) 0.1s,
    visibility 0s;
}

/* Панели лежат друг на друге: высота блока не прыгает при переключении. */
.pokaz__info { display: grid; }

.pokaz__info h3 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  color: var(--lt-ink);
}

.pokaz__text {
  margin: 0 0 var(--space-5);
  max-width: 34rem;
  color: var(--lt-ink-2);
  line-height: 1.6;
}

.pokaz__stats {
  list-style: none;
  margin: 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-lg);
  background: var(--lt-bg-2);
  box-shadow: 0 24px 60px -45px rgb(19 26 45 / 55%);
}

.pokaz__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
}

.pokaz__row b { font-weight: 600; color: var(--lt-ink); }
.pokaz__row em { font-style: normal; color: var(--asp-navy-calm); font-variant-numeric: tabular-nums; }

.pokaz__bar {
  display: block;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--lt-bg);
  overflow: hidden;
}

.pokaz__bar i {
  display: block;
  width: var(--v, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--asp-blue-deep), var(--asp-teal-deep));
  transition: width 1s var(--ease-out-quart);
}

/* Пока панель скрыта, шкалы держим на нуле: при показе они наполняются. */
.pokaz__panel:not([data-on]) .pokaz__bar i { width: 0; }

.pokaz__more { padding-top: var(--space-2); border-top: 1px solid var(--lt-line); }

.pokaz__more a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--asp-blue-deep);
  text-decoration: none;
}

.pokaz__more a:hover { text-decoration: underline; }

.pokaz__price {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--lt-ink-muted);
}

.pokaz__switch {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  gap: 0.25rem;
  margin-top: var(--space-5);
  padding: 0.35rem;
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-pill);
  background: var(--lt-bg-2);
  box-shadow: 0 18px 40px -30px rgb(19 26 45 / 55%);
}

.pokaz__switch button {
  min-width: 11rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--lt-ink-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.pokaz__switch button:hover { color: var(--lt-ink); }

.pokaz__switch button[aria-selected='true'] {
  background: var(--asp-blue-deep);
  color: #fff;
}

.pokaz__switch button:focus-visible {
  outline: 2px solid var(--asp-blue-deep);
  outline-offset: 2px;
}

@keyframes pokaz-spin { to { transform: rotate(1turn); } }
@keyframes pokaz-pulse { 50% { opacity: 0.55; transform: scale(1.04); } }
@keyframes pokaz-blink { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .pokaz__stage::before,
  .pokaz__stage::after,
  .pokaz__dot { animation: none; }

  .pokaz__circle,
  .pokaz__panel,
  .pokaz__bar i { transition: none; }
}

@media (max-width: 900px) {
  .pokaz { grid-template-columns: 1fr; gap: var(--space-7); }
  .pokaz__stage { width: min(100%, 20rem); }
  .pokaz__switch { width: 100%; }
  .pokaz__switch button { flex: 1; min-width: 0; }
}

/* На телефоне кольцо вокруг круга и плашка статуса вылезали за экран
   и давали прокрутку вбок: кольцо прижимаем, плашку переносим по строкам. */
@media (max-width: 700px) {
  .pokaz__stage { width: min(100%, 17rem); }
  .pokaz__stage::before { inset: -4%; }

  /* Плашку уводим под круг: на узком экране она ложилась на фото. */
  .pokaz__stage { margin-bottom: 4rem; }

  .pokaz__status {
    bottom: -3rem;
    /* Ширина по тексту: у абсолютного блока она иначе схлопывается
       до самого длинного слова, и плашка становится в три строки. */
    width: max-content;
    max-width: min(100%, 17rem);
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}