/* ═══════════════════════════════════════════════════════════════════════════
   SynqDrive public landing page

   Tokens mirror the product theme (frontend/src/styles/theme.css) so the
   marketing surface and the application read as one brand. Values are copied
   rather than imported because this page ships as standalone static files with
   no build-time CSS pipeline. The product theme stays the source of truth: if a
   brand token changes there, mirror it here.

     --ink        #111827   product --foreground / --primary
     --brand      #4F86E8   product --brand
     --radius     8px       product --radius
     --ease       cubic-bezier(0.16, 1, 0.3, 1)   product --ease-out-soft

   Light theme only. The public page is theme locked, so no section inverts.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #111827;
  --ink-soft: #46505f;
  --muted: #6b7280;
  --brand: #4f86e8;
  --brand-ink: #3266c4;

  --canvas: #ffffff;
  --canvas-alt: #f7f8fa;
  --surface: #ffffff;
  --hairline: rgba(17, 24, 39, 0.09);
  --hairline-strong: rgba(17, 24, 39, 0.14);
  --image-outline: rgba(0, 0, 0, 0.1);

  --shadow-frame: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 32px rgba(17, 24, 39, 0.06);
  --shadow-raised: 0 1px 2px rgba(17, 24, 39, 0.05), 0 18px 44px rgba(17, 24, 39, 0.08);
  --shadow-action: 0 1px 2px rgba(17, 24, 39, 0.16), 0 6px 16px rgba(17, 24, 39, 0.14);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-frame: 16px;

  --shell: 1240px;
  --gutter: 24px;
  --section-y: 128px;

  /* Typography scale — desktop defaults; mobile overrides in layout breakpoints. */
  --type-display: clamp(2.15rem, 1.1rem + 3.6vw, 3.25rem);
  --type-section: clamp(1.55rem, 0.88rem + 3.35vw, 3.15rem);
  --type-subheading: 15.5px;
  --type-body: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --type-body-large: clamp(1.05rem, 1rem + 0.28vw, 1.175rem);
  --type-small: 13.75px;
  --type-label: 12.5px;

  /* Copy measure */
  --measure-copy: 34rem;
  --measure-copy-narrow: 31rem;
  --measure-section-head: 40rem;
  --measure-wide: 42rem;

  /* Vertical rhythm */
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 20px;
  --space-l: 32px;
  --space-xl: 44px;
  --stack-gap-tight: 12px;
  --stack-gap: 20px;
  --stack-gap-loose: 36px;
  --stack-copy-visual: 44px;

  /* Workflow stack tier gaps */
  --stack-gap-head-chain: 48px;
  --stack-gap-chain-media: var(--stack-copy-visual);

  /* Product frame */
  --frame-radius: var(--radius-frame);
  --frame-shadow: var(--shadow-frame);
  --frame-border: 1px solid var(--hairline);

  /* Card / surface */
  --surface-padding: 20px;
  --surface-radius: 14px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --masthead-h: 68px;
  --synqdrive-release-css: 1;
}

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

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky masthead. */
  scroll-padding-top: calc(var(--masthead-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

svg {
  width: 100%;
  height: 100%;
  display: block;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: top 160ms var(--ease);
}

.skip-link:focus-visible {
  top: 14px;
}

/* ── Masthead ────────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.masthead[data-stuck='true'] {
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}

@supports not (backdrop-filter: blur(1px)) {
  .masthead {
    background: #fff;
  }
}

.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--masthead-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* Hit area stays 40px tall while the wordmark itself is optically smaller. */
  min-height: 40px;
}

.brand img {
  width: 132px;
  height: auto;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  margin-left: 4px;
}

.mainnav--platform {
  min-width: 0;
}

.mainnav__link,
.mainnav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.mainnav__link:hover,
.mainnav__trigger:hover {
  color: var(--ink);
  background: rgba(17, 24, 39, 0.04);
}

.mainnav__chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 200ms var(--ease);
}

.mainnav__group {
  position: relative;
}

/* Invisible bridge so the pointer can travel from trigger to panel without closing. */
.mainnav__group::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.mainnav__group[data-open='true'] .mainnav__chevron {
  transform: rotate(180deg);
}

.mainnav__group[data-open='true'] .mainnav__trigger {
  color: var(--ink);
  background: rgba(17, 24, 39, 0.04);
}

.nav-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 60;
  width: min(580px, calc(100vw - 48px));
  min-width: 520px;
  max-width: 580px;
  padding: 14px 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-raised);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}

.mainnav__group[data-open='true'] .nav-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-panel__overview {
  display: block;
  margin: 0 10px 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  transition: background-color 140ms var(--ease);
}

.nav-panel__overview:hover,
.nav-panel__overview:focus-visible {
  background: var(--canvas-alt);
}

