/* Quisa welkomspagina: zelfde kleuren en lettertypes als de app (css/app.css) */
:root{
  --bg:#FFF3F1; --surface:#FFFFFF; --surface-2:#FBE9E8; --ink:#3B2D4A; --muted:#85769A; --line:#F3DEDD;
  --peach:#FFC98B; --peach-deep:#E8A25A; --peach-soft:#FFEAD3;
  --lilac:#CDBAF6; --lilac-deep:#A68BE1; --lilac-soft:#EFE8FD;
  --pink:#F9B4C4; --pink-soft:#FDE3EA;
  --mint:#A6DDC9; --mint-deep:#6FBFA2; --mint-soft:#DDF3EA;
  --sun:#FFE08A; --sun-deep:#E2B848; --sun-soft:#FFF4CC;
  --on-pastel:#3B2D4A; --phone:#2B2238;
  --shadow:0 24px 60px -24px rgba(59,45,74,.35);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1733; --surface:#272043; --surface-2:#332B54; --ink:#FCEFE6; --muted:#ADA0C8; --line:#383060;
    --peach-deep:#C98945; --peach-soft:#47352A; --lilac-soft:#352C5C; --pink-soft:#4A2D45; --mint-soft:#203F3A; --sun-soft:#463C22;
    --mint-deep:#5FA88E; --phone:#0F0C1E; --shadow:0 24px 60px -24px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1C1733; --surface:#272043; --surface-2:#332B54; --ink:#FCEFE6; --muted:#ADA0C8; --line:#383060;
  --peach-deep:#C98945; --peach-soft:#47352A; --lilac-soft:#352C5C; --pink-soft:#4A2D45; --mint-soft:#203F3A; --sun-soft:#463C22;
  --mint-deep:#5FA88E; --phone:#0F0C1E; --shadow:0 24px 60px -24px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:500 1.0625rem/1.6 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1, h2, h3{ font-family:"Baloo 2", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; line-height:1.1; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
img{ display:block; max-width:100%; height:auto; }
.ic{ width:1.1em; height:1.1em; flex:none; }
main{ display:block; }
section{ padding:0 20px; }
.small{ font-size:.875rem; color:var(--muted); font-weight:600; }
.center{ text-align:center; }
.link{ font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--peach-deep); }
.eyebrow, .feat-txt > p.eyebrow, .grow-head p.eyebrow{ font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--peach-deep); margin-bottom:10px; }

/* knoppen, zelfde "dikke" stijl als de app */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:13px 24px; font-weight:800; font-size:1.02rem; text-decoration:none; transition:transform .1s, box-shadow .1s; white-space:nowrap; }
.btn:active{ transform:translateY(3px); }
.btn-primary{ background:var(--peach); color:var(--on-pastel); box-shadow:0 4px 0 var(--peach-deep); }
.btn-primary:active{ box-shadow:0 1px 0 var(--peach-deep); }
.btn-soft{ background:var(--surface); border:2px solid var(--line); box-shadow:0 3px 0 var(--line); }
.btn-ghost{ padding:9px 18px; background:var(--surface); border:2px solid var(--line); box-shadow:0 3px 0 var(--line); font-size:.95rem; }
:focus-visible{ outline:3px solid var(--lilac-deep); outline-offset:3px; border-radius:12px; }

/* kop */
.top{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:16px; padding:12px 20px; max-width:1160px; margin:0 auto;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:"Baloo 2", system-ui, sans-serif; font-weight:800; font-size:1.55rem; }
.brand img{ border-radius:12px; box-shadow:0 3px 0 var(--peach-deep); }
.top-nav{ display:flex; gap:22px; margin-left:auto; font-weight:700; color:var(--muted); }
.top-nav a{ text-decoration:none; }
.top-nav a:hover{ color:var(--ink); }
@media (max-width:640px){ .top-nav{ display:none; } .top .btn-ghost{ margin-left:auto; } }

