/* ============================================================
   NONIUS 2026 — v4 · modern & clean (huisstijl, shared)
   Single source of truth for header/hero/base styling used by
   index.php, support.php, claim.php, offerte.php and origami.php.
   ============================================================ */
:root{
  --bg:#fbf7ee; --bg-2:#ffffff; --ink:#211c15; --muted:#7c6c54; --card:#ffffff;
  --line:rgba(33,28,21,.14); --line-soft:rgba(33,28,21,.08);
  --goud:#c5841a; --goud-deep:#9c6511; --bruin:#6b4a2a; --bruin-soft:#8a6238;
  --display:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Courier New",monospace;
  --r:14px; --r-lg:22px; --edge:clamp(1.1rem,4vw,3rem); --maxw:1120px;
}
:root[data-theme="light"]{
  --bg:#fbf7ee; --bg-2:#fff; --ink:#211c15; --muted:#7c6c54; --card:#fff;
  --line:rgba(33,28,21,.14); --line-soft:rgba(33,28,21,.08);
  --goud:#c5841a; --goud-deep:#9c6511; --bruin:#6b4a2a; --bruin-soft:#8a6238;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161009; --bg-2:#1e160d; --ink:#f4ead8; --muted:#b0a082; --card:#201810;
    --line:rgba(244,234,216,.15); --line-soft:rgba(244,234,216,.08);
    --goud:#e2a63c; --goud-deep:#f0c368; --bruin:#c99a63; --bruin-soft:#a87c4c;
  }
}
:root[data-theme="dark"]{
  --bg:#161009; --bg-2:#1e160d; --ink:#f4ead8; --muted:#b0a082; --card:#201810;
  --line:rgba(244,234,216,.15); --line-soft:rgba(244,234,216,.08);
  --goud:#e2a63c; --goud-deep:#f0c368; --bruin:#c99a63; --bruin-soft:#a87c4c;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
      font-size:clamp(1rem,.4vw + .94rem,1.1rem); line-height:1.65;
      -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--goud); color:#fff; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.022em; line-height:1.05;
          text-wrap:balance; margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--edge); }
.eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
          font-weight:600; color:var(--goud-deep); display:inline-flex; align-items:center; gap:.55rem; }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--goud); border-radius:2px; }

/* buttons */
.btn{ font-family:var(--display); font-weight:700; font-size:.98rem; cursor:pointer; text-decoration:none;
      display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.35rem; border-radius:999px;
      border:1.5px solid var(--ink); background:var(--ink); color:var(--bg);
      transition:transform .16s, box-shadow .18s, background .16s, color .16s, border-color .16s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -16px rgba(33,28,21,.6); }
.btn.gold{ background:var(--goud); border-color:var(--goud); color:#2a1a06; }
.btn.gold:hover{ box-shadow:0 14px 28px -14px color-mix(in srgb,var(--goud) 70%,transparent); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--ink); background:var(--bg-2); }
.btn:focus-visible{ outline:3px solid var(--goud); outline-offset:3px; }

/* nav */
.nav{ position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 85%,transparent);
      backdrop-filter:blur(10px) saturate(1.2); border-bottom:1px solid var(--line-soft); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px; }
.logo{ display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; }
.logo .bl{ font-family:var(--mono); font-size:.58rem; font-weight:600; letter-spacing:.15em;
           text-transform:uppercase; color:var(--muted); }
.nav nav{ display:flex; align-items:center; gap:.2rem; }
.nav nav a{ display:none; font-weight:600; font-size:.94rem; text-decoration:none; padding:.5rem .8rem;
            border-radius:8px; color:var(--muted); transition:.16s; }
.nav nav a:hover, .nav nav a.on{ color:var(--ink); background:var(--card); }
@media (min-width:760px){ .nav nav a{ display:inline-block; } }

/* Support jumps out: for someone who *needs* it, it must read as a helpline chip,
   not just another menu word. Always visible (also on mobile), gold pill treatment. */
.nav nav a.support-cta{
  display:inline-block;
  color:var(--goud-deep);
  background:color-mix(in srgb,var(--goud) 10%,transparent);
  border:1.5px solid color-mix(in srgb,var(--goud) 55%,transparent);
  padding:.42rem .95rem;
  border-radius:999px;
  font-weight:700;
  margin-left:.35rem;
}
.nav nav a.support-cta:hover,
.nav nav a.support-cta.on{
  background:var(--goud);
  color:#2a1a06;
  border-color:var(--goud);
}
.tbtn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent;
       cursor:pointer; font-size:1rem; color:var(--ink); transition:.16s; margin-left:.4rem; }
