/* =========================================================================
   Homepage: de secties onder de hero (MainPage.razor, 15 okt 2026).

   MainPage zet ProductBlokken, HorecaSteps ("Samen één geheel"), VoorWie,
   InHetKort, HorecaFaq en HomeSlot in <div class="rg-home">. Elke selector
   hier begint met .landing-root .rg-home: dezelfde componenten op de
   productpagina's (/crm-app, /horeca/..., /webshop-chatbot) veranderen niet.
   De teksten veranderen ook niet; alleen vorm en beweging.

   - Ritme: één breedte (die van de hero), één verticale maat, afwisselend
     canvas en sunken, koppen links.
   - Producten: kaart in de kleur van het product (--rg-productkleur,
     landing.css), prijs en knop onderaan, zachte hover.
   - Samen: drie stappen in de kleuren telefonist / chatbot / reserveren met
     een verbindingslijn die zich tekent als de stappen binnenkomen: boven de
     kaarten met een stip per stap (bureaublad), links ervan (telefoon).
   - Voor wie: drie tegels met een icoon. In het kort: één feitenblad.
   - FAQ: kop links (sticky) vanaf 1024 px, vloeiend open en dicht.
   - Slotband: het knooppunt als vage, stilstaande tekening, altijd heel.

   Binnenkomen bij het scrollen: de bestaande anim-hidden/landing.js
   (stagger per kaart). Zonder JavaScript en bij minder beweging staat alles
   meteen in beeld. Alleen --rg-*-tokens.
   ========================================================================= */

.landing-root .rg-home {
  /* Eén verticale maat voor elke sectie. */
  --rg-home-ruimte: clamp(3.5rem, 8vw, 7rem);
  /* Eén breedte: die van de hero (.rg-wrap in landing.css). */
  --rg-home-breedte: 80rem;
}

/* --- Ritme ----------------------------------------------------------------- */

.landing-root .rg-home > .rg-section { padding-block: var(--rg-home-ruimte); }

/* VoorWie, InHetKort en HorecaFaq zetten hun breedte inline op 52rem
   (style="max-width: 52rem;"), gedeeld met de productpagina's. Een inline
   stijl wint van elke regel behalve een !important: daarom hier, en alleen
   hier, !important. */
.landing-root .rg-home .rg-wrap { max-width: var(--rg-home-breedte) !important; }

/* Afwisselend canvas en sunken: producten (canvas), samen (sunken), voor wie
   (canvas), in het kort (sunken), FAQ (canvas), slotband (inkt). */
.landing-root .rg-home > #in-het-kort { background: var(--rg-sunken); }

/* Koppen links, zoals in de hero. */
.landing-root .rg-home .rg-head--center { text-align: start; }
.landing-root .rg-home .rg-head--center .rg-measure { margin-inline: 0; }
.landing-root .rg-home :is(#voor-wie, #in-het-kort) .rg-h2 { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* --- Producten ------------------------------------------------------------- */

/* Gelijke hoogte (rg-duo rekt de kaarten op), prijs en knop onderaan. */
.landing-root .rg-home #producten .rg-listcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 3px solid var(--rg-productkleur);
}
.landing-root .rg-home #producten .rg-listcard__icon {
  color: var(--rg-productkleur);
  background: color-mix(in srgb, var(--rg-productkleur) 12%, var(--rg-surface));
}
/* Lucht tussen de zin van het product en zijn drie punten. */
.landing-root .rg-home #producten .rg-listcard .rg-body { margin-bottom: 1rem; }
.landing-root .rg-home #producten .rg-listcard__items { margin-bottom: 1.25rem; }
/* De links naar de functielijst en de horecahub: links, zoals de koppen
   (producten.css centreert ze voor de andere plekken). */
.landing-root .rg-home .rg-producten__verder { text-align: start; }
.landing-root .rg-home #producten .rg-producten__prijs { margin-top: auto; }
/* "Meer over Ragently Webshop-chatbot" past op 320 px niet op één regel:
   de knop mag dan breken in plaats van uit de kaart te steken. */
.landing-root .rg-home #producten .rg-listcard .rg-btn { max-width: 100%; white-space: normal; text-align: start; }
@media (hover: hover) and (pointer: fine) {
  /* Zacht omhoog; de schaduw komt uit landing.css (kaarten met lichtvlek). */
  .landing-root .rg-home #producten .rg-listcard.is-visible:hover { transform: translateY(-2px); }
}

/* --- Samen één geheel: een stroom in drie stappen ------------------------- */

