/* =========================================================
   Пригоним Авто — тёмная подача, жёлтый акцент
   ========================================================= */

:root{
  --bg:      #0b0b0c;
  --bg-2:    #131417;
  --bg-3:    #1b1d21;
  --line:    #262930;
  --line-2:  #33373f;
  --ink:     #f4f5f7;
  --dim:     #9aa1ac;
  --dim-2:   #6b7280;
  --acc:     #f5d90a;
  --acc-d:   #d8bf00;

  --shell: 1280px;
  --gut: clamp(16px, 4vw, 40px);
  --r: 10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Golos Text","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}

/* ---------- Типографика ---------- */
h1,h2,h3{font-family:"Unbounded","Golos Text",sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(30px,5vw,58px)}
h2{font-size:clamp(24px,3.4vw,40px)}
h3{font-size:clamp(17px,1.9vw,20px);font-weight:600;line-height:1.25}
p{margin:0 0 1em}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
}
.eyebrow:before{content:'';width:22px;height:2px;background:var(--acc)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:1px solid transparent;border-radius:var(--r);
  background:var(--acc);color:#111;font-size:15px;font-weight:600;cursor:pointer;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(.92)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);filter:none}
.btn--wide{width:100%}
.btn--lg{padding:17px 32px;font-size:16px}

/* ---------- Шапка ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:22px;height:70px}
.logo{font-family:"Unbounded",sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em}
.logo span{color:var(--acc)}
.top nav{display:flex;gap:24px;margin-left:auto}
.top nav a{color:var(--dim);font-size:14.5px;transition:color .18s}
.top nav a:hover{color:var(--acc)}
.top__phone{font-size:15px;font-weight:600;white-space:nowrap}
.top__cta{padding:10px 18px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);background:none;border-radius:var(--r);cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}

/* ---------- Первый экран ---------- */
.hero{padding:clamp(36px,6vw,74px) 0 0;position:relative;overflow:hidden}
.hero:after{
  content:'';position:absolute;left:-15%;top:-30%;width:70%;height:130%;
  background:radial-gradient(ellipse at center,rgba(245,217,10,.07),transparent 60%);pointer-events:none;
}
.hero__car{
  position:absolute;right:-4%;bottom:-6%;
  width:min(700px,55vw);max-width:700px;height:auto;max-height:min(340px,42vh);
  color:var(--acc);opacity:.14;pointer-events:none;z-index:0;
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start;position:relative;z-index:1}
.hero h1 b{color:var(--acc);font-weight:600}
.hero__lead{color:var(--dim);font-size:clamp(15px,1.4vw,17px);max-width:34em;margin:20px 0 26px}

.routes{display:flex;flex-wrap:wrap;gap:8px}
.route-tab{
  flex:1 1 auto;min-width:112px;padding:12px 16px;border-radius:var(--r);
  background:var(--bg-2);border:1px solid var(--line);color:var(--dim);
  cursor:pointer;text-align:left;transition:.18s;
}
.route-tab b{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;color:var(--dim-2)}
.route-tab span{display:block;font-size:15px;margin-top:2px;font-weight:500}
.route-tab:hover{border-color:var(--line-2);color:var(--ink)}
.route-tab.is-on{background:var(--acc);border-color:var(--acc);color:#111}
.route-tab.is-on b{color:rgba(0,0,0,.55)}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(28px,4vw,50px)}
.fact{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.fact__n{font-family:"Unbounded",sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:600;color:var(--acc)}
.fact__t{color:var(--dim);font-size:13px;margin-top:6px;line-height:1.45}

.invoice{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:26px}
.invoice__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.invoice__head h3{font-size:20px}
.invoice__no{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--dim-2);letter-spacing:.08em}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;border:1px solid var(--line-2);border-radius:var(--r);
  font-family:inherit;font-size:15px;background:var(--bg);color:var(--ink);transition:border-color .18s;
}
.field input::placeholder{color:var(--dim-2)}
.field input:focus,.field select:focus{outline:none;border-color:var(--acc)}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:11.5px;color:var(--dim-2);line-height:1.5}
.consent input{width:15px;height:15px;flex:0 0 15px;margin-top:2px;accent-color:var(--acc)}
.consent a{color:var(--dim);text-decoration:underline}
.invoice__note{font-size:12px;color:var(--dim-2);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- Секции ---------- */
.sec{padding:clamp(46px,7vw,92px) 0}
.sec__head{max-width:740px;margin-bottom:clamp(26px,4vw,46px)}
.sec__head p{color:var(--dim);font-size:16.5px;margin-top:14px}

/* ---------- Маршрут: сетка этапов ---------- */
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stop{
  display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 20px 20px;position:relative;overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.stop:hover{border-color:var(--line-2);transform:translateY(-2px)}
.stop.is-key{border-color:rgba(245,217,10,.4)}
.stop.is-key:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.stop__top{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:30px}
.stop__num{font-family:"Unbounded",sans-serif;font-size:28px;font-weight:600;color:var(--line-2);line-height:1}
.stop.is-key .stop__num{color:var(--acc)}
.stop__flag{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#111;background:var(--acc);padding:3px 8px;border-radius:4px;
}
.stop__t{font-size:16px;font-weight:600;margin-bottom:8px;line-height:1.3}
.stop__d{font-size:13.5px;color:var(--dim);line-height:1.5}
.stop__days{
  margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.stop__days:before{content:'';width:14px;height:1px;background:var(--acc)}
.route__total{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:baseline;margin-top:18px;padding-top:20px;border-top:1px solid var(--line)}
.route__total b{font-family:"Unbounded",sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:600;color:var(--acc)}
.route__total span{color:var(--dim);font-size:14.5px}

/* ---------- Что входит ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cell{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 26px;transition:border-color .18s}
.cell:hover{border-color:var(--line-2)}
.cell__n{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--acc);letter-spacing:.16em;margin-bottom:14px}
.cell h3{margin-bottom:10px}
.cell p{color:var(--dim);font-size:14.5px;margin:0;line-height:1.55}

.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;gap:14px;padding:20px 22px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.check svg{flex:0 0 18px;margin-top:3px;color:var(--acc)}
.check b{display:block;font-weight:600;margin-bottom:4px}
.check span{color:var(--dim);font-size:14px;line-height:1.5}

/* ---------- Калькулятор ---------- */
.calc{display:grid;grid-template-columns:1fr .85fr;gap:12px;align-items:start}
.calc__form,.calc__out{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:26px}
.calc__out{background:var(--bg-3)}
.calc__row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.calc__row span{color:var(--dim)}
.calc__row b{font-family:"JetBrains Mono",monospace;font-weight:500;white-space:nowrap}
.calc__total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--acc)}
.calc__total span{color:var(--dim);font-size:14px}
.calc__total b{font-family:"Unbounded",sans-serif;font-size:clamp(21px,2.4vw,28px);font-weight:600;color:var(--acc)}
.calc__note{font-size:12px;color:var(--dim-2);margin:16px 0 0;line-height:1.5}

/* ---------- Отзывы ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quote{background:#fff;color:#141414;border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column}
.quote p{font-size:15px;line-height:1.6;margin-bottom:16px}
.quote__who{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid #e6e6e6}
.quote__who b{font-weight:600;font-size:14.5px}
.quote__who span{font-family:"JetBrains Mono",monospace;font-size:11px;color:#6b7280;letter-spacing:.06em}

/* ---------- FAQ ---------- */
.faq details{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 52px 20px 22px;position:relative;
  font-size:16.5px;font-weight:500;transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc)}
