/* ===================================================================
   OBDExpress — страница ожидания.

   Та же фирменная система, что у будущего магазина: графит, янтарь
   лампы Check Engine, моноширинный для технических обозначений.
   Когда откроется настоящий сайт, переход не должен выглядеть
   сменой владельца.

   Сигнатурный элемент — шестнадцатиконтактный разъём OBD-II: он же
   логотип, он же полоса-индикатор под заголовком.
   =================================================================== */

:root {
  --ink: #131a21;
  --ink-soft: #1b242e;
  --ink-line: #2a3641;
  --surface: #ffffff;
  --canvas: #f4f6f7;
  --text: #16202b;
  --muted: #5b6875;
  --faint: #8b98a5;
  --line: #dfe4e8;
  --signal: #b45309;
  --signal-bright: #d87a20;
  --signal-soft: #fdf3e7;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.14; margin: 0; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--signal);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

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

.head {
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid var(--ink-line);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.25rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  text-decoration: none;
}

.logo-port { width: 3.25rem; height: auto; color: var(--signal-bright); }

/* Часть контактов «под напряжением» — тот же приём, что в шапке
   будущего магазина */
.logo-pins circle { fill: #46586a; }
.logo-pins circle:nth-child(3n) { fill: var(--signal-bright); }

.logo-word { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; }
.logo-word b { font-weight: 800; }
.logo-word i { font-style: normal; color: var(--signal-bright); }

/* --- Контакты в шапке ---------------------------------------------- */

.head-contacts { display: flex; align-items: center; gap: 0.375rem; }

.hc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.3125rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.14s ease, background 0.14s ease;
}

.hc svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

.hc:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Телефон — единственный контакт, который показан текстом:
   номер должен читаться без наведения и без клика */
.hc-phone {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  padding-left: 0.75rem;
}

.hc-phone svg { fill: var(--signal-bright); }
.hc-phone:hover { background: rgba(216, 122, 32, 0.14); }

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

.hero {
  background:
    radial-gradient(90% 120% at 8% 0%, #22303d 0%, var(--ink) 62%);
  color: #fff;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}

/* Едва различимая приборная сетка: даёт фактуру, но не спорит с текстом */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px
  );
  pointer-events: none;
}

.hero .wrap { position: relative; }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f5b168;
  border: 1px solid var(--signal);
  border-radius: 0.1875rem;
  padding: 0.3125rem 0.625rem;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 5.2vw, 3.25rem);
  font-weight: 800;
  max-width: 20ch;
}

.lead {
  margin-top: 1.125rem;
  margin-bottom: 2rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: rgba(255, 255, 255, 0.78);
}

/* Две колонки: текст слева, разъём справа. На узком экране разъём
   уходит под текст и уменьшается. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* --- Призыв -------------------------------------------------------- */



/* --- Секции -------------------------------------------------------- */

.section { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }

.section h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 750;
  margin-bottom: 0.5rem;
}

.section-lead { color: var(--muted); max-width: 52ch; margin-bottom: 1.75rem; }
.section h2 + .grid { margin-top: 1.75rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.625rem;
}

/* --- Категории ----------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 1.375rem 1.25rem 1.25rem;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover { border-color: var(--signal); transform: translateY(-2px); }

/* Номер позиции моноширинным — как обозначение в каталоге деталей */
.card-code {
  position: absolute;
  top: 0.875rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
}

.card h3 { font-size: 1.0625rem; font-weight: 650; margin-bottom: 0.375rem; }
.card p { font-size: 0.875rem; color: var(--muted); }

/* --- Подбор по автомобилю ------------------------------------------ */

.section-dark { background: var(--canvas); border-block: 1px solid var(--line); }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

.feature-text p { color: var(--muted); margin-top: 0.875rem; max-width: 46ch; }

.feature-example {
  font-size: 0.9375rem;
  color: var(--text) !important;
  border-left: 3px solid var(--signal);
  padding-left: 0.875rem;
}

.mono { font-family: var(--mono); font-weight: 600; }

.picker {
  background: var(--ink);
  border-radius: 0.625rem;
  padding: 1.25rem;
  color: #fff;
  box-shadow: 0 16px 44px rgba(19, 26, 33, 0.22);
}

.picker-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.9375rem;
}

