/* =========================================================
   FV Website & Marketing — stylesheet v4 ("bouwtekening")
   ========================================================= */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JBMono";src:url("../fonts/mono.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#f7f5f0;
  --paper-2:#efebe2;
  --card:#ffffff;
  --ink:#0e1116;
  --ink-2:#2a2f3a;
  --muted:#5a606b;
  --muted-2:#6b707a;
  --line:rgba(14,17,22,.10);
  --line-2:rgba(14,17,22,.18);
  --blue:#2b7aff;
  --blue-600:#1a62e0;
  --blue-700:#154fb8;
  --blue-tint:#e4edff;
  --blue-soft:rgba(43,122,255,.10);
  --grid:rgba(43,122,255,.09);
  --green:#1f9d5c;
  --wa:#25d366;
  --radius:14px;
  --radius-lg:22px;
  --maxw:1200px;
  --shadow-sm:0 1px 2px rgba(14,17,22,.05),0 3px 12px rgba(14,17,22,.04);
  --shadow:0 16px 40px rgba(14,17,22,.10);
  --shadow-lg:0 34px 80px rgba(14,17,22,.16);
  --head:"Bricolage","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JBMono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);font-weight:700;letter-spacing:-.03em;line-height:1.05}
h3,h4{letter-spacing:-.015em;line-height:1.2}
p a,.link{color:var(--blue-600);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
p a:hover,.link:hover{color:var(--blue-700)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:10px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:10px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.center{text-align:center}

/* markeerstift-accent */
.accent{color:var(--blue-600);background:linear-gradient(transparent 70%,rgba(43,122,255,.18) 70%,rgba(43,122,255,.18) 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.on-dark .accent,.dark .accent{color:#7fb1ff;background:linear-gradient(transparent 70%,rgba(43,122,255,.32) 70%,rgba(43,122,255,.32) 92%,transparent 92%)}

/* technisch label */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.kicker::before{content:"";width:8px;height:8px;background:var(--blue);flex:none}
.kicker b{font-weight:500;color:var(--blue-600)}
.dark .kicker,.on-dark .kicker{color:#aeb7c7}
.dark .kicker b{color:#7fb1ff}

/* blauwdruk-raster */
.grid-bg{position:relative}
.grid-bg::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.grid-bg>*{position:relative}

/* reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:12px;font-family:var(--head);font-weight:600;font-size:1rem;letter-spacing:-.01em;line-height:1.2;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 22px rgba(26,98,224,.28)}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-1px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-outline-light:hover{border-color:#fff}
.btn-wa{background:var(--wa);color:#063519}
.btn-wa:hover{transform:translateY(-1px)}
.btn-wa:hover svg{transform:none}
.btn-lg{padding:16px 26px;font-size:1.05rem}
.btn-block{width:100%}
.btn-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;color:var(--ink);border-bottom:1.5px solid currentColor;padding-bottom:2px}
.btn-link svg{width:17px;height:17px;transition:transform .2s}
.btn-link:hover svg{transform:translateX(4px)}
.btn-row{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center}
.btn-row.center{justify-content:center}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(247,245,240,.86);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.site-header.stuck{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--head);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.1}
.logo .mark{width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;letter-spacing:-.04em;flex:none;position:relative;overflow:hidden}
.logo .mark::after{content:"";position:absolute;right:5px;bottom:5px;width:6px;height:6px;background:var(--blue)}
.logo .mark span{color:#7fb1ff}
.logo .txt small{display:block;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links>a,.dd-toggle{position:relative;font-size:.95rem;font-weight:500;color:var(--ink-2);padding:6px 0;background:none;border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .2s}
.nav-links>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links>a:hover::after,.nav-links>a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links>a:hover,.dd-toggle:hover,.nav-links>a[aria-current="page"],.dd-toggle.is-current{color:var(--ink)}
.dd-toggle svg{width:14px;height:14px;transition:transform .25s}
.has-dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 18px);left:50%;min-width:300px;transform:translate(-50%,6px);background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.has-dd:hover .dd-menu,.has-dd:focus-within .dd-menu,.has-dd.open .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.has-dd:hover .dd-toggle svg,.has-dd.open .dd-toggle svg{transform:rotate(180deg)}
.dd-menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:10px;transition:background .15s}
.dd-menu a:hover{background:var(--paper)}
.dd-menu .dd-ico{width:36px;height:36px;flex:none;border-radius:9px;background:var(--blue-tint);display:grid;place-items:center;color:var(--blue-600)}
.dd-menu .dd-ico svg{width:18px;height:18px}
.dd-menu b{display:block;font-size:.93rem;font-weight:600;color:var(--ink)}
.dd-menu small{display:block;font-size:.8rem;color:var(--muted-2);line-height:1.35}
.nav-ctas{display:flex;gap:10px}
.nav-ctas .btn{padding:11px 18px;font-size:.93rem}
.nav-ctas .btn-dark{background:transparent;color:var(--ink);border-color:var(--line-2)}
.nav-ctas .btn-dark:hover{border-color:var(--ink);background:#fff}
.menu-btn{display:none;background:none;border:0;padding:8px;margin-right:-8px;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:28px;height:28px}
.nav-links>.nav-mobile-cta{display:none}
@media (max-width:1240px){.nav-ctas .btn-dark{display:none}}
@media (max-width:1100px) and (min-width:961px){.logo .txt{display:none}}
@media (max-width:1100px){.nav-links{gap:22px}}
@media (max-width:960px){
  .menu-btn{display:block}
  .nav-ctas{display:none}
  .site-header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{height:66px}
  .nav-links{position:fixed;top:66px;left:0;right:0;height:calc(100vh - 66px);height:calc(100dvh - 66px);background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px 0 120px;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-links>a,.dd-toggle{padding:17px 24px;font-size:1.1rem;font-family:var(--head);font-weight:600;border-bottom:1px solid var(--line);width:100%;justify-content:space-between;color:var(--ink)}
  .nav-links>a::after{display:none}
  .has-dd{border-bottom:1px solid var(--line)}
  .has-dd .dd-toggle{border-bottom:0}
  .dd-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;border-radius:0;padding:0 12px;min-width:0;display:none;background:transparent}
  .dd-menu::before{display:none}
  .has-dd.open .dd-menu{display:block;transform:none;padding-bottom:10px}
  .has-dd:hover .dd-menu{transform:none}
  .nav-links>.nav-mobile-cta{display:flex;margin:24px 24px 0;justify-content:center;border-bottom:0;width:auto;background:var(--blue-600);color:#fff;border-radius:12px}
  body.menu-open{overflow:hidden}
  body.menu-open .mbar{display:none}
}

/* ---------- hero (home) ---------- */
.hero{padding:64px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 14px 7px 10px;font-size:.85rem;color:var(--ink-2);margin-bottom:26px;box-shadow:var(--shadow-sm)}
.status b{font-weight:600}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.hero h1{font-size:clamp(2.7rem,6.2vw,5.2rem);font-weight:750;letter-spacing:-.045em;line-height:.98;margin-bottom:24px}
.hero .lead{font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--muted);max-width:540px;margin-bottom:32px}
.hero .btn-row{margin-bottom:30px}
.hero-checks{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.92rem;color:var(--ink-2);font-weight:500}
.hero-checks li{display:flex;align-items:center;gap:8px}
.hero-checks svg{width:18px;height:18px;color:var(--green)}

/* ---------- bouwtekening-mockup ---------- */
.bp{position:relative;padding:34px 0 34px}
.bp-frame{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.bp-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.bp-bar i{width:10px;height:10px;border-radius:50%;background:#d8d3c8}
.bp-bar .url{margin-left:10px;flex:1;height:20px;border-radius:6px;background:#fff;border:1px solid var(--line);font-family:var(--mono);font-size:.66rem;color:var(--muted-2);display:flex;align-items:center;padding:0 10px;white-space:nowrap;overflow:hidden}
.bp-stage{position:relative;aspect-ratio:16/11}
.bp-layer{position:absolute;inset:0;padding:14px 16px;display:grid;grid-template-rows:auto 1.35fr auto auto;gap:12px}
/* schets-laag */
.bp-wire{background:#fbfaf7;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
.bp-wire .b{border:1.5px dashed rgba(43,122,255,.55);border-radius:8px;background:rgba(43,122,255,.03)}
/* eindresultaat-laag */
.bp-final{background:#fff;clip-path:inset(0 100% 0 0);animation:paint 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes paint{0%,12%{clip-path:inset(0 100% 0 0);opacity:1}45%,90%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.bp-scan{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);box-shadow:0 0 18px 4px rgba(43,122,255,.45);left:0;animation:scan 9s cubic-bezier(.65,0,.35,1) infinite;z-index:3}
@keyframes scan{0%,12%{left:0;opacity:0}14%{opacity:1}45%{left:100%;opacity:1}47%,100%{left:100%;opacity:0}}
.f-nav{display:flex;align-items:center;gap:10px}
.f-logo{font-family:var(--head);font-weight:800;font-size:.85rem;letter-spacing:-.03em}
.f-logo span{color:var(--blue)}
.f-nav i{height:6px;width:34px;border-radius:3px;background:#e3e1da}
.f-nav i:first-of-type{margin-left:auto}
.f-nav em{height:22px;width:64px;border-radius:7px;background:var(--blue-600)}
.f-hero{border-radius:10px;background:radial-gradient(260px 150px at 90% 0%,rgba(43,122,255,.5),transparent 60%),var(--ink);color:#fff;padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.f-hero b{font-family:var(--head);font-weight:750;font-size:clamp(.9rem,1.6vw,1.3rem);letter-spacing:-.03em;line-height:1.05;margin-bottom:8px;max-width:70%}
.f-hero b span{color:#7fb1ff}
.f-hero i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.25);width:58%;margin-bottom:5px}
.f-hero i+i{width:44%}
.f-btns{display:flex;gap:7px;margin-top:10px}
.f-btns em{height:20px;width:76px;border-radius:6px;background:var(--blue-600)}
.f-btns em+em{background:var(--wa);width:62px}
.f-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.f-cards div{background:var(--paper);border-radius:8px;padding:9px;border:1px solid var(--line)}
.f-cards div::before{content:"";display:block;width:16px;height:16px;border-radius:5px;background:var(--blue-tint);margin-bottom:6px}
.f-cards div i{display:block;height:4px;border-radius:3px;background:#dcd9d0;margin-top:4px}
.f-cards div i:first-child{background:#b8b4a8;width:70%}
.f-foot{display:flex;gap:8px;align-items:center}
.f-foot i{height:5px;flex:1;border-radius:3px;background:#ebe8e0}
.f-foot em{width:24px;height:24px;border-radius:50%;background:var(--wa)}
.bp-state{position:absolute;top:10px;right:12px;z-index:4;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--ink);color:#fff}
.bp-state::before{content:"Schets";animation:statelbl 9s infinite}
@keyframes statelbl{0%,40%{content:"Schets"}45%,100%{content:"Live"}}
/* aantekeningen */
.note{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;box-shadow:var(--shadow-sm);white-space:nowrap}
.note b{color:var(--blue-600);font-weight:500}
.note::after{content:"";position:absolute;height:1px;width:34px;background:var(--blue);top:50%}
.note.l::after{right:-34px}
.note.r::after{left:-34px}
.note.n1{top:92px;left:-58px}
.note.n2{top:46%;right:-46px}
.note.n3{bottom:92px;left:-40px}
.note.n4{bottom:14px;right:24px}
.note.n4::after{display:none}

/* ---------- specificatie-strook ---------- */
.specs{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.specs .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.spec{padding:26px 24px;border-left:1px solid var(--line)}
.spec:first-child{border-left:0;padding-left:0}
.spec small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.spec b{display:block;font-family:var(--head);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;line-height:1.1}
.spec span{display:block;font-size:.88rem;color:var(--muted);margin-top:3px}

/* ---------- secties ---------- */
.section{padding:104px 0}
.section.tight{padding:64px 0}
.section.white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark{background:var(--ink);color:#c5ccd8}
.dark h2,.dark h3{color:#fff}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .kicker{justify-content:center}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-bottom:18px}
.sec-head p{color:var(--muted);font-size:1.1rem}
.dark .sec-head p{color:#aeb7c7}
.sec-head.split-head{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.sec-head.split-head p{margin:0}
.sec-foot{margin-top:44px}

/* ---------- raster-kaarten (gedeelde lijnen) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.tile{position:relative;padding:34px 30px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s}
.tile:nth-child(3n){border-right:0}
.tile:nth-last-child(-n+3){border-bottom:0}
.tile:hover{background:#fcfbf8}
.tile .num{position:absolute;top:26px;right:26px;font-family:var(--mono);font-size:.72rem;color:var(--muted-2)}
.tile .ico{width:46px;height:46px;border-radius:12px;background:var(--blue-tint);color:var(--blue-600);display:grid;place-items:center;margin-bottom:22px}
.tile .ico svg{width:23px;height:23px}
.tile h3{font-size:1.2rem;margin-bottom:8px}
.tile p{color:var(--muted);font-size:.96rem}

/* losse kaarten (subpagina's) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;transition:transform .25s,box-shadow .25s,border-color .25s}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(43,122,255,.35)}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--blue-tint);color:var(--blue-600);display:grid;place-items:center;margin-bottom:20px}
.card .ico svg{width:23px;height:23px}
.card h3{font-size:1.2rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.96rem}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:var(--head);font-weight:600;font-size:.95rem;color:var(--blue-600)}
.card .more svg{width:16px;height:16px;transition:transform .2s}
a.card:hover .more svg{transform:translateX(4px)}

.mini{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:border-color .2s,transform .2s}
a.mini:hover{border-color:rgba(43,122,255,.45);transform:translateY(-2px)}
.mini .ico{width:42px;height:42px;border-radius:11px;background:var(--blue-tint);color:var(--blue-600);display:grid;place-items:center;flex:none}
.mini .ico svg{width:20px;height:20px}
.mini h3,.mini h4{font-size:1.03rem;font-weight:650;margin-bottom:3px}
.mini p{font-size:.88rem;color:var(--muted);line-height:1.45}

/* ---------- index-lijst (diensten) ---------- */
.index{border-top:1px solid var(--line-2)}
.index a{display:grid;grid-template-columns:70px 1.1fr 1.4fr 40px;gap:24px;align-items:center;padding:28px 6px;border-bottom:1px solid var(--line-2);transition:background .25s,padding .25s}
.index a:hover{background:#fff;padding-left:18px;padding-right:18px}
.index .i-num{font-family:var(--mono);font-size:.8rem;color:var(--muted-2)}
.index h3{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:650}
.index p{color:var(--muted);font-size:.97rem}
.index .i-arrow{width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s}
.index .i-arrow svg{width:18px;height:18px}
.index a:hover .i-arrow{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}

/* ---------- vinkjes ---------- */
.ticks{display:grid;gap:12px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.98rem}
.ticks svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--blue-600)}
.ticks.two{grid-template-columns:1fr 1fr;gap:14px 30px}
.dark .ticks svg{color:#7fb1ff}

/* ---------- prijzen ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px}
.plan.featured{background:var(--ink);border-color:var(--ink);color:#c5ccd8;box-shadow:var(--shadow-lg)}
.plan.featured h3,.plan.featured .price b{color:#fff}
.plan.featured .for,.plan.featured .vat,.plan.featured .price small{color:#9aa3b3}
.plan.featured .ticks svg{color:#7fb1ff}
.plan .badge{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--blue-600);color:#fff}
.plan h3{font-size:1.35rem;margin-bottom:6px}
.plan .for{color:var(--muted);font-size:.93rem;min-height:72px;margin-bottom:20px}
.plan .price{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.plan .price small{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}
.plan .price b{font-family:var(--head);font-size:3rem;font-weight:750;letter-spacing:-.045em;line-height:1}
.plan .vat{font-size:.82rem;color:var(--muted-2);margin-bottom:24px;padding-bottom:22px;border-bottom:1px dashed var(--line-2)}
.plan.featured .vat{border-bottom-color:rgba(255,255,255,.16)}
.plan .ticks{margin-bottom:28px;flex:1}
.plan .ticks li{font-size:.94rem}
.plan-note{margin-top:22px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px dashed var(--line-2);border-radius:16px;padding:22px 26px}
.plan-note b{font-family:var(--head);font-weight:650}
.plan-note p{color:var(--muted);font-size:.95rem}

/* ---------- tijdlijn ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:"";position:absolute;left:22px;right:22px;top:22px;border-top:1.5px dashed rgba(43,122,255,.45)}
.step{position:relative}
.step .n{position:relative;z-index:1;width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;margin-bottom:22px;box-shadow:0 0 0 6px var(--paper)}
.section.white .step .n{box-shadow:0 0 0 6px #fff}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{font-size:.94rem;color:var(--muted)}

/* ---------- uitgelicht werk ---------- */
.feature-work{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.feature-work h2{font-size:clamp(2.1rem,4vw,3.2rem);margin-bottom:18px}
.feature-work p{color:#aeb7c7;font-size:1.05rem;margin-bottom:16px}
.feature-media{position:relative;padding:0 30px 40px 0}
.meta-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:26px 0 30px;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden}
.meta-list div{padding:14px 16px;border-left:1px solid rgba(255,255,255,.12)}
.meta-list div:first-child{border-left:0}
.meta-list small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#8d96a8}
.meta-list b{display:block;color:#fff;font-weight:600;font-size:.95rem;margin-top:2px}
.dark.grid-bg::before{background-image:linear-gradient(rgba(127,177,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.07) 1px,transparent 1px);mask-image:radial-gradient(ellipse at 70% 40%,#000 25%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 25%,transparent 75%)}

/* ---------- case / portfolio ---------- */
.case{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.case-media{position:relative;padding:0 24px 40px 0}
.case-body h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:16px}
.case-body p{color:var(--muted);font-size:1.03rem;margin-bottom:14px}
.case-body strong{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tag{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--blue-tint);color:var(--blue-700)}
.tag.green{background:rgba(31,157,92,.12);color:#15703f}
.tag.grey{background:var(--paper-2);color:var(--muted)}
.dark .tag{background:rgba(127,177,255,.14);color:#a9c8ff}
.dark .tag.green{background:rgba(34,197,94,.15);color:#6ee7a0}
.browser{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.dark .browser{border-color:rgba(255,255,255,.12);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.browser-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#d8d3c8}
.browser-bar .url{margin-left:10px;flex:1;height:19px;border-radius:6px;background:#fff;border:1px solid var(--line);font-family:var(--mono);font-size:.64rem;color:var(--muted-2);display:flex;align-items:center;padding:0 10px;overflow:hidden;white-space:nowrap}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{position:absolute;right:0;bottom:0;width:27%;min-width:110px;background:#0b0d12;border-radius:26px;padding:7px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.phone img{border-radius:20px;aspect-ratio:9/18;object-fit:cover;object-position:top;width:100%}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.work{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:transform .25s,box-shadow .25s}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.work .shot{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;border-bottom:1px solid var(--line);position:relative}
.work .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.work:hover .shot img{transform:scale(1.03)}
.work .shot .soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background-color:#fbfaf7;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;color:var(--muted)}
.work .shot .soon b{display:block;font-family:var(--head);font-weight:700;font-size:1.4rem;color:var(--ink);letter-spacing:-.03em;margin-bottom:6px}
.work .shot .soon span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;border:1.5px dashed rgba(43,122,255,.5);padding:5px 10px;border-radius:6px;color:var(--blue-600)}
.work .body{padding:24px 26px 26px}
.work h3{font-size:1.2rem;margin-bottom:6px}
.work p{color:var(--muted);font-size:.95rem}
.work.you{border:1.5px dashed var(--line-2);background:transparent;justify-content:center;align-items:flex-start;padding:36px}
.work.you:hover{box-shadow:none}
.work.you h3{font-size:1.6rem;margin-bottom:10px}

/* generieke site-mockup (subpagina's) */
.mock-wrap{position:relative}

/* ---------- over mij ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:18px}
.split p{color:var(--muted);font-size:1.04rem;margin-bottom:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px}
.panel h3{font-size:1.25rem}
.monogram{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);background:var(--ink);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:34px}
.monogram::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(127,177,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.08) 1px,transparent 1px);background-size:36px 36px}
.monogram>*{position:relative}
.monogram .big{font-family:var(--head);font-weight:800;font-size:clamp(6rem,14vw,10rem);letter-spacing:-.07em;line-height:.8}
.monogram .big span{color:var(--blue)}
.monogram .m-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8d96a8;display:flex;justify-content:space-between}
.monogram p{font-family:var(--head);font-size:1.3rem;font-weight:500;letter-spacing:-.02em;line-height:1.35;color:#e8ecf3}
.monogram small{display:block;margin-top:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8d96a8}

/* ---------- regio ---------- */
.regio{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.regio h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}
.regio p{color:var(--muted);font-size:1.05rem;margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:8px;background:#fff;border:1px solid var(--line);font-weight:500;font-size:.9rem}
.chips svg{width:15px;height:15px;color:var(--blue-600)}
.map-card{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:#fbfaf7;border:1px solid var(--line-2)}
.map-card svg.map{position:absolute;inset:0;width:100%;height:100%}
.map-card .m-cap{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- FAQ ---------- */
.faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-split .sec-head{position:sticky;top:110px;margin-bottom:0}
.faq-help{margin-top:26px;padding:20px 22px;border:1px dashed var(--line-2);border-radius:14px;background:#fff}
.faq-help b{display:block;font-family:var(--head);font-weight:650;margin-bottom:4px}
.faq-help p{font-size:.93rem;color:var(--muted);margin-bottom:12px}
.faq{display:grid;gap:10px}
.faq.solo{max-width:860px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:rgba(43,122,255,.45)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--head);font-weight:600;font-size:1.06rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--line-2);position:relative;transition:background .2s,border-color .2s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;left:50%;top:50%;transition:transform .25s}
.faq summary .pm::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.faq summary .pm::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.faq details[open] .pm{background:var(--blue-600);border-color:var(--blue-600)}
.faq details[open] .pm::before{background:#fff}
.faq details[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .a{padding:0 22px 22px;color:var(--muted);font-size:.99rem}

/* ---------- CTA ---------- */
.cta-block{position:relative;overflow:hidden;background:var(--ink);color:#c5ccd8;border-radius:28px;padding:72px 60px}
.cta-block::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(127,177,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 85% 50%,#000 10%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 85% 50%,#000 10%,transparent 65%)}
.cta-block .ghost-fv{position:absolute;right:-20px;bottom:-60px;font-family:var(--head);font-weight:800;font-size:clamp(12rem,26vw,22rem);letter-spacing:-.08em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(127,177,255,.22);pointer-events:none;user-select:none}
.cta-block>*{position:relative}
.cta-inner{max-width:680px}
.cta-block h2{color:#fff;font-size:clamp(2.3rem,5vw,4rem);margin-bottom:18px}
.cta-block p{color:#aeb7c7;font-size:1.1rem;margin-bottom:30px}
.cta-meta{margin-top:22px;font-size:.92rem;color:#8d96a8}
.cta-meta a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- page hero (subpagina's) ---------- */
.page-hero{padding:72px 0 76px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:750;letter-spacing:-.045em;line-height:1;margin:0 0 22px;max-width:900px}
.page-hero .lead{color:var(--muted);font-size:clamp(1.03rem,1.7vw,1.18rem);max-width:640px}
.page-hero .btn-row{margin-top:32px}
.page-hero.center{text-align:center;border-bottom:0;padding:100px 0 110px}
.page-hero.center h1,.page-hero.center .lead{margin-left:auto;margin-right:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:26px;list-style:none}
.crumbs a:hover{color:var(--blue-600)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs [aria-current]{color:var(--ink)}

/* prose */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:40px 0 12px}
.prose p,.prose li{color:var(--ink-2);font-size:1.02rem}
.prose p{margin-bottom:14px}
.prose ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.prose li{margin-bottom:6px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.contact-grid h2{font-size:1.8rem}
.contact-list{display:grid;gap:10px;margin:26px 0}
.c-row{display:flex;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .2s,transform .2s}
a.c-row:hover{border-color:rgba(43,122,255,.45);transform:translateX(3px)}
.c-row .ico{width:44px;height:44px;border-radius:11px;background:var(--blue-tint);color:var(--blue-600);display:grid;place-items:center;flex:none}
.c-row .ico.wa{background:rgba(37,211,102,.14);color:#128c4a}
.c-row .ico svg{width:21px;height:21px}
.c-row small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.c-row b{display:block;font-weight:600;font-size:1rem}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow)}
.form h2{font-size:1.7rem;margin-bottom:6px}
.form .sub{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
.field label .opt{font-weight:400;color:var(--muted-2)}
.field input,.field textarea,.field select{width:100%;background:var(--paper);border:1px solid var(--line-2);border-radius:10px;padding:13px 14px;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a606b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-600);background:#fff;box-shadow:0 0 0 4px rgba(43,122,255,.14)}
.field textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-5000px}
.form-hint{font-size:.84rem;color:var(--muted-2);margin-top:12px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#9aa3b3;padding:80px 0 0;overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.site-footer .logo{color:#fff;margin-bottom:18px}
.site-footer .logo .mark{background:#fff;color:var(--ink)}
.site-footer .logo .mark span{color:var(--blue-600)}
.site-footer .logo .txt small{color:#8d96a8}
.site-footer p{font-size:.94rem;max-width:320px;margin-bottom:18px}
.foot-status{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;color:#c5ccd8;border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:7px 14px 7px 10px}
.foot-col h4{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8d96a8;margin-bottom:18px}
.foot-col a,.foot-col span{display:block;font-size:.95rem;margin-bottom:10px;color:#dfe4ec;transition:color .2s}
.foot-col a:hover{color:#7fb1ff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:#8d96a8}
.foot-bottom a{color:#aeb7c7}
.foot-bottom a:hover{color:#fff}
.foot-wordmark{font-family:var(--head);font-weight:800;font-size:clamp(5rem,19vw,17rem);letter-spacing:-.07em;line-height:.78;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.12);white-space:nowrap;margin-bottom:-.12em;user-select:none;text-align:center}

/* ---------- mobiele actiebalk ---------- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(247,245,240,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s}
  .mbar.show{transform:none}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:7px;height:46px;border-radius:11px;font-family:var(--head);font-weight:600;font-size:.92rem;border:1px solid var(--line-2);background:#fff}
  .mbar a svg{width:18px;height:18px}
  .mbar a.wa{background:var(--wa);border-color:var(--wa);color:#063519}
  .mbar a.pri{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
  body{padding-bottom:70px}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .note.n1{left:-10px}.note.n3{left:-6px}.note.n2{right:-10px}
}
@media (max-width:1020px){
  .hero-grid,.case,.split,.contact-grid,.regio,.feature-work,.faq-split{grid-template-columns:1fr;gap:44px}
  .faq-split .sec-head{position:static}
  .sec-head.split-head{grid-template-columns:1fr;gap:0}
  .sec-head.split-head h2{margin-bottom:18px}
  .bp{max-width:680px}
  .steps{grid-template-columns:1fr 1fr;gap:34px 28px}
  .steps::before{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
  .specs .wrap{grid-template-columns:1fr 1fr}
  .spec:nth-child(3){border-left:0;padding-left:0}
  .spec:nth-child(n+3){border-top:1px solid var(--line)}
  .index a{grid-template-columns:50px 1fr 40px}
  .index p{grid-column:2/3}
}
@media (max-width:860px){
  .section{padding:78px 0}
  .tiles{grid-template-columns:1fr 1fr}
  .tile:nth-child(3n){border-right:1px solid var(--line)}
  .tile:nth-child(2n){border-right:0}
  .tile:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .tile:nth-last-child(-n+2){border-bottom:0}
  .grid-3,.plans{grid-template-columns:1fr}
  .plans{max-width:480px;margin:0 auto}
  .plan .for{min-height:0}
  .work-grid{grid-template-columns:1fr}
  .cta-block{padding:52px 32px}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .hero{padding:36px 0 20px}
  .page-hero{padding:48px 0 52px}
  .section{padding:64px 0}
  .sec-head{margin-bottom:38px}
  .tiles{grid-template-columns:1fr}
  .tile,.tile:nth-child(3n),.tile:nth-child(2n){border-right:0}
  .tile,.tile:nth-last-child(-n+3),.tile:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .tile:last-child{border-bottom:0}
  .tile{padding:28px 22px}
  .grid-2,.steps,.form-row,.ticks.two{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 auto}
  .hero .btn-row .btn-link{margin:4px auto 0}
  .specs .wrap{grid-template-columns:1fr 1fr}
  .spec{padding:18px 14px}
  .spec:nth-child(odd){padding-left:0;border-left:0}
  .spec b{font-size:1.2rem}
  .note{font-size:.62rem;padding:4px 7px}
  .note::after{display:none}
  .note.n1{top:70px;left:4px}.note.n2{right:4px}.note.n3{display:none}.note.n4{bottom:10px;right:10px}
  .bp{padding:20px 0}
  .meta-list{grid-template-columns:1fr}
  .meta-list div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .meta-list div:first-child{border-top:0}
  .feature-media,.case-media{padding-right:14px}
  .phone{width:30%}
  .index a{grid-template-columns:36px 1fr 36px;gap:14px;padding:22px 2px}
  .index a:hover{padding-left:8px;padding-right:8px}
  .index .i-arrow{width:34px;height:34px}
  .cta-block{padding:42px 22px;border-radius:22px}
  .form{padding:24px 18px}
  .foot-top{grid-template-columns:1fr}
  .monogram{aspect-ratio:auto;min-height:340px;gap:40px;padding:28px}
}

/* uitgelichte dienst-kaart (diensten.html) */
.card.feature{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center;padding:40px}
.card.feature .bp{padding:10px 0}
@media (max-width:860px){.card.feature{grid-template-columns:1fr;gap:26px;padding:26px}}
/* 404/bedankt */
.page-hero.center .eyebrow{display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);margin-bottom:14px}
.page-hero.center .card{max-width:620px;margin:0 auto;padding:44px 34px}
.cta-block .kicker{color:#aeb7c7}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--blue);flex:none}
.foot-wordmark{font-size:clamp(4rem,15.5vw,14rem)}
@media (max-width:600px){.status .st-extra{display:none}}

/* ---------- v4.1: rustigere achtergrond ---------- */
/* raster alleen rond de bouwtekening, zacht uitlopend; tekstkant blijft rustig */
.hero.grid-bg::before{
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 48% 70% at 74% 48%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 48% 70% at 74% 48%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%)}
.hero.grid-bg::after{content:"";position:absolute;pointer-events:none;width:720px;height:560px;right:-120px;top:50%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(43,122,255,.16),rgba(43,122,255,.06) 55%,transparent);z-index:0}
.hero>.wrap{z-index:1}
/* subpagina's: raster rechtsboven, loopt weg naar links en onder */
.page-hero.grid-bg::before{
  mask-image:radial-gradient(ellipse 55% 90% at 100% 0%,#000 0%,rgba(0,0,0,.4) 50%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 55% 90% at 100% 0%,#000 0%,rgba(0,0,0,.4) 50%,transparent 80%)}
.page-hero.center.grid-bg::before{
  mask-image:radial-gradient(ellipse 60% 80% at 50% 40%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 40%,#000 0%,transparent 75%)}
/* labels in de mockup niet laten overlappen */
.bp-state{top:-27px;right:10px}
.note.n1{top:118px}
@media (max-width:1020px){
  .hero.grid-bg::before{mask-image:radial-gradient(ellipse 90% 40% at 50% 82%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 90% 40% at 50% 82%,#000 0%,transparent 75%)}
  .hero.grid-bg::after{right:50%;transform:translateX(50%);top:auto;bottom:0;width:560px;height:420px}
}
@media (max-width:600px){.note.n1{top:96px}}
@media (max-width:600px){.note.n1{display:none}}

/* =========================================================
   v5 — "super dik": donkere hero, scrolltekst, live portfolio, keuzehulp
   ========================================================= */
/* header over donkere hero (home) */
body.home .site-header{position:fixed;left:0;right:0;top:0}
.site-header.on-dark{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.site-header.on-dark .logo{color:#fff}
.site-header.on-dark .logo .mark{background:#fff;color:var(--ink)}
.site-header.on-dark .logo .mark span{color:var(--blue-600)}
.site-header.on-dark .logo .txt small{color:#8d96a8}
.site-header.on-dark .nav-links>a,.site-header.on-dark .dd-toggle{color:#c5ccd8}
.site-header.on-dark .nav-links>a:hover,.site-header.on-dark .dd-toggle:hover{color:#fff}
.site-header.on-dark .nav-ctas .btn-dark{color:#fff;border-color:rgba(255,255,255,.25)}
.site-header.on-dark .nav-ctas .btn-dark:hover{background:rgba(255,255,255,.08);border-color:#fff}
.site-header.on-dark .menu-btn{color:#fff}
.site-header.stuck{background:rgba(247,245,240,.92)}

/* ---------- donkere hero ---------- */
.hero-x{position:relative;background:#07090e;color:#aeb7c7;min-height:100vh;min-height:100svh;padding:140px 0 110px;overflow:hidden;display:flex;align-items:center}
.hx-grid,.hx-spot{position:absolute;inset:0;pointer-events:none;background-size:56px 56px}
.hx-grid{background-image:linear-gradient(rgba(127,177,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.07) 1px,transparent 1px);mask-image:radial-gradient(ellipse 70% 80% at 65% 45%,#000 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 65% 45%,#000 20%,transparent 80%)}
.hx-spot{background-image:linear-gradient(rgba(127,177,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.42) 1px,transparent 1px);mask-image:radial-gradient(240px circle at var(--mx,72%) var(--my,42%),#000,transparent 70%);-webkit-mask-image:radial-gradient(240px circle at var(--mx,72%) var(--my,42%),#000,transparent 70%);transition:opacity .4s}
.hx-glow{position:absolute;pointer-events:none;width:1000px;height:760px;right:-260px;top:50%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(43,122,255,.30),rgba(43,122,255,.08) 55%,transparent)}
.hx-glow.b{left:-420px;right:auto;top:95%;width:800px;height:500px;background:radial-gradient(closest-side,rgba(43,122,255,.12),transparent)}
.hero-x>.wrap{position:relative;z-index:1;width:100%}
.hx-inner{display:grid;grid-template-columns:1fr 1.02fr;gap:40px;align-items:center}
.hero-x .status{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#c5ccd8;box-shadow:none}
.hero-x .status b{color:#fff}
.hero-x h1{color:#fff;font-size:clamp(3rem,7.2vw,6.8rem);font-weight:760;letter-spacing:-.055em;line-height:.93;margin-bottom:28px}
.hero-x h1 .accent{color:#8fbcff;background:linear-gradient(transparent 68%,rgba(43,122,255,.45) 68%,rgba(43,122,255,.45) 90%,transparent 90%)}
.hero-x .lead{color:#aeb7c7;font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:520px;margin-bottom:34px}
.hero-x .btn-link{color:#fff}
.hero-x .hero-checks{color:#c5ccd8;margin-top:30px}
.hero-x .hero-checks svg{color:#4ade80}
.hx-stage{position:relative;perspective:1800px;padding:20px 30px 40px 40px}
.hx-stage .bp{transform:rotateY(-13deg) rotateX(7deg) rotateZ(.5deg);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hx-stage:hover .bp{transform:rotateY(-5deg) rotateX(3deg)}
.hero-x .bp-frame{border-color:rgba(255,255,255,.14);box-shadow:0 60px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}
.hero-x .note{background:#0f141d;border-color:rgba(255,255,255,.16);color:#dfe4ec;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.hero-x .note b{color:#8fbcff}
.hx-foot{position:absolute;left:0;right:0;bottom:28px;z-index:1}
.hx-foot .wrap{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#6f7888}
.hx-foot a{color:#aeb7c7}
.hx-foot a:hover{color:#fff}
.hx-scroll{display:inline-flex;align-items:center;gap:10px}
.hx-scroll i{width:1px;height:34px;background:linear-gradient(#8fbcff,transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* telefoon die zichzelf opbouwt */
.hx-phone{position:absolute;left:0;bottom:6px;width:clamp(120px,13vw,172px);z-index:6;transform:rotateY(-13deg) rotateX(7deg) translateZ(60px)}
.ph-frame{background:#0b0d12;border-radius:26px;padding:7px;box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.ph-stage{position:relative;aspect-ratio:9/18.5;border-radius:20px;overflow:hidden;background:#fbfaf7}
.ph-stage .bp-layer{padding:10px 9px;grid-template-rows:auto 1.4fr 1fr 1fr auto;gap:7px}
.ph-stage .bp-final{animation-delay:.6s}
.ph-stage .f-hero{padding:10px}
.ph-stage .f-hero b{font-size:.62rem;max-width:100%}
.ph-stage .f-btns em{height:12px;width:40px}
.ph-stage .f-btns em+em{width:30px}
.ph-stage .f-nav em{width:30px;height:12px}
.ph-stage .f-nav i{display:none}
.ph-stage .f-logo{font-size:.55rem}
.ph-stage .f-card{border-radius:7px;background:var(--paper);border:1px solid var(--line)}
.ph-stage .bp-wire .b{border-radius:6px}

/* specificaties met tellers */
.spec b [data-count]{font-variant-numeric:tabular-nums}

/* ---------- scrolltekst ---------- */
.statement{padding:130px 0 120px}
.st-text{font-family:var(--head);font-size:clamp(1.9rem,4.4vw,3.8rem);font-weight:650;letter-spacing:-.04em;line-height:1.1;color:var(--ink);max-width:1080px}
.js .st-text .w{opacity:.13;transition:opacity .35s ease}
.js .st-text .w.on{opacity:1}
.st-text .hl{color:var(--blue-600)}
.st-sign{display:flex;align-items:center;gap:14px;margin-top:40px;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.st-sign .mark{width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:800;letter-spacing:-.04em}
.st-sign .mark span{color:#7fb1ff}

/* ---------- live portfolio ---------- */
.live-frame{position:relative;background:#fff;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;box-shadow:0 50px 110px rgba(0,0,0,.55)}
.live-view{position:relative;aspect-ratio:16/10.5;overflow:hidden;background:#111}
.live-view img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;animation:siteScroll 26s cubic-bezier(.45,0,.55,1) infinite}
.live-frame:hover .live-view img{animation-play-state:paused}
@keyframes siteScroll{0%,6%{object-position:50% 0%}46%,54%{object-position:50% 100%}94%,100%{object-position:50% 0%}}
.live-badge{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(7,9,14,.82);color:#fff;padding:7px 11px;border-radius:8px;backdrop-filter:blur(6px)}
.live-badge .live-dot{width:7px;height:7px}

/* ---------- keuzehulp ---------- */
.quiz{display:none}
.js .quiz{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.quiz h2{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:18px}
.quiz .q-intro p{color:var(--muted);font-size:1.08rem}
.q-box{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow-lg);min-height:380px}
.q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.q-bars{display:flex;gap:6px}
.q-bars i{width:34px;height:4px;border-radius:4px;background:var(--paper-2);transition:background .3s}
.q-bars i.on{background:var(--blue-600)}
.q-step{display:none;animation:qin .35s ease}
.q-step.active{display:block}
@keyframes qin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.q-step h3{font-size:1.5rem;margin-bottom:20px;letter-spacing:-.03em}
.q-opts{display:grid;gap:10px}
.q-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;font:inherit;font-size:1rem;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.q-opt:hover{border-color:var(--blue-600);background:#fff;transform:translateX(3px)}
.q-opt .k{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;color:var(--muted-2);flex:none;background:#fff}
.q-opt:hover .k{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.q-opt small{display:block;font-size:.84rem;color:var(--muted);font-weight:400}
.q-result{display:none;animation:qin .4s ease}
.q-result.active{display:block}
.q-result .r-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);margin-bottom:8px}
.q-result h3{font-size:2rem;letter-spacing:-.04em;margin-bottom:4px}
.q-result .r-price{font-family:var(--head);font-weight:700;font-size:1.2rem;margin-bottom:16px}
.q-result .r-price small{font-family:var(--body);font-weight:400;font-size:.88rem;color:var(--muted)}
.q-result ul{margin-bottom:24px}
.q-back{background:none;border:0;font:inherit;font-size:.9rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:14px}

/* ---------- micro-interacties ---------- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after{left:130%}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(43,122,255,.09),transparent 70%)}
.tile:hover::after{opacity:1}

@media (max-width:1020px){
  .hero-x{min-height:auto;padding:120px 0 90px}
  .hx-inner{grid-template-columns:1fr;gap:30px}
  .hx-stage{max-width:620px;padding:10px 10px 30px 30px}
  .js .quiz{grid-template-columns:1fr;gap:34px}
  .hx-foot{display:none}
}
@media (max-width:600px){
  .hero-x{padding:104px 0 70px}
  .hero-x h1{font-size:clamp(2.7rem,12vw,3.6rem)}
  .hx-stage{padding:0 0 26px 18px}
  .hx-stage .bp{transform:none}
  .hx-phone{width:104px;transform:none;left:-4px;bottom:0}
  .statement{padding:84px 0 76px}
  .q-box{padding:24px 18px;min-height:0}
  .q-step h3{font-size:1.25rem}
}
.spec b span{display:inline;font-size:inherit;color:inherit;margin:0}
/* hero: telefoon rechtsonder, notities eromheen */
.hero-x .hx-phone{left:auto;right:4px;bottom:-4px;transform:rotateY(-13deg) rotateX(7deg) translateZ(60px)}
.hero-x .note.n2{right:auto;left:-14px;top:50%}
.hero-x .note.n2::after{left:auto;right:-34px}
.hero-x .note.n4{right:auto;left:38%;bottom:-2px}
@media (max-width:600px){
  .hero-x .hx-phone{right:-4px;transform:none}
  .hero-x .note.n2{left:4px;top:44%}
  .hero-x .note.n4{left:8px;bottom:8px}
}
.hero-x .note.n4{left:22%}
@media (hover:none),(max-width:1020px){.hx-spot{display:none}}
@media (max-width:1020px){.hx-grid{mask-image:radial-gradient(ellipse 90% 45% at 50% 85%,#000 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 90% 45% at 50% 85%,#000 10%,transparent 75%)}}

/* =========================================================
   v6 — "Probeer het live": de mockup bouwt met de naam van de bezoeker
   ========================================================= */
.hx-right{position:relative;display:flex;flex-direction:column}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* accentkleur per branche (gezet via JS op .hx-right) */
.hx-right{--acc:#2b7aff;--acc-d:#1a62e0;--acc-l:#8fbcff;--acc-rgb:43,122,255}
.hx-right .f-logo span{color:var(--acc);transition:color .5s}
.hx-right .f-nav em,.hx-right .f-btns em:first-child{background:var(--acc-d);transition:background .5s}
.hx-right .f-hero{background:radial-gradient(260px 150px at 90% 0%,rgba(var(--acc-rgb),.55),transparent 60%),var(--ink);transition:background .5s}
.hx-right .f-hero b span{color:var(--acc-l);transition:color .5s}
.hx-right .f-cards div::before{background:rgba(var(--acc-rgb),.16)}
.hx-right .f-logo,.hx-right .f-hero b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.hx-right .f-nav .f-logo{max-width:48%}
.hx-right .bp-bar .url{transition:color .3s}
.hx-right.typing .bp-bar .url{color:var(--acc-d)}

/* het balkje */
.bp-try{position:relative;z-index:7;display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;margin:4px 0 0 40px;padding:10px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.bt-lbl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#aeb7c7;padding:0 6px 0 8px;white-space:nowrap}
.bp-try input,.bp-try select{height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(7,9,14,.6);color:#fff;font:inherit;font-size:.95rem;padding:0 12px;min-width:0;transition:border-color .2s,box-shadow .2s}
.bp-try input::placeholder{color:#7d8697}
.bp-try select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb7c7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;cursor:pointer}
.bp-try select option{color:#0e1116}
.bp-try input:focus,.bp-try select:focus{outline:none;border-color:#8fbcff;box-shadow:0 0 0 3px rgba(43,122,255,.3)}
.bp-try .bt-cta{height:44px;padding:0 16px;font-size:.92rem;border-radius:10px}
.bp-try.demo input{caret-color:transparent}
.bp-try input.caret{background-image:linear-gradient(#8fbcff,#8fbcff);background-size:2px 18px;background-repeat:no-repeat;background-position:var(--cx,12px) center}
@media (max-width:1240px){.bp-try{grid-template-columns:1fr 1fr;margin-left:0}.bt-lbl{grid-column:1/-1;padding:4px 4px 0}.bp-try .bt-cta{grid-column:1/-1}}
@media (max-width:600px){.bp-try{grid-template-columns:1fr;margin-top:10px}.bp-try select,.bp-try input{width:100%}}
/* v6.1 fixes */
.bp-try{grid-template-columns:auto minmax(180px,1.4fr) minmax(150px,1fr) auto}
.bp-try input{width:100%}
.hx-right .f-hero b{font-size:clamp(.85rem,1.4vw,1.15rem)}
.hx-right .hx-phone .f-hero b{white-space:normal;font-size:.58rem;line-height:1.15}
.hx-right .hx-phone .f-logo{font-size:.52rem}
@media (max-width:1240px){.bp-try{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bp-try{grid-template-columns:1fr}}
.bp-try{grid-template-columns:1fr 1fr;margin-left:40px}
.bt-lbl{grid-column:1/-1;padding:4px 4px 0}
.bp-try .bt-cta{grid-column:1/-1}
@media (max-width:1020px){.bp-try{margin-left:0}}
@media (max-width:600px){.bp-try{grid-template-columns:1fr}}

/* =========================================================
   v7 — rijke showcase-mockup (echte inhoud, wisselt vanzelf van branche)
   ========================================================= */
.bp,.hx-phone{--acc:#f28c28;--acc-d:#d9731a;--acc-l:#ffc38a;--acc-rgb:242,140,40}
.bp-stage,.ph-stage{container-type:inline-size}
.bp-stage{aspect-ratio:16/10.4}
.bp-layer.rx{padding:0;display:grid;grid-template-rows:auto 1fr auto;gap:0}
/* --- schets --- */
.bp-wire.rx{padding:2.4cqw 2.8cqw;gap:2.2cqw}
.bp-wire .w{display:flex;align-items:center;justify-content:center;border:1.5px dashed rgba(43,122,255,.55);border-radius:1.2cqw;background:rgba(43,122,255,.035);font-family:var(--mono);font-size:1.5cqw;letter-spacing:.08em;color:rgba(26,98,224,.75);position:relative;overflow:hidden}
.w-nav{display:flex;gap:1.6cqw;align-items:center;height:5cqw}
.w-nav .lb{width:16cqw;height:100%}.w-nav .pl{width:7cqw;height:2cqw}.w-nav .pl:first-of-type{margin-left:auto}.w-nav .bt{width:11cqw;height:100%}
.w-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2.4cqw;min-height:0}
.w-copy{display:flex;flex-direction:column;gap:1.3cqw;justify-content:center}
.w-copy .l1{width:40%;height:2cqw}.w-copy .l2{height:9cqw}.w-copy .l3{height:2cqw}.w-copy .l4{width:70%;height:2cqw}
.w-btns{display:flex;gap:1.4cqw}.w-btns .bt{width:15cqw;height:4.6cqw}
.bp-wire .img span{position:relative;z-index:1;background:#fbfaf7;padding:.3cqw .8cqw;border-radius:.6cqw}
.bp-wire .bx{position:absolute;inset:0;width:100%;height:100%;stroke:rgba(43,122,255,.35);stroke-width:.6;fill:none;vector-effect:non-scaling-stroke}
.w-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqw}
.w-cards .c{height:11cqw}
/* --- eindresultaat --- */
.bp-final.rx{background:#fff}
.rx-nav{display:flex;align-items:center;gap:2cqw;padding:1.8cqw 2.8cqw;border-bottom:1px solid var(--line)}
.rx .f-logo,.rx-p .f-logo{font-family:var(--head);font-weight:800;font-size:2.4cqw;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.rx .f-logo span,.rx-p .f-logo span{color:var(--acc);transition:color .4s}
.rx-links{display:flex;gap:2.2cqw;margin-left:auto;font-size:1.55cqw;color:var(--muted);font-weight:500}
.rx-btn{display:inline-flex;align-items:center;justify-content:center;font-style:normal;background:var(--acc-d);color:#fff;font-family:var(--head);font-weight:650;font-size:1.55cqw;padding:1cqw 1.8cqw;border-radius:1cqw;white-space:nowrap;transition:background .4s}
.rx-hero{display:grid;grid-template-columns:1.12fr 1fr;gap:2.6cqw;align-items:center;padding:2.8cqw;background:linear-gradient(180deg,#fff,#fbfaf7);min-height:0}
.rx-copy small{display:inline-block;font-family:var(--mono);font-size:1.35cqw;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-d);background:rgba(var(--acc-rgb),.12);padding:.5cqw 1cqw;border-radius:.8cqw;margin-bottom:1.6cqw;transition:color .4s,background .4s}
.rx-copy b{display:block;font-family:var(--head);font-weight:780;font-size:4.3cqw;line-height:1.02;letter-spacing:-.045em;color:var(--ink);margin-bottom:1.4cqw}
.rx-copy b span{color:var(--acc);transition:color .4s}
.rx-copy p{font-size:1.65cqw;line-height:1.45;color:var(--muted);margin-bottom:2cqw;max-width:95%}
.rx-btns{display:flex;gap:1.2cqw;margin-bottom:2cqw}
.rx-wa{display:inline-flex;align-items:center;gap:.7cqw;font-style:normal;background:var(--wa);color:#063519;font-family:var(--head);font-weight:650;font-size:1.55cqw;padding:1cqw 1.6cqw;border-radius:1cqw;white-space:nowrap}
.rx-wa svg{width:2cqw;height:2cqw}
.rx-rate{display:flex;align-items:center;gap:.8cqw;font-size:1.45cqw;color:var(--muted)}
.rx-rate .stars{color:#f5b301;letter-spacing:.1em;font-size:1.6cqw}
.rx-rate b{color:var(--ink)}
/* "foto" */
.rx-img{position:relative;height:100%;min-height:22cqw;border-radius:1.6cqw;overflow:hidden;background:linear-gradient(180deg,rgba(var(--acc-rgb),.55) 0%,rgba(var(--acc-rgb),.18) 55%,#e9e4d8 55.2%,#ddd6c6 100%);box-shadow:0 1.4cqw 3cqw rgba(14,17,22,.14);transition:background .4s}
.rx-img .sun{position:absolute;width:9cqw;height:9cqw;border-radius:50%;right:12%;top:10%;background:radial-gradient(circle,#fff6e0,rgba(255,246,224,0) 70%)}
.rx-img .hill{position:absolute;left:-10%;right:-10%;bottom:30%;height:22%;background:rgba(14,17,22,.12);border-radius:50% 50% 0 0}
.rx-img .house{position:absolute;left:22%;bottom:18%;width:46%;height:46%;background:#fff;clip-path:polygon(0 38%,50% 0,100% 38%,100% 100%,0 100%);box-shadow:inset 0 -2cqw 0 rgba(14,17,22,.05)}
.rx-img .house i{position:absolute;bottom:18%;width:16%;height:22%;background:var(--ink);opacity:.82;border-radius:.4cqw}
.rx-img .house i:nth-child(1){left:14%}.rx-img .house i:nth-child(2){left:42%;height:36%;bottom:0;background:var(--acc-d);opacity:1}.rx-img .house i:nth-child(3){left:70%}
.rx-img .tree{position:absolute;right:14%;bottom:18%;width:12%;height:34%;background:#2f6b45;border-radius:50% 50% 45% 45%;opacity:.85}
.rx-img .tree::after{content:"";position:absolute;left:44%;bottom:-18%;width:12%;height:24%;background:#5b4636}
.rx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:0 2.8cqw 2.6cqw;background:#fbfaf7}
.rx-c{background:#fff;border:1px solid var(--line);border-radius:1.4cqw;padding:1.6cqw}
.rx-c .ic{width:3.6cqw;height:3.6cqw;border-radius:1cqw;background:rgba(var(--acc-rgb),.14);color:var(--acc-d);display:grid;place-items:center;margin-bottom:1.1cqw;transition:background .4s,color .4s}
.rx-c .ic svg{width:2cqw;height:2cqw}
.rx-c b{display:block;font-family:var(--head);font-weight:680;font-size:1.65cqw;letter-spacing:-.02em;color:var(--ink);margin-bottom:.9cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-c i{display:block;height:.7cqw;border-radius:1cqw;background:#e9e6de;margin-top:.6cqw}
.rx-c i+i{width:70%}
/* oude regels van v6 neutraliseren */
.hx-right .f-hero b{font-size:inherit}
.bp-try{display:none!important}

/* --- telefoon --- */
.ph-stage .bp-wire.rx-p{padding:6cqw;display:flex;flex-direction:column;gap:5cqw}
.ph-stage .bp-final.rx-p{background:#fff;padding:0 0 5cqw;display:flex;flex-direction:column;gap:4.5cqw}
.rx-p .p-nav{display:flex;align-items:center;justify-content:space-between;padding:5cqw 6cqw 4cqw;border-bottom:1px solid var(--line)}
.rx-p .f-logo{font-size:7.5cqw}
.rx-p .burger{display:grid;gap:1.6cqw}.rx-p .burger i{display:block;width:7cqw;height:1.2cqw;background:var(--ink);border-radius:1cqw}
.rx-p .rx-img{margin:0 6cqw;min-height:0;height:34%;border-radius:5cqw;flex:none}
.rx-p .rx-img .sun{width:22cqw;height:22cqw}
.rx-p>b{display:block;padding:0 6cqw;font-family:var(--head);font-weight:780;font-size:10cqw;line-height:1.02;letter-spacing:-.045em;color:var(--ink)}
.rx-p>b span{color:var(--acc)}
.rx-p .rx-btns{padding:0 6cqw;margin:0;gap:3cqw}
.rx-p .rx-btn{font-size:5cqw;padding:3cqw 5cqw;border-radius:3cqw;flex:1}
.rx-p .rx-wa{font-size:5cqw;padding:3cqw 4cqw;border-radius:3cqw}.rx-p .rx-wa svg{width:6cqw;height:6cqw}
.rx-p .rx-rate{padding:0 6cqw;font-size:4.6cqw;gap:2cqw}.rx-p .rx-rate .stars{font-size:5cqw}
.rx-p .rx-c{margin:0 6cqw;border-radius:4cqw;padding:4.5cqw;display:flex;align-items:center;gap:3cqw}
.rx-p .rx-c .ic{width:10cqw;height:10cqw;border-radius:3cqw;margin:0}.rx-p .rx-c .ic svg{width:5.5cqw;height:5.5cqw}
.rx-p .rx-c b{font-size:5cqw;margin:0}
.ph-stage .bp-wire .w{border-radius:3cqw}

/* --- melding "Nieuwe aanvraag" --- */
.bx-toast{position:absolute;z-index:8;left:14%;top:-4px;display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border-radius:14px;padding:11px 16px 11px 11px;box-shadow:0 24px 50px rgba(0,0,0,.45);opacity:0;transform:translateY(10px) scale(.96);animation:toast 9s cubic-bezier(.65,0,.35,1) infinite}
.bx-toast .t-ic{width:36px;height:36px;border-radius:10px;background:rgba(34,197,94,.15);color:#15803d;display:grid;place-items:center;flex:none}
.bx-toast .t-ic svg{width:19px;height:19px}
.bx-toast b{display:block;font-family:var(--head);font-weight:700;font-size:.92rem;letter-spacing:-.01em}
.bx-toast small{display:block;font-size:.76rem;color:var(--muted)}
@keyframes toast{0%,55%{opacity:0;transform:translateY(10px) scale(.96)}60%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (max-width:600px){.bx-toast{left:auto;right:6px;top:-18px;padding:8px 12px 8px 8px}.bx-toast .t-ic{width:30px;height:30px}.bx-toast b{font-size:.8rem}.bx-toast small{font-size:.68rem}}
@media (prefers-reduced-motion:reduce){.bx-toast{opacity:1;transform:none}}
/* v7.1 */
.rx-copy .rx-rate b{display:inline;font-family:var(--body);font-size:inherit;font-weight:700;letter-spacing:0;margin:0;line-height:1}
.hero-x .note{animation:notes 9s cubic-bezier(.65,0,.35,1) infinite}
.hero-x .note.n2{animation-delay:.25s}.hero-x .note.n3{animation-delay:.5s}.hero-x .note.n4{animation-delay:.75s}
@keyframes notes{0%{opacity:0;transform:translateY(6px)}6%,44%{opacity:1;transform:none}52%,100%{opacity:0;transform:translateY(-4px)}}
.bx-toast{top:-30px;left:10%}
@media (max-width:600px){.bx-toast{top:auto;bottom:-6px;left:6px;right:auto}}
@media (prefers-reduced-motion:reduce){.hero-x .note{animation:none;opacity:1}}

/* =========================================================
   v8 — cursor-klik, Google-kaart, 3D-parallax
   ========================================================= */
/* langere cyclus in de hero voor meer rust */
.hero-x .bp-final,.hero-x .bp-scan,.hero-x .bp-state::before,.hero-x .bx-toast,.hero-x .note,.hero-x .bx-google,.hero-x .bx-cursor,.hero-x .rx-copy .rx-btn{animation-duration:11s}
@keyframes toast{0%,63%{opacity:0;transform:translateY(10px) scale(.96)}67%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateY(-6px) scale(.98)}}

/* cursor */
.bx-cursor{position:absolute;z-index:6;left:78%;top:86%;width:22px;height:22px;pointer-events:none;opacity:0;animation:cur 11s cubic-bezier(.65,0,.35,1) infinite}
.bx-cursor svg{width:22px;height:22px;fill:#0e1116;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.bx-cursor i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--acc,#2b7aff);opacity:0;animation:ripple 11s ease-out infinite}
@keyframes cur{0%,47%{opacity:0;left:78%;top:88%}50%{opacity:1;left:78%;top:88%}59%{left:13%;top:57%}61%{left:13%;top:57%;transform:scale(.82)}63%{transform:none}70%{opacity:1;left:16%;top:62%}76%,100%{opacity:0;left:16%;top:62%}}
@keyframes ripple{0%,60.5%{opacity:0;transform:scale(.4)}61%{opacity:1;transform:scale(.5)}66%,100%{opacity:0;transform:scale(1.9)}}
.hero-x .rx-copy .rx-btn{animation:press 11s ease infinite}
@keyframes press{0%,60%{transform:none;filter:none}61.5%{transform:scale(.92);filter:brightness(1.15)}64%,100%{transform:none;filter:none}}

/* Google-kaart */
.bx-google{position:absolute;z-index:8;right:-8px;top:-34px;display:flex;align-items:center;gap:11px;background:#fff;color:var(--ink);border-radius:14px;padding:10px 16px 10px 10px;box-shadow:0 24px 50px rgba(0,0,0,.45);opacity:0;animation:gcard 11s cubic-bezier(.65,0,.35,1) infinite}
.bx-google .g{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:1.05rem;color:#fff;background:conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);flex:none}
.bx-google small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--muted);max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-google small::before{content:"🔍 ";filter:grayscale(1);opacity:.7}
.bx-google b{display:block;font-family:var(--head);font-weight:700;font-size:.9rem;letter-spacing:-.01em;white-space:nowrap}
.bx-google em{font-style:normal;color:#15803d}
@keyframes gcard{0%,49%{opacity:0;transform:translateY(10px) scale(.96)}53%,88%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateY(-6px)}}
.hero-x .bx-toast{left:4%}

/* 3D-parallax: kantelt mee met de muis */
.hx-stage{--tx:0deg;--ty:0deg}
.hx-stage .bp,.hx-stage:hover .bp{transform:rotateY(calc(-11deg + var(--ty))) rotateX(calc(6deg + var(--tx)));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hero-x .hx-phone{transform:rotateY(calc(-11deg + var(--ty))) rotateX(calc(6deg + var(--tx))) translateZ(70px) translate(calc(var(--ty) * -1.2),calc(var(--tx) * 1.2));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hero-x .bx-toast,.hero-x .bx-google{translate:calc(var(--ty) * -1.6) calc(var(--tx) * 1.6)}
@media (max-width:600px){
  .hx-stage .bp,.hx-stage:hover .bp,.hero-x .hx-phone{transform:none}
  .bx-google{top:-22px;right:2px;padding:7px 11px 7px 7px}.bx-google .g{width:28px;height:28px;font-size:.9rem}.bx-google b{font-size:.78rem}.bx-google small{font-size:.6rem;max-width:120px}
  .bx-cursor,.bx-cursor svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.bx-cursor{display:none}.bx-google{opacity:1}}
.hero-x .bx-toast{left:-4%;top:-26px}.hero-x .bx-google{top:-44px}@media (max-width:600px){.hero-x .bx-toast{left:6px;top:auto}.hero-x .bx-google{top:-14px}}

/* =========================================================
   v9 — vijf verschillende websiteontwerpen
   ========================================================= */
.bp-wire.rx{padding:0}
.rx-v,.w-v,.pv{display:none}
.rx-v,.w-v{position:absolute;inset:0;overflow:hidden}
.w-v{padding:2.4cqw 2.8cqw;gap:2cqw}
.bp[data-v="1"] .v1,.bp[data-v="2"] .v2,.bp[data-v="3"] .v3,.bp[data-v="4"] .v4,.bp[data-v="5"] .v5,
.bp[data-v="1"] .w1,.bp[data-v="2"] .w2,.bp[data-v="3"] .w3,.bp[data-v="4"] .w4,.bp[data-v="5"] .w5{display:grid}
.hx-phone[data-v="1"] .pv.v1,.hx-phone[data-v="2"] .pv.v2,.hx-phone[data-v="3"] .pv.v3,.hx-phone[data-v="4"] .pv.v4,.hx-phone[data-v="5"] .pv.v5{display:flex}
.v1,.w1,.w2,.v2{grid-template-rows:auto 1fr auto}
.w3,.v3{grid-template-rows:auto auto 1fr auto}
.w4,.v4{grid-template-rows:1.35fr 1fr}
.w5,.v5{grid-template-rows:auto 1.1fr auto}
.w3{gap:1.6cqw}
/* schets-onderdelen */
.w-full{display:flex;min-height:0}.w-full .big{flex:1}
.w-circ{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw}
.w-circ>div{display:flex;align-items:center;gap:1cqw}
.w-circ .o{width:5cqw;height:5cqw;border-radius:50%!important;flex:none}.w-circ .t{flex:1;height:2cqw}
.bp-wire .bar{height:3cqw}
.w-stats{display:grid;gap:1.2cqw}.w-stats .s{height:5.5cqw}
.w-menu{display:grid;grid-template-columns:1fr 1fr .8fr;gap:2.4cqw}.w-menu .m{height:100%}
.w-list{display:grid;gap:1cqw}.w-list .img{height:11cqw}.w-list .t{height:2cqw}
.w-nav.c .pl:first-of-type{margin-left:0}.w-nav.c .lb{margin:0 auto}

/* ---------- 2 · Salon (elegant) ---------- */
.v2{background:#f7ece9;color:#3b1d2a}
.s-nav{display:flex;align-items:center;gap:2.4cqw;padding:1.8cqw 2.8cqw;font-size:1.5cqw;color:#6b4a57}
.s-logo{margin:0 auto;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:2.9cqw;color:#3b1d2a;white-space:nowrap}
.s-btn{font-style:normal;background:#3b1d2a;color:#fff;border-radius:100px;padding:.9cqw 1.9cqw;font-size:1.45cqw;font-weight:600;white-space:nowrap}
.s-btn.light{background:#fff;color:#3b1d2a;padding:1.3cqw 2.8cqw;font-size:1.6cqw;box-shadow:0 1cqw 2.4cqw rgba(59,29,42,.25)}
.s-hero{position:relative;margin:0 2.8cqw;border-radius:1.8cqw;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;gap:1.3cqw;min-height:0}
.s-hero>*:not(.s-bg){position:relative}
.s-bg{position:absolute;inset:0;background:linear-gradient(135deg,#b83b77,#e08aa3 55%,#f3c9b8)}
.s-bg i{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);filter:blur(.8cqw)}
.s-bg i:nth-child(1){width:14cqw;height:14cqw;left:6%;top:12%}.s-bg i:nth-child(2){width:8cqw;height:8cqw;left:22%;bottom:10%;opacity:.6}.s-bg i:nth-child(3){width:20cqw;height:20cqw;right:-4%;top:-20%;opacity:.5}
.s-arch{position:absolute;right:9%;bottom:0;width:15cqw;height:72%;border-radius:8cqw 8cqw 0 0;background:rgba(255,255,255,.14);border:.35cqw solid rgba(255,255,255,.55);border-bottom:0}
.s-hero small{font-family:var(--mono);font-size:1.3cqw;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.s-hero b{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:5.2cqw;line-height:1.02}
.s-hero b em{font-style:italic}
.s-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw;padding:2.1cqw 2.8cqw 2.4cqw}
.s-item{display:grid;grid-template-columns:auto 1fr;column-gap:1.1cqw;align-items:center}
.s-th{grid-row:span 2;width:5.2cqw;height:5.2cqw;border-radius:50%;background:linear-gradient(135deg,#e79aa9,#b83b77);box-shadow:inset 0 0 0 .4cqw #fff}
.s-th.t2{background:linear-gradient(135deg,#f3c9b8,#c9795f)}.s-th.t3{background:linear-gradient(135deg,#f6e2b3,#c99a3f)}.s-th.t4{background:linear-gradient(135deg,#d8c3e6,#8a5aa8)}
.s-item b{font-family:Georgia,serif;font-weight:400;font-size:1.75cqw;color:#3b1d2a;align-self:end}
.s-item small{font-size:1.3cqw;color:#8a6875;align-self:start}

/* ---------- 3 · Installatie (donker, stoer) ---------- */
.v3{background:#0b1220;color:#dfe7f3}
.i-alert{display:flex;align-items:center;gap:.9cqw;background:#dc2626;color:#fff;font-size:1.35cqw;font-weight:600;padding:.8cqw 2.8cqw}
.i-alert i{width:.9cqw;height:.9cqw;border-radius:50%;background:#fff;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.i-nav{display:flex;align-items:center;gap:2.2cqw;padding:1.6cqw 2.8cqw;font-size:1.45cqw;color:#9fb0c8;border-bottom:1px solid rgba(255,255,255,.08)}
.i-logo{font-family:var(--head);font-weight:800;font-size:2.2cqw;color:#fff;letter-spacing:.03em;margin-right:auto;white-space:nowrap}
.i-logo span{color:#2dd4bf;margin-left:.5cqw;font-weight:600}
.i-btn{font-style:normal;background:#14b8a6;color:#04201c;font-weight:700;font-family:var(--head);font-size:1.5cqw;padding:1cqw 1.8cqw;border-radius:.8cqw;white-space:nowrap}
.i-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:2.4cqw;align-items:center;padding:2.2cqw 2.8cqw;background:radial-gradient(40cqw 25cqw at 88% 20%,rgba(20,184,166,.3),transparent 70%);min-height:0}
.i-copy small{display:block;font-family:var(--mono);font-size:1.3cqw;letter-spacing:.1em;text-transform:uppercase;color:#2dd4bf;margin-bottom:1.2cqw}
.i-copy b{display:block;font-family:var(--head);font-weight:800;font-size:5.4cqw;line-height:.98;letter-spacing:-.045em;color:#fff;margin-bottom:2cqw}
.i-copy b span{color:#2dd4bf}
.i-btns{display:flex;gap:1.2cqw}
.i-wa{font-style:normal;display:inline-flex;align-items:center;gap:.7cqw;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;font-size:1.5cqw;padding:1cqw 1.6cqw;border-radius:.8cqw}
.i-wa svg{width:2cqw;height:2cqw}
.i-stats{display:grid;gap:1.1cqw}
.i-stats div{display:flex;align-items:baseline;justify-content:space-between;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:1.2cqw;padding:1.3cqw 1.6cqw}
.i-stats b{font-family:var(--head);font-weight:800;font-size:2.7cqw;color:#fff;letter-spacing:-.03em}
.i-stats small{font-size:1.3cqw;color:#9fb0c8}
.i-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:0 2.8cqw 2.4cqw}
.i-card{display:flex;align-items:center;gap:1.1cqw;background:#111b2e;border:1px solid rgba(255,255,255,.08);border-radius:1.2cqw;padding:1.4cqw}
.i-card .ic{width:3.4cqw;height:3.4cqw;border-radius:.9cqw;background:rgba(20,184,166,.16);color:#2dd4bf;display:grid;place-items:center;flex:none}
.i-card .ic svg{width:1.9cqw;height:1.9cqw}
.i-card b{flex:1;font-size:1.5cqw;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-card .ar svg{width:1.8cqw;height:1.8cqw;color:#2dd4bf}

/* ---------- 4 · Restaurant (warm, sfeervol) ---------- */
.v4{background:#f5ecdf;color:#2a1a14}
.r-hero{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;min-height:0}
.r-bg{position:absolute;inset:0;background:radial-gradient(30cqw 20cqw at 76% 55%,rgba(255,190,120,.35),transparent 70%),linear-gradient(135deg,#24160f,#4a2a1c 60%,#6b3a22)}
.r-plate{position:absolute;right:8%;top:52%;transform:translateY(-50%);width:24cqw;height:24cqw;border-radius:50%;background:radial-gradient(circle,#fbf7f0 0 54%,#e6dccd 55% 60%,#fbf7f0 61%);box-shadow:0 2cqw 4cqw rgba(0,0,0,.5)}
.r-plate i{position:absolute;left:27%;top:28%;width:46%;height:38%;border-radius:45% 55% 50% 50%;background:linear-gradient(135deg,#c2410c,#7c2d12);box-shadow:3cqw -1.5cqw 0 -1cqw #65a30d,-2cqw 2cqw 0 -1.2cqw #16a34a}
.r-plate b{position:absolute;left:34%;top:60%;width:32%;height:15%;border-radius:50%;background:#facc15;opacity:.9}
.r-glass{position:absolute;right:37%;top:24%;width:4.6cqw;height:13cqw;border-radius:0 0 2.3cqw 2.3cqw;background:linear-gradient(180deg,rgba(255,255,255,.06) 30%,rgba(185,28,28,.6) 30%,rgba(127,29,29,.85));border:.25cqw solid rgba(255,255,255,.35);border-top:0}
.r-nav{position:relative;display:flex;align-items:center;gap:2.2cqw;padding:1.8cqw 2.8cqw;font-size:1.45cqw;color:rgba(255,255,255,.8)}
.r-logo{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:2.5cqw;color:#fff;margin-right:auto;white-space:nowrap}
.r-btn{font-style:normal;background:#c83f2f;color:#fff;font-weight:600;font-size:1.5cqw;padding:1cqw 1.9cqw;border-radius:100px;white-space:nowrap}
.r-copy{position:relative;padding:.6cqw 2.8cqw 0;max-width:56%}
.r-copy small{display:block;font-family:var(--mono);font-size:1.3cqw;letter-spacing:.14em;text-transform:uppercase;color:#fcd9b6;margin-bottom:1cqw}
.r-copy b{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:4.7cqw;line-height:1.03;margin-bottom:1.8cqw}
.r-copy b em{font-style:italic;color:#fcb58a}
.r-menu{display:grid;grid-template-columns:1fr 1fr .8fr;gap:2.4cqw;padding:2.1cqw 2.8cqw}
.r-col h6,.r-open h6{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:2cqw;margin-bottom:1cqw;color:#c83f2f}
.r-col p{display:flex;align-items:baseline;gap:.8cqw;font-size:1.45cqw;margin-bottom:.8cqw}
.r-col p i{flex:1;border-bottom:1px dotted rgba(42,26,20,.35)}
.r-open{background:#2a1a14;color:#f5ecdf;border-radius:1.4cqw;padding:1.6cqw}
.r-open h6{color:#fcb58a}
.r-open b{display:block;font-family:var(--head);font-size:2.3cqw;font-weight:700}
.r-open small{font-size:1.3cqw;opacity:.7}

/* ---------- 5 · Makelaar (aanbod) ---------- */
.v5{background:#fff;color:#0f2e1f}
.m-nav{display:flex;align-items:center;gap:2.2cqw;padding:1.6cqw 2.8cqw;font-size:1.45cqw;color:#4b5563}
.m-logo{font-family:var(--head);font-weight:800;font-size:2.3cqw;color:#0f2e1f;margin-right:auto;letter-spacing:-.02em;white-space:nowrap}
.m-logo span{color:#15803d}
.m-btn{font-style:normal;background:#15803d;color:#fff;font-weight:600;font-size:1.45cqw;padding:1cqw 1.7cqw;border-radius:.8cqw;white-space:nowrap}
.m-hero{position:relative;margin:0 2.8cqw;border-radius:1.6cqw;overflow:hidden;min-height:0}
.v5 .rx-img,.pv.v5 .rx-img{position:absolute;inset:0;margin:0;min-height:0;height:100%;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#8fc1ea 0%,#d7ecf8 55%,#c6e0b8 55.2%,#9cc788 100%)}
.v5 .rx-img .house{background:#fff}.v5 .rx-img .house i:nth-child(2){background:#15803d}
.v5 .rx-img.h2{background:linear-gradient(180deg,#f7c59f 0%,#fde7d3 55%,#d5dcc0 55.2%,#aec08f 100%)}
.v5 .rx-img.h3{background:linear-gradient(180deg,#b9c7f0 0%,#e6ebfa 55%,#cfdcc1 55.2%,#a4bd8d 100%)}.v5 .rx-img.h3 .house{left:14%;width:62%}
.v5 .rx-img.mini .sun{width:4cqw;height:4cqw}
.m-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 3.4cqw;background:linear-gradient(90deg,rgba(15,46,31,.78),rgba(15,46,31,.05) 72%)}
.m-over b{font-family:var(--head);font-weight:780;font-size:4.2cqw;line-height:1.02;letter-spacing:-.04em;color:#fff;max-width:56%;margin-bottom:2cqw}
.m-over b span{color:#86efac}
.m-search{display:flex;align-items:center;gap:1cqw;background:#fff;border-radius:1.2cqw;padding:.8cqw;width:62%;box-shadow:0 1.5cqw 3cqw rgba(0,0,0,.2)}
.m-search span{flex:1;font-size:1.4cqw;color:#9ca3af;padding:.6cqw 1cqw;border-right:1px solid #e5e7eb}
.m-search span:nth-of-type(2){border:0}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:2cqw 2.8cqw 2.2cqw}
.m-ph{position:relative;height:11cqw;border-radius:1cqw;overflow:hidden}
.m-tag{position:absolute;z-index:1;left:.8cqw;top:.8cqw;background:#fff;color:#15803d;font-weight:700;font-size:1.1cqw;padding:.3cqw .8cqw;border-radius:.6cqw}
.m-card b{display:block;font-family:var(--head);font-weight:750;font-size:1.8cqw;margin-top:1cqw}
.m-card small{display:block;font-size:1.3cqw;color:#6b7280}
.m-meta{display:block;font-family:var(--mono);font-size:1.15cqw;color:#15803d;margin-top:.4cqw}

/* ---------- telefoonversies ---------- */
.ph-stage .bp-final.rx-p{display:block;padding:0}
.pv{position:absolute;inset:0;flex-direction:column;gap:4cqw;overflow:hidden;padding-bottom:5cqw}
.pv.v1{background:#fff}
.rx-p .p-h{display:block;padding:0 6cqw;font-family:var(--head);font-weight:780;font-size:10cqw;line-height:1.02;letter-spacing:-.045em;color:var(--ink)}
.rx-p .p-h span{color:var(--acc)}
.pv.v2{background:#f7ece9;gap:5cqw}
.pv.v2 .s-nav{justify-content:center;padding:6cqw 5cqw 2cqw}.pv.v2 .s-logo{font-size:8cqw;margin:0}
.pv.v2 .s-hero{margin:0 5cqw;height:56%;flex:none;border-radius:5cqw;gap:3cqw}
.pv.v2 .s-hero small{font-size:3.4cqw}.pv.v2 .s-hero b{font-size:11cqw}.pv.v2 .s-btn.light{font-size:4.4cqw;padding:3cqw 6cqw}
.pv.v2 .s-arch{width:28cqw}
.pv.v2 .s-item{margin:0 6cqw;column-gap:3cqw}.pv.v2 .s-th{width:12cqw;height:12cqw}.pv.v2 .s-item b{font-size:5.4cqw}.pv.v2 .s-item small{font-size:3.8cqw}
.pv.v3{background:#0b1220;gap:0}
.pv.v3 .i-alert{font-size:3.8cqw;padding:2.4cqw 5cqw;gap:2cqw}.pv.v3 .i-alert i{width:2.4cqw;height:2.4cqw}
.pv.v3 .i-nav{padding:4.5cqw 5cqw}.pv.v3 .i-logo{font-size:6cqw}
.pv.v3 .i-copy{padding:8cqw 6cqw 6cqw;background:radial-gradient(60cqw 40cqw at 90% 10%,rgba(20,184,166,.3),transparent 70%)}
.pv.v3 .i-copy b{font-size:12.5cqw;margin-bottom:5cqw}.pv.v3 .i-btn{font-size:4.6cqw;padding:3cqw 5cqw;border-radius:2.4cqw}
.pv.v3 .i-stats{grid-template-columns:1fr 1fr;padding:0 6cqw;gap:3cqw}
.pv.v3 .i-stats div{flex-direction:column;padding:3.6cqw;border-radius:3cqw}.pv.v3 .i-stats b{font-size:6.6cqw}.pv.v3 .i-stats small{font-size:3.6cqw}
.pv.v4{background:#f5ecdf;gap:5cqw}
.pv.v4 .r-hero{height:64%;flex:none}
.pv.v4 .r-plate{width:44cqw;height:44cqw;right:-10%;top:68%}
.pv.v4 .r-nav{padding:5cqw}.pv.v4 .r-logo{font-size:7cqw}
.pv.v4 .r-copy{max-width:100%;padding:2cqw 6cqw}.pv.v4 .r-copy b{font-size:10.5cqw;margin-bottom:4cqw}.pv.v4 .r-btn{font-size:4.5cqw;padding:3cqw 5.5cqw}
.pv.v4 .r-col{padding:0 6cqw}.pv.v4 .r-col h6{font-size:5.6cqw;margin-bottom:2.4cqw}.pv.v4 .r-col p{font-size:4.2cqw;margin-bottom:2cqw;gap:2cqw}
.pv.v5{background:#fff;gap:4.5cqw}
.pv.v5 .m-nav{padding:5cqw}.pv.v5 .m-logo{font-size:6.6cqw}
.pv.v5 .m-hero{margin:0 5cqw;height:44%;flex:none;border-radius:4cqw}
.pv.v5 .m-over{padding:5cqw;background:linear-gradient(180deg,rgba(15,46,31,.1),rgba(15,46,31,.75))}
.pv.v5 .m-over b{font-size:9cqw;max-width:100%;margin-bottom:4cqw}
.pv.v5 .m-search{width:100%;padding:2cqw;border-radius:3cqw}.pv.v5 .m-search span{font-size:3.8cqw;padding:1.5cqw 2.5cqw;border:0}.pv.v5 .m-btn{font-size:4cqw;padding:2.4cqw 4cqw;border-radius:2.4cqw}
.pv.v5 .m-card{margin:0 5cqw}.pv.v5 .m-ph{height:32cqw;border-radius:3cqw}.pv.v5 .m-tag{font-size:3.2cqw;padding:1cqw 2.2cqw;border-radius:2cqw;left:2.5cqw;top:2.5cqw}
.pv.v5 .m-card b{font-size:5.6cqw;margin-top:3cqw}.pv.v5 .m-card small{font-size:3.8cqw}

/* cursor klikt op de juiste knop (positie via JS) */
.bx-cursor{--cx:13%;--cy:57%}
@keyframes cur{0%,47%{opacity:0;left:80%;top:90%}50%{opacity:1;left:80%;top:90%}59%{left:var(--cx);top:var(--cy)}61%{left:var(--cx);top:var(--cy);transform:scale(.82)}63%{transform:none}70%{opacity:1;left:calc(var(--cx) + 3%);top:calc(var(--cy) + 5%)}76%,100%{opacity:0;left:calc(var(--cx) + 3%);top:calc(var(--cy) + 5%)}}
.hero-x .rx-copy .rx-btn{animation:none}
.hero-x .press{animation:press 11s ease infinite}
.bp-stage .bp-wire{z-index:1}.bp-stage .bp-final{z-index:2}.bp-stage .bp-scan{z-index:4}.bp-stage .bp-state{z-index:5}.bp-stage .bx-cursor{z-index:6}
.pv.v3 .i-card{margin:5cqw 6cqw 0;padding:3.6cqw;border-radius:3cqw;gap:3cqw}.pv.v3 .i-card .ic{width:9cqw;height:9cqw;border-radius:2.4cqw}.pv.v3 .i-card .ic svg{width:5cqw;height:5cqw}.pv.v3 .i-card b{font-size:4.2cqw}.pv.v3 .i-card .ar svg{width:4.6cqw;height:4.6cqw}
/* snellere wissel in de hero */
.hero-x .bp-final,.hero-x .bp-scan,.hero-x .bp-state::before,.hero-x .bx-toast,.hero-x .note,.hero-x .bx-google,.hero-x .bx-cursor,.hero-x .bx-cursor i,.hero-x .press{animation-duration:7s!important}
.hero-x .note.n2{animation-delay:.15s}.hero-x .note.n3{animation-delay:.3s}.hero-x .note.n4{animation-delay:.45s}
.hero-x .hx-phone .bp-final{animation-delay:.35s}

/* =========================================================
   v10 — voor/na-slider
   ========================================================= */
.ba-sec{padding-top:40px}
.ba{--p:50%}
.ba-frame{background:#fff;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.ba-view{position:relative;aspect-ratio:16/8.6;container-type:inline-size;overflow:hidden;user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba-site{position:absolute;inset:0;overflow:hidden}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0);z-index:2}
.ba-handle{position:absolute;z-index:4;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(14,17,22,.15),0 0 20px rgba(0,0,0,.25);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);border:3px solid #fff}
.ba-handle svg{width:16px;height:16px}
.ba-handle svg:first-child{transform:rotate(90deg);margin-right:-3px}.ba-handle svg:last-child{transform:rotate(-90deg);margin-left:-3px}
.ba-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-tag{position:absolute;z-index:3;top:14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:7px;pointer-events:none}
.ba-tag.l{left:14px;background:#7f1d1d;color:#fff}
.ba-tag.r{right:14px;background:var(--blue-600);color:#fff}
.ba.dragging .ba-before,.ba.dragging .ba-handle{transition:none}
.ba.hint .ba-before{transition:clip-path .9s cubic-bezier(.65,0,.35,1)}.ba.hint .ba-handle{transition:left .9s cubic-bezier(.65,0,.35,1)}
/* --- oud (2014) --- */
.ba-old{background:#dfe8d0;font-family:Verdana,Geneva,Tahoma,sans-serif;color:#222;display:flex;flex-direction:column}
.o-top{display:flex;justify-content:space-between;align-items:flex-end;padding:1.6cqw 2cqw;background:linear-gradient(#3a6ea5,#1f4c80);color:#fff;border-bottom:.4cqw solid #f2c200}
.o-logo{font-family:"Comic Sans MS","Comic Sans",cursive;font-size:3.2cqw;font-weight:700;text-shadow:.2cqw .2cqw 0 #000;letter-spacing:.05em}
.o-tel{font-size:1.25cqw;color:#ffe680}
.o-menu{display:flex;gap:.3cqw;background:#9ab87a;padding:.4cqw 1cqw}
.o-menu span{font-size:1.3cqw;padding:.5cqw 1.1cqw;background:linear-gradient(#fff,#c9d9b3);border:1px solid #6d8a52;color:#1f3a0f;text-decoration:underline}
.o-body{flex:1;display:grid;grid-template-columns:18cqw 1fr;gap:1.5cqw;padding:1.5cqw 2cqw;min-height:0}
.o-side{background:#fffbe0;border:2px dashed #c9a400;padding:1.2cqw;font-size:1.2cqw;position:relative}
.o-side b{display:block;color:#c00;font-size:1.6cqw;margin-bottom:.8cqw;text-decoration:underline}
.o-side p{margin-bottom:.8cqw}
.o-cnt{font-family:"Courier New",monospace;background:#000;color:#0f0;padding:0 .4cqw}
.o-flash{display:inline-block;margin-top:.8cqw;background:#f00;color:#ff0;font-weight:700;padding:.3cqw .8cqw;transform:rotate(-6deg);animation:oblink 1s steps(2) infinite}
@keyframes oblink{50%{opacity:.2}}
.o-main{background:#fff;border:1px solid #9ab87a;padding:1.4cqw 1.8cqw;overflow:hidden}
.o-main h4{font-family:"Times New Roman",serif;font-size:2.6cqw;color:#1f4c80;text-align:center;margin-bottom:1cqw;text-decoration:underline}
.o-main p{font-size:1.3cqw;line-height:1.5;text-align:justify;margin-bottom:1cqw}
.o-imgs{display:flex;gap:1cqw;margin:1cqw 0}
.o-imgs span{flex:1;height:8cqw;background:linear-gradient(135deg,#b7a98b,#7d6e52);border:.35cqw ridge #aaa;filter:blur(.08cqw) saturate(.6)}
.o-small{font-size:1.1cqw!important;color:#666;text-align:center!important}
.o-small u{color:#00e}
.o-foot{background:#1f4c80;color:#cfe0ff;font-size:1.1cqw;text-align:center;padding:.8cqw}
/* --- nieuw --- */
.ba-new{background:#fff;display:flex;flex-direction:column;font-family:var(--body);color:var(--ink)}
.n-nav{display:flex;align-items:center;gap:2cqw;padding:1.6cqw 2.6cqw;border-bottom:1px solid var(--line)}
.n-logo{font-family:var(--head);font-weight:800;font-size:2.3cqw;letter-spacing:-.03em}.n-logo span{color:#ea7a17}
.n-links{display:flex;gap:2.2cqw;margin-left:auto;font-size:1.35cqw;color:var(--muted);font-weight:500}
.n-btn{font-style:normal;background:#d9731a;color:#fff;font-family:var(--head);font-weight:650;font-size:1.4cqw;padding:.9cqw 1.7cqw;border-radius:.9cqw;white-space:nowrap}
.n-hero{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:2.6cqw;align-items:center;padding:2.2cqw 2.6cqw;background:linear-gradient(180deg,#fff,#fbfaf7);min-height:0}
.n-copy small{display:inline-block;font-family:var(--mono);font-size:1.2cqw;letter-spacing:.06em;text-transform:uppercase;color:#d9731a;background:rgba(242,140,40,.12);padding:.45cqw .9cqw;border-radius:.7cqw;margin-bottom:1.4cqw}
.n-copy b{display:block;font-family:var(--head);font-weight:780;font-size:4.2cqw;line-height:1.02;letter-spacing:-.045em;margin-bottom:1.3cqw}
.n-copy b span{color:#ea7a17}
.n-copy p{font-size:1.5cqw;line-height:1.45;color:var(--muted);margin-bottom:1.8cqw}
.n-btns{display:flex;gap:1.1cqw;margin-bottom:1.6cqw}
.n-wa{display:inline-flex;align-items:center;gap:.6cqw;font-style:normal;background:var(--wa);color:#063519;font-family:var(--head);font-weight:650;font-size:1.4cqw;padding:.9cqw 1.5cqw;border-radius:.9cqw}
.n-wa svg{width:1.8cqw;height:1.8cqw}
.n-rate{font-size:1.3cqw;color:var(--muted)}.n-rate span{color:#f5b301;letter-spacing:.1em}.n-rate b{color:var(--ink)}
.n-img{position:relative;height:100%;min-height:18cqw;border-radius:1.6cqw;overflow:hidden;background:linear-gradient(180deg,#f7b97a 0%,#fde4c8 55%,#e9e4d8 55.2%,#ddd6c6 100%);box-shadow:0 1.4cqw 3cqw rgba(14,17,22,.14)}
.n-img .sun{position:absolute;width:8cqw;height:8cqw;border-radius:50%;right:12%;top:10%;background:radial-gradient(circle,#fff6e0,rgba(255,246,224,0) 70%)}
.n-img .hill{position:absolute;left:-10%;right:-10%;bottom:30%;height:22%;background:rgba(14,17,22,.12);border-radius:50% 50% 0 0}
.n-img .house{position:absolute;left:18%;bottom:18%;width:46%;height:48%;background:#fff;clip-path:polygon(0 38%,50% 0,100% 38%,100% 100%,0 100%)}
.n-img .house i{position:absolute;bottom:18%;width:16%;height:22%;background:var(--ink);opacity:.82;border-radius:.4cqw}
.n-img .house i:nth-child(1){left:14%}.n-img .house i:nth-child(2){left:42%;height:36%;bottom:0;background:#d9731a;opacity:1}.n-img .house i:nth-child(3){left:70%}
.n-img .tree{position:absolute;right:12%;bottom:18%;width:11%;height:32%;background:#2f6b45;border-radius:50% 50% 45% 45%;opacity:.85}
.n-badge{position:absolute;left:1.4cqw;bottom:1.4cqw;display:flex;align-items:center;gap:.8cqw;background:#fff;border-radius:1cqw;padding:.9cqw 1.2cqw;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.15);font-size:1.15cqw;color:var(--muted)}
.n-badge svg{width:2.2cqw;height:2.2cqw;color:var(--green)}
.n-badge b{display:block;font-family:var(--head);font-size:1.35cqw;color:var(--ink)}
.n-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:0 2.6cqw 2.2cqw;background:#fbfaf7}
.n-c{display:grid;grid-template-columns:auto 1fr;column-gap:1cqw;align-items:center;background:#fff;border:1px solid var(--line);border-radius:1.2cqw;padding:1.3cqw}
.n-c .ic{grid-row:span 2;width:3.4cqw;height:3.4cqw;border-radius:.9cqw;background:rgba(242,140,40,.14);color:#d9731a;display:grid;place-items:center}
.n-c .ic svg{width:1.9cqw;height:1.9cqw}
.n-c b{font-family:var(--head);font-weight:680;font-size:1.5cqw}
.n-c small{font-size:1.15cqw;color:var(--muted)}
/* punten eronder */
.ba-points{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.ba-points>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.ba-points b{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:#fee2e2;color:#991b1b;margin-bottom:14px}
.ba-points .good b{background:var(--blue-tint);color:var(--blue-700)}
.ba-points ul{display:grid;gap:9px}
.ba-points li{position:relative;padding-left:28px;font-size:.97rem}
.ba-points li::before{content:"✕";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:#fee2e2;color:#b91c1c;font-size:.66rem;font-weight:700;display:grid;place-items:center;margin-top:3px}
.ba-points .good li::before{content:"✓";background:#dcfce7;color:#15803d;font-size:.72rem}
@media (max-width:860px){.ba-view{aspect-ratio:16/11}.ba-points{grid-template-columns:1fr}}
@media (max-width:600px){.ba-view{aspect-ratio:4/5}.ba-site{width:230%;transform-origin:0 0;transform:scale(.435);height:230%}.ba-handle span{width:44px;height:44px}}
/* v10.1 — schaal als miniatuur, nieuw links / oud rechts */
.ba-view{container-type:normal;aspect-ratio:16/9}
.ba-site{width:56%;height:56%;transform:scale(1.7857);transform-origin:0 0;container-type:inline-size}
.ba-top{position:absolute;inset:0;z-index:2;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba.hint .ba-top{transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.ba-tag.l{left:14px;background:var(--blue-600)}.ba-tag.r{right:14px;background:#7f1d1d}
@media (max-width:860px){.ba-view{aspect-ratio:16/10}}
@media (max-width:600px){.ba-view{aspect-ratio:16/10.5}.ba-site{width:100%;height:100%;transform:none}}
.n-copy .n-rate b{display:inline;font-family:var(--body);font-size:inherit;font-weight:700;letter-spacing:0;margin:0;line-height:1}
.ba-tag{top:auto;bottom:14px}

/* ===================================================== v11: intro, scroll-animaties, donkere pagina-hero's, previews */
/* --- intro (alleen home, 1x per bezoek) --- */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.intro{display:none}
.intro-on .intro{display:block;position:fixed;inset:0;z-index:300;cursor:pointer;animation:inGone .01s linear 1.95s forwards}
.in-panel{--r:0px;position:absolute;inset:0;background:#07090e;color:#fff;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px));
  mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px));
  animation:inOpen .85s cubic-bezier(.75,0,.2,1) 1.05s forwards}
.in-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(127,177,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.07) 1px,transparent 1px);background-size:56px 56px;background-position:center;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 10%,transparent 65%);mask-image:radial-gradient(circle at 50% 50%,#000 10%,transparent 65%)}
.in-center{position:absolute;left:50%;top:50%;width:min(78vw,400px);aspect-ratio:1;transform:translate(-50%,-50%);animation:inZoom .7s cubic-bezier(.6,0,.2,1) 1s forwards}
.in-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.in-lines .g{stroke:rgba(127,177,255,.45);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:inDraw .55s cubic-bezier(.5,0,.2,1) forwards}
.in-lines .g1{animation-delay:.05s}.in-lines .g2{animation-delay:.12s}.in-lines .g3{animation-delay:.2s;stroke-dasharray:.012 .012;stroke-dashoffset:0;opacity:0;animation:inFade .5s ease .25s forwards}
.in-lines .g4{animation-delay:.3s;stroke:#2b7aff}
.in-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-family:var(--head);font-weight:800;font-size:clamp(84px,17vw,150px);letter-spacing:-.07em;line-height:1;white-space:nowrap}
.in-mark span{display:block}
.in-mark .o{color:transparent;-webkit-text-stroke:1.5px #7fb1ff;clip-path:inset(0 100% 0 0);animation:inWipe .5s cubic-bezier(.6,0,.2,1) .25s forwards}
.in-mark .s{position:absolute;inset:0;color:#fff;opacity:0;animation:inFade .3s ease .68s forwards}
.in-mark .s b{color:#2b7aff}.in-mark b{font-weight:inherit}
.in-dim{position:absolute;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#7fb1ff;opacity:0;animation:inFade .3s ease .5s forwards}
.in-dim.d1{left:23%;top:calc(32.5% - 22px)}.in-dim.d2{right:23%;bottom:calc(32.5% - 22px)}
.in-foot{position:absolute;left:0;right:0;bottom:28px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#6f7888}
.in-foot .wrap{display:flex;align-items:center;gap:22px}
.in-bar{flex:1;height:1px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.in-bar i{position:absolute;inset:0;background:#2b7aff;transform-origin:left;transform:scaleX(0);animation:inBar 1s cubic-bezier(.5,0,.2,1) .05s forwards}
.in-ring{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid #2b7aff;box-shadow:0 0 40px rgba(43,122,255,.55),inset 0 0 40px rgba(43,122,255,.25);opacity:0;animation:inRing .85s cubic-bezier(.75,0,.2,1) 1.05s forwards}
@keyframes inOpen{to{--r:120vmax}}
@keyframes inRing{0%{opacity:1;width:0;height:0}75%{opacity:1}100%{opacity:0;width:240vmax;height:240vmax}}
@keyframes inZoom{to{transform:translate(-50%,-50%) scale(1.35);opacity:0}}
@keyframes inDraw{to{stroke-dashoffset:0}}
@keyframes inFade{to{opacity:1}}
@keyframes inWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes inBar{to{transform:scaleX(1)}}
@keyframes inGone{to{visibility:hidden;pointer-events:none}}
/* hero komt binnen zodra de cirkel opent */
.intro-on .site-header{animation:hdrIn .7s cubic-bezier(.2,.8,.2,1) 1.45s both}
@keyframes hdrIn{from{transform:translateY(-100%);opacity:0}}
.intro-on .hero-x .reveal{transition-duration:.8s;transition-delay:1.3s}
.intro-on .hero-x .lead.reveal{transition-delay:1.45s}
.intro-on .hero-x .btn-row.reveal{transition-delay:1.55s}
.intro-on .hero-x .hero-checks.reveal{transition-delay:1.62s}
.intro-on .hero-x .hx-stage.reveal{transition-delay:1.4s}
.intro-on .hero-x h1 .sw>span{transition-delay:calc(1.25s + var(--i,0) * 60ms)}

/* --- koppen: woord voor woord omhoog uit een masker --- */
.js .wsplit .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .02em .14em;margin:-.1em -.02em -.14em}
.js .wsplit .sw>span{display:inline-block;transform:translateY(150%);transition:transform .85s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i,0) * 45ms)}
.js .in .wsplit .sw>span,.js .wsplit.in .sw>span{transform:none}
.js .wsplit .accent{background-size:0% 100%;background-repeat:no-repeat;transition:background-size .8s cubic-bezier(.6,0,.2,1) .45s}
.js .in .wsplit .accent,.js .wsplit.in .accent{background-size:100% 100%}
.intro-on .hero-x h1 .accent{transition-delay:1.75s}

/* --- statement: minder lucht eronder --- */
.statement{padding:130px 0 34px}
@media (max-width:1020px){.statement{padding:84px 0 14px}}

/* --- donkere pagina-hero's --- */
body.dark-top .site-header{position:fixed;left:0;right:0;top:0}
.page-hero.dark-hero{position:relative;overflow:hidden;background:#07090e;color:#aeb7c7;padding:170px 0 132px;border-bottom:0}
.page-hero.dark-hero>.wrap{position:relative;z-index:1}
.ph-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(127,177,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.07) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 75% 40%,#000 15%,transparent 80%);mask-image:radial-gradient(ellipse 70% 90% at 75% 40%,#000 15%,transparent 80%)}
.page-hero.dark-hero .hx-spot{position:absolute;inset:0}
.ph-glow{position:absolute;pointer-events:none;width:900px;height:640px;right:-240px;top:-140px;background:radial-gradient(closest-side,rgba(43,122,255,.28),rgba(43,122,255,.07) 55%,transparent)}
.page-hero.dark-hero h1{color:#fff}
.page-hero.dark-hero .lead{color:#aeb7c7}
.dark-hero .crumbs{color:#6f7888}.dark-hero .crumbs [aria-current]{color:#fff}.dark-hero .crumbs a:hover{color:#7fb1ff}
.dark-hero .btn-link{color:#fff}
.ph-foot{position:absolute;left:0;right:0;bottom:0;z-index:1;border-top:1px solid rgba(255,255,255,.07);padding:15px 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#5d6778}
.ph-foot .wrap{display:flex;justify-content:space-between;gap:20px}
@media (max-width:1020px){.page-hero.dark-hero{padding:136px 0 108px}.hx-spot{display:none}}
@media (max-width:600px){.page-hero.dark-hero{padding:112px 0 92px}.ph-foot span:first-child{display:none}.ph-foot .wrap{justify-content:flex-start}}

/* --- dienstenlijst: preview bij hover --- */
.index a{position:relative}
.i-prev{position:absolute;left:0;top:0;width:220px;height:148px;transform:translate(var(--px,300px),var(--py,-74px)) rotate(var(--rot,-4deg)) scale(.8);opacity:0;transition:opacity .22s ease,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:6;border-radius:14px;background:#fff;border:1px solid var(--line-2);box-shadow:0 34px 60px -22px rgba(14,17,22,.4);overflow:hidden;display:flex;flex-direction:column}
.index a:hover .i-prev{opacity:1;transform:translate(var(--px,300px),var(--py,-74px)) rotate(var(--rot,-2deg)) scale(1)}
.index a:nth-child(even) .i-prev{--rot:2.5deg}
.pv-bar{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);background:#f4f2ec}
.pv-bar i{width:6px;height:6px;border-radius:50%;background:#d6d2c8}
.pv-body{flex:1;padding:12px 13px;display:flex;flex-direction:column;gap:7px;font-family:var(--body);color:var(--ink);min-height:0}
.pv-search{display:flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:99px;padding:4px 9px;font-size:.66rem;color:var(--muted)}
.pv-search span{font-weight:800;color:#2b7aff}.pv-search i{font-style:normal}
.pv-res{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:7px;row-gap:4px;align-items:center;opacity:.45}
.pv-res.top{opacity:1}
.pv-res em{grid-row:1/3;font-style:normal;font-family:var(--mono);font-size:.6rem;font-weight:700;background:var(--line);border-radius:5px;text-align:center;padding:4px 0}
.pv-res.top em{background:#2b7aff;color:#fff}
.pv-res b{height:6px;width:70%;border-radius:3px;background:#1a62e0}.pv-res i{height:4px;width:92%;border-radius:3px;background:var(--line-2)}
.pv-score{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;margin-top:4px}
.pv-score b{grid-row:1/3;font-family:var(--head);font-size:2.3rem;font-weight:750;letter-spacing:-.04em;line-height:1}
.pv-score .stars{color:#f5b301;letter-spacing:1px;font-size:.9rem}.pv-score small{font-size:.66rem;color:var(--muted)}
.pv-quote{margin-top:auto;border-left:2px solid #2b7aff;padding-left:8px;display:grid;gap:5px}.pv-quote i{height:5px;border-radius:3px;background:var(--line-2)}.pv-quote i+i{width:65%}
.pv-body:has(.pv-photo){padding:0}
.pv-photo{position:relative;flex:1;background:linear-gradient(#bfd6ff,#e9f0ff 60%,#c9d9b4 60%,#9fbf7e)}
.pv-photo .sun{position:absolute;right:28px;top:14px;width:22px;height:22px;border-radius:50%;background:#ffd36b}
.pv-photo .hill{position:absolute;left:-10%;right:30%;bottom:0;height:46%;border-radius:50% 50% 0 0;background:#7da35c}
.pv-photo .play{position:absolute;left:50%;top:46%;width:38px;height:38px;margin:-19px;border-radius:50%;background:rgba(14,17,22,.75)}
.pv-photo .play::after{content:"";position:absolute;left:15px;top:11px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.pv-photo .rec{position:absolute;left:10px;top:9px;font-family:var(--mono);font-size:.58rem;color:#e0342b;letter-spacing:.08em;background:#fff;border-radius:4px;padding:2px 5px}
.pv-chart{flex:1;display:flex;align-items:flex-end;gap:7px;border-bottom:1px solid var(--line-2);padding:0 4px}
.pv-chart i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(#2b7aff,#7fb1ff);transform-origin:bottom;transform:scaleY(.2);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.index a:hover .pv-chart i{transform:none}
.pv-chart i:nth-child(2){transition-delay:.04s}.pv-chart i:nth-child(3){transition-delay:.08s}.pv-chart i:nth-child(4){transition-delay:.12s}.pv-chart i:nth-child(5){transition-delay:.16s}.pv-chart i:nth-child(6){transition-delay:.2s}
.pv-lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pv-brand{flex:1;display:flex;align-items:center;justify-content:space-between}
.pv-brand b{font-family:var(--head);font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.pv-brand span{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pv-brand span i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2)}
.pv-up{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;margin-top:6px}
.pv-up .live-dot{grid-row:1/3}.pv-up b{font-family:var(--head);font-size:1.8rem;font-weight:750;letter-spacing:-.04em;line-height:1}.pv-up small{font-size:.64rem;color:var(--muted)}
.pv-bars{margin-top:auto;display:flex;gap:3px;height:22px}.pv-bars i{flex:1;border-radius:2px;background:#22c55e;opacity:.85}.pv-bars i:nth-child(9){opacity:.35}
@media (hover:none),(max-width:1020px){.i-prev{display:none}}

/* --- reviews --- */
.rv-score{display:inline-flex;align-items:center;gap:12px;margin:0 0 30px;padding:12px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--paper)}
.rv-score .g{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line-2);font-weight:800;color:#2b7aff}
.rv-score b{font-family:var(--head);font-size:1.6rem;font-weight:750;letter-spacing:-.03em}
.rv-score .stars,.rv-card .stars{color:#f5b301;letter-spacing:2px}
.rv-score small{color:var(--muted);font-size:.85rem}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rv-card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px}
.rv-card blockquote{margin:0;font-family:var(--head);font-size:1.12rem;font-weight:500;letter-spacing:-.015em;line-height:1.45;color:var(--ink)}
.rv-card figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.rv-av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:700}
.rv-card figcaption b{display:block;font-size:.95rem}.rv-card figcaption small{color:var(--muted);font-size:.82rem}
@media (max-width:1020px){.rv-grid{grid-template-columns:1fr}}

/* --- portretfoto (verschijnt vanzelf zodra img/fender.jpg bestaat) --- */
.monogram .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.monogram>*:not(.portrait){z-index:1}
.monogram.has-photo::before{display:none}
.monogram.has-photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(7,9,14,.88),rgba(7,9,14,.2) 45%,transparent 70%)}
.monogram.has-photo .big,.monogram.has-photo .m-label{visibility:hidden}
@media (max-width:600px){.monogram.has-photo{aspect-ratio:4/5}}

@media (prefers-reduced-motion:reduce){.intro{display:none!important}.js .wsplit .sw>span{transform:none!important;transition:none!important}}
@media (max-width:600px){.in-foot span:not(.in-bar){display:none}}

/* --- header: rustige overgang. Boven de donkere hero blijft hij donker (glas), daarna zacht naar licht --- */
.site-header{transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.site-header .logo,.site-header .logo .mark,.site-header .logo .mark span,.site-header .logo .txt small,.site-header .nav-links>a,.site-header .dd-toggle,.site-header .nav-ctas .btn-dark,.site-header .menu-btn{transition:color .4s ease,background-color .4s ease,border-color .4s ease}
.site-header.on-dark.stuck{background:rgba(7,9,14,.62);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:rgba(255,255,255,.07)}
.site-header.stuck:not(.on-dark){box-shadow:0 10px 30px -24px rgba(14,17,22,.35)}
@media (max-width:960px){.site-header.on-dark.stuck{background:rgba(7,9,14,.94);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* --- header v2: zwevend donker eiland zodra je scrolt, geen wissel meer naar licht --- */
.logo .txt{white-space:nowrap}
@media (min-width:961px){
  .site-header.on-dark.stuck{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .site-header.on-dark .nav{border:1px solid transparent;border-radius:18px;transition:height .45s cubic-bezier(.2,.8,.2,1),margin .45s cubic-bezier(.2,.8,.2,1),padding .45s cubic-bezier(.2,.8,.2,1),background-color .45s ease,border-color .45s ease,box-shadow .45s ease}
  .site-header.on-dark.stuck .nav{height:62px;margin-top:12px;padding:0 10px 0 14px;background:rgba(10,12,18,.8);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-color:rgba(255,255,255,.09);box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
  .site-header.on-dark .nav-ctas .btn{transition:padding .45s ease,background-color .25s,border-color .25s,color .25s}
  .site-header.on-dark.stuck .nav-ctas .btn{padding-top:10px;padding-bottom:10px}
}
@media (max-width:960px){
  .logo .txt{font-size:.95rem}
  .site-header.on-dark.stuck{background:rgba(9,11,16,.96);border-bottom-color:rgba(255,255,255,.07)}
}
@media (max-width:370px){.logo .txt small{display:none}}

/* ===================================================== v12: uitgebreide pakketten + vergelijkingstabel */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plan-body{flex:1;margin-bottom:28px;display:grid;gap:22px;align-content:start}
.plan .plan-body .ticks{margin:0;gap:9px}
.plan .plan-body .ticks li{font-size:.92rem;line-height:1.45}
.plan .plan-body .ticks svg{width:18px;height:18px}
.pg-label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:11px}
.pg-label::after{content:"";flex:1;height:1px;background:var(--line)}
.plan.featured .pg-label{color:#8d96a8}.plan.featured .pg-label::after{background:rgba(255,255,255,.1)}
.plan-plus{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:650;font-size:.95rem;color:var(--ink);background:rgba(43,122,255,.08);border:1px solid rgba(43,122,255,.18);border-radius:10px;padding:10px 12px}
.plan-plus svg{width:18px;height:18px;color:var(--blue-600);flex:none}
.plan.featured .plan-plus{color:#fff;background:rgba(127,177,255,.1);border-color:rgba(127,177,255,.22)}.plan.featured .plan-plus svg{color:#7fb1ff}
.plan .for{min-height:0}
@media (min-width:1021px){.plan .for{min-height:72px}}

.cmp-wrap{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:.93rem}
.cmp th,.cmp td{padding:13px 18px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody th[scope=row]{text-align:left;font-weight:500;color:var(--ink);width:40%}
.cmp thead th{position:sticky;top:0;background:var(--paper);padding:22px 18px 18px;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.cmp thead th b{display:block;font-family:var(--head);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cmp thead th small{display:block;margin-top:3px;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted-2)}
.cmp .feat,.cmp td:nth-child(3){background:rgba(43,122,255,.05)}
.cmp thead .feat b{color:var(--blue-600)}
.cmp tr.grp th{text-align:left;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);background:#efece5;padding:10px 18px}
.cmp td.yes svg{width:20px;height:20px;color:var(--blue-600);vertical-align:middle}
.cmp td.no{color:#c4c0b6}
.cmp td.txt{font-family:var(--head);font-weight:600;font-size:.88rem;color:var(--ink)}
.cmp tbody tr:not(.grp):hover th,.cmp tbody tr:not(.grp):hover td{background:rgba(43,122,255,.07)}
@media (max-width:760px){.cmp th,.cmp td{padding:11px 12px}.cmp tbody th[scope=row]{position:sticky;left:0;background:var(--paper);z-index:1;min-width:190px}.cmp-wrap::after{content:"Swipe voor alle pakketten →";display:block;padding:10px 14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);border-top:1px solid var(--line)}}

/* --- pakketten v4: kort en krachtig, "alles uit ..." bovenaan --- */
.plan .plan-body{margin-bottom:28px;gap:14px}
.plan .plan-body .ticks{gap:11px}
.plan .plan-body .ticks li{font-size:.94rem}
.plan .plan-body .ticks svg{width:20px;height:20px}

/* ===================================================== v13: gratis website-scan */
.scan-hero .status{margin-bottom:22px}
.scan-form,.scan-mini{display:flex;align-items:center;gap:8px;max-width:640px;background:#fff;border-radius:16px;padding:7px 7px 7px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.scan-form{margin-top:34px}
.sf-pre{font-family:var(--mono);font-size:.85rem;color:var(--muted-2);flex:none}
.scan-form input,.scan-mini input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1.05rem;color:var(--ink);padding:12px 2px}
.scan-form .btn{flex:none}
.scan-form:focus-within{box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 3px rgba(43,122,255,.55)}
.scan-mini{box-shadow:none;border:1px solid var(--line-2);padding:5px 5px 5px 14px;max-width:none;background:var(--paper)}
.scan-mini:focus-within{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(43,122,255,.18)}
.scan-mini input{font-size:.98rem;padding:10px 2px}
.scan-err{min-height:22px;margin-top:10px;color:#ff8f8f;font-size:.9rem}
.scan-trust{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;margin-top:4px;font-size:.9rem;color:#aeb7c7}
.scan-trust li{display:flex;align-items:center;gap:8px}.scan-trust svg{width:18px;height:18px;color:#7fb1ff}
@media (max-width:600px){
  .scan-form{flex-wrap:wrap;padding:8px}.scan-form .sf-pre{display:none}.scan-form input{padding:12px 10px;flex-basis:100%}.scan-form .btn{width:100%;justify-content:center}
  .scan-mini{flex-wrap:wrap}.scan-mini .sf-pre{display:none}.scan-mini input{flex-basis:100%;padding:10px}.scan-mini .btn{width:100%;justify-content:center}
}
.scan-out{scroll-margin-top:90px}
.scan-out [hidden]{display:none!important}
#scanRun,#scanRes,#scanLead{scroll-margin-top:100px}
/* bezig */
.scan-run{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.sr-frame{border-radius:16px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-lg);overflow:hidden}
.sr-stage{position:relative;height:340px;background:linear-gradient(rgba(43,122,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,122,255,.05) 1px,transparent 1px);background-size:24px 24px;overflow:hidden}
.sr-skel{position:absolute;inset:26px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:26px 90px 1fr 1fr;gap:12px}
.sr-skel i{border-radius:8px;background:linear-gradient(90deg,#eef1f6,#f7f8fb,#eef1f6);background-size:200% 100%;animation:skel 1.4s linear infinite}
.sr-skel i:nth-child(1){grid-column:1/4}.sr-skel i:nth-child(2){grid-column:1/3}.sr-skel i:nth-child(3){grid-row:2/3}
@keyframes skel{to{background-position:-200% 0}}
.sr-line{position:absolute;left:0;right:0;height:70px;top:-70px;z-index:1;background:linear-gradient(transparent,rgba(43,122,255,.16));border-bottom:2px solid #2b7aff;box-shadow:0 8px 24px rgba(43,122,255,.35);animation:srScan 2.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes srScan{to{top:340px}}
.sr-info h2{margin:12px 0 10px}
.sr-steps{list-style:none;margin:26px 0 22px;display:grid;gap:8px}
.sr-steps li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--muted-2);font-weight:500;transition:color .3s,border-color .3s,background .3s}
.sr-steps .st-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--paper);flex:none}
.sr-steps .st-ico svg{width:16px;height:16px}
.sr-steps .st-ok{margin-left:auto;opacity:0;transition:opacity .3s}.sr-steps .st-ok svg{width:20px;height:20px;color:#16a34a}
.sr-steps li.active{color:var(--ink);border-color:rgba(43,122,255,.4);background:rgba(43,122,255,.05)}
.sr-steps li.active .st-ico{background:var(--blue-600);color:#fff;animation:pulse 1.2s ease infinite}
.sr-steps li.done{color:var(--ink)}.sr-steps li.done .st-ok{opacity:1}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(43,122,255,.15)}}
.sr-bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.sr-bar i{display:block;height:100%;width:40%;background:var(--blue-600);border-radius:4px;animation:srBar 1.6s ease-in-out infinite}
@keyframes srBar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
/* resultaat */
.rs-top{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:center}
.rs-shot{display:flex;justify-content:center}
.rs-phone{position:relative;width:260px;height:auto;right:auto;bottom:auto}
.rs-phone img{display:block;width:100%;height:auto;aspect-ratio:auto}
.rs-url{font-family:var(--head);font-weight:650;font-size:1.3rem;letter-spacing:-.02em;margin:10px 0 22px;word-break:break-all}
.rs-grade{display:flex;align-items:center;gap:24px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);margin-bottom:22px}
.rs-cijfer{display:flex;align-items:baseline;gap:4px;flex:none;width:118px;height:118px;border-radius:50%;justify-content:center;align-items:center;color:#fff;background:#dc2626}
.rs-cijfer.mid{background:#ea8a0c}.rs-cijfer.good{background:#16a34a}
.rs-cijfer b{font-family:var(--head);font-size:2.9rem;font-weight:780;letter-spacing:-.05em;line-height:1}
.rs-cijfer small{font-size:.85rem;opacity:.8}
.rs-label{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px;margin-bottom:8px}
.rs-label.bad{background:#fde8e8;color:#b91c1c}.rs-label.mid{background:#fdf1dc;color:#b45309}.rs-label.good{background:#e3f6ea;color:#15803d}
.rs-grade p{color:var(--muted);font-size:.98rem}
.rs-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.ring{position:relative;text-align:center;padding:16px 8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.ring svg{width:80px;height:80px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1)}
.ring.good .fg{stroke:#16a34a}.ring.mid .fg{stroke:#ea8a0c}.ring.bad .fg{stroke:#dc2626}
.ring b{position:absolute;left:0;right:0;top:44px;font-family:var(--head);font-size:1.45rem;font-weight:750;letter-spacing:-.03em}
.ring.good b{color:#15803d}.ring.mid b{color:#b45309}.ring.bad b{color:#b91c1c}
.ring span{display:block;margin-top:6px;font-size:.84rem;font-weight:600}
.rs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rs-metrics div{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);border-left:4px solid #16a34a}
.rs-metrics .mid{border-left-color:#ea8a0c}.rs-metrics .bad{border-left-color:#dc2626}
.rs-metrics small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.rs-metrics b{font-family:var(--head);font-size:1.35rem;font-weight:720;letter-spacing:-.03em}
.rs-note{margin-top:14px;font-size:.8rem;color:var(--muted-2)}
.rs-lists{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:56px}
.rs-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);padding:28px}
.rs-card h3{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin-bottom:18px}
.rs-card h3 svg{width:22px;height:22px;color:var(--blue-600)}
.rs-card.good h3 svg{color:#16a34a}
.rs-issues{list-style:none;display:grid;gap:12px;counter-reset:i}
.rs-issues li{counter-increment:i;position:relative;padding:14px 16px 14px 52px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.rs-issues li::before{content:counter(i);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;font-weight:700;color:#fff;background:#dc2626}
.rs-issues li.mid::before{background:#ea8a0c}.rs-issues li.good::before{background:#16a34a;content:"✓"}
.rs-issues b{display:block;font-family:var(--head);font-weight:650;margin-bottom:3px}
.rs-issues span{color:var(--muted);font-size:.92rem;line-height:1.5}
.rs-good{list-style:none;display:grid;gap:10px}
.rs-good li{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.rs-good li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e3f6ea;color:#15803d;font-size:.75rem;font-weight:800}
/* lead */
.scan-lead{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:56px;padding:44px;border-radius:var(--radius-lg);background:var(--ink);color:#aeb7c7}
.scan-lead h2{color:#fff;margin:12px 0 14px}
.scan-lead .kicker{color:#aeb7c7}
.scan-lead .accent{color:#7fb1ff;background:linear-gradient(transparent 70%,rgba(43,122,255,.32) 70%,rgba(43,122,255,.32) 92%,transparent 92%)}
.scan-lead .ticks{margin-top:22px}.scan-lead .ticks li{color:#dfe4ec}.scan-lead .ticks svg{color:#7fb1ff}
.scan-lead .form{background:#fff;border-radius:16px;padding:28px;color:var(--ink)}
.scan-lead .form-note{font-size:.8rem;color:var(--muted-2);margin-top:12px;text-align:center}
@media (max-width:1020px){
  .scan-run,.rs-top,.rs-lists,.scan-lead{grid-template-columns:1fr;gap:34px}
  .rs-shot{order:2}.rs-phone{width:220px}
  .sr-frame{display:none}
  .scan-lead{padding:28px 20px}
}
@media (max-width:600px){.rs-rings{grid-template-columns:1fr 1fr}.rs-metrics{grid-template-columns:1fr}.rs-grade{flex-direction:column;align-items:flex-start;gap:16px}.rs-cijfer{width:96px;height:96px}.rs-cijfer b{font-size:2.3rem}}
.dark-hero .status{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#c5ccd8;box-shadow:none}
.dark-hero .status b{color:#fff}
.split>*{min-width:0}

/* --- scan zichtbaar: menu-item mobiel, band op home --- */
.nav-links>.nav-mobile-scan{display:none}
@media (max-width:960px){
  .nav-links>.nav-mobile-scan{display:flex;align-items:center;gap:10px;padding:17px 24px;font-size:1.1rem;font-family:var(--head);font-weight:600;border-bottom:1px solid var(--line);color:var(--blue-600)}
  .nm-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;background:var(--blue-600);color:#fff;border-radius:5px;padding:3px 7px}
}
@media (max-width:1240px) and (min-width:1101px){.nav-ctas .btn-dark{display:inline-flex}}
.scan-band{position:relative;overflow:hidden;background:#07090e;color:#aeb7c7;padding:76px 0}
.scan-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(127,177,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.07) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 100% at 80% 50%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 100% at 80% 50%,#000 10%,transparent 75%)}
.scan-band::after{content:"";position:absolute;width:800px;height:500px;right:-200px;top:50%;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(43,122,255,.25),transparent);pointer-events:none}
.sb-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sb-inner>*{min-width:0}
.sb-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#7fb1ff;margin-bottom:14px}
.scan-band h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:12px}
.scan-band .accent{color:#7fb1ff;background:linear-gradient(transparent 70%,rgba(43,122,255,.32) 70%,rgba(43,122,255,.32) 92%,transparent 92%)}
.sb-form .scan-mini{background:#fff;border-color:transparent;padding:7px 7px 7px 16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.sb-form .scan-mini input{font-size:1.05rem;padding:12px 2px}
.sb-form small{display:block;margin-top:12px;font-size:.84rem;color:#8d96a8}
@media (max-width:1020px){.sb-inner{grid-template-columns:1fr;gap:26px}.scan-band{padding:60px 0}}

/* ===================================================== v14: stappenplan (advies in 2 minuten) */
body.cfg-page{background:#07090e;color:#aeb7c7;min-height:100vh}
.cfg{position:relative;min-height:100vh;min-height:100dvh;padding:0 0 110px}
.cfg-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.cfg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(127,177,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 20%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 20%,#000 10%,transparent 75%)}
.cfg-glow{position:absolute;left:50%;top:-260px;width:1100px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,122,255,.24),rgba(43,122,255,.06) 55%,transparent)}
.cfg-ghost{position:absolute;right:-4vw;bottom:-12vw;font-family:var(--head);font-weight:800;font-size:46vw;line-height:1;letter-spacing:-.08em;color:rgba(255,255,255,.018)}
.cfg-top{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:26px 24px 0;display:flex;flex-direction:column;align-items:center;gap:18px}
.cfg-logo{display:inline-flex;align-items:center;gap:11px;color:#fff;font-family:var(--head);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.1}
.cfg-logo .mark{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:-.04em;position:relative;overflow:hidden}
.cfg-logo .mark span{color:var(--blue-600)}
.cfg-logo .mark::after{content:"";position:absolute;right:5px;bottom:5px;width:6px;height:6px;background:var(--blue)}
.cfg-logo small{display:block;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#8d96a8}
.cfg-back{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;color:#8d96a8;font-size:.95rem;transition:color .2s}
.cfg-back svg{width:18px;height:18px;transform:rotate(180deg)}
.cfg-back:hover{color:#fff}
.cfg-stage,.cfg-load,.cfg-result{position:relative;z-index:1}
.cfg-stage{max-width:820px;margin:0 auto;padding:30px 24px 0}
.cf-step{text-align:center;animation:cfIn .5s cubic-bezier(.2,.8,.2,1) both}
.cf-step.from-left{animation-name:cfInL}
@keyframes cfIn{from{opacity:0;transform:translateX(28px)}}
@keyframes cfInL{from{opacity:0;transform:translateX(-28px)}}
.cf-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#6ea4ff}
.cf-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#2b7aff;box-shadow:0 0 12px #2b7aff}
.cfg h1{color:#fff;font-size:clamp(2.3rem,6.2vw,4.4rem);font-weight:780;letter-spacing:-.05em;line-height:.98;margin:16px auto 18px;max-width:780px}
.cfg h1 .accent,.cfg .accent{color:#7fb1ff;background:linear-gradient(transparent 70%,rgba(43,122,255,.35) 70%,rgba(43,122,255,.35) 92%,transparent 92%)}
.cf-lead{font-size:clamp(1.02rem,1.8vw,1.2rem);line-height:1.6;color:#aeb7c7;max-width:640px;margin:0 auto}
.cf-note{font-size:.9rem;color:#6f7888;max-width:620px;margin:14px auto 0}
.cf-multi{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.86rem;color:#8d96a8}
.cf-multi svg{width:16px;height:16px;color:#6ea4ff}
.cf-opts{display:grid;gap:12px;margin-top:34px;text-align:left}
.cf-opts.two{grid-template-columns:1fr 1fr}
.cf-opt{display:flex;align-items:center;gap:16px;width:100%;padding:18px 18px 18px 16px;border-radius:16px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.1);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .25s,transform .15s}
.cf-opt:hover{border-color:rgba(127,177,255,.4);background:rgba(255,255,255,.045)}
.cf-opt:active{transform:scale(.99)}
.cf-opt:focus-visible{outline:2px solid #6ea4ff;outline-offset:2px}
.cf-n{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);font-family:var(--mono);font-size:.8rem;font-weight:600;color:#8d96a8;transition:background .2s,color .2s}
.cf-t{flex:1;min-width:0}
.cf-t b{display:block;font-family:var(--head);font-weight:650;font-size:1.08rem;letter-spacing:-.015em;line-height:1.25}
.cf-t small{display:block;margin-top:4px;font-size:.93rem;color:#9aa3b3;line-height:1.45}
.cf-c{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:background .2s,border-color .2s}
.cf-c svg{width:16px;height:16px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1.4)}
.cf-opt.on{border-color:#2b7aff;background:rgba(43,122,255,.1);box-shadow:0 0 0 1px #2b7aff,0 14px 40px -14px rgba(43,122,255,.6)}
.cf-opt.on .cf-n{background:#2b7aff;color:#fff}
.cf-opt.on .cf-c{background:#2b7aff;border-color:#2b7aff}
.cf-opt.on .cf-c svg{opacity:1;transform:none}
.cf-opts.two .cf-opt{padding:14px 14px 14px 12px}
.cf-opts.two .cf-n{width:34px;height:34px;font-size:.74rem}
.cf-opts.two .cf-t b{font-size:1rem}
.cf-other{display:none;margin-top:14px;text-align:left}
.cf-other.show{display:block;animation:cfIn .35s ease both}
.cf-other label,.cf-lbl{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8d96a8;margin-bottom:8px}
.cf-other textarea,.cf-add input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 14px;color:#fff;font:inherit;font-size:.98rem;outline:0;transition:border-color .2s}
.cf-other textarea:focus,.cf-add input:focus{border-color:#2b7aff}
.cf-add{margin-top:24px;text-align:left}
.cf-add-row{display:flex;gap:10px}.cf-add-row .btn{flex:none}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cf-chips span{display:inline-flex;align-items:center;gap:6px;padding:7px 8px 7px 13px;border-radius:99px;background:rgba(43,122,255,.14);border:1px solid rgba(43,122,255,.4);color:#fff;font-size:.88rem}
.cf-chips button{width:20px;height:20px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;line-height:1}
.cf-nav{display:flex;justify-content:space-between;align-items:center;margin-top:34px}
.cf-prev{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:#8d96a8;font:inherit;font-size:.98rem;cursor:pointer;padding:10px 4px;transition:color .2s}
.cf-prev svg{width:18px;height:18px;transform:rotate(180deg)}
.cf-prev:hover{color:#fff}
.cf-next{border-radius:99px;padding-left:30px;padding-right:26px;letter-spacing:.02em;box-shadow:0 14px 40px -12px rgba(43,122,255,.8)}
.cf-next svg{width:18px;height:18px}
.cf-next:disabled{opacity:.35;box-shadow:none;cursor:not-allowed}
.cf-trust{display:flex;justify-content:flex-end;gap:18px;margin-top:14px;font-size:.8rem;color:#6f7888}
.cf-trust span{display:inline-flex;align-items:center;gap:6px}.cf-trust svg{width:14px;height:14px;color:#6ea4ff}
/* voortgang */
.cfg-foot{position:fixed;left:0;right:0;bottom:0;z-index:5;background:rgba(7,9,14,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.07)}
.cf-inner{max-width:820px;margin:0 auto;padding:12px 24px 14px}
.cf-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c5ccd8;margin-bottom:9px}
.cf-bars{display:flex;gap:5px}
.cf-bars i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .4s}
.cf-bars i.on{background:#2b7aff;box-shadow:0 0 10px rgba(43,122,255,.6)}
/* laden */
.cfg-load{max-width:640px;margin:0 auto;padding:12vh 24px 0;text-align:center}
.cfg-load h2{color:#fff;font-size:clamp(1.8rem,4.4vw,3rem);margin:28px 0 10px}
.cfg-load p{color:#8d96a8}
.cl-ring{position:relative;width:140px;height:140px;margin:0 auto}
.cl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cl-ring circle{fill:none;stroke-width:6}.cl-ring .bg{stroke:rgba(255,255,255,.08)}.cl-ring .fg{stroke:#2b7aff;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(43,122,255,.7))}
.cl-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--head);font-size:1.9rem;font-weight:750;color:#fff}
/* resultaat */
.cfg-result{max-width:1180px;margin:0 auto;padding:30px 24px 0}
.cr-head{text-align:center;margin-bottom:44px;animation:cfIn .5s ease both}
.cr-grid{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start}
.cr-main{display:grid;gap:20px;min-width:0}
.cr-card,.cr-form{border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);padding:30px}
.cr-pkg{border-color:rgba(43,122,255,.55);background:linear-gradient(160deg,rgba(43,122,255,.16),rgba(255,255,255,.02) 60%);box-shadow:0 30px 70px -30px rgba(43,122,255,.5)}
.cr-lbl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6ea4ff;margin-bottom:12px}
.cr-lbl svg{width:16px;height:16px}
.cr-pkg h2{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.05em;line-height:1;margin-bottom:8px}
.cr-price{font-family:var(--head);font-weight:700;font-size:1.5rem;color:#7fb1ff;letter-spacing:-.02em;margin-bottom:16px}
.cr-price small{font-family:var(--body);font-weight:400;font-size:.85rem;color:#8d96a8;letter-spacing:0;margin-left:6px}
.cr-pkg p{color:#c5ccd8;line-height:1.6}
.cr-warn{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(234,138,12,.1);border:1px solid rgba(234,138,12,.35);color:#f5c98a!important;font-size:.93rem}
.cr-fine{margin-top:12px;font-size:.84rem;color:#8d96a8!important}
.cr-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#7fb1ff;font-weight:600;font-size:.93rem}.cr-link svg{width:16px;height:16px}
.cr-card h3,.cr-adds-wrap h3{color:#fff;font-size:1.35rem;margin-bottom:16px}
.cr-shared{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.cr-shared div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);min-width:0}
.cr-shared small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#6f7888;margin-bottom:3px}
.cr-shared span{color:#e3e8ef;font-size:.94rem;overflow-wrap:anywhere}
.cr-adds-wrap{padding:6px 0 0}
.cr-adds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-add{display:flex;gap:14px;padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);transition:border-color .2s,transform .2s}
.cr-add:hover{border-color:rgba(127,177,255,.45);transform:translateY(-2px)}
.cr-add .ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(43,122,255,.14);color:#7fb1ff}.cr-add .ic svg{width:20px;height:20px}
.cr-add b{display:block;color:#fff;font-family:var(--head);font-weight:650;margin-bottom:3px}
.cr-add small{color:#9aa3b3;font-size:.88rem;line-height:1.45}
.cr-actions{display:flex;justify-content:space-between;padding:4px 2px}
.cr-side{position:sticky;top:20px}
.cr-form{display:grid;gap:12px;text-align:center;background:rgba(12,15,22,.9);border-color:rgba(43,122,255,.35);box-shadow:0 30px 80px -30px rgba(43,122,255,.45)}
.cr-av{width:64px;height:64px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-family:var(--head);font-weight:800;font-size:1.4rem;letter-spacing:-.05em;box-shadow:0 0 0 6px rgba(43,122,255,.18),0 0 40px rgba(43,122,255,.5)}
.cr-av span{color:var(--blue-600)}
.cr-form h3{color:#fff;font-size:1.5rem}
.cr-form p{color:#9aa3b3;font-size:.93rem;line-height:1.55;margin-bottom:6px}
.cr-form input,.cr-form select{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:13px 14px;color:#fff;font:inherit;font-size:.95rem;outline:0;color-scheme:dark}
.cr-form input:focus,.cr-form select:focus{border-color:#2b7aff}
.cr-form input::placeholder{color:#6f7888}
.cr-f2{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.cr-f2 label small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#6f7888;margin:0 0 6px 2px}
.cr-form .btn{margin-top:6px;border-radius:99px}
.cr-note{font-size:.8rem!important;color:#6f7888!important;margin:0!important}
.cr-wa{font-size:.86rem;color:#4ade80;text-decoration:underline;text-underline-offset:3px}
.cfg-foot.done .cf-bars i{background:#2b7aff}
@media (max-width:1020px){.cr-grid{grid-template-columns:1fr}.cr-side{position:static}}
@media (max-width:700px){
  .cfg-top{padding-top:18px}.cfg-logo .txt{display:none}
  .cf-opts.two,.cr-shared,.cr-adds{grid-template-columns:1fr}
  .cf-opt{padding:14px 12px}.cf-n{width:34px;height:34px}
  .cf-nav{margin-top:26px}.cf-trust{justify-content:center;flex-wrap:wrap}
  .cr-card,.cr-form{padding:22px 18px}
  .cfg{padding-bottom:96px}
}
.cr-av{display:flex;align-items:center;justify-content:center}
/* teaser stappenplan op home */
.at-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.at-wrap>*{min-width:0}
.at-intro h2{margin:12px 0 16px}.at-intro>p{color:var(--muted);margin-bottom:22px;max-width:520px}
.at-card{position:relative;border-radius:24px;background:#07090e;padding:30px;color:#aeb7c7;overflow:hidden;box-shadow:0 40px 80px -40px rgba(14,17,22,.6)}
.at-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(127,177,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,177,255,.06) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent);mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent)}
.at-card::after{content:"";position:absolute;left:50%;top:-200px;width:600px;height:400px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,122,255,.25),transparent);pointer-events:none}
.at-card>*{position:relative;z-index:1}
.at-top{display:flex;justify-content:space-between;align-items:center}
.at-step{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8d96a8}
.at-card h3{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.04em;margin:14px 0 20px}
.at-opts{display:grid;gap:10px}
.at-opt{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);color:#fff;transition:border-color .2s,background .2s,transform .2s}
.at-opt:hover{border-color:#2b7aff;background:rgba(43,122,255,.1);transform:translateX(4px)}
.at-opt .cf-n{width:36px;height:36px;font-size:.74rem}
.at-opt:hover .cf-n{background:#2b7aff;color:#fff}
.at-opt .cf-t b{font-size:1rem}.at-opt .cf-t small{font-size:.85rem}
.at-go{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);color:#fff;transition:background .2s,border-color .2s}
.at-go svg{width:15px;height:15px}
.at-opt:hover .at-go{background:#2b7aff;border-color:#2b7aff}
.at-bars{display:flex;gap:5px;margin-top:22px}.at-bars i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}.at-bars i.on{background:#2b7aff;box-shadow:0 0 10px rgba(43,122,255,.6)}
@media (max-width:1020px){.at-wrap{grid-template-columns:1fr;gap:34px}.at-card{padding:22px 16px}}
.at-intro h2{font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.045em;line-height:1}
.cfg-ghost{color:rgba(255,255,255,.012)}
@keyframes cfIn{from{opacity:0;transform:translateY(14px)}}
@keyframes cfInL{from{opacity:0;transform:translateY(-14px)}}
@media (max-width:1020px){.cr-grid{display:flex;flex-direction:column;gap:20px}.cr-main{display:contents}.cr-pkg{order:1}.cr-side{order:2}.cr-main>*:not(.cr-pkg){order:3}}