/* Drie standen van de dag: Buiten is daglicht, Binnen is schaduw met
   lamplicht, Beide is de zonsopkomst daartussen. Binnen staat voor het
   binnenste van een bedrijf, de schaduwplekken waar werk blijft liggen: donker,
   maar warm, want het kampvuur uit MERK.md brandt er. Dezelfde amberen
   lichtbron staat in alle drie rechtsboven; daardoor sluiten ze op elkaar aan.

   `.schaduw` zet de tokens om, dus alles wat met var(--vlak), var(--inkt) en
   var(--wit) is opgemaakt, kleurt vanzelf mee. Zet hem op een sectie of een
   omhulsel, nooit op body: de navigatie en de voet blijven licht. */

.schaduw {
  --vlak: #1c2622;
  --inkt: #f7f5f1;
  --inkt-zacht: rgba(247, 245, 241, 0.8);
  --wit: rgba(247, 245, 241, 0.07);
  --lijn: rgba(247, 245, 241, 0.16);
  --groen: #8fd0bf;
  --groen-diep: #b9e3d8;
  --acc-diep: #ecb662;
  --schaduw: 0 1px 2px rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.3);
  color: var(--inkt);
  background:
    radial-gradient(42rem 28rem at 88% -6rem, rgba(236, 182, 98, 0.22), transparent 62%),
    radial-gradient(36rem 26rem at -4% 105%, rgba(111, 179, 163, 0.16), transparent 60%),
    #1c2622;
}

/* Het daglicht krijgt dezelfde lichtbron, zachter. */
.daglicht {
  background:
    radial-gradient(42rem 28rem at 88% -6rem, rgba(236, 182, 98, 0.14), transparent 62%),
    var(--vlak);
}

.schaduw .knop--rand {
  background: transparent;
}

.schaduw .knop--rand:hover {
  border-color: var(--inkt);
}

/* De zonsopkomst: van schaduw naar daglicht, als band tussen twee vlakken. */
.overgang {
  height: clamp(5rem, 12vw, 9rem);
  background: linear-gradient(180deg, #1c2622 0%, #3f4a3f 28%, #a88d63 58%, #efe2cc 82%, var(--vlak) 100%);
}

/* — De wereldknop — */
.wereldknop {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--rond-groep);
  border: 1px solid var(--lijn);
  background: var(--wit);
}

.wereldknop button {
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: var(--rond-binnen);
  background: transparent;
  color: var(--inkt-zacht);
  font: 600 0.92rem/1.2 var(--font-tekst);
  cursor: pointer;
}

.wereldknop button small {
  font-weight: 400;
  opacity: 0.85;
}

.wereldknop button[aria-pressed="true"] {
  color: #fff;
}

