/* ==========================================================================
   MoreDone — site.css
   Alles wat in het design-bestand nog als `style-hover` stond, plus de
   basis- en animatielaag. Design-tokens komen uit colors_and_type.css.
   ========================================================================== */

@import url('colors_and_type.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

/* De header zweeft boven de pagina; anker-links moeten daar niet onder duiken. */
section[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Animaties
   -------------------------------------------------------------------------- */
@keyframes md-fade      { from { opacity: 0 } to { opacity: 1 } }
@keyframes md-rise      { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes md-marquee   { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@keyframes md-line-draw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes md-num-in    { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes md-tick-grow { from { width: 0; opacity: 0 } to { width: 30px; opacity: 1 } }
@keyframes md-copy-in   { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; }
  .marquee-track { animation: none !important; }
}

/* Scroll-gedreven animaties: alleen waar de browser ze ondersteunt.
   Elders vallen ze terug op direct zichtbaar (geen onzichtbare tekst). */
[data-anim] { opacity: 1; }
@supports (animation-timeline: view()) {
  [data-anim] { animation-timeline: view(); }
}

/* --------------------------------------------------------------------------
   Knoppen en links (voorheen style-hover)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-standard),
              color var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard);
}

.btn-sky {
  background: var(--md-sky-400);
  color: #12141A;
  font-weight: var(--weight-semi);
  border: none;
}
.btn-sky:hover { background: var(--md-sky-500); color: #fff; }

.btn-white {
  background: #fff;
  border: 1px solid var(--border-default);
  color: #12141A;
  font-weight: var(--weight-medium);
}
.btn-white:hover { background: var(--md-gray-50); border-color: var(--border-strong); }

.btn-dark {
  background: #12141A;
  color: #fff;
  font-weight: var(--weight-semi);
  border: none;
}
.btn-dark:hover { background: #000; }

.btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-weight: var(--weight-medium);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .08); }

.navlink {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, .82);
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.navlink:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------------
   Header — transparant over de hero, wit zodra je scrollt
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-slow) var(--ease-standard),
              border-color var(--duration-slow) var(--ease-standard),
              backdrop-filter var(--duration-slow) var(--ease-standard);
}
.header-binnen {
  /* volle breedte: het menu hoort op het sky-paneel, niet op de naad */
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header nav { display: flex; align-items: center; gap: 6px; }
.nav-streep { width: 1px; height: 22px; background: rgba(255, 255, 255, .3); margin: 0 12px; transition: background var(--duration-slow) var(--ease-standard); }

.logo { position: relative; display: block; width: 172px; height: 46px; overflow: hidden; }
.logo-vast {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 172px;
  height: auto;
  opacity: 0;
  transition: opacity .35s var(--ease-standard);
}
.logo-anim {
  position: absolute;
  left: -39px;
  top: 50%;
  transform: translateY(-50%);
  width: 249px;
  height: 140px;
  pointer-events: none;
}
.logo.klaar .logo-anim { opacity: 0; transition: opacity .35s var(--ease-standard); }
.logo.klaar .logo-vast { opacity: 1; }

/* Header-variant voor de lichte hero: meteen gekleurd logo en donkere links */
.site-header.licht:not(.gescrold) .navlink { color: var(--fg-2); }
.site-header.licht:not(.gescrold) .navlink:hover { color: var(--fg-1); background: rgba(14, 27, 51, .07); }
.site-header.licht:not(.gescrold) .nav-streep { background: var(--border-default); }
.site-header.licht:not(.gescrold) .btn-sky { background: var(--md-navy-600); color: #fff; }
.site-header.licht:not(.gescrold) .btn-sky:hover { background: var(--md-navy-700); }

.site-header.gescrold {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
}
.site-header.gescrold .navlink { color: var(--fg-2); }
.site-header.gescrold .navlink:hover { color: var(--fg-1); background: var(--md-gray-50); }
.site-header.gescrold .nav-streep { background: var(--border-default); }

/* Smal scherm: alleen logo + contactknop; de secties staan toch onder elkaar */
@media (max-width: 760px) {
  .header-binnen { padding: 0 20px; gap: 12px; }
  .site-header .navlink, .site-header .nav-streep { display: none; }
  .logo { flex-shrink: 0; width: 150px; height: 42px; }
  .logo-vast { width: 150px; }
  .logo-anim { width: 217px; height: 122px; left: -34px; }
}

/* --------------------------------------------------------------------------
   Hero — split-diagonaal: navy paneel links, sky paneel met foto rechts
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--fg-1);
  background: var(--bg-canvas);
}
/* subtiel stippenraster op het navy vlak */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(27, 49, 86, .10) 1px, transparent 1.3px);
  background-size: 34px 34px;
  pointer-events: none;
}

/* Rechterpaneel in sky, met schuine snede */
.hero-paneel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  background:
    radial-gradient(70% 60% at 55% 42%, #5CB9E4 0%, rgba(92, 185, 228, 0) 70%),
    #4DAEDC;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
/* dunne lichte kantlijn langs de snede */
.hero-naad {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  transform: translateX(-9px);
  background: var(--md-sky-200);
  clip-path: polygon(15% 0, 15.9% 0, 0.9% 100%, 0 100%);
  z-index: 1;
}

.hero-persoon {
  position: absolute;
  right: -44px;
  bottom: 0;
  height: min(80svh, 780px);
  max-width: none;
  width: auto;
  filter: drop-shadow(-14px 20px 38px rgba(10, 24, 40, .35));
  animation: md-rise 1s .3s var(--ease-standard) both;
}

.hero-inhoud {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px clamp(20px, 5vw, 80px) clamp(110px, 15vh, 170px);
}
.hero h1 {
  font-size: clamp(40px, 4.9vw, 70px);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: var(--weight-black);
  color: var(--md-navy-800);
  margin: 0 0 18px;
  max-width: 10.5ch;
  animation: md-rise .7s .15s var(--ease-standard) both;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand-sky-text);
}
.hero-sub {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 26rem;
  margin: 0 0 40px;
  text-wrap: pretty;
  animation: md-rise .7s .3s var(--ease-standard) both;
}
.btn-outline-navy {
  background: transparent;
  border: 1px solid var(--md-navy-300, #7B91B7);
  border-color: #7B91B7;
  color: var(--md-navy-700);
  font-weight: var(--weight-medium);
}
.btn-outline-navy:hover { background: var(--md-navy-50); border-color: var(--md-navy-400); }

.hero-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  animation: md-rise .7s .45s var(--ease-standard) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-persoon, .hero h1, .hero-sub, .hero-knoppen { animation: none; }
}

/* Smal scherm: navy boven met tekst, sky onder met figuur; snede blijft schuin */
@media (max-width: 900px) {
  .hero { align-items: flex-start; }
  .hero-inhoud { padding: 112px clamp(20px, 6vw, 40px) 50svh; }
  .hero h1 { font-size: clamp(40px, 11vw, 58px); }
  .hero-paneel {
    top: auto;
    left: 0;
    width: 100%;
    height: 46svh;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  }
  .hero-naad {
    top: auto;
    left: 0;
    width: 100%;
    height: 46svh;
    transform: translateY(-7px);
    background: var(--md-sky-200);
    clip-path: polygon(0 12%, 100% 0, 100% 2.2%, 0 14.2%);
  }
  .hero-persoon {
    right: 50%;
    transform: translateX(50%);
    height: 46svh;
    min-width: 104vw;
    object-fit: cover;
    object-position: center bottom;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-persoon { animation: hero-rijs-mobiel 1s .3s var(--ease-standard) both; }
}
@keyframes hero-rijs-mobiel {
  from { opacity: 0; transform: translateX(50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(50%); }
}

/* -- oude hero-klassen, alleen nog gebruikt door varianten.html ----------- */
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 42%;
}
.hero-sluier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 20, 32, .94) 0%, rgba(14, 20, 32, .86) 30%, rgba(14, 20, 32, .55) 52%, rgba(14, 20, 32, .12) 72%, rgba(14, 20, 32, 0) 88%),
    linear-gradient(180deg, rgba(14, 20, 32, .55) 0%, rgba(14, 20, 32, 0) 26%);
}
.hero-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--md-sky-300);
}

