/* ---------------------------------------------------------------------------
   Демонстрационный пример: лендинг детейлинг-центра «Автостиль 66».
   Веб-студия Ириночи. Страницы закрыты от индексации.

   НАЗВАНИЕ ФИРМЫ. Проверено поиском 01.08.2026 по строкам
   «"Автостиль 66" детейлинг Екатеринбург» и «"Автостиль 66"».
   Действующего детейлинг-центра с таким именем в Екатеринбурге нет:
   в выдаче по городу — Detail66, VRRUM, LOCAUTO PLUS, «Форма Детейлинг»,
   а «Автостиль 66» находится только как адрес магазина запчастей
   в Биробиджане (Пионерская, 66) — другая отрасль и другой регион.
   Имя оставлено как в задании, запасные варианты не понадобились.

   ОСОЗНАННОЕ ОТСТУПЛЕНИЕ ОТ СПЕКИ. Вся графика холодная металлическая
   (градиент #E6ECF2 → #8E9AA6), а кнопка действия — тёплая оранжевая
   #FF6B2C. Кнопка на лендинге обязана кричать: металл на металле её топит,
   заявка перестаёт читаться как главное действие страницы.

   ОФОРМЛЕНИЕ. Ведущий приём — «разрез защиты» на первом экране: слои
   керамики, плёнки, лака и металла показаны как в техническом чертеже,
   с выносками и толщинами. Второй приём — блик: диагональная полоса
   холодного света, как от лампы в боксе. Он же вместо фотографий в
   разделе «Работы»: каждая плита — фрагмент кузова с бликом и дугой арки.
   Третий — срез угла, как у подрезанной ножом плёнки: на кнопках,
   плитах работ и номерах шагов.
--------------------------------------------------------------------------- */

/* --- переменные ---------------------------------------------------------- */

:root {
  /* плашка «демо» — общий слой берёт цвета отсюда */
  --demo-fon: #16181D;
  --demo-tekst: #F2F3F5;
  --demo-knopka-fon: #FF6B2C;
  --demo-knopka-tekst: #12140F;

  /* палитра примера */
  --fon: #0E0F12;
  --plita: #16181D;
  --plita-verh: #1B1E25;
  --granica: #24272E;
  --granica-svet: #363B45;
  --tekst: #F2F3F5;
  --tusklo: #9AA0A8;
  --metall: linear-gradient(135deg, #E6ECF2, #8E9AA6);
  --aktsent: #FF6B2C;
  --aktsent-tekst: #12140F;
  --aktsent-tenj: rgba(255, 107, 44, .28);

  --shrift-zag: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --shrift-osn: 'Golos Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius: 3px;
  --srez: 16px;              /* глубина срезанного угла */
  --shapka-vysota: 72px;
}

/* --- сброс --------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 400 16px/1.62 var(--shrift-osn);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid #E6ECF2;
  outline-offset: 3px;
  border-radius: 1px;
}

html { scroll-behavior: smooth; }

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

/* --- сетка и общие мелочи ------------------------------------------------ */

.obolochka {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.razdel {
  padding: clamp(56px, 8vw, 104px) 0;
  scroll-margin-top: calc(var(--shapka-vysota) + 12px);
}

.razdel--temnee { background: #0B0C0F; }

.skrytno {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.propusk {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--aktsent);
  color: var(--aktsent-tekst);
  font-weight: 600;
  text-decoration: none;
  transition: top .18s;
}
.propusk:focus { top: 12px; }

/* --- шапка раздела ------------------------------------------------------- */

.razdel__shapka {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  column-gap: 56px;
  align-items: end;
  margin-bottom: clamp(28px, 4.2vw, 52px);
}

.nadglavie {
  grid-column: 1; grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--tusklo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.nadglavie::before {
  content: '';
  flex: 0 0 auto;
  width: 34px; height: 1px;
  background: var(--metall);
}

.zaglavie {
  grid-column: 1; grid-row: 2;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

.lid {
  grid-column: 2; grid-row: 2;
  padding-bottom: 5px;
  color: var(--tusklo);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .razdel__shapka { grid-template-columns: 1fr; }
  .lid { grid-column: 1; grid-row: 3; margin-top: 14px; padding-bottom: 0; }
}

/* Два отступления от общей шапки раздела, чтобы страница не читалась
   как семь одинаковых слотов подряд. Оба продиктованы содержимым,
   а не желанием разнообразия. */

/* «Работы» — галерея, её шапке хватает одной строки-подписи с чертой:
   надзаголовок, название и пояснение на одной базовой линии. */
.razdel__shapka--stroka {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--granica);
}
.razdel__shapka--stroka .nadglavie { margin-bottom: 0; }
.razdel__shapka--stroka .zaglavie { font-size: clamp(1.3rem, 2.6vw, 1.85rem); }
/* margin-top обнулён намеренно: у флекса с align-items: baseline верхний
   отступ сдвинул бы строку с базовой линии заголовка. Зазор при переносе
   даёт row-gap. */
.razdel__shapka--stroka .lid {
  margin-top: 0;
  margin-left: auto;
  max-width: 52ch;
  padding-bottom: 0;
}

/* «Вопросы» — список, он читается узкой колонкой, а заголовок встаёт сбоку. */
.voprosy__setka {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
}
.razdel__shapka--sboku { display: block; margin-bottom: 0; }
.razdel__shapka--sboku .zaglavie { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.razdel__shapka--sboku .lid { margin-top: 16px; padding-bottom: 0; }

@media (max-width: 900px) {
  .razdel__shapka--stroka .lid { margin-left: 0; }
  .voprosy__setka { grid-template-columns: 1fr; }
  .razdel__shapka--sboku { margin-bottom: 28px; }
}

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

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, color .16s, box-shadow .16s, border-color .16s;
}

/* Срезанный угол нарисован фоном, а не clip-path: clip-path обрезал бы
   и обводку фокуса, кнопка стала бы недоступной с клавиатуры. */
.knopka--glavnaya {
  background: linear-gradient(225deg, transparent 0 12px, var(--aktsent) 12px);
  color: var(--aktsent-tekst);
  box-shadow: 0 10px 30px -14px var(--aktsent-tenj);
}
.knopka--glavnaya:hover {
  background: linear-gradient(225deg, transparent 0 12px, #FF7F49 12px);
  box-shadow: 0 14px 34px -12px var(--aktsent-tenj);
}

.knopka--vtoraya {
  background: transparent;
  border: 1px solid var(--granica);
  color: var(--tekst);
  border-radius: var(--radius);
}
.knopka--vtoraya:hover { border-color: var(--granica-svet); background: rgba(255, 255, 255, .03); }

.knopka--shirokaya { width: 100%; }

/* --- шапка сайта --------------------------------------------------------- */

.shapka {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(14, 15, 18, .86);
  border-bottom: 1px solid var(--granica);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.shapka__vnutri {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--shapka-vysota);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo__znak { flex: 0 0 auto; display: block; }

.logo__chislo {
  background-image: var(--metall);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

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

.menyu__spisok {
  display: flex;
  align-items: center;
  gap: 22px;
}

.menyu__ssylka {
  position: relative;
  padding: 4px 0;
  color: var(--tusklo);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s;
}
.menyu__ssylka::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--metall);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.menyu__ssylka:hover { color: var(--tekst); }
.menyu__ssylka:hover::after { transform: scaleX(1); }

.menyu__telefon {
  font-family: var(--shrift-osn);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}

.menyu__knopka { padding: 11px 20px; font-size: 14px; }

.burger {
  display: none;
  margin-left: auto;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--granica);
  border-radius: var(--radius);
  cursor: pointer;
}

.burger__polosa {
  display: block;
  width: 20px; height: 2px;
  background: var(--tekst);
}
.burger__polosa + .burger__polosa { margin-top: 4px; }

@media (max-width: 900px) {
  .burger { display: block; }

  .menyu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 8px 24px 24px;
    background: #101216;
    border-bottom: 1px solid var(--granica);
  }
  .menyu.menyu--otkryto { display: flex; }

  .menyu__spisok { flex-direction: column; align-items: stretch; gap: 0; }
  .menyu__ssylka {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--granica);
    color: var(--tekst);
    font-size: 16px;
  }
  .menyu__ssylka::after { display: none; }
  .menyu__telefon { display: block; padding: 18px 0 14px; font-size: 20px; }
  .menyu__knopka { padding: 15px 26px; font-size: 15px; }
}

@media (max-width: 600px) {
  .menyu { padding: 8px 16px 20px; }
  .logo { font-size: 14px; gap: 9px; }
}

/* --- первый экран -------------------------------------------------------- */

.ekran {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 92px) 0 clamp(44px, 6vw, 76px);
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(142, 154, 166, .18), transparent 58%),
    linear-gradient(168deg, #14161B 0%, #0E0F12 54%, #0B0C0F 100%);
}

/* Блик лампы в боксе: один проход при загрузке, потом стоит на месте. */
.ekran::before {
  content: '';
  position: absolute;
  inset: -25% -18%;
  pointer-events: none;
  background: linear-gradient(107deg,
    transparent 34%,
    rgba(230, 236, 242, .05) 42%,
    rgba(230, 236, 242, .16) 48%,
    rgba(230, 236, 242, .05) 54%,
    transparent 63%);
  animation: blik 1.5s cubic-bezier(.19, .68, .32, 1) .15s both;
}

@keyframes blik {
  from { transform: translateX(-46%); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translateX(0); opacity: 1; }
}

.ekran__setka {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.ekran__nadglavie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--tusklo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ekran__nadglavie::before {
  content: '';
  width: 34px; height: 1px;
  background: var(--metall);
}

.ekran__zagolovok {
  max-width: 15ch;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}

.ekran__podzagolovok {
  max-width: 46ch;
  margin-top: 22px;
  color: var(--tusklo);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
}

.ekran__knopki {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.fakty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(34px, 4.5vw, 54px);
  padding-top: 26px;
  border-top: 1px solid var(--granica);
}

.fakt { min-width: 0; padding: 4px 18px 4px 0; }
.fakt + .fakt { padding-left: 28px; border-left: 1px solid var(--granica); }

.fakt__chislo {
  display: block;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.fakt__podpis {
  display: block;
  margin-top: 7px;
  color: var(--tusklo);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .ekran__setka { grid-template-columns: 1fr; }
  .ekran__zagolovok { max-width: 18ch; }
}

@media (max-width: 640px) {
  .fakty { grid-template-columns: 1fr; }
  .fakt { padding-right: 0; }
  .fakt + .fakt {
    margin-top: 18px; padding-top: 18px; padding-left: 0;
    border-left: 0; border-top: 1px solid var(--granica);
  }
}

/* --- разрез защиты (главный приём страницы) ------------------------------ */

.razrez {
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, var(--plita-verh), var(--plita));
  border: 1px solid var(--granica);
  border-radius: var(--radius);
}

.razrez__zagolovok {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tusklo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.razrez__zagolovok::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--metall);
}

.razrez__stopka {
  display: grid;
  grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
  margin-top: 22px;
}

.razrez__stolb {
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
}

.razrez__sloy { display: block; }

.razrez__sloy--keramika {
  height: 12px;
  background: linear-gradient(100deg, #E6ECF2, #B7C1CB 46%, #8E9AA6);
}
.razrez__sloy--plyonka {
  height: 62px;
  background:
    linear-gradient(180deg, rgba(230, 236, 242, .26), rgba(230, 236, 242, .05)),
    linear-gradient(107deg, transparent 40%, rgba(230, 236, 242, .16) 50%, transparent 62%);
  border-top: 1px solid rgba(230, 236, 242, .35);
}
.razrez__sloy--lak {
  height: 24px;
  background: #2D323B;
  border-top: 1px solid rgba(230, 236, 242, .14);
}
.razrez__sloy--kuzov {
  height: 72px;
  background:
    repeating-linear-gradient(122deg, rgba(230, 236, 242, .055) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #1B1E24, #0F1114);
  border-top: 1px solid rgba(230, 236, 242, .12);
}

.razrez__podpisi {
  position: relative;
  height: 170px;
  padding-left: 26px;
}

.razrez__podpis {
  position: absolute;
  left: 26px;
  top: var(--y);
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.2;
}

.razrez__podpis::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 18px; height: 1px;
  background: var(--granica-svet);
}

.razrez__imya { font-weight: 600; }
.razrez__znachenie {
  color: var(--tusklo);
  font-variant-numeric: tabular-nums;
}

.razrez__snoska {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--granica);
  color: var(--tusklo);
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 420px) {
  .razrez { padding: 18px 16px 16px; }
  .razrez__stopka { grid-template-columns: 64px minmax(0, 1fr); }
  .razrez__podpis { font-size: 12px; }
}

/* --- услуги -------------------------------------------------------------- */

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

.usluga {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: var(--plita);
  border: 1px solid var(--granica);
  border-radius: var(--radius);
  transition: border-color .18s, background-color .18s;
}
.usluga:hover { border-color: var(--granica-svet); background: var(--plita-verh); }

.usluga__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  padding: 4px 9px;
  border: 1px solid var(--granica);
  border-radius: 2px;
  color: var(--tusklo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.usluga__nazvanie {
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: -.03em;
  overflow-wrap: break-word;
}

.usluga__opisanie {
  margin-top: 12px;
  color: var(--tusklo);
  font-size: 14px;
  line-height: 1.58;
}

.usluga__nizhe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

/* Цены набраны основным гротеском, а не Unbounded: Unbounded оставлен
   заголовкам, а цифры с ₽ в мелком кегле читаются в текстовом шрифте лучше.
   Знак ₽ рисует сам Golos Text — в shrifty.css для него есть подмножество
   U+20BD. Ничего ему не подкручиваем: у Golos подключены только 400 и 600,
   и любой font-weight: 700 браузер досинтезировал бы, знак становился
   толще и выше цифр. */
.cena {
  font-family: var(--shrift-osn);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.usluga__srok {
  color: var(--tusklo);
  font-size: 13px;
  white-space: nowrap;
}

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

/* --- работы -------------------------------------------------------------- */

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

.rabota { min-width: 0; }

/* Заглушка вместо фотографии: фрагмент кузова — блик лампы, дуга арки
   и подрезанный угол плёнки. Ни одного растрового файла. */
.rabota__plita {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(var(--ugol, 112deg),
      transparent 34%,
      rgba(230, 236, 242, .07) 43%,
      rgba(230, 236, 242, .26) 49%,
      rgba(230, 236, 242, .07) 55%,
      transparent 66%),
    linear-gradient(158deg, #1C1F26 0%, #101217 58%, #16181D 100%);
  clip-path: polygon(0 0, calc(100% - var(--srez)) 0, 100% var(--srez), 100% 100%, 0 100%);
  transition: filter .25s;
}
.rabota:hover .rabota__plita { filter: brightness(1.14); }

/* дуга колёсной арки / плечевая линия кузова */
.rabota__plita::before {
  content: '';
  position: absolute;
  left: var(--duga-x, -34%);
  top: var(--duga-y, 34%);
  width: var(--duga-w, 168%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border-top: 1px solid rgba(230, 236, 242, .24);
  box-shadow: 0 -8px 0 -7px rgba(230, 236, 242, .12);
}

.rabota__nomer {
  position: absolute;
  left: 14px; bottom: 12px;
  color: rgba(242, 243, 245, .62);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.rabota__nazvanie {
  margin-top: 15px;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.34;
  letter-spacing: -.03em;
  overflow-wrap: break-word;
}

.rabota__spec {
  margin-top: 7px;
  color: var(--tusklo);
  font-size: 13px;
  line-height: 1.45;
}

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

/* --- цены ---------------------------------------------------------------- */

.tablica-ramka { position: relative; }

.tablica-obolochka {
  overflow-x: auto;
  border: 1px solid var(--granica);
  border-radius: var(--radius);
  background: var(--plita);
}

.tablica {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.tablica th, .tablica td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--granica);
  vertical-align: middle;
}

.tablica thead th {
  background: var(--plita-verh);
  color: var(--tusklo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tablica tbody tr:last-child th,
.tablica tbody tr:last-child td { border-bottom: 0; }

.tablica tbody th {
  font-weight: 600;
  font-size: 14.5px;
  min-width: 240px;
}

.tablica__cena {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tablica__srok { color: var(--tusklo); white-space: nowrap; }

.pod-tablicey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 16px;
  color: var(--tusklo);
  font-size: 13.5px;
}

.pod-tablicey__vazhno { color: var(--tekst); font-weight: 600; }

/* Ниже 760 px таблица не влезает и ездит вбок. Чтобы обрубленная у правого
   края цена не читалась как поломка, край гасим затемнением, а подсказку
   ставим вплотную под таблицу — она должна попасться на глаза раньше,
   чем сноска про осмотр. Затемнение живёт на рамке, а не внутри
   прокручиваемой обёртки, иначе уехало бы вместе с таблицей. */
.podskazka-prokrutki { display: none; }

@media (max-width: 760px) {
  .tablica-ramka::after {
    content: '';
    position: absolute;
    top: 1px; right: 1px; bottom: 1px;
    width: 54px;
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(90deg, rgba(22, 24, 29, 0), rgba(11, 12, 15, .96));
  }

  .podskazka-prokrutki {
    display: block;
    margin-top: 10px;
    color: var(--tusklo);
    font-size: 12.5px;
    line-height: 1.4;
  }

  .pod-tablicey { margin-top: 22px; }
}

/* --- как работаем -------------------------------------------------------- */

.shagi {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.shagi::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 21px;
  height: 1px;
  background: linear-gradient(90deg, var(--granica-svet), var(--granica) 70%, transparent);
}

.shag { position: relative; display: flex; flex-direction: column; min-width: 0; }

.shag__nomer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 44px; height: 44px;
  background: linear-gradient(225deg, transparent 0 10px, var(--plita-verh) 10px);
  color: var(--tekst);
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
}

.shag__nomer::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 12px; height: 1px;
  background: var(--metall);
}

.shag__nazvanie {
  margin-top: 18px;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.34;
  letter-spacing: -.03em;
}

.shag__tekst {
  margin-top: 10px;
  color: var(--tusklo);
  font-size: 14px;
  line-height: 1.58;
}

.shag__vremya {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  color: var(--tusklo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .shagi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .shagi::before { display: none; }
}
@media (max-width: 560px) { .shagi { grid-template-columns: 1fr; gap: 28px; } }

/* --- отзывы -------------------------------------------------------------- */

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

.otzyv {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--plita);
  border: 1px solid var(--granica);
  border-radius: var(--radius);
}

.otzyv__tekst {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.62;
}

/* Подпись прижата к низу, чтобы имена в ряду стояли на одной линии. */
.otzyv__kto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--granica);
  font-style: normal;
}

.otzyv__bukva {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  background: var(--metall);
  color: #12140F;
  border-radius: 2px;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 14px;
}

.otzyv__imya { display: block; font-weight: 600; font-size: 14px; }
.otzyv__mashina { display: block; margin-top: 2px; color: var(--tusklo); font-size: 12.5px; }

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

/* --- вопросы ------------------------------------------------------------- */

.voprosy { border-top: 1px solid var(--granica); }

.vopros {
  border-bottom: 1px solid var(--granica);
}

.vopros__zagolovok {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: -.03em;
  transition: color .15s;
}
.vopros__zagolovok::-webkit-details-marker { display: none; }
.vopros__zagolovok:hover { color: #FFFFFF; }

.vopros__znak {
  position: relative;
  flex: 0 0 auto;
  order: 2;
  margin-left: auto;
  width: 20px; height: 20px;
}
.vopros__znak::before,
.vopros__znak::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--aktsent);
  transform: translate(-50%, -50%);
  transition: transform .22s;
}
.vopros__znak::before { width: 14px; height: 2px; }
.vopros__znak::after  { width: 2px; height: 14px; }
.vopros[open] .vopros__znak::after { transform: translate(-50%, -50%) scaleY(0); }

.vopros__otvet {
  max-width: 78ch;
  padding: 0 46px 22px 0;
  color: var(--tusklo);
  font-size: 14.5px;
  line-height: 1.62;
}

/* --- заявка -------------------------------------------------------------- */

.zayavka__setka {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.forma {
  padding: clamp(22px, 3vw, 32px);
  background: linear-gradient(180deg, var(--plita-verh), var(--plita));
  border: 1px solid var(--granica);
  border-radius: var(--radius);
}

.forma__polya {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pole { display: block; min-width: 0; }
.pole--shirokoe { grid-column: 1 / -1; }

.pole__podpis {
  display: block;
  margin-bottom: 7px;
  color: var(--tusklo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pole__vvod {
  display: block;
  width: 100%;
  padding: 13px 14px;
  background: #0E1013;
  border: 1px solid var(--granica);
  border-radius: 2px;
  color: var(--tekst);
  font-size: 15px;
  transition: border-color .15s, background-color .15s;
}
.pole__vvod::placeholder { color: #6B7178; }
.pole__vvod:hover { border-color: var(--granica-svet); }
.pole__vvod:focus { border-color: var(--aktsent); background: #101217; outline: none; }
.pole__vvod:focus-visible { outline: 2px solid var(--aktsent); outline-offset: 1px; }

.forma__niz { margin-top: 20px; }

.forma__soglasie {
  margin-top: 14px;
  color: var(--tusklo);
  font-size: 12.5px;
  line-height: 1.55;
}
.forma__soglasie a { color: var(--tekst); text-decoration: underline; text-underline-offset: 2px; }

.chto-dalshe__zagolovok {
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.03em;
}

.chto-dalshe__spisok { margin-top: 18px; }

.chto-dalshe__punkt {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--granica);
  color: var(--tusklo);
  font-size: 14px;
  line-height: 1.55;
}
.chto-dalshe__punkt:last-child { border-bottom: 1px solid var(--granica); }

.chto-dalshe__metka {
  flex: 0 0 auto;
  width: 72px;
  color: var(--tekst);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.chto-dalshe__telefon {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  letter-spacing: -.04em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.chto-dalshe__pripiska { margin-top: 8px; color: var(--tusklo); font-size: 13px; }

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

/* --- спасибо ------------------------------------------------------------- */

.spasibo {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 11vw, 132px) 0;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(142, 154, 166, .16), transparent 60%),
    linear-gradient(168deg, #14161B, #0E0F12 60%);
}

/* Тот же блик лампы, что и на первом экране: держит страницу в одной среде. */
.spasibo::before {
  content: '';
  position: absolute;
  inset: -30% -18%;
  pointer-events: none;
  background: linear-gradient(107deg,
    transparent 40%,
    rgba(230, 236, 242, .05) 47%,
    rgba(230, 236, 242, .14) 52%,
    rgba(230, 236, 242, .04) 57%,
    transparent 66%);
  animation: blik 1.5s cubic-bezier(.19, .68, .32, 1) .15s both;
}

.spasibo__vnutri { position: relative; max-width: 640px; }

.spasibo__zagolovok {
  margin-top: 20px;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.spasibo__tekst {
  margin-top: 20px;
  color: var(--tusklo);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
}

.spasibo__knopki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.spasibo__kontakt {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--granica);
  color: var(--tusklo);
  font-size: 14px;
}
.spasibo__kontakt a { font-weight: 600; color: var(--tekst); text-decoration: none; }

/* --- политика ------------------------------------------------------------ */

.dokument { padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 8vw, 96px); }

.dokument__vnutri { max-width: 760px; }

.dokument__zagolovok {
  margin-top: 18px;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.dokument__data { margin-top: 16px; color: var(--tusklo); font-size: 13.5px; }

.punkt {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--granica);
}

.punkt__zagolovok {
  display: flex;
  gap: 14px;
  font-family: var(--shrift-zag);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.36;
  letter-spacing: -.03em;
}

.punkt__nomer { color: var(--tusklo); font-variant-numeric: tabular-nums; }

.punkt__tekst { margin-top: 12px; color: var(--tusklo); font-size: 15px; line-height: 1.68; }
.punkt__tekst + .punkt__tekst { margin-top: 12px; }
.punkt__tekst a { color: var(--tekst); text-decoration: underline; text-underline-offset: 2px; }

.punkt__spisok { margin-top: 12px; }

.punkt__punkt {
  position: relative;
  padding-left: 20px;
  color: var(--tusklo);
  font-size: 15px;
  line-height: 1.62;
}
.punkt__punkt + .punkt__punkt { margin-top: 8px; }
.punkt__punkt::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 1px;
  background: var(--granica-svet);
}

/* --- подвал -------------------------------------------------------------- */

.podval {
  padding: clamp(44px, 6vw, 72px) 0 34px;
  background: #0B0C0F;
  border-top: 1px solid var(--granica);
}

.podval__setka {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.podval__opisanie {
  margin-top: 16px;
  max-width: 30ch;
  color: var(--tusklo);
  font-size: 13.5px;
  line-height: 1.6;
}

.podval__zagolovok {
  color: var(--tusklo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.podval__blok { min-width: 0; }
.podval__blok p, .podval__blok li { margin-top: 12px; font-size: 14px; line-height: 1.55; }
.podval__blok a { text-decoration: none; }
.podval__blok a:hover { text-decoration: underline; text-underline-offset: 3px; }

.podval__telefon {
  font-family: var(--shrift-osn);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.podval__pochta { color: var(--tusklo); word-break: break-word; }

.podval__niz {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--granica);
  color: var(--tusklo);
  font-size: 12.5px;
}
.podval__niz a { color: var(--tusklo); text-decoration: none; }
.podval__niz a:hover { color: var(--tekst); }

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

/* --- узкий экран --------------------------------------------------------- */

@media (max-width: 600px) {
  .obolochka { padding: 0 16px; }
  .knopka { padding: 14px 22px; }
  .ekran__knopki .knopka { flex: 1 1 100%; }
  .vopros__otvet { padding-right: 0; }
}