/* ============================================================
   bibliotheek.css, herontwerp van de gratis-downloadpagina
   (gratis-downloads.html). Prefix bib-.

   Uitgangspunt: dezelfde stem als de losse weggeverpagina's
   (weggever.css): gecentreerde hero met badge, echte omslagen en
   pagina's uit de gidsen, geen getekende covers, geen kaartenraster.
   De pagina is een gang met acht kleine hero's: per gids één rij
   die de landingspagina in het klein herhaalt.

   Opbouw: hero (kop + line-up van acht omslagen) → acht rijen →
   vragen → donker slotblok voor het complete pakket.
   ============================================================ */

.page--bib {
  --bib-paper-shadow: 0 40px 90px -30px rgba(4, 8, 16, 0.62);
  --bib-cover-shadow: 0 34px 70px -24px rgba(4, 8, 16, 0.7);
  /* de omslag die naar voren draait staat verder van de vloer af */
  --bib-cover-lift: 0 46px 80px -18px rgba(4, 8, 16, 0.82), -18px 24px 44px -28px rgba(4, 8, 16, 0.6);
}
[data-theme="light"] .page--bib {
  --bib-paper-shadow: 0 40px 90px -34px rgba(18, 30, 45, 0.34);
  --bib-cover-shadow: 0 34px 70px -26px rgba(18, 30, 45, 0.42);
  --bib-cover-lift: 0 46px 80px -20px rgba(18, 30, 45, 0.5), -18px 24px 44px -30px rgba(18, 30, 45, 0.34);
}

/* ============================================================
   1. HERO
   ============================================================ */
.subhero.bib-hero {
  text-align: center;
  padding-bottom: 0;
  /* lager dan de standaard subhero: de line-up moet nog in het eerste
     scherm vallen, dat is het beeld van de pagina. */
  padding-top: clamp(7rem, 5.5rem + 5vw, 10rem);
}
.bib-hero__head {
  position: relative;
  z-index: 1;
}

/* dezelfde pil als .wg-hero__badge op de weggeverpagina's */
.bib-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 auto;
  padding: 0.5em 1.1em 0.5em 0.9em;
  border-radius: 999px;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg-3) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 0 0 1px var(--glass-border),
    0 14px 34px -22px rgba(0, 0, 0, 0.5);
}
.bib-badge::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 0 0.26rem color-mix(in srgb, var(--accent-2) 20%, transparent);
}

/* de kop krijgt hier bewust de maat van de weggever-hero, niet die van
   .subhero h1 (die is smaller en linkslijnend). */
.subhero.bib-hero h1 {
  font-size: clamp(2.6rem, 1.3rem + 5vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 640;
  max-width: 17ch;
  margin: 0.7rem auto 0;
}
.subhero.bib-hero .lead {
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: -0.018em;
  /* 54ch: vanaf laptopbreedte staat de lead op twee regels, bij 46ch viel
     "één keer." los op een derde. 50ch was genoeg in Safari, maar Chrome
     zet SF Pro op 27px breder en brak vanaf 1440px weer af; 52ch was
     krap, 54ch geeft marge. pretty voorkomt op smallere schermen een los
     laatste woord. */
  max-width: 54ch;
  text-wrap: pretty;
  margin: clamp(1.1rem, 0.8rem + 1vw, 1.8rem) auto 0;
}
.bib-hero__act {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.bib-hero__act .btn {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  padding: 1.05em 2.1em;
}
.bib-hero__meta {
  margin: 1rem auto 0;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  letter-spacing: -0.01em;
}

/* ---------- de line-up: vijftien omslagen, acht per rij ----------
   Het beeld van de pagina. Vlak, gelijkmatig verdeeld, elk op zijn eigen
   schaduw, zoals een productlijn wordt getoond. Elke omslag is een link
   naar zijn rij verderop. Bij acht gidsen paste dat op één rij; bij
   veertien brak de rij in twee rijen van zeven. De vijftiende zou daar
   in zijn eentje op een derde rij belanden, dus staan er nu acht per
   rij: acht en zeven, en de omslagen houden hun volle maat. */
.bib-lineup {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.4rem, 1.5rem + 3vw, 4rem);
}
.bib-lineup__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  /* aan de kop uitlijnen, niet aan de voet: anders duwt een bijschrift dat
     over twee regels loopt zijn eigen omslag omhoog uit de rij */
  align-items: flex-start;
  --lineup-gap: clamp(0.9rem, 0.4rem + 1.6vw, 2rem);
  gap: var(--lineup-gap);
  /* Acht per rij, dus twee rijen. Het breken zit niet in deze max-width
     maar in de itembreedte verderop: die is een achtste van de track, dus
     de negende kán niet mee. De max-width houdt alleen de bovengrens vast,
     zodat acht omslagen van 128px (1024px plus zeven keer 2rem) precies
     uitkomen en niet verder uit elkaar gaan staan. De rijen staan verder
     uit elkaar dan de omslagen naast elkaar, anders lezen ze als één vlak
     in plaats van als twee planken. */
  flex-wrap: wrap;
  row-gap: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
  max-width: min(100% - 2 * var(--gutter), 78rem);
  margin-inline: auto;
}
.bib-lineup__item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(88px, 5vw + 44px, 128px);
}
/* De breedte hierboven mag krimpen zolang de bijschriften elkaar niet raken.
   Die staan op nowrap en steken uit in de tussenruimte, dus de ondergrens
   ligt bij de tekst, niet bij de omslagen. Het krapste paar is "ChatGPT
   Skills" naast "Ai-Website Blauwdruk" (88 + 130): dat vraagt 109px van hart
   tot hart. Met acht per rij, en met de twee regels hieronder, blijft er
   vanaf 1024px minstens 13px tussen twee namen (1440px: 48px). Meet het met
   een Range over de tekst als er een naam bij komt. Onder 1024px wordt het
   krapper en gaat de rij over in de strook. */
