/* RDZ V13 design system - 'Het Instrument' - tokens bovenaan */
/* ══════════ TOKENS — officiële RDZ-huisstijl (Kleuren.docx + Brand Brein h10) ══════════
   Palet: #6E452A primair diepbruin · #2C4F2A donkergroen · #04532B logo-groen
          #4F4947 aardse grijs · #8E7D6D licht beige · #F5F5F5 wit · #F2F1EF logo-wit
   Fonts: Montserrat Semibold (display) + Source Sans 3 (body); mono alleen als instrument-accent
   Donkere ink-tinten zijn schades van de brand-groenen; --accent is een tint van primair #6E452A. */
        :root {
            --ink-0: #0A140D;
            --ink-1: #0C1810;
            --ink-2: #122117;
            --ink-scan: #0A0F0B;   /* de onderzoekskamer van sectie 04, het donkerste vlak */
            /* mengkleuren precies halverwege twee sectiekleuren; hier raken de
               verlopen van boven- en onderbuur elkaar op dezelfde waarde */
            --naad-12: #0F1D14;    /* ink-1 <-> ink-2 */
            --naad-10: #0B160F;    /* ink-1 <-> ink-0 */
            --naad-0s: #0A120C;    /* ink-0 <-> scan  */
            --naad-s1: #0B140E;    /* scan  <-> ink-1 */
            --naad-20: #0E1B12;    /* ink-2 <-> ink-0 */
            --ink-3: #2C4F2A;
            --green-logo: #04532B;
            --cream: #F2F1EF;
            --cream-80: rgba(242,241,239,.8);
            --cream-60: rgba(242,241,239,.6);
            --cream-40: rgba(242,241,239,.4);
            --cream-25: rgba(242,241,239,.25);
            --cream-20: rgba(242,241,239,.2);
            --line: rgba(242,241,239,.09);
            --accent: #9E7150;
            --accent-deep: #6E452A;
            --accent-dim: rgba(158,113,80,.4);
            --paper: #F2F1EF;
            --paper-dark: #E5E2DC;
            --ink-on-paper: #17281B;
            --grey-on-paper: #4F4947;
            --font-display: 'Montserrat', system-ui, sans-serif;
            --font-ui: 'Source Sans 3', system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --ease: cubic-bezier(.25,.46,.45,.94);
            --ease-expo: cubic-bezier(.16,1,.3,1);
            --t: .3s cubic-bezier(.25,.46,.45,.94);
            --r-card: 14px;
            --sp: clamp(5rem, 10vw, 8.5rem);
            --mw: 1200px;
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-ui); color: var(--cream-80); background: var(--ink-1); line-height: 1.75; font-size: 1.06rem; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
        img { max-width: 100%; display: block; }
        ::selection { background: var(--accent); color: var(--ink-0); }

        h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; color: var(--cream); }
        h1 { font-size: clamp(2.9rem, 7.5vw, 6.4rem); }
        h2 { font-size: clamp(2rem, 4.8vw, 3.6rem); }
        h3 { font-size: 1.25rem; font-weight: 600; }
        h1 em, h2 em { font-style: italic; color: var(--accent); }
        p { margin-bottom: 1.25rem; }
        p:last-child { margin-bottom: 0; }

        .container { width: 90%; max-width: var(--mw); margin: 0 auto; }
        .narrow { max-width: 780px; margin-left: auto; margin-right: auto; }
        section { padding: var(--sp) 0; position: relative; overflow: hidden; }

        /* ══════════ Instrument-taal ══════════ */
        .kicker { display: flex; align-items: center; gap: .9rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 2.25rem; }
        .kicker::after { content: ''; display: block; width: 3rem; height: 1px; background: var(--accent-dim); transform-origin: left; }
        .rv.in .kicker::after, .rv-group.in .kicker::after { animation: kline 1.1s var(--ease-expo) both; }
        @keyframes kline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .kicker--paper { color: var(--accent-deep); }

        .pill { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-60); border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem; white-space: nowrap; }
        .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-dim); flex-shrink: 0; }
        .pill .dot--pulse { animation: pulse 2.4s ease infinite; }
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
        /* Live-signaal: groen punt dat knippert, zoals een opnamelampje. Staat nu
           in de knop zelf, want een aparte pill die naar dezelfde plek linkt is
           een tweede knop met minder gewicht. */
        .dot--live { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #4ade80; box-shadow: 0 0 9px rgba(74,222,128,.75); animation: knipper 1.8s ease-in-out infinite; }
        .btn__row .dot--live { margin-right: -.45rem; }
        @keyframes knipper { 0%, 100% { opacity: 1; box-shadow: 0 0 9px rgba(74,222,128,.75); } 50% { opacity: .25; box-shadow: 0 0 3px rgba(74,222,128,.3); } }
        @media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } }
        .pill .star { color: var(--accent); }

        /* Ghost-hoofdstukwoorden */
        .ghost { position: absolute; right: -2%; bottom: -.08em; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(7rem, 24vw, 21rem); line-height: 1; color: rgba(242,241,239,.035); pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; will-change: transform; }
        .scene--paper .ghost { color: rgba(23,40,27,.045); }
        /* Een reuzenwoord dat hard stopt leest als een renderfout. Sitebreed laten
           uitvagen, net als op Hoe ik kijk. */
        .ghost { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.5) 72%, transparent 97%); mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.5) 72%, transparent 97%); }
        section > .container { position: relative; z-index: 1; }

        /* ══════════ Knoppen ══════════ */
        .btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; background: var(--cream); color: var(--ink-0); padding: 1rem 1.6rem 1rem 1.9rem; text-decoration: none; border-radius: 999px; border: 1px solid var(--cream); transition: transform .35s var(--ease-expo), background var(--t), box-shadow var(--t); cursor: pointer; will-change: transform; }
        .btn__row { display: flex; align-items: center; gap: 1rem; font-family: var(--font-ui); font-weight: 600; font-size: .98rem; letter-spacing: .01em; }
        /* Lange dunne pijl (uitgerekt glyph): editorial, schuift bij hover verder naar voren */
        .btn__arrow { display: inline-flex; align-items: center; justify-content: center; font-size: .9em; opacity: .75; transform: scaleX(1.45); transform-origin: left center; transition: transform .35s var(--ease-expo), opacity var(--t); flex-shrink: 0; }
        .btn:hover { background: #fff; box-shadow: 0 14px 44px rgba(0,0,0,.35); }
        .btn:hover .btn__arrow { transform: scaleX(1.45) translateX(4px); opacity: 1; }
        .btn__sub { font-family: var(--font-mono); font-weight: 400; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; padding-left: .1rem; }
        .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink-0); }
        .btn--accent .btn__arrow { color: inherit; }
        .btn--accent:hover { background: #CE9463; box-shadow: 0 14px 44px rgba(192,133,82,.25); }
        .btn--ghost { background: transparent; border-color: rgba(242,241,239,.28); color: var(--cream); }
        .btn--ghost .btn__arrow { color: inherit; }
        .btn--ghost:hover { background: rgba(242,241,239,.06); border-color: var(--cream-60); box-shadow: none; }
        .btn--ink { background: var(--ink-3); border-color: var(--ink-3); color: var(--cream); }
        .btn--ink .btn__arrow { color: inherit; }
        .btn--ink:hover { background: var(--ink-2); box-shadow: 0 14px 44px rgba(12,24,16,.3); }
        .textlink { color: var(--cream-60); font-size: .92rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent-dim); transition: color var(--t); }
        .textlink:hover { color: var(--cream); }

        /* ══════════ Intro-opening ══════════ */
        .intro { position: fixed; inset: 0; z-index: 1000; background: var(--ink-0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; cursor: pointer; transition: opacity .8s var(--ease); padding: 0 8%; text-align: center; }
        .intro.is-done { opacity: 0; pointer-events: none; }
        /* 19-08 · De twee regels stonden in dezelfde letter op dezelfde maat,
           dus er was geen hiërarchie: twee koppen naast elkaar in plaats van
           een uitspraak met een conclusie.

           Nu draagt regel 1 het moment in Montserrat, en volgt regel 2 als een
           kleinere schreefletter in cursief. Het verschil in letter doet hier
           het werk, niet alleen het verschil in maat, en dat is wat het rustig
           houdt zonder dat de tweede regel wegvalt.

           De overgang is van 1s naar .8s: de hele opening is gehalveerd en dan
           staat regel 1 anders nog te faden terwijl regel 2 al begint. */
        .intro__line { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -.015em; color: var(--cream); max-width: 100%; text-wrap: balance; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); margin: 0; }
        /* Regel 2 draagt de em, dus de opmaak hangt aan het kind en niet aan de
           alinea: zo blijft de zin in de HTML één doorlopende zin. */
        .intro__line:nth-child(2) { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.15rem, 2.5vw, 1.95rem); font-weight: 300; letter-spacing: 0; max-width: 26ch; line-height: 1.3; }
        /* Op een telefoon staan de twee maten dicht bij elkaar (de onderkant van
           beide clamps) en verdwijnt de rangorde bijna. De ondergrens van regel
           2 ligt daarom lager dan die van de kop, zodat het verschil ook op een
           klein scherm rond de 1,3 blijft.
           En bij die kleinere maat wordt een schreef van 300 te dun op donker,
           dus daar gaat hij een stap zwaarder. */
        @media (max-width: 720px) { .intro__line:nth-child(2) { font-weight: 400; } }
        /* 20-8 · De openingsregel brak op een telefoon middenin de zin ("Hoe
           sneller de / wereld beweegt,"). Op 375 pixels vraagt hij 398 om op
           een regel te passen, en de ondergrens van de clamp stond op 24px.
           Meeschalend met het scherm past hij altijd, en nowrap maakt de
           bedoeling hard: deze zin hoort in een adem gelezen te worden. */
        @media (max-width: 720px) {
          .intro__line:nth-child(1) { font-size: min(5.2vw, 1.5rem); white-space: nowrap; }
        }
        .intro__line em { font-style: italic; color: var(--accent); }
        .intro.s1 .intro__line:nth-child(1) { opacity: 1; transform: none; }
        .intro.s2 .intro__line:nth-child(2) { opacity: 1; transform: none; }
        /* De uitgang fluistert. Zelfde spatiering als de naam eronder, zodat het
           daarmee een familie vormt in plaats van een derde losse maat.

           Hij komt op bij stap 2, zodra het citaat compleet is: eerder trekt hij
           aandacht weg van de zin die het moment moet dragen.

           19-08 · De fade is van 1,5s naar 1s, omdat de hele opening is
           gehalveerd. Stap 2 valt nu op 1,15s en de intro sluit op 3,8s, dus
           met de oude fade stond de hint pas op 2,65s op sterkte en had hij nog
           maar een seconde. Nu is dat 2,15s. */
        .intro__skip { position: absolute; bottom: 2.2rem; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .34em; text-transform: uppercase; color: var(--cream-20); opacity: 0; transition: opacity 1s var(--ease-expo); }
        .intro.s2 .intro__skip { opacity: 1; }
        .intro__name { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--cream-60); opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease-expo), transform 1.2s var(--ease-expo); margin: 1.6rem 0 0; }
        .nav__cta .dot { margin-right: .5rem; }
        .nav__cta:hover .btn__arrow { transform: scaleX(1.45) translateX(4px); opacity: 1; }
        .mobile-nav .textlink.ml { opacity: .65; }
        .intro.s3 .intro__name { opacity: 1; transform: none; }
        .intro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 50% 58%, rgba(192,133,82,.16) 0%, transparent 62%); opacity: 0; transition: opacity 1.6s var(--ease); pointer-events: none; }
        .intro.s3::before { opacity: 1; }

        /* ══════════ Header ══════════ */
        .header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 1rem 0; transition: background var(--t), padding var(--t), box-shadow var(--t), transform .45s var(--ease-expo); }
        .header.scrolled { background: rgba(10,20,13,.92); backdrop-filter: blur(14px); padding: .7rem 0; box-shadow: 0 1px 0 var(--line); }
        .header.is-hidden { transform: translateY(-105%); }
        .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
        .logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
        .logo img { height: 60px; width: auto; transition: height var(--t); }
        .header.scrolled .logo img { height: 46px; }
        .nav__links { display: none; align-items: center; gap: 2.1rem; list-style: none; }
        .nav__links a { color: var(--cream-60); text-decoration: none; font-size: .88rem; font-weight: 500; letter-spacing: .01em; transition: color var(--t); }
        .nav__links a:hover { color: var(--cream); }
        .nav__cta { display: inline-flex; align-items: center; gap: .6rem; background: var(--cream); color: var(--ink-0) !important; font-weight: 600 !important; font-size: .84rem !important; padding: .55rem .7rem .55rem 1.2rem; border-radius: 999px; transition: background var(--t); }
        .nav__cta .btn__arrow { font-size: .85em; }
        .nav__cta:hover { background: #fff; }
        .hamburger { background: none; border: none; cursor: pointer; padding: .5rem; display: flex; flex-direction: column; gap: 6px; z-index: 300; }
        .hamburger span { display: block; width: 26px; height: 1.5px; background: var(--cream); transition: var(--t); transform-origin: center; }
        .hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
        .hamburger.is-open span:nth-child(2) { opacity: 0; }
        .hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
        .mobile-nav { position: fixed; inset: 0; background: var(--ink-0); z-index: 199; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
        .mobile-nav.is-open { opacity: 1; pointer-events: all; }
        .mobile-nav a:not(.btn) { color: var(--cream); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 5vw, 2.4rem); transition: color var(--t); }
        .mobile-nav a:not(.btn):hover { color: var(--accent); }

        /* ══════════ HERO ══════════ */
        .hero { min-height: 100svh; display: flex; align-items: center; padding-top: 8rem; padding-bottom: 2.5rem; background: var(--ink-1); overflow: hidden; }
        /* Diepte in drie lagen: warm licht rechtsboven waar de ruimte open is, een
           groene poel linksonder, en een grond die van links naar het midden
           wegvalt zodat de kop op rust staat en de foto niet mee hoeft te vechten. */
        .hero__light { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,13,.94) 0%, rgba(10,20,13,.78) 22%, rgba(10,20,13,.34) 44%, transparent 62%), radial-gradient(ellipse 70% 60% at 82% 18%, rgba(192,133,82,.13) 0%, transparent 55%), radial-gradient(ellipse 60% 70% at 15% 85%, rgba(26,54,32,.5) 0%, transparent 60%); pointer-events: none; }
        /* Foto gespiegeld (scaleX -1): Isaak komt rechts in beeld, kijkend richting de tekst.
           Masker in 270deg zodat de fade na spiegeling gewoon links op het scherm ligt. */
        /* Isaak volledig rechts in beeld; de groep schemert door een lange, geleidelijke fade links */
        .hero__portrait { position: absolute; top: 0; right: 0; bottom: 0; width: 63%; background-image: url('../img/isaak-hero.jpg'); background-size: cover; background-position: 0% 50%; opacity: .8; filter: saturate(.92); transform: scaleX(-1); -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.55) 36%, rgba(0,0,0,.85) 58%, #000 78%); mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.55) 36%, rgba(0,0,0,.85) 58%, #000 78%); will-change: transform; animation: heroKen 30s var(--ease) infinite alternate; }
        @keyframes heroKen { from { transform: scaleX(-1) scale(1.02); } to { transform: scaleX(-1) scale(1.09) translateY(-1%); } }
        /* Alleen een subtiel voetje onderin; de zware verduistering is weg zodat de foto oogt zoals gekozen in de vergelijking */
        /* Voetje onderin, plus een zachte hoekverdonkering rechtsboven: de witte
           muur trok daar het oog weg van de kop. */
        .hero__portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 72%, rgba(12,24,16,.45) 100%), radial-gradient(ellipse 62% 58% at 88% 6%, rgba(12,24,16,.34) 0%, transparent 62%); }
        .hero__content { position: relative; max-width: 860px; z-index: 2; }
        .hero h1 { margin-bottom: 2.2rem; }
        /* Het accentwoord zet pas aan nadat de regel geland is: er zit meer in,
           en dat wordt zichtbaar. Dat is de zin die de kop maakt. */
        .hero h1 em { color: var(--cream); transition: color 1.5s var(--ease) 2.15s; }
        .hero.is-in h1 em { color: var(--accent); }
        @media (prefers-reduced-motion: reduce) { .hero h1 em { color: var(--accent); transition: none; } }
        /* De hero draagt alleen de boodschap. Ruimte doet hier het werk, dus de
           afstanden zijn ruimer dan elders op de pagina. */
        /* breed genoeg om op een regel te blijven: een subkop die afbreekt leest
           als een alinea, en dat is precies wat hier weg moest */
        .hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--cream-60); max-width: 32rem; line-height: 1.6; text-wrap: balance; }
        /* de afstand zit op de parallax-wrappers: binnen een wrapper nult de
           globale p:last-child-reset elke marge van de subkop */
        .hero__laag + .hero__laag { margin-top: 2.6rem; }
        .hero__lead strong { color: var(--cream); font-weight: 600; }
        .hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: 2.8rem; }
        /* 21-8 · De kennismaking is een tekstregel geworden in plaats van een
           tweede knop (een knop in de hero, Isaaks keuze). Rustig genoeg om de
           startknop niet te beconcurreren, duidelijk genoeg om gevonden te
           worden door wie al zover is. */
        .hero__nevenlink { flex: 1 1 100%; font-size: .82rem; color: rgba(242,241,239,.55);
          text-decoration: none; border-bottom: none; }
        .hero__nevenlink:hover { color: var(--cream, #F2F1EF); }
        /* Eén lijn doet vier dingen tegelijk: hij kadert de groep als linkerrail,
           groeit binnen bij het laden, eindigt in een ademend lichtpunt en spreekt
           daarmee dezelfde taal als de fundering en de vertrek-CTA. Vier losse
           ideeen zouden vier bewegende dingen zijn geweest. */
        .hero__blok { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; padding-left: 1.7rem; }
        .hero__blok::before { content: ''; position: absolute; left: 0; top: .5rem; bottom: 1.2rem; width: 1px; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 55%, rgba(158,113,80,.1) 100%); transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--ease-expo) 2.7s; }
        .hero.is-in .hero__blok::before { transform: scaleY(1); }
        .hero__blok::after { content: ''; position: absolute; left: -2px; bottom: .7rem; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; opacity: 0; }
        .hero.is-in .hero__blok::after { animation: railAdem 3.4s ease-in-out 3.9s infinite; }
        @keyframes railAdem { 0%, 100% { opacity: .5; box-shadow: 0 0 6px rgba(74,222,128,.45); } 50% { opacity: 1; box-shadow: 0 0 13px rgba(74,222,128,.85); } }
        @media (prefers-reduced-motion: reduce) { .hero__blok::before { transform: scaleY(1); } .hero.is-in .hero__blok::after { animation: none; opacity: .8; } }
        /* de rijen binnen het blok krijgen hun ruimte van de gap, niet van marges */
        .hero__blok > * { margin-bottom: 0; }
        .hero__signaal { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
        /* Bewijsblok mag zwaarder wegen: het is het laatste dat de bezoeker ziet
           voor hij besluit door te scrollen of te klikken. */
        .hero__proof { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
        .hero__avatars { display: flex; align-items: center; }
        .hero__avatars img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--ink-1); margin-right: -12px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
        .hero__proof-text { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; color: var(--cream-60); margin: 0; }
        .hero__proof-text .stars { color: var(--accent); letter-spacing: .12em; font-size: 1rem; margin-right: 0; }
        /* het merk zelf is het bewijs: geen woord "Google" nodig naast het logo */
        .hero__google { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); opacity: .75; transition: opacity var(--t), border-color var(--t), transform var(--t); }
        .hero__google svg { width: 15px; height: 15px; display: block; }
        .hero__google:hover, .hero__google:focus-visible { opacity: 1; border-color: var(--cream-25); transform: translateY(-1px); }

        /* Hero line-mask reveal */
        .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
        .line > span { display: block; transform: translateY(112%); transition: transform 1.15s var(--ease-expo); will-change: transform; }
        /* De kop landt in twee tellen. Tussen de regels valt een stilte van ruim een
           halve seconde: dat is de zin waar iemand even bij stilstaat, en die moet
           de ruimte krijgen om binnen te komen. Eerst de constatering, dan pas de
           confrontatie. */
        .hero.is-in .line:nth-child(1) > span { transition-delay: .1s; }
        .hero.is-in .line:nth-child(2) > span { transition-delay: 1.35s; }
        .hero.is-in .line > span { transform: translateY(0); }
        .hero__fade { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo); }
        .hero.is-in .hero__fade { opacity: 1; transform: none; }
        /* alles onder de kop komt pas nadat de tweede regel geland is */
        .hero.is-in .hero__fade--1 { transition-delay: 0s; }
        .hero.is-in .hero__fade--2 { transition-delay: 2.3s; }
        .hero.is-in .hero__fade--3 { transition-delay: 2.5s; }
        .hero.is-in .hero__fade--4 { transition-delay: 2.65s; }
        /* de bewijsregel meldt zich per persoon: drie gezichten, dan het oordeel,
           dan waar het vandaan komt. Een rij die in een keer verschijnt is een
           plaatje; een rij die zich opbouwt zijn mensen. */
        .hero.is-in .hero__avatars img:nth-child(1) { transition-delay: 2.85s; }
        .hero.is-in .hero__avatars img:nth-child(2) { transition-delay: 2.97s; }
        .hero.is-in .hero__avatars img:nth-child(3) { transition-delay: 3.09s; }
        .hero.is-in .hero__proof-text { transition-delay: 3.28s; }
        .hero.is-in .hero__google { transition-delay: 3.45s; }
        /* anders blijft die vertraging ook op de hoverstand plakken */
        .hero__google:hover, .hero__google:focus-visible { transition-delay: 0s; }

        /* ══════════ Marquee ══════════ */
        .marquee { background: var(--ink-0); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.05rem 0; overflow: hidden; position: relative; }
        .marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none; }
        .marquee::before { left: 0; background: linear-gradient(to right, var(--ink-0), transparent); }
        .marquee::after { right: 0; background: linear-gradient(to left, var(--ink-0), transparent); }
        .marquee__track { display: flex; width: max-content; animation: mq 36s linear infinite; }
        .marquee__track span { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-40); white-space: nowrap; }
        .marquee__track span::after { content: '✦'; color: var(--accent); font-size: .62rem; }
        @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

        /* ══════════ 01 HET LEK ══════════ */
        .lek { background: var(--ink-2); }
        .lek__lines { max-width: 820px; }
        .lek__line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 4.4vw, 3.4rem); line-height: 1.22; color: rgba(242,241,239,.14); transition: color .7s var(--ease), transform .7s var(--ease-expo); margin: 0 0 .35em; }
        .lek__line.lit { color: var(--cream); transform: translateX(.3em); }
        .lek__line--punch { margin-top: 1em; color: rgba(192,133,82,.18); font-style: italic; }
        .lek__line--punch.lit { color: var(--accent); transform: translateX(0); }
        .lek__note { margin-top: 3rem; max-width: 520px; padding-left: 1.6rem; border-left: 1px solid var(--accent-dim); color: var(--cream-60); font-size: .98rem; }
        .lek__note strong { color: var(--cream); }

        /* ══════════ 02 HET PATROON ══════════ */
        .patroon { background: var(--ink-1); position: relative; }
        .patroon__intro { max-width: 640px; margin-bottom: 3.5rem; }
        .quotes { display: grid; gap: 1rem; }
        /* De quotes komen binnen als gedachten: eerst wazig en een tikje verzakt,
           dan scherp. Dit zijn letterlijke zinnen van ondernemers en het zijn de
           meest emotionele regels van de pagina; ze verdienen meer dan zomaar
           verschijnen. De onregelmatige vertraging zit in de JS, want gelijke
           tussenpozen lezen als een machine. */
        .quote { background: var(--ink-2); border: 1px solid var(--line); border-left: 2px solid var(--accent-dim); border-radius: 0 var(--r-card) var(--r-card) 0; padding: 1.8rem 2rem; position: relative; overflow: hidden; opacity: 0; filter: blur(8px); transform: translateY(16px); transition: opacity 1.1s var(--zwaar), filter 1.2s var(--zwaar), transform 1.2s var(--zwaar), border-color .5s var(--ease); }
        .quote.gezien { opacity: 1; filter: blur(0); transform: none; }
        @media (prefers-reduced-motion: reduce) { .quote { opacity: 1; filter: none; transform: none; transition: none; } }
        .quote:hover { border-color: var(--accent-dim); border-left-color: var(--accent); }
        .quote__text { font-family: var(--font-ui); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--cream-80); margin: 0; }
        .q-kern { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; transition: background-size 1s var(--zwaar) .1s; }
        .quote.gezien .q-kern { background-size: 100% 1.5px; }
        .quote__src { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-40); margin: 0; }
        .patroon__conclusion { margin: 4.5rem auto 0; max-width: 680px; text-align: center; }
        .pc-label { font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-40); opacity: 0; transform: translateY(8px); transition: opacity .9s var(--zwaar), transform .9s var(--zwaar); }
        .pc-punch { margin-top: .9rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; color: var(--cream); opacity: 0; transform: translateY(10px); transition: opacity 1s var(--zwaar) .25s, transform 1s var(--zwaar) .25s; }
        .pc-punch em { color: var(--accent); font-style: italic; }
        .patroon__conclusion.lit .pc-label, .patroon__conclusion.lit .pc-punch { opacity: 1; transform: none; }

        /* ══════════ 03 HET SYSTEEM (bento) ══════════ */
        .systeem { background: var(--ink-0); }
        .systeem__header { max-width: 680px; margin-bottom: 3.5rem; }
        .systeem__header h2 { margin-bottom: 1.4rem; }
        .systeem__header p { color: var(--cream-60); font-size: 1.02rem; }
        .bento { display: grid; grid-template-columns: 1fr; gap: 1rem; }
        .card--breed { grid-column: 1 / -1; }
        .card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.9rem 2rem; position: relative; overflow: hidden; transition: border-color .5s var(--ease), transform .5s var(--ease-expo); display: flex; flex-direction: column; gap: 1rem; }
        .card:hover { border-color: var(--accent-dim); transform: translateY(-4px); }
        .card__label { font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
        .card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--cream); }
        .card__desc { font-size: .9rem; color: var(--cream-60); line-height: 1.65; margin: 0; }
        .card__ui { margin-top: auto; background: var(--ink-0); border: 1px solid var(--line); border-radius: 10px; padding: 1.3rem 1.4rem; min-height: 170px; display: flex; align-items: center; justify-content: center; }

        /* mini-UI: score-ring + balken */
        .ui-meten { display: flex; align-items: center; gap: 1.6rem; width: 100%; }
        .ring { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
        .ring svg { transform: rotate(-90deg); }
        .ring__bg { fill: none; stroke: var(--line); stroke-width: 6; }
        .ring__val { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; transition: stroke-dashoffset 1.8s var(--ease-expo) .2s; }
        .card.play .ring__val { stroke-dashoffset: 118; }
        .ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.7rem; color: var(--cream); line-height: 1; }
        .ring__num small { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .14em; color: var(--cream-40); margin-top: .3rem; }
        .bars { flex: 1; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
        .bar { display: grid; gap: .3rem; }
        .bar__top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-40); }
        .bar__track { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
        .bar__fill { height: 100%; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-expo); }
        .card.play .bar:nth-child(1) .bar__fill { transform: scaleX(.72); transition-delay: .4s; }
        .card.play .bar:nth-child(2) .bar__fill { transform: scaleX(.58); transition-delay: .55s; }
        .card.play .bar:nth-child(3) .bar__fill { transform: scaleX(.41); transition-delay: .7s; background: var(--accent-deep); }

        /* mini-UI: patroonspiegel */
        .ui-spiegel { width: 100%; display: flex; flex-direction: column; gap: .8rem; }
        .ui-spiegel__row { display: flex; gap: .8rem; align-items: baseline; opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease-expo); font-size: .84rem; color: var(--cream-60); }
        .ui-spiegel__row .tag { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-40); flex-shrink: 0; width: 4.4rem; }
        .ui-spiegel__row strong { color: var(--cream); font-weight: 500; }
        .ui-spiegel__row--out { color: var(--accent); font-weight: 500; }
        .ui-spiegel__row--out .tag { color: var(--accent-deep); }
        .card.play .ui-spiegel__row:nth-child(1) { opacity: 1; transform: none; transition-delay: .3s; }
        .card.play .ui-spiegel__row:nth-child(2) { opacity: 1; transform: none; transition-delay: .9s; }
        .card.play .ui-spiegel__row:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.5s; }

        /* mini-UI: cockpit-grafiek */
        .ui-cockpit { width: 100%; position: relative; }
        .ui-cockpit svg { width: 100%; height: auto; display: block; }
        .ui-cockpit .grid-line { stroke: var(--line); stroke-width: 1; }
        .ui-cockpit .plot { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 2s var(--ease-expo) .3s; }
        .card.play .ui-cockpit .plot { stroke-dashoffset: 0; }
        .ui-cockpit .marker { fill: var(--accent); opacity: 0; transition: opacity .5s ease 1.9s; }
        .card.play .ui-cockpit .marker { opacity: 1; }
        .ui-cockpit__tip { position: absolute; top: 6%; right: 4%; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: .25rem .7rem; background: var(--ink-0); opacity: 0; transform: translateY(6px); transition: opacity .5s ease 2s, transform .5s var(--ease-expo) 2s; }
        .card.play .ui-cockpit__tip { opacity: 1; transform: none; }

        /* mini-UI: verankeren-checks */
        .ui-anker { width: 100%; display: flex; flex-direction: column; gap: .7rem; }
        .ui-anker__row { display: flex; align-items: center; gap: .8rem; font-size: .84rem; color: var(--cream-60); opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease-expo); }
        .ui-anker__row .chk { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--accent-dim); color: var(--accent); font-size: .6rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .ui-anker__row .wk { margin-left: auto; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-25); }
        .card.play .ui-anker__row:nth-child(1) { opacity: 1; transform: none; transition-delay: .3s; }
        .card.play .ui-anker__row:nth-child(2) { opacity: 1; transform: none; transition-delay: .55s; }
        .card.play .ui-anker__row:nth-child(3) { opacity: 1; transform: none; transition-delay: .8s; }
        .card.play .ui-anker__row:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.05s; }

        .systeem__foot { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; color: var(--cream-40); font-size: .88rem; }

        /* ══════════ 04 DE SCAN (licht) ══════════ */
        .scene--paper { background: var(--paper); color: var(--grey-on-paper); }
        .scene--paper h2 { color: var(--ink-on-paper); }
        .scan__grid { display: grid; gap: 3.5rem; align-items: center; }
        .scan__copy h2 { margin-bottom: 1.4rem; }
        .scan__copy > p { font-size: 1.02rem; max-width: 460px; }
        .scan__specs { list-style: none; margin: 1.8rem 0 2.4rem; display: grid; gap: .55rem; }
        .scan__specs li { display: flex; align-items: center; gap: .8rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-on-paper); }
        .scan__specs li::before { content: '—'; color: var(--accent-deep); }
        .frame { background: var(--ink-1); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 30px 80px rgba(23,40,27,.25); border: 1px solid rgba(23,40,27,.1); text-decoration: none; display: block; transition: transform .5s var(--ease-expo), box-shadow .5s var(--ease); }
        .frame:hover { transform: translateY(-6px); box-shadow: 0 40px 100px rgba(23,40,27,.32); }
        .frame__bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
        .frame__dots { display: flex; gap: .35rem; }
        .frame__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(242,241,239,.14); }
        .frame__url { flex: 1; text-align: center; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--cream-40); }
        .frame__live { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: .2rem .6rem; }
        .frame__live .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease infinite; }
        .frame__body { padding: 2.2rem 2.4rem 2.6rem; }
        .frame__prog { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-40); margin-bottom: .5rem; }
        .frame__progbar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 2rem; }
        .frame__progbar span { display: block; height: 100%; width: 34%; background: var(--accent); border-radius: 2px; }
        .frame__q { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.4; color: var(--cream); margin-bottom: 1.6rem; }
        .frame__opts { display: grid; gap: .5rem; }
        .frame__opt { display: block; border: 1px solid var(--line); border-radius: 9px; padding: .7rem 1rem; font-size: .84rem; color: var(--cream-60); text-decoration: none; transition: border-color var(--t), color var(--t), background var(--t), transform .3s var(--ease-expo); }
        a.frame__opt:hover { border-color: var(--accent); color: var(--cream); background: rgba(192,133,82,.08); transform: translateX(3px); }
        .frame__opt--sel { border-color: var(--accent); color: var(--cream); background: rgba(192,133,82,.08); }

        /* ══════════ 05 BEWIJS ══════════ */
        .bewijs { background: var(--ink-1); }
        .bewijs__header { max-width: 720px; margin-bottom: 3rem; }
        .bewijs__header h2 { margin-bottom: 1.2rem; }
        .bewijs__google { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--cream-40); }
        .bewijs__google .stars { color: var(--accent); letter-spacing: .12em; }
        .bewijs__google a { color: var(--cream-60); text-decoration: none; border-bottom: 1px solid var(--line); transition: color var(--t); }
        .bewijs__google a:hover { color: var(--cream); }
        .featured { background: radial-gradient(ellipse 85% 90% at 22% 25%, rgba(4,83,43,.42) 0%, var(--ink-0) 72%); border: 1px solid var(--line); border-radius: var(--r-card); padding: 2.4rem; display: grid; gap: 2.4rem; align-items: center; margin-bottom: 1rem; }
        .featured .tcard__stars { margin-bottom: 1.1rem; text-indent: 0; }
        .featured__media { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; background: var(--ink-0); }
        .featured__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
        /* de poster vult het kader; ontbreekt de echte thumbnail, dan komt het logo
           van de klant terug zoals het eerst stond: passend en gedempt */
        .featured__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .featured__poster--terugval { object-fit: contain; padding: 2rem; opacity: .4; }
        /* de knop dekt het hele vlak: het is een videoposter, dus alles is klikbaar.
           De donkere sluier houdt het opschrift leesbaar over elke thumbnail heen. */
        .featured__play { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .95rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--cream); -webkit-tap-highlight-color: transparent; }
        /* licht van binnen, donkerder naar de rand: de thumbnail blijft het beeld,
           de sluier doet alleen genoeg om knop en opschrift leesbaar te houden.
           Staat er geen thumbnail maar het klantlogo, dan mag hij wel dekken. */
        .featured__play::before { content: ''; position: absolute; inset: 0; background: radial-gradient(58% 58% at 50% 50%, rgba(10,20,13,.14), rgba(10,20,13,.46)); transition: background .45s var(--ease); }
        .featured__play:hover::before, .featured__play:focus-visible::before { background: radial-gradient(58% 58% at 50% 50%, rgba(10,20,13,.04), rgba(10,20,13,.34)); }
        .featured__media:has(.featured__poster--terugval) .featured__play::before { background: radial-gradient(60% 60% at 50% 50%, rgba(10,20,13,.5), rgba(10,20,13,.72)); }
        .featured__play-cirkel, .featured__play-tekst { position: relative; z-index: 1; }
        /* 30-7 · "Bekijk de videoreview" is van het beeld af.
           Beide thumbnails dragen hun eigen tekst ("Er moest wat veranderen",
           "177x ROI"), en onze overlay landde daar bovenop: bij Rahand precies
           in de balk, bij Kay net eronder. Dat gevecht ontstaat bij elke nieuwe
           thumbnail opnieuw, want wij weten niet waar de tekst in het beeld
           staat.

           De speelcirkel alleen is genoeg: een driehoek in een cirkel op een
           still leest iedereen, en de YouTube-badge naast de kop zegt het nog
           een keer. Het aria-label op de knop blijft staan, dus voor een
           schermlezer verandert er niets. */
        .featured__play-tekst { display: none; }
        .featured__play-cirkel { box-shadow: 0 6px 26px rgba(0,0,0,.45); }
        .featured__play-tekst { text-shadow: 0 1px 12px rgba(0,0,0,.75); }
        .featured__play-cirkel { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--accent-dim); background: rgba(10,20,13,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; color: var(--accent); transition: transform .45s var(--ease-expo), border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease); }
        .featured__play-cirkel svg { width: 26px; height: 26px; margin-left: 3px; }
        .featured__play-tekst { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-60); transition: color .35s var(--ease); }
        .featured__play:hover .featured__play-cirkel, .featured__play:focus-visible .featured__play-cirkel { transform: scale(1.09); border-color: var(--accent); color: var(--cream); background: rgba(158,113,80,.28); }
        .featured__play:hover .featured__play-tekst, .featured__play:focus-visible .featured__play-tekst { color: var(--cream); }
        .featured__play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 10px; }
        .featured__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.45; color: var(--cream); margin-bottom: 1.2rem; }
        .featured__result { color: var(--cream-60); font-size: .95rem; margin-bottom: 1.4rem; }
        .featured__name { font-weight: 600; color: var(--cream); font-size: .9rem; margin: 0; }
        .featured__name span { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-40); margin-top: .3rem; font-weight: 400; }
        .reviews { display: grid; gap: 1rem; }
        .review { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 2rem 2.2rem; display: flex; flex-direction: column; transition: border-color .5s var(--ease), transform .5s var(--ease-expo); }
        .review:hover { border-color: var(--accent-dim); transform: translateY(-4px); }
        .review__pull { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.4; color: var(--cream); margin-bottom: 1rem; }
        .review__body { font-size: .88rem; color: var(--cream-60); font-style: italic; line-height: 1.7; flex: 1; margin-bottom: 1.6rem; }
        .review__who { display: flex; align-items: center; gap: .9rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
        .review__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--accent-dim); background: var(--ink-3); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); }
        .review__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
        .review__meta { min-width: 0; }
        .review__name { color: var(--cream); font-weight: 600; font-size: .9rem; }
        .review__co { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: .2rem; }
        .review__stars { margin-left: auto; color: var(--accent); font-size: .72rem; letter-spacing: .1em; flex-shrink: 0; }

        /* ══════════ 06 PAST DIT BIJ JOU + HET TRAJECT ══════════
           Eén hoofdstuk in twee kolommen: de vraag links, het antwoord rechts,
           de FAQ eronder. Geen kaders maar haarlijnen en witruimte, zoals de
           rest van de site; kaarten zouden hier de enige plek op de pagina zijn
           waar dat gebeurt. De sectie is een tint donkerder dan zijn buren,
           zodat hij zich onderscheidt zonder een harde rand nodig te hebben. */
        /* Het koper van de site (#9E7150) haalt op deze donkere ondergrond maar
           4,41 contrast. Voor grote letters is dat genoeg, voor de kleine mono-
           regels niet. Vandaar een eigen tint voor die regels: dezelfde kleur,
           een stap lichter, 5,39 contrast. */
        .hfd { position: relative; --koper-klein: #b07f5a; }
        .hfd::before { content: ''; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(120% 80% at 18% 0%, rgba(74,222,128,.05), transparent 62%),
                        radial-gradient(90% 70% at 100% 100%, rgba(0,0,0,.3), transparent 60%); }
        .hfd > .container { position: relative; z-index: 1; }
        .hfd h2 { margin-bottom: 3.4rem; max-width: 700px; }
        .hfd__grid { display: grid; gap: 3rem; align-items: start; }
        .hfd__kop { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #4ade80; margin: 0 0 1.3rem; }
        .hfd__kop--nee { color: var(--koper-klein); margin-top: 2.6rem; }
        .hfd__kop--w { color: var(--koper-klein); }

        /* de filter: twee lijstjes onder elkaar in dezelfde typografie als het
           traject ernaast, zodat het oog ze als één hoofdstuk leest */
        .hfd__filter { list-style: none; margin: 0; padding: 0; }
        .hfd__filter li { display: flex; align-items: flex-start; gap: .85rem; padding: .78rem 0; border-bottom: 1px solid var(--line); font-size: .96rem; line-height: 1.55; color: var(--cream-80); }
        .hfd__filter li:last-child { border-bottom: none; }
        .hfd__filter li::before { flex-shrink: 0; width: 1.05rem; font-weight: 700; line-height: 1.55; }
        .hfd__filter--ja li::before { content: '✓'; color: #4ade80; }
        .hfd__filter--nee li::before { content: '✕'; color: var(--koper-klein); }
        /* cream-60 en niet cream-40: op .4 zakt lopende tekst naar contrast 3,5
           en dat is onder de leesbaarheidsgrens */
        .hfd__filter--nee li { color: var(--cream-60); }

        /* het traject: een tijdlijn met vier ritmegroepen. De koperen rail loopt
           door alle groepen heen en vervaagt onderaan in plaats van te stoppen,
           want het ritme houdt niet op na het laatste kwartaal. */
        .hfd__ritme { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.24; letter-spacing: -.018em; color: var(--cream); margin: 0 0 2rem; }
        .hfd__ritme em { font-style: italic; font-weight: 500; color: var(--accent); }
        .hfd__rows { position: relative; padding-left: 1.9rem; }
        .hfd__rows::before { content: ''; position: absolute; left: 4px; top: .55rem; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--accent) 0, rgba(158,113,80,.45) 68%, rgba(158,113,80,0) 100%); }
        .hfd__groep { position: relative; padding-bottom: 1.7rem; }
        .hfd__groep:last-child { padding-bottom: 0; }
        /* de stip markeert het ritmemoment, niet de losse afspraak: daarom staat
           hij bij het label en niet bij ieder item */
        .hfd__groep::before { content: ''; position: absolute; left: -1.9rem; top: .34rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-0); border: 1px solid var(--accent); }
        .hfd__groep:first-child::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(158,113,80,.18); }
        .hfd__label { font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--koper-klein); margin: 0 0 .7rem; }
        .hfd__item { margin-bottom: .9rem; }
        .hfd__item:last-child { margin-bottom: 0; }
        .hfd__item .t { margin: 0; font-weight: 600; font-size: .98rem; line-height: 1.4; color: var(--cream); }
        .hfd__item .d { margin: .16rem 0 0; font-size: .87rem; line-height: 1.55; color: var(--cream-60); }
        /* een groep zonder eigen items: de toelichting staat direct onder het label */
        .hfd__los { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--cream-60); }

        /* de FAQ hoort bij dit hoofdstuk en niet in een eigen sectie: naslag,
           dus gedempter gezet en in twee kolommen zodat zes vragen geen muur worden */
        .hfd__faq { margin-top: 3.4rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
        .hfd__faq-kop { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--koper-klein); margin: 0 0 1.4rem; }

        /* de schaarste is de slotzin van het hoofdstuk, geen badge in een hoekje */
        .hfd__slot { display: flex; align-items: center; gap: .7rem; margin: 2.8rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #c08e64; }
        .hfd__slot .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); flex-shrink: 0; }
        .hfd__slot > span:not(.dot) { text-wrap: balance; }

        /* ══════════ 07 DE COACH ══════════ */
        .coach { background: var(--ink-2); }
        .coach__grid { display: grid; gap: 3.5rem; align-items: center; }
        .coach__imgwrap { position: relative; max-width: 430px; border-radius: var(--r-card); overflow: hidden; display: block; }
        .coach__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; filter: saturate(.9) brightness(.96); transition: filter .6s var(--ease), transform .6s var(--ease-expo); }
        .coach__imgwrap:hover .coach__img { filter: none; transform: scale(1.03); }
        .coach__rating { position: absolute; bottom: 1.2rem; left: 1.2rem; background: rgba(10,20,13,.85); backdrop-filter: blur(8px); border: 1px solid var(--line); padding: .5rem 1rem; border-radius: 999px; display: flex; align-items: center; gap: .55rem; color: var(--cream); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; }
        .coach__rating .stars { color: var(--accent); }
        /* Het blok bouwt op naar de missie. Het openingscitaat mag daarom een
           maat terug: anders vechten twee grote regels om dezelfde aandacht. */
        /* De rechterkolom loopt hier tot onderaan door, dus het reuzenwoord moet
           kleiner en lager dan elders; anders staat het achter de naam en de link. */
        .coach .ghost { font-size: clamp(4.5rem, 14vw, 12rem); bottom: -.26em; }
        .coach__story { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.18rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--cream-80); margin: 0 0 1.5rem; }
        .coach__story em { color: var(--accent); }
        .coach__sub { color: var(--cream-60); font-size: .98rem; max-width: 480px; line-height: 1.75; }
        /* De missie is het hart van dit blok, dus krijgt hij ook het meeste gewicht:
           de displayletter, groter dan het openingscitaat, in vol cream. De
           koperen lijn blijft, want dat is de lijntaal van de fundering en de
           hero-rail. De naam staat er direct onder als ondertekening, niet als
           bijschrift: deze uitspraak is van Isaak. */
        .coach__missie { position: relative; margin: 2.2rem 0 0; padding-left: 1.5rem; max-width: 520px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.42; letter-spacing: -.012em; color: var(--cream); }
        .coach__missie::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); }
        /* geen cursief: over drie regels houdt schuine tekst op nadruk te zijn en
   wordt het een tweede stem. De kleur doet het werk al. */
        .coach__missie em { font-style: normal; color: var(--accent); font-weight: 600; }
        /* De naam als ondertekening onder de missie, niet als opening ervan. */
        /* display:flex en niet inline-flex: als blokelement, anders schuift de
           link ernaast op dezelfde regel. width:fit-content houdt de
           onderstreping bij de tekst. */
        .coach__naam { display: flex; width: fit-content; align-items: center; gap: .7rem; margin: 1.1rem 0 0 1.5rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-60); }
        .coach__naam::before { content: ''; width: 1.4rem; height: 1px; background: var(--accent-dim); flex-shrink: 0; }
        .coach__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.8rem; color: var(--cream); text-decoration: none; font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--accent-dim); padding-bottom: 3px; transition: gap var(--t), border-color var(--t); }
        .coach__link:hover { gap: .9rem; border-color: var(--accent); }

        /* ══════════ WAT JE WAARSCHIJNLIJK WIL WETEN ══════════
           Naslag, geen hoofdstuk: kleiner gezet dan de secties eromheen en in
           twee kolommen, zodat zes vragen geen muur van 370px worden. */
        .faq__list { border-top: 1px solid var(--line); display: grid; gap: 0 3.5rem; align-items: start; }
        .faq__item { border-bottom: 1px solid var(--line); }
        .faq__q { width: 100%; text-align: left; background: none; border: none; padding: 1.25rem 0; font-family: var(--font-ui); font-weight: 600; font-size: .95rem; color: var(--cream); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; line-height: 1.35; -webkit-tap-highlight-color: transparent; }
        .faq__q::after { content: '+'; font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--accent); flex-shrink: 0; transition: transform var(--t); line-height: 1; }
        .faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
        .faq__a { overflow: hidden; max-height: 0; transition: max-height .38s var(--ease), padding-bottom .38s; }
        .faq__a p { color: var(--cream-60); font-size: .92rem; margin: 0; line-height: 1.7; }
        .faq__a p + p { margin-top: .7rem; }
        .faq__q[aria-expanded="true"] + .faq__a { max-height: 400px; padding-bottom: 1.25rem; }

        /* ══════════ FINAL ══════════ */
        .final { background: var(--ink-0); padding: calc(var(--sp) * 1.35) 0; text-align: center; overflow: hidden; }
        .final h2 { font-size: clamp(2.4rem, 6.5vw, 5rem); margin-bottom: 2.8rem; will-change: transform, opacity; }
        .final__actions { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
        .final__note { margin-top: 2.2rem; }

        /* ══════════ Footer ══════════ */
        footer { background: var(--ink-0); border-top: 1px solid var(--line); }
        .footer__top { padding: 3.5rem 0 2.5rem; }
        .footer__brand { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
        .footer__logo { height: 60px; width: auto; opacity: .85; }
        .footer__tagline { color: var(--cream-40); font-size: .9rem; line-height: 1.6; max-width: 380px; }
        .footer__tagline strong { color: var(--cream-60); display: block; font-family: var(--font-display); font-weight: 500; font-size: 1rem; margin-bottom: .2rem; }
        .footer__bottom { padding: 1.4rem 0 2rem; border-top: 1px solid var(--line); }
        .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
        .footer__copy { color: var(--cream-25); font-size: .74rem; }
        .footer__links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
        .footer__links a { color: var(--cream-25); text-decoration: none; font-size: .74rem; transition: color var(--t); }
        .footer__links a:hover { color: var(--cream-60); }
        .footer__social { display: flex; gap: 1.1rem; align-items: center; }
        .footer__social a { color: var(--cream-25); transition: color var(--t); display: flex; }
        .footer__social a:hover { color: var(--cream-80); }
        .footer__social svg { width: 17px; height: 17px; }

        /* ══════════ Sticky bar (mobiel) ══════════ */
        .sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(10,20,13,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: .8rem 1.1rem; z-index: 100; }
        .sticky-bar .btn { width: 100%; align-items: center; }
        .sticky-bar .btn__row { justify-content: center; width: 100%; }

        /* ══════════ Cookie ══════════ */
        .cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--ink-0); border-top: 1px solid var(--line); padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; transform: translateY(100%); transition: transform .4s var(--ease-expo); }
        .cookie-bar.is-visible { transform: translateY(0); }
        .cookie-bar__text { color: var(--cream-60); font-size: .78rem; line-height: 1.5; flex: 1; min-width: 200px; margin: 0; }
        .cookie-bar__text a { color: var(--cream-80); text-decoration: underline; }
        .ck-kort { display: none; }
        .cookie-bar__actions { display: flex; gap: .7rem; flex-shrink: 0; }
        .cookie-bar__btn { padding: .5rem 1.2rem; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: .78rem; cursor: pointer; border: none; transition: background .2s, color .2s; }
        .cookie-bar__btn--accept { background: var(--cream); color: var(--ink-0); }
        .cookie-bar__btn--accept:hover { background: #fff; }
        .cookie-bar__btn--decline { background: transparent; color: var(--cream-40); border: 1px solid var(--line); }
        .cookie-bar__btn--decline:hover { color: var(--cream-80); }

        /* ══════════ Scroll progress ══════════ */
        .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); z-index: 300; width: 0%; pointer-events: none; }

        /* ══════════ Grain ══════════ */
        .grain { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; }

        /* ══════════ Reveal-systeem ══════════ */
        .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo); will-change: opacity, transform; }
        .rv.in { opacity: 1; transform: none; }
        .rv-group > * { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo); }
        .rv-group.in > * { opacity: 1; transform: none; }
        .rv-group.in > *:nth-child(1) { transition-delay: .04s; }
        .rv-group.in > *:nth-child(2) { transition-delay: .13s; }
        .rv-group.in > *:nth-child(3) { transition-delay: .22s; }
        .rv-group.in > *:nth-child(4) { transition-delay: .31s; }
        .rv-group.in > *:nth-child(5) { transition-delay: .4s; }
        .rv-group.in > *:nth-child(6) { transition-delay: .49s; }
        .d1 { transition-delay: .12s; }

        /* ══════════ Responsive ══════════ */
        @media (min-width: 768px) {
            .nav__links { display: flex; }
            .hamburger { display: none; }
            .bento { grid-template-columns: 1fr 1fr; }
            .quotes { grid-template-columns: repeat(3, 1fr); }
            .scan__grid { grid-template-columns: 1fr 1.05fr; }
            .featured { grid-template-columns: 1.05fr 1fr; }
            .reviews { grid-template-columns: 1fr 1fr; }
            /* de filter is zeven korte regels, het traject zes regels met een
               toelichting eronder: gelijke helften geven de filter te veel lucht */
            .hfd__grid { grid-template-columns: 5fr 6fr; gap: 4.5rem; }
            .coach__grid { grid-template-columns: 1fr 1.15fr; }
            .faq__list { grid-template-columns: 1fr 1fr; }
            html { scroll-padding-top: 90px; }
        }
        @media (max-width: 767px) {
            body { padding-bottom: 5.2rem; }
            html { scroll-padding-top: 90px; }
            .hero { padding-top: 7rem; padding-bottom: 4rem; min-height: 94svh; }
            .hero__portrait { width: 100%; opacity: .3; }
            .hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
            .pill { font-size: .58rem; padding: .35rem .75rem; }
            /* de rail neemt links ruimte in, dus de rijen moeten binnen het blok
               blijven; anders lopen knop en pill het scherm uit */
            .hero__blok { padding-left: 1.1rem; }
            .hero__blok > * { width: 100%; max-width: 100%; }
            .hero__signaal .pill { white-space: normal; }
            .hero__actions .btn { width: 100%; align-items: center; }
            .hero__actions .btn .btn__row { justify-content: space-between; width: 100%; }
            .sticky-bar { display: block; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .3s, transform .3s; }
            .sticky-bar.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
            .ghost { font-size: 6rem; right: -4%; }
            .quote { padding: 1.7rem 1.6rem; }
            .card { padding: 1.5rem 1.4rem; }
            .card__ui { padding: 1.1rem 1rem; min-height: 0; }
            .featured { padding: 1.4rem; }
            .frame__body { padding: 1.6rem 1.4rem 1.9rem; }
            /* 30-07 · de slotregel van de held ("Maximaal 15 actieve trajecten")
               stond op 10,9 pixels. Jouw eigen zin, dus die mag geen voetnoot
               zijn; de letterafstand ging al omlaag, nu de maat ook omhoog. */
            .hfd__slot { letter-spacing: .1em; line-height: 1.5; align-items: flex-start; font-size: .74rem; }
            .hfd__slot .dot { margin-top: .4rem; }
            .footer__brand { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
            .footer__inner { flex-direction: column; align-items: flex-start; }
        }

        /* ══════════ Reduced motion ══════════ */
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
            .intro { display: none !important; }
            .rv, .rv-group > *, .hero__fade, .line > span { opacity: 1 !important; transform: none !important; }
            .lek__line { color: var(--cream); }
            .lek__line--punch { color: var(--accent); }
            .card .ring__val { stroke-dashoffset: 118 !important; }
            .card .bar__fill, .card .ui-spiegel__row, .card .ui-anker__row, .card .ui-cockpit .marker, .card .ui-cockpit__tip { opacity: 1 !important; transform: none !important; }
            .card .ui-cockpit .plot { stroke-dashoffset: 0 !important; }
            .card .bar:nth-child(1) .bar__fill { transform: scaleX(.72) !important; }
            .card .bar:nth-child(2) .bar__fill { transform: scaleX(.58) !important; }
            .card .bar:nth-child(3) .bar__fill { transform: scaleX(.41) !important; }
        }

