/* ============================================
   Verhuisbedrijf De Vliegende Hollander - State of the Art Redesign
   Mobile-First | Modern CSS | Performance Optimized
   ============================================ */

:root {
  --primary: #0E2038;
  --primary-dark: #081424;
  --primary-light: #16304F;
  --accent: #FF6200;
  --accent-hover: #D44E00;
  --accent-light: #FFF1E6;
  --accent-text: #B23F00;
  --white: #ffffff;
  --off-white: #fafbfd;
  --gray-50: #f7f8fa;
  --gray-100: #eef1f5;
  --gray-200: #dde2ea;
  --gray-300: #c5cdd8;
  --gray-400: #657689;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --green: #047857;
  --green-light: #ecfdf5;
  --gold: #C6A067;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08),0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-accent: 0 4px 14px rgba(255,98,0,0.35);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
  --max-width: 75rem;
  --header-height: 88px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px;touch-action:manipulation;-ms-touch-action:manipulation}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--gray-600);line-height:1.6;background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
img{max-width:100%;height:auto;display:block}
iframe,video,svg{max-width:100%}
.two-col>*,.zigzag>*,.hero .container>*,.packing-layout>*,.contact-info>*,.footer__grid>*,.services-grid>*,.advantages>*,.reviews-grid>*,.regio-grid>*,.steps>*,.tips-grid>*,.extra-services-grid>*,.diensten-3col>*,.packages-grid>*,.features-grid-section .features-grid>*,.process-section .process-timeline>*{min-width:0}
a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--accent)}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{color:var(--gray-800);line-height:1.2;font-weight:800;letter-spacing:-0.02em}

.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* TOP BAR */
.top-bar{background:var(--primary-dark);color:var(--white);font-size:.8rem;padding:6px 0;display:none;border-bottom:1px solid rgba(255,255,255,.06)}
.top-bar .container{display:flex;justify-content:space-between;align-items:center}
.top-bar__left,.top-bar__right{display:flex;align-items:center;gap:20px}
.top-bar__item{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.85);font-size:.8rem;font-weight:500;transition:color var(--transition-fast)}
a.top-bar__item:hover{color:var(--white)}
.top-bar__item svg{width:14px;height:14px;flex-shrink:0;opacity:.7}
.top-bar__reviews{font-weight:600}
.top-bar__reviews svg{opacity:1;color:var(--gold)}

/* HEADER */
.header{position:sticky;top:0;z-index:9990;background:rgba(255,255,255,.95);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 0 rgba(0,0,0,.06);height:var(--header-height);transition:box-shadow .4s ease,background .4s ease}
.header--scrolled{background:rgba(255,255,255,.98);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.header .container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.05rem;color:var(--primary);white-space:nowrap;flex-shrink:0}
.logo__img{height:72px;width:auto;flex-shrink:0}
.logo__full{height:58px;width:auto;flex-shrink:0}
.logo__text{display:none}
.logo__text small{display:block;font-weight:400;font-size:.68rem;color:var(--gray-400);letter-spacing:.02em}

/* NAV */
.nav{display:none}
.nav.active{display:flex;flex-direction:column;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:var(--white);padding:24px 20px;overflow-y:auto;z-index:9999;animation:slideDown .35s cubic-bezier(.4,0,.2,1)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.nav__list{display:flex;flex-direction:column;gap:2px}
.nav__link{display:block;padding:14px 16px;color:var(--gray-700);font-weight:500;font-size:1rem;border-radius:var(--radius-md);transition:all var(--transition-fast)}
.nav__link:hover,.nav__link--active{background:var(--gray-50);color:var(--primary)}
.nav__link--cta{background:var(--accent);color:var(--white) !important;text-align:center;margin-top:12px;font-weight:700;border-radius:var(--radius-full);box-shadow:var(--shadow-accent)}
.nav__link--cta:hover{background:var(--accent-hover)}

.nav__dropdown{position:relative}
.nav__dropdown-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:6px}
.nav__dropdown-toggle::after{display:none}
.nav__dropdown-toggle svg{flex-shrink:0;transition:transform var(--transition)}
.nav__dropdown.open .nav__dropdown-toggle svg{transform:rotate(180deg)}
.nav__dropdown-menu{display:none;padding:6px 0 6px 16px}
.nav__dropdown.open .nav__dropdown-menu{display:block}
.nav__dropdown-menu a{display:block;padding:12px 16px;color:var(--gray-600);font-size:.95rem;border-radius:var(--radius-sm)}
.nav__dropdown-menu a:hover{background:var(--gray-50);color:var(--primary)}

/* HEADER CTA */
.header__cta{display:none;align-items:center;gap:10px}
.header__cta-phone{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:700;font-size:.875rem;white-space:nowrap;transition:color var(--transition-fast)}
.header__cta-phone:hover{color:var(--accent)}
.header__cta-phone svg{width:16px;height:16px;color:var(--accent)}
.header__cta-wa{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:#25d366;color:var(--white) !important;font-weight:600;font-size:.82rem;border-radius:var(--radius-full);transition:all var(--transition-fast);white-space:nowrap}
.header__cta-wa:hover{background:#1eba59;color:var(--white) !important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,211,102,.3)}
.header__cta-wa svg{width:16px;height:16px}

.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;z-index:1001}
.hamburger span{width:22px;height:2px;background:var(--gray-700);transition:all var(--transition);border-radius:2px}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.header__phone{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:.88rem;white-space:nowrap}
.header__phone-num{display:none}

/* HERO */
.hero{position:relative;background:linear-gradient(160deg,var(--primary-dark) 0%,var(--primary) 40%,var(--primary-light) 100%);color:var(--white);padding:60px 0 50px;overflow:hidden}
.hero--fullwidth{background-size:cover;background-position:center 30%;background-repeat:no-repeat;padding:70px 0 0;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,20,36,.69) 0%,rgba(14,32,56,.60) 35%,rgba(22,48,79,.41) 70%,rgba(42,90,158,.26) 100%);z-index:0}
.hero--fullwidth .container{position:relative;z-index:1}
.hero::before,.hero::after{display:none}
.hero__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);padding:8px 18px;border-radius:var(--radius-full);font-size:.82rem;font-weight:600;margin-bottom:24px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
.hero h1{color:var(--white);font-size:clamp(2rem, 5vw + 1rem, 3.6rem);margin-bottom:18px;line-height:1.12;font-weight:800;letter-spacing:-0.03em}
.hero h1 span{color:var(--white);-webkit-text-fill-color:var(--white)}
.hero p{font-size:1.05rem;opacity:.9;margin-bottom:32px;max-width:520px;line-height:1.7}
.hero__buttons{display:flex;flex-direction:column;gap:12px}
.hero__microcopy{font-size:.85rem;opacity:.8;margin-top:12px;color:var(--white);font-weight:400;letter-spacing:.01em}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px}
.hero__stat{text-align:center;padding:28px 16px;position:relative;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}
.hero__stat:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.hero__stat:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.hero__stat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.12)}
.hero__stat-value{font-size:2rem;font-weight:800;color:var(--white);-webkit-text-fill-color:var(--white);line-height:1}
.hero__stat-label{font-size:.78rem;opacity:.85;margin-top:6px;font-weight:500;letter-spacing:.03em;text-transform:uppercase}
.hero__image{margin-top:30px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-2xl)}
.hero__image img{width:100%;height:auto;display:block}
.content-img{width:100%;height:auto;display:block}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-size:.95rem;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition);text-align:center;line-height:1.2;white-space:nowrap;position:relative;overflow:hidden}
.btn--primary{background:linear-gradient(135deg,var(--accent) 0%,#D44E00 100%);color:#fff;box-shadow:var(--shadow-accent);text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.btn--primary:hover{background:linear-gradient(135deg,#D44E00 0%,#c05600 100%);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,98,0,.4)}
.btn--secondary{background:rgba(255,255,255,.1);color:var(--white);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.btn--secondary:hover{background:rgba(255,255,255,.2);color:var(--white);border-color:rgba(255,255,255,.35)}
.btn--outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn--outline:hover{background:var(--primary);color:var(--white)}
.btn--white{background:var(--white);color:var(--primary);box-shadow:var(--shadow-md)}
.btn--white:hover{background:var(--gray-50);color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn--sm{padding:10px 22px;font-size:.88rem}
.btn--lg{padding:18px 40px;font-size:1.05rem;font-weight:700}
.btn--full{width:100%}

/* SECTIONS */
.section{padding:42px 0}
.section--gray{background:var(--gray-50)}
.section--reviews{position:relative;background:var(--off-white)}
.section--reviews::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--white) 0%,var(--gray-50) 50%,var(--white) 100%);z-index:0}
.section--reviews .container{position:relative;z-index:1}
.section--primary{background:var(--primary);color:var(--white)}
.section__header{text-align:center;margin-bottom:40px}
.section__label{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--accent-text);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;padding:6px 16px;background:var(--accent-light);border-radius:var(--radius-full)}
.section__title{font-size:clamp(1.5rem, 4vw + 0.5rem, 2.25rem);margin-bottom:14px;letter-spacing:-0.03em;line-height:1.15}
.section__subtitle{font-size:1rem;color:var(--gray-500);max-width:560px;margin:0 auto;line-height:1.7}

