/* ============================================================
   ISATIS, Homepage local styles
   Wordt via NOVAMIRA-CUSTOM-CSS blocks in Elementor per widget/container geplakt.
   Niet bedoeld als globale stylesheet, alleen referentie tijdens dev.
   ============================================================ */

@import url('./globals.css');

* { box-sizing: border-box; }
body { margin: 0; background: var(--e-global-color-bg-soft); color: var(--e-global-color-text); font-family: 'Inter', sans-serif; }

/* ---------- Container utilities (= Elementor flex/grid) ---------- */
.el-section { display: flex; flex-direction: column; width: 100%; }
.el-row { display: flex; flex-direction: row; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.el-col { display: flex; flex-direction: column; }
.el-grid { display: grid; gap: 24px; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

@media (max-width: 1024px) {
  .el-row { flex-direction: column; gap: 32px; }
}

/* ---------- HERO, fullscreen slideshow (694px = 650 + 44px top-bar overlay) ---------- */
.hero {
  position: relative; width: 100%; height: 694px; min-height: 694px;
  overflow: hidden; isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide--1 { background-image: url('../photos/team/hero-developers-monitors.jpg'); }
.hero__slide--2 { background-image: url('../photos/team/hero-glass-office-meeting.jpg'); }
.hero__slide--3 { background-image: url('../photos/team/hero-two-developers-office.jpg'); }

/* Dark vignette, only from the left to ensure white text leesbaarheid, foto blijft dominant */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,26,46,0.62) 0%, rgba(15,26,46,0.32) 45%, rgba(15,26,46,0.10) 80%, rgba(15,26,46,0) 100%),
    linear-gradient(180deg, rgba(15,26,46,0.35) 0%, rgba(15,26,46,0.00) 30%, rgba(15,26,46,0.00) 70%, rgba(15,26,46,0.35) 100%);
}

