/* ГОРИЗОНТ АВТО — дизайн-система (портирована из claude.ai/design в чистую статику).
   Шрифты Oswald + Golos Text — захостены локально (без Google Fonts). */
@import url("fonts.css");

/* ── tokens: colors ── */
:root{
--graphite-950:#08080A;--graphite-900:#0D0D10;--graphite-850:#121217;--graphite-800:#17171D;--graphite-700:#1F1F27;--graphite-600:#2B2B35;
--gold:#C8A24A;--gold-hover:#D7B65F;--gold-press:#A9873A;--gold-deep:#8A6E2F;
--gold-a08:rgba(200,162,74,.08);--gold-a15:rgba(200,162,74,.15);--gold-a30:rgba(200,162,74,.30);
--ink-100:#F3F1EA;--ink-300:#C7C5BD;--ink-500:#94928A;--ink-700:#5F5D57;
--line-1:rgba(243,241,234,.08);--line-2:rgba(243,241,234,.16);
--surface-page:var(--graphite-900);--surface-raised:var(--graphite-850);--surface-card:var(--graphite-800);--surface-elevated:var(--graphite-700);
--surface-field:var(--graphite-900);
--text-1:var(--ink-100);--text-2:var(--ink-300);--text-3:var(--ink-500);--text-placeholder:var(--ink-700);
--accent:var(--gold);--on-accent:var(--graphite-900);--focus-ring:var(--gold-a30);
/* Акцент для текста (в тёмной теме — обычное золото) */
--gold-text:var(--gold);
/* Декор «дороги» на первом экране и в CTA */
--road-horizon:rgba(243,241,234,.07);--road-ray:rgba(200,162,74,.055);--road-ray-2:rgba(200,162,74,.10);
}

/* ══ СВЕТЛАЯ ТЕМА ══ */
:root[data-theme="light"]{
--surface-page:#F7F5F0;--surface-raised:#EFEDE6;--surface-card:#FFFFFF;--surface-elevated:#FFFFFF;
--surface-field:#FFFFFF;
--text-1:#111114;--text-2:#3F3E3A;--text-3:#63615B;--text-placeholder:#A5A29A;
--line-1:rgba(13,13,16,.10);--line-2:rgba(13,13,16,.18);
--on-accent:#1a1408;
/* На светлом фоне чистое золото не читается — для текста берём глубокое */
--gold-text:#7A6029;--gold-hover:#614C20;--gold-press:#4C3B19;
--gold-a08:rgba(200,162,74,.12);--gold-a15:rgba(200,162,74,.20);--gold-a30:rgba(138,110,47,.38);
--shadow-card:0 18px 44px rgba(13,13,16,.10);
--road-horizon:rgba(13,13,16,.10);--road-ray:rgba(138,110,47,.10);--road-ray-2:rgba(138,110,47,.16);
}
/* Фолбэк без JS: системная светлая тема */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
  --surface-page:#F7F5F0;--surface-raised:#EFEDE6;--surface-card:#FFFFFF;--surface-elevated:#FFFFFF;
  --surface-field:#FFFFFF;
  --text-1:#111114;--text-2:#3F3E3A;--text-3:#63615B;--text-placeholder:#A5A29A;
  --line-1:rgba(13,13,16,.10);--line-2:rgba(13,13,16,.18);
  --on-accent:#1a1408;--gold-text:#7A6029;--gold-hover:#614C20;--gold-press:#4C3B19;
  --gold-a08:rgba(200,162,74,.12);--gold-a15:rgba(200,162,74,.20);--gold-a30:rgba(138,110,47,.38);
  --shadow-card:0 18px 44px rgba(13,13,16,.10);
  --road-horizon:rgba(13,13,16,.10);--road-ray:rgba(138,110,47,.10);--road-ray-2:rgba(138,110,47,.16);
  }
}
/* ── tokens: typography ── */
:root{
--font-display:'Oswald','Arial Narrow',sans-serif;
--font-body:'Golos Text','Helvetica Neue',Arial,sans-serif;
--display-xl:clamp(44px,4.6vw,68px);--display-lg:clamp(34px,3.2vw,46px);--display-md:28px;--display-sm:20px;
--lh-display:1.04;--ls-display:.01em;
--text-lg:18px;--text-md:16px;--text-sm:14px;--text-xs:12px;--lh-body:1.55;
--label-md:13px;--label-sm:11px;--ls-label:.14em;
}
/* ── tokens: spacing ── */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:140px;
--radius-1:2px;--radius-2:4px;--container:1240px;--gutter:32px;--control-h:52px;--control-h-sm:40px;
--shadow-card:0 24px 60px rgba(0,0,0,.45);
}
/* ── base ── */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-1);font-family:var(--font-body);font-size:var(--text-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--gold-text);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--gold-hover)}
::selection{background:var(--gold-a30);color:var(--ink-100)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase;margin:0}
.ha-kicker{font-family:var(--font-body);font-size:var(--label-sm);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-text)}
.ha-hr{border:0;border-top:1px solid var(--line-1);margin:0}
/* ── components: buttons ── */
/* ── components: buttons ──
   Одна семья на весь сайт: объём даёт градиент со светлой кромкой сверху и
   тенью снизу, отклик — подъём и бегущий блик. Кнопки на карточках каталога
   раньше жили отдельным стилем и выглядели дороже остальных; теперь стиль
   общий, а .cat-cta — просто псевдоним. */
.ha-btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--control-h);padding:0 30px;border-radius:var(--radius-2);
  border:1px solid transparent;font-family:var(--font-display);font-weight:600;
  font-size:15px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,
    background .18s,border-color .18s,color .18s,filter .18s}
/* Блик пробегает по кнопке при наведении — видно, что она отзывается. */
.ha-btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .62s cubic-bezier(.3,.7,.3,1)}
.ha-btn:hover::before,.ha-btn:focus-visible::before{transform:translateX(130%)}
.ha-btn:hover,.ha-btn:focus-visible{transform:translateY(-1px) scale(1.025)}
.ha-btn:active{transform:translateY(0) scale(.99)}

.ha-btn--primary{color:var(--on-accent);border-color:transparent;
  background:linear-gradient(180deg,var(--gold-hover),var(--gold) 52%,var(--gold-press));
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 -2px 0 rgba(0,0,0,.22) inset,
    0 8px 18px -10px rgba(200,162,74,.85)}
.ha-btn--primary:hover,.ha-btn--primary:focus-visible{filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(0,0,0,.22) inset,
    0 14px 26px -10px rgba(200,162,74,.95)}
.ha-btn--primary:active{box-shadow:0 2px 6px rgba(0,0,0,.35) inset}

/* Второстепенная и контурная — стекло: полупрозрачная подложка, светлая
   кромка сверху, золотой кант при наведении. Раньше стиля --secondary не
   было вовсе, и такие кнопки рисовались пустыми. */
.ha-btn--secondary,.ha-btn--outline{color:var(--text-1);
  border-color:var(--line-2);
  background:linear-gradient(180deg,rgba(243,241,234,.10),rgba(243,241,234,.03));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(243,241,234,.14) inset,0 8px 18px -14px rgba(0,0,0,.8)}
.ha-btn--secondary:hover,.ha-btn--outline:hover,
.ha-btn--secondary:focus-visible,.ha-btn--outline:focus-visible{
  border-color:var(--gold);color:var(--gold-text);
  background:linear-gradient(180deg,rgba(200,162,74,.20),rgba(200,162,74,.07));
  box-shadow:0 1px 0 rgba(243,241,234,.2) inset,0 14px 26px -14px rgba(0,0,0,.9)}
.ha-btn--secondary:active,.ha-btn--outline:active{box-shadow:0 2px 6px rgba(0,0,0,.3) inset}
:root[data-theme="light"] .ha-btn--secondary,
:root[data-theme="light"] .ha-btn--outline{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.72));
  box-shadow:0 1px 0 #fff inset,0 8px 18px -14px rgba(13,13,16,.45)}

