:root{
  /* LIGHT (standaard) */
  --bg:#faf8f5; --bg-deep:#f3eef8; --ink:#1c1230; --dim:rgba(28,18,48,.64);
  --accent:#6b4fa3; --accent-dim:rgba(107,79,163,.45); --line:rgba(107,79,163,.2);
  --err:#a3324f; --glow1:rgba(185,163,227,.38); --glow2:rgba(214,200,240,.22);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
/* DARK: expliciete keuze */
:root[data-theme="dark"]{
  --bg:#150e22; --bg-deep:#100a1a; --ink:#ece6da; --dim:rgba(236,230,218,.5);
  --accent:#b9a3e3; --accent-dim:rgba(185,163,227,.35); --line:rgba(185,163,227,.16);
  --err:#e3a3b4; --glow1:rgba(126,86,196,.24); --glow2:rgba(90,56,150,.10);
  color-scheme:dark;
}
/* DARK: systeemvoorkeur zonder JavaScript/keuze */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
  --bg:#150e22; --bg-deep:#100a1a; --ink:#ece6da; --dim:rgba(236,230,218,.5);
  --accent:#b9a3e3; --accent-dim:rgba(185,163,227,.35); --line:rgba(185,163,227,.16);
  --err:#e3a3b4; --glow1:rgba(126,86,196,.24); --glow2:rgba(90,56,150,.10);
  color-scheme:dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);background-color:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
::selection{background:var(--accent);color:var(--bg)}
a{color:inherit;text-decoration:none}

.glow{position:absolute;top:0;left:0;right:0;height:130vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 65% 55% at 50% 22%,var(--glow1) 0%,var(--glow2) 45%,transparent 75%)}
.top,main,.foot{position:relative;z-index:1}

.top{display:flex;justify-content:center;padding:56px 24px 0}
.mono{width:46px;height:46px;overflow:visible}
.mono rect{fill:none;stroke:var(--accent);stroke-width:.75;vector-effect:non-scaling-stroke}
.mono rect:first-child{opacity:.35}
.mono text{fill:var(--ink);font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:1.5px}

main{flex:1}

.hero{min-height:calc(100vh - 102px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px 8vh}
.wordmark{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,6rem);letter-spacing:.32em;margin-right:-.32em;line-height:1;white-space:nowrap}
.rule{display:block;width:56px;height:1px;background:var(--accent-dim);margin:48px 0 40px}
.sub{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-right:-.34em}

.statement{padding:22vh 24px;text-align:center;border-top:1px solid var(--line)}
.statement p{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.45;letter-spacing:.01em}

.correspondence{padding:18vh 24px 20vh;text-align:center;border-top:1px solid var(--line)}
.label{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-right:-.34em;margin-bottom:22px}
.intro{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.5rem);color:var(--ink);margin-bottom:64px}

/* FORM */
.form{max-width:640px;margin:0 auto;text-align:left}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.field{margin-bottom:38px}
.field label{display:block;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;transition:color .4s ease}
.field label .opt{letter-spacing:.12em;text-transform:none;opacity:.7}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--serif);font-size:1.25rem;font-weight:400;padding:6px 0 10px;border-radius:0;outline:none;transition:border-color .4s ease;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input:focus,.field textarea:focus{border-bottom-color:var(--accent)}
.field:focus-within label{color:var(--accent)}
.field.invalid input,.field.invalid textarea{border-bottom-color:var(--err)}
.field.invalid label{color:var(--err)}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--bg) inset;caret-color:var(--ink)}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:8px}
.btn{position:relative;overflow:hidden;background:transparent;border:1px solid var(--accent-dim);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;padding:18px 44px 18px 48px;transition:border-color .5s ease,color .5s ease}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.btn span{position:relative}
.btn:hover,.btn:focus-visible{border-color:var(--accent);color:var(--bg);outline:none}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn[disabled]{opacity:.5;cursor:default}
.status{font-family:var(--serif);font-size:1.1rem;min-height:1.4em;flex:1 1 220px}
.status.ok{color:var(--accent)}
.status.err{color:var(--err)}
.form.sent .field,.form.sent .btn{display:none}
.form.sent .status{font-size:clamp(1.3rem,2.2vw,1.6rem);text-align:center;flex-basis:100%}

.notice{display:none;max-width:640px;margin:0 auto 48px;font-family:var(--serif);font-size:1.3rem}
.notice.ok{color:var(--accent)}.notice.err{color:var(--err)}
.notice:target{display:block}

.direct{margin-top:80px;font-size:.72rem;letter-spacing:.14em;color:var(--dim)}
.mail{color:var(--ink);padding-bottom:3px;background:linear-gradient(var(--accent),var(--accent)) no-repeat left bottom/0 1px;transition:background-size .8s ease}
.mail:hover,.mail:focus-visible{background-size:100% 1px;outline:none}

.foot{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding:34px 24px 40px;
  border-top:1px solid var(--line);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.sep{width:3px;height:3px;border-radius:50%;background:var(--accent-dim)}

.js .fade{opacity:0;transition:opacity 1.8s ease}
.js .fade.in{opacity:1}

@media (max-width:600px){
  .top{padding-top:40px}
  .mono{width:40px;height:40px}
  .hero{min-height:calc(100vh - 80px);padding-bottom:10vh}
  .wordmark{letter-spacing:.22em;margin-right:-.22em;font-size:clamp(2.1rem,10vw,2.8rem)}
  .rule{margin:36px 0 30px}
  .sub{font-size:.64rem;letter-spacing:.28em;margin-right:-.28em}
  .statement{padding:16vh 28px}
  .correspondence{padding:14vh 28px 14vh}
  .intro{margin-bottom:48px}
  .row.two{grid-template-columns:1fr}
  .btn{width:100%}
  .status{text-align:center}
  .direct{margin-top:60px;line-height:2}
  .foot{flex-direction:column;gap:10px}
  .sep{display:none}
}
@media (prefers-reduced-motion:reduce){.js .fade{opacity:1;transition:none}html{scroll-behavior:auto}}

/* THEMA-WISSEL */
.theme-ready body,.theme-ready .glow,.theme-ready .field input,.theme-ready .field textarea,.theme-ready .foot,
.theme-ready .statement,.theme-ready .correspondence,.theme-ready .mono rect,.theme-ready .mono text{
  transition:background-color .6s ease,color .6s ease,border-color .6s ease,fill .6s ease,stroke .6s ease,background .6s ease}
.toggle{position:fixed;top:28px;right:28px;z-index:20;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--accent);cursor:pointer;
  transition:border-color .4s ease,color .4s ease,background-color .4s ease}
.toggle:hover{border-color:var(--accent-dim)}
.toggle:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}
.toggle .sun{display:none}
:root[data-theme="dark"] .toggle .sun{display:block}
:root[data-theme="dark"] .toggle .moon{display:none}
@media (max-width:600px){.toggle{top:18px;right:18px;width:38px;height:38px}}