.hero__inner {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0 20px;
  max-width: 1400px; margin-left: auto; margin-right: auto;
}
.hero__text-stack {
  position: relative; width: 100%;
  display: grid; grid-template-areas: "stack";
  max-width: 640px;
}
.hero__col-text {
  grid-area: stack;
  display: flex; flex-direction: column; gap: 28px;
  align-items: flex-start;
  /* elke slide verticaal centreren binnen de (op de hoogste slide gebaseerde)
     stapel, zodat de zichtbare slide gecentreerd blijft ongeacht regelaantal/taal */
  justify-content: center;
  width: 100%; text-align: left;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.hero__col-text.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ── Eenmalige inkom-animatie: kop → subtekst → CTA's faden gefaseerd omhoog.
     .is-entering staat in de HTML (dus actief vanaf de eerste paint) en wordt
     door de slideshow-JS na ~1,2 s verwijderd, zodat latere slide-wissels
     alleen de bestaande crossfade doen. ── */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero.is-entering .hero__col-text.is-active .hero__heading { animation: heroRise .6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero.is-entering .hero__col-text.is-active .hero__sub     { animation: heroRise .6s cubic-bezier(0.22, 1, 0.36, 1) .16s both; }
.hero.is-entering .hero__col-text.is-active .hero__cta-row { animation: heroRise .6s cubic-bezier(0.22, 1, 0.36, 1) .32s both; }
@media (prefers-reduced-motion: reduce) {
  .hero.is-entering .hero__col-text.is-active .hero__heading,
  .hero.is-entering .hero__col-text.is-active .hero__sub,
  .hero.is-entering .hero__col-text.is-active .hero__cta-row { animation: none; }
}

.hero__heading { margin: 0; }
.hero__sub { margin: 0; max-width: 560px; }

/* Hero text → wit; mono label blijft cyaan */
.hero__heading,
.hero .t-heading-1 { color: #fff; }
/* iPad/tablet: hero-titel wat groter (3 regels passen ruim; langste regel is 14 mono-tekens) */
@media (max-width: 1024px) {
  .hero__heading,
  .hero .t-heading-1 { font-size: clamp(44px, 5.8vw, 52px); }
}
/* Telefoon: kop kleiner zodat de langste regel (mono, bv. "Built on trust.") op
   1 regel past — elke slide blijft zo 3 regels i.p.v. 4. */
@media (max-width: 640px) {
  .hero__heading,
  .hero .t-heading-1 { font-size: clamp(28px, 8vw, 38px); }
}
.hero__sub { color: rgba(255,255,255,0.86); }

.hero__heading .accent { color: #fff; position: relative; display: inline-block; }
/* Gele marker-stripe achter accent woord, Sirgo stijl */
.hero__heading .accent::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em;
  height: 0.27em; background: var(--e-global-color-accent); opacity: 0.85;
  z-index: -1; border-radius: 4px; transform: skew(-6deg);
}

.hero__cta-row { display: flex; gap: 24px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
/* Ghost button → wit op donker hero, lichtblauw op hover */
.hero .btn--ghost { color: rgba(255,255,255,0.85); }
.hero .btn--ghost:hover { color: var(--e-global-color-primary); }

/* Slide indicator dots, left-align met header logo + hero content (48px van viewport-rand) */
.hero__dots-wrap {
  position: absolute; bottom: 32px; left: 0; right: 0; z-index: 3;
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  pointer-events: none;
}
.hero__dots {
  display: flex; gap: 8px;
  pointer-events: auto;
}
.hero__dot {
  width: 36px; height: 3px; border-radius: 2px; border: none; padding: 0;
  background: rgba(255,255,255,0.35); cursor: pointer; transition: background .2s;
}
.hero__dot.is-active { background: #fff; }
@media (hover: none) and (pointer: coarse) {
  .hero__dot { position: relative; }
  .hero__dot::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* Subtle decorative cyan accent, top-right */
.hero::before {
  content: ''; position: absolute; top: -120px; right: -120px; z-index: 2;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,196,234,0.18) 0%, rgba(56,196,234,0) 70%);
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Beeld vult 80% van het scherm op telefoon; svh houdt rekening met de browser-balk */
  .hero { height: 80vh; min-height: 80vh; height: 80svh; min-height: 80svh; }
  .hero__inner { padding: 110px 20px 40px; }
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(15,26,46,0.65) 0%, rgba(15,26,46,0.40) 50%, rgba(15,26,46,0.55) 100%);
  }
}

/* ---------- Button primitives ----------
   Rechthoekige stijl met afgeronde hoeken, primary heeft een witte
   inset-square voor het pijl-icoon (Isatis brand style). */
.btn { display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 5px 5px 20px; border-radius: 12px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; border: 1.5px solid transparent;
  transition: background .2s ease; }

.btn--primary { background: var(--e-global-color-primary); color: #fff; }
/* Hover: donkerder cyaan, geen lift, geen shadow */
.btn--primary:hover { background: #1FA7CC; }

.btn--ghost {
  background: none; border: none; padding: 4px 0;
  color: var(--e-global-color-text); gap: 8px; font-weight: 500;
  align-items: center; position: relative;
  transition: color .2s ease;
}
.btn--ghost::after {
  content: ''; position: absolute; bottom: -6px; left: 0;
  width: 0; height: 1px; background: currentColor;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.btn--ghost:hover { color: var(--e-global-color-primary); }
.btn--ghost:hover::after { width: 100%; }

/* Accent variant, geel met donker tekst — gebruikt in about-section over donkere foto */
.btn--accent { background: var(--e-global-color-accent); color: var(--e-global-color-text); }
.btn--accent:hover { background: #FFD93D; }
.btn--accent .btn__icon {
  width: 32px; height: 32px; padding: 8px; box-sizing: border-box;
  background: var(--e-global-color-text); color: var(--e-global-color-accent);
  border-radius: 8px; flex-shrink: 0;
}
.btn--accent .btn__icon path { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn--accent:hover .btn__icon path { transform: translateX(4px); }

/* Default icon size (used in ghost / inline contexts) */
.btn__icon { width: 16px; height: 16px; }

/* Primary button → witte inset square met cyaan pijl */
.btn--primary .btn__icon {
  width: 32px; height: 32px; padding: 8px; box-sizing: border-box;
  background: #fff; color: var(--e-global-color-primary);
  border-radius: 8px; flex-shrink: 0;
}

/* Pijl-animatie binnen de witte square, zakelijk met lichte bounce */
.btn--primary .btn__icon path {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.btn--primary:hover .btn__icon path {
  transform: translateX(4px);
}

/* ---------- Section size overrides (per section context) ----------
   Verticale sectie-padding wordt centraal geregeld via var(--section-pad-y)
   (60px op tablet/telefoon, vloeiend naar 80px op desktop). Per-context
   overrides zijn daarom niet meer nodig. */

/* ---------- Partners, hex honingraat met flip-animatie ----------
   ELEMENTOR: CUSTOM CSS REQUIRED, clip-path + 3D transforms zitten niet
   native in Elementor. Hele section's hex-veld plakken in HTML widget
   met deze CSS in Section → Advanced → Custom CSS. */
.clients { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg);
  border-top: 1px solid var(--e-global-color-border); }
.clients__row {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
  align-items: center; gap: 64px; flex-direction: row-reverse;
}
.clients__text { flex: 0 0 38%; max-width: 460px; gap: 14px; }
.clients__text h2, .clients__text p { margin: 0; }
.clients__hexfield {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0;
}

/* Hex-cluster: absolute positioned hexagons met uniforme 10px gap in alle richtingen.
   Bij hex-width 128px (20% van 640px max) is center-to-center afstand 138px (= W+gap),
   same-row step 21.5% van W en vertical step 138 * √3/2 ≈ 119.5px.
   Cluster vertical span = 387px → aspect-ratio 640/387 ≈ 1.654 (33/20). */
.hex-grid {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 33 / 20;
  margin: 0;
}
/* hex-row blijft als wrapper element in DOM maar zonder layout, alle hexes positioneren zich los */
.hex-row { display: contents; }

/* SVG hex met afgeronde hoeken (15px), border + flip + shadow gaan samen.
   Bij flippen rotate de hele face inclusief de SVG (= border + shape draait mee). */
.hex {
  position: absolute;
  transform: translate(-50%, -50%); /* anchor op center, zodat left/top het centrum bepaalt */
  aspect-ratio: 110 / 127; /* preserveert pointy-top hex verhouding */
  perspective: 800px;
  /* Border-kleur start als transparent, smooth fade naar accent op hover */
  color: transparent;
  transition: color .45s ease;
}
.hex:hover,
.hex:focus-visible { color: var(--hex-color, transparent); }

/* Size varianten — buiten clients behouden voor andere widgets. */
.hex--xs { width: 14%; }
.hex--sm { width: 18.5%; }
.hex--md { width: 22.2%; }
.hex--lg { width: 26%; }
.hex--xl { width: 27%; }

/* Binnen .clients: alle hexes even groot — sm/md/lg classes worden overruled. */
.clients .hex,
.clients .hex--sm,
.clients .hex--md,
.clients .hex--lg { width: 20%; }

/* Position klassen, center-coords als % van vierkant container.
   Asymmetrische honingraat-tiling met 4 visuele rijen (1-4-3-4 = 12 hexes).
   Hex breedte 20% → hex hoogte 23.1% (ratio 1.155).
   Rij-verticale step = 18% (≈ hex-hoogte * 0.78, kleine gap).
   Rij-horizontale step = 21% (1% gap tussen hexes).
   Offset-rijen verschoven met 10.5% (= step/2). */

/* 3 rijen in 33:20 container met uniforme 10px gap.
   Horizontale center-step in rij = 21.5% van W (= 138px = 128+10).
   Verticale center-step tussen rijen = 31% van H (= 119.5px = 138 * √3/2).
   Rij C is offset met (W+g)/2 = 10.78% van W. */

/* Rij B (geen offset): 4 hexes bovenaan */
.hex--p2  { left: 10%;     top: 19%; }
.hex--p3  { left: 31.5%;   top: 19%; }
.hex--p4  { left: 53%;     top: 19%; }
.hex--p5  { left: 74.5%;   top: 19%; }

/* Rij C (offset 10.8%): 4 hexes — p1 rechts vult de inham */
.hex--p6  { left: 20.8%;   top: 50%; }
.hex--p7  { left: 42.3%;   top: 50%; }
.hex--p8  { left: 63.8%;   top: 50%; }
.hex--p1  { left: 85.3%;   top: 50%; }

/* Rij D (geen offset): 4 hexes onderaan */
.hex--p9  { left: 10%;     top: 81%; }
.hex--p10 { left: 31.5%;   top: 81%; }
.hex--p11 { left: 53%;     top: 81%; }
.hex--p12 { left: 74.5%;   top: 81%; }

/* Accent kleur per hex, alleen zichtbaar op hover via .hex { color } */
.hex--cyan   { --hex-color: var(--e-global-color-primary); }   /* cyaan #38C4EA */
.hex--blue   { --hex-color: var(--e-global-color-secondary); } /* donkerblauw #0D59D1 */
.hex--yellow { --hex-color: var(--e-global-color-accent); }    /* geel #EEC611 */
.hex--red    { --hex-color: var(--e-global-color-alert); }     /* rood #FE5B5B */

.hex__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
.hex.is-flipped .hex__inner { transform: rotateY(180deg); }

.hex__face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Lichte subtiele shadow */
  filter: drop-shadow(0 3px 5px rgba(15, 26, 46, 0.10));
}
.hex__face--back { transform: rotateY(180deg); }

/* SVG vult de face, overflow:visible zorgt dat de stroke aan alle kanten gelijk rendert
   ook bij de verticale linker/rechter randen (zonder clip-issue). */
.hex__shape {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.hex__face img {
  position: relative; z-index: 1;
  max-width: 62%; max-height: 50%;
  object-fit: contain; display: block;
}

/* ---------- AI ENGINEERING SECTION, lichte grijze achtergrond, workflow visual ---------- */
.ai-engineering {
  position: relative;
  padding: var(--section-pad-y) 0;
  background: var(--e-global-color-bg-soft);  /* zacht grijs #F7F8FB */
  color: var(--e-global-color-text);
  overflow: hidden;
  isolation: isolate;
}

/* Decoratieve hex-achtergrond uitgeschakeld op lichte bg */
.ai-engineering__bg-hexes { display: none; }

/* Hoofd row: text links + visual rechts, uitgelijnd met trusted partners (24px padding) */
.ai-engineering__row {
  position: relative; z-index: 1;
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 64px;
  flex-wrap: wrap;
}

.ai-engineering__text {
  flex: 1 1 460px; min-width: 0;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 560px;
}

.ai-engineering__heading {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.08; letter-spacing: -0.02em;
  color: var(--e-global-color-text);
  margin: 0;
}
/* Yellow marker onder accent woord (hero stijl), werkt ook op light bg */
.ai-engineering__heading .accent {
  color: var(--e-global-color-text); position: relative; display: inline-block;
}
.ai-engineering__heading .accent::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em;
  height: 0.27em;
  background: var(--e-global-color-accent);
  opacity: 0.85; z-index: -1;
  border-radius: 4px; transform: skew(-6deg);
}

.ai-engineering__body {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 16px; line-height: 1.65;
  color: var(--e-global-color-text-dim);
  margin: 0;
}
/* Lead paragraph, net iets groter, sterker, direct na heading */
.ai-engineering__body--lead {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--e-global-color-text);
  font-weight: 500;
}

/* Feature list, 2-koloms grid met check icons, vervangt de oude stats */
.ai-engineering__features {
  list-style: none;
  padding: 18px 0;
  margin: 4px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  border-top: 1px solid var(--e-global-color-border);
  border-bottom: 1px solid var(--e-global-color-border);
}
.ai-engineering__features li {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.4;
  color: var(--e-global-color-text);
  font-weight: 500;
}
.ai-engineering__features li svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--e-global-color-primary);
}

.ai-engineering__cta-row {
  display: flex; gap: 24px; margin-top: 8px;
  flex-wrap: wrap; align-items: center;
}
/* Ghost button op light bg — geen override nodig, base stijl volstaat */

/* AI Workflow visual, n8n-stijl op lichte achtergrond */
.ai-engineering__visual {
  flex: 1 1 440px; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

.ai-network--workflow {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}

/* Kladpapier-raster achtergrond, fijne grid lijnen die naar de randen wegfaden */
.ai-network--workflow::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(15, 26, 46, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 26, 46, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, #000 40%, transparent 95%);
          mask-image: radial-gradient(ellipse 60% 60% at center, #000 40%, transparent 95%);
  z-index: 0;
  pointer-events: none;
}

.ai-network--workflow .ai-network__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  z-index: 1;
}

/* Lines, subtle grey, draw 1x in via stroke-dashoffset (JS-driven) met soepele easing */
.ai-network--workflow .ai-line {
  fill: none;
  stroke: rgba(15, 26, 46, 0.26);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* HTML port dots, kleine grijze stippen, half-zichtbaar op elke card-edge.
   z-index 4 om boven card border te liggen; center valt op exacte card-edge. */
.ai-network--workflow .ai-port {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(15, 26, 46, 0.5);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Port wordt zichtbaar zodra de node waar hij in zit is-visible krijgt */
.ai-network--workflow .ai-node.is-visible .ai-port {
  opacity: 1;
  transition-delay: 0.35s;
}
/* Offset van -1px compenseert de 1px card-border zodat port-center exact op de
   VISUELE outer edge ligt, wat de SVG line-endpoints raken (border zit binnen padding-box). */
.ai-network--workflow .ai-port--top    { top: -1px;    left: 50%;  transform: translate(-50%, -50%); }
.ai-network--workflow .ai-port--right  { right: -1px;  top: 50%;   transform: translate(50%, -50%); }
.ai-network--workflow .ai-port--bottom { bottom: -1px; left: 50%;  transform: translate(-50%, 50%); }
.ai-network--workflow .ai-port--left   { left: -1px;   top: 50%;   transform: translate(-50%, -50%); }

/* Nodes, witte cards met subtle border + shadow, label below (n8n style).
   Entrance: gestagede fade + scale. Hover: 1.1x scale, subtiele shadow lift. */
/* Cards zijn percentage-sized van .ai-network--workflow zodat SVG viewBox-coord (0-600)
   altijd 1:1 mapt op de visuele card-edges. Square = 13.33% (= 80 viewBox units, half=40).
   Wide = 38.33% (= 230 viewBox units, half_w=115).
   BELANGRIJK: label en sub zijn ABSOLUUT gepositioneerd buiten de flex flow, zodat .ai-node
   alleen card-sized is. transform: translate(-50%, -50%) centreert dan EXACT de card op
   het (left, top) anchor → line-endpoints en port-positions vallen perfect samen. */
.ai-network--workflow .ai-node {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0;
  transition: opacity 0.55s ease,
              transform 0.6s cubic-bezier(.34, 1.35, .64, 1);
  cursor: default;
}
/* Width-variants. ALLE cards zelfde hoogte (13.33% = 80 viewBox), varierende breedte:
   sq    13.33% (icon-only rule nodes)
   slim  21.67% (130 viewBox, single-line tools)
   rect  26.67% (160 viewBox, wider tools) */
.ai-network--workflow .ai-node--filter,
.ai-network--workflow .ai-node--switch {
  width: 13.33%;
}
.ai-network--workflow .ai-node--github,
.ai-network--workflow .ai-node--claude,
.ai-network--workflow .ai-node--linear {
  width: 21.67%;
}
.ai-network--workflow .ai-node--pinecone,
.ai-network--workflow .ai-node--embed,
.ai-network--workflow .ai-node--openai,
.ai-network--workflow .ai-node--slack {
  width: 26.67%;
}

/* Per-node Isatis accent voor random hover-border (rotatie primary/secondary/accent) */
.ai-network--workflow .ai-node--github   { --node-accent: #38C4EA; }
.ai-network--workflow .ai-node--filter   { --node-accent: #EEC611; }
.ai-network--workflow .ai-node--pinecone { --node-accent: #0D59D1; }
.ai-network--workflow .ai-node--embed    { --node-accent: #38C4EA; }
.ai-network--workflow .ai-node--openai   { --node-accent: #EEC611; }
.ai-network--workflow .ai-node--claude   { --node-accent: #0D59D1; }
.ai-network--workflow .ai-node--switch   { --node-accent: #38C4EA; }
.ai-network--workflow .ai-node--slack    { --node-accent: #EEC611; }
.ai-network--workflow .ai-node--linear   { --node-accent: #0D59D1; }

/* Per-node reveal: elke node krijgt .is-visible zodra hij in viewport scrollt */
.ai-network--workflow .ai-node.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ai-network--workflow .ai-node.is-visible:hover {
  transform: translate(-50%, -50%) scale(1.05);
  z-index: 5;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}
.ai-network--workflow .ai-node.is-visible:hover .ai-node__card {
  border-color: var(--node-accent);
  box-shadow: 0 8px 24px rgba(15, 26, 46, 0.12);
  transition: box-shadow 0.4s cubic-bezier(.22, 1, .36, 1),
              border-color 0.4s cubic-bezier(.22, 1, .36, 1);
}

/* Card base, shared across width-variants */
.ai-network--workflow .ai-node__card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--e-global-color-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 26, 46, 0.07);
  display: flex; align-items: center;
  flex-shrink: 0;
  position: relative;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.ai-network--workflow .ai-node__card--sq {
  aspect-ratio: 1 / 1;
  justify-content: center;
}
.ai-network--workflow .ai-node__card--slim {
  aspect-ratio: 13 / 8;
  justify-content: flex-start;
  padding: 0 9%;
  gap: 8%;
}
.ai-network--workflow .ai-node__card--rect {
  aspect-ratio: 2 / 1;
  justify-content: flex-start;
  padding: 0 7%;
  gap: 6%;
}
/* Rule nodes: dashed accent border + subtle tinted bg */
.ai-network--workflow .ai-node--rule .ai-node__card {
  border: 1px dashed rgba(13, 89, 209, 0.45);
  background: #F7FAFE;
}
/* Logo sizing per card-variant */
.ai-network--workflow .ai-node__card--sq .ai-node__logo {
  width: 47%; aspect-ratio: 1/1;
  max-width: 36px; max-height: 36px;
  flex-shrink: 0;
}
.ai-network--workflow .ai-node__card--slim .ai-node__logo,
.ai-network--workflow .ai-node__card--rect .ai-node__logo {
  height: 38%; aspect-ratio: 1/1;
  max-width: 28px; max-height: 28px;
  flex-shrink: 0;
}
.ai-network--workflow .ai-node__inline {
  display: flex; flex-direction: column;
  text-align: left; line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ai-network--workflow .ai-node__inline strong {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: -0.005em;
  color: var(--e-global-color-text);
  white-space: nowrap;
}
.ai-network--workflow .ai-node__inline small {
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 400;
  color: var(--e-global-color-text-mute);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
/* Label en sub zijn nu altijd INLINE binnen het card (via __inline > strong + small).
   Externe label/sub elementen zijn niet meer in de DOM; oude styles dus verwijderd. */

/* Node posities. Card-centers vallen exact op (left, top), in viewBox 600x600 coords.
   Geen transition-delay meer (elke node activeert individueel via per-node IntersectionObserver). */
.ai-network--workflow .ai-node--github   { left: 15%;    top: 13.33%; }  /* (90, 80)   slim */
.ai-network--workflow .ai-node--filter   { left: 33.33%; top: 30%;    }  /* (200, 180) sq rule */
.ai-network--workflow .ai-node--embed    { left: 35%;    top: 79.17%; }  /* (210, 475) rect */
.ai-network--workflow .ai-node--pinecone { left: 16.67%; top: 50.83%; }  /* (100, 305) rect */
.ai-network--workflow .ai-node--openai   { left: 56.67%; top: 47.5%;  }  /* (340, 285) rect, focal */
.ai-network--workflow .ai-node--claude   { left: 83.33%; top: 13.33%; }  /* (500, 80)  slim */
.ai-network--workflow .ai-node--switch   { left: 85%;    top: 35%;    }  /* (510, 210) sq rule */
.ai-network--workflow .ai-node--slack    { left: 85%;    top: 60.83%; }  /* (510, 365) rect */
.ai-network--workflow .ai-node--linear   { left: 72.5%;  top: 83.33%; }  /* (435, 500) slim */

/* Reduced motion: alles direct zichtbaar, geen scroll-reveal */
@media (prefers-reduced-motion: reduce) {
  .ai-network--workflow .ai-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .ai-network--workflow .ai-node,
  .ai-network--workflow .ai-node.is-visible { opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none !important; }
  .ai-network--workflow .ai-port { opacity: 1 !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 1024px) {
  .ai-engineering__row { flex-direction: column; gap: 48px; }
  .ai-engineering__text { max-width: 600px; }
  .ai-network { max-width: 500px; }
}
@media (max-width: 640px) {
  .ai-engineering__features { grid-template-columns: 1fr; gap: 10px; }
  .ai-network { max-width: 100%; }
  /* Compact: alleen icons op smal scherm. Tool nodes worden weer square (verberg inline tekst). */
  .ai-network--workflow .ai-node__inline { display: none; }
  .ai-network--workflow .ai-node--github,
  .ai-network--workflow .ai-node--claude,
  .ai-network--workflow .ai-node--linear,
  .ai-network--workflow .ai-node--pinecone,
  .ai-network--workflow .ai-node--embed,
  .ai-network--workflow .ai-node--openai,
  .ai-network--workflow .ai-node--slack { width: 13.33%; }
  .ai-network--workflow .ai-node__card--slim,
  .ai-network--workflow .ai-node__card--rect {
    aspect-ratio: 1 / 1; justify-content: center; padding: 0; gap: 0;
  }
}

@media (max-width: 1024px) {
  .clients__row { flex-direction: column; gap: 48px; }
  .clients__text { flex: none; max-width: 600px; text-align: center; }
  .clients__hexfield { justify-content: center; }
  .hex-grid { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hex-grid { max-width: 100%; }
}

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

/* ---------- General section head pattern, krimper ---------- */
.industries__col-text,
.testimonials__head,
.blog__head,
.values__head { gap: 14px; }

/* ---------- About — foto links + tekst rechts ---------- */
.about { background: var(--e-global-color-bg); padding: var(--section-pad-y) 0; position: relative; overflow: hidden; }
.about__row {
  display: flex; flex-direction: row;
  align-items: stretch;
  gap: 64px;
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
  position: relative;
}

/* Left: foto met overlay */
.about__media {
  flex: 1; position: relative; overflow: hidden;
  min-height: 610px;
  background: var(--e-global-color-text);
}
.about__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}
.about__media-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15,26,46,0.62) 0%,
    rgba(15,26,46,0.10) 35%,
    rgba(15,26,46,0.10) 55%,
    rgba(15,26,46,0.75) 100%
  );
}
.about__media-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}

/* Locaties onderin de foto */
.about__offices-photo { display: flex; flex-direction: column; gap: 8px; }
.about__offices-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8);
}
.about__offices-row { display: flex; flex-direction: row; gap: 16px; align-items: center; }
.about__offices-divider {
  width: 1px; align-self: stretch;
  background: rgba(255,255,255,0.25);
}
.about__office-photo  { display: flex; align-items: center; gap: 8px; }
.about__office-photo-icon {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--e-global-color-primary);
}
.about__office-photo-info { display: flex; flex-direction: column; gap: 1px; }
.about__office-photo-city {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 13px; color: #fff; line-height: 1.2;
}
.about__office-photo-addr {
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: rgba(255,255,255,0.68); line-height: 1.3;
}

/* Stat kaartjes onderin de foto */
.about__stats-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about__stat-photo {
  background: #fff;
  border: 1px solid var(--e-global-color-border);
  border-radius: 10px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 3px 5px rgba(15, 26, 46, 0.10);
}
.about__stat-photo-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 24px; line-height: 1; color: var(--e-global-color-text);
}
.about__stat-photo-label {
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4;
  color: var(--e-global-color-text-dim);
}

/* Right: tekst */
.about__text {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: 24px;
}
.about__heading {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(32px, 3vw, 44px); line-height: 1.15;
  color: var(--e-global-color-text); margin: 0;
}
.about__heading .accent { color: var(--e-global-color-text); position: relative; display: inline-block; isolation: isolate; }
.about__heading .accent::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em;
  height: 0.27em; background: var(--e-global-color-accent); opacity: 0.85;
  z-index: -1; border-radius: 4px; transform: skew(-6deg);
}
.about__lead {
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.70;
  color: var(--e-global-color-text-dim); margin: 0;
}

@media (max-width: 1024px) {
  .about__row { flex-direction: column; gap: 40px; }
  .about__media { min-height: 400px; }
}

/* ============================================================
   NIEUWE SECTIES 4–9
   ============================================================ */

/* Section 4: Services — dark numbered list */
.svc { background: var(--e-global-color-bg); padding: var(--section-pad-y) 0; }
.svc__inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; gap: 56px;
}
.svc__intro {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center;
  max-width: 100%;
}
.svc__intro-right { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; align-self: stretch; }
.svc__heading {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(32px, 3vw, 44px); line-height: 1.1; color: var(--e-global-color-text); margin: 0 0 20px;
}
.svc__heading .accent { position: relative; display: inline-block; isolation: isolate; }
.svc__heading .accent::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em;
  height: 0.27em; background: var(--e-global-color-accent); opacity: 0.85;
  z-index: -1; border-radius: 4px; transform: skew(-6deg);
}
.svc__body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.65; color: var(--e-global-color-text-dim); margin: 0; }
/* Accordion */
.svc__accordion { display: flex; flex-direction: column; }
.svc__acc-item {
  border-bottom: 1px solid var(--e-global-color-border);
  transition: background .25s ease;
}
.svc__acc-item:first-child { border-top: 1px solid var(--e-global-color-border); }
.svc__acc-item--open { background: none; border-color: var(--e-global-color-border); }
.svc__acc-header {
  display: flex; align-items: center; gap: 0;
  width: 100%; padding: 22px 0; border: none; background: none;
  cursor: pointer; text-align: left;
}
.svc__acc-item--open .svc__acc-header { padding-bottom: 14px; }
.svc__acc-num {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  color: var(--e-global-color-text-mute); flex-shrink: 0; width: 80px;
}
.svc__acc-title {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(20px, 2vw, 28px); color: var(--e-global-color-text);
  transition: color .2s; flex: 1;
}
.svc__acc-item--open:nth-child(4n+1) .svc__acc-title { color: var(--e-global-color-primary); }
.svc__acc-item--open:nth-child(4n+2) .svc__acc-title { color: var(--e-global-color-secondary); }
.svc__acc-item--open:nth-child(4n+3) .svc__acc-title { color: var(--e-global-color-accent); }
.svc__acc-item--open:nth-child(4n+4) .svc__acc-title { color: var(--e-global-color-alert); }
.svc__acc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.svc__acc-item--open .svc__acc-body { grid-template-rows: 1fr; }
.svc__acc-body-inner {
  overflow: hidden;
  padding: 0 0 0 80px;
  display: flex; flex-direction: column; gap: 12px;
}
.svc__acc-item--open .svc__acc-body-inner { padding-bottom: 28px; }
.svc__acc-tags {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--e-global-color-text-mute); margin: 0;
}
.svc__acc-desc {
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6;
  color: var(--e-global-color-text-dim); margin: 0;
}
.svc__acc-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500;
  text-decoration: none; color: var(--e-global-color-text);
  position: relative; width: fit-content;
  transition: opacity .3s, color .2s ease;
}
.svc__acc-cta:hover { color: var(--e-global-color-accent); }
.svc__acc-cta::after {
  content: ''; position: absolute; bottom: -5px; left: 0;
  width: 0; height: 1px; background: var(--e-global-color-accent);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.svc__acc-cta:hover::after { width: 100%; }
@media (max-width: 1024px) { .svc__inner { grid-template-columns: 1fr; gap: 48px; } .svc__intro { grid-template-columns: 1fr; gap: 28px; } }

/* Section — Careers */
.car { background: var(--e-global-color-bg-soft); padding: var(--section-pad-y) 0; }
.car__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 56px; }
.car__header { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.car__header-left { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.car__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--e-global-color-primary); }
.car__heading { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(32px, 3vw, 44px); line-height: 1.1; color: var(--e-global-color-text); margin: 0; }
.car__heading .accent { display: inline; }
.car__body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.65; color: var(--e-global-color-text-dim); margin: 0; }
.car__positions { display: flex; flex-direction: column; }
.car__position {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--e-global-color-border);
  text-decoration: none;
}
.car__position:first-child { border-top: 1px solid var(--e-global-color-border); }
.car__position-info { display: flex; flex-direction: column; gap: 4px; }
.car__position-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); color: var(--e-global-color-text); transition: color .2s; }
.car__position:hover .car__position-title { color: var(--e-global-color-primary); }
.car__position-meta { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--e-global-color-text-mute); }
.car__position-cta { flex-shrink: 0; }
.car__position:hover .car__position-cta { color: var(--e-global-color-primary); }
.car__position:hover .car__position-cta::after { width: 100%; }
.car__header-left .btn--ghost::after { bottom: -6px; }
.car__benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.car__benefit { padding: 28px 22px; border-radius: 14px; display: flex; flex-direction: column; gap: 14px; }
.car__benefit--cyan   { background: rgba(56,196,234,0.10);  color: var(--e-global-color-primary); }
.car__benefit--blue   { background: rgba(13,89,209,0.10);   color: var(--e-global-color-secondary); }
.car__benefit--yellow { background: rgba(238,198,17,0.12);  color: #7A5F00; }
.car__benefit--red    { background: rgba(254,91,91,0.10);   color: var(--e-global-color-alert); }
.car__benefit-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; margin: 0; color: var(--e-global-color-text); }
.car__benefit-desc { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; color: var(--e-global-color-text-dim); margin: 0; }
@media (max-width: 1024px) { .car__header { grid-template-columns: 1fr; gap: 40px; } .car__benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .car__benefits { grid-template-columns: 1fr; } }

