/* =========================================================================
   /crm-app: de sectie "Claude en ChatGPT" en de dashboardsectie
   (herontwerp 15 okt 2026; de eigenaar vond beide "karig").

   - .rg-crmai  = CrmAgent.razor met CrmAgentGesprek, CrmAgentStanden en
                  CrmAgentNoot (Pages/Landing/PageComponents/Crm/).
                  Bovenaan tekst + voorbeeldgesprek (twee kolommen vanaf
                  960 px), dan drie even hoge kaarten met de echte toolnamen
                  als chips, een rustig bijschrift, en onderaan de standen van
                  de autopiloot naast de callout "bewust niet".
   - .rg-crmdash = CrmDashboardVoorbeeld.razor: tekst links, de screenshot
                  rechts in een browserkader, licht gekanteld in 3D; bij
                  hover trekt hij recht. Op de telefoon onder elkaar.

   Regels die overal gelden:
   - Alleen bestaande --rg-*-tokens (landing.css), plus de twee merkkleuren
     van Claude en ChatGPT (product-hero.css zet ze ook op .rg-crmai).
   - Alleen transform en opacity bewegen.
   - Binnenkomen bij het scrollen: de bestaande anim-hidden/landing.js.
     Zonder JavaScript en bij minder beweging staat alles meteen in beeld,
     zonder kanteling.
   ========================================================================= */

/* --- Claude en ChatGPT: kleuren per kaart --------------------------------- */

.landing-root .rg-crmai .rg-crmai__kaart--zoeken    { --rg-crmai-kleur: var(--rg-primary); }
.landing-root .rg-crmai .rg-crmai__kaart--bijwerken { --rg-crmai-kleur: var(--rg-settled); }
.landing-root .rg-crmai .rg-crmai__kaart--campagnes { --rg-crmai-kleur: var(--rg-reserveren); }

/* --- Bovenaan: tekst en voorbeeldgesprek ---------------------------------- */

.landing-root .rg-crmai .rg-crmai__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 960px) {
  .landing-root .rg-crmai .rg-crmai__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.landing-root .rg-crmai .rg-crmai__tekst .rg-h2 { margin-bottom: 0.875rem; }
.landing-root .rg-crmai .rg-crmai__tekst .rg-lead { max-width: 36rem; }

/* De badge "26 MCP-tools" met de merktekens van Claude en ChatGPT. */
.landing-root .rg-crmai .rg-crmai__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  border-radius: 999px;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  box-shadow: var(--rg-shadow);
  font-size: 0.9375rem;
  color: var(--rg-text);
}
.landing-root .rg-crmai .rg-crmai__badge b { color: var(--rg-ink); font-weight: 700; }
.landing-root .rg-crmai .rg-crmai__merken { display: inline-flex; }
/* Het tweede merkteken schuift iets over het eerste, met een witte ring. */
.landing-root .rg-crmai .rg-crmai__merken .rg-ph__merk + .rg-ph__merk {
  margin-left: -0.375rem;
  box-shadow: 0 0 0 2px var(--rg-surface);
}

/* Het podium draagt de gloed; het venster erin komt binnen (anim-hidden). */
.landing-root .rg-crmai .rg-crmai__podium {
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.landing-root .rg-crmai .rg-crmai__podium::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -4% -6% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--rg-merk-claude) 30%, transparent),
    color-mix(in srgb, var(--rg-primary) 12%, transparent) 60%,
    transparent);
  filter: blur(36px);
  pointer-events: none;
}

.landing-root .rg-crmai .rg-crmai__gesprek {
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-lg);
  box-shadow: var(--rg-shadow-lg);
  color: var(--rg-text);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow: hidden;
}
.landing-root .rg-crmai .rg-crmai__venster-kop {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rg-line);
  color: var(--rg-ink);
}
.landing-root .rg-crmai .rg-crmai__verbonden {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--rg-settled-wash);
  color: var(--rg-settled);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.landing-root .rg-crmai .rg-crmai__stip { width: 6px; height: 6px; border-radius: 50%; background: var(--rg-settled); }

