/* ===== Концепции «карго-компания + ML-135» (mockups/cargo). База — base.css, копия mockups/ml-135/site.css ===== */
:root{--ply:#A9866C;--ply-l:#C3A386;--ply-d:#7D6250;--paper:#E7DDC9;--ink:#231C14}

/* полоса макета */
.mk-bar{border-bottom:1px dashed var(--line);background:var(--bg);font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mk-bar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.mk-bar b{color:var(--text);font-weight:500}
.mk-bar nav{display:flex;gap:6px;align-items:center;flex:none}
.mk-bar nav a{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border:1px solid var(--line);border-radius:3px;color:var(--text)}
.mk-bar nav a.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mk-bar nav a:hover{border-color:var(--silver)}

/* бренд компании: названия пока нет */
.brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.brand-plate{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1.5px solid var(--silver);border-radius:3px;font:700 20px/1 var(--head);letter-spacing:.1em;text-transform:uppercase}
.brand-plate i{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:0;color:var(--muted)}
.brand small{font:500 11px/1.25 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);max-width:118px}
.hdr .nav{gap:24px}

/* общее */
.k-kicker{font:500 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.k-lead{font-size:18px;line-height:1.55;color:#C9D1D8;max-width:640px}
.k-btns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.k-sec{padding:96px 0}
.k-head{display:grid;grid-template-columns:1fr 440px;align-items:end;gap:40px;margin-bottom:36px}
.k-head h2{font-size:80px}
.k-head p{color:#C9D1D8}
.flag{display:inline-flex;align-items:center;padding:2px 7px;border:1px dashed var(--muted);border-radius:4px;font:500 11px/1.3 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--muted);vertical-align:middle;white-space:nowrap}

/* ===== 1. Карго с витриной ===== */
.k1-hero{padding:52px 0 0}
.k1-grid{display:grid;grid-template-columns:1fr 430px;gap:56px;align-items:center}
.k1-hero h1{font-size:112px;margin:16px 0 22px}
.k1-hero h1 span{display:block;color:var(--accent)}
.k-prod-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding-bottom:4px;border-bottom:1px solid var(--line);font:500 14px/1.3 var(--mono);color:var(--muted)}
.k-prod-link b{font-weight:500;color:var(--text)}
.k-prod-link:hover{color:var(--accent);border-color:var(--accent)}
.k1-photo{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.k1-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:45% 50%}
.k1-photo figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.k1-photo figcaption b{font-weight:500;color:var(--accent)}
.route{position:relative;margin-top:40px;padding:20px 24px 12px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--surface),rgba(20,26,31,0))}
.route svg{display:block;width:100%;height:auto;overflow:visible}
.route .r-base{fill:none;stroke:var(--line);stroke-width:1.5}
.route .r-live{fill:none;stroke:var(--accent);stroke-width:2}
.route .r-node{fill:var(--bg);stroke:var(--muted);stroke-width:1.5;transition:fill .3s,stroke .3s}
.route .r-node.done{fill:var(--accent);stroke:var(--accent)}
.route .r-hubdot{fill:var(--muted)}
.route text{font:500 11px var(--mono);letter-spacing:.06em;fill:var(--muted);text-transform:uppercase}
.route text.hub{fill:#C9D1D8;transition:fill .3s}
.route text.hub.on{fill:var(--accent)}
.route text.big{font:700 16px var(--head);letter-spacing:.06em;fill:var(--text)}
.route .r-dot{fill:var(--accent)}
.route .r-halo{fill:var(--accent);opacity:.22}
.r-day{position:absolute;right:24px;top:14px;font:500 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.r-day b{font:500 26px/1 var(--mono);color:var(--text);margin-right:6px;letter-spacing:-.02em}
.route-m{display:none}
.k1-prod{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.k1-prod-img{display:grid;place-items:center;padding:40px;background:radial-gradient(60% 55% at 50% 62%,rgba(56,189,240,.14),transparent 70%),linear-gradient(180deg,#121820,#0C0F12)}
.k1-prod-img img{width:100%;max-width:520px}
.k1-prod-body{display:flex;flex-direction:column;align-items:flex-start;padding:44px 44px 40px}
.k1-prod-body h2{font-size:56px;margin:14px 0 24px}
.k-figs{list-style:none;display:flex;gap:30px;margin-bottom:26px}
.k-figs b{display:block;font:500 30px/1 var(--mono);letter-spacing:-.02em}
.k-figs span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.k-price{margin-bottom:24px}
.k-price strong{display:block;font:500 46px/1 var(--mono);letter-spacing:-.03em}
.k-price span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* ===== 2. Один груз от склада до двери ===== */
.k2-hero{padding:46px 0 0}
.k2-hero h1{font-size:78px;margin:16px 0 20px}
.k2-hero h1 span{display:block;color:var(--accent)}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.door{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);transition:border-color .2s}
.door:hover{border-color:var(--accent)}
.door-media{position:relative;display:block;height:210px;overflow:hidden;border-bottom:1px solid var(--line)}
.door-media img{width:100%;height:100%;object-fit:cover}
.door-media--studio{background:radial-gradient(60% 70% at 50% 72%,rgba(56,189,240,.16),transparent 70%),linear-gradient(180deg,#121820,#0C0F12)}
.door-media--studio img{object-fit:contain;padding:18px 0 10px}
.door-media--photo img{object-position:50% 46%}
.door-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 24px 24px}
.door-k{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.door-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font:700 40px/.95 var(--head);text-transform:uppercase}
.door-t em{font:500 30px/1 var(--mono);font-style:normal;letter-spacing:-.02em}
.door-l{font-size:15px;color:#C9D1D8}
.door .btn{margin-top:12px}
.k2-down{display:flex;align-items:center;gap:12px;margin-top:22px;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.k2-down::before{content:"";width:40px;height:1px;background:var(--accent)}

.path{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:stretch;--p:0}
.path-stops{list-style:none;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.path-stops::before,.path-stops::after{content:"";position:absolute;left:21px;top:38px;width:2px;background:var(--line)}
.path-stops::before{bottom:38px}
.path-stops::after{height:calc((100% - 76px) * var(--p));background:var(--accent);transition:height .5s}
.path-stops button{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:center;width:100%;text-align:left;padding:14px 12px 14px 0;border-radius:8px}
.path-stops i{grid-row:span 2;position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);font:500 13px/1 var(--mono);font-style:normal;color:var(--muted);transition:background .3s,border-color .3s,color .3s}
.path-stops b{font:700 26px/1.05 var(--head);text-transform:uppercase;color:var(--muted);transition:color .3s}
.path-stops span{font-size:14px;line-height:1.4;color:var(--muted)}
.path-stops button:hover b{color:#C9D1D8}
.path-stops button.done i{border-color:var(--accent);color:var(--accent)}
.path-stops button.on i{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.path-stops button.on b{color:var(--text)}
.path-stops button.on span{color:#C9D1D8}
.path-stage{position:relative;min-height:460px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:36px 40px;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.scene.on{opacity:1;visibility:visible}
.pay-rows{display:grid;gap:12px;margin-top:18px}
.pay-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 22px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.pay-rows>div:first-child{border-color:var(--accent);background:linear-gradient(160deg,var(--xsoft),transparent 70%),var(--bg)}
.pay-rows strong{font:500 34px/1 var(--mono);letter-spacing:-.02em}
.pay-rows span{font-size:15px;color:#C9D1D8;text-align:right}
.scene--photo{padding:0;justify-content:flex-end}
.scene--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.scene-cap{position:relative;font-size:15px;line-height:1.5;color:#C9D1D8}
.scene-cap b{display:block;margin-bottom:6px;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.scene--photo .scene-cap{margin:0;padding:60px 36px 28px;background:linear-gradient(0deg,rgba(12,15,18,.94) 30%,rgba(12,15,18,0));color:var(--text)}
.board{margin-top:18px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font:500 15px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.board-row{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-top:1px dashed var(--line);color:var(--muted);transition:color .3s,background .3s}
.board-row:first-child{border-top:0}
.board-row.head{padding:12px 22px;font-size:11px}
.board-row b{font-weight:500;color:#C9D1D8}
.board-row.on{background:var(--xsoft)}
.board-row.on b,.board-row.on span{color:var(--accent)}
.board-row.on span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.scene-note{margin-top:16px;font-size:15px;color:#C9D1D8}
.scene--crate{align-items:center;justify-content:center;gap:18px;padding:28px 40px 30px}
.scene--crate .scene-cap{align-self:stretch}
.scene-cap a{color:var(--accent)}
.crate{position:relative;width:min(470px,100%);aspect-ratio:1.42}
.crate-back,.crate-front{position:absolute;left:5%;right:5%;top:15%;bottom:13%;border-radius:2px}
.crate-back{background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 46px),linear-gradient(180deg,#7A604D,#5A4637);box-shadow:inset 0 0 0 12px #4E3D31,inset 0 26px 40px rgba(0,0,0,.35)}
.crate-mach{position:absolute;left:14%;width:72%;bottom:12%;opacity:0;transform:translateY(5%) scale(.95);transition:opacity .7s .35s,transform .9s .35s cubic-bezier(.2,.7,.2,1)}
.crate-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 46px),linear-gradient(180deg,var(--ply-l),var(--ply));box-shadow:inset 0 0 0 12px var(--ply-d),inset 0 0 0 13px rgba(0,0,0,.25);color:#3A2C21;transform-origin:50% 100%;transition:transform .9s cubic-bezier(.6,0,.3,1),opacity .7s .2s}
.crate-front::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:12px;margin-top:-6px;background:var(--ply-d);transform:rotate(-17deg);opacity:.85}
.crate-sten{position:relative;font:700 54px/1 var(--head);letter-spacing:.08em}
.crate-sub{position:relative;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.crate-lid{position:absolute;left:2.5%;right:2.5%;top:9%;height:7%;border-radius:2px;background:linear-gradient(180deg,var(--ply-l),var(--ply-d));transition:transform .8s cubic-bezier(.6,0,.3,1),opacity .6s .2s}
.crate-pallet{position:absolute;left:3%;right:3%;bottom:4%;height:9%;background:linear-gradient(90deg,var(--ply-d) 0 9%,transparent 9% 45.5%,var(--ply-d) 45.5% 54.5%,transparent 54.5% 91%,var(--ply-d) 91%),linear-gradient(180deg,var(--ply) 0 34%,transparent 34%)}
.crate.open .crate-front{transform:translateY(18%) rotateX(78deg);opacity:0}
.crate.open .crate-lid{transform:translateY(-120%) rotate(-4deg);opacity:0}
.crate.open .crate-mach{opacity:1;transform:none}

/* ===== 3. Витрина карго: Лот № 1 ===== */
.svc .svc-cargo{color:var(--accent)}
.k3-crumbs{display:flex;gap:10px;padding-top:22px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.k3-crumbs i{font-style:normal;opacity:.5}
.k3-crumbs span{color:var(--text)}
.k3-grid{display:grid;grid-template-columns:1fr 450px;gap:48px;align-items:start;padding:18px 0 56px}
.lot{position:relative}
.lot-main{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lot-main img{width:100%;aspect-ratio:4/3;object-fit:cover}
.lot-no{position:absolute;left:16px;top:16px;padding:8px 12px;border-radius:4px;background:rgba(12,15,18,.82);border:1px solid var(--line);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.lot-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.lot-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--line);opacity:.6}
.lot-thumbs img.on{opacity:1;border-color:var(--accent)}
.tag{position:absolute;right:-30px;top:-14px;z-index:3;width:244px;padding:34px 20px 54px;border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 22px 44px rgba(0,0,0,.5);transform:rotate(4deg);transform-origin:50% 0;font:500 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(2deg)}}
.tag::before{content:"";position:absolute;left:50%;top:11px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 3px #C9BBA0}
.tag-string{position:absolute;left:50%;top:-58px;width:70px;height:72px;margin-left:-6px;pointer-events:none}
.tag-string path{fill:none;stroke:#C9BBA0;stroke-width:2}
.tag-k{display:block;color:#6B5D4B}
.tag-t{display:block;margin:2px 0 10px;font:700 34px/1 var(--head);letter-spacing:.06em}
.tag dl{display:grid;gap:7px}
.tag dl div{display:flex;justify-content:space-between;gap:10px;padding-top:7px;border-top:1px dashed #BFB197}
.tag dt{color:#6B5D4B}
.tag dd{text-align:right}
.tag dd.hub{transition:opacity .3s}
.stamp{position:absolute;right:18px;bottom:14px;padding:7px 10px;border:2px solid var(--signal);border-radius:4px;background:rgba(231,221,201,.9);color:var(--signal);font:700 15px/1 var(--head);letter-spacing:.12em;transform:rotate(-10deg);animation:stampIn .45s .7s both}
@keyframes stampIn{from{opacity:0;transform:rotate(-10deg) scale(1.9)}to{opacity:1;transform:rotate(-10deg) scale(1)}}
.lot-buy{position:relative;padding:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.lot-buy h1{font-size:76px;margin:12px 0 4px}
.lot-buy h1 span{display:block;font-size:38px;color:var(--accent);margin-top:6px}
.lot-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:18px 0 16px;font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.lot-status i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.lot-buy .price{margin:20px 0 18px}
.lot-buy .btn{width:100%}
.lot-buy .btn+.btn{margin-top:10px}
.lot-note{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.seller{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.seller-row{display:grid;grid-template-columns:repeat(4,1fr)}
.seller-row>div{padding:22px 24px;border-left:1px solid var(--line)}
.seller-row>div:first-child{border-left:0;padding-left:0}
.seller-row span{display:block;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.seller-row b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;font:700 24px/1.05 var(--head);text-transform:uppercase}

@media (prefers-reduced-motion:reduce){.tag,.stamp,.board-row.on span::before{animation:none}.crate *,.scene,.path-stops::after{transition:none!important}}

@media (max-width:760px){
  .mk-bar .container{min-height:30px;font-size:10px}
  .mk-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand small{display:none}
  .brand-plate{height:32px;font-size:17px}
  .k-lead{font-size:16px}
  .k-btns{flex-direction:column}.k-btns .btn{width:100%}
  .k-sec{padding:64px 0}
  .k-head{grid-template-columns:1fr;gap:12px;margin-bottom:22px}
  .k-head h2{font-size:46px}
  /* 1 */
  .k1-hero{padding-top:24px}
  .k1-grid{grid-template-columns:1fr;gap:26px}
  .k1-hero h1{font-size:54px;margin:12px 0 16px}
  .k1-photo img{aspect-ratio:6/5}
  .route{display:none}
  .route-m{display:block;list-style:none;position:relative;margin-top:24px;padding:18px 18px 4px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
  .route-m::before{content:"";position:absolute;left:28px;top:30px;bottom:34px;width:2px;background:linear-gradient(180deg,var(--accent),var(--line))}
  .route-m li{position:relative;padding:0 0 16px 30px}
  .route-m li::before{content:"";position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);background:var(--bg)}
  .route-m b{display:block;font:700 20px/1.1 var(--head);text-transform:uppercase}
  .route-m span{display:block;margin-top:2px;font:500 12px/1.4 var(--mono);color:var(--muted)}
  .k1-prod{grid-template-columns:1fr}
  .k1-prod-img{padding:24px}
  .k1-prod-body{padding:24px 20px}
  .k1-prod-body h2{font-size:36px}
  .k-figs{gap:20px}.k-figs b{font-size:24px}
  .k-price strong{font-size:38px}
  .k1-prod-body .btn{width:100%}
  /* 2 */
  .k2-hero{padding-top:24px}
  .k2-hero h1{font-size:44px;margin:12px 0 14px}
  .doors{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .door-media{height:180px}
  .door-body{padding:18px 18px 20px}
  .door-t{font-size:32px}.door-t em{font-size:24px}
  .door .btn{width:100%}
  .path{grid-template-columns:1fr;gap:12px}
  .path-stops{flex-direction:row;gap:6px;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .path-stops::before,.path-stops::after{display:none}
  .path-stops li{flex:none}
  .path-stops button{grid-template-columns:auto;column-gap:0;row-gap:6px;padding:10px 12px;border:1px solid var(--line);width:auto;min-width:140px}
  .path-stops i{grid-row:auto;width:32px;height:32px;font-size:12px}
  .path-stops b{font-size:18px}
  .path-stops span{display:none}
  .path-stops button.on{border-color:var(--accent)}
  .path-stage{min-height:420px}
  .scene{padding:22px 18px}
  .pay-rows>div{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px}
  .pay-rows strong{font-size:28px}
  .pay-rows span{text-align:left;font-size:14px}
  .scene--photo .scene-cap{padding:48px 18px 20px}
  .board-row{padding:14px 16px;font-size:13px}
  .scene--crate{padding:20px 18px}
  .crate-sten{font-size:36px}
  /* 3 */
  .k3-grid{grid-template-columns:1fr;gap:26px;padding-top:14px}
  .tag{right:-4px;top:-8px;width:150px;padding:26px 12px 44px;font-size:10px}
  .tag-t{font-size:24px;margin-bottom:4px}
  .tag dl div:not(:last-child){display:none}
  .tag dl div{padding-top:4px}
  .tag-string{display:none}
  .stamp{font-size:11px;right:12px;bottom:12px;padding:5px 7px}
  .lot-thumbs{gap:6px}
  .lot-buy{padding:22px 18px}
  .lot-buy h1{font-size:56px}
  .lot-buy h1 span{font-size:30px}
  .seller-row{grid-template-columns:1fr 1fr}
  .seller-row>div{padding:16px 0 16px 16px}
  .seller-row>div:nth-child(odd){border-left:0;padding-left:0}
  .seller-row>div:nth-child(n+3){border-top:1px solid var(--line)}
  .seller-row b{font-size:19px}
}