/* =============================================================
   Atlas - publieke pagina's (landing)
   Gedeeld door index.php (Atlas voor jou) en organisaties.php
   (Atlas voor organisaties). Beide pagina's hebben dezelfde bouwstenen en
   verschillen alleen in inhoud, kleuraccent en heroafbeelding.

   De KLEUREN komen uit de platform-instellingen en staan daarom in een klein
   inline :root-blok per pagina (landing/_head.php). Alles wat niet van die
   instellingen afhangt staat hier, zodat de browser het kan cachen.
   ============================================================= */

:root {
    /* De ruimte-, radius- en lijnschaal van het design system. Die staat normaal in
       css/style.css, maar de publieke pagina's laden alleen dit bestand: een marketingsite
       heeft niets te maken met de basisstijl van de app (knoppen, formulieren, tabellen).
       Daarom staat de schaal hier ook. Zelfde namen, zelfde waarden, zodat de ritmes gelijk
       blijven; wijkt er een af, dan meldt de toets dat (regel "Tokens per pagina").
       De maten die WEL van de marketingsite zijn staan eronder: die mogen ruimer, want een
       verhaalpagina heeft lucht nodig waar een werkscherm compact moet zijn. */
    --ruimte-1:        2px;
    --ruimte-2:        4px;
    --ruimte-3:        6px;
    --ruimte-4:        8px;
    --ruimte-5:       10px;
    --ruimte-6:       12px;
    --ruimte-7:       16px;
    --ruimte-8:       20px;
    --ruimte-9:       24px;
    --ruimte-10:      32px;
    --ruimte-11:      48px;
    --radius-2xs:      3px;
    --radius-md:      12px;
    --radius-pil:    999px;
    --lijn:            1px;
    --lijn-mid:      1.5px;

    /* Maten op EEN plek: een media query zet de variabele om, nooit dezelfde
       regel twee keer met een andere waarde. */
    --land-max:        1080px;
    --land-pad:        1.25rem;
    --radius:          16px;
    --radius-sm:       10px;
    --shadow:          0 10px 40px rgba(16, 42, 48, .10);
    --shadow-zacht:    0 4px 18px rgba(16, 42, 48, .08);
    --vak-y:           4.5rem;   /* verticale ruimte van een sectie */
    --hero-boven:      6rem;     /* lucht boven de herotekst */
    --hero-onder:      6.5rem;   /* en eronder */
    --kaart-min:       15rem;    /* smalste kolom in een kaartenraster */
    --prijskaart-min:  17rem;    /* smalste kolom in het prijzenraster */
    --prijs-groot:     2.6rem;   /* het bedrag in een prijskaart */
    --ink:             #1c2528;
    --muted:           #5c6b70;
    --bg:              #f7f9fa;
    --card:            #ffffff;
    --rand:            #d3dbde;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Outfit', system-ui, sans-serif;
    color: var(--ink); background: var(--bg); line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); }
.wrap { max-width: var(--land-max); margin: 0 auto; padding: 0 var(--land-pad); }
.visueel-verborgen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Knoppen ---------- */
.btn {
    display: inline-flex; align-items: center; gap: var(--ruimte-4);
    padding: var(--ruimte-5) var(--ruimte-8); border-radius: var(--radius-pil);
    font-weight: 700; font-size: .95rem; font-family: inherit;
    text-decoration: none; border: 0; cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border: var(--lijn) solid rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.btn-lijn { background: var(--card); color: var(--primary); border: var(--lijn-mid) solid var(--primary); }
.btn-lijn:hover { background: var(--primary-a08, rgba(0, 0, 0, .04)); }
.btn-blok { width: 100%; justify-content: center; }

/* ---------- Topbalk ---------- */
.top {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
    border-bottom: var(--lijn) solid rgba(0, 0, 0, .06);
}
/* padding-BLOCK, geen shorthand: .top-inner is ook een .wrap en die zet de
   horizontale marge. Een `padding: .85rem 0` zette die op nul, waardoor het
   logo en de knop Inloggen op mobiel tegen de schermrand plakten. */
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-7); padding-block: var(--ruimte-6); }
.brand {
    font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em;
    color: var(--primary); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--accent); }