.tbtn:hover{ transform:rotate(18deg); border-color:var(--ink); }

/* Bilingual pill — both codes visible, active one filled ink, other muted+clickable.
   Always visible (also on mobile) so the language choice never gets lost. */
.nav nav .lang-switch{ display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--line); border-radius:999px; padding:2px;
  font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em;
  margin-left:.5rem; }
.nav nav .lang-switch > *{
  display:inline-block; padding:.18rem .45rem; border-radius:999px; text-decoration:none;
  color:var(--muted); transition:.14s;
}
.nav nav .lang-switch > a:hover{ color:var(--ink); background:var(--card); }
.nav nav .lang-switch > .on{ background:var(--ink); color:var(--bg); }

/* hero */
.hero{ padding-top:clamp(2.6rem,7vw,5.5rem); padding-bottom:clamp(2.4rem,5vw,4rem); position:relative; }
.hero .grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,4vw,3rem); align-items:end; }
@media (min-width:900px){ .hero .grid{ grid-template-columns:1.5fr .85fr; } }
.hero h1{ font-size:clamp(2.6rem,6.6vw,4.8rem); margin:1.1rem 0 0; max-width:15ch; }
.hero h1 .g{ color:var(--goud-deep); } .hero h1 .b{ color:var(--bruin); }
.hero p.lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); color:var(--muted); max-width:46ch; margin:1.3rem 0 0; }
.hero .cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }

section.blk{ padding-block:clamp(3rem,6.5vw,5.5rem); border-top:1px solid var(--line-soft); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
           margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.sec-head .lhs{ max-width:40ch; }
.sec-head h2{ font-size:clamp(1.9rem,4.5vw,3rem); margin-top:.5rem; }
.sec-head p{ color:var(--muted); margin:.6rem 0 0; }
.sec-head .rhs{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
                color:var(--muted); text-align:right; }

.hero-aside{ border-left:2px solid var(--goud); padding-left:1.2rem; }
.hero-aside .row{ padding:.85rem 0; border-bottom:1px solid var(--line-soft); }
.hero-aside .row:last-child{ border-bottom:none; }
.hero-aside b{ display:block; font-family:var(--display); font-weight:800; font-size:1.35rem; }
.hero-aside span{ font-size:.86rem; color:var(--muted); }

/* werk */
.werk-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:600px){ .werk-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:940px){ .werk-grid{ grid-template-columns:repeat(3,1fr); } }
.werk-card{ text-align:left; font:inherit; color:var(--ink); cursor:pointer; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; display:flex; flex-direction:column;
  gap:.55rem; min-height:210px; position:relative; transition:transform .18s, border-color .18s, box-shadow .22s; }
.werk-card:hover{ transform:translateY(-4px); border-color:var(--goud); box-shadow:0 20px 40px -26px rgba(33,28,21,.55); }
.werk-card:focus-visible{ outline:3px solid var(--goud); outline-offset:3px; }
.werk-card .top{ display:flex; align-items:center; justify-content:space-between; }
.werk-card .num{ font-family:var(--mono); font-size:.7rem; color:var(--muted); letter-spacing:.1em; }
.werk-card .disc{ display:flex; gap:.35rem; }
.pill{ font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
       padding:.24rem .5rem; border-radius:999px; border:1px solid var(--line); }
.pill.v{ color:var(--goud-deep); border-color:color-mix(in srgb,var(--goud) 45%,transparent); }
.pill.c{ color:var(--bruin); border-color:color-mix(in srgb,var(--bruin) 45%,transparent); }
.werk-card h3{ font-size:1.35rem; margin-top:.25rem; }
.werk-card p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }
.werk-card .open{ margin-top:auto; font-weight:700; font-size:.92rem; color:var(--goud-deep);
                  display:inline-flex; align-items:center; gap:.35rem; }
.werk-card .open .arw{ transition:transform .18s; }
.werk-card:hover .open .arw{ transform:translateX(4px); }
.werk-cta{ margin-top:1.5rem; display:flex; justify-content:center; }

/* diensten */
.duo{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:820px){ .duo{ grid-template-columns:1fr 1fr; } }
.panel{ position:relative; padding-top:1.4rem; border-top:3px solid var(--goud); }
.panel.code{ border-top-color:var(--bruin); }
.panel .tag{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
             color:var(--goud-deep); }
