/* MF Impact – homepage
   Kleuren, lettertype en vormen komen uit de ESG Werkbank (mfimpact.vercel.app):
   Tailwind-kleuren emerald/teal/sky/amber, lettertype Inter, afgeronde kaarten (rounded-2xl). */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Tailwind-kleuren zoals in de tool gebruikt */
  --teal-900: #134e4a;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-100: #ccfbf1;
  --emerald-950: #022c22;
  --emerald-900: #064e3b;
  --emerald-800: #065f46;
  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-500: #10b981;
  --emerald-400: #34d399;
  --emerald-300: #6ee7b7;
  --emerald-200: #a7f3d0;
  --emerald-100: #d1fae5;
  --emerald-50: #ecfdf5;
  --blue-900: #1e3a8a;
  --blue-500: #3b82f6;
  --sky-400: #38bdf8;
  --sky-300: #7dd3fc;
  --sky-100: #e0f2fe;
  --amber-400: #fbbf24;
  --amber-300: #fcd34d;
  --amber-950: #451a03;
  --rose-400: #fb7185;
  --rose-300: #fda4af;
  --cyan-300: #67e8f9;
  --violet-300: #c4b5fd;
  --slate-900: #0f172a;
  --slate-300: #cbd5e1;

  /* Afgeleide tokens, zelfde waarden als de tool */
  --card-bg: rgba(2, 44, 34, 0.85);          /* bg-emerald-950/85 */
  --card-border: rgba(5, 150, 105, 0.4);     /* border-emerald-600/40 */
  --nav-bg: rgba(2, 44, 34, 0.95);           /* bg-emerald-950/95 */
  --nav-border: rgba(6, 95, 70, 0.5);        /* border-emerald-800/50 */
  --radius-card: 1rem;                       /* rounded-2xl */
  --radius-btn: 0.75rem;                     /* rounded-xl */
  --radius-sm: 0.5rem;                       /* rounded-lg */
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --maxw: 80rem;                             /* max-w-7xl */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-inter);
  color: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--emerald-900);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--emerald-400); color: var(--emerald-950);
  padding: .75rem 1rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--amber-300); outline-offset: 3px; border-radius: 4px; }

/* ---------- Achtergrond (AnimatedBackground uit de tool) ---------- */
.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(to bottom right, var(--teal-900), var(--emerald-800), var(--blue-900));
}
.blob {
  position: absolute; width: 20rem; height: 20rem; border-radius: 9999px;
  filter: blur(64px); opacity: .2; mix-blend-mode: multiply;
  animation: blob 7s infinite;
}
.blob--1 { top: 0; left: -10rem; background: var(--teal-500); }
.blob--2 { top: 0; right: -10rem; background: var(--emerald-500); animation-delay: 2s; }
.blob--3 { bottom: -10rem; left: 5rem; background: var(--blue-500); animation-delay: 4s; }
@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.section { padding: 4.5rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }

.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--emerald-300); margin-bottom: .75rem;
}
.h2 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); font-weight: 700; }
.lead { margin-top: 1rem; font-size: 1.125rem; color: rgba(236, 253, 245, .9); }

