/* ALASCOM · demonstratie vizuala a fluxului livrarii · 2026-10-30 */
.route-3d{background:radial-gradient(ellipse at 10% 25%,#173d51 0,#0a273a 54%,#081e2e 100%)}
.route-layout{grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,70px)}
.route-copy h2 em{font-style:normal;line-height:1.16}
.route-copy>p{max-width:460px}
.journey-benefits{display:grid;gap:14px;margin:23px 0 28px}
.journey-benefits>div{display:flex;align-items:center;gap:14px}
.journey-benefit-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(248,115,37,.14);border:1px solid rgba(255,140,65,.35);color:#ffa36d;font-weight:900;font-size:11px}
.journey-benefits strong{display:block;color:#fff;font-size:12px;line-height:1.5}
.journey-benefits small{display:block;font-size:11px;color:#aac3d1;line-height:1.5}
.journey-main-btn{background:#f57124;border-color:#f57124;font-size:12px;padding:12px 16px}
.journey-main-btn:hover{background:#ff8a41}
.journey-main-btn [data-journey-icon]{display:inline-block;font-size:14px;font-weight:900;vertical-align:-1px;margin-right:3px}
.journey-panel{background:linear-gradient(135deg,#0b2639,#14354b);border-radius:22px;box-shadow:0 30px 65px rgba(0,0,0,.28);min-width:0}
.journey-panel-head{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 22px 10px;color:#c5dbe8;font-weight:900;font-size:9px;letter-spacing:.13em}
.journey-brand{display:inline-flex;align-items:center;gap:11px}
.journey-brand-dot{width:9px;height:9px;background:#ff7a30;border-radius:50%;box-shadow:0 0 0 5px rgba(245,113,36,.15)}
.journey-counter{color:#ffab77;font-variant-numeric:tabular-nums;white-space:nowrap}
.journey-scene{position:relative;height:300px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 30%,#28546a 0,#15364a 45%,#0b2739 100%)}
.journey-ambient{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,transparent,black 50%)}
.journey-ambient:before{content:"";position:absolute;width:74%;height:200px;left:12%;top:0;background:radial-gradient(ellipse,rgba(255,142,69,.14),transparent 65%)}
.journey-site{position:absolute;z-index:2;top:24px;display:flex;align-items:center;flex-direction:column;gap:4px;color:#a9c2d0;text-align:center;max-width:155px;min-width:110px;transition:opacity .3s,filter .3s,transform .3s;opacity:.63}
.journey-site-depot{left:18px}.journey-site-client{right:18px}
.journey-site-icon{display:grid;place-items:center;width:56px;height:51px;color:#bed6e4;background:rgba(12,41,58,.45);border:1px solid rgba(150,192,212,.14);border-radius:12px}
.journey-site-icon svg{width:40px;height:39px}
.journey-site strong{font-size:9px;font-weight:900;letter-spacing:.09em;color:#e0ecf2;line-height:1.5}
.journey-site span{font-size:9px;line-height:1.4}
.journey-panel[data-phase="0"] .journey-site-depot,.journey-panel[data-phase="2"] .journey-site-client{opacity:1;filter:drop-shadow(0 0 10px rgba(251,132,64,.17));transform:translateY(-2px)}
.journey-panel[data-phase="1"] .journey-site{opacity:.8}
.journey-road{position:absolute;inset:auto 0 0;height:99px;background:linear-gradient(180deg,rgba(4,23,35,0),rgba(4,21,32,.9) 31%,#081f30 100%)}
.journey-asphalt{position:absolute;left:0;right:0;bottom:0;height:52px;background:linear-gradient(#18364b,#091d2b);transform:perspective(450px) rotateX(16deg) scaleX(1.08);box-shadow:0 -5px 20px rgba(0,0,0,.2)}
.journey-lane{position:absolute;left:6%;right:6%;bottom:25px;height:2px;background:repeating-linear-gradient(90deg,rgba(212,237,245,.4) 0 20px,transparent 20px 35px)}
.journey-line{position:absolute;left:8%;right:8%;bottom:63px;height:4px;background:rgba(161,196,213,.25);border-radius:10px;overflow:hidden}
.journey-line>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#f57124,#ffb17c);transform:scaleX(0);transform-origin:left center;box-shadow:0 0 14px rgba(255,128,65,.8)}
.journey-truck{position:absolute;z-index:4;left:0;bottom:31px;width:41%;height:auto;max-height:210px;max-width:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 11px rgba(0,0,0,.42));pointer-events:none;will-change:transform;transition:none!important}
.journey-arrival{position:absolute;z-index:5;top:103px;right:14%;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:2px solid #ff9854;background:#f57124;color:white;box-shadow:0 0 0 9px rgba(255,130,54,.12),0 12px 35px #06151fb0;opacity:0;transform:scale(.75);transition:opacity .3s,transform .3s;pointer-events:none}
.journey-arrival svg{width:23px;height:23px}.journey-panel[data-phase="2"] .journey-arrival{opacity:1;transform:scale(1)}
.journey-status{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 12px;background:rgba(5,22,34,.5);min-height:111px}
.journey-status-kicker{display:block;font-size:9px;font-weight:800;letter-spacing:.16em;color:#ff9d60;margin-bottom:7px}
.journey-status strong{display:block;font-size:16px;color:#fff;line-height:1.4}
.journey-status p{margin:4px 0 0;font-size:11px;line-height:1.55;color:#a9c4d2;max-width:390px}
.journey-stage-number{flex:none;font-size:32px;font-weight:900;color:#ff8a42;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.journey-stage-number span{font-size:12px;color:#8dacbe;letter-spacing:0}
.journey-timeline{height:4px;background:rgba(185,218,236,.18);margin:0 22px;border-radius:4px;overflow:hidden}
.journey-timeline>span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ff8d43,#f45c13);box-shadow:0 0 16px #fa753d;will-change:transform}
.journey-stage-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:15px 22px 14px}
.journey-stage{appearance:none;border:1px solid rgba(172,206,224,.2);background:rgba(255,255,255,.035);color:#bfd2df;text-align:left;border-radius:9px;padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;font-family:inherit;font-size:11px;font-weight:800;line-height:1.35}
.journey-stage b{color:#ff9e69;font-size:12px;flex:none}.journey-stage:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.journey-stage.active{border-color:#fa873d;background:rgba(245,113,36,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(245,113,36,.15)}
.journey-stage:focus-visible,.journey-main-btn:focus-visible{outline:3px solid #ffbb8a;outline-offset:3px}
.journey-panel-foot{border-top:1px solid rgba(196,222,238,.12);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 22px 15px;font-size:9px;font-weight:900;letter-spacing:.09em;color:#87a9bd}
.journey-panel-foot a{color:#ff995a;text-decoration:none;font-size:11px;letter-spacing:0}.journey-panel-foot a:hover{text-decoration:underline}
@media(max-width:1050px){.route-layout{grid-template-columns:1fr;gap:34px}.journey-panel{max-width:800px;width:100%}.journey-scene{height:320px}.journey-truck{width:36%}}
@media(max-width:690px){.route-3d{padding:55px 0}.journey-benefits{gap:12px}.journey-panel-head{padding:14px 12px 9px;font-size:7px;letter-spacing:.06em}.journey-brand{gap:8px}.journey-scene{height:255px}.journey-site{top:18px;min-width:85px}.journey-site-depot{left:3px}.journey-site-client{right:3px}.journey-site-icon{width:45px;height:42px}.journey-site-icon svg{width:34px}.journey-site strong{font-size:8px}.journey-site span{font-size:8px}.journey-truck{width:56%;max-height:175px;bottom:27px}.journey-road{height:85px}.journey-arrival{top:90px;right:13%;width:34px;height:34px}.journey-status{padding:13px 14px 10px;min-height:108px}.journey-status strong{font-size:14px}.journey-status p{font-size:10px}.journey-stage-number{font-size:26px}.journey-timeline{margin:0 14px}.journey-stage-buttons{padding:12px 14px;gap:6px}.journey-stage{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 6px;font-size:10px}.journey-stage b{font-size:10px}.journey-panel-foot{padding:10px 14px 13px;font-size:8px;letter-spacing:0}.journey-panel-foot a{font-size:10px}.journey-controls{gap:8px}}
@media(prefers-reduced-motion:reduce){.journey-truck,.journey-line>span,.journey-timeline>span{transition:none!important}.journey-arrival,.journey-stage{transition:none!important}}