.top nav { display: flex; gap: var(--ruimte-7); align-items: center; font-size: .92rem; }
/* :not(.btn) is hier de kern: zonder dat won `.top nav a` van `.btn-primary`
   (meer element-selectors) en kreeg de knop Inloggen grijze tekst op een
   groene vulling. Op hover werd hij zelfs groen op groen, dus onleesbaar. */
.top nav a:not(.btn) { text-decoration: none; color: var(--muted); font-weight: 600; }
.top nav a:not(.btn):hover { color: var(--primary); }
.top nav a:not(.btn).actief { color: var(--ink); }
.top nav a:not(.btn).actief::after {
    content: ''; display: block; height: 2px; border-radius: var(--radius-2xs);
    background: var(--accent); margin-top: var(--ruimte-1);
}

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; }
/* --hero-img wordt per pagina inline gezet, maar var() wordt HIER gebruikt, en een
   relatieve URL in een custom property lost de browser op tegen de stylesheet en niet
   tegen de pagina. De waarde begint daarom met ../ (vanaf css/ terug naar de app-root).
   Zonder dat zocht hij in css/img/landing/, kreeg hij de 302 naar index.php terug en
   tekende de laag niets: de hero was dan alleen de sluier, een grijsblauw verloop.
   Dat was jarenlang zo (gevonden 21-09-2026). Haal die ../ er dus niet "op" weg. */
.hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--hero-img); background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* De sluier moet twee dingen tegelijk doen: links donker genoeg voor witte tekst,
   rechts licht genoeg om de bannerfoto te laten zien. De oude waarden (93% links,
   28% rechts) waren daarvoor te zwaar; de foto's zetten hun onderwerp nu in de
   RECHTERhelft en de tekst staat links, dus de sluier houdt tot ongeveer de helft
   zijn dekking en zakt daarna snel weg (Henri wilde hem doorzichtiger, 21-09-2026).
   De 68% op de tekstplek is de ONDERGRENS en geen smaakkwestie: op een bijna witte
   foto geeft dat ongeveer 4,9:1 voor witte tekst, en de lead staat ook nog op
   opacity .94, dus daaronder zakt de body-tekst door de 4,5:1-grens. Wil je verder
   omlaag, geef de herotekst dan eerst een zachte text-shadow.
   Dit was NIET de reden dat de hero een grijsblauw verloop was; dat kwam door de
   relatieve URL hierboven. Beide zijn op 21-09-2026 aangepakt. */
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(6, 54, 58, .82) 0%,
        rgba(6, 54, 58, .68) 46%,
        rgba(6, 54, 58, .26) 70%,
        rgba(6, 54, 58, .04) 100%);
}
/* Zelfde reden als bij .top-inner: de shorthand zou de horizontale marge van
   .wrap wissen en de herotekst tegen de rand duwen. */
