:root{
  --bg:#f6f4f0;
  --blue:#1800ad;
  --ink:#1800ad;
  --onblue:#f6f4f0;
  --muted:color-mix(in srgb,#1800ad 78%,#f6f4f0);
  --line:color-mix(in srgb,#1800ad 28%,#f6f4f0);
}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.55}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}

nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:16px;flex-wrap:wrap;max-width:980px;margin:0 auto;padding-left:24px;padding-right:24px;position:sticky;top:0;z-index:50;background:var(--bg);transition:box-shadow .25s ease}
nav.nav-scrolled{box-shadow:0 2px 14px color-mix(in srgb,var(--blue) 14%,transparent)}
.logo{display:inline-block}
.logo img{display:block;height:30px;width:auto;transition:transform .2s ease}
.logo:hover img{transform:scale(1.04)}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:600;position:relative}
nav a[aria-current="page"]{text-decoration:underline}
nav ul a:not([aria-current="page"])::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--blue);transition:right .25s ease}
nav ul a:not([aria-current="page"]):hover::after{right:0}

h1{font-stretch:125%;font-weight:900;font-size:clamp(44px,9vw,104px);line-height:.95;letter-spacing:-.035em;margin:0 0 28px}
h1.case{font-size:clamp(40px,8vw,84px)}
h2{font-stretch:112%;font-weight:900;font-size:clamp(28px,4.5vw,44px);letter-spacing:-.02em;margin:0 0 8px}
/* ---- Hero: volle breedte, merkblauw, met geanimeerde lijnillustratie ---- */
.hero{--pad-x:max(24px,calc((100% - 980px)/2 + 24px));padding:64px var(--pad-x) 200px;max-width:none;margin:0;position:relative;overflow:hidden;background:var(--blue);color:var(--onblue)}
.hero>*{position:relative;z-index:1}
.hero>.hero-art{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:clamp(260px,30vw,430px);pointer-events:none}
.hero-home>.hero-art{height:100%}
.hero-home{padding-top:96px;padding-bottom:clamp(200px,24vw,300px);min-height:clamp(560px,78vh,760px)}
.hero h1,.hero h2,.hero a:not(.btn){color:var(--onblue)}
.hero p{color:color-mix(in srgb,var(--onblue) 90%,var(--blue))}
.hero .btn{background:var(--onblue);color:var(--blue)}
.hero .btn:hover{box-shadow:0 10px 24px rgba(0,0,0,.28)}
.hero .meta{color:color-mix(in srgb,var(--onblue) 80%,var(--blue))}
.hero .chero{border-color:color-mix(in srgb,var(--onblue) 55%,var(--blue));box-shadow:0 14px 40px rgba(0,0,40,.35)}
.hero-art .rf{fill:var(--blue);opacity:0;animation:bf-fade .9s ease forwards;animation-delay:var(--ds,0s)}
.hero-art .rh{opacity:0;animation:bf-hatch 1.2s ease forwards;animation-delay:var(--ds,0s)}
.hero-art .rs{fill:none;stroke:var(--onblue);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:bf-draw 2.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--ds,0s)}
.hero-art .rg{transform:translateY(calc(var(--py,0) * var(--k,0) * 1px))}
.hero-art .rb{animation:bf-bob var(--dur,9s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.hero-art .sun{opacity:0;animation:bf-fade 1.6s ease .3s forwards}
.hero-art .sun-glow{fill:var(--onblue);opacity:.07}
.hero-art .stripes line{stroke:var(--onblue);stroke-width:2.2;opacity:.42}
.hero-art .stripes{animation:bf-rise 3s linear infinite}
.hero-art .st{fill:var(--onblue);animation:bf-twinkle 5s ease-in-out infinite}
@keyframes bf-hatch{to{opacity:var(--ho,.15)}}
@keyframes bf-draw{to{stroke-dashoffset:0}}
@keyframes bf-fade{to{opacity:1}}
@keyframes bf-bob{from{transform:translateY(0)}to{transform:translateY(var(--a,-5px))}}
@keyframes bf-rise{to{transform:translateY(-9px)}}
@keyframes bf-twinkle{0%,100%{opacity:.15}50%{opacity:.85}}
.art-band{position:relative;margin-top:72px;height:170px;background:var(--blue);overflow:hidden}
.art-band .hero-art{position:absolute;left:0;bottom:0;width:100%;height:100%}
.hero-art .sun-glow{opacity:.07}
@media (max-width:560px){.hero{padding-top:44px;padding-bottom:120px}.hero-home{padding-top:64px}}
.hero p,.lead{max-width:58ch;font-size:19px;color:var(--muted);margin:0 0 28px}
.hero p{color:color-mix(in srgb,var(--onblue) 90%,var(--blue))}
.btn{display:inline-block;background:var(--blue);color:var(--onblue);padding:16px 26px;font-weight:800;text-decoration:none;border-radius:4px;border:none;font:inherit;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px color-mix(in srgb,var(--blue) 30%,transparent)}
.btn:active{transform:translateY(0)}
section{margin-top:72px;max-width:980px;margin-left:auto;margin-right:auto;padding:0 24px}
.back{display:inline-block;margin:24px 24px 0;font-weight:700}
.back{transition:transform .2s ease}
.back:hover{transform:translateX(-3px)}

.icon{width:22px;height:22px;flex:none;display:inline-block}
.icon-lg{width:30px;height:30px}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--d,0) * 70ms)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-art *{animation:none!important}
  .hero-art .rs{stroke-dashoffset:0}
  .hero-art .rf,.hero-art .sun{opacity:1}
  .hero-art .rh{opacity:var(--ho,.15)}
}

.branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:8px 0 0}
.branch{border:2px solid var(--line);border-radius:8px;padding:22px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.branch:hover{transform:translateY(-4px);box-shadow:0 12px 26px color-mix(in srgb,var(--blue) 16%,transparent);border-color:var(--blue)}
.branch .icon{color:var(--blue);margin-bottom:10px}
.branch h3{margin:0 0 6px;font-size:18px;font-weight:800}
.branch p{margin:0;color:var(--muted);font-size:15px}

.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--blue)}
.list li{border-bottom:2px solid var(--line)}
.row{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:22px 4px;text-decoration:none;flex-wrap:wrap;transition:transform .2s ease,padding-left .2s ease}
a.row:hover{transform:translateX(4px)}
a.row:hover h3{text-decoration:underline}
.row h3{margin:0;font-size:24px;font-stretch:110%;font-weight:800}
.row span{color:var(--muted);font-weight:600}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;margin:8px 0 0}
.facts h3{margin:0 0 6px;font-size:18px;font-stretch:108%;display:flex;align-items:center;gap:8px}
.facts h3 .icon{color:var(--blue)}
.facts p{margin:0;color:var(--muted)}

.chero{display:block;width:100%;max-width:720px;border-radius:6px;border:2px solid var(--line);margin-top:24px}

.tl{position:relative;margin:0;padding:0 0 0 34px;list-style:none;border-left:3px solid var(--blue)}
.grp{font-weight:800;margin:0 0 16px -34px;padding-left:34px;display:flex;gap:8px;align-items:center}
.grp svg{width:18px;height:18px}
.item{position:relative;border:2px solid var(--line);padding:24px;margin-bottom:22px;border-radius:6px;transition:transform .25s ease,box-shadow .25s ease}
.item:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--blue) 14%,transparent)}
.item::before{content:"";position:absolute;left:-42px;top:30px;width:13px;height:13px;background:var(--blue);border-radius:50%;border:3px solid var(--bg)}
.item.pinned{background:var(--blue);color:var(--onblue);border-color:var(--blue)}
.item.pinned .meta,.item.pinned p{color:var(--onblue)}
.meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:14px;font-weight:700;margin-bottom:8px;flex-wrap:wrap}
.tag{border:2px solid currentColor;border-radius:99px;padding:1px 10px}
.tag.w{background:var(--blue);color:var(--onblue);border-color:var(--blue)}
.pinned .tag.w{background:var(--onblue);color:var(--blue)}
.tag.l{border-style:dashed}
.item h3{margin:0 0 10px;font-size:24px;line-height:1.2;font-stretch:105%;font-weight:800}
.item p{margin:0 0 12px}
.hyp{font-weight:600}
.metrics{display:flex;gap:28px;flex-wrap:wrap;margin:16px 0}
.metrics div{min-width:120px}
.metrics b{display:block;font-stretch:120%;font-weight:900;font-size:30px;line-height:1.1}
.metrics small{display:block;opacity:.85;font-size:14px}
.item img{display:block;width:100%;max-width:420px;border-radius:4px;margin-top:8px}
.pin{margin-left:auto;font:inherit;font-size:14px;font-weight:700;background:none;color:inherit;border:2px solid currentColor;border-radius:99px;padding:3px 12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.pin svg{width:14px;height:14px}

.tool{border:2px solid var(--blue);border-radius:6px;padding:22px;margin:20px 0 32px;background:color-mix(in srgb,var(--blue) 6%,var(--bg))}
.tool h4{margin:0 0 4px;font-size:15px;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
.tool p.tdesc{margin:0 0 14px;color:var(--muted)}
.tool label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.tool input,.tool textarea,.tool select{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:2px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);margin-bottom:12px}
.tool textarea{resize:vertical;font-family:inherit}
.tool pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px dashed var(--line);border-radius:4px;padding:12px;font-size:14px;margin:0 0 12px}
.btn.small{padding:9px 16px;font-size:14px;border:none;cursor:pointer}
.tool-out{font-weight:700;padding:14px;border:1px dashed var(--line);border-radius:4px;margin-bottom:4px}

