/* Fonts staan in de pagina zelf: geen verzoek naar Google, dus geen
       bezoeker-IP dat het land verlaat. Latin-subset, variabel 400-600. */
    @font-face {
      font-family: 'DM Sans';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url(9fea608a947e67020c33.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Newsreader';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url(6e4f2958c3a7c4a80acd.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --upgrade-black: #111111;
      --upgrade-white: #F9FAFC;
      --upgrade-mist: #BDD3E0;
      --upgrade-sky: #80C7E3;
      --upgrade-deep: #003249;
      --upgrade-sand: #DFCBAE;

      /* scroll-driven theme — JS interpolates these between the dark and light stop */
      --page-bg: #003249;
      --page-fg: #F9FAFC;
      --page-muted: #b9ccd8;
      --page-line: #1b475d;
      --accent: #80C7E3;
      --surface: #0b3d55;
      --surface-line: #1b475d;
      --btn-bg: #F9FAFC;
      --btn-fg: #003249;
      --ghost-line: #688B9C;
      --page-error: #A4231C;
      --placeholder: #08394f;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      font-family: 'DM Sans', sans-serif;
      background: var(--page-bg);
      color: var(--page-fg);
      line-height: 1.6;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Newsreader', serif;
      font-weight: 500;
      line-height: 1.2;
      color: var(--page-fg);
    }

    /* Eén ritme voor de hele pagina. Secties met een vormreeks krijgen extra
       hoogte omdat de reeks anders geen ruimte heeft; alle andere secties
       hebben dezelfde padding, zodat het einde van de pagina niet verspringt. */
    .section {
      padding: 104px 60px;
      position: relative;
    }

    .section-light,
    .section-mist { background: transparent; }

    .container-max {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* HEADER */
    /* clear at the top of the page; frosted glass once you scroll */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 60px;
      background-color: transparent;
      color: var(--page-fg);
      border: none;
      position: sticky;
      top: 0;
      z-index: 100;
      transition: background-color .4s cubic-bezier(0, 0, .2, 1),
                  backdrop-filter .4s cubic-bezier(0, 0, .2, 1);
    }

    header.is-scrolled {
      background-color: rgba(var(--page-bg-rgb, 0, 50, 73), .8);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    /* no blur support: lean on opacity instead */
    @supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
      header.is-scrolled { background-color: rgba(var(--page-bg-rgb, 0, 50, 73), .95); }
    }

    .logo {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      line-height: 0;
      color: var(--page-fg);
    }

    .logo-mark {
      width: 132px;
      height: auto;
      display: block;
      fill: currentColor;
    }

    /* "up" en "grade" staan vol; een lichte kopie van "up" blijft achter op de
       basislijn, zodat de sprong omhoog zichtbaar wordt */
    .logo-up,
    .logo-grade { fill-opacity: 1; }

    .logo-ghost .logo-up { fill-opacity: var(--logo-ghost-opacity, .28); }

    nav {
      display: flex;
      gap: 32px;
      align-items: center;
    }

    nav a {
      font-size: 14px;
      color: var(--page-fg);
      text-decoration: none;
      transition: color 0.3s, opacity 0.3s;
    }

    nav a:hover { color: var(--accent); opacity: 1; }

    .nav-login { color: var(--page-muted); }
    .nav-login:hover { color: var(--page-fg); }

    .nav-cta {
      position: relative;
      padding: 0;
      background: transparent;
      border-radius: 0;
      font-size: 12px;
      letter-spacing: .13em;
      text-transform: uppercase;
      line-height: 1;
    }

    .nav-cta .btn__face {
      padding: 14px 22px;
      background: var(--btn-bg);
      color: var(--btn-fg);
    }






    /* ---------- layered parallax shapes (tennr geometry, Upgrade palette) ---------- */
    .has-shapes {
      position: relative;
      /* clip sideways only: `clip` (unlike `hidden`) makes no scroll container,
         so sticky still works, and a stack may run past its section vertically. */
      overflow-x: clip;
      overflow-y: visible;
      isolation: isolate;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .has-shapes > .container-max { width: 100%; }

    .has-shapes > .container-max { position: relative; z-index: 1; }

    .shapes {
      position: absolute;
      inset: 0;
      transition: opacity .25s linear;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .shapes g {
      /* diepere lagen lopen harder weg, en waaieren daarbij iets opzij */
      transform: translate(
        calc(var(--scroll, 0) * var(--index) * 0.014px),
        calc(var(--scroll, 0) * calc(0.05 + var(--index) * 0.062) * -1px));
      animation: shape-entrance 1.5s ease both;
    }

    /* de vormen zelf blijven zacht ademen, ook als er niet gescrold wordt */
    .shapes g > path {
      animation: shape-drift calc(13s + var(--index) * 1.4s) ease-in-out infinite alternate;
      animation-delay: calc(var(--index) * -1.7s);
    }

    @keyframes shape-drift {
      from { transform: translate(0px, 0px); }
      to   { transform: translate(calc(6px + var(--index) * 2.4px),
                                  calc(-5px - var(--index) * 2px)); }
    }

    /* dark backdrop: screen lifts the stack off the navy */
    .shapes--dark g { mix-blend-mode: screen; }
    /* near-white backdrop: multiply, or the shapes disappear */
    .shapes--light g { mix-blend-mode: multiply; }

    /* dark backdrop with a dark fill needs multiply, not overlay */
    .shapes--plates g { mix-blend-mode: screen; }

    .has-shapes--tall { min-height: 112vh; }

    .has-shapes--closing { min-height: 82vh; }

    /* slabs: sit close in beside the hero copy */
    .shapes--slabs {
      left: auto;
      right: 17%;
      top: 68%;
      width: auto;
      height: 124%;
      transform: translateY(-50%);
    }

    /* fanned sheets: the same stack, spread open */
    /* Geneste wiggen: panelen die naar achteren wijken vanaf één vloerlijn. */
    /* Zoals tennr het doet: het beeldkader bevat de hele wiggenfiguur, dus
       je ziet de eigen randen van de wiggen — dat leest als vorm en niet als
       afgeknipt. Het element is vooral in de hoogte groot en staat vlak
       tegen de rechterrand. Verticaal loopt het de buursecties in. */
    .shapes--wedges {
      left: auto;
      right: 0;
      top: 50%;
      bottom: auto;
      width: auto;
      height: 182%;
      transform: translateY(-50%);
    }

    /* sheets: smaller, held to the right and clear of the footer */
    .shapes--plates {
      inset: auto 0 auto auto;
      right: -2%;
      bottom: -8%;
      top: auto;
      width: 46%;
      height: auto;
    }

    @keyframes shape-entrance {
      0%   { transform: translateY(calc(-400 * calc(0.05 + var(--index) * 0.062) * -1px)); }
      33%  { transform: translateY(calc(-400 * calc(0.05 + var(--index) * 0.062) * -1px)); }
      100% { transform: translate(
               calc(var(--scroll, 0) * var(--index) * 0.014px),
               calc(var(--scroll, 0) * calc(0.05 + var(--index) * 0.062) * -1px));
             animation-timing-function: cubic-bezier(0, 0, .2, 1); }
    }

    @media (max-width: 768px) {
      .has-shapes { min-height: auto; display: block; }
      .shapes--slabs { height: 58%; right: -6%; opacity: .7; }
      .shapes--wedges { width: auto; right: -12%; height: 150%; }
      .shapes--plates { width: 78%; right: -6%; bottom: 4%; }
      .has-shapes--closing { min-height: auto; }
      .has-shapes--tall { min-height: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      .shapes g { animation: none; transform: none; }
      .shapes g > path { animation: none; }
    }

    /* HERO */
    .hero {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      min-height: 92vh;
      padding: 104px 0;
    }

    /* De sectie eromheen levert zelf ook 104px boven en onder (.section),
       en dat kwam BOVENOP de 92vh van .hero — de sectie werd zo’n 200px hoger
       dan bedoeld. .hero draagt de padding nu zelf, binnen zijn eigen
       min-height (box-sizing: border-box), net als in het alternatief. */
    section:has(.hero) {
      padding-top: 0;
      padding-bottom: 0;
      /* .has-shapes zet hier 100vh; deze sectie moet 92vh zijn, zoals het
         alternatief — een andere sectie met dezelfde klasse (Veilig) mag
         wel 100vh houden, dus dit staat hier gericht, niet op .has-shapes zelf. */
      min-height: 92vh;
    }

    .hero-content { max-width: 760px; }

    .hero-content h1 {
      font-size: clamp(42px, 6vw, 76px);
      margin-bottom: 28px;
      line-height: 1.02;
    }

    .hero-mark { color: var(--upgrade-sand); }

    .hero-content p {
      font-size: 18px;
      color: var(--page-muted);
      margin-bottom: 32px;
      line-height: 1.6;
    }

    /* layered "echo" button: an opaque face over three translucent copies
       that cascade out on hover */






    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    /* Secundaire actie in zinsvorm. De primaire knop houdt de kapitalen uit de
       huisstijlgids; twee knoppen in kapitaal naast elkaar wegen even zwaar en
       leggen samen meer druk op dan de merktoon toestaat. */

    /* no echo on the secondary action — it should stay quiet next to the primary */



    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 2000;
      background: var(--upgrade-deep);
      color: var(--upgrade-white);
      padding: 12px 18px;
      font-size: 14px;
      text-decoration: none;
    }

    .skip-link:focus {
      left: 12px;
      top: 12px;
    }

    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* inline capture — expands in place, no modal, no redirect */
    .hero-notify {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .5s cubic-bezier(0, 0, .2, 1), margin-top .5s ease;
      margin-top: 0;
    }

    .hero-notify.is-open {
      grid-template-rows: 1fr;
      margin-top: 20px;
    }

    .hero-notify__inner { overflow: hidden; }

    .hero-notify__fields {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .hero-notify__fields input {
      flex: 1 1 180px;
      min-width: 0;
      padding: 13px 14px;
      border: 1px solid var(--ghost-line);
      border-radius: 0;
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      color: var(--page-fg);
      background: transparent;
    }

    .hero-notify__fields input::placeholder { color: #9aa7b0; }

    .hero-notify__fields input:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
      border-color: var(--upgrade-deep);
    }

    .hero-notify__fields input[aria-invalid="true"] { border-color: #b3261e; }


    /* Knop naast een invoerveld rekt mee in hoogte. Het vlak moet dan ook
       meerekken, anders steken de echo-lagen eronder uit als een blauwe rand. */
    .hero-notify__fields .cta-button { display: flex; }

    .hero-notify__fields .cta-button .btn__face {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding-top: 0;
      padding-bottom: 0;
    }

    .hero-notify__note {
      margin-top: 10px;
      font-size: 13px;
      color: var(--page-muted);
    }

    .hero-notify__note.is-error { color: #b3261e; }

    .hero-notify__done {
      font-size: 16px;
      color: var(--page-fg);
      font-weight: 500;
    }

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




    /* De functiesectie krijgt een eigen Mist Blue band, los van het
       scrollverloop — de sectie erft niet langer --page-bg, maar zet een
       vaste achtergrond. Kaartrand krijgt een eigen waarde: --surface-line
       is in de lichte stand Mist Blue zelf, en zou dus onzichtbaar worden
       tegen deze achtergrond. #4E6E84 haalt 3,49 op Mist Blue. */
    #features {
      background: var(--upgrade-mist);
      --surface-line: #4E6E84;
    }

    /* FEATURES */






    .features-cta {
      margin-top: 40px;
    }

    .features-intro-text {
      font-size: clamp(34px, 4.4vw, 54px);
      margin-bottom: 48px;
      text-align: center;
    }

    /* Opstapje boven een sectiekop. Bewust een <span> en geen kopniveau:
       een h3 vóór de h2 waar hij bij hoort, breekt de koppenhiërarchie. */
    .section-eyebrow {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: 17px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--page-muted);
      margin-bottom: 10px;
    }

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

    /* TRUST */
    .trust-section { text-align: center; }

    .trust-title {
      font-size: clamp(34px, 4.4vw, 54px);
      margin-bottom: 48px;
    }

    /* 6-col track: first three cards span 2, last two span 3 -> 3 + 2, no orphan */
    .trust-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      text-align: left;
    }

    .trust-card { grid-column: span 1; }

    /* Drie kaarten van gelijke breedte: het oude 3+2-raster rafelde onderaan. */
    .trust-note {
      margin: 32px auto 0;
      max-width: 60ch;
      font-size: 16px;
      color: var(--page-muted);
    }
    .trust-note a,
    .trust-card a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
    .trust-note a:hover,
    .trust-card a:hover { color: var(--accent); }

    @media (max-width: 1020px) {
      .trust-cards { grid-template-columns: repeat(2, 1fr); }
      .trust-card { grid-column: span 1; }
      .trust-card:last-child { grid-column: span 2; }
    }

    .trust-card {
      background: var(--surface);
      border: 1px solid var(--surface-line);
      border-radius: 0;
      padding: 32px 30px;
      transition: transform 150ms cubic-bezier(0, 0, .2, 1), border-color 150ms cubic-bezier(0, 0, .2, 1);
    }

    /* --accent is Deep Blue op de lichte stand; als hoverrand leest dat
       als zwart. Deze tint blijft herkenbaar blauw en haalt 3,37 op wit.
       De functiekaarten staan op donker, waar --accent Sky Blue is en
       dus wel klopt. */
    .trust-card:hover {
      transform: translateY(-1px);
      border-color: #5C93AE;
    }

    .trust-card h3 {
      font-family: 'DM Sans', sans-serif;
      font-size: 17px;
      font-weight: 600;
      color: var(--page-fg);
      margin-bottom: 10px;
    }

    .trust-card p {
      font-size: 15px;
      color: var(--page-muted);
      line-height: 1.65;
    }

    @media (max-width: 768px) {
      .trust-title { font-size: 30px; }
      .trust-cards { grid-template-columns: 1fr; }
      .trust-card,
      .trust-card:last-child { grid-column: span 1; }
    }

    /* FAQ — foldable */
    /* ---------- veelgestelde vragen ----------
       Twee kolommen: links blijft de aankondiging staan, rechts de vragen.
       De lijnen lopen over de volle breedte van de rechterkolom, met er
       één boven de eerste vraag zodat de reeks een bovenkant heeft. */
    .faq-layout {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 80px;
      align-items: start;
      max-width: 1240px;
      margin: 0 auto;
    }

    .faq-intro { position: sticky; top: 120px; }

    .faq-eyebrow {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--page-fg);
      margin-bottom: 22px;
    }

    .faq-title {
      font-size: clamp(40px, 5vw, 68px);
      line-height: 1.02;
      text-align: left;
      margin-bottom: 0;
      max-width: 10ch;
    }

    .faq-container {
      max-width: none;
      margin: 0;
      background: transparent;
      border: none;
      border-top: 1px solid var(--page-line);
      padding: 0;
    }

    .faq-item { border-bottom: 1px solid var(--page-line); }
    .faq-item:last-child { border-bottom: 1px solid var(--page-line); }

    .faq-q { padding: 26px 0; }

    @media (max-width: 900px) {
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .faq-intro { position: static; }
      .faq-title { max-width: none; }
    }


    .faq-item { border-bottom: 1px solid var(--page-line); }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      background: none;
      border: 0;
      padding: 22px 0;
      text-align: left;
      font-family: 'DM Sans', sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: var(--page-fg);
      cursor: pointer;
    }

    .faq-q:hover { color: var(--accent); }

    .faq-q:focus-visible {
      outline: 2px solid var(--upgrade-sky);
      outline-offset: 1px;
      border-radius: 4px;
      border-radius: 4px;
    }

    /* plus that becomes a minus */
    .faq-icon {
      position: relative;
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      margin-top: 4px;
    }

    .faq-icon::before,
    .faq-icon::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      background: var(--accent);
      border-radius: 1px;
      transition: transform 150ms cubic-bezier(0, 0, .2, 1), opacity 150ms cubic-bezier(0, 0, .2, 1);
    }

    .faq-icon::before {
      width: 16px; height: 2px;
      transform: translate(-50%, -50%);
    }

    .faq-icon::after {
      width: 2px; height: 16px;
      transform: translate(-50%, -50%);
    }

    .faq-q[aria-expanded="true"] .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
      opacity: 0;
    }

    .faq-panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .4s cubic-bezier(0, 0, .2, 1);
    }

    .faq-panel.is-open { grid-template-rows: 1fr; }

    .faq-panel > div { overflow: hidden; }

    .faq-a a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .faq-a a:hover { color: var(--page-fg); }

    .faq-a {
      font-size: 16px;
      color: var(--page-muted);
      line-height: 1.7;
      padding: 0 42px 26px 0;
    }

    @media (max-width: 768px) {
      .faq-title { font-size: 30px; }
      .faq-q { font-size: 17px; }
      .faq-a { padding-right: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-panel, .faq-icon::before, .faq-icon::after { transition: none; }
    }

    /* ROI */
    .roi-section {
      text-align: center;
    }

    .roi-title {
      font-size: clamp(34px, 4.4vw, 54px);
      margin-bottom: 16px;
    }


    /* Op Soft White wijkt een wit kaartvlak maar 1,04 van de achtergrond af.
       In plaats van er een kleurvlak van te maken krijgt de kaart het
       stapelmotief: twee harde verschoven kopieën erachter. Dat geeft
       aanwezigheid zonder dat de module van kleur verandert. */
    .roi-wrap {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
    }


    .roi {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      background: #FFFFFF;
      border: 2px solid var(--accent);
      border-radius: 0;
      overflow: hidden;
      text-align: left;
    }


    .roi__inputs { padding: clamp(1.75rem, 4vw, 2.75rem); }

    @media (min-width: 820px) {
      .roi { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
    }

    .roi__field + .roi__field { margin-top: 1.5rem; }

    .roi__label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-weight: 600;
      margin-bottom: .5rem;
      color: var(--page-fg);
    }

    .roi__val { color: var(--accent); }

    /* De baan is een bedienbaar element en moet 3:1 halen. Met --page-line
       kwam hij op 1,27 op wit; deze tint haalt 3,43. */
    .roi__slider {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 10px; border-radius: 5px;
      background: #6E8FA4; cursor: pointer;
    }

    .roi__slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 26px; height: 26px; border-radius: 50%;
      background: #fff; border: 3px solid var(--upgrade-deep);
      cursor: pointer;
    }

    .roi__slider::-moz-range-thumb {
      width: 26px; height: 26px; border-radius: 50%;
      background: #fff; border: 3px solid var(--upgrade-deep);
      cursor: pointer;
    }

    .roi__slider:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

    /* the result sits on Deep Blue — the page's one 'Upgrade moment' */
    .roi__out {
      --page-fg: #F9FAFC;
      --page-muted: #b9ccd8;
      --btn-bg: #F9FAFC;
      --btn-fg: #003249;
      background: var(--upgrade-deep);
      color: var(--page-fg);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(2rem, 4vw, 2.75rem);
    }


    .roi__hours {
      font-family: 'Newsreader', serif;
      font-size: clamp(3rem, 8vw, 4.5rem);
      font-weight: 600;
      color: var(--upgrade-sand);
      line-height: 1;
    }
    .roi__unit { font-weight: 600; color: var(--page-muted); }
    .roi__cap { color: var(--page-muted); font-size: .875rem; margin-bottom: .5rem; }

    .btn--block { display: block; width: 100%; text-align: center; text-decoration: none; }
    .roi__out .cta-button { --btn-echo: rgba(223,203,174,.34); }

    /* FOOTER */
    .site-footer {
      background: var(--upgrade-deep);
      border-top: 1px solid #1B475D;
      color: var(--upgrade-white);
      padding: 64px 60px 32px;
    }

    .site-footer__grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 40px;
    }

    .site-footer .logo-mark { width: 124px; fill: var(--upgrade-white); }

    .site-footer h3 {
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--upgrade-sky);
      margin-bottom: 14px;
    }

    .site-footer ul { list-style: none; }
    .site-footer li { margin-bottom: 10px; }

    .site-footer a {
      color: var(--upgrade-white);
      text-decoration: none;
      font-size: 15px;
    }

    .site-footer a:hover { color: var(--upgrade-sky); }

    .site-footer__base {
      max-width: 1200px;
      margin: 48px auto 0;
      padding-top: 24px;
      border-top: 1px solid #1B475D;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 13px;
      color: #8FA9BA;
    }

    @media (max-width: 900px) {
      .site-footer { padding: 48px 24px 28px; }
      .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    }

    @media (max-width: 560px) {
      .site-footer__grid { grid-template-columns: 1fr; }
    }

    /* kleine telefoons */
    @media (max-width: 420px) {
      .cta-button .btn__face { padding: 17px 22px; }
      .hero-actions { gap: 8px; }
      .section { padding: 40px 18px; }
      nav { gap: 14px; }
      nav a { font-size: 13px; }
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      header {
        padding: 20px 24px;
      }

      nav {
        gap: 20px;
      }

      .section {
        padding: 50px 24px;
      }

      .hero, .benefit, .features-sticky {
        grid-template-columns: 1fr;
        gap: 40px;
      }


      .benefit-content h2 {
        font-size: 28px;
      }


    }

    /* De "up" begint op de plek van zijn schaduw en stijgt op; de schaduw is
       er al voordat de beweging inzet. Eén keer bij het laden, geen lus. */
    .logo-rise {
      animation: logo-rise 1.05s cubic-bezier(0, 0, .2, 1) .3s both;
    }

    @keyframes logo-rise {
      from { transform: translateY(1.4313px); }
      to   { transform: translateY(0); }
    }

    .logo-ghost {
      animation: logo-ghost-in 150ms cubic-bezier(0, 0, .2, 1) 0s both;
    }

    @keyframes logo-ghost-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .logo-rise, .logo-ghost { animation: none; }
    }

    /* Focus op alles wat bedienbaar is. --accent is Sky Blue op donkere
       standen en Deep Blue op lichte, dus de rand haalt overal 3:1. */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--upgrade-sky);
      outline-offset: 1px;
      border-radius: 4px;
    }

    /* ---------- mobiel menu ----------
       De balk heeft ruim 520px nodig voor logo, vier links en de knop.
       Onder 760px past dat niet, dus daar verhuizen de links naar een paneel. */
    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid var(--ghost-line);
      border-radius: 0;
      background: transparent;
      cursor: pointer;
      position: relative;
      flex: 0 0 auto;
    }

    .nav-toggle span {
      position: absolute;
      left: 11px;
      width: 20px;
      height: 2px;
      background: var(--page-fg);
      transition: transform 150ms cubic-bezier(0, 0, .2, 1), opacity .2s ease;
    }

    .nav-toggle span:nth-child(1) { top: 15px; }
    .nav-toggle span:nth-child(2) { top: 21px; }
    .nav-toggle span:nth-child(3) { top: 27px; }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    @media (max-width: 760px) {
      header { padding: 14px 20px; gap: 14px; }

      .nav-toggle { display: block; }

      /* het paneel hangt onder de balk en neemt de volle breedte */
      nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 22px;
        background: rgba(var(--page-bg-rgb), .97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--page-line);
        display: none;
      }

      nav.is-open { display: flex; }

      nav a {
        font-size: 17px;
        padding: 15px 0;
        border-bottom: 1px solid var(--page-line);
      }

      nav a:last-of-type { border-bottom: none; }

      /* de knop blijft een knop, geen menuregel */
      .nav-cta {
        margin-top: 16px;
        border-bottom: none;
        padding: 0;
        align-self: flex-start;
      }

      .nav-cta .btn__face { padding: 16px 26px; font-size: 13px; }
      .nav-login { color: var(--page-fg); }
    }

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

    /* ---------- achtergrondvormen op tablet en telefoon ----------
       Smaller scherm betekent minder ruimte naast de tekst, dus de reeksen
       worden groter en zakken naar de rand in plaats van mee te krimpen. */
    @media (max-width: 900px) {
      .shapes--slabs  { width: 92%; right: -22%; top: 58%; height: 108%; opacity: .85; }
      .shapes--wedges { width: auto; right: -26%; height: 130%; opacity: .7; }
      .shapes--plates { width: 104%; right: -22%; bottom: 2%; opacity: .6; }
    }

    @media (max-width: 560px) {
      .shapes--slabs  { width: 128%; right: -38%; opacity: .7; }
      .shapes--wedges { width: 140%; right: -40%; height: auto; opacity: .45; }
      .shapes--plates { width: 132%; right: -34%; opacity: .45; }
    }

    /* ---------- tikdoelen en tekstmaat op telefoon ----------
       Invoervelden op 16px: kleiner laat iOS bij focus inzoomen.
       Alles wat je aantikt minstens 44px hoog. */
    @media (max-width: 560px) {
      input, select, textarea { font-size: 16px; }
      nav a { min-height: 44px; display: flex; align-items: center; }
      .cta-button .btn__face { padding: 17px 24px; }
      .section { padding: 44px 20px; }
    }

    @media (max-width: 380px) {
      .section { padding: 36px 16px; }
      .hero { padding: 36px 0; }
      .cta-button .btn__face { padding: 16px 20px; font-size: 13px; }
    }

    @media (max-width: 760px) {
      .roi { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-actions .cta-button { width: 100%; }
      .hero-actions .btn__face { text-align: center; }
    }

    /* ---------- wisselende kop in de hero ----------
       Het woord springt omhoog zoals de "up" in het logo: dezelfde curve,
       dezelfde beweging van onder naar zijn plek. */
    .hero-title { font-size: 56px; line-height: 1.1; margin-bottom: 24px; }

    .hero-title__fixed { display: block; }

    .hero-title__swap {
      display: block;
      position: relative;
      color: var(--upgrade-sand);
      font-size: 1.34em;
      line-height: 1.02;
      margin-top: .06em;
    }

    .hero-word-sizer { visibility: hidden; }

    .hero-word {
      position: absolute;
      left: 0;
      top: 0;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(.34em);
      transition: opacity .34s ease, transform .34s ease;
    }

    /* opkomen: dezelfde curve als het logo, iets trager dan het verdwijnen */
    .hero-word.is-active {
      opacity: 1;
      transform: translateY(0);
      transition: opacity .5s ease, transform .9s cubic-bezier(0, 0, .2, 1);
    }

    /* vertrekken: omhoog uit beeld, zodat het volgende woord van onderen komt */
    .hero-word.is-leaving {
      opacity: 0;
      transform: translateY(-.28em);
      transition: opacity 150ms cubic-bezier(0, 0, .2, 1), transform 150ms cubic-bezier(0, 0, .2, 1);
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-word { transition: opacity 150ms cubic-bezier(0, 0, .2, 1); transform: none; }
      .hero-word.is-active { transition: opacity 150ms cubic-bezier(0, 0, .2, 1); transform: none; }
      .hero-word.is-leaving { transform: none; }
    }

    @media (max-width: 900px) {
      .hero-title { font-size: clamp(32px, 7vw, 46px); }
    }

    
    /* ---------- drie voordelen naast elkaar ----------
       Drie items zijn in één oogopslag te overzien; vastzetten zou hier
       drie schermhoogtes kosten voor wat in één scherm past. */

    /* Drie rijen onder elkaar. Bij elke volgende wisselen tekst en
       animatie van kant, zodat het oog heen en weer loopt in plaats van
       drie keer hetzelfde patroon te zien. */
    /* Twee blokken naast elkaar. Met drie rijen liep het oog om en om van
       kant naar kant; met twee beloftes die elkaar afmaken is naast elkaar
       sterker — de lezer ziet beide koppen tegelijk. */
    .trio {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
      position: relative;
    }

    /* Verticale lijn tussen de twee kaarten, in het midden van de kolommen.
       Werkt op elke gap-breedte, omdat 50% van een 1fr/1fr-grid altijd het
       midden tussen de twee kolommen is. Verdwijnt zodra de kaarten onder
       elkaar staan (900px), waar hij niets meer zou scheiden. */
    .trio::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--page-line);
      transform: translateX(-50%);
    }

    .trio__item {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
    }

    /* Om en om: standaard staat het beeld links, bij even rijen de tekst.
       Het beeld staat vooraan in de opmaak, dus daar moet de tekst
       verschuiven en niet het beeld. */
    .trio__item:nth-child(even) .trio__text { order: 0; }

    .trio__text { text-align: left; }

    .trio__art {
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0;
    }

    .trio__art .anim { width: min(64%, 250px); height: auto; overflow: visible; }

    .trio__label {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      /* De voordelensectie staat altijd op Deep Blue, dus zand kan hier:
         8,56 : 1. De streep eronder volgt via currentColor. */
      color: var(--upgrade-sand);
      margin-bottom: 10px;
    }

    .trio__title {
      font-family: 'Newsreader', serif;
      font-weight: 500;
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.2;
      color: var(--page-fg);
      margin-bottom: 12px;
    }

    .trio__body {
      font-size: 17px;
      color: var(--page-muted);
      max-width: 40ch;
    }

    @media (max-width: 900px) {
      .trio { grid-template-columns: 1fr; gap: 64px; }
      .trio::after { display: none; }
      .trio__item { grid-template-columns: 1fr; gap: 26px; }
      /* op een smal scherm staat het beeld altijd boven de tekst */
      .trio__item:nth-child(even) .trio__text { order: 0; }
      .trio__art { height: 190px; }
      .trio__art .anim { width: min(62%, 230px); }
      .trio__body { max-width: none; }
    }

    /* ---------- animaties van de drie voordelen ---------- */
    .bulb__glass {
      fill: var(--upgrade-sky);
      fill-opacity: .10;
      stroke: var(--upgrade-sky);
      stroke-width: 3;
    }
    .bulb__filament {
      fill: none;
      stroke: var(--upgrade-sky);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
    }
    .bulb__neck { fill: var(--upgrade-mist); fill-opacity: .55; }
    .bulb__base { fill: var(--upgrade-mist); fill-opacity: .40; }
    .bulb__tip  { fill-opacity: .28; }
    .bulb__ray {
      stroke: var(--upgrade-sand);
      stroke-width: 5;
      stroke-linecap: round;
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(.35);
    }
    .trio__item.is-in .bulb__glass    { animation: bulb-glass 5s ease-in-out infinite; }
    .trio__item.is-in .bulb__filament { animation: bulb-filament 5s ease-in-out infinite; }
    .trio__item.is-in .bulb__ray {
      animation: bulb-ray 5s ease-in-out infinite;
      animation-delay: calc(var(--r) * .05s);
    }
      .trio__item.is-in .bulb__glass { fill: var(--upgrade-sand); fill-opacity: .92; stroke: var(--upgrade-sand); }
      .trio__item.is-in .bulb__filament { stroke-dashoffset: 0; stroke: var(--upgrade-deep); }
      .trio__item.is-in .bulb__ray { opacity: .95; transform: scale(1); }
    @keyframes bulb-glass {
      0%, 10%   { fill: var(--upgrade-sky);  fill-opacity: .10; stroke: var(--upgrade-sky); }
      36%, 74%  { fill: var(--upgrade-sand); fill-opacity: .92; stroke: var(--upgrade-sand); }
      100%      { fill: var(--upgrade-sky);  fill-opacity: .10; stroke: var(--upgrade-sky); }
    }
    @keyframes bulb-filament {
      0%, 6%    { stroke-dashoffset: 120; stroke: var(--upgrade-sky); }
      32%, 74%  { stroke-dashoffset: 0;   stroke: var(--upgrade-deep); }
      100%      { stroke-dashoffset: 120; stroke: var(--upgrade-sky); }
    }
    @keyframes bulb-ray {
      0%, 24%   { opacity: 0;   transform: scale(.35); }
      44%, 70%  { opacity: .95; transform: scale(1); }
      100%      { opacity: 0;   transform: scale(.35); }
    }
    .clock__face {
      fill: none;
      stroke: var(--upgrade-sky);
      stroke-width: 3;
      opacity: .55;
    }
    .clock__tick {
      stroke: var(--upgrade-sky);
      stroke-width: 3;
      stroke-linecap: round;
      opacity: .45;
    }
    .clock__tick--major { stroke-width: 5; opacity: .8; }
    .clock__hand line {
      stroke: var(--upgrade-mist);
      stroke-width: 5;
      stroke-linecap: round;
    }
    .clock__hand--min line { stroke-width: 4; }
    .clock__hand { transform-origin: 180px 180px; }
    .clock__pin { fill: var(--upgrade-sand); }
    .trio__item.is-in .clock__hand--hour { animation: clock-hour 36s linear infinite; }
    .trio__item.is-in .clock__hand--min  { animation: clock-min  36s linear infinite; }
    .anim--breathe circle { transform-origin: 180px 180px; }
    .breathe__halo {
      fill: var(--upgrade-sky);
      fill-opacity: .10;
      stroke: none;
      transform: scale(.66);
    }
    .breathe__ring {
      fill: none;
      stroke: var(--upgrade-sky);
      stroke-width: 3;
      opacity: .75;
      transform: scale(.66);
    }
    .trio__item.is-in .breathe__halo { animation: breathe-halo 10s cubic-bezier(0, 0, .2, 1) infinite; }
    .trio__item.is-in .breathe__ring { animation: breathe-ring 10s cubic-bezier(0, 0, .2, 1) infinite; }
    @keyframes breathe-halo {
      0%        { transform: scale(.66); fill-opacity: .07; }
      40%, 50%  { transform: scale(1);   fill-opacity: .16; }
      90%, 100% { transform: scale(.66); fill-opacity: .07; }
    }
    @keyframes breathe-ring {
      0%        { transform: scale(.66); opacity: .5; }
      40%, 50%  { transform: scale(1);   opacity: .9; }
      90%, 100% { transform: scale(.66); opacity: .5; }
    }

    /* haakjes voor de animaties; de opmaak zit in de onderdelen zelf */
    .anim--bulb, .anim--clock, .anim--breathe { display: block; }

    /* De animaties staan stil bij 'minder beweging'; de eindstand blijft staan. */
    @media (prefers-reduced-motion: reduce) {
      .trio__item.is-in .bulb__glass,
      .trio__item.is-in .bulb__filament,
      .trio__item.is-in .bulb__ray { animation: none; }
      .trio__item.is-in .clock__hand--hour,
      .trio__item.is-in .clock__hand--min { animation: none; }
      .trio__item.is-in .breathe__halo,
      .trio__item.is-in .breathe__ring { animation: none; }
    }

    /* De wijzers lopen terug: tijd die u terugkrijgt. */
    @keyframes clock-hour { to { transform: rotate(-360deg); } }
    @keyframes clock-min  { to { transform: rotate(-1080deg); } }
  
    /* ---------- voordelen: geen tekeningen, opschrift als anker ----------
       De twee illustraties zijn eruit: ze verschilden in breedte, en zonder
       beeld staan de kolommen strak links uitgelijnd. Het opschrift draagt nu
       het begin van elke kolom, met een harde streep eronder — geen kader,
       geen ronding, in lijn met de rest van de identiteit.

       De kleur is bewust `currentColor` en geen vaste zandtint: de pagina
       verkleurt tijdens het scrollen van deep blue naar licht, en een vaste
       zandkleur verbleekt in de lichte stand tot hij nauwelijks leesbaar is.
       Zo loopt de streep altijd mee met het opschrift erboven. */
    .trio__art { display: none; }

    .trio__label {
      width: fit-content;
      padding-bottom: 12px;
      margin-bottom: 20px;
      border-bottom: 2px solid currentColor;
    }

    /* ---------- functies in drie fasen ----------
       De zes functies volgen de volgorde van het werk. Die groepering geeft
       de sectie structuur zonder dat er een aparte stappenreeks bij hoeft. */
    .features-intro {
      text-align: center;
      max-width: 58ch;
      margin: 0 auto 60px;
      color: var(--page-muted);
      font-size: 18px;
    }

    .phases {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 34px;
    }

    .phase { min-width: 0; }

    .phase__head {
      display: flex;
      align-items: baseline;
      gap: 16px;
      padding-bottom: 14px;
      margin-bottom: 26px;
      border-bottom: 2px solid var(--accent);
    }

    /* het cijfer is het beeld van deze sectie: groot, rustig, in de fasekleur */
    .phase__num {
      font-family: 'Newsreader', serif;
      font-weight: 500;
      font-size: 52px;
      line-height: .82;
      color: var(--accent);
      flex: 0 0 auto;
    }

    .phase__name {
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--page-fg);
    }

    .phase__items { display: grid; gap: 20px; }

    .feat {
      background: var(--surface);
      border: 1px solid var(--surface-line);
      border-radius: 0;
      padding: 26px 24px 28px;
      transition: transform 150ms cubic-bezier(0, 0, .2, 1), border-color 150ms cubic-bezier(0, 0, .2, 1);
    }

    .feat:hover { transform: translateY(-1px); border-color: var(--accent); }

    .feat__title {
      font-family: 'Newsreader', serif;
      font-weight: 500;
      font-size: 21px;
      line-height: 1.25;
      color: var(--page-fg);
      margin-bottom: 10px;
    }

    .feat__text {
      font-size: 15px;
      line-height: 1.65;
      color: var(--page-muted);
    }

    .features-cta { text-align: center; margin-top: 60px; }

    @media (max-width: 1000px) {
      .phases { grid-template-columns: 1fr 1fr; gap: 30px; }
    }

    @media (max-width: 700px) {
      .phases { grid-template-columns: 1fr; gap: 40px; }
      .feat__title { font-size: 19px; }
      .features-intro { margin-bottom: 40px; }
    }

    /* ---------- afsluitende oproep ----------
       De rekenmodule stond hier eerder; die is naar voren gehaald. Zonder
       deze band zou de pagina op de vragen eindigen, zonder volgende stap. */
    .closing { text-align: center; max-width: 620px; margin: 0 auto; }

    .closing__title {
      font-size: clamp(32px, 4.2vw, 50px);
      line-height: 1.15;
      margin-bottom: 14px;
    }

    .closing__text {
      color: var(--page-muted);
      font-size: 17px;
      margin-bottom: 30px;
    }

    /* ---------- knoppen — merkgids v1.0 ----------
       De echo is afgeschaft. Eén interactietaal voor elk bedienbaar
       element: één stap kleur, één pixel omhoog, 150 ms. */
    .cta-button {
      position: relative;
      display: inline-flex;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .13em;
      text-transform: uppercase;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      transition: transform 150ms cubic-bezier(0, 0, .2, 1);
    }

    .cta-button .btn__face {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 20px 30px;
      background: var(--btn-bg);
      color: var(--btn-fg);
      transition: background-color 150ms cubic-bezier(0, 0, .2, 1);
    }

    /* de drie kopieën bestaan niet meer */

    /* Hover: het vlak blijft zoals het is en er verschijnt een ring omheen.
       Een kleurwissel werkt slecht op Deep Blue — daar is het knopvlak al
       licht, en elke stap leest als vervagen. Een outline heeft een eigen
       offset, dus de tussenruimte hoeft niet met een tweede kleur. */
    .cta-button .btn__face {
      outline: 1px solid transparent;
      outline-offset: 3px;
      transition: background-color 150ms cubic-bezier(0, 0, .2, 1),
                  outline-color 150ms cubic-bezier(0, 0, .2, 1);
    }

    .cta-button:hover { transform: translateY(-1px); }
    .cta-button:hover .btn__face { outline-color: var(--upgrade-sky); }

    .cta-button:active { transform: none; transition-duration: 100ms; }
    .cta-button:active .btn__face { background: #002A3D; transition-duration: 100ms; }


    .cta-button:focus-visible {
      outline: 2px solid var(--upgrade-sky);
      outline-offset: 1px;
      border-radius: 4px;
    }

    .cta-button[aria-disabled="true"],
    .cta-button:disabled {
      pointer-events: none;
      transform: none;
    }

    .cta-button[aria-disabled="true"] .btn__face,
    .cta-button:disabled .btn__face {
      background: var(--upgrade-mist);
      color: #6E8FA4;
    }

    /* secundair: transparant met een rand, dezelfde taal, minder intensiteit */
    .cta-button--ghost {
      font-weight: 400;
      text-transform: none;
      letter-spacing: .01em;
      font-size: 15px;
    }

    .cta-button--ghost .btn__face {
      background: transparent;
      color: var(--page-fg);
      border: 1px solid var(--ghost-line);
      padding: 19px 29px;
      transition: border-color 150ms cubic-bezier(0, 0, .2, 1),
                  color 150ms cubic-bezier(0, 0, .2, 1);
    }

    .cta-button--ghost:hover .btn__face {
      background: transparent;
      border-color: var(--accent);
      color: var(--accent);
      outline-color: transparent;
    }

    .cta-button--ghost:active .btn__face { background: transparent; }

    /* De menuknop droeg alleen .nav-cta, dus geen van de knopregels raakte
       hem. Hij krijgt nu dezelfde taal, in de compacte maat. */
    .nav-cta { transition: transform 150ms cubic-bezier(0, 0, .2, 1); }

    .nav-cta .btn__face {
      outline: 1px solid transparent;
      outline-offset: 3px;
      transition: background-color 150ms cubic-bezier(0, 0, .2, 1),
                  outline-color 150ms cubic-bezier(0, 0, .2, 1);
    }

    .nav-cta:hover { transform: translateY(-1px); }
    .nav-cta:hover .btn__face { outline-color: var(--upgrade-sky); }

    .nav-cta:active { transform: none; transition-duration: 100ms; }
    .nav-cta:active .btn__face { background: #002A3D; transition-duration: 100ms; }

    .nav-cta:focus-visible {
      outline: 2px solid var(--upgrade-sky);
      outline-offset: 1px;
      border-radius: 4px;
    }

    /* ---------- bereik ----------
       Alleen tekst. De schaal doet het werk: een grote kop over drie regels,
       daaronder drie claims met een haarlijn ertussen. */
    .scope { max-width: 1100px; margin: 0 auto; }

    .scope__title {
      font-size: clamp(38px, 5.4vw, 68px);
      line-height: 1.04;
      margin: 18px 0 26px;
      max-width: 16ch;
    }

    .scope__intro {
      font-size: 18px;
      line-height: 1.7;
      color: var(--page-muted);
      max-width: 58ch;
      margin-bottom: 64px;
    }

    .scope__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 44px;
      border-top: 1px solid var(--page-line);
      padding-top: 34px;
    }

    .scope__item { min-width: 0; }

    /* De kop zegt al "Elk vakgebied. Elk niveau. Elke antwoordvorm."
       De blokken herhalen dat niet; ze dragen alleen een klein label. */
    .scope__label {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--upgrade-sand);
      margin-bottom: 14px;
    }

    .scope__text {
      font-size: 16px;
      line-height: 1.7;
      color: var(--page-muted);
      max-width: 32ch;
    }

    .scope__note {
      margin: 56px auto 0;
      padding-top: 30px;
      border-top: 1px solid var(--page-line);
      font-family: 'Newsreader', serif;
      font-size: clamp(21px, 2.2vw, 27px);
      line-height: 1.4;
      color: var(--page-fg);
      max-width: 46ch;
      text-align: center;
    }

    @media (max-width: 900px) {
      .scope__grid { grid-template-columns: 1fr; gap: 32px; }
      .scope__text { max-width: none; }
      .scope__intro { margin-bottom: 44px; }
    }

    /* ---------- voordelen ----------
       Dit is het zwaartepunt van de pagina, dus krijgt het de ruimte en de
       schaal die daarbij horen: een eigen kop op het grootste formaat,
       meer hoogte dan een gewone sectie, en grotere animaties. */
    .benefits-trio {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: center;
      padding-top: 120px;
      padding-bottom: 120px;
    }

    .benefits-trio > .container-max { width: 100%; }

    /* ch rekent met de lettergrootte van dit element, en die is 16px —
       vandaar dat 26ch maar ~210px opleverde. Een vaste maat dus. */
    .benefits-head { max-width: 880px; margin: 0 auto 76px; text-align: center; }

    .benefits-title {
      font-size: clamp(38px, 5.4vw, 68px);
      line-height: 1.04;
      margin: 18px 0 0;
    }

    .benefits-trio .trio { gap: 88px; }

    .benefits-trio .trio__item {
      border-top: 1px solid var(--page-line);
      padding-top: 34px;
      gap: 20px;
    }

    .benefits-trio .trio__art { height: 300px; }
    .benefits-trio .trio__art .anim { width: min(94%, 340px); }

    @media (max-width: 900px) {
      .benefits-trio { min-height: 0; display: block; padding-top: 64px; padding-bottom: 64px; }
      .benefits-head { margin: 0 auto 44px; max-width: none; }
      .benefits-trio .trio { gap: 56px; }
      .benefits-trio .trio__art { height: 220px; }
    }

    /* De cookie-instellingen openen een venster en gaan niet naar een pagina,
       dus is het een knop. Hij leunt op de opmaak van de voetteksklinks. */
    .cookie-prefs {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      text-align: left;
      text-decoration: none;
    }

    .cookie-prefs:hover { color: var(--upgrade-sky); }
    .cookie-prefs:focus-visible {
      outline: 2px solid var(--upgrade-sky);
      outline-offset: 1px;
      border-radius: 4px;
    }


  /* ---------- voordelen v58 ----------
     Twee beloften direct onder één sectielabel. De illustraties zijn
     compacte ankers naast de koppen en nemen de tekst niet over. */
  #benefits .benefits-head {
    max-width: none;
    margin: 0 0 46px;
    text-align: left;
  }

  #benefits .benefits-title { display: none; }

  #benefits .trio {
    gap: 88px;
  }

  #benefits .trio__item {
    display: block;
    border-top: 1px solid var(--page-line);
    padding-top: 30px;
  }

  #benefits .trio__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
    min-height: 132px;
  }

  #benefits .trio__heading { min-width: 0; }

  #benefits .trio__label {
    width: fit-content;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid currentColor;
  }

  #benefits .trio__title {
    margin-bottom: 0;
  }

  #benefits .trio__body {
    max-width: 48ch;
    margin: 0;
  }

  #benefits .trio__art {
    display: flex;
    width: 128px;
    height: 128px;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  #benefits .trio__art .anim {
    display: block;
    width: 128px;
    height: 128px;
    overflow: visible;
  }

  /* De klok blijft het beeld voor teruggewonnen tijd. */
  #benefits .clock__face { stroke-width: 4; }
  #benefits .clock__tick { stroke-width: 4; }
  #benefits .clock__tick--major { stroke-width: 6; }
  #benefits .clock__hand line { stroke-width: 6; }
  #benefits .clock__hand--min line { stroke-width: 5; }

  /* Drie antwoorden worden langs dezelfde rubric-as gelegd. */
  #benefits .consistency__axis,
  #benefits .consistency__tick,
  #benefits .consistency__guide,
  #benefits .consistency__sheet,
  #benefits .consistency__copy {
    fill: none;
    vector-effect: non-scaling-stroke;
  }

  #benefits .consistency__axis {
    stroke: var(--upgrade-sky);
    stroke-width: 3;
    opacity: .72;
    stroke-dasharray: 228;
    stroke-dashoffset: 228;
  }

  #benefits .consistency__tick {
    stroke: var(--upgrade-sand);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .92;
  }

  #benefits .consistency__sheet {
    stroke: var(--upgrade-mist);
    stroke-width: 2;
    opacity: .72;
  }

  #benefits .consistency__copy {
    stroke: var(--upgrade-mist);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .58;
  }

  #benefits .consistency__copy--short { opacity: .38; }

  #benefits .consistency__guide {
    stroke: var(--upgrade-sky);
    stroke-width: 2;
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    opacity: .72;
  }

  #benefits .consistency__mark {
    fill: var(--upgrade-sand);
    opacity: 0;
  }

  #benefits .consistency__row {
    opacity: 0;
    transform: translateX(-2px);
    transform-box: fill-box;
    transform-origin: center;
  }

  #benefits .trio__item.is-in .consistency__axis {
    animation: consistency-axis 700ms cubic-bezier(0,0,.2,1) 80ms both;
  }

  #benefits .trio__item.is-in .consistency__row {
    animation: consistency-row 600ms cubic-bezier(0,0,.2,1) both;
    animation-delay: calc(220ms + var(--i) * 130ms);
  }

  #benefits .trio__item.is-in .consistency__guide {
    animation: consistency-guide 520ms cubic-bezier(0,0,.2,1) both;
    animation-delay: calc(300ms + var(--i) * 130ms);
  }

  #benefits .trio__item.is-in .consistency__mark {
    animation: consistency-mark 400ms cubic-bezier(0,0,.2,1) both;
    animation-delay: calc(520ms + var(--i) * 130ms);
  }

  @keyframes consistency-axis {
    to { stroke-dashoffset: 0; }
  }

  @keyframes consistency-row {
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes consistency-guide {
    to { stroke-dashoffset: 0; }
  }

  @keyframes consistency-mark {
    to { opacity: 1; }
  }

  @media (max-width: 900px) {
    #benefits .benefits-head { margin-bottom: 36px; }
    #benefits .trio { gap: 54px; }
    #benefits .trio__top {
      grid-template-columns: minmax(0, 1fr) 116px;
      min-height: 116px;
    }
    #benefits .trio__art,
    #benefits .trio__art .anim {
      width: 116px;
      height: 116px;
    }
    #benefits .trio__body { max-width: 60ch; }
  }

  @media (max-width: 560px) {
    #benefits .trio__item { padding-top: 24px; }
    #benefits .trio__top {
      grid-template-columns: minmax(0, 1fr) 88px;
      gap: 14px;
      min-height: 92px;
      margin-bottom: 18px;
    }
    #benefits .trio__art,
    #benefits .trio__art .anim {
      width: 88px;
      height: 88px;
    }
    #benefits .trio__label {
      padding-bottom: 8px;
      margin-bottom: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #benefits .consistency__axis,
    #benefits .consistency__guide {
      animation: none !important;
      stroke-dashoffset: 0;
    }
    #benefits .consistency__row {
      animation: none !important;
      opacity: 1;
      transform: none;
    }
    #benefits .consistency__mark {
      animation: none !important;
      opacity: 1;
    }
  }


  /* ---------- voordelen v59 ----------
     Twee afwisselende rijen: tekst en animatie vormen samen één verhaal. */
  #benefits .benefits-head {
    margin-bottom: 58px;
  }

  #benefits .trio--stacked {
    display: grid;
    grid-template-columns: 1fr;
    gap: 104px;
  }

  #benefits .trio--stacked .trio__item {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
    gap: clamp(54px, 7vw, 108px);
    align-items: center;
    border-top: 1px solid var(--page-line);
    padding-top: 38px;
  }

  #benefits .trio--stacked .trio__item--students {
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
  }

  #benefits .trio--stacked .trio__content {
    max-width: 620px;
  }

  #benefits .trio--stacked .trio__item--students .trio__content {
    justify-self: end;
  }

  #benefits .trio--stacked .trio__label {
    display: inline-block;
    margin-bottom: 18px;
  }

  #benefits .trio--stacked .trio__title {
    margin: 0 0 22px;
  }

  #benefits .trio--stacked .trio__body {
    max-width: 58ch;
  }

  #benefits .trio--stacked .trio__art--large {
    display: flex;
    width: min(100%, 280px);
    height: auto;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
    justify-self: center;
  }

  #benefits .trio--stacked .trio__art--large .anim {
    width: 100%;
    height: 100%;
  }

  @media (max-width: 900px) {
    #benefits .benefits-head {
      margin-bottom: 44px;
    }

    #benefits .trio--stacked {
      gap: 78px;
    }

    #benefits .trio--stacked .trio__item,
    #benefits .trio--stacked .trio__item--students {
      grid-template-columns: minmax(0, 1fr) 190px;
      gap: 36px;
    }

    #benefits .trio--stacked .trio__item--students .trio__art {
      order: 2;
    }

    #benefits .trio--stacked .trio__item--students .trio__content {
      order: 1;
      justify-self: start;
    }

    #benefits .trio--stacked .trio__art--large {
      width: 190px;
    }
  }

  @media (max-width: 640px) {
    #benefits .trio--stacked {
      gap: 62px;
    }

    #benefits .trio--stacked .trio__item,
    #benefits .trio--stacked .trio__item--students {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-top: 28px;
    }

    #benefits .trio--stacked .trio__content,
    #benefits .trio--stacked .trio__item--students .trio__content {
      max-width: none;
      justify-self: stretch;
      order: 1;
    }

    #benefits .trio--stacked .trio__art,
    #benefits .trio--stacked .trio__item--students .trio__art {
      order: 2;
    }

    #benefits .trio--stacked .trio__art--large {
      width: min(72vw, 230px);
      justify-self: start;
    }

    #benefits .trio--stacked .trio__item--students .trio__art--large {
      justify-self: end;
    }
  }


  /* ---------- voordelen v60 ----------
     Minder afbakening, meer typografische hiërarchie. */
  #benefits .benefits-head {
    max-width: 760px;
    margin-bottom: 68px;
  }

  #benefits .benefits-title {
    display: block;
    margin: 14px 0 0;
    max-width: 16ch;
    font-family: 'Newsreader', serif;
    font-size: clamp(38px, 4.2vw, 58px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--page-fg);
  }

  #benefits .trio--stacked .trio__item,
  #benefits .trio--stacked .trio__item--students {
    border-top: 0;
    padding-top: 0;
  }

  /* Illustraties op licht: duidelijker en donkerder, zonder nieuw palet. */
  #benefits .clock__face,
  #benefits .clock__tick,
  #benefits .clock__hand line {
    stroke: var(--upgrade-deep);
  }

  #benefits .clock__face { opacity: .88; }
  #benefits .clock__tick { opacity: .72; }
  #benefits .clock__tick--major { opacity: .95; }
  #benefits .clock__hand line { opacity: .95; }
  #benefits .clock__pin { fill: var(--upgrade-sand); }

  #benefits .consistency__axis {
    stroke: var(--upgrade-deep);
    opacity: .82;
  }

  #benefits .consistency__tick {
    stroke: var(--upgrade-deep);
    opacity: .92;
  }

  #benefits .consistency__sheet {
    stroke: var(--upgrade-deep);
    opacity: .55;
  }

  #benefits .consistency__copy {
    stroke: var(--upgrade-deep);
    opacity: .62;
  }

  #benefits .consistency__copy--short {
    opacity: .42;
  }

  #benefits .consistency__guide {
    stroke: var(--upgrade-deep);
    opacity: .72;
  }

  #benefits .consistency__mark {
    fill: var(--upgrade-sand);
  }

  /* Beweging: antwoorden worden één voor één naar dezelfde beoordelingsas geleid. */
  #benefits .consistency__row {
    opacity: 0;
    transform: translateX(-2px);
  }

  #benefits .consistency__axis {
    stroke-dasharray: 228;
    stroke-dashoffset: 228;
  }

  #benefits .consistency__guide {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
  }

  #benefits .consistency__mark {
    opacity: 0;
    transform: scale(.92);
    transform-box: fill-box;
    transform-origin: center;
  }

  #benefits .trio__item.is-in .consistency__axis {
    animation: consistency-axis-v60 700ms cubic-bezier(0,0,.2,1) 80ms both;
  }

  #benefits .trio__item.is-in .consistency__row {
    animation: consistency-row-v60 620ms cubic-bezier(0,0,.2,1) both;
    animation-delay: calc(220ms + var(--i) * 150ms);
  }

  #benefits .trio__item.is-in .consistency__guide {
    animation: consistency-guide-v60 520ms cubic-bezier(0,0,.2,1) both;
    animation-delay: calc(310ms + var(--i) * 150ms);
  }

  #benefits .trio__item.is-in .consistency__mark {
    animation: consistency-mark-v60 420ms cubic-bezier(0,0,.2,1) both;
    animation-delay: calc(510ms + var(--i) * 150ms);
  }

  @keyframes consistency-axis-v60 {
    to { stroke-dashoffset: 0; }
  }

  @keyframes consistency-row-v60 {
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes consistency-guide-v60 {
    to { stroke-dashoffset: 0; }
  }

  @keyframes consistency-mark-v60 {
    to { opacity: 1; transform: scale(1); }
  }

  @media (max-width: 640px) {
    #benefits .benefits-head {
      margin-bottom: 48px;
    }

    #benefits .benefits-title {
      max-width: 18ch;
      font-size: clamp(34px, 10vw, 46px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #benefits .consistency__axis,
    #benefits .consistency__guide {
      animation: none !important;
      stroke-dashoffset: 0;
    }

    #benefits .consistency__row {
      animation: none !important;
      opacity: 1;
      transform: none;
    }

    #benefits .consistency__mark {
      animation: none !important;
      opacity: 1;
      transform: none;
    }
  }


  /* ---------- voordelen v61 ----------
     Gecentreerde sectiekop, geen scheidingslijnen, hoger contrast en
     rustige continue beweging in de tweede illustratie. */

  #benefits .benefits-head {
    max-width: 820px;
    margin: 0 auto 72px;
    text-align: center;
  }

  #benefits .benefits-head .section-eyebrow {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  #benefits .benefits-title {
    max-width: 18ch;
    margin: 14px auto 0;
    text-align: center;
  }

  /* Verwijder zowel de oude middenlijn als alle rij-afbakeningen. */
  #benefits .trio::after {
    display: none !important;
    content: none !important;
  }

  #benefits .trio--stacked .trio__item,
  #benefits .trio--stacked .trio__item--students {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Warm Sand hoort op donker. Op deze lichte sectie gebruiken labels en
     functionele illustratiedetails de adaptieve tekstkleuren. */
  #benefits .trio__label {
    color: var(--page-muted);
    border-bottom-color: var(--page-fg);
  }

  #benefits .clock__pin {
    fill: var(--page-fg);
  }

  #benefits .consistency__axis,
  #benefits .consistency__tick,
  #benefits .consistency__sheet,
  #benefits .consistency__copy,
  #benefits .consistency__guide {
    stroke: var(--page-fg);
  }

  #benefits .consistency__axis { opacity: .82; }
  #benefits .consistency__tick { opacity: .92; }
  #benefits .consistency__sheet { opacity: .55; }
  #benefits .consistency__copy { opacity: .62; }
  #benefits .consistency__copy--short { opacity: .55; }
  #benefits .consistency__guide { opacity: .72; }

  #benefits .consistency__mark {
    fill: var(--page-fg);
  }

  /* De illustratie blijft bewegen zolang zij in beeld is. Elke antwoordrij
     schuift maximaal 2px richting dezelfde rubric-as; de markeringen ademen
     subtiel in een verschoven ritme. */
  #benefits .trio__item.is-in .consistency__axis {
    stroke-dashoffset: 0;
    animation: consistency-axis-loop-v61 7s cubic-bezier(0,0,.2,1) infinite;
  }

  #benefits .trio__item.is-in .consistency__row {
    opacity: 1;
    animation: consistency-row-loop-v61 5.8s cubic-bezier(0,0,.2,1) infinite;
    animation-delay: calc(var(--i) * -1.25s);
  }

  #benefits .trio__item.is-in .consistency__guide {
    stroke-dashoffset: 0;
    animation: consistency-guide-loop-v61 5.8s cubic-bezier(0,0,.2,1) infinite;
    animation-delay: calc(var(--i) * -1.25s);
  }

  #benefits .trio__item.is-in .consistency__mark {
    opacity: 1;
    animation: consistency-mark-loop-v61 5.8s cubic-bezier(0,0,.2,1) infinite;
    animation-delay: calc(var(--i) * -1.25s);
  }

  @keyframes consistency-axis-loop-v61 {
    0%, 100% { opacity: .72; }
    50% { opacity: .92; }
  }

  @keyframes consistency-row-loop-v61 {
    0%, 18%, 100% { transform: translateX(0); }
    42%, 58% { transform: translateX(2px); }
  }

  @keyframes consistency-guide-loop-v61 {
    0%, 18%, 100% { opacity: .58; }
    42%, 58% { opacity: .90; }
  }

  @keyframes consistency-mark-loop-v61 {
    0%, 18%, 100% { transform: scale(.94); opacity: .72; }
    42%, 58% { transform: scale(1.06); opacity: 1; }
  }

  @media (max-width: 640px) {
    #benefits .benefits-head {
      margin-bottom: 50px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #benefits .trio__item.is-in .consistency__axis,
    #benefits .trio__item.is-in .consistency__row,
    #benefits .trio__item.is-in .consistency__guide,
    #benefits .trio__item.is-in .consistency__mark {
      animation: none !important;
    }

    #benefits .consistency__axis,
    #benefits .consistency__guide {
      stroke-dashoffset: 0;
    }

    #benefits .consistency__row {
      opacity: 1;
      transform: none;
    }

    #benefits .consistency__mark {
      opacity: 1;
      transform: none;
    }
  }


  /* ---------- v62: bredere benefits-kop + toegankelijk kleuraccent ----------
     Donker Sky is een vlakke mix van bestaande merkkleuren:
     45% Sky Blue + 55% Deep Blue. Op #EEF5F8 ≈ 4.63:1. */

  #benefits {
    --benefit-sky-deep: color-mix(in srgb,
      var(--upgrade-sky) 45%,
      var(--upgrade-deep) 55%);
  }

  #benefits .benefits-head {
    max-width: 1240px;
  }

  #benefits .benefits-title {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(38px, 3.1vw, 48px);
    line-height: 1.08;
  }

  #benefits .benefits-head .section-eyebrow,
  #benefits .trio__label {
    color: var(--benefit-sky-deep);
  }

  #benefits .trio__label {
    border-bottom-color: var(--benefit-sky-deep);
  }

  /* Meer kleur in de illustraties, zonder contrast te verliezen. */
  #benefits .clock__face,
  #benefits .clock__tick {
    stroke: var(--benefit-sky-deep);
    opacity: 1;
  }

  #benefits .clock__tick--major,
  #benefits .clock__hand line {
    stroke: var(--upgrade-deep);
    opacity: 1;
  }

  #benefits .clock__pin {
    fill: var(--benefit-sky-deep);
  }

  #benefits .consistency__axis,
  #benefits .consistency__tick {
    stroke: var(--upgrade-deep);
    opacity: 1;
  }

  #benefits .consistency__sheet,
  #benefits .consistency__copy,
  #benefits .consistency__guide {
    stroke: var(--benefit-sky-deep);
  }

  #benefits .consistency__sheet { opacity: .92; }
  #benefits .consistency__copy { opacity: .88; }
  #benefits .consistency__copy--short { opacity: .72; }
  #benefits .consistency__guide { opacity: .92; }

  #benefits .consistency__mark {
    fill: var(--upgrade-deep);
  }

  /* Hero: gedempt wit voor de categorie, zodat het wisselende
     Sky Blue woord visueel de duidelijke accentrol houdt. */
  .hero .section-eyebrow {
    color: #B3C2CA !important;
  }

  .hero-title__swap {
    color: var(--upgrade-sky);
  }

  @media (max-width: 1050px) {
    #benefits .benefits-title {
      white-space: normal;
      max-width: 20ch;
      margin-left: auto;
      margin-right: auto;
    }
  }


  /* ---------- v63 ----------
     Geen donkere Sky-variant meer voor tekst. Kleine labels blijven Deep Blue.
     #2E86B8 komt al voor in de bestaande achtergrondvormen en werkt hier
     als duidelijk lichtere grafische blauwtint (≈3.65:1 op #EEF5F8). */

  #benefits .benefits-head .section-eyebrow,
  #benefits .trio__label {
    color: var(--upgrade-deep);
  }

  #benefits .trio__label {
    border-bottom-color: var(--upgrade-deep);
  }

  #benefits .clock__face,
  #benefits .clock__tick {
    stroke: #2E86B8;
  }

  #benefits .clock__tick--major,
  #benefits .clock__hand line {
    stroke: var(--upgrade-deep);
  }

  #benefits .clock__pin {
    fill: #2E86B8;
  }

  /* Oude rubric-as illustratie volledig uitschakelen. */
  #benefits .anim--consistency {
    display: none !important;
  }

  /* Nieuwe animatie: individuele antwoorden -> feedback -> klasoverzicht. */
  #benefits .anim--learning {
    overflow: visible;
  }

  #benefits .learning__sheet,
  #benefits .learning__panel,
  #benefits .learning__bar-track {
    fill: none;
    stroke: #2E86B8;
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
  }

  #benefits .learning__copy,
  #benefits .learning__panel-line {
    stroke: var(--upgrade-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: .78;
    vector-effect: non-scaling-stroke;
  }

  #benefits .learning__copy--short {
    opacity: .48;
  }

  #benefits .learning__feedback,
  #benefits .learning__flow {
    fill: none;
    stroke: #2E86B8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  #benefits .learning__feedback {
    stroke-width: 3.6;
    stroke-dasharray: 74;
    stroke-dashoffset: 74;
  }

  #benefits .learning__flow {
    stroke-width: 2.8;
    stroke-dasharray: 5 9;
    opacity: .74;
  }

  #benefits .learning__bar-track {
    opacity: .34;
  }

  #benefits .learning__bar-fill {
    fill: #2E86B8;
    transform-box: fill-box;
    transform-origin: left center;
  }

  #benefits .learning__insight {
    fill: var(--upgrade-deep);
    transform-box: fill-box;
    transform-origin: center;
  }

  #benefits .learning__paper {
    transform-box: fill-box;
    transform-origin: center;
  }

  /* De hele illustratie blijft rustig leven in een cyclus van 7.2 s.
     Beweging blijft beperkt: papier beweegt maximaal 2 px. */
  #benefits .trio__item.is-in .learning__paper--1 {
    animation: learning-paper-v63 7.2s cubic-bezier(0,0,.2,1) -0.0s infinite;
  }
  #benefits .trio__item.is-in .learning__paper--2 {
    animation: learning-paper-v63 7.2s cubic-bezier(0,0,.2,1) -2.4s infinite;
  }
  #benefits .trio__item.is-in .learning__paper--3 {
    animation: learning-paper-v63 7.2s cubic-bezier(0,0,.2,1) -4.8s infinite;
  }

  #benefits .trio__item.is-in .learning__paper--1 .learning__feedback {
    animation: learning-feedback-v63 7.2s cubic-bezier(0,0,.2,1) -0.0s infinite;
  }
  #benefits .trio__item.is-in .learning__paper--2 .learning__feedback {
    animation: learning-feedback-v63 7.2s cubic-bezier(0,0,.2,1) -2.4s infinite;
  }
  #benefits .trio__item.is-in .learning__paper--3 .learning__feedback {
    animation: learning-feedback-v63 7.2s cubic-bezier(0,0,.2,1) -4.8s infinite;
  }

  #benefits .trio__item.is-in .learning__flow--1 {
    animation: learning-flow-v63 7.2s linear -0.0s infinite;
  }
  #benefits .trio__item.is-in .learning__flow--2 {
    animation: learning-flow-v63 7.2s linear -2.4s infinite;
  }
  #benefits .trio__item.is-in .learning__flow--3 {
    animation: learning-flow-v63 7.2s linear -4.8s infinite;
  }

  #benefits .trio__item.is-in .learning__bar--1 .learning__bar-fill {
    animation: learning-bar-v63 7.2s cubic-bezier(0,0,.2,1) -0.0s infinite;
  }
  #benefits .trio__item.is-in .learning__bar--2 .learning__bar-fill {
    animation: learning-bar-v63 7.2s cubic-bezier(0,0,.2,1) -2.4s infinite;
  }
  #benefits .trio__item.is-in .learning__bar--3 .learning__bar-fill {
    animation: learning-bar-v63 7.2s cubic-bezier(0,0,.2,1) -4.8s infinite;
  }

  #benefits .trio__item.is-in .learning__insight--1 {
    animation: learning-insight-v63 7.2s cubic-bezier(0,0,.2,1) -0.0s infinite;
  }
  #benefits .trio__item.is-in .learning__insight--2 {
    animation: learning-insight-v63 7.2s cubic-bezier(0,0,.2,1) -2.4s infinite;
  }
  #benefits .trio__item.is-in .learning__insight--3 {
    animation: learning-insight-v63 7.2s cubic-bezier(0,0,.2,1) -4.8s infinite;
  }

  @keyframes learning-paper-v63 {
    0%, 18%, 100% { transform: translateX(0); }
    28%, 42% { transform: translateX(2px); }
    52% { transform: translateX(0); }
  }

  @keyframes learning-feedback-v63 {
    0%, 12%, 100% { stroke-dashoffset: 74; opacity: .45; }
    24%, 48% { stroke-dashoffset: 0; opacity: 1; }
    60% { stroke-dashoffset: 0; opacity: .72; }
    72% { stroke-dashoffset: 74; opacity: .45; }
  }

  @keyframes learning-flow-v63 {
    0%, 15% { stroke-dashoffset: 28; opacity: .30; }
    28%, 52% { stroke-dashoffset: 0; opacity: .92; }
    68%, 100% { stroke-dashoffset: -28; opacity: .30; }
  }

  @keyframes learning-bar-v63 {
    0%, 18%, 100% { transform: scaleX(.70); opacity: .50; }
    34%, 56% { transform: scaleX(1); opacity: 1; }
    72% { transform: scaleX(.82); opacity: .72; }
  }

  @keyframes learning-insight-v63 {
    0%, 20%, 100% { transform: scale(.88); opacity: .42; }
    38%, 58% { transform: scale(1); opacity: 1; }
    72% { transform: scale(.94); opacity: .66; }
  }

  @media (prefers-reduced-motion: reduce) {
    #benefits .learning__paper,
    #benefits .learning__feedback,
    #benefits .learning__flow,
    #benefits .learning__bar-fill,
    #benefits .learning__insight {
      animation: none !important;
      transform: none !important;
      opacity: 1 !important;
    }

    #benefits .learning__feedback {
      stroke-dashoffset: 0;
    }
  }


  /* ---------- v64: duidelijkere koppenhiërarchie ----------
     De sectietitel is bewust dominant; de twee voordeelkoppen blijven
     duidelijk een niveau lager. Alle eyebrows gebruiken #2E86B8. */

  #benefits .benefits-head {
    max-width: 1160px;
    margin-bottom: 88px;
  }

  #benefits .benefits-title {
    max-width: 20ch;
    margin: 16px auto 0;
    font-size: clamp(54px, 5.8vw, 78px);
    line-height: 1.00;
    letter-spacing: -0.025em;
    white-space: normal;
  }

  #benefits .trio__title {
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.12;
    margin-bottom: 22px;
  }

  #benefits .benefits-head .section-eyebrow,
  #benefits .trio__label {
    color: #2E86B8;
    border-bottom-color: #2E86B8;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .09em;
  }

  /* De sectie-eyebrow blijft iets prominenter dan de twee sublabels. */
  #benefits .benefits-head .section-eyebrow {
    font-size: 20px;
  }

  #benefits .trio__label {
    margin-bottom: 14px;
  }

  @media (max-width: 900px) {
    #benefits .benefits-head {
      margin-bottom: 68px;
    }

    #benefits .benefits-title {
      max-width: 18ch;
      font-size: clamp(48px, 8vw, 66px);
    }
  }

  @media (max-width: 640px) {
    #benefits .benefits-title {
      max-width: 12ch;
      font-size: clamp(42px, 12vw, 56px);
      line-height: 1.02;
    }

    #benefits .benefits-head .section-eyebrow,
    #benefits .trio__label {
      font-size: 19px;
    }
  }


  #bereik .reach-eyebrow {
    display:block;
    font-family:'DM Sans',sans-serif;
    font-size:17px;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:#2E86B8;
  }
  #bereik .reach-title {
    font-family:'Newsreader',serif;
    font-weight:500;
    color:var(--page-fg);
  }
  #bereik .reach-copy {
    color:var(--page-muted);
    line-height:1.65;
  }
  @media (prefers-reduced-motion: reduce) {
    #bereik * { scroll-behavior:auto; }
  }


  #bereik.reach-question-section {
    padding-top:94px;
    padding-bottom:94px;
  }
  #bereik .reach-question {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(70px,9vw,130px);
    align-items:start;
  }
  #bereik .reach-question__intro .reach-eyebrow { margin-bottom:18px; }
  #bereik .reach-question__intro .reach-title {
    font-size:clamp(44px,5vw,68px);
    line-height:1.02;
    max-width:11ch;
  }
  #bereik .reach-question__answers {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:44px 46px;
    padding-top:7px;
  }
  #bereik .reach-answer h3 {
    margin:0 0 10px;
    font-family:'DM Sans',sans-serif;
    font-size:18px;
    font-weight:600;
    color:#2E86B8;
  }
  #bereik .reach-answer p {
    margin:0;
    max-width:30ch;
    font-size:16px;
  }
  @media (max-width:860px) {
    #bereik .reach-question { grid-template-columns:1fr; gap:48px; }
    #bereik .reach-question__intro .reach-title { max-width:16ch; }
  }
  @media (max-width:560px) {
    #bereik.reach-question-section { padding-top:64px; padding-bottom:64px; }
    #bereik .reach-question__answers { grid-template-columns:1fr; gap:30px; }
  }


  /* ---------- bereik v67 ----------
     De vraag staat bovenaan; de vier antwoorden vormen eronder één rustige rij. */

  #bereik.reach-question-section {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  #bereik .reach-question--top {
    display: block;
  }

  #bereik .reach-question--top .reach-question__intro {
    max-width: 980px;
    margin: 0 auto 58px;
    text-align: center;
  }

  #bereik .reach-question--top .reach-eyebrow {
    margin-bottom: 18px;
  }

  #bereik .reach-question--top .reach-title {
    max-width: 17ch;
    margin: 0 auto;
    font-size: clamp(46px, 5.1vw, 68px);
    line-height: 1.02;
  }

  #bereik .reach-question--top .reach-question__answers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    padding-top: 0;
  }

  #bereik .reach-question--top .reach-answer {
    min-width: 0;
  }

  #bereik .reach-question--top .reach-answer h3 {
    margin: 0 0 11px;
    font-size: 19px;
    line-height: 1.25;
    color: #2E86B8;
  }

  #bereik .reach-question--top .reach-answer p {
    max-width: 27ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
  }

  @media (max-width: 900px) {
    #bereik .reach-question--top .reach-question__intro {
      margin-bottom: 48px;
    }

    #bereik .reach-question--top .reach-question__answers {
      grid-template-columns: 1fr 1fr;
      gap: 40px 46px;
    }
  }

  @media (max-width: 560px) {
    #bereik.reach-question-section {
      padding-top: 64px;
      padding-bottom: 64px;
    }

    #bereik .reach-question--top .reach-title {
      max-width: 13ch;
      font-size: clamp(40px, 11vw, 52px);
    }

    #bereik .reach-question--top .reach-question__answers {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    #bereik .reach-question--top .reach-answer p {
      max-width: 34ch;
    }
  }


  /* ---------- bereik v68 ----------
     Geen eyebrow; compactere titel; korte scheidingsstreepjes tussen de kopjes. */

  #bereik .reach-question--top .reach-question__intro {
    margin-bottom: 48px;
  }

  #bereik .reach-question--top .reach-title {
    max-width: 20ch;
    margin: 0 auto;
    font-size: clamp(38px, 4.1vw, 54px);
    line-height: 1.06;
  }

  #bereik .reach-question--top .reach-question__answers {
    position: relative;
  }

  #bereik .reach-question--top .reach-answer {
    position: relative;
  }

  #bereik .reach-question--top .reach-answer:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 8px;
    right: calc(-1 * clamp(14px, 2vw, 28px));
    width: 2px;
    height: 18px;
    background: #2E86B8;
    opacity: .72;
  }

  @media (max-width: 900px) {
    #bereik .reach-question--top .reach-answer::after {
      display: none;
    }
  }

  @media (max-width: 560px) {
    #bereik .reach-question--top .reach-title {
      max-width: 15ch;
      font-size: clamp(36px, 10vw, 46px);
    }
  }


  /* ---------- bereik v69 ----------
     Vier zelfstandige antwoorden; doorlopende neutrale scheiding tussen de kolommen. */

  #bereik.reach-question-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  #bereik .reach-question--top .reach-question__answers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-top: 0;
  }

  #bereik .reach-question--top .reach-answer {
    position: relative;
    min-width: 0;
    padding: 4px clamp(26px, 3vw, 46px) 6px;
  }

  #bereik .reach-question--top .reach-answer:first-child {
    padding-left: 0;
  }

  #bereik .reach-question--top .reach-answer:last-child {
    padding-right: 0;
  }

  /* Oude korte blauwe streepjes uitschakelen. */
  #bereik .reach-question--top .reach-answer::after {
    display: none !important;
    content: none !important;
  }

  #bereik .reach-question--top .reach-answer + .reach-answer {
    border-left: 1px solid var(--page-line);
  }

  #bereik .reach-question--top .reach-answer h3 {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.25;
    color: #2E86B8;
  }

  #bereik .reach-question--top .reach-answer p {
    max-width: 29ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
  }

  @media (max-width: 900px) {
    #bereik .reach-question--top .reach-question__answers {
      grid-template-columns: 1fr 1fr;
      row-gap: 40px;
    }

    #bereik .reach-question--top .reach-answer {
      padding-left: 28px;
      padding-right: 28px;
    }

    #bereik .reach-question--top .reach-answer:nth-child(odd) {
      padding-left: 0;
      border-left: 0;
    }

    #bereik .reach-question--top .reach-answer:nth-child(even) {
      padding-right: 0;
      border-left: 1px solid var(--page-line);
    }
  }

  @media (max-width: 560px) {
    #bereik.reach-question-section {
      padding-top: 56px;
      padding-bottom: 56px;
    }

    #bereik .reach-question--top .reach-question__answers {
      grid-template-columns: 1fr;
      row-gap: 30px;
    }

    #bereik .reach-question--top .reach-answer,
    #bereik .reach-question--top .reach-answer:nth-child(odd),
    #bereik .reach-question--top .reach-answer:nth-child(even) {
      padding: 0 0 0 18px;
      border-left: 1px solid var(--page-line);
    }
  }



  /* ---------- productschermen-carrousel (v55) ----------
     Afgeschermd onder #features: geen bestaande homepage-component wordt geraakt. */
  #features.uc-section {
    background: transparent;
    --uc-side-hover: color-mix(in srgb, var(--upgrade-sky) 8%, var(--upgrade-deep));
    --uc-side-active: color-mix(in srgb, var(--upgrade-sky) 18%, var(--upgrade-deep));
  }

  #features .uc-wrap { max-width: 1320px; margin: 0 auto; }
  #features .uc-eyebrow {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--page-fg);
  }
  #features .uc-head { margin-bottom: 64px; }
  #features .uc-head h2 {
    font-size: clamp(34px, 4.4vw, 54px);
    line-height: 1.08;
    max-width: 18ch;
  }
  #features .uc-head .lead {
    font-size: 18px;
    color: var(--page-muted);
    max-width: 52ch;
    margin-top: 18px;
  }

  #features .uc-car {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
  }
  #features .uc-app {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    outline: 1px solid var(--upgrade-deep);
  }
  #features .uc-side {
    background: var(--upgrade-deep);
    color: var(--upgrade-white);
    padding: 32px 18px;
  }
  #features .uc-side__head {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--upgrade-sky);
    margin: 0 0 22px 14px;
  }
  #features .uc-side__list { display: grid; gap: 4px; }
  #features .uc-side__item {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    background: transparent;
    color: inherit;
    border: 0;
    border-left: 2px solid transparent;
    padding: 14px 14px 14px 12px;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0,0,.2,1), border-color 150ms cubic-bezier(0,0,.2,1);
  }
  #features .uc-side__item:hover { background: var(--uc-side-hover); }
  #features .uc-side__item[aria-selected="true"] {
    background: var(--uc-side-active);
    border-left-color: var(--upgrade-sky);
  }
  #features .uc-side__t { display: block; font-size: 15px; color: var(--upgrade-white); }
  #features .uc-side__s { display: block; font-size: 12.5px; color: var(--upgrade-mist); margin-top: 3px; }
  #features .uc-side__y { display: none; }
  #features .uc-side__item:focus-visible { outline: 2px solid var(--upgrade-sky); outline-offset: -2px; }

  #features .uc-main {
    background: var(--upgrade-white);
    display: grid;
    padding: 26px;
    min-width: 0;
  }
  #features .uc-shotwrap {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms cubic-bezier(0,0,.2,1), visibility 0s linear 200ms;
  }
  #features .uc-shotwrap.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms cubic-bezier(0,0,.2,1), visibility 0s;
  }
  #features .uc-shot { position: relative; line-height: 0; outline: 1px solid var(--page-line); }
  #features .uc-shot img { display: block; max-width: 100%; max-height: 500px; width: auto; height: auto; }
  #features .uc-pin {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--upgrade-deep);
    color: var(--upgrade-white);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 2px solid var(--upgrade-white);
    transform: translate(-50%, -50%);
    transition: background-color 150ms cubic-bezier(0,0,.2,1), color 150ms cubic-bezier(0,0,.2,1);
  }
  #features .uc-shotcap { font-size: 13px; color: var(--page-muted); line-height: 1.4; text-align: center; }
  #features .uc-pin.is-hot { background: var(--upgrade-sky); color: var(--upgrade-deep); }

  #features .uc-txts { display: grid; }
  #features .uc-txt {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms cubic-bezier(0,0,.2,1), visibility 0s linear 200ms;
  }
  #features .uc-txt.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms cubic-bezier(0,0,.2,1), visibility 0s;
  }
  #features .uc-txt h3 {
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.06;
    margin-bottom: 22px;
  }
  #features .uc-copy { font-size: 17px; color: var(--page-muted); max-width: 42ch; }
  #features .uc-leg { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
  #features .uc-leg li {
    display: flex;
    gap: 14px;
    font-size: 15px;
    color: var(--page-muted);
    line-height: 1.5;
    align-items: flex-start;
  }
  #features .uc-leg i {
    flex: 0 0 24px;
    height: 24px;
    background: var(--upgrade-deep);
    color: var(--upgrade-white);
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms cubic-bezier(0,0,.2,1), color 150ms cubic-bezier(0,0,.2,1);
  }
  #features .uc-leg li.is-hot i { background: var(--upgrade-sky); color: var(--upgrade-deep); }
  #features .uc-leg li.is-hot { color: var(--page-fg); }

  #features .uc-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 40px; }
  #features .uc-ctrl button {
    width: 48px;
    height: 48px;
    border: 1px solid var(--page-muted);
    background: transparent;
    color: var(--page-fg);
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 150ms cubic-bezier(0,0,.2,1), transform 150ms cubic-bezier(0,0,.2,1);
  }
  #features .uc-ctrl button:hover { border-color: var(--page-fg); transform: translateY(-1px); }
  #features .uc-ctrl button:active { transform: none; }
  #features .uc-ctrl button:focus-visible { outline: 2px solid var(--upgrade-sky); outline-offset: 1px; }
  #features .uc-ctrl svg {
    width: 18px;
    height: 18px;
    stroke: var(--page-fg);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: square;
  }
  #features .uc-count { margin-left: 10px; font-size: 14px; color: var(--page-muted); font-variant-numeric: tabular-nums; }

  @media (max-width: 1100px) {
    #features .uc-car { grid-template-columns: 1fr; gap: 40px; }
  }

  @media (max-width: 700px) {
    #features .uc-wrap { max-width: 100%; }
    #features .uc-head { margin-bottom: 40px; }
    #features .uc-app { grid-template-columns: 1fr; }
    #features .uc-side { padding: 18px 14px; }
    #features .uc-side__head { margin: 0 0 10px 6px; }
    #features .uc-side__list { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    #features .uc-side__item {
      border-left: 0;
      border-bottom: 2px solid transparent;
      padding: 10px 6px;
      text-align: center;
      min-height: 44px;
    }
    #features .uc-side__item[aria-selected="true"] { border-bottom-color: var(--upgrade-sky); }
    #features .uc-side__s { display: none; }
    #features .uc-side__t { font-size: 13px; }
    #features .uc-side__x { display: none; }
    #features .uc-side__y { display: inline; }
    #features .uc-main { padding: 14px; }
    #features .uc-shot img { max-height: 340px; }
    #features .uc-pin { width: 18px; height: 18px; font-size: 10px; outline-width: 1px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #features .uc-shotwrap,
    #features .uc-shotwrap.is-active,
    #features .uc-txt,
    #features .uc-txt.is-active { transition: none; }
    #features .uc-ctrl button:hover { transform: none; }
  }



  /* ---------- functies v71 ----------
     Alle vier schermkeuzes blijven altijd zichtbaar. Het scherm krijgt
     ruimte; uitleg en pins blijven rechts gekoppeld aan hetzelfde beeld. */

  #features.uc-section {
    padding-top: 96px;
    padding-bottom: 104px;
  }

  #features .uc-wrap {
    max-width: 1380px;
  }

  #features .uc-head {
    margin: 0 auto 52px;
    text-align: center;
  }

  #features .uc-eyebrow {
    margin-bottom: 14px;
    color: var(--upgrade-deep);
  }

  #features .uc-head h2 {
    max-width: 22ch;
    margin: 0 auto;
    font-size: clamp(44px, 5vw, 66px);
    line-height: 1.04;
  }

  #features .uc-head .lead {
    display: none;
  }

  #features .uc-car {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr);
    column-gap: clamp(54px, 6vw, 88px);
    row-gap: 48px;
    align-items: center;
  }

  /* De oude donkere sidebar wordt een horizontale, altijd zichtbare selector. */
  #features .uc-app {
    display: contents;
    outline: 0;
  }

  #features .uc-side {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0;
    background: transparent;
    color: var(--upgrade-deep);
  }

  #features .uc-side__head {
    display: none;
  }

  #features .uc-side__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--upgrade-deep) 24%, transparent);
  }

  #features .uc-side__item {
    position: relative;
    min-height: 80px;
    padding: 17px 22px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-left: 1px solid color-mix(in srgb, var(--upgrade-deep) 16%, transparent);
    background: transparent;
    color: var(--upgrade-deep);
    text-align: center;
    cursor: pointer;
    transition:
      background-color 300ms cubic-bezier(0,0,.2,1),
      border-color 300ms cubic-bezier(0,0,.2,1);
  }

  #features .uc-side__item:first-child {
    border-left: 0;
  }

  #features .uc-side__item:hover {
    background: color-mix(in srgb, var(--upgrade-white) 34%, transparent);
  }

  #features .uc-side__item[aria-selected="true"] {
    background: color-mix(in srgb, var(--upgrade-white) 48%, transparent);
    border-left-color: color-mix(in srgb, var(--upgrade-deep) 16%, transparent);
    border-bottom-color: var(--upgrade-deep);
  }

  #features .uc-side__item:first-child[aria-selected="true"] {
    border-left-color: transparent;
  }

  #features .uc-side__t {
    display: block;
    color: var(--upgrade-deep);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
  }

  #features .uc-side__s {
    display: block;
    margin-top: 5px;
    color: var(--page-muted);
    font-size: 13px;
    line-height: 1.3;
  }

  #features .uc-side__x {
    display: inline;
  }

  #features .uc-side__y {
    display: none;
  }

  #features .uc-side__item:focus-visible {
    outline: 2px solid var(--upgrade-deep);
    outline-offset: -4px;
  }

  /* Het echte productscherm staat centraal; twee harde vlakken erachter
     verwijzen naar het vaste stapelmotief van Upgrade. */
  #features .uc-main {
    position: relative;
    isolation: isolate;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: grid;
    min-width: 0;
    padding: 0;
    background: transparent;
  }

  #features .uc-main::before,
  #features .uc-main::after {
    content: '';
    position: absolute;
    pointer-events: none;
  }

  #features .uc-main::before {
    inset: 12px -12px -12px 12px;
    z-index: -1;
    background: color-mix(in srgb, var(--upgrade-sky) 42%, transparent);
  }

  #features .uc-main::after {
    inset: 24px -24px -24px 24px;
    z-index: -2;
    background: color-mix(in srgb, var(--upgrade-deep) 12%, transparent);
  }

  #features .uc-shotwrap {
    grid-area: 1 / 1;
    width: 100%;
    min-height: 540px;
    padding: 22px 22px 16px;
    gap: 12px;
    background: var(--upgrade-white);
    border: 1px solid color-mix(in srgb, var(--upgrade-deep) 24%, transparent);
  }

  #features .uc-shot {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    outline: 0;
  }

  #features .uc-shot img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 590px;
  }

  #features .uc-shotcap {
    margin-top: auto;
    color: var(--page-muted);
    font-size: 13px;
  }

  #features .uc-detail {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    padding: 0 0 12px;
  }

  #features .uc-txt h3 {
    max-width: 13ch;
    margin-bottom: 20px;
    font-size: clamp(34px, 3.5vw, 48px);
  }

  #features .uc-copy {
    max-width: 39ch;
  }

  #features .uc-leg {
    margin-top: 30px;
    gap: 14px;
  }

  #features .uc-ctrl {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid color-mix(in srgb, var(--upgrade-deep) 18%, transparent);
  }

  #features .uc-ctrl__hint {
    margin-right: auto;
    color: var(--page-fg);
    font-size: 14px;
    font-weight: 600;
  }

  #features .uc-count {
    order: 1;
    min-width: 54px;
    margin: 0 8px 0 0;
    color: var(--page-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }

  #features .uc-prev {
    order: 2;
  }

  #features .uc-next {
    order: 3;
  }

  #features .uc-ctrl button {
    width: 48px;
    height: 48px;
    border-color: var(--upgrade-deep);
    color: var(--upgrade-deep);
  }

  #features .uc-ctrl svg {
    stroke: var(--upgrade-deep);
  }

  @media (max-width: 1050px) {
    #features .uc-car {
      grid-template-columns: 1fr;
      row-gap: 42px;
    }

    #features .uc-side {
      grid-column: 1;
      grid-row: 1;
    }

    #features .uc-main {
      grid-column: 1;
      grid-row: 2;
      width: min(100%, 860px);
      justify-self: center;
    }

    #features .uc-detail {
      grid-column: 1;
      grid-row: 3;
      width: min(100%, 760px);
      justify-self: center;
      padding-top: 18px;
    }

    #features .uc-txt h3 {
      max-width: 18ch;
    }

    #features .uc-copy {
      max-width: 54ch;
    }
  }

  @media (max-width: 700px) {
    #features.uc-section {
      padding-top: 70px;
      padding-bottom: 76px;
    }

    #features .uc-head {
      margin-bottom: 38px;
    }

    #features .uc-head h2 {
      max-width: 16ch;
      font-size: clamp(38px, 10vw, 50px);
    }

    #features .uc-side {
      padding: 0;
    }

    /* Op mobiel blijven alle vier keuzes zichtbaar in een 2 × 2 selector. */
    #features .uc-side__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid color-mix(in srgb, var(--upgrade-deep) 22%, transparent);
    }

    #features .uc-side__item {
      min-height: 72px;
      padding: 14px 10px 12px;
      border: 0;
      border-bottom: 3px solid transparent;
    }

    #features .uc-side__item:nth-child(even) {
      border-left: 1px solid color-mix(in srgb, var(--upgrade-deep) 18%, transparent);
    }

    #features .uc-side__item:nth-child(n+3) {
      border-top: 1px solid color-mix(in srgb, var(--upgrade-deep) 18%, transparent);
    }

    #features .uc-side__item[aria-selected="true"] {
      border-bottom-color: var(--upgrade-deep);
    }

    #features .uc-side__s {
      display: block;
      font-size: 12px;
    }

    #features .uc-side__t {
      font-size: 15px;
    }

    #features .uc-main::before {
      inset: 8px -8px -8px 8px;
    }

    #features .uc-main::after {
      inset: 16px -16px -16px 16px;
    }

    #features .uc-shotwrap {
      min-height: 390px;
      padding: 14px 14px 12px;
    }

    #features .uc-shot img {
      max-height: 400px;
    }

    #features .uc-detail {
      padding-top: 10px;
    }

    #features .uc-ctrl {
      flex-wrap: wrap;
    }

    #features .uc-ctrl__hint {
      flex: 1 0 100%;
      margin: 0 0 4px;
    }
  }

  @media (max-width: 430px) {
    #features .uc-side__s {
      display: none;
    }

    #features .uc-side__item {
      min-height: 56px;
    }

    #features .uc-shotwrap {
      min-height: 320px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #features .uc-side__item {
      transition: none;
    }
  }


  /* ---------- functies v73 ----------
     Desktop/laptop compacter: tabs, scherm en uitleg horen als één geheel
     binnen een normaal laptopscherm te passen. Mobiele stapeling blijft intact. */

  @media (min-width: 1051px) {
    #features.uc-section {
      padding-top: 54px;
      padding-bottom: 62px;
    }

    #features .uc-wrap {
      max-width: 1280px;
    }

    #features .uc-head {
      margin-bottom: 28px;
    }

    #features .uc-head h2 {
      max-width: 23ch;
      font-size: clamp(40px, 4vw, 54px);
      line-height: 1.03;
    }

    #features .uc-eyebrow {
      margin-bottom: 10px;
    }

    #features .uc-car {
      grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr);
      column-gap: clamp(44px, 5vw, 70px);
      row-gap: 26px;
      align-items: center;
    }

    #features .uc-side__item {
      min-height: 60px;
      padding: 11px 18px 10px;
    }

    #features .uc-side__t {
      font-size: 16px;
    }

    #features .uc-side__s {
      margin-top: 3px;
      font-size: 12px;
    }

    #features .uc-main {
      align-self: center;
    }

    #features .uc-main::before {
      inset: 8px -8px -8px 8px;
    }

    #features .uc-main::after {
      inset: 16px -16px -16px 16px;
    }

    #features .uc-shotwrap {
      min-height: 0;
      height: 372px;
      padding: 16px 16px 12px;
      gap: 8px;
    }

    #features .uc-shot {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
    }

    #features .uc-shot img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 326px;
      object-fit: contain;
    }

    #features .uc-shotcap {
      margin: 0;
      font-size: 12px;
      line-height: 1.3;
    }

    #features .uc-detail {
      padding: 4px 0 0;
    }

    #features .uc-txt h3 {
      margin-bottom: 12px;
      font-size: clamp(30px, 2.75vw, 40px);
      line-height: 1.05;
    }

    #features .uc-copy {
      max-width: 40ch;
      line-height: 1.55;
    }

    #features .uc-leg {
      margin-top: 20px;
      gap: 9px;
    }

    #features .uc-leg li {
      line-height: 1.4;
    }

    #features .uc-ctrl {
      margin-top: 22px;
      padding-top: 14px;
    }

    #features .uc-ctrl button {
      width: 42px;
      height: 42px;
    }
  }

  /* Op lage laptops nog iets compacter, zonder de inhoud te verbergen. */
  @media (min-width: 1051px) and (max-height: 800px) {
    #features.uc-section {
      padding-top: 42px;
      padding-bottom: 46px;
    }

    #features .uc-head {
      margin-bottom: 22px;
    }

    #features .uc-head h2 {
      font-size: clamp(38px, 3.7vw, 50px);
    }

    #features .uc-side__item {
      min-height: 56px;
      padding-top: 9px;
      padding-bottom: 8px;
    }

    #features .uc-car {
      row-gap: 22px;
    }

    #features .uc-shotwrap {
      height: 350px;
    }

    #features .uc-shot img {
      max-height: 304px;
    }

    #features .uc-leg {
      margin-top: 16px;
    }

    #features .uc-ctrl {
      margin-top: 18px;
      padding-top: 12px;
    }
  }


  /* ---------- functies v74 ----------
     Gebalanceerd voor standaard desktops: groter dan v73, maar de volledige
     feature-compositie blijft bedoeld om als één geheel in beeld te passen. */

  @media (min-width: 1051px) {
    #features.uc-section {
      padding-top: 52px;
      padding-bottom: 58px;
    }

    #features .uc-wrap {
      max-width: 1320px;
    }

    #features .uc-head {
      margin-bottom: 30px;
    }

    #features .uc-head h2 {
      max-width: 23ch;
      font-size: clamp(44px, 4.2vw, 58px);
      line-height: 1.04;
    }

    #features .uc-eyebrow {
      margin-bottom: 11px;
    }

    #features .uc-car {
      grid-template-columns: minmax(0, 1.48fr) minmax(340px, .78fr);
      column-gap: clamp(48px, 5vw, 76px);
      row-gap: 26px;
    }

    #features .uc-side__item {
      min-height: 66px;
      padding: 13px 20px 11px;
    }

    #features .uc-side__t {
      font-size: 17px;
    }

    #features .uc-side__s {
      margin-top: 4px;
      font-size: 12.5px;
    }

    #features .uc-main::before {
      inset: 9px -9px -9px 9px;
    }

    #features .uc-main::after {
      inset: 18px -18px -18px 18px;
    }

    /* Groeit mee met de schermhoogte, maar wordt nooit weer zo groot als v71. */
    #features .uc-shotwrap {
      min-height: 0;
      height: clamp(400px, 50vh, 470px);
      padding: 18px 18px 13px;
      gap: 9px;
    }

    #features .uc-shot {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
    }

    #features .uc-shot img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: calc(clamp(400px, 50vh, 470px) - 50px);
      object-fit: contain;
    }

    #features .uc-detail {
      padding: 8px 0 0;
    }

    #features .uc-txt h3 {
      margin-bottom: 16px;
      font-size: clamp(32px, 3vw, 44px);
      line-height: 1.06;
    }

    #features .uc-copy {
      max-width: 40ch;
      line-height: 1.58;
    }

    #features .uc-leg {
      margin-top: 22px;
      gap: 10px;
    }

    #features .uc-ctrl {
      margin-top: 24px;
      padding-top: 15px;
    }

    #features .uc-ctrl button {
      width: 44px;
      height: 44px;
    }
  }

  /* Alleen op echt lage desktopvensters iets terugschalen. */
  @media (min-width: 1051px) and (max-height: 740px) {
    #features.uc-section {
      padding-top: 38px;
      padding-bottom: 42px;
    }

    #features .uc-head {
      margin-bottom: 22px;
    }

    #features .uc-head h2 {
      font-size: clamp(40px, 3.8vw, 52px);
    }

    #features .uc-side__item {
      min-height: 60px;
      padding-top: 10px;
      padding-bottom: 9px;
    }

    #features .uc-shotwrap {
      height: 390px;
    }

    #features .uc-shot img {
      max-height: 340px;
    }

    #features .uc-leg {
      margin-top: 18px;
    }

    #features .uc-ctrl {
      margin-top: 18px;
      padding-top: 12px;
    }
  }


  /* Veiligheid: de wiggen lopen op desktop verder door naar beneden,
     zodat hetzelfde achtergrondmotief ook achter de ROI-calculator zichtbaar blijft. */
  @media (min-width: 901px) {
    #veilig .shapes--wedges {
      top: 64%;
      height: 230%;
    }
  }


  /* De bovenrand blijft ongeveer op dezelfde plek als in v75,
     maar de wiggen lopen nu door tot voorbij de ROI-calculator. */
  @media (min-width: 901px) {
    #veilig .shapes--wedges {
      top: 100%;
      height: 300%;
    }
  }


  /* ROI v81 — meer visueel gewicht zonder de berekening te veranderen. */
  #roi .roi-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #roi .roi-title {
    margin-bottom: 28px;
  }

  #roi .roi-wrap {
    max-width: 1080px;
  }

  #roi .roi {
    grid-template-columns: 1fr;
  }

  #roi .roi__inputs {
    padding: clamp(2.35rem, 4.5vw, 3.6rem);
  }

  #roi .roi__field + .roi__field {
    margin-top: 2rem;
  }

  #roi .roi__label {
    margin-bottom: .75rem;
    font-size: 17px;
  }

  #roi .roi__slider {
    height: 12px;
  }

  #roi .roi__slider::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
  }

  #roi .roi__slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
  }

  #roi .roi__out {
    padding: clamp(2.7rem, 4.8vw, 3.8rem);
  }

  #roi .roi__cap {
    margin-bottom: .7rem;
    font-size: 1rem;
  }

  #roi .roi__hours {
    font-size: clamp(4rem, 8vw, 5.6rem);
  }

  #roi .roi__unit {
    font-size: 1.05rem;
  }

  @media (min-width: 820px) {
    #roi .roi {
      grid-template-columns: 1.2fr .8fr;
      min-height: 390px;
    }
  }

  @media (max-width: 819px) {
    #roi .roi-wrap {
      max-width: 680px;
    }
  }


  /* TIJDELIJKE ontwikkelherinnering — verwijderen zodra handschrift-FAQ klaar is. */
  #faq .dev-reminder--handschrift {
    margin: 0 0 64px;
    padding: 28px 32px;
    border: 4px dashed #111111;
    background: #FFE45C;
    color: #111111;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 10px 10px 0 #111111;
  }

  #faq .dev-reminder--handschrift strong {
    display: block;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.1;
    letter-spacing: .01em;
  }

  #faq .dev-reminder--handschrift p {
    margin: 18px 0 8px;
    font-size: 17px;
    font-weight: 700;
  }

  #faq .dev-reminder--handschrift ul {
    margin: 0;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.55;
  }

  #faq .dev-reminder--handschrift li + li {
    margin-top: 6px;
  }

  @media (max-width: 600px) {
    #faq .dev-reminder--handschrift {
      margin-bottom: 44px;
      padding: 22px 20px;
      box-shadow: 6px 6px 0 #111111;
    }
  }


  /*
    Verfijnde Upgrade-textuur:
    - donker: voelbaar, niet zichtbaar als effect;
    - licht/Mist: iets tastbaarder zodat de hele site één materiaalgevoel houdt;
    - geen lijnen, raster of repetitief grafisch patroon.
  */

  body.texture-alt-v87 {
    background-color: var(--page-bg);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='.18'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400' viewBox='0 0 1400 1400'%3E%3Cfilter id='cloud'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .011' numOctaves='3' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23cloud)' opacity='.14'/%3E%3C/svg%3E");
    background-repeat: repeat, repeat;
    background-size: 300px 300px, 1400px 1400px;
    background-position: 0 0, 173px 119px;
    background-attachment: fixed, fixed;
    background-blend-mode: soft-light, soft-light;
  }

  /*
    De basislaag is bewust zacht. De lichte hoofdstukken krijgen een tweede,
    bijna onzichtbare laag zodat het materiaal ook daar voelbaar blijft.
  */
  body.texture-alt-v87 #benefits,
  body.texture-alt-v87 #bereik,
  body.texture-alt-v87 #features,
  body.texture-alt-v87 #veilig,
  body.texture-alt-v87 #roi,
  body.texture-alt-v87 #faq,
  body.texture-alt-v87 #slot {
    position: relative;
    isolation: isolate;
    background-color: transparent !important;
  }

  body.texture-alt-v87 #benefits::after,
  body.texture-alt-v87 #bereik::after,
  body.texture-alt-v87 #features::after,
  body.texture-alt-v87 #veilig::after,
  body.texture-alt-v87 #roi::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='.18'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400' viewBox='0 0 1400 1400'%3E%3Cfilter id='cloud'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .011' numOctaves='3' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23cloud)' opacity='.14'/%3E%3C/svg%3E");
    background-repeat: repeat, repeat;
    background-size: 300px 300px, 1400px 1400px;
    background-position: 61px 37px, 311px 173px;
    mix-blend-mode: multiply;
    opacity: .055;
  }

  /*
    Mist Blue mag een fractie meer textuur dragen dan Soft White:
    dit is de opvallendste lichte kleurbaan van de homepage.
  */
  body.texture-alt-v87 #features::after {
    opacity: .075;
  }

  /*
    FAQ en slot staan op Deep Blue: daar juist géén extra overlay.
    De globale textuur blijft aanwezig, maar ongeveer half zo dominant
    als in v87 doordat de noise zelf en de basislaag zachter zijn gemaakt.
  */

  /* Footer hoort bij hetzelfde Deep Blue materiaal als FAQ en slot:
     geen eigen vlak en geen extra korrellaag, maar dezelfde doorlopende body-textuur. */
  body.texture-alt-v87 .site-footer {
    position: relative;
    isolation: isolate;
    background: transparent;
  }

  body.texture-alt-v87 .uc-shotwrap,
  body.texture-alt-v87 .roi,
  body.texture-alt-v87 .trust-card,
  body.texture-alt-v87 .faq-item {
    background-clip: padding-box;
  }

  @media (max-width: 700px) {
    body.texture-alt-v87 {
      background-size: 240px 240px, 1000px 1000px;
      background-attachment: scroll, scroll;
    }

    body.texture-alt-v87 #benefits::after,
    body.texture-alt-v87 #bereik::after,
    body.texture-alt-v87 #features::after,
    body.texture-alt-v87 #veilig::after,
    body.texture-alt-v87 #roi::after {
      background-size: 240px 240px, 1000px 1000px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.texture-alt-v87 {
      background-attachment: scroll, scroll;
    }
  }


  /*
    CTA-interactie v90
    Rusttoestand blijft volledig vlak. Alleen bij echte interactie verschijnt
    één functionele 'laag' — als verwijzing naar de gestapelde vlakken/papieren
    uit de Upgrade-vormtaal. Geen permanente decoratie.
  */

  .cta-button {
    isolation: isolate;
    overflow: visible;
  }

  /* Alleen primaire CTA's krijgen de laag; de secundaire ghostknop blijft rustig. */
  .cta-button:not(.cta-button--ghost)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(
      --btn-echo,
      color-mix(in srgb, var(--btn-bg) 72%, var(--upgrade-sky) 28%)
    );
    opacity: 0;
    transform: translate(0, 0);
    transition:
      opacity 170ms cubic-bezier(0, 0, .2, 1),
      transform 170ms cubic-bezier(0, 0, .2, 1);
  }

  .cta-button:not(.cta-button--ghost) .btn__face {
    transform: translate(0, 0);
    outline-color: transparent;
    transition:
      background-color 150ms cubic-bezier(0, 0, .2, 1),
      transform 170ms cubic-bezier(0, 0, .2, 1);
  }

  /* De oude hover-ring verdwijnt; de ene offset-laag neemt die rol over. */
  @media (hover: hover) and (pointer: fine) {
    .cta-button:not(.cta-button--ghost):hover {
      transform: none;
    }

    .cta-button:not(.cta-button--ghost):hover::after {
      opacity: .78;
      transform: translate(3px, 3px);
    }

    .cta-button:not(.cta-button--ghost):hover .btn__face {
      outline-color: transparent;
      transform: translate(-1px, -1px);
    }
  }

  /* Toetsenbordfocus krijgt dezelfde visuele laag plus de bestaande focusring. */
  .cta-button:not(.cta-button--ghost):focus-visible::after {
    opacity: .78;
    transform: translate(3px, 3px);
  }

  .cta-button:not(.cta-button--ghost):focus-visible .btn__face {
    transform: translate(-1px, -1px);
  }

  /* Bij indrukken beweegt de bovenste knop naar de laag toe. */
  .cta-button:not(.cta-button--ghost):active {
    transform: none;
  }

  .cta-button:not(.cta-button--ghost):active::after {
    opacity: .64;
    transform: translate(1px, 1px);
    transition-duration: 90ms;
  }

  .cta-button:not(.cta-button--ghost):active .btn__face {
    background: var(--btn-bg);
    transform: translate(1px, 1px);
    transition-duration: 90ms;
  }

  .cta-button[aria-disabled="true"]::after,
  .cta-button:disabled::after {
    opacity: 0;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .cta-button:not(.cta-button--ghost)::after,
    .cta-button:not(.cta-button--ghost) .btn__face {
      transition: none;
    }
  }


  /* v92: zes echte productschermen. De carrousel wisselt alleen op input van de gebruiker. */
  #features .uc-side__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #features .uc-side__item {
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  #features .uc-side__t {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  #features .uc-side__s {
    font-size: 11.5px;
    line-height: 1.25;
  }

  #features .uc-shotwrap {
    overflow: visible;
  }

  #features .uc-shot {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--upgrade-white);
    outline: 1px solid var(--page-line);
  }

  #features .uc-shot--static {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #features .uc-shot--static img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  #features .uc-shot--scroll img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    transform: translateY(0);
    will-change: transform;
    animation-name: uc-screenshot-scroll;
    animation-duration: var(--uc-scroll-duration, 18s);
    animation-timing-function: cubic-bezier(.42,0,.35,1);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused;
  }

  #features .uc-car.is-in-view .uc-shotwrap.is-active .uc-shot--scroll:not(.is-paused) img {
    animation-play-state: running;
  }

  @keyframes uc-screenshot-scroll {
    0%, 10% { transform: translateY(0); }
    90%, 100% { transform: translateY(calc(var(--uc-scroll-distance, 0px) * -1)); }
  }

  #features .uc-shotmeta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  #features .uc-shotmeta .uc-shotcap {
    text-align: left;
  }

  #features .uc-motion-toggle {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid var(--page-muted);
    background: transparent;
    color: var(--page-fg);
    font: 500 10px/1 'DM Sans', sans-serif;
    letter-spacing: .11em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 150ms cubic-bezier(0,0,.2,1), transform 150ms cubic-bezier(0,0,.2,1);
  }

  #features .uc-motion-toggle:hover {
    border-color: var(--page-fg);
    transform: translateY(-1px);
  }

  #features .uc-motion-toggle:active { transform: none; }
  #features .uc-motion-toggle:focus-visible { outline: 2px solid var(--upgrade-deep); outline-offset: 2px; }

  /* De tekstkolom blijft bewust eenvoudig; de copy wordt in een aparte ronde aangescherpt. */
  #features .uc-txt h3 {
    max-width: 12ch;
  }

  #features .uc-copy {
    max-width: 43ch;
  }

  @media (max-width: 1180px) {
    #features .uc-side__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid color-mix(in srgb, var(--upgrade-deep) 18%, transparent);
    }
    #features .uc-side__item:nth-child(4) {
      border-left: 0;
    }
  }

  @media (max-width: 700px) {
    #features .uc-side__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #features .uc-side__item:nth-child(3),
    #features .uc-side__item:nth-child(5) {
      border-left: 0;
    }
    #features .uc-side__item:nth-child(4) {
      border-left: 1px solid color-mix(in srgb, var(--upgrade-deep) 16%, transparent);
    }
    #features .uc-side__t { font-size: 13px; }
    #features .uc-shotmeta { align-items: flex-start; }
    #features .uc-motion-toggle { min-height: 34px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #features .uc-shot--scroll img {
      animation: none !important;
      transform: translateY(0) !important;
      will-change: auto;
    }
    #features .uc-motion-toggle { display: none; }
  }


  /* v96 — tekst blijft naast het screenshot op normale laptopbreedtes.
     De sectie stapelt pas op tablet/smaller, zodat scherm en uitleg samen één rij vormen.
     v95 — compactere screenshotkolom zodat de uitleg ruimer naast het beeld past.
     Gebouwd op het v94-herstel; overige featuregedrag blijft ongewijzigd.
     v94 — herstel na v93. De beeldverhouding van v92 blijft leidend,
     maar de selectorbalk is weg en navigatie staat onder het scherm. */
  #features.uc-section {
    padding-top: 74px;
    padding-bottom: 86px;
    overflow-x: clip;
  }

  #features .uc-wrap {
    width: min(100%, 1460px);
    max-width: 1460px;
    margin: 0 auto;
  }

  #features .uc-head {
    margin: 0 auto 38px;
    text-align: center;
  }

  #features .uc-head h2 {
    max-width: 22ch;
    margin: 0 auto;
    font-size: clamp(44px, 4.8vw, 64px);
    line-height: 1.04;
  }

  #features .uc-eyebrow {
    margin-bottom: 12px;
    color: var(--upgrade-deep);
  }

  #features .uc-car {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(30px, 3vw, 44px);
    min-width: 0;
  }

  #features .uc-visual {
    flex: 1 1 65%;
    width: auto;
    min-width: 0;
  }

  #features .uc-detail {
    flex: 0 1 35%;
    width: auto;
    min-width: 300px;
    align-self: center;
    padding: 0;
  }

  #features .uc-visual,
  #features .uc-main,
  #features .uc-detail,
  #features .uc-txts,
  #features .uc-shotwrap,
  #features .uc-shot {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #features .uc-main {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
  }

  #features .uc-main::before,
  #features .uc-main::after {
    content: '';
    position: absolute;
    pointer-events: none;
  }

  #features .uc-main::before {
    inset: 8px -8px -8px 8px;
    z-index: -1;
    background: color-mix(in srgb, var(--upgrade-sky) 34%, transparent);
  }

  #features .uc-main::after {
    inset: 16px -16px -16px 16px;
    z-index: -2;
    background: color-mix(in srgb, var(--upgrade-deep) 10%, transparent);
  }

  #features .uc-shotwrap {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    aspect-ratio: 2.08 / 1;
    height: auto;
    padding: 3px;
    background: var(--upgrade-deep);
    border: 1px solid var(--upgrade-deep);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 180ms cubic-bezier(0,0,.2,1), visibility 0s linear 180ms;
  }

  #features .uc-shotwrap.is-active {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms cubic-bezier(0,0,.2,1), visibility 0s;
  }

  #features .uc-shot {
    width: 100%;
    height: 100%;
    background: var(--upgrade-white);
    border: 1px solid var(--upgrade-mist);
    overflow: hidden;
  }

  /* Handschrift en nakijkinstructies gedragen zich als een gewone webpagina:
     de bezoeker scrollt zelf met muis, trackpad, scrollbar of toetsenbord. */
  #features .uc-shot--manual {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--upgrade-deep) var(--upgrade-white);
  }

  #features .uc-shot--manual::-webkit-scrollbar { width: 12px; }
  #features .uc-shot--manual::-webkit-scrollbar-track {
    background: var(--upgrade-white);
    border-left: 1px solid var(--upgrade-mist);
  }
  #features .uc-shot--manual::-webkit-scrollbar-thumb {
    background: var(--upgrade-deep);
    border: 3px solid color-mix(in srgb, var(--upgrade-mist) 68%, var(--upgrade-white));
  }
  #features .uc-shot--manual:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
  }
  #features .uc-shot--manual img {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    transform: none;
    animation: none;
    will-change: auto;
  }

  #features .uc-shotwrap--static,
  #features .uc-shotwrap--manual {
    aspect-ratio: 2.08 / 1;
    height: auto;
  }

  #features .uc-shot--static {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--upgrade-mist);
  }

  #features .uc-shot--static img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }

  #features .uc-screen-nav {
    display: grid;
    grid-template-columns: 58px auto 58px;
    align-items: center;
    justify-content: start;
    gap: 16px;
    margin-top: 32px;
  }

  #features .uc-screen-nav button {
    width: 58px;
    height: 58px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--upgrade-deep);
    border-radius: 0;
    background: transparent;
    color: var(--upgrade-deep);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0,0,.2,1), color 150ms cubic-bezier(0,0,.2,1), transform 150ms cubic-bezier(0,0,.2,1);
  }
  #features .uc-screen-nav button svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }
  @media (hover:hover) and (pointer:fine) {
    #features .uc-screen-nav button:hover {
      background: var(--upgrade-deep);
      color: var(--upgrade-white);
      transform: translateY(-1px);
    }
  }
  #features .uc-screen-nav button:active { transform: none; }
  #features .uc-screen-nav button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  #features .uc-count {
    min-width: 62px;
    margin: 0;
    text-align: center;
    color: var(--page-muted);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
  }
  #features .uc-count #uc-current {
    color: var(--page-fg);
    font-size: 18px;
    font-weight: 600;
  }

  #features .uc-txts { display: grid; }
  #features .uc-txt {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms cubic-bezier(0,0,.2,1), visibility 0s linear 180ms;
  }
  #features .uc-txt.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms cubic-bezier(0,0,.2,1), visibility 0s;
  }
  #features .uc-txt h3 {
    max-width: 15ch;
    margin: 0 0 20px;
    font-size: clamp(33px, 2.8vw, 44px);
    line-height: 1.05;
  }
  #features .uc-copy {
    max-width: 44ch;
    margin: 0;
    color: var(--page-muted);
    font-size: 17px;
    line-height: 1.65;
  }

  @media (min-width: 901px) and (max-width: 1120px) {
    #features .uc-car {
      gap: 28px;
    }
    #features .uc-visual {
      flex-basis: 61%;
    }
    #features .uc-detail {
      flex-basis: 39%;
      min-width: 280px;
    }
    #features .uc-txt h3 {
      max-width: 16ch;
      font-size: clamp(30px, 3.3vw, 39px);
    }
    #features .uc-copy {
      max-width: 40ch;
      font-size: 16px;
    }
  }

  @media (max-width: 900px) {
    #features .uc-car {
      flex-direction: column;
      gap: 40px;
    }
    #features .uc-visual {
      flex: none;
      width: min(100%, 980px);
      align-self: center;
    }
    #features .uc-detail {
      flex: none;
      width: min(100%, 760px);
      min-width: 0;
      align-self: center;
    }
    #features .uc-txt h3 { max-width: 18ch; }
    #features .uc-copy { max-width: 56ch; }
  }

  @media (max-width: 720px) {
    #features.uc-section {
      padding-top: 62px;
      padding-bottom: 70px;
    }
    #features .uc-head { margin-bottom: 30px; }
    #features .uc-head h2 { font-size: clamp(38px, 10vw, 50px); }
    #features .uc-main::before { inset: 6px -6px -6px 6px; }
    #features .uc-main::after { inset: 12px -12px -12px 12px; }
    #features .uc-shotwrap {
      padding: 9px;
    }
    #features .uc-screen-nav {
      grid-template-columns: 50px auto 50px;
      gap: 12px;
      margin-top: 22px;
    }
    #features .uc-screen-nav button { width: 50px; height: 50px; }
    #features .uc-screen-nav button svg { width: 24px; height: 24px; }
    #features .uc-txt h3 { font-size: clamp(31px, 8.5vw, 40px); }
  }

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

  @media (prefers-reduced-motion: reduce) {
    #features .uc-shotwrap,
    #features .uc-txt,
    #features .uc-screen-nav button {
      transition: none;
    }
  }