/* Section 5: Industries */
.ind { background: var(--e-global-color-bg); padding: var(--section-pad-y) 0; }
.ind__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 56px; }
.ind__header { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.ind__label { display: block; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--e-global-color-secondary); margin-bottom: 16px; }
.ind__heading { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(32px, 3vw, 44px); line-height: 1.1; color: var(--e-global-color-text); margin: 0; }
.ind__heading .accent { position: relative; display: inline-block; isolation: isolate; }
.ind__heading .accent::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.27em; background: var(--e-global-color-accent); opacity: 0.85; z-index: -1; border-radius: 4px; transform: skew(-6deg); }
.ind__body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.65; color: var(--e-global-color-text-dim); margin: 0; align-self: end; }
.ind__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ind__item { background: #fff; border: 1px solid var(--e-global-color-border); border-radius: 14px; padding: 28px 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s, box-shadow .2s, border-color .2s; text-decoration: none; color: inherit; }
.ind__item:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(15,26,46,0.10); border-color: var(--e-global-color-primary); }
/* Per-item accent kleur */
.ind__item:nth-child(1) { --ind-accent: var(--e-global-color-primary); }
.ind__item:nth-child(2) { --ind-accent: var(--e-global-color-secondary); }
.ind__item:nth-child(3) { --ind-accent: var(--e-global-color-accent); }
.ind__item:nth-child(4) { --ind-accent: var(--e-global-color-alert); }

