/* Landing Page Video section start */
.hero,
.hero * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hero {
  --bg: #FDFCF5;
  --neutral-900: #203450;
  --neutral-600: #7288A4;
  --neutral-50: #F4F6FA;
  --chip-bg: #F5F9FF;
  --chip-border: #E1F0FE;
  --chip-text: #5F7991;
  --workplace-bg: #F7F3E4;
  --workplace-border: #EEE8CD;
  --ink: #0E1014;
  /* ---- accent palette (Process Coverage / stat-card back faces) ---- */
  --accent-50: #FDFCF5;
  --accent-200: #EEE8CD;
  --accent-300: #E8E0C2;
  --accent-800: #887C58;
  --accent-900: #625A38;
  /* ---- usecase-chart palette (Procurement back face scatter chart) ---- */
  --uc-outer: #F1E9D2;
  /* big pale outer circle */
  --uc-inner: #9FC9B7;
  /* smaller teal "hot zone" circle */
  --uc-inner-opacity: 0.6;
  --uc-dot: #1F6F5C;
  /* plotted usecase dots */
  --uc-axis: #A79A6E;
  /* axis lines/arrowheads/labels */
  --uc-label: #3A4550;
  /* usecase text labels */
  --uc-highlight: #2F6F5E;
  /* "Top usecases" italic label */
  /* ---- agents-card palette (Sales back face — logo group grid) ---- */
  --agents-border: #4EA0EE;
  /* blue outer frame around the logo groups */
  --agents-cell-bg: var(--workplace-bg);
  /* reuses the existing cream tone — same as the Workplace tile */
  --agents-cell-border: var(--workplace-border);
  --gap: clamp(8px, 1.1vw, 24px);
  --radius: clamp(8px, 0.9vw, 16px);
  --vpad: 32px;
  /* fixed so the contain-fit calc below can subtract it precisely */

  position: relative;
  width: 100%;
  min-height: 100vh;
  /* fallback for browsers without dvh support */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vpad) clamp(16px, 6vw, 121px);
  background: var(--bg);
  font-family: 'Poppins', sans-serif;
  color: var(--neutral-900);
}

.bento {
  width: 100%;
  aspect-ratio: 1676 / 1308;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  grid-template-areas:
    "marketing blank1 procurement copy      customer"
    "headline  headline sales     blank2    finance"
    "legal     workplace logos    hr        blank3";
  padding-left: 40px;
  padding-right: 40px;
}

.tile {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
}

/* Non-flip tiles clip their contents directly */
.tile:not(.tile--flip) {
  overflow: hidden;
  clip-path: inset(0 round var(--radius));
}

/* Non-flip placeholder tiles (blank1 / blank2 / blank3) keep the gradient
   fallback — they have no .tile-face children, so nothing rotates and the
   background is always what's visible when the image is absent/transparent. */
.tile.placeholder:not(.tile--flip) {
  background: linear-gradient(150deg, #e7ecf4, #cdd7e6);
}

.tile--flip.placeholder {
  background: transparent;
}

.tile-img,
video.tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Autoplaying background videos (blank1/blank2/blank3 — Grid2, Grid9,
   Grid15) shouldn't show native browser video chrome/controls, and
   pointer-events off keeps them purely decorative like the images they
   replaced. */
video.tile-img {
  pointer-events: none;
  background: transparent;
}

/* ---------- Back-face two-layer stacking ----------
   Some back faces (currently: marketing) show a decorative shadowed card
   frame BEHIND the existing illustration, rather than a single flat image.
   Both layers use the standard .tile-img positioning (inset:0, cover) —
   this just orders them so the frame sits under the content. Purely
   additive: tiles with a single back-face image are unaffected since they
   don't have these classes. */
.tile-face-bg {
  z-index: 0;
}

.tile-face-content {
  z-index: 1;
}

.tile-img--zoom-back {
  --back-zoom: 1.12;
  transform: scale(var(--back-zoom));
  transform-origin: center 30%;
}

.tile .label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: clamp(8px, 1.2vw, 16px);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.2vw, 20px);
  line-height: 120%;
  color: var(--neutral-50);
  /* text-shadow: 0 2px 10px rgba(0, 0, 0, .35); */
}

.tile.light-label .label {
  color: var(--neutral-900);
  text-shadow: none;
}

.tile.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 40%); */
  pointer-events: none;
  z-index: 1;
}

.tile--flip {
  --stat-scale: 1;
  perspective: 1200px;
  -webkit-perspective: 1200px;
  background: transparent;
  overflow: visible;
  clip-path: none;
  border-radius: var(--radius);
  z-index: 1;
  filter:
    drop-shadow(0px 29px 11px rgba(0, 0, 0, 0.01)) drop-shadow(0px 16px 10px rgba(0, 0, 0, 0.05)) drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.09)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
  transition: z-index 0s;
}

.tile--flip:hover,
.tile--flip:focus-within,
.tile--flip.is-flipped {
  z-index: 15;
}

.tile-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: var(--radius);
  /* Buttery 3D flip animation */
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}

@media (hover: hover) {

  .tile--flip:hover .tile-flip-inner,
  .tile--flip:focus-within .tile-flip-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }
}

/* JS hook for touch devices (and anywhere you want programmatic control) —
   toggle this class on tap; works regardless of hover support. */
.tile--flip.is-flipped .tile-flip-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.tile-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: none;
  padding: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.tile-face--back {
  transform: rotateY(180deg) translate3d(0, 0, 0);
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 0);
}


.tile-face svg {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.tile--flip .tile-face {
  background: #FFFFFF;
}

.tile.overlay .tile-face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 40%); */
  pointer-events: none;
  z-index: 1;
}

.stats-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stats-card__title {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  padding: calc(16px * var(--stat-scale));
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: calc(20px * var(--stat-scale));
  /* back down from 28px */
  line-height: 120%;
  color: var(--neutral-900);
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stats-card__title strong {
  font-weight: 700;
}

.stats-card__chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: calc(8px * var(--stat-scale));
  padding: 0 calc(12px * var(--stat-scale));
}

.stats-card .chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: calc(2px * var(--stat-scale)) calc(10px * var(--stat-scale));
  height: calc(28px * var(--stat-scale));
  background: var(--accent-50);
  border: 1px solid var(--accent-300);
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: calc(12px * var(--stat-scale));
  line-height: 16px;
  letter-spacing: -0.1px;
  color: var(--accent-900);
  white-space: nowrap;
}

.stats-card__metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(4px * var(--stat-scale));
  padding: calc(16px * var(--stat-scale)) calc(16px * var(--stat-scale)) calc(24px * var(--stat-scale));
  text-align: center;
  min-height: 0;
}

.stats-card__number {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(48px * var(--stat-scale));
  line-height: 120%;
  color: var(--accent-900);
}

.stats-card__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: calc(16px * var(--stat-scale));
  line-height: 150%;
  color: var(--accent-800);
}

