.devices-showcase{
  position:relative;
  padding: 60px 24px 20px 24px;        /* ajuste o 72px se quiser mais/menos espaço antes da próxima seção */
  margin-top:-12vh;           /* puxa pra cima pra "espiar" no fim da hero. Menos negativo = espia menos */
}
.devices-stage{
  position:relative;
  max-width:900px;
  margin:0 auto;
  aspect-ratio:10/6;      /* reserva o espaço — evita layout shift (CLS) */
}
.device{
  position:absolute;
  will-change:transform,opacity;
}
.device img{width:100%;height:auto;display:block;}
 
/* posições finais */
.device--notebook{ width:76%; left:12%; top:5%;      z-index:1; }
.device--tablet  { width:47%; left:0%;  bottom:15%;  z-index:2; }
.device--celular { width:26%; right:4%; bottom:3%;  z-index:3; }
 
/* estado inicial (antes de entrar na viewport) */
.device{opacity:0;}
.device--tablet{transform:translateX(-60px) translateY(10px);}
.device--celular{transform:translateX(60px) translateY(10px);}
.device--notebook{transform:translateY(24px);}

.device.in{
  opacity:1;
  transform:none;
  transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .8s ease;
}
 
/* respeita quem desativa animação */
@media (prefers-reduced-motion:reduce){
    .device{opacity:1 !important;transform:none !important;transition:none !important;}
}
 
/* mobile */
@media (max-width:560px){
  .devices-showcase{margin-top:-6vh;}
  .device--notebook{width:88%;left:6%;}
  .device--tablet  {width:47%;left:-5%;}
  .device--celular {width:26%;right:2%;}
}