/* Code-native device mockups: retain the existing readable demo screens. */
.hero-scene { isolation: isolate; }
.laptop {
  position: relative;
  padding: 16px 10px 12px;
  border: 1px solid #858d98;
  border-radius: 17px 17px 9px 9px;
  background: linear-gradient(135deg, #353e4a, #111821 42%, #242c37);
  box-shadow: inset 0 0 0 2px #c2c8d0, inset 0 0 0 3px #464e59,
    0 14px 24px -16px rgb(9 23 43 / 55%);
}
.laptop::before {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6596b0, #182d3a 55%, #050910);
  box-shadow: 0 0 0 1px #0b1018;
}
.laptop::after {
  content: '';
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border-radius: 13px 13px 5px 5px;
  background: linear-gradient(125deg, rgb(255 255 255 / 13%), transparent 33%, transparent 73%, rgb(255 255 255 / 5%));
}
.laptop .dashboard { border: 1px solid #303c4b; border-radius: 5px; }
.laptop-base {
  position: absolute;
  top: calc(100% - 1px);
  left: -6%;
  width: 112%;
  height: 51px;
  background: linear-gradient(#c4cbd4, #eef1f5 70%, #b4bbc4 72%, #eef0f4 78%, #939daa 95%);
  clip-path: polygon(5.4% 0, 94.6% 0, 100% 78%, 99% 94%, 96% 100%, 4% 100%, 1% 94%, 0 78%);
  filter: drop-shadow(0 12px 7px rgb(32 51 74 / 20%));
}
.laptop-keyboard {
  position: absolute;
  top: 4px;
  left: 13%;
  width: 74%;
  height: 22px;
  border: 2px solid #a5aeb9;
  border-radius: 3px;
  transform: perspective(110px) rotateX(24deg);
  background: repeating-linear-gradient(0deg, transparent 0 4px, #a6aeb8 4px 6px),
    repeating-linear-gradient(90deg, #35404d 0 12px, #a6aeb8 12px 14px);
  box-shadow: inset 0 1px 2px #1b2533;
}
.laptop-trackpad {
  position: absolute;
  left: 43%;
  bottom: 11px;
  width: 14%;
  height: 10px;
  border: 1px solid #a4adb8;
  border-radius: 2px;
  background: linear-gradient(#ced5df, #e4e8ed);
}
.phone {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 20px;
  width: 122px;
  padding: 4px;
  border: 1px solid #7d8794;
  border-radius: 25px;
  background: linear-gradient(115deg, #eef1f5, #7e8999 32%, #dce1e9 72%, #646f7f);
  box-shadow: inset 1px 0 1px white, inset -1px 0 1px #4b5868,
    5px 14px 22px -9px rgb(21 40 68 / 45%);
}
.phone-screen {
  overflow: hidden;
  min-height: 231px;
  padding: 23px 7px 18px;
  border: 3px solid #141c28;
  border-radius: 20px;
  background: linear-gradient(125deg, white, #f2f6fc 60%, #e7eefb);
}
.phone::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 11px;
  left: calc(50% - 17px);
  width: 34px;
  height: 7px;
  border-radius: 9px;
  background: radial-gradient(circle at 27px 3.5px, #34627d 1px, transparent 2px), #121923;
}
.phone::after {
  content: '';
  position: absolute;
  bottom: 11px;
  left: calc(50% - 15px);
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: #253044;
}
@media (max-width: 699px) {
  .laptop { padding: 11px 7px 8px; border-radius: 12px 12px 6px 6px; }
  .laptop::before { top: 4px; width: 3px; height: 3px; }
  .laptop::after { border-radius: 9px 9px 4px 4px; }
  .laptop-base { height: 34px; }
  .laptop-keyboard { top: 2px; height: 15px; background-size: auto; border-width: 1px; }
  .laptop-trackpad { height: 7px; bottom: 7px; }
  .phone { width: 82px; padding: 3px; bottom: 15px; border-radius: 18px; }
  .phone-screen { min-height: 153px; padding: 15px 4px 12px; border-width: 2px; border-radius: 14px; }
  .phone::before { top: 8px; left: calc(50% - 11px); width: 22px; height: 5px; background: radial-gradient(circle at 17px 2.5px, #34627d .8px, transparent 1.5px), #121923; }
  .phone::after { bottom: 8px; left: calc(50% - 10px); width: 20px; height: 2px; }
}