.faq summary:after{content:'';position:absolute;right:22px;top:26px;width:10px;height:10px;
  border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg);transition:transform .22s}
.faq details[open] summary:after{transform:rotate(225deg);top:29px}
.faq p{color:var(--dim);font-size:15px;max-width:85ch;padding:0 22px 20px;margin:0}

/* ---------- Финальный блок ---------- */
.cta-band{background:var(--acc);color:#111;border-radius:20px;padding:clamp(28px,4vw,50px);margin:0 var(--gut) clamp(46px,7vw,86px)}
.cta-band__in{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(20px,3vw,42px);align-items:center;max-width:var(--shell);margin:0 auto}
.cta-band h2{color:#111}
.cta-band p{color:rgba(0,0,0,.72);margin:14px 0 0}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.cta-band .btn{background:#111;color:var(--acc)}
.cta-band .btn--ghost{background:transparent;border-color:rgba(0,0,0,.32);color:#111}

/* ---------- Подвал ---------- */
.foot{background:#08080a;border-top:1px solid var(--line);padding:clamp(38px,5vw,58px) 0 26px;font-size:14px;color:var(--dim)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:32px}
.foot__grid>div{min-width:0}
.foot h4{font-size:12px;font-weight:600;color:var(--acc);margin:0 0 16px;letter-spacing:.12em;text-transform:uppercase}
.foot a{color:var(--dim);transition:color .18s;overflow-wrap:anywhere}
.foot a:hover{color:var(--acc)}
.foot__links{display:grid;gap:9px}
.legal{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;display:flex;flex-wrap:wrap;gap:14px 32px}
.legal__i{min-width:0}
.legal__i b{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);font-weight:400;margin-bottom:3px}
.legal__i span{color:var(--ink);font-size:13.5px}
.foot__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim-2);line-height:1.6;max-width:920px}

/* ---------- Мессенджеры ---------- */
.msgrs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.msgr{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--line-2);
  border-radius:var(--r);color:var(--ink);font-size:14px;transition:.18s;cursor:pointer;background:var(--bg-2);
}
.msgr:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- Модалки ---------- */
.mdl{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:16px}
.mdl.is-open{display:flex}
.mdl__bg{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.mdl__box{
  position:relative;z-index:1;background:var(--bg-2);border:1px solid var(--line);
  border-radius:18px;width:100%;max-width:540px;max-height:92vh;overflow:auto;
  box-shadow:0 40px 90px rgba(0,0,0,.6);animation:up .24s cubic-bezier(.4,0,.2,1);
}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mdl__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid var(--line-2);background:none;color:var(--dim);font-size:18px;cursor:pointer;border-radius:8px;z-index:2}
.mdl__x:hover{color:var(--ink);border-color:var(--ink)}

.quiz{padding:30px}
.quiz__step{display:none}
.quiz__step.is-on{display:block}
.quiz h3{font-size:clamp(20px,2.3vw,26px);margin-bottom:12px}
.quiz__sub{color:var(--dim);font-size:14.5px;margin-bottom:22px}
.quiz__opts{display:grid;gap:8px}
.quiz__opt{
  text-align:left;padding:16px 18px;border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--ink);border-radius:var(--r);cursor:pointer;font-size:15px;transition:.16s;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.quiz__opt:hover{border-color:var(--acc);background:rgba(245,217,10,.07)}
.quiz__opt em{font-family:"JetBrains Mono",monospace;font-style:normal;font-size:11px;color:var(--dim-2)}
.quiz__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.quiz__back{background:none;border:0;color:var(--dim);cursor:pointer;font-size:13.5px;padding:0}
.quiz__back:hover{color:var(--acc)}
.quiz__bar{flex:1;height:3px;background:var(--line);margin:0 14px;position:relative;border-radius:3px}
.quiz__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--acc);border-radius:3px;transition:width .3s}
.quiz__cnt{font-family:"JetBrains Mono",monospace;font-size:11px;white-space:nowrap}

