:root{
  --ground:#0A0A0B;
  --surface:#131314;
  --raised:#1B1B1D;
  --ink:#F4F1EC;
  --muted:#9D958B;
  --line:#2A2A2D;
  --line-soft:#1F1F22;
  --accent:#FF6B00;
  --accent-soft:#FFA463;
  --ok:#5FB87F;
  --warn:#D9A440;
  --crit:#E35A3A;
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:clip}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;margin:0;line-height:1;text-wrap:balance}
h1{font-size:clamp(38px,8.4vw,112px);font-weight:900;letter-spacing:-.035em;text-transform:uppercase}
h2{font-size:clamp(28px,5vw,66px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
h3{font-size:clamp(17px,1.7vw,21px);font-weight:700;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:22px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.eyebrow.dim{color:var(--muted)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--muted);max-width:60ch}

/* ── header ─────────────────────────────── */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(10,10,11,.72);backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;gap:26px;min-height:68px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand svg{height:21px;width:auto;color:var(--ink)}
.lang{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-decoration:none;color:var(--muted);border:1px solid var(--line);padding:7px 11px}
.lang:hover{color:var(--ink);border-color:var(--line-strong,#45454A)}
.nav-links + .lang{margin-left:0}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:13.5px}
.nav-links a{text-decoration:none;color:var(--muted);padding-block:8px}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:Archivo,sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.03em;padding:14px 26px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.btn-primary{background:var(--accent);color:#0A0A0B;border-color:var(--accent)}
.btn-primary:hover{background:#fff;border-color:#fff}
.btn-ghost{border-color:#45454A;color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}
.btn-sm{padding:10px 18px;font-size:13px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── пролёт: небо → Астана → трасса ─────── */
.journey{position:relative;height:360vh}
.stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
.scene{position:absolute;inset:0;z-index:-3}
.scene img{width:100%;height:100%;object-fit:cover;will-change:transform,opacity}
.scene.film{opacity:0;transition:opacity .6s ease}
.scene.film.on{opacity:1}
.scene.film video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.8)}
.scene.sky img{filter:saturate(.95) brightness(.85)}
.scene.city img{filter:saturate(.8) brightness(.72);opacity:0}
.scene.steppe img{filter:saturate(.78) brightness(.68);opacity:0}
.stage-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(10,10,11,.76) 0%,rgba(10,10,11,.12) 32%,rgba(10,10,11,.62) 72%,var(--ground) 100%),
  linear-gradient(90deg,rgba(10,10,11,.8) 0%,rgba(10,10,11,.05) 62%)}

/* машина, которая едет сквозь все сцены */
.rig{position:absolute;z-index:-2;left:0;bottom:13%;width:min(46vw,620px);will-change:transform;pointer-events:none}
.rig img{width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55)) brightness(.92) saturate(.9)}
.rig .dust{position:absolute;right:88%;bottom:3%;width:62%;height:42%;opacity:0;
  background:radial-gradient(60% 100% at 100% 70%,rgba(232,180,87,.5),rgba(232,180,87,0) 72%);filter:blur(10px)}

.copy{position:relative;z-index:1;width:100%;padding-block:0 clamp(30px,5vw,66px)}
.copy .slide{position:absolute;left:0;right:0;bottom:clamp(30px,5vw,66px);padding-inline:22px;opacity:0;transform:translateY(22px);will-change:transform,opacity;transition:transform .45s cubic-bezier(.16,.9,.24,1)}
.copy .slide.is-on{opacity:1;transform:none}
.copy .inner{width:100%;max-width:1240px;margin:0 auto}
.copy h1{margin-top:18px;max-width:15ch}
.copy h1 em{font-style:normal;color:var(--accent);white-space:nowrap}
.copy .lead{margin-top:22px}
/* третий экран живёт у правого края: оттуда выезжает, там и остаётся */
.copy .slide[data-slide="2"] .inner{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.copy .slide[data-slide="2"] h1{max-width:14ch}
.copy .slide[data-slide="2"] .lead{max-width:46ch}
@media (max-width:760px){
  .copy .slide[data-slide="2"] .inner{align-items:flex-start;text-align:left}
  .copy .slide[data-slide="2"] h1,.copy .slide[data-slide="2"] .lead{max-width:none}
}
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scroll-hint::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(180deg,var(--accent),transparent)}

/* без анимаций — просто собранная сцена */
@media (prefers-reduced-motion:reduce){
  .journey{height:auto}
  .stage{position:relative;height:auto;min-height:0;padding-block:clamp(90px,14vw,170px) clamp(30px,5vw,60px)}
  .scene.city img,.scene.steppe img{opacity:0}
  .rig{position:relative;z-index:0;margin-left:6%;bottom:0;width:min(60vw,560px)}
  .copy .slide{position:relative;bottom:auto;opacity:1;transform:none;padding-inline:0}
  .copy .slide + .slide{margin-top:34px}
  .scroll-hint{display:none}
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.facts{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fact{padding:26px 26px 26px 0;border-right:1px solid var(--line-soft)}
.fact:last-child{border-right:0}
.fact b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em}
.fact span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}

/* ── sections ───────────────────────────── */
section{padding-block:clamp(64px,8vw,130px)}
.sec-head{max-width:76ch}
.sec-head h2{margin-top:16px}
.sec-head .lead{margin-top:22px}
.rule{height:1px;background:var(--line);margin:0}

/* боли */
.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));margin-top:52px;border-top:1px solid var(--line)}
.pain{padding:30px 28px 30px 0;border-bottom:1px solid var(--line-soft)}
.pain h3{margin-top:14px}
.pain p{margin-top:12px;color:var(--muted);font-size:14.5px}

