/* aiagentspot.nl - Main stylesheet */
/* Generated 2026-04-12 */

:root{
  --bg:#f8f9ff;--bg2:#eef2ff;--wit:#fff;
  --rand:#dde4f5;--rand2:#c5cfe8;
  --accent:#2351e5;--accent-licht:#eef1fc;--accent-donker:#1a3cb8;
  --groen:#0ab876;--groen-licht:#e7f9f2;
  --oranje:#f59e0b;--rood:#ef4444;
  --tekst:#0a1020;--tekst2:#28364e;--dim:#47567a;--dim2:#8a9cba;
  --s:0 1px 4px rgba(0,0,0,.07),0 4px 18px rgba(35,81,229,.07);
  --sl:0 6px 30px rgba(35,81,229,.13),0 2px 8px rgba(0,0,0,.07);
  --r:14px;--rs:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── RESERVED HEIGHT FOR DYNAMIC CONTAINERS (CLS FIX) ─── */
/* Desktop: 1 rij tools is ~280px, categorieën 2 kolommen ~400px */
#pop-strip{min-height:280px}
#agent-ticker{min-height:54px;display:flex;gap:1rem}
#home-cats,  .cat-rst{min-height:400px}
#home-blog,  .blog-rst{min-height:560px}
#tool-rst{min-height:600px}
#faq-lijst{min-height:480px}
#vergelijk-ct{min-height:200px}
#tool-detail-ct{min-height:500px}
#blog-detail-ct{min-height:400px}
/* Mobiel: 1 kolom → alles is veel langer */


/* ─── CLS PREVENTION ─── */

img,video,iframe{max-width:100%;height:auto;display:block}
.logo img{width:auto;height:36px;aspect-ratio:auto;contain:layout}
.vt-logo-img{width:auto;height:42px;aspect-ratio:auto;contain:layout}
/* Reserve space for hero floating cards to prevent CLS */
.hero-vis{min-height:360px;contain:layout style}
/* Font fallback metrics to match web font — reduces CLS from FOUT */
@font-face{font-family:'Plus Jakarta Sans Fallback';src:local('Arial');font-display:optional;ascent-override:96.8%;descent-override:25.1%;line-gap-override:0%;size-adjust:99.3%}
@font-face{font-family:'Fraunces Fallback';src:local('Georgia');font-display:optional;ascent-override:88.0%;descent-override:22.0%;line-gap-override:0%;size-adjust:101.5%}
body{font-family:'Plus Jakarta Sans','Plus Jakarta Sans Fallback',sans-serif;background:var(--bg);color:var(--tekst);overflow-x:hidden}

/* ─── PAGINA SYSTEEM ─── */
.pg{display:none!important}
.pg.aan{display:block!important;animation:pgIn .15s ease both}

/* ─── HEADER ─── */
header{height:70px;position:sticky;top:0;z-index:500;background:#0f1f5c;backdrop-filter:blur(20px);border-bottom:none;padding:0 1.5rem;box-shadow:0 2px 16px rgba(15,31,92,.35)}
.hdr{max-width:1340px;margin:0 auto;display:flex;align-items:center;height:74px;gap:1rem}
.logo{display:flex;align-items:center;gap:.55rem;font-family:'Fraunces','Fraunces Fallback',serif;font-weight:900;font-size:1.25rem;color:var(--tekst);text-decoration:none;flex-shrink:0}
.logo-icoon{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#6d3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem;font-weight:800;flex-shrink:0}
nav{display:flex;align-items:center;gap:.2rem;flex:1;justify-content:center}
.nk{padding:.48rem .9rem;border-radius:var(--rs);font-size:.88rem;font-weight:500;color:rgba(255,255,255,.85);text-decoration:none;transition:all .18s;white-space:nowrap;display:inline-block}
.nk:hover{color:#fff;background:rgba(255,255,255,.15)}
.nk.aan{color:#fff;background:rgba(255,255,255,.2);font-weight:700}
/* ─── AGENT TICKER ─── */
.ticker-wrap{overflow:hidden;width:100%;border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);background:#fff;padding:.65rem 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;gap:1rem;animation:ticker 28s linear infinite;width:max-content}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:.55rem;padding:.42rem .82rem;background:var(--bg);border:1px solid var(--rand);border-radius:100px;cursor:pointer;transition:all .18s;flex-shrink:0}
.ticker-item:hover{border-color:var(--accent);background:var(--accent-licht)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.nav-dd{position:relative}
.nav-dd.open .dd-menu{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.dd-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);background:#fff;border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--sl);min-width:240px;padding:.55rem 0;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:700}
.dd-menu::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:12px;height:12px;background:#fff;border-left:1px solid var(--rand);border-top:1px solid var(--rand);transform:translateX(-50%) rotate(45deg)}
.dd-item{display:flex;align-items:center;gap:.75rem;padding:.58rem 1.1rem;color:var(--tekst2);font-size:.82rem;font-weight:500;text-decoration:none;transition:background .15s;cursor:pointer}
.dd-item:hover{background:var(--accent-licht);color:var(--accent)}
.dd-item-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0}
.dd-item-txt{display:flex;flex-direction:column}
.dd-item-txt strong{font-size:.8rem;font-weight:600;line-height:1}
.dd-item-txt span{font-size:.68rem;color:var(--dim);margin-top:.12rem}
.dd-sep{height:1px;background:var(--rand);margin:.3rem 0}

.nk-groen{background:linear-gradient(135deg,#155724,#0f3d1a);color:#fff;padding:.62rem 1.5rem;border-radius:10px;font-size:.95rem;font-weight:800;text-decoration:none;white-space:nowrap;display:inline-block;box-shadow:0 3px 14px rgba(21,87,36,.4);transition:all .18s;flex-shrink:0;letter-spacing:.01em}
.nk-groen:hover{background:#0f3d1a;transform:translateY(-1px)}

/* ─── GEMEENSCHAPPELIJK ─── */
.container{max-width:1340px;margin:0 auto;padding:0 1.75rem}
.sec{padding:4.5rem 1.75rem}
.sec-sm{padding:2.5rem 1.75rem}
.chip{display:inline-flex;align-items:center;background:var(--accent-licht);color:var(--accent);padding:.27rem .8rem;border-radius:100px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.85rem}
.kop{font-family:'Fraunces','Fraunces Fallback',serif;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:900;line-height:1.1;margin-bottom:.85rem;color:var(--tekst)}
.sub{color:var(--dim);font-size:.97rem;line-height:1.78;max-width:540px}
.kp{background:var(--accent);color:#fff;padding:.68rem 1.6rem;border-radius:var(--rs);font-size:.87rem;font-weight:700;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .18s;text-decoration:none;display:inline-block;box-shadow:0 2px 10px rgba(35,81,229,.28)}
.kp:hover{background:var(--accent-donker);transform:translateY(-1px)}
.ko{background:transparent;color:var(--accent);padding:.62rem 1.3rem;border-radius:var(--rs);font-size:.84rem;font-weight:600;border:2px solid var(--rand2);cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .18s;text-decoration:none;display:inline-block}
.ko:hover{border-color:var(--accent);background:var(--accent-licht)}
.terug{display:inline-flex;align-items:center;gap:.4rem;color:var(--dim);font-size:.82rem;font-weight:500;text-decoration:none;transition:color .18s;margin-bottom:1.5rem;cursor:pointer}
.terug:hover{color:var(--accent)}

/* ─── ZOEKBALK ─── */
.zoek{display:flex;background:#fff;border:2px solid var(--rand);border-radius:var(--r);overflow:hidden;box-shadow:var(--sl);transition:border-color .2s}
.zoek:focus-within{border-color:var(--accent)}
.zoek input{flex:1;border:none;outline:none;padding:.88rem 1.1rem;font-size:.92rem;font-family:'Plus Jakarta Sans',sans-serif;color:var(--tekst);background:transparent}
.zoek input::placeholder{color:var(--dim2)}
.zoek button{background:var(--accent);color:#fff;border:none;padding:0 1.35rem;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem}
.zoek button:hover{background:var(--accent-donker)}

/* ─── HERO ─── */
.hero{background:linear-gradient(145deg,#c9d9ff 0%,#dccfff 38%,#b8eedd 75%,#c8f0ff 100%);padding:3.5rem 1.75rem 2.5rem;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.13) 0%,transparent 65%);top:-220px;right:-80px;pointer-events:none}
.hero::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.1) 0%,transparent 65%);bottom:-180px;left:-60px;pointer-events:none}
.hero-rst{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.hero-label{display:inline-flex;align-items:center;gap:.42rem;background:#fff;border:1px solid var(--rand);border-radius:100px;padding:.27rem .82rem .27rem .4rem;font-size:.75rem;font-weight:600;color:var(--tekst2);margin-bottom:1.2rem;box-shadow:var(--s)}
.hero-label span{background:var(--groen);color:#fff;border-radius:100px;padding:.13rem .5rem;font-size:.65rem;font-weight:700}
.hero h1{font-family:'Fraunces','Fraunces Fallback',serif;font-size:clamp(2rem,3.6vw,3.3rem);font-weight:900;line-height:1.07;margin-bottom:1.1rem}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{color:var(--dim);font-size:.97rem;line-height:1.78;margin-bottom:1.65rem;max-width:470px}
.hero-acties{display:flex;gap:.88rem;flex-wrap:wrap;margin-bottom:2.1rem}
.held-stats{display:flex;gap:2.2rem}
.stat strong{display:block;font-family:'Fraunces','Fraunces Fallback',serif;font-size:1.65rem;font-weight:900;color:var(--tekst)}
.stat span{font-size:.75rem;color:var(--dim);font-weight:500}

/* DRIJVENDE KAARTEN */
.hero-vis{position:relative;height:440px}
.drk{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--sl);padding:.82rem .95rem;border:1px solid var(--rand);min-width:170px;animation:drv 6s ease-in-out infinite;transition:transform .25s,box-shadow .25s;cursor:pointer}
.drk:hover{box-shadow:0 10px 36px rgba(35,81,229,.17)!important;border-color:var(--accent)}
.drk:nth-child(2){animation-delay:-2.1s}
.drk:nth-child(3){animation-delay:-4s}
.drk:nth-child(4){animation-delay:-1s;animation-duration:7s}
.drk:nth-child(5){animation-delay:-3.2s;animation-duration:8.2s}
.drk:nth-child(6){animation-delay:-.5s;animation-duration:7.4s}
@keyframes drv{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.dk-boven{display:flex;align-items:center;gap:.48rem;margin-bottom:.38rem}
.dk-logo{width:27px;height:27px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.63rem;font-weight:800;flex-shrink:0}
.dk-naam{font-weight:700;font-size:.78rem}
.dk-cat{font-size:.63rem;color:var(--dim)}
.dk-ster{font-size:.68rem;color:var(--oranje);font-weight:600}
.dk-badge{font-size:.58rem;padding:.14rem .44rem;border-radius:100px;font-weight:600;margin-top:.28rem;display:inline-block}
.bg{background:var(--groen-licht);color:var(--groen)}
.bb{background:var(--accent-licht);color:var(--accent)}
.bo{background:#fff7ed;color:var(--oranje)}

/* ─── CAT KAARTEN ─── */
.cat-rst{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1.35rem}
#home-cats{display:flex !important;flex-wrap:nowrap;min-width:100%}
#home-cats .catk{flex:0 0 285px;min-width:285px}
.catk{background:var(--cat-bg,#fff);border:2px solid var(--rand);border-radius:var(--r);padding:1.75rem;cursor:pointer;transition:all .22s;box-shadow:var(--s);position:relative;overflow:hidden}
.catk::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--vl,var(--accent))}
.catk::after{content:'';position:absolute;inset:0;background:var(--vl,var(--accent));opacity:0;transition:opacity .18s;pointer-events:none}
.catk:hover{transform:translateY(-4px);box-shadow:var(--sl);border-color:transparent}
.catk:hover::after{opacity:.07}
.cat-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.05rem}
.catk h3{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:800;font-size:1.08rem;margin-bottom:.48rem;color:var(--tekst)}
.catk p{color:var(--dim);font-size:.82rem;line-height:1.65;margin-bottom:.85rem}
.cat-n{font-size:.76rem;font-weight:700;color:var(--accent)}
.mini-b{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.62rem}
.mb{font-size:.64rem;background:var(--bg);border:1px solid var(--rand);padding:.14rem .5rem;border-radius:100px;color:var(--dim);font-weight:600}
#cat-scroll{scroll-snap-type:x mandatory;scroll-snap-stop:always}
#cat-scroll .catk{scroll-snap-align:start}

/* ─── TOOLS ─── */
.tools-layout{display:grid;grid-template-columns:210px 1fr;gap:2rem;align-items:start}
.tools-sidebar{position:sticky;top:88px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rand) transparent}
.tools-sidebar-inner{background:#fff;border:1.5px solid var(--rand);border-radius:16px;padding:1.2rem 1rem;box-shadow:var(--s)}
.tools-sidebar-label{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:.6rem;padding-left:.1rem}
.filters-vert{display:flex;flex-direction:column;gap:.28rem}
.fk{background:transparent;border:1.5px solid transparent;color:var(--tekst2);padding:.42rem .85rem;border-radius:9px;font-size:.8rem;font-weight:500;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .16s;text-align:left;width:100%}
.fk:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-licht)}
.fk.aan{background:var(--accent-licht);border-color:var(--accent);color:var(--accent);font-weight:700}
.sorteer{background:#fff;border:1.5px solid var(--rand);color:var(--tekst2);padding:.42rem .7rem;border-radius:9px;font-size:.78rem;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;outline:none;width:100%}
@media(max-width:860px){.tools-layout{grid-template-columns:1fr}.tools-sidebar{position:static;max-height:none;overflow-y:visible}.tools-sidebar-inner{border-radius:12px;padding:.85rem 1rem}.filters-vert{flex-direction:row;flex-wrap:wrap;gap:.32rem}.fk{width:auto;border-radius:100px;border-color:var(--rand)}}
.tools-rst{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:1.2rem}
.tk{background:#fff;border:1.5px solid var(--rand);border-radius:var(--r);padding:1.35rem;transition:all .22s;box-shadow:var(--s);position:relative;cursor:pointer}
.tk:hover{transform:translateY(-3px);box-shadow:var(--sl);border-color:var(--rand2)}
.tk-kop{display:flex;align-items:flex-start;gap:.82rem;margin-bottom:.82rem}
.tl{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:800;font-family:'Fraunces','Fraunces Fallback',serif;flex-shrink:0;color-scheme:light}
.tm h3{font-weight:700;font-size:.9rem;margin-bottom:.17rem}
.ttag{font-size:.64rem;background:var(--bg);border:1px solid var(--rand);padding:.12rem .44rem;border-radius:4px;color:var(--dim);font-weight:500}
.trial-b{position:absolute;top:.82rem;right:.82rem;font-size:.6rem;font-weight:600;background:transparent;color:var(--groen);padding:.14rem .46rem;border-radius:100px;border:1.5px solid var(--groen)}
.td{font-size:.81rem;color:var(--tekst2);line-height:1.65;margin-bottom:.82rem}
.tf{display:flex;flex-wrap:wrap;gap:.27rem;margin-bottom:.82rem}
.fl{font-size:.66rem;padding:.19rem .5rem;border-radius:5px;background:var(--bg);border:1px solid var(--rand);color:var(--tekst2)}
.tk-onder{display:flex;align-items:center;justify-content:space-between;margin-bottom:.82rem}
.str-rij{display:flex;align-items:center;gap:.3rem}
.strs{color:var(--oranje);font-size:.78rem}
.beoor{font-size:.75rem;font-weight:600;color:var(--tekst2)}
.prijs{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:.87rem;color:var(--tekst)}
.tk-acties{display:flex;gap:.5rem}
.kb{flex:1;background:transparent;border:1.5px solid var(--rand);color:var(--tekst2);padding:.46rem;border-radius:var(--rs);font-size:.76rem;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .18s}
.kb:hover,.kb.aan{border-color:var(--groen);color:var(--groen);background:var(--groen-licht)}
.kv{flex:1;background:var(--accent);color:#fff;border:none;padding:.5rem;border-radius:var(--rs);font-size:.78rem;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .18s;box-shadow:0 2px 8px rgba(37,85,232,.25)}
.kv:hover{background:var(--accent-donker)}

/* ─── VERGELIJKBALK ─── */
.vb{position:fixed;bottom:1.35rem;left:50%;transform:translateX(-50%) translateY(22px);background:var(--tekst);border-radius:var(--r);padding:.82rem 1.3rem;display:flex;align-items:center;gap:.95rem;z-index:600;box-shadow:0 8px 40px rgba(0,0,0,.26);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.vb.aan{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.vbt{color:#fff;font-size:.84rem;font-weight:500}
.vbt strong{color:var(--groen)}
.vbk{background:var(--groen);color:#fff;border:none;padding:.5rem 1.3rem;border-radius:var(--rs);font-size:.84rem;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.vbk:hover{background:#059669}
.vbw{background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.7);padding:.5rem .82rem;border-radius:var(--rs);font-size:.76rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.vbw:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* ─── VERGELIJKINGSTABEL ─── */
.vt-wrap{background:#fff;border-radius:var(--r);border:1px solid var(--rand);overflow:hidden;box-shadow:var(--s)}
.vt{width:100%;border-collapse:collapse;font-size:.84rem}
.vt th{padding:.95rem 1.15rem;text-align:left;background:var(--bg2);border-bottom:2px solid var(--rand);font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:.88rem}
.vt th:first-child{color:var(--dim);font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:.75rem;min-width:125px}
.vt td{padding:.8rem 1.15rem;border-bottom:1px solid var(--rand);vertical-align:top;font-size:.82rem}
.vt td:first-child{color:var(--dim);font-size:.74rem;font-weight:600;background:var(--bg2)}
.vt tr:last-child td{border-bottom:none}
.vink{color:var(--groen);font-weight:700}
.kruis{color:var(--rood)}

/* ─── BLOG ─── */
.bm{font-size:.75rem;color:#374151;font-weight:500}
.blog-rst{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
.bk{background:#fff;border:1px solid var(--rand);border-radius:18px;overflow:hidden;cursor:pointer;transition:all .25s;box-shadow:var(--s);display:flex;flex-direction:column}
.bk:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(35,81,229,.14);border-color:var(--rand2)}
.home-blog-rst .bk-afb{height:170px}
.home-blog-rst .bk-body h3{font-size:.92rem}
.home-blog-rst .bk-body p{font-size:.78rem;-webkit-line-clamp:2;line-clamp:2}
.home-blog-rst{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important}
.bk-afb{height:200px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;overflow:hidden;flex-shrink:0}
.bk-afb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.28))}
.bk-afb-tag{position:absolute;top:.9rem;left:.9rem;z-index:1;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--accent);padding:.25rem .7rem;border-radius:100px;backdrop-filter:blur(8px)}
.bk-afb-min{position:absolute;bottom:.9rem;right:.9rem;z-index:1;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:.3rem}
.bk-body{padding:1.4rem;flex:1;display:flex;flex-direction:column}
.btag{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;display:none}
.bk h3{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1.05rem;line-height:1.35;margin-bottom:.6rem;color:var(--tekst)}
.bk p{font-size:.83rem;color:var(--dim);line-height:1.68;margin-bottom:auto;padding-bottom:.85rem}
.bmeta{display:flex;gap:.85rem;font-size:.72rem;color:var(--dim2);padding-top:.75rem;border-top:1px solid var(--rand);margin-top:.75rem}
.bk-lees{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--accent);margin-top:.6rem;transition:gap .18s}
.bk:hover .bk-lees{gap:.6rem}

/* ─── TOOL DETAILPAGINA ─── */
.td-kop{background:linear-gradient(135deg,#eaefff,#f0f9ff);padding:3rem 1.75rem 2.2rem}
.td-header{display:flex;align-items:flex-start;gap:1.75rem;flex-wrap:wrap}
.td-logo{width:78px;height:78px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:900;font-family:'Fraunces','Fraunces Fallback',serif;box-shadow:var(--sl);flex-shrink:0}
.td-info h1{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:900;font-size:2rem;margin-bottom:.35rem}
.td-pills{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-top:.65rem}
.pill{display:inline-flex;align-items:center;gap:.32rem;background:#fff;border:1px solid var(--rand);border-radius:100px;padding:.25rem .75rem;font-size:.76rem;font-weight:600;color:var(--tekst2);box-shadow:var(--s)}
.td-body{max-width:1340px;margin:0 auto;padding:2.5rem 1.75rem;display:grid;grid-template-columns:2fr 1fr;gap:2.2rem;align-items:start}
.tsec{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.85rem;box-shadow:var(--s);margin-bottom:1.35rem}
.tsec h3{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1.05rem;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--rand)}
.tsec p,.tsec li{font-size:.86rem;line-height:1.75;color:var(--tekst2)}
.tsec ul{padding-left:1.15rem}
.tsec ul li{margin-bottom:.38rem}
.vn-rst{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.voor{background:var(--groen-licht);border:1px solid #b5f0da;border-radius:10px;padding:1.05rem}
.nad{background:#fff5f5;border:1px solid #fecaca;border-radius:10px;padding:1.05rem}
.voor h5{color:var(--groen);font-size:.7rem;font-weight:700;text-transform:uppercase;margin-bottom:.45rem}
.nad h5{color:var(--rood);font-size:.7rem;font-weight:700;text-transform:uppercase;margin-bottom:.45rem}
.voor li,.nad li{font-size:.79rem;color:var(--tekst2);margin-bottom:.22rem;list-style:none;padding-left:1rem;position:relative}
.voor li::before{content:'✓';position:absolute;left:0;color:var(--groen)}
.nad li::before{content:'✗';position:absolute;left:0;color:var(--rood)}
.pk{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.65rem;box-shadow:var(--s);margin-bottom:1.15rem}
.pk-prijs{font-family:'Fraunces','Fraunces Fallback',serif;font-size:1.55rem;font-weight:900;color:var(--tekst);margin-bottom:.38rem}
.pk-sub{font-size:.8rem;color:var(--dim);margin-bottom:1.15rem}
.ka{width:100%;background:var(--groen);color:#fff;border:none;padding:.88rem;border-radius:var(--rs);font-size:.93rem;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .18s;box-shadow:0 2px 10px rgba(10,184,118,.28)}
.ka:hover{background:#059669;transform:translateY(-1px)}
.dr{display:flex;align-items:center;justify-content:space-between;padding:.62rem 0;border-bottom:1px solid var(--rand);font-size:.82rem}
.dr:last-child{border-bottom:none}
.dr span:first-child{color:var(--dim);font-weight:500}
.dr span:last-child{font-weight:600;color:var(--tekst2)}

/* ─── BLOG DETAIL ─── */
.bd-kop{background:linear-gradient(135deg,#eaefff,#f0fef4);padding:3.8rem 1.75rem 2.2rem;text-align:center}
.bd-body{max-width:800px;margin:0 auto;padding:2.8rem 1.75rem}
.bd-body h2{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1.35rem;margin:1.85rem 0 .7rem;color:var(--tekst)}
.bd-body h3{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1.1rem;margin:1.4rem 0 .55rem;color:var(--tekst)}
.bd-body p{font-size:.92rem;line-height:1.85;color:var(--tekst2);margin-bottom:1.05rem}
.bd-body ul{padding-left:1.35rem;margin-bottom:1.05rem}
.bd-body li{font-size:.9rem;line-height:1.75;color:var(--tekst2);margin-bottom:.38rem}
.bd-body strong{color:var(--tekst);font-weight:700}
.bd-body a{color:var(--accent);text-decoration:underline}
.bd-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem}
.bd-body th{background:#f3f4f6;border:1px solid #d1d5db;padding:.65rem .85rem;text-align:left;font-weight:700;color:var(--tekst)}
.bd-body td{border:1px solid #d1d5db;padding:.65rem .85rem;color:var(--tekst2)}
.bd-body tr:nth-child(even) td{background:#f9fafb}
.bd-body blockquote{border-left:4px solid var(--accent);background:var(--accent-licht);border-radius:0 8px 8px 0;padding:1rem 1.25rem;margin:1.5rem 0;color:var(--tekst2);font-style:italic}
.bd-oproep{background:var(--accent-licht);border:1px solid var(--rand2);border-radius:var(--r);padding:1.85rem;text-align:center;margin:2.2rem 0}
.bd-oproep h3{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1.15rem;margin-bottom:.55rem}
.bd-oproep p{color:var(--dim);font-size:.86rem;margin-bottom:1.05rem}

/* ─── OVER ONS ─── */
.team-rst{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.35rem}
.teamk{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.75rem;text-align:center;box-shadow:var(--s);transition:all .22s}
.teamk:hover{transform:translateY(-3px);box-shadow:var(--sl)}
.ta{width:64px;height:64px;border-radius:50%;margin:0 auto .85rem;font-size:1.65rem;display:flex;align-items:center;justify-content:center}
.teamk h4{font-weight:700;margin-bottom:.2rem;font-size:.92rem}
.teamk span{font-size:.75rem;color:var(--dim)}
.teamk p{font-size:.79rem;color:var(--tekst2);margin-top:.62rem;line-height:1.6}
.waarden-rst{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.15rem}
.wk{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.6rem;box-shadow:var(--s);transition:all .22s}
.wk:hover{transform:translateY(-2px);box-shadow:var(--sl)}
.wi{font-size:1.6rem;margin-bottom:.62rem}
.wk h4{font-weight:700;margin-bottom:.4rem;font-size:.9rem}
.wk p{font-size:.8rem;color:var(--dim);line-height:1.65}
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem;margin-top:2.5rem}
.cstat{text-align:center;background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.85rem;box-shadow:var(--s)}
.cstat strong{display:block;font-family:'Fraunces','Fraunces Fallback',serif;font-size:2rem;font-weight:900;color:var(--accent);margin-bottom:.28rem}
.cstat span{font-size:.8rem;color:var(--dim)}

/* ─── CONTACT ─── */
.ct-rst{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:start}
.cf{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:2.1rem;box-shadow:var(--s)}
.fg{margin-bottom:1.05rem}
.fg label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.34rem;color:var(--tekst2)}
.fg input,.fg textarea,.fg select{width:100%;background:var(--bg);border:1.5px solid var(--rand);border-radius:var(--rs);padding:.67rem .9rem;font-size:.86rem;font-family:'Plus Jakarta Sans',sans-serif;color:var(--tekst);outline:none;transition:border-color .18s}
.fg input:focus,.fg textarea:focus{border-color:var(--accent)}
.fg textarea{min-height:128px;resize:vertical}
.ci{display:flex;align-items:center;gap:.65rem;padding:.85rem;background:#fff;border:1px solid var(--rand);border-radius:var(--rs);margin-bottom:.65rem;box-shadow:var(--s)}
.ci-ico{font-size:1.15rem}
.ci-t strong{display:block;font-size:.74rem;font-weight:600;color:var(--tekst2)}
.ci-t span{font-size:.8rem;color:var(--dim)}

/* ─── POPULAIRE STRIP (carousel) ─── */
.pop-outer{position:relative}
.pop-scroll-wrap{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.5rem;cursor:grab;user-select:none}
.pop-scroll-wrap::-webkit-scrollbar{display:none}
.pop-scroll-wrap:active{cursor:grabbing}
.pop-rst{display:flex;gap:1.1rem;width:max-content;padding:.25rem .1rem}
.pk2{background:#fff;border:1.5px solid var(--rand);border-radius:16px;padding:1.4rem 1.35rem;cursor:pointer;transition:all .25s;box-shadow:var(--s);position:relative;overflow:hidden;min-width:240px;scroll-snap-align:start;flex-shrink:0}
.pk2::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--pk-c1,#eef1fc) 0%,transparent 60%);opacity:0;transition:opacity .25s}
.pk2:hover{border-color:var(--pk-accent,var(--accent));transform:translateY(-4px);box-shadow:var(--sl)}
.pk2:hover::before{opacity:1}
.pk2-top{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem}
.pk2-logo{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;font-family:'Fraunces','Fraunces Fallback',serif;flex-shrink:0}
.pk2 h3{font-weight:700;font-size:.95rem;margin-bottom:.12rem}
.pk2-cat{font-size:.7rem;color:var(--dim)}
.pk2-desc{font-size:.8rem;color:var(--dim);line-height:1.6;margin-bottom:.9rem;min-height:52px}
.pk2-meta{display:flex;align-items:center;justify-content:space-between;padding-top:.75rem;border-top:1px solid var(--rand)}
.pk2-prijs{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:900;font-size:.92rem;color:var(--tekst)}
.pk2-beoor{font-size:.75rem;color:#92400e;font-weight:700;background:#fff7ed;padding:.2rem .55rem;border-radius:100px}
.pk2-badge{position:absolute;top:.75rem;right:.75rem;font-size:.6rem;font-weight:700;padding:.18rem .5rem;border-radius:100px}
.pop-nav{display:flex;gap:.5rem;justify-content:center;margin-top:1.2rem}
.pop-dot{width:8px;height:8px;border-radius:50%;background:var(--rand2);cursor:pointer;transition:all .25s}
.pop-dot.aan{background:var(--accent);width:22px;border-radius:100px}

/* ─── VOETTEKST ─── */
footer{background:var(--tekst);color:#fff;padding:3.5rem 1.75rem 1.75rem;min-height:480px}
.vt-rst{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.2rem;margin-bottom:2.2rem}
.vt-merk p{font-size:.8rem;color:#8a9cba;line-height:1.7;margin:1rem 0 1.3rem}
.vt-kol h4,.vt-kol h3{font-weight:700;font-size:.95rem;margin-bottom:1rem;color:#fff;letter-spacing:.02em}
.vt-kol a{display:block;color:#8a9cba;font-size:.8rem;text-decoration:none;margin-bottom:.5rem;transition:color .18s;cursor:pointer}
.vt-kol a:hover{color:#fff}
.vt-onder{max-width:1340px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding-top:1.65rem;flex-wrap:wrap;gap:.85rem}
.vt-onder span{font-size:.74rem;color:#5a698a}
.nl-f{display:flex;gap:.36rem}
.nl-f input{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:var(--rs);padding:.5rem .85rem;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;outline:none;min-width:165px}
.nl-f input::placeholder{color:#5a698a}
.nl-f button{background:var(--groen);color:#fff;border:none;padding:.5rem .9rem;border-radius:var(--rs);font-size:.75rem;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}

/* ─── NIEUWSBRIEF SECTIE ─── */

/* ─── PROFIEL KAARTEN ─── */
.prof-card{background:#fff;border:1.5px solid var(--rand);border-radius:var(--r);padding:1.75rem;cursor:pointer;transition:all .25s;box-shadow:var(--s);position:relative;overflow:hidden}
.prof-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 55%,color-mix(in srgb,var(--pc) 4%,transparent));pointer-events:none;transition:opacity .25s}
.prof-card:hover{transform:translateY(-5px);box-shadow:var(--sl);border-color:var(--pc)}
.pc-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:1rem;transition:transform .25s}
.prof-card:hover .pc-ico{transform:scale(1.1) rotate(-3deg)}
.prof-card h3{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1.05rem;margin-bottom:.5rem;color:var(--tekst)}
.prof-card p{color:var(--dim);font-size:.82rem;line-height:1.65;margin-bottom:.9rem}
.pc-tags{display:flex;flex-wrap:wrap;gap:.32rem;margin-bottom:.9rem}
.pc-tags span{font-size:.68rem;border:1px solid;padding:.16rem .5rem;border-radius:100px;font-weight:600}
.pc-cta{font-size:.82rem;font-weight:700;color:var(--pc,var(--accent));transition:gap .2s}
.prof-card:hover .pc-cta::after{content:' →';display:inline}

.nl-sec{background:linear-gradient(135deg,var(--tekst),#1a253d);padding:3.8rem 1.75rem;text-align:center}

@media(max-width:1100px){
  .blog-mobile-filter{display:flex!important}
}
.blog-mobile-filter{display:none;gap:.45rem;overflow-x:auto;padding:.5rem 0 .85rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:1rem}
.blog-mobile-filter::-webkit-scrollbar{display:none}
.blog-mobile-filter .bmfk{flex-shrink:0;padding:.38rem .9rem;border-radius:20px;border:1.5px solid var(--rand2);font-size:.78rem;cursor:pointer;transition:all .18s;white-space:nowrap;background:var(--bg);color:var(--tekst2);font-weight:600}
.blog-mobile-filter .bmfk.actief{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:1100px){#pg-blog .container[style*="grid-template-columns:260px"]{grid-template-columns:1fr!important}#pg-blog .blog-sidebar{display:none}}
@media(max-width:900px){#pg-vergelijking .container [style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr!important}#pg-vergelijking .container [style*="position:sticky;top:90px"]{position:static!important;display:none}}
@media(max-width:900px){#pg-blog .blog-rst{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){#pg-blog .blog-rst{grid-template-columns:1fr!important}}
@media(max-width:1024px){.hero-rst{grid-template-columns:1fr}.hero-vis{display:flex!important;min-height:auto!important;margin-top:1.25rem}.vt-rst{grid-template-columns:1fr 1fr}.ct-rst{grid-template-columns:1fr}.td-body{grid-template-columns:1fr}.cijfers{grid-template-columns:1fr 1fr}}
@media(max-width:768px){nav{display:none}.hero{padding:2.5rem 1rem 2rem}.sec{padding:2.5rem 1rem}.vt-rst{grid-template-columns:1fr;gap:1.5rem}.vb{width:calc(100% - 2rem);flex-direction:column;gap:.62rem;text-align:center}.vn-rst{grid-template-columns:1fr}.cijfers{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cijfers{grid-template-columns:1fr}}

/* ─── HAMBURGER MENU ─── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem;background:none;border:none;flex-shrink:0}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all .25s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-nav{display:none;position:fixed;top:76px;left:0;right:0;background:#fff;border-bottom:2px solid var(--rand);z-index:490;padding:1rem 1.5rem;flex-direction:column;gap:.3rem;box-shadow:0 8px 30px rgba(0,0,0,.12);max-height:calc(100vh - 76px);overflow-y:auto}
.mob-nav.open{display:flex}
.mob-nav a{padding:.65rem .9rem;border-radius:var(--rs);font-size:.92rem;font-weight:500;color:var(--tekst2);text-decoration:none;border-bottom:1px solid var(--rand)}
.mob-nav a:last-child{border-bottom:none}
.mob-nav a:hover{background:var(--bg2);color:var(--accent)}
@media(max-width:768px){nav{display:none}.hamburger{display:flex}}


/* ─── SOCIAL SHARING ─── */
.social-share{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;padding:1.25rem 0;border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);margin:2rem 0}
.social-share span{font-size:.82rem;font-weight:600;color:var(--dim);margin-right:.25rem}
.ss-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.46rem 1rem;border-radius:var(--rs);font-size:.8rem;font-weight:700;text-decoration:none;transition:all .18s;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.ss-linkedin{background:#0a66c2;color:#fff}.ss-linkedin:hover{background:#084b9a}
.ss-x{background:#000;color:#fff}.ss-x:hover{background:#333}
.ss-wa{background:#25d366;color:#fff}.ss-wa:hover{background:#1da851}
.ss-copy{background:var(--bg2);color:var(--tekst2);border:1.5px solid var(--rand)}.ss-copy:hover{border-color:var(--accent);color:var(--accent)}


/* ─── AUTHOR BOX ─── */
.author-box{display:flex;align-items:flex-start;gap:1.25rem;background:var(--bg2);border:1px solid var(--rand);border-radius:var(--r);padding:1.5rem;margin:2rem 0}
.author-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;font-size:1.65rem;flex-shrink:0;box-shadow:0 2px 10px rgba(35,81,229,.25)}
.author-info{flex:1}
.author-info strong{display:block;font-weight:700;font-size:.95rem;margin-bottom:.2rem}
.author-info .author-role{font-size:.78rem;color:var(--accent);font-weight:600;margin-bottom:.45rem}
.author-info p{font-size:.83rem;color:var(--dim);line-height:1.65;margin:0}
.author-links{display:flex;gap:.5rem;margin-top:.65rem}
.author-links a{font-size:.75rem;font-weight:700;color:var(--accent);text-decoration:none;padding:.25rem .6rem;border:1px solid var(--rand2);border-radius:100px;transition:all .18s}
.author-links a:hover{background:var(--accent-licht)}


/* ─── GERELATEERDE ARTIKELEN ─── */
.related-art{margin:2.5rem 0}
.related-art h3{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1.1rem;margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:1px solid var(--rand)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.related-card{background:#fff;border:1px solid var(--rand);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .22s;box-shadow:var(--s)}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--sl);border-color:var(--rand2)}
.related-card-img{height:110px;background-size:cover;background-position:center;position:relative}
.related-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 100%)}
.related-card-body{padding:1rem}
.related-card-body h4{font-family:'Fraunces','Fraunces Fallback',serif;font-size:.88rem;font-weight:700;line-height:1.35;margin-bottom:.4rem;color:var(--tekst)}
.related-card-body span{font-size:.72rem;color:var(--dim2)}

/* ─── SMOOTH CONTENT LOAD ─── */
@keyframes pgIn{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pk2,.bk,.catk{animation:fadeIn .22s ease both}
.pk2:nth-child(1){animation-delay:.02s}.pk2:nth-child(2){animation-delay:.05s}
.pk2:nth-child(3){animation-delay:.08s}.pk2:nth-child(4){animation-delay:.11s}
.pk2:nth-child(5){animation-delay:.14s}.pk2:nth-child(6){animation-delay:.17s}
.pk2:nth-child(7){animation-delay:.20s}.pk2:nth-child(8){animation-delay:.23s}
.bk:nth-child(1){animation-delay:.04s}.bk:nth-child(2){animation-delay:.08s}
.bk:nth-child(3){animation-delay:.12s}.bk:nth-child(4){animation-delay:.16s}
.catk:nth-child(1){animation-delay:.03s}.catk:nth-child(2){animation-delay:.06s}
.catk:nth-child(3){animation-delay:.09s}.catk:nth-child(4){animation-delay:.12s}
.catk:nth-child(5){animation-delay:.15s}.catk:nth-child(6){animation-delay:.18s}
/* Skeleton shimmer voor lege containers */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.pop-rst:empty,.cat-rst:empty,.blog-rst:empty{background:linear-gradient(90deg,var(--bg2) 25%,var(--rand) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r);opacity:.5}

/* ══ STABIELE HEADER & GEEN SCROLLBAR JUMP ══ */
html { overflow-y: scroll; scrollbar-gutter: stable; }
header {
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  box-sizing: border-box !important;
}
.hdr { height: 70px !important; display: flex !important; align-items: center !important; }
.logo { display: inline-flex !important; align-items: center !important; }
.logo img { height: 38px !important; width: auto !important; display: block !important; }
nav { display: flex !important; align-items: center !important; }
.nk { display: inline-flex !important; align-items: center !important; line-height: 1 !important; }
.nk-groen { display: inline-flex !important; align-items: center !important; line-height: 1 !important; }
/* Dropdown brug zodat menu niet verdwijnt */
.nav-dd { position: relative; }
.nav-dd::after { content:''; position:absolute; top:100%; left:0; right:0; height:10px; }
.dd-menu { z-index: 9999 !important; top: calc(100% + 2px) !important; }
/* Chatbot boven alles */
#cb-widget { z-index: 10000 !important; }
/* Category sidebar buttons */
.cat-sb-btn{display:block;width:100%;text-align:left;padding:.6rem 1.1rem;background:none;border:none;font-size:.84rem;font-weight:500;color:var(--tekst2);cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .18s;border-left:3px solid transparent;line-height:1.3}
.cat-sb-btn:hover{background:var(--bg2);color:var(--accent)}
.cat-sb-btn.actief{background:var(--accent-licht);color:var(--accent);font-weight:700;border-left-color:var(--accent)}
@media(max-width:768px){#cat-sidebar{display:none}#pg-categorieen>div>div{grid-template-columns:1fr!important}#cat-cards-grid{grid-template-columns:repeat(2,1fr)!important}#cat-tool-grid{grid-template-columns:1fr!important}}


/* ═══ WAT IS AI AGENT PAGINA ═══ */
.reading-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),#6d3aed);z-index:9999;transition:width .1s;width:0%}
.hero-artikel{background:linear-gradient(155deg,#0a1020 0%,#1a2a5e 55%,#0e1f4a 100%);padding:0;position:relative;overflow:hidden;min-height:480px;display:flex;align-items:center}
.hero-artikel::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 70% 40%,rgba(35,81,229,.35) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 20% 70%,rgba(109,58,237,.25) 0%,transparent 60%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(35,81,229,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(35,81,229,.08) 1px,transparent 1px);background-size:60px 60px}
.hero-inner{max-width:1100px;margin:0 auto;padding:4rem 2rem;position:relative;z-index:2;display:grid;grid-template-columns:1fr 420px;gap:3rem;align-items:center}
.hero-chip{display:inline-flex;align-items:center;gap:.5rem;background:rgba(35,81,229,.3);border:1px solid rgba(35,81,229,.5);border-radius:100px;padding:.3rem .85rem;font-size:.72rem;font-weight:700;color:#93c5fd;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
.hero-inner h1{font-family:'Fraunces','Fraunces Fallback',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:1.1rem}
.hero-inner h1 em{color:#60a5fa;font-style:italic}
.hero-meta{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.5rem;font-size:.8rem;color:#94a3b8}
.hero-meta span{display:flex;align-items:center;gap:.35rem}
.hero-sub{color:#cbd5e1;font-size:.97rem;line-height:1.78;max-width:520px;margin-bottom:2rem}
.hero-toc-preview{display:flex;flex-wrap:wrap;gap:.5rem}
.toc-pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:.3rem .75rem;font-size:.72rem;color:#e2e8f0;text-decoration:none;transition:all .2s;cursor:pointer}
.toc-pill:hover{background:rgba(35,81,229,.4);color:#fff}
.hero-visual{position:relative}
.ai-brain-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:1.5rem;backdrop-filter:blur(10px)}
.brain-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.85rem}
.brain-node{background:rgba(35,81,229,.25);border:1px solid rgba(35,81,229,.4);border-radius:10px;padding:.7rem .85rem;font-size:.72rem;color:#93c5fd;font-weight:600;display:flex;align-items:center;gap:.5rem;animation:nodePulse 3s ease-in-out infinite}
.brain-node:nth-child(2){animation-delay:.5s}
.brain-node:nth-child(3){animation-delay:1s}
.brain-node:nth-child(4){animation-delay:1.5s}
@keyframes nodePulse{0%,100%{opacity:.7;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.brain-center{background:linear-gradient(135deg,#2351e5,#6d3aed);border-radius:12px;padding:1.1rem;text-align:center;margin-bottom:.65rem}
.brain-center .icon{font-size:2rem;margin-bottom:.4rem}
.brain-center p{color:#fff;font-size:.78rem;font-weight:700}
.flow-arrows{display:flex;justify-content:center;gap:.5rem;margin:.5rem 0}
.flow-arrow{font-size:1.2rem;color:#60a5fa;animation:arrowMove 2s ease-in-out infinite}
.flow-arrow:nth-child(2){animation-delay:.3s}
.flow-arrow:nth-child(3){animation-delay:.6s}
@keyframes arrowMove{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(6px);opacity:1}}
.output-row{display:flex;gap:.5rem}
.output-chip{flex:1;background:rgba(10,184,118,.15);border:1px solid rgba(10,184,118,.3);border-radius:8px;padding:.5rem;font-size:.65rem;color:#6ee7b7;font-weight:600;text-align:center}
.hero-progress{display:flex;gap:.75rem;margin-top:1.5rem}
.prog-item{display:flex;flex-direction:column;gap:.2rem}
.prog-item strong{font-size:1.2rem;font-weight:900;font-family:'Fraunces','Fraunces Fallback',serif;color:#fff}
.prog-item span{font-size:.7rem;color:#94a3b8}
.breadcrumb-wat{background:#fff;border-bottom:1px solid var(--rand);padding:.75rem 1.75rem}
.bc-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--dim)}
.bc-inner a{color:var(--dim);text-decoration:none}
.bc-inner a:hover{color:var(--accent)}
.bc-sep{color:var(--dim2)}
.bc-cur{color:var(--tekst);font-weight:600}
.artikel-wrap{max-width:1100px;margin:0 auto;padding:3rem 1.75rem;display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start}
.artikel-body{min-width:0}
.artikel-sidebar{position:sticky;top:86px}
.sidebar-card{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.35rem;box-shadow:var(--s);margin-bottom:1.2rem}
.sidebar-card h4{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:.95rem;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--rand)}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.toc-list a{font-size:.8rem;color:var(--dim);text-decoration:none;padding:.3rem .6rem;border-radius:6px;display:block;transition:all .18s;border-left:2px solid transparent;cursor:pointer}
.toc-list a:hover,.toc-list a.actief{background:var(--accent-licht);color:var(--accent);border-left-color:var(--accent)}
.tool-mini{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--rand);text-decoration:none;color:var(--tekst)}
.tool-mini:last-child{border-bottom:none}
.tool-mini-logo{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;flex-shrink:0}
.tool-mini-info strong{font-size:.8rem;display:block}
.tool-mini-info span{font-size:.7rem;color:var(--dim)}
.lees-meta{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 1.5rem;background:var(--bg);border:1px solid var(--rand);border-radius:var(--r);margin-bottom:2rem;flex-wrap:wrap}
.lees-meta span{font-size:.8rem;color:var(--dim);display:flex;align-items:center;gap:.38rem}
.lees-meta strong{color:var(--tekst2)}
.artikel-body h2{font-family:'Fraunces','Fraunces Fallback',serif;font-size:1.7rem;font-weight:900;color:var(--tekst);margin:2.5rem 0 .9rem;line-height:1.2}
.artikel-body h2:first-child{margin-top:0}
.artikel-body h3{font-family:'Fraunces','Fraunces Fallback',serif;font-size:1.2rem;font-weight:700;color:var(--tekst);margin:1.8rem 0 .7rem}
.artikel-body h4{font-size:1rem;font-weight:700;color:var(--tekst2);margin:1.4rem 0 .5rem}
.artikel-body p{font-size:.97rem;line-height:1.85;color:var(--tekst2);margin-bottom:1.1rem}
.artikel-body p strong,.artikel-body li strong{font-weight:600;color:var(--tekst2)}
.artikel-body ul,.artikel-body ol{padding-left:1.4rem;margin-bottom:1.1rem}
.artikel-body li{font-size:.93rem;line-height:1.75;color:var(--tekst2);margin-bottom:.45rem}
.info-box{border-radius:var(--r);padding:1.4rem 1.6rem;margin:1.8rem 0;border-left:4px solid}
.info-box.blauw{background:var(--accent-licht);border-color:var(--accent)}
.info-box.groen{background:var(--groen-licht);border-color:var(--groen)}
.info-box.oranje{background:#fff7ed;border-color:var(--oranje)}
.info-box h4{font-size:.88rem;font-weight:700;margin-bottom:.5rem}
.info-box.blauw h4{color:var(--accent)}
.info-box.groen h4{color:var(--groen)}
.info-box.oranje h4{color:#92400e}
.info-box p{margin:0;font-size:.88rem}
.vergelijk-tabel{width:100%;border-collapse:collapse;border-radius:var(--r);overflow:hidden;border:1px solid var(--rand);margin:1.5rem 0;font-size:.88rem}
.vergelijk-tabel thead{background:var(--bg2)}
.vergelijk-tabel th{padding:.85rem 1.1rem;text-align:left;font-weight:700;font-size:.82rem;border-bottom:2px solid var(--rand)}
.vergelijk-tabel td{padding:.8rem 1.1rem;border-bottom:1px solid var(--rand);vertical-align:top}
.vergelijk-tabel tr:last-child td{border-bottom:none}
.vergelijk-tabel tr:nth-child(even){background:#fafbff}
.ja{color:var(--groen);font-weight:700}
.nee{color:var(--rood);font-weight:700}
.use-case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;margin:1.5rem 0}
.use-case-card{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.4rem;box-shadow:var(--s);transition:all .22s;border-top:3px solid var(--kleur,var(--accent))}
.use-case-card:hover{transform:translateY(-3px);box-shadow:var(--sl)}
.uc-ico{font-size:1.8rem;margin-bottom:.75rem}
.use-case-card h4{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:700;font-size:1rem;margin-bottom:.5rem}
.use-case-card p{font-size:.83rem;color:var(--dim);line-height:1.65;margin:0}
.audience-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;margin:1.5rem 0}
.audience-card{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.3rem;box-shadow:var(--s)}
.aud-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.85rem}
.audience-card h4{font-weight:700;font-size:.95rem;margin-bottom:.45rem}
.audience-card p{font-size:.82rem;color:var(--dim);line-height:1.65;margin:0}
.audience-card ul{padding-left:1rem;margin:.5rem 0 0}
.audience-card li{font-size:.79rem;color:var(--dim2)}
.stappen{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.stap{display:flex;gap:1.1rem;background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.2rem;box-shadow:var(--s);align-items:flex-start}
.stap-nr{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),#6d3aed);border-radius:10px;color:#fff;font-weight:800;font-size:.88rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Fraunces','Fraunces Fallback',serif}
.stap-body strong{font-size:.92rem;display:block;margin-bottom:.3rem}
.stap-body p{font-size:.84rem;color:var(--dim);line-height:1.65;margin:0}
.tool-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}
.tool-card-mini{background:#fff;border:1px solid var(--rand);border-radius:var(--r);padding:1.1rem;box-shadow:var(--s);transition:all .22s;text-decoration:none;color:var(--tekst);display:block}
.tool-card-mini:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sl)}
.tc-header{display:flex;align-items:center;gap:.65rem;margin-bottom:.65rem}
.tc-logo{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0}
.tc-name{font-weight:700;font-size:.88rem}
.tc-cat{font-size:.68rem;color:var(--dim)}
.tc-desc{font-size:.78rem;color:var(--dim);line-height:1.6;margin-bottom:.65rem}
.tc-price{font-size:.75rem;font-weight:700;color:var(--groen)}
.tc-stars{font-size:.72rem;color:var(--oranje)}
.sec-divider{height:1px;background:linear-gradient(90deg,transparent,var(--rand2),transparent);margin:2.5rem 0}
.faq-item-art{border:1px solid var(--rand);border-radius:var(--r);margin-bottom:.75rem;overflow:hidden;background:#fff;box-shadow:var(--s)}
.faq-vraag-art{padding:1.1rem 1.4rem;font-weight:700;font-size:.93rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:background .18s;user-select:none}
.faq-vraag-art:hover{background:var(--accent-licht)}
.faq-vraag-art.open{background:var(--accent-licht);color:var(--accent);border-bottom:1px solid var(--rand)}
.faq-icon-art{font-size:1.1rem;transition:transform .25s;flex-shrink:0;color:var(--accent);font-weight:400}
.faq-vraag-art.open .faq-icon-art{transform:rotate(45deg)}
.faq-antwoord-art{padding:0 1.4rem;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s}
.faq-antwoord-art.open{max-height:500px;padding:1rem 1.4rem}
.faq-antwoord-art p{font-size:.9rem;color:var(--dim);line-height:1.78;margin:0}
.cta-blok-art{background:linear-gradient(135deg,var(--accent),#6d3aed);border-radius:20px;padding:2.5rem;color:#fff;text-align:center;margin:2.5rem 0;position:relative;overflow:hidden}
.cta-blok-art::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.07);top:-100px;right:-80px}
.cta-blok-art h3{font-family:'Fraunces','Fraunces Fallback',serif;font-size:1.6rem;font-weight:900;margin-bottom:.75rem;position:relative}
.cta-blok-art p{color:rgba(255,255,255,.85);margin-bottom:1.5rem;position:relative}
.cta-blok-art a{display:inline-block;background:#fff;color:var(--accent);font-weight:800;padding:.85rem 2.2rem;border-radius:var(--rs);text-decoration:none;font-size:.95rem;position:relative;cursor:pointer}
.cta-blok{background:linear-gradient(135deg,var(--accent),#6d3aed);border-radius:var(--r);padding:2rem 2.2rem;color:#fff;margin:2rem 0;position:relative;overflow:hidden}
.cta-blok::before{content:'';position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07);top:-80px;right:-60px;pointer-events:none}
.cta-blok h3{font-family:'Fraunces','Fraunces Fallback',serif;font-size:1.35rem;font-weight:900;margin-bottom:.6rem;position:relative;color:#fff}
.cta-blok p{color:rgba(255,255,255,.85);font-size:.88rem;line-height:1.7;margin-bottom:1.1rem;position:relative}
.cta-blok a{display:inline-block;background:#fff;color:var(--accent);font-weight:800;padding:.72rem 1.8rem;border-radius:var(--rs);text-decoration:none;font-size:.88rem;position:relative;cursor:pointer;transition:all .18s}
.cta-blok a:hover{background:var(--bg);transform:translateY(-1px)}
.conclusie-art{background:linear-gradient(135deg,#f0f9ff,#f0fdf4);border:1px solid var(--rand2);border-radius:20px;padding:2rem 2.2rem;margin:2rem 0}
.conclusie-art h2{font-family:'Fraunces','Fraunces Fallback',serif;font-weight:900;font-size:1.5rem;margin-bottom:1rem}
.conclusie-art p{font-size:.93rem;color:var(--tekst2);line-height:1.82;margin-bottom:.85rem}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.hero-visual{display:none}.artikel-wrap{grid-template-columns:1fr}.artikel-sidebar{position:static}}
@media(max-width:1024px){.probleem-waarom-grid{grid-template-columns:1fr!important}.waarom-sticky{position:static!important}}


/* ═══ LEGAL PAGINA'S (privacy, voorwaarden, disclaimer) ═══ */
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 1.75rem 5rem;
}
.legal-wrap h1 {
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: .5rem;
  color: var(--tekst);
}
.legal-wrap .meta {
  color: var(--dim);
  font-size: .85rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rand);
}
.legal-wrap h2 {
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  margin: 2rem 0 .75rem;
}
.legal-wrap p, .legal-wrap li {
  font-size: .95rem;
  color: var(--tekst2);
  line-height: 1.82;
  margin-bottom: .75rem;
}
.legal-wrap ul { padding-left: 1.3rem; margin-bottom: 1rem; }
.legal-wrap a { color: var(--accent); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-hero {
  background: linear-gradient(135deg, #eaefff 0%, #edf5ff 100%);
  padding: 3rem 1.75rem 2rem;
  border-bottom: 1px solid var(--rand);
  text-align: center;
}
.legal-hero .chip {
  display: inline-flex;
  align-items: center;
  background: var(--accent-licht);
  color: var(--accent);
  border-radius: 100px;
  padding: .3rem .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.legal-hero h1 {
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--tekst);
  margin-bottom: .75rem;
}
.legal-hero p {
  color: var(--dim);
  font-size: .97rem;
  max-width: 500px;
  margin: 0 auto;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--dim);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 1rem;
  background: none;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 0;
}
.legal-back:hover { color: var(--accent); }


/* ═══ FAQ SECTIE ═══ */
.faq-pg-hero {
  background: linear-gradient(155deg, #0a1020 0%, #1a2a5e 55%, #0e1f4a 100%);
  padding: 4.5rem 1.75rem 3.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.faq-pg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 70% 40%, rgba(35,81,229,.3) 0%, transparent 70%);
  pointer-events: none;
}
.faq-pg-hero h1 {
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1rem;
  position: relative;
}
.faq-pg-hero p {
  color: #cbd5e1;
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.75;
  position: relative;
}
.faq-pg-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  position: relative;
}
.faq-pg-stat strong {
  display: block;
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}
.faq-pg-stat span { font-size: .78rem; color: #94a3b8; }

/* Zoekbalk */
.faq-pg-search {
  display: flex;
  max-width: 520px;
  margin: 0 auto 2rem;
  background: #fff;
  border: 2px solid var(--rand);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sl);
  position: relative;
}
.faq-pg-search input {
  flex: 1;
  border: none;
  outline: none;
  padding: .85rem 1.1rem;
  font-size: .92rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--tekst);
}
.faq-pg-search input::placeholder { color: var(--dim2); }

/* Layout */
.faq-pg-wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding: 3rem 1.75rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.faq-pg-nav {
  position: sticky;
  top: 86px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  padding: 1.25rem;
  box-shadow: var(--s);
}
.faq-pg-nav h4 {
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rand);
  color: var(--tekst);
}
.faq-pg-nav-list { list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.faq-pg-nav-list a {
  font-size: .82rem;
  color: var(--dim);
  text-decoration: none;
  padding: .38rem .65rem;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: all .18s;
}
.faq-pg-nav-list a:hover { background: var(--accent-licht); color: var(--accent); }
.faq-pg-nav-list a.actief { background: var(--accent-licht); color: var(--accent); font-weight: 700; border-left: 3px solid var(--accent); padding-left: calc(.65rem - 3px); }

/* Categorieën */
.faq-pg-cat { margin-bottom: 2.5rem; scroll-margin-top: 90px; }
.faq-pg-cat-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 2px solid var(--rand);
}
.faq-pg-cat-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.faq-pg-cat-header h2 {
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--tekst);
  margin: 0;
}
.faq-pg-cat-header span { font-size: .78rem; color: var(--dim); }

/* Accordion */
.faq-acc-item {
  border: 1px solid var(--rand);
  border-radius: var(--r);
  margin-bottom: .6rem;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--s);
  transition: box-shadow .2s;
}
.faq-acc-item:hover { box-shadow: var(--sl); }
.faq-acc-q {
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  font-size: .93rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background .18s;
  user-select: none;
  color: var(--tekst);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.faq-acc-q:hover { background: var(--accent-licht); }
.faq-acc-q.open { background: var(--accent-licht); color: var(--accent); border-bottom: 1px solid var(--rand); }
.faq-acc-icon { font-size: 1.2rem; transition: transform .25s; flex-shrink: 0; color: var(--accent); }
.faq-acc-q.open .faq-acc-icon { transform: rotate(45deg); }
.faq-acc-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s;
  font-size: .91rem;
  color: var(--dim);
  line-height: 1.8;
}
.faq-acc-a.open { max-height: 600px; padding: 1.1rem 1.4rem; }
.faq-acc-a p { margin: 0 0 .65rem; }
.faq-acc-a p:last-child { margin: 0; }
.faq-acc-a strong { color: var(--tekst2); }
.faq-acc-a ul { padding-left: 1.2rem; margin: .5rem 0; }
.faq-acc-a li { margin-bottom: .35rem; }

/* CTA */
.faq-pg-cta {
  background: linear-gradient(135deg, var(--accent), #6d3aed);
  border-radius: 20px;
  padding: 2.5rem;
  color: #fff;
  text-align: center;
  margin-top: 2rem;
}
.faq-pg-cta h3 {
  font-family: 'Fraunces','Fraunces Fallback',serif;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: .65rem;
}
.faq-pg-cta p { color: rgba(255,255,255,.85); margin-bottom: 1.25rem; }
.faq-pg-cta a {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-weight: 800;
  padding: .82rem 2rem;
  border-radius: var(--rs);
  text-decoration: none;
  font-size: .92rem;
  cursor: pointer;
}

/* Verberg items bij zoeken */
.faq-acc-item.verborgen { display: none; }

@media (max-width: 900px) {
  .faq-pg-wrap { grid-template-columns: 1fr; }
  .faq-pg-nav { position: static; }
}

@media(max-width:700px){.stap-grid-4{grid-template-columns:repeat(2,1fr)!important}}

/* ═══════════════════════════════════════════════
   UITGEBREIDE MOBIELE VERBETERINGEN
   ═══════════════════════════════════════════════ */

/* Hero mobiel: grotere h1, betere afstand */
@media(max-width:768px){
  .hero { padding: 2.2rem 1rem 2rem; }
  .hero h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.1; margin-bottom:.85rem; }
  .hero-sub { font-size:.92rem; margin-bottom:1.25rem; max-width:100%; }
  .hero-label { font-size:.7rem; margin-bottom:.85rem; }
  .held-stats { gap:1.4rem; flex-wrap:wrap; }
  .stat strong { font-size:1.45rem; }
  .stat span { font-size:.7rem; }
  /* Hero acties knoppen: volle breedte op klein scherm */
  .hero-acties { flex-direction:column; gap:.6rem; }
  .hero-acties .kp, .hero-acties .ko { width:100%; text-align:center; padding:.82rem 1rem; font-size:.92rem; }
  /* Gouden badge smaller */
  .hero > div > div > div[style*="inline-flex"] { font-size:.65rem; }
}

/* Hero discovery widget: toon vereenvoudigd op mobiel */
@media(max-width:1024px){
  .hero-vis { display:flex !important; min-height:auto !important; margin-top:1.5rem; }
  .hero-rst { gap:1.5rem; }
}
@media(max-width:768px){
  .hero-vis .hero-vis-inner-knoppen { display:none; } /* verberg de lange categorie-knoppenlijst */
  .hero-rst { grid-template-columns: 1fr !important; }
  .hero-vis {
    min-height: auto !important;
    display:flex !important;
  }
  /* Verberg complexe discovery widget op zeer kleine schermen, toon simpele CTA */
  .hero-vis > div { padding: 1.1rem !important; }
}

/* Toolkaarten: betere afstand op mobiel */
@media(max-width:600px){
  .tools-rst { grid-template-columns: 1fr !important; gap: .85rem; }
  .tk { padding: 1.1rem; }
  .tk-acties { flex-direction: column; gap: .45rem; }
  .tk-acties .kb, .tk-acties .kv { padding: .58rem; font-size:.82rem; }
}

/* Categorie-kaarten mobiel */
@media(max-width:600px){
  .cat-rst { grid-template-columns: 1fr 1fr !important; gap:.75rem; }
  .catk { padding: 1.2rem; }
  .cat-ico { width:38px; height:38px; font-size:1.1rem; margin-bottom:.75rem; }
  .catk h3 { font-size:.92rem; }
  .catk p { font-size:.76rem; }
}

/* Blog kaarten mobiel */
@media(max-width:480px){
  .bk-body { padding: 1rem; }
  .bk h3 { font-size:.92rem; }
  .bk p { font-size:.78rem; }
  .bk-afb { height:160px; }
}

/* Sectie padding mobiel */
@media(max-width:480px){
  .sec { padding: 2rem .85rem; }
  .sec-sm { padding: 1.5rem .85rem; }
  .container { padding: 0 .85rem; }
  .kop { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
}

/* Header mobiel: logo kleiner, meer ruimte voor hamburger */
@media(max-width:480px){
  .hdr { padding: 0 .85rem; }
  .logo { font-size: 1rem; }
  .logo-icoon { width:32px; height:32px; font-size:.8rem; }
  .logo img { height: 30px !important; }
}

/* Vergelijkingstabel mobiel */
@media(max-width:640px){
  .vt-wrap { overflow-x: auto; }
  .vt { min-width: 540px; }
}

/* Contactpagina mobiel */
@media(max-width:480px){
  .cf { padding: 1.35rem; }
  .fg input, .fg textarea, .fg select { font-size:.85rem; padding: .6rem .8rem; }
}

/* Over ons waarden mobiel */
@media(max-width:600px){
  .waarden-rst { grid-template-columns: 1fr 1fr; gap:.85rem; }
  .wk { padding:1.1rem; }
}
@media(max-width:420px){
  .waarden-rst { grid-template-columns: 1fr; }
}

/* FAQ mobiel: grotere touch targets */
@media(max-width:600px){
  .faq-acc-q { font-size:.87rem; padding: .95rem 1rem; }
  .faq-pg-cta { padding: 1.75rem 1.25rem; }
  .faq-pg-cta h3 { font-size: 1.2rem; }
}

/* Footer mobiel */
@media(max-width:480px){
  footer { padding: 2.5rem .85rem 1.5rem; }
  .vt-onder { flex-direction: column; text-align: center; gap: .5rem; }
  .nl-f { flex-direction: column; }
  .nl-f input { width:100%; }
  .nl-f button { width:100%; padding: .65rem; }
}

/* Blog hero mobiel */
@media(max-width:600px){
  #pg-blog > div:first-child { padding: 3rem 1rem 2.5rem !important; }
  #pg-blog > div:first-child h1 { font-size: clamp(1.6rem, 5.5vw, 2.5rem) !important; }
}

/* Populaire strip kaarten: touch-friendly */
@media(max-width:600px){
  .pk2 { min-width: 220px; padding: 1.1rem; }
  .pk2 h3 { font-size:.88rem; }
  .pk2-desc { font-size:.76rem; min-height:40px; }
}

/* Tool detail pagina mobiel */
@media(max-width:600px){
  .td-kop { padding: 2rem 1rem 1.5rem; }
  .td-logo { width:60px; height:60px; font-size:1.4rem; border-radius:14px; }
  .td-info h1 { font-size: 1.55rem; }
  .td-body { padding: 1.5rem 1rem; gap:1.25rem; }
}

/* Mobiel artikel-pagina ("Wat is AI") */
@media(max-width:600px){
  .hero-artikel { min-height: 320px; }
  .hero-inner { padding: 2.5rem 1rem; }
  .artikel-body h2 { font-size: 1.35rem; }
  .artikel-body h3 { font-size: 1.05rem; }
  .cta-blok-art { padding: 1.75rem 1.25rem; border-radius: 14px; }
  .cta-blok-art h3 { font-size: 1.25rem; }
}

/* Smooth scroll & touch improvements */
@media(max-width:768px){
  .pop-scroll-wrap { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .ticker-wrap { display: none; } /* ticker is overbodig op klein mobiel scherm */
}

/* Cookie banner mobiel */
@media(max-width:480px){
  #cookie-banner > div { flex-direction: column; gap: .75rem; }
  #cookie-banner { padding: 1rem; }
}

/* ─── Tool Widget ─── */
#cb-widget{position:fixed;bottom:1.75rem;right:1.75rem;z-index:10000;font-family:'Plus Jakarta Sans',sans-serif}
#cb-toggle{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7c3aed);border:none;cursor:pointer;box-shadow:0 4px 22px rgba(37,85,232,.45);font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all .22s;color:#fff;position:relative}
#cb-toggle::after{content:'';position:absolute;top:0;right:0;width:14px;height:14px;background:#4ade80;border-radius:50%;border:2px solid #fff;animation:cbPulse 2.5s infinite}
#cb-toggle:hover{transform:scale(1.08);box-shadow:0 6px 30px rgba(37,85,232,.55)}
@keyframes cbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
#cb-box{position:absolute;bottom:72px;right:0;width:360px;background:#fff;border-radius:18px;box-shadow:0 12px 50px rgba(0,0,0,.2);border:1px solid var(--rand);display:flex;flex-direction:column;animation:cbIn .22s ease;max-height:540px}
@keyframes cbIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#cb-head{background:linear-gradient(135deg,var(--accent),#7c3aed);padding:.95rem 1.1rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-radius:18px 18px 0 0}
#cb-msgs{flex:1;min-height:0;min-height:200px;max-height:340px;overflow-y:auto;overflow-x:hidden;padding:.85rem;display:flex;flex-direction:column;gap:.65rem;background:var(--bg);scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.cb-msg{max-width:86%;padding:.65rem .9rem;border-radius:12px;font-size:.82rem;line-height:1.6;animation:cbIn .18s ease;word-wrap:break-word}
.cb-msg.bot{background:#fff;border:1px solid var(--rand);border-radius:12px 12px 12px 3px;color:var(--tekst2);align-self:flex-start;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.cb-msg.user{background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;border-radius:12px 12px 3px 12px;align-self:flex-end}
.cb-msg a{color:var(--accent);font-weight:600;text-decoration:none}
.cb-msg a:hover{text-decoration:underline}
.cb-loading{display:flex;align-items:center;gap:.32rem;padding:.65rem .9rem;align-self:flex-start;background:#fff;border:1px solid var(--rand);border-radius:12px 12px 12px 3px}
.cb-dot{width:7px;height:7px;border-radius:50%;background:var(--gedimpt2);animation:cbDot 1.3s infinite}
.cb-dot:nth-child(2){animation-delay:.22s}.cb-dot:nth-child(3){animation-delay:.44s}
@keyframes cbDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.cb-quick{font-size:.7rem;padding:.3rem .65rem;border-radius:100px;border:1.5px solid var(--rand2);background:white;color:var(--accent);cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;transition:all .18s;white-space:nowrap}
.cb-quick:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
#cb-footer{display:flex;gap:.42rem;padding:.65rem .75rem;background:#fff;border-top:1px solid var(--rand);flex-shrink:0}
#cb-input{flex:1;border:1.5px solid var(--rand);border-radius:8px;padding:.52rem .78rem;font-size:.82rem;font-family:'Plus Jakarta Sans',sans-serif;outline:none;color:var(--tekst);transition:border-color .18s}
#cb-input:focus{border-color:var(--accent)}
#cb-send{width:36px;height:36px;border-radius:8px;background:var(--accent);border:none;color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0}
#cb-send:hover{background:var(--accent-donker)}
#cb-snelle-vragen{display:flex;flex-wrap:wrap;gap:.38rem;padding:.52rem .72rem;background:var(--bg2);border-top:1px solid var(--rand);flex-shrink:0}
@media(max-width:480px){#cb-box{width:calc(100vw - 2.2rem);right:-1.75rem}}

/* ─── SCROLL REVEAL ANIMATIONS ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}
.scroll-reveal.animate-ready {
  opacity: 0;
  transform: translateY(32px);
}
.scroll-reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.hover-3d {
  transition: transform .3s ease, box-shadow .3s ease;
  transform-style: preserve-3d;
}
.hover-3d:hover {
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}
.glow-border {
  position: relative;
}
.glow-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(35,81,229,.4), rgba(109,58,237,.4), rgba(10,184,118,.3));
  z-index: -1;
  filter: blur(8px);
  opacity: 0;
  transition: opacity .3s;
}
.glow-border:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   MOBIELE NAV FIX + ACCESSIBILITY + TOUCH TARGETS
   ═══════════════════════════════════════════════ */

/* ── KRITIEKE FIX: nav verbergen op mobiel ── */
/* De !important op nav{display:flex!important} hierboven werd niet overschreven
   door de media query. Dit fix dat definitief: */
@media(max-width:768px){
  nav { display: none !important; }
  .hamburger { display: flex !important; }
  /* Zorg dat de hamburger altijd zichtbaar en klikbaar is */
  .hamburger { min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  /* Header: logo links, hamburger rechts, groene knop verdwijnt voor ruimte */
  .hdr { gap:.5rem; padding:0 1rem; }
  .nk-groen { display:none !important; } /* geen "Vergelijken →" knop op mobiel; staat in mob-nav */
}

/* ── MOBIEL NAV MENU verbeterd ── */
.mob-nav { padding:.85rem 1rem; gap:.2rem; }
.mob-nav a {
  padding: .75rem 1rem;
  border-radius: var(--rs);
  font-size: .95rem;
  font-weight: 500;
  min-height: 44px;           /* touch target */
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--rand);
  color: var(--tekst2);
  text-decoration: none;
}
.mob-nav a:last-child { border-bottom: none; }
/* Groene knop in hamburger menu */
.mob-nav .mob-vergelijk-btn {
  background: linear-gradient(135deg,#155724,#0f3d1a);
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px;
  margin-top: .4rem;
  text-align: center;
  justify-content: center;
  border-bottom: none !important;
}

/* ── TOUCH TARGETS: min 44×44px voor alle klikbare elementen ── */
.fk, .sorteer { min-height: 44px; }
.nk { min-height: 44px; display:inline-flex !important; align-items:center !important; }
.kp, .ko { min-height: 44px; }
.kb, .kv { min-height: 44px; }
.dd-item { min-height: 44px; }
/* Cookie banner knoppen */
#cookie-banner button { min-height: 44px; padding: .55rem 1.2rem; }
/* Chatbot toggle al 58px, goed. Kleine chatbot-knoppen: */
.cb-quick { min-height: 36px; padding: .38rem .8rem; }

/* ── ACCESSIBILITY: contrast fixes ── */
/* 1. Tijdslots in besparingschecklist: donkerdere tekst op lichte achtergrond */
/* Oranje chips: was color:rgb(234,88,12) op rgb(255,247,237) → ratio 3.8:1 FAIL */
/* Fix: donkerdere oranje */
span[style*="color: rgb(234, 88, 12)"],
span[style*="color:rgb(234,88,12)"] {
  color: #b94500 !important; /* contrast 5.5:1 op oranje achtergrond ✓ */
}
/* Groene chips: was color:rgb(16,185,129) op rgb(236,253,245) → ratio ~2.9:1 FAIL */
span[style*="color: rgb(16, 185, 129)"],
span[style*="color:rgb(16,185,129)"] {
  color: #047857 !important; /* contrast 5.1:1 op licht-groen achtergrond ✓ */
}

/* 2. Footer kleine tekst: verhoog contrast */
footer p[style*="0.73rem"],
footer span[style*="0.7rem"],
footer * { color: inherit; }
/* --dim is al #47567a wat 7.6:1 contrast heeft op wit. OK.
   Maar op donkere footer achtergrond zijn lichte kleuren nodig: */

/* 3. Privacylink in cookie banner: voeg onderlijn toe voor kleur-onafhankelijke herkenbaarheid */
#cookie-banner a { text-decoration: underline !important; text-underline-offset: 2px; }

/* 4. Algemeen: links in donkere secties onderscheidbaar maken */
.hero a:not(.kp):not(.ko):not(.nk),
section[style*="background:#0a"] a:not(.kp):not(.ko),
div[style*="background:#0a1020"] a:not(.kp):not(.ko),
div[style*="background:linear-gradient"] a:not(.kp):not(.ko):not(.nk):not([style*="color:#fff"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 5. EERLIJKE CHECK chip contrast: was color:#e11d48 op #fff0f3 → net aan grens */
div.chip[style*="#fff0f3"] { color: #9e0a2d !important; } /* donkerder rood: 6.2:1 */

/* ── MOBIEL: Besparingscalculator compacter ── */
@media(max-width:600px){
  /* Calculator widget: stapel items verticaal, kleiner */
  div[id="bsp-resultaat"] { padding: 1rem !important; }
  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: .65rem !important;
  }
  /* Tijdslots in uurplanning: scroll horizontaal */
  div[style*="07:00"],
  div[style*="font-size:.7rem"][style*="background"] { font-size: .65rem !important; }
}

/* ── MOBIEL: Homepage secties compacter ── */
@media(max-width:600px){
  /* Hero discovery widget: verberg drijvende kaarten, toon compact blok */
  .hero-vis .drk { display: none; }
  .hero-vis { min-height: 120px !important; }

  /* Stats kleiner */
  .held-stats { gap: 1rem; }
  .stat strong { font-size: 1.2rem; }

  /* Categorie chips in hero: scroll horizontaal */
  #home-cats { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }

  /* Secties: minder padding */
  .sec { padding: 1.75rem .85rem; }
  .sec-sm { padding: 1.25rem .85rem; }

  /* Kopteksten smaller */
  .kop { font-size: clamp(1.35rem, 5vw, 2rem) !important; line-height: 1.15; }

  /* Blog sidebar verbergen al gedaan; zorg voor nette 1-kolom lay-out */
  #pg-blog .blog-rst { gap: .85rem !important; }

  /* Vergelijkingstabel: horizontaal scrollbaar */
  .vt-wrap { -webkit-overflow-scrolling: touch; }
}

/* ── MOBIEL: Header altijd netjes ── */
@media(max-width:480px){
  .hdr { padding: 0 .75rem !important; gap: .4rem !important; }
  .logo { font-size: .95rem !important; gap: .4rem !important; }
  .logo-icoon { width: 30px !important; height: 30px !important; font-size: .75rem !important; }
  header { height: 64px !important; min-height: 64px !important; max-height: 64px !important; }
  .hdr { height: 64px !important; }
  .mob-nav { top: 64px; }
}

/* ── MOBIEL: Extra kleine schermen (<380px) ── */
@media(max-width:380px){
  .logo span { display: none; } /* verberg de naam-tekst, toon alleen icoon */
  .hamburger span { width: 20px; }
}

/* ── SEO: Zorg dat onclick-links ook een href hebben (crawlability) ── */
/* Alle onclick-divs die als link fungeren: al opgelost via href-attributen */

/* ── ALGEMEEN: Smooth scrollen op iOS ── */
body { -webkit-overflow-scrolling: touch; }
html { scroll-behavior: smooth; }

/* Ensure footer links are distinguishable */
footer a { text-decoration: underline; text-underline-offset: 2px; opacity: .9; }
footer a:hover { opacity: 1; }