/* Restore the original blue hero/header treatment without changing other sections. */
#top button,
#top a[role="button"],
#top input[type="button"],
#top input[type="submit"],
#top a[class*="btn"],
#top a[class*="Btn"],
#top a[class*="button"],
#top a[class*="Button"],
#top a[class*="cta"],
#top a[class*="Cta"] {
  transition:
    background-color .24s ease,
    background .24s ease,
    background-position .32s ease,
    color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    opacity .24s ease,
    filter .24s ease !important;
}

#top button:hover,
#top button:focus-visible,
#top button:active,
#top a[role="button"]:hover,
#top a[role="button"]:focus-visible,
#top a[role="button"]:active,
#top input[type="button"]:hover,
#top input[type="button"]:focus-visible,
#top input[type="button"]:active,
#top input[type="submit"]:hover,
#top input[type="submit"]:focus-visible,
#top input[type="submit"]:active,
#top a[class*="btn"]:hover,
#top a[class*="btn"]:focus-visible,
#top a[class*="btn"]:active,
#top a[class*="Btn"]:hover,
#top a[class*="Btn"]:focus-visible,
#top a[class*="Btn"]:active,
#top a[class*="button"]:not(.hero-cta):hover,
#top a[class*="button"]:not(.hero-cta):focus-visible,
#top a[class*="button"]:not(.hero-cta):active,
#top a[class*="Button"]:hover,
#top a[class*="Button"]:focus-visible,
#top a[class*="Button"]:active,
#top a[class*="cta"]:hover,
#top a[class*="cta"]:focus-visible,
#top a[class*="cta"]:active,
#top a[class*="Cta"]:hover,
#top a[class*="Cta"]:focus-visible,
#top a[class*="Cta"]:active {
  transform: none !important;
}

#top a[class*="cta"]:hover span,
#top a[class*="Cta"]:hover span,
#top a[class*="btn"]:hover span,
#top a[class*="Btn"]:hover span {
  transform: none !important;
}

#top .nav {
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, color .45s ease !important;
}

#top .nav.hero-active {
  background: rgba(34, 83, 160, .82) !important;
  border-color: rgba(196, 226, 255, .58) !important;
  box-shadow: 0 10px 35px rgba(10, 48, 115, .2), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

#top .nav.hero-active .wordmark img {
  filter: brightness(0) invert(1) !important;
}

#top .nav.hero-active .nav-links,
#top .nav.hero-active .nav-login,
#top .nav.hero-active .language-trigger,
#top .nav.hero-active .product-menu-trigger {
  color: rgba(255, 255, 255, .84) !important;
}

#top .nav.hero-active .nav-links > a:hover,
#top .nav.hero-active .product-menu-trigger:hover,
#top .nav.hero-active .product-menu-trigger[aria-expanded="true"],
#top .nav.hero-active .language-trigger:hover,
#top .nav.hero-active .language-trigger[aria-expanded="true"] {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
}

#top .nav.hero-active .button {
  /* Keep the CTA legible against the dark hero chrome. */
  background: linear-gradient(135deg, #e8f4ff, #b9ddff 60%, #8fc5ff) !important;
  border-color: transparent !important;
  color: #0b4f9e !important;
}

#top .nav.hero-active .button:hover,
#top .nav.hero-active .button:focus-visible {
  background: linear-gradient(135deg, #f4f9ff, #d2e9ff 60%, #abd4ff) !important;
  color: #083d7d !important;
}

/* Keep the restored dark hero chrome above later landing polish styles. */
#top.site .nav.hero-active {
  background: rgba(48, 104, 190, .9) !important;
  border-color: rgba(196, 226, 255, .2) !important;
  box-shadow: 0 10px 35px rgba(8, 36, 92, .18), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

#top.site .nav.hero-active .wordmark img {
  filter: brightness(0) invert(1) !important;
}

#top.site .nav.hero-active .nav-links,
#top.site .nav.hero-active .nav-login,
#top.site .nav.hero-active .language-trigger,
#top.site .nav.hero-active .product-menu-trigger,
#top.site .nav.hero-active .nav-links > a {
  color: rgba(255, 255, 255, .9) !important;
}

#top.site .nav.hero-active .nav-links > a:hover,
#top.site .nav.hero-active .nav-links > a:focus-visible,
#top.site .nav.hero-active .product-menu-trigger:hover,
#top.site .nav.hero-active .product-menu-trigger:focus-visible,
#top.site .nav.hero-active .product-menu-trigger[aria-expanded="true"],
#top.site .nav.hero-active .language-trigger:hover,
#top.site .nav.hero-active .language-trigger:focus-visible,
#top.site .nav.hero-active .language-trigger[aria-expanded="true"],
#top.site .nav.hero-active .nav-login:hover {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
}

#top .nav:not(.hero-active) .wordmark img {
  filter: none !important;
}

