/* A layered illuminated display stage with a visible 3D presentation. */
[data-ora-page="product"] .software-area{
  padding:13px 0 0;
}
[data-ora-page="product"] .software-area::before{
  inset:-13% -9% -9%;
  z-index:-2;
  background:
    radial-gradient(ellipse at 81% 34%,var(--ora-p-glow-peach),transparent 61%),
    radial-gradient(ellipse at 65% 88%,var(--ora-p-glow-lilac),transparent 65%),
    radial-gradient(ellipse at 28% 12%,var(--ora-p-glow-lime),transparent 58%);
  opacity:1;
  filter:blur(25px);
}
[data-ora-page="product"] .software-area::after{
  content:"";
  position:absolute;
  inset:22px -8px 65px 12px;
  border:2px solid rgb(88 101 242 / .34);
  border-radius:22px;
  background:linear-gradient(145deg,#eef1ff,rgb(255 255 255 / .62) 42%,#e8e4ff);
  transform:rotate(-5deg) translateY(5px);
  z-index:-1;
  pointer-events:none;
}
[data-ora-page="product"] .software-shot{
  position:relative;
  border:2px solid transparent;
  border-radius:17px;
  padding:0;
  overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#5865f2 0%,#a8b1ff 34%,#ffe1cd 63%,#7884f6 100%) border-box;
  box-shadow:0 34px 58px rgb(20 38 54 / .16),18px 13px 42px rgb(88 101 242 / .19),0 0 0 6px rgb(255 255 255 / .65),0 0 44px rgb(88 101 242 / .14);
  transform:perspective(1350px) rotateX(var(--screen-rx,3deg)) rotateY(var(--screen-ry,-7deg));
  transform-origin:center center;
  transition:transform .65s cubic-bezier(.2,.75,.25,1),box-shadow .4s;
  will-change:transform;
}
[data-ora-page="product"] .software-shot[data-tilting="true"]{transition:transform .12s ease-out,box-shadow .4s;box-shadow:0 40px 68px rgb(20 38 54 / .17),18px 15px 46px rgb(88 101 242 / .25),0 0 0 6px rgb(255 255 255 / .75),0 0 50px rgb(88 101 242 / .2)}
[data-ora-page="product"] .software-shot::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgb(255 255 255 / .8);
  border-radius:14px;
  box-shadow:inset 0 0 24px rgb(88 101 242 / .035);
  pointer-events:none;
  z-index:1;
}
[data-ora-page="product"] .software-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  /* Crop the original 54px system bar at its native 2034px width. */
  margin-top:-2.655%;
}
.software-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 29%,rgb(255 255 255 / .65) 49%,transparent 69%);
  opacity:0;
  pointer-events:none;
}
.hero.is-entering .software-shot::after{
  animation:screen-sheen 1.65s .6s ease-out both;
}
@keyframes screen-sheen{
  0%{transform:translateX(-105%);opacity:0}
  15%{opacity:1}
  80%{opacity:.65}
  100%{transform:translateX(105%);opacity:0}
}
[data-ora-page="product"] .software-under{
  gap:12px;
  margin-top:36px;
  font-size:14px;
  color:var(--ora-product-text);
}
.software-under span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border:1px solid rgb(88 101 242 / .22);
  border-radius:20px;
  background:rgb(255 255 255 / .94);
  box-shadow:0 7px 16px rgb(88 101 242 / .07);
}
.software-under span::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ora-color-primary);
}
@media(max-width:760px){
  [data-ora-page="product"] .software-area{padding-top:8px}
  [data-ora-page="product"] .software-area::before{inset:-8% -5% -6%;filter:blur(22px)}
  [data-ora-page="product"] .software-area::after{inset:12px 1px 58px 3px;border-radius:15px;transform:rotate(-3deg)}
  [data-ora-page="product"] .software-shot{border-radius:11px;transform:none;box-shadow:0 21px 36px rgb(20 38 54 / .13),0 0 0 3px rgb(255 255 255 / .7),0 0 26px rgb(88 101 242 / .13)}
  [data-ora-page="product"] .software-shot::before{border-radius:9px}
  [data-ora-page="product"] .software-under{font-size:11px;gap:7px;margin-top:21px}
  .software-under span{padding:6px 9px;gap:5px}
  .software-under span::before{width:4px;height:4px}
}
@media(prefers-reduced-motion:reduce){
  .hero.is-entering .software-shot::after{animation:none!important;opacity:0}
  [data-ora-page="product"] .software-shot{transform:none!important;will-change:auto}
}