.nav-panel__overview-label {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.nav-panel__overview-desc {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

.nav-panel__groups {
  padding: 4px 10px 0;
}

.nav-panel__group + .nav-panel__group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.nav-panel__group-title {
  margin: 0 0 6px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nav-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-panel__link {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  transition: background-color 140ms var(--ease);
}

.nav-panel__link:hover,
.nav-panel__link:focus-visible {
  background: var(--canvas-alt);
}

.nav-panel__link-label {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.nav-panel__link-desc {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.nav-panel__footer {
  margin: 10px 10px 0;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.nav-panel__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--brand-ink);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.006em;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.nav-panel__footer-link:hover,
.nav-panel__footer-link:focus-visible {
  background: rgba(79, 134, 232, 0.06);
  color: var(--brand-ink);
}

.nav-panel__footer-arrow {
  width: 14px;
  height: 14px;
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.locale-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.locale-switch svg {
  width: 15px;
  height: 15px;
}

.locale-switch:hover {
  color: var(--ink);
  background: rgba(17, 24, 39, 0.04);
}

.masthead__login {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 600;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.masthead__login:hover {
  color: var(--ink);
  background: rgba(17, 24, 39, 0.04);
}

.masthead__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: rgba(17, 24, 39, 0.035);
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.masthead__toggle:hover {
  background: rgba(17, 24, 39, 0.04);
}

.masthead__toggle svg {
  width: 22px;
  height: 22px;
}

.masthead__toggle-close {
  display: none;
}

.masthead__toggle[aria-expanded='true'] .masthead__toggle-open {
  display: none;
}

.masthead__toggle[aria-expanded='true'] .masthead__toggle-close {
  display: block;
}

.mobilenav {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

.mobilenav[hidden] {
  display: none !important;
}

.mobilenav__topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex: 0 0 auto;
  height: var(--masthead-h);
  padding:
    0
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    0
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
}

@supports not (backdrop-filter: blur(1px)) {
  .mobilenav__topbar {
    background: #fff;
  }
}

.mobilenav__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
}

.mobilenav__brand img {
  width: auto;
  height: 22px;
}

.mobilenav__close {
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: rgba(17, 24, 39, 0.035);
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 160ms var(--ease);
}

.mobilenav__close:hover,
.mobilenav__close:focus-visible {
  background: rgba(17, 24, 39, 0.06);
}

.mobilenav__close svg {
  width: 22px;
  height: 22px;
}

.mobilenav__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    0
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
}

.mobilenav__view[hidden] {
  display: none !important;
}

.mobilenav__view--root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobilenav__root-list,
.mobilenav__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobilenav__row,
.mobilenav__subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.014em;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: color 160ms var(--ease);
}

.mobilenav__row:not(.mobilenav__row--unavailable):hover,
.mobilenav__row:not(.mobilenav__row--unavailable):focus-visible,
.mobilenav__subrow:not(.mobilenav__subrow--static):hover,
.mobilenav__subrow:not(.mobilenav__subrow--static):focus-visible {
  color: var(--brand-ink);
}

.mobilenav__row--unavailable {
  color: var(--ink-soft);
  cursor: default;
}

.mobilenav__row-chevron,
.mobilenav__row-arrow,
.mobilenav__back-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.mobilenav__row-chevron svg,
.mobilenav__row-arrow svg,
.mobilenav__back-icon svg {
  width: 18px;
  height: 18px;
}

.mobilenav__row-chevron {
  color: var(--muted);
}

.mobilenav__badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
}

.mobilenav__bottom {
  margin-top: auto;
  padding-top: 20px;
}

.mobilenav__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.mobilenav__actions .action {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

.mobilenav__locale {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

.mobilenav__locale-current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: rgba(17, 24, 39, 0.045);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.008em;
}

.mobilenav__locale-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.mobilenav__locale-link:hover,
.mobilenav__locale-link:focus-visible {
  color: var(--ink);
  background: rgba(17, 24, 39, 0.04);
}

.mobilenav__subhead {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 68px;
  border-bottom: 1px solid var(--hairline);
}

.mobilenav__subhead-title {
  grid-column: 2;
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  text-align: center;
}

.mobilenav__back {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.mobilenav__back:hover,
.mobilenav__back:focus-visible {
  background: rgba(17, 24, 39, 0.04);
}

.mobilenav__back-icon {
  transform: rotate(180deg);
}

.mobilenav__subrow {
  min-height: 58px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mobilenav__subrow--static {
  color: var(--ink-soft);
  cursor: default;
}

@media (max-width: 340px) {
  .mobilenav__actions {
    grid-template-columns: 1fr;
  }

  .mobilenav__bottom {
    padding-top: 14px;
  }
}

html[data-nav-scroll-lock='true'] {
  overflow: hidden;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.006em;
  white-space: nowrap;
  transition-property: background-color, border-color, color, box-shadow, scale;
  transition-duration: 170ms;
  transition-timing-function: var(--ease);
}

.action:active {
  scale: 0.96;
}

.action--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-action);
}

.action--primary:hover {
  background: #1f2937;
}

.action--secondary,
.action--ghost {
  border-color: var(--hairline-strong);
  background: #fff;
  color: var(--ink);
}

.action--secondary:hover,
.action--ghost:hover {
  border-color: rgba(17, 24, 39, 0.24);
  background: var(--canvas-alt);
}

.action__arrow {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform 200ms var(--ease);
}

.action--secondary:hover .action__arrow {
  transform: translateX(3px);
}

/* Masthead action is denser than in-page actions. */
.masthead__actions .action--primary {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14.5px;
}

/* ── Section scaffolding ─────────────────────────────────────────────────── */

.section,
.closing__inner,
.masthead__inner,
.sitefooter__inner,
.sitefooter__legal {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section + .section {
  border-top: 1px solid var(--hairline);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 6px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--canvas-alt);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.002em;
}

.section-head {
  max-width: var(--measure-section-head);
}

.section-head--centered {
  margin-inline: auto;
  text-align: center;
}

/* The lower bound is set by German compound nouns: "Kundenkommunikation" has to
   fit a 320px viewport without breaking mid-word, and Chromium ships no German
   hyphenation dictionary to fall back on. */
.section-title {
  font-size: var(--type-section);
}

.section-body {
  margin-top: var(--stack-gap);
  max-width: var(--measure-copy);
  color: var(--ink-soft);
  font-size: var(--type-body);
  line-height: 1.65;
}

.section-head--centered .section-body {
  margin-inline: auto;
}

/* ── Product frame ───────────────────────────────────────────────────────── */

.frame,
.frame--product {
  border: var(--frame-border);
  border-radius: var(--frame-radius);
  background: #fff;
  box-shadow: var(--frame-shadow);
  overflow: hidden;
}

.frame img {
  width: 100%;
  /* Pure black at low alpha, so the edge never picks up a colour cast. */
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}

.frame--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.frame--flush img {
  outline: 0;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero.hero--fleet-background {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  min-height: clamp(520px, 56vw, 720px);
  overflow: hidden;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__background picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__background img {
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 100%;
  object-fit: cover;
  object-position: 78% 92%;
}

.hero__shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 96px 120px;
}

.hero__intro {
  max-width: min(34rem, 100%);
}

.hero__intro .eyebrow {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.006em;
  margin-bottom: 20px;
  text-decoration-line: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.hero__intro h1 {
  font-size: clamp(3.4rem, 5vw, 5.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
}

.hero__title-main,
.hero__title-emphasis {
  font-weight: inherit;
}

.hero__title-emphasis {
  color: var(--ink-soft);
  font-weight: 750;
}

.hero__body {
  width: 100%;
  margin-top: var(--space-m);
  max-width: min(36rem, 100%);
  color: var(--ink-soft);
  font-size: clamp(1.3125rem, 1.22rem + 0.22vw, 1.4375rem);
  line-height: 1.58;
}

.hero__body-lead {
  font-weight: 700;
  color: var(--ink);
}

.hero__body-rest {
  font-weight: 400;
}

.hero__body-primary,
.hero__body-secondary,
.hero__body-line {
  display: block;
}

.hero__body-primary {
  font-weight: 500;
}

.hero__body-secondary {
  margin-top: 22px;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-gap-tight);
  margin-top: var(--stack-gap-loose);
}

/* ── Einsatzwelten ───────────────────────────────────────────────────────── */

.use-cases .section-head {
  max-width: var(--measure-wide);
}

.use-cases__lead,
.use-cases__aside {
  list-style: none;
  margin: 0;
  padding: 0;
}

.use-case-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--surface-radius);
  background: var(--canvas);
  box-shadow: var(--frame-shadow);
}

.use-case-card--lead {
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--canvas-alt);
}

.use-case-card__media {
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas-alt);
  aspect-ratio: 16 / 7.6;
}

.use-case-card--lead .use-case-card__media {
  aspect-ratio: auto;
  min-height: 0;
}

.use-case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.use-case-card--rental img {
  object-position: 42% center;
}

.use-case-card--fleet img {
  object-position: center;
}

.use-case-card--taxi img {
  object-position: center 58%;
}

.use-case-card--passenger-transport img {
  object-position: center 56%;
}

.use-case-card--delivery-logistics img {
  object-position: 64% center;
}

.use-case-card__content {
  align-content: start;
  padding: 17px 18px 19px;
}

.use-case-card--lead .use-case-card__content {
  padding: 22px 24px 25px;
}

.use-case-card__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

.use-case-card h3 {
  min-width: 0;
  font-size: 16px;
  letter-spacing: -0.014em;
  overflow-wrap: anywhere;
}

.use-case-card--lead h3 {
  font-size: 20px;
}

.use-case-card__status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(79, 134, 232, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(79, 134, 232, 0.08);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.use-case-card p,
.use-case-card__intro {
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--type-small);
  line-height: 1.55;
}

.use-case-card__trigger {
  display: contents;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.use-case-card__chevron,
.use-case-card__panel {
  display: none;
}

.use-case-card__chevron svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Desktop: headline and rental card share the left column; four industries form a
   2×2 block aligned to the headline top and rental card bottom. */
@media (min-width: 1024px) {
  .use-cases__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr);
    gap: clamp(24px, 2.2vw, 32px);
    align-items: stretch;
  }

  .use-cases__primary {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(28px, 2.8vw, 40px);
    min-height: 0;
  }

  .use-cases__primary .section-head {
    max-width: none;
  }

  .use-cases__lead {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .use-cases__lead > .use-case-card {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  .use-cases__aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 1.6vw, 24px);
    min-height: 0;
  }

  .use-cases__aside > .use-case-card {
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .use-cases__aside .use-case-card__media {
    aspect-ratio: unset;
    min-height: 0;
  }
}

/* ── Layout primitives (mobile composition system) ─────────────────────────── */

.layout-split {
  display: grid;
}

.layout-split--copy-first {
  /* Default DOM order — copy before visual on narrow viewports. */
}

@media (max-width: 1024px) {
  .layout-split--mobile-visual-first .split__media,
  .layout-split--mobile-visual-first .layout-split__visual {
    order: -1;
  }
}

.layout-stack {
  display: grid;
  gap: var(--stack-copy-visual);
}

/* Workflow: tiered head → chain → media spacing owned by the stack modifier. */
.layout-stack--tiered {
  gap: 0;
}

.layout-stack--tiered > .chain {
  margin-top: var(--stack-gap-head-chain);
}

.layout-stack--tiered > .stack__media {
  margin-top: var(--stack-gap-chain-media);
}

.layout-measure {
  max-width: min(var(--measure-copy), 100%);
}

.layout-measure--narrow {
  max-width: min(var(--measure-copy-narrow), 100%);
}

/* ── Surface / card system ───────────────────────────────────────────────── */

.surface {
  padding: var(--surface-padding);
  border: 1px solid var(--hairline);
  border-radius: var(--surface-radius);
  background: var(--canvas-alt);
}

.surface--compact {
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}

.surface--compact:last-child {
  border-bottom: 0;
}

.surface--plain {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ── Split composition (AI, communication) ───────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 72px;
}

.split--mirror .split__media {
  order: -1;
}

/* ── Brief composition (unified operations) ──────────────────────────────── */

/* Header and capability grid share one row, the fleet plan runs full width
   underneath because it is only readable at that size. */
.brief__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: start;
  gap: 72px;
}

.brief .capability-grid {
  margin-top: 6px;
}

/* Vertical gap between brief head and product visual is owned by .brief.layout-stack. */

.brief.layout-stack {
  gap: 64px;
}

/* P2.4 — Platform mobile product-led composition */
.brief--product-led .capability-grid {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .brief--product-led.layout-stack {
    gap: var(--stack-copy-visual);
  }

  .brief--product-led .capability-grid {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .brief--product-led .capability--compact {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
  }

  .brief--product-led .capability--compact .icon-mark {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    padding: 6px;
  }

  .brief--product-led .capability--compact h3 {
    margin-top: 0;
    font-size: 15px;
  }

  .brief--product-led .capability--compact p {
    margin-top: 4px;
  }
}

@media (min-width: 1025px) {
  .brief--product-led.layout-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    grid-template-rows: auto auto;
    column-gap: 72px;
    row-gap: 64px;
  }

  .brief--product-led .brief__intro {
    grid-column: 1;
    grid-row: 1;
  }

  .brief--product-led .capability-grid {
    grid-column: 2;
    grid-row: 1;
    margin-top: 6px;
  }

  .brief--product-led .stack__media {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
}

@media (min-width: 1025px) {
  /* Platform composition owns full-card restoration; beats .surface--compact:last-child. */
  .brief--product-led .capability {
    padding: var(--surface-padding);
    border: 1px solid var(--hairline);
    /* Concentric: 20px padding inside a 10px inner radius gives 30px outside. */
    border-radius: var(--surface-radius);
    background: var(--canvas-alt);
    transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
  }

  .brief--product-led .capability:hover {
    border-color: var(--hairline-strong);
    background: #fff;
  }

  .brief--product-led .capability h3 {
    margin-top: 14px;
    font-size: var(--type-subheading);
    letter-spacing: -0.012em;
  }

  .brief--product-led .capability p {
    margin-top: 7px;
    color: var(--muted);
    font-size: var(--type-small);
    line-height: 1.55;
  }
}

.icon-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: #fff;
  color: var(--brand-ink);
}

/* ── Notes lists (AI governance, communication points) ───────────────────── */

.notes {
  display: grid;
  gap: 22px;
  margin-top: 36px;
  max-width: 34rem;
}

.notes h3 {
  font-size: var(--type-subheading);
  letter-spacing: -0.012em;
}

.notes p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.25px;
  line-height: 1.58;
}

