/* ТехноПорт — Шахты, Примерная 12.
   Почерк: строго чёрное и белое, огромный гротеск, много воздуха,
   3D-сцена на весь первый экран. Цветных акцентов нет вообще —
   контраст держится на светлоте секций, а не на краске.

   Отстройка от других заказов студии: у «Мебель Парка» тёмный сайт с лаймом
   и антиквой, у «Диваныча» светлый лист с малиновым.

   Как работает инверсия: секция объявляет --btn-bg / --btn-fg / --rule,
   а кнопки и линии их читают. Поэтому одна и та же кнопка на чёрной секции
   белая, на светлой — чёрная, и дублировать правила не нужно. */

:root {
  --black: #000;
  --ink: #0a0a0b;
  --white: #fff;
  --paper: #f5f5f7;      /* светлые секции */
  --card: #fff;
  --grey: #6e6e73;       /* второстепенный текст на светлом */
  --grey-d: #98989f;     /* второстепенный на чёрном */
  --line: #d2d2d7;
  --line-d: #26262a;
  --nav-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* шапка висит поверх страницы, поэтому у всех целей ссылок
   отступ сверху — иначе заголовок секции уезжает под неё */
[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

body {
  font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--black);
  color: var(--white);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* тёмный контекст по умолчанию */
  --btn-bg: #fff;
  --btn-fg: #000;
  --rule: rgba(255,255,255,.24);
  --shine: rgba(0,0,0,.28);
  --hair: var(--line-d);          /* линия, от которой равняются шапки секций */

  /* одна колоночная сетка на весь сайт: правая колонка любого блока
     начинается на одной и той же вертикали — шапки секций, «почему мы»,
     отзывы, карта, конфигуратор и подвал стоят по одной линии */
  --grid: minmax(0, 1fr) minmax(0, 1.02fr);
  --grid-gap: clamp(30px, 5vw, 88px);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: min(1180px, 100% - 44px); margin-inline: auto; }

/* ---------- типографика ---------- */
.display {
  font-size: clamp(40px, 8.4vw, 104px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.045em;
}
.h2 {
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.038em;
}
.eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-d);
  margin-bottom: 18px;
}
.sec--light .eyebrow { color: var(--grey); }
.lede { font-size: clamp(16px, 1.7vw, 21px); color: var(--grey-d); max-width: 30em; margin-top: 20px; }
.lede b { color: var(--white); font-weight: 600; }
.sub { font-size: clamp(15px, 1.5vw, 19px); color: var(--grey); max-width: 34em; margin-top: 16px; }
.sec--dark .sub { color: var(--grey-d); }
.note { margin-top: 30px; font-size: 13.5px; color: var(--grey); }

/* ---------- кнопки ----------
   Все кнопки прозрачные: видно фон и сцену под ними. При наведении
   заливка поднимается снизу, текст переворачивается в контрастный,
   и поверх один раз проходит блик. Заливку и цвет текста берём
   из переменных секции — поэтому кнопка сама знает, где она стоит. */
