/* ── Variables ─────────────────────────────────────────── */
:root {
  --color-bg:        #FFFFFF;
  --color-surface:   #F2F7FC;
  --color-surface2:  #E8F0F8;
  --color-border:    #CBD9EA;
  --color-primary:   #1B5499;
  --color-primary-h: #154280;
  --color-accent:    #0099D6;
  --color-accent-text: #005F87; /* darkened accent, passes 4.5:1 on all surface backgrounds */
  --color-text:      #162033;
  --color-muted:     #5A6C80;
  --radius:          10px;
  --transition:      0.2s ease;
  --shadow:          0 2px 12px rgba(27,84,153,0.09);
  --shadow-hover:    0 6px 24px rgba(27,84,153,0.16);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { font-size: 16px; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; pointer-events: none; }
.logo-img { pointer-events: auto; }

/* ── Layout helpers ────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 8px rgba(27,84,153,0.07);
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 100%;
}
.logo-img {
  height: 55px;
  width: auto;
  display: block;
  margin: 5px 0;
}

/* DOM order is lang-switcher, then nav-toggle, then nav — so it stays
   easy to find right next to the hamburger on mobile without a lang
   dropdown breaking (details/summary must be self-contained; it can't
   be split across a JS-toggled mobile nav). Visual order flips that
   back to "nav, then language" on desktop, matching the original
   layout where language sat last, after Contact. */
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-actions nav { order: 1; }
.header-actions .lang-switcher { order: 2; }
nav { display: flex; gap: 0.5rem; }
nav a {
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
}
nav a:hover,
nav a.active {
  color: var(--color-primary-h);
  background: var(--color-surface2);
}
nav .header-cta {
  margin-left: 1rem;
  padding: 0.45rem 1rem !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
nav .header-cta:hover {
  background: var(--color-primary-h) !important;
  box-shadow: 0 2px 8px rgba(27,84,153,0.2);
}
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── Mobile nav toggle (hamburger) ───────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* ── Views ─────────────────────────────────────────────── */
.view { display: none; }
/* Background now lives per-section (.growth-section / .growth-section--scenarios)
   instead of one flat wash across the whole view — see those rules further down. */
#growth { min-height: calc(100vh - 64px); }
.view.active { display: block; will-change: contents; }

/* ── Home hero banner ──────────────────────────────────── */
.home-hero-banner {
  background:
    linear-gradient(100deg, rgba(10,20,40,0.82) 0%, rgba(10,20,40,0.55) 100%),
    url('../img/business_improvement.jpg?v=20260824a') center center / cover no-repeat;
  background-color: #101820;
  padding: 3rem 0 2.5rem;
  position: relative;
  overflow: visible;
  border-bottom: 1px solid var(--color-border);
  /* Reference height for every other page hero (.platform-hero,
     .method-hero-banner, .growth-hero) — this is the one with the
     most content (H1 + subtitle + CTA + badge), so pinning it here
     and matching the others to it keeps them all equal regardless of
     how much lighter their own content is. */
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-hero-banner-content {
  position: relative;
  z-index: 1;
  /* .container's margin:0 auto normally centers it, but as a flex item
     here (.home-hero-banner is display:flex; flex-direction:column),
     an item with auto cross-axis margins overrides "stretch" and
     shrink-wraps to its own content's width instead of filling the
     hero — so each hero's container ended up a different width based
     on how long its own heading/paragraph happened to be, starting at
     a different X position on every page. width:100% forces it back
     to filling the hero like a normal block, same as every other hero
     below. */
  width: 100%;
}

.home-hero-banner h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -1px;
  max-width: 100%;
  margin: 0 0 0.75rem;
}
@media (min-width: 769px) {
  .home-hero-banner h1 { white-space: nowrap; }
}
.home-hero-banner-content p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0 0 1.75rem;
}
/* Static fallback only — alignHeroSubToH1() in app.js overwrites this with
   an inline max-width matching the h1's actual rendered width (which varies
   with viewport via the h1's clamp() font-size, so no single fixed number
   here can match it at every width). This 850px value only shows briefly
   before JS runs, or not at all if JS is blocked. */
@media (min-width: 769px) {
  .home-hero-banner-content p {
    max-width: 850px;
  }
}
/* No-JS / JS-failure safety net: if app.js never runs (blocked,
   crashed, an extension interferes), this paragraph must not stay
   permanently hidden. A zero-duration, delayed CSS animation forces
   it visible after a short wait regardless of JS — harmless if JS
   already revealed it sooner, since inline styles / classes set
   before the delay elapses take effect first. */
.hero-typewriter {
  visibility: hidden;
  animation: heroTypewriterFallback 0s linear 2s forwards;
}
@keyframes heroTypewriterFallback {
  to { visibility: visible; }
}
.tw-char {
  opacity: 0;
  animation: twCharFallback 0s linear 4s forwards;
}
.tw-char.is-visible { opacity: 1; }
@keyframes twCharFallback {
  to { opacity: 1; }
}
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: var(--color-accent);
  vertical-align: -0.15em;
  animation: typingCursorBlink 0.8s step-end infinite;
}
@keyframes typingCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-cursor { display: none; }
}
.hero-cta {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: background var(--transition), box-shadow var(--transition);
}
.hero-cta:hover {
  background: #0081b4;
  box-shadow: 0 4px 12px rgba(0,153,214,0.3);
}
@media (max-width: 768px) {
  .home-hero-banner { padding: 2.25rem 0 2rem; }
  .home-hero-banner h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    letter-spacing: -0.5px;
    /* Same idea as the ≤400px rule below: a fixed value only holds up
       at the width it was tuned for. Unlike that stacked badge, the
       wide (icon + 2-line text) badge used above 400px keeps forcing
       MORE right padding as the viewport grows, not less — because the
       h1's font-size also grows with vw here, so the wrap point keeps
       moving. 401-430px default below; 431-587px and 588-768px zones
       further down override it (font hits its clamp() ceiling at
       ~587px, changing the slope again). All three ranges were tuned
       against real rendered word-wrap positions, not guessed. */
    padding-right: clamp(165px, calc(100vw - 228px), 200px);
  }
}

@media (min-width: 431px) and (max-width: 587px) {
  .home-hero-banner h1 { padding-right: clamp(200px, calc(54.2vw - 32.56px), 286px); }
}

@media (min-width: 588px) and (max-width: 768px) {
  .home-hero-banner h1 { padding-right: clamp(287px, calc(100vw - 301px), 467px); }
}

/* ── Hero platform tab ─────────────────────────────────────
   Icon + label tag fixed flush to the hero's right AND bottom edge —
   anchored to the corner (not floating), large enough for the icon's
   detail to actually read. Interactive (links into the platform demo). */
.hero-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #16BEE3; /* sampled from the teal line in the hero photo */
  color: var(--color-text);
  text-decoration: none;
  padding: 0.7rem 1.1rem;
  border-radius: 14px 0 0 0;
  box-shadow: -2px -2px 14px rgba(10,20,40,0.25);
  transition: padding var(--transition), box-shadow var(--transition);
}
.hero-badge:hover,
.hero-badge:focus-visible {
  padding-right: 1.9rem;
  box-shadow: -2px -4px 18px rgba(10,20,40,0.35);
}
.hero-badge-icon {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}
/* Menu-list mock inside the badge (thumbnail + line per row) — the
   actual core of the platform: an editable menu. Rows slide into
   place in sequence once on load, then nudge right on hover/focus
   like they're being reordered — echoing the real drag-to-reorder
   menu demo further down the page. */
.hero-badge-icon .platform-icon-row {
  transform-box: fill-box;
  transform-origin: left center;
  opacity: 0;
  animation: platformIconRowIn 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}
.hero-badge-icon .platform-icon-row--1 { animation-delay: 0.15s; transition-delay: 0.05s; }
.hero-badge-icon .platform-icon-row--2 { animation-delay: 0.4s; transition-delay: 0s; }
.hero-badge-icon .platform-icon-row--3 { animation-delay: 0.65s; transition-delay: 0.1s; }
@keyframes platformIconRowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-badge:hover .platform-icon-row,
.hero-badge:focus-visible .platform-icon-row { transform: translateX(4px); }
.hero-badge:hover .platform-icon-row--2,
.hero-badge:focus-visible .platform-icon-row--2 { transform: translateX(7px); }
@media (prefers-reduced-motion: reduce) {
  .hero-badge-icon .platform-icon-row { animation: none; opacity: 1; transition: none; }
}
.hero-badge-text {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .hero-badge {
    top: 0;
    bottom: auto;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    border-radius: 0 0 0 10px;
    box-shadow: -2px 2px 14px rgba(10,20,40,0.25);
  }
  .hero-badge-icon { width: 52px; height: 52px; }
  .hero-badge-text { font-size: 0.8rem; }
}
@media (max-width: 475px) {
  /* Same reasoning as the wide-badge zones above: a fixed value only
     holds at the width it was tuned for, and the h1's own font-size
     grows with vw too, so the wrap point keeps moving. Below ~430px
     the badge's fixed footprint dominates and the slope is a clean
     1:1 with viewport width; above that the h1 font itself starts
     growing (clamp(6vw) exits its floor around ~427px) and eats into
     the extra space, flattening the slope — see the 431-475 override
     further down. Both pieces tuned against real rendered word-wrap
     positions across 320-475px, not guessed. */
  .home-hero-banner h1 { padding-right: clamp(90px, calc(100vw - 222px), 210px); }
  /* Narrow phones: too tight for an icon + 2-line label side by side —
     go tall and thin instead, icon above 3 stacked text lines. Kept
     up to 475px (not just ≤400px) so this stacked layout — not the
     side-by-side one — is what shows through the whole small-phone
     range up to phablet width. */
  .hero-badge {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.7rem;
  }
  .hero-badge-icon { width: 58px; height: 58px; }
  .hero-badge-text {
    font-size: 0.62rem;
    max-width: 85px;
    text-align: center;
  }
}

@media (min-width: 431px) and (max-width: 475px) {
  .home-hero-banner h1 { padding-right: clamp(200px, calc(55.6vw - 39.1px), 234px); }
}

/* ── Vehicle segment strip ────────────────────────────────
   Compact confirmation row under the hero, not a full section:
   no heading, no card padding, just an icon + label scan. */
