/* ===========================================================================
   ZERO SLACK-HUISSTIJLLAAG over de bronopmaak heen.

   Doel: wie deze pagina naast zeroslack.nl legt, moet geen verschil in
   vormtaal kunnen aanwijzen. De INHOUD, de volgorde, de teksten en de
   componenten van de bron blijven ongemoeid — maar het merkgebaar wordt
   volledig dat van Zero Slack:

     1. BANDEN   — zeroslack.nl is voor het overgrote deel carbon (#0A0A0A)
                   met papieren en witte tussenbanden. De bron was volledig
                   licht. Dat is het grootste enkele verschil, dus dat eerst.
     2. TYPE     — Archivo 900, line-height .98, letterafstand -.035em,
                   h1 clamp(2.75rem,6.75vw,6.1rem) / h2 clamp(2rem,5.2vw,4.6rem).
                   De bron stond op 600 / 62px / 42px: een editoriale maat.
     3. MONO     — JetBrains Mono als labeltaal: kickers, knoppen, cijfers,
                   voetnoten, navigatie. Altijd kapitaal, letterafstand .1-.16em.
     4. ACID     — #C6F432 als enige accent: markering in koppen, de pulserende
                   punt, de primaire knop, hover-toestanden.
     5. SCHERP   — 0 hoekradius, 2px knopranden, hairlines i.p.v. schaduw.

   Alle maatvoering hieronder is letterlijk overgenomen uit de live CSS van
   zeroslack.nl, niet benaderd.
   =========================================================================== */

/* ═══ 1. FUNDAMENT ═════════════════════════════════════════════════════════ */

body{
  font-weight:500;
  line-height:1.45;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1440px;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}

/* Zero Slack ademt veel ruimer dan de bron en zet geen streep tussen secties —
   het kleurvlak doet het scheidingswerk.
   LET OP: de bron schrijft dit als `section.sec`. Een kale `.sec` verliest
   die strijd, hoe laat het blad ook geladen wordt. Daarom hier ook element+klasse. */
section.sec{padding:clamp(72px,10vw,150px) 0;border-top:0}
section.sec:first-of-type{border-top:0}

::selection{background:var(--acid);color:var(--ink)}

/* ═══ 2. TYPOGRAFIE ════════════════════════════════════════════════════════ */

h1,h2,h3{font-weight:900;letter-spacing:-.035em;line-height:.98}
h1{font-size:clamp(2.75rem,6.75vw,6.1rem);max-width:16ch}
h2{font-size:clamp(2rem,5.2vw,4.6rem);max-width:18ch;font-weight:900}
h3{font-size:clamp(1.3rem,2.25vw,2rem);font-weight:900;letter-spacing:-.025em;line-height:1.1}

/* De acid-markering onder een woord: hét beeldmerk van zeroslack.nl. */
h1 em,h2 em{
  font-style:normal;color:var(--ink);
  background:linear-gradient(to top,var(--acid) 42%,transparent 42%);
  box-shadow:none;
}

.lede{
  font-size:clamp(1rem,1.35vw,1.2rem);
  color:var(--ink-60,rgba(10,10,10,.60));
  max-width:56ch;line-height:1.5;font-weight:500;
}
.hero .lede{margin-top:26px}

.sub,.fine{color:var(--ink-60,rgba(10,10,10,.60))}
.fine{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:2}

/* ═══ 3. KICKER-IDIOOM ═════════════════════════════════════════════════════ */
/* Bron: chip met nummer + streepje + kicker.
   Zero Slack: pulserende acid-punt + mono-label in kapitaal. */

.sec-h{gap:11px;margin-bottom:clamp(26px,3vw,38px)}

.idx{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.13em;line-height:1;
  color:var(--acid);background:var(--ink);
  padding:4px 7px;border-radius:0;
}

.kicker,.sec-h .kicker{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding-left:17px;position:relative;
}
/* De pulserende acid-punt vóór elk sectielabel — het herkenbaarste kleine
   gebaar van zeroslack.nl. De bron zet hier een grijs streepje; dat wordt
   op `.sec-h .kicker::before` geschreven, dus die zwaarte is hier nodig. */
