:root{
  --bg:#fffdfa; --paper:#fff; --creme:#f7f1e1;
  --gold:#b49a6a; --gold-strong:#a38754;
  --brown:#3f3425; --brown-2:#5a432e;
  --line:#efe6cf; --line-strong:#e5dabf;
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius-sm:12px; --radius-md:16px; --radius-lg:22px;

  --fz-h1: clamp(28px, 3.6vw, 46px);
  --fz-h2: clamp(18px, 2.2vw, 26px);
  --fz-h3: clamp(16px, 1.8vw, 20px);
  --fz-text: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  color:var(--brown); line-height:1.65; letter-spacing:.2px;
  background:
    radial-gradient(1200px 800px at 80% -10%, #fff4d8 0%, transparent 60%),
    radial-gradient(900px 700px at -10% 0%, #fef8e7 0%, transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ==== LAYOUT & NAV ==== */
.wrapper{max-width:1100px;margin:0 auto;padding:28px 20px 80px}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:14px 20px 0}
.nav a{color:var(--brown);text-decoration:none;font-weight:600}
.nav .logo{display:flex;align-items:center;gap:10px}
.nav .logo img{height:67px}
.nav .links{display:flex;gap:18px}
.nav .links a{position:relative}
.nav .links a:after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--gold);
  transition:width .25s ease;
}
.nav .links a:hover:after{ width:100% }

/* ==== HERO ==== */
.hero{
  background:linear-gradient(135deg,#fff 0%,#fef8e7 60%,#f7f1e1 100%);
  border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius-lg);
  padding:38px 28px; position:relative; overflow:clip;
}
.hero:after{
  content:""; position:absolute; inset:auto -60px -60px auto; width:220px; height:220px;
  background:radial-gradient(closest-side, rgba(180,154,106,.25), transparent 70%); filter:blur(10px); border-radius:50%;
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;background:#fff;padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px dashed var(--gold);color:var(--brown);padding:8px 12px;border-radius:999px;font-size:13px;margin-left:10px}
h1{font-size:var(--fz-h1);line-height:1.12;color:var(--brown-2);margin:16px 0 10px}
.lede{font-size:clamp(16px,1.3vw,18px);color:#5b4a36;max-width:80ch;margin:0 0 16px}
.hero-cta{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px}

/* ==== BUTTONS (micro-interactions) ==== */
.btn{
  appearance:none;border:none;cursor:pointer;text-decoration:none;
  padding:12px 18px;border-radius:12px;font-weight:650;font-size:16px;
  display:inline-flex;align-items:center;gap:10px;
  transition: transform .08s ease, box-shadow .25s ease, background-color .2s ease;
  will-change: transform, box-shadow;
}
.btn:active{ transform: translateY(1px) }
.btn:focus-visible{ outline:3px solid rgba(180,154,106,.35); outline-offset:2px }
.btn-primary{ background:var(--gold); color:#fff; box-shadow:var(--shadow-sm) }
.btn-primary:hover{ background:var(--gold-strong); box-shadow:0 8px 24px rgba(180,154,106,.35) }
.btn-ghost{ background:#fff; color:var(--brown); border:1px solid var(--line) }
.btn svg{width:18px;height:18px}

/* ==== SECTIONS & REVEAL ON SCROLL ==== */
.section{
  margin-top:36px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow);padding:26px 22px;
}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1)}
.reveal.is-visible{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}

/* ==== MODERNE “TABLE CARDS” ==== */
.price-grid{display:grid;gap:18px;margin-top:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){ .price-grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:640px){ .price-grid{ grid-template-columns: 1fr } }

.card{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease }
.card:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.09) }

.card-head{
  background:linear-gradient(180deg,#f7f1e1,#efe4c5);
  padding:14px 16px;border-bottom:1px solid var(--line-strong);
  display:flex;align-items:center;gap:10px
}
.card-head h3{margin:0;font-size:var(--fz-h3);color:#4c3b28}
.chip{margin-left:auto;font-size:12px;color:#624c2e;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 8px}

/* Scrollable wrapper met shadows voor small screens */
.table-wrap{
  position:relative; overflow:auto;
  --fade: linear-gradient(to right, rgba(255,255,255,0), #fff 90%);
}
.table-wrap.is-scrollable:before,
.table-wrap.is-scrollable:after{
  content:""; position:absolute; top:0; bottom:0; width:22px; pointer-events:none;
}
.table-wrap.is-scrollable:before{ left:0; background: linear-gradient(to right,#fff,transparent) }
.table-wrap.is-scrollable:after{ right:0; background: linear-gradient(to left,#fff,transparent) }

/* Semantisch table, maar clean */
table{ width:100%; border-collapse:separate; border-spacing:0 8px; font-size:16px; min-width: 250px; padding:8px }
tbody tr{
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
tbody tr:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.06); background:#fffbef }
td{ padding:12px 14px }
td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px }
td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; text-align:right; font-variant-numeric: tabular-nums; font-weight:600 }

/* ==== IMPREGNEREN BADGE ==== */
.impregneren{
  margin-top:18px;padding:14px 16px;background:linear-gradient(180deg,#fffaf0,#fff);
  border:1px dashed var(--gold); border-radius:14px; display:flex;align-items:center;gap:10px;
}

/* ==== STICKY CTA ==== */
.sticky-cta{ position:sticky; bottom:16px; margin-top:28px; display:flex; justify-content:center }
.sticky-cta .btn{ padding:14px 22px; font-size:18px; border-radius:12px; box-shadow:0 12px 30px rgba(180,154,106,.28) }

/* ==== FORM ==== */
.form{ display:grid; gap:14px; margin-top:8px }
.input, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:16px; background:#fff;
  transition: border-color .2s ease, box-shadow .25s ease, transform .06s ease;
}
.input:focus, textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(180,154,106,.18);
}
label{ font-weight:650; color:#4c3b28 }
.form-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr } }
.help{ font-size:14px; color:#7a6a54 }

/* ==== FOOTER ==== */
.footer{ max-width:1100px; margin:40px auto 20px; padding:0 20px; font-size:14px; color:#7a6a54 }