/* ── Uit GENI's eigen voorstel (28 oktober), in de stijl van de trailer ─────────────────────────────────────── */
/* Opstarten */
.boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(800px 500px at 50% 50%,rgba(76,45,140,.35),transparent 70%),#05030b;cursor:pointer;transition:opacity .6s ease}
.boot.weg{opacity:0;pointer-events:none}
.boot-tekst{font-family:'JetBrains Mono';color:var(--m);min-width:280px}
.boot-kop{font-family:'Orbitron';font-weight:900;font-size:30px;letter-spacing:.3em;color:var(--w);text-shadow:0 0 24px rgba(167,139,250,.8)}
.boot-sub{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--c);margin:10px 0 18px}
.boot-lagen{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;font-size:12px;letter-spacing:.12em}
.boot-lagen li{animation:bootop .18s ease both}
.boot-lagen li span{color:var(--c)}
.boot-weg{margin-top:22px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
@keyframes bootop{from{opacity:0;transform:translateX(-6px)}}
html.ontstoken .hero-hud{animation:ontsteek 1.1s ease both}
@keyframes ontsteek{from{filter:brightness(.4) saturate(.6)}to{filter:none}}

/* Deeltjesveld achter alles */
.veld{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Cursor */
.c-gloed{position:fixed;left:-260px;top:-260px;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(139,92,246,.13),rgba(34,211,238,.04) 40%,transparent 68%)}
.c-ring{position:fixed;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;pointer-events:none;z-index:90;border:1px solid rgba(182,156,255,.7);box-shadow:0 0 12px rgba(139,92,246,.5);transition:width .2s,height .2s,left .2s,top .2s,border-color .2s}
.c-ring.groot{width:54px;height:54px;left:-27px;top:-27px;border-color:var(--c)}

/* Voortgangsbalk rechts */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:25;display:grid;justify-items:center;gap:8px;font-family:'JetBrains Mono';font-size:9px;letter-spacing:.2em;color:var(--dim);pointer-events:none}
.rail-b{position:relative;width:3px;height:180px;border-radius:3px;background:rgba(182,156,255,.12);overflow:hidden}
.rail-b i{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(180deg,var(--c),var(--violet),var(--magenta));box-shadow:0 0 10px var(--violet)}
.rail-p{color:var(--c)}

/* De veeglijn over een sectie */
.veeg{position:relative}
.veeg::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--c) 45%,var(--magenta) 55%,transparent);transform:scaleX(0);transform-origin:left;opacity:0}
.veeg.geveegd::after{animation:veeg 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes veeg{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.25}}

