/* Keto App — website styles */
:root{
  --bg:#faf9f4; --bg-2:#f3f1e8; --surface:#ffffff; --ink:#1e2318; --muted:#797d6d;
  --faint:#a7aa99; --line:#e9e7dc; --hair:#f0eee5; --primary:#34421e; --primary-d:#2a3618;
  --sage:#e9edde; --sage-2:#d7decb; --olive:#5d7034; --amber:#c08a34;
  --ui:'Hanken Grotesk',system-ui,sans-serif; --serif:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--bg);}
body{margin:0; background:transparent; color:var(--ink); font-family:var(--ui);
  -webkit-font-smoothing:antialiased; line-height:1.55;}
/* Vast logo-watermerk op de achtergrond van de hele pagina (scroll eroverheen) */
body::before{content:""; position:fixed; z-index:-1; pointer-events:none; top:-44px; right:-66px;
  width:430px; height:308px; opacity:.06; transform:rotate(-4deg); transform-origin:top right;
  background:url(logo-icon.png) top right/contain no-repeat;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
img{max-width:100%;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
.serif{font-family:var(--serif);}
.accent{color:var(--olive);}

/* ── Nav ── */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,249,244,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; gap:36px; height:82px;}
.brand{display:flex; align-items:center; gap:13px; font-family:var(--serif); font-weight:600;
  font-size:24px; letter-spacing:-.01em; white-space:nowrap;}
.logo{width:54px; height:54px; flex-shrink:0; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(70,86,42,.18));}
.nav-links{display:flex; align-items:center; gap:28px; flex:1;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--muted); white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:20px;}
.nav-cta .login{font-size:14.5px; font-weight:600; color:var(--ink);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600;
  border-radius:12px; transition:background .15s, transform .1s; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-pri{background:var(--primary); color:#fbfaf4; height:44px; padding:0 22px; font-size:14.5px;}
.btn-pri:hover{background:var(--primary-d);}
.btn-pri.lg{height:56px; padding:0 28px; font-size:16px; border-radius:14px;}
.btn-out{background:var(--surface); border:1px solid var(--line); color:var(--ink);
  height:56px; padding:0 24px; font-size:16px; border-radius:14px;}
.btn-out:hover{background:var(--bg-2);}

/* ── Hero ── */
.hero{padding:64px 0 0;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.pill{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 15px; white-space:nowrap;
  background:var(--sage); border-radius:20px; font-size:13px; font-weight:600; color:var(--primary);
  margin-bottom:26px;}
.h1{font-family:var(--serif); font-weight:500; font-size:64px; line-height:1.04;
  letter-spacing:-.02em; margin:0;}
.lead{font-size:18px; color:var(--muted); margin:24px 0 0; max-width:480px;}
.hero-cta{display:flex; gap:14px; margin:32px 0 28px; flex-wrap:wrap;}
.ticks{display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; max-width:480px;}
.tick{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink);}
.tick i{width:22px; height:22px; border-radius:50%; background:var(--sage); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}

/* ── Phone mockup ── */
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center;
  min-height:600px; overflow:visible;}
.halo{position:absolute; width:474px; height:474px; z-index:0; background:var(--sage); opacity:.5;
  border-radius:46% 54% 55% 45% / 52% 48% 52% 48%; filter:blur(3px);}
.halo-2{width:300px; height:300px; background:var(--olive); opacity:.1; border-radius:50%;
  transform:translate(140px,-130px); filter:blur(8px);}
.hero-logo{position:absolute; z-index:1; left:-44px; top:47%; width:240px; height:auto;
  transform:translateY(-46%) rotate(-4deg);
  filter:drop-shadow(0 14px 26px rgba(50,62,30,.2));}
.phone{position:relative; z-index:2; width:288px; border-radius:42px; background:#0e120a;
  padding:11px; box-shadow:0 40px 80px rgba(40,46,26,.22);}
.phone-screen{background:var(--bg); border-radius:32px; overflow:hidden; padding:20px 16px 16px;}
.ps-status{display:flex; justify-content:space-between; align-items:center; font-size:12px;
  font-weight:600; margin-bottom:14px; color:var(--ink);}
.ps-h{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px;}
.ps-title{font-family:var(--serif); font-size:15px; font-weight:600; white-space:nowrap;}
.ps-label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin:0 0 8px;}
.ps-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.ps-meal{display:flex; align-items:center; gap:10px; padding:10px 12px;}
.ps-meal + .ps-meal{border-top:1px solid var(--hair);}
.ps-ic{width:30px; height:30px; border-radius:9px; background:var(--sage); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ps-mt{flex:1; min-width:0;}
.ps-mt b{display:block; font-size:12.5px; font-weight:600;}
.ps-mt span{font-size:11px; color:var(--muted);}
.ps-chk{width:19px; height:19px; border-radius:50%; border:1.6px solid var(--sage-2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;}
.ps-chk.on{background:var(--primary); border-color:var(--primary);}
.ps-prog{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px;
  margin-top:12px; display:flex; gap:12px;}
.ps-stat{flex:1; min-width:0;}
.ps-stat .k{font-size:10px; color:var(--muted); display:block; white-space:nowrap;}
.ps-stat .v{font-size:12.5px; font-weight:700; white-space:nowrap;}
.ps-stat .v small{color:var(--faint); font-weight:500; font-size:10px;}
.ps-bar{display:block; height:4px; border-radius:4px; background:var(--sage); margin-top:6px; overflow:hidden;}
.ps-bar i{display:block; height:4px; background:var(--primary); border-radius:4px;}
.ps-btn{margin-top:12px; height:42px; border-radius:12px; background:var(--primary); color:#fbfaf4;
  display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:600;}
.ps-tip{display:flex; gap:9px; align-items:flex-start; background:var(--sage); border:1px solid var(--sage-2);
  border-radius:12px; padding:10px 11px; margin-top:12px;}
.ps-tip-ic{width:24px; height:24px; border-radius:8px; background:var(--primary); color:var(--sage);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ps-tip-b{display:flex; flex-direction:column; min-width:0;}
.ps-tip-e{display:block; font-size:8.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--primary); margin-bottom:2px;}
.ps-tip-t{display:block; font-size:10.5px; line-height:1.4; color:var(--ink);}
.leaf{position:absolute;}
.leaf-a{top:22px; right:22px; width:62px; transform:rotate(26deg); z-index:1;}
.leaf-b{top:108px; right:-12px; width:46px; transform:rotate(-12deg); z-index:1;}
.leaf-c{bottom:54px; left:4px; width:56px; transform:rotate(206deg); z-index:3;}
.leaf-d{bottom:24px; right:54px; width:40px; transform:rotate(150deg); z-index:3;}

/* ── Trust bar ── */
.trust{margin-top:64px;}
.trust-in{display:flex; align-items:center; gap:32px; flex-wrap:wrap; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 32px;}
.trust-l{display:flex; align-items:center; gap:14px; font-size:14.5px; font-weight:600;}
.stars{display:flex; gap:2px; color:var(--olive);}
.trust-rate{color:var(--muted); font-weight:500;}
.press{display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.press span{font-family:var(--serif); font-size:17px; font-weight:600; color:#b7b9aa;
  letter-spacing:.01em;}

/* ── Features ── */
.features{padding:72px 0 8px;}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 22px;}
.feat-ic{width:46px; height:46px; border-radius:13px; background:var(--sage); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.feat h3{margin:0 0 6px; font-size:17px; font-weight:700;}
.feat p{margin:0; font-size:14px; color:var(--muted); line-height:1.5;}

/* ── Functies (uitgebreid) ── */
.fn-intro{max-width:680px; margin:0 auto 48px; text-align:center;}
.fn-intro .pill{margin-bottom:18px;}
.fn-intro h2{font-family:var(--serif); font-weight:500; font-size:44px; line-height:1.08;
  letter-spacing:-.02em; margin:0;}
.fn-intro p{font-size:17px; color:var(--muted); margin:16px 0 0;}
.fn-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:1040px; margin:0 auto;}
.fn-card{display:flex; gap:18px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:26px 24px;}
.fn-ic{width:50px; height:50px; border-radius:14px; background:var(--sage); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.fn-body{flex:1; min-width:0;}
.fn-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px;}
.fn-top h3{margin:0; font-size:18px; font-weight:700;}
.fn-where{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--olive); background:var(--sage); border-radius:20px; padding:3px 10px; white-space:nowrap;}
.fn-card p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.55;}
.fn-card p b{color:var(--ink); font-weight:600;}

