@charset "UTF-8";

/* ==========================================================================
   АРМДОН — дизайн-система
   Промышленный минимализм: металл, точность, честная цифра.
   Палитра, типографика и правила — из «Этап 1. Концепция и архитектура».
   ========================================================================== */

:root {
  /* Тёмные поверхности */
  --bg: #111210;          /* Графит — основной фон */
  --surface: #1a1c19;     /* Тёмная поверхность, карточки */
  --surface-2: #22241f;   /* Вложенные плашки, пустые состояния */
  --surface-3: #2a2d27;   /* Ховер, вложенные элементы */
  --bg-deep: #0c0d0b;     /* Футер */

  /* Светлые поверхности */
  --light: #f2f1ed;       /* Светлые контентные секции */
  --light-2: #faf9f6;     /* Чётные строки таблиц */
  --light-3: #eae8e1;     /* Шапка таблицы, сегмент-контрол */
  --white: #fff;

  /* Акцент */
  --accent: #e86e27;      /* CTA, цена, фокус */
  --accent-hover: #f2812f;
  --accent-soft: #f2925c; /* Акцентный текст на тёмном */
  --accent-ink: #a84a12;  /* Акцентный текст на светлом (≥4.5:1 даже на подложке .note--light) */

  /* Статусы */
  --ok: #4e9a5b;          /* Только «в наличии» */
  --ok-ink: #3a6b42;
  --warn: #c79a2e;        /* Только «под заказ» */
  --warn-ink: #7a5a18;
  --err: #c4442e;         /* Только ошибки валидации */
  --err-soft: #e08a78;

  /* Текст на тёмном */
  --text: #f5f5f1;
  --text-2: #b9bcb4;
  --text-3: #8d9188;
  --text-4: #7d8177;
  --text-nav: #dde0d9;

  /* Текст на светлом. #8D9188 на светлом даёт ≈2,6:1 и не проходит
     по доступности — для вторичного текста используем #5C6158 (≈5,4:1). */
  --ink: #181a17;
  --ink-2: #3a3e37;
  --ink-3: #5c6158;

  /* Линии */
  --line: rgba(245, 245, 241, 0.1);
  --line-strong: rgba(245, 245, 241, 0.16);
  --line-light: rgba(24, 26, 23, 0.12);
  --line-light-strong: rgba(24, 26, 23, 0.22);

  /* Геометрия */
  --r-sm: 8px;
  --r-md: 12px;
  --wrap: 1320px;
  --gut: 24px;

  /* Ритм */
  --sec-y: 84px;
  --header-h: 74px;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Текущий контекст текста. Переопределяется поверхностью, а не секцией,
     поэтому тёмная карточка внутри светлой секции остаётся читаемой.
     --fg-accent — акцентный текст: на тёмном --accent-soft, на светлом
     --accent-ink. Всегда бери его вместо них напрямую, иначе цвет
     привязывается к поверхности и ломается при переносе блока. */
  --fg: var(--text);
  --fg-2: var(--text-2);
  --fg-3: var(--text-3);
  --fg-line: var(--line);
  --fg-accent: var(--accent-soft);
  --fg-accent-hover: var(--accent-hover);
}

/* Тёмный контекст */
.on-dark,
.sec--dark,
.sec--surface,
.hero,
.phero,
.card,
.tile,
.speclist__row,
.doc-card,
.manager,
.form--dark,
.acc--dark .acc__item,
.header,
.topbar,
.footer,
.mobilebar {
  --fg: var(--text);
  --fg-2: var(--text-2);
  --fg-3: var(--text-3);
  --fg-line: var(--line);
  --fg-accent: var(--accent-soft);
  --fg-accent-hover: var(--accent-hover);
  --st-ok: #7fbf8b;
  --st-warn: #d9b25c;
  color: var(--fg);
}