/* Werkplaats: gedimd, als wireframe */
.pcard.werkplaats{background:transparent;border-style:dashed;border-color:rgba(182,156,255,.28)}
.pcard.werkplaats .cv{filter:grayscale(.55) brightness(.7);opacity:.8}
.pcard.werkplaats h4,.pcard.werkplaats p{opacity:.82}
.werkplaats-noot{text-align:center;margin-top:30px;font-family:'JetBrains Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m)}
.werkplaats-noot span{color:var(--magenta)}
.werkplaats-noot a{color:var(--c);text-decoration:none;margin-left:12px}

/* Het logboek */
.feed{max-width:860px;margin:46px auto 0;text-align:left;border:1px solid var(--line);border-radius:16px;background:rgba(10,7,20,.72);padding:22px 26px 18px}
.feed-kop{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c);margin-bottom:14px}
.feed-eerlijk{color:var(--magenta)}
.feed ul{list-style:none;padding:0;display:grid;gap:6px;min-height:266px;align-content:start}
.feed li{display:grid;grid-template-columns:52px 96px 1fr;align-items:center;gap:12px;font-size:16.5px;color:#d7cef2;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.feed li.zien{opacity:1;transform:none}
.feed time{font-family:'JetBrains Mono';font-size:12px;color:var(--dim)}
.f-chip{justify-self:start;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid}
.f-ok .f-chip{color:var(--c);border-color:rgba(34,211,238,.45)}
.f-wacht .f-chip{color:var(--g);border-color:rgba(182,156,255,.55)}
.f-stop .f-chip{color:var(--magenta);border-color:rgba(217,70,239,.5)}
.feed-noot{margin-top:12px;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.06em;color:var(--dim)}

/* De poort */
.poort{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center;border:1px solid var(--line);border-radius:18px;background:rgba(10,7,20,.6);padding:40px}
.poort-baan{position:relative;height:200px;border-radius:14px;overflow:hidden;background:linear-gradient(90deg,rgba(139,92,246,.06),rgba(139,92,246,.02) 60%,rgba(34,211,238,.06)),repeating-linear-gradient(90deg,rgba(182,156,255,.06) 0 1px,transparent 1px 44px)}
.actie{position:absolute;top:50%;left:4%;width:56%;transform:translate(-120%,-50%);display:grid;gap:3px;padding:14px 16px;border-radius:12px;background:rgba(17,12,34,.95);border:1px solid rgba(182,156,255,.45);box-shadow:0 0 30px rgba(139,92,246,.35)}
.actie.loopt{animation:loop 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes loop{from{transform:translate(-120%,-50%)}to{transform:translate(0,-50%)}}
.a-soort{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--c)}
.actie b{font-family:'Orbitron';font-weight:700;font-size:15px;letter-spacing:.02em}
.a-wie{font-family:'JetBrains Mono';font-size:11px;color:var(--m)}
.poort-lijn{position:absolute;top:8%;bottom:8%;left:66%;width:2px;background:linear-gradient(180deg,transparent,var(--magenta),transparent);box-shadow:0 0 18px rgba(217,70,239,.6)}
.poort-lijn span{position:absolute;top:-2px;left:10px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta)}
.poort.staat .poort-lijn{animation:knipper 1.2s ease-in-out infinite}
@keyframes knipper{50%{opacity:.45}}
.poort.staat .actie{animation:none;transform:translate(0,-50%);box-shadow:0 0 0 1px rgba(217,70,239,.6),0 0 30px rgba(217,70,239,.3)}
.poort.door .actie{transition:transform 1s cubic-bezier(.5,0,.2,1),opacity 1s;transform:translate(160%,-50%);opacity:0}
.poort.terug .actie{transition:transform 1s cubic-bezier(.5,0,.2,1),opacity 1s;transform:translate(-130%,-50%);opacity:0}
.poort-voorbij{position:absolute;right:4%;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);opacity:0;transition:opacity .4s .6s}
.poort.door .poort-voorbij{opacity:1}
.eigenaar{border:1px solid rgba(217,70,239,.45);border-radius:14px;background:rgba(24,10,30,.55);padding:22px;opacity:.25;transform:translateY(8px);transition:opacity .4s,transform .4s}
.eigenaar.zien{opacity:1;transform:none}
.e-kop{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);margin-bottom:10px}
.eigenaar b{display:block;font-family:'Orbitron';font-weight:700;font-size:16px;line-height:1.3}
.eigenaar p{color:#d7cef2;font-size:16px;line-height:1.45;margin-top:8px}
.e-knoppen{display:flex;gap:10px;margin-top:16px}
.eigenaar .e-uit{min-height:46px;color:var(--c);font-family:'JetBrains Mono';font-size:12px}
.hard{max-width:1100px;margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;align-items:center}
.hard span{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);margin-right:6px}
.hard i{font-style:normal;font-family:'JetBrains Mono';font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:#d7cef2;background:rgba(10,7,20,.6)}

/* Het plafond */
.plafond{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.h2-l{font-family:'Orbitron';font-weight:800;font-size:48px;line-height:1.08;text-transform:uppercase;text-wrap:balance}
.h2-l .acc{color:var(--g);text-shadow:0 0 30px rgba(167,139,250,.5)}
.p-l{color:var(--m);font-size:20px;line-height:1.5;margin-top:14px;max-width:520px}
.meter{border:1px solid var(--line);border-radius:18px;background:rgba(10,7,20,.72);padding:28px 30px 26px}
.m-kop{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.meter.gestopt .m-kop span:last-child{color:var(--magenta)}
.m-bedrag{display:flex;align-items:baseline;gap:14px;margin:22px 0 14px}
.m-bedrag b{font-family:'Orbitron';font-weight:800;font-size:46px;text-shadow:0 0 24px rgba(167,139,250,.5)}
.m-bedrag span{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--m)}
.m-balk{position:relative;height:14px;border-radius:999px;background:rgba(182,156,255,.1);margin-bottom:34px}
.m-balk i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--c),var(--violet),var(--magenta));box-shadow:0 0 16px rgba(139,92,246,.6)}
.m-grens{position:absolute;left:82%;top:-8px;bottom:-8px;width:2px;background:var(--w);box-shadow:0 0 12px rgba(241,236,255,.8)}
.m-grens em{position:absolute;top:30px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--w)}
.m-stappen{list-style:none;padding:0;display:grid;gap:6px;font-family:'JetBrains Mono';font-size:12.5px;color:var(--dim)}
.m-stappen li::before{content:'\25CB  '}
.m-stappen li.af{color:var(--w)}
.m-stappen li.af::before{content:'\2713  ';color:var(--c)}
.m-stappen li.nu{color:var(--magenta)}
.m-stappen li.nu::before{content:'\25A0  '}
.m-uit{margin-top:16px;color:#d7cef2;font-size:16.5px;line-height:1.45;opacity:0;transition:opacity .4s}
.meter.gestopt .m-uit{opacity:1}
.meter .knop{margin-top:16px}

/* De slotzin in GENI's stem */
.stem-slot{margin:28px auto 0;display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 14px;border-radius:999px;border:1px solid rgba(182,156,255,.45);background:rgba(13,10,24,.6);color:var(--w);font-family:'Instrument Serif';font-style:italic;font-size:21px;cursor:pointer}
.stem-slot span{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.stem-slot.speelt span{animation:knipper .6s infinite}

@media (max-width:860px){
  .rail{display:none}
  .poort,.plafond{grid-template-columns:1fr;padding:24px;gap:22px}
  .h2-l{font-size:30px}
  .feed li{grid-template-columns:44px 1fr;row-gap:2px}
  .feed li .f-tekst{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.veeg::after,.actie.loopt,.boot-lagen li{animation:none!important}}

/* Telefoon: de kop in twee regels, zonder los woord */
@media (max-width:520px){
  .hero-hud h1{font-size:6.1vw;line-height:1.15}
  .hero-hud .hook{font-size:4.2vw}
  .kop-m h2,.evolve h2,.band h2{text-wrap:balance}
}

/* Geen los woord op de laatste regel (werkregel): koppen in balans, tekst netjes afgebroken */
h1,h2,h3,h4,h5,.kop-m p{text-wrap:balance}
p,li,.sub,.lead{text-wrap:pretty}
.feed ul{min-height:232px}

/* "Coming" als label boven de titel, niet als los woord erachter */
h4 .komt,h3 .komt{display:table;margin:0 0 8px}
h4:has(.komt),h3:has(.komt){display:flex;flex-direction:column-reverse;align-items:flex-start}

/* Taalknop in de navigatie */
nav .links a.taal{padding:6px 10px;border-radius:8px;border:1px solid rgba(182,156,255,.35);color:var(--w);font-size:11px;letter-spacing:.16em}
nav .links a.taal:hover{border-color:var(--c);color:var(--c)}

/* De startzin op een use-casepagina */
.start-zin{max-width:820px;margin:34px auto 0;padding:22px 28px;border:1px solid rgba(182,156,255,.35);border-radius:16px;background:rgba(13,10,24,.7);text-align:left}
.start-zin span{display:block;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.start-zin .zeg{font-size:24px;line-height:1.35;margin:0}

/* Het slot van de homepage: ons kantoor aan De Run achter de laatste oproep, gedimd. */
.band.slot-kantoor{overflow:hidden}
.slot-kantoor .achter{position:absolute;inset:0;z-index:0;pointer-events:none}
.slot-kantoor .achter video{width:100%;height:100%;object-fit:cover;opacity:.42}
.slot-kantoor .achter::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg,#04020A) 0%,rgba(4,2,10,.55) 30%,rgba(4,2,10,.55) 70%,var(--bg,#04020A) 100%)}
.slot-kantoor>:not(.achter){position:relative;z-index:1}
.slot-kantoor .plek{margin-top:40px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#b3a3dc}