/* Luminis Partner — nieuw ontwerp (laag bovenop styles.css en /beweging.css). Wit, zwart #0A0A0A, goud #C9A54B.
   Technisch: monospace-details, raster, een draaiende bol van verbonden punten (canvas), een koppelschema waarvan de
   lijnen stromen. Uitlijning: kop over de volle breedte, daaronder alles op één bovenlijn. */
:root{--goud:#c9a54b;--kopletter:Inter,-apple-system,sans-serif;--punt:var(--zwart);--rondje:var(--rond)}

/* ---------- opening ---------- */
.hero-3d{padding:170px 0 0}
.hero-3d .hero-raster{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero-3d .hero-acties{margin-bottom:0}
.hero-beeld{position:relative;height:clamp(380px,38vw,500px)}
.hero-beeld canvas{position:absolute;inset:-6% -10% -6% -4%;width:114%;height:112%}
.hero-beeld .terminal{position:absolute;left:0;bottom:6%;width:min(420px,92%);backdrop-filter:blur(10px);
 background:rgba(10,10,10,.72);transform:perspective(1200px) rotateY(-10deg) rotateX(4deg) translateZ(30px)}
.hero-beeld .terminal:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateZ(30px)}
.hero-3d .loopband{margin-top:clamp(56px,7vw,88px);border-color:rgba(255,255,255,.1)}
.hero-3d .loopband span{font-family:var(--mono);font-size:13.5px;font-weight:400;color:rgba(255,255,255,.62)}
.hero-3d .loopband span::after{border-radius:0;width:5px;height:5px}
.hero-3d + section{padding-top:clamp(76px,9.5vw,132px)!important}

/* ---------- koppelschema ---------- */
.schema{margin:0;border:1px solid var(--lijn);border-radius:10px;background:
 linear-gradient(var(--lijn) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--lijn) 1px,transparent 1px) 0 0/32px 32px,#fff;
 padding:clamp(18px,3vw,36px)}
