/* Landingpagina-stijl voor werkbonnen.fluxsuite.be (index.html) — toegevoegd 02/09/2026, zie
   productplan.md "Volgende stappen". Bewust een APART stijlblad, los van style.css: dat bestand
   wordt door alle ingelogde dashboardpagina's (saldo/team/klanten/bedrijf/account/doorsturen)
   gedeeld, en deze marketing-secties (hero/mockup/features/cta-band/footer) horen enkel bij
   index.html thuis. Hergebruikt wél bewust dezelfde CSS-variabelen (--donker/--groen/--grijs/…)
   uit style.css — index.html laadt beide stijlbladen, style.css eerst — zodat de inlogkaart zelf
   (.kaart, input, button.primair, .taalkiezer, ...) er identiek uitziet als op de rest van dit
   webdashboard, en de nieuwe marketing-secties er visueel bij aansluiten.

   Structuur bewust dezelfde opbouw als fluxsuite.be (op 02/09/2026 bekeken ter referentie, zie
   productplan.md): topnav met taalkiezer/CTA's → hero (kicker, titel met geaccentueerd stuk,
   subtekst, CTA's, drie vertrouwens-"pills") → productmockup-kaart → featuregrid met
   icoon-badge-kaarten → donkere CTA-band → footer met logo/tagline/bedrijfsgegevens/links. Kleuren
   bewust NIET 1-op-1 fluxsuite.be's teal-accent, maar het al bestaande navy/groen-palet van de app
   (zie style.css se KDoc + het app-icoon "blauw-naar-groen"-verloop uit productplan.md "Concept"). */

.landing-body { background: var(--wit); }

/* ---------- Topnav ---------- */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
}

.landing-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--donker);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.landing-logo img { height: 28px; width: auto; display: block; }

.landing-nav-rechts {
  display: flex;
  align-items: center;
  gap: 18px;
}

.landing-nav-rechts a.landing-inloggen-link {
  color: var(--donker);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}

.landing-nav-rechts a.landing-inloggen-link:hover { text-decoration: underline; }

.knop-klein {
  display: inline-block;
  background: var(--donker);
  color: var(--wit);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 7px;
  white-space: nowrap;
}

.knop-klein:hover { opacity: .92; }

/* ---------- Hero ---------- */
.hero {
  background: var(--lichtgrijs);
  padding: 56px 20px 64px;
}

.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: start;
}

.hero-kicker {
  display: inline-block;
  color: var(--groen);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--donker);
  font-weight: 800;
  letter-spacing: -.01em;
}

.hero h1 .accent { color: var(--groen); }

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--grijs);
  margin: 0 0 26px;
  max-width: 46em;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.knop-groot-primair, .knop-groot-secundair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .96rem;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.knop-groot-primair {
  background: var(--donker);
  color: var(--wit);
}

.knop-groot-primair:hover { opacity: .92; }

.knop-groot-secundair {
  background: var(--wit);
  color: var(--donker);
  border-color: var(--rand);
}

.knop-groot-secundair:hover { border-color: var(--donker); }

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--donker);
}

.pill .pill-icoon { font-size: .95rem; line-height: 1; }

/* Inlogkaart in de hero — hergebruikt bewust .kaart uit style.css voor dezelfde
   kader/schaduw/afronding als de rest van het dashboard, met hier enkel positionering/breedte
   erbovenop. */
.hero-login {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 28px 26px;
  box-shadow: 0 12px 32px rgba(28, 43, 69, .08);
}

.hero-login h2 {
  font-size: 1.15rem;
  margin: 0 0 4px;
  color: var(--donker);
}

.hero-login .hero-login-sub {
  color: var(--grijs);
  font-size: .88rem;
  margin: 0 0 18px;
}

/* ---------- Productmockup ---------- */
.mockup-sectie {
  padding: 0 20px 64px;
  margin-top: -28px;
}

.mockup-kaart {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(28, 43, 69, .10);
  overflow: hidden;
}

