{"id":9856,"date":"2026-06-30T17:18:53","date_gmt":"2026-06-30T16:18:53","guid":{"rendered":"https:\/\/eenvoudigfactureren.be\/info\/?page_id=9856"},"modified":"2026-07-15T23:54:32","modified_gmt":"2026-07-15T22:54:32","slug":"frontpage-3","status":"publish","type":"page","link":"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/","title":{"rendered":"frontpage-3"},"content":{"rendered":"<link\r\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&#038;family=Spline+Sans+Mono:wght@400;500;600&#038;display=swap\"\r\n    rel=\"stylesheet\"\r\n>\r\n<style>\r\n    :root {\r\n        --deep: #1A4F51;\r\n        --brand: #266D6F;\r\n        --mist: #E8F1F1;\r\n        --paper: #FBFAF7;\r\n        --orange: #FFA701;\r\n        --ink: #15393B;\r\n        --ink-soft: rgba(26, 79, 81, .66);\r\n        --ink-faint: rgba(26, 79, 81, .42);\r\n        --line: rgba(26, 79, 81, .14);\r\n        --card-border: #E2E9E7;\r\n        --red: #C04A33;\r\n        --white: #FFFFFF;\r\n        --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;\r\n        --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;\r\n        --r-card: 16px;\r\n        --r-app: 12px;\r\n        --shadow-card: 0 1px 2px rgba(26, 79, 81, .05), 0 8px 32px rgba(26, 79, 81, .07);\r\n        --shadow-lift: 0 2px 4px rgba(26, 79, 81, .06), 0 20px 56px rgba(26, 79, 81, .13);\r\n        --ease: cubic-bezier(.22, 1, .36, 1);\r\n        --maxw: 1160px;\r\n    }\r\n\r\n    * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box\r\n    }\r\n\r\n    html {\r\n        scroll-behavior: smooth\r\n    }\r\n\r\n    section[id] {\r\n        scroll-margin-top: 41px\r\n    }\r\n\r\n    body {\r\n        font-family: var(--font);\r\n        background: var(--paper);\r\n        color: var(--ink);\r\n        line-height: 1.6;\r\n        -webkit-font-smoothing: antialiased;\r\n        overflow-x: hidden;\r\n    }\r\n\r\n    \/* utility classes for inline-style cleanup *\/\r\n    .chip-label {\r\n        font-family: var(--mono);\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        letter-spacing: .08em;\r\n        text-transform: uppercase;\r\n        color: var(--brand);\r\n        margin-top: 24px\r\n    }\r\n\r\n    .chip-label + .pkg-chips {\r\n        margin-top: 10px\r\n    }\r\n\r\n    .chip-label-gap {\r\n        margin-top: 20px\r\n    }\r\n\r\n    .team-member {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px\r\n    }\r\n\r\n    .team-name {\r\n        font-size: 15px;\r\n        font-weight: 700;\r\n        color: #fff\r\n    }\r\n\r\n    .team-role {\r\n        font-size: 13px;\r\n        color: rgba(255, 255, 255, .6)\r\n    }\r\n\r\n    .team-photo {\r\n        width: 56px;\r\n        height: 56px;\r\n        font-size: 13px\r\n    }\r\n\r\n    .google-badge {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n        margin-bottom: 20px\r\n    }\r\n\r\n    .google-score {\r\n        font-family: var(--mono);\r\n        font-weight: 700;\r\n        font-size: 18px;\r\n        color: #fff\r\n    }\r\n\r\n    .google-stars {\r\n        display: flex;\r\n        gap: 2px\r\n    }\r\n\r\n    .google-label {\r\n        font-size: 12.5px;\r\n        color: rgba(255, 255, 255, .55);\r\n        margin-top: 2px\r\n    }\r\n\r\n    .peek-inner {\r\n        margin-top: 10px\r\n    }\r\n\r\n    \/* dot-grid: 1px dots, 24px raster, conform brandsysteem *\/\r\n    .dotgrid {\r\n        background-image: radial-gradient(circle, rgba(26, 79, 81, .105) 1px, transparent 1.5px);\r\n        background-size: 24px 24px;\r\n    }\r\n\r\n    .dotgrid-soft {\r\n        background-color: #F7F8F7;\r\n        background-image: radial-gradient(circle, rgba(26, 79, 81, .09) 1px, transparent 1.5px);\r\n        background-size: 24px 24px;\r\n    }\r\n\r\n    ::selection {\r\n        background: var(--orange);\r\n        color: var(--deep)\r\n    }\r\n\r\n    h1, h2, h3, h4 {\r\n        font-weight: 700;\r\n        line-height: 1.12;\r\n        letter-spacing: -.02em;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .eyebrow {\r\n        font-family: var(--mono);\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        letter-spacing: .14em;\r\n        text-transform: uppercase;\r\n        color: var(--brand);\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n\r\n    .eyebrow::before {\r\n        content: \"\";\r\n        width: 24px;\r\n        height: 2px;\r\n        background: var(--orange);\r\n        border-radius: 2px\r\n    }\r\n\r\n    .wrap {\r\n        max-width: var(--maxw);\r\n        margin: 0 auto;\r\n        padding: 0 32px\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n        .wrap {\r\n            padding: 0 20px\r\n        }\r\n\r\n        .eyebrow {\r\n            flex-direction: column\r\n        }\r\n    }\r\n\r\n    \/* ---------- pill buttons ---------- *\/\r\n    .btn {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        font-family: var(--font);\r\n        font-weight: 600;\r\n        font-size: 16px;\r\n        padding: 14px 28px;\r\n        border-radius: 999px;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n        border: none;\r\n        transition: box-shadow .25s var(--ease), color .25s var(--ease), background-position .42s var(--ease);\r\n        position: relative;\r\n        overflow: hidden;\r\n        isolation: isolate;\r\n        text-transform: none !important;\r\n    }\r\n\r\n    .btn::before {\r\n        content: none\r\n    }\r\n\r\n    button:focus {\r\n        outline: none !important;\r\n    }\r\n\r\n    .btn > * {\r\n        position: relative;\r\n        z-index: 1\r\n    }\r\n\r\n    .btn-primary, input[type=\"submit\"] {\r\n        background: linear-gradient(90deg, #FFB42E 0 50%, var(--orange) 50% 100%);\r\n        background-size: 220% 100%;\r\n        background-position: 100% 0;\r\n        color: var(--deep) !important;\r\n        box-shadow: 0 2px 10px rgba(255, 167, 1, .35);\r\n    }\r\n\r\n    .btn-primary:hover, input[type=\"submit\"]:hover {\r\n        background-position: 0 0;\r\n        box-shadow: 0 8px 22px rgba(255, 167, 1, .36);\r\n        color: var(--deep) !important;\r\n    }\r\n\r\n    .btn-ghost {\r\n        background: linear-gradient(90deg, rgba(26, 79, 81, .08) 0 50%, transparent 50% 100%);\r\n        background-size: 220% 100%;\r\n        background-position: 100% 0;\r\n        color: var(--deep);\r\n        border: 1.5px solid transparent;\r\n        box-shadow: inset 0 0 0 1.5px rgba(26, 79, 81, .22);\r\n    }\r\n\r\n    .btn-ghost:hover {\r\n        background-position: 0 0;\r\n        box-shadow: inset 0 0 0 1.5px var(--deep)\r\n    }\r\n\r\n    .btn-light {\r\n        background: linear-gradient(90deg, #FFB42E 0 50%, var(--orange) 50% 100%);\r\n        background-size: 220% 100%;\r\n        background-position: 100% 0;\r\n        color: var(--deep);\r\n        box-shadow: 0 2px 10px rgba(0, 0, 0, .18);\r\n    }\r\n\r\n    .btn-light:hover {\r\n        background-position: 0 0;\r\n        box-shadow: 0 8px 22px rgba(255, 167, 1, .34)\r\n    }\r\n\r\n    .btn .arr {\r\n        transition: transform .25s var(--ease)\r\n    }\r\n\r\n    .btn:hover .arr {\r\n        transform: translateX(3px)\r\n    }\r\n\r\n    \/* ---------- nav ---------- *\/\r\n    .nav {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        z-index: 100;\r\n        background: transparent;\r\n        backdrop-filter: none;\r\n        -webkit-backdrop-filter: none;\r\n        border-bottom: 1px solid transparent;\r\n        transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);\r\n    }\r\n\r\n    .nav.scrolled {\r\n        background: rgba(251, 250, 247, .82);\r\n        backdrop-filter: blur(14px);\r\n        -webkit-backdrop-filter: blur(14px);\r\n        border-bottom-color: var(--line);\r\n    }\r\n\r\n    .nav-inner {\r\n        max-width: var(--maxw);\r\n        margin: 0 auto;\r\n        padding: 0 32px;\r\n        height: 72px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 40px;\r\n        width: 100%;\r\n    }\r\n\r\n    .logo {\r\n        display: grid;\r\n        align-items: center;\r\n        text-decoration: none;\r\n        flex-shrink: 0\r\n    }\r\n\r\n    .logo-img {\r\n        grid-area: 1\/1;\r\n        height: 30px;\r\n        width: 134px;\r\n        border-radius: 0;\r\n        flex-shrink: 0;\r\n        transition: opacity .25s var(--ease)\r\n    }\r\n\r\n    .logo-dark {\r\n        opacity: 0\r\n    }\r\n\r\n    .logo-light {\r\n        opacity: 1\r\n    }\r\n\r\n    .nav.scrolled .logo-dark {\r\n        opacity: 1\r\n    }\r\n\r\n    .nav.scrolled .logo-light {\r\n        opacity: 0\r\n    }\r\n\r\n    .logo-mark {\r\n        width: 34px;\r\n        height: 34px;\r\n        border-radius: 50%;\r\n        background: var(--orange);\r\n        position: relative;\r\n        overflow: hidden;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .logo-mark::after { \/* vossenstaart-knipoog *\/\r\n        content: \"\";\r\n        position: absolute;\r\n        right: -7px;\r\n        bottom: -9px;\r\n        width: 24px;\r\n        height: 24px;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n    }\r\n\r\n    .logo-mark::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: 5px;\r\n        top: -5px;\r\n        width: 10px;\r\n        height: 12px;\r\n        background: var(--orange);\r\n        clip-path: polygon(50% 0, 100% 100%, 0 100%);\r\n        transform: rotate(-18deg);\r\n    }\r\n\r\n    .logo-word {\r\n        font-weight: 800;\r\n        font-size: 17px;\r\n        line-height: 1.05;\r\n        color: var(--deep);\r\n        letter-spacing: -.01em\r\n    }\r\n\r\n    .logo-word span {\r\n        display: block;\r\n        font-weight: 500;\r\n        color: var(--brand);\r\n        font-size: 13px;\r\n        letter-spacing: .01em\r\n    }\r\n\r\n    .nav-links {\r\n        display: flex;\r\n        gap: 28px;\r\n        align-items: center;\r\n        margin-left: 8px\r\n    }\r\n\r\n    .nav-links a {\r\n        font-size: 15px;\r\n        font-weight: 500 !important;\r\n        color: rgba(255, 255, 255, .72) !important;\r\n        text-decoration: none;\r\n        transition: color .2s\r\n    }\r\n\r\n    .nav-links a:hover {\r\n        color: var(--deep) !important\r\n    }\r\n\r\n    .nav:not(.scrolled) .nav-links a:hover {\r\n        color: #fff !important\r\n    }\r\n\r\n    .nav.scrolled .nav-links a {\r\n        color: var(--ink-soft) !important\r\n    }\r\n\r\n    .nav.scrolled .nav-links a:hover {\r\n        color: var(--deep) !important\r\n    }\r\n\r\n    .nav-dd {\r\n        position: relative\r\n    }\r\n\r\n    .nav-dd-menu {\r\n        display: none;\r\n        position: absolute;\r\n        top: 100%;\r\n        left: -12px;\r\n        padding-top: 10px;\r\n        z-index: 10;\r\n    }\r\n\r\n    .nav-dd:hover .nav-dd-menu {\r\n        display: block\r\n    }\r\n\r\n    .nav-dd-menu ul {\r\n        list-style: none;\r\n        background: #fff;\r\n        border: 1px solid var(--line);\r\n        border-radius: 10px;\r\n        box-shadow: var(--shadow-card);\r\n        padding: 8px;\r\n        min-width: 200px;\r\n    }\r\n\r\n    .nav-dd-menu li a {\r\n        display: block;\r\n        padding: 9px 14px;\r\n        border-radius: 7px;\r\n        font-size: 14px;\r\n        font-weight: 500 !important;\r\n        color: var(--ink-soft) !important;\r\n        text-decoration: none;\r\n        transition: background .15s;\r\n    }\r\n\r\n    .nav-dd-menu li a:hover {\r\n        background: var(--mist);\r\n        color: var(--deep) !important\r\n    }\r\n\r\n    .nav:not(.scrolled) .nav-dd-menu li a {\r\n        color: var(--ink-soft) !important\r\n    }\r\n\r\n    .nav:not(.scrolled) .nav-dd-menu li a:hover {\r\n        background: var(--mist);\r\n        color: var(--deep) !important\r\n    }\r\n\r\n    .nav-cta {\r\n        margin-left: auto;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 20px\r\n    }\r\n\r\n    .nav-cta .login {\r\n        font-size: 15px;\r\n        font-weight: 600 !important;\r\n        color: #fff !important;\r\n        text-decoration: none;\r\n        transition: color .2s\r\n    }\r\n\r\n    .nav.scrolled .nav-cta .login {\r\n        color: var(--deep) !important\r\n    }\r\n\r\n    .nav-cta .btn {\r\n        padding: 10px 22px;\r\n        font-size: 15px\r\n    }\r\n\r\n    .nav:not(.scrolled) .nav-cta .btn-ghost {\r\n        color: #fff;\r\n        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34)\r\n    }\r\n\r\n    .nav:not(.scrolled) .nav-cta .btn-ghost {\r\n        background-image: linear-gradient(90deg, rgba(255, 255, 255, .14) 0 50%, transparent 50% 100%)\r\n    }\r\n\r\n    .nav:not(.scrolled) .nav-cta .btn-ghost:hover {\r\n        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .78)\r\n    }\r\n\r\n    @media (max-width: 880px) {\r\n        .nav-links {\r\n            display: none\r\n        }\r\n\r\n        .nav-cta .login {\r\n            display: none\r\n        }\r\n    }\r\n\r\n    \/* ---------- hero ---------- *\/\r\n    .hero {\r\n        position: relative;\r\n        padding: 104px 0 28px;\r\n        text-align: center;\r\n        overflow: hidden;\r\n        background-color: var(--deep);\r\n        background-image: url(\"\/info\/wp-content\/uploads\/2026\/07\/homepage-background.png\"), radial-gradient(ellipse at 50% 8%, rgba(255, 167, 1, .16), transparent 48%);\r\n        background-position: center top;\r\n        background-size: cover;\r\n        display: grid;\r\n        grid-template-rows:1fr auto 1fr;\r\n        align-items: center;\r\n    }\r\n\r\n    .hero.dotgrid {\r\n        background-color: var(--deep)\r\n    }\r\n\r\n    .hero .wrap {\r\n        position: relative;\r\n        grid-row: 2\r\n    }\r\n\r\n    .hero .eyebrow {\r\n        color: rgba(255, 255, 255, .72)\r\n    }\r\n\r\n    .hero h1 {\r\n        color: #fff\r\n    }\r\n\r\n    .hero .sub {\r\n        color: rgba(255, 255, 255, .76)\r\n    }\r\n\r\n    .hero .sub strong {\r\n        color: #fff\r\n    }\r\n\r\n    .hero-proof {\r\n        color: rgba(255, 255, 255, .72)\r\n    }\r\n\r\n    .hero-proof b {\r\n        color: #fff\r\n    }\r\n\r\n    .hero-proof .dot {\r\n        background: var(--orange);\r\n        opacity: .7\r\n    }\r\n\r\n    .hero .btn-ghost {\r\n        color: #fff !important;\r\n        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32);\r\n        background-image: linear-gradient(90deg, rgba(255, 255, 255, .14) 0 50%, transparent 50% 100%)\r\n    }\r\n\r\n    .hero .btn-ghost:hover {\r\n        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .72)\r\n    }\r\n\r\n    .hero h1 {\r\n        font-size: clamp(42px, 6.4vw, 76px);\r\n        font-weight: 800;\r\n        letter-spacing: -.035em;\r\n        line-height: 1.04;\r\n        max-width: 880px;\r\n        margin: 28px auto 0;\r\n    }\r\n\r\n    .hero h1 .hl {\r\n        position: relative;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .hero h1 .hl::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: -1%;\r\n        right: -1%;\r\n        bottom: .06em;\r\n        height: .26em;\r\n        background: var(--orange);\r\n        opacity: .32;\r\n        border-radius: 4px;\r\n        z-index: -1;\r\n        transform: scaleX(0);\r\n        transform-origin: left;\r\n        animation: hlIn 1s var(--ease) .9s forwards;\r\n    }\r\n\r\n    @keyframes hlIn {\r\n        to {\r\n            transform: scaleX(1)\r\n        }\r\n    }\r\n\r\n    .hero .sub {\r\n        font-size: clamp(17px, 2vw, 20px);\r\n        color: rgba(255, 255, 255, .76);\r\n        max-width: 620px;\r\n        margin: 24px auto 0;\r\n        line-height: 1.65;\r\n    }\r\n\r\n    .hero .sub strong {\r\n        color: #fff;\r\n        font-weight: 600\r\n    }\r\n\r\n    .hero-cta {\r\n        display: flex;\r\n        gap: 16px;\r\n        justify-content: center;\r\n        align-items: center;\r\n        margin-top: 36px;\r\n        flex-wrap: wrap\r\n    }\r\n\r\n    .hero-proof {\r\n        margin-top: 44px;\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 28px;\r\n        flex-wrap: wrap;\r\n        font-size: 14px;\r\n        color: rgba(255, 255, 255, .72);\r\n        font-weight: 500;\r\n    }\r\n\r\n    .hero-proof span {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px\r\n    }\r\n\r\n    .hero-proof .dot {\r\n        width: 5px;\r\n        height: 5px;\r\n        border-radius: 50%;\r\n        background: var(--orange);\r\n        opacity: .7;\r\n        align-self: center\r\n    }\r\n\r\n    .hero-proof b {\r\n        color: #fff;\r\n        font-weight: 700\r\n    }\r\n\r\n    .reveal-up {\r\n        opacity: 0;\r\n        transform: translateY(24px);\r\n        animation: revUp .9s var(--ease) forwards\r\n    }\r\n\r\n    .d1 {\r\n        animation-delay: .05s\r\n    }\r\n\r\n    .d2 {\r\n        animation-delay: .18s\r\n    }\r\n\r\n    .d3 {\r\n        animation-delay: .32s\r\n    }\r\n\r\n    .d4 {\r\n        animation-delay: .46s\r\n    }\r\n\r\n    .d5 {\r\n        animation-delay: .6s\r\n    }\r\n\r\n    .d6 {\r\n        animation-delay: .74s\r\n    }\r\n\r\n    @keyframes revUp {\r\n        to {\r\n            opacity: 1;\r\n            transform: none\r\n        }\r\n    }\r\n\r\n    \/* startpunt van de lijn, hangt onder de hero *\/\r\n    .hero-anchor {\r\n        height: 120px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-end;\r\n        padding-top: 2rem;\r\n        position: relative;\r\n        z-index: 1;\r\n        grid-row: 3;\r\n        align-self: end;\r\n        width: 100%;\r\n    }\r\n\r\n    .hero-anchor .start-dot {\r\n        width: 14px;\r\n        height: 14px;\r\n        border-radius: 50%;\r\n        background: var(--orange);\r\n        box-shadow: 0 0 0 6px rgba(255, 167, 1, .2);\r\n        animation: startDotPulse 6.6s ease-out 1s infinite;\r\n    }\r\n\r\n    @keyframes startDotPulse {\r\n        0%, 25%, 70% {\r\n            box-shadow: 0 0 0 6px rgba(255, 167, 1, .2)\r\n        }\r\n        40% {\r\n            box-shadow: 0 0 0 10px rgba(255, 167, 1, .18), 0 0 0 20px rgba(255, 167, 1, .12)\r\n        }\r\n    }\r\n\r\n    .hero-anchor .start-line {\r\n        width: 2px;\r\n        flex: 1;\r\n        background: linear-gradient(to bottom, rgba(255, 255, 255, .08), rgba(255, 255, 255, .35))\r\n    }\r\n\r\n    \/* ============================================================\r\n     DE LIJN\r\n     ============================================================ *\/\r\n    .lijn-head {\r\n        padding: 64px 0 8px;\r\n        text-align: center;\r\n        scroll-margin-top: 73px\r\n    }\r\n\r\n    .lijn-head h2 {\r\n        font-size: clamp(32px, 4.6vw, 52px);\r\n        letter-spacing: -.03em;\r\n        max-width: 760px;\r\n        margin: 20px auto 0\r\n    }\r\n\r\n    .lijn-head .sub {\r\n        font-size: 18px;\r\n        color: var(--ink-soft);\r\n        margin-top: 16px;\r\n        max-width: 560px;\r\n        margin-left: auto;\r\n        margin-right: auto\r\n    }\r\n\r\n    .lijn-head .sub b {\r\n        color: var(--deep)\r\n    }\r\n\r\n    .lijn {\r\n        position: relative;\r\n        padding: 48px 0 0\r\n    }\r\n\r\n    .lijn-track {\r\n        position: relative;\r\n        max-width: var(--maxw);\r\n        margin: 0 auto;\r\n        padding: 24px 32px 0;\r\n        overflow: hidden\r\n    }\r\n\r\n    \/* spoor + voortgang *\/\r\n    .rail {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 50%;\r\n        width: 2px;\r\n        transform: translateX(-50%);\r\n        background: var(--line);\r\n    }\r\n\r\n    .rail-progress {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 0;\r\n        background: linear-gradient(to bottom, var(--brand), var(--deep));\r\n    }\r\n\r\n    .rail-tip {\r\n        position: absolute;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        top: 0;\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n        background: var(--orange);\r\n        box-shadow: 0 0 0 5px rgba(255, 167, 1, .22), 0 0 18px rgba(255, 167, 1, .5);\r\n        transition: opacity .3s;\r\n    }\r\n\r\n    \/* halte-rijen *\/\r\n    .halte {\r\n        position: relative;\r\n        display: grid;\r\n        grid-template-columns:1fr 120px 1fr;\r\n        align-items: center;\r\n        padding: 64px 0;\r\n    }\r\n\r\n    .halte-dot {\r\n        grid-column: 2;\r\n        justify-self: center;\r\n        align-self: center;\r\n        width: 36px;\r\n        height: 36px;\r\n        display: grid;\r\n        place-items: center;\r\n        line-height: 1;\r\n        font-family: var(--mono);\r\n        font-weight: 600;\r\n        font-size: 13px;\r\n        color: var(--ink-faint);\r\n        position: relative;\r\n        z-index: 3;\r\n        isolation: isolate;\r\n        transition: color .5s var(--ease);\r\n    }\r\n\r\n    .halte-dot::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        z-index: -1;\r\n        border-radius: 50%;\r\n        background: var(--paper);\r\n        border: 2px solid var(--line);\r\n        transform-origin: center;\r\n        transition: transform .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);\r\n    }\r\n\r\n    .halte.lit .halte-dot {\r\n        color: #fff;\r\n    }\r\n\r\n    .halte.lit .halte-dot::before {\r\n        background: var(--deep);\r\n        border-color: var(--deep);\r\n        transform: scale(1.12);\r\n        box-shadow: 0 0 0 3px rgba(255, 167, 1, .42), 0 0 0 7px rgba(255, 167, 1, .12);\r\n    }\r\n\r\n    .halte-copy {\r\n        padding: 0 8px\r\n    }\r\n\r\n    .halte:nth-child(odd) .halte-copy {\r\n        grid-column: 1;\r\n        text-align: right;\r\n        grid-row: 1\r\n    }\r\n\r\n    .halte:nth-child(odd) .halte-ui {\r\n        grid-column: 3;\r\n        grid-row: 1\r\n    }\r\n\r\n    .halte:nth-child(even) .halte-copy {\r\n        grid-column: 3;\r\n        text-align: left;\r\n        grid-row: 1\r\n    }\r\n\r\n    .halte:nth-child(even) .halte-ui {\r\n        grid-column: 1;\r\n        grid-row: 1;\r\n        justify-self: end\r\n    }\r\n\r\n    .halte-copy h3 {\r\n        font-size: clamp(22px, 2.6vw, 30px);\r\n        letter-spacing: -.02em\r\n    }\r\n\r\n    .halte-copy p {\r\n        margin-top: 12px;\r\n        color: var(--ink-soft);\r\n        font-size: 16.5px;\r\n        max-width: 380px\r\n    }\r\n\r\n    .halte:nth-child(odd) .halte-copy p {\r\n        margin-left: auto\r\n    }\r\n\r\n\r\n    \/* reveal van haltes *\/\r\n    .halte-ui {\r\n        overflow: hidden\r\n    }\r\n\r\n    .halte-ui, .halte-copy {\r\n        opacity: 0;\r\n        transform: translateY(28px);\r\n        transition: opacity .8s var(--ease), transform .8s var(--ease)\r\n    }\r\n\r\n    .halte.seen .halte-ui, .halte.seen .halte-copy {\r\n        opacity: 1;\r\n        transform: none\r\n    }\r\n\r\n    .halte.seen .halte-ui {\r\n        transition-delay: .1s\r\n    }\r\n\r\n    \/* ---------- nagemaakte app-UI (EF branded, niet app-kopie) ---------- *\/\r\n    .app-card {\r\n        background: #fff;\r\n        border: 1px solid var(--card-border);\r\n        border-radius: 16px;\r\n        width: min(440px, 100%);\r\n        overflow: hidden;\r\n        transition: box-shadow .5s var(--ease);\r\n    }\r\n\r\n    .halte.seen .app-card:hover {\r\n        box-shadow: var(--shadow-card)\r\n    }\r\n\r\n    .app-top {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        padding: 14px 20px;\r\n        background: var(--deep);\r\n        color: rgba(255, 255, 255, .85);\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .app-top .plus {\r\n        width: 22px;\r\n        height: 22px;\r\n        border-radius: 50%;\r\n        background: var(--orange);\r\n        color: var(--deep);\r\n        font-size: 14px;\r\n        text-align: center;\r\n        font-weight: 700;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .app-top .crumb {\r\n        margin-left: auto;\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        color: rgba(255, 255, 255, .45)\r\n    }\r\n\r\n    .app-body {\r\n        padding: 20px\r\n    }\r\n\r\n    .badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        font-family: var(--mono);\r\n        font-size: 10.5px;\r\n        font-weight: 600;\r\n        letter-spacing: .07em;\r\n        padding: 4px 10px;\r\n        border-radius: 999px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .badge-open {\r\n        background: #fff;\r\n        border: 1px solid rgba(38, 109, 111, .22);\r\n        color: var(--brand)\r\n    }\r\n\r\n    .badge-paid {\r\n        background: var(--deep);\r\n        color: #fff\r\n    }\r\n\r\n    .badge-late {\r\n        background: rgba(192, 74, 51, .12);\r\n        color: var(--red)\r\n    }\r\n\r\n    .badge-linked {\r\n        background: rgba(255, 167, 1, .18);\r\n        color: #9A6700\r\n    }\r\n\r\n    .badge-pending {\r\n        background: #ffc107;\r\n        color: #000\r\n    }\r\n\r\n    .badge-signed {\r\n        background: #479F76;\r\n        color: #fff\r\n    }\r\n\r\n    .sig-stamp {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        min-width: 0;\r\n        height: auto;\r\n        padding: 4px 10px;\r\n        margin-right: 8px;\r\n        border-radius: 12px;\r\n        box-shadow: none;\r\n        opacity: 0;\r\n        transform: scale(.7);\r\n    }\r\n\r\n    .mono {\r\n        font-family: var(--mono)\r\n    }\r\n\r\n    .amount {\r\n        font-family: var(--mono);\r\n        font-weight: 600;\r\n        color: var(--deep)\r\n    }\r\n\r\n    \/* HALTE 1 \u00b7 offerte met handtekening *\/\r\n    .doc-head {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: flex-start;\r\n        gap: 12px;\r\n        border-bottom: 1px solid #E8EEEE;\r\n        padding-bottom: 14px;\r\n    }\r\n\r\n    .doc-head .t {\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .doc-head .m {\r\n        font-size: 12.5px;\r\n        color: var(--ink-faint);\r\n        margin-top: 3px\r\n    }\r\n\r\n    .doc-lines {\r\n        width: 100%;\r\n        margin-top: 16px;\r\n        border: 1px solid #E8EEEE;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        font-size: 12px;\r\n    }\r\n\r\n    .doc-line {\r\n        display: grid;\r\n        grid-template-columns:minmax(0, 1fr) 42px minmax(76px, .42fr) minmax(78px, .42fr);\r\n        align-items: center;\r\n        gap: 8px;\r\n        padding: 9px 10px;\r\n        color: var(--ink-soft);\r\n    }\r\n\r\n    .doc-line.head {\r\n        background: #F8FAF9;\r\n        color: var(--ink-faint);\r\n        font-family: var(--mono);\r\n        font-size: 10px;\r\n        font-weight: 700;\r\n        letter-spacing: .06em;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .doc-line:nth-child(odd):not(.head) {\r\n        background: #FBFCFC;\r\n    }\r\n\r\n    .doc-line .amount {\r\n        font-size: 12px\r\n    }\r\n\r\n    .doc-line span:not(:first-child) {\r\n        text-align: right;\r\n    }\r\n\r\n    .doc-line .description {\r\n        min-width: 0;\r\n        font-weight: 600;\r\n        color: var(--deep);\r\n    }\r\n\r\n    .doc-total {\r\n        border-top: 1px solid #E8EEEE;\r\n        background: #fff;\r\n    }\r\n\r\n    .doc-total .summary-spacer {\r\n        grid-column: 1;\r\n    }\r\n\r\n    .doc-total .summary-name {\r\n        grid-column: 2 \/ 4;\r\n        color: var(--ink-faint);\r\n        text-align: right;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .doc-total .summary-value {\r\n        grid-column: 4;\r\n        font-family: var(--mono);\r\n        font-weight: 600;\r\n        color: var(--deep);\r\n        text-align: right;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .doc-total .grand {\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        color: var(--deep);\r\n    }\r\n\r\n    .sig-zone {\r\n        margin-top: 18px;\r\n        border: 1px solid #DDE7E6;\r\n        border-radius: 6px;\r\n        padding: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 12px;\r\n        background: #fff;\r\n        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);\r\n    }\r\n\r\n    .sig-zone .lbl {\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .sig-zone .meta {\r\n        margin-top: 3px;\r\n        font-size: 10.5px;\r\n        color: var(--ink-faint);\r\n    }\r\n\r\n    .sig-svg {\r\n        width: 112px;\r\n        height: 36px;\r\n        overflow: visible\r\n    }\r\n\r\n    .sig-svg path {\r\n        fill: none;\r\n        stroke: var(--deep);\r\n        stroke-width: 2.2;\r\n        stroke-linecap: round;\r\n        stroke-dasharray: 300;\r\n        stroke-dashoffset: 300;\r\n    }\r\n\r\n    .halte.seen .sig-svg path {\r\n        animation: sigDraw 1.4s ease-out .7s forwards\r\n    }\r\n\r\n    @keyframes sigDraw {\r\n        to {\r\n            stroke-dashoffset: 0\r\n        }\r\n    }\r\n\r\n    .halte.seen .sig-stamp {\r\n        animation: stampIn .45s var(--ease) 2s forwards\r\n    }\r\n\r\n    @keyframes stampIn {\r\n        60% {\r\n            transform: scale(1.08)\r\n        }\r\n        to {\r\n            opacity: 1;\r\n            transform: scale(1)\r\n        }\r\n    }\r\n\r\n    \/* HALTE 2 \u00b7 acties-menu, factuur maken *\/\r\n    .menu-card {\r\n        width: min(340px, 100%)\r\n    }\r\n\r\n    .menu-list {\r\n        padding: 10px\r\n    }\r\n\r\n    .menu-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 11px;\r\n        padding: 10px 14px;\r\n        border-radius: 10px;\r\n        font-size: 14px;\r\n        color: var(--ink-soft);\r\n        font-weight: 500;\r\n    }\r\n\r\n    .menu-item i,\r\n    .menu-item svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        stroke: currentColor;\r\n        opacity: .7;\r\n        flex: 0 0 18px;\r\n        text-align: center\r\n    }\r\n\r\n    .menu-sep {\r\n        height: 1px;\r\n        background: #EEF2F1;\r\n        margin: 6px 4px\r\n    }\r\n\r\n    .menu-item.hot {\r\n        position: relative;\r\n        color: var(--deep);\r\n        font-weight: 700\r\n    }\r\n\r\n    .halte.seen .menu-item.hot {\r\n        animation: hotBg .4s ease 1.5s forwards\r\n    }\r\n\r\n    @keyframes hotBg {\r\n        to {\r\n            background: #f6f6f6\r\n        }\r\n    }\r\n\r\n    .cursor {\r\n        position: absolute;\r\n        right: 14px;\r\n        top: 50%;\r\n        width: 20px;\r\n        height: 20px;\r\n        opacity: 0;\r\n        transform: translate(36px, 18px);\r\n        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));\r\n    }\r\n\r\n    .halte.seen .cursor {\r\n        animation: curIn .9s var(--ease) .8s forwards, curClick .3s ease 1.8s\r\n    }\r\n\r\n    @keyframes curIn {\r\n        to {\r\n            opacity: 1;\r\n            transform: translate(0, -40%)\r\n        }\r\n    }\r\n\r\n    @keyframes curClick {\r\n        50% {\r\n            transform: translate(0, -40%) scale(.82)\r\n        }\r\n    }\r\n\r\n    .spawn {\r\n        position: relative;\r\n        margin: 10px 10px 20px;\r\n        padding: 15px 15px 15px 50px;\r\n        border-radius: 10px;\r\n        background-color: #16a34a;\r\n        background-image: url(\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf\/\/\/3P8+\/evAIgvA\/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg\/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD\/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==\");\r\n        background-position: 15px center;\r\n        background-repeat: no-repeat;\r\n        border: 1px solid rgba(255, 255, 255, .2);\r\n        box-shadow: 0 10px 28px rgba(0, 0, 0, .16);\r\n        color: #fff;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 10px;\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n\r\n    .halte.seen .spawn {\r\n        animation: spawnIn .6s var(--ease) 2.2s forwards\r\n    }\r\n\r\n    @keyframes spawnIn {\r\n        to {\r\n            opacity: 1;\r\n            transform: none\r\n        }\r\n    }\r\n\r\n    .spawn .l {\r\n        flex: 1;\r\n        min-width: 0;\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: #fff\r\n    }\r\n\r\n    .spawn .l span {\r\n        display: block;\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        font-weight: 500;\r\n        color: rgba(255, 255, 255, .84);\r\n        margin-top: 2px\r\n    }\r\n\r\n    .spawn .badge {\r\n        flex: 0 0 auto;\r\n        margin-left: auto;\r\n        background: rgba(255, 255, 255, .16);\r\n        border-color: rgba(255, 255, 255, .24);\r\n        color: #fff\r\n    }\r\n\r\n    \/* HALTE 3 \u00b7 verzending *\/\r\n    .send-rows {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px\r\n    }\r\n\r\n    .send-row {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        border: 1px solid #EEF2F1;\r\n        border-radius: 10px;\r\n        padding: 12px 14px;\r\n    }\r\n\r\n    .send-row .ic {\r\n        width: 34px;\r\n        height: 34px;\r\n        border-radius: 9px;\r\n        background: var(--mist);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .send-row .ic svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        stroke: var(--brand)\r\n    }\r\n\r\n    .send-row .t {\r\n        font-size: 13.5px;\r\n        font-weight: 600;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .send-row .t span {\r\n        display: block;\r\n        font-size: 12px;\r\n        font-weight: 500;\r\n        color: var(--ink-faint);\r\n        margin-top: 1px\r\n    }\r\n\r\n    .send-row .check {\r\n        margin-left: auto;\r\n        width: 22px;\r\n        height: 22px;\r\n        border-radius: 50%;\r\n        background: var(--deep);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex: 0 0 22px;\r\n        opacity: 0;\r\n        transform: scale(.5);\r\n    }\r\n\r\n    .send-row .check svg {\r\n        width: 11px;\r\n        height: 11px;\r\n        stroke: #fff;\r\n        stroke-width: 3\r\n    }\r\n\r\n    .halte.seen .send-row:nth-child(1) .check {\r\n        animation: chk .4s var(--ease) 1s forwards\r\n    }\r\n\r\n    .halte.seen .send-row:nth-child(2) .check {\r\n        animation: chk .4s var(--ease) 1.35s forwards\r\n    }\r\n\r\n    @keyframes chk {\r\n        to {\r\n            opacity: 1;\r\n            transform: scale(1)\r\n        }\r\n    }\r\n\r\n    .qr-strip {\r\n        margin-top: 14px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n        background: var(--mist);\r\n        border-radius: 10px;\r\n        padding: 12px 14px;\r\n    }\r\n\r\n    .qr {\r\n        display: grid;\r\n        grid-template-columns:repeat(7, 5px);\r\n        grid-auto-rows: 5px;\r\n        gap: 2px;\r\n        flex-shrink: 0\r\n    }\r\n\r\n    .qr i {\r\n        background: var(--deep);\r\n        border-radius: 1px;\r\n        opacity: 0\r\n    }\r\n\r\n    .halte.seen .qr i {\r\n        animation: qrIn .25s ease forwards\r\n    }\r\n\r\n    .qr i:nth-child(3n) {\r\n        animation-delay: 1.5s\r\n    }\r\n\r\n    .qr i:nth-child(3n+1) {\r\n        animation-delay: 1.65s\r\n    }\r\n\r\n    .qr i:nth-child(3n+2) {\r\n        animation-delay: 1.8s\r\n    }\r\n\r\n    @keyframes qrIn {\r\n        to {\r\n            opacity: 1\r\n        }\r\n    }\r\n\r\n    .qr i.off {\r\n        visibility: hidden\r\n    }\r\n\r\n    .qr-strip .t {\r\n        font-size: 12.5px;\r\n        color: var(--ink-soft);\r\n        line-height: 1.45\r\n    }\r\n\r\n    .qr-strip .t b {\r\n        color: var(--deep)\r\n    }\r\n\r\n    \/* HALTE 4 \u00b7 herinnering vanzelf *\/\r\n    .tl {\r\n        position: relative;\r\n        padding-left: 26px\r\n    }\r\n\r\n    .tl::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: 8px;\r\n        top: 8px;\r\n        bottom: 8px;\r\n        width: 2px;\r\n        background: #EEF2F1\r\n    }\r\n\r\n    .tl-item {\r\n        position: relative;\r\n        padding: 8px 0 8px 0\r\n    }\r\n\r\n    .tl-item .nd {\r\n        position: absolute;\r\n        left: -26px;\r\n        top: 13px;\r\n        width: 18px;\r\n        height: 18px;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n        border: 2px solid var(--line);\r\n    }\r\n\r\n    .tl-item.done .nd {\r\n        background: var(--brand);\r\n        border-color: var(--brand)\r\n    }\r\n\r\n    .tl-item .t {\r\n        font-size: 13.5px;\r\n        font-weight: 600;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .tl-item .t span {\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        font-weight: 500;\r\n        color: var(--ink-faint);\r\n        margin-left: 8px\r\n    }\r\n\r\n    .tl-item .s {\r\n        font-size: 12.5px;\r\n        color: var(--ink-soft);\r\n        margin-top: 2px\r\n    }\r\n\r\n    .tl-item.auto {\r\n        opacity: 0;\r\n        transform: translateX(-8px)\r\n    }\r\n\r\n    .halte.seen .tl-item.auto {\r\n        animation: tlIn .6s var(--ease) 1.4s forwards\r\n    }\r\n\r\n    @keyframes tlIn {\r\n        to {\r\n            opacity: 1;\r\n            transform: none\r\n        }\r\n    }\r\n\r\n    .tl-item.auto .pill-auto {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        margin-left: 8px;\r\n        font-family: var(--mono);\r\n        font-size: 9.5px;\r\n        font-weight: 600;\r\n        letter-spacing: .06em;\r\n        background: rgba(255, 167, 1, .18);\r\n        color: #9A6700;\r\n        border-radius: 999px;\r\n        padding: 2px 8px;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .auto-toggle {\r\n        margin-top: 14px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        background: var(--mist);\r\n        border-radius: 10px;\r\n        padding: 11px 14px;\r\n    }\r\n\r\n    .auto-toggle .t {\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .toggle {\r\n        width: 38px;\r\n        height: 22px;\r\n        border-radius: 999px;\r\n        background: var(--brand);\r\n        position: relative;\r\n        flex-shrink: 0\r\n    }\r\n\r\n    .toggle::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        right: 3px;\r\n        top: 3px;\r\n        width: 16px;\r\n        height: 16px;\r\n        border-radius: 50%;\r\n        background: #fff\r\n    }\r\n\r\n    \/* HALTE 5 \u00b7 bank matcht *\/\r\n    .bank-row {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 14px;\r\n        border: 1px solid #EEF2F1;\r\n        border-radius: 10px;\r\n        padding: 16px;\r\n        background: #fff;\r\n        box-shadow: 0 10px 28px rgba(38, 109, 111, .08);\r\n    }\r\n\r\n    .bank-row .bank-main {\r\n        display: flex;\r\n        min-width: 0;\r\n        flex: 1;\r\n        flex-direction: column;\r\n        gap: 7px;\r\n    }\r\n\r\n    .bank-row .bank-summary,\r\n    .bank-row .bank-counterpart {\r\n        display: flex;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n    }\r\n\r\n    .bank-row .who {\r\n        font-size: 15px;\r\n        font-weight: 700;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .bank-row .account,\r\n    .bank-row .to-allocate,\r\n    .bank-row .allocation-label {\r\n        font-family: var(--mono);\r\n        font-size: 10.5px;\r\n        font-weight: 500;\r\n        color: var(--ink-faint);\r\n    }\r\n\r\n    .bank-row .in {\r\n        font-family: var(--mono);\r\n        font-weight: 600;\r\n        font-size: 16px;\r\n        color: var(--brand)\r\n    }\r\n\r\n    .bank-row .bank-actions {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .bank-row .bank-btn {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        min-width: 34px;\r\n        height: 31px;\r\n        border: 1px solid var(--card-border);\r\n        border-radius: 6px;\r\n        background: #FAFBFB;\r\n        color: var(--deep);\r\n        font-size: 11px;\r\n        font-weight: 700;\r\n        padding: 0 9px;\r\n        line-height: 1;\r\n    }\r\n\r\n    .bank-row .bank-btn svg {\r\n        width: 14px;\r\n        height: 14px;\r\n        display: block;\r\n        stroke: currentColor;\r\n    }\r\n\r\n    .match-line {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    @keyframes spin {\r\n        to {\r\n            transform: rotate(360deg)\r\n        }\r\n    }\r\n\r\n    @keyframes fadeOut {\r\n        to {\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            position: absolute\r\n        }\r\n    }\r\n\r\n    .match-result {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transform: translateY(6px);\r\n    }\r\n\r\n    .fact-chip {\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n        border: 1px solid var(--card-border);\r\n        border-radius: 6px;\r\n        padding: 3px 9px;\r\n        color: var(--deep);\r\n        background: #FAFBFB;\r\n    }\r\n\r\n    .status-flip {\r\n        margin-top: 14px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        background: var(--mist);\r\n        border-radius: 10px;\r\n        padding: 11px 14px\r\n    }\r\n\r\n    .status-flip .t {\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .flip-stage {\r\n        position: relative;\r\n        height: 24px;\r\n        width: 104px;\r\n        perspective: 300px\r\n    }\r\n\r\n    .flip-stage .badge {\r\n        position: absolute;\r\n        right: 0;\r\n        top: 0;\r\n        backface-visibility: hidden\r\n    }\r\n\r\n    .flip-stage .front {\r\n        transition: transform .5s var(--ease)\r\n    }\r\n\r\n    .flip-stage .back {\r\n        transform: rotateX(180deg);\r\n        transition: transform .5s var(--ease)\r\n    }\r\n\r\n    .halte.seen .flip-stage .front {\r\n        animation: flipA .6s var(--ease) 2.1s forwards\r\n    }\r\n\r\n    .halte.seen .flip-stage .back {\r\n        animation: flipB .6s var(--ease) 2.1s forwards\r\n    }\r\n\r\n    @keyframes flipA {\r\n        to {\r\n            transform: rotateX(-180deg)\r\n        }\r\n    }\r\n\r\n    @keyframes flipB {\r\n        to {\r\n            transform: rotateX(0)\r\n        }\r\n    }\r\n\r\n    \/* HALTE 6 \u00b7 boekhouder *\/\r\n    .flow {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        justify-content: space-between\r\n    }\r\n\r\n    .flow .node {\r\n        flex: 1;\r\n        border: 1px solid #EEF2F1;\r\n        border-radius: 10px;\r\n        padding: 13px;\r\n        text-align: center;\r\n    }\r\n\r\n    .flow .node .ti {\r\n        font-size: 12.5px;\r\n        font-weight: 700;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .flow .node .su {\r\n        font-family: var(--mono);\r\n        font-size: 10px;\r\n        color: var(--ink-faint);\r\n        margin-top: 3px\r\n    }\r\n\r\n    .flow-arrow {\r\n        flex-shrink: 0;\r\n        position: relative;\r\n        width: 46px;\r\n        height: 2px;\r\n        background: var(--line);\r\n        overflow: visible\r\n    }\r\n\r\n    .flow-arrow::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        right: -9px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        border: 4.5px solid transparent;\r\n        border-left-color: var(--line);\r\n        z-index: 1\r\n    }\r\n\r\n    .flow-pulse {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 0;\r\n        width: 7px;\r\n        height: 7px;\r\n        border-radius: 50%;\r\n        background: var(--orange);\r\n        opacity: 0;\r\n        transform: translateY(-50%);\r\n        z-index: 2;\r\n    }\r\n\r\n    .halte.seen .flow-pulse {\r\n        animation: pulseMove 1.6s ease-in-out 1s forwards\r\n    }\r\n\r\n    @keyframes pulseMove {\r\n        0% {\r\n            opacity: 0;\r\n            left: 0\r\n        }\r\n        15% {\r\n            opacity: 1\r\n        }\r\n        85% {\r\n            opacity: 1\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            left: calc(100% - 3px)\r\n        }\r\n    }\r\n\r\n    .pkg-chips {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 8px;\r\n        margin-top: 14px\r\n    }\r\n\r\n    .pkg-chips i {\r\n        font-style: normal;\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        font-weight: 500;\r\n        border: 1px solid var(--card-border);\r\n        border-radius: 999px;\r\n        padding: 5px 12px;\r\n        color: var(--ink-soft);\r\n        background: #fff;\r\n    }\r\n\r\n    .delivered {\r\n        margin-top: 14px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 9px;\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: var(--deep);\r\n        background: var(--mist);\r\n        border-radius: 10px;\r\n        padding: 11px 14px;\r\n        opacity: 0;\r\n        transform: translateY(8px);\r\n    }\r\n\r\n    .halte.seen .delivered {\r\n        animation: deliveredIn .45s var(--ease) 2.6s forwards\r\n    }\r\n\r\n    @keyframes deliveredIn {\r\n        to {\r\n            opacity: 1;\r\n            transform: none\r\n        }\r\n    }\r\n\r\n    .delivered .ok {\r\n        width: 20px;\r\n        height: 20px;\r\n        border-radius: 50%;\r\n        background: var(--deep);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0\r\n    }\r\n\r\n    .delivered .ok svg {\r\n        width: 10px;\r\n        height: 10px;\r\n        stroke: #fff;\r\n        stroke-width: 3\r\n    }\r\n\r\n    .delivered .tm {\r\n        margin-left: auto;\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        font-weight: 500;\r\n        color: var(--ink-faint)\r\n    }\r\n\r\n    \/* HALTE 7 \u00b7 overzicht *\/\r\n    .kpi-grid {\r\n        display: grid;\r\n        grid-template-columns:1fr 1fr;\r\n        gap: 12px\r\n    }\r\n\r\n    .kpi {\r\n        border-radius: 12px;\r\n        padding: 16px;\r\n        border: 1px solid #EEF2F1;\r\n    }\r\n\r\n    .kpi .v {\r\n        font-family: var(--mono);\r\n        font-weight: 600;\r\n        font-size: clamp(16px, 1.6vw, 19px);\r\n        letter-spacing: -.01em\r\n    }\r\n\r\n    .kpi .l {\r\n        font-size: 11.5px;\r\n        font-weight: 500;\r\n        margin-top: 3px;\r\n        opacity: .75\r\n    }\r\n\r\n    .kpi-deep {\r\n        background: var(--deep);\r\n        color: #fff;\r\n        border-color: var(--deep)\r\n    }\r\n\r\n    .kpi-deep .v {\r\n        color: #fff\r\n    }\r\n\r\n    .kpi-mist {\r\n        background: var(--mist);\r\n        border-color: var(--mist)\r\n    }\r\n\r\n    .kpi-mist .v {\r\n        color: var(--deep)\r\n    }\r\n\r\n    .kpi-late .v {\r\n        color: var(--red)\r\n    }\r\n\r\n    .kpi-plain .v {\r\n        color: var(--deep)\r\n    }\r\n\r\n    .mini-bars {\r\n        display: flex;\r\n        align-items: flex-end;\r\n        gap: 5px;\r\n        height: 54px;\r\n        margin-top: 16px;\r\n        padding: 0 4px\r\n    }\r\n\r\n    .mini-bars i {\r\n        flex: 1;\r\n        background: var(--mist);\r\n        border-radius: 4px 4px 0 0;\r\n        height: 8%;\r\n        transition: height 1s var(--ease);\r\n    }\r\n\r\n    .mini-bars i.hot {\r\n        background: var(--brand)\r\n    }\r\n\r\n    .halte.seen .mini-bars i {\r\n        height: var(--h)\r\n    }\r\n\r\n    .mini-bars-cap {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        font-family: var(--mono);\r\n        font-size: 9.5px;\r\n        color: var(--ink-faint);\r\n        margin-top: 6px;\r\n        padding: 0 4px\r\n    }\r\n\r\n    \/* ---------- eindstation ---------- *\/\r\n    .eind {\r\n        position: relative;\r\n        z-index: 3;\r\n        padding: 24px 0 96px;\r\n        text-align: center;\r\n    }\r\n\r\n    .eind-dot {\r\n        width: 18px;\r\n        height: 18px;\r\n        border-radius: 50%;\r\n        background: var(--orange);\r\n        margin: 0 auto;\r\n        box-shadow: 0 0 0 8px rgba(255, 167, 1, .18), 0 0 30px rgba(255, 167, 1, .55);\r\n    }\r\n\r\n    .eind-card {\r\n        margin: 36px auto 0;\r\n        max-width: 680px;\r\n        background: var(--deep);\r\n        border-radius: 24px;\r\n        color: #fff;\r\n        padding: 48px 40px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .eind-card::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.5px);\r\n        background-size: 24px 24px;\r\n    }\r\n\r\n    .eind-card h3 {\r\n        color: #fff;\r\n        font-size: clamp(24px, 3vw, 32px);\r\n        letter-spacing: -.02em;\r\n        position: relative\r\n    }\r\n\r\n    .eind-card p {\r\n        position: relative;\r\n        margin-top: 24px;\r\n        color: rgba(255, 255, 255, .8);\r\n        font-size: 15.5px;\r\n        max-width: 440px;\r\n        margin-left: auto;\r\n        margin-right: auto\r\n    }\r\n\r\n\r\n    \/* ============================================================\r\n     TWEE DEUREN\r\n     ============================================================ *\/\r\n    .deuren {\r\n        padding: 96px 0\r\n    }\r\n\r\n    .deuren-head {\r\n        text-align: center;\r\n        max-width: 640px;\r\n        margin: 0 auto 56px\r\n    }\r\n\r\n    .deuren-head h2 {\r\n        font-size: clamp(30px, 4vw, 44px);\r\n        margin-top: 18px\r\n    }\r\n\r\n    .deuren-grid {\r\n        display: grid;\r\n        grid-template-columns:1fr 1fr;\r\n        gap: 24px\r\n    }\r\n\r\n    .deur {\r\n        background: #fff;\r\n        border: 1px solid var(--card-border);\r\n        border-radius: var(--r-card);\r\n        padding: 40px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;\r\n        text-decoration: none;\r\n        display: block;\r\n    }\r\n\r\n    .deur:hover {\r\n        transform: translateY(-6px);\r\n        box-shadow: var(--shadow-lift);\r\n        border-color: rgba(38, 109, 111, .35)\r\n    }\r\n\r\n    .deur .tag {\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n        letter-spacing: .1em;\r\n        text-transform: uppercase;\r\n        color: var(--brand);\r\n    }\r\n\r\n    .deur h3 {\r\n        font-size: 26px;\r\n        margin-top: 14px;\r\n        letter-spacing: -.02em\r\n    }\r\n\r\n    .deur p {\r\n        color: var(--ink-soft);\r\n        margin-top: 12px;\r\n        font-size: 15.5px\r\n    }\r\n\r\n    .deur ul {\r\n        list-style: none;\r\n        margin-top: 20px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px\r\n    }\r\n\r\n    .deur ul li {\r\n        display: flex;\r\n        gap: 10px;\r\n        align-items: flex-start;\r\n        font-size: 14.5px;\r\n        color: var(--ink);\r\n        font-weight: 500\r\n    }\r\n\r\n    .deur ul li svg {\r\n        width: 17px;\r\n        height: 17px;\r\n        flex-shrink: 0;\r\n        margin-top: 2px;\r\n        stroke: var(--orange);\r\n        stroke-width: 2.5\r\n    }\r\n\r\n    .deur .go {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        margin-top: 26px;\r\n        font-weight: 700;\r\n        color: var(--deep);\r\n        font-size: 15px;\r\n    }\r\n\r\n    .deur .go .arr {\r\n        transition: transform .3s var(--ease)\r\n    }\r\n\r\n    .deur:hover .go .arr {\r\n        transform: translateX(4px)\r\n    }\r\n\r\n    .deur-accent {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 40px;\r\n        right: 40px;\r\n        height: 3px;\r\n        border-radius: 0 0 4px 4px;\r\n        background: rgba(255, 167, 1, .35);\r\n        transition: background .3s\r\n    }\r\n\r\n    .deur:hover .deur-accent {\r\n        background: var(--orange)\r\n    }\r\n\r\n    \/* ============================================================\r\n     DE MENSEN (deep green sectie)\r\n     ============================================================ *\/\r\n    .mensen {\r\n        background: var(--deep);\r\n        color: #fff;\r\n        padding: 104px 0;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .mensen::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: radial-gradient(circle, rgba(255, 255, 255, .055) 1px, transparent 1.5px);\r\n        background-size: 24px 24px;\r\n    }\r\n\r\n    .mensen .wrap {\r\n        position: relative\r\n    }\r\n\r\n    .mensen .eyebrow {\r\n        color: rgba(255, 255, 255, .7)\r\n    }\r\n\r\n    .mensen h2 {\r\n        color: #fff;\r\n        font-size: clamp(30px, 4.4vw, 48px);\r\n        margin-top: 18px;\r\n        max-width: 600px\r\n    }\r\n\r\n    .mensen .lead {\r\n        color: rgba(255, 255, 255, .78);\r\n        font-size: 18px;\r\n        max-width: 520px;\r\n        margin-top: 18px\r\n    }\r\n\r\n    .mensen-grid {\r\n        display: grid;\r\n        grid-template-columns:1fr 1fr;\r\n        gap: 64px;\r\n        align-items: start;\r\n        margin-top: 24px\r\n    }\r\n\r\n    .contact-card {\r\n        background: rgba(255, 255, 255, .06);\r\n        border: 1px solid rgba(255, 255, 255, .14);\r\n        border-radius: var(--r-card);\r\n        padding: 32px;\r\n        margin-top: 36px;\r\n        backdrop-filter: blur(4px);\r\n    }\r\n\r\n    .contact-card .row {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        gap: 14px;\r\n        padding: 12px 0\r\n    }\r\n\r\n    .contact-card .row > div:last-child {\r\n        flex: 1;\r\n        min-width: 0\r\n    }\r\n\r\n    .contact-card .row + .row {\r\n        border-top: 1px solid rgba(255, 255, 255, .1)\r\n    }\r\n\r\n    .contact-card .ic {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 11px;\r\n        background: rgba(255, 167, 1, .16);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .contact-card .ic svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        stroke: var(--orange)\r\n    }\r\n\r\n    .contact-card .t {\r\n        font-size: 13px;\r\n        color: rgba(255, 255, 255, .6)\r\n    }\r\n\r\n    .contact-card .v {\r\n        font-family: var(--mono);\r\n        font-weight: 600;\r\n        font-size: 16px;\r\n        color: #fff\r\n    }\r\n\r\n    .team-strip {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 0;\r\n        margin-top: 28px\r\n    }\r\n\r\n    .face {\r\n        width: 46px;\r\n        height: 46px;\r\n        border-radius: 50%;\r\n        border: 2.5px solid var(--deep);\r\n        background: var(--mist);\r\n        color: var(--deep);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-weight: 700;\r\n        font-size: 14px;\r\n        margin-left: -10px;\r\n    }\r\n\r\n    .face:first-child {\r\n        margin-left: 0\r\n    }\r\n\r\n    .face:nth-child(2) {\r\n        background: #F7E2B8\r\n    }\r\n\r\n    .face:nth-child(3) {\r\n        background: #CFE3E1\r\n    }\r\n\r\n    .face:nth-child(4) {\r\n        background: #F4D7CB\r\n    }\r\n\r\n    .team-strip .t {\r\n        margin-left: 16px;\r\n        font-size: 13.5px;\r\n        color: rgba(255, 255, 255, .72)\r\n    }\r\n\r\n    .quotes {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 18px\r\n    }\r\n\r\n    .quote {\r\n        background: #fff;\r\n        color: var(--ink);\r\n        border-radius: var(--r-card);\r\n        padding: 26px 28px;\r\n        box-shadow: 0 16px 48px rgba(0, 0, 0, .22);\r\n        transform: rotate(.4deg);\r\n    }\r\n\r\n    .quote:nth-child(2) {\r\n        transform: rotate(-.5deg)\r\n    }\r\n\r\n    .quote:nth-child(3) {\r\n        transform: rotate(.3deg)\r\n    }\r\n\r\n    .quote {\r\n        position: relative\r\n    }\r\n\r\n    .quote::before {\r\n        content: \"\\201C\";\r\n        position: absolute;\r\n        top: 6px;\r\n        left: 18px;\r\n        font-size: 54px;\r\n        line-height: 1;\r\n        font-weight: 800;\r\n        color: var(--orange);\r\n        opacity: .85;\r\n        font-family: Georgia, serif;\r\n    }\r\n\r\n    .quote p {\r\n        font-size: 15.5px;\r\n        font-weight: 500;\r\n        line-height: 1.55;\r\n        color: var(--deep);\r\n        padding-left: 28px\r\n    }\r\n\r\n    .quote .who {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        margin-top: 16px\r\n    }\r\n\r\n    .quote .who .face {\r\n        width: 34px;\r\n        height: 34px;\r\n        font-size: 11px;\r\n        border-color: #fff;\r\n        margin: 0\r\n    }\r\n\r\n    .quote .who .nm {\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .quote .who .nm span {\r\n        display: block;\r\n        font-weight: 500;\r\n        color: var(--ink-faint);\r\n        font-size: 12px\r\n    }\r\n\r\n    \/* review scroller *\/\r\n    .review-scroll {\r\n        position: relative;\r\n        height: 730px;\r\n        overflow-y: auto;\r\n        overflow-x: hidden;\r\n        scroll-behavior: smooth;\r\n        scrollbar-width: none;\r\n        --fade-top: 0px;\r\n        --fade-bottom: 44px;\r\n        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);\r\n        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);\r\n    }\r\n\r\n    .review-scroll::-webkit-scrollbar {\r\n        display: none\r\n    }\r\n\r\n    .review-scroll.has-top-fade {\r\n        --fade-top: 44px\r\n    }\r\n\r\n    .review-scroll.at-bottom {\r\n        --fade-bottom: 0px\r\n    }\r\n\r\n    .review-track {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 16px\r\n    }\r\n\r\n    .review-track .rv:nth-of-type(n+9) {\r\n        display: none\r\n    }\r\n\r\n    .review-controls {\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        gap: 10px;\r\n        margin: 0 0 14px\r\n    }\r\n\r\n    .review-nav {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        border: 1px solid rgba(255, 255, 255, .22);\r\n        background: rgba(255, 255, 255, .08);\r\n        color: #fff;\r\n        cursor: pointer;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);\r\n    }\r\n\r\n    .review-nav:hover {\r\n        background: rgba(255, 255, 255, .14);\r\n        border-color: rgba(255, 255, 255, .42);\r\n        transform: translateY(-1px)\r\n    }\r\n\r\n    .review-nav:disabled {\r\n        opacity: .38;\r\n        cursor: not-allowed;\r\n        transform: none;\r\n        background: rgba(255, 255, 255, .04);\r\n        border-color: rgba(255, 255, 255, .12)\r\n    }\r\n\r\n    .review-nav svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        stroke: currentColor\r\n    }\r\n\r\n    .rv {\r\n        background: rgba(255, 255, 255, .07);\r\n        border: 1px solid rgba(255, 255, 255, .12);\r\n        border-radius: 14px;\r\n        padding: 22px 24px;\r\n        backdrop-filter: blur(4px);\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .rv .rv-head {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        margin-bottom: 12px\r\n    }\r\n\r\n    .rv .rv-avatar {\r\n        width: 38px;\r\n        height: 38px;\r\n        border-radius: 50%;\r\n        background: rgba(255, 255, 255, .12);\r\n        color: #fff;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-weight: 700;\r\n        font-size: 14px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .rv .rv-name {\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        color: #fff\r\n    }\r\n\r\n    .rv .rv-meta {\r\n        font-size: 12px;\r\n        color: rgba(255, 255, 255, .5);\r\n        margin-top: 2px\r\n    }\r\n\r\n    .rv .rv-stars {\r\n        display: flex;\r\n        gap: 2px;\r\n        margin-left: auto\r\n    }\r\n\r\n    .rv .rv-stars i, .rv-star {\r\n        width: 14px;\r\n        height: 14px;\r\n        background: var(--orange);\r\n        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\r\n        display: inline-block;\r\n    }\r\n\r\n    .rv p {\r\n        font-size: 14px;\r\n        color: rgba(255, 255, 255, .82);\r\n        line-height: 1.55\r\n    }\r\n\r\n    .rv p strong {\r\n        color: #fff;\r\n        font-weight: 600\r\n    }\r\n\r\n    @media (max-width: 960px) {\r\n        \/* Stop the grid from stretching infinitely *\/\r\n        .mensen-grid {\r\n            grid-template-columns: minmax(0, 1fr) !important;\r\n        }\r\n\r\n        .mensen-grid > div {\r\n            min-width: 0;\r\n            width: 100%;\r\n        }\r\n\r\n        \/* Rotate arrows to point Left and Right *\/\r\n        .review-nav svg {\r\n            transform: rotate(-90deg);\r\n        }\r\n\r\n        \/* Horizontal scroll container *\/\r\n        \/* Horizontal scroll container *\/\r\n        .review-scroll {\r\n            height: auto;\r\n            width: 100%;\r\n            overflow-y: hidden;\r\n            overflow-x: auto;\r\n            display: block;\r\n            padding-bottom: 24px;\r\n            scroll-snap-type: x mandatory;\r\n            -webkit-mask-image: none !important;\r\n            mask-image: none !important;\r\n\r\n            \/* NEW: Smoothly animate the height when it changes *\/\r\n            transition: height 0.3s var(--ease);\r\n        }\r\n\r\n        \/* Track layout *\/\r\n        .review-track {\r\n            display: flex;\r\n            flex-direction: row;\r\n            width: max-content;\r\n            gap: 16px;\r\n            padding-right: 16px;\r\n\r\n            \/* NEW: Forces short reviews to stay short instead of stretching to the tallest one *\/\r\n            align-items: flex-start;\r\n        }\r\n\r\n        \/* Size the card and tell it to snap *\/\r\n        .rv {\r\n            \/* Viewport width minus the 32px left\/right padding of .wrap *\/\r\n            width: calc(100vw - 64px);\r\n            max-width: none; \/* Remove any previous caps *\/\r\n            white-space: normal;\r\n            flex-shrink: 0;\r\n            scroll-snap-align: start;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n        .rv {\r\n            \/* Viewport width minus the 20px left\/right padding of .wrap on mobile *\/\r\n            width: calc(100vw - 40px);\r\n        }\r\n    }\r\n\r\n    \/* ============================================================\r\n     BOEKHOUDER-BLOK\r\n     ============================================================ *\/\r\n    .baas {\r\n        padding: 104px 0\r\n    }\r\n\r\n    .baas-card {\r\n        background: var(--mist);\r\n        border-radius: 24px;\r\n        padding: 64px;\r\n        display: grid;\r\n        grid-template-columns:1.1fr .9fr;\r\n        column-gap: 56px;\r\n        row-gap: 25px;\r\n        align-items: center;\r\n    }\r\n\r\n    .baas-card > div:nth-child(3) {\r\n        grid-column: 1 \/ -1\r\n    }\r\n\r\n    .baas h2 {\r\n        font-size: clamp(28px, 3.6vw, 40px)\r\n    }\r\n\r\n    .baas p {\r\n        color: var(--ink-soft);\r\n        margin-top: 16px;\r\n        font-size: 16.5px;\r\n        max-width: 440px\r\n    }\r\n\r\n    .baas .pkg-chips i {\r\n        background: #fff;\r\n        border-color: rgba(38, 109, 111, .18)\r\n    }\r\n\r\n    .baas .pkg-chips {\r\n        margin-top: 24px\r\n    }\r\n\r\n    .baas .pkg-chips.logo-chips {\r\n        gap: 10px\r\n    }\r\n\r\n    .logo-chip {\r\n        width: 129.7px;\r\n        height: 64px;\r\n        border: 1px solid rgba(38, 109, 111, .16);\r\n        border-radius: 10px;\r\n        background: #fff;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 10px 14px;\r\n        box-shadow: 0 1px 2px rgba(26, 79, 81, .04);\r\n    }\r\n\r\n    .logo-chip img {\r\n        max-width: 100%;\r\n        max-height: 100%;\r\n        display: block;\r\n        object-fit: contain\r\n    }\r\n\r\n    .baas .more {\r\n        font-size: 13.5px;\r\n        color: var(--ink-faint);\r\n        margin-top: 14px;\r\n        font-weight: 500\r\n    }\r\n\r\n    .baas-visual {\r\n        position: relative\r\n    }\r\n\r\n    .peek {\r\n        background: #fff;\r\n        border-radius: var(--r-app);\r\n        border: 1px solid var(--card-border);\r\n        box-shadow: var(--shadow-card);\r\n        padding: 20px;\r\n    }\r\n\r\n    .peek .hd {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .peek .hd .badge {\r\n        font-size: 9.5px\r\n    }\r\n\r\n    .peek .rw {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        font-size: 13px;\r\n        color: var(--ink-soft);\r\n        padding: 9px 0;\r\n        border-bottom: 1px solid #F3F6F5\r\n    }\r\n\r\n    .peek .rw:last-child {\r\n        border: none\r\n    }\r\n\r\n    .peek-eye {\r\n        position: absolute;\r\n        right: -14px;\r\n        top: -14px;\r\n        background: var(--deep);\r\n        color: #fff;\r\n        border-radius: 999px;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        padding: 8px 16px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        box-shadow: 0 8px 24px rgba(26, 79, 81, .3);\r\n    }\r\n\r\n    .peek-eye svg {\r\n        width: 14px;\r\n        height: 14px;\r\n        stroke: var(--orange)\r\n    }\r\n\r\n    \/* ============================================================\r\n     BOUWSTENEN\r\n     ============================================================ *\/\r\n    .blokken {\r\n        padding: 96px 0\r\n    }\r\n\r\n    .blokken-head {\r\n        text-align: center;\r\n        max-width: 660px;\r\n        margin: 0 auto 48px\r\n    }\r\n\r\n    .blokken-head h2 {\r\n        font-size: clamp(30px, 4vw, 44px);\r\n        margin-top: 18px\r\n    }\r\n\r\n    .blokken-head .sub {\r\n        color: var(--ink-soft);\r\n        font-size: 17px;\r\n        margin-top: 14px\r\n    }\r\n\r\n    .blokken-head .sub b {\r\n        color: var(--deep)\r\n    }\r\n\r\n    .chip-layout {\r\n        display: grid;\r\n        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);\r\n        gap: 32px;\r\n        align-items: start;\r\n    }\r\n\r\n    .chip-wall {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        justify-content: flex-start;\r\n        max-width: none;\r\n        margin: 0\r\n    }\r\n\r\n    .mchip {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 9px;\r\n        font-size: 14px;\r\n        font-weight: 600;\r\n        padding: 10px 18px;\r\n        border-radius: 999px;\r\n        cursor: pointer;\r\n        border: 1.5px solid var(--card-border);\r\n        background: #fff;\r\n        color: var(--ink-faint);\r\n        transition: all .3s var(--ease);\r\n        user-select: none;\r\n        font-family: var(--font);\r\n    }\r\n\r\n    .mchip .led {\r\n        width: 8px;\r\n        height: 8px;\r\n        border-radius: 50%;\r\n        background: #D8E0DE;\r\n        flex-shrink: 0;\r\n        transition: all .3s var(--ease);\r\n    }\r\n\r\n    .mchip:hover {\r\n        border-color: rgba(38, 109, 111, .4)\r\n    }\r\n\r\n    .mchip:not(.on):first-of-type ~ .mchip:not(.on):first-of-type {\r\n        animation: none\r\n    }\r\n\r\n    .mchip.on {\r\n        background: var(--mist);\r\n        border-color: rgba(38, 109, 111, .35);\r\n        color: var(--deep);\r\n    }\r\n\r\n    .mchip.on .led {\r\n        background: var(--orange);\r\n        box-shadow: 0 0 0 3px rgba(255, 167, 1, .25)\r\n    }\r\n\r\n    .mchip.pop {\r\n        animation: chipPop .35s var(--ease)\r\n    }\r\n\r\n    @keyframes chipPop {\r\n        40% {\r\n            transform: scale(1.06)\r\n        }\r\n    }\r\n\r\n    .chip-info {\r\n        max-width: none;\r\n        margin: 0;\r\n        text-align: left;\r\n        min-height: 56px;\r\n        display: flex;\r\n        align-items: stretch;\r\n        justify-content: center;\r\n    }\r\n\r\n    .chip-info .inner {\r\n        background: #fff;\r\n        border: 1px solid var(--card-border);\r\n        border-radius: 12px;\r\n        padding: 16px;\r\n        font-size: 14.5px;\r\n        color: var(--ink-soft);\r\n        box-shadow: var(--shadow-card);\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 14px;\r\n        opacity: 0;\r\n        transform: translateY(6px);\r\n        transition: opacity .35s var(--ease), transform .35s var(--ease);\r\n    }\r\n\r\n    .chip-info .inner.show {\r\n        opacity: 1;\r\n        transform: none\r\n    }\r\n\r\n    .chip-info .inner b {\r\n        color: var(--deep);\r\n        white-space: nowrap\r\n    }\r\n\r\n    .chip-shot {\r\n        aspect-ratio: 96\/59;\r\n        border: 1px solid rgb(154 196 197 \/ 28%);\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        background: linear-gradient(135deg, #F8FAF9, #EEF5F4);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--ink-faint);\r\n        font-family: var(--mono);\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n        letter-spacing: .08em;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .chip-shot img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        display: block;\r\n        cursor: zoom-in;\r\n    }\r\n\r\n    .shot-modal {\r\n        position: fixed;\r\n        inset: 0;\r\n        z-index: 2000;\r\n        display: grid;\r\n        place-items: center;\r\n        padding: 24px;\r\n        background: rgba(13, 27, 27, .72);\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        transition: opacity .25s var(--ease);\r\n    }\r\n\r\n    .shot-modal.open {\r\n        opacity: 1;\r\n        pointer-events: auto;\r\n    }\r\n\r\n    .shot-modal img {\r\n        width: auto;\r\n        height: auto;\r\n        border-radius: 10px;\r\n        box-shadow: 0 26px 80px rgba(0, 0, 0, .32);\r\n        background: #fff;\r\n        transform: scale(.96);\r\n        transition: transform .25s var(--ease);\r\n    }\r\n\r\n    .shot-modal.open img {\r\n        transform: scale(1);\r\n    }\r\n\r\n    .shot-close {\r\n        position: fixed;\r\n        top: 18px;\r\n        right: 18px;\r\n        width: 42px;\r\n        height: 42px;\r\n        border: 0;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n        color: var(--deep);\r\n        font-size: 28px;\r\n        line-height: 1;\r\n        cursor: pointer;\r\n        box-shadow: 0 12px 34px rgba(0, 0, 0, .22);\r\n    }\r\n\r\n    .chip-info .st {\r\n        font-family: var(--mono);\r\n        font-size: 10px;\r\n        font-weight: 600;\r\n        letter-spacing: .08em;\r\n        text-transform: uppercase;\r\n        padding: 3px 9px;\r\n        border-radius: 999px;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .chip-info .st.aan {\r\n        background: rgba(255, 167, 1, .18);\r\n        color: #9A6700\r\n    }\r\n\r\n    .chip-info .st.uit {\r\n        background: #F1F1EE;\r\n        color: var(--ink-faint)\r\n    }\r\n\r\n    .blokken-foot {\r\n        text-align: center;\r\n        margin-top: 36px\r\n    }\r\n\r\n    .blokken-foot a {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        font-weight: 700;\r\n        color: var(--deep);\r\n        font-size: 15.5px;\r\n        text-decoration: none;\r\n    }\r\n\r\n    .blokken-foot a .arr {\r\n        transition: transform .3s var(--ease)\r\n    }\r\n\r\n    .blokken-foot a:hover .arr {\r\n        transform: translateX(4px)\r\n    }\r\n\r\n    \/* foto-placeholders *\/\r\n    .face.photo {\r\n        background: linear-gradient(135deg, #CFE3E1, #E8F1F1);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .face.photo svg {\r\n        width: 60%;\r\n        height: 60%;\r\n        margin-top: 18%;\r\n        opacity: .55\r\n    }\r\n\r\n    \/* ============================================================\r\n     PRIJZEN\r\n     ============================================================ *\/\r\n    .prijzen {\r\n        padding: 96px 0\r\n    }\r\n\r\n    .prijzen-head {\r\n        text-align: center;\r\n        max-width: 620px;\r\n        margin: 0 auto 56px\r\n    }\r\n\r\n    .prijzen-head h2 {\r\n        font-size: clamp(30px, 4vw, 44px);\r\n        margin-top: 18px\r\n    }\r\n\r\n    .prijzen-head .sub {\r\n        color: var(--ink-soft);\r\n        font-size: 17px;\r\n        margin-top: 14px\r\n    }\r\n\r\n    .tier-grid {\r\n        display: grid;\r\n        grid-template-columns:repeat(3, 1fr);\r\n        gap: 20px;\r\n        align-items: stretch\r\n    }\r\n\r\n    .tier {\r\n        background: #fff;\r\n        border: 1px solid var(--card-border);\r\n        border-radius: var(--r-card);\r\n        padding: 36px 32px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        position: relative;\r\n        transition: transform .4s var(--ease), box-shadow .4s var(--ease);\r\n    }\r\n\r\n    .tier:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: var(--shadow-lift)\r\n    }\r\n\r\n    .tier.featured {\r\n        background: var(--deep);\r\n        color: #fff;\r\n        border-color: var(--deep);\r\n        transform: scale(1.035);\r\n        box-shadow: 0 24px 64px rgba(26, 79, 81, .28);\r\n    }\r\n\r\n    .tier.featured:hover {\r\n        transform: scale(1.035) translateY(-5px)\r\n    }\r\n\r\n    .tier .nm {\r\n        font-size: 17px;\r\n        font-weight: 700;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .tier.featured .nm {\r\n        color: #fff\r\n    }\r\n\r\n    .tier .pr {\r\n        margin-top: 18px;\r\n        display: flex;\r\n        align-items: baseline;\r\n        gap: 6px\r\n    }\r\n\r\n    .tier .pr .v {\r\n        font-family: var(--mono);\r\n        font-weight: 600;\r\n        font-size: 40px;\r\n        letter-spacing: -.03em;\r\n        color: var(--deep)\r\n    }\r\n\r\n    .tier.featured .pr .v {\r\n        color: #fff\r\n    }\r\n\r\n    .tier .pr .p {\r\n        font-size: 13.5px;\r\n        color: var(--ink-faint)\r\n    }\r\n\r\n    .tier.featured .pr .p {\r\n        color: rgba(255, 255, 255, .6)\r\n    }\r\n\r\n    .tier ul {\r\n        list-style: none;\r\n        margin-top: 24px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 11px;\r\n        flex: 1\r\n    }\r\n\r\n    .tier ul li {\r\n        display: flex;\r\n        gap: 10px;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        color: var(--ink-soft);\r\n        align-items: flex-start\r\n    }\r\n\r\n    .tier.featured ul li {\r\n        color: rgba(255, 255, 255, .82)\r\n    }\r\n\r\n    .tier ul li svg {\r\n        width: 16px;\r\n        height: 16px;\r\n        flex-shrink: 0;\r\n        margin-top: 2px;\r\n        stroke: var(--brand);\r\n        stroke-width: 2.5\r\n    }\r\n\r\n    .tier.featured ul li svg {\r\n        stroke: var(--orange)\r\n    }\r\n\r\n    .tier .btn {\r\n        margin-top: 28px;\r\n        justify-content: center\r\n    }\r\n\r\n    .tier .btn-ghost {\r\n        border-color: rgba(26, 79, 81, .2)\r\n    }\r\n\r\n    .fbadge {\r\n        position: absolute;\r\n        top: -13px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        background: var(--orange);\r\n        color: var(--deep);\r\n        font-family: var(--mono);\r\n        font-size: 10.5px;\r\n        font-weight: 600;\r\n        letter-spacing: .08em;\r\n        text-transform: uppercase;\r\n        padding: 5px 14px;\r\n        border-radius: 999px;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .prijzen-foot {\r\n        text-align: center;\r\n        margin-top: 32px;\r\n        font-size: 13.5px;\r\n        color: var(--ink-faint);\r\n    }\r\n\r\n    .prijzen-foot b {\r\n        color: var(--ink-soft)\r\n    }\r\n\r\n    \/* ============================================================\r\n     SLOT-CTA + FOOTER\r\n     ============================================================ *\/\r\n    .slot {\r\n        padding: 48px 0 156px;\r\n        text-align: center\r\n    }\r\n\r\n    .slot.dotgrid {\r\n        background-color: #EEF5F4\r\n    }\r\n\r\n    .slot h2 {\r\n        font-size: clamp(34px, 5vw, 58px);\r\n        letter-spacing: -.03em;\r\n        max-width: 760px;\r\n        margin: 24px auto 0\r\n    }\r\n\r\n    .slot .sub {\r\n        color: var(--ink-soft);\r\n        font-size: 18px;\r\n        margin-top: 18px\r\n    }\r\n\r\n    .slot .hero-cta {\r\n        margin-top: 36px\r\n    }\r\n\r\n    .slot .micro {\r\n        margin-top: 20px;\r\n        font-size: 13.5px;\r\n        color: var(--ink-faint)\r\n    }\r\n\r\n    \/* ============================================================\r\n     NIEUWSLETTER\r\n     ============================================================ *\/\r\n    .newsletter-band {\r\n        height: 0;\r\n        position: relative;\r\n        z-index: 5\r\n    }\r\n\r\n    .newsletter-band .wrap {\r\n        position: relative;\r\n        transform: translateY(-50%)\r\n    }\r\n\r\n    .newsletter-card {\r\n        border: 1px solid var(--card-border);\r\n        border-radius: 18px;\r\n        background: #fff;\r\n        box-shadow: 0 18px 52px rgba(0, 0, 0, .18), var(--shadow-card);\r\n        padding: 28px 32px;\r\n        display: grid;\r\n        grid-template-columns:minmax(180px, .55fr) minmax(0, 1fr);\r\n        gap: 24px;\r\n        align-items: center; \/* Changed from end to center for better vertical balance *\/\r\n    }\r\n\r\n    .newsletter-title {\r\n        font-size: 20px;\r\n        font-weight: 700;\r\n        color: var(--deep);\r\n        line-height: 1.2;\r\n        margin: 0\r\n    }\r\n\r\n    .newsletter-form {\r\n        display: grid;\r\n        grid-template-columns:minmax(0, 1fr) auto;\r\n        column-gap: 10px;\r\n        row-gap: 12px; \/* Creates breathing room between the description and inputs *\/\r\n    }\r\n\r\n    .newsletter-description {\r\n        grid-column: 1 \/ -1; \/* Forces the description to span entirely across the top of both inputs *\/\r\n        font-size: 14.5px;\r\n        color: var(--ink-soft);\r\n        margin: 0;\r\n    }\r\n\r\n    .newsletter-form input[type=\"email\"] {\r\n        width: 100%;\r\n        height: 52px;\r\n        border: 1.5px solid var(--card-border);\r\n        border-radius: 999px;\r\n        padding: 0 18px;\r\n        font: 600 15px var(--font);\r\n        color: var(--deep);\r\n        outline: none;\r\n        transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);\r\n    }\r\n\r\n    .newsletter-form input[type=\"email\"]::placeholder {\r\n        color: var(--ink-faint)\r\n    }\r\n\r\n    .newsletter-form input[type=\"email\"]:focus {\r\n        border-color: rgba(38, 109, 111, .5);\r\n        box-shadow: 0 0 0 4px rgba(38, 109, 111, .1);\r\n        background: #fff\r\n    }\r\n\r\n    .footer {\r\n        border-top: 1px solid rgba(255, 255, 255, .12);\r\n        padding: 188px 0 36px;\r\n        background-color: var(--deep);\r\n        background-image: url(\"\/info\/wp-content\/uploads\/2026\/07\/homepage-background-footer.png\");\r\n        background-size: cover;\r\n        background-position: center;\r\n        color: #fff;\r\n    }\r\n\r\n    .footer-main {\r\n        display: grid;\r\n        grid-template-columns:minmax(260px, .8fr) minmax(0, 1.2fr);\r\n        gap: 72px;\r\n        align-items: start\r\n    }\r\n\r\n    .footer-brand {\r\n        max-width: 320px\r\n    }\r\n\r\n    .footer-logo {\r\n        display: inline-flex\r\n    }\r\n\r\n    .footer-logo img {\r\n        width: 180px;\r\n        height: auto;\r\n        display: block\r\n    }\r\n\r\n    .footer-socials {\r\n        display: flex;\r\n        gap: 10px;\r\n        margin-top: 28px\r\n    }\r\n\r\n    .footer-socials a {\r\n        width: 44px;\r\n        height: 44px;\r\n        border-radius: 50%;\r\n        border: 0;\r\n        box-sizing: border-box;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: rgba(255, 255, 255, .82) !important;;\r\n        background: rgba(255, 255, 255, .07);\r\n        outline: 0;\r\n        line-height: 0;\r\n        transition: background .45s var(--ease), color .45s var(--ease);\r\n    }\r\n\r\n    .footer-socials a:hover {\r\n        background: var(--social-color);\r\n        color: #fff !important\r\n    }\r\n\r\n    .footer-socials svg {\r\n        width: 18px;\r\n        height: 18px;\r\n        fill: currentColor;\r\n        display: block\r\n    }\r\n\r\n    .footer-links {\r\n        display: grid;\r\n        grid-template-columns:repeat(3, minmax(130px, 1fr));\r\n        gap: 40px 56px;\r\n        justify-self: end;\r\n        width: 100%;\r\n        max-width: 680px\r\n    }\r\n\r\n    .footer-col h3 {\r\n        font-size: 14px;\r\n        line-height: 1.2;\r\n        color: #fff;\r\n        margin-bottom: 18px;\r\n        font-weight: 700;\r\n        letter-spacing: 0;\r\n    }\r\n\r\n    .footer-col ul {\r\n        list-style: none;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 11px\r\n    }\r\n\r\n    .footer-col a {\r\n        font-size: 14px;\r\n        color: rgba(255, 255, 255, .62) !important;\r\n        text-decoration: none !important;\r\n        font-weight: 500 !important;\r\n        transition: color .45s var(--ease)\r\n    }\r\n\r\n    .footer-col a:hover {\r\n        color: #fff !important;\r\n    }\r\n\r\n    .footer-bottom {\r\n        border-top: 1px solid rgba(255, 255, 255, .12);\r\n        margin-top: 64px;\r\n        padding-top: 24px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        gap: 24px;\r\n        flex-wrap: wrap;\r\n        font-size: 13px;\r\n        color: rgba(255, 255, 255, .5);\r\n    }\r\n\r\n    .footer-bottom a {\r\n        color: rgba(255, 255, 255, .66) !important;\r\n        text-decoration: none;\r\n        font-weight: 500 !important;\r\n        transition: color .45s var(--ease)\r\n    }\r\n\r\n    .footer-bottom a:hover {\r\n        color: #fff !important\r\n    }\r\n\r\n    \/* ---------- sticky mobile CTA ---------- *\/\r\n    .mobile-cta {\r\n        display: none;\r\n        position: fixed;\r\n        bottom: 0;\r\n        left: 0;\r\n        right: 0;\r\n        z-index: 90;\r\n        background: var(--paper);\r\n        border-top: 1px solid var(--line);\r\n        padding: 12px 20px;\r\n        padding-bottom: max(12px, env(safe-area-inset-bottom));\r\n    }\r\n\r\n    .mobile-cta .btn {\r\n        width: 100%;\r\n        justify-content: center;\r\n        font-size: 16px;\r\n        padding: 15px 24px\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n        .mobile-cta {\r\n            display: block\r\n        }\r\n\r\n        .pkg-chips.logo-chips {\r\n            display: grid;\r\n            grid-template-columns:repeat(2, minmax(0, 1fr));\r\n            gap: 10px\r\n        }\r\n\r\n        .pkg-chips.logo-chips .logo-chip {\r\n            width: 100%\r\n        }\r\n\r\n        body {\r\n            padding-bottom: 76px\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .hero-anchor .start-dot {\r\n            animation: none;\r\n        }\r\n\r\n        .btn::before {\r\n            transition: none;\r\n        }\r\n    }\r\n\r\n    \/* ============================================================\r\n     RESPONSIVE\r\n     ============================================================ *\/\r\n    @media (max-width: 960px) {\r\n        .deuren-grid, .mensen-grid {\r\n            grid-template-columns:1fr !important;\r\n            gap: 40px\r\n        }\r\n\r\n        .baas-card {\r\n            grid-template-columns:1fr;\r\n            padding: 40px;\r\n            gap: 40px\r\n        }\r\n\r\n        .tier-grid {\r\n            grid-template-columns:1fr;\r\n            max-width: 440px;\r\n            margin: 0 auto\r\n        }\r\n\r\n        .chip-layout {\r\n            grid-template-columns:1fr;\r\n            gap: 24px\r\n        }\r\n\r\n        .chip-wall {\r\n            justify-content: center\r\n        }\r\n\r\n        .chip-info {\r\n            max-width: 640px;\r\n            margin: 0 auto;\r\n            width: 100%\r\n        }\r\n\r\n        .footer-main {\r\n            grid-template-columns:1fr;\r\n            gap: 48px\r\n        }\r\n\r\n        .footer-links {\r\n            justify-self: start;\r\n            max-width: none\r\n        }\r\n\r\n        .newsletter-card {\r\n            grid-template-columns:1fr;\r\n            align-items: start\r\n        }\r\n\r\n        .tier.featured {\r\n            transform: none\r\n        }\r\n\r\n        .tier.featured:hover {\r\n            transform: translateY(-5px)\r\n        }\r\n    }\r\n\r\n    @media (max-width: 820px) {\r\n        .hero {\r\n            grid-template-rows:24px auto 1fr\r\n        }\r\n\r\n        .rail {\r\n            left: 52px;\r\n            transform: translateX(-50%)\r\n        }\r\n\r\n        .rail-tip {\r\n            left: 52px\r\n        }\r\n\r\n        .halte {\r\n            grid-template-columns:64px 1fr;\r\n            padding: 48px 0\r\n        }\r\n\r\n        .halte-dot {\r\n            grid-column: 1;\r\n            grid-row: 1;\r\n            align-self: start;\r\n            margin-top: 4px\r\n        }\r\n\r\n        .halte:nth-child(odd) .halte-copy,\r\n        .halte:nth-child(even) .halte-copy {\r\n            grid-column: 2;\r\n            grid-row: 1;\r\n            text-align: left\r\n        }\r\n\r\n        .halte:nth-child(odd) .halte-copy p {\r\n            margin-left: 0\r\n        }\r\n\r\n        .halte:nth-child(odd) .halte-ui,\r\n        .halte:nth-child(even) .halte-ui {\r\n            grid-column: 2;\r\n            grid-row: 2;\r\n            justify-self: start;\r\n            margin-top: 24px\r\n        }\r\n\r\n        .lijn-track {\r\n            padding: 24px 20px 0\r\n        }\r\n\r\n        .eind-card {\r\n            padding: 36px 24px\r\n        }\r\n\r\n        .app-card {\r\n            width: 100%;\r\n            max-width: 100%\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .footer {\r\n            padding: 208px 0 32px\r\n        }\r\n\r\n        .footer-links {\r\n            grid-template-columns:1fr;\r\n            gap: 28px\r\n        }\r\n\r\n        .newsletter-band .wrap {\r\n            transform: translateY(-42%)\r\n        }\r\n\r\n        .newsletter-card {\r\n            padding: 22px\r\n        }\r\n\r\n        .newsletter-form {\r\n            grid-template-columns:1fr\r\n        }\r\n\r\n        .newsletter-submit {\r\n            width: 100%;\r\n            border-radius: 999px\r\n        }\r\n\r\n        .halte {\r\n            grid-template-columns:42px 1fr;\r\n            padding: 36px 0\r\n        }\r\n\r\n        .halte-dot {\r\n            width: 28px;\r\n            height: 28px;\r\n            font-size: 12px\r\n        }\r\n\r\n        .rail {\r\n            left: 33px\r\n        }\r\n\r\n        .rail-tip {\r\n            left: 33px\r\n        }\r\n\r\n        .lijn-track {\r\n            padding: 16px 12px 0\r\n        }\r\n\r\n        .app-card {\r\n            border-radius: 12px\r\n        }\r\n\r\n        .app-top {\r\n            padding: 10px 14px;\r\n            font-size: 12px\r\n        }\r\n\r\n        .app-body {\r\n            padding: 14px\r\n        }\r\n\r\n        .app-top .crumb {\r\n            display: none\r\n        }\r\n\r\n        .doc-line, .doc-total {\r\n            font-size: 12.5px\r\n        }\r\n\r\n        .doc-head {\r\n            align-items: flex-start;\r\n            flex-direction: column;\r\n            gap: 8px\r\n        }\r\n\r\n        .doc-line {\r\n            grid-template-columns:minmax(0, 1fr) 30px minmax(58px, .42fr) minmax(58px, .42fr);\r\n            gap: 5px;\r\n            padding: 8px\r\n        }\r\n\r\n        .doc-line.head {\r\n            font-size: 8.5px\r\n        }\r\n\r\n        .doc-line .amount {\r\n            font-size: 10.5px\r\n        }\r\n\r\n        .sig-zone {\r\n            align-items: flex-start;\r\n            flex-direction: column\r\n        }\r\n\r\n        .menu-item {\r\n            padding: 8px 10px;\r\n            font-size: 13px\r\n        }\r\n\r\n        .send-row {\r\n            padding: 10px 12px\r\n        }\r\n\r\n        .send-row .t {\r\n            font-size: 12.5px\r\n        }\r\n\r\n        .kpi .v {\r\n            font-size: 15px\r\n        }\r\n\r\n        .kpi {\r\n            padding: 12px\r\n        }\r\n\r\n        .bank-row {\r\n            align-items: flex-start;\r\n            flex-direction: column;\r\n            padding: 12px\r\n        }\r\n\r\n        .bank-row .in {\r\n            font-size: 13px\r\n        }\r\n\r\n        .bank-row .bank-actions {\r\n            width: 100%;\r\n            justify-content: flex-end\r\n        }\r\n\r\n        .flow .node {\r\n            padding: 10px\r\n        }\r\n\r\n        .flow .node .ti {\r\n            font-size: 11px\r\n        }\r\n\r\n        .pkg-chips i {\r\n            font-size: 10px;\r\n            padding: 4px 10px\r\n        }\r\n\r\n        .halte-copy h3 {\r\n            font-size: 20px\r\n        }\r\n\r\n        .halte-copy p {\r\n            font-size: 14.5px\r\n        }\r\n\r\n        .mini-bars {\r\n            height: 40px\r\n        }\r\n\r\n        .wrap {\r\n            padding: 0 14px\r\n        }\r\n\r\n        .hero h1 {\r\n            font-size: 34px\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        *, *::before, *::after {\r\n            animation-duration: .001s !important;\r\n            animation-delay: 0s !important;\r\n            transition-duration: .001s !important\r\n        }\r\n\r\n        html {\r\n            scroll-behavior: auto\r\n        }\r\n\r\n        .halte-ui, .halte-copy, .reveal-up {\r\n            opacity: 1;\r\n            transform: none\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<nav class=\"nav\" id=\"nav\">\r\n    <div class=\"nav-inner\">\r\n        <a class=\"logo\" href=\"\/info\">\r\n            <img decoding=\"async\"\r\n                class=\"logo-img logo-light\"\r\n                src=\"https:\/\/eenvoudigfactureren.be\/info\/wp-content\/themes\/EenvoudigFactureren\/images\/logo-400.png\"\r\n                alt=\"Eenvoudig Factureren\"\r\n            >\r\n            <img decoding=\"async\"\r\n                class=\"logo-img logo-dark\"\r\n                src=\"https:\/\/eenvoudigfactureren.be\/info\/wp-content\/uploads\/2021\/09\/Logo-EenvoudigFactureren-Transp.png\"\r\n                alt=\"Eenvoudig Factureren\"\r\n            >\r\n        <\/a>\r\n        <div class=\"nav-links\">\r\n            <a href=\"\/info\/#functionaliteiten\">Functionaliteiten<\/a>\r\n            <div class=\"nav-dd\">\r\n                <a href=\"\/info\/#voor-wie\">Voor wie<\/a>\r\n                <div class=\"nav-dd-menu\">\r\n                    <ul>\r\n                        <li><a href=\"\/info\/#voor-wie\">Starters<\/a><\/li>\r\n                        <li><a href=\"\/info\/#voor-wie\">Overstappers<\/a><\/li>\r\n                        <li><a href=\"\/info\/#voor-wie\">Boekhouders<\/a><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n            <a href=\"\/info\/#prijzen\">Prijzen<\/a>\r\n            <a href=\"https:\/\/help.eenvoudigfactureren.be\/support\/home\">Kennisbank<\/a>\r\n        <\/div>\r\n        <div class=\"nav-cta\">\r\n            <a class=\"login\" href=\"\/login\">Aanmelden<\/a>\r\n            <a class=\"btn btn-ghost\" href=\"\/login\/register\">Start gratis<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/nav>\r\n\r\n<!-- ================= HERO ================= -->\r\n<header class=\"hero dotgrid\">\r\n    <div class=\"wrap\">\r\n        <div class=\"eyebrow reveal-up d1\">Administratie voor Belgische ondernemers<\/div>\r\n        <h1 class=\"reveal-up d2\">Je administratie<br>regelt <span class=\"hl\">zichzelf<\/span>.<\/h1>\r\n        <p class=\"sub reveal-up d3\">\r\n            Offertes, facturen, opvolging, boekhouder: van A tot Z geregeld in een tool die je in tien minuten snapt. En als je toch vastloopt, bel je gewoon.\r\n        <\/p>\r\n        <div class=\"hero-cta reveal-up d4\">\r\n            <a class=\"btn btn-primary\" href=\"\/login\/register\">Start gratis <span class=\"arr\">&rarr;<\/span><\/a>\r\n            <a class=\"btn btn-ghost\" href=\"\/info\/#werking\">Bekijk hoe het werkt<\/a>\r\n        <\/div>\r\n        <div class=\"hero-proof reveal-up d5\">\r\n            <span><b id=\"proofCount\">27.000+<\/b>&nbsp;ondernemers gingen je voor<\/span>\r\n            <span class=\"dot\"><\/span>\r\n            <span>Gratis beginnen<\/span>\r\n            <span class=\"dot\"><\/span>\r\n            <span>Peppol inbegrepen<\/span>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"hero-anchor reveal-up d6\">\r\n        <div class=\"start-line\"><\/div>\r\n        <div class=\"start-dot\"><\/div>\r\n    <\/div>\r\n<\/header>\r\n\r\n<section class=\"lijn-head\" id=\"werking\">\r\n    <div class=\"wrap\">\r\n        <div class=\"eyebrow\">Zo werkt het<\/div>\r\n        <h2>Van offerte tot geld op je rekening.<\/h2>\r\n        <p class=\"sub\">Je stuurt een offerte, je krijgt je geld. Alles ertussen doet Eenvoudig Factureren.<\/p>\r\n    <\/div>\r\n<\/section>\r\n\r\n<section class=\"lijn\">\r\n    <div class=\"lijn-track\" id=\"lijnTrack\">\r\n        <div class=\"rail\" id=\"rail\">\r\n            <div class=\"rail-progress\" id=\"railProgress\"><\/div>\r\n        <\/div>\r\n        <div class=\"rail-tip\" id=\"railTip\"><\/div>\r\n\r\n        <!-- HALTE 1 -->\r\n        <div class=\"halte\">\r\n            <div class=\"halte-copy\">\r\n                <h3>Je klant zegt ja<\/h3>\r\n                <p>\r\n                    Hij tekent je offerte gewoon online. Je hoeft niets te printen of te scannen, en je stuurt nooit je offerte opnieuw omdat iemand hem niet meer vindt.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"halte-dot\">1<\/div>\r\n            <div class=\"halte-ui\">\r\n                <div class=\"app-card\">\r\n                    <div class=\"app-top\">\r\n                        <div class=\"plus\">1<\/div>\r\n                        Offerte <span class=\"crumb\">offerte 2026-0002<\/span>\r\n                    <\/div>\r\n                    <div class=\"app-body\">\r\n                        <div class=\"doc-head\">\r\n                            <div>\r\n                                <div class=\"t\">Offerte voor Bakkerij Peeters<\/div>\r\n                                <div class=\"m\">13 mei 2026 \u00b7 geldig 30 dagen<\/div>\r\n                            <\/div>\r\n                            <span class=\"badge badge-signed sig-stamp\" title=\"Ondertekend\">Ondertekend<\/span>\r\n                        <\/div>\r\n                        <div class=\"doc-lines\">\r\n                            <div class=\"doc-line head\">\r\n                                <span>Omschrijving<\/span>\r\n                                <span>Aantal<\/span>\r\n                                <span>Prijs<\/span>\r\n                                <span>Totaal<\/span>\r\n                            <\/div>\r\n                            <div class=\"doc-line\">\r\n                                <span class=\"description\">Websiteproject, fase 1<\/span>\r\n                                <span>1<\/span>\r\n                                <span class=\"amount\">&euro; 950,00<\/span>\r\n                                <span class=\"amount\">&euro; 950,00<\/span>\r\n                            <\/div>\r\n                            <div class=\"doc-line\">\r\n                                <span class=\"description\">Onderhoud, 3 maanden<\/span>\r\n                                <span>1<\/span>\r\n                                <span class=\"amount\">&euro; 200,00<\/span>\r\n                                <span class=\"amount\">&euro; 200,00<\/span>\r\n                            <\/div>\r\n                            <div class=\"doc-line doc-total\">\r\n                                <span class=\"summary-spacer\"><\/span>\r\n                                <span class=\"summary-name\">Subtotaal<\/span>\r\n                                <span class=\"summary-value\">&euro; 1.150,00<\/span>\r\n                            <\/div>\r\n                            <div class=\"doc-line doc-total\">\r\n                                <span class=\"summary-spacer\"><\/span>\r\n                                <span class=\"summary-name\">Btw 21%<\/span>\r\n                                <span class=\"summary-value\">&euro; 241,50<\/span>\r\n                            <\/div>\r\n                            <div class=\"doc-line doc-total\">\r\n                                <span class=\"summary-spacer\"><\/span>\r\n                                <span class=\"summary-name grand\">Totaal te betalen<\/span>\r\n                                <span class=\"summary-value grand\">&euro; 1.391,50<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"sig-zone\">\r\n                            <div>\r\n                                <div class=\"lbl\">Handtekening klant<\/div>\r\n                                <div class=\"meta\">Bakkerij Peeters \u00b7 11 jun 2026 \u00b7 14:32<\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <svg class=\"sig-svg\" viewBox=\"0 0 130 46\">\r\n                                    <path d=\"M6 34 C 14 8, 22 8, 26 26 C 29 38, 34 36, 40 22 C 46 9, 50 12, 53 24 C 56 34, 62 32, 70 24 C 78 16, 84 18, 90 26 C 95 32, 102 30, 110 22 L 124 28\"\/>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- HALTE 2 -->\r\n        <div class=\"halte\">\r\n            <div class=\"halte-copy\">\r\n                <h3>Je factuur staat klaar<\/h3>\r\n                <p>De offerte wordt de factuur. Nummer, klant, bedragen, btw: alles staat er al, zonder iets over te tikken.<\/p>\r\n            <\/div>\r\n            <div class=\"halte-dot\">2<\/div>\r\n            <div class=\"halte-ui\">\r\n                <div class=\"app-card menu-card\">\r\n                    <div class=\"app-top\">\r\n                        <div class=\"plus\">2<\/div>\r\n                        Acties <span class=\"crumb\">offerte 2026-0002<\/span>\r\n                    <\/div>\r\n                    <div class=\"menu-list\">\r\n                        <div class=\"menu-item\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\r\n                                <path d=\"M14 2v6h6\"\/>\r\n                            <\/svg>\r\n                            Openen\r\n                        <\/div>\r\n                        <div class=\"menu-item\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                <path d=\"M12 20h9\"\/>\r\n                                <path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z\"\/>\r\n                            <\/svg>\r\n                            Bijwerken\r\n                        <\/div>\r\n                        <div class=\"menu-item\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                <path d=\"M22 2 11 13\"\/>\r\n                                <path d=\"M22 2 15 22l-4-9-9-4z\"\/>\r\n                            <\/svg>\r\n                            Verzenden\r\n                        <\/div>\r\n                        <div class=\"menu-item\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                <path d=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.3a2 2 0 0 0 2-1.7l1.4-9a2 2 0 0 0-2-2.3z\"\/>\r\n                                <path d=\"M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\/>\r\n                            <\/svg>\r\n                            Accepteren\r\n                        <\/div>\r\n                        <div class=\"menu-sep\"><\/div>\r\n                        <div class=\"menu-item hot\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.4\">\r\n                                <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\r\n                                <path d=\"M14 2v6h6\"\/>\r\n                                <path d=\"M9 14h6M9 18h4\"\/>\r\n                            <\/svg>\r\n                            Factuur maken\r\n                            <svg class=\"cursor\" viewBox=\"0 0 24 24\">\r\n                                <path fill=\"#1A4F51\" stroke=\"#fff\" stroke-width=\"1.6\" d=\"M5 3l7 16 2.2-6.2L20.5 11z\"\/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"spawn\">\r\n                        <div class=\"l\">Factuur 2026-0043 aangemaakt<\/div>\r\n                        <span class=\"badge badge-open\">Klaar<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- HALTE 3 -->\r\n        <div class=\"halte\">\r\n            <div class=\"halte-copy\">\r\n                <h3>Meteen bij je klant<\/h3>\r\n                <p>Verzonden via Peppol, met een QR-code en betaallink recht op de factuur. Je klant scant, betaalt, klaar.<\/p>\r\n            <\/div>\r\n            <div class=\"halte-dot\">3<\/div>\r\n            <div class=\"halte-ui\">\r\n                <div class=\"app-card\">\r\n                    <div class=\"app-top\">\r\n                        <div class=\"plus\">3<\/div>\r\n                        Verzenden <span class=\"crumb\">factuur 2026-0043<\/span>\r\n                    <\/div>\r\n                    <div class=\"app-body\">\r\n                        <div class=\"send-rows\">\r\n                            <div class=\"send-row\">\r\n                                <div class=\"ic\">\r\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                        <path d=\"M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z\"\/>\r\n                                    <\/svg>\r\n                                <\/div>\r\n                                <div class=\"t\">Peppol<span>klant is geregistreerd, e-factuur gegarandeerd afgeleverd<\/span><\/div>\r\n                                <div class=\"check\">\r\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                        <path d=\"M20 6L9 17l-5-5\"\/>\r\n                                    <\/svg>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"send-row\">\r\n                                <div class=\"ic\">\r\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                        <path d=\"M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\"\/>\r\n                                        <path d=\"m22 6-10 7L2 6\"\/>\r\n                                    <\/svg>\r\n                                <\/div>\r\n                                <div class=\"t\">E-mail met pdf<span>kopie naar je klant, met jouw briefpapier<\/span><\/div>\r\n                                <div class=\"check\">\r\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                        <path d=\"M20 6L9 17l-5-5\"\/>\r\n                                    <\/svg>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"qr-strip\">\r\n                            <div class=\"qr\">\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                                <i class=\"off\"><\/i>\r\n                                <i><\/i>\r\n                                <i><\/i>\r\n                            <\/div>\r\n                            <div class=\"t\">\r\n                                <b>QR-code en betaallink op de factuur.<\/b> Je klant scant en betaalt meteen, juiste mededeling incluis.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- HALTE 4 -->\r\n        <div class=\"halte\">\r\n            <div class=\"halte-copy\">\r\n                <h3>Je belt niemand na<\/h3>\r\n                <p>\r\n                    Vervaldag voorbij? De herinnering vertrekt vanzelf. Vriendelijk, op tijd, en zonder dat jij het ongemakkelijke telefoontje moet doen.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"halte-dot\">4<\/div>\r\n            <div class=\"halte-ui\">\r\n                <div class=\"app-card\">\r\n                    <div class=\"app-top\">\r\n                        <div class=\"plus\">4<\/div>\r\n                        Opvolging <span class=\"crumb\">factuur 2026-0043<\/span>\r\n                    <\/div>\r\n                    <div class=\"app-body\">\r\n                        <div class=\"tl\">\r\n                            <div class=\"tl-item done\">\r\n                                <div class=\"nd\"><\/div>\r\n                                <div class=\"t\">Verzonden <span>11 jun<\/span><\/div>\r\n                                <div class=\"s\">Via Peppol en e-mail<\/div>\r\n                            <\/div>\r\n                            <div class=\"tl-item done\">\r\n                                <div class=\"nd\"><\/div>\r\n                                <div class=\"t\">Vervaldag <span>25 jun<\/span><\/div>\r\n                                <div class=\"s\">Nog niet betaald<\/div>\r\n                            <\/div>\r\n                            <div class=\"tl-item done auto\">\r\n                                <div class=\"nd\"><\/div>\r\n                                <div class=\"t\">Herinnering verstuurd <span>28 jun<\/span><span class=\"pill-auto\">automatisch<\/span><\/div>\r\n                                <div class=\"s\">Vriendelijke eerste herinnering, jouw toon<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"auto-toggle\">\r\n                            <div class=\"t\">Automatische herinneringen<\/div>\r\n                            <div class=\"toggle\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- HALTE 5 -->\r\n        <div class=\"halte\">\r\n            <div class=\"halte-copy\">\r\n                <h3>Je geld komt binnen<\/h3>\r\n                <p>\r\n                    Je bankkoppeling herkent de betaling en hangt ze aan de juiste factuur. Status: betaald, zonder dat je er iets voor moet doen.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"halte-dot\">5<\/div>\r\n            <div class=\"halte-ui\">\r\n                <div class=\"app-card\">\r\n                    <div class=\"app-top\">\r\n                        <div class=\"plus\">5<\/div>\r\n                        Bank <span class=\"crumb\">nieuwe verrichting<\/span>\r\n                    <\/div>\r\n                    <div class=\"app-body\">\r\n                        <div class=\"bank-row\">\r\n                            <div class=\"bank-main\">\r\n                                <div class=\"bank-summary\">\r\n                                    <span class=\"in\">&euro; 250,00<\/span>\r\n                                    <span class=\"badge badge-pending mb-0\">Te verwerken<\/span>\r\n                                    <span class=\"to-allocate\">Nog te koppelen: &euro; 204,07<\/span>\r\n                                <\/div>\r\n                                <div class=\"bank-counterpart\">\r\n                                    <span class=\"who\">Bakkerij Peeters<\/span>\r\n                                    <span class=\"account\">BE42 0012 3456 7890<\/span>\r\n                                <\/div>\r\n                                <div class=\"match-line\">\r\n                                    <span class=\"match-result\">\r\n                                        <span class=\"allocation-label\">Toegewezen aan:<\/span>\r\n                                        <span class=\"fact-chip\">Factuur 2026-0043<\/span>\r\n                                    <\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"bank-actions\">\r\n                                <button class=\"bank-btn\" type=\"button\" aria-label=\"Bekijk bankverrichting\">\r\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n                                        <path d=\"M2.5 12s3.4-6 9.5-6 9.5 6 9.5 6-3.4 6-9.5 6-9.5-6-9.5-6Z\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                                        <path d=\"M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                                    <\/svg>\r\n                                <\/button>\r\n                                <button class=\"bank-btn\" type=\"button\">Acties<\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"status-flip\">\r\n                            <div class=\"t\">Factuur 2026-0043<\/div>\r\n                            <div class=\"flip-stage\">\r\n                                <span class=\"badge badge-open front\">Openstaand<\/span>\r\n                                <span class=\"badge badge-paid back\">Betaald<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- HALTE 6 -->\r\n        <div class=\"halte\">\r\n            <div class=\"halte-copy\">\r\n                <h3>Je boekhouder heeft alles<\/h3>\r\n                <p>\r\n                    Elke factuur gaat automatisch door naar het pakket van je boekhouder. Geen mapje &ldquo;voor de boekhouder&rdquo;, geen kwartaalstress.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"halte-dot\">6<\/div>\r\n            <div class=\"halte-ui\">\r\n                <div class=\"app-card\">\r\n                    <div class=\"app-top\">\r\n                        <div class=\"plus\">6<\/div>\r\n                        Boekhoudkoppeling <span class=\"crumb\">automatisch<\/span>\r\n                    <\/div>\r\n                    <div class=\"app-body\">\r\n                        <div class=\"flow\">\r\n                            <div class=\"node\">\r\n                                <div class=\"ti\">Jouw facturen<\/div>\r\n                                <div class=\"su\">EenvoudigFactureren<\/div>\r\n                            <\/div>\r\n                            <div class=\"flow-arrow\">\r\n                                <div class=\"flow-pulse\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"node\">\r\n                                <div class=\"ti\">Je boekhouder<\/div>\r\n                                <div class=\"su\">zijn eigen pakket<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"pkg-chips\">\r\n                            <i>Codabox<\/i>\r\n                            <i>Clearfacts<\/i>\r\n                            <i>Octopus<\/i>\r\n                            <i>Yuki<\/i>\r\n                            <i>Exact Online<\/i>\r\n\t\t\t\t\t\t\t<i>Odoo<\/i>\r\n                            <i>Mailbox<\/i>\r\n                        <\/div>\r\n                        <div class=\"delivered\">\r\n                            <div class=\"ok\">\r\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                    <path d=\"M20 6L9 17l-5-5\"\/>\r\n                                <\/svg>\r\n                            <\/div>\r\n                            42 documenten aangeleverd dit kwartaal\r\n                            <span class=\"tm\">laatst: vandaag 09:12<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- HALTE 7 -->\r\n        <div class=\"halte\">\r\n            <div class=\"halte-copy\">\r\n                <h3>Je weet waar je geld zit<\/h3>\r\n                <p>\r\n                    Wat openstaat, wat te laat is, wat er binnenkwam. E&eacute;n overzicht dat altijd klopt, zonder dat je iets moet bijhouden.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"halte-dot\">7<\/div>\r\n            <div class=\"halte-ui\">\r\n                <div class=\"app-card\">\r\n                    <div class=\"app-top\">\r\n                        <div class=\"plus\">7<\/div>\r\n                        Huidige situatie <span class=\"crumb\">rapporten<\/span>\r\n                    <\/div>\r\n                    <div class=\"app-body\">\r\n                        <div class=\"kpi-grid\">\r\n                            <div class=\"kpi kpi-deep\">\r\n                                <div class=\"v\">&euro; 23.529,66<\/div>\r\n                                <div class=\"l\">Openstaand bedrag<\/div>\r\n                            <\/div>\r\n                            <div class=\"kpi kpi-plain kpi-late\">\r\n                                <div class=\"v\">&euro; 3.766,73<\/div>\r\n                                <div class=\"l\">Achterstallig<\/div>\r\n                            <\/div>\r\n                            <div class=\"kpi kpi-mist\">\r\n                                <div class=\"v\">&euro; 17.083,00<\/div>\r\n                                <div class=\"l\">Omzet deze maand<\/div>\r\n                            <\/div>\r\n                            <div class=\"kpi kpi-plain\">\r\n                                <div class=\"v\">&euro; 1.150,00<\/div>\r\n                                <div class=\"l\">Openstaande offertes<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"mini-bars\">\r\n                            <i style=\"--h:88%\"><\/i>\r\n                            <i style=\"--h:62%\"><\/i>\r\n                            <i style=\"--h:48%\"><\/i>\r\n                            <i style=\"--h:50%\"><\/i>\r\n                            <i style=\"--h:84%\"><\/i>\r\n                            <i class=\"hot\" style=\"--h:68%\"><\/i>\r\n                            <i style=\"--h:8%\"><\/i>\r\n                            <i style=\"--h:8%\"><\/i>\r\n                            <i style=\"--h:8%\"><\/i>\r\n                            <i style=\"--h:8%\"><\/i>\r\n                            <i style=\"--h:8%\"><\/i>\r\n                            <i style=\"--h:8%\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"mini-bars-cap\">\r\n                            <span>jan<\/span>\r\n                            <span>jun<\/span>\r\n                            <span>dec<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- eindstation -->\r\n    <div class=\"eind\">\r\n        <div class=\"eind-dot\"><\/div>\r\n        <div class=\"wrap\">\r\n            <div class=\"eind-card\">\r\n                <h3>Loop je ergens vast, dan bel je ons gewoon.<\/h3>\r\n                <p>\r\n                    Je begint gratis en op je eigen tempo. Loop je vast, dan helpen we je. Niet via een ticket dat drie weken blijft liggen, maar gewoon aan de telefoon.\r\n                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<section class=\"deuren dotgrid-soft\" id=\"voor-wie\">\r\n    <div class=\"wrap\">\r\n        <div class=\"deuren-head\">\r\n            <div class=\"eyebrow\">Voor wie<\/div>\r\n            <h2>Voor alle ondernemers.<\/h2>\r\n        <\/div>\r\n        <div class=\"deuren-grid\" style=\"grid-template-columns:1fr 1fr 1fr\">\r\n            <a class=\"deur\" href=\"\/login\/register\">\r\n                <div class=\"deur-accent\"><\/div>\r\n                <div class=\"tag\">Ik start net<\/div>\r\n                <h3>Je eerste factuur, zonder stress de deur uit.<\/h3>\r\n                <ul>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Begeleide opstart, in een paar minuten geregeld\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Gratis beginnen, upgraden wanneer jij groeit\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Peppol meteen in orde, zonder dat je weet wat het is\r\n                    <\/li>\r\n                <\/ul>\r\n                <span class=\"go\">Start gratis <span class=\"arr\">&rarr;<\/span><\/span>\r\n            <\/a>\r\n            <a class=\"deur\" href=\"\/login\/register\">\r\n                <div class=\"deur-accent\"><\/div>\r\n                <div class=\"tag\">Ik stap over<\/div>\r\n                <h3>Overstappen zonder alles opnieuw te doen.<\/h3>\r\n                <ul>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Je gegevens komen mee, niets opnieuw invoeren\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Een mens begeleidt je overstap van begin tot einde\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        E\u00e9n heldere prijs, geen verrassingen na jaar 1\r\n                    <\/li>\r\n                <\/ul>\r\n                <span class=\"go\">Plan je overstap <span class=\"arr\">&rarr;<\/span><\/span>\r\n            <\/a>\r\n            <a\r\n                class=\"deur\"\r\n                href=\"\/info\/boekhoudersaccount-aanvragen\/\"\r\n                style=\"background:var(--deep);border-color:var(--deep)\"\r\n            >\r\n                <div class=\"deur-accent\" style=\"background:var(--orange)\"><\/div>\r\n                <div class=\"tag\" style=\"color:var(--orange)\">Ik ben boekhouder<\/div>\r\n                <h3 style=\"color:#fff\">Gratis portaal. Al je klantdossiers op &eacute;&eacute;n plek.<\/h3>\r\n                <ul>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" style=\"stroke:var(--orange)\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        <span style=\"color:rgba(255,255,255,.82)\">Correcte facturen, klaar voor de boekhouding<\/span>\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" style=\"stroke:var(--orange)\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        <span style=\"color:rgba(255,255,255,.82)\">Koppelt met CodaBox, Octopus, Yuki, Exact en meer<\/span>\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" style=\"stroke:var(--orange)\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        <span style=\"color:rgba(255,255,255,.82)\">Volg mee, geef advies, alles op &eacute;&eacute;n plek<\/span>\r\n                    <\/li>\r\n                <\/ul>\r\n                <span class=\"go\" style=\"color:#fff\">Vraag je gratis portaal aan <span class=\"arr\">&rarr;<\/span><\/span>\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- ================= DE MENSEN ================= -->\r\n<section class=\"mensen\" id=\"mensen\">\r\n    <div class=\"wrap\">\r\n        <div class=\"mensen-grid\" style=\"grid-template-columns:1fr 1fr\">\r\n            <div>\r\n                <div class=\"eyebrow\">Support<\/div>\r\n                <h2>Een mens aan de lijn. Geen bot.<\/h2>\r\n                <p class=\"lead\">\r\n                    Bij andere tools krijg je een chatbot. Bij ons krijg je Arman of Thibault aan de lijn.\r\n                    Ze kennen de tool, ze kennen je situatie, en ze lossen het op.\r\n                <\/p>\r\n                <div class=\"contact-card\">\r\n                    <div class=\"row\">\r\n                        <div class=\"ic\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/>\r\n                                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <div>\r\n                            <div class=\"t\">Stap 1<\/div>\r\n                            <div class=\"v\">Kennisbank<\/div>\r\n                            <div class=\"t\">Artikelen en video&#8217;s die je zelf door de meeste vragen helpen.<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        <div class=\"ic\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <div>\r\n                            <div class=\"t\">Stap 2<\/div>\r\n                            <div class=\"v\">Chat<\/div>\r\n                            <div class=\"t\">Snel antwoord nodig? Start een chat met Foxy, en krijg binnen een paar seconden reactie.<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        <div class=\"ic\">\r\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                                <path d=\"M22 16.92v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.6 2z\"\/>\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <div>\r\n                            <div class=\"t\">Stap 3<\/div>\r\n                            <div class=\"v\">Persoonlijk contact<\/div>\r\n                            <div class=\"t\">Iets complexer? Mail ons of wij bellen jou. Op een moment dat het jou past.<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"team-strip\" style=\"margin-top:36px;gap:32px\">\r\n                    <div style=\"display:flex;align-items:center;gap:14px\">\r\n                        <div class=\"face photo\" style=\"width:56px;height:56px;font-size:13px\" title=\"Foto Arman\">\r\n                            <img\r\n                                decoding=\"async\"\r\n                                src=\"\/info\/wp-content\/uploads\/2026\/07\/arman-margaryan.png\"\r\n                                alt=\"Arman Margaryan\"\r\n                                style=\"width:56px;\"\r\n                            >\r\n                        <\/div>\r\n                        <div>\r\n                            <div style=\"font-size:15px;font-weight:700;color:#fff\">Arman<\/div>\r\n                            <div style=\"font-size:13px;color:rgba(255,255,255,.6)\">Account Manager<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div style=\"display:flex;align-items:center;gap:14px\">\r\n                        <div class=\"face photo\" style=\"width:56px;height:56px;font-size:13px\" title=\"Foto Thibault\">\r\n                            <img\r\n                                decoding=\"async\"\r\n                                src=\"\/info\/wp-content\/uploads\/2025\/08\/Thibault.png\"\r\n                                alt=\"Thibault Janseghers\" style=\"width:56px;\"\r\n                            >\r\n                        <\/div>\r\n                        <div>\r\n                            <div style=\"font-size:15px;font-weight:700;color:#fff\">Thibault<\/div>\r\n                            <div style=\"font-size:13px;color:rgba(255,255,255,.6)\">Customer Support<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div>\r\n                <div style=\"display:flex;align-items:center;gap:14px;margin-bottom:20px\">\r\n                    <svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" style=\"flex-shrink:0\">\r\n                        <path\r\n                            fill=\"#4285F4\"\r\n                            d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\r\n                        \/>\r\n                        <path\r\n                            fill=\"#34A853\"\r\n                            d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\r\n                        \/>\r\n                        <path\r\n                            fill=\"#FBBC05\"\r\n                            d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\r\n                        \/>\r\n                        <path\r\n                            fill=\"#EA4335\"\r\n                            d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\r\n                        \/>\r\n                    <\/svg>\r\n                    <div>\r\n                        <div style=\"display:flex;align-items:center;gap:6px\">\r\n                            <span style=\"font-family:var(--mono);font-weight:700;font-size:18px;color:#fff\">5.0<\/span>\r\n                            <span style=\"display:flex;gap:2px\">\r\n                                <i class=\"rv-star\"><\/i>\r\n                                <i class=\"rv-star\"><\/i>\r\n                                <i class=\"rv-star\"><\/i>\r\n                                <i class=\"rv-star\"><\/i>\r\n                                <i class=\"rv-star\"><\/i>\r\n                            <\/span>\r\n                        <\/div>\r\n                        <div style=\"font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px\">op Google Reviews<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"review-controls\" aria-label=\"Reviews navigeren\">\r\n                    <button class=\"review-nav\" type=\"button\" data-review-dir=\"up\" aria-label=\"Vorige reviews\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                            <path d=\"M18 15l-6-6-6 6\"\/>\r\n                        <\/svg>\r\n                    <\/button>\r\n                    <button class=\"review-nav\" type=\"button\" data-review-dir=\"down\" aria-label=\"Volgende reviews\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                            <path d=\"M6 9l6 6 6-6\"\/>\r\n                        <\/svg>\r\n                    <\/button>\r\n                <\/div>\r\n                <div class=\"review-scroll\">\r\n                    <div class=\"review-track\">\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">E<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Ephraim Ongar<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Ervaring met Thibault Janseghers: deskundig, vriendelijk, geduldig.<br\/>Aangename ervaring.\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">Y<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Yari Devos<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Enorm tevreden over het totaalplaatje. Van de snelle reactie op de mail tot een\r\n                                behulpzame, effici\u00ebnte en duidelijke uitleg via een videogesprek met Thibault. Super\r\n                                tevreden en kan het alleen maar aanbevelen!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">I<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Inge Lanneau<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Dankzij Thibault, zijn we al helemaal klaar voor Peppol. Ik kreeg steeds snelle reacties\r\n                                op al mijn mails. We zijn heel tevreden dat we voor Eenvoudig Facturen hebben gekozen\r\n                                als Peppol Access Point. Heel erg bedankt Thibault, you rock!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">T<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Tom Callens<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Eenvoudig Facturen maakt zijn naam meer dan waar. De software is bijzonder\r\n                                gebruiksvriendelijk, waardoor je snel en zonder gedoe professionele facturen en offertes\r\n                                opstelt. Ook de Peppol-koppeling werkt vlekkeloos \u2013 zelfs zonder technische kennis kun\r\n                                je direct veilig en effici\u00ebnt facturen versturen.<br\/><br\/>Daarnaast wil ik de\r\n                                klantvriendelijke en persoonlijke service extra benadrukken. Het team reageert snel en\r\n                                is bereid om mee te denken. Arman verdient in het bijzonder een compliment voor zijn\r\n                                geduld, betrokkenheid en duidelijke uitleg. Dankzij hem voelt elke ondersteuning\r\n                                persoonlijk en op maat gemaakt.<br\/><br\/>Kortom: een absolute aanrader voor iedereen die\r\n                                een betrouwbaar, simpel en professioneel facturatiesysteem zoekt!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">M<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Mirko Van Colen<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Werkt voortreffelijk. De integraties zijn krachtig en toch simpel. En de support is de\r\n                                beste die ik al in lange tijd heb ervaren. Heel wat anders dan Billit (die precies nooit\r\n                                tijd hadden). Extra kudos naar Arman. Vriendelijk, kennis van zaken en snelle\r\n                                response.\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">L<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Lisa Spijkers<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Eerste contact met klantenservice kan enkel per mail maar dit staat dan ook volledig op\r\n                                punt! Diezelfde dag werd ik door 2 vakmensen verder geholpen per mail en werd ik\r\n                                nogmaals opgebeld om deze zaken verder te bespreken. Ook is de tool zeer\r\n                                gebruiksvriendelijk en zijn er veel connecties met andere tools mogelijk. Helemaal\r\n                                fan!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">L<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Lucas 3381<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Prima geholpen. Binnen de kortste keren mijn Peppol configuratie in orde. Nu kunnen we de\r\n                                toekomst ontvangen.\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">F<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Friet Enzo Dusty Maaseik<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Super tevreden over de simpele werking van het programma en de dienstverlening.<br\/>Ik\r\n                                raad het iedereen aan.<br\/>Mvg Pluscatering\r\n                            <\/p>\r\n                        <\/div>\r\n                        <!-- duplicaat voor oneindige scroll -->\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">E<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Ephraim Ongar<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Ervaring met Thibault Janseghers: deskundig, vriendelijk, geduldig.<br\/>Aangename\r\n                                ervaring.\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">Y<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Yari Devos<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Enorm tevreden over het totaalplaatje. Van de snelle reactie op de mail tot een\r\n                                behulpzame, effici\u00ebnte en duidelijke uitleg via een videogesprek met Thibault. Super\r\n                                tevreden en kan het alleen maar aanbevelen!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">I<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Inge Lanneau<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Dankzij Thibault, zijn we al helemaal klaar voor Peppol. Ik kreeg steeds snelle reacties\r\n                                op al mijn mails. We zijn heel tevreden dat we voor Eenvoudig Facturen hebben gekozen\r\n                                als Peppol Access Point. Heel erg bedankt Thibault, you rock!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">T<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Tom Callens<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Eenvoudig Facturen maakt zijn naam meer dan waar. De software is bijzonder\r\n                                gebruiksvriendelijk, waardoor je snel en zonder gedoe professionele facturen en offertes\r\n                                opstelt. Ook de Peppol-koppeling werkt vlekkeloos \u2013 zelfs zonder technische kennis kun\r\n                                je direct veilig en effici\u00ebnt facturen versturen.<br\/><br\/>Daarnaast wil ik de\r\n                                klantvriendelijke en persoonlijke service extra benadrukken. Het team reageert snel en\r\n                                is bereid om mee te denken. Arman verdient in het bijzonder een compliment voor zijn\r\n                                geduld, betrokkenheid en duidelijke uitleg. Dankzij hem voelt elke ondersteuning\r\n                                persoonlijk en op maat gemaakt.<br\/><br\/>Kortom: een absolute aanrader voor iedereen die\r\n                                een betrouwbaar, simpel en professioneel facturatiesysteem zoekt!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">M<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Mirko Van Colen<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Werkt voortreffelijk. De integraties zijn krachtig en toch simpel. En de support is de\r\n                                beste die ik al in lange tijd heb ervaren. Heel wat anders dan Billit (die precies nooit\r\n                                tijd hadden). Extra kudos naar Arman. Vriendelijk, kennis van zaken en snelle\r\n                                response.\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">L<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Lisa Spijkers<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Eerste contact met klantenservice kan enkel per mail maar dit staat dan ook volledig op\r\n                                punt! Diezelfde dag werd ik door 2 vakmensen verder geholpen per mail en werd ik\r\n                                nogmaals opgebeld om deze zaken verder te bespreken. Ook is de tool zeer\r\n                                gebruiksvriendelijk en zijn er veel connecties met andere tools mogelijk. Helemaal\r\n                                fan!\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">L<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Lucas 3381<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Prima geholpen. Binnen de kortste keren mijn Peppol configuratie in orde. Nu kunnen we de toekomst ontvangen.\r\n                            <\/p>\r\n                        <\/div>\r\n                        <div class=\"rv\">\r\n                            <div class=\"rv-head\">\r\n                                <div class=\"rv-avatar\">F<\/div>\r\n                                <div>\r\n                                    <div class=\"rv-name\">Friet Enzo Dusty Maaseik<\/div>\r\n                                    <div class=\"rv-meta\">Google Review<\/div>\r\n                                <\/div>\r\n                                <div class=\"rv-stars\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n                            <\/div>\r\n                            <p>\r\n                                Super tevreden over de simpele werking van het programma en de dienstverlening.<br\/>Ik\r\n                                raad het iedereen aan.<br\/>Mvg Pluscatering\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- ================= JIJ BLIJFT BAAS ================= -->\r\n<section class=\"baas\">\r\n    <div class=\"wrap\">\r\n        <div class=\"baas-card\">\r\n            <div>\r\n                <div class=\"eyebrow\">Verbind met gemak<\/div>\r\n                <h2>De brug tussen ondernemer en boekhouder.<\/h2>\r\n                <p>\r\n                    EF is geen boekhoudpakket en wil het ook niet zijn. Jij factureert in iets dat je snapt, je\r\n                    boekhouder krijgt alles automatisch binnen in het pakket dat hij al gebruikt.\r\n                <\/p>\r\n            <\/div>\r\n            <div class=\"baas-visual\">\r\n                <div class=\"peek\">\r\n                    <div class=\"hd\">Doorgestuurd naar je boekhouder <span class=\"badge badge-open\">automatisch<\/span>\r\n                    <\/div>\r\n                    <div class=\"peek-inner\">\r\n                        <div class=\"rw\">\r\n                            <span>Factuur 2026-0043 \u00b7 Bakkerij Peeters<\/span><span class=\"amount\">&euro; 1.391,50<\/span>\r\n                        <\/div>\r\n                        <div class=\"rw\">\r\n                            <span>Factuur 2026-0042 \u00b7 Vandenberghe Interiors<\/span><span class=\"amount\">&euro; 1.815,00<\/span>\r\n                        <\/div>\r\n                        <div class=\"rw\">\r\n                            <span>Aankoop IM 2026\/06 \u00b7 Janssens BV<\/span><span class=\"amount\">&euro; 262,15<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"peek-eye\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\r\n                        <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/>\r\n                        <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                    <\/svg>\r\n                    je boekhouder kijkt mee\r\n                <\/div>\r\n            <\/div>\r\n            <div>\r\n                <p class=\"chip-label\">Boekhoudkoppelingen<\/p>\r\n                <div class=\"pkg-chips logo-chips\">\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/Codabox.svg\" alt=\"CodaBox\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/ClearFacts.svg\" alt=\"ClearFacts\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/octopus-logo.webp\" alt=\"Octopus\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/02\/large-yuki.png\" alt=\"Yuki\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/Exact.png\" alt=\"Exact Online\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/Billtobox-logo.svg\" alt=\"Billtobox\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/WinBooks.png\" alt=\"WinBooks\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/wolters-kluwer-logo-scaled.png\" alt=\"Wolters Kluwer\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/06\/odoo_logo.png\" alt=\"Odoo\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip text-center\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/mailbox.png\" alt=\"Mailbox boekhouding\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip text-center\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/api-groen.png\" alt=\"API\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip text-center\"><b>Jouw koppeling?<\/b><\/span>\r\n                <\/div>\r\n                <p class=\"chip-label chip-label-gap\">Banken<\/p>\r\n                <div class=\"pkg-chips logo-chips\">\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/KBC-e1783352196618.png\" alt=\"KBC\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/Fortis.jpg\" alt=\"BNP Paribas Fortis\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/Belfius.png\" alt=\"Belfius\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2022\/07\/ING.webp\" alt=\"ING\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/Argenta-logo.webp\" alt=\"Argenta\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/Crelan-logo-scaled.png\" alt=\"Crelan\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip text-center\"><b>+ 90<\/b><\/span>\r\n                <\/div>\r\n                <p class=\"chip-label chip-label-gap\">Webshop &amp; tools<\/p>\r\n                <div class=\"pkg-chips logo-chips\">\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/Woo_logo_color.svg\" alt=\"WooCommerce\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2019\/01\/mollie2.png\" alt=\"Mollie\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/shopify_logo_whitebg.svg\" alt=\"Shopify\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/pom-logo.svg\" alt=\"POM\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/bancontact-pay-logo.png\" alt=\"Bancontact Pay\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/Unpaid-logo-scaled.png\" alt=\"Unpaid\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2023\/03\/collectonline.jpg\" alt=\"CollectOnline\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/Dropbox-logo-scaled.png\" alt=\"Dropbox\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/Google-Drive-Logo.png\" alt=\"Google Drive\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2023\/05\/make-logo.png\" alt=\"Make\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/bpost-logo.jpg\" alt=\"BPost\">\r\n                    <\/span>\r\n                    <span class=\"logo-chip text-center\">\r\n                        <img decoding=\"async\" src=\"\/info\/wp-content\/uploads\/2026\/07\/api-groen.png\" alt=\"API\">\r\n                    <\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- ================= BOUWSTENEN ================= -->\r\n<section class=\"blokken dotgrid-soft\" id=\"functionaliteiten\">\r\n    <div class=\"wrap\">\r\n        <div class=\"blokken-head\">\r\n            <div class=\"eyebrow\">Het hele platform<\/div>\r\n            <h2>Groeit je zaak, dan groeien wij gewoon mee.<\/h2>\r\n            <p class=\"sub\">Alles zit erin: van voorraad tot vorderingsstaten. Maar <b>niets staat in de weg tot jij het aanzet.<\/b><\/p>\r\n        <\/div>\r\n        <div class=\"chip-layout\">\r\n            <div class=\"chip-wall\" id=\"chipWall\" role=\"radiogroup\" aria-label=\"Platformfunctionaliteiten\">\r\n                <button\r\n                    class=\"mchip on\"\r\n                    data-d=\"Ontvang en beheer aankoopfacturen en bonnetjes via Peppol, per e-mail of door ze zelf handmatig op te laden.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/aankopen.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Aankopen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Aanmaken, verzenden en opvolgen. Ook creditnota's en pro-forma's.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/facturen.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Facturen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Met online handtekening. Je klant tekent op zijn telefoon, jij ziet het meteen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/offertes.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Offertes\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Verplicht sinds 2026, bij ons gewoon inbegrepen. Verzenden &eacute;n ontvangen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/peppol.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Peppol\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Je bank gekoppeld: betalingen worden herkend en automatisch aan facturen gehangen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/bankkoppeling.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Bankkoppeling\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Vriendelijk, automatisch, op jouw toon. Jij kiest wanneer en hoe vaak.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/automatische-herinneringen.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Automatische herinneringen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Terugkerende facturen die zichzelf aanmaken en verzenden. Met jaarlijkse indexatie.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/abonnementen.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Abonnementen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Projecten met taken, inschattingen, tijd en kosten. En dan: factuur in &eacute;&eacute;n klik.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/projecten.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Projecten &amp; tijd\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Je artikelen met voorraad, categorie&euml;n en prijzen per klant. Importeren uit Excel kan.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/voorraad.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Voorraad &amp; artikelen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Aanmaken, versturen en opvolgen van bestelbonnen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/bestelbonnen.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Bestelbonnen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Aanmaken en versturen van leveringsbonnen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/leveringsbonnen.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Leveringsbonnen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\" data-d=\"Voor in de winkel of op de markt. Zo gefixt.\"\r\n                    data-off=\"Voor als je ooit een kassa nodig hebt.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/kasticketten.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Kasticketten\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Stuur een betaallink zonder factuur. Handig voor voorschotten of snelle verkopen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/betaalverzoeken.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Betaalverzoeken\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Voorschotten toevoegen aan offertes of bestelbonnen. Aanmaken van een voorschotfactuur en slotfactuur. Activeer deze module in combinatie met module Offertes en\/of Bestelbonnen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/voorschotten.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Voorschotten\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Klanten een offerte, bestelbon, factuur, enz. online laten ondertekenen voor goedkeuring.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/online-handtekening.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Online handtekening\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"De standaard betalingstermijn, geldigheidsperiode, korting, gestructureerde mededeling, layout, taal of munteenheid voor een klant instellen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/klant-specifiek.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Klant specifieke instellingen\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Voor de bouw: vorderingsstaten, voorschotfacturen en de 6% btw-verklaring bij renovatie.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/bouw.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Bouw: vorderingen &amp; 6% btw\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Laat klanten automatisch betalen via domicili&euml;ring. Ideaal bij abonnementen.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/sepa.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>SEPA-domicili&euml;ring\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Je kunt probleemloos self-billing facturen via Peppol versturen met behulp van onze module Vrij document, waarmee je volledig zelf de inhoud van het document bepaalt.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/selfbilling.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Selfbilling\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Facturen in het Frans, Engels of Duits. Vreemde valuta met automatische wisselkoers.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/talen-en-valuta.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Talen &amp; valuta\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Jouw briefpapier, jouw lay-out, jouw kleuren op elk document.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/eigen-briefpapier.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Eigen briefpapier\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Koppel je webshop, je bank, je boekhouder of bouw zelf met de API en Make.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/webshop.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Webshop &amp; API\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Handige rapporten om een overzicht over uw omzet te behouden.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/rapporten.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>Rapporten\r\n                <\/button>\r\n                <button\r\n                    class=\"mchip\"\r\n                    data-d=\"Ontdek nog meer modules en slimme uitbreidingen om je administratie verder te automatiseren en af te stemmen op jouw onderneming.\"\r\n                    data-shot=\"\/info\/wp-content\/uploads\/2026\/07\/meer.png\"\r\n                >\r\n                    <span class=\"led\"><\/span>En meer\r\n                <\/button>\r\n            <\/div>\r\n            <div class=\"chip-info\">\r\n                <div class=\"inner\" id=\"chipInfo\">\r\n                    <div class=\"chip-shot\">Screenshot placeholder<\/div>\r\n                    <span id=\"chipTxt\"><b>Facturen<\/b><br\/>Aanmaken, verzenden en opvolgen. Ook creditnota&#8217;s en pro-forma&#8217;s.<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- ================= PRIJZEN ================= -->\r\n<section class=\"prijzen\" id=\"prijzen\">\r\n    <div class=\"wrap\">\r\n        <div class=\"prijzen-head\">\r\n            <div class=\"eyebrow\">Prijzen<\/div>\r\n            <h2>Gewoon &eacute;&eacute;n heldere prijs.<br>De eerste 30 dagen gratis.<\/h2>\r\n        <\/div>\r\n        <div class=\"tier-grid\">\r\n            <div class=\"tier\">\r\n                <div class=\"nm\">Peppol Inbox<\/div>\r\n                <div class=\"pr\"><span class=\"v\">&euro; 4,49<\/span><span class=\"p\">per maand<\/span><\/div>\r\n                <ul>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        5 facturen per maand\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Klaar voor Peppol\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Connectie met je boekhouder\r\n                    <\/li>\r\n                <\/ul>\r\n                <a class=\"btn btn-ghost\" href=\"\/login\/register\">Start gratis<\/a>\r\n            <\/div>\r\n            <div class=\"tier featured\">\r\n                <div class=\"fbadge\">Meest gekozen<\/div>\r\n                <div class=\"nm\">Pro<\/div>\r\n                <div class=\"pr\"><span class=\"v\">&euro; 9,99<\/span><span class=\"p\">per maand<\/span><\/div>\r\n                <ul>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        60 facturen per maand\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Alle facturatieopties, 5 gebruikers\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Alle koppelingen, ook je bank\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Automatische herinneringen\r\n                    <\/li>\r\n                <\/ul>\r\n                <a class=\"btn btn-light\" href=\"\/login\/register\">Start gratis<\/a>\r\n            <\/div>\r\n            <div class=\"tier\">\r\n                <div class=\"nm\">Team<\/div>\r\n                <div class=\"pr\"><span class=\"v\">&euro; 23,99<\/span><span class=\"p\">per maand<\/span><\/div>\r\n                <ul>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        200 facturen per maand\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        10 gebruikers\r\n                    <\/li>\r\n                    <li>\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <path d=\"M20 6L9 17l-5-5\"\/>\r\n                        <\/svg>\r\n                        Alle facturatieopties en koppelingen\r\n                    <\/li>\r\n                <\/ul>\r\n                <a class=\"btn btn-ghost\" href=\"\/login\/register\">Start gratis<\/a>\r\n            <\/div>\r\n        <\/div>\r\n        <p class=\"prijzen-foot\">\r\n            Abonnementen per jaar, prijzen excl. btw. <b>Eerste 30 dagen gratis proberen,<\/b> geen creditcard nodig.\r\n        <\/p>\r\n        <div class=\"blokken-foot\">\r\n            <a href=\"\/info\/help\/pakketten\/\">Ontdek al onze prijzen <span class=\"arr\">&rarr;<\/span><\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- ================= SLOT-CTA ================= -->\r\n<section class=\"slot dotgrid-soft\">\r\n    <div class=\"wrap\">\r\n        <div class=\"eyebrow\">Klaar?<\/div>\r\n        <h2>Begin vandaag en je administratie regelt zichzelf.<\/h2>\r\n        <p class=\"sub\">In een paar minuten opgezet. En een mens aan de lijn als je vastloopt.<\/p>\r\n        <div class=\"hero-cta\">\r\n            <a class=\"btn btn-primary\" href=\"\/login\/register\">Start gratis <span class=\"arr\">&rarr;<\/span><\/a>\r\n        <\/div>\r\n        <p class=\"micro\">27.000+ ondernemers gingen je voor \u00b7 Peppol inbegrepen<\/p>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- ================= NIEUWSLETTER ================= -->\r\n<section class=\"newsletter-band\">\r\n    <div class=\"wrap\">\r\n        <div class=\"newsletter-card\">\r\n            <div>\r\n                <p class=\"newsletter-title\">Blijf op de hoogte!<\/p>\r\n                <p class=\"newsletter-description\">Schrijf je in voor onze nieuwsbrief en mis niets.<\/p>\r\n            <\/div>\r\n            <form class=\"newsletter-form\" action=\"#\" method=\"post\">\r\n                <input type=\"email\" name=\"EMAIL\" placeholder=\"Jouw e-mailadres\" required>\r\n                <input type=\"submit\" value=\"Inschrijven\" class=\"btn btn-primary\" aria-label=\"Inschrijven\">\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- sticky mobile CTA -->\r\n<div class=\"mobile-cta\">\r\n    <a class=\"btn btn-primary\" href=\"\/login\/register\">Start gratis <span class=\"arr\">&rarr;<\/span><\/a>\r\n<\/div>\r\n\r\n<div class=\"shot-modal\" id=\"shotModal\" aria-hidden=\"true\">\r\n    <button class=\"shot-close\" type=\"button\" aria-label=\"Sluit screenshot\">&times;<\/button>\r\n    <img decoding=\"async\" src=\"\" alt=\"\">\r\n<\/div>\r\n\r\n<script>(function () {\r\n        let reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n        \/* nav wisselt na hero *\/\r\n        let nav = document.getElementById('nav');\r\n        let hero = document.querySelector('.hero');\r\n\r\n        function updateNav() {\r\n            if (!nav) return;\r\n            nav.classList.toggle('scrolled', (window.scrollY || window.pageYOffset) > 2);\r\n        }\r\n\r\n        window.addEventListener('scroll', updateNav, {passive: true});\r\n        window.addEventListener('resize', updateNav);\r\n        updateNav();\r\n\r\n        function updateDeliveredTime() {\r\n            let now = new Date();\r\n            let time = now.toLocaleTimeString('nl-BE', {\r\n                hour: '2-digit',\r\n                minute: '2-digit',\r\n                hour12: false\r\n            });\r\n\r\n            document.querySelectorAll('.delivered .tm').forEach(function (item) {\r\n                item.textContent = 'laatst: vandaag ' + time;\r\n            });\r\n        }\r\n\r\n        updateDeliveredTime();\r\n\r\n        \/* lijn: progress + tip + haltes oplichten *\/\r\n        let track = document.getElementById('lijnTrack');\r\n        let progress = document.getElementById('railProgress');\r\n        let tip = document.getElementById('railTip');\r\n        let haltes = Array.prototype.slice.call(track.querySelectorAll('.halte'));\r\n        let ticking = false;\r\n\r\n        function updateHaltes(rect, prog) {\r\n            haltes.forEach(function (h) {\r\n                let dot = h.querySelector('.halte-dot');\r\n                let dTop = dot.getBoundingClientRect().top - rect.top + dot.offsetHeight \/ 2;\r\n                h.classList.toggle('lit', prog >= dTop);\r\n            });\r\n        }\r\n\r\n        function update() {\r\n            ticking = false;\r\n            let rect = track.getBoundingClientRect();\r\n            let vh = window.innerHeight;\r\n            let anchor = vh * 0.55;\r\n            let total = rect.height;\r\n            let prog = Math.min(Math.max(anchor - rect.top, 0), total);\r\n            progress.style.height = prog + 'px';\r\n            tip.style.top = prog + 'px';\r\n            tip.style.opacity = (prog > 4 && prog < total - 4) ? 1 : 0;\r\n            updateHaltes(rect, prog);\r\n        }\r\n\r\n        function onScroll() {\r\n            if (!ticking) {\r\n                ticking = true;\r\n                requestAnimationFrame(update);\r\n            }\r\n        }\r\n\r\n        window.addEventListener('scroll', onScroll, {passive: true});\r\n        window.addEventListener('resize', onScroll);\r\n        update();\r\n\r\n        \/* haltes: reveal + micro-animaties bij in beeld komen *\/\r\n        if ('IntersectionObserver' in window && !reduced) {\r\n            let io = new IntersectionObserver(function (entries) {\r\n                entries.forEach(function (e) {\r\n                    if (e.isIntersecting) {\r\n                        e.target.classList.add('seen');\r\n                        io.unobserve(e.target);\r\n                    }\r\n                });\r\n            }, {threshold: .32});\r\n            haltes.forEach(function (h) {\r\n                io.observe(h);\r\n            });\r\n        } else {\r\n            haltes.forEach(function (h) {\r\n                h.classList.add('seen');\r\n            });\r\n        }\r\n        \/* reviews: handmatige navigatie *\/\r\n        let reviewScroll = document.querySelector('.review-scroll');\r\n        let reviewControls = document.querySelectorAll('[data-review-dir]');\r\n        if (reviewScroll && reviewControls.length) {\r\n            let reviewItems = Array.prototype.slice.call(reviewScroll.querySelectorAll('.rv')).filter(function (item) {\r\n                return window.getComputedStyle(item).display !== 'none';\r\n            });\r\n\r\n            function scrollReview(dir) {\r\n                if (!reviewItems.length) return;\r\n                let isHorizontal = window.innerWidth <= 960;\r\n\r\n                if (isHorizontal) {\r\n                    \/\/ Get the width of exactly one card + the 16px gap\r\n                    let cardWidth = reviewItems[0].offsetWidth;\r\n                    let jumpAmount = cardWidth + 16;\r\n\r\n                    \/\/ Move exactly one card left or right\r\n                    let targetLeft = reviewScroll.scrollLeft + (dir > 0 ? jumpAmount : -jumpAmount);\r\n\r\n                    reviewScroll.scrollTo({left: targetLeft, behavior: reduced ? 'auto' : 'smooth'});\r\n                } else {\r\n                    \/\/ Vertical logic (keep this exactly as you had it)\r\n                    let viewport = reviewScroll.getBoundingClientRect();\r\n                    let fadePad = 52;\r\n                    let targetTop = null;\r\n\r\n                    if (dir > 0) {\r\n                        reviewItems.some(function (item) {\r\n                            let rect = item.getBoundingClientRect();\r\n                            if (rect.top <= viewport.top + 2) return false;\r\n                            if (rect.bottom > viewport.bottom + 2) {\r\n                                targetTop = reviewScroll.scrollTop + rect.bottom - viewport.bottom + fadePad;\r\n                                return true;\r\n                            }\r\n                            if (rect.top > viewport.bottom - 2) {\r\n                                targetTop = reviewScroll.scrollTop + rect.top - viewport.top - fadePad;\r\n                                return true;\r\n                            }\r\n                            return false;\r\n                        });\r\n                    } else {\r\n                        for (let i = reviewItems.length - 1; i >= 0; i--) {\r\n                            let rect = reviewItems[i].getBoundingClientRect();\r\n                            if (rect.top < viewport.top - 2) {\r\n                                targetTop = reviewScroll.scrollTop + rect.top - viewport.top - fadePad;\r\n                                break;\r\n                            }\r\n                        }\r\n                    }\r\n                    if (targetTop !== null) {\r\n                        targetTop = Math.max(0, Math.min(targetTop, reviewScroll.scrollHeight - reviewScroll.clientHeight));\r\n                        reviewScroll.scrollTo({top: targetTop, behavior: reduced ? 'auto' : 'smooth'});\r\n                    }\r\n                }\r\n            }\r\n\r\n            function updateReviewButtons() {\r\n                let isHorizontal = window.innerWidth <= 960;\r\n\r\n                if (isHorizontal) {\r\n                    let activeItem = reviewItems[0];\r\n                    let activeIndex = 0; \/\/ NEW: keep track of the index\r\n                    let scrollRect = reviewScroll.getBoundingClientRect();\r\n                    let scrollCenter = scrollRect.left + (scrollRect.width \/ 2);\r\n\r\n                    \/\/ Find which card is closest to the center of the container\r\n                    reviewItems.forEach(function (item, index) {\r\n                        let rect = item.getBoundingClientRect();\r\n                        let itemCenter = rect.left + (rect.width \/ 2);\r\n                        \/\/ If the center of the item is within the center of our view\r\n                        if (Math.abs(itemCenter - scrollCenter) < (rect.width \/ 2)) {\r\n                            activeItem = item;\r\n                            activeIndex = index; \/\/ Save the index of the active card\r\n                        }\r\n                    });\r\n\r\n                    \/\/ 1. Apply Dynamic Height\r\n                    if (activeItem) {\r\n                        reviewScroll.style.height = (activeItem.offsetHeight + 24) + 'px';\r\n                    }\r\n\r\n                    \/\/ 2. Disable buttons based on index (foolproof for snap sliders)\r\n                    reviewControls.forEach(function (btn) {\r\n                        let isPrev = btn.getAttribute('data-review-dir') === 'up';\r\n                        \/\/ Disable Previous if on the first card (0), Disable Next if on the last card\r\n                        btn.disabled = isPrev ? activeIndex === 0 : activeIndex === reviewItems.length - 1;\r\n                    });\r\n\r\n                } else {\r\n                    \/\/ Reset height to let CSS handle desktop vertical layout\r\n                    reviewScroll.style.height = '';\r\n\r\n                    \/\/ Desktop vertical pixel math logic (unchanged)\r\n                    let maxTop = reviewScroll.scrollHeight - reviewScroll.clientHeight - 2;\r\n                    reviewScroll.classList.toggle('has-top-fade', reviewScroll.scrollTop > 2);\r\n                    reviewScroll.classList.toggle('at-bottom', reviewScroll.scrollTop >= maxTop);\r\n                    reviewControls.forEach(function (btn) {\r\n                        let up = btn.getAttribute('data-review-dir') === 'up';\r\n                        btn.disabled = up ? reviewScroll.scrollTop <= 2 : reviewScroll.scrollTop >= maxTop;\r\n                    });\r\n                }\r\n            }\r\n\r\n            reviewControls.forEach(function (btn) {\r\n                btn.addEventListener('click', function () {\r\n                    let dir = btn.getAttribute('data-review-dir') === 'up' ? -1 : 1;\r\n                    scrollReview(dir);\r\n                });\r\n            });\r\n            reviewScroll.addEventListener('scroll', updateReviewButtons, {passive: true});\r\n            window.addEventListener('resize', updateReviewButtons);\r\n            updateReviewButtons();\r\n        }\r\n\r\n        \/* bouwstenen: radioselectie + infobalk *\/\r\n        let wall = document.getElementById('chipWall');\r\n        if (wall) {\r\n            let info = document.getElementById('chipInfo');\r\n            let infoTxt = document.getElementById('chipTxt');\r\n            let infoShot = info.querySelector('.chip-shot');\r\n            let chips = Array.prototype.slice.call(wall.querySelectorAll('.mchip'));\r\n            let shotModal = document.getElementById('shotModal');\r\n            let shotModalImg = shotModal ? shotModal.querySelector('img') : null;\r\n            let shotModalClose = shotModal ? shotModal.querySelector('.shot-close') : null;\r\n\r\n            function setChipInfo(chip) {\r\n                let name = chip.textContent.trim();\r\n                let shotUrl = chip.getAttribute('data-shot');\r\n                infoShot.innerHTML = shotUrl ? '<img decoding=\"async\" src=\"' + shotUrl + '\" alt=\"' + name + ' screenshot\">' : 'Screenshot placeholder';\r\n                infoTxt.innerHTML = '<b>' + name + '<\/b><br\/>' + chip.getAttribute('data-d');\r\n            }\r\n\r\n            function openShotModal(img) {\r\n                if (!shotModal || !shotModalImg) return;\r\n                shotModalImg.src = img.src;\r\n                shotModalImg.alt = img.alt;\r\n                shotModal.classList.add('open');\r\n                shotModal.setAttribute('aria-hidden', 'false');\r\n            }\r\n\r\n            function closeShotModal() {\r\n                if (!shotModal || !shotModalImg) return;\r\n                shotModal.classList.remove('open');\r\n                shotModal.setAttribute('aria-hidden', 'true');\r\n            }\r\n\r\n            chips.forEach(function (chip) {\r\n                chip.setAttribute('role', 'radio');\r\n                chip.setAttribute('aria-checked', chip.classList.contains('on') ? 'true' : 'false');\r\n            });\r\n            setChipInfo(wall.querySelector('.mchip.on') || chips[0]);\r\n            setTimeout(function () {\r\n                info.classList.add('show');\r\n            }, 600);\r\n            wall.addEventListener('click', function (ev) {\r\n                let chip = ev.target.closest('.mchip');\r\n                if (!chip) return;\r\n                chips.forEach(function (item) {\r\n                    item.classList.toggle('on', item === chip);\r\n                    item.setAttribute('aria-checked', item === chip ? 'true' : 'false');\r\n                });\r\n                chip.classList.remove('pop');\r\n                void chip.offsetWidth;\r\n                chip.classList.add('pop');\r\n                info.classList.remove('show');\r\n                setTimeout(function () {\r\n                    setChipInfo(chip);\r\n                    info.classList.add('show');\r\n                }, 180);\r\n            });\r\n\r\n            infoShot.addEventListener('click', function (ev) {\r\n                let img = ev.target.closest('img');\r\n                if (!img) return;\r\n                openShotModal(img);\r\n            });\r\n\r\n            if (shotModal && shotModalClose) {\r\n                shotModalClose.addEventListener('click', closeShotModal);\r\n                shotModal.addEventListener('click', function (ev) {\r\n                    if (ev.target === shotModal) closeShotModal();\r\n                });\r\n                document.addEventListener('keydown', function (ev) {\r\n                    if (ev.key === 'Escape' && shotModal.classList.contains('open')) closeShotModal();\r\n                });\r\n            }\r\n        }\r\n    })();<\/script>\r\n","protected":false},"excerpt":{"rendered":"Functionaliteiten Voor wie Starters Overstappers Boekhouders Prijzen Kennisbank Aanmelden Start gratis Administratie voor Belgische ondernemers Je administratieregelt zichzelf. Offertes, facturen, opvolging, boekhouder: van A tot Z geregeld in een tool die je in tien minuten snapt. En als je toch vastloopt, bel je gewoon. Start gratis &rarr; Bekijk hoe het werkt 27.000+&nbsp;ondernemers gingen je voor &hellip; <a href=\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/\" class=\"more-link\">Lees verder<span class=\"screen-reader-text\"> &#8220;frontpage-3&#8221;<\/span><\/a>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-9856","page","type-page","status-publish","hentry","no-wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>frontpage-3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/\" \/>\n<meta property=\"og:locale\" content=\"nl_BE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"frontpage-3\" \/>\n<meta property=\"og:description\" content=\"Functionaliteiten Voor wie Starters Overstappers Boekhouders Prijzen Kennisbank Aanmelden Start gratis Administratie voor Belgische ondernemers Je administratieregelt zichzelf. Offertes, facturen, opvolging, boekhouder: van A tot Z geregeld in een tool die je in tien minuten snapt. En als je toch vastloopt, bel je gewoon. Start gratis &rarr; Bekijk hoe het werkt 27.000+&nbsp;ondernemers gingen je voor &hellip; Lees verder &quot;frontpage-3&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/\" \/>\n<meta property=\"og:site_name\" content=\"EenvoudigFactureren\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-15T22:54:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eenvoudigfactureren.be\/info\/wp-content\/uploads\/2021\/09\/Logo-EenvoudigFactureren.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"222\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"16 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/\",\"url\":\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/\",\"name\":\"frontpage-3\",\"isPartOf\":{\"@id\":\"https:\/\/eenvoudigfactureren.be\/info\/#website\"},\"datePublished\":\"2026-06-30T16:18:53+00:00\",\"dateModified\":\"2026-07-15T22:54:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/#breadcrumb\"},\"inLanguage\":\"nl-BE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eenvoudigfactureren.be\/info\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"frontpage-3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eenvoudigfactureren.be\/info\/#website\",\"url\":\"https:\/\/eenvoudigfactureren.be\/info\/\",\"name\":\"EenvoudigFactureren\",\"description\":\"Online facturatie\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eenvoudigfactureren.be\/info\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-BE\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"frontpage-3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/","og_locale":"nl_BE","og_type":"article","og_title":"frontpage-3","og_description":"Functionaliteiten Voor wie Starters Overstappers Boekhouders Prijzen Kennisbank Aanmelden Start gratis Administratie voor Belgische ondernemers Je administratieregelt zichzelf. Offertes, facturen, opvolging, boekhouder: van A tot Z geregeld in een tool die je in tien minuten snapt. En als je toch vastloopt, bel je gewoon. Start gratis &rarr; Bekijk hoe het werkt 27.000+&nbsp;ondernemers gingen je voor &hellip; Lees verder \"frontpage-3\"","og_url":"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/","og_site_name":"EenvoudigFactureren","article_modified_time":"2026-07-15T22:54:32+00:00","og_image":[{"width":500,"height":222,"url":"https:\/\/eenvoudigfactureren.be\/info\/wp-content\/uploads\/2021\/09\/Logo-EenvoudigFactureren.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"16 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/","url":"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/","name":"frontpage-3","isPartOf":{"@id":"https:\/\/eenvoudigfactureren.be\/info\/#website"},"datePublished":"2026-06-30T16:18:53+00:00","dateModified":"2026-07-15T22:54:32+00:00","breadcrumb":{"@id":"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/#breadcrumb"},"inLanguage":"nl-BE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eenvoudigfactureren.be\/info\/frontpage-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eenvoudigfactureren.be\/info\/"},{"@type":"ListItem","position":2,"name":"frontpage-3"}]},{"@type":"WebSite","@id":"https:\/\/eenvoudigfactureren.be\/info\/#website","url":"https:\/\/eenvoudigfactureren.be\/info\/","name":"EenvoudigFactureren","description":"Online facturatie","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eenvoudigfactureren.be\/info\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-BE"}]}},"_links":{"self":[{"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/pages\/9856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/comments?post=9856"}],"version-history":[{"count":66,"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/pages\/9856\/revisions"}],"predecessor-version":[{"id":10008,"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/pages\/9856\/revisions\/10008"}],"wp:attachment":[{"href":"https:\/\/eenvoudigfactureren.be\/info\/wp-json\/wp\/v2\/media?parent=9856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}