/* ===============================================================
   Hero — Numbers you can build a business on
   All colours come from custom properties set in module.html.
   =============================================================== */

.ss-hero {
  --ss-paper: #EEF2F6;
  --ss-muted: #8FA6BE;
  --ss-shell: clamp(1.25rem, 5vw, 5.5rem);
  --ss-step: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --ss-lede-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --ss-display: clamp(2.2rem, 1rem + 4vw, var(--ss-headline-max, 70px));

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: calc(var(--ss-nav, 0rem) + var(--ss-pad-top, 5rem)) var(--ss-shell) var(--ss-pad-bottom, 1.5rem);
  background: var(--ss-deep, #04122A);
  color: var(--ss-paper);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 400;
  line-height: 1.5;
}
.ss-hero *,
.ss-hero *::before,
.ss-hero *::after { box-sizing: border-box; }

.ss-inner { position: relative; max-width: 82rem; margin: 0 auto; width: 100%; }
.ss-copy { max-width: 62rem; }

/* ---------------- even spacing down the first screen ----------------
   Rather than each block carrying its own margin, the column spreads the
   space it has, so the section never feels bunched at the top. */
.ss-hero--fill { min-height: var(--ss-min-h, 92vh); display: flex; align-items: stretch; }
@supports (min-height: 92svh) { .ss-hero--fill { min-height: calc(var(--ss-min-h, 92vh) * 1svh / 1vh); } }
.ss-hero--fill .ss-inner { display: flex; flex-direction: column; flex: 1; }
.ss-hero--fill .ss-copy {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 2.1rem);
}
.ss-hero--fill .ss-eyebrow,
.ss-hero--fill .ss-headline,
.ss-hero--fill .ss-lede,
.ss-hero--fill .ss-actions,
.ss-hero--fill .ss-trust { margin: 0; }
.ss-hero--fill .ss-rule { margin: 0; }
.ss-hero--fill .ss-trust { padding-top: clamp(.9rem, 1.6vw, 1.3rem); }
.ss-hero--fill .ss-compliance { margin-top: auto; padding-top: clamp(1.4rem, 3vw, 2.4rem); }