@media (min-width: 1024px) {
  .bib-lineup__item {
    /* een achtste van de track, min de zeven tussenruimtes: zo staan er
       altijd acht op een rij, hoe breed het venster ook is. De max-width
       houdt de omslag op zijn eigen maat als er meer ruimte is dan nodig. */
    flex: 0 0 calc((100% - 7 * var(--lineup-gap)) / 8);
    width: auto;
    max-width: 128px;
    min-width: 0;
  }
  /* Een bijschrift dat breder is dan zijn omslag steekt alleen naar rechts
     uit: text-align: center centreert geen regel die overloopt. Met acht
     per rij schoof "Ai-Website Blauwdruk" zo tot 4px tegen "Higgsfield"
     aan. Een vak dat aan beide kanten 3rem breder is dan het item houdt
     elke naam op het hart van zijn eigen omslag. */
  .bib-lineup__name {
    margin-inline: -3rem;
  }
}
/* Net boven de strook is ook symmetrisch nog te krap: "ChatGPT Skills" en
   "Ai-Website Blauwdruk" houden op 1024px 8px tussenruimte. Daar heet de
   gids hier "Website Blauwdruk", net als op de telefoon; vanaf 1100px
   staat zijn volle naam er weer. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .bib-lineup__ai {
    display: none;
  }
}
.bib-lineup__item a {
  display: block;
  text-decoration: none;
  color: var(--ink-soft);
  text-align: center;
  border-radius: 10px;
  transition: color var(--dur-1);
}
.bib-lineup__item a:hover,
.bib-lineup__item a:focus-visible {
  color: var(--ink);
}
.bib-lineup__item a:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 6px;
}
/* de omslag zelf: een wrapper om het beeld, zodat beeld en schaduw als
   één ding meedraaien */
.bib-lineup__cover {
  position: relative;
  display: block;
  border-radius: clamp(5px, 0.5vw, 8px);
  transform-origin: 50% 60%;
  transition:
    transform var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
}
/* schaduw en vulling op het beeld zelf, zodat ze meedraaien als het
   beeld zwaait en er geen stille rechthoek achterblijft */
.bib-lineup__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  box-shadow: var(--bib-cover-shadow);
  background: var(--bg-3);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
/* Elk bijschrift op één regel, ook als het breder is dan zijn omslag: het
   loopt dan uit in de tussenruimte. "Ai-Website Blauwdruk" heeft 130px
   nodig en het item is er 116, dus het steekt 7px aan elke kant uit in een
   gat van 29px. Dat kan bij alle negen: de wijdste buren staan 118px van
   hart tot hart en vragen samen 104px, ook op de smalste breedte. Twee
   dingen worden hier gelijk van: geen enkel bijschrift valt nog over twee
   regels, en het teken "nieuw" hangt daardoor bij beide gidsen op dezelfde
   hoogte zonder dat er hoogte gereserveerd hoeft te worden. */
