/* ==========================================================================
   DESIGN TOKENS — pas hier de huisstijl aan (kleuren, lettertype, radius)
   Deze bestanden gebruiken Tailwind-achtige utility classes die direct
   corresponderen met een tailwind.config.js theme.extend. Alle kleuren en
   maten zijn hier centraal aan te passen.
   ========================================================================== */
:root{
  /* Merkkleur (blauw accent) */
  --brand-50:#E5F2FC;
  --brand-100:#CFE7FA;
  --brand-500:#3E93E6;
  --brand-600:#2783DE;
  --brand-700:#1E68B3;
  --brand-800:#184F87;

  /* Neutraal (tekst, achtergronden, randen) */
  --stone-50:#F9F8F7;
  --stone-100:#F0EFED;
  --stone-200:#E6E5E3;
  --stone-300:#D6D3CE;
  --stone-400:#AFAAA2;
  --stone-500:#7D7A75;
  --stone-600:#5E5C57;
  --stone-700:#44423F;
  --stone-800:#2C2C2B;
  --stone-900:#1C1B1A;

  /* Semantische status kleuren */
  --green-50:#E8F1EC;
  --green-600:#46A171;
  --green-700:#357D57;
  --orange-50:#FBEBDE;
  --orange-600:#D5803B;
  --orange-700:#B0632A;
  --red-50:#FCE9E7;
  --red-600:#E56458;
  --red-700:#C14539;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --shadow-sm:0 1px 2px rgba(28,27,26,.05), 0 4px 12px rgba(28,27,26,.04);
  --shadow-md:0 2px 4px rgba(28,27,26,.06), 0 8px 24px rgba(28,27,26,.06);
  --container-max:1152px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--stone-800);
  background:#FFFFFF;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Layout ---------- */
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:24px;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.grid{display:grid;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.relative{position:relative;}
.absolute{position:absolute;}
.sticky{position:sticky;}
.top-0{top:0;}
.z-10{z-index:10;}
.z-20{z-index:20;}
.overflow-hidden{overflow:hidden;}
.hidden{display:none;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;} .gap-5{gap:20px;} .gap-6{gap:24px;} .gap-8{gap:32px;} .gap-10{gap:40px;} .gap-12{gap:48px;} .gap-16{gap:64px;}

.p-4{padding:16px;} .p-5{padding:20px;} .p-6{padding:24px;} .p-8{padding:32px;}
.px-3{padding-inline:12px;} .px-4{padding-inline:16px;} .px-5{padding-inline:20px;} .px-6{padding-inline:24px;} .px-8{padding-inline:32px;}
.py-1{padding-block:4px;} .py-2{padding-block:8px;} .py-3{padding-block:12px;} .py-4{padding-block:16px;} .py-6{padding-block:24px;} .py-8{padding-block:32px;} .py-10{padding-block:40px;} .py-12{padding-block:48px;} .py-16{padding-block:64px;} .py-20{padding-block:80px;} .py-24{padding-block:96px;}
.pt-2{padding-top:8px;} .pt-4{padding-top:16px;} .pb-2{padding-bottom:8px;} .pb-4{padding-bottom:16px;}

.m-0{margin:0;} .mx-auto{margin-inline:auto;}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mt-5{margin-top:20px;} .mt-6{margin-top:24px;} .mt-8{margin-top:32px;} .mt-10{margin-top:40px;} .mt-12{margin-top:48px;} .mt-16{margin-top:64px;} .mt-20{margin-top:80px;}
.mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;} .mb-6{margin-bottom:24px;} .mb-8{margin-bottom:32px;} .mb-10{margin-bottom:40px;} .mb-12{margin-bottom:48px;} .mb-16{margin-bottom:64px;}

.space-y-3>*+*{margin-top:12px;}
.space-y-4>*+*{margin-top:16px;}
.space-y-6>*+*{margin-top:24px;}
.space-y-8>*+*{margin-top:32px;}

.w-full{width:100%;} .w-10{width:40px;} .w-12{width:48px;} .w-14{width:56px;}
.h-10{height:40px;} .h-12{height:48px;} .h-14{height:56px;}
.max-w-xl{max-width:36rem;} .max-w-2xl{max-width:42rem;} .max-w-3xl{max-width:48rem;} .max-w-4xl{max-width:56rem;}

/* ---------- Typography ---------- */
.text-xs{font-size:12.5px;line-height:1.4;} .text-sm{font-size:14px;line-height:1.5;} .text-base{font-size:16px;} .text-lg{font-size:18px;line-height:1.5;}
.text-xl{font-size:20px;line-height:1.4;} .text-2xl{font-size:24px;line-height:1.3;} .text-3xl{font-size:30px;line-height:1.25;letter-spacing:-0.01em;}
.text-4xl{font-size:38px;line-height:1.15;letter-spacing:-0.015em;} .text-5xl{font-size:50px;line-height:1.08;letter-spacing:-0.02em;}
.font-medium{font-weight:500;} .font-semibold{font-weight:600;} .font-bold{font-weight:700;}
.leading-tight{line-height:1.2;} .leading-relaxed{line-height:1.65;}
.uppercase{text-transform:uppercase;} .tracking-wide{letter-spacing:.06em;}
.text-balance{text-wrap:balance;}