/* ── Section heading ── */
.sec{padding:96px 0;}
.sec-head{text-align:center; max-width:640px; margin:0 auto 52px;}
.sec-head .pill{margin-bottom:18px;}
.sec-h2{font-family:var(--serif); font-weight:500; font-size:48px; line-height:1.08;
  letter-spacing:-.02em; margin:0;}
.sec-sub{font-size:17px; color:var(--muted); margin:16px 0 0;}

/* ── Pricing ── */
.bg-soft{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.toggle{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:28px;
  font-size:14.5px; font-weight:600;}
.toggle .off{color:var(--muted);}
.sw{width:52px; height:30px; border-radius:20px; background:var(--primary); position:relative; cursor:pointer;}
.sw i{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  transition:left .18s;}
.sw.year i{left:25px;}
.save{background:var(--sage); color:var(--primary); font-size:12px; font-weight:700; padding:3px 9px;
  border-radius:12px;}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1040px; margin:48px auto 0;}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px 26px;
  display:flex; flex-direction:column;}
.plan.feat-plan{border:1.5px solid var(--primary); position:relative; box-shadow:0 24px 50px rgba(40,46,26,.1);}
.plan-tag{position:absolute; top:0; left:0; right:0; height:38px; background:var(--primary); color:#fbfaf4;
  border-radius:18px 18px 0 0; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;}