.notes--divided {
  gap: 0;
}

.notes--divided li {
  padding-block: 22px;
  border-top: 1px solid var(--hairline);
}

.notes--divided li:last-child {
  border-bottom: 1px solid var(--hairline);
}

/* ── Vehicle intelligence: one composed panel ────────────────────────────── */

.stage .section-head {
  margin-bottom: 56px;
}

.stage__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: stretch;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--canvas-alt);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}

.stage__media {
  /* The asset is already cropped to a whole number of vehicle rows, so nothing
     is clipped here: the notes column centres against the panel height. */
  background: #fff;
  border-right: 1px solid var(--hairline);
}

.stage__notes {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 44px;
}

.stage__notes li {
  padding-block: 24px;
}

.stage__notes li + li {
  border-top: 1px solid var(--hairline);
}

.stage__notes h3 {
  font-size: 16.5px;
  letter-spacing: -0.014em;
}

.stage__notes p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.25px;
  line-height: 1.58;
}

.stage__closing {
  margin-top: 32px;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.012em;
}

/* ── AI flow rail ────────────────────────────────────────────────────────── */

.flow {
  margin-top: 40px;
  padding: 22px 24px 24px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--canvas-alt);
}

.flow__label,
.chain__label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.004em;
}

.flow__list {
  display: grid;
  gap: 0;
  margin-top: 6px;
  counter-reset: flow;
}

