/* ============================================================
   FEMA FUNDERINGSTECHNIEK B.V. — stylesheet
   Pas kleuren, fonts en maten centraal aan in :root hieronder.
   ============================================================ */
:root{
  /* kleuren */
  --color-ink:#2D2926;
  --color-ink-soft:#1A2228;
  --color-blue:#0096D6;
  --color-blue-bright:#00A3E0;
  --color-blue-deep:#053349;
  --color-gold:#F2A900;
  --color-concrete:#EDF0F2;
  --color-concrete-2:#D9DFE4;
  --color-line:#2D2926;
  --color-paper:#FFFFFF;
  --color-muted:#5C6873;
  --color-text-light:#C3CFD6;

  /* typografie */
  --font-display:"Archivo",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",monospace;

  /* vormgeving */
  --radius:14px;
  --shadow:0 18px 40px -20px rgba(5,51,73,.35);
  --maxw:1180px;
  --header-h:74px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-paper);
  font-size:clamp(1rem,.97rem + .15vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:where(section,footer)[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.sprite{display:none}
.icon{width:24px;height:24px;display:block}

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--color-blue);font-weight:500;
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--color-blue)}
.eyebrow--light{color:var(--color-blue-bright)}
.eyebrow--light::before{background:var(--color-gold)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.96rem;
  padding:.92em 1.6em;border-radius:9px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--color-blue);color:#fff;box-shadow:0 10px 24px -10px rgba(0,150,214,.6)}
.btn--primary:hover{background:var(--color-blue-bright);transform:translateY(-2px)}
.btn--ink{background:var(--color-ink);color:#fff}
.btn--ink:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--gold{background:var(--color-gold);color:var(--color-ink)}
.btn--gold:hover{background:#ffc233;transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--color-ink)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,0,0,.4)}
.btn--outline-ink{background:transparent;color:var(--color-ink);border-color:rgba(14,20,25,.35)}
.btn--outline-ink:hover{border-color:var(--color-ink);transform:translateY(-2px)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* ---------- Logo (tekst-variant) ---------- */
.logo{display:inline-flex;flex-direction:column;line-height:1;gap:3px}
.logo__sub{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.28em;color:var(--color-ink);text-transform:uppercase;font-weight:500}
.logo__mark{font-family:var(--font-display);font-weight:900;font-size:1.7rem;letter-spacing:.02em;color:var(--color-blue)}
.logo__mark img {
  padding: 10px 0;
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;
  z-index:50;
  background: var(--color-ink);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.header a {
  color: var(--color-text-light);
}
.header a.btn--primary {
  color: var(--color-paper);
}
.header--scrolled{border-color:var(--color-line);box-shadow:0 6px 20px -16px rgba(0,0,0,.4)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--header-h)}
.header__nav{display:flex;align-items:center;gap:2rem;margin-left:auto}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__link{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--color-ink-soft);position:relative;padding:.3rem 0;transition:color .18s ease}
.nav__link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--color-blue);transition:width .22s ease}
.nav__link:hover{color:var(--color-blue)}
.nav__link:hover::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:1rem}
.header__phone{display:inline-flex;align-items:center;gap:.5rem;white-space: nowrap;font-family:var(--font-mono);font-weight:500;font-size:.92rem;color:var(--color-ink)}
.header__phone .icon{width:16px;height:16px;color:var(--color-blue)}
.header__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--color-ink)}
.header__toggle .icon{width:28px;height:28px}

/* ---------- Hero ---------- */
/* .hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%,#0a4666 0%,var(--color-blue-deep) 55%,#04263a 100%)} */
/*.hero::before{content:"";position:absolute;inset:0;pointer-events:none;*/
/*  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);*/
/*  background-size:46px 46px;*/
/*  -webkit-mask-image:radial-gradient(120% 90% at 60% 10%,#000 35%,transparent 80%);*/
/*  mask-image:radial-gradient(120% 90% at 60% 10%,#000 35%,transparent 80%)}*/

.hero {
    position: relative;
    width: 100%;
    color:#fff;
    background-color: #0e3951; /* De donkerdere blauwe tint onderaan */
    overflow: hidden; /* Zorgt ervoor dat de boog niet buiten de header steekt */
}
.hero::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 120%;
    background:radial-gradient(120% 120% at 80% 0%,#0a4666 0%,var(--color-blue-deep) 55%,#04263a 100%); /* De lichtere blauwe tint bovenaan */
    border-radius: 0 0 50% 50% / 0 0 20% 20%; /* Maakt de flauwe boog */
    transform: rotate(-4deg); /* Geeft de schuine hoek van het logo */
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);
  align-items:center;padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,96px)}