.panel.code .tag{ color:var(--bruin); }
.panel h3{ font-size:clamp(1.5rem,3vw,2rem); margin:.5rem 0 1.1rem; }
.svcs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.svcs li{ display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 0; border-bottom:1px solid var(--line-soft); }
.svcs li:last-child{ border-bottom:none; }
.svcs .mk{ flex:none; width:9px; height:9px; border-radius:50%; margin-top:.5rem; background:var(--goud); }
.panel.vorm .mk{ background:var(--pop); }
.panel.code .mk{ background:var(--bruin); }
.svcs b{ font-weight:700; font-size:1.04rem; }
.svcs small{ display:block; color:var(--muted); font-size:.88rem; margin-top:.12rem; }
.rate{ text-align:center; margin-top:1.8rem; font-family:var(--mono); font-size:.78rem; color:var(--muted); }

/* flow */
.flow{ display:grid; grid-template-columns:1fr; gap:1rem; position:relative; }
@media (min-width:560px){ .flow{ grid-template-columns:1fr 1fr; } }
@media (min-width:940px){ .flow{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; padding:1.3rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.step .num{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--display);
            font-weight:800; font-size:1.15rem; color:var(--pop); border:2px solid var(--pop);
            margin-bottom:.8rem; background:color-mix(in srgb,var(--goud) 12%,transparent); }
.step h3{ font-size:1.15rem; margin-bottom:.35rem; }
.step p{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.step code{ font-family:var(--mono); font-size:.7rem; color:var(--bruin); display:block; margin-top:.7rem; }
.over{ margin-top:clamp(1.8rem,4vw,2.8rem); max-width:62ch; font-size:clamp(1.12rem,1.5vw,1.34rem); line-height:1.65; }
.over b{ color:var(--goud-deep); }

/* contact box (homepage #contact section grid) */
.contact{ padding-bottom:clamp(3rem,6vw,5rem); }
.cbox{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--card);
       display:grid; grid-template-columns:1fr; }
@media (min-width:820px){ .cbox{ grid-template-columns:1.4fr .9fr; } }
.cbox .main{ padding:clamp(1.8rem,4vw,3rem); border-bottom:1px solid var(--line); }
@media (min-width:820px){ .cbox .main{ border-bottom:none; border-right:1px solid var(--line); } }
.cbox h2{ font-size:clamp(2rem,5vw,3.4rem); margin:.5rem 0 .5rem; }
.cbox p{ color:var(--muted); max-width:42ch; }
.cbox .cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.cbox .aside{ padding:clamp(1.8rem,4vw,3rem); background:color-mix(in srgb,var(--goud) 8%,var(--card)); }
.cbox .aside dl{ margin:0; font-family:var(--mono); font-size:.8rem; line-height:1.8; }
.cbox .aside dt{ color:var(--goud-deep); text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; margin-top:1rem; }
.cbox .aside dt:first-child{ margin-top:0; }
.cbox .aside dd{ margin:0; color:var(--ink); }
.cbox .aside a{ text-decoration:none; border-bottom:1px solid var(--line); }
.cbox .aside a:hover{ border-color:var(--goud); }

/* modals (homepage case-sheets + brand cabinet) */
.modal{ position:fixed; inset:0; z-index:1000; display:none; }
.modal[aria-hidden="false"]{ display:block; }
.modal .backdrop{ position:absolute; inset:0; background:color-mix(in srgb,var(--ink) 55%,transparent); backdrop-filter:blur(4px); }
.modal .sheet{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
               width:min(840px,calc(100vw - 2rem)); max-height:88vh; overflow:auto; background:var(--bg);
               border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(33,28,21,.6);
               animation:pop .28s cubic-bezier(.2,1,.4,1); }
.modal .sheet::before{ content:""; display:block; height:5px; background:var(--goud); }
@keyframes pop{ from{ opacity:0; transform:translate(-50%,-46%) scale(.97); } }
.sheet-head{ position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between;
             gap:1rem; padding:1.3rem clamp(1.3rem,3vw,2rem) 1rem; background:var(--bg); border-bottom:1px solid var(--line); }
.sheet-head .k{ font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--goud-deep); }
.sheet-head h3{ font-size:clamp(1.5rem,4vw,2.3rem); margin-top:.3rem; }
.x{ flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent;
    color:var(--ink); cursor:pointer; font-size:1rem; transition:.16s; }
