/*
 * ВинЭксперт — дизайн-система «досье в папке».
 * Палитра: индиго + графит на нейтральном сером. Сектор оттенка 225–315° свободен:
 * ни одна воронка его не занимает, а сталь-синий «Миля» и КузовЛист стоят на 210°. 
 * (mint у ВинЛупы, cream у Автовыписки, голубой у «4 сайт» и у Автосверки, sand у КузовЛиста,
 * lilac у Автопапки, тёмный с лаймом у Автосверки).
 */
:root {
  --ink: #22242e;
  --deep: #1a1c30;
  --accent: #3f46a8;
  --accent-dim: #333a8f;
  --accent-soft: #e8eaf7;
  --mark: #6f77d8;        /* второй тон: контрольный знак, кириллица на тёмном */
  --mark-soft: #dcdffb;
  --paper: #f5f5f8;
  --white: #ffffff;
  --muted: #6c6e7c;
  --line: #e2e2ea;
  --danger: #b0402e;
  --ok: #2e7d5b;
  --rail: 3px;
  --shadow: 0 14px 34px rgba(13, 31, 37, .08);
  --r: 10px;
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 "PT Sans", "Source Sans Pro", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand, .tier-name, .btn {
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}

a { color: inherit; text-decoration: none }
img, svg { display: block; max-width: 100% }
[hidden] { display: none !important }

.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto }

/* ---------- шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(242, 245, 245, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 22px; height: 66px }
.brand { display: flex; align-items: center; gap: 10px; font-size: 21px }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--deep); position: relative; overflow: hidden; flex: none;
}
.brand-mark i {
  position: absolute; left: 7px; top: 7px;
  width: 12px; height: 12px; border: 2.5px solid var(--accent);
  border-radius: 50%;
}
.brand-mark b {
  position: absolute; right: 6px; bottom: 6px;
  width: 3px; height: 9px; background: var(--mark);
  border-radius: 2px; transform: rotate(-45deg);
}
.brand em { font-style: normal; color: var(--accent) }
.top-nav { display: flex; gap: 22px; margin-left: 8px; font-size: 15px }
.top-nav a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent }
.top-nav a:hover { color: var(--ink); border-color: var(--accent) }
.top-act { margin-left: auto; display: flex; gap: 10px; align-items: center }
.burger { display: none }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r); border: 1px solid transparent;
  font-size: 15px; cursor: pointer; white-space: nowrap;
}
.btn--solid { background: var(--accent); color: #fff }
.btn--solid:hover { background: var(--accent-dim) }
.btn--line { border-color: var(--line); background: var(--white); color: var(--ink) }
.btn--line:hover { border-color: var(--accent) }
.btn--wide { width: 100% }

/* ---------- первый экран ---------- */
.lede { padding: 54px 0 46px; position: relative; isolation: isolate }
/* подложка героя: фото машины под бумажной вуалью — текст остаётся тёмным по светлой.
 * Размер 140% ширины, а не cover: при cover картинка ровно по ширине и сдвинуть её
 * некуда — машина липнет к правому краю, а в широком окне слева пустая стена.
 * Фото на ::before, вуаль на ::after — слои не влияют друг на друга. */
.lede-photo { position: absolute; inset: 0; z-index: -1 }
.lede-photo::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/hero-car.jpg") 100% 58% / 140% auto no-repeat;
}
/* облако над текстом, а не полоса по ширине: слева сверху бумага, к машине снизу и
   справа вуаль тоньше — линейный градиент съедал фото целиком на широком окне */
.lede-photo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 66% 62% at 30% 28%, var(--paper) 0 42%,
    rgba(245, 245, 248, .9) 56%, rgba(245, 245, 248, .5) 74%,
    rgba(245, 245, 248, .16) 100%);
}
/* колонки героя сверху вниз: по центру заголовок уезжал вниз относительно панели,
   и ряд выглядел разваленным — пустоту снизу закрывает фото-подложка */