.flow__step {
  position: relative;
  padding: 14px 0 14px 26px;
  counter-increment: flow;
}

/* Connector marks the sequence without drawing decorative grid lines. */
.flow__step::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
}

.flow__step::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: var(--hairline-strong);
}

.flow__step:last-child::after {
  display: none;
}

.flow__step h3 {
  font-size: 14.75px;
  letter-spacing: -0.01em;
}

.flow__step p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13.75px;
  line-height: 1.5;
}

/* P2.5 — AI mobile product-led composition */
@media (max-width: 1024px) {
  .split--product-led {
    gap: var(--stack-copy-visual);
  }

  .split--product-led .split__support {
    display: grid;
    gap: var(--stack-gap);
  }

  .split--product-led .flow--compact {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .split--product-led .flow--compact .flow__list {
    margin-top: 8px;
  }

  .split--product-led .flow__step--compact {
    padding-left: 0;
  }

  .split--product-led .flow__step--compact::before,
  .split--product-led .flow__step--compact::after {
    display: none;
  }

  .split--product-led .flow__step--compact h3 {
    margin-top: 0;
    font-size: 15px;
  }

  .split--product-led .flow__step--compact p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
  }

  .split--product-led .notes--compact {
    margin-top: 0;
    gap: 0;
    max-width: none;
  }

  .split--product-led .notes__item--compact h3 {
    font-size: 15px;
  }

  .split--product-led .notes__item--compact p {
    margin-top: 4px;
    font-size: 14px;
  }
}