.kicker::before,.sec-h .kicker::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;background:var(--acid);border-radius:50%;
  box-shadow:0 0 0 0 rgba(198,244,50,.8);animation:zspulse 2.4s infinite;
}
@keyframes zspulse{
  0%{box-shadow:0 0 0 0 rgba(198,244,50,.75)}
  70%{box-shadow:0 0 0 9px rgba(198,244,50,0)}
  100%{box-shadow:0 0 0 0 rgba(198,244,50,0)}
}
.hero .kicker{display:inline-block;margin-bottom:22px}

/* ═══ 4. KNOPPEN ═══════════════════════════════════════════════════════════ */

.b{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:14px 22px;border:2px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--paper);
  transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s,border-color .18s;
}
.b:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.b:active{transform:translateY(2px)}
.b.sm{padding:11px 16px;font-size:11px}

/* De eerste knop in de hero is bij Zero Slack acid, niet carbon. */
.hero .cta-row .b:first-child,
.final .cta-row .b:first-child{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.hero .cta-row .b:first-child:hover,
.final .cta-row .b:first-child:hover{background:var(--ink);color:var(--acid);border-color:var(--ink)}

.b.gh{background:transparent;color:var(--ink);border-color:var(--ink);font-weight:700}
.b.gh:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.cta-row{gap:14px;margin-top:36px}

/* ═══ 5. KOP- EN VOETBALK ══════════════════════════════════════════════════ */

.nlh{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(244,243,239,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--seam);
}
body{padding-top:0}
/* 9px i.p.v. 11px: daarmee komt de balk op exact 65px, de hoogte van de
   kopbalk van zeroslack.nl. */
.nlh-in{max-width:1440px;padding:9px clamp(20px,5vw,80px)}

.nlh nav a{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.nlh nav a:hover{border-bottom-color:var(--acid)}
.nlh nav a.on{border-bottom-color:var(--acid)}

/* Woordmerk in Zero Slack-schrijfwijze: zwaar, kapitaal, acid-blok achter
   het tweede woorddeel — precies zoals ZERO SLACK het doet. */
.wm-txt b{
  font-weight:900;font-size:17px;letter-spacing:-.05em;
  text-transform:uppercase;color:var(--ink);
}
.wm-txt i{
  font-family:var(--mono);font-size:9px;font-weight:700;line-height:1.15;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60,rgba(10,10,10,.6));
  margin-top:0;
}
.wm-txt{line-height:1.05}
.wm-txt b{line-height:1.15}

/* De knop in de kopbalk erft anders de letterafstand van de menulinks
   (.nlh nav a weegt zwaarder dan .b) en wordt daardoor breder dan bij
   Zero Slack. Hier terug op de .12em van de echte knop. */
.nlh nav a.b{letter-spacing:.12em;color:var(--paper)}
.nlh nav a.b:hover{color:var(--ink)}

.lang,.burger{
  border-radius:0;font-family:var(--mono);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;font-size:11px;
  border:2px solid var(--ink);color:var(--ink);background:transparent;
}
.lang:hover,.burger:hover{background:var(--acid);border-color:var(--acid)}

/* Voetbalk: bij Zero Slack carbon, met mono-links in kapitaal. */
.nlf{
  background:var(--ink);color:var(--paper);
  border-top:0;padding:72px 0 60px;margin-top:0;
}
.nlf-in{max-width:1440px;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px);gap:30px}
.nlf nav{gap:10px 20px}
.nlf nav a{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--pap-60,rgba(244,243,239,.6));text-decoration:none;
}
.nlf nav a:hover{color:var(--acid);text-decoration:none}
.nlf .biz,.nlf .fine{color:var(--pap-60,rgba(244,243,239,.6))}
.nlf .fine{text-transform:none;letter-spacing:.02em;font-size:11px;line-height:1.75}

/* ═══ 6. HERO ══════════════════════════════════════════════════════════════ */

section.sec.hero{padding-top:clamp(96px,7.8vw,112px);padding-bottom:clamp(52px,6vw,92px)}
.hero h1{margin:0;max-width:14ch}

.trust{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60,rgba(10,10,10,.6));
  margin-top:30px;padding-top:24px;border-top:2px solid var(--ink);gap:18px;
}
.trust span::before{border:2px solid var(--acid);background:var(--acid);border-radius:0;width:7px;height:7px}

/* Het weekvlak: bij Zero Slack krijgt het sleutelpaneel van de hero een
   acid-omlijning — dat is daar de grootste accenttoepassing van allemaal. */
