/* Huptax landingspagina's per taal. Huisstijl Woud limoen met Plus Jakarta Sans (docs/brandbook).
   Alle lettertypes komen uit site/fonts. Richting (links of rechts) gaat via logische eigenschappen,
   zodat Arabisch, Perzisch en Urdu vanzelf goed staan.

   Opbouw van dit bestand: lettertypes, maten en kleuren, basis, kopbalk, dan de blokken in de volgorde
   van de pagina, en per blok direct de regels voor smalle schermen. Eén ritme voor alle blokken:
   elk blok heeft --ruimte boven en onder; twee witte blokken na elkaar delen die ruimte. */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("fonts/jakarta-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fonts/jakarta-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("fonts/jakarta-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("fonts/jakarta-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fonts/jakarta-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("fonts/jakarta-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-display: swap; src: url("fonts/noto-arabisch-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700; font-display: swap; src: url("fonts/noto-arabisch-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Sans Devanagari"; font-weight: 400; font-display: swap; src: url("fonts/noto-devanagari-400.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Noto Sans Devanagari"; font-weight: 700; font-display: swap; src: url("fonts/noto-devanagari-700.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Noto Sans Cyrillic"; font-weight: 400; font-display: swap; src: url("fonts/noto-cyrillisch-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Sans Cyrillic"; font-weight: 700; font-display: swap; src: url("fonts/noto-cyrillisch-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- maten en kleuren ---------- */

:root {
  --diep: #0F2E24;
  --merk: #1E5A45;
  --bon: #A9C5B9;
  --zacht: #EEF5F1;
  --limoen: #B5E33D;
  --limoen-zacht: #F4FBE3;
  --punt-op-wit: #679418;
  --inkt: #0B1F33;
  --tekst: #47515C;
  --grijs: #6B7581;
  --lijn: #E6E8EA;
  --wolk: #F6F7F7;
  --letter: "Plus Jakarta Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Cyrillic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --breed: 1720px;
  --rand: clamp(20px, 5vw, 96px);
  --buiten: max(0px, (100vw - var(--breed)) / 2);
  --ruimte: clamp(64px, 8vw, 120px);
  --hoek: 24px;
  --hoek-groot: 32px;
  --schaduw: 0 1px 2px rgba(15, 46, 36, 0.06), 0 18px 44px rgba(15, 46, 36, 0.09);
  --schaduw-zwaar: 0 2px 6px rgba(15, 46, 36, 0.05), 0 30px 70px rgba(15, 46, 36, 0.15);
  color-scheme: light;
}

/* ---------- basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--letter); font-size: 17px; line-height: 1.6; color: var(--tekst); background: #fff; }
a { color: inherit; }
img, svg { display: block; }
img { max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
.ico { flex: none; }

h1, h2, h3 { color: var(--diep); margin: 0; font-weight: 800; }
h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
.punt { color: var(--punt-op-wit); }

/* Arabisch schrift en Devanagari: geen krappe letterafstand en iets meer regelruimte. */
[dir="rtl"] body, .taal-hi { line-height: 1.8; }
[dir="rtl"] :is(h1, h2, h3), .taal-hi :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.35; }

.wrap { width: 100%; max-width: var(--breed); margin-inline: auto; padding-inline: var(--rand); }

/* Vinkje in een limoen rondje, overal hetzelfde. */
.held-vinkjes .ico, .diensten-lijst .ico, .punten .ico {
  width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--limoen); color: var(--diep); stroke-width: 3;
}

/* klein label boven elke kop */
.label-boven { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--merk); margin-block-end: 14px; }
.label-boven::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--limoen); }
[dir="rtl"] .label-boven, .taal-hi .label-boven { letter-spacing: 0; text-transform: none; font-size: 15px; }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; background: var(--limoen); color: var(--diep); font-weight: 700; font-size: 17px; text-decoration: none; border-radius: 999px; padding: 16px 28px; min-height: 56px; transition: transform 0.15s ease, background 0.15s ease; }
.knop:hover { transform: translateY(-1px); background: #A9D92F; }
.knop.klein { min-height: 42px; padding: 9px 18px; font-size: 15px; }
.knop.breed { width: 100%; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--diep); outline-offset: 3px; }

/* blokken: één ritme */
.blok { padding-block: var(--ruimte); }
.blok.zacht { background: var(--zacht); }
.blok:not(.zacht) + .blok:not(.zacht) { padding-block-start: 0; }