.hero-inner { position: relative; z-index: 1; padding-block: var(--hero-boven) var(--hero-onder); max-width: 40rem; }
.hero h1 {
    font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.12;
    font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--ruimte-7);
}
.hero h1 em { font-style: normal; color: #7fe0d4; }
.hero p.lead { font-size: 1.1rem; opacity: .94; margin-bottom: var(--ruimte-10); max-width: 34rem; }
.hero-cta { display: flex; gap: var(--ruimte-6); flex-wrap: wrap; }
.hero-kicker {
    display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #7fe0d4; margin-bottom: var(--ruimte-6);
}

/* ---------- Secties ---------- */
.vak { padding: var(--vak-y) 0; }
.vak-grijs { background: linear-gradient(180deg, #eef4f4 0%, var(--bg) 100%); }
.vak-kop { max-width: 44rem; margin-bottom: var(--ruimte-10); }
.vak-kop.midden { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
    display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: var(--ruimte-4);
}
.vak h2 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: var(--ruimte-5); }
.vak p.sub { color: var(--muted); }

/* ---------- Kaartenraster (voordelen, voorbeelden) ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kaart-min), 1fr)); gap: var(--ruimte-8); }
.kaart {
    background: var(--card); border-radius: var(--radius); padding: var(--ruimte-9);
    box-shadow: var(--shadow-zacht); border: var(--lijn) solid rgba(0, 0, 0, .04);
}
.kaart-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: var(--radius-md); margin-bottom: var(--ruimte-7);
    background: var(--primary-a12, rgba(0, 128, 128, .12)); color: var(--primary);
}
.kaart-icoon svg { width: 20px; height: 20px; }
.kaart-icoon.accent { background: var(--accent-a12, rgba(178, 4, 126, .12)); color: var(--accent); }
.kaart h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: var(--ruimte-3); }
.kaart p { color: var(--muted); font-size: .93rem; }

/* ---------- Prijskaarten ----------
   Zelfde bouwsteen als .kaart, maar met een vaste voet: de knop staat onderaan
   uitgelijnd hoe lang de opsomming erboven ook is. Geen pakket wordt uitgelicht
   (Henri, 16-09-2026): het vlagje "Meest gekozen" en de accentrand om Team zijn
   eruit, want Team en Enterprise voeren nu dezelfde call-to-action. */
.prijzen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--prijskaart-min), 1fr));
    gap: var(--ruimte-8); align-items: stretch;
}
.prijskaart {
    position: relative; display: flex; flex-direction: column;
    background: var(--card); border-radius: var(--radius); padding: var(--ruimte-9) var(--ruimte-9);
    box-shadow: var(--shadow-zacht); border: var(--lijn) solid rgba(0, 0, 0, .04);
}
.prijskaart h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: var(--ruimte-2); }
.prijskaart .voor { color: var(--muted); font-size: .9rem; min-height: 2.7rem; }
.prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ruimte-3); margin: var(--ruimte-6) 0 var(--ruimte-8); }
.prijs strong { font-size: var(--prijs-groot); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.prijs span { font-size: .85rem; color: var(--muted); }
.prijs.op-aanvraag strong { font-size: calc(var(--prijs-groot) * .6); }
/* align-content:start is hier geen detail maar de kern. De opsomming staat in de
   rij die meerekt (1fr), en .ticks is zelf een grid. Een grid dat hoger wordt dan
   zijn inhoud verdeelt die ruimte standaard OVER de rijen, dus de vier vinkjes van
   Enterprise dreven uit elkaar terwijl de acht van Team dicht op elkaar stonden.
   Met start blijven alle drie de lijsten bovenaan staan met dezelfde tussenruimte. */
.prijskaart .ticks { font-size: .92rem; margin-bottom: 0; align-content: start; }
.prijskaart .ticks svg { width: 16px; height: 16px; }
.prijskaart .prijs-optie { margin-top: auto; }
.prijskaart .btn { justify-content: center; }

/* ---------- Uitlijnen over de kolommen heen ----------
   De AI-regel, de knop en de voetnoot moeten in alle drie de kaarten op dezelfde
   hoogte staan, ook al is de ene opsomming langer dan de andere. Dat kan alleen als
   de kaarten hun RIJHOOGTES delen, en daar is subgrid voor: het raster legt acht
   rijen vast (icoon, titel, voor-wie, prijs, opsomming, AI-regel, knop, voetnoot) en
   elke kaart erft die. De vijfde rij is 1fr, dus de opsomming vangt het hoogteverschil
   op en alles eronder ligt gelijk. De voetnoot bestaat alleen bij Team; die rij blijft
   in de andere twee kaarten leeg, wat precies de bedoeling is.

   Zonder subgrid (oudere browsers) blijft de flex-kolom hierboven staan: dan lijnt
   alleen de onderkant uit. Vandaar dat dit een @supports is en geen vervanging. */
@supports (grid-template-rows: subgrid) {
    .prijzen {
        grid-template-rows: auto auto auto auto 1fr auto auto auto;
        /* De row-gap van het raster zou nu TUSSEN de acht rijen binnen elke kaart
           vallen, want de kaart spant ze allemaal. Vandaar 0; de ruimte tussen
           gestapelde kaarten komt van de marge op de kaart zelf. */
        row-gap: 0;
    }
    .prijskaart {
        display: grid;
        grid-row: span 8;
        grid-template-rows: subgrid;
        margin-bottom: var(--ruimte-8);   /* vervangt de row-gap die hierboven uit moest */
    }
    /* De 1fr-rij duwt nu, dus de marge die dat in de flex-versie deed moet weg. */
    .prijskaart .prijs-optie { margin-top: 0; }
    /* Niet meerekken over de hele rij: de knop houdt zijn eigen hoogte. */
    .prijskaart .btn { align-self: start; }
}
/* De optionele AI-module: hoort bij de prijs, dus boven de knop en met een lijn
   erboven die hem van de opsomming scheidt. */
.prijs-optie {
    display: flex; align-items: flex-start; gap: var(--ruimte-4);
    margin: 0 0 var(--ruimte-7); padding-top: var(--ruimte-7); border-top: var(--lijn) solid var(--rand);
    font-size: .88rem; color: var(--muted);
}
.prijs-optie svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: var(--ruimte-1); color: var(--accent); }
.prijs-optie strong { color: var(--ink); }
.prijs-noot { margin-top: var(--ruimte-6); font-size: .8rem; line-height: 1.45; color: var(--muted); text-align: center; }
.prijs-voet { margin-top: var(--ruimte-5); color: var(--muted); font-size: .88rem; }