.ind__item-icon { width: 36px; height: 36px; color: var(--ind-accent); }
.ind__item:hover { border-color: var(--ind-accent); }

/* SVG draw animatie */
.ind__item-icon path,
.ind__item-icon polyline {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}
.ind__item.is-visible .ind__item-icon path,
.ind__item.is-visible .ind__item-icon polyline { stroke-dashoffset: 0; }
.ind__item:nth-child(1) .ind__item-icon path,
.ind__item:nth-child(1) .ind__item-icon polyline { transition-delay: 0s; }
.ind__item:nth-child(2) .ind__item-icon path,
.ind__item:nth-child(2) .ind__item-icon polyline { transition-delay: 0.5s; }
.ind__item:nth-child(3) .ind__item-icon path,
.ind__item:nth-child(3) .ind__item-icon polyline { transition-delay: 1.0s; }
.ind__item:nth-child(4) .ind__item-icon path,
.ind__item:nth-child(4) .ind__item-icon polyline { transition-delay: 1.5s; }

/* CTA underline meer afstand */
.ind__header .btn--ghost::after,
.bl__head .btn--ghost::after { bottom: -6px; }
.ind__item-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; margin: 0; color: var(--e-global-color-text); }
.ind__item-desc { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; color: var(--e-global-color-text-dim); margin: 0; }
@media (max-width: 1024px) { .ind__header { grid-template-columns: 1fr; gap: 20px; } .ind__grid { grid-template-columns: repeat(2, 1fr); } }

