/* Donkere stijl (Aqua Gloss-achtig) voor de pagina's die site.css gebruiken: blog, contact.
   Laden NA site.css en VOOR dialog.css. */
:root{
  --bg:#0a0a0a; --surface:#0f0f0f; --surface-sunken:#151515;
  --ink:#ffffff; --ink-soft:#a3a3a3; --ink-faint:#737373;
  --accent:#9d5cff; --accent-strong:#b98aff;
  --accent-tint:rgba(157,92,255,.10); --accent-tint-strong:rgba(157,92,255,.25);
  --line:#1c1c1c; --line-strong:#2a2a2a;
  --shadow:0 20px 50px -24px rgba(0,0,0,.9); --shadow-sm:none;
  --wrap:1180px;
}
html,body{background:#0a0a0a;color:#fff}
body{font-size:16px;line-height:1.6}
::selection{background:#9d5cff;color:#000}

/* typografie */
h1,h2,h3{font-weight:900;letter-spacing:-.045em;line-height:1}
.section-head h2,.section-head h1,.article-hero h1{text-transform:uppercase}
.eyebrow{font-size:11px;letter-spacing:.28em;color:#737373}
.lede{color:#a3a3a3}
.accent-text{color:#9d5cff}

/* nav */
.nav{background:rgba(0,0,0,.82);backdrop-filter:blur(14px);box-shadow:none;border-bottom:1px solid #1c1c1c}
.nav .wrap{height:84px;max-width:1180px}
.nav-links{gap:30px}
.nav-links a.link{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.85}
.nav-links a.link:hover{opacity:1;color:#fff}
.nav-links a.link.active{color:#9d5cff;opacity:1}
.nav-burger{border-color:#2a2a2a;color:#fff}
.nav-mobile{background:rgba(0,0,0,.96);border-top:1px solid #1c1c1c}
.nav-mobile a{color:#fff;border-bottom-color:#1c1c1c;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.nav-mobile a.active{color:#9d5cff}

/* knoppen: witte pil */
.btn{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;border-radius:999px;padding:0 30px;height:52px;justify-content:center;box-shadow:none}
.btn-primary{background:#fff;color:#000;border-color:#fff;box-shadow:none}
.btn-primary:hover{background:#e8e8e8;color:#000;transform:translateY(-2px)}
.btn-outline{background:transparent;color:#fff;border-color:#2a2a2a}
.btn-outline:hover{border-color:#fff;color:#fff}
.btn.small{height:42px;padding:0 22px;font-size:11px}
.btn.full{width:100%}

.crumbs,.crumbs a{color:#737373;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.crumbs a:hover{color:#fff}

/* contact */
.contact-info .item .ic{background:#111;border:1px solid #2a2a2a;color:#fff;border-radius:16px;width:48px;height:48px}
.contact-info .item h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#737373;font-weight:800}
.contact-info .item p{color:#fff;font-size:17px;font-weight:600}
.contact-info a{color:#fff!important}.contact-info a:hover{color:#9d5cff!important}
.contact-form-card{background:#0f0f0f;border:1px solid #1c1c1c;border-radius:28px;box-shadow:none}

/* blog */
.blog-card{background:#0f0f0f;border:1px solid #1c1c1c;border-radius:24px;box-shadow:none}
.blog-card:hover{transform:translateY(-4px);box-shadow:none;border-color:#2a2a2a}
.blog-card .thumb{background:linear-gradient(155deg,rgba(157,92,255,.18),#0a0a0a);color:#fff}
.blog-card .cat{font-size:10.5px;letter-spacing:.22em;color:#9d5cff}
.blog-card h3{text-transform:none;letter-spacing:-.02em;line-height:1.2;font-weight:800}
.blog-card p{color:#a3a3a3}
.blog-card .meta{color:#737373}
.article-hero .cat{font-size:11px;letter-spacing:.24em;color:#9d5cff}
.article-hero h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.045em;line-height:.98}
.article-hero .meta{color:#737373}
.article-body{color:#a3a3a3;font-size:17px}
.article-body h2{color:#fff;text-transform:none;letter-spacing:-.03em;font-weight:900}
.article-body h3{color:#fff}
.article-body b,.article-body strong{color:#fff}
.article-body a{color:#9d5cff}
.article-body blockquote{background:#0f0f0f;border-left:3px solid #9d5cff;color:#fff}
.article-cta{background:#0f0f0f;border:1px solid #1c1c1c;border-radius:28px}
.article-cta h3{text-transform:uppercase;font-size:24px}
.article-cta p{color:#a3a3a3}

/* footer */
footer{background:#000;border-top:1px solid #1c1c1c}
.footer-brand p,.footer-col li,.footer-col a{color:#a3a3a3}
.footer-col a:hover{color:#fff}
.footer-col h4{color:#737373;letter-spacing:.22em;font-size:11px}
.footer-bottom{border-top-color:#1c1c1c;color:#737373}

/* formulieren buiten de dialog (contactpagina) */
.contact-form-card .field label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a3a3a3}
.contact-form-card .field input,.contact-form-card .field select,.contact-form-card .field textarea{background:#000;border:1px solid #2a2a2a;color:#fff;border-radius:14px;padding:13px 15px;color-scheme:dark}
.contact-form-card .field input:focus,.contact-form-card .field select:focus,.contact-form-card .field textarea:focus{outline:none;border-color:#9d5cff}
.contact-form-card .qc-disclaimer{color:#737373}
.contact-form-card .qc-error{color:#ff7a90}