/* ============================================================
   Дизайн-система: вариант C «Яркие блоки» (бенто)
   Все цвета и размеры — в токенах ниже. Поменяли тут — поменялось везде.
   ============================================================ */
:root {
  --bg: #F3F0EA; --surface: #FFFFFF; --surface2: #EAE6DE; --border: #DDD7CC;
  --text: #1A1A1A; --muted: #5E5A52;
  --accent: #FF6A2B; --on-accent: #1A1A1A; --accent-hover: #FF7D45;
  --accent2: #1F4D3A; --on-accent2: #F3F0EA;
  --success: #1F7A4D; --danger: #C62828;
  --r: 20px; --r-lg: 28px; --r-sm: 14px; --r-btn: 999px;
  --fh: 'Rubik', system-ui, sans-serif; --fb: 'Golos Text', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { background: var(--bg); color: var(--text); font: 16px/1.5 var(--fb); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column }
main { flex: 1 }
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
h1, h2, h3, h4, .h3, .h4 { font-family: var(--fh); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance }
h1 { font-size: clamp(32px, 4.4vw, 58px) } h2 { font-size: clamp(26px, 3vw, 36px) } h3, .h3 { font-size: 21px; font-weight: 700 } h4, .h4 { font-size: 17px; font-weight: 700 }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px }
.muted { color: var(--muted) } .small { font-size: 14px }
.ic { flex: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100 }
.skip:focus { left: 8px }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px }
[hidden] { display: none !important }

/* ---------- кнопки ---------- */
/* Объёмные кнопки: плотная «подложка» снизу (--ledge) + мягкая цветная тень (--glow).
   Наведение — кнопка приподнимается, нажатие — продавливается вниз. */
.btn { --ledge: transparent; --glow: transparent; --lift: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-btn);
  font: 600 16px var(--fb); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-align: center; position: relative;
  box-shadow: 0 var(--lift) 0 var(--ledge), 0 8px 16px -8px var(--glow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--lift) + 2px) 0 var(--ledge), 0 16px 28px -10px var(--glow) }
}
.btn:active { transform: translateY(calc(var(--lift) - 1px)); box-shadow: 0 1px 0 var(--ledge), 0 2px 6px -3px var(--glow); transition-duration: .06s }
.btn-primary { background: var(--accent); color: var(--on-accent); --ledge: #C4461A; --glow: rgba(255, 106, 43, .65) }
.btn-primary:hover { background: var(--accent-hover) }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); --ledge: #CFC7B9; --glow: rgba(60, 45, 20, .28) }
.btn-secondary:hover { border-color: var(--text); --ledge: #1A1A1A }
.btn-dark { background: var(--text); color: #fff; --ledge: #000; --glow: rgba(0, 0, 0, .45) } .btn-dark:hover { background: #2e2e2e }
.btn-ghost { color: var(--text); --lift: 0px } .btn-ghost:hover { background: var(--surface2); transform: none }
.btn-ghost:active { transform: scale(.95); background: var(--border) }
.btn-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); --ledge: #E7B8B3; --glow: rgba(198, 40, 40, .3) }
.btn-danger:hover { background: #fdecea; --ledge: var(--danger) }
.btn-l { min-height: 56px; padding: 0 28px; font-size: 17px } .btn-s { min-height: 40px; padding: 0 16px; font-size: 14px; --lift: 3px }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge) }
.tg { background: #2AABEE; color: #04263a; --ledge: #1782BA; --glow: rgba(42, 171, 238, .55) } .tg:hover { background: #4dbbf2 }
.mx { background: #6A4DFF; color: #fff; --ledge: #4529CC; --glow: rgba(106, 77, 255, .5) } .mx:hover { background: #7E66FF }
.path.alt .btn-secondary { --ledge: #0F2E22; --glow: rgba(0, 0, 0, .35) }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #C2410C } .link:hover { gap: 10px }
.link .ic { transition: transform .2s }

/* ---------- поля ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0 }
.field label, .label, legend.label { font-size: 14px; font-weight: 600; padding: 0 }
fieldset.field legend { margin-bottom: 6px }
.input, .select select { width: 100%; min-height: 48px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--r-sm); padding: 0 14px; font: 400 16px var(--fb); transition: border-color .2s, box-shadow .2s }
/* многострочное поле: без «уголка» для растягивания, само растёт по тексту */
textarea.input { padding: 12px 14px; resize: none; line-height: 1.5; overflow: hidden; min-height: 96px; field-sizing: content }
/* фото не «тащатся» мышкой, на телефоне нет синей вспышки при нажатии */
img { -webkit-user-drag: none; user-select: none }
html { -webkit-tap-highlight-color: transparent }
.input::placeholder { color: #8a857c }
.input:focus, .select select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) }
.input.is-error { border-color: var(--danger) }
.err { color: var(--danger); font-size: 13px } .help { color: var(--muted); font-size: 13px } .help a { text-decoration: underline }
.req { color: var(--danger) }
.select { position: relative } .select select { appearance: none; padding-right: 40px; cursor: pointer }
.select .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted) }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border);
  font-size: 14px; font-weight: 500; background: var(--surface); cursor: pointer; user-select: none; box-shadow: 0 2px 0 var(--border);
  transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--ease), box-shadow .15s var(--ease) }