/* ---------- deadline en kopbalk ---------- */

.deadline { background: var(--diep); color: #DCE9E4; font-size: 14px; }
.deadline-binnen { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 42px; text-align: center; }
.deadline p { display: inline-flex; align-items: center; gap: 8px; }
.deadline .ico { color: var(--limoen); }
.deadline b { color: var(--limoen); font-weight: 700; }

.balk { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.94); border-block-end: 1px solid var(--lijn); backdrop-filter: blur(10px); }
.balk-binnen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 72px; }
.logo-link { text-decoration: none; display: inline-flex; }
.logo { display: inline-flex; align-items: center; gap: 7px; direction: ltr; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 23px; letter-spacing: -0.03em; color: var(--diep); line-height: 1; }
.balk-nav { display: flex; justify-content: center; align-items: center; gap: 30px; font-size: 15px; font-weight: 600; color: var(--diep); }
.balk-nav > a { text-decoration: none; }
.balk-nav > a:hover { text-decoration: underline; text-underline-offset: 5px; }
.balk-rechts { display: flex; align-items: center; gap: 12px; justify-self: end; }

.taalkeuze { position: relative; }
.taalkeuze summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; border: 1.5px solid var(--lijn); border-radius: 999px; padding: 7px 13px; background: #fff; font-weight: 600; color: var(--diep); }
.taalkeuze summary::-webkit-details-marker { display: none; }
.taalkeuze[open] summary { border-color: var(--diep); }
.taalkeuze ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--lijn); border-radius: 16px; box-shadow: var(--schaduw-zwaar); min-width: 230px; }
.taalkeuze a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; text-align: start; }
.taalkeuze a:hover, .taalkeuze a[aria-current="page"] { background: var(--zacht); }
.taal-kort, .alleen-smal { display: none; }

@media (max-width: 1100px) {
  .balk-binnen { grid-template-columns: auto 1fr; }
  .balk-nav { display: none; }
}
@media (max-width: 1000px) {
  .alleen-breed { display: none; }
  .alleen-smal { display: inline-flex; }
  .balk-rechts .alleen-smal { min-height: 42px; width: 42px; padding: 0; }
}
@media (max-width: 640px) {
  /* Op de telefoon staat het aanbod al als label in de kop (schets D), dus geen balk erboven. */
  .deadline { display: none; }
  .balk-binnen { min-height: 62px; }
  .taal-lang { display: none; }
  .taal-kort { display: inline; font-size: 14px; }
}

/* ---------- kop (held) ---------- */

