/* ============================================================================
   Друг Авто — дизайн-система
   Тёмная тема: чёрный, белый, зелёный. Обоснования решений — DESIGN.md.

   Ванильный CSS без сборки: проект на Flask/Jinja, Node в контуре нет,
   а сайт из ~15 страниц не окупает бандлер. Каскад организован слоями.
   ========================================================================= */

@layer tokens, base, layout, components, sections, utilities;

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* --- поверхности: четыре ступени вместо одной плоской заливки.
       Плоский чёрный читается как «не доделали», ступени дают глубину. */
    --bg:        #0a0c0b;
    --surface-1: #111514;
    --surface-2: #171d1b;
    --surface-3: #1e2523;

    /* --- линии */
    --line:      #232b28;
    --line-soft: #1a201e;
    --line-lit:  #313a37;   /* граница при наведении */

    /* --- текст */
    --ink:       #f3f6f5;
    --ink-muted: #9aa5a1;   /* 7.6:1 на --bg */
    --ink-dim:   #868f8b;   /* 4.6:1 на --surface-1, мелкий текст подвала */

    /* --- фирменный зелёный. Взят пипеткой с ливреи газели и логотипа
       из ролика заказчика: #3C8A42, тон H125. Как заливка кнопки он
       слишком тёмен (4.58:1), поэтому для интерфейса строим от него
       шкалу светлее, сохраняя тон. Лайм и «банковский» #00C853 отброшены:
       у конторы есть свой цвет, и он на бортах машин. */
    --brand:       #3c8a42;              /* точный цвет ливреи, для знака */
    --accent:      #52b85c;              /* заливка кнопок, 7.8:1 на фоне */
    --accent-hot:  #5dc466;              /* заливка при наведении */
    --accent-text: #7bd986;              /* зелёный как текст: 11.3:1 на фоне */
    --accent-ink:  #08170a;              /* текст поверх заливки: 7.4:1 */
    --accent-glow: rgba(82, 184, 92, .18);
    --accent-tint: rgba(82, 184, 92, .10);

    /* --- состояния */
    --ok:     #7bd986;
    --warn:   #f5c451;
    --danger: #ff6b6b;

    /* --- типографика
       Unbounded держит крупные заголовки: широкая геометрия читается как
       вывеска, а не как «шрифт по умолчанию». Manrope работает в интерфейсе,
       у него ровный ритм и полная кириллица. */
    --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

    /* --- форма: один радиус на страницу */
    --r:    9px;
    --r-lg: 16px;

    /* --- тени: на тёмном тень работает слабо, глубину держат
       подсветка верхней кромки и заливка ступенью выше */
    --edge:      inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .4);
    --shadow-accent: 0 6px 24px rgba(82, 184, 92, .28);

    /* --- ритм */
    --gap: clamp(.7rem, 1.6vw, 1.15rem);
    /* секции дышат тяжело: разрежённость читается как уверенность,
       плотная вёрстка -- как попытка впихнуть побольше */
    --section-y: clamp(2.6rem, 3.9vw, 4rem);
    --page: 1120px;

    /* быстрый вход, длинный выход: движение читается как физическое */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  /* Заказчик просил «как 80% в хроме». Меняем базу rem, а не каждое
     правило по отдельности: пропорции сохраняются, а весь интерфейс
     садится ровно на 80%. Медиазапросы считаются от пикселей окна
     и не съезжают. */
  html { font-size: 80%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .89rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.1;
    margin: 0 0 .5em;
    text-wrap: balance;
    color: #fff;
  }
  /* Unbounded шире Montserrat, поэтому кегль чуть меньше, а трекинг заметно
     мягче: с -.035em широкая геометрия начинает слипаться. */
  h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.019em; line-height: 1.11; }
  h2 { font-size: clamp(1.22rem, 1.9vw, 1.58rem); font-weight: 700; letter-spacing: -.015em; }
  h3 { font-family: var(--font-body); font-size: .975rem; font-weight: 700; letter-spacing: -.009em; }

  p { margin: 0 0 1em; max-width: 68ch; color: var(--ink-muted); }
  a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .2em; }
  a:hover { color: var(--accent-hot); }
  img { max-width: 100%; height: auto; display: block; }
  strong, b { color: #fff; }

  /* прайсы должны выравниваться по разрядам */
  table, .num { font-variant-numeric: tabular-nums; }

  /* --- браузерные поверхности: по умолчанию они ничьи, забираем их себе */
  ::selection { background: var(--accent); color: var(--accent-ink); }
  :root { accent-color: var(--accent); caret-color: var(--accent); color-scheme: dark; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  ::marker { color: var(--accent-text); }
  @supports (scrollbar-color: auto) {
    html { scrollbar-color: #2c3532 var(--bg); scrollbar-width: thin; }
  }

  /* Атрибут hidden слабее классов: у .field есть display:flex, и поле
     оставалось видимым. Это правило возвращает атрибуту силу. */
  [hidden] { display: none !important; }

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

  .skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--accent); color: var(--accent-ink); font-weight: 700;
    padding: 10px 16px; border-radius: var(--r); transition: top .18s var(--ease);
  }
  .skip-link:focus { top: 12px; }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
  @media (max-width: 600px) { .wrap { width: min(100% - 2rem, var(--page)); } }

  .section { padding-block: var(--section-y); position: relative; }
  .section--raised { background: var(--surface-1); }

  /* Разделитель секций: волосяная линия, растворяющаяся к краям.
     Сплошная линия во всю ширину на тёмном выглядит грубо. */
  .section--edge::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  }

  .section__head { max-width: 56ch; margin-bottom: clamp(1.3rem, 2.5vw, 1.85rem); }
  .section__head p { margin-bottom: 0; font-size: .95rem; line-height: 1.6; }
}