/* Светлый контекст */
.on-light,
.sec--light,
.card--light,
.form-panel,
.modal__box,
.ptable-wrap,
.pcard,
.acc__item,
.dropzone.on-light {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-line: var(--line-light);
  --fg-accent: var(--accent-ink);
  --fg-accent-hover: #8f3d0e;
  --st-ok: var(--ok-ink);
  --st-warn: var(--warn-ink);
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   Сброс и база
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* Ссылка берёт акцент из контекста поверхности: на светлой секции
   --accent (#e86e27) даёт всего 2,8:1 и не проходит по доступности,
   поэтому там подставляется тёмный --accent-ink. */
a {
  color: var(--fg-accent);
  text-decoration: none;
}

a:hover {
  color: var(--fg-accent-hover);
}

a[href^="tel:"] {
  white-space: nowrap;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

p {
  margin: 0;
}

input,
select,
button,
textarea {
  font-family: inherit;
  font-size: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--accent);
  color: #14150f;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #14150f;
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Раскладка
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.wrap--narrow {
  max-width: 880px;
}

.sec {
  padding: var(--sec-y) 0;
}

.sec--tight {
  padding: 56px 0;
}

.sec--dark {
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--line);
}

.sec--surface {
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--line);
}

.sec--light {
  background: var(--light);
  color: var(--ink);
}

/* Диагональные насечки ~72° — только как фон разделителей, номеров шагов
   и пустых состояний. Не под текстом и не более одного раза на экран. */
.ribbed {
  background-image: repeating-linear-gradient(
    72deg,
    rgba(245, 245, 241, 0.1) 0 1.5px,
    transparent 1.5px 13px
  );
  background-color: var(--surface-2);
}

.ribbed--light {
  background-image: repeating-linear-gradient(
    72deg,
    rgba(24, 26, 23, 0.07) 0 1.5px,
    transparent 1.5px 14px
  );
  background-color: #efeee8;
}

.ribbed--faint {
  background-image: repeating-linear-gradient(
    72deg,
    rgba(245, 245, 241, 0.05) 0 2px,
    transparent 2px 18px
  );
}

/* --------------------------------------------------------------------------
   Типографика
   -------------------------------------------------------------------------- */

.eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.eyebrow--muted {
  color: var(--fg-3);
}


.h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
}

.h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
}

.h4 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 62ch;
}


.muted {
  color: var(--fg-3);
}


.small {
  font-size: 13.5px;
  line-height: 1.5;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.num {
  font-variant-numeric: tabular-nums;
}

.prose {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fg-2);
}

.prose h2 {
  font-size: 27px;
  margin: 44px 0 14px;
  color: var(--fg);
}

.prose h3 {
  font-size: 20px;
  margin: 32px 0 10px;
  color: var(--fg);
  letter-spacing: -0.015em;
}

.prose p {
  margin: 0 0 16px;
}

.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 8px;
}

.prose > *:first-child {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   Заголовок секции
   -------------------------------------------------------------------------- */

.sec-head {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 32px;
}

.sec-head__aside {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-head p {
  margin-top: 10px;
  max-width: 64ch;
  font-size: 15.5px;
  color: var(--fg-3);
}


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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--accent);
  color: #14150f;
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: #14150f;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: rgba(232, 110, 39, 0.6);
  color: var(--text);
}

.btn--ghost-light {
  background: transparent;
  border-color: var(--line-light-strong);
  color: var(--ink);
}

.btn--ghost-light:hover {
  background: rgba(24, 26, 23, 0.05);
  color: var(--ink);
}

.btn--dark {
  background: var(--ink);
  color: var(--text);
}

.btn--dark:hover {
  background: #2a2d27;
  color: var(--text);
}

.btn--outline-accent {
  background: rgba(232, 110, 39, 0.08);
  border-color: rgba(232, 110, 39, 0.5);
  color: var(--accent-ink);
}

.btn--outline-accent:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #14150f;
}

.btn--lg {
  min-height: 54px;
  font-size: 16.5px;
}

.btn--sm {
  min-height: 38px;
  padding: 0 15px;
  font-size: 13.5px;
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Карточки и плитки
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px;
}

.card--light {
  background: var(--white);
  border-color: var(--line-light);
  color: var(--ink);
}

.card--flat {
  background: var(--surface-2);
  border-color: transparent;
}

/* Решётка из плиток, разделённых волосяной линией */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.tile {
  background: var(--surface);
  padding: 26px 22px;
}

.tile--wide {
  grid-column: 1 / -1;
}

.tile__n {
  font: 500 12px/1 var(--mono);
  color: var(--fg-accent);
  margin-bottom: 14px;
}

.tile__label {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.tile__title {
  font-size: 17.5px;
  font-weight: 600;
  margin-bottom: 9px;
  letter-spacing: -0.01em;
}

.tile__text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-3);
}