/* SERVICE CARDS */
.services-grid{display:grid;grid-template-columns:1fr;gap:20px}
.service-card{background:var(--white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;position:relative}
.service-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#FF8A3D);transform:scaleX(0);transition:transform .4s cubic-bezier(.4,0,.2,1);transform-origin:left}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:transparent}
.service-card:hover::after{transform:scaleX(1)}
.service-card__img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.service-card:hover .service-card__img{transform:scale(1.05)}
.service-card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.service-card h3{font-size:1.05rem;margin-bottom:8px;font-weight:700}
.service-card p{font-size:.88rem;color:var(--gray-500);line-height:1.65;flex:1}
.service-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:600;font-size:.88rem;color:var(--accent-text);transition:gap var(--transition)}
.service-card:hover .service-card__link{gap:10px}

/* ADVANTAGES */
.advantages{display:grid;grid-template-columns:1fr;gap:12px}
.advantage{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--gray-100);transition:all var(--transition)}
.advantage:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateX(4px)}
.advantage__check{width:32px;height:32px;background:linear-gradient(135deg,var(--green-light),#d1fae5);color:var(--green);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;font-weight:700}
.advantage h4{font-size:.95rem;margin-bottom:3px;font-weight:700}
.advantage p{font-size:.84rem;color:var(--gray-500);line-height:1.55}

/* STEPS */
.steps{display:grid;grid-template-columns:1fr;gap:20px;counter-reset:step}
.step{display:flex;gap:16px;counter-increment:step}
.step__number{width:48px;height:48px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;flex-shrink:0}
.step h4{font-size:1rem;margin-bottom:4px}
.step p{font-size:.88rem;color:var(--gray-500)}

/* REVIEWS */
.reviews-grid{display:grid;grid-template-columns:1fr;gap:16px}
.review-card{background:var(--white);border-radius:var(--radius-xl);padding:28px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);transition:all var(--transition);position:relative}
.review-card::before{content:'\201C';position:absolute;top:16px;right:20px;font-size:3.5rem;color:var(--accent);opacity:.12;font-family:Georgia,serif;line-height:1}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.review-card__stars{color:var(--gold);font-size:.95rem;margin-bottom:14px;letter-spacing:3px}
.review-card__text{font-size:.92rem;color:var(--gray-600);line-height:1.7;margin-bottom:18px;font-style:normal}
.review-card__author{font-weight:700;font-size:.88rem;color:var(--gray-800)}
.review-card__date{font-size:.75rem;color:var(--gray-400);margin-top:2px}
.reviews-summary{text-align:center;padding:32px 24px;background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--gray-100);margin-bottom:28px;position:relative;overflow:hidden}
.reviews-summary::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent))}
.reviews-summary__score{font-size:3rem;font-weight:800;color:var(--primary);letter-spacing:-0.03em}
.reviews-summary__stars{color:var(--gold);font-size:1.3rem;margin:6px 0 10px;letter-spacing:3px}
.reviews-summary__label{font-size:.9rem;color:var(--gray-500)}

/* FORM */
.form-section{background:linear-gradient(180deg,var(--gray-50) 0%,var(--white) 100%);padding:48px 0;padding-bottom:90px}
.form-with-image{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.form-with-image>*{min-width:0}
.form-image{display:none;position:relative;min-width:0}
.form-image img{width:100%;height:400px;object-fit:cover;border-radius:var(--radius-2xl)}
.form-image__trust{position:absolute;bottom:20px;left:20px;right:20px;display:flex;align-items:center;gap:16px;padding:20px 24px;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl)}
.form-image__score{width:56px;height:56px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;flex-shrink:0}
.form-image__trust strong{font-size:.95rem;color:var(--gray-800);display:block}
.form-image__trust span{font-size:.82rem;color:var(--gray-500)}
.form-image__stars{color:var(--gold);font-size:.9rem;letter-spacing:2px}
.form-card{background:var(--white);border-radius:var(--radius-2xl);padding:32px 24px;box-shadow:var(--shadow-lg);border:1px solid var(--gray-100);position:relative;overflow:hidden}
.form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),#FF8A3D,var(--accent))}
.form-card h2{font-size:1.5rem;margin-bottom:6px;letter-spacing:-0.02em}
.form-card>p{color:var(--gray-500);font-size:.92rem;margin-bottom:28px}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px}
.form-group{display:flex;flex-direction:column;min-width:0}
.form-group label{font-size:.82rem;font-weight:600;color:var(--gray-700);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{min-width:0;max-width:100%;box-sizing:border-box;padding:14px 16px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;transition:all var(--transition);background:var(--gray-50);color:var(--gray-700);-webkit-appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(14,32,56,.08);background:var(--white)}
.form-group input::placeholder{color:var(--gray-400)}
.form-group textarea{resize:vertical;min-height:100px}
.form-success{display:none;text-align:center;padding:40px 24px}
.form-success.show{display:block}
.form-success__icon{width:64px;height:64px;background:linear-gradient(135deg,var(--green-light),#d1fae5);color:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px}

/* CTA BANNER */
.cta-banner{background:none;color:var(--white);padding:0 0 40px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:40px}
.cta-banner h2{color:var(--white);font-size:clamp(1.5rem, 4vw + 0.5rem, 2.25rem);margin-bottom:10px}
.cta-banner p{opacity:.85;margin-bottom:24px;max-width:460px;margin-left:auto;margin-right:auto;font-size:.95rem}
.cta-banner .btn{margin:0 auto}

/* REGIO GRID */
.regio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.regio-grid a{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-md);font-size:.88rem;font-weight:600;color:var(--gray-700);transition:all var(--transition)}
.regio-grid a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.regio-grid a::before{content:'\2192';color:var(--accent-text);font-size:.85rem;transition:transform var(--transition)}
.regio-grid a:hover::before{transform:translateX(3px)}

/* CONTACT */
.contact-info{display:grid;grid-template-columns:1fr;gap:16px}
.contact-info__item{display:flex;align-items:flex-start;gap:14px;padding:24px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);transition:all .25s ease;cursor:pointer;text-decoration:none;color:inherit}
.contact-info__item:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.12);border-color:var(--accent)}
a.contact-info__item:hover{color:inherit}
.contact-info__icon{width:48px;height:48px;background:var(--accent-light);color:var(--accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.contact-info__item h4{font-size:.92rem;margin-bottom:2px}
.contact-info__item p,.contact-info__item a{font-size:.9rem;color:var(--gray-500);overflow-wrap:anywhere;word-break:break-word;min-width:0}
.contact-info__item>div:not(.contact-info__icon){min-width:0;flex:1}

/* M3 CALCULATOR */
.calc-section{background:var(--white);border-radius:var(--radius-xl);padding:28px 20px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);margin-bottom:20px}
.calc-section h3{font-size:1.05rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--gray-100);display:flex;align-items:center;gap:8px}
.calc-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--gray-50);font-size:.9rem}
.calc-item:last-child{border-bottom:none}
.calc-item label{flex:1;color:var(--gray-600)}
.calc-item input[type="number"]{width:72px;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);text-align:center;font-size:1rem;font-family:inherit}
.calc-total{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);border-radius:var(--radius-xl);padding:28px;text-align:center;position:sticky;bottom:16px;box-shadow:var(--shadow-xl)}
.calc-total__value{font-size:2.5rem;font-weight:800}
.calc-total__label{font-size:.85rem;opacity:.8}