.x:hover{ background:var(--goud); border-color:var(--goud); color:#2a1a06; transform:rotate(90deg); }
.sheet-body{ padding:1.3rem clamp(1.3rem,3vw,2rem) 2rem; }
.sheet-body p{ color:var(--muted); max-width:62ch; }
.sheet-body .disc{ display:flex; gap:.4rem; margin-bottom:1rem; }
.facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.facts span{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.04em; padding:.4rem .7rem;
             border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.gnote{ font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-bottom:1.2rem; }
.logo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (min-width:540px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:760px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
.logo-cell{ aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--r); display:grid; place-items:center;
            padding:16%; background:var(--card); transition:.18s; }
.logo-cell:hover{ border-color:var(--goud); transform:translateY(-3px); }
.logo-cell svg{ width:100%; height:100%; }

/* reveal / stagger animations (used on homepage sections) */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.stagger>*{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1); }
.stagger.in>*{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal,.stagger>*{ opacity:1 !important; transform:none !important; transition:none; }
  .werk-card:hover,.step:hover{ transform:none; } .modal .sheet{ animation:none; }
}

footer{ padding-block:1.8rem; border-top:1px solid var(--line-soft); position:relative; }

/* Terug naar boven. Staat in de voet, dus op elke pagina, en hangt daar half
   boven de scheidingslijn — een knop die aan de rand hangt in plaats van in de
   tekst te staan. Het rollen zelf doet scroll-behavior hierboven; wie minder
   beweging wil, springt gewoon. */
.naar-top{
  position:absolute; top:0; right:clamp(1.1rem,4vw,2.4rem); transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem .5rem .8rem; border-radius:999px;
  background:var(--bg); border:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  transition:color .16s ease, border-color .16s ease, transform .16s ease;
}
.naar-top span{ font-size:.9rem; line-height:1; }
.naar-top:hover{ color:var(--goud-deep); border-color:var(--goud); transform:translateY(calc(-50% - 2px)); }
.naar-top:focus-visible{ outline:2px solid var(--goud); outline-offset:3px; }
@media (max-width:520px){ .naar-top{ font-size:.6rem; padding:.45rem .8rem .45rem .65rem; } }
footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem;
              color:var(--muted); font-size:.82rem; }
footer a{ text-decoration:none; font-weight:600; } footer a:hover{ color:var(--ink); }

