/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--dark);
  overflow: hidden;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header__logo {
  height: 27.37px;
  width: 173px;
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* Shorter than the original fixed 979px and capped to the viewport so the
     headline lands above the fold on entry. min() keeps it from ever exceeding
     the visible area (accounting for the sticky header), while 720px sets a
     sensible floor on very short/landscape windows. */
  height: min(760px, calc(100vh - 72px));
  min-height: 560px;
  padding-bottom: 72px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The background video plays by default; the static image is only a fallback
   for reduced-motion users (below). Hidden here so it doesn't stack on top. */
.hero__fallback {
  display: none;
}
/* Respect reduced-motion: don't autoplay a looping background. Hide the video
   and show the static poster image instead — keeps the hero beautiful and
   accessible. */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
  .hero__fallback {
    display: block;
  }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 15, 29, 0) 0%, rgba(9, 15, 29, 0.75) 75.94%);
}
.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 39px;
}
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.hero__title {
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -2.8px;
  color: #fff;
}
.hero__sub {
  font-size: 15px;
  color: var(--glaucous-3);
  width: 640px;
  max-width: 90vw;
}
.hero__buttons {
  display: flex;
  gap: 12px;
}

/* ===== STATS ===== */
.stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 96px;
  overflow: hidden;
}
.stats__row {
  display: flex;
  gap: 16px;
  width: var(--max-w);
  max-width: calc(100% - 48px);
  height: 450px;
}
.stats__card {
  position: relative;
  flex: 1 0 0;
  min-width: 188px;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stats__card-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.stats__card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.stats__card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(9, 15, 29, 0.01) 0%, rgba(9, 15, 29, 0.01) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 38%);
}
.stats__card--light .stats__card-bg::after {
  background: linear-gradient(90deg, rgba(9, 15, 29, 0.01) 0%, rgba(9, 15, 29, 0.01) 100%);
}
.stats__label {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -1.05px;
  color: #fff;
}
.stats__card--light .stats__label {
  color: #000;
}

/* ===== FEATURES SECTION ===== */
.features-section {
  background: #fff;
  padding: 96px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.features-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Tightened from 64px so the title reads as part of the same unit as the grid
     (#5), now that the feature items carry their own card spacing. */
  gap: 48px;
  width: 1024px;
  max-width: 100%;
}
/* Headline above the laptop sequence. Same 56px display size as the other
   section titles (§08), on the section's white background. */
.features-section__title {
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -2.8px;
  color: var(--carbon-black);
  text-align: center;
}

/* Feature grid */
.feature-grid {
  display: flex;
  gap: 64px;
  width: 1024px;
  max-width: 100%;
}
.feature-list {
  display: flex;
  flex-direction: column;
  /* Tightened from 64px (#3) — the items are now cards with their own padding,
     so a smaller gap keeps the column from feeling sparse next to the image. */
  gap: 20px;
  width: 331px;
  flex-shrink: 0;
}
/* Each feature is now a faint card (#1) — reusing the stats/persona card
   vocabulary (--stat-bg fill, --stat-border, --radius) so the section groups
   clearly and shares the site's visual language. */
.feature-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--stat-border);
  background: var(--stat-bg);
  /* Hover feedback (#1): subtle lift + border/shadow, matching the site's
     interaction language (stats cards, personas, accordion all respond). */
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .feature-item:hover {
    transform: translateY(-4px);
    border-color: var(--glaucous-5);
    box-shadow: 0 12px 28px rgba(35, 35, 35, 0.08);
  }
  /* Icon tints toward the brand blue on hover for a bit of life. */
  .feature-item:hover .feature-item__icon {
    filter: brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(3500%) hue-rotate(217deg) brightness(101%)
      contrast(101%);
  }
}
/* 44px slot keeps every heading's left edge aligned. `object-fit: contain`
   (#2) preserves each icon's aspect ratio and centres it in the slot WITHOUT
   the crop risk of `object-fit: none` (which clips anything larger than 44px). */
