/* ======================================================================
   HELVARO 2026: het design system van de site (november 2026)
   ----------------------------------------------------------------------
   Vervangt de opmaak die op tellhomy.be leek. Staat na style.css en
   geldt voor de balk en de voet op elke pagina, en voor alles in
   <main class="hv">.

   KLEUREN
   - Logogoud #D6BC8C (gemeten in de logobestanden), schaduw #B1935E,
     licht #F5E5C0. Het merk zelf: logo, lijnen, markeringen, cijfers op
     donker. Nooit als tekstkleur op wit (contrast 1,8:1).
   - Petrol #0F4C52: de tweede kleur. Hoofdknoppen, links, iconen, labels,
     statussen. Wit erop haalt 9,7:1. Ligt op de kleurcirkel bijna
     tegenover het goud (warm tegenover koel), daardoor versterken ze
     elkaar zonder te vechten. Gedempt en donker: geen SaaS-blauw.
   - Inkt #0B1F22: donkere secties. Een zwart met een vleug petrol, zodat
     het goud er warm op staat (9,3:1) en het niet het harde zwart wordt
     dat de eigenaar eerder afwees.
   TYPE
   - Koppen: Bricolage Grotesque (al zelf gehost), 600, strak gespatieerd.
   - Tekst: Inter.
   VORM
   - Knoppen met hoek 10px, geen pillen. Kaarten 14px. Weinig schaduw:
     één zachte schaduw voor productbeelden, verder lijnen.
   ====================================================================== */
:root {
  --hv-goud: #D6BC8C;
  --hv-goud-diep: #B1935E;
  --hv-goud-licht: #F5E5C0;
  --hv-goud-tint: #FBF6EC;
  --hv-goud-inkt: #9A7A42; /* goud dat leesbaar blijft op licht (3.6:1 op crème, voor grote koppen) */
  --hv-petrol: #0F4C52;
  --hv-petrol-hover: #0A3A3F;
  --hv-petrol-helder: #1F6F76;
  --hv-petrol-tint: #E8F1F0;
  --hv-inkt: #0B1F22;
  --hv-inkt-2: #11292D;
  --hv-inkt-3: #1A363B;
  --hv-inkt-lijn: rgba(255,255,255,0.1);
  --hv-tekst: #0E1A1C;
  --hv-tekst-2: #48565A;
  --hv-tekst-3: #5F6B6D;
  --hv-lijn: #E2E6E5;
  --hv-lijn-2: #D3D9D8;
  --hv-grijs: #F4F6F5;
  --hv-wit: #FFFFFF;
  --hv-op-donker: rgba(255,255,255,0.74);
  --hv-op-donker-2: rgba(255,255,255,0.56);
  --hv-groen: #15803D;
  --hv-groen-tint: #E7F5EC;
  --hv-amber: #92560B;
  --hv-amber-tint: #FDF1DC;
  --hv-blauw: #34556B;
  --hv-blauw-tint: #E6EEF3;
  --hv-kop: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hv-serif: 'Fraunces', 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --hv-body: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hv-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --hv-r: 14px;
  --hv-r-s: 10px;
  --hv-kop-h: 72px;
  --hv-gutter: 24px;
  --hv-schaduw: 0 1px 2px rgba(11,31,34,0.06), 0 24px 48px -24px rgba(11,31,34,0.28);
  --hv-ease: cubic-bezier(.2,.7,.2,1);
}

/* ── Basis ────────────────────────────────────────────────────────────── */
body.hv-body { background: var(--hv-wit); color: var(--hv-tekst); font-family: var(--hv-body); }
.hv { color: var(--hv-tekst); font-family: var(--hv-body); font-size: 16.5px; line-height: 1.6; letter-spacing: -0.01em; font-kerning: normal; -webkit-font-smoothing: antialiased; }
.hv *, .hv *::before, .hv *::after { box-sizing: border-box; }
.hv img { max-width: 100%; height: auto; display: block; }
.hv a { color: inherit; }
:where(.hv) :where(h1, h2, h3, h4, p, dl, dd, figure) { margin: 0; }
:where(.hv) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.hv h1, .hv h2, .hv h3, .hv h4 { font-family: var(--hv-kop); font-weight: 650; color: inherit; letter-spacing: -0.03em; text-wrap: balance; }
.hv :focus-visible, .hv-kop :focus-visible, .hv-voet :focus-visible, .hv-menu :focus-visible { outline: 2px solid var(--hv-goud-diep); outline-offset: 3px; border-radius: 6px; }

.hv-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--hv-gutter); }
.hv-s { padding: 120px 0; position: relative; }
.hv-s--grijs { background: var(--hv-grijs); }
.hv-s--inkt { background: var(--hv-inkt); color: #fff; }
.hv-s--petrol { background: var(--hv-petrol); color: #fff; }
.hv-anker { position: absolute; top: calc(-1 * var(--hv-kop-h) - 8px); }
[id] { scroll-margin-top: calc(var(--hv-kop-h) + 16px); }

/* ── Typografie ───────────────────────────────────────────────────────── */
.hv-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--hv-body); font-size: 11.5px; line-height: 1; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hv-goud-diep); }
.hv-label::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--hv-goud); flex: none; }
.hv-s--inkt .hv-label, .hv-s--petrol .hv-label { color: var(--hv-goud); }
.hv-h1 { font-size: clamp(2.6rem, 4.8vw, 4.2rem); line-height: .98; font-weight: 700; letter-spacing: -0.052em; color: var(--hv-inkt); }
.hv-h2 { font-size: clamp(2.25rem, 4.2vw, 3.9rem); line-height: 1; font-weight: 700; letter-spacing: -0.05em; color: var(--hv-inkt); }
.hv-s--inkt .hv-h2, .hv-s--petrol .hv-h2, .hv-slot .hv-h2 { color: #fff; }
/* Typografie (10/11/2026): selectieve nadruk in een cursieve serif, zelfde kleur als de kop. */
.hv-serif { font-family: var(--hv-serif); font-style: italic; font-weight: 560; font-size: 1em; line-height: 1; letter-spacing: -0.035em; padding-right: .03em; color: var(--hv-inkt); }
/* Op donker: het merkgoud. */
.hv-s--inkt .hv-serif, .hv-s--petrol .hv-serif, .hv-slot .hv-serif { color: var(--hv-goud); }
.hv-h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }
.hv-lead { margin-top: 20px; max-width: 58ch; font-size: 18.5px; line-height: 1.6; letter-spacing: -0.011em; color: var(--hv-tekst-2); }
.hv-s--inkt .hv-lead, .hv-s--petrol .hv-lead { color: var(--hv-op-donker); }
.hv-kop-blok { max-width: 780px; margin-bottom: 56px; }
.hv-kop-blok--midden { margin-left: auto; margin-right: auto; text-align: center; }
.hv-kop-blok--midden .hv-lead { margin-left: auto; margin-right: auto; }
.hv-kop-blok--rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.hv-kop-blok--rij > div { max-width: 720px; }
/* Gouden 3D-lint onder de kernwoorden (10/11/2026), tekent zichzelf in: assets/onderstreep.svg. */
.hv-markeer { color: var(--hv-petrol); line-height: 1.8; padding-bottom: .34em; background: url('/assets/onderstreep.svg?v=5') no-repeat 0 100% / 100% .7em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ── Knoppen en links ─────────────────────────────────────────────────── */
.hv-knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--hv-r-s); font-family: var(--hv-body); font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--hv-ease); }
.hv-knop svg { width: 17px; height: 17px; flex: none; transition: transform .2s var(--hv-ease); }
.hv-knop:hover svg { transform: translateX(3px); }
.hv-knop:active { transform: translateY(1px); }
.hv-knop--primair, a.hv-knop--primair { background: var(--hv-petrol); color: #fff; }
.hv-knop--primair:hover { background: var(--hv-petrol-hover); color: #fff; }
.hv-knop--rand { background: #fff; border-color: var(--hv-lijn-2); color: var(--hv-tekst); }
.hv-knop--rand:hover { border-color: var(--hv-petrol); color: var(--hv-petrol); }
.hv-knop--licht { background: #fff; color: var(--hv-inkt); }
.hv-knop--licht:hover { background: var(--hv-goud-licht); color: var(--hv-inkt); }
.hv-knop--glas { background: transparent; border-color: rgba(255,255,255,0.28); color: #fff; }
.hv-knop--glas:hover { border-color: var(--hv-goud); color: var(--hv-goud-licht); }
.hv-knop--groot { min-height: 54px; padding: 0 26px; font-size: 16.5px; }
.hv-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.hv-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--hv-petrol); text-decoration: none; }
.hv-link svg { width: 16px; height: 16px; transition: transform .2s var(--hv-ease); }
.hv-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hv-link:hover svg { transform: translateX(3px); }
.hv-s--inkt .hv-link, .hv-s--petrol .hv-link { color: var(--hv-goud-licht); }

/* ── Kleine onderdelen ────────────────────────────────────────────────── */
.hv-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 9px; border-radius: 6px; font-size: 12.5px; line-height: 1.3; font-weight: 600; white-space: nowrap; }
.hv-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.hv-status--live { background: var(--hv-groen-tint); color: var(--hv-groen); }
.hv-status--config { background: var(--hv-amber-tint); color: var(--hv-amber); }
.hv-status--ontw { background: var(--hv-blauw-tint); color: var(--hv-blauw); }
.hv-status--gepland { background: #EEF0F0; color: #56605F; }
.hv-vb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hv-tekst-3); }
.hv-vb::before { content: ""; width: 14px; height: 1px; background: var(--hv-goud-diep); }
.hv-s--inkt .hv-vb { color: var(--hv-op-donker-2); }
.hv-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--hv-petrol-tint); color: var(--hv-petrol); flex: none; }
.hv-ic svg { width: 18px; height: 18px; }

/* Verschijnen bij scrollen: alleen opacity en een paar pixels */
.js .hv-in { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--hv-ease), transform .7s var(--hv-ease); }
.js .hv-in.is-in { opacity: 1; transform: none; }
.js .hv-in.hv-in-2 { transition-delay: .08s; }
.js .hv-in.hv-in-3 { transition-delay: .16s; }

/* ======================================================================
   DE BALK
   ====================================================================== */
