/* =========================================================================
   Homepage — Hero background video (.vh-hero__stage)
   Plays a muted, looping cinematic clip behind the top hero content
   (headline + floating phone/cards). A medium navy tint keeps the white copy
   readable. The phone is a transparent PNG cutout sitting directly on the
   video; the four proof-point cards float over it.
   Isolated file — delete it (and its <link> in index.html) to remove the video.
   ========================================================================= */

.vh-hero { padding-top: 0; }             /* let the video reach the top of the hero */

.vh-hero__stage {
  position: relative;
  overflow: clip;                        /* clip the full-bleed video to this box */
  padding-top: 128px;                    /* was on .vh-hero (home.css:315) */
  padding-bottom: 88px;                  /* breathing room before the awards strip */
}

.vh-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.vh-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Cinematic navy vignette: a soft corner-darkening radial over a vertical
     navy gradient (lighter at top so the footage breathes, deeper toward the
     base to ground the awards strip and keep white copy AAA-legible). Replaces
     the old flat rgba(10,26,63,0.62) tint with real depth. */
  background:
    radial-gradient(130% 125% at 50% 32%, rgba(4, 13, 46, 0) 52%, rgba(4, 13, 46, 0.42) 100%),
    linear-gradient(180deg, rgba(10, 26, 63, 0.48) 0%, rgba(10, 26, 63, 0.58) 42%, rgba(4, 13, 46, 0.72) 100%);
  pointer-events: none;
}

.vh-hero__stage > .vh-container {
  position: relative;
  z-index: 2;
}

@media (max-width: 860px) {              /* mirror home.css .vh-hero padding */
  .vh-hero__stage { padding-top: 80px; padding-bottom: 56px; }
}

/* ---- entrance + idle float for the big product shot ---- */
@media (prefers-reduced-motion: no-preference) {
  .vh-hero__phonewrap { animation: vh-hero-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both, vh-hero-float 7.5s ease-in-out 700ms infinite; }
}

@keyframes vh-hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .vh-hero__video { display: none; }     /* tint + navy remain as a static bg */
  .vh-hero__phonewrap { animation: none !important; opacity: 1 !important; }
}