.front { --header-height: 74px; --wallpaper: url("guseva-waves.webp"); }
.front .site-header { background: #0b1525; border-bottom: 1px solid #334762; margin-bottom: -1px; }
.front .product-hero {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  background: linear-gradient(105deg, #0b1525f5 4%, #0b1729d9 46%, #0a152bb0 100%), var(--wallpaper) center / cover #0b1525;
}
.front .product-hero-inner {
  width: min(1460px, calc(100% - clamp(48px, 10vw, 170px)));
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(2rem, 5vw, 5.5rem);
  padding-block: clamp(2.5rem, 7vh, 5.5rem) clamp(1.5rem, 5vh, 3.5rem);
}
.front .product-line { color: #a1d1ff; }
.front .product-hero .button:not(.secondary) { background: #95c9fb; }
.front .product-hero .button:not(.secondary):hover { background: #d8edff; }
.laptop { container-type: inline-size; }
.laptop-lid {
  width: 87%; margin-inline: auto; padding: 1.75% 1.15% 1.1%;
  border: 1px solid #8494a7; border-bottom-color: #263144; border-radius: 3.2cqw 3.2cqw .8cqw .8cqw;
  background: #03070e; position: relative; box-shadow: inset 0 1px 2px #c0cbdb76, 0 22px 45px #02071270;
}
.laptop-lid::before {
  content: ""; position: absolute; left: 50%; top: .62cqw;
  width: .55cqw; height: .55cqw; border-radius: 50%; background: #4e6077;
}
.laptop-display {
  aspect-ratio: 8 / 5; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .8cqw; border-radius: 1.5cqw 1.5cqw .45cqw .45cqw;
  background: var(--wallpaper) center / cover #0d2037;
}
.laptop-display .splash-mark { width: 29cqw; height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 5px 12px #030b23a0); }
.splash-name { color: #f1f7ff; font-size: 3.6cqw; letter-spacing: -.025em; font-weight: 680; }
.laptop-base {
  position: relative; height: 1.9cqw; background: linear-gradient(180deg,#c0c9d5 0%,#8192a7 25%,#3a4758 63%,#121b29 100%);
  border-radius: 0 0 48% 48% / 0 0 100% 100%; box-shadow: 0 12px 24px #030a1ca8;
}
.laptop-base::before { content: ""; position: absolute; top: 0; left: 41%; width: 18%; height: 40%; background: #222c3c; border-radius: 0 0 1cqw 1cqw; }
.front .laptop figcaption { margin-top: 1rem; color: #e0ecf9; }
.front .status { border-color: #a6c1de80; }
@media (max-width: 840px) {
  .front .product-hero { min-height: calc(100svh - 100px); }
  .front .product-hero-inner { width: min(640px, calc(100% - 36px)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .front .laptop figcaption { text-align: center; }
}