/* Product artwork follows the proportions and perspective of the original hero. */
.system-visual { padding:100px 0 55px; min-width:0; }
.system-stage { position:relative; width:94%; max-width:900px; margin:0; }
.system-desktop { position:relative; z-index:3; width:100%; border:1px solid #d4deed; border-radius:16px; overflow:hidden; background:#f2f6fc; box-shadow:0 50px 100px #0006; transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.system-desktop img { display:block; width:100%; height:auto; }
.system-connected { bottom:5%; left:-6%; z-index:6; }
@media (min-width:1101px) {
  .system-stage { min-height:500px; display:flex; align-items:center; }
}
@media (min-width:1600px) {
  .system-stage { min-height:570px; }
}
@media (max-width:1100px) {
  .hero { grid-template-columns:minmax(0,1fr); }
  .hero-copy { min-width:0; }
  .system-visual { min-height:0; padding:10px 6vw 60px; }
  .system-stage { width:96%; max-width:850px; margin:auto; }
  .system-connected { left:-2%; bottom:3%; }
}
@media (max-width:600px) {
  .hero h1 { font-size:clamp(2.5rem,11.5vw,4rem); }
  .hero-copy { padding-bottom:38px; }
  .system-visual { padding:10px 18px 45px; }
  .system-stage { width:97%; }
  .system-desktop { border-radius:9px; transform:perspective(900px) rotateY(-4deg); }
  .system-connected { padding:8px 10px; gap:7px; border-radius:8px; bottom:-10%; left:-1%; }
  .system-connected .float-icon { width:22px; height:22px; font-size:12px; }
  .system-connected b { font-size:8px; }
  .system-connected small { font-size:7px; }
}