.held { padding-block: clamp(32px, 4vw, 64px) clamp(48px, 5vw, 88px); }
.held-raster { display: grid; gap: 40px clamp(40px, 5vw, 88px); align-items: center; }
/* label met het aanbod boven de kop */
.tag { display: inline-flex; align-items: center; gap: 8px; background: var(--limoen); color: var(--diep); font-weight: 800; font-size: 14px; line-height: 1.3; border-radius: 999px; padding: 7px 15px 7px 8px; margin-block-end: 20px; }
.tag .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--diep); color: var(--limoen); stroke-width: 3; }
/* limoen markeerstreep onder het belangrijkste deel van de kop */
.markeer { background: linear-gradient(180deg, transparent 56%, rgba(181, 227, 61, 0.9) 56%, rgba(181, 227, 61, 0.9) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 4px; margin-inline: -4px; }
.sub { font-size: clamp(17px, 1.35vw, 19.5px); margin-block-start: 18px; max-width: 33em; }

/* vraagveld: de vraag gaat direct naar WhatsApp */
.vraagveld { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 64px; margin-block-start: 24px; padding-inline: 22px 7px; border: 2px solid var(--diep); border-radius: 999px; background: #fff; box-shadow: 0 12px 28px rgba(15, 46, 36, 0.10); }
.vraagveld:focus-within { box-shadow: 0 0 0 4px rgba(181, 227, 61, 0.6), 0 12px 28px rgba(15, 46, 36, 0.10); }
.vraagveld input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--inkt); }
.vraagveld input::placeholder { color: var(--grijs); opacity: 1; }
.vraagveld button { flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--limoen); color: var(--diep); display: grid; place-items: center; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.vraagveld button:hover { background: #A9D92F; transform: scale(1.05); }
.vraagveld button:focus-visible { outline: 3px solid var(--diep); outline-offset: 3px; }
[dir="rtl"] .vraagveld button .ico { transform: scaleX(-1); }
.onder-veld { display: flex; align-items: center; gap: 7px; margin-block-start: 10px; padding-inline-start: 22px; font-size: 13.5px; color: var(--grijs); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* het gratis aanbod met de prijs, onder het vraagveld */
.held-aanbod { margin-block-start: 20px; max-width: 32em; font-size: 16.5px; line-height: 1.55; color: var(--tekst); }
.held-aanbod b { color: var(--diep); font-weight: 700; }
.held-vinkjes { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.held-vinkjes li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--diep); }

.held-beeld { position: relative; }
.held-foto { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 28px; }
.zweef { position: absolute; z-index: 2; max-width: 290px; font-size: 14px; line-height: 1.45; color: var(--inkt); background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 40px rgba(15, 46, 36, 0.18); }
.zweef time { display: block; text-align: end; font-size: 11px; color: var(--grijs); margin-block-start: 2px; }
.zweef-klant { background: #DCF6C6; top: 9%; inset-inline-start: -28px; border-start-end-radius: 4px; }
.zweef-kwartaal { bottom: 10%; inset-inline-start: -36px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; min-width: 210px; }
.zweef-kwartaal small { font-size: 12px; font-weight: 600; color: var(--grijs); }
.zweef-kwartaal b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--diep); line-height: 1.1; }
.zweef-kwartaal em { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-style: normal; font-size: 12px; font-weight: 700; color: #15803D; background: #E7F6EC; border-radius: 999px; padding: 3px 9px 3px 7px; margin-block-start: 4px; }

/* Op brede schermen loopt de kopfoto door tot de rand van het scherm. */
@media (min-width: 1001px) {
  html, body { overflow-x: clip; }
  .held-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .held-beeld { margin-inline-end: calc(-1 * (var(--rand) + var(--buiten))); }
  .held-foto { aspect-ratio: auto; height: clamp(540px, 44vw, 800px); border-start-end-radius: 0; border-end-end-radius: 0; }
}
@media (max-width: 1000px) {
  .held-beeld { max-width: 640px; }
  .zweef-klant { inset-inline-start: 14px; top: 14px; }
  .zweef-kwartaal { inset-inline-start: 14px; bottom: 14px; min-width: 0; }
}
@media (max-width: 640px) {
  .held { padding-block-start: 22px; }
  .tag { font-size: 13.5px; margin-block-end: 16px; }
  .knop { font-size: 16px; padding-inline: 20px; }
  .vraagveld { height: 60px; padding-inline: 18px 6px; margin-block-start: 20px; }
  .vraagveld input { font-size: 16px; }
  .vraagveld button { width: 46px; height: 46px; }
  .onder-veld { padding-inline-start: 18px; font-size: 12.5px; }
  .held-aanbod { font-size: 15.5px; margin-block-start: 18px; }
  .held-vinkjes { flex-direction: column; gap: 10px; margin-block-start: 18px; }
  .held-foto { aspect-ratio: 7 / 6; border-radius: 24px; }
  .zweef { max-width: 220px; font-size: 13px; padding: 10px 12px; }
  .zweef-kwartaal { display: none; }
}

/* ---------- band met de talen ---------- */

.talenband { background: var(--wolk); border-block: 1px solid var(--lijn); }
.talenband-binnen { display: flex; align-items: center; gap: 16px 56px; padding-block: 26px; }
.talenband p { flex: none; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--diep); }
.talenband p .ico { color: var(--punt-op-wit); }
.talenband ul { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 18px; font-weight: 600; color: var(--grijs); }
@media (max-width: 1000px) {
  .talenband-binnen { flex-direction: column; align-items: flex-start; padding-block: 22px; }
  .talenband ul { justify-content: flex-start; gap: 6px 20px; font-size: 16px; }
}

/* ---------- zo werkt het ---------- */

.hoe-raster { display: grid; gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.stappen { list-style: none; padding: 0; margin: 32px 0 36px; }
.stappen li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding-block: 22px; border-block-start: 1px solid var(--lijn); }
.stappen li:last-child { border-block-end: 1px solid var(--lijn); }
.stap-nr { font-size: 40px; font-weight: 800; line-height: 1; color: var(--diep); letter-spacing: -0.04em; }
.stappen h3 { margin-block-end: 4px; }