/* ---------- Navigatie (TopMenu uit de tool) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand img { height: 1.6rem; width: auto; }
.brand__sub {
  border-left: 1px solid rgba(5, 150, 105, .5); padding-left: .75rem;
  font-size: .75rem; font-weight: 500; line-height: 1.25; color: rgba(167, 243, 208, .9);
}
.nav__links { display: none; align-items: center; gap: .25rem; }
.nav__links a {
  padding: .5rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500;
  color: var(--teal-100); text-decoration: none; transition: background .2s, color .2s;
}
.nav__links a:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (min-width: 900px) { .nav__links { display: flex; } }
@media (max-width: 420px) { .brand__sub { display: none; } }

/* ---------- Knoppen: elke knop een eigen kleur ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.5rem; border-radius: var(--radius-btn);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2xl); }
.btn--lg { padding: 1rem 1.75rem; font-size: 1.0625rem; }
.btn--sm { padding: .5rem 1rem; font-size: .875rem; }

.btn--emerald { background: var(--emerald-400); color: var(--emerald-950); }   /* zelfde als "Start onderzoek" */
.btn--emerald:hover { background: var(--emerald-300); }
.btn--sky { background: var(--sky-400); color: #082f49; }
.btn--sky:hover { background: var(--sky-300); }
.btn--amber { background: var(--amber-300); color: var(--amber-950); }
.btn--amber:hover { background: var(--amber-400); }
.btn--teal { background: var(--teal-400); color: #042f2e; }
.btn--teal:hover { background: #5eead4; }
.btn--rose { background: var(--rose-300); color: #4c0519; }
.btn--rose:hover { background: var(--rose-400); }
.btn--cyan { background: var(--cyan-300); color: #083344; }
.btn--cyan:hover { background: #a5f3fc; }
.btn--violet { background: var(--violet-300); color: #2e1065; }
.btn--violet:hover { background: #ddd6fe; }

/* ---------- Hero ---------- */
.hero { padding: 3.5rem 0 4rem; }
@media (min-width: 768px) { .hero { padding: 5.5rem 0 6rem; } }
.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .75rem; border-radius: 9999px;
  background: rgba(2, 44, 34, .8); border: 1px solid rgba(5, 150, 105, .4);
  color: var(--emerald-200); font-size: .875rem;
}
.pill svg { width: 1rem; height: 1rem; }
.hero h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 5.2vw, 3.75rem); font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.06);
}
.hero h1 .accent { color: var(--emerald-300); }
.hero__text { margin-top: 1.25rem; font-size: 1.1875rem; color: rgba(236, 253, 245, .9); max-width: 38rem; }
.hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__note { margin-top: 1.25rem; font-size: .875rem; color: rgba(209, 250, 229, .75); }

/* ---------- Kaarten (zelfde stijl als de formulierkaart en GlassWindow) ---------- */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-2xl);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  padding: 1.5rem;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
@media (min-width: 768px) { .card { padding: 2rem; } }
.card--hover:hover { transform: translateY(-4px); border-color: rgba(52, 211, 153, .6); box-shadow: 0 25px 50px -12px rgba(20, 184, 166, .2); }

.window { padding: 0; overflow: hidden; }
.window__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(to right, rgba(255,255,255,.05), transparent);
}
.window__title { font-size: 1rem; font-weight: 600; }
.dots { display: flex; gap: .25rem; }
.dots span { width: .75rem; height: .75rem; border-radius: 9999px; }
.dots span:nth-child(1) { background: rgba(251, 113, 133, .8); }
.dots span:nth-child(2) { background: rgba(251, 191, 36, .8); }
.dots span:nth-child(3) { background: rgba(52, 211, 153, .8); }
.window__body { padding: 1.25rem; }
@media (min-width: 768px) { .window__body { padding: 1.5rem; } }
.window__foot { margin-top: 1rem; font-size: .8125rem; color: rgba(209, 250, 229, .7); }

/* Stappenlijst, zoals de voortgang in de tool */
.steps { display: grid; gap: .75rem; }
.step {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1rem;
  border-radius: var(--radius-btn); border: 1px solid rgba(4, 120, 87, .4);
  background: rgba(6, 78, 59, .4);
}
.step--active { background: rgba(6, 95, 70, .5); border-color: rgba(52, 211, 153, .6); }
.step__icon {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.step__icon svg { width: 1.25rem; height: 1.25rem; }
.step__icon--done { background: var(--emerald-400); color: var(--emerald-950); }
.step__icon--busy { background: #fff; color: var(--emerald-900); }
.step__icon--wait { background: var(--emerald-800); color: var(--emerald-300); }
.step__title { font-weight: 600; font-size: .9375rem; }
.step__detail { font-size: .8125rem; color: rgba(209, 250, 229, .8); line-height: 1.45; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

.icon-badge {
  width: 3rem; height: 3rem; border-radius: var(--radius-btn);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
}
.icon-badge svg { width: 1.5rem; height: 1.5rem; }
.ib-emerald { background: rgba(52, 211, 153, .15); color: var(--emerald-300); }
.ib-sky { background: rgba(56, 189, 248, .15); color: var(--sky-300); }
.ib-amber { background: rgba(252, 211, 77, .15); color: var(--amber-300); }
.ib-rose { background: rgba(253, 164, 175, .15); color: var(--rose-300); }
.ib-teal { background: rgba(45, 212, 191, .15); color: var(--teal-400); }
.ib-cyan { background: rgba(103, 232, 249, .15); color: var(--cyan-300); }
.ib-violet { background: rgba(196, 181, 253, .15); color: var(--violet-300); }

.card h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: .5rem; }
.card p { color: rgba(209, 250, 229, .85); font-size: .9875rem; }
.card .tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1rem; }
.tag {
  font-size: .75rem; font-weight: 500; padding: .125rem .5rem; border-radius: 9999px;
  background: rgba(6, 95, 70, .6); color: var(--emerald-200); border: 1px solid rgba(5, 150, 105, .4);
}

/* Probleem */
.problem { border-top: 4px solid; }
.problem--sky { border-top-color: var(--sky-400); }
.problem--amber { border-top-color: var(--amber-300); }
.problem--rose { border-top-color: var(--rose-300); }

/* Hoe het werkt */
.howto { counter-reset: s; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .howto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .howto { grid-template-columns: repeat(4, 1fr); } }
.howto li { position: relative; }
.howto .num {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin-bottom: 1rem; color: var(--emerald-950);
}
.n1 { background: var(--emerald-400); } .n2 { background: var(--sky-400); }
.n3 { background: var(--amber-300); }   .n4 { background: var(--teal-400); }

/* Checklist */
.checks { display: grid; gap: .75rem; margin-top: 1rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; color: rgba(236, 253, 245, .9); }
.checks svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .2rem; color: var(--emerald-400); }

/* Begrippen */
.glossary { display: grid; gap: 1rem; }
@media (min-width: 768px) { .glossary { grid-template-columns: repeat(2, 1fr); } }
.glossary div { padding: 1.25rem 1.5rem; border-radius: var(--radius-btn); background: rgba(6, 78, 59, .45); border: 1px solid rgba(4, 120, 87, .4); }
.glossary dt { font-weight: 700; color: var(--emerald-200); }
.glossary dd { margin: .25rem 0 0; color: rgba(236, 253, 245, .85); font-size: .9375rem; }

/* Contact */
.contact { text-align: center; padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .contact { padding: 3.5rem; } }
.contact .hero__ctas { justify-content: center; }
.contact__lines { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; color: var(--emerald-200); font-size: .9375rem; }

/* Disclaimer + footer */
.disclaimer {
  margin-top: 2rem; padding: .875rem 1rem; border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, .5); border: 1px solid rgba(255,255,255,.1);
  color: var(--slate-300); font-size: .8125rem; text-align: center;
}
.footer { border-top: 1px solid var(--nav-border); background: var(--nav-bg); padding: 3rem 0 2rem; margin-top: 2rem; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer img { height: 1.75rem; width: auto; }
.footer h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--emerald-300); margin-bottom: .75rem; }
.footer p, .footer li { font-size: .9rem; color: rgba(209, 250, 229, .8); }
.footer li + li { margin-top: .375rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .8125rem; color: rgba(209, 250, 229, .6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }

.placeholder { background: rgba(252, 211, 77, .18); color: var(--amber-300); padding: 0 .25rem; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 639px) { .hero__ctas .btn { flex: 1 1 100%; } }