/* hero */
.hero{ max-width:1160px; margin:0 auto; padding-top:36px; padding-bottom:40px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero h1{ font-size:clamp(2.4rem, 5.6vw, 4rem); letter-spacing:-.01em; }
.hero .hl{ display:inline; background:linear-gradient(transparent 62%, var(--pink) 62%, var(--pink) 92%, transparent 92%); color:var(--ink); }
.lead{ margin-top:20px; font-size:1.18rem; color:var(--muted); font-weight:600; max-width:34em; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.trust{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:6px; font-size:.95rem; font-weight:700; color:var(--muted); }
.trust li{ display:flex; align-items:center; gap:8px; }
.trust .ic{ color:var(--mint-deep); }
.hero-shot{ position:relative; height:620px; }
.hero-shot .phone{ position:absolute; width:270px; }
.phone-front{ right:90px; top:0; z-index:2; transform:rotate(-3deg); }
.phone-back{ right:0; top:60px; transform:rotate(7deg) scale(.88); opacity:.95; }
.bubble{ position:absolute; z-index:3; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:18px; background:var(--surface);
  border:2px solid var(--line); box-shadow:var(--shadow); font-weight:800; font-size:.92rem; max-width:250px; }
.bubble .ic{ width:28px; height:28px; padding:5px; border-radius:50%; }
.b1{ left:0; top:330px; } .b1 .ic{ background:var(--peach); color:var(--on-pastel); }
.b2{ left:30px; bottom:70px; } .b2 .ic{ background:var(--lilac); color:var(--on-pastel); }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:20px; gap:20px; }
  .hero-shot{ height:520px; max-width:420px; width:100%; margin:0 auto; }
  .hero-shot .phone{ width:220px; }
  .phone-front{ left:calc(50% - 150px); right:auto; }
  .phone-back{ right:-6px; top:50px; }
  .b1{ left:-4px; top:250px; } .b2{ left:auto; right:-4px; bottom:30px; }
}
@media (max-width:420px){
  .hero-shot{ height:470px; } .hero-shot .phone{ width:196px; } .phone-front{ left:calc(50% - 130px); }
  .bubble{ font-size:.82rem; padding:8px 12px; max-width:200px; }
}

/* telefoon met screenshot */
.phone{ margin:0; padding:9px; border-radius:42px; background:var(--phone); box-shadow:var(--shadow), inset 0 0 0 2px rgba(255,255,255,.08); }
.phone img{ border-radius:33px; width:100%; aspect-ratio:563/1218; object-fit:cover; object-position:top; background:var(--surface-2); }
.card-shot{ margin:0; border-radius:26px; overflow:hidden; border:2px solid var(--line); background:var(--bg); box-shadow:var(--shadow); }

/* drie kernvoordelen */
.usp{ max-width:1160px; margin:0 auto; padding-top:24px; padding-bottom:40px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.usp-card{ border-radius:28px; padding:26px 24px 28px; background:var(--surface); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); }
.usp-card h2{ font-size:1.45rem; margin:16px 0 8px; }
.usp-card p{ color:var(--muted); font-weight:600; }
.usp-ic{ display:grid; place-items:center; width:54px; height:54px; border-radius:18px; color:var(--on-pastel); background:var(--peach); box-shadow:0 3px 0 var(--peach-deep); }
.usp-ic svg{ width:28px; height:28px; }
.usp-card.lilac .usp-ic, .usp-ic.lilac{ background:var(--lilac); box-shadow:0 3px 0 var(--lilac-deep); }
.usp-card.mint .usp-ic{ background:var(--mint); box-shadow:0 3px 0 var(--mint-deep); }
.usp-ic.sun{ background:var(--sun); box-shadow:0 3px 0 var(--sun-deep); }
@media (max-width:860px){ .usp{ grid-template-columns:1fr; } }