.landing-root .rg-crmai .rg-crmai__berichten {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1rem;
  background: var(--rg-canvas);
}
/* Jouw bericht: rechts, donker, zoals in een chat-app. */
.landing-root .rg-crmai .rg-crmai__bel--jij {
  justify-self: end;
  max-width: 88%;
  padding: 0.625rem 0.875rem;
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: var(--rg-ink);
  color: var(--rg-surface);
}
/* Het antwoord van Claude: zijn merkteken links, de inhoud ernaast. */
.landing-root .rg-crmai .rg-crmai__antwoord {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
}
.landing-root .rg-crmai .rg-crmai__antwoord-inhoud p { margin: 0 0 0.75rem; }

/* De aangeroepen tools: kleine monospace-chips met een pijltje ertussen. */
.landing-root .rg-crmai .rg-crmai__aanroepen {
  list-style: none;
  margin: 0.125rem 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.landing-root .rg-crmai .rg-crmai__aanroepen li { display: inline-flex; align-items: center; gap: 0.375rem; }
.landing-root .rg-crmai .rg-crmai__aanroepen li + li::before { content: "→"; color: var(--rg-text-ghost); }
.landing-root .rg-crmai .rg-crmai__aanroepen code {
  font-family: var(--rg-mono);
  font-size: 0.72rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--rg-merk-claude) 10%, var(--rg-surface));
  border: 1px solid color-mix(in srgb, var(--rg-merk-claude) 28%, var(--rg-surface));
  color: var(--rg-ink);
}

/* Wat er in het CRM veranderde: een deal- en een taakkaartje. */
.landing-root .rg-crmai .rg-crmai__resultaat { display: grid; gap: 0.5rem; }
.landing-root .rg-crmai .rg-crmai__regel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: 0.75rem;
  box-shadow: var(--rg-shadow);
}
.landing-root .rg-crmai .rg-crmai__regel-ico {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
}
.landing-root .rg-crmai .rg-crmai__regel-ico--deal { background: var(--rg-primary-wash); color: var(--rg-primary); }
.landing-root .rg-crmai .rg-crmai__regel-ico--taak { background: var(--rg-settled-wash); color: var(--rg-settled); }
.landing-root .rg-crmai .rg-crmai__regel-tekst { min-width: 0; }
.landing-root .rg-crmai .rg-crmai__regel-tekst b { display: block; color: var(--rg-ink); font-weight: 600; }
.landing-root .rg-crmai .rg-crmai__klein {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-text-faint);
}
.landing-root .rg-crmai .rg-crmai__fase {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--rg-settled-wash);
  color: var(--rg-settled);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.landing-root .rg-crmai .rg-crmai__wanneer {
  color: var(--rg-text-soft);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Het invoerveld onderaan: alleen decor, geen echt veld. */
.landing-root .rg-crmai .rg-crmai__invoer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.875rem 1rem 1rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 1rem;
  border: 1px solid var(--rg-line-strong);
  border-radius: 999px;
  color: var(--rg-text-ghost);
  font-size: 0.8125rem;
}
.landing-root .rg-crmai .rg-crmai__verstuur {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rg-merk-claude);
  color: var(--rg-surface);
  font-size: 0.75rem;
}

/* Smalle telefoon: geen merkteken naast het antwoord (de kop van het venster
   toont het al), en de fase/tijd onder de naam in plaats van ernaast. */
@media (max-width: 479.98px) {
  .landing-root .rg-crmai .rg-crmai__antwoord { grid-template-columns: minmax(0, 1fr); }
  .landing-root .rg-crmai .rg-crmai__antwoord > .rg-ph__merk { display: none; }
  .landing-root .rg-crmai .rg-crmai__regel { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.375rem; }
  .landing-root .rg-crmai .rg-crmai__fase,
  .landing-root .rg-crmai .rg-crmai__wanneer { grid-column: 2; justify-self: start; }
}

/* De berichten verschijnen na elkaar zodra het venster in beeld komt
   (is-visible, landing.js). Elk bericht draagt zijn eigen wachttijd
   (--rg-crmai-wacht, inline in CrmAgentGesprek.razor). */
