/* Sitebreed palet: gedempt groen, helder blauw en warm oranje op donker antraciet. */
:root {
  --bg: #0d1418;
  --panel: #172126;
  --panel2: #1e2a30;
  --line: #34464d;
  --green: #99c9a2;
  --blue: #95bfde;
  --orange: #e0af7c;
  --white: #f3f5f3;
  --muted: #b8c7c9;
}
body { background: var(--bg); }
header { background: #0d161bea; border-color: var(--line); }
.brand-mark { color: var(--green); border-color: var(--green); }
.brand small { color: var(--blue); }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--blue); }
.navlinks a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 7px; }
.navcta, .button { background: var(--green); border-color: var(--green); color: #12201b; }
.navcta:hover, .button:hover { background: #b1d8b8; }
.button.secondary { border-color: #7d9eaa; color: #e2edf0; }
.button.secondary:hover { border-color: var(--blue); color: var(--blue); background: #1a2c36; }
.eyebrow { color: var(--orange); letter-spacing: .14em; }
.hero {
  padding: 76px 0 82px;
  background: radial-gradient(circle at 80% 30%, #263f49 0, transparent 42%),
              radial-gradient(circle at 15% 86%, #21372d 0, transparent 37%), #0f191d;
}
.hero h1 { max-width: 810px; }
.hero h1 em { color: var(--blue); }
.hero .lead { color: #d0dddc; }
.visual {
  background: linear-gradient(140deg, #1c3033, #152229);
  border-color: #597b82; box-shadow: 0 20px 60px #0006;
}
.visual-head, .signal { border-color: #4b6367; }
.visual-head .chip { border-color: #789b8b; color: var(--green); }
.signal span { background: linear-gradient(#a9d5ab,#6d9e84); }
.signal span:nth-child(3n+2) { background: linear-gradient(#a6d1ed,#6d9fbf); }
.signal span:nth-child(5n) { background: linear-gradient(#efc18e,#bd8d62); }
.metric strong { color: var(--white); }
.metric:nth-child(2) strong { color: var(--blue); }
.metric:nth-child(3) strong { color: var(--orange); }
.section { padding: 77px 0; border-top: 1px solid #24343a; }
.section.alt { background: #121e23; }
.section h2 { font-size: clamp(1.9rem,3.2vw,3.05rem); }
.section-head { max-width: 800px; margin-bottom: 30px; }
.section-head p, .intro { color: #c4d1d0; }
.cards { gap: 16px; }
.card {
  min-height: 0; padding: 25px; background: var(--panel);
  border-color: var(--line); border-top: 3px solid var(--green);
}
.card:nth-child(3n+2) { border-top-color: var(--blue); }
.card:nth-child(3n+3) { border-top-color: var(--orange); }
.card h3 { margin-top: 16px; }
.card p { color: #bfcdcc; }
.card .icon { color: var(--green); }
.card:nth-child(3n+2) .icon { color: var(--blue); }
.card:nth-child(3n+3) .icon { color: var(--orange); }
.split { gap: clamp(30px,5vw,62px); }
.steps { border-color: var(--line); }
.step { padding: 19px 0; border-color: var(--line); }
.step b { color: var(--green); }
.step:nth-child(3n+2) b { color: var(--blue); }
.step:nth-child(3n+3) b { color: var(--orange); }
.step p { color: #bfcdcc; }
.feature article { background: #162329; border-color: var(--line); border-top: 3px solid var(--blue); }
.feature article:nth-child(even) { border-top-color: var(--orange); }
.feature p { color: #c1cece; }
.feature a, .textlink { color: var(--blue); }
.support {
  padding: 32px 37px; border-color: #617d85;
  background: linear-gradient(120deg,#1b343c,#192a31 70%);
}
#verkoop .support { border-color: #8e7562; background: linear-gradient(120deg,#3a3029,#24282b 75%); }
#support .support { border-color: #63846b; background: linear-gradient(120deg,#20372c,#1c2929 75%); }
.support p { color: #d1dddc; }
.formbox { background: #19252a; border-color: var(--line); gap: 32px; }
.field input, .field select, .field textarea { background: #101b20; border-color: #57707a; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #95bfde30; }
.pagehero {
  padding: 62px 0 50px;
  background: radial-gradient(circle at 82% 4%,#27434c,transparent 43%),
              radial-gradient(circle at 8% 96%,#312b25,transparent 38%), #101b20;
  border-bottom: 1px solid var(--line);
}
.pagehero h1 { font-size: clamp(2.3rem,4.4vw,4.15rem); }
.pagehero p:last-child { color: #d2dedd; }
.prose { max-width: 820px; }
.prose p { color: #cbd6d4; }
.callout { background: #1b2b31; border-left-color: var(--blue); color: #dce6e6; }
.pagecards .card { min-height: 0; }
.section.slim { padding: 56px 0; }
.lastcta { background: #1a2a2e; border-color: var(--line); }
.site-menu summary { border-color: #638089; }
.site-menu summary:hover, .site-menu[open] summary { border-color: var(--blue); color: var(--blue); }
.site-menu nav { background: #19282e; border-color: #54707a; }
.site-menu nav a:hover, .site-menu nav a:focus, .site-menu nav a[aria-current="page"] { background: #28434d; color: var(--blue); }
footer { background: #0d171b; border-color: var(--line); }
.footer-grid a { color: #c9dce6; }
.footer-grid a:hover { color: var(--orange); }
.footer-grid strong { color: var(--white); }
.footer-bottom { border-color: var(--line); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 1100px) {
  .hero { padding: 65px 0; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .section.slim { padding: 45px 0; }
  .pagehero { padding: 44px 0 40px; }
  .support { padding: 26px; }
  .cards, .pagecards { grid-template-columns: 1fr; }
  .footer-grid { gap: 27px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }