.hero-products { height:500px; width:min(1080px,100%); margin-top:70px; isolation:isolate; }
.hero-products::before { content:""; position:absolute; width:68%; height:64%; left:16%; top:16%; border-radius:50%; background:rgba(104,77,255,.18); filter:blur(80px); pointer-events:none; }
.hero-product-laptop { position:absolute; z-index:2; width:74%; left:13%; top:5%; padding:12px 12px 28px; border:1px solid rgba(255,255,255,.18); border-radius:22px 22px 9px 9px; background:linear-gradient(145deg,#333945,#141821); box-shadow:0 42px 90px rgba(0,0,0,.5); transform:perspective(1100px) rotateX(2deg); }
.hero-product-laptop img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:11px; background:#07080d; }
.hero-laptop-camera { position:absolute; z-index:2; width:6px; height:6px; left:50%; top:4px; border-radius:50%; background:#06070a; }
.hero-laptop-base { position:absolute; width:112%; height:16px; left:-6%; bottom:-10px; border-radius:2px 2px 22px 22px; background:linear-gradient(#8b909a,#343944); box-shadow:0 10px 18px rgba(0,0,0,.28); }
.hero-laptop-base::after { content:""; position:absolute; width:16%; height:4px; left:42%; top:1px; border-radius:0 0 8px 8px; background:#aeb2ba; }
.hero-product-phone { position:absolute; z-index:4; width:205px; max-height:420px; object-fit:contain; filter:drop-shadow(0 30px 42px rgba(0,0,0,.48)); }
.hero-tripmaster-phone { left:0; top:75px; transform:rotate(-8deg); animation:heroTripFloat 7s ease-in-out infinite; }
.hero-scan-phone { right:0; top:75px; transform:rotate(8deg); animation:heroScanFloat 7s ease-in-out 1s infinite; }
.hero-tech-label { position:absolute; z-index:6; padding:10px 13px; border:1px solid var(--line); border-radius:99px; background:rgba(12,15,25,.84); backdrop-filter:blur(14px); color:#b9bece; font-size:10px; font-weight:700; letter-spacing:.4px; box-shadow:0 16px 35px rgba(0,0,0,.22); }
.hero-tech-label i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#62dfa0; box-shadow:0 0 0 4px rgba(98,223,160,.08); }
.hero-tech-mobile { left:3%; bottom:4%; }.hero-tech-web { left:50%; bottom:0; transform:translateX(-50%); }.hero-tech-auto { right:3%; bottom:4%; }
body.light .hero-product-laptop { border-color:rgba(20,24,40,.18); background:linear-gradient(145deg,#d9dde5,#aab0bb); box-shadow:0 42px 90px rgba(44,52,80,.22); }
body.light .hero-tech-label { background:rgba(255,255,255,.88); color:#50576a; box-shadow:0 16px 35px rgba(52,60,90,.12); }
@keyframes heroTripFloat { 50% { transform:translateY(-12px) rotate(-5deg); } }
@keyframes heroScanFloat { 50% { transform:translateY(-12px) rotate(5deg); } }
@media(prefers-reduced-motion:reduce){.hero-product-phone{animation:none}}
@media(max-width:800px){
  .hero { min-height:920px; }
  .hero-products { height:430px; margin-top:54px; }
  .hero-product-laptop { width:94%; left:3%; top:0; padding:7px 7px 19px; border-radius:14px 14px 6px 6px; }
  .hero-laptop-base { height:11px; bottom:-7px; }
  .hero-product-phone { width:145px; max-height:300px; top:155px; }
  .hero-tripmaster-phone { left:7%; }.hero-scan-phone { right:7%; }
  .hero-tech-label { display:none; }
}
@media(max-width:420px){.hero-products{height:390px}.hero-product-phone{width:130px;top:135px}.hero-tripmaster-phone{left:4%}.hero-scan-phone{right:4%}}