.art p{max-width:66ch}
.art ol{max-width:66ch;padding-left:22px}
.art ol li{margin-bottom:6px}
.insight-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--blue)}
.insight-list li{border-bottom:2px solid var(--line);transition:background-color .2s ease}

#afspraak{margin-top:72px;max-width:980px;margin-left:auto;margin-right:auto;padding:0 24px}
#afspraak iframe{width:100%;height:720px;border:0;min-width:320px}

footer{margin-top:72px;background:var(--blue);color:var(--onblue);padding:56px 0 40px}
footer .wrap{max-width:980px}
footer h2{font-stretch:125%;font-size:clamp(30px,6vw,60px);margin-bottom:20px}
.flogo{display:block;height:56px;width:auto;margin-bottom:40px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.fgrid h3{margin:0 0 8px;font-size:16px;font-stretch:110%;font-weight:800}
.fgrid a{text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.fgrid a:hover{text-decoration:underline}
.fgrid .icon{width:17px;height:17px}
footer .btn{background:var(--onblue);color:var(--blue)}
.contact{display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:8px}
.contact a.t{font-weight:800;font-size:22px}
.fine{margin-top:40px;font-size:14px;opacity:.9;display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:560px){
  .wrap,.hero,section,#afspraak{padding-left:18px;padding-right:18px}
  .tl{padding-left:26px}
  .item{padding:18px}
  .item::before{left:-34px}
  .grp{margin-left:-26px;padding-left:26px}
}

.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:20px;padding:20px 0;border-bottom:2px solid var(--line)}
.steps li:first-child{border-top:2px solid var(--blue)}
.steps .num{font-stretch:125%;font-weight:900;font-size:28px;min-width:40px;color:var(--blue)}
.steps h3{margin:0 0 4px;font-size:20px;font-weight:800;display:flex;align-items:center;gap:8px}
.steps h3 .icon{color:var(--blue)}
.steps p{margin:0;color:var(--muted);max-width:56ch}
.steps li{transition:background-color .2s ease}
.steps li:hover{background:color-mix(in srgb,var(--blue) 5%,transparent)}

.faq{border-top:2px solid var(--blue)}
.faq details{border-bottom:2px solid var(--line);padding:18px 4px}
.faq summary{font-weight:800;font-size:18px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--muted);max-width:66ch}

.stats{display:flex;gap:48px;flex-wrap:wrap;margin:8px 0 0}
.stats div{width:220px;max-width:220px}
.stats b{display:block;font-stretch:125%;font-weight:900;font-size:44px;line-height:1}
.stats span{color:var(--muted);font-weight:600}

.steps-detail{list-style:none;margin:0;padding:0;border-top:2px solid var(--blue)}
.step-detail{padding:28px 0;border-bottom:2px solid var(--line);transition:background-color .2s ease}
.step-detail:hover{background:color-mix(in srgb,var(--blue) 4%,transparent)}
.step-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.step-detail-head .num{font-stretch:125%;font-weight:900;font-size:24px;color:var(--blue);min-width:32px}
.step-detail-head .icon{color:var(--blue)}
.step-detail-head h3{margin:0;font-size:22px;font-weight:800}
.step-detail p{margin:0 0 8px;color:var(--muted);max-width:62ch}
.step-detail .step-out{color:var(--ink);font-weight:600}
.step-detail .step-out strong{font-weight:700}

/* ---- Case-verhaal: kerncijfers, omzetgrafiek, vergelijkingstabel, testkaart-details ---- */
.eyebrow,.hero .meta{display:block;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 28px}
.kpis>div{border-top:2px solid var(--blue);padding-top:12px}
.kpis b{display:block;font-stretch:125%;font-weight:900;font-size:clamp(28px,4.2vw,40px);line-height:1.05;letter-spacing:-.02em}
.kpis span{display:block;margin-top:6px;color:var(--muted);font-weight:600;font-size:15px}