.lede-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start }
.kicker {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--mark-soft); color: var(--mark);
  font-size: 13px; font-weight: 700;
}
.lede h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; margin: 0 0 12px }
.lede h1 span { color: var(--accent) }
.lede .lede-lead { margin: 0 0 18px; max-width: 46ch; color: var(--muted); font-size: 17px }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding: 0; list-style: none }
.facts li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink) }
.facts b { font-size: 19px; color: var(--accent) }
/* пробный отчёт — крупный блок в левой колонке героя: панель формы заметно выше
   текста, и маленькая карточка рядом с ней читалась как сноска, а не как предложение */
.trial { margin-top: 26px; background: var(--white); padding: 22px 24px;
  border: 1px solid var(--line); border-left: 4px solid var(--mark);
  border-radius: var(--r); box-shadow: var(--shadow) }
.trial h2 { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 27px) }
.trial p { margin: 0 0 14px; font-size: 17px; color: var(--muted) }
.trial ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px }
.trial li { position: relative; padding-left: 26px; font-size: 16px }
.trial li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 6px; border-left: 2px solid var(--mark);
  border-bottom: 2px solid var(--mark); transform: rotate(-45deg) }
.trial .btn { padding: 14px 26px; font-size: 17px }
.trial .trial-note { margin: 14px 0 0; font-size: 14px }