/* ------------------------------------------------------------ components */
@layer components {

  /* --- иконка */
  .ico { width: 1.2em; height: 1.2em; flex: none; stroke-width: 1.75; vertical-align: -.25em; }
  .ico--lg { width: 2.125rem; height: 2.125rem; }

  /* --- кнопки */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    font-family: var(--font-display); font-weight: 700; font-size: .86rem;
    padding: .8em 1.25em; border-radius: var(--r);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    white-space: nowrap;                  /* подпись кнопки не переносится */
    position: relative; isolation: isolate;
    transition: background-color .2s var(--ease-soft), border-color .2s var(--ease-soft),
                color .2s var(--ease-soft), transform .15s var(--ease), box-shadow .25s var(--ease);
  }
  .btn:active { transform: translateY(1px) scale(.995); }

  /* Блик пробегает по кнопке при наведении: поверхность читается
     как стекло, а не как плоская заливка. */
  .btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.4) 48%, transparent 76%);
    transform: translateX(-130%); transition: transform .65s ease;
  }
  .btn:hover::after { transform: translateX(130%); }

  /* морозное стекло: для второй кнопки первого экрана */
  .btn--frost {
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.5) 46%, rgba(150,170,200,.1));
    border-color: rgba(198,198,198,.4); color: #fff;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }
  .btn--frost:hover {
    border-color: rgba(82, 184, 92, .6); color: #fff;
    background: linear-gradient(135deg, rgba(82, 184, 92,.16), rgba(0,0,0,.42) 48%, rgba(82, 184, 92,.1));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 24px rgba(82, 184, 92,.22);
  }

  .btn--accent {
    background: var(--accent); color: var(--accent-ink);
    box-shadow: var(--shadow-accent);
  }
  .btn--accent:hover {
    background: var(--accent-hot); color: var(--accent-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(82, 184, 92, .4);
  }
  .btn--accent:active { transform: translateY(0) scale(.995); }

  .btn--ghost {
    background: var(--surface-2); color: var(--ink);
    border-color: var(--line); box-shadow: var(--edge);
  }
  .btn--ghost:hover {
    background: var(--surface-3); color: #fff;
    border-color: var(--line-lit); transform: translateY(-2px);
  }

  .btn--block { width: 100%; }
  .btn--lg { font-size: 1.0625rem; padding: 1.05em 1.9em; }

  /* --- поля формы */
  .field { display: flex; flex-direction: column; gap: .45rem; }
  .field > label { font-size: .8125rem; font-weight: 600; color: var(--ink-muted); }
  .input, select.input, textarea.input {
    font: inherit; font-size: .975rem; color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
    padding: .78em .9em; width: 100%;
    transition: border-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft),
                background-color .18s var(--ease-soft);
  }
  .input::placeholder { color: #78837f; }      /* 4.6:1 на --surface-2 */
  .input:hover { border-color: var(--line-lit); }
  .input:focus-visible {
    border-color: var(--accent); outline: none; background: var(--surface-3);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .input:disabled { opacity: .45; cursor: not-allowed; }
  textarea.input { min-height: 104px; resize: vertical; }
  .field__error { color: var(--danger); font-size: .8125rem; }
  .field__hint { color: var(--ink-muted); font-size: .8125rem; }

  .checkline {
    display: flex; gap: .65rem; align-items: flex-start;
    font-size: .875rem; color: var(--ink-muted); cursor: pointer;
  }
  .checkline input { margin-top: .25rem; flex: none; width: 1.05rem; height: 1.05rem; }
  .checkline:hover { color: var(--ink); }

  /* --- плашка */
  .tag {
    display: inline-flex; align-items: center; gap: .35em;
    font-size: .75rem; font-weight: 600;
    padding: .32em .75em; border-radius: 999px;
    background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--line);
  }
  .tag--accent { background: var(--accent-tint); color: var(--accent-text); border-color: rgba(82, 184, 92, .28); }
  .tag--ok { background: var(--accent-tint); color: var(--ok); border-color: rgba(82, 184, 92, .28); }

  /* --- карточка */
  .card {
    background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.5rem; box-shadow: var(--edge);
    transition: transform .25s var(--ease), border-color .25s var(--ease-soft),
                background-color .25s var(--ease-soft);
  }
  a.card { text-decoration: none; color: inherit; display: block; }
  a.card:hover {
    transform: translateY(-3px); border-color: var(--line-lit);
    background: var(--surface-2); box-shadow: var(--edge), var(--shadow-md);
  }

  /* --- аккордеон */
  .acc {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-1);
    transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft);
  }
  .acc:hover { border-color: var(--line-lit); }
  .acc[open] { background: var(--surface-2); border-color: var(--line-lit); }
  .acc + .acc { margin-top: .65rem; }
  .acc > summary {
    cursor: pointer; list-style: none; padding: 1.15rem 1.35rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .acc > summary::-webkit-details-marker { display: none; }
  .acc > summary::after {
    content: ""; flex: none; width: .55rem; height: .55rem;
    border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .28s var(--ease);
  }
  .acc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .acc__body { padding: 0 1.35rem 1.35rem; }
  .acc__body > :last-child { margin-bottom: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .acc[open] .acc__body { animation: accIn .35s var(--ease); }
    @keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }
  }

  /* --- таблица прайса */
  .ptable { width: 100%; border-collapse: collapse; font-size: .9375rem; }
  .ptable caption {
    text-align: left; font-family: var(--font-display); font-weight: 700;
    padding-bottom: .85rem; color: #fff;
  }
  .ptable th {
    text-align: left; font-weight: 600; font-size: .75rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-muted);
    padding: .6rem .85rem; border-bottom: 1px solid var(--line);
  }
  .ptable td { padding: .7rem .85rem; color: var(--ink-muted); }
  /* Зебра вместо линии под каждой строкой: частокол хайрлайнов утомляет глаз */
  .ptable tbody tr:nth-child(even) { background: var(--surface-2); }
  .ptable tbody tr:hover { background: var(--surface-3); }
  .ptable td:first-child { color: var(--ink); }
  .ptable td:last-child, .ptable th:last-child { text-align: right; font-weight: 700; color: #fff; }
  .table-scroll { overflow-x: auto; border-radius: var(--r); }

  /* --- сообщения */
  .flash {
    background: var(--accent-tint); border: 1px solid rgba(82, 184, 92, .28);
    border-radius: var(--r); padding: .9rem 1.15rem; margin-bottom: 1.25rem;
    color: var(--accent-text);
  }
  .note { color: var(--ink-muted); font-size: .875rem; }

  .empty {
    text-align: center; padding: 3.5rem 1.5rem; color: var(--ink-muted);
    border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface-1);
  }
  .empty .ico { color: #4d5754; margin-bottom: .65rem; }
  .empty p { margin-inline: auto; }
}