/* TWO COL */
.two-col{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.two-col--reversed .content-img{aspect-ratio:4/3;object-fit:cover}
.extra-diensten-cards{display:flex;flex-direction:column}

/* ZIGZAG */
.zigzag{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.zigzag__img{width:100%;height:100%;min-height:320px;border-radius:var(--radius-xl);object-fit:cover;box-shadow:var(--shadow-lg)}
.zigzag__content{display:flex;flex-direction:column;gap:16px}
.zigzag__content h2{font-size:clamp(1.5rem, 4vw + 0.5rem, 2.25rem);color:var(--primary);line-height:1.2}
.zigzag__content h3{font-size:1.25rem;color:var(--primary)}
.zigzag__content p{color:var(--gray-600);line-height:1.7}
.zigzag__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.zigzag__list li{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:var(--gray-700)}
.zigzag__list li::before{content:"\2713";color:var(--accent-text);font-weight:700;flex-shrink:0;margin-top:2px}

/* TRUST BAR */
.trust-bar{background:var(--white);padding:20px 0;border-bottom:1px solid var(--gray-100)}
.trust-bar .container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--gray-600);white-space:nowrap}
.trust-item__icon{color:var(--green);font-size:1rem}

/* FOOTER */
.footer{position:relative;background:var(--gray-800);color:rgba(255,255,255,.75);padding:56px 0 24px}
.footer--bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.footer--bg>.container{position:relative;z-index:1}
.footer--bg::before{content:'';position:absolute;inset:0;background:rgba(8,20,36,.92);z-index:0}
.footer::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,36,.95) 0%,rgba(8,20,36,.88) 100%);z-index:0}
.footer .container{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px}
.footer h3,.footer h4{color:var(--white);font-size:.95rem;font-weight:700;margin-bottom:16px}
.footer p,.footer a,.footer span{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.65}
.footer a:hover{color:var(--accent)}
.footer__links{display:flex;flex-direction:column;gap:8px}
.footer__links a,.footer__links span{display:block;padding:2px 0;transition:all var(--transition-fast);overflow-wrap:break-word;word-break:break-word}
.footer__links a:hover{transform:translateX(4px)}
.footer__regio-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.footer__regio-links a{font-size:.85rem;transition:all var(--transition-fast)}
.footer__regio-links a:hover{transform:translateX(4px)}
.footer__bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.footer__bottom p{font-size:.82rem;color:rgba(255,255,255,.75)}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}
.footer__legal a{font-size:.82rem;color:rgba(255,255,255,.75)}
.footer__legal a:hover{color:var(--accent)}

/* BREADCRUMB */
.breadcrumb{padding:14px 0;font-size:.82rem;color:var(--gray-400)}
.breadcrumb a{color:var(--gray-500)}
.breadcrumb span{margin:0 6px;color:var(--gray-300)}

/* PAGE HERO */
.page-hero{background:linear-gradient(160deg,var(--primary-dark) 0%,var(--primary) 60%,var(--primary-light) 100%);color:var(--white);padding:44px 0 38px;text-align:center;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;top:-50%;right:-30%;width:600px;height:600px;background:radial-gradient(circle,rgba(255,98,0,.08) 0%,transparent 70%);border-radius:50%}
.page-hero h1{color:var(--white);font-size:clamp(1.7rem, 5vw + 0.5rem, 2.4rem);margin-bottom:10px;position:relative;z-index:1}
.page-hero p{opacity:.9;font-size:.95rem;max-width:550px;margin:0 auto;position:relative;z-index:1}

/* CONTENT BLOCKS */
.content-block{padding:40px 0}
.content-block h2{font-size:clamp(1.25rem, 3vw + 0.5rem, 1.75rem);margin-bottom:14px}
.content-block h3{font-size:1.15rem;margin-bottom:10px;margin-top:24px}
.content-block p{margin-bottom:14px;color:var(--gray-600)}
.content-block ul{margin-bottom:14px}
.content-block li{position:relative;padding-left:22px;margin-bottom:8px;font-size:.92rem;color:var(--gray-600)}
.content-block li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--accent);border-radius:50%}

/* FLOATING CTA */
.floating-cta{position:fixed;bottom:0;left:0;right:0;background:var(--white);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 20px rgba(0,0,0,.08);z-index:998;display:flex;gap:10px}
.floating-cta .btn{flex:1;padding:14px;font-size:.9rem;border-radius:var(--radius-md)}
.floating-cta .btn--call{background:linear-gradient(135deg,var(--green),#047857);color:var(--white)}
.floating-cta .btn--call:hover{background:#047857}
.whatsapp-float{position:fixed;bottom:90px;right:20px;z-index:997;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(37,211,102,0.35);transition:all .3s cubic-bezier(.34,1.56,.64,1);text-decoration:none;cursor:pointer;animation:wa-pulse 3s ease-in-out infinite}
.whatsapp-float::before{content:'';position:absolute;inset:-4px;border-radius:50%;background:linear-gradient(135deg,rgba(37,211,102,0.25),rgba(18,140,126,0.1));z-index:-1;animation:wa-ring 3s ease-in-out infinite}
.whatsapp-float:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(37,211,102,0.5);color:#fff;animation:none}
.whatsapp-float:hover::before{animation:none;inset:-6px;background:linear-gradient(135deg,rgba(37,211,102,0.3),rgba(18,140,126,0.15))}
.whatsapp-float svg{width:32px;height:32px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15))}
@keyframes wa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes wa-ring{0%,100%{inset:-4px;opacity:1}50%{inset:-10px;opacity:0.4}}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}

/* MID CTA */
.mid-cta{background:linear-gradient(160deg,var(--primary-dark) 0%,var(--primary) 60%,var(--primary-light) 100%);color:var(--white);padding:60px 0;text-align:center;position:relative;overflow:hidden}
.mid-cta::after{content:'';position:absolute;bottom:-20%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,98,0,.1) 0%,transparent 70%);border-radius:50%}
.mid-cta h2{color:var(--white);font-size:clamp(1.5rem, 4vw + 0.5rem, 2.25rem);margin-bottom:12px;position:relative;z-index:1}
.mid-cta p{opacity:.9;font-size:1rem;max-width:600px;margin:0 auto 28px;position:relative;z-index:1}
.mid-cta__buttons{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:center;position:relative;z-index:1}
.mid-cta__trust{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin-top:32px;position:relative;z-index:1}
.mid-cta__trust-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:rgba(255,255,255,.9);white-space:nowrap}
.mid-cta__trust-item svg,.mid-cta__trust-item .mid-cta__check{color:var(--green);font-size:1rem;flex-shrink:0}

/* FEATURES GRID */
.features-grid-section .features-grid{display:grid;grid-template-columns:1fr;gap:24px}
.feature-card{text-align:center;padding:36px 24px;background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);transition:all var(--transition)}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.feature-card__icon{width:64px;height:64px;background:linear-gradient(135deg,var(--accent-light),#ffe0b2);color:var(--accent);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.feature-card__icon svg{width:28px;height:28px}
.feature-card h4{font-size:1rem;margin-bottom:8px}
.feature-card p{font-size:.85rem;color:var(--gray-500);line-height:1.65}

/* PROCESS TIMELINE */
.process-section .process-timeline{position:relative;padding-left:40px}
.process-section .process-timeline::before{content:'';position:absolute;left:23px;top:0;bottom:0;width:2px;background:var(--gray-200)}
.process-step{position:relative;z-index:1;padding-bottom:32px;padding-left:20px}
.process-step:last-child{padding-bottom:0}
.process-step__number{width:48px;height:48px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);border-radius:50%;font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;position:absolute;left:-40px;top:0;z-index:1;border:3px solid var(--white);box-shadow:var(--shadow-md)}
.process-step__content h4{font-size:1rem;margin-bottom:6px;padding-top:4px}
.process-step__content p{font-size:.85rem;color:var(--gray-500);line-height:1.65}

/* PACKAGES */
.packages-section .packages-grid{display:grid;grid-template-columns:1fr;gap:24px}
.package-card{background:var(--white);border-radius:var(--radius-2xl);padding:36px 24px;border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);text-align:center;position:relative;transition:all var(--transition);display:flex;flex-direction:column}
.packages-grid{display:grid;grid-template-columns:1fr;gap:24px}
.package-card--featured{border-color:var(--accent);box-shadow:0 8px 30px rgba(255,98,0,.12)}
.package-card__badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent),#D44E00);color:var(--white);padding:6px 20px;border-radius:var(--radius-full);font-size:.8rem;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-accent)}
.package-card h3{font-size:1.2rem;margin-bottom:20px;color:var(--primary)}
.package-card ul{text-align:left;list-style:none;padding:0;margin:0;flex:1}
.package-card ul li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--gray-50);font-size:.9rem;color:var(--gray-600)}
.package-card ul li:last-child{border-bottom:none}
.package-card ul li::before{content:'\2713';position:absolute;left:0;top:10px;color:var(--green);font-weight:700;font-size:.9rem}
.package-card .btn{margin-top:24px;width:100%}

