.hero-banner {
  --hb-navy: #0b1020;
  --hb-gray: #5a6472;
  --hb-blue: #2f6bff;
  --hb-blue-light: #5a8cff;
  --hb-blue-strong: #2547e0;
  --hb-red: #ef3e2e;

  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 0%;
  padding: 96px 40px 90px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, #f6f9ff 0%, #fbfcff 46%, #fff 100%);
   
}

/* Layered backdrop
   ========================================================================== */
.hero-banner__bg-mesh {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: min(100%, 900px);
  display: block;
  pointer-events: none;
  z-index: 0;
}

.hero-banner__bg-glow {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(47, 107, 255, 0.2), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
}

.hero-banner__bg-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-banner__bg-blob--blue {
  left: 6%;
  top: 34%;
  width: 230px;
  height: 230px;
  background: rgba(47, 107, 255, 0.16);
  filter: blur(64px);
  animation: hero-banner-blob 11s ease-in-out infinite;
}

.hero-banner__bg-blob--red {
  right: 5%;
  top: 20%;
  width: 210px;
  height: 210px;
  background: rgba(239, 62, 46, 0.12);
  filter: blur(66px);
  animation: hero-banner-blob 13s ease-in-out infinite reverse;
}

.hero-banner__bg-blob--amber {
  right: 16%;
  bottom: 14%;
  width: 190px;
  height: 190px;
  background: rgba(255, 171, 0, 0.14);
  filter: blur(60px);
  animation: hero-banner-blob 15s ease-in-out infinite;
}

@keyframes hero-banner-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -24px) scale(1.08); }
}

/* Content container
   ========================================================================== */
.hero-banner__container {
  position: relative;
  max-width: 1350px;
  margin: 0 auto;
}

.hero-banner__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Entrance animation
   Fade + translate-up reveal for the above-the-fold hero content (badge,
   heading, subheading, CTAs). These render immediately on load rather than
   on scroll, so a plain staggered CSS animation is used instead of the
   IntersectionObserver-driven [data-reveal] treatment further down the
   section (which only fires once those parts scroll into view).
   ========================================================================== */
@keyframes hero-banner-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-banner__badge,
.hero-banner__heading,
.hero-banner__subheading,
.hero-banner__cta-wrap {
  animation: hero-banner-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-banner__badge { animation-delay: 0s; }
.hero-banner__heading { animation-delay: 0.1s; }
.hero-banner__subheading { animation-delay: 0.2s; }
.hero-banner__cta-wrap { animation-delay: 0.3s; }

/* Badge
   ========================================================================== */
.hero-banner__badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(47, 107, 255, 0.08);
  border: 1px solid rgba(47, 107, 255, 0.22);
  color: var(--hb-blue-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-banner__badge-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.hero-banner__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hb-blue);
  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.2);
  flex-shrink: 0;
}

/* Heading & rotating phrase
   ========================================================================== */
.hero-banner__heading {
  margin-top: 26px;
  font-size: 60px !important;
  font-weight: 800;
  letter-spacing: normal;
  line-height: 1.1;
  color: var(--hb-navy) !important;
}

.hero-banner__heading-line {
  display: block;
  color: var(--hb-navy);
}

.hero-banner__phrase-wrap {
  display: inline-grid;
  justify-items: center;
  text-align: center;
  line-height: 1.3;
  padding-bottom: 0.16em;
  overflow: visible;
}

.hero-banner__phrase-sizer {
  grid-column: 1;
  grid-row: 1;
  visibility: hidden;
  white-space: nowrap;
}

.hero-banner__phrase-visible {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero-banner__phrase-text {
  display: inline-block;
  padding-bottom: 0.08em;
}

.hero-banner__phrase-text {
  color: var(--hb-blue);
}

.hero-banner__phrase-text > span {
  background: linear-gradient(100deg, var(--hb-blue), var(--hb-blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hb-blue);
  transition: opacity 0.02s linear;
}

.hero-banner__phrase-caret {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 0.9em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hb-blue), var(--hb-blue-light));
  animation: hero-banner-caretblink 1s steps(1) infinite;
}