@media (hover: hover) { .chip:hover { border-color: var(--text); transform: translateY(-2px); box-shadow: 0 4px 0 var(--text) } }
.chip:active, .chip-cb:active .chip { transform: translateY(1px); box-shadow: 0 0 0 var(--text); transition-duration: .06s }
.chip.on, .chip-cb input:checked + .chip { box-shadow: 0 2px 0 #0F2E22 }
.chip.on { background: var(--accent2); border-color: var(--accent2); color: #fff } .chip.on .muted { color: #cfe0d7 }
.chip-cb input { position: absolute; opacity: 0; pointer-events: none }
.chip-cb input:checked + .chip { background: var(--accent2); border-color: var(--accent2); color: #fff }
.chip-cb { position: relative }
.chip-cb input:focus-visible + .chip { outline: 3px solid var(--accent); outline-offset: 2px }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }

/* ---------- шапка ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px) }
.hdr .wrap { min-height: 76px; display: flex; align-items: center; gap: 36px }
.logo { font-family: var(--fh); font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; white-space: nowrap }
.logo i { width: 28px; height: 28px; border-radius: 9px; background: var(--accent); display: inline-block; flex: none }
.logo img { height: 52px; width: auto; display: block }
.ftr .logo img { height: 60px }
.nav { display: flex; gap: 26px; font-weight: 500 }
.nav a { padding: 6px 0; transition: color .15s; white-space: nowrap } .nav a:hover, .nav a.on { color: #C2410C }
.nav-tel { display: none !important }
.hdr .right { margin-left: auto; display: flex; align-items: center; gap: 18px }
.tel { font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap }
.iconlink { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50% } .iconlink:hover { background: var(--surface2) }
.fav-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px }
.burger { display: none; width: 44px; height: 44px; place-items: center; border-radius: 12px }

/* ---------- первый экран (бенто) ---------- */
.hero { padding: 16px 0 40px }
.bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 270px 270px; gap: 16px }
.b { border-radius: var(--r-lg); padding: 32px; position: relative; overflow: hidden }
.b-main { grid-row: 1 / 3; background: var(--accent); color: #1A1A1A; display: flex; flex-direction: column; justify-content: space-between; gap: 24px }
.b-main p { font-size: 18px; max-width: 440px; margin-top: 14px }
.b-photo { grid-column: 2 / 4; padding: 0; background: var(--surface2) }
.b-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.b-photo:hover img { transform: scale(1.03) }
.b-photo .tag { position: absolute; left: 20px; bottom: 20px; margin-right: 20px; background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 600 }
.b-photo .tag b { white-space: nowrap; font-weight: 700 }
.b-stat { background: var(--accent2); color: var(--on-accent2); display: flex; flex-direction: column; justify-content: space-between }
.b-stat .big { font-family: var(--fh); font-size: 64px; font-weight: 800; line-height: 1 }
.b-order { background: #fff; display: flex; flex-direction: column; justify-content: space-between }
.hsearch { background: #fff; border-radius: 24px; padding: 10px; display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 8px }
.hsearch select { border: none; background: var(--bg) }

/* ---------- секции ---------- */
.sec { padding: 88px 0 } .sec-tight { padding: 24px 0 88px } .sec-top0 { padding-top: 0 }
.sec-h { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 20px; flex-wrap: wrap }
.sec-title { margin-bottom: 28px }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.path { border-radius: var(--r-lg); padding: 40px; background: #fff; min-height: 260px; display: flex; flex-direction: column; gap: 14px }
.path h2 { font-size: 30px } .path .btn { margin-top: auto; align-self: flex-start }
.path.alt { background: var(--accent2); color: var(--on-accent2) } .path.alt .muted { color: #C9D6CF }
.path.alt .btn-secondary { background: transparent; color: var(--on-accent2); border-color: #8FB3A2 } .path.alt .btn-secondary:hover { border-color: #fff }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }

/* ---------- карточка авто ---------- */
.card { position: relative; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s var(--ease), transform .25s var(--ease) }
.card { box-shadow: 0 1px 0 var(--border), 0 4px 14px -10px rgba(40, 30, 10, .25) }
@media (hover: hover) {
  .card:hover { box-shadow: 0 0 0 1.5px var(--text), 0 24px 44px -20px rgba(40, 30, 10, .5); transform: translateY(-6px) }
  .card:hover .ph-img img { transform: scale(1.05) }
}
.card .ph-img img { transition: transform .5s var(--ease) }
.card .ph-img { display: block; margin: 10px 10px 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface2); position: relative }
.card .ph-img img { width: 100%; height: 100%; object-fit: cover }
.badge { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--text); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px }
.badge-alt { left: auto; right: 60px; background: var(--accent2); color: #fff } .badge-sold { left: auto; right: 60px; background: var(--text); color: #fff }
.fav { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .95); display: grid; place-items: center; z-index: 2;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); transition: transform .18s var(--ease), color .15s, box-shadow .18s }
@media (hover: hover) { .fav:hover { transform: scale(1.15); color: #E11D48; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45) } }
.fav:active { transform: scale(.88); transition-duration: .06s }
.fav[aria-pressed="true"] { color: #E11D48; animation: pulse .35s var(--ease) } .fav[aria-pressed="true"] svg { fill: currentColor }
@keyframes pulse { 50% { transform: scale(1.25) } }
.card .body { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.card h3 { font-size: 19px } .card h3 a:hover { color: #C2410C }
.specs { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 14px } .specs span { display: inline-flex; align-items: center; gap: 5px }
.price { font-family: var(--fh); font-weight: 700; white-space: nowrap; background: var(--bg); padding: 4px 14px; border-radius: 999px; font-size: 20px }
.card .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px }

/* ---------- шаги, отзывы, форма ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.step { background: var(--surface); border-radius: var(--r-lg); padding: 28px }
.step .n { font-family: var(--fh); font-size: 15px; color: #C2410C; font-weight: 700; margin-bottom: 18px }
.step p { margin-top: 8px }
.step:nth-child(2) { background: var(--accent) } .step:nth-child(2) .n, .step:nth-child(2) .muted { color: #1A1A1A }
.review { background: var(--surface); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px }
.review-ph { border-radius: 16px; aspect-ratio: 16/10; object-fit: cover }
.stars { color: var(--accent); display: flex; gap: 2px } .stars svg { fill: currentColor }
.who { display: flex; gap: 12px; align-items: center; margin-top: auto }
.ava { width: 44px; height: 44px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; font-weight: 700; flex: none }
.lead { background: var(--surface); border-radius: var(--r-lg); padding: 48px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center }
.lead-sub { margin-top: 12px; font-size: 18px; max-width: 560px }
.msg-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap }
.lead-form { display: grid; gap: 14px; position: relative }
.form-ok { position: absolute; inset: 0; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--success); border-radius: var(--r) }
.form-ok b { font-size: 20px; color: var(--text) } .form-ok span { color: var(--muted) }
.video { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000 }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }

/* ---------- внутренние страницы ---------- */
.page { padding-top: 28px; padding-bottom: 88px }
.narrow { max-width: 820px }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 14px } .crumbs a:hover { color: var(--text); text-decoration: underline }
.page-title { margin: 14px 0 8px; font-size: clamp(30px, 3.6vw, 44px) }
.cat-h { margin: 14px 0 20px } .cat-h h1 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 4px }
.cat-tools { display: flex; gap: 10px; align-items: center }
.sort-sel { width: 240px }
.filters-open, .filters-close { display: none }
.active-chips, .brand-chips { margin-bottom: 24px }
.cat { display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: start }
.filters { background: var(--surface); border-radius: var(--r-lg); padding: 24px; position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto }
.filters form { display: flex; flex-direction: column; gap: 18px }
.filters-top { display: flex; justify-content: space-between; align-items: center }
.filters h3 { display: flex; gap: 8px; align-items: center }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap }
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 8px; display: grid; place-items: center; border-radius: 14px; font-weight: 600 }
.pager a { background: var(--surface); border: 1.5px solid var(--border); box-shadow: 0 3px 0 var(--border); transition: transform .15s var(--ease), box-shadow .15s, border-color .15s }
@media (hover: hover) { .pager a:hover { border-color: var(--text); transform: translateY(-2px); box-shadow: 0 5px 0 var(--text) } }
.pager a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--text) }
.pager a.on { background: var(--accent2); border-color: var(--accent2); color: #fff; box-shadow: 0 3px 0 #0F2E22 }
.empty { background: var(--surface); border-radius: var(--r-lg); padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px }
.empty .ic { color: var(--muted) } .empty .msg-row { justify-content: center; margin-top: 12px }
.big404 { font-family: var(--fh); font-size: 96px; font-weight: 800; color: var(--accent); line-height: 1 }
.text { font-size: 17px; line-height: 1.65; max-width: 720px }

/* страница авто */
.car { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; margin-top: 20px; align-items: start }
.g-main { position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; background: var(--surface2); touch-action: pan-y }
.g-main img { width: 100%; height: 100%; object-fit: cover }
.g-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); transition: transform .18s var(--ease), background .15s, box-shadow .18s }
@media (hover: hover) { .g-nav:hover { background: #fff; transform: translateY(-50%) scale(1.12); box-shadow: 0 10px 22px -8px rgba(0,0,0,.55) } }
.g-nav:active { transform: translateY(-50%) scale(.92) } .g-prev { left: 14px } .g-next { right: 14px }
.g-count { top: auto; bottom: 16px; left: 16px }
.fav-big { top: 16px; right: 16px; width: 48px; height: 48px }
.g-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 10px }
.g-th { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; opacity: .7; transition: opacity .15s; outline-offset: -3px }
.g-th img { width: 100%; height: 100%; object-fit: cover } .g-th:hover { opacity: 1 } .g-th.on { opacity: 1; outline: 3px solid var(--accent) }
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--border); margin-top: 32px; overflow-x: auto; scrollbar-width: none }
.tabs button { padding: 12px 16px; font-weight: 600; color: var(--muted); white-space: nowrap; border-radius: 10px 10px 0 0 }
.tabs button:hover { color: var(--text) } .tabs button.on { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent) }
.tabpanel { padding-top: 12px }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px }
.spec-list div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border) }
.spec-list dt { color: var(--muted) } .spec-list dd { font-weight: 600; text-align: right }
.eq-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; padding-top: 8px }
.eq-list li { display: flex; gap: 10px; align-items: flex-start } .eq-list .ic { color: var(--success); margin-top: 3px }
.eq-list.big { grid-template-columns: 1fr; font-size: 17px; margin-top: 28px }
.buy { background: var(--surface); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px }
.buy h1 { font-size: 32px }
.price-big { font-size: 36px; align-self: flex-start }
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .msg-grid .btn:only-child { grid-column: 1 / -1 }
.sold-note { background: var(--surface2); border-radius: 14px; padding: 12px 14px; font-weight: 500 }
.sec-similar { padding-top: 72px }