/* FAQ */
.faq-section .faq-list{max-width:800px;margin:0 auto}
.faq-item{background:var(--white);border-radius:var(--radius-lg);margin-bottom:12px;border:1px solid var(--gray-100);overflow:hidden;transition:all var(--transition)}
.faq-item:hover{border-color:var(--gray-200)}
.faq-item[open]{border-color:var(--accent);box-shadow:var(--shadow-md)}
.faq-item summary{padding:20px 24px;font-weight:600;font-size:1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--gray-700);list-style:none;transition:color var(--transition)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{display:none;content:''}
.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--accent);transition:transform .3s ease;flex-shrink:0;margin-left:16px;line-height:1}
.faq-item[open] summary::after{content:'\2212'}
.faq-item[open] summary{color:var(--primary)}
.faq-item__answer,.faq-item p,.faq-item .faq-answer p{padding:4px 24px 20px;margin:0;font-size:.9rem;color:var(--gray-500);line-height:1.7;overflow-wrap:break-word;word-break:break-word}

/* COOKIE */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--primary-dark);box-shadow:0 -4px 40px rgba(0,0,0,.3);z-index:10000;padding:24px 20px;transform:translateY(100%);transition:transform .5s cubic-bezier(.4,0,.2,1);border-top:3px solid var(--accent)}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner__inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:16px;text-align:center;align-items:center}
.cookie-banner__text{font-size:.88rem;color:rgba(255,255,255,.9);line-height:1.65}
.cookie-banner__text a{color:var(--accent);text-decoration:underline}
.cookie-banner__text a:hover{color:#FF8A3D}
.cookie-banner__buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.cookie-btn--accept{background:linear-gradient(135deg,var(--accent),#D44E00);color:var(--white);border:none;border-radius:var(--radius-full);cursor:pointer;font-weight:700;padding:12px 28px;font-size:.9rem;font-family:inherit;transition:all var(--transition);box-shadow:var(--shadow-accent)}
.cookie-btn--accept:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,98,0,.4)}
.cookie-btn--necessary{background:transparent;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-full);cursor:pointer;font-weight:500;padding:12px 28px;font-size:.9rem;font-family:inherit;transition:all var(--transition)}
.cookie-btn--necessary:hover{border-color:rgba(255,255,255,.5);color:var(--white);background:rgba(255,255,255,.08)}
.cookie-btn--settings{background:transparent;color:rgba(255,255,255,.7);border:none;cursor:pointer;font-size:.82rem;font-family:inherit;text-decoration:underline;padding:10px 8px}


/* CSS CONTAINMENT - below-the-fold performance */
.section--reviews{content-visibility:auto;contain-intrinsic-height:auto 600px}
.reviews-grid{content-visibility:auto;contain-intrinsic-height:auto 400px}
.faq-section .faq-list{content-visibility:auto;contain-intrinsic-height:auto 500px}
.regio-grid{content-visibility:auto;contain-intrinsic-height:auto 300px}
/* .footer content-visibility removed - broke stacking context with ::before overlay */
.packages-section{content-visibility:auto;contain-intrinsic-height:auto 500px}
.features-grid-section{content-visibility:auto;contain-intrinsic-height:auto 400px}

/* RESPONSIVE */
@media(min-width:600px){
  .container{padding:0 28px}
  .hero__buttons{flex-direction:row}
  .hero__stat-value{font-size:2.4rem}
  .section{padding:54px 0}
  .services-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .advantages{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .form-group--full{grid-column:1/-1}
  .regio-grid{grid-template-columns:repeat(3,1fr)}
  .contact-info{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .form-card{padding:40px}
  .two-col{grid-template-columns:1fr 1fr}
  .two-col--reversed{grid-template-columns:1fr 1fr;align-items:center}
  .zigzag{grid-template-columns:1fr 1fr;gap:50px;align-items:stretch}
  .zigzag--reverse .zigzag__img{order:2}
  .zigzag--reverse .zigzag__content{order:1}
  .mid-cta__buttons{flex-direction:row}
  .mid-cta__trust{gap:24px}
  .features-grid-section .features-grid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:768px){
  .process-section .process-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-left:0}
  .process-section .process-timeline::before{left:10%;right:10%;top:24px;bottom:auto;width:auto;height:2px}
  .process-step{padding-bottom:0;padding-left:0;text-align:center;display:flex;flex-direction:column;align-items:center}
  .process-step__number{position:relative;left:auto;top:auto;margin-bottom:16px}
  .process-step__content h4,.process-step__content p{text-align:center}
  .packages-section .packages-grid,.packages-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .package-card--featured{transform:scale(1.04)}
  .logo__full{height:74px}
  .header__phone-num{display:inline}
}

@media(min-width:992px){
  :root{--header-height:96px}
  .container{padding:0 40px}
  .logo__full{height:78px}
  .top-bar{display:block}
  .hamburger{display:none}
  .header__phone{display:none}
  .header__cta{display:flex}
  .nav{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;gap:20px}
  .nav__list{flex-direction:row;align-items:center;gap:4px;flex-wrap:nowrap}
  .nav__link{padding:10px 14px;font-size:.875rem;white-space:nowrap;border-radius:var(--radius-md);position:relative;letter-spacing:.01em;font-weight:500;color:var(--gray-600)}
  .nav__link:not(.nav__dropdown-toggle)::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%) scaleX(0);width:20px;height:2px;background:var(--accent);border-radius:2px;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .nav__link:not(.nav__dropdown-toggle):hover::after,.nav__link--active:not(.nav__dropdown-toggle)::after{transform:translateX(-50%) scaleX(1)}
  .nav__dropdown-toggle svg{flex-shrink:0;width:12px;height:12px;transition:transform .25s ease}
  .nav__dropdown:hover .nav__dropdown-toggle svg{transform:rotate(180deg)}
  .nav__dropdown-toggle.nav__link--active{color:var(--primary);font-weight:600}
  .nav__link:hover{color:var(--primary);background:var(--gray-50)}
  .nav__link--active{color:var(--primary);font-weight:600}
  .nav__link--cta{display:none}
  .nav__dropdown::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px;display:none}
  .nav__dropdown:hover::after{display:block}
  .nav__dropdown-menu{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--white);border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.04);padding:8px;min-width:260px;z-index:100;border:1px solid var(--gray-100);animation:dropdownFade .25s cubic-bezier(.4,0,.2,1)}
  @keyframes dropdownFade{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  .nav__dropdown:hover .nav__dropdown-menu{display:block}
  .nav__dropdown-menu a{padding:11px 16px;border-radius:var(--radius-sm);font-size:.875rem;transition:all .2s ease;display:flex;align-items:center;gap:8px}
  .nav__dropdown-menu a:hover{background:var(--gray-50);color:var(--accent);transform:translateX(2px)}
  .hero{padding:80px 0 70px}
  .hero--fullwidth{min-height:92vh;padding:100px 0 0}
  .hero p{font-size:1.12rem}
  .hero__stats{max-width:560px}
  .hero__stat{padding:36px 24px}
  .hero__stat-value{font-size:2.8rem}
  .hero__stat-label{font-size:.85rem}
  .section{padding:72px 0}
  .services-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .advantages{grid-template-columns:repeat(3,1fr)}
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
  .regio-grid{grid-template-columns:repeat(4,1fr)}
  .contact-info{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1.4fr 1fr 1.2fr 1.4fr;gap:40px}
  .footer__bottom{flex-direction:row;justify-content:space-between}
  .form-with-image{grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
  .form-image{display:block;position:sticky;top:100px}
  .form-image img{height:100%;min-height:520px;object-position:center}
  .form-card{max-width:none}
  .floating-cta{display:none}
  .whatsapp-float{bottom:30px;right:30px}
  body{padding-bottom:0;font-size:1.125rem}
  .content-block p,.zigzag__content p,.section__subtitle{max-width:65ch}
  .page-hero{padding:64px 0 56px}
  .footer__regio-links{grid-template-columns:1fr 1fr}
  .mid-cta{padding:80px 0}
  .features-grid-section .features-grid{grid-template-columns:repeat(3,1fr)}
}

@media(min-width:1200px){
  .hero .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .hero__stats{grid-column:1/-1;max-width:100%}
  .hero__stat-value{font-size:3.2rem}
  .hero__image{margin-top:0}
  .service-card__img{height:240px}
  .logo__full{height:85px}
  .cookie-banner{bottom:0}
  .cookie-banner__inner{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
  .cookie-banner__text{flex:1}
  .cookie-banner__buttons{flex-shrink:0}
}

@media print{.header,.footer,.floating-cta,.nav,.hamburger,.cookie-banner{display:none !important}body{padding:0;color:#000}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}html{scroll-behavior:auto}}
/* SKIP LINK */
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--white);padding:12px 24px;border-radius:0 0 var(--radius-md) var(--radius-md);font-weight:700;font-size:.95rem;z-index:10001;transition:top .2s ease}
.skip-link:focus{top:0;color:var(--white)}

/* FADE-IN ANIMATION (moved from JS for CLS prevention) */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* FOCUS STYLES (WCAG 2.2) */
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:2px}
.btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.btn--primary:focus-visible,.btn--call:focus-visible,.cookie-btn--accept:focus-visible{outline-color:var(--white)}
.hamburger:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}
.nav__link:focus-visible,.nav__dropdown-toggle:focus-visible,.nav__dropdown-menu a:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}
.form-group input:focus-visible,.form-group select:focus-visible,.form-group textarea:focus-visible{outline:3px solid var(--primary);outline-offset:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(14,32,56,.12)}
.whatsapp-float:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
.regio-grid a:focus-visible,.service-card:focus-visible,.review-card:focus-visible,.advantage:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.faq-item summary:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}

