/* Gedeelde opmaak voor de beroepspagina's en de Vraagbaak.
   Zelfde donkere opzet als de homepage: krijt op donkergroen, rode pen als accent. */
:root {
  --bg: #05070d;
  --surface: #0c1018;
  --surface-2: #0f1420;
  --ink: #e8e1d4;
  --muted: #b3a994;
  --dim: #7e7667;
  --line: #1b2230;
  --line-2: #28313f;
  --board: #05070d;
  --chalk: #e8e1d4;
  --chalk-dim: #b3a994;
  --accent: #d9a514;
  --accent-deep: #d9a514;
  --accent-soft: rgba(217, 165, 20, .12);
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --pill: 999px;
  color-scheme: dark;
}
* { 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: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }

.band { width: 100%; position: relative; }
.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-block: 88px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 20px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 7, 13, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { padding-block: 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.logo { font-family: var(--display); font-weight: 800; font-size: 1.28rem; letter-spacing: -.045em; text-decoration: none; color: var(--ink); }
.logo span { color: var(--accent); }
.masthead nav { display: flex; align-items: center; gap: 24px; font-size: .9rem; flex-wrap: wrap; }
.masthead nav a { text-decoration: none; color: var(--muted); transition: color .15s ease; }
.masthead nav a:hover { color: var(--ink); }

.head { overflow: hidden; border-bottom: 1px solid var(--line); }
.head::before {
  content: ""; position: absolute; inset: -30% 0 auto; height: 680px; pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 16%, rgba(217, 165, 20, .12), transparent 68%),
    radial-gradient(60% 52% at 14% 50%, rgba(26, 54, 116, .38), transparent 70%),
    radial-gradient(48% 44% at 88% 38%, rgba(32, 70, 104, .30), transparent 72%);
}
.head .wrap { position: relative; padding-block: 92px 84px; text-align: center; }
.head h1 { color: var(--chalk); }
.head .lede { color: var(--muted); margin: 22px auto 0; max-width: 54ch; font-size: 1.12rem; }
.head .actions { justify-content: center; }
.head .meta { color: var(--dim); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-weight: 600; font-size: .94rem;
  border-radius: var(--pill); border: 1px solid var(--accent-deep);
  padding: 13px 24px; text-decoration: none; white-space: nowrap;
  background: var(--accent-deep); color: #05070d;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: #eab62f; transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.meta { margin-top: 24px; font-family: var(--mono); font-size: .76rem; color: var(--dim); }

.taken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 34px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.taak { background: var(--surface); padding: 24px 22px; min-width: 0; }
.taak h3 { margin-bottom: 8px; }
.taak p { color: var(--muted); font-size: .93rem; }
.taak .tijd { font-family: var(--mono); font-size: .71rem; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 11px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  padding: 24px; display: flex; flex-direction: column; min-width: 0;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card .tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.card h3 { margin-top: 11px; }
.card pre {
  font-family: var(--mono); font-size: .77rem; line-height: 1.72; color: var(--muted);
  background: #04060c; border: 1px solid var(--line); border-radius: 11px;
  padding: 16px 17px; margin: 16px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; flex: 1;
}
.copy {
  align-self: flex-start; margin-top: 16px; font-family: var(--body); font-weight: 600; font-size: .84rem;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--pill);
  color: var(--ink); padding: 9px 17px; cursor: pointer; transition: all .15s ease;
}
.copy:hover, .copy[data-done="1"] { border-color: var(--accent); color: var(--accent); }

.note-band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.note-band .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: start; }
.note-band p { color: var(--muted); }
.note-band ul { margin: 16px 0 0; padding-left: 20px; color: var(--muted); display: flex; flex-direction: column; gap: 9px; }
.note-band a { color: var(--accent); }

.offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.price { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 28px 26px; min-width: 0; }
.price.lead { border-color: var(--accent-deep); background: linear-gradient(180deg, rgba(217, 165, 20, .08), transparent 46%), var(--surface); }
.price .amount { font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.04em; margin-top: 14px; font-variant-numeric: tabular-nums; }
.price .per { font-size: .9rem; color: var(--dim); margin-top: 2px; }
.intro { margin-top: 20px; max-width: 64ch; color: var(--muted); font-size: 1.02rem; }

.cta { border-top: 1px solid var(--line); overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: auto 0 -40% 0; height: 600px; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 86%, rgba(217, 165, 20, .14), transparent 70%),
              radial-gradient(60% 60% at 20% 90%, rgba(26, 54, 116, .32), transparent 72%);
}
.cta .wrap { position: relative; text-align: center; padding-block: 104px; }
.cta h2 { color: var(--chalk); }
.cta p { color: var(--muted); margin: 20px auto 0; max-width: 50ch; }
.cta .actions { justify-content: center; }

.verder { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.verder a { font-family: var(--mono); font-size: .78rem; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 9px 15px; color: var(--muted); text-decoration: none; transition: all .15s ease; }
.verder a:hover { border-color: var(--accent); color: var(--accent); }

footer { border-top: 1px solid var(--line); background: var(--surface-2); font-size: .88rem; color: var(--dim); }
footer .wrap { padding-block: 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer .legal { font-family: var(--mono); font-size: .76rem; line-height: 1.9; }
footer a { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 900px) {
  .wrap { padding-block: 64px; }
  .head .wrap { padding-block: 68px 60px; }
  .taken, .cards, .offer { grid-template-columns: 1fr; }
  .note-band .wrap { grid-template-columns: 1fr; gap: 24px; }
  .masthead nav { gap: 15px; font-size: .84rem; }
  .cta .wrap { padding-block: 80px; }
}

.btn-sm { font-size: .86rem; padding: 10px 18px; }
.masthead nav a.btn { color: #05070d; }

/* Logo: het merkteken, het woord met een pennenstreep eronder, en de gouden punt. */
.logo { display: inline-flex; align-items: center; gap: 0; }
.logo .mark { width: 1.14em; height: 1.14em; flex: none; display: block; margin-right: .42em; }
.logo .w { position: relative; }
.logo .w::after {
  content: ""; position: absolute; left: -3%; right: -5%; bottom: -.18em; height: .15em;
  background: var(--accent); pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6C38 4 80 3 118 5.4c26 1.6 51 3 79 .6' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6C38 4 80 3 118 5.4c26 1.6 51 3 79 .6' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.logo .w { color: inherit; }
.logo .d { color: var(--accent); }