/* ===========================================================================
   /app — het dossier van de app.
   Leunt op tier.css voor de balk, de voettekst, de kleurwaarden en de
   getekende T. Hier staat alleen wat deze pagina eigen is.

   De drie schermen zijn natief nagebouwd, niet als afbeelding geplaatst: de
   aangeleverde screenshots zijn 400px breed op 1x en zouden op een scherm met
   hoge dichtheid zichtbaar zacht worden. Ze zijn opgemaakt op ware grootte
   (390px) en worden met een transform verkleind, zodat de letters vector
   blijven en op elke dichtheid scherp staan.
=========================================================================== */

body{ background: #0A0A0B; }

/* ----------------------------------------------------------------- kop */
.app-kop{ padding: 26px 0 8px; position: relative; overflow: hidden; }
.app-kop::before{
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 420px;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(var(--accent-rgb),.20), transparent 70%);
  pointer-events: none;
}
.app-kop .wrap{ position: relative; }

/* De sectiecode en de liniaal komen uit de app zelf: die zet ze boven elk
   scherm. Hier markeren ze de pagina als hetzelfde systeem. */
.app-sec{
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.app-sec .rechts{ margin-left: auto; color: var(--ink-faint); letter-spacing: .16em; }
.app-liniaal{
  height: 13px; margin: 10px 0 24px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.22) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 72%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 72%, transparent 100%);
}
.app-liniaal.rood{
  background:
    repeating-linear-gradient(90deg,
      rgba(var(--accent-rgb),.55) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg,
      rgba(var(--accent-rgb),.22) 0 1px, transparent 1px 3px);
}

/* ------------------------------------------------------- coming soon */
.app-status{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(var(--accent-rgb),.42);
  border-radius: 100px;
  background: rgba(var(--accent-rgb),.07);
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 26px;
}
.app-status b{ font-weight: 400; color: var(--ink-faint); }
.app-status .waarde{ color: var(--accent); }
.app-status .streep{ color: rgba(255,255,255,.22); }
.app-status-stip{
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55);
  animation: appPols 2.4s ease-out infinite;
}
@keyframes appPols{
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}

