/* ===== Станция 54 — вёрстка 1:1 по макету 6b =====
   1rem = 10 px макета. Десктоп: сцена 153.6rem (1536 px макета),
   мобильная: сцена 85.1rem (851 px макета). */

:root {
  --bg: #0b0c0e;
  --panel: rgba(6, 8, 10, .94);
  --line: rgba(160, 168, 175, .36);
  --line-soft: rgba(160, 168, 175, .18);
  --text: #fafafa;
  --muted: #979ca3;
  --red: #e3121b;
  --italic: "Exo 2", "Russo One", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Сайт растёт вместе с экраном до 1280 px, шире — стоит по центру */
html { font-size: min(calc(100vw / 153.6), 8.334px); background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.red { color: var(--red); }

/* ---------- сцена ---------- */
.stage {
  position: relative;
  width: 153.6rem;
  height: 105.4rem;
  margin: 0 auto;
  background:
    url("assets/bg-hud.webp") top center / 153.6rem auto no-repeat,
    radial-gradient(ellipse 60rem 40rem at 70% 25%, rgba(120, 130, 150, .10), transparent 70%),
    var(--bg);
}
.a {
  position: absolute;
  left: calc(var(--x) * 1rem);
  top: calc(var(--y) * 1rem);
  width: calc(var(--w, 0) * 1rem);
  height: calc(var(--h, 0) * 1rem);
}
@media (min-width: 901px) {
  .a:not([style*="--w"]) { width: auto; }
  .a:not([style*="--h"]) { height: auto; }
}
.m-only { display: none !important; }

/* на высоких экранах одностраничный сайт стоит по центру и по вертикали */
@media (min-width: 901px) {
  body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- HUD-рамка со срезанными углами ---------- */
.frame { --c: 1.2rem; isolation: isolate; }
.frame:not(.a) { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.frame::before { inset: 0; background: var(--line); }
.frame::after  { inset: 1px; background: var(--panel); }
.frame.cut-r::before, .frame.cut-r::after {
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.6rem) 100%, 0 100%);
}
.frame.cut-l::before, .frame.cut-l::after {
  clip-path: polygon(2.6rem 0, 100% 0, 100% 100%, 0 100%);
}
.frame.cut-2 { --c: 1.6rem; }

/* ---------- шапка ---------- */
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.nav { display: flex; align-items: center; padding: 0 2.2rem 0 1.4rem; }
.nav a {
  display: flex; align-items: center; gap: 1.5rem;
  font-size: 1.75rem; color: var(--text); padding: 0 2.2rem; white-space: nowrap;
}
.nav a svg { width: 2.6rem; height: 2.6rem; }
.nav a.active svg { color: var(--red); }
.nav a.active { align-self: stretch; margin-left: -1.4rem; padding-left: 3.6rem;
  box-shadow: inset 2px 0 0 var(--red), inset 0 -1px 0 rgba(227, 18, 27, .55);
  background: linear-gradient(90deg, rgba(227, 18, 27, .12), transparent 70%); }
.nav a:hover { color: #fff; text-shadow: 0 0 .8rem rgba(255,255,255,.4); }
.nav i { width: 1px; height: 2.8rem; background: var(--line); }

.head-phone { display: flex; align-items: center; justify-content: flex-end; gap: 1.6rem; padding-right: 2rem; }
.head-phone svg { width: 2.8rem; height: 2.8rem; }
.head-phone span { font: 900 italic 3.1rem/1 var(--italic); letter-spacing: .02em; }

/* ---------- первый экран ---------- */
.h1 { font-family: "Russo One", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1; }
.h1 span { display: block; font-size: 7.1rem; line-height: .89; letter-spacing: .035em; white-space: nowrap; }
.h1 .l1 { color: #fff; }
.h1 .l2 {
  margin-top: 0;
  background: linear-gradient(180deg, #d4d7db 0%, #a9adb3 55%, #7f838a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { font-size: 2.25rem; color: #d7dde0; letter-spacing: .03em; white-space: nowrap; }

.cta {
  display: flex; align-items: center; gap: 2.6rem; padding: 0 2.4rem 0 3.2rem;
  color: #fff; isolation: isolate;
  --c: 1.4rem; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  background: linear-gradient(180deg, #ef2a31 0%, #c50d15 50%, #8e070d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .45);
  transition: filter .2s;
}
.cta:hover { filter: brightness(1.12); }
.cta svg { width: 6rem; height: 6rem; flex: none; stroke-width: 1.5; }
.cta span { font: 900 italic 2.9rem/1.08 var(--italic); text-transform: uppercase; letter-spacing: .02em; flex: 1; }
.cta .chev { width: 3rem; height: 3rem; stroke-width: 2; }

.origins { display: flex; align-items: center; justify-content: space-between; padding: 0 5rem 0 3.2rem; }
.origins div { display: flex; align-items: center; gap: 2.8rem; font: 500 italic 1.55rem/1 Roboto, sans-serif; color: #e8e9ec; }
.origins svg { width: 4.2rem; height: 2.8rem; stroke: none; border-radius: .2rem; }
.origins i { width: 1px; height: 2.6rem; background: var(--line); }

.car { object-fit: contain; mix-blend-mode: screen; pointer-events: none; }

.lines { pointer-events: none; overflow: visible; }
.lines polyline { stroke: rgba(235, 238, 245, .7); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lines circle { fill: var(--red); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(227, 18, 27, .9)); }

.callout { --c: 1.2rem; display: flex; align-items: center; gap: 1.4rem; padding: 0 1.2rem; }
.callout::after { background: rgba(6, 8, 10, .9); }
.callout img { width: 4.6rem; height: 4.6rem; flex: none; }
.callout b {
  display: block; font: 700 1.35rem/1.05 Roboto, sans-serif; text-transform: uppercase; letter-spacing: .03em;
  padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.callout ul { list-style: none; }
.callout li {
  font: 500 max(1.02rem, 9.5px)/1.5 "Roboto Mono", monospace; text-transform: uppercase; letter-spacing: .02em; color: #cfd2d8; white-space: nowrap;
  padding-left: 1.4rem; position: relative;
}
.callout li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .6rem; height: .6rem; background: #cfd2d8; border-radius: .1rem; }

/* ---------- заголовки секций ---------- */
.sec {
  display: flex; align-items: center; gap: 1.2rem;
  font: 900 italic 2rem/1 var(--italic); text-transform: uppercase; letter-spacing: .06em;
}
.sec em { color: var(--red); font-style: italic; letter-spacing: -.1em; }
.sec-note { font: 500 max(1.1rem, 10px)/1 Roboto, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---------- услуги ---------- */
.services { display: grid; grid-template-columns: repeat(9, 1fr); gap: .85rem; }
.svc {
  --c: 1.2rem; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 1rem .6rem 3rem; transition: transform .2s;
}
.svc:hover { transform: translateY(-.3rem); }
.svc:hover::before { background: rgba(240, 242, 246, .7); }
.svc img { width: 6.2rem; height: 6.2rem; margin-bottom: 1rem; }
.svc span { font-size: 1.85rem; line-height: 1.05; min-height: 2.1em; display: flex; align-items: center; }
.svc::after { background: var(--panel); }
.svc small {
  position: absolute; right: 1.2rem; bottom: 1rem; font: 500 1.15rem/1 "Roboto Mono", monospace; color: var(--muted);
}
.svc small::before { /* полоска прогресса слева */
  content: ""; position: absolute; right: 3.2rem; bottom: .45rem; width: 9.8rem; height: 1px;
  background: linear-gradient(90deg, #fff 0 28%, var(--line) 28% 100%);
}

/* ---------- акция ---------- */
.promo { display: flex; align-items: center; overflow: hidden; }
.promo::after {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 .25rem, transparent .25rem 1.4rem),
    linear-gradient(90deg, #0e1114, #161a1d 60%, #0e1114);
}
.promo .shock {
  position: absolute; left: -4.5rem; top: -3rem; width: 26rem; height: 18rem;
  object-fit: cover; mix-blend-mode: screen; transform: rotate(-4deg);
  filter: brightness(1.45) contrast(1.15);
}
.promo-text { margin-left: 21.3rem; display: flex; flex-direction: column; text-transform: uppercase; font-family: var(--italic); font-style: italic; font-weight: 900; }
.promo-text .k { font-size: 2.6rem; color: #a6aab2; letter-spacing: .04em; }
.promo-text .big { font-size: 4.5rem; line-height: 1.05; letter-spacing: .02em; }
.promo-text .big em { color: #ff1d26; font-style: italic; font-size: 1.32em; line-height: .9; }
.promo-text .s { font-size: 2.85rem; letter-spacing: .03em; }

/* ---------- почему мы ---------- */
.why { display: grid; grid-template-columns: 27rem 26.5rem 28.8rem; gap: .85rem; }
.adv { --c: 1.2rem; display: flex; align-items: center; gap: 3.6rem; padding-left: 4rem; }
.adv img { width: 6.6rem; height: 6.6rem; flex: none; }
.adv span { font-size: 1.85rem; line-height: 1.3; }

/* ---------- контакты ---------- */
.c-phone, .c-addr { display: flex; align-items: center; gap: 2.2rem; padding-left: 2.8rem; }
.c-phone svg, .c-addr svg { width: 3.8rem; height: 3.8rem; flex: none; }
.c-phone span { font: 900 italic 3.6rem/1 var(--italic); letter-spacing: 0; white-space: nowrap; }
.c-addr span { font-size: 2rem; line-height: 1.25; }
.c-phone:hover::before, .c-addr:hover::before { background: rgba(240,242,246,.7); }

.map { --c: 1.2rem; overflow: hidden; }
.map iframe {
  position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border: 0;
  filter: grayscale(1) invert(.93) contrast(1.15) brightness(.8);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.map .pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  pointer-events: none; display: flex; align-items: flex-start; gap: 1rem;
}
.map .pin svg { width: 2.8rem; height: 3.8rem; stroke: none; filter: drop-shadow(0 0 .8rem rgba(227,18,27,.9)); margin-left: 3.8rem; }
.map .pin span {
  margin-top: -.4rem; padding: .7rem 1.1rem; font-size: 1.15rem; line-height: 1.3; white-space: nowrap;
  background: rgba(10, 11, 13, .9); border: 1px solid var(--line); border-radius: .4rem;
}

/* ---------- подвал ---------- */
.foot {
  display: flex; align-items: center; gap: 1.6rem;
  font: 500 max(1.1rem, 10px)/1 Roboto, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7b818a;
}
.foot i { flex: 1; height: 1px; background: var(--line-soft); }
.foot a { display: flex; align-items: center; gap: 1rem; font-size: 1.45rem; letter-spacing: .02em; color: var(--text); }
.foot a svg { width: 1.8rem; height: 1.8rem; }

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ (сцена 851 px макета)
   ========================================================= */
@media (max-width: 900px) {
  html { font-size: min(calc(100vw / 85.1), 10.6px); }   /* телефоны и планшеты — на всю ширину */
  .d-only { display: none !important; }
  .m-only { display: revert !important; }

  .stage {
    width: 85.1rem; height: 219.2rem;
    background:
      url("assets/bg-hud.webp") -30rem 2rem / 145rem auto no-repeat,
      var(--bg);
  }
  .a {
    left: calc(var(--mx) * 1rem);
    top: calc(var(--my) * 1rem);
    width: calc(var(--mw, 0) * 1rem);
    height: calc(var(--mh, 0) * 1rem);
  }
  .a:not([style*="--mw"]) { width: auto; }
  .a:not([style*="--mh"]) { height: auto; }

  .m-btn { display: flex !important; align-items: center; justify-content: center; }
  .m-btn svg { width: 4rem; height: 4rem; stroke-width: 1.8; }
  .stage .m-menu {
    position: absolute; z-index: 20; right: 2.8rem; top: 10.5rem; width: 34rem;
    display: flex; flex-direction: column; padding: 1rem 0;
  }
  .m-menu[hidden] { display: none; }
  .m-menu a { padding: 1.8rem 3rem; font-size: 2.4rem; }
  .m-menu::after { background: rgba(12, 13, 16, .97); }

  .h1 span { font-size: 6.9rem; line-height: .87; letter-spacing: .05em; }
  .sub { font-size: 2.2rem; }

  .cta { gap: 0; padding: 0 2.4rem 0 2.6rem; }
  .cta svg { width: 4.6rem; height: 4.6rem; }
  .cta span { font-size: 3rem; text-align: center; }
  .cta .chev { width: 2.8rem; height: 2.8rem; }

  .origins { padding: 0 4.5rem 0 4.3rem; }
  .origins div { gap: 2rem; font-size: 1.85rem; font-style: normal; }
  .origins svg { width: 4.7rem; height: 3rem; }

  .callout { gap: 1.2rem; padding: 0 1rem; }
  .callout img { width: 4.6rem; height: 4.6rem; }
  .callout b { font-size: 1.45rem; padding-bottom: .4rem; margin-bottom: .4rem; }
  .callout li { font-size: 1.15rem; }

  .sec { font-size: 2.6rem; }

  .services { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 9rem; gap: 1rem .8rem; }
  .svc { flex-direction: row; justify-content: flex-start; text-align: left; padding: 0 1.4rem 0 2.6rem; gap: 2.2rem; }
  .svc img { width: 6.6rem; height: 6.6rem; margin: 0; flex: none; }
  .svc span { font-size: 1.9rem; flex: 1; min-height: 0; }
  .svc small { display: none; }
  .svc > span::after {
    content: ""; width: 1.2rem; height: 1.2rem; margin-left: auto;
    border-top: 2px solid #e4e6ea; border-right: 2px solid #e4e6ea; transform: rotate(45deg); flex: none;
  }

  .promo .shock { left: -7rem; top: -5rem; width: 42rem; height: 26rem; }
  .promo-text { margin-left: 31.5rem; }
  .promo-text .k { font-size: 3.2rem; }
  .promo-text .big { font-size: 5rem; }
  .promo-text .s { font-size: 3.15rem; }

  .why { grid-template-columns: 1fr; grid-auto-rows: 5.9rem; gap: .75rem; }
  .adv { gap: 0; padding-left: 5.8rem; padding-right: 3rem; }
  .adv img { width: 5.2rem; height: 5.2rem; margin-right: 4.6rem; }
  .adv span { font-size: 1.95rem; flex: 1; }
  .adv::after { background: var(--panel); }
  .adv span::after { content: ""; }
  .adv { position: relative; }
  .adv > span { display: flex; align-items: center; }
  .adv > span::after {
    width: 1.2rem; height: 1.2rem; margin-left: auto;
    border-top: 2px solid #e4e6ea; border-right: 2px solid #e4e6ea; transform: rotate(45deg);
  }

  .c-phone, .c-addr { gap: 2.4rem; padding-left: 3.2rem; padding-right: 2.6rem; }
  .c-phone svg, .c-addr svg { width: 3.8rem; height: 3.8rem; }
  .c-phone span { font-size: 3.15rem; flex: 1; }
  .c-addr span { font-size: 1.9rem; flex: 1; }
  .c-phone::marker { content: none; }
  .c-phone > span, .c-addr > span { display: flex; align-items: center; }
  .c-phone > span::after, .c-addr > span::after {
    content: ""; width: 1.1rem; height: 1.1rem; margin-left: auto; flex: none;
    border-top: 2px solid #e4e6ea; border-right: 2px solid #e4e6ea; transform: rotate(45deg);
  }

  .map .pin svg { width: 3.2rem; height: 4.4rem; margin-left: 4.4rem; }
  .map .pin span { font-size: 1.3rem; }

  .foot { font-size: 1.3rem; letter-spacing: .1em; }

  .callbar {
    position: fixed; z-index: 30; left: max(.5rem, calc(50vw - 42rem)); right: max(.5rem, calc(50vw - 42rem)); bottom: .5rem;
    height: 6.7rem; display: flex !important; align-items: center; justify-content: center; gap: 2.6rem;
    font: 900 italic 3rem/1 var(--italic); text-transform: uppercase; letter-spacing: .03em; color: #fff;
    background: linear-gradient(180deg, #ef2a31 0%, #c50d15 50%, #8e070d 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .45), 0 -1rem 3rem rgba(0,0,0,.7);
    --c: 1.4rem; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  }
  .callbar svg { width: 4rem; height: 4rem; }
}

/* =========================================================
   КАРТОЧКА ЗАПИСИ (макет mockups/booking-modal.png, 1rem = 10 px макета)
   ========================================================= */
html.book-open { overflow: hidden; }
.book { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 4rem 1.6rem; }
.book[hidden] { display: none; }
.book-backdrop {
  position: fixed; inset: 0; background: rgba(4, 5, 7, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s;
}
.book-card {
  --c: 2rem; position: relative; width: 77.1rem; margin: auto 0; padding: 1.8rem 3.4rem 2.2rem;
  opacity: 0; transform: translateY(1.6rem) scale(.985); transition: opacity .2s, transform .2s;
}
.book.show .book-backdrop, .book.show .book-card { opacity: 1; transform: none; }
.book-card::before { background: rgba(185, 192, 200, .42); }
.book-card::after { background: linear-gradient(180deg, #0a0c0f, #06080a 40%); }
.book-card [hidden] { display: none !important; }

.book-top { display: flex; justify-content: space-between; align-items: flex-start; }
.book-logo { width: 18.2rem; height: auto; display: block; margin: .4rem 0 0 1.2rem; }
.book-x { --c: .8rem; width: 4.9rem; height: 4.9rem; display: grid; place-items: center; }
.book-x svg { width: 2.8rem; height: 2.8rem; stroke-width: 1.8; }
.book-x:hover::before { background: rgba(240, 242, 246, .7); }

.book-title {
  display: flex; align-items: center; gap: 1.6rem; margin: 2.2rem 0 .6rem -.6rem;
  font: 900 italic 5.2rem/1 var(--italic); text-transform: uppercase; letter-spacing: .02em;
}
.book-title em, .book-label em { color: var(--red); font-style: italic; letter-spacing: -.12em; }
.book-sub { font-size: 2.3rem; color: #b5bac0; margin-bottom: 2.2rem; }
.book-label {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem;
  font: 900 italic 1.9rem/1 var(--italic); text-transform: uppercase; letter-spacing: .05em;
}

.chips { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 7.2rem; gap: 1rem .9rem; margin-bottom: 2.1rem; }
.chip { --c: 1rem; display: flex; align-items: center; gap: 2.4rem; padding: 0 1.2rem 0 3rem; cursor: pointer; user-select: none; }
.chip input, .slot input { position: absolute; opacity: 0; pointer-events: none; }
.chip img { width: 5.2rem; height: 5.2rem; flex: none; }
.chip span { font-size: 1.65rem; line-height: 1.2; }
.chip:hover::before, .slot:hover::before, .field:hover::before { background: rgba(225, 228, 233, .6); }
.chip .tick {
  position: absolute; top: .9rem; right: 1rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
  opacity: 0; transform: scale(.6); transition: .15s;
}
.chip:has(input:checked)::before, .slot:has(input:checked)::before { background: var(--red); }
.chip:has(input:checked)::after, .slot:has(input:checked)::after { inset: 2px; }
.chip:has(input:checked) .tick { opacity: 1; transform: none; }
.chip:has(input:focus-visible)::before, .slot:has(input:focus-visible)::before { background: #fff; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.field { --c: 1rem; display: flex; align-items: center; gap: 2rem; min-height: 5.6rem; padding: 0 2rem; cursor: text; }
.row2 .field { min-height: 5.9rem; }
.field > svg { width: 2.6rem; height: 2.6rem; flex: none; color: #d9dce0; stroke-width: 1.5; }
.field input, .field textarea {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text);
  font: 400 1.65rem/1.3 Roboto, sans-serif; resize: none;
}
.field input::placeholder, .field textarea::placeholder { color: #a7acb3; }
.field:focus-within::before { background: rgba(240, 242, 246, .85); }
.field.bad::before { background: var(--red); }
.field-stack { flex: 1; display: flex; flex-direction: column; }
.field-stack small { font-size: 1.4rem; color: #a7acb3; line-height: 1.2; }
.field-stack input { font-size: 1.55rem; }
.field-stack input::placeholder { color: #d4d7db; }

.row-date { display: grid; grid-template-columns: 31.8rem 1fr; gap: 1rem; margin: 1rem 0; }
.field-date { position: relative; min-height: 5.1rem; cursor: pointer; }
.field-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; color-scheme: dark; }
.field-date.has-value input { position: static; opacity: 1; }
.field-date.has-value .date-ph { display: none; }
.date-ph { flex: 1; font-size: 1.65rem; color: #a7acb3; }
.field-date .date-ico { width: 2.2rem; height: 2.2rem; color: #c9ccd1; flex: none; margin-left: auto; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.slot { --c: .8rem; display: grid; place-items: center; cursor: pointer; font-size: 1.65rem; user-select: none; }
.slot:has(input:checked) span { color: #fff; font-weight: 500; }

.field-area { align-items: flex-start; min-height: 6.8rem; padding-top: 1.6rem; padding-bottom: 1rem; }
.field-area textarea { min-height: 4rem; }

.book-error { margin-top: 1.2rem; color: #ff5b62; font-size: 1.5rem; }
.book-actions { display: flex; align-items: center; gap: 2.6rem; margin-top: 1.6rem; }
.book-submit {
  width: 43.2rem; height: 6.6rem; border: 0; cursor: pointer; font: inherit;
  gap: 2.4rem; padding: 0 2.4rem 0 3.4rem;
}
.book-submit svg { width: 4.4rem; height: 4.4rem; }
.book-submit span { font-size: 2.6rem; white-space: nowrap; }
.book-submit .chev { width: 2.6rem; height: 2.6rem; }
.book-call { display: flex; align-items: center; gap: 1.6rem; }
.book-call svg { width: 3.4rem; height: 3.4rem; }
.book-call span { display: flex; flex-direction: column; font: 900 italic 2.6rem/1.1 var(--italic); white-space: nowrap; }
.book-call small { font: 400 1.6rem/1.3 Roboto, sans-serif; color: #c9ccd1; }
.book-call:hover span { color: #fff; text-shadow: 0 0 .8rem rgba(255,255,255,.35); }
.book-consent { margin-top: 2.2rem; text-align: center; font-size: 1.2rem; color: #8b9097; }

.book-done { text-align: center; padding: 4rem 2rem 2rem; }
.book-done > svg { width: 9rem; height: 9rem; color: #fff; stroke-width: 1.2; margin-bottom: 2rem; }
.book-done h3 { font: 900 italic 3.6rem/1 var(--italic); text-transform: uppercase; margin-bottom: 1.4rem; }
.book-done p { font-size: 1.8rem; color: #b5bac0; max-width: 56rem; margin: 0 auto 3rem; line-height: 1.45; }
.book-done .cta { display: inline-flex; height: 6.6rem; gap: 2rem; padding: 0 3.6rem; }
.book-done .cta svg { width: 3.2rem; height: 3.2rem; }

/* ---------- мобильная карточка записи ---------- */
@media (max-width: 900px) {
  .book { padding: 2rem 1.6rem 3rem; }
  .book-card { width: 81rem; padding: 3rem 3.4rem 3.6rem; --c: 2.4rem; }
  .book-logo { width: 30rem; margin: 0; }
  .book-x { width: 8rem; height: 8rem; --c: 1.4rem; }
  .book-x svg { width: 4.4rem; height: 4.4rem; }
  .book-title { font-size: 6.4rem; gap: 1.6rem; margin: 3.4rem 0 1.4rem; }
  .book-sub { font-size: 3.1rem; line-height: 1.35; margin-bottom: 3.6rem; }
  .book-label { font-size: 3rem; margin-bottom: 2rem; }

  .chips { grid-auto-rows: 15rem; gap: 1.4rem; margin-bottom: 3.4rem; }
  .chip { --c: 1.4rem; flex-direction: column; justify-content: center; gap: 1.4rem; padding: 1rem; text-align: center; }
  .chip img { width: 6rem; height: 6rem; }
  .chip span { font-size: 2.7rem; line-height: 1.15; }
  .chip .tick { width: 3.4rem; height: 3.4rem; top: 1.2rem; right: 1.2rem; }

  .row2 { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 1.4rem; }
  .field { --c: 1.4rem; min-height: 9.6rem; gap: 2.6rem; padding: 0 3rem; }
  .row2 .field { min-height: 9.6rem; }
  .field > svg { width: 4.2rem; height: 4.2rem; }
  .field input, .field textarea, .date-ph { font-size: 3.6rem; }   /* ≥16px — без автозума iOS */
  .field-stack small { font-size: 2.4rem; }
  .field-stack input { font-size: 3.6rem; }

  .row-date { grid-template-columns: 1fr; gap: 1.4rem; margin: 1.4rem 0; }
  .field-date { min-height: 9.6rem; }
  .field-date .date-ico { width: 3.6rem; height: 3.6rem; }
  .slots { gap: 1.4rem; }
  .slot { --c: 1.2rem; height: 8.4rem; font-size: 3rem; }
  .field-area { min-height: 13rem; padding-top: 2.8rem; }

  .book-error { font-size: 2.8rem; margin-top: 2rem; }
  .book-actions { flex-direction: column; align-items: stretch; gap: 3.4rem; margin-top: 2.8rem; }
  .book-submit { width: 100%; height: 11rem; justify-content: space-between; }
  .book-submit svg { width: 6rem; height: 6rem; }
  .book-submit span { font-size: 3.8rem; text-align: center; }
  .book-submit .chev { width: 3.6rem; height: 3.6rem; }
  .book-call { justify-content: center; gap: 2.6rem; }
  .book-call svg { width: 5.4rem; height: 5.4rem; }
  .book-call span { font-size: 4.4rem; }
  .book-call small { font-size: 2.8rem; }
  .book-consent { font-size: 2.3rem; margin-top: 3.2rem; line-height: 1.4; }

  .book-done > svg { width: 16rem; height: 16rem; }
  .book-done h3 { font-size: 5.6rem; }
  .book-done p { font-size: 3.2rem; }
  .book-done .cta { height: 10rem; }
  .book-done .cta svg { width: 5rem; height: 5rem; }
  .book-done .cta span { font-size: 3.8rem; }
  html.book-open .callbar { display: none !important; }
}

/* короткая форма: подпись «можно не выбирать», ловушка для ботов */
.book-label small { font: 400 1.4rem/1 Roboto, sans-serif; text-transform: none; letter-spacing: 0; color: #8b9097; margin-left: .6rem; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.book-submit:disabled { filter: saturate(.6) brightness(.85); cursor: progress; }
@media (max-width: 900px) { .book-label small { font-size: 2.4rem; } }

/* подпись прижата к правому краю (минимальный размер шрифта мог вытолкнуть её за край) */
@media (min-width: 901px) { .sec-note.a { left: auto; right: 3.6rem; } }

/* третья строка заголовка — «в Бердске» */
.h1 .l3 {
  margin-top: .9rem; color: var(--red);
  font: 900 italic 3.3rem/1 var(--italic); letter-spacing: .05em;
}
@media (max-width: 900px) { .h1 .l3 { font-size: 3.7rem; margin-top: .8rem; } }

/* выноски: высота по содержимому и внутренние отступы, чтобы текст не прилипал к рамке */
.callout.a { height: auto; padding: 1.4rem 2.2rem 1.5rem 1.6rem; gap: 1.6rem; }
.callout b { padding-bottom: .7rem; margin-bottom: .7rem; }
.callout li { line-height: 1.6; }
@media (max-width: 900px) { .callout.a { padding: 1.3rem 1.8rem 1.4rem 1.4rem; gap: 1.4rem; } }

/* выноски по ширине текста (на узких десктопах строки не упираются в рамку) */
@media (min-width: 901px) { .callout.a { width: max-content; min-width: calc(var(--w) * 1rem); } }

/* стрелки «›» не прилипают к тексту */
@media (max-width: 900px) {
  .svc > span, .c-phone > span, .c-addr > span { gap: 1.2rem; }
}

/* узкие телефоны: в выносках только заголовок — списки там были бы нечитаемо мелкими */
@media (max-width: 480px) {
  .callout ul { display: none; }
  .callout b { font-size: 2.5rem; border: 0; margin: 0; padding: 0; line-height: 1.1; }
  .callout img { width: 5.2rem; height: 5.2rem; }
  .callout.a { padding: 1.4rem 1.8rem 1.4rem 1.4rem; }
}

/* плитки услуг: столбцы строго равные, текст может сжиматься */
@media (max-width: 900px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc > span { min-width: 0; }
}
/* узкие телефоны: выноски по ширине заголовка, правые прижаты к правому краю */
@media (max-width: 480px) {
  .callout.a { width: max-content; }
  .callout-r.a { left: auto; right: 2.2rem; }
  .callout b { font-size: 2.3rem; }
}

/* плитки услуг на мобильном: стрелка закреплена у правого края, текст её не выталкивает */
@media (max-width: 900px) {
  .svc { padding: 0 3.4rem 0 2rem; gap: 1.6rem; }
  .svc > span::after { position: absolute; right: 1.6rem; top: 50%; margin: -.6rem 0 0; }
}

/* =========================================================
   ВАУ-ЭФФЕКТЫ (assets/js/fx.js). Работают только при html.fx —
   его не ставим при prefers-reduced-motion.
   ========================================================= */
@property --scan { syntax: '<percentage>'; inherits: false; initial-value: 110%; }
@property --s    { syntax: '<percentage>'; inherits: true;  initial-value: 110%; }

/* 1. запуск интерфейса */
html.fx:not(.fx-go) .stage > .a:not(.fx3d) { opacity: 0; }
html.fx-go .stage > .a { animation: fxIn .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes fxIn { from { opacity: 0; transform: translateY(1.4rem); filter: blur(.35rem); } }
html.fx-go .stage > .services .svc, html.fx-go .stage > .why .adv { animation: fxIn .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--d2, 0s); }

/* машина «проявляется» сканом слева направо */
html.fx .car {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--scan) - 6%), rgba(0, 0, 0, .08) calc(var(--scan) + 4%));
          mask-image: linear-gradient(90deg, #000 calc(var(--scan) - 6%), rgba(0, 0, 0, .08) calc(var(--scan) + 4%));
}
html.fx-go .stage > .car { animation: carIn 1.5s cubic-bezier(.4, .1, .2, 1) .35s backwards; }
@keyframes carIn { from { --scan: -10%; opacity: .2; } }

/* линии выносок дорисовываются, точки появляются и пульсируют */
/* pathLength не работает вместе с non-scaling-stroke — для анимации отключаем */
html.fx .lines polyline { vector-effect: none; stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; }
html.fx-go .lines polyline { animation: draw .7s ease-out 1.15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lines circle { transform-box: fill-box; transform-origin: center; }
html.fx-go .lines circle:not(.ring) { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.65s backwards; }
@keyframes pop { from { transform: scale(0); } }
.lines .ring { fill: none; stroke: var(--red); stroke-width: 1.5; opacity: 0; filter: none; }
html.fx-go .lines .ring { animation: ring 2.4s ease-out 2s infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }

/* 2. сканирующий луч, проходит по машине раз в 7 секунд */
.scan { pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
html.fx-go .stage > .a.scan { animation: fxIn .8s cubic-bezier(.2, .7, .2, 1) backwards, beam 7s cubic-bezier(.45, 0, .55, 1) 2.2s infinite; }
.scan img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: brightness(2.1) contrast(1.3) saturate(0);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--s) - 9%), #000 var(--s), transparent calc(var(--s) + .5%));
          mask-image: linear-gradient(90deg, transparent calc(var(--s) - 9%), #000 var(--s), transparent calc(var(--s) + .5%));
}
.scan i {
  position: absolute; top: 4%; bottom: 4%; left: var(--s); width: 2px; background: #ff2a33;
  box-shadow: 0 0 1.2rem .3rem rgba(227, 18, 27, .75), 0 0 4.5rem 1.2rem rgba(227, 18, 27, .28);
}
@keyframes beam { 0% { --s: -6%; } 32%, 100% { --s: 112%; } }

/* 3D-фон (three.js) — только в зоне первого экрана, плавно гаснет книзу */
.stage > .fx3d {
  left: 0; top: 0; width: 153.6rem; height: 52rem; pointer-events: none;
  opacity: 0; transition: opacity 1.8s ease;
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent);
}
.stage > .fx3d.on { opacity: 1; }

/* 4. параллакс: машина с выносками чуть смещается за курсором */
html.fx .car, html.fx .scan, html.fx .lines, html.fx .callout {
  translate: calc(var(--px, 0) * -1.3rem) calc(var(--py, 0) * -.8rem);
}
html.fx .h1, html.fx .sub { translate: calc(var(--px, 0) * .5rem) calc(var(--py, 0) * .3rem); }

/* 5. 3D-наклон карточек с бликом */
html.fx .tilt {
  transform: perspective(70rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s ease-out;
}
html.fx .svc.tilt:hover { transform: perspective(70rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-.3rem); }
.glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 46%);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.tilt:hover .glare { opacity: 1; }

/* 6. блик по красным кнопкам */
html.fx .cta:not(.a) { position: relative; }
html.fx .cta { overflow: hidden; }
html.fx .cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%);
  transform: translateX(-110%); animation: shine 6s ease-in-out 2.8s infinite;
}
@keyframes shine { 0% { transform: translateX(-110%); } 20%, 100% { transform: translateX(110%); } }

@media (max-width: 900px) {
  .stage > .fx3d { width: 85.1rem; height: 80rem; }
}

/* =========================================================
   ТЕЛЕФОНЫ И ПЛАНШЕТЫ (≤ 900 px): обычный поток вместо масштабируемого макета.
   Размеры в px — текст 14–16 px, кнопки от 48 px под палец.
   Перекрывает предыдущие мобильные правила (стоит в конце файла).
   ========================================================= */
@media (max-width: 900px) {
  .stage {
    width: auto; max-width: 720px; height: auto; margin: 0 auto;
    padding: 12px 16px calc(96px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
    grid-template-areas:
      "logo call" "h1 h1" "sub sub" "cta cta" "hero hero" "orig orig"
      "s1 s1" "svc svc" "promo promo" "s2 s2" "why why"
      "s3 s3" "phone phone" "addr addr" "map map" "foot foot";
    background: url("assets/bg-hud.webp") -330px 0 / 1240px auto no-repeat, var(--bg);
  }
  .stage > .a {
    position: relative; left: auto; right: auto; top: auto;
    width: auto; height: auto; translate: none;
  }
  .stage > .fx3d { position: absolute; left: 0; top: 0; width: 100%; height: 620px; }
  .lines, .sec-note { display: none !important; }

  /* шапка */
  .logo { grid-area: logo; width: 150px !important; align-self: center; }
  .m-btn { grid-area: call; width: 48px !important; height: 48px !important; align-self: center; }
  .m-btn svg { width: 22px; height: 22px; }

  /* первый экран */
  .h1 { grid-area: h1; margin-top: 18px; }
  .h1 span { font-size: clamp(30px, 9.6vw, 46px); line-height: .95; letter-spacing: .02em; white-space: normal; }
  .h1 .l3 { font-size: clamp(18px, 5.6vw, 26px); margin-top: 8px; }
  .sub { grid-area: sub; font-size: 16px; line-height: 1.4; white-space: normal; margin-top: 8px; color: #d0d5da; }
  .cta.a { grid-area: cta; height: 56px; margin-top: 18px; padding: 0 18px; gap: 14px; }
  .cta.a svg { width: 28px; height: 28px; }
  .cta.a span { font-size: 19px; }
  .cta.a .chev { width: 20px; height: 20px; }

  /* машина с выносками: выноски — плашки по углам */
  .car, .scan, .callout { grid-area: hero; }
  .car, .scan { width: 100% !important; aspect-ratio: 1623 / 767; margin: 46px 0 50px; }
  .scan img { height: 100%; }
  .callout.a { --c: 8px; width: max-content; z-index: 1; padding: 7px 12px 7px 9px; gap: 9px; }
  .callout.a ul { display: none; }
  .callout.a img { width: 26px; height: 26px; }
  .callout.a b { font-size: 13px; line-height: 1.15; border: 0; margin: 0; padding: 0; letter-spacing: .02em; }
  .callout.c-eng { align-self: start; justify-self: start; margin-top: 4px; }
  .callout.c-susp { align-self: start; justify-self: end; margin-top: 4px; }
  .callout.c-brake { align-self: end; justify-self: end; margin-bottom: 4px; }
  .callout b br { display: none; }

  .origins.a { grid-area: orig; height: 48px; padding: 0 14px; }
  .origins div { gap: 8px; font-size: 14px; font-style: normal; }
  .origins svg { width: 26px; height: 18px; }
  .origins i { height: 22px; }

  /* заголовки секций */
  .sec { font-size: 19px; margin: 30px 0 12px; gap: 8px; }
  #services { grid-area: s1; } #why { grid-area: s2; } #contacts { grid-area: s3; }

  /* услуги: 2 колонки на телефоне, 3 — на широких экранах */
  .services.a { grid-area: svc; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 8px; }
  .svc { --c: 8px; padding: 0 30px 0 12px; gap: 10px; }
  .svc img { width: 34px; height: 34px; }
  .svc span { font-size: 15px; line-height: 1.2; }
  .svc > span::after { width: 8px; height: 8px; right: 12px; margin-top: -4px; border-width: 2px; }
  .svc span br { display: none; }
  .svc span { overflow-wrap: anywhere; }

  /* акция */
  .promo.a { grid-area: promo; height: 124px; margin-top: 12px; --c: 12px; }
  .promo .shock { left: -40px; top: -26px; width: 210px; height: 170px; }
  .promo-text { margin-left: auto; margin-right: 16px; align-items: flex-start; }
  .promo-text .k { font-size: 15px; }
  .promo-text .big { font-size: 27px; line-height: 1.05; }
  .promo-text .s { font-size: 15px; }

  /* почему мы */
  .why.a { grid-area: why; grid-template-columns: 1fr; grid-auto-rows: 56px; gap: 8px; }
  .adv { --c: 8px; padding: 0 16px 0 14px; }
  .adv img { width: 32px; height: 32px; margin-right: 16px; }
  .adv span { font-size: 16px; }
  .adv > span::after { width: 8px; height: 8px; border-width: 2px; }

  /* контакты */
  .c-phone.a { grid-area: phone; height: 60px; padding: 0 16px; gap: 14px; }
  .c-addr.a { grid-area: addr; height: 60px; padding: 0 16px; gap: 14px; margin-top: 8px; }
  .c-phone svg, .c-addr svg { width: 26px; height: 26px; }
  .c-phone span { font-size: 24px; }
  .c-addr span { font-size: 15px; line-height: 1.3; }
  .c-phone > span::after, .c-addr > span::after { width: 8px; height: 8px; border-width: 2px; }
  .map.a { grid-area: map; height: 260px; margin-top: 8px; --c: 10px; }
  .map .pin svg { width: 22px; height: 30px; margin-left: 30px; }
  .map .pin span { font-size: 12px; padding: 5px 8px; }

  /* подвал */
  .foot.a { grid-area: foot; margin-top: 18px; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; letter-spacing: .08em; }
  .foot i { display: none; }

  /* нижняя кнопка «Позвонить» */
  .callbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    height: 56px; gap: 12px; font-size: 20px; --c: 10px;
  }
  .callbar svg { width: 24px; height: 24px; }
}

@media (min-width: 560px) and (max-width: 900px) {
  .services.a { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo.a { height: 150px; }
  .promo .shock { width: 260px; height: 200px; }
  .promo-text { margin-right: 40px; }
  .promo-text .big { font-size: 34px; }
  .c-phone.a, .c-addr.a { margin-top: 0; }
  .stage { grid-template-areas:
      "logo call" "h1 h1" "sub sub" "cta cta" "hero hero" "orig orig"
      "s1 s1" "svc svc" "promo promo" "s2 s2" "why why"
      "s3 s3" "phone addr" "map map" "foot foot"; }
  .c-addr.a { grid-area: addr; }
  .cta.a { max-width: 420px; }
}

/* мобильная доводка: слова в плитках не рвутся, последняя плитка на всю ширину, марки свободнее */
@media (max-width: 900px) {
  .svc { padding: 0 26px 0 10px; gap: 8px; }
  .svc img { width: 30px; height: 30px; }
  .svc span { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .origins.a { padding: 0 10px; }
  .origins div { gap: 6px; font-size: 13px; }
  .origins svg { width: 22px; height: 15px; }
}
@media (max-width: 559px) {
  .services.a .svc:last-child { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  .svc span { font-size: 14px; }
  .origins div { font-size: 12px; }
}
@media (max-width: 359px) {
  .svc { padding-right: 10px; }
  .svc > span::after { display: none; }
  .promo .shock { left: -78px; width: 190px; }
  .promo-text { margin-right: 12px; }
  .promo-text .big { font-size: 23px; }
  .promo-text .k, .promo-text .s { font-size: 13px; }
  .cta.a { gap: 10px; padding: 0 14px; }
  .cta.a span { font-size: 16px; white-space: nowrap; }
}

/* =========================================================
   МОБИЛЬНЫЕ ВЫНОСКИ: иконка + заголовок + список, линии к деталям (assets/js/mlines.js)
   ========================================================= */
.mlines { display: none; }
@media (max-width: 900px) {
  .car, .scan { margin: 104px 0 104px; }
  .callout.a { --c: 8px; padding: 9px 12px 10px 10px; gap: 10px; align-items: center; }
  .callout.a img { width: 30px; height: 30px; }
  .callout.a b {
    font-size: 12.5px; line-height: 1.15; letter-spacing: .03em;
    padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--line);
  }
  .callout.a ul { display: block; }
  .callout.a li { font-size: 11px; line-height: 1.5; letter-spacing: .02em; padding-left: 11px; }
  .callout.a li::before { width: 5px; height: 5px; top: .55em; }
  .callout.c-eng, .callout.c-susp { margin-top: 0; }
  .callout.c-brake { margin-bottom: 0; }

  .mlines { display: block; position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
  .mlines polyline { fill: none; stroke: rgba(235, 238, 245, .7); stroke-width: 1; }
  .mlines .dot { fill: var(--red); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(227, 18, 27, .9)); }
  .mlines .ring { fill: none; stroke: var(--red); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
  html.fx-go .mlines .ring { animation: ring 2.4s ease-out 2s infinite; }
  html.fx .mlines polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s ease-out 1.2s forwards; }
  html.fx .mlines .dot { transform-box: fill-box; transform-origin: center; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.6s backwards; }
  .callout.a { z-index: 1; }
}
@media (max-width: 359px) {
  .callout.a { padding: 8px 9px 9px 8px; gap: 7px; }
  .callout.a img { width: 24px; height: 24px; }
  .callout.a b { font-size: 11.5px; }
  .callout.a li { font-size: 10.5px; }
}

/* =========================================================
   МОБИЛЬНЫЕ ФОНЫ СЕКЦИЙ (сгенерированы GPT, assets/bg-m-*.webp)
   Подложка на всю ширину экрана за группой блоков, края растворяются в фоне.
   ========================================================= */
.mbg { display: none; }
@media (max-width: 900px) {
  .mbg {
    display: block; position: relative; z-index: -1; pointer-events: none;
    grid-column: 1 / -1; margin: -28px -16px; opacity: .9;
    background: var(--bg) center / cover no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 70px, #000 calc(100% - 70px), transparent);
            mask-image: linear-gradient(transparent, #000 70px, #000 calc(100% - 70px), transparent);
  }
  .stage { isolation: isolate; }
  .mbg-services { grid-row: s1-start / svc-end; background-image: url("assets/bg-m-services.webp"); }
  .mbg-promo    { grid-row: promo-start / why-end; background-image: url("assets/bg-m-promo.webp"); }
  .mbg-contacts { grid-row: s3-start / foot-end; background-image: url("assets/bg-m-contacts.webp"); background-position: center 30%; margin-bottom: -96px; }
  /* плашки поверх графики — чуть плотнее, чтобы текст оставался контрастным */
  .svc::after, .adv::after, .c-phone::after, .c-addr::after { background: rgba(8, 10, 12, .86); }
  .stage > .a, .stage > .sec { z-index: 1; }
}
@media (min-width: 560px) and (max-width: 900px) {
  .mbg-contacts { grid-row: s3-start / foot-end; }
}
@media (max-width: 900px) {
  .mbg { opacity: 1; filter: brightness(1.45) contrast(1.12); }
  .mbg-promo { filter: brightness(1.25) contrast(1.1); }
  .mbg-contacts { background-position: center 12%; filter: brightness(1.7) contrast(1.15); }
  /* плитки услуг полупрозрачные — сквозь них проступает чертёж */
  .svc::after { background: rgba(8, 10, 12, .74); }
}

/* =========================================================
   МОБИЛЬНАЯ ДОВОДКА: выноски «лесенкой» и облегчённые эффекты
   ========================================================= */
.map-load { display: none; }
@media (max-width: 900px) {
  /* выноски не в ряд: двигатель — сверху слева, подвеска — справа ниже, тормоза — снизу слева */
  .car, .scan { margin: 92px 0 98px; }
  .callout.c-eng   { align-self: start; justify-self: start; margin-top: 0; }
  .callout.c-susp  { align-self: start; justify-self: end;   margin-top: 52px; }
  .callout.c-brake { align-self: end;   justify-self: start; margin-bottom: 0; }

  /* лёгкие анимации: без размытия (blur на телефоне дорогой) */
  @keyframes fxInM { from { opacity: 0; transform: translateY(12px); } }
  html.fx-go .stage > .a,
  html.fx-go .stage > .services .svc, html.fx-go .stage > .why .adv { animation-name: fxInM; animation-duration: .5s; }
  html.fx-go .stage > .car { animation: fxInM .6s ease-out .3s backwards; }
  html.fx .car { -webkit-mask-image: none; mask-image: none; }
  .scan, .fx3d { display: none !important; }
  /* фоны уже осветлены в файлах */
  .mbg, .mbg-promo, .mbg-contacts { filter: none; }

  /* карта по нажатию */
  .map-load {
    display: block; position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
    height: 48px; padding: 0 22px; border-radius: 8px; cursor: pointer;
    font: 700 15px/48px Roboto, sans-serif; color: #fff; letter-spacing: .02em;
    background: rgba(14, 16, 19, .92); border: 1px solid var(--line);
  }
  .map.map-on .map-load { display: none; }
  .map:not(.map-on) iframe { visibility: hidden; }
}
@media (max-width: 900px) {
  .car, .scan { margin-top: 100px; }
  .callout.c-susp { margin-top: 34px; }
}