/* Nexus iPhone 17 — vector chassis (sharp at any DPR).
   Screen AR matches recordings: 1080×2124 (assistant) or 1126×2266 (markets).

   <figure class="nx-iphone-stage" aria-hidden="true">
     <div class="nx-iphone">
       <div class="nx-iphone__chassis">
         <span class="nx-iphone__btn nx-iphone__btn--action"></span>
         <span class="nx-iphone__btn nx-iphone__btn--up"></span>
         <span class="nx-iphone__btn nx-iphone__btn--down"></span>
         <span class="nx-iphone__btn nx-iphone__btn--power"></span>
         <div class="nx-iphone__screen">
           <video class="nx-iphone__media" autoplay muted loop playsinline
                  poster="assets/poster-assistant.jpg">
             <source src="assets/nexus-assistant.mp4" type="video/mp4">
           </video>
           <span class="nx-iphone__island"></span>
         </div>
       </div>
     </div>
   </figure>
*/
.nx-iphone-stage {
  --nx-iphone-w: min(400px, 100%);
  width: var(--nx-iphone-w);
  margin: 0 auto;
  overflow: visible;
}
.nx-iphone {
  --nx-ar: 1080 / 2124;
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.nx-iphone--tilt {
  transform: rotateY(-10deg) rotateX(4deg);
  transform-style: preserve-3d;
  perspective: 1600px;
}
.nx-iphone--markets { --nx-ar: 1126 / 2266; }

.nx-iphone__chassis {
  position: relative;
  padding: 2.15cqw;
  border-radius: 17.2cqw;
  background:
    linear-gradient(155deg,
      #f7f3eb 0%,
      #d2ccc0 22%,
      #9a948a 48%,
      #e4ddd3 72%,
      #7a746c 100%);
  box-shadow:
    inset 0 0.7cqw 0.5cqw rgba(255, 255, 255, 0.55),
    inset 0 -0.55cqw 0.6cqw rgba(0, 0, 0, 0.32),
    0 18px 40px rgba(0, 0, 0, 0.28);
}

.nx-iphone__screen {
  position: relative;
  aspect-ratio: var(--nx-ar);
  border-radius: 15.2cqw;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  box-shadow: 0 0 0 0.55cqw #11110f;
}

.nx-iphone__media,
.nx-iphone__screen video,
.nx-iphone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.nx-iphone__island {
  position: absolute;
  z-index: 3;
  top: 1.15%;
  left: 50%;
  width: 31.5%;
  height: 3.35%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050505;
  box-shadow: inset 0 0 0 0.18cqw rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.nx-iphone__island::after {
  content: "";
  position: absolute;
  right: 11%;
  top: 50%;
  width: 1.55cqw;
  height: 1.55cqw;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #4a6aa8, #0a1220 68%);
}

.nx-iphone__btn {
  position: absolute;
  z-index: 2;
  background: linear-gradient(180deg, #d8d2c6, #7a746c 45%, #b7b0a4);
  box-shadow: inset 0 0 0 0.12cqw rgba(255, 255, 255, 0.18);
}
.nx-iphone__btn--action {
  left: -1.05cqw;
  top: 16.8cqw;
  width: 1.05cqw;
  height: 4.4cqw;
  border-radius: 0.45cqw 0 0 0.45cqw;
}
.nx-iphone__btn--up {
  left: -1.15cqw;
  top: 24.6cqw;
  width: 1.15cqw;
  height: 8.2cqw;
  border-radius: 0.45cqw 0 0 0.45cqw;
}
.nx-iphone__btn--down {
  left: -1.15cqw;
  top: 34.4cqw;
  width: 1.15cqw;
  height: 8.2cqw;
  border-radius: 0.45cqw 0 0 0.45cqw;
}
.nx-iphone__btn--power {
  right: -1.15cqw;
  top: 28.2cqw;
  width: 1.15cqw;
  height: 11.4cqw;
  border-radius: 0 0.45cqw 0.45cqw 0;
}

@media (max-width: 767px) {
  .nx-iphone-stage { --nx-iphone-w: min(280px, 78vw); }
  .nx-iphone--tilt { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-iphone--tilt { transform: none; }
}