:root{
  /* 60-30-10: primary=10%(accents), secondary=30%(supporting), neutral=60%(bg/text) */
  --c:#1e40af;--c-hover:#4466d5;--c-btn:#1e40af;--c-10:#1e40af1a;--c-20:#1e40af33;
  --cl:#dde2f3;--cd:#091334;
  --ca:#340ea6;--ca-muted:#1b008d;--ca-10:#340ea61a;
  --surface:#e9eeff;--surface-elevated:#ffffff;
  --ink:#0f172a;--dim:#374151;--bdr:#e2e8f0;
  --success:#059669;--danger:#dc2626;--warning:#f59e0b;
  --radius:14px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 16px rgba(0,0,0,.08);--shadow-lg:0 12px 40px rgba(0,0,0,.1);
  --ease:cubic-bezier(.4,0,.2,1);
  --gradient-hero:linear-gradient(135deg,#091334 0%,#1e40af 100%);
  --gradient-cta:linear-gradient(135deg,#1e40af,#340ea6);
  --gradient-accent:linear-gradient(135deg,#340ea6,#1e40af);
  --gradient-surface:linear-gradient(180deg,#e9eeff,#ffffff)
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#fff;color:#1e293b;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Playfair Display','Inter',system-ui,sans-serif;letter-spacing:-.02em}
a{text-decoration:none;color:inherit;transition:color .2s var(--ease)}
img{max-width:100%;display:block}
.w{max-width:1140px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* Topbar */
.topbar{background:var(--cl,#f1f5f9);border-bottom:1px solid var(--bdr,#e2e8f0);font-size:.76rem;color:var(--ink,#0f172a);position:relative;z-index:9910}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:6px 24px;gap:16px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px}
.topbar a{color:inherit;text-decoration:none;font-weight:600;transition:color .2s}
.topbar a:hover{color:var(--c)}
.topbar i{font-size:.68rem;color:var(--c);margin-right:4px}
.topbar span{font-weight:500}
@media(max-width:768px){.topbar-right{display:none}.topbar-inner{justify-content:center}.topbar-left{gap:14px;font-size:.72rem}}

/* Scroll animations */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Nav - glassmorphism */
nav{position:sticky;top:0;left:0;right:0;z-index:9900;background:rgba(255,255,255,.95);backdrop-filter:blur(16px) saturate(1.8);-webkit-backdrop-filter:blur(16px) saturate(1.8);border-bottom:1px solid rgba(226,232,240,.5);box-shadow:0 1px 8px rgba(0,0,0,.04);transition:background .3s,box-shadow .3s}
nav.scrolled{background:rgba(255,255,255,.96);box-shadow:0 2px 16px rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:12px}
.nav-logo img{height:52px;width:auto;max-width:220px;transition:height .2s}
.nav-links{display:flex!important;gap:6px;align-items:center}
.nav-links a{font-weight:600;font-size:.86rem;color:#334155;padding:6px 12px;border-radius:8px;transition:all .2s var(--ease)}
.nav-links a:hover{color:var(--c);background:var(--cl)}
.nav-links a.active{color:var(--c);background:var(--cl)}
.nav-cta{background:var(--c-btn);color:#fff!important;padding:9px 22px;border-radius:50px;font-weight:700;font-size:.84rem;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .25s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.nav-phone{font-size:1.1rem;color:var(--c);font-weight:800;padding:10px 14px;background:rgba(var(--c-rgb,0,0,0),.08);border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:6px}
.nav-phone:hover{background:rgba(var(--c-rgb,0,0,0),.15);transform:translateY(-2px)}
.hamburger{display:none;border:none;background:none;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s;position:relative;z-index:9901}
.hamburger:hover{background:#f1f5f9}
.hamburger span{display:block;width:20px;height:2px;background:#334155;margin:4px 0;border-radius:2px;transition:all .3s ease}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* Mega Menu Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown:hover .mega-menu{opacity:1;visibility:visible;transform:translateY(0)}
.mega-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);padding:20px;min-width:380px;opacity:0;visibility:hidden;transition:all .25s var(--ease);z-index:100;border:1px solid #e2e8f0}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:.84rem;font-weight:600;color:#334155;text-decoration:none;transition:all .15s}
.mega-item:hover{background:var(--cl,#f1f5f9);color:var(--c,#3b82f6)}
.mega-item i{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--cl,#f1f5f9);border-radius:8px;font-size:.8rem;color:var(--c,#3b82f6);flex-shrink:0}
.mega-all{display:block;text-align:center;padding:10px;margin-top:8px;border-top:1px solid #f1f5f9;font-size:.8rem;font-weight:700;color:var(--c,#3b82f6);text-decoration:none;border-radius:8px}
.mega-all:hover{background:var(--cl,#f1f5f9)}

/* Hero - premium impact */
.hero{position:relative;overflow:hidden;padding:clamp(6rem,12vw,10rem) 0 clamp(5rem,10vw,8rem);min-height:560px;display:flex;align-items:center;z-index:1}
/* Content NA hero moet erboven liggen */
.wave-divider{position:relative;z-index:2}
.itw-static-widgets,.sec,.sec-alt,.cta,footer{position:relative;z-index:2}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transition:transform 12s ease-out}
.hero:hover .hero-bg img{transform:scale(1.04)}
.hero-ov{position:absolute;inset:0;background:linear-gradient(160deg,#091334 0%,rgba(0,0,0,.35) 40%,#1e40af33 100%);opacity:.85}
.hero .w{position:relative;z-index:2;max-width:680px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:50px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.hero h1{font-size:clamp(2.4rem,5.5vw,3.8rem);font-weight:900;line-height:1.04;margin-bottom:16px;color:#fff;letter-spacing:-.03em}
.hero h1 em{font-style:normal}
.hero-sub{font-size:clamp(1rem,2.5vw,1.3rem);font-weight:600;color:rgba(255,255,255,.85);margin-bottom:8px}
.hero p{font-size:1.08rem;margin-bottom:32px;max-width:540px;color:rgba(255,255,255,.85);line-height:1.7}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* Buttons - premium feel */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:50px;font-weight:700;font-size:.86rem;transition:all .25s var(--ease);border:none;cursor:pointer;font-family:inherit;text-decoration:none;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 100%);pointer-events:none}
.btn-w{background:#fff;color:#0f172a!important;box-shadow:var(--shadow-md);font-weight:800}
.btn-w:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:#0f172a!important}
.btn-ol{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}
.btn-ol:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-c{background:var(--gradient-cta);color:#fff!important;box-shadow:0 4px 14px rgba(0,0,0,.15);font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn-c:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18);filter:brightness(1.05)}
/* ACCESSIBILITY: Button text MUST be visible (dark on light, light on dark) */
.btn-phone{background:#fff;color:#0f172a!important;box-shadow:0 4px 20px rgba(255,255,255,.3);font-weight:900;font-size:1.05rem;padding:15px 32px}
.btn-phone,.btn-phone *,.btn-phone i,.btn-phone span{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.btn-phone:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(255,255,255,.4);filter:brightness(1.1);color:#0f172a!important}
.btn:active{transform:translateY(0) scale(.98)}

/* Stats - premium */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:40px 0}
.stat{text-align:center;padding:24px 16px;border-radius:var(--radius);transition:all .3s var(--ease);background:#fff;border:1px solid #e2e8f0}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--c)}
.stat-v{font-size:2rem;font-weight:900;color:var(--c);letter-spacing:-.02em}
.stat-l{font-size:.74rem;color:#64748b;margin-top:6px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* Sections - strakke flow met overgangen */
.sec{padding:clamp(3.5rem,8vw,5rem) 0}
.sec-alt{background:var(--gradient-surface)}
.sec + .sec-alt,.sec-alt + .sec{border-top:none}
.sec-badge{display:inline-flex;align-items:center;gap:4px;background:var(--cl);color:var(--c);padding:6px 18px;border-radius:50px;font-size:.72rem;font-weight:700;letter-spacing:.06em;margin-bottom:12px;text-transform:uppercase}
.sec h2{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:900;margin-bottom:10px;color:#0f172a;letter-spacing:-.02em}
.sec-lead{color:#64748b;font-size:.95rem;max-width:600px;margin-bottom:32px;line-height:1.7}

/* Service cards - Envato-niveau */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);padding:28px;transition:all .3s var(--ease);position:relative}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);border-radius:var(--radius) var(--radius) 0 0;opacity:0;transition:opacity .3s}
.card:hover{border-color:var(--c);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card:hover::before{opacity:1}
.card-icon{width:52px;height:52px;border-radius:14px;background:var(--cl);color:var(--c);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px;transition:all .3s var(--ease)}
.card:hover .card-icon{background:var(--gradient-accent);color:#fff;transform:scale(1.05)}
.card h3{font-size:.98rem;font-weight:800;margin-bottom:6px;color:#0f172a}
.card p{font-size:.84rem;color:#64748b;line-height:1.55}
.card .sub-count{font-size:.72rem;color:var(--c);font-weight:700;margin-top:10px;display:inline-flex;align-items:center;gap:4px}

/* Steps - verbonden lijn */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);padding:32px 22px 22px;transition:all .3s var(--ease)}
.step:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:20px;width:32px;height:32px;border-radius:50%;background:var(--gradient-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.step h4{font-weight:800;font-size:.92rem;margin-bottom:5px;color:#0f172a}
.step p{font-size:.84rem;color:#64748b;line-height:1.55}

/* FAQ - accordeon */
.faq-item{margin-bottom:8px;border:1px solid #e2e8f0;border-radius:var(--radius);overflow:hidden;transition:all .2s var(--ease)}
.faq-item:hover{border-color:#cbd5e1}
.faq-q{font-weight:700;font-size:.88rem;color:#0f172a;padding:16px 18px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.faq-q::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.65rem;color:#94a3b8;transition:transform .3s}
.faq-item.open{border-color:var(--c);background:var(--c-10)}
.faq-item.open .faq-q{color:var(--c)}
.faq-item.open .faq-q::after{transform:rotate(180deg);color:var(--c)}
.faq-a{font-size:.84rem;color:#475569;padding:0 18px 16px;line-height:1.6;display:none}
.faq-item.open .faq-a{display:block}

/* Reviews - premium */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.review{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);padding:24px;transition:all .3s var(--ease)}
.review:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.review-stars{color:#f59e0b;font-size:.88rem;margin-bottom:10px;letter-spacing:2px}
.review-text{font-size:.88rem;line-height:1.65;margin-bottom:16px;color:#334155;position:relative;padding-left:16px;border-left:3px solid var(--cl)}
.review-author{display:flex;align-items:center;gap:12px}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--cl);color:var(--c);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.88rem}
.review-name{font-weight:700;font-size:.86rem;color:#0f172a}
.review-role{font-size:.74rem;color:#94a3b8}

/* CTA - premium gradient */
.cta{background:var(--gradient-hero);color:#fff;padding:clamp(3.5rem,8vw,5rem) 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(255,255,255,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.08) 0%,transparent 60%)}
.cta .w{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:12px;font-size:clamp(1.6rem,3.5vw,2.2rem)}
.cta p{color:rgba(255,255,255,.85);margin-bottom:28px;font-size:1.05rem;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* CTA buttons: witte knop = donkere tekst, outline knop = witte tekst */
.cta .btn-w{background:#fff;color:#0f172a!important;font-weight:800}
.cta .btn-w:hover{background:#f8fafc;color:#0f172a!important}
.cta .btn-ol{border-color:rgba(255,255,255,.4);color:#fff!important}
.cta .btn-ol:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff!important}
/* Hero buttons: zelfde regels als CTA (donkere achtergrond) */
.hero .btn-w{background:#fff;color:#0f172a!important;font-weight:800}
.hero .btn-w:hover{background:#f8fafc;color:#0f172a!important;transform:translateY(-3px)}
.hero .btn-ol{color:#fff!important}
/* Contrast safety net: alle .btn in donkere secties */
.cta .btn,.hero .btn{min-height:48px}
.sec .btn-c{color:#fff!important}

/* Sub diensten list */
.sub-list{list-style:none;padding:0;margin-top:8px}
.sub-list li{padding:4px 0;font-size:.82rem;color:#475569;padding-left:16px;position:relative;transition:color .2s}
.sub-list li:hover{color:#0f172a}
.sub-list li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--c);opacity:.4}

/* Footer - professioneel donker met smooth overgang */
footer{background:#0f172a;color:#e2e8f0;padding:60px 0 0;margin-top:0}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:32px}
.f-brand img{height:46px;width:auto;max-width:200px;margin-bottom:12px}
.f-desc{font-size:.84rem;color:#94a3b8;line-height:1.6;margin-top:4px}
footer h4{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:12px}
footer ul{list-style:none;padding:0}
footer li{margin-bottom:8px}
footer li,footer li a{font-size:.84rem;color:#cbd5e1;transition:color .2s}
footer li a:hover{color:#fff}
footer li i{color:var(--c);width:18px;margin-right:6px;font-size:.8rem}
.f-social{display:flex;gap:10px;margin-top:16px}
.f-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);color:#cbd5e1;display:flex;align-items:center;justify-content:center;font-size:.88rem;transition:all .2s var(--ease);border:1px solid rgba(255,255,255,.08)}
.f-social a:hover{background:var(--gradient-accent);color:#fff;border-color:var(--ca);transform:translateY(-2px)}
.f-copy{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;font-size:.76rem;text-align:center;color:#64748b;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.f-copy a{color:var(--c);font-weight:600;transition:color .2s}
.f-copy a:hover{color:#fff}

/* Contact form - premium */
.form{max-width:560px}
.form label{display:block;font-size:.82rem;font-weight:600;color:#334155;margin-bottom:5px;margin-top:14px}
.form input,.form textarea,.form select{width:100%;padding:12px 16px;border:1px solid #e2e8f0;border-radius:10px;font-size:.88rem;font-family:inherit;color:#1e293b;background:#fff;transition:all .2s var(--ease)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.form textarea{min-height:120px;resize:vertical}
.form button{margin-top:18px;width:100%}

/* - Scroll reveal - */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.card,.step,.review,.stat,.faq-item{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.card.visible,.step.visible,.review.visible,.stat.visible,.faq-item.visible{opacity:1;transform:translateY(0)}
/* Stagger delays */
.cards .card:nth-child(2),.steps .step:nth-child(2),.reviews .review:nth-child(2){transition-delay:.08s}
.cards .card:nth-child(3),.steps .step:nth-child(3),.reviews .review:nth-child(3){transition-delay:.16s}
.cards .card:nth-child(4),.steps .step:nth-child(4){transition-delay:.24s}
.cards .card:nth-child(5){transition-delay:.32s}
.cards .card:nth-child(6){transition-delay:.4s}

/* - Premium features - */

/* Gradient text op titels */
.sec h2 em,.hero h1 em{font-style:normal;background:linear-gradient(135deg,#fff 0%,#340ea6 50%,#fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:gradientShift 4s ease infinite}
@keyframes gradientShift{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}}

/* Section divider (wave) */
/* Wave dividers */
.wave-divider{width:100%;overflow:hidden;line-height:0;margin-top:-1px}
.wave-divider svg{display:block;width:100%;height:48px}
.wave-divider-flip{transform:rotate(180deg)}

/* Dark section variant */
.sec-dark{background:var(--gradient-hero);color:#fff;position:relative;overflow:hidden}
.sec-dark::before{content:'';position:absolute;top:-40%;right:-15%;width:350px;height:350px;border-radius:50%;background:var(--ca);opacity:.06;filter:blur(80px)}
.sec-dark h2{color:#fff}
.sec-dark .sec-badge{background:rgba(255,255,255,.1);color:#fff}
.sec-dark p,.sec-dark .sec-lead{color:rgba(255,255,255,.8)}

/* Accent border on hover */
.card{position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-accent);opacity:0;transition:opacity .3s}
.card:hover::before{opacity:1}

/* Review avatar gradient */
.review-avatar{background:var(--gradient-accent)!important;color:#fff!important}

/* Stat value accent color */
.stat-v{color:var(--cd)}

/* Badge pill met accent */
.badge-accent{background:var(--ca);color:#fff;padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:700}

/* Scroll-to-top button */
.scroll-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--gradient-cta);color:#fff;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1rem;box-shadow:var(--shadow-md);z-index:90;transition:all .3s var(--ease)}
.scroll-top:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.scroll-top.visible{display:flex}

/* Link accent hover */
a:not(.btn):not(.nav-cta):not(.nav-links a):hover{color:var(--ca)}

/* Image hover zoom */
.img-zoom{overflow:hidden;border-radius:var(--radius)}
.img-zoom img{transition:transform .5s var(--ease)}
.img-zoom:hover img{transform:scale(1.06)}

/* Trust badges - PROMINENT */
.trust-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:32px 0;opacity:1}
.trust-item{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:700;color:#111827;background:#fff;padding:14px 20px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .3s;border:1px solid rgba(0,0,0,.04)}
.trust-item i{color:var(--c);font-size:1.3rem}

/* Smooth entrance keyframes */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.animate-in{animation:fadeInUp .6s var(--ease) both}
.hero .w{animation:fadeInUp .8s var(--ease) both}
.hero-badge{animation:fadeIn 1s var(--ease) .2s both}
.hero-btns{animation:fadeInUp .8s var(--ease) .4s both}

/* Prefers reduced motion */
@media(prefers-reduced-motion:reduce){
  .animate-in,.hero .w,.hero-badge,.hero-btns{animation:none!important}
  .card,.btn,.nav-cta,.scroll-top{transition:none!important}
  .img-zoom:hover img{transform:none}
}

/* Nav scroll versterkt */
nav.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.08);border-bottom-color:rgba(0,0,0,.06)}

/* Focus outline accent */
:focus-visible{outline:2px solid var(--ca);outline-offset:2px}

/* Selection color */
::selection{background:var(--cl);color:var(--c)}

/* Premium hover op bestaande elementen (via CSS, geen HTML wijziging) */
.card{position:relative;overflow:hidden}
.card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-100%);transition:transform .7s}
.card:hover::after{transform:translateX(100%)}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--c)}
.faq-item:hover{border-color:var(--ca)}
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--c);transition:width .3s,left .3s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;left:0}
.stat:hover .stat-v{color:var(--c);transition:color .3s}
.trust-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.12);color:var(--c)}
.hero-btns .btn{animation:fadeInUp .6s var(--ease) both}
.hero-btns .btn:nth-child(2){animation-delay:.15s}

/* WhatsApp floating button */
.wa-float{position:fixed;bottom:24px;left:24px;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 4px 16px rgba(37,211,102,.4);z-index:80;transition:all .3s var(--ease);text-decoration:none}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(37,211,102,.5)}
@media print{.wa-float{display:none!important}}

/* Responsive - 4 breakpoints */
@media(max-width:1200px){.w{max-width:960px}}
@media(max-width:900px){
  .f-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .hero{min-height:400px;padding:clamp(3rem,8vw,5rem) 0}
  .two-col{grid-template-columns:1fr!important}
  .two-col aside{position:static!important;margin-top:24px}
  aside[style*="sticky"]{position:static!important}
  .blog-grid{grid-template-columns:repeat(2,1fr)!important}
  .blog-featured{grid-template-columns:1fr!important}
}
/* Nav overlay + close - verborgen op desktop */
.nav-overlay{display:none}
.nav-close{display:none}
@media(max-width:1024px){
  /* FIX: backdrop-filter creates containing block - breaks position:fixed children */
  nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff}
  /* Extra hardening: op mobile standaard volledig verborgen (desktopnav mag nooit blijven staan). */
  .nav-links{position:fixed!important;top:0;right:-100%!important;width:min(320px,85vw);height:100vh;height:100dvh;background:#fff;flex-direction:column;padding:24px;box-shadow:-4px 0 24px rgba(0,0,0,.15);transition:right .3s var(--ease);gap:0;z-index:99999;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none!important}
  .nav-links.open{right:0!important;display:flex!important}
  .nav-links a{padding:14px 16px;border-radius:10px;font-size:1rem;width:100%;border-bottom:1px solid #f1f5f9;font-weight:600;display:flex;align-items:center;gap:8px}
  .nav-links a:last-of-type{border-bottom:none}
  .nav-links a:hover,.nav-links a.active{background:var(--cl);color:var(--c)}
  .nav-links .nav-cta{margin-top:12px;border-bottom:none;justify-content:center}
  .nav-links .nav-phone{color:var(--c);border-bottom:none;margin-top:8px}
  .nav-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.1rem;color:#334155;cursor:pointer;margin-bottom:16px;margin-left:auto;flex-shrink:0}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:99998;opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-overlay.open{opacity:1;pointer-events:auto}
  .hamburger{display:flex;flex-direction:column;z-index:9901;padding:8px;border-radius:8px;transition:background .2s}
  .hamburger:active{background:rgba(0,0,0,.05)}
  .mega-menu{display:none!important}
  .nav-logo img{height:42px}
  .f-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .hero{min-height:320px;padding:40px 0}
  .hero h1{font-size:clamp(1.6rem,6.5vw,2.2rem)}
  .hero p{font-size:.92rem}
  .hero-btns,.cta-btns{flex-direction:column;align-items:stretch}
  .btn{justify-content:center;text-align:center;padding:14px 20px;font-size:.9rem;min-height:48px}
  .steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .sec{padding:40px 0}
  .sec h2{font-size:clamp(1.3rem,5vw,1.8rem)}
  .w{padding:0 16px}
  .card{padding:20px}
  .cta{padding:40px 0}
  /* Alle 2-kolom layouts - 1 kolom op mobiel */
  .two-col{grid-template-columns:1fr!important}
  .blog-grid{grid-template-columns:1fr!important}
  .two-col aside{position:static!important;margin-top:20px}
  /* Sidebar sticky uitschakelen op mobiel */
  aside[style*="sticky"]{position:static!important}
  /* Contact form full width */
  .form{max-width:100%}
  /* Reviews */
  .reviews{grid-template-columns:1fr}
  /* USP grid */
  .usp-grid{grid-template-columns:1fr!important}
}
@media(max-width:400px){
  .nav-logo img{height:34px}
  .hero{padding:32px 0;min-height:280px}
  .hero h1{font-size:1.5rem}
  .sec{padding:32px 0}
  .w{padding:0 12px}
  .stat-v{font-size:1.4rem}
  .card{padding:16px;border-radius:12px}
  .step{padding:24px 16px 16px}
  .review{padding:16px}
  .f-grid{gap:20px}
  footer{padding:32px 0 0}
}

@media print{
  .hero-ov,.hero-bg,.scroll-top,.nav-overlay,.hamburger,.wave-divider{display:none!important}
  nav{position:static;box-shadow:none;border:none}
  .hero{min-height:auto;padding:20px 0;background:none;color:#0f172a}
  .hero h1,.hero p,.hero-badge{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
  .btn{border:1px solid #0f172a;box-shadow:none}
  .cta{background:none;color:#0f172a;border-top:2px solid #e2e8f0}
  .cta h2,.cta p{color:#0f172a!important}
  footer{background:#fff;color:#0f172a;border-top:2px solid #e2e8f0}
  footer h4{color:#0f172a}
  footer li,footer li a{color:#334155}
  body{font-size:11pt}
}