.hero__title{font-size:clamp(2.6rem,2rem + 3vw,4.6rem);font-weight:900;letter-spacing:-.02em;margin:1.1rem 0 .4rem;text-transform:uppercase}
.hero__title-accent{color:var(--color-blue-bright)}
.hero__tag{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1rem + .5vw,1.5rem);margin-bottom:1.1rem;opacity:.95}
.hero__lead{color:#C4D6E2;max-width:36ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* signatuur: maatlijn-besparingsblok */
.saving{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.saving__panel{position:relative;border:1px solid rgba(255,255,255,.18);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));padding:clamp(26px,3vw,40px)}
.saving__dim{display:flex;align-items:center;gap:12px;color:var(--color-blue-bright);font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em}
.saving__dim-line{height:1px;flex:1;position:relative;background:repeating-linear-gradient(90deg,var(--color-blue-bright) 0,var(--color-blue-bright) 6px,transparent 6px,transparent 10px)}
.saving__dim-line::before,.saving__dim-line::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--color-blue-bright)}
.saving__dim-line::before{left:0}.saving__dim-line::after{right:0}
.saving__num{font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,1.2rem + 5vw,3.2rem);line-height:1;letter-spacing:-.03em;margin:.4rem 0}
.saving__num span{color:var(--color-gold)}
.saving__label{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#A9C2D2}
.saving__foot{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:1.6rem}
.saving__foot-item{flex:1}
.saving__foot-k{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem}
.saving__foot-v{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#9FB8C8}

/* ---------- Afbeelding-placeholder (nette fallback als foto ontbreekt) ---------- */
.media{position:relative;background:var(--color-concrete);overflow:hidden}
.media__img{width:100%;height:100%;object-fit:cover}
.media--empty{background-image:linear-gradient(135deg,#e6eaed,#d4dbe0);background-color:var(--color-concrete-2)}
/*.media--empty::before{content:"";position:absolute;inset:0;*/
/*  background-image:linear-gradient(rgba(94,110,123,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(94,110,123,.14) 1px,transparent 1px);*/
/*  background-size:24px 24px}*/
.media--empty::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;color:#6E7C87;text-transform:uppercase}

/* ---------- Section algemeen ---------- */
.section{padding-block:clamp(56px,7vw,108px)}
.section__head{max-width:64ch;margin-bottom:clamp(34px,4vw,56px)}
.section__head--center{text-align:center;margin-inline:auto}
.section__head--center .eyebrow{justify-content:center}
.section__title{font-size:clamp(2rem,1.6rem + 1.6vw,3.1rem);font-weight:800;margin:1rem 0 .8rem;letter-spacing:-.02em}
.section__lead{color:var(--color-muted);font-size:1.08rem;max-width:54ch}
.section__head--center .section__lead{margin-inline:auto}

/* ---------- Stats ---------- */
.stats{background:var(--color-ink);color:#fff;padding-block:clamp(30px,3.5vw,46px)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden}
.stats__item{background:var(--color-ink);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:.3rem}
.stats__n{font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.7rem);color:var(--color-blue-bright);letter-spacing:-.02em}
.stats__n--gold{color:var(--color-gold)}
.stats__t{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#9FAEB8}

/* ---------- Aanpak ---------- */
.aanpak{background:var(--color-concrete)}
.aanpak__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.aanpak__title{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.6rem + 1.6vw,3.1rem);margin:1rem 0 .8rem;letter-spacing:-.02em}
.aanpak__lead{color:var(--color-muted);font-size:1.08rem;margin-bottom:1.4rem}
.services{display:grid;gap:.2rem;list-style:none}
.services__item{display:flex;gap:1.1rem;align-items:flex-start;padding-block:1.05rem;border-bottom:1px solid var(--color-concrete-2)}
.services__item:last-child{border-bottom:0}
.services__tick{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--color-blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px}
.services__tick .icon{width:17px;height:17px}
.services__text{font-weight:500;color:var(--color-ink-soft)}
.aanpak__aside{position:sticky;top:96px}
.aanpak__card{background:var(--color-ink);color:#fff;border-radius:var(--radius);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow)}
.aanpak__card-title{font-size:1.6rem;font-weight:800;margin:.8rem 0 .7rem}
.aanpak__card-text{color:#B9C6CE;margin-bottom:1.6rem}
.aanpak__card .media{aspect-ratio:4 / 3;border-radius:10px;margin-top:1.4rem}

/* ---------- Voordelen ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.feature{background:var(--color-paper);border:1px solid var(--color-concrete-2);border-radius:var(--radius);padding:clamp(24px,2.6vw,34px);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.feature__icon{width:50px;height:50px;border-radius:12px;background:var(--color-concrete);color:var(--color-blue);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;transition:background .2s ease,color .2s ease}
.feature:hover .feature__icon{background:var(--color-blue);color:#fff}
.feature__title{font-size:1.28rem;font-weight:800;margin-bottom:.5rem}
.feature__text{color:var(--color-muted);font-size:.98rem}

/* ---------- Werkwijze ---------- */
.werkwijze{background:var(--color-blue-deep);color:#fff;position:relative;overflow:hidden}
.werkwijze::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.werkwijze .wrap{position:relative}
.werkwijze .section__title{color:#fff}
.werkwijze .section__lead{color:#B9CDD9}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,30px);counter-reset:step}
.process__step{position:relative;padding-top:2.4rem}
.process__step::before{counter-increment:step;content:"0" counter(step);
  font-family:var(--font-display);font-weight:900;font-size:2.6rem;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.35);position:absolute;top:-.4rem;left:0}
.process__bar{height:3px;background:linear-gradient(90deg,var(--color-gold),transparent);margin-bottom:1.1rem;border-radius:2px}
.process__title{font-size:1.18rem;font-weight:800;margin-bottom:.5rem}
.process__text{color:#AFC4D1;font-size:.94rem}

/* ---------- CTA-band ---------- */
.cta{background:var(--color-gold);color:var(--color-ink)}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta__title{font-size:clamp(1.8rem,1.4rem + 1.8vw,3rem);font-weight:900;max-width:18ch;letter-spacing:-.02em;text-transform:uppercase}
.cta__text{margin-top:.6rem;max-width:42ch;font-weight:500}
.cta__actions{display:flex;gap:.9rem;flex-wrap:wrap}

/* ---------- Projecten ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.project{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3 / 2;background:var(--color-concrete);display:block}
.project .media{position:absolute;inset:0}
.project__img{transition:transform .5s ease}
.project:hover .project__img{transform:scale(1.06)}
.project__cap{position:absolute;inset-inline:0;bottom:0;padding:1.1rem 1.2rem;
  background:linear-gradient(transparent,rgba(8,30,43,.82));color:#fff;display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;transform:translateY(8px);opacity:0;transition:transform .3s ease,opacity .3s ease}
.project:hover .project__cap,.project:focus-visible .project__cap{transform:translateY(0);opacity:1}
.project__cap .icon{width:16px;height:16px;color:var(--color-gold)}

/* ---------- Footer ---------- */
.footer{background:var(--color-ink);color:#fff;padding-top:clamp(48px,6vw,80px)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.footer__grid .logo__mark{color:var(--color-blue-bright)}
.footer__grid .logo__sub{color:#9FB0BA}
.footer__brand-text{color:#9FB0BA;margin-top:1.2rem;max-width:34ch}
.footer__heading{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-blue-bright);margin-bottom:1.1rem;font-weight:500}
.footer__col p{color:var(--color-text-light);line-height:1.9}
.footer__link{color:#fff;border-bottom:1px solid rgba(255,255,255,.25);transition:border-color .18s ease}
.footer__link:hover{border-color:var(--color-blue-bright)}
.footer__meta{font-family:var(--font-mono);font-size:.78rem;color:#8595A0;line-height:1.9;margin-top:.4rem}
.footer__actions{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:1.5rem;text-align:center}
.footer__copy{font-family:var(--font-mono);font-size:.78rem;color:#8595A0;letter-spacing:.04em}

/* ---------- Scroll-reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .aanpak__grid{grid-template-columns:1fr}
  .aanpak__aside{position:static}
  .features{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr);gap:30px}
  .projects{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .header__toggle{display:inline-flex}
  .header__nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:1.2rem;margin-left:0;
    background:#000;padding:18px clamp(20px,5vw,48px) 26px;
    border-bottom:1px solid var(--color-line);box-shadow:0 18px 30px -18px rgba(0,0,0,.3);
  }
  .header__nav.is-open{display:flex}
  .nav__links{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .nav__link{font-size:1.15rem}
  .nav__actions{flex-direction:column;align-items:stretch;gap:.8rem;width:100%}
  .nav__actions .btn{width:100%}
  .header__phone{justify-content:flex-start}
}
@media (max-width:560px){
  .features,.projects,.stats__grid{grid-template-columns:1fr}
  .saving__foot{flex-direction:column;gap:1rem}
  .cta__inner{flex-direction:column;align-items:flex-start}
  .footer__grid{grid-template-columns:1fr}
  .hero::before {
    border-radius: 0 0 50% 50% / 0 0 4% 3%;
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.feature,.project__img,.project__cap{transition:none}
}

@media (min-width:759px) {
  .nav__links {
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 56px;
    padding-top: 12px;
  }
  .header__nav {
    align-items: flex-start;
  }
}

/* ---------- Lightbox Modal ---------- */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(5, 51, 73, 0.9);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: var(--color-paper);
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
}

.lightbox__close:hover {
  color: var(--color-gold);
}