/* ==========================================================================
   Operator Elite — Huisstijl 2026 "Schild" (website operator-elite.nl)
   Zelfde standaard als de AI Academy. Laadt NA de bestaande CSS.
   Terugdraaien: de <link> naar dit bestand uit de pagina's verwijderen.
   ========================================================================== */
:root{
  --oe-black:#07080a;--oe-surface:#111317;--oe-surface2:#16191e;--oe-edge:#262a31;--oe-edge2:#323741;
  --oe-gold:#f5a524;--oe-gold-light:#ffc94d;--oe-gold-deep:#c9861a;
  --oe-orange:#f07a1a;--oe-blue:#1e9bff;--oe-blue-light:#6cbcff;--oe-cyan:#3fd0ff;
  --oe-chrome:#e6e8eb;--oe-muted:#9aa3ad;--oe-mono:Consolas,'Cascadia Mono','Courier New',monospace;
  --oe-rim:linear-gradient(135deg,#ffe08a 0%,#f5a524 22%,#8a5a12 48%,#f5a524 72%,#ffd76e 100%);
  --oe-rim-soft:linear-gradient(180deg,rgba(255,201,77,.55) 0%,rgba(245,165,36,.18) 38%,rgba(255,255,255,.05) 100%);
  /* bestaande website-variabelen omzetten */
  --bg:#07080a;--bg2:#0b0c0f;--panel:#111317;--panel2:#16191e;--panel3:#0d0e11;--stroke:#262a31;--stroke-gold:rgba(245,165,36,.45);
  --gold:#f5a524;--gold2:#ffc94d;--gold-dark:#c9861a;--ink:#e6e8eb;--muted:#a9b0b8;--muted2:#8a929b;
}
html{background:var(--oe-black)}
body{background:
  url(../img/oe-circuit-tr.svg) right -60px top 90px/480px auto no-repeat fixed,
  url(../img/oe-circuit-bl.svg) left -40px bottom 20px/400px auto no-repeat fixed,
  radial-gradient(ellipse 70% 55% at 50% 12%,rgba(245,165,36,.08),transparent 70%),
  url(../img/oe-hex.svg) 0 0/56px 100px repeat fixed,var(--oe-black);color:var(--oe-chrome)}
::selection{background:var(--oe-gold);color:#0a0a0a}

/* ---------- Kopbalk met schild ---------- */
.site-header{background:rgba(7,8,10,.92);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(245,165,36,.7) 25%,var(--oe-gold-light) 50%,rgba(245,165,36,.7) 75%,transparent) 1}
.brand-logo{width:58px;height:58px;object-fit:cover;border-radius:12px;flex:none;box-shadow:0 0 0 1px rgba(255,201,77,.65),0 0 22px rgba(245,165,36,.45)}
.site-footer .brand-logo{width:46px;height:46px;border-radius:10px}
.brand-word{font-style:italic}
.brand-op{background:linear-gradient(180deg,#fff,#c9ced4 55%,#8f969e);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-elite{background:linear-gradient(180deg,var(--oe-gold-light),var(--oe-gold) 55%,var(--oe-gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-word small{font-style:normal;color:var(--oe-muted)}
.desktop-nav a{color:#c3c8ce}
.desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--oe-gold-light)}
.desktop-nav a[aria-current="page"]:after{background:var(--oe-gold);box-shadow:0 0 10px var(--oe-gold)}
.header-cta,.btn-gold{background:linear-gradient(180deg,#ffe08a 0%,#ffc94d 30%,#f5a524 60%,#c9861a 100%);border:1px solid #8a5a12;color:#0a0a0a;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.18),0 0 18px rgba(245,165,36,.35),0 6px 18px rgba(0,0,0,.4)}
.header-cta:hover,.btn-gold:hover{background:linear-gradient(180deg,#fff0b8 0%,#ffd76e 30%,#ffb52e 60%,#d9921c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 28px rgba(245,165,36,.55),0 6px 18px rgba(0,0,0,.4)}
.btn-outline{background:rgba(7,8,10,.7);border-color:rgba(245,165,36,.5);color:var(--oe-gold-light)}
.btn-outline:hover{background:rgba(245,165,36,.08);border-color:var(--oe-gold)}

/* ---------- Typografie ---------- */
h1{font-style:italic;letter-spacing:-.035em;background:linear-gradient(180deg,#fff 0%,#e9ecef 40%,#a9b0b8 75%,#d9dde2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
h1 em{font-style:italic;background:linear-gradient(180deg,#ffe08a 0%,var(--oe-gold) 50%,#b8760f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(245,165,36,.45))}
h1::after{content:'';display:block;width:min(340px,60%);height:2px;margin-top:18px;background:linear-gradient(90deg,transparent,var(--oe-gold) 20%,#fff3c4 50%,var(--oe-gold) 80%,transparent);box-shadow:0 0 12px rgba(245,165,36,.8),0 0 28px rgba(245,165,36,.4)}
h2 em,h3 em{color:var(--oe-gold-light)}
.eyebrow{display:inline-block;padding:7px 14px 7px 12px;font-family:var(--oe-mono);letter-spacing:.14em;color:var(--oe-gold-light);background:linear-gradient(90deg,rgba(245,165,36,.18),rgba(245,165,36,.04));clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.eyebrow::before{content:'>_ ';color:var(--oe-orange)}
.eyebrow::after{content:'';display:inline-block;width:.55em;height:1em;margin-left:.35em;vertical-align:-2px;background:var(--oe-gold);animation:oe-blink 1.1s steps(1) infinite}
@keyframes oe-blink{50%{opacity:0}}
.lead,.card p,.section-head>p:last-child:not(.eyebrow){color:#b4bac2}

/* ---------- Hero-beeld als terminalvenster ---------- */
.hero-art{padding-top:36px;border-radius:16px;border:2px solid transparent;background:linear-gradient(135deg,#191b20,#0b0c0f) padding-box,var(--oe-rim) border-box;box-shadow:0 0 30px rgba(245,165,36,.28),0 30px 80px rgba(0,0,0,.55)}
.hero-art::after{content:'operator-elite:~$ ai --train --build --improve';position:absolute;top:0;left:0;right:0;height:36px;padding:0 0 0 82px;display:flex;align-items:center;font:600 11.5px/1 var(--oe-mono);letter-spacing:.04em;color:#8d959e;border-bottom:1px solid rgba(245,165,36,.22);border-radius:14px 14px 0 0;white-space:nowrap;overflow:hidden;
  background:radial-gradient(circle,#f07a1a 0 4.5px,transparent 5px) 18px 50%/12px 12px no-repeat,radial-gradient(circle,#f5a524 0 4.5px,transparent 5px) 36px 50%/12px 12px no-repeat,radial-gradient(circle,#3fd0ff 0 4.5px,transparent 5px) 54px 50%/12px 12px no-repeat,linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.25))}
.hero-art img{border:0;border-radius:0 0 14px 14px;box-shadow:none}
.hero-art-badge{background:#0a0b0e;border-color:rgba(245,165,36,.45);color:var(--oe-gold-light);font-family:var(--oe-mono);letter-spacing:.04em}
.hero-facts .icon{color:var(--oe-cyan)}

/* ---------- Kaarten, iconen, banden ---------- */
.card{border:1px solid transparent;background:linear-gradient(180deg,#15171c,#0f1114) padding-box,var(--oe-rim-soft) border-box}
.card:hover{border-color:transparent;background:linear-gradient(180deg,#191b20,#111316) padding-box,var(--oe-rim) border-box;box-shadow:0 0 22px -6px rgba(245,165,36,.55)}
.icon-box{background:#0a0b0e;border-color:rgba(245,165,36,.45);color:var(--oe-gold);box-shadow:0 0 14px -4px rgba(245,165,36,.5)}
.card-link,.quiet-link{color:var(--oe-gold-light)}
.cta-band,.quote-band{border:1px solid rgba(245,165,36,.4);border-left:3px solid var(--oe-gold);background:radial-gradient(circle at 95% 50%,rgba(245,165,36,.10),transparent 45%),var(--oe-surface)}
.step-number{font-family:var(--oe-mono);color:var(--oe-gold)}

/* ---------- Formulieren ---------- */
input:not([type=checkbox]):not([type=radio]),select,textarea{background:#0b0c0f!important;border-color:var(--oe-edge2)!important;color:#f2f3f5}
input:focus,select:focus,textarea:focus{border-color:var(--oe-gold)!important;box-shadow:0 0 0 3px rgba(245,165,36,.15)}
input[type=checkbox],input[type=radio]{accent-color:var(--oe-gold)}

/* ---------- Voettekst: gebouwd door Operator Elite ---------- */
.site-footer{background:#050506;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(245,165,36,.5),transparent) 1}
.footer-grid h3{font-family:var(--oe-mono);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--oe-gold-light)}
.footer-bottom{flex-wrap:wrap}
.footer-bottom::after{content:'</> Ontworpen en gebouwd door Operator Elite · Python · FastAPI · PostgreSQL · Docker · Hetzner EU';flex-basis:100%;font:600 11px/1.8 var(--oe-mono);letter-spacing:.04em;color:var(--oe-gold);opacity:.75}

@media(prefers-reduced-motion:reduce){.eyebrow::after{animation:none}}
@media(max-width:850px){body{background:radial-gradient(ellipse 70% 55% at 50% 12%,rgba(245,165,36,.08),transparent 70%),url(../img/oe-hex.svg) 0 0/56px 100px repeat,var(--oe-black)}.hero-art::after{font-size:10px}.brand-logo{width:46px;height:46px}}

/* WhatsApp-knop in schildstijl (was oud lichtgoud) */
.oe-wa-float{background:#0a0b0e;border:2px solid transparent;background:linear-gradient(#0d0e11,#0a0b0e) padding-box,var(--oe-rim) border-box;color:#f2f3f5!important;box-shadow:0 0 22px rgba(245,165,36,.35),0 12px 38px rgba(0,0,0,.5)}
.oe-wa-float svg{color:#4cc38a;fill:currentColor}
.oe-wa-float-label small{color:var(--oe-gold-light);opacity:1;font-family:var(--oe-mono);letter-spacing:.04em}
.oe-wa-float:hover{filter:none;box-shadow:0 0 32px rgba(245,165,36,.55),0 12px 38px rgba(0,0,0,.5)}
.oe-wa-footer{color:var(--oe-gold-light)!important}
/* Merknaam in kop iets groter, cursief zoals in het schild */
.brand-word>span:first-child{font-size:15px;letter-spacing:.12em}
a.oe-wa-float{background:linear-gradient(#0d0e11,#0a0b0e) padding-box,var(--oe-rim) border-box!important;border:2px solid transparent!important;color:#f2f3f5!important}
/* Opdrachtregel per onderwerp */
.hero-art:has(img[src*="hero-software"])::after{content:'operator-elite:~$ build --onboarding --kennis --workflow'}
.hero-art:has(img[src*="hero-academy"])::after{content:'ai-academy@operator-elite:~$ prompt --leren --toepassen --toetsen'}
.academy-access-strip-icon{background:transparent!important;border:0!important;padding:0!important}
.academy-access-strip-icon img{width:56px;height:56px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,201,77,.65),0 0 20px rgba(245,165,36,.45)}

/* ---------- Naslagwerken (eigen oe-nb-opmaak) in schildstijl ---------- */
:root{--oe-nb-bg:#07080a;--oe-nb-panel:#111317;--oe-nb-panel2:#16191e;--oe-nb-gold:#f5a524;--oe-nb-gold2:#ffc94d;--oe-nb-text:#e6e8eb;--oe-nb-muted:#a9b0b8;--oe-nb-line:#262a31}
.oe-nb-body{background:
  url(../img/oe-circuit-tr.svg) right -60px top 90px/480px auto no-repeat fixed,
  url(../img/oe-circuit-bl.svg) left -40px bottom 20px/400px auto no-repeat fixed,
  radial-gradient(ellipse 70% 55% at 50% 12%,rgba(245,165,36,.08),transparent 70%),
  url(../img/oe-hex.svg) 0 0/56px 100px repeat fixed,#07080a;color:var(--oe-chrome)}
.oe-nb-header{background:rgba(7,8,10,.92);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(245,165,36,.7) 25%,#ffc94d 50%,rgba(245,165,36,.7) 75%,transparent) 1}
.oe-nb-brand{display:flex;align-items:center;gap:14px;font-style:italic}
.oe-nb-brand small{font-style:normal}
.oe-nb-brand .brand-logo{width:52px;height:52px}
.oe-nb-nav a:hover{color:var(--oe-gold-light)}
.oe-nb-intro{background:transparent;border-bottom:0}
.oe-nb-intro h1 span{background:linear-gradient(180deg,#ffe08a 0%,var(--oe-gold) 50%,#b8760f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(245,165,36,.45))}
.oe-nb-kicker{display:inline-block;padding:7px 14px 7px 12px;font-family:var(--oe-mono);letter-spacing:.14em;color:var(--oe-gold-light);background:linear-gradient(90deg,rgba(245,165,36,.18),rgba(245,165,36,.04));clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.oe-nb-kicker::before{content:'>_ ';color:var(--oe-orange)}
.oe-nb-kicker::after{content:'';display:inline-block;width:.55em;height:1em;margin-left:.35em;vertical-align:-2px;background:var(--oe-gold);animation:oe-blink 1.1s steps(1) infinite}
.oe-nb-pill{background:rgba(245,165,36,.06);border-color:rgba(245,165,36,.4);color:var(--oe-gold-light);font-family:var(--oe-mono);font-size:11.5px;letter-spacing:.04em}
.oe-nb-card{border:1px solid transparent;background:linear-gradient(180deg,#15171c,#0f1114) padding-box,var(--oe-rim-soft) border-box}
.oe-nb-card:hover{background:linear-gradient(180deg,#191b20,#111316) padding-box,var(--oe-rim) border-box;box-shadow:0 0 22px -6px rgba(245,165,36,.55)}
.oe-nb-cover{background:#0a0b0e}
.oe-nb-num{font-family:var(--oe-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oe-blue-light);font-size:11.5px}
.oe-nb-lock{color:var(--oe-gold-light);border-color:rgba(245,165,36,.45)!important;background:rgba(245,165,36,.05)!important}
.oe-nb-btn.oe-nb-primary{background:linear-gradient(180deg,#ffe08a 0%,#ffc94d 30%,#f5a524 60%,#c9861a 100%)!important;border:1px solid #8a5a12!important;color:#0a0a0a!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px rgba(245,165,36,.35)}
.oe-nb-btn.oe-nb-secondary{background:rgba(7,8,10,.7)!important;border:1px solid rgba(245,165,36,.5)!important;color:var(--oe-gold-light)!important}
.oe-nb-note,.oe-nb-next{border-color:rgba(245,165,36,.4)!important;background:var(--oe-surface)!important}
.oe-nb-footer{background:#050506;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(245,165,36,.5),transparent) 1}
.oe-nb-footer::after{content:'</> Ontworpen en gebouwd door Operator Elite · Python · FastAPI · PostgreSQL · Docker · Hetzner EU';display:block;text-align:center;padding:10px 0 18px;font:600 11px/1.8 var(--oe-mono);color:var(--oe-gold);opacity:.75}

/* ==========================================================================
   Alle overige panelen: geen blauwgrijze vlakken meer, één schildstijl.
   (gevonden met een scan van alle website-CSS op blauwgetinte achtergronden)
   ========================================================================== */
.academy-access-strip,.academy-catalogue-strip,.academy-entry-panel,.academy-prep-cta,.bridge-local-tip,.bridge-status-card,
.approach,.spotlight,.step,.course-card,.contact-card,.form-card,.enquiry-aside,.enquiry-fallback,.login-role,.login-support-card,
.oe-course-card,.oe-featured,.oe-materials-band,.oe-availability,.demo-side,.demo-form-panel,.demo-notes .card,.oe-nb-promo{
  border:1px solid transparent!important;border-radius:14px;
  background:radial-gradient(circle at 96% 0,rgba(245,165,36,.08),transparent 45%) padding-box,linear-gradient(180deg,#15171c,#0f1114) padding-box,var(--oe-rim-soft) border-box!important;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
/* Actieblokken (aanmelden, aanvragen, naslagwerken): gouden linkerbalk */
.academy-access-strip,.academy-catalogue-strip,.academy-prep-cta,.academy-entry-panel,.oe-nb-promo{box-shadow:inset 3px 0 0 var(--oe-gold),0 18px 50px rgba(0,0,0,.35)}
.course-illustration,.spotlight-image:after{background:linear-gradient(180deg,#15171c,#0b0c0f)!important}
.chip-line span,.oe-chip-row span{background:rgba(245,165,36,.07)!important;border:1px solid rgba(245,165,36,.35)!important;color:var(--oe-gold-light)!important}
.oe-course-bottom,.enquiry-fieldset legend,.mobile-nav a{border-color:var(--oe-edge)!important}
.mobile-nav{background:#0a0b0e!important}
.login-help{border-color:rgba(245,165,36,.35)!important}
.enquiry-fallback textarea,.demo-backup textarea{background:#0b0c0f!important}
.hero-art-badge{background:#0a0b0e!important}

/* Knoppen: overal dezelfde twee varianten */
.btn-outline,.oe-nb-btn.oe-nb-secondary{background:rgba(7,8,10,.75)!important;border:1px solid rgba(245,165,36,.55)!important;color:var(--oe-gold-light)!important;box-shadow:none}
.btn-outline:hover,.oe-nb-btn.oe-nb-secondary:hover{background:rgba(245,165,36,.10)!important;border-color:var(--oe-gold)!important;box-shadow:0 0 18px -4px rgba(245,165,36,.5)}
.oe-nb-promo a{background:linear-gradient(180deg,#ffe08a 0%,#ffc94d 30%,#f5a524 60%,#c9861a 100%)!important;border:1px solid #8a5a12!important;color:#0a0a0a!important;border-radius:8px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.18),0 0 18px rgba(245,165,36,.35)}
.oe-nb-promo a:hover{background:linear-gradient(180deg,#fff0b8 0%,#ffd76e 30%,#ffb52e 60%,#d9921c 100%)!important}

/* Naslagwerken-promo op AI Academy / AI-opleidingen: zelfde typografie */
.oe-nb-promo{max-width:none!important;margin:36px 0!important;padding:26px 30px!important}
.oe-nb-promo h2{color:#f4f5f6!important;letter-spacing:-.03em}
.oe-nb-promo p{color:#b4bac2!important}
.oe-nb-promo>div>div:first-child{display:inline-block;padding:6px 12px;font:700 11px/1.4 var(--oe-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--oe-gold-light)!important;background:linear-gradient(90deg,rgba(245,165,36,.18),rgba(245,165,36,.04));clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);margin-bottom:8px}
.oe-nb-promo>div>div:first-child::before{content:'>_ ';color:var(--oe-orange)}
/* Naslagwerken-blok uitlijnen met de paginabreedte (staat buiten .container) */
.oe-nb-promo{width:min(calc(100% - 64px),var(--max))!important;margin:36px auto!important;box-sizing:border-box}
@media(max-width:760px){.oe-nb-promo{width:min(calc(100% - 36px),var(--max))!important;padding:22px!important}}
@media(max-width:490px){.oe-nb-promo{width:calc(100% - 32px)!important}}
/* Spotlight-foto (home) weer zichtbaar: alleen zachte overgang aan de rechterkant */
.spotlight-image:after{background:linear-gradient(90deg,transparent 75%,#15171c)!important}