/* Текстовая кнопка: подъёма и блика не даём — это ссылка, а не кнопка. */
.ha-btn--ghost{background:none;border:0;color:var(--gold-text);padding:0 8px;
  height:auto;box-shadow:none}
.ha-btn--ghost::before{display:none}
.ha-btn--ghost:hover,.ha-btn--ghost:focus-visible{color:var(--gold-hover);
  transform:none;text-decoration:underline;text-underline-offset:4px}
.ha-btn--ghost:active{transform:none}

.ha-btn--sm{height:var(--control-h-sm);padding:0 20px;font-size:13px}
.ha-btn--full{width:100%}
.ha-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ha-btn:disabled{opacity:.4;cursor:default;pointer-events:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .ha-btn{transition:background .15s,border-color .15s,color .15s}
  .ha-btn:hover,.ha-btn:focus-visible,.ha-btn:active{transform:none}
  .ha-btn::before{display:none}
}
.ha-btn__arrow{font-family:var(--font-body);font-weight:400;transform:translateY(-1px)}
/* ── components: fields ── */
.ha-field{display:flex;flex-direction:column;gap:8px}
.ha-field__label{font-size:var(--label-sm);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-3)}
.ha-field__input{height:var(--control-h);padding:0 16px;background:var(--surface-field);border:1px solid var(--line-1);border-radius:var(--radius-1);color:var(--text-1);font-family:var(--font-body);font-size:var(--text-md);transition:border-color .15s ease;width:100%}
.ha-field__input::placeholder{color:var(--text-placeholder)}
.ha-field__input:hover{border-color:var(--line-2)}
.ha-field__input:focus{outline:none;border-color:var(--gold-text)}
.ha-field__hint{font-size:var(--text-xs);color:var(--text-3)}
/* ── components: checkbox ── */
.ha-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.ha-check__input{position:absolute;opacity:0;width:0;height:0}
.ha-check__box{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border:1px solid var(--line-2);border-radius:var(--radius-1);background:var(--surface-field);position:relative;transition:border-color .15s ease,background .15s ease}
.ha-check__input:checked+.ha-check__box{background:var(--gold);border-color:var(--gold-text)}
.ha-check__input:checked+.ha-check__box::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ha-check__input:focus-visible+.ha-check__box{outline:2px solid var(--focus-ring);outline-offset:2px}
.ha-check__label{font-size:var(--text-sm);color:var(--text-3);line-height:1.5}
/* ── components: segmented ── */
.ha-seg{display:flex;border:1px solid var(--line-1);border-radius:var(--radius-1);overflow:hidden}
.ha-seg__opt{flex:1;height:var(--control-h-sm);background:transparent;border:0;color:var(--text-3);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease}
.ha-seg__opt+.ha-seg__opt{border-left:1px solid var(--line-1)}
.ha-seg__opt:hover{color:var(--text-1)}
.ha-seg__opt[aria-pressed="true"]{background:var(--gold-a15);color:var(--gold-text)}
/* ── components: card ── */
.ha-card{background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--radius-2);padding:var(--sp-6)}
/* Акцентные карточки-«окна» (форма расчёта, квиз, цена) — приподняты и выделены */
.ha-card--accent{background:var(--surface-elevated);border:1px solid var(--gold-a30);border-top:2px solid var(--gold);box-shadow:var(--shadow-card)}
.ha-card__index{font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:.1em;color:var(--gold-text)}
.ha-card__title{font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);letter-spacing:.02em;text-transform:uppercase;color:var(--text-1);margin:14px 0 10px}
.ha-card__body{font-size:var(--text-sm);color:var(--text-2);margin:0}
/* ── components: badge ── */
.ha-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--gold-a30);border-radius:var(--radius-1);background:var(--gold-a08);color:var(--gold-text);font-size:var(--label-sm);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap}
.ha-badge--neutral{border-color:var(--line-1);background:transparent;color:var(--text-3)}
/* ── components: trust ── */
.ha-trust{display:flex;gap:12px;align-items:flex-start}
.ha-trust__tick{flex:0 0 auto;width:7px;height:7px;margin-top:7px;background:var(--gold);transform:rotate(45deg)}
.ha-trust__text{font-size:var(--text-sm);color:var(--text-2);line-height:1.45}
/* ── components: соцсети-иконки ── */
.socials{display:inline-flex;gap:10px;align-items:center}
.social{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);color:var(--text-2);background:transparent;transition:border-color .15s ease,color .15s ease,background .15s ease}
.social:hover{border-color:var(--gold-text);color:var(--gold-text);background:var(--gold-a08)}
.social svg{width:20px;height:20px;display:block}
/* ── логотип: разные версии под тему ── */
.logo{display:block;height:34px;width:auto}
.logo--ondark{display:block}
.logo--onlight{display:none}
:root[data-theme="light"] .logo--ondark{display:none}
:root[data-theme="light"] .logo--onlight{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .logo--ondark{display:none}
  :root:not([data-theme]) .logo--onlight{display:block}
}
/* ── переключатель темы (система / светлая / тёмная) ── */
.theme{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:transparent}
.theme__opt{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;background:transparent;border:0;cursor:pointer;color:var(--text-3);transition:background .15s ease,color .15s ease}
.theme__opt+.theme__opt{border-left:1px solid var(--line-1)}
.theme__opt:hover{color:var(--text-1)}
.theme__opt[aria-pressed="true"]{background:var(--gold-a15);color:var(--gold-text)}
.theme__opt svg{width:16px;height:16px;display:block}
.theme__opt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* ── декор «дороги» — цвета из токенов темы ── */
.road-svg .road-h{stroke:var(--road-horizon)}
.road-svg .road-r{stroke:var(--road-ray)}
.road-svg .road-r--edge{stroke:var(--road-ray-2)}

/* ── Заявление о фиксированной комиссии (блок «Прозрачная цена») ── */
.pledge{margin-top:56px;padding:32px 36px;background:var(--surface-raised);border:1px solid var(--line-1);
 border-left:3px solid var(--gold);border-radius:var(--radius-2);display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px 48px;align-items:center}
.pledge__title{font-family:var(--font-display);font-weight:600;font-size:var(--display-sm);
 letter-spacing:.02em;text-transform:uppercase;color:var(--text-1);line-height:1.2}
.pledge__text{margin:0;font-size:var(--text-sm);color:var(--text-2)}
@media(max-width:900px){.pledge{grid-template-columns:1fr;gap:14px;padding:26px 24px;margin-top:40px}}

/* Контурная кнопка на светлом фоне — рамка заметнее */
:root[data-theme="light"] .ha-btn--outline{border-color:rgba(13,13,16,.32)}
@media (prefers-color-scheme: light){:root:not([data-theme]) .ha-btn--outline{border-color:rgba(13,13,16,.32)}}
/* Контраст активных табов/опций в светлой теме */
:root[data-theme="light"] .ha-seg__opt[aria-pressed="true"],
:root[data-theme="light"] .quiz-opt[aria-pressed="true"],
:root[data-theme="light"] .theme__opt[aria-pressed="true"]{color:var(--gold-hover)}
@media (prefers-color-scheme: light){
 :root:not([data-theme]) .ha-seg__opt[aria-pressed="true"],
 :root:not([data-theme]) .quiz-opt[aria-pressed="true"],
 :root:not([data-theme]) .theme__opt[aria-pressed="true"]{color:var(--gold-hover)}
}