/* brandfix — inline SVG wordmark palette */
:root,:root[data-theme="light"]{ --wm1:#211c15; --wm2:#6f6f6f; --pop:#db9815; }
@media (prefers-color-scheme:dark){ :root{ --wm1:#f4ead8; --wm2:#b0a082; --pop:#f2ac2e; } }
:root[data-theme="dark"]{ --wm1:#f4ead8; --wm2:#b0a082; --pop:#f2ac2e; }
.logo{ gap:.7rem !important; align-items:center; }
.logo .brandlogo{ height:34px; width:auto; display:block; }
@media (max-width:520px){ .logo .brandlogo{ height:27px; } }
.logo .brandlogo path:not([style]), .logo .brandlogo rect:not([style]){ fill:var(--wm1); }
.logo .bl{ display:none; }
.eyebrow::before{ background:var(--pop); }

/* lavalamp background */
html{ background:var(--bg); }
body{ background:transparent !important; }
:root,:root[data-theme="light"]{ --lava-blend:multiply; --lava-op:.54;
  --lava1:#d68f16; --lava2:#6b4a2a; --lava3:#ef9410; --lava4:#e2a63c; --lava5:#e08a12; }
@media (prefers-color-scheme:dark){ :root{ --lava-blend:screen; --lava-op:.40;
  --lava1:#e9ad3f; --lava2:#8a5a2a; --lava3:#ffb02a; --lava4:#c5841a; --lava5:#ffbf4a; } }
:root[data-theme="dark"]{ --lava-blend:screen; --lava-op:.40;
  --lava1:#e9ad3f; --lava2:#8a5a2a; --lava3:#ffb02a; --lava4:#c5841a; --lava5:#ffbf4a; }
/* Statisch. Was vijf oneindig bewegende blobs met blur + blend-mode: dat is
   fill-rate-werk op elke frame, permanent, op elke pagina die home.css laadt.
   Nu één keer rasteren en klaar. De transform per blob is een bevroren pose uit
   de oude lus, zodat de compositie gespreid blijft i.p.v. iedereen op nul. */
.lavalamp{ position:fixed; inset:-14vh -14vw; z-index:-1; overflow:hidden; pointer-events:none; }
.lavalamp .b{ position:absolute; border-radius:50%; filter:blur(40px);
  opacity:var(--lava-op); mix-blend-mode:var(--lava-blend); }
.lavalamp .b1{ width:50vmax; height:50vmax; left:-6vw; top:2vh;
  background:radial-gradient(circle at 50% 50%, var(--lava1), transparent 66%);
  transform:translate(9vw,-14vh) scale(1.18); }
.lavalamp .b2{ width:44vmax; height:44vmax; right:-6vw; top:-6vh;
  background:radial-gradient(circle at 50% 50%, var(--lava3), transparent 66%);
  transform:translate(-12vw,12vh) scale(1.22); }
.lavalamp .b3{ width:40vmax; height:40vmax; left:18vw; bottom:-10vh;
  background:radial-gradient(circle at 50% 50%, var(--lava2), transparent 68%);
  transform:translate(14vw,-12vh) scale(1.2); }
.lavalamp .b4{ width:36vmax; height:36vmax; right:12vw; bottom:-4vh;
  background:radial-gradient(circle at 50% 50%, var(--lava4), transparent 66%);
  transform:translate(-14vw,-11vh) scale(1.22); }
.lavalamp .b5{ width:30vmax; height:30vmax; left:36vw; top:20vh;
  background:radial-gradient(circle at 50% 50%, var(--lava5), transparent 68%);
  transform:translate(-16vw,12vh) scale(1.28); }

/* form-card treatment on top of v4 (support + claim reuse this) */
.card-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem); }
.form-stack{ display:flex; flex-direction:column; gap:1rem; margin-top:.4rem; }
.form-stack label{ display:flex; flex-direction:column; gap:.4rem; font-weight:600; font-size:.92rem; color:var(--ink); }
.form-stack input, .form-stack textarea, .form-stack select{
  font:inherit; padding:.75rem .9rem; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-2); color:var(--ink); width:100%; }
.form-stack input:focus, .form-stack textarea:focus{ outline:2px solid var(--goud); border-color:var(--goud); }
.form-stack textarea{ resize:vertical; min-height:140px; }
.form-stack .btn{ align-self:flex-start; margin-top:.4rem; }

/* notice + reference-code chip + live countdown pill */
.notice-line{ border-radius:12px; padding:.9rem 1.1rem; font-size:.98rem; margin:1.2rem 0; }
.notice-line.ok{ background:color-mix(in srgb,#b9d9a6 55%,var(--bg-2)); border:1px solid #b9d9a6; color:#2f5d1c; }
.notice-line.err{ background:color-mix(in srgb,#e6b3aa 45%,var(--bg-2)); border:1px solid #e6b3aa; color:#8f231d; }
.refchip{ display:inline-block; font-family:var(--mono); font-size:1.1rem; font-weight:700;
  letter-spacing:.12em; background:color-mix(in srgb,var(--goud) 10%,var(--bg-2));
  border:1px dashed var(--goud); border-radius:12px; padding:.75rem 1.25rem; color:var(--bruin); }
.countdown{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.9rem;
  color:var(--bruin); background:color-mix(in srgb,var(--goud) 14%,var(--bg-2));
  border:1px solid var(--line); border-radius:999px; padding:.35rem .85rem; }
.countdown .dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--pop);
  animation:pulseDot 1.4s infinite; }
@keyframes pulseDot{ 0%,100%{opacity:.4; transform:scale(.85)} 50%{opacity:1; transform:scale(1.1)} }

/* ---- standpunt over AI ------------------------------------------------ */
/* Geen kleine letter onderaan maar een statement middenin: donkere band,
   grote letter, en de laatste regel als klap. */
.manifest{ background:var(--ink); color:var(--bg); border-top:0;
  padding-block:clamp(3rem,7vw,5.5rem); }
.manifest .eyebrow{ color:var(--goud); }
.manifest blockquote{ margin:1.2rem 0 0; max-width:34ch; }
.manifest .mf-kop{ font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.02; margin:0; }
.manifest .mf-body{ margin:1.1rem 0 0; max-width:52ch; line-height:1.7;
  color:color-mix(in srgb, var(--bg) 76%, transparent); font-size:clamp(1rem,1.3vw,1.15rem); }
.manifest .mf-punch{ margin:1.4rem 0 0; max-width:32ch; font-weight:700;
  font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1.35; color:var(--goud); }
.manifest blockquote footer{ margin-top:1.6rem; font-family:var(--mono); font-size:.7rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--bg) 55%, transparent); }