/* ------------------------------------------------------------------ шапка */
@layer components {
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(10, 12, 11, .82);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease-soft), background-color .3s var(--ease-soft);
  }
  /* граница появляется только после отрыва от верха: у первого экрана
     шапка должна сливаться с ним, а не резать его линией */
  .topbar[data-stuck="true"] { border-bottom-color: var(--line); background: rgba(10, 12, 11, .94); }
  @supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg); } }

  .topbar__inner { display: flex; align-items: center; gap: .95rem; height: 62px; }

  .logo {
    font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
    color: #fff; text-decoration: none; letter-spacing: -.02em; flex: none;
    display: inline-flex; align-items: center; gap: .55rem;
  }
  .logo { letter-spacing: -.01em; }
  .logo .ico { color: var(--accent-text); width: 1.7rem; height: 1.7rem; transition: transform .5s var(--ease); }
  .logo:hover .ico { transform: rotate(90deg); }

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

  /* Пункт меню как отлитая из металла пилюля: градиент даёт объём,
     блик пробегает по диагонали при наведении. */
  .nav a, .nav__trigger {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: .3rem;
    height: 40px; padding: 0 18px; border-radius: 7px;
    border: 1px solid rgba(198, 198, 198, .28);
    background: linear-gradient(105deg, #050505 0%, #1c221f 48%, #2b332f 100%);
    color: #f3f3f3; font-size: 14px; font-weight: 500; letter-spacing: -.01em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    font-family: inherit;
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .nav a::before, .nav__trigger::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .6s ease;
  }
  .nav a:hover::before, .nav__trigger:hover::before { transform: translateX(120%); }

  .nav a:hover, .nav__trigger:hover,
  .nav__group[data-open="true"] .nav__trigger {
    border-color: rgba(82, 184, 92, .55);
    background: linear-gradient(105deg, #0a1410 0%, #16251d 45%, #1f3a2b 100%);
    box-shadow: 0 0 18px rgba(82, 184, 92, .16);
    color: #fff;
  }
  .nav a[aria-current="page"] {
    border-color: rgba(82, 184, 92, .5);
    color: #fff;
  }

  .topbar__phone {
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
    color: #fff; text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .9rem; border-radius: var(--r);
    border: 1px solid var(--line); background: var(--surface-2);
    transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft);
  }
  .topbar__phone .ico { color: var(--accent-text); }
  .topbar__phone:hover { color: #fff; border-color: var(--accent); background: var(--accent-tint); }

  /* Мессенджеры в шапке. Форму берём у пунктов меню -- та же высота,
     та же металлическая заливка, тот же радиус: ряд читается как часть
     навигации, а не как приклеенный сбоку виджет. Цвет бренда проявляется
     только при наведении, иначе три ярких пятна спорят с кнопкой звонка. */
  .topbar__msg { display: flex; gap: 6px; }
  .tbm {
    width: 40px; height: 40px; border-radius: 7px;
    display: grid; place-items: center;
    border: 1px solid rgba(198, 198, 198, .28);
    background: linear-gradient(105deg, #050505 0%, #1c221f 48%, #2b332f 100%);
    color: var(--ink-muted); text-decoration: none;
    transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft),
                box-shadow .3s var(--ease-soft), transform .25s var(--ease);
  }
  .tbm .ico { width: 1.35rem; height: 1.35rem; }
  .tbm:hover { transform: translateY(-2px); }
  .tbm--tg:hover  { color: #55c1ef; border-color: rgba(34, 158, 217, .6); box-shadow: 0 0 18px rgba(34, 158, 217, .2); }
  .tbm--max:hover { color: #b191ff; border-color: rgba(138, 92, 246, .6); box-shadow: 0 0 18px rgba(138, 92, 246, .2); }
  .tbm--wa:hover  { color: #5ce68f; border-color: rgba(37, 211, 102, .6); box-shadow: 0 0 18px rgba(37, 211, 102, .2); }
  /* ниже 720px работают плавающие кнопки, ряд в шапке только теснил бы номер */
  @media (max-width: 720px) { .topbar__msg { display: none; } }

  .burger {
    display: none; margin-left: auto; background: var(--surface-2); cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--r); color: #fff; padding: .55rem;
  }
  .burger .ico { width: 1.5rem; height: 1.5rem; }

  @media (max-width: 1120px) { .nav a { padding: .55rem .55rem; font-size: .875rem; } }
  @media (max-width: 960px) {
    .burger { display: inline-flex; }
    .topbar__phone { margin-left: auto; }
    .nav {
      position: absolute; inset: 76px 0 auto; margin: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--surface-1); border-block: 1px solid var(--line);
      padding: .5rem; display: none;
    }
    .nav[data-open="true"] { display: flex; animation: navIn .28s var(--ease); }
    @keyframes navIn { from { opacity: 0; transform: translateY(-8px); } }
    .nav a { padding: .9rem 1rem; font-size: 1rem; }
    .nav a[aria-current="page"]::after { display: none; }
  }
  /* На узком экране номер целиком не влезает и обрезается краем окна.
     Шапка сжимается, а сам номер прячется: звонок никуда не девается,
     он живёт в крупной кнопке первого экрана и в нижней панели. */
  @media (max-width: 560px) {
    .topbar__inner { gap: .6rem; height: 64px; }
    .topbar__phone { font-size: .9rem; padding: .45rem .7rem; min-width: 0; }
    .topbar__phone span { overflow: hidden; text-overflow: ellipsis; }
    .logo { font-size: 1.05rem; }
    .logo .ico { width: 1.45rem; height: 1.45rem; }
  }
  /* Пальцем в ссылку высотой 17px не попасть. WCAG требует 24px, но по
     пальцу комфортно от 32px, поэтому на узких экранах даём ссылкам-спискам
     и мелким кнопкам вертикальный запас. Текстовые ссылки внутри абзаца
     не трогаем: там правило не действует и разреженные строки только
     мешают читать. */
  @media (max-width: 720px) {
    /* min-height, а не только padding: высота перестаёт зависеть от кегля
       шрифта, и цель не съедет обратно, если текст станет мельче. */
    /* min-width тоже нужен: у короткого пункта вроде «Цены» по высоте
       всё в порядке, а по ширине палец мимо. */
    .footer li > a {
      display: inline-flex; align-items: center;
      min-height: 34px; min-width: 34px;
    }
    .geo-btn { min-height: 34px; padding-inline: .7rem; }
    .cta-band__phone { min-height: 40px; }
    .logo { display: inline-flex; align-items: center; min-height: 36px; }
  }

  @media (max-width: 430px) {
    /* остаётся только трубка: подпись съедала всю строку */
    .topbar__phone { font-size: 0; gap: 0; padding: .5rem; }
    .topbar__phone .ico { width: 1.35rem; height: 1.35rem; }
  }
}

/* --------------------------------------------------------------- подвал */
@layer components {
  .footer {
    background: var(--surface-1); border-top: 1px solid var(--line);
    padding-block: 4rem 2rem; margin-top: auto;
  }
  .footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1.5fr repeat(3, 1fr); }
  @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
  .footer h3 { color: #fff; font-size: .8125rem; text-transform: uppercase;
               letter-spacing: .08em; margin-bottom: 1.1rem; }
  .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
  .footer a { color: var(--ink-muted); text-decoration: none; font-size: .9375rem;
              transition: color .18s var(--ease-soft); }
  .footer a:hover { color: var(--accent-text); }
  .footer__bottom {
    margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .8125rem; color: var(--ink-dim);
  }

  .social { display: flex; gap: .55rem; }
  .social a {
    width: 42px; height: 42px; border-radius: var(--r);
    border: 1px solid var(--line); background: var(--surface-2);
    display: grid; place-items: center; color: var(--ink-muted);
    transition: background-color .2s var(--ease-soft), color .2s var(--ease-soft),
                border-color .2s var(--ease-soft), transform .2s var(--ease);
  }
  .social a:hover {
    background: var(--accent); color: var(--accent-ink);
    border-color: var(--accent); transform: translateY(-2px);
  }

  /* плавающие действия на мобильном: звонок это основной сценарий */
  .float-actions {
    position: fixed; right: 14px; bottom: 14px; z-index: 45;
    display: none; flex-direction: column; gap: .6rem;
  }
  .float-actions a {
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    box-shadow: var(--shadow-lg); text-decoration: none;
    transition: transform .2s var(--ease);
  }
  .float-actions a:active { transform: scale(.94); }
  .float-actions .ico { width: 1.6rem; height: 1.6rem; }
  .fa-call { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-accent); }
  .fa-tg { background: #229ED9; }
  .fa-max { background: #8A5CF6; }
  .fa-wa { background: #25D366; }
  @media (max-width: 720px) { .float-actions { display: flex; } }
}

/* --------------------------------------------------- анимации из брифа */
@layer components {
  /* Логотип коротко «встряхивается» при загрузке: взгляд цепляется за
     название компании раньше, чем за всё остальное. Один раз, 300 мс. */
  @keyframes logoShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px) rotate(-2deg); }
    45% { transform: translateX(3px) rotate(1.5deg); }
    70% { transform: translateX(-2px) rotate(-1deg); }
  }
  .logo { animation: logoShake .3s ease-out .15s both; }

  /* Волна от точки нажатия. Радиус кружка задаётся из JS переменными
     --rx и --ry, поэтому волна расходится именно оттуда, куда ткнули. */
  .btn, .slider__arrow { position: relative; overflow: hidden; }
  .ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: rgba(255, 255, 255, .38);
    transform: translate(-50%, -50%) scale(0);
    animation: rippleOut .55s var(--ease-soft) forwards;
  }
  .btn--accent .ripple { background: rgba(0, 0, 0, .22); }
  @keyframes rippleOut { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

  /* Галочка после отправки заявки: контур рисуется, а не появляется целиком.
     Прорисовка читается как «готово», статичная иконка -- просто как картинка. */
  .checkmark { width: 64px; height: 64px; margin: 0 auto .75rem; display: block; }
  .checkmark__circle {
    stroke: var(--accent); stroke-width: 2.5; fill: none;
    stroke-dasharray: 166; stroke-dashoffset: 166;
    animation: drawCircle .6s var(--ease-soft) forwards;
  }
  .checkmark__tick {
    stroke: var(--accent); stroke-width: 3; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 48; stroke-dashoffset: 48;
    animation: drawTick .35s var(--ease-soft) .5s forwards;
  }
  @keyframes drawCircle { to { stroke-dashoffset: 0; } }
  @keyframes drawTick { to { stroke-dashoffset: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .logo { animation: none; }
    .ripple { display: none; }
    .checkmark__circle, .checkmark__tick { animation: none; stroke-dashoffset: 0; }
  }
}

/* ------------------------------------------- премиальные детали отделки */
@layer components {
  /* Вложенная рамка: карточка не лежит плоско на фоне, а сидит в «обойме»,
     как стекло в металлической рамке. Внешняя оболочка чуть светлее фона,
     внутреннее ядро -- своя заливка со своим бликом по верхней кромке.
     Радиус ядра меньше на величину отступа, иначе углы не концентричны. */
  .bezel {
    --bezel-pad: 6px;
    padding: var(--bezel-pad);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.055);
    transition: border-color .3s var(--ease-soft), transform .35s var(--ease),
                box-shadow .35s var(--ease);
  }
  .bezel > * {
    border-radius: calc(var(--r-lg) - var(--bezel-pad));
    background: var(--surface-1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .bezel:hover { border-color: rgba(82, 184, 92, .3); }
  a.bezel { text-decoration: none; color: inherit; display: block; }
  a.bezel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

  /* Иконка в кнопке живёт в собственном кружке и уезжает по диагонали:
     кнопка получает внутреннее движение, а не просто меняет заливку. */
  .btn__pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75em; height: 1.75em; margin-left: .15em; margin-right: -.55em;
    border-radius: 999px; background: rgba(0, 0, 0, .16);
    transition: transform .35s var(--ease), background-color .25s var(--ease-soft);
  }
  .btn__pill .ico { width: .95em; height: .95em; vertical-align: 0; }
  .btn:hover .btn__pill { transform: translate(3px, -1px) scale(1.06); background: rgba(0, 0, 0, .24); }
  .btn--ghost .btn__pill { background: rgba(255, 255, 255, .08); }
  .btn--ghost:hover .btn__pill { background: rgba(255, 255, 255, .14); }

  @media (prefers-reduced-motion: reduce) {
    .bezel, a.bezel:hover, .btn__pill, .btn:hover .btn__pill { transform: none; transition: none; }
  }
}

/* ------------------------------------------------------------- мега-меню */
@layer components {
  .nav__group { position: static; }

  .nav__trigger {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .55rem .7rem; border: 0; border-radius: var(--r);
    background: none; color: var(--ink-muted); cursor: pointer;
    font-family: var(--font-body); font-size: .9375rem; font-weight: 600;
    transition: color .2s var(--ease), background-color .2s var(--ease);
  }
  .nav__trigger:hover,
  .nav__group[data-open="true"] .nav__trigger { color: #fff; background: var(--surface-2); }
  .nav__caret { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
  .nav__group[data-open="true"] .nav__caret { transform: rotate(180deg); }

  /* Панель во всю ширину под шапкой: 13 услуг в три колонки читаются
     лучше, чем узкий вертикальный список на 13 строк. */
  .mega {
    position: absolute; inset: 100% 0 auto 0; z-index: 40;
    background: var(--surface-1);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .mega[hidden] { display: none; }

  .nav__group[data-open="true"] .mega { animation: megaIn .22s var(--ease-soft); }
  @keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } }

  .mega__inner { padding-block: 1.5rem 1.25rem; }

  .mega__list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .15rem 1.5rem; list-style: none; margin: 0; padding: 0;
  }
  .mega__list li { margin: 0; }

  .mega__list a {
    position: relative;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
    padding: .7rem .75rem; border-radius: var(--r);
    color: var(--ink-muted); text-decoration: none;
    transition: color .18s var(--ease), background-color .18s var(--ease);
  }
  .mega__list a:hover { color: #fff; background: var(--accent-tint); }

  /* подчёркивание выезжает слева направо */
  .mega__list a::after {
    content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .35rem;
    height: 2px; background: var(--accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
  }
  .mega__list a:hover::after { transform: scaleX(1); }

  .mega__ico { width: 1.25rem; height: 1.25rem; color: var(--accent-text); flex: none; }
  .mega__name { font-size: .9375rem; font-weight: 600; }
  .mega__price { font-size: .8125rem; color: var(--ink-dim); white-space: nowrap; }
  .mega__list a:hover .mega__price { color: var(--accent-text); }

  /* пункты проявляются по очереди, 40 мс между соседями */
  .nav__group[data-open="true"] .mega__list li {
    animation: megaItem .3s var(--ease-soft) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
  @keyframes megaItem { from { opacity: 0; transform: translateX(-10px); } }

  .mega__foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  }
  .mega__all {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--accent-text); font-weight: 600; font-size: .9375rem; text-decoration: none;
  }
  .mega__all:hover { color: var(--accent-hot); }
  .mega__all .ico { transition: transform .2s var(--ease); }
  .mega__all:hover .ico { transform: translateX(3px); }

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

  /* На мобильном панель раскрывается внутри выпадающего меню, а не поверх него */
  @media (max-width: 960px) {
    .nav__group { width: 100%; }
    .nav__trigger { width: 100%; justify-content: space-between; padding: .9rem 1rem; font-size: 1rem; }
    .mega {
      position: static; box-shadow: none; border: 0;
      background: var(--surface-2); border-radius: var(--r); margin-bottom: .5rem;
    }
    .mega__inner { padding: .5rem; }
    .mega__list { grid-template-columns: 1fr; }
    .mega__foot { margin-top: .5rem; padding: .75rem .5rem 0; }
    .mega__foot .btn { width: 100%; justify-content: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav__group[data-open="true"] .mega,
    .nav__group[data-open="true"] .mega__list li { animation: none; }
    .mega__list a::after { transition: none; }
  }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  /* Появление при скролле. Дети с .reveal-item выезжают по очереди —
     задержка задаётся из JS переменной --i, чтобы не плодить nth-child. */
  /* Вход с лёгкой расфокусировкой: блок будто «наводится на резкость».
     Только opacity, transform и filter -- ни одно из них не вызывает
     пересчёт раскладки, поэтому анимация идёт на видеокарте. */
  .reveal { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  .reveal.is-in {
    opacity: 1; transform: none; filter: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
  }
  .reveal-item { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  .is-in > .reveal-item, .reveal-item.is-in {
    opacity: 1; transform: none; filter: none;
    transition: opacity .42s var(--ease) calc(var(--i, 0) * 45ms),
                transform .42s var(--ease) calc(var(--i, 0) * 45ms),
                filter .42s var(--ease) calc(var(--i, 0) * 45ms);
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-in, .reveal-item, .is-in > .reveal-item {
      opacity: 1; transform: none; filter: none; transition: none;
    }
  }

  .stack { display: grid; gap: var(--gap); }
  .row { display: flex; gap: .75rem; flex-wrap: wrap; }
  .center { text-align: center; }
  .mt-0 { margin-top: 0; }
  .mb-0 { margin-bottom: 0; }
}

/* --------------------------------- геопозиция и авто в форме заявки */
@layer components {
  .field__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
  }
  /* Кнопка определения места стоит рядом с подписью поля, а не под ним:
     человек на обочине должен увидеть её раньше, чем начнёт печатать адрес. */
  .geo-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: var(--r);
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--accent-text); font: inherit; font-size: .8rem; font-weight: 600;
    cursor: pointer;
    transition: border-color .2s var(--ease-soft), background-color .2s var(--ease-soft);
  }
  .geo-btn:hover { border-color: var(--accent); background: var(--accent-tint); }
  .geo-btn:disabled { opacity: .55; cursor: default; }
  .geo-btn[data-state="done"] { color: var(--ok); border-color: rgba(82, 184, 92,.4); }
  .geo-btn[data-state="error"] { color: var(--danger); border-color: rgba(255,107,107,.4); }
}