.wereldknop button[data-kies="buiten"][aria-pressed="true"] { background: var(--acc); }
.wereldknop button[data-kies="beide"][aria-pressed="true"] { background: linear-gradient(90deg, #2e5e57, #c9702e); }
.wereldknop button[data-kies="binnen"][aria-pressed="true"] { background: #2e5e57; }

/* — Wat per wereld wisselt —
   Zonder data-wereld (geen JavaScript) geldt Beide. */
[data-voor] {
  display: none;
}

html[data-wereld="buiten"] [data-voor~="buiten"],
html[data-wereld="binnen"] [data-voor~="binnen"],
html[data-wereld="beide"] [data-voor~="beide"],
html:not([data-wereld]) [data-voor~="beide"] {
  display: revert;
}

/* Het vlak bovenaan de voorkant: licht bij Buiten, schaduw bij Binnen en Beide.
   De tokens van .schaduw staan hier nog een keer, omdat ze van de wereld
   afhangen en niet van een vaste klasse. */
html:not([data-wereld="buiten"]) .wereldvlak {
  --vlak: #1c2622;
  --inkt: #f7f5f1;
  --inkt-zacht: rgba(247, 245, 241, 0.8);
  --wit: rgba(247, 245, 241, 0.07);
  --lijn: rgba(247, 245, 241, 0.16);
  --groen: #8fd0bf;
  --groen-diep: #b9e3d8;
  --acc-diep: #ecb662;
  color: var(--inkt);
  background:
    radial-gradient(42rem 28rem at 88% -6rem, rgba(236, 182, 98, 0.22), transparent 62%),
    radial-gradient(36rem 26rem at -4% 105%, rgba(111, 179, 163, 0.16), transparent 60%),
    #1c2622;
}

html[data-wereld="buiten"] .wereldvlak {
  background:
    radial-gradient(42rem 28rem at 88% -6rem, rgba(236, 182, 98, 0.14), transparent 62%),
    var(--vlak);
}

/* De gloed van de oude hero zou over het nieuwe licht heen vallen. */
.wereldvlak .gloed::before {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .wereldvlak {
    transition: background-color 500ms ease, color 500ms ease;
  }
}

/* — Twee kanten: de kaarten onder de hero —
   Bij Beide loopt hier het licht op; bij Binnen blijft het donker en volgt de
   overgang erna; bij Buiten is alles al licht. De kaarten zelf hebben een vaste
   ondergrond, zodat ze in elke stand leesbaar zijn. */
.kanten {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

html[data-wereld="beide"] .kanten,
html:not([data-wereld]) .kanten {
  background: linear-gradient(180deg, #1c2622 0%, #3f4a3f 22%, #a88d63 45%, #efe2cc 70%, #f7f5f1 92%);
}

html[data-wereld="binnen"] .wereldvlak + .overgang-binnen {
  display: block;
}

.overgang-binnen {
  display: none;
}

.kanten__rij {
  display: grid;
  gap: var(--maat-m);
}

@media (min-width: 44rem) {
  .kanten__rij {
    grid-template-columns: 1fr 1fr;
  }
}

.kant {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--rond);
  text-decoration: none;
  box-shadow: 0 24px 48px -30px rgba(28, 38, 34, 0.55);
}

.kant--buiten {
  background:
    radial-gradient(24rem 16rem at 100% 0%, rgba(236, 182, 98, 0.16), transparent 70%),
    #fff;
  color: #1d2733;
}

.kant--binnen {
  background:
    radial-gradient(24rem 16rem at 100% 0%, rgba(236, 182, 98, 0.22), transparent 70%),
    #1c2622;
  color: #f7f5f1;
  border: 1px solid rgba(247, 245, 241, 0.12);
}

.kant__label {
  font: 600 0.8rem/1 var(--font-tekst);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kant--buiten .kant__label { color: #a4571e; }
.kant--binnen .kant__label { color: #8fd0bf; }

.kant h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}

.kant p {
  margin: 0;
  opacity: 0.85;
}

.kant__verder {
  margin-top: auto;
  padding-top: var(--maat-s);
  font-weight: 600;
}

.kant--buiten .kant__verder { color: #a4571e; }
.kant--binnen .kant__verder { color: #ecb662; }

.kanten__raak {
  margin: var(--maat-m) auto 0;
  max-width: 40em;
  text-align: center;
  color: #46525f;
}

html[data-wereld="binnen"] .kanten__raak {
  color: var(--inkt-zacht);
}

/* — De strook onder de hero: waarom een team meer is dan een losse AI-hulp — */
.verschil {
  padding-block: 0 clamp(2rem, 5vw, 3rem);
}

.verschil__kaart {
  display: grid;
  gap: var(--maat-s);
  align-items: center;
  padding: var(--maat-m);
  border-radius: var(--rond);
  border: 1px solid var(--lijn);
  background: var(--wit);
}

@media (min-width: 52rem) {
  .verschil__kaart {
    grid-template-columns: auto 1fr;
  }
}

.verschil__kaart p {
  margin: 0;
  font-size: 1.08rem;
}

.verschil__koppen {
  display: flex;
}

.verschil__koppen img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--vlak);
  margin-left: -10px;
}

.verschil__koppen img:first-child {
  margin-left: 0;
}

.digitaal {
  font-size: 0.9rem;
  color: var(--inkt-zacht);
  margin-top: var(--maat-s);
}

/* — Status van een vaardigheid: eerlijk wat er al is — */
.stand {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--rond-label);
  font: 600 0.75rem/1.5 var(--font-tekst);
  white-space: nowrap;
}

.stand--kan { color: #2f7a4f; background: #e6f2ea; }
.stand--werk { color: #8a5300; background: #fbefd9; }
.stand--bouw { color: #2564d1; background: #e3ecfb; }

.kanten__knop {
  margin-top: var(--maat-m);
  text-align: center;
}

/* De lus is een stukje app: die houdt zijn eigen lichte tokens, ook op schaduw. */
.wereldvlak .loop {
  --vlak: #f7f5f1;
  --inkt: #1d2733;
  --inkt-zacht: #46525f;
  --wit: #fff;
  --lijn: #e4e0d8;
  --groen: #2e5e57;
  --groen-diep: #22463f;
  --acc-diep: #a4571e;
}

.wereldvlak .wereldknop {
  margin-bottom: var(--maat-m);
}

.kanten__raak a { color: #2e5e57; }
html[data-wereld="binnen"] .kanten__raak a { color: #8fd0bf; }

/* Op de telefoon: drie gelijke vakken op één rij, de toelichting eronder.
   Naast elkaar met "· meer klanten" erbij paste het niet en brak Binnen af
   naar een tweede regel (Wessel, 31 oktober 2026). */
@media (max-width: 34rem) {
  .wereldknop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border-radius: var(--rond-groep);
  }

  .wereldknop button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.45rem 0.3rem;
    border-radius: var(--rond-binnen);
    text-align: center;
  }

  .wereldknop button small {
    font-size: 0.72rem;
  }

  /* De punt hoort bij de zin op één regel; onder elkaar is hij ruis. */
  .wereldknop .punt {
    display: none;
  }
}