/* Home Board website, green preview: palette from the owner (page #F5F9EA, primary #2F7A2A, lime #C6E04B). */
:root{
  --navy:#2F7A2A; --navy-d:#235E20; --ink:#1F2D1B; --muted:#445A3C; --sub:#5A6B4F; --line:#DDE8CC;
  --bg:#F5F9EA; --cream:#FFFFFF; --star:#C6E04B; --lime:#C6E04B; --lime-tint:#EEF5C6; --on-lime-tint:#44550A; --tick:#2E8A5C;
  --soft:#E6F3D6; --terra:#D86A3D; --terra-text:#A84B25; --terra-tint:#FCE6DA; --on-terra-tint:#7A3417; --priv:#1F2D1B; --priv-card:#2C3F27; --priv-text:#F3F8E8; --priv-sub:#B5C6A5; --band-text:#E8F4DF; --card-label:#DDEFD6;
  --coral:#2F7A2A; --blue:#3D7FE0; --green:#2E9B62; --purple:#8C5CE0;
  --f-head:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Nunito",ui-sans-serif,system-ui,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:500 18px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}
h1,h2,h3{font-family:var(--f-head);line-height:1.05;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(34px,4.6vw,56px);font-weight:800}
h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
.center{text-align:center}
.eyebrow{font:800 14px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin:0 0 14px}
.eyebrow.light{color:var(--star)}
.lead{font-size:clamp(19px,1.8vw,22px);color:var(--muted);max-width:34em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;text-decoration:none;font:800 18px/1 var(--f-body);padding:18px 26px;border-radius:999px;box-shadow:0 6px 0 var(--navy-d),0 14px 30px rgba(31,78,140,.25);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--navy-d),0 18px 34px rgba(31,78,140,.3)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--navy-d),0 8px 20px rgba(31,78,140,.2)}
.btn-ghost{background:#fff;color:var(--navy);box-shadow:0 0 0 2px var(--line) inset}
.btn-ghost:hover{box-shadow:0 0 0 2px var(--navy) inset}
.btn-small{padding:11px 18px;font-size:15px;box-shadow:0 4px 0 var(--navy-d)}
.btn-big{font-size:21px;padding:22px 34px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px max(20px,calc((100% - var(--wrap))/2));background:rgba(245,247,250,.86);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(220,227,234,.7)}
.brand{display:flex;align-items:center;gap:10px;font:800 21px/1 var(--f-head);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand img{border-radius:10px}
.nav nav{display:flex;align-items:center;gap:26px}
.nav nav a:not(.btn){color:var(--ink);text-decoration:none;font-weight:700;font-size:16px}
.nav nav a:not(.btn):hover{color:var(--navy)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);gap:48px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:72px 20px 96px}
.hero::before{content:"";position:absolute;inset:-40px -30vw auto;height:760px;z-index:-1;
  background:radial-gradient(600px 380px at 78% 40%,rgba(61,127,224,.16),transparent 70%),radial-gradient(420px 300px at 12% 20%,rgba(242,183,5,.18),transparent 70%),radial-gradient(380px 260px at 60% 92%,rgba(232,96,63,.12),transparent 70%)}
.hero h1{font-size:clamp(46px,6.2vw,84px);font-weight:800;margin:0 0 24px}
.scribble{position:relative;white-space:normal;color:var(--navy);
  background:linear-gradient(transparent 62%,rgba(242,183,5,.55) 62%,rgba(242,183,5,.55) 90%,transparent 90%)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 26px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:15px;font-weight:700}
.trust li::before{content:"✓";color:var(--green);font-weight:900;margin-right:7px}
.hero-visual{position:relative;padding:20px 0 60px}

/* device frames */
.tablet{background:#0E1621;border-radius:28px;padding:14px;box-shadow:0 2px 0 #263446 inset,0 40px 80px -20px rgba(23,33,43,.45),0 18px 30px -12px rgba(23,33,43,.25)}
.tablet img{border-radius:16px;width:100%;height:auto}
.phone{background:#0E1621;border-radius:40px;padding:10px;box-shadow:0 2px 0 #263446 inset,0 30px 60px -16px rgba(23,33,43,.5);width:clamp(150px,17vw,230px)}
.phone img{border-radius:31px;width:100%;height:auto}
.phone-hero{position:absolute;right:-22px;bottom:0;transform:rotate(4deg)}
.hero-visual .tablet{transform:rotate(-1.5deg);width:92%}

/* stickers */
.sticker{position:absolute;font:800 17px/1 var(--f-body);background:#fff;padding:12px 16px;border-radius:14px;box-shadow:0 12px 26px -8px rgba(23,33,43,.3);white-space:nowrap;animation:bob 5s ease-in-out infinite}
.s1{left:-14px;top:30%;color:#9A6B00;background:#FFF4CC}
.s2{left:28%;bottom:8px;color:var(--green);animation-delay:-1.6s}
.s3{right:24%;top:-4px;color:var(--coral);animation-delay:-3.1s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}

/* pain */
.pain{background:var(--cream);padding:96px 20px 100px}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;max-width:var(--wrap);margin:54px auto 0}
.note{position:relative;margin:0;padding:34px 28px 28px;border-radius:4px;box-shadow:0 2px 2px rgba(0,0,0,.06),0 22px 30px -16px rgba(0,0,0,.25)}
.note::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;margin-left:-55px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.05);transform:rotate(-3deg)}
.n1{background:#FFE3D9;transform:rotate(-2deg)}.n2{background:#DDEBFF;transform:rotate(1.5deg)}.n3{background:#E5DAFF;transform:rotate(-1deg)}
.note .time{font:800 13px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.note blockquote{margin:14px 0 16px;font:700 26px/1.2 var(--f-head);letter-spacing:-.01em}
.note figcaption{color:var(--muted);font-weight:700}
.pain-turn{max-width:760px;margin:64px auto 0;text-align:center;font:600 clamp(24px,2.6vw,32px)/1.3 var(--f-head);letter-spacing:-.01em}
.pain-turn strong{color:var(--navy);font-weight:800}

/* how */
.how{padding:110px 20px;max-width:var(--wrap);margin:0 auto}
.steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;counter-reset:s}
.steps li{background:#fff;border-radius:28px;padding:34px 30px;box-shadow:0 1px 2px rgba(23,33,43,.05),0 16px 40px -20px rgba(23,33,43,.25)}
.step-n{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--navy);color:#fff;font:800 24px/1 var(--f-head);margin-bottom:22px}
.steps li:nth-child(2) .step-n{background:var(--coral)}.steps li:nth-child(3) .step-n{background:var(--star);color:#3A2A00}
.steps h3{margin-bottom:10px}
.steps p{margin:0;color:var(--muted)}

/* features */
.features{padding:20px 20px 90px;max-width:var(--wrap);margin:0 auto}
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;padding:70px 0}
.feature.flip .feature-text{order:2}
.feature h2{font-size:clamp(32px,3.6vw,46px);margin-bottom:18px}
.feature p{color:var(--muted);margin:0 0 20px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-weight:700}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"★";flex:none;color:var(--star);font-size:20px;line-height:1.35}
.feature-visual .tablet{transform:rotate(.6deg)}
.feature.flip .feature-visual .tablet{transform:rotate(-.6deg)}
.feature-visual.phones{display:flex;justify-content:center;gap:28px}
.feature-visual.phones .phone{width:min(240px,42%)}
.feature-visual.phones .phone:nth-child(2){transform:translateY(40px) rotate(3deg)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.tile{border-radius:26px;padding:28px;color:var(--ink)}
.tile .ic{font-size:34px;display:block;margin-bottom:14px}
.tile h3{margin-bottom:8px}
.tile p{margin:0;color:rgba(23,33,43,.72)}
.t-coral{background:#FFE3D9}.t-blue{background:#DDEBFF}.t-green{background:#D8F1E3}.t-purple{background:#E8DEFF}.t-yellow{background:#FFF0BF}
.t-navy{background:var(--navy);color:#fff}.t-navy p{color:rgba(255,255,255,.8)}

/* privacy */
.privacy{background:var(--navy);color:#fff;padding:110px 20px;position:relative;overflow:hidden}
.privacy::after{content:"★";position:absolute;right:-60px;top:-90px;font-size:520px;line-height:1;color:rgba(255,255,255,.04);pointer-events:none}
.privacy-inner{max-width:var(--wrap);margin:0 auto}
.privacy h2{max-width:14em}
.hl{color:var(--star)}
.lead.light{color:rgba(255,255,255,.82);margin:22px 0 46px}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:36px}
.pgrid div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px}
.pgrid b{display:block;font:700 20px/1.2 var(--f-head);margin-bottom:8px}
.pgrid span{color:rgba(255,255,255,.78);font-size:16px}
.link-light{color:#fff;font-weight:800}

/* faq */
.faq{padding:110px 20px;max-width:880px;margin:0 auto}
.qa{margin-top:44px;display:grid;gap:14px}
details{background:#fff;border-radius:20px;padding:6px 26px;box-shadow:0 1px 2px rgba(23,33,43,.05),0 10px 30px -18px rgba(23,33,43,.25)}
summary{cursor:pointer;list-style:none;font:700 21px/1.3 var(--f-head);padding:18px 40px 18px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:12px;font:400 30px/1 var(--f-body);color:var(--navy);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px;color:var(--muted)}

/* final */
.final{padding:30px 20px 120px}
.final-card{max-width:var(--wrap);margin:0 auto;border-radius:36px;padding:80px 40px;text-align:center;color:var(--ink);
  background:radial-gradient(500px 300px at 15% 10%,rgba(232,96,63,.2),transparent 70%),radial-gradient(500px 300px at 90% 90%,rgba(61,127,224,.22),transparent 70%),#FFF4CC}
.final-card p{font-size:20px;color:#5B4A1A;max-width:32em;margin:20px auto 34px}
.final-card .small{font-size:15px;margin:22px auto 0}

.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:var(--wrap);margin:0 auto;padding:30px 20px 50px;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
.foot a{color:var(--muted);font-weight:700}
.foot .brand{font-size:18px;color:var(--ink)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.note.reveal.in.n1{transform:rotate(-2deg)}.note.reveal.in.n2{transform:rotate(1.5deg)}.note.reveal.in.n3{transform:rotate(-1deg)}

/* small screens */
@media (max-width:900px){
  .nav nav a:not(.btn){display:none}
  .hero{grid-template-columns:1fr;padding-top:44px;gap:20px}
  .hero-visual{margin:0 10px}
  .notes,.steps,.bento{grid-template-columns:1fr}
  .notes{gap:40px;max-width:520px}
  .feature{grid-template-columns:1fr;gap:34px;padding:50px 0}
  .feature.flip .feature-text{order:0}
  .pgrid{grid-template-columns:1fr 1fr}
  .phone-hero{right:-6px;width:30%}
  .s1{left:0}.s3{right:30%}
}
@media (max-width:520px){
  body{font-size:17px}
  .pgrid{grid-template-columns:1fr}
  .final-card{padding:56px 22px}
  .sticker{font-size:14px;padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- green preview ---------- */
a{color:var(--navy)}a:hover{color:var(--navy-d)}
h1,h2,h3{color:var(--ink)}
h2{color:var(--navy)}
.eyebrow{color:var(--navy)}
.lead,.feature p,.steps p{color:var(--muted)}
.trust{color:var(--sub)}.trust li::before{color:var(--tick)}
.badge{display:inline-block;margin:0 0 18px;padding:8px 14px;border-radius:999px;background:var(--lime-tint);color:var(--on-lime-tint);font:800 14px/1 var(--f-body);letter-spacing:.02em}
.scribble{color:var(--navy);background:linear-gradient(transparent 62%,rgba(198,224,75,.75) 62%,rgba(198,224,75,.75) 90%,transparent 90%)}
.hero::before{background:radial-gradient(600px 380px at 78% 40%,rgba(47,122,42,.14),transparent 70%),radial-gradient(420px 300px at 12% 20%,rgba(198,224,75,.28),transparent 70%)}
.nav{background:rgba(245,249,234,.88);border-bottom-color:var(--line)}
.btn{background:var(--navy);box-shadow:0 6px 0 var(--navy-d),0 14px 30px rgba(47,122,42,.22)}
.btn:hover{box-shadow:0 8px 0 var(--navy-d),0 18px 34px rgba(47,122,42,.28)}
.btn-ghost{background:#fff;color:var(--navy);box-shadow:0 0 0 2px var(--line) inset}
.btn-ghost:hover{box-shadow:0 0 0 2px var(--navy) inset}
.sticker.s1{background:var(--lime-tint);color:var(--on-lime-tint)}.s2{color:var(--navy)}.s3{color:var(--navy-d)}
/* Herkenbaar: white cards with a fine border instead of sticky notes */
.pain{background:transparent}
.note,.n1,.n2,.n3{background:#fff;border:1.5px solid var(--line);border-radius:22px;transform:none;box-shadow:0 1px 2px rgba(31,45,27,.04),0 14px 34px -22px rgba(31,45,27,.3)}
.note::before{display:none}
.note.reveal.in.n1,.note.reveal.in.n2,.note.reveal.in.n3{transform:none}
.note .time{color:var(--navy)}.note figcaption{color:var(--sub)}
.pain-turn strong{color:var(--navy)}
/* steps: lime circles */
.step-n,.steps li:nth-child(2) .step-n,.steps li:nth-child(3) .step-n{background:var(--lime);color:var(--ink);border-radius:50%}
.steps li{border:1.5px solid var(--line);box-shadow:none}
.ticks li::before{content:"✓";color:var(--tick);font-weight:900}
/* "Eerlijk is eerlijk": green card */
.feature.green{background:var(--navy);border-radius:32px;padding:56px;margin:30px 0;color:#fff}
.feature.green h2{color:#fff}.feature.green p,.feature.green .ticks{color:var(--band-text)}
.feature.green .eyebrow{color:var(--card-label)}
.feature.green .ticks li::before{color:var(--lime)}
/* Alles op één bord */
.allin{background:var(--soft);padding:100px 20px}
.allin-inner{max-width:var(--wrap);margin:0 auto}
.allin h2{margin-bottom:10px}
.allin .tile,.t-coral,.t-blue,.t-green,.t-purple,.t-yellow,.t-navy{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.allin .tile p,.t-navy p{color:var(--sub)}
/* privacy block */
.privacy{background:var(--priv);color:var(--priv-text)}
.privacy h2{color:var(--priv-text)}
.eyebrow.light{color:var(--lime)}
.hl{color:var(--lime)}
.lead.light{color:var(--priv-sub)}
.pgrid div{background:var(--priv-card);border-color:rgba(243,248,232,.08)}
.pgrid b{color:var(--priv-text)}.pgrid span{color:var(--priv-sub)}
.link-light{color:var(--lime)}
/* FAQ cards */
details{background:#fff;border:1.5px solid var(--line);box-shadow:none}
summary::after{color:var(--navy)}
details p{color:var(--muted)}
/* CTA band */
.final{padding:0;margin-top:20px}
.final-card{max-width:none;border-radius:0;background:var(--navy);color:var(--band-text);padding:96px 20px}
.final-card h2{color:#fff}
.final-card p{color:var(--band-text)}
.final-card .btn{background:var(--lime);color:var(--ink);box-shadow:0 6px 0 #9FB838,0 14px 30px rgba(0,0,0,.18)}
.final-card .small a{color:var(--lime)}
.foot{color:var(--sub);border-top-color:var(--line)}.foot a{color:var(--sub)}

/* ---------- terracotta as the warm second accent ---------- */
.eyebrow{color:var(--terra-text)}
.feature.green .eyebrow{color:var(--card-label)}
.eyebrow.light{color:var(--lime)}
.hero::before{background:radial-gradient(600px 380px at 78% 40%,rgba(47,122,42,.13),transparent 70%),radial-gradient(420px 300px at 12% 20%,rgba(198,224,75,.26),transparent 70%),radial-gradient(360px 260px at 58% 95%,rgba(216,106,61,.16),transparent 70%)}
.sticker.s1{background:var(--terra-tint);color:var(--on-terra-tint)}
.sticker.s3{color:var(--terra-text)}
.note{border-top:5px solid var(--terra)}
.note .time{color:var(--terra-text)}
.pain-turn strong{color:var(--navy);background:linear-gradient(transparent 70%,rgba(216,106,61,.25) 70%)}
.steps li:nth-child(2) .step-n{background:var(--terra);color:#fff}
.allin .tile .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--lime-tint)}
.allin .tile:nth-child(even) .ic{background:var(--terra-tint)}
.feature.green{position:relative;overflow:hidden}
.feature.green::after{content:"";position:absolute;right:-90px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(216,106,61,.45),transparent 65%);pointer-events:none}
.feature.green>*{position:relative;z-index:1}
.privacy::after{color:rgba(216,106,61,.10)}
.final-card{position:relative;overflow:hidden}
.final-card::before{content:"";position:absolute;left:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(216,106,61,.40),transparent 65%)}
.final-card>*{position:relative}
.brand img{border-radius:10px}

/* ---------- more terracotta ---------- */
.nav .btn,.hero .cta-row .btn:not(.btn-ghost){background:#B4532B;box-shadow:0 6px 0 #8E3F1F,0 14px 30px rgba(180,83,43,.25)}
.nav .btn{box-shadow:0 4px 0 #8E3F1F}
.hero .cta-row .btn:not(.btn-ghost):hover{box-shadow:0 8px 0 #8E3F1F,0 18px 34px rgba(180,83,43,.3)}
.btn-ghost:hover{box-shadow:0 0 0 2px #B4532B inset;color:#B4532B}
.pain{background:#FDF1E9}
.note{border-top-color:var(--terra)}
.steps li:nth-child(1) .step-n,.steps li:nth-child(3) .step-n{background:var(--terra);color:#fff}
.steps li:nth-child(2) .step-n{background:var(--lime);color:var(--ink)}
.feature .ticks li::before{color:var(--terra-text)}
.feature.green .ticks li::before{color:var(--lime)}
.allin .tile{border-top:5px solid var(--terra)}
.allin .tile:nth-child(even){border-top-color:var(--lime)}
.pgrid div{border-top:4px solid var(--terra)}
summary::after{color:var(--terra-text)}
.scribble{background:linear-gradient(transparent 62%,rgba(216,106,61,.35) 62%,rgba(216,106,61,.35) 90%,transparent 90%)}
.sticker.s2{color:var(--terra-text)}

/* ---------- whiter page ---------- */
:root{--bg:#FBFDF7}
.nav{background:rgba(251,253,247,.9)}
.pain{background:#FEF7F2}

/* ---------- glows: only on light backgrounds; on green a crisp shape instead ---------- */
.feature.green::after{right:-70px;bottom:-70px;width:200px;height:200px;background:var(--terra);filter:none;opacity:1}
.feature.green::before{content:"";position:absolute;right:96px;bottom:34px;width:18px;height:18px;border-radius:50%;background:var(--lime);pointer-events:none}
.final-card::before{display:none}
.privacy::after{color:rgba(255,255,255,.04)}
.feature.green::after{right:auto;bottom:auto;left:-72px;top:-72px;width:144px;height:144px}
.feature.green::before{right:auto;bottom:auto;left:84px;top:22px;width:14px;height:14px}
@media (max-width:900px){.feature.green{padding:64px 26px 40px}.feature.green::after{left:-60px;top:-60px;width:110px;height:110px}.feature.green::before{left:62px;top:18px}}

/* ---------- green blocks without terracotta; hero glow behind the devices, never cut off ---------- */
.feature.green::after,.feature.green::before{display:none}
.hero::before{background:radial-gradient(600px 380px at 78% 40%,rgba(47,122,42,.12),transparent 70%),radial-gradient(420px 300px at 12% 20%,rgba(198,224,75,.24),transparent 70%)}
.hero-visual{isolation:isolate}
.hero-visual::before{content:"";position:absolute;z-index:-1;left:-12%;right:-16%;top:-14%;bottom:-18%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,106,61,.30),rgba(216,106,61,.14) 45%,rgba(216,106,61,0) 100%)}
.hero-visual::before{background:radial-gradient(closest-side,rgba(216,106,61,.42),rgba(216,106,61,.20) 45%,rgba(216,106,61,0) 100%)}

/* wordmark (home / board) in nav and footer */
.brand img.wordmark{border-radius:0;height:40px;width:auto}
.foot .brand img.wordmark{height:32px}

/* phone frames: corner radius in proportion to the frame (≈ a real phone), so small phones on mobile don't turn into pills */
.phone{border-radius:16.5% / 8%}
.phone img{border-radius:13% / 6%}
@media (max-width:520px){.phone{padding:6px}}