.bib-lineup__name {
  display: block;
  white-space: nowrap;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-weight: 500;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
/* Hetzelfde merkteken als bij de rijen verderop en als "Flagship" in de
   menubalk, maar op zakformaat. Het zit binnen .bib-lineup__name, niet
   ernaast: zo erft het de hele hover-choreografie van het bijschrift
   (dimmen naar 0.4, het gekozen bijschrift zakt 6px) zonder dat daar een
   regel bij hoeft. width: max-content houdt het vak zo breed als het
   woord, anders verft --grad-text over de volle 128px van het item en
   houdt het woord alleen de eerste tint over. */
.bib-lineup__new {
  display: block;
  width: max-content;
  margin: 0.3rem auto 0;
  font-size: clamp(0.55rem, 0.52rem + 0.1vw, 0.6rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Op de telefoon heet deze gids in de line-up "Website Blauwdruk". Het
   bijschrift loopt daar uit in een tussenruimte van 14px, en dat is de
   krapste plek van de hele rij: met "Ai-" erbij houden de twee bijschriften
   10px van elkaar, eraf 18px. Alleen dit bijschrift verandert; de kop van
   de rij verderop en de gidspagina zelf houden hun volle naam. Met
   display: none leest een schermlezer op de telefoon hetzelfde als wat er
   staat, in plaats van een naam die je niet ziet. */
@media (max-width: 767px) {
  .bib-lineup__ai {
    display: none;
  }
}

/* de basis, overal: een klein stapje omhoog */
.bib-lineup__item a:hover .bib-lineup__cover,
.bib-lineup__item a:focus-visible .bib-lineup__cover {
  transform: translateY(-8px);
}

/* Met een muis op een breed venster wordt dat stapje het moment van de
   pagina: de omslag zwaait uit de rij naar je toe, ruim een derde groter,
   en kantelt mee met waar je muis staat (bibliotheek.js zet --rx/--ry).
   De andere zeven leunen van hem weg en dimmen,
   als een rek dat opengaat. Zonder JS staat hij op een vaste schuine
   hoek. Op smalle vensters schuift de rij zijwaarts en zou de omslag
   tegen de rand van die strook worden afgeknipt: daar blijft het stapje. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .bib-lineup__item a {
    /* per omslag een eigen vluchtpunt; één perspectief over de hele rij
       zou de buitenste acht schever zetten dan de middelste */
    perspective: 900px;
  }
  .bib-lineup__cover {
    will-change: transform;
  }
  /* de omslag die naar voren komt hoort over zijn buren heen */
  .bib-lineup__item:hover,
  .bib-lineup__item:has(a:focus-visible) {
    z-index: 3;
  }
  .bib-lineup__item:hover .bib-lineup__cover,
  .bib-lineup__item a:focus-visible .bib-lineup__cover {
    transform: translateY(-26px) rotateY(var(--ry, 16deg)) rotateX(var(--rx, -8deg)) scale(1.34);
  }
  .bib-lineup__item:hover .bib-lineup__cover img,
  .bib-lineup__item a:focus-visible .bib-lineup__cover img {
    box-shadow:
      var(--bib-cover-lift),
      0 34px 90px -12px var(--accent-glow);
  }
  /* het instapmoment: de omslag staat een kwartslag van je af en zwaait
     naar je toe, met een veertje aan het eind; daarna volgt hij de muis.
     De zwaai zit op de losse rotate-eigenschap, niet in transform: zo
     loopt hij naast de kanteling in plaats van eroverheen, en draaien
     beeld en schaduw als één ding mee. */
  .bib-lineup__item:hover .bib-lineup__cover,
  .bib-lineup__item a:focus-visible .bib-lineup__cover {
    animation: bib-swing 0.8s var(--ease-spring) both;
  }
  /* de buren: wie links van hem staat leunt naar links, wie rechts staat
     naar rechts, en allemaal een stap terug in het licht */
  .bib-lineup__track:has(.bib-lineup__item:hover) .bib-lineup__item:not(:hover) .bib-lineup__cover,
  .bib-lineup__track:has(a:focus-visible) .bib-lineup__item:not(:has(a:focus-visible)) .bib-lineup__cover {
    opacity: 0.5;
    filter: saturate(0.55);
  }
  .bib-lineup__item:has(~ .bib-lineup__item:hover) .bib-lineup__cover,
  .bib-lineup__item:has(~ .bib-lineup__item a:focus-visible) .bib-lineup__cover {
    transform: rotateY(28deg) translateX(-8px) scale(0.92);
  }
  .bib-lineup__item:hover ~ .bib-lineup__item .bib-lineup__cover,
  .bib-lineup__item:has(a:focus-visible) ~ .bib-lineup__item .bib-lineup__cover {
    transform: rotateY(-28deg) translateX(8px) scale(0.92);
  }
  /* de bijschriften: het gekozen blijft staan, de rest wijkt */
  .bib-lineup__track:has(.bib-lineup__item:hover) .bib-lineup__name,
  .bib-lineup__track:has(a:focus-visible) .bib-lineup__name {
    opacity: 0.4;
  }
  .bib-lineup__item:hover .bib-lineup__name,
  .bib-lineup__item a:focus-visible .bib-lineup__name {
    opacity: 1;
    transform: translateY(6px);
  }

  @keyframes bib-swing {
    from {
      rotate: y -42deg;
      translate: 0 0 -36px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bib-lineup__item:hover .bib-lineup__cover,
    .bib-lineup__item a:focus-visible .bib-lineup__cover {
      animation: none;
    }
    .bib-lineup__item:hover .bib-lineup__cover,
    .bib-lineup__item a:focus-visible .bib-lineup__cover {
      transform: translateY(-8px) scale(1.08);
    }
    .bib-lineup__item:has(~ .bib-lineup__item:hover) .bib-lineup__cover,
    .bib-lineup__item:hover ~ .bib-lineup__item .bib-lineup__cover,
    .bib-lineup__item:has(~ .bib-lineup__item a:focus-visible) .bib-lineup__cover,
    .bib-lineup__item:has(a:focus-visible) ~ .bib-lineup__item .bib-lineup__cover {
      transform: none;
      opacity: 1;
      filter: none;
    }
    .bib-lineup__name {
      transform: none !important;
    }
  }
}

/* de vloer: één zachte streep waar de rij op staat */
.bib-lineup::after {
  content: "";
  display: block;
  height: 1px;
  margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) auto 0;
  max-width: min(100% - 2 * var(--gutter), 60rem);
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* Zodra de rij een strook wordt, gaat diezelfde streep werk doen. De strook
   heeft geen scrollbalk (die is expres verborgen), dus zonder iets blijft
   alleen de halve omslag over om te vertellen hoe ver je bent. De vloer
   wordt daarom de baan en er rijdt een merkgradient overheen: hij zegt in
   één beeld dát er meer is én waar je zit. Bewust geen los icoontje erbij:
   de streep stond er al, en het teken van de homepage (een muis met een
   zakkend bolletje) wijst naar beneden terwijl je hier opzij veegt.
   De baan verliest zijn vervagende uiteinden, anders heeft de gradient
   geen vaste begin- en eindstreep om zich toe te verhouden. */
@media (max-width: 1023px) {
  .bib-lineup {
    /* wat er van de veertien ongeveer tegelijk in beeld staat */
    --bib-thumb: 0.26;
  }
  .bib-lineup::after {
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
  }
  .bib-lineup::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--gutter);
    width: calc((100% - 2 * var(--gutter)) * var(--bib-thumb));
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--grad-switch);
    background-origin: border-box;
  }
}

