/*
  Opmaak voor de website: de homepagina en de losse pagina's Hoe het werkt,
  Functies, Prijzen en Veelgestelde vragen. Stond eerst in de <style> van
  welkom.html; nu apart, zodat elke pagina hem deelt en de browser hem maar
  één keer hoeft te laden. De app gebruikt style.css.
*/

/* Alleen wat de site extra nodig heeft. De rest komt uit style.css. */
.site { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.site h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 .6rem; text-wrap: balance; }
.sectie { padding: 3.5rem 0 1rem; scroll-margin-top: 5rem; }
.sectie-kop { max-width: 40rem; margin-bottom: 1.8rem; }
.sectie-kop p { color: var(--tekst-zacht); font-size: 1.08rem; margin: 0; }
.label { display: inline-block; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyaan); margin-bottom: .5rem; }

/* Navigatie in de kop */
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--tekst-zacht); text-decoration: none; font-size: .95rem; }
.nav a:hover, .nav a:focus-visible { color: var(--tekst); }
.kop-knoppen { display: flex; align-items: center; gap: .6rem; }
.kop-knoppen .btn, .kop-knoppen .btn-rand { text-decoration: none; }
.menu-knop { display: none; }
@media (max-width: 860px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--paneel); border-bottom: 1px solid var(--rand); padding: .4rem 1rem .8rem; }
  .nav a { padding: .7rem .2rem; border-bottom: 1px solid var(--rand-zacht); }
  .nav.open { display: flex; }
  .menu-knop { display: inline-flex; }
  .kop-knoppen .btn { display: none; }
}

/* Held */
.held { display: grid; gap: 2.5rem; align-items: center; padding: 3.5rem 0 2.5rem; }
@media (min-width: 900px) { .held { grid-template-columns: 1.1fr 1fr; padding: 5rem 0 3.5rem; } }
.held-titel { margin: 0 0 1rem; font-size: clamp(2.2rem, 5.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; color: var(--tekst); text-wrap: balance; }
.held-titel span { background: var(--verloop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held-lood { margin: 0 0 1.6rem; font-size: 1.18rem; line-height: 1.55; color: var(--tekst-zacht); max-width: 34rem; }
.held-knoppen { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.held-knoppen a { text-decoration: none; }
.held-klein { margin: 1rem 0 0; font-size: .88rem; color: var(--tekst-dof); max-width: 34rem; }

/* ---------- Het telefoonbeeld: de scanner, nagebouwd in HTML ----------

   Geen schermafbeelding die veroudert, maar de echte onderdelen van de app.
   Hij draait één scanronde af: de lijn loopt over de kaart, de hoeken klikken
   dicht en worden groen, en het label "herkend" verschijnt. Dat is precies wat
   de scanner doet, en het is het enige dat je aan een stand in vijf tellen
   kunt voordoen.

   De kaart in het kader is met opzet een verzonnen kaart. Een natekening van
   een bestaande kaart zou het werk en de merken van iemand anders op onze
   eigen verkooppagina zetten, en daar hebben we geen recht op. Wat het beeld
   moet uitstralen is glans, folie en diepte, en dat kan zonder.

   Eén cyclus van 3,2 seconden, en alles wat bij het vergrendelen hoort loopt
   op diezelfde duur, zodat de lijn, de hoeken en het label samenvallen. */

.telefoon { width: min(100%, 330px); margin: 0 auto; padding: 14px; border-radius: 34px; background: #0B1730; border: 1px solid var(--rand); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.tel-scherm { border-radius: 24px; overflow: hidden; background: var(--diep); border: 1px solid var(--rand-zacht); }
.tel-kop { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; font-size: .74rem; color: var(--tekst-dof); }
.tel-kop b { color: var(--zeker-hoog); font-weight: 600; }

.tel-cam {
  position: relative;
  aspect-ratio: 3 / 3.4;
  overflow: hidden;
  background: radial-gradient(72% 56% at 50% 42%, #16263f 0%, #070f20 68%, #040914 100%);
}
/* De lichtkegel van de lens, zodat het midden niet zo vlak is. */
.tel-cam::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(36% 28% at 50% 44%, rgba(28, 188, 252, .13), transparent 72%);
  pointer-events: none;
}

/* De kaart: zwarte rand, kunstvenster, tekstblok, folie en een glans die
   eroverheen loopt. Dat is wat een kaart onder een beurslamp doet. */
.tel-kaart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 47%;
  aspect-ratio: 63 / 88;
  padding: 6% 6% 5%;
  border-radius: 10px;
  background: linear-gradient(158deg, #2b3040 0%, #14181f 46%, #080a0f 100%);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, .66),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform: translate(-50%, -50%) rotate(-2.4deg);
  animation: tel-zweef 7s ease-in-out infinite;
}

/* Het kunstvenster. Vier lagen licht over elkaar geven de indruk van een
   geschilderde illustratie zonder er een te zijn. */
.tel-art {
  display: block;
  height: 54%;
  border-radius: 4px;
  background:
    radial-gradient(58% 44% at 32% 28%, rgba(255, 233, 176, .95), transparent 62%),
    radial-gradient(70% 56% at 68% 74%, rgba(255, 106, 48, .9), transparent 66%),
    radial-gradient(90% 70% at 50% 100%, rgba(126, 32, 96, .85), transparent 70%),
    linear-gradient(152deg, #ff9f3d 0%, #e0432c 48%, #5d1533 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 6px 14px rgba(255, 255, 255, .12);
}

/* Naambalk plus het tekstblok eronder: de vorm van een kaart, niet de inhoud. */
.tel-regels {
  display: block;
  margin-top: 7%;
  height: 30%;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .30) 0 42%, transparent 42%) top left / 100% 9% no-repeat,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .12) 0 1.5px, transparent 1.5px 5px) bottom left / 100% 76% no-repeat;
}

/* Folie: een regenboog die maar net zichtbaar is. Meer wordt speelgoed. */
.tel-folie {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  opacity: .2;
  mix-blend-mode: screen;
  background: conic-gradient(from 210deg at 40% 30%,
    #1cbcfc, #9952fa, #ff5f8f, #ffd166, #3dd9a0, #1cbcfc);
  pointer-events: none;
}

/* De glans die over de kaart trekt. Dit is wat "echt" verkoopt. */
.tel-glans {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
}
.tel-glans::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32) 48%, transparent);
  transform: rotate(14deg);
  animation: tel-glans-loop 3.2s ease-in-out infinite;
}

