/* ============================================================================
   Foresy — Design System (v2 "Editorial vertrouwen")
   Single stylesheet: tokens + base + components + nav/footer + utilities.
   Light, editorial, premium. White canvas, ink-navy text, hairline rules,
   one restrained violet→cyan gradient. Recreated from the Claude Design handoff.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Paper */
  --paper-0:#ffffff; --paper-50:#fafbfd; --paper-100:#f4f6fa; --paper-200:#eceef3;
  /* Ink */
  --ink-900:#0e1526; --ink-800:#1c2438; --ink-700:#2a3247; --ink-600:#4a5268;
  --ink-500:#7a8299; --ink-400:#9aa1b5; --ink-300:#c3c8d6;
  /* Accent */
  --violet-600:#5a48d6; --violet-500:#7b61ff; --violet-300:#b7abff;
  --cyan-500:#22b8e6; --cyan-400:#35e0f0;
  /* Status */
  --success-600:#1a9e6e; --warning-600:#b97f0e; --danger-600:#d5455f;
  --info-600:#1687c9; --star-gold:#f2b01e;
  /* Lines */
  --line-soft:#f0f2f6; --line:#eceef3; --line-strong:#d5d9e4; --scrim:rgba(14,21,38,.4);
  /* Gradients */
  --grad-brand:linear-gradient(120deg,#7b61ff 0%,#35b8f0 100%);
  --grad-brand-soft:linear-gradient(120deg,rgba(123,97,255,.09) 0%,rgba(53,184,240,.09) 100%);
  /* Semantic aliases */
  --bg-base:var(--paper-0); --surface-raised:var(--paper-50); --surface-card:var(--paper-0);
  --text-strong:var(--ink-900); --text-body:var(--ink-600); --text-secondary:var(--ink-700);
  --text-muted:var(--ink-500); --text-faint:var(--ink-400); --text-on-accent:#fff;
  --accent:var(--violet-600); --accent-bright:var(--cyan-500); --accent-hover:var(--violet-500);
  --border-subtle:var(--line-soft); --border:var(--line); --border-strong:var(--line-strong);
  --focus-ring:rgba(90,72,214,.28);
  /* Type */
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --tracking-tight:-0.01em; --tracking-sans-tight:-0.02em; --tracking-widest:0.14em;
  /* Effects */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(14,21,38,.06);
  --shadow-md:0 8px 24px rgba(14,21,38,.08);
  --shadow-lg:0 24px 60px rgba(14,21,38,.10);
  --glow-focus:0 0 0 3px var(--focus-ring);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:120ms; --dur-med:220ms; --dur-slow:420ms;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* overscroll-behavior-x houdt de elastische zijwaartse bounce tegen. Bewust GEEN
   overflow-x:hidden hier: dat maakt van html een scroll-container, waardoor de
   scrollbar binnen de pagina valt en de inhoud uit het midden schuift. */
html,body{margin:0;background:var(--bg-base);overscroll-behavior-x:none;}
body{font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;line-height:1.5;}
img{max-width:100%;}
a{color:var(--accent);}
a:hover{color:var(--accent-hover);}
::selection{background:rgba(123,97,255,.18);}
h1,h2,h3,h4,p{margin:0;}
:focus-visible{outline:none;box-shadow:var(--glow-focus);border-radius:2px;}

/* ---- Layout ---- */
.wrap{max-width:1160px;margin:0 auto;padding:0 36px;}

/* ---- Brand: Wordmark ---- */
.wordmark{font-family:var(--font-body);font-weight:600;letter-spacing:var(--tracking-sans-tight);
  line-height:1;color:var(--text-strong);text-decoration:none;display:inline-block;}
.wordmark .dot{background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}

/* ---- Brand: GradientText ---- */
.gtext{background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* inline-block: voorkomt dat Safari de gradient niet schildert wanneer de span
     over twee regels breekt (tekst wordt dan onzichtbaar). Interne tekst wrapt
     gewoon door binnen de box. */
  display:inline-block;max-width:100%;
  /* zelfde reden: staarten van j/p/g moeten binnen de geschilderde box vallen */
  padding-bottom:.1em;margin-bottom:-.1em;}
.gtext.i{font-style:italic;}

/* ---- Brand: Eyebrow ---- */
.eyebrow{display:inline-block;font-family:var(--font-body);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-muted);}
.eyebrow.accent{color:var(--accent);}

