*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FAFCFB;font-family:Inter,system-ui,sans-serif;color:#0D2B2E;font-size:17px;line-height:1.6}
a{color:#0B7F6E}a:hover{color:#0D2B2E}
img{max-width:100%}
:focus-visible{outline:3px solid #2DD4B4;outline-offset:2px}

/* Header */
.site-header{background:#24403C;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:50}
.header-inner{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand:hover{color:#fff}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:Montserrat,Inter,sans-serif;font-weight:900;font-size:25px;letter-spacing:-.01em;text-transform:uppercase;line-height:.9}
.brand-tag{font-size:9.5px;font-weight:600;letter-spacing:.32em;color:#2DD4B4;margin-top:6px}
.main-nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.main-nav a{color:#fff;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.main-nav a:hover{color:#2DD4B4}
.main-nav a[aria-current="page"]{border-bottom-color:#2DD4B4}
.main-nav a.nav-cta{background:#2DD4B4;color:#0D2B2E;padding:12px 20px;border-radius:999px;font-weight:600;border:none}
.main-nav a.nav-cta:hover{background:#7FF0D8;color:#0D2B2E}
.menu-btn{display:none;font:inherit;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:12px;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:1080px){
  .menu-btn{display:inline-flex}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#24403C;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .main-nav a.nav-cta{margin-top:14px;text-align:center}
}

/* Bouwstenen */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:56px 24px 96px}
.center{text-align:center}
.eyebrow{margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0B7F6E}
.eyebrow.on-dark,.dark .eyebrow{color:#2DD4B4}
.display{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:clamp(34px,4.6vw,54px);line-height:1.05;letter-spacing:-.02em;margin:0 0 20px}
.h2{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.015em;margin:0 0 20px}
.lead{font-size:19px;color:#3F5A5C}
.dark .lead{color:#C9D8D4}
.muted{color:#3F5A5C}
.small{font-size:14px;color:#3F5A5C}
.dark{background:#24403C;color:#fff}
.page-hero{padding:88px 0 80px}
.section{padding:96px 0}
.row-gap{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:600;font-size:17px;border-radius:999px;padding:16px 28px;text-decoration:none;cursor:pointer;border:none}
.btn-lg{font-size:18px;padding:18px 34px}
.btn-primary{background:#0B7F6E;color:#fff}
.btn-primary:hover{background:#0D2B2E;color:#fff}
.dark .btn-primary{background:#2DD4B4;color:#0D2B2E}
.dark .btn-primary:hover{background:#7FF0D8;color:#0D2B2E}
.btn-ghost{background:transparent;border:1.5px solid #C9DBD7;color:#0D2B2E;padding:12px 22px}
.dark .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-link{font:inherit;font-weight:600;background:none;border:none;color:#0B7F6E;text-decoration:underline;cursor:pointer;padding:12px 8px}
.btn[disabled]{opacity:.6;cursor:wait}

.card{background:#fff;border:1px solid #E1ECE9;border-radius:24px;color:#0D2B2E}
.card-pad{padding:clamp(24px,5vw,40px)}
.shadow{box-shadow:0 20px 50px rgba(13,43,46,.06)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}

/* Formulieren */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.form-grid label,.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
input[type=text],input[type=email],input[type=tel],textarea,select{font:inherit;font-weight:400;font-size:16px;padding:14px 16px;border-radius:12px;border:1.5px solid #C9DBD7;background:#FAFCFB;color:#0D2B2E;width:100%}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus{border-color:#0B7F6E;outline:none;box-shadow:0 0 0 3px rgba(45,212,180,.3)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;font-weight:500}
.check input{width:20px;height:20px;margin-top:2px;accent-color:#0B7F6E}
.form-msg{display:none;margin:16px 0 0;padding:12px 16px;border-radius:12px;background:#FFF6E8;color:#5C3A10;font-size:15px}
.hp{position:absolute;left:-9999px}
.thanks{text-align:center;padding:24px 0}
.thanks h3{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:30px;margin:18px 0 8px}
.thanks p{color:#3F5A5C;margin:0}
.thanks-icon{width:64px;height:64px;border-radius:50%;background:#12B39A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:30px;font-weight:700}

/* Groeiscan */
.scan-page{background:#F2FAF8;min-height:70vh}
.scan-meta{display:flex;justify-content:space-between;margin-bottom:12px;font-size:14px;font-weight:600;color:#3F5A5C}
.progress{height:8px;border-radius:999px;background:#D7EAE5;overflow:hidden;margin-bottom:36px}
.progress div{height:8px;background:#12B39A;border-radius:999px;transition:width .3s}
.h-q{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,34px);line-height:1.2;margin:0 0 10px}
.h-form{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:28px;margin:0 0 8px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{font:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 20px;border-radius:16px;border:1.5px solid #D7EAE5;background:#fff;color:#0D2B2E;font-weight:500}
.opt:hover{border-color:#12B39A}
.opt.on{border:2px solid #0B7F6E;background:#E3F5F0}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid #0B7F6E;display:flex;align-items:center;justify-content:center;flex:none}
.radio span{width:10px;height:10px;border-radius:50%}
.opt.on .radio span{background:#0B7F6E}
.result{background:#24403C;color:#fff;border-radius:28px;padding:clamp(24px,5vw,44px);display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.ring{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.ring>div{width:118px;height:118px;border-radius:50%;background:#24403C;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring span{font-family:Montserrat,Inter,sans-serif;font-size:44px;font-weight:700;line-height:1}
.ring small{font-size:13px;color:#C9D8D4}
.tips{display:flex;flex-direction:column;gap:10px}
.tip{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:#FFF6E8}
.tip>span:first-child{color:#8A4B00;font-weight:700}

/* Contact */
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-item{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;min-height:44px}
.contact-item:hover{background:rgba(255,255,255,.1);color:#fff}
.contact-item svg{flex:none;color:#2DD4B4}

/* Privacy */
.prose h2{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:26px;margin:40px 0 10px}
.prose p,.prose li{color:#3F5A5C}

/* WhatsApp zwevend */
.wa-wrap{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-float{position:relative;width:62px;height:62px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s;animation:waPulse 2.6s ease-out 3.5s 3}
.wa-float:hover{transform:scale(1.08)}
.wa-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#FF5A3C;border:2px solid #fff}
.wa-bubble{position:relative;max-width:240px;background:#fff;color:#0D2B2E;border-radius:16px 16px 4px 16px;padding:14px 34px 14px 16px;font-size:14.5px;line-height:1.45;box-shadow:0 10px 30px rgba(13,43,46,.18);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-close{position:absolute;top:4px;right:4px;width:28px;height:28px;border:none;background:none;font-size:20px;line-height:1;color:#3F5A5C;cursor:pointer;border-radius:8px}
.wa-close:hover{background:#F2FAF8}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 10px 30px rgba(0,0,0,.25)}100%{box-shadow:0 0 0 22px rgba(37,211,102,0),0 10px 30px rgba(0,0,0,.25)}}
@media (max-width:600px){.wa-wrap{right:16px;bottom:16px}.wa-float{width:56px;height:56px}}

/* Intro-animatie bij binnenkomst */
#intro{position:fixed;inset:0;z-index:200;background:#24403C;display:flex;align-items:center;justify-content:center;animation:introOut .6s ease 2.3s forwards}
html.intro-seen #intro{display:none}
.intro-logo{display:flex;align-items:center;gap:18px}
.intro-logo svg{width:110px;height:110px;overflow:visible}
.intro-ring{stroke-dasharray:0 125.66;animation:ringDraw .9s cubic-bezier(.6,0,.2,1) .15s forwards}
.intro-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:barUp .45s cubic-bezier(.3,1.4,.5,1) forwards}
.intro-bar.b1{animation-delay:.75s}.intro-bar.b2{animation-delay:.87s}.intro-bar.b3{animation-delay:.99s}
.intro-arrow{opacity:0;transform:translate(-14px,14px);animation:arrowShoot .5s cubic-bezier(.2,1.3,.4,1) 1.15s forwards}
.intro-text{display:flex;flex-direction:column;line-height:1;overflow:hidden}
.intro-text span{display:block;opacity:0;transform:translateY(60%);animation:textUp .6s cubic-bezier(.2,.9,.3,1) forwards}
.intro-name{font-family:Montserrat,Inter,sans-serif;font-weight:900;font-size:clamp(40px,8vw,72px);letter-spacing:-.01em;text-transform:uppercase;color:#fff;animation-delay:1.25s!important}
.intro-tag{font-size:clamp(10px,1.6vw,14px);font-weight:600;letter-spacing:.34em;color:#2DD4B4;margin-top:10px;animation-delay:1.45s!important}
@keyframes ringDraw{to{stroke-dasharray:100 25.66}}
@keyframes barUp{to{transform:scaleY(1)}}
@keyframes arrowShoot{to{opacity:1;transform:translate(0,0)}}
@keyframes textUp{to{opacity:1;transform:translateY(0)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){#intro{display:none}}