/* ═══════════════════════════════════════════════════════
   CLOSING CLARITY — aanmelden
   Merkboek v1.0. Hier is het merk stil: vertrouwen komt
   uit correctheid, niet uit vormgeving.
   ═══════════════════════════════════════════════════════ */

/* tokens: zie tokens.css */
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 42% at 80% 6%, rgba(255,107,53,.055), transparent 70%),
    radial-gradient(52% 48% at 10% 26%, rgba(43,49,112,.10), transparent 72%);
}
header.nav,main,footer{ position:relative; z-index:1; }
::selection{ background:var(--red); color:#fff; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }

.d2{ font-family:var(--display); font-weight:800; margin:0; text-transform:uppercase; text-wrap:balance;
     font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:.96; letter-spacing:-.028em; font-variation-settings:"wdth" 118,"wght" 800; }
.d3{ font-family:var(--display); font-weight:700; margin:0; text-transform:uppercase;
     font-size:clamp(1.1rem,1.9vw,1.4rem); line-height:1.08; letter-spacing:-.02em; font-variation-settings:"wdth" 112,"wght" 700; }
p{ margin:0; }
strong{ font-weight:600; color:var(--white); }
.lbl{ font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.txt{ color:var(--muted); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ── navigatie ──────────────────────────────────────── */
header.nav{ position:sticky; top:0; z-index:80; background:rgba(8,8,10,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); }
.nav-in{ max-width:76rem; margin:0 auto; padding:.75rem var(--pad); display:flex; align-items:center; gap:1.25rem; }
.mark{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none; }
.mark svg{ width:26px; height:26px; }
.mark .wm{ font-family:var(--display); font-variation-settings:"wdth" 114,"wght" 800; font-size:.75rem; text-transform:uppercase; line-height:1.02; }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:.9rem; }
.back{ font-size:.8125rem; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; transition:color .18s var(--ease-mid); }
.back:hover{ color:var(--white); }
.back .ar{ font-family:var(--mono); }
.lang{ display:flex; border:1px solid var(--line-soft); border-radius:3px; overflow:hidden; flex:none; }
.lang button{ font-family:var(--mono); font-size:.625rem; letter-spacing:.06em; border:0; background:transparent; color:var(--dim); padding:.32rem .55rem; cursor:pointer; transition:background .18s,color .18s; }
.lang button[aria-pressed="true"]{ background:var(--white); color:#08080A; }

/* ── raamwerk ───────────────────────────────────────── */
.shell{ max-width:76rem; margin:0 auto; padding:clamp(2rem,5vw,4rem) var(--pad) 5rem;
        display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
@media (min-width:1000px){ .shell{ grid-template-columns:19rem 1fr; gap:3.5rem; } }

/* ── linkerkolom ────────────────────────────────────── */
.rail{ display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:1000px){ .rail{ position:sticky; top:5.5rem; } }
.rail .intro{ display:flex; flex-direction:column; gap:.75rem; }
.rail .intro .d2{ font-size:clamp(1.6rem,2.6vw,2.15rem); line-height:.93; }
.flow{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-soft); }
.flow .item{ display:grid; grid-template-columns:1.6rem 1fr; gap:.85rem; padding:.95rem 0; border-bottom:1px solid var(--line-soft); }
.flow .item .n{ font-family:var(--mono); font-size:.625rem; color:var(--signal); padding-top:.18rem; }
.flow .item b{ display:block; font-size:.875rem; font-weight:600; color:var(--text); }
.flow .item span{ font-size:.8125rem; color:var(--muted); line-height:1.5; }

/* ── knoppen ────────────────────────────────────────── */
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; padding-top:.25rem; }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.875rem; font-weight:600;
  padding:.8rem 1.3rem; border-radius:3px; border:0; cursor:pointer;
  background:var(--white); color:#08080A; text-decoration:none;
  overflow:hidden; isolation:isolate;
  transition:transform .18s var(--ease-mid), color .18s var(--ease-mid);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--heat-45); transform:translateY(101%); transition:transform .42s var(--ease-in); }