#features .uc-shotwrap--handschrift {aspect-ratio:1897 / 911;}
#features .uc-product-shell {display:grid;grid-template-columns:91fr 1806fr;grid-template-rows:73fr 740fr 98fr;width:100%;height:100%;min-height:0;overflow:hidden;line-height:0;}
#features .uc-product-shell > img {display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;}
#features .uc-product-side {grid-column:1;grid-row:1/4;}
#features .uc-product-top {grid-column:2;grid-row:1;}
#features .uc-product-bottom {grid-column:2;grid-row:3;}
#features .uc-product-shell .uc-product-workspace {grid-column:2;grid-row:2;min-height:0;height:100%;width:100%;border:0;outline:0;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--upgrade-deep) var(--upgrade-white);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
#features .uc-product-workspace::-webkit-scrollbar {display:block;width:10px;}
#features .uc-product-workspace::-webkit-scrollbar-track {background:var(--upgrade-white);}
#features .uc-product-workspace::-webkit-scrollbar-thumb {background:var(--upgrade-deep);border:2px solid var(--upgrade-white);}
#features .uc-product-workspace:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;}
#features .uc-product-workspace img {display:block;width:100%;height:auto;max-height:none;max-width:none;}

#features .uc-shotwrap--instructies {aspect-ratio:1900 / 911;}#features .uc-shotwrap--instructies .uc-product-shell {grid-template-columns:91fr 1809fr;}
#features .uc-shotwrap--gedrag {aspect-ratio:1900/910;}#features .uc-shotwrap--gedrag .uc-product-shell {grid-template-columns:91fr 1809fr;grid-template-rows:73fr 837fr;}#features .uc-shotwrap--gedrag .uc-product-side {grid-row:1/3;}
#features .uc-shotwrap--leerling {aspect-ratio:1897/911;}#features .uc-shotwrap--leerling .uc-product-shell {grid-template-columns:91fr 1806fr;grid-template-rows:73fr 736fr 102fr;}
#features .uc-shotwrap--klas {aspect-ratio:1900/911;}#features .uc-shotwrap--klas .uc-product-shell {grid-template-columns:91fr 1809fr;grid-template-rows:73fr 736fr 102fr;}

