@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-grotesk.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    --wit: #FFFFFF;
    --zwart: #0F0F10;
    --grijs: #2A2A2D;
    --vlak: #EAEAEA;
    --zacht: #F1F1F3;
    --lijn: rgba(15, 15, 16, .14);
    --wit-66: rgba(255, 255, 255, .70);
    --wit-lijn: rgba(255, 255, 255, .22);
    --maat: 1140px;
    --sectie: clamp(4.5rem, 10vw, 8rem);
    --uit-quart: cubic-bezier(.25, 1, .5, 1);
    --uit-expo: cubic-bezier(.16, 1, .3, 1);
    --z-nav: 40;
  }

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

  body {
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--wit);
    color: var(--zwart);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--zwart); color: var(--wit); }

  h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; margin: 0; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  img { max-width: 100%; display: block; }

  :focus-visible { outline: 2px solid var(--zwart); outline-offset: 3px; border-radius: 2px; }
  .op-zwart :focus-visible { outline-color: var(--wit); }

  .maat { max-width: var(--maat); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

  .previewbalk {
    background: var(--vlak);
    font-size: .8rem;
    color: var(--grijs);
    text-align: center;
    padding: .45rem 1rem;
  }
  .previewbalk strong { color: var(--zwart); font-weight: 700; }

  /* ---------- header ---------- */
  header {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--wit);
    border-bottom: 1px solid var(--lijn);
  }
  .kop { display: flex; align-items: center; gap: 1.4rem; height: 4.25rem; }
  .logo { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
  nav.hoofdmenu { display: flex; gap: 1.5rem; }
  nav.hoofdmenu a {
    text-decoration: none; font-size: .95rem; font-weight: 600; color: var(--grijs);
    padding-block: .35rem; border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  nav.hoofdmenu a:hover { color: var(--zwart); }
  nav.hoofdmenu a[aria-current="page"] { color: var(--zwart); border-bottom-color: var(--zwart); }

  .kop-acties { display: flex; align-items: center; gap: .65rem; }

  .logo img { height: 2.35rem; width: auto; display: block; }
  .voet-logo img { height: 2rem; width: auto; display: block; }

  .taal-schakel { display: flex; border: 1px solid var(--lijn); border-radius: 99px; overflow: hidden; }
  .taal-schakel a { font-size: .8rem; font-weight: 700; padding: .4rem .7rem; color: var(--grijs); text-decoration: none; }
  .taal-schakel a.actief { background: var(--zwart); color: var(--wit); }
  .taal-schakel a:not(.actief):hover { background: var(--vlak); color: var(--zwart); }


  .roi-pill {
    position: relative;
    font-size: .88rem; font-weight: 700;
    border: 1px solid var(--zwart);
    border-radius: 99px;
    padding: .5rem 1.1rem;
    text-decoration: none;
    white-space: nowrap;
  }
  .roi-pill::after {
    content: ''; position: absolute; inset: -1px;
    border: 1px solid var(--zwart); border-radius: 99px;
    opacity: 0; pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .roi-pill::after { animation: roi-ring 4.5s var(--uit-quart) infinite; }
    @keyframes roi-ring {
      0%, 72% { transform: scale(1); opacity: 0; }
      76% { opacity: .55; }
      100% { transform: scale(1.28); opacity: 0; }
    }
  }
  .roi-pill:hover { background: var(--vlak); }

  .inlog {
    font-size: .88rem; font-weight: 700;
    background: var(--zwart); color: var(--wit);
    border-radius: 99px; padding: .55rem 1.2rem;
    text-decoration: none; white-space: nowrap;
  }

  .portaal-pill {
    font-size: .88rem; font-weight: 700;
    border: 1px solid var(--zwart);
    border-radius: 99px; padding: .5rem 1.1rem;
    text-decoration: none; white-space: nowrap;
  }
  .portaal-pill:hover { background: var(--vlak); }

  /* ingelogd: de ROI-marketingknop maakt plaats voor Beheer/Portaal + Uitloggen */
  body.ingelogd .roi-pill { display: none; }

  /* ---------- privacybeleid ---------- */
  .privacy-nav { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
  .privacy-nav-titel { width: 100%; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); margin-bottom: .35rem; }
  .privacy-nav a {
    font-size: .85rem; font-weight: 600; color: var(--grijs);
    text-decoration: none;
    border: 1px solid var(--lijn); border-radius: 99px;
    padding: .35rem .85rem;
  }
  .privacy-nav a:hover { color: var(--zwart); background: var(--vlak); }
  .privacy-body { max-width: 72ch; }
  .privacy-sectie + .privacy-sectie { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
  .privacy-sectie h2 { font-size: 1.5rem; margin-bottom: 1rem; }
  .privacy-body p + p, .privacy-body p + ul, .privacy-body ul + p { margin-top: 1em; }
  .privacy-body ul { margin: 1em 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
  .tabel-wrap { overflow-x: auto; margin-block: 1.25rem; }
  .data-tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
  .data-tabel th { background: var(--vlak); text-align: left; padding: .6rem .8rem; font-weight: 700; }
  .data-tabel td { border-top: 1px solid var(--lijn); padding: .6rem .8rem; vertical-align: top; }

  .menuknop { display: none; font-weight: 700; font-size: .95rem; padding: .4rem .6rem; }

  @media (max-width: 1060px) {
    .menuknop { display: block; }
    nav.hoofdmenu {
      display: none;
      position: absolute; left: 0; right: 0; top: 100%;
      background: var(--wit); border-bottom: 1px solid var(--lijn);
      flex-direction: column; gap: 0;
      padding: .5rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
    }
    nav.hoofdmenu a { padding-block: .7rem; border-bottom: none; font-size: 1.05rem; }
    .nav-open nav.hoofdmenu { display: flex; }
    .roi-pill { display: none; }
  }

  /* ---------- views & taal ---------- */
  .taal[hidden] { display: none; }
  .view { display: none; }
  .view.actief { display: block; }
  @media (prefers-reduced-motion: no-preference) {
    .view.actief { animation: viewfade .4s var(--uit-quart); }
    @keyframes viewfade { from { opacity: 0; } }
  }

  section { padding-block: var(--sectie); }
  .sectielijn { border-top: 1px solid var(--lijn); }
  .band-zacht { background: var(--zacht); border-block: 1px solid var(--lijn); }

  .kicker { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }

  h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 22ch; }
  .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--grijs); max-width: 58ch; }
  .prosa { max-width: 65ch; }
  .prosa p + p { margin-top: 1em; }

  /* ---------- knoppen ---------- */
  .knopstel { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
  .knop {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--zwart); color: var(--wit);
    font-weight: 700; font-size: 1rem;
    padding: .95rem 1.7rem; border-radius: 99px;
    text-decoration: none;
  }
  .knop .pijl { display: inline-block; }
  @media (prefers-reduced-motion: no-preference) {
    .knop { transition: transform .35s var(--uit-quart); }
    .knop:active { transform: scale(.97); }
    .knop .pijl { transition: transform .3s var(--uit-expo); }
    .knop:hover .pijl { transform: translateX(5px); }
  }
  .knop.rustig { background: transparent; color: var(--zwart); border: 1px solid var(--zwart); }
  .knop.rustig:hover { background: var(--vlak); }
  .op-zwart .knop { background: var(--wit); color: var(--zwart); }
  .op-zwart .knop.rustig { background: transparent; color: var(--wit); border-color: var(--wit-lijn); }
  .op-zwart .knop.rustig:hover { background: rgba(255,255,255,.08); }

  /* ---------- hero ---------- */
  .hero { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
  .hero-vlak { position: relative; }
  .netwerk {
    position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
  }
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
  }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

  .hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
  .hero h1 .regel { display: block; }
  .hero h1 .regel + .regel { color: var(--grijs); }

  .werkregel {
    margin-top: 1.75rem;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--grijs);
    min-height: 1.7em;
  }
  .werkregel .getypt { color: var(--zwart); font-weight: 700; }
  .cursor { display: inline-block; width: 2px; height: 1em; background: var(--zwart); vertical-align: -0.12em; }
  @media (prefers-reduced-motion: no-preference) {
    .cursor { animation: knipper 1.05s steps(1) infinite; }
    @keyframes knipper { 50% { opacity: 0; } }
  }

  .hero .knopstel { margin-top: 2.25rem; }

  @media (prefers-reduced-motion: no-preference) {
    .anim-klaar .hero-instap .regel-mask { display: block; overflow: hidden; }
    .anim-klaar .hero-instap .regel { transform: translateY(110%); animation: regelop .9s var(--uit-expo) forwards; }
    .anim-klaar .hero-instap.i2 .regel { animation-delay: .14s; }
    .anim-klaar .instap-zacht { opacity: 0; filter: blur(6px); transform: translateY(14px); animation: zachtop .9s var(--uit-quart) forwards; }
    .anim-klaar .instap-zacht.i3 { animation-delay: .45s; }
    .anim-klaar .instap-zacht.i4 { animation-delay: .6s; }
    .anim-klaar .instap-zacht.i5 { animation-delay: .75s; }
    @keyframes regelop { to { transform: none; } }
    @keyframes zachtop { to { opacity: 1; filter: none; transform: none; } }
  }

  /* werkfeed: wat jouw AI vandaag doet */
  .werkfeed {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 14px;
    overflow: hidden;
    font-size: .92rem;
  }
  .werkfeed-kop {
    display: flex; justify-content: space-between; align-items: center;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--lijn);
    font-weight: 700; font-size: .85rem;
  }
  .wf-status { display: inline-flex; align-items: center; gap: .45rem; color: var(--grijs); font-weight: 600; }
  .wf-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--zwart); }
  @media (prefers-reduced-motion: no-preference) {
    .wf-stip { animation: wf-puls 1.6s ease-in-out infinite; }
    @keyframes wf-puls { 50% { opacity: .25; } }
  }
  .werkfeed-lijst { list-style: none; margin: 0; padding: .55rem 0; min-height: 16rem; }
  .werkfeed-lijst li {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: .8rem; align-items: baseline;
    padding: .6rem 1.1rem;
  }
  .werkfeed-lijst li + li { border-top: 1px solid var(--zacht); }
  .werkfeed-lijst time { color: var(--grijs); font-size: .8rem; font-variant-numeric: tabular-nums; }
  .werkfeed-lijst p { line-height: 1.45; }
  .wf-vink { font-weight: 800; }
  .werkfeed-lijst li.bezig .wf-vink { color: var(--grijs); font-weight: 400; }
  @media (prefers-reduced-motion: no-preference) {
    .werkfeed-lijst li.nieuw { animation: wf-in .5s var(--uit-quart); }
    @keyframes wf-in { from { opacity: 0; transform: translateY(8px); } }
  }

  /* ---------- vertrouwensstrook ---------- */
  .strook { border-block: 1px solid var(--lijn); padding-block: 1.1rem; background: var(--zacht); }
  .strook ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem 2.5rem;
    font-size: .92rem; font-weight: 600; color: var(--grijs);
  }

  /* ---------- tweekolom ---------- */
  .twee { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); }
  @media (max-width: 800px) { .twee { grid-template-columns: 1fr; } }

  /* ---------- stappen ---------- */
  .stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: 3rem; }
  .stap { border-top: 2px solid var(--zwart); padding-top: 1.25rem; }
  .stap .nr { font-weight: 800; font-size: 1rem; }
  .stap h3 { font-size: 1.3rem; margin-top: .5rem; }
  .stap p { color: var(--grijs); margin-top: .6rem; font-size: .97rem; }

  /* ---------- indexlijst ---------- */
  .indexlijst { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--lijn); }
  .indexlijst li { border-bottom: 1px solid var(--lijn); }
  .indexrij {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
    gap: 1rem 2rem; align-items: baseline;
    padding: 1.4rem 0; text-decoration: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .indexrij { transition: padding-left .35s var(--uit-quart), background .35s var(--uit-quart); }
  }
  .indexrij:hover { background: var(--zacht); padding-left: 1rem; }
  .indexrij h3 { font-size: 1.15rem; }
  .indexrij p { color: var(--grijs); font-size: .95rem; }
  .indexrij .status { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); white-space: nowrap; }
  @media (max-width: 700px) { .indexrij { grid-template-columns: 1fr; gap: .35rem; } }

  /* ---------- foto's ---------- */
  .foto { border-radius: 14px; overflow: hidden; }
  .foto img { width: 100%; height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: no-preference) {
    .anim-klaar .foto.onthul { transition: opacity .9s var(--uit-quart), transform .9s var(--uit-quart), clip-path .9s var(--uit-expo); clip-path: inset(8% 8% 8% 8% round 14px); }
    .anim-klaar .foto.onthul.zichtbaar { clip-path: inset(0 0 0 0 round 14px); }
  }
  .foto-breed { aspect-ratio: 21 / 9; }
  .foto-breed img { object-position: center 40%; }

  /* mensen-sectie op home */
  .mensen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  @media (max-width: 800px) { .mensen { grid-template-columns: 1fr; } }
  .mensen .foto { aspect-ratio: 4 / 5; max-height: 520px; }
  .mensen .foto img { object-position: center 25%; }

  /* ---------- zwarte band ---------- */
  .op-zwart {
    background: radial-gradient(1100px 500px at 85% 0%, #232326 0%, var(--zwart) 55%);
    color: var(--wit);
  }
  .op-zwart h2, .op-zwart h3 { color: var(--wit); }
  .op-zwart .lede, .op-zwart p { color: var(--wit-66); }
  .veilig-punten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; margin-top: 3rem; }
  .veilig-punten > div { border-top: 1px solid var(--wit-lijn); padding-top: 1rem; }
  @media (prefers-reduced-motion: no-preference) { .veilig-punten > div { transition: border-color .4s var(--uit-quart); } }
  .veilig-punten > div:hover { border-top-color: var(--wit); }
  .veilig-punten h3 { font-size: 1.05rem; }
  .veilig-punten p { font-size: .93rem; margin-top: .5rem; }

  /* ---------- vlakken & pakketten ---------- */
  .vlak-blok { background: var(--vlak); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); }

  .pakketten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
  .pakket { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; }
  .pakket.duister { background: var(--zwart); border-color: var(--zwart); color: var(--wit); }
  .pakket.duister h3 { color: var(--wit); }
  .pakket.duister p, .pakket.duister li { color: var(--wit-66); }
  .pakket h3 { font-size: 1.4rem; }
  .pakket .positie { font-weight: 700; color: var(--zwart); margin-top: .4rem; }
  .pakket.duister .positie { color: var(--wit); }
  .pakket ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .95rem; color: var(--grijs); }
  .pakket li::before { content: '+  '; font-weight: 800; color: inherit; }
  .pakket .voetje { margin-top: auto; padding-top: 1.5rem; font-size: .85rem; }

  /* ---------- faq ---------- */
  .faq { max-width: 760px; margin-top: 2.5rem; border-top: 1px solid var(--lijn); }
  .faq details { border-bottom: 1px solid var(--lijn); }
  .faq summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
    padding: 1.15rem 0;
    font-weight: 700; font-size: 1.05rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; font-weight: 400; font-size: 1.4rem; line-height: 1; }
  .faq details[open] summary::after { content: '\2212'; }
  .faq details p { color: var(--grijs); padding-bottom: 1.25rem; max-width: 60ch; }

  /* ---------- formulier ---------- */
  .formulier { max-width: 560px; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2.5rem; }
  .veld { display: flex; flex-direction: column; gap: .4rem; }
  .veld label { font-weight: 700; font-size: .92rem; }
  .veld input, .veld textarea {
    font: inherit; color: inherit;
    background: var(--wit);
    border: 1px solid var(--grijs);
    border-radius: 8px;
    padding: .75rem .9rem;
  }
  .veld input::placeholder, .veld textarea::placeholder { color: #5c5c60; }
  .veld input:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--zwart); outline-offset: 1px; }
  .form-melding { background: var(--vlak); border-radius: 8px; padding: .9rem 1.1rem; font-size: .95rem; }

  /* ---------- founders ---------- */
  .founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
  .founder-kaart { background: var(--zacht); border-radius: 14px; padding: 1.5rem; text-decoration: none; display: block; }
  .founder-kaart:hover { outline: 2px solid var(--zwart); outline-offset: 0; }
  .founder-kaart .foto { aspect-ratio: 4 / 5; margin-bottom: 1.5rem; }
  .founder-kaart .foto img { object-position: center 20%; }
  @media (prefers-reduced-motion: no-preference) {
    .founder-kaart .foto img { transition: transform .8s var(--uit-quart); }
    .founder-kaart:hover .foto img { transform: scale(1.04); }
  }
  .founder-kaart h3 { font-size: 1.5rem; }
  .founder-kaart .rol { color: var(--grijs); font-weight: 600; margin-top: .25rem; }
  .founder-kaart p { margin-top: 1rem; color: var(--grijs); font-size: .97rem; }

  .founder-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  @media (max-width: 800px) { .founder-hero { grid-template-columns: 1fr; } }
  .founder-hero .foto { aspect-ratio: 3 / 4; }

  .feitjes { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--lijn); font-size: .95rem; }
  .feitjes li { display: flex; justify-content: space-between; gap: 2rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
  .feitjes li span:first-child { color: var(--grijs); font-weight: 600; white-space: nowrap; }
  .feitjes li span:last-child { text-align: right; }

  /* ---------- schets ---------- */
  .schets { border: 1px dashed var(--grijs); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3rem; }
  .schets .kicker { margin-bottom: 1.5rem; display: block; }
  .schets ol { margin: 0; padding-left: 1.2rem; color: var(--grijs); display: flex; flex-direction: column; gap: .5rem; }

  .slot-cta h2 { max-width: 18ch; }
  .slot-cta .knopstel { margin-top: 2.25rem; }

  /* ---------- footer ---------- */
  footer { background: radial-gradient(1100px 500px at 15% 0%, #1c1c1f 0%, var(--zwart) 55%); color: var(--wit-66); font-size: .92rem; }
  .voet { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding-block: 3.5rem 2.5rem; }
  @media (max-width: 700px) { .voet { grid-template-columns: 1fr; } }
  .voet .logo { color: var(--wit); margin: 0; display: inline-block; }
  .voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
  .voet a { color: var(--wit-66); text-decoration: none; }
  .voet a:hover { color: var(--wit); }
  .voet-onder {
    border-top: 1px solid var(--wit-lijn);
    padding-block: 1.25rem;
    display: flex; flex-wrap: wrap; gap: .5rem 2rem;
    font-size: .82rem;
  }

  /* ---------- reveal ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .anim-klaar .onthul { opacity: 0; transform: translateY(20px); filter: blur(3px); transition: opacity .8s var(--uit-quart), transform .8s var(--uit-quart), filter .8s var(--uit-quart); transition-delay: calc(var(--i, 0) * 90ms); }
    .anim-klaar .onthul.zichtbaar { opacity: 1; transform: none; filter: none; }
  }