/* De homepage in de opbouw van implementconsulting.io (verzoek Koen, 13 oktober 2026), in onze eigen crèmestijl:
   een gecentreerde hero met een pil-label en twee ronde knoppen, secties met een dunne lijn ertussen, een pil als
   label boven elke kop, grote vette koppen, de aanpak als uitklapbare genummerde fases, een raster met wat er
   inbegrepen is, en onderaan de agenda op de pagina. Kleuren en lettertype blijven die van site.css. */

main { overflow-x: clip; }

/* ---- Hero ---- */
.io-held { position: relative; padding: clamp(72px, 11vw, 136px) 0 clamp(56px, 8vw, 96px); text-align: center; isolation: isolate; }
.io-gloed {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--green-tint) 90%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.io-held-binnen { display: flex; flex-direction: column; align-items: center; }
.io-pil {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--surface); font-size: 0.88rem; color: var(--ink-2); box-shadow: var(--shadow-card);
}
.io-pil-tag { padding: 3px 10px; border-radius: var(--r-pill); background: var(--green); color: var(--green-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
/* Sinds 14 oktober 2026 de twee stappen naast elkaar: eerst het Vrijheidssysteem, daarna de Omzetmachine (Koen). */
.io-pil-pijl { color: var(--ink-3); font-size: 0.85rem; }
/* De Omzetmachine in goud: de stap waar het geld zit (Koen). Hetzelfde goud als .btn-gold, met een verloop en een glans. */
.io-pil-tag-goud {
  position: relative; overflow: hidden; color: #2B2111;
  background: linear-gradient(135deg, #F3DFA6 0%, #D9BC7C 38%, #C9A96A 62%, #A8843F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(120, 88, 30, 0.35), 0 2px 10px rgba(201, 169, 106, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.io-pil-tag-goud::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  transform: translateX(-120%); animation: ioGlans 1400ms 900ms var(--ease-calm) 1 forwards;
}
@keyframes ioGlans { to { transform: translateX(120%); } }
/* De geld-terug-garantie onder "Het aanbod" (14 oktober 2026): een kaart met een gouden rand, zoals de Omzetmachine. */
.io-garantie {
  margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid #D9BC7C; box-shadow: 0 0 0 4px rgba(217, 188, 124, 0.18), var(--shadow-card); max-width: 760px;
}
.io-garantie-label {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; color: #2B2111;
  background: linear-gradient(135deg, #F3DFA6 0%, #D9BC7C 38%, #C9A96A 62%, #A8843F 100%);
}
.io-garantie p { margin: 14px 0 12px; font-size: 1.12rem; line-height: 1.6; color: var(--ink); }
.io-garantie a:not(.btn) { font-weight: 600; color: var(--green); }
.io-garantie .btn { margin-top: 6px; }
/* Als eigen blok op de homepage (sinds het aanbod eraf is): in het midden. */
#garantie-blok .io-garantie { margin: 0 auto; text-align: center; }
.io-held h1.io-kop {
  margin: 28px auto 0; max-width: 17ch; font-size: clamp(2.5rem, 6.2vw, 4.6rem); line-height: 1.04; font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); text-wrap: balance;
}
.io-sub { margin: 24px auto 0; max-width: 44ch; font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.io-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.io-knoppen .btn, .io-agenda .btn { border-radius: var(--r-pill); }
.io-knop-tweede span { margin-left: 4px; }
.io-micro { margin-top: 14px; font-size: 0.86rem; color: var(--ink-3); }
.io-beeld { width: 100%; max-width: 580px; margin: clamp(48px, 7vw, 72px) auto 0; text-align: left; }
.io-held .eigendom-regel { margin-top: 24px; text-align: center; }

/* ---- Secties ---- */
.io-sectie { position: relative; padding-top: clamp(80px, 10vw, 128px); padding-bottom: clamp(16px, 2vw, 24px); }
.io-sectie::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  border-top: 1px solid var(--line);
}
.io-label {
  display: inline-block; margin-bottom: 22px; padding: 5px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); font-size: 0.85rem; font-weight: 500; color: var(--ink-2);
}
main .io-sectie h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.028em; color: var(--ink); max-width: 20ch; }
.io-sectie-kop { margin-bottom: clamp(32px, 4vw, 48px); }
.io-sectie-kop.wrap { display: block; }
.io-midden { text-align: center; }
.io-midden h2, .io-midden .io-intro { margin-left: auto; margin-right: auto; }
main .io-sectie h2.io-statement { max-width: 18ch; margin: 0 auto clamp(40px, 5vw, 56px); font-size: clamp(2.3rem, 6vw, 4.4rem); }
.io-zacht { color: var(--ink-3); }
.io-smal { max-width: 860px; }
.io-intro { margin-top: 18px; max-width: 54ch; font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); }

