/* RooF — wit, grijs en paars, geïnspireerd op de voorbeeldafbeelding.
   Accentkleur: #714B67. Koppen: Caveat. Logo + lopende tekst: Nunito Sans.
   Alle elementen zijn aanpasbaar in deze CSS, zonder Python of PHP. */
:root {
  --purple:#714b67;
  --purple-hover:#5b3853;
  --purple-soft:#f4edf3;
  --purple-softer:#fbf7fa;
  --ink:#111827;
  --muted:#62636a;
  --grey:#888888;
  --border:#e7e1e6;
  --white:#ffffff;
  --surface:#faf9fa;
  --max:1160px;
}
* { box-sizing:border-box }
html {scroll-behavior:smooth}
body {margin:0;background:var(--white);color:var(--ink);font-family:"Nunito Sans",Arial,sans-serif;line-height:1.58}
a {color:inherit;text-decoration:none}
a,button {outline-offset:4px}
h1,h2,h3,p {margin-top:0}
h1,h2,h3 {line-height:1.16;letter-spacing:-.03em}
p {color:var(--muted)}
.container {max-width:var(--max);padding:0 25px;margin:0 auto}
.skip-link {position:absolute;left:0;top:-100px;background:var(--white);padding:10px;z-index:100}
.skip-link:focus {top:0}