.brand-statement {
  padding: clamp(5rem, 11vw, 9rem) 0;
}
.brand-statement__text {
  max-width: 1040px;
  margin: 0 auto;
  font-family: 'Newsreader', serif;
  font-size: clamp(2.9rem, 6.2vw, 6.7rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
  color: var(--page-fg);
}
@media (max-width: 640px) {
  .brand-statement {
    padding: 5rem 0;
  }
}


@media (min-width: 761px) {
  section:has(.hero) .hero {
    padding-top: 76px;
    padding-bottom: 132px;
  }
  .hero-content h1 { margin-bottom: 22px; }
  .hero-content p { margin-bottom: 26px; }
}

#features .uc-leg {
  list-style: none;
  max-width: 44ch;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
#features .uc-leg li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--page-muted);
  font-size: 14px;
  line-height: 1.45;
}
#features .uc-leg i {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--upgrade-deep);
  color: var(--upgrade-white);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
#features .uc-leg li span { display: block; }

.brand-statement {
  padding: clamp(5.5rem, 10vw, 8.5rem) 0;
}
.brand-statement__text {
  max-width: 980px;
  font-size: clamp(2.9rem, 5.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.brand-statement__text span { display:block; }
.brand-statement__text span + span { margin-top:.08em; }

#roi .roi-modern {
  max-width: 1080px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  border: 1px solid var(--upgrade-deep);
  background: var(--upgrade-white);
  color: var(--upgrade-deep);
}
#roi .roi-modern__inputs { padding: clamp(2rem, 4vw, 3.25rem); }
#roi .roi-modern__field + .roi-modern__field { margin-top: 2rem; }
#roi .roi-modern__line {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  margin-bottom:.8rem;
}
#roi .roi-modern__line label { font-size:16px; font-weight:600; }
#roi .roi-modern__value {
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
#roi .roi-modern__value output {
  font-size:20px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