/* ── layout / sections ── */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.tg{font-size:var(--text-sm);font-weight:500;color:var(--text-2)}
.tg:hover{color:var(--gold-text)}
.sec{padding:110px 0}
.sec--raised{background:var(--surface-raised);border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1)}
.sec-head{max-width:760px;margin:0 0 56px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:72px;align-items:start;padding-top:72px;padding-bottom:96px}
.flow{display:grid;grid-template-columns:220px minmax(90px,1fr) 460px;gap:24px 0;align-items:stretch}
.flow-you{grid-row:1/span 3;align-self:center;margin-right:28px;padding:32px 28px;border:1px solid var(--gold-a30);border-radius:var(--radius-2);background:var(--gold-a08);text-align:center}
.flow-line{position:relative;display:flex;align-items:center;justify-content:center}
.flow-line::before{content:"";position:absolute;left:0;right:6px;top:50%;border-top:1px solid var(--gold-a30)}
.flow-line::after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;background:var(--gold);transform:translateY(-50%) rotate(45deg)}
.flow-line span{position:relative;background:var(--surface-raised);padding:0 12px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.road-wrap{position:relative;padding-top:9px}
.road-line{position:absolute;left:2px;right:0;top:12px;height:1px;background:linear-gradient(90deg,var(--gold-a30),var(--gold) 50%,transparent 98%)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:none;border:0;padding:22px 0;cursor:pointer;color:var(--text-1);font-family:var(--font-body);font-size:17px;font-weight:500;text-align:left}
.faq-q:hover{color:var(--gold-text)}
.faq-x{font-family:var(--font-display);font-size:22px;color:var(--gold-text);transition:transform .2s ease}
.faq-a{margin:0 0 24px;max-width:680px;font-size:var(--text-sm);color:var(--text-2)}
.quiz-opt{display:flex;align-items:center;justify-content:center;min-height:56px;padding:12px 16px;background:var(--surface-field);border:1px solid var(--line-1);border-radius:var(--radius-1);color:var(--text-2);font-family:var(--font-body);font-size:15px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.quiz-opt:hover{border-color:var(--line-2);color:var(--text-1)}
.quiz-opt[aria-pressed="true"]{border-color:var(--gold-text);color:var(--gold-text);background:var(--gold-a08)}
.form__status{min-height:20px}
.form__status.ok{color:var(--gold-hover)}
.form__status.err{color:#e08a8a}
@media(max-width:1100px){
.hero{grid-template-columns:1fr;gap:48px}
.grid-5{grid-template-columns:1fr 1fr;gap:32px}
.road-line{display:none}
.grid-3{grid-template-columns:1fr 1fr}
.grid-2{grid-template-columns:1fr;gap:40px}
.flow{display:flex;flex-direction:column;gap:16px}
.flow-you{margin-right:0}
.flow-line::before,.flow-line::after{display:none}
.flow-line{justify-content:flex-start;padding:2px 0}
}
@media(max-width:700px){.grid-3,.grid-5{grid-template-columns:1fr}.sec{padding:72px 0}.sec-head{margin-bottom:40px}}

/* ══ МОБИЛЬНЫЕ ФИКСЫ ══ */
/* Сетки не должны распирать экран содержимым (min-width:auto по умолчанию) */
.grid-2>*,.grid-3>*,.grid-5>*,.hero>*{min-width:0}
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%}
@media(max-width:700px){
  :root{--gutter:20px}
  /* Заголовки и кикеры компактнее */
  h1{font-size:clamp(30px,8.5vw,40px)!important;hyphens:auto}
  .sec-head h2{font-size:clamp(26px,7.5vw,34px)!important}
  .ha-kicker{font-size:10px;letter-spacing:.10em}
  /* Кнопки — на всю ширину, ровные */
  .hero .ha-btn,#cta .ha-btn{width:100%}
  .hero>div>div[style*="display:flex"],#cta div[style*="display:flex"]{flex-direction:column;width:100%}
  /* Маркеры доверия — одна колонка */
  .hero>div>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:14px!important}
  /* Прайс-строки: складываем вертикально, бейдж переносится */
  .price-row{flex-wrap:wrap;gap:10px!important;padding:18px 0!important}
  .price-row .ha-badge{white-space:normal;font-size:10px;padding:6px 10px}
  .price-row>span:first-child{display:none}
  /* Карточки и «окна» — меньше внутренних отступов */
  .ha-card{padding:var(--sp-5)}
  #quiz{padding:24px 20px!important}
  #quiz div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .quiz-opt{min-height:50px}
  /* Табы стран — во всю ширину */
  .ha-seg{width:100%}
  .sec--raised .container>div[style*="max-width:420px"]{max-width:100%!important}
  /* Форма расчёта: поля крупнее пальца, без зума в iOS */
  .ha-field__input{font-size:16px}
  /* FAQ — плотнее */
  .faq-q{font-size:15px;padding:18px 0}
  /* Шапка: логотип меньше, соцсети прячем (они есть в подвале) */
  .logo{height:26px}
  header .socials{display:none}
  header .container{gap:10px}
  header>.container>div{gap:10px!important}
  .theme__opt{width:32px;height:32px}
  .theme__opt svg{width:15px;height:15px}
  .ha-btn--sm{padding:0 14px;font-size:12px}
  /* Таблица комиссии: цена не должна упираться в подпись */
  #cena .ha-card--accent>div[style*="justify-content:space-between"]{gap:12px}
  #cena .ha-card--accent span[style*="font-size:24px"]{font-size:20px!important}
}

/* ══ АНИМАЦИИ ══ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  .reveal.is-in{opacity:1;transform:none}
  .reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}.reveal-d3{transition-delay:.21s}
  .reveal-d4{transition-delay:.28s}.reveal-d5{transition-delay:.35s}
  /* Плавные наведения */
  .ha-card{transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
  .grid-3 .ha-card:hover{border-color:var(--gold-a30);transform:translateY(-3px)}
  .ha-btn{transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease}
  .ha-btn:active{transform:translateY(1px)}
  .social{transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease}
  .social:hover{transform:translateY(-2px)}
  /* Раскрытие FAQ */
  .faq-a{animation:faqIn .28s ease both}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  /* Линия-дорога в шагах «прочерчивается» */
  .road-line{transform-origin:left center;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .road-line.is-in{transform:scaleX(1)}
  /* Мягкое дыхание свечения на первом экране */
  #glow-ellipse{animation:glowPulse 7s ease-in-out infinite}
  @keyframes glowPulse{0%,100%{opacity:.85}50%{opacity:1}}
}
html{scroll-behavior:smooth}

/* ── Знак: у SVG нет собственной пиксельной ширины, во флексе он схлопывался
   в ноль. Фиксируем пропорцию и запрещаем сжатие. ── */
.logo{aspect-ratio:1630/600;flex:0 0 auto}
header .container>a{flex:0 0 auto}
/* На узких экранах ссылка на раздел не помещается рядом со знаком,
   переключателем темы и кнопкой — уводим её в подвал. */
@media (max-width:560px){.nav-section{display:none}}

/* Класс .mainnav, а не .nav: .nav уже занят шапкой privacy.html
   ══ СКВОЗНАЯ НАВИГАЦИЯ МНОГОСТРАНИЧНИКА ══ */
.mainnav{display:flex;align-items:center;gap:22px}
.mainnav a{font-size:var(--label-md);letter-spacing:.04em;text-transform:uppercase;
  font-weight:600;color:var(--text-2);text-decoration:none;white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent}
.mainnav a:hover{color:var(--text-1)}
/* Текущий раздел: золотой текст и заметная подчёркивающая линия —
   чтобы с одного взгляда было видно, где посетитель находится. */
.mainnav a{border-bottom-width:2px}
.mainnav a[aria-current="page"]{color:var(--gold-text);border-bottom-color:var(--gold)}
/* ── «Каталог»: раскрывающийся пункт, сам по себе не ссылка ──
   На широком экране открывается наведением, на узком — как гармошка
   внутри бургер-меню. Разделы в работе показаны неактивными: посетителю
   видно, что они будут, но кликнуть некуда. */
.mainnav__group{position:relative;display:flex;align-items:center}
/* Пункт «Каталог» — ссылка на обзорную страницу, а не только раскрывашка,
   поэтому здесь же гасим подчёркивание и наследие правил для ссылок меню. */
.mainnav__trigger{font-family:inherit;font-size:var(--label-md);letter-spacing:.04em;
  text-transform:uppercase;font-weight:600;color:var(--text-2);background:none;border:0;
  padding:6px 0;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;
  text-decoration:none;border-bottom:1px solid transparent}
.mainnav__trigger:hover,.mainnav__group[data-open="1"] .mainnav__trigger{color:var(--text-1)}
.mainnav__trigger{border-bottom-width:2px}
.mainnav__group[data-cur="1"] .mainnav__trigger{color:var(--gold-text);border-bottom-color:var(--gold)}
.mainnav__chev{font-size:9px;line-height:1}
/* Мостик через зазор: без него курсор по дороге к списку выходит за
   пределы группы, :hover рвётся и список захлопывается. */
.mainnav__menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mainnav__menu{display:none;position:absolute;top:calc(100% + 12px);left:-16px;min-width:252px;
  background:var(--surface-elevated);border:1px solid var(--line-2);border-radius:var(--radius-2);
  padding:7px 0;box-shadow:0 18px 44px rgba(0,0,0,.42);z-index:40}
.mainnav__group[data-open="1"] .mainnav__menu{display:block}
/* Пункт списка: флаг — текст — метка «в разработке» у правого края. */
.mainnav__menu a,.mainnav__menu span.soon{display:flex;align-items:center;gap:9px;
  padding:11px 16px;font-size:var(--text-sm);letter-spacing:0;text-transform:none;
  font-weight:500;color:var(--text-2);border-bottom:0;white-space:nowrap}
.mainnav__menu .flag{font-size:15px;line-height:1;flex:0 0 auto;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.mainnav__menu .soon em{margin-left:auto}
.mainnav__menu a:hover{background:var(--gold-a08);color:var(--gold-text)}
.mainnav__menu .soon{color:var(--text-3);cursor:default}
.mainnav__menu .soon em{font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line-2);border-radius:2px;padding:3px 6px;flex:0 0 auto}
@media (hover:hover){
  .mainnav__group:hover .mainnav__menu{display:block}
}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-2);cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:var(--text-1);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;
  height:1.5px;background:var(--text-1)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1080px){
  .mainnav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--surface-raised);
    border-bottom:1px solid var(--line-1);padding:8px var(--gutter) 18px;z-index:30}
  .mainnav[data-open="1"]{display:flex}
  .mainnav a{padding:14px 0;border-bottom:1px solid var(--line-1)}
  .mainnav a{border-bottom-width:1px}
  .mainnav a[aria-current="page"],.mainnav__group[data-cur="1"] .mainnav__trigger{
    border-bottom-color:var(--line-1);box-shadow:inset 3px 0 0 var(--gold);padding-left:12px}
  .mainnav__trigger{border-bottom-width:1px}
  .mainnav__group{display:block}
  .mainnav__trigger{width:100%;justify-content:space-between;padding:14px 0;
    border-bottom:1px solid var(--line-1)}
  .mainnav__menu::before{display:none}
  .mainnav__menu,.mainnav__group:hover .mainnav__menu{position:static;display:none;min-width:0;
    border:0;border-radius:0;box-shadow:none;background:none;padding:0}
  .mainnav__group[data-open="1"] .mainnav__menu{display:block}
  .mainnav__menu a,.mainnav__menu span{padding:13px 0 13px 18px;border-bottom:1px solid var(--line-1)}
  .burger{display:flex}
}
@media (prefers-reduced-motion:no-preference){
  .burger span,.burger span::before,.burger span::after{transition:transform .18s,top .18s}
}