.weekbox{
  border:2px solid var(--acid);border-radius:0;
  background:transparent;box-shadow:none;
  padding:clamp(20px,2.6vw,28px);
}
.weekbar{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60,rgba(10,10,10,.6));
}
.blk{border-radius:0;border-width:1px}

/* ═══ 7. PANELEN EN RASTERS ════════════════════════════════════════════════ */

.card,.proof,.final,.weekbox{border-radius:0;box-shadow:none}
.card{border:1px solid var(--seam);background:transparent;padding:clamp(22px,2.6vw,30px)}
.card .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.card p{font-size:15px;line-height:1.55}

.tally .v,.pr .amt{font-family:var(--sans);font-weight:900;letter-spacing:-.045em}
.tally .l,.pr .step,.pr .per{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.steps li::before{background:var(--acid);color:var(--ink);border-radius:0;font-weight:700;letter-spacing:.1em}
.steps .tag{border-radius:0;font-family:var(--mono);letter-spacing:.12em}

/* Het bewijsblok is op zeroslack.nl geen omrand kaartje maar een vol
   acid-vlak met carbon tekst — daar landt op die site het meeste accent. */
.proof{background:var(--acid);border:0;border-left:6px solid var(--ink);padding:clamp(26px,3.2vw,38px)}
.proof h3,.proof p,.proof li,.proof strong{color:var(--ink)}
.proof ul li::marker{color:var(--ink)}

.faq summary{font-family:var(--sans);font-weight:900;letter-spacing:-.025em;font-size:19px}
.faq summary:hover{color:var(--ink)}
.faq summary::after{color:var(--acid);font-weight:700}

/* Het aanbevolen aanbod krijgt bij Zero Slack geen subtiel randje maar een
   vol acid-vlak: dat is daar hét gebaar voor "dit is de keuze". */
.pr.now{background:var(--acid);box-shadow:none}
.pr.now h3,.pr.now .amt,.pr.now li,.pr.now strong{color:var(--ink)}
.pr.now .step,.pr.now .per{color:rgba(10,10,10,.66)}
.pr.now .b{background:var(--ink);border-color:var(--ink);color:var(--acid)}
.pr.now .b:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.pr h3{letter-spacing:-.03em}

.final{border:1px solid var(--seam);background:transparent;padding:clamp(40px,5vw,72px)}
.final h2{max-width:18ch}

/* ═══ 8. DE CARBON-BANDEN ══════════════════════════════════════════════════ */
/* Dit is wat zeroslack.nl zijn gewicht geeft: hele secties in carbon, met
   alle inhoud daarbinnen omgekeerd. Alleen kleur — geen maat, geen positie. */

.sec.zs-dark{background:var(--ink);color:var(--paper)}

.sec.zs-dark h1,
.sec.zs-dark h2,
.sec.zs-dark h3,
.sec.zs-dark h4,
.sec.zs-dark strong,
.sec.zs-dark b{color:var(--paper)}

.sec.zs-dark p,
.sec.zs-dark li,
.sec.zs-dark .lede,
.sec.zs-dark .sub,
.sec.zs-dark .fine{color:var(--pap-60,rgba(244,243,239,.6))}

.sec.zs-dark .kicker{color:var(--paper)}
.sec.zs-dark .idx{background:var(--acid);color:var(--ink)}

.sec.zs-dark h2 em,
.sec.zs-dark h1 em{color:var(--ink)}

/* hairlines en vlakken omkeren */
.sec.zs-dark .card,
.sec.zs-dark .final,
.sec.zs-dark .weekbox{border-color:var(--pap-20,rgba(244,243,239,.18));background:transparent}
.sec.zs-dark .card:hover{background:rgba(244,243,239,.05)}
.sec.zs-dark .proof{background:var(--acid);border-left-color:var(--paper)}
.sec.zs-dark .proof h3,.sec.zs-dark .proof p,.sec.zs-dark .proof li{color:var(--ink)}

/* rasters met 1px-voegen: voeg wordt papierlijn, cel wordt carbon */
.sec.zs-dark .tally,
.sec.zs-dark .steps,
.sec.zs-dark .prices,
.sec.zs-dark .choices{background:var(--pap-20,rgba(244,243,239,.18));border-color:var(--pap-20,rgba(244,243,239,.18))}
.sec.zs-dark .tally div,
.sec.zs-dark .steps li,
.sec.zs-dark .pr,
.sec.zs-dark .choices>div{background:var(--ink)}
.sec.zs-dark .pr.now{background:rgba(244,243,239,.05)}

.sec.zs-dark .tally .v,
.sec.zs-dark .pr .amt{color:var(--acid)}
.sec.zs-dark .tally .l,
.sec.zs-dark .tally .n,
.sec.zs-dark .pr .step,
.sec.zs-dark .pr .per,
.sec.zs-dark .card .n{color:var(--pap-60,rgba(244,243,239,.6))}

.sec.zs-dark .recog,
.sec.zs-dark .faq{border-top-color:var(--pap-20,rgba(244,243,239,.18))}
.sec.zs-dark .recog li{border-bottom-color:rgba(244,243,239,.12)}
.sec.zs-dark .recog li span.m{color:var(--pap-60,rgba(244,243,239,.6))}
.sec.zs-dark .faq details{border-bottom-color:rgba(244,243,239,.12)}
.sec.zs-dark .faq summary{color:var(--paper)}

.sec.zs-dark .trust{color:var(--pap-60,rgba(244,243,239,.6));border-top-color:var(--paper)}
.sec.zs-dark .weekbar{color:var(--pap-60,rgba(244,243,239,.6));border-bottom-color:var(--pap-20,rgba(244,243,239,.18))}
.sec.zs-dark .blk{border-color:var(--pap-20,rgba(244,243,239,.18))}

.sec.zs-dark a{color:var(--paper)}
.sec.zs-dark a:hover{color:var(--acid)}

/* knoppen op carbon */
.sec.zs-dark .b{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.sec.zs-dark .b:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.sec.zs-dark .b.gh{background:transparent;color:var(--paper);border-color:var(--paper)}
.sec.zs-dark .b.gh:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}

/* de vier keuzes houden hun eigen kleur — dat is betekenisdragend beeld.
   Alleen "houden" moet op carbon zichtbaar blijven, dus die wordt papier. */
.sec.zs-dark .choices .ch-k{--k:var(--paper);--kf:var(--paper)}
.sec.zs-dark .blk.k{background:var(--paper);border-color:var(--paper)}
.sec.zs-dark .i-k{background:var(--paper)}

/* De vier keuzes houden op carbon hun eigen betekeniskleur. Zonder deze
   regel wint de algemene carbon-kopregel hierboven en worden alle vier wit —
   dan is het kleurverschil dat de bron juist draagt, weg. */
.sec.zs-dark .choices .ch-k h3{color:var(--paper)}
.sec.zs-dark .choices .ch-d h3{color:#E08A00}
.sec.zs-dark .choices .ch-a h3{color:var(--acid)}
.sec.zs-dark .choices .ch-e h3{color:rgba(244,243,239,.58)}
.sec.zs-dark .choices .ch-d{--kf:#E08A00}
.sec.zs-dark .choices .ch-a{--kf:var(--acid)}
.sec.zs-dark .choices .ch-e{--kf:rgba(244,243,239,.38)}

/* Het amberlabel van de bron is op carbon onleesbaar (contrast 2,75).
   Op een donkere band wordt het het acid-label. */
.sec.zs-dark .steps .tag{
  color:var(--acid);background:rgba(198,244,50,.14);
}

/* Slotpaneel op carbon: acid-omlijnd, zoals de eindblokken van zeroslack.nl. */
.sec.zs-dark .final{border:2px solid var(--acid)}

/* ═══ 9. DE WITTE BAND ═════════════════════════════════════════════════════ */
/* zeroslack.nl zet één sectie op zuiver wit i.p.v. papier — een laboratorium-
   band tussen de carbonvlakken door. */

.sec.zs-white{background:#fff}
.sec.zs-white .card,
.sec.zs-white .final{background:#fff}
/* het bewijsblok blijft óók op de witte band een vol acid-vlak */
.sec.zs-white .proof{background:var(--acid)}

/* ═══ 10. TELEFOON ═════════════════════════════════════════════════════════ */

@media(max-width:900px){
  section.sec.hero{padding-top:clamp(96px,18vw,124px)}
  h1{max-width:none}
  h2{max-width:none}
}
@media(max-width:640px){
  section.sec{padding:clamp(56px,13vw,90px) 0}
  .cta-row .b{width:100%;justify-content:center;padding:16px 18px}
  .nlh nav{background:var(--paper)}
}