/* ══════════ Subpagina-componenten ══════════ */
.page-head { padding: clamp(9rem,18vh,13rem) 0 clamp(3.5rem,7vh,5.5rem); background: var(--ink-1); position: relative; overflow: hidden; }
.page-head__light { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 80% 0%, rgba(192,133,82,.1) 0%, transparent 55%); pointer-events: none; animation: phLicht 11s ease-in-out infinite; }
.page-head::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 12% 90%, rgba(74,222,128,.05) 0%, transparent 60%); pointer-events: none; animation: phLicht2 13s ease-in-out infinite; }
@keyframes phLicht { 0%, 100% { opacity: .72; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(-2.5%, 1.5%); } }
@keyframes phLicht2 { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .page-head__light, .page-head::after { animation: none; } }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.page-head__lead { color: var(--cream-60); max-width: 580px; font-size: clamp(1rem, 1.4vw, 1.15rem); margin-top: 1.6rem; line-height: 1.7; }
.page-head__lead strong { color: var(--cream); }

/* Prose — lopende tekst (juridisch, blog, artikelen) */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.6em 0 .7em; }
.prose h3 { font-size: 1.15rem; margin: 2em 0 .5em; }
.prose p, .prose li { font-size: 1rem; line-height: 1.8; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.25rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent-dim); }
.prose a:hover { color: var(--cream); }
.scene--paper .prose h2, .scene--paper .prose h3 { color: var(--ink-on-paper); }
.scene--paper .prose a { color: var(--accent-deep); }
.scene--paper .prose a:hover { color: var(--ink-on-paper); }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.5rem 0; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.scene--paper .prose th, .scene--paper .prose td { border-color: rgba(23,40,27,.1); }


