/* ===== inline <style> block 1 (was in index.html) ===== */
  /* ═══════════════════════════════════════
   DESIGN TOKENS — exact figo.app palette
   ═══════════════════════════════════════ */
:root {
  /* Brand yellow — taken directly from figo.app source */
  --y:        #F5C518;  /* exact figo.app yellow */
  --y-dark:   #D4930A;  /* darker for hover — more contrast */
  --y-bg:     #FFFCF0;  /* very subtle warm-white for yellow accent backgrounds */
  --y-bg2:    #FDF7E3;  /* secondary sections — subtle */
  --y-bdr:    #EAD870;  /* border around yellow elements */

  /* Navy */
  --n:        #1A1B2E;
  --n2:       #2D3047;
  --n-mid:    #4A4B5E;
  --n-light:  #8A8B9E;

  /* Backgrounds — professional near-white */
  --bg:       #F7F7F5;  /* main background — near-white, professional */
  --bg2:      #F0F0ED;  /* alt sections */
  --white:    #FFFFFF;
  --border:   #E5E5E2;  /* neutral subtle border */
  --border2:  #CCCCC8;  /* slightly stronger */

  /* Typography */
  --fh: 'Albert Sans', sans-serif;  /* Adyen-style geometric sans */
  --fb: 'Albert Sans', sans-serif;  /* same font, different weights */

  /* Radii */
  --r:  12px;
  --rl: 20px;
  --rx: 28px;

  /* Shadows */
  --s1: 0 2px 8px rgba(26,27,46,.06);
  --s2: 0 4px 20px rgba(26,27,46,.09);
  --s3: 0 10px 40px rgba(26,27,46,.13);
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font-family:var(--fb);color:var(--n);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:var(--fb)}
h1,h2,h3,h4{font-family:var(--fh);line-height:1.1;letter-spacing:-0.02em}

/* ═══ LAYOUT ═══ */
.container{max-width:1180px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.container{padding:0 20px}}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fb);font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:var(--rl);border:2px solid transparent;
  cursor:pointer;transition:all .18s;text-decoration:none;white-space:nowrap;
  letter-spacing:-.01em;
}
.btn-y{background:var(--y);color:var(--n);border-color:var(--y)}
.btn-y:hover{background:var(--y-dark);border-color:var(--y-dark);transform:translateY(-1px);box-shadow:0 6px 24px rgba(245,197,24,.35)}
.btn-o{background:transparent;color:var(--n);border-color:var(--n);border-width:2px;}
.btn-o:hover{border-color:var(--n);background:rgba(26,27,46,.06);color:var(--n)}
.btn-w{background:var(--white);color:var(--n);border-color:var(--white)}
.btn-w:hover{background:var(--y-bg);border-color:var(--y)}

/* ═══ PAGES ═══ */
.page{display:none}
.page.active{display:block}

/* ═══ HEADER ═══ */
header{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s;
}
header.scrolled{background:rgba(255,255,255,.99);box-shadow:0 2px 20px rgba(26,27,46,.08)}
.nav-inner{display:flex;align-items:center;height:80px}

/* Logo */
.logo-link{display:flex;align-items:center;margin-right:24px;flex-shrink:0}
.logo-box{
  border:none;
  padding:0;
  background:transparent;
  display:flex;align-items:center;
}
.logo-box:hover{opacity:.85}
.logo-box img{height:32px;width:auto}

/* Nav links */
nav.main{display:flex;align-items:center;gap:2px;flex:1}
.nav-btn,.nav-a{
  display:inline-flex;align-items:center;gap:4px;
  padding:9px 15px;font-size:16px;font-weight:600;
  color:var(--n);border-radius:8px;
  transition:background .13s,color .13s;
  background:none;border:none;cursor:pointer;
  font-family:var(--fb);text-decoration:none;white-space:nowrap;
}
.nav-btn:hover,.nav-a:hover,.nav-btn.on{background:rgba(20,41,82,.08);color:var(--n)}

/* Dropdown */
.drop-wrap{position:relative}
.drop-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  min-width:310px;background:var(--white);
  border:1px solid var(--border);border-radius:16px;
  box-shadow:0 8px 40px rgba(26,27,46,.13);
  padding:6px;z-index:1000;
  opacity:0;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .15s ease,transform .15s ease;
}
.drop-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.drop-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;font-size:14px;font-weight:500;
  color:var(--n-mid);border-radius:10px;
  transition:background .12s,color .12s;
  text-decoration:none;
}
.drop-item:hover{background:var(--y-bg);color:var(--n)}
.drop-item-icon{
  width:34px;height:34px;border-radius:8px;
  background:var(--y-bg);display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.chevron{transition:transform .18s;display:inline-flex}
.chevron.open{transform:rotate(180deg)}

/* Language switcher */
.lang-wrap{display:flex;align-items:center;margin-left:6px}
.lang-btn{
  display:flex;align-items:center;gap:6px;
  padding:9px 12px;border-radius:8px;
  font-size:16px;font-weight:600;color:var(--n);
  border:none;background:none;cursor:pointer;font-family:var(--fb);
  transition:background .13s;
}
.lang-btn:hover{background:var(--y-bg);color:var(--n)}
.flag{width:20px;height:14px;object-fit:cover;border-radius:3px;border:1px solid rgba(0,0,0,.08)}

/* Header actions */
.h-actions{display:flex;align-items:center;gap:10px;margin-left:16px;flex-shrink:0}
.h-actions .btn{padding:12px 24px;font-size:16px}

/* Hamburger */
.burger{display:none;background:none;border:none;cursor:pointer;color:var(--n);padding:4px;margin-left:auto;font-size:22px;line-height:1}

/* Mobile menu */
.mob-menu{
  display:none;background:var(--white);
  border-top:1px solid var(--border);
  padding:12px 20px 20px;flex-direction:column;gap:2px;
  max-height:calc(100dvh - 56px);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mob-menu.open{display:flex}
.mob-cat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--n-light);padding:10px 8px 4px;display:block}
.mob-a{display:block;padding:10px 8px;font-size:15px;font-weight:500;color:var(--n-mid);border-radius:8px;text-decoration:none;transition:background .12s}
.mob-a:hover{background:var(--y-bg);color:var(--n)}
.mob-hr{border:none;border-top:1px solid var(--border);margin:8px 0}
.mob-btns{display:flex;flex-direction:column;gap:10px;padding-top:12px}

/* ═══ HERO ═══ */
.hero{background:var(--bg);padding:48px 0 44px;overflow:hidden;position:relative}
.hero::after{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(245,197,24,.08) 0%,transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero-left{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
.hero-left h1{
  font-family:var(--fh);font-weight:800;
  font-size:clamp(38px,5.5vw,64px);
  line-height:1.05;letter-spacing:-2px;color:var(--n);
}
.hero-left h1 em{font-style:normal;color:var(--y-dark)}
.hero-left p{font-size:18px;color:var(--n-mid);line-height:1.65;max-width:460px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;flex-direction:column;gap:7px}
.hero-trust p{font-size:14px;font-weight:600;color:var(--n);display:flex;align-items:center;gap:8px}
.hero-trust p::before{content:'✓';color:var(--y-dark);font-weight:800}
.hero-right{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.hero-right img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;left:0}

/* ═══ STATS BAR ═══ */
.stats-bar{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px 0}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:16px;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
.stat strong{display:block;font-family:var(--fh);font-size:19px;font-weight:700;color:var(--n);margin-bottom:4px}
.stat span{font-size:13px;color:var(--n-light)}

/* ═══ VOORDEEL — image LEFT, text RIGHT (as in screenshot) ═══ */
.voordeel-sec{background:var(--white);padding:80px 0}
.voordeel-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.voordeel-img img{width:100%;border-radius:var(--rx);box-shadow:var(--s3)}
.voordeel-text{display:flex;flex-direction:column;gap:20px}
.voordeel-text h2{font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--n);letter-spacing:-.8px}
.voordeel-checks{display:flex;flex-direction:column;gap:12px}
.vc-item{display:flex;align-items:flex-start;gap:10px;font-size:16px;color:var(--n-mid);line-height:1.55}
.vc-check{
  width:22px;height:22px;border-radius:6px;
  background:#22C55E;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;font-size:12px;color:white;font-weight:700;
}
.voordeel-cta p{font-size:16px;color:var(--n);margin-bottom:16px}
.voordeel-cta strong{font-weight:700}

/* ═══ GENERAL SECTION PATTERNS ═══ */
.sec{padding:72px 0}
.sec-white{background:var(--white)}
.sec-yellow{background:var(--bg)}
.sec-cream{background:var(--y-bg2)}
.sec-dark{background:#142952}
.sec-h{font-size:clamp(24px,3vw,38px);font-weight:800;color:var(--n);margin-bottom:16px;letter-spacing:-.8px}
.centered{display:flex;justify-content:center}
.text-center{text-align:center}

/* Feature blocks */
.feat-block{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:52px}
.feat-block:last-of-type{margin-bottom:32px}
.feat-block.rev{direction:rtl}
.feat-block.rev>*{direction:ltr}
.feat-img img{width:100%;border-radius:var(--rx);box-shadow:var(--s2)}
.feat-text{display:flex;flex-direction:column;gap:14px}
.feat-text strong{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--n)}
.feat-text p{font-size:16px;color:var(--n-mid);line-height:1.75}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dash-text{display:flex;flex-direction:column;gap:18px}
.dash-text h2{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--n);letter-spacing:-.5px}
.dash-text p{font-size:16px;color:var(--n-mid);line-height:1.7}
.dash-img img{width:100%;border-radius:var(--rx);box-shadow:var(--s3)}

/* Newsletter */
.newsletter{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative}
.newsletter::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:280px;background:radial-gradient(ellipse,rgba(245,197,24,.1) 0%,transparent 65%);pointer-events:none}
.newsletter h2{font-size:clamp(22px,3vw,36px);font-weight:800;color:#fff;position:relative}
.newsletter p{font-size:16px;color:rgba(255,255,255,.65);max-width:440px;position:relative}

/* Duurzaam CTA */
.dur-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dur-text{display:flex;flex-direction:column;gap:18px}
.dur-text h2{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--n);line-height:1.2;letter-spacing:-.5px}
.dur-text p{font-size:16px;color:var(--n-mid);line-height:1.7}
.dur-img img{width:100%;border-radius:var(--rx);box-shadow:var(--s2)}

/* CO2 */
.co2-box{background:var(--y-bg);border:1.5px solid var(--y-bdr);border-radius:var(--rx);padding:52px;max-width:680px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.co2-box h2{font-size:28px;font-weight:800;color:var(--n)}
.co2-box p{font-size:16px;color:var(--n-mid)}

/* Client logos */
.clients-sec{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 0}
.clients-label{text-align:center;font-size:14px;font-weight:600;color:var(--n-mid);margin-bottom:28px}
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 44px}
.logo-grid img{height:28px;width:auto;object-fit:contain;filter:none;opacity:1;transition:all .2s}
.logo-grid img:hover{opacity:.8;transform:scale(1.05)}