/* ══ КАРТОЧКИ КАТАЛОГА (общие для витрины и главной) ══ */
.cat-grid[hidden],.cat-tablewrap[hidden],.cat-cols[hidden]{display:none!important}
/* Цена под ключ в карточке лота. Живёт здесь, а не в стилях каталога: одна и
   та же карточка стоит и на главной, и в обзоре каталога, и в витрине. */
/* Подсказка про ввоз через Киргизию. Появляется на мощных и свежих машинах —
   там разница с растаможкой во Владивостоке заметнее всего. Точной суммы не
   обещаем: маршрут в тарифах пока не заведён, поэтому зовём уточнить расчёт.
   Пульсация мягкая и одна на карточку — мигающая витрина читается как реклама. */
.cat-kg{display:flex;align-items:center;gap:7px;margin:2px 0 8px;padding:5px 9px;
  border:1px solid color-mix(in srgb, var(--gold) 38%, transparent);border-radius:4px;
  background:color-mix(in srgb, var(--gold) 9%, transparent);
  color:var(--gold-text);font-size:11.5px;line-height:1.25}
.cat-kg__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--gold);
  animation:kgPulse 2.4s ease-in-out infinite}
@keyframes kgPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.cat-kg__dot{animation:none;opacity:1}}
.cat-price{margin:6px 0 10px;line-height:1.2}
.cat-price b{display:block;font-family:var(--font-display);font-size:19px;color:var(--gold-text)}
.cat-price b.ask{font-size:15px;color:var(--text-2)}
.cat-price i{font-style:normal;font-size:11.5px;color:var(--text-3)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:32px}
/* ── карточка: жидкое стекло ──
   Полупрозрачная подложка с размытием фона, тонкий светлый кант сверху
   (имитация преломления на кромке) и мягкая тень. При наведении стекло
   светлеет, кант загорается золотом, карточка чуть приподнимается. */
.cat-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px;border:1px solid rgba(243,241,234,.10);
  /* 🔴 БЕЗ backdrop-filter — ЭТО БЫЛА ЧИСТАЯ ТРАТА.
     Замерено 02.09.2026: за карточкой лежит РОВНЫЙ сплошной цвет #0D0D10 —
     все промежуточные слои прозрачны, картинки нет. Размытие однотонной
     заливки возвращает ту же однотонную заливку, то есть эффект не давал
     ничего видимого, но пересчитывался на каждом кадре прокрутки для
     каждой из двух десятков карточек. Отсюда и рывки при скролле.
     Цвета ниже — точный результат прежнего полупрозрачного градиента,
     сложенного с фоном страницы: вид тот же, стоимость нулевая.
     ⚠️ Если под карточками когда-нибудь появится картинка или узор —
     менять надо ЭТИ цвета, а не возвращать backdrop-filter. */
  background:linear-gradient(160deg,rgb(30,30,32),rgb(18,18,21) 42%,rgb(23,23,26));
  box-shadow:0 1px 0 rgba(243,241,234,.10) inset,0 14px 34px -22px rgba(0,0,0,.9);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s,background .28s}
.cat-card::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.16),transparent 34%);opacity:.55;transition:opacity .28s}
.cat-card:hover{transform:translateY(-4px);border-color:var(--gold-a30);
  background:linear-gradient(160deg,rgb(39,39,40),rgb(21,21,24) 42%,rgb(27,27,29));
  box-shadow:0 1px 0 rgba(243,241,234,.16) inset,0 26px 52px -26px rgba(0,0,0,.95),
    0 0 0 1px var(--gold-a15)}
.cat-card:hover::after{opacity:.85}
:root[data-theme="light"] .cat-card{border-color:rgba(13,13,16,.10);
  background:linear-gradient(160deg,rgb(254,254,253),rgb(252,251,249));
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px -24px rgba(13,13,16,.5)}
:root[data-theme="light"] .cat-card::after{background:linear-gradient(140deg,rgba(255,255,255,.7),transparent 36%)}
.cat-card a.ph{display:block;position:relative;aspect-ratio:4/3;background:var(--surface-raised);overflow:hidden}