.btn:hover{ color:#fff; transform:translateY(-2px); }
.btn:hover::before{ transform:none; }
.btn.line{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
.btn.line:hover{ color:#fff; }
.btn .ar{ font-family:var(--mono); font-size:.8125rem; }
.actions .side{ margin-left:auto; }


/* ── verfijning ─────────────────────────────────────── */
/* elk vlak vangt licht aan de bovenrand */
.card,.calc,.vid,.track,.tier,.form,.note,.review,.vs{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
input[type=text],input[type=email],input[type=tel],textarea{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* sectiekop loopt uit in een haarlijn */
.sec-top{ align-items:center; }
.sec-top::after{ content:""; flex:1 1 auto; height:1px; background:var(--line-soft); min-width:2rem; }

/* zachte lichtnaad onder de navigatie */
header.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 22%,rgba(255,255,255,.10) 78%,transparent);
}

/* ── gloed onder de knop, bloeit mee met de vulling ──── */
.btn{
  transition:transform .18s var(--ease-mid), color .18s var(--ease-mid), box-shadow .45s var(--ease-in);
  box-shadow:0 0 0 0 rgba(232,64,42,0);
}
.btn:hover,.btn:focus-visible{
  box-shadow:
    0 12px 34px -10px rgba(232,64,42,.60),
    0 0 46px -6px rgba(255,107,53,.34),
    0 0 0 1px rgba(255,107,53,.22);
}
.btn.line{ box-shadow:inset 0 0 0 1px var(--line), 0 0 0 0 rgba(232,64,42,0); }
.btn.line:hover,.btn.line:focus-visible{
  box-shadow:
    inset 0 0 0 1px rgba(255,107,53,.30),
    0 12px 30px -12px rgba(232,64,42,.48),
    0 0 34px -8px rgba(255,107,53,.24);
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn.line{ transition:none; }
}

.done .route{ display:flex; flex-direction:column; gap:.75rem; padding-top:1rem; border-top:1px solid var(--line-soft); width:100%; }
.done .to{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:baseline; }
.done .to b{ font-family:var(--mono); font-size:.8125rem; color:var(--white); font-weight:500; }
.done textarea.copy{
  font-family:var(--mono); font-size:.75rem; line-height:1.65; color:var(--muted);
  background:var(--void); border:1px solid var(--line-soft); border-radius:3px;
  padding:.75rem .85rem; width:100%; min-height:9rem; resize:vertical;
}
.done textarea.copy:focus{ outline:none; border-color:var(--signal); }
.copied{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ok); }

.fail{ padding:clamp(1.75rem,4.5vw,3rem); display:flex; flex-direction:column; gap:1.15rem; align-items:flex-start; }
.fail[hidden]{ display:none; }
.fail .seal{
  width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid rgba(232,64,42,.45);
  display:flex; align-items:center; justify-content:center; background:rgba(232,64,42,.08);
  font-family:var(--mono); color:var(--red); font-size:1.1rem;
}

.devnote{
  display:flex; gap:.7rem; align-items:flex-start;
  border:1px dashed var(--line); border-radius:4px; background:var(--panel); padding:.85rem 1rem;
}
.devnote i{ width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none; margin-top:.5rem; }
.devnote p{ font-family:var(--mono); font-size:.6875rem; line-height:1.7; color:var(--dim); }

footer{ border-top:1px solid var(--line-soft); padding:2rem 0 3rem; }
.foot-in{ max-width:76rem; margin:0 auto; padding:0 var(--pad); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ── op een telefoon eerst het formulier ────────────── */
/* Wie hier komt heeft al besloten. De kop blijft boven zodat
   duidelijk is waar je bent, de uitleg zakt onder het formulier. */
@media (max-width:999px){
  .shell{ display:flex; flex-direction:column; gap:1.75rem; }
  .rail{ display:contents; }
  .rail .intro{ order:1; }
  .shell > div{ order:2; }
  .rail-uitleg{ order:3; max-width:40rem; }
  .flow{ order:4; }
}
@media (min-width:1000px){
  .rail-uitleg{ font-size:.9375rem; }
}