@keyframes hero-banner-caretblink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero-banner__subheading {
  max-width: 1080px;
  margin: 28px auto 0;
  font-size: 20px;
  line-height: 1.7;
  color: var(--hb-gray);
}

/* CTAs
   ========================================================================== */
.hero-banner__cta-wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-banner__cta {
  background: var(--hb-red);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 17px 32px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(239, 62, 46, 0.34);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-banner__cta:hover,
.hero-banner__cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(239, 62, 46, 0.46);
}

.hero-banner__cta:focus-visible {
  outline: 2px solid var(--hb-navy);
  outline-offset: 3px;
}

.hero-banner__cta-arrow {
  font-size: 18px;
}

.hero-banner__secondary-link {
  background: none;
  color: var(--hb-blue-strong);
  font-weight: 700;
  font-size: 16px;
  padding: 17px 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hero-banner__secondary-link:hover,
.hero-banner__secondary-link:focus-visible {
  color: var(--hb-blue);
}

.hero-banner__secondary-link:focus-visible {
  outline: 2px solid var(--hb-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.hero-banner__secondary-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-banner__secondary-link:hover .hero-banner__secondary-arrow,
.hero-banner__secondary-link:focus-visible .hero-banner__secondary-arrow {
  transform: translateX(5px);
}

.hero-banner__secondary-underline {
  position: absolute;
  left: 4px;
  right: 28px;
  bottom: 11px;
  height: 2px;
  background: linear-gradient(90deg, var(--hb-blue-strong), var(--hb-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-banner__secondary-link:hover .hero-banner__secondary-underline,
.hero-banner__secondary-link:focus-visible .hero-banner__secondary-underline {
  transform: scaleX(1);
}

.hero-banner__cta-footnote {
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--hb-gray);
}

/* Herostats trust bar
   ========================================================================== */
.hero-banner__stats {
  position: relative;

  max-width: 90%;
  margin: 56px auto 0;

  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(47, 107, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 10px 30px -18px rgba(16, 30, 80, 0.28);
  backdrop-filter: blur(4px);
  text-align: left;
  overflow: hidden;
}

.hero-banner__stats::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.22), rgba(239, 62, 46, 0.16));
  clip-path: circle(0% at 0% 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

@keyframes hero-banner-stats-wave {
  0% {
    clip-path: circle(0% at 0% 100%);
  }
  100% {
    clip-path: circle(150% at 100% 0%);
  }
}

.hero-banner__stats:hover::after {
  opacity: 1;
  animation: hero-banner-stats-wave 3.2s cubic-bezier(0.45, 0, 0.15, 1) 1 forwards;
}

.hero-banner__stats > * {
  position: relative;
  z-index: 1;
}

.hero-banner__stats-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.hero-banner__stats-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 0;
}

.hero-banner__avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-banner__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 30, 80, 0.16);
  background: #e3eaf7;
}

.hero-banner__avatar + .hero-banner__avatar {
  margin-left: -12px;
}

.hero-banner__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-banner__avatar--overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hb-blue);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

.hero-banner__rating {
  text-align: left;
}

.hero-banner__stars {
  display: flex;
  gap: 2px;
  color: #f5a524;
  font-size: 14px;
  margin-bottom: 6px;
}

.hero-banner__stats-caption {
  font-size: 13px;
  font-weight: 600;
  color: #3a4356;
  line-height: 1.55;
  white-space: nowrap;
}

.hero-banner__stats-right {
  display: flex;
  align-items: center;
  gap: 46px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  padding-left: 30px;
  border-left: 1px solid rgba(47, 107, 255, 0.16);
  flex-shrink: 0;
}

.hero-banner__stat {
  text-align: left;
}

.hero-banner__stat-top {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
}

.hero-banner__stat-number {
  font-size: 25px !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hb-navy) !important;
  line-height: 1;
  flex-shrink: 0;
}

.hero-banner__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  font-size: 20px;
  color: #2f6bff;
  line-height: 1;
  align-self:end;
}

.hero-banner__stat-icon i {
  line-height: 1;
}

.hero-banner__stat-label {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hb-navy);
  white-space: nowrap;
  perspective: 300px;
}

.hero-banner__stat-sublabel {
  margin-top: 5px;
  font-size: 12px;
  color: var(--hb-gray);
  white-space: nowrap;
  perspective: 300px;
}

