@keyframes mobileMove1 { from { transform:scale(1.13) translate3d(2%,1%,0) } to { transform:scale(1.02) translate3d(-1%,-1%,0) } }
@keyframes mobileMove2 { from { transform:scale(1.03) translate3d(-2%,0,0) } to { transform:scale(1.14) translate3d(2%,-1%,0) } }
@keyframes mobileMove3 { from { transform:scale(1.12) translate3d(-1%,1%,0) } to { transform:scale(1.03) translate3d(2%,-1%,0) } }
@keyframes mobileMove4 { from { transform:scale(1.03) translate3d(2%,1%,0) } to { transform:scale(1.13) translate3d(-2%,-1%,0) } }
.soon a { color:#edc891; text-decoration:none }

@media (orientation:portrait) and (max-width:720px) {
  html,body,.hero,.slides { width:100%; height:100svh; min-height:100svh; margin:0; padding:0; overflow:hidden }
  .slides { inset:0; max-height:none }
  .slide { inset:0; margin:0!important }
  .slide img { width:100%; height:100%; object-fit:cover; margin:0; border:0 }
  .slide.active { animation-duration:1.1s!important }
  .slide:nth-child(1).active img { animation:mobileMove1 5.33s ease-in-out both!important }
  .slide:nth-child(2).active img { animation:mobileMove2 5.33s ease-in-out both!important }
  .slide:nth-child(3).active img { animation:mobileMove3 5.33s ease-in-out both!important }
  .slide:nth-child(4).active img { animation:mobileMove4 5.33s ease-in-out both!important }
  .panel { top:auto!important; bottom:5px!important; width:58%; padding:10px 11px; border-radius:13px }
  .hero:has(.slide:nth-child(1).active) .panel,.hero:has(.slide:nth-child(2).active) .panel { left:5px!important; right:auto!important }
  .hero:has(.slide:nth-child(3).active) .panel,.hero:has(.slide:nth-child(4).active) .panel { left:auto!important; right:5px!important }
  .topbar { padding:21px 23px }
  .brand { font-size:26px }
}

@media (orientation:landscape) and (max-height:600px) {
  html,body,.hero,.slides { width:100%; height:100svh; min-height:100svh; margin:0; padding:0; overflow:hidden }
  .slides { inset:0; max-height:none }
  .slide { inset:0; margin:0!important }
  .slide img { width:100%; height:100%; object-fit:cover; margin:0; border:0 }
  .slide.active { animation-duration:1.1s!important }
  .slide:nth-child(1).active img { animation:mobileMove1 5.33s ease-in-out both!important }
  .slide:nth-child(2).active img { animation:mobileMove2 5.33s ease-in-out both!important }
  .slide:nth-child(3).active img { animation:mobileMove3 5.33s ease-in-out both!important }
  .slide:nth-child(4).active img { animation:mobileMove4 5.33s ease-in-out both!important }
  .panel { top:auto!important; bottom:5px!important; width:38%; padding:9px 11px; border-radius:12px }
  .hero:has(.slide:nth-child(1).active) .panel,.hero:has(.slide:nth-child(2).active) .panel { left:5px!important; right:auto!important }
  .hero:has(.slide:nth-child(3).active) .panel,.hero:has(.slide:nth-child(4).active) .panel { left:auto!important; right:5px!important }
  .topbar { padding:15px 21px }
  .brand { font-size:25px }
}