/* ==========================================================================
   KlasVizier marketingsite, site.css
   Eén bestand, licht thema, geen externe requests. Kleuren en radii komen
   uit het designsysteem van de app (tokens.css) zodat de site en het
   programma dezelfde taal spreken.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Webfonts (self hosted, variabel 100 tot 900)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/outfit-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
    --blue: #2563eb;
    --blue-dark: #1e40af;
    --blue-light: #60a5fa;
    --tint: #eff6ff;

    --ink: #1f2937;
    --ink-2: #6b7280;
    --ink-3: #9ca3af;
    /* #6b7280 haalt op het zachte blauwe vlak net geen AA, dit wel. */
    --ink-2-tint: #5c6675;

    --bg: #f9fafb;
    --surface: #ffffff;
    --border: #e5e7eb;

    --green: #10b981;
    --amber: #f59e0b;
    --red: #ef4444;

    --r-btn: 0.5rem;
    --r-card: 0.75rem;
    --r-frame: 1rem;

    --nav-h: 72px;
    --shell: 1200px;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-head: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --lift-sm: 0 1px 2px rgba(30, 64, 175, 0.06), 0 4px 10px -4px rgba(30, 64, 175, 0.10);
    --lift: 0 1px 2px rgba(30, 64, 175, 0.06), 0 10px 22px -10px rgba(30, 64, 175, 0.18);
    --lift-frame: 0 1px 2px rgba(30, 64, 175, 0.08),
                  0 14px 28px -12px rgba(30, 64, 175, 0.20),
                  0 40px 72px -30px rgba(30, 64, 175, 0.28);
}

/* --------------------------------------------------------------------------
   3. Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; }

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.5);
    outline-offset: 3px;
    border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 100;
    background: var(--surface);
    color: var(--blue-dark);
    font-weight: 600;
    padding: 0.7rem 1.1rem;
    border-radius: var(--r-btn);
    box-shadow: var(--lift);
    transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   4. Knoppen, het ui-btn idioom van de app
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn--lg { padding: 0.8rem 1.6rem; font-size: 1rem; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn:active { transform: scale(0.98); }

.btn--primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.16);
}
.btn--primary:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--lift-sm);
}
.btn--primary:active { transform: scale(0.98); }

.btn--secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink);
}
.btn--secondary:hover {
    border-color: var(--blue-light);
    color: var(--blue);
    transform: translateY(-1px);
    box-shadow: var(--lift-sm);
}
.btn--secondary:active { transform: scale(0.98); }

/* Op het blauwe herovlak keren de knoppen om, zodat het contrast klopt. */
.btn--on-blue-primary {
    background: #fff;
    border-color: #fff;
    color: var(--blue-dark);
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.45);
}
.btn--on-blue-primary:hover {
    background: var(--tint);
    border-color: var(--tint);
    color: var(--blue-dark);
    transform: translateY(-1px);
}
.btn--on-blue-primary:active { transform: scale(0.98); }

.btn--on-blue-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.btn--on-blue-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}
.btn--on-blue-secondary:active { transform: scale(0.98); }

/* --------------------------------------------------------------------------
   5. Topnav
   -------------------------------------------------------------------------- */
#nav-sentinel {
    position: absolute;
    top: 40px;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: var(--nav-h);
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Vangnet: zolang de balk doorzichtig is ligt er een lichte donkere waas onder.
   Op de hero is dat een subtiele vignettering, en witte tekst blijft leesbaar
   ook als de balk om welke reden dan ook nog niet is omgeslagen. */
