:root{--bg:#020617;--bg2:#0f172a;--bg3:#111827;--line:rgba(148,163,184,.16);--tx:#f5f5f5;--mut:#94a3b8;--g:#22c55e;--g2:#16a34a;--glow:rgba(34,197,94,.35);--r:20px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:400 17px/1.65 Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Manrope,Inter,sans-serif;color:#fff;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
section{position:relative;padding:clamp(64px,9vw,120px) 0}
.alt{background:var(--bg3)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--g);margin-bottom:22px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--g);box-shadow:0 0 12px var(--g)}
h2{font-size:clamp(32px,4.6vw,56px);font-weight:800;max-width:20ch}
h2 em,h1 em{font-style:normal;background:linear-gradient(100deg,#22c55e,#86efac,#22c55e);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200% center}}
.lead{color:var(--mut);max-width:64ch;margin-top:22px;font-size:18px}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;font:700 15px/1 Manrope,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.btn--g{background:var(--g);color:#04130a;box-shadow:0 10px 40px -10px var(--glow)}
.btn--g:hover{background:#4ade80;box-shadow:0 14px 50px -8px var(--glow)}
.btn--o{border-color:rgba(34,197,94,.5);color:var(--g);background:transparent}
.btn--o:hover{background:rgba(34,197,94,.1)}
.btn:hover{transform:translateY(-2px)}
.btn:after{content:"\2192";transition:transform .25s}
.btn:hover:after{transform:translateX(5px)}
button.btn{font-family:Manrope,sans-serif}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
#bar{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:linear-gradient(90deg,var(--g),#86efac);z-index:100;box-shadow:0 0 14px var(--g)}
nav.top{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
nav.top.s{background:rgba(2,6,23,.78);backdrop-filter:blur(16px);border-color:var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{display:flex;align-items:center}
.logo img{width:auto;height:46px}
footer .logo img{height:54px}
.links{display:flex;gap:34px;font:600 14px Manrope,sans-serif}
.links a{position:relative;color:#cbd5e1;padding:6px 0}
.links a:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--g);transition:width .3s}
.links a:hover,.links a.on{color:#fff}.links a:hover:after,.links a.on:after{width:100%}
.nav-cta{padding:12px 22px}
.burger{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
/* page hero */
.phero{padding:170px 0 90px;overflow:hidden;background:radial-gradient(60% 80% at 85% 0%,rgba(34,197,94,.16),transparent 60%),radial-gradient(50% 70% at 0% 10%,rgba(29,78,216,.18),transparent 60%)}
.phero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(148,163,184,.18) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none}
.phero .wrap{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:center}
/* hero zonder kaart: zelfde breedte en linkerkant als de rest van de pagina; alleen de tekst zelf blijft smal */
.phero.solo .wrap{grid-template-columns:1fr}
.phero.solo .wrap>div{max-width:980px}
.phero h1{font-size:clamp(38px,5.6vw,72px);font-weight:800;margin:6px 0 0}
.checks{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:30px;color:#cbd5e1;font-size:15px}
.checks li:before{content:"\2713";color:var(--g);font-weight:800;margin-right:9px}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px);padding:32px}
.glass h3{font-size:22px;margin-bottom:14px}
.glass li{padding:11px 0;border-top:1px solid var(--line);font-weight:500;font-size:15px;display:flex;justify-content:space-between}
.glass li:after{content:"\2197";color:var(--g)}
.glass p{color:var(--mut);font-size:14.5px;margin-top:16px}
/* grids + cards */
.grid{display:grid;gap:22px;margin-top:52px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{--x:50%;--y:50%;position:relative;padding:32px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);overflow:hidden;transition:transform .35s,border-color .35s}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--x) var(--y),rgba(34,197,94,.16),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:rgba(34,197,94,.45)}
.card:hover:before{opacity:1}
.card>*{position:relative}
.card .k{font:800 12px Manrope,sans-serif;letter-spacing:.16em;color:var(--g);text-transform:uppercase;margin-bottom:14px;display:block}
.card h3{font-size:22px;margin-bottom:12px}
.card p{color:var(--mut);font-size:15.5px}
.card ul{margin:18px 0 24px}
.card li{padding:7px 0;font-size:15px;color:#cbd5e1;display:flex;gap:10px}
.card li:before{content:"\2713";color:var(--g);font-weight:800}
.card .btn{margin-top:auto}
.card.col{display:flex;flex-direction:column}
.num{font:800 54px Manrope,sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(34,197,94,.55);line-height:1;margin-bottom:18px;display:block}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.ticks{margin:24px 0 8px}
.ticks li{padding:9px 0;color:#cbd5e1;display:flex;gap:12px}
.ticks li:before{content:"\2713";color:var(--g);font-weight:800}
.band{background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(29,78,216,.14));border:1px solid rgba(34,197,94,.3);border-radius:28px;padding:clamp(36px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.band h3{font-size:clamp(26px,3.4vw,40px);max-width:24ch;margin:0 auto 16px}
.band p{color:#cbd5e1;max-width:60ch;margin:0 auto 30px}
.band .eyebrow{justify-content:center}
.stat{font:800 clamp(54px,7vw,88px) Manrope,sans-serif;color:var(--g);line-height:1}
.stat small{font-size:.4em;color:#fff;margin-left:6px}
/* steps */
.steps{position:relative;display:grid;gap:22px;grid-template-columns:repeat(4,1fr);margin-top:56px}
.steps.s5{grid-template-columns:repeat(5,1fr)}.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps:before{content:"";position:absolute;top:34px;left:4%;right:4%;height:2px;background:linear-gradient(90deg,var(--g),transparent);opacity:.4}
.step .dot{width:68px;height:68px;border-radius:50%;background:var(--bg);border:2px solid var(--g);color:var(--g);font:800 22px/64px Manrope;text-align:center;position:relative;box-shadow:0 0 30px -6px var(--glow);margin-bottom:22px}
.step h3{font-size:21px;margin-bottom:10px}.step p{color:var(--mut);font-size:15px}
.step ul{margin-top:12px}.step li{font-size:13.5px;color:#cbd5e1;padding:3px 0}.step li:before{content:"\2022";color:var(--g);margin-right:8px}
/* pricing */
.price{display:flex;flex-direction:column}
.price .tag{font:700 12px Manrope;letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
.price h3{font-size:34px;margin:8px 0}
.price .p{font:800 38px Manrope;color:#fff;margin:6px 0 4px}
.price .p small{display:block;font:500 13px Inter;color:var(--mut)}
.price .d{font-size:15px;margin:14px 0 22px;color:var(--mut)}
.price ul{margin:0 0 30px;flex:1}
.price li{padding:8px 0;font-size:15px;color:#cbd5e1;border-top:1px solid var(--line);display:block}
.price li:before{content:"+";color:var(--g);margin-right:10px;font-weight:800}
.price.feat{border-color:var(--g);background:linear-gradient(180deg,rgba(34,197,94,.12),var(--bg2) 45%);box-shadow:0 30px 80px -30px var(--glow);transform:translateY(-14px)}
.price.feat:hover{transform:translateY(-20px)}
.pop{position:absolute;top:18px;right:18px;padding:6px 14px;border-radius:999px;background:var(--g);color:#04130a;font:800 11px Manrope;letter-spacing:.1em;text-transform:uppercase}
.beheer{margin-top:44px;padding:34px;border-radius:var(--r);border:1px dashed rgba(34,197,94,.45);display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.beheer h3{font-size:24px;margin-bottom:10px}.beheer p{color:var(--mut);font-size:15px}
.extras{font-size:14.5px;color:#cbd5e1}.extras b{color:var(--g)}
.note{margin-top:22px;color:#64748b;font-size:13.5px}
/* faq */
.faq{max-width:900px;margin-top:48px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--bg2);margin-bottom:12px;transition:border-color .3s}
.faq details[open]{border-color:rgba(34,197,94,.5)}
.faq summary{cursor:pointer;list-style:none;padding:22px 26px;font:700 18px Manrope,sans-serif;color:#fff;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:28px;color:var(--g);transition:transform .3s;line-height:1}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 26px 24px;color:var(--mut);font-size:16px}
/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1/-1}
.form label{display:block;font:700 13px Manrope,sans-serif;letter-spacing:.04em;color:#cbd5e1;margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;padding:15px 18px;border-radius:14px;background:var(--bg);border:1px solid var(--line);color:#fff;font:400 16px Inter,sans-serif;transition:border-color .25s,box-shadow .25s}
.form textarea{min-height:140px;resize:vertical}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#22c55e 50%),linear-gradient(135deg,#22c55e 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--g);box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.form .hp{position:absolute;left:-9999px;opacity:0}
.fbox{padding:clamp(26px,4vw,44px);border-radius:24px;background:var(--bg2);border:1px solid var(--line)}
.ok{padding:18px 22px;border-radius:14px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.5);color:#bbf7d0;margin-bottom:24px;font-weight:600}
.contact-line{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line)}
.contact-line:first-child{border-top:0}
.contact-line b{display:block;font:700 18px Manrope;color:#fff}
.contact-line span{color:var(--mut);font-size:15px}
.contact-line a{color:var(--g)}
/* footer */
footer{border-top:1px solid var(--line);padding:70px 0 36px;background:#01040f}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
footer h4{font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;color:#cbd5e1}
footer li,footer p{color:var(--mut);font-size:15px;margin-bottom:9px}
footer a:hover{color:var(--g)}
.fb{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);color:#64748b;font-size:13.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.wa{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform .25s}
.wa:hover{transform:scale(1.1) rotate(-6deg)}
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
#ld{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;justify-content:center;align-items:center;transition:opacity .6s .2s,visibility .8s}
#ld img{height:70px;width:auto;animation:pulse2 1.2s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.06);opacity:.8}}
#ld.x{opacity:0;visibility:hidden}
@media(max-width:1020px){.phero .wrap,.split,.beheer{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.steps,.steps.s5,.steps.s3{grid-template-columns:repeat(2,1fr)}.steps:before{display:none}.fg{grid-template-columns:1fr 1fr}.price.feat{transform:none}.glass{display:none}}
@media(max-width:760px){.links,.nav-cta{display:none}.burger{display:block}.links.o{display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;padding:24px;background:rgba(2,6,23,.97);border-bottom:1px solid var(--line)}.g4,.g2,.steps,.steps.s5,.steps.s3,.fg,.form{grid-template-columns:1fr}.phero{padding-top:130px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}