/* ---------- Stappen ---------- */
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kaart-min), 1fr)); gap: var(--ruimte-8); counter-reset: stap; }
.stap { position: relative; padding-left: var(--ruimte-11); }
.stap::before {
    counter-increment: stap; content: counter(stap);
    position: absolute; left: 0; top: 0;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem;
}
.stap h3 { font-size: 1rem; font-weight: 800; margin-bottom: var(--ruimte-2); }
.stap p { color: var(--muted); font-size: .93rem; }

/* ---------- Vinklijst ---------- */
.ticks { list-style: none; display: grid; gap: var(--ruimte-4); }
.ticks li { display: flex; align-items: flex-start; gap: var(--ruimte-5); color: #2c3a3f; }
.ticks svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: var(--ruimte-2); color: var(--primary); }

/* ---------- Overstapstrook naar de andere pagina ---------- */
.overstap { padding: 2.6rem 0; background: var(--ink); color: #fff; }
.overstap-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-9); flex-wrap: wrap; }
.overstap h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 800; margin-bottom: var(--ruimte-2); }
.overstap p { color: rgba(255, 255, 255, .74); font-size: .95rem; max-width: 42rem; }

/* ---------- Demosectie: uitleg naast het formulier ----------
   Het formulier alleen vertelde niet waar iemand zich voor opgeeft. Links staat
   nu hoe de demo verloopt (agenda met tijden) en wat er daarna gebeurt, rechts
   het formulier zelf. Onder 800px zakt de uitleg boven het formulier. */
.demo-indeling {
    display: grid; grid-template-columns: 1fr minmax(0, 30rem);
    gap: var(--ruimte-11); align-items: start;
}
.demo-indeling .form-kaart { max-width: none; }
.demo-uitleg h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: var(--ruimte-8); }
.demo-uitleg .ticks { margin-top: var(--ruimte-9); }

/* De agenda: per blok een tijdpil links en de uitleg rechts. De pillen staan in
   een eigen kolom zodat de teksten onder elkaar uitlijnen. */
.agenda { list-style: none; display: grid; gap: var(--ruimte-8); }
.agenda li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--ruimte-8); align-items: start; }
.agenda-tijd {
    justify-self: start; padding: var(--ruimte-2) var(--ruimte-6);
    border-radius: var(--radius-pil); background: var(--primary-a12, rgba(0, 128, 128, .12));
    color: var(--primary); font-size: .8rem; font-weight: 800; white-space: nowrap;
}
.agenda strong { display: block; font-weight: 700; font-size: .98rem; margin-bottom: var(--ruimte-2); }
.agenda p { color: var(--muted); font-size: .93rem; }