#roi .roi-modern__value small { font-size:12px; color:var(--page-muted); }

#roi .roi-modern .roi__slider {
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:8px;
  border-radius:0;
  background:var(--upgrade-mist);
  cursor:pointer;
}
#roi .roi-modern .roi__slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:17px;
  height:24px;
  border:2px solid var(--upgrade-deep);
  border-radius:0;
  background:var(--upgrade-white);
}
#roi .roi-modern .roi__slider::-moz-range-thumb {
  width:17px;
  height:24px;
  border:2px solid var(--upgrade-deep);
  border-radius:0;
  background:var(--upgrade-white);
}
#roi .roi-modern .roi__slider:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}

#roi .roi-modern__result {
  min-height:330px;
  padding:clamp(2.2rem, 4vw, 3.2rem);
  border-left:1px solid var(--upgrade-deep);
  background:var(--upgrade-mist);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#roi .roi-modern__cap {
  margin:0 0 1rem;
  color:var(--upgrade-deep);
  font-size:15px;
  font-weight:600;
}
#roi .roi-modern__number {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin:0 0 1.8rem;
}
#roi .roi-modern__number output {
  font-family:'Newsreader',serif;
  font-size:clamp(4.6rem,8vw,6.3rem);
  font-weight:500;
  line-height:.9;
  letter-spacing:-.035em;
  color:var(--upgrade-deep);
  font-variant-numeric:tabular-nums;
}
#roi .roi-modern__number span {
  font-size:18px;
  font-weight:600;
  color:var(--upgrade-deep);
}
#roi .roi-modern__cta { margin-top:.15rem; }
#roi .roi-modern__cta .btn__face { min-width:190px; text-align:center; }

