/* ── Fonts: zelf gehost (OFL, zie /assets/fonts/OFL-*.txt). Geen verzoeken naar Google. ── */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/bricolage-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Thema-tokens: identiek aan de app (PLAN.md §6) + "mark" voor de punt in het woordmerk ── */
:root,[data-theme="lime"]{--ground:#F3F4EF;--card:#FFFFFF;--ink:#15171C;--muted:#5B606B;--hero:#15171C;--hero-ink:#FFFFFF;--hero-muted:#C9CCD3;--hero-tile:#24272E;--accent:#D4F25A;--accent-ink:#15171C;--second:#4A2FD9;--soft:#ECEDE8;--line:#DCDED6;--mark:#6E8F00;--accent-wash:#F4FBD9}
[data-theme="nacht"]{--ground:#0F1115;--card:#1A1D23;--ink:#F1F2F4;--muted:#A3A8B3;--hero:#23272F;--hero-ink:#FFFFFF;--hero-muted:#C9CCD3;--hero-tile:#2E333C;--accent:#D4F25A;--accent-ink:#15171C;--second:#B3A6FF;--soft:#2A2E36;--line:#3A3F48;--mark:#D4F25A;--accent-wash:#2A3214}
[data-theme="espresso"]{--ground:#F5EFE8;--card:#FFFFFF;--ink:#2B1D14;--muted:#6E5A4C;--hero:#2B1D14;--hero-ink:#FFFFFF;--hero-muted:#D9CBBE;--hero-tile:#3D2B20;--accent:#E8B07A;--accent-ink:#2B1D14;--second:#8A4B2A;--soft:#EFE5DA;--line:#E2D6C9;--mark:#8A4B2A;--accent-wash:#FBEEDF}
[data-theme="oceaan"]{--ground:#EEF4F7;--card:#FFFFFF;--ink:#0E2433;--muted:#4D6372;--hero:#0E2433;--hero-ink:#FFFFFF;--hero-muted:#BFD0DA;--hero-tile:#1A3547;--accent:#7FD3E8;--accent-ink:#0E2433;--second:#1F6E99;--soft:#E0EBF0;--line:#D3E0E7;--mark:#1F6E99;--accent-wash:#E3F5FA}
[data-theme="bos"]{--ground:#EEF2EC;--card:#FFFFFF;--ink:#15261C;--muted:#4E6255;--hero:#1C3326;--hero-ink:#FFFFFF;--hero-muted:#C3D3C8;--hero-tile:#284534;--accent:#A8DCA0;--accent-ink:#15261C;--second:#2F6B45;--soft:#E1E9DE;--line:#D5DFD1;--mark:#2F6B45;--accent-wash:#EAF6E7}
[data-theme="bubblegum"]{--ground:#FFF0F5;--card:#FFFFFF;--ink:#3A1027;--muted:#7A4D62;--hero:#3A1027;--hero-ink:#FFFFFF;--hero-muted:#E8C9D6;--hero-tile:#4E1B36;--accent:#FF9EC4;--accent-ink:#3A1027;--second:#C2185B;--soft:#FBE1EB;--line:#F3D2DF;--mark:#C2185B;--accent-wash:#FFE6F0}
[data-theme="lavendel"]{--ground:#F3F0FA;--card:#FFFFFF;--ink:#241B3A;--muted:#5F5675;--hero:#241B3A;--hero-ink:#FFFFFF;--hero-muted:#D3CCE6;--hero-tile:#342850;--accent:#C9B8FF;--accent-ink:#241B3A;--second:#6A4FC4;--soft:#E7E1F5;--line:#DCD5EE;--mark:#6A4FC4;--accent-wash:#F0EBFF}
[data-theme="zonsondergang"]{--ground:#FFF3EC;--card:#FFFFFF;--ink:#3A1A12;--muted:#76574C;--hero:#3A1A12;--hero-ink:#FFFFFF;--hero-muted:#E6CFC5;--hero-tile:#4F271C;--accent:#FFB38A;--accent-ink:#3A1A12;--second:#B83A1E;--soft:#FBE4D8;--line:#F1D6C8;--mark:#B83A1E;--accent-wash:#FFEADD}
[data-theme="klassiek"]{--ground:#F4F2EC;--card:#FFFFFF;--ink:#13213C;--muted:#555D6E;--hero:#13213C;--hero-ink:#FFFFFF;--hero-muted:#C7CDD9;--hero-tile:#1F3054;--accent:#E3C46B;--accent-ink:#13213C;--second:#7A5C0E;--soft:#EAE6DA;--line:#DED9CB;--mark:#7A5C0E;--accent-wash:#F8F0D8}
[data-theme="speelkwartier"]{--ground:#FFF9E6;--card:#FFFFFF;--ink:#1B1B3A;--muted:#55556E;--hero:#2F5BEA;--hero-ink:#FFFFFF;--hero-muted:#DCE4FF;--hero-tile:#2449C2;--accent:#FFD23F;--accent-ink:#1B1B3A;--second:#D6336C;--soft:#FFF0C2;--line:#F2E4B8;--mark:#D6336C;--accent-wash:#FFF4CC}
[data-theme="hoogcontrast"]{--ground:#FFFFFF;--card:#FFFFFF;--ink:#000000;--muted:#333333;--hero:#000000;--hero-ink:#FFFFFF;--hero-muted:#E6E6E6;--hero-tile:#262626;--accent:#FFE000;--accent-ink:#000000;--second:#0033CC;--soft:#EDEDED;--line:#000000;--mark:#0033CC;--accent-wash:#FFF7B3;font-size:112.5%}
[data-theme="hoogcontrast"] .card,[data-theme="hoogcontrast"] .panel{border:2px solid #000}

/* ── Basis ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Figtree,system-ui,sans-serif;font-size:1rem;line-height:1.5;transition:background-color .35s ease,color .35s ease}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px}
.display{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0}
h1.display{font-size:clamp(2.6rem,6vw,4.75rem)}
h2.display{font-size:clamp(2rem,4vw,3.25rem)}
h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem;line-height:1.15;margin:0}
.lead{font-size:1.25rem;color:var(--muted);margin:0;max-width:32rem}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font-size:.875rem;font-weight:600;color:var(--second)}
.section{padding:80px 0}
.band{background:var(--card)}
.band-hero{background:var(--hero);color:var(--hero-ink)}
.band-hero .muted{color:var(--hero-muted)}
.split{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.split>*{flex:1 1 420px;min-width:0}
.stack{display:flex;flex-direction:column;gap:18px}
.card{background:var(--card);border-radius:28px;padding:26px}
.panel{background:var(--ground);border-radius:28px;padding:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:26px;border:none;background:var(--accent);color:var(--accent-ink);font:600 1rem Figtree,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .35s,color .35s}
.btn-dark{background:var(--hero);color:var(--hero-ink)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--second);outline-offset:2px}
.mark{color:var(--mark)}
.wordmark{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.02em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Header ── */
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.375rem}
nav ul{display:flex;gap:22px;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-weight:500;font-size:.95rem}
nav a{text-decoration:none}
nav a:hover{text-decoration:underline}

/* ── Hero ── */
.pill{align-self:flex-start;font-size:.875rem;font-weight:600;background:var(--card);border:1px solid var(--line);padding:6px 14px;border-radius:16px}
.waitlist{display:flex;gap:10px;flex-wrap:wrap;max-width:32rem}
.waitlist input{flex:1 1 240px;min-height:52px;border-radius:26px;border:1px solid var(--line);padding:0 20px;font:1rem Figtree,sans-serif;background:var(--card);color:var(--ink)}
.phone{width:340px;max-width:100%;margin:0 auto;background:var(--card);border-radius:44px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.14)}
.phone-screen{background:var(--ground);border-radius:32px;padding:22px 16px;display:flex;flex-direction:column;gap:12px}
.herocard{background:var(--hero);color:var(--hero-ink);border-radius:22px;padding:18px}
.herocard .big{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:2.5rem;letter-spacing:-.03em}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.tile{background:var(--hero-tile);border-radius:14px;padding:10px}
.tile.accent{background:var(--accent);color:var(--accent-ink)}
.tile small{display:block;font-size:.7rem;opacity:.85}
.tile b{font-size:1.05rem}
.row{background:var(--card);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:.875rem}
.ini{width:34px;height:34px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.row span:nth-child(2){flex-grow:1}

/* ── Rekenvoorbeeld ── */
.calc-row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:8px 8px 8px 16px}
.calc-row label{flex-grow:1;font-weight:600}
.calc-row input{width:110px;min-height:44px;border-radius:12px;border:1px solid var(--line);padding:0 12px;font:1rem Figtree,sans-serif;text-align:right;background:var(--card);color:var(--ink)}
.result{background:var(--hero);color:var(--hero-ink);border-radius:20px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.result output{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.75rem;letter-spacing:-.02em}

/* ── Functies ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.badge{align-self:flex-start;font-size:.8rem;font-weight:600;padding:4px 12px;border-radius:12px;background:var(--soft);color:var(--ink)}
.badge.second{background:var(--second);color:#FFFFFF}
.badge.accent{background:var(--accent);color:var(--accent-ink)}
.badge.hero{background:var(--hero);color:var(--hero-ink)}
[data-theme="nacht"] .badge.second{color:#15171C}
.example{margin-top:auto;background:var(--ground);border-radius:16px;padding:12px 14px;font-size:.875rem;font-weight:600}

/* ── Nul-blok ── */
.zeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.zero{background:var(--hero-tile);border-radius:20px;padding:18px}
.zero b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.2rem;color:var(--accent)}
.zero span{font-size:.8rem;color:var(--hero-muted)}

/* ── Thema-kiezer ── */
.themes{display:flex;gap:10px;flex-wrap:wrap}
.theme-btn{min-height:44px;padding:0 14px;border-radius:22px;display:flex;align-items:center;gap:8px;font:600 .875rem Figtree,sans-serif;cursor:pointer;color:var(--ink);background:var(--card);border:1px solid var(--line)}
.theme-btn[aria-checked="true"]{border:2px solid var(--ink)}
.swatch{width:16px;height:16px;border-radius:8px;border:2px solid}
.family a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;text-decoration:none;margin-top:10px}
.family .f1{background:var(--hero);color:var(--hero-ink)}
.family .f1 small{color:var(--hero-muted)}
.family .f2{background:var(--ground)}
.family small{display:block;font-size:.8rem;color:var(--muted)}

/* ── Vergelijk ── */
.table-box{overflow-x:auto;background:var(--card);border-radius:28px}
table{width:100%;min-width:640px;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:16px 12px}
th:first-child,td:first-child{padding-left:20px}
thead th{color:var(--muted);font-weight:600}
tbody tr{border-top:1px solid var(--soft)}
td:first-child{font-weight:600}
.us{background:var(--accent-wash);font-weight:700}
thead .us{background:var(--accent);color:var(--accent-ink)}

/* ── Prijs ── */
.price{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.75rem}
.card.pro{background:var(--hero);color:var(--hero-ink)}
.card.pro .muted{color:var(--hero-muted)}
.chip{font-size:.8rem;font-weight:600;background:var(--accent);color:var(--accent-ink);padding:4px 10px;border-radius:10px}

/* ── FAQ ── */
details{background:var(--card);border-radius:20px;padding:18px 20px}
summary{font-weight:600;font-size:1.05rem;cursor:pointer}
details p{margin-top:12px;color:var(--muted)}

/* ── Footer ── */
footer{background:var(--hero);color:var(--hero-muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;padding-top:48px;padding-bottom:48px}
footer b{color:var(--hero-ink)}
footer .wordmark{font-size:1.5rem;color:var(--hero-ink)}
footer .wordmark .mark{color:var(--accent)}
footer ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.875rem}

/* overgang van alle kleurvlakken */
.card,.panel,.band,.band-hero,.herocard,.tile,.row,.result,.zero,.badge,.theme-btn,footer,thead .us,.us,.chip,.example,.calc-row{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
@media (max-width:520px){.zeros{grid-template-columns:1fr}.section{padding:56px 0}}

/* ── Tekstpagina's (planning, support, privacy, voorwaarden) ── */
.prose{max-width:760px}
.prose h1{margin-bottom:12px}
.prose h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.6rem;line-height:1.2;margin:40px 0 12px}
.prose h3{margin:28px 0 8px}
.prose p,.prose li{color:var(--muted)}
.prose p+p{margin-top:12px}
.prose ul{padding-left:1.2rem;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.prose strong{color:var(--ink)}
.prose .lang-switch{margin-top:8px;font-size:.95rem}
.roadmap{display:grid;gap:14px;margin-top:20px}
.roadmap .card{display:flex;flex-direction:column;gap:8px}
.roadmap ul{margin:0}
.updated{font-size:.875rem;color:var(--muted);margin-top:8px}