/* фото-полоса */
.band{position:relative;isolation:isolate;min-height:min(62vh,520px);display:flex;align-items:flex-end;overflow:hidden}
.band img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.62);will-change:transform}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.55),rgba(10,10,11,.2) 40%,rgba(10,10,11,.92))}
.band-in{padding-block:clamp(40px,6vw,72px)}
.band h2{max-width:15ch}
.band p{margin-top:18px;max-width:52ch;color:#D8D2C9;font-size:clamp(15px,1.3vw,18px)}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:34px;margin-top:56px}
.step{display:flex;flex-direction:column}
.step-img{aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.step-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.8);will-change:transform}
.step:hover .step-img img{transform:scale(1.04)}
.step .n{margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.2em;color:var(--accent)}
.step h3{margin-top:12px}
.step p{margin-top:12px;color:var(--muted);font-size:14.5px}
.step ul{margin:16px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.step li{margin-top:7px}

/* модули */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:1px;margin-top:52px;background:var(--line-soft);border:1px solid var(--line-soft)}
.mod{background:var(--ground);padding:28px 24px;transition:background .2s}
.mod:hover{background:var(--surface)}
.mod .tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.mod h3{margin-top:12px;font-size:17px}
.mod p{margin-top:10px;color:var(--muted);font-size:14px}

