/* Realistic thin black phone hardware, inspired by modern edge-to-edge devices. */
.app-phone .phone-shell,
.app-phone:nth-child(2) .phone-shell,
.app-phone:nth-child(3) .phone-shell{
  padding:5px!important;
  border:1px solid #2d323a!important;
  border-radius:42px!important;
  background:linear-gradient(112deg,#050608 0%,#242932 7%,#07090c 16%,#020305 76%,#262c34 94%,#050608 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 3px 0 5px rgba(255,255,255,.05),inset -3px 0 6px rgba(0,0,0,.9),0 28px 60px rgba(0,0,0,.66),0 0 0 1px rgba(0,0,0,.95)!important;
}
.app-phone .phone-shell img{
  border:1px solid #010204!important;
  border-radius:36px!important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.55)!important;
}
.app-phone .phone-shell:before{
  top:13px!important;
  width:58px!important;
  height:17px!important;
  border-radius:999px!important;
  background:radial-gradient(circle at 72% 50%,#172238 0 2.5px,#030405 3.5px),#030405!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.72)!important;
}
.app-phone .phone-shell:after{
  right:-4px!important;
  top:104px!important;
  width:3px!important;
  height:62px!important;
  border-radius:0 3px 3px 0!important;
  background:linear-gradient(#454c56,#11151a 18%,#080a0d 82%,#3b424b)!important;
  box-shadow:0 92px 0 #11151a!important;
}
.app-phone:after{
  inset:8px 7px 58px!important;
  border-radius:36px!important;
  background:linear-gradient(118deg,rgba(255,255,255,.09),transparent 17%,transparent 78%,rgba(255,255,255,.025))!important;
}

@media(max-width:760px){
  .app-phone .phone-shell,
  .app-phone:nth-child(2) .phone-shell,
  .app-phone:nth-child(3) .phone-shell{padding:4px!important;border-radius:32px!important}
  .app-phone .phone-shell img{border-radius:27px!important}
  .app-phone .phone-shell:before{top:10px!important;width:47px!important;height:14px!important}
  .app-phone .phone-shell:after{top:82px!important;height:48px!important;box-shadow:0 72px 0 #11151a!important}
  .app-phone:after{inset:7px 6px 50px!important;border-radius:27px!important}

  html[data-mobile-motion="active"] .app-phone-grid,
  html[data-mobile-motion="active"] .orbit-rotor,
  html[data-mobile-motion="slow"] .app-phone-grid,
  html[data-mobile-motion="slow"] .orbit-rotor{scroll-behavior:smooth!important}
  html[data-mobile-motion="active"] .orbit-face,
  html[data-mobile-motion="slow"] .orbit-face{transition:transform .45s ease,opacity .45s ease!important}
  html[data-mobile-motion="active"] .orbit-face:hover,
  html[data-mobile-motion="slow"] .orbit-face:hover{transform:translateY(-3px)!important}
}

@media(prefers-reduced-motion:reduce){
  .app-phone,.orbit-face{transition:none!important}
}