@media (max-width:800px) {
  #roi .roi-modern { grid-template-columns:1fr; }
  #roi .roi-modern__result {
    min-height:285px;
    border-left:0;
    border-top:1px solid var(--upgrade-deep);
  }
}
@media (max-width:560px) {
  #roi .roi-modern__line { align-items:flex-start; }
  #roi .roi-modern__value {
    flex-direction:column;
    align-items:flex-end;
    gap:0;
  }
  .brand-statement__text { font-size:clamp(2.5rem,11vw,3.4rem); }
}

#features .uc-shotwrap--horizontaal {aspect-ratio:1897/911;}#features .uc-shotwrap--horizontaal .uc-product-shell {grid-template-columns:91fr 1806fr;grid-template-rows:73fr 736fr 102fr;}

  #features .uc-callout-canvas {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
  }

  #features .uc-callout-canvas > .uc-product-content {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  #features .uc-callout-canvas .uc-pin {
    z-index: 2;
    pointer-events: none;
  }

  #features .uc-leg {
    max-width: 44ch;
  }

  #features .uc-leg li span {
    display: block;
  }


/* v115 — koppeling tussen aanduidblokjes in screenshot en toelichting.
   Posities blijven bewust ongewijzigd; die worden apart beoordeeld. */
#features .uc-callout-canvas .uc-pin {
  pointer-events: auto;
}