/* De zoeklijn van de scanner. */
.tel-scanlijn {
  position: absolute;
  left: 16%;
  right: 16%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cyaan), transparent);
  box-shadow: 0 0 14px 3px rgba(28, 188, 252, .55);
  animation: tel-scan 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
  pointer-events: none;
}

.tel-hoek {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cyaan);
  animation: tel-hoek-klik 3.2s ease-in-out infinite;
}
.tel-hoek.lb { left: 22%; top: 20%; border-right: 0; border-bottom: 0; }
.tel-hoek.rb { right: 22%; top: 20%; border-left: 0; border-bottom: 0; }
.tel-hoek.lo { left: 22%; bottom: 20%; border-right: 0; border-top: 0; }
.tel-hoek.ro { right: 22%; bottom: 20%; border-left: 0; border-top: 0; }

.tel-vlag {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(61, 217, 160, .16);
  border: 1px solid rgba(61, 217, 160, .55);
  color: var(--zeker-hoog);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  animation: tel-vlag-in 3.2s ease-in-out infinite;
}

@keyframes tel-zweef {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2.4deg) scale(1); }
  50%      { transform: translate(-50%, -51.5%) rotate(-1.2deg) scale(1.015); }
}
@keyframes tel-glans-loop {
  0%, 8%    { left: -60%; }
  55%, 100% { left: 135%; }
}
@keyframes tel-scan {
  0%      { top: 21%; opacity: 0; }
  8%      { opacity: 1; }
  62%     { top: 77%; opacity: 1; }
  72%     { top: 77%; opacity: 0; }
  100%    { top: 21%; opacity: 0; }
}
/* De hoeken klikken naar binnen en worden groen zodra de kaart vast is. */
@keyframes tel-hoek-klik {
  0%, 60%   { border-color: var(--cyaan); transform: scale(1); }
  70%, 92%  { border-color: var(--zeker-hoog); transform: scale(.88); }
  100%      { border-color: var(--cyaan); transform: scale(1); }
}
@keyframes tel-vlag-in {
  0%, 62%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  72%, 92%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100%      { opacity: 0; transform: translateX(-50%) translateY(4px); }
}