.feature-item__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter var(--dur-base) var(--ease-out);
}
.feature-item__text {
  flex: 1;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-item__heading {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--carbon-black);
}
.feature-item__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--glaucous-6);
}
.feature-image {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.feature-image__sticky {
  position: sticky;
  top: 0;
}
.feature-image__sticky img {
  width: 524px;
  height: 506px;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Staggered entrance (#6): the four items reveal in sequence using the site's
   existing --stagger-loose token, so this section feels as considered as the
   others. The global .reveal observer adds .is-visible; these delays only
   apply while the transform/opacity are still animating. Reduced-motion zeroes
   --stagger-loose (see tokens.css), so items appear together with no motion. */
.feature-list .feature-item:nth-child(1) {
  transition-delay: 0ms;
}
.feature-list .feature-item.reveal:nth-child(2).is-visible {
  transition-delay: var(--stagger-loose);
}
.feature-list .feature-item.reveal:nth-child(3).is-visible {
  transition-delay: calc(var(--stagger-loose) * 2);
}
.feature-list .feature-item.reveal:nth-child(4).is-visible {
  transition-delay: calc(var(--stagger-loose) * 3);
}

/* Responsive (#4): below ~900px stack the text column above the laptop image
   so neither gets squeezed, and drop the fixed column width. */
@media (max-width: 900px) {
  .feature-grid {
    flex-direction: column;
    gap: 40px;
  }
  .feature-list {
    width: 100%;
  }
  .feature-image__sticky {
    position: static;
  }
}

/* ===== GLOBE (§06) — pinned 450vh, 3-state =====
   Wrapper = 100vh (sticky viewport) + 450vh (scroll-through) = 550vh.
   Scroll-through raised from 250vh so each state holds longer and the section
   advances more gradually relative to scroll (the JS thresholds are fractions
   of the scroll-through, so they scale automatically). */
.globe-wrap {
  height: 550vh;
  position: relative;
}
.globe {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding-top: 72px;
  overflow: hidden;
}
.globe__bg {
  position: absolute;
  inset: 0;
}
.globe__frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.globe__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-90deg, rgba(0, 0, 0, 0) 74.34%, #000 100%),
    linear-gradient(-90deg, #000 0%, rgba(0, 0, 0, 0) 41.24%);
}
.globe__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.globe__title {
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -1.4px;
  color: #fff;
}
.globe__sub {
  font-size: 15px;
  color: var(--glaucous-3);
  width: 506px;
  max-width: 90vw;
}
/* Location freeze-frame overlays. Positioned over the globe, centered
   horizontally. Only the active one is visible; the whole group fades
   during a transition. */
.globe__locations {
  position: absolute;
  /* #3 Responsive: was a fixed top: 46%. clamp keeps the cards below the title
     on short screens (min 40%) while not drifting too low on tall ones
     (max 50%), preventing overlap with the title/subtitle. */
  top: clamp(40%, 46vh, 50%);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 223px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.globe__loc {
  position: absolute;
  top: 0;
  left: 0;
  width: 223px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  /* #4 Crossfade: all three cards are stacked and the wrapper (.globe__locations)
     fades to opacity 0 during a state transition, then back to 1 once the new
     state lands (handled by the JS controller). The per-card swap itself is
     INSTANT (no transition here) so it happens entirely while the wrapper is
     hidden — otherwise the outgoing left-aligned card and the incoming
     right-aligned card (London) would both be partly visible and the connector
     line/caption would appear to jump sides mid-scroll. Only the active card is
     visible/interactive. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.globe__loc.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.globe__loc-img {
  width: 223px;
  height: 128px;
  object-fit: cover;
  border-radius: var(--radius);
  /* #7 Softer treatment: replace the hard white keyline + white background with
     a subtle translucent border and a soft drop shadow, so the freeze-frame
     reads as a premium floating panel rather than a sticker on the globe. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.globe__loc-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
.globe__loc-city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -1.05px;
  color: #fff;
}
.globe__loc-flag {
  width: 19px;
  height: 19px;
  border-radius: 4px;
  object-fit: cover;
}
.globe__loc-workflow {
  font-size: 15px;
  color: #fff;
}
/* Connector line from the caption to the location point on the globe */
.globe__loc-line {
  width: 220px;
  height: 23.5px;
  display: block;
}
/* London's overlay is right-aligned; its caption and line mirror horizontally */
.globe__loc--end {
  align-items: flex-end;
}
.globe__loc--end .globe__loc-caption {
  text-align: right;
  align-items: flex-end;
}
.globe__loc--end .globe__loc-line {
  transform: scaleX(-1);
}
.globe__nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 12px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.globe:focus-within .globe__nav {
  opacity: 1;
}
.globe__nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.globe__nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* #3 Responsive: on narrow screens the fixed 223px card + 220px connector line
   can run off the frame. Scale the card, connector, and title down so the whole
   composition stays within the globe. */
@media (max-width: 600px) {
  .globe__title {
    font-size: 22px;
  }
  .globe__locations,
  .globe__loc {
    width: 180px;
  }
  .globe__loc-img {
    width: 180px;
    height: 103px;
  }
  .globe__loc-line {
    width: 178px;
    height: auto;
  }
  .globe__loc-city {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe-wrap {
    height: auto;
  }
  .globe {
    position: relative;
    height: auto;
    min-height: 80vh;
    padding: 96px 24px;
  }
  /* Show all three location blocks stacked; hide the nav */
  .globe__nav {
    display: none;
  }
  .globe__locations {
    position: static;
    transform: none;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
    align-items: center;
  }
  .globe__loc {
    position: static;
    display: flex;
    align-items: center;
    /* Crossfade base state hides inactive cards; under reduced motion we show
       all three stacked, so force them fully visible with no transform. */
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .globe__loc-caption {
    text-align: center;
    align-items: center;
  }
}

/* ===== WORKFLOW ===== */
.workflow {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 96px 0;
  position: relative;
  /* Vertical room reserved above the timeline for the floating state caption so
     the card can never sit on top of the intro copy. JS overwrites this with
     the tallest caption's measured height; the value here is the no-JS
     fallback (tallest card at the 474px design width, minus the 24px the card
     is allowed to overlap the timeline's own top edge). */
  --wf-caption-space: 152px;
}
.workflow__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.workflow__title {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--carbon-black);
}
.workflow__sub {
  font-size: 15px;
  color: var(--glaucous-6);
  width: 635px;
  max-width: 90vw;
}
/* Width is capped by JS (--wf-visual-w) so the timeline plus the reserved
   caption space still fit the pinned 100vh viewport. */
.workflow__visual {
  position: relative;
  width: var(--wf-visual-w, 1614px);
  max-width: 100%;
  margin: 0 auto;
  padding-top: var(--wf-caption-space);
}
.workflow__timeline {
  position: relative;
  width: 100%;
}
.workflow__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-in-out);
}
/* first layer establishes the box height */
.workflow__layer[data-state='0'] {
  position: relative;
}
.workflow__layer.is-active {
  opacity: 1;
}
/* Playhead: single sliding overlay. Moves between states with ease-in-out over
   --dur-slow, matching the track-highlight crossfade. Does not stay fixed.
   Positions match the (removed) baked-in marker: 13.1% / 27.7% / 73.0%. */
.workflow__playhead {
  position: absolute;
  top: 8%;
  bottom: 1%;
  width: 2px;
  background: #002980;
  z-index: 2;
  pointer-events: none;
  left: 13.1%;
  transform: translateX(-50%);
  transition: left var(--dur-slow) var(--ease-in-out);
}
.workflow__playhead::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #002980;
}
.workflow__playhead[data-state='0'] {
  left: 13.1%;
}
.workflow__playhead[data-state='1'] {
  left: 27.7%;
}
.workflow__playhead[data-state='2'] {
  left: 73%;
}
/* Caption: white card sitting ABOVE the timeline (per Figma §07). Its downward
   pointer sits just above the top edge of the timeline, aligned near the
   playhead for that state. The card is centered on its pointer x.
   The card grows upward into the space reserved by --wf-caption-space, so it
   stays clear of the section's intro copy. Its bottom edge is anchored a fixed
   24px inside the timeline's top edge (rather than a percentage) so the reserve
   maths hold at any timeline size. Width is capped in vw, not as a percentage
   of the timeline, so caption height does not depend on the timeline width the
   reserve is used to compute. */
.workflow__tooltip {
  position: absolute;
  bottom: calc(100% - 24px);
  z-index: 3;
  width: 474px;
  max-width: 40vw;
  background: #fff;
  border-radius: var(--radius);
  padding: 16px 24px;
  /* #4 Definition: on the white section the old single soft shadow let the card
     float ambiguously. A hairline border plus a layered, more even shadow make
     it read as a distinct floating panel. */
  border: 1px solid var(--stat-border);
  box-shadow:
    0 1px 2px rgba(35, 35, 35, 0.08),
    0 12px 32px rgba(35, 35, 35, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--travel-md));
  /* exit: opacity only, dur-fast */
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* downward pointer at the bottom of the card, aligned to the playhead */
.workflow__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 11px solid #fff;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.12));
}
.workflow__tooltip.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  /* enter: fade + rise, dur-base */
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
/* per-state horizontal position: card center sits at the pointer x (per Figma) */
.workflow__tooltip[data-state='0'] {
  left: 26%;
}
.workflow__tooltip[data-state='1'] {
  left: 27.3%;
}
.workflow__tooltip[data-state='2'] {
  left: 72.6%;
}
.workflow__tooltip p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--glaucous-6);
}
.workflow__tooltip p + p {
  margin-top: 10px;
}
.workflow__tooltip strong {
  color: #3d424d;
  font-weight: 600;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== AWS ===== */
.aws {
  background: #fff;
  padding: 96px 42px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.aws__inner {
  width: var(--max-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.aws__title {
  font-weight: 600;
  font-size: 56px;
  line-height: 1.2;
  color: var(--carbon-black);
}
.aws__content {
  display: flex;
  gap: 32px;
}
.aws__accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 387px;
  flex-shrink: 0;
}
.acc-item {
  padding: 16px;
  border-left: 4px solid var(--glaucous-5);
}
.acc-item.is-active {
  border-left-color: var(--gold);
}
.acc-item__title {
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: var(--glaucous-5);
  white-space: nowrap;
}
.acc-item.is-active .acc-item__title {
  color: var(--carbon-black);
}
/* The tab still physically EXPANDS on hover/active (the open animation is
   preserved), but the description text is NOT shown inline — it appears only in
   the right-hand detail box. The body expands to reveal empty space; its inner
   <p> is hidden (kept in the DOM as the JS text source). */
.acc-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}
.acc-item.is-active .acc-item__body {
  max-height: 60px;
}
.acc-item__body p {
  visibility: hidden;
}
.acc-item__body p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--glaucous-6);
}
.aws__images {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 32px;
  align-self: stretch;
}
.aws__img-left {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  object-fit: cover;
  transition: opacity var(--dur-base) var(--ease-out);
}
.aws__right-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.aws__img-right {
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  object-fit: cover;
  width: 100%;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* Detail box (where the testimonials used to sit): now shows the active tab's
   own description, synced by JS. Reuses the soft quote-box treatment. */
.aws__detail {
  flex: 1;
  min-height: 0;
  background: var(--quote-bg);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.aws__detail-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--glaucous-6);
  transition: opacity var(--dur-base) var(--ease-out);
}