.cat-card a.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* ── Фотолента карточки (.ph-strip / .ph-bars / .ph-zones / .ph-more) ──
   🔴 ПРАВИЛ ДЛЯ ЭТИХ КЛАССОВ НЕ БЫЛО ВООБЩЕ. Разметку и переключение кадров
   рисует скрипт (build_catalog_pages.py, stripShow), а стилей к ним не
   существовало ни здесь, ни на страницах — только осиротевшая ссылка
   `@media(hover:none){.ph-bars{opacity:1}}`. Из-за этого все снимки лота
   лежали в потоке друг под другом: первый занимал кадр, а верх второго
   торчал снизу (владелец, 30.08.2026, мобильная витрина). Заодно не работал
   и перебор кадров наведением — зоны были обычными span без размеров.

   Кадры кладём абсолютно поверх друг друга внутри .ph (у неё
   position:relative и overflow:hidden), показываем только .on. */
.ph-strip{position:absolute;inset:0}
/* 🔴 ВЕСОМ ВЫШЕ `.cat-card a.ph img`. Тот селектор (0,2,2) задаёт
   object-fit:cover и побеждал простое `.ph-strip img` (0,1,1): кадр всё
   равно обрезался. Проверено в браузере — правило лежало и не действовало.
   Поля у вертикальных и широких снимков закрывает заливка .ph — ровно так
   же, но без единого пикселя пересчёта при прокрутке. */
.cat-card a.ph .ph-strip>img,
.lot-main .ph-strip>img{object-fit:contain;z-index:1}
.ph-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;opacity:0;transition:opacity .12s linear}
.ph-strip img.on{opacity:1}
/* ── Фирменный знак на фотографиях лотов ──
   Снимки не наши: они отдаются прямо с CDN площадок (ci.encar.com и других),
   мы их не храним. Поэтому знак НЕ выжигается в файл, как это делает AI-офис
   перед публикацией в Telegram (app/watermark.py, Pillow) — там картинка
   уходит из-под контроля, и другого способа нет. Здесь знак кладётся поверх
   кадра разметкой: он виден на экране и на скриншоте, стоит ноль и ничего не
   гоняет через наш сервер. Выжигание потребовало бы проксировать каждый
   снимок (страница выдачи — под сотню картинок), а тяжёлую работу мы после
   аварии 30.08.2026 в веб-процесс не пускаем.

   Ставим псевдоэлементом: разметку карточек рисуют четыре разных сборщика,
   и одно правило здесь дешевле четырёх правок в них. */
.cat-card a.ph::after,
.lot-main::after{
  content:"";position:absolute;z-index:4;pointer-events:none;
  /* Знак берём фирменный, а не белый силуэт: у ondark эмблема белая, а
     надпись — золото #C8A24A. Сплошной белый читался как чужая заглушка и
     терял половину узнаваемости. Перекрашивать знак нельзя (04_БРЕНД),
     поэтому именно готовый файл, а не filter по белому. */
  background:url(/assets/img/logo-horizontal-ondark.svg) no-repeat center/contain;

  /* 🔴 СТЕКЛЯННАЯ ПОДЛОЖКА, А НЕ ТЕНЬ. Раньше знак держался на drop-shadow, и
     на светлом кузове или на снятой в упор белой машине он всё равно таял:
     тень даёт контур, но не фон. Плашка снимает зависимость от того, что
     под ней, — знак одинаково читается и на чёрном асфальте, и на белом боку.

     Подложка кладётся тем же псевдоэлементом: знак вписан по contain внутрь
     content-box, а padding расширяет плашку наружу — поэтому сам знак не
     уменьшился, вокруг него просто появился воздух.

     backdrop-filter — украшение, а не основа: где он не поддерживается или
     отключён ради экономии батареи, остаётся полупрозрачная заливка, и
     читаемость от этого не страдает. */
  box-sizing:content-box;
  padding:1.1% 1.8%;
  background-origin:content-box;
  background-color:rgba(10,10,12,.46);
  -webkit-backdrop-filter:blur(6px) saturate(.85);
  backdrop-filter:blur(6px) saturate(.85);
  border:1px solid rgba(255,255,255,.09);
  border-radius:5px;
  /* Мягкая тень остаётся — отделяет плашку от кадра, но больше не тащит
     на себе всю читаемость. */
  box-shadow:0 2px 10px rgba(0,0,0,.34);
  opacity:.96;
}
/* Высота — через пропорцию самого знака (1630×600 ≈ 2.717:1), а не
   подбором процентов: у лота кадр не 4:3, и подобранная высота там дала бы
   пустое поле вокруг логотипа вместо плотной посадки.
   ⚠️ Пропорцию держать в согласии с viewBox файла: до 30.08.2026 здесь
   стоял старый знак 1800×600 (3:1) — при смене на новый соотношение
   пришлось поправить, иначе знак растягивало. */
/* 🔴 УГОЛ — ЛЕВЫЙ ВЕРХНИЙ, И ЭТО НЕ ВКУСОВЩИНА. Справа внизу площадки ставят
   своё: у Encar там подпись, и наш знак с ней сливался в кашу (владелец,
   31.08.2026). Слева сверху пусто у всех источников. Бейдж «В лизинге» стоит
   справа сверху, полоски кадров — тонкой строкой по верху, поэтому знак
   опускаем на 7%: под полоски, но выше середины кадра. */
/* Карточка в сетке: знак крупный, как у офиса (около трети ширины кадра). */
.cat-card a.ph::after{left:5.5%;top:7%;width:32%;aspect-ratio:1630/600}
/* Главное фото лота: тот же угол, доля меньше — кадр крупный, и знак
   в треть ширины перекрывал бы машину. */
.lot-main::after{left:2.5%;top:4%;width:19%;aspect-ratio:1630/600}

/* В табличном виде знака нет по построению: там кадр 78×56 и голый <img>
   без .cat-card — селектор выше до него не достаёт. Правило не нужно. */

@media(max-width:600px){
  /* На телефоне карточка узкая — знак чуть крупнее, иначе нечитаем. */
  .cat-card a.ph::after{width:38%}
}


/* Полоски-сегменты сверху: видно, сколько кадров и какой сейчас. На мыши
   проявляются при наведении, на тач-устройствах видны всегда (правило
   @media(hover:none) ниже по файлу). */
.ph-bars{position:absolute;top:6px;left:6px;right:6px;z-index:3;display:flex;gap:3px;
  opacity:0;transition:opacity .15s}
.cat-card:hover .ph-bars{opacity:1}
.ph-bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.ph-bars i.on{background:var(--gold)}

/* Невидимые зоны наведения: делят кадр на равные доли по числу сегментов. */
.ph-zones{position:absolute;inset:0;z-index:2;display:flex}
.ph-zones span{flex:1}

/* «+N фото» — на последнем сегменте, поверх кадра. */
.ph-more{position:absolute;inset:0;z-index:2;display:none;align-items:center;
  justify-content:center;background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--font-display);font-size:15px;letter-spacing:.04em}
.ph-more.on{display:flex}

/* Перебор кадров пальцем не работает — на тач-устройствах показываем
   полоски всегда, чтобы было видно: снимков больше одного. */
@media(hover:none){
  .ph-bars{opacity:1}
}
.cat-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.cat-card__title{font-family:var(--font-display);font-size:17px;letter-spacing:.02em;color:var(--text-1);
  text-transform:uppercase;line-height:1.25}
.cat-card__badge{font-size:var(--text-xs);color:var(--text-3);min-height:15px}
.cat-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--text-xs);color:var(--text-2);margin-top:2px}
.cat-card__price{margin-top:auto;padding-top:10px;font-family:var(--font-display);font-size:19px;color:var(--gold-text)}
.cat-card__price small{font-size:12px;color:var(--text-3);font-family:var(--font-body)}
.cat-card__price.gone{color:var(--text-3);text-decoration:line-through}
.cat-sold{display:inline-block;background:var(--gold-a15);color:var(--gold-text);
  font-size:var(--label-sm);letter-spacing:.08em;padding:2px 8px;border-radius:2px}
