.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));
}

/* 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: 600px) {
  .hero-banner__stats[data-herostats] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@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__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__cta,
  .hero-banner__secondary-link,
  .hero-banner__secondary-arrow,
  .hero-banner__secondary-underline,
  .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;
  }