/* Крупные номера шагов */
.step__n {
  font-size: 30px;
  font-weight: 700;
  color: rgba(232, 110, 39, 0.9);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1;
}

/* Строка «характеристика → значение» */
.speclist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.speclist__row {
  background: var(--surface);
  padding: 18px 22px;
  display: flex;
  gap: 18px;
  align-items: baseline;
}

.speclist__key {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--fg-3);
  width: 150px;
  flex: none;
  text-transform: uppercase;
}

.speclist__val {
  font-size: 15px;
  line-height: 1.45;
  flex: 1;
}

/* --------------------------------------------------------------------------
   Статусы
   -------------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.status--ok { color: var(--st-ok); }
.status--ok::before { background: var(--ok); }
.status--warn { color: var(--st-warn); }
.status--warn::before { background: var(--warn); }


/* Маркер-квадрат акцентом */
.dot-list {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 15.5px;
  color: var(--text-nav);
}

.dot-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot-list__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent);
  flex: none;
}

.dot-list__sep {
  width: 1px;
  height: 16px;
  background: var(--line-strong);
}

/* --------------------------------------------------------------------------
   Формы
   -------------------------------------------------------------------------- */

.field {
  display: block;
}

.field__label {
  display: block;
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 7px;
}

.input,
.select,
.textarea {
  width: 100%;
  height: 48px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-light-strong);
  background-color: var(--white);
  padding: 0 12px;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: rgba(24, 26, 23, 0.4);
}

.input::placeholder,
.textarea::placeholder {
  color: #9aa094;
}

.input--num {
  font-variant-numeric: tabular-nums;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235C6158' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.textarea {
  height: 92px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

/* Поля на тёмном фоне.
   Только background-color: сокращённое `background` сбросило бы
   background-repeat/position и размножило стрелку селекта по всему полю. */
.form--dark .input,
.form--dark .select,
.form--dark .textarea {
  background-color: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

.form--dark .input::placeholder,
.form--dark .textarea::placeholder {
  color: var(--text-3);
}


.form--dark .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238D9188' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.form-grid--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-3);
}


.form-legal {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-3);
  padding-top: 12px;
  border-top: 1px solid var(--fg-line);
}

.form-legal a {
  color: var(--fg);
  text-decoration: underline;
}


/* Ошибка валидации */
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
  border-color: var(--err);
}

.field__error {
  display: none;
  font-size: 12.5px;
  color: var(--err);
  margin-top: 6px;
}

.field.has-error .field__error {
  display: block;
}

.form--dark .field__error {
  color: var(--err-soft);
}