/* под заказ, о компании, контакты */
.order { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 20px; align-items: start }
.order-form { background: var(--surface); border-radius: var(--r-lg); padding: 36px } .order-form h2 { margin-bottom: 20px }
.about { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start }
.about-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px }
.about-tiles .b { min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; font-size: 18px }
.tile-o { background: var(--accent) } .tile-w { background: #fff }
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 20px; align-items: start }
.contact-list { display: flex; flex-direction: column; gap: 12px }
.c-item { display: flex; gap: 16px; align-items: center; background: var(--surface); border-radius: var(--r); padding: 18px 20px }
.c-item b { display: block; font-size: 18px } .c-item .muted { display: block }
.c-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--bg); display: grid; place-items: center; flex: none }
a.c-item:hover { box-shadow: 0 0 0 1.5px var(--text) inset }
.req-box { background: var(--surface); border-radius: var(--r); padding: 20px; margin-top: 12px }
.lead-one { grid-template-columns: 1fr; gap: 20px; padding: 36px }

/* ---------- подвал ---------- */
.ftr { background: #1A1A1A; color: #F3F0EA; padding: 56px 0 28px; margin-top: auto }
.ftr .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px }
.ftr h4 { margin-bottom: 14px } .ftr ul { list-style: none } .ftr li { margin-bottom: 8px; color: #BDB7AC; font-size: 15px }
.ftr a:hover { color: #fff; text-decoration: underline }
.ftr-tag { margin: 14px 0 20px; max-width: 320px; color: #BDB7AC; font-size: 15px }
.ftr-msg { display: flex; gap: 8px; flex-wrap: wrap } .ftr-msg .btn { min-height: 40px; font-size: 14px; padding: 0 16px }
.ftr-req { color: #8f897f; font-size: 13px; margin-top: 32px }
.ftr-copy { color: #8f897f; font-size: 13px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #333 }

/* ---------- модальное окно ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(20, 16, 10, .55); display: grid; place-items: center; padding: 16px; animation: fade .2s var(--ease) }
.modal-box { background: var(--surface); border-radius: var(--r-lg); padding: 36px; width: 100%; max-width: 460px; position: relative; max-height: calc(100vh - 32px); overflow: auto; animation: pop .25s var(--ease) }
.modal-title { font-size: 26px; padding-right: 40px } .modal-sub { margin: 6px 0 20px }
.modal-x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center } .modal-x:hover { background: var(--surface2) }
@keyframes fade { from { opacity: 0 } } @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98) } }
body.lock { overflow: hidden }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .tel { display: none } .nav { gap: 18px }
  .bento { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto } .b-main { grid-row: auto; grid-column: 1 / -1 } .b-photo { grid-column: 1 / -1; aspect-ratio: 16/8 }
  .grid3 { grid-template-columns: repeat(2, 1fr) } .steps { grid-template-columns: 1fr 1fr }
  .cat { grid-template-columns: 1fr } .filters-open, .filters-close { display: inline-flex }
  .filters { position: fixed; inset: 0 auto 0 0; width: min(380px, 92vw); max-height: none; border-radius: 0 var(--r-lg) var(--r-lg) 0; z-index: 90; transform: translateX(-105%); transition: transform .3s var(--ease); box-shadow: 0 0 0 100vmax rgba(20,16,10,0) }
  .filters.open { transform: none; box-shadow: 0 0 0 100vmax rgba(20,16,10,.5) }
  .filters form > .btn-primary { position: sticky; bottom: 0 }
  .car { grid-template-columns: minmax(0, 1fr) } .buy { position: static }
}
@media (max-width: 860px) {
  .wrap { padding: 0 16px }
  .hdr .wrap { min-height: 64px; gap: 12px } .logo { font-size: 19px } .hdr .logo img { height: 42px }
  .burger { display: grid } .hdr .right .btn { display: none }
  .nav { position: fixed; inset: 64px 0 auto 0; background: var(--bg); flex-direction: column; gap: 0; padding: 8px 16px 24px; box-shadow: 0 20px 30px -20px rgba(0,0,0,.3); display: none }
  .nav.open { display: flex } .nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--border) }
  .nav-tel { display: flex !important; gap: 8px; align-items: center; font-weight: 700; border: 0 !important }
  .bento { grid-template-columns: 1fr } .b { padding: 24px } .b-main h1 { font-size: 36px } .b-photo { aspect-ratio: 4/3 }
  .hsearch { grid-template-columns: 1fr }
  .paths, .lead, .ftr .cols, .order, .about, .contacts { grid-template-columns: 1fr } .lead { padding: 24px; gap: 24px }
  .path { padding: 28px; min-height: 0 }
  .sec { padding: 56px 0 } .sec-tight { padding: 8px 0 56px }
  .ftr .cols { gap: 28px }
  .spec-list, .eq-list { grid-template-columns: 1fr }
  .cat-h { flex-direction: column; align-items: stretch } .cat-tools { width: 100% } .sort-sel { flex: 1; width: auto }
  .modal { place-items: end center; padding: 0 } .modal-box { border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 28px 20px; max-width: none }
  .order-form { padding: 24px }
}
@media (max-width: 600px) {
  .grid3 { grid-template-columns: 1fr } .steps { grid-template-columns: 1fr }
  .buy { padding: 20px } .buy h1 { font-size: 26px } .price-big { font-size: 30px }
  .g-nav { width: 40px; height: 40px }
  .about-tiles { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important } }