:root {
  --bg: #05070b;
  --bg-2: #0b0e15;
  --panel: rgba(13, 17, 27, .90);
  --panel-solid: #101520;
  --gold: #d8b46a;
  --gold-soft: #b99758;
  --gold-pale: #efd695;
  --text: #f3f3f3;
  --muted: #adb5c3;
  --line: rgba(216, 180, 106, .26);
  --line-soft: rgba(255, 255, 255, .08);
  --shadow: 0 24px 70px rgba(0, 0, 0, .62);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 0; overflow-x: hidden; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: radial-gradient(circle at 15% 0%, #1a2131 0, var(--bg) 38%, #020308 100%); line-height: 1.6; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.section-shell { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }

.home-button { position: fixed; z-index: 1000; top: 18px; left: 18px; padding: 9px 17px; border: 1px solid rgba(216,180,106,.45); border-radius: 6px; color: var(--gold-pale); background: rgba(2,3,8,.64); box-shadow: 0 0 18px rgba(216,180,106,.14); backdrop-filter: blur(8px); text-decoration: none; font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.home-button:hover { border-color: var(--gold); background: rgba(216,180,106,.10); }

.access-hero { position: relative; min-height: 760px; display: grid; place-items: center; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.atmosphere { position: absolute; inset: 0; z-index: -3; background: #05070b; overflow: hidden; }

.atmo-slide {
    position: absolute;
    inset: -1%;
    opacity: 0;
    background-position: 34% 46%;
    background-size: cover;
    transform: scale(1.00);
    animation: cinematic-fade 40s infinite ease-in-out;
    filter: saturate(1.02) contrast(1.05) brightness(1.20);
}



.slide-1 { background-image: linear-gradient(rgba(2,4,8,.30),rgba(2,4,8,.74)), url('../images/docu-access/shroud.jpg'); animation-delay: 0s; }
.slide-2 { background-image: linear-gradient(rgba(2,4,8,.30),rgba(2,4,8,.74)), url('../images/docu-access/charny.jpg'); animation-delay: 8s; }
.slide-3 { background-image: linear-gradient(rgba(2,4,8,.30),rgba(2,4,8,.74)), url('../images/docu-access/science.jpg'); animation-delay: 16s; }
.slide-4 { background-image: linear-gradient(rgba(2,4,8,.30),rgba(2,4,8,.74)), url('../images/docu-access/quantum.jpg'); animation-delay: 24s; }
.slide-5 { background-image: linear-gradient(rgba(2,4,8,.30),rgba(2,4,8,.74)), url('../images/docu-access/courtroom.jpg'); animation-delay: 32s; }

.slide-1 {
    background-position: 30% 44%;
}

.slide-2 {
    background-position: 28% 66%;
}

.slide-3 {
    background-position: 27% 58%;
}

.slide-4 {
    background-position: 33% 50%;
}

.slide-5 {
    background-position: 27% 57%;
}

@keyframes cinematic-fade {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }

    4% {
        opacity: .34;
    }

    8% {
        opacity: .78;
    }

    17% {
        opacity: .96;
        transform: scale(1.005);
    }

    21% {
        opacity: .90;
    }

    25% {
        opacity: 0;
        transform: scale(1.00);
    }

    100% {
        opacity: 0;
        transform: scale(1.00);
    }
}

.hero-vignette { position:absolute; inset:0; background: radial-gradient(circle at 55% 38%, transparent 0 24%, rgba(3,5,9,.28) 56%, rgba(2,3,7,.84) 100%), linear-gradient(90deg, rgba(2,3,7,.82) 0%, rgba(2,3,7,.42) 47%, rgba(2,3,7,.66) 100%), linear-gradient(180deg, rgba(2,3,7,.32), rgba(2,3,7,.92)); }
.mist { position:absolute; width:72vw; height:34vw; min-width:700px; min-height:300px; border-radius:50%; filter:blur(55px); opacity:.22; background:radial-gradient(ellipse, rgba(194,205,213,.40), rgba(95,112,129,.14) 42%, transparent 72%); animation:mist-drift 25s infinite alternate ease-in-out; }
.mist-a { left:-20%; bottom:4%; }
.mist-b { right:-28%; top:18%; animation-delay:-11s; }
@keyframes mist-drift { from{transform:translate3d(-2%,1%,0) scale(1)} to{transform:translate3d(7%,-2%,0) scale(1.08)} }

.hero-grid { width:min(var(--max), calc(100% - 48px)); margin:auto; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(350px,.72fr); gap:clamp(44px,7vw,100px); align-items:center; padding:110px 0 88px; }
.hero-copy { max-width:760px; text-shadow:0 3px 28px rgba(0,0,0,.76); }
.eyebrow, .section-kicker, .chapter-number, .access-kicker { margin:0 0 10px; color:var(--gold); font-size:.78rem; font-weight:800; letter-spacing:.20em; text-transform:uppercase; }
.hero-copy h1 { margin:0; color:var(--gold-pale); font-family:Georgia,'Times New Roman',serif; font-size:clamp(3.1rem,7vw,6.7rem); line-height:.93; letter-spacing:.055em; text-transform:uppercase; }
.hero-line { margin:24px 0 12px; color:#fff; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.4rem,2.4vw,2.15rem); }
.hero-intro { max-width:710px; margin:0; color:#e2e5eb; font-size:clamp(1rem,1.35vw,1.15rem); }
.hero-question { margin:22px 0 0; color:var(--gold-pale); font-weight:700; font-size:1.06rem; }
.hero-small { margin:26px 0 0; color:#aab1bf; font-size:.83rem; letter-spacing:.11em; text-transform:uppercase; }

.access-card { position:relative; padding:34px 34px 30px; border:1px solid rgba(216,180,106,.40); border-radius:16px; background:linear-gradient(160deg, rgba(21,26,38,.92), rgba(5,7,12,.91)); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(16px); }
.access-card::before { content:""; position:absolute; top:0; left:13%; width:74%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.access-icon { width:62px; height:62px; margin:0 0 16px; position:relative; display:grid; place-items:center; border:1px solid rgba(216,180,106,.38); border-radius:50%; background:#090c13; box-shadow:0 0 22px rgba(216,180,106,.10); }
.reel { width:33px; height:33px; border:2px solid var(--gold-soft); border-radius:50%; color:transparent; }
.reel-hole { position:absolute; width:7px; height:7px; border:1px solid var(--gold-soft); border-radius:50%; }
.reel-hole.h1{transform:translate(-8px,-8px)} .reel-hole.h2{transform:translate(8px,-8px)} .reel-hole.h3{transform:translate(-8px,8px)} .reel-hole.h4{transform:translate(8px,8px)}
.access-card h2 { margin:0 0 8px; font-family:Georgia,'Times New Roman',serif; font-size:1.75rem; color:#fff8e8; }
.access-copy { margin:0 0 20px; color:#c6ccd7; font-size:.94rem; }
.access-copy.compact { margin-top:0; }
.access-form { display:grid; gap:8px; }
.access-form label { margin-top:4px; color:#cdd2dc; font-size:.78rem; font-weight:700; }
.access-form input { width:100%; padding:12px 13px; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:7px; outline:none; background:rgba(0,0,0,.36); }
.access-form input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,180,106,.10); }
.btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid transparent; font-weight:900; letter-spacing:.10em; text-transform:uppercase; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-gold { margin-top:10px; color:#17100a; background:linear-gradient(135deg,#f2d58e,#c68b37 55%,#f0c975); border-color:#f3d696; box-shadow:0 9px 24px rgba(0,0,0,.36); }
.btn-outline { width:100%; padding:10px 18px; color:var(--gold-pale); background:rgba(216,180,106,.06); border-color:rgba(216,180,106,.54); }
.forgot-link { display:inline-block; margin:12px 0 0; color:#aeb6c3; font-size:.78rem; }
.access-divider { display:flex; align-items:center; gap:12px; margin:22px 0 17px; color:#717a89; font-size:.7rem; letter-spacing:.14em; }
.access-divider::before,.access-divider::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.09)}
.secure-note { margin:11px 0 0; color:#767f8e; font-size:.72rem; }

main { position:relative; z-index:2; }
.public-intro { padding:74px 0 66px; text-align:center; }
.public-intro h2,.platform-head h2 { margin:0 0 16px; font-family:Georgia,'Times New Roman',serif; color:#fff8e9; font-size:clamp(1.9rem,3vw,3rem); line-height:1.16; }
.public-intro p:not(.section-kicker) { max-width:880px; margin:0 auto; color:#c8cfda; font-size:1.03rem; }

.platform-shell { position:relative; padding:18px 0 90px; }
.platform-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:28px; }
.platform-head h2 { max-width:800px; margin-bottom:0; }
.access-status { flex:0 0 auto; display:flex; align-items:center; gap:8px; color:#bdc4cf; font-size:.8rem; text-transform:uppercase; letter-spacing:.10em; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#b76c5f; box-shadow:0 0 0 4px rgba(183,108,95,.12); }


.locked-stage { position:relative; min-height:900px; overflow:hidden; }
.chapter-list { display:grid; gap:28px; transition:filter .45s ease,opacity .45s ease; }
.is-locked .chapter-list { filter:blur(6px); opacity:.28; pointer-events:none; user-select:none; max-height:1500px; overflow:hidden; }
.is-locked .platform-head > div:first-child {
  filter: blur(6px);
  opacity: .28;
  pointer-events: none;
  user-select: none;
}
.locked-overlay { display:none; }
.is-locked .locked-overlay { position:absolute; z-index:20; inset:70px 0 auto; height:720px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; color:#f2e5bf; pointer-events:none; background:linear-gradient(180deg,rgba(5,7,11,.10),rgba(5,7,11,.55) 48%,rgba(5,7,11,.96)); }
.locked-overlay strong { font-family:Georgia,'Times New Roman',serif; font-size:1.45rem; }
.locked-overlay span { color:#aeb6c4; font-size:.86rem; }
.lock-symbol { font-size:3rem; color:var(--gold); transform:rotate(-15deg); opacity:.75; }

.chapter-row { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(480px,1.28fr); grid-template-areas:"copy media" "progress progress"; gap:18px 28px; padding:26px; border:1px solid var(--line-soft); border-radius:16px; background:linear-gradient(145deg,rgba(14,18,28,.96),rgba(8,10,16,.96)); box-shadow:0 17px 46px rgba(0,0,0,.34); }
.chapter-copy { grid-area:copy; align-self:center; }
.chapter-copy h3,.group-heading h3 { margin:0 0 7px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.55rem,2.3vw,2.35rem); line-height:1.08; color:#fff7e5; }
.chapter-copy p { margin:0 0 10px; color:#c6ccd7; }
.chapter-copy .chapter-tagline { color:var(--gold-pale); font-weight:700; }
.chapter-media { grid-area:media; min-height:315px; position:relative; display:flex; align-items:flex-end; overflow:hidden; border-radius:12px; border:1px solid rgba(216,180,106,.19); background-color:#0a0d14; background-position:center; background-size:cover; box-shadow:inset 0 0 80px rgba(0,0,0,.38); }
.media-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06) 30%,rgba(2,4,8,.80) 100%),radial-gradient(circle at 30% 30%,transparent,rgba(2,4,8,.35)); }
.media-ch1{background-image:url('../images/docu-access/chapter-01.jpg')} .media-ch2{background-image:url('../images/docu-access/chapter-02.jpg')} .media-ch3{background-image:url('../images/docu-access/chapter-03.jpg')} .media-ch4{background-image:url('../images/docu-access/chapter-04.jpg')} .media-ch5{background-image:url('../images/docu-access/chapter-05.jpg')} .media-ch6e1{background-image:url('../images/docu-access/chapter-06-episode-01.jpg')} .media-ch6e2{background-image:url('../images/docu-access/chapter-06-episode-02.jpg')} .media-ch6e3{background-image:url('../images/docu-access/chapter-06-episode-03.jpg')} .media-ch7{background-image:url('../images/docu-access/chapter-07.jpg')} .media-ch8{background-image:url('../images/docu-access/chapter-08.jpg')} .media-ch9{background-image:url('../images/docu-access/chapter-09.jpg')} .media-ch10{background-image:url('../images/docu-access/chapter-10.jpg')}
.language-panel { position:relative; z-index:2; width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:18px; }
.language-choice { min-height:82px; padding:11px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(7,10,16,.76); backdrop-filter:blur(8px); transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.language-choice strong { color:var(--gold-pale); font-size:1.05rem; letter-spacing:.10em; }
.language-choice span { font-size:.72rem; color:#c9cfda; }
.language-choice:not(:disabled):hover { transform:translateY(-4px) scale(1.025); border-color:var(--gold); background:rgba(25,25,22,.88); box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 18px rgba(216,180,106,.10); }
.language-choice.is-coming { opacity:.48; cursor:not-allowed; }
.chapter-progress { grid-area:progress; display:grid; grid-template-columns:auto 1fr 42px; gap:10px; align-items:center; color:#8f98a8; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.progress-track { height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.progress-fill { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold-soft),var(--gold-pale)); transition:width .25s ease; }
.progress-value { text-align:right; }
.chapter-group { padding:30px; border:1px solid var(--line); border-radius:18px; background:radial-gradient(circle at top left,rgba(216,180,106,.07),transparent 38%),rgba(7,9,14,.76); }
.group-heading { max-width:850px; margin-bottom:22px; }
.group-heading p:not(.chapter-number){color:#bfc6d2;}
.chapter-group .chapter-row { margin-top:18px; }
.episode-row { border-color:rgba(255,255,255,.06); }
.is-upcoming .chapter-media { filter:saturate(.35); }
.coming-card { position:relative; z-index:2; margin:auto; padding:18px 26px; border:1px solid rgba(216,180,106,.45); color:var(--gold-pale); background:rgba(2,4,8,.72); border-radius:7px; font-size:.85rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }

.site-footer { border-top:1px solid var(--line-soft); background:#030409; }
.footer-inner { min-height:120px; display:flex; justify-content:space-between; align-items:center; gap:24px; color:#7f8898; font-size:.8rem; }
.footer-inner p { margin:0; }

.video-modal[hidden] { display:none; }
.video-modal { position:fixed; z-index:5000; inset:0; display:grid; place-items:center; padding:26px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.88); backdrop-filter:blur(10px); }
.modal-dialog { position:relative; z-index:2; width:min(1180px,96vw); border:1px solid rgba(216,180,106,.35); border-radius:14px; overflow:hidden; background:#06080d; box-shadow:0 30px 100px rgba(0,0,0,.85); }
.modal-head { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 64px 0 18px; color:#d7dce4; border-bottom:1px solid rgba(255,255,255,.08); font-size:.82rem; }
.modal-close { position:absolute; z-index:4; top:8px; right:10px; width:38px; height:38px; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:white; background:rgba(255,255,255,.05); font-size:1.55rem; }
.video-frame { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
body.modal-open { overflow:hidden; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns:1fr; width:min(820px,calc(100% - 36px)); gap:36px; padding:100px 0 70px; }
  .hero-copy { text-align:center; margin-inline:auto; }
  .access-card { width:min(580px,100%); margin-inline:auto; }
  .chapter-row { grid-template-columns:1fr; grid-template-areas:"copy" "media" "progress"; }
  .chapter-media { min-height:360px; }
  .platform-head { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 600px) {
  .section-shell { width:calc(100% - 24px); }
  .home-button { position:static; width:76px; height:36px; margin:9px 0 4px 10px; padding:0; display:flex; align-items:center; justify-content:center; font-size:.72rem; }
  .access-hero { min-height:0; }
  .hero-grid { width:calc(100% - 24px); padding:58px 0 44px; gap:28px; }
  .hero-copy h1 { font-size:clamp(2.55rem,14vw,4.25rem); }
  .eyebrow { font-size:.66rem; letter-spacing:.16em; }
  .hero-line { font-size:1.38rem; }
  .hero-intro { font-size:.94rem; }
  .access-card { padding:27px 19px 24px; }
  .public-intro { padding:48px 0; text-align:left; }
  .platform-shell { padding-bottom:54px; }
  .chapter-list { gap:18px; }
  .chapter-row { padding:17px; border-radius:12px; gap:15px; }
  .chapter-copy h3,.group-heading h3 { font-size:1.65rem; }
  .chapter-media { min-height:300px; }
  .language-panel { grid-template-columns:1fr; gap:8px; padding:12px; }
  .language-choice { min-height:58px; flex-direction:row; justify-content:flex-start; gap:10px; padding:10px 14px; }
  .language-choice strong { min-width:32px; }
  .chapter-progress { grid-template-columns:auto 1fr 35px; }
  .chapter-group { padding:17px; }
  .chapter-group .chapter-row { padding:14px; }
  .locked-stage { min-height:720px; }
  .is-locked .locked-overlay { inset:40px 0 auto; height:600px; padding:20px; }
  .footer-inner { min-height:130px; flex-direction:column; justify-content:center; text-align:center; gap:6px; }
  .video-modal { padding:8px; }
  .modal-head { min-height:50px; padding-left:12px; }
 .cinema-offer-strip {
  top: 58px;
}

.cinema-offer-line {
  gap: 18px;
  padding: 11px 9px;
  font-size: 10px;
}

.offer-price {
  padding: 7px 12px;
}

.offer-price {
  padding: 7px 12px;
}   
}
.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #101827;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .95;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  opacity: 1;
  color: #000000;
}

.password-toggle:focus-visible {
  outline: 1px solid rgba(216,180,106,.65);
  border-radius: 50%;
}
.cinema-offer-strip {
  position: absolute;
  z-index: 2;

  /* lager, zodat HOME volledig vrij blijft */
  top: 92px;

  left: 0;
  width: 100%;
  overflow: hidden;

  /* duidelijker goud */
  border-top: 1px solid rgba(216,180,106,.72);
  border-bottom: 1px solid rgba(216,180,106,.72);

  background:
    linear-gradient(
      90deg,
      rgba(5,8,14,.88) 0%,
      rgba(17,26,41,.94) 38%,
      rgba(17,26,41,.94) 62%,
      rgba(5,8,14,.88) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(245,216,155,.12),
    inset 0 -1px 0 rgba(216,180,106,.10),
    0 0 18px rgba(184,143,71,.18),
    0 12px 38px rgba(0,0,0,.30);

  backdrop-filter: blur(5px);
}

.cinema-offer-track {
  display: flex;
  width: max-content;
  animation: cinemaOfferScroll 48s linear infinite;
}

.cinema-offer-line {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 24px;
  padding: 14px 12px;
  white-space: nowrap;

  color: rgba(238,241,246,.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.offer-price {
  padding: 9px 18px;

  border: 1px solid rgba(231,190,103,.72);
  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      rgba(216,180,106,.15),
      rgba(216,180,106,.07)
    );

  color: #f5d98e;

  box-shadow:
    inset 0 0 0 1px rgba(255,232,177,.05),
    0 0 16px rgba(216,180,106,.10);

  font-weight: 900;
  letter-spacing: .11em;
}

.offer-dot {
  color: #d5aa54;
  font-size: 8px;
}

/* hero blijft vóór de lopende balk */
.hero-grid {
  position: relative;
  z-index: 3;
}

/* login/access paneel ligt duidelijk boven de balk */
.access-card {
  position: relative;
  z-index: 6;
}

@keyframes cinemaOfferScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 700px) {
  .cinema-offer-line {
    gap: 18px;
    padding: 13px 9px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-offer-track {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .slide-1 { opacity:.55; }
}
/* ---------- E-book language links ---------- */

.ebook-language-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.ebook-language-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid rgba(216,180,106,.26);
    border-radius: 8px;
    color: #e9d7ad;
    background: rgba(216,180,106,.045);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.ebook-language-link:hover,
.ebook-language-link:focus-visible {
    color: #fff7e5;
    border-color: rgba(216,180,106,.65);
    background: rgba(216,180,106,.12);
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .ebook-grid {
        grid-template-columns: 1fr;
    }

    .ebook-language-list {
        grid-template-columns: 1fr;
    }
}