/* ═══ PRICING ═══ */
.pricing-sec{background:var(--bg);padding:80px 0}
.pricing-sub{text-align:center;font-size:16px;color:var(--n-mid);max-width:560px;margin:0 auto 44px;line-height:1.65}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:0 auto}
.p-card{background:var(--white);border:2px solid var(--border);border-radius:var(--rx);padding:34px;display:flex;flex-direction:column;position:relative;transition:border-color .2s,box-shadow .2s}
.p-card:hover{border-color:var(--y);box-shadow:var(--s2)}
.p-feat{background:#142952;border-color:var(--y);box-shadow:0 0 0 3px rgba(245,197,24,.18),var(--s3)}
.p-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--y);color:var(--n);font-size:11px;font-weight:700;padding:4px 18px;border-radius:999px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;font-family:var(--fb)}
.p-card h3{font-size:22px;font-weight:800;color:var(--n);margin-bottom:18px}
.p-feat h3{color:#fff}
.p-card ul{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;flex:1}
.p-card li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--n)}
.p-feat li{color:rgba(255,255,255,.88)}
.plus-ico{width:16px;height:16px;object-fit:contain;flex-shrink:0;opacity:.7}
.p-feat .plus-ico{filter:invert(1)}

/* ═══ SOLUTION PAGES ═══ */
.sol-hero{background:var(--bg);padding:72px 0 60px}
.sol-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.sol-hero-text{display:flex;flex-direction:column;gap:22px}
.sol-hero-text h1{font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-1px;color:var(--n);line-height:1.08}
.sol-hero-text p{font-size:17px;color:var(--n-mid);line-height:1.65}
.sol-btns{display:flex;gap:14px;flex-wrap:wrap}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pill{background:var(--white);border:1.5px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--n-mid)}
.sol-hero-img img{width:100%;border-radius:var(--rx);box-shadow:var(--s3)}

.blk{padding:72px 0}
.blk-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.blk-grid.rev{direction:rtl}
.blk-grid.rev>*{direction:ltr}
.blk-text{display:flex;flex-direction:column;gap:18px}
.blk-text h2{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--n);letter-spacing:-.5px}
.blk-text p{font-size:16px;color:var(--n-mid);line-height:1.75}
.blk-img img{width:100%;border-radius:var(--rx);box-shadow:var(--s2)}

/* Quote */
.q-sec{background:#142952;padding:72px 0}
.q-box{max-width:800px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.q-box img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--y-bdr)}
.q-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--y)}
.q-role{font-size:14px;color:rgba(255,255,255,.45)}
.q-text{font-family:var(--fh);font-size:clamp(16px,2.5vw,23px);font-weight:700;color:#fff;line-height:1.5;max-width:700px}

/* Meer weten */
.meer-sec{background:var(--bg);padding:72px 0}
.meer-box{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rx);padding:44px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;max-width:860px;margin:0 auto}
.meer-text{display:flex;flex-direction:column;gap:16px}
.meer-text h2{font-size:clamp(20px,3vw,30px);font-weight:800;color:var(--n)}
.meer-text p{font-size:15px;color:var(--n-mid);line-height:1.65}
.meer-btns{display:flex;gap:12px;flex-wrap:wrap}
.advisor-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex-shrink:0}
.advisor-card img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--y-bdr)}
.advisor-card strong{font-size:14px;font-weight:700;color:var(--n)}
.advisor-card span{font-size:12px;color:var(--n-light)}

/* FAQ */
.faq-sec{background:var(--white);padding:72px 0}
.faq-h{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--n);text-align:center;margin-bottom:40px;letter-spacing:-.5px}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .15s}
.faq-item.open{border-color:var(--y)}
.faq-q{width:100%;text-align:left;padding:18px 20px;font-family:var(--fb);font-size:15px;font-weight:600;color:var(--n);cursor:pointer;background:none;border:none;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .12s}
.faq-q:hover{background:var(--y-bg)}
.faq-icon{color:var(--y-dark);flex-shrink:0;font-size:20px;line-height:1;font-weight:400}
.faq-a{padding:0 20px 18px;font-size:15px;color:var(--n-mid);line-height:1.7;display:none}

/* ═══ TEAM ═══ */
.team-hero{background:var(--bg);padding:80px 0 48px}
.team-hero-inner{max-width:720px;display:flex;flex-direction:column;gap:20px}
.team-pre{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--y-dark)}
.team-hero h1{font-size:clamp(28px,4vw,50px);font-weight:800;letter-spacing:-1px;color:var(--n);line-height:1.08}
.team-hero p{font-size:17px;color:var(--n-mid);line-height:1.65;max-width:560px}
.team-photo-sec{background:var(--bg);padding:0 0 64px}
.team-photo{width:100%;border-radius:var(--rx);box-shadow:var(--s3);max-height:480px;object-fit:cover}
.team-grid-sec{background:var(--white);padding:72px 0}
.hiring-row{margin-bottom:40px;display:flex;flex-direction:column;gap:4px}
.hiring-badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--y-dark)}
.hiring-row h2{font-size:clamp(24px,4vw,40px);font-weight:800;letter-spacing:-.8px;color:var(--n)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.t-card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--rx);padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:all .2s;cursor:default}
.t-card:hover{border-color:var(--y);box-shadow:var(--s2);transform:translateY(-3px)}
.t-card img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--y-bdr)}
.t-card h3{font-size:16px;font-weight:700;color:var(--n)}
.t-card p{font-size:13px;color:var(--n-light)}
.join-card{align-items:flex-start;text-align:left}
.join-card .join-img{width:100%;height:140px;border-radius:var(--r);object-fit:cover;border:none;margin-bottom:4px}
.join-text{font-size:13px;color:var(--n-light);line-height:1.6}

/* ═══ ADVIES/DEMO PAGE ═══ */
.advies-page{background:var(--bg);padding:72px 0 80px}
.advies-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.advies-left{display:flex;flex-direction:column;gap:32px}
.advies-left h1{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--n);line-height:1.2;letter-spacing:-.5px}
.benefits-list{display:flex;flex-direction:column;gap:20px}
.benefit{display:flex;align-items:flex-start;gap:16px}
.benefit img{width:80px;height:60px;object-fit:cover;border-radius:var(--r);flex-shrink:0}
.benefit h4{font-size:15px;font-weight:700;color:var(--n);margin-bottom:4px}
.benefit p{font-size:14px;color:var(--n-mid);line-height:1.55}
.logos-label{font-size:14px;font-weight:600;color:var(--n-mid);margin-bottom:16px}

/* Form card */
.form-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rx);padding:36px;box-shadow:var(--s2)}
.form-advisor{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.form-advisor img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--y-bdr)}
.form-advisor strong{display:block;font-size:15px;font-weight:700;color:var(--n)}
.form-advisor span{font-size:13px;color:var(--n-light)}
.form-card h2{font-size:22px;font-weight:800;color:var(--n);margin-bottom:24px;letter-spacing:-.3px}
.hs-form{display:flex;flex-direction:column;gap:16px}
.hs-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hs-field{display:flex;flex-direction:column;gap:6px}
.hs-field label{font-size:12px;font-weight:600;color:var(--n);text-transform:uppercase;letter-spacing:.05em}
.hs-field input,.hs-field select,.hs-field textarea{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--border);border-radius:var(--r);
  font-family:var(--fb);font-size:15px;color:var(--n);
  background:var(--bg);outline:none;transition:border-color .15s,background .15s;
}
.hs-field input:focus,.hs-field select:focus,.hs-field textarea:focus{border-color:var(--y);background:var(--white)}
.hs-field textarea{resize:vertical;min-height:100px}
.hs-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--n-mid);cursor:pointer}
.hs-check input{margin-top:2px;accent-color:var(--y-dark)}
.submit-btn{
  width:100%;padding:15px;
  background:var(--y);color:var(--n);
  font-family:var(--fb);font-size:15px;font-weight:700;
  border:2px solid var(--y);border-radius:var(--r);cursor:pointer;
  transition:all .18s;margin-top:4px;
}
.submit-btn:hover{background:var(--y-dark);border-color:var(--y-dark);transform:translateY(-1px);box-shadow:0 6px 24px rgba(245,197,24,.3)}
.form-note{font-size:12px;color:var(--n-light);text-align:center;margin-top:8px}
.form-success{display:none;text-align:center;padding:48px 0;flex-direction:column;align-items:center;gap:16px}
.form-success h3{font-size:24px;font-weight:800;color:var(--n)}
.form-success p{font-size:15px;color:var(--n-mid);max-width:280px;line-height:1.6}

/* ═══ SUPPORT ═══ */
.support-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.support-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rx);padding:28px;display:flex;flex-direction:column;gap:0;transition:border-color .2s,box-shadow .2s}
.support-card:hover{border-color:var(--y);box-shadow:var(--s2)}
.support-icon{font-size:28px}
.support-card h3{font-size:18px;font-weight:700;color:var(--n)}
.support-card p{font-size:14px;color:var(--n-mid);flex:1}

/* ═══ FOOTER ═══ */
footer{background:#142952;color:rgba(255,255,255,.55);padding:56px 0 28px}
.f-grid{display:grid;grid-template-columns:220px 1fr 180px 200px;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:24px}
.f-logo-box{border:none;padding:0;display:inline-flex;background:transparent;margin-bottom:14px}
.f-logo-box img{height:28px;width:auto;filter:brightness(0) invert(1)}
.f-brand p{font-size:13px;line-height:1.65;max-width:185px;margin-bottom:18px}
.f-apps{display:flex;flex-direction:column;gap:10px}
.f-apps img{width:auto;filter:none;opacity:.9;transition:opacity .15s}
.f-apps img:hover{opacity:1}
.f-apps .app-badge--apple{height:38px}
.f-apps .app-badge--google{height:38px}
.f-col h4{font-family:var(--fb);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:16px}
.f-col nav{display:flex;flex-direction:column;gap:8px}
.f-col a,.f-col address p{font-size:13px;color:rgba(255,255,255,.55);transition:color .14s;text-decoration:none;display:block}
.f-col a:hover{color:var(--y)}
.f-parent{font-size:12px;font-weight:600;color:rgba(255,255,255,.3);display:block;margin-bottom:4px}
.f-sub{margin-left:8px;border-left:1px solid rgba(255,255,255,.1);padding-left:8px;display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.f-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px}
.f-bottom span{color:rgba(255,255,255,.3)}
.f-legal{display:flex;gap:18px}
.f-legal a{font-size:12px;color:rgba(255,255,255,.3);text-decoration:none;transition:color .14s}
.f-legal a:hover{color:rgba(255,255,255,.65)}

/* ═══ RESPONSIVE ═══ */

/* ── 1024px: hide desktop nav, show hamburger ── */
@media(max-width:1024px){
  nav.main,.h-actions{display:none}
  .burger{display:flex}
  .nav-inner{height:68px}
}

/* ── 960px: two-column → one-column ── */
@media(max-width:960px){
  /* Grids */
  .hero-grid,.voordeel-grid,.feat-block,.dash-grid,.dur-grid,
  .sol-hero-grid,.blk-grid,.meer-box,.advies-grid,
  .mv-grid,.oo-grid{grid-template-columns:1fr !important}
  .feat-block.rev,.blk-grid.rev{direction:ltr}
  .meer-box{padding:24px}

  /* Stats */
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:none;border-bottom:1px solid var(--border)}
  .stat:nth-child(3),.stat:last-child{border-bottom:none}

  /* Pricing */
  .pricing-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}

  /* Footer */
  .f-grid{grid-template-columns:1fr 1fr}

  /* Team */
  .team-grid{grid-template-columns:repeat(2,1fr)}

  /* Forms */
  .hs-row{grid-template-columns:1fr}

  /* Support */
  .support-cards{grid-template-columns:repeat(2,1fr) !important}

  /* Besparing */
  .bs-result-stats{grid-template-columns:1fr 1fr}
  .bs-steps{gap:0;flex-wrap:nowrap}
  .bs-line{width:32px}

  /* Kernwaarden */
  .kw-grid{grid-template-columns:1fr 1fr !important}

  /* Missie/visie */
  .mv-grid{grid-template-columns:1fr !important}

  /* Sections padding */
  .sec{padding:52px 0}
  .voordeel-sec,.team-hero{padding:52px 0}
  .blk{padding:52px 0}
  .meer-sec,.faq-sec,.q-sec{padding:52px 0}
}