/* --------------------------------------------------------------------------
   Diensten — drie scenes, gewisseld door de schuine merknaaad (scroll-wipe)
   -------------------------------------------------------------------------- */
.diensten-scroll {
  height: 340svh;
  position: relative;
}
.diensten-plak {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.dienst-vlak {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  will-change: clip-path;
}
.vlak-0 { background: var(--bg-canvas); z-index: 1; }
.vlak-1 { background: linear-gradient(180deg, #F4F9FC 0%, #E4F1F8 100%); z-index: 2; }
.vlak-2 { background: linear-gradient(180deg, #3EA2D4 0%, #4DAEDC 55%, #5CB9E4 100%); z-index: 3; color: var(--md-navy-800); }

.vlak-binnen {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 104px clamp(24px, 5vw, 80px) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.vlak-kicker {
  font-size: 14px;
  font-weight: var(--weight-semi);
  color: var(--brand-sky-text);
  margin: 0 0 10px;
}
.vlak-2 .vlak-kicker { color: var(--md-navy-700); }

.dienst-vlak h2 {
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: var(--weight-black);
  margin: 0 0 16px;
  text-wrap: balance;
}
.vlak-0 h2 { color: var(--fg-1); }

.vlak-sub {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 46ch;
  text-wrap: pretty;
  color: var(--fg-2);
}
.vlak-2 .vlak-sub { color: rgba(14, 27, 51, .84); }

.dienst-punten {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}
.dienst-punten li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
}
.dienst-punten li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--md-sky-400);
}
.vlak-2 .dienst-punten { border-color: rgba(14, 27, 51, .22); }
.vlak-2 .dienst-punten li { border-color: rgba(14, 27, 51, .22); color: rgba(14, 27, 51, .84); }
.vlak-2 .dienst-punten li::before { background: var(--md-navy-600); }

.dienst-cta { height: 50px; padding: 0 26px; gap: 10px; }
.btn-navy {
  background: var(--md-navy-600);
  color: #fff;
  font-weight: var(--weight-semi);
  border: none;
}
.btn-navy:hover { background: var(--md-navy-700); }

.dienst-beeld {
  aspect-ratio: 480 / 330;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(10, 18, 34, .16);
}
.vlak-2 .dienst-beeld { border-color: rgba(255, 255, 255, .5); box-shadow: 0 24px 54px rgba(10, 30, 50, .3); }
.dienst-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* subtiele parallax binnen de scene, gestuurd door --d */
.dienst-vlak h2 { transform: translateY(calc(var(--d, 0) * -22px)); }
.dienst-vlak .vlak-sub { transform: translateY(calc(var(--d, 0) * -40px)); }
.dienst-vlak .dienst-punten { transform: translateY(calc(var(--d, 0) * -60px)); }
.dienst-vlak .dienst-cta { transform: translateY(calc(var(--d, 0) * -80px)); }
.dienst-vlak .dienst-beeld { transform: translateY(calc(var(--d, 0) * 30px)); }

/* het merktandwiel */
.diensten-tandwiel {
  position: absolute;
  left: clamp(-140px, -8vw, -60px);
  bottom: clamp(-120px, -6vw, -50px);
  width: clamp(300px, 30vw, 460px);
  height: auto;
  color: var(--md-sky-200);
  opacity: .5;
  z-index: 5;
  will-change: transform;
  transition: color .4s var(--ease-standard), opacity .4s var(--ease-standard);
}
.diensten-scroll[data-scene="2"] .diensten-tandwiel { color: rgba(255, 255, 255, .45); }

@media (max-width: 900px) {
  .diensten-scroll { height: 360svh; }
  .vlak-binnen {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 88px clamp(20px, 6vw, 40px) 28px;
    align-content: center;
  }
  .dienst-cijfers span { font-size: clamp(110px, 30vw, 180px); }
  .dienst-vlak h2 { font-size: clamp(29px, 7.6vw, 60px); margin-bottom: 10px; }
  .vlak-sub { font-size: 15.5px; margin-bottom: 16px; }
  .dienst-punten { margin-bottom: 20px; }
  .dienst-punten li { font-size: 14px; padding: 9px 0 9px 28px; }
  .dienst-punten li::before { top: 15px; }
  .dienst-cta { height: 46px; padding: 0 22px; }
  .dienst-beeld { aspect-ratio: auto; height: clamp(150px, 22svh, 210px); }
}

/* Telefoon: geen sticky scrub, maar drie kaarten die je opzij veegt.
   Je ziet er net als op de laptop één tegelijk, dus foto en knop herhalen
   zich niet, en het vegen gebruikt de vloeiende scroll van het toestel zelf. */
@media (max-width: 760px) {
  .diensten-scroll {
    height: auto;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF6FB 100%);
    padding: clamp(52px, 10vw, 76px) 0 clamp(30px, 6vw, 44px);
  }
  .diensten-plak {
    position: static;
    height: auto;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    padding: 4px 16px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .diensten-plak::-webkit-scrollbar { display: none; }

  .dienst-vlak {
    position: relative;
    inset: auto;
    flex: 0 0 87%;
    scroll-snap-align: center;
    display: block;
    will-change: auto;
    clip-path: none !important;
    visibility: visible !important;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(14, 27, 51, .10);
  }
  .vlak-2 { border-color: rgba(255, 255, 255, .6); }

  /* beeld boven, tekst eronder: leest als een kaart */
  .vlak-binnen {
    display: flex;
    flex-direction: column-reverse;
    gap: 18px;
    padding: 20px 20px 24px;
    height: 100%;
  }
  .dienst-beeld { height: auto; aspect-ratio: 480 / 330; }
  .dienst-cta { width: 100%; justify-content: center; }

  /* het tandwiel lag hier bovenop de tekst; op deze breedte hoort het er niet */
  .diensten-tandwiel { display: none; }
  /* parallax hoort bij de scrub; los daarvan zou het alleen schokken */
  .dienst-vlak h2, .dienst-vlak .vlak-sub, .dienst-vlak .dienst-punten,
  .dienst-vlak .dienst-cta, .dienst-vlak .dienst-beeld { transform: none !important; }
}

/* Stippen onder de kaarten: laten zien dat er meer naast staat */
.dienst-stippen { display: none; }
@media (max-width: 760px) {
  .dienst-stippen {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .dienst-stippen button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dienst-stippen button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--md-sky-200, #BFE0F2);
    transition: background .25s var(--ease-standard), width .25s var(--ease-standard);
  }
  .dienst-stippen button[aria-current="true"]::before {
    width: 22px;
    border-radius: 4px;
    background: var(--md-sky-400);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dienst-vlak h2, .dienst-vlak .vlak-sub, .dienst-vlak .dienst-punten,
  .dienst-vlak .dienst-cta, .dienst-vlak .dienst-beeld { transform: none; }
}

/* --------------------------------------------------------------------------
   Toepassingen — naaf-diagram: tandwiel-motor met lijnen naar elk team
   -------------------------------------------------------------------------- */
.toepassingen {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF6FB 100%);
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
}
/* zelfde stippenraster als de hero, zodat het familie blijft */
.toepassingen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(27, 49, 86, .08) 1px, transparent 1.3px);
  background-size: 34px 34px;
  pointer-events: none;
}
.toepassingen-binnen {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) clamp(24px, 5vw, 80px);
}
.toepassingen-kop {
  max-width: 620px;
  margin: 0 auto clamp(48px, 5.5vw, 80px);
  text-align: center;
}
.toepassingen-kop h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: var(--weight-black);
  color: var(--fg-1);
  margin: 0 0 14px;
  text-wrap: balance;
}
.toepassingen-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