/* Section 6: Testimonials — 2-col staggered */
.tst { background: var(--e-global-color-bg-soft); padding: var(--section-pad-y) 0; position: relative; overflow: hidden; }
.tst__bg-logo {
  position: absolute; right: -100px; top: 50%; transform: translateY(-50%);
  width: 560px; height: 560px;
  color: var(--e-global-color-text);
  opacity: 0.03; pointer-events: none; z-index: 0;
}
.tst__bg-logo svg { width: 100%; height: 100%; }
.tst__inner { position: relative; z-index: 1; }
.tst__inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: center;
}
.tst__eyebrow {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--e-global-color-secondary); margin-bottom: 16px;
}
.tst__heading {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(32px, 3vw, 44px); line-height: 1.2;
  color: var(--e-global-color-text); margin: 0 0 16px;
}
.tst__meta {
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65;
  color: var(--e-global-color-text-dim); margin: 0 0 32px;
}
.tst__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 580px;
  overflow: hidden;
  padding: 0 6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.tst__col {
  overflow: visible;
  padding: 0 2px;
}
.tst__track {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tst-card {
  background: #fff;
  border: 1px solid var(--e-global-color-border);
  border-radius: 14px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(15,26,46,0.05);
  flex-shrink: 0;
}

.tst-card__quote {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6;
  color: var(--e-global-color-text-dim); margin: 0; flex: 1;
}
.tst-card__author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.tst-card__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tst-card__name {
  display: block; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 13px; color: var(--e-global-color-text);
}
.tst-card__role {
  display: block; font-family: 'Inter', sans-serif; font-size: 12px;
  color: var(--e-global-color-text-mute);
}
@media (max-width: 1024px) {
  .tst__inner { grid-template-columns: 1fr; gap: 48px; }
  .tst__col--offset { margin-top: 0; }
}

/* Section 7: Blog featured + list */
.bl { background: var(--e-global-color-bg); padding: var(--section-pad-y) 0; }
.bl__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.bl__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.bl__heading { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(32px, 3vw, 44px); line-height: 1.1; color: var(--e-global-color-text); margin: 0; }
.bl__heading .accent { position: relative; display: inline-block; isolation: isolate; }
.bl__heading .accent::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.27em; background: var(--e-global-color-accent); opacity: 0.85; z-index: -1; border-radius: 4px; transform: skew(-6deg); }
.bl__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.bl__featured {
  position: relative; border-radius: 0; overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; text-decoration: none;
}
.bl__featured-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,26,46,0.88) 0%, rgba(15,26,46,0.30) 55%, rgba(15,26,46,0.10) 100%);
  pointer-events: none;
}
.bl__featured-content {
  position: relative; z-index: 1;
  padding: 32px 36px; display: flex; flex-direction: column; gap: 14px;
}
.bl__featured-content .bl__cat { background: #D4F2FB; color: var(--e-global-color-primary); }


.bl__featured-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1.25; color: #fff; margin: 0; }
.bl__featured .bl__meta { color: rgba(255,255,255,0.65); margin: 0; }
.bl__featured-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.bl__featured-cta { color: rgba(255,255,255,0.85); }
.bl__featured:hover .bl__featured-cta { color: var(--e-global-color-primary); }
.bl__featured:hover .bl__featured-cta::after { width: 100%; }
.bl__item { text-decoration: none; color: inherit; }
.bl__side { display: flex; flex-direction: column; gap: 16px; }
.bl__item { background: #fff; border: 1px solid var(--e-global-color-border); border-radius: 12px; padding: 16px; display: flex; flex-direction: row; gap: 16px; align-items: center; flex: 1; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bl__item:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(15,26,46,0.10); border-color: var(--bl-accent, var(--e-global-color-primary)); }
.bl__side .bl__item:nth-child(1) { --bl-accent: var(--e-global-color-secondary); }
.bl__side .bl__item:nth-child(2) { --bl-accent: var(--e-global-color-accent); }
.bl__side .bl__item:nth-child(3) { --bl-accent: var(--e-global-color-alert); }
.bl__item-thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.bl__item-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bl__item-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--e-global-color-text); margin: 0; }
.bl__cat { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(56,196,234,0.12); color: var(--e-global-color-primary); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; width: fit-content; }
.bl__cat--cyan   { background: rgba(56,196,234,0.18);  color: var(--e-global-color-primary); }
.bl__cat--blue   { background: rgba(13,89,209,0.12);   color: var(--e-global-color-secondary); }
.bl__cat--yellow { background: rgba(238,198,17,0.22);  color: #7A5F00; }
.bl__cat--red    { background: rgba(254,91,91,0.14);   color: var(--e-global-color-alert); }
.bl__meta { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--e-global-color-text-mute); margin: 0; }
.bl__featured-cta { color: rgba(255,255,255,0.85); transition: color .3s ease; }
.bl__featured-cta:hover { color: var(--e-global-color-primary); }
.bl__featured-cta::after { bottom: -6px; }
@media (max-width: 1024px) { .bl__grid { grid-template-columns: 1fr; } }