.product-beeld { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.6vw, 40px); background: var(--zacht); border-radius: var(--hoek-groot); padding: clamp(28px, 3.4vw, 56px); }
.diensten { flex: 1; min-width: 0; max-width: 400px; background: #fff; border-radius: var(--hoek); padding: 26px 26px 14px; box-shadow: var(--schaduw); }
.diensten h3 { font-size: 21px; margin-block-end: 6px; }
.diensten-lijst { list-style: none; margin: 0; padding: 0; font-size: 15.5px; color: var(--inkt); }
.diensten-lijst li { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; border-block-start: 1px solid var(--lijn); }
.diensten-lijst li:first-child { border-block-start: 0; }
.diensten-lijst .ico { margin-block-start: 1px; }

@media (min-width: 1001px) {
  .hoe-raster { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}
@media (max-width: 1000px) {
  .product-beeld { background: none; padding: 0; justify-content: flex-start; }
  .product-beeld .iphone { display: none; }
  .diensten { max-width: none; }
}

/* echte telefoon met WhatsApp */
.iphone { position: relative; flex: none; width: 226px; aspect-ratio: 9 / 19.5; border-radius: 42px; padding: 9px; background: #0B0B0C; box-shadow: inset 0 0 0 2px #3A3B3E, inset 0 0 0 3px #1A1A1C, 0 40px 80px rgba(15, 46, 36, 0.28), 0 10px 24px rgba(0, 0, 0, 0.18); direction: ltr; z-index: 2; }
.knop-zij { position: absolute; width: 3px; background: #2A2B2E; border-radius: 2px; }
.knop-zij.aan { right: -2px; top: 26%; height: 15%; }
.knop-zij.vol1 { left: -2px; top: 22%; height: 9%; }
.knop-zij.vol2 { left: -2px; top: 33%; height: 9%; }
.iphone-scherm { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #EFE7DE; display: flex; flex-direction: column; font-family: -apple-system, "SF Pro Text", var(--letter); }
.iphone-status { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 4px 20px 0 26px; background: #F7F7F7; font-size: 13px; font-weight: 600; color: #111; position: relative; }
.eiland { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); width: 72px; height: 22px; border-radius: 20px; background: #000; }
.wa-kop { display: flex; align-items: center; gap: 8px; padding: 6px 12px 9px 10px; background: #F7F7F7; border-block-end: 1px solid #DCDCDC; }
[dir="rtl"] .wa-kop { flex-direction: row-reverse; }
.wa-foto { width: 32px; height: 32px; border-radius: 50%; background: var(--diep); display: grid; place-items: center; flex: none; }
.wa-naam { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wa-naam b { font-size: 14px; color: #111; }
.wa-naam small { font-size: 10.5px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat { flex: 1; min-height: 0; padding: 10px 9px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; overflow: hidden; background-color: #EFE7DE; background-image: radial-gradient(rgba(120, 100, 80, 0.07) 1.2px, transparent 1.3px), radial-gradient(rgba(120, 100, 80, 0.05) 1px, transparent 1.1px); background-size: 18px 18px, 11px 11px; background-position: 0 0, 6px 9px; }
.wa-dag { display: none; }
.wa { position: relative; max-width: 82%; font-size: 12.5px; line-height: 1.38; color: #111B21; padding: 6px 8px 5px 9px; border-radius: 9px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.wa .wa-tijd { float: right; display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; color: #667781; margin: 6px 0 -3px 8px; }
.wa.uit { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 0; }
.wa.in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wa.uit::after, .wa.in::after { content: ""; position: absolute; top: 0; width: 8px; height: 10px; }
.wa.uit::after { right: -7px; background: linear-gradient(225deg, transparent 50%, #D9FDD3 50%); }
.wa.in::after { left: -7px; background: linear-gradient(135deg, transparent 50%, #fff 50%); }
[dir="rtl"] .wa { direction: rtl; text-align: right; }
.wa.foto { padding: 3px; }
.wa.foto img { display: block; width: 118px; height: 148px; object-fit: cover; border-radius: 7px; }
.wa.foto .wa-tijd { position: absolute; right: 9px; bottom: 7px; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.wa-typ { display: flex; align-items: center; gap: 8px; padding: 7px 10px 22px; background: #F7F7F7; }
.wa-plus { font-size: 22px; line-height: 1; color: #1F7AEC; font-weight: 300; }
.wa-veld { flex: 1; height: 28px; border-radius: 16px; background: #fff; border: 1px solid #E3E3E3; }
.wa-mic { width: 30px; height: 30px; border-radius: 50%; background: #25D366; display: grid; place-items: center; flex: none; }
.thuisbalk { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 92px; height: 4px; border-radius: 3px; background: #111; }

/* ---------- brief van de Belastingdienst ---------- */

.banner { position: relative; border-radius: var(--hoek-groot); overflow: hidden; min-height: 460px; display: flex; align-items: center; }
.banner-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 46, 36, 0.92) 0%, rgba(15, 46, 36, 0.75) 42%, rgba(15, 46, 36, 0.05) 75%); }
[dir="rtl"] .banner::after { background: linear-gradient(270deg, rgba(15, 46, 36, 0.92) 0%, rgba(15, 46, 36, 0.75) 42%, rgba(15, 46, 36, 0.05) 75%); }
.banner-tekst { position: relative; z-index: 1; max-width: 600px; padding: clamp(32px, 5vw, 72px); color: #DCE9E4; }
.banner-tekst h2 { color: #fff; font-size: clamp(28px, 3vw, 42px); }
.banner-tekst p { font-size: 18px; margin-block: 16px 30px; }

/* een stukje echte Nederlandse brief met het vertaalbriefje erop */
.brief-mock { position: absolute; z-index: 1; inset-inline-end: clamp(24px, 5vw, 72px); top: 50%; transform: translateY(-50%) rotate(2deg); width: 330px; }
[dir="rtl"] .brief-mock { transform: translateY(-50%) rotate(-2deg); }
.papier { background: #fff; border-radius: 6px; padding: 22px 22px 26px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); font-family: Arial, Helvetica, sans-serif; color: #1B1B1B; font-size: 12.5px; line-height: 1.45; }
.papier b { display: block; font-size: 13px; letter-spacing: 0.02em; color: #154273; margin-block-end: 14px; }
.papier strong { display: block; font-size: 15px; margin-block-end: 10px; }
.papier dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0 0 14px; }
.papier dt { color: #555; }
.papier dd { margin: 0; font-weight: 700; }
.papier i { display: block; height: 7px; border-radius: 3px; background: #E4E6E8; margin-block-start: 7px; }
.papier i.kort { width: 60%; }
.briefje { position: absolute; inset-inline-start: -40px; bottom: -38px; width: 270px; display: flex; gap: 8px; align-items: flex-start; background: var(--limoen); color: var(--diep); font-weight: 700; font-size: 14px; line-height: 1.45; padding: 14px 16px; border-radius: 4px; transform: rotate(-4deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
[dir="rtl"] .briefje { transform: rotate(4deg); }
.briefje .ico { margin-block-start: 2px; }

@media (max-width: 1000px) {
  .banner { flex-direction: column; align-items: stretch; min-height: 0; }
  .banner::after, [dir="rtl"] .banner::after { background: rgba(15, 46, 36, 0.86); }
  .banner-tekst { max-width: none; }
  .brief-mock { position: relative; inset: auto; transform: rotate(2deg); margin: 0 auto 64px; width: min(330px, 82%); }
  [dir="rtl"] .brief-mock { transform: rotate(-2deg); }
}
@media (max-width: 640px) {
  .banner { border-radius: var(--hoek); }
  .banner-tekst { padding: 32px 24px 36px; }
  .banner-tekst p { font-size: 17px; }
  .briefje { inset-inline-start: -14px; width: 236px; font-size: 13px; }
}

/* ---------- praat met je boekhouder ---------- */

.gesprek-raster { display: grid; gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.gesprek-tekst { font-size: 18px; margin-block: 18px 24px; max-width: 30em; }
/* spraakbericht: liever inspreken dan typen */
.spraak-blok { display: grid; gap: 10px; max-width: 460px; margin-block-end: 28px; background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--schaduw); }
.spraak-kop { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; color: var(--diep); }
.spraak-kop .ico { color: var(--merk); }
.spraak-bel { max-width: 88%; border-radius: 16px; padding: 10px 12px; font-size: 14.5px; line-height: 1.45; }
.spraak-bel.jij { justify-self: end; display: flex; align-items: center; gap: 10px; background: var(--merk); color: #fff; border-bottom-right-radius: 5px; }
.speel { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--limoen); color: var(--diep); display: grid; place-items: center; }
.golf { display: flex; align-items: center; gap: 2.5px; height: 26px; }
.golf i { width: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); }
.spraak-bel time { font-size: 11px; color: var(--bon); }
.spraak-bel.wij { justify-self: start; background: var(--zacht); color: var(--inkt); border-end-start-radius: 5px; }
.gesprek { width: 100%; max-width: 600px; justify-self: end; background: #fff; border-radius: var(--hoek); padding: 20px 22px 24px; box-shadow: var(--schaduw-zwaar); }
.gesprek-kop { display: flex; align-items: center; gap: 12px; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--lijn); }
.gesprek-kop b { display: block; font-size: 16px; line-height: 1.3; color: var(--diep); }
.gesprek-kop small { display: block; font-size: 13px; color: var(--grijs); }
.gesprek-lijst { display: flex; flex-direction: column; gap: 12px; }
.bel { max-width: 84%; border-radius: 18px; padding: 11px 15px 12px; font-size: 15.5px; line-height: 1.5; }
.bel b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-block-end: 3px; }
[dir="rtl"] .bel b, .taal-hi .bel b { letter-spacing: 0; text-transform: none; font-size: 13px; }
.bel.jij { align-self: flex-end; background: var(--merk); color: #fff; border-end-end-radius: 6px; }
.bel.jij b { color: var(--bon); }
.bel.wij { align-self: flex-start; background: var(--zacht); color: var(--inkt); border-end-start-radius: 6px; }
.bel.wij b { color: var(--merk); }
/* De berichten komen één voor één binnen (script onderaan de pagina). Zonder script staat alles er meteen. */
.typt { display: none; }
.typt i { display: inline-block; width: 7px; height: 7px; margin-inline: 2px; border-radius: 50%; background: var(--merk); opacity: 0.35; animation: typt 1s infinite; }
.typt i:nth-child(2) { animation-delay: 0.15s; }
.typt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typt { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.speelt .bel:not(.typt) { display: none; }
.speelt .bel.te-zien { display: block; animation: bel-in 0.35s ease-out; }
@keyframes bel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 1001px) {
  .gesprek-raster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (max-width: 1000px) {
  .gesprek { justify-self: stretch; max-width: none; }
}
@media (max-width: 640px) {
  .gesprek { padding: 16px 16px 20px; }
  .bel { font-size: 15px; max-width: 90%; }
}

/* ---------- voor elk vak ---------- */

.kop-rij { display: grid; gap: 16px 48px; align-items: end; margin-block-end: 40px; }
.kop-rij > p { font-size: 18px; max-width: 30em; }
.vakken { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.vakken img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; background: var(--wolk); }
.vak-naam { margin-block-start: 14px; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--diep); }
.vak-merken { margin-block-start: 2px; font-size: 14px; color: var(--grijs); }

@media (min-width: 1001px) {
  .kop-rij { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .vakken { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
}
@media (max-width: 640px) {
  .kop-rij { margin-block-end: 28px; }
  .kop-rij > p { font-size: 17px; }
  .vakken img { border-radius: 16px; }
  .vak-naam { margin-block-start: 10px; font-size: 16px; }
  .vak-merken { font-size: 13px; }
}

/* ---------- vergelijken ---------- */

.donker-eiland { background: var(--diep); border-radius: var(--hoek-groot); padding: clamp(32px, 5vw, 72px); color: #CFE0DB; }
.donker-eiland .label-boven { color: var(--limoen); }
.verg-kop { color: #fff; margin-block-end: 32px; max-width: 20em; }
.verg-kop .punt { color: var(--limoen); }
.verg { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; }
.verg th, .verg td { padding: 18px 22px; text-align: start; vertical-align: middle; border-block-end: 1px solid rgba(255, 255, 255, 0.1); }
.verg thead th { font-size: 15px; font-weight: 700; color: var(--bon); border-block-end: 0; padding-block: 18px 14px; }
.verg tbody th { width: 28%; font-weight: 600; color: #fff; }
.verg tbody td { color: var(--bon); }
.verg .wij { width: 38%; background: rgba(181, 227, 61, 0.1); color: #fff; font-weight: 700; }
.verg thead .wij { border-start-start-radius: 18px; border-start-end-radius: 18px; }
.verg tbody tr:last-child .wij { border-end-start-radius: 18px; border-end-end-radius: 18px; border-block-end: 0; }
.verg td .ico { display: inline-block; vertical-align: -3px; margin-inline-end: 10px; color: #6F8C82; }
.verg td.wij .ico { color: var(--limoen); }
.verg .logo { color: #fff; font-size: 20px; }

@media (max-width: 640px) {
  .donker-eiland { padding: 32px 22px; border-radius: var(--hoek); }
  .verg-kop { margin-block-end: 16px; }
  /* per regel onder elkaar in plaats van drie smalle kolommen */
  .verg thead { display: none; }
  .verg, .verg tbody, .verg tr, .verg th, .verg td, .verg tbody th, .verg .wij { display: block; width: auto; }
  .verg tr { padding-block: 16px; border-block-end: 1px solid rgba(255, 255, 255, 0.1); }
  .verg tr:last-child { border-block-end: 0; }
  .verg th, .verg td, .verg tbody tr:last-child .wij { padding: 0; border: 0; border-radius: 0; }
  .verg tbody th { font-size: 13px; font-weight: 700; color: var(--bon); margin-block-end: 8px; }
  .verg td.wij { background: none; font-size: 16px; margin-block-end: 4px; }
  .verg td { font-size: 14px; }
}

/* ---------- prijs ---------- */

.prijs-raster { display: grid; gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.punten { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
/* rekenhulp: wat bespaar je per jaar */
.reken { display: grid; gap: 12px; max-width: 480px; margin-block-start: 30px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--schaduw); }
.reken-vraag { font-weight: 800; font-size: 16px; color: var(--diep); }
.reken-keuze { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) { .reken-keuze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reken-keuze button { font: inherit; font-weight: 700; font-size: 15px; color: var(--diep); background: #fff; border: 1.5px solid var(--lijn); border-radius: 12px; padding: 10px 4px; cursor: pointer; white-space: nowrap; }
.reken-keuze button:hover { border-color: var(--diep); }
.reken-keuze button[aria-pressed="true"] { background: var(--diep); border-color: var(--diep); color: #fff; }
.reken-keuze button:focus-visible { outline: 3px solid var(--diep); outline-offset: 2px; }
.reken-uitkomst { display: grid; gap: 2px; background: var(--limoen-zacht); border-radius: 14px; padding: 12px 14px; }
.reken-uitkomst span { font-size: 14.5px; font-weight: 600; color: var(--tekst); }
.reken-uitkomst b { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--merk); }
[dir="rtl"] .reken-uitkomst b, .taal-hi .reken-uitkomst b { letter-spacing: 0; }
.reken-klein { font-size: 13px; color: var(--grijs); }
.punten li { display: flex; align-items: flex-start; gap: 12px; font-size: 17.5px; color: var(--inkt); }
.punten .ico { margin-block-start: 2px; }
.prijs-kaart { background: #fff; border-radius: var(--hoek-groot); overflow: hidden; box-shadow: var(--schaduw-zwaar); text-align: center; }
.prijs-lint { background: var(--limoen); color: var(--diep); font-weight: 800; font-size: 15px; padding: 13px 20px; }
.prijs-binnen { display: flex; flex-direction: column; align-items: center; padding: 32px 40px 40px; }
.bedrag { font-size: 80px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--diep); margin-block: 6px; }
.per { font-size: 16px; font-weight: 600; margin-block-end: 28px; }
.vergelijk { margin-block-start: 16px; font-size: 14px; color: var(--grijs); }

@media (min-width: 1001px) {
  .prijs-raster { grid-template-columns: minmax(0, 1fr) 440px; }
}
@media (max-width: 400px) {
  .prijs-binnen { padding-inline: 16px; }
  .prijs-kaart .knop { font-size: 15.5px; padding-inline: 16px; }
  .prijs-kaart .knop .ico { display: none; }
}
@media (max-width: 640px) {
  .punten li { font-size: 16.5px; }
  .prijs-binnen { padding: 28px 22px 30px; }
  .bedrag { font-size: 64px; }
  .prijs-kaart .knop { padding-inline: 18px; font-size: 16px; }
}

/* ---------- eerlijk en netjes ---------- */

.eerlijk { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 56px); }
.eerlijk li { border-block-start: 1px solid var(--lijn); padding-block-start: 28px; }
.eerlijk-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--limoen-zacht); color: var(--merk); display: grid; place-items: center; margin-block-end: 18px; }
.eerlijk h3 { margin-block-end: 8px; }
.eerlijk p { max-width: 26em; }
@media (max-width: 1000px) {
  .eerlijk { grid-template-columns: 1fr; margin-block-start: 28px; gap: 24px; }
  .eerlijk li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding-block-start: 24px; }
  .eerlijk-ico { grid-row: span 2; margin: 0; }
}

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

.vragen-raster { display: grid; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.vragen-tekst { margin-block: 18px 26px; font-size: 18px; max-width: 26em; }
.vraag { border-block-end: 1px solid var(--lijn); }
.vraag:first-child { border-block-start: 1px solid var(--lijn); }
.vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; font-weight: 700; font-size: 19px; color: var(--diep); }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary .ico { transition: transform 0.2s ease; color: var(--merk); }
.vraag[open] summary .ico { transform: rotate(180deg); }
.vraag p { padding-block-end: 22px; max-width: 40em; }
@media (min-width: 1001px) {
  .vragen-raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
@media (max-width: 640px) {
  .vraag summary { font-size: 17px; padding-block: 18px; }
}

/* ---------- slot ---------- */

.slot { position: relative; overflow: hidden; display: grid; gap: 48px; align-items: center; background: var(--diep); color: #CFE0DB; border-radius: var(--hoek-groot); padding: clamp(36px, 5vw, 72px); }
.slot h2 { color: #fff; }
.slot .punt { color: var(--limoen); }
.slot-tekst > p { font-size: 18px; margin-block: 16px 30px; max-width: 30em; }
.slot-tekst b { color: #fff; }
.slot-beeld { position: relative; height: 380px; }
.slot-beeld .iphone { position: absolute; right: 24px; top: 0; width: 240px; box-shadow: inset 0 0 0 2px #3A3B3E, inset 0 0 0 3px #1A1A1C, 0 40px 80px rgba(0, 0, 0, 0.45); }
[dir="rtl"] .slot-beeld .iphone { right: auto; left: 24px; }
@media (min-width: 1001px) {
  .slot { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
@media (max-width: 1000px) {
  .slot-beeld { display: none; }
}
@media (max-width: 640px) {
  .slot { padding: 32px 22px 36px; border-radius: var(--hoek); }
  .slot-tekst > p { font-size: 17px; }
}

/* ---------- voet ---------- */

.voet { background: var(--wolk); border-block-start: 1px solid var(--lijn); padding-block-start: 64px; font-size: 14px; color: var(--grijs); }
.voet-raster { display: grid; grid-template-columns: 1.3fr 1fr 1.7fr; gap: 40px; }
.voet-merk p { margin-block: 12px 18px; }
.voet h3 { font-size: 14px; letter-spacing: 0.04em; color: var(--diep); margin-block-end: 14px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet ul a { text-decoration: none; color: var(--tekst); }
.voet ul a:hover { color: var(--diep); text-decoration: underline; }
.voet .voet-talen { display: flex; flex-wrap: wrap; gap: 8px; }
.voet .voet-talen a { display: inline-block; border: 1px solid var(--lijn); background: #fff; border-radius: 999px; padding: 5px 12px; color: var(--diep); }
.voet .voet-talen a[aria-current="page"] { background: var(--diep); color: #fff; border-color: var(--diep); }
.voet-onder { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; border-block-start: 1px solid var(--lijn); margin-block-start: 48px; padding-block: 22px 32px; font-size: 13px; }
@media (max-width: 1000px) {
  .voet-raster { grid-template-columns: 1fr 1fr; }
  .voet-merk { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .voet { padding-block-start: 48px; }
  .voet-raster { grid-template-columns: 1fr; gap: 32px; }
  .voet-onder { margin-block-start: 36px; padding-block-end: 100px; }
}

/* ---------- vaste knop op de telefoon ---------- */

.vaste-knop { display: none; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .vaste-knop { display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; inset-inline: 12px; bottom: 12px; z-index: 30; background: var(--limoen); color: var(--diep); font-weight: 700; font-size: 16px; text-decoration: none; border-radius: 999px; padding: 15px 20px; box-shadow: 0 10px 30px rgba(15, 46, 36, 0.25); transition: opacity 0.2s, transform 0.2s; }
  .vaste-knop.weg { opacity: 0; transform: translateY(16px); pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop, .vraag summary .ico { transition: none; }
}