/* FOCUS + STICKY HEADER: ensure focused elements scroll past header */
html{scroll-padding-top:calc(var(--header-height) + 16px)}

/* WCAG 2.2: Minimum 24x24px target size for all interactive elements */
a,button,input,select,textarea,.btn,.nav__link,.nav__dropdown-menu a,.regio-grid a,.faq-item summary,.contact-info__item{min-height:24px}
.hamburger{min-width:24px;min-height:24px}

/* iOS auto-zoom prevention: all form controls at 16px */
input,textarea,select{font-size:16px}

/* Touch device optimizations */
@media(pointer:coarse){
  a,button,input,select,textarea,.btn,.nav__link,.nav__dropdown-menu a,.regio-grid a,.faq-item summary,.contact-info__item{min-height:44px}
  .nav__link{padding:14px 16px}
  .nav__dropdown-menu a{padding:14px 16px}
  .faq-item summary{padding:22px 24px}
  .regio-grid a{padding:16px}
}

/* Diensten-dropdown: icons per dienst */
.nav__dropdown-menu a{display:flex;align-items:center;gap:10px}
.nav__dropdown-icon{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.nav__dropdown-menu a:hover .nav__dropdown-icon{color:inherit}

/* CITY PAGE HERO (shorter hero with background image) */
.hero--city{background-size:cover;background-position:center center;background-repeat:no-repeat;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.hero--city::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,20,36,.72) 0%,rgba(14,32,56,.62) 40%,rgba(22,48,79,.45) 100%);z-index:0}
.hero--city .container{position:relative;z-index:1}
@media(min-width:768px){
  .hero--city{min-height:400px}
}

/* ============================================
   VERHUISTIPS PAGE STYLES
   ============================================ */

/* Planning Grid */
.planning-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .planning-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
.planning-card {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: box-shadow var(--transition), transform var(--transition);
}
.planning-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.planning-card__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(255,98,0, 0.3);
}
.planning-card__content {
  flex: 1;
  min-width: 0;
}
.planning-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 6px;
  line-height: 1.3;
}
.planning-card__desc {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* Packing Layout */
.packing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .packing-layout {
    grid-template-columns: 2fr 3fr;
    gap: 40px;
  }
}
.packing-layout__img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}
.packing-tips .advantage {
  margin-bottom: 0;
}
.packing-tips .advantages {
  gap: 10px;
}
.pro-tip {
  background: var(--accent-light);
  border-left: 4px solid var(--accent);
  padding: 20px;
  border-radius: var(--radius-md);
  margin-top: 32px;
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.6;
}
.pro-tip strong {
  color: var(--accent);
}

/* Tip Cards */
.tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.tip-card {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow var(--transition), transform var(--transition);
}
.tip-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.tip-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.tip-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 8px;
  line-height: 1.3;
}
.tip-card p {
  font-size: 0.92rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 640px) {
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .tips-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* Saving Tips List */
.saving-tips {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: saving-tip;
}
.saving-tips li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 2px dotted var(--gray-200);
  counter-increment: saving-tip;
}
.saving-tips li:last-child {
  border-bottom: none;
}
.saving-tips li::before {
  content: counter(saving-tip);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}
.saving-tips li span {
  flex: 1;
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.saving-tips li strong {
  color: var(--gray-800);
}
.saving-tips li a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.saving-tips li a:hover {
  color: var(--accent-hover);
}

/* Cost Comparison Cards */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .compare-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.compare-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--gray-200);
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}
.compare-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.compare-card--green {
  border-top-color: var(--green);
}
.compare-card--gray {
  border-top-color: var(--gray-300);
}
.compare-card__badge {
  position: absolute;
  top: -14px;
  right: 20px;
  background: var(--green);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.3);
}
.compare-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 20px;
}
.compare-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.compare-card__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.compare-card--green .compare-card__list li::before {
  content: '\2713';
  color: var(--green);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.compare-card--gray .compare-card__list li::before {
  content: '\2717';
  color: var(--gray-400);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Compare CTA */
.compare-cta {
  text-align: center;
  margin-top: 40px;
  padding: 32px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.compare-cta p {
  font-size: 1.05rem;
  color: var(--gray-700);
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Links Grid */
.links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.link-card {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow var(--transition), transform var(--transition);
}
.link-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.link-card__icon {
  font-size: 2rem;
  margin-bottom: 14px;
  display: block;
}
.link-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 8px;
}
.link-card__desc {
  font-size: 0.93rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 768px) {
  .links-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* ============================================
   TARIEVEN PAGE STYLES
   ============================================ */

/* Woningtype List */
.woningtype-list {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.woningtype-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-100);
  gap: 16px;
  transition: background var(--transition);
}
.woningtype-item:last-child { border-bottom: none; }
.woningtype-item:hover { background: var(--gray-50); }
.woningtype-item__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woningtype-item__left strong {
  font-size: .95rem;
  color: var(--gray-800);
}
.woningtype-item__left span {
  font-size: .82rem;
  color: var(--gray-400);
}
.woningtype-item__price {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  white-space: nowrap;
}

/* Extra Services Grid */
.extra-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .extra-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.extra-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px;
  transition: box-shadow var(--transition);
}
.extra-card:hover {
  box-shadow: var(--shadow-lg);
}
.extra-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
}
.extra-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.extra-card__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dotted var(--gray-200);
  gap: 16px;
}
.extra-card__item:last-child {
  border-bottom: none;
}
.extra-card__name {
  font-size: 0.95rem;
  color: var(--gray-700);
  font-weight: 500;
}
.extra-card__price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  text-align: right;
}