/* ---- Section title (h2) ---- */
.h2{font-family:var(--font-display);font-weight:400;font-size:42px;letter-spacing:-0.01em;
  color:var(--text-strong);margin:0;line-height:1.1;}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px;
  font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:-0.01em;
  border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;user-select:none;
  text-decoration:none;border:1px solid transparent;
  transition:all var(--dur-fast) var(--ease-out);}
.btn:active{transform:translateY(1px);}
.btn.sm{height:38px;padding:0 18px;font-size:.875rem;gap:8px;}
.btn.lg{height:54px;padding:0 32px;font-size:1rem;gap:10px;}
.btn.full{display:flex;width:100%;}
.btn--primary{background:var(--ink-900);color:#fff;border-color:var(--ink-900);}
.btn--primary:hover{background:#1c2438;border-color:#1c2438;color:#fff;}
.btn--secondary{background:var(--paper-0);color:var(--text-strong);border-color:var(--border-strong);}
.btn--secondary:hover{border-color:var(--ink-900);background:var(--paper-50);color:var(--text-strong);}
.btn--violet{background:var(--violet-600);color:#fff;border-color:var(--violet-600);}
.btn--violet:hover{filter:brightness(1.07);color:#fff;}
/* gradient CTA (hero primary uses a filled gradient in the mock) */
.btn--grad{color:#fff;border:none;background-image:linear-gradient(120deg,#6b3df5 0%,#7b61ff 55%,#35b8f0 100%);}
.btn--grad:hover{filter:brightness(1.08);color:#fff;}
/* ghost = underlined text link with arrow */
.btn--ghost{height:auto;padding:0 4px 3px;background:transparent;color:var(--text-strong);
  border:1px solid transparent;border-bottom:2px solid var(--line-strong);border-radius:0;}
.btn--ghost:hover{border-bottom-color:var(--accent);color:var(--accent);}
.btn--ghost:active{transform:none;}
.btn svg{flex:none;}

/* ---- Badge ---- */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  font-family:var(--font-body);font-size:.75rem;font-weight:600;border-radius:var(--radius-pill);}
.badge--accent{color:var(--violet-600);background:#f1edff;border:1px solid #e2dbff;}
.badge--neutral{color:var(--text-secondary);background:var(--paper-100);border:1px solid var(--line);}
.badge--success{color:var(--success-600);background:#e9f7f1;border:1px solid #cdeee0;}
.badge--ink{color:#fff;background:var(--ink-900);border:1px solid var(--ink-900);}

/* ---- StatCard ---- */
.stat__value{font-family:var(--font-display);font-weight:400;font-size:54px;line-height:1;
  letter-spacing:var(--tracking-tight);color:var(--text-strong);}
.stat__value.accent{color:transparent;background-image:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  /* De gradient wordt binnen de elementbox geschilderd. Bij line-height:1 valt de
     staart van letters als j en p daarbuiten en blijft die ongekleurd. Extra
     ruimte onderin, met negatieve marge zodat de layout niet verschuift. */
  padding-bottom:.2em;margin-bottom:-.2em;}
.stat__label{margin-top:10px;color:var(--text-muted);font-family:var(--font-body);font-size:.875rem;}

/* ---- Input ---- */
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--font-body);font-size:.875rem;font-weight:600;color:var(--text-secondary);}
.field input{width:100%;height:46px;padding:0 16px;font-family:var(--font-body);font-size:1rem;
  color:var(--text-strong);background:var(--paper-0);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);outline:none;
  transition:border-color var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out);}
.field input::placeholder{color:var(--text-faint);}
.field input:focus{border-color:var(--accent);box-shadow:var(--glow-focus);}

/* ---- Testimonial ---- */
.tm{margin:0;}
.tm__quote{margin:0;font-family:var(--font-display);font-style:italic;font-size:30px;line-height:1.4;color:var(--text-strong);}
.tm.compact .tm__quote{margin:14px 0 0;font-family:var(--font-body);font-style:normal;font-size:1rem;line-height:1.6;color:var(--text-secondary);}
.tm__cap{display:flex;align-items:center;gap:14px;margin-top:26px;}
.tm.compact .tm__cap{margin-top:20px;}
.tm__name{display:block;font-family:var(--font-body);font-size:.875rem;font-weight:600;color:var(--text-strong);}
.tm__role{display:block;font-family:var(--font-body);font-size:.75rem;color:var(--text-muted);margin-top:2px;}
.stars{color:var(--star-gold);font-size:14px;letter-spacing:2px;line-height:1;}
.tm .stars{margin-left:14px;}
.tm.compact .stars{font-size:13px;}

/* ---- LogoBar ---- */
.logobar{display:flex;align-items:center;gap:48px;flex-wrap:wrap;}
.logobar__label{font-family:var(--font-body);font-size:.75rem;color:var(--text-faint);flex:none;}
.logobar img{opacity:.85;}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.nav__inner{height:76px;display:flex;align-items:center;justify-content:space-between;}
.nav__links{display:flex;gap:34px;align-items:center;}
.nav__links a{color:var(--text-body);text-decoration:none;font-size:15px;font-weight:500;
  transition:color var(--dur-fast) var(--ease-out);}
.nav__links a:hover{color:var(--text-strong);}
.nav__links .btn{display:none;} /* CTA in the links row only appears inside the mobile dropdown */
/* .nav__links a zet de linkkleur en wint van .btn--primary, waardoor de CTA in het
   mobiele menu donkere tekst op een donkere knop kreeg. Hier terugzetten naar wit. */
.nav__links a.btn--primary, .nav__links a.btn--grad, .nav__links a.btn--violet{color:#fff;}
.nav__cta{display:flex;align-items:center;gap:14px;}
.nav__toggle{display:none;background:none;border:none;padding:8px;margin:-8px;cursor:pointer;color:var(--text-strong);}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--border);padding:48px 0 40px;}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:28px;}
.footer__contact{margin-top:16px;display:flex;flex-direction:column;gap:5px;color:var(--text-muted);font-size:14px;}
.footer__contact a{color:var(--text-muted);text-decoration:none;}
.footer__contact a:hover{color:var(--text-strong);}
.footer__nav{display:flex;gap:26px;}
.footer__nav a{color:var(--text-muted);text-decoration:none;font-size:13.5px;}
.footer__nav a:hover{color:var(--text-strong);}
.footer__legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);}
.footer__legal span{color:var(--text-faint);font-size:13px;}