.plan.feat-plan .plan-body{margin-top:38px;}
.plan h3{margin:0 0 14px; font-size:20px; font-weight:700;}
.plan-price{font-family:var(--serif); font-size:42px; font-weight:600; letter-spacing:-.01em;}
.plan-price small{font-family:var(--ui); font-size:14px; font-weight:500; color:var(--muted);}
.plan-desc{font-size:14px; color:var(--muted); margin:10px 0 22px; min-height:38px;}
.plan-list{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1;}
.plan-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px;}
.plan-list i{color:var(--primary); margin-top:2px; flex-shrink:0;}
.plan-list li.strong{font-weight:600;}
.plan .btn{width:100%;}
.btn-soft{background:var(--surface); border:1px solid var(--sage-2); color:var(--primary); height:50px; font-size:15px; border-radius:13px;}
.btn-soft:hover{background:var(--sage);}
.btn-fill{background:var(--primary); color:#fbfaf4; height:50px; font-size:15px; border-radius:13px;}
.btn-fill:hover{background:var(--primary-d);}

/* ── Comparison ── */
.compare{max-width:1040px; margin:56px auto 0; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; overflow:hidden;}
.compare table{width:100%; border-collapse:collapse;}
.compare th, .compare td{padding:16px 20px; text-align:center; font-size:14.5px;}
.compare th:first-child, .compare td:first-child{text-align:left; font-weight:500;}
.compare thead th{font-weight:700; font-size:15px; border-bottom:1px solid var(--line);}
.compare tbody tr + tr td{border-top:1px solid var(--hair);}
.compare .col-hi{background:var(--bg-2);}
.compare .yes{color:var(--primary);}
.compare .no{color:var(--faint);}
.cell-ico{display:inline-flex; align-items:center; gap:10px;}
.cell-ico i{color:var(--muted);}

/* ── Assurances ── */
.assure{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1040px;
  margin:56px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:28px 32px;}
.assure-item{display:flex; gap:14px;}
.assure-item i{color:var(--primary); flex-shrink:0;}
.assure-item b{display:block; font-size:14.5px; margin-bottom:3px;}
.assure-item span{font-size:13px; color:var(--muted); line-height:1.45;}

/* ── CTA band ── */
.cta-band{background:var(--primary); color:#f3f3ea; text-align:center; padding:80px 0;}
.cta-band h2{font-family:var(--serif); font-weight:500; font-size:42px; margin:0 0 14px; line-height:1.1;}
.cta-band p{font-size:17px; color:#cdd1bf; margin:0 0 30px;}
.btn-light{background:#fbfaf4; color:var(--primary); height:56px; padding:0 30px; font-size:16px; border-radius:14px;}
.btn-light:hover{background:#fff;}

/* ── Footer ── */
.foot{padding:56px 0 40px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;}
.foot p{font-size:14px; color:var(--muted); margin:14px 0 0; max-width:280px;}
.foot h4{font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin:0 0 14px;}
.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.foot ul a{font-size:14px; color:var(--muted);}
.foot ul a:hover{color:var(--ink);}
.foot-bot{margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--faint); flex-wrap:wrap; gap:10px;}

/* ── Responsive ── */
@media(max-width:980px){
  .nav-links{display:none;}
  .hero-grid{grid-template-columns:1fr; gap:24px;}
  .hero-visual{min-height:auto; margin-top:8px;}
  .hero-logo{width:150px; left:2px; transform:translateY(-50%) rotate(-4deg);}
  .halo-2{display:none;}
  .h1{font-size:48px;}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .fn-grid{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr; max-width:420px;}
  .compare{overflow-x:auto;}
  .assure{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .sec-h2{font-size:36px;}
  .fn-intro h2{font-size:34px;}
}
@media(max-width:560px){
  .wrap{padding:0 20px;}
  .h1{font-size:38px;}
  .ticks{grid-template-columns:1fr;}
  .feat-grid{grid-template-columns:1fr;}
  .assure{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .trust-in{flex-direction:column; align-items:flex-start;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
}