/* ══════════ Brand-typografie overrides (Montserrat display) ══════════ */
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
.card__title, .coach__story, .featured__quote, .review__pull, .frame__q, .intro__line, .lek__line, .ghost, .ring__num, .page-head h1 { font-weight: 700; }
.ghost { font-style: italic; letter-spacing: -.03em; }
body { font-weight: 400; }
.btn__row { font-weight: 700; }

/* Primaire accent-knop in officieel diepbruin (#6E452A) met cream tekst */
.btn--accent { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--cream); }
.btn--accent .btn__arrow { color: inherit; }
.btn--accent:hover { background: #7D5033; border-color: #7D5033; box-shadow: 0 14px 44px rgba(110,69,42,.3); }

/* Donkere CTA op paper-scenes in exact logo-groen (#04532B) */
.btn--ink { background: var(--green-logo); border-color: var(--green-logo); }
.btn--ink .btn__arrow { color: var(--green-logo); }
.btn--ink:hover { background: #1A3620; }


/* ══════════ Story-testimonial (Club49-formaat): outcome-first reviewkaart ══════════ */
.tcards { display: grid; gap: 1rem; }
@media (min-width: 900px) { .tcards { grid-template-columns: repeat(3, 1fr); } }
.tcard { background: radial-gradient(ellipse 95% 52% at 50% 24%, rgba(4,83,43,.5) 0%, var(--ink-0) 64%); border: 1px solid var(--line); border-radius: var(--r-card); padding: 2.6rem 1.8rem 2.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; transition: border-color .5s var(--ease), transform .5s var(--ease-expo), box-shadow .5s var(--ease); }
.tcard:hover { border-color: var(--accent-dim); transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.tcard__stars { color: var(--accent); font-size: .9rem; letter-spacing: .4em; margin-bottom: 1.7rem; text-indent: .4em; }
.tcard__photo { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; object-position: top center; border: 1px solid rgba(242,241,239,.16); box-shadow: 0 0 60px rgba(4,83,43,.85), 0 12px 40px rgba(0,0,0,.5); margin-bottom: 1.6rem; }
.tcard__photo--logo { object-fit: contain; padding: 1.5rem; background: var(--ink-2); }
.tcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); line-height: 1.25; }
.tcard__co { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .32em; text-transform: uppercase; color: var(--cream-40); margin-top: .5rem; }
.tcard__tag { margin-top: 1.2rem; font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-dim); padding: .38rem .95rem .38rem 1.25rem; }
.tcard__divider { width: 2.4rem; height: 1px; background: rgba(242,241,239,.18); margin: 1.8rem auto 1.5rem; }
.tcard__label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .36em; text-transform: uppercase; color: var(--cream-40); text-indent: .36em; }
.tcard__metric { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: clamp(2.5rem, 4.4vw, 3.4rem); line-height: 1.05; color: var(--cream); margin-top: .5rem; letter-spacing: -.02em; }
.tcard__line { font-size: .94rem; font-style: italic; color: var(--cream-60); line-height: 1.7; margin-top: 1.3rem; max-width: 30ch; }

/* Scene-kaarten (v14): ondernemers in hun eigen wereld, groene gloed in de body */
.tcard--scene { padding: 0; overflow: hidden; background: radial-gradient(ellipse 95% 42% at 50% 60%, rgba(4,83,43,.5) 0%, var(--ink-0) 78%); }
.tcard__scene { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; filter: saturate(.9); border-bottom: 1px solid var(--line); }
.tcard__body { padding: 2rem 1.8rem 2.2rem; display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; }
.tcard--scene .tcard__line { margin-top: 0; }
/* Naam + bedrijf onderaan verankerd zodat alle kaarten gelijk uitlijnen */
.tcard--scene .tcard__name { margin-top: auto; padding-top: 1.5rem; }
a.tcard__co { text-decoration: none; transition: color var(--t); }
a.tcard__co:hover { color: var(--cream); }
.tcard__bron { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-40); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; transition: color var(--t); }
.tcard__bron:hover { color: var(--cream); }
.tcard__bron .star { color: var(--accent); }
.yt-badge { margin-left: .2rem; font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-40); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .85rem; text-decoration: none; transition: color var(--t), border-color var(--t); }
.yt-badge:hover { color: var(--cream); border-color: var(--cream-60); }
a.pill { text-decoration: none; transition: border-color var(--t), color var(--t); }
a.pill:hover { border-color: var(--accent-dim); color: var(--cream); }

/* Defensief: tekstlinks altijd bovenop binnen hun sectie */
.coach__link, .textlink, .aanpak__link { position: relative; z-index: 3; }


/* ══════════ Zwevende WhatsApp-knop (sitewide, subtiel) ══════════ */
.wa-fab { position: fixed; right: 1.4rem; bottom: 1.5rem; z-index: 150; display: inline-flex; align-items: center; gap: 0; height: 56px; padding: 0; border-radius: 999px; background: var(--ink-0); border: 1px solid var(--accent-dim); box-shadow: 0 10px 34px rgba(0,0,0,.4); text-decoration: none; overflow: hidden; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .4s var(--ease-expo), transform .4s var(--ease-expo), border-color var(--t), max-width .45s var(--ease-expo); max-width: 56px; }
.wa-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* Het icoon stond in WhatsApp-groen (#25D366) en was daarmee het enige element
   op de site uit een andere kleurwereld. Nu in het groen dat de site zelf al
   overal gebruikt: nog steeds herkenbaar als berichten-knop, maar hij hoort
   er nu bij. Koper zou het een algemene tekstballon maken en dat kost de
   herkenbaarheid. */
.wa-fab__icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #4ade80; }
.wa-fab__icon svg { width: 26px; height: 26px; }
.wa-fab__label { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--cream); white-space: nowrap; padding-right: 1.3rem; opacity: 0; transition: opacity .3s var(--t); }
.wa-fab:hover { max-width: 260px; border-color: rgba(74,222,128,.55); }
.wa-fab:hover .wa-fab__label { opacity: 1; }
.wa-fab__pulse { position: absolute; inset: -1px; border-radius: 999px; border: 1px solid rgba(74,222,128,.45); opacity: 0; }
.wa-fab.is-visible .wa-fab__pulse { animation: waPulse 3.5s ease 1.2s 2; }
@keyframes waPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@media (max-width: 767px) { .wa-fab { bottom: 6.2rem; right: 1rem; } .wa-fab__icon { width: 52px; height: 52px; } .wa-fab { height: 52px; max-width: 52px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab__pulse { display: none; } }

/* ══════════ Methodepagina: fundering · groeiloop · rode draad · trajectkaart ══════════ */
.d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; }
.d4 { transition-delay: .48s; }

/* Fundering: twee stappen vloeien via een convergerend netwerk samen tot richting */
.fundering { max-width: 760px; margin: 3rem auto 0; text-align: center; position: relative; }
.fundering__stap { position: relative; z-index: 1; margin: 0 auto 3.4rem; }
.fundering__stap:last-of-type { margin-bottom: 2.6rem; }
.fundering__lbl { position: relative; z-index: 1; display: inline-block; font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); background: var(--ink-1); border: 1px solid var(--accent-dim); border-radius: 999px; padding: .65rem 1.7rem; margin-bottom: 1.3rem; opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo); }
.fundering__lbl.lit { opacity: 1; transform: none; }
.fundering__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: stretch; }
.fchip { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--ink-2); font-family: var(--font-mono); font-weight: 600; letter-spacing: .04em; color: var(--cream-60); border: 1px solid var(--line); border-radius: 12px; padding: .95rem 1.1rem; opacity: .12; transform: translateY(14px); transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo), border-color .7s var(--ease); }
.fchip.lit { opacity: 1; transform: none; border-color: var(--accent-dim); }
/* verbindstukje naar de bovenkant van elke chip: tekent zich als het licht aankomt, groene puls trekt de chip in */
.fchip::before { content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 10px; transform: translateX(-50%) scaleY(0); transform-origin: top; background: linear-gradient(to bottom, rgba(158,113,80,.55), rgba(158,113,80,.28)); opacity: 0; transition: opacity .35s var(--ease), transform .5s var(--zwaar); pointer-events: none; z-index: 2; }
.fchip.lit::before { opacity: 1; transform: translateX(-50%) scaleY(1); }
.fchip::after { content: ''; position: absolute; left: 50%; top: -10px; width: 5px; height: 5px; border-radius: 50%; background: #7bf5aa; box-shadow: 0 0 11px 1px rgba(74,222,128,.95); transform: translate(-50%, 0) scale(.7); opacity: 0; pointer-events: none; z-index: 3; }
.fchip.lit::after { animation: chipInslag 1.2s var(--ease) .3s forwards; }
@keyframes chipInslag { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 14% { opacity: 1; transform: translate(-50%, 1px) scale(1); } 58% { opacity: 1; transform: translate(-50%, 8px) scale(1); } 74% { opacity: 1; transform: translate(-50%, 11px) scale(1.35); } 100% { opacity: 0; transform: translate(-50%, 12px) scale(0); } }
@media (prefers-reduced-motion: reduce) { .fchip::before { opacity: 1; transform: translateX(-50%) scaleY(1); transition: none; } .fchip.lit::after { animation: none; } }
/* getrapte reveal binnen een rij */
.fchip:nth-child(1).lit { transition-delay: 0s; }
.fchip:nth-child(2).lit { transition-delay: .12s; }
.fchip:nth-child(3).lit { transition-delay: .24s; }
.fchip b { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }
.fchip small { display: block; margin-top: .45rem; font-family: var(--font-ui); font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cream-40); line-height: 1.4; }
/* Lange ghost-woorden: kleiner zodat ze binnen beeld blijven en leesbaar zijn */
.ghost--lang { font-size: clamp(4.5rem, 13vw, 11rem); }
.fundering__lijn { width: 1px; height: 2.6rem; margin: 1.5rem auto; background: linear-gradient(180deg, var(--accent-dim), var(--accent)); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease-expo); }
.fundering__lijn.lit { transform: scaleY(1); }
/* ══ C · De Fundering houdt zijn drie tegels naast elkaar ═══════════════
   30-07. Hier stond `.fundering__chips { grid-template-columns: 1fr }`.
   Daarmee viel de fundering op een telefoon uiteen in zes losse blokken
   onder elkaar, terwijl de animatie juist gaat over drie dingen die samen
   een laag vormen. Twee rijen van drie is de vorm, en die blijft nu staan:
   alleen kleiner, met dezelfde choreografie als op de pc.

   De rij mag daarvoor even buiten de tekstkolom treden, van 339 naar 370
   pixels. Dat scheelt precies genoeg om het langste label, PERSOONLIJKHEID,
   op een regel te houden: nagemeten 95 pixels tekst in 105 beschikbaar.

   In dezelfde regel stond `.fundering__net { display: none }`. Dat element
   bestaat niet: geen pagina en geen regel javascript kent het. Weg. */
@media (max-width: 640px) {
    .fundering__chips { margin-inline: calc(50% - 50vw); padding-inline: 10px; gap: .55rem; }
    .fchip { padding: .55rem .4rem; border-radius: 9px; }
    .fchip b { font-size: .62rem; letter-spacing: .04em; }
    .fchip small { margin-top: .3rem; font-size: .68rem; line-height: 1.35; }
    .fundering__stap { margin-bottom: 2rem; }
}
.fundering__richting { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--cream); letter-spacing: -.02em; opacity: 0; transform: translateY(16px) scale(.985); filter: blur(10px); transition: opacity 1.5s var(--zwaar), transform 1.5s var(--zwaar), filter 1.5s var(--zwaar), color 1.5s var(--zwaar), text-shadow 1.4s var(--zwaar) .9s; }
.fundering__richting.lit { opacity: 1; transform: none; filter: blur(0); text-shadow: 0 0 30px rgba(158,113,80,.45); }
.fundering__duiding { margin-top: 1.6rem; color: var(--cream-60); opacity: 0; transition: opacity 1s var(--ease); }
.fundering__duiding.lit { opacity: 1; }
.fundering__duiding span { display: block; margin-top: .5rem; font-size: .9rem; color: var(--cream-40); }

/* Groeiloop: vier tellen lichten op langs een lijn, en de loop draait terug */
.loop { max-width: 620px; margin: 3rem auto 0; position: relative; padding-left: 2.2rem; }
.loop::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 52px; width: 1px; background: var(--line); }
.loop__beat { position: relative; padding: 0 0 2rem; opacity: .18; transform: translateX(10px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); }
.loop__beat.lit { opacity: 1; transform: none; }
.loop__beat::before { content: ''; position: absolute; left: -2.02rem; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-1); border: 1px solid var(--cream-40); transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
.loop__beat.lit::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-dim); }
.loop__naam { font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.loop__vraag { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.65rem); color: var(--cream); line-height: 1.3; margin: .35rem 0 0; }
.loop__terug { display: flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-40); opacity: 0; transition: opacity 1s var(--ease); padding-top: .4rem; }
.loop__terug.lit { opacity: 1; }
.loop__terug span { font-size: 1.1rem; color: var(--accent); display: inline-block; }
.loop__terug.lit span { animation: draai 7s linear infinite; }
@keyframes draai { to { transform: rotate(-360deg); } }
.loop__slot { max-width: 620px; margin: 3rem auto 0; color: var(--cream-60); font-size: 1.05rem; line-height: 1.8; }
.loop__slot strong { color: var(--cream); }

/* Rode draad: labels met detail bij hover (mobiel: detail altijd zichtbaar) */
.draad { display: grid; gap: .55rem; margin-top: 1.4rem; }
.draad__item { border: 1px solid rgba(23,40,27,.16); border-radius: 10px; padding: .8rem 1.1rem; transition: border-color var(--t), background var(--t); }
.draad__item:hover { border-color: var(--accent-deep); background: rgba(110,69,42,.05); }
.draad__label { display: block; font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-on-paper); }
.draad__detail { display: block; font-size: .86rem; color: var(--grey-on-paper); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease), opacity .45s var(--ease), margin .45s var(--ease); }
.draad__item:hover .draad__detail { max-height: 3.5em; opacity: 1; margin-top: .3rem; }
@media (max-width: 899px) { .draad__detail { max-height: none; opacity: 1; margin-top: .25rem; } }
.draad__intro { color: var(--grey-on-paper); }

/* Trajectkaart */
.tkaart { margin-top: 2.4rem; background: radial-gradient(ellipse 90% 80% at 30% 20%, rgba(4,83,43,.45) 0%, var(--ink-0) 70%); border: 1px solid var(--line); border-radius: var(--r-card); padding: 2.4rem 2.2rem; }
.tkaart__label { font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.tkaart__list { list-style: none; margin: 1.4rem 0 1.8rem; display: grid; gap: .65rem; padding: 0; }
.tkaart__list li { position: relative; padding-left: 1.7rem; color: var(--cream-80); }
.tkaart__list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.tkaart__foot { display: flex; gap: .6rem; flex-wrap: wrap; }
.final__lead { color: var(--cream-60); margin: -1.2rem 0 2rem; font-size: 1.1rem; }

/* ══════════ Homepage 03: het RDZ Performance Program in het klein ══════════
   Drie miniatuur-scenes van de methodepagina spelen als estafette
   (cyclus = --estafette op .pp-kader). Onderaan draagt de ingang-lijn
   de bezoeker over aan de scan-sectie eronder. */
.pp-kader { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; border: 1px solid rgba(74,222,128,.14); border-radius: calc(var(--r-card) + 8px); padding: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .pp-kader { grid-template-columns: 1fr; } }
/* De wikkel om de drie kaarten. Op een pc doet hij niets zichtbaars: hij neemt
   de volle breedte van het kader in en verdeelt zelf in drie kolommen, precies
   zoals de kaarten daarvoor deden. Op een telefoon wordt hij de swipe-rij. */
.pp-rij { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; align-items: stretch; }
.pp-kader__kop { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.pp-kader__kop b { color: #4ade80; }
.pp-kader__kop span { color: var(--cream-40); }
@media (max-width: 720px) { .pp-kader { grid-template-columns: 1fr; } }

/* ── Stap 1: drie panelen, de echte Groeiloop compact in het midden ── */
a.card.paneel { display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; padding-bottom: 2.4rem; }
/* B · ruimte in balans: animatie-content centreren in de hoge panelen */
.pp-kader { position: relative; transition: filter 1.3s var(--ease); }
.pp-kader.onderzoek { filter: brightness(.8) saturate(.82); }
.pp-kader .paneel { padding-bottom: 1.9rem; }
/* de ontsteek-tekst in het hart van de loop, vlak voor de blur weggaat */
.gloop-ontsteek { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; text-align: center; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); width: 80%; }
.gloop-ontsteek span { font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8fedb0; text-shadow: 0 0 12px rgba(74,222,128,.5), 0 1px 6px rgba(10,15,11,.9); }
.gloop-ontsteek.aan { opacity: 1; }
.gloop-ontsteek.uit { opacity: 0; transform: translate(-50%, -58%); }
/* de lichtdraad: van de fundering-Richting naar de loop-Richting */
.pp-draad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 16; overflow: visible; }
.pp-draad__lijn { fill: none; stroke: #4ade80; stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(74,222,128,.7)); transition: opacity .5s var(--ease); }
.pp-draad__dot { fill: #b6f3cd; filter: drop-shadow(0 0 6px rgba(74,222,128,.95)); opacity: 0; }
/* de Deep Dive tegel neemt de draad op en licht op */
.gloop--mini .gnode[data-fase="0"].koppel-in { animation: gnodeKoppel 1.7s var(--ease); }
@keyframes gnodeKoppel { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); border-color: rgba(74,222,128,.5); } 35% { box-shadow: 0 0 28px 3px rgba(74,222,128,.65); border-color: #8fedb0; } }
/* C · de Deep Dive is waar het goud zit: zwaarder aangezet */
.gloop--mini .gnode[data-fase="0"] { border-color: rgba(74,222,128,.5); }
.gloop--mini .gnode[data-fase="0"].aan { background: #26301c; border-color: #6cf3a0; }
.gloop--mini .gnode[data-fase="0"].aan::before { box-shadow: 0 0 44px rgba(74,222,128,.6); }
/* C · de Deep Dive verdiept de Fundering: korte puls */
.fmist.ddpuls .fmist__brok { box-shadow: 0 0 13px rgba(74,222,128,.45); border-color: rgba(74,222,128,.75); }
/* confetti over het hele kader bij een complete doorloop */
.pp-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; border-radius: inherit; }
.pp-confetti i { position: absolute; top: -14px; width: 7px; height: 11px; border-radius: 1px; opacity: 0; animation-name: ppConfetti; animation-timing-function: cubic-bezier(.4,.05,.55,.95); animation-fill-mode: forwards; }
@keyframes ppConfetti { 0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(560px) translateX(calc(var(--dx) * 90px)) rotate(var(--rot)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-confetti { display: none; } }
.pp-kader .mini--f { margin: auto 0; }
.pp-kader .paneel--loop .gloop--mini { margin-top: auto; }
.pp-kader .paneel--loop .gloop-mini__legenda { margin-bottom: auto; }
#systeem .systeem__header { margin-bottom: 2.6rem; }
.paneel__kop { display: flex; justify-content: space-between; align-items: baseline; }
.paneel__kop .card__title { font-size: 1.1rem; }
.paneel__fase { font-family: var(--font-mono); font-size: .52rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(74,222,128,.7); }
.paneel .card__desc { margin-top: .2rem; }
.paneel__link { position: absolute; left: 1.9rem; bottom: 1.2rem; font-family: var(--font-mono); font-size: .54rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4ade80; opacity: 0; transform: translateX(-4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.paneel:hover .paneel__link { opacity: 1; transform: none; }
@media (hover: none) { .paneel__link { opacity: .8; transform: none; } }
.paneel:hover { transform: translateY(-4px); border-color: rgba(74,222,128,.3); }
/* de compacte loop */
.gloop--mini { position: relative; width: min(100%, 420px); margin: 1rem auto .2rem; aspect-ratio: 8 / 5.4; transition: filter 1.2s var(--ease), opacity 1.2s var(--ease); }
.gloop--mini.gloop--sluimer { filter: blur(5px) saturate(.6); opacity: .42; }
.gloop--mini.gloop--sluimer::before { content: ''; position: absolute; left: 50%; top: 50%; width: 55%; height: 55%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(74,222,128,.14), transparent 70%); animation: gloopWarm 2.6s ease-in-out infinite; pointer-events: none; z-index: 0; }
@keyframes gloopWarm { 0%,100% { opacity: .35; transform: translate(-50%,-50%) scale(.92); } 50% { opacity: .85; transform: translate(-50%,-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .gloop--mini.gloop--sluimer { filter: none; opacity: 1; } .gloop--mini.gloop--sluimer::before { animation: none; } }
.gloop--mini > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; transform: translateZ(0); }
.gloop--mini > .gloop__golven { z-index: 1; }
.gloop--mini .gnode { min-width: 0; padding: .32rem .6rem; border-radius: 8px; }
.gloop--mini .gnode b { font-size: .66rem; }
.gloop--mini .gnode small { display: none; }
.gloop--mini .gkern { width: clamp(78px, 27%, 116px); }
.gloop--mini .gbegrip { font-size: .44rem; letter-spacing: .14em; }
.gloop--mini .gloop__radar { inset: -8% -4%; }
/* ── De Fundering: uit de mist. Wazig tot juli, dan week voor week scherp ── */
.fmist { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: .1rem; }
/* het zenuwstelsel van de fundering: ruggengraat en takken die oplichten als een brok gevonden wordt */
.fmist__zenuw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
/* methode-taal: koperen stippel-spoor met een groen licht dat zich eroverheen tekent */
.fmist__zenuw .spoor { fill: none; stroke: var(--accent-dim); stroke-width: 1; stroke-dasharray: 1.5 3.5; opacity: 0; transition: opacity .8s var(--ease); }
.fmist__zenuw .licht { fill: none; stroke: #4ade80; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); filter: drop-shadow(0 0 3px rgba(74,222,128,.6)); transition: stroke-dashoffset 1.1s var(--zwaar), opacity .8s var(--ease); }
.fmist__zenuw .hoofd.licht { stroke-width: 1.7; filter: drop-shadow(0 0 5px rgba(74,222,128,.7)); }
/* bij een herbouw na resize springt een al getekende lijn terug zonder opnieuw te animeren */
.fmist__zenuw .licht.direct { transition: none; }
.fmist__zenuw .topdot { fill: #6cf3a0; opacity: 0; filter: drop-shadow(0 0 5px rgba(74,222,128,.85)); transition: opacity .6s var(--ease); }
.fmist__zenuw .pijl { fill: none; stroke: #4ade80; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 4px rgba(74,222,128,.6)); transition: opacity .6s var(--ease); }
.fmist.kennis .fmist__zenuw .topdot { opacity: 1; }
.fmist.richt .fmist__zenuw .pijl { opacity: 1; transition-delay: .3s; }
/* het licht vertrekt bij het vertrekpunt en loopt naar buiten: de JS zet .aan per lijn, de tegel volgt pas als zijn lijn is aangesloten */
.fmist__zenuw .spoor.aan { opacity: .55; }
.fmist__zenuw .licht.aan { stroke-dashoffset: 0; }
/* de hoofdvezel vloeit als laatste in Richting */
.fmist.richt .fmist__zenuw .hoofd.spoor { opacity: .55; }
.fmist.richt .fmist__zenuw .hoofd.licht { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .fmist__zenuw .spoor { opacity: .55; } .fmist__zenuw .licht { stroke-dashoffset: 0; transition: none; } }
.fmist::after { content: ''; position: absolute; left: 50%; top: 55%; width: 70%; height: 55%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(74,222,128,.16), transparent 70%); opacity: 0; pointer-events: none; }
.fmist.klaar::after { animation: fmBloei 1.8s var(--ease) .1s 1; }
@keyframes fmBloei { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); } }
.fmist__vertrek { position: relative; z-index: 2; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: .84rem; color: var(--accent); margin-bottom: 6px; text-shadow: 0 1px 9px rgba(10,15,11,.95), 0 0 4px rgba(10,15,11,.9); transition: color .6s var(--ease), text-shadow .6s var(--ease); }
.fmist.kennis .fmist__vertrek { color: #4ade80; text-shadow: 0 0 14px rgba(74,222,128,.5), 0 1px 9px rgba(10,15,11,.9); }
.fmist.klaar .fmist__vertrek { color: var(--accent); opacity: .4; text-shadow: none; }
@keyframes fmVondst { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } 35% { box-shadow: 0 0 12px 1px rgba(74,222,128,.5); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
/* de vondst valt samen met het aansluiten van de lijn, dus zonder eigen vertraging */
.fmist__brok.brokscherp { animation: fmVondst 1s var(--ease); }
/* C · onboarding: de intake-flits waarmee de fundering begint */
.fmist__intake { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); font-family: var(--font-mono); font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: #8fedb0; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 4; text-shadow: 0 0 12px rgba(74,222,128,.35); }
.fmist.intake-nu .fmist__intake { animation: fmIntake 2.6s var(--ease) 1; }
@keyframes fmIntake { 0% { opacity: 0; filter: blur(3px); transform: translate(-50%, calc(-50% + 7px)); } 20% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); } 52% { opacity: .95; filter: blur(0); transform: translate(-50%, -50%); } 100% { opacity: 0; filter: blur(5px); transform: translate(-50%, calc(-50% - 12px)); } }
.fmist__veld { position: relative; width: 100%; flex: none; height: 112px; }
.fmist__veeg { position: absolute; left: -8%; right: -8%; height: 46px; top: -46px; background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(74,222,128,.2), transparent 70%); opacity: 0; pointer-events: none; }
.fmist.kennis .fmist__veeg { animation: fmVeeg 3.2s var(--zwaar) forwards; }
@keyframes fmVeeg { 0% { top: -46px; opacity: 0; } 12% { opacity: 1; } 88% { top: 190px; opacity: 1; } 100% { top: 230px; opacity: 0; } }
.fmist__brok { position: absolute; font-family: var(--font-mono); font-style: normal; font-size: .48rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-40); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: .28rem .5rem; background: rgba(255,255,255,.02); white-space: nowrap; filter: blur(3px); opacity: .35; transition: filter .8s var(--ease), opacity .8s var(--ease), color .8s var(--ease), border-color .8s var(--ease), background .8s var(--ease), transform .9s cubic-bezier(.34,1.4,.5,1), box-shadow .6s var(--ease); }
.fb1 { left: 3%; top: 2%; transform: translate(-4px, 3px) scale(.92); } .fb2 { right: 3%; top: 2%; transform: translate(4px, 3px) scale(.92); } .fb3 { left: 3%; top: 40%; transform: translate(-4px, 3px) scale(.92); } .fb4 { right: 3%; top: 40%; transform: translate(4px, 3px) scale(.92); } .fb5 { left: 3%; top: 70%; transform: translate(-4px, 3px) scale(.92); } .fb6 { right: 3%; top: 70%; transform: translate(4px, 3px) scale(.92); }
.fmist .brokscherp { filter: blur(0); opacity: 1; color: var(--cream-60); border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.05); transform: none; }
.fmist__richting { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 1.4rem; letter-spacing: -.015em; color: #8fedb0; filter: blur(8px); opacity: .3; transform: translateY(6px); margin-top: 8px; transition: filter 1s var(--zwaar), opacity 1s var(--zwaar), transform 1s var(--zwaar), text-shadow 1s var(--zwaar); }
.fmist.w4 .fmist__richting, .fmist.richt .fmist__richting { filter: blur(0); opacity: 1; transform: none; text-shadow: 0 0 26px rgba(74,222,128,.55), 0 0 54px rgba(74,222,128,.28); }
.fmist.richt .fmist__richting { animation: fmRichtBloei 1.8s var(--ease) .2s 1; }
/* de zes tegels lichten samen op voor de Richting-koppeling */
.fmist.flare .fmist__brok { animation: fmFlare 1.1s var(--ease); }
@keyframes fmFlare { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); border-color: rgba(74,222,128,.4); } 45% { box-shadow: 0 0 15px 2px rgba(74,222,128,.5); border-color: rgba(74,222,128,.9); } }
@keyframes fmRichtBloei { 0% { text-shadow: 0 0 20px rgba(74,222,128,.4); } 35% { text-shadow: 0 0 40px rgba(74,222,128,.9), 0 0 80px rgba(74,222,128,.4); } 100% { text-shadow: 0 0 26px rgba(74,222,128,.55), 0 0 54px rgba(74,222,128,.28); } }
@media (prefers-reduced-motion: reduce) { .fmist__veeg { animation: none; } .fmist__brok { transition: none; } .fmist.klaar::after { animation: none; } }
/* de legenda onder de compacte loop */
.gloop-mini__legenda { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: -1.6rem; position: relative; z-index: 3; }
.gloop-mini__legenda .glegenda__item { font-size: .58rem; padding: .34rem .7rem; }
/* gelijke tussenruimte tot de Check-in chip erboven, ook al zijn de twee chips niet even breed:
   allebei uitlijnen op de middenlijn met dezelfde marge, dus niet centreren binnen hun eigen helft */
.gloop-mini__legenda .glegenda__item--samen { justify-self: end; margin-right: 1.75rem; }
.gloop-mini__legenda .glegenda__item--eigen { justify-self: start; margin-left: 1.75rem; }
@media (max-width: 460px) { .gloop-mini__legenda { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; } .gloop-mini__legenda .glegenda__item--samen, .gloop-mini__legenda .glegenda__item--eigen { margin: 0; } }


#systeem .systeem__foot { justify-content: center; }
/* de ingang-lijn: de overdracht naar de scan-sectie eronder */
.ingang-lijn { margin-top: 3.2rem; text-align: center; position: relative; z-index: 2; }
.ingang-lijn p { color: var(--cream-60); font-size: .95rem; margin-bottom: 1.1rem; }
.ingang-lijn__punt { display: block; width: 6px; height: 6px; margin: 0 auto -6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,.7); opacity: 0; position: relative; z-index: 2; }
.ingang-lijn.in .ingang-lijn__punt { animation: ingangReis 1.5s var(--zwaar) .25s forwards, vertrekadem 3.4s ease-in-out 2s infinite; }
@keyframes ingangReis { 0% { opacity: 0; transform: translateY(0); } 14% { opacity: 1; } 100% { opacity: 1; transform: translateY(94px); } }
.ingang-lijn i { display: block; width: 1px; height: 88px; margin: .5rem auto -2.4rem; background: linear-gradient(to bottom, rgba(74,222,128,.55), rgba(74,222,128,.04)); transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--zwaar) .2s; }
.ingang-lijn.in i { transform: scaleY(1); }
/* D · kleuroverdracht: de groene lijn bloedt door in de scan-sectie */
.scan04::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(620px, 82vw); height: 190px; background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(74,222,128,.11), transparent 72%); pointer-events: none; z-index: 0; }
@media (prefers-reduced-motion: reduce) { .ingang-lijn i { transform: scaleY(1); transition: none; } .ingang-lijn.in .ingang-lijn__punt { animation: none; opacity: 1; transform: translateY(90px); } }
/* D · de draad komt aan in de volgende sectie (04 naar 05) */
/* de overgang als doorlopende draad, precies op de naad tussen sectie 04 en 05 */
.overgang-lijn { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 16; pointer-events: none; }
.overgang-lijn i { display: block; width: 1px; height: 100px; margin-top: -50px; background: linear-gradient(to bottom, rgba(74,222,128,0), rgba(74,222,128,.6) 26%, rgba(74,222,128,.6) 74%, rgba(74,222,128,0)); transform: scaleY(0); transform-origin: center; transition: transform 1.3s var(--zwaar) .15s; }
.overgang-lijn.in i { transform: scaleY(1); }
.overgang-lijn__punt { position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,.7); opacity: 0; transition: opacity .6s var(--ease) .9s; }
.overgang-lijn.in .overgang-lijn__punt { opacity: 1; animation: vertrekadem 3.4s ease-in-out 1.6s infinite; }
.bewijs { position: relative; }
.bewijs::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(560px, 78vw); height: 150px; background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(74,222,128,.07), transparent 72%); pointer-events: none; z-index: 0; }
.bewijs > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .overgang-lijn i { transform: scaleY(1); transition: none; } .overgang-lijn.in .overgang-lijn__punt { animation: none; opacity: 1; } }
/* het mini-scherm */
.mini { position: relative; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(8,120,58,.1), transparent 70%), #0c120d; height: 200px; overflow: hidden; margin-top: auto; }
.mini__kop { position: absolute; top: .65rem; left: .8rem; right: .8rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .54rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-40); z-index: 2; }
.mini__kop b { color: rgba(74,222,128,.7); font-weight: 600; }
.mini::after { content: ''; position: absolute; inset: 0; border-radius: 12px; border: 1px solid rgba(74,222,128,0); pointer-events: none; animation: ppBeurt var(--estafette, 10.5s) var(--ease) infinite; }
.mini--f::after { animation-delay: 0s; }
.mini--l::after { animation-delay: calc(var(--estafette, 10.5s) / 3); }
.mini--o::after { animation-delay: calc(var(--estafette, 10.5s) / 3 * 2); }
@keyframes ppBeurt { 4%, 26% { border-color: rgba(74,222,128,.4); } 0%, 33%, 100% { border-color: rgba(74,222,128,0); } }
/* 3-08 · De estafette staat op een telefoon uit.
   Deze randpuls wandelt in 10,5 seconden langs de drie miniaturen: op een pc
   zie je ze naast elkaar en leest dat als "nu deze". Op een telefoon zie je
   er een tegelijk, dus licht de rand op een willekeurig moment op, los van
   het verhaal, en dooft weer weg. Isaak beschreef precies dat: "eerst zie je
   die animatie afspelen, daarna trekt die weer in, en dan zie je pas de
   intake." Dat was deze puls, niet de fundering zelf.
   De intake hoort de opening te zijn; er mag daarvoor niets bewegen. */