/* ===== PERSONAS ===== */
.personas {
  background: #fff;
  padding: 96px 42px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.personas__inner {
  width: var(--max-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.personas__panels {
  display: flex;
  gap: 16px;
  height: 538px;
}
.persona {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 23px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: flex 400ms cubic-bezier(0.65, 0, 0.35, 1);
}
.persona__bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.persona__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.persona::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(166, 169, 186, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%);
  transition: opacity 400ms ease;
  z-index: 1;
}
.persona.is-active {
  flex: 0 0 517px;
}
.persona.is-active::before {
  opacity: 0;
}
.persona.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(-5.93deg, #090f1d 18.48%, rgba(9, 15, 29, 0) 63.51%),
    linear-gradient(131.38deg, rgba(9, 15, 29, 0.75) 0.91%, rgba(9, 15, 29, 0) 53.06%);
  z-index: 1;
  pointer-events: none;
}
.persona__title {
  position: relative;
  z-index: 2;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: #fff;
}
.persona:not(.is-active) .persona__title {
  font-size: 17px;
}
.persona__detail {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 400ms ease;
}
.persona.is-active .persona__detail {
  opacity: 1;
}
.persona__sub {
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: #fff;
}
.persona__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--glaucous-3);
}

.personas__stats {
  display: flex;
  gap: 16px;
}
.pstat {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  padding: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--glaucous-6);
}
/* The two lead cards carry a blue glow (#0554fd over the #fcfcfc card fill).
   In Figma this is NOT a blob centred in each card — the pair is lit from one
   source sitting above and between them, so card 1 brightens toward its
   top-right and card 2 toward its top-left, and the two bright edges meet
   across the gap. Both are linear, not radial: sampling the Figma export and
   fitting a plane to the recovered alpha leaves an rms residual of 0.016.
   Angles, stop positions and peak alpha below are taken from that fit
   (card 1: 36deg, peak 0.22 — card 2: 305deg, peak 0.16).
   Note the border is the same light --stat-border as the plain cards; it only
   looks blue in Figma where the glow passes over it. */
