*{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1246D6;
  --blue-dark:#0C35A8;
  --blue-pale:#E8EFFF;
  --blue-mid:#4D7EFF;
  --orange:#FF4500;
  --orange-dark:#D93B00;
  --orange-pale:#FFF1EC;
  --ink:#0B1740;
  --ink-mid:#1C2E5E;
  --muted:#4A5A80;
  --faint:#8FA3CC;
  --white:#FFFFFF;
  --off:#F4F7FF;
  --border:#D5DFFF;
  --border-strong:#A8BEF5;
}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--white);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,.faq-q:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* STICKY NAV OFFSET — voorkomt dat nav de sectie bedekt */
section[id], div[id]{scroll-margin-top: 80px}

/* SCROLL ANIMATIONS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:box-shadow .3s}
nav.scrolled{box-shadow:0 4px 24px rgba(18,70,214,.08)}
.nav-wrap{max-width:1140px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;text-decoration:none;transition:opacity .2s}
.logo:hover{opacity:.85}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .15s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s;border-radius:2px}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;gap:8px;align-items:center}
.nav-phone{font-size:12.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;text-decoration:none}
.nav-phone-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
.nav-btn{font-size:13px;font-weight:600;padding:8px 18px;border-radius:8px;text-decoration:none;transition:all .18s}
.nav-btn-ghost{border:1.5px solid var(--border-strong);color:var(--ink-mid)}
.nav-btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.nav-btn-fill{background:var(--orange);color:#fff;box-shadow:0 2px 10px rgba(255,69,0,.25)}
.nav-btn-fill:hover{background:var(--orange-dark);transform:translateY(-1px)}

/* HERO */
.hero{max-width:1140px;margin:0 auto;padding:72px 40px 64px;text-align:center;overflow:visible}
.hero h1{font-size:clamp(38px,5.5vw,72px);font-weight:800;line-height:1.1;letter-spacing:-2.5px;color:var(--ink);margin-bottom:10px;overflow:visible}
.rotate-wrap{display:block;position:relative;overflow:hidden;width:100%;height:1.2em;margin-top:4px;font-size:clamp(38px,5.5vw,72px);font-weight:800;letter-spacing:-2.5px;line-height:1.08}
.rotate-word{display:block;position:absolute;left:0;right:0;text-align:center;color:var(--blue);transition:transform .55s cubic-bezier(.77,0,.175,1),opacity .45s;white-space:nowrap}
.rotate-word.active{transform:translateY(0);opacity:1}
.rotate-word.above{transform:translateY(-115%);opacity:0}
.rotate-word.below{transform:translateY(115%);opacity:0}
.hero-sub{font-size:17px;font-weight:400;color:var(--muted);line-height:1.75;max-width:520px;margin:24px auto 40px;font-style:italic}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-fill{background:var(--orange);color:#fff;font-size:14.5px;font-weight:700;padding:14px 30px;border-radius:10px;text-decoration:none;transition:all .2s;display:inline-block;box-shadow:0 4px 16px rgba(255,69,0,.28)}
.btn-fill:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,69,0,.35)}
.btn-ghost{border:1.5px solid var(--border-strong);color:var(--ink);font-size:14.5px;font-weight:500;padding:13px 28px;border-radius:10px;text-decoration:none;transition:all .18s;display:inline-block}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}