/* De dinsdagen: de eigen kop staat nu boven de speler. */
.dag.io-sectie .dag-kop h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.io-sectie-kop + .speler-wrap { padding-top: 0; }
.klus.io-sectie { padding-top: clamp(80px, 10vw, 128px); }
.klus.io-sectie .week, .klus.io-sectie .klus-bron { text-align: left; }
.klus.io-sectie .klus-bron { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Wat klanten zeggen: een rij die opzij schuift ---- */
.io-rij-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 40px); }
.io-pijlen { display: flex; gap: 8px; flex-shrink: 0; }
.io-pijlen[hidden] { display: none; }
.io-pijl {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 200ms var(--ease-calm), transform 100ms ease-out;
}
.io-pijl:hover { border-color: var(--ink-3); }
.io-pijl:active { transform: scale(0.95); }
.io-pijl:disabled { opacity: 0.4; cursor: default; }
.io-carrousel .reviews {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0;
  padding-bottom: 6px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.io-carrousel .reviews::-webkit-scrollbar { display: none; }
.io-carrousel .reviews > div { flex: 0 0 min(88%, 380px); scroll-snap-align: start; display: flex; }
.io-carrousel .reviews > div > * { flex: 1; }
.io-carrousel.draait {
  /* Ruimte boven en onder, zodat de schaduw van de kaarten niet als grijs vlak wordt afgeknipt (Koen: "alleen de
     kaarten zelf zien, niets erachter"). Aan de zijkanten lopen de kaarten zacht uit in plaats van hard afgesneden. */
  overflow: hidden; padding: 28px 0 48px; margin: -28px 0 -48px;
  -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%);
}
.io-carrousel.draait .reviews {
  overflow: visible; scroll-snap-type: none; padding-bottom: 0;   /* de kaarten steken buiten de rij; het kader knipt af */
  touch-action: pan-y; user-select: none; -webkit-user-select: none; will-change: transform; cursor: grab;
}
.io-carrousel.draait.sleept .reviews { cursor: grabbing; }
.io-carrousel.draait .reviews > div { scroll-snap-align: none; transform-origin: 50% 50%; }
/* Elke kaart zo hoog als zijn eigen tekst (Koen, 15 oktober 2026: "heel groot de schijf, waarvan de helft maar tekst
   is"). Eerst rekten alle kaarten mee met de langste review; nu staan ze op hun eigen hoogte, midden in de rij. */
.io-carrousel.draait .reviews { align-items: center; }
.io-carrousel.draait .reviews > div { display: block; }
.io-carrousel.draait .review { height: auto; gap: 12px; padding: 24px 24px 20px; }
.io-carrousel.draait .review blockquote p { font-size: 1rem; line-height: 1.55; }
@media (max-width: 600px) {
  .io-carrousel.draait .reviews > div { flex-basis: min(78%, 300px); }
  .io-carrousel.draait .review { padding: 18px 16px 14px; gap: 10px; border-radius: var(--r-l); }
  .io-carrousel.draait .review blockquote p { font-size: 0.9rem; line-height: 1.5; }
  .io-carrousel.draait .review::before { top: 2px; right: 12px; font-size: 2.4rem; }
  .io-carrousel.draait .review figcaption { padding-top: 10px; gap: 10px; }
  .io-carrousel.draait .review-letter { flex-basis: 34px; height: 34px; font-size: 0.9rem; }
  .io-carrousel.draait .review-wie b { font-size: 0.92rem; }
  .io-carrousel.draait .review-wie span { font-size: 0.8rem; }
  .io-carrousel.draait .review-sterren svg { width: 14px; height: 14px; }
}
.io-carrousel.draait .review {
  box-shadow: 0 10px 30px rgba(23, 32, 27, 0.08);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.io-carrousel.draait .review.kantelt {
  transition: transform 90ms linear, box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 22px 48px rgba(23, 32, 27, 0.14);
}
.io-carrousel.draait .review::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(194, 161, 94, 0.16), transparent 45%);
  transition: opacity 260ms ease;
}
.io-carrousel.draait .review.kantelt::after { opacity: 1; }
.io-carrousel.draait.sleept .review { transition: none; }
.oprichters.io-sectie { padding-top: clamp(80px, 10vw, 128px); }
.io-citaat { margin-top: clamp(48px, 6vw, 72px) !important; }

