/* ---------- Шапка ---------- */
.stick{position:sticky;top:0;z-index:50}
.hd{background:#fff;border-bottom:1px solid var(--gray)}
.hd-in{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:block;flex:none;color:var(--black)}
.logo{display:block;width:132px;height:34.5px;color:inherit}
.brand-sep{width:2px;height:34px;background:var(--gray);flex:none}
.brand-t{display:flex;flex-direction:column;line-height:1.2;max-width:230px}
.brand-t b{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:-.01em}
.brand-t small{font-size:12.5px;color:var(--mute);font-weight:600}
#nav{display:flex;gap:2px;margin-left:auto;align-items:center}
#nav a{white-space:nowrap;padding:.6em .7em;text-decoration:none;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.01em;transition:background .2s,color .2s}
#nav a:hover{background:var(--black);color:#fff}
#nav a.off{opacity:.35;text-decoration:line-through}
#burger{display:none;margin-left:auto;width:48px;height:48px;border:0;background:var(--black);cursor:pointer}
#burger span,#burger span::before,#burger span::after{display:block;width:22px;height:2px;background:#fff;position:relative;margin:auto}
#burger span::before,#burger span::after{content:"";position:absolute;left:0}
#burger span::before{top:-7px}#burger span::after{top:7px}
@media (max-width:1560px){.brand-t,.brand-sep{display:none}}
@media (max-width:1280px){
  #burger{display:block}
  .hd .btn{display:none}
  #nav{position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:8px 24px 20px;border-bottom:1px solid var(--gray);display:none;margin:0}
  #nav.open{display:flex}
  #nav a{padding:1em .4em;font-size:15px;border-bottom:1px solid var(--gray)}
}


/* ---------- Hero ---------- */
.hero{background:var(--gray);padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,104px);position:relative;overflow:hidden}
.hero h1{font-weight:800;text-transform:uppercase;font-size:clamp(25px,7.45vw,114px);line-height:.92;letter-spacing:-.04em;margin-bottom:clamp(28px,4vw,56px);animation:up .9s .1s var(--ease) both}
.hero h1 span{display:block}
.hero-g{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,80px);align-items:center}
.lead{font-size:clamp(18px,1.8vw,23px);font-weight:600;max-width:30em;animation:up .9s .3s var(--ease) both}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;animation:up .9s .45s var(--ease) both}
.enroll{margin-top:36px;background:var(--beige);padding:22px 26px;max-width:560px;box-shadow:6px 8px 18px rgba(30,30,30,.22);animation:up .9s .6s var(--ease) both;position:relative}
.enroll h2{font-size:17px;font-weight:800;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.enroll h2::before{content:"";width:12px;height:12px;background:var(--red);flex:none;animation:blink 1.4s steps(2,jump-none) infinite}
.enroll ul{list-style:none;display:grid;gap:9px}
.enroll li{position:relative;font-size:15px;font-weight:600;line-height:1.4}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.25}}
@media (max-width:900px){.hero-g{grid-template-columns:1fr}}

/* К-кадр: знак камеры из логотипа, внутри — «кадр» дороги */
.kwrap{animation:kin 1.1s .2s var(--ease) both}
@keyframes kin{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}
.kscene{position:relative;width:100%;aspect-ratio:237.12/165.33;background:var(--red);clip-path:var(--k);overflow:hidden;container-type:inline-size}
.kscene .tri{position:absolute;right:0;top:0;width:26%;height:36%;background:var(--beige);clip-path:polygon(0 0,100% 0,100% 100%);animation:tri 5s ease-in-out infinite alternate}
@keyframes tri{to{translate:-6% 6%}}
.kscene .tri2{position:absolute;right:0;bottom:0;width:26%;height:36%;background:var(--black);clip-path:polygon(100% 0,100% 100%,0 100%)}
.kscene .city{position:absolute;left:0;right:0;top:38.4%;height:15.8%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cpath d='M0 60V32h24V14h18v18h14V6h22v26h18V22h20v38z' fill='%231E1E1E'/%3E%3C/svg%3E") repeat-x left bottom/auto 100%;opacity:.92;animation:pan 18s linear infinite}
@keyframes pan{to{background-position-x:-300px}}
.kscene .rd{position:absolute;left:0;right:0;top:54%;height:7.6%;background:var(--black)}
.kscene .rd::before{content:"";position:absolute;left:0;right:0;top:50%;height:.9cqw;margin-top:-.45cqw;background:repeating-linear-gradient(90deg,var(--beige) 0 4cqw,transparent 4cqw 8cqw);animation:dsh .6s linear infinite}
@keyframes dsh{to{background-position-x:-8cqw}}
.kcar{position:absolute;top:44.2%;width:20%;left:-24%;animation:drv 7s linear infinite}
.kcar svg{display:block;width:100%;height:auto}
.kcar .wh{transform-box:fill-box;transform-origin:center;animation:spn .45s linear infinite}
@keyframes drv{to{left:104%}}
@keyframes spn{to{transform:rotate(360deg)}}
.krec{position:absolute;left:6%;top:9%;display:flex;align-items:center;gap:1.6cqw;font-weight:800;font-size:3.4cqw;color:var(--black);letter-spacing:.02em}
.krec i{width:2.6cqw;height:2.6cqw;background:var(--black);animation:blink 1s steps(2,jump-none) infinite}
.ktc{position:absolute;left:6%;bottom:9%;background:var(--black);color:#fff;font-weight:800;font-size:4.2cqw;padding:.5cqw 1.6cqw;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- Ленты ---------- */
.tapes{background:var(--mute);padding:clamp(40px,6vw,88px) 0;overflow:hidden}
.tapes-in{position:relative;height:clamp(190px,24vw,330px)}
.tape{position:absolute;left:-6%;right:-6%;overflow:hidden;white-space:nowrap;font-weight:800;text-transform:uppercase;font-size:clamp(20px,3.1vw,44px);letter-spacing:-.015em;line-height:1;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.tape.t0{top:10%;transform:rotate(-3deg);background:var(--black);color:var(--red)}
.tape.t1{top:37%;transform:rotate(2.4deg);background:var(--red);color:#fff}
.tape.t2{top:64%;transform:rotate(-1.4deg);background:var(--beige);color:var(--black)}
.tk{display:flex;width:max-content;animation:slide 46s linear infinite}
.t1 .tk{animation-direction:reverse;animation-duration:54s}
.t2 .tk{animation-duration:62s}
@keyframes slide{to{transform:translateX(-50%)}}
.tp{display:flex;align-items:center;flex:none;padding:.6em 0}
.tp .ph1{position:relative;display:inline-flex;align-items:center}
.km{width:1.15em;height:.8em;margin:0 .9em;flex:none}