.landing-root .rg-home #samen .rg-step:nth-child(1) { --rg-stapkleur: var(--rg-settled); }
.landing-root .rg-home #samen .rg-step:nth-child(2) { --rg-stapkleur: var(--rg-primary); }
.landing-root .rg-home #samen .rg-step:nth-child(3) { --rg-stapkleur: var(--rg-reserveren); }
.landing-root .rg-home #samen .rg-step { position: relative; z-index: 1; }
.landing-root .rg-home #samen .rg-step__n { color: var(--rg-stapkleur); }

/* De verbindingslijn: een strook die zich tekent (scaleX, of scaleY op de
   telefoon) zodra een stap binnenkomt (.is-visible). Waar hij ligt, staat
   per breedte hieronder. */
.landing-root .rg-home #samen .rg-steps { position: relative; }
.landing-root .rg-home #samen .rg-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  background: linear-gradient(var(--rg-home-lijnrichting, 180deg), var(--rg-settled), var(--rg-primary), var(--rg-reserveren));
  transition: transform 1200ms var(--rg-ease) 200ms;
}
.landing-root .rg-home #samen .rg-steps:has(.rg-step.is-visible)::before { transform: none; }

/* Telefoon en tablet: onder elkaar, de lijn links. */
@media (max-width: 899.98px) {
  .landing-root .rg-home #samen .rg-steps { grid-template-columns: minmax(0, 1fr); padding-left: 1.25rem; }
  .landing-root .rg-home #samen .rg-steps::before {
    top: 1rem;
    bottom: 1rem;
    left: 0.25rem;
    width: 2px;
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
}
/* Vanaf 900 px: naast elkaar. De lijn loopt BOVEN de kaarten (achter een
   witte kaart zou je hem niet zien), van de stip van stap 1 tot die van
   stap 3; elke stap heeft een stip op de lijn, in zijn eigen kleur. */
@media (min-width: 900px) {
  .landing-root .rg-home #samen .rg-steps {
    /* De maten van lijn en stippen op één plek (de stippen erven ze). */
    --rg-home-stapgat: 1.25rem;     /* ruimte tussen de kaarten */
    --rg-home-lijnstrook: 1.75rem;  /* strook boven de kaarten voor lijn en stippen */
    --rg-home-lijnmidden: 0.5rem;   /* hoogte van de lijn in die strook */
    --rg-home-stip: 12px;           /* doorsnede van een stip */
    --rg-home-stipinsprong: 1.5rem; /* stip recht boven het stapnummer (padding van .rg-step) */
    gap: var(--rg-home-stapgat);
    padding-top: var(--rg-home-lijnstrook);
  }
  .landing-root .rg-home #samen .rg-steps::before {
    --rg-home-lijnrichting: 90deg;
    top: calc(var(--rg-home-lijnmidden) - 1px);
    /* Begin: midden van de eerste stip (1px is de rand van de kaart). */
    left: calc(1px + var(--rg-home-stipinsprong) + var(--rg-home-stip) / 2);
    /* Eind: midden van de laatste stip. De laatste kaart is een derde van
       de breedte zonder de twee tussenruimtes; daarvan valt het stuk rechts
       van zijn stip af. */
    right: calc((100% - 2 * var(--rg-home-stapgat)) / 3 - 1px - var(--rg-home-stipinsprong) - var(--rg-home-stip) / 2);
    height: 2px;
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  /* De stip van een stap: op de lijn, recht boven het stapnummer. Hij komt
     net na zijn kaart binnen (de kaart zelf komt binnen via anim-hidden). */
  .landing-root .rg-home #samen .rg-step::after {
    content: "";
    position: absolute;
    top: calc(var(--rg-home-lijnmidden) - var(--rg-home-lijnstrook) - 1px - var(--rg-home-stip) / 2);
    left: var(--rg-home-stipinsprong);
    width: var(--rg-home-stip);
    height: var(--rg-home-stip);
    border-radius: 50%;
    background: var(--rg-stapkleur);
    /* Een ring in de kleur van de sectie: de lijn lijkt door de stip te lopen. */
    box-shadow: 0 0 0 4px var(--rg-sunken);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 400ms ease 300ms, transform 500ms var(--rg-ease) 300ms;
  }
  .landing-root .rg-home #samen .rg-step.is-visible::after { opacity: 1; transform: none; }
}

/* --- Voor wie: drie tegels ------------------------------------------------- */

.landing-root .rg-home .rg-voorwie--tegels {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 760px) {
  .landing-root .rg-home .rg-voorwie--tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.landing-root .rg-home .rg-voorwie--tegels li {
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 1.5rem;
}
/* Het vinkje van de gewone lijst hoort niet bij een tegel met een icoon. */
.landing-root .rg-home .rg-voorwie--tegels li::before { display: none; }
.landing-root .rg-home .rg-voorwie__ico {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: var(--rg-primary-wash);
  color: var(--rg-primary);
}

/* --- In het kort: één feitenblad ------------------------------------------- */

/* Gewone tekst (crawlers en llms-full.txt lezen hem), in een blad met dunne
   lijnen in plaats van losse kaders; twee kolommen vanaf 900 px. */
.landing-root .rg-home .rg-feiten {
  margin-top: 0;
  gap: 0;
  padding: 0.5rem 1.5rem;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-lg);
}
.landing-root .rg-home .rg-feiten li {
  padding: 1rem 0 1rem 1.75rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rg-line);
  border-radius: 0;
}
/* Het vinkje: groen (zichtbaar op het witte blad) en midden op de eerste
   regel (de li kreeg hierboven een andere padding dan in landing.css). */
