/* ============================================================
   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); }
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; }
.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); will-change:transform; }
.lavalamp .b1{ width:50vmax; height:50vmax; left:-6vw; top:2vh;
  background:radial-gradient(circle at 50% 50%, var(--lava1), transparent 66%); animation:lavaA 15s ease-in-out infinite; }
.lavalamp .b2{ width:44vmax; height:44vmax; right:-6vw; top:-6vh;
  background:radial-gradient(circle at 50% 50%, var(--lava3), transparent 66%); animation:lavaB 19s ease-in-out infinite; }
.lavalamp .b3{ width:40vmax; height:40vmax; left:18vw; bottom:-10vh;
  background:radial-gradient(circle at 50% 50%, var(--lava2), transparent 68%); animation:lavaC 17s ease-in-out infinite; }
.lavalamp .b4{ width:36vmax; height:36vmax; right:12vw; bottom:-4vh;
  background:radial-gradient(circle at 50% 50%, var(--lava4), transparent 66%); animation:lavaD 22s ease-in-out infinite; }
.lavalamp .b5{ width:30vmax; height:30vmax; left:36vw; top:20vh;
  background:radial-gradient(circle at 50% 50%, var(--lava5), transparent 68%); animation:lavaE 13s ease-in-out infinite; }
@keyframes lavaA{ 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(18vw,-14vh) scale(1.28)} 50%{transform:translate(9vw,-34vh) scale(1.08)} 75%{transform:translate(-14vw,-16vh) scale(1.36)} 100%{transform:translate(0,0) scale(1)} }
@keyframes lavaB{ 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(-18vw,16vh) scale(1.34)} 50%{transform:translate(-7vw,34vh) scale(1.1)} 75%{transform:translate(14vw,14vh) scale(1.26)} 100%{transform:translate(0,0) scale(1)} }
@keyframes lavaC{ 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(21vw,-18vh) scale(1.22)} 66%{transform:translate(-16vw,-9vh) scale(1.38)} 100%{transform:translate(0,0) scale(1)} }
@keyframes lavaD{ 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(-21vw,-16vh) scale(1.32)} 66%{transform:translate(12vw,-25vh) scale(1.12)} 100%{transform:translate(0,0) scale(1)} }
@keyframes lavaE{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-23vw,18vh) scale(1.4)} 100%{transform:translate(0,0) scale(1)} }
@media (prefers-reduced-motion:reduce){ .lavalamp .b{ animation-duration:90s; } }

/* 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)} }