.picker-row i { font-style: normal; color: #8b9aa8; font-size: 0.8125rem; }
.picker-row b { font-family: var(--mono); font-weight: 600; }

.picker-result {
  display: block;
  margin-top: 0.875rem;
  padding: 0.5rem 0.75rem;
  background: var(--signal);
  border-radius: 0.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* --- Производители -------------------------------------------------- */

.brands { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.brands li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  color: var(--muted);
}

.brands-more { margin-top: 0.875rem; color: var(--faint); font-size: 0.875rem; }

/* --- Контакты ------------------------------------------------------- */

.section-contact { background: var(--canvas); border-top: 1px solid var(--line); }





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

.foot { background: var(--ink); color: rgba(255, 255, 255, 0.6); padding: 1.5rem 0; }



.foot-year { font-family: var(--mono); }

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

@media (max-width: 56rem) {
  .feature { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  /* Контакты в шапке прячем: на узком экране они выдавливают логотип,
     а ниже по странице есть полноценный блок и кнопки на первом экране */
  .head-contacts { display: none; }
}

@media (max-width: 34rem) {
  .contact-row { flex-direction: column; }
  .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover, .button:hover { transform: none; }
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal-bright);
  outline-offset: 3px;
  border-radius: 0.125rem;
}

/* ===================================================================
   Разъём OBD-II в объёме

   Библиотека для этого не нужна: геометрия простая, а слоёная
   экструзия из четырнадцати копий трапеции даёт настоящую фаску
   при повороте. Вся сцена весит ноль дополнительных килобайт,
   и автономная копия страницы остаётся одним файлом.
   =================================================================== */

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}

.port-stage {
  --w: clamp(15rem, 26vw, 22rem);
  --h: calc(var(--w) * 0.46);
  --depth: 2.4px;          /* шаг между слоями */
  --rx: -12deg;            /* наклон, меняется мышью */
  --ry: 26deg;

  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

.port {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  /* Плавность только при возврате в покой: во время движения мыши
     переход выключается в скрипте, иначе появляется «резина» */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: port-float 7s ease-in-out infinite;
}

/* Корпус: четырнадцать копий трапеции по глубине.
   Трапеция — настоящая форма разъёма OBD-II: широкая сторона сверху. */
.port-body { position: absolute; inset: 0; transform-style: preserve-3d; }

.port-body i {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  border-radius: 0.25rem;
  transform: translateZ(calc(var(--i) * var(--depth) * -1));
  /* Дальние слои темнее — это и есть ощущение толщины пластика */
  background: hsl(208 22% calc(20% - var(--i) * 1.05%));
}

.port-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  border-radius: 0.25rem;
  background:
    linear-gradient(170deg, #46596b 0%, #2b3947 42%, #1d2833 100%);
  transform: translateZ(1px);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Гнездо: утоплено внутрь, поэтому уезжает по Z назад */
.port-cavity {
  position: relative;
  width: 82%;
  height: 56%;
  border-radius: 0.1875rem;
  background: linear-gradient(180deg, #0d141b 0%, #060a0e 100%);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  transform: translateZ(-6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12%;
  padding: 7% 6%;
  overflow: hidden;
}

.port-row { display: flex; justify-content: space-between; gap: 3%; }

/* Контакт: латунная площадка с бликом сверху */
.port-row b {
  flex: 1;
  height: 0.5rem;
  border-radius: 0.0625rem;
  background: linear-gradient(180deg, #cfa878 0%, #8a6a43 55%, #5c452b 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  animation: pin-data 4.2s ease-in-out infinite;
  animation-delay: calc(var(--p) * 0.11s);
}

/* Импульс данных: пробегает по контактам слева направо.
   Это не украшение ради украшения — разъём так и «оживает»
   при подключении сканера. */
@keyframes pin-data {
  0%, 55%, 100% {
    background: linear-gradient(180deg, #cfa878 0%, #8a6a43 55%, #5c452b 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  }
  12% {
    background: linear-gradient(180deg, #ffd9a0 0%, #d87a20 60%, #a3561a 100%);
    box-shadow: 0 0 10px rgba(216, 122, 32, 0.75);
  }
}

/* Луч сканирования по гнезду */
.port-sweep {
  position: absolute;
  top: 0;
  left: -35%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg, transparent, rgba(216, 122, 32, 0.16), transparent
  );
  animation: sweep 4.2s ease-in-out infinite;
}

@keyframes sweep {
  0% { left: -35%; }
  55%, 100% { left: 105%; }
}

/* Блик на пластике: тонкая плёнка света поверх корпуса */
.port-gloss {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.05) 26%,
    transparent 46%
  );
  transform: translateZ(2px);
  pointer-events: none;
}

/* Тень на «полу» — она и сажает объект в сцену */
.port-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14%;
  height: 22%;
  background: radial-gradient(
    50% 50% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, transparent 72%
  );
  filter: blur(6px);
  transform: translateZ(-40px);
}

@keyframes port-float {
  0%, 100% { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(0); }
  50% { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px); }
}

/* Пока курсор ведёт объект, собственное покачивание мешает */
.port-stage.is-held .port { animation: none; transition: none; }

.port-caption {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: 2; margin-top: 1rem; }
  .port-stage { --w: clamp(13rem, 62vw, 18rem); --ry: 20deg; }
}

@media (prefers-reduced-motion: reduce) {
  .port { animation: none; transition: none; }
  .port-row b { animation: none; }
  .port-sweep { display: none; }
}


/* ===================================================================
   Контакты на первом экране
   =================================================================== */

.contact-box { margin-top: 2rem; }

.contact-lead {
  max-width: 44ch;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 1.125rem;
}

.contact-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  background: var(--signal);
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem;
  transition: background 0.15s ease, transform 0.15s ease,
              border-color 0.15s ease;
}

.button:hover { background: var(--signal-bright); transform: translateY(-1px); }

.button svg { width: 1.375rem; height: 1.375rem; fill: currentColor; flex-shrink: 0; }

.button span { display: flex; flex-direction: column; line-height: 1.25; }

/* Номер моноширинным: цифры одной ширины читаются быстрее,
   а сам номер выглядит как то, что можно продиктовать */
.button b {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.button i {
  font-style: normal;
  font-size: 0.75rem;
  opacity: 0.72;
}

.button-phone { box-shadow: 0 6px 18px rgba(180, 83, 9, 0.28); }

/* Телеграм второстепенен по отношению к звонку, поэтому контурный */
.button-tg {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
}

.button-tg:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.55);
}