#top .hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #8fc2f1 0%, #b9def8 48%, #eff8ff 100%) !important;
  color: #fff !important;
}

#top .hero:before {
  z-index: -2 !important;
  inset: 0 !important;
  background:
    radial-gradient(42% 62% at 50% 18%, rgba(255, 255, 255, .34), transparent 72%),
    radial-gradient(28% 48% at 12% 42%, rgba(255, 255, 255, .2), transparent 72%),
    linear-gradient(180deg, rgba(86, 155, 224, .06), rgba(234, 246, 255, .9)) !important;
}

#top .hero:after {
  /* The animated SideRays canvas is the sole hero motion layer. */
  display: none !important;
  background: none !important;
  animation: none !important;
}

#top .hero .side-rays-canvas {
  /* Keep the rays above the hero paint layers, below the readable content. */
  z-index: 0 !important;
  opacity: .94 !important;
  filter: brightness(1.2) saturate(.98) contrast(1.06) !important;
  mix-blend-mode: screen !important;
}

#top .hero h1,
#top .hero h1 em {
  color: #fff !important;
}

#top .hero h1 {
  animation: heroReveal .7s cubic-bezier(.22, .61, .36, 1) .32s both !important;
}

#top .hero h1 em {
  color: #fff !important;
  text-shadow: none !important;
}

#top .hero-copy {
  color: #fff !important;
  text-shadow: none !important;
  animation: heroReveal .7s cubic-bezier(.22, .61, .36, 1) .4s both !important;
}

#top .flow-caption,
#top .flow-caption b {
  color: rgba(223, 241, 255, .92) !important;
}

#top .hero-actions {
  animation: heroReveal .7s cubic-bezier(.22, .61, .36, 1) .48s both !important;
  /* Add a calm gap below the hero statement so the controls do not crowd it. */
  margin-top: 28px !important;
}

#top .hero-actions .button:not(.ghost) {
  background: linear-gradient(135deg, #1e8bff, #006dfa 60%, #0055cc) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 109, 250, .32) !important;
}

#top .hero-actions .button.ghost,
#top .hero-actions .button.ghost:hover,
#top .hero-actions .button.ghost:focus-visible {
  background: rgba(255, 255, 255, .68) !important;
  border-color: rgba(23, 105, 232, .2) !important;
  color: #1769e8 !important;
  box-shadow: none !important;
}

#top .hero .demo {
  color: var(--ink) !important;
  animation: heroReveal .7s cubic-bezier(.22, .61, .36, 1) .56s both !important;
}

/* Only the hero-to-next-section transition: a soft blue wave matching the reference. */
#top .hero + .section {
  position: relative !important;
  margin-top: 0 !important;
  z-index: 1 !important;
}

#top .hero + .section > * {
  position: relative !important;
  z-index: 1 !important;
}

#top .hero + .section::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: -3% !important;
  right: -3% !important;
  top: -34px !important;
  height: 54px !important;
  background: #acd6f8 !important;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #top .nav,
  #top .hero:after,
  #top .hero h1,
  #top .hero-copy,
  #top .hero-actions,
  #top .hero .demo {
    animation: none !important;
    transition: none !important;
  }

  #top .hero-actions .button {
    transition: none !important;
  }
}

@media (max-width: 520px) {
  #top .hero-actions {
    margin-top: 22px !important;
  }
}

/* Calm CTA feedback: a gentle color wash, never movement or glare. */
#top .hero-actions .button {
  position: relative !important;
  z-index: 3 !important;
  cursor: pointer !important;
  transition:
    background-position .42s ease,
    background-color .32s ease,
    border-color .32s ease,
    color .32s ease,
    box-shadow .32s ease,
    opacity .32s ease !important;
}

#top .hero-actions .button:not(.ghost) {
  background: linear-gradient(135deg, #1e8bff, #006dfa 60%, #0055cc) !important;
  background-size: 200% 100% !important;
  background-position: 0 50% !important;
  box-shadow: 0 7px 18px rgba(15, 88, 183, .2) !important;
}

#top .hero-actions .button:not(.ghost):hover,
#top .hero-actions .button:not(.ghost):focus-visible {
  background-position: 100% 50% !important;
  box-shadow: 0 9px 22px rgba(15, 88, 183, .25) !important;
}

#top .hero-actions .button.ghost,
#top .hero-actions .button.ghost:visited {
  background: rgba(224, 237, 251, .56) !important;
  border-color: rgba(35, 103, 180, .16) !important;
  color: #185da7 !important;
  box-shadow: 0 4px 14px rgba(52, 111, 173, .08) !important;
}

#top .hero-actions .button.ghost:hover,
#top .hero-actions .button.ghost:focus-visible {
  background: rgba(236, 245, 255, .78) !important;
  border-color: rgba(35, 103, 180, .26) !important;
  color: #145394 !important;
  box-shadow: 0 6px 17px rgba(52, 111, 173, .13) !important;
}