.tel-lijst { list-style: none; margin: 0; padding: .5rem .6rem .7rem; display: grid; gap: .35rem; }
.tel-lijst li { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--rand-zacht); border-radius: 8px; background: var(--paneel); font-size: .78rem; }
.tel-lijst li:first-child { border-color: rgba(28, 188, 252, .5); animation: tel-regel-in 3.2s ease-out infinite; }
.tel-lijst b { display: block; font-weight: 600; color: var(--tekst); }
.tel-lijst span { color: var(--tekst-dof); }
.tel-lijst em { font-style: normal; font-family: var(--cijfer-font); color: var(--tekst); align-self: center; }

/* De bovenste regel komt binnen op het moment dat de kaart vast klikt. */
@keyframes tel-regel-in {
  0%, 66%  { opacity: .72; transform: translateY(-4px); border-color: var(--rand-zacht); }
  76%      { opacity: 1; transform: translateY(0); border-color: rgba(61, 217, 160, .6); }
  100%     { opacity: 1; transform: translateY(0); border-color: rgba(28, 188, 252, .5); }
}

/*
  Wie beweging heeft uitgezet, krijgt het eindbeeld van de ronde te zien en
  niet het beginbeeld: kaart vast, hoeken groen, label erop. Een stilstaand
  beeld moet af zijn, niet halverwege.
*/
@media (prefers-reduced-motion: reduce) {
  .tel-kaart, .tel-glans::before, .tel-scanlijn, .tel-hoek, .tel-vlag,
  .tel-lijst li:first-child { animation: none; }
  .tel-scanlijn { display: none; }
  .tel-hoek { border-color: var(--zeker-hoog); }
  .tel-vlag { opacity: 1; }
}

/* Cijferstrook */
.strook { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.cijfer { padding: 1rem 1.1rem; border: 1px solid var(--rand); border-radius: 12px; background: var(--paneel); }
.cijfer-groot { display: block; font-family: var(--cijfer-font); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tekst); }
.cijfer-tekst { font-size: .85rem; color: var(--tekst-zacht); }

/* Stappen */
.stappen { display: grid; gap: .9rem; counter-reset: stap; }
@media (min-width: 720px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
.stap { position: relative; padding: 1.3rem 1.2rem 1.2rem 1.2rem; border: 1px solid var(--rand); border-radius: 14px; background: var(--paneel); }
.stap::before { counter-increment: stap; content: counter(stap); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cyaan); color: var(--diep); font-family: var(--cijfer-font); font-weight: 600; margin-bottom: .7rem; }
.stap h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.stap p { margin: 0; color: var(--tekst-zacht); font-size: .95rem; }