.pstat--accent {
  border: 1px solid var(--stat-border);
  background-color: var(--stat-bg);
}
.pstat--accent:nth-child(1) {
  background-image: linear-gradient(36deg, rgba(5, 84, 253, 0) 30%, rgba(5, 84, 253, 0.22) 100%);
}
.pstat--accent:nth-child(2) {
  background-image: linear-gradient(305deg, rgba(5, 84, 253, 0) 42%, rgba(5, 84, 253, 0.16) 100%);
}
.pstat--plain {
  background: var(--stat-bg);
  border: 1px solid var(--stat-border);
}

/* ===== FINAL ===== */
.final {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* CTA box and quote marquee removed — only the header remains, so generous
     symmetric vertical padding gives the full-bleed background room to breathe
     and keeps the closing statement centered. */
  padding: 200px 42px;
  overflow: hidden;
}
.final__bg {
  position: absolute;
  inset: 0;
}
.final__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.final__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 54.38%, #000 100%),
    linear-gradient(180deg, #000 23.02%, rgba(0, 0, 0, 0) 77.63%);
}
.final__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--max-w);
  max-width: 100%;
}
.final__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  width: 100%;
}
.final__logo {
  width: 157px;
  height: 129px;
}
.final__title {
  font-weight: 600;
  font-size: 56px;
  line-height: 1.2;
  color: #fff;
}
.final__desc {
  font-size: 15px;
  color: #ced8ee;
  max-width: 720px;
}
.final__desc strong {
  font-weight: 700;
  color: #fff;
}
.final__cta {
  background: var(--quote-bg-dark);
  border-radius: var(--radius);
  padding: 64px 24px;
  width: 889px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.final__cta-title {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: #fff;
  width: 784px;
  max-width: 100%;
}
.final__cta-sub {
  font-size: 15px;
  color: var(--glaucous-3);
}
.final__cta-buttons {
  display: flex;
  gap: 12px;
}
.final__quotes {
  position: relative;
  display: flex;
  gap: 56px;
  max-width: 100%;
  overflow: hidden;
}
.quote-card {
  flex-shrink: 0;
  width: 410px;
  background: var(--quote-bg);
  border-radius: var(--radius);
  padding: 24px;
}
.quote-card__text {
  font-style: italic;
  font-size: 12px;
  line-height: 1.7;
  color: #ced8ee;
}
.quote-card__author {
  margin-top: 10px;
  display: flex;
  gap: 16px;
}
.quote-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
}
.quote-card__meta {
  font-size: 12px;
}
/* name / role / flag each sit on their own line, as in Figma — without this the
   spans run together as one line of text */
