/* ZMA · U5 MAIN — premium automotive + real calculation.
   Отдельный файл: подстраницы живут на style.css и не затрагиваются.
   Mobile-first, источник истины 390 px. */

:root{
  --nero:#0b0d11;
  --nero-2:#13171d;
  --nero-3:#1c212a;
  --line-d:#262c36;
  --paper:#ffffff;
  --paper-2:#f4f4f6;
  --paper-3:#eaebee;
  --line:#e0e2e7;
  --line-2:#c9ccd3;
  --ink:#10131a;
  --ink-2:#3b414d;
  --ink-3:#5f6673;      /* 5,2:1 на белом */
  --on-dark:#f3f4f6;
  --on-dark-2:#a6adba;  /* 7,4:1 на --nero */
  --amber:#e8871e;      /* заливка; текст поверх только тёмный */
  --amber-hi:#f5a44a;   /* оранжевый текст на тёмном — 8,1:1 */
  --amber-ink:#a2570b;  /* оранжевый текст на светлом — 5,3:1 */
  --r:4px;
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ── типографика ── */
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-ink);
}
.on-dark .eyebrow{color:var(--amber-hi)}
.h1{font-size:31px;line-height:1.1;font-weight:800;letter-spacing:-.025em}
.h2{font-size:25px;line-height:1.15;font-weight:800;letter-spacing:-.025em}
.h2 em{font-style:normal;color:var(--amber-ink)}
.on-dark .h2 em{color:var(--amber-hi)}
.lead{margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.on-dark .lead{color:var(--on-dark-2)}
.small{font-size:13px;line-height:1.5;color:var(--ink-3)}
.on-dark .small{color:var(--on-dark-2)}
.sum{font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.03em}

/* ── кнопки ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 26px;border:0;border-radius:var(--r);
  background:var(--amber);color:var(--ink);font-weight:700;font-size:16px;
  cursor:pointer;text-align:center;width:100%;transition:background .15s;
}
.btn:hover,.btn:focus-visible{background:#d97a15}
.btn--line{
  background:transparent;color:var(--ink);border:1.5px solid var(--line-2);font-weight:600;
}
.on-dark .btn--line{color:var(--on-dark);border-color:#39414e}
.btn--line:hover{background:var(--paper-2)}
.on-dark .btn--line:hover{background:var(--nero-3)}
.btn--sm{min-height:44px;padding:11px 18px;font-size:14px;width:auto}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ── шапка ── */
.hdr{background:var(--nero);border-bottom:1px solid var(--line-d)}
.hdr__in{display:flex;align-items:center;gap:14px;min-height:64px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--on-dark)}
.logo span{
  display:block;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-2);margin-top:2px;
}
.hdr__sp{flex:1}
.hdr__tel{
  display:none;align-items:center;min-height:44px;padding:0 8px;
  font-weight:700;font-size:15px;color:var(--on-dark);text-decoration:none;white-space:nowrap;
}

/* ═════ B1 HERO ═════ */
.hero{
  position:relative;background:var(--nero);color:var(--on-dark);
  padding:34px 0 0;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 88% 8%, rgba(232,135,30,.16) 0%, rgba(232,135,30,0) 58%);
  pointer-events:none;
}
.hero__in{position:relative}
.hero .h1{color:#fff;margin-top:14px}
.hero .h1 em{font-style:normal;color:var(--amber-hi)}
.hero__cta{display:grid;gap:10px;margin-top:26px}

/* автомобиль — главный визуальный якорь */
.hero__car{
  position:relative;margin:30px -20px 0;
}
.hero__car img{
  width:100%;aspect-ratio:16/11;object-fit:cover;object-position:52% 62%;
}
.hero__car::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,13,17,.55) 0%, rgba(11,13,17,0) 34%, rgba(11,13,17,.85) 100%);
}