/* ── 768px: tablets ── */
@media(max-width:768px){
  /* Hero */
  .hero{padding:36px 0 32px}
  .hero-left h1{font-size:40px;letter-spacing:-1px}
  .hero-right{display:none}  /* small mobile only */ /* hide image on small tablets, show on mobile */

  /* Marquee */
  .marquee-track-wrap::before,.marquee-track-wrap::after{width:60px}

  /* Besparingsmodule */
  .bs-steps{display:none} /* hide step indicators on small screens */
  .bs-card{padding:24px}
  .bs-result-stats{grid-template-columns:1fr}

  /* Voordeel section */
  .voordeel-grid{gap:32px}
  .voordeel-img{display:none} /* image hidden, text full width */

  /* FAQ */
  .faq-list{padding:0}

  /* Meer weten */
  .meer-box{grid-template-columns:1fr !important}
  .advisor-card{flex-direction:row;justify-content:flex-start;gap:16px;text-align:left}

  /* Solutions */
  .sol-hero-img{display:none}
  .pills{gap:6px}
  .pill{font-size:12px;padding:5px 12px}

  /* Advies page */
  .advies-left h1{font-size:24px}
  .benefit img{width:60px;height:45px}

  /* Over ons */
  .kw-grid{grid-template-columns:1fr !important}

  /* Footer */
  .f-grid{grid-template-columns:1fr}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .f-legal{flex-wrap:wrap;gap:12px}

  /* Team */
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .team-photo{max-height:280px}

  /* Support */
  .support-cards{grid-template-columns:1fr !important}
}

/* ── 480px: mobile phones ── */
@media(max-width:480px){
  .container{padding:0 16px}

  /* Header */
  .logo-box img{height:22px}
  .logo-box{padding:5px 9px}

  /* Hero — show image again on mobile but smaller */
  .hero{padding:28px 0 24px}
  .hero-right{display:block}
  .hero-left h1{font-size:34px;letter-spacing:-.8px}
  .hero-left p{font-size:16px}
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns .btn{width:100%;justify-content:center}
  .hero-right img{border-radius:0}

  /* Stats */
  .stats-row{grid-template-columns:1fr 1fr}
  .stat strong{font-size:16px}
  .stat span{font-size:12px}

  /* Sections */
  .sec{padding:44px 0}
  .sec-h{font-size:24px}

  /* Marquee */
  .marquee-section{padding:20px 0}
.marquee-track-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 80px,black calc(100% - 80px),transparent);mask-image:linear-gradient(to right,transparent,black 80px,black calc(100% - 80px),transparent)}
.marquee-track{display:inline-flex;align-items:center;gap:60px;animation:marquee-scroll 30s linear infinite;white-space:nowrap;padding:8px 0}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .marquee-label{font-size:13px;margin-bottom:18px}

  /* Besparing */
  .besparing-sec{padding:44px 0;background:var(--white)}
  .besparing-header h2{font-size:22px}
  .bs-card{padding:20px}
  .bs-chips{gap:8px}
  .bs-chip{font-size:13px;padding:8px 12px}
  .bs-result-amount{font-size:52px}
  .bs-result-stats{grid-template-columns:1fr}
  .bs-result-badges{flex-direction:column;align-items:center;gap:8px}

  /* Voordeel */
  .voordeel-text h2{font-size:24px}
  .vc-item{font-size:15px}
  .voordeel-img{display:block}

  /* Features */
  .feat-text strong{font-size:17px}
  .feat-text p{font-size:15px}

  /* Dashboard */
  .dash-text h2{font-size:22px}

  /* Pricing */
  .pricing-grid{max-width:100%}
  .p-card{padding:24px}

  /* Quote */
  .q-text{font-size:17px}

  /* Meer weten box */
  .meer-box{padding:20px}
  .meer-btns{flex-direction:column}
  .meer-btns .btn{width:100%;justify-content:center}

  /* FAQ */
  .faq-q{font-size:14px;padding:15px 16px}

  /* Team */
  .team-grid{grid-template-columns:1fr 1fr}
  .t-card{padding:18px}
  .t-card img{width:80px;height:80px}

  /* Advies/form */
  .form-card{padding:24px}
  .advies-page{padding:44px 0 56px}

  /* Support */
  .support-cards{grid-template-columns:1fr !important}
  .support-card{padding:22px}

  /* Over ons */
  .kw-grid{grid-template-columns:1fr !important}
  .co2-box{padding:32px 20px}

  /* Footer */
  .f-grid{grid-template-columns:1fr}
  .footer{padding:40px 0 20px}

  /* Sol hero */
  .sol-hero{padding:44px 0 36px}
  .sol-hero-text h1{font-size:30px}
  .sol-hero-img{display:block}

  /* Buttons full width in CTAs */
  .hero-btns .btn,.sol-btns .btn{font-size:15px}
  .newsletter .btn{width:100%;justify-content:center}
}

/* ── 360px: small phones ── */
@media(max-width:360px){
  .hero-left h1{font-size:30px}
  .stats-row{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .bs-result-stats{grid-template-columns:1fr}
}


/* ═══ ARTIKEL DETAIL PAGES ═══ */
.art-hero{background:#142952;padding:0;position:relative;overflow:hidden}
.art-hero-img{width:100%;height:340px;object-fit:cover;display:block;opacity:.55}
.art-hero-img.contain{object-fit:contain;background:#142952;padding:60px;opacity:1}
.art-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,27,46,.95) 40%,rgba(26,27,46,.3) 100%)}
.art-hero-content{position:absolute;bottom:0;left:0;right:0;padding:40px}
.art-hero-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(245,197,24,.8);display:block;margin-bottom:10px}
.art-hero h1{font-size:clamp(22px,3.5vw,36px);font-weight:900;color:#fff;letter-spacing:-.8px;line-height:1.15;margin-bottom:12px;max-width:720px}
.art-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.art-meta-item{font-size:13px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:6px}
.art-body-wrap{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;max-width:1080px;margin:0 auto;padding:56px 32px 80px}
.art-body{min-width:0}
.art-body h2{font-size:22px;font-weight:800;color:var(--n);letter-spacing:-.4px;margin:32px 0 12px;line-height:1.25}
.art-body h3{font-size:17px;font-weight:800;color:var(--n);letter-spacing:-.2px;margin:24px 0 10px}
.art-body p{font-size:16px;color:var(--n-mid);line-height:1.8;margin-bottom:16px}
.art-body ul,.art-body ol{padding-left:24px;margin:12px 0 20px;display:flex;flex-direction:column;gap:9px}
.art-body li{font-size:16px;color:var(--n-mid);line-height:1.7}
.art-body blockquote{border-left:4px solid var(--y);padding:18px 24px;background:var(--y-bg);border-radius:0 14px 14px 0;margin:28px 0;font-size:16px;font-style:italic;color:var(--n);line-height:1.75}
.art-body blockquote cite{display:block;margin-top:10px;font-size:13px;font-style:normal;font-weight:700;color:var(--n-light)}
.art-body .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.art-stat-box{background:var(--y-bg);border:1.5px solid var(--y-bdr);border-radius:14px;padding:20px;text-align:center}
.art-stat-num{font-size:32px;font-weight:900;color:var(--n);letter-spacing:-1px;line-height:1}
.art-stat-lbl{font-size:12px;color:var(--n-mid);margin-top:5px;font-weight:600}
.art-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;border-radius:12px;overflow:hidden}
.art-body th{background:#142952;color:#fff;padding:12px 16px;text-align:left;font-weight:700}
.art-body td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--n-mid)}
.art-body tr:nth-child(even) td{background:var(--bg)}
.art-sidebar{position:sticky;top:100px}
.art-sidebar-card{background:var(--white);border:1.5px solid var(--border);border-radius:20px;padding:28px;margin-bottom:20px}
.art-sidebar-card h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--n-light);margin-bottom:16px}
.art-related-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .15s}
.art-related-item:last-child{border-bottom:none}
.art-related-item:hover{opacity:.75}
.art-related-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg)}
.art-related-title{font-size:13px;font-weight:700;color:var(--n);line-height:1.4}
.art-related-cat{font-size:11px;color:var(--n-light);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.art-back-bar{background:var(--white);border-bottom:1px solid var(--border);padding:14px 0}
.art-back-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--n-mid);background:none;border:none;cursor:pointer;padding:0;transition:color .15s}
.art-back-btn:hover{color:var(--n)}
@media(max-width:900px){.art-body-wrap{grid-template-columns:1fr;padding:32px 20px 60px}.art-sidebar{position:static}.art-hero-img{height:240px}.art-hero-img.contain{height:200px;padding:32px}}
@media(max-width:640px){.art-hero-content{padding:24px}.art-hero h1{font-size:22px}.art-body h2{font-size:18px}.art-body .stat-row{grid-template-columns:1fr 1fr}}
/* ═══ BLOG ═══ */
.blog-hero{background:var(--bg);padding:64px 0 48px}
.blog-hero h1{font-size:clamp(28px,4vw,48px);font-weight:800;color:var(--n);letter-spacing:-1px;margin-bottom:12px}
.blog-hero p{font-size:17px;color:var(--n-mid);max-width:560px;line-height:1.65}

