/* ==========================================================================
   Vindwijs
   Warm, professioneel, conversiegericht. Geen JS, geen externe requests.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
@font-face { font-family:"Fraunces"; src:url("fonts/fraunces-wght.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("fonts/fraunces-italic.woff2") format("woff2"); font-weight:300 700; font-style:italic; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("fonts/hanken.woff2") format("woff2"); font-weight:300 800; font-style:normal; font-display:swap; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --paper:   #F6F1E8;
  --surface: #FDFBF6;
  --ink:     #1E1B16;
  --body:    #4C463B;
  --muted:   #8A8171;

  --pine:    #16624A;
  --pine-700:#0E4A37;
  --pine-50: #E9F0EC;
  --amber:   #C1852B;

  --border:  #E6DDCB;
  --border-2:#DCD0B9;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sp: clamp(66px, 9vw, 112px);
  --r:   16px;
  --r-sm: 11px;
  --maxw: 1140px;

  --sh-sm: 0 1px 2px rgba(30,27,22,.05);
  --sh:    0 2px 4px rgba(30,27,22,.05), 0 14px 34px -18px rgba(30,27,22,.20);
  --sh-lg: 0 4px 8px rgba(30,27,22,.06), 0 26px 60px -26px rgba(30,27,22,.30);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden]{ display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0;
  font-family:var(--sans);
  font-size:1.06rem;
  line-height:1.62;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Footer altijd onderaan, ook op korte pagina's (404, gids, hubs). */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > main{ flex:1 0 auto; }
body > .site-footer{ margin-top:auto; }
img,svg{ max-width:100%; display:block; }
a{ color:var(--pine); text-decoration:none; }
a:hover{ color:var(--pine-700); }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); line-height:1.06; font-weight:480; letter-spacing:-.015em; margin:0 0 .45em; }
p{ margin:0 0 1rem; }
strong{ color:var(--ink); font-weight:600; }
::selection{ background:var(--pine); color:#fff; }
:focus-visible{ outline:2.5px solid var(--pine); outline-offset:3px; border-radius:3px; }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--pine); color:#fff; padding:12px 18px; z-index:200; }
.skip-link:focus{ left:0; color:#fff; }

/* ---- Layout ------------------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
main{ overflow-x:clip; }
.section{ padding-block:var(--sp); }
.section--surface{ background:var(--surface); border-block:1px solid var(--border); }

.eyebrow{
  display:inline-block;
  color:var(--ink); font-weight:700; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:20px;
  padding:.1em .4em .16em;
  /* highlight-verf zoals bij "úw zaak" in de hero */
  background:linear-gradient(transparent 52%, rgba(22,98,74,.22) 52%);
}
.eyebrow::before{ content:none; }

