/* Dakflow — tokens en componenten · ronde 1 (oktober 2026)
   Zelfde tokens als de app (resources/css/app.css). Alleen licht thema, met donkere secties. */

:root{
  --df-canvas:#faf8f3; --df-white:#ffffff; --df-ink:#0f1411; --df-trust:#0b2440;
  --df-gold:#d89848; --df-gold-hover:#c98736; --df-gold-active:#b97a2c; --df-gold-ink:#1a1407;
  --df-gold-dark:#9e6e1f; --df-gold-text:#946619; --df-gold-50:#fbf4e4; --df-gold-100:#f6e8c9;
  --df-n100:#f2efe7; --df-n200:#e4dfd3; --df-n300:#d8d2c2; --df-n400:#a39e92; --df-n500:#5f635f;
  --df-n600:#4a4e4a; --df-n700:#2a2f2b; --df-n800:#1b201c;
  --df-ph-bg:#fff6cc; --df-ph-line:#b38a1d; --df-ph-text:#5a4500;
  --df-r-sm:6px; --df-r-md:10px; --df-r-lg:16px; --df-r-xl:24px;
  --df-sh-card:0 0 0 1px #e4dfd3,0 1px 2px rgba(15,20,17,.05),0 14px 32px -18px rgba(15,20,17,.22);
  --df-sh-raise:0 0 0 1px #d8d2c2,0 2px 4px rgba(15,20,17,.06),0 24px 48px -20px rgba(15,20,17,.32);
  --df-sh-float:0 0 0 1px rgba(15,20,17,.07),0 20px 50px -14px rgba(15,20,17,.38);
  --df-ease:cubic-bezier(.2,.7,.2,1);
  --df-display:'Bricolage Grotesque','Geist',ui-sans-serif,system-ui,sans-serif;
  --df-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --df-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#faf8f3;color:#0f1411;font-family:var(--df-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Basis ---------- */
.df{container-type:inline-size;position:relative;font-family:var(--df-sans);color:#0f1411;background:#faf8f3;font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
.df h1,.df h2,.df h3,.df h4{font-family:var(--df-display);letter-spacing:-.01em;margin:0;text-wrap:balance;color:inherit}
.df p,.df ul,.df ol{margin:0}
.df ul,.df ol{padding:0;list-style:none}
.df button{font-family:inherit}
.df img,.df svg{display:block}
.h1{font-weight:800;font-size:64px;line-height:1.03}
.h2{font-weight:700;font-size:44px;line-height:1.08}
.h3{font-weight:700;font-size:26px;line-height:1.18}
.h4{font-weight:700;font-size:19px;line-height:1.28}
.lead{font-size:20px;line-height:1.5;color:#4a4e4a;text-wrap:pretty}
.body-l{font-size:18px;line-height:1.55}
.small{font-size:14px;line-height:1.5}
.cap{font-size:12.5px;line-height:1.4;color:#5f635f}
.muted{color:#5f635f}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#946619}
.mono{font-family:var(--df-mono)}
.nowrap{white-space:nowrap}
.mark{background:linear-gradient(transparent 58%,#f6e8c9 58%,#f6e8c9 92%,transparent 92%);padding:0 .06em}
.on-dark .mark{background:linear-gradient(transparent 60%,rgba(216,152,72,.38) 60%,rgba(216,152,72,.38) 92%,transparent 92%)}

.wrap{width:100%;max-width:1264px;margin:0 auto;padding:0 32px}
.sec{position:relative;padding:112px 0}
.sec-tight{padding:72px 0}
.bg-canvas{background:#faf8f3}
.bg-white{background:#ffffff}
.bg-n100{background:#f2efe7}
.bg-ink{background:#0f1411;color:#f2efe7}
.bg-trust{background:#0b2440;color:#eef1f5}
.bg-gold{background:#d89848;color:#1a1407}
.on-dark .lead,.on-dark .muted{color:#c9c3b4}
.on-dark .cap{color:#a39e92}
.on-dark .eyebrow{color:#d89848}
.bg-trust .lead,.bg-trust .muted{color:#c6d0dc}
.bg-trust .cap{color:#9fb0c3}

/* Sectielabel (alleen in het ontwerp, schakelaar "Toon sectielabels") */
.sl{position:absolute;top:14px;left:14px;z-index:6;font:600 11px/1 var(--df-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:6px;background:rgba(11,36,64,.08);color:#0b2440;pointer-events:none}
.on-dark .sl,.bg-trust .sl{background:rgba(255,255,255,.1);color:#d8d2c2}
.bg-gold .sl{background:rgba(26,20,7,.1);color:#1a1407}
.nolabels .sl{display:none}

/* Dakhelling: schuine onderrand (3,2°), in de kleur van de volgende sectie */
.slope{position:absolute;left:0;right:0;bottom:-1px;height:5.6cqw;pointer-events:none;clip-path:polygon(0 100%,100% 0,100% 100%);z-index:1}
.slope-l{clip-path:polygon(0 0,100% 100%,0 100%)}

/* ---------- Iconen (Lucide-stijl, 1,75 px) ---------- */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-s{width:16px;height:16px}
.ic-l{width:24px;height:24px}
.ic-xl{width:28px;height:28px}
.icbox{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#fbf4e4;color:#9e6e1f;flex:none}
.on-dark .icbox{background:rgba(216,152,72,.14);color:#d89848}
.bg-trust .icbox{background:rgba(255,255,255,.08);color:#d89848}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:0;font:600 15px/1.1 var(--df-sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color 150ms var(--df-ease),box-shadow 150ms var(--df-ease),transform 150ms var(--df-ease),color 150ms var(--df-ease)}
.btn-lg{min-height:48px;padding:0 22px;font-size:16px}
.btn-sm{min-height:44px;padding:0 14px;font-size:14px}
.btn-block{width:100%}
.btn-primary{background:#d89848;color:#1a1407}
.btn-primary:hover{background:#c98736}
.btn-primary:active{background:#b97a2c;transform:translateY(1px)}
.btn-secondary{background:#ffffff;color:#0f1411;box-shadow:inset 0 0 0 1px #d8d2c2}
.btn-secondary:hover{background:#f2efe7;box-shadow:inset 0 0 0 1px #a39e92}
.btn-secondary:active{background:#e4dfd3;transform:translateY(1px)}
.btn-ink{background:#0f1411;color:#ffffff}
.btn-ink:hover{background:#2a2f2b}
.btn-ink:active{background:#1b201c;transform:translateY(1px)}
.btn-ghost-dark{background:transparent;color:#ffffff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn:disabled,.btn.is-disabled{background:#e4dfd3;color:#5f635f;box-shadow:none;cursor:not-allowed;transform:none}
.is-hover.btn-primary{background:#c98736}
.is-hover.btn-secondary{background:#f2efe7;box-shadow:inset 0 0 0 1px #a39e92}
.is-active.btn-primary{background:#b97a2c}
.is-focus{outline:2px solid #0f1411;outline-offset:2px}
.icbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:0;background:transparent;color:#0f1411;cursor:pointer}
.icbtn:hover{background:#f2efe7}
.df :focus-visible{outline:2px solid #0f1411;outline-offset:2px}
.on-dark :focus-visible,.bg-trust :focus-visible{outline-color:#ffffff}
.link{color:#946619;font-weight:600;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1.5px;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline}
.on-dark .link,.bg-trust .link{color:#e5b26f}
.link-ink{color:#0f1411;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.link-ink:hover{text-decoration-thickness:2.5px}
.navlink{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border-radius:8px;color:#2a2f2b;font:500 15px/1 var(--df-sans);text-decoration:none;background:transparent;border:0;cursor:pointer}
.navlink:hover{background:#f2efe7;color:#0f1411}
.navlink[aria-expanded="true"]{background:#f2efe7;color:#0f1411}

/* ---------- Formulier ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:14px;font-weight:600;color:#2a2f2b}
.on-dark .label{color:#e4dfd3}
.bg-gold .label{color:#1a1407}
.input{height:48px;width:100%;border-radius:10px;border:1px solid #d8d2c2;background:#ffffff;padding:0 14px;font:400 16px/1.2 var(--df-sans);color:#0f1411;transition:border-color 150ms var(--df-ease)}
.input::placeholder{color:#7a7d78}
.input:hover{border-color:#a39e92}
.input:focus,.input.is-focus{outline:2px solid #0f1411;outline-offset:1px;border-color:#0f1411}
.input[aria-invalid="true"],.input.is-error{border-color:#b91c1c;box-shadow:inset 0 0 0 1px #b91c1c;background:#fffafa}
.input:disabled{background:#f2efe7;border-color:#e4dfd3;color:#5f635f;cursor:not-allowed}
.input-sm{height:44px;font-size:15px}
.err{display:flex;align-items:center;gap:6px;font-size:13.5px;line-height:1.35;color:#a61b1b;font-weight:500}
.bg-gold .err{color:#7a0f0f}
.hint{font-size:13px;line-height:1.4;color:#5f635f}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;cursor:pointer;min-height:44px;padding-top:10px}
.check input{width:20px;height:20px;margin:0;accent-color:#0f1411;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #d8d2c2;background:#ffffff;color:#0f1411;font:500 15px/1 var(--df-sans);cursor:pointer;transition:background-color 150ms var(--df-ease),border-color 150ms var(--df-ease)}
.chip:hover{border-color:#a39e92;background:#faf8f3}
.chip[aria-pressed="true"]{background:#0f1411;border-color:#0f1411;color:#ffffff}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:#f2efe7;box-shadow:inset 0 0 0 1px #e4dfd3}
.seg button{min-height:40px;padding:0 14px;border-radius:9px;border:0;background:transparent;color:#2a2f2b;font:600 14px/1 var(--df-sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg button:hover{background:#ffffff}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:#ffffff;color:#0f1411;box-shadow:0 0 0 1px #d8d2c2,0 1px 2px rgba(15,20,17,.08)}
.seg-lg button{min-height:44px;padding:0 18px;font-size:15px}
.switch{position:relative;width:46px;height:28px;border-radius:999px;border:0;background:#a39e92;cursor:pointer;flex:none;transition:background-color 150ms var(--df-ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#ffffff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform 150ms var(--df-ease)}
.switch[aria-checked="true"]{background:#0f1411}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.switchrow{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.range{width:100%;accent-color:#0f1411;height:28px}

/* ---------- Kaarten ---------- */
.card{background:#ffffff;border-radius:16px;box-shadow:var(--df-sh-card)}
.card-pad{padding:28px}
.card-link{transition:box-shadow 200ms var(--df-ease),transform 200ms var(--df-ease)}
.card-link:hover{box-shadow:var(--df-sh-raise);transform:translateY(-2px)}
.card-dark{background:#1b201c;border-radius:16px;box-shadow:0 0 0 1px #2a2f2b}
.card-trust{background:rgba(255,255,255,.05);border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.proof{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:10px;background:#fbf4e4;box-shadow:inset 0 0 0 1px #e9cf9c;color:#1a1407;font-size:15px;line-height:1.45;font-weight:500}
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.5}
.ticks li .ic{color:#9e6e1f;margin-top:2px}
.on-dark .ticks li .ic,.bg-trust .ticks li .ic{color:#d89848}

/* ---------- Badges en tags ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font:600 12.5px/1 var(--df-sans);white-space:nowrap}
.badge .ic{width:13px;height:13px;stroke-width:2.2}
.b-concept{background:#f2efe7;color:#4a4e4a;box-shadow:inset 0 0 0 1px #e4dfd3}
.b-sent{background:#e0f2fe;color:#075985}
.b-ok{background:#dcfce7;color:#166534}
.b-bad{background:#fee2e2;color:#991b1b}
.b-part{background:#fef3c7;color:#92400e}
.b-spoed{background:#b91c1c;color:#ffffff;letter-spacing:.05em;font-weight:700}
.b-dev{background:#0b2440;color:#ffffff}
.b-new{background:#dcfce7;color:#166534}
.b-imp{background:#e0f2fe;color:#075985}
.b-fix{background:#f2efe7;color:#4a4e4a;box-shadow:inset 0 0 0 1px #e4dfd3}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font:600 12px/1 var(--df-sans);white-space:nowrap}
.t-reno{background:#f6e8c9;color:#5c3d0c}
.t-nieuw{background:#e3eee6;color:#1f4d2e}
.t-lek{background:#e1e9f2;color:#0b2440}

/* ---------- Plaatshouder "Nog invullen" (één component, overal) ---------- */
.ph{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-radius:10px;border:1.5px dashed #b38a1d;background:#fff6cc;color:#5a4500;font:500 13.5px/1.35 var(--df-sans);text-align:center}
.ph b{font-weight:700}
.ph .ic{width:16px;height:16px;color:#7a5d00}
.ph-in{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:6px;border:1.5px dashed #b38a1d;background:#fff6cc;color:#5a4500;font:600 .86em/1.4 var(--df-sans);white-space:nowrap;vertical-align:baseline}
.ph-photo{flex-direction:column;aspect-ratio:4/3;width:100%}
.demo-note{font:500 11.5px/1.2 var(--df-sans);color:#5f635f;letter-spacing:.02em;margin-top:10px;display:flex;align-items:center;gap:6px}
.on-dark .demo-note,.bg-trust .demo-note{color:#a39e92}

/* ---------- Kaders (neutraal, zonder merk) ---------- */
.phone{position:relative;width:300px;padding:10px;border-radius:46px;background:#1b201c;box-shadow:0 0 0 1px #2a2f2b,inset 0 0 0 2px #2f3531,0 40px 70px -30px rgba(15,20,17,.55)}
.phone::before{content:"";position:absolute;top:20px;left:50%;width:76px;height:20px;margin-left:-38px;border-radius:999px;background:#0b0e0c;z-index:3}
.phone-scr{position:relative;width:280px;height:606px;border-radius:37px;overflow:hidden;background:#faf8f3}
.phone-in{position:absolute;top:0;left:0;width:390px;height:844px;transform:scale(.718);transform-origin:0 0;display:flex;flex-direction:column}
.laptop{position:relative}
.laptop-lid{padding:14px 14px 18px;border-radius:18px 18px 4px 4px;background:#1b201c;box-shadow:0 0 0 1px #2a2f2b,inset 0 0 0 2px #2f3531}
.laptop-scr{position:relative;overflow:hidden;border-radius:4px;background:#faf8f3;aspect-ratio:16/10}
.laptop-base{position:relative;height:16px;margin:0 -7%;border-radius:2px 2px 16px 16px;background:#d8d2c2;box-shadow:inset 0 -3px 0 #a39e92,0 30px 50px -24px rgba(15,20,17,.45)}
.laptop-base::before{content:"";position:absolute;top:0;left:50%;width:18%;margin-left:-9%;height:6px;border-radius:0 0 8px 8px;background:#a39e92}
.scaled{position:absolute;top:0;left:0;transform-origin:0 0}

/* ---------- App-mockups (echte labels, op ware grootte, geschaald) ---------- */
.mock{font-family:var(--df-sans);color:#0f1411;font-size:14px;line-height:1.4;pointer-events:none;user-select:none}
.a-shell{display:flex;width:1280px;height:800px;background:#faf8f3}
.a-side{width:256px;flex:none;background:#ffffff;box-shadow:1px 0 0 #e4dfd3;display:flex;flex-direction:column;padding:20px 14px}
.a-logo{display:flex;align-items:center;gap:8px;padding:4px 10px 22px;font:800 20px/1 var(--df-display);letter-spacing:-.01em}
.a-logo small{font:600 11px/1 var(--df-sans);letter-spacing:.08em;color:#5f635f;padding:4px 6px;border-radius:5px;background:#f2efe7}
.a-nav{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border-radius:9px;color:#4a4e4a;font-weight:500;font-size:14.5px}
.a-nav.on{background:#fbf4e4;color:#0f1411;font-weight:600;box-shadow:inset 0 0 0 1px #f0dcb0}
.a-nav .ic{width:18px;height:18px;color:#5f635f}
.a-nav.on .ic{color:#9e6e1f}
.a-count{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:#0f1411;color:#fff;font:700 11px/20px var(--df-sans);text-align:center}
.a-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 0;border-top:1px solid #e4dfd3;font-size:13.5px;color:#4a4e4a}
.a-main{flex:1;min-width:0;display:flex;flex-direction:column}
.a-top{height:64px;flex:none;display:flex;align-items:center;gap:14px;padding:0 28px;background:#ffffff;box-shadow:0 1px 0 #e4dfd3}
.a-title{font:700 22px/1 var(--df-display);letter-spacing:-.01em}
.a-bell{position:relative;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#2a2f2b;box-shadow:inset 0 0 0 1px #e4dfd3;background:#fff}
.a-bell i{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#b91c1c;color:#fff;font:700 11px/19px var(--df-sans);font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff}
.a-av{width:30px;height:30px;border-radius:50%;background:#0b2440;color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 11.5px/1 var(--df-sans);flex:none}
.a-av-s{width:24px;height:24px;font-size:10px}
.a-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;background:#d89848;color:#1a1407;font:600 13.5px/1 var(--df-sans);white-space:nowrap}
.a-btn2{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;background:#fff;color:#0f1411;box-shadow:inset 0 0 0 1px #d8d2c2;font:600 13.5px/1 var(--df-sans);white-space:nowrap}
.a-board{display:flex;gap:14px;padding:22px 28px;align-items:flex-start;overflow:hidden}
.a-col{width:236px;flex:none;border-radius:14px;background:#f2efe7;box-shadow:inset 0 0 0 1px #e4dfd3;padding:10px}
.a-colh{display:flex;align-items:baseline;justify-content:space-between;padding:4px 6px 10px;gap:6px}
.a-colh b{font-size:14px}
.a-colh span{font-size:12px;color:#5f635f}
.a-card{background:#fff;border-radius:11px;box-shadow:0 0 0 1px #e4dfd3,0 1px 2px rgba(15,20,17,.05);padding:11px 12px;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.a-card .nm{font-weight:700;font-size:13.5px;line-height:1.25}
.a-card .tt{font-size:12.5px;color:#4a4e4a;line-height:1.3}
.a-card .rw{display:flex;align-items:center;gap:6px;justify-content:space-between}
.a-amt{font-weight:700;font-size:13.5px}
.a-pill{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:#f2efe7;color:#4a4e4a;font:600 11px/1 var(--df-sans)}
.a-src{font-size:11.5px;color:#5f635f}
.a-empty{border:1.5px dashed #d8d2c2;border-radius:10px;padding:20px 10px;text-align:center;color:#5f635f;font-size:12.5px}
.a-won{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;background:#dcfce7;color:#166534;font:700 11px/1 var(--df-sans)}
.a-mtop{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;box-shadow:0 1px 0 #e4dfd3}
.a-mbody{flex:1;min-height:0;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:12px}
.a-mbar{height:76px;flex:none;display:flex;align-items:center;justify-content:space-around;padding:0 10px 10px;background:#fff;box-shadow:0 -1px 0 #e4dfd3}
.a-mbar span{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 11px/1 var(--df-sans);color:#5f635f;width:62px}
.a-mbar span.on{color:#0f1411}
.a-plus{width:54px;height:54px;border-radius:50%;background:#d89848;color:#1a1407;display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:0 0 0 4px #fff,0 8px 18px -6px rgba(15,20,17,.4)}
.a-panel{background:#fff;border-radius:14px;box-shadow:0 0 0 1px #e4dfd3;padding:14px}
.a-lbl{font:600 11px/1.2 var(--df-sans);letter-spacing:.06em;text-transform:uppercase;color:#5f635f}
.a-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.a-line{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid #f2efe7;font-size:14px}
.a-fld{height:40px;border-radius:9px;box-shadow:inset 0 0 0 1px #d8d2c2;background:#fff;display:flex;align-items:center;padding:0 12px;font-size:14px;color:#0f1411}
.a-tile{border-radius:9px;background:repeating-linear-gradient(135deg,#e4dfd3 0 6px,#ece8dd 6px 12px);display:flex;align-items:flex-end;padding:6px;font:600 10.5px/1 var(--df-sans);color:#4a4e4a}
.a-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.a-tree{font:500 13px/1.75 var(--df-mono);color:#2a2f2b;white-space:pre;background:#faf8f3;border-radius:10px;box-shadow:inset 0 0 0 1px #e4dfd3;padding:14px 16px}
.a-notif{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:var(--df-sh-float);font-size:13.5px;line-height:1.35;color:#0f1411}
.appicon{width:38px;height:38px;border-radius:10px;background:#0f1411;display:flex;align-items:center;justify-content:center;flex:none}
.appicon svg{width:24px;height:16px}

/* ---------- Offerte-PDF in miniatuur ---------- */
.pdf{width:300px;aspect-ratio:210/297;background:#fff;box-shadow:var(--df-sh-raise);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;font-family:var(--df-sans);color:#0f1411}
.pdf-head{background:#0f1411;padding:16px 16px 14px;display:flex;justify-content:space-between;align-items:flex-start}
.pdf-head b{display:block;color:#fff;font:800 11.5px/1.1 var(--df-display);letter-spacing:.01em}
.pdf-head small{display:block;margin-top:4px;color:#d89848;font:700 5.5px/1.2 var(--df-sans);letter-spacing:.12em}
.pdf-head em{font:800 13px/1 var(--df-display);color:#d89848;font-style:normal;letter-spacing:.06em}
.pdf-body{padding:10px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.pdf-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f2efe7;border-radius:3px;padding:8px}
.pdf-k{font:700 4.8px/1.2 var(--df-sans);letter-spacing:.12em;color:#5f635f;margin-bottom:3px}
.pdf-v{font:500 6px/1.45 var(--df-sans);color:#0f1411}
.pdf-tbl{display:flex;flex-direction:column;font:500 5.6px/1.2 var(--df-sans)}
.pdf-tr{display:grid;grid-template-columns:1fr 20px 26px 32px;gap:4px;padding:4px 5px}
.pdf-tr:nth-child(odd){background:#faf8f3}
.pdf-th{background:#2a2f2b!important;color:#fff;font-weight:700;letter-spacing:.06em;font-size:4.8px}
.pdf-tr span:not(:first-child){text-align:right}
.pdf-tot{display:flex;justify-content:space-between;align-items:center;background:#0f1411;color:#fff;padding:6px 8px;border-radius:2px;font:700 5.5px/1 var(--df-sans);letter-spacing:.1em}
.pdf-tot b{color:#d89848;font:800 9px/1 var(--df-display);letter-spacing:0}
.pdf-bar{height:3px;border-radius:2px;background:#e4dfd3}
.pdf-foot{border-top:1.5px solid #d89848;padding:6px 14px 8px;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Beweging (max. 250 ms) ---------- */
@keyframes df-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes df-toast{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes df-slide{from{opacity:.2;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes df-lock{0%{opacity:0;transform:translateY(-12px)}2.6%{opacity:1;transform:none}86%{opacity:1;transform:none}88.6%{opacity:0;transform:translateY(-4px)}100%{opacity:0}}
.rv{animation:df-rise 240ms var(--df-ease) both}
.rv-1{animation-delay:60ms}.rv-2{animation-delay:120ms}.rv-3{animation-delay:180ms}.rv-4{animation-delay:240ms}
.toast-in{animation:df-toast 240ms var(--df-ease) 900ms both}
.toast-now{animation:df-toast 240ms var(--df-ease) both}
.moved{animation:df-slide 240ms var(--df-ease) both}
.lock-n{animation:df-lock 10s var(--df-ease) infinite both}
.lock-n.n2{animation-delay:1.4s}.lock-n.n3{animation-delay:2.8s}
.lock:hover .lock-n,.lock:focus-within .lock-n{animation-play-state:paused}
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.df *,.df *::before,.df *::after{animation:none!important;transition:none!important}}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(250,248,243,.94);backdrop-filter:saturate(1.2) blur(8px);box-shadow:0 1px 0 #e4dfd3;transition:box-shadow 200ms var(--df-ease)}
.hdr-in{height:64px;display:flex;align-items:center;gap:16px;transition:height 200ms var(--df-ease)}
.hdr.small .hdr-in{height:56px}
.hdr.small{box-shadow:0 1px 0 #e4dfd3,0 8px 24px -16px rgba(15,20,17,.3)}
.wm{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#0f1411;font:800 23px/1 var(--df-display);letter-spacing:-.01em;min-height:44px}
.wm svg{width:20px;height:13px;margin-bottom:5px}
.on-dark .wm{color:#fff}
.mega{position:absolute;left:0;right:0;top:100%;z-index:39;padding:10px 0 0}
.mega-in{background:#fff;border-radius:16px;box-shadow:var(--df-sh-float);padding:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 280px;gap:6px 14px}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;text-decoration:none;color:#0f1411}
.mega-item:hover{background:#faf8f3}
.mega-item .icbox{width:40px;height:40px;border-radius:10px}
.mega-item b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.mega-item span{display:block;font-size:13.5px;color:#5f635f;line-height:1.4;margin-top:2px}

/* Prototype-schakelaars (geen onderdeel van de site) */
.proto{background:#1b201c;color:#e4dfd3;font:500 12.5px/1 var(--df-sans)}
.proto-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:52px;padding:6px 0}
.proto b{font:700 11px/1 var(--df-mono);letter-spacing:.08em;color:#d89848;text-transform:uppercase}
.proto .seg{background:#2a2f2b;box-shadow:none;padding:3px}
.proto .seg button{color:#d8d2c2;min-height:34px;font-size:12.5px;padding:0 11px}
.proto .seg button:hover{background:#3a403b}
.proto .seg button[aria-pressed="true"]{background:#f2efe7;color:#0f1411;box-shadow:none}
.proto label{display:inline-flex;align-items:center;gap:8px}

/* ---------- Secties ---------- */
.grid{display:grid;gap:24px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.pain{padding:24px;display:flex;flex-direction:column;gap:18px;min-height:220px}
.pain p{font-size:17px;line-height:1.5;color:#e4dfd3}
.step-btn{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;width:100%;text-align:left;padding:14px 16px 14px 0;border:0;background:transparent;cursor:pointer;border-radius:12px;color:#0f1411;position:relative;z-index:1}
.step-btn:hover .step-t{text-decoration:underline;text-underline-offset:3px}
.step-n{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 1.5px #d8d2c2;font:800 17px/1 var(--df-display);color:#4a4e4a;transition:background-color 200ms var(--df-ease)}
.step-btn.on .step-n{background:#d89848;color:#1a1407;box-shadow:0 0 0 5px #fbf4e4}
.step-t{font:700 19px/1.25 var(--df-display);letter-spacing:-.01em;margin-top:2px}
.step-d{font-size:15.5px;line-height:1.45;color:#5f635f;margin-top:4px}
.step-btn.on .step-d{color:#2a2f2b}
.stage{position:relative;border-radius:24px;background:#f2efe7;box-shadow:inset 0 0 0 1px #e4dfd3;overflow:hidden}
.feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.feat-txt{grid-column:span 5}
.feat-vis{grid-column:span 7}
.feat.flip .feat-txt{order:2;grid-column:8 / span 5}
.feat.flip .feat-vis{order:1;grid-column:1 / span 7}
.tabs{display:flex;gap:6px;padding:6px;border-radius:14px;background:#f2efe7;box-shadow:inset 0 0 0 1px #e4dfd3;overflow-x:auto;scrollbar-width:none}
.tab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:10px;border:0;background:transparent;color:#2a2f2b;font:600 15px/1 var(--df-sans);cursor:pointer;white-space:nowrap}
.tab:hover{background:#fff}
.tab[aria-selected="true"]{background:#0f1411;color:#fff}
.tab i{font:800 13px/1 var(--df-display);font-style:normal;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(15,20,17,.08)}
.tab[aria-selected="true"] i{background:#d89848;color:#1a1407}
.qtbl{display:flex;flex-direction:column}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) 64px 48px 84px 104px;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #f2efe7;font-size:14.5px}
.qrow.qh{font:600 12px/1 var(--df-sans);letter-spacing:.06em;text-transform:uppercase;color:#5f635f;border-bottom-color:#e4dfd3;padding:8px 0}
.qrow span:not(:first-child){text-align:right}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5px 0;font-size:15px}
.tot.big{font:700 20px/1.2 var(--df-sans);padding-top:12px;margin-top:6px;border-top:1.5px solid #0f1411}
.margin{border-radius:12px;background:#0b2440;color:#eef1f5;padding:16px 18px}
.bcol{border-radius:14px;background:#f2efe7;box-shadow:inset 0 0 0 1px #e4dfd3;padding:10px;min-height:220px;display:flex;flex-direction:column;gap:8px;transition:box-shadow 150ms var(--df-ease)}
.bcol.over{box-shadow:inset 0 0 0 2px #0f1411;background:#fbf4e4}
.bcard{background:#fff;border-radius:12px;box-shadow:0 0 0 1px #e4dfd3,0 1px 2px rgba(15,20,17,.05);padding:10px 10px 10px 12px;display:flex;flex-direction:column;gap:7px;cursor:grab}
.bcard:active{cursor:grabbing}
.bcard.drag{opacity:.45}
.grip{width:32px;height:32px;margin:-4px -4px 0 0;border-radius:8px;border:0;background:transparent;color:#5f635f;display:inline-flex;align-items:center;justify-content:center;cursor:grab;flex:none}
.grip:hover{background:#f2efe7;color:#0f1411}
.mv{height:36px;border-radius:8px;border:1px solid #d8d2c2;background:#fff;font:500 13px/1 var(--df-sans);color:#0f1411;padding:0 8px;width:100%}
.sig{width:100%;height:auto;aspect-ratio:400/160;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px #a39e92;touch-action:none;cursor:crosshair;display:block}
.sig.has{box-shadow:inset 0 0 0 1.5px #0f1411}
.cmp{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.cmp > div{padding:16px 20px;border-bottom:1px solid #e4dfd3;display:flex;align-items:center;gap:10px;font-size:16px}
.cmp .c-with{background:#fbf4e4;font-weight:600}
.cmp .c-h{font:600 12.5px/1 var(--df-sans);letter-spacing:.08em;text-transform:uppercase;color:#5f635f;border-bottom:1.5px solid #0f1411}
.faq{border-bottom:1px solid #e4dfd3}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 4px;border:0;background:transparent;cursor:pointer;text-align:left;font:600 18px/1.35 var(--df-sans);color:#0f1411}
.faq-q:hover{color:#946619}
.faq-q .ic{transition:transform 200ms var(--df-ease)}
.faq-q[aria-expanded="true"] .ic{transform:rotate(180deg)}
.faq-a{padding:0 48px 22px 4px;font-size:16.5px;line-height:1.6;color:#2a2f2b;max-width:760px}
.ftr a{color:#d8d2c2;text-decoration:none;font-size:15px;line-height:1.3;display:inline-flex;min-height:32px;align-items:center}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr h4{font:700 13px/1 var(--df-sans);letter-spacing:.1em;text-transform:uppercase;color:#a39e92;margin-bottom:14px}

/* Mobiel: vaste CTA-balk en menu */
.mbar-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);box-shadow:0 -1px 0 #e4dfd3,0 -10px 30px -18px rgba(15,20,17,.35);transform:translateY(110%);transition:transform 220ms var(--df-ease)}
.mbar-cta.show{transform:none}
.mmenu{position:fixed;top:0;left:0;right:0;height:min(100vh,844px);z-index:60;background:#faf8f3;display:flex;flex-direction:column}

/* ---------- Responsief (container queries op .df) ---------- */
@container (max-width: 1100px){
  .feat,.feat.flip{grid-template-columns:minmax(0,1fr)}
  .feat-txt,.feat-vis,.feat.flip .feat-txt,.feat.flip .feat-vis{grid-column:auto;order:0}
}
@container (max-width: 900px){
  .hide-m{display:none!important}
  .wrap{padding:0 20px}
  .sec{padding:72px 0}
  .h1{font-size:40px;line-height:1.05}
  .h2{font-size:32px}
  .h3{font-size:23px}
  .lead{font-size:17.5px}
  .cmp{grid-template-columns:minmax(0,1fr)}
  .cmp .c-h{display:none}
  .cmp > div{border-bottom:0;padding:8px 16px}
  .cmp .c-topic{padding-top:18px;font-weight:700;border-top:1px solid #e4dfd3}
  .mega-in{grid-template-columns:minmax(0,1fr)}
}
@container (min-width: 901px){ .show-m{display:none!important} }

/* ---------- Micro-interacties en animaties (ronde 2) ----------
   Beweging max. 240 ms; kleurflitsen 450 ms. Alles staat stil bij .calm of prefers-reduced-motion. */
@keyframes df-fade{from{opacity:0}to{opacity:1}}
@keyframes df-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes df-slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes df-pop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes df-bump1{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes df-bump2{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes df-flash1{from{background-color:#f6e8c9}to{background-color:rgba(246,232,201,0)}}
@keyframes df-flash2{from{background-color:#f6e8c9}to{background-color:rgba(246,232,201,0)}}

/* Onthullen bij scrollen (alleen als de pagina echt scrolt; JS zet .reveal-on) */
.reveal-on .rv-s{transition:opacity 240ms var(--df-ease),translate 240ms var(--df-ease),transform 200ms var(--df-ease),box-shadow 200ms var(--df-ease),background-color 200ms var(--df-ease)}
.reveal-on .rv-s:not(.is-in){opacity:0;translate:0 14px}

/* Knoppen en links: pijl schuift mee, knop drukt in */
.btn > svg:last-child:not(:first-child),.link > svg:last-child{transition:transform 180ms var(--df-ease)}
.btn:hover > svg:last-child:not(:first-child),.link:hover > svg:last-child{transform:translateX(3px)}
.btn:active{transform:translateY(1px) scale(.985)}
.chip:active,.seg button:active,.tab:active{transform:scale(.97)}
.seg button,.tab{transition:background-color 150ms var(--df-ease),color 150ms var(--df-ease),box-shadow 150ms var(--df-ease),transform 120ms var(--df-ease)}
.chip{transition:background-color 150ms var(--df-ease),border-color 150ms var(--df-ease),color 150ms var(--df-ease),transform 120ms var(--df-ease)}
.input{transition:border-color 150ms var(--df-ease),box-shadow 150ms var(--df-ease)}
.icbtn{transition:background-color 150ms var(--df-ease),transform 120ms var(--df-ease)}
.icbtn:active{transform:scale(.94)}

/* Kaarten tillen op */
.pain{transition:transform 200ms var(--df-ease),background-color 200ms var(--df-ease)}
.pain:hover{transform:translateY(-3px);background:#222822}
.pain .icbox,.mega-item .icbox,.card-trust .icbox{transition:background-color 200ms var(--df-ease),transform 200ms var(--df-ease)}
.pain:hover .icbox{background:rgba(216,152,72,.24);transform:rotate(-4deg)}
.card-trust{transition:transform 200ms var(--df-ease),background-color 200ms var(--df-ease)}
.card-trust:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}
.card-trust:hover .icbox{transform:rotate(-4deg)}
article.card{transition:transform 200ms var(--df-ease),box-shadow 200ms var(--df-ease)}
article.card:hover{transform:translateY(-3px);box-shadow:var(--df-sh-raise)}
.mega-item{transition:background-color 150ms var(--df-ease)}
.mega-item:hover .icbox{background:#f6e8c9;transform:translateY(-1px)}

/* Mockups op het podium bewegen licht mee bij hover */
.stage .mock .card,.stage .mock .a-notif,.stage .mock .pdf,.stage .mock .a-col{transition:translate 240ms var(--df-ease)}
.stage:hover .mock .card{translate:0 -4px}
.stage:hover .mock .a-notif{translate:0 -6px}
.stage:hover .mock .pdf{translate:4px -8px}
.stage:hover .mock .a-col:nth-child(2){translate:0 -3px}

/* Stappen */
.step-n{transition:background-color 200ms var(--df-ease),box-shadow 200ms var(--df-ease),color 200ms var(--df-ease),transform 200ms var(--df-ease)}
.step-btn:hover .step-n{transform:scale(1.06)}
.swap{animation:df-slidein 220ms var(--df-ease) both}

/* Panelen die verschijnen */
.mega{animation:df-drop 180ms var(--df-ease) both}
.mmenu{animation:df-fade 180ms var(--df-ease) both}
.mmenu nav{animation:df-slidein 220ms var(--df-ease) both}
.faq-a{animation:df-drop 200ms var(--df-ease) both}
[role="tabpanel"]{animation:df-fade 200ms var(--df-ease) both}
.err{animation:df-drop 180ms var(--df-ease) both}
#demo form,#m-demo form{animation:df-slidein 220ms var(--df-ease) both}
.toast-now .ic{animation:df-pop 240ms var(--df-ease) 80ms both}
.margin.rv{animation:df-drop 200ms var(--df-ease) both}

/* Getallen die meebewegen */
.bump1{animation:df-bump1 220ms var(--df-ease);transform-origin:left center}
.bump2{animation:df-bump2 220ms var(--df-ease);transform-origin:left center}
.flash1{animation:df-flash1 450ms ease-out;border-radius:6px}
.flash2{animation:df-flash2 450ms ease-out;border-radius:6px}

/* Bord-demo */
.bcard{transition:box-shadow 150ms var(--df-ease),transform 150ms var(--df-ease),opacity 150ms var(--df-ease)}
.bcard:hover{box-shadow:0 0 0 1px #d8d2c2,0 8px 18px -10px rgba(15,20,17,.3);transform:translateY(-1px)}
.bcard.drag{opacity:.5;transform:rotate(2deg) scale(.98)}
.sig{transition:box-shadow 150ms var(--df-ease)}

@media (prefers-reduced-motion:reduce){.reveal-on .rv-s:not(.is-in){opacity:1;translate:none}}
.calm .rv-s:not(.is-in){opacity:1!important;translate:none!important}