/* Het rijden zelf hangt aan de scrollpositie van de strook, niet aan een
   klok: geen scriptje en geen scroll-listener, dus ook niets dat kan
   haperen tijdens het vegen. Waar de browser dit niet kent blijft de
   gradient links op de baan staan; dat leest nog steeds als "je staat aan
   het begin van iets langers". Zonder deze @supports zou de animatie op de
   documenttijdlijn vallen en uit zichzelf heen en weer gaan lopen. */
@supports (animation-timeline: --bib-strip) {
  @media (max-width: 1023px) {
    .bib-lineup {
      timeline-scope: --bib-strip;
    }
    .bib-lineup__track {
      scroll-timeline: --bib-strip inline;
    }
    .bib-lineup::before {
      animation: bib-rail linear both;
      animation-timeline: --bib-strip;
    }
  }
}
@keyframes bib-rail {
  to {
    /* van links naar rechts over de baan: de rest van de baan, gerekend in
       eigen breedtes, want translateX rekent in de breedte van het ding zelf */
    transform: translateX(calc((1 - var(--bib-thumb)) / var(--bib-thumb) * 100%));
  }
}

/* het enige ongevraagde moment: de rij komt bij het laden omhoog, één
   omslag na de andere. */
.has-js[data-motion="on"] .bib-lineup__item {
  animation: bib-rise 0.9s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.06s + 0.25s);
}
@keyframes bib-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-js[data-motion="on"] .bib-lineup__item {
    animation: none;
  }
}