/* Плашка «в лизинге»: мигает нарастающим свечением, чтобы бросалась в
   глаза — такую машину нельзя просто купить, нужен отдельный разбор. */
.lease-badge{display:inline-flex;align-items:center;gap:6px;background:#F2C230;color:#17130a;
  font-family:var(--font-display);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;padding:6px 10px;border-radius:3px;white-space:nowrap;
  animation:leaseGlow 1.9s ease-in-out infinite}
.lease-badge--corner{position:absolute;top:10px;right:10px;z-index:2}
@keyframes leaseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(242,194,48,.0),0 2px 12px rgba(0,0,0,.45);filter:brightness(1)}
  50%{box-shadow:0 0 18px 4px rgba(242,194,48,.75),0 2px 12px rgba(0,0,0,.45);filter:brightness(1.12)}
}
.lease-note{color:var(--text-3);font-size:13px;line-height:1.5}
/* Кнопка на карточке — та же основная кнопка сайта. Отдельного стиля
   больше нет: раньше карточки выглядели дороже остальных страниц. */
.cat-cta{color:var(--on-accent);border-color:transparent;
  background:linear-gradient(180deg,var(--gold-hover),var(--gold) 52%,var(--gold-press));
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 -2px 0 rgba(0,0,0,.22) inset,
    0 8px 18px -10px rgba(200,162,74,.85)}
.cat-card:hover .cat-cta::before{transform:translateX(130%)}

.grade{display:inline-block;background:var(--gold-a15);color:var(--gold-text);
  font-family:var(--font-display);font-size:12px;letter-spacing:.04em;padding:2px 8px;border-radius:3px}
.cat-auc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.cat-auc__at{font-size:var(--text-xs);color:var(--text-2)}

/* ══ ВИТРИНА НА ГЛАВНОЙ ══ */
/* Лента шагов: шесть коротких подписей вместо шести карточек — подробности
   живут на отдельной странице, здесь только маршрут одним взглядом. */
.steps-row{list-style:none;margin:40px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  background:var(--line-1);border:1px solid var(--line-1);border-radius:var(--radius-2);overflow:hidden}
.steps-row li{background:var(--surface-page);padding:20px 18px;display:flex;flex-direction:column;
  gap:8px;font-size:var(--text-sm);color:var(--text-2)}
.steps-row span{font-family:var(--font-display);font-size:22px;color:var(--gold-text);line-height:1}

/* Подборки: готовые срезы каталога — самый частый первый вопрос клиента. */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:18px}
.pick{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;min-height:104px;padding:16px 18px;border-radius:12px;text-decoration:none;
  border:1px solid rgba(243,241,234,.10);
  background:linear-gradient(160deg,rgba(243,241,234,.07),rgba(243,241,234,.02));
  /* backdrop-filter снят: под плитками тот же ровный фон, см. .cat-card */
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,background .22s}
.pick:hover{transform:translateY(-3px);border-color:var(--gold-a30);
  background:linear-gradient(160deg,rgba(243,241,234,.11),rgba(243,241,234,.035))}
.pick__t{font-family:var(--font-display);font-size:17px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--text-1);line-height:1.2}
.pick__n{font-size:var(--text-xs);color:var(--gold-text);font-variant-numeric:tabular-nums}
:root[data-theme="light"] .pick{border-color:rgba(13,13,16,.10);
  background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.6))}

/* ══ МОБИЛЬНАЯ ШАПКА: бургер слева, логотип по центру ══ */
@media (max-width:1080px){
  /* Три колонки вместо ряда: только так логотип встаёт ровно по середине
     экрана, а не по остатку места между кнопками. */
  header > .container{display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;column-gap:12px}
  header > .container > a:first-of-type{order:2;justify-self:center}
  .burger{order:1;justify-self:start}
  header > .container > div:last-of-type{order:3;justify-self:end}
  /* Меню раскрывается поверх страницы, в сетке места не занимает. */
  .mainnav{order:4}
  /* Переключатель темы и соцсети уезжают из шапки: тема — в меню,
     на узком экране в ряд они не помещаются. */
  header .socials,header > .container > div:last-of-type > .theme{display:none}
}
/* На широком экране блок темы в меню не нужен — он есть в шапке. */
.mainnav__theme{display:none}
@media (max-width:1080px){
  .mainnav__theme{display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:18px 0 4px;margin-top:6px;border-top:1px solid var(--line-1)}
  .mainnav__theme-cap{font-size:var(--label-md);letter-spacing:.04em;
    text-transform:uppercase;font-weight:600;color:var(--text-2)}
}

/* ══ ПОДСКАЗКА ПРО ТЕМЫ ПРИ ПЕРВОМ ЗАХОДЕ ══ */
/* Показывается один раз: подсвечиваем переключатель и объясняем, что он есть.
   Дальше выбор запоминается, и напоминать незачем. */
.theme-hint{position:fixed;z-index:9999;max-width:290px;padding:14px 16px;
  border-radius:12px;background:var(--surface-elevated);border:1px solid var(--gold-a30);
  box-shadow:0 18px 44px rgba(0,0,0,.5);font-size:var(--text-sm);color:var(--text-2);
  line-height:1.55;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.theme-hint.on{opacity:1;transform:translateY(0)}
.theme-hint b{display:block;color:var(--text-1);font-size:var(--text-md);margin-bottom:6px}
.theme-hint__x{display:block;margin:14px 0 0 auto;background:var(--gold);color:var(--on-accent);border:0;
  border-radius:6px;padding:8px 16px;font-family:var(--font-display);font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.theme-hint::before{content:"";position:absolute;top:-7px;left:26px;width:12px;height:12px;
  background:var(--surface-elevated);border-left:1px solid var(--gold-a30);
  border-top:1px solid var(--gold-a30);transform:rotate(45deg)}
/* Подсветка самого переключателя, пока подсказка на экране. */
.theme-spot{position:relative;z-index:9998;border-radius:10px;
  box-shadow:0 0 0 3px var(--gold-a30),0 0 24px 6px rgba(200,162,74,.35);
  animation:themeSpot 1.8s ease-in-out infinite}
@keyframes themeSpot{
  0%,100%{box-shadow:0 0 0 3px var(--gold-a30),0 0 20px 4px rgba(200,162,74,.28)}
  50%{box-shadow:0 0 0 4px var(--gold-a30),0 0 32px 10px rgba(200,162,74,.5)}
}
@media (prefers-reduced-motion:reduce){.theme-spot{animation:none}}

/* Подвал: Япония с двумя каталогами — подпись и вложенные ссылки. */
.foot-group{display:flex;flex-direction:column;gap:10px;color:var(--text-3)}
.foot-group a{margin-left:14px}

/* Флаг страны в заголовке карточки: на главной рядом стоят машины из
   разных стран, и без метки непонятно, откуда какая. */
.cat-flag{margin-right:7px;font-size:15px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ══ ВИТРИНА НА ГЛАВНОЙ: блок на страну ══ */
/* ── Каркас витрины, пока грузятся карточки ───────────────────────────
   🔴 ЗАЧЕМ. До 31.08.2026 на месте блоков была пустота, пока не ответят
   сначала /api/catalog/countries, а следом подборка по стране. Владелец
   описал это точно: «можно понять, что просто ничего не происходит».
   Пустое место читается как сломанный сайт, серая рамка — как «сейчас
   будет». Рамки ставятся до первого запроса и живут не дольше 30 секунд.

   Размеры повторяют настоящую карточку (кадр 4:3, три строки текста),
   чтобы при подмене ничего не прыгало. */
.sc-block--load .sc-links{min-height:1em}
.sk-card{border-radius:14px;border:1px solid var(--line-1);overflow:hidden;
  background:var(--surface-raised)}
.sk-ph{aspect-ratio:4/3;background:var(--surface-card)}
.sk-line{height:11px;margin:11px 14px 0;border-radius:6px;background:var(--surface-card)}
.sk-line--t{width:70%}
.sk-line--s{width:45%;height:9px}
.sk-line--p{width:56%;height:13px;margin-bottom:16px}
/* Блик пробегает по каркасу — это и есть признак, что идёт работа. */
.sk-ph,.sk-line{position:relative;overflow:hidden}
.sk-ph::after,.sk-line::after{content:"";position:absolute;inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(243,241,234,.09),transparent);
  animation:sk-blik 1.25s ease-in-out infinite}
@keyframes sk-blik{100%{transform:translateX(100%)}}
/* Кому анимация мешает — просто ровные рамки, без бега. */
@media(prefers-reduced-motion:reduce){
  .sk-ph::after,.sk-line::after{animation:none}
}

.sc-block{margin-top:38px}
.sc-block:first-child{margin-top:0}
.sc-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line-1);margin-bottom:22px}
.sc-title{font-family:var(--font-display);font-size:21px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--text-1)}
.sc-links{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.sc-soon{font-size:var(--text-xs);color:var(--text-3);letter-spacing:.04em;
  text-transform:uppercase}
.sc-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}