/* Section 8: Values — manifesto rows */
.val { background: var(--e-global-color-bg-soft); padding: var(--section-pad-y) 0; }
.val__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.val__heading { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(32px, 3vw, 44px); line-height: 1.1; color: var(--e-global-color-text); margin: 0 0 56px; }
.val__heading .accent { position: relative; display: inline-block; isolation: isolate; }
.val__heading .accent::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.27em; background: var(--e-global-color-accent); opacity: 0.85; z-index: -1; border-radius: 4px; transform: skew(-6deg); }
.val__list { display: flex; flex-direction: column; }
.val__item { display: flex; align-items: baseline; gap: 48px; padding: 28px 0; border-bottom: 1px solid var(--e-global-color-border); transition: padding-left .2s; }
.val__item:first-child { border-top: 1px solid var(--e-global-color-border); }
.val__item:hover { padding-left: 12px; }
.val__num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--e-global-color-text-mute); flex-shrink: 0; width: 32px; }
.val__title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(20px, 2vw, 30px); line-height: 1.2; color: var(--e-global-color-text); margin: 0; transition: color .2s; }
.val__item:hover .val__title { color: var(--e-global-color-primary); }
@media (max-width: 1024px) { .val__item { gap: 24px; } }

/* Contact CTA — dark card in grijze wrapper */
/* Gekaderde donkere card binnen een grijze wrapper: de wrapper-padding vormt
   een bewust uniform kader (geen standaard sectie), dus uniforme waarde. */
.cta-wrap { background: var(--e-global-color-bg-soft); padding: clamp(20px, 3vw, 40px); }
.cta-card {
  background: var(--e-global-color-text);
  border-radius: 20px;
  max-width: 1400px; margin: 0 auto;
  padding: 96px 48px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 24px;
}

/* Section 9: Contact CTA — dark */
.contact-cta { background: var(--e-global-color-text); padding: var(--section-pad-y) 0; }
.contact-cta__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.contact-cta__heading { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0; }
.contact-cta__heading .accent { position: relative; display: inline-block; isolation: isolate; }
.contact-cta__heading .accent::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.27em; background: var(--e-global-color-accent); opacity: 0.85; z-index: -1; border-radius: 4px; transform: skew(-6deg); }
.contact-cta__lead { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.60); margin: 0; }

/* ============================================================
   OUD (Elementor-compatibiliteit)
   ============================================================ */

/* ---------- Services grid ---------- */
.services { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg); }
.services__head { gap: 16px; max-width: 720px; margin: 0 auto 64px; padding: 0 var(--gutter); text-align: center; }
.services__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { padding: 28px; background: var(--e-global-color-bg); border: 1px solid var(--e-global-color-border);
  border-radius: 16px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(15,26,46,0.10); border-color: var(--e-global-color-primary); }
.service-card__icon { width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
/* 4 icon kleur-varianten, rotate over de 6 cards */
.service-card__icon--blue   { background: rgba(56,196,234,0.18); color: var(--e-global-color-primary);   }
.service-card__icon--cyan   { background: rgba(13,89,209,0.12);  color: var(--e-global-color-secondary); }
.service-card__icon--yellow { background: rgba(238,198,17,0.20); color: var(--e-global-color-accent-ink);                          }
.service-card__icon--red    { background: rgba(254,91,91,0.14);  color: var(--e-global-color-alert);     }

.service-card__title { margin: 0 0 8px; }
.service-card__desc { margin: 0; }
.service-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
/* Link tint matches icon */
.service-card__link--blue   { color: var(--e-global-color-primary); }
.service-card__link--cyan   { color: var(--e-global-color-secondary); }
.service-card__link--yellow { color: var(--e-global-color-accent-ink); }
.service-card__link--red    { color: var(--e-global-color-alert); }

@media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .services__grid { grid-template-columns: 1fr; } }

