/* Homepage redesign. Scoped to leave the demo websites and subpages intact. */
.modern-home{--font-heading: 'Source Sans 3',sans-serif;--font-accent:'Source Sans 3',sans-serif;--accent:#087f78;--accent-dark:#066b65;background:#f7fafc;color:#172d43;font-weight:400}
.modern-home #loader-wrapper{display:none}.modern-home .parallax-bg,.modern-home .parallax-overlay{display:none}.modern-home [hidden]{display:none!important}
.modern-home .promo-banner{position:relative;background:#a4efdf;color:#0a2926;min-height:38px;padding:9px 42px}.modern-home .promo-text{color:#0a2926;font-size:13px;letter-spacing:0;font-weight:600}.modern-home .promo-cta{color:#0a2926;border-color:#367b70;letter-spacing:0;border-radius:30px}.modern-home .promo-close{color:#0a2926}.modern-home .promo-banner.hidden{display:none}
.modern-home #templatemo-nav{position:sticky;top:0;background:rgba(255,255,255,.94);border-bottom:1px solid #203c5614;backdrop-filter:blur(20px)}
.modern-home .nav-container{max-width:1240px;padding:0 32px;margin:auto;height:96px}.modern-home .nav-logo{height:90px;margin:0 auto 0 0}.modern-home .nav-logo-img{height:90px;width:auto;object-fit:contain}.modern-home .nav-links{gap:28px}.modern-home .nav-links a{font-size:13px;letter-spacing:.7px;font-weight:600}.modern-home .nav-links li:last-child a{background:#203c560a;border:1px solid #203c562b;padding:10px 18px;border-radius:30px}
.modern-home .parallax-section{min-height:0;overflow:hidden;scroll-margin-top:100px;border-bottom:1px solid #203c5610}.modern-home .section-content{max-width:1200px;width:100%;padding:100px 32px;margin:auto;opacity:1;transform:none;text-align:left}.modern-home .section-title{font-size:clamp(34px,4vw,52px);line-height:1.12;font-weight:650;letter-spacing:-1.8px;text-transform:none;margin-bottom:20px}.modern-home .section-subtitle{font-size:14px;letter-spacing:1.8px;color:#526579;line-height:1.8;margin-bottom:32px}.modern-home .accent{color:var(--accent);font-style:normal}
.modern-home #home{background:radial-gradient(ellipse at 85% 30%,#bce8e680,transparent 55%),radial-gradient(ellipse at 0% 100%,#d3e6fa70,transparent 50%),#f7fafc}.modern-home .modern-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding-top:88px;padding-bottom:112px}.modern-home .hero-title{font-size:clamp(48px,5.4vw,76px);letter-spacing:-3.5px;line-height:1.04;margin:24px 0;text-shadow:none}.modern-home .hero-title span{color:var(--accent)}.eyebrow{font-size:11px;letter-spacing:2px;color:#526579;font-weight:700;display:flex;gap:10px;align-items:center}.eyebrow>span{width:7px;height:7px;border-radius:50%;background:#087f78;box-shadow:0 0 14px #087f7880}.hero-description{font-size:18px;line-height:1.8;color:#526579;max-width:490px}.hero-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:32px 0 22px}.modern-home .offer-cta{background:var(--accent);color:#0c2927;border:0;border-radius:10px;font-size:15px;font-weight:700;letter-spacing:0;padding:16px 23px;display:inline-flex;gap:20px;align-items:center;justify-content:center;box-shadow:none;transition:transform .2s,background .2s}.modern-home .offer-cta:hover{background:#b2f5e7;transform:translateY(-2px)}.secondary-link{font-size:14px;border-bottom:1px solid #526174;padding-bottom:4px}.hero-deal{font-size:12px;color:#526579;line-height:1.9}.hero-deal span{padding:0 7px;color:var(--accent)}
.hero-showcase{position:relative;background:#ffffff;border:1px solid #203c562b;border-radius:18px;box-shadow:0 30px 100px #0006;transform:rotate(2deg)}.showcase-top{display:flex;justify-content:space-between;padding:17px;font-size:11px;color:#526579}.window-dots{letter-spacing:3px;color:#5e788c}.showcase-image{display:block;margin:0 10px;overflow:hidden;border-radius:8px}.showcase-image img{width:100%;height:auto;transition:transform .4s}.showcase-image:hover img{transform:scale(1.025)}.showcase-bottom{display:flex;align-items:center;justify-content:space-between;padding:22px;font-size:14px}.showcase-bottom strong{font-weight:600;line-height:1.5}.showcase-bottom a{font-size:12px;color:var(--accent)}.showcase-note{position:absolute;bottom:-25px;right:20px;padding:13px 20px;background:#203445;border:1px solid #527080;border-radius:10px;font-size:12px;transform:rotate(-2deg);box-shadow:0 15px 30px #0004}.showcase-note span{color:var(--accent);padding-right:8px}
.modern-home #diensten,.modern-home #faq{background:#edf3f7}.modern-home .services-grid{gap:16px;margin-top:40px}.modern-home .service-item{border:1px solid #203c5618;background:#ffffff;border-radius:16px;text-align:left;padding:30px;box-shadow:none}.modern-home .service-item:hover{border-color:#087f7850;transform:translateY(-3px)}.modern-home .service-item h3{font-size:17px;letter-spacing:.2px;font-weight:650}.modern-home .service-item p{font-size:14px;letter-spacing:0;line-height:1.8;color:#526579}.modern-home .service-icon{margin-bottom:22px}.modern-home .service-icon svg{width:30px;height:30px}
.modern-home .single-offer{max-width:none;border:1px solid #087f7840;background:radial-gradient(ellipse at top right,#d3efea80,transparent 65%),#ffffff;border-radius:24px;padding:48px;box-shadow:none;margin:36px 0 0;position:relative}.modern-home .offer-badge{background:#087f7818;color:var(--accent);border:1px solid #087f7835;border-radius:30px;letter-spacing:2px;font-size:11px;box-shadow:none}.modern-home .offer-title{letter-spacing:-1px;font-size:32px}.modern-home .offer-tagline{max-width:640px;color:#526579}.modern-home .offer-price-free,.modern-home .offer-price-amount{font-size:60px;letter-spacing:-2px;color:#172d43}.modern-home .offer-price-first{letter-spacing:1px;color:#526579}.modern-home .offer-features{max-width:800px;gap:14px 30px}.modern-home .offer-features li{font-size:15px;color:#40566a}.modern-home .offer-fee-note{color:var(--accent);letter-spacing:0}.modern-home .templates-note{font-size:13px;color:#526579}
.modern-home .styles-section{margin-top:88px;scroll-margin-top:125px}.modern-home .styles-title{font-size:30px;letter-spacing:-.7px;text-transform:none}.modern-home .styles-intro{color:#526579;font-size:16px}.modern-home .styles-grid{gap:22px}.modern-home .style-example{background:#ffffff;border:1px solid #203c561c;border-radius:15px;overflow:hidden;padding-bottom:20px}.modern-home .style-preview{border:0;border-radius:0;aspect-ratio:1.6}.modern-home .style-preview img{width:100%;height:100%;object-fit:cover}.modern-home .style-name{font-size:17px;letter-spacing:0;padding:0 20px;margin-top:20px}.modern-home .style-desc{font-size:13px;padding:0 20px;color:#526579}.modern-home .style-overlay{background:#f7fafc88;letter-spacing:1px;font-size:14px}
.modern-home .content-block{max-width:760px;margin:0}.modern-home .content-block p{color:#526579;font-size:17px}.modern-home .werkwijze-grid{margin-top:45px;gap:20px}.modern-home .werkwijze-step{background:#ffffff;border:1px solid #203c561c;border-radius:15px;padding:26px;text-align:left}.modern-home .step-number{color:var(--accent);font-size:32px}.modern-home .werkwijze-step h3{letter-spacing:1px;font-size:15px}.modern-home .werkwijze-step p{letter-spacing:0;font-size:14px;color:#526579}.modern-home .cta-box{margin:35px 0 0;max-width:none;border-radius:16px;background:#ffffff}.modern-home .cta-email,.modern-home .btn-submit{border-radius:9px;background:var(--accent);color:#0c2927;letter-spacing:.5px;font-weight:700}.modern-home .faq-list{max-width:860px;margin:35px 0 0}.modern-home .faq-item{background:transparent;border:0;border-bottom:1px solid #203c5624;border-radius:0}.modern-home .faq-question{font-size:17px;letter-spacing:0;padding:25px 0;font-weight:550}.modern-home .faq-answer p{color:#526579;font-size:15px;padding-left:0;line-height:1.8}.modern-home #contact{background:radial-gradient(ellipse at 0 0,#bce8e680,transparent 65%),#f7fafc}.modern-home .contact-form-wrap{max-width:760px;margin:35px 0 0;padding:32px;border:1px solid #203c5620;border-radius:18px;background:#ffffff;box-shadow:none}.modern-home .contact-form input,.modern-home .contact-form textarea{background:#f5f8fb;border:1px solid #203c562b;border-radius:9px;color:#172d43;font-size:16px;letter-spacing:0}.modern-home .contact-form input::placeholder,.modern-home .contact-form textarea::placeholder{color:#596c80}.modern-home .contact-form input:focus,.modern-home .contact-form textarea:focus{border-color:var(--accent)}.modern-home #templatemo-footer{background:#f7fafc}.modern-home .footer-logo-img{max-height:110px}.modern-home .whatsapp-float{animation:none;box-shadow:0 5px 20px #0005}.modern-home .cookie-consent{border-radius:15px}
@media(max-width:991px){.modern-home .modern-hero{grid-template-columns:1fr;gap:55px;padding-top:60px}.hero-copy{max-width:680px}.hero-showcase{max-width:620px;width:100%;margin:auto}.modern-home .hero-title{font-size:66px}.modern-home .nav-links{gap:16px}.modern-home .section-content{padding-top:72px;padding-bottom:72px}}
@media(max-width:768px){.modern-home .nav-container{height:82px;padding:0 20px}.modern-home .nav-logo,.modern-home .nav-logo-img{height:80px}.modern-home .nav-links{background:#edf3f7;top:82px;padding:20px;gap:20px}.modern-home .promo-text{font-size:11px}.modern-home .promo-cta{display:none}.modern-home .section-content{padding:60px 22px}.modern-home .hero-title{font-size:clamp(44px,10vw,64px);letter-spacing:-2px}.hero-description{font-size:16px}.hero-actions{gap:18px}.hero-deal{max-width:270px}.hero-showcase{transform:none}.showcase-note{font-size:10px;right:10px}.showcase-bottom{padding:18px;font-size:13px}.showcase-bottom a{font-size:11px}.modern-home .single-offer{padding:30px 20px;border-radius:18px}.modern-home .offer-price-free,.modern-home .offer-price-amount{font-size:44px}.modern-home .offer-price-block{gap:18px}.modern-home .offer-features{grid-template-columns:1fr}.modern-home .styles-grid{grid-template-columns:1fr}.modern-home .contact-form-wrap{padding:22px 18px}.modern-home .section-title{font-size:36px;letter-spacing:-1px}.modern-home .cta-box{padding:24px}.modern-home .faq-question{font-size:16px}.modern-home .styles-section{margin-top:60px}}
@media(prefers-reduced-motion:reduce){.modern-home *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Light surfaces and centered contact section. */
.modern-home{--white:#172d43;--white-90:#253d52;--white-70:#526579;--white-40:#64778a;--white-20:rgba(32,60,86,.18);--white-10:rgba(32,60,86,.1);--glass-border:rgba(32,60,86,.15);--glass-bg:#fff}
.modern-home .offer-cta,.modern-home .cta-email,.modern-home .btn-submit{color:#fff;background:#087f78}
.modern-home .offer-cta:hover,.modern-home .cta-email:hover,.modern-home .btn-submit:hover{background:#066b65;color:#fff}
.modern-home .hero-showcase{box-shadow:0 25px 70px #26496618}
.modern-home .showcase-note{background:#fff;border-color:#c7dedf;color:#294456;box-shadow:0 10px 25px #26496616}
.modern-home .service-item,.modern-home .style-example,.modern-home .werkwijze-step{box-shadow:0 6px 24px #26496606}
.modern-home .style-overlay{background:rgba(12,30,45,.65);color:#fff}
.modern-home .nav-links a:hover,.modern-home .nav-links a.active{color:#087f78}
.modern-home .nav-toggle span{background:#172d43}
.modern-home #contact .section-content{text-align:center}
.modern-home #contact .contact-form-wrap{margin:35px auto 0;text-align:left;box-shadow:0 16px 50px #2649660d}
.modern-home .footer-logo-img{opacity:1}
.modern-home .faq-question:hover{color:#087f78}
.modern-home .form-message-error{color:#a52b30;background:#fff0f0}
.modern-home .form-message-success{color:#08665f;background:#e4f7f1}
@media(max-width:768px){.modern-home .nav-links{background:#fff;border-bottom:1px solid #d9e3eb}}

/* Animated device previews, using the existing demo artwork. */
.modern-home .style-example{padding-top:0;isolation:isolate}
.modern-home .device-stage{position:relative;aspect-ratio:auto;height:280px;margin:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#cceee9,transparent 70%),#f0f6f8;perspective:900px}
.modern-home .style-example:nth-child(2) .device-stage{background:radial-gradient(ellipse at 50% 45%,#dae7fa,transparent 70%),#f0f4fa}
.modern-home .style-example:nth-child(3) .device-stage{background:radial-gradient(ellipse at 50% 45%,#f0e3cf,transparent 70%),#f8f5ef}
.desktop-device{position:absolute;left:7%;top:38px;width:78%;border:6px solid #233448;border-radius:12px;background:#233448;box-shadow:0 16px 24px #23344824;animation:desktop-drift 7s ease-in-out infinite;transform-origin:50% 80%}
.device-toolbar{height:15px;display:flex;gap:3px;align-items:center;padding:0 5px;background:#edf2f6;border-radius:5px 5px 0 0}
.device-toolbar i{width:4px;height:4px;border-radius:50%;background:#a5b4c2}.device-toolbar i:first-child{background:#e4a18d}.device-toolbar i:nth-child(2){background:#e0c281}.device-toolbar i:nth-child(3){background:#7dbba5}.device-toolbar span{font-size:6px;margin:auto;color:#657588;letter-spacing:.3px}
.desktop-viewport{aspect-ratio:1.6;overflow:hidden;background:#fff}
.modern-home .desktop-viewport img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.monitor-chin{height:10px}.monitor-chin:after{content:'';display:block;margin:4px auto 0;width:4px;height:4px;border-radius:50%;background:#8ba8b3}
.monitor-stand{position:absolute;top:100%;left:38%;width:24%;height:27px;background:linear-gradient(90deg,#b4c3cf,#e5edf2,#afbfcd);clip-path:polygon(24% 0,76% 0,83% 80%,100% 87%,100% 100%,0 100%,0 87%,17% 80%)}
.phone-device{position:absolute;right:7%;top:90px;width:24%;aspect-ratio: .49;border:5px solid #1d2c3b;border-radius:17px;background:#1d2c3b;box-shadow:0 14px 22px #16273535;overflow:hidden;animation:phone-drift 6s ease-in-out infinite}
.phone-speaker{position:absolute;z-index:2;top:0;left:28%;width:44%;height:8px;background:#1d2c3b;border-radius:0 0 7px 7px}
.phone-viewport{width:100%;height:100%;border-radius:11px;overflow:hidden;background:#fff}
.modern-home .phone-viewport img{height:100%;width:100%;max-width:none;object-fit:cover;object-position:50% center;transition:object-position 2s ease}
.phone-home{position:absolute;bottom:4px;left:32%;width:36%;height:3px;border-radius:3px;background:#fff9}
.device-label{position:absolute;bottom:12px;left:16px;font-size:10px;letter-spacing:.5px;color:#536c7d;background:#ffffffb8;padding:5px 9px;border-radius:20px}
.modern-home .device-stage .style-overlay{z-index:4;border-radius:0;transition:opacity .25s;background:rgba(17,37,52,.72)}
.modern-home .style-example:hover .desktop-viewport img{transform:scale(1.04)}
.modern-home .style-example:hover .phone-viewport img{object-position:65% center}
.modern-home .style-example:focus-visible{outline:3px solid #087f78;outline-offset:5px}
.modern-home .style-example:focus-visible .style-overlay{opacity:1}
.modern-home .style-example:nth-child(2) .desktop-device{animation-delay:-2s}.modern-home .style-example:nth-child(3) .desktop-device{animation-delay:-4s}
.modern-home .style-example:nth-child(2) .phone-device{animation-delay:-3s}.modern-home .style-example:nth-child(3) .phone-device{animation-delay:-1s}
@keyframes desktop-drift{0%,100%{transform:translateY(0) rotateY(-4deg) rotateZ(-1deg)}50%{transform:translateY(-7px) rotateY(3deg) rotateZ(1deg)}}
@keyframes phone-drift{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
@media(max-width:768px){.modern-home .device-stage{height:auto;aspect-ratio:1.32}.desktop-device{top:13%}.phone-device{top:30%}}
@media(prefers-reduced-motion:reduce){.modern-home .desktop-device,.modern-home .phone-device{animation:none;transform:none}.modern-home .device-stage img{transition:none}}
/* Crossfade keeps the original preview dimensions stable. */
.modern-home .hero-carousel{position:relative;margin:0 10px;aspect-ratio:1.6;overflow:hidden;border-radius:8px;background:#172d43}
.modern-home .hero-carousel .hero-slide{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;transition:opacity 1.2s ease;z-index:0}
.modern-home .hero-carousel .hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.modern-home .hero-carousel img{width:100%;height:100%;object-fit:cover}
.hero-carousel-controls{display:flex;gap:7px;align-items:center;padding:12px 16px 0;flex-wrap:wrap}
.hero-carousel-controls button{border:1px solid #d8e3eb;border-radius:20px;background:transparent;color:#526579;font:inherit;font-size:11px;padding:5px 10px;cursor:pointer}
.hero-carousel-controls button[aria-pressed="true"]{background:#e1f3ef;border-color:#087f78;color:#066b65}
.hero-carousel-controls .hero-carousel-pause{margin-left:auto}
.hero-carousel-controls button:focus-visible{outline:2px solid #087f78;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.modern-home .hero-carousel .hero-slide{transition:none}}
/* Explicitly requested soft opacity fade; other reduced-motion rules remain intact. */
.modern-home .hero-carousel .hero-slide {
 transition: opacity 1.5s ease-in-out !important;
}
/* Real 390 x 844 mobile captures: preserve the complete viewport. */
.modern-home .phone-device{aspect-ratio:390 / 844;box-sizing:content-box}
.modern-home .phone-viewport img,.modern-home .style-example:hover .phone-viewport img{object-fit:contain;object-position:center;transform:none}

/* Slightly deeper blue-grey surfaces, retaining the light theme. */
.modern-home{background:#eaf0f5}
.modern-home #home{background:radial-gradient(ellipse at 85% 30%,#b1dcd980,transparent 55%),radial-gradient(ellipse at 0% 100%,#c0d6eb80,transparent 50%),#eaf0f5}
.modern-home #diensten,.modern-home #faq{background:#dfe8f0}
.modern-home #templates,.modern-home #over-ons{background:#eaf0f5}
.modern-home #contact{background:radial-gradient(ellipse at 0 0,#afd8d660,transparent 65%),#e2eaf2}
.modern-home #templatemo-nav{background:rgba(237,243,248,.96);border-bottom-color:#cbd7e1}
.modern-home #templatemo-footer{background:#dce5ee}
.modern-home .service-item,.modern-home .style-example,.modern-home .werkwijze-step,.modern-home .cta-box,.modern-home .contact-form-wrap{background:#f8fafc;border-color:#ccd8e2}
.modern-home .single-offer{background:radial-gradient(ellipse at top right,#c4e6df80,transparent 65%),#f5f8fb;border-color:#b4d3cf}
@media(max-width:768px){.modern-home .nav-links{background:#edf3f8}}

/* Keep device previews visible; reveal a floating action instead of a dark veil. */
.modern-home .style-example{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.modern-home .style-example:hover,.modern-home .style-example:focus-visible{border-color:#65aaa4;box-shadow:0 16px 36px #26496618;transform:translateY(-5px)}
.modern-home .device-stage .style-overlay{
 inset:auto 14px 14px auto;width:auto;height:auto;display:inline-flex;align-items:center;justify-content:center;
 padding:10px 16px;border-radius:24px;background:rgba(255,255,255,.96);color:#086c66;
 border:1px solid #91c7c1;box-shadow:0 6px 20px #17384822;backdrop-filter:blur(8px);
 font-size:12px;font-weight:650;letter-spacing:.2px;line-height:1.4;
 opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;
}
.modern-home .style-example:hover .device-stage .style-overlay,.modern-home .style-example:focus-visible .device-stage .style-overlay{opacity:1;transform:translateY(0)}
@media(hover:none){.modern-home .device-stage .style-overlay{opacity:1;transform:none}}
/* Nateo wordmark proportions. */
.modern-home .nav-logo{height:auto;display:flex;align-items:center}
.modern-home .nav-logo-img{width:190px;height:auto;max-height:none;object-fit:contain}
.modern-home .footer-logo-img{width:210px;height:auto;max-height:none;filter:none;opacity:1}
@media(max-width:768px){.modern-home .nav-logo-img{width:158px;height:auto}.modern-home .nav-logo{height:auto}}

/* Opaque badge covers the offer-card border behind its label. */
.modern-home .single-offer .offer-badge{
 background:#deefeb;
 color:#066b65;
 border:1px solid #9ccbc4;
 z-index:1;
 font-weight:650;
}

/* Keep the navigation contact pill on one box, without the link underline. */
.modern-home .nav-links li:last-child a[href="#contact"]{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 white-space:nowrap;
 line-height:1.4;
 padding:10px 18px;
 border-radius:999px;
 border:1px solid #bdcdd9;
 background:#e5edf4;
 text-decoration:none;
}
.modern-home .nav-links li:last-child a[href="#contact"]::after{display:none;content:none}
.modern-home .nav-links li:last-child a[href="#contact"]:hover,
.modern-home .nav-links li:last-child a[href="#contact"].active{
 background:#087f78;
 border-color:#087f78;
 color:#fff;
}

/* Align contact label with the other desktop navigation labels. */
@media(min-width:769px){
 .modern-home .nav-links li:last-child a[href="#contact"]{position:relative;top:-6px}
}

/* Animate the actual content height instead of a fixed maximum. */
.modern-home .faq-answer{
 display:grid;
 grid-template-rows:0fr;
 max-height:none;
 opacity:0;
 transition:grid-template-rows .45s ease,opacity .35s ease !important;
}
.modern-home .faq-answer-inner{min-height:0;overflow:hidden}
.modern-home .faq-item.open .faq-answer{grid-template-rows:1fr;max-height:none;opacity:1}
.modern-home .faq-icon::after{transition:transform .35s ease !important}