.btn {
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 30px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -.012em;
  color: inherit; background: transparent;
  border: 1px solid var(--rule);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color .35s ease, border-color .35s ease, transform .2s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.22,.8,.24,1);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 22%, var(--shine) 50%, transparent 78%);
  transform: translateX(-130%);
}
.btn:hover { color: var(--btn-fg); border-color: var(--btn-bg); }
.btn:hover::before { transform: translateY(0); }
.btn:hover::after { transform: translateX(130%); transition: transform .9s ease .12s; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.btn--fill { border-color: color-mix(in srgb, var(--btn-bg) 55%, transparent); }
.btn--ghost, .btn--line { border-color: var(--rule); }
.btn--line { margin-top: 36px; }
.btn--block { width: 100%; }

/* ===================== ШАПКА ===================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  background: rgba(0,0,0,.6);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.nav.is-light {
  background: rgba(245,245,247,.76); border-bottom-color: rgba(0,0,0,.09); color: var(--ink);
}
.nav__in { height: var(--nav-h); display: flex; align-items: center; gap: 34px; }
.logo { font-weight: 800; font-size: 19px; letter-spacing: -.05em; color: inherit; }
.nav__menu { display: flex; gap: 30px; margin-right: auto; font-size: 15px; }
.nav__menu a { color: inherit; opacity: .72; transition: opacity .2s; }
.nav__menu a:hover { opacity: 1; }
.nav__cta { font-size: 15px; font-weight: 600; }
.burger { display: none; width: 26px; height: 18px; position: relative; }
.burger span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.burger span:first-child { top: 4px; } .burger span:last-child { bottom: 4px; }

/* ===================== 3D-СЦЕНА ===================== */
.stage { height: 100svh; min-height: 620px; position: relative; }
.stage__sticky {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(46% 52% at 72% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(120% 80% at 50% 0%, #17181b 0%, #000 62%),
    #000;
}
@media (max-width: 900px) {
  .stage__sticky { background:
    radial-gradient(60% 34% at 50% 42%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(120% 80% at 50% 0%, #17181b 0%, #000 62%), #000; }
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* затемнение слева: под ним заголовок читается поверх точек */
.stage__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,0) 58%);
}
@media (max-width: 900px) {
  .stage__scrim { background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.75) 100%); }
}
.stage__fallback {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 45%, rgba(255,255,255,.14), transparent 70%);
}

/* текст поверх сцены */
.chapter {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  width: min(1180px, 100% - 44px); margin-inline: auto;
  pointer-events: none;
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1);
}
.chapter.is-on { opacity: 1; transform: none; }
.chapter a { pointer-events: auto; }
.chapter__acts { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.scrollhint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-d);
  transition: opacity .4s ease;
}
.scrollhint span {
  width: 20px; height: 32px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; position: relative;
}
.scrollhint span::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px;
  border-radius: 2px; background: #fff; transform: translateX(-50%);
  animation: wheel 1.7s ease-in-out infinite;
}
@keyframes wheel { 0%,100% { top: 7px; opacity: 1 } 60% { top: 17px; opacity: .2 } }

/* ===================== ПОЧЕМУ МЫ =====================
   Две колонки: слева заголовок, справа цифры сеткой 2×2.
   В одну строку они растягивались на всю ширину, и под ними
   оставалась пустая чёрная полоса. */
.trust { display: grid; grid-template-columns: var(--grid); gap: var(--grid-gap); align-items: start; }
/* обе колонки начинаются от одной линии: слева тот же волосяной штрих
   и тот же отступ, что у первой строки цифр — тогда надзаголовок
   встаёт ровно на одну высоту с «5,0» */
.trust__intro .sub { margin-bottom: 34px; }

.facts { display: grid; grid-template-columns: 1fr 1fr; }
.fact { padding: 26px 0; border-top: 1px solid var(--hair); }
.fact:nth-child(odd) { padding-right: 32px; }
.fact:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line-d); }
.fact b {
  display: block; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700;
  letter-spacing: -.05em; line-height: 1;
}
.fact span { display: block; margin-top: 14px; font-size: 15px; color: var(--grey-d); line-height: 1.5; }

/* ---------- две плитки-перехода на отдельные страницы ---------- */
.tiles { display: grid; grid-template-columns: var(--grid); gap: var(--grid-gap); }
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(28px, 3.2vw, 44px);
  border: 1px solid var(--line-d); border-radius: 26px;
  background: radial-gradient(120% 90% at 20% 0%, #141417 0%, #000 72%);
  transition: border-color .35s ease, transform .35s cubic-bezier(.22,.8,.24,1);
}
.tile:hover { border-color: rgba(255,255,255,.34); transform: translateY(-4px); }
.tile .sub { margin-bottom: 34px; }
.tile .btn { margin-top: auto; pointer-events: none; }     /* кликается вся плитка */
.tile:hover .btn { color: var(--btn-fg); border-color: var(--btn-bg); }
.tile:hover .btn::before { transform: translateY(0); }

/* ===================== СЕКЦИИ ===================== */
.sec { padding: clamp(64px, 7.5vw, 108px) 0; }
.sec--light {
  background: var(--paper); color: var(--ink);
  --btn-bg: #0a0a0b; --btn-fg: #fff; --rule: rgba(0,0,0,.18); --shine: rgba(255,255,255,.3);
  --hair: var(--line);
}
.sec--dark { background: var(--black); color: var(--white); }
.sec--dark + .sec--dark { border-top: 1px solid var(--line-d); }   /* чтобы два чёрных экрана не слипались */
/* на высоком экране секция занимает почти весь кадр и стоит по центру,
   иначе после клика по «Почему мы» она выглядит узкой полосой */