.site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.30), rgba(15, 23, 42, 0));
    transition: opacity 0.25s ease;
}
.site-nav.is-solid::before { opacity: 0; }
.site-nav.is-solid {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--border);
}
.site-nav__inner {
    height: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-nav__actions { display: flex; align-items: center; gap: 0.6rem; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    transition: color 0.25s ease;
}
.brand__mark { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }
.brand__word {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.site-nav.is-solid .brand { color: var(--blue-dark); }

/* Voor de scroll staat de nav op het blauw, daarna op wit. */
.site-nav:not(.is-solid) .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--blue-dark);
}
.site-nav:not(.is-solid) .btn--primary:hover { background: var(--tint); border-color: var(--tint); }
.site-nav:not(.is-solid) .btn--secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.site-nav:not(.is-solid) .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}
.site-nav:not(.is-solid) :focus-visible { outline-color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    padding: calc(var(--nav-h) + 3rem) 0 0;
    background: linear-gradient(165deg, #1e40af 0%, #2563eb 52%, #3b82f6 100%);
    color: #fff;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
/* Bewust geen filter: blur() op deze vlakken. Een radiaal verloop is uit
   zichzelf al zacht, terwijl een blur van 70px op een vlak van 700 bij 700
   pixels elk frame opnieuw gerasterd moet worden zodra het vlak beweegt.
   Gemeten kostte dat de helft van de framerate tijdens de hele hero. */
.hero__glow {
    position: absolute;
    border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.hero__glow--a {
    width: 62vw; height: 62vw;
    top: -22vw; left: -19vw;
    background: radial-gradient(circle closest-side,
                rgba(147, 197, 253, 0.50) 0%,
                rgba(147, 197, 253, 0.34) 30%,
                rgba(147, 197, 253, 0.14) 56%,
                rgba(147, 197, 253, 0) 78%);
}
.hero__glow--b {
    width: 70vw; height: 70vw;
    top: 10vh; right: -26vw;
    background: radial-gradient(circle closest-side,
                rgba(255, 255, 255, 0.28) 0%,
                rgba(255, 255, 255, 0.18) 32%,
                rgba(255, 255, 255, 0.07) 58%,
                rgba(255, 255, 255, 0) 80%);
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero__copy { text-align: center; max-width: 54rem; }
.hero__title {
    font-size: clamp(2.4rem, 5.4vw, 4.15rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.hero__sub {
    margin: 1.15rem auto 0;
    max-width: 34rem;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    color: rgba(255, 255, 255, 0.92);
}
.hero__cta {
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.hero__scene {
    width: 100%;
    margin-top: clamp(2rem, 5vh, 3.5rem);
    perspective: 1000px;
    perspective-origin: 50% 8%;
}
.hero__stage {
    position: relative;
    width: min(980px, 100%);
    margin: 0 auto;
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Slagschaduw die met de kanteling meegaat: verder weg is groter en zachter.
   Alleen transform en opacity, dus dit kost niets tijdens de scrub. */
.hero__cast {
    position: absolute;
    left: 3%;
    right: 3%;
    top: 12%;
    height: 96%;
    border-radius: 50% / 26%;
    background: radial-gradient(ellipse at 50% 50%,
                rgba(6, 17, 44, 0.55) 0%,
                rgba(6, 17, 44, 0.30) 42%,
                rgba(6, 17, 44, 0.09) 66%,
                rgba(6, 17, 44, 0) 82%);
    opacity: 0;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Lichtstreep die tijdens het oprichten één keer over het scherm trekt. */
.frame__sheen {
    position: absolute;
    top: -30%;
    left: 0;
    width: 24%;
    height: 160%;
    background: linear-gradient(104deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.16) 32%,
                rgba(255, 255, 255, 0.72) 50%,
                rgba(255, 255, 255, 0.16) 68%,
                rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   7. Schermbeeldframes
   -------------------------------------------------------------------------- */
.frame {
    margin: 0;
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-frame);
    border: 1px solid var(--border);
    background: var(--tint);
    overflow: hidden;
    /* Het licht komt linksboven vandaan, dus daar ligt de randhighlight. */
    box-shadow: var(--lift-frame),
                inset 1px 1px 0 rgba(255, 255, 255, 0.9);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: var(--ink-2);
    font-size: 0.8rem;
}
.frame--hero {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 4px rgba(6, 17, 44, 0.14),
                0 24px 44px -20px rgba(6, 17, 44, 0.38),
                0 60px 100px -40px rgba(6, 17, 44, 0.45),
                inset 1px 1px 0 rgba(255, 255, 255, 0.55);
}
/* Waas die het achterste beeld laat wegzakken als het naar achter gaat. */
.frame__dim {
    position: absolute;
    inset: 0;
    background: #0b1e42;
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Sectiebasis
   -------------------------------------------------------------------------- */
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section[id], .pillar[id], .leerling[id] { scroll-margin-top: var(--nav-h); }
.section--light { background: var(--surface); }
.section--tint { background: var(--bg); }
.section--calm { background: var(--surface); }
.section--form { background: var(--bg); }

.section__head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section__title {
    font-size: clamp(1.75rem, 3.1vw, 2.6rem);
}
.section__lead {
    margin-top: 1rem;
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    color: var(--ink-2);
    max-width: 42rem;
}

/* --------------------------------------------------------------------------
   9. Kaarten
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 1.65rem 1.75rem;
    box-shadow: var(--lift-sm);
}
.card__icon {
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--blue);
    display: block;
    margin-bottom: 1rem;
}
.card__title {
    font-size: 1.16rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.card__text { color: var(--ink-2); font-size: 0.95rem; }

.badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--tint);
    color: var(--blue-dark);
    border: 1px solid #bfdbfe;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Sectie 2: asymmetrisch trio, één grote kaart plus twee kleinere */
.trio {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}
.trio .card--wide {
    grid-column: span 7;
    background: var(--tint);
    border-color: #dbeafe;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem 2.25rem;
}
.trio .card--wide .card__icon { width: 1.75rem; height: 1.75rem; margin-bottom: 1.35rem; }
.trio .card--wide .card__title { font-size: 1.45rem; margin-bottom: 0.7rem; }
.trio .card--wide .card__text { font-size: 1.02rem; color: var(--ink-2-tint); }
.trio .card:not(.card--wide) { grid-column: span 5; }

/* --------------------------------------------------------------------------
   10. Pijlersecties (gepind op desktop, dus alles past in één beeld)
   -------------------------------------------------------------------------- */
.pillar {
    display: flex;
    align-items: center;
    padding: 4rem 0;
}
@media (min-width: 900px) {
    /* Gepinde secties zijn precies één beeld hoog, dus alles past altijd. */
    .pillar {
        min-height: 100dvh;
        padding: calc(var(--nav-h) + 2rem) 0 3rem;
    }
}
.pillar__inner { width: 100%; }
.pillar--inzicht { background: var(--bg); }
.pillar--rooster { background: var(--bg); }

.pillar .section__title { font-size: clamp(1.7rem, 2.7vw, 2.3rem); }

/* Sectie 3: split plus een strook doelkaartjes eronder */
.pillar__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.feats { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.feats__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.95rem;
    color: var(--ink);
}
.feats__icon {
    width: 1.05rem; height: 1.05rem;
    fill: var(--blue);
    flex: none;
    margin-top: 0.28rem;
}

.stack { position: relative; height: clamp(250px, 47vh, 460px); perspective: 1600px; }
.stack__frame {
    position: absolute;
    width: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.stack__frame--back { top: 0; right: 0; height: 78%; }
.stack__frame--front { bottom: 0; left: 0; height: 56%; z-index: 1; }

.chips {
    list-style: none;
    margin: clamp(2rem, 4vh, 3rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.7rem;
    perspective: 1100px;
    perspective-origin: 50% 40%;
}
.chip { position: relative; transform-style: preserve-3d; }
.chip__face {
    position: relative;
    display: grid;
    gap: 0.1rem;
    align-content: center;
    min-height: 4.1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.chip__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
.chip__label { font-size: 0.82rem; font-weight: 600; line-height: 1.25; }
.chip__state { font-size: 0.72rem; color: var(--ink-2); }
.chip__icon {
    position: absolute; top: 0.65rem; right: 0.7rem;
    width: 0.78rem; height: 0.78rem;
}
.chip__face--front .chip__label { color: var(--ink-2); }
.chip__face--done {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.07);
}
.chip__face--done .chip__state { color: #047857; }
.chip__face--done .chip__icon { fill: var(--green); }
.chip__face--almost {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.09);
}
.chip__face--almost .chip__state { color: #b45309; }

/* Sectie 4: de weektaak als verticale tijdlijn. Links plakt de stapnaam op
   zijn plek terwijl rechts het schermbeeld voorbijkomt. Over de volle hoogte
   loopt een dunne lijn die aan beide uiteinden uitfadet, met daarover een
   blauwe lijn die met de scrollpositie meegroeit.

   De sectie mag iets breder dan de rest van de pagina: de schermbeelden staan
   naast een kolom met de stapnaam en zouden anders te klein worden om nog iets
   van te zien. De kop houdt zijn eigen regellengte, dus die leest rustig door. */
.container--wt { max-width: 1320px; }

.wt__head { max-width: 52rem; margin-bottom: 0; }
.wt__head .section__lead { max-width: 48rem; }
.wt__kicker {
    margin-top: 1.1rem;
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--blue);
}

.tl {
    --tl-dot: 36px;
    position: relative;
    padding: 4.5rem 0 6rem;
}
.tl__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--tl-dot) / 2 - 1px);
    width: 2px;
    border-radius: 2px;
    background: var(--border);
    pointer-events: none;
    /* De uitfade staat in pixels en niet in procenten. De lijn is duizenden
       pixels lang, en een fade van tien procent zou de eerste en de laatste
       stap volledig laten verdwijnen. */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 72px, #000 calc(100% - 64px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 72px, #000 calc(100% - 64px), rgba(0, 0, 0, 0) 100%);
}
/* Groeit met scaleY, niet met height: dat is een transform en kost dus geen
   herberekening van de opmaak tijdens het scrollen. */
.tl__fill {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    /* De laatste procenten lopen naar doorzichtig, zodat de kop van de lijn
       zacht eindigt in plaats van met een recht afgesneden randje. */
    background: linear-gradient(to bottom,
                var(--blue-dark) 0%,
                var(--blue) 45%,
                var(--blue-light) 97%,
                rgba(96, 165, 250, 0) 100%);
    transform-origin: 50% 0%;
}

.tl__list { list-style: none; margin: 0; padding: 0; }
.tl__item {
    display: grid;
    grid-template-columns: clamp(215px, 21vw, 300px) minmax(0, 1fr);
    gap: clamp(1.4rem, 2.6vw, 2.5rem);
    padding-bottom: clamp(4.5rem, 9vh, 7rem);
}
.tl__item:last-child { padding-bottom: 0; }

.tl__side { position: relative; }
.tl__sticky {
    position: sticky;
    top: calc(var(--nav-h) + 3rem);
    min-height: var(--tl-dot);
    padding-left: calc(var(--tl-dot) + 1.1rem);
}
.tl__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--tl-dot);
    height: var(--tl-dot);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--blue-light);
    /* Witte rand eromheen, zodat de lijn niet tegen het punt aan loopt. */
    box-shadow: 0 0 0 5px var(--surface);
    transition: border-color 0.3s ease;
}
.tl__dot::after {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--blue);
    transition: background-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl__step {
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--blue);
    transition: color 0.3s ease;
}
.tl__title {
    margin-top: 0.3rem;
    font-size: clamp(1.3rem, 2.2vw, 1.95rem);
    color: var(--ink);
    transition: color 0.3s ease;
}
.tl__note {
    margin-bottom: 1rem;
    max-width: 42rem;
    color: var(--ink-2);
    font-size: clamp(1rem, 1.1vw, 1.06rem);
    text-wrap: pretty;
}
@media (min-width: 900px) {
    /* Er is altijd ruimte voor twee regels. Een stap met een langere
       toelichting duwt zijn schermbeeld dan niet uit het gelid, en drie
       regels passen er nog steeds gewoon onder. */
    .tl__note { min-height: 3.3em; }
}
/* Bewust breder dan 16/10: object-position snijdt zo de bovenste vijfde van
   het schermbeeld weg, precies de app-eigen stapbalk. Die zou anders dubbelop
   zijn met de nummering van deze tijdlijn. */
.tl__frame {
    aspect-ratio: 16 / 8;
    /* Lichter dan het herobeeld: acht van deze frames onder elkaar met de
       volle slagschaduw kost te veel tekentijd tijdens het scrollen. */
    box-shadow: var(--lift), inset 1px 1px 0 rgba(255, 255, 255, 0.9);
}
.tl__frame img { object-position: 50% 100%; }

/* Zolang de scrollchoreografie echt draait, staan de stappen die je nog niet
   bereikt hebt gedempt. Zonder die choreografie (smal scherm, beweging uit,
   of GSAP die niet laadt) staat alles meteen in de eindstand. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .js-motion .tl__fill { transform: scaleY(0); opacity: 0; will-change: transform, opacity; }
    .js-motion .tl__body { opacity: 0; transform: translate3d(0, 24px, 0); }
    .js-motion .tl__dot { border-color: var(--border); }
    .js-motion .tl__dot::after { background: var(--ink-3); }
    .js-motion .tl__step { color: var(--ink-2); }
    .js-motion .tl__title { color: var(--ink-2); }

    .js-motion .tl__item.is-live .tl__dot { border-color: var(--blue-light); }
    .js-motion .tl__item.is-live .tl__dot::after { background: var(--blue); transform: scale(1.08); }
    .js-motion .tl__item.is-live .tl__step { color: var(--blue); }
    .js-motion .tl__item.is-live .tl__title { color: var(--ink); }
}

/* Sectie 5: ankers links, rooster schuift van rechts in */
.rooster__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.anchors { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.anchor { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.3rem; }
.anchor__icon {
    grid-row: span 2;
    width: 1.6rem; height: 1.6rem;
    padding: 0.45rem;
    box-sizing: content-box;
    border-radius: var(--r-btn);
    background: var(--tint);
    fill: var(--blue);
    margin-top: 0.15rem;
}
.anchor__title { font-size: 1.05rem; line-height: 1.35; }
.anchor__text { color: var(--ink-2); font-size: 0.94rem; }

.rooster__media { perspective: 1300px; perspective-origin: 65% 45%; }
.frame--rooster {
    width: min(100%, calc(46vh * 1.6));
    margin-left: auto;
    transform-style: preserve-3d;
}
.rooster__badge {
    position: absolute;
    left: 6%;
    bottom: 8%;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-2);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: var(--lift);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.rooster__badge-icon { width: 0.8rem; height: 0.8rem; fill: var(--ink-3); transition: fill 0.3s ease; }
.rooster__badge.is-done { color: #047857; border-color: rgba(16, 185, 129, 0.5); }
.rooster__badge.is-done .rooster__badge-icon { fill: var(--green); }

/* --------------------------------------------------------------------------
   11. Sectie 6: vier kaarten in een asymmetrisch raster
   -------------------------------------------------------------------------- */
.grid4 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}
.card--a { grid-column: span 4; }
.card--b {
    grid-column: span 8;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}
.card--b .card__body { flex: 1 1 auto; min-width: 0; }
.card--b .frame--inline { flex: 0 0 258px; }
.card--c { grid-column: span 5; }
.card--d { grid-column: span 7; }
.frame--inline { box-shadow: var(--lift); }

/* --------------------------------------------------------------------------
   12. Sectie 7: leerlingapp
   -------------------------------------------------------------------------- */
.leerling {
    background: var(--tint);
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
    perspective: 1300px;
    perspective-origin: 50% 30%;
}
.leerling__head { max-width: 44rem; margin: 0 auto clamp(2.25rem, 4vw, 3rem); text-align: center; }
.leerling__head .section__lead { margin-left: auto; margin-right: auto; color: var(--ink-2-tint); }
.leerling__icon { width: 2rem; height: 2rem; fill: var(--blue); margin-bottom: 1rem; }
.frame--leerling { width: min(920px, 100%); margin: 0 auto; transform-style: preserve-3d; }

/* --------------------------------------------------------------------------
   13. Sectie 8: goed geregeld, bewust stil
   -------------------------------------------------------------------------- */
.calm { max-width: 56rem; }
.checks {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 2.5rem;
}
.checks__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.98rem;
}
.checks__icon {
    width: 0.95rem; height: 0.95rem;
    fill: var(--green);
    flex: none;
    margin-top: 0.4rem;
}
.calm__note {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink-2);
    font-size: 0.95rem;
}
.calm__note-icon { width: 1rem; height: 1rem; fill: var(--blue); flex: none; }

/* --------------------------------------------------------------------------
   14. Sectie 9: interesseformulier
   -------------------------------------------------------------------------- */
.form__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.form__mail {
    margin-top: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink-2);
    font-size: 0.95rem;
}
.form__mail-icon { width: 1rem; height: 1rem; fill: var(--blue); flex: none; }

.form__panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--lift);
}
.form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}
.field { display: grid; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field__opt { font-weight: 400; color: var(--ink-2); }
.field__input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field__input:hover { border-color: var(--ink-3); }
.field__input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.field__input:focus-visible { outline: none; }
.field__input--area { resize: vertical; min-height: 5.5rem; }
.field__input[aria-invalid="true"] { border-color: var(--red); }

.form__error {
    margin-bottom: 0.9rem;
    /* Donkerder dan de randkleur, anders haalt de tekst AA niet op wit. */
    color: #dc2626;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
}
.form__error.is-visible { display: block; }
.form__submit { width: 100%; }
.form__submit[disabled] { opacity: 0.7; cursor: progress; }
.form__legal {
    margin-top: 0.75rem;
    color: var(--ink-2);
    font-size: 0.8rem;
    line-height: 1.5;
}
.form__legal a { color: inherit; text-decoration: underline; }
.form__legal a:hover { color: var(--blue); }

/* De zwevende reCAPTCHA-badge mag weg, omdat .form__legal de vermelding
   bij de verzendknop toont (zo staat het in Googles voorwaarden). */
.grecaptcha-badge { visibility: hidden; }

.hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Bevestiging na verzenden, met een vinkje dat zichzelf tekent */
.sent { display: grid; justify-items: start; gap: 0.85rem; }
.sent__mark { width: 3.25rem; height: 3.25rem; flex: none; }
.sent__mark circle, .sent__mark path {
    fill: none;
    stroke: var(--green);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sent__circle { stroke-dasharray: 145; stroke-dashoffset: 0; }
.sent__check { stroke-dasharray: 34; stroke-dashoffset: 0; }
.sent__title { font-size: 1.3rem; }
.sent__text { color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
    .sent__circle {
        stroke-dashoffset: 145;
        animation: kv-draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }
    .sent__check {
        stroke-dashoffset: 34;
        animation: kv-draw 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
    }
}
@keyframes kv-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-foot {
    background: var(--blue-dark);
    color: rgba(255, 255, 255, 0.82);
    padding: 2.75rem 0;
    font-size: 0.92rem;
}
.site-foot__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
}
.site-foot__brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1rem; }
.brand--foot { color: #fff; }
.brand--foot .brand__word { font-size: 1.1rem; }
.site-foot__payoff { color: rgba(255, 255, 255, 0.72); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.site-foot__links a {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-bottom: 1px solid transparent;
}
.site-foot__links a:hover { border-bottom-color: rgba(255, 255, 255, 0.6); color: #fff; }
.site-foot__icon { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.site-foot :focus-visible { outline-color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   16. Bewegingsstanden
   Zonder de klasse js-motion staat alles meteen op zijn plek. Die klasse
   komt er alleen bij als de bezoeker beweging niet heeft uitgezet.
   -------------------------------------------------------------------------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(30px); }

/* Doelkaartjes tonen standaard hun eindstand, plat en zonder 3D. Alleen op
   de grote choreografie draaien ze mee vanaf de grijze kant. */
.chip__face--front { visibility: hidden; }
.chip__face--back { transform: none; }

@media (min-width: 900px) {
    /* Beginstanden in dezelfde volgorde als GSAP ze schrijft, zodat er bij het
       opstarten van de tijdlijn geen sprongetje zit. */
    .js-motion .hero__stage { transform: translate3d(0, 7%, 0) rotateX(52deg) scale(1.16); }
    .js-motion .hero__cast { opacity: 0.85; transform: scale3d(0.84, 0.72, 1); }
    .js-motion .chip { transform: rotateY(0deg); }
    .js-motion .chip__face--front { visibility: visible; }
    .js-motion .chip__face--back { transform: rotateY(180deg); }
    .js-motion .frame--rooster { transform: translate3d(19%, 7%, 0) rotateX(7deg) rotateY(-16deg) scale(0.88); }
    .js-motion .anchor { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.97); }
    .js-motion .frame--leerling { transform: translate3d(0, 36px, 0) rotateY(12deg) scale(0.94); }
}

/* Laagpromotie staat vast op de handvol elementen die een hele scrub lang
   bewegen. Bewust niet tijdens de beweging aan en uit zetten: dan promoveert
   en degradeert de browser de laag midden in de animatie en zie je een flits. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .js-motion .hero__stage,
    .js-motion .hero__glow,
    .js-motion .stack__frame,
    .js-motion .frame--rooster,
    .js-motion .frame--leerling,
    .js-motion .chip { will-change: transform; }

    .js-motion .hero__copy,
    .js-motion .hero__cast,
    .js-motion .frame__sheen { will-change: transform, opacity; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   17. Responsief
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .card--b { grid-template-columns: 1fr 210px; }
    .chips { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899px) {
    :root { --nav-h: 64px; }

    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-h) + 2.25rem);
        padding-bottom: 3.5rem;
    }
    .hero__title { font-size: clamp(2.1rem, 8vw, 3rem); }
    .hero__scene { perspective: none; }
    .hero__stage { width: 100%; }

    .pillar { padding: 4rem 0; }
    .pillar__grid,
    .rooster__grid,
    .form__grid { grid-template-columns: minmax(0, 1fr); }

    .trio .card--wide,
    .trio .card:not(.card--wide) { grid-column: span 12; }

    .stack { height: auto; padding-bottom: 18%; }
    .stack__frame { position: relative; height: auto; width: 100%; }
    .stack__frame--front {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 56%;
        height: auto;
    }
    .stack__frame--back { width: 88%; margin-left: auto; }

    .frame--rooster { width: 100%; }
    .rooster__media { perspective: none; }

    .card--a, .card--b, .card--c, .card--d { grid-column: span 12; }
    .card--b { flex-direction: column; align-items: stretch; gap: 1.25rem; }
    .card--b .frame--inline { flex: 0 0 auto; width: 100%; }

    .leerling { perspective: none; }
    .checks { grid-template-columns: minmax(0, 1fr); }

    /* Zonder scrollchoreografie is de tijdlijn een gewone lijst onder elkaar:
       geen lijn, niets dat plakt, stapnaam boven het beeld. */
    .tl { padding: 2.25rem 0 0; }
    .tl__line { display: none; }
    .tl__item {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-bottom: 2.75rem;
    }
    .tl__sticky { position: static; padding-left: 0; min-height: 0; }
    .tl__dot { display: none; }
    .tl__title { font-size: 1.3rem; }
    .tl__note { margin: 0.55rem 0 0.9rem; font-size: 0.95rem; }
}

@media (max-width: 640px) {
    .container { padding: 0 1.15rem; }
    .site-nav__inner { padding: 0 1.15rem; }
    .brand__word { font-size: 1.05rem; }
    .site-nav__actions { gap: 0.4rem; }
    .site-nav .btn--sm { padding: 0.45rem 0.75rem; font-size: 0.8rem; }

    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .btn { width: 100%; }

    .card { padding: 1.35rem 1.35rem; }
    .chips { grid-template-columns: repeat(2, 1fr); }
    .form { grid-template-columns: minmax(0, 1fr); }
    .site-foot__inner { flex-direction: column; align-items: flex-start; }
}