/* ---------- Colors ---------- */
.text-white{color:#fff;} .text-stone-400{color:var(--stone-400);} .text-stone-500{color:var(--stone-500);} .text-stone-600{color:var(--stone-600);} .text-stone-800{color:var(--stone-800);}
.text-brand-600{color:var(--brand-600);} .text-brand-700{color:var(--brand-700);}
.text-green-600{color:var(--green-700);} .text-orange-600{color:var(--orange-700);} .text-red-600{color:var(--red-700);}

.bg-white{background:#fff;} .bg-stone-50{background:var(--stone-50);} .bg-stone-100{background:var(--stone-100);} .bg-stone-800{background:var(--stone-800);} .bg-stone-900{background:var(--stone-900);}
.bg-brand-50{background:var(--brand-50);} .bg-brand-600{background:var(--brand-600);}
.bg-green-50{background:var(--green-50);} .bg-orange-50{background:var(--orange-50);} .bg-red-50{background:var(--red-50);}

/* ---------- Borders / radius / shadow ---------- */
.border{border:1px solid var(--stone-200);}
.border-t{border-top:1px solid var(--stone-200);}
.border-brand{border:1px solid var(--brand-600);}
.rounded-md{border-radius:var(--radius-md);} .rounded-lg{border-radius:var(--radius-lg);} .rounded-xl{border-radius:var(--radius-xl);} .rounded-full{border-radius:999px;}
.shadow-sm{box-shadow:var(--shadow-sm);} .shadow-md{box-shadow:var(--shadow-md);}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--radius-md);font-weight:600;font-size:15px;border:1px solid transparent;transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand-600);color:#fff;}
.btn-primary:hover{background:var(--brand-700);}
.btn-outline{background:transparent;border-color:var(--stone-300);color:var(--stone-800);}
.btn-outline:hover{border-color:var(--stone-500);background:var(--stone-50);}
.btn-ghost{background:transparent;color:var(--stone-600);}
.btn-ghost:hover{color:var(--stone-800);}
.btn-lg{padding:14px 26px;font-size:16px;}
.btn-on-dark{background:#fff;color:var(--stone-900);}
.btn-on-dark:hover{background:var(--brand-50);}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;}
.badge-blue{background:var(--brand-50);color:var(--brand-700);}
.badge-green{background:var(--green-50);color:var(--green-700);}
.badge-orange{background:var(--orange-50);color:var(--orange-700);}
.badge-red{background:var(--red-50);color:var(--red-700);}
.badge-dot{width:6px;height:6px;border-radius:999px;background:currentColor;}
.badge-dot.pulse{animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--stone-200);}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:var(--stone-900);}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--brand-600);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;font-family: monospace;}
.nav-link{font-size:14.5px;font-weight:500;color:var(--stone-600);padding:8px 4px;}
.nav-link:hover{color:var(--stone-900);}
.nav-links{display:none;}
.nav-cta{display:none;}
.menu-toggle{display:inline-flex;}
#nav-check{display:none;}
.mobile-menu{display:none;padding:8px 0 16px;border-top:1px solid var(--stone-200);}
#nav-check:checked ~ .mobile-menu{display:block;}

@media (min-width:768px){
  .nav-links{display:flex;align-items:center;gap:28px;}
  .nav-cta{display:flex;align-items:center;gap:10px;}
  .menu-toggle{display:none;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .md\:flex{display:flex;}
  .md\:hidden{display:none;}
  .md\:text-5xl{font-size:56px;}
  .md\:text-4xl{font-size:42px;}
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .lg\:col-span-2{grid-column:span 2 / span 2;}
}

/* Section helpers */
.section-eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--brand-700);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
.section-title{font-size:30px;font-weight:700;letter-spacing:-0.01em;color:var(--stone-900);line-height:1.2;}
.section-sub{color:var(--stone-500);font-size:16.5px;line-height:1.6;}
@media (min-width:768px){ .section-title{font-size:34px;} }

