/* Owner-confirmed capsule section and chamfered, flat-top plastic button.
   Radius and depth illustrate the shape; they are not measured specifications. */
.hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.product-scene { position: relative; display: grid; place-items: center; width: 100%; min-height: clamp(570px, 50vw, 735px); perspective: 1600px; }
.product-scene::before { content: ''; position: absolute; width: 65%; height: 9%; left: 18%; bottom: 20px; border-radius: 50%; background: #090a0b; filter: blur(22px); opacity: .72; transform: rotate(12deg); pointer-events: none; }
.product-device {
  --device-width: clamp(330px, 35vw, 510px);
  --body-radius: calc(var(--device-width) * .17);
  position: relative; width: var(--device-width); aspect-ratio: 39 / 43;
  transform-style: preserve-3d;
  transform: translateY(-14px) rotateX(18deg) rotateY(-25deg) rotateZ(18deg);
  transition: transform .65s cubic-bezier(.2, .65, .25, 1);
}
.device-shell { position: absolute; inset: 0; transform-style: preserve-3d; }
.device-front { position: absolute; inset: 0; transform: translateZ(var(--body-radius)); backface-visibility: hidden; }
.device-front::before, .device-back {
  content: ''; position: absolute; inset: 0 var(--body-radius);
  background:
    linear-gradient(180deg, #d2d6d7 0, #b4babc 2.5%, #737b7e 2.8%, #e6e8e7 3%, transparent 3.3%, transparent 96.5%, #747c7e 96.8%, #e4e8e8 97.1%, #a6b0b3 97.4%),
    linear-gradient(102deg, #b0b7b9, #ccd1d2 39%, #bdc5c7 80%, #a4aeb1);
}
.device-front::after { content: ''; position: absolute; inset: 0 var(--body-radius); background: repeating-linear-gradient(0deg, transparent 0 1px, #ffffff16 1px 1.5px, transparent 1.5px 2.5px); pointer-events: none; }
.device-back { transform: translateZ(calc(-1 * var(--body-radius))) rotateY(180deg); backface-visibility: hidden; }
.device-print { position: absolute; top: 4.8%; left: 19%; width: 63.4%; height: auto; mix-blend-mode: multiply; user-select: none; -webkit-user-drag: none; }
/* 40 tangent planes per semicircle, with a subpixel overlap to close seams. */
.device-curve {
  position: absolute; top: 0;
  left: calc(var(--rail-center) + var(--body-radius) * var(--arc-x));
  width: calc(var(--body-radius) * .078520 + .7px); height: 100%;
  transform: translateX(-50%) translateZ(calc(var(--body-radius) * var(--arc-z))) rotateY(var(--arc-angle));
  backface-visibility: hidden;
  background: linear-gradient(180deg, #ffffff33 0, transparent 2.5%, #333c4166 2.8%, #eef3f466 3%, transparent 3.3%, transparent 96.5%, #38434866 96.8%, #eaf2f366 97.1%, #7b898b33 97.4%), linear-gradient(90deg, var(--arc-start), var(--arc-end));
}
.device-top, .device-bottom {
  position: absolute; left: 0; width: 100%; height: calc(var(--body-radius) * 2);
  border-radius: 999px; backface-visibility: hidden;
  background: linear-gradient(170deg, #e2e6e7, #9eaaae 60%, #758287);
  box-shadow: inset 0 0 0 1px #bac5c8, inset 0 0 0 3px #ffffff18;
}
.device-top { top: calc(-1 * var(--body-radius)); transform: rotateX(90deg); }
.device-bottom { bottom: calc(-1 * var(--body-radius)); transform: rotateX(-90deg); background: linear-gradient(0deg, #657277, #a6b1b4); }
.cap-screw { position: absolute; top: 28%; width: 14%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #6c787c; background: linear-gradient(150deg, #e9eded, #8b989e); box-shadow: inset 0 0 0 2px #bac3c6; }
.cap-screw-left { left: 5%; } .cap-screw-right { right: 5%; }
.cap-screw::before, .cap-screw::after { content: ''; position: absolute; inset: 44% 20%; border-radius: 1px; background: #626e73; box-shadow: 0 1px 0 #e2e6e7; }
.cap-screw::after { transform: rotate(90deg); }
.cap-connector { position: absolute; left: 37%; top: 29%; width: 26%; height: 44%; display: flex; align-items: center; justify-content: space-evenly; border: 3px solid #50585b; border-radius: 2px; background: #c3b995; box-shadow: inset 0 -3px 0 #827c67, 0 0 0 1px #d5dcdd; }
.cap-connector i { width: 7%; height: 17%; background: #47483b; box-shadow: 0 1px 0 #e3d9b9; }
.cap-hole { position: absolute; left: 23%; top: 65%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: #333e42; box-shadow: 0 0 0 1px #b8c4c8, inset 0 1px 2px #111; }
.device-button {
  --button-size: calc(var(--device-width) * .16);
  --button-rise: calc(var(--device-width) * .024);
  position: absolute; top: 8%; left: 66.5%; width: var(--button-size); height: var(--button-size);
  transform: translateZ(calc(var(--body-radius) + 1px)); transform-style: preserve-3d;
}
.button-seat, .button-chamfer { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; }
.button-seat { inset: -2px; background: #19253a; box-shadow: 2px 5px 5px #1c242b88, 0 0 0 1px #d2d9db; }
.button-wall {
  position: absolute; left: 50%; top: 50%; width: calc(var(--button-size) * .098491 + .3px); height: var(--button-rise);
  background: #202eab; backface-visibility: hidden;
  transform: translate(-50%, -50%) translateZ(calc(var(--button-rise) / 2)) rotateZ(var(--wall-angle)) translateY(calc(var(--button-size) / -2)) rotateX(90deg);
}
.button-chamfer { transform: translateZ(var(--button-rise)); background: conic-gradient(from 20deg, #637af9, #2635ac 32%, #2835a9 54%, #b1bcff 78%, #637af9); box-shadow: 0 0 0 .5px #24368f; }
.button-chamfer::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: linear-gradient(125deg, #4159ef, #354ce0); box-shadow: 0 0 0 .5px #5269ee; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-render-stage:hover .product-device { transform: translateY(-21px) rotateX(23deg) rotateY(-20deg) rotateZ(21deg); }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 24px; }
  .product-device { --device-width: clamp(295px, 35vw, 385px); }
  .product-scene { min-height: 520px; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .product-device { --device-width: min(70vw, 410px); }
  .product-scene { min-height: min(104vw, 570px); }
  .product-scene::before { bottom: 3%; }
}
@media (prefers-reduced-motion: reduce) { .product-device { transition: none; } }