@media (min-width: 1025px) {
  .split--product-led {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 72px;
    row-gap: 0;
  }

  .split--product-led.split--mirror .split__media {
    order: -1;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .split--product-led .split__intro {
    grid-column: 2;
    grid-row: 1;
  }

  .split--product-led .split__support {
    grid-column: 2;
    grid-row: 2;
  }

  .split--product-led .flow--compact {
    margin-top: 40px;
    padding: 22px 24px 24px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--canvas-alt);
  }

  .split--product-led .flow__step--compact {
    position: relative;
    padding: 14px 0 14px 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 0;
  }

  .split--product-led .flow__step--compact::before {
    display: block;
    content: '';
    position: absolute;
    left: 4px;
    top: 22px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--brand);
  }

  .split--product-led .flow__step--compact::after {
    display: block;
    content: '';
    position: absolute;
    left: 7px;
    top: 32px;
    bottom: 4px;
    width: 1px;
    background: var(--hairline-strong);
  }

  .split--product-led .flow__step--compact:last-child::after {
    display: none;
  }

  .split--product-led .flow__step--compact h3 {
    font-size: 14.75px;
  }

  .split--product-led .flow__step--compact p {
    margin-top: 3px;
    font-size: 13.75px;
  }

  .split--product-led .notes--compact {
    margin-top: 36px;
    gap: 22px;
    max-width: 34rem;
  }

  .split--product-led .notes__item--compact {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 0;
  }

  .split--product-led .notes__item--compact h3 {
    font-size: var(--type-subheading);
  }

  .split--product-led .notes__item--compact p {
    margin-top: 6px;
    font-size: 14.25px;
  }
}

/* ── Workflow automation: stacked ────────────────────────────────────────── */

.stack .section-head {
  max-width: var(--measure-wide);
}

.chain__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.chain__link {
  position: relative;
}

/* Chevron between chain steps, drawn from the border rather than an icon. */
.chain__link + .chain__link::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--hairline-strong);
  border-right: 1.5px solid var(--hairline-strong);
  transform: translateY(-50%) rotate(45deg);
}

.chain__link h3 {
  font-size: 15.5px;
  letter-spacing: -0.012em;
}

.chain__link p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13.75px;
  line-height: 1.55;
}

/* P2.5 — Workflow compact chain */
@media (max-width: 1024px) {
  .workflow--compact .chain__list {
    gap: 0;
    margin-top: 8px;
  }

  .workflow--compact .chain__link + .chain__link::before {
    display: none;
  }

  .workflow--compact .chain__link--compact h3 {
    margin-top: 0;
    font-size: 15px;
  }

  .workflow--compact .chain__link--compact p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (min-width: 1025px) {
  .workflow--compact .chain__link {
    padding: var(--surface-padding);
    border: 1px solid var(--hairline);
    border-radius: var(--surface-radius);
    background: var(--canvas-alt);
  }
}

/* Gap before workflow product visual is owned by .layout-stack--tiered. */

/* P2.6 — Communication mobile product-led composition */
@media (max-width: 1024px) {
  .communication--product-led {
    gap: var(--stack-copy-visual);
  }

  .communication--product-led .split__support {
    display: grid;
    gap: 0;
  }

  .communication--product-led .notes--compact {
    margin-top: 0;
    gap: 0;
    max-width: none;
  }

  .communication--product-led .notes__item--compact h3 {
    margin-top: 0;
    font-size: 15px;
  }

  .communication--product-led .notes__item--compact p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (min-width: 1025px) {
  .communication--product-led {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 72px;
    row-gap: 0;
  }

  .communication--product-led.split--mirror .split__media {
    order: -1;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .communication--product-led .split__intro {
    grid-column: 2;
    grid-row: 1;
  }

  .communication--product-led .split__support {
    grid-column: 2;
    grid-row: 2;
  }

  .communication--product-led .notes--compact {
    margin-top: 36px;
    gap: 0;
    max-width: 34rem;
  }

  .communication--product-led .notes__item--compact {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 0;
    padding-block: 22px;
    border-top: 1px solid var(--hairline);
  }

  .communication--product-led .notes__item--compact:last-child {
    border-bottom: 1px solid var(--hairline);
  }

  .communication--product-led .notes__item--compact h3 {
    font-size: var(--type-subheading);
  }

  .communication--product-led .notes__item--compact p {
    margin-top: 6px;
    font-size: 14.25px;
  }
}

/* ── Integration hub ─────────────────────────────────────────────────────── */

.hub .section-head {
  margin-bottom: 60px;
}

/* Two tile columns flanking the centre node, joined by dashed connectors that
   run through the grid gaps. The gap width is shared with the connectors so the
   lines always meet the node. */
.hub__diagram {
  --hub-gap: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--hub-gap);
}

.hub__column {
  position: relative;
  display: grid;
  gap: 16px;
}

/* Vertical bus that each column's tiles connect onto, so no connector line ends
   in empty space beside the centre node. */
.hub__column::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--hairline-strong);
}