@media (prefers-reduced-motion: no-preference) {
  .landing-root .rg-crmai .rg-crmai__gesprek .rg-crmai__bel {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
      opacity 500ms ease var(--rg-crmai-wacht, 0ms),
      transform 700ms var(--rg-ease) var(--rg-crmai-wacht, 0ms);
  }
  .landing-root .rg-crmai .rg-crmai__gesprek.is-visible .rg-crmai__bel { opacity: 1; transform: none; }
}

/* --- De drie kaarten ------------------------------------------------------ */

.landing-root .rg-crmai .rg-crmai__kaarten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
/* Vanaf 960 px drie naast elkaar, even hoog (het raster rekt ze op). De
   kaart Campagnes is iets breder: zijn tekst is het langst, zo lopen de
   drie kaarten gelijker vol. */
@media (min-width: 960px) {
  .landing-root .rg-crmai .rg-crmai__kaarten {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 1.125rem;
  }
}
.landing-root .rg-crmai .rg-crmai__kaart {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  border-top: 3px solid var(--rg-crmai-kleur);
}
.landing-root .rg-crmai .rg-crmai__kaart .rg-h3 { font-size: 1.1875rem; }
.landing-root .rg-crmai .rg-crmai__icoon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  font-size: 1.25rem;
  color: var(--rg-crmai-kleur);
  background: color-mix(in srgb, var(--rg-crmai-kleur) 12%, var(--rg-surface));
  margin-bottom: 1.25rem;
}
/* Het vak met de tools: een zacht getint paneel dat de rest van de kaart
   vult. Zo staan de chips direct onder de tekst, en is de extra hoogte van
   een kortere kaart (de kaarten zijn even hoog) rustig vak in plaats van een
   gat tussen tekst en chips. */
.landing-root .rg-crmai .rg-crmai__tools {
  flex: 1 1 auto;
  margin-top: 1.25rem;
  padding: 0.875rem 0.875rem 1rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--rg-crmai-kleur) 5%, var(--rg-surface));
  border: 1px solid color-mix(in srgb, var(--rg-crmai-kleur) 14%, var(--rg-surface));
}
.landing-root .rg-crmai .rg-crmai__tools-kop {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-text-faint);
}
.landing-root .rg-crmai .rg-crmai__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.landing-root .rg-crmai .rg-crmai__chip {
  display: inline-block;
  font-family: var(--rg-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--rg-surface);
  border: 1px solid color-mix(in srgb, var(--rg-crmai-kleur) 22%, var(--rg-surface));
  color: var(--rg-ink);
  overflow-wrap: anywhere;
}
.landing-root .rg-crmai .rg-crmai__chip--chatgpt {
  background: var(--rg-sunken);
  border-color: var(--rg-line-strong);
}
.landing-root .rg-crmai .rg-crmai__chatgpt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.875rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rg-text-soft);
}
.landing-root .rg-crmai .rg-crmai__chatgpt .rg-ph__merk { width: 1.375rem; height: 1.375rem; border-radius: 0.4375rem; }
.landing-root .rg-crmai .rg-crmai__chatgpt .rg-ph__merk::before { width: 0.875rem; height: 0.875rem; }

/* De opsomming van alle tools in woorden: een rustig bijschrift. */
.landing-root .rg-crmai .rg-crmai__bijschrift {
  max-width: 60rem;
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rg-text-faint);
}

/* --- Onderaan: de standen en de callout ----------------------------------- */

.landing-root .rg-crmai .rg-crmai__onder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 960px) {
  .landing-root .rg-crmai .rg-crmai__onder { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.125rem; }
}
.landing-root .rg-crmai :is(.rg-crmai__zelf, .rg-crmai__noot) {
  padding: 1.75rem 1.5rem;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-radius-lg);
}
.landing-root .rg-crmai .rg-crmai__zelf .rg-h3 { margin-bottom: 1.5rem; }

/* De stappenbalk: elke stand heeft een stip in zijn kleur; een lijn loopt
   van stip naar stip (naast elkaar vanaf 640 px, op de telefoon onder
   elkaar met de lijn links). */
