/* ========== Lander Visuals - Central Stylesheet ========== */

/* ---------- Base ---------- */
:root { color-scheme: light dark; }
body { background:#fff; color:#0a0a0a; transition: color .3s ease, background-color .3s ease; }
body.on-dark { background:#0a0a0a; color:#fff; }
.soft-card { box-shadow:0 10px 30px rgba(0,0,0,.06) }

/* ---------- Sections ---------- */
.section { transition: color .3s ease, background-color .3s ease; }
.section--dark { background:#0a0a0a; color:#fff; }
.section--light { background:#fff; color:#0a0a0a; }

/* ---------- Muted text ---------- */
.muted { opacity: 0.7; }
.section--dark .muted { color:#c7c7c7 }

/* ---------- Cards ---------- */
.is-card { border:1px solid rgba(0,0,0,.12); background:#fff }
.section--dark .is-card { border-color:rgba(255,255,255,.18); background:#111 }

/* ---------- Header / Navigation ---------- */
.nav-shell {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  background: rgba(255,255,255,.82);
  color: #0a0a0a;
  border-color: rgba(0,0,0,.12);
}
.nav-link { color:#111; transition:color .2s ease }
.nav-link:hover { color:#000 }

/* Dark mode header (when on dark section) */
body.on-dark .nav-shell,
.on-dark .nav-shell { 
  background: rgba(10,10,10,.82); 
  color: #fff; 
  border-color: rgba(255,255,255,.18); 
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
body.on-dark .nav-link,
.on-dark .nav-link { color:#e6e6e6 }
body.on-dark .nav-link:hover,
.on-dark .nav-link:hover { color:#fff }

/* ---------- Logo ---------- */
.logo-img--nav { 
  height: 2.5rem; 
  width: auto; 
  object-fit: contain; 
  filter: none; 
  transition: filter .2s ease;
}
body.on-dark .logo-img--nav,
.on-dark .logo-img--nav { filter: invert(1) brightness(2) }

.logo-img--footer { 
  height: 2.5rem; 
  width: auto; 
  object-fit: contain; 
  filter: invert(1) brightness(2);
}

/* ---------- CTA Buttons ---------- */
/* Navbar CTA (changes with theme) */
.cta-nav { 
  background: #0a0a0a; 
  color: #fff; 
  transition: filter .2s ease, background .2s ease, color .2s ease;
}
.cta-nav:hover { filter: brightness(1.1) }
body.on-dark .cta-nav,
.on-dark .cta-nav { background:#fff; color:#0a0a0a }

/* Content CTA (always dark) */
.cta { background:#0a0a0a; color:#fff; transition:filter .2s ease }
.cta:hover { filter:brightness(1.1) }
body.on-dark .cta { background:#fff; color:#0a0a0a }

.ctacc { background: #0a0a0a; color: #fff }

/* Footer CTA (always white) */
.cta--footer { background:#fff; color:#0a0a0a; transition:filter .2s ease }
.cta--footer:hover { filter:brightness(0.95) }

/* ---------- Bullets / Lists ---------- */
.lv-list { list-style:none; padding:0; margin:0 }
.lv-list li { 
  position: relative; 
  padding: .75rem 1rem .75rem 1.25rem; 
  border-radius: .75rem; 
  background: rgba(0,0,0,.04);
}
.lv-list li::before { 
  content: ''; 
  position: absolute; 
  left: .4rem; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 4px; 
  height: 60%; 
  border-radius: 9999px; 
  background: #0a0a0a;
}
.lv-list li+li { margin-top:.5rem }
.section--dark .lv-list li { background:rgba(255,255,255,.06) }
.section--dark .lv-list li::before { background:#fff }

/* ---------- Social Buttons ---------- */
.social-btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border: 1px solid rgba(0,0,0,.15); 
  border-radius: 9999px; 
  padding: .5rem; 
  transition: border-color .2s ease, background .2s ease;
}
.social-btn:hover { border-color:#000 }
.section--dark .social-btn { border-color:rgba(255,255,255,.25) }
.section--dark .social-btn:hover { border-color:#fff; background:#111 }

/* ---------- Modals ---------- */
.modal-backdrop { background: rgba(0,0,0,.45) }
.modal-header-dark { 
  background: #0a0a0a; 
  border-bottom: 1px solid rgba(255,255,255,.12); 
  color: #fff;
}
.policy-prose h4 { margin-top:.75rem; font-weight:600 }

/* ---------- Reveal on Scroll Animation ---------- */
.reveal { 
  opacity: 0; 
  transform: translateY(16px); 
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity:1; transform:none }

/* ---------- Performance ---------- */
.will-change { will-change: transform, opacity; }

/* ---------- Steps/Process Cards ---------- */
.lv-steps { display:grid; gap:1.5rem }
.lv-step-card { border:1px solid rgba(255,255,255,.15) }
.lv-step-icon { 
  width: 44px; 
  height: 44px; 
  border-radius: 9999px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: rgba(255,255,255,.06); 
  border: 1px solid rgba(255,255,255,.14);
}
.lv-step-icon svg { width:20px; height:20px; stroke:#fff; opacity:.9 }

/* ---------- iPad / Tablet Layout (768px - 1024px) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Prijssimulator: rechtse kader onderaan */
  .lg\:grid-cols-12 {
    grid-template-columns: 1fr !important;
  }
  .lg\:col-span-8,
  .lg\:col-span-4 {
    grid-column: span 1 !important;
  }
}

/* Header fix alleen voor kleinere tablets (768px - 900px) */
@media (min-width: 768px) and (max-width: 900px) {
  .nav-shell {
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  .nav-shell .hidden.md\:flex {
    gap: 0.75rem !important;
    font-size: 0.8rem;
  }
  .nav-shell .nav-link {
    white-space: nowrap;
  }
  .nav-shell .cta-nav {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  .nav-shell .logo-img--nav {
    height: 2rem;
  }
}