:root {
  /* ==========================================================================
     VASTPILOT-PALET  —  één bron voor deze site.
     vp/scene.css en vp/dgx.css lezen deze --vp-* tokens met een var()-fallback;
     zolang ze hier staan, hebben die fallbacks niets meer te doen.
     Alle contrastwaarden in de comments zijn gemeten op gerenderde pixels
     (WCAG 2.1 relatieve luminantie), niet geschat.
     ========================================================================== */

  /* --- vlakken, van licht naar donker ------------------------------------ */
  --vp-kaart:        #FBF9F4;  /* kaartvlak, tevens paginavlak van deze template */
  --vp-papier:       #F3F0E9;  /* papier, het vlak onder de kaarten              */
  --vp-band:         #EBE7DC;  /* bandvlak, de donkerste lichte ondergrond       */
  --vp-lijn:         #E1DBCE;  /* randen en lijnen                               */

  /* --- inkt en tekst ------------------------------------------------------ */
  --vp-navy:         #1E3A5F;  /* alle gewone tekst. 10,93 op kaart, 10,11 op papier */
  --vp-ink:          var(--vp-navy);  /* koppen gebruiken hetzelfde Vastpilot-blauw */
  --vp-body:         var(--vp-navy);  /* lopende tekst gebruikt hetzelfde blauw     */
  --vp-muted:        #8A857A;  /* GEEN tekstkleur: 3,23 op papier, 2,97 op band.
                                  Alleen voor stippen, streepjes en lijnen.      */
  --vp-gedempt:      rgba(34, 48, 59, .70);
                               /* gedempte TEKST. rgba(34,48,59,.50) uit de tabel
                                  haalt maar 2,89 op kaart en zakt daarmee door de
                                  4,5 voor kleine tekst. Op .70 is het 5,05 op
                                  kaart, 4,86 op papier en 4,67 op band.         */

  /* --- accent, contextafhankelijk ---------------------------------------- */
  /* Dit is de splitsing van --color--blue-500 uit de template. Dat was één
     helder accent dat zowel op licht als op donker stond. Bij Vastpilot kan dat
     niet: #FF6B35 haalt 2,49 op papier en 2,29 op band, ver onder de 3:1 voor
     grote en 4,5:1 voor kleine tekst. Dus twee tokens met één betekenis elk. */
  --vp-accent-op-licht:  #a5441a;  /* accent DAT TEKST OF VLAK DRAAGT op een licht
                                      vlak. 5,80 op kaart, 5,36 op papier,
                                      4,94 op band, 5,50 op de accenttint.      */
  --vp-accent-op-donker: #FF6B35;  /* accent op een donker vlak. 6,67 op #0E1116,
                                      6,23 op #141920, 4,06 op navy: daar dus wel
                                      grote tekst en iconen, geen kleine tekst.  */
  --vp-accent-hover:     #883815;  /* accent bij hover. 7,61 op kaart            */
  --vp-accent-tint:      #FDF1E9;  /* zachte accenttint als vlak                 */
  --vp-gloed:            #FF6B35;  /* decoratieve gloed, schijn en LED. Blijft
                                      overal warm oranje, ook op een licht vlak,
                                      want een gloed draagt geen tekst.          */
  --vp-led:              #FF8C46;  /* de LED van de machine                      */

  /* --- teal --------------------------------------------------------------- */
  --vp-teal:         #0FA48D;  /* teal als VLAK of stip. Als tekst 2,97 op kaart
                                  en 2,75 op papier, dus nooit als tekst.        */
  --vp-teal-donker:  #0B7C6C;  /* teal donker als vlak of rand. Als tekst 4,13 op
                                  band en 4,49 op papier: net te licht.          */
  --vp-teal-tekst:   #0A7161;  /* teal als TEKST op licht. 4,79 op band, 5,20 op
                                  papier, 5,63 op kaart, 5,24 op de tealtint.    */
  --vp-teal-tint:    #E3F5F1;  /* tealtint als vlak                              */

  /* --- donkere vlakken, voor de machinescene ------------------------------ */
  --vp-donker-top:   #0E1116;
  --vp-donker:       linear-gradient(180deg, #0E1116, #141920);
  --vp-op-donker:    #F5F2EA;  /* tekst op donker. 16,90 op #0E1116              */
  --vp-zachte-rand:  rgba(34, 48, 59, .10);

  /* ==========================================================================
     TEMPLATE-TOKENS.  De namen blijven die van de Webflow-export, de waarden
     komen uit het palet hierboven. Zo blijft de rest van dit bestand ongemoeid
     en staat de herkleuring op één plek.
     ========================================================================== */
  --color--white: var(--vp-kaart);  /* kaartvlak, en het paginavlak van deze template */
  --color--font-family--urbanist: Urbanist, sans-serif;
  --color--black: var(--vp-donker-top);  /* donker vlak */
  --_typography---paragraph-font-size--extra-small-paragraph: 14px;
  --_typography---font-line-height--medium: 120%;
  --_typography---font-weight--normal: 400;
  --color--blue-950: var(--vp-navy);  /* navy */
  --_typography---typography--h1: 80px;
  --_typography---font-weight--semi-bold: 600;
  --_typography---typography--h2: 44px;
  --_typography---font-line-height--small: 100%;
  --_typography---typography--h3: 28px;
  --_typography---font-line-height--extra-small: 95%;
  --_typography---font-weight--bold: 700;
  --color--gray-950: var(--vp-ink);  /* koppen, ink */
  --_typography---typography--h4: 24px;
  --_spacing---spacing--60px: 60px;
  --_spacing---spacing--32px: 32px;
  --color--blue-gray: var(--vp-navy);  /* navy */
  --_typography---paragraph-font-size--large-paragraph: 20px;
  --color--orange-600: var(--vp-accent-op-licht);  /* accent op licht */
  --color--green-700: var(--vp-teal);  /* teal, klaar en lokaal */
  --color--blue-700: var(--vp-accent-op-licht);  /* primaire actie */
  --color--green-800: var(--vp-teal-donker);  /* teal donker */
  --color--orange-700: var(--vp-accent-hover);  /* accent bij hover */
  --color--gray-900: var(--vp-body);  /* lopende tekst */
  --_spacing---radius--100px: 100px;
  --_typography---paragraph-font-size--small-paragraph: 16px;
  --_typography---paragraph-font-size--small-text: 12px;
  --_typography---paragraph-font-size--paragraph: 18px;
  /* Sectieruimte. Stond op 80px, dus 160px tussen twee secties, en dat is te
     krap voor koppen van 40 tot 68px. Nu vloeiend: 96px onder 1120px breed,
     112px op 1440 en 136px op 1920, met een plafond van 140px. Alleen .section
     leest dit token; de twee gepinde scenes hebben geen padding en blijven
     daarmee ongemoeid. */
  --_spacing---spacing--section: clamp(96px, 5vw + 40px, 140px);
  --_spacing---radius--24px: 24px;
  --color--gray-50: var(--vp-papier);  /* paginavlak, papier */
  --_typography---font-line-height--large: 140%;
  --color--black-100: var(--vp-zachte-rand);  /* zachte rand */
  --color--blue-50: var(--vp-accent-tint);  /* zachte accenttint */
  --color--orange-50: var(--vp-accent-tint);  /* accenttint */
  --color--green-100: var(--vp-teal-tint);  /* tealtint */
  --color--gray-200: var(--vp-lijn);  /* randen en lijnen */
  --color--black-500: rgba(34, 48, 59, .50);  /* gedempt vlak. Als TEKST te licht, zie --vp-gedempt */
  --color--blue-500: var(--vp-accent-op-licht);
  /* GESPLITST. In de template was dit één helder accent op zowel lichte als
     donkere vlakken. Elk gebruik in dit bestand staat op een LICHT vlak, dus de
     naam draagt hier de licht-helft. Voor het accent op een donker vlak gebruik
     je --vp-accent-op-donker, voor een gloed --vp-gloed. */
  --color--gray-100: var(--vp-band);  /* bandvlak */
  --_typography---font-weight--light: 300;
  --_typography---font-weight--medium: 500;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  background-color: var(--color--white);
  font-family: var(--color--font-family--urbanist);
  color: var(--vp-navy);
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  --_typography---paragraph-font-size--extra-small-paragraph: 14px;
  --_typography---font-line-height--medium: 120%;
  --_typography---font-weight--normal: 400;
  --_typography---typography--h1: 80px;
  --_typography---font-weight--semi-bold: 600;
  --_typography---typography--h2: 44px;
  --_typography---font-line-height--small: 100%;
  --_typography---typography--h3: 28px;
  --_typography---font-line-height--extra-small: 95%;
  --_typography---font-weight--bold: 700;
  --_typography---typography--h4: 24px;
  --_typography---paragraph-font-size--large-paragraph: 20px;
  --_typography---paragraph-font-size--small-paragraph: 16px;
  --_typography---paragraph-font-size--small-text: 12px;
  --_typography---paragraph-font-size--paragraph: 18px;
  --_typography---font-line-height--large: 140%;
  --_typography---font-weight--light: 300;
  --_typography---font-weight--medium: 500;
  --_spacing---spacing--60px: 60px;
  --_spacing---spacing--32px: 32px;
  --_spacing---radius--100px: 100px;
  /* Sectieruimte. Stond op 80px, dus 160px tussen twee secties, en dat is te
     krap voor koppen van 40 tot 68px. Nu vloeiend: 96px onder 1120px breed,
     112px op 1440 en 136px op 1920, met een plafond van 140px. Alleen .section
     leest dit token; de twee gepinde scenes hebben geen padding en blijven
     daarmee ongemoeid. */
  --_spacing---spacing--section: clamp(96px, 5vw + 40px, 140px);
  --_spacing---radius--24px: 24px;
}

h1 {
  color: var(--color--blue-950);
  font-size: var(--_typography---typography--h1);
  line-height: var(--_typography---typography--h1);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: -2px;
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  color: var(--color--blue-950);
  font-size: var(--_typography---typography--h2);
  line-height: var(--_typography---font-line-height--small);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: -1px;
  margin-top: 0;
  margin-bottom: 0;
}

h3 {
  color: var(--color--blue-950);
  font-size: var(--_typography---typography--h3);
  line-height: var(--_typography---font-line-height--extra-small);
  font-weight: var(--_typography---font-weight--bold);
  margin-top: 0;
  margin-bottom: 0;
}

h4 {
  color: var(--color--gray-950);
  font-size: var(--_typography---typography--h4);
  line-height: var(--_typography---font-line-height--small);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin-top: 0;
  margin-bottom: 0;
}

.hero-section {
  padding-top: 160px;
  padding-bottom: 120px;
  position: relative;
  overflow: hidden;
}

.container {
  max-width: 1040px;
  padding-left: 20px;
  padding-right: 20px;
}

.text-center {
  text-align: center;
}

.margin-bottom {
  margin-bottom: var(--_spacing---spacing--60px);
}

.common-heading-div {
  grid-column-gap: var(--_spacing---spacing--32px);
  grid-row-gap: var(--_spacing---spacing--32px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.common-heading-div.text-center {
  justify-content: flex-start;
  align-items: center;
}

.large-paragraph {
  color: var(--color--blue-gray);
  font-size: var(--_typography---paragraph-font-size--large-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin-bottom: 0;
}

.large-paragraph.hero-paragraph {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(18px, .9vw + 12px, 24px);
  line-height: var(--_typography---font-line-height--large);
}

.large-paragraph.onboarding-label-text-01 {
  color: var(--color--orange-600);
}

.large-paragraph.onboarding-label-text-02 {
  /* teal als tekst. --color--green-700 (#0FA48D) haalt hier maar 2,97 op kaart
     en 2,75 op papier. 20px op gewicht 400 telt als kleine tekst, dus 4,5 is de
     eis. --vp-teal-tekst haalt 5,63 op kaart en 4,79 op band. */
  color: var(--vp-teal-tekst);
}

.large-paragraph.benefit-paragraph {
  max-width: 356px;
}

.large-paragraph.benefit-text-color-01 {
  color: var(--color--blue-700);
}

.large-paragraph.benefit-text-color-02 {
  /* idem: --color--green-800 (#0B7C6C) blijft met 4,49 op papier en 4,13 op
     band net onder de 4,5. */
  color: var(--vp-teal-tekst);
}

.large-paragraph.benefit-text-color-03 {
  color: var(--color--orange-700);
}

.large-paragraph.experience-paragraph {
  max-width: 400px;
  color: var(--color--gray-900);
}

.large-paragraph.footer-feature-heading {
  color: var(--color--blue-700);
  font-weight: 700;
}

.large-paragraph._404-paragraph {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.button-div {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.app-button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  /* Deze knop heeft geen eigen vlak en staat op de herocirkel. Op 320 en 375
     schuift de warme kern van dat verloop tot achter de knop; gemeten op de
     gerenderde pixels haalt --vp-accent-op-licht daar 3,61 en zakt hij door de
     4,5 voor 14px-tekst. --vp-accent-hover haalt op diezelfde pixels 4,74 en op
     de kaart 7,61. Er is geen hover-regel op deze knop, dus die toon was vrij. */
  border: 2px solid var(--vp-accent-hover);
  border-radius: var(--_spacing---radius--100px);
  color: var(--vp-accent-hover);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  justify-content: center;
  align-items: center;
  padding: 8px 20px 8px 16px;
  text-decoration: none;
  display: flex;
}

.app-info-div {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.app-info-text {
  font-size: var(--_typography---paragraph-font-size--small-text);
  letter-spacing: .5px;
}

.app-icon {
  width: 26px;
  height: 26px;
}


.nav-dropdown-icon {
  color: var(--color--blue-950);
  margin-right: 0;
  position: static;
}

.dropdown-list.w--open {
  filter: drop-shadow(0 0 60px #0000001a);
  background-color: var(--vp-kaart);
  /* rand: was #27272733, een neutrale grijsrand op 20%. Op een creme vlak leest
     dat koud, dus dezelfde dekking maar in ink. */
  border: 1px solid rgba(34, 48, 59, .20);
  border-radius: 17px;
  width: auto;
  padding: 20px;
  top: 50px;
  left: 0;
}



.nav-link {
  color: var(--color--blue-950);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  /* Was `padding: 0`. Het raakvlak was daarmee de letterhoogte zelf: 19px,
     ver onder de eis van 44px. Verticale padding tilt het raakvlak op zonder
     de letter groter te maken; nav-menu-div en nav-wrapper centreren het
     element verticaal, dus de balk groeit een paar pixels mee en verschuift
     niets naast zich. Gemeten met Playwright op 992, 1024, 1140, 1200, 1440
     en 1920, en in het uitgeklapte mobiele paneel op 375, 768 en 991. */
  padding: 13px 0;
  transition: color .14s;
}

.nav-link:hover {
  color: var(--color--blue-gray);
}

.navbar {
  background-color: #0000;
  width: 100%;
  margin-top: 60px;
  position: absolute;
}

.nav-menu-div {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.brand-logo-link {
  padding-left: 0;
}

.nav-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-link-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 2px solid var(--color--blue-950);
  border-radius: var(--_spacing---radius--100px);
  color: var(--color--blue-950);
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  justify-content: center;
  align-items: center;
  padding: 9px 16px;
  text-decoration: none;
  display: flex;
}

.hero-image-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section {
  padding-top: var(--_spacing---spacing--section);
  padding-bottom: var(--_spacing---spacing--section);
  position: relative;
  overflow: hidden;
}

/* Stond op 0. De strook met de bewijsregels plakte daardoor tegen de hero en
   was op 1440 maar 131px hoog. De hero draagt zelf al padding-bottom, dus een
   halve sectieruimte is hier genoeg; een hele zou de strook van de hero
   losknippen waar hij juist bij hoort. */
.section.padding-top {
  padding-top: calc(var(--_spacing---spacing--section) * .55);
}

.feature-count-card {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.feature-count-detail-div {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.h3-heading {
  color: var(--color--blue-950);
  font-size: var(--_typography---typography--h3);
  line-height: var(--_typography---font-line-height--extra-small);
  font-weight: var(--_typography---font-weight--bold);
  margin-top: 0;
  margin-bottom: 0;
}

.blue-text-color {
  color: var(--color--blue-700);
}

.paragraph {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin-bottom: 0;
  text-decoration: none;
}

.paragraph.review-text {
  color: var(--color--white);
  letter-spacing: .3px;
}

.paragraph.review-text.gray-950-text {
  color: var(--color--gray-950);
}

.paragraph.hero-template-paragraph {
  max-width: 665px;
  margin-left: auto;
  margin-right: auto;
}

.feature-count-wrapper {
  grid-column-gap: 45px;
  grid-row-gap: 35px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.feature-count-wrapper.hero-image-wrapper {
  grid-column-gap: 32px;
  flex-flow: row;
}

.feature-count-icon {
  line-height: 50%;
}

.feature-grid {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.feature-grid._01 {
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}

.feature-card {
  grid-column-gap: 35px;
  grid-row-gap: 35px;
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--color--gray-50);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  overflow: hidden;
}

.feature-image-wrapper {
  height: 196px;
}

.feature-image-wrapper._01 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.feature-image-wrapper._02 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.feature-image-wrapper._03 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.feature-image._01 {
  transform: translate(7%);
}

.feature-image._02 {
  transform: translate(14%);
}

.feature-image._03 {
  transform: translate(22%);
}

.feature-image._04, .feature-image._05 {
  filter: drop-shadow(0 0 3px #00000040);
}

.feature-image._06 {
  opacity: .61;
  filter: drop-shadow(0 0 3px #00000040);
  margin-right: -25px;
}

.feature-image._07 {
  opacity: .61;
  filter: drop-shadow(0 0 3px #00000040);
  margin-left: -25px;
}

.feature-image._08, .feature-image._09 {
  filter: drop-shadow(0 0 3px #00000040);
}

.feature-detail-div {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.gray-text {
  color: var(--color--gray-900);
}

.blue-950-color {
  color: var(--color--blue-950);
}

.extra-small-paragaph {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  line-height: var(--_typography---font-line-height--large);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin-bottom: 0;
}

.extra-small-paragaph.feature-paragraph {
  max-width: 277px;
}

.extra-small-paragaph.onboarding-paragraph {
  max-width: 214px;
}

.extra-small-paragaph.resources-paragraph {
  max-width: 400px;
  height: 58.7813px;
}

.extra-small-paragaph.qr-text {
  color: var(--color--white);
  letter-spacing: .5px;
}

.feature-blink-border {
  border-radius: 100px;
  padding: 8px;
}

.feature-blink-border._02 {
  border: 1px solid #0FA48D59;
}

.feature-blink-border._03 {
  border: 1px solid #0FA48D1a;
}

.feature-blink-border._04 {
  border: 1px solid #0FA48D0d;
}

.feature-blink-border.orange {
  border: 1px solid var(--vp-gloed);
}

.feature-blink-border.orange-02 {
  border: 1px solid #FF6B3559;
}

.feature-blink-border.orange-03 {
  border: 1px solid #FF6B351a;
}

.feature-blink-border.orange-04 {
  border: 1px solid #FF6B350d;
}

.feature-blink-border._01 {
  border: 1px solid var(--vp-teal);
}

.feature-image-div {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

/* ---- GESCHIEDENIS van deze regel, twee eerdere rondes. Lees de stand van nu
   in het blok dat vlak boven .hero-bg-circle staat. ---- */
/* De kern stond op var(--vp-gloed), dus vol #FF6B35 tot 15 procent van de
   straal. Op 1600 bij 1600 vulde dat het beeld in plaats van het te kleuren.
   Nu 42 procent oranje, met een extra stop op 34 procent zodat het verloop
   zelf, en daarmee de diepte, ongemoeid blijft. Zelfde middelpunt, zelfde
   maat, zelfde vorm. */
/* DE HALVE BOOG DWARS DOOR DE HERO.
   Dit element is een cirkel van 1600 bij 1600 met border-radius 100% en
   overflow: hidden, dus zijn rand is een harde knip. Het verloop stond
   gecentreerd op 50%% 130%%, dus 480px ONDER de onderrand van het element, en
   de eindvorm is farthest-corner (2228px). De onderste rand van de cirkel ligt
   daarmee op 21 tot 31 procent van het verloop, en daar staat de kleur nog op
   rgba(255,107,53,.12). De knip sneed dus dwars door een vlak dat nog volop
   warm was.

   GEMETEN, 1440 bij 900, voor de ingreep: op x1100 een sprong van 37 op een
   enkele pixelrij (251,233,223 naar 251,249,244), op x400 een sprong van 21.
   De gemeten boog-y (373, 459, 561, 686, 656, 592, 373) komt op de pixel
   overeen met de cirkelvergelijking om het middelpunt (720, -48) met straal
   800. Het was dus de KNIP en niet de laatste kleurstop.

   De oplossing is het verloop op het element zelf centreren en op closest-side
   zetten. Dan is 100 procent van het verloop precies de straal van de cirkel,
   en loopt de alpha daar naar nul. Waar niets meer geverfd wordt, kan een knip
   ook niets meer afsnijden, ongeacht welke kleur eronder ligt.

   De warmte blijft. De oude kern van .42 op 14 procent lag op 312px van een
   middelpunt 480px onder het element, dus VOLLEDIG buiten de doos: die is
   nooit in beeld geweest. Wat er wel stond was de band tussen .12 en de tint,
   en die staat er nu nog: 0 procent is .055, precies de waarde die
   --vp-accent-tint over de body geeft, en de piek op 72 procent is .125,
   waar de oude band op .12 zat. De uitloop van 86 naar 100 procent is 112px
   en dat leest als een gloed die oplost in plaats van een rand. */
/* DE GLOED WERD OP BIJNA ELKE PAGINA AFGESNEDEN.
   Dit element was een doos van 1600 bij 1600 die met translate(-50%, -53%)
   omhoog werd geschoven. De onderkant lag daarmee op ELKE pagina op dezelfde
   752px onder de bovenkant van de hero, terwijl .hero-section per pagina
   tussen 349 en 1316 hoog is en op overflow: hidden staat. Elke hero korter
   dan 752 sneed dus dwars door een verloop dat nog volop warm was.

   GEMETEN op 1440, middenkolom, laatste pixelrij binnen de hero tegen de
   eerste erbuiten: modules 252,236,226 -> 251,249,244 (sprong 18 op blauw),
   traject 17,5, veelgestelde-vragen 17,5, contact 17,5, werkwijze 13,7,
   privacy 9,5, kennisbank 8,5. Homepage 0 (hero 1310 hoog, de gloed paste)
   en 404 0 (die cirkel hing al aan de onderkant).

   De doos is nu de hero zelf: inset 0, dus altijd precies zo hoog als de
   sectie. Het verloop staat als expliciete cirkel met straal --vp-gloed-r op
   hetzelfde middelpunt als eerst (--vp-gloed-y, gerekend vanaf de bovenkant
   van de hero), dus op een hoge hero ziet de gloed er hetzelfde uit.

   Wat erbij komt is het masker. Dat staat in PROCENTEN, en procenten rekenen
   tegen de hoogte van dit element, dus tegen de hoogte van de hero. Op elke
   pagina loopt de dekking daardoor in de laatste 44 procent van de hero naar
   nul, hoe hoog die hero ook is. Een masker zet de ALPHA naar nul in plaats
   van er een kleur overheen te leggen: de gloed komt dus per definitie uit op
   wat eronder ligt en kan geen eigen rand meer tekenen, ook niet als dat vlak
   ooit een andere kleur krijgt dan rgb(251,249,244).

   overflow: hidden op .hero-section BLIJFT staan. Hij knipte de hero-plaatjes,
   die op 30 augustus 2026 zijn weggehaald, maar hij knipt nog steeds de 1262px
   brede .hero-bg-circle-small; zonder die regel is er wel horizontale overloop.
   Voor de gloed doet hij niets meer, want die past nu binnen de hero. */
.hero-bg-circle {
  /* middelpunt van de gloed, vanaf de bovenkant van de hero. Per breekpunt
     dezelfde plek als de oude translate: -53% van 1600 is -848, plus de
     straal van 800 geeft -48. */
  --vp-gloed-y: -48px;
  --vp-gloed-r: 800px;
  /* WARMER, EN ALLEEN OP DEKKING EN VERDELING.
     De tint blijft #FF6B35, dat is --vp-gloed uit het palet; er komt geen
     nieuwe kleur bij. Wat verandert is de dekking, ongeveer verdubbeld, en de
     plek van de piek: die stond op 72 procent van de straal en dat valt bij
     een hero van 546 hoog onder de onderrand, dus buiten beeld. Op 60 procent
     staat hij op elke pagina in de hero.

     GEMETEN per zone, warmte als het gemiddelde van rood min blauw over de
     hele hero en heet aandeel als de fractie pixels met rood min blauw boven
     60, op 1440. Modules 16,7 -> 23,8. Werkwijze 17,0 -> 23,8. Traject
     17,4 -> 24,4. Veelgestelde vragen 17,0 -> 23,8. Contact 17,8 -> 24,6.
     Kennisbank 16,2 -> 22,8. Privacy 16,5 -> 22,6. 404 14,5 -> 21,3.
     Homepage 12,8 -> 17,2; die hero is 1310 hoog, dus daar telt veel vlak mee
     waar geen gloed ligt. Het midden tussen de 18,7 van na het temperen en de
     29,6 van ervoor is 24,2, en daar zit dit op.

     Het hete aandeel komt niet mee omhoog: 0,007 tot 0,015 op 1440, tegen
     0,006 tot 0,015 ervoor. Dat is geen fout in het verloop maar een gevolg
     van .hero-bg-circle-small, het wazige crèmevlak dat MET DEZELFDE STRAAL
     over de kern van de gloed ligt. Rood min blauw boven 60 vraagt daar een
     dekking van 0,42 in het verloop, en dan komt de gemiddelde warmte op 37
     uit: ruim boven de 29,6 die al te dominant werd bevonden. Gemeten met een
     crèmevlak op 0,15 in plaats van 0,55 haalt het hete aandeel wel 0,11,
     maar dan staat de warmte op 36,8. De 0,09 uit het midden is dus niet te
     halen zonder voorbij de stand te gaan die eerder is afgekeurd. */
  background-image: radial-gradient(circle var(--vp-gloed-r) at 50% var(--vp-gloed-y),
    rgba(255, 107, 53, .11) 0%,
    rgba(255, 107, 53, .15) 35%,
    rgba(255, 107, 53, .225) 60%,
    rgba(255, 107, 53, .21) 75%,
    rgba(255, 107, 53, .125) 88%,
    rgba(255, 107, 53, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%,
    rgba(0, 0, 0, .88) 68%, rgba(0, 0, 0, .58) 80%,
    rgba(0, 0, 0, .26) 90%, rgba(0, 0, 0, .06) 96%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 56%,
    rgba(0, 0, 0, .88) 68%, rgba(0, 0, 0, .58) 80%,
    rgba(0, 0, 0, .26) 90%, rgba(0, 0, 0, .06) 96%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: none;
  pointer-events: none;
}

/* De 404-gloed hing al aan de ONDERKANT van de sectie en liep daar netjes
   naar nul; die had de knip dus niet. Zelfde plek in de nieuwe opzet: het
   middelpunt ligt een straal boven de onderrand, dus de alpha is op de
   onderrand precies nul. Het masker bijt hier pas in de laatste 10 procent,
   want anders zou het de warme band juist wegpoetsen. */
.hero-bg-circle._404-circle {
  --vp-gloed-y: calc(100% - 800px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 90%, rgba(0, 0, 0, 0) 100%);
}

.hero-detail-div {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  display: flex;
  position: relative;
}

/* Was var(--vp-accent-tint) op volle dekking, 1262 bij 1262 met blur 50.
   Nu diezelfde tint op 55 procent, dus dichter bij papier. De opacity van
   het element blijft met rust: daar hangt de Webflow-interactie
   c50bb834-ec50-a886-14ed-871979d64cab aan. */
/* Dit vlak stond zonder inset in een flexbox die op center stond, dus het
   werd gecentreerd in de oude doos van 1600 bij 1600. Die doos is nu de hero
   en dus niet meer vierkant, dus staat de plek er hier expliciet in: het
   middelpunt valt samen met het middelpunt van de gloed. Dat gaat met
   left/top plus een negatieve marge en NIET met transform, want op de
   homepage hangt de Webflow-interactie c50bb834-ec50-a886-14ed-871979d64cab
   (muisparallax) aan de transform van dit element. */
.hero-bg-circle-small {
  filter: blur(50px);
  background-color: rgba(253, 241, 233, .55);
  border-radius: 100%;
  width: 1262px;
  height: 1262px;
  margin-top: -631px;
  margin-left: -631px;
  position: absolute;
  top: var(--vp-gloed-y, -48px);
  left: 50%;
}

.section-line {
  background-color: var(--color--black-100);
  width: 100%;
  max-width: 1000px;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto auto 0% 50%;
  transform: translate(-50%);
}

.onboarding-grid {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 80px;
}

.onboarding-card {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  transition: all .35s;
  display: flex;
}

.onboarding-card:hover {
  transform: translate(0, -24px);
}

.onboarding-image-div {
  border-radius: var(--_spacing---radius--24px);
  text-align: center;
  padding-top: 14px;
  padding-left: 14px;
  padding-right: 14px;
  overflow: hidden;
}

.onboarding-image-div._01 {
  background-color: var(--color--blue-50);
}

.onboarding-image-div._02 {
  background-color: var(--color--orange-50);
}

.onboarding-image-div._03 {
  background-color: var(--color--green-100);
}

.onboarding-detail-div {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  display: flex;
}

.onboarding-label-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.onboarding-image {
  filter: drop-shadow(0 0 2px #00000040);
}

.onboarding-icon {
  line-height: 50%;
}

.benefit-grid {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  place-items: center stretch;
}

.benefit-card {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.benefit-card.margin {
  margin-left: 60px;
}

.benefit-image-wrapper {
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--color--gray-50);
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 55px;
  display: flex;
}

.benefit-image-div {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.benefit-list-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.benefit-list-div {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.benefit-icon {
  line-height: 50%;
}

.benefit-list-flex-div {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.benefit-image {
  z-index: 1;
  position: relative;
}

.benefit-image-01 {
  position: absolute;
  inset: 131px auto auto -85px;
}

.benefit-image-02 {
  filter: drop-shadow(0 0 4px #00000040);
  position: absolute;
  inset: 187px auto auto -123px;
}

.benefit-image-03 {
  filter: drop-shadow(0 0 4px #00000040);
  position: absolute;
  inset: 28px -125px auto auto;
}

.benefit-image-04 {
  position: absolute;
  inset: 214px -87px auto auto;
}

.benefit-image-05 {
  position: absolute;
  inset: 90px auto auto -27px;
}

.benefit-image-06 {
  position: absolute;
  inset: 139px auto auto -27px;
}

.benefit-image-07 {
  z-index: 1;
  box-shadow: none;
  filter: drop-shadow(0 1.8px 2.88px #00000040);
  border-radius: 100%;
}

.benefit-image-blink-01 {
  z-index: 1;
  background-color: #FF6B351a;  /* gloed op 10%, dekking als in de template */
  border-radius: 100px;
  padding: 16px;
  position: absolute;
  inset: 250px -72px auto auto;
}

.benefit-image-blink-02 {
  background-color: #FF6B351a;  /* gloed op 10%, dekking als in de template */
  border-radius: 100px;
  padding: 16px;
}





.resources-grid {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
}

.resources-card {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

/* De kennisbankkaart is zelf de link naar /kennisbank/. Een <a> erft de
   kleur van de tekst niet vanzelf, en een onderstreping over een hele kaart
   leest als een fout. De kop verkleurt bij hover, zodat er een aanwijsbaar
   antwoord op de muis staat. */
a.resources-card {
  color: inherit;
  text-decoration: none;
}

a.resources-card .h4-heading {
  transition: color .14s ease;
}

a.resources-card:hover .h4-heading,
a.resources-card:focus-visible .h4-heading {
  color: var(--vp-accent-hover);
}

.resources-image-wrapper {
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--color--gray-50);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.resources-image-div {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.resources-image {
  margin-top: 40px;
}

.resources-detail-div {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.resources-image-02 {
  position: absolute;
  inset: 133px auto auto -38px;
}

.resources-image-03 {
  position: absolute;
  inset: 218px -40px auto auto;
}

.small-text {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--small-text);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: .5px;
  margin-bottom: 0;
}

.small-text.blue-text-color {
  color: var(--color--blue-700);
}

.small-text.footer-divider {
  transform: rotate(20deg);
}

.h4-heading {
  color: var(--color--gray-950);
  font-size: var(--_typography---typography--h4);
  line-height: 100%;
  font-weight: var(--_typography---font-weight--semi-bold);
  margin-top: 0;
  margin-bottom: 0;
}

.h4-heading.blue-text-color {
  color: var(--color--blue-700);
}

.h4-heading.license-heading {
  margin-bottom: 32px;
}

.resources-image-04 {
  margin-left: 15px;
}

.resources-image-05 {
  margin-top: 14px;
  margin-bottom: 6px;
}

.experience-slider-wrapper {
  background-color: #0000;
  height: 100%;
}

.experience-slider-mask {
  max-width: 500px;
  overflow: visible;
}

.none {
  display: none;
}

.experience-slider {
  margin-right: 12px;
}

.experience-card {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.experience-image-div {
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--color--gray-50);
  justify-content: center;
  align-items: center;
  height: 270px;
  display: flex;
  overflow: hidden;
}

.experience-detail-div {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  display: flex;
}

.experience-icon {
  line-height: 50%;
}

.small-paragraph {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin-bottom: 0;
}

.small-paragraph.experience-paragraph {
  max-width: 415px;
}

.small-paragraph.testimonial-video-social-media-text {
  color: var(--color--gray-950);
}

.small-paragraph.black-500-text {
  /* --color--black-500 is rgba(34,48,59,.50) en haalt 2,89 op kaart: te licht
     voor tekst van 16px. --vp-gedempt is dezelfde inkt op .70 en haalt 5,05. */
  color: var(--vp-gedempt);
}

.small-paragraph.template-paragraph {
  margin-top: 24px;
  margin-bottom: 24px;
}

.small-paragraph.template-link {
  transition: all .14s;
}

.small-paragraph.template-link:hover {
  color: var(--color--blue-700);
}

/* ===========================================================================
   DE PIJLEN VAN DE KAARTENSLIDER

   Ze stonden in de template op display: none, waardoor zes kaarten van samen
   3072px in een venster van 500px alleen via zes stipjes te bereiken waren.

   Plaatsing: rechtsonder, op dezelfde regel als de stippen, BUITEN het
   kaartvenster. Webflow zet ze standaard met inset: 0 en 80px breed over de
   volle hoogte van de slider, en dan ligt de linkerpijl boven op de eerste
   kaart. Dat mag hier niet, dus alles wordt overschreven.

   overflow: visible op .experience-slider-mask blijft ongemoeid: dat is wat de
   half uitstekende volgende kaart laat zien.
   =========================================================================== */
.vp-sliderpijl.w-slider-arrow-left,
.vp-sliderpijl.w-slider-arrow-right {
  inset: auto 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--vp-lijn);
  border-radius: 100%;
  background-color: var(--vp-kaart);
  color: var(--vp-navy);
  font-size: 15px;
  overflow: visible;
  transition: border-color .175s ease, color .175s ease, background-color .175s ease;
}

.vp-sliderpijl.w-slider-arrow-left {
  right: 56px;
}

.vp-sliderpijl.w-slider-arrow-left:hover,
.vp-sliderpijl.w-slider-arrow-right:hover {
  border-color: var(--vp-accent-op-licht);
  background-color: var(--vp-accent-tint);
  color: var(--vp-accent-op-licht);
}

/* webflow.css zet outline: 0 op :focus van deze twee. Dat halen we terug. */
.vp-sliderpijl.w-slider-arrow-left:focus-visible,
.vp-sliderpijl.w-slider-arrow-right:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* Bij de eerste en de laatste kaart zet webflow.js w-slider-disabled op de
   pijl. Dan doet hij niets meer en hoort hij dat te laten zien. */
.vp-sliderpijl.w-slider-arrow-left.w-slider-disabled,
.vp-sliderpijl.w-slider-arrow-right.w-slider-disabled {
  opacity: .35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .vp-sliderpijl.w-slider-arrow-left,
  .vp-sliderpijl.w-slider-arrow-right {
    transition: none;
  }
}

.experience-slide-nav {
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-top: 30px;
  padding-top: 5px;
  display: flex;
  position: static;
}

.download-bitco-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.bitco-qr-card {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  background-color: var(--color--blue-700);
  border-radius: 14px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: inline-flex;
  box-shadow: 0 0 0 8px rgba(165, 68, 26, .10);
}





.testimonial-social-media-div.gap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}



.testimonial-card._01 {
  grid-column-gap: 19px;
  grid-row-gap: 19px;
  /* Enige plek waar het accent een VLAK is dat tekst draagt. Als vulling telt
     het als donker: kaarttekst erop haalt 5,80, dus de licht-helft van de
     splitsing. Met #FF6B35 zou diezelfde tekst op 2,49 uitkomen. */
  background-color: var(--color--blue-500);
  flex-flow: column;
  display: flex;
}

/* Gedempte tekst BINNEN die gevulde kaart is de uitzondering: daar is de
   ondergrond donker. --vp-gedempt is inkt en haalt hier gemeten 1,85; dezelfde
   demping in kaartkleur haalt 4,66. */
.testimonial-card._01 .black-500-text {
  color: rgba(251, 249, 244, .85);
}

.testimonial-card._02 {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: var(--color--gray-100);
  flex-flow: column;
  display: flex;
}




.faq-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto auto auto;
}



.footer {
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.footer-detail-div {
  z-index: 1;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.footer-info-div {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}



.footer-line {
  z-index: 1;
  background-color: var(--color--black-100);
  width: 100%;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
  position: relative;
}

.footer-div {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.copyright-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.copyright-div {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.back-to-top-link {
  background-color: var(--color--gray-950);
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  color: var(--color--gray-950);
  background-image: url('../images/arrow-up.svg'), url('../images/arrow-up.svg');
  background-position: 50% 150%, 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  border-radius: 100px;
  transition: all .21s;
}

.back-to-top-link:hover {
  background-position: 50%, 50% -50%;
}

/* DEZELFDE BOOG ALS IN DE HERO, EN HIER OVER DE HELE RAND.
   Dit was een VLAKKE vulling (#FF6B350f, dus 6 procent oranje) in een cirkel
   met border-radius 100%. Een vlakke kleur in een ronde doos levert per
   definitie een harde rand op. Gemeten op de homepage, 1440 bij 900: een
   sprong van 20 als MEDIAAN over de hele zichtbare rand (251,240,232 binnen
   tegen 251,249,244 buiten). De hero-boog was plaatselijk; deze liep helemaal
   rond, en hij staat op elke pagina want de voet is gedeeld.

   Zelfde oplossing als bij .hero-bg-circle: een radial-gradient op closest-side
   die op 100 procent, dus precies op de rand, naar alpha 0 loopt. De cirkel is
   4000px en de voet toont er de bovenste 700 van, dus het zichtbare deel ligt
   tussen 65 en 100 procent van de straal. Daarom blijft de warmte tot 88
   procent op dezelfde 6 procent staan die er stond, en zit de hele uitloop in
   de laatste 12 procent: 240px, ruim genoeg om niet als rand te lezen.

   De box-shadow is weg. Die stond er om de harde rand te verzachten; nu er
   geen rand meer is, tekent hij zelf een lichte ring op de plek waar we die
   net hebben weggehaald. */
.footer-circle {
  background-image: radial-gradient(circle closest-side at 50% 50%,
    rgba(255, 107, 53, .055) 0%,
    rgba(255, 107, 53, .060) 70%,
    rgba(255, 107, 53, .055) 88%,
    rgba(255, 107, 53, 0) 100%);
  border-radius: 100%;
  width: 4000px;
  height: 4000px;
  position: absolute;
  inset: 0% auto auto 50%;
  transform: translate(-50%);
}

._404-detail-div {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

._404-section {
  padding-top: 250px;
  padding-bottom: 120px;
  position: relative;
  overflow: hidden;
}




.template-detail-div.margin {
  margin-bottom: 60px;
}







.color-box.white {
  background-color: var(--color--white);
}

.color-box.black {
  background-color: var(--color--black);
}


.color-box.black-100 {
  background-color: var(--color--black-100);
}

.color-box.blue-950 {
  background-color: var(--color--blue-950);
}

.color-box.blue-700 {
  background-color: var(--color--blue-700);
}
















.benefit-main-image-div {
  overflow: hidden;
}

/* De kolom stond op 522px op elke breedte vanaf 768px, terwijl de h1 vanaf
   992px doorgroeit naar 80px. Een kop van 80px perste zich daardoor door een
   kolom van 522px: vijf regels, het woord "extra" alleen op een regel en een
   rechterrand die van 180 naar 514px sprong. 760px geeft bij 80px ongeveer
   negentien tekens per regel, wat de kop in drie regels legt. De container is
   1040px met 20px padding, dus 760px past ruim.
   text-wrap: balance verdeelt de regels gelijkmatig in plaats van elke regel
   vol te lopen, en haalt daarmee de weesregel weg.
   De twee accentwoorden dragen samen de accentkleur en zijn samen één begrip,
   dus ze breken als blok. Gemeten op 320px: "extra werkkracht" is daar 250px
   breed in een kolom van 280px, dus de nowrap loopt nergens over. */
/* DE KOP PAKT DE BREEDTE.
   Stond op 760px, en dat gaf op elke desktopmaat VIER regels waarvan de eerste
   ("Zoekt u een") 398px was tegen 583px voor de langste: een verhouding van
   0,68 en een kop die als een smalle kolom midden op een breed scherm stond.

   De container van de template geeft 1000px inhoud (1040 min twee keer 20
   padding), en dat is de bovengrens; die container stuurt de hele site en gaat
   hier niet open. Op 1000px bleef het echter bij drie regels met een eerste
   regel van 398px, dus een verhouding van 0,47: SLECHTER dan wat er stond. De
   oorzaak is dat .blue-text-color op white-space: nowrap staat, waardoor
   "extra werkkracht" een ondeelbaar blok van 583px is. Regel 1 kon dat blok er
   net niet bij hebben: 398 + spatie + 583 is 1003 en dat past niet in 1000.

   Vier pixels tekort, dus de kop gaat van 80 naar 74px. Dat is 7 procent
   kleiner en visueel nauwelijks te zien, en het levert twee regels op in
   plaats van vier. Gemeten op 1024, 1280, 1440 en 1920: telkens 2 regels,
   langste 960px, kortste 919px, verhouding 0,96. Op 76px valt 1024 nog om naar
   drie regels (kolom is daar 984), op 74 niet meer; vandaar 74 en niet 76.
   Onder 992px verandert er niets: daar zet de breakpoint het kop-token op 60px
   en heeft deze kolom zijn eigen, smallere max-width. */
.hero-heading-div {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Sectielabels boven koppen vervallen sitebreed. Inhoudelijke labels, zoals
   een functie bij een teamlid, blijven zichtbaar. */
.common-heading-div > .large-paragraph.blue-text-color,
.heading-div > .large-paragraph.blue-text-color {
  display: none;
}

@media screen and (min-width: 992px) {
  #hero-kop {
    font-size: 74px;
  }
}

#hero-kop {
  line-height: var(--_typography---font-line-height--small);
  text-wrap: balance;
}

#hero-kop .blue-text-color {
  white-space: nowrap;
}

/* De subkop stond op 20px onder een kop van 80px en viel daardoor van het blok
   af. Nu groeit hij mee tot 24px, en de ruimte tussen kop en subkop is kleiner
   dan die tussen subkop en knoppen, zodat de drie delen als één blok lezen. */
.hero-detail-div .common-heading-div {
  grid-row-gap: clamp(16px, 1.5vw, 24px);
  gap: clamp(16px, 1.5vw, 24px);
}

.hero-detail-div .button-div {
  margin-top: clamp(6px, 1.2vw, 18px);
}

.feature-heading-div {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.onboarding-heading-div {
  max-width: 450px;
}

.benefit-heading-div {
  max-width: 400px;
}







@media screen and (max-width: 991px) {
  /* De h1 zakt hier naar 60px. Negentien tekens per regel is dan ongeveer
     560px, dus de kolom zakt mee. */
  .hero-heading-div {
    max-width: 560px;
  }

  body {
    --_typography---paragraph-font-size--extra-small-paragraph: 14px;
    --_typography---font-line-height--medium: 120%;
    --_typography---font-weight--normal: 400;
    --_typography---typography--h1: 60px;
    --_typography---font-weight--semi-bold: 600;
    --_typography---typography--h2: 40px;
    --_typography---font-line-height--small: 100%;
    --_typography---typography--h3: 26px;
    --_typography---font-line-height--extra-small: 95%;
    --_typography---font-weight--bold: 700;
    --_typography---typography--h4: 24px;
    --_typography---paragraph-font-size--large-paragraph: 20px;
    --_typography---paragraph-font-size--small-paragraph: 16px;
    --_typography---paragraph-font-size--small-text: 12px;
    --_typography---paragraph-font-size--paragraph: 18px;
    --_typography---font-line-height--large: 140%;
    --_typography---font-weight--light: 300;
    --_typography---font-weight--medium: 500;
    --_spacing---spacing--60px: 50px;
    --_spacing---spacing--32px: 25px;
    --_spacing---radius--100px: 100px;
    --_spacing---spacing--section: 84px;
    --_spacing---radius--24px: 24px;
  }

  /* Hero blijft semantisch een h1, maar gebruikt visueel dezelfde mobiele
     schaal als de bestaande homepagekop. */
  #hero-kop {
    font-size: var(--_typography---typography--h2);
  }

  .hero-section {
    padding-top: 130px;
    padding-bottom: 100px;
  }

  .large-paragraph.benefit-paragraph {
    max-width: 436px;
  }

  
  .nav-link {
    margin-left: 0;
  }

  .navbar {
    margin-top: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    transform: translate(0);
  }

  .nav-menu-div {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    background-color: var(--color--white);
    border-radius: 10px;
    flex-flow: column;
    padding: 10px 20px 24px;
    box-shadow: 0 0 5px #00000040;
  }

  .nav-link-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .feature-count-wrapper {
    grid-column-gap: 20px;
  }

  .feature-card {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .feature-image-wrapper {
    height: 160px;
  }

  .feature-image-wrapper._01 {
    justify-content: center;
    align-items: center;
  }

  .extra-small-paragaph.resources-paragraph {
    height: 58px;
  }

  .hero-bg-circle {
    /* was translate(-50%, -59%): -944 plus straal 800 */
    --vp-gloed-y: -144px;
  }

  .hero-detail-div {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }

  .onboarding-grid {
    margin-top: 60px;
  }

  .benefit-grid {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .benefit-card {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }

  .benefit-card.margin {
    margin-left: 0;
  }

  .benefit-list-wrapper {
    grid-column-gap: 25px;
  }

  .benefit-list-flex-div {
    grid-column-gap: 25px;
    grid-row-gap: 12px;
    flex-flow: wrap;
  }

  .resources-image-wrapper {
    height: 370px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .resources-image {
    width: 277.984px;
  }

  .resources-image-02 {
    width: 75px;
    top: 75px;
    left: -30px;
  }

  .resources-image-03 {
    width: 70px;
    top: 270px;
    right: -25px;
  }

  .h4-heading.license-heading {
    margin-bottom: 28px;
  }

  .experience-slider-mask {
    max-width: 450px;
  }

  .download-bitco-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  
  
  .testimonial-card._02 {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  
  
  .faq-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .footer {
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .footer-info-div {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .footer-circle {
    width: 2000px;
    height: 2000px;
  }

  ._404-section {
    padding-top: 200px;
    padding-bottom: 100px;
  }

  
  .template-detail-div.margin {
    margin-bottom: 50px;
  }

  
  
  
  .menu-button {
    background-color: #0000;
    padding: 0;
    overflow: hidden;
  }

  .menu-button.w--open {
    background-color: #0000;
  }

  .menu-toggle {
    width: 25px;
    height: 25px;
  }

  .nav-menu {
    background-color: #0000;
    border-radius: 10px;
    inset: 70px 1% auto auto;
  }

  .nav-dropdown {
    width: 100%;
  }

  .onboarding-heading-div {
    max-width: 441px;
  }

  .benefit-heading-div {
    max-width: 100%;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_typography---paragraph-font-size--extra-small-paragraph: 14px;
    --_typography---font-line-height--medium: 120%;
    --_typography---font-weight--normal: 400;
    --_typography---typography--h1: 45px;
    --_typography---font-weight--semi-bold: 600;
    --_typography---typography--h2: 34px;
    --_typography---font-line-height--small: 100%;
    --_typography---typography--h3: 24px;
    --_typography---font-line-height--extra-small: 95%;
    --_typography---font-weight--bold: 700;
    --_typography---typography--h4: 22px;
    --_typography---paragraph-font-size--large-paragraph: 20px;
    --_typography---paragraph-font-size--small-paragraph: 16px;
    --_typography---paragraph-font-size--small-text: 12px;
    --_typography---paragraph-font-size--paragraph: 18px;
    --_typography---font-line-height--large: 140%;
    --_typography---font-weight--light: 300;
    --_typography---font-weight--medium: 500;
    --_spacing---spacing--60px: 40px;
    --_spacing---spacing--32px: 20px;
    --_spacing---radius--100px: 100px;
    --_spacing---spacing--section: 68px;
    --_spacing---radius--24px: 20px;
  }

  .hero-section {
    padding-top: 110px;
    padding-bottom: 80px;
  }

  .nav-link-wrapper {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .feature-count-wrapper {
    justify-content: flex-start;
    align-items: center;
  }

  .feature-count-wrapper.hero-image-wrapper {
    grid-row-gap: 30px;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }

  .feature-grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .feature-grid._01 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .feature-card {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .feature-image-wrapper {
    height: 100%;
  }

  .feature-image._01, .feature-image._02, .feature-image._03 {
    transform: none;
  }

  .feature-detail-div {
    padding-left: 0;
    padding-right: 0;
  }

  .extra-small-paragaph.resources-paragraph {
    height: 100%;
  }

  .feature-image-div {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }

  .hero-bg-circle {
    /* was translate(-50%, -68%): -1088 plus straal 800 */
    --vp-gloed-y: -288px;
  }

  .hero-detail-div {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .onboarding-grid {
    grid-row-gap: 24px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    margin-top: 50px;
  }

  .onboarding-card {
    opacity: 1;
  }

  .onboarding-card:hover {
    transform: none;
  }

  .onboarding-image-div {
    border-radius: 20px;
  }

  .benefit-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .benefit-card {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .benefit-image-wrapper {
    padding-top: 50px;
  }

  .benefit-image-01 {
    z-index: 1;
    left: -30px;
  }

  .benefit-image-02, .benefit-image-03 {
    display: none;
  }

  .benefit-image-04 {
    z-index: 1;
    inset: auto -9% 10% auto;
  }

  .benefit-image-blink-01 {
    background-color: #0000;
    padding: 0;
    top: 287px;
    right: -25px;
  }

  .benefit-image-blink-02 {
    background-color: #0000;
    padding: 0;
  }

  .resources-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .resources-image-wrapper {
    border-radius: 20px;
    height: 350px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .resources-image {
    margin-top: 20px;
  }

  .h4-heading {
    font-size: 22px;
  }

  .h4-heading.license-heading {
    margin-bottom: 25px;
  }

  .experience-slider-mask {
    max-width: 400px;
  }

  .experience-image-div {
    border-radius: 20px;
  }

  .small-paragraph.faq-ans {
    max-width: 461px;
  }

  .experience-slide-nav {
    margin-top: 20px;
  }

  .download-bitco-wrapper {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  
  
  .testimonial-card._02 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  
  
  .faq-grid {
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr;
  }

  .footer {
    padding-top: 80px;
    padding-bottom: 50px;
  }

  .footer-detail-div {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .footer-line {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .footer-div {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }

  .footer-circle {
    width: 1500px;
    height: 1500px;
  }

  ._404-section {
    padding-top: 180px;
    padding-bottom: 80px;
  }

  
  .template-detail-div.margin {
    margin-bottom: 40px;
  }

  
  
  
  
  
  
  .hero-heading-div {
    max-width: 400px;
  }

  .onboarding-heading-div {
    max-width: 350px;
  }

  }

@media screen and (max-width: 479px) {
  body {
    --_typography---paragraph-font-size--extra-small-paragraph: 14px;
    --_typography---font-line-height--medium: 120%;
    --_typography---font-weight--normal: 400;
    --_typography---typography--h1: 38px;
    --_typography---font-weight--semi-bold: 600;
    --_typography---typography--h2: 30px;
    --_typography---font-line-height--small: 100%;
    --_typography---typography--h3: 22px;
    --_typography---font-line-height--extra-small: 95%;
    --_typography---font-weight--bold: 700;
    --_typography---typography--h4: 20px;
    --_typography---paragraph-font-size--large-paragraph: 18px;
    --_typography---paragraph-font-size--small-paragraph: 14px;
    --_typography---paragraph-font-size--small-text: 12px;
    --_typography---paragraph-font-size--paragraph: 16px;
    --_typography---font-line-height--large: 140%;
    --_typography---font-weight--light: 300;
    --_typography---font-weight--medium: 500;
    --_spacing---spacing--60px: 30px;
    --_spacing---spacing--32px: 16px;
    --_spacing---radius--100px: 100px;
    --_spacing---spacing--section: 52px;
    --_spacing---radius--24px: 18px;
  }

  .hero-section {
    padding-top: 90px;
    padding-bottom: 60px;
  }

  .large-paragraph.benefit-text-color-01, .large-paragraph.benefit-text-color-02, .large-paragraph.benefit-text-color-03 {
    font-size: 16px;
  }

  .button-div {
    flex-flow: wrap;
  }

  .app-button {
    padding: 5px 16px 5px 10px;
    font-size: 14px;
  }

  .app-info-text {
    font-size: 10px;
  }

  .dropdown-link, .nav-link {
    font-size: var(--_typography---paragraph-font-size--paragraph);
  }

  .logo {
    width: 120px;
  }

  .feature-count-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 25px;
    justify-content: flex-start;
    align-items: center;
  }

  .feature-count-wrapper.hero-image-wrapper {
    grid-column-gap: 21px;
    grid-row-gap: 25px;
  }

  .feature-card {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    border-radius: 18px;
    padding: 20px;
  }

  .feature-image-wrapper._02 {
    grid-column-gap: 10px;
    flex-flow: wrap;
  }

  .feature-image._06 {
    order: 1;
    margin-right: 0;
  }

  .feature-image._07 {
    order: 1;
    margin-left: 0;
  }

  .feature-image._09 {
    width: 112px;
  }

  .hero-bg-circle {
    /* was translate(-50%, -72%): -1152 plus straal 800. De kopie van het
       verloop die hier stond is weg: het staat nu een keer in de basis en
       alleen het middelpunt verschuift per breekpunt. Hetzelfde geldt voor
       de kopie op ._404-circle, die zijn middelpunt uit de basisregel haalt. */
    --vp-gloed-y: -352px;
  }

  .hero-detail-div {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .onboarding-grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .onboarding-image-div {
    border-radius: 18px;
  }

  .benefit-grid, .benefit-card {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .benefit-image-wrapper {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .benefit-list-wrapper {
    grid-column-gap: 20px;
  }

  .benefit-list-flex-div {
    flex-flow: column;
  }

  .benefit-image-01 {
    width: 50px;
    top: 28px;
    left: -16px;
  }

  .benefit-image-04 {
    width: 50px;
    bottom: 32%;
    right: -6%;
  }

  .benefit-image-05, .benefit-image-06, .benefit-image-07 {
    display: none;
  }

  .resources-image-wrapper {
    border-radius: 18px;
    height: 305px;
  }

  .resources-detail-div {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .resources-image-02 {
    width: 50px;
    top: 60px;
    left: -12px;
  }

  .resources-image-03 {
    width: 50px;
    top: 200px;
    right: -15px;
  }

  .small-text.footer-divider {
    display: none;
  }

  .h4-heading.license-heading {
    margin-bottom: 20px;
  }

  .experience-slider-mask {
    max-width: 100%;
  }

  .experience-image-div {
    border-radius: 18px;
    height: 200px;
  }

  .experience-image {
    width: 240px;
  }

  .experience-image._01 {
    width: 150px;
  }

  .small-paragraph {
    line-height: 100%;
  }

  .download-bitco-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  
  
  
  
  
  .testimonial-card._01, .testimonial-card._02, .testimonial-detail-div {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  
  .faq-grid {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .footer {
    padding-top: 50px;
    padding-bottom: 30px;
  }

  .footer-line {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .copyright-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }

  
  .back-to-top-link {
    width: 30px;
    height: 30px;
  }

  .footer-circle {
    border-radius: 10000px;
    width: 800px;
    height: 800px;
  }

  ._404-section {
    padding-top: 150px;
    padding-bottom: 60px;
  }

  
  .template-detail-div.margin {
    margin-bottom: 30px;
  }

  
  
  
  
  
  
  .hero-heading-div {
    max-width: 356px;
  }

  .feature-heading-div {
    max-width: 300px;
  }

  .onboarding-heading-div {
    max-width: 326px;
  }

  .nav-button-div {
    display: none;
  }
}

#w-node-_37b086e8-33d5-4855-1661-dc195e783ded-30340976, #w-node-_3b3f21cb-fdc4-52cd-8489-8259d96ecda0-30340976, #w-node-_2d62ae9f-5053-35e7-f3f2-ae521245a22c-30340976 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (max-width: 991px) {
  #w-node-_4d0e4a59-a380-d010-635f-4f79717c6d03-30340976, #w-node-_7d403ecf-f014-3669-b0bc-ec170005edbc-30340976 {
    order: 9999;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_37b086e8-33d5-4855-1661-dc195e783ded-30340976, #w-node-_3b3f21cb-fdc4-52cd-8489-8259d96ecda0-30340976, #w-node-_2d62ae9f-5053-35e7-f3f2-ae521245a22c-30340976 {
    grid-column: span 1 / span 1;
  }
}



/* ===========================================================================
   ZICHTBARE FOCUS OP ALLES WAT FOCUS KRIJGT

   Vier plekken droegen nog de fabrieksinstelling van de browser of een
   outline: 0 uit de Webflow-export:

   1. `.app-button` kreeg `auto 1px rgb(0,95,204)`, de blauwe standaardring van
      Chromium. Blauw zit niet in dit palet en 1px is te mager.
   2. `.nav-dropdown-link`, de uitklap "Meer", staat in webflow.css op
      `outline: 0` bij `:focus`. Wie met het toetsenbord navigeert zag dus niet
      waar hij stond.
   3. De sliderstippen staan in webflow.css op `box-shadow: 0 0 0 2px #fff`.
      Wit op krijt is onzichtbaar.
   4. Het hamburgermenu `.w-nav-button` staat eveneens op `outline: 0`.

   De ring is overal dezelfde: 3px accent op licht, met 3px lucht ertussen.
   Alleen `:focus-visible`, dus een muisklik levert geen ring op.

   De specificiteit is met opzet één klasse hoger dan de regel uit
   webflow.css die hij overschrijft.
   =========================================================================== */

.app-button:focus-visible,
.button:focus-visible,
.nav-link:focus-visible,
.dropdown-link:focus-visible,
.brand-logo-link:focus-visible,
.back-to-top-link:focus-visible,
.footer .paragraph:focus-visible,
.resources-card:focus-visible,
.nav-dropdown .nav-dropdown-link:focus-visible,
.navbar .menu-button:focus-visible,
.experience-slide-nav .w-slider-dot:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
  box-shadow: none;
}

/* De uitklap heeft geen eigen vlak, dus de ring krijgt dezelfde ronding als de
   knoppen ernaast. Zonder deze regel staat er een rechthoek om ronde tekst. */
.nav-dropdown .nav-dropdown-link:focus-visible {
  border-radius: var(--_spacing---radius--100px);
  outline-offset: 4px;
}

/* De stip is 1em rond. Een ronde ring van 3px met 3px lucht past er precies
   omheen en blijft ook op het krijtvlak zichtbaar. */
.experience-slide-nav .w-slider-dot:focus-visible {
  border-radius: 100%;
}

/* ===========================================================================
   RAAKVLAKKEN, 30 augustus 2026

   Drie klikvlakken waren kleiner dan een vinger. Gemeten op 375 met echte
   Chromium: het hamburgermenu 25 bij 25, .back-to-top-link 36 bij 36 en de
   sliderstippen 14 bij 14.

   Het hamburgermenu weegt het zwaarst: onder 992px is dat de ENIGE ingang tot
   de navigatie, en 25 bij 25 is ruim onder elke norm.

   De truc is overal dezelfde en verandert nergens iets aan het beeld: het
   RAAKVLAK groeit, het getekende vlak niet. Bij de hamburger via padding met
   een even grote negatieve marge, zodat de doos in de layout precies even
   groot blijft; bij de andere twee via een doorzichtig ::after dat over de
   knop heen ligt. Het beeld blijft dus tot op de pixel gelijk.

   Wat hier NIET in staat, met reden:
   - de footerlinks "Privacy" (58 bij 22) en info@vastpilot.nl (133 bij 22).
     Dat zijn links MIDDEN IN een lopende zin. Een raakvlak van 44 hoog daar
     laat de twee regels van dat blok over elkaar heen vallen, en een ::after
     van 44 hoog zou de regel eronder afvangen. Losse links op een eigen regel
     zijn in dat blok een tekstbesluit en geen fixerbesluit.
   - .vp-omhoog-link. Die meet in rust 40 bij 40 doordat vp/omhoog.js hem
     verborgen houdt op scale(.92); 44 maal 0,92 is 40,5. Zodra de knop
     zichtbaar wordt staat de transform op none en meet hij 44 bij 44. Er was
     hier dus niets te repareren, alleen verkeerd gemeten.
   =========================================================================== */

/* Hamburger: 25 + 2 maal 9,5 = 44. De negatieve marge is even groot als de
   padding, dus de marge-doos blijft 25 bij 25 en de balk wordt geen pixel
   hoger. De lottie erbinnen blijft op zijn plek staan. */
.navbar .menu-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 9.5px;
  margin: -9.5px;
}

/* De knop naar boven in de footer houdt zijn getekende 36 (30 onder 480), en
   krijgt er een doorzichtig raakvlak van 44 omheen. */
.back-to-top-link {
  position: relative;
}

.back-to-top-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}

/* De sliderstippen halen 24 bij 24 en niet de 44 van de andere twee. De
   stippen stonden met 20px hart op hart; een raakvlak van 44 zou dat van de
   buurstip voor meer dan de helft overlappen, en dan tikt de bezoeker
   structureel de verkeerde slide aan. Met de marge van 3 naar 5 komt de steek
   op 24 en sluiten de vlakken precies op elkaar aan zonder overlap. De rij
   wordt daarmee 24px breder in totaal. 24 bij 24 is de ondergrens uit
   WCAG 2.2 AA; de 44 uit AAA vraagt een andere stippenrij en dat is een
   ontwerpbesluit.

   HET ENIGE !important IN DIT BESTAND, en het staat hier met reden.
   js/webflow.js schrijft bij het opbouwen van de slider een echte inline
   style op elke stip: style="margin-left: 3px; margin-right: 3px;". Gemeten
   op 30 augustus 2026 door dat attribuut uit te lezen. Inline verslaat elke
   selector, dus zonder !important bleef de steek op 20px staan terwijl de
   ::after er al wel omheen lag. Dat bestand staat op slot, dus dit is de
   enige plek waar het rechtgezet kan worden. */
.experience-slide-nav .w-slider-dot {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.experience-slide-nav .w-slider-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .app-button,
  .button,
  a.resources-card .h4-heading {
    transition: none;
  }

  /* Deze zes stonden hier niet bij, dus bleven ze onder reduced-motion
     gewoon een kleur- of vlaktransitie draaien. Gevonden bij de meting voor
     ANIMATIE-PATROON.md op 30 augustus 2026, hier in één keer rechtgezet. */
  .nav-link,
  .onboarding-card,
  .benefit-lightbox-link,
  .small-paragraph.template-link,
  .back-to-top-link,
  .buy-template-link {
    transition: none;
  }
}

/* ===========================================================================
   DE HERO ALS EEN SCHERM

   WAT ER MIS WAS, GEMETEN op localhost:8799 met Playwright en Chromium.
   De hero was 733 tot 1316px hoog en het tekstblok hing aan een vaste
   padding-top. Het midden van dat blok stond daardoor overal BOVEN het midden
   van het venster: 50px op 320x568, 185 op 375x812, 199 op 768x1024, 78 op
   1024x768, 134 op 1440x900 en 221 op 1920x1080. Van de sectie eronder was op
   vijf van de zes maten 0px zichtbaar; alleen op 375x812 stak er 79px onderuit,
   en dat was toeval en geen ontwerp.

   WAT ER NU STAAT. De hero is een scherm: min-height 100vh min een kier, en het
   tekstblok staat verticaal gecentreerd in de ruimte tussen de navigatie en de
   scrollknop. De kier is de strook van het blok eronder die bij het laden
   zichtbaar blijft.

   DE ILLUSTRATIE IS UIT DE HERO GEHAALD en staat nu in een eigen blok direct
   eronder. Dat moest wel: het dashboard is op desktop 658px hoog en op mobiel
   290px, en samen met het tekstblok, de navigatieruimte en de kier past dat op
   GEEN van de zes maten in een scherm. Rekenvoorbeeld 1024x768: de hero mag dan
   707px zijn, de navigatie vraagt 130 en het tekstblok 292, dus er blijft 285
   over voor een illustratie van 658. Schalen naar 0,43 maakt de vijf
   modulelabels onleesbaar en hun raakvlak kleiner dan 44px; afknippen laat drie
   van die vijf links wel in de tabvolgorde staan maar niet meer in beeld. Uit
   de hero halen kost niets: de illustratie blijft compleet, staat nog steeds
   direct onder de tekst, en is nu ook het blok waar de knop naartoe scrolt.

   DE GLOED BLIJFT HEEL. .hero-bg-circle staat op inset: 0 en zijn masker rekent
   in procenten van de hero, dus bij een kortere hero loopt de dekking nog
   steeds in de laatste 44 procent naar nul. De overgang naar het blok eronder
   is daarmee net zo naadloos als voor deze wijziging; gemeten sprong op de
   laatste pixelrij binnen de hero tegen de eerste erbuiten staat in het
   rapport.

   EENHEID. De gepinde scene hieronder rekent met een stage van 100vh. Deze hero
   rekent daarom ook in vh en niet in svh, zodat de twee op een telefoon
   dezelfde noemer gebruiken.
   =========================================================================== */

.hero-section.hero-eenscherm {
  /* De kier: de strook van het blok eronder die bij het laden in beeld staat.
     Ondergrens 56px, want daaronder valt de strook onder de adresbalk van een
     telefoon weg; bovengrens 84px, want daarboven leest het niet meer als een
     hint maar als een halve sectie. */
  --vp-hero-kier: clamp(56px, 8vh, 84px);
  /* Ruimte onder de navigatie. Die staat op position: absolute met margin-top
     60 en is inclusief de knop 44px hoog, dus zijn onderrand ligt op 104. */
  --vp-hero-boven: 130px;
  /* Ruimte voor de scrollknop onderaan. */
  --vp-hero-onder: 104px;

  min-height: calc(100vh - var(--vp-hero-kier));
  padding-top: var(--vp-hero-boven);
  padding-bottom: var(--vp-hero-onder);
  flex-flow: column;
  justify-content: center;
  display: flex;
}

/* .container is een blokelement met max-width en auto-marges. Als flexitem
   krimpt het naar zijn inhoud, dus de breedte staat er expliciet in. */
.hero-section.hero-eenscherm > .container {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   DE SCROLLKNOP

   Kleine tekst met een pijl eronder, onderaan de hero. De link werkt zonder
   JavaScript: het is een gewoon anker naar #hero-beeld. vp/hero.js maakt het
   springen alleen soepel, en zet dat onder prefers-reduced-motion weer uit.

   Kleur: --vp-accent-hover (#883815). Op de warme kern van het heroverloop
   haalt die 4,74 en op papier 7,61; 13px op gewicht 600 telt als kleine tekst,
   dus 4,5 is de eis. --vp-accent-op-licht haalt daar maar 3,61 en valt af.

   Raakvlak: 44 bij 44 is het minimum. De inhoud is 13px tekst plus 6px lucht
   plus een pijl van 16px, dat is 35; met 10px padding boven en onder komt de
   knop op 55 hoog en met 18px links en rechts ruim over de 44 breed.
   --------------------------------------------------------------------------- */
.hero-scroll {
  z-index: 2;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--vp-accent-hover);
  min-width: 44px;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: var(--_typography---font-weight--semi-bold);
  line-height: 1.15;
  letter-spacing: .4px;
  text-decoration: none;
  border-radius: 12px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: clamp(20px, 3vh, 34px);
  left: 50%;
  transform: translate(-50%);
}

.hero-scroll:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-scroll-pijl {
  color: var(--vp-accent-hover);
  line-height: 0;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-pijl {
    animation: 1.82s ease-in-out infinite vp-hero-wenk;
  }
}

/* Alleen transform, dus dit blijft op de compositor. */
@keyframes vp-hero-wenk {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* De focusring is dezelfde als op de rest van de site: 3px accent op licht met
   3px lucht. Op de warme kern van de hero haalt die kleur 3,61 en dat is boven
   de 3:1 die een focusring zelf moet halen. */
.hero-scroll:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
  box-shadow: none;
}

@media screen and (max-width: 991px) {
  .hero-section.hero-eenscherm {
    /* De navigatie staat hier op margin-top: 0 met 15px padding boven en
       onder, dus zijn onderrand ligt op ongeveer 74. De 116 is niet die 74 plus
       lucht maar een centreerknop: de afwijking van het venstermidden is
       (boven min onder min kier) gedeeld door twee, en op 768x1024 haalde 104
       daarmee 37px terwijl de rest van de maten tussen 18 en 31 zat. */
    --vp-hero-boven: 116px;
    --vp-hero-onder: 96px;
  }
}

@media screen and (max-width: 767px) {
  .hero-section.hero-eenscherm {
    --vp-hero-boven: 96px;
    --vp-hero-onder: 92px;
  }
}

@media screen and (max-width: 479px) {
  .hero-section.hero-eenscherm {
    --vp-hero-boven: 90px;
    --vp-hero-onder: 88px;
  }

  .hero-scroll {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-pijl {
    animation: none;
  }
}

/* ======================================================================
   MENUBALK MET NEGEN LINKS, 30 augustus 2026

   De balk ging van vier naar negen links toen Beveiliging, Compliance en
   Over ons erbij kwamen. Het logo is een flex-item en kromp daardoor mee:
   gemeten 121 px op zijn eigen maat, 67 px op 1920 en nog maar 19 px op
   992, waar het merk onleesbaar wordt. Ook stond er nul ruimte tussen het
   logo en de eerste link.

   flex-shrink 0 houdt het logo op zijn eigen maat. De linkrij mag daarna
   zelf krimpen; past hij niet meer, dan neemt het hamburgermenu het over,
   en dat breekpunt gaat hieronder mee omhoog.
   ====================================================================== */
.brand-logo-link { flex: 0 0 auto; }
/* De container van de template is 1040 px. Logo 121, linkrij 809 en knop 100
   is samen 1030, dus er blijft maar 10 px over voor de ruimte tussen logo en
   linkrij. Met 24 px tussen de links werd de rij te breed en liep hij buiten
   de container. 20 px scheelt over acht tussenruimtes 32 px, en dat is precies
   genoeg om er 16 px ademruimte naast het logo bij te krijgen. */
.nav-wrapper { column-gap: 12px; }
.nav-menu-div { grid-column-gap: 18px; column-gap: 18px; }

/* Een menu-item mag NOOIT over twee regels breken. Zonder deze regel past de
   balk op papier wel in de container, maar alleen doordat "Veelgestelde
   vragen", "Over ons" en de knoptekst zelf afbreken. Dat leest als een fout
   en het maakt de meting onbetrouwbaar: de flexbox meldt dan dat het past. */
.nav-link, .nav-button-div .button, .nav-button-div .button div { white-space: nowrap; }

/* Met acht links en nowrap vraagt de balk ongeveer 1038 px in een container
   van 1040. Dat is twee pixel speling en dus te krap om op te vertrouwen; een
   lettertype dat net iets anders rendert duwt hem er alsnog uit. Vanaf 1100 px
   krijgt alleen de balk daarom 1100 px container.

   Logo en knop stonden hierna tegen de linkrij aan geplakt: 12 px naast het
   logo tegenover 24 px naast de knop, terwijl er in deze container 76 px
   vrije speling zit (logo 121 + linkrij 764 + knop 139 = 1024). Vanaf hier
   krijgt het logo zijn eigen ademruimte terug, in twee stappen: */
@media screen and (min-width: 1140px) and (max-width: 1239px) {
  .navbar .container.w-container { max-width: 1100px; }
  .nav-wrapper { column-gap: 24px; }
}

/* Vanaf 1240 px is er ruimte voor een bredere balk. Container 1180, en de
   knop krijgt hier ook zijn eigen 48 px in plaats van de vaste 24, want de
   vraag was dat logo EN knop verder van het midden komen te staan. */
@media screen and (min-width: 1240px) {
  .navbar .container.w-container { max-width: 1180px; }
  .nav-wrapper { column-gap: 48px; }
  .nav-link-wrapper { column-gap: 48px; }
}

/* Tussen 992 en 1139 px staat de platte balk er nog (Webflow klapt pas onder
   991 in), maar is de container maar ongeveer 984 px. Met 18 px tussenruimte
   vraagt de rij 1038 en liep hij 47 px buiten beeld. Acht tussenruimtes van
   10 px scheelt 64 px en dat is genoeg. Gemeten op 1024: overloop terug van
   47 naar 0. */
@media screen and (min-width: 992px) and (max-width: 1139px) {
  /* Op precies 992 px liep de balk 21 px buiten beeld: Webflow klapt pas onder
     991 in, dus daar staan alle acht links er nog terwijl de container maar
     ongeveer 952 px breed is. Met 10 px tussenruimte paste dat niet. Zes px
     over zeven tussenruimtes en twee wrapper-gaten scheelt 36 px, ruim genoeg
     voor de 21 die eruit liep. Gemeten op 992, 1024 en 1139: overloop 0. */
  .nav-menu-div { grid-column-gap: 6px; column-gap: 6px; }
  .nav-wrapper { column-gap: 6px; }
  .nav-link-wrapper { column-gap: 8px; }
}

/* Het breekpunt blijft dat van Webflow zelf, 991 px. Een eigen breekpunt op
   1199 leek nodig toen Inloggen nog in de balk stond, maar dat zette de
   navigatiebalk tussen 992 en 1199 op 387 px hoog: mijn regel verborg wel het
   menu, maar de mobiele opmaak van de template gold daar nog niet, dus het
   paneel bleef ruimte innemen. Inloggen staat nu niet meer in de balk en
   daarmee past de rij weer binnen het bestaande breekpunt. */