.blog-filters{background:var(--white);border-bottom:1px solid var(--border);padding:0;position:sticky;top:80px;z-index:100}
.blog-filter-inner{display:flex;gap:4px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.blog-filter-inner::-webkit-scrollbar{display:none}
.bf-btn{padding:8px 18px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--white);font-family:var(--fb);font-size:14px;font-weight:600;color:var(--n-mid);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.bf-btn:hover{border-color:var(--y);background:var(--y-bg);color:var(--n)}
.bf-btn.active{background:#142952;border-color:var(--n);color:var(--white)}

.blog-grid-sec{background:var(--bg);padding:56px 0 80px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.blog-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rx);overflow:hidden;display:flex;flex-direction:column;transition:all .2s;cursor:pointer}
.blog-card:hover{border-color:var(--y);box-shadow:var(--s3);transform:translateY(-4px)}
.blog-card.featured{grid-column:span 2}
.blog-card-img{width:100%;height:200px;object-fit:cover;display:block}
.blog-card.featured .blog-card-img{height:260px}
.blog-card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-cat-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;width:fit-content}
.cat-ov{background:#EEF6FF;color:#1D6FAD}
.cat-deelvervoer{background:#F0FDF4;color:#166534}
.cat-admin{background:#FFF7ED;color:#9A3412}
.cat-travelcard{background:#FAF5FF;color:#6B21A8}
.cat-klant{background:#FFF9E3;color:#92400E}
.cat-beleid{background:#F0F9FF;color:#075985}
.blog-card-title{font-size:17px;font-weight:800;color:var(--n);line-height:1.3;letter-spacing:-.3px}
.blog-card.featured .blog-card-title{font-size:21px}
.blog-card-excerpt{font-size:14px;color:var(--n-mid);line-height:1.65;flex:1}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border);margin-top:4px}
.blog-card-date{font-size:12px;color:var(--n-light)}
.blog-read-more{font-size:13px;font-weight:700;color:var(--y-dark);display:flex;align-items:center;gap:4px}

/* SEO: structured content below blog grid */
.blog-seo-sec{background:var(--white);padding:64px 0;border-top:1px solid var(--border)}
.blog-seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.blog-seo h2{font-size:clamp(20px,2.5vw,28px);font-weight:800;color:var(--n);margin-bottom:16px;letter-spacing:-.3px}
.blog-seo p{font-size:15px;color:var(--n-mid);line-height:1.75;margin-bottom:12px}
.blog-tag-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.blog-tag{padding:6px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--n-mid);cursor:pointer;transition:all .15s}
.blog-tag:hover{border-color:var(--y);background:var(--y-bg);color:var(--n)}

@media(max-width:960px){.blog-grid{grid-template-columns:1fr 1fr}.blog-card.featured{grid-column:span 2}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-card.featured{grid-column:span 1}.blog-seo-grid{grid-template-columns:1fr}}

/* ═══ LEAD GEN ELEMENTS ═══ */

/* Sticky bottom CTA bar (mobile) */
.sticky-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:var(--white);border-top:1px solid var(--border);
  padding:12px 20px;box-shadow:0 -4px 20px rgba(26,27,46,.1);
}
.sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:480px;margin:0 auto}
.sticky-cta p{font-size:13px;font-weight:600;color:var(--n);line-height:1.3}
.sticky-cta p span{display:block;font-size:11px;color:var(--n-light);font-weight:400}
@media(max-width:768px){.sticky-cta{display:block}}

/* Social proof bar */
.social-proof-bar{background:#142952;padding:10px 0;text-align:center}
.sp-inner{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.sp-item{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.75);font-weight:500}
.sp-item strong{color:var(--y);font-weight:800}

/* Exit intent popup */
.exit-overlay{position:fixed;inset:0;background:rgba(26,27,46,.6);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.exit-overlay.show{opacity:1;pointer-events:auto}
.exit-popup{background:var(--white);border-radius:var(--rx);padding:40px;max-width:480px;width:100%;position:relative;transform:translateY(20px);transition:transform .25s}
.exit-overlay.show .exit-popup{transform:translateY(0)}
.exit-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--n-light);line-height:1}
.exit-close:hover{color:var(--n)}
.exit-popup h3{font-size:22px;font-weight:800;color:var(--n);margin-bottom:10px;letter-spacing:-.3px}
.exit-popup p{font-size:15px;color:var(--n-mid);line-height:1.65;margin-bottom:20px}
.exit-form{display:flex;gap:10px}
.exit-form input{flex:1;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r);font-family:var(--fb);font-size:14px;outline:none;background:var(--bg)}
.exit-form input:focus{border-color:var(--y)}
.exit-note{font-size:12px;color:var(--n-light);margin-top:8px}

/* Inline lead magnet (CO2 cheatsheet / whitepaper) */
.lead-magnet{background:linear-gradient(135deg,var(--n) 0%,var(--n2) 100%);border-radius:var(--rx);padding:36px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;position:relative;overflow:hidden;margin:40px 0}
.lead-magnet::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:rgba(245,197,24,.08);border-radius:50%}
.lead-magnet h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.3px}
.lead-magnet p{font-size:14px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:16px}
.lead-magnet .lm-bullets{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.lead-magnet .lm-bullet{font-size:13px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:7px}
.lead-magnet .lm-bullet::before{content:'✓';color:var(--y);font-weight:800;flex-shrink:0}
.lead-magnet-img{font-size:72px;flex-shrink:0;opacity:.9}
@media(max-width:640px){.lead-magnet{grid-template-columns:1fr}.lead-magnet-img{display:none}}

/* Conversion banner between sections */
.conv-banner{background:var(--y-bg);border:1.5px solid var(--y-bdr);border-radius:var(--rx);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 48px}
.conv-banner p{font-size:16px;font-weight:700;color:var(--n);line-height:1.4}
.conv-banner p span{display:block;font-size:14px;font-weight:400;color:var(--n-mid)}
@media(max-width:640px){.conv-banner{flex-direction:column;align-items:flex-start}}

/* ═══ SUPPORT ENHANCED ═══ */
.support-hero{background:var(--bg);padding:64px 0 52px}
.support-search-wrap{max-width:560px;margin:28px 0 0;position:relative}
.support-search{width:100%;padding:16px 20px 16px 48px;border:2px solid var(--border);border-radius:var(--r-pill);font-family:var(--fb);font-size:15px;background:var(--white);outline:none;transition:border-color .15s}
.support-search:focus{border-color:var(--y)}
.support-search-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;pointer-events:none}
.support-cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:52px}
.support-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.support-faq-sec{background:var(--white);padding:64px 0}
.support-status{background:var(--bg);padding:48px 0;border-top:1px solid var(--border)}

@media(max-width:768px){.support-cards-4{grid-template-columns:repeat(2,1fr)}.support-cards-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.support-cards-4{grid-template-columns:1fr}.support-cards-3{grid-template-columns:1fr}}

/* ═══ MARQUEE CARROUSEL ═══ */
.marquee-section {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
  overflow: hidden;
}
.marquee-label {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--n-mid);
  margin-bottom: 20px;
}
.marquee-track-wrap {
  overflow: hidden;
  position: relative;
}
.marquee-track-wrap::before,
.marquee-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.marquee-track-wrap::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
.marquee-track-wrap::after  { right: 0; background: linear-gradient(to left, var(--white), transparent); }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track img {
  height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: none;
  opacity: 1;
  transition: transform .2s, opacity .2s;
}
.marquee-track img:hover { transform: scale(1.08); }
.marquee-track img[alt="Temper"]      { height: 28px; }
.marquee-track img[alt="Lindt"]       { height: 52px; }
.marquee-track img[alt="Fixico"]      { height: 32px; }
.marquee-track img[alt="Budbee"]      { height: 32px; }
.marquee-track img[alt="Vattenfall"]  { height: 36px; }
.marquee-track img[alt="Adyen"]       { height: 32px; }
.marquee-track img[alt="Aethon"]      { height: 44px; }
.marquee-track img[alt="YoungCapital"]{ height: 44px; }
.marquee-track img[alt="Meltwater"]   { height: 30px; }
.marquee-track img[alt="Booking.com"] { height: 36px; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ═══ BESPARINGSMODULE ═══ */
.besparing-sec { background: var(--white); padding: 72px 0; }
.besparing-inner { max-width: 720px; margin: 0 auto; }

/* Header */
.besparing-header { text-align: center; margin-bottom: 36px; }
.tool-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--y-bg); border: 1px solid var(--y-bdr);
  border-radius: var(--r-pill); padding: 5px 14px;
  font-size: 12px; font-weight: 700; color: #8C5A00; margin-bottom: 14px;
}
.besparing-header h2 { font-size: clamp(22px,3vw,32px); font-weight: 800; color: var(--n); letter-spacing: -.5px; margin-bottom: 10px; }
.besparing-header p { font-size: 16px; color: var(--n-mid); }

/* Steps indicator */
.bs-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 32px;
}
.bs-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bs-step-num {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--n-light);
  transition: all .25s; flex-shrink: 0;
}
.bs-step.active .bs-step-num { background: var(--y); border-color: var(--y); color: var(--n); }
.bs-step.done .bs-step-num { background: var(--n); border-color: var(--n); color: #fff; font-size: 13px; }
.bs-step-label { font-size: 11px; font-weight: 600; color: var(--n-light); white-space: nowrap; }
.bs-step.active .bs-step-label, .bs-step.done .bs-step-label { color: var(--n); font-weight: 700; }
.bs-line { width: 56px; height: 2px; background: var(--border); margin: 0 4px 22px; transition: background .25s; flex-shrink: 0; }
.bs-line.done { background: var(--n); }

/* Card */
.bs-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--rx); padding: 32px;
}
.bs-card h3 { font-size: 18px; font-weight: 800; color: var(--n); margin-bottom: 6px; }
.bs-card > p { font-size: 14px; color: var(--n-mid); margin-bottom: 24px; }

/* Slider */
.bs-slider-wrap { margin-bottom: 24px; }
.bs-slider-label {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.bs-slider-label span { font-size: 14px; font-weight: 600; color: var(--n); }
.bs-slider-val { font-size: 20px; font-weight: 800; color: var(--n); }

.bs-slider-ticks {
  display: flex; justify-content: space-between; margin-top: 8px;
}
.bs-slider-ticks span { font-size: 11px; color: var(--n-light); }

/* Chips */
.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bs-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; background: var(--white);
  border: 1.5px solid var(--border); border-radius: var(--r);
  font-size: 14px; font-weight: 500; color: var(--n-mid);
  cursor: pointer; transition: all .15s; user-select: none;
  font-family: var(--fb);
}
.bs-chip:hover { border-color: var(--y); background: var(--y-bg); color: var(--n); }
.bs-chip.sel { background: var(--y-bg); border-color: var(--y); color: var(--n); font-weight: 600; }

/* Amount input */
.bs-amount-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bs-amount-pre { font-size: 22px; font-weight: 800; color: var(--n); }
.bs-amount-input {
  width: 160px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r);
  font-family: var(--fb); font-size: 18px; font-weight: 700; color: var(--n);
  background: var(--white); outline: none; transition: border-color .15s;
}
.bs-amount-input:focus { border-color: var(--y); }