.stats-card__cta {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8px * var(--stat-scale)) calc(28px * var(--stat-scale)) calc(32px * var(--stat-scale));
  text-align: center;
}

.stats-card__cta-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(28px * var(--stat-scale));
  line-height: 130%;
  color: var(--accent-900);
}

.stats-card__features {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 calc(12px * var(--stat-scale));
}

.stats-card__feature {
  flex: none;
  display: flex;
  align-items: center;
  padding: calc(16px * var(--stat-scale)) calc(8px * var(--stat-scale));
  border-bottom: 1px solid var(--accent-300);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: calc(13px * var(--stat-scale));
  line-height: 150%;
  color: var(--neutral-900);
}

.stats-card__chart {
  flex: 1;
  min-height: 0;
  padding: calc(4px * var(--stat-scale)) calc(12px * var(--stat-scale));
}

.usecase-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.usecase-svg .uc-outer-circle {
  fill: var(--uc-outer);
}

.usecase-svg .uc-inner-circle {
  fill: var(--uc-inner);
  opacity: var(--uc-inner-opacity);
}

.usecase-svg .uc-dot {
  fill: var(--uc-dot);
}

.usecase-svg .uc-axis-line {
  stroke: var(--uc-axis);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}

.usecase-svg .uc-axis-arrow {
  fill: var(--uc-axis);
}

.usecase-svg .uc-axis-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11px;
  fill: var(--uc-axis);
}

.usecase-svg .uc-point-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 10px;
  fill: var(--uc-label);
}

.usecase-svg .uc-highlight-label {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 11px;
  fill: var(--uc-highlight);
}

.stats-card__metric--compact {
  flex: none;
  padding-top: calc(24px * var(--stat-scale));
}

.stats-card__metric--compact_legal {
  flex: none;
  padding-top: calc(24px * var(--stat-scale));
  padding-top: 80px;
}

.quote-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quote-card__inner {
  width: calc(282px * var(--stat-scale));
  height: calc(178px * var(--stat-scale));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(16px * var(--stat-scale));
}

.quote-card__text {
  width: 100%;
  align-self: stretch;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: calc(16px * var(--stat-scale));
  line-height: 150%;
  color: var(--accent-900);
}

.quote-card__logo {
  position: relative;
  width: calc(103px * var(--stat-scale));
  height: calc(16px * var(--stat-scale));
  flex: none;
}

.quote-card__logo-mark {
  position: absolute;
  left: 0.44%;
  right: 79.88%;
  /* top: 2.50%; */
  bottom: 2.9%;
  /* background: #BABCBE; */
  border-radius: 1px;
}

.quote-card__logo-word {
  position: absolute;
  left: 32%;
  right: 0.44%;
  /* top: 2.91%; */
  display: flex;
  align-items: center;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(11px * var(--stat-scale));
  line-height: 1;
  color: #474747;
  white-space: nowrap;
}

.stats-card__groups {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--stat-scale));
  margin: 0 calc(12px * var(--stat-scale));
  padding: calc(8px * var(--stat-scale));
  background: var(--agents-border);
  border-radius: calc(8px * var(--stat-scale));
}

.logo-group-row {
  display: flex;
  gap: calc(8px * var(--stat-scale));
  height: calc(92px * var(--stat-scale));
}

.logo-group {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  background: var(--agents-cell-bg);
  border: 1px solid var(--agents-cell-border);
  border-radius: calc(4px * var(--stat-scale));
  overflow: hidden;
}

.logo-group--anchor {
  flex: 105;
}

.logo-group--strategy {
  flex: 72;
}

.logo-group--operations {
  flex: 75;
}

.logo-group--lead {
  flex: 165;
}

.logo-group--enablement {
  flex: 95;
}

.logo-group__icons {
  position: absolute;
  left: calc(8px * var(--stat-scale));
  top: calc(9px * var(--stat-scale));
  right: calc(8px * var(--stat-scale));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6px * var(--stat-scale));
}

.logo-group__icon {
  display: block;
  flex: none;
  width: calc(32px * var(--stat-scale));
  height: calc(32px * var(--stat-scale));
  /* forces every source logo — however colorful — to the flat black/gray
     look the design calls for; see point 1 in the comment above */
  mix-blend-mode: luminosity;
  /* wordmark-style logos (e.g. a pill-shaped text logo) are wider than
     tall — object-fit:contain keeps them from being cropped/stretched
     within the same 32x32 box every other icon uses */
  object-fit: contain;
}

.logo-group__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(35px * var(--stat-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8px * var(--stat-scale)) calc(8px * var(--stat-scale)) calc(12px * var(--stat-scale));
  background: var(--agents-cell-border);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(10px * var(--stat-scale));
  line-height: 150%;
  color: var(--neutral-900);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-card__logos {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: calc(20px * var(--stat-scale)) calc(16px * var(--stat-scale));
  padding: 0 calc(12px * var(--stat-scale));
  mix-blend-mode: luminosity;
}

.stats-card__logo {
  flex: none;
  display: block;
  width: auto;
  object-fit: contain;
}

/* 3-per-row variant for the logos block, scoped so it doesn't affect other cards using .stats-card__logos */
.stats-card__logos--rows3 {
  flex: none;
  /* stop stretching/centering in leftover space */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  align-content: start;
  gap: calc(14px * var(--stat-scale)) calc(8px * var(--stat-scale));
  margin-top: calc(8px * var(--stat-scale));
}

.stats-card__logos--rows3 .stats-card__logo {
  height: auto;
  max-height: calc(30px * var(--stat-scale));
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.stats-card__flow {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--stat-scale));
  margin-top: calc(20px * var(--stat-scale));
  /* small, positive breathing room instead of a big negative pull */
  padding: 0;
}

.stats-card__flow-arrow {
  width: calc(18px * var(--stat-scale));
  height: calc(18px * var(--stat-scale));
  color: var(--accent-800);
}

/* Legal — "Data Lawyers Trust" */
.stats-card__logo--sal {
  height: calc(36px * var(--stat-scale));
}

.stats-card__logo--fromcounsel {
  height: calc(32px * var(--stat-scale));
}

.stats-card__logo--uspto {
  height: calc(48px * var(--stat-scale));
}

.stats-card__logo--djof {
  height: calc(24px * var(--stat-scale));
}

.stats-card__logo--eurlex {
  height: calc(42px * var(--stat-scale));
}

.stats-card__logo--manu {
  height: calc(32px * var(--stat-scale));
}

/* HR — "HR AI Adopters" */
.stats-card__logo--bayer {
  height: calc(40px * var(--stat-scale));
}

.stats-card__logo--sony {
  height: calc(16px * var(--stat-scale));
}

.stats-card__logo--schneider {
  height: calc(40px * var(--stat-scale));
}

.stats-card__logo--pfizer {
  height: calc(32px * var(--stat-scale));
}