/* ---- Reveal-on-scroll utility ---- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:80ms;} .reveal.d2{transition-delay:120ms;} .reveal.d3{transition-delay:180ms;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{scroll-behavior:auto;}
}

/* ---- Section rhythm helpers ---- */
.section{padding:110px 0;}
.section--alt{background:var(--surface-raised);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.rule-top{border-top:1px solid var(--border);}

/* ---- Scroll-triggered SVG / chart animations (parent gets .in) ---- */
[data-draw]{stroke-dashoffset:0;}
/* !important overrules the inline dashoffset (=path length) that site.js sets to hide the line,
   so the draw actually animates from hidden -> drawn when the section reveals. */
.revealroot.in [data-draw]{stroke-dashoffset:0 !important;transition:stroke-dashoffset 900ms var(--ease-out) 400ms;}
[data-drawhead]{opacity:0;}
.revealroot.in [data-drawhead]{opacity:1;transition:opacity 200ms var(--ease-out) 1250ms;}
[data-bar]{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);}
.revealroot.in [data-bar]{transform:scaleY(1);transition:transform 520ms cubic-bezier(.2,.7,.2,1);}
[data-chart-ell]{opacity:0;}
.revealroot.in [data-chart-ell]{opacity:.9;transition:opacity 300ms var(--ease-out) 900ms;}
[data-chart-head]{opacity:0;}
.revealroot.in [data-chart-head]{opacity:1;transition:opacity 200ms var(--ease-out) 1300ms;}
@media (prefers-reduced-motion:reduce){
  [data-bar]{transform:none;}
  [data-draw]{stroke-dashoffset:0!important;}
  [data-drawhead],[data-chart-ell],[data-chart-head]{opacity:1;}
}