#trust {
  min-height: 62svh; display: flex; align-items: center;
  padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(56px, 6vw, 84px);
}
#trust > .wrap { width: min(1180px, 100% - 44px); }
/* Шапка секции — одна сетка на весь сайт: волосяная линия сверху,
   слева надзаголовок и заголовок, справа пояснение. Раньше заголовок
   висел один в левой половине, а правая пустовала. */
.sec__head {
  display: grid; grid-template-columns: var(--grid);
  gap: var(--grid-gap); align-items: start;
  padding-top: 26px; border-top: 1px solid var(--hair);
  margin-bottom: clamp(36px, 4vw, 52px);
}
.sec__head .sub { margin-top: 0; }
.sec__head .chapter__acts { margin-top: 28px; }
.sec__head-r { padding-top: 6px; }        /* подгоняем текст под верхнюю линию шрифта заголовка */

/* та же линия и в блоке «Почему мы» */
.trust__intro { padding-top: 26px; border-top: 1px solid var(--hair); }

/* фильтры каталога */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.chip {
  height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  color: var(--grey); background: rgba(0,0,0,.045);
  transition: background .2s, color .2s;
}
.chip:hover { background: rgba(0,0,0,.09); color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; }

/* карточки товаров */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  position: relative; background: var(--card); border-radius: 20px; padding: 24px 22px 22px;
  display: flex; flex-direction: column; min-height: 300px;
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
}
.card.is-in { opacity: 1; transform: none; }
.card {
  transition: opacity .6s ease, transform .6s ease, box-shadow .35s ease;
}
.card:hover { box-shadow: 0 22px 50px rgba(0,0,0,.11); }
/* плашка «хит»/«новинка» — строкой над названием, а не поверх фото:
   в углу она налезала на картинку и обрезалась */
.card__tag {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 8px; min-height: 15px;
}
.card__ph {
  height: 158px; margin-bottom: 20px; border-radius: 14px; padding: 14px 0;
  background: linear-gradient(180deg, #f7f7f9 0%, #eeeef1 100%);
  display: grid; place-items: center; overflow: hidden;
}
.card__ph img { height: 100%; width: 100%; object-fit: contain; }

/* рисунок устройства вместо фотографии: пока фотопака нет, карточки
   выглядят как каталог, а не как таблица. Разметка — в devices.js */
.dev {
  display: block; height: 100%; width: auto; max-width: 82%;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.18));
  transition: transform .45s cubic-bezier(.22,.8,.24,1);
}
.card:hover .dev { transform: translateY(-6px) scale(1.04); }
.dev-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.dev--mac, .dev--imac, .dev--game { max-width: 92%; }
.dev--iphone, .dev--watch { max-width: 46%; }
.dev--ipad { max-width: 62%; }
.dev--audio { max-width: 66%; }

.card__price { margin-top: auto; padding-top: 20px; font-size: 22px; font-weight: 600; letter-spacing: -.028em; }
.card__price small { display: block; font-size: 12px; font-weight: 400; color: var(--grey); margin-top: 5px; letter-spacing: 0; }
.card__ask {
  margin-top: 16px; font-size: 15px; font-weight: 500;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; align-self: flex-start;
  transition: border-color .2s;
}
.card__ask:hover { border-color: var(--ink); }

/* ремонт */
.note--dark { color: var(--grey-d); }
.steps {
  list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin-top: clamp(50px, 6vw, 80px);
}
.steps li { counter-increment: step; padding-top: 26px; border-top: 1px solid var(--line-d); }
.steps li::before {
  content: "0" counter(step);
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .16em;
  color: var(--grey-d); margin-bottom: 16px;
}
.steps b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.steps span { display: block; margin-top: 10px; font-size: 15px; color: var(--grey-d); line-height: 1.55; }

