:root{
  --pink-50:#fdf8ec;
  --pink-100:#f9edc9;
  --pink-300:#f0d488;
  --pink-500:#e0af3e;
  --pink-600:#c28e1f;
  --pink-700:#9c6b12;
  --navy:#1b2947;
  --navy-soft:#5b6580;
  --mustard:#d99a2b;
  --mustard-dark:#a86f13;
  --ink:#1b2947;
  --muted:#7a839a;
  --line:#f0e2bd;
  --white:#ffffff;
  --amber:#a86f13;
  --red:#c0405f;
  --shadow: 0 4px 18px rgba(156,107,18,0.10);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--pink-50);
  color:var(--ink);
  line-height:1.5;
}
h1,h2,h3,.section-title,.logo-text,.calc-btn,.nav-logo-text{
  font-family:'Baloo 2',-apple-system,sans-serif;
}

/* ---------- NAV ---------- */
.topnav{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.nav-inner{
  max-width:1040px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.nav-logo{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
}
.nav-logo-piggy{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  flex-shrink:0;
  transition:transform .15s;
}
.nav-logo:hover .nav-logo-piggy{transform:scale(1.08);}
.nav-logo-text{
  font-size:15px;
  font-weight:700;
  color:var(--navy);
}
.nav-links{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.nav-links a{
  text-decoration:none;
  color:var(--navy-soft);
  font-weight:700;
  font-size:14px;
  padding:8px 14px;
  border-radius:20px;
  transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--pink-50); color:var(--navy);}
.nav-links a.active{background:var(--pink-600); color:#fff;}

/* ---------- HEADER ---------- */
header.page-header{
  background:linear-gradient(135deg,var(--pink-500),var(--pink-300));
  color:var(--navy);
  padding:32px 20px 40px;
  text-align:center;
}
header.page-header .step-tag{
  display:inline-block;
  background:rgba(27,41,71,0.1);
  color:var(--navy);
  font-size:12px;
  font-weight:700;
  padding:3px 12px;
  border-radius:20px;
  margin-bottom:10px;
  letter-spacing:.02em;
}
header.page-header h1{
  margin:0 0 8px;
  font-size:clamp(24px,4vw,34px);
  color:var(--navy);
  font-weight:800;
}
header.page-header p{
  margin:0;
  color:var(--navy-soft);
  opacity:.95;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  font-size:15px;
}

main{
  max-width:1040px;
  margin:-24px auto 60px;
  padding:0 20px;
}
main a{color:var(--pink-700); font-weight:600;}
main a:hover{color:var(--navy);}

/* ---------- CARD ---------- */
.card{
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:24px;
  margin-bottom:20px;
  border:1px solid var(--line);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px 20px;
}
label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}
.field{position:relative;}
input[type=number], input[type=text], input[type=email], input[type=password], select{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:15px;
  color:var(--ink);
  background:var(--pink-50);
  transition:border-color .15s;
  font-family:inherit;
}
input[type=number]:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, select:focus{
  outline:none;
  border-color:var(--pink-600);
  background:#fff;
}
.auth-msg{
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:16px;
  line-height:1.5;
}
.auth-msg.error{ background:#fdecef; color:#b3273f; border:1px solid #f4c2ce; }
.auth-msg.success{ background:#eaf7ee; color:#1e7a3a; border:1px solid #bfe6c8; }
.auth-switch{ margin-top:16px; font-size:14px; color:var(--muted); text-align:center; }
.auth-switch a{ color:var(--pink-700); font-weight:600; }
.voortgang-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px;
  background:#fff;
}
.voortgang-item .vg-icon-badge{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  border:2px solid var(--navy);
}
.voortgang-item .vg-icon-badge.vg-badge-rendement{ background:var(--navy); }
.voortgang-item .vg-icon-badge.vg-badge-budget{ background:var(--pink-100,var(--pink-50)); }
.voortgang-item .vg-info{ flex:1; min-width:0; }
.voortgang-item .vg-date{ font-size:12px; color:var(--muted); }
.voortgang-item .vg-type{ font-weight:700; color:var(--navy); font-size:14px; }
.voortgang-item .vg-right{ text-align:right; flex-shrink:0; }
.voortgang-item .vg-value{ font-weight:700; color:var(--pink-700); font-size:16px; }
.voortgang-item .vg-delta{ font-size:12px; font-weight:700; margin-top:2px; }
.voortgang-item .vg-delta.up{ color:#1e7a3a; }
.voortgang-item .vg-delta.down{ color:#b3273f; }
.voortgang-lijst-intro{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:14px; flex-wrap:wrap; gap:6px;
}

.vermogen-trend{
  display:flex; align-items:center; gap:10px; font-size:14px;
  padding:10px 14px; border-radius:10px; background:var(--pink-50); line-height:1.4;
}
.vermogen-trend .trend-icon{ font-size:17px; font-weight:800; flex-shrink:0; }
.vermogen-trend.trend-up{ color:#1e7a3a; }
.vermogen-trend.trend-down{ color:#b3273f; }
.vermogen-trend.trend-neutral{ color:var(--muted); }

.spaardoel-bar-track{
  width:100%; height:16px; border-radius:8px; background:var(--pink-50);
  border:1px solid var(--line); overflow:hidden; margin:12px 0 6px;
}
.spaardoel-bar-fill{
  height:100%; background:var(--pink-600); border-radius:8px 0 0 8px;
  transition:width .3s ease;
}
.spaardoel-bar-fill.behaald{ background:#1e7a3a; border-radius:8px; }
.spaardoel-pct{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:22px; color:var(--navy); }
.spaardoel-form .field{ margin-bottom:14px; }

/* ---------- TABBLADEN (Mijn account) ---------- */
.tab-nav{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tab-btn{
  background:var(--pink-50); border:1.5px solid var(--line); color:var(--navy);
  font-weight:700; font-size:14px; padding:10px 18px; border-radius:10px; cursor:pointer;
  font-family:inherit; transition:background .15s, color .15s;
}
.tab-btn:hover{ background:var(--pink-100, var(--pink-50)); }
.tab-btn.active{ background:var(--pink-700); color:#fff; border-color:var(--pink-700); }
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* ---------- PENSIOENPAGINA ---------- */
.pensioen-uitkomst{
  text-align:center; padding:20px; background:var(--pink-50); border-radius:14px; margin-bottom:20px;
}
.pensioen-uitkomst .leeftijd{ font-family:'Baloo 2',sans-serif; font-size:40px; font-weight:800; color:var(--navy); }
.pensioen-uitkomst .sub{ color:var(--muted); font-size:14px; margin-top:6px; }
.suffix{
  position:absolute;
  right:14px;
  top:37px;
  color:var(--muted);
  font-size:13px;
  pointer-events:none;
}
.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.toggle-row:first-of-type{border-top:none;}
.toggle-label{font-size:14px; font-weight:600; color:var(--ink);}
.toggle-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
.switch{position:relative; width:44px; height:24px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.slider{
  position:absolute;inset:0;
  background:#e9d3da;
  border-radius:24px;
  cursor:pointer;
  transition:.2s;
}
.slider:before{
  content:"";
  position:absolute;
  height:18px;width:18px;
  left:3px;top:3px;
  background:white;
  border-radius:50%;
  transition:.2s;
}
.switch input:checked + .slider{background:var(--pink-600);}
.switch input:checked + .slider:before{transform:translateX(20px);}
.advanced-fields{
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--line);
}
.advanced-fields.open{display:grid;}
.section-title{
  font-size:15px;
  font-weight:700;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.section-sub{font-size:13px; color:var(--muted); margin:0 0 16px;}
button.calc-btn{
  width:100%;
  background:var(--pink-700);
  color:#fff;
  border:none;
  padding:14px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s;
}
button.calc-btn:hover{background:var(--navy);}
.results{display:none;}
.results.open{display:block;}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.stat{
  background:var(--pink-50);
  border-radius:12px;
  padding:16px 18px;
  border:1px solid var(--pink-100);
}
.stat .label{
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:6px;
}
.stat .value{font-size:22px; font-weight:800; color:var(--pink-700);}
.stat.warn .value{color:var(--amber);}
.stat.negative .value{color:var(--red);}
canvas{max-height:340px;}
.chart-small{max-height:260px;}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  margin-top:20px;
}
th,td{text-align:right; padding:9px 10px; border-bottom:1px solid var(--line);}
th:first-child,td:first-child{text-align:left;}
thead th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase;}
tbody tr:hover{background:var(--pink-50);}
.disclaimer{
  font-size:12.5px;
  color:var(--muted);
  background:var(--pink-50);
  border-radius:10px;
  padding:14px 16px;
  margin-top:20px;
  border:1px solid var(--pink-100);
}
footer{text-align:center; font-size:13px; color:var(--muted); padding:20px;}
.footer-instagram{ display:inline-flex; vertical-align:-3px; color:var(--pink-700); transition:color .15s; }
.footer-instagram:hover{ color:var(--navy); }
.table-wrap{overflow-x:auto;}

/* ---------- BUDGET LINE ITEMS ---------- */
.subgroup-title{
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  margin:18px 0 8px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.line-items{display:flex; flex-direction:column; gap:8px;}
.line-item-row{
  display:grid;
  grid-template-columns:1fr 130px 32px;
  gap:8px;
  align-items:center;
}
.line-item-row input[type=number]{padding:9px 12px; font-size:14px;}
.line-item-row input[type=text]{padding:9px 12px; font-size:14px;}
.remove-row{
  width:32px; height:32px;
  border:none; background:none;
  color:var(--muted); cursor:pointer;
  font-size:15px; border-radius:8px;
}
.remove-row:hover{background:var(--pink-100); color:var(--pink-700);}
.add-row-btn{
  align-self:flex-start;
  background:none;
  border:1.5px dashed var(--pink-300);
  color:var(--pink-700);
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  margin-top:6px;
  font-family:inherit;
}
.add-row-btn:hover{background:var(--pink-50);}
.budget-columns{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:640px){
  .budget-columns{grid-template-columns:1fr;}
  .line-item-row{grid-template-columns:1fr 100px 32px;}
}
.schuld-row{
  display:grid;
  grid-template-columns:1.3fr 110px 90px 110px 32px;
  gap:8px;
  align-items:center;
}
.schuld-row input[type=number]{padding:9px 12px; font-size:14px;}
.schuld-row input[type=text]{padding:9px 12px; font-size:14px;}
@media (max-width:720px){
  .schuld-row{grid-template-columns:1fr 1fr; grid-template-areas:"naam naam" "saldo rente" "aflossing remove";}
  .schuld-row input:nth-child(1){grid-area:naam;}
  .schuld-row input:nth-child(2){grid-area:saldo;}
  .schuld-row input:nth-child(3){grid-area:rente;}
  .schuld-row input:nth-child(4){grid-area:aflossing;}
  .schuld-row button{grid-area:remove; justify-self:end;}
}

/* ---------- BADGES (gamification) ---------- */
.badge-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:12px;
  margin-top:14px;
}
.badge-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:14px 8px; border-radius:14px;
  border:1.5px solid var(--line); background:#fff;
  transition:transform .15s, box-shadow .15s;
}
.badge-item.behaald{ border-color:var(--pink-700); background:var(--pink-50); }
.badge-item.locked{ opacity:.45; filter:grayscale(1); }
.badge-icoon{ font-size:28px; }
.badge-naam{ font-size:12.5px; font-weight:700; color:var(--navy); line-height:1.3; }

/* ---------- FINANCIËLE CHECKLIST (gamification) ---------- */
.checklist{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.checklist-item{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; color:var(--navy); cursor:pointer;
}
.checklist-item input[type=checkbox]{
  margin-top:3px; width:18px; height:18px; accent-color:var(--pink-700); cursor:pointer; flex-shrink:0;
}
.checklist-item:has(input:checked) span{ color:var(--muted); text-decoration:line-through; }

/* ---------- ADVICE BOX ---------- */
.advice-box{
  background:linear-gradient(135deg,var(--pink-50),#ffffff);
  border:1.5px solid var(--pink-300);
  border-radius:14px;
  padding:22px;
  margin-top:4px;
}
.advice-box h3{margin:0 0 10px; font-size:18px; color:var(--navy);}
.advice-box .advice-intro{margin:0 0 18px; font-size:14.5px; color:var(--navy-soft); line-height:1.55;}
.advice-box ul{margin:0; padding-left:20px;}
.advice-box li{margin-bottom:10px; font-size:14.5px; line-height:1.5;}
.advice-box li:last-child{margin-bottom:0;}
.advice-section{margin-top:20px;}
.advice-section:first-of-type{margin-top:0;}
.advice-section h4{
  margin:0 0 10px;
  font-size:13px;
  color:var(--pink-700);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-family:'Baloo 2',sans-serif;
  display:flex;
  align-items:center;
  gap:6px;
}
.advice-cta{
  margin-top:18px;
  background:var(--navy);
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:'Baloo 2',sans-serif;
}
.advice-cta:hover{background:var(--pink-700);}

/* ---------- INFO BANNER ---------- */
.banner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--pink-50);
  border:1.5px solid var(--pink-300);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:20px;
  font-size:14px;
}
.banner .icon{font-size:20px; line-height:1;}
.banner strong{color:var(--navy);}
.banner a{color:var(--pink-700); font-weight:700; text-decoration:none;}
.banner a:hover{text-decoration:underline;}
.banner button.mini-btn{
  background:var(--pink-700);
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  margin-top:8px;
  font-family:'Baloo 2',sans-serif;
}
.banner button.mini-btn:hover{background:var(--navy);}

/* ---------- EMPTY STATE ---------- */
.empty-state{
  text-align:center;
  padding:50px 20px;
}
.empty-state .emoji{font-size:44px; margin-bottom:12px;}
.empty-state h2{margin:0 0 10px; color:var(--navy); font-size:22px;}
.empty-state p{color:var(--muted); max-width:420px; margin:0 auto 22px; font-size:14.5px;}
.empty-state .btn-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.empty-state a.calc-btn{
  display:inline-block;
  text-decoration:none;
  width:auto;
  padding:12px 22px;
}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}
.btn-row .calc-btn, .btn-row a.calc-btn{
  display:inline-block;
  text-decoration:none;
  width:auto;
  padding:12px 22px;
}

/* ---------- HOME PAGE ---------- */
.hero{
  text-align:center;
  padding:12px 0 8px;
}
.home-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:8px;
}
.home-card{
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:26px 22px;
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .15s, box-shadow .15s;
}
.home-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(156,107,18,0.18);}
.home-card .icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--pink-100);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
}
.home-card h2{margin:0; font-size:18px; color:var(--navy);}
.home-card p{margin:0; font-size:13.5px; color:var(--muted);}
.home-card .go{
  margin-top:auto;
  font-size:13px;
  font-weight:700;
  color:var(--pink-700);
}

/* ---------- SUMMARY GRID (advies) ---------- */
.summary-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:700px){
  .summary-two{grid-template-columns:1fr;}
}

/* ---------- NIEUWSBRIEF POP-UP ---------- */
.newsletter-overlay{
  position:fixed;
  inset:0;
  background:rgba(27,41,71,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:200;
  opacity:0;
  transition:opacity .25s;
}
.newsletter-overlay.open{opacity:1;}
.newsletter-modal{
  position:relative;
  background:var(--white);
  border-radius:18px;
  padding:32px 28px;
  max-width:380px;
  width:100%;
  text-align:center;
  box-shadow:0 20px 50px rgba(27,41,71,0.25);
  transform:translateY(10px) scale(0.98);
  transition:transform .25s;
}
.newsletter-overlay.open .newsletter-modal{transform:translateY(0) scale(1);}
.newsletter-close{
  position:absolute;
  top:12px; right:12px;
  width:30px; height:30px;
  border:none;
  background:var(--pink-50);
  color:var(--muted);
  border-radius:50%;
  cursor:pointer;
  font-size:14px;
}
.newsletter-close:hover{background:var(--pink-100); color:var(--navy);}
.newsletter-icon{font-size:34px; margin-bottom:10px;}
.newsletter-modal h3{
  margin:0 0 10px;
  font-size:20px;
  color:var(--navy);
  font-family:'Baloo 2',sans-serif;
}
.newsletter-modal p{
  margin:0 0 20px;
  font-size:14px;
  color:var(--navy-soft);
  line-height:1.5;
}
#newsletterForm{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#newsletterForm input[type=email]{
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:14px;
  background:var(--pink-50);
  font-family:inherit;
}
#newsletterForm input[type=email]:focus{
  outline:none;
  border-color:var(--pink-600);
  background:#fff;
}
.newsletter-note{
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
}
@media (max-width:480px){
  .newsletter-modal{padding:26px 20px;}
}

/* ---------- BLOG / ARTIKEL ---------- */
.back-link{
  display:inline-block;
  font-size:13.5px;
  font-weight:700;
  color:var(--pink-700);
  text-decoration:none;
  margin-bottom:16px;
}
.back-link:hover{color:var(--navy);}
.article-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.article-content{font-size:15.5px; line-height:1.75; color:var(--ink);}
.article-content h2{
  font-size:19px;
  color:var(--navy);
  margin:28px 0 12px;
  font-family:'Baloo 2',sans-serif;
}
.article-content h2:first-child{margin-top:0;}
.article-content p{margin:0 0 16px;}
.article-content ul{margin:0 0 16px; padding-left:22px;}
.article-content li{margin-bottom:8px;}
.article-content a{color:var(--pink-700); font-weight:600; text-decoration:underline; text-decoration-color:var(--pink-300);}
.article-content a:hover{color:var(--navy);}
.article-cta{
  background:linear-gradient(135deg,var(--pink-50),#ffffff);
  border:1.5px solid var(--pink-300);
  border-radius:14px;
  padding:20px 22px;
  margin-top:8px;
}
.article-cta strong{color:var(--navy);}
.article-cta a.calc-btn{
  display:inline-block;
  width:auto;
  text-decoration:none;
  padding:10px 20px;
  margin-top:10px;
  margin-right:8px;
}
.blog-card-meta{
  font-size:12.5px;
  color:var(--muted);
  margin-top:-4px;
}

/* ---------- CONSENT / PRIVACY ---------- */
.consent-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:18px;
  font-size:13px;
  color:var(--muted);
  text-align:left;
  line-height:1.45;
}
.consent-row input[type=checkbox]{
  margin-top:3px;
  flex-shrink:0;
  width:16px;
  height:16px;
  accent-color:var(--pink-600);
}
.consent-row a{color:var(--pink-700); font-weight:600;}
.consent-note{
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
  text-align:left;
}
.consent-note a{color:var(--pink-700); font-weight:600;}