/* ============================================================================
   Hero lead form (JS-rendered wizard)
   ========================================================================== */
.hf{position:relative;background:var(--paper-0);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;}
.hf__track{height:5px;background:var(--paper-100);}
.hf__bar{height:100%;background:var(--grad-brand);transition:width 240ms var(--ease-out);}
.hf__body{padding:26px 30px 28px;min-height:588px;box-sizing:border-box;}
.hf__kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-600);}
.hf__title{font-family:var(--font-display);font-size:25px;color:var(--text-strong);line-height:1.15;margin:10px 0 0;}
.hf__intro{color:var(--text-muted);font-size:13.5px;line-height:1.55;margin:10px 0 0;}
.hf__step{margin-top:18px;animation:hfStepIn 200ms var(--ease-out);}
@keyframes hfStepIn{from{opacity:0;transform:translateX(var(--dir,14px));}to{opacity:1;transform:translateX(0);}}
.hf__qrow{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;}
.hf__back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  margin-top:1px;padding:0;background:none;border:none;cursor:pointer;color:var(--text-muted);}
.hf__back:hover{color:var(--text-strong);}
.hf__q{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.2;color:var(--text-strong);}
.hf__chips{display:flex;flex-direction:column;gap:10px;}
.hf__chip{display:block;width:100%;text-align:left;cursor:pointer;font-family:var(--font-body);
  font-size:14.5px;font-weight:500;color:var(--text-strong);background:var(--paper-0);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:12px 16px;
  transition:background 140ms var(--ease-out),border-color 140ms var(--ease-out);}
.hf__chip:hover{background:var(--paper-50);}
.hf__chip.sel{border:1.5px solid var(--ink-900);padding:11.5px 15.5px;}
.hf__contactGrid{display:flex;flex-direction:column;gap:14px;}
.hf__fine{color:var(--ink-500);font-size:12px;line-height:1.5;margin:12px 0 0;text-align:center;}
.hf__trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.hf__trustItem{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);}
.hf__trustCheck{color:var(--violet-600);display:inline-flex;}
.hf__sent{text-align:center;padding:48px 0;}
.hf__sentIcon{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;color:#fff;}
.hf__sentTitle{font-family:var(--font-display);font-size:24px;color:var(--text-strong);}
.hf__sentMsg{color:var(--text-muted);font-size:14px;line-height:1.6;margin:10px 0 0;}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  .wrap{padding:0 22px;}
  .h2{font-size:34px;}
  .section{padding:72px 0;}
}
@media (max-width:820px){
  .nav__links{display:none;}
  .nav__cta .btn{display:none;}
  .nav__toggle{display:inline-flex;}
  .nav.open .nav__links{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--paper-0);border-bottom:1px solid var(--border);padding:8px 22px 18px;}
  .nav.open .nav__links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;}
  /* De menuregel zet links op 16px, terwijl .btn.sm 14px verwacht: de tekst werd
     daardoor breder dan de knop. In het uitklapmenu volle breedte en eigen maat. */
  .nav.open .nav__links .btn{display:flex;margin-top:14px;width:100%;height:46px;
    padding:0 20px;font-size:15px;border-bottom:none;justify-content:center;}

  /* Oprichterskaarten: de overlap-layout (kaart 48% + journey -11%) knijpt de
     tekst op telefoons tot 3 woorden per regel. Onder elkaar zetten. */
  .fb{flex-direction:column;}
  .fb__card{width:100% !important;margin-top:0 !important;}
  .fb__journey{margin-left:0 !important;padding:24px 22px !important;margin-top:14px;}

  /* Grafiek paste niet: min-width 640px verstopte maand 7 t/m 12 buiten beeld. */
  .chart{min-width:0 !important;}
}

@media (max-width:640px){
  /* Grotere tikdoelen in de footer (waren 20px hoog). */
  .footer__nav a{padding:9px 0;}
  .footer__contact a{padding:4px 0;}
  /* Primaire knoppen over de volle breedte, makkelijker te raken met een duim. */
  .btn.lg{width:100%;justify-content:center;}
}