/* ==========================================================================
   PTTrack — site.css

   Richting "De vloer", modern uitgevoerd: het warme palet blijft, maar de
   typografie is een strakke grotesk in plaats van een serif. De warmte komt
   nu uit de fotografie, niet uit de letter.

   Van "Het instrument" blijven precies twee dingen over en verder niets:
   getallen in JetBrains Mono met tabulaire cijfers, en groen uitsluitend als
   statuskleur (klopt, betaald, compleet) — nooit als merkkleur.

   Eén stylesheet, geen framework, geen verzoeken naar derden.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}

/* ------------------------------------------------------------------ tokens */
:root{
  --bone:#F4F0EA;          /* papier                                      */
  --bone-2:#FAF8F4;        /* kaarten                                     */
  --ink:#161311;           /* 17:1 op bone                                */
  --ink-2:#241F1B;         /* donkere band, iets lichter dan inkt         */
  --klei:#C8552B;          /* accent — alleen ≥24px of als vlak           */
  --klei-t:#B44A22;        /* dezelfde kleur voor tekst — 4,7:1 op bone   */
  --grijs:#57504A;         /* lopende tekst gedempt                       */
  --zand:#7F614D;          /* labels — 5,0:1                              */
  --groen:#0B7A55;         /* statuskleur, geen merkkleur                 */
  --lijn:rgba(22,19,17,.13);
  --lijn-zacht:rgba(22,19,17,.07);
  --wrap:1180px;
  --sans:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:8px;
  --schaduw:0 1px 2px rgba(22,19,17,.04), 0 24px 50px -26px rgba(22,19,17,.3);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;background:var(--bone);color:var(--ink);
  font:400 16.5px/1.6 var(--sans);letter-spacing:-.005em;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.032em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);padding:12px 18px;z-index:99;}
.skip:focus{left:0;}
:focus-visible{outline:2px solid var(--klei);outline-offset:3px;border-radius:3px;}

.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto;}
.wrap-narrow{width:min(100% - 48px,720px);}

/* -------------------------------------------------------------- woordmerk */
/* De turfstreep: vier streepjes en een schuine. Puur CSS, dus hij schaalt mee
   met de tekst en heeft geen afbeelding nodig. */
.logo{display:inline-flex;align-items:center;gap:13px;text-decoration:none;
  font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);}
.turf{display:inline-flex;gap:3px;align-items:flex-end;flex:none;}
.turf i{width:2.5px;height:18px;background:currentColor;display:block;border-radius:1px;}
.turf i.kruis{width:21px;height:2.5px;background:var(--klei);border-radius:2px;
  transform:rotate(-20deg);margin-left:-19.5px;margin-bottom:7.5px;}

/* ------------------------------------------------------------------ header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(244,240,234,.86);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--lijn-zacht);}
.head-inner{display:flex;align-items:center;gap:28px;min-height:70px;}
.head-nav{display:flex;gap:30px;margin-left:auto;}
.head-nav a{text-decoration:none;color:var(--grijs);font-size:14.5px;font-weight:500;}
.head-nav a:hover{color:var(--ink);}
.head-inner > .btn{margin-left:auto;}
.head-nav ~ .btn{margin-left:0;}

/* ----------------------------------------------------------------- knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--bone);text-decoration:none;border:0;cursor:pointer;
  font:600 15px/1 var(--sans);letter-spacing:-.01em;padding:15px 26px;border-radius:var(--r);
  transition:background .14s ease,transform .14s ease;}
.btn:hover{background:#332A24;transform:translateY(-1px);}
.btn:active{transform:none;}
.btn-sm{padding:10px 17px;font-size:14px;border-radius:6px;}
/* Op de donkere band de donkerder klei: wit op #C8552B haalt maar 4,4:1,
   op #B44A22 wel 5,3:1. */
