/*
  ============================================================
  landing.css — STIJL VOOR DE PUBLIEKE LANDINGSPAGINA'S
  ============================================================
  Elke landingspagina (loonkosten-horeca-berekenen, personeels-
  planning-horeca, enzovoort) laadt eerst styles.css (voor de
  kleuren, knoppen en basistypografie) en daarna dit bestand.

  Waarom een apart bestand en niet de CSS van website.html?
  Die staat inline in die ene pagina. Zou je hem kopiëren naar
  elke landingspagina, dan moet je bij elke stijlwijziging vijf
  bestanden bij. Nu staat het één keer hier.

  De klassenamen zijn met opzet gelijk aan die van website.html
  (.site-header, .hero, .section-heading, ...) zodat de pagina's
  op elkaar lijken en je markup kunt overnemen.
*/

body { margin: 0; }
a { color: inherit; }

/* ---- Bovenbalk ---- */

.site-header {
  position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--border);
}
.site-header-inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-brand { font-weight: 700; font-size: 17px; color: var(--navy); text-decoration: none; }

/* 05-09-2026: de .site-nav-links-regels staan nu in /site-nav.css, dat
   elke pagina hier al laadt. Ze stonden hier ná dat bestand en wonnen
   daardoor van de mobiele regels; op de homepage leverde dezelfde
   dubbeling een menu op dat altijd openstond.

   Ook weg: `@media (max-width: 780px) { .site-nav-links a.text-link
   { display: none; } }`. Dat verborg de menulinks op smalle schermen
   en stamt uit de tijd vóór 02-09-2026, toen er op een telefoon nog
   helemaal geen menu was. Nu is er een menuknop en horen die links
   juist zichtbaar te zijn zodra je hem opent. */

/* ---- Secties ---- */

section { padding: 64px 24px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-inner.narrow { max-width: 760px; }
.section-alt { background: var(--card-bg); }

.section-heading { margin-bottom: 34px; }
.section-heading.center { text-align: center; }
.section-heading .eyebrow {
  color: var(--accent-dark); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.section-heading h2 { font-size: 27px; margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.25; }
.section-heading p { color: var(--text-muted); font-size: 14.5px; margin: 0; line-height: 1.6; }

/* ---- Hero ---- */

.hero {
  background: linear-gradient(180deg, #F7F8FB 0%, #FFFFFF 100%);
  padding-top: 76px; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; top: -140px; right: -100px; width: 420px; height: 420px;
  border-radius: 50%; filter: blur(10px); pointer-events: none;
  background: radial-gradient(circle, rgba(47,111,237,0.16), transparent 70%);
}
.hero > .section-inner { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft);
  color: var(--accent-dark); border: 1px solid #D6E4FF; border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; margin-bottom: 20px;
}
.hero h1 { font-size: 38px; line-height: 1.18; margin: 0 0 18px; letter-spacing: -0.02em; max-width: 740px; }
.hero p.lead { font-size: 17px; color: var(--text-muted); max-width: 640px; margin: 0 0 30px; line-height: 1.6; }
.hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-ctas .btn, .hero-ctas .btn-secondary {
  text-decoration: none; display: inline-block; padding: 13px 24px; border-radius: 10px; font-size: 14.5px;
}
.hero-note { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 720px) { .hero h1 { font-size: 28px; } }

/* ---- Lopende tekst ---- */

.prose { font-size: 15.5px; line-height: 1.7; color: var(--navy); }
.prose p { margin: 0 0 18px; }
.prose h3 { font-size: 18px; margin: 32px 0 12px; letter-spacing: -0.01em; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--navy); }
.prose .muted { color: var(--text-muted); }

/* ---- Kaarten ---- */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid, .card-grid.two { grid-template-columns: 1fr; } }