/* Het diagram: kern in het midden, twee kaarten links, twee rechts */
.hub {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 340px) minmax(150px, 1fr) minmax(230px, 340px);
  grid-template-rows: auto auto;
  gap: clamp(36px, 6vw, 84px) 0;
  align-items: center;
}

.hub-lijnen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.hub-lijn {
  fill: none;
  stroke: #C3E1F3;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s var(--ease-standard),
              stroke var(--duration-normal) var(--ease-standard);
}
.hub-lijn[data-n="1"] { transition-delay: .15s; }
.hub-lijn[data-n="2"] { transition-delay: .30s; }
.hub-lijn[data-n="3"] { transition-delay: .45s; }
.hub-lijn.actief { stroke: var(--md-sky-400); }

/* lichtpuls die van de motor naar het team stroomt */
.hub-puls {
  fill: none;
  stroke: var(--md-sky-400);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 100;
  opacity: 0;
}
@keyframes md-hub-puls { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
.hub-zichtbaar .hub-puls {
  opacity: .95;
  animation: md-hub-puls 3.4s linear infinite;
}
.hub-zichtbaar .hub-puls[data-n="1"] { animation-delay: .85s; }
.hub-zichtbaar .hub-puls[data-n="2"] { animation-delay: 1.7s; }
.hub-zichtbaar .hub-puls[data-n="3"] { animation-delay: 2.55s; }
.hub-puls.actief { animation-duration: 1.3s; }

.hub-zichtbaar .hub-lijn { stroke-dashoffset: 0; }

/* de motor zelf */
.hub-kern {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  z-index: 2;
  width: clamp(112px, 12vw, 152px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  box-shadow: 0 18px 44px rgba(14, 27, 51, .12);
}
.hub-tandwiel {
  width: 56%;
  height: auto;
  color: var(--md-navy-600);
  will-change: transform;
}

/* de vier teams */
.hub-kaart {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 26px);
  transition: border-color var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              opacity .6s var(--ease-standard);
}
.hub-kaart:hover {
  border-color: var(--md-sky-300);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(14, 27, 51, .08);
}
.kaart-1 { grid-column: 1; grid-row: 1; }
.kaart-2 { grid-column: 3; grid-row: 1; }
.kaart-3 { grid-column: 1; grid-row: 2; }
.kaart-4 { grid-column: 3; grid-row: 2; }

/* kaarten schuiven zachtjes in zodra het diagram in beeld komt */
.hub-js .hub-kaart { opacity: 0; transform: translateY(14px); }
.hub-js.hub-zichtbaar .hub-kaart { opacity: 1; transform: none; }
.hub-js.hub-zichtbaar .kaart-2 { transition-delay: .1s; }
.hub-js.hub-zichtbaar .kaart-3 { transition-delay: .2s; }
.hub-js.hub-zichtbaar .kaart-4 { transition-delay: .3s; }
.hub-js.hub-zichtbaar .hub-kaart:hover { transition-delay: 0s; }

.toepassing-icoon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--md-navy-600);
  color: var(--md-sky-300);
}
.hub-kaart h3 {
  font-size: 18px;
  font-weight: var(--weight-bold);
  letter-spacing: -.01em;
  color: var(--fg-1);
  margin: 2px 0 6px;
}
.hub-kaart p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 899px) {
  .hub { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .hub-lijnen { display: none; }
  .hub-kern { grid-column: 1; grid-row: auto; width: 96px; margin-bottom: 12px; }
  .kaart-1, .kaart-2, .kaart-3, .kaart-4 { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-lijn { transition: none; stroke-dashoffset: 0; }
  .hub-puls { animation: none !important; opacity: 0 !important; }
  .hub-js .hub-kaart { opacity: 1; transform: none; transition: none; }
  .hub-tandwiel { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Aanpak — tijdlijn die zich vult terwijl je scrolt
   -------------------------------------------------------------------------- */
.aanpak { background: #fff; }
.aanpak-binnen {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 80px);
}
.aanpak-kop {
  max-width: 660px;
  margin: 0 auto clamp(48px, 6vw, 84px);
  text-align: center;
}
.aanpak-kop h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: var(--weight-black);
  color: var(--fg-1);
  margin: 0 0 14px;
  text-wrap: balance;
}
.aanpak-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.tijdlijn { position: relative; max-width: 780px; margin: 0 auto; }
.tijdlijn-spoor {
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border-subtle);
}
.tijdlijn-vulling {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: var(--md-sky-400);
}

.tl-stap {
  position: relative;
  display: flex;
  gap: clamp(22px, 3.5vw, 38px);
  padding-bottom: clamp(44px, 6vw, 72px);
  opacity: .38;
  transition: opacity .45s var(--ease-standard);
}
.tl-stap:last-child { padding-bottom: 0; }
.tl-stap.aan { opacity: 1; }

.tl-bol {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  position: relative;
  z-index: 1;
  transition: border-color .45s var(--ease-standard),
              background .45s var(--ease-standard),
              color .45s var(--ease-standard),
              box-shadow .45s var(--ease-standard);
}
.tl-stap.aan .tl-bol {
  border-color: var(--md-sky-400);
  background: var(--md-navy-600);
  color: #fff;
  box-shadow: 0 10px 26px rgba(27, 49, 86, .25);
}

.tl-principe {
  display: inline-block;
  font-size: 12.5px;
  font-weight: var(--weight-semi);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-sky-text);
  margin-top: 6px;
}
.tl-tekst h3 {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: var(--weight-bold);
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--fg-1);
  margin: 6px 0 10px;
  text-wrap: balance;
}
.tl-tekst p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
  max-width: 58ch;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .tijdlijn-spoor { left: 21px; }
  .tl-bol { width: 44px; height: 44px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-stap { opacity: 1; transition: none; }
  .tl-stap .tl-bol { transition: none; }
  .tijdlijn-vulling { height: 100% !important; }
}

/* --------------------------------------------------------------------------
   Contact — sky-afsluiter die het hero-paneel spiegelt, en lichte footer
   -------------------------------------------------------------------------- */
.contact-sky {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 55% 42%, #5CB9E4 0%, rgba(92, 185, 228, 0) 70%),
    #4DAEDC;
}
.footlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* comfortabel tikdoel op telefoons */
  color: var(--fg-2);
  transition: color var(--duration-fast) var(--ease-standard);
}
.footlink:hover { color: var(--fg-1); }