/* Calculator Image Column */
@media (min-width: 768px) {
  .calc-image-col { display: block !important; }
}
@media (min-width: 768px) {
  #calculator .fade-in[style*="grid"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================
   DIENSTEN PAGE STYLES
   ============================================ */

/* Diensten 3-Column Grid */
.diensten-3col { grid-template-columns: 1fr !important; }
@media (min-width: 600px) { .diensten-3col { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 900px) { .diensten-3col { grid-template-columns: repeat(3, 1fr) !important; } }

/* Extra Services Cards (Diensten) */
.extra-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
.extra-service-card {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.extra-service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.extra-service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.extra-service-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--white);
  stroke: var(--white);
  fill: none;
}
.extra-service-card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 8px;
}
.extra-service-card p {
  font-size: 0.95rem;
  color: var(--gray-500);
  line-height: 1.65;
}
@media (min-width: 640px) {
  .extra-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .extra-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Timeline (Diensten) */
.timeline{display:flex;align-items:flex-start;justify-content:space-between;position:relative;gap:0;padding:0 10px}
.timeline::before{content:'';position:absolute;top:24px;left:calc(10% + 24px);right:calc(10% + 24px);height:3px;background:var(--gray-200);z-index:0}
.timeline__step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;position:relative;z-index:1;padding:0 12px}
.timeline__number{width:48px;height:48px;background:#FF6200;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;flex-shrink:0;margin-bottom:16px;box-shadow:0 4px 14px rgba(255,98,0,.3)}
.timeline__step h4{font-size:.98rem;margin-bottom:6px;font-weight:700}
.timeline__step p{font-size:.84rem;color:var(--gray-500);line-height:1.55;max-width:200px;margin:0 auto}
@media(max-width:768px){
  .timeline{flex-direction:column;align-items:stretch;gap:24px;padding:0}
  .timeline::before{top:0;bottom:0;left:23px;right:auto;width:3px;height:100%}
  .timeline__step{flex-direction:row;text-align:left;align-items:flex-start;gap:16px;padding:0}
  .timeline__step p{max-width:none}
  .timeline__number{flex-shrink:0}
}

/* ============================================
   DARK THEME — oranje + donkerblauw, geen wit
   Alle lichte vlakken worden donkerblauw, tekst wordt licht.
   Oranje (accent) en donkerblauw (primary) blijven behouden.
   ============================================ */
:root{
  /* nieuwe donkere oppervlakken */
  --bg:#0a1c30;            /* pagina-achtergrond (donkerst) */
  --surface:#13273e;       /* kaarten / panelen */
  --surface-2:#1d3650;     /* invoervelden / verhoogde vlakken / hover */

  /* lichte oppervlakken -> donkerblauw */
  --off-white:#0e2034;
  --gray-50:#102338;
  --gray-100:#25405c;      /* randen / scheidingslijnen */
  --gray-200:#2e4a68;      /* sterkere randen / inputs */
  --gray-300:#3b5a7b;

  /* grijstinten die als TEKST dienen -> licht */
  --gray-400:#8493a6;
  --gray-500:#9fadbe;
  --gray-600:#bdc8d5;
  --gray-700:#d7dee7;
  --gray-800:#eef2f7;

  /* accenten afgestemd op donkere achtergrond */
  --accent-light:rgba(255,98,0,.14);
  --accent-text:#ff8a3d;
  --green-light:rgba(16,185,129,.16);
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--gray-600)}

/* Standaard links zichtbaar op donker */
a{color:var(--accent-text)}
a:hover{color:var(--accent)}

/* Header (had hardcoded wit) */
.header{background:rgba(10,28,48,.92)}
.header--scrolled{background:rgba(10,28,48,.97)}
.logo,.header__cta-phone{color:var(--gray-800)}

/* Mobiel menu + dropdowns */
.nav.active{background:var(--bg)}
.nav__dropdown-menu{background:var(--surface);border-color:var(--gray-100)}
.nav__link:hover,.nav__link--active,.nav__dropdown-toggle.nav__link--active{color:var(--accent-text)}
.nav__dropdown-menu a:hover{color:var(--accent-text)}

/* Witte kaart-/panel-oppervlakken -> donkerblauw */
.service-card,.advantage,.review-card,.reviews-summary,.form-card,.calc-section,
.contact-info__item,.trust-bar,.feature-card,.package-card,.faq-item,
.planning-card,.tip-card,.compare-card,.compare-cta,.link-card,.woningtype-list,
.extra-card,.extra-service-card,.regio-grid a,.floating-cta{
  background:var(--surface);
  border-color:var(--gray-100);
}

/* Donkerblauwe kop-tekst op kaarten weer licht maken */
.zigzag__content h2,.zigzag__content h3,.package-card h3,.extra-card__title,
.reviews-summary__score{color:var(--gray-800)}
.extra-card__price{color:var(--accent-text)}
.faq-item[open] summary{color:var(--accent-text)}

/* Secties met verlooppjes die wit gebruikten */
.section--reviews{background:var(--off-white)}
.section--reviews::before{background:linear-gradient(180deg,var(--bg) 0%,var(--gray-50) 50%,var(--bg) 100%)}
.form-section{background:linear-gradient(180deg,var(--gray-50) 0%,var(--bg) 100%)}

/* Formulier-velden */
.form-group input,.form-group select,.form-group textarea{
  background:var(--surface-2);color:var(--gray-700);border-color:var(--gray-200);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  background:var(--surface-2);border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,98,0,.15);
}
.form-group input::placeholder{color:var(--gray-400)}
.calc-item input[type="number"]{background:var(--surface-2);color:var(--gray-700);border-color:var(--gray-200)}

/* Trust-badge overlay op foto (had hardcoded wit) */
.form-image__trust{background:rgba(10,28,48,.85)}

/* Knoppen die wit waren */
.btn--white{background:var(--surface-2);color:var(--gray-800);border:1px solid var(--gray-300);box-shadow:none}
.btn--white:hover{background:var(--gray-100);color:var(--white)}
.btn--outline{color:var(--gray-800);border-color:var(--gray-300)}
.btn--outline:hover{background:var(--surface-2);color:var(--white);border-color:var(--gray-300)}

