@font-face{font-family:"Bricolage Grotesque";src:url(img/f400.ttf);font-weight:400}
@font-face{font-family:"Bricolage Grotesque";src:url(img/f700.ttf);font-weight:600 800}
:root{--y:#ffc20e;--y2:#ffd84d;--ink:#141414;--cream:#fff4cf;--cream2:#fff9e6;--mut:#5b5236;--line:#efe2b3}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;color:var(--ink);background:#fff;font-size:18px;line-height:1.5}
a{color:inherit}img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
h1,h2,h3{line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:800}
h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:800}
h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 26px;font:700 1.05rem "Bricolage Grotesque",sans-serif;text-decoration:none;border:3px solid var(--ink);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:var(--y)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.sm{padding:10px 20px;font-size:.98rem}
.btn.light{background:#fff}
/* nav */
nav{background:var(--y);position:sticky;top:0;z-index:10}
.nv{display:flex;align-items:center;gap:28px;height:84px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.5rem;text-decoration:none;letter-spacing:-.02em}
.brand img{height:56px;width:auto}
.nl{display:flex;gap:26px;margin-left:auto;margin-right:8px;font-weight:600}
.nl a{text-decoration:none}.nl a:hover{text-decoration:underline;text-underline-offset:5px}
.nb{display:flex;gap:10px}
/* hero */
.hero{background:var(--y);position:relative;overflow:hidden;padding:36px 0 120px}
.hg{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.eyebrow{display:inline-block;background:var(--ink);color:var(--y);padding:7px 16px;border-radius:999px;font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}
.hero p.lead{font-size:1.3rem;max-width:34ch;margin:24px 0 32px;color:#2b2410}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.note{margin-top:18px;font-size:.95rem;color:#3d3413}
.phones{position:relative;height:710px}
.ph{position:absolute;background:var(--ink);border-radius:46px;padding:10px;box-shadow:0 30px 60px rgba(60,40,0,.35)}
.ph img{border-radius:36px;width:100%}
.ph.a{width:290px;left:40px;top:20px;transform:rotate(-5deg);z-index:2}
.ph.b{width:260px;right:0;top:80px;transform:rotate(6deg)}
.chip{position:absolute;z-index:3;filter:drop-shadow(0 8px 10px rgba(80,50,0,.3))}
.tag{position:absolute;z-index:4;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:9px 14px;font-weight:700;font-size:.95rem;box-shadow:4px 4px 0 var(--ink)}
.tag b{color:#c98700}
.wave{position:absolute;left:0;right:0;bottom:-1px;height:70px}
/* ticker */
.tick{background:var(--ink);color:var(--y);overflow:hidden;white-space:nowrap;padding:18px 0;font-weight:800;font-size:1.6rem;letter-spacing:-.01em}
.tick span{margin:0 28px}.tick i{font-style:normal;color:#fff;opacity:.9}
/* sections */
section{padding:100px 0}
.cream{background:var(--cream)}
.sh{max-width:720px;margin-bottom:54px}
.sh p{margin-top:16px;color:var(--mut);font-size:1.2rem}
.k{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;color:#a87400;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:3px solid var(--ink);border-radius:28px;padding:28px;box-shadow:6px 6px 0 var(--ink)}
.card .ic{width:58px;height:58px;border-radius:18px;background:var(--y);border:3px solid var(--ink);display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:28px;height:28px}
.card p{margin-top:8px;color:var(--mut);font-size:1.02rem}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step{text-align:center}
.step .ph{position:relative;margin:0 auto 26px;width:250px;transform:none;box-shadow:0 22px 44px rgba(60,40,0,.25)}
.step .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--y);font-weight:800;margin-bottom:12px}
.step p{margin-top:8px;color:var(--mut);font-size:1.02rem;max-width:30ch;margin-inline:auto}
/* band */
.band{background:var(--ink);color:#fff;text-align:center;padding:90px 0}
.band h2{color:var(--y);font-size:clamp(2.4rem,6vw,4.6rem)}
.band p{margin:18px auto 0;max-width:42ch;opacity:.85;font-size:1.2rem}
/* faq */
.faq{max-width:820px;margin:0 auto}
details{border:3px solid var(--ink);border-radius:22px;background:#fff;padding:20px 26px;margin-bottom:14px}
summary{font-weight:700;font-size:1.15rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::after{content:"+";font-size:1.6rem;line-height:1;color:#a87400}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--mut)}
/* cta */
.final{background:var(--y);text-align:center;padding:100px 0;position:relative}
.final h2{max-width:14ch;margin:0 auto 28px}
footer{background:var(--ink);color:#e9dfba;padding:50px 0 34px;font-size:.98rem}
.fg{display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
footer .brand{color:var(--y)}footer a{text-decoration:none;margin-right:22px}footer a:hover{text-decoration:underline}
.cpr{margin-top:26px;font-size:.9rem;opacity:.7}
/* login */
.lp{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.lp .l{background:var(--y);padding:44px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.lp .l .big{max-width:430px;margin:40px auto 0;width:100%}
.lp .l h1{font-size:clamp(2.2rem,4vw,3.4rem);margin-top:34px;max-width:12ch}
.lp .l p{margin-top:16px;font-size:1.2rem;max-width:30ch;color:#2b2410}
.lp .r{display:grid;place-items:center;padding:44px 24px;background:#fff}
.box{width:100%;max-width:430px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--cream);border-radius:999px;padding:6px;margin-bottom:28px}
.tabs a{text-align:center;padding:12px;border-radius:999px;font-weight:700;text-decoration:none}
.tabs a.on{background:var(--ink);color:var(--y)}
.box h2{font-size:2.2rem;margin-bottom:8px}.box .sub{color:var(--mut);margin-bottom:26px}
label{display:block;font-weight:700;font-size:.95rem;margin:0 0 7px}
input{width:100%;font:inherit;font-size:1.05rem;padding:16px 18px;border-radius:16px;border:3px solid var(--ink);background:var(--cream2);margin-bottom:18px;color:var(--ink)}
.pw{position:relative}.pw span{position:absolute;right:16px;top:17px;font-weight:700;font-size:.9rem;color:#a87400}
.row{display:flex;justify-content:space-between;align-items:center;font-size:.98rem;margin:-4px 0 22px}
.row a{font-weight:700}
.full{width:100%;justify-content:center;font-size:1.15rem;padding:17px}
.or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--mut);font-size:.95rem}.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line)}
.small{margin-top:22px;font-size:.92rem;color:var(--mut);text-align:center}
.back{display:inline-flex;gap:8px;font-weight:700;text-decoration:none;margin-bottom:34px}
@media(max-width:900px){
 body{font-size:17px}.nl{display:none}.nb{margin-left:auto}.nv{height:72px}.brand img{height:46px}nav .brand span{display:none}
 .hg{grid-template-columns:1fr}.hero{padding:30px 0 90px}.phones{height:520px;margin-top:10px}.ph.a{width:230px;left:8%}.ph.b{width:200px;right:4%;top:70px}
 section{padding:70px 0}.grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:56px}
 .tick{font-size:1.2rem}.lp{grid-template-columns:1fr}.lp .l{padding:26px 24px 34px}.lp .l .big{max-width:230px;margin-top:20px}.lp .l h1,.lp .l p{display:none}.lp .r{padding:34px 20px 50px}
 .btn.sm{padding:9px 14px;font-size:.9rem}
}

/* ===== strakker, passend bij de app ===== */
:root{--bg:#f5f4ef;--sh:0 1px 1px rgba(20,20,20,.04),0 12px 30px -10px rgba(20,20,20,.18)}
body{background:var(--bg);letter-spacing:-.01em}
h1,h2,h3{letter-spacing:-.03em}
.btn{border:0;border-radius:16px;padding:15px 24px}
.btn.ghost{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(20,20,20,.14)}
.btn.sm{border-radius:12px}
.hero .btn.ghost{background:rgba(255,255,255,.55)}
.eyebrow{border-radius:12px;letter-spacing:.1em}
.tag{border:0;border-radius:16px;box-shadow:var(--sh)}
.ph{box-shadow:0 30px 60px -12px rgba(60,40,0,.4)}
.cream{background:var(--bg)}
.card{border:0;border-radius:26px;box-shadow:var(--sh)}
.card .ic{border:0;border-radius:16px}

section{background:transparent}
.faq details{border:0;border-radius:20px;box-shadow:var(--sh);background:#fff}