/*
 * VYS TMS, marketingwebsite voor goederenvervoer.
 *
 * Kleuren en fonts uit ~/vys-huisstijl (tokens.json), zelfde schil als
 * vystacho.nl: navy achtergrond, mint als accent. Vlakke kleuren: geen
 * verlopen, geen gloed-schaduwen.
 */
:root {
  --mint: #1ee3c6;
  --mint-diep: #0f8f7e;
  --groen: #22d48c;
  --navy: #0c1a28;
  --navy-paneel: #0a1622;
  --navy-zwart: #04121a;
  --lucht: #3cafd8;
  --inkt: #ddeef6;
  --inkt-helder: #e6eef5;
  --inkt-gedempt: #7aaec6;
  --inkt-grijs: #9fb0bd;
  --lijn: rgba(42, 138, 181, 0.18);
  --lijn-sterk: rgba(42, 138, 181, 0.45);
  --kop: 'Bricolage Grotesque', sans-serif;
  --tekst: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--tekst);
  background: var(--navy);
  color: var(--inkt);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--lucht); text-decoration: none; }
a:hover { color: var(--mint); }
img { max-width: 100%; display: block; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 88px 0; }
.sec.paneel { background: var(--navy); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }

/* Het instrument-raster van de simulator-app (vystacho.nl/sim-app, App.css,
   body::before): lijnen van 1px op 4,5% dekking in een ruit van 40px.
   Een lijn van 1px is geen kleurverloop; de gekleurde gloedvlekken die in de
   sim-app ACHTER het raster liggen zijn bewust NIET meegenomen.

   AFWISSELEND, van boven naar beneden (Anne, 18-09-2026): de bovenste sectie
   DONKER met raster, dan een BLAUW paneel, dan weer donker, enzovoort. "Niet
   met blauw beginnen": donker is het zwart van de site (--navy-zwart, zelfde als
   de voettekst, zoals het raster in de sim-app ook op bijna-zwart ligt), blauw
   is --navy. De kaarten, vragen en ervaringen houden overal --navy-paneel: dat
   ligt precies tussen die twee in, dus ze vallen op beide op. Daarom hangt
   het aan de hero en aan elke .sec die GEEN .paneel is: de pagina's wisselen die
   twee al af, dus nieuwe secties volgen het patroon vanzelf. Geldt ook voor de
   landingspagina's (lp-kop is daar de bovenste) en de contactpagina.

   Zonder het uitvloeimasker van de sim-app: daar hangt het raster vast aan het
   scherm, hier aan een sectie, en met het masker verdween het in de onderste
   helft van elke lange sectie, zodat de afwisseling niet meer te zien was.
   isolation houdt het raster achter de inhoud. */
.hero, .sec:not(.paneel) { position: relative; isolation: isolate; background-color: var(--navy-zwart); }
.hero::before, .sec:not(.paneel)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    linear-gradient(rgba(120, 170, 190, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 190, 0.045) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
}

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mint); margin-bottom: 18px;
}
.label::before { content: ''; width: 24px; height: 1px; background: var(--mint); }

