{"id":14,"date":"2026-04-23T14:07:37","date_gmt":"2026-04-23T14:07:37","guid":{"rendered":"https:\/\/securedossier.nl\/?page_id=14"},"modified":"2026-05-01T11:13:42","modified_gmt":"2026-05-01T11:13:42","slug":"homepage-v2","status":"publish","type":"page","link":"https:\/\/securedossier.nl\/","title":{"rendered":"Homepage"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<nav id=\"main-nav\">\n  <div class=\"nav-inner\">\n    <a href=\"#\" class=\"nav-logo\">\n      <div class=\"nav-logo-icon\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l6 2.67V11c0 3.75-2.54 7.26-6 8.4C8.54 18.26 6 14.75 6 11V7.67L12 5z\"><\/path><\/svg>\n      <\/div>\n      Secure<span style=\"color:var(--amber)\">Dossier<\/span>\n    <\/a>\n    <ul class=\"nav-links\">\n      <li><a href=\"#features\" data-lang=\"nl\">Functies<\/a><a href=\"#features\" data-lang=\"en\">Features<\/a><\/li>\n      <li><a href=\"#security\" data-lang=\"nl\">Beveiliging<\/a><a href=\"#security\" data-lang=\"en\">Security<\/a><\/li>\n      <li><a href=\"#netherlands\" data-lang=\"nl\">Data in NL<\/a><a href=\"#netherlands\" data-lang=\"en\">Data in NL<\/a><\/li>\n      <li><a href=\"#roles\" data-lang=\"nl\">Rollen<\/a><a href=\"#roles\" data-lang=\"en\">Roles<\/a><\/li>\n      <li><a href=\"#faq\" data-lang=\"nl\">FAQ<\/a><a href=\"#faq\" data-lang=\"en\">FAQ<\/a><\/li>\n    <\/ul>\n    <div class=\"nav-right\">\n      <div class=\"lang-toggle\">\n        <button class=\"lang-btn active\" id=\"btn-nl\">NL<\/button>\n        <button class=\"lang-btn\" id=\"btn-en\">EN<\/button>\n      <\/div>\n      <a href=\"https:\/\/cloudadviesdemos.zohobookings.eu\/#\/198147000001404254\" target=\"_blank\" class=\"btn\" style=\"padding:10px 20px;font-size:14px;\" data-lang=\"nl\">Demo aanvragen<\/a>\n      <a href=\"https:\/\/cloudadviesdemos.zohobookings.eu\/#\/198147000001404254\" target=\"_blank\" class=\"btn\" style=\"padding:10px 20px;font-size:14px;\" data-lang=\"en\">Request demo<\/a>\n    <\/div>\n  <\/div>\n<\/nav>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"hero\">\n  <div class=\"hero-bg\"><\/div>\n  <div class=\"hero-grid\"><\/div>\n  <div class=\"container\">\n    <div class=\"hero-inner\">\n      <div>\n        <div class=\"badge\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:12px;height:12px;fill:currentColor\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"><\/path><\/svg>\n          <span data-lang=\"nl\">Veilig. Nederlands. Uw eigendom.<\/span>\n          <span data-lang=\"en\">Secure. Dutch. Your property.<\/span>\n        <\/div>\n        <h1 data-lang=\"nl\">Uw Dossier,<br><em>uw eigendom!<\/em><\/h1>\n        <h1 data-lang=\"en\">Your Dossier,<br><em>your property!<\/em><\/h1>\n        <p class=\"hero-sub\" data-lang=\"nl\">De veilige, digitale omgeving voor al uw dossiers \u2014 opgeslagen in Nederland, volledig AVG-compliant en altijd onder uw eigen beheer.<\/p>\n        <p class=\"hero-sub\" data-lang=\"en\">The secure digital environment for all your dossiers \u2014 stored in the Netherlands, fully GDPR-compliant and always under your own control.<\/p>\n        <div class=\"hero-ctas\">\n          <a href=\"https:\/\/cloudadviesdemos.zohobookings.eu\/#\/198147000001404254\" target=\"_blank\" class=\"btn btn-amber\" data-lang=\"nl\">\n            <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;fill:#fff\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"><\/path><\/svg>\n            Gratis demo afspraak plannen\n          <\/a>\n          <a href=\"https:\/\/cloudadviesdemos.zohobookings.eu\/#\/198147000001404254\" target=\"_blank\" class=\"btn btn-amber\" data-lang=\"en\">\n            <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;fill:#fff\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"><\/path><\/svg>\n            Schedule a free demo\n          <\/a>\n          <a href=\"#features\" class=\"btn btn-outline\" data-lang=\"nl\">Meer ontdekken<\/a>\n          <a href=\"#features\" class=\"btn btn-outline\" data-lang=\"en\">Learn more<\/a>\n        <\/div>\n        <div class=\"hero-trust\">\n          <span class=\"trust-dot\"><\/span>\n          <span data-lang=\"nl\">Alle data opgeslagen in Nederland \u00b7 AVG-compliant \u00b7 ISO-27001<\/span>\n          <span data-lang=\"en\">All data stored in the Netherlands \u00b7 GDPR-compliant \u00b7 ISO-27001<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"hero-visual\">\n        <div class=\"hero-card\">\n          <div class=\"hero-card-header\">\n            <div class=\"hero-card-icon\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M20 6h-2.18c.07-.44.18-.88.18-1.34 0-2.58-2.09-4.66-4.67-4.66-1.6 0-3.07.8-3.98 2.08L8 3.64l-1.35-1.56C5.73 1.4 4.26.6 2.67.6 .08.6-2 2.68-2 5.26c0 .46.11.9.18 1.34H-2v14h22V6zm-7.33-4c1.48 0 2.67 1.19 2.67 2.66 0 .38-.08.73-.2 1.07-.01.03-.03.05-.04.08H8.9c-.01-.03-.03-.06-.04-.08-.12-.34-.2-.7-.2-1.07C8.66 3.19 9.85 2 11.33 2zM2.67 2.6c1.48 0 2.67 1.19 2.67 2.66 0 .38-.08.73-.2 1.08L5.1 6.4H2V6.4H0c-.12-.35-.2-.7-.2-1.07C-.2 3.79.99 2.6 2.47 2.6h.2zM18 18H2V8h16v10z\"><\/path><\/svg>\n            <\/div>\n            <div>\n              <div class=\"hero-card-title\" data-lang=\"nl\">Mijn Dossiers<\/div>\n              <div class=\"hero-card-title\" data-lang=\"en\">My Dossiers<\/div>\n              <div class=\"hero-card-sub\" data-lang=\"nl\">3 actieve dossiers<\/div>\n              <div class=\"hero-card-sub\" data-lang=\"en\">3 active dossiers<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"dossier-item\">\n            <div class=\"dossier-item-icon di-blue\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z\"><\/path><\/svg>\n            <\/div>\n            <div class=\"dossier-item-text\">\n              <div class=\"dossier-item-name\" data-lang=\"nl\">Jaarrekening 2025<\/div>\n              <div class=\"dossier-item-name\" data-lang=\"en\">Annual Report 2025<\/div>\n              <div class=\"dossier-item-meta\" data-lang=\"nl\">Bijgewerkt 2 uur geleden<\/div>\n              <div class=\"dossier-item-meta\" data-lang=\"en\">Updated 2 hours ago<\/div>\n            <\/div>\n            <span class=\"dossier-item-badge db-secure\" data-lang=\"nl\">Beveiligd<\/span>\n            <span class=\"dossier-item-badge db-secure\" data-lang=\"en\">Secured<\/span>\n          <\/div>\n          <div class=\"dossier-item\">\n            <div class=\"dossier-item-icon di-green\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\"><\/path><\/svg>\n            <\/div>\n            <div class=\"dossier-item-text\">\n              <div class=\"dossier-item-name\" data-lang=\"nl\">Contracten Leveranciers<\/div>\n              <div class=\"dossier-item-name\" data-lang=\"en\">Supplier Contracts<\/div>\n              <div class=\"dossier-item-meta\" data-lang=\"nl\">Gedeeld met 2 personen<\/div>\n              <div class=\"dossier-item-meta\" data-lang=\"en\">Shared with 2 people<\/div>\n            <\/div>\n            <span class=\"dossier-item-badge db-shared\" data-lang=\"nl\">Gedeeld<\/span>\n            <span class=\"dossier-item-badge db-shared\" data-lang=\"en\">Shared<\/span>\n          <\/div>\n          <div class=\"dossier-item\">\n            <div class=\"dossier-item-icon di-amber\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l6 2.67V11c0 3.75-2.54 7.26-6 8.4C8.54 18.26 6 14.75 6 11V7.67L12 5z\"><\/path><\/svg>\n            <\/div>\n            <div class=\"dossier-item-text\">\n              <div class=\"dossier-item-name\" data-lang=\"nl\">Personeelsdossiers<\/div>\n              <div class=\"dossier-item-name\" data-lang=\"en\">HR Files<\/div>\n              <div class=\"dossier-item-meta\" data-lang=\"nl\">Alleen lezen toegang<\/div>\n              <div class=\"dossier-item-meta\" data-lang=\"en\">Read-only access<\/div>\n            <\/div>\n            <span class=\"dossier-item-badge db-private\" data-lang=\"nl\">Priv\u00e9<\/span>\n            <span class=\"dossier-item-badge db-private\" data-lang=\"en\">Private<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"hero-floating hf-1\">\n          <div class=\"hf-icon\" style=\"background:oklch(58% 0.13 155 \/ 0.12)\">\n            <svg viewBox=\"0 0 24 24\" style=\"fill:oklch(42% 0.13 155)\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"><\/path><\/svg>\n          <\/div>\n          <span data-lang=\"nl\">Data in Nederland \u2713<\/span>\n          <span data-lang=\"en\">Data in Netherlands \u2713<\/span>\n        <\/div>\n        <div class=\"hero-floating hf-2\">\n          <div class=\"hf-icon\" style=\"background:oklch(65% 0.12 255 \/ 0.12)\">\n            <svg viewBox=\"0 0 24 24\" style=\"fill:var(--blue)\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"><\/path><\/svg>\n          <\/div>\n          <span data-lang=\"nl\">End-to-end versleuteld<\/span>\n          <span data-lang=\"en\">End-to-end encrypted<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"how-it-works\" id=\"how-it-works\">\n  <div class=\"container\">\n    <div class=\"badge\" data-lang=\"nl\">Hoe het werkt<\/div>\n    <div class=\"badge\" data-lang=\"en\">How it works<\/div>\n    <h2 class=\"section-title\" data-lang=\"nl\">Van papier naar veilig digitaal<br>in vier stappen<\/h2>\n    <h2 class=\"section-title\" data-lang=\"en\">From paper to secure digital<br>in four steps<\/h2>\n    <p class=\"section-sub\" data-lang=\"nl\">SecureDossier maakt de overgang naar een veilige, digitale dossieromgeving eenvoudig en gecontroleerd.<\/p>\n    <p class=\"section-sub\" data-lang=\"en\">SecureDossier makes the transition to a secure digital dossier environment simple and controlled.<\/p>\n    <div class=\"steps\">\n      <div class=\"step fade-up\">\n        <div class=\"step-num\">01<\/div>\n        <div class=\"step-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Omgeving inrichten<\/h3>\n        <h3 data-lang=\"en\">Set up environment<\/h3>\n        <p data-lang=\"nl\">Stel uw organisatie in, definieer rollen en rechten, en configureer uw digitale dossieromgeving.<\/p>\n        <p data-lang=\"en\">Set up your organization, define roles and permissions, and configure your digital dossier environment.<\/p>\n        <div class=\"step-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"><\/path><\/svg><\/div>\n      <\/div>\n      <div class=\"step fade-up\">\n        <div class=\"step-num\">02<\/div>\n        <div class=\"step-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 6h-2.18c.07-.44.18-.88.18-1.34C18 2.09 15.91 0 13.33 0c-1.6 0-3.07.8-3.98 2.08L8 3.64l-1.35-1.56C5.73 1.4 4.26.6 2.67.6.08.6-2 2.68-2 5.26c0 .46.11.9.18 1.34H-2v14h22V6zM18 18H2V8h16v10z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Dossiers aanmaken<\/h3>\n        <h3 data-lang=\"en\">Create dossiers<\/h3>\n        <p data-lang=\"nl\">Maak dossiers aan per klant, zaak of project. Upload documenten en stel per dossier de toegangsrechten in.<\/p>\n        <p data-lang=\"en\">Create dossiers per client, case or project. Upload documents and set access rights per dossier.<\/p>\n        <div class=\"step-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"><\/path><\/svg><\/div>\n      <\/div>\n      <div class=\"step fade-up\">\n        <div class=\"step-num\">03<\/div>\n        <div class=\"step-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Veilig delen<\/h3>\n        <h3 data-lang=\"en\">Share securely<\/h3>\n        <p data-lang=\"nl\">Deel dossiers met collega&#8217;s, klanten of externe partijen met precieze toegangscontrole. U bepaalt wie wat ziet.<\/p>\n        <p data-lang=\"en\">Share dossiers with colleagues, clients or external parties with precise access control. You decide who sees what.<\/p>\n        <div class=\"step-arrow\"><svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"><\/path><\/svg><\/div>\n      <\/div>\n      <div class=\"step fade-up\">\n        <div class=\"step-num\">04<\/div>\n        <div class=\"step-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Rapporteren &amp; beheren<\/h3>\n        <h3 data-lang=\"en\">Report &amp; manage<\/h3>\n        <p data-lang=\"nl\">Volg alle activiteiten via uitgebreide rapportages. Beheer wie toegang heeft gehad en wanneer.<\/p>\n        <p data-lang=\"en\">Track all activity via comprehensive reports. Manage who had access and when.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"features\" id=\"features\">\n  <div class=\"container\">\n    <div class=\"badge\" data-lang=\"nl\">Functies<\/div>\n    <div class=\"badge\" data-lang=\"en\">Features<\/div>\n    <h2 class=\"section-title\" data-lang=\"nl\">Alles wat u nodig heeft,<br>niets wat u niet wilt<\/h2>\n    <h2 class=\"section-title\" data-lang=\"en\">Everything you need,<br>nothing you don&#8217;t<\/h2>\n    <p class=\"section-sub\" data-lang=\"nl\">SecureDossier biedt een complete set tools voor veilig dossierbeheer, afgestemd op uw rol en organisatie.<\/p>\n    <p class=\"section-sub\" data-lang=\"en\">SecureDossier provides a complete set of tools for secure dossier management, tailored to your role and organization.<\/p>\n    <div class=\"features-grid\">\n\n      <div class=\"feature-card featured fade-up\">\n        <div>\n          <div class=\"feature-icon fi-light\"><svg viewBox=\"0 0 24 24\" style=\"width:24px;height:24px;fill:#fff\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"><\/path><\/svg><\/div>\n          <h3 data-lang=\"nl\">E\u00e9n digitale brievenbus<\/h3>\n          <h3 data-lang=\"en\">One digital mailbox<\/h3>\n          <p data-lang=\"nl\">Alle inkomende post op \u00e9\u00e9n centrale, veilige plek. Geen versnippering meer over mailboxen, mappen of papier. SecureDossier is uw digitale thuisbasis voor alle correspondentie.<\/p>\n          <p data-lang=\"en\">All incoming mail in one central, secure place. No more fragmentation across mailboxes, folders or paper. SecureDossier is your digital home for all correspondence.<\/p>\n        <\/div>\n        <div class=\"feature-visual\">\n          <div class=\"mini-perm\" style=\"background:oklch(65% 0.12 255 \/ 0.15);margin-bottom:8px;\">\n            <span class=\"mp-user\" data-lang=\"nl\">\ud83d\udce5 Inkomende post<\/span>\n            <span class=\"mp-user\" data-lang=\"en\">\ud83d\udce5 Incoming mail<\/span>\n            <span class=\"mp-role mp-admin\" data-lang=\"nl\">Nieuw<\/span>\n            <span class=\"mp-role mp-admin\" data-lang=\"en\">New<\/span>\n          <\/div>\n          <div class=\"mini-perm\" style=\"background:#fff1;margin-bottom:6px;\">\n            <span class=\"mp-user\" data-lang=\"nl\">Offerte Leverancier A<\/span>\n            <span class=\"mp-user\" data-lang=\"en\">Quote Supplier A<\/span>\n            <span class=\"mp-role mp-edit\" data-lang=\"nl\">Verwerkt<\/span>\n            <span class=\"mp-role mp-edit\" data-lang=\"en\">Processed<\/span>\n          <\/div>\n          <div class=\"mini-perm\" style=\"background:#fff1;margin-bottom:6px;\">\n            <span class=\"mp-user\" data-lang=\"nl\">Factuur #2025-044<\/span>\n            <span class=\"mp-user\" data-lang=\"en\">Invoice #2025-044<\/span>\n            <span class=\"mp-role mp-edit\" data-lang=\"nl\">Verwerkt<\/span>\n            <span class=\"mp-role mp-edit\" data-lang=\"en\">Processed<\/span>\n          <\/div>\n          <div class=\"mini-perm\" style=\"background:#fff1;\">\n            <span class=\"mp-user\" data-lang=\"nl\">Contract Verlening<\/span>\n            <span class=\"mp-user\" data-lang=\"en\">Contract Renewal<\/span>\n            <span class=\"mp-role mp-read\" data-lang=\"nl\">In behandeling<\/span>\n            <span class=\"mp-role mp-read\" data-lang=\"en\">In review<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"feature-card fade-up\">\n        <div class=\"feature-icon fi-blue\"><svg viewBox=\"0 0 24 24\" style=\"width:24px;height:24px\"><path d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Documenten beheren<\/h3>\n        <h3 data-lang=\"en\">Manage documents<\/h3>\n        <p data-lang=\"nl\">Upload, organiseer en bewerk documenten per dossier. Versiegeschiedenis, commentaar en goedkeuringsflows inbegrepen.<\/p>\n        <p data-lang=\"en\">Upload, organize and edit documents per dossier. Version history, comments and approval flows included.<\/p>\n      <\/div>\n\n      <div class=\"feature-card fade-up\">\n        <div class=\"feature-icon fi-green\"><svg viewBox=\"0 0 24 24\" style=\"width:24px;height:24px\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Rollen &amp; rechten<\/h3>\n        <h3 data-lang=\"en\">Roles &amp; permissions<\/h3>\n        <p data-lang=\"nl\">Definieer precieze toegangsrollen per gebruiker, per dossier. Van alleen-lezen tot volledige beheerder.<\/p>\n        <p data-lang=\"en\">Define precise access roles per user, per dossier. From read-only to full administrator.<\/p>\n      <\/div>\n\n      <div class=\"feature-card fade-up\">\n        <div class=\"feature-icon fi-amber\"><svg viewBox=\"0 0 24 24\" style=\"width:24px;height:24px\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Rapportages<\/h3>\n        <h3 data-lang=\"en\">Reporting<\/h3>\n        <p data-lang=\"nl\">Uitgebreide inzichten in wie wat heeft gedaan en wanneer. Audit trails voor volledige compliance.<\/p>\n        <p data-lang=\"en\">Comprehensive insights into who did what and when. Audit trails for full compliance.<\/p>\n      <\/div>\n\n      <div class=\"feature-card fade-up\">\n        <div class=\"feature-icon fi-blue\"><svg viewBox=\"0 0 24 24\" style=\"width:24px;height:24px\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Veilig delen<\/h3>\n        <h3 data-lang=\"en\">Secure sharing<\/h3>\n        <p data-lang=\"nl\">Deel dossiers en documenten met externe partijen via beveiligde links met instelbare vervaldatum.<\/p>\n        <p data-lang=\"en\">Share dossiers and documents with external parties via secured links with configurable expiration dates.<\/p>\n      <\/div>\n\n      <div class=\"feature-card fade-up\">\n        <div class=\"feature-icon fi-green\"><svg viewBox=\"0 0 24 24\" style=\"width:24px;height:24px\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l6 2.67V11c0 3.75-2.54 7.26-6 8.4C8.54 18.26 6 14.75 6 11V7.67L12 5z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">End-to-end beveiliging<\/h3>\n        <h3 data-lang=\"en\">End-to-end security<\/h3>\n        <p data-lang=\"nl\">Versleuteling op transport- \u00e9n opslaglaag. Uw data is alleen toegankelijk voor wie u dat toestaat.<\/p>\n        <p data-lang=\"en\">Encryption at transport and storage level. Your data is only accessible to those you allow.<\/p>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"security\" id=\"security\">\n  <div class=\"container\">\n    <div class=\"security-grid\">\n      <div class=\"security-visual fade-up\">\n        <div class=\"shield-big\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l6 2.67V11c0 3.75-2.54 7.26-6 8.4C8.54 18.26 6 14.75 6 11V7.67L12 5z\"><\/path><\/svg>\n        <\/div>\n        <ul class=\"security-check-list\">\n          <li>\n            <div class=\"check-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">AES-256 versleuteling op alle opgeslagen data<\/span>\n            <span data-lang=\"en\">AES-256 encryption on all stored data<\/span>\n          <\/li>\n          <li>\n            <div class=\"check-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">TLS 1.3 voor alle datacommunicatie<\/span>\n            <span data-lang=\"en\">TLS 1.3 for all data communication<\/span>\n          <\/li>\n          <li>\n            <div class=\"check-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">Multi-factor authenticatie (MFA)<\/span>\n            <span data-lang=\"en\">Multi-factor authentication (MFA)<\/span>\n          <\/li>\n          <li>\n            <div class=\"check-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">Volledige audit trails &amp; activiteitenlog<\/span>\n            <span data-lang=\"en\">Full audit trails &amp; activity log<\/span>\n          <\/li>\n          <li>\n            <div class=\"check-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">Automatische back-ups, dagelijks<\/span>\n            <span data-lang=\"en\">Automatic backups, daily<\/span>\n          <\/li>\n          <li>\n            <div class=\"check-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">Penetratietests door externe partij<\/span>\n            <span data-lang=\"en\">Penetration tests by external party<\/span>\n          <\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"fade-up\">\n        <div class=\"badge badge-green\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:12px;height:12px;fill:currentColor\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"><\/path><\/svg>\n          <span data-lang=\"nl\">Beveiliging &amp; compliance<\/span>\n          <span data-lang=\"en\">Security &amp; compliance<\/span>\n        <\/div>\n        <h2 class=\"section-title\" data-lang=\"nl\">Veiligheid is geen<br>bijzaak \u2014 het is de kern<\/h2>\n        <h2 class=\"section-title\" data-lang=\"en\">Security isn&#8217;t an<br>afterthought \u2014 it&#8217;s the core<\/h2>\n        <p class=\"section-sub\" data-lang=\"nl\">SecureDossier is gebouwd met veiligheid als fundament. Van de infrastructuur tot de gebruikersinterface \u2014 elke laag is beveiligd.<\/p>\n        <p class=\"section-sub\" data-lang=\"en\">SecureDossier is built with security as its foundation. From infrastructure to user interface \u2014 every layer is secured.<\/p>\n        <div class=\"security-badges\">\n          <div class=\"sec-badge\">\n            <div class=\"sec-badge-icon\">\ud83c\uddf3\ud83c\uddf1<\/div>\n            <div class=\"sec-badge-label\" data-lang=\"nl\">Data in NL<\/div>\n            <div class=\"sec-badge-label\" data-lang=\"en\">Data in NL<\/div>\n            <div class=\"sec-badge-sub\" data-lang=\"nl\">Servers in Nederland<\/div>\n            <div class=\"sec-badge-sub\" data-lang=\"en\">Servers in the Netherlands<\/div>\n          <\/div>\n          <div class=\"sec-badge\">\n            <div class=\"sec-badge-icon\">\ud83d\udd12<\/div>\n            <div class=\"sec-badge-label\">AVG \/ GDPR<\/div>\n            <div class=\"sec-badge-sub\" data-lang=\"nl\">Volledig compliant<\/div>\n            <div class=\"sec-badge-sub\" data-lang=\"en\">Fully compliant<\/div>\n          <\/div>\n          <div class=\"sec-badge\">\n            <div class=\"sec-badge-icon\">\u2705<\/div>\n            <div class=\"sec-badge-label\">ISO 27001<\/div>\n            <div class=\"sec-badge-sub\" data-lang=\"nl\">Gecertificeerd<\/div>\n            <div class=\"sec-badge-sub\" data-lang=\"en\">Certified<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"netherlands\" id=\"netherlands\">\n  <div class=\"container\">\n    <div class=\"nl-inner\">\n      <div class=\"fade-up\">\n        <div class=\"badge badge-amber\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:12px;height:12px;fill:currentColor\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"><\/path><\/svg>\n          <span data-lang=\"nl\">Data in Nederland<\/span>\n          <span data-lang=\"en\">Data in the Netherlands<\/span>\n        <\/div>\n        <h2 class=\"section-title\" data-lang=\"nl\">Uw data blijft<br>waar ze thuishoort<\/h2>\n        <h2 class=\"section-title\" data-lang=\"en\">Your data stays<br>where it belongs<\/h2>\n        <p class=\"section-sub\" data-lang=\"nl\">Als Nederlands bedrijf deserveert u Nederlandse databorging. Geen servers in de VS of buiten de EU \u2014 uw data staat op Nederlandse bodem, onder Nederlands en Europees recht.<\/p>\n        <p class=\"section-sub\" data-lang=\"en\">As a Dutch company you deserve Dutch data assurance. No servers in the US or outside the EU \u2014 your data sits on Dutch soil, under Dutch and European law.<\/p>\n        <ul class=\"nl-points\">\n          <li>\n            <div class=\"nl-point-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"><\/path><\/svg><\/div>\n            <div>\n              <div class=\"nl-point-title\" data-lang=\"nl\">100% Nederlandse infrastructuur<\/div>\n              <div class=\"nl-point-title\" data-lang=\"en\">100% Dutch infrastructure<\/div>\n              <div class=\"nl-point-text\" data-lang=\"nl\">Onze servers staan uitsluitend in Nederland. Geen data-overdracht naar niet-EU-landen.<\/div>\n              <div class=\"nl-point-text\" data-lang=\"en\">Our servers are located exclusively in the Netherlands. No data transfer to non-EU countries.<\/div>\n            <\/div>\n          <\/li>\n          <li>\n            <div class=\"nl-point-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"><\/path><\/svg><\/div>\n            <div>\n              <div class=\"nl-point-title\" data-lang=\"nl\">Volledig AVG-compliant<\/div>\n              <div class=\"nl-point-title\" data-lang=\"en\">Fully GDPR-compliant<\/div>\n              <div class=\"nl-point-text\" data-lang=\"nl\">Wij verwerken persoonsgegevens conform de Algemene Verordening Gegevensbescherming.<\/div>\n              <div class=\"nl-point-text\" data-lang=\"en\">We process personal data in accordance with the General Data Protection Regulation.<\/div>\n            <\/div>\n          <\/li>\n          <li>\n            <div class=\"nl-point-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg><\/div>\n            <div>\n              <div class=\"nl-point-title\" data-lang=\"nl\">Uw eigendom, uw controle<\/div>\n              <div class=\"nl-point-title\" data-lang=\"en\">Your property, your control<\/div>\n              <div class=\"nl-point-text\" data-lang=\"nl\">U bent en blijft de eigenaar van uw data. Wij beheren uitsluitend de infrastructuur.<\/div>\n              <div class=\"nl-point-text\" data-lang=\"en\">You are and remain the owner of your data. We only manage the infrastructure.<\/div>\n            <\/div>\n          <\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"nl-visual fade-up\">\n        <div class=\"nl-map\">\n          <div class=\"nl-flag\">\n            <div class=\"nl-flag-stripe flag-red\" style=\"height:20px\"><\/div>\n            <div class=\"nl-flag-stripe flag-white\" style=\"height:20px\"><\/div>\n            <div class=\"nl-flag-stripe flag-blue\" style=\"height:20px\"><\/div>\n          <\/div>\n          <div style=\"font-family:'DM Serif Display',serif;font-size:24px;color:var(--navy);margin-bottom:8px;\" data-lang=\"nl\">Nederland<\/div>\n          <div style=\"font-family:'DM Serif Display',serif;font-size:24px;color:var(--navy);margin-bottom:8px;\" data-lang=\"en\">Netherlands<\/div>\n          <div style=\"font-size:14px;color:var(--muted);margin-bottom:24px;\" data-lang=\"nl\">Uw data. Hier. Veilig.<\/div>\n          <div style=\"font-size:14px;color:var(--muted);margin-bottom:24px;\" data-lang=\"en\">Your data. Here. Safe.<\/div>\n          <div class=\"nl-stat\">\n            <div class=\"nl-stat-icon\" style=\"background:oklch(65% 0.12 255 \/ 0.1)\">\n              <svg viewBox=\"0 0 24 24\" style=\"fill:var(--blue);width:20px;height:20px\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"><\/path><\/svg>\n            <\/div>\n            <div>\n              <div class=\"nl-stat-val\">100%<\/div>\n              <div class=\"nl-stat-lab\" data-lang=\"nl\">Nederlandse servers<\/div>\n              <div class=\"nl-stat-lab\" data-lang=\"en\">Dutch servers<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"nl-stat\">\n            <div class=\"nl-stat-icon\" style=\"background:oklch(58% 0.13 155 \/ 0.1)\">\n              <svg viewBox=\"0 0 24 24\" style=\"fill:var(--green);width:20px;height:20px\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"><\/path><\/svg>\n            <\/div>\n            <div>\n              <div class=\"nl-stat-val\">AVG \/ GDPR<\/div>\n              <div class=\"nl-stat-lab\" data-lang=\"nl\">Volledig compliant<\/div>\n              <div class=\"nl-stat-lab\" data-lang=\"en\">Fully compliant<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"nl-stat\">\n            <div class=\"nl-stat-icon\" style=\"background:oklch(72% 0.14 65 \/ 0.1)\">\n              <svg viewBox=\"0 0 24 24\" style=\"fill:oklch(55% 0.14 60);width:20px;height:20px\"><path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\"><\/path><\/svg>\n            <\/div>\n            <div>\n              <div class=\"nl-stat-val\" data-lang=\"nl\">Uw eigendom<\/div>\n              <div class=\"nl-stat-val\" data-lang=\"en\">Your property<\/div>\n              <div class=\"nl-stat-lab\" data-lang=\"nl\">U heeft altijd volledige controle<\/div>\n              <div class=\"nl-stat-lab\" data-lang=\"en\">You always have full control<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"roles\" id=\"roles\">\n  <div class=\"container\">\n    <div class=\"badge\" data-lang=\"nl\">Rollen &amp; autorisaties<\/div>\n    <div class=\"badge\" data-lang=\"en\">Roles &amp; authorizations<\/div>\n    <h2 class=\"section-title\" data-lang=\"nl\">Iedereen ziet precies<br>wat hij mag zien<\/h2>\n    <h2 class=\"section-title\" data-lang=\"en\">Everyone sees exactly<br>what they&#8217;re allowed to see<\/h2>\n    <p class=\"section-sub\" data-lang=\"nl\">SecureDossier heeft een uitgebreid rollenmodel. Van organisatiebeheerder tot externe lezer \u2014 elk niveau heeft eigen rechten.<\/p>\n    <p class=\"section-sub\" data-lang=\"en\">SecureDossier has a comprehensive role model. From organization administrator to external reader \u2014 each level has its own permissions.<\/p>\n    <div class=\"roles-grid\">\n      <div class=\"role-card fade-up\">\n        <div class=\"role-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Organisatiebeheerder<\/h3>\n        <h3 data-lang=\"en\">Organization Admin<\/h3>\n        <p data-lang=\"nl\">Heeft volledige controle over de omgeving. Beheert gebruikers, rollen en instellingen.<\/p>\n        <p data-lang=\"en\">Has full control over the environment. Manages users, roles and settings.<\/p>\n        <ul class=\"role-perms\">\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Gebruikers aanmaken &amp; beheren<\/span><span data-lang=\"en\">Create &amp; manage users<\/span><\/li>\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Alle dossiers inzien<\/span><span data-lang=\"en\">View all dossiers<\/span><\/li>\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Rapportages exporteren<\/span><span data-lang=\"en\">Export reports<\/span><\/li>\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Dossiers aanmaken &amp; verwijderen<\/span><span data-lang=\"en\">Create &amp; delete dossiers<\/span><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"role-card fade-up\">\n        <div class=\"role-icon\" style=\"background:var(--green)\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Dossierbeheerder<\/h3>\n        <h3 data-lang=\"en\">Dossier Manager<\/h3>\n        <p data-lang=\"nl\">Beheert specifieke dossiers. Kan documenten toevoegen, bewerken en delen met anderen.<\/p>\n        <p data-lang=\"en\">Manages specific dossiers. Can add, edit and share documents with others.<\/p>\n        <ul class=\"role-perms\">\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Dossiers aanmaken<\/span><span data-lang=\"en\">Create dossiers<\/span><\/li>\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Documenten uploaden &amp; bewerken<\/span><span data-lang=\"en\">Upload &amp; edit documents<\/span><\/li>\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Toegang verlenen aan anderen<\/span><span data-lang=\"en\">Grant access to others<\/span><\/li>\n          <li><span class=\"perm-x\">\u2717<\/span><span data-lang=\"nl\">Gebruikersbeheer<\/span><span data-lang=\"en\">User management<\/span><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"role-card fade-up\">\n        <div class=\"role-icon\" style=\"background:oklch(55% 0.14 60)\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"><\/path><\/svg><\/div>\n        <h3 data-lang=\"nl\">Lezer<\/h3>\n        <h3 data-lang=\"en\">Reader<\/h3>\n        <p data-lang=\"nl\">Heeft alleen-lezen toegang tot gedeelde dossiers. Ideaal voor externe partijen en klanten.<\/p>\n        <p data-lang=\"en\">Has read-only access to shared dossiers. Ideal for external parties and clients.<\/p>\n        <ul class=\"role-perms\">\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Dossiers inzien<\/span><span data-lang=\"en\">View dossiers<\/span><\/li>\n          <li><span class=\"perm-check\">\u2713<\/span><span data-lang=\"nl\">Documenten downloaden<\/span><span data-lang=\"en\">Download documents<\/span><\/li>\n          <li><span class=\"perm-x\">\u2717<\/span><span data-lang=\"nl\">Documenten bewerken<\/span><span data-lang=\"en\">Edit documents<\/span><\/li>\n          <li><span class=\"perm-x\">\u2717<\/span><span data-lang=\"nl\">Toegang verlenen<\/span><span data-lang=\"en\">Grant access<\/span><\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"sharing\" id=\"sharing\">\n  <div class=\"container\">\n    <div class=\"sharing-grid\">\n      <div class=\"fade-up\">\n        <div class=\"badge\" data-lang=\"nl\">Gegevens delen<\/div>\n        <div class=\"badge\" data-lang=\"en\">Data sharing<\/div>\n        <h2 class=\"section-title\" data-lang=\"nl\">Samenwerken zonder<br>in te leveren op veiligheid<\/h2>\n        <h2 class=\"section-title\" data-lang=\"en\">Collaborate without<br>compromising on security<\/h2>\n        <p class=\"section-sub\" data-lang=\"nl\">Deel dossiers en documenten veilig met collega&#8217;s, klanten of externe adviseurs. U bepaalt de spelregels.<\/p>\n        <p class=\"section-sub\" data-lang=\"en\">Share dossiers and documents securely with colleagues, clients or external advisors. You set the rules.<\/p>\n        <ul class=\"sharing-points\">\n          <li><span class=\"sp-icon\">\u2192<\/span><span data-lang=\"nl\">Deel met specifieke personen of groepen, nooit openbaar<\/span><span data-lang=\"en\">Share with specific people or groups, never publicly<\/span><\/li>\n          <li><span class=\"sp-icon\">\u2192<\/span><span data-lang=\"nl\">Stel een vervaldatum in voor tijdelijke toegang<\/span><span data-lang=\"en\">Set an expiration date for temporary access<\/span><\/li>\n          <li><span class=\"sp-icon\">\u2192<\/span><span data-lang=\"nl\">Kies per persoon welke rechten zij hebben<\/span><span data-lang=\"en\">Choose per person what permissions they have<\/span><\/li>\n          <li><span class=\"sp-icon\">\u2192<\/span><span data-lang=\"nl\">Trek toegang op elk moment in<\/span><span data-lang=\"en\">Revoke access at any time<\/span><\/li>\n          <li><span class=\"sp-icon\">\u2192<\/span><span data-lang=\"nl\">Audit log van alle deelactiviteiten<\/span><span data-lang=\"en\">Audit log of all sharing activities<\/span><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"sharing-visual fade-up\">\n        <div class=\"share-card\">\n          <div class=\"share-from\">\n            <strong data-lang=\"nl\">Uw organisatie<\/strong>\n            <strong data-lang=\"en\">Your organization<\/strong>\n            <small data-lang=\"nl\">Eigenaar van het dossier<\/small>\n            <small data-lang=\"en\">Dossier owner<\/small>\n          <\/div>\n          <div class=\"share-arrow\">\n            <div class=\"share-line sl-blue\"><\/div>\n            <span class=\"share-perm-label spl-view\" data-lang=\"nl\">Inzien<\/span>\n            <span class=\"share-perm-label spl-view\" data-lang=\"en\">View<\/span>\n          <\/div>\n          <div class=\"share-to\">\n            <strong data-lang=\"nl\">Accountant<\/strong>\n            <strong data-lang=\"en\">Accountant<\/strong>\n            <small data-lang=\"nl\">Externe toegang<\/small>\n            <small data-lang=\"en\">External access<\/small>\n          <\/div>\n        <\/div>\n        <div class=\"share-card\">\n          <div class=\"share-from\">\n            <strong data-lang=\"nl\">Uw organisatie<\/strong>\n            <strong data-lang=\"en\">Your organization<\/strong>\n            <small data-lang=\"nl\">Eigenaar van het dossier<\/small>\n            <small data-lang=\"en\">Dossier owner<\/small>\n          <\/div>\n          <div class=\"share-arrow\">\n            <div class=\"share-line sl-green\"><\/div>\n            <span class=\"share-perm-label spl-edit\" data-lang=\"nl\">Bewerken<\/span>\n            <span class=\"share-perm-label spl-edit\" data-lang=\"en\">Edit<\/span>\n          <\/div>\n          <div class=\"share-to\">\n            <strong data-lang=\"nl\">Collega<\/strong>\n            <strong data-lang=\"en\">Colleague<\/strong>\n            <small data-lang=\"nl\">Interne samenwerking<\/small>\n            <small data-lang=\"en\">Internal collaboration<\/small>\n          <\/div>\n        <\/div>\n        <div class=\"share-card\">\n          <div class=\"share-from\">\n            <strong data-lang=\"nl\">Uw organisatie<\/strong>\n            <strong data-lang=\"en\">Your organization<\/strong>\n            <small data-lang=\"nl\">Eigenaar van het dossier<\/small>\n            <small data-lang=\"en\">Dossier owner<\/small>\n          <\/div>\n          <div class=\"share-arrow\">\n            <div class=\"share-line\" style=\"background:var(--amber)\"><\/div>\n            <span class=\"share-perm-label spl-sign\" data-lang=\"nl\">Tijdelijk<\/span>\n            <span class=\"share-perm-label spl-sign\" data-lang=\"en\">Temporary<\/span>\n          <\/div>\n          <div class=\"share-to\">\n            <strong data-lang=\"nl\">Notaris<\/strong>\n            <strong data-lang=\"en\">Notary<\/strong>\n            <small data-lang=\"nl\">Vervalt over 7 dagen<\/small>\n            <small data-lang=\"en\">Expires in 7 days<\/small>\n          <\/div>\n        <\/div>\n        <div style=\"background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 20px;font-size:13px;color:var(--muted);text-align:center;\" data-lang=\"nl\">\n          U kunt toegang op elk moment intrekken \u2191\n        <\/div>\n        <div style=\"background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 20px;font-size:13px;color:var(--muted);text-align:center;\" data-lang=\"en\">\n          You can revoke access at any time \u2191\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"testimonials\" id=\"testimonials\">\n  <div class=\"container\">\n    <div class=\"badge\" data-lang=\"nl\">Ervaringen<\/div>\n    <div class=\"badge\" data-lang=\"en\">Testimonials<\/div>\n    <h2 class=\"section-title\" data-lang=\"nl\">Wat onze gebruikers zeggen<\/h2>\n    <h2 class=\"section-title\" data-lang=\"en\">What our users say<\/h2>\n    <div class=\"testimonials-grid\">\n      <div class=\"testimonial fade-up\">\n        <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n        <p class=\"testimonial-quote\" data-lang=\"nl\">Eindelijk \u00e9\u00e9n centrale plek voor al onze klantdossiers. Het team werkt er graag mee en onze klanten waarderen de veilige gedeelde omgeving enorm.<\/p>\n        <p class=\"testimonial-quote\" data-lang=\"en\">Finally one central place for all our client dossiers. The team loves working with it and our clients greatly appreciate the secure shared environment.<\/p>\n        <div class=\"testimonial-author\">\n          <div class=\"author-avatar\">MV<\/div>\n          <div>\n            <div class=\"author-name\">Mark van der Berg<\/div>\n            <div class=\"author-role\" data-lang=\"nl\">Directeur, MKB Adviesbureau<\/div>\n            <div class=\"author-role\" data-lang=\"en\">Director, SME Advisory Firm<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"testimonial fade-up\">\n        <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n        <p class=\"testimonial-quote\" data-lang=\"nl\">Als accountantskantoor is AVG-compliance niet optioneel. SecureDossier geeft ons de zekerheid dat data in Nederland blijft en alleen toegankelijk is voor wie dat mag.<\/p>\n        <p class=\"testimonial-quote\" data-lang=\"en\">As an accounting firm, GDPR compliance isn&#8217;t optional. SecureDossier gives us the certainty that data stays in the Netherlands and is only accessible to those who are allowed.<\/p>\n        <div class=\"testimonial-author\">\n          <div class=\"author-avatar\">SJ<\/div>\n          <div>\n            <div class=\"author-name\">Sandra Janssen RA<\/div>\n            <div class=\"author-role\" data-lang=\"nl\">Partner, Accountantskantoor<\/div>\n            <div class=\"author-role\" data-lang=\"en\">Partner, Accounting Firm<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"testimonial fade-up\">\n        <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n        <p class=\"testimonial-quote\" data-lang=\"nl\">Wij gebruiken SecureDossier voor gevoelige personeelsdossiers. De rolgebaseerde toegang geeft ons exact de controle die we nodig hebben.<\/p>\n        <p class=\"testimonial-quote\" data-lang=\"en\">We use SecureDossier for sensitive HR files. The role-based access gives us exactly the control we need.<\/p>\n        <div class=\"testimonial-author\">\n          <div class=\"author-avatar\">RK<\/div>\n          <div>\n            <div class=\"author-name\">Roos Kuijpers<\/div>\n            <div class=\"author-role\" data-lang=\"nl\">HR Manager, Zorginstelling<\/div>\n            <div class=\"author-role\" data-lang=\"en\">HR Manager, Healthcare Institution<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"faq\" id=\"faq\">\n  <div class=\"container\">\n    <div class=\"badge\" data-lang=\"nl\">Veelgestelde vragen<\/div>\n    <div class=\"badge\" data-lang=\"en\">Frequently asked questions<\/div>\n    <h2 class=\"section-title\" data-lang=\"nl\">Alles wat u wilt weten<\/h2>\n    <h2 class=\"section-title\" data-lang=\"en\">Everything you want to know<\/h2>\n    <div class=\"faq-grid\">\n      <div class=\"faq-list\" id=\"faq-list\">\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            <span data-lang=\"nl\">Waar staat mijn data opgeslagen?<\/span>\n            <span data-lang=\"en\">Where is my data stored?<\/span>\n            <div class=\"faq-chevron\"><svg viewBox=\"0 0 24 24\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"><\/path><\/svg><\/div>\n          <\/div>\n          <div class=\"faq-a\" data-lang=\"nl\">Alle data wordt uitsluitend opgeslagen op servers in Nederland. Wij maken geen gebruik van datacenters buiten de EU en uw data wordt nooit overgedragen aan derde landen.<\/div>\n          <div class=\"faq-a\" data-lang=\"en\">All data is stored exclusively on servers in the Netherlands. We do not use data centers outside the EU and your data is never transferred to third countries.<\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            <span data-lang=\"nl\">Is SecureDossier AVG-compliant?<\/span>\n            <span data-lang=\"en\">Is SecureDossier GDPR-compliant?<\/span>\n            <div class=\"faq-chevron\"><svg viewBox=\"0 0 24 24\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"><\/path><\/svg><\/div>\n          <\/div>\n          <div class=\"faq-a\" data-lang=\"nl\">Ja, SecureDossier is volledig ontworpen met AVG-compliance als uitgangspunt. Wij bieden een verwerkersovereenkomst aan en verwerken persoonsgegevens conform de geldende wetgeving.<\/div>\n          <div class=\"faq-a\" data-lang=\"en\">Yes, SecureDossier is fully designed with GDPR compliance as its starting point. We offer a data processing agreement and process personal data in accordance with applicable legislation.<\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            <span data-lang=\"nl\">Kan ik toegang intrekken van een gebruiker?<\/span>\n            <span data-lang=\"en\">Can I revoke a user&#8217;s access?<\/span>\n            <div class=\"faq-chevron\"><svg viewBox=\"0 0 24 24\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"><\/path><\/svg><\/div>\n          <\/div>\n          <div class=\"faq-a\" data-lang=\"nl\">Ja, u kunt op elk moment en direct de toegang van een gebruiker intrekken. Dit geldt ook voor externe partijen die via een gedeelde link toegang hebben gekregen.<\/div>\n          <div class=\"faq-a\" data-lang=\"en\">Yes, you can revoke a user&#8217;s access at any time and immediately. This also applies to external parties who have been granted access via a shared link.<\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            <span data-lang=\"nl\">Wat gebeurt er met mijn data als ik stop?<\/span>\n            <span data-lang=\"en\">What happens to my data if I cancel?<\/span>\n            <div class=\"faq-chevron\"><svg viewBox=\"0 0 24 24\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"><\/path><\/svg><\/div>\n          <\/div>\n          <div class=\"faq-a\" data-lang=\"nl\">Uw data blijft uw eigendom. Bij be\u00ebindiging ontvangt u een volledige export van al uw data. Daarna wordt alle data veilig en permanent verwijderd van onze servers.<\/div>\n          <div class=\"faq-a\" data-lang=\"en\">Your data remains your property. Upon termination you receive a complete export of all your data. After that, all data is safely and permanently deleted from our servers.<\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-q\">\n            <span data-lang=\"nl\">Is er een demo beschikbaar?<\/span>\n            <span data-lang=\"en\">Is a demo available?<\/span>\n            <div class=\"faq-chevron\"><svg viewBox=\"0 0 24 24\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"><\/path><\/svg><\/div>\n          <\/div>\n          <div class=\"faq-a\" data-lang=\"nl\">Ja! Wij bieden een gratis demoafspraak aan waarbij we u een persoonlijke rondleiding geven door de omgeving. Vul het contactformulier in om een afspraak te plannen.<\/div>\n          <div class=\"faq-a\" data-lang=\"en\">Yes! We offer a free demo appointment where we give you a personal tour of the environment. Fill in the contact form to schedule an appointment.<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"faq-cta fade-up\">\n        <h3 data-lang=\"nl\">Staat uw vraag er niet bij?<\/h3>\n        <h3 data-lang=\"en\">Can&#8217;t find your question?<\/h3>\n        <p data-lang=\"nl\">Ons team helpt u graag. Neem contact op via het formulier of plan direct een demoafspraak in.<\/p>\n        <p data-lang=\"en\">Our team is happy to help. Contact us via the form or schedule a demo appointment directly.<\/p>\n        <a href=\"#contact\" class=\"btn btn-amber\" data-lang=\"nl\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;fill:#fff\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"><\/path><\/svg>\n          Neem contact op\n        <\/a>\n        <a href=\"#contact\" class=\"btn btn-amber\" data-lang=\"en\">\n          <svg viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;fill:#fff\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"><\/path><\/svg>\n          Get in touch\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<section class=\"contact\" id=\"contact\">\n  <div class=\"container\">\n    <div class=\"contact-inner\">\n      <div class=\"contact-info fade-up\">\n        <div class=\"badge badge-amber\" data-lang=\"nl\">Gratis demo afspraak plannen<\/div>\n        <div class=\"badge badge-amber\" data-lang=\"en\">Schedule a free demo<\/div>\n        <h3 data-lang=\"nl\">Ontdek SecureDossier<br>in 30 minuten<\/h3>\n        <h3 data-lang=\"en\">Discover SecureDossier<br>in 30 minutes<\/h3>\n        <p data-lang=\"nl\">Plan een vrijblijvende demoafspraak in. We laten u zien hoe SecureDossier werkt voor uw specifieke situatie en beantwoorden al uw vragen.<\/p>\n        <p data-lang=\"en\">Schedule a no-obligation demo appointment. We&#8217;ll show you how SecureDossier works for your specific situation and answer all your questions.<\/p>\n        <ul class=\"contact-items\">\n          <li>\n            <div class=\"ci-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">Wij bellen u terug op een tijd die u schikt<\/span>\n            <span data-lang=\"en\">We&#8217;ll call you back at a time that suits you<\/span>\n          <\/li>\n          <li>\n            <div class=\"ci-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">Gratis en vrijblijvend<\/span>\n            <span data-lang=\"en\">Free and no obligation<\/span>\n          <\/li>\n          <li>\n            <div class=\"ci-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"><\/path><\/svg><\/div>\n            <span data-lang=\"nl\">Demo op maat voor uw organisatie<\/span>\n            <span data-lang=\"en\">Tailor-made demo for your organization<\/span>\n          <\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"contact-form fade-up\">\n        <iframe aria-label='SecureDossier' frameborder=\"0\" style=\"height:620px;width:100%;border:none;border-radius:12px;\" src='https:\/\/forms.zohopublic.eu\/emielsprenger\/form\/SecureDossier\/formperma\/xLGm8pRhPtG1dYDEH9SQ9GHeKfI8B4d1i3I52aEBW0U'><\/iframe>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600&family=DM+Serif+Display:ital@0;1&display=swap');\n\n  :root {\n    --navy: oklch(22% 0.07 255);\n    --navy-mid: oklch(32% 0.08 255);\n    --blue: oklch(50% 0.14 255);\n    --blue-light: oklch(65% 0.12 255);\n    --amber: oklch(72% 0.14 65);\n    --bg: oklch(98.5% 0.006 250);\n    --bg2: oklch(96% 0.008 250);\n    --text: oklch(18% 0.04 255);\n    --muted: oklch(50% 0.04 255);\n    --border: oklch(90% 0.01 255);\n    --green: oklch(58% 0.13 155);\n    --radius: 16px;\n    --shadow: 0 2px 24px oklch(22% 0.07 255 \/ 0.08);\n    --shadow-lg: 0 8px 48px oklch(22% 0.07 255 \/ 0.14);\n  }\n\n\/* WordPress isolation wrapper *\/\n.sd-page {\n  font-family: 'DM Sans', sans-serif;\n  color: var(--text);\n  line-height: 1.6;\n  font-size: 17px;\n  box-sizing: border-box;\n}\n\n.sd-page *, .sd-page *::before, .sd-page *::after {\n box-sizing: border-box; margin: 0; padding: 0; \n}\n.sd-page {\n scroll-behavior: smooth; \n}\n.sd-page {\n\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    line-height: 1.6;\n    font-size: 17px;\n    overflow-x: hidden;\n  \n}\n\/* \u2500\u2500\u2500 UTILITY \u2500\u2500\u2500 *\/\n.sd-page .container {\n max-width: 1160px; margin: 0 auto; padding: 0 32px; \n}\n.sd-page .serif {\n font-family: 'DM Serif Display', serif; \n}\n.sd-page .badge {\n\n    display: inline-flex; align-items: center; gap: 6px;\n    background: oklch(65% 0.12 255 \/ 0.1);\n    color: var(--blue);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.25);\n    border-radius: 100px; padding: 5px 14px;\n    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;\n    margin-bottom: 20px;\n  \n}\n.sd-page .badge-amber {\n\n    background: oklch(72% 0.14 65 \/ 0.1);\n    color: oklch(52% 0.14 55);\n    border-color: oklch(72% 0.14 65 \/ 0.3);\n  \n}\n.sd-page .badge-green {\n\n    background: oklch(58% 0.13 155 \/ 0.1);\n    color: oklch(42% 0.13 155);\n    border-color: oklch(58% 0.13 155 \/ 0.3);\n  \n}\n.sd-page h1, .sd-page h2, .sd-page h3 {\n font-family: 'DM Serif Display', serif; line-height: 1.15; letter-spacing: -0.01em; \n}\n.sd-page h2.section-title {\n font-size: clamp(32px, 4vw, 50px); color: var(--navy); margin-bottom: 16px; \n}\n.sd-page p.section-sub {\n font-size: 18px; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 56px; \n}\n.sd-page .btn {\n\n    display: inline-flex; align-items: center; gap: 8px;\n    background: var(--navy); color: #fff;\n    padding: 14px 28px; border-radius: 100px;\n    font-size: 15px; font-weight: 500;\n    text-decoration: none; border: none; cursor: pointer;\n    transition: all 0.2s; letter-spacing: 0.01em;\n  \n}\n.sd-page .btn:hover {\n background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 6px 24px oklch(22% 0.07 255 \/ 0.25); \n}\n.sd-page .btn-outline {\n\n    background: transparent; color: var(--navy);\n    border: 1.5px solid var(--navy);\n  \n}\n.sd-page .btn-outline:hover {\n background: var(--navy); color: #fff; \n}\n.sd-page .btn-amber {\n background: var(--amber); color: #fff; \n}\n.sd-page .btn-amber:hover {\n background: oklch(64% 0.14 65); \n}\n\/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n.sd-page nav {\n\n    position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n    background: oklch(98.5% 0.006 250 \/ 0.92);\n    backdrop-filter: blur(16px);\n    border-bottom: 1px solid var(--border);\n    height: 68px;\n    display: flex; align-items: center;\n    transition: box-shadow 0.3s;\n  \n}\n.sd-page nav.scrolled {\n box-shadow: 0 2px 20px oklch(22% 0.07 255 \/ 0.08); \n}\n.sd-page .nav-inner {\n\n    display: flex; align-items: center; justify-content: space-between;\n    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;\n  \n}\n.sd-page .nav-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--navy);\n    text-decoration: none;\n  \n}\n.sd-page .nav-logo-icon {\n\n    width: 34px; height: 34px; background: var(--navy);\n    border-radius: 8px; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .nav-logo-icon svg {\n width: 20px; height: 20px; fill: #fff; \n}\n.sd-page .nav-links {\n\n    display: flex; gap: 32px; list-style: none;\n  \n}\n.sd-page .nav-links a {\n color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 0.2s; \n}\n.sd-page .nav-links a:hover {\n color: var(--navy); \n}\n.sd-page .nav-right {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .lang-toggle {\n\n    display: flex; background: var(--bg2); border: 1px solid var(--border);\n    border-radius: 100px; padding: 3px; gap: 2px;\n  \n}\n.sd-page .lang-btn {\n\n    padding: 5px 12px; border-radius: 100px; border: none;\n    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;\n    color: var(--muted); transition: all 0.2s; font-family: 'DM Sans', sans-serif;\n  \n}\n.sd-page .lang-btn.active {\n background: var(--navy); color: #fff; \n}\n\/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n.sd-page .hero {\n\n    padding: 160px 0 100px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .hero-bg {\n\n    position: absolute; inset: 0; z-index: 0;\n    background: radial-gradient(ellipse 80% 60% at 60% 40%, oklch(65% 0.12 255 \/ 0.06) 0%, transparent 70%),\n                radial-gradient(ellipse 50% 40% at 80% 80%, oklch(72% 0.14 65 \/ 0.05) 0%, transparent 60%);\n  \n}\n.sd-page .hero-grid {\n\n    position: absolute; inset: 0; z-index: 0; opacity: 0.3;\n    background-image: \n      linear-gradient(var(--border) 1px, transparent 1px),\n      linear-gradient(90deg, var(--border) 1px, transparent 1px);\n    background-size: 60px 60px;\n    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);\n  \n}\n.sd-page .hero-inner {\n\n    position: relative; z-index: 1;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;\n  \n}\n.sd-page .hero-label {\n font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; \n}\n.sd-page .hero h1 {\n font-size: clamp(42px, 5.5vw, 72px); color: var(--navy); margin-bottom: 24px; \n}\n.sd-page .hero h1 em {\n font-style: italic; color: var(--blue); \n}\n.sd-page .hero-sub {\n font-size: 19px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 480px; \n}\n.sd-page .hero-ctas {\n display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; \n}\n.sd-page .hero-trust {\n\n    display: flex; align-items: center; gap: 16px;\n    font-size: 14px; color: var(--muted);\n  \n}\n.sd-page .hero-trust-icons {\n display: flex; gap: -4px; \n}\n.sd-page .trust-dot {\n\n    width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px;\n    animation: pulse 2s infinite;\n  \n}\n@keyframes pulse {\n{\n opacity: 1; transform: scale(1); \n}\n{\n opacity: 0.6; transform: scale(0.8); \n}\n}\n.sd-page .hero-visual {\n\n    position: relative;\n  \n}\n.sd-page .hero-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px;\n    padding: 28px; box-shadow: var(--shadow-lg);\n    position: relative;\n  \n}\n.sd-page .hero-card-header {\n\n    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;\n    padding-bottom: 16px; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .hero-card-icon {\n\n    width: 40px; height: 40px; background: var(--navy); border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .hero-card-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .hero-card-title {\n font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); \n}\n.sd-page .hero-card-sub {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .dossier-item {\n\n    display: flex; align-items: center; gap: 12px; padding: 10px 12px;\n    border-radius: 10px; margin-bottom: 6px; transition: background 0.2s;\n  \n}\n.sd-page .dossier-item:hover {\n background: var(--bg); \n}\n.sd-page .dossier-item-icon {\n\n    width: 32px; height: 32px; border-radius: 8px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .dossier-item-icon svg {\n width: 16px; height: 16px; \n}\n.sd-page .di-blue {\n background: oklch(65% 0.12 255 \/ 0.12); \n}\n.sd-page .di-blue svg {\n fill: var(--blue); \n}\n.sd-page .di-green {\n background: oklch(58% 0.13 155 \/ 0.12); \n}\n.sd-page .di-green svg {\n fill: var(--green); \n}\n.sd-page .di-amber {\n background: oklch(72% 0.14 65 \/ 0.12); \n}\n.sd-page .di-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .dossier-item-text {\n flex: 1; \n}\n.sd-page .dossier-item-name {\n font-size: 14px; font-weight: 500; color: var(--text); \n}\n.sd-page .dossier-item-meta {\n font-size: 12px; color: var(--muted); \n}\n.sd-page .dossier-item-badge {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n  \n}\n.sd-page .db-secure {\n background: oklch(58% 0.13 155 \/ 0.12); color: oklch(38% 0.13 155); \n}\n.sd-page .db-shared {\n background: oklch(65% 0.12 255 \/ 0.12); color: var(--blue); \n}\n.sd-page .db-private {\n background: oklch(22% 0.07 255 \/ 0.08); color: var(--muted); \n}\n.sd-page .hero-floating {\n\n    position: absolute; background: #fff; border: 1px solid var(--border);\n    border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow);\n    display: flex; align-items: center; gap: 10px;\n    font-size: 13px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .hf-1 {\n top: -20px; right: -24px; \n}\n.sd-page .hf-2 {\n bottom: -20px; left: -24px; \n}\n.sd-page .hf-icon {\n width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .hf-icon svg {\n width: 14px; height: 14px; \n}\n\/* \u2500\u2500\u2500 CLIENTS \/ SECTORS \u2500\u2500\u2500 *\/\n.sd-page .sectors {\n\n    padding: 32px 0 64px;\n    border-top: 1px solid var(--border);\n  \n}\n.sd-page .sectors-label {\n text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; \n}\n.sd-page .sectors-row {\n\n    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;\n  \n}\n.sd-page .sector-pill {\n\n    display: flex; align-items: center; gap: 8px;\n    padding: 8px 18px; border-radius: 100px;\n    background: #fff; border: 1px solid var(--border);\n    font-size: 14px; font-weight: 500; color: var(--text);\n    white-space: nowrap;\n  \n}\n.sd-page .sector-pill svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 HOW IT WORKS \u2500\u2500\u2500 *\/\n.sd-page .how-it-works {\n padding: 100px 0; background: var(--navy); color: #fff; \n}\n.sd-page .how-it-works .badge {\n background: #fff2; border-color: #fff3; color: #ffffffcc; \n}\n.sd-page .how-it-works .section-title {\n color: #fff; \n}\n.sd-page .how-it-works .section-sub {\n color: oklch(80% 0.04 255); \n}\n.sd-page .steps {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; position: relative; \n}\n.sd-page .step {\n\n    background: oklch(32% 0.08 255 \/ 0.5);\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: 16px; padding: 32px 28px;\n    position: relative;\n    transition: background 0.3s;\n  \n}\n.sd-page .step:hover {\n background: oklch(35% 0.09 255 \/ 0.7); \n}\n.sd-page .step-num {\n\n    font-family: 'DM Serif Display', serif; font-size: 56px; color: oklch(65% 0.12 255 \/ 0.2);\n    line-height: 1; margin-bottom: 20px;\n  \n}\n.sd-page .step-icon {\n\n    width: 44px; height: 44px; background: var(--blue); border-radius: 11px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .step-icon svg {\n width: 22px; height: 22px; fill: #fff; \n}\n.sd-page .step h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 10px; \n}\n.sd-page .step p {\n font-size: 14px; color: oklch(75% 0.04 255); line-height: 1.65; \n}\n.sd-page .step-arrow {\n\n    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);\n    z-index: 1; width: 32px; height: 32px;\n    background: var(--navy); border: 1px solid oklch(65% 0.12 255 \/ 0.2);\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  \n}\n.sd-page .step-arrow svg {\n width: 14px; height: 14px; fill: oklch(65% 0.12 255); \n}\n\/* \u2500\u2500\u2500 FEATURES \u2500\u2500\u2500 *\/\n.sd-page .features {\n padding: 100px 0; \n}\n.sd-page .features-grid {\n\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n  \n}\n.sd-page .feature-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px; transition: all 0.25s; cursor: default;\n  \n}\n.sd-page .feature-card:hover {\n box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: oklch(65% 0.12 255 \/ 0.3); \n}\n.sd-page .feature-card.featured {\n\n    background: var(--navy); border-color: var(--navy); grid-column: span 2;\n    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;\n  \n}\n.sd-page .feature-card.featured h3 {\n color: #fff; \n}\n.sd-page .feature-card.featured p {\n color: oklch(78% 0.04 255); \n}\n.sd-page .feature-icon {\n\n    width: 48px; height: 48px; border-radius: 12px;\n    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;\n  \n}\n.sd-page .fi-blue {\n background: oklch(65% 0.12 255 \/ 0.1); \n}\n.sd-page .fi-blue svg {\n fill: var(--blue); \n}\n.sd-page .fi-green {\n background: oklch(58% 0.13 155 \/ 0.1); \n}\n.sd-page .fi-green svg {\n fill: var(--green); \n}\n.sd-page .fi-amber {\n background: oklch(72% 0.14 65 \/ 0.1); \n}\n.sd-page .fi-amber svg {\n fill: oklch(55% 0.14 60); \n}\n.sd-page .fi-light {\n background: #fff2; \n}\n.sd-page .fi-light svg {\n fill: #fff; \n}\n.sd-page .feature-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); margin-bottom: 10px; \n}\n.sd-page .feature-card p {\n font-size: 15px; color: var(--muted); line-height: 1.65; \n}\n.sd-page .feature-visual {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border-radius: 12px; padding: 20px;\n    border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n  \n}\n.sd-page .mini-perm {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;\n    font-size: 13px; font-weight: 500;\n  \n}\n.sd-page .mp-user {\n color: #fff; \n}\n.sd-page .mp-role {\n font-size: 11px; padding: 2px 8px; border-radius: 100px; \n}\n.sd-page .mp-admin {\n background: oklch(65% 0.12 255 \/ 0.3); color: oklch(80% 0.12 255); \n}\n.sd-page .mp-edit {\n background: oklch(58% 0.13 155 \/ 0.3); color: oklch(78% 0.13 155); \n}\n.sd-page .mp-read {\n background: oklch(72% 0.14 65 \/ 0.3); color: oklch(88% 0.14 65); \n}\n.sd-page .mp-none {\n background: #fff1; color: #fff6; \n}\n\/* \u2500\u2500\u2500 SECURITY \u2500\u2500\u2500 *\/\n.sd-page .security {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .security-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .security-visual {\n\n    background: var(--navy); border-radius: 24px; padding: 48px;\n    position: relative; overflow: hidden;\n  \n}\n.sd-page .security-visual::before {\n\n    content: ''; position: absolute; inset: 0;\n    background: radial-gradient(ellipse 80% 80% at 20% 20%, oklch(65% 0.12 255 \/ 0.15) 0%, transparent 60%);\n  \n}\n.sd-page .shield-big {\n\n    width: 100px; height: 100px; margin: 0 auto 32px;\n    background: oklch(65% 0.12 255 \/ 0.15); border-radius: 50%;\n    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;\n  \n}\n.sd-page .shield-big::before {\n\n    content: ''; position: absolute; inset: -8px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.2); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite;\n  \n}\n.sd-page .shield-big::after {\n\n    content: ''; position: absolute; inset: -18px;\n    border: 2px solid oklch(65% 0.12 255 \/ 0.1); border-radius: 50%;\n    animation: ring 2.5s ease-in-out infinite 0.4s;\n  \n}\n@keyframes ring {\n{\n transform: scale(1); opacity: 1; \n}\n{\n transform: scale(1.15); opacity: 0; \n}\n}\n.sd-page .shield-big svg {\n width: 52px; height: 52px; fill: #fff; position: relative; z-index: 1; \n}\n.sd-page .security-check-list {\n list-style: none; position: relative; z-index: 1; \n}\n.sd-page .security-check-list li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid oklch(65% 0.12 255 \/ 0.12);\n    font-size: 14px; color: oklch(85% 0.04 255);\n  \n}\n.sd-page .security-check-list li:last-child {\n border-bottom: none; \n}\n.sd-page .check-icon {\n\n    width: 20px; height: 20px; border-radius: 50%; background: var(--green);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;\n  \n}\n.sd-page .check-icon svg {\n width: 10px; height: 10px; fill: #fff; \n}\n.sd-page .security-badges {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; \n}\n.sd-page .sec-badge {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 20px 16px; text-align: center;\n  \n}\n.sd-page .sec-badge-icon {\n font-size: 28px; margin-bottom: 8px; \n}\n.sd-page .sec-badge-label {\n font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .sec-badge-sub {\n font-size: 12px; color: var(--muted); \n}\n\/* \u2500\u2500\u2500 NETHERLANDS \u2500\u2500\u2500 *\/\n.sd-page .netherlands {\n padding: 100px 0; \n}\n.sd-page .nl-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .nl-visual {\n position: relative; \n}\n.sd-page .nl-map {\n\n    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;\n    padding: 40px; text-align: center;\n  \n}\n.sd-page .nl-flag-stripe {\n height: 6px; border-radius: 3px; margin-bottom: 4px; \n}\n.sd-page .flag-red {\n background: #AE1C28; \n}\n.sd-page .flag-white {\n background: #fff; border: 1px solid var(--border); \n}\n.sd-page .flag-blue {\n background: #21468B; \n}\n.sd-page .nl-flag {\n border-radius: 6px; overflow: hidden; width: 72px; margin: 0 auto 24px; \n}\n.sd-page .nl-stat {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 12px;\n    padding: 16px 20px; margin-top: 12px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .nl-stat-icon {\n\n    width: 36px; height: 36px; border-radius: 9px;\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-stat-val {\n font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--navy); \n}\n.sd-page .nl-stat-lab {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .nl-points {\n list-style: none; \n}\n.sd-page .nl-points li {\n\n    display: flex; align-items: flex-start; gap: 16px;\n    padding: 20px 0; border-bottom: 1px solid var(--border);\n  \n}\n.sd-page .nl-points li:last-child {\n border-bottom: none; \n}\n.sd-page .nl-point-icon {\n\n    width: 40px; height: 40px; border-radius: 10px; background: var(--bg2);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n  \n}\n.sd-page .nl-point-icon svg {\n width: 20px; height: 20px; fill: var(--blue); \n}\n.sd-page .nl-point-title {\n font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 4px; \n}\n.sd-page .nl-point-text {\n font-size: 14px; color: var(--muted); line-height: 1.6; \n}\n\/* \u2500\u2500\u2500 ROLES \u2500\u2500\u2500 *\/\n.sd-page .roles {\n padding: 100px 0; background: var(--navy); \n}\n.sd-page .roles .section-title {\n color: #fff; \n}\n.sd-page .roles .section-sub {\n color: oklch(78% 0.04 255); \n}\n.sd-page .roles .badge {\n background: #fff1; border-color: #fff2; color: #ffffffbb; \n}\n.sd-page .roles-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; \n}\n.sd-page .role-card {\n\n    background: oklch(32% 0.08 255 \/ 0.4); border: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    border-radius: var(--radius); padding: 28px; transition: all 0.25s;\n  \n}\n.sd-page .role-card:hover {\n background: oklch(35% 0.09 255 \/ 0.6); border-color: oklch(65% 0.12 255 \/ 0.35); \n}\n.sd-page .role-icon {\n\n    width: 48px; height: 48px; border-radius: 12px; background: var(--blue);\n    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;\n  \n}\n.sd-page .role-icon svg {\n width: 24px; height: 24px; fill: #fff; \n}\n.sd-page .role-card h3 {\n font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 8px; \n}\n.sd-page .role-card p {\n font-size: 14px; color: oklch(72% 0.04 255); margin-bottom: 16px; line-height: 1.6; \n}\n.sd-page .role-perms {\n list-style: none; \n}\n.sd-page .role-perms li {\n\n    display: flex; align-items: center; gap: 8px;\n    font-size: 13px; color: oklch(75% 0.04 255); padding: 4px 0;\n  \n}\n.sd-page .perm-check {\n color: var(--green); font-size: 14px; \n}\n.sd-page .perm-x {\n color: oklch(60% 0.12 25); \n}\n\/* \u2500\u2500\u2500 DATA SHARING \u2500\u2500\u2500 *\/\n.sd-page .sharing {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .sharing-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; \n}\n.sd-page .sharing-visual {\n display: flex; flex-direction: column; gap: 16px; \n}\n.sd-page .share-card {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 14px;\n    padding: 20px 24px; display: flex; align-items: center; gap: 16px;\n  \n}\n.sd-page .share-from, .sd-page .share-to {\n\n    flex: 1; text-align: center;\n    font-size: 14px; font-weight: 500; color: var(--text);\n  \n}\n.sd-page .share-from small, .sd-page .share-to small {\n\n    display: block; font-size: 12px; color: var(--muted); font-weight: 400;\n  \n}\n.sd-page .share-arrow {\n\n    display: flex; flex-direction: column; align-items: center; gap: 4px;\n    flex-shrink: 0;\n  \n}\n.sd-page .share-line {\n\n    width: 60px; height: 2px; border-radius: 1px;\n    position: relative; overflow: visible;\n  \n}\n.sd-page .share-line::after {\n\n    content: ''; position: absolute; right: 0; top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n  \n}\n.sd-page .sl-blue {\n background: var(--blue); \n}\n.sd-page .sl-blue::after {\n border-left-color: var(--blue); \n}\n.sd-page .sl-green {\n background: var(--green); \n}\n.sd-page .sl-green::after {\n border-left-color: var(--green); \n}\n.sd-page .share-perm-label {\n\n    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 100px;\n    white-space: nowrap;\n  \n}\n.sd-page .spl-view {\n background: oklch(65% 0.12 255 \/ 0.1); color: var(--blue); \n}\n.sd-page .spl-edit {\n background: oklch(58% 0.13 155 \/ 0.1); color: var(--green); \n}\n.sd-page .spl-sign {\n background: oklch(72% 0.14 65 \/ 0.1); color: oklch(52% 0.14 55); \n}\n.sd-page .sharing-points {\n list-style: none; \n}\n.sd-page .sharing-points li {\n\n    display: flex; align-items: flex-start; gap: 12px;\n    padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text);\n  \n}\n.sd-page .sharing-points li:last-child {\n border-bottom: none; \n}\n.sd-page .sp-icon {\n color: var(--blue); font-size: 18px; margin-top: 1px; flex-shrink: 0; \n}\n\/* \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500 *\/\n.sd-page .testimonials {\n padding: 100px 0; \n}\n.sd-page .testimonials-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; \n}\n.sd-page .testimonial {\n\n    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);\n    padding: 32px 28px;\n  \n}\n.sd-page .testimonial-quote {\n\n    font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--text);\n    line-height: 1.55; margin-bottom: 24px;\n  \n}\n.sd-page .testimonial-quote::before {\n content: '\\201C'; color: var(--blue); \n}\n.sd-page .testimonial-quote::after {\n content: '\\201D'; color: var(--blue); \n}\n.sd-page .testimonial-author {\n display: flex; align-items: center; gap: 12px; \n}\n.sd-page .author-avatar {\n\n    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Serif Display', serif; font-size: 16px; color: #fff; flex-shrink: 0;\n  \n}\n.sd-page .author-name {\n font-size: 14px; font-weight: 600; color: var(--navy); \n}\n.sd-page .author-role {\n font-size: 13px; color: var(--muted); \n}\n.sd-page .stars {\n color: var(--amber); font-size: 14px; margin-bottom: 16px; \n}\n\/* \u2500\u2500\u2500 FAQ \u2500\u2500\u2500 *\/\n.sd-page .faq {\n padding: 100px 0; background: var(--bg2); \n}\n.sd-page .faq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 80px; \n}\n.sd-page .faq-list {\n}\n.sd-page .faq-item {\n\n    border-bottom: 1px solid var(--border); overflow: hidden;\n  \n}\n.sd-page .faq-q {\n\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 20px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--navy);\n    gap: 16px; transition: color 0.2s;\n  \n}\n.sd-page .faq-q:hover {\n color: var(--blue); \n}\n.sd-page .faq-chevron {\n\n    width: 24px; height: 24px; border-radius: 50%; background: var(--bg);\n    display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n    transition: transform 0.3s, background 0.2s;\n  \n}\n.sd-page .faq-chevron svg {\n width: 12px; height: 12px; fill: var(--navy); transition: fill 0.2s; \n}\n.sd-page .faq-item.open .faq-chevron {\n transform: rotate(180deg); background: var(--navy); \n}\n.sd-page .faq-item.open .faq-chevron svg {\n fill: #fff; \n}\n.sd-page .faq-a {\n\n    font-size: 15px; color: var(--muted); line-height: 1.7;\n    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;\n  \n}\n.sd-page .faq-item.open .faq-a {\n max-height: 300px; padding-bottom: 20px; \n}\n.sd-page .faq-cta {\n\n    background: var(--navy); border-radius: 20px; padding: 40px 36px; color: #fff;\n    display: flex; flex-direction: column; justify-content: center;\n  \n}\n.sd-page .faq-cta h3 {\n font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 12px; \n}\n.sd-page .faq-cta p {\n font-size: 15px; color: oklch(80% 0.04 255); margin-bottom: 28px; line-height: 1.65; \n}\n\/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n.sd-page .contact {\n padding: 100px 0; \n}\n.sd-page .contact-inner {\n\n    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;\n  \n}\n.sd-page .contact-form {\n\n    background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;\n  \n}\n.sd-page .form-row {\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; \n}\n.sd-page .form-group {\n margin-bottom: 20px; \n}\n.sd-page .form-group label {\n display: block; font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; \n}\n.sd-page .form-group input, .sd-page .form-group select, .sd-page .form-group textarea {\n\n    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;\n    font-size: 15px; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--bg);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  \n}\n.sd-page .form-group input:focus, .sd-page .form-group select:focus, .sd-page .form-group textarea:focus {\n\n    border-color: var(--blue); box-shadow: 0 0 0 3px oklch(65% 0.12 255 \/ 0.1);\n  \n}\n.sd-page .form-group textarea {\n resize: vertical; min-height: 100px; \n}\n.sd-page .contact-info {\n padding-top: 8px; \n}\n.sd-page .contact-info h3 {\n font-family: 'DM Serif Display', serif; font-size: 32px; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .contact-info p {\n font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.7; \n}\n.sd-page .contact-items {\n list-style: none; \n}\n.sd-page .contact-items li {\n\n    display: flex; align-items: center; gap: 12px;\n    padding: 12px 0; border-bottom: 1px solid var(--border);\n    font-size: 15px; color: var(--text);\n  \n}\n.sd-page .contact-items li:last-child {\n border-bottom: none; \n}\n.sd-page .ci-icon {\n width: 34px; height: 34px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .ci-icon svg {\n width: 16px; height: 16px; fill: var(--blue); \n}\n\/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n.sd-page footer {\n\n    background: var(--navy); color: oklch(75% 0.04 255); padding: 64px 0 40px;\n  \n}\n.sd-page .footer-grid {\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; \n}\n.sd-page .footer-brand {\n}\n.sd-page .footer-logo {\n\n    display: flex; align-items: center; gap: 10px;\n    font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; margin-bottom: 16px;\n  \n}\n.sd-page .footer-logo-icon {\n width: 32px; height: 32px; background: #fff2; border-radius: 7px; display: flex; align-items: center; justify-content: center; \n}\n.sd-page .footer-logo-icon svg {\n width: 18px; height: 18px; fill: #fff; \n}\n.sd-page .footer-brand p {\n font-size: 14px; line-height: 1.7; \n}\n.sd-page .footer-col h4 {\n color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; \n}\n.sd-page .footer-col ul {\n list-style: none; \n}\n.sd-page .footer-col ul li {\n margin-bottom: 10px; \n}\n.sd-page .footer-col ul li a {\n color: oklch(72% 0.04 255); text-decoration: none; font-size: 14px; transition: color 0.2s; \n}\n.sd-page .footer-col ul li a:hover {\n color: #fff; \n}\n.sd-page .footer-bottom {\n\n    border-top: 1px solid oklch(65% 0.12 255 \/ 0.15);\n    padding-top: 28px; display: flex; justify-content: space-between; align-items: center;\n    font-size: 13px; flex-wrap: wrap; gap: 12px;\n  \n}\n.sd-page .footer-nl {\n display: flex; align-items: center; gap: 6px; \n}\n\/* \u2500\u2500\u2500 TWEAKS PANEL \u2500\u2500\u2500 *\/\n.sd-page #tweaks-panel {\n\n    position: fixed; bottom: 24px; right: 24px; z-index: 999;\n    background: #fff; border: 1px solid var(--border); border-radius: 16px;\n    padding: 20px; width: 260px; box-shadow: var(--shadow-lg);\n    display: none;\n  \n}\n.sd-page #tweaks-panel.visible {\n display: block; \n}\n.sd-page #tweaks-panel h4 {\n font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; \n}\n.sd-page .tweak-row {\n margin-bottom: 14px; \n}\n.sd-page .tweak-row label {\n display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; \n}\n.sd-page .tweak-row input[type=color] {\n width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; \n}\n.sd-page .tweak-row select {\n width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); cursor: pointer; \n}\n\/* \u2500\u2500\u2500 ANIMATIONS \u2500\u2500\u2500 *\/\n.sd-page .fade-up {\n opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; \n}\n.sd-page .fade-up.visible {\n opacity: 1; transform: translateY(0); \n}\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .sd-page .hero-inner, .sd-page .security-grid, .sd-page .nl-inner, .sd-page .sharing-grid, .sd-page .contact-inner, .sd-page .faq-grid {\n grid-template-columns: 1fr; gap: 48px; \n}\n  .sd-page .steps {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 2; grid-template-columns: 1fr; gap: 24px; \n}\n  .sd-page .roles-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .testimonials-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr 1fr; \n}\n  .sd-page .nav-links {\n display: none; \n}\n  .sd-page .hero-floating {\n display: none; \n}\n}\n@media (max-width: 600px) {\n  .sd-page .steps {\n grid-template-columns: 1fr; \n}\n  .sd-page .features-grid {\n grid-template-columns: 1fr; \n}\n  .sd-page .feature-card.featured {\n grid-column: span 1; \n}\n  .sd-page .security-badges {\n grid-template-columns: 1fr; \n}\n  .sd-page .form-row {\n grid-template-columns: 1fr; \n}\n  .sd-page .footer-grid {\n grid-template-columns: 1fr; \n}\n}\n\/* Language hidden *\/\n.sd-page [data-lang] {\n}\n.sd-page.en [data-lang=\"nl\"] {\n display: none !important; \n}\n.sd-page.nl [data-lang=\"en\"] {\n display: none !important; \n}\n\n\/* \u2500\u2500 Twenty Twenty-Five: Full Width Fix \u2500\u2500 *\/\n\n\/* Override TT25 content width constraints op het blok zelf *\/\n.wp-block-html:has(.sd-page),\n.entry-content .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n\/* Override TT25 layout flow breedte beperking *\/\n.is-layout-flow > .wp-block-html:has(.sd-page),\n.is-layout-constrained > .wp-block-html:has(.sd-page) {\n  max-width: none !important;\n  width: 100% !important;\n}\n\n\/* De sd-page zelf: volledige breedte, geen marge *\/\n.sd-page {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  box-sizing: border-box !important;\n  overflow-x: clip;\n}\n\n\/* Container binnen sd-page: gecentreerd met max-width *\/\n.sd-page .container {\n  max-width: 1160px !important;\n  width: 100% !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n  box-sizing: border-box !important;\n}\n\n\/* Secties, nav en footer: ook full width *\/\n.sd-page > section,\n.sd-page > nav,\n.sd-page > footer {\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  box-sizing: border-box !important;\n}\n\n<\/style>\n\n<div class=\"sd-page nl\">\n<footer>\n  <div class=\"container\">\n    <div class=\"footer-grid\">\n      <div class=\"footer-brand\">\n        <div class=\"footer-logo\">\n          <div class=\"footer-logo-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 4l6 2.67V11c0 3.75-2.54 7.26-6 8.4C8.54 18.26 6 14.75 6 11V7.67L12 5z\"><\/path><\/svg><\/div>\n          SecureDossier\n        <\/div>\n        <p data-lang=\"nl\">Veilig dossierbeheer voor Nederlandse organisaties. Uw data, uw eigendom \u2014 opgeslagen in Nederland.<\/p>\n        <p data-lang=\"en\">Secure dossier management for Dutch organizations. Your data, your property \u2014 stored in the Netherlands.<\/p>\n      <\/div>\n      <div class=\"footer-col\">\n        <h4 data-lang=\"nl\">Product<\/h4>\n        <h4 data-lang=\"en\">Product<\/h4>\n        <ul>\n          <li><a href=\"#features\" data-lang=\"nl\">Functies<\/a><a href=\"#features\" data-lang=\"en\">Features<\/a><\/li>\n          <li><a href=\"#security\" data-lang=\"nl\">Beveiliging<\/a><a href=\"#security\" data-lang=\"en\">Security<\/a><\/li>\n          <li><a href=\"#roles\" data-lang=\"nl\">Rollen<\/a><a href=\"#roles\" data-lang=\"en\">Roles<\/a><\/li>\n          <li><a href=\"#contact\" data-lang=\"nl\">Demo<\/a><a href=\"#contact\" data-lang=\"en\">Demo<\/a><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"footer-col\">\n        <h4 data-lang=\"nl\">Compliance<\/h4>\n        <h4 data-lang=\"en\">Compliance<\/h4>\n        <ul>\n          <li><a href=\"#\">AVG \/ GDPR<\/a><\/li>\n          <li><a href=\"#\">ISO 27001<\/a><\/li>\n          <li><a href=\"#netherlands\" data-lang=\"nl\">Data in NL<\/a><a href=\"#netherlands\" data-lang=\"en\">Data in NL<\/a><\/li>\n          <li><a href=\"#\" data-lang=\"nl\">Verwerkersovereenkomst<\/a><a href=\"#\" data-lang=\"en\">Data Processing Agreement<\/a><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"footer-col\">\n        <h4 data-lang=\"nl\">Bedrijf<\/h4>\n        <h4 data-lang=\"en\">Company<\/h4>\n        <ul>\n          <li><a href=\"#\" data-lang=\"nl\">Over ons<\/a><a href=\"#\" data-lang=\"en\">About us<\/a><\/li>\n          <li><a href=\"#contact\" data-lang=\"nl\">Contact<\/a><a href=\"#contact\" data-lang=\"en\">Contact<\/a><\/li>\n          <li><a href=\"#\" data-lang=\"nl\">Privacybeleid<\/a><a href=\"#\" data-lang=\"en\">Privacy policy<\/a><\/li>\n          <li><a href=\"#\" data-lang=\"nl\">Algemene voorwaarden<\/a><a href=\"#\" data-lang=\"en\">Terms of service<\/a><\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n      <span data-lang=\"nl\">\u00a9 2026 SecureDossier. Alle rechten voorbehouden.<\/span>\n      <span data-lang=\"en\">\u00a9 2026 SecureDossier. All rights reserved.<\/span>\n      <div class=\"footer-nl\">\n        <span>\ud83c\uddf3\ud83c\uddf1<\/span>\n        <span data-lang=\"nl\">Gemaakt in Nederland<\/span>\n        <span data-lang=\"en\">Made in the Netherlands<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/footer>\n<\/div>\n\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n\n  \/\/ \u2500\u2500 Taalswitch: zet nl\/en class op alle .sd-page wrappers \u2500\u2500\n  var currentLang = localStorage.getItem('sd-lang') || 'nl';\n\n  function setLang(lang) {\n    currentLang = lang;\n    localStorage.setItem('sd-lang', lang);\n    \/\/ Zet taal op alle sd-page wrappers (elk blok heeft er \u00e9\u00e9n)\n    document.querySelectorAll('.sd-page').forEach(function(el) {\n      el.classList.remove('nl', 'en');\n      el.classList.add(lang);\n    });\n    var btnNl = document.getElementById('btn-nl');\n    var btnEn = document.getElementById('btn-en');\n    if (btnNl) btnNl.classList.toggle('active', lang === 'nl');\n    if (btnEn) btnEn.classList.toggle('active', lang === 'en');\n    document.documentElement.lang = lang;\n  }\n\n  setLang(currentLang);\n\n  var btnNl = document.getElementById('btn-nl');\n  var btnEn = document.getElementById('btn-en');\n  if (btnNl) btnNl.addEventListener('click', function() { setLang('nl'); });\n  if (btnEn) btnEn.addEventListener('click', function() { setLang('en'); });\n\n  \/\/ \u2500\u2500 Navigatie scroll effect \u2500\u2500\n  window.addEventListener('scroll', function() {\n    var nav = document.getElementById('main-nav');\n    if (nav) nav.classList.toggle('scrolled', window.scrollY > 20);\n  });\n\n  \/\/ \u2500\u2500 FAQ accordion \u2500\u2500\n  document.querySelectorAll('.faq-q').forEach(function(q) {\n    q.addEventListener('click', function() {\n      var item = q.parentElement;\n      var isOpen = item.classList.contains('open');\n      document.querySelectorAll('.faq-item').forEach(function(i) {\n        i.classList.remove('open');\n      });\n      if (!isOpen) item.classList.add('open');\n    });\n  });\n\n  \/\/ \u2500\u2500 Scroll animaties (fade-up) \u2500\u2500\n  if ('IntersectionObserver' in window) {\n    var observer = new IntersectionObserver(function(entries) {\n      entries.forEach(function(e) {\n        if (e.isIntersecting) {\n          e.target.classList.add('visible');\n          observer.unobserve(e.target);\n        }\n      });\n    }, { threshold: 0.1 });\n    document.querySelectorAll('.fade-up').forEach(function(el) {\n      observer.observe(el);\n    });\n  } else {\n    document.querySelectorAll('.fade-up').forEach(function(el) {\n      el.classList.add('visible');\n    });\n  }\n\n});\n<\/script>\n\n\n\n<elevenlabs-convai agent-id=\"agent_1401kqhkmhkyf36s7wzqb0v6z9cx\"><\/elevenlabs-convai><script src=\"https:\/\/unpkg.com\/@elevenlabs\/convai-widget-embed\" async type=\"text\/javascript\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SecureDossier FunctiesFeatures BeveiligingSecurity Data in NLData in NL RollenRoles FAQFAQ NL EN Demo aanvragen Request demo Veilig. Nederlands. Uw eigendom. Secure. Dutch. Your property. Uw Dossier,uw eigendom! Your Dossier,your property! De veilige, digitale omgeving voor al uw dossiers \u2014 opgeslagen in Nederland, volledig AVG-compliant en altijd onder uw eigen beheer. The secure digital environment for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"claude-advies","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":14,"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/securedossier.nl\/index.php\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}