/* Per-letter "transform in" reveal - module.js wraps .hero-banner__stat-label
   and .hero-banner__stat-sublabel text into one <span class="hero-banner__letter">
   per character, then adds .is-lettered (with each span's animation-delay
   already staggered inline) once the herostats bar scrolls into view. */
.hero-banner__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px) rotateX(75deg);
  transform-origin: 50% 100%;
}

.is-lettered .hero-banner__letter {
  animation: hero-banner-letter-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes hero-banner-letter-in {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

/* Client logos strip
   ========================================================================== */
.hero-banner__clients {
  max-width: 1400px;
  margin: 64px auto 0;
  padding: 0 250px;
}

.hero-banner__clients-caption {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--hb-gray);
  text-transform: uppercase;
}

.hero-banner__clients-mq {
  position: relative;
  margin: 30px auto 0;
  max-width: 1100px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.hero-banner__clients-logos {
  --gap: 24px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 48px;
  width: max-content;
  will-change: transform;
  animation: hero-banner-clients-scroll 28s linear infinite;
}

.hero-banner__clients-mq:hover .hero-banner__clients-logos {
  animation-play-state: paused;
}

@keyframes hero-banner-clients-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - var(--gap)), 0, 0); }
}

.hero-banner__client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.hero-banner__client-logo img {
  height: 25px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  opacity: 0.92;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover: logos cycle through 4 distinct motion styles (lift+glow, tilt,
   pop-scale, slide+brighten) so the strip doesn't feel like one animation
   copy-pasted across every logo. */
.hero-banner__client-logo:hover img {
  opacity: 1;
  filter: grayscale(0%);
}




.hero-banner__client-logo:hover img {
  transform: translateY(-6px);
  filter: grayscale(0%) drop-shadow(0 10px 16px rgba(47, 107, 255, 0.35));
}
/* Hero product thumbnail
   ========================================================================== */
.hero-banner__thumb {
  position: relative;
  max-width: 1120px;
  margin: 70px auto 0;
  border-radius: 24px;
  padding: 1.5px;
  scale: 1.06;
  rotate: x 6deg;
  translate: 0 26px;
  will-change: scale, rotate, translate;
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.45), rgba(120, 160, 255, 0.28) 50%, rgba(47, 107, 255, 0.45));
  box-shadow: 0 50px 110px -34px rgba(16, 30, 80, 0.5);
  animation: hero-banner-floaty 9s ease-in-out infinite;
}

@keyframes hero-banner-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.hero-banner__thumb-inner {
  position: relative;
  /* Locked to the actual video's own native ratio (1920x1080) — this is
     what lets the video below sit flush with the frame with no empty
     bars: the box already matches its shape exactly. */
  aspect-ratio: 16 / 9;
  border-radius: 22.5px;
  overflow: hidden;
  background: #fff;
}

.hero-banner__thumb-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease;
}

.hero-banner__thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* "cover" — fills the frame completely with no letterbox bars. If the
     source video's own native aspect ratio doesn't exactly match this
     box's 16:9, "cover" crops the overflow rather than adding empty bars
     the way "contain" did. --hb-thumb-video-position controls WHICH edge
     gets cropped: if burned-in subtitles/captions sit near the bottom of
     the source footage and are getting clipped, change this to something
     like "center 20%" or "top" so more of the bottom stays visible; if a
     logo/watermark near the top is clipped instead, use "bottom". Default
     is dead center. */
  object-fit: cover;
  object-position: var(--hb-thumb-video-position, center);
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* The image/video crossfade follows `is-active`. Unlike earlier, this
   class is now added once (the first time the video ever starts) and
   never removed again by script — so once playback has started for the
   first time, the video (showing its current frame, paused or playing)
   stays visible permanently. It does NOT revert back to the static
   thumbnail image on a later pause, whether that pause came from
   scrolling the thumb out of view or the browser tab going to the
   background. */
.hero-banner__thumb.is-active .hero-banner__thumb-video {
  opacity: 1;
}

.hero-banner__thumb.is-active .hero-banner__thumb-image {
  opacity: 0;
}

.hero-banner__thumb.is-active .hero-banner__play {
  opacity: 0;
  pointer-events: none;
}