/* Navigatie en het RooF-woordmerk: R en F paars, oo grijs */
.site-header {background:#fff;border-bottom:1px solid #f1eef0;position:sticky;top:0;z-index:10;box-shadow:0 4px 20px rgba(53,34,50,.025)}
.nav-wrap {min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:34px}
.brand {display:inline-flex;align-items:center;gap:12px}
.brand-name {display:flex;flex-direction:column;line-height:1;align-items:flex-start}
.brand-word {font-family:"Nunito Sans",Arial,sans-serif;font-size:40px;font-weight:900;letter-spacing:-.095em;line-height:1;white-space:nowrap}
.brand-accent {color:var(--purple)}
.brand-neutral {color:#8d8d8d}
.brand-descriptor {color:#8e8b8f;font-size:9px;font-weight:850;letter-spacing:.20em;text-transform:uppercase;margin-top:7px;white-space:nowrap}
.navigation {display:flex;gap:35px;color:#34343a;font-size:14px;font-weight:800}
.navigation a:hover,.text-link:hover {color:var(--purple)}
.button {display:inline-flex;align-items:center;justify-content:center;gap:15px;border-radius:9px;padding:15px 24px;font-weight:850;line-height:1.18;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap}
.button:hover {transform:translateY(-2px)}
.button-small {padding:11px 21px;font-size:14px}
.button-outline {border:1px solid #c5adbf;color:var(--purple);background:#fff}
.button-outline:hover {background:var(--purple-softer)}
.button-primary {background:var(--purple);color:#fff;box-shadow:0 10px 22px #714b6726}
.button-primary:hover {background:var(--purple-hover)}
.button-secondary {background:#fff;color:var(--purple);border:1px solid #cdbcca}
.button-secondary:hover {background:var(--purple-softer)}

/* Hero: licht in plaats van donkerblauw, handgeschreven titel zoals voorbeeld */
.hero {background:radial-gradient(circle at 90% 29%,#f0e4ed 0,transparent 32%),linear-gradient(135deg,#fff 0%,#fcf8fb 73%,#f8f0f6 100%);padding:93px 0 105px;overflow:hidden}
.hero-grid {display:grid;grid-template-columns:1.17fr .83fr;gap:66px;align-items:center}
.eyebrow,.section-kicker,.card-overline {letter-spacing:.10em;font-size:11px;font-weight:900}
.eyebrow {color:var(--purple);display:flex;align-items:center;gap:10px}
.live-dot {height:8px;width:8px;background:var(--purple);display:inline-block;border-radius:50%}
.hero h1 {font-family:"Caveat","Segoe Print","Comic Sans MS",sans-serif;font-size:clamp(64px,6.6vw,94px);font-weight:700;letter-spacing:-.034em;line-height:.97;margin:27px 0 28px;max-width:770px;color:var(--ink)}
.hero h1 em {color:var(--purple);font-style:normal}
.hero .lead {font-size:17px;line-height:1.78;color:#4f5058;max-width:580px}
.hero-actions {display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.hero-note {font-size:12px;color:#828087;max-width:570px;margin:20px 0 0}
.hero-visual {position:relative;border:1px solid #e9dce6;border-radius:26px;background:linear-gradient(150deg,#f4e8f0,#fff 80%);padding:35px 28px;box-shadow:0 28px 70px rgba(71,43,64,.10)}
.visual-label {font-size:10px;color:var(--purple);letter-spacing:.17em;font-weight:900;margin:0 0 20px 2px;display:flex;justify-content:space-between}
.visual-label span {font-size:15px;line-height:1}
.visual-company,.visual-person {display:flex;align-items:center;gap:15px;background:#fff;color:var(--ink);border:1px solid #eee8ed;border-radius:14px;padding:17px 14px;box-shadow:0 9px 25px rgba(57,31,51,.045)}
.visual-company strong,.visual-person strong {display:block;font-size:14px;line-height:1.24}
.visual-company span,.visual-person span {font-size:11px;color:#89808a}
.avatar {height:42px;width:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;font-weight:900}
.avatar-company {background:#ece4ea;color:#67405c}
.avatar-expert {background:#eeeaf5;color:#725b8f}
.visual-company .status-pill,.visual-person .status-pill {background:#f2eaf0;color:var(--purple);border-radius:30px;padding:5px 9px;margin-left:auto;white-space:nowrap;font-size:10px;font-weight:850}
.visual-person .status-available {background:#e4f4ea;color:#267953}
.match-rail {height:90px;display:flex;align-items:center;justify-content:center;gap:7px}
.match-rail>span {height:1px;width:35%;background:#c9b2c4}
.match-center {border-radius:50%;height:68px;width:68px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #decbd9;font-size:19px;font-weight:950;letter-spacing:-.11em;box-shadow:0 0 0 7px #714b6710}
.match-center .mark-first,.match-center .mark-last {color:var(--purple)}
.match-center .mark-mid {color:var(--grey)}
.visual-footer {margin-top:25px;color:#655c65;text-align:center;font-size:12px}
.visual-footer span {color:#299268;font-weight:900;margin-right:5px}

/* Inhoud */
.trust-strip {border-top:1px solid #f0e7ee;border-bottom:1px solid #f0e7ee;background:#faf7f9}
.trust-inner {display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding-top:23px;padding-bottom:23px}
.trust-inner>span {font-size:10px;letter-spacing:.16em;color:var(--purple);font-weight:900}
.trust-inner strong {font-size:13px;color:#726b72;font-weight:850}
.section {padding:100px 0}
.section-pale {background:#faf7f9}
.section-header {max-width:730px;margin:0 auto 44px;text-align:center}
.section-header.compact {margin-bottom:38px}
.section-kicker {color:var(--purple)}
.section-header h2 {font-size:clamp(30px,3.1vw,43px);margin:13px 0 16px}
.section-header p {font-size:16px}
.audience-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px}
.audience-card {padding:38px;background:#fff;border:1px solid #e8e1e7;border-radius:19px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 12px 35px rgba(66,42,61,.045)}
.card-icon {background:#f2e8f0;border-radius:12px;width:47px;height:47px;display:grid;place-items:center;color:var(--purple);font-size:25px;margin-bottom:27px}
.card-overline {color:var(--purple)}
.audience-card h3 {font-size:28px;max-width:390px;margin:13px 0 15px}
.audience-card p {font-size:14px;max-width:420px}
.audience-card ul {padding-left:19px;color:#62636a;font-size:14px;line-height:2;margin:7px 0 26px}
.text-link {font-weight:900;font-size:14px;color:var(--purple);margin-top:auto}
.text-link span {margin-left:12px}
.audience-card-dark {background:var(--purple-soft);border-color:#e8d9e5;color:var(--ink)}
.audience-card-dark .card-icon {background:#fff;color:var(--purple)}
.audience-card-dark .card-overline {color:var(--purple)}
.audience-card-dark p,.audience-card-dark ul {color:#62636a}
.audience-card-dark .text-link {color:var(--purple)}
.specialty-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.specialty {background:#fff;border:1px solid #e9e2e8;border-radius:16px;padding:28px 23px;min-height:210px;box-shadow:0 7px 25px #714b6708}
.specialty-number {color:var(--purple);font-weight:900;font-size:12px}
.specialty h3 {font-size:20px;margin:18px 0 10px}
.specialty p {font-size:13px}
.steps-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
.step {border-top:2px solid #e9dce6;padding-top:26px}
.step-no {display:grid;place-items:center;background:var(--purple);color:#fff;width:43px;height:43px;border-radius:50%;font-weight:900}
.step h3 {font-size:21px;margin:20px 0 8px}
.step p {font-size:14px}
.contact-section {background:#714b67;color:#fff;padding:76px 0}
.contact-wrap {display:flex;align-items:center;justify-content:space-between;gap:80px}
.contact-wrap>div:first-child {max-width:640px}
.light-kicker {color:#eddbeb}
.contact-wrap h2 {font-size:clamp(30px,3.4vw,44px);margin:12px 0 18px}
.contact-wrap p {color:#f3e8f0;margin-bottom:0}
.contact-action {display:flex;flex-direction:column;align-items:flex-start;max-width:270px;gap:14px}
.button-white {background:#fff;color:var(--purple)}
.contact-action>span {font-size:11px;color:#e6d4e1}
.site-footer {background:#faf7f9;color:var(--ink);border-top:1px solid #e8e1e7}
.footer-inner {display:flex;gap:20px;align-items:center;justify-content:space-between;min-height:95px}
.footer-logo {font-size:29px;font-weight:950;letter-spacing:-.095em;white-space:nowrap}
.footer-inner>span {font-size:13px;color:#817a81}
.footer-inner small {color:#8e888e}
@media(max-width:960px) {
  .hero-grid {gap:36px}.hero {padding:75px 0}
  .visual-company .status-pill,.visual-person .status-pill {display:none}
  .specialty-grid {grid-template-columns:repeat(2,1fr)}
  .navigation {gap:16px}.contact-wrap {gap:30px}
}
@media(max-width:740px) {
  .container {padding:0 18px}.nav-wrap {min-height:76px}.brand-word {font-size:35px}
  .navigation {display:none}.hero-grid,.audience-grid,.steps-grid {grid-template-columns:1fr}
  .hero {padding:68px 0}.hero h1 {font-size:clamp(65px,12vw,83px)}
  .hero-visual {margin-top:12px}.trust-inner {justify-content:flex-start;gap:14px 24px}
  .section {padding:68px 0}.audience-card {padding:29px}
  .specialty-grid {grid-template-columns:1fr 1fr}
  .contact-wrap {flex-direction:column;align-items:flex-start}
  .footer-inner {padding-top:25px;padding-bottom:25px;flex-wrap:wrap;min-height:0}
  .footer-inner>span {width:100%}
}
@media(max-width:480px) {
  .brand-descriptor {font-size:8px;letter-spacing:.10em}
  .button-small {padding:10px 12px}.hero-actions {flex-direction:column;align-items:stretch}
  .hero-actions .button {white-space:normal}.hero-visual {padding:24px 15px}
  .visual-company,.visual-person {padding:14px 9px;gap:9px}
  .specialty-grid {grid-template-columns:1fr}.audience-card h3 {font-size:25px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

.legal-footer-links{display:flex;flex-wrap:wrap;gap:12px;font-size:13px}.legal-footer-links a{color:#714b67;text-decoration:underline;text-underline-offset:3px}.checkbox-label a{color:#714b67;text-decoration:underline}