.stats-card__logo--lg {
  height: calc(30px * var(--stat-scale));
}

.stats-card__logo--cocacola {
  height: calc(24px * var(--stat-scale));
}

.stats-card__logo--thomsonreuters {
  height: calc(19px * var(--stat-scale));
}

.stats-card__logo--nytimes {
  height: calc(19px * var(--stat-scale));
}

.stats-card__integrations {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--stat-scale));
  padding: 0 calc(12px * var(--stat-scale));
}

.stats-card__integrations-icons {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: calc(16px * var(--stat-scale));
  width: calc(80px * var(--stat-scale));
  mix-blend-mode: luminosity;
}

.stats-card__integration-icon {
  flex: none;
  display: block;
  width: calc(32px * var(--stat-scale));
  height: calc(32px * var(--stat-scale));
  object-fit: contain;
}

.stats-card__integrations-arrow {
  flex: none;
  width: calc(20px * var(--stat-scale));
  height: calc(20px * var(--stat-scale));
  color: var(--neutral-600);
}

.stats-card__integrations-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(8px * var(--stat-scale)) calc(12px * var(--stat-scale));
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: calc(8px * var(--stat-scale));
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(14px * var(--stat-scale));
  line-height: 150%;
  color: var(--accent-900);
  white-space: nowrap;
}

/* ---------- Center copy block ---------- */
.copy-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.4vh, 24px);
  padding: clamp(8px, 1.2vw, 16px);
  min-width: 0;
  min-height: 0;
}

.eyebrow {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(11px, 1.1vw, 20px);
  line-height: 120%;
  color: var(--neutral-600);
  padding-top: 170px;
}

.value-props {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.35vw, 24px);
  line-height: 140%;
  color: var(--neutral-900);
}

/* ---------- Logo wall tile (now delivered as a pre-made SVG image;
   kept here in case you switch back to a markup-built logo grid) ---------- */
.tile.logo-wall {
  background: var(--bg);
  padding: clamp(10px, 1.4vw, 24px);
  justify-content: flex-start;
  gap: clamp(6px, 1vh, 16px);
}

.logo-wall h4 {
  margin: 0 0 2px 0;
  font-weight: 600;
  font-size: clamp(11px, 1.1vw, 18px);
  color: var(--neutral-900);
}

.logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: clamp(6px, 1.2vh, 18px);
  column-gap: clamp(6px, 0.8vw, 12px);
  align-items: center;
}

.logo-grid .logo-slot {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  font-size: clamp(8px, 0.8vw, 13px);
  color: #444;
  opacity: .75;
}

/* ---------- Left headline + CTA block ---------- */
.headline-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(10px, 2vh, 40px);
  padding: clamp(8px, 2vh, 64px) clamp(8px, 1.2vw, 24px);
  min-width: 0;
  min-height: 0;
}

h1.headline {
  font-weight: 600;
  font-size: clamp(20px, 3.2vw, 64px);
  line-height: 120%;
  color: var(--neutral-900);
}

.cta-wrap {
  display: flex;
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(8px, 0.9vw, 12px) clamp(10px, 1.1vw, 16px);
  background: var(--ink);
  border-radius: clamp(8px, 0.7vw, 12px);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* .cta__btn span {
  font-weight: 500;
  font-size: clamp(11px, 1vw, 18px);
  line-height: 140%;
  color: #FFFFFF;
  white-space: nowrap;
} */

.cta__btn-icon {
  width: clamp(14px, 1.1vw, 20px);
  height: clamp(14px, 1.1vw, 20px);
  flex-shrink: 0;
}

/* ---------- Special: Workplace accent tile ---------- */
.tile.accent {
  background: var(--workplace-bg);
  border: 1px solid var(--workplace-border);
}

.tile.accent .label {
  color: var(--neutral-900);
  text-shadow: none;
}

@media (max-width: 720px) {
  .hero {
    padding: 32px 16px;
  }

  .bento {
    width: 100%;
    aspect-ratio: unset;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "marketing  blank1     procurement"
      "customer   sales      finance"
      "copy       headline   headline"
      "legal      workplace  logos"
      "hr         blank2     blank3";
    padding-left: 16px;
    padding-right: 16px;
  }

  .tile {
    height: auto;
    aspect-ratio: 3 / 4.6;
  }

  /* Copy + headline share one row with the image tiles above/below, so
     this row needs to match their height instead of growing to fit
     text. 51vw tracks the same width→height ratio the 3/4.6 tile
     aspect produces at this breakpoint (see .tile), so the row lines
     up. */
  .copy-tile,
  .headline-block {
    height: 51vw;
    max-height: 210px;
    overflow: hidden;
  }

  .copy-tile {
    aspect-ratio: unset;
    padding: 4px;
    gap: 4px;
  }

  /* .eyebrow's 170px top padding (line 812) is sized for the desktop
     bento row's much taller cell — reset it here or it alone blows out
     this row's height on mobile. */
  .eyebrow {
    padding-top: 0;
    font-size: 10px;
  }

  .value-props {
    font-size: 10.5px;
    line-height: 130%;
  }

  .headline-block {
    padding: 4px 8px;
    gap: 6px;
  }

  h1.headline {
    font-size: clamp(15px, 4.2vw, 19px);
    line-height: 115%;
  }

  .cta__btn {
    padding: 5px 10px;
  }

  /* Flex children with fixed calc() sizing (the big stat number, the
     chip row, etc.) default to min-height:auto, which lets their
     content push past the space the flex column actually has left
     instead of shrinking - that's what was causing numbers/text to
     visually overlap the row above them. min-height:0 lets them
     compress (and .stats-card's own overflow:hidden then clips
     cleanly) instead of overlapping. */
  .stats-card__title,
  .stats-card__chips,
  .stats-card__metric,
  .stats-card__features,
  .stats-card__chart,
  .stats-card__cta,
  .quote-card__inner {
    min-height: 0;
  }

  .stats-card__title {
    -webkit-line-clamp: 1;
  }

  /* A full chip/feature list (up to 8 items) doesn't fit legibly at
     this width even at the corrected scale - show the first few and
     drop the rest rather than clipping mid-word. */
  .stats-card__chips .chip:nth-child(n + 5),
  .stats-card__features .stats-card__feature:nth-child(n + 3) {
    display: none;
  }

  .quote-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.is-safari .tile {
  clip-path: none;
  -webkit-clip-path: none;
}

.is-safari .tile--flip {
  filter: none;
  -webkit-filter: none;
}

/* Wrapper the script inserts around each .tile--flip; it takes over the
   grid placement (see script) and carries the drop-shadow instead. */
.is-safari .tile-shadow-wrap {
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  /* box-shadow needs this to match the card's rounding */
  box-shadow:
    0px 29px 11px rgba(0, 0, 0, 0.01),
    0px 16px 10px rgba(0, 0, 0, 0.05),
    0px 7px 7px rgba(0, 0, 0, 0.09),
    0px 2px 4px rgba(0, 0, 0, 0.1);
}

.is-safari .tile-shadow-wrap .tile--flip {
  width: 100%;
  height: 100%;
}

.is-safari .tile-face {
  -webkit-transform: translateZ(0) scale3d(1, 1, 1);
  transform: translateZ(0) scale3d(1, 1, 1);
}

.is-safari .tile-face--front {
  -webkit-transform: rotateY(0deg) translateZ(0) scale3d(1, 1, 1);
  transform: rotateY(0deg) translateZ(0) scale3d(1, 1, 1);
}

.is-safari .tile-face--back {
  -webkit-transform: rotateY(180deg) translateZ(0) scale3d(1, 1, 1);
  transform: rotateY(180deg) translateZ(0) scale3d(1, 1, 1);
}

.is-safari .tile-face svg {
  -webkit-transform: translateZ(0) scale3d(1, 1, 1);
  transform: translateZ(0) scale3d(1, 1, 1);
}

.is-safari video.tile-img {
  border-radius: var(--radius);
}

/* Landing Page video section end */

/* Landing Page AI-Framer section start */

/* ============================================================
   SECTION BAND — full-width cream background
   ============================================================ */
.ai-section-band {
  width: 100%;
  background: #FDFCF5;
  box-sizing: border-box;
}

/* ============================================================
     AI SECTION — full width, no margins
     ============================================================ */
.ai-section {
  position: relative;
  width: 100%;
  min-height: 456px;
  background: #FDFCF5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 56px;
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
  box-sizing: border-box;
}

/* ============================================================
     CANVAS — fills section exactly
     ============================================================ */
.anim-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ============================================================
     FADE — softens zone behind text only, edges stay clear
     ============================================================ */
.grid-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
      rgba(253, 252, 245, 0.0) 0%,
      rgba(253, 252, 245, 0.0) 52%,
      rgba(253, 252, 245, 0.88) 62%,
      rgba(253, 252, 245, 0.88) 80%,
      rgba(253, 252, 245, 0.0) 100%);
}