.call__grid{display:block}
.call__body{padding:0}

.thanks{padding:36px 30px;text-align:center}
.thanks__ic{width:54px;height:54px;margin:0 auto 18px;background:var(--acc);color:#111;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.thanks h3{margin-bottom:10px}
.thanks p{color:var(--dim);font-size:14.5px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:200;max-width:min(92vw,420px);
  background:var(--bg-3);color:var(--ink);border:1px solid var(--line-2);padding:14px 18px;border-radius:var(--r);
  font-size:14px;opacity:0;transition:.24s;pointer-events:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

.mnav{position:fixed;inset:0;z-index:80;background:var(--bg);display:none;flex-direction:column;padding:20px}
.mnav.is-open{display:flex}
.mnav a{font-size:19px;padding:16px 0;border-bottom:1px solid var(--line)}
.mnav__x{align-self:flex-end;background:none;border:0;color:var(--ink);font-size:28px;cursor:pointer;padding:6px 10px}

.rise{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
.rise.is-in{opacity:1;transform:none}

.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* ---------- Юридические страницы ---------- */
.legal-page{max-width:820px;margin:0 auto;padding:clamp(34px,6vw,70px) var(--gut)}
.legal-page h1{font-size:clamp(26px,4vw,40px);margin-bottom:8px}
.legal-page h2{font-size:19px;margin:32px 0 12px;color:var(--acc)}
.legal-page p,.legal-page li{color:var(--dim);font-size:15.5px}
.legal-page a{color:var(--acc);text-decoration:underline}
.legal-page .date{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--dim-2);margin-bottom:26px}

/* ---------- Адаптив ---------- */
@media(max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .grid-4{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .cta-band__in{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .top nav,.top__phone{display:none}
  .burger{display:block;margin-left:auto}
  .top__cta{display:none}
  .checks{grid-template-columns:1fr}
}
@media(max-width:600px){
  .grid-4{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:26px}
  .invoice{padding:20px 18px}
  .quiz{padding:24px 18px}
  .route-tab{min-width:calc(50% - 4px)}
  .cta-band{margin-left:0;margin-right:0;border-radius:0}
}

/* ---------- Дорожная разметка между секциями ---------- */
.road{
  height:2px;max-width:var(--shell);margin:0 auto;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 34px,transparent 34px 68px);
  opacity:.7;
}

/* ---------- Одометр в калькуляторе ---------- */
.odo{
  margin-top:20px;padding:18px 20px;border-radius:var(--r);
  background:linear-gradient(180deg,#0d0e10,#08090b);border:1px solid var(--line-2);
}
.odo__label{display:block;font-size:12px;color:var(--dim-2);letter-spacing:.06em;margin-bottom:8px}
.odo__val{
  display:block;font-size:clamp(24px,3vw,34px);font-weight:600;color:var(--acc);
  letter-spacing:.02em;text-shadow:0 0 24px rgba(245,217,10,.25);
}

@media(max-width:1080px){
  .route{grid-template-columns:repeat(2,1fr)}
  .hero__car{width:90vw;right:-14%;opacity:.09}
}
@media(max-width:600px){
  .route{grid-template-columns:1fr}
  .stop{padding:18px}
}

/* =========================================================
   Автомобильная атмосфера: фон, свет фар, асфальт, бегущая строка
   ========================================================= */

/* --- сетка-«чертёж» на фоне первого экрана --- */
.hero__grid-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%);
}

/* --- фото на фоне первого экрана --- */
.hero.has-photo{isolation:isolate}
.hero.has-photo:before{
  content:'';position:absolute;inset:0;z-index:0;overflow:hidden;
  background-image:var(--hero-img);background-size:cover;background-position:center right;
  background-repeat:no-repeat;
  opacity:clamp(.12, calc(1 - var(--hero-dim, .55)), .6);
  mask-image:linear-gradient(90deg,transparent 0%,#000 45%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);
}
.hero.has-photo:after{
  background:radial-gradient(ellipse at 20% 40%,rgba(11,11,12,.96),rgba(11,11,12,.55) 55%,transparent 80%);
  width:100%;left:0;top:0;height:100%;
}
.hero.has-photo .hero__car{opacity:.06}

/* --- свет фар: медленный проход блика --- */
.hero__beam{
  position:absolute;top:0;bottom:0;left:-30%;width:45%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(245,217,10,.10) 45%,rgba(245,217,10,.18) 55%,transparent);
  filter:blur(22px);
  animation:beam 9s ease-in-out infinite;
}
@keyframes beam{
  0%{transform:translateX(0);opacity:0}
  18%{opacity:1}
  70%{opacity:.5}
  100%{transform:translateX(300%);opacity:0}
}

/* --- контур машины: выезжает при загрузке --- */
.hero__car{animation:drive 1.5s cubic-bezier(.16,.84,.44,1) both}
@keyframes drive{
  from{transform:translateX(9%);opacity:0}
  to{transform:none;opacity:.14}
}

/* --- полоса асфальта с бегущей разметкой --- */
.asphalt{
  position:relative;height:64px;margin-top:clamp(26px,4vw,44px);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#141518,#0e0f11);
  border:1px solid var(--line);
}
.asphalt:before,.asphalt:after{
  content:'';position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.06);
}
.asphalt:before{top:14px}
.asphalt:after{bottom:14px}
.asphalt i{
  position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;width:200%;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--acc) 0 54px,transparent 54px 128px);
  opacity:.55;animation:dash 3.2s linear infinite;
}
@keyframes dash{from{transform:translate(0,-50%)}to{transform:translate(-128px,-50%)}}