.quote-card__name {
  display: block;
  font-weight: 600;
  color: #fff;
  line-height: 1.7;
}
.quote-card__role {
  display: block;
  color: #ced8ee;
  line-height: 1.7;
}
.quote-card__flag {
  display: block;
  color: #8a8a8a;
}

/* ===== NAV HIDE/SHOW ===== */
.header {
  transition: transform var(--dur-fast) var(--ease-out);
}
.header.is-hidden {
  transform: translateY(-100%);
}

/* ===== STATS HOVER (§03) ===== */
.stats__card {
  transition: flex var(--dur-base) var(--ease-in-out);
  cursor: pointer;
}
@media (hover: hover) {
  .stats__card:hover {
    flex: 2 0 0;
  }
}
/* Keyboard focus expands the panel too, so the detail copy gets the same width
   it has on hover rather than wrapping inside a 189px collapsed card. */
.stats__card:focus-within {
  flex: 2 0 0;
}

/* ===== ACCORDION hover intent (§08) ===== */
.acc-item {
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}

/* ===== PERSONA hover intent (§09) ===== */
.persona {
  transition: flex var(--dur-base) var(--ease-in-out);
}
.persona::before {
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.persona__detail {
  transition: opacity var(--dur-base) var(--ease-out) var(--dur-base);
}

/* ===== MARQUEE (§12) ===== */
.final__quotes {
  overflow: hidden;
}
.final__quotes-track {
  display: flex;
  width: max-content;
  /* Duration is overwritten by JS to hold the 25px/sec in §12 — it has to track
     the width of one quote set, so it can't be a fixed value here. This is the
     no-JS fallback, correct for the current nine cards. */
  animation: marquee 168s var(--ease-linear) infinite;
}
/* Spacing lives on the card, NOT as `gap` on the track. With `gap`, N duplicated
   cards make the track 2N*W + (2N-1)*G wide, so translateX(-50%) lands half a
   gap short of one full set and the loop visibly jumps by 28px every cycle.
   As a per-card margin the track is exactly 2N*(W+G) and -50% is one set. */
.quote-card {
  margin-right: 56px;
}
.final__quotes-track:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .final__quotes-track {
    animation: none;
  }
}

