/* The turntable owns rotation; its parent retains the original viewing angle. */
.hero-3d .phone-turntable {
  position: relative;
  width: 100%;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.page-home .hero-3d .phone-turntable > .phone-device {
  transform: translateZ(10px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 2px #17241c, inset 0 0 0 3px #a0b3a55c, 0 0 0 1px #7e95864d;
}
.hero-3d .phone-turntable > .phone-device .phone-power { right: -5px; }
.hero-3d .phone-depth {
  display: block;
  position: absolute;
  inset: 0;
  border: 1px solid #506c5a;
  border-radius: 40px;
  background: linear-gradient(110deg, #b3c4b8, #385141 4%, #13291d 48%, #375b45 94%, #90ac9a);
  box-shadow: inset 0 0 0 1px #0a1b11;
  pointer-events: none;
}
.hero-3d .depth-1 { transform: translateZ(-8px); border-color: #80998a; }
.hero-3d .depth-2 { transform: translateZ(-4px); border-color: #3d5b48; }
.hero-3d .depth-3 { transform: translateZ(0); border-color: #284a36; }
.hero-3d .depth-4 { transform: translateZ(4px); border-color: #577462; }
.hero-3d .depth-5 { transform: translateZ(8px); border-color: #a4b7aa; }
.hero-3d .phone-turntable::before,
.hero-3d .phone-turntable::after {
  content: "";
  position: absolute;
  top: 39px;
  bottom: 39px;
  width: 20px;
  border: 1px solid #748e7d;
  border-radius: 3px;
  background: linear-gradient(90deg, #a0b5a8, #54755f 15%, #1f3d2a 45%, #294d36 80%, #6c8a76);
  transform: rotateY(90deg);
  pointer-events: none;
}
.hero-3d .phone-turntable::before { left: -10px; }
.hero-3d .phone-turntable::after { right: -10px; }

/* A quiet satin-green back with a polished camera island and directory mark. */
.hero-3d .phone-back {
  display: block;
  position: absolute;
  inset: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #8eac98;
  border-radius: 40px;
  color: #def6e8;
  background:
    radial-gradient(ellipse at 17% 0, #82b89a66, transparent 45%),
    linear-gradient(116deg, #254735, #385f46 37%, #163b27 77%, #2f5640);
  box-shadow: inset 0 0 0 2px #102b1a, inset 0 0 0 3px #9abb9f80, inset 1px 1px 7px #cbead447, inset -3px -3px 8px #00150880;
  transform: rotateY(180deg) translateZ(10px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.hero-3d .phone-back::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #d2f8de1f;
  border-radius: 35px;
  background: linear-gradient(120deg, #ffffff12, transparent 38%, transparent 69%, #b2dbba0b);
  pointer-events: none;
}
.hero-3d .phone-back::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 13px;
  width: 1px;
  background: linear-gradient(transparent, #c3e9cd5c 15%, #b4ddbf12 80%, transparent);
  pointer-events: none;
}
.hero-3d .phone-camera-island {
  display: grid;
  grid-template-columns: repeat(2, 43px);
  grid-template-rows: repeat(2, 43px);
  gap: 8px;
  position: absolute;
  top: 22px;
  left: 20px;
  width: 113px;
  height: 113px;
  padding: 9px;
  border: 1px solid #60846a;
  border-radius: 26px;
  background: linear-gradient(135deg, #506f59, #264530 61%, #173521);
  box-shadow: inset 0 1px 1px #e7ffe04a, inset -1px -1px 1px #04241380, 2px 3px 0 #092815, 4px 6px 10px #0624104d;
}
.hero-3d .phone-camera-lens {
  display: block;
  position: relative;
  width: 43px;
  height: 43px;
  border: 2px solid #0d2419;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #72d7d5b3 0 4%, transparent 9%),
    radial-gradient(circle at 65% 70%, #5560a780 0 5%, transparent 17%),
    radial-gradient(circle, #061418 0 25%, #204844 27% 31%, #092129 34% 45%, #060f11 49% 62%, #638676 64% 68%, #0a2115 72%);
  box-shadow: 0 0 0 1px #bad8bd7a, inset 0 0 0 2px #02100be6, 1px 2px 2px #011909a6;
}
.hero-3d .phone-camera-lens::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #709db536;
  border-radius: 50%;
  background: linear-gradient(130deg, #c3f7ff26, transparent 46%);
}
.hero-3d .phone-camera-flash {
  display: block;
  align-self: center;
  justify-self: center;
  width: 19px;
  height: 19px;
  border: 2px solid #163a25;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #fffdf1, #e8ead2 58%, #b6c5a4);
  box-shadow: 0 0 0 1px #87a2868c, inset 0 0 3px #8a9a7073;
}
.hero-3d .phone-back-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  position: absolute;
  top: 43%;
  left: 22px;
  right: 22px;
  text-align: center;
  color: #d7ecde;
}
.hero-3d .phone-back-brand > img {
  display: block;
  width: 63px;
  height: 63px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #04281180);
}
.hero-3d .phone-back-brand strong {
  display: block;
  max-width: 100%;
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 1px #0b321c80;
}
.hero-3d .phone-back-brand small {
  display: block;
  color: #aac8b4;
  font-size: 7px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .17em;
}
.hero-3d .phone-back-line {
  display: block;
  position: absolute;
  right: 35%;
  bottom: 36px;
  left: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a0c6ad94, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d .phone-turntable { animation: none; transition: none; }
}