/* MARQUEE */
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--off);overflow:hidden;margin-top:64px}
.marquee-label{text-align:center;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);padding:14px 0 8px}
.marquee-track{display:flex;padding-bottom:14px;overflow:hidden}
.marquee-inner{display:inline-flex;flex-shrink:0;animation:scroll 28s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.m-item{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 40px;border-right:1px solid var(--border);height:34px;font-size:12.5px;font-weight:700;color:var(--faint);letter-spacing:0.05em;white-space:nowrap}
.m-item span{font-size:16px}

/* STATS */
.stats{max-width:1140px;margin:72px auto 0;padding:0 40px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.stat{padding:32px 24px;text-align:center;border-right:1px solid var(--border);transition:background .2s}
.stat:last-child{border-right:none}
.stat:hover{background:var(--off)}
.stat-n{font-size:44px;font-weight:800;letter-spacing:-2px;color:var(--ink);line-height:1}
.stat-n em{color:var(--orange);font-style:normal}
.stat-l{font-size:12px;font-weight:500;color:var(--muted);margin-top:7px;line-height:1.45}

/* BANNER / HERO VISUAL */
.banner{max-width:1140px;margin:56px auto 0;padding:0 40px}
.banner-box{border-radius:20px;overflow:hidden;border:1px solid var(--border);position:relative;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 60%,#0A2264 100%);padding:64px 56px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.banner-box::before{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;background:rgba(255,255,255,.04);border-radius:50%}
.banner-box::after{content:'';position:absolute;bottom:-60px;left:30%;width:200px;height:200px;background:rgba(255,69,0,.1);border-radius:50%}
.banner-label{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px;position:relative;z-index:1}
.banner-h{font-size:clamp(22px,3vw,36px);font-weight:800;letter-spacing:-1px;line-height:1.12;color:#fff;margin-bottom:10px;position:relative;z-index:1}
.banner-h em{color:#FF7A4D;font-style:normal}
.banner-sub{font-size:14px;color:rgba(255,255,255,.6);line-height:1.7;max-width:420px;position:relative;z-index:1}
.banner-right{display:flex;flex-direction:column;gap:10px;min-width:180px;position:relative;z-index:1}
.banner-btn-w{background:#fff;color:var(--blue);font-size:13.5px;font-weight:700;padding:13px 22px;border-radius:9px;text-decoration:none;text-align:center;display:block;transition:all .18s}
.banner-btn-w:hover{background:var(--off);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.banner-btn-o{border:1.5px solid rgba(255,255,255,.3);color:#fff;font-size:13.5px;font-weight:500;padding:12px 20px;border-radius:9px;text-decoration:none;text-align:center;display:block;transition:all .18s}
.banner-btn-o:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ABOUT */
.about{max-width:1140px;margin:108px auto 0;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue-dark);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--blue);border-radius:2px;flex-shrink:0}
.sec-h2{font-size:clamp(26px,3.2vw,42px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--ink);margin-bottom:18px}
.about-body{font-size:15px;color:var(--muted);line-height:1.82;margin-bottom:14px}
.pullquote{margin-top:28px;padding:20px 24px;background:var(--off);border-left:3px solid var(--orange);border-radius:0 8px 8px 0}
.pullquote p{font-size:15px;font-style:italic;color:var(--ink-mid);line-height:1.62;margin:0}
.pullquote cite{display:block;font-size:10.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--faint);margin-top:8px;font-style:normal}

/* PLATFORM CARDS */
.platform-stack{display:flex;flex-direction:column;gap:12px}
.platform-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:14px;transition:all .22s;text-decoration:none}
.platform-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 28px rgba(18,70,214,.1)}
.platform-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.platform-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.platform-desc{font-size:12px;color:var(--muted);margin-top:2px}
.platform-arrow{margin-left:auto;font-size:13px;font-weight:700;color:var(--blue);transition:gap .2s}
.platform-tip{background:var(--off);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.platform-tip p{font-size:13px;color:var(--muted);line-height:1.6}
.platform-tip strong{color:var(--ink)}

/* PROCES */
.proces{background:var(--off);margin-top:108px;padding:90px 40px}
.proces-inner{max-width:1140px;margin:0 auto}
.proces-head{text-align:center;margin-bottom:56px}
.proces-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.proces-steps::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(to right,var(--blue),var(--border-strong));z-index:0}
.step{text-align:center;padding:0 16px;position:relative;z-index:1}
.step-circle{width:56px;height:56px;border-radius:50%;background:var(--white);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:15px;font-weight:800;color:var(--blue);transition:all .25s;box-shadow:0 4px 16px rgba(18,70,214,.12)}
.step:hover .step-circle{background:var(--blue);color:#fff;transform:scale(1.1);box-shadow:0 8px 24px rgba(18,70,214,.3)}
.step-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.step-desc{font-size:13px;color:var(--muted);line-height:1.65}

/* DIENSTEN */
.diensten{background:var(--white);margin-top:108px;padding:90px 40px}
.diensten-inner{max-width:1140px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:52px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:32px;transition:all .25s;position:relative;overflow:hidden;cursor:default}
.svc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1);border-radius:3px 3px 0 0}
.svc:hover{border-color:var(--border-strong);transform:translateY(-4px);box-shadow:0 16px 40px rgba(18,70,214,.08)}
.svc:hover::before{transform:scaleX(1)}
.svc-num{font-size:10.5px;font-weight:700;letter-spacing:0.1em;color:var(--faint);margin-bottom:16px}
.svc-title{font-size:24px;font-weight:800;letter-spacing:-0.5px;color:var(--ink);margin-bottom:10px}
.svc-desc{font-size:13.5px;color:var(--muted);line-height:1.75;margin-bottom:20px}
.svc-list{display:flex;flex-direction:column;gap:7px;padding-top:16px;border-top:1px solid var(--border)}
.svc-item{font-size:13px;color:var(--ink-mid);display:flex;align-items:center;gap:9px;font-weight:500}
.svc-item::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;transition:transform .2s}
.svc:hover .svc-item::before{transform:scale(1.4)}
.svc-more{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--orange);text-decoration:none;margin-top:18px;transition:gap .2s}
.svc-more:hover{gap:10px}