.repair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.repair__col .btn { margin-top: 34px; }
.repair__list { display: flex; flex-direction: column; }
.rep {
  display: flex; align-items: baseline; gap: 16px;
  padding: 22px 0; border-top: 1px solid var(--line-d);
}
.rep:last-child { border-bottom: 1px solid var(--line-d); }
.rep__name { font-size: 18px; font-weight: 500; letter-spacing: -.022em; }
.rep__time { margin-left: auto; font-size: 14px; color: var(--grey-d); white-space: nowrap; }
.rep__price { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* ===================== ОТДЕЛЬНАЯ СТРАНИЦА ===================== */
.page { padding-top: var(--nav-h); }             /* нет первого экрана — уводим из-под шапки */
.page__first { padding-top: clamp(40px, 6vw, 76px); }
.nav__menu a.is-here { opacity: 1; font-weight: 600; }

.crumbs { font-size: 13.5px; color: var(--grey-d); margin-bottom: 34px; }
.crumbs a { border-bottom: 1px solid transparent; transition: border-color .2s; }
.crumbs a:hover { border-color: currentColor; }
.crumbs span { padding: 0 6px; opacity: .5; }

.cfg__facts {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  margin-top: clamp(56px, 7vw, 90px); padding-top: 40px; border-top: 1px solid var(--line-d);
}
.cfg__facts b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cfg__facts span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--grey-d); line-height: 1.5; }

/* ===================== КОНФИГУРАТОР ===================== */
.cfg { display: grid; grid-template-columns: var(--grid); gap: var(--grid-gap); align-items: stretch; }

.cfg__stage {
  position: relative; min-height: 470px; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line-d);
  background: radial-gradient(120% 90% at 50% 0%, #131316 0%, #000 70%);
  display: grid; place-items: center;
}
/* пятно света за устройством красится в выбранный цвет корпуса */
.cfg__glow {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: var(--body, #fff); filter: blur(80px); opacity: .34;
  transition: background .5s ease;
}
/* устройство на подиуме — векторный рисунок, корпус красится в выбранный цвет */
.cfg__shape {
  position: relative; display: grid; place-items: center;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.6));
  transition: width .55s cubic-bezier(.22,.8,.24,1), height .55s cubic-bezier(.22,.8,.24,1);
}
.cfg__art { display: block; width: 100%; height: 100%; }
.cfg__shape.is-phone { width: 172px; height: 344px; }
.cfg__shape.is-tablet { width: 268px; height: 363px; }
.cfg__shape.is-laptop { width: 420px; height: 275px; }
.cfg__shape.is-swap { animation: swap .5s cubic-bezier(.22,.8,.24,1); }
@keyframes swap {
  from { opacity: .25; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.cfg__caption {
  position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center; font-size: 13px; color: var(--grey-d);
}

.cfg__row { margin-bottom: 28px; }
.cfg__label {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-d); margin-bottom: 13px;
}
.cfg__label span { text-transform: none; letter-spacing: 0; color: #fff; font-weight: 500; }

.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opt {
  position: relative; z-index: 0; overflow: hidden;
  height: 42px; padding: 0 18px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: inherit;
  border: 1px solid var(--rule);
  transition: color .3s ease, border-color .3s ease;
}
.opt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg); transform: translateY(101%);
  transition: transform .4s cubic-bezier(.22,.8,.24,1);
}
.opt:hover { border-color: currentColor; }
.opt.is-active { color: var(--btn-fg); border-color: var(--btn-bg); }
.opt.is-active::before { transform: translateY(0); }

.swatches { display: flex; gap: 14px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sw); border: 1px solid rgba(255,255,255,.22);
  position: relative; transition: transform .25s ease;
}
.swatch:hover { transform: scale(1.09); }
.swatch::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0; transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
}
.swatch.is-active::after { opacity: 1; transform: none; }