.segment-strip {
  /* Soft teal tint (echoes the hero-badge accent, #16BEE3) instead of
     the neutral gray — enough to read as its own band, deliberately
     kept light rather than saturated to fit calm B2B palettes. */
  background: #EAFAFC;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 0 rgba(22,190,227,0.25);
  padding: 1.1rem 0;
}
.segment-strip-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.segment-strip-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  flex-shrink: 0;
}
.segment-strip-items {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.segment-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  opacity: 0;
  animation: segmentChipIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.segment-chip:nth-child(1) { animation-delay: 0.1s; }
.segment-chip:nth-child(2) { animation-delay: 0.45s; }
.segment-chip:nth-child(3) { animation-delay: 0.8s; }
.segment-chip:nth-child(4) { animation-delay: 1.15s; }
@keyframes segmentChipIn {
  0%   { opacity: 0; transform: translateY(14px); background: #fff; border-color: var(--color-border); box-shadow: none; }
  55%  { opacity: 1; transform: translateY(0); background: #eaf8fd; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(0,153,214,0.15); }
  100% { opacity: 1; transform: translateY(0); background: #fff; border-color: var(--color-accent); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .segment-chip { animation: none; opacity: 1; }
}
.segment-chip svg { width: 36px; height: 17px; color: var(--color-text); flex-shrink: 0; }
.segment-chip-img { width: 42px; height: 24px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 600px) {
  .segment-strip-inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .segment-strip-items { gap: 0.5rem; }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(42vh - 40px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
}
#over .hero h2 {
  color: #fff;
}
#over .hero-content p {
  color: rgba(255,255,255,0.70);
}

/* ── Live demo animation: menu → customer → dashboard ─
   One persistent panel ("window"); only its content morphs, so the
   three story beats read as one continuous flow, not three loose cards.
   Lives in its own section below the hero, not as a hero overlay. */
.hero-anim {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.ha-panel {
  position: relative;
  width: 100%;
  height: 320px;
  background: var(--color-primary);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  box-shadow: 0 0 60px rgba(0,153,214,0.2);
  overflow: hidden;
}
.ha-steps { display: flex; gap: 0.5rem; }
.ha-step {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.4s ease, transform 0.4s ease;
}
.ha-step--active { background: var(--color-accent); transform: scale(1.3); }
.ha-content {
  position: absolute;
  inset: 0;
  padding: 4.4rem 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ha-content.ha-content--active { opacity: 1; transform: translateX(0); }
.ha-content.ha-content--leaving { opacity: 0; transform: translateX(-24px); }
/* No-JS / JS-failure safety net: startHeroAnimation() is what adds
   --active to cycle scenes, so if it never runs (blocked, crashed
   earlier in app.js) none of the 4 scenes would ever show. Scoped to
   #heroAnim:not(.js-ready) — startHeroAnimation() adds .js-ready to
   #heroAnim as its first statement, so this only applies when that
   function genuinely never got to run. A plain unscoped rule here
   previously fought the cycling JS instead: once a scene's --leaving
   class was removed after its transition, the rule made it reappear
   underneath whichever scene was actually active. A generic "did any
   JS run at all" marker doesn't work either — a trivial inline
   <head> script still runs even when app.js itself is the thing
   that's blocked, so it can't tell the two cases apart. */
#heroAnim:not(.js-ready) .ha-content--menu { opacity: 1; transform: translateX(0); }
.ha-scene-label {
  position: absolute;
  top: 1rem;
  left: 2rem;
  right: 2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.ha-scene-sublabel {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255,255,255,0.6);
}
.ha-source-tag {
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255,255,255,0.3);
}

.ha-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0;
}
.ha-sublist { position: relative; }
.ha-row--sub {
  gap: 0.55rem;
  padding: 0.4rem 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.ha-row--sub.ha-row--dragging { box-shadow: 0 6px 14px rgba(0,0,0,0.35); position: relative; z-index: 1; }
.ha-folder-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  flex-shrink: 0;
}
.ha-branch { color: rgba(255,255,255,0.4); font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.ha-grip { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.ha-grip span { width: 12px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.4); }
.ha-doc {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.ha-row--top .ha-label { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.ha-row--sub .ha-label { font-size: 1.15rem; font-weight: 600; color: #fff; }
.ha-products { display: flex; flex-direction: column; gap: 0.7rem; }
.ha-product {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.ha-product.ha-row--dragging { box-shadow: 0 6px 14px rgba(0,0,0,0.35); position: relative; z-index: 1; }
.ha-product-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  flex-shrink: 0;
  will-change: transform;
  transform: translateZ(0);
}
.ha-product-info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.ha-product-brand { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; color: #fff; }
.ha-product-name { font-size: 1.15rem; font-weight: 600; color: #fff; }
.ha-product--own { border: 1px dashed rgba(74,222,128,0.5); border-radius: 8px; padding: 0.3rem 0.5rem; margin: -0.3rem -0.5rem; }
.ha-product--own .ha-product-brand { color: #86efac; }
.ha-product-sold {
  font-size: 1.15rem;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
  transition: color 0.4s ease, transform 0.4s ease;
}
.ha-product-sold.ha-product-sold--up { color: #4ade80; transform: scale(1.15); }

.ha-dash-bars { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.8rem; }
.ha-dash-row { display: flex; align-items: center; gap: 0.7rem; }
.ha-dash-delta {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  width: 30px;
  flex-shrink: 0;
  text-align: right;
}
.ha-dash-delta--up { color: #4ade80; }
.ha-dash-delta--down { color: #f87171; }
.ha-dash-track { flex: 1; display: flex; align-items: center; height: 12px; }
.ha-dash-bar {
  width: 0;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: rgba(255,255,255,0.35);
  transition: width 0.8s ease;
}
.ha-dash-bar--1 { background: #38bdf8; }
.ha-dash-bar--2 { background: #a78bfa; }
.ha-dash-bar--3 { background: #fbbf24; }
.ha-dash-bar--hi { background: #ef4444; }
.ha-dash-cat {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  width: 96px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ha-dash-stat { font-size: 1.35rem; font-weight: 800; color: #fff; }
.ha-dash-stat--sub {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-top: 0.35rem;
}
.ha-dash-stat-was { color: rgba(255,255,255,0.6); font-weight: 500; }

.ha-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.3rem; }
.ha-flow-step {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.ha-flow-step--active {
  color: #fff;
  background: rgba(0,153,214,0.18);
  border-color: var(--color-accent);
  transform: scale(1.06);
}
.ha-flow-step--hi {
  color: #fff;
  background: rgba(74,222,128,0.14);
  border-color: rgba(74,222,128,0.4);
}
.ha-flow-arrow {
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 700;
  display: inline-block;
  transition: transform 0.35s ease, color 0.35s ease;
}
.ha-flow-arrow--active { color: #fff; transform: translateX(3px) scale(1.25); }

.ha-effect { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.ha-effect-brand { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; color: #fff; }
/* Grid, not flex: the label row and number row need to align
   independently of each other. .ha-effect-before/-after render at
   different font sizes, so a flex column per side (label+number
   stacked) makes the two sides different total heights — any single
   align-items value can line up the labels or the numbers, never
   both. Two explicit grid rows sidestep that: labels align on their
   own row (same font size, no mismatch), numbers + arrow align on
   theirs via align-items: end. */
.ha-effect-numbers {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  /* baseline, not end: .ha-effect-before/-after are different font
     sizes (the "after" value is deliberately bigger/bolder to draw
     the eye), so bottom-edge alignment leaves their text sitting on
     visibly different lines. Baseline lines up the actual glyphs. */
  align-items: baseline;
  margin-top: 0.2rem;
}
.ha-effect-col-label { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.6); }
.ha-effect-label--before { grid-column: 1; grid-row: 1; }
.ha-effect-label--after { grid-column: 3; grid-row: 1; }
.ha-effect-before { grid-column: 1; grid-row: 2; font-size: 1.15rem; font-weight: 700; color: rgba(255,255,255,0.75); }
.ha-effect-arrow { grid-column: 2; grid-row: 2; font-size: 1.15rem; color: rgba(255,255,255,0.6); }
.ha-effect-after { grid-column: 3; grid-row: 2; font-size: 1.35rem; font-weight: 800; color: #4ade80; white-space: nowrap; }
.ha-effect-text { font-size: 0.88rem; font-weight: 600; color: #fff; margin: 0.15rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ha-content, .ha-dash-bar, .ha-row--sub, .ha-step, .ha-flow-step, .ha-flow-arrow { transition: none; }
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* Explicit left/right (not a bare "0") so this doesn't clobber
     .container's own 1.5rem side padding — this div carries both
     classes, and equal specificity + later source order meant a
     plain 0 here was silently winning, leaving the panels flush
     against the viewport edge from 1025px up to ~1280px. */
  padding: 3rem 1.5rem;
}
.hero-showcase {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.hero-showcase-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero-showcase-arrow {
  align-self: center;
  margin-top: 2.5rem;
  color: var(--color-accent);
  font-size: 1.6rem;
  font-weight: 700;
  flex-shrink: 0;
  animation: hvArrowSwoosh 9s ease-in-out infinite;
}
@keyframes hvArrowSwoosh {
  0%, 75%, 100% { opacity: 0.6; transform: translateX(0) scale(1); }
  83% { opacity: 1; transform: translateX(7px) scale(1.3); }
  92% { opacity: 0.6; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase-arrow { animation: none; }
}
.hero-showcase-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 0.7rem;
}
.hv-panel {
  width: 100%;
  height: 320px;
  background: #1e2f47;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  box-shadow: 0 0 60px rgba(0,153,214,0.2);
  padding: 1.7rem 1.8rem 1.9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}
.hv-scan {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}
.hv-scan-icon { width: 24px; height: 24px; color: var(--color-accent); flex-shrink: 0; }
.hv-scan-text { display: flex; flex-direction: column; gap: 0.1rem; }
.hv-scan-text strong { font-size: 0.92rem; font-weight: 800; color: #fff; }
.hv-scan-text span { font-size: 0.76rem; color: rgba(255,255,255,0.6); }
.hv-scan-arrow {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 1rem;
  font-weight: 700;
  margin: -0.4rem 0;
}
.hv-pillars {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.hv-pillar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.hv-pillar-icon {
  width: 32px;
  height: 32px;
  color: var(--color-accent);
  flex-shrink: 0;
  animation: hvPillarGlow 9s ease-in-out infinite;
}
.hv-pillar:nth-of-type(1) .hv-pillar-icon { animation-delay: 0s; }
.hv-pillar:nth-of-type(2) .hv-pillar-icon { animation-delay: 3s; }
.hv-pillar:nth-of-type(3) .hv-pillar-icon { animation-delay: 6s; }
@keyframes hvPillarGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0,153,214,0)); opacity: 0.7; transform: scale(1); }
  14% { filter: drop-shadow(0 0 14px rgba(0,153,214,1)) drop-shadow(0 0 4px rgba(255,255,255,0.6)); opacity: 1; transform: scale(1.22); }
  28%, 89% { filter: drop-shadow(0 0 0 rgba(0,153,214,0)); opacity: 0.7; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-pillar-icon { animation: none; }
}
.hv-pillar-title { font-size: 1rem; font-weight: 800; color: #fff; }
.hv-pillar-text { font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.35; }
.hv-pillar-arrow {
  color: rgba(255,255,255,0.35);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.4rem;
}
.hero h1 {
  font-size: clamp(1.6rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2px;
  color: #fff;
  margin-bottom: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  text-shadow: none;
}

/* ── Plug & play interactive icon ───────────────────────── */
.plug-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.2em;
}
.plug-svg {
  width: 2.1em;
  height: 0.94em;
  display: block;
  overflow: visible;
}
.plug-moving { animation: plugSlide 2.6s ease-in-out infinite; }
.puzzle-a { fill: var(--color-accent); }
.puzzle-b { fill: var(--color-muted); }
.plug-spark {
  fill: var(--color-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: plugSparkFlash 2.6s ease-in-out infinite;
}
@keyframes plugSlide {
  0%, 100% { transform: translateX(0); }
  45%, 60% { transform: translateX(24px); }
}
@keyframes plugSparkFlash {
  0%, 40%, 72%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1.6); }
  62% { opacity: 0; transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .plug-moving, .plug-spark { animation: none; }
}
/* ── Hero plate demo ────────────────────────────────────── */
.plate-demo-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.plate-demo-right {
  flex: 1;
  min-width: 0;
  min-height: 9rem;
  padding-top: 0.2rem;
}
.plate-demo {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem 0.9rem;
  width: 100%;
  max-width: 270px;
  flex-shrink: 0;
  transition: max-width 0.25s ease;
}
.plate-demo--compact { max-width: 210px; }
.plate-demo-label {
  font-size: 0.72rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 0.7rem;
}
.plate-demo-input {
  display: flex;
  align-items: stretch;
  height: 54px;
  background: #FFDE00;
  border-radius: 10px;
  border: 4px solid #111;
  overflow: hidden;
  transition: background 0.25s ease;
}
.plate-demo-input.plate-demo-input--white { background: #f2f2f2; }
.plate-eu-strip {
  width: 34px;
  background: #003DA5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px 0;
}
.plate-eu-country {
  font-size: 9px;
  font-weight: 900;
  color: #FFDE00;
  letter-spacing: 0.05em;
  line-height: 1;
}
.plate-chars-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  overflow: hidden;
}
.plate-chars {
  font-size: 1.5rem;
  font-weight: 900;
  color: #111;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
}
.plate-cursor {
  display: inline-block;
  width: 2px;
  height: 1.6rem;
  background: #111;
  margin-left: 2px;
  vertical-align: middle;
  animation: pCursorBlink 0.75s step-end infinite;
}
@keyframes pCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.plate-demo-result {
  margin-top: 0;
  min-height: 1.4rem;
  font-size: 0.84rem;
  color: var(--color-text);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.pdemo-check { color: #4ade80; font-weight: 700; margin-right: 0.25rem; }
.pdemo-year  { color: var(--color-muted); font-size: 0.8rem; margin-left: 0.3rem; }

.pdemo-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--color-muted);
}
.pdemo-type {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  background: rgba(0,153,214,0.08);
  border-radius: 4px;
  padding: 0.08rem 0.4rem;
}
.pdemo-vin { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.plate-demo-menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
}
.pdm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.42rem 0.7rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.pdm-row.pdm-row--in { opacity: 1; transform: translateY(0); }
.pdm-cat { font-weight: 600; color: var(--color-text); }
.pdm-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0,153,214,0.08);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
}

/* ── Button ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.75rem 1.75rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(27,84,153,0.25);
}
.btn:hover {
  background: var(--color-primary-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27,84,153,0.3);
}

/* ── Section content ───────────────────────────────────── */
.section-content { padding-top: 32px; padding-bottom: 64px; }
.section-content h2 {
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.section-heading {
  margin: 0 0 0.75rem;
}
.section-heading--spaced { margin-top: 0.5rem; }
.section-lead {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.section-lead--full { max-width: none; white-space: nowrap; }
.izi-motive-note {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.izi-motive-note a {
  color: var(--color-primary);
  font-weight: 600;
}
.izi-motive-note a:hover { color: var(--color-primary-h); }
.sub-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2.5rem 0 1.25rem;
}

/* ── Over ons hero ──────────────────────────────────────── */
/* ── Data -> Intelligence -> Action flow diagram ───────── */
.di-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  margin: 0 0 2.5rem;
}
.di-col { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-width: 0; }
.di-col--raw { flex: 0 0 auto; }
.di-col--action { flex: 0 0 420px; align-items: flex-end; }
.di-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.8rem;
}
.di-raw-stage { position: relative; width: 380px; height: 112px; }
.di-action-stage { position: relative; }
.di-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 112px;
  overflow: visible;
  pointer-events: none;
}
.di-line {
  stroke-width: 1.5;
  opacity: 0.55;
  stroke-dasharray: 4 4;
  animation: diLineFlow 1.4s linear infinite;
}
.di-line--1 { stroke: #0099D6; }
.di-line--2 { stroke: #4ade80; animation-delay: 0.15s; }
.di-line--3 { stroke: #f59e0b; animation-delay: 0.3s; }
.di-line--4 { stroke: #8b5cf6; animation-delay: 0.45s; }
.di-line--5 { stroke: #14b8a6; animation-delay: 0.6s; }
.di-line--6 { stroke: #f43f5e; animation-delay: 0.75s; }
@keyframes diLineFlow {
  to { stroke-dashoffset: -8; }
}
.di-chips {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 116px);
  grid-template-rows: repeat(2, 51px);
  column-gap: 16px;
  row-gap: 10px;
}
.di-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  opacity: 0.85;
}
.di-chip-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.di-chip-value {
  font-size: 0.8rem;
  font-family: Consolas, "SFMono-Regular", monospace;
  color: var(--color-text);
}
/* Each raw-data item gets its own accent, so they read as distinct
   fields rather than one undifferentiated pile. */
.di-chip:nth-child(1) { border-left: 3px solid #0099D6; }
.di-chip:nth-child(1) .di-chip-label { color: #0077a8; }
.di-chip:nth-child(2) { border-left: 3px solid #4ade80; }
.di-chip:nth-child(2) .di-chip-label { color: #16a34a; }
.di-chip:nth-child(3) { border-left: 3px solid #f59e0b; }
.di-chip:nth-child(3) .di-chip-label { color: #b45309; }
.di-chip:nth-child(4) { border-left: 3px solid #8b5cf6; }
.di-chip:nth-child(4) .di-chip-label { color: #7c3aed; }
.di-chip:nth-child(5) { border-left: 3px solid #14b8a6; }
.di-chip:nth-child(5) .di-chip-label { color: #0f766e; }
.di-chip:nth-child(6) { border-left: 3px solid #f43f5e; }
.di-chip:nth-child(6) .di-chip-label { color: #be123c; }

.di-connector { flex: 0 0 32px; width: 32px; height: 2px; background: rgba(0,153,214,0.25); position: relative; }
.di-connector--spacer { flex: 0 0 70px; width: 70px; background: none; }
@keyframes diFlowDot {
  0%   { left: 0;                opacity: 0; }
  12%  {                          opacity: 1; }
  88%  {                          opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}

.di-core-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.di-core-tagline {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.di-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: var(--color-primary);
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 0 30px rgba(0,153,214,0.25);
}
.di-core-icon { width: 40px; height: 40px; color: #fff; animation: hvPillarGlow 9s ease-in-out infinite; }
.di-core-label { font-size: 1em; font-weight: 800; color: #fff; letter-spacing: 0.03em; white-space: nowrap; }

.di-core-badge {
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(10,20,40,0.3);
  color: var(--color-primary);
  animation: diBadgeFloat 4s ease-in-out infinite;
}
.di-core-badge svg { width: 22px; height: 22px; }
.di-core-badge--chart { top: -18px; left: -18px; color: var(--color-accent); }
.di-core-badge--pie {
  top: -18px;
  right: -18px;
  color: #f59e0b;
  animation-delay: 0.7s;
}
.di-core-badge--check {
  bottom: -18px;
  right: -18px;
  color: #16a34a;
  animation-delay: 1.4s;
}
.di-core-badge--search {
  bottom: -18px;
  left: -18px;
  color: var(--color-primary);
  animation-delay: 2.1s;
}
@keyframes diBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .di-core-badge { animation: none; }
}

.di-action-stage { position: relative; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.di-lines-out {
  position: absolute;
  top: 0;
  left: -86px;
  width: 86px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.di-line-out--1 { stroke: #ec4899; }
.di-line-out--2 { stroke: #f59e0b; animation-delay: 0.15s; }
.di-line-out--3 { stroke: #06b6d4; animation-delay: 0.3s; }

@media (max-width: 768px) {
}

.di-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
}
.di-result-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.di-result-label { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.di-result-sub { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-result-value { margin-left: auto; flex-shrink: 0; font-weight: 700; color: var(--color-accent); white-space: nowrap; }

/* ── Growth journey (storytelling visualization) ── */
.gr-journey {
  display: flex;
  gap: 2rem;
  margin: 0 0 3rem;
  align-items: stretch;
}
.gr-step {
  flex: 1;
  display: flex;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  position: relative;
  /* Previously an unconditional page-load animation, so it had
     already finished playing before anyone scrolled/navigated down
     to it — Growth was the one section with no scroll-triggered
     motion. Now driven by the same IntersectionObserver pattern used
     for the timeline/steps (see the gr-journey observer in app.js),
     via the .gr-journey--in class. No no-JS fallback needed here —
     #growth (like #platform/#method/#contact) only ever renders via
     JS-driven view switching in the first place (.view is
     display:none until JS adds .active), so there's no scenario where
     this is visible-but-unrevealed. */
}
.gr-journey--in .gr-step {
  opacity: 1;
  transform: translateX(0);
}
.gr-step::after {
  content: '';
  position: absolute;
  right: -2rem;
  top: 50%;
  width: 2rem;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent) 0%, rgba(0,153,214,0.5) 100%);
  opacity: 0.8;
  transform: translateY(-1.5px);
}
.gr-step:last-child::after {
  display: none;
}
.gr-step--1 { transition-delay: 0s; }
.gr-step--2 { transition-delay: 0.15s; }
.gr-step--3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .gr-step { transition: none; animation: none; opacity: 1; transform: none; }
  .gr-scenario-card { transition: none; }
  .gr-scenario-card:hover { transform: none; }
}

.gr-step-content {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  flex: 1;
}
.gr-step-content--dark {
  background: #fff;
  border: 1px solid var(--color-border);
}
.gr-step-title {
  color: var(--color-primary);
}
.gr-step-desc {
  color: var(--color-muted);
}
.gr-step-content--dark .gr-chart-mock {
  background: #fafafa;
  border: 1px solid var(--color-border);
  backdrop-filter: none;
}
.gr-step-content--dark .gr-chart-bar:nth-child(1) .gr-chart-bar-fill {
  background: linear-gradient(90deg, #0099D6 0%, #0077AA 100%);
}
.gr-step-content--dark .gr-chart-bar:nth-child(2) .gr-chart-bar-fill {
  background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
}
.gr-step-content--dark .gr-chart-bar:nth-child(3) .gr-chart-bar-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}
.gr-step-content--dark .gr-chart-label {
  color: var(--color-text);
}
.gr-step-content--dark .gr-chart-value {
  color: var(--color-muted);
}
.gr-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.gr-step-desc {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 1rem;
}

/* Excel mock */
.gr-excel-mock {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 0.75rem;
}
.gr-excel-header {
  display: grid;
  grid-template-columns: 70px 1.1fr 50px 60px;
  gap: 0.3rem;
  background: #e8e8e8;
  padding: 0.6rem;
  font-weight: 700;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.gr-excel-row {
  display: grid;
  grid-template-columns: 70px 1.1fr 50px 60px;
  gap: 0.3rem;
  padding: 0.6rem;
  border-bottom: 1px solid #f0f0f0;
  color: #555;
}
.gr-excel-row:last-child { border-bottom: none; }
.gr-excel-header span,
.gr-excel-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same cross-fade mechanism as .gr-platform-slot below: old and new
   row occupy the same box (new one absolutely positioned over the
   old, which stays in flow and sets the slot's height), so the sheet
   never needs to grow to fit the extra rows. 5 rows total (3 static +
   2 slots) — enough to read as real data without making the card
   taller than its siblings. */
.gr-excel-slot {
  position: relative;
}
.gr-excel-slot .gr-excel-row {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gr-excel-slot .gr-excel-row--old {
  opacity: 1;
  transform: translateY(0);
}
.gr-excel-slot .gr-excel-row--new {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
}
.gr-step--1:hover .gr-excel-slot .gr-excel-row--old {
  opacity: 0;
  transform: translateY(-8px);
}
.gr-step--1:hover .gr-excel-slot .gr-excel-row--new {
  opacity: 1;
  transform: translateY(0);
}
.gr-step--1:hover .gr-excel-slot--2 .gr-excel-row {
  transition-delay: 0.12s;
}
.gr-excel-mock > .gr-excel-slot:last-child .gr-excel-row {
  border-bottom: none;
}
@media (prefers-reduced-motion: reduce) {
  .gr-excel-slot .gr-excel-row { transition: none; }
}

/* Platform mock */
.gr-platform-mock {
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f4f8 100%);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.gr-platform-header {
  background: var(--color-primary);
  color: #fff;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.gr-platform-items {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.gr-platform-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 0.8rem;
  border-radius: 4px;
  border-left: 3px solid var(--color-accent);
}
.gr-item-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text);
}
.gr-item-stock {
  font-size: 0.75rem;
  color: var(--color-muted);
}
/* Two rows cross-fade into different items on hover instead of the
   list growing — old and new item occupy the exact same box (the new
   one absolutely positioned over the old one, which stays in flow and
   sets the slot's height), so the card never needs to get taller. */
.gr-platform-slot {
  position: relative;
}
.gr-platform-slot .gr-platform-item {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gr-platform-slot .gr-platform-item--old {
  opacity: 1;
  transform: translateY(0);
}
.gr-platform-slot .gr-platform-item--new {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
}
.gr-step--2:hover .gr-platform-slot .gr-platform-item--old {
  opacity: 0;
  transform: translateY(-8px);
}
.gr-step--2:hover .gr-platform-slot .gr-platform-item--new {
  opacity: 1;
  transform: translateY(0);
}
.gr-step--2:hover .gr-platform-items .gr-platform-slot:nth-child(3) .gr-platform-item {
  transition-delay: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
  .gr-platform-slot .gr-platform-item { transition: none; }
}

/* Chart mock */
.gr-chart-mock {
  background: #fafafa;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.gr-chart-bars {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.gr-chart-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.5rem;
  row-gap: 0.3rem;
}
.gr-chart-bar-fill {
  grid-column: 1 / -1;
  height: 20px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
  border-radius: 3px;
}
.gr-chart-bar:nth-child(1) .gr-chart-bar-fill { background: linear-gradient(90deg, #0099D6 0%, #0077AA 100%); animation-delay: 1.8s; }
.gr-chart-bar:nth-child(2) .gr-chart-bar-fill { background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%); animation-delay: 2.2s; }
.gr-chart-bar:nth-child(3) .gr-chart-bar-fill { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); animation-delay: 2.6s; }
@keyframes grChartGrow {
  from { width: 2px !important; }
}
.gr-chart-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}
.gr-chart-value {
  font-size: 0.7rem;
  color: var(--color-muted);
  align-self: center;
  padding-left: 0.6rem;
  border-left: 1px solid var(--color-border);
}


@media (max-width: 1240px) {
  .di-flow { flex-direction: column; align-items: stretch; padding: 1.5rem; }
  .di-col--raw { flex: 0 0 auto; position: relative; }
  .di-col--action { flex: 0 0 auto; width: 100%; align-items: stretch; }
  .di-connector { width: 100%; height: 40px; align-self: stretch; }
  .di-connector--spacer { background: linear-gradient(to bottom, rgba(0,153,214,0.25) 0%, rgba(0,153,214,0.25) 100%); width: 2px; height: 40px; margin: 0 auto; }
  .di-line { display: none; }
  .di-lines {
    position: absolute;
    width: 2px;
    height: 60px;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
  }
  .di-lines-out {
    position: absolute;
    width: 2px;
    height: 60px;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
  }
  .di-line { animation: diLineFlow 1.4s linear infinite; stroke-width: 2px; }
  .di-raw-stage { width: 100%; height: auto; }
  .di-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    width: 100%;
  }

  .gr-excel-header,
  .gr-excel-row {
    grid-template-columns: 60px 1fr 60px;
    gap: 0.5rem;
    font-size: 0.7rem;
  }
  .gr-platform-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}

/* ── Timeline ──────────────────────────────────────────── */
.timeline {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 8px;
  border-radius: 99px;
  background: var(--color-border);
  z-index: 0;
}
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: 0;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #0099D6, #154280);
  box-shadow: 0 2px 6px rgba(27,84,153,0.3);
  z-index: 0;
  transition: width 1.1s ease;
}
.timeline.tl-active::after { width: calc(100% - 3rem); }
.tl-item {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.timeline.tl-active .tl-item {
  opacity: 1;
  transform: translateY(0);
}
.timeline.tl-active .tl-item:nth-child(1) { transition-delay: 0s; }
.timeline.tl-active .tl-item:nth-child(2) { transition-delay: 0.15s; }
.timeline.tl-active .tl-item:nth-child(3) { transition-delay: 0.3s; }
.timeline.tl-active .tl-item:nth-child(4) { transition-delay: 0.45s; }
.timeline.tl-active .tl-item:nth-child(5) { transition-delay: 0.6s; }
.timeline.tl-active .tl-item:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .tl-item { opacity: 1; transform: none; }
  .timeline::after { transition: none; }
}
.tl-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: scale(1);
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.timeline.tl-active .tl-item:nth-child(1) .tl-num { background: #0099D6; color: #fff; transform: scale(1.12); transition-delay: 0.05s; }
.timeline.tl-active .tl-item:nth-child(2) .tl-num { background: #0788C7; color: #fff; transform: scale(1.12); transition-delay: 0.2s; }
.timeline.tl-active .tl-item:nth-child(3) .tl-num { background: #0E77B8; color: #fff; transform: scale(1.12); transition-delay: 0.35s; }
.timeline.tl-active .tl-item:nth-child(4) .tl-num { background: #1465A8; color: #fff; transform: scale(1.12); transition-delay: 0.5s; }
.timeline.tl-active .tl-item:nth-child(5) .tl-num { background: #154280; color: #fff; transform: scale(1.12); transition-delay: 0.65s; }
.timeline.tl-active .tl-item:hover .tl-num {
  transform: scale(1.22);
  box-shadow: 0 4px 14px rgba(27,84,153,0.4);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .tl-num { transition: background 0.3s ease, color 0.3s ease; }
  .timeline.tl-active .tl-num { transform: scale(1) !important; }
  .timeline.tl-active .tl-item:hover .tl-num { transform: scale(1.1) !important; }
}
.tl-item strong {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary);
}
.tl-item p { font-size: 0.9rem; color: var(--color-muted); }
.tl-details { margin-top: 0.5rem; }
.tl-toggle {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent-text);
}
.tl-toggle::-webkit-details-marker { display: none; }
.tl-toggle .tl-chevron {
  font-size: 0.65rem;
  transition: transform var(--transition);
}
.tl-details[open] .tl-chevron { transform: rotate(90deg); }
.tl-more {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--color-border);
}
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.card h4 { font-size: 0.95rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.4rem; }
.card p { font-size: 0.875rem; color: var(--color-muted); }

/* ── Markets ───────────────────────────────────────────── */
.markets {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.market-item {
  flex: 1;
  min-width: clamp(140px, 40%, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.market-item strong { font-size: 0.95rem; font-weight: 700; color: var(--color-primary); }
.market-item span { font-size: 0.8rem; color: var(--color-muted); }

.market-item--photo {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: 35% 58%;
  border: none;
}
.market-item--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,20,40,0.5) 0%, rgba(10,20,40,0.72) 100%);
}
.market-item--photo strong,
.market-item--photo span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.market-item--photo strong { color: #fff; }
.market-item--photo span { color: rgba(255,255,255,0.92); }

/* ── Platform intro + preview ──────────────────────────── */
.platform-hero {
  position: relative;
  min-height: 310px; /* matches .home-hero-banner, the reference height */
  background:
    linear-gradient(100deg, rgba(10,20,40,0.82) 0%, rgba(10,20,40,0.55) 100%),
    url('../img/data_specialist.jpg?v=20260824a') center 60% / cover no-repeat;
  background-color: #101820;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 0 2.5rem;
}
/* See .home-hero-banner-content for why this is needed: without an
   explicit width, .container's auto margins make it shrink-wrap to
   its own content inside this flex hero instead of filling it. */
.platform-hero > .container { width: 100%; }
.platform-hero h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0 0 0.6rem;
}
/* Same approach as .home-hero-banner h1: keep it on one line on desktop
   where it comfortably fits, but let it wrap freely below that instead of
   truncating with an ellipsis. */
@media (min-width: 769px) {
  .platform-hero h2 { white-space: nowrap; }
}
.platform-hero > .container > p {
  color: rgba(255,255,255,0.70);
  font-size: 1.05rem;
  margin: 0 0 2rem;
}
/* Static fallback only, same as .home-hero-banner-content p — see the
   comment there. alignHeroSubToH1() in app.js overwrites this with an
   inline max-width matching this hero's own h2 width. */
@media (min-width: 769px) {
  .platform-hero > .container > p {
    max-width: 850px;
  }
}
/* Platform's post-hero content used to be one long white wrapper. Split
   into per-topic full-width bands with alternating backgrounds, matching
   the white/surface2/white rhythm already used on Home and Method — makes
   the page scannable in distinct chunks instead of one undifferentiated
   scroll. */
.platform-section--activity { background: var(--color-surface2); }

/* ── Connect diagram ──────────────────────────────────── */
.mod-connect-demo {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "nl1 wl1 hub wr1 nr1"
    "nl2 wl2 hub wr2 nr2"
    "nl3 wl3 hub wr3 nr3";
  align-items: center;
  row-gap: 0.75rem;
  padding: 0.5rem 0;
}
.mcd-nl1 { grid-area: nl1; }
.mcd-nl2 { grid-area: nl2; }
.mcd-nl3 { grid-area: nl3; }
.mcd-wl1 { grid-area: wl1; }
.mcd-wl2 { grid-area: wl2; }
.mcd-wl3 { grid-area: wl3; }
.mcd-hub-area { grid-area: hub; display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; }
.mcd-wr1 { grid-area: wr1; }
.mcd-wr2 { grid-area: wr2; }
.mcd-wr3 { grid-area: wr3; }
.mcd-nr1 { grid-area: nr1; }
.mcd-nr2 { grid-area: nr2; }
.mcd-nr3 { grid-area: nr3; }
.mcd-node {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  text-align: center;
  white-space: nowrap;
}
.mcd-wire {
  position: relative;
  height: 2px;
  background: rgba(0, 153, 214, 0.2);
  align-self: center;
}
.mcd-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: -2px;
  background: var(--color-accent);
  box-shadow: 0 0 5px rgba(0, 153, 214, 0.7);
  animation: dotFlow 1.8s ease-in-out infinite;
}
.mcd-dot--d1 { animation-delay: -0.3s; }
.mcd-dot--d2 { animation-delay: -0.6s; }
.mcd-dot--d3 { animation-delay: -0.9s; }
.mcd-dot--d4 { animation-delay: -1.2s; }
.mcd-dot--d5 { animation-delay: -1.5s; }
@keyframes dotFlow {
  0%   { left: 0;                opacity: 0; }
  12%  {                          opacity: 1; }
  88%  {                          opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}
.mcd-hub-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; }
.mcd-hub {
  position: relative;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
.mcd-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  animation: mcdPulse 2s ease-out infinite;
}
.mcd-ring--1 { width: 72px; height: 72px; animation-delay: 0s; }
.mcd-ring--2 { width: 84px; height: 84px; animation-delay: 0.6s; }
@keyframes mcdPulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}
/* ── Vehicle & parts data — live demo ──────────────────── */
.vd-demo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.vd-plate-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.vd-plate-input {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 130px;
  background: #FFDE00;
  border-radius: 8px;
  border: 3px solid #111;
  padding: 0 0.6rem;
  flex-shrink: 0;
}
.vd-plate-chars {
  font-size: 1.15rem;
  font-weight: 900;
  color: #111;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.vd-plate-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2rem;
  background: #111;
  margin-left: 2px;
  vertical-align: middle;
  animation: pCursorBlink 0.75s step-end infinite;
}
.vd-result {
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.vd-result strong { margin: 0 0.35rem; }

.vd-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vd-tab {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 0.26rem 0.7rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.vd-tab--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vd-articles { display: flex; flex-direction: column; gap: 0.22rem; }
.vd-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0.7rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.vd-article-row.vd-article-row--in { opacity: 1; transform: translateY(0); }
.vd-article-row.vd-article-row--selected {
  border-color: var(--color-accent);
  background: rgba(0,153,214,0.06);
}
.vd-article-name { font-weight: 600; color: var(--color-text); }
.vd-article-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(0,153,214,0.08);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
}

.vd-products { display: flex; flex-direction: column; gap: 0.22rem; }
.vd-product {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.22rem 0.6rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.vd-product.vd-product--in { opacity: 1; transform: translateY(0); }
.vd-product--own { border-color: rgba(74,222,128,0.5); border-style: dashed; }
.vd-product-img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}
.vd-product-img svg { width: 15px; height: 15px; }
.vd-product-info { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.vd-product-name { font-size: 0.68rem; color: var(--color-muted); }
.vd-product-brand-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.vd-product-brand { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; color: var(--color-accent); }
.vd-product--own .vd-product-brand { color: #16a34a; }
.vd-product-own-tag {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(74,222,128,0.16);
  color: #16a34a;
  padding: 0.05rem 0.4rem;
  border-radius: 10px;
}
.vd-product-sku { font-size: 0.68rem; color: var(--color-muted); }
.vd-product-spec { font-size: 0.66rem; color: var(--color-muted); }

/* ── Module showcase ───────────────────────────────────── */
.mod-showcase {
  display: flex;
  gap: 0;
  margin-bottom: 3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
}
.mod-list {
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}
.mod-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 1.1rem 1.3rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.mod-item:last-child { border-bottom: none; }
.mod-item:hover { background: var(--color-surface2); }
.mod-item--active {
  background: var(--color-primary);
  border-right: none;
}
.mod-item--active:hover { background: var(--color-primary); }
.mod-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.mod-item--active .mod-name { color: #fff; }
.mod-tag {
  font-size: 0.75rem;
  color: var(--color-muted);
}
.mod-item--active .mod-tag { color: rgba(255,255,255,0.55); }
.mod-panels {
  flex: 1;
  background: #fff;
  min-width: 0;
}
.mod-panel {
  display: none;
  padding: 1.8rem 2rem;
}
.mod-panel--active { display: block; }
.mod-panel-desc {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0 0 1.4rem;
  line-height: 1.6;
}

/* Stats demo */
.mod-stats-demo { display: flex; flex-direction: column; gap: 0.75rem; }
.msd-row { display: flex; align-items: center; gap: 0.75rem; }
.msd-label { font-size: 0.82rem; color: var(--color-muted); width: 132px; flex-shrink: 0; }
.msd-track { flex: 1; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.msd-fill { height: 100%; width: 0; background: var(--color-accent); border-radius: 4px; transition: width 1s cubic-bezier(0.4,0,0.2,1); }
.msd-count { font-size: 0.82rem; font-weight: 700; color: var(--color-text); width: 40px; text-align: right; flex-shrink: 0; }

/* AI demo */
.mod-ai-demo { display: flex; flex-direction: column; gap: 1rem; min-height: 12rem; }
.mad-prompt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
}
.mad-label { display: block; font-size: 0.7rem; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.mad-text { font-size: 0.9rem; color: var(--color-text); }
.mad-ai-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9rem;
  background: var(--color-accent);
  margin-left: 2px;
  vertical-align: middle;
  animation: pCursorBlink 0.75s step-end infinite;
}
.mad-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.mad-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mad-step.mad-step--in { opacity: 1; transform: translateY(0); }
.mad-step-icon { color: #4ade80; font-size: 0.8rem; margin-top: 1px; flex-shrink: 0; }
.kpi {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
  min-width: 0;
}
.kpi-label { font-size: 0.78rem; color: var(--color-muted); }

/* ── Contact layout ────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}
.contact-info h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}
.contact-icon { font-size: 1rem; color: var(--color-accent); }

/* ── Contact form ──────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-row { display: flex; flex-direction: column; gap: 0.3rem; }
.form-row label { font-size: 0.82rem; font-weight: 600; color: var(--color-muted); }
.contact-form input,
.contact-form textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27,84,153,0.35);
}
/* ── Footer ────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 1.25rem 0;
}
.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.9rem;
  color: var(--color-muted);
  font-size: 0.82rem;
}
.footer-divider {
  display: inline-block;
  width: 1px;
  height: 0.85em;
  background: var(--color-border);
}
.footer-inner > a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: inherit;
}
.footer-inner > a:hover { color: var(--color-primary); }
.footer-legal {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.footer-legal a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: inherit;
}
.footer-legal a:hover {
  color: var(--color-primary);
}
@media (min-width: 501px) and (max-width: 799px) {
  .footer-inner {
    gap: 0.3rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 500px) {
  .footer-inner {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
  }
  .footer-inner > .footer-divider { display: none; }
  .footer-legal { flex-direction: row; justify-content: center; }
}

/* ── Stats strip ───────────────────────────────────────── */
.stats-strip {
  background: var(--color-primary);
  padding: 0;
}
.stats-strip--inline {
  background: transparent;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.stats-strip--inline .stats-strip-inner { border-radius: var(--radius); overflow: hidden; }
.stats-strip--inline .ss-item { background: var(--color-primary); }
.stats-strip-inner {
  display: flex;
  align-items: stretch;
}
.ss-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  border-right: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.ss-item:last-child { border-right: none; }
.ss-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
}
.ss-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Live panel ────────────────────────────────────────── */
.live-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 0.75rem;
}
.live-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.live-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
}
.live-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.live-card--accent { border-top: 3px solid var(--color-accent); }
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  position: relative;
  animation: pulse 1.6s ease-in-out infinite;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulseRing 1.6s ease-out infinite;
}
.live-dot--blue  { background: var(--color-primary); }
.live-dot--plate { background: #FFDE00; }
.live-dot--green { background: #16a34a; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .live-dot::after { animation: none; }
}
.live-label {
  font-size: 0.78rem;
  color: var(--color-muted);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}
.live-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.live-note {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

/* ── Size slider ───────────────────────────────────────── */
.size-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 2.5rem;
}
.size-top {
  margin-bottom: 1.25rem;
}
.size-company-tag {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: 99px;
  letter-spacing: 0.02em;
  transition: background var(--transition);
}
.size-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}
.size-edge-labels {
  display: flex;
  justify-content: space-between;
}
.size-edge-label {
  font-size: 0.78rem;
  color: var(--color-muted);
  font-weight: 500;
}
.size-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: var(--color-surface2);
  outline: none;
  cursor: pointer;
  border: 1px solid var(--color-border);
}
.size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(27,84,153,0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(27,84,153,0.4);
}
.size-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(27,84,153,0.3);
}
.size-slider:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
.size-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(0,153,214,0.45), 0 2px 8px rgba(27,84,153,0.3);
}
.size-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(0,153,214,0.45), 0 2px 8px rgba(27,84,153,0.3);
}

/* Activity bars */
.act-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.act-row {
  display: grid;
  grid-template-columns: 240px 1fr 80px;
  align-items: center;
  gap: 1rem;
}
.act-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}
.act-bar-wrap {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  height: 12px;
  overflow: hidden;
}
.act-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-primary), #3b82f6);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 4px;
}
.act-bar--plate  { background: linear-gradient(90deg, #FFDE00, #FFC300); }
.act-bar--accent { background: linear-gradient(90deg, var(--color-accent), #38bdf8); }
.act-bar--green  { background: linear-gradient(90deg, #16a34a, #4ade80); }
.act-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.size-note {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

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

/* iPad landscape & smaller desktops (≤1024px) */
@media (max-width: 1024px) {
  .site-header { padding: 8px 0; }
  #siteNav .header-cta { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
  .hero { align-items: flex-start; }
  .hero-content {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 2.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
  .hero-showcase { flex-direction: column; gap: 0.75rem; }
  .hero-showcase-col { width: 100%; align-items: center; }
  .hero-showcase-arrow { margin-top: 0; }
  .hv-panel { width: 100%; max-width: 480px; }
  .ha-panel { max-width: 480px; margin: 0 auto; }
  .timeline { flex-direction: column; gap: 0.75rem; }
  .tl-item {
    border-top: none;
    border-left: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.5rem;
    flex-direction: row;
    align-items: flex-start;
  }
}

/* iPad landscape & smaller desktops (≤1024px) */
@media (max-width: 1024px) {
  .live-grid { grid-template-columns: repeat(2, 1fr); }
  .live-panel { padding: 1rem; }
  .live-card { padding: 0.85rem 0.75rem; }
  .live-value { font-size: 1.35rem; letter-spacing: -0.5px; }
}

/* iPad portrait (≤768px) */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  /* Nested inside .header-actions now (alongside the always-visible
     language switcher), so it can no longer rely on flex-basis:100%
     to span the full header width when it wraps onto its own line —
     that would only span .header-actions' own (narrower) box. Floating
     it as an absolutely positioned panel, anchored to .header-inner
     (the full-width ancestor), sidesteps that entirely and reproduces
     the original full-width dropdown. */
  #siteNav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(10, 26, 50, 0.16);
    z-index: 150;
  }
  #siteNav.open { display: flex; }
  #siteNav a { padding: 0.6rem 0.75rem; text-align: left; }
  .hero {
    align-items: flex-start;
  }
  /* .hero-content also matches the plain .container rule below (same
     specificity); scope to .hero .hero-content so this reliably wins
     regardless of source order, instead of being silently overridden. */
  .hero .hero-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .hero h1 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -1px; }
  .hv-panel { max-width: none; }
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .timeline { flex-direction: column; gap: 0.75rem; }
  .tl-item {
    border-top: none;
    border-left: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow);
    padding: 1.3rem 1.5rem;
    flex-direction: row;
    align-items: flex-start;
  }
  .modules { grid-template-columns: repeat(2, 1fr); }
  .section-content { padding-top: 40px; padding-bottom: 48px; }
  .section-lead--full { white-space: normal; }
  .container { padding: 0 1.2rem; }
  .platform-hero h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -0.5px; }
  .gr-journey { flex-direction: column; gap: 1.5rem; }
  .gr-step::after { display: none; }

  /* Module showcase: tabs stacked vertically, panel below */
  .mod-showcase { flex-direction: column; min-height: 0; }
  .mod-list {
    flex-direction: column;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .mod-item { white-space: normal; flex-shrink: unset; border-right: none; }
  .mod-item:last-child { border-bottom: none; }
  .mod-item--active { border-right: none; }
  .mod-panels { width: 100%; }
  .mod-panel { padding: 1.4rem 1.2rem; }
}

/* Large phones (≤600px) */
@media (max-width: 600px) {
  .stats-strip-inner { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ss-item {
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .ss-item:nth-child(even) { border-right: none; }
  .ss-item:last-child { grid-column: 1 / -1; border-bottom: none; }
  .live-grid { grid-template-columns: 1fr 1fr; }
  .act-row { grid-template-columns: 1fr 1fr 60px; }
  .act-label { grid-column: 1 / -1; margin-bottom: -0.5rem; }
  .msd-row { flex-wrap: wrap; gap: 0.2rem 0.75rem; }
  .msd-label { width: 100%; }
  .plate-demo-layout { flex-direction: column; gap: 0.8rem; }
  .plate-demo { max-width: 85%; }
  .header-inner { min-height: 56px; }
  .hero { min-height: calc(55vh - 10px); }
  .gr-journey { flex-direction: column; gap: 1.5rem; }
  .gr-step::after { display: none; }
  #siteNav a { padding: 0.3rem 0.5rem; font-size: 0.78rem; }
  .logo-img { height: 50px; }
  #siteNav .header-cta { margin-top: 1rem; padding: 0.4rem 0.8rem; font-size: 0.8rem; }
  .hero-content { padding-top: 5rem; padding-bottom: 2.5rem; }
  .hero h1 { font-size: 1.9rem; letter-spacing: -0.5px; }
  .kpi { padding: 0.9rem 0.8rem; }
  .modules { grid-template-columns: 1fr; }
  .section-content { padding-top: 44px; padding-bottom: 44px; }
}

/* Small phones (≤400px) */
@media (max-width: 400px) {
  #siteNav a { padding: 0.28rem 0.38rem; font-size: 0.72rem; }
  .kpi { padding: 0.75rem 0.6rem; }
  .live-panel { padding: 0.85rem; }
  .live-card { padding: 0.7rem 0.6rem; }
  .live-value { font-size: 1.15rem; letter-spacing: -0.5px; }
  .stats-strip-inner { grid-template-columns: 1fr; }
  .ss-item { border-right: none !important; }
  .ss-item:last-child { grid-column: auto; }
}

/* ── Home page extra sections ───────────────────────────── */
.home-section { padding-top: 32px; padding-bottom: 48px; }

.sec-hd { margin-bottom: 2rem; position: relative; z-index: 1; }
.sec-hd h2 {
  font-size: clamp(1.7rem, 3.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.sec-hd .section-lead { margin-bottom: 0; }

/* Voor wie */
.vw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.vw-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #1a3a6e 0%, #0a1e40 100%);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
}
.vw-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 18, 38, 0.52) 0%,
    rgba(8, 18, 38, 0.78) 60%,
    rgba(8, 18, 38, 0.90) 100%
  );
  transition: background var(--transition);
  z-index: 0;
}
.vw-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.vw-card:hover::before {
  background: linear-gradient(
    to bottom,
    rgba(8, 18, 38, 0.35) 0%,
    rgba(8, 18, 38, 0.65) 60%,
    rgba(8, 18, 38, 0.82) 100%
  );
}
.vw-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1rem;
  width: 100%;
  justify-content: flex-end;
}
.vw-card h3 { font-size: 0.93rem; font-weight: 700; color: #fff; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.vw-card p  { font-size: 0.875rem; color: rgba(255,255,255,0.88); flex: 1; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.vw-platform-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid var(--color-border, #e8edf4);
}
.vw-platform-cta__lead {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0;
}
@media (max-width: 768px) {
  .vw-platform-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Voertuigmarkten — data-stijl tegels */
.home-markten {
  background: var(--color-surface);
}
.home-markten .sec-hd h2 { color: var(--color-primary); }
.home-markten .sec-hd .section-lead { color: var(--color-muted); }

/* Kaart active/dim states */
.vw-card { transition: opacity 0.3s ease, transform 0.3s ease, outline 0.2s ease; }

/* Probleemoplossing */
.home-problemen { background: #fff; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.faq-item:hover,
.faq-item:active {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.faq-item h3 { font-size: 0.87rem; font-weight: 700; color: var(--color-primary); margin: 0 0 0.4rem; line-height: 1.4; }
.faq-item p { font-size: 0.9rem; color: var(--color-muted); margin: 0; line-height: 1.6; }

/* Hoe het werkt */
.steps-layout { display: flex; flex-direction: column; gap: 1.25rem; }
.step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.75rem;
  gap: 0.9rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.step-item:hover { opacity: 0.85; }
.step-detail {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.step-detail--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.step-detail p { margin: 0; font-size: 0.93rem; color: var(--color-text); flex: 1; line-height: 1.6; }
.step-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: none;
}

/* Actieve connector pulseert */
@keyframes step-conn-pulse {
  0%, 100% { opacity: 1; transform: translateX(0); }
  50%       { opacity: 0.4; transform: translateX(4px); }
}

/* Actief stapnummer: zacht gloeien */
@keyframes step-num-glow {
  0%, 100% { box-shadow: 0 0 0 5px rgba(0,153,214,0.2), 0 2px 10px rgba(0,153,214,0.35); }
  50%       { box-shadow: 0 0 0 8px rgba(0,153,214,0.12), 0 2px 14px rgba(0,153,214,0.5); }
}

/* Responsive — new home sections */
@media (max-width: 1024px) {
  .vw-grid { grid-template-columns: repeat(2, 1fr); }
  .markets { display: grid; grid-template-columns: repeat(2, 1fr); }
  .step-item { flex-direction: row; align-items: flex-start; text-align: left; padding: 0; }
}
@media (max-width: 768px) {
  .home-section { padding-top: 30px; padding-bottom: 40px; }
  .section-content { padding-top: 36px; padding-bottom: 40px; }
}
@media (max-width: 600px) {
  .vw-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .home-section { padding-top: 24px; padding-bottom: 32px; }
  .section-content { padding-top: 20px; padding-bottom: 28px; }
  .step-detail { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .btn { padding: 0.65rem 1.3rem; font-size: 0.9rem; }
  .contact-form input,
  .contact-form textarea { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
  .faq-item { padding: 0.9rem 1rem; }
  .mod-item { padding: 0.9rem 0.8rem; }
  .tl-item { padding: 0.9rem 1rem; }
  .market-item { padding: 1rem 1.1rem; }
}

/* Small phones (≤400px) */
@media (max-width: 400px) {
  .container { padding: 0 1rem; }
  .btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
  .contact-form input,
  .contact-form textarea { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
  .faq-item { padding: 0.75rem 0.85rem; }
  .mod-item { padding: 0.75rem 0.7rem; }
  .tl-item { padding: 0.75rem 0.85rem; }
  .market-item { padding: 0.85rem 0.9rem; }
  .section-content { padding-top: 16px; padding-bottom: 24px; }
  .home-section { padding-top: 16px; padding-bottom: 24px; }
}

/* ── Language switcher ───────────────────────────────────── */
/* Native <details>/<summary>: the dropdown works with zero JS (click
   toggles it natively); app.js only adds an outside-click close on
   top, so a JS failure just means it stays open until the next click
   on the summary instead of auto-closing — never actually broken. */
.lang-switcher {
  position: relative;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-border);
}
.lang-switcher > summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius);
  color: var(--color-primary);
  line-height: 1;
  user-select: none;
  transition: color var(--transition), background var(--transition);
}
.lang-switcher > summary::-webkit-details-marker { display: none; }
.lang-switcher > summary::marker { content: ''; }
.lang-switcher > summary:hover { color: var(--color-primary-h); }
.lang-switcher[open] > summary {
  color: var(--color-primary-h);
  background: rgba(27, 84, 153, 0.08);
}
.lang-toggle-icon { width: 19px; height: 19px; flex-shrink: 0; }
.lang-toggle-code { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2px; }
.lang-toggle-caret { width: 8px; height: 8px; flex-shrink: 0; transition: transform var(--transition); }
.lang-switcher[open] .lang-toggle-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 152px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(10, 26, 50, 0.16);
}
.lang-menu .lang-link {
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.lang-menu .lang-link:hover { background: #F1F5FA; color: var(--color-primary); }
.lang-menu .lang-link.active {
  color: #fff;
  background: var(--color-primary);
  font-weight: 600;
}
@media (max-width: 768px) {
  /* Language stays visible next to the hamburger instead of being
     buried inside it — on mobile, users shouldn't have to open the
     full menu just to find the language switch. Sits to its left,
     hamburger stays the outermost/rightmost icon. */
  .lang-switcher { order: 1; margin-left: 0; padding-left: 0; border-left: none; }
  .nav-toggle { order: 2; }
}
@media (max-width: 400px) {
  .markets { grid-template-columns: 1fr; }
}

/* ── Method page ───────────────────────────────────── */
.method-hero-banner {
  position: relative;
  min-height: 310px; /* matches .home-hero-banner, the reference height */
  background:
    linear-gradient(100deg, rgba(10,20,40,0.82) 0%, rgba(10,20,40,0.55) 100%),
    url('../img/Motive_Insight_Method_and_Platform.jpg?v=20260830a') 37% 30% / cover no-repeat;
  background-color: #101820;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 0 2.5rem;
}
.method-hero-content {
  /* See .home-hero-banner-content for why this is needed: without an
     explicit width, this flex item (auto margins from .container)
     shrink-wraps to its own content instead of filling the hero. */
  width: 100%;
  opacity: 0;
  transform: translateY(12px);
  animation: methodHeroIn 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes methodHeroIn {
  to { opacity: 1; transform: translateY(0); }
}
.method-hero-content h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0 0 0.6rem;
}
@media (max-width: 768px) {
  /* Matches .home-hero-banner h1's mobile size exactly — without this,
     the desktop clamp(2rem,4.5vw,3rem) just sits at its 2rem floor on
     narrow screens instead of shrinking further. */
  .method-hero-content h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -0.5px; }
}
.method-hero-content .hero-subline {
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0;
}
/* Static fallback only, same as .home-hero-banner-content p — see the
   comment there. alignHeroSubToH1() in app.js overwrites this with an
   inline max-width matching this hero's own h1 width. */
@media (min-width: 769px) {
  .method-hero-content .hero-subline {
    max-width: 850px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .method-hero-content { animation: none; opacity: 1; transform: none; }
}

/* Pain points */
.pain-points-section {
  padding: 3rem 0;
}
.pain-points-section .section-heading {
  /* .pain-points-section isn't wrapped in .section-content, so it misses
     that selector's h2 styling (size/weight/color) — repeat it here to
     match the section headings on Platform and Growth. */
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--color-primary);
}
/* Margin breakdown donut — a real, recognizable data visualization
   (not a decorative icon) that backs up the €320K figure: three
   segments light up in sequence with their label/value as the section
   scrolls into view, reusing the same .pain-points-section--in trigger
   the "Full control" cursor demo also uses. Lives inline inside the
   "Margin optimization" card (no border/background of its own — the
   card already provides that), same pattern as the cursor demo living
   inside "Full control". Circle math: r=48, circumference≈301.6;
   segments are Assortment mix 140K (43.75%), Pricing 120K (37.5%),
   Priority 60K (18.75%) of the 320K total. */
.pain-donut-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 1rem;
}
.pain-donut-chart {
  position: relative;
  width: 86px;
  height: 86px;
  flex-shrink: 0;
}
.pain-donut-chart svg { width: 100%; height: 100%; }
.pain-donut-track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 11;
}
.pain-donut-seg {
  fill: none;
  stroke-width: 11;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  opacity: 0;
}
.pain-donut-seg--1 { --seg-color: #0099D6; stroke: var(--seg-color); stroke-dasharray: 131.9 169.7; stroke-dashoffset: 0; }
.pain-donut-seg--2 { --seg-color: #22c55e; stroke: var(--seg-color); stroke-dasharray: 113.1 188.5; stroke-dashoffset: -131.9; }
.pain-donut-seg--3 { --seg-color: #d97706; stroke: var(--seg-color); stroke-dasharray: 56.5 245.0; stroke-dashoffset: -245.0; }
.pain-points-section--in .pain-donut-seg {
  animation: painDonutLight 0.7s ease-out forwards;
}
.pain-points-section--in .pain-donut-seg--1 { animation-delay: 0.1s; }
.pain-points-section--in .pain-donut-seg--2 { animation-delay: 0.5s; }
.pain-points-section--in .pain-donut-seg--3 { animation-delay: 0.9s; }
@keyframes painDonutLight {
  from { opacity: 0; filter: drop-shadow(0 0 0 transparent); }
  55%  { opacity: 1; filter: drop-shadow(0 0 7px var(--seg-color)); }
  to   { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
}
.pain-donut-total {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.pain-donut-total-value {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}
.pain-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pain-donut-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.pain-donut-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pain-donut-item--1::before { background: #0099D6; }
.pain-donut-item--2::before { background: #22c55e; }
.pain-donut-item--3::before { background: #d97706; }
.pain-donut-item b { color: var(--color-primary); }
.pain-points-section--in .pain-donut-item { opacity: 1; transform: translateX(0); }
.pain-points-section--in .pain-donut-item--1 { transition-delay: 0.1s; }
.pain-points-section--in .pain-donut-item--2 { transition-delay: 0.5s; }
.pain-points-section--in .pain-donut-item--3 { transition-delay: 0.9s; }
@media (max-width: 500px) {
  .pain-donut-inline { justify-content: center; text-align: center; }
  .pain-donut-item { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pain-donut-seg, .pain-donut-item { animation: none; transition: none; opacity: 1; transform: none; }
}

/* Same flex layout as .gr-journey on Growth (not a grid) — three blocks
   that shrink together in one row down to the same 1024px breakpoint
   .gr-journey stacks at, instead of the auto-fit grid this used to be,
   which wrapped to an uneven 2-column layout with an orphaned third
   block anywhere between ~700-1050px wide. */
.pain-points-row {
  display: flex;
  gap: 2rem;
  /* stretch: all three cards match the tallest one (in practice the
     first, "Margin optimization") so the row reads as one even set
     instead of three different-height blocks. */
  align-items: stretch;
}
@media (max-width: 1024px) {
  .pain-points-row { flex-direction: column; gap: 1.5rem; }
}
.pain-point-block {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1),
              border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.pain-points-section--in .pain-point-block {
  opacity: 1;
  transform: translateY(0);
}
.pain-point-block:nth-child(2) { transition-delay: 0.08s; }
.pain-point-block:nth-child(3) { transition-delay: 0.16s; }
.pain-point-block:hover {
  border-color: var(--color-accent);
  background: var(--color-surface2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.pain-points-section--in .pain-point-block:hover { transition-delay: 0s; }
.pain-point-content h3 {
  /* Matches .gr-step-title on Growth (1.1rem/700), so the two pages'
     card text reads at the same scale. */
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.pain-point-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.pain-point-content .stat-highlight {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
  margin: 0 0 0.35rem;
}
.pain-point-content .description {
  /* Matches .gr-step-desc on Growth (0.85rem). */
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}
/* Single icon per card, top-right next to the h3, instead of a full
   mockup — keeps each block to one visual beat instead of a tall
   bespoke diagram. Swap the <svg> for an <img> here later if a real
   photo/illustration replaces it; the 32x32 box holds either. */
.pain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-accent);
}
.pain-icon svg { width: 100%; height: 100%; }
/* Recolor the flat-black portfolio.png to the same accent color as the
   other pain-icons via a mask instead of an <img> — the PNG becomes a
   stencil over a solid-color fill, so it re-tints automatically if
   --color-accent ever changes, the same way the SVG icons already do
   via currentColor. */
.pain-icon--portfolio {
  background-color: var(--color-accent);
  -webkit-mask-image: url('../img/portfolio.png');
  mask-image: url('../img/portfolio.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* "Full control" demo: a fake cursor visits each row in turn and
   flips its toggle, showing what "you choose what data to show" means
   instead of just stating it. Auto-plays on loop once the section
   scrolls into view (same .pain-points-section--in trigger the other
   pain-point elements use); the 92-100% window on every keyframe set
   fades the cursor out and snaps rows back to their starting state at
   the same moment, so the loop restart is masked instead of jumping. */
.ctrl-demo {
  position: relative;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ctrl-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.72rem;
  color: var(--color-text);
}
.ctrl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}
.ctrl-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctrl-toggle {
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: var(--color-border);
  position: relative;
  flex-shrink: 0;
}
.ctrl-toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.ctrl-cursor {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 15px;
  height: 15px;
  color: var(--color-primary);
  filter: drop-shadow(0 1px 2px rgba(10,20,40,0.35));
  opacity: 0;
}
.pain-points-section--in .ctrl-cursor { animation: ctrlCursorMove 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="1"] { animation: ctrlRowOn1 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="2"] { animation: ctrlRowOff2 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="3"] { animation: ctrlRowOn3 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="1"] .ctrl-toggle { animation: ctrlToggleOn1 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="2"] .ctrl-toggle { animation: ctrlToggleOff2 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="3"] .ctrl-toggle { animation: ctrlToggleOn3 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="1"] .ctrl-toggle-dot { animation: ctrlDotOn1 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="2"] .ctrl-toggle-dot { animation: ctrlDotOff2 6s ease-in-out infinite; }
.pain-points-section--in .ctrl-row[data-row="3"] .ctrl-toggle-dot { animation: ctrlDotOn3 6s ease-in-out infinite; }

@keyframes ctrlCursorMove {
  0%   { opacity: 0; top: 8px; transform: scale(1); }
  4%   { opacity: 1; top: 8px; transform: scale(1); }
  8%   { top: 8px;  transform: scale(0.8); }
  11%  { top: 8px;  transform: scale(1); }
  33%  { top: 44px; transform: scale(1); }
  37%  { top: 44px; transform: scale(0.8); }
  40%  { top: 44px; transform: scale(1); }
  61%  { top: 80px; transform: scale(1); }
  65%  { top: 80px; transform: scale(0.8); }
  68%  { top: 80px; transform: scale(1); }
  92%  { top: 80px; opacity: 1; }
  100% { top: 80px; opacity: 0; }
}
@keyframes ctrlRowOn1 {
  0%, 9%   { border-color: var(--color-border); }
  11%, 94% { border-color: var(--color-accent); }
  100%     { border-color: var(--color-border); }
}
@keyframes ctrlRowOff2 {
  0%, 37%  { border-color: var(--color-accent); opacity: 1; }
  39%, 94% { border-color: var(--color-border); opacity: 0.55; }
  100%     { border-color: var(--color-accent); opacity: 1; }
}
@keyframes ctrlRowOn3 {
  0%, 65%  { border-color: var(--color-border); }
  67%, 94% { border-color: var(--color-accent); }
  100%     { border-color: var(--color-border); }
}
@keyframes ctrlToggleOn1 {
  0%, 9%   { background: var(--color-border); }
  11%, 94% { background: var(--color-accent); }
  100%     { background: var(--color-border); }
}
@keyframes ctrlToggleOff2 {
  0%, 37%  { background: var(--color-accent); }
  39%, 94% { background: var(--color-border); }
  100%     { background: var(--color-accent); }
}
@keyframes ctrlToggleOn3 {
  0%, 65%  { background: var(--color-border); }
  67%, 94% { background: var(--color-accent); }
  100%     { background: var(--color-border); }
}
@keyframes ctrlDotOn1 {
  0%, 9%   { transform: translateX(0); }
  11%, 94% { transform: translateX(11px); }
  100%     { transform: translateX(0); }
}
@keyframes ctrlDotOff2 {
  0%, 37%  { transform: translateX(11px); }
  39%, 94% { transform: translateX(0); }
  100%     { transform: translateX(11px); }
}
@keyframes ctrlDotOn3 {
  0%, 65%  { transform: translateX(0); }
  67%, 94% { transform: translateX(11px); }
  100%     { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ctrl-cursor { display: none; }
  .ctrl-row, .ctrl-toggle, .ctrl-toggle-dot { animation: none; }
  .ctrl-row[data-row="1"], .ctrl-row[data-row="3"] { border-color: var(--color-accent); }
  .ctrl-row[data-row="1"] .ctrl-toggle, .ctrl-row[data-row="3"] .ctrl-toggle { background: var(--color-accent); }
  .ctrl-row[data-row="1"] .ctrl-toggle-dot, .ctrl-row[data-row="3"] .ctrl-toggle-dot { transform: translateX(11px); }
}

/* "Real visibility" demo: two speedometers (one brand, one part) whose
   needles drift up and down over a red→orange→green scale, with the
   number tracking the needle live — a continuous, real-time pulse
   rather than a one-off count-up, driven by startPainGauges() in
   app.js via requestAnimationFrame (a sine wave per gauge, each with
   its own period/phase so the two never move in lockstep). CSS only
   supplies the static scale and needle base transform; JS sets the
   rotation and counter text directly on every frame.
   Needle angle formula: rotate = 1.8 * value - 90 (value 0-100, -90deg
   points left/red, 0deg points straight up/50, 90deg points right/green). */
.pain-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.pain-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
}
.pain-gauge svg { width: 100%; height: auto; overflow: visible; }
.pain-gauge-seg {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
}
.pain-gauge-seg--red { stroke: #ef4444; }
.pain-gauge-seg--orange { stroke: #f59e0b; }
.pain-gauge-seg--green { stroke: #22c55e; }
.pain-gauge-needle {
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: transform 0.1s linear;
}
.pain-gauge-hub { fill: var(--color-primary); }
.pain-gauge-readout {
  margin-top: 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pain-gauge-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}
.pain-gauge-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media (prefers-reduced-motion: reduce) {
  .pain-point-block, .pain-point-block:hover {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* What we fix */
.what-we-fix-section {
  padding: 3rem 0;
  /* surface2, not surface: this section sits between two plain white
     bands (pain-points above, credibility below), and surface (#F2F7FC)
     is close enough to white to disappear between them. surface2
     (#E8F0F8) is the same palette's next step down, already used for
     #growth's background, so it reads as an intentional band. */
  background: var(--color-surface2);
}
.what-we-fix-section h2 {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 2rem;
  color: var(--color-text);
}
.fix-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.fix-point {
  text-align: center;
  padding: 1.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.what-we-fix-section--in .fix-point {
  opacity: 1;
  transform: translateY(0);
}
.fix-points .fix-point:nth-child(2) { transition-delay: 0.08s; }
.fix-points .fix-point:nth-child(3) { transition-delay: 0.16s; }
.fix-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  color: var(--color-accent);
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.fix-icon svg { width: 100%; height: 100%; }
.what-we-fix-section--in .fix-point .fix-icon { transform: scale(1); }
.fix-points .fix-point:nth-child(1) .fix-icon { transition-delay: 0.025s; }
.fix-points .fix-point:nth-child(2) .fix-icon { transition-delay: 0.105s; }
.fix-points .fix-point:nth-child(3) .fix-icon { transition-delay: 0.185s; }
.fix-point h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}
.fix-point p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .fix-point, .fix-icon { transition: none; opacity: 1; transform: none; }
}

/* Had no padding at all, so its heading sat flush against .what-we-fix-section's
   bottom edge with only that section's own 3rem to separate them — reads as
   cramped since the heading's own top margin was reset to 0 by .section-heading.
   Match the padding already used by its sibling sections (pain-points-section,
   what-we-fix-section) above. */
.method-credibility-section {
  padding: 3rem 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.stats-grid--in .stat-card {
  opacity: 1;
  transform: translateY(0);
}
.stats-grid .stat-card:nth-child(2) { transition-delay: 0.1s; }
.stats-grid .stat-card:nth-child(3) { transition-delay: 0.2s; }
.stats-grid .stat-card:nth-child(4) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .stat-card { transition: none; opacity: 1; transform: none; }
}

/* CTA */
.method-cta-section {
  padding: 2rem 0;
  text-align: center;
}

@media (max-width: 600px) {
}

/* ── Growth page ───────────────────────────────────── */
.growth-hero {
  background:
    linear-gradient(100deg, rgba(10,20,40,0.82) 0%, rgba(10,20,40,0.55) 100%),
    url('../img/sales_growth-hero.jpg?v=20260825b') 50% center / cover no-repeat;
  background-color: #101820;
  padding: 2.5rem 0 2.2rem;
  min-height: 310px; /* matches .home-hero-banner, the reference height */
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
}
/* See .home-hero-banner-content for why this is needed: without an
   explicit width, .container's auto margins make it shrink-wrap to
   its own content inside this flex hero instead of filling it. */
.growth-hero > .container { width: 100%; }
.gr-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}
.gr-eyebrow--onlight { color: var(--color-accent-text); }
.gr-eyebrow--white { color: #bcdcff; }
.growth-hero h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  max-width: 100%;
  margin-bottom: 1rem;
}
/* Same approach as .home-hero-banner h1: keep it on one line on
   desktop where it comfortably fits, but let it wrap freely below
   that instead of truncating with an ellipsis — a cut-off headline is
   worse than a two-line one. */
@media (min-width: 769px) {
  .growth-hero h2 { white-space: nowrap; }
}
@media (max-width: 768px) {
  /* Matches .home-hero-banner h1's mobile size exactly — without this,
     the desktop clamp(2rem,4.5vw,3rem) just sits at its 2rem floor on
     narrow screens instead of shrinking further, which is what let it
     overflow a narrow container in the first place. */
  .growth-hero h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -0.5px; }
  /* Same badge-overlap accommodation as .home-hero-banner h1 — same
     font-size at every breakpoint below, so the same padding-right
     values keep the heading clear of the .hero-badge tile. See the
     .home-hero-banner h1 rules for the full reasoning. */
  .growth-hero h2 { padding-right: clamp(165px, calc(100vw - 228px), 200px); }
}
@media (min-width: 431px) and (max-width: 587px) {
  .growth-hero h2 { padding-right: clamp(200px, calc(54.2vw - 32.56px), 286px); }
}
@media (min-width: 588px) and (max-width: 768px) {
  .growth-hero h2 { padding-right: clamp(287px, calc(100vw - 301px), 467px); }
}
@media (max-width: 475px) {
  .growth-hero h2 { padding-right: clamp(90px, calc(100vw - 222px), 210px); }
}
@media (min-width: 431px) and (max-width: 475px) {
  .growth-hero h2 { padding-right: clamp(200px, calc(55.6vw - 39.1px), 234px); }
}
.growth-hero > .container > p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  max-width: 100%;
  margin-bottom: 2.2rem;
}
/* Static fallback only, same as .home-hero-banner-content p — see the
   comment there. alignHeroSubToH1() in app.js overwrites this with an
   inline max-width matching this hero's own h2 width. */
@media (min-width: 769px) {
  .growth-hero > .container > p {
    max-width: 850px;
  }
}
/* Growth's post-hero content used to be one flat surface2 wash for the
   whole page (see the removed #growth background rule). Split into
   per-topic full-width bands with alternating backgrounds instead, matching
   the white/surface2/white rhythm already used on Home and Method. */
.growth-section--scenarios { background: var(--color-surface2); }

.gr-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.gr-scenario-card {
  background: linear-gradient(160deg, #1a3a6e 0%, #0a1e40 100%);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 260px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.gr-scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.gr-scenario-card--highlight {
  background: linear-gradient(160deg, var(--color-primary) 0%, #0e3470 100%);
  border: 1px dashed rgba(255,255,255,0.35);
}
.gr-scenario-grid .gr-scenario-card:nth-child(1) {
  background:
    linear-gradient(135deg, rgba(10,20,40,0.75) 0%, rgba(27,84,153,0.65) 100%),
    url('/img/ranking.jpg') center/cover no-repeat;
}
.gr-scenario-grid .gr-scenario-card:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(10,20,40,0.75) 0%, rgba(27,84,153,0.65) 100%),
    url('/img/parts_in_magazine.jpg') center/cover no-repeat;
}
.gr-scenario-grid .gr-scenario-card:nth-child(3) {
  background:
    linear-gradient(135deg, rgba(10,20,40,0.75) 0%, rgba(27,84,153,0.65) 100%),
    url('/img/day_stats.jpg') center/cover no-repeat;
}
.gr-scenario-grid .gr-scenario-card:nth-child(3) .gr-scenario-action {
  background: rgba(74, 222, 128, 0.25);
  color: #4ade80;
}
.gr-scenario-grid .gr-scenario-card:nth-child(3) h3 {
  color: #fff;
}
.gr-scenario-num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}
.gr-scenario-card h3 { font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.3; margin: 0; }
.gr-scenario-card p { font-size: 0.92rem; color: rgba(255,255,255,0.82); line-height: 1.55; margin: 0; }
.gr-scenario-action {
  margin-top: auto;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4em;
  background: rgba(0,153,214,0.16);
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.8rem;
  border-radius: 20px;
}
.gr-scenario-card--highlight .gr-scenario-action { background: rgba(74,222,128,0.18); color: #4ade80; }

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

.gr-possible {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0e3470 100%);
  border-radius: 20px;
  padding: 2.75rem 3rem;
  color: #fff;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
}
.gr-possible h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 0.9rem; line-height: 1.3; color: #fff; }
.gr-possible p { font-size: 0.98rem; line-height: 1.65; color: rgba(255,255,255,0.95); margin: 0; }
.gr-possible .gr-eyebrow--white { color: rgba(255,255,255,0.9); }
.gr-scan-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.gr-scan-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.gr-scan-icon svg { width: 18px; height: 18px; }
.gr-scan-text strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.gr-scan-text span { font-size: 0.82rem; color: rgba(255,255,255,0.75); }

@media (max-width: 1024px) {
  .gr-scenario-grid { grid-template-columns: 1fr; }
  .gr-possible { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hv-pillars { flex-wrap: wrap; row-gap: 1.25rem; }
  .gr-possible { padding: 2rem; }
}

/* ── Market urgency section ────────────────────────────────── */
.home-urgency {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, #E8F0F7 0%, #D8E5F0 50%);
  padding: 3rem 0 3rem 0;
  margin-top: 0;
  z-index: 1;
}
.home-urgency .sec-hd h2 {
  color: var(--color-primary);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.home-urgency .sec-hd .section-lead {
  color: var(--color-muted);
  font-size: 1.05rem;
}

.home-voor-wie {
  background: #fff;
}

/* ── KPI stat cards grid ───────────────────────────────────── */
.urg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.urg-kpi-card {
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), scale var(--transition);
  cursor: pointer;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  background: linear-gradient(135deg, #154280 0%, #0f3a6b 100%);
}

.urg-kpi-card:hover {
  transform: translateY(-4px);
  scale: 1.03;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  background: linear-gradient(135deg, #0f3a6b 0%, #0a2549 100%);
}

.urg-kpi-stat {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: font-size var(--transition), border-color var(--transition);
}

.urg-kpi-card:hover .urg-kpi-stat {
  font-size: 2.4rem;
  border-bottom-color: var(--color-accent);
}

@keyframes growthPulse {
  0% {
    transform: translateY(8px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes growthFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.urg-kpi-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
  transition: color var(--transition);
}

.urg-kpi-card:hover .urg-kpi-label {
  color: #fff;
}

.urg-kpi-details {
  margin-top: 0;
}

.urg-kpi-toggle {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border: none;
  background: none;
  border-radius: 4px;
  transition: all var(--transition);
}

.urg-kpi-toggle:hover {
  color: #fff;
  background: rgba(0,153,214,0.25);
  gap: 0.5rem;
}

.urg-kpi-details[open] .urg-kpi-toggle::after {
  content: "▼";
  display: inline;
}

.urg-kpi-details:not([open]) .urg-kpi-toggle::after {
  content: "▶";
  display: inline;
  margin-left: 0.2rem;
}

.urg-kpi-details p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  margin: 0.75rem 0 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .urg-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .urg-kpi-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}