:root{
  --beton:#EEEDE8; --list:#F7F6F2; --grafit:#23272C; --stal:#35607E; --zhelt:#F2B705;
  --seryj:#5D636B; --liniya:#D6D3CA; --krasn:#C8372D;
  --zag:'Unbounded',system-ui,sans-serif; --tekst:'Golos Text',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--beton);color:var(--grafit);font:16px/1.55 var(--tekst);
  background-image:radial-gradient(rgba(35,39,44,.035) 1px,transparent 1px);background-size:5px 5px}
img{max-width:100%;height:auto;display:block}
a{color:var(--stal)}
h1,h2,h3{font-family:var(--zag);line-height:1.12;margin:0}
h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.01em}
.ramka{max-width:1240px;margin:0 auto;padding:0 24px}
.ramka--uzkaya{max-width:900px}
.blok{padding:72px 0}
.blok--bumaga{background:var(--list);border-block:1px dashed var(--liniya)}
.blok--uzkij{padding:24px 0}
.blok__pod{color:var(--seryj);margin:10px 0 32px;font-size:17px}

/* лента маршрута */
.trassa{position:sticky;top:0;z-index:20;background:rgba(238,237,232,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--liniya)}
.trassa__in{max-width:1240px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:28px}
.trassa__home{font:800 15px var(--zag);color:var(--grafit);text-decoration:none;letter-spacing:.02em}
.trassa__line{position:relative;flex:1;display:flex;justify-content:space-between;padding-top:4px}
.trassa__track{position:absolute;left:11px;width:0;top:15px;border-top:2px dashed #9AA3AB}
.trassa__done{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--grafit)}
.trassa__truck{position:absolute;top:-12px;left:11px;width:34px;transform:translateX(-50%);transition:left .15s linear;pointer-events:none}
.trassa__truck svg{width:34px;height:17px;display:block}
.trassa__line a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--seryj);font:500 13px var(--tekst);min-width:22px}
.trassa__line a b{width:22px;height:22px;border-radius:50%;background:var(--list);border:2px solid var(--grafit);transition:background .2s,transform .2s}
.trassa__line a.is-on{color:var(--grafit);font-weight:700}
.trassa__line a.is-on b{background:var(--zhelt);transform:scale(1.15)}
.trassa__line a:hover b{background:#FBE7A6}

/* первый экран */
.pervyj{position:relative;min-height:540px;display:flex;align-items:center;overflow:hidden}
.pervyj__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.pervyj::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,237,232,.9) 0,rgba(238,237,232,.6) 34%,rgba(238,237,232,0) 58%)}
.pervyj .ramka{position:relative;z-index:1;width:100%}
.pervyj__metka{display:inline-block;font:600 12px var(--tekst);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--grafit);padding:4px 10px;margin:0 0 18px}
.pervyj h1{font-size:clamp(34px,4.6vw,60px);font-weight:800;max-width:640px}
.pervyj h1 span{display:block;font-weight:600;font-size:.62em;margin-top:10px}
.pervyj__lid{max-width:470px;font-size:18px;margin:20px 0 0}