/* --- бегущая строка терминов --- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;background:#0e0f11}
.ticker__row{display:flex;gap:36px;width:max-content;animation:ticker 42s linear infinite}
.ticker span{
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);white-space:nowrap;display:flex;align-items:center;gap:36px;
}
.ticker span:after{content:'';width:4px;height:4px;border-radius:50%;background:var(--acc);opacity:.6}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- призрачные силуэты в секциях --- */
.sec--art,.sec--route{position:relative;overflow:hidden}
.sec--art:before{
  content:'';position:absolute;right:-6%;top:12%;
  width:min(560px,46vw);max-width:560px;height:min(260px,40%);max-height:260px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 260' fill='none' stroke='%23f5d90a' stroke-width='3'%3E%3Cpath d='M112 196c0-24 19-43 43-43s43 19 43 43M198 196h300M498 196c0-24 19-43 43-43s43 19 43 43M584 196h96c34 0 58-8 74-24 12-12 18-26 18-44 0-16-10-26-30-30l-96-18-84-56c-12-8-26-12-42-12H283c-20 0-38 8-52 22l-56 56-92 20c-20 4-30 16-30 32v38c0 10 8 16 20 16h39'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.05;
}
.sec--route:before{
  content:'';position:absolute;left:-4%;bottom:4%;
  width:min(520px,44vw);max-width:520px;height:min(230px,34%);max-height:230px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none' stroke='%23f5d90a' stroke-width='3'%3E%3Cpath d='M40 236h700l-40 44H80z'/%3E%3Cpath d='M110 236V150h520v86'/%3E%3Cpath d='M150 150v-40h90v40M260 150v-40h90v40M370 150v-40h90v40M480 150v-40h90v40'/%3E%3Cpath d='M630 236V96h60l30 60v80'/%3E%3Cpath d='M660 96V50h-40'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.05;
}
.sec--art>.shell,.sec--route>.shell{position:relative;z-index:1}