/* Nav */
.bs-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.bs-back {
  background: none; border: none; font-family: var(--fb);
  font-size: 14px; font-weight: 600; color: var(--n-mid); cursor: pointer; padding: 0;
}
.bs-back:hover { color: var(--n); }

/* Result */
.bs-result { text-align: center; }
.bs-result-amount {
  font-size: clamp(48px,8vw,80px); font-weight: 800;
  color: var(--n); letter-spacing: -3px; line-height: 1;
  margin: 14px 0 4px; font-family: var(--fh);
}
.bs-result-sub { font-size: 14px; color: var(--n-mid); margin-bottom: 32px; }
.bs-result-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 28px;
}
.bs-result-stat {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--rl); padding: 18px;
}
.bs-result-stat strong { display: block; font-size: 22px; font-weight: 800; color: var(--y-dark); margin-bottom: 4px; }
.bs-result-stat span { font-size: 12px; color: var(--n-mid); }
.bs-result-badges { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.bs-badge { font-size: 13px; color: var(--n-mid); display: flex; align-items: center; gap: 5px; }
.bs-reset {
  background: none; border: none; font-size: 13px; color: var(--n-light);
  cursor: pointer; margin-top: 14px; font-family: var(--fb); text-decoration: underline; display: block; margin-left: auto; margin-right: auto;
}
.bs-reset:hover { color: var(--n); }

/* Section label */
.bs-section-label {
  font-size: 13px; font-weight: 700; color: var(--n);
  margin-bottom: 10px; display: block;
}
.bs-section-label span { font-weight: 400; color: var(--n-light); }

@media(max-width:640px){
  .bs-steps { gap: 0; }
  .bs-line { width: 24px; }
  .bs-step-label { font-size: 9px; }
  .bs-result-stats { grid-template-columns: 1fr; }
  .bs-result-badges { flex-direction: column; align-items: center; gap: 8px; }
  .bs-card { padding: 22px; }
  .bs-chips { gap: 6px; }
  .bs-chip { font-size: 13px; padding: 8px 12px; }
}


/* ═══ PRICING PAGE ═══ */
.pricing-page-hero { background: var(--bg); padding: 64px 0 52px; }
.pricing-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 48px; }
.pricing-toggle-label { font-size: 14px; font-weight: 600; color: var(--n-mid); }
.pricing-toggle-label.active { color: var(--n); }
.pricing-toggle { position: relative; width: 48px; height: 26px; }
.pricing-toggle input { opacity: 0; width: 0; height: 0; }
.pricing-toggle-slider {
  position: absolute; inset: 0; background: var(--border); border-radius: 999px;
  cursor: pointer; transition: background .2s;
}
.pricing-toggle-slider::before {
  content: ''; position: absolute; width: 20px; height: 20px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.pricing-toggle input:checked + .pricing-toggle-slider { background: var(--n); }
.pricing-toggle input:checked + .pricing-toggle-slider::before { transform: translateX(22px); }
.pricing-save-badge { background: var(--y-bg); border: 1px solid var(--y-bdr); border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; font-weight: 700; color: #8C5A00; }

.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto 56px; }

.pricing-card {
  background: var(--white); border: 2px solid var(--border);
  border-radius: var(--rx); padding: 36px;
  display: flex; flex-direction: column; position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.pricing-card:hover { border-color: var(--y-bdr); box-shadow: var(--s2); }
.pricing-card.featured {
  background: var(--n); border-color: var(--y);
  box-shadow: 0 0 0 3px rgba(245,197,24,.18), var(--s3);
}
.pricing-popular {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--y); color: var(--n);
  font-size: 11px; font-weight: 800; padding: 4px 18px;
  border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap; font-family: var(--fb);
}
.pricing-card-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--n-light); margin-bottom: 8px; }
.pricing-card.featured .pricing-card-name { color: rgba(255,255,255,.5); }
.pricing-card-price { font-size: 44px; font-weight: 800; color: var(--n); letter-spacing: -2px; line-height: 1; margin-bottom: 4px; font-family: var(--fh); }
.pricing-card.featured .pricing-card-price { color: var(--white); }
.pricing-card-price span { font-size: 18px; font-weight: 500; letter-spacing: 0; }
.pricing-card-billing { font-size: 13px; color: var(--n-light); margin-bottom: 20px; }
.pricing-card.featured .pricing-card-billing { color: rgba(255,255,255,.4); }
.pricing-card-desc { font-size: 14px; color: var(--n-mid); line-height: 1.6; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.pricing-card.featured .pricing-card-desc { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.1); }
.pricing-card-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; flex: 1; }
.pricing-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--n); font-weight: 500; }
.pricing-card.featured .pricing-feature { color: rgba(255,255,255,.88); }
.pricing-feat-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--y); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 1px; color: var(--n); font-weight: 800; }
.pricing-feat-ico.grey { background: var(--border); color: var(--n-light); }

/* Add-ons */
.pricing-addons { max-width: 900px; margin: 0 auto 56px; }
.pricing-addons h3 { font-size: 20px; font-weight: 800; color: var(--n); margin-bottom: 20px; letter-spacing: -.3px; }
.pricing-addons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pricing-addon {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--rl); padding: 20px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: all .18s;
}
.pricing-addon:hover { border-color: var(--y); background: var(--y-bg); }
.pricing-addon-ico { font-size: 22px; flex-shrink: 0; }
.pricing-addon-name { font-size: 14px; font-weight: 700; color: var(--n); margin-bottom: 3px; }
.pricing-addon-desc { font-size: 13px; color: var(--n-mid); line-height: 1.5; }

/* FAQ pricing */
.pricing-faq { max-width: 720px; margin: 0 auto; }

/* Comparison table */
.compare-table { width: 100%; border-collapse: collapse; max-width: 900px; margin: 0 auto 24px; }
.compare-table th, .compare-table td { padding: 14px 20px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
.compare-table th { font-weight: 700; color: var(--n); background: var(--bg); font-size: 13px; }
.compare-table td:first-child { color: var(--n-mid); }
.compare-table td:not(:first-child) { text-align: center; font-weight: 600; color: var(--n); }
.compare-table tr:hover td { background: var(--y-bg); }
.check-y { color: #16A34A; font-size: 16px; }
.check-n { color: var(--border2); font-size: 16px; }

@media(max-width:760px) {
  .pricing-cards { grid-template-columns: 1fr; max-width: 440px; }
  .pricing-addons-grid { grid-template-columns: 1fr 1fr; }
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
}
@media(max-width:480px) { .pricing-addons-grid { grid-template-columns: 1fr; } }


/* ═══ DEMO PAGE ═══ */
.demo-tab {
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); background: var(--white);
  font-family: var(--fb); font-size: 14px; font-weight: 600;
  color: var(--n-mid); cursor: pointer; white-space: nowrap;
  transition: all .15s; flex-shrink: 0;
}
.demo-tab:hover { border-color: var(--y); background: var(--y-bg); color: var(--n); }
.demo-tab.active { background: var(--n); border-color: var(--n); color: var(--white); }


.exit-goal-btn:hover {
  border-color: var(--y) !important;
  background: var(--y-bg) !important;
  transform: translateX(4px);
}





/* ═══ DASHBOARD DEMO ═══ */
.dash-nav-item { transition: all .15s; }
.dash-nav-item:hover { background: var(--y-bg) !important; color: var(--n) !important; }


/* Actieve pagina: geen permanent achtergrondvlak (blijft wit), alleen vet.
   Hover-kleur komt van de algemene hover-regel. */
.nav-a.nav-active, .nav-btn.nav-active {
  background: none;
  color: var(--n) !important;
  font-weight: 700 !important;
}
.nav-a.nav-active:hover, .nav-btn.nav-active:hover {
  background: rgba(20,41,82,.08);
}


/* ── SLIDER — volledig herschreven ── */
.bs-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  /* gradient wordt via JS gezet — fallback: */
  background: linear-gradient(to right, #F5C518 8.16%, #EDE7C8 8.16%);
}
.bs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F5C518;
  border: 2.5px solid #1A1B2E;
  box-shadow: 0 2px 8px rgba(26,27,46,.2);
  cursor: pointer;
  transition: transform .1s;
}
.bs-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.bs-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #F5C518; border: 2.5px solid #1A1B2E;
  cursor: pointer;
}


/* ── Range slider input styling ── */
.bs-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right, #F5C518 8.16%, #EDE7C8 8.16%);
  transition: background 0s;
}
.bs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F5C518;
  border: 2.5px solid #1A1B2E;
  box-shadow: 0 2px 8px rgba(26,27,46,.2);
  cursor: pointer;
}
.bs-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.bs-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #F5C518; border: 2.5px solid #1A1B2E;
  cursor: pointer;
}


/* ═══ READABILITY & SPACING ═══ */
.page p + p { margin-top: 14px; }
.page h2 + p, .page h3 + p { margin-top: 10px; }
.page p + ul, .page p + ol { margin-top: 10px; }

/* Ensure sufficient line-height on all body text */
.page p, .page li { line-height: 1.7; }

/* Ensure headings have breathing room below */
.page h1 { margin-bottom: 16px; }
.page h2 { margin-bottom: 12px; }
.page h3 { margin-bottom: 8px; }

/* Fix low-contrast text: gray-on-light-gray must have ratio ≥ 4.5:1 */
/* var(--n-light) on var(--bg) — acceptable, but boost slightly */
.page .hero-trust p { color: var(--n); }