.schema svg{display:block;width:100%;height:auto;overflow:visible}
.schema .stroom{fill:none;stroke:var(--lijn-sterk);stroke-width:1.5}
.beweeg .schema .stroom{stroke:var(--goud);stroke-dasharray:6 10;animation:stroom 1.6s linear infinite;animation-delay:var(--d)}
@keyframes stroom{to{stroke-dashoffset:-32}}
.schema .knoop rect{fill:#fff;stroke:var(--lijn-sterk)}
.schema .knoop text{font:500 15px var(--mono);fill:var(--inkt)}
.schema .knoop.uit rect{fill:var(--zwart);stroke:var(--zwart)}
.schema .knoop.uit text{fill:#fff}
.schema .kern rect{fill:var(--zwart)}
.beweeg .schema .kern rect{animation:puls 2.6s ease-in-out infinite}
@keyframes puls{50%{filter:drop-shadow(0 0 14px rgba(201,165,75,.55))}}
.schema .kern-titel{font:600 17px var(--kopletter);fill:#fff}
.schema .kern-sub{font:400 13px var(--mono);fill:var(--goud)}

/* ---------- kaarten: één bovenlijn ---------- */
.split.lijst-kaart{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
.raster.een{grid-template-columns:1fr;gap:16px}
.kaart.plak{position:sticky;top:96px;padding:28px 28px 26px}
.kaart.plak .label{display:flex;margin-bottom:22px}
.keuzekaart,.raster .stap{border-radius:var(--rond)}
.raster .stap.kantel:hover,.keuzekaart.kantel:hover{translate:0 0}
.keuzekaart.kantel:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* tijdlijn: zwarte punten met gouden cijfers */
.tijdlijn .punt{color:var(--goud);font-family:var(--mono);font-weight:500;font-size:13px}

@media (max-width:980px){
  .hero-3d .hero-raster{grid-template-columns:1fr}
  .hero-beeld{height:380px}
  .split.lijst-kaart{grid-template-columns:1fr}
  .kaart.plak{position:static}
  .schema .knoop text{font-size:17px}
}
@media (max-width:560px){.terminal{font-size:11.5px}.terminal ol{padding:14px 14px 16px}}

/* ---------- opening: vloeiend goud op zwart achter de bol ---------- */
.hero-3d{isolation:isolate}
.hero-3d canvas[data-aurora]{opacity:0}
.hero-3d canvas[data-aurora].aan{opacity:.85}

/* ---------- grote zin en zijwaartse kaarten ---------- */
.statement{font-weight:700;letter-spacing:-.045em;}
.horizontaal .stap{min-height:260px;padding:30px 28px;background:#fff;border:1px solid var(--lijn);border-radius:var(--rond)}
.horizontaal .stap::before{content:counter(stap,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:22px}
.horizontaal-spoor{counter-reset:stap}
.horizontaal .stap{counter-increment:stap}
.horizontaal .stap h3{font-size:22px;margin-bottom:12px}
.horizontaal-teller span{font-family:var(--mono);font-size:12.5px;color:var(--inkt-zacht)}

/* schema en grote zin volgen elkaar: de ruimte van de vorige sectie is genoeg */
.schema-sectie + .statement-sectie{padding-top:0!important}

/* ---------- home: hoe het samenkomt (data-verhaal="3"). Stap 0: bronnen liggen los en scheef, geen lijnen.
   Stap 1: ze schuiven op hun plek en de lijnen naar de kern verschijnen. Stap 2: de uitkomsten rechts komen erbij. ---------- */
.verhaal-lp h2.display{font-size:clamp(28px,3vw,40px);margin:12px 0 30px;max-width:14ch}
.verhaal-lp .verhaal-raster{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
.verhaal-lp .los{transform-box:fill-box;transform-origin:center;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.verhaal-lp .stroom,.verhaal-lp .knoop.uit,.verhaal-lp .kern{transition:opacity .6s}
.beweeg .verhaal-lp[data-stap="0"] .los{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}
.beweeg .verhaal-lp[data-stap="0"] .stroom{opacity:0}
.beweeg .verhaal-lp[data-stap="0"] .kern{opacity:.25}
.beweeg .verhaal-lp:not([data-stap="2"]) .stroom.uit,.beweeg .verhaal-lp:not([data-stap="2"]) .knoop.uit{opacity:0}
/* ---------- home: hoofdstuk Instroom. De velden van de aanmelding vliegen naar hun plek (start als het blok in beeld komt) ---------- */
.instroom-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center}
.instroom h2.display{font-size:clamp(28px,3vw,40px);max-width:16ch}
.instroom .knop{margin-top:10px}
.splits{position:relative;width:520px;max-width:100%;height:380px;margin-left:auto}
.splits .aanmelding{position:absolute;left:0;top:92px;width:210px;background:var(--zwart);color:#fff;border-radius:10px;padding:18px;display:grid;gap:9px;
 box-shadow:0 30px 50px -28px rgba(0,0,0,.6)}
.splits .aanmelding b{font:600 15px var(--kopletter);margin-bottom:4px}
.splits .veld{font:500 12.5px var(--mono);padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(201,165,75,.4);color:#f2e6c6}
.splits .doel{position:absolute;right:0;width:220px;height:84px;border:1px solid var(--lijn);border-radius:10px;background:#fff;padding:16px 18px;
 display:flex;justify-content:space-between;align-items:center;font:600 14.5px var(--kopletter);transition:border-color .4s,box-shadow .4s}
.splits .d1{top:10px}.splits .d2{top:148px}.splits .d3{top:286px}
.splits .land{width:22px;height:22px;border-radius:50%;background:var(--goud);position:relative}
.splits .land::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.beweeg .splits .land{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.beweeg .splits.in .d1 .land{transform:none;transition-delay:1.5s}.beweeg .splits.in .d2 .land{transform:none;transition-delay:2s}.beweeg .splits.in .d3 .land{transform:none;transition-delay:2.5s}
.beweeg .splits.in .d1{border-color:var(--goud);transition-delay:1.5s}.beweeg .splits.in .d2{border-color:var(--goud);transition-delay:2s}.beweeg .splits.in .d3{border-color:var(--goud);transition-delay:2.5s}
.beweeg .splits.in .f1{animation:vlieg1 1.1s cubic-bezier(.5,0,.3,1) .5s both}
.beweeg .splits.in .f2{animation:vlieg2 1.1s cubic-bezier(.5,0,.3,1) 1s both}
.beweeg .splits.in .f3{animation:vlieg3 1.1s cubic-bezier(.5,0,.3,1) 1.5s both}
@keyframes vlieg1{60%{opacity:1}to{transform:translate(310px,-118px) scale(.8);opacity:0}}
@keyframes vlieg2{60%{opacity:1}to{transform:translate(310px,-20px) scale(.8);opacity:0}}
@keyframes vlieg3{60%{opacity:1}to{transform:translate(310px,78px) scale(.8);opacity:0}}
.splits.op{opacity:1;transform:none}
/* ---------- aanbodpagina's en werkwijze: beeld in de opening ---------- */
.hero-aanbod .hero-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hero-aanbod h1{max-width:16ch}
.aanbodbeeld{position:relative;height:360px;max-width:440px;width:100%;margin-left:auto}
/* werkomgeving: drie echte soorten schermen achter elkaar, telkens komt het volgende naar voren */
.ab-diepte{perspective:1400px}
.ab-diepte .scherm{position:absolute;left:6%;right:6%;top:60px;background:#fff;border:1px solid var(--lijn-sterk);border-radius:10px;overflow:hidden;
 box-shadow:0 40px 60px -36px rgba(0,0,0,.45);animation:diepte 9s cubic-bezier(.6,0,.3,1) infinite}
.ab-diepte .scherm:nth-child(2){animation-delay:-3s}.ab-diepte .scherm:nth-child(3){animation-delay:-6s}
@keyframes diepte{0%,26%{transform:translate3d(0,0,0);opacity:1;z-index:3}33%,59%{transform:translate3d(0,-46px,-120px);opacity:.75;z-index:2}
 66%,92%{transform:translate3d(0,-92px,-240px);opacity:.45;z-index:1}100%{transform:translate3d(0,0,0);opacity:1;z-index:3}}
.ab-diepte .sk{display:flex;gap:6px;align-items:center;padding:11px 14px;background:var(--zwart);color:#fff}
.ab-diepte .sk i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.ab-diepte .sk b{margin-left:8px;font:600 13px var(--kopletter)}
.ab-diepte .sr{display:flex;justify-content:space-between;padding:15px 18px;border-top:1px solid var(--lijn);font-size:14.5px}
.ab-diepte .sr em{font:600 14px var(--mono);font-style:normal;color:var(--inkt)}
.ab-diepte .sr:first-of-type{border-top:none}
/* website en instroom: van bezoeker tot eerste werkdag, steeds minder punten per station */
.ab-stroom .stations{position:absolute;left:0;right:0;top:40px;display:grid;gap:12px}
.ab-stroom .station{height:48px;border:1px solid var(--lijn-sterk);border-radius:8px;background:#fff;display:flex;align-items:center;padding:0 16px;
 font:600 14px var(--kopletter);width:calc(100% - var(--i) * 12%)}
.ab-stroom .station:last-child{background:var(--zwart);color:#fff;border-color:var(--zwart)}
.ab-stroom .baan{position:absolute;right:12px;top:40px;height:288px;width:12px}
.ab-stroom .baan i{position:absolute;left:2px;top:0;width:9px;height:9px;border-radius:50%;background:var(--goud);opacity:0}
.beweeg .ab-stroom .baan i{animation:val 4.2s cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--i) * .6s)}
@keyframes val{0%{transform:translateY(10px);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(270px);opacity:0}}
/* werkwijze: een schets in stippellijnen die zich vult tot een af scherm */
.ab-schets .papier{position:absolute;inset:20px 6%;background:#fff;border:1px solid var(--lijn-sterk);border-radius:10px;padding:22px;
 display:grid;grid-template-columns:1fr 1fr;grid-template-rows:38px 1fr 1fr;gap:12px;box-shadow:0 30px 50px -34px rgba(0,0,0,.4)}
.ab-schets .sv{border:1.5px dashed var(--lijn-sterk);border-radius:7px;background:transparent}
.ab-schets .kop{grid-column:1/-1}
.ab-schets .a{grid-row:span 2}
.ab-schets .sv{background:var(--papier-2,#f3f1ec);border-style:solid;border-color:transparent}
.ab-schets .kop{background:var(--zwart)}.ab-schets .c{background:var(--goud)}
.beweeg .ab-schets .sv{animation:invullen .6s ease both;animation-delay:calc(1s + var(--d,0s))}
.ab-schets .a{--d:.3s}.ab-schets .b{--d:.6s}.ab-schets .c{--d:.9s}.ab-schets .d{--d:1.2s}
@keyframes invullen{from{background:transparent;border-color:var(--lijn-sterk);border-style:dashed}}
.ab-schets .krabbel{position:absolute;right:-6px;bottom:-12px;font:italic 500 14px var(--kopletter);color:var(--accent,#7c5a24);transform:rotate(-4deg);
 background:#fff;padding:2px 8px}
/* contact: de terminal, met een regel erbij na versturen */
.contact-term{background:var(--zwart);border-radius:12px;padding:6px;color:#e9e9e6}
.contact-term .na{display:none}
.contact-term.verstuurd .na{display:list-item}
@media (max-width:980px){
  .instroom-raster{grid-template-columns:1fr}
  .splits{transform:scale(.66);transform-origin:0 0;height:250px;margin:0}
  .aanbodbeeld{margin:36px auto 0;max-width:340px;height:300px}
  .verhaal-lp .verhaal-raster{grid-template-columns:1fr}
}
.ab-stroom .station{color:var(--inkt)}
.ab-stroom .station:last-child{color:#fff}
.splits .aanmelding::after{content:"✓ alles op zijn plek";font:500 12.5px var(--mono);color:var(--goud);opacity:0;margin-top:-4px}
.rustig .splits .aanmelding::after{display:none}
.beweeg .splits.in .aanmelding::after{animation:lblna .5s ease 2.7s forwards}
@keyframes lblna{to{opacity:1}}
.contact-term.verstuurd .na{animation-delay:0s}

/* ======================================================================================================
   Topniveau (9 nov 2026): technisch en scherp. Blauwdrukraster met een scanlijn, hoekmarkeringen en gouden gloed
   op kaarten, kommandoregel-labels. Alleen toevoegingen die geen ruimte innemen.
   ====================================================================================================== */
::selection{background:#c9a54b;color:#0a0a0a}
a:focus-visible,button:focus-visible,.knop:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #c9a54b;outline-offset:3px}
.label{font-family:var(--mono,ui-monospace,monospace)}
.sectiekop .label::before{content:"// ";color:var(--goud)}
/* opening: een gouden scanlijn trekt over het raster */
.hero{position:relative}
.hero::after{content:"";display:block;position:absolute;left:0;right:0;top:0;width:auto;height:2px;border:0;pointer-events:none;z-index:1;
 background:linear-gradient(90deg,transparent,rgba(201,165,75,.0) 10%,rgba(201,165,75,.9) 50%,rgba(201,165,75,0) 90%,transparent);box-shadow:0 0 24px 4px rgba(201,165,75,.35);opacity:0}
.beweeg .hero::after{animation:lp-scan 7s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes lp-scan{0%{top:0;opacity:0}8%{opacity:1}55%{opacity:.9}70%,100%{top:100%;opacity:0}}
/* kaarten: hoekmarkeringen en gloed die de muis volgt */
.keuzekaart,.raster .stap,.loketitem,.kaart{--mx:50%;--my:0;position:relative;transition:border-color .25s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.raster .stap:hover,.keuzekaart:hover,.loketitem:hover{background-image:radial-gradient(360px circle at var(--mx) var(--my),rgba(201,165,75,.16),transparent 62%);border-color:var(--goud)}
.raster .stap::after{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .3s;
 background:
  linear-gradient(var(--goud),var(--goud)) 0 0/14px 1px no-repeat,linear-gradient(var(--goud),var(--goud)) 0 0/1px 14px no-repeat,
  linear-gradient(var(--goud),var(--goud)) 100% 0/14px 1px no-repeat,linear-gradient(var(--goud),var(--goud)) 100% 0/1px 14px no-repeat,
  linear-gradient(var(--goud),var(--goud)) 0 100%/14px 1px no-repeat,linear-gradient(var(--goud),var(--goud)) 0 100%/1px 14px no-repeat,
  linear-gradient(var(--goud),var(--goud)) 100% 100%/14px 1px no-repeat,linear-gradient(var(--goud),var(--goud)) 100% 100%/1px 14px no-repeat}
.raster .stap:hover::after{opacity:1}
/* knoppen: gouden gloed */
.knop{transition:box-shadow .3s,background .22s,color .22s,transform .25s}
.knop:hover{box-shadow:0 0 0 1px var(--goud),0 10px 30px -8px rgba(201,165,75,.55)}
.knop.leeg:hover{box-shadow:0 0 0 1px var(--goud)}
/* afsluitende band: raster met een vegende gloed */
.cta{position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/40px 40px,
  radial-gradient(50% 80% at 50% 120%,rgba(201,165,75,.25),transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 60%,#000 20%,transparent 78%)}
.cta .wrap{position:relative}
footer{border-top:1px solid rgba(201,165,75,.35)}
@media (prefers-reduced-motion:reduce){.beweeg .hero::after{animation:none;opacity:0}.raster .stap::after,.knop{transition:none}}

/* Leesbaarheid (10 nov 2026): wit op wit in de voorbeeldschermen, goud als tekst op wit. Controle: node .claude/scripts/leesbaarheid.mjs https://luminis-partner.com luminis-partner/site */
:root{--goud-tekst:#7d6220}
.ab-diepte .sr{color:var(--inkt)}
.verhaal-stappen .nr{color:var(--goud-tekst)}