/* Footer expliciet donker (basis was --gray-800, nu licht) */
.footer{background-color:#081424}

/* Lichte icoon-vlakjes -> getinte oranje/groen i.p.v. wit/lichtroze */
.feature-card__icon{background:rgba(255,98,0,.16)}
.advantage__check,.form-success__icon{background:rgba(16,185,129,.16)}

/* Hover-toestanden die lichtroze werden, fris houden */
.regio-grid a:hover{background:var(--surface-2);color:var(--accent-text)}

/* Witte ring rond stappen-nummer wegwerken */
.process-step__number{border-color:var(--bg)}

/* ============================================
   GOOGLE-STIJL WITTE REVIEWKAARTEN + ANIMATIE
   Witte kaarten met avatar, geverifieerd-vinkje
   en het Google-logo, op de donkere sectie.
   ============================================ */
.review-card{
  background:#fff;
  border:1px solid #e8eaed;
  border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(60,64,67,.10),0 6px 18px rgba(60,64,67,.06);
  padding:22px 22px 26px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;
}
.review-card::before{display:none}

.review-card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.review-card__avatar{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.15rem;
  line-height:1;user-select:none;box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.review-card__meta{flex:1 1 auto;min-width:0}
.review-card__author{
  display:flex;align-items:center;gap:5px;
  font-weight:600;font-size:.95rem;color:#202124;
}
.review-card__verified{width:15px;height:15px;flex:0 0 auto}
.review-card__date{font-size:.78rem;color:#5f6368;margin-top:1px}
.review-card__google{
  width:22px;height:22px;flex:0 0 auto;align-self:flex-start;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.review-card__stars{color:#fbbc04;font-size:1rem;letter-spacing:2px;margin-bottom:10px}
.review-card__text{color:#3c4043;font-style:normal;font-size:.92rem;line-height:1.65;margin-bottom:0}

/* Hover-interactie */
.review-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(60,64,67,.18);border-color:#dadce0}
.review-card:hover .review-card__google{transform:scale(1.14) rotate(-8deg)}
.review-card:hover .review-card__avatar{transform:scale(1.07)}

/* Gestaffelde onthul-animatie bij in-beeld komen (.visible via IntersectionObserver) */
.review-card.fade-in{opacity:0;transform:none}
.review-card.fade-in.visible{opacity:1;animation:reviewReveal .7s cubic-bezier(.22,1,.36,1) backwards}
@keyframes reviewReveal{
  0%{opacity:0;transform:translateY(34px) scale(.94)}
  55%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.review-card:nth-child(1).visible{animation-delay:0s}
.review-card:nth-child(2).visible{animation-delay:.09s}
.review-card:nth-child(3).visible{animation-delay:.18s}
.review-card:nth-child(4).visible{animation-delay:.27s}
.review-card:nth-child(5).visible{animation-delay:.36s}
.review-card:nth-child(6).visible{animation-delay:.45s}

@media (prefers-reduced-motion:reduce){
  .review-card.fade-in.visible{animation:none}
  .review-card,
  .review-card__google,
  .review-card__avatar{transition:none}
  .review-card:hover{transform:none}
}

/* ============================================
   FOOTER — één dekkende achtergrondfoto + extra
   afwerking en animaties
   ============================================ */
/* Foto in CSS (pad relatief t.o.v. dit stylesheet => werkt op
   elke pagina). De shorthand zet alle background-props in één keer,
   zodat de dark-theme-regel niets meer kan resetten. */
.footer.footer--bg{
  background:#081424 url('../img/hero-team.webp') center 30%/cover no-repeat;
}

/* Gelaagde overlay: subtiele accent-gloed bovenin, donkerder
   naar onderen voor leesbaarheid van de tekst. */
.footer.footer--bg::before{
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(255,98,0,.12) 0%, rgba(255,98,0,0) 50%),
    linear-gradient(180deg, rgba(8,20,36,.56) 0%, rgba(8,20,36,.84) 48%, rgba(6,16,30,.97) 100%);
}

/* Geanimeerde accent-lijn bovenaan de footer */
.footer.footer--bg::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg, transparent 0%, var(--accent) 25%, #ffc08a 50%, var(--accent) 75%, transparent 100%);
  background-size:200% 100%;
  animation:footerSheen 7s linear infinite;
}
@keyframes footerSheen{from{background-position:200% 0}to{background-position:0% 0}}

/* CTA-banner bovenin verfijnen */
.cta-banner h2{position:relative;display:inline-block}
.cta-banner h2::after{
  content:'';position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  width:60px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),#ffb070,var(--accent));
  background-size:200% 100%;
  animation:footerSheen 4s linear infinite;
}
.cta-banner .btn--primary{
  position:relative;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
  animation:ctaGlow 2.8s ease-in-out infinite;
}
.cta-banner .btn--primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 34px rgba(255,98,0,.55);
  animation-play-state:paused;
}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 8px 24px rgba(255,98,0,.30)}
  50%{box-shadow:0 12px 32px rgba(255,98,0,.55)}
}

/* Kolomtitels met accentstreepje dat groeit bij hover */
.footer__grid>div h4{position:relative;padding-bottom:10px}
.footer__grid>div h4::after{
  content:'';position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;
  background:var(--accent);opacity:.9;transition:width .35s cubic-bezier(.22,1,.36,1);
}
.footer__grid>div:hover h4::after{width:48px}

/* Footer-links: schuiven verder in + accentkleur bij hover */
.footer__links a:hover{transform:translateX(6px);color:var(--accent)}

/* Regio-tags interactiever */
.footer__regio-links span{transition:color .2s ease,transform .2s ease;cursor:default}
.footer__regio-links span:hover{color:#fff;transform:translateX(3px)}

/* Onderste balk-links: animerende onderstreping bij hover */
.footer__legal a{position:relative;transition:color .2s ease}
.footer__legal a::after{
  content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;
  background:var(--accent);transition:width .25s ease;
}
.footer__legal a:hover::after{width:100%}

/* Scroll-gedreven onthul-animatie — alleen waar ondersteund,
   anders blijft alles gewoon zichtbaar (geen JS nodig). */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .footer .cta-banner,
    .footer__grid>div,
    .footer__bottom{
      animation:footerReveal .9s cubic-bezier(.22,1,.36,1) both;
      animation-timeline:view();
      animation-range:entry 0% entry 75%;
    }
    .footer__grid>div:nth-child(2){animation-range:entry 6% entry 80%}
    .footer__grid>div:nth-child(3){animation-range:entry 11% entry 85%}
    .footer__grid>div:nth-child(4){animation-range:entry 16% entry 90%}
  }
}
@keyframes footerReveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* Bewegingsarm: alle continue footer-animaties uit */
@media (prefers-reduced-motion:reduce){
  .footer.footer--bg::after,
  .cta-banner h2::after,
  .cta-banner .btn--primary{animation:none}
}

/* ============================================
   Lucide-iconen in tip-/link-cards
   (vervangen de oude emoji-iconen)
   ============================================ */
.tip-card__icon{background:var(--accent-light);color:var(--accent)}
.tip-card__icon svg{width:24px;height:24px;display:block}
.tip-card:hover .tip-card__icon svg{animation:iconPop .4s cubic-bezier(.34,1.56,.64,1)}

.link-card__icon{color:var(--accent);line-height:0;display:block}
.link-card__icon svg{width:34px;height:34px;display:block}
.link-card:hover .link-card__icon svg{animation:iconPop .4s cubic-bezier(.34,1.56,.64,1)}

@keyframes iconPop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .tip-card:hover .tip-card__icon svg,
  .link-card:hover .link-card__icon svg{animation:none}
}

/* ============================================================
   UNIEKE ANIMATIES & MICRO-INTERACTIES  (site-breed)
   Onderscheidt de site van het standaard-template:
   genummerde dienst-kaarten, 3D-tilt, glans-knoppen,
   scroll-voortgangsbalk, pulserende labels en meer.
   ============================================================ */

/* ---- Scroll-voortgangsbalk bovenaan de pagina ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:10000;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),#ffb070,var(--accent));
  box-shadow:0 0 12px rgba(255,98,0,.55);
  transition:width .08s linear;
}

/* ---- Vloeiendere, rijkere scroll-reveal (bouwt op .fade-in) ---- */
.fade-in{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}

/* ---- Primaire knop: glans-sweep + iets levendiger ---- */
.btn--primary{isolation:isolate}
.btn--primary::before{
  content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;
}
.btn--primary:hover::before{left:140%}

/* ---- Sectie-label met pulserende accent-stip ---- */
.section__label::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,98,0,.55);animation:labelPulse 2.2s ease-out infinite;
}
@keyframes labelPulse{
  0%{box-shadow:0 0 0 0 rgba(255,98,0,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,98,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,98,0,0)}
}

/* ---- Dienst-kaarten: genummerd + 3D-tilt-klaar + badge-animatie ---- */
.services-grid{counter-reset:svc;perspective:1200px}
.service-card{counter-increment:svc;transform-style:preserve-3d;will-change:transform}
.service-card::before{
  content:counter(svc,decimal-leading-zero);
  position:absolute;top:12px;right:14px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:800;letter-spacing:.4px;color:#fff;
  background:rgba(10,20,36,.55);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.28);
  transition:background .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1),border-color .4s;
}
.service-card:hover::before{background:var(--accent);border-color:transparent;transform:scale(1.12) rotate(-8deg)}

/* ---- Voordeel-kaarten: accent-balk schuift in + vinkje popt ---- */
.advantage{position:relative;overflow:hidden}
.advantage::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.advantage:hover::before{transform:scaleY(1)}
.advantage:hover .advantage__check{animation:iconPop .45s cubic-bezier(.34,1.56,.64,1)}

/* ---- Mid-CTA: zwevende accent-gloed ---- */
.mid-cta::after{animation:floatBlob 10s ease-in-out infinite}
.mid-cta::before{
  content:'';position:absolute;top:-25%;right:-8%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,98,0,.10) 0%,transparent 70%);
  animation:floatBlob 13s ease-in-out infinite reverse;pointer-events:none;
}
@keyframes floatBlob{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-22px)}}

/* ---- Algemene kaart-tilt-basis (JS vult de rotatie in) ---- */
.feature-card,.package-card,.link-card{will-change:transform}

/* ---- Navigatie-links: accent-onderstreping die ingroeit ---- */
@media (min-width:993px){
  .nav__link{position:relative}
  .nav__link::after{
    content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;width:auto;
    background:var(--accent);transform:scaleX(0);transform-origin:left;
    transition:transform .28s cubic-bezier(.22,1,.36,1);
  }
  .nav__link:hover::after,.nav__link--active::after{transform:scaleX(1)}
}

/* ---- In-content links: nette hover-onderstreping ---- */
.zigzag__content a:not(.btn),.section__subtitle a:not(.btn){
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s ease;padding-bottom:1px;
}
.zigzag__content a:not(.btn):hover,.section__subtitle a:not(.btn):hover{background-size:100% 2px}

