/* iPhone device mockup (responsive) - larger size on all screens */
.iphone-frame {
  --device-w: clamp(280px, 40vw, 400px); /* Increased min from 200px to 280px, vw from 28vw to 40vw for better mobile display */
  --padding: 10px;                       /* proportionally larger padding */
  position: relative;
  width: var(--device-w);
  height: calc(var(--device-w) * 2.05);   /* ~iPhone 15 Pro aspect ratio */
  padding: var(--padding);
  border-radius: calc(var(--device-w) * 0.115);
  background: linear-gradient(145deg, #0f172a, #111827);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.iphone-frame .iphone-bezel {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--device-w) * 0.115);
  pointer-events: none;
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.6);
}

.iphone-screen {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--device-w) * 0.09);
  overflow: hidden;
  background: #ffffff;
}

/* Dynamic Island (accurate sizing & position) */
.iphone-notch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Position accounts for bezel padding and slight offset */
  top: calc(var(--padding) + var(--device-w) * 0.018);
  width: calc(var(--device-w) * 0.36);   /* ~36% of device width */
  height: calc(var(--device-w) * 0.082); /* pill height */
  background: #000;
  border-radius: calc(var(--device-w) * 0.06);
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.iphone-notch::after {
  content: "";
  position: absolute;
  right: calc(var(--device-w) * 0.07);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--device-w) * 0.04);
  height: calc(var(--device-w) * 0.04);
  background: #0a0a0a;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #000 inset, 0 0 4px rgba(0,0,0,0.6);
}

.iphone-screen img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}