/* остановки */
.ostanovki{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.ostanovki::before{content:"";position:absolute;left:8%;right:8%;top:39px;border-top:2px dashed #9AA3AB}
.ost{position:relative;background:var(--list);border:1px solid var(--liniya);margin-top:44px;padding:20px 16px 22px;transition:transform .25s,box-shadow .25s}
.ost+.ost{border-left:0}
.ost__nomer{position:absolute;top:-62px;left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;border:2px solid var(--grafit);background:var(--list);font:700 15px var(--zag);color:var(--grafit);cursor:pointer;transition:background .2s,transform .2s}
.ost.is-on .ost__nomer{background:var(--zhelt);transform:translateX(-50%) scale(1.12)}
.ost.is-on{box-shadow:0 14px 30px -18px rgba(35,39,44,.45);transform:translateY(-4px);z-index:1}
.ost__znak{width:76px;height:76px;object-fit:contain;margin:0 auto 10px}
.ost h3{font-size:17px;text-align:center;margin-bottom:14px}
.ost dl{margin:0;font-size:13.5px;line-height:1.45}
.ost dt{font-weight:700;margin-top:12px}
.ost dd{margin:3px 0 0;color:#3B4148}

/* планировщик */
.pult{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.pult fieldset{border:1px solid var(--liniya);background:#fff;margin:0;padding:12px;display:flex;flex-wrap:wrap;gap:6px}
.pult legend{font-size:13px;color:var(--seryj);padding:0 4px}
.pult label{flex:1}
.pult input{position:absolute;opacity:0}
.pult span{display:block;text-align:center;padding:10px;border:1px solid var(--liniya);cursor:pointer;font-weight:500;transition:background .2s,color .2s}
.pult input:checked+span{background:var(--stal);color:#fff;border-color:var(--stal)}
.pult input:focus-visible+span{outline:2px solid var(--zhelt);outline-offset:2px}
.plan{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.plan__shapka{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.plan__shapka h3{font-size:20px}
.plan__schet{font:700 14px var(--zag);color:var(--stal)}
.plan__poyas{color:var(--seryj);font-size:14.5px;margin:6px 0 14px;min-height:1.5em}
.spisok{list-style:none;margin:0 0 14px;padding:0;columns:2;column-gap:14px}
.spisok li{break-inside:avoid;margin-bottom:8px}
.spisok label{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--liniya);padding:10px 12px;cursor:pointer;font-size:14.5px;line-height:1.35;transition:border-color .2s}
.spisok input{appearance:none;flex:none;width:20px;height:20px;border:2px solid var(--grafit);margin:0;display:grid;place-items:center;cursor:pointer;background:#fff}
.spisok input:checked{background:var(--zhelt)}
.spisok input:checked::after{content:"";width:9px;height:5px;border:solid var(--grafit);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px)}
.spisok label:has(input:checked){border-color:#C9B76A}
.spisok small{display:block;color:var(--seryj);font-size:12px;margin-top:2px}
.spisok li.is-new label{animation:prishlo .6s ease}
@keyframes prishlo{from{background:#FBE7A6}to{background:#fff}}
.knopka-tihaya{background:none;border:0;padding:0;color:var(--stal);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px}
.plan__stol{position:relative;margin:0}
.shtamp{position:absolute;right:18%;bottom:30%;font:800 30px var(--zag);color:#2B5BA8;border:4px solid #2B5BA8;border-radius:6px;padding:4px 16px;text-transform:uppercase;transform:rotate(-12deg) scale(2.2);opacity:0;mix-blend-mode:multiply;transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.shtamp.is-on{opacity:.85;transform:rotate(-12deg) scale(1)}
.shtamp--sin{font-size:17px;right:4%;bottom:14%;border-width:3px}

/* платежи */
.formula{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1.2fr;align-items:stretch;gap:10px}
.formula>i{align-self:center;font:700 32px var(--zag);color:var(--stal);font-style:normal}
.formula__kl{background:var(--list);border:1px solid var(--liniya);padding:18px 14px;text-align:center}
.formula__kl b{display:block;font:700 15px var(--zag);margin-bottom:8px}
.formula__kl span{font-size:13.5px;color:var(--seryj)}
.formula__itog{background:var(--zhelt);padding:18px;font-size:14.5px;display:flex;align-items:center;line-height:1.4}
.formula__itog b{margin-right:4px}
.schety{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;gap:12px;align-items:end;background:#fff;border:1px dashed #9AA3AB;padding:18px}
.schety label{font-size:13px;color:var(--seryj);display:flex;flex-direction:column;gap:6px}
.schety input{font:600 16px var(--tekst);color:var(--grafit);border:1px solid var(--liniya);padding:10px;width:100%;background:var(--beton)}
.schety input:focus{outline:2px solid var(--zhelt);border-color:var(--grafit)}
.schety__itog{font-size:14px;line-height:1.5}
.schety__itog b{font:800 22px var(--zag);display:block}
.primechanie{font-size:13px;color:var(--seryj);margin:12px 0 0;max-width:900px}

/* срок */
.srok{display:grid;grid-template-columns:auto 1fr 260px;gap:36px;align-items:center}
.srok__cifra{font-family:var(--zag);color:var(--stal);line-height:.9;text-align:center}
.srok__cifra b{display:block;font-size:120px;font-weight:800}
.srok__cifra span{font-size:34px;font-weight:700}
.srok__telo h2{font-size:28px}
.srok__telo p{margin:10px 0}
.srok__data{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--seryj);margin:6px 0 14px}
.srok__data input{font:600 15px var(--tekst);padding:7px 10px;border:1px solid var(--liniya);background:#fff;color:var(--grafit)}
.dni{list-style:none;margin:0;padding:0;display:flex;align-items:center;position:relative}
.dni::before{content:"";position:absolute;left:12px;right:12px;top:12px;border-top:2px dashed #9AA3AB}
.dni li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--seryj)}
.dni li b{width:24px;height:24px;border-radius:50%;border:2px solid var(--grafit);background:var(--list);display:grid;place-items:center;font:700 10px var(--zag);color:var(--grafit)}
.dni li.is-proshel b{background:var(--grafit);color:#fff}
.dni li.is-segodnya b{background:var(--zhelt);color:var(--grafit);transform:scale(1.25)}
.dni li.is-zapas b{border-color:var(--krasn)}
.srok__vyvod{font-weight:600;min-height:1.5em}
.srok__kalendar{position:relative;margin:0}

/* ошибки */
.oshibki{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.oshibki li{background:var(--list);border:1px solid var(--liniya);padding:20px 16px;transition:transform .25s}
.oshibki li:hover{transform:translateY(-4px) rotate(-.5deg)}
.oshibki img{width:84px;height:84px;object-fit:contain;margin-bottom:12px}
.oshibki h3{font-size:15px;margin-bottom:8px}
.oshibki p{margin:0;font-size:14px;color:#3B4148}

/* баннер */
.banner{position:relative;display:block;overflow:hidden;background:#DCE4EA;text-decoration:none;color:var(--grafit);min-height:240px}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;transition:transform .6s}
.banner:hover img{transform:scale(1.03)}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,237,232,.95) 0,rgba(238,237,232,.75) 40%,rgba(238,237,232,0) 62%)}
.banner__tekst{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;max-width:470px;padding:32px}
.banner__tekst b{font:800 26px/1.15 var(--zag);color:var(--stal)}
.banner__tekst em{align-self:flex-start;font-style:normal;font-weight:700;background:var(--zhelt);padding:10px 18px;margin-top:6px}

/* вопросы */
details{border-bottom:1px solid var(--liniya);background:#fff;margin-bottom:6px}
summary{cursor:pointer;padding:14px 44px 14px 16px;font-weight:600;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border:solid var(--grafit);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{margin:0;padding:0 16px 16px;color:#3B4148}
#voprosy h2{margin-bottom:24px}

/* подвал */
.podval{border-top:2px dashed #9AA3AB;padding:28px 0 32px;font-size:14px}
.podval__in{display:flex;align-items:center;gap:32px;justify-content:space-between}
.podval p{margin:0;max-width:520px;color:var(--seryj)}
.podval nav{display:flex;gap:18px}
.podval__most{width:200px;opacity:.85}

/* появление */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.rv.is-vidno{opacity:1;transform:none}

@media (max-width:1080px){
  .ostanovki{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .ostanovki::before{display:none}
  .ost{margin-top:24px;border-left:1px solid var(--liniya)}
  .ost__nomer{top:-20px;left:20px;transform:none}
  .ost.is-on .ost__nomer{transform:scale(1.12)}
  .formula{grid-template-columns:1fr 1fr;}
  .formula>i{display:none}
  .formula__itog{grid-column:1/-1}
  .schety{grid-template-columns:1fr 1fr}
  .schety__itog{grid-column:1/-1}
  .oshibki{grid-template-columns:repeat(3,1fr)}
  .srok{grid-template-columns:auto 1fr}
  .srok__kalendar{display:none}
}
@media (max-width:720px){
  html{scroll-padding-top:80px}
  .blok{padding:52px 0}
  .ramka{padding:0 16px}
  .trassa__in{padding:8px 12px;gap:12px}
  .trassa__home{display:none}
  .trassa__line a span{display:none;font-size:11px;position:absolute;top:28px;white-space:nowrap;left:50%;transform:translateX(-50%)}
  .trassa__line a.is-on span{display:block}
  .trassa__line a[data-stop="1"] span{left:0;transform:none}
  .trassa__line a[data-stop="6"] span{left:auto;right:0;transform:none}
  .trassa__line{padding-bottom:16px}
  .pervyj{min-height:0;display:block;padding:0 0 32px}
  .pervyj__foto{position:static;height:210px;object-position:82% 50%;margin-bottom:22px}
  .pervyj::after{display:none}
  .ostanovki{grid-template-columns:1fr}
  .ost:not(.is-on) dl{display:none}
  .ost{display:grid;grid-template-columns:56px 1fr;column-gap:12px;align-items:center;padding:14px 14px 14px 56px;cursor:pointer}
  .ost__nomer{top:14px;left:12px}
  .ost__znak{width:52px;height:52px;margin:0;grid-column:1}
  .ost h3{text-align:left;margin:0;grid-column:2}
  .ost dl{grid-column:1/-1}
  .pult{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr}
  .plan__stol{display:none}
  .spisok{columns:1}
  .formula{grid-template-columns:1fr}
  .schety{grid-template-columns:1fr}
  .srok{grid-template-columns:1fr;gap:12px}
  .srok__cifra{display:flex;align-items:baseline;gap:10px;text-align:left}
  .srok__cifra b{font-size:72px}
  .dni li span{display:none}
  .oshibki{grid-template-columns:1fr}
  .oshibki li{display:grid;grid-template-columns:64px 1fr;column-gap:14px}
  .oshibki img{width:64px;height:64px;grid-row:span 2;margin:0}
  .banner::after{background:linear-gradient(0deg,rgba(238,237,232,.96) 0,rgba(238,237,232,.85) 55%,rgba(238,237,232,.1) 100%)}
  .banner{min-height:340px;display:flex;align-items:flex-end}
  .banner__tekst{padding:20px}
  .banner__tekst b{font-size:21px}
  .podval__in{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}}