/* ============================================================
     CONTENT LAYER
     ============================================================ */
.section-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ============================================================
     PARAGRAPH
     ============================================================ */
.section-paragraph {
  width: 100%;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.45;
  color: #14181E;
  padding-left: 55%;
}

.section-paragraph strong {
  font-weight: 700;
}

/* ============================================================
     CTA BUTTON
     ============================================================ */
.cta-wrap {
  display: flex;
  justify-content: center;
  padding-right: 5%;
}


/* ============================================================
     RESPONSIVE
     ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ai-section {
    padding: 60px 0;
    gap: 40px;
  }

  .section-paragraph {
    font-size: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ai-section {
    padding: 48px 0;
    gap: 36px;
  }

  .section-paragraph {
    font-size: 18px;
    text-align: center;
    padding-right: 0;
  }

  .grid-fade {
    background: linear-gradient(to right,
        rgba(253, 252, 245, 0.0) 0%,
        rgba(253, 252, 245, 0.0) 45%,
        rgba(253, 252, 245, 0.85) 58%,
        rgba(253, 252, 245, 0.85) 82%,
        rgba(253, 252, 245, 0.0) 100%);
  }
}

@media (max-width: 767px) {

  /* Section: column, centered, exact Figma height */
  .ai-section {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24.5px 20px;
    min-height: 165.5px;
    gap: 16px;
  }

  /* section-content stacks paragraph row + CTA vertically */
  .section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 39.72px;

    width: 378.94px;
    height: 204.63px;

    flex: none;
    order: 1;
    flex-grow: 0;
  }

  /*
     * Paragraph row: matches Figma "Frame 1171276065"
     * width: 353px (full width minus 20px padding each side)
     * justify-content: flex-end  →  pushes 171px text block to right
     */
  .section-paragraph {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    font-size: 0;
    /* hide whitespace nodes */
    padding: 0;
    margin: 0;
    text-align: left;
  }

  /*
     * Wrap paragraph text in a span/inner element in HTML if possible.
     * If not, we constrain via inline-block on the paragraph itself.
     * This targets all inline content inside the paragraph to cap at 171px.
     */
  .section-paragraph .para-inner {
    display: inline-block;
    width: 171px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #14181E;
    text-align: left;
  }

  /* Fallback if no .para-inner wrapper — constrain paragraph itself */
  .section-paragraph:not(:has(.para-inner)) {
    display: block;
    width: 171px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #14181E;
    text-align: left;
    margin-left: auto;
    /* pushes block to right */
    padding-right: 0;
  }

  .section-paragraph strong {
    font-weight: 700;
    font-size: 12px;
  }

  /* CTA: centered across full width */
  .cta-wrap {
    position: static;
    width: 100%;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .grid-fade {
    background: none;
  }
}

@media (max-width: 480px) {
  .ai-section {
    padding: 20px 16px;
  }
}

/* Landing Page AI-Framer section end */

/* Landing Page Use case section start */

/* ============================================================
   Section 4 – Right Use case. Right Agent. Faster Results.
   Full-width #FDFCF5 background, 80% content width centred
   ============================================================ */

/* ---------- Full-width background wrapper ---------- */
.sec4-wrapper {
  width: 100%;
  background: #FDFCF5;
}

/* ---------- Section shell (80% centred content) ---------- */
.sec4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  margin: 0 auto;
  padding: 80px 0;
  gap: 80px;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Header row ---------- */
.sec4__header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  max-width: 1680px;
}

.sec4__heading {
  /* flex-grow: 1 mirrors Figma's 1250px growing child */
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 52px;
  line-height: 120%;
  color: #14181E;
  margin: 0;
}

.sec4__tagline {
  /* Figma: 406px wide, h5 – only "million ai" is bold */
  width: 350px;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: #14181E;
  margin: 0;
}

.sec4__tagline strong {
  font-weight: 700;
}

/* ---------- Cards row ---------- */
.sec4__cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 1680px;
  border-radius: 16px;
}

.sec4__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

/* Image area – sized to Figma's 700.87px tall frame */
.sec4__card-img {
  width: 100%;
  aspect-ratio: 544 / 700.87;
  border-radius: 16px;
  overflow: hidden;
  background: #e0e0e0;
  position: relative;
}

.sec4__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 16px;
}

.sec4__card-lottie {
  position: absolute;
  top: 4%;
  left: 3.7%;
  width: 92%;
  height: 92%;
  z-index: 1;
  pointer-events: none;
}

/* Content tile below each image */
.sec4__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  gap: 12px;
  width: 100%;
  min-height: 230px;
  box-sizing: border-box;
  background: #F7F3E4;
  border-radius: 16px;
  flex: 1;
}

.sec4__card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: #14181E;
  margin: 0;
  width: 100%;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.sec4__card-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #6A7488;
  margin: 0;
  max-width: 98%;
  /* was 280px — scales with card width instead of locking it */
}