.sec-head{ max-width:44rem; margin-bottom:52px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(2rem, 4.2vw, 2.9rem); }
.sec-head .sub{ font-size:1.14rem; color:var(--body); margin:0; max-width:52ch; }
.sec-head.center .sub{ margin-inline:auto; }

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:650; font-size:1rem; line-height:1;
  padding:15px 24px; border-radius:var(--r-sm); border:1.5px solid transparent;
  background:var(--pine); color:#fff; cursor:pointer;
  box-shadow:var(--sh-sm);
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ background:var(--pine-700); color:#fff; box-shadow:var(--sh); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:19px; height:19px; }
.btn--lg{ padding:18px 30px; font-size:1.06rem; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); box-shadow:none; }
.btn--ghost:hover{ background:var(--surface); color:var(--pine-700); border-color:var(--pine); transform:none; box-shadow:var(--sh-sm); }
.btn--white{ background:#fff; color:var(--pine-700); }
.btn--white:hover{ background:#F2EEE4; color:var(--pine-700); }
.btn--block{ width:100%; }

.tlink{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); }
.tlink:hover{ color:var(--pine-700); }
.tlink svg{ width:18px; height:18px; transition:transform .18s ease; }
.tlink:hover svg{ transform:translateX(3px); }

/* ---- Header ------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; }
/* Woordmerk: de V is het merk (cursieve Fraunces in pine), de rest strak in Hanken.
   Geen los icoontje — de naam zelf is het logo. De highlight-verf blijft gereserveerd
   voor nadruk in de teksten, zodat beide signalen elkaar niet verwateren. */
.brand{ font-size:1.5rem; letter-spacing:-.015em; color:var(--ink); display:inline-flex; align-items:baseline; }
.brand:hover{ color:var(--ink); }
.brand__v{ font-family:var(--serif); font-style:italic; font-weight:650; color:var(--pine); }
.brand__rest{ font-family:var(--sans); font-weight:700; letter-spacing:-.01em; }
.nav-links{ display:none; gap:32px; margin-inline:auto; }
.nav-links a{ color:var(--body); font-size:.98rem; font-weight:550; }
.nav-links a:hover{ color:var(--pine-700); }
.nav .btn{ padding:11px 18px; font-size:.94rem; }
@media (min-width:920px){ .nav-links{ display:inline-flex; } }
@media (max-width:520px){ .nav .btn{ padding:10px 14px; font-size:.88rem; } .brand{ font-size:1.34rem; } }

/* ---- Hero --------------------------------------------------------------- */
.hero{ padding-block:clamp(48px,6vw,78px) clamp(40px,5vw,64px); }
.hero-grid{ display:grid; gap:44px; align-items:center; }
@media (min-width:940px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
.hero h1{ font-size:clamp(2.5rem, 5.6vw, 4rem); font-weight:440; margin:0 0 22px; }
.hero .lead{ font-size:clamp(1.14rem,1.7vw,1.3rem); color:var(--body); max-width:36ch; margin:0 0 30px; }
.mark{ background:linear-gradient(transparent 60%, rgba(22,98,74,.22) 60%); padding:0 .04em; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; }
.hero-note{ margin:22px 0 0; font-size:.95rem; color:var(--muted); }
.hero-note strong{ color:var(--body); }

/* AI-antwoord demokaart */
.demo{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-lg); padding:22px 22px 20px; }
.demo__bar{ display:flex; align-items:center; gap:10px; padding-bottom:15px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.demo__ai{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--pine-50); color:var(--pine); }
.demo__ai svg{ width:18px; height:18px; }
.demo__label{ font-weight:650; font-size:.9rem; color:var(--ink); }
.demo__live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); }
.demo__live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#3BA776; box-shadow:0 0 0 3px rgba(59,167,118,.18); }
.demo__q{ font-size:.94rem; color:var(--muted); margin:0 0 12px; }
.demo__q b{ color:var(--body); font-weight:600; }
.demo__a{ font-size:1.06rem; color:var(--ink); line-height:1.55; margin:0 0 16px; }
.demo__a .hl{ background:var(--pine-50); color:var(--pine-700); font-weight:650; padding:1px 6px; border-radius:6px; }
.demo__src{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:14px; border-top:1px solid var(--border); font-size:.8rem; color:var(--muted); }
.demo__chip{ display:inline-flex; align-items:center; gap:6px; background:var(--pine); color:#fff; font-weight:600; font-size:.8rem; padding:5px 11px; border-radius:999px; }
.demo__chip svg{ width:13px; height:13px; }

/* Hero: echte demovideo */
.demo-video{ margin:0; }
.demo-video__frame{ position:relative; }
.demo-video__badge{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(30,27,22,.72); color:#fff; backdrop-filter:blur(4px);
  font-size:.76rem; font-weight:600; letter-spacing:.01em;
  padding:6px 11px; border-radius:999px; pointer-events:none;
}
.demo-video__live{ width:7px; height:7px; border-radius:50%; background:#3BA776; }
.demo-video__vid{
  width:100%; display:block; border-radius:var(--r);
  border:1px solid var(--border); background:#fff;
  box-shadow:var(--sh-lg); aspect-ratio:1320/1300; object-fit:cover;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.demo-video:hover .demo-video__vid{ transform:translateY(-4px); box-shadow:0 8px 12px rgba(30,27,22,.07), 0 34px 70px -30px rgba(30,27,22,.36); }
.demo-video figcaption{
  margin-top:15px; font-family:var(--serif); font-style:italic;
  font-size:.96rem; color:var(--muted); line-height:1.45; max-width:46ch;
}

/* Vertrouwensrij onder hero */
.trustbar{ border-top:1px solid var(--border); background:var(--surface); }
.trustbar .in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; padding-block:22px; }
.trustbar .t{ font-size:.86rem; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.trustbar ul{ display:flex; flex-wrap:wrap; gap:12px 26px; list-style:none; margin:0; padding:0; }
.trustbar li{ font-family:var(--serif); font-weight:560; font-size:1.02rem; color:var(--ink); }

/* ---- Probleem ----------------------------------------------------------- */
.pains{ display:grid; gap:18px; }
@media (min-width:760px){ .pains{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.pain{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px 24px; }
.pain__ic{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:#FBEDE7; color:#B5502F; margin-bottom:16px; }
.pain__ic svg{ width:22px; height:22px; }
.pain p{ margin:0; color:var(--ink); font-weight:550; font-size:1.06rem; }

/* ---- Benefits (wat we doen) --------------------------------------------- */
.benefits{ display:grid; gap:18px; }
@media (min-width:720px){ .benefits{ grid-template-columns:1fr 1fr; gap:22px; } }
.benefit{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:30px 28px; box-shadow:var(--sh-sm); }
.benefit__ic{ display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:13px; background:var(--pine-50); color:var(--pine); margin-bottom:20px; }
.benefit__ic svg{ width:26px; height:26px; }
.benefit h3{ font-size:1.32rem; margin:0 0 8px; }
.benefit p{ margin:0; color:var(--body); }

/* ---- Stappen ------------------------------------------------------------ */
.steps{ display:grid; gap:30px; counter-reset:s; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); gap:34px; } }
.step{ position:relative; }
.step__n{ display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:50%; background:var(--pine); color:#fff; font-family:var(--serif); font-size:1.5rem; font-weight:500; margin-bottom:20px; box-shadow:var(--sh-sm); }
.step h3{ font-size:1.28rem; margin:0 0 8px; }
.step p{ margin:0; color:var(--body); }
@media (min-width:820px){
  .step:not(:last-child)::after{ content:""; position:absolute; top:26px; left:64px; right:-20px; height:2px; background:var(--border-2); }
}

/* ---- Overtuiging (donkere band) ----------------------------------------- */
.band{ background:var(--pine); color:#E7EFE9; }
.band h2{ color:#fff; }
.band .eyebrow{ color:#F0F7F3; background:linear-gradient(transparent 52%, rgba(159,211,190,.32) 52%); }
.band-grid{ display:grid; gap:44px; align-items:start; }
@media (min-width:900px){ .band-grid{ grid-template-columns:1.1fr .9fr; gap:60px; } }
.assurances{ display:grid; gap:22px; }
@media (min-width:560px){ .assurances{ grid-template-columns:1fr 1fr; gap:26px 34px; } }
.assurance{ display:grid; grid-template-columns:auto 1fr; gap:14px; }
.assurance .ck{ display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; flex:none; margin-top:2px; }
.assurance .ck svg{ width:15px; height:15px; }
.assurance strong{ display:block; color:#fff; font-family:var(--serif); font-size:1.16rem; font-weight:540; margin-bottom:3px; }
.assurance span.t{ color:#C8DBD0; font-size:.98rem; }

.founder{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r); padding:28px; }
.founder__top{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.founder__ava{ width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#2F7C60,#0E4A37); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.4rem; font-weight:500; flex:none; }
.founder__who b{ display:block; color:#fff; font-size:1.05rem; }
.founder__who span{ color:#B7CCC1; font-size:.9rem; }
.founder p{ margin:0; color:#DCE7E0; font-family:var(--serif); font-style:italic; font-size:1.12rem; line-height:1.5; }

/* ---- Prijs -------------------------------------------------------------- */
.pricing{ max-width:560px; margin-inline:auto; }
.price-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--sh-lg); padding:clamp(30px,4vw,46px); overflow:hidden; }
.price-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--pine); }
.price-card__ribbon{ display:inline-block; background:var(--pine-50); color:var(--pine-700); font-weight:650; font-size:.82rem; letter-spacing:.03em; padding:6px 13px; border-radius:999px; margin-bottom:20px; }
.price-card__amt{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.price-card__amt .from{ font-size:1rem; color:var(--muted); font-weight:600; }
.price-card__amt .n{ font-family:var(--serif); font-size:clamp(3.2rem,8vw,4.4rem); font-weight:460; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.price-card__amt .per{ font-size:1.05rem; color:var(--muted); }
.price-card p.desc{ color:var(--body); margin:0 0 24px; }
.price-card__incl{ list-style:none; margin:0 0 28px; padding:24px 0 0; border-top:1px solid var(--border); display:grid; gap:14px; }
.price-card__incl li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; color:var(--ink); font-weight:500; }
.price-card__incl .ck{ color:var(--pine); margin-top:2px; }
.price-card__incl .ck svg{ width:20px; height:20px; }
.price-card__foot{ margin:16px 0 0; text-align:center; font-size:.9rem; color:var(--muted); }
.price-card__amt .was{ font-size:1.35rem; color:var(--muted); font-weight:600; }
.price-card__amt .was s{ text-decoration-thickness:2px; }
.price-card__all{ margin:0 0 18px; color:var(--muted); font-size:.98rem; }

/* Verwijzing onder de prijskaart naar de volledige prijslijst. */
.prijs-meer{ max-width:560px; margin:26px auto 0; text-align:center; color:var(--muted); font-size:.98rem; }
.prijs-meer a{ display:inline-block; font-weight:600; color:var(--pine-700); border-bottom:1px solid var(--border-2); }
.prijs-meer a:hover{ border-bottom-color:var(--pine); }

/* ---- Prijslijst-pagina --------------------------------------------------- */
.prijslijst{ max-width:760px; margin-inline:auto; display:grid; gap:clamp(34px,5vw,54px); }
.prijsvak h2{ font-size:1.4rem; margin:0 0 8px; }
.prijsvak__intro{ margin:0 0 22px; color:var(--body); max-width:60ch; }

.ptab{ width:100%; border-collapse:collapse; font-size:1rem;
       background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.ptab th, .ptab td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--border); }
.ptab thead th{ font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.06em;
                text-transform:uppercase; color:var(--muted); background:var(--paper); }
.ptab tbody th{ font-weight:600; color:var(--ink); }
.ptab tbody td{ color:var(--ink); }
.ptab tbody tr:last-child th, .ptab tbody tr:last-child td{ border-bottom:0; }
.ptab .muted{ color:var(--muted); font-weight:400; }
.ptab__tag{ display:inline-block; margin-left:8px; font-family:var(--sans); font-size:.7rem; font-weight:700;
            letter-spacing:.04em; text-transform:uppercase; color:var(--pine-700);
            background:var(--pine-50); padding:3px 9px; border-radius:999px; vertical-align:middle; }
.ptab__foot{ margin:14px 0 0; font-size:.93rem; color:var(--muted); max-width:62ch; }

.modkaarten{ display:grid; gap:16px; }
@media (min-width:640px){ .modkaarten{ grid-template-columns:1fr 1fr; } }
.modkaart{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
           padding:22px 24px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; }
.modkaart h3{ font-size:1.1rem; margin:0 0 6px; }
.modkaart p{ margin:0; color:var(--body); font-size:.96rem; }
.modkaart__prijs{ margin-top:auto; padding-top:16px; font-weight:650; color:var(--ink) !important; font-size:1.02rem; }
.modkaart__prijs span{ font-weight:400; color:var(--muted); }

/* Eerlijk blok zolang er geen echte ervaringen zijn. Geen sterren, geen verzonnen citaten. */
.eerlijk{ max-width:640px; margin-inline:auto; text-align:center; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:clamp(28px,4vw,42px); box-shadow:var(--sh-sm); }
.eerlijk__kop{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); margin:0 0 12px; }
.eerlijk p{ color:var(--body); }
.eerlijk__knoppen{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }

.modules__horeca{ margin:22px 0 0; padding:14px 18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-sm); font-size:.96rem; color:var(--body); }
.modules__regel{ margin:16px 0 0; font-size:.95rem; color:var(--muted); font-style:italic; }

.modkaart__link{ margin:10px 0 0; }
.modkaart__link a{ font-size:.92rem; font-weight:600; color:var(--pine-700);
  border-bottom:1px solid var(--border-2); }
.modkaart__link a:hover{ border-bottom-color:var(--pine); }

.prijsnotas{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.prijsnotas li{ position:relative; padding-left:22px; color:var(--body); }
.prijsnotas li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
                        border-radius:50%; background:var(--pine); }
.prijsnotas strong{ color:var(--ink); }

.prijs-cta{ text-align:center; background:var(--pine-50); border-radius:var(--r); padding:clamp(28px,4vw,40px); }
.prijs-cta h2{ font-size:1.4rem; margin:0 0 8px; }
.prijs-cta p{ margin:0 0 20px; color:var(--body); }
}

/* ---- Testimonials ------------------------------------------------------- */
.quotes{ display:grid; gap:20px; }
@media (min-width:760px){ .quotes{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.qcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:28px 26px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; }
.stars{ display:flex; gap:3px; color:var(--amber); margin-bottom:16px; }
.stars svg{ width:18px; height:18px; }
.qcard p{ font-family:var(--serif); font-style:italic; font-size:1.14rem; color:var(--body); line-height:1.5; margin:0 0 22px; flex:1; }
.qcard__who{ display:flex; align-items:center; gap:12px; }
.qcard__ava{ width:44px; height:44px; border-radius:50%; background:var(--pine-50); border:1px solid var(--border); flex:none; }
.qcard__who b{ display:block; color:var(--ink); font-size:.98rem; }
.qcard__who span{ color:var(--muted); font-size:.86rem; }

/* ---- Contact ------------------------------------------------------------ */
.contact-grid{ display:grid; gap:40px; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; } }
.contact-methods{ display:grid; gap:14px; margin-top:28px; }
.cmethod{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:15px 18px; color:var(--ink); font-weight:600; box-shadow:var(--sh-sm); }
.cmethod:hover{ border-color:var(--pine); color:var(--pine-700); }
.cmethod .ic{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:var(--pine-50); color:var(--pine); flex:none; }
.cmethod .ic svg{ width:21px; height:21px; }
.cmethod .sub{ display:block; font-weight:450; font-size:.86rem; color:var(--muted); }

.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh); padding:clamp(26px,3.4vw,38px); }
.form-row{ display:grid; gap:18px; margin-bottom:18px; }
@media (min-width:560px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-weight:600; font-size:.92rem; color:var(--ink); margin-bottom:7px; }
.field input, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--border-2); border-radius:var(--r-sm);
  padding:13px 15px; transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--pine); box-shadow:0 0 0 4px rgba(22,98,74,.12); }
.field textarea{ min-height:118px; resize:vertical; }
.form-card .btn{ margin-top:6px; }
.form-card .privacy{ margin:14px 0 0; font-size:.85rem; color:var(--muted); }
.form-done{ text-align:center; padding:20px 8px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.form-done__ic{ width:52px; height:52px; border-radius:50%; background:var(--pine-50); color:var(--pine); display:flex; align-items:center; justify-content:center; }
.form-done__ic svg{ width:28px; height:28px; }
.form-done h3{ font-size:1.3rem; margin:0; }
.form-done p{ margin:0; color:var(--body); max-width:34ch; }
.form-done .btn{ margin-top:8px; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:#B6AF9F; padding-block:60px 30px; }
.site-footer a{ color:#B6AF9F; }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; gap:38px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.12); }
@media (min-width:780px){ .footer-top{ grid-template-columns:1.6fr 1fr 1fr; } }
.footer-brand .brand{ color:#fff; }
.footer-brand .brand:hover{ color:#fff; }
.footer-brand .brand__v{ color:#7FD1B0; }   /* op donker: lichte munt i.p.v. pine, voor contrast */
.footer-brand p{ margin:14px 0 0; color:#8E8676; max-width:34ch; font-size:.95rem; }
/* Tag-onafhankelijk: de footer-koppen zijn h2 (secties van de footer-landmark),
   zodat pagina's die op h2 eindigen geen heading-sprong krijgen. */
.footer-col h2, .footer-col h3, .footer-col h4{ font-family:var(--sans); font-weight:650; color:#fff; font-size:.86rem; letter-spacing:.05em; text-transform:uppercase; margin:0 0 15px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-col li{ font-size:.96rem; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-top:22px; color:#7C7565; font-size:.85rem; }

/* ==========================================================================
   MOTION & INTERACTIE — smooth, levendig (warm & alive)
   ========================================================================== */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* ---- Scroll-reveal (progressive enhancement) ---------------------------- */
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change:opacity, transform;
}
.js [data-reveal].in{ opacity:1; transform:none; }
/* Stagger binnen grids */
.js .pains [data-reveal]:nth-child(2){ transition-delay:.08s; }
.js .pains [data-reveal]:nth-child(3){ transition-delay:.16s; }
.js .benefits [data-reveal]:nth-child(2){ transition-delay:.08s; }
.js .benefits [data-reveal]:nth-child(3){ transition-delay:.16s; }
.js .benefits [data-reveal]:nth-child(4){ transition-delay:.24s; }
.js .steps [data-reveal]:nth-child(2){ transition-delay:.12s; }
.js .steps [data-reveal]:nth-child(3){ transition-delay:.24s; }
.js .assurance:nth-child(2){ transition-delay:.08s; }
.js .assurance:nth-child(3){ transition-delay:.16s; }
.js .assurance:nth-child(4){ transition-delay:.24s; }
.js .quotes [data-reveal]:nth-child(2){ transition-delay:.1s; }
.js .quotes [data-reveal]:nth-child(3){ transition-delay:.2s; }
.js .contact-methods [data-reveal]:nth-child(2){ transition-delay:.08s; }
.js .contact-methods [data-reveal]:nth-child(3){ transition-delay:.16s; }

/* ---- Hero: intro-animatie + zachte glow --------------------------------- */
.hero{ position:relative; }
.hero-grid{ position:relative; z-index:1; }
.hero-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(560px,90vw); height:560px; right:-70px; top:-40px;
  background:radial-gradient(circle at 60% 40%, rgba(22,98,74,.18), rgba(22,98,74,0) 66%);
  filter:blur(18px);
}
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes demoIn{ from{ opacity:0; transform:translateY(28px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(59,167,118,.45); }
  70%{ box-shadow:0 0 0 8px rgba(59,167,118,0); }
  100%{ box-shadow:0 0 0 0 rgba(59,167,118,0); }
}

@media (prefers-reduced-motion: no-preference){
  .hero h1{ animation:rise .8s var(--ease-out) both; }
  .hero .lead{ animation:rise .8s var(--ease-out) .1s both; }
  .hero-cta{ animation:rise .8s var(--ease-out) .2s both; }
  .hero-note{ animation:rise .8s var(--ease-out) .3s both; }
  .demo, .demo-video{ animation:demoIn .9s var(--ease-out) .28s both; }
  .demo__live::before, .demo-video__live{ animation:pulse 2.2s ease-out infinite; }
}

/* ---- Bewegende balk (marquee) ------------------------------------------- */
.marquee{
  overflow:hidden; background:var(--surface); border-block:1px solid var(--border);
  padding-block:15px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:scrollx 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; flex:none; }
.marquee__item{
  display:inline-flex; align-items:center; padding-inline:24px;
  font-family:var(--serif); font-weight:520; font-size:1.12rem; color:var(--ink);
  white-space:nowrap; letter-spacing:-.01em;
}
.marquee__sep{ color:var(--pine); font-size:.7rem; opacity:.7; }
@keyframes scrollx{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---- Hover-lifts & micro-interacties ------------------------------------ */
.pain, .benefit, .qcard, .price-card, .cmethod{
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease-out), border-color .25s ease;
}
.pain:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.benefit:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--border-2); }
.qcard:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.cmethod:hover{ transform:translateY(-3px); box-shadow:var(--sh); }

.benefit__ic, .pain__ic{ transition:transform .4s var(--ease-out); }
.benefit:hover .benefit__ic{ transform:scale(1.08) rotate(-4deg); }
.pain:hover .pain__ic{ transform:scale(1.08); }
.demo{ transition:box-shadow .4s var(--ease-out); }

/* Header-schaduw bij scroll */
.site-header{ transition:box-shadow .3s ease, background-color .3s ease; }
.site-header.scrolled{ box-shadow:0 8px 30px -18px rgba(30,27,22,.35); }

/* Nav-links: smooth underline */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--pine); border-radius:2px; transition:right .3s var(--ease-out);
}
.nav-links a:hover::after{ right:0; }

/* Dark band: subtiel verloop voor diepte */
.band{ background:linear-gradient(140deg, #16624A 0%, #0E4A37 100%); }

/* Respecteer reduced-motion volledig */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ---- Voor wie: tags ----------------------------------------------------- */
.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.tags li{
  font-family:var(--serif); font-size:1.06rem; font-weight:500; color:var(--ink);
  background:var(--surface); border:1px solid var(--border);
  padding:11px 20px; border-radius:999px; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s ease, color .25s ease;
}
.tags li:hover{ transform:translateY(-3px); border-color:var(--pine); color:var(--pine-700); box-shadow:var(--sh); }
.tags__more{ background:transparent; border-style:dashed; color:var(--muted); box-shadow:none; }
.tags__more:hover{ color:var(--muted); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq-wrap{ max-width:800px; }
.faq{ display:grid; gap:14px; }
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-sm); overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faq-item[open]{ border-color:var(--border-2); box-shadow:var(--sh); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px;
  padding:20px 24px; font-family:var(--serif); font-size:1.16rem; font-weight:520;
  color:var(--ink); letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--pine-700); }
.faq-ic{ margin-left:auto; position:relative; width:18px; height:18px; flex:none; }
.faq-ic::before, .faq-ic::after{ content:""; position:absolute; background:var(--pine); border-radius:2px; transition:transform .28s var(--ease-out), opacity .28s ease; }
.faq-ic::before{ top:8px; left:0; width:18px; height:2px; }
.faq-ic::after{ left:8px; top:0; width:2px; height:18px; }
.faq-item[open] .faq-ic::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ padding:0 24px 22px; }
.faq-a p{ margin:0; color:var(--body); max-width:64ch; }

/* ---- Mobiele sticky CTA ------------------------------------------------- */
.mobile-cta{ display:none; }
@media (max-width:768px){
  body{ padding-bottom:84px; }
  .mobile-cta{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--pine); color:#fff; font-weight:650; font-size:1.02rem;
    padding:15px 22px; border-radius:12px; box-shadow:0 12px 30px -8px rgba(14,74,55,.5);
    transform:translateY(140%); opacity:0;
    transition:transform .4s var(--ease-out), opacity .3s ease;
  }
  .mobile-cta.show{ transform:translateY(0); opacity:1; }
  .mobile-cta:hover{ color:#fff; }
  .mobile-cta svg{ width:19px; height:19px; }
}

/* ---- Actieve navigatie -------------------------------------------------- */
.nav-links a.active{ color:var(--pine-700); }
.nav-links a.active::after{ right:0; }

/* ---- Cookie-toestemming ------------------------------------------------- */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--surface); border-top:1px solid var(--border-2);
  box-shadow:0 -10px 34px -14px rgba(30,27,22,.30);
  padding:16px;
}
.cc-inner{ max-width:var(--maxw); margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.cc-text{ flex:1 1 380px; }
.cc-text strong{ display:block; font-family:var(--serif); font-size:1.06rem; color:var(--ink); margin-bottom:2px; }
.cc-text p{ margin:0; font-size:.92rem; color:var(--body); }
.cc-actions{ display:flex; gap:10px; flex:0 0 auto; }
.cc-actions .btn{ padding:12px 18px; font-size:.95rem; }
@media (max-width:600px){
  .cc-actions{ width:100%; }
  .cc-actions .btn{ flex:1; }
}

/* ---- Legal / 404 -------------------------------------------------------- */
.legal{ max-width:720px; margin-inline:auto; padding-block:64px; }
.legal h1{ font-size:clamp(2rem,5vw,3rem); margin-bottom:6px; }
.legal h2{ font-size:1.4rem; margin-top:36px; }
.legal .updated{ color:var(--muted); margin-bottom:28px; }
.legal a.back{ display:inline-flex; gap:8px; font-weight:600; margin-bottom:28px; }
.note{ border-left:3px solid var(--pine); background:var(--surface); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 20px; color:var(--body); font-size:.95rem; }
.nf{ min-height:66vh; display:grid; place-content:center; text-align:center; gap:14px; }