/* ---- Zachte "in beeld" schaal voor zigzag-foto's ---- */
.zigzag__img{transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
.zigzag:hover .zigzag__img{transform:scale(1.02)}

/* ============================================================
   Statistieken-band met tel-animatie
   ============================================================ */
.stats-band{
  position:relative;overflow:hidden;padding:54px 0;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--primary-light) 100%);
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);
}
.stats-band__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 130% at 50% 0%,rgba(255,98,0,.18) 0%,transparent 60%);
}
.stats-band__grid{
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:30px 16px;text-align:center;
}
.stat{position:relative}
.stat__num{
  font-size:clamp(2rem,5vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,#ffffff 0%,#ffd9bd 55%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat__label{
  margin-top:9px;font-size:.82rem;font-weight:600;letter-spacing:.5px;
  color:rgba(255,255,255,.78);text-transform:uppercase;
}
@media (min-width:768px){
  .stats-band__grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .stat:not(:last-child)::after{
    content:'';position:absolute;right:-8px;top:50%;transform:translateY(-50%);
    width:1px;height:48px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent);
  }
}

/* ---- Process-timeline: nummer popt + lijn vult op bij scroll ---- */
.process-step__number{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease}
.process-step.visible .process-step__number{animation:stepPop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes stepPop{0%{transform:scale(.5);opacity:.2}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
.process-step:hover .process-step__number{transform:scale(1.08);box-shadow:0 8px 20px rgba(255,98,0,.4)}
.process-section .process-timeline::after{
  content:'';position:absolute;left:23px;top:0;width:2px;height:0;z-index:0;
  background:linear-gradient(180deg,var(--accent),#ffb070);transition:height 1.3s ease;
}
.process-section .process-timeline.filled::after{height:100%}
@media (min-width:768px){
  .process-section .process-timeline::after{
    left:10%;top:24px;width:0;height:2px;
    background:linear-gradient(90deg,var(--accent),#ffb070);transition:width 1.5s ease;
  }
  .process-section .process-timeline.filled::after{height:2px;width:80%}
}

/* ============================================================
   Trust-bar als naadloze bewegende marquee (ticker)
   ============================================================ */
.trust-bar{overflow:hidden;position:relative;padding:16px 0}
.trust-bar::before,.trust-bar::after{
  content:'';position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;
}
.trust-bar::before{left:0;background:linear-gradient(90deg,var(--surface) 18%,transparent)}
.trust-bar::after{right:0;background:linear-gradient(270deg,var(--surface) 18%,transparent)}
.trust-bar__track{
  display:flex;width:max-content;align-items:center;
  animation:trustMarquee 26s linear infinite;will-change:transform;
}
.trust-bar:hover .trust-bar__track{animation-play-state:paused}
.trust-bar .trust-item{padding:0 30px;position:relative;flex:0 0 auto}
.trust-bar .trust-item::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5;
}
@keyframes trustMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Bewegingsarm: alle nieuwe continue/zware animaties uit ---- */
@media (prefers-reduced-motion:reduce){
  .section__label::before,
  .mid-cta::after,.mid-cta::before{animation:none}
  .scroll-progress{display:none}
  .service-card{transform:none !important}
  .process-step.visible .process-step__number{animation:none}
  .process-section .process-timeline::after{transition:none}
  .trust-bar__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;gap:6px 0}
  .trust-bar .trust-item[aria-hidden]{display:none}
  .trust-bar::before,.trust-bar::after{display:none}
}

/* ============================================================
   SITE-BREDE "WOW"-LAAG  (elke pagina)
   Hero-intro, zigzag-zijwaartse reveal, FAQ, formulieren,
   prijs-kaarten, feature-/contact-iconen + auto scroll-reveal
   ============================================================ */

/* ---- Subpagina-hero: inhoud komt gestaffeld binnen bij laden ---- */
@media (prefers-reduced-motion:no-preference){
  .hero--fullwidth .container>div:first-child>*{animation:heroUp .85s cubic-bezier(.22,1,.36,1) both}
  .hero--fullwidth .container>div:first-child>*:nth-child(1){animation-delay:.10s}
  .hero--fullwidth .container>div:first-child>*:nth-child(2){animation-delay:.20s}
  .hero--fullwidth .container>div:first-child>*:nth-child(3){animation-delay:.30s}
  .hero--fullwidth .container>div:first-child>*:nth-child(4){animation-delay:.40s}
  .hero--fullwidth .container>div:first-child>*:nth-child(5){animation-delay:.50s}
  .hero__stats{animation:heroUp .85s cubic-bezier(.22,1,.36,1) .55s both}
  .hero__badge{will-change:transform}
}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* Hero-stats lichten op bij hover */
.hero__stat{transition:background .3s ease,transform .3s ease}
.hero__stat:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}

/* ---- Zigzag: foto en tekst schuiven vanaf tegenovergestelde kanten in ---- */
.zigzag.fade-in{transform:none}
.zigzag.fade-in .zigzag__img{opacity:0;transform:translateX(-46px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.zigzag.fade-in .zigzag__content{opacity:0;transform:translateX(46px);transition:opacity .7s cubic-bezier(.22,1,.36,1) .1s,transform .7s cubic-bezier(.22,1,.36,1) .1s}
.zigzag--reverse.fade-in .zigzag__img{transform:translateX(46px)}
.zigzag--reverse.fade-in .zigzag__content{transform:translateX(-46px)}
.zigzag.fade-in.visible .zigzag__img,
.zigzag.fade-in.visible .zigzag__content{opacity:1;transform:none}

/* ---- FAQ: accent-balk + antwoord dat invouwt ---- */
.faq-item{position:relative}
.faq-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.22,1,.36,1);z-index:1}
.faq-item:hover::before,.faq-item[open]::before{transform:scaleY(1)}
.faq-item summary::after{transition:transform .3s ease,color .3s ease}
.faq-item summary:hover{color:var(--accent-text)}
.faq-item[open] .faq-item__answer,.faq-item[open] .faq-answer,.faq-item[open]>p{animation:faqReveal .38s ease}
@keyframes faqReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---- Formulier: label kleurt + veld tilt licht bij focus ---- */
.form-group:focus-within label{color:var(--accent-text)}
.form-group input,.form-group select,.form-group textarea{transition:border-color .25s,box-shadow .25s,background .25s,transform .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{transform:translateY(-1px)}

/* ---- Prijs-kaarten: uitgelichte kaart gloeit, badge zweeft ---- */
.package-card--featured{animation:featuredGlow 3.2s ease-in-out infinite}
@keyframes featuredGlow{0%,100%{box-shadow:0 8px 30px rgba(255,98,0,.12)}50%{box-shadow:0 12px 42px rgba(255,98,0,.32)}}
.package-card__badge{animation:badgeFloat 2.6s ease-in-out infinite}
@keyframes badgeFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}

/* ---- Feature-kaart-icoon ---- */
.feature-card__icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.feature-card:hover .feature-card__icon{transform:scale(1.08) rotate(-6deg)}
.feature-card:hover .feature-card__icon svg{animation:iconPop .45s cubic-bezier(.34,1.56,.64,1)}

/* ---- Contact-kaarten: gecentreerd medaillon (optie 5) ---- */
.contact-info__item{
  flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:32px 22px;border-radius:var(--radius-lg);
  background:radial-gradient(120% 80% at 50% 0%,#1a3151,#12263c);
  border:1px solid var(--gray-100);box-shadow:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.contact-info__item:hover{transform:translateY(-5px);border-color:#3a577a;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.contact-info__item>div:not(.contact-info__icon){flex:none;width:100%}
.contact-info__item h3,.contact-info__item h4{font-size:1.06rem;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:-.01em}
.contact-info__item p:first-of-type{color:#fff;font-weight:600}
.contact-info__icon{
  flex:none;width:64px;height:64px;margin:0 auto 8px;border-radius:50%;
  display:grid;place-items:center;position:relative;color:var(--accent-text);
  background:conic-gradient(from 140deg,rgba(255,98,0,.28),rgba(216,166,87,.20),rgba(255,98,0,.28));
  transition:color .3s ease;
}
.contact-info__icon::before{content:'';position:absolute;inset:4px;border-radius:50%;background:#11243a}
.contact-info__icon svg{position:relative;z-index:1}
.contact-info__item:hover .contact-info__icon{color:#fff}

/* ---- Algemene scroll-reveal (JS tagt blokken met .reveal) ---- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hero--fullwidth .container>div:first-child>*,.hero__stats{animation:none}
  .zigzag.fade-in .zigzag__img,.zigzag.fade-in .zigzag__content{opacity:1;transform:none;transition:none}
  .package-card--featured,.package-card__badge{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}