/* WAARDEN */
.waarden{max-width:1140px;margin:108px auto 0;padding:0 40px}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.val{border:1.5px solid var(--border);border-radius:16px;padding:32px;transition:all .22s;cursor:default}
.val:hover{border-color:var(--orange);background:var(--orange-pale);transform:translateY(-3px)}
.val-num{width:38px;height:38px;border-radius:50%;background:var(--orange-pale);border:1.5px solid rgba(255,69,0,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--orange);margin-bottom:16px;transition:all .22s}
.val:hover .val-num{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.1)}
.val-title{font-size:17px;font-weight:800;letter-spacing:-0.3px;color:var(--ink);margin-bottom:8px}
.val-desc{font-size:13.5px;color:var(--muted);line-height:1.75}

/* TESTIMONIALS */
.testimonials{background:var(--ink);margin-top:108px;padding:90px 40px}
.t-inner{max-width:1140px;margin:0 auto}
.t-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue-mid);margin-bottom:12px;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px}
.t-eyebrow::before,.t-eyebrow::after{content:'';width:32px;height:1px;background:var(--blue);opacity:.3}
.t-h2{font-size:clamp(26px,3.2vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;color:#fff;text-align:center;margin-bottom:48px}
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.t-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:32px;transition:all .25s;cursor:default}
.t-card:hover{border-color:rgba(18,70,214,.4);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.t-stars{color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
.t-quote{font-size:15px;font-style:italic;color:rgba(255,255,255,.72);line-height:1.72;margin-bottom:24px}
.t-rule{height:1px;background:rgba(255,255,255,.07);margin-bottom:16px}
.t-author{display:flex;align-items:center;gap:12px}
.t-av{width:42px;height:42px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}
.t-name{font-size:13.5px;font-weight:700;color:#fff}
.t-pos{font-size:11.5px;color:rgba(255,255,255,.35)}

/* FAQ */
.faq{max-width:1140px;margin:108px auto 0;padding:0 40px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.faq-item{border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:var(--border-strong)}
.faq-q{padding:20px 24px;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .18s;user-select:none}
.faq-q:hover{background:var(--off)}
.faq-icon{width:22px;height:22px;border-radius:50%;background:var(--blue-pale);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;color:var(--blue);transition:all .25s;line-height:1}
.faq-item.open .faq-icon{background:var(--blue);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1),padding .25s}
.faq-item.open .faq-a{max-height:none}
.faq-a-inner{padding:0 24px 20px;font-size:14px;color:var(--muted);line-height:1.75}

/* PLATFORMS SECTIE */
.platforms{background:var(--off);margin-top:108px;padding:90px 40px}
.platforms-inner{max-width:1140px;margin:0 auto}
.plat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.plat-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:28px;transition:all .22s;text-decoration:none;display:flex;align-items:center;gap:18px}
.plat-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 10px 32px rgba(18,70,214,.1)}
.plat-icon-big{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.plat-name{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px}
.plat-desc{font-size:13px;color:var(--muted);line-height:1.6}
.plat-more{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--blue);margin-top:10px;transition:gap .18s}
.plat-card:hover .plat-more{gap:9px}
.plat-tip{grid-column:1/-1;background:var(--blue);border-radius:14px;padding:28px 32px;display:flex;align-items:center;gap:20px}
.plat-tip-icon{font-size:28px;flex-shrink:0}
.plat-tip h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:6px}
.plat-tip p{font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.65}
.plat-tip a{color:#FF9B7A;text-decoration:none;font-weight:600}
.plat-tip a:hover{color:#fff}

/* CTA */
.cta-section{max-width:1140px;margin:108px auto;padding:0 40px}
/* Natural contact height keeps the footer close to the contact card. */
#contact{scroll-margin-top:90px;margin-bottom:48px}
@media(max-width:600px){#contact{scroll-margin-top:86px;margin-bottom:32px}}
.cta-box{background:var(--blue);border-radius:20px;padding:72px 56px;display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:rgba(255,255,255,.05);border-radius:50%}
.cta-box::after{content:'';position:absolute;bottom:-50px;left:40%;width:180px;height:180px;background:var(--orange);opacity:.12;border-radius:50%}
.cta-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px;position:relative;z-index:1}
.cta-h2{font-size:clamp(24px,3vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:#fff;position:relative;z-index:1}
.cta-h2 span{color:#FF9B7A}
.cta-sub{font-size:15px;color:rgba(255,255,255,.6);margin-top:10px;line-height:1.7;position:relative;z-index:1}
.cta-right{display:flex;flex-direction:column;gap:10px;min-width:200px;position:relative;z-index:1}
.cta-btn-w{background:#fff;color:var(--blue);font-size:14px;font-weight:700;padding:14px 26px;border-radius:9px;text-decoration:none;text-align:center;display:block;transition:all .18s}
.cta-btn-w:hover{background:var(--off);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.cta-btn-o{border:1.5px solid rgba(255,255,255,.3);color:#fff;font-size:14px;font-weight:500;padding:13px 24px;border-radius:9px;text-decoration:none;text-align:center;display:block;transition:all .18s}
.cta-btn-o:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta-contact{text-align:center;margin-top:4px}
.cta-contact a{display:block;font-size:11.5px;color:rgba(255,255,255,.4);text-decoration:none;line-height:2.2;transition:color .15s}
.cta-contact a:hover{color:#fff}

/* FOOTER */
footer{background:var(--ink);padding:80px 40px 40px}
.footer-inner{max-width:1140px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-logo{display:flex;align-items:center;margin-bottom:14px}
.footer-tagline{font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.75;margin-bottom:16px;max-width:280px}
.footer-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.4);padding:4px 12px;border-radius:100px}
.f-col h4{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px}
.f-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.f-links a{font-size:13.5px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .15s}
.f-links a:hover{color:#fff}
.f-rule{height:1px;background:rgba(255,255,255,.07);margin-bottom:28px}
.f-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.25)}
.f-bl{display:flex;gap:24px}
.f-bl a{color:rgba(255,255,255,.25);text-decoration:none;transition:color .15s}
.f-bl a:hover{color:rgba(255,255,255,.6)}

@media(max-width:900px){
  .nav-links,.nav-phone{display:none}
  .hero h1{letter-spacing:-1.5px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .about{grid-template-columns:1fr}
  .banner-box{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .val-grid{grid-template-columns:1fr}
  .t-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .plat-grid{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .proces-steps{grid-template-columns:1fr 1fr;gap:32px}
  .proces-steps::before{display:none}
}

@media(max-width:600px){
  .nav-wrap{padding:0 18px;height:62px}
  .logo svg{width:168px;height:auto}
  .nav-btn{padding:8px 12px;font-size:12px}
  .hero{padding:52px 18px 44px}
  .hero h1,.rotate-wrap{letter-spacing:-1.4px}
  .rotate-wrap{font-size:clamp(26px,8vw,38px)}
  .stats,.banner,.about,.waarden,.faq,.cta-section,.img-section{padding-left:18px;padding-right:18px}
  .stats{margin-top:48px}
  .stat{padding:24px 12px}
  .stat-n{font-size:34px}
  .banner-box,.cta-box{padding:40px 24px}
  .proces,.diensten,.platforms,.testimonials{padding:68px 18px}
  .proces-steps{grid-template-columns:1fr}
  .photo-strip{padding:0 18px;margin-top:48px}
  .plat-card,.svc,.val,.t-card{padding:24px}
  .plat-tip{align-items:flex-start;padding:24px}
  .faq-q{padding:18px}
  footer{padding:64px 18px 32px}
  .footer-top{grid-template-columns:1fr;gap:36px}
  .f-bottom{align-items:flex-start;flex-direction:column;gap:18px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none}
}

/* PHOTO STYLES */
.photo-strip{max-width:1140px;margin:72px auto 0;padding:0 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;height:340px}
.photo-strip .p-main{border-radius:16px;overflow:hidden;position:relative;grid-row:span 1}
.photo-strip .p-side{border-radius:16px;overflow:hidden;position:relative}
.photo-strip .p-main{background:transparent;border:0}
.photo-strip .p-main img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:cover!important;object-position:center;display:block;transform:none!important;transition:none!important}
.dealer-brands{height:100%;background:linear-gradient(145deg,#132447,#09132b);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(3,1fr);gap:10px;padding:28px 16px 72px;text-align:center;color:#fff}
.dealer-brands span{display:flex;align-items:center;justify-content:center;min-width:0;padding:8px 4px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.035);font-size:13px;font-weight:600;line-height:1.35;letter-spacing:0}
.dealer-brands span:nth-child(5){font-size:12px}
.photo-strip .p-main .photo-badge,.photo-strip .p-side:has(.dealer-brands) .photo-badge{border-radius:8px;font-size:12px;letter-spacing:0;font-weight:600;background:rgba(11,23,64,.92);padding:8px 12px}
.photo-strip .p-side:has(.dealer-brands) .photo-badge{background:transparent;border-color:rgba(255,255,255,.18);left:16px;right:16px;text-align:center}
@media(max-width:900px){.dealer-brands{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:8px;padding:18px 16px 64px}}
.photo-strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.photo-strip .p-side:hover img{transform:scale(1.04)}
.photo-badge{position:absolute;bottom:14px;left:14px;background:rgba(11,23,64,0.75);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:11px;font-weight:700;letter-spacing:0.06em;padding:6px 12px;border-radius:20px}

.img-section{max-width:1140px;margin:0 auto;padding:0 40px}
.img-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px}
.img-frame{border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--border)}
.img-frame img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .6s ease}
.img-frame:hover img{transform:scale(1.03)}
.img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,23,64,.65) 0%,transparent 55%);display:flex;align-items:flex-end;padding:20px 22px}
.img-overlay-text{font-size:13px;font-weight:700;color:#fff;letter-spacing:0.03em}
.img-overlay-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:3px}

@media(max-width:900px){
  .photo-strip{grid-template-columns:1fr;height:auto}
  .photo-strip .p-main,.photo-strip .p-side{height:220px}
  .img-2col{grid-template-columns:1fr}
}


/* Separate policy view within this portable website. */
[hidden]{display:none!important}
.policy-page{max-width:900px;margin:0 auto;padding:120px 32px 72px;scroll-margin-top:80px}
.policy-back{display:inline-block;color:var(--blue);font-weight:700;text-decoration:none;margin-bottom:36px}
.policy-back:hover{text-decoration:underline}
.policy-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.policy-page h1{font-size:clamp(30px,5vw,48px);line-height:1.2;letter-spacing:-.035em;margin-bottom:32px;overflow-wrap:anywhere}
.policy-copy{font-size:16px;line-height:1.85;color:var(--muted);margin-bottom:40px}
.policy-copy h2{font-size:23px;line-height:1.4;color:var(--ink);margin:38px 0 16px;padding-top:24px;border-top:1px solid var(--border)}
.policy-copy h3{font-size:17px;color:var(--ink);margin:22px 0 8px}
.policy-copy p,.policy-copy ul{margin-bottom:18px}
.policy-copy ul{padding-left:24px}
.policy-copy li{margin-bottom:8px}
.policy-copy a{color:var(--blue);overflow-wrap:anywhere}
.policy-copy address{font-style:normal;padding:20px 24px;border-radius:14px;background:var(--off)}
@media(max-width:600px){.policy-page{padding:100px 22px 40px}.policy-copy h2{font-size:20px}}

/* ==========================================================================
   FOTO'S — de vijf beelden zijn vooraf uitgesneden op exact de verhouding
   van hun vak. De browser hoeft dus niets meer bij te snijden of op te
   rekken, waardoor ze scherp blijven, ook op een retina-scherm.
   ========================================================================== */
/* De foto zelf bepaalt de hoogte van zijn vak. Een vak met alleen aspect-ratio
   en een absoluut geplaatste foto krimpt in Safari (iPhone en Mac) tot 0 pixels. */
.photo-strip{height:auto;align-items:stretch}
.photo-strip .p-main,.photo-strip .p-side{height:auto!important;min-width:0;aspect-ratio:auto}
.photo-strip .p-main img,.photo-strip .p-side img{position:static!important;inset:auto;display:block;width:100%!important;height:auto!important;max-width:100%;aspect-ratio:1400 / 1000;object-fit:cover!important;object-position:center;transition:transform .6s ease}
.photo-strip .p-side:hover img,.photo-strip .p-main:hover img{transform:scale(1.03)}

.sal-wide-photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.img-frame img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;display:block;transition:transform .6s ease}

@media(prefers-reduced-motion:reduce){
  .photo-strip img,.img-frame img{transition:none!important;transform:none!important}
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.sal-contact{text-align:left;background:var(--off);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:88px 40px;margin-top:88px}
.sal-contact-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.sal-contact-body{font-size:15.5px;color:var(--muted);line-height:1.8;margin-top:16px}
.sal-contact-usp{list-style:none;margin:24px 0 0;display:flex;flex-direction:column;gap:11px}
.sal-contact-usp li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-mid);font-weight:500;line-height:1.55}
.sal-contact-usp span{color:var(--orange);font-weight:800;flex-shrink:0}

.sal-contact-direct{display:flex;flex-direction:column;gap:10px;margin-top:32px}
.sal-contact-direct a{display:flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.sal-contact-direct a:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 18px rgba(18,70,214,.08)}
.sal-cd-ico{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;font-size:17px}
.sal-contact-direct strong{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.sal-contact-direct em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:1px}

.sal-contact-card{background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:36px}

/* Formulier */
.sal-form .sal-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sal-field{margin:0 0 18px}
.sal-field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-mid);margin-bottom:7px;letter-spacing:.01em}
.sal-field label span[aria-hidden]{color:var(--orange)}
.sal-opt{font-weight:500;color:var(--faint);letter-spacing:0}
.sal-field input,.sal-field textarea{width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none}
.sal-field textarea{resize:vertical;min-height:120px;line-height:1.65}
.sal-field input::placeholder,.sal-field textarea::placeholder{color:var(--faint)}
.sal-field input:hover,.sal-field textarea:hover{border-color:var(--border-strong)}
.sal-field input:focus,.sal-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,70,214,.12)}
.sal-field input:user-invalid,.sal-field textarea:user-invalid{border-color:var(--orange)}
.sal-help{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}