/* ---------- CTA inside card 3 content tile ---------- */
.sec4__card-content .cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
}

/* ---------- Standalone CTA (centred below all cards) ---------- */
.sec4__cta-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}



/* ============================================================
   Responsive – tablet / mobile
   ============================================================ */
@media (max-width: 1200px) {
  .sec4 {
    padding: 120px 0;
  }

  .sec4__heading {
    font-size: 40px;
  }

  .sec4__tagline {
    width: auto;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .sec4 {
    padding: 80px 0;
    gap: 48px;
  }

  .sec4__header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
  }

  .sec4__heading {
    flex: none;
    width: 100%;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.383px;
  }

  .sec4__tagline {
    flex: none;
    width: 100%;
    font-size: 14px;
    line-height: 21px;
    color: #6A7488;
    text-align: left;
  }

  /* Horizontal scroll */
  .sec4__cards {
    width: calc(100% + 48px);
    margin-left: -24px;
    padding-left: 24px;
    padding-right: 24px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .sec4__cards::-webkit-scrollbar {
    display: none;
  }

  .sec4__card {
    flex: 0 0 80vw;
    scroll-snap-align: start;
    min-width: 280px;
  }

  /* height removed here too — aspect-ratio from base rule now drives this,
     so the image area scales correctly at the 80vw card width on tablet */
}

@media (max-width: 600px) {
  .sec4 {
    padding: 60px 0;
    gap: 40px;
    overflow: hidden;
  }

  .sec4__cards {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 24px;
    gap: 16px;
  }

  .sec4__card {
    /* flex: 0 0 353px; */
    scroll-snap-align: start;
    min-width: 0;
  }

  /* FIX: Figma mobile spec is 353px wide x 454.79px tall for the image
     frame (ratio 0.77618), which is effectively identical to the desktop
     ratio (544/700.87 = 0.77618). The old fixed height: 464.64px was
     ~10px taller than correct, which is what pushed the card content
     down and clipped the bottom of the card (the "Enterprise-Ready"
     line/dot) in the viewport. Using aspect-ratio instead of a fixed
     height keeps the card's true proportions and lets it size correctly
     no matter the surrounding scroll/viewport constraints. */
  .sec4__card-img {
    height: auto;
    aspect-ratio: 353 / 454.79;
  }

  /* No mobile-specific override for .sec4__card-lottie: the base
     desktop inset (top:4%, left:3.7%, width:92%, height:92%) already
     matches the actual Figma mobile mock closely once the card's own
     aspect-ratio is corrected above. If dots/labels still look off
     at this breakpoint, the cause is most likely the .lottie file's
     own internal canvas scaling at small sizes — not this CSS box. */

  .sec4__card-content {
    padding: 20px;
    gap: 8px;
    height: auto;
  }

  .sec4__card-title {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #14181E;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .sec4__card-text {
    width: 100%;
    max-width: 100%;
    /* override the 85% cap so mobile uses full card width */
    height: auto;
    font-size: 13px;
    line-height: 20px;
    color: #6A7488;
    -webkit-line-clamp: unset;
    display: block;
  }
}

/* Landing Page Use case section end */


/* Review Agent Section Start */
/* ============================================================
   Section 6 – million ai  |  section6.css
   Tokens scoped to .s6 — no global :root or * reset
   ============================================================ */

/* ── Full-width background band ── */
.review-section {
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* ── Background image — full 100% width ── */
.s6__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

/* ── Section shell (tokens live here) ── */
.s6 {
  /* Design tokens */
  --color-neutral-50: #F4F6FA;
  --color-dark-900: #0C0F14;
  --color-active-text: #F4F6FA;
  --color-muted-text: #6C2902;
  --font-body: 'Poppins', sans-serif;
  --section-pad-v: clamp(60px, 6.25vw, 120px);

  /* Layout */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(12px, 2vw, 40px);
  padding: var(--section-pad-v) 0;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  max-width: 1920px;
  min-height: 0;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
}

/* Scoped resets – only children of .s6 */
.s6 *,
.s6 *::before,
.s6 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.s6 ul {
  list-style: none;
}

.s6 img {
  display: block;
}

/* Ensure all direct children sit above the background */
.s6>* {
  position: relative;
  z-index: 1;
}

/* ── LEFT label ── */
.s6__label {
  flex: none;
  flex-shrink: 0;
  width: 179px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--color-neutral-50);
  margin-bottom: 30px;

}

.s6__label strong {
  font-weight: 600;
}

/* ── CENTER ── */
.s6__center {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding-left: 56px;
  width: auto;
  max-width: 999px;
  height: 324px;
  min-width: 0;
}

/* ── Star icon ── */
.s6__star {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  filter: brightness(0) invert(1);
}

.s6__star img {
  width: 38px;
  height: 37px;
  display: block;
}

/* ── Roller wrapper – the visible window ── */
.s6__roller-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: 729px;
  min-width: 0;
  height: 324px;
  overflow: hidden;
  position: relative;
  cursor: default !important;
}

/* ── The rolling <ul> ── */
.s6__roller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  cursor: default !important;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Each item ── */
.s6__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 34px;
  line-height: 54px;
  padding: 0;
  color: var(--color-muted-text);
  white-space: nowrap;
  cursor: default !important;
  user-select: none;
  overflow: visible;
  transition: color 0.2s ease;
}

/* Active / highlighted item (controlled strictly via JS) */
.s6__item--active {
  color: var(--color-active-text) !important;
  font-weight: 500;
  cursor: default !important;
}

.s6__item:hover {
  cursor: default !important;
}

/* ── RIGHT CTA ── */
.s6__cta-wrap {
  flex: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 218px;
  height: 56px;
}

.s6__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  width: 210px;
  height: 48px;
  background: var(--color-neutral-50);
  border-radius: 16px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.s6__cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.s6__cta:active {
  transform: translateY(0);
}

.s6__cta-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-dark-900);
  white-space: nowrap;
}

.s6__cta-star {
  width: 20px;
  height: 20px;
  filter: brightness(0);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  .s6 {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    gap: 20px;
    padding: 60px 0;
  }

  .s6__label {
    width: 150px;
    font-size: 15px;
    margin-bottom: 0;
  }

  .s6__center {
    padding-left: 44px;
    height: 324px;
    gap: 20px;
  }

  .s6__star {
    width: 30px;
    height: 30px;
  }

  .s6__star img {
    width: 30px;
    height: 30px;
  }

  .s6__item {
    font-size: clamp(20px, 2.5vw, 26px);
    height: 54px;
    line-height: 54px;
  }

  .s6__cta-wrap {
    width: 180px;
  }

  .s6__cta {
    width: 180px;
    height: 44px;
    padding: 10px 18px;
  }
}