.app-titel{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.app-titel em{ font-style: normal; color: var(--accent); }
.app-lead{
  max-width: 560px; font-size: 15px; line-height: 1.65; color: var(--ink-dim);
  margin: 0 0 30px;
}
/* Het verschil tussen huren en bezitten hoort op deze pagina te staan, niet
   alleen in de voorwaarden. */
.app-onderscheid{
  margin-top: -16px; padding-left: 14px;
  border-left: 2px solid rgba(var(--accent-rgb),.5);
  color: var(--ink);
}

/* De nagebouwde telefoonschermen stonden hier (.toestel, .sch-*). Die zijn
   vervangen door de echte schermopnames, dus deze regels deden niets meer. */

/* ------------------------------------------------------ specificaties */
.app-spec{ padding: 46px 0 10px; border-top: 1px solid var(--line); }
.app-spec h2{
  font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em; margin: 0 0 6px;
}
.app-spec .toelichting{
  font-size: 13px; color: var(--ink-faint); margin: 0 0 22px; max-width: 560px;
}
.app-tabel{ border-top: 1px solid var(--line); }
.app-rij-spec{
  display: grid; grid-template-columns: 190px 1fr; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.app-rij-spec dt{
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.app-rij-spec dd{ margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; }
.app-rij-spec dd .later{ color: var(--ink-faint); }

/* ------------------------------------------------------------ socials */
.app-volg{
  margin: 52px 0 10px; padding: 40px 28px 42px; text-align: center;
  border: 1px solid var(--line); border-radius: 2px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(var(--accent-rgb),.09), transparent 70%);
}
.app-volg .kop{
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.app-volg h2{
  font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 10px; letter-spacing: -0.01em;
}
.app-volg h2 em{ color: var(--accent); }
.app-volg p{ max-width: 460px; margin: 0 auto 24px; font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
.app-volg-cta{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 30px 16px 26px;
  border: 1px solid var(--line-strong); border-radius: 100px;
  text-decoration: none; color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.app-volg-cta:hover{
  border-color: var(--accent);
  box-shadow: 0 8px 28px var(--accent-glow);
  transform: translateY(-1px);
}
.app-volg-glyph{ width: 27px; height: 27px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.app-volg-glyph .vol{ fill: currentColor; stroke: none; }
.app-volg-cta:hover .app-volg-glyph{ stroke: var(--accent); }
.app-volg-naam{ font-family: var(--mono); font-size: clamp(16px, 1.6vw, 21px); letter-spacing: 1px; font-weight: 700; }
.app-volg-naam .t{ color: var(--accent); }
.app-volg-cta .p{ font-family: var(--mono); color: var(--ink-faint); transition: transform .2s ease, color .2s ease; }
.app-volg-cta:hover .p{ transform: translateX(4px); color: var(--accent); }

/* -------------------------------------------------------------- smal */
@media (max-width: 640px){
  .app-kop{ padding-top: 14px; }
  .app-rij-spec{ grid-template-columns: 1fr; gap: 5px; }
  .app-volg{ padding: 32px 20px 34px; }
}
@media (prefers-reduced-motion: reduce){
  .app-status-stip{ animation: none; }
}

/* ================================================================
   APP-PAGINA
   ================================================================ */

/* ---------------------------------------------------- filmische lagen
   Dezelfde behandeling als de homepage: vignet, korrel, scanlijnen en de
   rode hoekmarkeringen. Zonder deze lagen staat deze pagina als enige van
   de site op kaal zwart en leest hij als een document in plaats van als
   onderdeel van het merk. */
.laag-vignet, .laag-korrel, .laag-scan, .laag-hud{
  position: absolute; inset: 0; pointer-events: none;
}
.laag-vignet{
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 32%, rgba(4,5,10,.88) 92%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(var(--accent-rgb),.10) 0%, transparent 60%);
}
.laag-korrel{
  z-index: 3; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.laag-scan{
  z-index: 4;
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px,
    transparent 1px, transparent 3px);
}
.laag-hud{ inset: 24px; z-index: 5; }
.laag-hud::before, .laag-hud::after,
.laag-hud > i::before, .laag-hud > i::after{
  content: ''; position: absolute; width: 24px; height: 24px;
  border-color: var(--accent); border-style: solid; opacity: .5;
}
.laag-hud::before{ top: 0; left: 0; border-width: 1px 0 0 1px; }
.laag-hud::after{ top: 0; right: 0; border-width: 1px 1px 0 0; }
.laag-hud > i::before{ bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.laag-hud > i::after{ bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* ---------------------------------------------------- het toestel
   De schermopname zit in een echt frame: behuizing met een metalen rand,
   glas, een uitsparing bovenin en een glans er schuin overheen. Zonder dat
   leest een screenshot als een plaatje; mét frame als een telefoon.
   --ar is de verhouding van de opname zelf, want de drie zijn niet exact
   even hoog; zo wordt er nooit iets weggesneden. */
.fon{
  --w: 268px;
  --r: calc(var(--w) * .135);
  position: relative; width: var(--w); flex: none;
  border-radius: var(--r);
  padding: calc(var(--w) * .035);
  background:
    linear-gradient(152deg,
      #43434C 0%, #1B1B21 16%, #0E0E12 40%,
      #121217 62%, #35353E 82%, #0D0D11 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.14),
    inset 0 -1px 1px rgba(255,255,255,.05),
    0 34px 70px -22px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.06);
}
/* De gloed die het toestel van de achtergrond tilt. */
.fon::before{
  content: ''; position: absolute; z-index: -1;
  inset: 6% -16% -10%;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(var(--accent-rgb), .20) 0%, rgba(var(--accent-rgb), .07) 38%, transparent 72%);
  filter: blur(34px);
}
.fon-glas{
  position: relative; overflow: hidden; background: #0A0A0B;
  border-radius: calc(var(--r) - var(--w) * .028);
  aspect-ratio: var(--ar, 382 / 804);
}
.fon-glas img{
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
/* Glans schuin over het glas, zoals licht op een scherm. */
.fon-glas::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(116deg,
    rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 14%,
    rgba(255,255,255,.01) 26%, transparent 42%);
}
.fon-kerf{
  position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%);
  width: 34%; height: calc(var(--w) * .062);
  background: #0A0A0B;
  border-radius: 0 0 calc(var(--w) * .045) calc(var(--w) * .045);
}

/* ---------------------------------------------------- de kop */
.app-held{
  position: relative; overflow: hidden;
  padding: 30px 0 62px;
  background:
    radial-gradient(ellipse 90% 70% at 72% 40%, rgba(var(--accent-rgb),.08) 0%, transparent 62%),
    var(--bg);
}
.app-held-in{
  position: relative; z-index: 6;
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(30px, 5vw, 76px); align-items: center;
}
.app-held-tekst{ max-width: 46ch; }
.app-titel{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4.1rem); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 20px;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.app-titel em{ font-style: normal; color: var(--accent); }
.app-lead{
  margin: 0 0 15px; font-size: 15.5px; line-height: 1.62; color: var(--ink-dim);
}
.app-onderscheid{
  border-left: 2px solid var(--accent);
  padding-left: 15px; color: var(--ink); font-size: 14px;
}
.app-naar{
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px solid var(--line-strong, #2E2D2C); padding-bottom: 7px;
  transition: color .2s ease, border-color .2s ease;
}
.app-naar:hover{ color: var(--accent); border-color: var(--accent); }

/* de status */
.app-staat{
  display: inline-flex; align-items: center; gap: 11px; margin: 0 0 24px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim);
}
.app-staat b{ font-weight: 400; color: var(--ink); }
.app-staat-deel{ width: 1px; height: 11px; background: var(--line-strong, #2E2D2C); }
.app-staat-stip{
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #C9C3BD; animation: appAdem 3.4s ease-in-out infinite;
}
@keyframes appAdem{ 0%,100%{ opacity: .35 } 50%{ opacity: 1 } }

.fon-held{ --w: 300px; }

/* ---------------------------------------------------- het podium
   Drie toestellen met diepte: het middelste vooraan en rechtop, de twee
   buitenste naar achteren gekanteld, kleiner en gedempt. Zo leest de rij
   als één opstelling en niet als drie losse plaatjes. */
.app-podium{
  position: relative; overflow: hidden;
  padding: 64px 0 72px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 58% at 50% 46%, rgba(var(--accent-rgb),.07) 0%, transparent 66%),
    var(--bg);
}
.app-podium-kop{
  position: relative; z-index: 6; text-align: center; margin-bottom: 44px;
}
.app-podium-kop .et{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 11px;
}
.app-podium-kop h2{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0;
}
.app-podium-rij{
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
.app-podium-rij .fon{ --w: 244px; }
.app-podium-rij .zij{
  --w: 216px; opacity: .84; z-index: 1;
}
/* Weinig overlap: bij -34px dekte het middelste toestel de helft van de
   buitenste af en was "Choose your schedule" halverwege afgesneden. De
   draaiing geeft de diepte, niet het over elkaar schuiven. */
.app-podium-rij .links{
  transform: rotateY(15deg) translateY(18px); margin-right: -6px;
  transform-origin: right center;
}
.app-podium-rij .rechts{
  transform: rotateY(-15deg) translateY(18px); margin-left: -6px;
  transform-origin: left center;
}
.app-podium-rij .midden{ z-index: 3; }
.app-podium-namen{
  position: relative; z-index: 6;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 760px; margin: 38px auto 0; text-align: center;
}
.app-podium-namen b{
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  font-weight: 400; margin-bottom: 6px;
}
.app-podium-namen span{ font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }

/* ---------------------------------------------------- de stappen
   Grote nummers als grafisch element, met een doorlopende lijn erlangs.
   Eén regel per stap: scanbaar in tien seconden. */
.app-stappen{
  position: relative; overflow: hidden;
  padding: 58px 0 64px; border-top: 1px solid var(--line);
}
.app-stappen > .wrap{ position: relative; z-index: 6; }
.app-blok-nr{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.app-stappen-kop{
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.05;
  letter-spacing: -0.025em; margin: 0 0 44px;
}
.app-stappen-kop em{ font-style: normal; color: var(--accent); }

.app-stappenlijst{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(22px, 3.4vw, 48px); row-gap: 46px;
}
.app-stappenlijst li{ position: relative; padding-top: 22px; }
/* De lijn boven elke stap, met een rood segment dat de stap markeert. */
.app-stappenlijst li::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.app-stappenlijst li::after{
  content: ''; position: absolute; top: 0; left: 0; width: 26px; height: 1px;
  background: var(--accent);
}
.app-stappenlijst .nr{
  display: block; font-family: var(--display); font-weight: 900;
  font-size: 40px; line-height: 1; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.36);
  margin-bottom: 14px;
}
.app-stappenlijst h3{
  font-family: var(--display); font-weight: 900; font-size: 20px;
  letter-spacing: -0.015em; margin: 0 0 8px;
}
.app-stappenlijst p{
  margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--ink-dim);
}
.app-stappenlijst p em{ font-style: normal; color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------- goed om te weten */
.app-weten{ padding: 50px 0 54px; border-top: 1px solid var(--line); }
.app-weten-lijst{
  list-style: none; margin: 0 0 32px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px clamp(26px, 4vw, 54px);
}
.app-weten-lijst li{ display: grid; gap: 6px; align-content: start; }
.app-weten-lijst b{
  font-family: var(--display); font-weight: 900; font-size: 14.5px;
  letter-spacing: -0.01em;
}
.app-weten-lijst span{ font-size: 13px; line-height: 1.55; color: var(--ink-dim); }

.app-spier-rij{ display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; }
.app-spier{
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 6px 11px 6px 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase;
}
.app-spier i{ width: 2px; height: 13px; background: var(--k); flex: none; }
/* De streep krijgt de merkkleur zelf; het woord een tikje lichter. Dat is de
   regel uit de gids (daar heet dat --red-ink en --violet-ink) en het is hier
   ook nodig: quads haalt als tekst 4,37:1 en dat is net te weinig voor klein
   schrift. De kale color ervoor blijft staan voor wie color-mix niet kent. */
.app-spier b{ font-weight: 400; color: var(--k); }
.app-spier b{ color: color-mix(in srgb, var(--k) 86%, #FFFFFF); }

/* ---------------------------------------------------- de prijs
   Eén keer op de pagina. Stond eerder ook in de kop; twee keer dezelfde
   prijs leest als onzekerheid. */
.app-twee{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 0; }
.app-twee > div{
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 3px; padding: 24px 24px 26px;
  background: rgba(255,255,255,.015);
}
.app-twee > div.uit{
  border-color: rgba(var(--accent-rgb),.34);
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(var(--accent-rgb),.09), transparent 62%),
    rgba(255,255,255,.03);
}
.app-twee .et{
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.app-twee h3{
  font-family: var(--display); font-weight: 900; font-size: 30px;
  margin: 0 0 9px; letter-spacing: -0.03em;
}
.app-twee h3 span{
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; color: var(--ink-dim); margin-left: 5px;
}
.app-twee p{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-dim); }

/* ---- labels ----
   .zone-dark zet --ink-faint op #5A5A5E, en dat haalt 2,80:1 tegen onze
   grond — te weinig voor de labels, de bijschriften en de begrippen in de
   tabel. #837F7B heeft hetzelfde karakter en haalt 4,98:1.
   Bewust alleen op deze pagina: dezelfde waarde staat in .zone-dark op de
   rest van de site en die aanpassen raakt elke pagina. */
body.zone-dark{ --ink-faint: #837F7B; }

@media (max-width: 1040px){
  .app-held-in{ grid-template-columns: 1fr; justify-items: start; }
  .app-held-fon{ justify-self: center; margin-top: 10px; }
  .app-stappenlijst{ grid-template-columns: repeat(2, 1fr); }
  .app-weten-lijst{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .app-twee{ grid-template-columns: 1fr; }
  .app-podium-rij .zij{ --w: 150px; }
  .app-podium-rij .fon{ --w: 182px; }
  .app-podium-rij .links{ margin-right: -4px; }
  .app-podium-rij .rechts{ margin-left: -4px; }
  .app-podium-namen{ gap: 10px; }
  .app-podium-namen span{ font-size: 11px; }
}
@media (max-width: 560px){
  .fon-held{ --w: 252px; }
  .app-stappenlijst{ grid-template-columns: 1fr; row-gap: 32px; }
  .app-weten-lijst{ grid-template-columns: 1fr; gap: 20px; }
  .app-stappen, .app-weten{ padding: 40px 0 42px; }
  .laag-hud{ inset: 14px; }
  /* Drie toestellen moeten binnen de kolom passen: 132 + 2x98 min de
     overlap komt op 326, tegen ongeveer 350 beschikbaar. Bij 150/118 liep
     de rij eruit en werden de buitenste schermen afgesneden. */
  .app-podium-rij .fon{ --w: 132px; }
  .app-podium-rij .zij{ --w: 98px; opacity: .7; }
}
@media (prefers-reduced-motion: reduce){
  .app-staat-stip{ animation: none; opacity: .8; }
}

@media (max-width: 380px){
  /* Op 320px liep de rij vijf pixels buiten beeld. */
  .fon-held{ --w: 220px; }
  .app-podium-rij .fon{ --w: 126px; }
  .app-podium-rij .zij{ --w: 100px; }
  .app-podium-namen{ gap: 7px; }
  .app-podium-namen b{ font-size: 8px; letter-spacing: .12em; }
  .app-podium-namen span{ font-size: 10px; }
}

/* ================================================================
   GRAFIEK
   Onder het podium was de pagina louter tekst. Dit zijn de beelden die
   erbij komen: een teken per stap, een merkband met de payoff in staal,
   en de spiergroepen als eigen plaat in plaats van losse chips.
   ================================================================ */

/* ---- raster, zoals onder het woordmerk in de voet van de homepage ---- */
.laag-raster{
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black 28%, transparent 76%);
          mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black 28%, transparent 76%);
}

/* ---- het teken bij elke stap ---- */
.app-stappenlijst li{ padding-top: 22px; }
.stap-teken{
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 2px;
  background: rgba(255,255,255,.02);
  position: relative;
}
/* Een hoekje in de accentkleur, hetzelfde idee als de HUD-markeringen op de hero. */
.stap-teken::after{
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--accent); border-left: 1px solid var(--accent);
}
.stap-teken svg{
  width: 22px; height: 22px;
  fill: none; stroke: #C9C3BD; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.stap-teken svg .vol{ fill: var(--accent); stroke: none; }
/* Het nummer naast het teken in plaats van eronder: compacter en het leest
   als één merkteken per stap. */
.app-stappenlijst .kopregel{
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.app-stappenlijst .kopregel .nr{ margin: 0; }

/* ======== DE TEKENS BEWEGEN ========
   Zes tekens die stilstaan zeggen alle zes ongeveer hetzelfde. Met beweging
   doet elk teken wat zijn stap doet: de keuze zakt door de lijst, de tik
   straalt uit, de staven groeien, de pijl draait rond.

   Ze lopen niet gelijk. Elk teken heeft een eigen duur en een eigen vertraging,
   zodat het rooster niet als één knipperend geheel leest maar als zes dingen
   die ieder hun gang gaan. Alles is traag en klein — de gids zegt dat niets
   knippert. */
@keyframes stapKies{   0%,16%{ transform: translateY(0); }    28%,58%{ transform: translateY(4.6px); }  70%,100%{ transform: translateY(0); } }
@keyframes stapScherm{ 0%,100%{ opacity:.55; }                 50%{ opacity:1; } }
@keyframes stapTik{    0%{ transform: scale(.28); opacity:.85; } 72%,100%{ transform: scale(1.08); opacity:0; } }
@keyframes stapTil{    0%,100%{ transform: translateY(0); }     50%{ transform: translateY(-2.2px); } }
@keyframes stapStaaf{  0%{ transform: scaleY(.28); }            55%,100%{ transform: scaleY(1); } }
@keyframes stapRond{   0%{ transform: rotate(0); }              100%{ transform: rotate(360deg); } }

/* 01 — de gekozen rij zakt door de lijst */
.stap-1 .vol{ animation: stapKies 5.2s ease-in-out infinite; }

/* 02 — het teken ademt: de app staat al aan. Niet het pad daarbinnen — dat
   is het oorlijntje van de telefoon en dat laten knipperen zegt niets. */
.stap-2 svg{ animation: stapScherm 3.4s ease-in-out infinite; }

/* 03 — de tik straalt uit. Niet de twee ringen zelf: die zijn de vorm van het
   teken, en toen ik ze liet uitdoven stond er aan het eind van elke cyclus
   alleen nog een stip. Er ligt nu een losse golf overheen die groeit en
   verdwijnt; de ringen blijven staan. */
.stap-3 .golf{
  transform-box: fill-box; transform-origin: 50% 50%;
  stroke: var(--accent); stroke-width: 1.4;
  animation: stapTik 2.6s ease-out infinite;
}

/* 04 — de halter komt omhoog en zakt terug */
.stap-4 svg{ animation: stapTil 2.8s ease-in-out infinite; }

/* 05 — de staaf groeit vanaf de nullijn, niet vanuit het midden */
.stap-5 .vol{ transform-box: fill-box; transform-origin: 50% 100%;
               animation: stapStaaf 3.6s cubic-bezier(.22,.9,.3,1) infinite; }

/* 06 — de pijl draait één keer rond, met een lange pauze ertussen */
.stap-6 svg{ transform-origin: 50% 50%; animation: stapRond 6s cubic-bezier(.65,0,.35,1) infinite; }

/* Wie minder beweging heeft ingesteld, krijgt de zes tekens stil. */
@media (prefers-reduced-motion: reduce){
  .stap-1 .vol, .stap-3 .golf,
  .stap-2 svg, .stap-4 svg, .stap-5 .vol, .stap-6 svg{ animation: none; }
  .stap-3 .golf{ opacity: 0; }
  .stap-2 svg{ opacity: 1; }
}
/* Het nummer naast het teken in plaats van eronder: compacter en het leest
   als één merkteken per stap. */
.app-stappenlijst .kopregel{
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.app-stappenlijst .kopregel .nr{ margin: 0; }

/* ---- de merkband ----
   De payoff in staal met de trage glans, op het raster, met de rode
   hoekmarkeringen. Dit is de behandeling die de merkgids voor het
   BUILD-watermerk beschrijft, hier toegepast op de drie woorden. */
.app-band{
  position: relative; overflow: hidden;
  padding: 74px 0 78px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(var(--accent-rgb),.09) 0%, transparent 68%),
    var(--bg);
  text-align: center;
}
.app-band > .wrap{ position: relative; z-index: 6; }
.app-band-payoff{
  font-family: var(--display); font-weight: 900;
  /* De drie woorden staan op één regel, dus de maat moet volgen uit de
     beschikbare breedte. Gemeten: de regel is 14,5x de lettergrootte breed,
     en .wrap loopt niet verder dan 960px. Vandaar 6,1vw met een plafond
     van 64px — daarboven liep DOMINATE buiten beeld. */
  font-size: min(6.1vw, 64px); line-height: 1;
  letter-spacing: -0.03em; text-transform: uppercase;
  display: inline-block; white-space: nowrap;
  margin: 0;
}
.app-band-payoff .punt{ color: var(--accent); -webkit-text-fill-color: var(--accent); }
.app-band-regel{
  margin: 24px auto 0; max-width: 42ch;
  font-size: 14px; line-height: 1.6; color: var(--ink-dim);
}

/* ---- de spiergroepen als plaat ---- */
.app-plaat{
  border: 1px solid var(--line); border-radius: 3px;
  padding: 24px 24px 26px; margin-top: 34px;
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(255,255,255,.022), transparent 60%),
    rgba(255,255,255,.012);
}
.app-plaat-kop{
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint);
}
.app-plaat-kop b{ color: var(--ink); font-weight: 400; }
.app-plaat-kop span{ margin-left: auto; }
.app-spier-rij{ display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; }
.app-spier{
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 9px 14px 9px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255,255,255,.02);
}
.app-spier i{ width: 3px; height: 17px; background: var(--k); flex: none; }

@media (max-width: 560px){
  .app-podium{ padding: 46px 0 44px; }
  .app-podium-kop{ margin-bottom: 30px; }
  .app-podium-namen{ margin-top: 24px; }
  .stap-teken{ width: 38px; height: 38px; margin-bottom: 12px; }
  .stap-teken svg{ width: 19px; height: 19px; }
  .app-band{ padding: 48px 0 52px; }
  .app-plaat{ padding: 18px 16px 20px; }
  .app-spier{ padding: 7px 11px 7px 8px; font-size: 9px; }
}

/* ======== WAT ZES MAANDEN KOSTEN ========
   Twee balken op dezelfde schaal, allebei met hun bedrag ernaast. Dat laatste
   is belangrijk: zo hangt de betekenis niet aan de kleur, en blijft de figuur
   leesbaar voor wie goud en grijs niet uit elkaar houdt.

   Het goud ligt op de goedkoopste en het grijs op de andere — de richtlijn
   noemt dat emphasis: één reeks is het punt, de rest is context. Het open
   stuk achter de gouden balk is precies de €23,70 die je niet betaalt, en
   staat er gestreept bij zodat het als ruimte leest en niet als balk. */
.prijsvgl{
  margin: 30px 0 0; padding: 22px 24px 18px;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(255,255,255,.018);
}
.prijsvgl figcaption{
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px;
}
.prijsvgl-rij{
  display: grid; grid-template-columns: 112px 1fr 76px;
  align-items: center; gap: 14px; margin-bottom: 10px;
}
.pv-label{ font-size: 13px; color: var(--ink-dim); }
/* Het spoor is de volle €95,70. De balk erin mag dus niets verschuiven, want
   zijn breedte ís de prijs. Daarom staat het open stuk er absoluut overheen in
   plaats van ernaast: met de 2px lucht als marge erbij liep de rij over 100%
   en kneep flexbox de gouden balk terug — gemeten 73,4% op een smal scherm,
   terwijl 72 van 95,70 precies 75,2% is. */
.pv-spoor{ position: relative; display: block; height: 18px; }
.pv-balk{
  /* 4px ronding alleen aan het uiteinde; de voet blijft op de nullijn staan. */
  border-radius: 0 4px 4px 0; display: block; height: 100%;
}
.pv-grijs{ background: #D8D2CC; }
.pv-goud{ background: var(--goud); }
.pv-gat{ display: block; position: absolute; top: 0; bottom: 0; right: 0; }
.pv-gat i{
  /* 2px lucht, anders loopt het open stuk tegen de gouden balk aan. */
  position: absolute; top: 0; bottom: 0; left: 2px; right: 0;
  border: 1px dashed rgba(232,177,60,.55);
  border-radius: 0 4px 4px 0; border-left: none;
}
.pv-waarde{
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  text-align: right; font-feature-settings: 'tnum';
}
.prijsvgl-slot{
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-dim);
}
.prijsvgl-slot b{ color: var(--goud); font-weight: 700; }
@media (max-width: 560px){
  .prijsvgl{ padding: 18px 16px 14px; }
  .prijsvgl-rij{ grid-template-columns: 86px 1fr 66px; gap: 10px; }
  .pv-label{ font-size: 12px; }
  .pv-waarde{ font-size: 12px; }
}