/* Smal: de rij wordt een strook die je zijwaarts schuift. De grens lag op
   900px bij negen gidsen en op 1280px bij tien op één rij. Nu de veertien
   over twee rijen van zeven staan, past het gecentreerde blok vanaf 1024px;
   daaronder vallen de omslagen buiten de marges en lopen de bijschriften
   over elkaar. De strook is dus geen noodgreep maar gewoon de vorm die de
   rij aanneemt zodra hij niet meer in beeld past. */
@media (max-width: 1023px) {
  .bib-lineup__track {
    justify-content: flex-start;
    /* terug naar één doorlopende strook: niet wikkelen, en de gutter weer
       als padding in plaats van als max-width */
    flex-wrap: nowrap;
    max-width: none;
    padding: 0 var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bib-lineup__track::-webkit-scrollbar {
    display: none;
  }
  .bib-lineup__item {
    scroll-snap-align: start;
    /* Drie omslagen plus de helft van de vierde. Die halve omslag is wat
       vertelt dat de strook doorloopt: een kaart die zichtbaar is
       afgesneden leest als "hier komt meer", waar een streepje van 7px
       (wat een vaste 104px hier opleverde) als een randje leest. De
       breuk 3.5 rekent mee met de vensterbreedte, dus de halve omslag
       blijft staan op elke telefoon. De gutter telt hier mee op: de
       rechterpadding van een scrollstrook knipt niets af, je kijkt er
       gewoon doorheen, dus de zichtbare ruimte is een gutter breder dan
       de 100% waar deze breuk tegenaan rekent. */
    width: min(168px, calc((100% + var(--gutter) - 3 * var(--lineup-gap)) / 3.5));
  }
  .bib-lineup__item:last-child {
    /* anders eindigt de strook strak tegen de rand */
    margin-right: var(--gutter);
  }
  /* In de strook staan de omslagen dichter op elkaar dan op de brede rij,
     en dan gaan bijschriften op nowrap elkaar raken: het krapste paar
     ("ChatGPT Blueprint" naast "27 Ai Use-Cases") vraagt 104px van hart tot
     hart en er is er hier 105. In plaats van de omslagen daarvoor kleiner
     te maken mag de naam hier gewoon afbreken. Twee regels staan altijd
     gereserveerd, ook voor een naam die er één nodig heeft: zo hangt
     "Nieuw" bij elke gids op dezelfde hoogte, wat op de brede rij de reden
     was om juist niet af te breken. */
  .bib-lineup__name {
    white-space: normal;
    /* "Nieuw" staat binnen dit vak en zakt dus mee met een naam die
       afbreekt. Een kolom met een vaste hoogte (twee regels naam plus de
       badge) en margin-top: auto duwt het merkteken naar de onderrand, zo
       hangt het bij alle veertien op dezelfde hoogte, of de naam nu één of
       twee regels nodig heeft. */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 3.7em;
  }
  .bib-lineup__new {
    margin-top: auto;
  }
}

/* Vanaf een tablet passen er vijf naast elkaar plus de halve zesde. Zonder
   deze stap loopt de deling van hierboven tegen zijn bovengrens aan en
   landt er op 768px toevallig net een hele omslag op de rand: dan is de
   halve omslag weg en vertelt niets meer dat de strook doorloopt. De
   bovengrens van 168px is zo gekozen dat geen van beide banden hem raakt,
   want zodra hij bijt is de halve omslag weer los zand. */
@media (min-width: 640px) and (max-width: 1023px) {
  .bib-lineup__item {
    width: min(168px, calc((100% + var(--gutter) - 5 * var(--lineup-gap)) / 5.5));
  }
}

/* ============================================================
   2. DE RIJEN: één gids per rij, afwisselend links en rechts.
   Geen kaart, geen rand; alleen een hairline tussen twee rijen,
   want dit is een lijst.
   ============================================================ */
.bib-list.section {
  /* de vloerlijn van de line-up is al een overgang; de volle sectiemarge
     erbovenop laat een gat vallen */
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 7rem);
}
.bib-list .container {
  max-width: 1120px;
}
.bib-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  padding-block: clamp(3.2rem, 2rem + 4.5vw, 6.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.bib-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.bib-row:last-child {
  padding-bottom: 0;
}
/* om en om: even rijen zetten het beeld rechts */
.bib-row:nth-child(even) {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.bib-row:nth-child(even) .bib-row__visual {
  order: 2;
}

/* ---------- omslag met twee echte pagina's erachter ---------- */
.bib-row__visual {
  display: flex;
  justify-content: center;
}
.bib-fan {
  position: relative;
  display: block;
  width: min(100%, 420px);
  aspect-ratio: 10 / 9;
  margin: 0;
  border-radius: 12px;
  text-decoration: none;
}
.bib-fan img {
  position: absolute;
  display: block;
  height: auto;
  bottom: 0;
  border-radius: clamp(7px, 0.7vw, 11px);
  background: var(--bg-3);
  transition: transform var(--dur-2) var(--ease-out);
}
.bib-fan__cover {
  left: 50%;
  width: 52%;
  z-index: 3;
  transform: translateX(-50%);
  box-shadow: var(--bib-cover-shadow);
}
.bib-fan__p {
  width: 44%;
  z-index: 1;
  box-shadow: var(--bib-paper-shadow);
  transform-origin: 50% 100%;
}
.bib-fan__p--l {
  left: 6%;
  transform: translateY(-4%) rotate(-8deg);
}
.bib-fan__p--r {
  right: 6%;
  transform: translateY(-4%) rotate(8deg);
}
/* op hover schuiven de pagina's iets verder open: de waaier van de
   landingspagina in het klein */
.bib-fan:hover .bib-fan__p--l,
.bib-fan:focus-visible .bib-fan__p--l {
  transform: translateX(-6%) translateY(-6%) rotate(-11deg);
}
.bib-fan:hover .bib-fan__p--r,
.bib-fan:focus-visible .bib-fan__p--r {
  transform: translateX(6%) translateY(-6%) rotate(11deg);
}
.bib-fan:hover .bib-fan__cover,
.bib-fan:focus-visible .bib-fan__cover {
  transform: translateX(-50%) translateY(-3%);
}
.bib-fan:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 8px;
}

/* ---------- tekst ---------- */
.bib-row__copy {
  max-width: 34rem;
}
.bib-row__name {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 640;
  color: var(--ink);
  text-wrap: balance;
}
/* Het teken "nieuw" is hetzelfde merkteken als "Flagship" in de menubalk
   (.nav__flag in layout.css): verlopende hoofdletters, geen gevulde pil.
   Het staat als opschrift bóven de kop, niet erachter. Achter de titel was
   het een sticker die met de kop om aandacht vocht; op een eigen regel leest
   het als rubriek en houdt de kop de kop (Mika, 9 september 2026). Vier
   plekken lagen naast elkaar: op het omslag botst het tegen het logo
   linksboven, rechts uitgelijnd valt het buiten de tekstkolom, en achter de
   haaklijn hangt het in de lucht omdat die regel op een punt eindigt.
   width: max-content is hier het hele punt en geen detail: als blok van
   100% breed verft --grad-text over 491px en krijgt het woord van 90px
   alleen de eerste tint mee, dus lichtblauw in plaats van een verloop. Zo
   breed als het woord loopt hetzelfde verloop erover als in de menubalk.
   Het zit binnen de <h2>, dus een schermlezer leest "Nieuw Ai-Website
   Blauwdruk" als één kop. De ruimte eronder komt uit de eigen margin;
   de kop zelf is daarom weer een gewoon blok, zonder flex en gap.
   Gewicht 800 op beide breedtes, en de maat loopt met het scherm mee in
   plaats van met de kop: op 0.3em van een kop van 27px werd het 9px en
   verdween het verloop. grad-words.js laat dit staan: één woord wordt niet
   in losse woord-spans geknipt. */
.bib-new {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 clamp(0.5rem, 0.4rem + 0.3vw, 0.8rem);
  padding: 0;
  border-radius: 0;
  font-size: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.bib-row__hook {
  margin: clamp(0.8rem, 0.6rem + 0.6vw, 1.1rem) 0 0;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}
.bib-row__desc {
  margin: clamp(0.7rem, 0.5rem + 0.5vw, 1rem) 0 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
}
.bib-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  margin-top: clamp(1.3rem, 1rem + 1vw, 1.9rem);
}
.bib-row__meta {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  letter-spacing: -0.01em;
}

@media (max-width: 820px) {
  .bib-row,
  .bib-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 1rem + 3vw, 2.6rem);
    text-align: center;
  }
  .bib-row:nth-child(even) .bib-row__visual {
    order: 0;
  }
  .bib-fan {
    width: min(100%, 340px);
  }
  .bib-row__copy {
    margin-inline: auto;
  }
  .bib-row__foot {
    justify-content: center;
  }
  .bib-new {
    margin-inline: auto;
  }
  .bib-row__desc {
    margin-inline: auto;
  }
}