h1 { font-family: var(--kop); font-size: clamp(36px, 5vw, 60px); line-height: 1.18; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
h2 { font-family: var(--kop); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.25; font-weight: 650; color: #fff; letter-spacing: -0.015em; margin-bottom: 18px; }
h3 { font-family: var(--kop); font-size: 21px; line-height: 1.3; font-weight: 600; color: #fff; margin-bottom: 8px; }
h4 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.lead { font-size: 19px; color: var(--inkt-gedempt); line-height: 1.75; max-width: 760px; }
.mint { color: var(--mint); }

/* ---- navigatie ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: 72px;
  background: rgba(7, 17, 28, 0.94);
  border-bottom: 1px solid var(--lijn);
}
.nav-in { max-width: 1280px; margin: 0 auto; height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.merk { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--kop); font-weight: 700; font-size: 20px; }
.merk img { height: 30px; width: auto; }
.merk span { letter-spacing: 0.02em; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--inkt); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--mint); }
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font-weight: 600; font-size: 16px; border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.knop-mint { background: var(--mint); color: #04212b; }
.knop-mint:hover { background: #4feed8; color: #04212b; }
.knop-rand { border-color: var(--lijn-sterk); color: #fff; }
.knop-rand:hover { border-color: var(--mint); color: var(--mint); }
.nav .knop { min-height: 42px; padding: 0 18px; font-size: 15px; }
.burger { display: none; background: none; border: 1px solid var(--lijn-sterk); color: #fff; border-radius: 8px; width: 44px; height: 44px; font-size: 20px; cursor: pointer; }
.nav-mobiel { display: none; }

/* ---- hero ---- */
.hero { padding: 150px 0 80px; border-bottom: 1px solid var(--lijn); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero p.lead { margin-top: 22px; }
.hero-acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
/* Een punt per regel. Stond op flex-wrap, en dan hangt het van de breedte van
   het venster af welke twee punten naast elkaar komen: de facturatie belandde
   zo achter de chauffeursapp in plaats van eronder (Anne, 17-09-2026). */
.hero-punten { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; list-style: none; color: var(--inkt-gedempt); font-size: 15px; }
.hero-punten li { display: flex; align-items: center; gap: 8px; }
.vink { width: 18px; height: 18px; flex: none; color: var(--mint); }

/* ---- schermafdruk-plekken ---- */
.shot {
  position: relative; border: 1px solid var(--lijn-sterk); border-radius: 14px;
  background: var(--navy-zwart); overflow: hidden; aspect-ratio: 16 / 10;
}
/* ---- telefoon-mockup (Anne, 17-09-2026): iPhone-frame in CSS, vlakke kleuren ----
   width: 100% is nodig: met margin auto rekt een grid-item niet uit en wordt het
   anders 0 breed. Het frame is de figure; het scherm (.scherm) houdt de afbeelding
   en krijgt via onload de echte verhouding. Hoeken elliptisch opgegeven zodat ze
   rond blijven: horizontaal% / verticaal% = hoogte / breedte (ongeveer 2,16). */
.shot.telefoon {
  width: 100%; max-width: 300px; margin: 0 auto;
  aspect-ratio: auto; overflow: visible;
  padding: 3.6%;
  background: #111317;
  border: 2px solid #3b4049;
  border-radius: 15.5% / 7.2%;
}
.shot.telefoon .scherm {
  position: relative; overflow: hidden;
  aspect-ratio: 1284 / 2778;
  border-radius: 12% / 5.5%;
  background: var(--navy-zwart);
}
/* Dynamic Island */
.shot.telefoon .scherm::after {
  content: ''; position: absolute; z-index: 2;
  top: 1.2%; left: 50%; transform: translateX(-50%);
  width: 28%; aspect-ratio: 3.4 / 1;
  background: #000; border-radius: 999px;
}
/* zijknop rechts, volumeknoppen links */
.shot.telefoon::before, .shot.telefoon::after { content: ''; position: absolute; width: 3px; background: #3b4049; }
.shot.telefoon::before { right: -5px; top: 25%; height: 10%; border-radius: 0 2px 2px 0; }
.shot.telefoon::after { left: -5px; top: 19%; height: 13%; border-radius: 2px 0 0 2px; }
.shot.telefoon .volgt { margin: 10px; }
.shot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top left; background: var(--navy-zwart); }
.shot .volgt {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center; color: var(--inkt-grijs);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px dashed rgba(122, 174, 198, 0.35); border-radius: inherit; margin: 12px;
}
.shot .volgt strong { font-family: var(--tekst); text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--inkt); font-weight: 600; }

/* ---- drie pijlers ---- */
.pijlers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.kaart { background: var(--navy-paneel); border: 1px solid var(--lijn); border-radius: 14px; padding: 28px; }
.kaart p { color: var(--inkt-gedempt); font-size: 16px; }
.kaart .icoon { width: 44px; height: 44px; border-radius: 10px; background: rgba(30, 227, 198, 0.1); color: var(--mint); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.kaart .icoon svg { width: 22px; height: 22px; }

/* ---- functieblok (tekst + schermafdruk) ---- */
.blok { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.blok.om .blok-tekst { order: 2; }
.lijst { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.lijst li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--inkt); font-size: 16px; }
.lijst li .vink { margin-top: 4px; }
.lijst li span b { color: #fff; font-weight: 600; }

.winkels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.telefoonrij-blok { margin-top: 72px; }
.telefoonrij-blok > p { color: var(--inkt-gedempt); max-width: 760px; margin-bottom: 28px; }
.telefoonrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items: start; }
.stapel { display: grid; gap: 18px; align-content: start; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.duo .shot.telefoon { max-width: none; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.trio .shot.telefoon { max-width: none; }
@media (max-width: 640px) { .trio { grid-template-columns: 1fr 1fr; } }
.shot.document { aspect-ratio: 1.414 / 1; margin-top: 56px; background: #fff; border-radius: 10px; }
.shot.document img { background: #fff; }
.stapel .shot.document { margin-top: 0; }
.bijschrift { margin-top: 12px; color: var(--inkt-grijs); font-size: 14px; text-align: center; }

/* ---- alle functies ---- */
.alles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.alles .kaart h3 { font-size: 19px; margin-bottom: 14px; }
.alles ul { list-style: none; display: grid; gap: 8px; }
.alles li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 15px; color: var(--inkt); line-height: 1.55; }
.alles li .vink { width: 15px; height: 15px; margin-top: 4px; }
.alles li span b { color: #fff; font-weight: 600; }

/* ---- stappen ---- */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; counter-reset: stap; }
.stap { border-top: 2px solid var(--mint); padding-top: 18px; }
.stap::before { counter-increment: stap; content: '0' counter(stap); font-family: var(--mono); color: var(--mint); font-size: 13px; letter-spacing: 1px; }
.stap h3 { margin-top: 8px; font-size: 19px; }
.stap p { color: var(--inkt-gedempt); font-size: 15px; }

/* ---- vragen ---- */
.vragen { margin-top: 36px; display: grid; gap: 12px; max-width: 880px; }
.vragen details { border: 1px solid var(--lijn); border-radius: 12px; background: var(--navy-paneel); padding: 18px 22px; }

/* ---- ervaringen ---- */
.getuigen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; margin-top: 40px; max-width: 1040px; }
.getuige { position: relative; background: var(--navy-paneel); border: 1px solid var(--lijn); border-left: 3px solid var(--mint); border-radius: 14px; padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 24px; }
.getuige-teken { font-family: var(--kop); font-size: 64px; line-height: 0.6; color: var(--mint); height: 26px; }
/* De tekst neemt de ruimte, zodat naam en bedrijf van twee kaarten naast elkaar
   op dezelfde hoogte staan, ook als de ene ervaring langer is dan de andere. */
.getuige blockquote { flex: 1 1 auto; }
/* Een oneven laatste kaart pakt de hele rij, anders staat hij halfleeg naast
   een gat (drie ervaringen in twee kolommen, sinds 18-09-2026). De regel blijft
   leesbaar door de tekst niet breder te laten lopen dan een gewone kolom tekst. */
.getuige:last-child:nth-child(odd) { grid-column: 1 / -1; }
.getuige:last-child:nth-child(odd) blockquote p { max-width: 78ch; }
.getuige blockquote p { font-size: 18px; line-height: 1.75; color: var(--inkt-helder); }
.getuige-wie { display: grid; gap: 2px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.getuige-wie strong { color: #fff; font-weight: 600; font-size: 16px; }
.getuige-wie span { color: var(--inkt-gedempt); font-size: 15px; }
.getuige-wie .getuige-context { color: var(--inkt-grijs); font-size: 13px; margin-top: 4px; }
@media (max-width: 640px) { .getuige { padding: 26px 22px 24px; } .getuige blockquote p { font-size: 16px; } }
.vragen summary { cursor: pointer; font-weight: 600; color: #fff; font-size: 17px; list-style: none; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: '+'; float: right; color: var(--mint); font-family: var(--mono); }
.vragen details[open] summary::after { content: '-'; }
.vragen details p { margin-top: 12px; color: var(--inkt-gedempt); }

/* ---- contact ---- */
.contact { text-align: center; }
.contact .lead { margin: 0 auto; }
.contact .hero-acties { justify-content: center; }
.contact-gegevens { margin-top: 26px; color: var(--inkt-gedempt); font-size: 16px; }
.contact-gegevens a { color: var(--inkt); font-weight: 600; }

/* ---- voettekst ---- */
footer { border-top: 1px solid var(--lijn); padding: 44px 0 36px; background: var(--navy-zwart); color: var(--inkt-grijs); font-size: 14px; }
.voet { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.voet img { height: 34px; width: auto; margin-bottom: 14px; }
.voet h4 { color: #fff; margin-bottom: 10px; }
.voet ul { list-style: none; display: grid; gap: 6px; }
.voet a { color: var(--inkt-grijs); }
.voet a:hover { color: var(--mint); }
.voet-onder { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--lijn); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- contactpagina (/contact/), opgebouwd zoals vystacho.nl/contact ---- */
.ct-pagina .sec { padding-top: 140px; }
.ct-h1 { margin-bottom: 14px; }
.ct-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; margin-top: 40px; align-items: start; }
.ct-kop { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--inkt-gedempt); margin-bottom: 18px; }
.ct-rij { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.ct-rij:last-child { margin-bottom: 0; }
.ct-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(30, 227, 198, 0.1); color: var(--mint); }
.ct-lbl { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--inkt-gedempt); }
.ct-lbl-2 { margin-top: 10px; }
.ct-rij a, .ct-waarde { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.6; }
.ct-rij a:hover { color: var(--mint); }
.ct-rij a.ct-wa-knop { display: inline-flex; margin-top: 8px; background: #25D366; color: #06281a; font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 10px; }
.ct-rij a.ct-wa-knop:hover { background: #3ee07b; color: #06281a; }
.ct-form label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--inkt-gedempt); margin: 16px 0 6px; }
.ct-form label:first-of-type { margin-top: 0; }
.ct-form input, .ct-form select, .ct-form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--inkt-helder); background: var(--navy-zwart); border: 1px solid var(--lijn-sterk); border-radius: 10px; padding: 12px 14px; outline: none; }
.ct-form input::placeholder, .ct-form textarea::placeholder { color: var(--inkt-grijs); }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { border-color: var(--mint); }
.ct-form select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237aaec6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.ct-form select option { color: #0c1a28; background: #eaf4f9; }
.ct-form textarea { min-height: 140px; resize: vertical; }
.ct-rijtje { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ct-rijtje label:first-of-type { margin-top: 16px; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-knop { width: 100%; margin-top: 20px; cursor: pointer; }
.ct-knop:disabled { opacity: 0.6; cursor: default; }
.ct-fout { color: #ff9b9b; font-size: 14px; margin-top: 12px; }
.ct-priv { color: var(--inkt-grijs); font-size: 13px; margin-top: 14px; line-height: 1.6; }
.ct-ok { text-align: center; padding: 28px 0; color: var(--mint); }
.ct-ok h3 { margin: 12px 0 6px; }
.ct-ok p { color: var(--inkt-gedempt); }
@media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr; } .ct-pagina .sec { padding-top: 110px; } }

/* ---- menu: nooit losse items verbergen ----
   Gemeten met Plus Jakarta Sans: het volledige menu past vanaf ~1240px, compact
   (14px, tussenruimte 18px) vanaf ~1130px. Daaronder het hamburgermenu met ALLE
   items. Eerder verdwenen hier items op smallere schermen (Anne, 17-09-2026). */
@media (max-width: 1300px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 14px; }
  .nav .knop { font-size: 14px; padding: 0 16px; }
}
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .nav-mobiel.open { display: grid; gap: 4px; position: fixed; top: 72px; left: 0; right: 0; max-height: calc(100vh - 72px); overflow-y: auto; background: var(--navy-zwart); border-bottom: 1px solid var(--lijn); padding: 12px 16px 18px; z-index: 99; }
  .nav-mobiel a { color: var(--inkt); padding: 12px 4px; font-size: 17px; border-bottom: 1px solid var(--lijn); }
  .nav-mobiel a:hover { color: var(--mint); }
  .nav-mobiel .knop { margin-top: 12px; color: #04212b; border-bottom: 0; }
  .nav-mobiel .knop:hover { color: #04212b; }
}
@media (min-width: 641px) and (max-width: 1180px) {
  .nav-mobiel.open { left: auto; right: 16px; width: 320px; border: 1px solid var(--lijn); border-top: 0; border-radius: 0 0 12px 12px; }
}

/* ---- mobiel ---- */
@media (max-width: 980px) {
  .hero-grid, .blok { grid-template-columns: 1fr; gap: 36px; }
  .blok.om .blok-tekst { order: 0; }
  .pijlers, .alles { grid-template-columns: 1fr 1fr; }
  .stappen { grid-template-columns: 1fr 1fr; }
  .telefoonrij { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wrap, .nav-in { padding: 0 16px; }
  .sec { padding: 60px 0; }
  .hero { padding: 116px 0 56px; }
  .pijlers, .alles, .stappen, .voet { grid-template-columns: 1fr; }
  .telefoonrij { grid-template-columns: 1fr 1fr; gap: 18px; }
  .lead { font-size: 17px; }
  .merk img { height: 26px; }
  .nav .nav-cta { display: none; }
}

/* ---- WhatsApp-knop, woordelijk gelijk aan vystacho.nl (WhatsAppBubble.tsx) ---- */
.vys-wa { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .15s ease; }
.vys-wa:hover { transform: scale(1.06); }
.vys-wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: .55; animation: vyswa 2.2s ease-out infinite; z-index: -1; }
@keyframes vyswa { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }
/* Het tekstballonnetje staat ALTIJD in beeld (Anne, 15-09-2026), ook op een
   telefoon. Het hoort bij de link, dus een tik erop opent de chat ook. */
.vys-wa-tip { position: absolute; right: 70px; white-space: nowrap; background: #0c1a28; color: #fff; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
@media (max-width: 600px) { .vys-wa { right: 16px; bottom: 16px; width: 54px; height: 54px; } .vys-wa-tip { right: 64px; font-size: 12px; padding: 7px 10px; } }

/* ---- landingspagina's (gebouwd door bouw/landingspaginas.py) ---- */
.sec.lp-kop { padding: 140px 0 80px; border-bottom: 1px solid var(--lijn); }
.lp-kop h1 { font-size: clamp(32px, 4.4vw, 52px); }
.lp-kop .lead { margin-top: 20px; }
.kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--inkt-grijs); margin-bottom: 18px; }
.kruimel a { color: var(--inkt-gedempt); }
.kruimel a:hover { color: var(--mint); }
.lp-tekst { max-width: 820px; }
.lp-tekst > p { margin-top: 14px; }
.lp-tekst > h2 + p { margin-top: 0; }
.lp-tekst a, .lp .lijst a { color: var(--mint); }
.lp-tekst a:hover, .lp .lijst a:hover { text-decoration: underline; }
.lp-verwant { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.lp-verwant .kaart { display: block; color: var(--inkt); }
.lp-verwant .kaart:hover { border-color: var(--lijn-sterk); color: var(--inkt); }
.lp-verwant .kaart h3 { color: var(--mint); }
.lp .blok .stapel, .lp .blok .duo { align-self: center; }
.voet { grid-template-columns: 1.2fr 1fr 1fr 1.8fr; }
.voet-onderwerpen ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
@media (max-width: 980px) {
  .lp-verwant { grid-template-columns: 1fr 1fr; }
  .voet { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sec.lp-kop { padding: 110px 0 56px; }
  .lp-verwant, .voet { grid-template-columns: 1fr; }
}
.alles .meer { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 14px; }
.alles .meer a, .functies-uitleg a { color: var(--mint); font-weight: 600; }
.alles .meer a:hover, .functies-uitleg a:hover { text-decoration: underline; }
.functies-uitleg { margin-top: 28px; color: var(--inkt-gedempt); font-size: 16px; }

/* ---- live VDO-tachograaf bovenaan (mobiletacho.eu, 21-09-2026) ----
   Letterlijk overgenomen uit de live tacho op de landingspagina's van
   vystacho.nl (~/vys-tacho-web/src/app/_landing/live-tacho.css en
   LiveTacho.tsx): de echte toestelfoto vdo2.png, het eigen VDO-displaylettertype
   en de displaypositie uit /api/sim-overlay-vdo. Het scherm is doorzichtig: alleen
   de tekens staan op het zwarte scherm van de foto. Tekst en knipperen zoals de
   simulator bij "1M Invoer toevoegen? Ja" (VdoSimulator.tsx, stStep 1). */
@font-face { font-family: 'TachoDisplayVdo'; src: url('/fonts/display-vdo.ttf') format('truetype'); font-display: block; }
/* De tacho lijnt uit met de TITEL, niet met het label erboven (Anne, 22-09-2026).
   Verschuiving = de regel van het label (12px x 1,7 = 20px, op de regelhoogte van de
   body 27px) plus zijn marge van 18px, samen ongeveer 39px, plus de ruimte boven de
   hoofdletters van de h1 (halve regelafstand 0,09em plus de marge in het lettertype,
   samen ongeveer 0,2 keer de lettergrootte, en die schaalt mee met clamp(36px, 5vw, 60px)). */
.hero-rechts { display: grid; gap: 28px; align-self: start; min-width: 0; margin-top: calc(39px + 0.2 * clamp(36px, 5vw, 60px)); }
@media (max-width: 980px) { .hero-rechts { margin-top: 0; } }
.vtacho { position: relative; width: 100%; filter: drop-shadow(0 24px 55px rgba(0, 0, 0, .5)); pointer-events: none; user-select: none; -webkit-user-select: none; }
.vtacho .vphoto { position: relative; width: 100%; height: auto; aspect-ratio: auto 6245 / 1915; display: block; border-radius: 1.2%; }
.vtacho .vlcd-mount { position: absolute; overflow: hidden; container-type: size; }
.vtacho .vlcd { position: absolute; inset: 0; width: 100%; height: 100%; background: none; color: #f2f2f2;
  font-family: 'TachoDisplayVdo', 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(28cqh * var(--tsh, 1)); line-height: 1;
  text-shadow: 0 0 2px rgba(255, 255, 255, .25); }
.vtacho .vlcd-in { position: relative; height: 100%; width: 100%; padding: var(--vpt, 1.5cqh) 1.2cqw var(--vpb, 1.5cqh); box-sizing: border-box;
  transform: scaleX(var(--tsx, 1)); transform-origin: 50% 50%; }
.vtacho .vmenu { height: 100%; display: flex; flex-direction: column; justify-content: space-between; font-size: 1.5em; }
.vtacho .vm-cat { font-size: 1em; display: flex; align-items: center; gap: 0.05em; white-space: nowrap; }
.vtacho .vm-sub { font-size: 1em; display: flex; align-items: center; gap: 0.08em; white-space: nowrap; }
.vtacho .vgrow { flex: 1; }
@keyframes vblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.1; } }
.vtacho .vblink { animation: vblink 1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .vtacho .vblink { animation: none; } }