/* --- фото в жёлтом блоке призыва --- */
.cta-band.has-photo{
  position:relative;overflow:hidden;background:#0e0f11;color:var(--ink);
}
.cta-band.has-photo:before{
  content:'';position:absolute;inset:0;background-image:var(--cta-img);background-size:cover;background-position:center;
  opacity:.35;
}
.cta-band.has-photo:after{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,17,.94),rgba(14,15,17,.5));
}
.cta-band.has-photo .cta-band__in{position:relative;z-index:1}
.cta-band.has-photo h2{color:var(--ink)}
.cta-band.has-photo p{color:var(--dim)}
.cta-band.has-photo .btn{background:var(--acc);color:#111}
.cta-band.has-photo .btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .hero__beam,.asphalt i,.ticker__row,.hero__car{animation:none!important}
}
@media(max-width:600px){
  .asphalt{height:48px}
  .ticker{padding:11px 0}
  .ticker span{font-size:11px}
}

/* --- страховка: декоративная графика никогда не перекрывает контент --- */
.hero,.sec--art,.sec--route,.cta-band{position:relative;overflow:hidden}
.hero>*:not(.hero__car):not(.hero__grid-bg):not(.hero__beam){position:relative;z-index:2}
svg{max-width:100%;height:auto}
section > svg:not([class]){display:none}
img{height:auto}
.hero__car,.hero__grid-bg,.hero__beam,.sec--art:before,.sec--route:before{z-index:0}

/* --- когда фоновая графика выключена в админке --- */
.no-decor .hero__car,
.no-decor .hero__grid-bg,
.no-decor .hero__beam,
.no-decor .sec--art:before,
.no-decor .sec--route:before,
.no-decor .asphalt,
.no-decor .ticker{display:none!important}

/* =========================================================
   Декоративные SVG-акценты в секциях
   Строго ограничены по размеру и не перекрывают контент.
   ========================================================= */
.art-route,.art-wheel,.art-gauge{
  position:absolute;pointer-events:none;z-index:0;color:var(--acc);
  height:auto;
}