/* Functies */
.functies { display: grid; gap: .9rem; }
@media (min-width: 640px) { .functies { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .functies { grid-template-columns: repeat(3, 1fr); } }
.functie { padding: 1.2rem 1.2rem 1.1rem; border: 1px solid var(--rand); border-radius: 14px; background: var(--paneel); display: grid; gap: .35rem; align-content: start; }
.functie-teken { width: 34px; height: 34px; border-radius: 9px; background: rgba(28, 188, 252, .12); display: grid; place-items: center; margin-bottom: .3rem; }
.functie-teken svg { width: 18px; height: 18px; stroke: var(--cyaan); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.functie h3 { margin: 0; font-size: 1.05rem; }
.functie p { margin: 0; color: var(--tekst-zacht); font-size: .93rem; }

/* Voor wie + eerlijk */
.twee { display: grid; gap: 1rem; }
@media (min-width: 860px) { .twee { grid-template-columns: 1fr 1fr; } }
.vak { padding: 1.4rem 1.4rem 1.3rem; border: 1px solid var(--rand); border-radius: 14px; background: var(--paneel); }
.vak h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.vak ul { margin: 0; padding-left: 1.1rem; color: var(--tekst-zacht); }
.vak li { margin: .3rem 0; }
.vak-eerlijk { border-color: rgba(242, 180, 65, .45); }

/* Prijzen */
.prijzen { display: grid; gap: .9rem; }
@media (min-width: 720px) { .prijzen { grid-template-columns: repeat(3, 1fr); } }
.prijs { padding: 1.3rem 1.3rem 1.2rem; border: 1px solid var(--rand); border-radius: 14px; background: var(--paneel); display: grid; gap: .3rem; align-content: start; }
.prijs-uitgelicht { border-color: var(--cyaan); box-shadow: 0 0 0 1px rgba(28, 188, 252, .25), 0 20px 50px rgba(28, 188, 252, .08); }
.prijs-naam { font-family: var(--kop-font); font-size: 1.3rem; font-weight: 600; }
.prijs-bedrag { font-family: var(--cijfer-font); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prijs-bedrag small { font-size: .9rem; font-weight: 400; color: var(--tekst-dof); margin-left: .2rem; }
.prijs-voor { color: var(--tekst-zacht); font-size: .93rem; }
.prijs ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--tekst-zacht); font-size: .9rem; }
.prijs li { margin: .25rem 0; }
.prijs .btn, .prijs .btn-rand { margin-top: .9rem; text-decoration: none; text-align: center; }
.proef { margin-top: 1rem; padding: 1.1rem 1.3rem; border: 1px dashed var(--rand); border-radius: 12px; color: var(--tekst-zacht); font-size: .95rem; }
.proef strong { color: var(--tekst); }

/* Vragen */
.vragen { display: grid; gap: .5rem; max-width: 46rem; }
.vragen details { border: 1px solid var(--rand); border-radius: 12px; background: var(--paneel); padding: 0 1.1rem; }
.vragen summary { cursor: pointer; padding: .9rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: '+'; color: var(--cyaan); font-family: var(--cijfer-font); }
.vragen details[open] summary::after { content: '–'; }
.vragen details p { margin: 0 0 1rem; color: var(--tekst-zacht); }

/* Over */
/* "Over ons" staat ingeklapt onderaan; wie het wil lezen klikt. */
.over-uitklap { max-width: 46rem; }
.over-knop { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border: 1px solid var(--rand); border-radius: 16px; background: var(--paneel-hoog); font-size: 1.25rem; font-weight: 700; color: var(--tekst); }
.over-knop::-webkit-details-marker { display: none; }
.over-knop:hover { border-color: var(--cyaan); }
.over-knop:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; }
.over-pijl { width: .7rem; height: .7rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin-right: .3rem; flex: none; }
.over-uitklap[open] .over-pijl { transform: rotate(-135deg); }
.over-uitklap[open] .over-knop { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.over-uitklap[open] .over { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; }
.over { padding: 1.6rem 1.6rem 1.5rem; border: 1px solid var(--rand); border-radius: 16px; background: var(--paneel-hoog); display: grid; gap: .6rem; max-width: 46rem; }
.over p { margin: 0; color: var(--tekst-zacht); }
.over a { color: var(--cyaan); }

.slot { text-align: center; padding: 3.5rem 0 1rem; }
.slot h2 { margin-bottom: .5rem; }
.slot p { color: var(--tekst-zacht); margin: 0 0 1.4rem; }
.slot a.btn { text-decoration: none; }
/* Drie kolommen die bij elkaar blijven staan in het midden, in plaats van
   uitgesmeerd tot de schermranden. Op een smal scherm onder elkaar en
   gecentreerd, zodat de voettekst één blok blijft. */
.voet-kolommen { display: grid; gap: 1.4rem 3.5rem; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto 1.6rem; padding: 0 1.25rem; text-align: left; }
@media (max-width: 560px) { .voet-kolommen { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.voet-kolommen a { display: block; color: var(--tekst-zacht); text-decoration: none; font-size: .9rem; padding: .15rem 0; }
.voet-kolommen a:hover { color: var(--tekst); }
.voet-kolommen b { display: block; color: var(--tekst); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }


/* ---------- Losse pagina's ---------- */

.kruimels { font-size: .82rem; color: var(--tekst-dof); padding: 1.5rem 0 0; }
.kruimels a { color: var(--tekst-zacht); text-decoration: none; }
.kruimels a:hover { color: var(--cyaan); }

.paginakop { max-width: 40rem; padding: 1.2rem 0 .5rem; }
.paginakop h1 { font-family: var(--kop-font); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .6rem; text-wrap: balance; }
.paginakop-lood { font-size: 1.12rem; color: var(--tekst-zacht); margin: 0; }

.nav-actief { color: var(--tekst) !important; font-weight: 600; }

/* Kaarten naar de andere pagina's: houdt bezoekers en zoekmachines in beweging
   tussen de onderwerpen, in plaats van doodlopend op één pagina. */
.verder-rij { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.verder-rij-groot { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.verderkaart {
  display: grid; gap: .3rem; align-content: start;
  padding: 1.1rem 1.2rem; border: 1px solid var(--rand); border-radius: 14px;
  background: var(--paneel); text-decoration: none;
}
.verderkaart:hover { border-color: var(--cyaan); }
.verderkaart b { color: var(--tekst); font-size: 1.05rem; }
.verderkaart span { color: var(--tekst-zacht); font-size: .92rem; }
.verder h2 { font-size: 1.3rem; margin-bottom: .9rem; }