/* ── Mobile (<= 768px) ── */
@media (max-width: 768px) {
  .s6 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - 32px);
    max-width: 440px;
    margin: 0 auto;
    padding: 48px 0;
    gap: 24px;
    min-height: auto;
    height: auto;
    text-align: center;
  }

  .s6__label {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    text-align: center;
    white-space: normal;
    order: 0;
  }

  .s6__center {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 32px;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    height: 216px;
    order: 1;
    position: relative;
  }

  .s6__star {
    width: 22px;
    height: 22px;
    left: 0;
  }

  .s6__star img {
    width: 22px;
    height: 22px;
  }

  .s6__roller-wrap {
    width: 100%;
    max-width: 100%;
    height: 216px;
    overflow: hidden;
    position: relative;
  }

  .s6__roller {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .s6__item {
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: clamp(15px, 4.2vw, 18px);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .s6__cta-wrap {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
    margin-top: 4px;
  }

  .s6__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 175px;
    height: 44px;
    padding: 10px 22px;
    border-radius: 12px;
    background: var(--color-neutral-50);
    cursor: pointer;
  }

  .s6__cta-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-dark-900);
  }

  .s6__cta-star {
    width: 16px;
    height: 16px;
    filter: brightness(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s6__roller {
    transition: none;
  }
}

/* Review Agent Section End */


/* AI Usecase Section Start */


/* =============================================
   SECTION 7 – AI Usecases
   Card ratio: 544 × 716 (Figma spec)
   ============================================= */

/* =============================================
   SECTION 7 – AI Usecases
   Card ratio: 544 × 716 (Figma spec)
   ============================================= */

/* ---- Scoped reset ---- */
.section7,
.section7 *,
.section7 *::before,
.section7 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- Section wrapper ---- */
.section7 {
  font-family: 'Poppins', sans-serif;
  background: #FDFCF5;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  padding: 120px 0;
}

.section7__inner {
  max-width: 1680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* ---- Header ---- */
.section7__header {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.section7__title-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section7__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 52px;
  line-height: 120%;
  color: #0C0F14;
}

.section7__subheading {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: #6A7488;
  max-width: 1000px;
}

.section7__heading.card-maigent,
.section7__subheading.card-maigent {
  display: none;
}

/* ---- Toggle ---- */
.section7__toggle {
  display: inline-flex;
  align-items: center;
  background: #F7F3E4;
  border-radius: 16px;
  height: 56px;
  width: fit-content;
  overflow: hidden;
}

.toggle__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  height: 56px;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  border-radius: 16px;
  background: transparent;
  color: #14181E;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.toggle__tab--active {
  background: #14181E;
  color: #F4F6FA;
}

.toggle__tab:not(.toggle__tab--active):hover {
  background: rgba(20, 24, 30, 0.06);
}

/* ---- Cards row ---- */
.section7__cards {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
}

/* ---- Single card ---- */
.section7__card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 544 / 716;
}

/* ---- Card background SVG — base layer ---- */
.section7__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  z-index: 0;
}

/* ---- Card title — always on top ---- */
.section7__card-title {
  position: absolute;
  top: 5.59%;
  /* 40 / 716 */
  left: 7.35%;
  /* 40 / 544 */
  width: 85%;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 36px);
  line-height: 120%;
  color: #14181E;
  pointer-events: none;
  z-index: 3;
}

.section7__card-lottie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

/* ---- Lottie wrapper — covers full card ---- */
.section7__card-lottie-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* ---- dotlottie-wc — fills wrapper completely ---- */
.card-lottie-maigrid,
.card-lottie-maigent {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

/* Target shadow DOM internals of dotlottie-wc */
.card-lottie-maigrid::part(canvas),
.card-lottie-maigent::part(canvas) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Also target the inner container via ::slotted if exposed */
.card-lottie-maigrid::part(animation),
.card-lottie-maigent::part(animation) {
  width: 100% !important;
  height: 100% !important;
}

/* =============================================
   RESPONSIVE – Tablet
   ============================================= */
@media (max-width: 1024px) {
  .section7 {
    padding: 80px 0;
  }

  .section7__heading {
    font-size: 40px;
  }

  .section7__subheading {
    font-size: 17px;
  }

  .section7__cards {
    gap: 16px;
  }
}

/* =============================================
   RESPONSIVE – Mobile (horizontal scroll)
   ============================================= */
@media (max-width: 768px) {
  .section7 {
    padding: 60px 0;
  }

  .section7__inner {
    gap: 48px;
  }

  .section7__heading {
    font-size: 28px;
  }

  .section7__subheading {
    font-size: 15px;
  }

  .section7__toggle {
    height: 48px;
  }

  .toggle__tab {
    font-size: 16px;
    padding: 10px 24px;
    height: 48px;
  }

  .section7__cards {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    flex-wrap: nowrap;
  }

  .section7__cards::-webkit-scrollbar {
    display: none;
  }

  .section7__card {
    flex: 0 0 75vw;
    max-width: 300px;
    scroll-snap-align: start;
  }

  .section7__card-title {
    font-size: clamp(13px, 3vw, 20px);
  }
}

/* AI Usecase Section End */

/* Million AI new Graph Start */

/* ================================================
   MILLION AI GRAPH SECTION
   ================================================ */

/* ── Section wrapper ──────────────────────────── */
.mg-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-family: var(--font);
  background: #FDFCF5;
}

/* ── Lottie fills section exactly ────────────── */
.mg-bg-lottie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ── Content sits above Lottie ────────────────── */
.mg-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ================================================
 DESKTOP  (≥ 769px)
 Aspect ratio = 1920 / 1020
 ================================================ */
.mg-section--desktop {
  aspect-ratio: 1920 / 1020;
  width: 100%;
  min-height: 480px;
  display: block;
}

/* Header — centred within 80% content area */
.mg-section--desktop .mg-header {
  position: absolute;
  top: 4.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 80%;
  max-width: 800px;
  text-align: center;
}

.mg-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(20px, 2vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: #203450;
  width: 100%;
  margin: 0 auto;
}

.mg-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 0.85vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: #546C88;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mg-subtitle-line {
  white-space: nowrap;
}

.mg-subtitle strong {
  font-weight: 700;
  color: var(--text-dark);
}

/* Labels — bottom 8%, within 80% content area */
.mg-section--desktop .mg-labels {
  position: absolute;
  bottom: 8%;
  left: 10%;
  right: 10%;
}