.sal-consent{margin:4px 0 22px}
.sal-consent label{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.6;cursor:pointer}
.sal-consent input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.sal-consent a{color:var(--blue)}

.sal-submit{margin:0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sal-submit .btn-fill{border:0;cursor:pointer;font-family:inherit}
.sal-alt{font-size:12.5px;color:var(--muted);line-height:1.6}
.sal-alt a{color:var(--blue);font-weight:600}

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. */
.sal-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.sal-notice{border-radius:12px;padding:18px 20px;margin-bottom:24px;font-size:14px;line-height:1.65;display:flex;flex-direction:column;gap:4px}
.sal-notice:focus{outline:3px solid var(--orange);outline-offset:3px}
.sal-notice strong{font-size:15px}
.sal-notice-ok{background:#E9F8EF;border:1.5px solid #9BD9B4;color:#12603A}
.sal-notice-ok strong{color:#0E4B2D}
.sal-notice-fout{background:var(--orange-pale);border:1.5px solid #FFB89E;color:#8A2800}
.sal-notice-fout a{color:inherit;font-weight:700}

@media(max-width:900px){
  .sal-contact{padding:68px 18px;margin-top:68px}
  .sal-contact-inner{grid-template-columns:1fr;gap:36px}
  .sal-contact-card{padding:26px}
  .sal-form .sal-row{grid-template-columns:1fr;gap:0}
}

/* ==========================================================================
   GOOGLE-REVIEWS — zelfde kaarten als in het ontwerp, met de echte
   beoordeling erboven.
   ========================================================================== */
.t-google{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin:-22px 0 34px}
.t-google-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:9px 18px}
.t-google-badge strong{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.4px}
.t-google-stars{color:#FFC107;font-size:14px;letter-spacing:1px}
.t-google-count{font-size:12.5px;color:rgba(255,255,255,.5)}
.t-google-link{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;transition:color .18s,border-color .18s}
.t-google-link:hover{color:#fff;border-color:#fff}

.t-quote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.t-av-img{border-radius:50%;object-fit:cover}

@media(max-width:600px){
  .t-google{gap:12px;margin:-26px 0 28px}
  .t-google-badge{flex-wrap:wrap;justify-content:center;row-gap:2px;border-radius:18px;padding:10px 20px}
  .t-google-count{flex-basis:100%;text-align:center}
}

/* ==========================================================================
   Kleine correcties voor de WordPress-omgeving
   ========================================================================== */
.sal-page img{max-width:100%}
.sal-page .policy-copy > :last-child{margin-bottom:0}
#wpadminbar{position:fixed}
body.sal-page.admin-bar nav{top:32px}
@media(max-width:782px){body.sal-page.admin-bar nav{top:46px}}

/* ==========================================================================
   PUNTJES OP DE I
   In het ontwerp staat de hele pagina binnen de hero, waardoor alles de
   gecentreerde tekst van de hero erft. Die gecentreerde uitstraling blijft,
   maar waar een onderdeel daardoor scheef komt te staan ten opzichte van
   zijn buren, zetten we het hier recht.
   ========================================================================== */

/* Kleine titel boven een gecentreerde kop: ook gecentreerd. */
.waarden .eyebrow,
.faq > .eyebrow,
.img-section > .eyebrow{justify-content:center}

/* Opsomming in de voordelen-kaarten: de lijst als één blok in het midden,
   met alle bolletjes netjes onder elkaar. */
.svc-list{display:grid;justify-content:center}
.svc-item{justify-content:flex-start;align-items:flex-start;text-align:left}
.svc-item::before{margin-top:.62em}

/* Kernwaarden: nummertje in het midden, net als titel en tekst. */
.val-num{margin-left:auto;margin-right:auto}

/* Kaarten en balken met een icoon links: tekst links naast het icoon. */
.plat-card,
.plat-tip,
.platform-card,
.platform-tip{text-align:left}

/* Over ons: kop en kleine titel staan links, de tekst eronder ook. */
.about{text-align:left}

/* Reviews: profielfoto en naam als één gecentreerd geheel. */
.t-author{justify-content:center;text-align:left}

/* Veelgestelde vragen: antwoord links, net als de vraag. */
.faq-a-inner{text-align:left}

/* Veelgestelde vragen: een opengeklapte vraag laat de kaart ernaast niet meerekken. */
.faq-grid{align-items:start}
/* Veelgestelde vragen: een vraag over twee regels ook links, net als de korte vragen. */
.faq-q{text-align:left}