/* панель формы — тёмная, как обложка дела */
.panel {
  background: var(--deep); color: #eef0fb;
  border-radius: 14px; padding: 24px; box-shadow: var(--shadow);
}
.panel h2 { margin: 0 0 4px; font-size: 22px; color: #fff }
.panel .panel-sub { margin: 0 0 18px; color: #a9a8c4; font-size: 14px }
.field { margin-bottom: 14px }
.field label { display: block; font-size: 13px; color: #a9a8c4; margin-bottom: 6px }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 13px; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid #d3d3e2; border-radius: 8px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 111, 130, .18);
}
.field.has-error input { border-color: var(--danger) }
.hint { font-size: 12px; color: #9d9cb8; margin-top: 5px }
.vin-meter { float: right; font-size: 12px; color: #9d9cb8 }
.checks { display: grid; gap: 8px; margin: 4px 0 16px }
.checks label {
  position: relative; display: block; padding-left: 27px;
  font-size: 13px; line-height: 1.45; color: #cfd0e4;
}
.checks input { position: absolute; left: 0; top: 2px; width: 16px; height: 16px }
.checks a { color: #9aa2f0; text-decoration: underline }
.form-status { margin: 12px 0 0; font-size: 14px; padding: 10px 12px; border-radius: 8px }
.form-status.is-ok { background: rgba(46, 125, 91, .18); color: #cfe7db }
.form-status.is-err { background: rgba(180, 69, 63, .18); color: #f0c4bd }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* разбор VIN — инлайн-SVG вместо фото черновика */
/* полоса VIN: 17 ячеек, сгруппированных по смыслу, и легенда к ним */
.vin-strip { margin: 20px 0 0 }
.vc-cells {
  display: grid; gap: 2px;
  /* 17 ячеек + четыре разделителя: группы читаются без опоры на оттенок */
  grid-template-columns: repeat(3, 1fr) 7px repeat(5, 1fr) 7px 1fr 7px repeat(2, 1fr) 7px repeat(6, 1fr);
  font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vc-cells span {
  display: block; text-align: center; padding: 8px 0; border-radius: 5px;
  background: #262a3f; color: #e9ebf8;
}
.vc-cells .vc-wmi { background: #2f3560 }
.vc-cells .vc-vds { background: #333a8f }
.vc-cells .vc-chk { background: var(--mark); color: #fff }
.vc-cells .vc-vis { background: #3f46a8; color: #fff }
.vc-cells .vc-ser { background: #262a3f }
.vc-legend {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #a9a8c4;
}
.vc-legend li { display: flex; align-items: center; gap: 6px }
.vc-legend b { color: #d8daf0; font-weight: 700 }
.vc-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none }
.vc-legend .sw-wmi { background: #2f3560 }
.vc-legend .sw-vds { background: #333a8f }
.vc-legend .sw-chk { background: var(--mark) }
.vc-legend .sw-vis { background: #3f46a8 }
.vc-legend .sw-ser { background: #262a3f }
.vin-strip figcaption { font-size: 12px; color: #9d9cb8; margin-top: 10px }

@media (max-width: 420px) {
  .vc-cells { gap: 2px; font-size: 12px }
  .vc-cells span { padding: 6px 0; border-radius: 4px }
  .vc-legend { font-size: 11.5px; gap: 5px 12px }
}

/* ---------- разделы ---------- */
.band { padding: 56px 0 }
.band--alt { background: var(--white); border-block: 1px solid var(--line) }
.band-head { margin: 0 0 26px; max-width: 62ch }
.band-head h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 8px }
.band-head p { margin: 0; color: var(--muted) }
.band-title { font-size: clamp(26px, 3vw, 34px); margin: 0 0 20px }

.sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
/* корешок только у выделенных разделов: когда полоса у всех восьми, она не выделяет
   ничего и ряд выглядит крапатым */
.sheet {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px;
}
.sheet h3 { margin: 0 0 6px; font-size: 18px }
.sheet p { margin: 0; font-size: 15px; color: var(--muted) }
.sheet--accent { border-left: var(--rail) solid var(--mark) }
/* в узкой колонке героя (страница пробного) две карточки рядом превращались в столбики */
.lede-in .sheet-grid { grid-template-columns: 1fr }

/* процесс: четыре шага в ряд. Вертикальная лента с корешком растягивалась на всю
   полосу, а текст стопом доходил до половины — правая половина выглядела пустой */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.flow-item { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px }
.flow-item h3 { margin: 0 0 6px; font-size: 18px }
.flow-item p { margin: 0; font-size: 15px; color: var(--muted) }

/* тарифы */
/* карточки тарифов одной высоты: списки разные (4/5/5 пунктов), при start кнопки
   ехали вверх-вниз и ряд выглядел разболтанным */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch }
.tier {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px; position: relative;
  display: flex; flex-direction: column;
}
.tier--best { border-color: var(--accent); box-shadow: var(--shadow) }
.tier-tag {
  position: absolute; top: -11px; left: 20px; padding: 3px 9px;
  background: var(--accent); color: #fff; border-radius: 999px; font-size: 12px;
}
.tier-name { margin: 0 0 2px; font-size: 20px }
.tier-price { font-size: 30px; color: var(--accent); margin: 6px 0 2px }
.tier-price small { font-size: 15px; color: var(--muted) }
.tier-time { font-size: 13px; color: var(--muted); margin: 0 0 12px }
.tier ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; flex: 1 }
.tier li { position: relative; padding-left: 22px; font-size: 15px }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 11px; height: 6px; border-left: 2px solid var(--mark);
  border-bottom: 2px solid var(--mark); transform: rotate(-45deg);
}

/* статьи */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.post {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px;
}
.post:hover { border-color: var(--accent) }
.post h3 { margin: 0 0 6px; font-size: 18px }
.post p { margin: 0; font-size: 15px; color: var(--muted) }

/* текст статьи */
/* ширину строки задаём тексту, а не контейнеру: иначе .wrap.doc центрируется
   и левый край уезжает от карточек и заголовков над ним */
.doc { max-width: none }
.doc h2, .doc h3, .doc p, .doc ol, .doc ul { max-width: 74ch }
.doc h2 { font-size: 24px; margin: 30px 0 10px }
.doc h3 { font-size: 18px; margin: 22px 0 8px }
.doc p, .doc li { font-size: 16px }
.doc ol, .doc ul { padding-left: 22px }

/* внутренний первый экран */
.page-lede { padding: 38px 0 26px; border-bottom: 1px solid var(--line) }
.page-lede h1 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 10px }
.page-lede p { margin: 0; color: var(--muted); max-width: 60ch }

/* контакты и реквизиты */
.cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px;
}
.card h3 { margin: 0 0 8px; font-size: 18px }
.card p { margin: 0 0 6px; font-size: 15px; color: var(--muted) }
.mailbig { font-size: 22px; color: var(--accent); word-break: break-all }
.is-todo { color: var(--mark); border-bottom: 1px dashed var(--mark) }

/* ---------- подвал ---------- */
.foot { background: var(--deep); color: #b9bad2; padding: 34px 0 26px; margin-top: 40px }
.foot-rows { display: grid; gap: 16px }
.foot-contacts { display: flex; flex-wrap: wrap; gap: 10px 34px; font-size: 14px }
.foot-contacts span { display: block }
.foot-contacts b { display: block; font-size: 12px; color: #8f90ac; font-weight: 400; margin-bottom: 3px }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px }
.foot-links a:hover { color: #fff }
.foot-legal { font-size: 13px; color: #9d9cb8; max-width: 92ch; margin: 0 }
.foot-sign { font-size: 13px; color: #9d9cb8; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px }

/* ---------- cookie-полоса ---------- */
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--deep); color: #d8daf0; padding: 12px 0;
  box-shadow: 0 -8px 24px rgba(13, 31, 37, .28);
}
.cookiebar-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.cookiebar p { margin: 0; font-size: 14px; flex: 1 1 320px }
.cookiebar a { color: #9aa2f0; text-decoration: underline }

/* ---------- кабинет и админка ---------- */
.auth-box { max-width: 420px; margin: 40px auto; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r); padding: 22px }
.auth-box h1 { margin: 0 0 14px; font-size: 24px }
.auth-box .field label { color: var(--muted) }
.auth-box .field input { border-color: var(--line) }
.lk-note { font-size: 13px; color: var(--muted); margin: 12px 0 0 }
.order {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; margin-bottom: 12px;
}
.order-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline }
.order-num { font-size: 18px; color: var(--accent) }
.order-state { font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dim) }
.order-state--work { background: var(--mark-soft); color: var(--mark) }
.order-state--ready { background: #e2f0e8; color: var(--ok) }
/* пробный — в той же очереди, но без оплаты: пунктирная рамка вместо сплошной */
.order-state--trial { background: #eef0f6; color: #5a6082; border: 1px dashed #c5cbe6 }
.order dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 14px }
.order dt { color: var(--muted) }
.order dd { margin: 0 }
.empty { padding: 26px; text-align: center; color: var(--muted);
  background: var(--white); border: 1px dashed var(--line); border-radius: var(--r) }

/* ---------- адаптив ---------- */
/* шапка складывается в бургер уже на 980: с 721 по 960 пять ссылок не влезают
   в одну строку и «Как идёт разбор» разваливалось на три строки */
@media (max-width: 980px) {
  .lede-in { grid-template-columns: 1fr }
  .tiers { grid-template-columns: 1fr }
  .flow { grid-template-columns: 1fr 1fr }
  .posts { grid-template-columns: 1fr 1fr }
  .top-nav { display: none }
  .top-nav.is-open {
    display: grid; position: absolute; left: 0; right: 0; top: 66px;
    background: var(--white); border-bottom: 1px solid var(--line); padding: 14px 20px;
  }
  .burger {
    display: inline-flex; margin-left: auto; width: 40px; height: 36px;
    align-items: center; justify-content: center; background: var(--white);
    border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  }
  .burger i { width: 16px; height: 2px; background: var(--ink); position: relative }
  .burger i::before, .burger i::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink);
  }
  .burger i::before { top: -5px } .burger i::after { top: 5px }
}

@media (max-width: 720px) {
  .top-act .btn--line { display: none }
  /* на мобильном колонки складываются и текст идёт первым: подложка только шумит
     под буквами да грузит 87 КБ — убираем целиком (в display:none файл не качается) */
  .lede-photo { display: none }
  .sheet-grid, .cards2, .posts, .flow { grid-template-columns: 1fr }
  .band { padding: 40px 0 }
  .order dl { grid-template-columns: 1fr }
}

@media (max-width: 420px) {
  .wrap { width: calc(100% - 28px) }
  .lede { padding: 34px 0 30px }
  .panel { padding: 18px }
  .facts { gap: 8px 18px }
  /* в шапке остаётся бренд и бургер: форма заявки — первым экраном ниже */
  .top-act .btn--solid { display: none }
  .brand { font-size: 19px }
}