/* пунктирная траектория маршрута — тонкой линией через всю секцию */
.art-route{
  left:0;right:0;top:34%;width:100%;max-width:none;height:min(180px,22vh);
  opacity:.10;
}

/* колесо — в правом верхнем углу секции «Что входит» */
.art-wheel{
  right:-40px;top:40px;width:min(230px,22vw);max-width:230px;height:auto;
  opacity:.07;animation:spin 34s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* стрелочный прибор — рядом с калькулятором */
.art-gauge{
  right:4%;top:12%;width:min(260px,24vw);max-width:260px;height:auto;
  opacity:.09;
}

.sec--calc{position:relative;overflow:hidden}
.sec--calc>.shell{position:relative;z-index:1}

@media(max-width:900px){
  .art-wheel,.art-gauge{display:none}
  .art-route{opacity:.07}
}
@media(prefers-reduced-motion:reduce){.art-wheel{animation:none}}
.no-decor .art-route,.no-decor .art-wheel,.no-decor .art-gauge{display:none!important}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ — премиальная подача
   Ленты с подкруткой вместо столбика одинаковых карточек,
   крупная типографика, липкая панель действий.
   ========================================================= */

.swipe-hint{display:none}
.dock{display:none}

@media(max-width:860px){

  /* --- воздух и ритм --- */
  :root{--gut:18px}
  .sec{padding:44px 0 46px}
  .sec__head{margin-bottom:22px}
  .sec__head p{font-size:15.5px;margin-top:10px}
  h1{font-size:clamp(30px,8.5vw,40px);letter-spacing:-.03em}
  h2{font-size:clamp(24px,7vw,32px);letter-spacing:-.03em}
  .eyebrow{font-size:10px;margin-bottom:12px}

  /* --- первый экран --- */
  .hero{padding-top:26px}
  .hero__lead{font-size:15.5px;margin:16px 0 22px}
  .hero__car{display:none}
  .routes{gap:6px}
  .route-tab{min-width:calc(50% - 3px);padding:11px 14px;border-radius:12px}
  .route-tab span{font-size:14px}

  /* цифры — компактной сеткой без рамок */
  .facts{
    grid-template-columns:1fr 1fr;gap:0;margin-top:26px;
    border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-2);
  }
  .fact{border:0;border-radius:0;padding:16px 16px 18px;background:transparent;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .fact:nth-child(2n){border-right:0}
  .fact:nth-child(n+3){border-bottom:0}
  .fact__n{font-size:23px}
  .fact__t{font-size:12px;margin-top:3px}

  .asphalt{height:44px;margin-top:24px;border-radius:12px}
  .invoice{border-radius:16px;padding:22px 18px}
  .invoice__head h3{font-size:19px}

  /* --- горизонтальные ленты вместо столбика --- */
  .route,.grid-4,.quotes{
    display:grid;grid-auto-flow:column;grid-auto-columns:82%;
    gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 14px;
    scrollbar-width:none;
  }
  .route::-webkit-scrollbar,.grid-4::-webkit-scrollbar,.quotes::-webkit-scrollbar{display:none}
  .route>*,.grid-4>*,.quotes>*{scroll-snap-align:start;border-radius:14px}
  .stop{padding:20px 18px}
  .cell{padding:22px 18px 24px}
  .quote{padding:22px 20px}

  .swipe-hint{
    display:flex;align-items:center;gap:6px;justify-content:flex-end;
    font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--dim-2);margin-bottom:10px;
  }
  .swipe-hint span{color:var(--acc);animation:nudge 1.8s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

  .route__total{margin-top:6px;padding-top:18px;gap:8px 22px}
  .route__total b{font-size:26px}
  .route__total span{font-size:13.5px}

  /* --- преимущества: список, а не карточки --- */
  .checks{gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-2)}
  .check{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 18px}
  .check:last-child{border-bottom:0}
  .check span{font-size:13.5px}

  /* --- калькулятор --- */
  .calc{gap:10px}
  .calc__form,.calc__out{padding:20px 18px;border-radius:16px}
  .calc__row{font-size:14px;padding:11px 0}
  .odo{padding:16px 18px}

  /* --- вопросы --- */
  .faq summary{font-size:15.5px;padding:17px 46px 17px 18px}
  .faq summary:after{right:18px;top:23px}
  .faq p{font-size:14.5px;padding:0 18px 18px}

  /* --- финальный блок --- */
  .cta-band{padding:28px 20px 30px;border-radius:18px;margin-bottom:40px}
  .cta-actions{gap:8px}
  .cta-actions .btn{width:100%}

  /* --- подвал --- */
  .foot{padding-bottom:96px}   /* место под липкую панель */
  .legal{gap:12px 22px;margin-top:24px}

  /* --- модалки как шторка снизу --- */
  .mdl{padding:0;align-items:flex-end}
  .mdl__box{max-width:none;border-radius:20px 20px 0 0;max-height:94vh;animation:sheet .28s cubic-bezier(.32,.72,0,1)}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  .mdl__box:before{
    content:'';position:absolute;left:50%;top:8px;transform:translateX(-50%);
    width:38px;height:4px;border-radius:4px;background:var(--line-2);
  }
  .quiz{padding:26px 18px 22px}
  .quiz h3{font-size:22px}
  .quiz__opt{padding:15px 16px;font-size:14.5px}
  .thanks{padding:32px 20px}

  /* --- липкая панель действий --- */
  .dock{
    display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(11,11,12,.7),rgba(11,11,12,.97) 40%);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);
    transform:translateY(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .dock.is-on{transform:none}
  .dock__call{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    flex:0 0 auto;padding:14px 18px;border:1px solid var(--line-2);border-radius:12px;
    color:var(--ink);font-size:15px;font-weight:600;background:var(--bg-2);
  }
  .dock__cta{
    flex:1;padding:14px 18px;border:0;border-radius:12px;
    background:var(--acc);color:#111;font-size:15px;font-weight:700;cursor:pointer;
  }
  body.mdl-open .dock{transform:translateY(120%)}
}