.hub__column--left::after {
  left: calc(100% + var(--hub-gap) / 2);
}

.hub__column--right::after {
  right: calc(100% + var(--hub-gap) / 2);
}

.hub__tile {
  position: relative;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

/* Stub from each tile to the bus. Decorative, so it carries no text. */
.hub__tile::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(var(--hub-gap) / 2);
  border-top: 1px dashed var(--hairline-strong);
}

.hub__column--left .hub__tile::after {
  left: 100%;
}

.hub__column--right .hub__tile::after {
  right: 100%;
}

@media (min-width: 1025px) {
  .hub__tile:hover {
    border-color: var(--hairline-strong);
    box-shadow: var(--shadow-frame);
  }
}

.hub__tile h3 {
  margin-top: 14px;
  font-size: 15.5px;
  letter-spacing: -0.012em;
}

.hub__tile p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13.75px;
  line-height: 1.55;
}

/* Sits above the connectors so the dashed lines stop at its edge. */
.hub__core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 172px;
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-raised);
}

.hub__core img {
  width: 116px;
  height: auto;
}

.hub__core-label {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 12.75px;
  line-height: 1.45;
  max-width: 12rem;
}

/* Bus into the node. */
.hub__core::before,
.hub__core::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(var(--hub-gap) / 2);
  border-top: 1px dashed var(--hairline-strong);
}

.hub__core::before {
  right: 100%;
}

.hub__core::after {
  left: 100%;
}

.hub__note {
  margin-top: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13.75px;
}

/* ── Closing call to action ──────────────────────────────────────────────── */

.closing {
  border-top: 1px solid var(--hairline);
  background: var(--canvas-alt);
}

.closing__inner {
  padding-block: 116px;
  text-align: center;
}

.closing h2 {
  max-width: 30rem;
  margin-inline: auto;
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.8rem);
}

.closing p {
  margin: 20px auto 0;
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.sitefooter {
  border-top: 1px solid var(--hairline);
  background: #fff;
}

.sitefooter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  padding-block: 60px 44px;
}

.sitefooter__brand img {
  width: 138px;
  height: auto;
}

.sitefooter__brand p {
  margin-top: 16px;
  max-width: 24rem;
  color: var(--muted);
  font-size: 14.25px;
}

.sitefooter__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.sitefooter__columns h2 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.sitefooter__columns ul {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}

.sitefooter__columns a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 14.25px;
  font-weight: 600;
  transition: color 150ms var(--ease);
}

.sitefooter__columns a:hover {
  color: var(--ink);
}

.sitefooter__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 22px 30px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 13.5px;
}

.sitefooter__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  transition: color 150ms var(--ease);
}

.sitefooter__legal a:hover {
  color: var(--ink);
}

/* ── Reveal on scroll ────────────────────────────────────────────────────── */