/* ---- Onze aanpak: genummerde fases die openklappen ---- */
.io-fases { display: grid; gap: 14px; margin-top: clamp(32px, 4vw, 44px); text-align: left; }
.io-fase { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color 200ms var(--ease-calm); }
.io-fase:hover, .io-fase[open] { border-color: var(--line-strong); }
.io-fase summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 22px 26px; cursor: pointer; list-style: none; border-radius: var(--r-l); }
.io-fase summary::-webkit-details-marker { display: none; }
.io-fase summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.io-nr {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9rem; font-weight: 600; color: var(--green-soft);
}
.io-fase-tekst b { display: block; font-size: 1.22rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.io-fase-tekst span { display: block; margin-top: 4px; font-size: 0.95rem; color: var(--ink-3); }
.io-pijltje { width: 10px; height: 10px; margin-right: 4px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform 240ms var(--ease-calm); }
.io-fase[open] .io-pijltje { transform: rotate(-135deg) translateY(-3px); }
.io-fase-body { padding: 0 26px 24px 90px; color: var(--ink-2); line-height: 1.6; }
.io-fase-body .checklist { margin: 0; }
.hoe.io-sectie .hoe-link { margin-top: 28px; }

/* ---- Inbegrepen: het raster ---- */
/* Vijf kaarten: drie boven, twee breder eronder, zodat er geen gat in de rij staat. */
.io-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.io-raster > .io-kaart { grid-column: span 2; }
.io-raster > .io-kaart:nth-child(n + 4) { grid-column: span 3; }
@media (max-width: 860px) { .io-raster { grid-template-columns: 1fr 1fr; } .io-raster > .io-kaart, .io-raster > .io-kaart:nth-child(n + 4) { grid-column: auto; } .io-raster > .io-kaart:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .io-raster { grid-template-columns: 1fr; } }
.io-kaart { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-card); }
.io-kaart-top {
  display: grid; place-items: center; height: 112px; color: var(--green-ink);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-soft) 100%);
}
.io-kaart h3 { margin: 18px 20px 6px; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.io-kaart p { margin: 0 20px 22px; font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); }

/* ---- Waar je naartoe groeit ---- */
.groeien.io-sectie { padding-top: clamp(80px, 10vw, 128px); }

/* ---- Plan je groeigesprek: de agenda op de pagina ---- */
.io-plan { margin-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(80px, 10vw, 120px); background: var(--surface-2); }
.io-plan::before { border-top-color: var(--line-strong); }
.io-plan h2 { margin: 0 auto; max-width: 18ch; }
.io-plan h2 span { display: block; color: var(--ink); }
.io-plan h2 span:first-child { font-size: 0.5em; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); margin-bottom: 0.3em; }
.io-agenda {
  display: grid; justify-items: center; gap: 22px; max-width: 640px; margin: 36px auto 0; padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-float);
}
.io-agenda .groei-actie { display: grid; justify-items: center; gap: 10px; }
.io-agenda .groei-micro { text-align: center; }
.io-momenten { width: 100%; }
.io-momenten[hidden] { display: none; }
.io-momenten-kop { margin: 0 0 12px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.io-momenten-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.io-moment {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--green); font-size: 0.92rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: transform 100ms ease-out, border-color 200ms var(--ease-calm), background 200ms var(--ease-calm);
}
.io-moment:hover { border-color: var(--green); background: var(--green-tint); }
.io-moment:active { transform: scale(0.97); }
.io-momenten.komt { animation: ioIn 280ms var(--ease-calm) both; }
@keyframes ioIn { from { opacity: 0; } to { opacity: 1; } }
.io-plan .slot-eigendom { margin-top: 22px; font-size: 0.86rem; color: var(--ink-3); }

