/* Signaalkleur goud in plaats van oranje, een hero die licht of donker kan. Bron: social/landing-concepten/maak-live-kleuren.py (goud-licht). */
:root { --oranje: #E5A31B; }
.agent--jij:hover { background: #EDB646; }

/* ---------- lichte hero: papier in plaats van #111214 ---------- */
:root.hero-licht .hero { background: var(--papier); color: var(--inkt); }
:root.hero-licht .hero__waas { background: linear-gradient(0deg, rgba(242,238,230,0.97) 0%, rgba(242,238,230,0.82) 18%, rgba(242,238,230,0) 36%); }
:root.hero-licht .hero .knop { background: var(--inkt); color: var(--papier); }
:root.hero-licht .hero .knop:hover { background: var(--oranje); color: var(--inkt); }
:root.hero-licht .hero .tekstlink { color: var(--inkt); }
:root.hero-licht .hero__label { background: rgba(18,18,20,0.05); border-color: rgba(18,18,20,0.1); color: var(--inkt); }
:root.hero-licht .hero__sub { color: var(--inkt-zacht); }
:root.hero-licht .hero__voet { color: #8a857d; }
:root.hero-licht .tp { color: var(--inkt); }
:root.hero-licht .tp__logo path:nth-of-type(3) { fill: var(--inkt); }   /* alleen het woord; de sterren in de vakjes blijven wit */
:root.hero-licht .tp__tekst { border-left-color: rgba(18,18,20,0.18); }
:root.hero-licht .tp__tekst span, :root.hero-licht .tp__score span { color: var(--inkt-zacht); }
:root.hero-licht .hero__cijfers-label { color: var(--inkt-zacht); }
:root.hero-licht .hero__cijfers-rij b { color: var(--inkt); }
:root.hero-licht .hero__cijfers-rij div:last-child b { color: #B87D00; }   /* goud is te licht voor tekst op papier */
:root.hero-licht .hero__cijfers-rij span { color: #77736b; }
:root.hero-licht .hero__cijfers-rij i { color: #b9b4ab; }
:root.hero-licht .hero__cijfers-klein { color: #77736b; }
:root.hero-licht .hero__kop em { color: #B87D00; }
@media (max-width: 860px) {
  :root.hero-licht .top { background: rgba(242,238,230,0.92); border-bottom-color: rgba(18,18,20,0.08); }
}

/* ---------- het knopje licht/donker, klein naast de knop rechtsboven ---------- */
.top__cta { margin-left: auto; }
.thema-knop { pointer-events: auto; margin-left: 8px; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid rgba(18,18,20,0.14); background: var(--papier); color: var(--inkt); display: grid; place-items: center; padding: 0; cursor: pointer; }
.thema-knop[hidden] { display: none; }
.thema-knop:hover { border-color: var(--inkt); }
.thema-knop:focus-visible { outline: 2px solid var(--oranje); outline-offset: 3px; }
.thema-knop svg { width: 16px; height: 16px; }
.thema-knop .maan, .hero-licht .thema-knop .zon { display: none; }
.hero-licht .thema-knop .maan { display: block; }
@media (max-width: 860px) { .thema-knop { display: none; } }   /* op de telefoon geen knopje: de hero blijft donker */

/* ---------- de uitleg bij de cijfers: pas zichtbaar als je over de cijfers gaat ---------- */
.hero__cijfers-rij { pointer-events: auto; cursor: help; outline: none; }
.hero__cijfers-klein { opacity: 0; transform: translateY(-4px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.hero__cijfers-rij:hover + .hero__cijfers-klein, .hero__cijfers-rij:focus + .hero__cijfers-klein { opacity: 1; transform: none; }
@media (max-width: 860px) {
  /* op de telefoon schuift de uitleg over het kantoor, zodat er geen leeg gat staat */
  .hero__cijfers { position: relative; top: 0; left: 0; right: 0; z-index: 3; }   /* de top en zijkanten van desktop gelden anders ook hier */
  .hero__cijfers-klein { position: absolute; top: 100%; left: 50%; width: min(340px, 100%); margin: 8px 0 0; translate: -50% 0; padding: 10px 12px; border-radius: 10px; background: var(--papier); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
  .hero__cijfers-klein { background: #1c1d20; }
  .hero-licht .hero__cijfers-klein { background: var(--papier); }
}

/* ---------- de intro: zwart doek, drie getypte zinnen, dan gaat het kantoor open ---------- */
.intro { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 0 var(--rand); background: #0c0c0e; color: #ecebe7; cursor: pointer; transition: opacity 0.9s var(--ease); animation: intro-nood 0.6s 16s forwards; }
.intro__zin { margin: 0; max-width: 16em; font: 700 clamp(34px, 5.4vw, 92px)/1.04 var(--font-display); letter-spacing: -0.005em; text-transform: uppercase; text-align: center; transition: opacity 0.45s var(--ease), transform 0.9s var(--ease); }
.intro__zin em { color: var(--oranje); }
.intro__zin span { visibility: hidden; }
.intro__zin span.aan { visibility: visible; }
.intro__cursor { display: inline-block; width: 0.09em; height: 0.82em; margin: 0 -0.15em 0 0.06em; vertical-align: -0.04em; background: var(--oranje); animation: intro-knipper 1s steps(1) infinite; }
.intro--typt .intro__cursor { animation: none; }
.intro__over { position: absolute; left: 0; right: 0; bottom: clamp(22px, 5vh, 44px); text-align: center; font: 500 11px var(--font-mono); letter-spacing: 0.12em; color: rgba(236,235,231,0.34); }
.intro--weg { opacity: 0; pointer-events: none; }
.intro--weg .intro__zin { opacity: 0; transform: scale(1.04); }
@keyframes intro-knipper { 50% { opacity: 0; } }
@keyframes intro-nood { to { opacity: 0; visibility: hidden; } }   /* als het script vastloopt, gaat het doek toch weg */
/* het kantoor staat tijdens de intro iets dichterbij en schuift op zijn plek als het doek opgaat */
.hero__kantoor { transition: transform 2.4s var(--ease); }
.intro-loopt .hero__kantoor { transform: scale(1.06); }