/* Homepage cinematic technology video hero with a stable no-shift fallback. */
body.home-page {
  background: #020611;
}

body.home-page .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1200;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

body.home-page .site-header.is-scrolled,
body.home-page.menu-open .site-header {
  background: rgba(3, 8, 22, .75);
  border-bottom-color: rgba(126, 228, 255, .14);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

/* The package cards already show the starting price, so the extra badge is hidden. */
.home-page .pricing-note-pill {
  display: none !important;
}

@media (min-width: 760px) {
  .home-page .pricing-panel-top {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.home-3d-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: max(720px, 100svh);
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 72% 32%, rgba(18, 142, 255, .27), transparent 33rem),
    radial-gradient(circle at 35% 18%, rgba(24, 224, 255, .10), transparent 25rem),
    linear-gradient(135deg, #01030a 0%, #041026 54%, #082c4c 100%);
  border-bottom: 1px solid rgba(112, 229, 255, .14);
}

.home-3d-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 4, 13, .94) 0%, rgba(1, 4, 13, .82) 31%, rgba(1, 4, 13, .42) 58%, rgba(1, 4, 13, .17) 100%),
    linear-gradient(180deg, rgba(1, 4, 13, .18) 0%, rgba(1, 4, 13, .02) 48%, rgba(1, 4, 13, .78) 100%);
}

.home-3d-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(89, 225, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 225, 255, .08) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, transparent 5%, #000 58%, transparent 100%);
}

.hero-tech-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  opacity: .72;
  background: transparent;
  filter: saturate(1.08) contrast(1.03) brightness(.82);
  transition: opacity .55s ease;
  pointer-events: none;
}

.home-3d-hero.video-ready .hero-tech-video {
  opacity: .92;
}

.home-3d-hero.video-disabled .hero-tech-video {
  display: none;
}

.hero-3d-canvas,
.hero-3d-noise,
.hero-3d-scan,
.hero-3d-stage,
.hero-3d-status {
  display: none !important;
}

.home-3d-hero .hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-top: 112px;
  padding-bottom: 88px;
}

.home-3d-hero .hero-copy {
  width: min(690px, 100%);
}

.home-3d-hero .eyebrow {
  color: #79eaff;
  text-shadow: 0 0 22px rgba(34, 230, 255, .24);
}

.home-3d-hero h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(3.15rem, 6.6vw, 6.25rem);
  line-height: .95;
  letter-spacing: -.072em;
  text-wrap: balance;
  text-shadow: 0 12px 38px rgba(0, 0, 0, .35);
}

.home-3d-hero .hero-lead {
  max-width: 680px;
  color: rgba(226, 240, 255, .91);
  text-shadow: 0 5px 20px rgba(0, 0, 0, .32);
}

.home-3d-hero .hero-actions {
  margin-top: 26px;
}

.home-3d-hero .btn.secondary {
  background: rgba(4, 15, 34, .48);
  border-color: rgba(188, 236, 255, .23);
  backdrop-filter: blur(10px);
}

.home-3d-hero .quick-points span {
  background: rgba(3, 14, 32, .46);
  border-color: rgba(188, 236, 255, .17);
  backdrop-filter: blur(8px);
}

.hero-scroll-cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 24px;
  width: 28px;
  height: 44px;
  border: 1px solid rgba(190, 239, 255, .38);
  border-radius: 12px;
  transform: translateX(-50%);
}

.hero-scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 9px;
  border-radius: 4px;
  background: #7ceeff;
  box-shadow: 0 0 14px rgba(73, 229, 255, .88);
  transform: translateX(-50%);
  animation: ctlVideoScroll 1.8s ease-in-out infinite;
}

@keyframes ctlVideoScroll {
  0%, 100% { transform: translate(-50%, 0); opacity: .45; }
  50% { transform: translate(-50%, 12px); opacity: 1; }
}

@media (max-width: 980px) {
  body.home-page .site-header {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.home-page .site-header.is-scrolled,
  body.home-page.menu-open .site-header {
    background: rgba(3, 8, 22, .75);
    border-bottom-color: rgba(126, 228, 255, .12);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
  }

  .home-3d-hero::before {
    background:
      linear-gradient(180deg, rgba(1, 4, 13, .44) 0%, rgba(1, 4, 13, .34) 24%, rgba(1, 4, 13, .84) 68%, rgba(1, 4, 13, .96) 100%),
      linear-gradient(90deg, rgba(1, 4, 13, .36), rgba(1, 4, 13, .12));
  }

  .hero-tech-video {
    object-position: 56% center;
    opacity: .62;
    filter: saturate(1.03) contrast(1.03) brightness(.76);
  }

  .home-3d-hero.video-ready .hero-tech-video {
    opacity: .82;
  }

  .home-3d-hero .hero-content {
    align-items: end;
    padding-top: 132px;
    padding-bottom: 72px;
  }

  .home-3d-hero .hero-copy {
    width: min(720px, 100%);
  }
}

@media (max-width: 640px) {
  .home-3d-hero {
    min-height: 720px;
  }

  .home-3d-hero::after {
    opacity: .10;
    background-size: 58px 58px;
  }

  .hero-tech-video {
    object-position: 54% center;
  }

  .home-3d-hero .hero-content {
    min-height: 720px;
    align-items: end;
    padding-top: 108px;
    padding-bottom: 54px;
  }

  .home-3d-hero .eyebrow {
    margin-bottom: 10px;
    font-size: .7rem;
    letter-spacing: .145em;
  }

  .home-3d-hero h1 {
    max-width: 100%;
    margin-bottom: 16px;
    font-size: clamp(2.7rem, 12vw, 3.55rem);
    line-height: .98;
    letter-spacing: -.062em;
  }

  .home-3d-hero .hero-lead {
    margin-bottom: 18px;
    font-size: .98rem;
    line-height: 1.52;
  }

  .home-3d-hero .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 18px;
  }

  .home-3d-hero .hero-actions .btn {
    width: 100%;
    min-height: 50px;
    padding: 11px 16px;
  }

  .home-3d-hero .quick-points {
    gap: 7px;
    margin-top: 15px;
  }

  .home-3d-hero .quick-points span {
    padding: 6px 9px;
    font-size: .75rem;
  }

  .hero-scroll-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tech-video {
    transition: none;
  }

  .hero-scroll-cue::after {
    animation: none;
  }
}