/* Bar visibility is intentionally decoupled from `is-active` (which now
   stays on permanently once the video has ever started). The bar instead
   follows `controls-visible`, toggled by module.js on interaction/pause
   and auto-removed after a couple seconds of idle playback — otherwise a
   permanently-on bar sits directly over the bottom of the video, which is
   exactly where burned-in subtitles/captions tend to be, and blocks them
   for the entire time the video plays. */
.hero-banner__thumb.is-active.controls-visible .hero-banner__thumb-bar {
  opacity: 1;
  pointer-events: auto;
}

/* Control bar — the video always starts trying for sound (autoplay-on-
   hover has no guaranteed user gesture, so browsers can still force it
   back to muted), so play/pause, seek, mute and speed are real, working
   controls, not decoration. */
.hero-banner__thumb-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(16, 20, 31, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.hero-banner__thumb-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.hero-banner__thumb-btn:hover,
.hero-banner__thumb-btn:focus-visible {
  opacity: 1;
}

.hero-banner__thumb-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero-banner__thumb-icon-alt {
  display: none;
}

.hero-banner__thumb.is-playing .hero-banner__thumb-playpause .hero-banner__thumb-icon-main {
  display: none;
}

.hero-banner__thumb.is-playing .hero-banner__thumb-playpause .hero-banner__thumb-icon-alt {
  display: block;
}

.hero-banner__thumb.is-unmuted .hero-banner__thumb-mute .hero-banner__thumb-icon-main {
  display: none;
}

.hero-banner__thumb.is-unmuted .hero-banner__thumb-mute .hero-banner__thumb-icon-alt {
  display: block;
}

.hero-banner__thumb-rate {
  flex-shrink: 0;
  width: auto;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
}

.hero-banner__thumb-seek-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.hero-banner__thumb-seek {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.hero-banner__thumb-seek-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  background: #fff;
  pointer-events: none;
}

/* Slightly taller hit area than the visible bar, centered on it, so the
   seek bar is easy to click/drag without needing pixel-perfect aim. */
.hero-banner__thumb-seek::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  bottom: -8px;
}

.hero-banner__thumb-tooltip {
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff;
  color: #10141f;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.hero-banner__thumb-tooltip.is-visible {
  opacity: 1;
}

.hero-banner__thumb {
  cursor: pointer;
}

.hero-banner__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.hero-banner__play-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(47, 107, 255, 0.4);
  animation: hero-banner-playring 3.2s ease-out infinite;
}

.hero-banner__play-ring--2 {
  animation-delay: 1.06s;
}

.hero-banner__play-ring--3 {
  animation-delay: 2.13s;
}