/* ---- Telefoon ---- */
@media (max-width: 640px) {
  .io-pil { gap: 6px; padding-right: 4px; }
  .io-knoppen { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .io-rij-kop { align-items: flex-start; flex-direction: column; }
  .io-fase summary { gap: 14px; padding: 18px; }
  .io-nr { width: 38px; height: 38px; }
  .io-fase-body { padding: 0 18px 20px; }
}
@media (max-width: 420px) {
  .io-pil { gap: 4px; padding: 3px; }
  .io-pil-tag { padding: 3px 7px; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .io-pijltje, .io-fase, .io-moment, .io-pijl { transition: none; }
  .io-momenten.komt { animation: none; }
  .io-pil-tag-goud::after { animation: none; }
  .io-carrousel .reviews { scroll-behavior: auto; }
}

/* ---- Jouw dinsdag in de hero (15 oktober 2026), op de plek van "Eén aanvraag, van begin tot eind" ---- */
.io-beeld.io-beeld-dinsdag { max-width: 1120px; }
.dag.dag-in-held { padding: 0; }
/* Duidelijk in de widget zelf welke dag je ziet (Koen, 15 oktober 2026: "nu te onduidelijk"): de titel zegt "Jouw
   dinsdag zoals nu" of "met LeadFollow" in de kleur van die versie, het moment heeft hetzelfde label, en de rand van de
   widget kleurt mee: warm rood voor zoals nu, groen voor met LeadFollow. */
.speler-tijd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.speler-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.speler-titel .ts { display: none; padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.95rem; font-weight: 600; }
.speler[data-stand="nu"] .ts-nu, .speler[data-stand="straks"] .ts-straks { display: inline-block; }
.ts-nu { background: rgba(162, 54, 30, 0.1); color: var(--critical); }
.ts-straks { background: var(--success-tint); color: var(--success); }
.speler-hint { margin: 0; font-size: 0.84rem; color: var(--ink-3); }
html.js .dag-in-held .speler { transition: box-shadow 300ms var(--ease-calm); }
html.js .dag-in-held .speler[data-stand="nu"] { box-shadow: inset 0 4px 0 rgba(162, 54, 30, 0.55), var(--shadow-float); }
html.js .dag-in-held .speler[data-stand="straks"] { box-shadow: inset 0 4px 0 var(--success), var(--shadow-float); }
/* Het label bij het moment, als badge boven de zin (desktop) of tussen scherm en zin (telefoon). */
html.js .dag-in-held .speler .v-label {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap;
  grid-column: 2; grid-row: 1; align-self: end; justify-self: start; margin-bottom: 14px;
  padding: 5px 12px; border-radius: var(--r-pill); font-size: 0.74rem; letter-spacing: 0.1em;
}
html.js .dag-in-held .speler .v-nu .v-label { background: rgba(162, 54, 30, 0.1); color: var(--critical); }
html.js .dag-in-held .speler .v-straks .v-label { background: var(--success-tint); color: var(--success); }
.speler-acties { display: flex; align-items: center; gap: 12px; }
.speler-acties .btn { white-space: nowrap; }
.dag-in-held .dag-slotzin { margin-top: var(--r6); text-align: center; margin-left: auto; margin-right: auto; }
.dag-in-held .dag-bron { text-align: center; margin-left: auto; margin-right: auto; }
.avonden-sectie .avonden { margin-top: 0; }
@media (max-width: 760px) {
  /* Op de telefoon: klok en schakelaar naast elkaar, de knop eronder over de hele breedte. */
  html.js .speler-kop { flex-wrap: wrap; row-gap: 10px; }
  .speler-acties { display: contents; }
  .speler-acties .btn { order: 3; flex: 1 0 100%; justify-content: center; }
  .speler-titel { font-size: 1.05rem; }
  html.js .dag-in-held .speler .v-label { grid-column: 1; grid-row: 2; margin: 0 0 -4px 4px; }
  html.js .dag-in-held .speler .moment-tekst { grid-row: 3; }
  html.js .dag-in-held .speler .moment-klein { grid-row: 4; }
}