/* ---------- Industries ---------- */
.industries { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg-soft); }
.industries__row { gap: 48px; align-items: flex-start; }
.industries__col-text { flex: 1; gap: 14px; max-width: 480px; }
.industries__col-grid { flex: 1.2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.industry-card { padding: 24px; background: var(--e-global-color-bg); border: 1px solid var(--e-global-color-border);
  border-radius: 12px; display: flex; align-items: center; gap: 16px;
  border-left: 3px solid var(--e-global-color-primary); transition: transform .2s, box-shadow .2s; }
.industry-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(15,26,46,0.08); }
/* All industry cards: unified cyan left-border and icon */
.industry-card--red,
.industry-card--yellow,
.industry-card--blue,
.industry-card--cyan   { border-left-color: var(--e-global-color-primary); }
.industry-card__icon { width: 40px; height: 40px; flex-shrink: 0; color: var(--e-global-color-primary); }
.industry-card__title { margin: 0; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; }

/* ---------- Milestones / Bento ---------- */
.milestones { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg); }
.milestones__head { gap: 16px; max-width: 720px; margin: 0 auto 48px; padding: 0 var(--gutter); text-align: center; }
.milestones__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.milestone { padding: 32px; background: var(--e-global-color-bg-soft); border-radius: 16px; min-height: 180px;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.milestone__num   { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 48px; line-height: 1; color: var(--e-global-color-text); }
.milestone__label { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--e-global-color-text-dim); margin-top: 12px; }

/* Color variants, elke tile een eigen rol */
.milestone--blue   { background: var(--e-global-color-primary); }
.milestone--blue .milestone__num,
.milestone--blue .milestone__label { color: #fff; }

.milestone--cyan   { background: var(--e-global-color-secondary); }
.milestone--cyan .milestone__num,
.milestone--cyan .milestone__label { color: var(--e-global-color-text); }

.milestone--yellow { background: var(--e-global-color-accent); }
.milestone--yellow .milestone__num,
.milestone--yellow .milestone__label { color: var(--e-global-color-text); }

.milestone--red    { background: var(--e-global-color-alert); }
.milestone--red .milestone__num,
.milestone--red .milestone__label { color: #fff; }

.milestone--wide { grid-column: span 2; }

@media (max-width: 1024px) { .milestones__grid { grid-template-columns: repeat(2, 1fr); } .milestone--wide { grid-column: span 2; } }
@media (max-width: 640px)  { .milestones__grid { grid-template-columns: 1fr; } .milestone--wide { grid-column: auto; } }

/* ---------- Testimonials, bento-grid van review kaarten (4 reguliere + 1 feature midden) ---------- */
.testimonials { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg-soft); }

.testimonials__head {
  max-width: var(--content-max); margin: 0 auto 48px;
  padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.testimonials__head-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.testimonials__eyebrow {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--e-global-color-text-mute);
  margin: 0;
}
.testimonials__heading {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 0.95; letter-spacing: -0.03em;
  color: var(--e-global-color-text);
  margin: 0;
}
.testimonials__head-meta {
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.5;
  color: var(--e-global-color-text-dim);
  margin: 0 0 6px;
  max-width: 240px;
  text-align: right;
}

/* Bento grid, 3 kolommen, 2 rijen, midden spant beide rijen */
.reviews-grid {
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-auto-rows: 1fr;
  gap: 20px;
}

.review-card {
  border-radius: 16px;
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  min-height: 280px;
}
.review-card--dark {
  background: var(--e-global-color-text);
  color: #fff;
}
.review-card--light {
  background: #fff;
  border: 1px solid var(--e-global-color-border);
  color: var(--e-global-color-text);
}

/* Sterren, 4 oranje + 1 grijs (matcht referentie); via CSS gradient op een text-fill */
.review-card__stars {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  margin: 0 0 18px;
  color: #FE6B35;
}

.review-card__quote {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 15px; line-height: 1.55;
  margin: 0;
  flex: 1;
  color: inherit;
}
.review-card--dark .review-card__quote { color: rgba(255,255,255,0.92); }

.review-card__author {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px;
}
.review-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.review-card__author-info {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.review-card__name {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 14px; line-height: 1.2;
  color: inherit;
}
.review-card__role {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.3;
  color: var(--e-global-color-text-dim);
}
.review-card--dark .review-card__role { color: rgba(255,255,255,0.55); }

/* Feature card, span 2 rijen in middencel; hero foto bovenin + content (incl. stats) eronder */
.review-card--feature {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0;
  background: var(--e-global-color-text);
  color: #fff;
  overflow: hidden;
}
.review-card__hero {
  width: 100%; height: 240px;
  object-fit: cover;
  display: block;
}
.review-card--feature .review-card__content {
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  flex: 1;
}
.review-card--feature .review-card__quote {
  color: rgba(255,255,255,0.92);
  flex: 0 1 auto;
  margin-bottom: 18px;
}

/* Twee statistieken, 30+ years / 100+ projects */
.review-card__stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px 0 0;
  margin: 0 0 22px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.review-card__stat-num {
  display: block;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 32px; line-height: 1;
  margin-bottom: 4px;
  color: #fff;
}
.review-card__stat-label {
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: rgba(255,255,255,0.60);
}
.review-card--feature .review-card__author { margin-top: auto; }

/* Responsive */
@media (max-width: 1024px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .review-card--feature { grid-column: 1 / span 2; grid-row: auto; }
  .review-card__hero { height: 280px; }
}
@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; gap: 16px; }
  .review-card--feature { grid-column: 1; }
  .review-card__hero { height: 240px; }
  .testimonials__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .testimonials__head-meta { text-align: left; max-width: 100%; padding-bottom: 0; }
}

/* ---------- Blog preview ---------- */
.blog { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg); }
.blog__head { display: flex; justify-content: space-between; align-items: flex-end;
  max-width: var(--content-max); margin: 0 auto var(--space-head-to-grid); padding: 0 var(--gutter); gap: 24px; flex-wrap: wrap; }
.blog__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.blog-card {
  padding: 24px;
  background: var(--e-global-color-bg);
  border: 1px solid var(--e-global-color-border);
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(15,26,46,0.10);
  border-color: var(--e-global-color-primary);
}
/* Single unified cyan category tag — remove color variants */
.blog-card__cat,
.blog-card__cat--cyan,
.blog-card__cat--yellow,
.blog-card__cat--red {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: rgba(56,196,234,0.18); color: var(--e-global-color-primary);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.blog-card__title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; line-height: 1.3;
  margin: 0 0 8px; color: var(--e-global-color-text); }
.blog-card__meta { font-size: 13px; color: var(--e-global-color-text-mute); margin: 0; }

@media (max-width: 1024px) { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .blog__grid { grid-template-columns: 1fr; } }

/* ---------- Values ---------- */
.values { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg-soft); }
.values__head { gap: var(--space-head-gap); max-width: 720px; margin: 0 auto var(--space-head-to-grid); padding: 0 var(--gutter); text-align: center; }
.values__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value {
  padding: 24px 22px;
  background: var(--e-global-color-bg);
  border: 1px solid var(--e-global-color-border);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.value:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(15,26,46,0.10);
  border-color: var(--e-global-color-primary);
}
/* Unified cyan number for all value variants */
.value__num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 28px;
  letter-spacing: 0; line-height: 1;
  color: var(--e-global-color-primary); }
.value__title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px; margin: 0; color: var(--e-global-color-text); }

/* Progress bar, vult zich als value tile in view komt */
.value__bar {
  margin-top: 14px; height: 3px; border-radius: 2px;
  background: var(--e-global-color-border); overflow: hidden;
}
.value__bar::after {
  content: ''; display: block; height: 100%; width: 0;
  background: var(--e-global-color-primary);
  transition: width 1.4s cubic-bezier(.22,1,.36,1) .2s;
}
.value.is-in-view .value__bar::after { width: 100%; }

@media (max-width: 1024px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .values__grid { grid-template-columns: 1fr; } }