.landing-root .rg-crmai .rg-crmai__standen {
  --rg-crmai-stip: 12px;
  --rg-crmai-stapgat: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rg-crmai-stapgat);
}
.landing-root .rg-crmai .rg-crmai__stand:nth-child(1) { --rg-crmai-standkleur: var(--rg-text-ghost); }
.landing-root .rg-crmai .rg-crmai__stand:nth-child(2) { --rg-crmai-standkleur: var(--rg-primary); }
.landing-root .rg-crmai .rg-crmai__stand:nth-child(3) { --rg-crmai-standkleur: var(--rg-settled); }
.landing-root .rg-crmai .rg-crmai__stand {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding-left: 1.75rem;
}
.landing-root .rg-crmai .rg-crmai__stand-stip {
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: var(--rg-crmai-stip);
  height: var(--rg-crmai-stip);
  border-radius: 50%;
  background: var(--rg-crmai-standkleur);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rg-crmai-standkleur) 18%, var(--rg-surface));
}
/* De lijn naar de volgende stand (op de telefoon: omlaag). */
.landing-root .rg-crmai .rg-crmai__stand:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(0.2rem + var(--rg-crmai-stip) + 6px);
  bottom: calc(-1 * var(--rg-crmai-stapgat) + 2px);
  left: calc(var(--rg-crmai-stip) / 2 - 1px);
  width: 2px;
  border-radius: 1px;
  background: var(--rg-line-strong);
}
.landing-root .rg-crmai .rg-crmai__stand-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rg-text-faint);
}
.landing-root .rg-crmai .rg-crmai__stand-titel { color: var(--rg-ink); font-size: 0.9375rem; }
.landing-root .rg-crmai .rg-crmai__stand-tekst { color: var(--rg-text-soft); font-size: 0.875rem; line-height: 1.5; }

@media (min-width: 640px) {
  .landing-root .rg-crmai .rg-crmai__standen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-root .rg-crmai .rg-crmai__stand { padding-left: 0; padding-top: 1.75rem; }
  .landing-root .rg-crmai .rg-crmai__stand-stip { top: 0; }
  /* Naast elkaar: de lijn loopt rechts van de stip naar die van de volgende stand. */
  .landing-root .rg-crmai .rg-crmai__stand:not(:last-child)::after {
    top: calc(var(--rg-crmai-stip) / 2 - 1px);
    bottom: auto;
    left: calc(var(--rg-crmai-stip) + 8px);
    right: calc(-1 * var(--rg-crmai-stapgat) + 8px);
    width: auto;
    height: 2px;
  }
}

/* De feitenzin over de eigen sleutel, met een sleuteltje. */
.landing-root .rg-crmai .rg-crmai__sleutel {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: var(--rg-radius);
  background: var(--rg-primary-wash);
  color: var(--rg-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.landing-root .rg-crmai .rg-crmai__sleutel i { margin-top: 0.25rem; color: var(--rg-primary); }

/* De callout "bewust niet via de koppeling": schild links, lijstje rechts. */
.landing-root .rg-crmai .rg-crmai__noot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-content: start;
}
.landing-root .rg-crmai .rg-crmai__schild {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  background: var(--rg-settled-wash);
  color: var(--rg-settled);
}
.landing-root .rg-crmai .rg-crmai__noot .rg-h3 { margin: 0.5rem 0 1rem; }
.landing-root .rg-crmai .rg-crmai__niet {
  list-style: none;
  margin: 0 0 1.125rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.landing-root .rg-crmai .rg-crmai__niet li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  color: var(--rg-text);
  font-size: 0.9375rem;
}
.landing-root .rg-crmai .rg-crmai__niet i { color: var(--rg-text-ghost); font-size: 0.8125rem; }

/* =========================================================================
   Dashboard: "Je dashboard, zoals jij het wilt"
   ========================================================================= */

/* De gekantelde screenshot steekt een paar pixels buiten zijn kolom: de
   sectie knipt dat af, zodat de pagina nooit horizontaal scrolt. */
.landing-root .rg-crmdash { overflow-x: clip; }

.landing-root .rg-crmdash .rg-crmdash__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .landing-root .rg-crmdash .rg-crmdash__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.landing-root .rg-crmdash .rg-crmdash__tekst .rg-h2 { margin-bottom: 0.875rem; }
.landing-root .rg-crmdash .rg-crmdash__punten {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.125rem;
}
.landing-root .rg-crmdash .rg-crmdash__punten li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
}
.landing-root .rg-crmdash .rg-crmdash__ico {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  /* Wit op het verdiepte vlak van de sectie (primary-wash viel daar weg). */
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  box-shadow: var(--rg-shadow);
  color: var(--rg-primary);
}
.landing-root .rg-crmdash .rg-crmdash__punt-titel { display: block; margin-bottom: 0.2rem; color: var(--rg-ink); font-size: 1rem; }
.landing-root .rg-crmdash .rg-crmdash__punt-tekst { display: block; color: var(--rg-text-soft); font-size: 0.9375rem; line-height: 1.6; }