/* Only hidden when scripting is available, so a failed script still shows copy.
   The stagger delay per element is set by script.js from its sibling index. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition-property: opacity, transform;
  transition-duration: 620ms;
  transition-timing-function: var(--ease);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  :root {
    --section-y: 104px;
  }

  .split,
  .brief__head {
    gap: 52px;
  }

  .stage__notes {
    padding: 12px 32px;
  }
}

@media (max-width: 1024px) {
  :root {
    --section-y: 72px;
    --gutter: clamp(16px, 4.2vw, 22px);
    --stack-copy-visual: 32px;
    --stack-gap-loose: 28px;
    --stack-gap: 18px;
    --type-display: clamp(1.85rem, 1.45rem + 2.4vw, 2.15rem);
    --type-section: clamp(1.45rem, 1.08rem + 1.6vw, 1.85rem);
    --measure-copy: min(38rem, 100%);
    --measure-section-head: min(38rem, 100%);
  }

  .mainnav {
    display: none;
  }

  .nav-panel {
    min-width: 0;
  }

  .masthead__login,
  .locale-switch {
    display: none;
  }

.masthead__toggle {
  touch-action: manipulation;
  display: inline-flex;
  }

  .masthead__inner {
    position: relative;
    gap: 16px;
    justify-content: flex-end;
  }

  .masthead__inner > .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .brand img {
    width: auto;
    height: 22px;
  }

  .mobilenav {
    min-height: 100vh;
    min-height: 100dvh;
  }

  #main > .section,
  #main > .closing {
    min-height: 100svh;
  }

  #main > .section,
  #main > .closing {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero.hero--fleet-background {
    min-height: clamp(500px, 72svh, 660px);
  }

  .hero__shell {
    padding-block: clamp(32px, 5.5vw, 44px) clamp(36px, 7vw, 56px);
  }

  .hero__background picture,
  .hero__background img {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .hero__background img {
    object-fit: cover;
    object-position: center 100%;
    transform: translateY(4%);
  }

  .hero__intro .eyebrow {
    margin-bottom: 14px;
  }

  .hero__intro {
    max-width: none;
    text-align: center;
  }

  .hero__intro h1 {
    font-size: clamp(2rem, 1.55rem + 1.6vw, 2.625rem);
    line-height: 1.06;
  }

  .hero__title-emphasis {
    display: block;
  }

  .hero__body {
    max-width: min(34rem, 100%);
    margin-inline: auto;
    font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
    line-height: 1.55;
  }

  .hero__actions {
    justify-content: center;
    margin-top: 20px;
  }

  .section-body {
    max-width: min(var(--measure-copy), 100%);
  }

  .use-cases__layout {
    display: grid;
    gap: var(--stack-copy-visual);
  }

  .use-cases__primary {
    display: grid;
    gap: var(--stack-copy-visual);
  }

  .use-cases__aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: var(--stack-gap);
  }

  .use-case-card--lead {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .use-case-card__media,
  .use-case-card--lead .use-case-card__media {
    aspect-ratio: 16 / 7.2;
    min-height: 0;
  }

  .split,
  .split--mirror,
  .brief__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-copy-visual);
  }

  .brief .capability-grid {
    margin-top: 0;
  }

  .brief.layout-stack {
    gap: var(--stack-copy-visual);
  }

  .split--mirror .split__media {
    order: 0;
  }

  .stage__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage__media {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .stage__notes {
    padding: 8px 22px 16px;
  }

  .stage__notes li {
    padding-block: 16px;
  }

  .stage__notes h3 {
    font-size: 15.5px;
  }

  .stage__notes p {
    margin-top: 6px;
    font-size: 14px;
  }

  .chain__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .chain__link + .chain__link::before {
    left: 50%;
    top: -12px;
    transform: translateX(-50%) rotate(135deg);
  }

  /* Below the desktop breakpoint the diagram becomes two plain tile columns:
     the centre node and its connectors only read as a hub at full width.
     The columns stretch and share equal rows so the two sets of tiles line up
     across the gap instead of drifting out of step as their copy wraps. */
  .hub__diagram {
    --hub-gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .hub__column {
    grid-auto-rows: 1fr;
  }

  .hub__tile::after,
  .hub__column::after,
  .hub__core {
    display: none;
  }

  .sitefooter__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

@media (max-width: 760px) {
  :root {
    --section-y: 56px;
    --surface-padding: 16px;
    --frame-radius: 12px;
    --frame-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 8px 20px rgba(17, 24, 39, 0.05);
    --stack-copy-visual: 28px;
    --stack-gap-loose: 24px;
    --type-display: clamp(1.75rem, 1.38rem + 1.6vw, 2rem);
    --type-section: clamp(1.4rem, 1.05rem + 1.4vw, 1.65rem);
  }

  .closing__inner {
    padding-block: 64px;
  }

  .capability-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .frame--product:not(.frame--flush) {
    width: calc(100% + 2 * var(--gutter));
    max-width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }

  .flow {
    padding: 18px 18px 20px;
    border-radius: 14px;
  }

  .stage .section-head,
  .hub .section-head {
    margin-bottom: 28px;
  }

  .stage__panel {
    border-radius: var(--surface-radius);
  }

  .stage__notes {
    padding: 4px 18px 14px;
  }

  .stage__notes li {
    padding-block: 12px;
  }

  .eyebrow {
    margin-bottom: 16px;
  }

  .hero.hero--fleet-background {
    min-height: clamp(460px, 68svh, 580px);
  }

  .hero__shell {
    padding-block: clamp(24px, 4.5vw, 36px) clamp(28px, 6vw, 44px);
  }

  .hero__background img {
    transform: translateY(5%);
  }

  .hero__actions {
    margin-top: 18px;
  }

  .hero__body {
    font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.125rem);
    line-height: 1.52;
  }

  .hero__body-secondary {
    margin-top: 18px;
  }

  .use-cases__aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .use-case-card--lead {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .use-case-card__media,
  .use-case-card--lead .use-case-card__media {
    aspect-ratio: 16 / 7.4;
  }

  .use-case-card--lead .use-case-card__media {
    aspect-ratio: 16 / 8.6;
  }

  .use-case-card__content,
  .use-case-card--lead .use-case-card__content {
    padding: 16px 17px 18px;
  }

  .use-case-card--lead h3 {
    font-size: 17px;
  }

  .use-cases .section-head {
    max-width: min(var(--measure-copy), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    text-align: center;
  }

  .use-cases .section-body {
    margin-inline: auto;
  }

  .use-case-card {
    --use-case-expand-duration: 580ms;
    --use-case-expand-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --use-case-content-duration: 420ms;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition:
      min-height var(--use-case-expand-duration) var(--use-case-expand-ease),
      box-shadow var(--use-case-expand-duration) var(--use-case-expand-ease),
      border-color var(--use-case-expand-duration) var(--use-case-expand-ease);
  }

  .use-case-card[data-expanded='true'] {
    min-height: clamp(520px, 85dvh, 760px);
    border-color: rgba(79, 134, 232, 0.22);
    box-shadow:
      var(--frame-shadow),
      0 18px 44px rgba(15, 23, 42, 0.08);
  }

  .use-case-card__trigger {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .use-case-card__trigger:focus-visible {
    outline: 2px solid rgba(79, 134, 232, 0.45);
    outline-offset: 3px;
  }

  .use-case-card__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 999px;
    color: var(--ink-soft);
    background: rgba(15, 23, 42, 0.04);
    transition: transform var(--use-case-expand-duration) var(--use-case-expand-ease);
  }

  .use-case-card[data-expanded='true'] .use-case-card__chevron {
    transform: rotate(180deg);
  }

  .use-case-card__panel {
    display: grid;
    grid-template-rows: 0fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-rows var(--use-case-expand-duration) var(--use-case-expand-ease);
  }

  .use-case-card[data-expanded='true'] .use-case-card__panel {
    grid-template-rows: 1fr;
  }

  .use-case-card__panel-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity var(--use-case-content-duration) var(--use-case-expand-ease),
      transform var(--use-case-content-duration) var(--use-case-expand-ease);
    transition-delay: 0ms;
  }

  .use-case-card[data-expanded='true'] .use-case-card__panel-inner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 90ms;
  }

  .use-case-card__features {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0 17px 18px;
    list-style: none;
  }

  .use-case-card__feature h4 {
    font-size: 14px;
    letter-spacing: -0.012em;
  }

  .use-case-card__feature p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
  }

  .use-case-card[data-expanded='true'] .use-case-card__content,
  .use-case-card[data-expanded='true'].use-case-card--lead .use-case-card__content {
    padding-bottom: 14px;
  }

  @media (prefers-reduced-motion: reduce) {
    .use-case-card,
    .use-case-card__panel,
    .use-case-card__panel-inner,
    .use-case-card__chevron {
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }

    .use-case-card__panel-inner {
      transform: none;
    }
  }

  .notes {
    margin-top: 28px;
    gap: 18px;
  }

  .sitefooter__inner {
    padding-block: 44px 32px;
  }
}