#top .mini.is-selected {
  background: #e4f1ff !important;
  border-color: #9ec8f2 !important;
  color: #145394 !important;
}

/* Final hero paint guard: keeps the animated blue field intact when later
   landing enhancements inject section-level theme styles. */
#top main > section#hero.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #2867d1 0%, #438fe1 48%, #dceeff 100%) !important;
  color: #fff !important;
}

#top main > section#hero.hero::before {
  z-index: -2 !important;
  inset: 0 !important;
  background:
    radial-gradient(42% 62% at 50% 18%, rgba(255, 255, 255, .2), transparent 72%),
    radial-gradient(28% 48% at 12% 42%, rgba(172, 220, 255, .2), transparent 72%),
    linear-gradient(180deg, rgba(22, 71, 163, .05), rgba(220, 238, 255, .82)) !important;
}

#top main > section#hero.hero::after {
  display: none !important;
  background: none !important;
  animation: none !important;
}

#top main > section#hero.hero > .side-rays-canvas {
  z-index: 0 !important;
  opacity: .94 !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.2) saturate(1) contrast(1.04) !important;
}

#top main > section#hero.hero > .hero-grid {
  position: relative !important;
  z-index: 1 !important;
}

/* Keep the header contents close to the capsule edges on both sides. */
#top .nav-inner,
#top .nav.is-scrolled .nav-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Hero statement: a compact human + AI lockup that stays readable over the blue hero. */
#top .hero .hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 620px;
  margin: 18px 0 24px;
  color: #fff !important;
  font-family: Manrope, sans-serif;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.075em;
}

#top .hero .hero-title-muted {
  color: rgba(235, 246, 255, .92) !important;
  text-shadow: 0 1px 8px rgba(42, 98, 168, .2);
  text-align: center;
}

#top .hero .hero-title-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  column-gap: .18em;
  font-size: .84em;
  color: #fff !important;
}

#top .hero .hero-title-line em {
  color: #f7fbff !important;
  font-style: normal;
}

#top .hero .hero-title-plus {
  color: #dcecff;
  letter-spacing: -.03em;
}

#top .hero .hero-title-icon {
  width: .72em;
  height: .72em;
  flex: 0 0 auto;
}

#top .hero .hero-title-fingerprint {
  color: #1769e8;
  filter: brightness(1.16) saturate(.92) drop-shadow(0 0 10px rgba(23, 105, 232, .24));
}

#top .hero .hero-title-spark {
  color: #1769e8;
  filter: brightness(1.16) saturate(.92) drop-shadow(0 0 10px rgba(23, 105, 232, .28));
  display: none;
}

@media (max-width: 850px) {
  #top .hero .hero-title {
    max-width: 700px;
    font-size: clamp(44px, 10.5vw, 64px);
  }
}

@media (max-width: 520px) {
  #top .hero .hero-title {
    font-size: clamp(39px, 12.5vw, 58px);
  }

  #top .hero .hero-title-line {
    font-size: .78em;
    column-gap: .12em;
  }
}

/* Final type pass: enlarge the hero lockup and keep the supporting UI light. */
@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 300;
  src: url("assets/fonts/Onest-Regular.woff2") format("woff2");
  font-display: swap;
}

#top .site {
  font-weight: 300;
}

#top .site :where(p, span, a, button, small, li, label, strong, b, h3, h4, h5, h6) {
  font-weight: 300 !important;
}

/* The display face remains expressive while body copy and controls stay thin. */
#top .site :where(h1, h2, .hero-title, .hero-title *, .price-amount, .proof-avatar, .portrait, .compression-col h3) {
  font-weight: 800 !important;
}

#top .hero .hero-title {
  font-size: clamp(56px, 7vw, 96px);
}

/* Spacious hero pass: give the headline room to breathe and let the blue field
   carry the eye naturally toward the first content section. */
#top .hero {
  padding-top: 156px !important;
  padding-bottom: 188px !important;
  min-height: 760px !important;
}

#top .hero .hero-title {
  max-width: 780px !important;
  font-size: clamp(68px, 8.4vw, 122px) !important;
  line-height: 1.02 !important;
  row-gap: .08em !important;
  letter-spacing: -.085em !important;
}

#top .hero .hero-copy {
  max-width: 620px !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.45 !important;
}

@media (max-width: 850px) {
  #top .hero .hero-title {
    font-size: clamp(52px, 12vw, 84px);
  }

  #top .hero {
    padding-top: 118px !important;
    padding-bottom: 150px !important;
    min-height: 680px !important;
  }
}

@media (max-width: 520px) {
  #top .hero .hero-title {
    font-size: clamp(46px, 14vw, 70px);
  }

  #top .hero {
    padding-top: 96px !important;
    padding-bottom: 124px !important;
    min-height: 610px !important;
  }
}