/* ===== STATS EXPANDED STATE ===== */
.stats__card-expand {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 2;
  /* Dark scrim rather than the previous white wash — the copy inside is white,
     and the card sits under a dark hover overlay. */
  background: rgba(9, 15, 29, 0.45);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: 20px;
  opacity: 0;
  transform: translateY(var(--travel-sm));
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .stats__card:hover .stats__card-expand {
    opacity: 1;
    transform: none;
  }
}
.stats__card:focus-within .stats__card-expand {
  opacity: 1;
  transform: none;
}
/* Expanded panel carries a single line of detail expanding on the number.
   Set at 16px rather than the 12px used for testimonial copy: this is the only
   content in the panel, so it needs to carry the box on its own. */
.stats__card-detail {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: #fff;
  text-wrap: pretty;
}
/* Darker overlay on hover to make the detail copy readable */
@media (hover: hover) {
  .stats__card:hover .stats__card-bg::after {
    background: rgba(9, 15, 29, 0.75);
  }
  /* The light card's label is black by default; the hover overlay is dark, so
     flip it to white for the duration of the expanded state. */
  .stats__card--light:hover .stats__label {
    color: #fff;
  }
}
.stats__card--light:focus-within .stats__label {
  color: #fff;
}

/* ===== WORKFLOW PINNED (§07) =====
   Wrapper = 100vh (sticky viewport) + 450vh (scroll-through) = 550vh.
   Scroll-through raised from 250vh so each state holds longer and the section
   advances more gradually relative to scroll. */
.workflow-wrap {
  height: 550vh;
  position: relative;
}
.workflow-wrap .workflow {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}
.workflow__nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  /* Hidden completely per request. Keyboard arrow-key navigation on the section
     still works (handled separately in the controller). */
  display: none;
  gap: 12px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.workflow:focus-within .workflow__nav {
  opacity: 1;
}
.workflow__nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--stat-border);
  color: var(--carbon-black);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workflow__nav-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .workflow-wrap {
    height: auto;
  }
  .workflow-wrap .workflow {
    position: relative;
    height: auto;
  }
  .workflow__playhead,
  .workflow__nav {
    display: none;
  }
  /* Captions are static here, so no reserved space or width cap is needed */
  .workflow__visual {
    padding-top: 0;
    width: 1614px;
  }
  /* Stack the three states as static blocks */
  .workflow__layer {
    position: relative;
    opacity: 1;
  }
  .workflow__tooltip {
    position: relative;
    left: auto !important;
    top: auto;
    opacity: 1;
    transform: none;
    margin-top: 16px;
    max-width: 100%;
  }
}