/* ---------- Contact CTA ---------- */
.cta { padding: var(--section-pad-y) var(--gutter); background: var(--e-global-color-bg); }
.cta__inner { max-width: 880px; margin: 0 auto; padding: 56px 48px; text-align: center;
  background: var(--e-global-color-secondary); color: #fff; border-radius: 20px; }
.cta__heading { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(26px, 2.8vw, 36px);
  margin: 0 0 12px; color: #fff; }
.cta__lead { font-family: 'Inter', sans-serif; font-size: 16px; color: rgba(255,255,255,0.85); margin: 0 0 24px; }
/* Yellow marker accent on one key word in the CTA heading */
.cta__heading .accent { position: relative; display: inline-block; }
.cta__heading .accent::after {
  content: ''; position: absolute; left: 0; bottom: 0.04em;
  width: 100%; height: 0.27em;
  background: var(--e-global-color-accent); opacity: 0.85;
  z-index: -1; border-radius: 2px;
}

/* Inverted button op de donkerblauwe CTA-kaart: wit met donkerblauwe tekst,
   inset square donkerblauw met witte pijl */
.cta .btn--primary { background: #fff; color: var(--e-global-color-secondary); }
.cta .btn--primary:hover { background: var(--e-global-color-bg-soft); }
.cta .btn--primary .btn__icon { background: var(--e-global-color-secondary); color: #fff; }

/* ════════ Logo-marquee (auto-scroll, fade links/rechts) ════════ */
.lgm-section { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg); }
.lgm-head {
  max-width: var(--content-max); margin: 0 auto 44px; padding: 0 var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.lgm-heading {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.18; letter-spacing: -0.02em;
  color: var(--e-global-color-text); margin: 0 0 12px;
}
.lgm-lead {
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.65;
  color: var(--e-global-color-text-dim); margin: 0; max-width: 520px;
}
.lgm-viewport { position: relative; overflow: hidden; }
.lgm-viewport::before,
.lgm-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2; pointer-events: none;
}
.lgm-viewport::before { left: 0; background: linear-gradient(to right, var(--e-global-color-bg), rgba(255,255,255,0)); }
.lgm-viewport::after { right: 0; background: linear-gradient(to left, var(--e-global-color-bg), rgba(255,255,255,0)); }
.lgm-track {
  display: flex; gap: 18px; width: max-content;
  animation: lgmScroll 52s linear infinite;
  pointer-events: none; user-select: none;
}
.lgm-track--reverse {
  animation: lgmScrollRev 60s linear infinite;
  margin-left: -114px;   /* halve kaart offset zodat rij 2 verspringt t.o.v. rij 1 */
}
.lgm-row + .lgm-row { margin-top: 18px; }
@keyframes lgmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lgmScrollRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .lgm-track { animation: none; } }
.lgm-card {
  width: 210px; height: 116px; flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--e-global-color-border);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.lgm-card img { max-width: 58%; max-height: 48px; object-fit: contain; display: block; }

/* ============================================================
   RESPONSIVE AUGMENTATION — TABLET (1024px) + PHONE (640px / 420px)
   Voegt uitsluitend toe binnen @media; desktop blijft ongewijzigd.
   ============================================================ */

/* ---------- TABLET refinements (max 1024px) ----------
   3-col grids → 2 wordt al per-sectie afgehandeld bij 1024px.
   Hier alleen de AI-workflow visual begrenzen zodat hij in de gestackte
   kolom past (row stackt op 1024). */
@media (max-width: 1024px) {
  .ai-network--workflow { max-width: 440px; margin: 0 auto; }
}

/* ---------- PHONE (max 640px) ---------- */
@media (max-width: 640px) {
  /* Geen horizontale overflow toestaan */
  body { overflow-x: clip; }

  /* Sectie-padding (verticaal) en gutter (horizontaal) komen centraal uit
     var(--section-pad-y) (60px) en var(--gutter) (20px). Geen losse
     per-sectie overrides meer nodig. */

  /* --- HERO --- beeld vult 80% van het telefoonscherm (svh = zonder browserbalk) */
  .hero { height: 80vh; min-height: 80vh; height: 80svh; min-height: 80svh; }
  .hero__slide { background-position: center 30%; }   /* toon mensen i.p.v. het lege midden */
  .hero__inner { padding: 96px 18px 32px; }
  .hero__heading,
  .hero .t-heading-1 { font-size: clamp(30px, 9vw, 36px); line-height: 1.12; }
  .hero__sub { font-size: 15px; }
  .hero__cta-row { gap: 16px; }
  .hero__cta-row .btn { width: auto; }

  /* --- AI ENGINEERING --- (row stacked al via 1024; hier CTA-row stapelen) */
  .ai-engineering__cta-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 16px; }

  /* --- AI visual: bovenaan + gecentreerd op telefoon; reveal via JS-observer.
         5px flex-gap tot de heading; de -36px margin-bottom compenseert de lege
         viewBox-strook onder de laagste node (60u × 0.6px/u bij 360px breed),
         zodat de heading visueel ±5px onder de animatie staat. --- */
  .ai-engineering__row { gap: 5px; }
  .ai-engineering__visual { flex: none; width: 100%; order: -1; }
  .ai-network--workflow { max-width: 360px; margin: 0 auto -39px; pointer-events: none; }

  /* --- CLIENTS / hex --- */
  .hex-grid { max-width: 100%; }

  /* --- ABOUT --- foto-overlay stats/offices stapelen netjes */
  .about__media { min-height: 340px; }
  .about__media-inner { padding: 18px; }
  .about__offices-row { flex-wrap: wrap; gap: 12px; }
  .about__stats-photo { grid-template-columns: 1fr 1fr; gap: 8px; }
  .about__stat-photo { padding: 12px 14px; }
  .about__stat-photo-num { font-size: 21px; }

  /* --- SERVICES intro accordion --- */
  .svc__acc-num { width: 44px; }
  .svc__acc-body-inner { padding-left: 44px; }
  .svc__acc-header { padding: 18px 0; }

  /* --- CAREERS --- position-rij: titel + cta stapelen */
  .car__position { flex-direction: column; align-items: flex-start; gap: 8px; }
  .car__position-cta { align-self: flex-start; }
  .car__benefits { grid-template-columns: 1fr; }

  /* --- INDUSTRIES grid → 1 kolom --- */
  .ind__grid { grid-template-columns: 1fr; }
  .industries__row { flex-direction: column; }
  .industries__col-grid { grid-template-columns: 1fr; }

  /* --- TESTIMONIALS marquee (nieuwe tst) → 1 kolom, lagere hoogte --- */
  .tst__cards { grid-template-columns: 1fr; }
  .tst__bg-logo { width: 360px; height: 360px; right: -120px; }

  /* --- BLOG --- */
  .bl__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .bl__featured { min-height: 320px; }
  .bl__featured-content { padding: 22px 22px; }
  .bl__featured-footer { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* --- VALUES manifesto rows --- */
  .val__item { gap: 16px; padding: 20px 0; }
  .val__item:hover { padding-left: 0; }
  .val__heading { margin-bottom: 32px; }

  /* --- CTA cards: interne card-padding compacter, voorkom overflow --- */
  .cta-card { padding: 56px 24px; border-radius: 16px; }
  .cta__inner { padding: 40px 24px; }
  .contact-cta__lead { font-size: 16px; }

  /* --- LOGO MARQUEE --- smallere fade-randen, kleinere kaarten --- */
  .lgm-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .lgm-viewport::before,
  .lgm-viewport::after { width: 64px; }
  .lgm-card { width: 150px; height: 92px; }
  .lgm-card img { max-height: 38px; }
}

/* ---------- PHONE — grootste headings (max 420px) ---------- */
@media (max-width: 420px) {
  .testimonials__heading { font-size: clamp(40px, 12vw, 52px); }
  .contact-cta__heading { font-size: clamp(30px, 9vw, 40px); }
  .hero__heading,
  .hero .t-heading-1 { font-size: clamp(30px, 9vw, 36px); }
}