.mg-label {
  font-family: 'Poppins', sans-serif;
  position: absolute;
  font-size: clamp(14px, 0.82vw, 20px);
  font-weight: 400;
  color: #203450;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Desktop label horizontal positions */
.mg-section--desktop .mg-label:nth-child(1) {
  left: 33.75%;
}

.mg-section--desktop .mg-label:nth-child(2) {
  left: 50%;
}

.mg-section--desktop .mg-label:nth-child(3) {
  left: 68%;
}

/* Hide mobile section on desktop */
.mg-section--mobile {
  display: none;
}

/* ================================================
 MOBILE  (≤ 768px)
 Uses a dedicated portrait Lottie — no rotation.
 ================================================ */
@media (max-width: 768px) {

  /* Hide desktop, show mobile */
  .mg-section--desktop {
    display: none;
  }

  .mg-section--mobile {
    display: block;
    width: 100%;
    aspect-ratio: 1020 / 1920;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    background: #FDFCF5;
    /* ← matches Lottie teal background */
  }

  /* Lottie starts below the header text */
  .mg-section--mobile .mg-bg-lottie {
    position: absolute;
    top: 18%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 82%;
    display: block;
    z-index: 0;
  }

  /* Content overlay */
  .mg-section--mobile .mg-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  /* Header — top-centre, 80% wide */
  .mg-section--mobile .mg-header {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .mg-section--mobile .mg-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 500;
    line-height: 1.3;
    color: #203450;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .mg-section--mobile .mg-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 2.5vw, 12px);
    font-weight: 400;
    line-height: 1.5;
    color: #546C88;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    display: block;
    /* revert to normal flow so text reflows for narrow width */
  }

  .mg-section--mobile .mg-subtitle-line {
    white-space: normal;
    display: inline;
  }

  .mg-section--mobile .mg-subtitle strong {
    font-weight: 700;
    color: #203450;
  }

  /* Labels */
  .mg-section--mobile .mg-labels {
    position: absolute;
    right: 5%;
    top: 0;
    bottom: 0;
    width: 32%;
    z-index: 2;
    pointer-events: none;
  }

  .mg-section--mobile .mg-label {
    position: absolute;
    right: 0;
    left: unset;
    width: 110px;
    /* ← constrain width to force wrapping */
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* ← allow text to wrap */
    color: #203450;
    text-align: right;
    justify-content: flex-end;
    /* ← keep text right-aligned when wrapping */
    white-space: normal;
    /* ← changed from nowrap to allow line breaks */
    transform: translateY(-50%);
  }

  /* Vertical positions matching the mobile Lottie's node placement */
  .mg-section--mobile .mg-label:nth-child(1) {
    top: 47%;
  }

  .mg-section--mobile .mg-label:nth-child(2) {
    top: 59%;
  }

  .mg-section--mobile .mg-label:nth-child(3) {
    top: 70%;
  }
}

/* Million AI new Graph End */

/* Our Vision Section Start */
/* Our Vision Section Start */
/* =============================================
   SECTION WRAPPER + DESIGN TOKENS (from Figma spec)
   Tokens are scoped to .vision-section so they stay
   self-contained and don't leak into the rest of the page.
   ============================================= */
.vision-section {
  --bg-cream: #FDFCF5;
  --text-dark: #14181E;
  --text-muted: #6A7488;
  --nav-bg: #14181E;
  --nav-icon: #F4F6FA;

  --font-display: 'Poppins', sans-serif;

  --card-radius: 8px;
  --card-shadow:
    0px 4px 4px rgba(0, 0, 0, 0.25),
    9px 0px 9px rgba(0, 0, 0, 0.26),
    2px 0px 5px rgba(0, 0, 0, 0.30);
  --card-shadow-active:
    0px 8px 32px rgba(0, 0, 0, 0.22),
    0px 2px 8px rgba(0, 0, 0, 0.12);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120px 0;
  gap: 80px;
  background: var(--bg-cream);
  font-family: var(--font-display);
  color: var(--text-dark);
  width: 80%;
  margin: 0 10%;
  overflow: hidden;
}

.vision-section *,
.vision-section *::before,
.vision-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =============================================
     HEADER ROW
     ============================================= */
.vision-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}

.vision-title {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 120%;
  color: #14181E;
  display: flex;
  align-items: center;
  flex: none;
  flex-shrink: 0;
  width: 380px;
  max-width: 100%;
  margin: 0;
}

.vision-descriptions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  flex: none;
  max-width: 740px;
  width: 100%;
}

.vision-desc {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 120%;
  color: #14181E;
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0;
}

.vision-desc:first-child {
  max-width: 292px;
}

.vision-desc:last-child {
  max-width: 412px;
}

/* =============================================
     CARDS ROW WRAPPER
     ============================================= */
.cards-row-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* =============================================
     CARDS TRACK
     ============================================= */
/* =============================================
     CARDS TRACK
     ============================================= */
.cards-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
  width: 100%;
  height: 380px;
  min-width: 0;
  overflow: visible;
  contain: layout;
}

.card:first-child {
  margin-left: 0;
}

.card:last-child {
  margin-right: 0;
}

/* =============================================
     INDIVIDUAL CARD
     ============================================= */
.card {
  position: relative;
  flex: 1 1 120px;
  height: 380px;
  border-radius: var(--card-radius);
  margin: 0 -10px;
  cursor: pointer;
  overflow: hidden;
  border: none;
  padding: 0;
  display: block;
  font-family: var(--font-display);
  box-shadow: var(--card-shadow);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* Smooth buttery expansion on hover */
  transition:
    flex 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
  will-change: flex, margin;
  contain: layout;
}

/* Stacking order reversed: earlier cards (starting with
     Marketing) sit ABOVE later ones, so the overlap/shadow
     cascades to the left → right instead of right → left. */
.card:nth-child(1) {
  z-index: 9;
}

.card:nth-child(2) {
  z-index: 8;
}

.card:nth-child(3) {
  z-index: 7;
}

.card:nth-child(4) {
  z-index: 6;
}

.card:nth-child(5) {
  z-index: 5;
}

.card:nth-child(6) {
  z-index: 4;
}

.card:nth-child(7) {
  z-index: 3;
}

.card:nth-child(8) {
  z-index: 2;
}

.card:nth-child(9) {
  z-index: 1;
}

.card:focus-visible {
  outline: 2px solid var(--text-dark);
  outline-offset: 3px;
  z-index: 5;
}

/* Fallback colours — shown while SVG backgrounds load/are absent */
.card:nth-child(1) {
  background-color: #9b7a6e;
}

.card:nth-child(2) {
  background-color: #c08080;
}

.card:nth-child(3) {
  background-color: #8880a0;
}

.card:nth-child(4) {
  background-color: #706878;
}

.card:nth-child(5) {
  background-color: #5a9890;
}

.card:nth-child(6) {
  background-color: #708068;
}

.card:nth-child(7) {
  background-color: #7090a0;
}

.card:nth-child(8) {
  background-color: #909090;
}

.card:nth-child(9) {
  background-color: #b09870;
}

/* SVG / image background */
.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--card-radius);
  pointer-events: none;
  transform: scale(1) translateZ(0);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Very subtle image animation on active card */
.card--active .card-bg {
  transform: scale(1.025) translateZ(0);
}

/* =============================================
     COLLAPSED LABEL
     ============================================= */