.landing-root .rg-home .rg-feiten li::before { left: 0.35rem; top: 1.25rem; border-color: var(--rg-settled); }
.landing-root .rg-home .rg-feiten li:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .landing-root .rg-home .rg-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .landing-root .rg-home .rg-feiten li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* --- FAQ -------------------------------------------------------------------- */

.landing-root .rg-home .rg-faq__intro { margin-top: 0.875rem; }

/* Vanaf 1024 px: kop en intro links (blijven staan bij het scrollen),
   vragen rechts. */
@media (min-width: 1024px) {
  .landing-root .rg-home #home-faq .rg-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .landing-root .rg-home #home-faq .rg-head {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }
}

/* Vloeiend open en dicht: het antwoord groeit van 0 naar zijn hoogte
   (::details-content met interpolate-size; browsers die dat nog niet kennen
   openen gewoon meteen), en schuift zacht in. Het plusje draait al in
   landing.css (rotate 45deg op [open]). */
.landing-root .rg-home .rg-faq { interpolate-size: allow-keywords; }
.landing-root .rg-home .rg-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 320ms var(--rg-ease), content-visibility 320ms allow-discrete;
}
.landing-root .rg-home .rg-faq__item[open]::details-content { block-size: auto; }
.landing-root .rg-home .rg-faq__item[open] .rg-faq__a { animation: rgHomeFaqIn 320ms var(--rg-ease) both; }
@keyframes rgHomeFaqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- Slotband: het knooppunt als achtergrond -------------------------------- */

/* De hele tekening blijft zichtbaar (afgesneden stations lezen als een
   fout): hij schaalt op de HOOGTE van de band, met lucht boven en onder, en
   de breedte volgt uit de verhouding van het vlak (400 × 430). Rechts naast
   de tekst; op de telefoon gecentreerd achter de tekst en nog vager. */
.landing-root .rg-home .rg-closer__knooppunt {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(1rem, 5vw, 5rem);
  height: calc(100% - 2 * clamp(1.25rem, 3vw, 2rem));
  width: auto;
  max-width: 42%;
  aspect-ratio: 400 / 430;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--rg-surface);
  stroke-width: 1.5;
  opacity: 0.12;
  pointer-events: none;
}
/* De lijnen blijven 1,5 px dik, ook als de tekening kleiner wordt
   (vector-effect erft niet: daarom op elke vorm). */
.landing-root .rg-home .rg-closer__knooppunt * { vector-effect: non-scaling-stroke; }
/* Tussen telefoon en breed scherm ligt de tekening deels achter de kop en de
   knoppen: dan nog vager, zodat hij nergens met de tekst concurreert. */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .landing-root .rg-home .rg-closer__knooppunt { opacity: 0.08; }
}
@media (max-width: 759.98px) {
  .landing-root .rg-home .rg-closer__knooppunt { right: 50%; max-width: calc(100% - 2rem); transform: translate(50%, -50%); opacity: 0.08; }
}

/* --- Zonder JavaScript en bij minder beweging: alles meteen in beeld --------- */

@media (scripting: none) {
  .landing-root .rg-home :is(.anim-hidden, .anim-from-left, .anim-from-right, .anim-scale) { opacity: 1; transform: none; filter: none; }
  .landing-root .rg-home .rg-kop .rg-w__in { transform: none; }
  .landing-root .rg-home .rg-step .rg-step__n { clip-path: none; transform: none; }
  .landing-root .rg-home #samen .rg-steps::before { transform: none; }
  .landing-root .rg-home #samen .rg-step::after { opacity: 1; transform: none; }
  /* Decor, maar anders een lege tegel boven elke productkop: landing.css laat
     de iconen pas binnenkomen met .is-visible (dat zet landing.js). */
  .landing-root .rg-home .rg-listcard .rg-listcard__icon { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-root .rg-home #samen .rg-steps::before { transform: none; transition: none; }
  .landing-root .rg-home #samen .rg-step::after { opacity: 1; transform: none; transition: none; }
  .landing-root .rg-home .rg-faq__item::details-content { transition: none; }
  .landing-root .rg-home .rg-faq__item[open] .rg-faq__a { animation: none; }
}