/* Persistent navigation and device hardware. */
.header{position:fixed;inset:0 0 auto;z-index:60;background:rgb(250 252 255 / 94%);border-bottom:1px solid rgb(28 48 90 / 10%);box-shadow:0 4px 24px rgb(18 32 61 / 5%);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
section[id],#how-it-works,#contact,#main-content{scroll-margin-top:100px}
@media(max-width:700px){section[id],#how-it-works,#contact{scroll-margin-top:84px}}
/* Match the reference's thin metal edge and dark glass, without changing tilt. */
.product-stage .desktop-app,
.product-stage .hero-phone {
  isolation: isolate;
  overflow: visible;
  border-color: #111620;
  box-shadow: 0 1px 1px #050b1490,
    2px 8px 9px #12203924,
    5px 22px 27px #15253d27,
    8px 40px 55px #15253d14;
}
.product-stage .desktop-app { border-radius: 18px; }
.product-stage .desktop-app .app-bar { border-radius: 10px 10px 0 0; }
.product-stage .desktop-app .app-body {
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}
.device-casing {
  position: absolute;
  left: -7px;
  top: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}
.product-stage .hero-phone { border-radius: 29px; }
.hero-phone > .device-casing {
  left: -5px;
  top: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}
.device-notch {
  position: absolute;
  top: -1px;
  left: 32%;
  width: 36%;
  height: 4.2%;
  background: linear-gradient(110deg, #1f2530, #080c12 60%, #151b25);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 1px 0 #ffffff12;
  z-index: 6;
  pointer-events: none;
}
.device-notch i {
  position: absolute;
  left: 27%; top: 31%; width: 35%; height: 15%;
  border-radius: 5px; background: #03060a;
  box-shadow: 0 1px 0 #74839822;
}
.device-notch b {
  position: absolute;
  right: 14%; top: 24%; width: 8%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 37% 35%, #587493 0%, #1b3755 25%, #080f1b 60%);
  box-shadow: 0 0 0 1px #46536544;
}
.hero-phone-top { padding-top: 3px; }
.hero-phone-home { background: #141922; opacity: .9; }
@media(min-width:901px) and (max-width:1150px) {
  .desktop-app > .device-casing { left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px); }
  .hero-phone > .device-casing { left:-4px;top:-4px;width:calc(100% + 8px);height:calc(100% + 8px); }
}