.bars{list-style:none;margin:20px 0 0;padding:0}
.bar-row{display:grid;grid-template-columns:190px 1fr 120px;align-items:center;gap:6px 16px;padding:10px 0}
.bar-label{font-weight:700}
.bar-track{display:block;border-left:2px solid var(--blue);height:30px}
.bar-fill{display:block;height:100%;width:var(--w);background:var(--blue);border-radius:0 4px 4px 0;transform-origin:left center;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 120ms + 200ms)}
.bar-row.is-visible .bar-fill{transform:scaleX(1)}
.bar-row.est .bar-fill{background:repeating-linear-gradient(135deg,var(--blue) 0 3px,color-mix(in srgb,var(--blue) 30%,var(--bg)) 3px 7px);box-shadow:inset 0 0 0 2px var(--blue)}
.bar-val{font-stretch:115%;font-weight:900;font-size:18px;white-space:nowrap}
.bar-note{margin:14px 0 0;max-width:70ch;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion: reduce){.bar-fill{transform:none;transition:none}}
@media (max-width:640px){
  .bar-row{grid-template-columns:1fr auto}
  .bar-track{grid-column:1 / -1;grid-row:2}
}

.cmp{width:100%;border-collapse:collapse;border-top:2px solid var(--blue);margin-top:8px}
.cmp th{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:12px 12px 12px 4px;color:var(--muted)}
.cmp td{padding:18px 12px 18px 4px;border-bottom:2px solid var(--line);vertical-align:top;max-width:60ch}
.cmp td:last-child{font-weight:800;width:32%}
@media (max-width:640px){
  .cmp thead{display:none}
  .cmp tr,.cmp td{display:block;width:auto!important;max-width:none}
  .cmp tr{border-bottom:2px solid var(--line);padding:14px 0}
  .cmp td{border:0;padding:4px 0}
  .cmp td::before{content:attr(data-label);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
}

.item{height:auto}
.item img{height:auto}
.why{margin:0 0 12px;display:grid;gap:10px}
.why p,.item p .lbl{margin:0}
.lbl{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;opacity:.75;margin-bottom:2px}
.t-note{font-size:14px;opacity:.9}
.item.pinned .lbl{opacity:.8}

.facts>div>.icon{margin-bottom:8px;color:var(--blue)}

.cta-band{border:2px solid var(--blue);border-radius:10px;padding:clamp(24px,4vw,40px);background:color-mix(in srgb,var(--blue) 6%,var(--bg))}
.cta-band .lead{margin-bottom:20px}
.cta-other{margin-left:18px;font-weight:700;display:inline-block;margin-top:10px}

/* ---- Voor/na-afbeeldingen in een case ---- */
.media{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}
.media figure{margin:0}
.media img{display:block;width:100%;height:auto;border-radius:6px;border:2px solid var(--line);background:#fff}
.media figcaption{margin-top:8px;font-size:15px;color:var(--muted)}
.media .wide{grid-column:1/-1}
@media(min-width:760px){.media .wide{grid-column:auto}}

/* ---- Logo-muur ---- */
.logos{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.logos li{display:flex;align-items:center;justify-content:center;min-height:96px;padding:16px;border:2px solid var(--line);border-radius:6px;transition:border-color .2s ease,transform .2s ease}
.logos li:hover{border-color:var(--blue);transform:translateY(-2px)}
.logos a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.logos img{display:block;max-width:100%;height:auto}

/* ---- Cases-overzicht: titel en omschrijving op één regel (desktop) ---- */
@media(min-width:760px){
  .row{flex-wrap:nowrap}
  .row h3{white-space:nowrap}
  .row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
}

/* ---- Over ons: foto + bio ---- */
.about{display:grid;grid-template-columns:190px 1fr;gap:32px;align-items:start}
.about-photo{width:190px;height:190px;border-radius:50%;object-fit:cover;border:3px solid var(--blue)}
@media(max-width:700px){.about{grid-template-columns:1fr}.about-photo{width:140px;height:140px}}

/* ---- Klantquotes ---- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:20px 0 24px}
.quotes figure{margin:0;padding:24px;border:2px solid var(--line);border-radius:6px}
.quotes blockquote{margin:0 0 16px;font-size:18px;line-height:1.5}
.quotes figcaption{color:var(--muted);font-size:15px}
.quotes figcaption b{color:var(--ink)}

/* ---- Cookiebanner ---- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:640px;margin:0 auto;background:var(--bg);border:2px solid var(--blue);border-radius:8px;padding:18px 20px;box-shadow:0 8px 30px rgba(24,0,173,.18);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cookie p{margin:0;flex:1 1 260px;font-size:15px}
.cookie .cookie-btns{display:flex;gap:10px}
.cookie button{font:inherit;font-weight:700;cursor:pointer;border-radius:6px;padding:9px 16px;border:2px solid var(--blue);background:var(--bg);color:var(--blue)}
.cookie button.yes{background:var(--blue);color:var(--onblue)}
.fine a{color:inherit}

/* ---- Contactgegevens bij #afspraak ---- */
.contact-direct{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 28px}
.contact-direct a{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border:2px solid var(--blue);border-radius:6px;font-size:22px;font-weight:800;text-decoration:none;transition:background .2s ease,color .2s ease}
.contact-direct a:hover{background:var(--blue);color:var(--onblue)}
.contact-direct .icon{width:24px;height:24px}
.cal-h{margin:0 0 8px;font-size:20px}

/* ---- Hamburgermenu (mobiel) ---- */
.nav-toggle{display:none}
@media(max-width:760px){
  nav{flex-wrap:nowrap}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:48px;height:48px;padding:0 10px;margin-left:auto;margin-right:-10px;background:none;border:0;cursor:pointer;color:var(--blue)}
  .nav-toggle span{display:block;height:3px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-top:2px solid var(--blue);box-shadow:0 14px 24px color-mix(in srgb,var(--blue) 16%,transparent);padding:4px 0 12px}
  nav ul.open{display:flex}
  nav ul li{border-bottom:2px solid var(--line)}
  nav ul li:last-child{border-bottom:0}
  nav ul a{display:block;padding:20px 24px;font-size:26px;font-weight:800;font-stretch:110%}
  nav ul a::after{display:none}
}
#afspraak{scroll-margin-top:84px}

/* ---- Knop: lichteffect (spotlight volgt de muis + glans bij hover) ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),transparent 62%)}
.btn::after{content:"";position:absolute;top:-10%;left:-70%;width:45%;height:120%;pointer-events:none;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:0}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn:hover::after,.btn:focus-visible::after{animation:bf-shine .85s ease}
.hero .btn::before,footer .btn::before{background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(24,0,173,.2),transparent 62%)}
.hero .btn::after,footer .btn::after{background:linear-gradient(90deg,transparent,rgba(24,0,173,.22),transparent)}
.hero-home .btn::after{animation:bf-shine 1.1s ease 2.8s 1}
@keyframes bf-shine{0%{left:-70%;opacity:1}100%{left:140%;opacity:1}}
@media (prefers-reduced-motion:reduce){.btn::after{animation:none!important;opacity:0!important}}

/* Klantlogo's bij cases, aanbod, losse quote */
.rowlogo{display:inline-block;vertical-align:middle;margin-right:14px}
.client{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:28px;padding-bottom:0}
.client p{margin:0;color:var(--muted);font-weight:600}
.quotes.single{grid-template-columns:minmax(0,720px)}
.offer{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:8px 0 24px}
.offer>div{border:2px solid var(--blue);border-radius:8px;padding:26px;background:#fff}
.offer .icon{color:var(--blue);margin-bottom:8px}
.offer .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.offer h3{margin:0 0 10px;font-size:21px;font-stretch:108%}
.offer p,.offer li{color:var(--muted);margin:0}
.offer ul{margin:0;padding-left:20px;display:grid;gap:6px}
/* Mobiele flikker homepage: SVG op eigen laag, geen automatische glans op touch */
.hero-art{transform:translateZ(0);backface-visibility:hidden}
.hero-art .rg{will-change:transform}
@media (hover:none){.hero-home .btn::after{animation:none!important}}

.media.phones{grid-template-columns:repeat(2,minmax(0,300px));justify-content:start}
.tool fieldset.chk{border:2px solid var(--line);border-radius:6px;margin:0 0 12px;padding:10px 14px 4px}
.tool fieldset.chk legend{font-weight:800;padding:0 6px}
.tool .chk-row{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:16px;margin:0 0 10px}
.tool .chk-row input{width:auto;margin:5px 0 0;flex:none}
.tool-out{font-size:17px}