.contact-mail {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
}

.contact-mail a { color: rgba(255, 255, 255, 0.78); text-decoration: underline; }
.contact-mail a:hover { color: var(--signal-bright); }

/* Текст только для скринридеров */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   Карта доставки
   =================================================================== */

.section-map { background: var(--ink); color: #fff; }
.section-map .section-lead { color: rgba(255, 255, 255, 0.68); }

.map {
  position: relative;
  margin: 1.75rem 0 1.5rem;
  border: 1px solid #2a3947;
  border-radius: 0.75rem;
  background: linear-gradient(160deg, #16202a 0%, #101820 100%);
  padding: 1rem;
  overflow: hidden;
}

.map-svg { display: block; width: 100%; height: auto; }

/* Маршруты: пунктир, который «течёт» от офисов к дальним городам.
   Показывает не конкретные рейсы, а сам факт — возим по всей стране. */
.map-routes path {
  stroke-dasharray: 5 9;
  opacity: 0.55;
  animation: route-flow 2.6s linear infinite;
}

.map-routes path:nth-child(2n) { animation-duration: 3.4s; opacity: 0.4; }
.map-routes path:nth-child(3n) { animation-duration: 4.1s; }

@keyframes route-flow { to { stroke-dashoffset: -56; } }

.map-dots circle { fill: #6b7d8f; }

.office { cursor: pointer; outline: none; }
.office-pin { fill: var(--signal-bright); stroke: #fff; stroke-width: 1.5; }
.office-soon { fill: #6b7d8f; }

.office-halo {
  fill: var(--signal-bright);
  opacity: 0.18;
  transform-origin: center;
  transform-box: fill-box;
  animation: halo 2.4s ease-out infinite;
}

.office:nth-child(2) .office-halo { animation-delay: 0.8s; }
.office:nth-child(3) .office-halo { animation-delay: 1.6s; }

@keyframes halo {
  0% { transform: scale(0.55); opacity: 0.35; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

.office:hover .office-pin,
.office:focus-visible .office-pin { r: 8; }

.map-tip {
  position: absolute;
  z-index: 2;
  background: #fff;
  color: var(--text);
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  max-width: 15rem;
}

.map-tip b { display: block; margin-bottom: 0.125rem; }
.map-tip span { color: var(--muted); }

.delivery-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.875rem;
}

.delivery-facts li {
  border-left: 2px solid var(--signal);
  padding-left: 0.875rem;
}

.delivery-facts b { display: block; font-size: 0.9375rem; }
.delivery-facts span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }

/* ===================================================================
   Офисы
   =================================================================== */

.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.office-card {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 1.25rem;
  transition: border-color 0.15s ease;
}

.office-card:hover { border-color: var(--signal); }
.office-card.is-main { border-color: var(--signal); background: var(--signal-soft); }

.office-tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.375rem;
}

.office-card.is-soon .office-tag { color: var(--faint); }
.office-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; }
.office-addr { font-size: 0.9375rem; }
.office-note { font-size: 0.8125rem; color: var(--muted); margin-top: 0.375rem; }

/* ===================================================================
   Вопросы и ответы
   =================================================================== */

.faq { margin-top: 1.75rem; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.0625rem 2.5rem 1.0625rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* Плюс, который превращается в минус */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--signal);
  transform: translateY(-50%);
}

.faq-item summary::before {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--signal);
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-item[open] summary::before { transform: translateY(-50%) rotate(0); opacity: 0; }
.faq-item summary:hover { color: var(--signal); }

.faq-body { padding: 0 2.5rem 1.25rem 0; }
.faq-body p { color: var(--muted); max-width: 68ch; }
.faq-body p + p { margin-top: 0.75rem; }

/* ===================================================================
   Текст о магазине
   =================================================================== */

.prose p { color: var(--muted); max-width: 74ch; }
.prose p + p { margin-top: 0.875rem; }
.prose h2 { margin-bottom: 1rem; }

/* ===================================================================
   Контакты внизу
   =================================================================== */

.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.contacts-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.25rem;
}

.contacts-value {
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--signal);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.contacts-value:hover { border-bottom-color: var(--signal); }
.contacts-mail { font-size: 1rem; }

/* ===================================================================
   Подвал
   =================================================================== */

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem;
  padding-bottom: 1.5rem;
}