/* ── ШТАМП «ПРОДАН» НА КАРТОЧКЕ ─────────────────────────────────────────
   🔴 Разметка выводила <span class="stamp"> с картинкой, а правил для него
   в стилях НЕ БЫЛО ВООБЩЕ — снимок вставал в поток в натуральную величину
   и налезал на соседние блоки. Тот же случай, что был с .ha-btn--secondary
   и с лентой фотографий: класс в разметке есть, стилей нет.
   Штамп живёт ВНУТРИ рамки снимка и её не покидает: слой у него ниже, чем
   у шапки сайта, поэтому поверх открытого меню он больше не выходит. */
.cat-card a.ph .stamp{position:absolute;inset:0;z-index:2;display:flex;
  align-items:center;justify-content:center;pointer-events:none}
.cat-card a.ph .stamp img{width:min(66%,240px);height:auto;opacity:.92;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}


/* ── ОКНО «ХОЧУ ЭТО АВТО» ───────────────────────────────────────────────
   Открывается по кнопке на карточке в каталоге и на главной. Блокирующее:
   фон не прокручивается, пока окно открыто.
   Слой выше шапки (у неё 100) — окно должно перекрывать и меню тоже. */
.ga-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;
  justify-content:center;padding:20px;opacity:0;transition:opacity .2s ease}
.ga-modal.on{opacity:1}
.ga-modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px)}
.ga-modal__box{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;
  background:var(--surface-raised);border:1px solid var(--line-1);border-radius:16px;
  padding:26px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(8px);transition:transform .2s ease}
.ga-modal.on .ga-modal__box{transform:none}
.ga-modal__x{position:absolute;top:10px;right:12px;background:none;border:0;
  color:var(--text-3);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.ga-modal__x:hover{color:var(--text-1)}
.ga-modal__title{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text)}
.ga-modal__car{font-size:var(--display-sm,22px);font-weight:700;margin-top:6px;line-height:1.2}
.ga-modal__sub{color:var(--text-2);margin-top:4px;font-size:var(--text-sm)}
.ga-modal__price{margin-top:8px;font-weight:600}
.ga-modal__note{color:var(--text-2);font-size:var(--text-sm);margin:14px 0 16px;line-height:1.5}
.ga-modal__tg{width:100%;justify-content:center}
.ga-modal__or{text-align:center;color:var(--text-3);font-size:var(--text-xs);margin:14px 0 10px}
.ga-modal__form{display:flex;flex-direction:column;gap:10px}
.ga-modal__form input[name=company]{position:absolute;left:-9999px;width:1px;height:1px}
.ga-modal__form input[type=tel],.ga-modal__form input[name=name]{
  padding:12px 14px;border-radius:10px;border:1px solid var(--line-1);
  background:var(--surface);color:var(--text-1);font:inherit}
.ga-modal__ok{display:flex;gap:9px;align-items:flex-start;font-size:var(--text-xs);
  color:var(--text-2);line-height:1.45}
.ga-modal__ok input{margin-top:2px;flex:0 0 auto}
.ga-modal__status{margin:2px 0 0;font-size:var(--text-sm);color:var(--text-2);min-height:1em}
.ga-modal__done{margin:0;font-size:var(--text-sm);line-height:1.5}
@media (max-width:520px){
  .ga-modal{padding:12px}
  .ga-modal__box{padding:22px 18px 18px}
}

/* ══ ФОН ГЕРОЯ: НАША СТОЯНКА ══
   🔴 ДВА КАДРА, ПО ОДНОМУ НА ТЕМУ (владелец, 02.09.2026).
   Сначала блок был залит графитом всегда, чтобы светлый текст читался по
   тёмному снимку. На СВЕТЛОЙ теме это превращало шапку в чёрный остров
   посреди светлой страницы — остальная страница уже вставала правильно, а
   первый экран выбивался. Осветлять сумеречный кадр обработкой нельзя:
   получается грязь. Поэтому нарисован ВТОРОЙ кадр той же сцены при дневном
   свете, и вместе с ним меняются затемнение, цвет текста и версия знака.

   🔴 КАРТИНКА ЧЕРЕЗ CSS, А НЕ <picture>. Медиазапрос `prefers-color-scheme`
   не видит атрибута data-theme, то есть ручной переключатель темы кадр бы
   не поменял. Фон в CSS отзывается на все три состояния: явную тёмную,
   явную светлую и системную. */
.herowrap--photo{isolation:isolate;background:#0D0D10}
.herobg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center 62%;background-size:cover;
  background-image:url("/assets/img/hero-lot.jpg");
  background-image:image-set(url("/assets/img/hero-lot.webp") type("image/webp"),
                             url("/assets/img/hero-lot.jpg")  type("image/jpeg"))}
.herobg__scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,16,.74) 0%,rgba(13,13,16,.58) 42%,rgba(13,13,16,.86) 100%)}
.herowrap--photo>header,.herowrap--photo>.hero{position:relative;z-index:2}

/* Текст над кадром — только он, не всё поддерево: внутри лежат форма
   заявки на своей карточке и мобильное меню на своей панели. */