.cfg__price { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-d); }
.cfg__amount { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -.045em; }
.cfg__amount.is-swap { animation: swap .45s ease; }
.cfg__hint { margin-top: 9px; font-size: 14px; color: var(--grey-d); max-width: 30em; }
.cfg__acts { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* отзывы */
.rev { display: grid; grid-template-columns: var(--grid); gap: var(--grid-gap); align-items: center; }
.rev__box {
  text-align: center; background: var(--card); border-radius: 20px; padding: 32px 20px;
  max-width: 320px;                       /* колонка широкая, сама плашка — нет */
}
.rev__score { font-size: 64px; font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.rev__stars { letter-spacing: .18em; margin-top: 12px; font-size: 15px; }
.rev__meta { margin-top: 12px; font-size: 13.5px; color: var(--grey); }
.rev__bars { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.rev__bars li { display: grid; grid-template-columns: 190px 1fr 48px; align-items: center; gap: 16px; font-size: 15px; }
.rev__bars i { height: 5px; border-radius: 3px; background: #e3e3e8; position: relative; }
.rev__bars i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v);
  border-radius: 3px; background: var(--ink);
}
.rev__bars b { text-align: right; font-weight: 600; }

/* как доехать */
.where__grid { display: grid; grid-template-columns: var(--grid); gap: var(--grid-gap); align-items: center; }
.where__rows { list-style: none; margin-top: 36px; }
.where__rows li {
  display: grid; grid-template-columns: 160px 1fr; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line-d); font-size: 16px;
}
.where__rows span { color: var(--grey-d); }
.where__rows b { font-weight: 500; }
.where__rows a { border-bottom: 1px solid rgba(255,255,255,.3); }
.where__rows a:hover { border-color: #fff; }
.where__acts { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.where__map { height: 400px; border-radius: 22px; overflow: hidden; background: #111; }
.where__map iframe { border: 0; filter: grayscale(1) contrast(1.06); }   /* карта тоже чёрно-белая */

/* форма */
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form input, .form textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 18px; outline: none; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.form input::placeholder, .form textarea::placeholder { color: #9a9aa0; }
.form input:focus, .form textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 4px rgba(0,0,0,.07);
}
.form .hp { position: absolute; left: -9999px; }
.form__note { font-size: 12.5px; color: var(--grey); }
.form__ok { padding: 14px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 500; }

/* подвал */
.foot { background: var(--black); padding: 56px 0 50px; border-top: 1px solid var(--line-d); }
.foot__in { display: grid; grid-template-columns: var(--grid); gap: var(--grid-gap); align-items: start; }
.logo--foot { font-size: 26px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; font-size: 14.5px; color: var(--grey-d); line-height: 1.7; }
.foot__cols a:hover { color: #fff; }
.foot__small { font-size: 13px; }

/* ===================== АДАПТИВ ===================== */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .repair__grid, .where__grid, .rev, .cfg { grid-template-columns: 1fr; gap: 42px; }
  .rev__box { max-width: none; }
  .cfg__facts { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .rev__bars li { grid-template-columns: 150px 1fr 44px; }
  .trust, .sec__head { grid-template-columns: 1fr; gap: 26px; }
  .sec__head-r { padding-top: 0; }
  .tiles, .steps { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav__menu { display: none; }
  .burger { display: block; }
  .nav__menu.is-open {
    display: flex; flex-direction: column; gap: 18px;
    position: fixed; inset: var(--nav-h) 0 auto 0; padding: 26px 22px 30px;
    background: rgba(0,0,0,.94); backdrop-filter: blur(20px); font-size: 19px;
  }
  .nav.is-light .nav__menu.is-open { background: rgba(245,245,247,.96); }
  .nav__cta { display: none; }
  .stage { min-height: 560px; }
  .chapter { justify-content: flex-start; padding-top: 15vh; }
  .cards { grid-template-columns: 1fr; }
  .where__map { height: 320px; }
  /* на телефоне подиум ниже, а рисунок мельче — иначе устройство
     наезжает на подпись под ним */
  .cfg__stage { min-height: 380px; padding-bottom: 34px; }
  .cfg__shape.is-phone { width: 132px; height: 264px; }
  .cfg__shape.is-tablet { width: 196px; height: 265px; }
  .cfg__shape.is-laptop { width: 280px; height: 183px; }
  .cfg__facts { grid-template-columns: 1fr; }
  .cfg__shape.is-laptop { width: 260px; height: 162px; }
  .foot__cols { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { padding-right: 0; }
  .fact:nth-child(even) { padding-left: 0; border-left: 0; }
  .rev__bars li { grid-template-columns: 1fr 90px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .chapter { opacity: 1 !important; transform: none !important; }
}