/* Панель формы на светлом */
.form-panel {
  background: var(--light);
  border-radius: var(--r-md);
  padding: 28px;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.form-panel--flat {
  box-shadow: none;
  border: 1px solid var(--line-light);
  background: var(--white);
}

.form-panel__title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.form-panel__sub {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 20px;
}

/* Зона загрузки файла */
.dropzone {
  border: 1px dashed rgba(232, 110, 39, 0.5);
  background: rgba(232, 110, 39, 0.05);
  border-radius: var(--r-md);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:hover,
.dropzone.is-over {
  border-color: rgba(232, 110, 39, 0.8);
  background: rgba(232, 110, 39, 0.09);
}

.dropzone.is-filled {
  border-color: rgba(78, 154, 91, 0.55);
  background: rgba(78, 154, 91, 0.07);
  border-style: solid;
}

.dropzone__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.dropzone__hint {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
}


/* Сегмент-контрол «таблица / карточки» */
.segmented {
  display: flex;
  background: var(--light-3);
  border-radius: var(--r-sm);
  padding: 3px;
  flex: none;
}

.segmented__btn {
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.segmented__btn.is-active {
  background: var(--ink);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Таблица позиций
   На мобильном превращается в карточки — горизонтального скролла нет.
   -------------------------------------------------------------------------- */

.ptable-wrap {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  overflow: hidden;
}

.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--ink);
}

.ptable th {
  background: var(--light-3);
  padding: 13px 12px;
  text-align: left;
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.07em;
  color: var(--ink-3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-light);
  white-space: nowrap;
}

.ptable td {
  padding: 15px 12px;
  border-bottom: 1px solid rgba(24, 26, 23, 0.08);
  vertical-align: middle;
}

.ptable tbody tr:nth-child(even) {
  background: var(--light-2);
}

.ptable tbody tr:hover {
  background: #f5f3ec;
}

.ptable tbody tr:last-child td {
  border-bottom: none;
}

.ptable tbody tr.is-featured td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.ptable__name {
  font-size: 15px;
  font-weight: 500;
}

.ptable__name a {
  color: var(--ink);
}

.ptable__name a:hover {
  color: var(--accent-ink);
}

.ptable__tag {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.07em;
  color: var(--accent-ink);
  margin-top: 5px;
  text-transform: uppercase;
}

.ptable__price {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ptable td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ptable__act {
  text-align: right;
  white-space: nowrap;
}

/* Карточки позиций */
.pcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.pcard {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  padding: 20px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.pcard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.pcard__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pcard__title a { color: var(--ink); }
.pcard__title a:hover { color: var(--accent-ink); }

.pcard__sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 3px;
}

.pcard__specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid rgba(24, 26, 23, 0.1);
  border-bottom: 1px solid rgba(24, 26, 23, 0.1);
  margin-bottom: 16px;
  font-size: 13.5px;
}

.pcard__spec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pcard__spec span:first-child { color: var(--ink-3); }
.pcard__spec span:last-child { font-variant-numeric: tabular-nums; }

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
  margin-top: auto;
}

.pcard__price b {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pcard__price span {
  font-size: 14px;
  color: var(--ink-3);
}

/* Переключение таблица/карточки */
.view-table .pcards,
.view-cards .ptable-wrap {
  display: none;
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.topbar {
  border-bottom: 1px solid rgba(245, 245, 241, 0.09);
  font-size: 13px;
  color: var(--text-3);
  background: var(--bg);
}

.topbar__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 9px var(--gut);
  display: flex;
  align-items: center;
  gap: 24px;
}

.topbar__right {
  margin-left: auto;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.topbar a { color: var(--text-3); }
.topbar a:hover { color: var(--text-2); }

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(17, 18, 16, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 245, 241, 0.09);
}

.header__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gut);
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
}

.logo img {
  height: 30px;
  width: auto;
}

.logo__sub {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.2;
}

.nav {
  display: flex;
  gap: 26px;
  font-size: 15px;
  flex-wrap: wrap;
  min-width: 0;
}

.nav a {
  color: var(--text-nav);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--accent);
}

.header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.header__phone {
  text-align: right;
  white-space: nowrap;
}

.header__phone a {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.header__phone a:hover { color: var(--accent); }

.header__phone span {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.icon-btn:hover {
  border-color: rgba(232, 110, 39, 0.6);
}

.icon-btn img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}

.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  box-shadow: 0 -6px 0 var(--text), 0 6px 0 var(--text);
}

/* --------------------------------------------------------------------------
   Хлебные крошки
   -------------------------------------------------------------------------- */

.crumbs {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-3);
}

.crumbs ol {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px var(--gut);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--text-4);
}

.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Первый экран страницы (тёмный)
   -------------------------------------------------------------------------- */

.phero {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 60px 0 56px;
}

.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 56px;
  align-items: start;
}

/* Первый экран главной */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 64px;
  align-items: start;
}

/* Финальный CTA: текст с карточкой менеджера + короткая форма.
   Раскладка живёт здесь, а не в инлайне, иначе она не схлопывается
   на мобильном и форма уезжает под обрез секции. */
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
  gap: 64px;
  align-items: center;
}

/* Строка доверия: пять фактов, без выдуманных цифр */
.trust-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
}

.trust-row__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.trust-row__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent);
  flex: none;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Аккордеон
   -------------------------------------------------------------------------- */

.acc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line-light);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.acc__item {
  background: var(--light);
}

.acc__btn {
  width: 100%;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.35;
}

.acc__btn::after {
  content: "+";
  margin-left: auto;
  font-size: 22px;
  color: var(--fg-3);
  flex: none;
  width: 20px;
  text-align: center;
  font-weight: 400;
}

.acc__item.is-open .acc__btn::after {
  content: "−";
}

.acc__panel {
  display: none;
  padding: 0 60px 22px 4px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-2);
}

.acc__item.is-open .acc__panel {
  display: block;
}

/* Аккордеон на тёмном */
.acc--dark {
  background: var(--line);
  border-color: var(--line);
}

.acc--dark .acc__item { background: var(--bg); }