/* Hero */
.hero{background:linear-gradient(180deg,var(--brand-50) 0%, #fff 62%);border-bottom:1px solid var(--stone-200);}
.hero-grid{display:grid;gap:48px;align-items:center;}
@media (min-width:1024px){ .hero-grid{grid-template-columns:1.05fr .95fr;} }
.trust-row{display:flex;flex-wrap:wrap;gap:18px 28px;color:var(--stone-500);font-size:13.5px;}
.trust-row .item{display:flex;align-items:center;gap:7px;}

/* Hero mock panel */
.mock-window{background:#fff;border:1px solid var(--stone-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;}
.mock-topbar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--stone-100);}
.mock-dot{width:9px;height:9px;border-radius:999px;background:var(--stone-200);}
.mock-body{padding:20px;}
.float-card{position:absolute;background:#fff;border:1px solid var(--stone-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:12px 14px;}

/* Stat strip */
.stat-strip{border-top:1px solid var(--stone-200);border-bottom:1px solid var(--stone-200);background:var(--stone-50);}
.stat-num{font-size:32px;font-weight:700;color:var(--stone-900);letter-spacing:-0.01em;}
@media (min-width:768px){ .stat-num{font-size:38px;} }
.stat-label{font-size:14px;color:var(--stone-500);margin-top:4px;}

/* Steps */
.step-num{width:38px;height:38px;border-radius:999px;background:var(--brand-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none;}
.step-line{position:absolute;left:19px;top:38px;bottom:-32px;width:1px;background:var(--stone-200);}

/* Repair cards */
.repair-card{border:1px solid var(--stone-200);border-radius:var(--radius-xl);background:#fff;overflow:hidden;transition:box-shadow .2s ease, transform .2s ease;}
.repair-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.repair-photos{display:grid;grid-template-columns:1.4fr 1fr;gap:2px;height:168px;}
.repair-photos img{width:100%;height:100%;object-fit:cover;}

/* "In optie bij garage" statusbalk */
.optie-banner{display:flex;align-items:center;gap:6px;padding:10px 20px;background:var(--orange-50);color:var(--orange-700);font-size:13px;font-weight:600;border-bottom:1px solid var(--stone-100);}
.optie-banner svg{flex:none;}
.repair-body{padding:18px 20px 20px;}
.damage-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.damage-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--stone-700);}
.damage-list li svg{flex:none;margin-top:3px;color:var(--orange-700);}
.spec-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--stone-500);padding:7px 0;border-top:1px solid var(--stone-100);}
.spec-row span:last-child{color:var(--stone-800);font-weight:500;}
.price-box{background:var(--stone-50);border:1px solid var(--stone-200);border-radius:var(--radius-md);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;}

/* Mechanism timeline */
.mech-card{border:1px solid var(--stone-200);border-radius:var(--radius-lg);padding:22px;background:#fff;height:100%;}
.mech-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}

/* Testimonials */
.testimonial{border:1px solid var(--stone-200);border-radius:var(--radius-lg);padding:22px;background:#fff;height:100%;}
.avatar{width:38px;height:38px;border-radius:999px;background:var(--brand-50);color:var(--brand-700);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--stone-200);}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:15.5px;color:var(--stone-900);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--brand-700);}
.faq-item .chev{transition:transform .2s ease;color:var(--stone-400);flex:none;}
.faq-item[open] .chev{transform:rotate(180deg);}
.faq-item p{padding:0 4px 18px;color:var(--stone-500);font-size:14.5px;line-height:1.6;max-width:60ch;}

/* Footer */
.footer-col h4{font-size:13.5px;font-weight:600;color:#fff;margin-bottom:14px;letter-spacing:.02em;}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,.62);padding:6px 0;}
.footer-col a:hover{color:#fff;}
.icon-btn{width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;}
.icon-btn:hover{background:rgba(255,255,255,.16);}

/* ==========================================================================
   FORMS — aanmeldformulier garages e.d.
   ========================================================================== */
.form-card{background:#fff;border:1px solid var(--stone-200);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-sm);}
@media (min-width:768px){ .form-card{padding:40px;} }

.form-section{border:0;padding:0;margin:0 0 36px;}
.form-section:last-of-type{margin-bottom:0;}
.form-section legend{width:100%;font-size:17px;font-weight:700;color:var(--stone-900);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--stone-200);}
.form-section .legend-hint{display:block;font-size:13px;font-weight:400;color:var(--stone-500);margin-top:4px;}

.form-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:640px){ .form-grid.cols-2{grid-template-columns:1fr 1fr;} }
@media (min-width:640px){ .form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;} }

.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group.span-2{grid-column:1 / -1;}
.form-group label{font-size:13.5px;font-weight:600;color:var(--stone-700);}
.form-group .hint{font-weight:400;color:var(--stone-400);}
.form-group .required-mark{color:var(--red-600);}

.form-control{width:100%;padding:11px 13px;border:1px solid var(--stone-300);border-radius:var(--radius-md);font-size:14.5px;font-family:inherit;color:var(--stone-800);background:#fff;transition:border-color .15s ease, box-shadow .15s ease;}
.form-control:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-100);}
.form-control:invalid:not(:placeholder-shown):not(:focus){border-color:var(--stone-300);}
textarea.form-control{resize:vertical;min-height:90px;}
select.form-control{cursor:pointer;}

.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 18px;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--stone-700);cursor:pointer;}
.checkbox-row input[type="checkbox"]{margin-top:3px;width:16px;height:16px;accent-color:var(--brand-600);flex:none;cursor:pointer;}
.checkbox-row.stacked{margin-bottom:14px;}
.checkbox-row.stacked:last-child{margin-bottom:0;}

.form-footer-note{font-size:13px;color:var(--stone-500);margin-top:14px;}

.success-card{background:#fff;border:1px solid var(--green-50);border-radius:var(--radius-xl);padding:48px 32px;box-shadow:var(--shadow-sm);text-align:center;}
.success-icon{width:56px;height:56px;border-radius:999px;background:var(--green-50);color:var(--green-700);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}

.info-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.info-step:last-child{margin-bottom:0;}
.info-step .step-num{width:30px;height:30px;font-size:13.5px;}