/* телеграм */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:52px}
.split-media{position:relative;aspect-ratio:4/5;overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.72);will-change:transform}
.bots{display:flex;flex-direction:column;gap:22px}
.bot{border:1px solid var(--line);padding:22px;background:var(--surface)}
.bot h3{font-size:16px}
.bot .who{margin-top:4px;font-size:13px;color:var(--muted)}
.msg{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.bubble{font-size:13.5px;padding:10px 13px;border-radius:12px 12px 12px 3px;background:var(--raised);max-width:92%;color:#DED8CF}
.bubble.out{align-self:flex-end;border-radius:12px 12px 3px 12px;background:rgba(255,107,0,.16);border:1px solid rgba(255,107,0,.38);color:var(--ink)}

/* контроль */
.control{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:52px}
.checks{border:1px solid var(--line)}
.check{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid var(--line-soft);font-size:14px}
.check:last-child{border-bottom:0}
.sev{flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-radius:50%}
.sev-crit{background:var(--crit)}.sev-warn{background:var(--warn)}.sev-ok{background:var(--ok)}
.check em{font-style:normal;display:block;margin-top:3px;color:var(--muted);font-size:13px}

/* цены */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:52px;align-items:stretch}
.plan{border:1px solid var(--line);background:var(--surface);padding:30px 26px;display:flex;flex-direction:column;gap:20px}
.plan.featured{border-color:var(--accent);background:linear-gradient(180deg,rgba(255,107,0,.08),transparent 55%),var(--surface)}
.plan .name{font-family:Archivo,sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:-.01em}
.plan .who{margin-top:6px;font-size:13.5px;color:var(--muted)}
.price{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(28px,3vw,36px);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.price small{display:block;margin-top:6px;font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:13px;color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;color:#D8D2C9}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;background:var(--accent)}
.plan .btn{width:100%;margin-top:auto}
.price-note{margin-top:28px;font-size:14px;color:var(--muted);max-width:76ch}

.all-modules{margin-top:40px;border-top:1px solid var(--line-soft);padding-top:18px}
.all-modules summary{cursor:pointer;list-style:none;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.all-modules summary::-webkit-details-marker{display:none}
.all-modules summary::after{content:" +";color:var(--accent)}
.all-modules[open] summary::after{content:" –"}
.all-modules p{margin-top:14px;color:var(--muted);font-size:14px;max-width:78ch}

/* faq */
.faq{margin-top:46px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line-soft)}
summary{cursor:pointer;padding:22px 0;font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(16px,1.5vw,19px);list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:24px;line-height:1;flex:0 0 auto}
details[open] summary::after{content:"–"}
details p{padding-bottom:22px;color:var(--muted);font-size:15px;max-width:80ch}

/* финальный экран */
.final{position:relative;isolation:isolate;overflow:hidden}
.final img.bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.5)}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ground),rgba(10,10,11,.72) 45%,rgba(10,10,11,.95))}
.final .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(30px,4vw,64px);align-items:start}
.final p.lead{color:#D8D2C9;margin-top:20px}
.contacts{display:flex;flex-wrap:wrap;gap:22px;margin-top:32px;font-size:15px}
.contacts a{text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:3px}
.form{background:rgba(19,19,20,.86);border:1px solid var(--line);padding:26px;backdrop-filter:blur(6px)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input{font:inherit;font-size:15px;padding:13px 14px;color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:0}
.field input::placeholder{color:#6E675F}
.form .btn{width:100%}
.form-note{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ── сквозной маршрут: вид сверху, поверх всего ── */
.route-zone{position:relative}
.route-zone > section, .route-zone > .wrap{position:relative;z-index:1}
.route-svg{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.route-line{fill:none;stroke:rgba(244,241,236,.22);stroke-width:2;stroke-dasharray:14 16;stroke-linecap:round}
.route-done{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,107,0,.55))}
.rover{position:absolute;left:0;top:0;width:54px;height:auto;z-index:5;pointer-events:none;
  transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.route-zone .band{margin-inline:clamp(18px,7vw,120px);min-height:min(54vh,460px)}
.route-zone .band::after{border-radius:2px}
@media (max-width:760px){ .rover{width:38px} .route-line{stroke-dasharray:10 12} }
@media (prefers-reduced-motion:reduce){ .route-svg,.rover{display:none} }

/* Анимация появления — только поверх рабочего состояния: класс js-anim
   ставится скриптом ПОСЛЕ того, как маршрут действительно построен.
   Без него (ошибка, старый браузер, отключённый JS) весь текст виден сразу. */
.js-anim .sec-head:not(.is-lit),
.js-anim .convoy-head:not(.is-lit),
.js-anim .pain:not(.is-lit),
.js-anim .step:not(.is-lit),
.js-anim .mod:not(.is-lit),
.js-anim .plan:not(.is-lit),
.js-anim .check:not(.is-lit),
.js-anim .bot:not(.is-lit),
.js-anim .fact:not(.is-lit),
.js-anim .price-note:not(.is-lit){
  opacity:.08;
  transform:translate3d(var(--tx,0px),var(--ty,26px),0) scale(var(--ts,1))}
.js-anim .sec-head,.js-anim .convoy-head,.js-anim .pain,.js-anim .step,.js-anim .mod,
.js-anim .plan,.js-anim .check,.js-anim .bot,.js-anim .fact,.js-anim .price-note{
  transition:opacity .7s cubic-bezier(.16,.9,.24,1),transform .95s cubic-bezier(.16,.9,.24,1)}
.js-anim .mod:not(.is-lit){--ts:.94;--ty:60px}
.js-anim .plan:not(.is-lit){--ty:90px}
.js-anim .check:not(.is-lit){--tx:-160px;--ty:0px}
@media (prefers-reduced-motion:reduce){
  .js-anim .sec-head,.js-anim .convoy-head,.js-anim .pain,.js-anim .step,.js-anim .mod,
  .js-anim .plan,.js-anim .check,.js-anim .bot,.js-anim .fact,.js-anim .price-note{
    opacity:1!important;transform:none!important;transition:none}
}

/* ── колонна техники ────────────────────── */
.convoy{position:relative;padding:0;background:linear-gradient(180deg,#EFEBE4 0%,#FBF9F6 42%,#EFEBE4 100%);color:#17150F;overflow:hidden}
.convoy-head{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;padding-block:clamp(40px,5vw,66px) 0}
.convoy-head h2{color:#17150F;max-width:17ch}
.convoy-head p{color:#5C564D;font-size:15px;max-width:44ch}
.convoy-head .eyebrow{color:#C25100}
.lane{position:relative;margin-top:clamp(26px,3.5vw,44px);padding-bottom:clamp(40px,5vw,70px)}
.lane::after{content:"";position:absolute;left:0;right:0;bottom:clamp(30px,4vw,56px);height:2px;background:repeating-linear-gradient(90deg,#17150F 0 46px,transparent 46px 92px);opacity:.22}
.track{display:flex;align-items:flex-end;gap:clamp(56px,7vw,120px);width:max-content;will-change:transform}
.unit{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.unit img{height:clamp(104px,15.5vw,228px);width:auto;filter:drop-shadow(0 18px 22px rgba(23,21,15,.18))}
.unit .cap{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A8276;white-space:nowrap}
.unit .cap b{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;color:#17150F;margin-bottom:3px}
.convoy-fade{position:absolute;top:0;bottom:0;width:clamp(40px,8vw,140px);z-index:2;pointer-events:none}
.convoy-fade.l{left:0;background:linear-gradient(90deg,#EFEBE4,transparent)}
.convoy-fade.r{right:0;background:linear-gradient(270deg,#EFEBE4,transparent)}

footer{border-top:1px solid var(--line-soft);padding-block:30px;font-size:13px;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot svg{height:17px;width:auto;color:var(--muted)}

@media (max-width:760px){
  .journey{height:300vh}
  .rig{width:min(74vw,480px);bottom:17%}
  .scroll-hint{display:none}
  .copy h1{max-width:none}
}
@media (max-width:920px){
  .split,.control,.final .wrap{grid-template-columns:1fr}
  .split-media{aspect-ratio:16/10}
  .nav-links{display:none}
  .fact{border-right:0;padding-right:0;border-bottom:1px solid var(--line-soft)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}