/* карточка реального расчёта, перекрывает кадр */
.qcard{
  position:relative;z-index:2;margin:-84px 0 0;
  background:rgba(19,23,29,.93);backdrop-filter:blur(10px);
  border:1px solid var(--line-d);border-radius:var(--r);
  padding:18px;
}
.qcard__tag{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-hi);
}
.qcard__car{margin-top:6px;font-size:16px;font-weight:700;color:#fff}
.qrow{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line-d);font-size:13.5px;
}
.qrow span{color:var(--on-dark-2)}
.qrow b{margin-left:auto;font-weight:700;font-size:16px;color:#fff}
.qrow--tot{border-bottom:0;padding-bottom:2px}
.qrow--tot span{color:#fff;font-weight:700}
.qrow--tot b{font-size:23px;color:var(--amber-hi)}
.qcard__note{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--on-dark-2)}

/* ═════ B2 MONEY JUMP ═════ */
.jump{background:var(--nero-2);color:var(--on-dark);padding:52px 0}
.jump .h2{color:#fff}
.money{margin-top:34px}
.money__s{position:relative;padding-left:26px}
.money__s + .money__s{margin-top:26px}
.money__s::before{
  content:"";position:absolute;left:6px;top:8px;bottom:-26px;width:2px;background:var(--line-d);
}
.money__s:last-child::before{display:none}
.money__s::after{
  content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;
  background:var(--nero-2);border:2px solid var(--line-d);
}
.money__s--end::after{background:var(--amber);border-color:var(--amber)}
.money__v{
  display:block;font-size:34px;line-height:1;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff;
}
.money__s--add .money__v{color:var(--amber-hi);font-size:29px}
.money__s--end .money__v{font-size:46px}
.money__k{display:block;margin-top:9px;font-size:13.5px;color:var(--on-dark-2);line-height:1.45}
.jump__diff{
  margin-top:30px;padding:18px;border-left:2px solid var(--amber);
  background:var(--nero-3);border-radius:0 var(--r) var(--r) 0;
  font-size:14.5px;line-height:1.55;color:var(--on-dark);
}
.jump__diff b{color:#fff}

/* ═════ B3 ТРИ ШАГА ═════ */
.steps{background:var(--paper);padding:52px 0}
.step{position:relative;padding:0 0 0 52px}
.step + .step{margin-top:34px}
.step::before{
  content:attr(data-n);position:absolute;left:0;top:-4px;
  font-size:15px;font-weight:800;color:var(--amber-ink);letter-spacing:.04em;
}
.step::after{
  content:"";position:absolute;left:11px;top:22px;bottom:-34px;width:1px;background:var(--line);
}
.step:last-child::after{display:none}
.step h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.step p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.step--w2{max-width:34em}
.step--w3{max-width:30em}
.steps__cta{margin-top:36px;max-width:380px}

/* ═════ B4 ГОРОДА ═════ */
.basis{background:var(--paper-2);padding:52px 0}
.cities{display:grid;gap:14px;margin-top:28px}
.city{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
}
.city__m{font-size:14px;font-weight:700;color:var(--ink-2)}
.city__s{
  display:block;margin-top:10px;font-size:27px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.city__c{
  display:block;margin-top:8px;font-size:15px;font-weight:700;color:var(--amber-ink);
}
.city--lead{background:var(--nero);border-color:var(--nero);color:#fff}
.city--lead .city__m{color:var(--on-dark-2)}
.city--lead .city__s{color:#fff;font-size:33px}
.city--lead .city__c{color:var(--amber-hi)}
.city--lead .city__note{
  display:block;margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--on-dark-2);
}
.basis__end{margin-top:24px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.basis__end b{color:var(--ink)}

/* ═════ B5 / B8 ФОРМЫ ═════ */
.conv{background:var(--paper);padding:56px 0}
.conv--dark{background:var(--nero);color:var(--on-dark)}
.conv--dark .h2{color:#fff}
.form{
  margin-top:28px;max-width:560px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
}
.conv--dark .form{background:var(--nero-2);border-color:var(--line-d)}
.f{margin-bottom:16px}
.f label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.conv--dark .f label{color:var(--on-dark)}
.f .opt{font-weight:400;color:var(--ink-3)}
.conv--dark .f .opt{color:var(--on-dark-2)}
.f input{
  width:100%;min-height:56px;padding:15px 16px;font-size:16px;font-family:inherit;
  color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r);
}
.conv--dark .f input{background:var(--nero-3);border-color:#39414e;color:#fff}
.f input::placeholder{color:#9aa1ad}
.conv--dark .f input::placeholder{color:#6d7684}
.f input:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,135,30,.2)}

/* раскрытие поля чужой цены */
.have__t{
  display:flex;align-items:center;gap:10px;width:100%;min-height:48px;
  padding:12px 14px;margin-bottom:16px;
  background:var(--paper-2);border:1.5px dashed var(--line-2);border-radius:var(--r);
  font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;
}
.conv--dark .have__t{background:var(--nero-3);border-color:#39414e;color:var(--on-dark)}
.have__t::before{content:"+";font-size:18px;font-weight:800;color:var(--amber-ink);line-height:1}
.conv--dark .have__t::before{color:var(--amber-hi)}
.have__t[aria-expanded="true"]::before{content:"−"}
.have__t[aria-expanded="true"]{border-style:solid}
.have__b[hidden]{display:none}

.consent{
  display:flex;gap:12px;align-items:center;min-height:44px;padding:4px 0;
  margin:2px 0 16px;font-size:12.5px;line-height:1.45;color:var(--ink-3);cursor:pointer;
}
.conv--dark .consent{color:var(--on-dark-2)}
.consent input[type="checkbox"]{flex:none;width:20px;height:20px;margin:0;accent-color:var(--amber);cursor:pointer}
.consent a{color:var(--amber-ink)}
.conv--dark .consent a{color:var(--amber-hi)}
.micro{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.conv--dark .micro{color:var(--on-dark-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ═════ B6 ОТЗЫВ ═════ */
.trust{background:var(--paper-2);padding:52px 0}
.trust__grab{margin-top:26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.trust__grab img{
  width:100%;min-width:320px;height:auto;
  border:1px solid var(--line-2);border-radius:var(--r);background:#fff;
}
.facts{display:grid;gap:10px;margin-top:20px}
.fact{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
}
.fact b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.fact span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.trust__cap{margin-top:18px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.trust__sec{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.trust__sec img{
  width:100%;max-width:520px;height:auto;
  border:1px solid var(--line-2);border-radius:var(--r);background:#fff;
}
.trust__sec p{margin-top:12px}

/* ═════ B7 FAQ ═════ */
.faq{background:var(--paper);padding:52px 0}
.faq__l{margin-top:22px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;padding:18px 40px 18px 0;
  min-height:44px;font-weight:700;font-size:16px;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:25px;width:10px;height:10px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:29px}
.faq p{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--ink-2)}

/* ── подвал ── */
.foot{background:var(--nero);color:var(--on-dark-2);padding:34px 0 40px;font-size:13.5px;line-height:1.65}
.foot b{display:block;color:#fff;font-size:14.5px;margin-bottom:8px}
.foot p{margin-top:10px}
.foot a{color:var(--amber-hi)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 560+ ── */
@media (min-width:560px){
  .hero__cta{grid-template-columns:auto auto;justify-content:start}
  .hero__cta .btn{width:auto;min-width:290px}
  .facts{grid-template-columns:repeat(3,1fr)}
  .money__v{font-size:44px}
  .money__s--add .money__v{font-size:36px}
  .money__s--end .money__v{font-size:62px}
}

/* ── 768+ ── */
@media (min-width:768px){
  .hdr__tel{display:flex}
  .h1{font-size:44px}
  .h2{font-size:33px}
  .hero{padding-top:48px}
  .hero__car{margin:38px -20px 0}
  .hero__car img{aspect-ratio:21/9;object-position:52% 58%}
  .qcard{max-width:440px;margin-top:-120px}
  .cities{grid-template-columns:1fr 1fr}
  .city--lead{grid-column:1/-1}
  .steps__cta{margin-top:40px}
  .jump,.steps,.basis,.trust,.faq{padding:72px 0}
  .conv{padding:76px 0}
}

/* ── 1024+ ── */
@media (min-width:1024px){
  .h1{font-size:47px;max-width:15ch}
  .hero{padding:64px 0 0}
  /* асимметрия 45/55: текст слева, автомобиль справа и крупнее */
  .hero__in{display:grid;grid-template-columns:45fr 55fr;gap:52px;align-items:center}
  .hero__cta .btn{min-width:0}
  .hero__txt{padding-bottom:40px}
  .hero__lead{max-width:30em}
  .hero__vis{position:relative;margin:0 -20px 0 0}
  .hero__car{margin:0}
  .hero__car img{aspect-ratio:4/3;object-position:52% 60%}
  .qcard{position:absolute;left:-56px;bottom:-30px;margin:0;width:370px;max-width:none}
  .money{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px}
  /* маркер идёт первым, линия соединяет маркеры по горизонтали */
  .money__s{display:flex;flex-direction:column;padding:0 24px 0 0}
  .money__s + .money__s{margin-top:0}
  .money__s::before{left:22px;top:6px;right:12px;bottom:auto;width:auto;height:2px}
  .money__s::after{position:static;order:-1;margin:0 0 20px}
  .money__s--end .money__v{font-size:72px}
  .cities{grid-template-columns:repeat(3,1fr)}
  .city--lead{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:30px}
  .city--lead .city__s{font-size:46px}
  .trust__in{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}
  .trust__grab{margin-top:0}
  .facts{grid-template-columns:1fr;gap:12px}
  .faq__l{max-width:820px}
}

@media (min-width:1280px){
  .h1{font-size:54px}
}