/* ===========================================
   ROOT TOKENS - DARK THEME (DEFAULT)
=========================================== */
:root{
  --bg:#0a0a0c;
  --bg-1:#121216;
  --bg-2:#1a1a20;
  --bg-3:#23232a;
  --bg-dark:#050508;
  --bg-dark2:#0f0f15;
  --line:rgba(255,255,255,0.08);
  --line2:rgba(255,255,255,0.12);
  --text:#f4f4f8;
  --muted:#a0a0b0;
  --muted2:#787890;
  --red:#ff3d33;
  --purple:#8b5cf6;
  --orange:#ff6b35;
  --yellow:#ffc107;
  --green:#00c896;
  --teal:#00b4d8;
  --pink:#f72585;
  --indigo:#3a0ca3;
  --shadow:0 4px 32px rgba(0,0,0,0.4);
  --r:12px;
  --r-lg:20px;
  --trans:.18s ease;
}

[data-theme="light"]{
  --bg:#ffffff;
  --bg-1:#f8f5f0;
  --bg-2:#efe8de;
  --bg-dark:#1a1535;
  --bg-dark2:#2d2648;
  --line:rgba(26,21,53,0.10);
  --text:#1a1535;
  --muted:#6b6380;
  --muted2:#5a5370;
}

/* ===========================================
   RESET & BASE
=========================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.05;letter-spacing:-0.02em;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* ===========================================
   SPA PAGE ROUTING
=========================================== */
.page {display:none;}
.page.active {display:block;}

/* ===========================================
   LAYOUT & UTILITIES
=========================================== */
.wrap{max-width:1220px;margin:0 auto;padding:0 32px;}
.section{padding:96px 0;}
@media(max-width:768px){.section{padding:64px 0;} .wrap{padding:0 20px;}}

/* ===========================================
   HEADER
=========================================== */
header{position:sticky;top:0;z-index:100;background:rgba(247,244,239,0.95);border-bottom:1px solid var(--line);}
[data-theme="light"] header{background:rgba(255,255,255,0.95);}

.nav{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:70px;}
.nav-logo{display:flex;align-items:center;gap:12px;cursor:pointer;}
.nav-logo .logo-text .lo-main{font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;letter-spacing:3px;color:var(--text);}
.nav-logo .logo-text .lo-sub{font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;}
.navlinks{display:flex;gap:4px;align-items:center;}
.nav-btn{padding:10px 16px;font-size:13.5px;color:var(--muted2);border-radius:999px;}
.nav-btn:hover{color:var(--purple);}
.navcta{display:flex;align-items:center;gap:12px;}
.theme-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--muted2);border-radius:8px;cursor:pointer;}
@media(max-width:960px){.navlinks{display:none;}}