/* functieblokken: tekst en screenshots om en om */
.feat{ max-width:1160px; margin:0 auto; padding-top:70px; padding-bottom:70px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.feat.rev .feat-txt{ order:2; }
.feat h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom:16px; }
.feat-txt > p{ color:var(--muted); font-weight:600; font-size:1.08rem; }
.feat-txt > p b{ color:var(--ink); }
.feat-txt .small{ margin-top:18px; font-size:.86rem; }
.ticks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; font-weight:700; }
.ticks li{ position:relative; padding-left:34px; }
.ticks li::before{ content:""; position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:50%;
  background:var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-7.9' fill='none' stroke='%233B2D4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.feat-shot{ display:flex; justify-content:center; }
.feat-shot > .phone{ width:290px; }
.feat-shot.duo{ position:relative; justify-content:flex-start; min-height:640px; }
.feat-shot.duo > .phone{ width:280px; }
.feat-shot.duo > .card-shot{ position:absolute; right:0; bottom:10px; width:300px; transform:rotate(2deg); }
.feat-shot.duo > .small-phone{ position:absolute; right:0; top:90px; width:230px; transform:rotate(4deg); }
@media (max-width:900px){
  .feat{ grid-template-columns:1fr; gap:32px; padding-top:48px; padding-bottom:48px; }
  .feat.rev .feat-txt{ order:0; }
  .feat-shot.duo{ min-height:0; flex-direction:column; align-items:center; gap:18px; }
  .feat-shot.duo > .phone{ width:250px; }
  .feat-shot.duo > .card-shot, .feat-shot.duo > .small-phone{ position:static; transform:none; width:min(330px, 100%); }
  .feat-shot.duo > .small-phone{ display:none; }
}

/* groeit mee */
.grow{ max-width:1160px; margin:30px auto 0; padding:64px 28px; border-radius:40px; background:var(--sun-soft); }
.grow-head{ max-width:760px; margin:0 auto; text-align:center; display:grid; justify-items:center; }
.grow-head .usp-ic{ margin-bottom:16px; }
.grow h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom:14px; }
.grow-head p:last-child{ color:var(--muted); font-weight:600; font-size:1.08rem; }
.grow-head p b{ color:var(--ink); }
.timeline{ list-style:none; padding:0; margin:36px auto 10px; max-width:980px; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; counter-reset:t; }
.timeline li{ position:relative; display:grid; gap:2px; padding:18px 18px 20px; border-radius:22px; background:var(--surface); border:2px solid var(--line); }
.timeline li::before{ content:""; position:absolute; left:18px; top:-7px; width:12px; height:12px; border-radius:50%; background:var(--sun-deep); border:3px solid var(--sun-soft); }
.timeline b{ font-family:"Baloo 2", system-ui, sans-serif; font-size:1.2rem; }
.timeline span{ font-weight:700; }
.timeline em{ font-style:normal; color:var(--muted); font-weight:700; font-size:.92rem; }
.grow-body{ margin:44px auto 0; max-width:860px; display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center; }
.grow-body .phone{ width:270px; }
.grow-txt h3{ font-size:1.6rem; margin-bottom:12px; }
.grow-txt p{ color:var(--muted); font-weight:600; font-size:1.05rem; }
.grow-txt p + p{ margin-top:12px; }
@media (max-width:860px){
  .grow{ margin:20px 12px 0; padding:44px 18px; border-radius:30px; }
  .timeline{ grid-template-columns:1fr 1fr; }
  .grow-body{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:28px; }
  .grow-body .phone{ width:240px; }
}
@media (max-width:420px){ .timeline{ gap:10px; } .timeline li{ padding:14px 14px 16px; } .timeline b{ font-size:1.05rem; } }