.band-donker .btn{background:var(--klei-t);color:#fff;}
.band-donker .btn:hover{background:#C8552B;}

/* ---------------------------------------------------------------- secties */
.band{padding:104px 0;}
.band + .band{border-top:1px solid var(--lijn-zacht);}
/* Sluit direct aan op de sectie erboven: geen streep, geen dubbele witruimte. */
.band-aansluitend{padding-top:0;border-top:0;}
.band-donker{background:var(--ink-2);color:var(--bone);border-top:0;}
.eyebrow{display:inline-block;font:500 11.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--zand);margin-bottom:20px;}
.band-donker .eyebrow{color:#C79C7E;}
.band h2{font-size:clamp(32px,4.6vw,52px);line-height:1.02;}
.section-intro{margin-top:18px;color:var(--grijs);font-size:18px;max-width:56ch;}
.band-donker .section-intro{color:#BEB2A8;}
.fine{font:500 12px/1.5 var(--mono);color:var(--zand);}

/* -------------------------------------------------------------------- hero */
.hero{padding:76px 0 96px;}
.hero-grid{display:grid;grid-template-columns:1fr minmax(0,600px);gap:60px;align-items:center;}
.hero h1{font-size:clamp(48px,6.4vw,78px);line-height:.98;letter-spacing:-.042em;}
.hero h1 em{font-style:normal;color:var(--klei);}
.lead{margin-top:26px;font-size:19px;color:var(--grijs);max-width:44ch;}
.hero-cta{margin-top:34px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.hero .fine{margin-top:18px;}

/* Beeldslot. Zonder foto een warm vlak met grein — bewust geen grijs blok,
   zodat de pagina ook zonder beeld te beoordelen is. */
.beeld{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);
  box-shadow:var(--schaduw);aspect-ratio:16/10;}
.beeld img{width:100%;height:100%;object-fit:cover;}
.beeld-leeg{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 20%,#E5C4AA 0%,#C8552B 55%,#7C2F14 100%);}
.beeld-leeg::after{content:'';position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgba(22,19,17,.5) 1px,transparent 1px);background-size:3px 3px;}
.beeld-label{position:absolute;left:20px;bottom:18px;z-index:2;
  font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.86);}

/* ------------------------------------------------------- de drie 'sporen' */
.lagen{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.lagen li{display:flex;flex-direction:column;}
.lagen figure{margin:0 0 22px;border-radius:var(--r);overflow:hidden;background:var(--ink);
  aspect-ratio:4/3;}
.lagen figure img{width:100%;height:100%;object-fit:cover;}
.lagen .k{display:block;font:500 11.5px/1 var(--mono);color:var(--klei-t);margin-bottom:12px;}
.lagen h3{font-size:23px;}
.lagen p{margin-top:11px;color:var(--grijs);font-size:15.5px;}

/* ------------------------------------------------------------------ kaarten */
.cards{margin-top:56px;display:grid;gap:32px 36px;}
.cards-4{grid-template-columns:repeat(4,1fr);}
.cards-3{grid-template-columns:repeat(3,1fr);}
.card{border-top:1px solid var(--lijn);padding-top:22px;}
.band-donker .card{border-color:rgba(244,240,234,.18);}
.card .num{display:block;font:500 11.5px/1 var(--mono);color:var(--zand);margin-bottom:16px;}
.band-donker .card .num{color:#C79C7E;}
.card h3{font-size:20px;line-height:1.2;}
.card p{margin-top:10px;color:var(--grijs);font-size:15.5px;}
.band-donker .card p{color:#BEB2A8;}

/* -------------------------------------------------------- volvlaks beeld */
/* Beeld over de volle breedte met de tekst eróp, niet vervaagd eronder. Een
   vervaagde foto achter tekst kost contrast en oogt gedateerd; een echte sluier
   houdt de tekst leesbaar en het beeld herkenbaar.

   De achtergrond staat vast (background-attachment) — dat geeft het
   parallax-gevoel zonder één regel JavaScript. iOS negeert het en scrollt
   gewoon mee; dat is een prima terugval. Bij bewegingsreductie zetten we het
   zelf uit, zie onderaan. */
.vlak{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(340px,42vw,480px);padding:72px 0;
  background:var(--ink) center/cover no-repeat;background-attachment:fixed;}
.vlak::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(18,15,13,.88) 0%,rgba(18,15,13,.79) 46%,rgba(18,15,13,.5) 100%);}
.vlak-bundel{background-image:url('/assets/img/vlak-bundel.webp');}
.vlak-slot{background-image:url('/assets/img/vlak-slot.webp');}
.vlak p{color:#fff;font-size:clamp(26px,3.4vw,42px);line-height:1.08;
  letter-spacing:-.034em;font-weight:600;max-width:19ch;}
.vlak p em{font-style:normal;color:#EFB08D;}
.vlak .fine{margin-top:20px;color:#DCCFC4;font:500 12.5px/1.6 var(--mono);letter-spacing:0;max-width:40ch;}

/* ---------------------------------------------------------- functielijst */
/* Tien functies, twee kolommen, met een uitsnede van het scherm in plaats van
   het hele venster. Een volledig scherm van 3800px teruggebracht naar 500px
   leest niemand; een uitsnede van het stuk dat ertoe doet wel. */
.functies{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:44px 40px;}
.functies li{display:flex;flex-direction:column;}
.functies figure{margin:0 0 20px;border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid rgba(244,240,234,.14);box-shadow:0 18px 40px -24px rgba(0,0,0,.6);}
.functies figure img{width:100%;display:block;}
.functies h3{font-size:19px;}
.functies p{margin-top:8px;color:#BEB2A8;font-size:15.5px;}

/* --------------------------------------------------------------------- demo */
.demo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;}
.ticks{margin-top:32px;display:grid;gap:13px;}
.ticks li{position:relative;padding-left:28px;font-size:16px;color:#DED3C9;}
.ticks li::before{content:'';position:absolute;left:0;top:.5em;width:13px;height:7px;
  border-left:2px solid var(--klei);border-bottom:2px solid var(--klei);
  transform:rotate(-45deg) translateY(-2px);}
.demo-form{background:var(--bone);color:var(--ink);padding:36px;border-radius:var(--r);}
.demo-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:18px;display:block;}
.field label{display:block;font:500 14px/1 var(--sans);margin-bottom:8px;}
.field .opt{color:var(--zand);font-weight:400;}
.field input,.field select,.field textarea{width:100%;font:400 16px/1.5 var(--sans);
  color:var(--ink);background:#fff;border:1px solid #D9D0C6;border-radius:6px;padding:12px 14px;}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);
  outline:2px solid rgba(200,85,43,.35);outline-offset:0;}
.field.has-error input,.field.has-error textarea{border-color:#A02B1E;}
.err{display:block;margin-top:6px;color:#A02B1E;font-size:14px;}
.check label{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:15px;
  line-height:1.5;color:var(--grijs);}
.check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--klei);}
.actions{margin-top:26px;}
.actions .btn{width:100%;background:var(--ink);color:var(--bone);}
.actions .btn:hover{background:#332A24;}
.alert{background:#F6E3DE;border:1px solid #E0B3A6;color:#7A2416;border-radius:6px;
  padding:13px 16px;margin-bottom:18px;font-size:15px;}
.sent h3{font-size:24px;}
.sent p{margin-top:12px;color:var(--grijs);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ------------------------------------------------------------------- prose */
.prose h1{font-size:clamp(34px,4.6vw,50px);line-height:1.04;}
.prose h2{font-size:22px;margin-top:40px;}
.prose p{margin-top:12px;color:var(--grijs);}
.prose .back{margin-top:40px;}
.prose .back a{color:var(--klei-t);font-weight:500;}

/* ------------------------------------------------------------------ footer */
.site-foot{background:var(--ink);color:var(--bone);padding:64px 0 34px;}
.foot-inner{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;
  padding-bottom:32px;border-bottom:1px solid rgba(244,240,234,.14);}
.site-foot .logo{color:var(--bone);}
.foot-brand p{margin-top:14px;color:#BEB2A8;font-size:15.5px;}
.foot-nav{display:flex;gap:30px;align-items:flex-start;}
.foot-nav a{color:#BEB2A8;text-decoration:none;font-size:15.5px;}
.foot-nav a:hover{color:var(--bone);}
.foot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;color:#948A83;font:500 12px/1.6 var(--mono);}

/* -------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .beeld{max-width:560px;}
  .cards-4{grid-template-columns:repeat(2,1fr);}
  .lagen{grid-template-columns:1fr;gap:36px;}
  .lagen figure{max-width:460px;}
  .cards-3{grid-template-columns:1fr;}
  .demo-grid{grid-template-columns:1fr;gap:34px;}
  .functies{grid-template-columns:1fr;gap:38px;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .band{padding:70px 0;}
  .hero{padding:46px 0 66px;}
  .head-nav{display:none;}
  .cards-4{grid-template-columns:1fr;}
  .demo-form{padding:24px 20px;}
  .demo-form .row{grid-template-columns:1fr;gap:0;}
}
@media (max-width:760px){
  /* Op mobiel is een vastgezette achtergrond duur en schokkerig. */
  .vlak{background-attachment:scroll;min-height:300px;padding:56px 0;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
  .vlak{background-attachment:scroll;}
}

/* ── de rekensom ──────────────────────────────────────────────────────────
   De enige plek op de pagina met getallen die niet uit het product komen.
   Daarom oogt hij als een uitgewerkt blaadje en niet als een claim: mono
   voor elk cijfer, de aanname klein onder de post, en de kanttekening
   nadrukkelijk in beeld in plaats van eronder weggemoffeld. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.band-winst{background:var(--bone-2);}

.rekencase{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  margin-top:34px;padding-bottom:16px;border-bottom:1px solid var(--lijn);}
.rekencase-kop{font:500 11.5px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--zand);}
.rekencase-val{font:500 14px/1.5 var(--mono);color:var(--ink-2);letter-spacing:0;}

.rekentabel-wrap{margin-top:8px;}
.rekentabel{width:100%;border-collapse:collapse;text-align:left;}
.rekentabel thead th{padding:16px 12px 12px;font:500 11px/1.3 var(--mono);
  letter-spacing:.11em;text-transform:uppercase;color:var(--zand);
  border-bottom:1px solid var(--lijn);vertical-align:bottom;}
.rekentabel thead th.num{text-align:right;width:118px;}
.rekentabel tbody th{padding:22px 12px;vertical-align:top;font-weight:400;
  border-bottom:1px solid var(--lijn-zacht);}
.rekentabel tbody td{padding:22px 12px;vertical-align:top;text-align:right;
  border-bottom:1px solid var(--lijn-zacht);
  font:500 16px/1.4 var(--mono);letter-spacing:-.01em;color:var(--grijs);
  white-space:nowrap;}
.rekentabel tbody tr:last-child th,
.rekentabel tbody tr:last-child td{border-bottom:0;}
.rekentabel .post{display:block;font-weight:600;font-size:17px;color:var(--ink);
  letter-spacing:-.015em;line-height:1.3;}
.rekentabel .uitleg{display:block;margin-top:7px;font-size:14px;line-height:1.55;
  color:var(--grijs);max-width:64ch;}
.rekentabel td.terug{color:var(--klei-t);font-weight:600;}

.rekenslot{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:0;margin-top:44px;border:1px solid var(--lijn);border-radius:var(--r);
  overflow:hidden;background:#fff;}
.rekentotaal{padding:30px 32px;background:var(--ink);color:var(--bone);}
.rekentotaal .k{margin:0;font:500 11px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:#C79C7E;}
.rekentotaal .v{margin:14px 0 0;font-size:clamp(30px,4vw,40px);font-weight:600;
  letter-spacing:-.035em;line-height:1;color:#EFB08D;}
.rekentotaal .u{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:#CFC2B7;}
.rekengeld{padding:30px 32px;}
.rekengeld .k{margin:0 0 12px;font:500 11px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--zand);}
.rekengeld p{margin:0 0 12px;font-size:16px;line-height:1.62;color:var(--ink-2);}
.rekengeld .fine{margin:0;font:500 12.5px/1.6 var(--mono);color:var(--grijs);
  letter-spacing:0;}


@media (max-width:860px){
  /* Vier kolommen passen niet; elke regel wordt een blokje met de cijfers
     eronder, elk met zijn eigen kopje uit data-kop. */
  .rekentabel thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;}
  .rekentabel,.rekentabel tbody,.rekentabel tr,
  .rekentabel tbody th,.rekentabel tbody td{display:block;width:auto;}
  .rekentabel tr{padding:22px 0;border-bottom:1px solid var(--lijn-zacht);}
  .rekentabel tr:last-child{border-bottom:0;}
  .rekentabel tbody th{padding:0;border-bottom:0;}
  .rekentabel tbody td{display:inline-block;padding:14px 26px 0 0;text-align:left;
    border-bottom:0;font-size:15px;}
  .rekentabel tbody td::before{content:attr(data-kop);display:block;
    margin-bottom:3px;font:500 10.5px/1 var(--mono);letter-spacing:.11em;
    text-transform:uppercase;color:var(--zand);}
  .rekentabel .uitleg{max-width:none;}
  .rekenslot{grid-template-columns:1fr;}
  .rekentotaal,.rekengeld{padding:26px 22px;}
}