/* ===========================================
   HEADER - DARK/LIGHT FIX
=========================================== */
/* Dark mode header (standaard) - donkere achtergrond */
header {
  background: rgba(10,10,12,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] header {
  background: rgba(10,10,12,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Light mode header - lichte achtergrond */
[data-theme="light"] header {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid rgba(26,21,53,0.10) !important;
}

/* Logo tekst kleuren - altijd zichtbaar */
.nav-logo .logo-text .lo-main {
  color: #fff !important;
}

.nav-logo .logo-text .lo-sub {
  color: rgba(255,255,255,0.7) !important;
}

[data-theme="light"] .nav-logo .logo-text .lo-main {
  color: #1a1535 !important;
}

[data-theme="light"] .nav-logo .logo-text .lo-sub {
  color: #5a5370 !important;
}

/* Nav knoppen in dark mode */
[data-theme="dark"] .nav-btn {
  color: rgba(255,255,255,0.8) !important;
}

[data-theme="dark"] .theme-toggle {
  color: rgba(255,255,255,0.7) !important;
}

/* Nav knoppen in light mode */
[data-theme="light"] .nav-btn {
  color: #5a5370 !important;
}

[data-theme="light"] .theme-toggle {
  color: #5a5370 !important;
}

/* Toggle button wit in beide modi (contrast) */
.theme-toggle {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
}

[data-theme="light"] .theme-toggle {
  background: rgba(26,21,53,0.05);
  border: 1px solid rgba(26,21,53,0.1);
}

/* ===========================================
   BUTTONS - WORKING IN BOTH THEMES
=========================================== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;border-radius:999px;transition:transform .18s,box-shadow .18s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.btn-orange{background:var(--orange);color:#fff !important;}
.btn-purple{background:var(--purple);color:#fff !important;}
.btn-outline-dark{background:transparent;color:var(--text);border:2px solid var(--line);}
.btn-lg{padding:16px 36px;font-size:14px;}
.btn-sm{padding:9px 18px;font-size:12px;}

/* Dark mode button overrides */
[data-theme="dark"] .btn-outline-dark{color:#fff !important;border-color:rgba(255,255,255,0.3) !important;background:rgba(255,255,255,0.05);}
[data-theme="dark"] .hero .btn-outline-dark{color:#fff !important;border-color:rgba(255,255,255,0.3) !important;background:rgba(255,255,255,0.05);}

/* Light mode button overrides */
[data-theme="light"] .btn-outline-dark{color:#1a1535 !important;border-color:rgba(26,21,53,0.25) !important;background:rgba(26,21,53,0.05);}
[data-theme="light"] .hero .btn-outline-dark{color:#fff !important;border-color:rgba(255,255,255,0.3) !important;background:rgba(255,255,255,0.1) !important;}
[data-theme="light"] .cta-section .btn-outline-dark{color:#fff !important;border-color:rgba(255,255,255,0.3) !important;background:rgba(255,255,255,0.15) !important;}

/* ===========================================
   HERO SECTION
=========================================== */
.hero{background:linear-gradient(135deg,#1a1535 0%,#3a0ca3 50%,#7c3aed 100%);min-height:calc(100vh - 70px);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto;}}
.hero-left{padding:80px 60px 80px 48px;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:900px){.hero-left{padding:60px 20px;}}
.hero h1{font-size:clamp(42px,6vw,78px);color:#fff;margin-bottom:20px;}
.hero h1 .red{color:var(--red);}
.hero p.lead{color:rgba(255,255,255,0.75);font-size:17px;max-width:500px;margin-bottom:32px;}
.hero-right{padding:80px 0;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(255,255,255,0.1);}
@media(max-width:900px){.hero-right{border-left:none;padding:40px 20px;}}

.hero-badge{margin-bottom:16px;}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.hero-pill{background:rgba(255,255,255,0.12);padding:8px 14px;border-radius:999px;font-size:13px;color:rgba(255,255,255,0.9);display:flex;align-items:center;flex-shrink:0;}
.hero-trust{margin-top:24px;display:flex;align-items:center;gap:16px;}
.hero-trust span{font-size:13px;color:rgba(255,255,255,0.8);}

.hero-wordmark{text-align:center;width:100%;}
.hero-wordmark div:first-child{font-family:'Montserrat',sans-serif;font-weight:800;font-size:48px;letter-spacing:12px;color:#fff;display:block;}
.hero-wordmark div:last-child{font-size:11px;font-weight:600;letter-spacing:10px;color:rgba(255,255,255,0.5);text-transform:uppercase;margin-top:10px;}
@media(max-width:900px){.hero-wordmark div:first-child{font-size:32px;letter-spacing:6px;}}

/* ===========================================
   ANNOUNCEMENT TICKER
=========================================== */
.ticker-section{background:linear-gradient(90deg,#0f0f15,#1a1535) !important;color:#fff !important;padding:18px 0;overflow:hidden;}
[data-theme="light"] .ticker-section{background:linear-gradient(90deg,var(--purple),var(--pink)) !important;color:#fff !important;}

.ticker-content{display:flex;align-items:center;gap:48px;animation:tickerScroll 24s linear infinite;white-space:nowrap;}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ===========================================
   USP SECTION
=========================================== */
.usp-section{padding:48px 0 0;}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:900px){.usp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.usp-grid{grid-template-columns:1fr;}}
.usp-card{background:var(--bg-1);padding:28px 24px;border-radius:16px;border:1px solid var(--line);transition:transform .18s,box-shadow .18s;}
.usp-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(26,21,53,0.12);}
.usp-icon{width:44px;height:44px;background:var(--bg);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}

/* ===========================================
   SERVICES GRID
=========================================== */
.diensten-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:700px){.diensten-grid{grid-template-columns:1fr;}}
.dienst-card{background:var(--bg-1);padding:44px 36px;border-radius:20px;box-shadow:0 4px 32px rgba(26,21,53,0.10);transition:transform .18s;}
.dienst-card:hover{transform:translateY(-6px);}
.dienst-card h3{font-size:20px;color:var(--text);margin-bottom:12px;}
.dienst-card p{color:var(--muted2);font-size:15px;line-height:1.65;margin-bottom:18px;}
.dc-icon{width:52px;height:52px;border-radius:14px;background:var(--bg);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.dc-excerpt{color:var(--muted2);font-size:15px;line-height:1.65;margin-bottom:16px;}
.dc-features{list-style:none;margin-bottom:18px;padding-left:4px;}
.dc-features li{font-size:13.5px;color:var(--muted2);padding:6px 0;display:flex;align-items:flex-start;}
.dc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.dc-tags span{font-size:11px;font-weight:600;padding:4px 12px;background:var(--bg);border-radius:999px;color:var(--muted2);}

/* ===========================================
   STATS SECTION
=========================================== */
.stats-section{background:var(--bg-dark) !important;color:#fff !important;padding:80px 0;}
[data-theme="light"] .stats-section{background:linear-gradient(135deg,var(--purple),var(--pink)) !important;color:#fff !important;}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{text-align:center;}
.stat-number{font-size:42px;font-weight:900;color:#fff;line-height:1;}
.stat-label{font-size:14px;color:rgba(255,255,255,0.7);margin-top:8px;}

/* ===========================================
   PROCESS STEPS
=========================================== */
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
@media(max-width:1000px){.process-steps{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.process-steps{grid-template-columns:1fr;}}
.process-step{text-align:center;padding:32px 16px;background:var(--bg-1);border-radius:16px;border:1px solid var(--line);}
.step-number{font-size:20px;font-weight:800;color:var(--purple);margin-bottom:12px;}
.process-step h4{font-size:16px;margin-bottom:8px;}
.process-step p{font-size:14px;color:var(--muted2);}

/* ===========================================
   REVIEWS
=========================================== */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr;}}
.review-card{background:var(--bg-1);padding:28px;border-radius:16px;border:1px solid var(--line);}
.review-stars{margin-bottom:12px;}
.review-blockquote{margin:16px 0;font-size:15px;color:var(--text);line-height:1.65;}
.author-name{font-size:14px;font-weight:600;color:var(--text);margin-top:16px;}
.author-role{font-size:12px;color:var(--muted);margin-top:2px;}

/* ===========================================
   CTA SECTION
=========================================== */
.cta-section{background:linear-gradient(135deg,#1a1535 0%,#3a0ca3 100%);color:#fff !important;padding:96px 0;}
[data-theme="light"] .cta-section{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff !important;}
.cta-badges{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;align-items:center;}
.cta-badges div{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.8) !important;}
@media(max-width:600px){.cta-badges{flex-direction:column;gap:12px;}}

/* ===========================================
   DETAIL PAGES
=========================================== */
.dienst-detail-hero{background:linear-gradient(135deg,#1a1535 0%,#3a0ca3 50%,#7c3aed 100%);padding:120px 0 80px;color:#fff;}
.detail-hero-title{font-size:clamp(36px,5vw,58px);margin-bottom:16px;}
.detail-hero-lead{color:rgba(255,255,255,0.8);font-size:18px;max-width:580px;margin-bottom:32px;}
.detail-quick-stats{display:flex;gap:24px;margin-top:28px;}
.detail-stat-num{font-size:28px;font-weight:800;color:#fff;}
.detail-stat-label{font-size:12px;color:rgba(255,255,255,0.6);text-transform:uppercase;}
.detail-section{background:var(--bg);padding:80px 0;}
.detail-section.alt{background:var(--bg-1);}
.detail-content{max-width:960px;margin:0 auto;padding:0 32px;}
.detail-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:40px 0;}
@media(max-width:760px){.detail-feature-grid{grid-template-columns:1fr;}}
.detail-feature-card{background:var(--bg-1);border:1px solid var(--line);padding:28px;border-radius:20px;}
.detail-feature-card h4{font-size:17px;color:var(--text);margin-bottom:10px;}
.detail-feature-card p{font-size:14.5px;color:var(--muted2);}
.detail-feature-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--purple);}
.detail-feature-ico i{width:24px;height:24px;color:#fff;}

/* ===========================================
   PACKETS / PRICING
=========================================== */
.zak-pakketten{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);}
@media(max-width:900px){.zak-pakketten{grid-template-columns:1fr;}}
.zak-pakket{background:var(--bg-1);padding:44px 36px;position:relative;}
.zak-pakket.featured{background:var(--bg-2);border-top:3px solid var(--red);}
.zak-pakket-label{font-size:10px;font-weight:700;color:var(--red);text-transform:uppercase;margin-bottom:14px;}
.zak-pakket h3{font-size:22px;color:var(--text);margin-bottom:10px;}
.zak-pakket .zp-features{list-style:none;margin-bottom:28px;}
.zak-pakket .zp-features li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted2);}
.zak-pakket .zp-features li:last-child{border-bottom:none;}
.zak-pakket .zp-price{font-size:28px;font-weight:900;color:var(--text);margin-bottom:8px;}
.zp-featured-badge{position:absolute;top:0;right:32px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:4px 12px;}

/* ===========================================
   FOOTER (AANPASSEN)
=========================================== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:1;}
.foot-top{padding:64px 0 48px;}

/* AANPASSING: 5 kolommen ipv 4 (brand + diensten + bedrijf + juridisch + contact) */
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:48px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:576px){.foot-grid{grid-template-columns:1fr;}}

.foot-logo-wrap{display:flex;align-items:center;gap:12px;margin-bottom:18px;cursor:pointer;}
.foot-desc{color:var(--muted);font-size:14px;line-height:1.65;max-width:280px;margin-bottom:24px;}
.foot-social{display:flex;gap:8px;}
.foot-social a{width:38px;height:38px;background:rgba(44,38,64,0.08);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);}
.foot-col h4{font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
.foot-col ul{list-style:none;}
.foot-col ul li{margin-bottom:11px;}

/* NIEUW: Contact links met iconen */
.foot-col ul li a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.foot-col ul li a:hover {
  opacity: 0.7;
}

.foot-contact-list li i {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* NIEUW: Nieuwsbrief styling */
.foot-newsletter{margin-top:24px;}
.foot-newsletter p{font-size:13px;color:var(--muted);margin-bottom:12px;}
.newsletter-form{display:flex;gap:8px;}
.newsletter-form input{
  flex:1;
  background:rgba(44,38,64,0.08);
  border:none;
  padding:10px 14px;
  font-size:13px;
  color:#fff;
  border-radius:8px;
}
.newsletter-form input::placeholder{color:var(--muted);}
.newsletter-form button{
  background:transparent;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:0 8px;
}

/* NIEUW: Bedrijfsinfo rij */
.foot-business-info{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.business-details{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  font-size:12px;
  color:var(--muted);
}

.business-details strong{color:#fff;}

.foot-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}

/* NIEUW: Footer bottom aanpassing */
@media(max-width:576px){
  .foot-bottom{flex-direction:column;gap:8px;text-align:center;}
}

/* ===========================================
   BUTTONS & EFFECTS (bestaand - NIET WIJZIGEN)
=========================================== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.btn-orange:hover {
  animation: pulse 0.3s ease-in-out;
}

.zak-pakket.featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

details[open] summary i { transform: rotate(180deg); }

/* ===========================================
   LABEL TAG
=========================================== */
.label-tag{font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);}

/* ===========================================
   SECTION ALT
=========================================== */
.section-alt {
  background: var(--bg-1);
.section { padding:80px 0; }
.section-alt { background:var(--bg-1); padding:80px 0; }
.detail-content { max-width:1100px; margin:0 auto; }
.label-tag { /* styles */ }
.review-stars { display:flex; gap:4px; }
.dc-tag { /* styles */ }
}

/* ===========================================
   BUTTON GREEN
=========================================== */
.btn-green {
  background: #25D366 !important;
  color: #fff !important;
}

/* ===========================================
   BUTTON OUTLINE LIGHT
=========================================== */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
}

/* ===========================================
   DETAIL CONTENT
=========================================== */
.detail-content {
  max-width: 1100px;
}

/* ===========================================
   REVIEW STARS
=========================================== */
.review-stars {
  display: flex;
  gap: 4px;
}

/* ===========================================
   LABEL TAG
=========================================== */
.label-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

/* ===========================================
   DC-TAGS
=========================================== */
.dc-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  background: var(--bg-1);
  border-radius: 999px;
  color: var(--text);
}