/* privacy */
.privacy{ max-width:1160px; margin:0 auto; padding-top:90px; padding-bottom:40px; }
.privacy-head{ max-width:700px; margin:0 auto; text-align:center; display:grid; justify-items:center; }
.privacy-head .usp-ic{ margin-bottom:16px; }
.privacy h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom:14px; }
.privacy-head p{ color:var(--muted); font-weight:600; font-size:1.08rem; }
.privacy-grid{ list-style:none; padding:0; margin:36px 0 28px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.privacy-grid li{ padding:22px; border-radius:24px; background:var(--lilac-soft); color:var(--muted); font-weight:600; font-size:.98rem; }
.privacy-grid b{ display:block; color:var(--ink); font-family:"Baloo 2", system-ui, sans-serif; font-size:1.2rem; margin-bottom:6px; }
@media (max-width:960px){ .privacy-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .privacy-grid{ grid-template-columns:1fr; } }

/* stappen */
.steps{ max-width:1160px; margin:0 auto; padding-top:70px; padding-bottom:30px; }
.steps h2, .faq h2{ font-size:clamp(1.7rem, 3.2vw, 2.3rem); text-align:center; margin-bottom:30px; }
.steps ol{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.steps li{ padding:24px; border-radius:24px; background:var(--surface); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); color:var(--muted); font-weight:600; }
.steps li b{ display:block; color:var(--ink); font-family:"Baloo 2", system-ui, sans-serif; font-size:1.3rem; margin:12px 0 4px; }
.num{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--peach); color:var(--on-pastel); font-weight:800; box-shadow:0 3px 0 var(--peach-deep); }
@media (max-width:760px){ .steps ol{ grid-template-columns:1fr; } }

/* vragen */
.faq{ max-width:760px; margin:0 auto; padding-top:70px; padding-bottom:20px; }
.faq details{ border-radius:20px; background:var(--surface); border:2px solid var(--line); margin-bottom:12px; }
.faq summary{ cursor:pointer; list-style:none; padding:18px 52px 18px 22px; font-weight:800; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--peach-soft); font-weight:800; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 22px 20px; color:var(--muted); font-weight:600; }

/* afsluiter en voet */
.final{ max-width:1160px; margin:60px auto 0; padding:64px 24px; text-align:center; border-radius:40px; background:var(--peach-soft); display:grid; justify-items:center; gap:14px; }
.final h2{ font-size:clamp(1.8rem, 3.6vw, 2.5rem); }
.final > p:not(.small){ color:var(--muted); font-weight:600; font-size:1.08rem; max-width:32em; }
.final .btn{ margin-top:8px; }
@media (max-width:860px){ .final{ margin:40px 12px 0; border-radius:30px; } }
.foot{ max-width:1160px; margin:0 auto; padding:36px 20px 48px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; color:var(--muted); font-weight:700; }
.small-brand{ font-size:1.2rem; color:var(--ink); }
.small-brand img{ box-shadow:none; border-radius:8px; }
.foot nav{ display:flex; gap:20px; }
.foot-legal{ flex-basis:100%; margin:0; font-size:.85rem; font-weight:600; }
.foot-legal a{ color:inherit; }
.nw{ white-space:nowrap; }

/* taalkeuze (js/i18n.js, [data-taalknop]) */
.taal{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--surface); border:2px solid var(--line); flex:none; }
.taal button{ display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; border-radius:999px; padding:4px 7px;
  font:inherit; font-size:.75rem; font-weight:800; color:var(--muted); cursor:pointer; opacity:.6; }
.taal button[aria-pressed="true"]{ opacity:1; background:var(--surface-2); color:var(--ink); }
.taal svg{ width:20px; height:13px; border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.taal-kort{ margin-left:8px; }
.taal-kort span{ display:none; }
.taal-kort button{ padding:5px 6px; }
.taal-kort + .mode-btn{ margin-left:8px; }
.gate-brand .taal{ margin-left:auto; }
.pv-back{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* taal op smalle schermen: alleen de vlaggen */
@media (max-width:640px){ .top .taal{ margin-left:auto; } .top .taal + .btn-ghost{ margin-left:0; } }
@media (max-width:560px){ .top{ gap:10px; } .top .taal span{ display:none; } .top .taal button{ padding:5px 6px; } }