/* --------------------------------------------------------------------------
   Табы
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--fg-line);
  margin-bottom: 24px;
  overflow-x: auto;
}

.tabs__btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
}

.tabs__btn.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

/* --------------------------------------------------------------------------
   Плашка-заметка
   -------------------------------------------------------------------------- */

.note {
  border: 1px solid rgba(232, 110, 39, 0.4);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-soft);
  background: rgba(232, 110, 39, 0.05);
}

.note--light {
  color: var(--accent-ink);
  border-color: rgba(232, 110, 39, 0.45);
}

.note--plain {
  border-color: var(--fg-line);
  color: var(--fg-3);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Документы
   -------------------------------------------------------------------------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.doc-card {
  background: var(--bg);
  border: 1px solid rgba(245, 245, 241, 0.12);
  border-radius: var(--r-md);
  padding: 16px;
}

.doc-card__thumb {
  height: 150px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  text-align: center;
  font: 500 10px/1.6 var(--mono);
  color: rgba(245, 245, 241, 0.56);
  letter-spacing: 0.07em;
}

.doc-card__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.doc-card__text {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.45;
  margin-bottom: 12px;
}

.doc-card__links {
  display: flex;
  gap: 14px;
  font-size: 13.5px;
}

.doc-card__links a:last-child { color: var(--text-3); }

/* Плейсхолдер изображения */
.imgstub {
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 500 11px/1.6 var(--mono);
  color: rgba(245, 245, 241, 0.56);
  letter-spacing: 0.08em;
}

.imgstub--light {
  color: var(--ink-3);
}

/* Фото с подписью */
.figure {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

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

/* Затемнение к низу: на светлых участках фото подпись давала 2,75:1.
   Нижняя часть градиента усилена, а сама подпись сделана непрозрачной. */
.figure__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 18, 16, 0) 0%,
    rgba(17, 18, 16, 0.35) 45%,
    rgba(17, 18, 16, 0.78) 100%
  );
}

.figure__cap {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font: 500 11px/1 var(--mono);
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Карточка менеджера
   -------------------------------------------------------------------------- */

.manager {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid rgba(245, 245, 241, 0.12);
  border-radius: var(--r-md);
  padding: 20px 22px;
  max-width: 460px;
}

.manager__ava {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 9px/1.3 var(--mono);
  color: rgba(245, 245, 241, 0.56);
  text-align: center;
}

.manager__name {
  font-size: 16.5px;
  font-weight: 600;
}

.manager__role {
  font-size: 13.5px;
  color: var(--text-3);
  margin-top: 3px;
}

.manager__links {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-size: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.manager__links a:not(:first-child) { color: var(--text-3); }
.manager__links img { width: 15px; height: 15px; }

.inline-max {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* --------------------------------------------------------------------------
   Футер
   -------------------------------------------------------------------------- */

.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}

.footer__cols {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gut) 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px 28px;
}

.footer__title {
  font: 500 11px/1 var(--mono);
  color: var(--text-3);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.footer__links a { color: var(--text-nav); }
.footer__links a:hover { color: var(--accent); }
.footer__links a.is-muted { color: var(--text-3); }

.footer__about {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 34ch;
}

.footer__phone {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.footer__bottom {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut) 40px;
}

.footer__bottom-in {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  gap: 32px;
  font-size: 12.5px;
  color: var(--text-4);
}

.footer__bottom-in > :last-child {
  margin-left: auto;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Модальное окно «Получить расчёт»
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open { display: flex; }

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 11, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--light);
  border-radius: var(--r-md);
  padding: 28px;
  color: var(--ink);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-light);
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
}

.modal__close:hover { background: rgba(24, 26, 23, 0.05); }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Мобильная панель действий
   -------------------------------------------------------------------------- */

.mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(17, 18, 16, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
}

.mobilebar .btn { flex: 1; min-height: 52px; }
.mobilebar .icon-btn { width: 52px; height: 52px; }

/* --------------------------------------------------------------------------
   Утилиты
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack--sm { gap: 10px; }
.stack--lg { gap: 24px; }

.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
/* min-width:0 обязателен: у флекс-элемента min-width по умолчанию auto,
   поэтому поле не сжимается ниже своей внутренней ширины и строка
   с flex-wrap:nowrap вылезает за контейнер на узком экране. */