.foot-logo { font-size: 1.125rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.foot-logo i { font-style: normal; color: var(--signal-bright); }
.foot-about { margin-top: 0.5rem; font-size: 0.875rem; max-width: 28ch; }

.foot-head {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.625rem;
}

.foot-link {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.1875rem 0;
}

.foot-link:hover { color: #fff; }
.foot-strong { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: #fff; }

.foot-addr { font-size: 0.875rem; margin-bottom: 0.625rem; line-height: 1.45; }
.foot-addr b { display: block; color: #fff; font-weight: 600; }
.foot-addr span { color: rgba(255, 255, 255, 0.4); font-size: 0.8125rem; }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid #2a3641;
  font-size: 0.8125rem;
}

/* ===================================================================
   Cookie
   =================================================================== */

.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 2px solid var(--signal);
  box-shadow: 0 -8px 30px rgba(19, 26, 33, 0.18);
  animation: cookie-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cookie-up { from { transform: translateY(100%); } }

.cookie-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cookie p { font-size: 0.875rem; color: var(--muted); max-width: 62ch; }
.cookie-actions { display: flex; gap: 0.625rem; flex-shrink: 0; }

.cookie-ok, .cookie-no {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.5625rem 1.125rem;
  border-radius: 0.3125rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.cookie-ok { background: var(--signal); color: #fff; font-weight: 600; }
.cookie-ok:hover { background: var(--signal-bright); }
.cookie-no { background: transparent; border-color: var(--line); color: var(--muted); }
.cookie-no:hover { border-color: var(--muted); color: var(--text); }

/* ===================================================================
   Адаптив для новых блоков
   =================================================================== */

@media (max-width: 56rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions { justify-content: stretch; }
  .cookie-ok, .cookie-no { flex: 1; }
}

@media (max-width: 34rem) {
  .faq-item summary { font-size: 1rem; padding-right: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .map-routes path { animation: none; opacity: 0.45; }
  .office-halo { animation: none; opacity: 0.2; }
  .cookie { animation: none; }
}