/* Product work is the hero artwork: real device concepts, not abstract decoration. */
.hero-art.product-showcase {
  position: relative;
  isolation: isolate;
  min-height: 840px;
  overflow: hidden;
  border: 1px solid #e3eee7;
  border-radius: 26px;
  background: #f6fbf8;
}

.product-showcase::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(11, 100, 61, .10) 50%, transparent 50.1%),
    linear-gradient(rgba(11, 100, 61, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 100, 61, .055) 1px, transparent 1px);
  background-size: auto, 100% 82px, 82px 100%;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.product-showcase::after {
  position: absolute;
  z-index: -1;
  top: -28%;
  right: -9%;
  width: 49%;
  height: 130%;
  border: 1px solid rgba(7, 134, 77, .14);
  border-radius: 50%;
  content: '';
}

.showcase-heading { display: block; }
.showcase-heading span { display: block; color: #087a48; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.showcase-heading p { margin: 10px 0 0; color: #315547; font-family: Georgia, serif; font-size: 20px; line-height: 1.16; }

.showcase-device {
  --product: #07864d;
  position: absolute;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(9, 58, 35, .20), 0 3px 9px rgba(9, 58, 35, .08);
}

.showcase-device::after { position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: var(--product); content: ''; }
.showcase-device img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-device figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: baseline; gap: 10px; padding: 13px 15px 12px; background: linear-gradient(to right, rgba(255,255,255,.98), rgba(255,255,255,.86)); color: #163d2e; }
.showcase-device figcaption b { color: var(--product); font-size: 16px; letter-spacing: -.04em; }
.showcase-device figcaption span { color: #5e7369; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.device-siyana { top: 188px; bottom: auto; left: 5%; width: 52%; aspect-ratio: 1.78; transform: rotate(-1.4deg); }
.device-medcore { top: 43px; right: 5%; width: 27%; aspect-ratio: 1.78; --product: #1b70da; transform: rotate(1.2deg); }
.device-pacs { top: 290px; right: 5%; bottom: auto; left: auto; z-index: 2; width: 27%; aspect-ratio: 1.78; --product: #1676dd; transform: rotate(-1deg); }
.device-pacs img { object-position: 64% center; }
.device-scanit { right: 5%; bottom: 43px; width: 27%; aspect-ratio: 1.78; --product: #724bde; transform: rotate(1deg); }

.showcase-stamp { position: absolute; z-index: 4; top: 50%; right: auto; bottom: auto; left: 62%; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #d9eadf; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 22px rgba(19, 73, 47, .09); color: #214a38; font-size: 11px; font-weight: 800; transform: translate(-50%, -50%); }
.showcase-stamp img { width: 20px; height: 20px; object-fit: contain; }

@media (max-width: 850px) {
  .hero-art.product-showcase { min-height: 650px; }
  .showcase-heading { top: 26px; left: 26px; max-width: 210px; }
  .showcase-heading p { font-size: 16px; }
  .showcase-heading { display: none; }
  .device-siyana { top: 108px; bottom: auto; left: 4%; width: 54%; }
  .device-medcore { top: 38px; right: 4%; width: 29%; }
  .device-pacs { top: 240px; right: 4%; bottom: auto; left: auto; width: 29%; }
  .device-scanit { right: 4%; bottom: 38px; width: 29%; }
}

@media (max-width: 580px) {
  .hero-art.product-showcase { min-height: 500px; border-radius: 18px; }
  .showcase-heading { top: 20px; left: 20px; max-width: 185px; }
  .showcase-heading span { font-size: 8px; }
  .showcase-heading p { font-size: 15px; }
  .showcase-device { border-width: 4px; border-radius: 10px; }
  .showcase-device::after { height: 3px; }
  .device-siyana { top: 30px; bottom: auto; left: 4%; width: 62%; }
  .device-medcore { top: 36px; right: 3%; width: 31%; }
  .device-pacs { top: 186px; right: 3%; bottom: auto; left: auto; width: 31%; }
  .device-scanit { right: 3%; bottom: 40px; width: 31%; }
  .showcase-device figcaption { display: block; padding: 6px 8px; }
  .showcase-device figcaption b { display: block; font-size: 11px; }
  .showcase-device figcaption span { font-size: 6px; }
  .showcase-stamp { top: 50%; right: 50%; bottom: auto; padding: 5px 7px; font-size: 9px; }
  .showcase-stamp img { width: 16px; height: 16px; }
}