.hv-kop { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--hv-kop-h); background: rgba(255,255,255,0.94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; font-family: var(--hv-body); color: var(--hv-tekst); }
.hv-kop.is-gescrold { border-bottom-color: var(--hv-lijn); box-shadow: 0 8px 24px -20px rgba(11,31,34,0.35); }
.hv-kop-rij { display: flex; align-items: center; gap: 28px; height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--hv-gutter); }
.hv-kop-logo { display: flex; align-items: center; flex: none; }
.hv-kop-logo img { display: block; width: auto; height: 36px; }
.hv-kop-links { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.hv-kop-link { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: 500 15px/1 var(--hv-body); letter-spacing: -0.012em; color: var(--hv-tekst-2); text-decoration: none; cursor: pointer; transition: color .15s ease, background .15s ease; }
.hv-kop-link:hover, .hv-kop-link[aria-expanded="true"] { color: var(--hv-tekst); background: var(--hv-grijs); }
.hv-kop-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.hv-kop-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.hv-kop-acties { display: flex; align-items: center; gap: 6px; flex: none; }
.hv-kop-acties .lang-toggle { height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--hv-tekst-2); font: 500 14px/1 var(--hv-body); }
.hv-kop-acties .lang-toggle:hover { background: var(--hv-grijs); color: var(--hv-tekst); }
.hv-kop-acties .lang-menu, .hv-menu .lang-menu { background: #fff; border: 1px solid var(--hv-lijn); box-shadow: var(--hv-schaduw); }
.hv-kop-acties .lang-opt, .hv-menu .lang-opt { color: var(--hv-tekst-2); }
.hv-kop-acties .lang-opt:hover, .hv-menu .lang-opt:hover { background: var(--hv-grijs); color: var(--hv-tekst); }
.hv-kop-acties .lang-opt.active, .hv-menu .lang-opt.active { background: var(--hv-petrol-tint); color: var(--hv-petrol); }
.hv-kop-acties .lang-opt.active .lang-code, .hv-menu .lang-opt.active .lang-code { color: var(--hv-petrol); }
.hv-kop-inlog { padding: 0 12px; }
.hv-kop-cta { min-height: 42px; padding: 0 18px; font-size: 14.5px; margin-left: 6px; }

.hv-drop { position: relative; }
.hv-drop-paneel { position: absolute; top: calc(100% + 14px); left: -12px; display: none; gap: 8px; padding: 10px; border: 1px solid var(--hv-lijn); border-radius: var(--hv-r); background: #fff; box-shadow: 0 30px 60px -24px rgba(11,31,34,0.3); }
.hv-drop.is-open .hv-drop-paneel { display: grid; animation: hv-drop-in .18s var(--hv-ease); }
@keyframes hv-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hv-drop-paneel--2 { grid-template-columns: 290px 290px; }
.hv-drop-paneel--1 { grid-template-columns: 330px; }
.hv-drop-kolom { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.hv-drop-kolom + .hv-drop-kolom { border-left: 1px solid var(--hv-lijn); padding-left: 14px; }
.hv-drop-kop { margin: 4px 10px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-tekst-3); }
.hv-drop-item { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: start; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--hv-tekst); transition: background .15s ease; }
.hv-drop-item:hover { background: var(--hv-grijs); }
.hv-drop-item .hv-ic { grid-row: span 2; width: 34px; height: 34px; }
.hv-drop-item strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.hv-drop-item span:not(.hv-ic) { font-size: 13px; line-height: 1.4; color: var(--hv-tekst-3); }
.hv-drop-item--simpel { grid-template-columns: 1fr; }
.hv-drop-voet { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding: 14px 16px; border-radius: 10px; background: var(--hv-goud-tint); font-size: 13.5px; color: var(--hv-tekst-2); }

.hv-burger { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.hv-burger span { display: block; width: 20px; height: 1.6px; margin: 2.5px 0; background: var(--hv-tekst); transition: transform .25s ease, opacity .2s ease; }
html.hv-menu-open .hv-burger span:nth-child(1) { transform: translateY(4.1px) rotate(45deg); }
html.hv-menu-open .hv-burger span:nth-child(2) { transform: translateY(-4.1px) rotate(-45deg); }
.hv-menu { position: fixed; inset: var(--hv-kop-h) 0 0 0; z-index: 999; overflow-y: auto; padding: 18px var(--hv-gutter) 32px; background: #fff; font-family: var(--hv-body); border-top: 1px solid var(--hv-lijn); }
.hv-menu[hidden] { display: none; }
html.hv-menu-open, html.hv-menu-open body { overflow: hidden; }
.hv-menu-kop { margin: 22px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-tekst-3); }
.hv-menu-kop:first-child { margin-top: 4px; }
.hv-menu-link { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--hv-lijn); font-size: 17px; font-weight: 500; color: var(--hv-tekst); text-decoration: none; }
.hv-menu .lang-switch { margin-top: 18px; }
.hv-menu .lang-toggle { color: var(--hv-tekst-2); }
.hv-menu-cta { width: 100%; margin-top: 22px; }

@media (max-width: 1120px) {
  .hv-kop-links, .hv-kop-inlog, .hv-kop-acties > .lang-switch { display: none; }
  .hv-burger { display: grid; }
  .hv-kop-rij { justify-content: space-between; gap: 12px; }
  .hv-kop-acties { margin-left: auto; }
}
@media (max-width: 520px) {
  :root { --hv-kop-h: 64px; --hv-gutter: 16px; }
  .hv-kop-logo img { height: 26px; }
  .hv-kop-cta { min-height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 380px) {
  .hv-kop-cta { display: none; }
}

/* ======================================================================
   HERO
   ====================================================================== */
.hv-held { padding: calc(var(--hv-kop-h) + 72px) 0 88px; background: #fff; overflow: hidden; }
.hv-held::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; background: linear-gradient(180deg, var(--hv-goud-tint) 0%, rgba(251,246,236,0) 58%); pointer-events: none; }
.hv-held-rij { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 64px; align-items: center; }
.hv-held .hv-lead { font-size: 19px; max-width: 54ch; }
.hv-held-feiten { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hv-lijn); font-size: 14px; color: var(--hv-tekst-2); }
.hv-held-feiten li { display: inline-flex; align-items: center; gap: 8px; }
.hv-held-feiten svg { width: 16px; height: 16px; color: var(--hv-petrol); flex: none; }

/* Het productbeeld in de hero: één aanvraag, van bericht tot proefrit */
.hv-held-beeld { position: relative; display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: end; padding-bottom: 34px; }
.hv-held-beeld .hv-app { grid-column: 2; grid-row: 1; }
.hv-held-beeld .hv-app .hv-app-koper, .hv-held-beeld .hv-app .hv-tijdlijn { padding-left: 42px; }
.hv-held-beeld .hv-app .hv-app-voet { margin-left: 42px; }
.hv-app { position: relative; border: 1px solid var(--hv-lijn); border-radius: 16px; background: #fff; box-shadow: var(--hv-schaduw); overflow: hidden; }
.hv-app-balk { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hv-lijn); background: #FBFCFC; }
.hv-app-balk img { width: 24px; height: 24px; }
.hv-app-balk strong { font-size: 14.5px; font-weight: 600; }
.hv-app-balk span { margin-left: auto; font-size: 12.5px; color: var(--hv-tekst-3); }
.hv-app-koper { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.hv-app-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hv-petrol-tint); color: var(--hv-petrol); font-size: 13px; font-weight: 700; flex: none; }
.hv-app-koper div { flex: 1; min-width: 0; }
.hv-app-koper strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.hv-app-koper div span { display: block; font-size: 13px; color: var(--hv-tekst-3); }
.hv-tijdlijn { position: relative; padding: 10px 18px 6px; }
.hv-tijdlijn li { position: relative; display: grid; grid-template-columns: 46px 22px 1fr; gap: 0 10px; padding: 9px 0; }
.hv-tijdlijn time { font: 500 12.5px/20px var(--hv-mono); color: var(--hv-tekst-3); font-variant-numeric: tabular-nums; }
.hv-tijdlijn i { position: relative; display: block; width: 10px; height: 10px; margin: 5px 6px 0; border-radius: 50%; background: #fff; border: 2px solid var(--hv-lijn-2); }
.hv-tijdlijn li:not(:last-child) i::after { content: ""; position: absolute; left: 2px; top: 12px; width: 2px; height: 38px; background: var(--hv-lijn); }
.hv-tijdlijn li.is-gedaan i { border-color: var(--hv-petrol); background: var(--hv-petrol); }
.hv-tijdlijn li.is-goud i { border-color: var(--hv-goud-diep); background: var(--hv-goud); box-shadow: 0 0 0 4px rgba(214,188,140,0.3); }
.hv-tijdlijn strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 20px; }
.hv-tijdlijn div > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--hv-tekst-2); }
.hv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hv-chips em { font-style: normal; white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: var(--hv-grijs); border: 1px solid var(--hv-lijn); font-size: 12px; color: var(--hv-tekst-2); }
.hv-chips em.is-warm { background: var(--hv-goud-tint); border-color: rgba(177,147,94,0.35); color: #6E5528; }
.hv-app-voet { display: flex; align-items: center; gap: 10px; margin: 8px 18px 18px; padding: 12px 14px; border-radius: 10px; background: var(--hv-petrol-tint); font-size: 13.5px; color: var(--hv-petrol); font-weight: 500; }
.hv-app-voet svg { width: 16px; height: 16px; flex: none; }

.hv-held-tel { position: relative; z-index: 2; grid-column: 1; grid-row: 1; width: 226px; margin: 0 -30px -18px 0; padding: 12px; border-radius: 26px; background: var(--hv-inkt); box-shadow: 0 30px 60px -24px rgba(11,31,34,0.55); }
.hv-held-tel-scherm { border-radius: 16px; background: #EFE9E0; padding: 12px 10px 14px; }
.hv-held-tel-kop { display: flex; align-items: center; gap: 8px; margin: -12px -10px 10px; padding: 10px; border-radius: 16px 16px 0 0; background: #fff; font-size: 12px; font-weight: 600; color: var(--hv-tekst); }
.hv-held-tel-kop span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hv-petrol); color: #fff; font-size: 9.5px; font-weight: 700; }
.hv-bel { max-width: 92%; padding: 7px 9px; border-radius: 9px; font-size: 11.5px; line-height: 1.42; color: var(--hv-tekst); }
.hv-bel + .hv-bel { margin-top: 6px; }
.hv-bel--uit { margin-left: auto; background: #D9FDD3; border-top-right-radius: 3px; }
.hv-bel--in { background: #fff; border-top-left-radius: 3px; }
.hv-held-onder { position: absolute; right: 0; bottom: 0; }
.hv-mini--donker { background: transparent; border-color: rgba(255,255,255,0.12); color: #fff; box-shadow: none; }
.hv-mini-noot { font-size: 12.5px; color: var(--hv-op-donker); }
.hv-vb--onder { margin-top: 16px; }

/* Verschijnen van de tijdlijn */
.js .hv-held-beeld .hv-tijdlijn li, .js .hv-held-beeld .hv-app-voet { opacity: 0; transform: translateY(6px); animation: hv-rij-in .55s var(--hv-ease) forwards; }
.js .hv-held-beeld .hv-tijdlijn li:nth-child(1) { animation-delay: .35s; }
.js .hv-held-beeld .hv-tijdlijn li:nth-child(2) { animation-delay: .8s; }
.js .hv-held-beeld .hv-tijdlijn li:nth-child(3) { animation-delay: 1.25s; }
.js .hv-held-beeld .hv-tijdlijn li:nth-child(4) { animation-delay: 1.7s; }
.js .hv-held-beeld .hv-app-voet { animation-delay: 2.2s; }
@keyframes hv-rij-in { to { opacity: 1; transform: none; } }

/* Pers */
.hv-pers { border-top: 1px solid var(--hv-lijn); border-bottom: 1px solid var(--hv-lijn); background: #fff; }
.hv-pers-rij { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.hv-pers-rij p { font-size: 14.5px; color: var(--hv-tekst-2); max-width: 62ch; }
.hv-pers-link { display: inline-flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 600; color: var(--hv-petrol); text-decoration: none; }
.hv-pers-link img { width: 40px; height: 40px; border-radius: 8px; }
.hv-pers-link span span { color: var(--hv-tekst-3); font-weight: 500; }
.hv-pers-link:hover > span { text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================
   HET PROBLEEM (donker)
   ====================================================================== */
.hv-probleem-rij { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.hv-probleem-rij > div:first-child { position: sticky; top: calc(var(--hv-kop-h) + 40px); }
.hv-dag { border-top: 1px solid var(--hv-inkt-lijn); }
.hv-dag li { display: grid; grid-template-columns: 76px 1fr; gap: 6px 24px; padding: 26px 0; border-bottom: 1px solid var(--hv-inkt-lijn); }
.hv-dag time { font: 500 15px/28px var(--hv-mono); color: var(--hv-goud); font-variant-numeric: tabular-nums; }
.hv-dag strong { display: block; font-family: var(--hv-kop); font-size: 21px; font-weight: 500; line-height: 1.32; letter-spacing: -0.015em; color: #fff; }
.hv-dag span { display: block; margin-top: 6px; font-size: 15.5px; color: var(--hv-op-donker-2); }
.hv-probleem-slot { margin-top: 40px; font-family: var(--hv-kop); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.3; letter-spacing: -0.02em; color: #fff; max-width: 30ch; }
.hv-probleem-slot em { font-family: var(--hv-serif); font-style: italic; font-weight: 500; letter-spacing: -0.02em; color: var(--hv-goud); }

/* ======================================================================
   HOE HET WERKT
   ====================================================================== */
.hv-flow { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; counter-reset: stap; }
.hv-flow::before { content: ""; position: absolute; left: 22px; right: calc(100% / 7 - 22px); top: 21px; height: 2px; background: linear-gradient(90deg, var(--hv-petrol) 0%, var(--hv-petrol) 82%, var(--hv-goud) 100%); opacity: .25; }
.hv-flow li { position: relative; padding-right: 18px; counter-increment: stap; }
.hv-flow li::before { content: counter(stap); position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--hv-lijn-2); font: 600 15px/1 var(--hv-kop); color: var(--hv-petrol); }
.hv-flow li:last-child::before { background: var(--hv-goud); border-color: var(--hv-goud-diep); color: var(--hv-inkt); }
.hv-flow strong { display: block; margin-top: 18px; font-family: var(--hv-kop); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.hv-flow span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--hv-tekst-2); }
.hv-dossier-rij { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; margin-top: 88px; padding-top: 72px; border-top: 1px solid var(--hv-lijn); }
.hv-vinkjes { margin-top: 26px; display: grid; gap: 14px; }
.hv-vinkjes li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; color: var(--hv-tekst-2); }
.hv-vinkjes svg { width: 20px; height: 20px; margin-top: 2px; color: var(--hv-petrol); }
.hv-vinkjes strong { color: var(--hv-tekst); font-weight: 600; }
.hv-s--inkt .hv-vinkjes li { color: var(--hv-op-donker); }
.hv-s--inkt .hv-vinkjes strong { color: #fff; }
.hv-s--inkt .hv-vinkjes svg { color: var(--hv-goud); }

.hv-dossier { border: 1px solid var(--hv-lijn); border-radius: 16px; background: #fff; box-shadow: var(--hv-schaduw); overflow: hidden; }
.hv-dossier-kop { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--hv-lijn); }
.hv-dossier-kop div { flex: 1; min-width: 0; }
.hv-dossier-kop strong { display: block; font-size: 16px; font-weight: 600; }
.hv-dossier-kop div span { display: block; font-size: 13px; color: var(--hv-tekst-3); }
.hv-dossier dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; }
.hv-dossier dt, .hv-dossier dd { margin: 0; padding: 13px 20px; border-bottom: 1px solid var(--hv-lijn); font-size: 14px; line-height: 1.45; }
.hv-dossier dt { color: var(--hv-tekst-3); }
.hv-dossier dd { color: var(--hv-tekst); font-weight: 500; }
.hv-dossier-samenvatting { padding: 16px 20px; background: var(--hv-goud-tint); font-size: 14px; line-height: 1.55; color: var(--hv-tekst-2); }
.hv-dossier-samenvatting b { display: block; margin-bottom: 4px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #6E5528; }
.hv-dossier-acties { display: flex; gap: 10px; padding: 14px 20px; }
.hv-nep-knop { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--hv-lijn-2); font-size: 13px; font-weight: 600; color: var(--hv-tekst); background: #fff; }
.hv-nep-knop--petrol { background: var(--hv-petrol); border-color: var(--hv-petrol); color: #fff; }

/* ======================================================================
   PRODUCT: de Agents, elk met een eigen beeld (zoals Numa)
   ====================================================================== */
.hv-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.hv-kaart { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: #fff; border: 1px solid var(--hv-lijn); overflow: hidden; }
.hv-kaart--7 { grid-column: span 7; }
.hv-kaart--5 { grid-column: span 5; }
.hv-kaart--4 { grid-column: span 4; }
.hv-kaart--donker { background: var(--hv-inkt); border-color: var(--hv-inkt); color: #fff; }
.hv-kaart-beeld { position: relative; flex: 1; min-height: 240px; display: flex; align-items: center; justify-content: center; padding: 28px; background: var(--hv-grijs); border-bottom: 1px solid var(--hv-lijn); overflow: hidden; }
.hv-kaart--donker .hv-kaart-beeld { background: radial-gradient(120% 90% at 80% 0%, #1D3D42 0%, var(--hv-inkt-2) 55%, var(--hv-inkt) 100%); border-bottom-color: var(--hv-inkt-lijn); }
.hv-kaart-tekst { padding: 24px 26px 26px; }
.hv-kaart-tag { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-tekst-3); }
.hv-kaart--donker .hv-kaart-tag { color: var(--hv-goud); }
.hv-kaart-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hv-kaart-tekst p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--hv-tekst-2); max-width: 48ch; }
.hv-kaart--donker .hv-kaart-tekst p { color: var(--hv-op-donker); }
.hv-kaart .hv-link { margin-top: 14px; font-size: 14.5px; }
.hv-kaart--donker .hv-link { color: var(--hv-goud-licht); }

/* Mini-interfaces in de kaarten */
.hv-mini { width: 100%; max-width: 380px; border-radius: 12px; background: #fff; border: 1px solid var(--hv-lijn); box-shadow: 0 18px 36px -22px rgba(11,31,34,0.35); font-size: 12.5px; color: var(--hv-tekst); }
.hv-mini-kop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--hv-lijn); font-weight: 600; }
.hv-mini-kop .hv-status { margin-left: auto; padding: 2px 8px; font-size: 11px; }
.hv-mini-body { padding: 12px; display: grid; gap: 8px; }
.hv-mini-rij { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--hv-grijs); }
.hv-mini-rij b { font-weight: 600; }
.hv-mini-rij span { color: var(--hv-tekst-3); }

/* WhatsApp in de grote donkere kaart */
.hv-chat { width: 100%; max-width: 440px; display: grid; gap: 8px; }
.hv-chat .hv-bel { font-size: 13.5px; max-width: 80%; padding: 9px 12px; border-radius: 12px; }
.hv-chat .hv-bel--in { background: #fff; color: var(--hv-tekst); }
.hv-chat .hv-bel--uit { background: #D9FDD3; color: var(--hv-tekst); }
.hv-chat-afspraak { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(214,188,140,0.4); background: rgba(214,188,140,0.1); color: #fff; font-size: 13.5px; }
.hv-chat-afspraak b { color: var(--hv-goud-licht); font-weight: 600; }
.hv-chat-afspraak svg { width: 20px; height: 20px; color: var(--hv-goud); flex: none; }

/* Website-widget */
.hv-site { width: 100%; max-width: 340px; border-radius: 12px; background: #fff; border: 1px solid var(--hv-lijn); overflow: hidden; box-shadow: 0 18px 36px -22px rgba(11,31,34,0.35); }
.hv-site-auto { height: 92px; background: linear-gradient(135deg, #D9DEDD, #EEF1F0); position: relative; }
.hv-site-auto::after { content: ""; position: absolute; left: 14px; bottom: 12px; width: 120px; height: 8px; border-radius: 4px; background: rgba(11,31,34,0.18); box-shadow: 0 -16px 0 -1px rgba(11,31,34,0.12); }
.hv-site-widget { margin: -26px 12px 12px auto; position: relative; width: 78%; border-radius: 12px; background: #fff; border: 1px solid var(--hv-lijn); box-shadow: 0 14px 28px -16px rgba(11,31,34,0.4); padding: 10px; font-size: 12px; }
.hv-site-widget p + p { margin-top: 6px; }
.hv-site-widget .hv-site-vraag { padding: 7px 9px; border-radius: 8px; background: var(--hv-grijs); }
.hv-site-widget .hv-site-antw { padding: 7px 9px; border-radius: 8px; background: var(--hv-petrol); color: #fff; }

/* Afspraken */
.hv-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hv-slots span { padding: 7px 0; border-radius: 7px; border: 1px solid var(--hv-lijn); text-align: center; font: 500 12px/1 var(--hv-mono); color: var(--hv-tekst-2); }
.hv-slots span.is-bezet { background: repeating-linear-gradient(135deg, #F1F3F3 0 4px, #fff 4px 8px); color: #A0A8A9; text-decoration: line-through; }
.hv-slots span.is-gekozen { background: var(--hv-petrol); border-color: var(--hv-petrol); color: #fff; }

/* Opvolging */
.hv-volg { display: grid; gap: 0; }
.hv-volg li { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--hv-lijn); }
.hv-volg li:last-child { border-bottom: 0; }
.hv-volg time { font: 500 11.5px/18px var(--hv-mono); color: var(--hv-tekst-3); }
.hv-volg b { font-weight: 600; }

/* Telefoon */
.hv-oproep { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--hv-inkt); color: #fff; }
.hv-oproep svg { width: 18px; height: 18px; color: var(--hv-goud); }
.hv-oproep span { margin-left: auto; font: 500 11.5px/1 var(--hv-mono); color: var(--hv-op-donker-2); }
.hv-golf { display: flex; align-items: center; gap: 3px; height: 26px; }
.hv-golf i { display: block; width: 3px; border-radius: 2px; background: var(--hv-goud); opacity: .9; }

/* Faro */
.hv-faro { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; width: 100%; max-width: 380px; }
.hv-faro img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(11,31,34,0.18)); }
.hv-faro .hv-mini { max-width: none; }

/* ======================================================================
   WHATSAPP: de iPhone (markup en script van vroeger, hv-wa)
   ====================================================================== */
.hv-wa-rij { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 80px; align-items: center; }
.hv-wa-beeld { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hv-wa-beeld::before { content: ""; position: absolute; inset: 8% 6% 14%; border-radius: 28px; background: linear-gradient(160deg, var(--hv-goud-tint), var(--hv-petrol-tint)); z-index: 0; }
.hv-wa-beeld > * { position: relative; z-index: 1; }
.hv-punten { display: grid; gap: 22px; margin-top: 32px; }
.hv-punten li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
.hv-punten strong { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.hv-punten p { margin-top: 3px; font-size: 15px; color: var(--hv-tekst-2); }

/* ======================================================================
   OVERZICHT: het dashboard (donker)
   ====================================================================== */
.hv-dash { display: grid; grid-template-columns: 200px 1fr; border-radius: 18px; background: #fff; color: var(--hv-tekst); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; }
.hv-dash-zij { padding: 18px 12px; background: #F7F8F8; border-right: 1px solid var(--hv-lijn); }
.hv-dash-merk { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 600; }
.hv-dash-merk img { width: 26px; height: 26px; }
.hv-dash-zij li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--hv-tekst-2); }
.hv-dash-zij li.is-aan { background: #fff; color: var(--hv-tekst); font-weight: 600; box-shadow: 0 0 0 1px var(--hv-lijn); }
.hv-dash-zij svg { width: 16px; height: 16px; color: var(--hv-tekst-3); }
.hv-dash-zij li.is-aan svg { color: var(--hv-petrol); }
.hv-dash-zij em { margin-left: auto; font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 10px; background: var(--hv-petrol); color: #fff; }
.hv-dash-hoofd { padding: 22px 24px 24px; min-width: 0; }
.hv-dash-titel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.hv-dash-titel strong { font-family: var(--hv-kop); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hv-dash-titel span { font-size: 12.5px; color: var(--hv-tekst-3); }
.hv-dash-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.hv-dash-tegel { padding: 14px; border-radius: 12px; border: 1px solid var(--hv-lijn); }
.hv-dash-tegel span { display: block; font-size: 12px; color: var(--hv-tekst-3); }
.hv-dash-tegel b { display: block; margin-top: 6px; font-family: var(--hv-kop); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.hv-dash-tegel.is-goud { background: var(--hv-goud-tint); border-color: rgba(177,147,94,0.3); }
.hv-dash-tabel { width: 100%; border-collapse: collapse; }
.hv-dash-tabel th { padding: 0 10px 10px; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-tekst-3); border-bottom: 1px solid var(--hv-lijn); }
.hv-dash-tabel td { padding: 12px 10px; border-bottom: 1px solid var(--hv-lijn); white-space: nowrap; }
.hv-dash-tabel tr:last-child td { border-bottom: 0; }
.hv-dash-tabel td:first-child { font-weight: 600; }
.hv-dash-tabel td small { display: block; font-size: 12px; font-weight: 400; color: var(--hv-tekst-3); }
.hv-kanaal { display: inline-flex; align-items: center; gap: 6px; color: var(--hv-tekst-2); }
.hv-kanaal i { width: 8px; height: 8px; border-radius: 2px; background: var(--hv-petrol); }
.hv-kanaal.is-site i { background: var(--hv-goud-diep); }
.hv-kanaal.is-portaal i { background: #7A8B8E; }
.hv-dash .hv-status { font-size: 11.5px; padding: 3px 8px; }
.hv-dash-onder { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.hv-dash-punten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.hv-dash-punten li { padding-top: 20px; border-top: 1px solid var(--hv-inkt-lijn); }
.hv-dash-punten strong { display: block; font-family: var(--hv-kop); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.hv-dash-punten p { margin-top: 8px; font-size: 15px; color: var(--hv-op-donker); }

/* ======================================================================
   VOOR WIE (tabbladen, zoals Impel)
   ====================================================================== */
.hv-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--hv-lijn); overflow-x: auto; scrollbar-width: none; }
.hv-tabs::-webkit-scrollbar { display: none; }
.hv-tab { position: relative; flex: none; padding: 16px 18px; border: 0; background: none; font: 500 15.5px/1.2 var(--hv-body); color: var(--hv-tekst-3); cursor: pointer; white-space: nowrap; transition: color .15s ease; }
.hv-tab:hover { color: var(--hv-tekst); }
.hv-tab[aria-selected="true"] { color: var(--hv-tekst); font-weight: 600; }
.hv-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--hv-petrol); }
.hv-paneel { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: center; padding-top: 56px; }
.hv-paneel[hidden] { display: none; }
.hv-paneel-foto { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--hv-grijs); }
.hv-paneel-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.hv-paneel-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,34,0) 55%, rgba(11,31,34,0.55) 100%); }
.hv-paneel-foto figcaption { position: absolute; left: 20px; bottom: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 500; }
.hv-paneel-foto figcaption::before { content: ""; width: 18px; height: 2px; background: var(--hv-goud); }
.hv-paneel .hv-vinkjes { margin-top: 22px; }
.hv-paneel-voorraad { display: grid; place-items: center; padding: 32px; background: linear-gradient(160deg, var(--hv-goud-tint), var(--hv-petrol-tint)); }
.hv-paneel-voorraad::after { display: none; }
.hv-paneel-voorraad .hv-mini { max-width: 400px; font-size: 14px; }

/* ======================================================================
   KOPPELINGEN
   ====================================================================== */
.hv-koppel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--hv-lijn-2); }
.hv-koppel li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--hv-lijn-2); }
.hv-koppel strong { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.hv-koppel p { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.55; color: var(--hv-tekst-2); max-width: 54ch; }
.hv-legende { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 28px; font-size: 13.5px; color: var(--hv-tekst-2); }
.hv-legende li { display: inline-flex; align-items: center; gap: 8px; }

/* ======================================================================
   IMPLEMENTATIE
   ====================================================================== */
.hv-impl { border-top: 1px solid var(--hv-lijn); }
.hv-impl-kop, .hv-impl li { display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px; align-items: start; }
.hv-impl-kop { padding: 14px 0; border-bottom: 1px solid var(--hv-lijn); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-tekst-3); }
.hv-impl li { padding: 24px 0; border-bottom: 1px solid var(--hv-lijn); }
.hv-impl-nr { font: 600 15px/26px var(--hv-mono); color: var(--hv-goud-diep); }
.hv-impl-stap { font-family: var(--hv-kop); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.hv-impl-wij, .hv-impl-jij { font-size: 15px; line-height: 1.55; color: var(--hv-tekst-2); }
.hv-impl-jij { color: var(--hv-tekst-3); }
.hv-impl-wij b, .hv-impl-jij b { display: none; }
.hv-aanlever { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; margin-top: 48px; padding: 28px 32px; border-radius: 16px; background: var(--hv-goud-tint); border: 1px solid rgba(177,147,94,0.28); }
.hv-aanlever h3 { font-size: 19px; }
.hv-aanlever ul { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; color: var(--hv-tekst-2); }
.hv-aanlever li { display: inline-flex; align-items: center; gap: 8px; }
.hv-aanlever li svg { width: 18px; height: 18px; color: var(--hv-petrol); }

/* ======================================================================
   OMZETCALCULATOR
   ====================================================================== */
.hv-reken { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 18px; overflow: hidden; border: 1px solid var(--hv-lijn); background: #fff; }
.hv-reken-in { padding: 36px; display: grid; gap: 24px; }
.hv-veld label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; }
.hv-veld output { font: 600 15px/1 var(--hv-mono); color: var(--hv-petrol); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-veld small { display: block; margin-top: 4px; font-size: 13px; color: var(--hv-tekst-3); }
.hv-veld input[type="range"] { width: 100%; margin-top: 12px; accent-color: var(--hv-petrol); height: 24px; }
.hv-veld.is-aanname label::after { content: attr(data-label); order: 0; }
.hv-reken-uit { padding: 36px; background: var(--hv-inkt); color: #fff; display: flex; flex-direction: column; }
.hv-reken-vgl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hv-reken-blok { padding: 16px; border-radius: 12px; border: 1px solid var(--hv-inkt-lijn); }
.hv-reken-blok span { display: block; font-size: 12.5px; color: var(--hv-op-donker-2); }
.hv-reken-blok b { display: block; margin-top: 6px; font-family: var(--hv-kop); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hv-reken-blok.is-met { border-color: rgba(214,188,140,0.45); background: rgba(214,188,140,0.08); }
.hv-reken-blok.is-met b { color: var(--hv-goud-licht); }
.hv-reken-impact { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hv-inkt-lijn); }
.hv-reken-impact span { display: block; font-size: 14px; color: var(--hv-op-donker); }
.hv-reken-impact b { display: block; margin-top: 4px; font-family: var(--hv-kop); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; color: var(--hv-goud); font-variant-numeric: tabular-nums; }
.hv-reken-impact small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--hv-op-donker-2); }
.hv-reken-aannames { margin-top: 22px; display: grid; gap: 8px; font-size: 13.5px; color: var(--hv-op-donker-2); }
.hv-reken-aannames li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; }
.hv-reken-aannames li::before { content: ""; width: 6px; height: 6px; margin-top: 7px; border-radius: 2px; background: var(--hv-goud); }
.hv-reken-uit .hv-knoppen { margin-top: auto; padding-top: 26px; }

/* ======================================================================
   FAQ (main.js opent en sluit .faq-item)
   ====================================================================== */
.hv-faq-rij { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.hv-faq-rij > div:first-child { position: sticky; top: calc(var(--hv-kop-h) + 40px); }
.hv-faq { border-top: 1px solid var(--hv-lijn); }
.hv-faq .faq-item { border: 0; border-bottom: 1px solid var(--hv-lijn); border-radius: 0; background: none; margin: 0; padding: 0; }
.hv-faq .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px 0; border: 0; background: none; text-align: left; font: 600 17px/1.4 var(--hv-body); color: var(--hv-tekst); cursor: pointer; }
.hv-faq .faq-question:hover { color: var(--hv-petrol); }
.hv-faq .faq-chevron { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hv-lijn-2); font-size: 0; transition: transform .25s ease, background .2s ease; }
.hv-faq .faq-chevron::before { content: ""; width: 8px; height: 8px; border-right: 1.6px solid var(--hv-tekst-2); border-bottom: 1.6px solid var(--hv-tekst-2); transform: translateY(-2px) rotate(45deg); }
.hv-faq .faq-item.open .faq-chevron { transform: rotate(180deg); background: var(--hv-petrol-tint); }
.hv-faq .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.hv-faq .faq-item.open .faq-answer { max-height: 420px; }
.hv-faq .faq-answer-inner { padding: 0 54px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--hv-tekst-2); }
.hv-faq .faq-answer-inner a { color: var(--hv-petrol); font-weight: 600; }

/* ======================================================================
   SLOT
   ====================================================================== */
.hv-slot { position: relative; overflow: hidden; padding: 112px 0; background: var(--hv-petrol); color: #fff; }
.hv-slot::before { content: ""; position: absolute; right: -180px; top: -220px; width: 620px; height: 620px; border-radius: 50%; border: 1px solid rgba(214,188,140,0.28); box-shadow: 0 0 0 90px rgba(214,188,140,0.04), 0 0 0 180px rgba(214,188,140,0.03); pointer-events: none; }
.hv-slot-rij { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 56px; align-items: end; }
.hv-slot .hv-h2 { max-width: 18ch; }
.hv-slot .hv-lead { color: rgba(255,255,255,0.8); }
.hv-slot-acties { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hv-slot-acties a.hv-mail { color: rgba(255,255,255,0.8); font-size: 15px; text-decoration: none; }
.hv-slot-acties a.hv-mail:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hv-slot .hv-knop--licht { color: var(--hv-petrol); }

/* ======================================================================
   DE VOET
   ====================================================================== */
.hv-voet { background: var(--hv-inkt); color: var(--hv-op-donker); font-family: var(--hv-body); font-size: 14.5px; }
.hv-voet a { color: var(--hv-op-donker); text-decoration: none; transition: color .15s ease; }
.hv-voet a:hover { color: #fff; }
.hv-voet-rij { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 64px; max-width: 1240px; margin: 0 auto; padding: 80px var(--hv-gutter) 56px; }
.hv-voet-merk img { width: auto; height: 34px; }
.hv-voet-slogan { margin: 22px 0 0; max-width: 30ch; font-family: var(--hv-serif); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.25; letter-spacing: -0.005em; color: var(--hv-goud); }
.hv-voet-adres { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.hv-voet-merk .hv-knop { margin-top: 26px; }
.hv-voet-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.hv-voet-kolom { display: flex; flex-direction: column; gap: 10px; }
.hv-voet-kop { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-goud); }
.hv-voet-onder { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; max-width: 1240px; margin: 0 auto; padding: 24px var(--hv-gutter) 32px; border-top: 1px solid var(--hv-inkt-lijn); }
.hv-voet-onder .footer-copy { margin: 0; color: var(--hv-op-donker-2); }
.hv-voet-juridisch { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-right: auto; }
.hv-voet-juridisch a { color: var(--hv-op-donker-2); font-size: 13.5px; }
.hv-voet .lang-toggle { background: none; border: 1px solid var(--hv-inkt-lijn); border-radius: 8px; color: var(--hv-op-donker); height: 36px; padding: 0 12px; }
.hv-voet .lang-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.hv-voet .lang-menu { bottom: calc(100% + 8px); top: auto; background: #fff; border: 1px solid var(--hv-lijn); }
.hv-voet .lang-opt { color: var(--hv-tekst-2); }
.hv-voet .lang-opt:hover { color: var(--hv-tekst); background: var(--hv-grijs); }
.hv-voet .lang-opt.active { color: var(--hv-petrol); background: var(--hv-petrol-tint); }

/* Op elke pagina: ruimte onder de vaste balk en geen oude balkhoogte */

/* De cookiemelding in de nieuwe kleuren */
body #hv-toestemming { font-family: var(--hv-body); }
body #hv-toestemming button[data-keuze="ja"], body #hv-toestemming .toestemming-ja { background: var(--hv-petrol) !important; color: #fff !important; border-color: var(--hv-petrol) !important; }

/* ======================================================================
   SMALLER
   ====================================================================== */
@media (max-width: 1080px) {
  .hv-s { padding: 96px 0; }
  .hv-held-rij, .hv-probleem-rij, .hv-dossier-rij, .hv-wa-rij, .hv-paneel, .hv-faq-rij, .hv-slot-rij { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hv-probleem-rij > div:first-child, .hv-faq-rij > div:first-child { position: static; }
  .hv-held-beeld { max-width: 560px; }
  .hv-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 0; }
  .hv-flow::before { display: none; }
  .hv-kaart--7, .hv-kaart--5 { grid-column: span 12; }
  .hv-kaart--4 { grid-column: span 6; }
  .hv-dash { grid-template-columns: 1fr; }
  .hv-dash-zij { display: none; }
  .hv-dash-punten { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hv-dash-punten li { padding: 20px 0; }
  .hv-reken { grid-template-columns: minmax(0, 1fr); }
  .hv-voet-rij { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hv-wa-rij .hv-wa-beeld { order: 2; }
  .hv-aanlever { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .hv { font-size: 16px; }
  .hv-s { padding: 72px 0; }
  .hv-kop-blok { margin-bottom: 36px; }
  .hv-kop-blok--rij { flex-direction: column; align-items: flex-start; }
  .hv-lead, .hv-held .hv-lead { font-size: 17px; }
  .hv-held { padding: calc(var(--hv-kop-h) + 36px) 0 56px; }
  .hv-held-beeld { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .hv-held-tel { display: none; }
  .hv-held-beeld .hv-app { grid-column: 1; }
  .hv-held-beeld .hv-app .hv-app-koper, .hv-held-beeld .hv-app .hv-tijdlijn { padding-left: 16px; }
  .hv-held-beeld .hv-app .hv-app-voet { margin-left: 16px; }
  .hv-held-onder { position: static; margin-top: 14px; }
  .hv-held-feiten { gap: 10px 18px; }
  .hv-knoppen { gap: 12px; }
  .hv-knoppen .hv-knop { width: 100%; }
  .hv-knoppen .hv-link { width: 100%; justify-content: center; padding: 6px 0; }
  .hv-pers-rij { flex-direction: column; align-items: flex-start; }
  .hv-dag li { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .hv-dag strong { font-size: 19px; }
  .hv-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hv-flow li { display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; padding: 0 0 22px; }
  .hv-flow li::before { grid-row: span 2; }
  .hv-flow strong { margin-top: 2px; }
  .hv-dossier-rij { margin-top: 56px; padding-top: 48px; }
  .hv-dossier dl { grid-template-columns: 112px 1fr; }
  .hv-dossier dt, .hv-dossier dd { padding: 11px 14px; font-size: 13.5px; }
  .hv-kaart--4 { grid-column: span 12; }
  .hv-kaart-beeld { min-height: 0; padding: 22px 16px; }
  .hv-kaart-tekst { padding: 20px; }
  .hv-dash-hoofd { padding: 16px; }
  .hv-dash-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-dash-tabel-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
  .hv-paneel { padding-top: 32px; gap: 28px; }
  .hv-paneel-foto { order: -1; }
  .hv-tab { padding: 14px 12px; font-size: 15px; }
  .hv-koppel { grid-template-columns: minmax(0, 1fr); }
  .hv-koppel li { grid-template-columns: minmax(0, 1fr); }
  .hv-koppel .hv-status { justify-self: start; }
  .hv-impl-kop { display: none; }
  .hv-impl li { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; }
  .hv-impl-wij, .hv-impl-jij { grid-column: 2; }
  .hv-impl-wij b, .hv-impl-jij b { display: inline; color: var(--hv-tekst); font-weight: 600; }
  .hv-aanlever { padding: 22px; }
  .hv-reken-in, .hv-reken-uit { padding: 24px 20px; }
  .hv-reken-vgl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hv-faq .faq-question { font-size: 16px; padding: 18px 0; }
  .hv-faq .faq-answer-inner { padding-right: 0; }
  .hv-slot { padding: 80px 0; }
  .hv-voet-rij { padding-top: 56px; }
  .hv-voet-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hv-in, .js .hv-held-beeld .hv-tijdlijn li, .js .hv-held-beeld .hv-app-voet { opacity: 1; transform: none; animation: none; transition: none; }
  .hv-knop, .hv-knop svg, .hv-link svg { transition: none; }
}

/* Na de eerste ronde (november 2026) */
.hv-mini.hv-mini--donker { background: transparent; border-color: rgba(255,255,255,0.12); color: #fff; box-shadow: none; }
.hv-slot .hv-label { color: var(--hv-goud); }
.hv-slot .hv-h2 { max-width: 22ch; }
.hv-slot::before { display: none; }
.hv-slot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--hv-goud-diep), var(--hv-goud), var(--hv-goud-licht)); }
.hv-voet a.hv-knop--licht, .hv-voet a.hv-knop--licht:hover { color: var(--hv-inkt); }
.hv-tijdlijn .hv-chips { display: flex; }
.hv-held-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.hv-held-beeld { grid-template-columns: 178px minmax(0, 1fr); }
.hv-held-tel { width: 210px; margin-right: -32px; }
.hv-held-beeld .hv-app .hv-app-koper, .hv-held-beeld .hv-app .hv-tijdlijn { padding-left: 40px; }
.hv-held-beeld .hv-app .hv-app-voet { margin-left: 40px; }
@media (min-width: 1081px) { .hv-held .hv-h1 { font-size: clamp(3rem, 4.1vw, 3.95rem); } }
@media (max-width: 1080px) { .hv-held-rij { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .hv-held-beeld { grid-template-columns: minmax(0, 1fr); }
  .hv-held-beeld .hv-app .hv-app-koper, .hv-held-beeld .hv-app .hv-tijdlijn { padding-left: 16px; }
  .hv-held-beeld .hv-app .hv-app-voet { margin-left: 16px; }
}
@media (max-width: 760px) {
  .hv-dash-tabel th:nth-child(2), .hv-dash-tabel td:nth-child(2), .hv-dash-tabel th:nth-child(4), .hv-dash-tabel td:nth-child(4) { display: none; }
  .hv-dash-tabel-wrap { overflow: visible; margin: 0; padding: 0; }
}

/* ======================================================================
   BRUG: de andere pagina's in de stijl van Helvaro 2026
   Hun inhoud gebruikt nog de klassen van vroeger (paghero, btn,
   cta-band, boek-, privacy-). Hier krijgen die dezelfde letters,
   kleuren en knoppen als de homepage. Alleen onder body.hv-body.
   ====================================================================== */
body.hv-body { background: #fff; }
body.hv-body main:not(.hv) :is(h1, h2, h3, .paghero-titel, .boek-titel, .cta-band-title, .section-title, .privacy-section-title, .hero-sm-title, .fl-faq-titel, .duo-titel, .rek-kop, .kennis-links-kop) { font-family: var(--hv-kop); font-weight: 600; letter-spacing: -0.025em; color: var(--hv-tekst); font-style: normal; }
body.hv-body main:not(.hv) :is(.paghero-titel, .boek-titel, .hero-sm-title, .fl-faq-titel) { font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.035em; }
body.hv-body main:not(.hv) .highlight { color: inherit; background: linear-gradient(transparent 70%, rgba(214,188,140,0.55) 70%, rgba(214,188,140,0.55) 92%, transparent 92%); -webkit-text-fill-color: currentColor; padding: 0 .04em; }
body.hv-body main:not(.hv) :is(.section-label, .boek-label, .fl-label, .fl-label-donker, .paghero-kicker) { color: var(--hv-petrol); }
body.hv-body main:not(.hv) :is(.paghero-lede, .boek-lede, .hero-sm-sub) { color: var(--hv-tekst-2); }
body.hv-body main:not(.hv) .paghero { background: linear-gradient(180deg, var(--hv-goud-tint), #fff); }
body.hv-body main:not(.hv) .paghero-bg, body.hv-body main:not(.hv) .hero-glow, body.hv-body main:not(.hv) .cta-band-glow { display: none; }
body.hv-body main:not(.hv) a.btn, body.hv-body main:not(.hv) button.btn { background: var(--hv-petrol); color: #fff; border: 1px solid var(--hv-petrol); border-radius: var(--hv-r-s); box-shadow: none; font-family: var(--hv-body); font-weight: 600; }
body.hv-body main:not(.hv) a.btn:hover, body.hv-body main:not(.hv) button.btn:hover { background: var(--hv-petrol-hover); border-color: var(--hv-petrol-hover); color: #fff; }
body.hv-body main:not(.hv) .btn-ghost { background: #fff !important; color: var(--hv-tekst) !important; border-color: var(--hv-lijn-2) !important; }
body.hv-body main:not(.hv) .cta-band { background: var(--hv-petrol); }
body.hv-body main:not(.hv) .cta-band .cta-band-title { color: #fff; }
body.hv-body main:not(.hv) .cta-band .cta-band-sub { color: rgba(255,255,255,0.8); }
body.hv-body main:not(.hv) .cta-band a.btn { background: #fff; color: var(--hv-petrol); border-color: #fff; }
body.hv-body main:not(.hv) .cta-band a.btn:hover { background: var(--hv-goud-licht); color: var(--hv-inkt); }
body.hv-body main:not(.hv) a:not(.btn):not(.hv-knop) { color: var(--hv-petrol); }
body.hv-body main:not(.hv) :is(.th-goud, .fl-goud) { color: var(--hv-petrol); -webkit-text-fill-color: currentColor; background: none; }
.hv-faq-pagina { padding-bottom: 112px; }
.hv-faq-pagina::before { height: 60%; }

/* Ronde 2 (8 november 2026) */
/* Knoppen in een donker vlak: de tekstkleur van .hv a mag ze niet wit maken */
.hv a.hv-knop--licht, .hv a.hv-knop--licht:hover { color: var(--hv-inkt); }
.hv a.hv-knop--primair, .hv a.hv-knop--primair:hover { color: #fff; }
.hv a.hv-knop--rand { color: var(--hv-tekst); }
.hv .hv-slot a.hv-knop--licht { color: var(--hv-petrol); }

/* De Agents: wit vlak, elke kaart met een duidelijke rand en eigen beeldvlak */
#product.hv-s--grijs { background: #fff; }
#product .hv-raster { gap: 24px; }
#product .hv-kaart { border-color: var(--hv-lijn-2); box-shadow: 0 1px 2px rgba(11,31,34,0.04); transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--hv-ease); }
#product .hv-kaart:hover { border-color: var(--hv-petrol); box-shadow: 0 18px 40px -24px rgba(11,31,34,0.35); transform: translateY(-2px); }
#product .hv-kaart--donker { border-color: var(--hv-inkt); }
#product .hv-kaart:not(.hv-kaart--donker) .hv-kaart-beeld { background: var(--hv-grijs); border-bottom: 1px solid var(--hv-lijn-2); }
#product .hv-kaart-tekst { border-top: 0; }
.hv-raster-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: 24px; padding: 26px 30px; border-radius: 18px; background: var(--hv-petrol-tint); border: 1px solid rgba(15,76,82,0.18); }
.hv-raster-cta strong { display: block; font-family: var(--hv-kop); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.hv-raster-cta span { display: block; margin-top: 4px; font-size: 15px; color: var(--hv-tekst-2); }
.hv-raster-cta-knoppen { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }

/* De telefoon in de hero: met de uren, zoals in WhatsApp */
.hv-held-tel-status { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 8px; font: 600 11px/1 var(--hv-body); color: #fff; }
.hv-held-tel-status i { width: 16px; height: 8px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.7); }
.hv-bel time { display: block; margin-top: 3px; text-align: right; font: 400 10px/1 var(--hv-body); color: rgba(14,26,28,0.5); }
.hv-held-tel-scherm { padding-top: 0; }
.hv-held-tel { padding-top: 10px; }

/* Voor wie: foto's in kleur */
.hv-paneel-foto { aspect-ratio: 4 / 3; }
.hv-paneel-foto img { filter: none; object-position: center 35%; }
.hv-held-tel-scherm { padding: 0 10px 14px; }
.hv-held-tel-status { margin: 0 -10px; padding: 9px 16px 3px; border-radius: 16px 16px 0 0; background: #fff; color: var(--hv-tekst); font-size: 11.5px; }
.hv-held-tel-status i { border-color: rgba(14,26,28,0.55); }
.hv-held-tel-kop { margin: 0 -10px 10px; border-radius: 0; }

/* ======================================================================
   HOMEPAGE KORT (10 november 2026)
   Opbouw zoals novaco.ai: hero met productbeeld, de twee oplossingen
   genummerd (01 WhatsApp, 02 Marketing), de keten, drie stappen, een
   korte FAQ en één slot. Zelfde huisstijl (goud, petrol, inkt), maar
   rustiger: lijnen in plaats van kaarten, één schaduw voor productbeeld,
   geen verlopen en geen decoratie.
   ====================================================================== */
.hv-voet-kolommen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hv-nr { font: 600 13px/1 var(--hv-mono); letter-spacing: 0.04em; color: var(--hv-goud-diep); }
.hv-s--inkt .hv-nr { color: var(--hv-goud); }

/* ── Hero ── */
.hv-h { padding: calc(var(--hv-kop-h) + 64px) 0 72px; background: #fff; overflow: hidden; }
.hv-h-tekst { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px 64px; align-items: end; }
.hv-h-tekst .hv-label { grid-column: 1 / -1; margin-bottom: 0; }
.hv-h .hv-h1 { font-size: clamp(2.4rem, 4.1vw, 3.7rem); line-height: 1.02; max-width: 19ch; }
.hv-h-onder .hv-lead { margin-top: 0; font-size: 17.5px; }
.hv-h-onder .hv-knoppen { margin-top: 26px; gap: 12px; }
.hv-h-beeld { position: relative; margin-top: 56px; }
.hv-browser { position: relative; border: 1px solid var(--hv-lijn); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(11,31,34,0.06), 0 40px 80px -40px rgba(11,31,34,0.35); }
.hv-browser-balk { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--hv-lijn); background: #F8F9F9; }
.hv-browser-balk i { width: 10px; height: 10px; border-radius: 50%; background: #DDE2E1; }
.hv-browser-balk span { margin: 0 auto; padding: 4px 14px; border-radius: 6px; background: #fff; border: 1px solid var(--hv-lijn); font-size: 12px; color: var(--hv-tekst-3); transform: translateX(-20px); }
.hv-browser img { width: 100%; height: auto; }
/* De advertentie staat naast de dealersite, niet erover (10/11/2026: ze
   verborg tekst). Het beeld mag breder zijn dan de tekstkolom, zodat de site
   even groot blijft. De advertentie schuift alleen over de witte rand links
   van de site (60 van de 1440 pixels), dus er verdwijnt geen tekst achter.
   Smaller dan 1181 pixels is er geen plaats naast: dan staat ze in Marketing. */
.hv-h-advertentie { display: none; margin: 0; }
@media (min-width: 1181px) {
  .hv-h-beeld { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; width: min(1400px, 100vw - 48px); margin-left: calc(50% - min(700px, 50vw - 24px)); }
  .hv-h-beeld .hv-browser { grid-column: 2; grid-row: 1; }
  .hv-h-advertentie { display: block; position: relative; z-index: 2; grid-column: 1; grid-row: 1; margin: 0 -40px 0 0; }
}
.hv-h-advertentie > img { width: 100%; border-radius: 12px; border: 1px solid rgba(11,31,34,0.08); box-shadow: 0 30px 60px -24px rgba(11,31,34,0.45); }
.hv-h-advertentie figcaption { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 12px 7px 9px; border-radius: 8px; background: #fff; color: var(--hv-petrol); border: 1px solid var(--hv-lijn); box-shadow: 0 8px 20px -12px rgba(11,31,34,0.35); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hv-h-advertentie figcaption img { width: 16px; height: 16px; }
.hv-h-feiten { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 40px; font-size: 14px; color: var(--hv-tekst-2); }
.hv-h-feiten li { display: inline-flex; align-items: center; gap: 8px; }
.hv-h-feiten svg { width: 16px; height: 16px; color: var(--hv-petrol); flex: none; }
.hv-h-pers { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--hv-petrol); text-decoration: none; }
.hv-h-pers:hover { text-decoration: underline; text-underline-offset: 3px; }
.hv-h-pers img { width: 28px; height: 28px; border-radius: 6px; }

/* ── Twee oplossingen ── */
.hv-twee { padding: 0 0 8px; background: #fff; }

/* ── Logostrook (10/11/2026) ──
   Alle logo's even hoog, eigen verhouding, geen kaarten of schaduw. De band
   bevat vier keer dezelfde reeks en schuift precies één reeks (25%) op:
   daarna staat alles weer op dezelfde plek, dus geen sprong en geen gat. */
.hv-logos { padding: 8px 0 64px; background: #fff; }
.hv-logos-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.hv-logos-titel { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.3 var(--hv-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hv-tekst-3); }
.hv-logos-titel::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--hv-goud); flex: none; }
.hv-logos-kop .hv-link { font-size: 14px; white-space: nowrap; }
.hv-logos-baan { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.hv-logos-band { display: flex; width: max-content; animation: hv-logos 52s linear infinite; will-change: transform; }
.hv-logos-baan:hover .hv-logos-band, .hv-logos-baan:focus-within .hv-logos-band { animation-play-state: paused; }
.hv-logos-rij { display: flex; flex: none; align-items: center; gap: 64px; padding-right: 64px; }
.hv-logos-rij li { flex: none; }
.hv-logos { --hv-logo-h: 24px; }
.hv-logos-rij img { display: block; width: auto; max-width: none; height: var(--hv-logo-h); }
/* Optisch gelijk: Meta vult de hele hoogte met letters, WhatsApp heeft kleine letters naast het icoon. */
.hv-logos-rij img[src*="meta.svg"] { height: calc(var(--hv-logo-h) * 0.84); }
.hv-logos-rij img[src*="whatsapp.svg"] { height: calc(var(--hv-logo-h) * 1.08); }
.hv-logos-rij img[src*="autonieuws"] { height: calc(var(--hv-logo-h) * 1.5); }
@keyframes hv-logos { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
@media (max-width: 760px) {
  .hv-logos { padding: 0 0 48px; }
  .hv-logos-kop { margin-bottom: 18px; }
  .hv-logos-rij { gap: 40px; padding-right: 40px; }
  .hv-logos { --hv-logo-h: 20px; }
  .hv-logos-band { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-logos-baan { -webkit-mask-image: none; mask-image: none; }
  .hv-logos-band { width: auto; animation: none; justify-content: center; }
  .hv-logos-rij { flex-wrap: wrap; justify-content: center; gap: 24px 48px; padding: 0 var(--hv-gutter); }
  .hv-logos-rij[aria-hidden="true"] { display: none; }
}
.hv-twee-titel { max-width: 30ch; padding-top: 56px; border-top: 1px solid var(--hv-lijn); font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.2; letter-spacing: -0.02em; }
.hv-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.hv-stapkaart { display: flex; flex-direction: column; padding: 28px 30px 30px; border: 1px solid var(--hv-lijn); border-radius: 20px; background: linear-gradient(180deg, #fff 0%, var(--hv-grijs) 100%); box-shadow: 0 1px 2px rgba(11,31,34,0.04), 0 18px 36px -28px rgba(11,31,34,0.25); color: var(--hv-tekst); text-decoration: none; transition: border-color .2s ease, transform .2s var(--hv-ease); }
.hv-stapkaart:hover { border-color: rgba(15,76,82,0.35); transform: translateY(-2px); }
.hv-stapkaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.hv-stapkaart-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--hv-petrol-tint); color: var(--hv-petrol); flex: none; }
.hv-stapkaart-ic svg { width: 24px; height: 24px; }
.hv-stapkaart-nr { padding-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-petrol); white-space: nowrap; }
.hv-stapkaart-nr b { margin-right: 8px; font: 600 13px/1 var(--hv-mono); letter-spacing: 0.04em; color: var(--hv-goud-diep); }
.hv-stapkaart-nr b::after { content: "\00b7"; margin-left: 8px; color: var(--hv-goud-diep); }
.hv-stapkaart .hv-h3 { font-size: 23px; }
.hv-stapkaart p { flex: 1; margin: 10px 0 22px; color: var(--hv-tekst-2); font-size: 15.5px; line-height: 1.55; }
.hv-stapkaart:hover .hv-link svg { transform: translateX(3px); }
.hv-keten-beeld .hv-bel time { color: rgba(14,26,28,0.45); }
.hv-keten-afspraak time { grid-column: 2; font: 500 11px/1 var(--hv-mono); color: var(--hv-tekst-3); margin-top: 4px; }

/* ── De twee productdelen ── */
.hv-deel { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 88px; align-items: center; }
.hv-deel-nr { display: inline-flex; align-items: center; margin-bottom: 22px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hv-petrol); }
.hv-deel-nr span { margin-right: 14px; padding-right: 14px; border-right: 1px solid var(--hv-lijn-2); font: 600 13px/1 var(--hv-mono); letter-spacing: 0.04em; color: var(--hv-goud-diep); }
.hv-s--inkt .hv-deel-nr { color: #fff; }
.hv-s--inkt .hv-deel-nr span { color: var(--hv-goud); border-color: var(--hv-inkt-lijn); }
.hv-voordelen { display: grid; gap: 16px; margin-top: 32px; }
.hv-voordelen li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; font-size: 15.5px; line-height: 1.5; color: var(--hv-tekst-2); }
.hv-voordelen svg { width: 20px; height: 20px; margin-top: 2px; color: var(--hv-petrol); }
.hv-voordelen strong { display: block; color: var(--hv-tekst); font-size: 16px; font-weight: 600; }
.hv-voordelen--kort { gap: 12px; }
.hv-s--inkt .hv-voordelen li { color: var(--hv-op-donker); }
.hv-s--inkt .hv-voordelen svg { color: var(--hv-goud); }
.hv-deel-beeld { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hv-deel-beeld--tel { padding: 48px 0 28px; border-radius: 20px; background: var(--hv-grijs); border: 1px solid var(--hv-lijn); }

/* Marketing: tekst boven, het product over de volle breedte */
.hv-deel--marketing { grid-template-columns: minmax(0, 1fr); gap: 56px; }
.hv-deel--marketing .hv-deel-tekst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 88px; align-items: start; }
.hv-deel--marketing .hv-deel-nr, .hv-deel--marketing .hv-h2, .hv-deel--marketing .hv-lead { grid-column: 1; }
.hv-deel-zij { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
.hv-deel-zij .hv-voordelen { margin-top: 0; }
.hv-deel-zij .hv-knoppen { margin-top: 28px; }

.hv-mk { border-radius: 16px; background: #fff; color: var(--hv-tekst); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,0.6); }
.hv-mk-balk { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--hv-lijn); background: #F8F9F9; font-size: 14px; }
.hv-mk-balk img { width: 22px; height: 22px; }
.hv-mk-pad { color: var(--hv-tekst-3); font-size: 13px; }
.hv-mk-pad::before { content: "/"; margin-right: 10px; color: var(--hv-lijn-2); }
.hv-mk-balk .hv-status { margin-left: auto; }
.hv-mk-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.hv-mk-in { padding: 24px 22px; border-right: 1px solid var(--hv-lijn); background: #FBFCFC; }
.hv-mk-kop { margin-bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-tekst-3); }
.hv-mk-foto { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 24px; padding: 14px; border-radius: 10px; border: 1px solid var(--hv-lijn); background: repeating-conic-gradient(#F1F3F3 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.hv-mk-vraag { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hv-lijn); background: #fff; font-size: 14px; line-height: 1.5; color: var(--hv-tekst); }
.hv-mk-uit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 18px; align-items: end; padding: 28px; }
.hv-mk-stuk { margin: 0; }
.hv-mk-stuk img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--hv-lijn); }
.hv-mk-stuk figcaption { margin-top: 10px; font: 500 12px/1.3 var(--hv-mono); color: var(--hv-tekst-3); }
.hv-mk-scenes { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; border: 1px solid var(--hv-lijn); }
.hv-mk-scenes img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; opacity: 0; animation: hv-scene 12s infinite; }
.hv-mk-scenes img:nth-child(1) { opacity: 1; animation-delay: 0s; }
.hv-mk-scenes img:nth-child(2) { animation-delay: 3s; }
.hv-mk-scenes img:nth-child(3) { animation-delay: 6s; }
.hv-mk-scenes img:nth-child(4) { animation-delay: 9s; }
@keyframes hv-scene { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }

/* ── De keten ── */
.hv-keten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: keten; }
.hv-keten li { position: relative; }
.hv-keten-beeld { position: relative; display: grid; place-items: center; height: 168px; margin-bottom: 22px; padding: 18px; border-radius: var(--hv-r); background: var(--hv-grijs); border: 1px solid var(--hv-lijn); }
.hv-keten li:not(:last-child) .hv-keten-beeld::after { content: ""; position: absolute; right: -15px; top: 50%; z-index: 1; width: 10px; height: 10px; border-top: 1.6px solid var(--hv-goud-diep); border-right: 1.6px solid var(--hv-goud-diep); transform: translateY(-50%) rotate(45deg); }
.hv-keten-beeld--ad { padding: 14px; }
.hv-keten-beeld--ad img { width: auto; height: 138px; border-radius: 6px; box-shadow: 0 14px 28px -16px rgba(11,31,34,0.5); }
.hv-keten-beeld .hv-bel { max-width: 100%; padding: 10px 12px; font-size: 13.5px; box-shadow: 0 1px 2px rgba(11,31,34,0.08); }
.hv-keten-afspraak { display: grid; grid-template-columns: 22px auto; gap: 2px 10px; align-items: center; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid rgba(177,147,94,0.45); font-size: 13.5px; color: var(--hv-tekst-2); }
.hv-keten-afspraak svg { grid-row: span 2; width: 22px; height: 22px; color: var(--hv-petrol); }
.hv-keten-afspraak b { color: var(--hv-tekst); }
.hv-keten-nr { display: block; font: 600 13px/1 var(--hv-mono); color: var(--hv-goud-diep); margin-bottom: 10px; }
.hv-keten strong { display: block; font-family: var(--hv-kop); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.hv-keten p { margin-top: 6px; font-size: 15px; color: var(--hv-tekst-2); }

/* ── Drie stappen ── */
.hv-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--hv-lijn-2); }
.hv-stappen li { padding-top: 28px; }
.hv-stappen .hv-h3 { margin: 16px 0 8px; }
.hv-stappen p { font-size: 15.5px; color: var(--hv-tekst-2); max-width: 38ch; }

/* ── Over Helvaro ── */
.hv-over { padding: 80px 0; background: #fff; }
.hv-over-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 24px 56px; align-items: center; }
.hv-over .hv-label { margin-bottom: 14px; }
.hv-over-titel { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.25; max-width: 26ch; }
.hv-over-tekst { font-size: 15.5px; color: var(--hv-tekst-2); max-width: 52ch; }
.hv-over-tekst a { color: var(--hv-petrol); font-weight: 600; }
.hv-over .hv-pers-link img { width: 52px; height: 52px; border-radius: 10px; }

@media (max-width: 1080px) {
  .hv-h-tekst { grid-template-columns: minmax(0, 1fr); }
  .hv-drie { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hv-h-feiten { margin-top: 32px; }
  .hv-deel, .hv-deel--marketing .hv-deel-tekst { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hv-deel--marketing .hv-deel-tekst > * { grid-column: 1 !important; grid-row: auto !important; }
  .hv-deel-zij { margin-top: 32px; }
  .hv-deel-beeld--tel { order: 2; }
  .hv-mk-body { grid-template-columns: 220px minmax(0, 1fr); }
  .hv-keten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .hv-keten li:nth-child(2) .hv-keten-beeld::after { display: none; }
  .hv-over-rij { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hv-h { padding: calc(var(--hv-kop-h) + 32px) 0 48px; }
  .hv-h .hv-h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.06; }
  .hv-h-onder .hv-lead { font-size: 16.5px; }
  .hv-h-beeld { margin-top: 36px; }
  .hv-browser-balk span { transform: none; }
  .hv-h-feiten { margin-top: 28px; gap: 10px 18px; }
  .hv-twee { padding-bottom: 72px; }
  .hv-twee-titel { padding-top: 40px; }
  .hv-drie { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hv-stapkaart { padding: 22px 22px 24px; }
  .hv-stapkaart-kop { margin-bottom: 20px; }
  .hv-stapkaart-ic { width: 46px; height: 46px; }
  .hv-keten-afspraak time { grid-column: 1; }
  .hv-deel-beeld--tel { padding: 32px 0 20px; }
  .hv-deel-beeld--tel .hv-iphone { width: 280px; }
  .hv-mk-balk .hv-mk-pad { display: none; }
  .hv-mk-body { grid-template-columns: minmax(0, 1fr); }
  .hv-mk-in { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 16px; border-right: 0; border-bottom: 1px solid var(--hv-lijn); }
  .hv-mk-in .hv-mk-kop { display: none; }
  .hv-mk-foto { margin: 0; padding: 6px; }
  .hv-mk-vraag { font-size: 13px; padding: 10px 12px; }
  .hv-mk-uit { gap: 8px; padding: 16px; }
  .hv-mk-stuk figcaption { font-size: 10.5px; }
  .hv-keten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .hv-keten-beeld { height: 136px; margin-bottom: 14px; padding: 10px; }
  .hv-keten-beeld--ad img { height: 114px; }
  .hv-keten p { font-size: 14px; }
  .hv-twee { padding-bottom: 0; }
  .hv-keten li .hv-keten-beeld::after { display: none; }
  .hv-keten-beeld .hv-bel { font-size: 11px; line-height: 1.35; }
  .hv-keten-afspraak { padding: 10px; font-size: 12px; grid-template-columns: 1fr; }
  .hv-keten-afspraak svg { display: none; }
  .hv-keten-nr { margin-bottom: 6px; }
  .hv-keten strong { font-size: 16.5px; }
  .hv-stappen { grid-template-columns: minmax(0, 1fr); }
  .hv-stappen li { padding: 22px 0; border-bottom: 1px solid var(--hv-lijn); }
  .hv-over { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-mk-scenes img { animation: none; }
}
/* ============================================================
   DAG EN NACHT (10/11/2026) — sectie "Het probleem", aangestuurd door js/dagnacht.js.
   --nacht loopt van 0 (namiddag) naar 1 (avond). --bx/--by plaatsen zon of maan.
   ============================================================ */
#probleem { --nacht: 0; isolation: isolate; }
#probleem::before, #probleem::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Overdag: een warme petrolgloed bovenaan, die 's avonds wegzakt. */
#probleem::before { background: radial-gradient(120% 70% at 20% 0%, rgba(31,111,118,0.55) 0%, rgba(31,111,118,0.18) 45%, transparent 75%), radial-gradient(60% 40% at 15% 8%, rgba(214,188,140,0.16), transparent 70%); opacity: calc(1 - var(--nacht)); }
/* 's Avonds: sterren. */
#probleem::after {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 9%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 58% 44%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 73% 14%, rgba(245,229,192,.9), transparent 60%),
    radial-gradient(1px 1px at 86% 71%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.3px 1.3px at 94% 33%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 6% 83%, rgba(255,255,255,.6), transparent 60%);
  background-size: 520px 420px, 380px 300px, 520px 420px, 380px 300px, 520px 420px, 380px 300px, 520px 420px, 380px 300px;
  opacity: var(--nacht);
}
.hv-dagnacht { --bx: 9.3%; --by: 63.7%; position: relative; display: flex; align-items: flex-end; gap: 26px; margin-top: 40px; }
.hv-dagnacht > .hv-dagnacht-hemel { width: 190px; flex: none; }
.hv-dagnacht-hemel { position: relative; aspect-ratio: 2 / 1; }
.hv-dagnacht-hemel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.hv-dagnacht-baan { stroke: rgba(255,255,255,0.2); stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hv-dagnacht-kim { stroke: var(--hv-inkt-lijn); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hv-dagnacht-bol {
  position: absolute; left: var(--bx); top: var(--by); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, rgba(255,244,218, calc(1 - var(--nacht))) 0%, rgba(214,188,140, calc(1 - var(--nacht))) 55%, rgba(177,147,94, calc(1 - var(--nacht))) 100%);
  box-shadow: 0 0 0 7px rgba(214,188,140, calc(0.14 * (1 - var(--nacht)))), 0 0 42px 10px rgba(214,188,140, calc(0.42 * (1 - var(--nacht)))), 0 0 28px 4px rgba(207,217,219, calc(0.22 * var(--nacht)));
}
/* De maan: een bleke schijf die erover komt, met een schaduw die er een sikkel van maakt. */
.hv-dagnacht-bol::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: var(--nacht);
  -webkit-mask: radial-gradient(circle at 78% 26%, transparent 46%, #000 48%); mask: radial-gradient(circle at 78% 26%, transparent 46%, #000 48%); }
.hv-dagnacht-bol::before { background: radial-gradient(circle at 40% 38%, #F4F7F7 0%, #CFD9DB 70%, #AEBDC0 100%); }
.hv-dagnacht-tijd { display: block; margin: 0 0 -4px; font: 500 clamp(2.4rem, 3.6vw, 3.2rem)/1 var(--hv-mono); letter-spacing: -0.04em; color: var(--hv-goud); font-variant-numeric: tabular-nums; }
/* Het moment dat nu "speelt" licht op, de rest wacht even. */
.hv-dag li { transition: opacity .45s var(--hv-ease); }
.hv-dag.is-actief li.is-in:not(.is-nu) { opacity: 0.42; }
.hv-dag li time { transition: color .45s var(--hv-ease), text-shadow .45s var(--hv-ease); }
.hv-dag li.is-nu time { color: #fff; text-shadow: 0 0 18px rgba(214,188,140,0.7); }
.hv-dagnacht--klein { display: none; }
@media (max-width: 1080px) {
  .hv-probleem-rij .hv-dagnacht:not(.hv-dagnacht--klein) { display: none; }
  .hv-dagnacht--klein { display: flex; align-items: center; gap: 16px; margin-top: 0; position: sticky; top: calc(var(--hv-kop-h) + 10px); z-index: 2; width: auto; margin: 0 0 12px; padding: 10px 18px; border: 1px solid var(--hv-inkt-lijn); border-radius: var(--hv-r); background: rgba(11,31,34,0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .hv-dagnacht--klein > .hv-dagnacht-hemel { width: 84px; }
  .hv-dagnacht--klein .hv-dagnacht-bol { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .hv-dagnacht--klein .hv-dagnacht-tijd { margin: 0; font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-dag li, .hv-dag li time { transition: none; }
}

/* ============================================================
   HERO LIVE (10/11/2026) — telefoon en kaart spelen het gesprek na, js/held-live.js.
   Zonder JavaScript (of bij "minder beweging") staat alles er gewoon.
   ============================================================ */
.hv-held-tel-kop > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hv-held-tel-kop small { font-size: 9.5px; font-weight: 500; color: var(--hv-tekst-3); }
.hv-held-typt { display: none; color: var(--hv-groen) !important; }
.hv-held-tel-kop.is-typt .hv-held-online { display: none; }
.hv-held-tel-kop.is-typt .hv-held-typt { display: block; }
.hv-held-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 300px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 22px); mask-image: linear-gradient(transparent 0, #000 22px); }
.hv-held-chat .hv-bel { flex: none; margin: 0; }
.hv-held-chat .hv-bel + .hv-bel { margin-top: 0; }
/* Vinkjes bij verzonden berichten: grijs verzonden, blauw gelezen. */
.hv-held-chat .hv-bel--uit time::after { content: ""; display: inline-block; width: 14px; height: 8px; margin-left: 3px; vertical-align: -1px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='none' stroke='%238C9A9E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l3 3 6-7M7 7.5l1 .5 6-7'/%3E%3C/svg%3E"); }
.hv-held-chat .hv-bel--uit.is-gelezen time::after, .hv-held-beeld:not(.is-live) .hv-held-chat .hv-bel--uit time::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l3 3 6-7M7 7.5l1 .5 6-7'/%3E%3C/svg%3E"); }
.hv-bel--typt { display: none; gap: 3px; width: max-content; padding: 9px 10px; }
.hv-bel--typt.is-te-zien { display: flex; }
.hv-bel--typt i { width: 5px; height: 5px; border-radius: 50%; background: #9AA5AB; animation: hv-typt 1.1s ease-in-out infinite; }
.hv-bel--typt i:nth-child(2) { animation-delay: .15s; }
.hv-bel--typt i:nth-child(3) { animation-delay: .3s; }
.hv-held-bevestigd { flex: none; align-self: center; margin: 2px 0 0; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.92); font-size: 10.5px; font-weight: 600; color: var(--hv-groen); box-shadow: 0 1px 1px rgba(11,31,34,0.08); }
.hv-held-bevestigd::before { content: "\2713"; margin-right: 5px; }

/* Live: alles verschijnt op zijn moment. */
.hv-held-beeld.is-live .hv-held-chat > .hv-bel:not(.hv-bel--typt), .hv-held-beeld.is-live .hv-held-bevestigd { display: none; }
.hv-held-beeld.is-live .hv-held-chat > .is-te-zien:not(.hv-bel--typt) { display: block; animation: hv-bel-in .38s var(--hv-ease) both; }
.hv-held-beeld.is-live .hv-held-chat > .hv-bel--uit { transform-origin: 100% 100%; }
.hv-held-beeld.is-live .hv-held-chat > .hv-bel--in { transform-origin: 0 100%; }
@keyframes hv-bel-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.js .hv-held-beeld.is-live .hv-tijdlijn li, .js .hv-held-beeld.is-live .hv-app-voet { animation: none; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--hv-ease), transform .45s var(--hv-ease); }
.js .hv-held-beeld.is-live .hv-tijdlijn li.is-te-zien, .js .hv-held-beeld.is-live .hv-app-voet.is-te-zien { opacity: 1; transform: none; }
.hv-held-beeld.is-live .hv-app-koper .hv-status { opacity: 0; transform: scale(.9); transition: opacity .35s var(--hv-ease), transform .35s var(--hv-ease); }
.hv-held-beeld.is-live .hv-app-koper .hv-status.is-te-zien { opacity: 1; transform: none; }
.hv-held-beeld.is-live .hv-tijdlijn li.is-te-zien i { animation: hv-punt .6s var(--hv-ease); }
@keyframes hv-punt { 0% { box-shadow: 0 0 0 0 rgba(15,76,82,0.35); } 100% { box-shadow: 0 0 0 8px rgba(15,76,82,0); } }
/* Tussen twee rondes: alles even weg. */
.hv-held-beeld .hv-held-chat, .hv-held-beeld .hv-tijdlijn, .hv-held-beeld .hv-app-voet { transition: opacity .45s var(--hv-ease); }
.hv-held-beeld.is-weg .hv-held-chat, .hv-held-beeld.is-weg .hv-tijdlijn, .hv-held-beeld.is-weg .hv-app-voet, .hv-held-beeld.is-weg .hv-app-koper .hv-status { opacity: 0; }
.hv-held-bevestigd { white-space: nowrap; width: max-content; max-width: 100%; padding: 4px 8px; font-size: 9.5px; letter-spacing: -0.005em; }
/* Een levend puntje bij "Vanavond" zolang het gesprek speelt. */
.hv-held-beeld.is-live .hv-app-balk span { display: inline-flex; align-items: center; gap: 7px; }
.hv-held-beeld.is-live .hv-app-balk span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22A35A; box-shadow: 0 0 0 0 rgba(34,163,90,0.45); animation: hv-live 1.8s ease-out infinite; }
@keyframes hv-live { 0% { box-shadow: 0 0 0 0 rgba(34,163,90,0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34,163,90,0); } }