/* ============================================================
   CONSTELL HOMEPAGE — pagina-eigen composities
   Bouwt op constell-design-system (tokens/base/components).
   Herbruikbare patronen (topbalk, marquee, waaier, venue-showcase,
   uitkomsten-kaart, notities, tabs, carrousel, tellende ringen,
   footer, reveal-motie) staan in het designsysteem — niet hier.
   ============================================================ */

/* ---- Hero (SevenRooms-patroon) ----
   Desktop: tekst links op containerlijn, foto vult de volledige rechterhelft
   van de band, rand-tot-rand, zonder radius. Mobiel: foto als volledige
   achtergrond met de tekst onderin over een inkt-scrim. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(52rem, calc(100svh - 5.375rem)); /* 5.375rem = hoogte van de topbalk */
}
.hero-inhoud {
  display: grid;
  align-content: center;
  padding-block: var(--sp-8);
  padding-left: max(1.5rem, calc((100vw - var(--container)) / 2));
  padding-right: clamp(1.5rem, 4vw, 4rem);
}
.hero-media { position: relative; overflow: hidden; }
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero h1 { text-wrap: balance; }
/* De hero-kop staat op twee vaste regels: "Jouw eventlocatie" / "verkoopt zichzelf".
   Block-spans in plaats van een <br>, want de HTML-minifier verwijdert de spatie
   tussen een inline element en de tekst erna — dat maakte er ooit één woord van. */
.hero-regel { display: block; }
.hero .lead { max-width: 34rem; margin-bottom: var(--sp-5); }
/* De drie sterretjes uit het origineel: net rechtsboven het einde van "eventlocatie".
   Verankerd aan het woord zelf, dus ze verhuizen netjes mee bij elke regelval. */
.ster-anker { position: relative; }
.hero-sterren {
  position: absolute;
  left: 100%;
  top: 0;
  width: clamp(1.75rem, 3vw, 2.625rem);
  height: auto;
  transform: translate(0.35rem, -45%);
}
@media (max-width: 800px) {
  .hero {
    display: flex;
    align-items: flex-end;
    position: relative;
    min-height: 88svh;
  }
  .hero-media { position: absolute; inset: 0; }
  /* inkt-scrim zodat de tekst onderin leesbaar is, zoals het referentiepatroon */
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 23, 29, 0) 32%, rgba(23, 23, 29, 0.82) 82%);
  }
  .hero-inhoud {
    position: relative;
    z-index: 1;
    width: 100%;
    color: var(--c-on-dark);
    --focus-ring: var(--c-on-dark);
    padding: var(--sp-6) 1.5rem var(--sp-7);
  }
  .hero-inhoud .lead { color: inherit; }
  .hero-inhoud.glow::before { content: none; }
  .hero-inhoud .checklist--green li::before { color: var(--c-groen-licht); }
  .hero-inhoud .btn {
    color: var(--c-ink);
    background: var(--c-on-dark);
    border-color: var(--c-on-dark);
  }
  .hero-inhoud .btn:hover { background: #fff; }
  .hero-sterren { filter: invert(1); }
}

/* ---- Donkere verhaal-band ----
   Ritme naar het origineel: ruime gap ster→kicker, krappe kicker→kop
   (het label hoort bij de kop), en weer ruime gap kop→pill. */
.story-head { text-align: center; max-width: 46rem; margin-inline: auto; }
/* Bewust één trede lager dan een gewone kop (Jorn 22-07): deze band leeft van
   de conclusie-pill eronder, niet van de kop zelf. */
.story-head h2 { font-size: var(--fs-h3); }
.story-mark { height: 56px; width: auto; display: block; margin: 0 auto 2.75rem; filter: invert(1); }
.story-head h2 { margin-bottom: 2.5rem; }
.story-link {
  display: block;
  width: fit-content;
  margin: 0 auto var(--sp-8);
  color: rgba(244, 244, 245, 0.7);
  font-size: var(--fs-small);
  text-decoration-color: rgba(244, 244, 245, 0.35);
  text-underline-offset: 3px;
}
.story-link:hover { color: var(--c-on-dark); }

/* ---- De Handdruk: scroll-film ----
   JS armt de sectie (.hd-armed); zonder JS of met reduced motion
   toont .hd-fallback dezelfde inhoud statisch met de film-poster. */
.handdruk {
  background: var(--c-dark);
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
}
.hd-fallback { padding-block: var(--sp-7) var(--section-y); }
.handdruk.hd-armed .hd-fallback { display: none; }
.hd-scroll { display: none; }
.handdruk.hd-armed .hd-scroll { display: block; height: 440vh; position: relative; }
.hd-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--c-dark);
}
#hdFilm { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Intro-dim: film staat gedimd tot de kop zijn focus-moment heeft gehad (JS stuurt opacity) */
.hd-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: rgba(23, 23, 29, 0.62);
}
/* Donkere overlay: eerder en donkerder bovenin voor de kop, zacht onderin voor de stack */
.hd-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(23, 23, 29, 0.96) 0%, rgba(23, 23, 29, 0.8) 20%, rgba(23, 23, 29, 0) 50%),
    linear-gradient(0deg, rgba(23, 23, 29, 0.5) 0%, rgba(23, 23, 29, 0) 20%);
}
.hd-kop {
  position: absolute;
  top: clamp(5.5rem, 12vh, 8rem);   /* onder de sticky navbalk blijven */
  left: 50%;
  width: min(94vw, 52rem);
  text-align: center;
  z-index: 3;
  will-change: transform;
}
.hd-kop h3 {
  font-size: clamp(2.125rem, 4.4vw, 3.625rem);   /* veel groter: de kop ís het intro-moment */
  line-height: 1.1;
  margin-inline: auto;
  margin-bottom: var(--sp-4);
}
.hd-kop p { will-change: opacity; }
.hd-kop p {
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.55;
  opacity: 0.96;
  max-width: 46ch;
  margin-inline: auto;
}
/* Verzamel-stack: uitkomsten verschijnen op hun beat en blijven staan */
.hd-stack {
  position: absolute;
  left: clamp(1.5rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  z-index: 3;
}
.hd-uitkomst {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: 0.9rem 1.5rem;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-28px) scale(1.07);
}
.hd-uitkomst::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-orange);
  flex: 0 0 auto;
}
/* Header boven de verzamel-stack: het Avondzon-chipmoment uit de uitkomsten-kaart */
.hd-stack-kop {
  display: inline-flex;
  align-items: center;
  background: var(--c-orange);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.125rem;
  font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  margin-bottom: var(--sp-1);
  opacity: 0;
  transform: translateX(-28px);
}
.hd-ap {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.75);
  padding-left: 0.25rem;
  opacity: 0;
}
/* De échte Constell-ster, stijgt uit de handdruk omhoog */
.hd-ster {
  position: absolute;
  z-index: 3;
  width: clamp(30px, 3.4vw, 48px);
  opacity: 0;
  pointer-events: none;
  filter: invert(1) sepia(0.4) saturate(2.4) hue-rotate(-15deg)
          drop-shadow(0 0 14px rgba(255, 190, 110, 0.95))
          drop-shadow(0 0 42px rgba(255, 160, 80, 0.55));
}
@media (max-width: 760px) {
  .handdruk.hd-armed .hd-scroll { height: 390vh; }
  .hd-stack { left: 1rem; right: 1rem; top: auto; bottom: 8vh; transform: none; }
  .hd-uitkomst { font-size: 0.9375rem; padding: 0.75rem 1.125rem; }
}

/* ---- Vergelijking ---- */
.compare-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) 1fr 1fr;
  gap: var(--sp-5);
  align-items: end;
}
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr 1fr; } .compare-illu { display: none; } }
@media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; align-items: stretch; } }
/* De illustratie is groter dan haar kolom: ze mag links de container uit lopen
   en schuift rechts nét áchter de "Traditionele EMS"-kaart (die dekt zelf af). */
.compare-illu { margin: 0; z-index: 0; }
.compare-illu img {
  width: clamp(19rem, 30vw, 29rem);
  max-width: none;
  height: auto;
  /* mag de container uit, maar nooit voorbij de vensterrand */
  margin-left: calc(-1 * clamp(0px, (100vw - var(--container)) / 2, 4rem));
  margin-right: calc(-1 * clamp(3rem, 8vw, 7rem));
  margin-bottom: calc(-1 * var(--sp-4));
}
.compare-grid .card { position: relative; z-index: 1; }

/* ---- Scroll-gedreven testimonial (Herman Hell) ----
   JS zet .qs-armed; zonder JS of met reduced-motion is de quote
   gewoon een rustige band met volledig leesbare tekst. */
.qs-armed .quote-scroll { min-height: 240vh; padding-block: 0; }
.qs-armed .quote-scroll .quote-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-block: var(--sp-8);
}
.quote-scroll .qchar { color: rgba(23, 23, 29, 0.15); transition: color 160ms linear; }
.quote-scroll .qchar.on { color: var(--c-ink); }
/* Typografie naar het origineel: compacter (past in 3 regels), rustige
   regelval en een ruime gap tussen de quote en de naam. */
.quote-scroll blockquote {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.4;
  margin-bottom: 4rem;
}
.quote-scroll .who { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.35rem; }
.quote-scroll .role { font-size: 1.0625rem; }

/* ---- Agent-splits: alleen wat pagina-eigen is; het blok zelf staat in components.css ---- */

/* De sales agent is de opening van het hoofdstuk: groter beeld, dat links
   nét buiten de kolom mag lopen (nooit voorbij de vensterrand). */
@media (min-width: 801px) {
  #sales .agent-media { justify-items: start; }
  #sales .agent-media img {
    max-width: none;
    width: min(42rem, 118%);
    margin-left: calc(-1 * clamp(0px, (100vw - var(--container)) / 2, 3rem));
  }
}

/* ---- Praktijk-band (Zonder/Met Constell) ---- */
.note-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 56rem;
  margin: var(--sp-7) auto var(--sp-8);
  align-items: start;
}
@media (max-width: 700px) { .note-pair { grid-template-columns: 1fr; max-width: 26rem; } }
.note-wrap .note-label {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  font-weight: 500;
  margin-bottom: var(--sp-3);
}
.note-wrap .note-label svg { width: 30px; height: 26px; flex: 0 0 auto; }
.note-wrap:last-child .note-label { justify-content: flex-end; }
/* Slogan onder de demo: sluit het hoofdstuk af */
.demo-slogan {
  margin: var(--sp-8) auto 0;
  max-width: 46rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}

/* Statische plaat binnen de demo: valt weg zodra de demo leeft */
.agentdemo .demo-fallback img { width: 100%; height: auto; display: block; }
/* ---- Sales widget ----
   De visual is één beeld (scherm + zwevende knoppen) met een eigen zachte
   schaduw: geen kader, geen radius. Hij krijgt ruim baan en mag rechts de
   containerlijn uit lopen, zoals in het ontwerp. */
#widget .split {
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
#widget .split > div:first-child { position: relative; z-index: 1; }
.widget-media { position: relative; z-index: 0; }
.widget-media > img {
  /* Op ware grootte (1433x722). De rechterrand ligt op de vensterrand; het
     beeld loopt van daar naar links onder de tekstkolom door, zodat de drie
     "Plan je event"-knoppen daar uitkomen. De bovenmarge houdt de knop in de
     tekstkolom vrij. De linkermarge = kolombreedte + uitloop - beeldbreedte,
     zodat de rechterrand op elke schermbreedte klopt. */
  --kolom: calc(min(var(--container), 100vw - 3rem) - 36rem);
  --beeld: min(1433px, calc(100vw + 4rem));
  --uit-rechts: clamp(0px, (100vw - var(--container)) / 2, 6rem);
  width: var(--beeld);
  max-width: none;
  height: auto;
  margin-left: calc(var(--kolom) + var(--uit-rechts) - var(--beeld));
  margin-right: 0;
  margin-top: clamp(3rem, 15vw, 14rem);
}
/* De kaarten horen bij de widget: strak eronder, de zachte schaduw van het
   beeld vult de tussenruimte al. */
#widget .feature-grid { margin-top: calc(-1 * var(--sp-5)); gap: var(--sp-5); }
#widget .feature { padding: var(--sp-6); gap: var(--sp-5); }
@media (max-width: 800px) {
  #widget .split { grid-template-columns: 1fr; }
  .widget-media > img { width: 100%; margin-left: 0; margin-top: var(--sp-6); }
}

/* ---- Branded offerte ---- */
/* De kop hoort op één regel te staan; de tekstkolom mag daarvoor breder zijn
   dan de standaard container-narrow. */
#offerte .section-head { max-width: 64rem; }
#offerte .section-head h2 { text-wrap: nowrap; }
/* De kop mag breed, de leestekst niet: die houdt een leesbare regellengte. */
#offerte .section-head p { max-width: 46rem; margin-inline: auto; }
@media (max-width: 900px) { #offerte .section-head h2 { text-wrap: balance; } }
/* De tekst staat dicht op de foto: die twee vormen samen het intro. */
.collage { margin-block: var(--sp-6) 0; overflow: hidden; }
.collage img { width: 100%; height: clamp(20rem, 42vw, 34rem); object-fit: cover; }
.offer-panel {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 64rem;
  margin: calc(-1 * clamp(6rem, 14vw, 11rem)) auto 0;
  position: relative;
}
.offer-panel .media-frame { margin-bottom: var(--sp-5); }
.offer-panel .media-frame img { width: 100%; height: auto; }
.offer-placeholder {
  aspect-ratio: 961 / 632;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--c-surface-soft);
  color: var(--c-ink-soft);
  padding: var(--sp-5);
}
.offer-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
}
@media (max-width: 560px) { .offer-features { grid-template-columns: 1fr; } }
.offer-features .feature { box-shadow: none; padding: 0; background: none; border-radius: 0; }
.offer-features .feature svg { border: 0; padding: 0; }
.offer-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/* ---- Prijzen ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  max-width: 56rem;
  margin-inline: auto;
  align-items: stretch;
}
@media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card .list-check { flex: 1; }
.price-card .price-head > div { flex: 1 1 12rem; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .quote-scroll .qchar { color: var(--c-ink); }
}

/* ---- Interactieve agent-demo ("Zo werkt het in de praktijk") ----
   Overgenomen uit het Claude-design en omgezet naar onze tokens. Het is een
   productdemo: binnenin geldt een eigen micro-schaal (10-13px), net als bij
   het sales-widget-specimen. Alles staat onder .agentdemo, zodat generieke
   namen als .lead, .tabs en .nav niet botsen met de site zelf. */
.agentdemo {
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-media);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.agentdemo .demo-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.8rem 1.125rem;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-soft);
}
.agentdemo .demo-bar .star {
  width: 12px; height: 18px; flex: 0 0 auto;
  /* logomark als masker, zodat de ster in Avondzon staat */
  background: var(--c-orange);
  -webkit-mask: url(../../constell-design-system/assets/logo/constell-logomark-black.svg) center / contain no-repeat;
  mask: url(../../constell-design-system/assets/logo/constell-logomark-black.svg) center / contain no-repeat;
}
.agentdemo .demo-bar .ttl { font-size: 0.78rem; font-weight: 500; }
.agentdemo .demo-bar .live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.agentdemo .demo-bar .live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-orange);
  animation: demoPulse 1.8s infinite;
}
@keyframes demoPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }

/* stappenbalk */
.agentdemo .demo-rail {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 1.125rem 1.625rem;
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
}
.agentdemo .rnode {
  display: flex; align-items: center; gap: 0.625rem;
  flex-shrink: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.agentdemo .rnode .rc {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  display: grid; place-items: center;
  color: var(--c-ink-40);
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.agentdemo .rnode .rc svg { width: 18px; height: 18px; }
.agentdemo .rnode .rl { font-size: 0.78rem; font-weight: 500; color: var(--c-ink-40); white-space: nowrap; }
.agentdemo .rnode .rl .sub { display: block; font-size: 0.62rem; letter-spacing: 0.02em; }
.agentdemo .rnode:hover .rc { border-color: var(--c-line-strong); }
.agentdemo .rnode.done .rc { background: var(--c-lavender); border-color: transparent; color: var(--c-ink); }
.agentdemo .rnode.done .rl { color: var(--c-ink-soft); }
.agentdemo .rnode.active .rc { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.agentdemo .rnode.active .rl { color: var(--c-ink); font-weight: 500; }
.agentdemo .rconn {
  flex: 1; min-width: 16px; height: 2px; border-radius: 2px;
  background: var(--c-line); position: relative; overflow: hidden;
}
.agentdemo .rconn::after {
  content: ""; position: absolute; inset: 0; width: 0;
  background: var(--c-lavender); transition: width 0.4s var(--ease);
}
.agentdemo .rconn.done::after { width: 100%; }

/* bijschrift onder de balk */
.agentdemo .demo-cap {
  display: flex; align-items: center; gap: 0.625rem;
  min-height: 46px; padding: 0.8rem 1.625rem;
  background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-line);
  font-size: 0.8125rem; font-weight: 300; color: var(--c-ink-soft);
}
.agentdemo .demo-cap .ix {
  flex-shrink: 0; padding: 0.2rem 0.5rem;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: 0.66rem; font-weight: 500; color: var(--c-ink-40);
}
.agentdemo .demo-cap b { color: var(--c-ink); font-weight: 500; }

/* speelvlak: gesprek links, context rechts */
.agentdemo .demo-stage { display: grid; grid-template-columns: 1.22fr 0.9fr; height: 24rem; }
.agentdemo .col-chat {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 1.125rem 1.375rem;
  background: linear-gradient(180deg, var(--c-surface-soft) 0%, var(--c-surface) 100%);
  border-right: 1px solid var(--c-line);
}
.agentdemo .col-ctx {
  display: flex; flex-direction: column; gap: var(--sp-3); overflow: auto;
  padding: 1.125rem 1.25rem; background: var(--c-surface-soft);
}
.agentdemo .demo-meta {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.7rem; flex-shrink: 0;
  font-size: 0.69rem; color: var(--c-ink-soft);
}
.agentdemo .demo-meta .av {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; color: var(--c-ink);
}
.agentdemo .demo-meta b { display: block; font-size: 0.78rem; font-weight: 500; color: var(--c-ink); }
.agentdemo .demo-meta .ch { margin-left: auto; font-size: 0.62rem; color: var(--c-ink-40); }

/* berichten */
.agentdemo .fade { animation: demoFade 0.4s var(--ease) both; }
@keyframes demoFade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.agentdemo .msg {
  max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden; flex-shrink: 0;
  transform: translateY(6px);
  transition: max-height 0.42s var(--ease), opacity 0.34s, margin-bottom 0.42s, transform 0.34s;
}
.agentdemo .msg.show { max-height: 35rem; opacity: 1; margin-bottom: 0.7rem; transform: none; }
.agentdemo .msg.instant { transition: none; }
.agentdemo .bub {
  max-width: 90%; padding: 0.7rem 0.875rem; border-radius: var(--r-tile);
  font-size: 0.78rem; line-height: 1.5;
}
.agentdemo .bub.in {
  align-self: flex-start; background: var(--c-surface);
  border: 1px solid var(--c-line); border-top-left-radius: 3px; color: var(--c-ink);
}
.agentdemo .bub.note { align-self: flex-start; background: var(--c-surface-soft); color: var(--c-ink-soft); font-style: italic; }
.agentdemo .bub.out { align-self: flex-end; background: var(--c-ink); color: var(--c-on-dark); border-top-right-radius: 3px; }
.agentdemo .bub .tm { display: block; margin-top: 0.3rem; font-size: 0.62rem; color: var(--c-ink-40); }
.agentdemo .bub.out .tm { color: rgba(244, 244, 245, 0.55); text-align: right; }
.agentdemo .bub.out .stamp {
  display: block; margin-bottom: 0.25rem;
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-orange);
}
/* het concept van de agent */
.agentdemo .bub.agent {
  align-self: stretch; max-width: 100%; padding: 0; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-lavender);
  box-shadow: 0 0 0 3px rgba(192, 199, 250, 0.28);
}
.agentdemo .bub.agent .ah {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.875rem;
  background: rgba(192, 199, 250, 0.18); border-bottom: 1px solid var(--c-line);
}
.agentdemo .bub.agent .ah .tg {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ink-soft);
}
.agentdemo .bub.agent .ah .tg::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-orange); }
.agentdemo .bub.agent .ah .cf { margin-left: auto; font-size: 0.62rem; color: var(--c-ink-soft); }
.agentdemo .bub.agent .ah .cf b { font-weight: 500; color: var(--c-ink); }
.agentdemo .bub.agent .body { padding: 0.75rem 0.875rem; font-size: 0.78rem; font-weight: 300; line-height: 1.55; color: var(--c-ink); min-height: 20px; }
.agentdemo .bub.agent .body mark { background: rgba(192, 199, 250, 0.45); color: inherit; padding: 0 3px; border-radius: 2px; }
.agentdemo .caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
  background: var(--c-ink); vertical-align: text-bottom;
  animation: demoBlink 1s step-end infinite;
}
@keyframes demoBlink { 50% { opacity: 0 } }

/* contextkolom */
.agentdemo .ctx-h {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-ink-soft);
}
.agentdemo .ctx-h .sp {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.8px solid var(--c-lavender); border-top-color: transparent;
  animation: demoSpin 0.7s linear infinite;
}
@keyframes demoSpin { to { transform: rotate(360deg) } }
.agentdemo .tsteps { display: flex; flex-direction: column; gap: 0.45rem; }
.agentdemo .tstep {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.75rem; color: var(--c-ink-soft);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.35s, transform 0.35s;
}
.agentdemo .tstep.show { opacity: 1; transform: none; }
.agentdemo .tstep .ic {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(47, 122, 77, 0.14); color: var(--c-groen);
}
.agentdemo .tstep .ic svg { width: 11px; height: 11px; }

/* leadscore */
.agentdemo .lead {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-tile);
  font-size: inherit; color: inherit;
}
.agentdemo .lead .rg { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.agentdemo .lead .rg .n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--c-ink);
}
.agentdemo .lead .li b { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--c-ink); }
.agentdemo .lead .li span { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 300; line-height: 1.4; color: var(--c-ink-soft); }
.agentdemo .sig { display: flex; flex-direction: column; gap: 0.375rem; }
.agentdemo .sig .r { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--c-ink-soft); }
.agentdemo .sig .r .d { width: 5px; height: 5px; border-radius: 50%; background: var(--c-orange); flex-shrink: 0; }
.agentdemo .sig .r b { font-weight: 500; color: var(--c-ink); }

/* offertekaart */
.agentdemo .qcard { border: 1px solid var(--c-line); border-radius: var(--r-tile); overflow: hidden; background: var(--c-surface); }
.agentdemo .qcard .qh {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0.8rem; background: var(--c-ink); color: var(--c-on-dark);
}
.agentdemo .qcard .qh .st {
  width: 9px; height: 14px; flex: 0 0 auto;
  background: var(--c-orange);
  -webkit-mask: url(../../constell-design-system/assets/logo/constell-logomark-black.svg) center / contain no-repeat;
  mask: url(../../constell-design-system/assets/logo/constell-logomark-black.svg) center / contain no-repeat;
}
.agentdemo .qcard .qh b { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; }
.agentdemo .qcard .qh .pr { margin-left: auto; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; }
.agentdemo .qcard .qrow {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--c-line);
  font-size: 0.72rem; color: var(--c-ink-soft);
}
.agentdemo .qcard .qrow b { font-weight: 500; color: var(--c-ink); }
.agentdemo .qcard .qcta { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.8rem; font-size: 0.69rem; font-weight: 500; color: var(--c-ink-soft); }
.agentdemo .qcard .qcta .lk {
  margin-left: auto; padding: 0.375rem 0.75rem; border-radius: var(--r-btn);
  background: var(--c-ink); color: var(--c-on-dark); font-size: 0.66rem;
}

/* opvolgschema */
.agentdemo .sched { display: flex; flex-direction: column; }
.agentdemo .srow {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 0.625rem; align-items: flex-start;
  padding: 0.55rem 0; border-bottom: 1px dashed var(--c-line);
}
.agentdemo .srow:last-child { border-bottom: none; }
.agentdemo .srow .d { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--c-groen); }
.agentdemo .srow.future .d { background: var(--c-orange); }
.agentdemo .srow .x { font-size: 0.75rem; line-height: 1.35; color: var(--c-ink); }
.agentdemo .srow .x b { font-weight: 500; }
.agentdemo .srow .x .sm { display: block; margin-top: 1px; font-size: 0.66rem; font-weight: 300; color: var(--c-ink-soft); }
.agentdemo .srow .tm { font-size: 0.62rem; font-weight: 500; color: var(--c-ink-40); white-space: nowrap; }

/* boekingskaart */
.agentdemo .bookc {
  background: var(--c-surface); border: 1px solid var(--c-lavender);
  box-shadow: 0 0 0 3px rgba(192, 199, 250, 0.28);
  border-radius: var(--r-tile); overflow: hidden;
}
.agentdemo .bookc .bh { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--c-line); }
.agentdemo .bookc .bh .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-groen); color: #fff; flex-shrink: 0; }
.agentdemo .bookc .bh .ic svg { width: 16px; height: 16px; }
.agentdemo .bookc .bh b { display: block; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.1; }
.agentdemo .bookc .bh span { font-size: 0.69rem; font-weight: 500; color: var(--c-ink-soft); }
.agentdemo .bookc .brow {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--c-line);
  font-size: 0.72rem; color: var(--c-ink-soft);
}
.agentdemo .bookc .brow:last-child { border-bottom: none; }
.agentdemo .bookc .brow b { font-weight: 500; color: var(--c-ink); }

/* bediening onderin */
.agentdemo .demo-foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 0.75rem 1.125rem; border-top: 1px solid var(--c-line); background: var(--c-surface-soft);
}
.agentdemo .demo-foot .nav { display: flex; gap: 0.375rem; }
.agentdemo .demo-foot button {
  height: 34px; border-radius: var(--r-btn);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-size: 0.75rem; font-weight: 500; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.agentdemo .demo-foot .nav button { width: 34px; }
.agentdemo .demo-foot button:hover { border-color: var(--c-line-strong); }
.agentdemo .demo-foot button:disabled { opacity: 0.4; cursor: default; }
.agentdemo .demo-foot button svg { width: 14px; height: 14px; }
.agentdemo .demo-foot .play { padding-inline: 0.875rem; }
.agentdemo .demo-foot .hint { font-size: 0.69rem; font-weight: 300; color: var(--c-ink-40); }
.agentdemo .demo-foot .tabs { margin-left: auto; display: flex; gap: 0.375rem; }
.agentdemo .demo-foot .tabs .dt {
  padding: 0.45rem 0.75rem; border-radius: var(--r-btn);
  border: 1px solid transparent; background: none; color: var(--c-ink-soft);
}
.agentdemo .demo-foot .tabs .dt.on { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }

/* Zonder JS blijft de statische plaat staan; met JS neemt de demo het over. */
.agentdemo .demo-rail,
.agentdemo .demo-cap,
.agentdemo .demo-stage,
.agentdemo .demo-foot { display: none; }
.agentdemo.is-live .demo-rail,
.agentdemo.is-live .demo-cap { display: flex; }
.agentdemo.is-live .demo-stage { display: grid; }
.agentdemo.is-live .demo-foot { display: flex; }
.agentdemo.is-live .demo-fallback { display: none; }
/* De statische plaat heeft de balk al ingebakken: toon de echte balk pas als
   de demo het overneemt. */
.agentdemo:not(.is-live) .demo-bar { display: none; }

@media (max-width: 900px) {
  .agentdemo .demo-stage { grid-template-columns: 1fr; height: auto; }
  .agentdemo .col-chat { height: 20rem; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .agentdemo .col-ctx { max-height: 18rem; }
  .agentdemo .demo-foot .hint { display: none; }
  .agentdemo .demo-foot .tabs { margin-left: 0; }
}

/* ---- De marge-knop ----
   Drie lagen boven elkaar: de schijf (SVG) vult het gat waar de hand zat, de
   illustratie draagt de streepjes en labels, en de hand is een eigen laag die
   om het midden van de knop draait. De boog en het percentage komen mee. */
.marge { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 595 / 540; }
.marge > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.marge img { object-fit: contain; }
.marge-boog path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1100ms var(--ease) 120ms;
}
.marge-hand {
  transform-origin: 45.2% 48.7%;   /* het midden van de knop */
  transform: rotate(-26deg) translate(-3%, 2%);
  transition: transform 1150ms var(--ease);
}
.marge-waarde {
  position: absolute;
  inset: 24% auto auto 67%;
  width: auto;
  height: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--c-orange);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease) 900ms, transform 420ms var(--ease) 900ms;
}
.marge.draait .marge-boog path, .marge.af .marge-boog path { stroke-dashoffset: 0; }
.marge.draait .marge-hand, .marge.af .marge-hand { transform: none; }
.marge.draait .marge-waarde, .marge.af .marge-waarde { opacity: 1; transform: none; }
.marge.af .marge-boog path, .marge.af .marge-hand, .marge.af .marge-waarde { transition: none; }
/* Scroll-gekoppeld: JS zet de standen per frame, dus geen eigen overgang. */
.marge--scrub .marge-boog path,
.marge--scrub .marge-hand,
.marge--scrub .marge-waarde { transition: none; }

/* De drawer-plexus en de hover op de grote drawer-links zijn VERHUISD naar het
   gedeelde design-system (constell-design-system/css/components.css → chrome.css),
   zodat de burger-drawer op ELKE pagina identiek is. Niet hier terugzetten. */

/* ---- Zonder/Met-Constell-kaarten: heel rustige, doorlopende wieg ----
   Beweegt rond de bestaande statische kanteling (die MOET in de keyframes staan,
   anders valt de rotate weg). Twee looptijden = niet-synchroon, organischer.
   Alleen met bewegingsvoorkeur; anders blijft de statische stand staan. */
@media (prefers-reduced-motion: no-preference) {
  #praktijk .note[data-tilt] { will-change: transform; }
  #praktijk .note[data-tilt="left"] {
    animation: note-wieg-l 8s ease-in-out infinite;
  }
  #praktijk .note[data-tilt="right"] {
    animation: note-wieg-r 9.6s ease-in-out infinite;
  }
  @keyframes note-wieg-l {
    0%   { transform: rotate(-3.3deg) translateY(3px); }
    50%  { transform: rotate(-1.7deg) translateY(-5px); }
    100% { transform: rotate(-3.3deg) translateY(3px); }
  }
  @keyframes note-wieg-r {
    0%   { transform: rotate(2.5deg) translateY(-4px); }
    50%  { transform: rotate(1.0deg) translateY(4px); }
    100% { transform: rotate(2.5deg) translateY(-4px); }
  }
}

/* ---- Marge-knop: doorlopende, scroll-onafhankelijke wieg-loop ----
   De hand draait rustig heen en weer tussen 5% en 20%; de boog tekent mee en de
   waarde verschijnt rond de top. Los van de scroll. JS zet .marge--loop alleen bij
   bewegingsvoorkeur; anders de eindstand (.af), zonder JS de basisstand. */
.marge--loop .marge-hand,
.marge--loop .marge-boog path,
.marge--loop .marge-waarde { transition: none; }
.marge--loop .marge-hand   { animation: marge-hand-loop 7s ease-in-out infinite; }
.marge--loop .marge-boog path { animation: marge-boog-loop 7s ease-in-out infinite; }
.marge--loop .marge-waarde { animation: marge-waarde-loop 7s ease-in-out infinite; }
@keyframes marge-hand-loop {
  0%, 100% { transform: rotate(-26deg) translate(-3%, 2%); }
  50%      { transform: rotate(0deg) translate(0, 0); }
}
@keyframes marge-boog-loop {
  0%, 100% { stroke-dashoffset: 300; }
  50%      { stroke-dashoffset: 0; }
}
@keyframes marge-waarde-loop {
  0%, 42%  { opacity: 0; transform: translateY(6px); }
  50%, 58% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(6px); }
}