@keyframes hero-banner-playring {
  0% { transform: scale(0.62); opacity: 0.55; }
  70% { opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.hero-banner__play-core {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(140deg, #3e74ff, #2049de);
  box-shadow: 0 14px 34px -8px rgba(32, 73, 222, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
  animation: hero-banner-playbob 5s ease-in-out infinite;
  will-change: transform;
}

.hero-banner__play-core i {
  color: #fff;
  font-size: 22px;
  margin-left: 4px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.hero-banner__thumb:hover .hero-banner__play-core,
.hero-banner__thumb:focus-visible .hero-banner__play-core {
  transform: scale(1.1);
  box-shadow: 0 22px 48px -8px rgba(32, 73, 222, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hero-banner__thumb:focus-visible {
  outline: 2px solid var(--hb-blue);
  outline-offset: 4px;
}

@keyframes hero-banner-playbob {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Breakpoints
   ========================================================================== */
@media (max-width: 1350px) {
  .hero-banner__stats-inner { flex-wrap: wrap; justify-content: center; gap: 20px 26px; }
}
@media (max-width: 1240px) {
  .hero-banner__clients { padding: 0 120px; }
}

@media (max-width: 1180px) {
  .hero-banner__stats { padding: 18px 22px; }
  .hero-banner__stats-inner { flex-wrap: wrap; justify-content: center; gap: 20px 26px; }
  .hero-banner__stats-right {
    padding-left: 45px;
    border-left: 0;
    border-top: 1px solid rgba(47, 107, 255, 0.16);
    padding-top: 20px;
    width: 100%;
    justify-content: left;
    flex-wrap: wrap;
    gap: 24px 34px;
  }
  .hero-banner__stats-caption,
  .hero-banner__stat-label,
  .hero-banner__stat-sublabel {
    white-space: normal;
  }
}

@media (max-width: 820px) {
  .hero-banner__clients { padding: 0 40px; }
  .hero-banner { padding: 40px 40px; }
  .hero-banner__heading { font-size: 50px !important; }
  .hero-banner__stat-number { font-size: 23px !important; }
  .hero-banner__stats-right {justify-content:left;}

  /* --- rotating phrase: allow wrap + stop layout jump ---
     Was gated at max-width:600px only, so between 601-820px the phrase
     stayed nowrap/shrink-to-fit and a long one overflowed past the
     container edge instead of wrapping/staying centered like it does on
     phones. Raised to match this breakpoint so tablet gets the same fix. */
  .hero-banner__phrase-wrap {
    width: 100%;
    max-width: 100%;
    min-height: 2.8em; 
    font-size:45px;/* reserves space for 2 lines so the section never jumps between phrases */
  }

  .hero-banner__phrase-sizer,
  .hero-banner__phrase-visible {
    display: block;           /* full-width block flow instead of shrink-to-fit inline-block */
    width: 100%;
    white-space: normal;
     word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    text-align: center;
    max-width: 100%;
  }

  .hero-banner__phrase-visible {
    align-self: center;       /* vertically centers 1-line phrases inside the reserved 2-line box */
  }

  /* NOTE: .hero-banner__phrase-caret intentionally keeps its base
     position: absolute here (do not override to static). The updated
     module.js now measures the exact on-screen position of the last
     revealed character via the Range API and writes both top/left to
     the caret every tick, so it tracks correctly whether the phrase
     is on one line or has wrapped to two. Switching it to static would
     make the browser silently ignore those top/left writes. */
}

@media (max-width: 600px) {
  .hero-banner__stats { padding: 16px 10px; max-width : 285px }
  .hero-banner__stats-right { gap: 18px 26px; }
  .hero-banner__clients-logos { --gap: 15px; gap: 30px; }
  .hero-banner__client-logo img { height: 22px; max-width: 110px; }
}

@media (max-width: 520px) {
  .hero-banner { padding: 40px 20px; }
  .hero-banner__clients { padding: 0 20px; }
  .hero-banner__stats-left { flex-direction: column; }
  .hero-banner__heading { font-size: 35px !important; }
  .hero-banner__stat-number { font-size: 21px !important; }
  .hero-banner__subheading { font-size: 18px !important; }
  .hero-banner__phrase-text{font-size:35px;}
  .hero-banner__phrase-wrap {
    min-height: 4.2em; /* 3 lines — only if a phrase actually needs it */
    padding-bottom: 0.05em;
  }
.hero-banner__badge {
    justify-content: center;
  }
}

/* Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-banner__bg-mesh {
    display: none;
  }

  .hero-banner__bg-blob,
  .hero-banner__phrase-caret,
  .hero-banner__thumb,
  .hero-banner__play-ring,
  .hero-banner__play-core,
  .hero-banner__badge,
  .hero-banner__heading,
  .hero-banner__subheading,
  .hero-banner__cta-wrap {
    animation: none;
  }

  .hero-banner__clients-mq {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-banner__clients-logos {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    transform: none;
  }

  .hero-banner__clients-logos [aria-hidden="true"] {
    display: none;
  }

  .hero-banner__thumb {
    scale: 1;
    rotate: none;
    translate: none;
  }

  .hero-banner__cta,
  .hero-banner__secondary-link,
  .hero-banner__secondary-arrow,
  .hero-banner__secondary-underline,
  .hero-banner__play-core,
  .hero-banner__thumb-video,
  .hero-banner__client-logo img {
    transition: none;
  }

  .hero-banner__letter {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-banner__client-logo:nth-child(4n+1):hover img,
  .hero-banner__client-logo:nth-child(4n+2):hover img,
  .hero-banner__client-logo:nth-child(4n+3):hover img,
  .hero-banner__client-logo:nth-child(4n+4):hover img {
    transform: none;
  }