.herowrap--photo .hero>div:first-child,
.herowrap--photo .hero>div:first-child h1,
.herowrap--photo .ha-kicker{color:#F2EFE9}
.herowrap--photo .hero>div:first-child p,
.herowrap--photo .ha-trust__text{color:#CFCCC5}
.herowrap--photo .ha-card{color:var(--text-1)}
.herowrap--photo .ha-card h3,.herowrap--photo .ha-card .ha-card__title{color:var(--text-1)}
.herowrap--photo .ha-card p,.herowrap--photo .ha-card label,
.herowrap--photo .ha-card .ha-card__body{color:var(--text-2)}
.herowrap--photo>header{border-bottom-color:rgba(242,239,233,.16)}
@media(min-width:1081px){
  .herowrap--photo .mainnav>a,
  .herowrap--photo .mainnav__trigger{color:#F2EFE9}
}
/* Дорожная сетка рисовалась для пустого фона — поверх кадра только сор. */
.herowrap--photo>.road-svg{display:none}

/* ── СВЕТЛАЯ ТЕМА: дневной кадр, светлая вуаль, тёмный текст ──
   Знак и меню НЕ трогаем: по светлому кадру работает обычная тема сайта. */
:root[data-theme="light"] .herowrap--photo{background:var(--surface-page)}
:root[data-theme="light"] .herobg{
  background-image:url("/assets/img/hero-lot-day.jpg");
  background-image:image-set(url("/assets/img/hero-lot-day.webp") type("image/webp"),
                             url("/assets/img/hero-lot-day.jpg")  type("image/jpeg"))}
:root[data-theme="light"] .herobg__scrim{
  background:linear-gradient(180deg,rgba(247,245,240,.72) 0%,rgba(247,245,240,.52) 42%,rgba(247,245,240,.88) 100%)}
:root[data-theme="light"] .herowrap--photo .hero>div:first-child,
:root[data-theme="light"] .herowrap--photo .hero>div:first-child h1,
:root[data-theme="light"] .herowrap--photo .ha-kicker{color:var(--text-1)}
:root[data-theme="light"] .herowrap--photo .hero>div:first-child p,
:root[data-theme="light"] .herowrap--photo .ha-trust__text{color:var(--text-2)}
:root[data-theme="light"] .herowrap--photo>header{border-bottom-color:var(--line-1)}
:root[data-theme="light"] .herowrap--photo .mainnav>a,
:root[data-theme="light"] .herowrap--photo .mainnav__trigger{color:var(--text-2)}

/* То же для СИСТЕМНОЙ светлой темы, когда атрибут не проставлен. */
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .herowrap--photo{background:var(--surface-page)}
  :root:not([data-theme]) .herobg{
    background-image:url("/assets/img/hero-lot-day.jpg");
    background-image:image-set(url("/assets/img/hero-lot-day.webp") type("image/webp"),
                               url("/assets/img/hero-lot-day.jpg")  type("image/jpeg"))}
  :root:not([data-theme]) .herobg__scrim{
    background:linear-gradient(180deg,rgba(247,245,240,.72) 0%,rgba(247,245,240,.52) 42%,rgba(247,245,240,.88) 100%)}
  :root:not([data-theme]) .herowrap--photo .hero>div:first-child,
  :root:not([data-theme]) .herowrap--photo .hero>div:first-child h1,
  :root:not([data-theme]) .herowrap--photo .ha-kicker{color:var(--text-1)}
  :root:not([data-theme]) .herowrap--photo .hero>div:first-child p,
  :root:not([data-theme]) .herowrap--photo .ha-trust__text{color:var(--text-2)}
  :root:not([data-theme]) .herowrap--photo>header{border-bottom-color:var(--line-1)}
  :root:not([data-theme]) .herowrap--photo .mainnav>a,
  :root:not([data-theme]) .herowrap--photo .mainnav__trigger{color:var(--text-2)}
}

/* Хвост подзаголовка — только на широком экране. */
@media(max-width:700px){
  .hero-more{display:none}
  /* Кадр ограничен по высоте: обёртка на телефоне вчетверо выше снимка,
     и растянутый cover показывал вертикальную полосу неба и асфальта. */
  .herobg{height:660px;bottom:auto;background-position:center 58%;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
  .herobg{background-image:url("/assets/img/hero-lot-mobile.jpg");
    background-image:image-set(url("/assets/img/hero-lot-mobile.webp") type("image/webp"),
                               url("/assets/img/hero-lot-mobile.jpg")  type("image/jpeg"))}
  :root[data-theme="light"] .herobg{
    background-image:url("/assets/img/hero-lot-day-mobile.jpg");
    background-image:image-set(url("/assets/img/hero-lot-day-mobile.webp") type("image/webp"),
                               url("/assets/img/hero-lot-day-mobile.jpg")  type("image/jpeg"))}
  .herobg__scrim{background:linear-gradient(180deg,rgba(13,13,16,.62) 0%,rgba(13,13,16,.50) 26%,rgba(13,13,16,.90) 52%,#0D0D10 66%)}
  :root[data-theme="light"] .herobg__scrim{
    background:linear-gradient(180deg,rgba(247,245,240,.60) 0%,rgba(247,245,240,.44) 26%,rgba(247,245,240,.92) 52%,var(--surface-page) 66%)}
}
@media (prefers-color-scheme: light){
  @media(max-width:700px){
    :root:not([data-theme]) .herobg{
      background-image:url("/assets/img/hero-lot-day-mobile.jpg");
      background-image:image-set(url("/assets/img/hero-lot-day-mobile.webp") type("image/webp"),
                                 url("/assets/img/hero-lot-day-mobile.jpg")  type("image/jpeg"))}
    :root:not([data-theme]) .herobg__scrim{
      background:linear-gradient(180deg,rgba(247,245,240,.60) 0%,rgba(247,245,240,.44) 26%,rgba(247,245,240,.92) 52%,var(--surface-page) 66%)}
  }
}

/* Потолок цены рядом с названием страны: подпись, а не второй заголовок. */
.sc-cap{display:block;margin-top:6px;font-family:var(--font-body);font-size:13px;
  font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--gold-text)}

/* Промо-полоса «горящие лоты»: текст слева, действие справа. */
.ha-promo{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;padding:36px 40px;border:1px solid var(--gold-a30);
  border-radius:var(--radius-2);background:var(--gold-a08)}
@media(max-width:700px){.ha-promo{padding:28px 22px;gap:22px}}

/* ══ ОТЗЫВЫ С ПЛОЩАДОК ══ (раздел скрыт, пока нет настоящих записей) */
.otz-tabs{display:flex;flex-wrap:wrap;gap:10px}
.otz-tab{padding:9px 16px;border:1px solid var(--line-1);border-radius:var(--radius-1);
  background:none;color:var(--text-2);font-family:var(--font-body);font-size:14px;
  font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.otz-tab:hover{border-color:var(--line-2);color:var(--text-1)}
.otz-tab[aria-selected="true"]{border-color:var(--gold-text);color:var(--gold-text);background:var(--gold-a08)}
.otz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.otz-card{display:flex;flex-direction:column;gap:12px;padding:24px;
  border:1px solid var(--line-1);border-radius:var(--radius-2);background:var(--surface-raised)}
.otz-card__head{font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-text)}
.otz-card__text{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.otz-card__link{margin-top:auto;font-size:13px;color:var(--gold-text);text-decoration:none}
.otz-card__link:hover{text-decoration:underline}

/* ══ ПЛАШКИ СОСТОЯНИЯ ══
   🔴 СТОЯТ НА ФОТО, В ПРАВОМ ВЕРХНЕМ УГЛУ (владелец, 02.09.2026).
   Раньше лежали в теле карточки под характеристиками — владелец указал, что
   должны быть на снимке, как на сильных площадках. Левый верх занят нашим
   знаком, поэтому правый. z-index выше ленты кадров, но ниже штампа «продан».
   Цвет несёт смысл: зелёная — хорошо, золотая — насторожись, красная — плохо. */
.chips{position:absolute;top:10px;right:10px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:60%}
/* 🔴 БЕЗ backdrop-filter. Он был здесь ради «стекла», но пересчитывает
   всё, что под ним, на каждом кадре прокрутки — и это дороже обычного
   размытия. На странице до двух десятков плашек; вместе с бывшей размытой
   подложкой кадров они и роняли плавность (владелец, 02.09.2026).
   Непрозрачная заливка выглядит так же уверенно и стоит ноль. */
.chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.28);background:rgba(13,13,16,.88);color:#F2EFE9;
  box-shadow:0 2px 8px rgba(13,13,16,.35)}
.chip--ok{border-color:rgba(120,220,160,.55);background:rgba(24,86,50,.94);color:#CFF3DC}
.chip--warn{border-color:rgba(230,196,120,.55);background:rgba(112,82,18,.94);color:#F6E3B4}
.chip--bad{border-color:rgba(240,150,150,.55);background:rgba(116,30,30,.94);color:#FBD8D8}

/* ══ ГРАНИЦЫ РАЗДЕЛОВ В КАРТОЧКЕ ══
   Владелец 02.09.2026: разделы карточки должны быть ЧЁТКО отделены, а не
   угадываться по отступам. Линия — по тому же токену, что и остальные
   границы сайта, поэтому работает в обеих темах. */
.cat-sep{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-1)}
.cat-card__meta{padding-bottom:2px}
.cat-card .cat-cta{margin-top:14px}