.flex-1 { flex: 1; min-width: 0; }
.ml-auto { margin-left: auto; }

/* Ценовой блок */
.pricetag__label {
  font: 500 11px/1 var(--mono);
  color: var(--text-3);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.pricetag__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pricetag__from {
  font-size: 19px;
  color: var(--text-3);
  font-weight: 500;
}

.pricetag__value {
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pricetag__unit {
  font-size: 19px;
  color: var(--text-3);
  font-weight: 500;
}

.pricetag__vat {
  font-size: 19px;
  color: var(--text-nav);
  font-weight: 500;
}

.pricetag__note {
  font-size: 14px;
  color: var(--text-3);
}

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

@media (max-width: 1180px) {
  .tiles--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: 18px; font-size: 14px; }
  .header__in { gap: 18px; }
}

@media (max-width: 1024px) {
  :root { --sec-y: 64px; }

  .header__phone { display: none; }
  .nav { display: none; }
  .burger { display: flex; }

  .header.is-open .nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
  }

  .header.is-open .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }

  .hero__grid,
  .phero__grid,
  .cta__grid,
  .grid--split,
  .grid--sidebar {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }

  .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { display: none; }
}

@media (max-width: 780px) {
  :root { --sec-y: 52px; --gut: 18px; }

  /* Кнопка «Получить расчёт» в шапке не помещается рядом с логотипом
     и бургером: на 375 px строка уезжала на 58 px и весь документ получал
     горизонтальный скролл. Ниже 780 px главное действие берёт на себя
     нижняя .mobilebar, поэтому кнопку в шапке скрываем. */
  .header__cta { display: none; }

  .sec-head {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .sec-head__aside { margin-left: 0; }

  .tiles--2,
  .tiles--3,
  .tiles--4,
  .tiles--6,
  .grid--2,
  .grid--3,
  .grid--4,
  .doc-grid,
  .pcards {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid--2,
  .form-grid--3,
  .form-grid--wide-left,
  .form-grid--wide-right {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust-row { grid-template-columns: minmax(0, 1fr); }

  /* Поля и кнопки 52 px, зоны нажатия ≥ 44 px */
  .input,
  .select {
    height: 52px;
    font-size: 16px; /* без зума на iOS */
  }

  .textarea { font-size: 16px; }
  .btn { min-height: 52px; }
  .btn--sm { min-height: 44px; }

  .form-panel,
  .card,
  .modal__box { padding: 20px; }

  .tile { padding: 20px 18px; }

  .speclist__row { flex-direction: column; gap: 6px; }
  .speclist__key { width: auto; }

  .acc__panel { padding-right: 4px; }

  /* Таблица → карточки */
  .ptable-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .ptable,
  .ptable tbody,
  .ptable tr,
  .ptable td {
    display: block;
    width: 100%;
  }

  .ptable thead { display: none; }

  .ptable tbody tr {
    background: var(--white);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 12px;
  }

  .ptable tbody tr:nth-child(even) { background: var(--white); }
  .ptable tbody tr:hover { background: var(--white); }

  .ptable tbody tr.is-featured {
    border-color: rgba(232, 110, 39, 0.45);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .ptable tbody tr.is-featured td:first-child { box-shadow: none; }

  .ptable td {
    padding: 7px 0;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
  }

  .ptable td::before {
    content: attr(data-label);
    font: 500 10.5px/1.4 var(--mono);
    letter-spacing: 0.07em;
    color: var(--ink-3);
    text-transform: uppercase;
    flex: none;
  }

  .ptable td:first-child {
    display: block;
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-light);
    margin-bottom: 8px;
  }

  .ptable td:first-child::before { content: none; }

  .ptable__act {
    display: block;
    padding-top: 14px;
    text-align: left;
  }

  .ptable__act::before { content: none; }
  .ptable__act .btn { width: 100%; }

  .footer__bottom-in {
    flex-direction: column;
    gap: 12px;
  }

  .footer__bottom-in > :last-child { margin-left: 0; }

  .mobilebar { display: flex; }
  body { padding-bottom: 76px; }

  .manager { flex-direction: column; align-items: flex-start; }

  .figure__cap { left: 12px; bottom: 12px; }

  .prose h2 { font-size: 23px; margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .header, .topbar, .mobilebar, .modal, .footer { display: none; }
  body { background: #fff; color: #000; }
}