/* ═══════════════════════════════════════════════════════════════
   BakeryPulse — "Meel & deeg" merklaag (richting 1a)
   Laad NA alle andere stylesheets én na de inline <style> in de <head>:
   <link rel="stylesheet" href="css/meel-deeg.css?v=20260925">
   Verwijder deze ene regel om terug te gaan naar de oude look.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --cream-50:  #FAF6EF;
    --cream-100: #F3ECDF;
    --cream-200: #E9DFCD;
    --cream-300: #D9CCB5;
    --crust-100: #F2DFC8;
    --crust-300: #E0A56E;
    --crust-500: #B8672A;
    /* Was #9A5420. Dat haalde op --crust-100 een contrast van 4,41 — net
       onder de grens van 4,5 — en dat is precies de combinatie van de
       "Meest gekozen"-badge. Een tint dieper brengt hem op 4,88, en op de
       crèmevlakken gaat hij van 5,3 naar 5,9. Zelfde kleur, iets meer body. */
    --crust-600: #914E1E;
    --dough-700: #4A3F31;
    --dough-600: #5B5040;
    --dough-500: #6B5B45;

    /* bestaande tokens warm maken */
    --bg-white: var(--cream-50);
    --bg-gray: var(--cream-100);
    --bg-light: var(--cream-100);
    --text-secondary: var(--dough-600);
    --text-muted: var(--dough-500);
    --border-color: var(--cream-200);
    --border-light: var(--cream-200);

    --bp-wave-in:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0%2040%20C120%2010%20240%2010%20380%2034%20S640%2066%20800%2038%20S1060%208%201200%2030%20V70%20H0Z'/%3E%3C/svg%3E");
    --bp-wave-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0%2030%20C160%2060%20300%2064%20460%2040%20S760%206%20920%2030%20S1110%2058%201200%2044%20V0%20H0Z'/%3E%3C/svg%3E");
    --bp-wave-foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0%2034%20C200%208%20360%208%20560%2030%20S900%2056%201200%2022%20V60%20H0Z'/%3E%3C/svg%3E");
    --bp-dot: radial-gradient(circle, var(--crust-500) 0 60%, transparent 62%);
}

/* ── Basis ───────────────────────────────────────────────────── */
body { background: var(--cream-50); color: var(--ink-900, #1E293B); }
.section-white, .page-hero, .module-hero, .hero, .module-section, .demo-section.section-white { background: var(--cream-50) !important; }
.section-gray, .module-section.mod-alt, .demo-section { background: var(--cream-100) !important; }
.page-hero, .module-hero { border-bottom: none !important; position: relative; overflow: hidden; }
.hero { background: var(--cream-50) !important; position: relative; overflow: hidden; }

/* Bloemstof: losse asterisks in hero's */
.hero::before, .page-hero::before, .module-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        url(../images/brand/mark-blue.svg) 46% 40px / 26px auto no-repeat,
        url(../images/brand/mark-blue.svg) 92% 110px / 38px auto no-repeat,
        url(../images/brand/mark-crust.svg) 6% 85% / 20px auto no-repeat,
        url(../images/brand/mark-blue.svg) 38% 88% / 16px auto no-repeat;
    opacity: .16;
}
.hero > .container, .page-hero > .container, .module-hero > .container { position: relative; z-index: 1; }

/* ── Navigatie ───────────────────────────────────────────────── */
.navbar { background: rgba(250, 246, 239, .94) !important; border-bottom-color: var(--cream-200) !important; }
.nav-links a, .nav-dropdown-trigger { color: var(--dough-700); }
.nav-dropdown-menu { background: var(--cream-50); border-color: var(--cream-200); border-radius: 18px; }
.nav-dropdown-menu a:hover, .nav-dropdown-all:hover { background: var(--cream-100) !important; }
.nav-dropdown-all { border-bottom-color: var(--cream-200) !important; }
.lang-trigger { border-color: var(--cream-300) !important; border-radius: 999px !important; }
.lang-dropdown { background: var(--cream-50) !important; border-color: var(--cream-200) !important; border-radius: 14px !important; }
.mobile-nav { background: var(--cream-50); }

/* ── Knoppen: pill ───────────────────────────────────────────── */
.btn, .tier-cta, .btn-coming-soon { border-radius: 999px !important; }
.btn-secondary { background: transparent !important; border: 1.5px solid var(--cream-300) !important; color: var(--ink-900, #1E293B) !important; }
.btn-secondary:hover { background: var(--cream-100) !important; border-color: var(--dough-500) !important; }

/* Op de blauwe banden en in de voettekst moet diezelfde knop juist licht
   zijn. De regel hierboven zet donkere inkt met !important, en dat verslaat
   zelfs de inline color:white die in die knoppen staat — de tekst kwam zo op
   #1E293B tegen #013DA5 uit, contrast 1,54. Onleesbaar.

   Dit is dezelfde blinde vlek als bij de toelichtingen: de merklaag is
   geschreven voor de crèmekleurige vlakken en vergeet de donkere. */
.problem-section .btn-secondary,
.section-blue .btn-secondary,
.cta-section .btn-secondary,
.module-cta .btn-secondary,
.footer .btn-secondary {
    border-color: rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}
.problem-section .btn-secondary:hover,
.section-blue .btn-secondary:hover,
.cta-section .btn-secondary:hover,
.module-cta .btn-secondary:hover,
.footer .btn-secondary:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: #fff !important;
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(1, 61, 165, .25); }

/* ── Labels: pill wordt korst-eyebrow met asterisk ───────────── */
.section-label, .hero-label, .coming-soon-badge {
    background: transparent !important; padding: 0 0 0 26px !important; border: none !important;
    color: var(--crust-600) !important; font-family: var(--font-headline); font-weight: 600;
    background-image: url(../images/brand/mark-crust.svg) !important;
    background-repeat: no-repeat !important; background-size: auto 18px !important; background-position: 0 50% !important;
    min-height: 20px; line-height: 20px;
}
/* Wit in plaats van crust-100: op het doorschijnende pilletje over blauw
   haalde die crèmetint 4,43 — net onder de grens. Wit brengt hem op 5,75 en
   het verschil met de kop eronder blijft goed zichtbaar door de maat en de
   letterafstand, niet door de kleur. */
.section-label-white, .problem-section .section-label, .section-blue .section-label, .cta-section .section-label {
    color: #fff !important;
    background-image: url(../images/brand/mark-white.svg) !important;
}

/* ── Koppen ──────────────────────────────────────────────────── */
/* Ook de kop van de prijzenpagina: die zit niet in een hero maar in
   een .section-header op de blauwe band, en stond daardoor op een
   eigen clamp(28px, 4vw, 44px) — merkbaar kleiner dan alle andere. */
.hero h1, .page-hero h1, .module-hero h1, #pricing .section-header h1 { font-size: clamp(38px, 5.2vw, 60px) !important; line-height: 1.05 !important; letter-spacing: -.02em; text-wrap: balance; }
.section-header h2, .demo-text h2, .cta-content h2 { letter-spacing: -.015em; text-wrap: balance; }
/* Toelichtingen zijn warmgrijs op de crèmekleurige vlakken.
   Zonder !important, want anders wint deze regel ook op de blauwe banden
   hieronder — en dan staat er grijs #5B5040 op #013DA5, contrast 1,21. Dat
   is niet lelijk maar onleesbaar. De witregels in style.css zijn specifieker
   en horen te winnen; dat konden ze niet zolang hier !important stond. */
.hero-description, .section-description, .page-hero p, .module-hero p { color: var(--dough-600); }

/* Op de blauwe banden juist licht. style.css dekt alleen .problem-section af;
   .section-blue (de prijzenpagina), .cta-section en .module-cta hadden nog
   niets. Wit op 90% geeft contrast 8,0. */
.problem-section .section-description,
.section-blue .section-description,
.cta-section .section-description,
.module-cta .section-description,
.problem-section .hero-description,
.section-blue .hero-description {
    color: rgba(255, 255, 255, 0.9);
}

/* ── Blauwe banden: deegrand boven en onder + bloemstof-patroon ─ */
.problem-section, .section-blue, .cta-section, .module-cta {
    position: relative; overflow: visible !important;
    background: #013DA5 !important;
    /* Geen marge onderaan: de golf hangt 69px naar beneden en moet op de
       kleur van de vólgende sectie vallen. Met een marge eronder viel hij op
       de pagina-achtergrond, en zag je een lichtere strook tussen de bocht
       en de sectie — met de bovenrand van die sectie als harde lijn eronder.
       Bovenaan blijft de marge staan: daar hangt de andere golf omhoog. */
    margin: 70px 0 0;
    isolation: isolate;
}

/* De sectie die er direct onder komt vangt de golf op. */
.problem-section + section, .section-blue + section,
.cta-section + section, .module-cta + section {
    border-top: none !important;
    padding-top: 96px !important;
}
.problem-section::before, .section-blue::before, .cta-section::before, .module-cta::before {
    content: ""; position: absolute; left: 0; right: 0; top: -69px; height: 70px;
    background: #013DA5; -webkit-mask: var(--bp-wave-in) 0 0 / 100% 100%; mask: var(--bp-wave-in) 0 0 / 100% 100%;
    pointer-events: none;
}
.problem-section::after, .section-blue::after, .cta-section::after, .module-cta::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -69px; height: 70px;
    background: #013DA5; -webkit-mask: var(--bp-wave-out) 0 0 / 100% 100%; mask: var(--bp-wave-out) 0 0 / 100% 100%;
    pointer-events: none;
}
.problem-section > .container, .section-blue > .container, .cta-section > .container, .module-cta > .container { position: relative; z-index: 1; }
.problem-deco { background: url(../images/brand/asterisk-scatter-white.svg) 0 0 / 96px 96px; opacity: 1; }
.problem-deco .croissant { display: none; } /* croissants maken plaats voor bloemstof op 1a */
.problem-deco::after { content: ""; position: absolute; inset: 0; background: #013DA5; opacity: .93; }

/* Probleemkaarten: geen witte kaart, quote direct op blauw */
.problem-card { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.problem-card h3 { color: #fff !important; font-size: 19px !important; }
.problem-card h3::before { content: "\201C"; display: block; font: 800 56px/.6 var(--font-headline); color: var(--crust-300); margin-bottom: 6px; }
.problem-card p { color: #DCE6FA !important; }
.problem-card .problem-icon { display: none; }

/* ── Iconen: cirkel, dunne lijn, korststip ───────────────────── */
.feature-icon, .module-icon-wrap, .problem-icon, .value-icon {
    position: relative; border-radius: 50% !important; background: var(--cream-100) !important;
}
.feature-icon::after, .module-icon-wrap::after, .problem-icon::after, .value-icon::after {
    content: ""; position: absolute; top: 22%; right: 22%; width: 7px; height: 7px; border-radius: 50%; background: var(--crust-500);
}
.feature-icon svg, .module-icon-wrap svg, .problem-icon svg, .value-icon svg { stroke-width: 1.75 !important; color: #013DA5; stroke: #013DA5; }
.feature-blue .feature-icon, .section-blue .feature-icon, .value-icon { background: var(--cream-50) !important; }
.feature-blue .feature-icon svg, .value-icon svg { color: #013DA5 !important; stroke: #013DA5 !important; }

/* ── Kaarten: kaders eruit, crème vlakken ────────────────────── */
.feature-card, .step, .licence-card, .contact-card, .demo-form-container, .pricing-card, .hc-tier, .tier-card {
    border: none !important; box-shadow: none !important;
}
.feature-card, .licence-card, .contact-card, .tier-card { background: var(--cream-100) !important; border-radius: 24px !important; }
.demo-form-container { background: var(--cream-100) !important; border-radius: 32px !important; }

/* De licentiekaartjes wit: op een crèmekleurige pagina kwamen ze met
   cream-100 nauwelijks los van de achtergrond, en juist die kaartjes moeten
   opvallen — daar staat de prijs in. */
.hc-tier { background: #fff !important; border-radius: 24px !important; }

.feature-card:hover, .tier-card:hover { background: var(--cream-200) !important; }

/* Vanaf wit is cream-200 een te grote stap; die leest als indrukken in
   plaats van aanwijzen. Een tint lichter geeft genoeg terugkoppeling.

   Let op het :not(): de uitgelichte kaart draagt óók .hc-tier, en
   .hc-tier:hover is specifieker dan .hc-tier-popular. Zonder deze uitsluiting
   wordt die kaart bij hover crème mét zijn witte tekst — onleesbaar. */
.hc-tier:not(.hc-tier-popular):hover { background: var(--cream-50) !important; }

/* De uitgelichte kaart gaat juist een tint dieper. Wit houdt daarop een
   contrast van 12,5 (was 9,5), dus de tekst wordt eerder beter dan slechter. */
.hc-tier-popular:hover { background: #012E7C !important; }
.step-number { border-radius: 50%; background: #013DA5; }
.module-header { border-bottom-color: var(--cream-200) !important; }
.module-badge--opt { background: var(--cream-100) !important; color: var(--crust-600) !important; }
.value-card { background: rgba(255,255,255,.06) !important; border: none !important; border-radius: 24px !important; }

/* Lijsten: asterisk in plaats van ✓ waar het via CSS kan */
.tier-features li::before { content: "" !important; width: 12px; height: 16px; top: 9px; left: 2px;
    background: url(../images/brand/mark-blue.svg) center / contain no-repeat; }
.tier-features li { border-bottom-color: var(--cream-200) !important; color: var(--dough-700) !important; }
.feature-list li, .benefit-item, .trust-icons span { color: var(--dough-700) !important; }

/* Populaire licentie: blauw vlak */
.tier-card.tier-popular, .hc-tier-popular { background: #013DA5 !important; transform: translateY(-12px); box-shadow: 0 20px 48px rgba(1,61,165,.22) !important; }
.tier-popular .tier-name, .tier-popular .tier-amount, .hc-tier-popular .hc-tier-name, .hc-tier-popular .hc-tier-price { color: #fff !important; }
.tier-popular .tier-for, .tier-popular .tier-period, .tier-popular .tier-vat, .tier-popular .tier-price-sub, .hc-tier-popular .hc-tier-for, .hc-tier-popular .hc-tier-desc { color: #DCE6FA !important; }
.tier-popular .tier-features li { color: #fff !important; border-bottom-color: rgba(255,255,255,.18) !important; }
.tier-popular .tier-features li::before { background-image: url(../images/brand/mark-white.svg); }
.tier-popular .tier-cta-primary { background: var(--cream-50) !important; color: #013DA5 !important; }
.tier-badge, .hc-tier-badge { background: var(--crust-100) !important; color: var(--crust-600) !important; }
.tier-cta { background: #013DA5 !important; color: #fff !important; }

/* Vergelijkingstabel */
/* De vergelijkingstabel op wit. De cellen blijven doorzichtig, dus het wit
   van de tabel komt overal door — behalve in de uitgelichte kolom, die zijn
   eigen blauw houdt. */
.compare-table { background: #fff !important; }
.compare-table th, .compare-table td { background: transparent !important; border-bottom-color: var(--cream-200) !important; color: var(--ink-900, #1E293B); }
.compare-table thead th { background: transparent !important; }
.compare-table th.featured { background: #013DA5 !important; color: #fff !important; border-radius: 20px 20px 0 0; }
.compare-table td.featured { background: #013DA5 !important; color: #fff !important; border-bottom-color: rgba(255,255,255,.18) !important; }
.compare-table td.featured .check { color: #fff !important; }
.compare-table td.featured .cross { color: #9FB4EE !important; }
.compare-table .check { color: #013DA5 !important; }
.compare-table .cross { color: #B8A98F !important; }
.compare-table .section-label-row td { background: transparent !important; color: var(--crust-600) !important; border-top: none !important; }
.compare-table .section-label-row td.featured, .compare-table .section-label-row td:nth-child(3) { background: #013DA5 !important; }

/* FAQ */
.faq-item { border-top: 1px solid var(--cream-200); padding-top: 20px; }
.section-blue .faq-item, .problem-section .faq-item { border-top-color: rgba(255,255,255,.2); }

/* Formulieren */
.demo-form input, .demo-form select, .demo-form textarea, .demo-form-container textarea {
    background: var(--cream-50) !important; border: 1.5px solid var(--cream-200) !important; border-radius: 14px !important;
}
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { border-color: #013DA5 !important; background: #fff !important; }
.form-note { color: var(--dough-500) !important; }

/* Mockups: behouden, maar warmer kader */
.dash-mockup, .feat-mockup, .app-card { border-radius: 20px !important; }

/* Aankondigingsbalk */
.coming-soon-bar { background: #013DA5 !important; }

/* ── Footer met deegrand ─────────────────────────────────────── */
.footer { position: relative; margin-top: 60px; }
.footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -59px; height: 60px;
    background: var(--bg-dark, #0D1B2A); -webkit-mask: var(--bp-wave-foot) 0 0 / 100% 100%; mask: var(--bp-wave-foot) 0 0 / 100% 100%;
}

/* ── Blauwe band die direct op de voettekst uitkomt ──────────────
   Op de modulepagina's eindigt de pagina met .module-cta en staat de
   voettekst er als directe buur onder. Die twee brachten allebei een
   overgang mee: de band een golf naar beneden plus 70px marge, de
   voettekst 60px marge plus een eigen golf omhoog. Samen leverde dat twee
   bochten op met een crèmestrook ertussen — rommelig, en het leest niet
   als één vorm.

   Nu doet alleen de voettekst de overgang: zijn donkere golf snijdt
   rechtstreeks in het blauw. De padding vervangt de ruimte die de
   weggehaalde golf innam, zodat de tekst niet onder de bocht verdwijnt. */
.module-cta { margin-bottom: 0 !important; padding-bottom: 96px !important; }
.module-cta::after { display: none; }
.module-cta + .footer { margin-top: 0; }

/* ── Inline achtergronden uit de HTML warm maken ─────────────── */
[style*="background: #f8fafc"], [style*="background:#f8fafc"], [style*="background: #F8FAFC"] { background: var(--cream-100) !important; }
[style*="background: #eff6ff"], [style*="background:#eff6ff"] { background: var(--cream-100) !important; border-color: var(--cream-200) !important; }
[style*="border: 1.5px solid #e2e8f0"], [style*="border:1.5px solid #e2e8f0"] { border-color: var(--cream-200) !important; }

/* ── Prijzenpagina ─────────────────────────────────────────────
   Deze sectie is in de merklaag van blauw naar crème gegaan, maar alles
   wat erin staat was voor blauw ontworpen. De maand/jaar-schakelaar was
   daardoor zo goed als onzichtbaar: een doorschijnend wit vlakje met een
   witte rand en tekst in wit op 65%, alles op crème. */
.billing-pill {
    background: var(--cream-200) !important;
    border-color: var(--cream-300) !important;
}
/* De niet-gekozen kant in de gewone tekstkleur: 5,96 op de baan. */
.billing-pill label { color: var(--dough-600) !important; }
/* De gekozen kant staat op het witte schuifje: 9,49. */
.billing-pill input[type="radio"]:checked + label { color: var(--primary) !important; }

#pricing.section-blue { background: var(--cream-50) !important; margin: 0; }
#pricing.section-blue::before, #pricing.section-blue::after { display: none; }
/* Deze band heeft geen golven, dus de sectie eronder hoeft er ook geen
   ruimte voor vrij te houden. Zonder deze regel kreeg hij 96px extra lucht
   voor een bocht die er niet is. */
#pricing.section-blue + section { padding-top: 56px !important; }
#pricing .text-white, #pricing h1 { color: var(--ink-900, #1E293B) !important; }
#pricing .text-white-80, #pricing .section-description { color: var(--dough-600) !important; }
#pricing .section-label-white { color: var(--crust-600) !important; background-image: url(../images/brand/mark-crust.svg) !important; }
#pricing + section { background: var(--cream-50) !important; }
#faq.section-blue { padding-top: 40px !important; }
#faq.section-blue > .container > div:first-child { border-top: none !important; padding-top: 0 !important; }

@media (max-width: 768px) {
    .problem-section::before, .section-blue::before, .cta-section::before, .module-cta::before { height: 36px; top: -35px; }
    .problem-section::after, .section-blue::after, .cta-section::after, .module-cta::after { height: 36px; bottom: -35px; }
    .problem-section, .section-blue, .cta-section, .module-cta { margin: 36px 0; }
    .tier-card.tier-popular, .hc-tier-popular { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .btn-primary:hover { transform: none; } }