.card-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  z-index: 2;
  padding: 0 8px;
  pointer-events: none;
  opacity: 1;
  transform: translateZ(0);
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-label--white {
  color: #FFFFFF;
}

.card-label--black {
  color: #000000;
}

.card--active .card-label {
  opacity: 0;
  transform: translateY(-6px) translateZ(0);
}

/* =============================================
     EXPANDED CARD CONTENT
     ============================================= */
.card-content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) translateZ(0);
  transition:
    opacity 0.25s ease 0s,
    transform 0.3s ease 0s;
}

.card--active .card-content {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  pointer-events: auto;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  width: 215px;
  flex: none;
  gap: 8px;
}

.card-eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  width: 100%;
  flex: none;
  align-self: stretch;
}

.card-eyebrow--white {
  color: #ffffff;
}

.card-eyebrow--black {
  color: rgba(0, 0, 0, 0.6);
}

.card-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 120%;
  text-align: center;
  width: 100%;
  flex: none;
  align-self: stretch;
}

.card-heading--white {
  color: #ffffff;
}

.card-heading--black {
  color: #000000;
}

/* Taken out of the flex flow on purpose */
.card-body {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  width: 258px;
}

.card-body--white {
  color: #ffffff;
}

.card-body--black {
  color: #000000;
}

.card-body--strong {
  font-size: 15px;
}

/* =============================================
     ACTIVE STATE — Opens on place (no lift)
     ============================================= */
.card--active {
  flex: 0 0 295px;
  z-index: 25;
  margin: 0;
  transform: translateZ(0);
  box-shadow: var(--card-shadow-active);
  will-change: flex, margin;
}

.card--active+.card {
  margin-left: 0;
}

.cards-track:has(.card--active) .card:not(.card--active) {
  filter: brightness(0.88);
}

/* =============================================
     MOBILE NAV ARROWS (hidden on desktop)
     ============================================= */
.cards-nav {
  display: none;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nav-btn {
  width: 40px;
  height: 40px;
  background: var(--nav-bg);
  border-radius: 50px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.nav-btn:focus-visible {
  outline: 2px solid var(--text-dark);
  outline-offset: 2px;
}

/* =============================================
     RESPONSIVE — TABLET
     ============================================= */
@media (max-width: 1100px) {
  .vision-section {
    padding: 80px 0;
  }

  .vision-header {
    flex-direction: column;
    gap: 32px;
  }

  .vision-descriptions {
    max-width: 100%;
  }

  .cards-track {
    height: 320px;
  }

  .card {
    height: 320px;
  }

  .card--active {
    flex: 0 0 260px;
  }
}

/* =============================================
     RESPONSIVE — MOBILE
     ============================================= */
@media (max-width: 768px) {
  .vision-section {
    padding: 40px 0;
    gap: 24px;
    align-items: flex-start;
  }

  .vision-header {
    gap: 24px;
  }

  .vision-title {
    font-size: 26px;
    line-height: 39px;
    font-weight: 600;
    color: #0C0F14;
  }

  .vision-descriptions {
    flex-direction: column;
    gap: 20px;
  }

  .vision-desc {
    font-size: 14px;
    line-height: 160%;
    color: var(--text-muted);
  }

  .cards-row-wrapper {
    gap: 0;
  }

  /* horizontal scroll track, snap-aligned, cards peek at the edge */
  .cards-track {
    height: 280px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 24px;
  }

  .cards-track::-webkit-scrollbar {
    display: none;
  }

  .card {
    flex: 0 0 24px;
    height: 280px;
    margin: 0 -4px;
    scroll-snap-align: start;
    transition:
      flex 0.6s cubic-bezier(0.19, 1, 0.22, 1),
      box-shadow 0.4s ease,
      margin 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .card--active {
    flex-basis: 220px;
    margin: 0 -4px;
    /* keep mobile's original overlap; the desktop hover-clipping
         issue doesn't occur here since cards scroll instead of
         squeezing each other */
    transform: translateY(-10px) scale(1.02);
  }

  .card--active+.card {
    margin-left: -4px;
  }

  /* On touch devices hover can't drive state, so always show
       the active card's content and keep collapsed cards as thin
       color strips (label hidden — too narrow to hold text) */
  .card:not(.card--active) .card-label {
    opacity: 0;
  }

  .card-content {
    padding: 24px;
  }

  .card-body {
    bottom: 24px;
  }

  .card-heading {
    font-size: 18px;
  }

  .cards-nav {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {

  .card,
  .card-label,
  .card-content,
  .card-bg {
    transition: none;
  }

  .card--active {
    transform: none;
  }
}

/* Our Vision Section End */
/* Our Vision Section End */

/* Our Vision Section End */



/* ============================================================
   SCROLL REVEAL — sections animate up from bottom on scroll
   Generic, reusable across any section on the page.
   ============================================================ */

/* Base state: every section marked .reveal-up starts shifted
   down and invisible. We animate transform + opacity only —
   both are GPU-friendly and won't trigger layout thrashing. */
.reveal-up {
  opacity: 0;
  transform: translateY(64px) scale(0.95);
  transform-origin: center bottom;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* When JS adds this class (IntersectionObserver fired), the
     section eases up into its resting position. */
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Staggered children ──────────────────────────────────────
     For sections with a row of cards (use-case cards, AI usecase
     cards, vision cards), each card gets its own small delay so
     they cascade in rather than arriving as one flat block.
     JS sets the --reveal-delay custom property per-child. */
.reveal-stagger:not(.card) {
  opacity: 0;
  transform: translateY(48px) scale(0.95);
  transform-origin: center bottom;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal-stagger.is-visible:not(.card) {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Respect reduced-motion preference site-wide for the reveal
     system — show content immediately, no animation. */
@media (prefers-reduced-motion: reduce) {

  .reveal-up,
  .reveal-stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
     HERO — word-by-word reveal on page load (verteal-style)
     Each word in the title/subtitle is wrapped in a <span> by JS
     and fades up individually with a small stagger.
     ============================================================ */

/* Wrapper just needs overflow control so words can slide up
     from below their own baseline without clipping ascenders */
.hero__title,
.hero__subtitle {
  overflow: visible;
}

.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  filter: blur(4px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--word-delay, 0s);
  will-change: opacity, transform, filter;
}

.hero-word.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Each word's wrapping <span> needs to clip its own vertical
     slide so words rise up from inside their own line, not from
     the bottom of the whole heading block */
.hero-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

/* Description + actions still fade up as a block, but only
     after the headline words have finished their cascade —
     JS assigns this delay dynamically based on word count */
.hero__description,
.hero__actions {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--hero-block-delay, 0.9s);
}

.hero__description.is-visible,
.hero__actions.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .hero-word,
  .hero__description,
  .hero__actions {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Prevent horizontal scrolling, side white space, and overscroll bouncing globally only on mobile */
@media (max-width: 767px) {

  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    margin: 0;
    padding: 0;
  }
}