/* ============================================================
   3. VRAGEN: het FAQ-onderdeel uit pages.css, gecentreerde kop
   ============================================================ */
.bib-head {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.bib-head .h2 {
  text-wrap: balance;
}
.bib-faq .faq__a a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.bib-faq .faq__a a:hover {
  color: var(--accent-deep);
  border-color: currentColor;
}

/* ============================================================
   4. SLOT: het complete pakket. Hetzelfde donkere blok als het
   slot van elke weggever (.wg-close), met bovenin een stapel
   van de zeven omslagen die in het pakket zitten.
   ============================================================ */
.bib-outro {
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.bib-close {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(168deg, #101827, #05070c 62%);
  border: 1px solid var(--line-strong);
  --grad-text: var(--grad-text-dark);
  color: var(--ink-invert);
  padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  text-align: center;
}
.bib-close::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  background: radial-gradient(44% 50% at 50% 18%, rgba(102, 198, 255, 0.5), transparent 66%),
    radial-gradient(36% 42% at 80% 4%, rgba(79, 147, 255, 0.42), transparent 68%);
  pointer-events: none;
}
.bib-close > * {
  position: relative;
}
.bib-close h2 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) auto 0;
  color: #f4f7fb;
}
.bib-close p {
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: rgba(238, 243, 249, 0.66);
  max-width: 40ch;
}
.bib-close__act {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.bib-close__act .btn {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  padding: 1.05em 2.1em;
}
.bib-close__fine {
  font-size: var(--fs-small);
  color: rgba(238, 243, 249, 0.45);
}

/* de stapel van vijftien: dicht op elkaar, elke omslag dekt zijn linkerbuur
   af zodat de titels (linksonder op de omslag) leesbaar blijven. Elke
   omslag krijgt in de HTML alleen --k mee, zijn plek vanaf het midden. */
.bib-stack {
  position: relative;
  height: clamp(130px, 8vw + 80px, 200px);
  margin: 0;
}
.bib-stack img {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: clamp(72px, 3.4vw + 50px, 104px);
  height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateX(var(--dx, 0)) translateY(var(--dy, 0)) rotate(var(--rot, 0deg));
  --dx: calc(var(--k, 0) * var(--stap, 46%));
  --rot: calc(var(--k, 0) * var(--draai, 3deg));
  --dy: calc(var(--k, 0) * var(--k, 0) * 0.5% - 3%);
  z-index: calc(var(--k, 0) + 8);
}
/* telefoon: alleen de middelste vijf */
@media (max-width: 700px) {
  .bib-stack { --stap: 58%; --draai: 6deg; }
  .bib-stack img:nth-child(-n + 5),
  .bib-stack img:nth-child(n + 11) {
    display: none;
  }
}