/* ---------------- background stack ---------------- */
.ss-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.ss-bg__photo {
  position: absolute; inset: 0;
  background-image: var(--ss-photo, none);
  background-size: cover;
  background-position: var(--ss-photo-position, center);
  filter: var(--ss-photo-filter, none);
  mix-blend-mode: var(--ss-photo-blend, normal);
  opacity: var(--ss-photo-opacity, .34);
}
.ss-bg__wash {
  position: absolute; inset: -25%;
  background:
    radial-gradient(40% 46% at 78% 46%, rgba(var(--ss-blue-rgb, 10,91,255), .58), transparent 70%),
    radial-gradient(36% 42% at 12% 88%, rgba(var(--ss-blue-rgb, 10,91,255), .30), transparent 72%),
    radial-gradient(28% 32% at 92% 86%, rgba(var(--ss-blue-rgb, 10,91,255), .16), transparent 70%);
  animation: ss-drift 30s ease-in-out infinite alternate;
}
@keyframes ss-drift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1.02); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.09); }
}
.ss-bg__grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(140,180,255,.11) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to right,  rgba(140,180,255,.07) 0 1px, transparent 1px 104px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 58%, transparent);
          mask-image: linear-gradient(to bottom, #000 0 58%, transparent);
}
/* keeps a clean edge under a fixed header, and holds contrast under the text */
.ss-bg__ceiling {
  position: absolute; inset: 0 0 auto; height: 40%;
  background: linear-gradient(to bottom,
    rgba(2,10,24, calc(var(--ss-scrim, .45) * 2)) 0%,
    rgba(2,10,24, var(--ss-scrim, .45)) 55%,
    transparent);
}
.ss-bg__floor {
  position: absolute; inset: auto 0 0; height: 46%;
  background: linear-gradient(to top, var(--ss-deep, #04122A) 12%, rgba(4,18,42,.55) 55%, transparent);
}

/* ---------------- layout ---------------- */
.ss-copy { min-width: 0; }

/* ---------------- type ---------------- */
.ss-eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem;
  margin: 0 0 1.25rem;
  font-size: .9375rem; font-variation-settings: "wght" 600; color: #DCE8F7;
}
.ss-eyebrow i { display: block; width: 2.25rem; height: 2px; background: var(--ss-accent, #D8FA4C); flex: none; }

.ss-headline {
  margin: 0;
  font-size: var(--ss-display);
  line-height: .98;
  letter-spacing: -.035em;
  font-variation-settings: "wdth" 92, "wght" 780;
  color: #fff;
  max-width: 26ch;
  opacity: 0; transform: translateY(20px);
}
.ss-hero.is-in .ss-headline {
  opacity: 1; transform: none;
  transition: opacity .8s ease .05s, transform .9s cubic-bezier(.16,.84,.3,1) .05s;
}
.ss-headline .ac { color: var(--ss-accent, #D8FA4C); }
.ss-headline .ss-line { display: block; }
/* the slot is as wide as the longest word, so keep that line intact rather than
   letting the reserved width push the word onto a line of its own */
.ss-headline .ss-line--rot { white-space: nowrap; }

/* ---------------- rotating word ---------------- */
.ss-rot {
  position: relative; display: inline-block; vertical-align: baseline;
  width: var(--rot-w, 6em); color: var(--ss-accent, #D8FA4C);
  line-height: inherit;
  /* clip-path, not overflow: an inline-block with overflow hidden takes its
     baseline from its bottom edge, which knocks the word out of line with the
     words beside it. clip-path hides the roll without touching the baseline. */
  clip-path: inset(0);
  padding: .16em 0 .24em; margin: -.16em 0 -.24em;
}
.ss-rot__sizer { visibility: hidden; white-space: nowrap; }
.ss-rot__set { position: absolute; inset: .16em 0 auto 0; }
.ss-rot__w { position: absolute; inset: 0 auto auto 0; white-space: nowrap; will-change: transform, opacity; }

/* roll */
[data-rot="roll"] .ss-rot__w { transform: translateY(105%); opacity: 0; }
[data-rot="roll"] .ss-rot__w.is-on { transform: none; opacity: 1; transition: transform .6s cubic-bezier(.16,.84,.3,1), opacity .3s ease; }
[data-rot="roll"] .ss-rot__w.is-off { transform: translateY(-105%); opacity: 0; transition: transform .6s cubic-bezier(.5,0,.75,0), opacity .4s ease; }

/* type */
[data-rot="type"] .ss-rot { clip-path: none; width: auto; }
[data-rot="type"] .ss-rot__sizer { display: none; }
[data-rot="type"] .ss-rot__set { position: static; }
[data-rot="type"] .ss-rot__w { position: static; opacity: 1; transform: none; }
[data-rot="type"] .ss-rot::after {
  content: ""; display: inline-block; width: .06em; height: .74em; margin-left: .04em;
  background: var(--ss-accent, #D8FA4C); vertical-align: -.02em;
  animation: ss-caret 1s steps(1) infinite;
}
@keyframes ss-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* blur */
[data-rot="blur"] .ss-rot { clip-path: none; }
[data-rot="blur"] .ss-rot__w { opacity: 0; filter: blur(10px); transform: scale(.96); }
[data-rot="blur"] .ss-rot__w.is-on { opacity: 1; filter: none; transform: none; transition: opacity .5s ease, filter .5s ease, transform .6s cubic-bezier(.16,.84,.3,1); }
[data-rot="blur"] .ss-rot__w.is-off { opacity: 0; filter: blur(10px); transform: scale(1.04); transition: opacity .4s ease, filter .4s ease, transform .5s ease; }

/* narrow screens: the word takes its own line rather than squeezing the headline */
@media (max-width: 40rem) {
  .ss-headline .ss-line--rot { white-space: normal; }
  .ss-rot { display: block; width: 100% !important; clip-path: none; }
}

.ss-rule {
  width: 5.5rem; height: 2px; margin: 1.75rem 0 0;
  background: var(--ss-blue, #0A5BFF);
  transform: scaleX(0); transform-origin: left;
}
.ss-hero.is-in .ss-rule { transform: scaleX(1); transition: transform .8s cubic-bezier(.16,.84,.3,1) .5s; }

.ss-lede { margin: 1.5rem 0 2rem; font-size: var(--ss-lede-size); max-width: 44ch; color: #C2D3E4; }

/* ---------------- buttons ---------------- */
.ss-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.6rem; border-radius: 999px; text-decoration: none;
  font-size: var(--ss-step); font-variation-settings: "wght" 620;
  border: 1px solid transparent;
  transition: background .25s, border-color .25s, color .25s, filter .25s;
}
.ss-btn--solid { background: var(--ss-accent, #D8FA4C); color: var(--ss-accent-text, #08182B); }
.ss-btn--solid:hover { filter: brightness(.93); }
.ss-btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; }
.ss-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.ss-hero a:focus-visible, .ss-hero button:focus-visible {
  outline: 2px solid var(--ss-accent, #D8FA4C); outline-offset: 3px; border-radius: 4px;
}

/* ---- hero buttons ---- */
.ss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.ss-hero .ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variation-settings: "wght" 620;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease,
              color .25s ease, filter .25s ease, transform .12s ease;
}

/* filled — first button, or anything explicitly marked solid */
.ss-hero .ss-actions .ss-btn:first-child,
.ss-hero .ss-btn--solid {
  background: #D8FA4C;
  color: #08182B;
  border-color: #D8FA4C;
}
.ss-hero .ss-actions .ss-btn:first-child:hover,
.ss-hero .ss-btn--solid:hover {
  background: #C8EE2E;
  border-color: #C8EE2E;
  color: #08182B;
}

/* outlined — every other button, or anything explicitly marked ghost */
.ss-hero .ss-actions .ss-btn:not(:first-child),
.ss-hero .ss-btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .34);
}
.ss-hero .ss-actions .ss-btn:not(:first-child):hover,
.ss-hero .ss-btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #ffffff;
  color: #ffffff;
}

/* shared states */
.ss-hero .ss-btn:active { transform: translateY(1px); }
.ss-hero .ss-btn:focus-visible {
  outline: 2px solid #D8FA4C;
  outline-offset: 3px;
}

/* ---------------- credentials line ---------------- */
.ss-trust {
  margin: 1.75rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.14);
  max-width: 52ch; font-size: .9375rem; color: var(--ss-muted, #8FA6BE);
}
.ss-trust p { margin: 0; }
.ss-trust strong { font-variation-settings: "wght" 600; font-weight: 600; color: #DCE8F7; }

/* ---------------- compliance strip ---------------- */
.ss-compliance {
  position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: 1.1rem 0 1.6rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  font-size: .875rem; color: #A8BDD2;
}
.ss-compliance p { margin: 0; }
.ss-compliance strong { font-variation-settings: "wght" 600; color: #fff; }

/* ---------------- entrance ---------------- */
.ss-fade { opacity: 0; transform: translateY(14px); }
.ss-hero.is-in .ss-fade {
  opacity: 1; transform: none;
  transition: opacity .7s ease .55s, transform .7s cubic-bezier(.16,.84,.3,1) .55s;
}
.ss-hero.is-in .ss-fade.ss-d2 { transition-delay: .68s; }
.ss-hero.is-in .ss-fade.ss-d3 { transition-delay: .8s; }

/* ---------------- responsive ---------------- */


/* phones: stats wrap two-up instead of squeezing three across */
@media (max-width: 30rem) {
  .ss-compliance { gap: .35rem; }
}

/* ---------------- failsafe ----------------
   If module.js never runs — a theme error, a blocked script, a slow bundle —
   this reveals everything at 3s so nothing is ever stuck invisible. When the
   animation does run it finishes long before this, and the end values are
   identical, so it has no visible effect. */
.ss-headline,
.ss-fade {
  animation: ss-reveal 0s linear 3s forwards;
}
@keyframes ss-reveal {
  to { opacity: 1; transform: none; }
}

/* ---------------- accessibility ---------------- */
@media (prefers-reduced-motion: reduce) {
  .ss-hero *, .ss-hero *::before, .ss-hero *::after {
    animation: none !important;
    transition: none !important;
  }
  .ss-headline { opacity: 1; transform: none; }
  .ss-rot__w { position: static; opacity: 1; filter: none; transform: none; }
  .ss-rot__w:not(.is-on) { display: none; }
  .ss-rot::after { animation: none; }
  .ss-rule { transform: none; }
  .ss-fade { opacity: 1; transform: none; }
}

/* the HubSpot editor preview should never show a mid-animation state */
body.hs-inline-edit .ss-headline,
body.hs-inline-edit .ss-fade { opacity: 1; transform: none; }