/* ============================================================
   Aleph website v2. Reference layout: 1440px wide.
   ============================================================ */

/* Söhne (Klim, licensed) - Buch 400 / Kräftig 500 / Halbfett 600 */
@font-face {
  font-family: "Söhne";
  src: url("/assets/fonts/soehne-buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Söhne";
  src: url("/assets/fonts/soehne-kraftig.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Söhne";
  src: url("/assets/fonts/soehne-halbfett.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-soehne: "Söhne", "Test Söhne", "Sohne", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-inter: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* palette scales - see CLAUDE.md before editing the aliases below */
  --purple-50: #f2f3ff;
  --purple-100: #e4e7ff;
  --purple-200: #c9ceff;
  --purple-300: #a7aeff;
  --purple-400: #7f88ff;
  --purple-500: #5a5cff;
  --purple-600: #4a4de8;
  --purple-700: #3b3ec0;
  --purple-800: #2f3294;
  --purple-900: #23266b;
  --navy-600: #2e3357;
  --navy-700: #222642;
  --navy-800: #171a2e;
  --navy-900: #0f1121;
  --neutral-25: #fcfcfd;
  --neutral-50: #f8f8fb;
  --neutral-100: #f2f4f7;
  --neutral-200: #e9ecf3;
  --neutral-300: #dce1eb;
  --neutral-400: #b9c0cf;
  --neutral-500: #98a2b3;
  --neutral-600: #667085;
  --neutral-700: #475467;
  --neutral-800: #344054;
  --neutral-900: #1d2939;
  --color-black: #0b0d12;
  --color-soft-black: #111318;
  --gradient-brand: linear-gradient(135deg, #5a5cff 0%, #3b3ec0 100%);
  --gradient-dark: linear-gradient(135deg, #0f1121 0%, #1c2152 100%);

  /* semantic aliases */
  --color-text-primary: #1a1a1a;
  --color-title: #2e3335;
  --color-accent: #5b63e8;
  --color-accent-soft: #b4b8ff;
  --color-muted: #6d758f;
  --color-border: #ededed;

  --container: 1224px;
  --nav-height: 72px;

  /* motion tokens (designer motion spec) */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-ambient: 4000ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  background: #fafafa;
  color: var(--color-text-primary);
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* anchored sections land below the sticky nav, not under it */
section[id] {
  scroll-margin-top: calc(var(--nav-height) + 8px);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 1280px) {
  .container {
    padding-inline: 0;
  }
}

/* ============ Buttons ============ */

/* button system: primary (violet gradient), secondary (solid dark),
   tertiary (white outline) - each with hover/pressed/disabled states */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-family: var(--font-soehne);
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--purple-500);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  cursor: default;
  pointer-events: none;
}

.btn--violet {
  background: linear-gradient(166deg, #5a5cff 0%, #4a4de8 100%);
  color: #fff;
}

.btn--violet:hover {
  background: linear-gradient(166deg, #6970ff 0%, #5a5cff 100%);
}

.btn--violet:active {
  background: linear-gradient(166deg, #3b3ec0 0%, #2f3294 100%);
}

.btn--violet:disabled,
.btn--violet[disabled] {
  background: var(--purple-200);
}

.btn--dark {
  background: var(--navy-900);
  color: #fff;
  width: 260px;
  height: 50px;
  font-size: 17px;
}

.btn--dark:hover {
  background: #273047;
}

.btn--dark:active {
  background: var(--navy-900);
}

.btn--dark:disabled,
.btn--dark[disabled] {
  background: #d0d5dd;
}

/* ============ Navbar ============ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fafafa;
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 218px;
}

.nav__logo img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}

.nav__logo span {
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 25px;
  text-transform: capitalize;
  color: var(--color-title);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__cta {
  width: 160px;
  height: 40px;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 16px;
  background: var(--navy-900);
  color: #fff;
}

.nav__cta:hover {
  background: #273047;
}

.nav__cta:active {
  background: var(--navy-900);
}


/* ============ Page guide lines & decor ============ */

.decor {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.decor--frame {
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
}

.decor__circle {
  position: absolute;
  aspect-ratio: 1 / 1;
}

.decor__circle--a { /* 247px @ (-87, 953) */
  width: 247px;
  left: -87px;
  top: 953px;
}

.decor__circle--b { /* 247px @ (1266, 1168) */
  width: 247px;
  left: 1266px;
  top: 1168px;
}

/* ============ Hero ============ */

.hero {
  position: relative;
  overflow: hidden;
}

/* vector-line composition (1536x1024, centered, top -126) */
.hero__bg {
  position: absolute;
  left: 50%;
  top: -126px;
  width: 1536px;
  height: 1024px;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero__bg-composite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* animated blur blobs float above the static composition.
   Two layers per blob: the wrapper owns the drift loop (translate) plus the
   cursor-following hover offset (transform, set by JS), the inner image owns
   the breathe loop (scale + opacity) — the three never fight. */
.hbg-wrap {
  position: absolute;
  transition: transform var(--duration-fast) var(--ease-standard);
  will-change: transform;
}

.hbg-float {
  width: 100%;
  height: 100%;
  animation: blobBreathe var(--duration-ambient) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.float-a { left: 1256.2px; top: 441.2px; width: 451.7px; height: 451.6px; }
.float-b { left: -111.8px; top: 280.2px; width: 274.5px; height: 274.5px; }
/* rides 90px above the trusted-by strip (458.7 + design gap 377) */
.float-c { left: 470.7px; top: 835.7px; width: 594.6px; height: 291.2px; }

/* floating blur circles: continuous soft x+y drift, staggered periods so
   the three blobs never sync */
.float-a {
  animation: floatA 13s ease-in-out infinite;
}

.float-b {
  animation: floatB 17s ease-in-out infinite;
}

.float-c {
  animation: floatC 21s ease-in-out infinite;
}

/* per-blob breathe variation (4000-4500ms, scale 1.05-1.08) */
.float-a .hbg-float { --breathe-scale: 1.07; animation-duration: 4000ms; }
.float-b .hbg-float { --breathe-scale: 1.05; animation-duration: 4500ms; }
.float-c .hbg-float { --breathe-scale: 1.08; animation-duration: 4200ms; }

@keyframes blobBreathe {
  from { opacity: 0.6; transform: scale(1); }
  to { opacity: 0.9; transform: scale(var(--breathe-scale, 1.06)); }
}

@keyframes floatA {
  0%, 100% { translate: 0 0; }
  25% { translate: 18px -26px; }
  50% { translate: -10px -38px; }
  75% { translate: -22px -12px; }
}

@keyframes floatB {
  0%, 100% { translate: 0 0; }
  30% { translate: -16px -20px; }
  55% { translate: 12px -32px; }
  80% { translate: 20px -8px; }
}

@keyframes floatC {
  0%, 100% { translate: 0 0; }
  20% { translate: 16px -18px; }
  45% { translate: 28px -38px; }
  70% { translate: -14px -22px; }
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 106px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.07;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

.hero__subtitle {
  margin: 28px 0 0;
  max-width: 865px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.btn--hero {
  margin-top: 32px;
  height: 74px;
  padding: 0 78px;
  font-size: 24px;
}

.hero-cta__arrow {
  display: none;
  width: 15px;
}

/* ============ Logos ============ */

.logos {
  position: relative;
  /* fixed design-frame spacing; @supports block below makes it ride the fold */
  padding: 377px 0 36px;
}

/* the half-circle composition that cradles the trusted-by strip: arc crest
   sits 210px above the strip, so it tracks the strip */
.logos__arcs {
  position: absolute;
  top: 167px; /* 377 - 210 */
  left: 50%;
  transform: translateX(-50%);
  width: 1536px;
  max-width: none;
  pointer-events: none;
}

/* At rest the first viewport ends on the "Trusted by" label line at ANY
   viewport height, tall monitors included: the label bottom sits 24px
   above the fold (CTA bottom 508 + gap + 22px label line -> gap =
   100svh - 554px) and the logo row starts right at the fold, revealed
   by scrolling - no animation. Floored at 96px on squeezed laptops;
   the 1600px ceiling only guards pathological viewports. The arcs and
   the glow blob under the strip share the same variable so the whole
   composition moves as one. */
@supports (height: 100svh) {
  .hero {
    --logos-gap: clamp(96px, calc(100svh - 554px), 1600px);
  }

  .logos {
    padding-top: var(--logos-gap);
  }

  .logos__arcs {
    /* 210px above the strip, but never above the top of the
       section — on squeezed viewports the crest stays clear of the CTA */
    top: max(12px, calc(var(--logos-gap) - 210px));
  }

  .float-c {
    top: calc(458.7px + var(--logos-gap));
  }
}

.logos__panel {
  position: relative;
}

/* white band behind the trusted-by label + logo strip, spanning the
   full viewport width with a softly blurred top edge; the sides
   overshoot the viewport so only the top feathers, and the bottom
   overshoots past the section end so the glow blob and arc tails
   never show between the strip and the stats section (the hero's
   overflow clip ends the band exactly at the section boundary).
   28px above the label box. */
.logos__panel::before {
  content: "";
  position: absolute;
  inset: -28px -60px -80px;
  background: #fafafa;
  filter: blur(18px);
  pointer-events: none;
}

.logos__label,
.logos__row {
  position: relative;
}

.logos__label {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-muted);
}

.logos__row {
  margin-top: 23px;
}

.logos__row img {
  width: 100%;
  height: auto;
}

/* logos are always rendered - no entrance animation; the row sits just
   below the fold at rest and scrolling reveals it naturally */
.logos__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1224 / 58;
}

/* phone-only logo marquee (see the ≤640px block) */
.logos__marquee {
  display: none;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logos__mtrack {
  display: flex;
  width: max-content;
  animation: mLogos 42s linear infinite;
}

.logos__mtrack img {
  height: 38px;
  width: auto;
  margin-right: 64px;
}

/* the track holds two identical strips, so -50% loops seamlessly */
@keyframes mLogos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ Stats ============ */

.stats {
  position: relative;
  height: 329px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

/* faint edge circles from the design frame - anchored to this section
   so they track it instead of drifting with page-height changes.
   Design offsets: left circle straddles the stats row hanging off the
   left edge, right circle sits lower, reaching into the gap below. */
.stats__circle {
  position: absolute;
  width: 247px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  /* the right circle reaches into the next section - paint above its
     background so the lower half isn't cut off */
  z-index: 1;
}

.stats__circle--left {
  left: calc(50% - 844px);
  top: -18px;
}

.stats__circle--right {
  left: calc(50% + 593px);
  top: 197px;
}

.stats__row {
  position: relative;
  display: flex;
  gap: 80px;
  align-items: flex-start;
  justify-content: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat__number {
  margin: 0;
  font-weight: 600;
  font-size: 100px;
  line-height: 0.72;
  color: var(--purple-500);
  white-space: nowrap;
  /* counters tick without width jitter; centered inside the
     width locked by the count-up script */
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* the unit ("min") renders smaller than the digits, per the design
   (64px against the 100px digits) */
.stat__unit {
  font-size: 0.64em;
}

.stat__label {
  margin: 33px 0 0;
  text-align: center;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.375;
  color: var(--color-text-primary);
}

/* ============ What Aleph Makes Possible ============ */

.possible {
  position: relative;
}

.possible__sticky {
  padding-top: 100px;
  padding-bottom: 100px;
  background: #fafafa;
}

.possible__title {
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 48px;
  line-height: 40px;
  color: #000;
  text-align: center;
}

.possible__title span {
  color: var(--color-accent);
}

.possible__sub {
  margin: 25px 0 0;
  font-size: 20px;
  line-height: 28px;
  color: #000;
  text-align: center;
}

.possible__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 96px;
}

.possible__list {
  width: 412px;
  margin-left: 44px;
  margin-top: 7px;
}

.pitem + .pitem {
  border-top: 1px solid #e2e2e2;
}

.pitem__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-primary);
  text-align: left;
  transition: font-size 0.35s cubic-bezier(0.33, 0, 0.2, 1), padding 0.35s cubic-bezier(0.33, 0, 0.2, 1), color 0.3s ease;
}

.pitem__chevron {
  width: 13px;
  height: 8px;
  transition: transform 0.35s ease;
}

.pitem__body {
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  opacity: 0;
  transition: grid-template-rows 0.38s cubic-bezier(0.33, 0, 0.2, 1), padding-bottom 0.38s cubic-bezier(0.33, 0, 0.2, 1), opacity 0.3s ease;
}

.pitem__body p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  max-width: 390px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.pitem.is-active .pitem__head {
  font-size: 22px;
  padding-bottom: 12px;
  color: var(--purple-500);
}

.pitem.is-active .pitem__chevron {
  transform: rotate(180deg);
}

.pitem.is-active .pitem__body {
  grid-template-rows: 1fr;
  padding-bottom: 20px;
  opacity: 1;
}

.possible__cta {
  margin-top: 30px;
}

.possible__viz {
  position: relative;
  width: 660px;
  height: 660px;
  flex-shrink: 0;
  margin-top: -15px;
}

.pviz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.33, 0, 0.2, 1);
  will-change: opacity, transform;
}

.pviz.is-active {
  opacity: 1;
  transform: none;
}

/* ============ Context Enrichment hub ============ */

.hub {
  position: relative;
  padding: 100px 0;
  background: #fafafa;
}

/* construction grid: one instance spanning the section boundary — it starts
   105px above the hub in the design and bleeds into the previous section */
.hub__grid {
  position: absolute;
  top: -105px;
  left: calc(50% - 819.5px);
  width: 1609px;
  height: 965px;
  max-width: none;
  pointer-events: none;
}

.hub__blob {
  position: absolute;
  top: -153px;
  left: -79px;
  width: 276px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.hub__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 604px wheel + 82px gap + 496px copy */
  gap: 82px;
  max-width: 1182px;
  margin: 0 auto;
  padding: 0 24px;
}

.hub__diagram {
  position: relative;
  width: 604px;
  flex-shrink: 0;
}

.hub__wheel {
  display: block;
  width: 100%;
  height: auto;
}

.wedge {
  cursor: pointer;
}

.wedge__base {
  fill: #fff;
  filter: url(#wedgeShadow);
  transition: fill var(--duration-base) var(--ease-standard);
}

/* the design's edge line is an inner border: drawn on a clipped overlay so
   the outer silhouette stays sharp (stroke widths are doubled, half shows) */
.wedge__edge {
  fill: none;
  pointer-events: none;
  stroke: #dee1ee;
  stroke-width: 2.4;
  transition: stroke var(--duration-base) var(--ease-standard);
}

/* hover preview: fill shift only, faster than the select transition -
   no scale, it would break the circular geometry */
.wedge:not(.is-active):hover .wedge__base {
  fill: #eef0fc;
  transition-duration: var(--duration-fast);
}

.wedge:not(.is-active):hover .wedge__edge {
  stroke: #eef0fc;
  transition-duration: var(--duration-fast);
}

/* active wedge: #5B63E8 at 83% flattened over white, with the design's
   darker-violet edge hairline and no contact halo outside its edges */
.wedge.is-active .wedge__base {
  fill: #777eec;
  filter: url(#wedgeShadowActive);
}

.wedge.is-active .wedge__edge {
  stroke: #565ee4;
  stroke-width: 1.5;
}

/* act's shadow is tighter in the frame - no tail into the lower-left rim */
.wedge[data-phase="act"] .wedge__base {
  filter: url(#wedgeShadowAct);
}

/* outer Context Enrichment layer: a thin dashed circle per the design,
   with clear air between it and the white disc; it fills solid violet
   only while phase 6 (enrichment) is selected */
.hub__dashed {
  fill: none;
  pointer-events: none;
  transition: fill var(--duration-base) var(--ease-standard);
}

.hub--enriched .hub__dashed {
  fill: #5b63e8;
}

.hub__ringhit {
  cursor: pointer;
}

.wedge__icon--white {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.wedge__icon--dark {
  transition: opacity 0.25s ease;
}

.wedge__label {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16.9px;
  fill: #2e2e37;
  transition: fill 0.25s ease;
  pointer-events: none;
}

.wedge.is-active .wedge__icon--white {
  opacity: 1;
}

.wedge.is-active .wedge__icon--dark {
  opacity: 0;
}

.wedge.is-active .wedge__label {
  fill: #fff;
}

.wedge__icon,
.hub__wheel image {
  pointer-events: none;
}

.wedge .wedge__base {
  pointer-events: auto;
}

.hub__wheeltitle {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 18.8px;
  fill: #1a1a1a;
  cursor: pointer;
  transition: fill 0.25s ease;
}

.hub--enriched .hub__wheeltitle {
  fill: var(--color-accent);
}

.hub__copy {
  width: 496px;
  padding-top: 36px;
}

.hub__copy h2 {
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.05;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.hub__copy h2 span {
  color: var(--color-accent);
}

/* segmented progress bar for the mobile phase stepper */
.hub__bar {
  display: none;
  gap: 6px;
  margin-top: 28px;
}

.hub__seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e2e2e2;
  overflow: hidden;
}

.hub__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--color-accent);
}

.hub__seg.is-done .hub__fill,
.hub__seg.is-active .hub__fill {
  width: 100%;
}

.hub__item {
  margin-top: 64px;
}

.hub__itemhead {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hub__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e3e4f4;
  border-radius: 16px;
  background: #fff;
}

/* accent SVG glyphs sit in a 40x40 box rendered at 20px, per the design */
.hub__icon img {
  width: 20px;
  height: 20px;
}

.hub__itemtitle {
  font-weight: 600;
  font-size: 24px;
  color: var(--color-accent);
}

.hub__item p {
  margin: 12px 0 0;
  max-width: 493px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.hub__pager {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 40px;
}

/* pager arrows: DS Arrow component - circle + glyph recolor per state */
.hub__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fafafa;
  border: 1px solid #636363;
  color: #636363;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hub__arrow:hover {
  background: var(--purple-50);
  border: 1.4px solid var(--purple-200);
  color: var(--purple-500);
}

.hub__arrow:active {
  background: var(--purple-100);
  border: 1.4px solid var(--purple-400);
  color: var(--purple-500);
}

.hub__arrow:disabled {
  background: #fff;
  border: 1.4px solid var(--neutral-200);
  color: var(--neutral-300);
}

.hub__pager .hub__arrow:first-child svg {
  transform: scaleX(-1);
}

.hub__arrow svg {
  width: 100%;
  height: 100%;
}

.hub__count {
  font-size: 16px;
  color: #636363;
}

/* ============ ROI stats ============ */

.roi {
  position: relative;
  padding: 120px 24px;
  /* flattened export of the designer's background (gradient wash + grid,
     1440x761) - replaces the old hand-approximated gradient stack */
  background: #212130 url("/assets/v2/roi-bg.webp") center / cover no-repeat;
}

.roi__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.roi__title {
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 48px;
  line-height: 54px;
  color: #fff;
  text-align: center;
}

.roi__sub {
  margin: 29px auto 0;
  max-width: 766px;
  font-size: 20px;
  line-height: 28px;
  color: #dde1e6;
  text-align: center;
}

.roi__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 120px;
  max-width: 1253px;
  margin: 32px auto 0;
  padding: 64px 100px;
  background: #2e2e37;
  border: 1px solid #636374;
  border-radius: 12px;
}

.roi__cell {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.roi__number {
  margin: 0;
  min-width: 148px;
  font-weight: 600;
  font-size: 80px;
  line-height: 0.72;
  color: var(--color-accent-soft);
  white-space: nowrap;
}

.roi__label {
  margin: -4px 0 0;
  max-width: 261px;
  font-weight: 500;
  font-size: 22px;
  line-height: 31px;
  color: #fff;
}

/* ============ Integrations ============ */

.integrations {
  position: relative;
  padding: 100px 24px;
  background: #fafafa;
}

.integrations__inner {
  max-width: 1224px;
  margin: 0 auto;
  text-align: center;
}

.integrations__inner h2 {
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.15;
  color: var(--color-text-primary);
}

.integrations__inner h2 span {
  color: var(--color-accent);
}

.integrations__sub {
  margin: 28px auto 0;
  max-width: 830px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-text-primary);
  text-align: center;
}

.integrations__viz {
  width: 920px;
  max-width: 100%;
  margin: 56px auto 0;
  aspect-ratio: 920 / 570;
  height: auto;
}

/* --- animated integrations diagram (one rAF timeline in app.js) --- */

.iv-ring {
  fill: none;
  stroke: #e7e9f2;
  stroke-width: 1.5;
}

.iv-dot { fill: #d4d7e3; }
.iv-srcdot { fill: var(--color-accent); }

.iv-line-base,
.iv-line-purple {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.iv-line-base { stroke: #c9cdda; }
.iv-line-purple { stroke: var(--color-accent); }

.iv-right-base,
.iv-right-purple {
  fill: none;
  stroke-width: 2;
}

.iv-right-base { stroke: #dfe2ec; }
.iv-right-purple { stroke: var(--color-accent); }

.iv-ripple {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  opacity: 0;
}

.iv-panel { fill: #fff; }
.iv-sep { stroke: #f0f0f4; }
.iv-item { fill: #fff; }

.iv-iconcirc {
  fill: #fff;
  stroke: #e3e4f4;
  stroke-width: 1.2;
}

.iv-icon {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iv-label {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  fill: #1a1a1a;
}

/* ============ Testimonials ============ */

.testimonials {
  position: relative;
  padding: 100px 0;
  background: #fafafa;
}

.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  /* the 1092px-tall grid is anchored to the section bottom so the
     circle lines run into the CTA band with no bare strip; the top
     stays covered as long as the section is shorter than the graphic */
  background: url("/assets/v2/imgAlephConstructionGrid1.svg") no-repeat -32px bottom / 1639px auto;
  opacity: 1;
  pointer-events: none;
}

.testimonials__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 0 167px;
}

.testimonials__title {
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 40px;
  color: var(--color-text-primary);
}

.testimonials__title span {
  color: var(--color-accent);
}

.testimonials__viewport {
  position: relative;
  margin-top: 58px;
  overflow: hidden;
}

.testimonials__track {
  display: flex;
  gap: 32px;
}

.testimonials__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 256px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #fafafa 60%);
  pointer-events: none;
}

.tcard {
  flex: 0 0 444px;
  box-sizing: border-box;
  /* column flex with flex-start so the divider can pin to the card
     bottom (same row on every card) without recentering anything */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 565px;
  background: #fff;
  border: 1px solid #dde1e6;
  border-radius: 12px;
  box-shadow: 0 4px 5px rgba(91, 91, 91, 0.18);
  /* component paddings: 48 top/left, 43 right, 49 bottom */
  padding: 48px 43px 49px 48px;
}

.tcard__logo {
  height: 32px;
  width: auto;
}

.tcard__quote {
  margin: 48px 0 0;
  max-width: 334px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.tcard__name {
  margin: 20px 0 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
}

.tcard__role {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
}

/* pinned below the longest text: same row on every card */
.tcard__divider {
  margin: auto 0 0;
  width: 100%;
  border: 0;
  border-top: 1px solid #dde1e6;
}

.tcard__stats {
  display: flex;
  gap: 20px;
  margin-top: 28px;
}

/* Söhne Halbfett 48/140% in the component's 38.25px trimmed box, so
   the 12px gap to the label is optical, as designed */
.tcard__stat {
  margin: 0;
  display: flex;
  align-items: center;
  height: 38.25px;
  font-family: var(--font-soehne);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-accent);
}

/* stat units ("min") render smaller than the digits, like .stat__unit */
.tcard__statunit {
  font-size: 0.64em;
}

.tcard__statlabel {
  margin: 12px 0 0;
  max-width: 152px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.testimonials__nav {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 40px;
}

/* DS Arrow component at the section's 48px instance size */
.tnav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #636363;
  border-radius: 50%;
  color: #636363;
  background: #fafafa;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tnav:hover {
  background: var(--purple-50);
  border: 1.4px solid var(--purple-200);
  color: var(--purple-500);
}

.tnav:active {
  background: var(--purple-100);
  border: 1.4px solid var(--purple-400);
  color: var(--purple-500);
}

.tnav:disabled {
  background: #fff;
  border: 1.4px solid var(--neutral-200);
  color: var(--neutral-300);
}

.tnav svg {
  width: 100%;
  height: 100%;
}

.tnav--prev svg {
  transform: scaleX(-1);
}

/* ============ Bottom CTA ============ */

.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 100px of air above and below the text + button block */
  padding: 100px 24px;
  background: #212126 url("/assets/v2/cta-bg.jpg") no-repeat center / cover;
}

.cta__title {
  position: relative;
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 48px;
  line-height: 56px;
  color: #fff;
}

.cta__title span {
  color: var(--color-accent-soft);
}

.cta__sub {
  position: relative;
  margin: 32px 0 0;
  max-width: 569px;
  font-size: 20px;
  line-height: 27px;
  color: #fff;
}

.cta__btn {
  position: relative;
  margin-top: 40px;
  height: 74px;
  padding: 0 82px;
  background: #fff;
  border: 1.4px solid #d7dceb;
  color: var(--neutral-900);
  font-size: 24px;
}

.cta__btn:hover {
  background: #fff;
  border-color: var(--purple-300);
}

.cta__btn:active {
  background: var(--purple-50);
  border-color: var(--purple-300);
}

/* ============ Footer ============ */

.footer {
  position: relative;
  background: #fff;
}

.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 88px 80px;
}

/* brand block + LinkedIn button above the divider */
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 34px;
}

.footer__brandrow {
  display: flex;
  align-items: center;
  gap: 7px;
}

.footer__brandrow img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.footer__brandrow span {
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  color: var(--neutral-900);
}

.footer__tagline {
  margin: 6px 0 0;
  font-size: 20px;
  color: var(--neutral-600);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 1px solid var(--neutral-300);
  border-radius: 12px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 23px;
  color: var(--navy-900);
  transition: border-color 0.15s ease;
}

.footer__social:hover {
  border-color: var(--neutral-500);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--neutral-200);
  padding-top: 42px;
}

.footer__copy {
  margin: 0;
  font-size: 16px;
  color: var(--neutral-700);
}

.footer__legal {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.footer__legal a {
  color: var(--neutral-700);
  text-decoration: none;
}

.footer__legal a:hover {
  color: var(--neutral-900);
  text-decoration: underline;
}

.footer__legal a + a {
  margin-left: 14px;
  padding-left: 15px;
  border-left: 1px solid var(--neutral-200);
}

/* ============ Book a demo modal ============ */

.demo-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: 92dvh;
  overflow-y: auto;
  z-index: 60; /* above the page, below hCaptcha's challenge overlay */
  width: min(440px, calc(100vw - 48px));
  padding: 32px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(26, 26, 26, 0.18);
}

/* focus is managed onto the name field; the dialog box itself
   should not show a focus ring */
.demo-modal:focus,
.demo-modal:focus-visible {
  outline: none;
}

.demo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(26, 26, 26, 0.45);
}

.demo-backdrop[hidden] {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.demo-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 26px;
  line-height: 1;
  color: var(--color-muted);
}

.demo-modal__close:hover {
  color: var(--color-text-primary);
}

.demo-modal__close:focus-visible {
  outline: 2px solid var(--color-accent);
  border-radius: 6px;
}

.demo-modal__close:focus:not(:focus-visible) {
  outline: none;
}

.demo-modal__title {
  margin: 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 26px;
  color: var(--color-text-primary);
}

.demo-modal__sub {
  margin: 8px 0 24px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-muted);
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-form__botcheck {
  position: absolute;
  left: -9999px;
}

.demo-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-form__field span {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-title);
}

.demo-form__field input,
.demo-form__field textarea {
  font: inherit;
  /* 16px minimum keeps iOS Safari from auto-zooming the field on focus */
  font-size: max(16px, 1rem);
  color: var(--color-text-primary);
  background: #fafafa;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 12px 14px;
  resize: vertical;
}

.demo-form__field input {
  min-height: 48px;
}

.demo-form__field input:focus,
.demo-form__field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: transparent;
}

/* hCaptcha widget inside the modal: reserve its height, center it */
.demo-form .h-captcha {
  min-height: 78px;
  display: flex;
  justify-content: center;
}

.demo-form__submit {
  height: 50px;
  font-size: 17px;
  margin-top: 4px;
}

.demo-form__submit[disabled] {
  cursor: default;
}

.demo-form__status {
  margin: 0;
  min-height: 20px;
  font-size: 14px;
  text-align: center;
  color: var(--color-muted);
}

.demo-form__status.is-error {
  color: #b3261e;
}

.demo-form__status.is-success {
  color: #1e7e34;
}

/* ============ Responsive ============ */

@media (max-width: 1100px) {
  .decor,
  .stats__circle,
  .hub__grid,
  .hub__blob,
  .logos__arcs {
    display: none;
  }

  .nav__logo {
    width: auto;
  }

  .hero__bg {
    left: 0;
    transform: none;
    width: 100%;
  }

  .hero__title {
    font-size: 42px;
  }

  .hero__title br {
    display: none;
  }

  .hero__subtitle {
    font-size: 20px;
  }

  .logos__label {
    margin-top: 96px;
  }

  .stats {
    height: auto;
    padding: 64px 24px;
  }

  .stats__row {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .stat__number {
    font-size: 72px;
  }

  .possible__sticky {
    padding: 64px 0;
  }

  .possible__title,
  .roi__title,
  .integrations__inner h2 {
    font-size: 32px;
    line-height: 1.15;
  }

  .possible__grid {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin-top: 56px;
  }

  .possible__list {
    width: 100%;
    max-width: 480px;
    margin-left: 0;
  }

  .possible__viz {
    width: min(660px, 92vw);
    height: min(660px, 92vw);
    margin-top: 0;
  }

  .hub__inner {
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
  }

  .hub__diagram {
    width: min(604px, 94vw);
  }

  .hub__copy {
    width: 100%;
    max-width: 560px;
    padding-right: 0;
  }

  .roi__panel {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 32px;
  }

  .testimonials__inner {
    padding-left: 24px;
  }

  .footer__inner {
    padding: 80px 24px 64px;
  }

  .testimonials__title {
    font-size: 32px;
  }

  .tcard {
    flex-basis: min(444px, 88vw);
  }

  .cta__title {
    font-size: 26px;
  }
}

/* ============ Mobile-only components (hidden on desktop) ============ */

.hero__art,
.pitem__viz,
.intm,
.tnav__count,
.cta__decor {
  display: none;
}

@keyframes heroGlowFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -32px; }
}

@keyframes intmDash {
  to { stroke-dashoffset: -8; }
}

@keyframes intmPulse {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  88%, 100% { offset-distance: 100%; opacity: 0; }
}

/* ============ Phones (≤640px) ============
   The dedicated mobile design (390px canvas, 20px margins).
   SPACING SPEC (designer priority - keep exact):
   light sections 56px top/bottom (hero: 56px nav -> headline);
   dark sections (outcomes, CTA) 80px top/bottom;
   stats numbers 72px, dark-card numbers 52px, all h2s 32px. */

@media (max-width: 640px) {
  /* --- Nav: standard sticky bar; hides scrolling down, returns on up --- */
  .nav {
    transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  }

  .nav.is-hidden {
    transform: translateY(-100%);
  }

  .nav.is-scrolled {
    box-shadow: 0 6px 20px rgba(26, 26, 26, 0.08);
  }

  .nav__inner {
    height: 60px;
    padding-inline: 20px 12px;
  }

  .nav__globe,
  .nav__divider {
    display: none;
  }

  .nav__cta {
    width: auto;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
  }

  /* --- Hero: light, Halbfett headline, full-width primary CTA --- */
  .hero__bg {
    display: none;
  }

  .hero__content {
    padding: 56px 20px 0; /* 56px between the nav and the headline */
  }

  .hero__title {
    font-size: clamp(34px, 10.2vw, 42px);
    line-height: 1.12;
    font-weight: 600; /* Soehne Halbfett per designer note */
  }

  .hero__title br {
    display: none;
  }

  .hero__subtitle {
    margin-top: 20px;
    max-width: 32em;
    font-size: 18px;
    line-height: 1.5;
    color: var(--neutral-700);
  }

  .btn--hero {
    width: 100%;
    height: 52px;
    margin-top: 28px;
    padding: 0;
    border-radius: 9px;
    font-size: 17px;
  }

  /* large arcs + floating glow in a short frame, so the trusted-by
     caption is visible without scrolling */
  .hero__art {
    display: block;
    position: relative;
    height: 150px;
    margin-top: 4px;
    pointer-events: none;
  }

  .hero__art-arcs {
    position: absolute;
    left: 50%;
    top: 18px;
    width: 780px;
    max-width: none;
    transform: translateX(-50%);
    opacity: 0.9;
  }

  .hero__art-glow {
    position: absolute;
    left: 50%;
    top: 44px;
    width: 560px;
    height: 260px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(201, 206, 255, 0.8) 0%, rgba(201, 206, 255, 0) 70%);
    animation: heroGlowFloat 6s ease-in-out infinite;
  }

  /* --- Logos: blurred #fafafa band + single-row marquee --- */
  .logos {
    padding: 18px 0 22px;
  }

  .logos__arcs,
  .logos__row {
    display: none;
  }

  .logos__panel {
    position: relative;
  }

  .logos__panel::before {
    content: "";
    position: absolute;
    inset: -14px -8px;
    background: #fafafa;
    filter: blur(16px);
    pointer-events: none;
  }

  .logos__panel > * {
    position: relative;
  }

  .logos__label {
    margin: 0 0 16px;
    font-size: 14px;
  }

  .logos__marquee {
    display: block;
  }

  /* --- Stats: 56/56, 72px numbers, design order 1B+ / 1M+ / 60min --- */
  .stats {
    height: auto;
    min-height: 0;
    padding: 56px 20px;
  }

  .stats__circle {
    display: none;
  }

  .stats__row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .stat {
    width: 100%;
    padding: 20px 0;
  }

  .stat:nth-child(1) { order: 2; }
  .stat:nth-child(2) { order: 1; }
  .stat:nth-child(3) { order: 3; }

  .stat__number {
    font-size: 72px;
    line-height: 1;
  }

  .stat__label {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4;
  }

  /* --- What Aleph Makes Possible: 56/56, tap accordion with viz tiles --- */
  .possible__sticky {
    padding: 56px 0;
  }

  .possible__title {
    font-size: 32px;
    line-height: 1.12;
  }

  .possible__sub {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.4;
  }

  .possible__grid {
    margin-top: 20px;
    gap: 0;
  }

  .pitem__head {
    min-height: 56px;
    padding: 16px 0;
    font-size: 18px;
    line-height: 1.2;
    transition: color var(--duration-base) var(--ease-standard);
  }

  .pitem.is-active .pitem__head {
    font-size: 18px;
    padding-bottom: 4px;
    color: var(--purple-500);
  }

  .pitem__chevron {
    display: block;
  }

  .pitem.is-active .pitem__chevron {
    opacity: 1;
    transform: rotate(180deg);
  }

  /* block collapse (the body holds two children on mobile: text + viz) */
  .pitem__body,
  .pitem.is-active .pitem__body {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--duration-slow) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
  }

  .pitem.is-active .pitem__body {
    max-height: 640px;
    opacity: 1;
  }

  .pitem__body p {
    min-height: 0;
    margin: 0;
    padding-bottom: 16px;
    max-width: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--neutral-800);
  }

  .pitem__viz {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 20px;
  }

  .possible__viz {
    display: none;
  }

  .possible__cta {
    width: 100%;
    height: 52px;
    margin-top: 24px;
    border-radius: 9px;
    font-size: 17px;
  }

  /* --- Platform wheel: 56/56, wheel + pager + centered phase detail --- */
  .hub {
    padding: 56px 0;
  }

  .hub__grid,
  .hub__blob {
    display: none;
  }

  .hub__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 430px;
    margin-inline: auto;
    padding: 0 20px;
  }

  .hub__copy {
    display: contents;
  }

  .hub__copy h2 {
    order: -1;
    width: 100%;
    margin: 0;
    font-size: 32px;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
  }

  .hub__copy h2 br {
    display: none;
  }

  .hub__diagram {
    display: block;
    width: min(351px, 92vw);
    margin-top: 28px;
  }

  .wedge__label {
    font-size: 19px;
  }

  .hub__wheeltitle {
    font-size: 21px;
  }

  .hub__bar {
    display: none;
  }

  .hub__pager {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
  }

  .hub__item {
    order: 4;
    margin-top: 20px;
    text-align: center;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .hub__itemhead {
    justify-content: center;
  }

  .hub__itemtitle {
    font-size: 20px;
  }

  .hub__item p {
    max-width: 32em;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.4;
    min-height: 110px;
  }

  /* --- Outcomes dark band: 80/80, 52px card numbers --- */
  .roi {
    min-height: 0;
    padding: 80px 20px;
  }

  .roi__title {
    font-size: 32px;
    line-height: 1.12;
    color: var(--neutral-25);
  }

  .roi__title br {
    display: none;
  }

  .roi__sub {
    display: block;
    margin: 20px auto 0;
    max-width: 32em;
    font-size: 16px;
    line-height: 1.4;
    color: var(--neutral-25);
    text-align: center;
  }

  .roi__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 430px;
    margin: 40px auto 0;
    padding: 40px 28px;
    background: #2e2e37;
    border: 1px solid #636374;
    border-radius: 8px;
    box-shadow: 0 3px 3px rgba(91, 91, 91, 0.18);
  }

  .roi__cell {
    display: grid;
    grid-template-columns: 118px 1fr;
    align-items: center;
    gap: 16px;
    padding: 0;
    text-align: left;
  }

  /* design order: 80 / 70 / 95 / <1s (DOM is 80 / 95 / 70 / <1s) */
  .roi__cell:nth-child(1) { order: 1; }
  .roi__cell:nth-child(2) { order: 3; }
  .roi__cell:nth-child(3) { order: 2; }
  .roi__cell:nth-child(4) { order: 4; }

  .roi__number {
    min-width: 0;
    font-size: 52px;
    line-height: 0.8;
    white-space: nowrap;
  }

  .roi__label {
    margin: 0;
    max-width: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.42;
    color: #fff;
  }

  /* --- Integrations: 56/56, vertical diagram with living signal --- */
  .integrations {
    padding: 56px 0;
  }

  .integrations__inner h2 {
    font-size: 32px;
    line-height: 1.12;
    padding-inline: 20px;
  }

  .integrations__sub {
    margin-top: 20px;
    padding-inline: 20px;
    font-size: 16px;
    line-height: 1.4;
  }

  .integrations__viz {
    display: none;
  }

  .intm {
    display: block;
  }

  .intm__chips {
    display: flex;
    justify-content: space-between;
    max-width: 390px;
    margin: 36px auto 0;
    padding-inline: 20px;
  }

  .intm__chips img {
    width: clamp(46px, 15.9vw, 62px);
    height: auto;
  }

  .intm__diagram {
    display: block;
    width: min(390px, 100%);
    margin: -6px auto 0;
  }

  .intm__cards {
    position: relative;
    max-width: 390px;
    margin: -74px auto 0;
    padding-inline: 20px;
  }

  .intm__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    min-height: 64px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #dde1e6;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .intm__card--narrow {
    width: max-content;
    margin: 12px auto 0;
  }

  .intm__cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 12px;
    color: #000;
  }

  .intm__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e3e4f4;
    border-radius: 50%;
    color: var(--color-accent);
  }

  .intm__chip svg {
    width: 17px;
    height: 17px;
  }

  /* entrance sequence, then the signal keeps flowing */
  .has-js .intm__chips img {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-slow) var(--ease-entrance), transform var(--duration-slow) var(--ease-entrance);
    transition-delay: calc(var(--i) * 70ms);
  }

  .intm.is-live .intm__chips img {
    opacity: 1;
    transform: none;
  }

  .has-js .intm__curve {
    clip-path: inset(-2% -2% 102% -2%);
    transition: clip-path 700ms var(--ease-standard);
    transition-delay: calc(350ms + var(--i) * 90ms);
  }

  .intm.is-live .intm__curve {
    clip-path: inset(-2% -2% -2% -2%);
  }

  .has-js .intm__ringgrp {
    opacity: 0;
    transition: opacity 500ms var(--ease-entrance) 650ms;
  }

  .intm.is-live .intm__ringgrp {
    opacity: 1;
  }

  .has-js .intm__node {
    opacity: 0;
    transform: scale(0.85);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity var(--duration-slow) var(--ease-entrance) 750ms, transform var(--duration-slow) var(--ease-entrance) 750ms;
  }

  .intm.is-live .intm__node {
    opacity: 1;
    transform: none;
  }

  .has-js .intm__down {
    clip-path: inset(-2% -2% 102% -2%);
    transition: clip-path 500ms var(--ease-standard) 1050ms;
  }

  .intm.is-live .intm__down {
    clip-path: inset(-2% -2% -2% -2%);
  }

  .has-js .intm__cards {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-entrance) 1300ms, transform var(--duration-slow) var(--ease-entrance) 1300ms;
  }

  .intm.is-live .intm__cards {
    opacity: 1;
    transform: none;
  }

  .intm.is-live .intm__curve path {
    animation: intmDash 1.1s linear infinite;
  }

  .intm__pulse {
    fill: var(--purple-500);
    opacity: 0;
    offset-rotate: 0deg;
  }

  .intm.is-live .intm__pulse {
    animation: intmPulse 2.4s linear infinite;
    animation-delay: calc(1500ms + var(--i) * 480ms);
  }

  .intm.is-live .intm__pulse--down {
    animation-duration: 2s;
    animation-delay: 2200ms;
  }

  /* --- Testimonials: 56/56, native swipe with card snapping --- */
  .testimonials {
    padding: 56px 0;
  }

  .testimonials__inner {
    padding: 0;
  }

  .testimonials__title {
    font-size: 32px;
    line-height: 1.12;
    text-align: center;
    padding-inline: 20px;
  }

  .testimonials__viewport {
    margin: 28px auto 0;
    max-width: 430px;
    overflow-x: auto;
    padding-inline: 20px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .testimonials__track {
    gap: 16px;
    transform: none !important; /* the desktop drift never applies here */
  }

  .testimonials__fade {
    display: none;
  }

  .tcard {
    flex: 0 0 calc(100% - 16px);
    min-height: 0;
    padding: 40px 24px;
    scroll-snap-align: start;
  }

  .tcard__quote {
    margin-top: 32px;
    font-size: 16px;
    line-height: 1.4;
  }

  .tcard__stat {
    font-size: 40px;
  }

  .testimonials__nav {
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    padding-inline: 20px;
  }

  .tnav {
    width: 32px;
    height: 32px;
  }

  .tnav__count {
    display: block;
    font-size: 16px;
    color: #6b6b6b;
  }

  /* --- Bottom CTA: full-bleed dark, 80px top, decor line below --- */
  .cta {
    min-height: 0;
    margin: 0;
    padding: 80px 20px 72px;
    border-radius: 0;
    overflow: hidden;
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(91, 99, 232, 0.22) 0%, transparent 100%),
      #2a2b3c;
  }

  .cta::before,
  .cta::after {
    display: none;
  }

  .cta__title {
    font-size: 32px;
    line-height: 1.25;
  }

  .cta__sub {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #e6e8ff;
  }

  .cta__btn,
  .cta__btn:hover {
    width: 100%;
    max-width: 390px;
    height: 52px;
    margin-top: 28px;
    padding: 0;
    border-radius: 9px;
    font-size: 17px;
    background: linear-gradient(166deg, #5a5cff 0%, #4a4de8 100%);
    color: #fff;
  }

  .cta__btn:active {
    background: linear-gradient(166deg, #3b3ec0 0%, #2f3294 100%);
  }

  .cta__btn img {
    display: none;
  }

  .cta__decor {
    display: block;
    position: relative;
    align-self: stretch; /* .cta is a flex column - stretch to full bleed */
    margin: 68px -20px 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.16);
  }

  .cta__decor span {
    position: absolute;
    right: 11%;
    top: -8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8b8fa3;
  }

  /* --- Footer --- */
  .footer__inner {
    padding: 64px 20px 48px;
  }

  .footer__top {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding-bottom: 28px;
  }

  .footer__brandrow {
    justify-content: center;
  }

  .footer__brandrow span {
    font-size: 30px;
  }

  .footer__tagline {
    font-size: 17px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 28px;
    text-align: center;
  }

  .footer__copy,
  .footer__legal {
    font-size: 14px;
  }

  .footer__legal a {
    display: inline-block;
    padding: 4px 2px;
  }

  /* --- Demo modal --- */
  .demo-modal {
    width: calc(100vw - 32px);
    padding: 24px 20px;
    max-height: 92dvh;
    overflow-y: auto;
  }

  .demo-modal__title {
    font-size: 22px;
  }

  /* --- Legal pages --- */
  .legal {
    padding: 48px 20px 64px;
  }

  .legal h1 {
    font-size: 32px;
  }

  .legal h2 {
    font-size: 22px;
  }
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  .float-a,
  .float-b,
  .float-c,
  .hbg-float {
    animation: none;
  }

  .hbg-wrap {
    transition: none;
  }

  /* no logo marquee — show the static strip instead */
  .logos__marquee {
    display: none;
  }

  .logos__row {
    display: block;
  }

  .hero__art-glow {
    animation: none;
  }

  .intm.is-live .intm__curve path,
  .intm.is-live .intm__pulse {
    animation: none;
  }

  .has-js .intm__chips img,
  .has-js .intm__ringgrp,
  .has-js .intm__node,
  .has-js .intm__cards {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .has-js .intm__curve,
  .has-js .intm__down {
    clip-path: none;
    transition: none;
  }

  .pviz,
  .pitem__head,
  .pitem__body,
  .pitem__chevron,
  .wedge__base,
  .wedge__label,
  .wedge__icon--dark,
  .wedge__icon--white {
    transition: none;
  }

  /* integrations diagram: show the fully enriched end state */
  .iv-reveal,
  .iv-right-purple {
    stroke-dashoffset: 0;
  }

  .iv-item {
    fill: #e9ebfc;
  }

  /* testimonials drift is JS-driven and already gated off; keep the
     row static even if a transform lingers */
  .testimonials__track {
    transition: none;
  }
}

/* ============ Legal pages (privacy / terms) ============ */

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.legal a.legal__back {
  color: var(--color-muted);
  text-decoration: none;
}

.legal a.legal__back:hover {
  color: var(--color-accent);
}

.legal__back {
  display: inline-block;
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 28px;
}

.legal__back:hover {
  color: var(--color-accent);
}

.legal h1 {
  margin: 0 0 8px;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.legal__intro {
  margin: 20px 0 0;
}

.legal h2 {
  margin: 44px 0 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.legal h3 {
  margin: 28px 0 0;
  font-family: var(--font-soehne);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.legal p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--neutral-700);
}

.legal ul {
  margin: 14px 0 0;
  padding-left: 22px;
}

.legal li {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--neutral-700);
}

.legal a {
  color: var(--color-accent);
  text-decoration: underline;
}