@media(max-width:520px){
  .route,.grid-4,.quotes{grid-auto-columns:88%}
  .fact__n{font-size:21px}
  .ticker{padding:10px 0}
  .ticker span{font-size:10px;letter-spacing:.14em}
}

/* =========================================================
   Согласие на использование cookie
   ========================================================= */
.cookie{
  position:fixed;left:20px;bottom:20px;z-index:130;max-width:460px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;transform:translateY(16px);transition:opacity .32s ease,transform .32s cubic-bezier(.4,0,.2,1);
}
.cookie.is-on{opacity:1;transform:none}
.cookie__in{padding:20px 22px}
.cookie__txt{font-size:13.5px;line-height:1.55;color:var(--dim);margin:0 0 16px}
.cookie__txt a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.cookie__act{display:flex;align-items:center;gap:14px}
.cookie__ok{
  padding:12px 26px;border:0;border-radius:10px;background:var(--acc);color:#111;
  font-size:14.5px;font-weight:700;cursor:pointer;transition:filter .18s;
}
.cookie__ok:hover{filter:brightness(.92)}
.cookie__more{font-size:13.5px;color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.cookie__more:hover{color:var(--ink)}

@media(max-width:860px){
  .cookie{left:12px;right:12px;bottom:12px;max-width:none;border-radius:14px}
  .cookie__in{padding:16px 18px}
  .cookie__txt{font-size:12.5px;margin-bottom:14px}
  .cookie__ok{flex:1;padding:13px 20px}
  .cookie__act{gap:16px}
  /* когда плашка видна — поднимаем липкую панель, чтобы не наезжали */
  body.has-cookie .dock{transform:translateY(120%)}
}

/* =========================================================
   Фон отдельных блоков
   ========================================================= */
.sec.has-bg{position:relative;overflow:hidden}
.sec.has-bg>.shell{position:relative;z-index:2}
.sec__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--sec-img);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:clamp(.05, var(--sec-op, .2), .5);
}
.sec.has-bg:after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(11,11,12,.55) 22%,rgba(11,11,12,.55) 78%,var(--bg) 100%);
}
/* карточки поверх фото — чуть плотнее, чтобы не сливались */
.sec.has-bg .stop,.sec.has-bg .cell,.sec.has-bg .check,
.sec.has-bg .calc__form,.sec.has-bg .calc__out,.sec.has-bg .faq details{
  background:rgba(19,20,23,.92);backdrop-filter:blur(3px);
}