/* Scroll indicator in hero */
.scroll-hint {
  display: flex;
  justify-content: center;
  padding: 12px 0 0;
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-hint span {
  font-size: 20px;
  color: var(--n-light);
  opacity: .5;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
/* Hero grid: slightly more compact to allow carousel peek */
.hero-grid {
  min-height: unset;
}


/* Remove gap between hero and marquee */
.hero + .marquee-section { margin-top: 0; }
.marquee-section { margin-top: 0 !important; }


/* ── Carousel visible below hero ── */
.hero {
  max-height: calc(100vh - 80px - 110px); /* leave 110px for carousel */
  box-sizing: border-box;
}
/* On very small screens, let it grow freely */
@media(max-height:700px) {
  .hero { max-height: none; }
}
/* Hero grid: both columns centered vertically */
.hero-grid {
  align-items: center;
}
/* Marquee always flush against hero */
.marquee-section {
  margin-top: 0 !important;
  border-top: 1px solid var(--border);
}


@media(max-width:960px) {
  .demo-layout-grid { grid-template-columns: 1fr !important; }
}

/* ══ MOBILE: Override ALL inline grid styles ══ */
@media(max-width: 768px) {
  /* Any element with inline grid gets single column */
  [style*="grid-template-columns:repeat(2"] ,
  [style*="grid-template-columns:repeat(3"] ,
  [style*="grid-template-columns:repeat(4"] ,
  [style*="grid-template-columns: repeat(2"] ,
  [style*="grid-template-columns: repeat(3"] ,
  [style*="grid-template-columns: repeat(4"] ,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns: 1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  /* Step layouts keep their icon column */
  [style*="grid-template-columns:64px 1fr"],
  [style*="grid-template-columns: 64px 1fr"],
  [style*="grid-template-columns:72px 1fr"],
  [style*="grid-template-columns:56px 1fr"],
  [style*="grid-template-columns:60px 1fr"] {
    grid-template-columns: 48px 1fr !important;
  }

  /* Hero with image column collapses */
  [style*="grid-template-columns:1fr 1fr;gap:60px"],
  [style*="grid-template-columns:1fr 1fr; gap:60px"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Ensure all containers respect viewport */
  .container, [class*="container"] {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* Prevent horizontal scroll from wide elements */
  body { overflow-x: hidden; }

  /* Tables in dashboard become scrollable */
  .dash-table, table {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }

  /* Filter bar scrolls horizontally */
  [style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Hero trust checkmarks stack */
  .hero-trust { flex-direction: column !important; gap: 8px !important; }
  
  /* Blog filter buttons smaller */
  .bf-btn { 
    font-size: 12px !important; 
    padding: 8px 12px !important;
    white-space: nowrap;
  }

  /* Demo layout: form below dashboard */
  [style*="grid-template-columns:1fr 360px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="position:sticky;top:100px"] {
    position: static !important;
  }

  /* Comparison tables in pricing */
  [style*="grid-template-columns:1fr 1fr;gap:24px"],
  [style*="grid-template-columns:1fr 1fr; gap:24px"] {
    grid-template-columns: 1fr !important;
  }
  
  /* ICP hero sidecards hide */
  [style*="min-width:220px;flex-shrink:0"] {
    min-width: auto !important;
    width: 100% !important;
  }

  /* Stat rows in ICP pages */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media(max-width: 480px) {
  /* Everything single column below 480px */
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex rows stack vertically */
  .hero-ctas,
  [style*="display:flex;gap:14px;flex-wrap:wrap"],
  [style*="display:flex;gap:12px;flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-ctas .btn,
  [style*="display:flex;gap:14px;flex-wrap:wrap"] .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Price card full width */
  [style*="max-width:400px"] { max-width: 100% !important; }
  [style*="max-width:480px"] { max-width: 100% !important; }
  [style*="max-width:520px"] { max-width: 100% !important; }
  [style*="max-width:560px"] { max-width: 100% !important; }
  [style*="max-width:640px"] { max-width: 100% !important; }
  [style*="max-width:720px"] { max-width: 100% !important; }
  [style*="max-width:860px"] { max-width: 100% !important; }
  [style*="max-width:900px"] { max-width: 100% !important; }

  /* Font sizes */
  [style*="font-size:22px"] { font-size: 18px !important; }
  [style*="font-size:24px"] { font-size: 20px !important; }

  /* Padding reductions */
  [style*="padding:40px 48px"] { padding: 24px 20px !important; }
  [style*="padding:44px 40px"] { padding: 24px 20px !important; }
  [style*="padding:36px 40px"] { padding: 24px 20px !important; }
  [style*="padding:48px"] { padding: 28px !important; }
  [style*="padding:44px"] { padding: 24px !important; }
  [style*="padding:40px"] { padding: 24px !important; }
  [style*="padding:32px 36px"] { padding: 20px !important; }
  
  /* Hide complex decorative elements on mobile */
  [style*="position:absolute"][style*="pointer-events:none"][style*="width:400px"] { display: none !important; }
  [style*="position:absolute"][style*="pointer-events:none"][style*="width:500px"] { display: none !important; }
  [style*="position:absolute"][style*="pointer-events:none"][style*="width:600px"] { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   MOBILE FIRST — Complete responsive overhaul
   Breakpoints: 480px (phone), 768px (tablet), 1024px (desktop)
═══════════════════════════════════════════════════ */

/* ── Global mobile resets ── */
@media(max-width:768px) {
  .container { padding: 0 16px; }
  section { padding: 52px 0; }
  h1 { word-break: break-word; }

  /* Header */
  header .container { padding: 0 16px; }

  /* Hero grid → single column */
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* hero-right visible on mobile too via responsive image */
  .hero { padding: 48px 0 0 !important; max-height: none !important; }
  .hero h1 { font-size: clamp(28px, 8vw, 44px) !important; }
  .hero-btns { flex-direction: column; align-items: flex-start; }
  .hero-btns .btn { width: 100%; justify-content: center; }

  /* Navigation mobile */
  .main { display: none; }
  .hamburger { display: flex !important; }

  /* Marquee */
  .marquee-label { font-size: 12px !important; }
  .marquee-track { gap: 28px !important; }
  .marquee-track img { height: 20px !important; }

  /* Besparings module */
  .besparing-inner { padding: 0 !important; }
  .bs-steps { flex-direction: column !important; gap: 0 !important; }
  .bs-steps-line { display: none !important; }
  .bs-card { padding: 20px !important; }
  .bs-chip-group { gap: 6px !important; }
  .bs-chip { font-size: 13px !important; padding: 8px 12px !important; }
  .bs-result-grid { grid-template-columns: 1fr !important; }

  /* Grids → single column */
  .kw-grid, .oo-grid, .mv-grid { grid-template-columns: 1fr !important; }
  .demo-layout-grid { grid-template-columns: 1fr !important; }
  #demo-lead-form { position: static !important; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-toggle { flex-wrap: wrap; gap: 8px; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-card.featured { grid-column: span 1 !important; }

  /* Footer */
  .f-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .f-brand { text-align: center; }
  .f-apps { justify-content: center; }
  .f-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .f-legal { justify-content: center !important; flex-wrap: wrap; }

  /* Sticky CTA */
  .sticky-cta-inner { flex-direction: column !important; gap: 10px !important; text-align: center !important; }
  .sticky-cta-inner .btn { width: 100%; justify-content: center; }

  /* Demo page */
  #figo-dashboard { min-height: 400px !important; }
  #dash-sidebar { width: 160px !important; }
  .dash-nav-item span:first-child { display: none; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; }
  .dash-th, .dash-tr { grid-template-columns: 1fr 80px !important; }
  .dash-th span:nth-child(3), .dash-tr span:nth-child(3) { display: none !important; }

  /* ICP pages */
  .step { grid-template-columns: 48px 1fr !important; gap: 14px !important; }

  /* Support */
  .support-grid { grid-template-columns: 1fr !important; }

  /* Buttons */
  .btn { padding: 12px 20px !important; }
  .btn-y, .btn-o { min-height: 48px; }

  /* Exit popup */
  .exit-popup { padding: 0 !important; margin: 16px !important; max-width: calc(100vw - 32px) !important; }
  .exit-popup > div:last-child { padding: 20px !important; }

  /* Demo gate */
  #demo-gate-overlay > div { padding: 32px 24px !important; }

  /* Overview/besparing section */
  .voordeel-grid { grid-template-columns: 1fr !important; }

  /* Stats bar */
  .stats-bar { gap: 24px !important; flex-wrap: wrap !important; }
  .stat-item { flex: 1 1 40% !important; text-align: center !important; }

  /* Sol-hero */
  .sol-hero .container { flex-direction: column !important; }
  .sol-hero-img { display: none !important; }

  /* Over ons */
  .team-grid { grid-template-columns: 1fr 1fr !important; }

  /* FAQ accordion full width */
  .faq-a { font-size: 14px !important; }
}

@media(max-width:480px) {
  .container { padding: 0 14px; }
  section { padding: 44px 0; }

  /* Nav CTA */
  .h-cta { padding: 10px 16px !important; font-size: 13px !important; }

  /* Hero */
  .hero { padding: 36px 0 0 !important; }
  .hero-trust { flex-direction: column; gap: 6px; }

  /* Besparing wizard */
  .bsparing-sec { padding: 44px 0 !important; }
  .bs-result-bar { flex-direction: column !important; align-items: flex-start !important; }

  /* Pricing cards */
  .pricing-card { padding: 24px 20px !important; }
  .pricing-features li { font-size: 13px !important; }

  /* Blog filter bar scroll */
  .bf-btn { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap; }

  /* Team grid */
  .team-grid { grid-template-columns: 1fr !important; }

  /* Demo gate */
  #demo-gate-overlay > div { padding: 24px 20px !important; }
  #demo-gate-overlay h2 { font-size: 20px !important; }

  /* Marquee */
  .marquee-section { padding: 20px 0 !important; }

  /* Comparison table (waarom-vs): remove 40px separator, use equal 2 cols */
  .waarom-vs [style*="grid-template-columns:1fr 40px 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .waarom-vs [style*="grid-template-columns:1fr 40px 1fr"] > div:nth-child(2) {
    display: none !important;
  }
  .waarom-vs [style*="font-size:14px"] {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Step grids: hide horizontal connector line, add gap between stacked cards */
  .ww-line { display: none !important; }
  .kwit-grid { gap: 16px !important; }
}

/* ── Touch-friendly tap targets ── */
@media(max-width:768px) {
  button, .btn, a.nav-a, .drop-item, .mob-a, .faq-q, .bf-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .faq-q { padding: 16px 0; }
  .bf-btn { justify-content: center; }
}

/* ── Mobile nav ── */
@media(max-width:768px) {
  .mob-nav { max-height: 85vh !important; overflow-y: auto !important; }
  .mob-nav::-webkit-scrollbar { width: 4px; }
  .mob-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }
}

/* ── Mobile: hide savings calculator step indicator ── */
@media(max-width:768px) {
  #bs-steps, #bsen-steps, #bsp-steps, #bsd-steps { display: none !important; }
}

/* ── Mobile: stats strip 2×2 grid ── */
@media(max-width:768px) {
  .ww-stats {
    grid-template-columns: 1fr 1fr !important;
    padding: 24px 20px !important;
    gap: 20px !important;
    align-items: start !important;
  }
  .ww-stats > div:nth-child(2n) { display: none !important; }
  .ww-stats > div:last-child {
    grid-column: 1 / -1 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .ww-stats > div:last-child .btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
}

/* ── Mobile: hide white sticky-cta — demo-sticky-bar handles mobile ── */
@media(max-width:768px) {
  .sticky-cta { display: none !important; }
}

  /* Additional styles */
  @keyframes spin{to{transform:rotate(360deg)}}
    .hs-form fieldset{max-width:100%!important}
    .hs-form input[type="text"],.hs-form input[type="email"],.hs-form input[type="tel"],.hs-form select,.hs-form textarea{width:100%!important;padding:11px 14px!important;border:1.5px solid #E5E5E2!important;border-radius:8px!important;font-family:var(--fb)!important;font-size:14px!important;background:#F7F7F5!important;color:#1A1B2E!important;outline:none!important;box-sizing:border-box!important}
    .hs-form input:focus,.hs-form select:focus,.hs-form textarea:focus{border-color:#F5C518!important}
    .hs-form .hs-button{background:#F5C518!important;color:#1A1B2E!important;border:none!important;border-radius:50px!important;padding:13px 24px!important;font-family:var(--fb)!important;font-size:15px!important;font-weight:700!important;cursor:pointer!important;width:100%!important}
    .hs-form .hs-button:hover{background:#D4930A!important}
    .hs-form label{font-size:13px!important;font-weight:600!important;color:#1A1B2E!important;margin-bottom:4px!important;display:block!important}
    .hs-form .hs-form-field{margin-bottom:12px!important}
    .hs-form .hs-error-msgs{font-size:12px!important;color:#DC2626!important;margin-top:4px!important;list-style:none!important}
    .hs-form .submitted-message{text-align:center;padding:20px;font-weight:700;color:#16A34A;font-size:15px}
    .hs-form-dark label{color:#fff!important}
    .hs-form-dark input,.hs-form-dark select,.hs-form-dark textarea{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.15)!important;color:#fff!important}
  /* ── Diensten grid hover/expand animation ── */
    .fd-card.fd-closed {
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }
    .fd-card.fd-closed:hover {
      border-color: var(--y) !important;
      box-shadow: 0 8px 32px rgba(26,27,46,.1);
      transform: translateY(-4px);
    }
    .fd-card.fd-closed:hover .fd-desc {
      display: block !important;
      animation: fdFadeIn .25s ease;
    }
    .fd-card.fd-closed:hover svg {
      stroke: var(--y-dark) !important;
    }
    .fd-card.fd-featured {
      transition: box-shadow .2s, transform .2s;
    }
    .fd-card.fd-featured:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(26,27,46,.2);
    }
    @keyframes fdFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media(max-width:900px) {
      #figo-diensten-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
      }
      #figo-diensten-grid .fd-card {
        grid-column: auto !important;
        grid-row: auto !important;
      }
    }
    @media(max-width:540px) {
      #figo-diensten-grid { grid-template-columns: 1fr !important; }
    }
  .logo-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 22px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 92px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }
    .logo-card:hover {
      border-color: var(--y);
      box-shadow: 0 4px 20px rgba(26,27,46,.08);
      transform: translateY(-2px);
    }
    .logo-card svg { display: block; }
    @media(max-width:700px) { .logo-card-grid { grid-template-columns: repeat(3,1fr) !important; } }
    @media(max-width:480px) { .logo-card-grid { grid-template-columns: repeat(2,1fr) !important; } }
  @media(max-width:900px) {
      .meer-weten-grid { grid-template-columns: 1fr !important; }
      .meer-weten-grid > div:first-child { min-height: 320px !important; padding: 48px 32px !important; }
      .meer-weten-grid > div:last-child { padding: 48px 32px !important; }
    }
    @media(max-width:560px) {
      .meer-weten-grid > div:last-child > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
    }
  @keyframes bounce-arrow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(6px); }
    }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.4); }
  }
  @media(max-width:680px) {
    #page-login .oo-grid { grid-template-columns: 1fr !important; gap:14px !important; }
    #page-login section { padding: 20px 0 32px !important; align-items: flex-start !important; }
    #page-login .container { padding: 0 16px !important; }
  }
  @keyframes popup-in {
    from { opacity: 0; transform: scale(.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }

/* ===== inline <style> block 2 (was in index.html) ===== */
  @media(max-width:768px) {
    .opl-grid { grid-template-columns: 1fr !important; }
    .opl-steps-grid { grid-template-columns: 1fr !important; }
    .opl-apps-grid { grid-template-columns: 1fr !important; }
  }

/* ===== inline <style> block 3 (was in index.html) ===== */
  @media(max-width:768px){
    .ww-steps-grid{grid-template-columns:1fr 1fr !important}
    .ww-steps-grid-mid{grid-template-columns:1fr !important}
  }
  @media(max-width:480px){
    .ww-steps-grid{grid-template-columns:1fr !important}
  }

  /* Article grid responsive */
  @media(max-width:860px){.art-grid{grid-template-columns:1fr !important;}.art-grid > aside{display:none !important;}}

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL — alle schermen
   ═══════════════════════════════════════════════ */

/* Viewport safety */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Logo containers */
.logo-card { min-width: 0; overflow: hidden; }
.logo-card span, .logo-card svg { max-width: 100%; height: auto; }

/* Marquee logos */
.marquee-track span[role="img"] { flex-shrink: 0; }
.marquee-track span[role="img"] svg { height: 32px; width: auto; }

/* App Store / Play badge sizing */
.app-badge--apple{height:40px;width:auto}
.app-badge--google{height:40px;width:auto}
/* Legacy fallback only: */
a[href*="apps.apple.com"] img:not(.app-badge--apple),
a[href*="play.google.com"] img:not(.app-badge--google) {
  height: 40px;
  width: auto;
}

/* ── Bespaarmodule mobile ── */
.bs-steps { flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.bs-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bs-step-num { width: 36px; height: 36px; border-radius: 50%; }
.bs-step-label { font-size: 11px; text-align: center; }
.bs-line { flex: 1; height: 2px; margin-top: -20px; }

@media(max-width:640px) {
  /* Step indicators compact */
  .bs-step-num { width: 28px; height: 28px; font-size: 12px; }
  .bs-step-label { font-size: 10px; max-width: 56px; }
  .bs-line { width: 16px; }

  /* Cards */
  .bs-card { padding: 20px 16px; border-radius: 16px; }
  .bs-chips { gap: 6px; }
  .bs-chip { font-size: 12px; padding: 7px 10px; }

  /* Slider */
  .bs-slider-label { font-size: 12px; }

  /* Result */
  .bs-result-amount { font-size: 44px; line-height: 1; }
  .bs-result-stat strong { font-size: 18px; }
  .bs-result-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bs-result-stat { padding: 12px; }
}

@media(max-width:480px) {
  .bs-result-stats { grid-template-columns: 1fr; }
  .bs-result-amount { font-size: 38px; }
}

/* ── Grids that need to collapse on mobile ── */
@media(max-width:640px) {
  /* Werkwijze horizontal timelines → vertical on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  /* Werkwijze corporate 2x2 stays 2x2 but smaller */

  /* Demo page - profile grids */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 4-column stat bars → 2x2 */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media(max-width:480px) {
  /* Werkwijze timelines → single column stacked */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Hide horizontal timeline connector line on mobile */
  [style*="position:absolute;top:24px;left:"] { display: none !important; }

  /* Nav tabs: scrollable without overflow */
  [role="tablist"] { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [role="tablist"]::-webkit-scrollbar { display: none; }
  [role="tab"] { min-width: 110px; padding: 14px 16px !important; }

  /* Cards padding */
  [style*="padding:40px"] { padding: 20px !important; }
  [style*="padding:32px"] { padding: 18px !important; }

  /* Hero sections padding */
  [style*="padding:72px 0"] { padding: 44px 0 !important; }
  [style*="padding:64px 0"] { padding: 40px 0 !important; }
}

/* ── Article pages ── */
@media(max-width:860px) {
  .art-grid { grid-template-columns: 1fr !important; }
  .art-grid > aside { display: none !important; }
}

/* ── Blog grid ── */
@media(max-width:640px) {
  .blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .blog-filter { flex-wrap: wrap; gap: 6px !important; }
  .blog-filter-btn { font-size: 12px !important; padding: 6px 12px !important; }
}

/* ── ICP pages ── */
@media(max-width:640px) {
  .oo-grid { grid-template-columns: 1fr !important; }
  .benefit { flex-direction: column; gap: 12px; }
  .benefit img { width: 48px !important; height: 36px !important; }
}

/* ── Over ons & Werkwijze sticky tab bar ── */
@media(max-width:480px) {
  section[style*="position:sticky"] { top: 60px !important; }
}

/* ── Prijzen page ── */
@media(max-width:640px) {
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 380px !important; margin: 0 auto; }
}

/* ── Container max-width for large screens ── */
@media(min-width:1400px) {
  .container { max-width: 1280px; }
}

/* ── Touch targets ── */
@media(hover:none) {
  .btn, button, a, [onclick] { min-height: 44px; }
  .faq-q { min-height: 52px; }
  .nav-btn, .nav-a { min-height: 48px; }
}

/* ── Logo box in header ── */
@media(max-width:480px) {
  .logo-box { padding: 4px 8px; }
}

/* ── Sticky bottom CTA bar on mobile ── */
#demo-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--y);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9000;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
  transform: translateY(100%);
  transition: transform .3s ease;
}
#demo-sticky-bar.visible { transform: translateY(0); }
#demo-sticky-bar-text { font-size: 13px; font-weight: 700; color: var(--n); line-height: 1.3; }
#demo-sticky-bar-btn { background: var(--n); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: var(--fb); }

@media(min-width:769px) { #demo-sticky-bar { display: none !important; } }

  @media(max-width:768px){
    .waarom-grid{grid-template-columns:1fr !important;}
    .waarom-vs{padding:24px !important;}
    .waarom-vs [style*="grid-template-columns:1fr auto 1fr"]{grid-template-columns:1fr !important;}
    .waarom-vs svg{display:none}
  }
  @media(max-width:640px){
    .kwit-grid{grid-template-columns:1fr !important;}
  }

@media(max-width:480px){
  .f-apps a[href*="apps.apple.com"],
  .f-apps a[href*="play.google.com"]{width:100%;max-width:100%;justify-content:center}
  .f-apps{flex-direction:column;align-items:stretch;gap:10px}
}
@media(max-width:768px){
  .meer-weten-grid{grid-template-columns:1fr !important}
  .icp-hero-grid{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr auto;gap:40px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(4,1fr);gap:16px"].kwit-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:480px){
  [style*="grid-template-columns:repeat(4,1fr);gap:16px"].kwit-grid{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(4,1fr)"][class*="kwit"]{grid-template-columns:1fr !important}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — comprehensive mobile/tablet layout fixes
   ════════════════════════════════════════════════════════ */

/* Tablet: 768–1024px */
@media(max-width:1024px){
  .container{padding-left:20px;padding-right:20px}
  .hero-grid{grid-template-columns:1fr !important;gap:32px !important}
  .hero-grid .hero-right{display:none}
  .waarom-grid{grid-template-columns:1fr 1fr !important}
  .kwit-grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr) !important}
  .kwit-grid[style*="repeat(3"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:repeat(4,1fr)"].kwit-grid{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:280px 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr auto;gap:40px"]{grid-template-columns:1fr !important}
  .drop-wrap{display:none}
}

/* Mobile: ≤768px */
@media(max-width:768px){
  .container{padding-left:16px;padding-right:16px}
  .kwit-grid{grid-template-columns:1fr !important}
  .waarom-grid{grid-template-columns:1fr !important}
  .waarom-vs{padding:24px 20px !important}
  .waarom-vs > div[style*="grid-template-columns:1fr 40px 1fr"]{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .waarom-vs > div[style*="grid-template-columns:1fr 40px 1fr"] > *:nth-child(2){display:none !important}
  .waarom-vs [style*="font-size:14px"]{font-size:13px !important}
  [style*="grid-template-columns:1fr 1fr;gap:64px"]{grid-template-columns:1fr !important;gap:24px !important}
  [style*="grid-template-columns:1fr 1fr;gap:48px"]{grid-template-columns:1fr !important;gap:24px !important}
  [style*="grid-template-columns:1fr 1fr;gap:0 48px"]{grid-template-columns:1fr !important;gap:0 !important}
  [style*="grid-template-columns:1fr auto;gap:40px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:280px 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="min-height:200px"][style*="grid-template-columns"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr;gap:0"]{grid-template-columns:1fr !important}
  .art-grid{grid-template-columns:1fr !important}
  .art-sidebar{display:none}
  section{padding-top:48px !important;padding-bottom:48px !important}
  section[style*="padding:80px"]{padding:48px 0 !important}
  section[style*="padding:96px"]{padding:56px 0 !important}
  section[style*="padding:72px"]{padding:48px 0 !important}
  h1,h2,h3{word-break:break-word;overflow-wrap:break-word;hyphens:manual}
  .f-grid{grid-template-columns:1fr 1fr !important}
}

/* Small mobile: ≤480px */
@media(max-width:480px){
  .kwit-grid{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  .f-grid{grid-template-columns:1fr !important}
  .f-apps{flex-direction:column;align-items:flex-start;gap:10px}
  .f-apps a{min-width:0;width:auto}
  .nav-inner .sol-btns,.nav-inner [style*="gap:8px"]:not(.nav-inner){display:none}
  h1{font-size:clamp(26px,8vw,40px) !important}
  h2{font-size:clamp(22px,6vw,34px) !important}
  [style*="padding:36px"]{padding:24px !important}
  [style*="padding:32px"]{padding:20px !important}
  [style*="padding:28px"]{padding:18px !important}
  .btn{min-height:44px;padding:12px 20px}
  [style*="display:flex;gap:12px;flex-wrap:wrap"] .btn,
  [style*="display:flex;gap:14px;flex-wrap:wrap"] .btn{width:100%;justify-content:center}
}

/* App badge responsive */
@media(max-width:480px){
  .f-apps a[href*="apps.apple.com"] svg,
  .f-apps a[href*="play.google.com"] svg{width:140px;height:42px}
}

@media(max-width:900px){
  .ww-stats{grid-template-columns:1fr 1fr !important;gap:16px !important;padding:24px !important}
  .ww-stats > div[style*="width:1px"]{display:none}
  .ww-line{display:none}
}
@media(max-width:640px){
  .ww-stats{grid-template-columns:1fr 1fr !important}
}

/* ═══ ARTICLE FIXES & RELATED ARTICLES (3-col cards) ═══ */
/* Collapsed hero fix: logo-placeholder heroes had height:100% inside an
   auto-height parent. Give the hero a fixed height and stretch the
   placeholder to fill it. */
.art-hero{min-height:300px}
.art-hero > div[style*="height:100%"]:first-child{position:absolute;inset:0}

.related-sec{background:var(--bg);padding:8px 0 72px}
.related-sec .container{max-width:1080px}
.related-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.related-head h2{font-size:clamp(20px,2.4vw,26px);font-weight:900;color:var(--n);letter-spacing:-.5px;margin:0}
.related-all{font-size:14px;font-weight:700;color:var(--n);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.related-all:hover{color:var(--y-dark)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rel-card{background:var(--white);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.rel-card:hover{box-shadow:0 8px 40px rgba(0,0,0,.1);transform:translateY(-2px)}
.rel-card-banner{height:110px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.rel-banner-label{font-size:21px;font-weight:900;color:#fff;letter-spacing:-.5px;opacity:.92}
.rel-cat-badge{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:2px 8px}
.rel-card-body{padding:20px 22px 18px;display:flex;flex-direction:column;flex:1}
.rel-card-body h3{font-size:15px;font-weight:800;color:var(--n);line-height:1.4;margin:0 0 8px;letter-spacing:-.2px}
.rel-card-body p{font-size:14px;color:var(--n-mid);line-height:1.65;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rel-card-link{margin-top:auto;font-size:13px;font-weight:700;color:var(--n);display:inline-flex;align-items:center;gap:6px}
@media(max-width:860px){.related-grid{grid-template-columns:1fr}.related-sec{padding:0 0 56px}}

/* ═══ POPUPS ABOVE STICKY BARS ═══ */
/* While any popup/overlay is open (body.popup-open is toggled in app.js),
   hide the sticky CTA bars so they never sit on top of a dialog. */
body.popup-open #demo-sticky-bar,
body.popup-open .sticky-cta{display:none !important}

/* ═══ MOBILE POLISH ═══ */
@media(max-width:768px){
  /* keep the whole menu reachable: it opens below the 68px header */
  .mob-menu{max-height:calc(100dvh - 84px);overscroll-behavior:contain;padding-bottom:28px}
  /* readable body text on small screens */
  .art-body p{font-size:16px}
  /* give the mobile sticky bar breathing room on small phones */
  #demo-sticky-bar{padding:10px 14px;gap:10px}
  #demo-sticky-bar-text{font-size:13px}
}

/* ═══ DEMO PAGE: steps (calculator + offertetraject) ═══ */
.traject-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:900px;margin:0 auto}
.traject-step{text-align:center}
.traject-num{width:52px;height:52px;background:#142952;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:18px;font-weight:900;color:var(--y)}
.traject-num.final{background:var(--y);color:var(--n)}
.traject-step h3{font-size:15px;font-weight:700;color:var(--n);margin:0 0 6px}
.traject-step p{font-size:13px;color:var(--n-mid);line-height:1.6;margin:0}
@media(max-width:860px){.traject-grid{grid-template-columns:1fr 1fr;gap:24px 16px}}
@media(max-width:480px){.traject-grid{grid-template-columns:1fr}}

/* ═══ LOGO'S: uniform formaat in de marquee ═══ */
.marquee-track img{height:34px !important;width:auto;max-width:150px;object-fit:contain}

/* ═══ DEMO-DASHBOARD: kostengrafiek (zoals het echte product) ═══ */
.dd-chart{display:flex;align-items:flex-end;gap:10px;height:200px}
.dd-col{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;min-width:0}
.dd-col > span{font-size:10px;color:#9CA3AF;text-align:center;margin-top:6px}
.dd-bar{display:flex;flex-direction:column;border-radius:5px 5px 2px 2px;overflow:hidden}
.dd-bar i{display:block;background:#9D8DF1;width:100%}
.dd-bar i:first-child{border-radius:5px 5px 0 0}
.dd-bar i.pink{background:#EE8DD8}
.dd-bar i.red{background:#F2706B}
.dd-bar i.yel{background:#F2B705}
@media(max-width:640px){.dd-chart{gap:5px;height:150px}.dd-col:nth-child(2n) > span{visibility:hidden}}

/* ═══ DESKTOP-SCHALING: site groeit mee met grote schermen ═══ */
/* Het ontwerp is getuned op ~1280–1440px. Op grotere schermen schalen we de
   hele layout proportioneel op, zodat de hero, klantenstrip en cijferband
   samen boven de vouw blijven (zoals op een standaard laptop). Mobiel en
   normale laptops blijven onaangeraakt. */
/* Subtiel: laptops (t/m 1680px) blijven exact zoals ontworpen; daarboven
   groeit de layout licht mee zodat de site geen smalle strook wordt. */
:root{--site-zoom:1}
@media (min-width: 1680px) { html { zoom: 1.05; } :root{--site-zoom:1.05} }
@media (min-width: 1920px) { html { zoom: 1.12; } :root{--site-zoom:1.12} }
@media (min-width: 2400px) { html { zoom: 1.3; } :root{--site-zoom:1.3} }
@media (min-width: 3000px) { html { zoom: 1.5; } :root{--site-zoom:1.5} }

/* ═══ LIVE TRANSACTIETICKER (hero) ═══ */
.tx-in{animation:txIn .45s ease}
@keyframes txIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ═══ EERSTE SCHERM: hero + cijferband + carrousel vullen samen het scherm ═══ */
/* De wrapper krijgt exact de schermhoogte minus de header; de hero vangt als
   flexibel deel de restruimte op. Zo eindigt het eerste scherm op elk formaat
   met de carrousel, zonder dat de volgende sectie in beeld piept. */
@media (min-width: 1025px) and (min-height: 680px) {
  .first-screen{display:flex;flex-direction:column;min-height:calc(100vh - 81px)}
  .first-screen .hero{flex:1;display:flex;align-items:center;min-height:0;padding:16px 0}
  .first-screen .hero > .container{width:100%}
  .first-screen .marquee-section{padding:18px 0 14px}
}
/* Zoom-stappen: vh schaalt niet mee met html-zoom, dus per stap delen */
@media (min-width: 1680px) and (min-height: 680px) { .first-screen{min-height:calc(100vh / 1.05 / 1.05 - 38px)} }
@media (min-width: 1920px) and (min-height: 680px) { .first-screen{min-height:calc(100vh / 1.12 / 1.12 + 14px)} }
@media (min-width: 2400px) and (min-height: 680px) { .first-screen{min-height:calc(100vh / 1.3 / 1.3 + 100px)} }
@media (min-width: 3000px) and (min-height: 680px) { .first-screen{min-height:calc(100vh / 1.5 / 1.5 + 180px)} }
.marquee-section{border-bottom:1px solid var(--border)}

/* Ultrabrede schermen: koptekst begrenzen zodat het eerste scherm blijft passen */
@media (min-width: 2400px) {
  .hero-left h1{font-size:54px !important}
}

/* ═══ FIGO TRAVELCARD in het demo-dashboard ═══ */
/* Exact naar TravelCardModel.vue uit het product: 16/10, #ffb400, p-10,
   afgeronde hoeken, schaduw. Breedte stuurt de hoogte; het detailblok
   ernaast rekt mee tot dezelfde hoogte. */
.figo-card{background:#ffb400;color:#000;border:1px solid rgba(0,0,0,.06);border-radius:10px;aspect-ratio:16/10;width:min(100%,460px);flex:0 0 auto;position:relative;overflow:hidden;padding:40px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
@media(max-width:760px){.figo-card{width:100%;padding:28px}}


/* ═══ MOBIEL: rustige cijferband homepage + oplossingen ═══ */
@media (max-width: 768px) {
  /* homepage: nette 2x2 cijferband met gelijke kolommen en uitlijning */
  .hero-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .hero-stats-grid > div{padding:18px 16px !important;border-right:none !important;border-bottom:1px solid rgba(255,255,255,.08)}
  .hero-stats-grid > div:nth-child(odd){border-right:1px solid rgba(255,255,255,.08) !important}
  .hero-stats-grid > div:nth-child(n+3){border-bottom:none}
  .hero-stats-grid > div > div:first-child{font-size:24px !important;white-space:nowrap}
  .hero-stats-grid > div > div:last-child{font-size:12px !important}

  /* oplossingen: gele band wordt op mobiel een rustige lichte band */
  .opl-statband{background:var(--bg) !important;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px 0 !important}
  .opl-statband .container > div{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .opl-statband div[style*="width:1px"]{display:none}
  .opl-statband [data-nl]{color:var(--n-mid) !important}
}