/* Isolated 3D hero treatment. Remove this stylesheet link to restore the original hero. */
.hero-layout { grid-template-columns: 1fr 1fr; gap: 44px; }
.product-stage { height: 584px; perspective: 1200px; }
.product-stage .stage-orbit { display: none; }
.display-alcove {
  position: absolute; inset: 0 0 57px; overflow: hidden; border-radius: 42px;
  border: 1px solid #64c9c780;
  background: radial-gradient(ellipse at 50% 100%, #184846 0, transparent 58%), linear-gradient(110deg, #0d2d32, #030c10 24%, #07181c 78%, #134044);
  box-shadow: inset 0 0 0 12px #07191e, inset 0 0 0 13px #386164, 0 24px 55px #0005;
  pointer-events: none;
}
.display-alcove::before {
  content: ""; position: absolute; inset: 20px 23px 35px; border-radius: 27px;
  border: 1px solid #65e6dc40;
  background: radial-gradient(ellipse at 20% 0, #7effee2b, transparent 32%), radial-gradient(ellipse at 80% 0, #7effee26, transparent 32%);
  box-shadow: -16px 0 18px -16px #41fff0, 16px 0 18px -16px #41fff0, inset 0 18px 22px -20px #adfff8;
}
.display-alcove::after {
  content: ""; position: absolute; top: 24px; left: 22%; width: 34px; height: 4px;
  background: #cafffa; border-radius: 50%; box-shadow: 0 3px 16px 5px #67fff16b, 270px 0 0 #cafffa, 270px 3px 16px 5px #67fff16b;
}
.display-platform {
  position: absolute; left: 6%; right: 6%; bottom: 18px; height: 69px;
  border-radius: 50%; border: 1px solid #6faaa980;
  background: radial-gradient(ellipse at 45% 30%, #336362, #102d33 62%, #07171d);
  box-shadow: 0 12px 0 #07161c, 0 13px 0 #377571, 0 23px 20px #0009, 0 -4px 20px #48ffee12;
}
.product-stage .hero-phone {
  max-width: 200px;
  border: 6px solid #34494c; border-radius: 31px;
  box-shadow: 2px 0 0 #7d999a, 7px 7px 0 #0a151a, 15px 24px 24px #0008, 0 0 25px #48ffee09;
}
.product-stage .phone-back { width: 40%; height: auto; aspect-ratio: 432 / 768; left: 9%; top: 93px; transform: rotate(-9deg); }
.product-stage .phone-front { width: 41%; height: auto; aspect-ratio: 1 / 2; right: 8%; top: 110px; transform: rotate(7deg); }
.product-stage .hero-phone img { object-fit: contain; }
.product-stage .app-stamp { top: 37px; right: 27px; z-index: 2; background: #0b2329e8; font-size: 10px; }
.product-stage .stage-label { left: 0; right: 0; bottom: 0; text-align: center; }
@media (min-width: 1101px) { .hero { padding-top: 144px; padding-bottom: 72px; } }
@media (min-width: 661px) and (max-width: 1100px) {
  .hero-layout { grid-template-columns: 1fr 1fr; gap: 28px; }
  .product-stage { height: 540px; }
  .product-stage .phone-back { top: 100px; }
  .product-stage .phone-front { top: 100px; }
  .product-stage .app-stamp { top: 38px; right: 20px; font-size: 9px; padding: 8px 10px; }
  .display-alcove::after { box-shadow: 0 3px 16px 5px #67fff16b; }
}
@media (min-width: 661px) and (max-width: 800px) {
  .hero-layout { grid-template-columns: 1fr; gap: 38px; }
  .product-stage { width: 460px; max-width: 100%; margin: 0 auto; height: 536px; }
}
@media (max-width: 660px) {
  .hero-layout { grid-template-columns: 1fr; gap: 38px; }
  .product-stage { width: 100%; max-width: 400px; height: auto; aspect-ratio: 360 / 470; }
  .display-alcove { bottom: 56px; border-radius: 30px; box-shadow: inset 0 0 0 8px #07191e, inset 0 0 0 9px #386164, 0 24px 55px #0005; }
  .display-alcove::before { inset: 15px 17px 27px; border-radius: 20px; }
  .display-alcove::after { top: 19px; box-shadow: 0 3px 16px 5px #67fff16b; }
  .display-platform { height: 48px; bottom: 17px; }
  .product-stage .hero-phone { border-width: 4px; border-radius: 23px; }
  .product-stage .phone-back { top: 20%; left: 9%; }
  .product-stage .phone-front { top: 26%; right: 8%; }
  .product-stage .app-stamp { top: 30px; right: 17px; font-size: 9px; padding: 8px 10px; }
  .product-stage .stage-label { bottom: 0; }
}