.mockup-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--lichtgrijs);
  border-bottom: 1px solid var(--rand);
}

.mockup-chrome .stip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rand);
}

.mockup-chrome .mockup-url {
  margin-left: 8px;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 3px 12px;
  font-size: .76rem;
  color: var(--grijs);
}

.mockup-body {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
}

.mockup-werkbon {
  padding: 26px 28px;
  border-right: 1px solid var(--rand);
}

.mockup-werkbon-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.mockup-werkbon-icoon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--donker);
  color: var(--wit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.mockup-werkbon-nummer {
  font-size: .78rem;
  color: var(--grijs);
  font-weight: 600;
}

.mockup-werkbon-titel {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--donker);
}

.mockup-rij {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--lichtgrijs);
  font-size: .88rem;
}

.mockup-rij .mockup-label { color: var(--grijs); }
.mockup-rij .mockup-waarde { color: var(--donker); font-weight: 600; }

.mockup-grafiek {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  background: var(--lichtgrijs);
}

.mockup-balken {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
}

.mockup-balken .balk {
  flex: 1;
  background: linear-gradient(180deg, var(--groen), var(--donker));
  border-radius: 4px 4px 0 0;
  opacity: .85;
}

/* ---------- Features ---------- */
.features {
  padding: 20px 20px 70px;
  text-align: center;
}

.features h2 {
  font-size: 1.9rem;
  color: var(--donker);
  margin: 0 0 8px;
}

.features .features-sub {
  color: var(--grijs);
  font-size: 1rem;
  margin: 0 auto 42px;
  max-width: 40em;
}

.features-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.feature-kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 24px;
}

.feature-badge {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--donker);
  color: var(--wit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 14px;
}

.feature-kaart h3 {
  font-size: 1.02rem;
  margin: 0 0 8px;
  color: var(--donker);
}

.feature-kaart p {
  font-size: .9rem;
  color: var(--grijs);
  line-height: 1.5;
  margin: 0;
}

/* ---------- CTA-band ---------- */
.cta-band {
  background: var(--donker);
  padding: 56px 20px;
}

.cta-band-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.cta-band h2 {
  color: var(--wit);
  font-size: 1.7rem;
  margin: 0 0 10px;
}

.cta-band p {
  color: #cfd6e4;
  font-size: 1rem;
  max-width: 42em;
  margin: 0 0 26px;
  line-height: 1.55;
}

.cta-band .hero-ctas { margin-bottom: 0; }

.cta-band .knop-groot-primair { background: var(--wit); color: var(--donker); }
.cta-band .knop-groot-secundair {
  background: transparent;
  color: var(--wit);
  border-color: #4a5875;
}
.cta-band .knop-groot-secundair:hover { border-color: var(--wit); }

/* ---------- Footer ---------- */
.landing-footer {
  padding: 40px 20px 50px;
  background: var(--wit);
  border-top: 1px solid var(--rand);
}

.landing-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.landing-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.landing-footer-logo img { height: 24px; width: auto; }
.landing-footer-logo span { font-weight: 800; color: var(--donker); }

.landing-footer-tagline {
  color: var(--grijs);
  font-size: .9rem;
  max-width: 42em;
  margin: 0 0 18px;
}

.landing-footer-adres {
  color: var(--grijs);
  font-size: .82rem;
  margin: 0 0 14px;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.landing-footer-links a {
  color: var(--grijs);
  font-size: .84rem;
  text-decoration: none;
}

.landing-footer-links a:hover { color: var(--donker); text-decoration: underline; }

/* ---------- Responsief ---------- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  .mockup-body { grid-template-columns: 1fr; }
  .mockup-werkbon { border-right: none; border-bottom: 1px solid var(--rand); }
  .features-grid { grid-template-columns: 1fr; }
  .landing-nav-rechts .knop-klein { display: none; }
}

@media (max-width: 560px) {
  .hero { padding: 40px 16px 48px; }
  .hero h1 { font-size: 1.7rem; }
  .mockup-sectie { padding: 0 12px 48px; }
}