html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family:'Manrope',system-ui,sans-serif; color:#1D1D1B; background:#FFFFFF; }

/* Logo (replica van origineel: zwarte tekstballon, lime dot) */
.logo-bubble {
  position:relative; display:inline-flex; flex-direction:column; justify-content:center;
  width:56px; height:52px; padding-left:9px;
  background:#1D1D1B; border-radius:50% 50% 50% 6px;
  color:#fff; font-weight:800; font-size:11px; line-height:1.05; letter-spacing:.06em;
}
.logo-bubble .dot { position:absolute; top:6px; right:7px; width:9px; height:9px; border-radius:9999px; background:#C3D021; }
.logo-bubble.on-dark { background:#fff; color:#1D1D1B; }

/* Reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.08s } .reveal-delay-2 { transition-delay:.16s } .reveal-delay-3 { transition-delay:.24s }

/* Buttons */
.btn-lime { background:#C3D021; color:#1D1D1B; transition:background .25s, transform .25s, box-shadow .25s; }
.btn-lime:hover { background:#D3DE4E; transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(195,208,33,.7); }
.btn-dark { background:#1D1D1B; color:#fff; transition:background .25s, transform .25s; }
.btn-dark:hover { background:#2A2A27; transform:translateY(-1px); }
.btn-line { border:1.5px solid rgba(29,29,27,.2); color:#1D1D1B; transition:border-color .25s, background .25s; }
.btn-line:hover { border-color:#1D1D1B; background:#F6F6F3; }

/* Cards */
.card { transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 44px -12px rgba(29,29,27,.16); }
.card .arrow { transition:transform .3s; }
.card:hover .arrow { transform:translateX(5px); }

/* Header */
#hdr { transition:box-shadow .3s, background .3s; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); }
#hdr.scrolled { box-shadow:0 6px 24px -12px rgba(29,29,27,.14); }
.nav-link { position:relative; }
.nav-link.active { color:#1D1D1B; }
.nav-link.active::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2.5px; border-radius:2px; background:#C3D021; }

/* FAQ / details */
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details .plus { transition:transform .3s; }
details[open] .plus { transform:rotate(45deg); }

/* Modal */
.modal-backdrop { opacity:0; pointer-events:none; transition:opacity .3s; }
.modal-backdrop.open { opacity:1; pointer-events:auto; }
.modal-panel { transform:translateY(18px); opacity:0; transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s; }
.modal-backdrop.open .modal-panel { transform:translateY(0); opacity:1; }

/* Advieskeuze badge: springt even op en tilt bij hover */
@keyframes badgePop { 0%{ transform:scale(1) } 40%{ transform:scale(1.06) } 100%{ transform:scale(1) } }
.badge-pop { animation:badgePop .7s ease 1s 1; transition:transform .25s, box-shadow .25s; }
.badge-pop:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 10px 24px -10px rgba(29,29,27,.25); }

/* CTA-knop die even opspringt */
.btn-pop { animation:badgePop .7s ease 1.5s 1; }

/* Aanbieder-tegel */
.provider { display:flex; align-items:center; justify-content:center; gap:.55rem; min-height:74px; padding:.5rem .75rem; border-radius:16px; background:#fff; border:1px solid rgba(29,29,27,.07); font-weight:800; color:rgba(29,29,27,.6); font-size:14px; letter-spacing:.02em; text-align:center; transition:color .25s, border-color .25s, transform .25s; }
.provider img { width:24px; height:24px; border-radius:6px; flex:none; }
.provider:hover { color:#1D1D1B; border-color:rgba(195,208,33,.6); transform:translateY(-2px); }

/* Locatie-tegel */
.loc-tile { position:relative; display:grid; place-items:center; aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:#1D1D1B; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.loc-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; transition:opacity .3s, transform .5s; }
.loc-tile span { position:relative; z-index:1; color:#fff; font-weight:800; font-size:14.5px; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:0 .5rem; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.loc-tile:hover { transform:translateY(-4px); box-shadow:0 18px 44px -12px rgba(29,29,27,.3); }
.loc-tile:hover img { opacity:.6; transform:scale(1.04); }

/* Check steps */
.check-step { display:none; }
.check-step.active { display:block; animation:fadeUp .4s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }

/* Form */
.field { width:100%; border-radius:12px; border:1.5px solid rgba(29,29,27,.15); background:#fff; padding:.8rem 1rem; font-size:15px; outline:none; transition:border-color .2s, box-shadow .2s; }
.field:focus { border-color:#C3D021; box-shadow:0 0 0 3px rgba(195,208,33,.25); }
label.lbl { display:block; font-size:13.5px; font-weight:700; color:#1D1D1B; margin-bottom:.4rem; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline:2px solid #C3D021; outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .card, .btn-lime, .btn-dark { transition:none !important; transform:none !important; opacity:1 !important; }
}