/* Built for the truck: devices in 3D space, driven by scroll. Screens are rebuilt from the technician app with sample data. */
.truck{padding-block:clamp(72px,10vw,132px);overflow:clip;background:radial-gradient(80% 60% at 75% 40%,#1a2d52 0%,var(--night) 70%)}
.truck-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;margin-top:40px}
.truck-steps{display:grid}
.tstep{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s var(--ease)}
.tstep.on{opacity:1}
.tstep .time{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--route)}
.tstep h3{color:#fff;font-size:clamp(26px,3vw,38px);margin-top:8px;letter-spacing:-.025em}
.tstep p{color:var(--on-dark-2);margin-top:12px;max-width:42ch;font-size:17.5px}
.truck-stage{position:sticky;top:calc(50vh - 330px);height:660px;perspective:1700px;align-self:start}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,-16deg));transition:transform .6s var(--ease)}
.stage-note{position:absolute;bottom:-6px;right:0;font-size:12.5px;color:var(--on-dark-2);opacity:.8;margin:0}

/* devices */
.dev-phone{position:absolute;left:46%;top:40px;width:300px;height:610px;border-radius:46px;background:linear-gradient(145deg,#2b3a55,#0f1828);padding:11px;transform:translateZ(90px);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 0 1.5px rgba(255,255,255,.12);transition:transform .8s var(--ease)}
.dev-phone::before{content:"";position:absolute;top:20px;left:50%;width:92px;height:24px;margin-left:-46px;border-radius:14px;background:#05080f;z-index:3}
.phone-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#f3f6fa;color:#0d1c33;font-family:var(--body);display:flex;flex-direction:column}
.dev-tablet{position:absolute;left:0;top:150px;width:560px;height:400px;border-radius:30px;background:linear-gradient(145deg,#33435f,#121c2e);padding:14px;transform:translateZ(-60px) rotateY(6deg);transition:transform .8s var(--ease),filter .8s var(--ease);filter:brightness(.72);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 0 1.5px rgba(255,255,255,.1)}
.truck-stage[data-active="4"] .dev-tablet{transform:translateZ(140px) translateY(-30px);filter:none}
.truck-stage[data-active="4"] .dev-phone{transform:translateZ(20px) translateX(70px)}
.tab-screen{height:100%;border-radius:18px;overflow:hidden;background:#f3f6fa;display:grid;grid-template-columns:150px 1fr;color:#0d1c33}

/* app UI pieces */
.ui-top{display:flex;align-items:center;gap:7px;padding:46px 14px 10px;background:#fff;border-bottom:1px solid #e3e9f1;font-size:13px}
.ui-top i,.ui-logo i{width:16px;height:18px;background:linear-gradient(160deg,#1a73e8 55%,#0d2a52 55%);clip-path:polygon(0 18%,100% 0,100% 40%,45% 52%,45% 100%,0 100%);display:inline-block}
.ui-top b{font-family:var(--display);font-size:15px;letter-spacing:-.02em}
.ui-top span{margin-left:8px;padding-left:8px;border-left:1px solid #dbe2ec;font-weight:700;font-size:12px;line-height:1.1}
.ui-top small{display:block;font-weight:500;color:#5d6d86}
.screens{position:relative;flex:1}
.scr{position:absolute;inset:0;padding:12px 12px 0;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);overflow:hidden}
.scr.on{opacity:1;transform:none}
.ui-date{font-size:10px;font-weight:700;letter-spacing:.06em;color:#5d6d86}
.ui-h{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;margin:2px 0 10px}
.ui-h.sm{font-size:20px;margin-top:4px}
.ui-card{background:#fff;border:1px solid #e3e9f1;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:3px;font-size:12px}
.ui-card.tight{gap:2px}
.ui-card hr{border:0;border-top:1px solid #e3e9f1;margin:7px 0}
.ui-row{display:flex;justify-content:space-between;align-items:center}
.ui-k{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5d6d86;margin-top:6px}
.ui-name{font-size:17px;font-weight:800;letter-spacing:-.02em}
.ui-name.sm{font-size:14px}
.ui-sub{font-weight:600}
.ui-muted{color:#5d6d86;font-size:10.5px}
.ui-text{color:#33445e;font-size:11.5px;line-height:1.35}
.ui-two{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 2px;padding-bottom:8px;border-bottom:1px solid #e3e9f1;font-weight:600;font-size:11.5px}
.ui-two small{display:block;color:#5d6d86;font-weight:500;font-size:10px}
.ui-btn{margin-top:8px;background:#1a73e8;color:#fff;font-weight:700;text-align:center;border-radius:10px;padding:9px;font-size:12.5px}
.ui-btn.ghost{background:#fff;color:#0d1c33;border:1px solid #cfd8e3;margin-top:5px}
.pill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:7px}
.pill.green{background:#e3f4ec;color:#1b7d4c}
.ui-list{margin-top:8px;background:#fff;border:1px solid #e3e9f1;border-radius:14px;display:grid}
.ui-list span{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-top:1px solid #e3e9f1;font-weight:700;font-size:12px}
.ui-list span:first-child{border-top:0}
.ui-list em{font-style:normal;font-size:10.5px;background:#edf1f6;border-radius:999px;min-width:22px;text-align:center;padding:2px 6px}
.ui-tools{background:#fff;border:1px solid #e3e9f1;border-radius:14px;display:grid}
.ui-tools span{display:grid;grid-template-columns:30px 1fr;column-gap:10px;padding:8px 10px;border-top:1px solid #e3e9f1;align-items:center}
.ui-tools span:first-child{border-top:0}
.ui-tools i{grid-row:span 2;width:30px;height:30px;border-radius:8px;background:#edf2f9;color:#1f5fb8;font-style:normal;font-weight:700;display:grid;place-items:center;font-size:14px}
.ui-tools b{font-size:12.5px}
.ui-tools small{font-size:10.5px;color:#5d6d86}
.ui-tabs{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid #e3e9f1;padding:8px 6px 18px;font-size:9.5px;font-weight:700;color:#5d6d86;text-align:center}
.ui-tabs span{padding:6px 2px;border-radius:9px;transition:background .3s,color .3s}
.truck-stage[data-active="0"] .t0,.truck-stage[data-active="1"] .t2,.truck-stage[data-active="2"] .t3,.truck-stage[data-active="3"] .t3,.truck-stage[data-active="4"] .t0{background:#e8f0fd;color:#1a73e8}

/* scanner */
.viewfinder{position:relative;height:200px;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#4b5563,#1f2530);display:grid;place-items:center}
.plate{width:84%;background:linear-gradient(160deg,#d9dee5,#aeb6c2);border-radius:6px;padding:10px 12px;color:#1d2430;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;display:grid;gap:3px;transform:rotate(-3deg);box-shadow:0 8px 18px rgba(0,0,0,.4)}
.plate b{font-family:var(--body);font-size:10px;letter-spacing:.08em;border-bottom:1px solid #8a94a3;padding-bottom:3px;margin-bottom:2px}
.plate span{display:flex;justify-content:space-between}
.plate i{font-style:normal;font-weight:700}
.laser{position:absolute;left:6%;right:6%;height:2px;background:var(--route);box-shadow:0 0 12px var(--route),0 0 3px #fff;top:10%;animation:scanline 2.4s var(--ease) infinite alternate}
@keyframes scanline{to{top:88%}}
.corner{position:absolute;width:18px;height:18px;border:2.5px solid var(--route)}
.c1{top:10px;left:10px;border-right:0;border-bottom:0}
.c2{top:10px;right:10px;border-left:0;border-bottom:0}
.c3{bottom:10px;left:10px;border-right:0;border-top:0}
.c4{bottom:10px;right:10px;border-left:0;border-top:0}
.found{margin-top:8px}
.ui-link{color:#1a73e8;font-weight:700;font-size:11.5px;margin-top:3px}

/* tablet dashboard */
.ui-side{background:#fff;border-right:1px solid #e3e9f1;padding:14px 10px;display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600}
.ui-logo{display:flex;gap:6px;align-items:center;font-family:var(--display);font-weight:800;font-size:14px;margin-bottom:10px}
.ui-nav{padding:6px 8px;border-radius:7px;color:#33445e}
.ui-nav.on{background:#e8f0fd;color:#155fc4}
.ui-mini{margin-top:auto;border:1px solid #e3e9f1;border-radius:10px;padding:8px;display:grid;gap:3px;font-size:10.5px}
.ui-mini small{color:#5d6d86;font-weight:500}
.bar{height:5px;border-radius:3px;background:#e3e9f1;overflow:hidden}
.bar span{display:block;height:100%;background:#1a73e8}
.ui-main{padding:14px 16px}
.ui-title{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.ui-chips{display:flex;gap:5px;align-items:center;margin:8px 0 10px;font-size:10.5px;font-weight:700}
.ui-chips span{border:1px solid #d5dde8;border-radius:7px;padding:4px 8px;background:#fff}
.ui-chips span.on{background:#1a73e8;color:#fff;border-color:#1a73e8}
.ui-chips em{font-style:normal;margin-left:auto;color:#155fc4;background:#e8f0fd;border-radius:7px;padding:4px 8px}
.ui-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ui-tiles div{background:#fff;border:1px solid #e3e9f1;border-radius:11px;padding:10px}
.ui-tiles b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ui-tiles small{font-size:10px;color:#5d6d86}
.phone-tiles{grid-template-columns:1fr 1fr}

/* floating callouts */
.float-card{position:absolute;background:rgba(12,21,37,.9);border:1px solid #2c4268;color:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 18px 36px -14px rgba(0,0,0,.7);transition:opacity .5s var(--ease),transform .6s var(--ease);opacity:0}
.float-card b{display:block;font-family:var(--display);font-size:20px;color:var(--route)}
.float-card small{color:var(--on-dark-2);font-size:12px}
.fc-scan{right:-10px;top:250px;transform:translateZ(170px) translateX(20px)}
.fc-clock{left:20px;top:70px;transform:translateZ(150px) translateY(10px)}
.truck-stage[data-active="2"] .fc-scan{opacity:1;transform:translateZ(170px)}
.truck-stage[data-active="0"] .fc-clock,.truck-stage[data-active="1"] .fc-clock{opacity:1;transform:translateZ(150px)}

@media (max-width:900px){
  .truck-grid{grid-template-columns:1fr}
  .truck-stage{grid-row:1;position:sticky;top:60px;height:430px;z-index:2;margin-inline:calc(-1 * var(--gutter));background:linear-gradient(var(--night) 88%,rgba(12,21,37,0))}
  .rig{transform:scale(.64) rotateX(6deg) rotateY(-12deg);transform-origin:50% 0}
  .dev-phone{left:34%}
  .dev-tablet{left:-4%}
  .tstep{min-height:62vh;justify-content:flex-start;padding-top:18px}
  .stage-note{display:none}
  .float-card{display:none}
}
@media (prefers-reduced-motion:reduce){.laser{animation:none;top:50%}}

/* brand wall behind the devices */
.brand-wall{position:absolute;left:-6%;top:-20px;width:112%;height:640px;transform:translateZ(-240px);pointer-events:none}
.brand-wall .topo{position:absolute;inset:0;width:100%;height:100%;opacity:.26}
.brand-wall .wall-route{position:absolute;inset:0;width:100%;height:100%;opacity:.3}
.wall-word{position:absolute;left:0;right:0;bottom:-10px;text-align:center;font-family:var(--display);font-weight:800;font-size:116px;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(120,160,230,.12)}
.wall-tag{position:absolute;right:4%;top:6%;font-family:var(--data);font-size:12px;letter-spacing:.06em;color:rgba(169,184,207,.7)}
.floor{position:absolute;left:5%;right:5%;bottom:-40px;height:160px;transform:translateZ(-40px) rotateX(78deg);background:radial-gradient(closest-side,rgba(63,214,242,.16),rgba(63,214,242,0) 70%),repeating-linear-gradient(90deg,rgba(63,214,242,.06) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(63,214,242,.06) 0 1px,transparent 1px 48px);border-radius:50%}
@media (max-width:900px){.wall-word{font-size:96px}.wall-tag{display:none}}


/* slider mode: no scroll-jacking. The stage stays put; arrows, tabs or a swipe change the screen and the caption below. */
.truck-slider{margin-top:36px;display:grid;justify-items:center}
.truck-slider .truck-stage{position:relative;top:auto;width:min(100%,760px);height:640px;touch-action:pan-y;cursor:grab}
.truck-slider .truck-stage:active{cursor:grabbing}
.truck-controls{display:flex;align-items:center;gap:12px;margin-top:22px;max-width:100%}
.ttabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ttabs button{font:inherit;font-size:14px;font-weight:600;color:var(--on-dark-2);background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:999px;padding:8px 14px;cursor:pointer;transition:all .25s var(--ease)}
.ttabs button:hover{color:#fff;border-color:#4a6390}
.ttabs button[aria-selected=true]{color:var(--night);background:var(--route);border-color:var(--route)}
.tnav{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid #3a5078;background:rgba(255,255,255,.04);color:#fff;display:grid;place-items:center;cursor:pointer;transition:all .25s var(--ease)}
.tnav:hover{border-color:var(--route);color:var(--route)}
.tnav svg{width:20px;height:20px}
.truck-slider .truck-steps{display:block;width:100%;max-width:680px;margin-top:22px;text-align:center;min-height:190px}
.truck-slider .tstep{min-height:0;opacity:1;display:block;padding:0;animation:capIn .5s var(--ease)}
.truck-slider .tstep[hidden]{display:none}
.truck-slider .tstep p{margin-inline:auto}
@keyframes capIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.truck-slider .stage-note{right:auto;left:50%;transform:translateX(-50%);bottom:-2px;white-space:nowrap}
@media (max-width:900px){
  .truck-slider .truck-stage{height:470px;margin-inline:0;background:none;position:relative;top:auto;z-index:auto;width:100%}
  .truck-slider .rig{transform:scale(.72) rotateX(6deg) rotateY(-12deg);transform-origin:50% 0}
  .truck-slider .dev-phone{left:28%}
  .ttabs button{font-size:13px;padding:7px 11px}
  .truck-controls{gap:8px}
  .tnav{width:40px;height:40px}
  .truck-slider .stage-note{display:block;font-size:11.5px}
}
@media (max-width:520px){.ttabs{display:none}.truck-controls{justify-content:center;gap:18px}.truck-controls::after{content:attr(data-count);order:1;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--on-dark-2)}.tnav.next{order:2}}