.hero-product.macbook-showcase {
  --menu-bar-ratio: 0.0162037037;
  --tray-x: 0.7068865741;
  --tray-y: 0.5892857143;
  --menu-bar-zoom: 2.7870967742;
  --menu-bar-image: url("assets/screenshots/desktop-menubar.webp?v=20260914-hero-smooth");
  --desktop-wallpaper: url("assets/desktop-wallpaper.webp?v=20260914-hero");
  display: block;
  width: min(1160px, 100%);
  margin: 132px auto 0;
  padding: 0 0 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}

.macbook-base::after {
  position: absolute;
  z-index: -1;
  right: 6%;
  bottom: -14px;
  left: 6%;
  height: 45px;
  border-radius: 50%;
  background: rgba(28, 50, 68, 0.19);
  filter: blur(20px);
  content: "";
}

.macbook-display {
  position: relative;
  width: 91.5%;
  margin: 0 auto;
  padding: 17px 12px 20px;
  border: 2px solid #9ba3aa;
  border-bottom-color: #747c85;
  border-radius: 26px 26px 6px 6px;
  background: linear-gradient(130deg, #22282d, #090c0f 38%, #171c20 90%);
  box-shadow: 0 0 0 1px #444e58, inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 26px 80px rgba(27, 54, 80, 0.14);
}

.macbook-display::before {
  position: absolute;
  top: 6px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border: 1px solid #293340;
  border-radius: 50%;
  background: #121c2c;
  content: "";
}

.macbook-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  container-type: inline-size;
}

.macbook-desktop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
  background: var(--desktop-wallpaper);
  background-size: cover;
  background-position: center;
}

.macbook-desktop::before {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.macbook-desktop .app-shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.3cqw;
  background: #fff;
  box-shadow: 0 2.4cqw 5cqw rgba(26, 51, 63, 0.25), 0 0 0 1px rgba(40, 61, 72, 0.13);
  transform: none;
}

.macbook-desktop .app-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.macbook-desktop .macbook-dashboard {
  top: 9%;
  left: 6%;
  width: 52%;
  aspect-ratio: 1540 / 1640;
}

.macbook-desktop .macbook-summary {
  top: 19%;
  right: 7.5%;
  width: 26.5%;
  aspect-ratio: 800 / 980;
}

.macbook-screen .macbook-menu-bar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px 7px 0 0;
  cursor: zoom-in;
}

.macbook-menu-bar > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.macbook-menu-lens {
  position: absolute;
  z-index: 6;
  top: calc(100% * var(--tray-y));
  left: calc(100% * var(--tray-x));
  display: block;
  width: 16cqw;
  height: 16cqw;
  overflow: hidden;
  border: clamp(2px, 0.4cqw, 4px) solid #fff;
  border-radius: 50%;
  background: #13181c;
  box-shadow: 0 1.6cqw 4.5cqw rgba(26, 52, 73, 0.19), 0 0 0 1px rgba(83, 113, 138, 0.05);
  translate: -50% -50%;
}

.macbook-menu-zoom {
  --zoomed-screen-width: calc(100cqw * var(--menu-bar-zoom));
  position: absolute;
  top: calc(50% - var(--zoomed-screen-width) * var(--menu-bar-ratio) * var(--tray-crop-y, var(--tray-y)));
  left: calc(50% - var(--zoomed-screen-width) * var(--tray-crop-x, var(--tray-x)));
  display: block;
  width: var(--zoomed-screen-width);
  height: calc(var(--zoomed-screen-width) * 0.625);
  background: var(--desktop-wallpaper);
  background-size: cover;
  background-position: center;
}

.macbook-menu-zoom::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: calc(var(--zoomed-screen-width) * 0.0151);
  border-top: 2px solid #939ca5;
  background: linear-gradient(#313940 0 6%, #101519 12%);
  content: "";
}

.macbook-menu-zoom::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--zoomed-screen-width) * var(--menu-bar-ratio));
  background-image: var(--menu-bar-image);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}

.macbook-base {
  position: relative;
  z-index: 7;
  width: 100%;
  height: 21px;
  margin-top: -1px;
  border: 1px solid #9ca4ac;
  border-top-color: #e2e6e9;
  border-bottom-color: #707880;
  border-radius: 2px 2px 34px 34px / 2px 2px 15px 15px;
  background: linear-gradient(90deg, #aab1b8, #e2e6e9 7%, #bac1c7 21%, #edf0f2 49%, #c5cbd0 80%, #dfe4e8 94%, #989fa7);
  box-shadow: inset 0 4px 2px rgba(255, 255, 255, 0.65), inset 0 -5px 3px rgba(75, 86, 96, 0.23);
}

.macbook-base::before {
  position: absolute;
  top: -1px;
  left: 43%;
  width: 14%;
  height: 8px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(#949da6, #d1d7dc);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(71, 82, 94, 0.18);
  content: "";
}

@media (max-width: 760px) {
  .hero-product.macbook-showcase { margin-top: 100px; }
  .macbook-display { padding: 11px 8px 13px; border-radius: 17px 17px 4px 4px; }
  .macbook-display::before { top: 3px; width: 3px; height: 3px; }
  .macbook-base { height: 15px; }
  .macbook-base::before { height: 6px; }
}

@media (max-width: 520px) {
  .hero-product.macbook-showcase { margin-top: 78px; }
  .macbook-display { width: 94%; padding: 8px 5px 9px; border-width: 1px; border-radius: 12px 12px 3px 3px; }
  .macbook-screen .macbook-menu-bar,
  .macbook-desktop { border-radius: 4px 4px 0 0; }
  .macbook-display::before { top: 2px; width: 2px; height: 2px; border: 0; }
  .macbook-base { height: 10px; }
  .macbook-base::before { height: 4px; }
}