/* ---------- Formulier ---------- */
.form-kaart { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--ruimte-10); max-width: 34rem; }
.veld { margin-bottom: var(--ruimte-7); }
.veld:last-of-type { margin-bottom: 0; }
label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: var(--ruimte-2); }
label .optie { font-weight: 400; color: var(--muted); }
input, textarea, select {
    width: 100%; padding: var(--ruimte-5) var(--ruimte-6); font: inherit; font-size: .95rem;
    border: var(--lijn) solid var(--rand); border-radius: var(--radius-sm); background: #fbfdfd; color: var(--ink);
}
input:focus, textarea:focus { outline: 2px solid var(--primary); border-color: transparent; }
textarea { resize: vertical; min-height: 5rem; }
.melding { border-radius: var(--radius-sm); padding: var(--ruimte-6) var(--ruimte-7); font-size: .9rem; margin-bottom: var(--ruimte-6); }
.melding-fout { background: #fdecec; color: #b3261e; }
.melding-goed { background: #e8f5ef; color: #0d6b45; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.klein { font-size: .85rem; color: var(--muted); }

/* ---------- Footer ---------- */
footer { padding: var(--ruimte-10) 0 var(--ruimte-11); text-align: center; color: var(--muted); font-size: .85rem; }
footer a { color: var(--muted); }
footer nav { display: flex; gap: var(--ruimte-7); justify-content: center; flex-wrap: wrap; margin-top: var(--ruimte-4); }

/* ---------- Pop-up (inloggen, omgeving aanmaken) ----------
   Geen aparte pagina meer: de bezoeker houdt de landingspagina achter zich.
   Zelfde opzet als de modals in de app: vaste kop, scrollende body. */
.modal-scrim {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(12, 28, 32, .55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: var(--ruimte-7);
}
.modal-scrim[hidden] { display: none; }
.modal {
    background: var(--card); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    width: 100%; max-width: 26rem; max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-kop {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ruimte-7);
    padding: var(--ruimte-8) var(--ruimte-9) var(--ruimte-7);
}
.modal-kop h2 { font-size: 1.2rem; font-weight: 800; }
.modal-kop p { font-size: .88rem; color: var(--muted); margin-top: var(--ruimte-1); }
.modal-sluit {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
    border: 0; background: rgba(0, 0, 0, .05); color: var(--muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.modal-sluit:hover { background: rgba(0, 0, 0, .1); color: var(--ink); }
.modal-sluit svg { width: 16px; height: 16px; }
.modal-body { padding: 0 var(--ruimte-9) var(--ruimte-9); overflow-y: auto; }
.modal .btn { margin-top: var(--ruimte-7); }
.link-knop {
    display: block; width: 100%; margin-top: var(--ruimte-6); padding: var(--ruimte-2) 0;
    background: none; border: 0; font: inherit; font-size: .87rem; font-weight: 600;
    color: var(--primary); cursor: pointer; text-align: center;
}
.link-knop:hover { text-decoration: underline; }
.btn-ms {
    display: flex; align-items: center; justify-content: center; gap: var(--ruimte-5);
    width: 100%; padding: var(--ruimte-6) var(--ruimte-7); margin-bottom: var(--ruimte-7);
    background: #fff; border: var(--lijn-mid) solid var(--rand); border-radius: var(--radius-sm);
    font: inherit; font-weight: 600; color: var(--ink); text-decoration: none;
}
.btn-ms:hover { background: #f7f9fa; }
.scheiding { display: flex; align-items: center; gap: var(--ruimte-6); margin: var(--ruimte-7) 0; color: var(--muted); font-size: .8rem; }
.scheiding::before, .scheiding::after { content: ''; flex: 1; height: 1px; background: var(--rand); }

/* ---------- Smalle schermen ---------- */
@media (max-width: 800px) {
    :root {
        --vak-y: 3rem; --land-pad: 1rem; --prijs-groot: 2.2rem;
        --hero-boven: 4rem; --hero-onder: 4.5rem;
    }
    .top nav { gap: var(--ruimte-6); font-size: .85rem; }
    .overstap-inner { flex-direction: column; align-items: flex-start; }
    .demo-indeling { grid-template-columns: 1fr; gap: var(--ruimte-10); }
    .agenda li { grid-template-columns: 1fr; gap: var(--ruimte-3); }
}
/* Nog smaller: de tekstlinks in de balk wijken, de knoppen blijven. De
   navigatie staat ook in de footer, dus er verdwijnt geen route. */
@media (max-width: 560px) {
    .top nav a:not(.btn) { display: none; }
    .brand { font-size: 1.15rem; }
}