.landing-root .rg-crmdash .rg-crmdash__beeld { margin: 0; min-width: 0; }
/* Het toneel draagt de gloed erachter. Het perspectief voor de kanteling staat
   op de zoomlink (rg-crmdash__zoom, sinds 15 okt 2026 de directe ouder van het
   kader): perspective werkt alleen op de directe kinderen. Opmaak van de link
   zelf (cursor, focusring): product-hero.css, "Vergrootweergave". */
.landing-root .rg-crmdash .rg-crmdash__toneel {
  position: relative;
  isolation: isolate;
}
.landing-root .rg-crmdash .rg-crmdash__zoom {
  perspective: 1800px;
  border-radius: var(--rg-radius-lg);
}
.landing-root .rg-crmdash .rg-crmdash__toneel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% 2% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--rg-primary) 38%, transparent),
    color-mix(in srgb, var(--rg-settled) 12%, transparent) 60%,
    transparent);
  filter: blur(40px);
  pointer-events: none;
}
.landing-root .rg-crmdash .rg-crmdash__kader {
  border-radius: var(--rg-radius-lg);
  overflow: hidden;
  background: var(--rg-surface);
  border: 1px solid var(--rg-line);
  box-shadow: var(--rg-shadow-lg), 0 40px 80px -40px color-mix(in srgb, var(--rg-ink) 40%, transparent);
}
.landing-root .rg-crmdash .rg-crmdash__balk {
  display: flex;
  gap: 0.375rem;
  padding: 0.55rem 0.85rem;
  background: var(--rg-sunken);
  border-bottom: 1px solid var(--rg-line);
}
.landing-root .rg-crmdash .rg-crmdash__balk span {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: var(--rg-line-strong);
}
.landing-root .rg-crmdash .rg-crmdash__kader img { display: block; width: 100%; height: auto; }
.landing-root .rg-crmdash .rg-crmdash__bijschrift {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--rg-text-soft);
}

/* De kanteling: alleen naast de tekst (vanaf 960 px) en niet bij minder
   beweging. Bij hover (of focus in de figuur) trekt het kader recht. */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .landing-root .rg-crmdash .rg-crmdash__kader {
    transform: rotateY(-8deg) rotateX(2deg);
    transition: transform 700ms var(--rg-ease);
  }
  .landing-root .rg-crmdash .rg-crmdash__beeld:is(:hover, :focus-within) .rg-crmdash__kader { transform: none; }
}

/* --- Zonder JavaScript: alles meteen in beeld -------------------------------- */

@media (scripting: none) {
  .landing-root :is(.rg-crmai, .rg-crmdash) .anim-hidden { opacity: 1; transform: none; filter: none; }
  .landing-root :is(.rg-crmai, .rg-crmdash) .rg-kop .rg-w__in { transform: none; }
  .landing-root .rg-crmai .rg-tile__icon { opacity: 1; transform: none; }
  .landing-root .rg-crmai .rg-crmai__gesprek .rg-crmai__bel { opacity: 1; transform: none; }
}