.info-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; box-shadow: var(--shadow-sm);
}
.info-card .icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px;
}
.info-card:nth-child(3n+2) .icon { background: var(--green-soft); }
.info-card:nth-child(3n) .icon { background: var(--orange-soft); }
.info-card h3 { font-size: 15px; margin: 0 0 8px; }
.info-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Het blok waarin het onderscheidende argument landt. Bewust opvallend:
   dit is de zin waarvoor de pagina bestaat. */
.pitch-box {
  background: var(--accent-soft); border: 1px solid #D6E4FF; border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 22px 24px; margin: 26px 0;
}
.pitch-box p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--navy); }
.pitch-box p:last-child { margin-bottom: 0; }
.pitch-box .pitch-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-dark); margin-bottom: 8px;
}

.quote-box {
  background: var(--bg); border-left: 3px solid var(--border); border-radius: 8px;
  padding: 16px 18px; margin: 0 0 16px; font-size: 14px; color: var(--navy); line-height: 1.6;
}

/* ---- Tabellen ---- */

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 20px; }
.data-table th, .data-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.data-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .highlight { background: var(--green-soft); font-weight: 600; }
.table-wrap { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; }

/* Vergelijkingstabel: links de concurrent, rechts GainOwner */
.compare-table th:last-child, .compare-table td:last-child { background: var(--accent-soft); }
.compare-table td:last-child { font-weight: 600; }

/* ---- Rekenhulp ---- */

.calc {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px; box-shadow: var(--shadow-md);
}
.calc h3 { margin: 0 0 6px; font-size: 17px; }
.calc .calc-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .calc-fields { grid-template-columns: 1fr; } }
.calc-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.calc-field .hint { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.calc-field input { width: 100%; }
.calc-result {
  margin-top: 22px; background: var(--navy); color: white; border-radius: 12px; padding: 22px 24px;
}
.calc-result .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #A9B4C6; font-weight: 700; margin-bottom: 8px; }
.calc-result .value { font-size: 38px; font-weight: 700; letter-spacing: -0.01em; }
.calc-result .verdict { margin-top: 10px; font-size: 13.5px; color: #C9D1DF; line-height: 1.55; }
.calc-breakdown { margin-top: 18px; font-size: 13.5px; }
.calc-breakdown .row {
  display: flex; justify-content: space-between; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.calc-breakdown .row:last-child { border-bottom: none; font-weight: 700; border-top: 2px solid var(--navy); }

/* ---- Veelgestelde vragen ---- */

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 14.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 19px; font-weight: 700; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 18px; font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* ---- Slotblok met de knop ---- */

.cta-band { background: var(--navy); color: white; text-align: center; }
.cta-band h2 { font-size: 27px; margin: 0 0 12px; letter-spacing: -0.01em; }
.cta-band p { color: #C9D1DF; font-size: 14.5px; margin: 0 auto 26px; max-width: 520px; line-height: 1.6; }
.cta-band .btn { text-decoration: none; display: inline-block; padding: 14px 28px; border-radius: 10px; font-size: 15px; }
.cta-band .cta-sub { margin-top: 16px; font-size: 12.5px; color: #A9B4C6; }
.cta-band .cta-sub a { color: white; }

/* ---- Kruisverwijzingen naar de andere landingspagina's ---- */

.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a {
  text-decoration: none; font-size: 13px; font-weight: 600; color: var(--accent-dark);
  background: var(--accent-soft); border: 1px solid #D6E4FF; border-radius: 999px; padding: 8px 15px;
}
.related a:hover { background: #DCE8FF; }

/* ---- Kruimelpad ---- */

.crumbs { font-size: 12.5px; color: var(--text-muted); margin-bottom: 18px; }
.crumbs a { text-decoration: none; color: var(--text-muted); }
.crumbs a:hover { color: var(--navy); }

/* ---- Voettekst ---- */

.site-footer { background: var(--navy); color: #B7C0D4; padding: 40px 24px; }
.site-footer-inner {
  max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 20px; font-size: 12.5px;
}
.site-footer a { text-decoration: none; color: #B7C0D4; }
.site-footer a:hover { color: white; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }