/* Testpagina "Start je dag Hyperr" · design-export uit Claude Design.
   Alles is gescoped onder .dag zodat de stijlen niet lekken naar de rest van de
   site. Het ontwerp gebruikt Manrope; die laadt index.html al site-breed, dus
   hier geen eigen @font-face. */

@keyframes dag-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(57,216,153,.45); } 50% { box-shadow: 0 0 0 6px rgba(57,216,153,0); } }
@keyframes dag-tp { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes dag-sheen { 0% { transform: translateX(-120%); } 40%,100% { transform: translateX(120%); } }
@keyframes dag-row-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dag-pop-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes dag-draw { to { stroke-dashoffset: 0; } }
@keyframes dag-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes dag-blur-in { from { opacity: 0; filter: blur(10px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes dag-msg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.dag {
  /* Homepage-stijl (6 okt 2026, STIJL-HOMEPAGE.md): paginakleur #F9F8F5, tekst #120C08, lopende tekst #666,
     paars alleen als accent. Waarden uit bron/ai-suite3/basis-tokens.css. */
  --purple: #4B28ED;
  --purple-dark: #3100D1;
  --ink: #120C08;
  --body: #666666;
  --muted: #666666;
  --soft: #766F6F;
  --faint: #999999;
  --line: #EDE8DE;
  --line-2: #D8D1C0;
  --bg: #F9F8F5;
  --tint: #EFEBFF;
  --card-r: 64px;                 /* kaarthoek: 64 desktop, 56 tablet, 24 mobiel (zie onderaan) */
  --green: #1E9E64;
  --green-soft: rgba(57,216,153,.14);
  --mint: #39D899;
  --pink: #E0387A;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* :where() geeft nul specificiteit, zodat de knoppen hieronder hun eigen kleur
   houden en niet door deze reset worden overruled. */
.dag :where(a) { color: inherit; text-decoration: none; }
.dag :where(a:hover) { color: var(--purple); }
/* De site kleurt en spatieert h1/h2 globaal (deels met !important); binnen de
   dag-pagina gelden de waarden uit het ontwerp. */
.dag h1, .dag h2 { color: inherit; }
/* Gewicht, spatiering en regelhoogte van de koppen komen uit de klassen ls-heading-* (homepage.css). */

/* ── Teaser naar het volgende moment ─────────────────────────────────── */
.dag-teaser {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: min(92vw, 760px); padding: 10px 20px; color: var(--ink); text-align: center;
  /* Glas zoals het menu van de homepage (--ls-glass-nav, blur 13px, hoek 16px). */
  background-color: var(--ls-glass-nav); border: 1px solid rgba(255,255,255,.5); border-radius: var(--ls-r-wrapper);
  -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  transition: opacity .35s ease, filter .35s ease; filter: blur(.3px);
}
.dag-teaser:hover { filter: blur(0); color: var(--ink); }
.dag-teaser__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--body); }
.dag-teaser__time { color: var(--purple); font-variant-numeric: tabular-nums; }
.dag-teaser__title { font-size: clamp(16px,1.6vw,19px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); opacity: .7; text-wrap: balance; }
.dag-teaser__arrow { margin-top: 2px; color: var(--purple); display: flex; animation: dag-nudge 1.8s ease-in-out infinite; }

/* ── Klantlogo's: statisch blok onder de hero ───────────────────────────
   Schermvullend paars vlak, links uitleg over de Suite, rechts een luchtig
   raster witte logo's zonder kaders. De inhoud staat gecentreerd in het stuk
   onder de vaste sitekop (72px). */
.dag-clients {
  display: grid; align-items: center;
  min-height: 100vh; min-height: 100svh; margin-top: 8px;
  padding: calc(72px + 48px) 24px 64px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%); color: #fff;
}
.dag-clients__inner {
  width: 100%; max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(48px,7vw,112px); align-items: start;
}
.dag-clients h2 { margin: 0; color: #fff; text-wrap: balance; }
.dag-clients__lead { margin: 26px 0 0; max-width: 540px; font-size: clamp(18px,1.45vw,20px); line-height: 1.55; color: rgba(255,255,255,.94); }
.dag-clients__note { margin: 20px 0 0; max-width: 540px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); }
.dag-clients__btn { margin-top: 44px; }   /* de knop zelf is nu ls-btn (homepage.css) */
.dag-clients__label { margin: 0 0 28px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; color: rgba(255,255,255,.7); }
.dag-clients__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 24px; }
.dag-clients__cell { display: grid; place-items: center; height: clamp(104px,13vh,128px); padding: 0 12px; }
/* Elk logo als wit silhouet, ongeacht de oorspronkelijke kleuren. */
.dag-clients__cell img { width: auto; max-width: 100%; max-height: 56px; object-fit: contain; filter: brightness(0) invert(1); }

/* ── Hero ────────────────────────────────────────────────────────────── */
/* Hero op volle schermhoogte; de galerij loopt door onder de vouw (6 okt) */
.dag-hero { position: relative; padding: clamp(120px, 15vh, 168px) 0 0; min-height: 100vh; min-height: 100svh; }
.dag-hero__inner { position: relative; max-width: 1160px; margin: 0 auto; padding: 0 24px; text-align: center; }
.dag-hero h1 {
  margin: 0 auto; max-width: 1180px; color: var(--ink);
  text-wrap: balance; animation: dag-blur-in .8s .15s cubic-bezier(.2,.8,.2,1) both;
}
/* "Hyperr" blijft het ene paarse accent in de kop: effen merkpaars, zonder het roze uit het oude verloop. */
.dag-hero__grad { color: var(--purple); font-weight: 900; }
/* Het woordmerk in de hero-kop, passend in de tekst: zo hoog als de hoofdletters van de kop (Manrope:
   0,72em), op de basislijn en met een gewone woordspatie ervoor, in merkpaars. */
.dag-hero__logo { display: inline-block; margin-left: 0.12em; color: var(--purple); line-height: 0; vertical-align: baseline; }
.dag-hero__logo svg { display: block; height: 0.72em; width: auto; }
.dag-hero__sub {
  margin: 20px auto 0; max-width: 820px; color: var(--body); text-wrap: balance;
  animation: dag-blur-in .8s .3s cubic-bezier(.2,.8,.2,1) both;
}
.dag-hero__actions { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; animation: dag-blur-in .8s .45s cubic-bezier(.2,.8,.2,1) both; }

/* "Loop de dag door" is de paarse ls-btn (homepage.css). "Plan een demo" is de glazen tweede knop van de homepage
   (hero.css .ls-hero__link), even hoog. Die staat daar op een foto met witte tekst; hier op de lichte pagina, dus met
   het glas van het menu (zoals .dag-teaser) en donkere tekst. */
.dag-btn-glass {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px 0 16px;
  border: 1px solid rgba(255,255,255,.5); border-radius: var(--ls-r-button);
  background-color: var(--ls-glass-nav); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  color: var(--ink); font-family: var(--ls-font); font-size: 13px; line-height: 18px; letter-spacing: .005em;
  white-space: nowrap; outline: none;
  transition: background-color .15s var(--ls-ease-default), border-color .15s var(--ls-ease-default);
}
@media (min-width: 1024px) { .dag-btn-glass { height: 42px; font-size: 14px; line-height: 20px; } }
@media (min-width: 1280px) { .dag-btn-glass { font-size: 15px; } }
@media (hover: hover) { .dag-btn-glass:hover { background-color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.9); color: var(--ink); } }
.dag-btn-glass:focus-visible { border-color: var(--ls-focus); box-shadow: var(--ls-ring); }

.dag-btn__faces { display: flex; margin-left: 10px; }
.dag-btn__faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid #f0ede6; display: block; }
.dag-btn__faces img + img { margin-left: -9px; }
.dag-btn__icon--down svg { rotate: 90deg; }

/* ── Schermen-carrousel in de hero ───────────────────────────────────── */
.dag-gallery { position: relative; margin: 48px 0 0; width: 100%; }
.dag-gallery__stage { position: relative; padding-bottom: 40px; overflow: hidden; perspective: 1000px; perspective-origin: center top; background: var(--bg); }
.dag-plane {
  position: relative; width: 100%; height: clamp(320px,44vw,760px);
  transform-style: preserve-3d; touch-action: pan-y; user-select: none;
}
.dag-track { position: absolute; inset: 0; }
.dag-slide {
  position: absolute; left: 50%; top: 0; aspect-ratio: 16/9; overflow: hidden; background: #fff;
  border-radius: 14px; border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgba(14,8,36,.06);
  backface-visibility: hidden; cursor: pointer;
}
.dag-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; pointer-events: none; }
.dag-slide-label { position: absolute; top: 14px; transform: scale(.5) translateZ(2px); transform-origin: top right; display: flex; z-index: 6; pointer-events: none; }
.dag-slide-label span {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 24px;
  font-size: 32px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
  background: linear-gradient(120deg, rgba(255,255,255,.86), rgba(255,255,255,.7));
  border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 12px 28px;
  box-shadow: 0 10px 30px -12px rgba(14,8,36,.25); backdrop-filter: blur(8px);
  animation: dag-blur-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.dag-slide-label i {
  position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: dag-sheen 2.6s ease-in-out infinite;
}

/* ── Het podium: kaarten die over elkaar heen schuiven ───────────────── */
.dag-stage { position: relative; height: 1110vh; } /* 7 posities × 1,3 vh (STEP_VH in app.js) + 1 vh vasthouden + 1 vh uitloop (Bart: 500vh bij 3) */
.dag-stage__inner {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: minmax(160px,230px) minmax(0,1160px) minmax(160px,230px);
  gap: 40px; align-items: center; justify-content: center; padding: 92px 32px 36px; box-sizing: border-box;
}

.dag-ctext {
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .45s cubic-bezier(.2,.8,.2,1);
}
.dag-ctext--left { grid-area: 1 / 1; }
.dag-ctext--right { grid-area: 1 / 3; }
/* Tijd = klein label (Manrope 500, tabulaire cijfers) met een paars stipje ervoor. Dezelfde vorm voor de
   andere kleine labels boven koppen (.dag-intro__tag, .dag-suite__tag, .dag-faq__tag, .dag-demo__tag). */
.dag-ctext__time, .dag-intro__tag, .dag-suite__tag, .dag-faq__tag, .dag-demo__tag {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ink);
}
.dag-ctext__time::before, .dag-intro__tag::before, .dag-suite__tag::before, .dag-faq__tag::before, .dag-demo__tag::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--purple);
}
.dag-intro__tag, .dag-suite__tag, .dag-faq__tag { justify-content: center; }
.dag-ctext h2 { margin: 0; text-wrap: balance; }
.dag-ctext p { margin: 12px 0 0; color: var(--body); text-wrap: pretty; }
.dag-ctext p b { color: var(--ink); }
.dag-ctext__hdr { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.dag-ctext__who { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dag-ctext__who img { width: clamp(120px,14vw,200px); aspect-ratio: 1; border-radius: 20px; object-fit: cover; display: block; box-shadow: 0 20px 50px rgba(75,40,237,.25); }
.dag-ctext__name { font-size: 14px; font-weight: 800; line-height: 1.3; text-align: center; }
.dag-ctext__role { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; text-align: center; }
/* Plaatshouder voor de foto van Sander (Bart toont een foto in dag-ctext__who img): rond vak met initiaal,
   rustig paars. Zelfde maat als zijn foto, zodat de echte foto er later zo voor in de plaats kan. */
.dag-ctext__avatar {
  --av: clamp(120px,14vw,200px);
  width: var(--av); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--av) * .42); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--purple);
  background: linear-gradient(150deg, #F6F3FF, #E6DEFF); box-shadow: inset 0 0 0 1px rgba(75,40,237,.12), 0 20px 50px rgba(75,40,237,.14);
}

.dag-card {
  grid-area: 1 / 2; width: 100%; height: clamp(360px,72vh,720px); position: relative;
  border-radius: var(--card-r); box-shadow: var(--ls-shadow);
  transform-origin: 50% 50%; will-change: transform;
}
.dag-card__clip { height: 100%; overflow: hidden; border-radius: var(--card-r); }
.dag-card__pair { display: flex; height: 100%; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.dag-card__pair > .dag-panel { flex: 0 0 100%; }

.dag-panel {
  border-radius: var(--card-r); height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  justify-content: center; overflow: auto; padding: clamp(20px,5vw,72px);
}
.dag-panel--purple { background: url("/test/ai-suite-dag/assets/panel-purple.webp") center/cover, #F4F1FF; box-shadow: inset 0 0 0 1px rgba(75,40,237,.08); }
.dag-panel--green  { background: url("/test/ai-suite-dag/assets/panel-green.webp") center/cover, #F4FBF8; box-shadow: inset 0 0 0 1px rgba(43,197,128,.12); }
.dag-panel--pink   { background: url("/test/ai-suite-dag/assets/panel-pink.webp") center/cover, #FFF5F9; box-shadow: inset 0 0 0 1px rgba(225,29,143,.1); }
/* Het venster in de kaart blijft leesbaar breed; het dashboard mag het hele
   vlak vullen omdat het zichzelf inpast. */
.dag-panel > * { flex: none; width: 100%; max-width: 820px; margin-left: auto; margin-right: auto; }
.dag-panel > .dag-app--full { max-width: none; flex: 1; min-height: 0; overflow: visible; }

.dag-app { transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.dag-app--full { display: flex; align-items: center; justify-content: center; height: 100%; }
.dag-card:has(.dag-app--full) .dag-panel { padding: clamp(16px,3vw,40px); }

/* ── App-venster ─────────────────────────────────────────────────────── */
.dag-win { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.06); overflow: hidden; }
.dag-win__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dag-win__dots { display: flex; gap: 6px; }
.dag-win__dots i { width: 9px; height: 9px; border-radius: 50%; }
.dag-win__dots i:nth-child(1) { background: #FF5F57; }
.dag-win__dots i:nth-child(2) { background: #FEBC2E; }
.dag-win__dots i:nth-child(3) { background: #28C840; }
.dag-win__demo { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; }
.dag-win__body { padding: 18px; }
.dag-win__body--chat { display: flex; flex-direction: column; gap: 10px; }

/* ── 08:58 · Performance-dashboard ───────────────────────────────────── */
.dag-dash {
  width: 1120px; flex: none; background: #F6F5FB; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column;
  transform-origin: 50% 50%;
}
.dag-dash .dag-win__bar { flex: none; background: #fff; }
.dag-dash__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 14px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dag-dash__title { animation: dag-row-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: 80ms; }
.dag-dash__h { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.dag-dash__sub { font-size: 12px; color: var(--soft); margin-top: 2px; }
.dag-dash__filters { display: flex; gap: 8px; flex-wrap: wrap; animation: dag-row-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: 160ms; }
.dag-seg { display: flex; background: #F6F5FB; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dag-seg span { padding: 4px 11px; }
.dag-seg--tight span { padding: 4px 9px; }
.dag-seg span.is-on { border-radius: 999px; background: #fff; color: var(--purple); box-shadow: 0 1px 3px rgba(14,8,36,.08); }
.dag-dash__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.dag-dash__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

.dag-insight {
  display: flex; align-items: center; gap: 10px; background: var(--tint); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 11px 14px; font-size: 12.5px; line-height: 1.45; color: var(--body);
  animation: dag-row-in .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: 180ms;
}
.dag-insight__icon { color: var(--purple); display: flex; flex: none; }
.dag-insight b { color: var(--purple); }
.dag-insight b.is-green { color: var(--green); }

.dag-hero-kpi {
  position: relative; overflow: hidden; border-radius: 14px; padding: 16px; color: #fff;
  background: linear-gradient(160deg, #4B28ED 0%, #3A1FD1 60%, #2A139E 100%);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  animation: dag-pop-in .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: 220ms;
}
.dag-hero-kpi__sheen { position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.dag-hero-kpi__label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C9BEFF; }
.dag-hero-kpi__value { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.dag-hero-kpi__note { font-size: 11.5px; color: #DDD8FF; line-height: 1.45; }
.dag-hero-kpi__rec { font-size: 12px; margin-top: 2px; }
.dag-hero-kpi__rec b { font-size: 15px; }
.dag-hero-kpi__rec span { color: #DDD8FF; margin-left: 4px; }
.dag-hero-kpi__rev { margin-top: 6px; background: rgba(255,255,255,.14); border-radius: 10px; padding: 9px 12px; }
.dag-hero-kpi__rev-l { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C9BEFF; }
.dag-hero-kpi__rev-v { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }

.dag-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  animation: dag-pop-in .55s cubic-bezier(.2,.8,.2,1) both;
}
.dag-stat__head { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9B93B8; }
.dag-stat__icon { display: flex; }
.dag-stat:nth-of-type(1) .dag-stat__icon { color: var(--purple); }
.dag-stat__delta { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pink); background: #FDE8F0; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.dag-stat__value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.dag-stat__value span { font-size: 12px; font-weight: 600; color: var(--soft); letter-spacing: 0; margin-left: 5px; }
.dag-stat__note { font-size: 11.5px; color: var(--soft); }
.dag-stat__note .is-green { color: var(--green); font-weight: 700; }
.dag-spark { width: 100%; height: 44px; margin-top: 4px; overflow: visible; }
.dag-spark path:last-child { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dag-draw 1.3s cubic-bezier(.2,.8,.2,1) forwards; }

.dag-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; animation: dag-row-in .5s cubic-bezier(.2,.8,.2,1) both; }
.dag-tile__icon { width: 30px; height: 30px; border-radius: 8px; background: var(--tint); color: var(--purple); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.dag-tile__title { font-size: 13.5px; font-weight: 800; }
.dag-tile__sub { font-size: 11.5px; color: var(--soft); margin-top: 2px; }

/* ── Chat (AskHyperr en Managed AI) ──────────────────────────────────── */
.dag-chat { max-width: 86%; border-radius: 12px 12px 12px 4px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; }
.dag-chat--me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--purple); color: #fff; font-weight: 600; }
.dag-chat--ai { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); color: var(--body); animation: dag-msg .42s cubic-bezier(0.165,0.84,0.44,1); }
.dag-chat--ai b { color: var(--ink); }
.dag-typing { display: inline-flex; gap: 5px; padding: 13px 15px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; align-self: flex-start; }
.dag-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: dag-tp 1.1s ease-in-out infinite; }
.dag-typing i:nth-child(2) { animation-delay: .15s; }
.dag-typing i:nth-child(3) { animation-delay: .3s; }

/* ── 11:45 · Nieuwsbrief-resultaten ──────────────────────────────────── */
.dag-row { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; animation: dag-row-in .55s cubic-bezier(.2,.8,.2,1) both; }
.dag-row + .dag-row { margin-top: 8px; }
.dag-row__text { flex: 1; font-weight: 600; color: var(--body); font-size: 13px; }
.dag-pill { animation: dag-pop-in .45s cubic-bezier(.2,.8,.2,1) both; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 3px 8px; white-space: nowrap; background: var(--tint); color: var(--purple); }
.dag-pill--ok { background: var(--green-soft); color: var(--green); }
.dag-pill--static { animation: none; }
.dag-stats { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.dag-figure { animation: dag-row-in .5s cubic-bezier(.2,.8,.2,1) both; }
.dag-figure__v { font-size: 18px; font-weight: 800; }
.dag-figure__l { font-size: 12px; color: var(--muted); font-weight: 600; }
.dag-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--purple); background: var(--tint); border-radius: 999px; padding: 6px 12px; margin-top: 12px; animation: dag-pop-in .5s cubic-bezier(.2,.8,.2,1) both; }

/* ── 11:52 · Advies van de specialist ────────────────────────────────── */
.dag-advice { display: flex; gap: 11px; align-items: flex-start; max-width: 92%; }
.dag-advice__avatar { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dag-advice__avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(14,8,36,.12); display: block; }
.dag-advice__online { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-top: -10px; margin-left: 24px; border: 2px solid #fff; }
.dag-advice__bubble { border-radius: 12px 12px 12px 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; background: var(--bg); border: 1px solid var(--line); color: var(--body); }
.dag-advice__bubble > b { color: var(--ink); }
.dag-advice__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.dag-advice__head b { color: var(--ink); font-size: 13px; }
.dag-advice__head span { font-size: 11px; font-weight: 600; color: var(--soft); }
.dag-advice__uplift { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.dag-advice__uplift b { color: var(--green); }
.dag-advice__actions { display: flex; gap: 8px; margin-left: 47px; flex-wrap: wrap; }
.dag-journey { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dag-journey__step { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; }
.dag-journey__day { font-weight: 800; color: var(--purple); font-variant-numeric: tabular-nums; min-width: 42px; }
.dag-journey__text { flex: 1; color: var(--body); }
.dag-journey__text b { color: var(--ink); }
.dag-approve { font-family: inherit; cursor: pointer; font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 8px 14px; border: 1px solid var(--purple); background: var(--purple); color: #fff; transition: all .3s; }
.dag-approve.is-done { border-color: transparent; background: var(--green-soft); color: var(--green); cursor: default; }
.dag-note { font-size: 12px; font-weight: 600; color: var(--soft); align-self: center; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.dag-faq { padding: 128px 0; background: var(--bg); }
.dag-faq__inner { max-width: 760px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 56px; }
.dag-faq__head { text-align: center; }
.dag-faq__head h2 { margin: 0 0 20px; }
.dag-faq__head p { margin: 0 auto; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.dag-faq__head a { color: var(--purple); font-weight: 500; }
/* Tegels zoals .ls-faq__item: wit, hoek 16px, geen ruimte ertussen (alleen de hoeken tonen de achtergrond), de
   hele kop is klikbaar, chevron in een afgeronde tegel die bij hover en open licht grijs kleurt. */
.dag-faq__list { display: flex; flex-direction: column; width: 100%; max-width: 600px; margin: 0 auto; isolation: isolate; }
.dag-faq__item { position: relative; z-index: 0; border: 2px solid transparent; border-radius: 16px; background: var(--ls-surface); }
.dag-faq__item button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px; background: none; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; text-align: left;
  font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.4; letter-spacing: 0; outline: none;
}
.dag-faq__item button svg { flex: none; box-sizing: border-box; width: 42px; height: 32px; padding: 8px 13px; border-radius: 18px; color: var(--ink); transition: transform .2s var(--ls-ease-out), background-color .2s var(--ls-ease-out); }
@media (hover: hover) { .dag-faq__item:hover button svg { background-color: var(--ls-surface-2); } }
.dag-faq__item button[aria-expanded="true"] svg { background-color: var(--ls-surface-2); }
.dag-faq__item:has(button:focus-visible) { z-index: 10; border-color: var(--ls-focus); box-shadow: var(--ls-ring); }
.dag-faq__item:has(button:focus-visible) button svg { background-color: var(--ls-bg-3); }
.dag-faq__panel { display: grid; transition: grid-template-rows .2s ease-out, opacity .2s; }
.dag-faq__panel > div { overflow: hidden; }
.dag-faq__panel p { margin: 0; padding: 0 70px 22px 22px; font-size: 14px; line-height: 1.45; color: var(--ls-ink-2); text-wrap: pretty; }
@media (min-width: 1280px) { .dag-faq__item button { font-size: 17px; } .dag-faq__panel p { font-size: 15px; } }

/* ── Demo ────────────────────────────────────────────────────────────── */
.dag-demo {
  position: relative; overflow: hidden;
  background: url("/test/ai-suite-dag/assets/panel-purple.webp") center/cover, #F4F1FF;
  box-shadow: inset 0 1px 0 rgba(75,40,237,.08);
}
.dag-demo__inner {
  position: relative; max-width: 1160px; margin: 0 auto; padding: clamp(72px,9vw,128px) 24px;
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 48px; align-items: center;
}
.dag-demo h2 { margin: 0; text-wrap: balance; color: var(--ink); }
.dag-demo p { margin: 24px 0 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.dag-demo p b { color: var(--ink); }
.dag-demo__faces { display: flex; margin-top: 24px; }
.dag-demo__faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.dag-demo__faces img + img { margin-left: -11px; }
.dag-demo__card { background: var(--ls-surface); border-radius: var(--ls-r-wrapper); padding: 28px; }
.dag-demo__ok { padding: 24px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dag-demo__ok-title { font-size: 21px; font-weight: 450; line-height: 1.2; letter-spacing: -.02em; }
.dag-demo__ok-text { font-size: 15px; line-height: 1.45; color: var(--body); max-width: 320px; }

.dag-form { display: flex; flex-direction: column; gap: 16px; }
.dag-form__title { font-size: 21px; font-weight: 450; line-height: 1.2; letter-spacing: -.02em; }
.dag-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
/* Velden zoals .ls-form__input (42px, hoek 12px, 16px tekst), maar op wit in plaats van op glas. */
.dag-form input {
  display: block; width: 100%; height: 42px; box-sizing: border-box; font: 400 16px/24px var(--ls-font); letter-spacing: normal; color: var(--ink);
  background: var(--ls-surface-2); border: 1px solid var(--ls-line-2); border-radius: var(--ls-r-button); padding: 0 15px; outline: none;
  transition: border-color .15s var(--ls-ease-default), box-shadow .15s var(--ls-ease-default);
}
.dag-form input::placeholder { color: var(--ls-ink-disabled); opacity: 1; }
.dag-form input:focus { border-color: var(--ls-focus); box-shadow: var(--ls-ring); }
.dag-form .ls-btn { margin-top: 4px; height: 42px; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .dag-stage__inner {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr);
    gap: 22px; padding: 88px 20px 24px; align-items: start;
  }
  .dag-ctext, .dag-ctext--left, .dag-ctext--right { grid-area: 1 / 1; max-width: 640px; }
  .dag-card { grid-area: 2 / 1; height: 100%; max-height: 720px; min-height: 0; }
  .dag-ctext__hdr { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
}
@media (max-width: 900px) {
  .dag-plane { height: 56vw; margin-top: 12px; }
  .dag-hero { padding-top: 104px; }
  .dag-stage { height: 1090vh; }
  .dag-stage__inner { padding: 76px 14px 16px; }
  .dag-ctext__hdr { grid-template-columns: 1fr; }
  .dag-ctext__who img { width: 88px; border-radius: 14px; }
  .dag-ctext__avatar { --av: 56px; }
  .dag-ctext__who { flex-direction: row; align-items: center; gap: 12px; }
  .dag-ctext__name, .dag-ctext__role { text-align: left; }
  .dag-clients { padding: calc(72px + 32px) 14px 56px; }
  .dag-clients__inner { grid-template-columns: 1fr; gap: 56px; }
  .dag-clients__note { font-size: 15px; }
  .dag-clients__btn { margin-top: 32px; }
  .dag-clients__label { margin-bottom: 12px; text-align: left; }
  .dag-clients__grid { column-gap: 8px; }
  .dag-clients__cell { height: 84px; padding: 0 8px; }
  .dag-clients__cell img { max-height: 36px; }
  .dag-teaser { bottom: 10px; padding: 8px 12px; }
  .dag-panel, .dag-card:has(.dag-app--full) .dag-panel { padding: 12px; }
  .dag-card { margin-bottom: 28px; }
  .dag-demo__inner { grid-template-columns: 1fr; gap: 28px; }
  .dag-faq { padding: 88px 0; }
  .dag-faq__inner { gap: 40px; }
  .dag-advice__actions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dag *, .dag *::before, .dag *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── De Suite · het klikbare blok onder de hero ───────────────────────────── */
.dag-suite { padding: 96px 0 72px; background: var(--bg); }
.dag-suite__inner { max-width: 1680px; margin: 0 auto; padding: 0 24px; }
.dag-suite__head { text-align: center; margin-bottom: 40px; }
.dag-suite__head h2 { margin: 0 0 20px; }
.dag-suite__head p { margin: 0 auto; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
/* Het blok brengt zijn eigen venster mee, dus hier geen kader eromheen. */
.dag-suite__frame { display: block; width: 100%; border: 0; }
@media (max-width: 720px) {
  .dag-suite { padding: 64px 0 48px; }
  /* Op een telefoon toont het blok de telefoonopnames van de Suite, op 375 breed
     gemaakt. Met 24px marge links en rechts staan die op factor 0,85; van rand
     tot rand bijna op ware grootte. De kop houdt zijn marge. */
  .dag-suite__inner { padding: 0; }
  .dag-suite__head { padding: 0 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Toevoegingen voor de lokale replica (niet van Bart)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wat Tailwind-preflight op de echte site globaal doet. :where() geeft nul specificiteit, zodat
   Bart's eigen regels er altijd boven blijven staan (zoals type-selectors dat op zijn site doen). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #F9F8F5; }
:where(.dag) :where(h1, h2, p) { margin: 0; }
:where(.dag) :where(h1, h2) { font-size: inherit; font-weight: inherit; }
:where(.dag) :where(img, video) { display: block; max-width: 100%; }
:where(.dag) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

/* ── Video in het paneel ─────────────────────────────────────────────────
   Het paneel behoudt Bart's kleurvlak als achtergrond; de video ligt eroverheen en
   vult het paneel. Ontbreekt de video, dan staat er alleen het kleurvlak en een label. */
.dag-card .dag-panel--video { position: relative; display: block; padding: 0; overflow: hidden; clip-path: inset(0 round var(--card-r)); }
.dag-panel--video > .dag-video,
.dag-panel--video .dag-poster {   /* r9: de poster kan in een <picture> staan (staande poster op de telefoon) */
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
  object-fit: cover; border-radius: var(--card-r); background: transparent;
}
/* r7 (9 okt): de compositie live in een iframe op ware maat (1680 x 1140). speler.js zet de transform:
   schaal zoals object-fit: cover, gecentreerd; op smal scherm groter, op het onderdeel (r8, zie speler.js). Onzichtbaar tot frame 0 staat; de poster eronder is ook frame 0 en
   blijft liggen (hij draagt de alt-tekst, het iframe is aria-hidden).
   Geen pointer-events: wiel en aanraking blijven bij de pagina (Lenis, magneet). */
.dag-panel--video > .dag-live {
  position: absolute; left: 0; top: 0; width: 1680px; height: 1140px; max-width: none; margin: 0;
  border: 0; display: block; transform-origin: 0 0; pointer-events: none; background: transparent;
  opacity: 0; transition: opacity .2s linear;
}
.dag-panel--video > .dag-live.is-klaar { opacity: 1; }
.dag-panel--video.is-missing .dag-poster,
.dag-panel--video.is-missing > .dag-live { visibility: hidden; }
.dag-panel--video > .dag-panel__missing {
  position: absolute; inset: 0; width: auto; max-width: none; margin: 0;
  display: none; align-items: center; justify-content: center; pointer-events: none;
}
.dag-panel--video.is-missing > .dag-panel__missing { display: flex; }
.dag-panel__missing .dag-app {
  padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--soft);
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
}
.dag-panel--video.is-missing > .dag-video { visibility: hidden; }

/* Telefoon en tablet, staand (r8, 9 okt): tekst boven, kaart eronder, samen midden in de ruimte onder het menu.
   Vier rijen: [rest] [tekst] [kaart] [rest]. Alle acht teksten staan in dezelfde cel, dus de tekstrij is zo hoog als de
   langste (11:52 met Sander). De kaart krijgt wat er dan overblijft, hoogstens --dag-kaart-max; de twee restrijen delen
   de rest. Zo past het altijd. r7 rekende met een vaste 270 px voor de tekst: op 375 x 667 viel de kaart daardoor 21 px
   onder het scherm en schoof de tekst de menuband in.
   --dag-kaart-max = 0,95 keer de breedte. De compositie is liggend (1680 x 1140) en Zoey (telefoon plus kaartje) is het
   breedste onderdeel; tot 0,96 past dat in de kaart zonder lege rand (speler.js schaalt op smal scherm op het onderdeel).
   Hoger dan 0,95 en Zoey valt er weer buiten; lager en de hoge onderdelen (Sander, Ask) worden kleiner.
   100svh: op een telefoon met zichtbare adresbalk valt de onderkant van de kaart dan niet achter de balk. */
@media (max-width: 1180px) {
  .dag-stage__inner {
    --dag-kaart-max: min(720px, calc((100vw - 40px) * .95));
    height: 100vh; height: 100svh;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, var(--dag-kaart-max)) minmax(0, 1fr);
    row-gap: 0; align-content: stretch;
  }
  .dag-ctext, .dag-ctext--left, .dag-ctext--right { grid-area: 2 / 1; padding-bottom: 22px; }
  .dag-card { grid-area: 3 / 1; height: 100%; max-height: none; min-height: 0; }
}
@media (max-width: 900px) {
  .dag-stage__inner { --dag-kaart-max: min(720px, calc((100vw - 28px) * .95)); }
  .dag-ctext, .dag-ctext--left, .dag-ctext--right { padding-bottom: 18px; }
  .dag-card { margin-bottom: 0; }
  .dag-card .dag-panel--video { padding: 0; }
}
/* Staande telefoonversie (r9, ../suite-video/MOBIEL-SPEC.md): de animatie is daar staand en rekbaar (720 breed,
   minstens 800 hoog), dus de kaart mag hoger dan breed: tot 1,25 keer de breedte, als de ruimte er is. Op lange telefoons
   (390 x 844 en groter) wordt hij zo 4:5; op een korte (375 x 667) houdt hij wat er overblijft. Zelfde breekpunt als speler.js. */
@media (max-width: 640px) and (orientation: portrait) {
  .dag-stage__inner { --dag-kaart-max: min(720px, calc((100vw - 28px) * 1.25)); }
}
/* Lage telefoon (SE en kleiner): de foto van Sander kleiner, zodat de kaart zijn ruimte houdt. */
@media (max-width: 900px) and (max-height: 700px) {
  .dag-ctext__hdr { gap: 14px; }
  .dag-ctext__who img { width: 56px; border-radius: 12px; }
}
/* Liggend (telefoon dwars, tablet liggend): tekst links, kaart rechts, over de volle hoogte onder het menu. Boven elkaar
   bleef er op 844 x 390 maar 200 px kaart over, half onder het scherm, en liep de kop onder het menu door.
   Kaartbreedte: minstens 1,06 keer de hoogte (anders past Zoey niet zonder lege rand), de tekst houdt minstens 268 px. */
@media (max-width: 1180px) and (min-aspect-ratio: 5/4) {
  .dag-stage__inner {
    grid-template-columns: minmax(0, 1fr) min(calc(100% - 300px), max(calc((100svh - 112px) * 1.06), 52%));
    grid-template-rows: minmax(0, 1fr);
    column-gap: 32px; align-items: center;
  }
  .dag-ctext, .dag-ctext--left, .dag-ctext--right { grid-area: 1 / 1; padding-bottom: 0; }
  .dag-card { grid-area: 1 / 2; height: 100%; }
  .dag-ctext__hdr { grid-template-columns: 1fr; gap: 14px; }
  .dag-ctext__who { flex-direction: row; align-items: center; gap: 12px; }
  .dag-ctext__who img { width: 72px; border-radius: 14px; }
  .dag-ctext__name, .dag-ctext__role { text-align: left; }
}
@media (max-width: 900px) and (min-aspect-ratio: 5/4) {
  .dag-stage__inner {
    padding: 72px 14px 12px; column-gap: 24px;
    grid-template-columns: minmax(0, 1fr) min(calc(100% - 260px), max(calc((100svh - 84px) * 1.06), 52%));
  }
}

/* ── Inleiding en slot van de dag (ronde 2) ─────────────────────────── */
.dag-intro, .dag-slot { max-width: 960px; margin: 0 auto; padding: 120px 24px 40px; text-align: center; }
.dag-intro { padding-top: 160px; }
.dag-nowrap { white-space: nowrap; }
.dag-slot { padding: 80px 24px 120px; }
.dag-intro h2, .dag-slot h2 { margin: 0; text-wrap: balance; color: var(--ink); }
.dag-intro p { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: var(--body); }
@media (max-width: 900px) { .dag-intro { padding: 72px 18px 24px; } .dag-slot { padding: 56px 18px 80px; } }

/* ── Het vliegwiel onder de slotregel: vier stappen, om de beurt licht er één op ──────────── */
.dag-wiel { list-style: none; margin: 40px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 920px; text-align: left; }
.dag-slot { max-width: 980px; }
/* Witte tegel zoals .ls-faq__item: wit, hoek 16px, rand van 2px (transparant tot hij oplicht), geen schaduw. */
.dag-wiel li { position: relative; padding: 16px 16px 18px; border-radius: 16px; background: var(--ls-surface); border: 2px solid transparent; font-size: 16px; font-weight: 450; line-height: 1.4; letter-spacing: -.005em; color: var(--ink); animation: dag-wiel 8s cubic-bezier(.2,.8,.2,1) infinite; }
.dag-wiel li:nth-child(2) { animation-delay: 2s; }
.dag-wiel li:nth-child(3) { animation-delay: 4s; }
.dag-wiel li:nth-child(4) { animation-delay: 6s; }
.dag-wiel li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -12px; width: 8px; height: 2px; background: var(--ls-stone-2); }
.dag-wiel__n { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 999px; background: var(--ls-brand-soft); color: var(--purple); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
@keyframes dag-wiel {
  0%, 22%, 100% { border-color: transparent; transform: none; box-shadow: none; }
  4%, 18% { border-color: var(--ls-focus); transform: translateY(-3px); box-shadow: var(--ls-ring); }
}
@media (max-width: 900px) { .dag-wiel { grid-template-columns: 1fr 1fr; } .dag-wiel li:nth-child(2)::after { display: none; } }
/* r8: op 320 breed duwde "Recommender" (109 px) de rechterkolom op 144 tegen 128 px links. Iets minder binnenruimte en
   15 px tekst, dan past het woord en zijn de tegels weer even breed. */
@media (max-width: 359px) { .dag-wiel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dag-wiel li { padding: 14px 12px 16px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .dag-wiel li { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage-stijl (6 okt 2026): menu, kaarthoek en wat homepage.css niet zelf regelt
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kaarthoek: 64 desktop, 56 tablet, 24 mobiel (STIJL-HOMEPAGE.md). */
@media (max-width: 1279px) { .dag { --card-r: 56px; } }
@media (max-width: 900px) { .dag { --card-r: 24px; } }

/* De pagina zelf staat op de wrapper .dag.ls: kleur en tekstmaat van .dag winnen van .ls, de rest erft. */
.dag.ls { background: var(--bg); color: var(--ink); }

/* Menu: de schuivende witte pil en het inklappende woordmerk doet nav.js met GSAP (klasse is-js op de nav). Zonder
   GSAP of bij reduced motion blijft het statisch: in rust zijn alle items wit; zodra de muis op het menu staat
   verdwijnt het wit overal, behalve op het item eronder. Rechts rust het wit achter "Demo" (De referentie "index"-modus). */
.lsn:not(.is-js):hover .lsn-item__bg.is-white { background-color: transparent; }
.lsn:not(.is-js) .lsn-item:hover .lsn-item__bg { background-color: #fff; }
.lsn .lsn-item:active .lsn-item__bg { background-color: var(--ls-pressed); }
.lsn--main .lsn-item__bg { transition-duration: .3s; }
/* Het H-woordmerk in het menu: paars, zoals op de homepage; ingedrukt (donkere pil) wit. */
.lsn-logo__mark, .lsn-logo__word { color: #552af5; }
.lsn-item:active :is(.lsn-logo__mark, .lsn-logo__word) { color: #fff; }
.lsn-m-label { transition: opacity .15s; }

/* Mobiel menu: de overgangen die GSAP bij de homepage doet. */
.lsn-m { transition: width .5s cubic-bezier(.85,.05,.09,.91); }
.lsn-m__row { transition: transform .5s cubic-bezier(.85,.05,.09,.91); }
.lsn-m__panel { transition: height .25s ease-out; }
.lsn-m__close[hidden] { display: none; }
.lsn-m__frame { transition: height .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .lsn-m, .lsn-m__row, .lsn-m__panel, .lsn-m__frame { transition: none; } }
/* Met GSAP (nav.js, klasse is-gsap) bepaalt GSAP de tijden van het mobiele menu, zoals op de homepage: geen CSS-overgang ertussen. */
.lsn-m.is-gsap, .lsn-m.is-gsap .lsn-m__row, .lsn-m.is-gsap .lsn-m__panel, .lsn-m.is-gsap .lsn-m__frame, .lsn-m.is-gsap .lsn-m-label { transition: none; }
/* Mobiel menu (r8): elke link een tikdoel van 44 px (was 38). De afstand tussen de links blijft 46 px: 44 + 2 in plaats van
   38 + 8. Past het paneel niet in beeld (telefoon liggend: 491 px paneel op 390 px scherm), dan scrolt de lijst in het
   paneel, anders vallen Contact en Demo onbereikbaar onder het scherm. data-lenis-prevent in index.html laat het wiel daar met rust. */
.lsn-m__link { display: flex; align-items: center; min-height: 44px; margin-bottom: 2px; }
.lsn-m__link--sep { margin-bottom: 20px; }
.lsn-m__inner { max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lsn-m__inner::-webkit-scrollbar { display: none; }
@media (max-height: 500px) { .lsn-m__list { padding-top: 72px; } }

/* Footer op touch (r8): de links waren 22 px hoog met 26 px tussen de regels. Nu elk een tikdoel van 44 px. */
@media (pointer: coarse) {
  .ls .ls-footer__head { margin-bottom: 0; }
  .ls .ls-footer__item { margin-bottom: 0; }
  .ls .ls-footer__link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Footerkop op twee regels ("De AI Suite waar jouw" / "marketing mee versnelt"), zoals footer.css van de homepage:
   iets kleiner dan ls-heading-lg, zo ver als nodig om de langste regel naast de kolommen te laten passen. */
.ls .ls-footer__title { font-size: min(40px, calc(9.6vw - 3px)); }
@media (min-width: 1024px) { .ls .ls-footer__title { font-size: 43px; } }
@media (min-width: 1280px) { .ls .ls-footer__title { font-size: min(70px, calc(12px + 2.85vw)); } }
/* Kolomafstanden zoals de homepagefooter nu (footer.css); die in homepage.css (150 px) lieten de kop geen ruimte. */
@media (min-width: 1024px) {
  .ls .ls-footer__side { padding-right: 24px; }
  .ls .ls-footer__links { flex-wrap: nowrap; gap: 32px; }
}
@media (min-width: 1280px) {
  .ls .ls-footer__side { padding-right: 74px; }
  .ls .ls-footer__links { gap: 72px; }
}
@media (min-width: 1440px) { .ls .ls-footer__links { gap: 110px; } }

/* ── Scrollgedrag van de homepage (SCROLL-HOMEPAGE.md) ──────────────────────
   HYPERR in de hero-kop: acht losse vormen die homepage-scroll.js op hun plek laat vallen (IntroLogo.tsx).
   overflow zichtbaar, zodat een letter die van 34 eenheden boven of onder komt niet wordt afgesneden. */
.dag-hero__logo svg { overflow: visible; }
.dag-hero__piece { fill: currentColor; will-change: transform, opacity; }
/* 17:30: met JS (klasse is-scroll) volgt het oplichten de scrollpositie in plaats van de timer. Zelfde oplicht-stand en
   dezelfde aanloop (0,32 s, de 4% van de oude 8 s-cyclus) als de keyframes hierboven. */
.dag-wiel.is-scroll li { animation: none; transition: border-color .32s cubic-bezier(.2,.8,.2,1), transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s cubic-bezier(.2,.8,.2,1); }
.dag-wiel.is-scroll li.is-on { border-color: var(--ls-focus); transform: translateY(-3px); box-shadow: var(--ls-ring); }

/* ── Klik er zelf doorheen, op de telefoon (r9) ────────────────────────────────
   Het blok vulde bijna het hele scherm, en wie eroverheen wilde scrollen bleef erin hangen (13 keer vegen op 375 x 667).
   Op de telefoon (suite-knoppen.js, onder 640 breed) is het venster daarom lager, zo'n 60% van het scherm, en eerst
   afgedekt: vegen over het blok scrolt gewoon de pagina. Na een tik werkt het venster; scrolt het blok uit beeld, dan
   komt de afdekking terug. */
.dag-suite__box { position: relative; }
.dag-suite__tik { display: none; }
.dag-suite__box.is-dicht .dag-suite__tik {
  position: absolute; inset: 0; z-index: 2; display: block;
  width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* --tik-y = het midden van het venster in het blok (suite-knoppen.js) */
.dag-suite__tik .ls-btn { position: absolute; left: 50%; top: var(--tik-y, 50%); transform: translate(-50%, -50%); white-space: nowrap; }
.dag-suite__tik .ls-btn { pointer-events: none; height: 44px; box-shadow: 0 10px 30px rgba(18, 12, 8, .18); border-radius: var(--ls-r-button); }
.dag-suite__tik .ls-btn__icon { height: 44px; }
.dag-suite__box.is-dicht .dag-suite__frame { pointer-events: none; }

/* ── Leadformulier (lead.js): valkuil voor bots en foutmelding ───────────── */
.dag-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dag-form__error { margin: 0; color: #b3261e; font-size: 14px; line-height: 1.45; }
.dag-form__error a { color: inherit; text-decoration: underline; }

/* ── Cookiebanner (consent.js), zelfde maten en kleuren als CookieBanner.tsx in de React-site ── */
.dag-cookie {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: calc(100% - 40px); max-width: 470px;
  opacity: 0; transform: translateY(20px); transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
  font-family: Manrope, system-ui, sans-serif;
}
.dag-cookie.is-in { opacity: 1; transform: none; }
.dag-cookie__card {
  padding: 24px; border: 1px solid #ece8df; border-radius: 24px; background: #fff;
  box-shadow: 0 24px 60px -20px rgba(18,12,8,.22);
}
@media (min-width: 640px) { .dag-cookie__card { padding: 28px; } }
.dag-cookie__title { margin: 0 0 12px; color: #120c08; font-size: 18px; font-weight: 500; line-height: 1.375; letter-spacing: -.01em; }
.dag-cookie__text { margin: 0; color: #66625a; font-size: 15px; line-height: 1.55; }
.dag-cookie__text a { color: #120c08; text-decoration: underline; text-decoration-color: #c9c2b3; text-underline-offset: 3px; }
.dag-cookie__text a:hover { text-decoration-color: #120c08; }
.dag-cookie__prefs { margin-top: 20px; border-top: 1px solid #ece8df; }
.dag-cookie__row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #ece8df; color: #120c08; font-size: 16px; }
.dag-cookie__row small { margin-left: 8px; color: #8a867d; font-size: 13px; }
.dag-cookie__switch {
  position: relative; flex-shrink: 0; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 999px;
  background: #e6e1d6; cursor: pointer; transition: background-color .2s;
}
.dag-cookie__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .2s;
}
.dag-cookie__switch.is-on { background: #120c08; }
.dag-cookie__switch.is-on::after { transform: translateX(18px); }
.dag-cookie__switch.is-locked { background: #9b9893; cursor: default; }
.dag-cookie__switch:focus-visible, .dag-cookie__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75,40,237,.3); }
.dag-cookie__actions { display: flex; gap: 12px; margin-top: 24px; }
.dag-cookie__btn {
  flex: 1; height: 48px; border: 1px solid #e6e1d6; border-radius: 999px; background: #fff; color: #120c08;
  font: 500 15px/1 Manrope, system-ui, sans-serif; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.dag-cookie__btn:hover, .dag-cookie__btn.is-active { border-color: #120c08; }
.dag-cookie__btn--primary { border-color: #4b28ed; background: #4b28ed; color: #fff; }
.dag-cookie__btn--primary:hover { border-color: #3100d1; background: #3100d1; }
@media (prefers-reduced-motion: reduce) { .dag-cookie, .dag-cookie__switch, .dag-cookie__switch::after { transition: none; } }