/* Все ресурсы локальные. 18-секундный цикл синхронизирует тягач и колёса. */
:root{color-scheme:dark;--bg:#101b2b;--text:#f2f4f6;--muted:#a2adbc;--orange:#ff934d;--cycle:18s}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 70% 39%,#28344766,transparent 55%),var(--bg);-webkit-font-smoothing:antialiased}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{display:flex;gap:12px;align-items:center;color:var(--text);text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-.6px}.brand svg{width:37px;height:31px;color:var(--orange)}.brand-light{font-weight:400;margin-left:7px;font-size:18px;letter-spacing:1.4px}.status{display:flex;align-items:center;gap:10px;color:#d9dfe6;font-size:12px;letter-spacing:.3px}.status>span{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px #ff934d0c}.intro{text-align:center;padding-top:54px;animation:appear .9s both}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--orange);display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 20px}.eyebrow>span{width:22px;height:1px;background:var(--orange)}h1{font-size:clamp(42px,5.1vw,70px);letter-spacing:-2px;margin:0;font-weight:800;line-height:1.08}h1>span{display:block;font-size:clamp(19px,2.25vw,29px);font-weight:400;letter-spacing:-.4px;margin-top:13px}.description{color:var(--muted);font-size:15px;line-height:1.8;margin:21px auto 0}.scene{height:342px;position:relative;overflow:hidden;margin-top:6px;background:linear-gradient(0deg,#29344744,transparent 72%)}.landscape{position:absolute;width:100%;height:280px;bottom:63px}.clouds{animation:clouds 50s ease-in-out infinite alternate}.road{position:absolute;bottom:45px;height:58px;width:100%;background:linear-gradient(#131e2b,#182332);border-top:1px solid #6b778133;border-bottom:1px solid #73808d19}.road-line{position:absolute;top:32px;left:-100px;width:calc(100% + 200px);height:2px;background:repeating-linear-gradient(90deg,#a5afb64d 0 54px,transparent 54px 150px);animation:road 3s linear infinite}.truck-position{position:absolute;bottom:66px;left:50%;width:min(850px,90vw);margin-left:calc(min(850px,90vw)/-2);animation:drive var(--cycle) infinite;will-change:transform}.truck{display:block;width:100%;overflow:visible}.wheel-spin{animation:spin var(--cycle) linear infinite}.chassis{animation:suspension 1.7s ease-in-out infinite}.scene-caption{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:space-between;font-size:9px;color:#7f8d9e;letter-spacing:1.6px}.scene-caption i{font-style:normal;margin:0 10px;color:var(--orange)}.route-decoration{color:#758395}.services{display:grid;grid-template-columns:repeat(3,1fr);padding:29px 0 32px}.service{display:flex;gap:21px;padding:8px 28px;border-left:1px solid #ffffff13;animation:appear .9s .2s both}.service:first-child{padding-left:0;border:0}.service:last-child{padding-right:0}.service svg{width:33px;height:33px;flex:none;margin-top:18px;stroke:var(--orange);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.service-number{font-size:9px;letter-spacing:1.7px;color:#8a97a8}.service h2{font-size:17px;line-height:1.45;font-weight:400;margin:9px 0 0}.footer{border-top:1px solid #ffffff12;padding:23px 0 26px;display:flex;justify-content:space-between;font-size:10px;color:#8491a2;letter-spacing:.2px}a:focus-visible{outline:2px solid var(--orange);outline-offset:8px}
/* В начале цикла машина уже в кадре; затем выезд, возврат за экраном и остановка. */


@keyframes clouds{to{transform:translate3d(45px,0,0)}}@keyframes suspension{50%{transform:translateY(.6px)}}@keyframes appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1440px){.intro{padding-top:64px}.scene{height:360px}.services{padding-top:36px;padding-bottom:39px}}
@media(max-width:800px){.wrap{width:calc(100% - 56px)}.header{height:88px}.intro{padding-top:47px}.scene{height:300px}.service{gap:13px;padding-inline:18px}.service h2{font-size:15px}.service-number{font-size:8px;letter-spacing:1px}.service svg{width:28px}.description{font-size:14px}}
@media(max-width:520px){.wrap{width:calc(100% - 40px)}.header{height:80px}.brand{font-size:21px;gap:8px}.brand svg{width:30px}.brand-light{font-size:13px;letter-spacing:1px;margin-left:5px}.status{font-size:10px;gap:8px}.intro{padding-top:42px}.eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:19px}h1{font-size:43px;letter-spacing:-1.6px}h1>span{font-size:20px;line-height:1.4;max-width:290px;margin:12px auto 0}.description{font-size:13px;line-height:1.8;max-width:320px;margin-top:17px}.desktop-break{display:none}.scene{height:228px;margin-top:12px}.landscape{height:180px;bottom:57px;opacity:.8}.truck-position{width:106vw;margin-left:-53vw;bottom:63px}.road{bottom:42px;height:43px}.road-line{top:26px}.scene-caption{font-size:7px;letter-spacing:1px;bottom:15px}.route-decoration{display:none}.services{grid-template-columns:1fr;padding:12px 0 19px}.service,.service:first-child,.service:last-child{padding:17px 0;gap:19px;border-left:0;border-bottom:1px solid #ffffff10;align-items:center}.service:last-child{border-bottom:0}.service svg{margin:0;width:29px;height:29px}.service h2{font-size:15px;margin-top:5px}.service h2 br{display:none}.service-number{font-size:8px;letter-spacing:1.3px}.footer{font-size:9px;padding-top:20px;gap:15px}.footer>span:last-child{max-width:140px;text-align:right;line-height:1.6}}
/* Отключение движения распространяется также на облака, колёса и появление текста. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.truck-position{transform:translate3d(0,0,0)}}

/* Обновлённая композиция: крупнее автопоезд, спокойнее типографика и больше воздуха. */
.intro{padding-top:43px}
.eyebrow{letter-spacing:2px;color:#d8a982}
.description{color:#b0bac6}
.scene{height:382px;margin-top:2px;background:radial-gradient(ellipse at 55% 62%,#52617120,transparent 65%),linear-gradient(0deg,#29344744,transparent 72%)}
.truck-position{width:min(1040px,94vw);margin-left:calc(min(1040px,94vw)/-2);bottom:58px}
.landscape{opacity:.72}
.service-number{color:#a4afbd}
.service{transition:background-color .25s}
.service:hover{background-color:#ffffff03}
.footer{align-items:center;color:#a3aebb;line-height:1.7}
.legal-name{text-align:right;font-size:10px}
.wheel-spin{transform-box:view-box;transform-origin:0 0}
.motion-toggle{position:absolute;width:1px;height:1px;opacity:0;bottom:10px;right:50px}
.motion-control{display:flex;align-items:center;gap:9px;cursor:pointer;color:#aab6c4;min-height:28px;letter-spacing:.5px;font-size:10px}
.pause-icon{width:8px;height:9px;border-inline:2px solid currentColor}
.scene-caption{align-items:center;bottom:9px}
.motion-toggle:checked~.truck-position,.motion-toggle:checked~.truck-position *,.motion-toggle:checked~.road *,.motion-toggle:checked~.landscape *{animation-play-state:paused}
.motion-toggle:checked~.scene-caption .motion-control{color:var(--orange)}
.motion-toggle:checked~.scene-caption .pause-icon{border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.motion-toggle:focus-visible~.scene-caption .motion-control{outline:2px solid var(--orange);outline-offset:5px}
/* Одинаковые кривые разгона у кузова и колёс; разметка также замирает на остановке. */


.road-line{left:-1200px;width:calc(100% + 2400px);animation:road var(--cycle) infinite}

@media(min-width:1440px){.intro{padding-top:47px}.scene{height:405px}.services{padding-top:27px;padding-bottom:30px}}
@media(max-width:800px){.intro{padding-top:38px}.scene{height:328px}.eyebrow{font-size:9px;letter-spacing:1.6px}.footer{gap:24px}.legal-name{max-width:300px}}
@media(max-width:520px){.intro{padding-top:34px}.eyebrow{font-size:8px;letter-spacing:1.05px;gap:7px}.eyebrow>span{width:12px}h1{font-size:44px}.scene{height:225px;margin-top:4px}.truck-position{width:102vw;margin-left:-51vw;bottom:57px}.scene-caption>span{font-size:6px;letter-spacing:.7px}.scene-caption i{margin-inline:4px}.motion-control{font-size:8px;gap:6px}.pause-icon{height:8px;width:7px}.footer{align-items:flex-start;gap:20px}.footer>span:last-child{max-width:215px;font-size:8px}.legal-name br{display:none}.services{padding-top:7px}.service,.service:first-child,.service:last-child{padding-block:16px}}
@media(prefers-reduced-motion:reduce){.motion-toggle,.motion-control{display:none}.truck-position{will-change:auto}}

/* Фирменная система: графит, тёплый белый и сигнальный оранжевый. */
:root{--bg:#182126;--text:#f4f3ef;--muted:#aab1b4;--orange:#ff5a1f}
body{background:radial-gradient(ellipse at 70% 39%,#46505655,transparent 55%),var(--bg)}
.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}
.brand{gap:13px}.brand svg{width:56px;height:48px}
.brand-word{font-size:36px;line-height:.9;letter-spacing:1px;font-weight:900}
.brand-word small{display:block;font-size:7px;line-height:1.35;letter-spacing:1.25px;font-weight:600;margin-top:6px}
.intro{padding-top:38px}.eyebrow{color:#aab2b6}
h1{font-size:clamp(40px,4.5vw,62px);line-height:1.02;letter-spacing:-2px;font-weight:900}
h1 em{font-style:normal;color:var(--orange)}
.description{margin-top:20px;color:#b9bfc2;font-size:14px}
.scene{background:radial-gradient(ellipse at 55% 62%,#69716e20,transparent 65%),linear-gradient(0deg,#2b363b44,transparent 72%)}
.road{background:linear-gradient(#192328,#202b30)}
.landscape{opacity:.9}
.service-number{color:#ff8655;letter-spacing:1.6px}.service svg{stroke:var(--orange)}
@media(min-width:1440px){.intro{padding-top:38px}.scene{height:385px}}
@media(max-width:800px){.intro{padding-top:34px}.brand svg{width:46px;height:41px}.brand-word{font-size:30px}.brand-word small{font-size:6px}}
@media(max-width:520px){.brand{gap:9px}.brand svg{width:42px;height:37px}.brand-word{font-size:28px}.brand-word small{font-size:5.5px;letter-spacing:.8px}.intro{padding-top:30px}h1{font-size:39px;letter-spacing:-1.6px}.eyebrow{font-size:7px;letter-spacing:1px}.description{font-size:12px;max-width:320px}.scene{height:230px}.scene-caption>span{font-size:5.6px;letter-spacing:.35px}.service-number{font-size:8px;letter-spacing:1.2px}}
@media(max-width:520px){h1{font-size:clamp(28px,8.5vw,34px);letter-spacing:-1.1px}}
/* На телефоне показываем левый ангар целиком с активной четвёртой дверью. */
@media(max-width:520px){.landscape{width:864px;left:0;right:auto}}

/* Цикл 18 секунд: суммарная остановка 8,1 с, проезд 9,9 с. */
@keyframes drive{0%,25%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.55,0,.8,.65)}55%{transform:translate3d(calc(50vw + 100%),0,0)}55.01%{transform:translate3d(calc(-50vw - 100%),0,0);animation-timing-function:cubic-bezier(.15,.35,.15,1)}80%,100%{transform:translate3d(0,0,0)}}
@keyframes spin{0%,25%{transform:rotate(0);animation-timing-function:cubic-bezier(.55,0,.8,.65)}55%{transform:rotate(1440deg)}55.01%{transform:rotate(1440deg);animation-timing-function:cubic-bezier(.15,.35,.15,1)}80%,100%{transform:rotate(2880deg)}}
@keyframes road{0%,25%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.55,0,.8,.65)}55%{transform:translate3d(-600px,0,0)}55.01%{transform:translate3d(-600px,0,0);animation-timing-function:cubic-bezier(.15,.35,.15,1)}80%,100%{transform:translate3d(-1200px,0,0)}}
/* Небольшой жест от плеча; общая пауза и reduced-motion действуют и на руку. */
.worker-arm{transform-origin:4px 10px;animation:worker-gesture 6s ease-in-out infinite}
@keyframes worker-gesture{0%,25%,75%,100%{transform:rotate(0)}45%,55%{transform:rotate(-10deg)}}
.service svg{width:38px;height:38px;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
@media(max-width:800px){.service svg{width:32px;height:32px}}