/* Original raster lighting passes over the generated premium workshop photograph. */
.hero--diagnostic{isolation:isolate;overflow:clip}
.hero-scene{position:absolute;left:33.5%;top:0;width:66.5%;height:44rem;isolation:isolate;background:#000}
.hero--diagnostic .hero-scene>.hero__photo{inset:0;width:100%;height:100%;filter:saturate(.67) contrast(1.04) brightness(.86);transition:filter 1.05s ease}
.hero--diagnostic+.proof-strip .proof-strip__photo{transition:filter 1.05s ease}
.hero--diagnostic>.hero__shade{z-index:1;pointer-events:none}
.hero--diagnostic .hero__paper{z-index:2}
.hero-lighting{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.hero-light{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;opacity:.7;transition:opacity .6s ease}
.hero-light--lamp-one{mask-image:radial-gradient(ellipse 10% 10% at 33.66% 6.45%,#000 12%,transparent 95%);transform:translate(-.13%,.1%)}
.hero-light--lamp-two{mask-image:radial-gradient(ellipse 6% 6% at 30.27% 18.36%,#000 20%,transparent 98%);transform:translate(-.2%,.1%)}
.hero-light--lamp-three{mask-image:radial-gradient(ellipse 5% 5% at 32.68% 25.68%,#000 15%,transparent 98%);transform:translate(-6.45%,-3.71%)}
.hero-light--headlights{transform:translate(-.23%,.85%);opacity:.64}
.hero--diagnostic[data-hero-stage="dark"] .hero__photo,.hero--diagnostic[data-hero-stage="dark"]+.proof-strip .proof-strip__photo{filter:saturate(.55) contrast(1.04) brightness(0);transition:none}
.hero--diagnostic[data-hero-stage="lamp-one"] .hero__photo,.hero--diagnostic[data-hero-stage="lamp-one"]+.proof-strip .proof-strip__photo{filter:saturate(.58) contrast(1.04) brightness(.16)}
.hero--diagnostic[data-hero-stage="lamp-two"] .hero__photo,.hero--diagnostic[data-hero-stage="lamp-two"]+.proof-strip .proof-strip__photo{filter:saturate(.62) contrast(1.04) brightness(.39)}
.hero--diagnostic[data-hero-stage="lamps"] .hero__photo,.hero--diagnostic[data-hero-stage="lamps"]+.proof-strip .proof-strip__photo{filter:saturate(.67) contrast(1.04) brightness(.72)}
.hero--diagnostic:is([data-hero-stage="dark"],[data-hero-stage="lamp-one"],[data-hero-stage="lamp-two"],[data-hero-stage="lamps"]) .hero-light--headlights{opacity:0}
.hero--diagnostic[data-hero-stage="dark"] .hero-light{opacity:0;transition:none}
.hero--diagnostic[data-hero-stage="lamp-one"] :is(.hero-light--lamp-two,.hero-light--lamp-three){opacity:0}
.hero--diagnostic[data-hero-stage="lamp-two"] .hero-light--lamp-three{opacity:0}
.hero-scanner{position:absolute;left:36%;right:13%;top:10%;height:74%;overflow:hidden;pointer-events:none;opacity:0}
.hero-scanner>span{position:absolute;left:-8%;top:0;bottom:0;width:2px;background:linear-gradient(transparent,#e8f492 22%,#d1e22b 72%,transparent);box-shadow:0 0 14px 3px #cbdc4f66}
.hero-scanner>span::before{content:"";position:absolute;right:2px;top:4%;bottom:4%;width:42px;background:linear-gradient(90deg,transparent,#d4e04420)}
.hero--diagnostic[data-hero-stage="scan"] .hero-scanner{opacity:1}
.hero--diagnostic[data-hero-stage="scan"] .hero-scanner>span{animation:hero-scan 1.05s cubic-bezier(.4,.05,.3,1) both}
@keyframes hero-scan{0%{left:-8%;opacity:0}12%{opacity:1}86%{opacity:1}100%{left:108%;opacity:0}}
.hero-equipment{position:absolute;inset:0;pointer-events:none}
.hero-hotspot{--spot-left:60%;--spot-top:36%;position:absolute;left:var(--spot-left);top:var(--spot-top);z-index:2;display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 8px 6px 0;pointer-events:auto;opacity:1;transform:translate(-17px,-22px);transition:opacity .35s ease,visibility .35s ease;color:#eef0db;font-family:var(--body);outline-offset:4px}
.hero-hotspot--tracking{--spot-left:48%;--spot-top:19%}
.hero-hotspot--tachograph{--spot-left:59%;--spot-top:39%;transition-delay:.1s}
.hero-hotspot--camera{--spot-left:82%;--spot-top:32%;transition-delay:.2s}
.hero-hotspot--fuel{--spot-left:35.5%;--spot-top:69%;transition-delay:.2s}
.hero-hotspot__target{position:relative;flex:0 0 30px;display:grid;place-items:center;width:30px;height:30px;border:1px solid #d4df71;border-radius:50%;background:#0b191ee8;box-shadow:0 0 0 4px #0d161755,0 2px 15px #0006;font:700 11px/1 Arial,sans-serif;color:#e3e86c;transition:background .2s,box-shadow .2s,color .2s}
.hero-hotspot__label{padding:4px 8px;border:1px solid #c5ca9f45;background:#091719d9;border-radius:2px;font-size:14px;line-height:1.15;white-space:nowrap;letter-spacing:.015em;box-shadow:0 2px 14px #0004}
.hero-hotspot[data-card-open="true"]{z-index:5}
.hero-hotspot[data-card-open="true"] .hero-hotspot__target{color:#0d1818;background:var(--acid);box-shadow:0 0 0 5px #d4df7122,0 0 22px #d4df7133}
.hero-hotspot[data-card-open="true"] .hero-hotspot__label{border-color:#cdd63b;color:#e3e86c}
.hero--diagnostic:not([data-hero-stage="systems"]):not([data-hero-stage="ready"]) :is(.hero-hotspot,.hero-interaction__hint){opacity:0;visibility:hidden;pointer-events:none;transition:none}
.hero-device{position:absolute;left:0;top:100%;display:grid;grid-template-columns:84px minmax(0,1fr);width:292px;gap:12px;align-items:center;padding:14px;background:#0a171bf5;border:1px solid #c8cf625f;border-top:2px solid #cbd73e;box-shadow:0 12px 30px #0006;color:#e8e8d7;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none;white-space:normal}
.hero-device::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.hero-device>img{display:block;width:84px;height:100px;object-fit:contain;background:#0c171a;border:1px solid #6f795133}
.hero-device__copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.hero-device__copy>b{font:700 17px/1.1 var(--body)}
.hero-device__copy>span{font:400 14px/1.35 var(--body);color:#b8c2ba}
.hero-device__copy>strong{font:700 14px/1.15 var(--body);color:#d7dd4b}
.hero-device__copy>strong>span{margin-left:4px;font-family:Arial,sans-serif}
.hero-hotspot--camera .hero-device{left:auto;right:0}
.hero-hotspot--fuel .hero-device{top:auto;bottom:100%}
.hero-hotspot--fuel .hero-device::before{top:auto;bottom:-8px}
.hero-hotspot[data-card-open="true"] .hero-device{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.hero-interaction{position:absolute;z-index:3;right:2.3%;bottom:15px;display:flex;align-items:center;gap:12px;max-width:44%;color:#d4d7c8}
.hero-interaction__hint{padding:7px 10px;background:#091517c9;border:1px solid #b1c08635;font-size:14px;line-height:1.15;transition:opacity .35s ease}
.hero-replay{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #a8b17278;background:#0b181be8;color:#e2e789;border-radius:50%;transition:background .2s,border-color .2s}
.hero-replay[hidden]{display:none}
.hero-replay>span{font:24px/1 Arial,sans-serif}
.hero-replay:hover{background:#21302c;border-color:#d4df71}
.hero-replay[data-playing="true"]>span{font-size:15px}
@media(max-width:900px){
  .hero-scene{left:0;width:100%;height:100%}
  .hero-device{width:270px;grid-template-columns:70px minmax(0,1fr);gap:10px;padding:12px}
  .hero-device>img{width:70px;height:90px}
  .hero-hotspot--tracking{--spot-left:61%;--spot-top:17%}
  .hero-hotspot--tachograph{--spot-left:65%;--spot-top:45%}
  .hero-hotspot--camera{--spot-left:84%;--spot-top:28%}
  .hero-hotspot--fuel{--spot-left:62%;--spot-top:73%}
  .hero-hotspot--tachograph .hero-device{left:auto;right:0}
  .hero-hotspot--camera{flex-direction:row-reverse;transform:translate(-100%,-22px)}
  .hero-hotspot--camera .hero-device{right:0}
}
@media(min-width:601px) and (max-width:900px){
  .hero--diagnostic .hero__copy{padding-left:24px;padding-top:72px}
  .hero--diagnostic h1{margin-bottom:22px}
  .hero--diagnostic h1 span:nth-child(1){font-size:clamp(51px,8.45vw,72px)}
  .hero--diagnostic h1 span:nth-child(2){font-size:clamp(37px,6vw,51px)}
  .hero--diagnostic h1 span:nth-child(3){font-size:clamp(44px,7.1vw,61px)}
  .hero--diagnostic .hero__lead{max-width:clamp(225px,29vw,260px);font-size:14px}
  .hero--diagnostic .button--primary{width:clamp(235px,35vw,285px);min-width:0;min-height:44px;font-size:22px;white-space:nowrap;gap:.5rem;padding-left:1rem}
}
@media(max-width:600px){
  .hero--diagnostic{height:760px}
  .hero-scene{top:auto;bottom:0;height:365px}
  .hero-hotspot--tracking{--spot-left:48%;--spot-top:20%}
  .hero-hotspot--tachograph{--spot-left:55%;--spot-top:44%}
  .hero-hotspot--camera{--spot-left:89%;--spot-top:33%}
  .hero-hotspot--fuel{--spot-left:35.5%;--spot-top:69%}
  .hero-hotspot{gap:5px;padding-right:0}
  .hero-hotspot__label{font-size:14px;padding:4px 5px}
  .hero-hotspot__target{width:28px;height:28px;flex-basis:28px;font-size:10px}
  .hero-device{width:256px;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:11px}
  .hero-device>img{width:64px;height:92px}
  .hero-hotspot--tracking .hero-device{left:-100px}
  .hero-hotspot--tachograph .hero-device{left:-125px;right:auto}
  .hero-hotspot--camera .hero-device{right:0}
  .hero-hotspot--fuel .hero-device{left:-80px;right:auto}
  .hero-interaction{right:14px;left:14px;bottom:10px;max-width:none;justify-content:flex-end;gap:8px}
  .hero-interaction__hint{font-size:14px;padding:7px 8px}
  .hero-replay{width:36px;height:36px;flex-basis:36px}
}
@media(max-width:400px){.hero--diagnostic{height:840px}}
@media(prefers-reduced-motion:reduce){
  .hero--diagnostic .hero__photo,.hero-light,.hero-hotspot,.hero-device,.hero-hotspot__target{transition:none!important}
  .hero-scanner{display:none!important}
  .hero--diagnostic .hero__photo,.hero--diagnostic+.proof-strip .proof-strip__photo{filter:saturate(.67) contrast(1.04) brightness(.86)!important;transition:none!important}
  .hero--diagnostic :is(.hero-hotspot,.hero-interaction__hint){visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .hero-replay{display:none}
}