/* ===== Автомобильная тематика: трасса у логотипа, тахометры, одометр, коробка передач, колесо ===== */
.bring{position:relative;display:grid;place-items:center;width:168px;height:66px}
.bring .logo{position:relative;z-index:1}
.trk{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trk path{fill:none;stroke:var(--black);stroke-width:2;stroke-dasharray:7 7;animation:dashm 1.1s linear infinite}
@keyframes dashm{to{stroke-dashoffset:-14}}
.wheel{position:absolute;left:0;top:0;width:22px;height:22px;offset-path:path('M33 3H135A30 30 0 0 1 135 63H33A30 30 0 0 1 33 3Z');offset-rotate:0deg;offset-anchor:50% 50%;animation:orbit 8s linear infinite;z-index:2}
.wheel svg{display:block;width:100%;height:100%;animation:spn .7s linear infinite}
.brand:hover .wheel{animation-duration:2.6s}
.brand:hover .wheel svg{animation-duration:.22s}
@keyframes orbit{from{offset-distance:0%}to{offset-distance:100%}}
@media (max-width:520px){.bring{transform:scale(.82);transform-origin:left center;margin-right:-30px}}

/* тахометр в «К»-кадре */
.kgauge{position:absolute;left:5%;bottom:4%;width:22cqw;aspect-ratio:1}
.kgauge svg{width:100%;height:100%;display:block}
.mn{transform-origin:50px 50px;transform:rotate(-135deg)}
.mg{position:absolute;left:0;right:0;top:53%;text-align:center;color:#fff;font-weight:800;font-size:6.4cqw;line-height:1}
.mgl{position:absolute;left:0;right:0;top:80%;text-align:center;color:var(--beige);font-weight:800;font-size:1.9cqw;letter-spacing:.06em}

/* приборная панель вместо плоских цифр */
.cluster{margin-top:clamp(48px,7vw,100px);display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(16px,3vw,48px);align-items:center;background:var(--black);color:#fff;padding:clamp(24px,3.6vw,60px)}
.dial{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1}
.dial svg{width:100%;height:100%;display:block;overflow:visible}
.dial .nd{transform-origin:120px 120px;transition:transform 2.2s cubic-bezier(.2,1.3,.4,1)}
.dial .jit{transform-origin:120px 120px;animation:jit .16s ease-in-out infinite alternate}
@keyframes jit{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
.dv{position:absolute;left:0;right:0;top:64%;text-align:center;font-weight:800;font-size:clamp(28px,3.4vw,54px);letter-spacing:-.05em;line-height:1}
.dlab{margin-top:14px;text-align:center;font-weight:800;font-size:13px;text-transform:uppercase;color:var(--beige);letter-spacing:.01em}
.cl-mid{text-align:center}
.odo{display:inline-flex;align-items:flex-end;font-weight:800;font-size:clamp(40px,5.4vw,84px);line-height:1.18;letter-spacing:0}
.od{display:inline-block;width:.68em;height:1.18em;overflow:hidden;background:#fff;color:var(--black);border-right:2px solid var(--black);text-align:center;box-shadow:inset 0 .22em .22em -.12em rgba(0,0,0,.28),inset 0 -.22em .22em -.12em rgba(0,0,0,.28)}
.od .strip{display:flex;flex-direction:column;transform:translateY(calc((10 + var(--d)) * -1.18em));transition:transform 2.4s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .14s)}
.odo.pre .od .strip{transform:translateY(0)}
.od i{display:block;height:1.18em;line-height:1.18em;font-style:normal}
.oc{color:var(--red);padding-left:.08em}
.oc.sp{display:inline-block;width:.22em}
.odo-plain{font-weight:800;font-size:clamp(40px,5.4vw,84px);line-height:1}
.cl-year{margin-top:clamp(20px,3vw,36px);padding-top:18px;border-top:2px solid #444;display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.cl-year .yr{font-weight:800;font-size:clamp(28px,3vw,46px);color:var(--red);letter-spacing:-.05em}
.cl-year .dlab{margin:0}
@media (max-width:900px){.cluster{grid-template-columns:1fr}}

/* коробка передач: шаги записи = передачи */
.shift{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:clamp(20px,4vw,72px);align-items:center;background:var(--black);color:#fff;padding:clamp(22px,3.2vw,48px);margin-bottom:14px}
.gate{width:100%;max-width:420px}
.gate svg{width:100%;height:auto;display:block;overflow:visible}
.gate .k1{transition:transform .16s cubic-bezier(.3,.7,.3,1)}
.gate .k2.clunk{animation:clunk .24s}
@keyframes clunk{0%{transform:translate(0,0)}30%{transform:translate(3px,-2px)}60%{transform:translate(-2px,2px)}100%{transform:translate(0,0)}}
.shift-t .lbl{display:block;color:var(--beige);margin-bottom:6px}
.gn{display:block;font-weight:800;font-size:clamp(72px,10vw,150px);line-height:.85;letter-spacing:-.06em;color:var(--red)}
.gt{display:block;margin-top:18px;font-weight:800;font-size:clamp(20px,2.4vw,34px);text-transform:uppercase;letter-spacing:-.03em;line-height:1.05;max-width:16em;min-height:2.2em}
.sign{transition:translate .35s var(--ease),opacity .35s}
.sign.on{translate:0 -10px}
.sign.dim{opacity:.5}
@media (max-width:700px){.shift{grid-template-columns:1fr}}

/* логотип в колесе (подвал): кольцо шины и треугольники диска, логотип — в чистой зоне */
.ft-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px 40px}
.ft-r{text-align:right}
.wframe{position:relative;width:340px;height:340px;display:grid;place-items:center;max-width:100%}
.wframe .wr{position:absolute;inset:0;width:100%;height:100%}
.wframe .wa,.wframe .wb{transform-box:fill-box;transform-origin:center}
.wframe .wa{animation:spn 36s linear infinite}
.wframe .wb{animation:spn 14s linear infinite reverse}
.wframe:hover .wa{animation-duration:2.4s}
.wframe:hover .wb{animation-duration:1.6s}
.wframe .logo{position:relative;z-index:1}
@media (max-width:900px){.ft-in{grid-template-columns:1fr;justify-items:center;text-align:center}.ft-r{text-align:center}}


/* ===== Цены на приборах ===== */
.pcock{background:var(--black);color:#fff;padding:clamp(22px,3.2vw,52px)}
.plab{color:var(--beige);margin-bottom:12px}
.pmodes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,44px)}
.pill{position:relative;cursor:pointer;padding:13px 18px 12px;border:2px solid #4a4a4a;min-width:150px;max-width:260px;transition:background .25s,border-color .25s,color .25s,translate .25s var(--ease)}
.pill:hover{border-color:#fff;translate:0 -2px}
.pill b{display:block;font-weight:800;text-transform:uppercase;font-size:12.5px;line-height:1.15;letter-spacing:.005em}
.pill small{display:block;color:#bfc0c2;font-size:12.5px;margin-top:4px;min-height:1.2em}
.pill.on{background:var(--red);border-color:var(--red);color:var(--black)}
.pill.on small{color:var(--black)}
.pill .pf{position:absolute;top:8px;right:8px;width:9px;height:9px;background:var(--beige)}
.pill.on .pf{background:var(--black)}
.pgrid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(12px,2.4vw,40px);align-items:center}
.pslot{transition:opacity .4s}
.pslot.off{opacity:.3}
.pdial .dv{top:65%}
.pdial .dp{display:block;font-size:clamp(24px,2.7vw,42px);font-weight:800;letter-spacing:-.05em;line-height:1}
.pdial:not(.empty) .dp::after{content:" ₽";font-size:.55em;letter-spacing:0}
.pdial .dh{display:block;margin-top:6px;font-size:clamp(11px,1vw,13px);font-weight:700;color:var(--beige);letter-spacing:0;min-height:1.2em}
.dlb{min-height:1.4em}
.pcenter{text-align:center}
.pc-name{font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.1vw,32px);letter-spacing:-.035em;line-height:1}
.pc-note{margin-top:8px;color:var(--beige);font-weight:700;font-size:13px;text-transform:uppercase;min-height:1.3em}
.pc-tot{margin-top:clamp(18px,2.6vw,34px);display:flex;justify-content:center;align-items:flex-end;gap:.18em}
.pc-tot .odo{font-size:clamp(36px,4.6vw,76px)}
.od.z{opacity:.32}
.pc-cur{font-weight:800;color:var(--red);font-size:clamp(28px,3.4vw,56px);line-height:1.18}
.pcenter .dlab{margin-top:10px}
.pextra{margin-top:20px}
.prow{position:relative;display:grid;grid-template-columns:2fr 1fr auto;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid #4a4a4a}
.prow .lb{font-weight:800;text-transform:uppercase;font-size:13px}
.prow .hr{color:#bfc0c2;font-size:14px}
.prow .pp{font-weight:800;font-size:22px;letter-spacing:-.03em}
.prow .pp::after{content:" ₽";font-size:.65em}
.ptools{display:none}
body.admin .ptools{display:block}
.pfoot{margin-top:clamp(22px,3vw,40px);padding-top:clamp(18px,2.4vw,28px);border-top:2px solid #4a4a4a;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pfoot .prnote{margin:0;color:#d6d7d9;font-weight:600;max-width:40em}
@media (max-width:900px){.pgrid{grid-template-columns:1fr 1fr}.pcenter{grid-column:1/-1;order:-1}.pslot .dial{max-width:300px}}
@media (max-width:520px){.pgrid{grid-template-columns:1fr}.pill{min-width:0;flex:1 1 44%}}

/* ===== Коробка передач как навигация ===== */
.shift{min-height:clamp(400px,40vw,540px);outline-offset:4px}
.gate svg{touch-action:none}
.gate .k1{cursor:grab}
.gate .k1:active{cursor:grabbing}
.gate .gh{cursor:pointer}
.ghint{margin-top:14px;color:#9a9b9d;font-size:12.5px;line-height:1.4;max-width:24em}
.stage{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:100%;position:relative}
.leds{display:flex;gap:6px}
.led{flex:1;height:10px;border:0;background:#3a3a3a;cursor:pointer;transition:background .25s,height .25s,transform .25s;padding:0}
.led.on{background:var(--red)}
.led.cur{background:#fff;height:16px}
.led:hover{transform:scaleY(1.5)}
.stg{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:center}
.stg>*{will-change:transform,opacity}
.stg.swap>*{animation:sIn .5s var(--ease) both}
.stg.swap>*:nth-child(2){animation-delay:.04s}.stg.swap>*:nth-child(3){animation-delay:.09s}.stg.swap>*:nth-child(4){animation-delay:.14s}.stg.swap>*:nth-child(5){animation-delay:.2s}
@keyframes sIn{from{opacity:0;transform:translateY(calc(var(--dir,1) * 34px))}to{opacity:1;transform:none}}
.stg .gt{margin-top:16px}
.gd{margin-top:14px;color:#d6d7d9;font-size:clamp(16px,1.35vw,19px);max-width:30em;line-height:1.5;min-height:3em}
.stg .go{margin-top:22px}
.stctl{display:none}
[hidden]{display:none!important}
body.admin .stctl{display:block}
body.admin .stctl .ctl{position:static;display:inline-flex}
.stctl .ctl{position:static}