#features .uc-leg i[role="button"] {
  cursor: pointer;
  user-select: none;
}

#features .uc-leg i[role="button"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}


/* v129: Blokje 3 is gekoppeld aan de VASTE onderbalk van de productmockup,
   niet aan de inhoud van de .uc-product-workspace die scrollt. */
#features .uc-shotwrap--leerling .uc-product-bottom-wrap {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 3;
  line-height: 0;
}
#features .uc-shotwrap--leerling .uc-product-bottom-wrap > .uc-product-bottom {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
}
#features .uc-shotwrap--leerling .uc-product-bottom-wrap > .uc-product-confirm-pin {
  position: absolute;
  left: 1.20%;
  top: 40.2%;
  z-index: 4;
  pointer-events: auto;
}


/* v141 — lange productschermen beginnen altijd aan de bovenkant.
   Dit herstelt de v112-oplossing óók wanneer de afbeelding in een callout-canvas zit. */
#features .uc-product-shell .uc-product-workspace {
  display: block !important;
  align-items: normal !important;
  justify-content: normal !important;
}
#features .uc-product-shell .uc-product-workspace > .uc-callout-canvas,
#features .uc-product-shell .uc-product-workspace > img {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  flex: none !important;
  transform: none !important;
}
#features .uc-product-shell .uc-product-workspace > .uc-callout-canvas > .uc-product-content {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  object-position: top left !important;
  transform: none !important;
}


  /* Upgrade layout framework
     Eén ritme voor gutters, containers, secties, header en footer.
     Pagina-inhoud blijft bewust pagina-specifiek. */
  :root {
    --layout-max: 1200px;
    --layout-reading: 760px;
    --layout-gutter: 60px;

    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 80px;
    --space-9: 96px;
    --space-10: 104px;
  }

  html, body { overflow-x: clip; }

  .container-max {
    width: 100%;
    max-width: var(--layout-max) !important;
    margin-inline: auto;
  }

  /* De navigatie gebruikt op elke marketing- en juridische pagina dezelfde maatvoering. */
  header {
    padding: 20px var(--layout-gutter) !important;
    font-size: 16px;
    line-height: 1.6;
  }

  header nav {
    gap: 32px;
    align-items: center;
  }

  header .logo-mark { width: 132px; }

  @media (min-width: 761px) {
    header .nav-cta {
      display: inline-flex !important;
      align-items: stretch;
      min-height: 54px;
      line-height: 1;
    }

    header .nav-cta .btn__face {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 20px 30px !important;
      font-size: 14px !important;
      line-height: 1 !important;
      letter-spacing: .13em !important;
    }
  }

  /* De footer volgt overal exact dezelfde geometrie als de homepage. */
  .site-footer {
    padding: 64px var(--layout-gutter) 32px !important;
    font-size: 16px;
    line-height: 1.6;
  }

  .site-footer__grid {
    width: 100%;
    max-width: var(--layout-max) !important;
    margin-inline: auto;
    grid-template-columns: 1.4fr repeat(3, 1fr) !important;
    gap: 40px !important;
  }

  .site-footer .logo-mark { width: 124px !important; }

  .site-footer h3 {
    margin-bottom: 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .site-footer li { margin-bottom: 10px !important; }
  .site-footer a,
  .site-footer .cookie-prefs { font-size: 15px !important; }

  .site-footer__base {
    width: 100%;
    max-width: var(--layout-max) !important;
    margin: 48px auto 0 !important;
    padding-top: 24px !important;
    gap: 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  @media (max-width: 900px) {
    :root { --layout-gutter: 24px; }

    .site-footer {
      padding: 48px 24px 28px !important;
    }

    .site-footer__grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 32px !important;
    }
  }

  @media (max-width: 760px) {
    header {
      min-height: 84px;
      padding: 20px 24px !important;
    }
  }

  @media (max-width: 560px) {
    :root { --layout-gutter: 20px; }

    .site-footer__grid {
      grid-template-columns: 1fr !important;
    }
  }


  /* Homepage: behoud de hero, maar trek de overige secties naar één ritme. */
  .section { padding-inline: var(--layout-gutter) !important; }

  #benefits { padding-top: 104px !important; padding-bottom: 104px !important; }
  #bereik { padding-top: 72px !important; padding-bottom: 72px !important; }
  #features { padding-top: 88px !important; padding-bottom: 88px !important; }
  .brand-statement { padding-top: 104px !important; padding-bottom: 104px !important; }
  #veilig, #roi, #faq, #slot {
    padding-top: 104px !important;
    padding-bottom: 104px !important;
  }

  @media (max-width: 768px) {
    #benefits { padding-top: 64px !important; padding-bottom: 64px !important; }
    #bereik { padding-top: 56px !important; padding-bottom: 56px !important; }
    #features { padding-top: 64px !important; padding-bottom: 64px !important; }
    .brand-statement { padding-top: 64px !important; padding-bottom: 64px !important; }
    #veilig, #roi, #faq, #slot {
      padding-top: 52px !important;
      padding-bottom: 52px !important;
    }
  }

  @media (max-width: 420px) {
    .section { padding-inline: 18px !important; }
  }


  @media (min-width: 901px) {
    #features .uc-car { align-items: flex-start; }
    #features .uc-detail { align-self: flex-start; }
  }


  /* Rustige voorgrond-onthulling:
     merkcurve, maximaal 2 px beweging, één keer per element. */
  .has-reveal .reveal {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    will-change: opacity, transform;
  }

  .has-reveal .reveal.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 1450ms cubic-bezier(0, 0, .2, 1),
      transform 1450ms cubic-bezier(0, 0, .2, 1);
    transition-delay: var(--reveal-delay, 300ms);
  }

  @media (prefers-reduced-motion: reduce) {
    .has-reveal .reveal,
    .has-reveal .reveal.is-in {
      opacity: 1;
      transform: none;
      transition: none;
      will-change: auto;
    }
  }

body.admin-bar > header{top:32px} @media(max-width:782px){body.admin-bar > header{top:46px}}
.upgrade-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}