@media (max-width: 480px) {
  /* Small phones: logo and menu trigger only. Demo stays in the mobile navigation layer. */
  .masthead__actions .action--primary {
    display: none;
  }
}

@media (max-width: 359px) {
  /* The hub keeps two tile columns on a normal phone, where a single column
     turns six short tiles into the longest section on the page. Below this the
     columns get too narrow for the tile copy, so they stack. */
  .hub__diagram {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .hero__actions,
  .closing__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .action {
    width: 100%;
  }

  .brand img {
    width: 118px;
  }
}

/* P2.6 — Integrations hub mobile composition, closing/footer polish */
@media (max-width: 1024px) {
  .hub--compact .hub__diagram {
    --hub-gap: var(--stack-gap);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .hub--compact .hub__core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-bottom: var(--stack-gap);
    padding: 20px 16px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--canvas-alt);
    box-shadow: none;
  }

  .hub--compact .hub__core::before,
  .hub--compact .hub__core::after {
    display: none;
  }

  .hub--compact .hub__core img {
    width: 108px;
  }

  .hub--compact .hub__column {
    display: grid;
    gap: 0;
    grid-auto-rows: auto;
  }

  .hub--compact .hub__column--right {
    border-top: 1px solid var(--hairline);
  }

  .hub--compact .hub__column::after,
  .hub--compact .hub__tile::after {
    display: none;
  }

  .hub--compact .hub__tile {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
  }

  .hub--compact .hub__tile .icon-mark {
    grid-row: 1 / span 2;
  }

  .hub--compact .hub__tile h3 {
    margin-top: 0;
    font-size: 15px;
  }

  .hub--compact .hub__tile p {
    margin-top: 0;
    font-size: 13.75px;
    line-height: 1.5;
  }

  .closing__inner {
    padding-block: 72px;
  }

  .closing p {
    margin-top: 16px;
  }

  .closing__actions {
    margin-top: 28px;
  }

  .sitefooter__inner {
    gap: 32px;
    padding-block: 52px 36px;
  }

  .sitefooter__columns {
    gap: 28px;
  }
}

@media (min-width: 1025px) {
  .hub--compact .hub__diagram {
    --hub-gap: 72px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hub-gap);
  }

  .hub--compact .hub__column--left {
    grid-column: 1;
    grid-row: 1;
  }

  .hub--compact .hub__core {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    width: 172px;
    height: 172px;
    margin-bottom: 0;
    padding: 0;
    border: 1px solid var(--hairline-strong);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-raised);
  }

  .hub--compact .hub__core-label {
    display: none;
  }

  .hub--compact .hub__column--right {
    grid-column: 3;
    grid-row: 1;
    border-top: 0;
  }

  .hub--compact .hub__tile {
    display: block;
    grid-template-columns: none;
    padding: var(--surface-padding) calc(var(--surface-padding) + 2px);
    border: 1px solid var(--hairline);
    border-radius: var(--surface-radius);
    background: #fff;
  }

  .hub--compact .hub__tile:hover {
    border-color: var(--hairline-strong);
    box-shadow: var(--shadow-frame);
  }

  .hub--compact .hub__tile h3 {
    margin-top: 14px;
    font-size: 15.5px;
  }

  .hub--compact .hub__tile p {
    margin-top: 7px;
    font-size: 13.75px;
  }
}

@media (max-width: 760px) {
  .closing__inner {
    padding-block: 56px;
  }

  .sitefooter__inner {
    padding-block: 48px 32px;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Has to outweigh `.js [data-reveal]`, so the enter state never applies at all
     rather than being skipped through by the script. */
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .action:active {
    scale: 1;
  }
}