/* =========================================================
   LEADVANGER — prototype fase 1
   Vormgeving overgenomen van de bestaande pagina:
   schoon wit, oranje accent, blauw logo.
   Seizoenen sturen beeld, tekst en uitgelichte producten.
   ========================================================= */
:root{
  --orange:#F26522; --orange-600:#e2541a; --orange-700:#c9460f;
  --blue:#1B72BC; --ink:#1c2127; --ink-soft:#3c434d; --gray:#5b6470;
  --gray-300:#c8cdd4; --line:#e6e9ee; --bg:#fff; --bg-soft:#f5f7f9;
  --green:#1faa59; --amber:#d98a0b; --red:#d23f31;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-head:"Manrope","Inter",system-ui,sans-serif;
  --radius:10px; --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow:0 10px 30px rgba(16,24,40,.10);
  --shadow-lg:0 24px 60px rgba(16,24,40,.16);
  --container:1240px;
  --season-tint:#fff3ec;
}
body[data-seizoen="lente"]{ --season-tint:#eef8ee; }
body[data-seizoen="zomer"]{ --season-tint:#fff8e6; }
body[data-seizoen="herfst"]{ --season-tint:#fff3ec; }
body[data-seizoen="winter"]{ --season-tint:#eef4fb; }

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.ico{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
.ico--sm{ width:16px; height:16px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1; padding:13px 22px; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:background .15s,box-shadow .15s,color .15s; white-space:nowrap; }
.btn--lg{ padding:16px 28px; font-size:16px; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(242,101,34,.28); }
.btn--primary:hover{ background:var(--orange-600); }
.btn--primary:disabled{ background:#b9c4cc; box-shadow:none; cursor:default; }
.btn--ghost{ background:var(--bg-soft); color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:#eef1f4; }
.btn--white{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--white:hover{ background:#f4f6f8; }
.btn--link{ background:none; border:0; padding:0; color:var(--orange); font-weight:700; font-size:14px; text-decoration:underline; cursor:pointer; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; box-shadow:var(--shadow-sm); }
.topbar{ background:var(--ink); color:#cfd6df; font-size:13px; }
.topbar__inner{ display:flex; align-items:center; gap:18px; height:38px; }
.topbar__item{ display:inline-flex; align-items:center; gap:7px; }
.topbar__item .ico{ width:15px; height:15px; fill:var(--orange); }
.topbar__spacer{ flex:1; }
.topbar__phone{ display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:600; }
.topbar__phone .ico{ fill:var(--orange); width:15px; height:15px; }
.header__main{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px; height:78px; }
.header__main > .logo{ justify-self:start; }
.header__main > .header__nav{ justify-self:center; }
.header__main > .header__cta{ justify-self:end; }
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo__mark{ width:34px; height:34px; border-radius:8px; background:var(--orange); display:grid; place-items:center; }
.logo__mark svg{ width:22px; height:22px; }
.logo__mark rect{ fill:none; stroke:#fff; stroke-width:2.4; }
.logo__mark line{ stroke:#fff; stroke-width:2.4; }
.logo__text{ display:inline-flex; flex-direction:column; line-height:1.05; font-family:var(--font-head); font-weight:800; font-size:23px; letter-spacing:-.02em; color:var(--blue); }
.logo__accent{ color:var(--ink); }
.logo__sub{ display:block; font-family:var(--font-body); font-weight:600; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-top:3px; }
.logo--light .logo__text{ color:#fff; }
.logo--light .logo__accent{ color:var(--orange); }
.logo--light .logo__sub{ color:#8b95a2; }
.header__nav{ display:flex; align-items:center; gap:26px; }
.header__nav a{ font-weight:600; font-size:15px; color:var(--ink-soft); }
.header__nav a:hover{ color:var(--orange); }
.header__nav-cta,.header__nav-tel{ display:none; }
.header__cta{ display:flex; align-items:center; gap:10px; }
.header__burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.header__burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; }
.header__nav.is-open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:#fff; border-top:1px solid var(--line); box-shadow:var(--shadow); padding:6px 0 10px; z-index:40; }
.header__nav.is-open a{ display:flex; align-items:center; min-height:52px; padding:12px 24px; font-size:16.5px; border-bottom:1px solid var(--bg-soft); }
.header__nav.is-open .header__nav-tel{ display:flex; gap:9px; font-weight:700; color:var(--ink); }
.header__nav.is-open .header__nav-tel .ico{ fill:var(--orange); }
.header__nav.is-open .header__nav-cta{ display:flex; justify-content:center; margin:10px 20px 0; background:var(--orange); color:#fff; border-radius:var(--radius); min-height:50px; border-bottom:0; }

/* ---------- hero (seizoen) ---------- */
.hero{ position:relative; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-1; --hero-img:url("https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1900&q=80"); background:linear-gradient(90deg,rgba(15,20,28,.86) 0%,rgba(15,20,28,.55) 46%,rgba(15,20,28,.18) 100%),var(--hero-img) center/cover no-repeat; transition:background .4s; }
.hero__grid{ display:grid; grid-template-columns:1fr 472px; gap:46px; align-items:center; min-height:600px; padding-top:60px; padding-bottom:60px; }
.hero__copy{ max-width:600px; color:#fff; }
.hero__copy h1{ font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; font-size:clamp(30px,3.2vw,46px); line-height:1.08; margin-bottom:20px; }
.hero__lead{ font-size:18px; color:#e4e8ee; max-width:520px; margin-bottom:28px; }
.hero__season{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:600; font-size:13.5px; padding:6px 12px 6px 8px; border-radius:99px; margin-bottom:18px; }
.hero__season i{ font-style:normal; font-size:15px; }
.hero__buttons{ display:flex; gap:14px; flex-wrap:wrap; }
.herocard{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px 30px 22px; }
.herocard__title{ font-family:var(--font-head); font-weight:800; font-size:25px; letter-spacing:-.02em; line-height:1.14; }
.herocard__sub{ color:var(--gray); font-size:14.5px; margin-top:8px; }
.herocard__steps{ list-style:none; display:grid; gap:10px; margin:22px 0 24px; }
.herocard__steps li{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--ink-soft); }
.herocard__steps li span{ width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--season-tint); color:var(--orange-700); font-family:var(--font-head); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.herocard__note{ text-align:center; font-size:13px; color:var(--gray); margin-top:12px; }
.tool__badge{ display:inline-block; background:var(--season-tint); color:var(--orange-700); font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:99px; margin-bottom:11px; }

/* ---------- trustbar ---------- */
.trustbar{ border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff 0%,#f6f8fa 100%); }
.trustbar__inner{ padding:0 clamp(20px,3.4vw,56px); display:grid; grid-template-columns:repeat(4,1fr); }
.trustbar__item{ display:flex; align-items:center; gap:16px; padding:30px clamp(16px,2.2vw,36px); border-left:1px solid var(--line); }
.trustbar__item:first-child{ border-left:0; }
.tb__ico{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; background:var(--season-tint); display:flex; align-items:center; justify-content:center; }
.tb__ico svg{ width:22px; height:22px; fill:var(--orange); }
.trustbar__item strong{ display:block; font-family:var(--font-head); font-weight:800; font-size:16.5px; line-height:1.25; margin-bottom:3px; }
.trustbar__item span span{ display:block; font-size:14px; line-height:1.45; color:var(--gray); }

/* ---------- section head ---------- */
.section-head{ max-width:680px; margin:0 auto 42px; text-align:center; }
.eyebrow{ display:inline-block; font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
.section-head h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.02em; line-height:1.12; }
.section-head p{ margin-top:14px; color:var(--gray); font-size:17px; }

/* ---------- productgroepen ---------- */
.cats{ padding:70px 0 20px; }
.cats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cat{ position:relative; text-align:left; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; padding:22px 22px 20px; box-shadow:var(--shadow-sm); cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:border-color .15s,box-shadow .15s; }
.cat:hover{ border-color:var(--orange); box-shadow:var(--shadow); }
.cat__tile{ height:210px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--tile-a,#e7edf3),var(--tile-b,#cfd9e3)); display:grid; place-items:center; font-size:44px; }
.cat__tile img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; transition:transform .35s ease; }
.cat:hover .cat__tile img{ transform:scale(1.04); }
.cat__tile svg{ width:56px; height:56px; }
.cat b{ font-family:var(--font-head); font-weight:800; font-size:17px; }
.cat small{ color:var(--gray); font-size:13.5px; line-height:1.45; }
.cat__go{ position:absolute; right:18px; top:18px; width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .15s; }
.cat:hover .cat__go{ opacity:1; }
.cat__go svg{ width:16px; height:16px; }
.cat.is-season::after{ content:"Dit seizoen"; position:absolute; left:18px; top:18px; background:#fff; color:var(--orange-700); font-family:var(--font-head); font-weight:700; font-size:11.5px; padding:4px 9px; border-radius:99px; box-shadow:var(--shadow-sm); }

/* ---------- seizoensblok ---------- */
.season{ padding:60px 0; }
.season__inner{ background:var(--season-tint); border-radius:var(--radius-lg); padding:40px 44px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.season__inner h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.02em; line-height:1.14; margin-bottom:12px; }
.season__inner p{ color:var(--ink-soft); font-size:16.5px; max-width:480px; margin-bottom:22px; }
.season__list{ list-style:none; display:grid; gap:10px; }
.season__list li{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.season__list li:hover{ border-color:var(--orange); }
.season__list b{ font-family:var(--font-head); font-size:15.5px; }
.season__list small{ display:block; color:var(--gray); font-size:13px; }
.season__list svg{ width:18px; height:18px; fill:var(--orange); flex:0 0 auto; }

/* ---------- zo werkt het ---------- */
.steps{ padding:60px 0; background:var(--bg-soft); }
.steps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px; }
.step__num{ width:44px; height:44px; border-radius:12px; background:var(--orange); color:#fff; font-family:var(--font-head); font-weight:800; font-size:20px; display:grid; place-items:center; margin-bottom:16px; }
.step h3{ font-family:var(--font-head); font-weight:700; font-size:18.5px; margin-bottom:8px; }
.step p{ color:var(--gray); font-size:15px; }

/* ---------- merken / klassen ---------- */
.merken{ padding:70px 0; }
.merken__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mk{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-sm); }
.mk--feature{ border-color:var(--orange); box-shadow:0 14px 34px rgba(242,101,34,.16); }
.mk__klasse{ display:inline-block; font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--orange-700); background:var(--season-tint); padding:5px 11px; border-radius:99px; margin-bottom:12px; }
.mk h3{ font-family:var(--font-head); font-weight:800; font-size:22px; margin-bottom:6px; }
.mk > p{ color:var(--gray); font-size:15px; margin-bottom:14px; }
.mk ul{ list-style:none; display:grid; gap:8px; }
.mk li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--ink-soft); }
.mk li::before{ content:""; position:absolute; left:0; top:7px; width:13px; height:7px; border-left:2.4px solid var(--orange); border-bottom:2.4px solid var(--orange); transform:rotate(-45deg); }
.merken__note{ text-align:center; color:var(--gray); font-size:14px; margin-top:22px; }

/* ---------- faq ---------- */
.faq{ padding:70px 0; background:var(--bg-soft); }
.faq__inner{ display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:start; }
.faq__list{ display:grid; gap:12px; }
.qa{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; }
.qa summary{ list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--font-head); font-weight:700; font-size:16.5px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; font-size:24px; font-weight:400; color:var(--orange); line-height:1; transition:transform .2s; }
.qa[open] summary::after{ transform:rotate(45deg); }
.qa p{ padding:0 22px 20px; color:var(--gray); font-size:15.5px; }

/* ---------- final cta ---------- */
.finalcta{ padding:70px 0; }
.finalcta__inner{ background:linear-gradient(120deg,var(--orange),var(--orange-700)); border-radius:var(--radius-lg); padding:44px 48px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.finalcta h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.02em; }
.finalcta p{ margin-top:8px; font-size:17px; opacity:.94; max-width:460px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#aeb6c1; padding-top:56px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:30px; padding-bottom:42px; }
.footer__brand p{ margin-top:16px; font-size:15px; max-width:320px; line-height:1.6; }
.footer__claim{ font-family:var(--font-head); font-weight:700; color:#fff; font-size:16px; }
.footer__col h4{ color:#fff; font-family:var(--font-head); font-weight:700; font-size:16px; margin-bottom:16px; }
.footer__col a,.footer__col span{ display:block; font-size:15px; color:#aeb6c1; margin-bottom:11px; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ border-top:1px solid #2a313b; padding:20px 0; }
.footer__bottom-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:14px; flex-wrap:wrap; }
.footer__bottom nav{ display:flex; gap:22px; }

/* =========================================================
   DE TOOL (LEADVANGER) — venster
   ========================================================= */
.toolmodal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
.toolmodal__backdrop{ position:absolute; inset:0; background:rgba(10,15,22,.64); backdrop-filter:blur(3px); }
.toolmodal__panel{ position:relative; z-index:1; width:min(1000px,100%); max-height:calc(100dvh - 48px); background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px 38px 0; display:flex; flex-direction:column; animation:pop .26s cubic-bezier(.2,.8,.25,1); }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.985);} to{ opacity:1; transform:none;} }
.toolmodal__close{ position:absolute; top:16px; right:16px; z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.toolmodal__close svg{ width:20px; height:20px; fill:var(--ink-soft); }
body.tool-open{ overflow:hidden; }
.tool__head{ margin-bottom:16px; padding-right:52px; }
.tool__title{ font-family:var(--font-head); font-weight:800; font-size:25px; letter-spacing:-.02em; line-height:1.12; }
.tool__sub{ color:var(--gray); font-size:14px; margin-top:6px; }
.wizard{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.wizard__progress{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.wizard__bar{ flex:1; height:7px; background:var(--bg-soft); border-radius:99px; overflow:hidden; }
.wizard__bar span{ display:block; height:100%; width:10%; background:var(--orange); border-radius:99px; transition:width .3s; }
.wizard__count{ font-size:13px; color:var(--gray); font-weight:500; white-space:nowrap; }
.wizard__count b{ color:var(--ink); }
.wizard__body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; margin-right:-8px; scrollbar-width:thin; scrollbar-color:var(--gray-300) transparent; animation:fade .22s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.wizard__nav{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 0 18px; border-top:1px solid var(--line); }
.wizard__nav::before{ content:""; position:absolute; left:0; right:0; top:-26px; height:26px; background:linear-gradient(to top,#fff,rgba(255,255,255,0)); pointer-events:none; }
.wizard__navspacer{ flex:1; }
.wizard__error{ color:var(--orange-700); font-size:14px; font-weight:600; text-align:right; width:100%; }
.wizard__lock{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--gray); }
.wizard__lock .ico{ width:14px; height:14px; fill:var(--green); }

.wstep legend,.wstep h3.wstep__legend{ font-family:var(--font-head); font-weight:800; font-size:22px; letter-spacing:-.01em; margin-bottom:6px; }
.wstep__hint{ color:var(--gray); font-size:14px; margin:0 0 18px; }
.wstep__q{ display:block; font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--ink); margin:22px 0 10px; }
.wstep__q small{ font-family:var(--font-body); font-weight:500; color:var(--gray); }
.wstep__help{ font-size:12.5px; color:var(--gray); margin-top:10px; }

/* keuzekaarten */
.opt-grid{ display:grid; gap:12px; }
.opt-grid--1{ grid-template-columns:1fr; }
.opt-grid--2{ grid-template-columns:1fr 1fr; }
.opt-grid--3{ grid-template-columns:repeat(3,1fr); }
.opt-grid--auto{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.opt{ text-align:left; cursor:pointer; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden; padding:0; display:flex; flex-direction:column; transition:border-color .15s,box-shadow .15s,background .15s; }
.opt:hover{ border-color:var(--orange); }
.opt.is-selected{ border-color:var(--orange); background:#fff7f3; box-shadow:0 0 0 3px rgba(242,101,34,.14); }
.opt__body{ padding:13px 15px 14px; }
.opt--plain{ padding:13px 15px; }
.opt--plain .opt__body{ padding:0; }
.opt b{ display:block; font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1.3; }
.opt small{ display:block; color:var(--gray); font-size:12.5px; margin-top:3px; line-height:1.45; }
.opt__check{ position:absolute; }
.opt--multi{ position:relative; }
.opt--multi .opt__body{ padding-right:40px; }
.opt--multi::after{ content:""; position:absolute; right:14px; top:14px; width:20px; height:20px; border:1.5px solid var(--gray-300); border-radius:6px; background:#fff; }
.opt--multi.is-selected::after{ background:var(--orange); border-color:var(--orange); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4Z'/%3E%3C/svg%3E"); background-size:14px; background-repeat:no-repeat; background-position:center; }
.opt__tile{ height:110px; overflow:hidden; display:grid; place-items:center; font-size:34px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,var(--tile-a,#e7edf3),var(--tile-b,#cfd9e3)); }
.opt__tile img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.opt--multi.opt--multi::after{ z-index:1; box-shadow:0 1px 4px rgba(16,24,40,.25); }
.opt__swatch{ display:block; width:100%; height:44px; border-bottom:1px solid var(--line); background:var(--sw); }
.ph{ display:grid; place-items:center; text-align:center; gap:2px; min-height:96px; padding:12px; background:repeating-linear-gradient(45deg,#f2f4f7 0 12px,#e9edf1 12px 24px); border-bottom:1px solid var(--line); color:var(--gray); }
.ph b{ font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--ink); }
.ph span{ font-size:11.5px; line-height:1.35; max-width:200px; }

/* velden */
.field{ margin-bottom:14px; }
.field label{ display:block; font-weight:600; font-size:13.5px; color:var(--ink-soft); margin-bottom:7px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row--3{ grid-template-columns:2fr 1fr 1fr; }
.field input,.field select,.field textarea{ width:100%; padding:0 14px; font-family:var(--font-body); font-size:15px; border:1px solid var(--gray-300); border-radius:var(--radius); background:#fff; color:var(--ink); outline:none; transition:border-color .15s,box-shadow .15s; appearance:none; }
.field input,.field select{ height:50px; }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%235b6470' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.field textarea{ min-height:88px; padding:12px 14px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,101,34,.14); }
.field input::placeholder,.field textarea::placeholder{ color:#a9b1ba; }
.stepper{ display:inline-flex; align-items:center; border:1px solid var(--gray-300); border-radius:var(--radius); overflow:hidden; }
.stepper button{ width:46px; height:50px; border:0; background:var(--bg-soft); font-size:22px; cursor:pointer; color:var(--ink); }
.stepper input{ width:70px; height:50px; border:0; text-align:center; font-size:18px; font-weight:700; font-family:var(--font-head); outline:none; }
.consent{ display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--ink-soft); margin-top:6px; cursor:pointer; }
.consent input{ width:20px; height:20px; margin-top:2px; accent-color:var(--orange); flex:0 0 auto; }
.consent a{ color:var(--orange); text-decoration:underline; }

/* AI-adviseur blok */
.ai{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; margin-top:20px; }
.ai__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ai__avatar{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:13px; }
.ai__head b{ font-family:var(--font-head); font-size:14.5px; }
.ai__head small{ display:block; color:var(--gray); font-size:12.5px; }
.ai__row{ display:flex; gap:10px; align-items:flex-start; }
.ai__row textarea{ flex:1; min-height:64px; }
.ai__row .btn{ height:50px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.chip{ background:#fff; border:1px solid var(--line); border-radius:99px; padding:5px 11px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.chip--ok{ border-color:#bfe6cd; color:#12703a; background:#eef9f1; }
.ai__msg{ font-size:14px; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-top:10px; line-height:1.55; }
.ai__msg b{ font-family:var(--font-head); }

/* fotoplekken */
.filepick{ border:1px dashed var(--gray-300); border-radius:var(--radius); padding:16px; text-align:center; background:var(--bg-soft); }
.filepick input{ display:none; }
.filepick__btn{ display:inline-block; font-family:var(--font-head); font-weight:700; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 16px; cursor:pointer; }
.filepick__status{ display:block; font-size:12.5px; color:var(--gray); margin-top:8px; }
.fotolijst{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; justify-content:center; }
.fotolijst li{ font-size:12px; background:#fff; border:1px solid var(--line); border-radius:99px; padding:4px 10px; }
.fotoplekken{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.fotoplek{ font-size:12px; color:var(--gray); background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 10px; text-align:center; }

/* recap + prijs */
.recap{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; }
.recap h4{ font-family:var(--font-head); font-weight:700; font-size:14px; margin-bottom:10px; }
.recap dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13.5px; }
.recap dt{ color:var(--gray); }
.recap dd{ font-weight:600; }
.recap .btn--link{ margin-top:10px; }

.gate{ display:flex; gap:12px; align-items:flex-start; background:var(--season-tint); border-radius:var(--radius); padding:14px 16px; margin-bottom:18px; font-size:14px; color:var(--ink-soft); }
.gate svg{ width:22px; height:22px; fill:var(--orange); flex:0 0 auto; margin-top:1px; }
.gate b{ font-family:var(--font-head); color:var(--ink); }

.code{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.code input{ width:170px; height:56px; font-size:26px; letter-spacing:.35em; text-align:center; font-family:var(--font-head); font-weight:800; border:1px solid var(--gray-300); border-radius:var(--radius); outline:none; }
.code input:focus{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,101,34,.14); }
.demo{ display:inline-block; font-size:12px; color:#7a4a10; background:#fff5db; border:1px dashed #e7c46b; border-radius:8px; padding:6px 10px; margin-top:12px; }

.prijs{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
.prijs__card{ border:1.5px solid var(--orange); border-radius:var(--radius-lg); padding:24px; background:#fff; box-shadow:0 14px 34px rgba(242,101,34,.14); }
.prijs__label{ font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--gray); }
.prijs__range{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:6px 0 4px; }
.prijs__range b{ font-family:var(--font-head); font-weight:800; font-size:clamp(26px,3vw,34px); letter-spacing:-.02em; line-height:1; }
.prijs__range span{ color:var(--gray); font-weight:600; }
.prijs__sub{ font-size:13.5px; color:var(--gray); }
.prijs__meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.meta{ background:var(--bg-soft); border-radius:10px; padding:12px 14px; }
.meta small{ display:block; font-size:12px; color:var(--gray); }
.meta b{ display:block; font-family:var(--font-head); font-size:16px; margin-top:2px; }
.meta i{ display:block; font-style:normal; font-size:11.5px; color:var(--gray); margin-top:4px; line-height:1.4; }
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.tier{ border:1.5px solid var(--line); border-radius:10px; padding:12px 12px 11px; text-align:left; background:#fff; cursor:pointer; }
.tier:hover{ border-color:var(--orange); }
.tier.is-selected{ border-color:var(--orange); background:#fff7f3; box-shadow:0 0 0 3px rgba(242,101,34,.14); }
.tier b{ display:block; font-family:var(--font-head); font-size:14px; }
.tier small{ display:block; color:var(--gray); font-size:12px; margin-top:2px; }
.tier strong{ display:block; font-family:var(--font-head); font-size:15px; margin-top:6px; color:var(--orange-700); }
.regels{ list-style:none; margin-top:14px; border-top:1px solid var(--line); }
.regels li{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--line); }
.regels li.is-total{ font-family:var(--font-head); font-weight:800; font-size:15px; }
.signalen{ list-style:none; display:grid; gap:8px; margin-top:14px; }
.signalen li{ display:flex; gap:9px; font-size:13px; color:var(--ink-soft); background:#fff8ec; border:1px solid #f3dfb4; border-radius:8px; padding:9px 11px; }
.signalen li::before{ content:"!"; flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:var(--amber); color:#fff; font-weight:800; font-size:12px; display:grid; place-items:center; }
.disc{ font-size:12px; color:var(--gray); margin-top:14px; line-height:1.5; }
.acties{ display:grid; gap:10px; margin-top:16px; }
.slots{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
.slot{ border:1.5px solid var(--line); border-radius:10px; padding:10px 6px; background:#fff; cursor:pointer; text-align:center; }
.slot b{ display:block; font-family:var(--font-head); font-size:13px; }
.slot small{ display:block; color:var(--gray); font-size:11.5px; margin-bottom:6px; }
.slot .tijd{ display:grid; gap:4px; }
.slot .tijd button{ border:1px solid var(--line); background:#fff; border-radius:6px; padding:5px 0; font-size:12.5px; font-weight:600; cursor:pointer; }
.slot .tijd button.is-selected{ background:var(--orange); color:#fff; border-color:var(--orange); }
.wsuccess{ text-align:center; padding:20px 6px 10px; }
.wsuccess__icon{ width:64px; height:64px; border-radius:50%; background:#e8f7ee; display:grid; place-items:center; margin:0 auto 18px; }
.wsuccess__icon svg{ width:34px; height:34px; fill:var(--green); }
.wsuccess h3{ font-family:var(--font-head); font-weight:800; font-size:24px; margin-bottom:10px; }
.wsuccess p{ color:var(--gray); font-size:16px; max-width:420px; margin:0 auto 20px; }

/* ---------- beheer / dashboard (demo) ---------- */
.beheerknop{ position:fixed; left:20px; bottom:20px; z-index:60; display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; border:0; border-radius:99px; padding:11px 16px; font-family:var(--font-head); font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:var(--shadow); }
.beheerknop span{ background:var(--orange); border-radius:99px; padding:1px 8px; font-size:12px; }
.drawer{ position:fixed; inset:0; z-index:110; display:flex; }
.drawer__backdrop{ position:absolute; inset:0; background:rgba(10,15,22,.5); }
.drawer__panel{ position:relative; z-index:1; margin-left:auto; width:min(760px,100%); height:100%; background:#fff; box-shadow:var(--shadow-lg); overflow-y:auto; padding:28px 30px 40px; }
.drawer__panel h2{ font-family:var(--font-head); font-weight:800; font-size:24px; letter-spacing:-.02em; }
.drawer__panel h3{ font-family:var(--font-head); font-weight:800; font-size:16px; margin:26px 0 10px; }
.drawer__sub{ color:var(--gray); font-size:14px; margin-top:4px; }
.drawer__close{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; display:grid; place-items:center; }
.drawer__close svg{ width:18px; height:18px; fill:var(--ink-soft); }
.seizoenkeuze{ display:flex; gap:8px; flex-wrap:wrap; }
.seizoenkeuze button{ border:1.5px solid var(--line); background:#fff; border-radius:99px; padding:8px 14px; font-weight:600; font-size:13.5px; cursor:pointer; }
.seizoenkeuze button.is-active{ border-color:var(--orange); background:#fff7f3; color:var(--orange-700); }
.leads{ width:100%; border-collapse:collapse; font-size:13px; }
.leads th,.leads td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.leads th{ font-family:var(--font-head); font-size:12px; color:var(--gray); background:var(--bg-soft); }
.leads td small{ display:block; color:var(--gray); font-size:11.5px; }
.badge{ display:inline-block; border-radius:99px; padding:2px 9px; font-size:11.5px; font-weight:700; }
.badge--hot{ background:#fde3dc; color:#a72c1b; }
.badge--warm{ background:#fff0d6; color:#8a5a00; }
.badge--koud{ background:#e3eef9; color:#1b4f86; }
.badge--groen{ background:#e3f6ea; color:#16693a; }
.badge--oranje{ background:#fff0d6; color:#8a5a00; }
.badge--rood{ background:#fde3dc; color:#a72c1b; }
.leeg{ color:var(--gray); font-size:14px; background:var(--bg-soft); border-radius:var(--radius); padding:16px; }
.kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kv div{ background:var(--bg-soft); border-radius:10px; padding:12px 14px; }
.kv small{ display:block; color:var(--gray); font-size:12px; }
.kv b{ font-family:var(--font-head); font-size:18px; }
.rekenregels{ font-size:12.5px; color:var(--ink-soft); background:var(--bg-soft); border-radius:var(--radius); padding:12px 14px; line-height:1.55; }
.rekenregels code{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:12px; }

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{ outline:3px solid rgba(242,101,34,.5); outline-offset:2px; border-radius:6px; }

/* ---------- responsive ---------- */
@media (max-width:1200px){ .header__cta .btn--ghost{ display:none; } }
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:32px; min-height:0; padding-top:48px; padding-bottom:48px; }
  .herocard{ max-width:560px; width:100%; margin:0 auto; }
  .cats__grid{ grid-template-columns:repeat(2,1fr); }
  .steps__grid{ grid-template-columns:repeat(2,1fr); }
  .season__inner{ grid-template-columns:1fr; padding:30px 26px; }
  .prijs{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .topbar__inner{ justify-content:flex-end; height:44px; }
  .topbar__item,.topbar__spacer{ display:none; }
  .header__main{ display:flex; height:64px; gap:12px; }
  .header__nav,.header__cta{ display:none; }
  .header__burger{ display:flex; margin-left:auto; }
  .logo__text{ font-size:19px; }
  .trustbar__inner{ grid-template-columns:repeat(2,1fr); }
  .trustbar__item:nth-child(odd){ border-left:0; }
  .trustbar__item:nth-child(n+3){ border-top:1px solid var(--line); }
  .merken__grid{ grid-template-columns:1fr; }
  .faq__inner{ grid-template-columns:1fr; gap:28px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .hero__bg{ background:linear-gradient(180deg,rgba(15,20,28,.82) 0%,rgba(15,20,28,.6) 60%,rgba(15,20,28,.72) 100%),var(--hero-img) center/cover no-repeat; }
  .hero__copy h1{ font-size:30px; }
  .hero__buttons{ flex-direction:column; }
  .hero__buttons .btn{ width:100%; }
  .btn{ min-height:48px; }
  .field input,.field select{ height:52px; font-size:16px; }
  .field textarea{ font-size:16px; }
  .toolmodal__panel{ padding:20px 18px 0; }
  .opt-grid--3{ grid-template-columns:1fr 1fr; }
  .tiers{ grid-template-columns:1fr 1fr; }
  .slots{ grid-template-columns:repeat(3,1fr); }
  .fotoplekken{ grid-template-columns:1fr 1fr; }
  .kv{ grid-template-columns:1fr; }
  .drawer__panel{ padding:22px 18px 40px; }
  .leads{ font-size:12px; }
  .cats,.season,.steps,.merken,.faq,.finalcta{ padding:48px 0; }
}
@media (max-width:560px){
  .cats__grid,.steps__grid,.opt-grid--2,.opt-grid--3,.field-row,.field-row--3,.prijs__meta{ grid-template-columns:1fr; }
  .opt-grid--auto{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .toolmodal{ padding:0; }
  .toolmodal__panel{ width:100%; max-width:none; height:100dvh; max-height:100dvh; border-radius:0; }
  .finalcta__inner{ padding:32px 26px; }
  .wizard__nav .btn{ flex:1; }
  .trustbar__inner{ grid-template-columns:1fr; }
  .trustbar__item{ border-left:0; padding:20px 4px; }
  .trustbar__item + .trustbar__item{ border-top:1px solid var(--line); }
  .slots{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .opt-grid[data-name="producten"]{ grid-template-columns:1fr 1fr; gap:10px; }
  .opt-grid[data-name="producten"] .opt__tile{ height:88px; font-size:26px; }
  .opt-grid[data-name="producten"] .opt b{ font-size:13.5px; }
  .opt-grid[data-name="producten"] .opt--multi .opt__body{ padding-right:34px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
  

/* ---------- toevoegingen productieversie ---------- */
.btn:disabled{ opacity:.75; cursor:progress; }
.code__acties{ display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; }
.slot .tijd button:disabled{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.legal{ max-width:780px; margin:0 auto; padding:48px 24px 80px; }
.legal h1{ font-family:var(--font-head); font-weight:800; font-size:clamp(28px,3vw,38px); letter-spacing:-.02em; line-height:1.12; margin-bottom:10px; }
.legal h2{ font-family:var(--font-head); font-weight:800; font-size:20px; margin:30px 0 8px; }
.legal p,.legal li{ color:var(--ink-soft); font-size:16px; }
.legal ul{ padding-left:22px; display:grid; gap:4px; margin:6px 0; }
.legal a{ color:var(--orange-700); text-decoration:underline; }
.legal .muted{ color:var(--gray); font-size:14px; }