@media (max-width: 899px) { .mini::after { animation: none; } }
.mini__link { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 1.1rem .8rem .55rem; background: linear-gradient(to top, rgba(10,15,11,.94), transparent); opacity: 0; transition: opacity .4s var(--ease); z-index: 3; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #4ade80; text-decoration: none; }
.mini:hover .mini__link, .mini__link:focus-visible { opacity: 1; }
@media (hover: none) { .mini__link { opacity: 1; } }
/* de fundering in het klein: het licht vertrekt, de kaarten lichten op, Richting wordt scherp */
/* de groeiloop in het klein: tegels, kernwoorden, vonk, golf en satellieten

   30-7-2026 · Hier stond ".ml { position: absolute; inset: 26px 0 0; }".
   Weggehaald, en dat was een echte bug. Het diagram waar die regel bij hoorde
   bestaat niet meer in de HTML (vervangen door .gloop--mini), maar de links in
   het mobiele menu dragen ook class="ml". Die kregen daardoor allemaal
   position:absolute op dezelfde plek: zes links van 818 pixels hoog bovenop
   elkaar, en een menu dat niet te gebruiken was.

   De regels hieronder zijn eveneens dood, maar ongevaarlijk: ze mikken op
   .ml__* of op .nod en .bol binnen .ml, en die bestaan geen van alle in een
   menulink. Ze blijven staan tot het opruimen van dode CSS een eigen ronde
   krijgt.

   Gebruik .ml nooit opnieuw als klassenaam: te algemeen, en hij zit al op
   zestig menulinks verspreid over twaalf pagina's. */
.ml .nod { fill: #171310; stroke: rgba(74,222,128,.4); stroke-width: 1; }
.ml .nod--eigen { stroke: rgba(158,113,80,.55); stroke-dasharray: 3 3; }
.ml .bol { fill: #4ade80; }
.ml .bol--stil { display: none; }
.ml .bol--rijdt { animation: mlGloei var(--estafette, 10.5s) ease-in-out infinite; }
@keyframes mlGloei { 36%, 62% { filter: drop-shadow(0 0 6px rgba(74,222,128,.9)); } 0%, 30%, 70%, 100% { filter: drop-shadow(0 0 2px rgba(74,222,128,.4)); } }
/* rdz os in het klein: dashboard met tikkende waarden, patroon en maandstrip */
.mini--o { height: auto; }
/* ── RDZ OS-cockpit: dashboard-fragment met kompas, sparklines en hefboom ── */
.mini--o .os { position: relative; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .58rem .8rem .65rem; background: rgba(0,0,0,.15); }
/* C · het OS vormt zich: skelet dat zich vult, scherp vanaf maand 2 */
.os__naam, .os__waarde, .os__spark, .os__hef { transition: opacity .55s var(--ease); }
.os__rij:nth-child(2) .os__naam, .os__rij:nth-child(2) .os__waarde, .os__rij:nth-child(2) .os__spark { transition-delay: .06s; }
.os__rij:nth-child(3) .os__naam, .os__rij:nth-child(3) .os__waarde, .os__rij:nth-child(3) .os__spark { transition-delay: .12s; }
.os__rij:nth-child(4) .os__naam, .os__rij:nth-child(4) .os__waarde, .os__rij:nth-child(4) .os__spark { transition-delay: .18s; }
.os__rij:nth-child(5) .os__naam, .os__rij:nth-child(5) .os__waarde, .os__rij:nth-child(5) .os__spark { transition-delay: .24s; }
.os__rij:nth-child(6) .os__naam, .os__rij:nth-child(6) .os__waarde, .os__rij:nth-child(6) .os__spark { transition-delay: .3s; }
.os--vormt .os__naam, .os--vormt .os__waarde, .os--vormt .os__spark { opacity: 0; }
.os--vormt .os__hef { opacity: 0; }
.os--vormt .os__rij::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 7px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.13), rgba(255,255,255,.05)); background-size: 220% 100%; animation: osSkelet 1.8s linear infinite; }
.os--vormt .os__rij:nth-child(1)::after { width: 58%; } .os--vormt .os__rij:nth-child(2)::after { width: 46%; animation-delay: .2s; } .os--vormt .os__rij:nth-child(3)::after { width: 62%; animation-delay: .4s; } .os--vormt .os__rij:nth-child(4)::after { width: 50%; animation-delay: .1s; } .os--vormt .os__rij:nth-child(5)::after { width: 66%; animation-delay: .5s; } .os--vormt .os__rij:nth-child(6)::after { width: 54%; animation-delay: .3s; }
@keyframes osSkelet { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
.os__vormt { position: absolute; left: .8rem; right: .8rem; bottom: .65rem; display: none; align-items: center; justify-content: center; gap: .5rem; height: 58px; text-align: center; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .05em; line-height: 1.4; color: var(--cream-40); z-index: 3; }
.os--vormt .os__vormt { display: flex; }
.os__vormt-p { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; animation: osVormtPuls 1.5s ease-in-out infinite; }
@keyframes osVormtPuls { 0%, 100% { opacity: .3; box-shadow: 0 0 0 0 rgba(74,222,128,.4); } 50% { opacity: 1; box-shadow: 0 0 8px 0 rgba(74,222,128,.5); } }
/* het OS sluimert tot de Groeiloop echt draait: pas dan wordt het skelet zichtbaar dat zich vult */
.mini--o .os { transition: filter 1.2s var(--zwaar), opacity 1.2s var(--zwaar); }
.mini--o .os.os--sluimer { filter: blur(6px) saturate(.6); opacity: .4; }
.os--sluimer .os__rij::after, .os--sluimer .os__vormt-p { animation-play-state: paused; }
/* de inslag op de Deep Dive loopt door in het OS: het paneel vangt de klap op
   en het skelet licht per rij mee op, met dezelfde vertraging als de laadgolf */
.mini--o .os.os--inslag { animation: osInslag 1.7s var(--ease); }
@keyframes osInslag { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); border-color: rgba(255,255,255,.08); } 30% { box-shadow: 0 0 30px 3px rgba(74,222,128,.28); border-color: rgba(74,222,128,.5); } }
.os--inslag .os__rij::after { animation: osSkelet 1.8s linear infinite, osBalkInslag 1.5s var(--ease); }
@keyframes osBalkInslag { 0%, 100% { filter: none; } 32% { filter: drop-shadow(0 0 7px rgba(74,222,128,.6)) brightness(1.7); } }
/* na de eerste hele ronde vullen enkele rijen zich al met echte cijfers */
.os--vormt .os__rij.vol .os__naam, .os--vormt .os__rij.vol .os__waarde, .os--vormt .os__rij.vol .os__spark { opacity: 1; }
.os--vormt .os__rij.vol::after { display: none; }
@media (prefers-reduced-motion: reduce) { .os--vormt .os__rij::after, .os__vormt-p { animation: none; } .mini--o .os.os--sluimer { filter: none; opacity: 1; } .mini--o .os.os--inslag, .os--inslag .os__rij::after { animation: none; } }
.os__dossier { font-family: var(--font-mono); font-size: .46rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-40); margin-bottom: .34rem; }
.os__dossier b { color: var(--cream-60); font-weight: 600; }
.os__bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: .28rem; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: .3rem; }
.os__bar b { font-family: var(--font-mono); font-size: .5rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(74,222,128,.8); }
.os__bar span { font-family: var(--font-mono); font-size: .42rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(158,113,80,.85); border: 1px solid rgba(158,113,80,.4); border-radius: 3px; padding: .1rem .32rem; }
.os__rij { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: .2rem 0; border-bottom: 1px dashed rgba(255,255,255,.06); position: relative; cursor: default; }
.os__rij:last-child { border-bottom: 0; }
.os__naam { font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--cream-60); transition: color .3s; }
.os__rij:hover .os__naam { color: var(--cream); }
.os__spark { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.os__spark i { width: 3px; height: 4px; background: rgba(74,222,128,.35); border-radius: 1px; transition: height .5s var(--zwaar), background .3s; }
.os__spark i.top { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,.6); }
.os__waarde { display: flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; color: rgba(74,222,128,.9); min-width: 28px; justify-content: flex-end; }
.os__pijl { font-size: .68rem; line-height: 1; }
.os__pijl.op { color: #4ade80; } .os__pijl.neer { color: #d08a58; } .os__pijl.vlak { color: var(--cream-40); }
.os__tip { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: -.05rem; font-family: var(--font-mono); font-size: .48rem; letter-spacing: .02em; line-height: 1.4; color: #8fedb0; background: #10160f; border: 1px solid rgba(74,222,128,.2); border-radius: 6px; padding: .38rem .5rem; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.os__rij:hover .os__tip { opacity: 1; transform: none; }
.os__hef { margin-top: .4rem; border: 1px solid rgba(158,113,80,.35); border-radius: 8px; padding: .4rem .68rem; background: linear-gradient(160deg, rgba(158,113,80,.1), transparent); }
.os__hef .l { font-family: var(--font-mono); font-size: .44rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(208,138,88,.9); }
.os__hef .h { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--cream); margin: .14rem 0 0; }
.os__hef .z { font-size: .66rem; color: var(--cream-40); margin: .1rem 0 0; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
    #systeem .mini *, #systeem .mini::after { animation: none !important; }
    .ml .bol--rijdt { display: none; }
    .ml .bol--stil { display: block; }
}

/* ── Gamified: hover geeft de scene direct de beurt (solo-afspeling, 3.6s) ── */
.mini--l:hover .bol--rijdt { filter: drop-shadow(0 0 7px rgba(74,222,128,1)); }
/* ── Gamified: speel het RDZ OS zelf (klik tikt de waarden op) ── */

/* Methodepagina-slot: het vertrekpunt. De lijn daalt af, het punt wacht op jou. */
.final--vertrek h2 { margin-bottom: 1.6rem; }
.final--vertrek h2 em { color: #4ade80; }
.vertrek { height: 128px; margin-bottom: 2.4rem; }
.vertrek.rv { transform: none; }
.vertrek__lijn { width: 1px; height: 108px; margin: 0 auto; background: linear-gradient(to bottom, transparent, rgba(74,222,128,.6)); transform: scaleY(0); transform-origin: top; transition: transform 1.5s var(--zwaar) .15s; }
.vertrek__punt { width: 7px; height: 7px; border-radius: 50%; margin: .4rem auto 0; background: #4ade80; box-shadow: 0 0 14px rgba(74,222,128,.7); opacity: 0; transition: opacity .8s var(--ease) 1.45s; }
.vertrek.in .vertrek__lijn { transform: scaleY(1); }
.vertrek.in .vertrek__punt { opacity: 1; animation: vertrekadem 3.4s ease-in-out 2.3s infinite; }
@keyframes vertrekadem { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.vertrek__al { max-width: 560px; margin: 0 auto 1rem; color: var(--cream-60); line-height: 1.7; }
/* de brug zonder woorden: de lijn tekent door naar de knop, het datapunt maakt de reis */
.vertrek2 { position: relative; height: 78px; margin: 1.6rem auto 1.9rem; }
.vertrek2.rv { transform: none; }
.vertrek2__lijn { position: absolute; left: 50%; top: 0; width: 1px; height: 64px; transform: translateX(-50%) scaleY(0); transform-origin: top; background: linear-gradient(to bottom, transparent, rgba(74,222,128,.55)); transition: transform .9s var(--zwaar) .15s; }
.vertrek2__punt { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,.7); opacity: 0; }
.vertrek2.in .vertrek2__lijn { transform: translateX(-50%) scaleY(1); }
.vertrek2.in .vertrek2__punt { animation: puntreis .95s var(--zwaar) 1s both, vertrekadem 3.4s ease-in-out 2.2s infinite; }
@keyframes puntreis { from { transform: translateY(0); opacity: 0; } 18% { opacity: .95; } to { transform: translateY(64px); opacity: .95; } }
.vertrek2.in ~ .final__actions .btn--accent { animation: knopgloed 1.3s var(--ease) 1.85s 1; }
@keyframes knopgloed { 0%, 100% { box-shadow: 0 0 30px rgba(74,222,128,.2); } 35% { box-shadow: 0 0 50px rgba(74,222,128,.55); } }
/* de Start-knop is het datapunt zelf: de enige RDZ-groene knop op de site */
.final--vertrek .btn--accent { background: #4ade80; border-color: #4ade80; color: #0c130d; padding: 1.15rem 2.1rem 1.15rem 2.4rem; box-shadow: 0 0 30px rgba(74,222,128,.2); }
.final--vertrek .btn--accent .btn__row { font-size: 1.06rem; }
.final--vertrek .btn--accent .btn__sub { color: rgba(12,19,13,.7); }
.final--vertrek .btn--accent:hover { background: #62e79a; border-color: #62e79a; box-shadow: 0 0 46px rgba(74,222,128,.42); }
.final--vertrek .btn--ghost { border-color: rgba(242,241,239,.2); color: var(--cream-60); }
.final--vertrek .btn--ghost:hover { color: var(--cream); }
/* bij hover neemt de knop het datapunt op */
.vertrek2.op .vertrek2__punt { animation: puntweg .45s var(--ease) both; }
@keyframes puntweg { from { transform: translateY(64px); opacity: .95; } to { transform: translateY(84px) scale(.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .vertrek__lijn { transform: none; transition: none; }
    .vertrek__punt { opacity: 1; transition: none; animation: none; }
    .vertrek2__lijn { transform: translateX(-50%); transition: none; }
    .vertrek2__punt, .vertrek2.in .vertrek2__punt { animation: none; opacity: .9; transform: translateY(64px); }
    .vertrek2.in ~ .final__actions .btn--accent { animation: none; }
}

/* ══════════ Groeiloop: dubbelring (buitenring ritme · binnenring verandering)
   RDZ-groen als energie, koper als contrast op de eigen-nodes. ══════════ */
.gloop { position: relative; max-width: 780px; margin: 3.4rem auto 0; aspect-ratio: 8/5.4; }
.gloop > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; transform: translateZ(0); }
.gloop > .gloop__golven { z-index: 1; pointer-events: none; }
/* de laadring: de golf bereikt een levensgebied en laadt het op */
/* de brede gloed-pulse: zichtbaar terwijl een gebied activeert, daarna weg */
.gloop__gloed { pointer-events: none; opacity: 0; }
.gloop__laad { fill: none; stroke: #4ade80; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(74,222,128,.6)); pointer-events: none; transition: opacity .55s var(--ease); }
.gsat b, .gsat small, .gsat__ico { transition: color 1s var(--zwaar), text-shadow 1s var(--zwaar), stroke 1s var(--zwaar), filter 1s var(--zwaar); }
.gsat.vol b { text-shadow: 0 0 16px rgba(74,222,128,.6); }
.gsat.vol small { color: var(--cream); }
.gsat.vol .gsat__ico { stroke: #8dffb1; filter: drop-shadow(0 0 7px rgba(74,222,128,.6)); }
/* radar-diepte: stille ringen en een warme kern achter de loop */
.gloop__radar { position: absolute; inset: -16% -8%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(4,83,43,.22), transparent 62%), repeating-radial-gradient(ellipse 62% 62% at 50% 50%, rgba(74,222,128,.06) 0 1px, transparent 1px 50px); -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 78%); mask-image: radial-gradient(ellipse at center, black 35%, transparent 78%); }
/* de uitkomsten rond de loop: gedempt, een voor een gevoed door het ritme */
.gsat { position: absolute; z-index: 2; width: 200px; opacity: .35; transition: opacity 1.4s var(--zwaar), transform 1.4s var(--zwaar); display: none; grid-template-columns: 22px 1fr; gap: .3rem .55rem; align-items: center; }
.gsat__ico { width: 19px; height: 19px; grid-column: 1; grid-row: 1; fill: none; stroke: rgba(74,222,128,.8); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gsat--l1, .gsat--l2, .gsat--l3 { grid-template-columns: 1fr 22px; }
.gsat--l1 .gsat__ico, .gsat--l2 .gsat__ico, .gsat--l3 .gsat__ico { grid-column: 2; }
.gsat--l1 b, .gsat--l2 b, .gsat--l3 b { grid-column: 1; grid-row: 1; }
.gsat--l1 small, .gsat--l2 small, .gsat--l3 small { grid-column: 1; }
.gsat--r1 small, .gsat--r2 small, .gsat--r3 small { grid-column: 2; }
.gsat b { display: block; font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #4ade80; transition: text-shadow 1.4s var(--zwaar); }
.gsat small { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--cream-40); transition: color 1s var(--zwaar); }
.gsat.aan { opacity: 1; }
.gsat.aan b { text-shadow: 0 0 14px rgba(74,222,128,.45); }
.gsat.aan small, .gsat.vol small { color: var(--cream-60); }
.gsat--l1, .gsat--l2, .gsat--l3 { right: calc(100% + 26px); text-align: right; }
.gsat--r1, .gsat--r2, .gsat--r3 { left: calc(100% + 26px); }
.gsat--l1, .gsat--r1 { top: 9%; }
.gsat--l2, .gsat--r2 { top: 46%; }
.gsat--l2 { right: calc(100% + 46px); }
.gsat--r2 { left: calc(100% + 46px); }
.gsat--l3, .gsat--r3 { top: 80%; }
@media (min-width: 1240px) { .gsat { display: grid; } }
/* ruimere schermen: titels op een regel */
@media (min-width: 1420px) { .gsat { width: 236px; } }
.gloop__ring { fill: none; stroke: rgba(74,222,128,.35); stroke-width: 2.5; transition: stroke 1.2s var(--ease); }
.gloop.herijk .gloop__ring { stroke: rgba(74,222,128,.5); }
.gloop__pijl { fill: rgba(74,222,128,.55); }
.gloop__puls { fill: none; stroke: #4ade80; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(74,222,128,.8)); }
.gnode { position: absolute; z-index: 2; transform: translate(-50%, -50%); background: #1b1610; border: 1px solid rgba(74,222,128,.3); border-radius: 12px; padding: .85rem 1.5rem; text-align: center; min-width: 150px; transition: border-color .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease); cursor: default; }
/* de gloed van een actieve tegel op een eigen laag, zodat de adem alleen opacity kost */
.gnode::before { content: ''; position: absolute; inset: -1px; border-radius: 12px; box-shadow: 0 0 26px rgba(74,222,128,.25); opacity: 0; transition: opacity .6s var(--ease); will-change: opacity; pointer-events: none; }
.gnode--eigen::before { box-shadow: 0 0 28px rgba(158,113,80,.3); }
.gnode--eigen { border-style: dashed; border-color: rgba(158,113,80,.55); }
.gnode b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--cream); }
.gnode small { display: block; margin-top: .2rem; font-size: .74rem; color: var(--cream-40); }
.gnode.aan { border-color: #4ade80; background: #241c13; }
.gnode--eigen.aan { border-color: var(--accent); }
.gnode.aan::before { opacity: 1; }
@keyframes gtik { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 42% { transform: translate(-50%, -50%) scale(.955); } }
.gnode.tik { animation: gtik .45s var(--ease); }
/* Uitvoering: hier verstrijkt tijd — de actieve kaart ademt bijna onzichtbaar */
.gloop[data-f="1"] .gnode.aan::before { animation: gadem 4.8s ease-in-out infinite; }
@keyframes gadem { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Binnenring: compacte ronde kern, ademend */
.gkern { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(150px, 30%, 210px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; background: radial-gradient(circle, rgba(8,120,58,.38) 0%, rgba(10,20,13,.68) 82%); box-shadow: 0 0 110px 12px rgba(30,160,85,.16), 0 0 42px rgba(30,160,85,.14); transition: box-shadow .7s var(--ease); }
/* de adem van de kern op een eigen laag: alleen opacity beweegt, de GPU composit */
.gkern::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,.09) 0%, transparent 70%); opacity: .25; animation: kernadem 8s ease-in-out infinite; will-change: opacity; pointer-events: none; }
/* de score: het gebied laadt meetbaar op, in de kompas-schaal van het OS */
/* de score als meetchip: waarde leesbaar als onderdeel van de titelregel */
.gsat__score { font-family: var(--font-mono); font-style: normal; font-weight: 600; font-size: .56rem; letter-spacing: 0; color: rgba(74,222,128,.85); margin-left: .4rem; padding: .06rem .36rem; border: 1px solid rgba(74,222,128,.3); border-radius: 999px; background: rgba(74,222,128,.06); }
/* links gespiegeld: de score aan de buitenrand, net als rechts */
.gsat--l1 .gsat__score, .gsat--l2 .gsat__score, .gsat--l3 .gsat__score { margin-left: 0; margin-right: .4rem; }
.gsat__score { transition: opacity .55s var(--ease); }
.gsat__score.zakt { opacity: .12; }
.gsat__score.tik { animation: scoretik 1s var(--zwaar); }
/* het seizoensmoment: alle gebieden lichten samen op als slotakkoord */
.gsat.seizoen b { color: var(--cream); text-shadow: 0 0 18px rgba(74,222,128,.65); }
.gsat.seizoen .gsat__ico { stroke: #b8ffcd; filter: drop-shadow(0 0 8px rgba(74,222,128,.7)); }
/* confetti over de hele pagina bij het seizoensmoment, zoals bij de groeiscan */
.gconfetti-laag { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }
.gconfetti-stuk { position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 2px; animation: gconfettiVal linear forwards; }
@keyframes gconfettiVal { to { transform: translateY(108vh) rotate(720deg); opacity: .05; } }
/* op seizoensdoel: dit gebied is klaar dit seizoen, tot de nieuwe cyclus */
.gsat.voltooid .gsat__score { color: #a7f3c4; text-shadow: 0 0 9px rgba(74,222,128,.5); border-color: rgba(74,222,128,.65); background: rgba(74,222,128,.12); }
.gsat.voltooid .gsat__ico { stroke: rgba(141,255,177,.85); filter: drop-shadow(0 0 5px rgba(74,222,128,.35)); }
@keyframes scoretik { 25% { color: #b8ffcd; text-shadow: 0 0 10px rgba(74,222,128,.85); } }
/* de tegel ontvangt de feedback: flits op de rand, geen beweging */
.gnode.ontvang { border-color: #4ade80; box-shadow: 0 0 24px rgba(74,222,128,.28); }
/* het duwtje: de tegel schrikt mee met de inslag en veert zwaar terug */
.gnode.duw { animation: gduw .7s var(--zwaar); }
@keyframes gduw { 18% { transform: translate(calc(-50% + var(--duwx, 0px)), calc(-50% + var(--duwy, 0px))); } }
.gloop__spat { fill: #d08a58; pointer-events: none; }
/* gruis op het inslagpunt: uitwaaieren en uitdoven, afgeremd naar het eind */
.gloop__spat--vlieg { animation: gSpat var(--sdur, 500ms) cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes gSpat {
    from { transform: translate(var(--sx), var(--sy)); opacity: .85; }
    to   { transform: translate(calc(var(--sx) + var(--sdx)), calc(var(--sy) + var(--sdy))); opacity: 0; }
}
/* de terugkoppeling: feedback reist terug en het hart tikt zachtjes */
/* de terugreis is van jou: koper, net als jouw tegels en jouw legenda-chip */
.gloop__terug { fill: #d08a58; filter: drop-shadow(0 0 4px rgba(192,120,80,.6)); pointer-events: none; }
.gkern.tikje { box-shadow: 0 0 118px 13px rgba(30,160,85,.22), 0 0 46px rgba(30,160,85,.18); }
/* het hart geladen: de gloed zwelt even aan voordat de golf vertrekt */
.gkern.geladen { box-shadow: 0 0 128px 16px rgba(30,160,85,.28), 0 0 55px rgba(30,160,85,.24); }
/* de hartslag: alle vier de woorden laden tegelijk mee op */
@keyframes kernadem { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Bijsturen: alleen het woord Richting wordt verzet — opgetild, verplaatst, teruggezet */
@keyframes verzet { 0% { transform: none; } 22% { transform: translateX(-4px) rotate(-3deg); } 58% { transform: translateX(5px) rotate(2deg); } 100% { transform: none; } }
.gbegrip.verzet { animation: verzet 1.15s var(--zwaar); text-shadow: 0 0 22px rgba(74,222,128,.9); }
.gbegrip { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-25); transition: color .7s var(--ease), text-shadow .7s var(--ease); cursor: default; }
.gbegrip.koppel { animation: gbKoppel 1.7s var(--ease); }
@keyframes gbKoppel { 0% { color: var(--cream-25); text-shadow: none; } 40% { color: #8fedb0; text-shadow: 0 0 13px rgba(74,222,128,.9); } 100% { color: var(--cream-25); text-shadow: none; } }
.gbegrip.aan { color: #4ade80; text-shadow: 0 0 14px rgba(74,222,128,.5); }
/* hover op een leefgebied: de voedende kernwoorden lichten op */
.gbegrip.bron { color: #8fedb0; text-shadow: 0 0 14px rgba(74,222,128,.55); }
.gbegrip.na { color: var(--cream-40); text-shadow: none; }
.gbegrip:hover { color: var(--cream); }
@media (max-width: 720px) {
    /* 31-07 · Hier stond `aspect-ratio: 8/7`, bedoeld om de knopen destijds
       meer verticale lucht te geven. Het gevolg was een stille scheefstand:

       De ring wordt getekend in een viewBox van 800 bij 540 (verhouding
       8/5,4). Zet je de doos op 8/7, dan schaalt de browser die tekening
       evenredig in en centreert hem: op 300 breed is de ring nog maar 203
       hoog, met 30 pixels lege band boven en onder. De knopen, de kern en de
       satellieten staan intussen op CSS-procenten van de VOLLE doos van 263.
       Die twee stelsels liepen dus 30 pixels uit de pas, en de laadrondjes
       van de puls (die in svg-coordinaten rekenen) landden ernaast.

       Isaak zag het precies: "die rondjes staan niet helemaal recht en
       synchroon, op de webversie staat dat wel top." Op de pc is de doos
       780 bij 527 en klopt de verhouding vanzelf.

       Terug naar dezelfde verhouding als de tekening. Scheelt en passant 60
       pixels hoogte, wat de scene verder in een oogopslag brengt. */
    .gloop { aspect-ratio: 8/5.4; }
    .gnode { min-width: 0; padding: .55rem .8rem; }
    .gnode b { font-size: .82rem; }
    .gnode small { display: none; }
    .gbegrip { font-size: .54rem; }
}
@media (prefers-reduced-motion: reduce) {
    .gnode, .gbegrip { opacity: 1 !important; }
    .gbegrip { color: var(--cream-60); }
    .gkern::after, .gweek::after, .gloop[data-f="1"] .gnode.aan::before { animation: none; }
}

/* Verdieping-regel binnen statement-secties: kleiner en rustiger dan de kopregels */
.lek__line--sub { font-family: var(--font-ui); font-weight: 400; font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.7; color: var(--cream-60); max-width: 620px; letter-spacing: 0; }

/* Vonk van ring naar kern, spoor achter de puls, inslag op het woord */
.gloop__vonk { fill: none; stroke: #4ade80; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(74,222,128,.9)); pointer-events: none; }
.gloop__ripple { fill: none; stroke: #4ade80; stroke-width: 1; pointer-events: none; }
/* De golf uit het hart schaalt in plaats van te groeien in zijn straal. Schalen
   mag de compositor doen; een veranderende straal dwingt de browser het hele
   vlak opnieuw te tekenen, en dat over een cirkel die de sectie vult. De lijn
   blijft 1px dankzij non-scaling-stroke. De tussenstops volgen de oude curve
   (versnelling 2.2, uitdoving 1.8), zodat de beweging niet verandert. */
.gloop__ripple--groei {
    vector-effect: non-scaling-stroke;
    transform: translate(var(--gx), var(--gy)) scale(1);
    animation: gRipple var(--gdur, 1800ms) linear forwards;
}
@keyframes gRipple {
    0%   { transform: translate(var(--gx), var(--gy)) scale(1); opacity: var(--gop); }
    25%  { transform: translate(var(--gx), var(--gy)) scale(calc(1 + (var(--gs) - 1) * .461)); opacity: calc(var(--gop) * .753); }
    50%  { transform: translate(var(--gx), var(--gy)) scale(calc(1 + (var(--gs) - 1) * .782)); opacity: calc(var(--gop) * .354); }
    75%  { transform: translate(var(--gx), var(--gy)) scale(calc(1 + (var(--gs) - 1) * .948)); opacity: calc(var(--gop) * .092); }
    100% { transform: translate(var(--gx), var(--gy)) scale(var(--gs)); opacity: 0; }
}
.gloop__trail { fill: #4ade80; pointer-events: none; }
@keyframes ginslag { 0% { transform: scale(1); } 30% { transform: scale(1.16); } 100% { transform: scale(1); } }
.gbegrip.inslag { animation: ginslag .5s var(--ease); text-shadow: 0 0 22px rgba(74,222,128,.9); }

/* Informatiekaart onder de loop: geen uitleg, een pagina uit het manifest */
/* Staat sinds 24-7 BINNEN de gepinde sectie, waar circa 186px ruimte is.
   Daarom compacter: kleinere marge en geen vaste minimumhoogte meer. */
.gkaart { max-width: 560px; margin: 1rem auto 0; text-align: center; min-height: 5.4em; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.gkaart.wissel { opacity: 0; transform: translateY(5px); }
.gkaart__kop { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #4ade80; }
.gkaart__gedachte { margin-top: .45rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.3; color: var(--cream); }
.gkaart__zin { margin-top: .4rem; font-size: .9rem; line-height: 1.55; color: var(--cream-60); }

/* ══════════ De duiding in het hart van de Groeiloop ══════════
   Gemeten op 24-7: staat de loop mooi in beeld (1280x900), dan begint de
   kaart eronder 738 pixels onder de onderrand. Je ziet het mechanisme dus
   nooit tegelijk met de betekenis ervan.

   De vier kernwoorden Feedback, Inzicht, Richting en Actie stonden op de
   mooiste plek van de animatie zonder iets te vertellen; ze lichtten alleen
   op. Daar staat nu de duiding van de actieve fase. De woorden zelf blijven
   bestaan en komen terug zodra er geen fase draait, zodat de kern niet
   verdwijnt maar plaatsmaakt. */
/* zodra er een fase draait, wisselen woorden en duiding van plek */
/* Tijdens de wissel even wegvagen zodat de tekst niet verspringt. Bewust met
   :not() hierboven in plaats van een losse .wissel-regel eronder: die had
   dezelfde specificiteit en won dan puur op volgorde, wat breekt zodra
   iemand de regels verplaatst. */

/* De tikknoppen van de oude tikstand (24-7). Sinds 31-07 draait de loop ook
   op een telefoon gewoon door, dus deze rij komt nergens meer tevoorschijn;
   rdz.js zet het hidden-attribuut. De regel hieronder is nodig omdat een
   display-regel anders van dat attribuut wint: dat gebeurde ook echt, de
   "verborgen" rij bleef 96 pixels innemen midden in de scene. */
.gtik, .gtik[hidden] { display: none; }
.gtik__knop { font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-60); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem; min-height: 44px; cursor: pointer; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.gtik__knop[aria-pressed="true"] { color: #0a140d; background: #4ade80; border-color: #4ade80; }

/* Groeiloop maand-strip: de loop vertaald naar een echte maand */
.gmaand { display: flex; justify-content: center; gap: .5rem; max-width: 620px; margin: 2.2rem auto 0; }
.gmaand__label { align-self: center; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #4ade80; margin-right: .7rem; transition: opacity .5s var(--ease); }
.gmaand__label.zakt { opacity: .1; }
.gweek { flex: 1; position: relative; text-align: center; font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-25); border: 1px solid var(--line); border-radius: 999px; padding: .45rem 0; transition: color .6s var(--ease), border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); }
.gweek.aan { color: #4ade80; border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.06); box-shadow: 0 0 14px rgba(74,222,128,.12); }
/* de actieve week ademt zachtjes: dit is nu; de gloed op een eigen laag */
.gweek.nu { color: #6ee7a0; border-color: rgba(74,222,128,.65); }
.gweek::after { content: ''; position: absolute; inset: -1px; border-radius: 999px; box-shadow: 0 0 18px rgba(74,222,128,.3); background: rgba(74,222,128,.09); opacity: 0; will-change: opacity; pointer-events: none; }
.gweek.nu::after { animation: weekadem 3.2s var(--ease) infinite; }
@keyframes weekadem { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gweek.nu::after { animation: none; } }
@media (max-width: 720px) { .gweek { font-size: .52rem; letter-spacing: .1em; } }

/* Legenda: in de onderhoeken van de loop zelf — de uitleg zit in de visual */
.glegenda { position: relative; z-index: 2; display: flex; justify-content: space-between; max-width: 780px; margin: -3.2rem auto 0; padding: 0 .4rem; }
.glegenda__item { font-size: .72rem; color: var(--cream-60); background: #1b1610; border-radius: 10px; padding: .38rem .85rem; }
.glegenda__item--samen { border: 1px solid rgba(74,222,128,.55); }
.glegenda__item--eigen { border: 1px dashed rgba(158,113,80,.6); }
/* de legenda volgt het bolletje: de niet-actieve rol vervaagt licht */
.glegenda__item { opacity: .45; filter: blur(1.1px); transition: color .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease), opacity .28s var(--ease), filter .28s var(--ease); }
.glegenda__item.aan { opacity: 1; filter: none; }
.glegenda__item--samen.aan { color: var(--cream); border-color: #4ade80; background: rgba(74,222,128,.07); }
.glegenda__item--eigen.aan { color: var(--cream); border-color: var(--accent); background: rgba(158,113,80,.1); }
@media (max-width: 720px) { .glegenda { margin: 1.1rem auto 0; justify-content: center; gap: .5rem; flex-wrap: wrap; } .glegenda__item { font-size: .7rem; padding: .35rem .8rem; } }

/* ══════════ RDZ Operating System: cockpit-preview van het echte systeem ══════════
   Een dashboard, geen rapport: modules, signalen, trends en verbanden.
   De tijdlijn regisseert; per Deep Dive wordt het beeld completer.
   Toekomstige elementen liggen er al vaag: alles is er, alleen het zicht groeit. */
/* sticky kan niet leven in overflow: hidden; clip knipt wel maar laat sticky werken */
#praktijk { overflow: clip; }
.praktijk__kop { max-width: 680px; margin-bottom: 2.4rem; }
.praktijk__lead { color: var(--grey-on-paper); }

.os { position: relative; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.8rem 2rem 2rem; }
.dos-water { position: absolute; right: -1.2rem; bottom: -2.6rem; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 9.5rem; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px rgba(158,113,80,.08); pointer-events: none; user-select: none; }
.dos-kop { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dos-kop__id { display: flex; align-items: center; gap: .9rem; }
.dos-embleem { display: grid; place-items: center; width: 46px; height: 46px; flex: none; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); border-radius: 50%; overflow: hidden; }
.dos-embleem img { width: 100%; height: 100%; object-fit: contain; }
.dos-merk { display: block; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.dos-client { display: block; margin-top: .35rem; font-size: .8rem; color: var(--cream-60); }
.dos-redact { filter: blur(4px); opacity: .75; user-select: none; }
.dos-stempel { font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(158,113,80,.85); border: 1px solid rgba(158,113,80,.5); border-radius: 3px; padding: .3rem .55rem .3rem .8rem; transform: rotate(-2deg); white-space: nowrap; }
.dos-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; color: var(--cream-40); }
.dos-meta b { font-weight: 600; color: var(--cream-60); }

/* scroll = tijd: op desktop plakt het dashboard en regisseert de scroll de maanden */
/* fullscreen cockpit: het OS breekt uit de container en vult het scherm */
#praktijk .container { max-width: 1760px; }
@media (min-width: 901px) {
    .os-scroll { height: 260vh; }
    .os-scroll .os { position: sticky; top: 16px; min-height: calc(100vh - 32px); display: flex; flex-direction: column; }
    .os-scroll .os .os-grid { flex: 1; align-content: stretch; }
}
/* het systeem leeft: kleine meldingen bij iedere stap */
.dos-live { color: #4ade80; opacity: 0; transition: opacity .5s var(--ease); }
.dos-live.aan { opacity: 1; }
/* verhaalregie: per maand krijgt de ene ontwikkeling de focus, de rest wijkt even */
.os.verhaal .os-mod { opacity: .65; }
.os.verhaal .os-mod.mod-focus { opacity: 1; border-color: rgba(74,222,128,.45); box-shadow: 0 0 20px rgba(74,222,128,.08); }
/* cinematische maandwissel: alles blurt kort, de hoofdlijn staat centraal */
.os.verhaal .os-grid { filter: blur(0); }
.os-titel { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; background: rgba(10,20,13,.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); border-radius: 14px; }
.os-titel.aan { opacity: 1; }
.os-titel b { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: var(--cream); text-transform: capitalize; text-shadow: 0 0 30px rgba(74,222,128,.25); }
.os-titel span { display: block; margin-top: .45rem; font-size: .98rem; color: var(--cream-60); }
.os-titel.intro b { text-transform: none; }

/* tijdlijn: de regisseur van het dashboard */
.os-tijd { position: relative; z-index: 1; display: flex; gap: .5rem; margin-top: 1.1rem; padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.os-stap { flex: 1; text-align: left; background: none; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; cursor: pointer; transition: border-color .5s var(--ease), background .5s var(--ease); }
.os-stap b { display: block; font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-40); transition: color .5s var(--ease); }
.os-stap small { display: block; margin-top: .15rem; font-size: .68rem; color: var(--cream-25); transition: color .5s var(--ease); }
.os-stap.geweest { border-color: rgba(158,113,80,.4); }
.os-stap.geweest b { color: rgba(158,113,80,.8); }
.os-stap.aan { border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.05); }
.os-stap.aan b { color: #4ade80; }
.os-stap.aan small { color: var(--cream-60); }

/* het grid: losse modules, ademruimte, dekkende vlakken */
.os-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem; margin-top: 1.1rem; }
.os-mod { position: relative; background: #16241a; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.15rem 1.1rem; transition: opacity .5s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
#mod-kompas, #mod-hefboom, #mod-richting, #mod-volgende { grid-column: span 4; }
#mod-patronen { grid-column: span 7; }
#mod-inzichten { grid-column: span 5; }
#mod-keten { grid-column: span 8; }
.os-mod__kop { display: block; font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-40); margin-bottom: .7rem; }

/* zenuwstelsel: selectie licht verbanden op, de rest wijkt */
.os.sel .os-mod:not(.verbonden):not(#mod-patronen) { opacity: .3; }
.os-mod.verbonden { border-color: rgba(74,222,128,.4); box-shadow: 0 0 18px rgba(74,222,128,.07); }

/* toekomstige elementen liggen er al vaag */
.os [data-vanaf] { opacity: .14; filter: blur(.6px); transition: opacity .9s var(--zwaar), filter .9s var(--zwaar); pointer-events: none; }
.os.t1 [data-vanaf="1"], .os.t2 [data-vanaf="1"], .os.t3 [data-vanaf="1"],
.os.t2 [data-vanaf="2"], .os.t3 [data-vanaf="2"], .os.t3 [data-vanaf="3"] { opacity: 1; filter: none; pointer-events: auto; }

/* kompas */
.kompas { list-style: none; margin: 0; padding: 0; }
.kompas li { display: flex; justify-content: space-between; align-items: baseline; padding: .32rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .85rem; color: var(--cream-80); }
.kompas li:last-child { border-bottom: 0; }
.trend { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--cream-60); transition: color .5s var(--ease); }
.trend.op { color: #4ade80; }
.trend.af { color: var(--accent); }
/* kompas-context: hover over een cijfer geeft de duiding erachter */
.kompas li { position: relative; cursor: default; }
.kompas li[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 6; width: max-content; max-width: 250px; background: #0d1810; border: 1px solid rgba(74,222,128,.35); border-radius: 8px; padding: .5rem .7rem; font-size: .72rem; line-height: 1.45; color: var(--cream-80); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
/* hefboomtaak: de concrete taak van deze maand vult de hefboom-module */
.hef-taak { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(158,113,80,.25); }
.hef-taak span { display: block; font-family: var(--font-mono); font-size: .54rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(158,113,80,.9); margin-bottom: .35rem; }
.hef-taak b { display: block; font-weight: 400; font-size: .85rem; line-height: 1.5; color: var(--cream-80); }

/* hefboom: het koperen zwaartepunt */
.os-mod--hefboom { border-color: rgba(158,113,80,.5); background: #1d2317; }
.hef-kop { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--cream); margin: 0; }
.hef-zin { margin: .45rem 0 0; font-size: .78rem; color: var(--cream-60); }
.wisselt { transition: opacity .24s var(--ease); }
.wisselt.wissel { opacity: 0; }

/* richting */
.richting-van, .richting-naar { margin: 0; font-size: .92rem; color: var(--cream-60); }
.richting-naar { margin-top: .15rem; color: var(--cream); }
.richting-van em, .richting-naar em { font-style: italic; color: inherit; }
.richting-naar em { color: var(--accent); }
.fasebalk { display: flex; gap: .35rem; margin-top: .8rem; }
.fase { flex: 1; font-family: var(--font-mono); font-size: .5rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-25); border-top: 2px solid rgba(255,255,255,.08); padding-top: .35rem; transition: color .6s var(--ease), border-color .6s var(--ease); }
.fase.aan { color: #4ade80; border-top-color: rgba(74,222,128,.6); }

/* patronen */
.pats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.pat { text-align: left; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 10px; padding: .75rem .85rem; cursor: pointer; transition: border-color .5s var(--ease), background .5s var(--ease), opacity .9s var(--zwaar), filter .9s var(--zwaar); }
.pat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--cream); }
.pat-status { display: inline-block; margin-top: .4rem; font-family: var(--font-mono); font-size: .52rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-40); border: 1px solid var(--line); border-radius: 3px; padding: .14rem .4rem; transition: color .5s var(--ease), border-color .5s var(--ease); }
.pat-status--hyp { color: var(--accent); border-color: rgba(158,113,80,.5); }
.pat-status--bev { color: #4ade80; border-color: rgba(74,222,128,.45); }
.pat-status--bew { color: #4ade80; border-color: rgba(74,222,128,.45); background: rgba(74,222,128,.07); }
.pat-obs, .pat-waar { display: block; margin-top: .35rem; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .06em; color: var(--cream-40); }
.pat-zeker { display: block; margin-top: .3rem; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .08em; color: rgba(74,222,128,.75); }
.pat-waar { color: var(--cream-25); }
.pat:hover { border-color: rgba(74,222,128,.35); }
.pat.aan { border-color: #4ade80; background: rgba(74,222,128,.06); }

/* kerninzichten */
.inzichten { list-style: none; margin: 0; padding: 0; }
.inzichten li { position: relative; padding: .3rem 0 .3rem 1rem; font-size: .85rem; line-height: 1.5; color: var(--cream-80); }
.inzichten li::before { content: ''; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: rgba(74,222,128,.6); }

/* keten: inzicht -> gedrag -> actie -> resultaat */
.keten { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.keten .stap { border-left: 2px solid rgba(255,255,255,.08); padding-left: .7rem; opacity: .3; transition: opacity .7s var(--zwaar), border-color .7s var(--zwaar); }
.keten .stap.aan { opacity: 1; border-left-color: rgba(74,222,128,.55); }
.keten .stap span { display: block; font-family: var(--font-mono); font-size: .54rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-40); }
.keten .stap.aan span { color: #4ade80; }
.keten .stap p { margin: .3rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--cream-80); }

/* volgende deep dive */
.vol-vraag { margin: 0; font-size: .9rem; line-height: 1.5; font-style: italic; color: var(--cream); }
.vol-focus { margin: .5rem 0 0; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

.os-slot { margin: 1.6rem auto 0; max-width: 620px; text-align: center; font-size: .95rem; color: var(--grey-on-paper); opacity: 0; transform: translateY(8px); transition: opacity 1s var(--zwaar), transform 1s var(--zwaar); }
.os-slot.lit { opacity: 1; transform: none; }
.os-slot strong { color: var(--ink-1); }

/* mobiel: een eigen, gestapelde cockpit */
@media (max-width: 900px) {
    .os { padding: 1.2rem 1rem 1.4rem; }
    .os-grid > .os-mod { grid-column: span 12 !important; }
    .pats { grid-template-columns: 1fr; }
    .keten { grid-template-columns: repeat(2, 1fr); gap: .9rem .7rem; }
    .os-tijd { flex-wrap: wrap; }
    /* 30-07 · dit zijn echte knoppen (de maanden van het traject), en ze
       stonden op 31 pixels hoog. Ze zitten in een diagram, maar je tikt ze
       wel aan, dus ze horen op de 44 van de rest. */
    .os-stap { flex: 1 1 40%; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
    .os-stap small { display: none; }
    .dos-stempel { display: none; }
    .dos-water { font-size: 6rem; }
}

/* ══════════ Fundering: van chaos naar helderheid ══════════
   Alles ligt er al; alleen de samenhang ontbreekt. Tijdens de animatie verandert
   de informatie niet — het begrip verandert. Staat wisselt via licht en focus. */
:root { --zwaar: cubic-bezier(.34,.08,.18,1); }

/* Chaos: de puzzelstukken zijn er, maar nog niet op hun plek.
   Een bijna onzichtbare micro-onrust (max ~1px), per tegel net iets anders. */
/* Tegels en labels blijven altijd dekkend, zodat de lijnen er nooit doorheen schijnen;
   alleen de inhoud (tekst, rand) wordt gedimd */
.fundering.chaos .fchip { opacity: 1; transform: none; border-color: rgba(255,255,255,.05); transition: border-color 1.2s var(--zwaar), box-shadow 1.2s var(--zwaar); }
.fundering.chaos .fchip b, .fundering.chaos .fchip small { opacity: .16; filter: blur(1.4px) saturate(.5); transition: opacity 1.2s var(--zwaar), filter 1.2s var(--zwaar); }
.fundering.chaos .fchip.lit b, .fundering.chaos .fchip.lit small { opacity: 1; filter: none; }
@keyframes zweefA { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(.7px, -1px); } 65% { transform: translate(-.8px, .6px); } }
@keyframes zweefB { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-.9px, .5px); } 70% { transform: translate(.6px, -.8px); } }
@keyframes zweefC { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(.5px, .9px); } 68% { transform: translate(-.7px, -.6px); } }
.fundering.chaos .fchip:not(.lit) { animation: zweefA 9s ease-in-out infinite; }
.fundering.chaos .fchip:nth-child(2):not(.lit) { animation: zweefB 11s ease-in-out infinite; }
.fundering.chaos .fchip:nth-child(3):not(.lit) { animation: zweefC 10s ease-in-out infinite; }
.fundering.chaos [data-rij="1"] .fchip:nth-child(1):not(.lit) { animation: zweefC 12s ease-in-out -4s infinite; }
.fundering.chaos [data-rij="1"] .fchip:nth-child(2):not(.lit) { animation: zweefA 10.5s ease-in-out -2s infinite; }
.fundering.chaos [data-rij="1"] .fchip:nth-child(3):not(.lit) { animation: zweefB 9.5s ease-in-out -6s infinite; }
.fundering.chaos .fundering__lbl { opacity: 1; transform: none; color: rgba(158,113,80,.28); border-color: rgba(255,255,255,.05); transition: color 1.1s var(--zwaar), background 1.1s var(--zwaar), border-color 1.1s var(--zwaar), box-shadow 1.1s var(--zwaar); }
.fundering.chaos .fundering__duiding { transition: opacity 1.3s var(--zwaar), transform 1.3s var(--zwaar); }

/* Gevonden: de onrust stopt volledig, het beeld wordt scherp — de tegel valt op zijn plek */
.fundering.chaos .fchip.lit { border-color: var(--accent-dim); animation: none; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
/* de chip licht op zodra de bol wordt geabsorbeerd */
.fundering.chaos .fchip.lit { animation: chipOplicht 1.2s var(--ease) 1s; }
@keyframes chipOplicht { 0%, 100% { border-color: var(--accent-dim); box-shadow: 0 6px 24px rgba(0,0,0,.25); filter: brightness(1); } 40% { border-color: rgba(74,222,128,.8); box-shadow: 0 0 15px rgba(74,222,128,.3), 0 6px 24px rgba(0,0,0,.28); filter: brightness(1.22); } }
.fundering.chaos .fundering__lbl.lit { color: var(--cream); background: rgba(158,113,80,.14); border-color: rgba(158,113,80,.7); }

/* Scroll-lock op Fundering en Groeiloop: normale maat, zachte inzoom, geen fullscreen.
   De sectie blijft staan tot de animatie zijn verhaal heeft verteld. */
#fundering, #groeiloop, #patroon { overflow: clip; }
@media (min-width: 901px) {
    .fund-scroll { height: 220vh; }
    .real-scroll { height: 170vh; }
    .akte-scroll { height: 150vh; }
    .akte-scroll--kort { height: 120vh; }
    .loop-scroll { height: 240vh; }
    /* stap 1: alleen het mechanisme; stap 2: de wereld wordt geboren */
    /* stap 1 toont het hele mechanisme met zijn tijd; alleen de leefgebieden zijn de geboorte */
    .loop-pin .gsat { opacity: 0; transition: opacity 1s var(--zwaar); pointer-events: none; }
    .loop-pin.wereld .gsat.geboren { opacity: .35; }
    .loop-pin.wereld .gsat.geboren.aan { opacity: 1; }
    .loop-pin .gsat--l1, .loop-pin .gsat--l2, .loop-pin .gsat--l3 { transform: translateX(18px); }
    .loop-pin .gsat--r1, .loop-pin .gsat--r2, .loop-pin .gsat--r3 { transform: translateX(-18px); }
    .loop-pin.wereld .gsat.geboren { transform: none; }
    .fund-pin > *, .loop-pin > *, .akte-pin > *, .real-pin > * { flex-shrink: 0; }
    /* auto-marges schakelen flex-stretch uit; absolute-only elementen vallen dan
       terug op breedte 0 - dus binnen de pins krijgt alles een expliciete breedte */
    .loop-pin .gloop { width: min(100%, 780px); }
    .akte-pin .gmaand { width: min(100%, 620px); }
    .akte-pin .gkaart { width: min(100%, 560px); }
    .akte-pin .loop__slot { width: min(100%, 620px); }
    .fund-pin .fundering { width: min(100%, 760px); }
    /* rustig ritme binnen de lock-momenten */
    .loop-pin .glegenda { width: min(100%, 780px); margin-top: -2.9rem; padding: 0 12%; }
    .loop-pin .gmaand { width: min(100%, 620px); margin-top: 2rem; }
    .akte-pin .gkaart { margin-top: 1.6rem; }
    .akte-pin .loop__slot { margin-top: 1.8rem; text-align: center; }
    .fund-pin, .loop-pin, .akte-pin, .real-pin { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; transform-origin: 50% 40%; will-change: transform; }
    .fund-pin .systeem__header, .loop-pin .systeem__header { margin-bottom: 1.4rem; }
    .fund-pin .fundering { margin-top: 1.4rem; }
    .loop-pin .gloop { margin-top: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fund-scroll, .os-scroll, .loop-scroll, .akte-scroll, .real-scroll { height: auto !important; }
    .fund-pin, .os-scroll .os, .loop-pin, .akte-pin, .real-pin { position: static !important; min-height: 0 !important; }
}

/* De ghost-achtergrondtekst ontstaat in dezelfde beweging mee met Richting */
#fundering .ghost { opacity: 0; transition: opacity 2.2s var(--zwaar) .3s; }
#fundering.klaar .ghost { opacity: 1; }
/* Maskeer-ring in de sectiekleur om de labels: lijnen raken de capsule nooit */
.fundering .fundering__lbl { box-shadow: 0 0 0 10px var(--ink-0); }
/* Samenkomst: het hoofdstuk krijgt even gewicht — alleen licht, geen beweging */
@keyframes vondst { 0% { box-shadow: 0 0 0 10px var(--ink-0), 0 0 0 rgba(158,113,80,0); } 35% { box-shadow: 0 0 0 10px var(--ink-0), 0 0 26px rgba(158,113,80,.30); } 100% { box-shadow: 0 0 0 10px var(--ink-0), 0 0 12px rgba(158,113,80,.12); } }
.fundering__lbl.vondst { animation: vondst 1.1s var(--zwaar) forwards; }

/* Vertrekpunt: het woord in de kop licht op, dan vertrekt het licht eruit */
#fund-vertrek { transition: text-shadow 1.1s var(--zwaar); }
#fund-vertrek.gloei { text-shadow: 0 0 16px rgba(158,113,80,.6), 0 0 34px rgba(74,222,128,.28); }

/* Zenuwstelsel: de as als stille ruggengraat, takken bestaan pas waar licht ze tekent */
.fundering__zenuw, .zenuw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.zas { stroke: var(--accent-dim); stroke-width: 1; opacity: .13; transition: opacity 1.8s var(--zwaar); }
.fundering.compleet .zas { opacity: .2; }
.ztak { fill: none; stroke: var(--accent-dim); stroke-width: 1.1; opacity: 0; transition: opacity 1.2s var(--zwaar); }
.ztak.lit { opacity: .5; }
/* De lichtgolf: heldere voorkant (zlicht), zachte warme kern die achter het licht aan
   stroomt (zgloed) en na aankomst rustig uitdooft — energie, geen lijn die verschijnt */
.zgloed { fill: none; stroke: #4ade80; stroke-width: 2.4; stroke-linecap: round; filter: blur(2.2px) drop-shadow(0 0 6px rgba(74,222,128,.45)); pointer-events: none; opacity: 0; transition: opacity .9s var(--zwaar); }
.zlicht { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(74,222,128,.75)) drop-shadow(0 0 3px rgba(158,113,80,.85)); transition: opacity .5s var(--ease); }

/* Voltooid: de samenhang blijft zichtbaar, rustig en warm */
.fundering.compleet .fchip.lit { border-color: rgba(74,222,128,.28); box-shadow: 0 0 0 1px rgba(74,222,128,.08), 0 0 20px rgba(74,222,128,.08), 0 6px 24px rgba(0,0,0,.25); }

/* Climax: licht verspreidt zich rustig achter het woord — geen ring, geen badge */
.fundering__richting::before { content: ''; position: absolute; left: 50%; top: 50%; width: 340px; height: 160px; transform: translate(-50%, -50%); background: radial-gradient(ellipse closest-side, rgba(158,113,80,.30) 0%, rgba(74,222,128,.10) 48%, transparent 78%); filter: blur(18px); opacity: 0; z-index: -1; pointer-events: none; transition: opacity 2.2s var(--zwaar) .9s; }
.fundering__richting.bloei::before { opacity: 1; }
.fundering__richting.bloei { color: #f7efe4; text-shadow: 0 0 8px rgba(247,239,228,.20), 0 0 26px rgba(158,113,80,.5), 0 0 60px rgba(74,222,128,.20); transition: opacity 1.5s var(--zwaar), transform 1.5s var(--zwaar), filter 1.5s var(--zwaar), color 1.5s var(--zwaar), text-shadow 1.8s var(--zwaar) .4s; }
/* De duiding hoort bij de titel: het woord richting licht mee op */
.fundering__duiding .d-woord { font-style: italic; transition: color 1.4s var(--zwaar) .35s; }
.fundering.compleet .d-woord { color: var(--accent); }

/* De lijn loopt verder: dit is nog maar het begin */
.fundering__doorloop { position: absolute; left: 50%; bottom: -5.5rem; transform: translateX(-.5px); width: 1px; height: 5rem; background: linear-gradient(180deg, var(--accent-dim), transparent); opacity: 0; transition: opacity 2.2s var(--ease); }
.fundering__doorloop.aan { opacity: 1; }
.fundering.compleet .fundering__doorloop { background: linear-gradient(180deg, rgba(74,222,128,.45), var(--accent-dim), transparent); }

@media (prefers-reduced-motion: reduce) {
    .fundering.chaos .fchip:not(.lit) { animation: none; }
}

/* ══ De nagolf: echte verandering blijft nooit bij jezelf, ze werkt door ══ */
.final .container { position: relative; z-index: 1; }
.final__golf { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fgolf { position: absolute; left: 50%; top: 58%; width: 140vmin; aspect-ratio: 1; border: 1px solid rgba(74,222,128,.06); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.35); animation: fgolf 17s linear infinite; }
.fgolf--2 { animation-delay: -5.7s; border-color: rgba(158,113,80,.055); }
.fgolf--3 { animation-delay: -11.4s; }
@keyframes fgolf { 0% { transform: translate(-50%, -50%) scale(.35); opacity: 0; } 16% { opacity: .5; } 68% { opacity: .16; } 100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0; } }
.fstip { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(74,222,128,.85); opacity: 0; animation: fstip 17s ease-in-out infinite; }
.fstip--1 { left: 21%; top: 26%; animation-delay: -1.5s; }
.fstip--2 { right: 17%; top: 34%; animation-delay: -6.8s; }
.fstip--3 { left: 28%; bottom: 22%; animation-delay: -9.4s; }
.fstip--4 { right: 24%; bottom: 30%; animation-delay: -13.1s; }
.fstip--5 { left: 12%; top: 55%; animation-delay: -15.2s; }
@keyframes fstip { 0%, 86%, 100% { opacity: 0; } 91% { opacity: .22; } 95% { opacity: .08; } }
@media (prefers-reduced-motion: reduce) { .fgolf, .fstip { animation: none; opacity: 0; } }

/* ══════════ Sectie 04: proef de Groeiscan (onderzoekskamer) ══════════ */
.scan04 { position: relative; background: #0a0f0b; padding: calc(var(--sp) * 1.1) 0; text-align: center; }
.scan04__lagen { overflow: hidden; }
.scan04::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 78vw); height: 150px; background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(74,222,128,.07), transparent 72%); pointer-events: none; z-index: 0; }
.scan04__gloed { position: absolute; left: 50%; top: 56%; width: min(640px, 82vw); height: 380px; transform: translate(-50%,-50%); background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(74,222,128,.13), transparent 62%); pointer-events: none; }
/* de achtergrond als analyseomgeving: subtiel raster en vage systeemlagen */
.scan04__lagen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.scan04 .container { position: relative; z-index: 1; }
/* systeem-frame: dunne hoekmarkeringen rond de kaart, alsof hij in een systeem zit */
.skframe { position: absolute; width: 20px; height: 20px; border: 1.5px solid rgba(74,222,128,.32); opacity: 0; transition: opacity .8s var(--ease); z-index: 2; }
.skaart-veld.wakker .skframe { opacity: 1; }
.skframe--tl { top: -9px; left: -9px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; transition-delay: .1s; }
.skframe--tr { top: -9px; right: -9px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; transition-delay: .18s; }
.skframe--bl { bottom: -9px; left: -9px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; transition-delay: .26s; }
.skframe--br { bottom: -9px; right: -9px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; transition-delay: .34s; }
@media (max-width: 560px) { .skframe { display: none; } }

.scan04__wrap { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.scan04 .kicker { justify-content: center; color: rgba(158,113,80,.9); margin-bottom: .7rem; }
.scan04__head { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.15; color: var(--cream); margin: 0 0 1.5rem; }
.scan04__head em { font-style: italic; color: #4ade80; }
.skaart { background: #0b100c; border: 1px solid rgba(74,222,128,.16); border-radius: 15px; overflow: hidden; text-align: left; box-shadow: 0 0 55px rgba(74,222,128,.08), 0 30px 80px rgba(0,0,0,.5); transition: transform 1.1s var(--zwaar), box-shadow 1.1s var(--ease), border-color 1.1s var(--ease), opacity .9s var(--ease); }
.skaart-veld:not(.wakker) .skaart { transform: translateY(44px) scale(.965); opacity: 0; box-shadow: 0 24px 60px rgba(0,0,0,.5); border-color: rgba(74,222,128,.06); }
@media (prefers-reduced-motion: reduce) { .skaart { transition: none; } .skaart-veld:not(.wakker) .skaart { transform: none; } }
.skaart__chrome { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.3rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.sdots { display: flex; gap: 7px; } .sdots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(242,241,239,.14); }
.surl { flex: 1; text-align: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--cream-40); }
.slive { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(208,138,88,.95); border: 1px solid rgba(208,113,80,.5); border-radius: 999px; padding: .25rem .7rem; }
.slive i { width: 6px; height: 6px; border-radius: 50%; background: #d08a58; }
.sprog { display: flex; align-items: center; gap: .8rem; padding: .6rem 1.3rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.strack { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.strack i { display: block; height: 100%; width: 3%; background: #4ade80; border-radius: 2px; transition: width .8s var(--zwaar); }
.stel { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-40); white-space: nowrap; }
.skaart__body { padding: 1.9rem 1.9rem; position: relative; min-height: 426px; }
.sscherm { position: absolute; inset: 1.9rem; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.sscherm.in { opacity: 1; transform: none; pointer-events: auto; }
.sscherm.uit { opacity: 0; transform: translateY(-12px); }
.svraag { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.32; color: var(--cream); margin: 0 0 1.3rem; }
.sopts { display: flex; flex-direction: column; gap: .45rem; }
.sopt { display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: transparent; color: var(--cream-60); font-family: var(--font-ui); font-size: .86rem; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.sopt i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(74,222,128,.4); flex: 0 0 auto; transition: all .2s; }
.sopt:hover { border-color: rgba(74,222,128,.5); color: var(--cream); background: rgba(74,222,128,.04); }
.sopt.gekozen { border-color: #4ade80; color: var(--cream); background: rgba(74,222,128,.08); }
.sopt.gekozen i { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); border-color: #4ade80; }
.sstatus { display: flex; flex-direction: column; height: 100%; justify-content: center; gap: .85rem; }
.sstatus__r { display: flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .78rem; color: var(--cream-40); opacity: 0; transition: opacity .4s var(--ease); }
.sstatus__r.in { opacity: 1; } .sstatus__r.klaar { color: #8fedb0; }
.sstatus__r .pt { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sstatus__r.in .pt { animation: sPtWerk 1.1s var(--ease) 2; }
@keyframes sPtWerk { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(143,237,176,.4); } 50% { opacity: .35; box-shadow: 0 0 7px 1px rgba(143,237,176,.55); } }
@media (prefers-reduced-motion: reduce) { .sstatus__r.in .pt { animation: none; } }
.sobs { display: flex; flex-direction: column; height: 100%; }
.sobs__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sobs__lbl { font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #4ade80; }
.sobs__ts { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-40); }
.sobs__t { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.46; color: var(--cream); margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.sobs__t .kern { color: #dfeee4; }
.sobs__sub { margin: .8rem 0 0; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; line-height: 1.45; color: var(--cream-40); opacity: 0; transition: opacity .7s var(--ease); }
.sobs__cta { margin-top: auto; padding-top: .85rem; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.sobs.s1 .sobs__head, .sobs.s1 .sobs__t { opacity: 1; transform: none; }
.sobs.s2 .sobs__sub { opacity: 1; }
.sobs.s3 .sobs__cta { opacity: 1; transform: none; }
.sobs__btn { display: inline-flex; flex-direction: column; gap: .05rem; background: rgba(74,222,128,.09); color: #b6f3cd; border: 1px solid rgba(74,222,128,.4); padding: .72rem 1.4rem; border-radius: 999px; text-decoration: none; transition: background .3s var(--ease), border-color .3s var(--ease); }
.sobs__btn:hover { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.6); }
.sobs__btn b { font-family: var(--font-ui); font-weight: 600; font-size: .88rem; color: #cdf6de; }
.sobs__btn small { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .04em; color: var(--cream-40); }
/* ── Sectie 04 · beleefbare mini-scan: de tien functies ── */
.skaart-veld { position: relative; max-width: 620px; margin: 0 auto; }
/* 2 · levend venster */
.skaart-veld.wakker .slive i { animation: sLivePuls 2.4s var(--ease) infinite; }
@keyframes sLivePuls { 0%,100% { box-shadow: 0 0 0 0 rgba(208,138,88,.5); opacity: 1; } 50% { box-shadow: 0 0 0 4px rgba(208,138,88,0); opacity: .5; } }
.skaart__chrome { position: relative; overflow: hidden; }
.skaart-veld.wakker .skaart__chrome::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 44px; background: linear-gradient(90deg, transparent, rgba(74,222,128,.07), transparent); animation: sChromeVeeg 7s linear infinite; }
@keyframes sChromeVeeg { 0% { transform: translateX(-60px); } 100% { transform: translateX(560px); } }
/* 3 + 7 · antwoord-bevestiging en hover */
.sopt { position: relative; }
.sopt:hover i { border-color: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.4); }
.sopts.kiest .sopt:not(.gekozen) { opacity: .38; }
.sopt.verwerkt { border-color: #4ade80; background: rgba(74,222,128,.1); }
.sopt.verwerkt i { background: #4ade80; border-color: #4ade80; animation: sVerwerkt .6s var(--ease); }
@keyframes sVerwerkt { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 100% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } }
/* 4 · de observatie schrijft zich */
.sobs__t .o-deel { display: inline; opacity: 0; filter: blur(4px); transition: opacity .55s var(--ease), filter .55s var(--ease); }
.sobs__t .o-deel.op { opacity: 1; filter: none; }
/* observatie in twee beats: eerst zien, dan duiden */
.sobs__t { display: flex; flex-direction: column; }
.sobs__t .o-beat { display: block; opacity: 0; filter: blur(4px); transform: translateY(6px); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease); }
.sobs__t .o-beat.op { opacity: 1; filter: none; transform: none; }
.sobs__t .o-beat + .o-beat { margin-top: .7rem; }
.sobs__t .o-lbl { display: block; font-family: var(--font-mono); font-weight: 600; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: #4ade80; margin-bottom: .25rem; }
.sobs__t .o-duiden .o-lbl { color: rgba(158,113,80,.95); }
.sobs__t .o-txt { color: var(--cream); }
.sobs__t .o-duiden .o-txt { color: #dfeee4; }
@media (prefers-reduced-motion: reduce) { .sobs__t .o-beat { transition: none; } }
/* 5 · zichtbaar bewijs uit je antwoorden */
.sbewijs { margin: .8rem 0 0; display: flex; flex-direction: column; gap: .42rem; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sobs.s2 .sbewijs { opacity: 1; transform: none; }
.sbewijs__r { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center; gap: .7rem; }
.sbewijs__l { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-40); }
.sbewijs__m { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.sbewijs__m i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(74,222,128,.45), #4ade80); transition: width 1s var(--zwaar); }
.sbewijs__v { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; color: #8fedb0; min-width: 1.9rem; text-align: right; }
/* 6 · de gloed reageert op het inzicht */
.scan04__gloed { transition: opacity .9s var(--ease), transform .9s var(--ease); opacity: .62; }
.scan04.inzicht .scan04__gloed { opacity: 1; transform: translate(-50%,-50%) scale(1.13); }
/* 8 · andere antwoorden proberen */
.sherstel { display: inline-block; margin-top: .6rem; background: none; border: 0; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; color: var(--cream-40); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .25s; padding: 0; }
.sherstel:hover { color: #8fedb0; }
/* 10 · naadloze overgang naar de scan */
.slaad { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(10,15,11,.93); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.slaad.aan { opacity: 1; pointer-events: auto; }
.slaad__sp { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(74,222,128,.25); border-top-color: #4ade80; animation: sSpin .8s linear infinite; }
.slaad__t { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: #8fedb0; }
@keyframes sSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sscherm, .sstatus__r, .sobs__head, .sobs__t, .sobs__sub, .sobs__cta, .strack i, .sobs__t .o-deel, .sbewijs, .sbewijs__m i, .scan04__gloed { transition: none; } .skaart-veld.wakker .slive i, .skaart-veld.wakker .skaart__chrome::after, .sopt.verwerkt i { animation: none; } }
@media (max-width: 560px) { .skaart__body { min-height: 476px; } .sscherm { inset: 1.5rem; } }
/* ── De gedeelde tijdbalk: de loop bepaalt de tijd ── */
.pp-tijdbalk { grid-column: 1 / -1; margin-top: .4rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.pp-tijdbalk__kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; font-family: var(--font-mono); font-size: .54rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.pp-tijdbalk__kop b { color: var(--cream-60); font-weight: 600; }
.pp-tijdbalk__kop span { color: rgba(74,222,128,.8); }
.pp-tijdbalk__rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.tb-maand { text-align: center; }
.tb-weken { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-bottom: .45rem; }
.tb-weken span { height: 8px; border-radius: 3px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.05); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.tb-weken span.aan { background: rgba(74,222,128,.5); border-color: rgba(74,222,128,.55); }
.tb-weken span.nu { background: #4ade80; box-shadow: 0 0 12px rgba(74,222,128,.7); }
.tb-lbl { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-40); transition: color .4s; }
.tb-maand.actief .tb-lbl { color: #4ade80; }
@media (max-width: 620px) { .pp-tijdbalk__rij { gap: .4rem; } .tb-lbl { font-size: .44rem; } }
/* ══════════ Overgangen tussen de secties ══════════
   De donkere secties verschilden maar 3 tot 8 in helderheid, maar omdat die
   grens kaarsrecht over de volle breedte liep zag je hem meteen als een streep.

   Elke sectie houdt zijn eigen toon in het midden en loopt aan boven- en
   onderkant over in de kleur van zijn buur. Vaste pixels in plaats van
   percentages: anders krijgt een lange sectie een verloop van honderden pixels
   en een korte sectie een harde rand, en dan is het beeld door de pagina heen
   alsnog ongelijk.

   --boven en --onder staan per sectie apart, zodat bij het verplaatsen van een
   sectie in een oogopslag zichtbaar is wat er moet meeveranderen. Niet ingevuld
   betekent: gelijk aan de eigen kleur, dus geen verloop aan die kant.

   Bewust hard gelaten: de sprong naar en van de papieren sectie (voor-wie).
   Die is bedoeld als breuk. */
.hero, .lek, .patroon, .systeem, .scan04, .bewijs, .coach, .hfd, .final {
  --overloop: 150px;
  --boven: var(--eigen);
  --onder: var(--eigen);
  background: linear-gradient(to bottom,
    var(--boven) 0,
    var(--eigen) var(--overloop),
    var(--eigen) calc(100% - var(--overloop)),
    var(--onder) 100%);
}
/* Beide kanten lopen naar de MENGKLEUR van de naad, niet naar de kleur van de
   buur. Liep elke sectie helemaal door naar de buurkleur, dan eindigt A in de
   kleur van B en begint B in de kleur van A: precies op de grens wisselen ze
   dan om en zie je alsnog een streep, maar dan omgekeerd. Nu raken beide
   kanten elkaar op exact dezelfde waarde en is het verloop 300px lang,
   150 boven en 150 onder de naad. */
.hero    { --eigen: var(--ink-1); --onder: var(--naad-12); }                       /* paginastart blijft vlak */
.lek     { --eigen: var(--ink-2); --boven: var(--naad-12); --onder: var(--naad-12); }
.patroon { --eigen: var(--ink-1); --boven: var(--naad-12); --onder: var(--naad-10); }
.systeem { --eigen: var(--ink-0); --boven: var(--naad-10); --onder: var(--naad-0s); }
/* 31-07 · Het licht steekt de naad over.
   De scan-sectie hieronder heeft een groene gloed (.scan04::before) die op
   VOLLE sterkte begint, precies op de sectiegrens, omdat het element daar
   begint. Boven de lijn niets, eronder meteen elf procent groen: dat leest
   als een rechthoek die is afgesneden. Isaak zag het meteen op zijn scherm.

   Naar boven laten doorlopen kan niet: `section` heeft overflow hidden, dus
   alles wat over de rand wil wordt afgeknipt. Het antwoord is dezelfde
   gedachte als het naadsysteem hierboven: geef de sectie erboven de andere
   helft van dezelfde gloed. Samen vormen ze een ellips die de naad kruist,
   en is er geen rand meer om te zien. Iets zwakker dan de onderhelft, zodat
   het licht van beneden lijkt te komen. */
.systeem::after {
    content: ''; position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: min(620px, 82vw); height: 150px;
    background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(74,222,128,.075), transparent 72%);
    pointer-events: none; z-index: 0;
}
.scan04  { --eigen: var(--ink-scan); --boven: var(--naad-0s); --onder: var(--naad-s1); }
.bewijs  { --eigen: var(--ink-1); --boven: var(--naad-s1); --onder: var(--naad-10); }
.hfd     { --eigen: var(--ink-0); --boven: var(--naad-10); --onder: var(--naad-20); }  /* een tint donkerder dan zijn buren */
.coach   { --eigen: var(--ink-2); --boven: var(--naad-20); --onder: var(--naad-20); }
.final   { --eigen: var(--ink-0); --boven: var(--naad-20); }                       /* pagina-einde blijft vlak */
/* korte secties op smalle schermen: anders overlappen de twee verlopen elkaar */
@media (max-width: 720px) {
  .hero, .lek, .patroon, .systeem, .scan04, .bewijs, .coach, .hfd, .final { --overloop: 90px; }
}

/* ══════════ Over Isaak: De manier waarop ik kijk ══════════
   Zes hoofdstukken, elk een eigen adem. Weinig middelen: een kicker als
   hoofdstukmerk, een statement in display-letter, stanza's in rustige
   leesmaat. Het enige beeld is het houtreliëf; de enige lijn is de
   vraag-cascade in 05, in dezelfde lichttaal als de fundering. */
.page-head--kijk { padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.kijk { position: relative; padding: clamp(5rem, 11vh, 8rem) 0; }
.kijk--i1 { background: var(--ink-1); }
.kijk--i0 { background: var(--ink-0); }
.kijk__kolom { max-width: 660px; }
/* Hoofdstukken met een foto: tekst links op leesbreedte, beeld rechts. Daarmee
   vult de rechterhelft zich en hangt de foto niet los in het midden. */
.kijk__kolom--beeld { max-width: 1060px; display: grid; gap: 2.6rem; }
.kijk__kolom--beeld .kijk__tekst { max-width: 660px; }
@media (min-width: 900px) { .kijk__kolom--beeld { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; align-items: start; } }
/* de kaartenrij mag breder dan de leeskolom, anders breken de koppen lelijk af */
.kijk__kolom--breed { max-width: 1060px; }
.kijk .kicker { margin-bottom: 2.2rem; }
/* op leesbreedte houden, ook in de brede kolommen: anders loopt het statement
   tot in de ghost en botsen ze */
.kijk__statement { max-width: 660px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.65rem, 3.4vw, 2.5rem); line-height: 1.18; letter-spacing: -.02em; color: var(--cream); margin: 0 0 2rem; text-wrap: balance; }
.kijk__statement em { font-style: italic; color: var(--accent); }
.kijk__stanza { margin: 0 0 2rem; }
.kijk__stanza:last-child { margin-bottom: 0; }
.kijk__stanza p { font-size: clamp(1.04rem, 1.5vw, 1.2rem); line-height: 1.75; color: var(--cream-60); max-width: 36rem; margin: 0 0 1.3rem; }
.kijk__stanza p:last-child { margin-bottom: 0; }
.kijk__stanza p.kijk__slot { color: var(--cream); font-weight: 600; }
/* Drie werelden als drie vlakken. Geen fotos: deze drie regels gaan over
   opgroeien, de zorg en eigen bedrijven, en daar bestaat geen eerlijk beeld
   van in de map. Een coachingfoto onder "later werkte ik in de zorg" zou
   decoratie zijn die iets anders suggereert dan er staat. */
.kijk__werelden { display: grid; gap: .9rem; margin: 0 0 2.4rem; }
@media (min-width: 820px) { .kijk__werelden { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.kijk__wereld { position: relative; border: 1px solid var(--line); border-left: 2px solid var(--accent-dim); border-radius: 0 var(--r-card) var(--r-card) 0; background: rgba(255,255,255,.015); padding: 1.5rem 1.4rem 1.4rem; transition: border-color .5s var(--ease), background .5s var(--ease); }
.kijk__wereld:hover { border-left-color: var(--accent); background: rgba(255,255,255,.03); }
.kijk__wereld-nr { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.kijk__wereld-kop { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.45; font-weight: 600; color: var(--cream); }
.kijk__wereld-tekst { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--cream-60); }
/* het lek-middel in hoofdstuk 02: drie regels die een voor een oplichten */
/* De omslag in hoofdstuk 01: een kracht die kantelt. Koperen rail als kanttekening,
   hetzelfde middel als de missie op de homepage. Bewust geen oplichtende regels,
   want dat is het middel van hoofdstuk 02 en dat staat er vlak onder. */
.kijk__omslag { position: relative; margin: 0 0 2rem; padding-left: 1.5rem; display: grid; gap: .75rem; }
.kijk__omslag::before { content: ''; position: absolute; left: 0; top: .3em; bottom: .3em; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); }
.kijk__omslag p { margin: 0; max-width: 34rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.45; letter-spacing: -.008em; color: var(--cream-60); }
.kijk__omslag b { font-weight: 600; color: var(--accent); }
.kijk__lijnen { margin: 0 0 2rem; display: grid; gap: 1rem; }
.kijk__lijn { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.4; letter-spacing: -.01em; color: var(--cream-40); transition: color 1s var(--ease), transform 1s var(--ease-expo); transform: translateX(-10px); }
.rv-group.in .kijk__lijn { color: var(--cream-80); transform: none; }
.rv-group.in .kijk__lijn--punch { color: var(--cream); }
/* de vraag-cascade: een lijn die meegroeit met het doorvragen */
.kijk__cascade { position: relative; padding-left: 1.8rem; margin: 0 0 2.4rem; display: grid; gap: .9rem; }
.kijk__cascade::before { content: ''; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 1px; background: linear-gradient(180deg, var(--accent) 0%, rgba(74,222,128,.5) 100%); transform: scaleY(0); transform-origin: top; transition: transform 1.7s var(--ease-expo) .25s; }
.kijk__cascade.in::before { transform: scaleY(1); }
.kijk__cascade p { margin: 0; font-size: clamp(1.04rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--cream-60); }
.kijk__cascade.in > p:nth-child(6) { transition-delay: .49s; }
@media (prefers-reduced-motion: reduce) { .kijk__cascade::before { transform: scaleY(1); transition: none; } }
/* hoofdstuk op papier: alle tinten omgeklapt */
.kijk--papier .kijk__statement { color: var(--ink-on-paper); }
.kijk--papier .kijk__statement em { color: var(--accent-deep); }
.kijk--papier .kijk__stanza p { color: rgba(23,40,27,.72); }
.kijk--papier .kijk__stanza p.kijk__slot { color: var(--ink-on-paper); }
.kijk__relief { margin: 2.6rem 0 1.1rem; }
.kijk__relief img { width: 100%; display: block; border-radius: var(--r-card); box-shadow: 0 30px 80px rgba(23,40,27,.25); }
.kijk__relief figcaption { margin-top: 1.1rem; font-family: var(--font-ui); font-style: italic; font-size: 1rem; letter-spacing: 0; line-height: 1.6; color: rgba(23,40,27,.62); }
.kijk__reliefvideo { color: var(--accent-deep); }
/* afsluiting: de vragen boven de knoppen */
.final .kijk__vragen { max-width: 580px; margin: 1.9rem auto 2.6rem; display: grid; gap: .95rem; }
.final .kijk__vragen p { margin: 0; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; color: var(--cream-60); }
.final .kijk__vragen .kijk__vragen-slot { color: var(--cream); font-weight: 600; margin-top: .6rem; }

/* ── Beeld in de hoofdstukken ──────────────────────────────────────
   Alle drie de fotos staan rechtop, dus op kolombreedte zouden ze bijna
   duizend pixels hoog worden. Daarom een ingevoegde foto van 320px die naar
   links of rechts uitlijnt: leest als een foto in een artikel, niet als een
   banner, en breekt de kolom zonder hem te overstemmen. */
.kijk__beeld { margin: 2.4rem 0; max-width: 320px; }
.kijk__beeld--rechts { margin-left: auto; }
.kijk__beeld--links { margin-right: auto; }
/* Hoogtegrens: de telefoonfoto is 627x1370 en zou anders 699px hoog worden en
   het hoofdstuk overheersen. De uitsnede houdt het gezicht en het whiteboard
   vast en laat de vloer los. */
.kijk__beeld img { display: block; width: 100%; max-height: 480px; object-fit: cover; object-position: center 18%; border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.kijk--papier .kijk__beeld img { box-shadow: 0 24px 60px rgba(23,40,27,.22); }
/* de slotzin krijgt lucht, geen versiering: dat is het enige wat hij nodig heeft */
.kijk__stanza p.kijk__slot { margin-top: 1.9rem; }
/* Beeldkader in de wereld-kaarten. Staat leeg klaar tot er een eerlijke foto
   is; zonder foto blijft het een rustig vlak in plaats van een gat. */
.kijk__wereld-beeld:empty { display: none; }
.kijk__wereld-beeld { aspect-ratio: 4 / 3; border-radius: calc(var(--r-card) - 4px); margin-bottom: 1.1rem; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); }
.kijk__wereld-beeld img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ── Hoe ik kijk: correcties na de schermopname ────────────────────
   1 · De ghost liep dwars door de tekst. Op de homepage staan de ghosts in
   lege ruimte; hier eindigt elk hoofdstuk met een breed statement dat de
   ghost raakt. Oplossing: de ghost kleiner en het hoofdstuk krijgt een band
   onderaan waar alleen de ghost woont. */
.kijk { padding-bottom: clamp(9rem, 17vh, 13rem); }
/* De ghost werd door de sectierand kaarsrecht doormidden gesneden: 30% van het
   woord viel weg achter een harde lijn en dat leest als een renderfout. Nu vaagt
   hij naar onderen uit met een masker, zodat hij oplost in plaats van afbreekt. */
.kijk { overflow: hidden; }
.kijk .ghost { font-size: clamp(4rem, 11vw, 9rem); bottom: -.16em; opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 68%, transparent 96%); }

/* ══════════ Telefoon: koppen die niet meeschaalden ══════════
   Op desktop hebben sectie 04 en 07 een eigen compositie waarin een kleinere
   kop klopt. Op een telefoon staat alles onder elkaar en zijn dit de enige
   twee hoofdstukken die niet als hoofdstuk lezen: 22 en 19 pixels tegen 27
   tot 30 bij de rest. Het oog verliest daardoor de structuur van de pagina. */
@media (max-width: 767px) {
    .scan04 h2 { font-size: clamp(1.7rem, 7.4vw, 2rem); line-height: 1.14; }
    .coach__story { font-size: clamp(1.45rem, 6.2vw, 1.7rem); line-height: 1.32; }
    /* een vraag die over twee regels valt heeft lucht nodig om leesbaar te blijven */
    .faq__q { line-height: 1.45; padding: 1.15rem 0; }
}

/* ══════════ Telefoon: reviews naast elkaar in plaats van onder elkaar ══════════
   Drie kaarten van zevenhonderd pixels onder elkaar maken van een rij een
   stapel: je scrolt twee schermen door wat op een pc in een oogopslag naast
   elkaar staat. Als swipe-rij blijft het een rij, en zie je aan de kaart die
   half in beeld hangt dat er meer is.

   De negatieve marge trekt de rij tot de schermrand door, zodat het voelt als
   iets dat doorloopt en niet als een blok dat toevallig te breed is. De padding
   zet de eerste kaart weer netjes op de tekstlijn. */
@media (max-width: 899px) {
    .tcards {
        display: flex;
        gap: .9rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(50% - 50vw);
        padding-inline: calc(50vw - 50%);
        padding-bottom: .4rem;
        scrollbar-width: none;
    }
    .tcards::-webkit-scrollbar { display: none; }
    .tcards > .tcard {
        /* 31-07 · 79 procent liet ruim 90 pixels van de buurkaart zien: dat
           leest als half afgekapte tekst naast de kaart die je leest. Op 90
           procent blijft een strook van zo'n 40 pixels over: genoeg om te
           zien dat er meer is, te smal om mee te lezen. Zelfde maat op alle
           veegrijen. */
        flex: 0 0 90%;
        scroll-snap-align: center;
        padding: 2.2rem 1.5rem 2rem;
    }
    /* de hover-lift hoort bij een muis; op een aanraakscherm blijft hij plakken */
    .tcard:hover { transform: none; }
}

/* ══════════ Telefoon: de drie pijlers naast elkaar ══════════
   Fundering, Groeiloop en het OS staan op een pc naast elkaar, zodat je in
   een oogopslag ziet dat het een systeem is. Onder elkaar is dat 1261 pixels
   en drie losse dingen. Als swipe-rij blijft het een systeem.

   De kaarten krijgen een gelijke hoogte via align-items: stretch, en de
   animaties erin blijven gewoon draaien; ze zitten in de kaart, niet in de rij. */
@media (max-width: 899px) {
    .pp-rij {
        display: flex;
        gap: .9rem;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(50% - 50vw);
        padding-inline: calc(50vw - 50%);
        padding-bottom: .4rem;
        scrollbar-width: none;
    }
    .pp-rij::-webkit-scrollbar { display: none; }
    .pp-rij > .card { flex: 0 0 94%; scroll-snap-align: center; } /* 31-07: doorkijk ~40px; deze rij heeft bredere zijstukken, vandaar de hogere fractie */
}

/* ══════════ Telefoon: swipen als vaste taal ══════════
   Op een pc staan de quotes, de pijlers en de reviews naast elkaar, zodat je
   in een oogopslag ziet dat ze bij elkaar horen. Onder elkaar wordt dat een
   stapel losse blokken. Overal waar iets een rij is, blijft het hier ook een
   rij; dan is swipen een taal in plaats van een uitzondering.

   De rijen lopen tot de schermrand door, want een rij die netjes binnen de
   marge blijft leest als een blok dat toevallig te breed is. */
@media (max-width: 899px) {
    .quotes {
        display: flex;
        gap: .9rem;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(50% - 50vw);
        padding-inline: calc(50vw - 50%);
        padding-bottom: .4rem;
        scrollbar-width: none;
    }
    .quotes::-webkit-scrollbar { display: none; }
    .quotes > .quote { flex: 0 0 90%; scroll-snap-align: center; } /* 31-07: doorkijk ~40px */
}

/* ══════════ Telefoon: raakvlakken ══════════
   Een duim is grover dan een muisaanwijzer; de norm is 44 pixels. Op 375px
   zaten twintig knoppen en links daaronder, met de cookieknoppen op 36 als
   ergste: dat is het eerste wat iemand moet raken op de site.

   Voor knoppen verhogen we de hoogte echt. Voor tekstlinks doen we dat niet,
   want dan gaan regels uit elkaar lopen; die krijgen een onzichtbaar vlak
   eromheen dat de duim wel raakt maar het oog niet ziet. */
@media (max-width: 899px) {
    .cookie-bar__btn { min-height: 44px; padding-inline: 1.4rem; }
    .hamburger { min-width: 44px; min-height: 44px; }

    .textlink, .coach__link, .yt-badge, .hero__google, .tcard__co, .cookie-bar__text a {
        position: relative;
    }
    .textlink::after, .coach__link::after, .yt-badge::after,
    .hero__google::after, .tcard__co::after, .cookie-bar__text a::after {
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
        /* alleen een raakvlak, geen zichtbaar element en geen invloed op de rij */
    }
}

/* ══════════ Telefoon: hoofdstuk 06 als swipe-rij ══════════
   De twee kolommen (past dit bij jou / zo werken we) vallen op een telefoon
   onder elkaar en worden dan een stapel van bijna drie schermen. Naast elkaar
   in een swipe-rij blijven het twee kanten van dezelfde vraag, precies zoals
   op een pc. Zelfde middel als de reviews en de drie pijlers, zodat swipen
   overal op de site hetzelfde betekent.

   De FAQ eronder blijft gewoon staan: die is naslag en hoort niet in de rij. */
@media (max-width: 899px) {
    .hfd__grid {
        display: flex;
        gap: .9rem;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(50% - 50vw);
        padding-inline: calc(50vw - 50%);
        padding-bottom: .4rem;
        scrollbar-width: none;
    }
    .hfd__grid::-webkit-scrollbar { display: none; }
    .hfd__kol { flex: 0 0 90%; scroll-snap-align: center; } /* 31-07: doorkijk ~40px */
}

/* ══════════ Telefoon: leesbaarheidsondergrens voor labels ══════════
   Gemeten op 390px: 32 klassen met tekst onder de 13 pixels, de kleinste op
   6,7. Die maten zijn ooit gekozen voor een pc, waar je verder van het scherm
   zit en een label als label leest. Op een telefoon houd je het ding op 30
   centimeter en wordt hetzelfde label een grijze streep.

   Hieronder krijgen alleen de labels buiten de mini-visualisaties een
   ondergrens. De mini's zelf zijn een aparte kwestie: daar staan tot 42
   labels in een vlak van 229 pixels, en die zijn niet groter te maken zonder
   ze te herzien. */
@media (max-width: 899px) {
    .kicker            { font-size: .76rem; }
    .pill              { font-size: .74rem; }
    .btn__sub          { font-size: .72rem; }
    .coach__naam       { font-size: .72rem; }
    .hfd__kop          { font-size: .72rem; }
    .hfd__faq-kop      { font-size: .72rem; }
    .hfd__label        { font-size: .68rem; }
    .tcard__co         { font-size: .68rem; }
    .glegenda__item    { font-size: .66rem; }
    .yt-badge          { font-size: .68rem; }
    .featured__play-tekst { font-size: .68rem; }
    .review__co        { font-size: .66rem; }
    .featured__name span { font-size: .68rem; }

    /* De kaartkoppen van de drie pijlers. 'Bekijk de Fundering' is een link en
       stond op 8,6 pixels; dat is geen label meer maar een vlekje. */
    .paneel__fase      { font-size: .68rem; }
    .paneel__link      { font-size: .7rem; }
    .pc-label          { font-size: .68rem; }
    /* de maandnamen onder de tijdbalk stonden op 7 pixels */
    .tb-lbl            { font-size: .7rem; }
    /* 30-07 · de routelabels op contact stonden op 10,2 */
    .card__label       { font-size: .72rem; }
    /* 30-07 · de bronregel onder de citaten in de artikelen, ook 10,2 */
    .quote__src        { font-size: .72rem; }
    /* 30-07 · de i / ii / iii boven de drie manieren van kijken stonden op 9,9 */
    .kijk__wereld-nr   { font-size: .72rem; }
    /* De onderwerptags van de blog stonden op 10,2. Die ophoging staat NIET
       hier maar in blog.html zelf: dat stijlblok komt na deze stylesheet en
       won dus altijd. Een kopie hier zou een regel zijn die niets doet. */

    /* Deze drie hebben een specifiekere selector, dus ze moeten los benoemd:
       anders wint de oorspronkelijke regel en verandert er niets. */
    .pp-kader__kop b, .pp-kader__kop span { font-size: .68rem; }
    .pp-tijdbalk__kop { font-size: .72rem; }
    .gloop-mini__legenda .glegenda__item { font-size: .66rem; }
    .gloop-ontsteek span { font-size: .66rem; }
}

/* Het intro-scherm zegt "tik" op een aanraakscherm en "klik" op een pc.
   Op hover-apparaten (muis) wint de klik-variant; op alles zonder fijne
   aanwijzer blijft tik staan. */
.intro__skip .i-klik { display: none; }
@media (hover: hover) and (pointer: fine) {
    .intro__skip .i-tik  { display: none; }
    .intro__skip .i-klik { display: inline; }
}
/* De adresbalk van de scanmockup: drie dingen naast elkaar (stippen, URL,
   Live-badge) passen op 360px niet meer. De badge werd door de overflang
   van zijn ouder half afgesneden. De URL is het minst belangrijk van de
   drie: die mag inkorten met een ellips, dan houden de stippen en de badge
   hun plek. */
@media (max-width: 420px) {
    .skaart__chrome { gap: .55rem; padding-left: .9rem; padding-right: .9rem; }
    /* 30-07 · het beletselteken viel precies op "/scan", en dat is nu net het
       stukje waar het schermpje over gaat. 208 pixels tekst in 196: de
       letterafstand terug van .06 naar .02em maakt het verschil, zonder de
       maat te verkleinen. */
    .surl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
    .slive { flex-shrink: 0; font-size: .5rem; padding: .22rem .5rem; letter-spacing: .1em; }
}

/* ══════════ V16 · ronde 1: de conversieronde ══════════
   Zes ingrepen met hoge impact en lage moeite, gemeten op 390 bij 844.
   Alles binnen de telefoonbreedte; de pc-versie blijft ongemoeid. */
@media (max-width: 899px) {

    /* 1 · De cookiebalk lag over je bewijsregel heen.
       Gemeten: de klantfoto's en de Google-score staan van 699 tot 727, de
       balk begon op 708. Dus juist bij de eerste bezoeker, de enige die die
       balk ziet, viel je vertrouwenssignaal eronder. De balk brak in twee
       regels omdat de tekst 200 pixels minimaal opeiste en er dan niets meer
       overbleef voor de knoppen. Nu smaller gezet, met knoppen die wel de
       tapmaat van 44 pixels halen. */
    .cookie-bar { padding: .65rem .9rem; gap: .5rem; }
    .cookie-bar__text { font-size: .7rem; line-height: 1.4; min-width: 0; flex: 1 1 100%; }
    .cookie-bar__actions { width: 100%; gap: .5rem; }
    .cookie-bar__btn { flex: 1; min-height: 44px; padding: .5rem .8rem; font-size: .74rem; }
    .ck-lang { display: none; }
    .ck-kort { display: inline; }

    /* 3 · De WhatsApp-knop en de vaste onderbalk stonden tegelijk in beeld:
       twee zwevende oproepen die om dezelfde klik vragen. De onderbalk stuurt
       naar de Groeiscan, en dat is de funnel waar je opvolging aan hangt.
       WhatsApp is een zijdeur die daar langs loopt. Op een pc, waar geen
       onderbalk staat, blijft hij gewoon bestaan. */
    .wa-fab { display: none; }

    /* 6 · De labels in de drie miniaturen van sectie 03.
       Gemeten: samen 41 tekstelementen onder de 11 pixels, de kleinste op 6,7.
       Ze kunnen niet groter, want de posities zijn absoluut en op elkaar
       afgestemd. Wat overblijft is de vorm en de beweging, en dat is ook wat
       deze miniaturen moeten vertellen: hier zit een systeem achter. Wie het
       detail wil, tikt door naar de methodepagina waar alles op ware grootte
       staat.

       Let op de afbakening: dit geldt alleen voor .gloop--mini. De vier woorden
       in het hart van de grote Groeiloop blijven staan, want die lichten mee
       op het ritme van de fase en dat is juist het subtiele deel. */
    /* 4 · De antwoordopties in de proeverij stonden op 42 pixels, twee onder
       de norm van 44. Dat is de enige interactie in die hele sectie: de plek
       waar iemand voor het eerst iets van de scan zelf voelt.

       46 en niet 44, omdat de hele mockup in .skaart op 0,965 staat geschaald.
       Vraag je 44, dan komt er 42 op het scherm. 46 levert 44,4 op. */
    .sopt { min-height: 46px; }

    /* 30-7 · TERUGGEDRAAID. Hier verdween eerst bijna alle tekst uit de drie
       miniaturen, om de leesbaarheid te redden. Dat loste het verkeerde
       probleem op: de animaties bewogen daarna nog wel, maar zeiden niets meer.
       Isaaks woord ervoor was "vager", en dat klopt precies. Zes anonieme
       blokjes die naar "Richting" stromen is geen uitleg, en een ring met een
       leeg hart al helemaal niet.

       Wat er nu staat: de dragende woorden komen terug en worden zo groot als
       de vaste posities toelaten. Alleen de twee elementen die echt hele zinnen
       zijn blijven weg, want die waren op deze breedte nooit te lezen en ze
       maken het beeld druk. */
    /* ── 30-07 · de miniaturen krijgen lucht ──
       Nagemeten: op de pc is de miniatuur 311 pixels breed, op een telefoon
       194. Dezelfde opstelling in 62 procent van de ruimte, maar met dezelfde
       hoogte van 200. Daardoor stonden de zes brokken van de Fundering tegen
       de randen en zat er tussen de tweede en de derde rij nog maar 10 pixels.
       Dat is wat je zag: niet kapot, wel benauwd.

       De hoogte kan omhoog omdat de kaarten in een veegrij staan; die mogen
       langer worden.

       Let op: dit staat op .mini--f en niet op .mini. Regel 1091 zet
       `.mini--o { height: auto }`, en een latere .mini-regel wint daarvan bij
       gelijke specificiteit. Toen dit hier nog `.mini` was, kreeg het OS een
       vaste hoogte van 244 terwijl zijn inhoud 338 is: het hele hefboom-blok
       ("Grootste hefboom", "Overzicht creeren") viel weg achter overflow
       hidden. Nagemeten, en daarom teruggezet naar alleen de Fundering.
       De drie miniaturen mogen verschillend hoog zijn; op de pc zijn ze dat
       ook (173, 200 en 316) en de kaarten trekken elkaar toch gelijk. */
    /* 31-07 · De doos van 244 was een vergissing: de fmist-scene binnenin
       heeft een eigen hoogte van ongeveer 190, dus de extra centimeters
       werden witruimte onder de scene. Isaak zag het meteen: "daar zit
       gewoon nog witruimte boven, dat is niet mooi afgewerkt." De doos
       volgt nu de scene: 204, scene plus ademruimte. */
    .mini--f { height: 204px; }
    /* De 9,6 van de vorige ronde was te goed bedoeld: PERSOONLIJKHEID werd
       daarmee 105 pixels breed terwijl het midden van de scene op 97 ligt.
       De ruggengraat van het zenuwstelsel loopt verticaal door dat midden,
       dus door de tegel heen: "het zenuwstelsel loopt door de tegels."
       Op 8,6 met iets strakkere vulling blijft de breedste tegel op 92 en
       loopt de lijn er weer langs, zoals getekend. */
    .mini--f .fmist__brok { font-size: 8.6px; padding: .22rem .3rem; letter-spacing: .02em; }

    /* 31-07 · De kern van de Groeiloop-mini was 78 pixels op een ring van 95
       hoog: verhouding 0,82 waar de grote ring op de pc 0,28 heeft. Vandaar
       "de kern staat best wel groot". Terug naar een kern die in de ring
       past, met de fasewoorden een fractie kleiner, zoals Isaak zelf
       voorstelde: "liever dat die tekst wat kleiner was geworden." De radar
       steekt ook niet langer boven de doos uit. */
    .gloop--mini .gkern { width: clamp(54px, 30%, 78px); gap: .12rem; }
    .gloop--mini .gbegrip { font-size: 7.6px; }
    .gloop--mini .gloop__radar { inset: 0 -2%; }
    .gloop--mini .gnode b { font-size: .6rem; }

    /* 31-07 · de overdracht op het veegmoment (zie de podiumcode in rdz.js):
       de kern licht een keer op als je van de Fundering aankomt. */
    .gkern.overdracht { animation: kernOverdracht 1.4s var(--ease); }

    /* ── De kern van de grote ring stond veel te groot ──
       De maat is `clamp(150px, 30%, 210px)`. Op de pc wint die 30 procent
       en wordt hij afgetopt op 210: dat is 27 procent van een ring van 753.
       Op een telefoon wint de ONDERgrens van 150, en dat is op een ring van
       300 precies de helft. Nagemeten: 50 procent tegen 27 op de pc.

       Daardoor raakten alle vier de knopen de kern; Isaak zag daar de zes
       pixels bij Uitvoering van. Nu dezelfde verhouding als de pc, en de
       kernwoorden (Feedback is de breedste met 57 pixels) houden ruimte. */
    .loop-pin .gkern { width: clamp(84px, 30%, 120px); }

    .mini--o .os__naam    { font-size: 9.4px; }
    .mini--o .os__bar b   { font-size: 8.8px; }
    .mini--o .os__bar span { font-size: 8px; }
    .mini--o .os__hef .l  { font-size: 8.2px; }
    /* het OS-paneel was met 338 de langste van de drie en bepaalde daarmee
       de kaarthoogte, en dus de witruimte bij de andere twee. Een slag
       compacter: zelfde inhoud, minder lucht per rij. */
    .mini--o .os { padding: .45rem .65rem .5rem; }
    .mini--o .os__rij { padding: .16rem 0; }
    .mini--o .os__hef { margin-top: .35rem; padding-top: .35rem; }
    /* Deze drie blijven weg: toestandsregels die op een groot scherm naast
       de inhoud passen en hier eroverheen komen te liggen. */
    .mini--o .os__vormt,
    .mini--o .os__tip,
    .mini--o .os__dossier { display: none; }
    /* 31-07 · De intake stond hier eerst ook tussen, op basis van een
       overlapmeting. Dat was een misvatting: "intake · eerste gesprek"
       verschijnt juist BEWUST over het midden, in de openingsseconden als de
       tegels nog wazig zijn. Zonder hem begon de scene op een telefoon met
       tweeenhalve seconde niks, en miste de snelle kijker het startpunt:
       precies de twee dingen die Isaak aanwees. Hij is terug. */
    /* Wat in het Operating System overblijft zijn de sparklines en de cijfers.
       Dat is precies de boodschap van die miniatuur: er wordt iets bijgehouden
       en het beweegt. De woorden erbij stonden op 7 tot 9 pixels en die las
       niemand; ze maakten het beeld alleen druk. */
}

/* De stap na het bewijs. Rustig gehouden: een haarlijn erboven zodat hij bij
   de reviews hoort in plaats van als banner tussen twee secties te vallen. */
.bewijs__stap { margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.bewijs__stap-zin { font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--cream); margin: 0; max-width: 30ch; line-height: 1.35; }
.bewijs__stap-zin em { font-style: italic; color: var(--accent); }
@media (max-width: 899px) {
    .bewijs__stap { margin-top: 2.4rem; padding-top: 1.9rem; gap: 1rem; }
    .bewijs__stap .btn { width: 100%; }
}

/* de kernpuls van de overdracht: een keer warm oplichten, dan terug naar
   rust. Buiten de media query, want keyframes horen op topniveau; de klasse
   die hem start wordt alleen op een telefoon gezet. */
@keyframes kernOverdracht {
    0%   { box-shadow: 0 0 110px 12px rgba(30,160,85,.16), 0 0 42px rgba(30,160,85,.14); }
    30%  { box-shadow: 0 0 130px 26px rgba(74,222,128,.5), 0 0 60px rgba(74,222,128,.45); }
    100% { box-shadow: 0 0 110px 12px rgba(30,160,85,.16), 0 0 42px rgba(30,160,85,.14); }
}

/* 31-07 · De kern erkent elk gebied dat oplaadt: een korte, zachte pols.
   Bewust veel subtieler dan de overdracht hierboven, want hij komt zes keer
   per ronde langs. Zonder dit zijn de satellieten zes losse gebeurtenissen
   aan de rand; hiermee reageert het midden erop en is het een systeem.
   Werkt op elke breedte: op de pc voegt het net zo goed samenhang toe. */
.gkern.erkent { animation: kernErkent .85s var(--ease); }
@keyframes kernErkent {
    0%   { box-shadow: 0 0 110px 12px rgba(30,160,85,.16), 0 0 42px rgba(30,160,85,.14); }
    35%  { box-shadow: 0 0 118px 16px rgba(74,222,128,.3), 0 0 48px rgba(74,222,128,.24); }
    100% { box-shadow: 0 0 110px 12px rgba(30,160,85,.16), 0 0 42px rgba(30,160,85,.14); }
}
@media (prefers-reduced-motion: reduce) { .gkern.erkent { animation: none; } }

/* ══════════ V16 · ronde 2: de leesronde ══════════
   Geen nieuwe onderdelen, alleen rust en raakbaarheid. Gemeten op 390 bij 844. */
@media (max-width: 899px) {

    /* De randgevallen. In een eerdere ronde zijn deze labels van 8 tot 10
       pixels opgehoogd naar .66 tot .70rem, en dat was toen winst. Nagemeten
       blijven ze met 10,6 tot 11,2 pixels alleen nog steeds de krapste tekst
       op de pagina, terwijl het geen decoratie is maar leesbare inhoud:
       kaartlabels, bedrijfsnamen, de link naar de Fundering. Nu allemaal op
       .72rem, gelijk aan de andere labels, zodat er geen tweede kleine maat
       meer naast staat. */
    .hfd__label,
    .tcard__co,
    .glegenda__item,
    .yt-badge,
    .featured__play-tekst,
    .review__co,
    .featured__name span,
    .paneel__fase,
    .paneel__link,
    .pc-label,
    .gloop-mini__legenda .glegenda__item,
    .gloop-ontsteek span { font-size: .72rem; }
    .pp-kader__kop b, .pp-kader__kop span { font-size: .7rem; }

    /* De grain-laag is een vaste laag over het volledige scherm voor een
       effect van 4 procent. Op een telefoon is dat niet te zien en betaalt de
       browser er wel elke scrollstap voor. */
    .grain { display: none; }

    /* Tapdoelen die nog onder de 44 pixels zaten. Ze worden niet groter in
       beeld; er komt een onzichtbaar raakvlak omheen dat wel 44 pixels haalt.
       Dat verandert de opmaak niet, want het staat absoluut gepositioneerd. */
    .coach__link, .textlink, .yt-badge, .tcard__co { position: relative; }
    .coach__link::after, .textlink::after, .yt-badge::after, .tcard__co::after {
        content: ''; position: absolute; left: 0; right: 0; top: 50%;
        transform: translateY(-50%); height: 44px;
    }
    /* De Google-knop in de hero was 30 bij 30 en is het bewijs waar je het
       meest aan hebt. */
    .hero__google { min-width: 44px; min-height: 44px; }
}

/* De voettekst en de Google-link, apart gehouden omdat hier eerst ruimte
   moest komen. De iconenrij en de linkrij lagen 36 pixels uit elkaar; een
   raakvlak van 44 om allebei zou elkaar dan overlappen en de verkeerde link
   opvangen. Dus eerst uit elkaar, dan pas vergroten. */
@media (max-width: 899px) {
    .footer__social { gap: .9rem; margin-bottom: 1rem; }
    .footer__social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .footer__links { row-gap: .35rem; }
    /* De 3 pixels speling links en rechts brengen de kortste links (Contact,
       Privacy, Cookies) met hun 36 tot 39 pixels over de 44 heen. Ze staan
       22 pixels uit elkaar, dus de raakvlakken komen elkaar niet tegen. */
    /* 31-07 · footer als element, niet als class: <footer> draagt geen class,
       dus .footer matchte nooit en de maillink bleef 17 pixels hoog. Dit was
       een fix zonder nameting; nu wel nagemeten. */
    /* 30-07 · .nb-note is de kleine regel onder het aanmeldveld op de
       blogpagina ("Zie het privacybeleid"). Die link was 18 pixels hoog.

       Daarbij de links op de juridische pagina's: mailadressen en de
       verwijzingen onderaan stonden daar op 22 pixels. Die staan ver uit
       elkaar in losse alinea's, dus de raakvlakken raken elkaar niet. */
    .footer__links a, .bewijs__google a, footer a[href^="mailto:"], .nb-note a,
    .scene--paper p > a { position: relative; display: inline-block; }
    .footer__links a::after, .bewijs__google a::after, footer a[href^="mailto:"]::after, .nb-note a::after,
    .scene--paper p > a::after {
        content: ''; position: absolute; left: -6px; right: -6px; top: 50%;
        transform: translateY(-50%); height: 44px;
    }
}

/* ══════════ V16 · sectie 07, de coach, op telefoon ══════════
   Stond onder elkaar: portret en daaronder het hele verhaal. Isaak wil ze
   naast elkaar, net als op de pc.

   Twee dingen maken dat het werkt in plaats van scheef staat. De foto rekt mee
   met de hoogte van de tekst (stretch plus object-fit: cover) in plaats van
   als korte staande foto naast een lange kolom te hangen. En de tekst schaalt
   mee naar de smallere kolom, want een citaat van 24 pixels in 210 pixels
   breedte wordt drie woorden per regel. */
@media (max-width: 899px) {
    /* Vaste breedte voor de fotokolom en geen fr: met .72fr won de minimale
       tekstbreedte het en bleef er 98 pixels foto over, en daar is niemand op
       te herkennen. minmax(0,1fr) houdt de tekstkolom eerlijk. */
    .coach__grid { grid-template-columns: 134px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
    .coach__imgwrap { height: 100%; display: block; }
    .coach__img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
    .coach__story { font-size: 1.12rem; line-height: 1.32; }
    .coach__sub { font-size: .88rem; line-height: 1.6; }
    .coach__missie { font-size: .95rem; line-height: 1.45; }
}

/* ══════════ V16 · D: de methodepagina op telefoon ══════════
   Twee ingrepen, allebei alleen onder 900 pixels. */
@media (max-width: 899px) {

    /* ══ B · De zes gebieden staan weer om de ring ═══════════════════════
       30-07. Hiervoor stonden ze als plat lijstje van zes onder de ellips,
       op 35 procent dekking. Daarmee was de ring een mechanisme zonder
       wereld: hij draaide, maar er lag niets omheen om voor te draaien.

       Waarom niet gewoon de pc-opstelling verkleind, zoals bij de Fundering?
       Nagerekend: op de pc staan de namen naast de ring, en alleen het woord
       GEZONDHEID vraagt met icoon en score al 134 pixels per kant. Twee van
       die kolommen plus een leesbare ring past niet in 390. Alles evenredig
       kleiner maken zou de labels op ruim 4 pixels zetten.

       Dus: om de ring staat wat je in een oogopslag leest (icoon en cijfer),
       en de naam staat eronder in een regel die meeloopt met het gebied dat
       oplicht. Zes dingen tegelijk lezen doet niemand op een telefoon; een
       voor een wel.

       De plekken zijn uitgerekend op de doos van 300 bij 263, met de vier
       knopen op 12, 3, 6 en 9 uur en de kern van 150 in het midden. Binnen
       de doos zijn alleen de vier schuine hoeken vrij; de twee overige staan
       net erboven en eronder, met acht pixels lucht tot de knoop. Daarom
       staat de overloop van de svg's hier open: de golf moet die twee nog
       kunnen bereiken. */
    .loop-pin .gloop { width: min(100%, 300px); margin-bottom: 96px; }
    /* transform blijft uit. rdz.js rekent de transform van een satelliet
       weg om zijn rustpunt te vinden (dat is er voor de invlieg-animatie op
       de pc); een blijvende centreer-transform zou de golf dus stelselmatig
       naast het gebied laten landen. Vandaar plaatsing op de hoek. */
    .loop-pin .gsat { display: grid; width: auto; transform: none !important; }
    .gsat small { display: none; }
    /* de naam is een kale tekstknoop in de <b>, naast de score-<i>. Op nul
       zetten haalt hem weg zonder de HTML aan te raken; de score zet zijn
       eigen maat terug. */
    .gsat b { font-size: 0; letter-spacing: 0; }
    .gsat .gsat__score { font-size: .6rem; margin: 0; }
    .gsat, .gsat--l1, .gsat--l2, .gsat--l3, .gsat--r1, .gsat--r2, .gsat--r3 { grid-template-columns: 18px auto; gap: 0 .3rem; }
    .gsat--l1 .gsat__ico, .gsat--l2 .gsat__ico, .gsat--l3 .gsat__ico,
    .gsat--r1 .gsat__ico, .gsat--r2 .gsat__ico, .gsat--r3 .gsat__ico { grid-column: 1; }
    .gsat--l1 b, .gsat--l2 b, .gsat--l3 b,
    .gsat--r1 b, .gsat--r2 b, .gsat--r3 b { grid-column: 2; grid-row: 1; text-align: left; }
    .gsat__ico { width: 16px; height: 16px; }

    /* 31-07 · Symmetrisch om de as. De vorige opstelling liep met de klok
       mee (een chip boven-rechts, een onder-links), en dat las op een
       telefoon als scheef: "de rechterkant staat wat meer naar boven, de
       linkerkant wat meer naar onder." Nu spiegelen links en rechts elkaar
       exact: een paar boven, een paar halverwege, een paar onder.

       De plekken mijden de vier knopen (op 12, 3, 6 en 9 uur) en de kern:
       de middelste chips staan op 62 procent, net onder de zijknopen die
       tot 58 procent lopen, en de buitenste paren flankeren de boven- en
       onderknoop die van 34 tot 66 procent breed loopt. */
    .gsat--l1 { left: 8%;  right: auto; top: -6%; }
    .gsat--r1 { left: 78%; right: auto; top: -6%; }
    .gsat--l2 { left: -2%; right: auto; top: 62%; }
    .gsat--r2 { left: 88%; right: auto; top: 62%; }
    .gsat--l3 { left: 8%;  right: auto; top: 96%; }
    .gsat--r3 { left: 78%; right: auto; top: 96%; }

    /* De golf moet de twee buiten de doos kunnen halen. Daar stond hier een
       eigen `overflow: visible` voor, tot nameting liet zien dat regel 1263
       dat al voor elke breedte doet. Weggehaald: een regel die niets doet is
       een regel die je later verkeerd uitlegt. */

    /* 31-07 · Hier stond de opmaak van de meelopende naamregel onder de ring
       (.gnaam). Die is weggehaald omdat hij bij elk gebied wisselde en de
       aandacht van de ring aftrok; zie de toelichting in rdz.js. */

    /* ── De lucht tussen de secties ─────────────────────────────────────
       Isaak: "tussen 4 en 5 is de ruimte wat groot" en "tussen 5 en 6 ook
       nog te veel ruimte ofso", plus de bredere waarneming "opzich is het
       ook wel erg donker."

       Nagemeten op 390 bij 844: tussen elke twee secties zit 130 tot 160
       pixels lege ruimte. Dat is telkens bijna een vijfde scherm zwart
       zonder inhoud, acht keer achter elkaar. Op een pc is die lucht rust;
       op een telefoon, waar je door een koker kijkt, wordt het leegte.

       De maat komt uit --sp, die op smal scherm zijn ondergrens van 5rem
       pakt (10vw is daar maar 39 pixels). Hier zetten we die ondergrens
       zelf: 3,5rem, dus 112 pixels tussen twee secties in plaats van 160.
       Dat scheelt over de hele pagina ruim 380 pixels donker, zonder dat de
       secties tegen elkaar aan komen te staan.

       .final en .scan04 rekenen met een factor op --sp en schalen dus mee. */
    :root { --sp: 3.5rem; }

    /* ── Het Operating System op een scherm ──
       Was 1929 pixels. Het kompas blijft open, de zes andere modules klappen
       dicht tot hun kopregel (gedrag in rdz.js). De kop wordt daarmee een
       knop: raakvlak omhoog, plus een teken dat zegt dat er meer is. */
    .os-mod__kop { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .64rem; min-height: 30px; margin-bottom: .55rem; }
    .os-grid .os-mod .os-mod__kop::after { content: '\2212'; font-family: var(--font-mono); font-size: .8rem; color: var(--cream-40); }
    .os-grid .os-mod--dicht .os-mod__kop::after { content: '+'; }
    .os-grid .os-mod:first-child .os-mod__kop::after { content: none; } /* kompas klapt niet */
    .os-mod--dicht > :not(.os-mod__kop) { display: none; }
    .os-mod--dicht .os-mod__kop { margin-bottom: 0; }
    .os-mod { padding: .75rem .9rem; }
    .dos-meta { font-size: .62rem; gap: .3rem .9rem; }
    .os-tijd { margin-top: .8rem; padding: .7rem 0; }

    /* ── 31-07 · het dashboard in één oogopslag ──
       Met alles dichtgeklapt was het OS nog steeds 1001 pixels: 1,2 scherm.
       Isaak: "het zijn gewoon twee volledige pagina's, waardoor je nooit het
       overzicht hebt dat dat operating system wel moet bieden. Dan maar iets
       minder goed leesbaar." Drie ingrepen, samen ruim 400 pixels:

       1 · De vier maandknoppen stonden gewikkeld in twee rijen van twee
           (120px). Op een rij van vier (52px) lees je ze nog prima; de
           minimale raakhoogte van 44 blijft staan.
       2 · De zes dichte modules stonden als toren van zes kopregels onder
           elkaar (420px). Twee kolommen van drie (198px): dit zijn koppen
           van een tot drie woorden, die passen naast elkaar, en een
           dashboard met panelen naast elkaar leest ook meer als dashboard
           dan een lijst.
       3 · De kompasregels en de koppen een fractie strakker. */
    .os-stap { flex: 1 1 0; min-height: 44px; padding: .35rem .4rem; }
    /* de maat blijft .6rem (die was al zo); alleen de letterafstand gaat van
       .18em naar .1em, en dat is precies wat SEPTEMBER op een rij van vier
       laat passen: nagerekend 61 in 69 beschikbare pixels. */
    .os-stap b { letter-spacing: .1em; }
    .os-tijd { flex-wrap: nowrap; gap: .35rem; }
    .os-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .os-grid > .os-mod { grid-column: span 2 !important; }
    .os-grid > .os-mod--dicht { grid-column: span 1 !important; }
    .os-mod--dicht .os-mod__kop { font-size: .56rem; letter-spacing: .1em; min-height: 40px; }
    .kompas li { min-height: 28px; font-size: .68rem; }
    .dos-kop { padding-top: .1rem; }
    /* De metaregel besloeg twee regels (62px) door drie cellen. De datum van
       de laatste wijziging is het minst dragende van de drie en gaat op een
       telefoon uit; coach en observatie blijven, op een regel. */
    .dos-meta > :nth-child(2) { display: none; }

    /* De maandgolf wijst soms een dichte module aan; dan licht de kopregel op
       in plaats van de inhoud, zodat het dashboard blijft leven zonder open
       te springen. */
    .os-mod--dicht.mod-focus { border-color: rgba(74,222,128,.45); }
    .os-mod--dicht.mod-focus .os-mod__kop { color: var(--cream); }
}

/* ══════════ V16 · videoreviews als swipe-rij ══════════
   Twee reviews, één per kaart. De hele kaart wisselt (beeld, quotes, naam),
   dus er wordt niets los "bijgewerkt".

   Het spoor is een gewone scroll-container met snap: dat geeft op een telefoon
   vanzelf het vegen dat Isaak vroeg, en het werkt zonder JavaScript. De pijlen
   en stippen zijn een laag erbovenop die alleen de scrollpositie verzet. */
/* ══════════ 30-07 · de KvK- en BTW-regel in de voet ══════════
   Deze regel stond op elke pagina als inline stijl (.76rem op 60 procent).
   Op een telefoon was hij daarmee nauwelijks te lezen. Ophogen in de bron
   zou ook de pc raken, en daar mag niets aan veranderen, dus staat de maat
   nu hier: de pc houdt exact wat hij had, mobiel krijgt wat lucht. */
.kvk-regel { font-size: .76rem; opacity: .6; }
@media (max-width: 899px) { .kvk-regel { font-size: .78rem; opacity: .8; } }

.vrij { position: relative; margin-bottom: 1rem; }
.vrij__spoor {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    border-radius: var(--r-card);
}
.vrij__spoor::-webkit-scrollbar { display: none; }
.vrij__spoor:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* elke review vult het spoor volledig; de kaart houdt zijn eigen opmaak */
.vrij__spoor > .featured { flex: 0 0 100%; scroll-snap-align: start; margin-bottom: 0; }

.vrij__nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.1rem; }
.vrij__pijl {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--line); background: transparent;
    color: var(--cream-60); cursor: pointer;
    transition: color var(--t), border-color var(--t), background var(--t);
}
.vrij__pijl svg { width: 18px; height: 18px; }
.vrij__pijl:hover, .vrij__pijl:focus-visible { color: var(--cream); border-color: var(--accent-dim); background: rgba(158,113,80,.08); }
.vrij__pijl[disabled] { opacity: .25; cursor: default; }
.vrij__pijl[disabled]:hover { color: var(--cream-60); border-color: var(--line); background: transparent; }

.vrij__stippen { display: flex; align-items: center; gap: .55rem; }
/* het zichtbare stipje is klein, het raakvlak eromheen haalt de 44 pixels */
.vrij__stip {
    position: relative; width: 8px; height: 8px; padding: 0;
    border-radius: 50%; border: 0; background: var(--cream-25); cursor: pointer;
    transition: background var(--t), transform var(--t);
}
.vrij__stip::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); }
.vrij__stip[aria-selected="true"] { background: var(--accent); transform: scale(1.25); }

/* ══ 31-07 · dezelfde stippen voor andere veegrijen ══════════════════════
   De tekstreviews hadden ze niet, waardoor je niet zag hoeveel er nog
   kwamen. rdz.js maakt ze aan waar ze nodig zijn; deze opmaak is bewust
   losgeknipt van .vrij__stip, zodat de videorij zijn eigen leven houdt.
   Alleen op een telefoon: op een pc staan de kaarten naast elkaar. */
.veegstippen { display: none; }
@media (max-width: 899px) {
    .veegstippen { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 1.2rem; }
    .veegstip {
        position: relative; width: 8px; height: 8px; padding: 0;
        border-radius: 50%; border: 0; background: var(--cream-25); cursor: pointer;
        transition: background var(--t), transform var(--t);
        -webkit-tap-highlight-color: transparent;
    }
    /* het zichtbare stipje is klein, het raakvlak eromheen haalt de 44 */
    .veegstip::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); }
    .veegstip[aria-selected="true"] { background: var(--accent); transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .veegstip { transition: none; } }

/* Op een telefoon veeg je; dan zijn pijlen overbodig en zouden ze alleen
   ruimte en aandacht kosten. De stippen blijven: die vertellen dat er meer is. */
@media (max-width: 899px) {
    .vrij__pijl { display: none; }
    .vrij__nav { gap: 0; margin-top: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vrij__spoor { scroll-behavior: auto; }
    .vrij__stip[aria-selected="true"] { transform: none; }
}

/* ══════════ 30-07 · grote mobiele ronde: de korte lijst ══════════ */
@media (max-width: 899px) {

    /* A · De contactpagina. Zeven links van 22 pixels, en juist daar komt
       iemand naartoe om contact te leggen. De links in de zijkolom staan in
       een <p>, dus ze krijgen hier ruimte in plaats van een raakvlak: bij
       drie socials naast elkaar zou een onzichtbaar vlak van 44 pixels over
       zijn buurman heen vallen. Regelhoogte omhoog en meer tussenruimte
       geeft ze allemaal hun eigen doel. */
    .contact-aside__row p a { display: inline-block; padding: .55rem 0; }
    .contact-aside__row p { line-height: 1.9; }
    .contact-aside__row p a + a { margin-left: .5rem; }

    /* De terugvallink onder de agenda stond op 155 bij 19. */
    /* Niet op .contact mikken: deze link staat in sectie #plan, niet in de
       contactsectie. Vandaar op het adres zelf. */
    p > a[href*="cal.com"] { display: inline-block; position: relative; }
    p > a[href*="cal.com"]::after {
        content: ''; position: absolute; left: -6px; right: -6px; top: 50%;
        transform: translateY(-50%); height: 44px;
    }

    /* C · De KvK- en BTW-regel stond op 60 procent dekking. Het is naslag,
       geen aandachttrekker, maar leesbaar mag wel.

       Dit stond hier eerst als `footer span[style*="opacity:.6"]` met een
       !important erachter. Dat werkte, maar het haakte aan de letterlijke
       tekst van een inline stijl: wie ooit `.6` in `.60` verandert, breekt
       hem zonder iets te merken. De dekking staat nu gewoon goed in de bron
       van alle twaalf pagina's (.78rem op .8), dus deze regel kan weg. */
}

/* ══════════ 30-07 · D · het mobiele menu in de taal van de opening ══════════
   Het was een kale lijst op zwart. Nu dezelfde opzet als de cinematic opening:
   een mono-kicker bovenaan, links in het displayfont die trapsgewijs
   infaden, en de scanknop als accent-pil onderaan. Duurt een halve seconde en
   maakt van een noodzakelijk kwaad een merkmoment. */
/* 31-07 · De eerste link kroop op een echte telefoon onder de header. Op 844
   hoog paste het, maar de browserbalk eet ruim 100 pixels en het menu
   centreerde blind: op een kort scherm schoof "Methode" dan achter het logo
   (de header ligt op z-index 200, boven het menu, zodat het kruisje werkt).

   De oplossing is centreren met een vloer: flex-start met auto-marges op de
   eerste en laatste link. Is er ruimte, dan centreert dat exact hetzelfde;
   is die er niet, dan wijken de marges naar nul en blijft alles onder de
   vaste vrije zone van de header en de kicker, scrolbaar in plaats van
   afgeknipt. De tussenruimte ademt mee met de schermhoogte. */
.mobile-nav {
    justify-content: flex-start;
    padding: 10.5rem 1.5rem 2.5rem;
    gap: clamp(.9rem, 2.6vh, 2rem);
    overflow-y: auto;
}
.mobile-nav > a:first-of-type { margin-top: auto; }
.mobile-nav > a:last-of-type { margin-bottom: auto; }
.mobile-nav::before {
    content: 'Menu';
    font-family: var(--font-mono); font-size: .56rem; letter-spacing: .34em;
    text-transform: uppercase; color: var(--cream-25);
    position: absolute; top: 6.5rem; left: 50%; transform: translateX(-50%);
    opacity: 0; transition: opacity .5s var(--ease-expo) .1s;
}
.mobile-nav.is-open::before { opacity: 1; }
/* de haarlijn van de vertreklijn, als rustpunt tussen kicker en links */
.mobile-nav::after {
    content: ''; position: absolute; top: 8.4rem; left: 50%;
    width: 1px; height: 2.2rem; background: linear-gradient(180deg, var(--accent-dim), transparent);
    transform: translateX(-50%) scaleY(0); transform-origin: top;
    transition: transform .7s var(--ease-expo) .18s;
}
.mobile-nav.is-open::after { transform: translateX(-50%) scaleY(1); }

/* 31-07 · De twee vertrekpunten onderaan hoorden niet bij het rijtje: de
   scanknop hing los en "Of plan direct een kennismaking" pakte de volle
   breedte over twee regels, in hetzelfde displayfont als de navigatie.
   Nu is het een eigen slotgroep: de knop krijgt lucht boven zich, en de
   kennismaking wordt een mono-bijschrift eronder, een maat kleiner, strak
   gecentreerd. Navigatie boven, actie onder, en die twee lezen als een. */
.mobile-nav > a.btn { margin-top: clamp(.8rem, 2.4vh, 1.8rem); }
.mobile-nav > a.textlink {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    max-width: none; width: auto; text-align: center;
    text-underline-offset: 6px;
    margin-top: -.2rem;
}
/* de links komen na elkaar op, zoals de regels van de opening */
.mobile-nav > a { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease-expo), transform .55s var(--ease-expo), color var(--t); }
.mobile-nav.is-open > a { opacity: 1; transform: none; }
.mobile-nav.is-open > a:nth-of-type(1) { transition-delay: .20s; }
.mobile-nav.is-open > a:nth-of-type(2) { transition-delay: .27s; }
.mobile-nav.is-open > a:nth-of-type(3) { transition-delay: .34s; }
.mobile-nav.is-open > a:nth-of-type(4) { transition-delay: .41s; }
.mobile-nav.is-open > a:nth-of-type(5) { transition-delay: .48s; }
.mobile-nav.is-open > a:nth-of-type(6) { transition-delay: .57s; }
.mobile-nav.is-open > a:nth-of-type(7) { transition-delay: .64s; }
@media (prefers-reduced-motion: reduce) {
    .mobile-nav > a { transition: opacity .2s; transform: none; }
    .mobile-nav::after { transition: none; }
}

/* ══════════ 30-07 · A · de sluimerstand van de coulissen ══════════
   De kaart op het podium speelt, de buren staan stil en gedimd. Geen
   display-wissel en geen herstart: alleen pauzeren en dimmen, zodat een kaart
   die terugkomt verder speelt waar hij gebleven was.

   De overgang is traag met opzet: een kaart die je wegveegt hoort te doven
   als een lamp, niet uit te knippen. */
@media (max-width: 899px) {
    .pp-rij > .card { transition: opacity .55s var(--ease), filter .55s var(--ease); }
    .pp-rij > .card.pp-slaapt { opacity: .42; filter: saturate(.55); }
    /* alles wat beweegt binnen een slapende kaart wordt bevroren */
    .pp-rij > .card.pp-slaapt *,
    .pp-rij > .card.pp-slaapt *::before,
    .pp-rij > .card.pp-slaapt *::after { animation-play-state: paused !important; }
    /* de zwaarste effecten helemaal uit: dat scheelt de telefoon werk voor
       iets dat toch niet in beeld staat */
    .pp-rij > .card.pp-slaapt .gloop__radar,
    .pp-rij > .card.pp-slaapt .gloop__golven,
    .pp-rij > .card.pp-slaapt .fmist__veeg { opacity: 0; }

    /* ── 31-07 · de wenk: het verhaal gaat rechts verder ──
       Op de pc reist de draad zichtbaar naar de volgende kaart; op een
       telefoon staat die kaart buiten beeld en was er dus niets dat je
       vertelde dat er meer kwam. Zodra de fundering voltooid is (rdz.js zet
       dan .pp-wenk op de kaart) ademt er een pijl aan de rechterrand, in
       het groen van de vertreklijn. Een keer vegen en hij is weg. */
    .pp-rij > .card.pp-wenk::after {
        content: '\2192';
        position: absolute; right: .6rem; top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600;
        color: #4ade80; text-shadow: 0 0 12px rgba(74,222,128,.6);
        pointer-events: none; z-index: 5;
        animation: ppWenk 1.9s var(--ease) infinite;
    }
}
@keyframes ppWenk {
    0%, 100% { opacity: 0; transform: translateY(-50%) translateX(-4px); }
    45%      { opacity: .95; transform: translateY(-50%) translateX(3px); }
    70%      { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
    .pp-rij > .card { transition: opacity .2s; }
    .pp-rij > .card.pp-wenk::after { animation: none; opacity: .8; }
}