/* =========================================================
   CIAO Assist — gedeeld stylesheet
   ========================================================= */

:root{
  --navy-950:#0b1220;
  --navy-900:#0f172a;
  --navy-800:#16223b;
  --navy-700:#1e293b;
  --slate-600:#475569;
  --slate-500:#64748b;
  --slate-400:#94a3b8;
  --slate-200:#e2e8f0;
  --slate-100:#f1f5f9;
  --slate-50:#f8fafc;
  --white:#ffffff;

  --brand-800:#075985;
  --brand-600:#0284c7;
  --brand-500:#0ea5e9;
  --brand-400:#38bdf8;
  --brand-100:#bae6fd;
  --brand-50:#f0f9ff;

  --accent-600:#ea580c;
  --accent-500:#f28c1e;
  --accent-400:#fb923c;
  --accent-100:#ffe4c7;

  --teal-800:#115e59;
  --teal-600:#0d9488;
  --teal-100:#ccfbf1;
  --amber-800:#92400e;
  --amber-600:#d97706;
  --amber-100:#fef3c7;
  --red-600:#dc2626;
  --red-100:#fee2e2;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 20px 45px rgba(15,23,42,.12);
  --container:1160px;

  /* Twee kleuren die in BEIDE thema's gelijk blijven.
     --on-dark : tekst die altijd op een donker vlak staat (footer, CTA-band).
     --on-accent: tekst op de oranje knop. Zonder deze twee zouden ze
     meeflippen in donkere modus en onleesbaar worden. */
  --on-dark:#ffffff;
  --on-accent:#0f172a;

  /* Rand van invoervelden. Apart token omdat die 3:1 contrast nodig heeft
     (WCAG), terwijl decoratieve kaartranden juist subtiel mogen zijn. */
  --field-border:var(--slate-200);

  /* Paginaachtergrond apart van --white (kaartkleur). In lichte modus zijn
     ze gelijk; in donkere modus moet de pagina donkerder zijn dan de
     kaarten, anders vallen kaarten weg tegen de achtergrond. */
  --page-bg:var(--white);
  /* Doorschijnende headerbalk. */
  --header-bg:rgba(255,255,255,.9);
  /* Vlak dat in beide thema's donker is (footer, CTA-band). */
  --dark-panel:var(--navy-950);
  --dark-panel-2:var(--navy-800);
  --myth-text:#7f1d1d;
}

/* =========================================================
   Donkere modus
   De tokens hierboven heten naar hun kleur (--white, --navy-900) en niet
   naar hun rol. In donkere modus krijgen ze daarom een waarde die niet
   bij hun naam past: --white is hier een donker vlak, --navy-900 is
   lichte tekst. Dat leest vreemd, maar het houdt de rest van dit
   stylesheet ongewijzigd: elk vlak en elke tekst volgt automatisch.
   ========================================================= */
[data-theme="dark"]{
  /* Vlakken, van donker naar minder donker */
  --navy-950:#070d18;   /* diepste vlak */
  --white:#151f36;      /* kaarten, header, panelen */
  --slate-50:#101a2e;   /* rustige secties */
  --slate-100:#1c2740;  /* zachte vullingen */
  --slate-200:#2a3855;  /* randen en scheidingslijnen */

  /* Tekst, van fel naar gedempt */
  --navy-900:#e9eff8;   /* koppen en primaire tekst */
  --navy-800:#dbe4f0;
  --navy-700:#cbd5e1;
  --slate-600:#b6c2d4;  /* lopende tekst */
  --slate-500:#9aa8bd;  /* kleine tekst */
  --slate-400:#94a3b8;

  /* Merkkleuren opgehelderd: de donkere blauwtinten zijn onleesbaar
     op een donkere achtergrond. */
  --brand-800:#7dd3fc;
  --brand-600:#38bdf8;
  --brand-500:#38bdf8;
  --brand-400:#7dd3fc;
  --brand-100:#0c4a6e;
  --brand-50:#0e2438;

  /* Statuskleuren omgekeerd: lichte tekst op een donkere vulling. */
  --teal-800:#5eead4;  --teal-100:#134e4a;
  --amber-800:#fcd34d; --amber-100:#4a2c08;
  --red-600:#f87171;   --red-100:#4c1d1d;

  /* Schaduwen zijn onzichtbaar op donker; dieper en harder maken. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 20px 45px rgba(0,0,0,.55);

  --field-border:#5b74a0;

  /* Pagina donkerder dan de kaarten, zodat kaarten zichtbaar blijven. */
  --page-bg:#0b1220;
  --header-bg:rgba(21,31,54,.9);
  /* De donkere panelen blijven donker, maar iets lichter dan de pagina,
     anders lopen footer en CTA-band naadloos over in de achtergrond. */
  --dark-panel:#1b2643;
  --dark-panel-2:#243154;
  --myth-text:#fca5a5;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--navy-900);
  background:var(--page-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.02em;line-height:1.15;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* Zichtbare focusring voor toetsenbordgebruikers, alleen bij toetsenbordnavigatie
   (niet bij muisklikken) dankzij :focus-visible. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brand-400);
  outline-offset:2px;
  border-radius:4px;
}

/* Skip-to-content link: onzichtbaar tot het via Tab focus krijgt, dan
   bovenaan zichtbaar zodat toetsenbordgebruikers de navigatie kunnen overslaan. */
.skip-link{
  position:absolute;top:-48px;left:12px;z-index:1000;
  background:var(--navy-900);color:var(--on-dark);
  padding:12px 20px;border-radius:var(--radius-sm,8px);
  font-size:14.5px;font-weight:600;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{
  top:12px;
  outline:2px solid var(--brand-400);
  outline-offset:2px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--brand-600);
  background:var(--brand-50);
  border:1px solid var(--brand-100);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
  letter-spacing:.01em;
}
.section{padding:88px 0;}
.section--tight{padding:64px 0;}
.section--muted{background:var(--slate-50);}
.section--dark{background:var(--dark-panel);color:var(--on-dark);}
.section-head{max-width:720px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
h2{font-size:clamp(28px,3.4vw,38px);}
h3{font-size:20px;}
.lede{font-size:18px;color:var(--slate-600);margin-top:14px;}
.section--dark .lede{color:var(--slate-400);}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:13px 26px;
  font-weight:600;
  font-size:15px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent-500);color:var(--on-accent);box-shadow:var(--shadow-md);}
.btn-primary:hover{background:var(--accent-600);}
.btn-blue{background:var(--brand-600);color:var(--on-dark);}
.btn-blue:hover{background:var(--brand-800);}
.btn-secondary{background:var(--white);color:var(--navy-900);border-color:var(--slate-200);}
.btn-secondary:hover{border-color:var(--slate-400);}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.25);}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-block{width:100%;justify-content:center;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--slate-200);
}
.site-header .container{max-width:1320px;
  display:flex;align-items:center;justify-content:space-between;
  min-height:76px;gap:14px;padding-top:12px;padding-bottom:12px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
/* =========================================================
   Logo's — één gedeelde behandeling
   Het logobestand heeft een witte, rechthoekige achtergrond. Zonder
   afronding steken die harde witte hoeken af tegen elke niet-witte
   ondergrond. Alle drie de plaatsen (header, footer, dashboardvoorbeeld)
   krijgen daarom hetzelfde witte vlak met dezelfde afronding.

   Let op: door box-sizing:border-box telt de padding mee in de hoogte,
   dus de opgegeven hoogte is telkens beeld + padding.
   ========================================================= */
.brand img,
.footer-brand img,
.dash-sidebar-logo img{
  width:auto;
  background:var(--on-dark);
  border-radius:12px;
}
.brand img{height:86px;padding:6px 10px;}   /* 74px beeld */
.nav-primary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:8px;column-gap:13px;flex:1;overflow:visible;}
.nav-primary a{
  font-size:16px;font-weight:600;color:var(--slate-700,var(--navy-900));white-space:nowrap;
  padding:4px 0;border-bottom:2px solid transparent;transition:color .15s;
}
.nav-primary a:hover, .nav-primary a.active{color:var(--navy-900);}
.nav-primary a.active{border-color:var(--brand-600);}
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--navy-900);
  padding:4px 0;border-bottom:2px solid transparent;transition:color .15s;
}
.nav-dropdown-toggle:hover{color:var(--navy-900);}
.nav-dropdown-toggle.active{color:var(--brand-600);border-color:var(--brand-600);}
.nav-caret{font-size:11px;line-height:1;transition:transform .15s;color:var(--slate-400);}
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:14px;
  background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-md,12px);
  box-shadow:var(--shadow-md);padding:8px;min-width:230px;flex-direction:column;gap:2px;z-index:60;
}
.nav-dropdown-menu.open{display:flex;}
.nav-dropdown-menu a{
  padding:9px 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--slate-600);
  white-space:nowrap;border-bottom:none;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active{background:var(--brand-50);color:var(--brand-600);}
.header-cta{flex:0 0 auto;display:flex;align-items:center;gap:10px;}
.header-cta .btn{padding:9px 14px;font-size:12.5px;}
.nav-toggle{display:none;background:none;border:1px solid var(--slate-200);border-radius:10px;padding:8px 10px;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--navy-900);position:relative;
}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}

/* Hero */
.hero{padding:72px 0 40px;background:
  radial-gradient(1100px 480px at 85% -10%, var(--brand-50), transparent),
  var(--white);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(32px,4.2vw,48px);}
.hero .lede{font-size:19px;}
/* Tussenzin die de bestaande CIAO-oplossing en CIAO Assist met elkaar verzoent:
   evenveel ruimte boven (t.o.v. de titel) als onder (t.o.v. de volgende alinea),
   zodat ze visueel in het midden tussen beide tekstblokken staat. */
.hero-claim{margin-top:28px;margin-bottom:0;}
/* De uitleg hoort bij de zin erboven, dus die staat er dichter tegenaan
   dan tegen het tekstblok eronder. */
.hero-claim-uitleg{margin-top:10px;margin-bottom:14px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.hero-points{list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:10px;}
.hero-points li{display:flex;gap:10px;align-items:flex-start;color:var(--slate-600);font-size:14.5px;}
.hero-points li::before{
  content:"";width:20px;height:20px;border-radius:6px;flex:0 0 auto;margin-top:1px;
  background-color:var(--brand-50);border:1px solid var(--brand-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}

/* Dashboard mock */
.mock-card{
  background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:26px;
}
.mock-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.mock-card-head .tag{font-size:12px;font-weight:600;color:var(--slate-500);background:var(--slate-100);padding:5px 10px;border-radius:999px;}
.mock-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.mock-stat{background:var(--slate-50);border-radius:var(--radius-sm);padding:14px;text-align:left;}
.mock-stat .num{font-size:22px;font-weight:700;}
.mock-stat .lbl{font-size:12px;color:var(--slate-500);margin-top:2px;}
.mock-list{display:flex;flex-direction:column;gap:10px;}
.mock-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--field-border);border-radius:var(--radius-sm);padding:12px 14px;}
.mock-row .code{font-weight:700;font-size:14px;}
.mock-row .desc{font-size:12.5px;color:var(--slate-500);}
.badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;}
.badge-new{background:var(--brand-100);color:var(--brand-800);}
.badge-progress{background:var(--amber-100);color:var(--amber-800);}
.badge-done{background:var(--teal-100);color:var(--teal-800);}
.badge-attn{background:var(--red-100);color:var(--red-600);}

/* Full dashboard showcase */
.dash-showcase{padding:8px 0 64px;}
.dash-mock{display:grid;grid-template-columns:200px 1fr;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}

.dash-sidebar{background:var(--slate-50);border-right:1px solid var(--slate-200);padding:24px 16px;display:flex;flex-direction:column;}
.dash-sidebar-logo{display:flex;align-items:center;gap:8px;margin-bottom:26px;padding:0 4px;}
.dash-sidebar-logo img{height:46px;padding:5px 8px;}   /* 36px beeld */
.dash-nav{display:flex;flex-direction:column;gap:3px;}
.dash-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13px;font-weight:600;color:var(--slate-500);}
.dash-nav-item svg{flex:0 0 auto;}
.dash-nav-item.active{background:var(--brand-50);color:var(--brand-600);}
.dash-help{margin-top:auto;background:var(--brand-50);border-radius:12px;padding:14px;}
.dash-help strong{display:block;font-size:12.5px;color:var(--navy-900);margin-bottom:3px;}
.dash-help p{font-size:11.5px;color:var(--slate-500);margin:0 0 10px;}
.dash-help-btn{display:block;text-align:center;background:var(--white);border:1px solid var(--brand-100);color:var(--brand-600);border-radius:8px;padding:8px;font-size:12px;font-weight:700;}

.dash-main{padding:26px 28px;min-width:0;}
.dash-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.dash-greeting{font-size:12.5px;font-weight:700;color:var(--brand-600);display:block;margin-bottom:6px;}
.dash-title{font-size:25px;font-weight:800;color:var(--navy-900);margin:0 0 6px;}
.dash-subtitle{font-size:13px;color:var(--slate-500);margin:0;}
/* Het dashboard toont verzonnen cijfers. Nu de datum meeloopt met vandaag
   oogt het als een live scherm, dus staat er expliciet bij dat het een
   voorbeeld is. Bewust ingetogen: het mag het beeld niet domineren. */
.dash-voorbeeld{
  display:inline-block;margin-top:10px;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  /* slate-600 in plaats van slate-500: op 11px haalde die laatste maar
     4,34:1 tegen de vulling, net onder de norm van 4,5:1. */
  color:var(--slate-600);
  background:var(--slate-100);
  border:1px solid var(--slate-200);
  padding:3px 9px;border-radius:999px;
}
.dash-date{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--slate-200);border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--slate-600);white-space:nowrap;}

.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.dash-stat{border:1px solid var(--slate-200);border-radius:14px;padding:16px;}
.dash-stat-label{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--slate-500);text-transform:uppercase;display:block;margin-bottom:12px;}
.dash-stat-body{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dash-stat-num{font-size:24px;font-weight:800;color:var(--brand-600);display:block;line-height:1;}
.dash-stat-num.is-dark{color:var(--navy-900);}
.dash-stat-note{font-size:11.5px;color:var(--slate-500);display:block;margin-top:4px;}
.dash-stat-sub{font-size:11px;color:var(--slate-400);display:block;margin-top:2px;}
.dash-stat-delta{font-size:11.5px;font-weight:700;color:var(--teal-600);display:inline-flex;align-items:center;gap:3px;margin-top:4px;}
.dash-stat-link{display:block;margin-top:12px;font-size:11.5px;font-weight:700;color:var(--brand-600);}

.dash-ring{width:56px;height:56px;border-radius:50%;flex:0 0 auto;position:relative;}
.dash-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--brand-600) calc(var(--pct)*3.6deg), var(--slate-100) 0);}
.dash-ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--white);}

.dash-gauge{width:76px;height:76px;border-radius:50%;flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto;}
.dash-gauge::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--brand-600) calc(var(--pct)*3.6deg), var(--slate-100) 0);}
.dash-gauge::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--white);}
.dash-gauge-value{position:relative;z-index:1;font-size:16px;font-weight:800;color:var(--brand-600);}

.dash-panels{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:18px;align-items:start;}
.dash-panel{border:1px solid var(--slate-200);border-radius:14px;padding:18px;}
.dash-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.dash-panel-head h4{font-size:15px;margin:0;flex:0 0 auto;}
.dash-panel-head .dash-badge-bad{font-size:11px;font-weight:700;color:var(--red-600);background:var(--red-100);padding:3px 9px;border-radius:999px;}
.dash-panel-head .dash-panel-link{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand-600);}

.dash-fc-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--slate-100);}
.dash-fc-row:first-child{border-top:none;}
.dash-fc-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.dash-fc-dot.red{background:var(--red-600);}
.dash-fc-dot.orange{background:var(--accent-500);}
.dash-fc-dot.green{background:var(--teal-600);}
.dash-fc-code{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;border:1px solid currentColor;flex:0 0 auto;}
.dash-fc-code.red{color:var(--red-600);}
.dash-fc-code.orange{color:var(--accent-600);}
.dash-fc-code.green{color:var(--teal-600);}
.dash-fc-info{flex:1;min-width:0;}
.dash-fc-title{font-size:12.5px;font-weight:700;color:var(--navy-900);}
.dash-fc-action{font-size:11px;color:var(--slate-500);margin-top:1px;}
.dash-fc-badge{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;flex:0 0 auto;}
.dash-fc-badge.red{background:var(--red-100);color:var(--red-600);}
.dash-fc-badge.green{background:var(--teal-100);color:var(--teal-600);}
.dash-fc-time{font-size:11px;color:var(--slate-400);flex:0 0 auto;}
.dash-fc-chev{color:var(--slate-300);flex:0 0 auto;}

.dash-donut-wrap{display:flex;align-items:center;gap:16px;margin-top:14px;}
.dash-donut{width:88px;height:88px;border-radius:50%;flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--red-600) 0% 23.08%, var(--accent-500) 23.08% 61.54%, var(--amber-600) 61.54% 76.92%, var(--brand-600) 76.92% 84.62%, var(--slate-200) 84.62% 100%);}
.dash-donut::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--white);}
.dash-donut-total{position:relative;z-index:1;text-align:center;}
.dash-donut-total strong{display:block;font-size:17px;font-weight:800;color:var(--navy-900);}
.dash-donut-total span{font-size:9.5px;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em;}
.dash-legend{display:flex;flex-direction:column;gap:7px;font-size:11.5px;flex:1;}
.dash-legend-row{display:flex;align-items:center;gap:8px;}
.dash-legend-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.dash-legend-code{font-weight:700;color:var(--navy-900);}
.dash-legend-cat{color:var(--slate-500);flex:1;}
.dash-legend-num{font-weight:700;color:var(--navy-900);}
.dash-legend-total{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--navy-900);border-top:1px solid var(--slate-100);padding-top:8px;margin-top:8px;}

.dash-banner{display:flex;align-items:center;gap:18px;background:var(--brand-50);border-radius:14px;padding:20px 24px;}
.dash-banner-icon{width:48px;height:48px;border-radius:12px;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--brand-600);flex:0 0 auto;box-shadow:var(--shadow-sm);}
.dash-banner-text strong{display:block;font-size:14.5px;color:var(--brand-600);margin-bottom:2px;}
.dash-banner-text p{font-size:12.5px;color:var(--slate-600);margin:0;}

.dash-footer-row{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;color:var(--slate-500);font-size:12.5px;padding-top:20px;}
.dash-footer-row span{display:flex;align-items:center;gap:7px;}
.dash-footer-row svg{color:var(--slate-400);flex:0 0 auto;}

@media (max-width:860px){
  .dash-mock{grid-template-columns:1fr;}
  .dash-sidebar{display:none;}
  .dash-stats{grid-template-columns:repeat(2,1fr);}
  .dash-panels{grid-template-columns:1fr;}
}

/* Dashboard shown next to hero text: shrink based on its own column width */
.dash-mock-wrap{container-type:inline-size;position:sticky;top:96px;}
@container (max-width:640px){
  .dash-mock-wrap .dash-mock{grid-template-columns:1fr;}
  .dash-mock-wrap .dash-sidebar{display:none;}
  .dash-mock-wrap .dash-stats{grid-template-columns:repeat(2,1fr);gap:10px;}
  .dash-mock-wrap .dash-panels{grid-template-columns:1fr;}
  .dash-mock-wrap .dash-main{padding:20px;}
}
@container (max-width:420px){
  .dash-mock-wrap .dash-stats{grid-template-columns:1fr;}
}

/* Dashboard entrance + live animations */
.dash-mock{transition:opacity 1.1s ease, transform 1.1s ease;}
.dash-mock.dash-pre{opacity:0;transform:translateY(24px);}
@keyframes dashPulseRed{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35);}50%{box-shadow:0 0 0 5px rgba(220,38,38,0);}}
@keyframes dashPulseOrange{0%,100%{box-shadow:0 0 0 0 rgba(242,140,30,.35);}50%{box-shadow:0 0 0 5px rgba(242,140,30,0);}}
.dash-fc-dot.red{animation:dashPulseRed 1.8s ease-in-out infinite;}
.dash-fc-dot.orange{animation:dashPulseOrange 1.8s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .dash-mock{transition:none;}
  .dash-mock.dash-pre{opacity:1;transform:none;}
  .dash-fc-dot.red, .dash-fc-dot.orange{animation:none;}
}

/* Feature strip */
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:56px;}
.feature-strip .item{display:flex;gap:12px;align-items:flex-start;}
.feature-strip .dot{width:38px;height:38px;border-radius:10px;background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:0 0 auto;}
.feature-strip p{font-size:16px;color:var(--slate-600);}

/* Grid cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.card{
  background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-md);
  padding:26px;box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:8px;}
.card p{color:var(--slate-600);font-size:14.5px;}
.check-list{display:flex;flex-direction:column;gap:14px;}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;}
.check-list li::before{
  content:"";width:20px;height:20px;border-radius:6px;background:var(--brand-50);border:1px solid var(--brand-100);flex:0 0 auto;margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}

/* Quote */
.quote{
  border-left:3px solid var(--brand-600);padding:26px 30px;font-size:20px;font-style:italic;
  color:var(--navy-900);background:var(--brand-50);border-radius:0 var(--radius-md) var(--radius-md) 0;
}

/* Myth vs reality */
.myth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.myth-card{border:1px solid var(--slate-200);border-radius:var(--radius-md);overflow:hidden;background:var(--white);}
.myth-card .myth{padding:18px 20px;background:var(--red-100);color:var(--myth-text);font-size:14.5px;}
.myth-card .myth .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:block;margin-bottom:6px;}
.myth-card .reality{padding:18px 20px;font-size:14.5px;color:var(--slate-600);}
.myth-card .reality .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:block;margin-bottom:6px;color:var(--teal-600);}

/* Flow / steps */
.flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.flow .node{
  background:var(--white);border:1px solid var(--slate-200);border-radius:999px;
  padding:10px 18px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-sm);
}
.flow .node.accent{background:var(--brand-600);color:var(--on-dark);border-color:var(--brand-600);}
.flow .arrow{color:var(--slate-400);font-size:16px;}

.steps{display:flex;flex-direction:column;gap:0;}
.step{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--slate-200);}
.steps .step:first-child{border-top:none;}
.step .num{
  width:44px;height:44px;border-radius:12px;background:var(--navy-950);color:var(--on-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.step h3{margin-bottom:6px;}
.step p{color:var(--slate-600);font-size:14.5px;}

/* Timeline day */
.timeline{display:flex;flex-direction:column;gap:0;}
.timeline .row{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:16px 0;border-top:1px dashed var(--slate-200);}
.timeline .row:first-child{border-top:none;}
.timeline .time{font-weight:700;color:var(--brand-600);font-size:14px;}
.timeline .desc{color:var(--slate-600);font-size:14.5px;}

/* Pills */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;}
.pill{background:var(--slate-100);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--navy-800);}

/* Compare */
/* De kolommen moeten even hoog zijn als het kader. Met align-items:center
   werd elke kolom maar zo hoog als zijn eigen inhoud, waardoor het donkere
   middenblok korter was dan de kolommen ernaast en er een witte band boven
   en onder ontstond. De inhoud van het middenblok wordt nu apart gecentreerd. */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;border:1px solid var(--slate-200);border-radius:var(--radius-lg);overflow:hidden;}
.compare > div{padding:26px;}
.compare .col-left, .compare .col-right{background:var(--white);display:flex;flex-direction:column;justify-content:center;}
.compare .col-mid{background:var(--dark-panel);color:var(--on-dark);text-align:center;display:flex;flex-direction:column;justify-content:center;}
.compare .tag{font-size:12px;color:var(--slate-500);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:8px;}

/* FAQ accordion */
.accordion{border:1px solid var(--slate-200);border-radius:var(--radius-md);overflow:hidden;}
.accordion-item{border-top:1px solid var(--slate-200);}
.accordion-item:first-child{border-top:none;}
.accordion-item button{
  width:100%;text-align:left;background:var(--white);border:none;padding:20px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600;font-size:15.5px;
}
.accordion-item button:hover{background:var(--slate-50);}
.accordion-item .plus{font-size:20px;color:var(--brand-600);transition:transform .2s;flex:0 0 auto;}
.accordion-item[data-open="true"] .plus{transform:rotate(45deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.accordion-panel p{padding:0 22px 20px;color:var(--slate-600);font-size:14.5px;}

/* Error code guide */
.code-search{
  display:flex;gap:10px;background:var(--white);border:1px solid var(--slate-200);border-radius:999px;
  padding:8px;box-shadow:var(--shadow-sm);max-width:480px;
}
.code-search:focus-within{outline:2px solid var(--brand-400);outline-offset:2px;}
.code-search input{border:none;outline:none;padding:10px 14px;flex:1;font-size:14.5px;background:transparent;}
.code-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;}
.code-card{border:1px solid var(--slate-200);border-radius:var(--radius-md);padding:22px;background:var(--white);cursor:pointer;transition:box-shadow .15s, border-color .15s;}
.code-card:hover{box-shadow:var(--shadow-md);border-color:var(--brand-400);}
.code-card .code{font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-weight:700;color:var(--brand-600);font-size:14px;}
.code-card h3{margin:8px 0 6px;font-size:16.5px;}
.code-card p{color:var(--slate-600);font-size:13.5px;}

.code-detail{border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:32px;margin-top:22px;background:var(--white);}
.code-detail .code-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.code-detail .code-head .code{font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-weight:700;color:var(--brand-600);}
.code-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px;}
.code-detail-grid dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--slate-500);margin-bottom:6px;}
.code-detail-grid dd{margin:0;color:var(--navy-900);font-size:14.5px;}
.mini-faq{margin-top:22px;border-top:1px solid var(--slate-200);padding-top:18px;}
.mini-faq .q{font-weight:600;font-size:14.5px;margin-bottom:4px;}
.mini-faq .a{color:var(--slate-600);font-size:14px;margin-bottom:14px;}

/* Knowledge center */
.article-card{border:1px solid var(--slate-200);border-radius:var(--radius-md);padding:24px;background:var(--white);}
.article-card .tag{font-size:12px;font-weight:700;color:var(--brand-600);text-transform:uppercase;letter-spacing:.05em;}
.article-card h3{margin:10px 0;font-size:18px;}
.article-card .status{margin-top:14px;display:inline-block;font-size:12px;color:var(--slate-500);background:var(--slate-100);padding:5px 10px;border-radius:999px;}
.article-card .status--live{color:var(--teal-800);background:var(--teal-100);font-weight:600;}
.category-row{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px;}

/* Pricing */
.price-card{border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:34px;background:var(--white);box-shadow:var(--shadow-sm);}
.price-card .amount{font-size:38px;font-weight:800;margin:12px 0 2px;}
.price-card .amount span{font-size:15px;font-weight:500;color:var(--slate-500);}
.price-card--credits{padding:22px 18px;text-align:center;}
.price-card--credits h3{font-size:16px;margin-top:10px;}
.price-card--credits .amount{font-size:24px;margin:6px 0 0;}
.calc{border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:34px;background:var(--slate-50);margin-top:26px;}
.calc-row{margin-bottom:26px;}
.calc-row label{display:flex;justify-content:space-between;font-weight:600;font-size:14.5px;margin-bottom:10px;}
.calc-row input[type=range]{width:100%;accent-color:var(--brand-600);}
.calc-result{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-md);padding:24px;text-align:center;}
.calc-result .amount{font-size:34px;font-weight:800;color:var(--brand-600);}
.calc-result .note{font-size:12.5px;color:var(--slate-500);margin-top:6px;}

/* Personas */
.persona-card{border:1px solid var(--slate-200);border-radius:var(--radius-md);padding:22px;text-align:center;background:var(--white);}
.persona-card .avatar{width:46px;height:46px;border-radius:50%;background:var(--brand-100);color:var(--brand-600);display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 14px;}

/* Risk cards */
.risk-card{border:1px solid var(--slate-200);border-radius:var(--radius-md);padding:22px;background:var(--white);}
.risk-card h3{margin-bottom:14px;}
.risk-card .row{margin-bottom:10px;}
.risk-card .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--slate-500);}
.risk-card .lbl.pos{color:var(--teal-600);}
.risk-card p{margin-top:3px;}

/* Form */
.form-card{border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:34px;background:var(--white);box-shadow:var(--shadow-sm);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%;border:1px solid var(--field-border);border-radius:var(--radius-sm);padding:12px 14px;
  font-size:14.5px;color:var(--navy-900);background:var(--slate-50);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--brand-400);outline-offset:1px;background:var(--white);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* Toestemmingsvinkje (privacybeleid) */
.consent{margin-bottom:18px;}
.consent label{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--slate-500);cursor:pointer;}
.consent input[type="checkbox"]{
  width:17px;min-width:17px;height:17px;margin:2px 0 0;padding:0;flex:0 0 auto;
  accent-color:var(--brand-600);cursor:pointer;
}
.consent a{color:var(--brand-600);text-decoration:underline;}
.pill-select{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:22px;}
.pill-select button{
  border:1px solid var(--slate-200);background:var(--white);border-radius:var(--radius-sm);padding:14px;
  text-align:left;font-size:13.5px;font-weight:600;
}
.pill-select button[aria-pressed="true"]{border-color:var(--brand-600);background:var(--brand-50);color:var(--brand-600);}

.wizard-steps{display:flex;gap:8px;margin-bottom:30px;}
.wizard-steps .ws{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:var(--slate-400);padding-bottom:10px;border-bottom:3px solid var(--slate-200);}
.wizard-steps .ws.active{color:var(--brand-600);border-color:var(--brand-600);}
.wizard-steps .ws.done{color:var(--teal-600);border-color:var(--teal-600);}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg,var(--dark-panel),var(--dark-panel-2));
  color:var(--on-dark);border-radius:var(--radius-lg);padding:56px;text-align:center;
}
.cta-band h2{color:var(--on-dark);}
.cta-band .lede{color:var(--slate-400);}
.cta-band .hero-actions{justify-content:center;}

/* Footer */
.site-footer{background:var(--dark-panel);color:var(--slate-400);padding:64px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);}
/* Achtergrond, afronding en width:auto komen uit de gedeelde logoregel
   bovenaan; hier alleen de maatvoering voor de footer. */
.footer-brand img{
  height:84px;            /* 64px beeld + 2x10px padding */
  padding:10px 14px;
  margin-bottom:16px;
}
.footer-brand p{font-size:14px;max-width:320px;color:var(--slate-400);}
.footer-brand .social{margin-top:18px;display:inline-block;font-size:13.5px;color:var(--slate-300);border:1px solid rgba(255,255,255,.15);padding:8px 14px;border-radius:999px;}
.footer-col h4{color:var(--on-dark);font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.footer-col li{margin-bottom:10px;font-size:14px;}
.footer-col a:hover{color:var(--on-dark);}
.footer-bottom{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--slate-500);}

/* Utilities */
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}.mt-40{margin-top:40px;}
.text-center{text-align:center;}
.max-w-720{max-width:720px;}
.max-w-620{max-width:620px;margin-left:auto;margin-right:auto;}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .feature-strip{grid-template-columns:repeat(2,1fr);}
  .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-5{grid-template-columns:repeat(3,1fr);}
  .myth-grid{grid-template-columns:1fr;}
  .compare{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .code-detail-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .nav-primary{display:none;}
  .nav-toggle{display:block;}

  /* Uitgeklapt mobiel menu. Kleuren komen uit de themavariabelen, zodat
     het in donkere modus een donkere achtergrond krijgt in plaats van
     een vaste witte — anders staat lichte tekst op wit. */
  .nav-primary.nav-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    gap:16px;
    padding:18px 24px;
    background:var(--white);
    border-bottom:1px solid var(--slate-200, #e2e8f0);
    box-shadow:var(--shadow-md);
    z-index:60;
  }
  .nav-primary.nav-open a{
    color:var(--navy-900);
  }
  .nav-primary.nav-open .nav-dropdown-toggle{
    color:var(--navy-900);
  }
  .nav-dropdown-menu{
    position:static;transform:none;box-shadow:none;border:none;background:none;
    margin-top:6px;margin-left:8px;padding:0;min-width:0;
  }
  .nav-dropdown-menu a{padding:8px 12px;}
  .mock-stats{grid-template-columns:repeat(2,1fr);}
  .grid-3, .grid-4, .grid-2{grid-template-columns:1fr;}
  .grid-5{grid-template-columns:repeat(2,1fr);}
  .section{padding:56px 0;}
  .cta-band{padding:36px 22px;}
}

/* ---------------------------------------------------------
   Mobiele leesbaarheid en rust
   Op een telefoon staat alles onder elkaar. Zonder extra witruimte
   lopen secties visueel in elkaar over en oogt de pagina als één
   lange brok tekst. Deze regels geven de blokken meer lucht en
   maken duidelijker waar een sectie begint en eindigt.
   --------------------------------------------------------- */
@media (max-width:760px){
  /* Meer adem tussen de secties onderling. */
  .section{padding:64px 0;}
  .section--tight{padding:48px 0;}

  /* Kop en inleiding krijgen meer afstand tot de inhoud eronder. */
  .section-head{margin-bottom:32px;}

  /* Iets ruimere regelafstand: leest rustiger op een smal scherm. */
  body{line-height:1.7;}
  .lede{font-size:17px;margin-top:16px;}

  /* Opeenvolgende alinea's plakken niet meer aan elkaar. */
  .lede + .lede{margin-top:20px;}

  /* Kaarten en lijsten uit elkaar trekken. */
  .grid-2, .grid-3, .grid-4, .grid-5{gap:18px;}
  .card{padding:22px;}
  .check-list{gap:16px;}
  .check-list li{font-size:15.5px;}

  /* Pillenrijen ademen mee. */
  .pill-row{gap:10px;}

  /* Stappen krijgen onderlinge ruimte in plaats van één blok. */
  .steps{gap:20px;}

  /* Titels niet te dicht tegen de tekst eronder. */
  h2{margin-bottom:4px;}
}

/* Op de kleinste schermen iets minder sectiehoogte, zodat de pagina
   niet onnodig lang wordt. De zijmarge blijft op 24px. */
@media (max-width:480px){
  .section{padding:56px 0;}
  .card{padding:20px;}
}

/* ---------------------------------------------------------
   Snelstartblok Gratis CIAO Check (alleen mobiel)
   Op desktop staat de actieknop in de header. Op een telefoon is die
   verborgen en komt de eerste knop pas na het dashboard en alle
   uitleg. Dit blok zet de Gratis CIAO Check meteen bovenaan.
   --------------------------------------------------------- */
.hero-quickstart{display:none;}

@media (max-width:980px){
  .hero-quickstart{
    display:block;
    margin-top:26px;
    background:var(--white);
    border:1px solid var(--brand-100);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    padding:22px;
  }
  .hero-quickstart-label{
    display:block;
    font-size:12.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
    color:var(--brand-600);
    margin-bottom:8px;
  }
  .hero-quickstart p{
    font-size:15px;color:var(--slate-600);
    line-height:1.55;margin-bottom:18px;
  }
  .hero-quickstart .btn{margin-bottom:12px;}
  .hero-quickstart-note{
    display:block;
    font-size:13px;color:var(--slate-500);text-align:center;
  }
}

/* ---------------------------------------------------------
   Cookietoestemming
   Weigeren is even prominent als accepteren (geen dark patterns).
   --------------------------------------------------------- */
.cookiebanner{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--white);
  border-top:1px solid var(--slate-200);
  box-shadow:0 -12px 40px rgba(15,23,42,.14);
  padding:20px 0 calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);
  transition:transform .3s ease;
}
.cookiebanner.is-zichtbaar{transform:translateY(0);}
.cookiebanner-inner{
  width:min(1120px,calc(100% - 40px));margin:0 auto;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.cookiebanner-tekst{flex:1 1 420px;min-width:0;}
.cookiebanner-tekst strong{
  display:block;font-size:15px;font-weight:700;color:var(--navy-900);margin-bottom:4px;
}
.cookiebanner-tekst p{
  margin:0;font-size:13.5px;line-height:1.55;color:var(--slate-500);max-width:70ch;
}
.cookiebanner-tekst a{color:var(--brand-600);text-decoration:underline;}
.cookiebanner-acties{
  display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap;
}
.cookiebanner-acties .btn{white-space:nowrap;}

@media (max-width:720px){
  .cookiebanner-inner{gap:16px;}
  .cookiebanner-acties{width:100%;}
  .cookiebanner-acties .btn{flex:1 1 0;text-align:center;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .cookiebanner{transition:none;}
}

/* Cookieoverzicht in het cookiebeleid */
.cookie-tabel{
  width:100%;border-collapse:collapse;margin:16px 0 28px;
  font-size:13.5px;
}
.cookie-tabel th,
.cookie-tabel td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--slate-200);
  vertical-align:top;
}
.cookie-tabel thead th{
  background:var(--slate-50);color:var(--navy-900);font-weight:700;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;
  border-bottom:1px solid var(--slate-200);
}
.cookie-tabel td:first-child{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--navy-800);white-space:nowrap;
}
.cookie-tabel tbody tr:last-child td{border-bottom:none;}

@media (max-width:640px){
  .cookie-tabel{display:block;overflow-x:auto;white-space:nowrap;}
}

/* ---------------------------------------------------------
   Keuzepagina Gratis CIAO Check (start-ciao-check.html)
   --------------------------------------------------------- */
.keuze-opties{align-items:stretch;}
.keuze-optie{display:flex;flex-direction:column;height:100%;}
.keuze-optie h2{font-size:22px;line-height:1.3;margin:10px 0 12px;}
.keuze-optie p{color:var(--slate-600);font-size:15px;line-height:1.6;margin-bottom:12px;}

.keuze-label{
  display:inline-block;align-self:flex-start;
  background:var(--brand-50);color:var(--brand-600);
  border:1px solid var(--brand-100);border-radius:999px;
  padding:4px 12px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.keuze-ideaal{
  color:var(--navy-900)!important;font-weight:600;font-size:14.5px!important;
  border-left:3px solid var(--brand-400);padding-left:12px;margin:16px 0 0;
}
/* Duwt de knop naar de onderkant zodat beide kaarten uitlijnen */
.keuze-actie{margin-top:auto;padding-top:24px;}

/* Tijdelijk uitgeschakelde knop (wachten op platform-URL) */
.btn.is-uitgeschakeld{
  background:var(--slate-200);color:var(--slate-500);
  box-shadow:none;cursor:not-allowed;pointer-events:none;
}
.keuze-binnenkort{
  margin:10px 0 0!important;font-size:13px!important;
  color:var(--slate-500)!important;text-align:center;line-height:1.5;
}

@media (max-width:900px){
  .keuze-optie h2{font-size:20px;}
}

/* ---------------------------------------------------------
   Hero met dashboard ernaast (homepage)

   De kolomverdeling stond eerder als inline style in de HTML.
   Inline stijl wint altijd van een media query, waardoor de
   twee kolommen ook op een telefoon naast elkaar bleven staan
   en het dashboard in een onleesbaar smalle strook werd geperst.
   Daarom staat ze nu hier, zodat ze wél overschreven kan worden.
   --------------------------------------------------------- */
.hero-grid--dash{
  grid-template-columns:1.15fr .9fr;
  column-gap:40px;
  row-gap:0;            /* tekstdelen sluiten op elkaar aan zoals voorheen */
  align-items:start;
}

/* Desktop: alle tekst in de linkerkolom, dashboard rechts over de volle hoogte.
   De tekst staat in twee blokken zodat het dashboard er op mobiel tussen kan. */
.hero-grid--dash > .hero-intro{grid-column:1;grid-row:1;}
.hero-grid--dash > .hero-rest {grid-column:1;grid-row:2;}
.hero-grid--dash > .dash-mock-wrap{grid-column:2;grid-row:1 / span 2;}

/* Beide regels hieronder gelden bewust ALLEEN op desktop: op mobiel staat
   alles onder elkaar en moeten de kenmerken hun bestaande gedrag houden
   (2 kolommen onder 980px, 1 kolom onder 640px). */
@media (min-width:981px){
  /* Rasterkolommen houden zich standaard aan de kleinst mogelijke breedte
     van hun inhoud, waardoor brede inhoud (zoals een rij kenmerken) de
     verdeling kan scheeftrekken. Met min-width:0 blijven de kolommen exact
     1.15fr/.9fr. */
  .hero-grid--dash > *{min-width:0;}

  /* De kenmerken staan in de linkerkolom naast het dashboard: twee kolommen
     van elk twee, in plaats van vier naast elkaar. */
  .hero-rest .feature-strip{
    grid-template-columns:repeat(2,1fr);
    padding-top:40px;
  }
}

@media (max-width:980px){
  /* Eén kolom. Volgorde: kop, dan het dashboard, dan de verdere uitleg.
     Zo ziet de bezoeker meteen waar het over gaat, in plaats van pas
     na ruim twee schermen tekst. */
  .hero-grid--dash{grid-template-columns:1fr;row-gap:28px;}
  .hero-grid--dash > .hero-intro,
  .hero-grid--dash > .hero-rest,
  .hero-grid--dash > .dash-mock-wrap{grid-column:1;grid-row:auto;}
  .hero-grid--dash > .hero-intro{order:1;}
  .hero-grid--dash > .dash-mock-wrap{order:2;}
  .hero-grid--dash > .hero-rest{order:3;}
  /* Meeschuiven heeft alleen zin naast een lange tekstkolom. */
  .dash-mock-wrap{position:static;top:auto;}
}

/* ---------------------------------------------------------
   Dashboard leesbaar op telefoons

   Op een klein scherm bleef er te weinig breedte over: de
   container houdt links en rechts 24px marge, het dashboard zelf
   nog eens 20px binnenmarge, en veel labels stonden op 10 à 11px.
   Hieronder wordt het dashboard breder getrokken en gaan de
   kleinste teksten omhoog naar minstens 12px.
   --------------------------------------------------------- */
@media (max-width:600px){
  /* Breder: deels buiten de containermarge treden. */
  .hero-grid--dash > .dash-mock-wrap{
    margin-left:-16px;
    margin-right:-16px;
  }
  /* Minder binnenmarge = meer ruimte voor de inhoud zelf. */
  .dash-mock .dash-main{padding:16px;}
  .dash-mock .dash-stat{padding:14px;}

  /* Lettergroottes: niets nog onder 12px. */
  .dash-mock .dash-subtitle{font-size:14px;}
  .dash-mock .dash-stat-label{font-size:11.5px;letter-spacing:.04em;margin-bottom:8px;}
  .dash-mock .dash-stat-note{font-size:13px;}
  .dash-mock .dash-stat-sub{font-size:12.5px;}
  .dash-mock .dash-stat-link{font-size:13px;}
  .dash-mock .dash-panel-head h4{font-size:16px;}
  .dash-mock .dash-panel-head .dash-panel-link{font-size:13px;}
  .dash-mock .dash-panel-head .dash-badge-bad{font-size:12px;}
  .dash-mock .dash-fc-code{font-size:12px;}
  .dash-mock .dash-fc-title{font-size:14px;}
  .dash-mock .dash-fc-action{font-size:12.5px;}
  .dash-mock .dash-fc-badge{font-size:12px;}
  .dash-mock .dash-fc-time{font-size:12px;}
  .dash-mock .dash-gauge-value{font-size:18px;}
}

/* ---------------------------------------------------------
   Horizontale scroll op mobiel wegwerken

   In de header stonden logo, de oranje actieknop én de
   hamburger naast elkaar. Samen pasten die niet op een
   telefoonscherm, waardoor élke pagina zijwaarts scrolde.
   De actieknop verdwijnt daarom op klein scherm; de bezoeker
   krijgt hem meteen daaronder in de hero te zien.
   --------------------------------------------------------- */
@media (max-width:760px){
  .header-cta{display:none;}
}

/* ---------------------------------------------------------
   Foutcoderijen in het dashboard laten afbreken

   De badge ("2 werknemers") en het tijdstip mochten niet
   krimpen en niet afbreken. Daardoor werd het paneel breder
   dan het scherm. Op mobiel gaat de omschrijving nu naar een
   eigen regel eronder.
   --------------------------------------------------------- */
@media (max-width:600px){
  .dash-mock .dash-panels{gap:12px;}
  .dash-mock .dash-panel{padding:14px;}
  .dash-mock .dash-panel-head{flex-wrap:wrap;gap:8px;}

  .dash-mock .dash-fc-row{flex-wrap:wrap;gap:8px;}
  .dash-mock .dash-fc-info{flex:1 1 100%;min-width:0;order:3;}
  .dash-mock .dash-fc-title{white-space:normal;}
  .dash-mock .dash-fc-badge{margin-left:auto;}
}

/* Grid- en flexitems mogen standaard niet smaller worden dan hun
   inhoud (min-width:auto). Daardoor duwden lange labels het
   dashboard breder dan het scherm. Expliciet toestaan om te krimpen. */
@media (max-width:600px){
  .dash-mock .dash-panels > *,
  .dash-mock .dash-stats > *,
  .dash-mock .dash-panel{min-width:0;}
  .dash-mock .dash-panel-head h4{flex:1 1 auto;min-width:0;}
  .dash-mock .dash-panel-head .dash-panel-link{margin-left:auto;flex:0 0 auto;}
  .dash-mock .dash-fc-info{overflow-wrap:anywhere;}
}

/* De vier kenmerken onder de hero stonden op een telefoon nog in
   twee kolommen. De langste zin paste daar niet in en duwde de
   pagina breder dan het scherm. Onder elkaar dus. */
@media (max-width:640px){
  .feature-strip{grid-template-columns:1fr;gap:16px;padding-top:40px;}
  .feature-strip .item{min-width:0;}
  .feature-strip p{overflow-wrap:anywhere;}
}

/* Laatste teksten die op een telefoon onder 12px bleven. */
@media (max-width:600px){
  .dash-mock .dash-legend-code,
  .dash-mock .dash-legend-num,
  .dash-mock .dash-legend-cat,
  .dash-mock .dash-stat-label,
  .dash-mock .dash-stat-delta,
  .dash-mock .dash-help,
  .dash-mock .dash-help *{font-size:12.5px;}
  .dash-mock .dash-donut-total,
  .dash-mock .dash-donut-total *{font-size:12px;}
}

/* De foutcodekaarten stonden altijd in drie kolommen, ook op een
   telefoon. Daardoor scrolde de foutcodegids zijwaarts. */
@media (max-width:900px){
  .code-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .code-cards{grid-template-columns:1fr;gap:14px;}
  .code-card{min-width:0;}
  .code-card p, .code-card h3{overflow-wrap:anywhere;}
}

/* Knoppen mogen op een telefoon over twee regels lopen. Met
   white-space:nowrap duwde een lange knoptekst de pagina breder
   dan het scherm. */
@media (max-width:640px){
  .btn{white-space:normal;max-width:100%;text-align:center;justify-content:center;}
  .hero-actions{flex-wrap:wrap;}
}

/* De stappenbalk van het aanvraagformulier paste niet naast elkaar. */
@media (max-width:640px){
  .wizard-steps{flex-wrap:wrap;gap:6px;}
  .wizard-steps .ws{flex:1 1 45%;min-width:0;font-size:12px;overflow-wrap:anywhere;}
}

/* =========================================================
   Schakelaar licht/donker
   Zon- en maanicoon zitten allebei in de knop; per thema is er één
   zichtbaar. Zo hoeft JavaScript alleen data-theme te wisselen.
   ========================================================= */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;
  background:transparent;
  border:1px solid var(--slate-200);
  border-radius:999px;
  color:var(--navy-900);
  transition:background .15s ease, border-color .15s ease;
}
.theme-toggle:hover{background:var(--slate-100);border-color:var(--slate-400);}
.theme-toggle svg{width:19px;height:19px;display:block;}

/* Standaard (licht): toon de maan — klikken maakt het donker. */
.theme-toggle .icon-moon{display:block;}
.theme-toggle .icon-sun{display:none;}
/* In donkere modus omgekeerd. */
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}

/* De knop staat naast de CTA in de header. */
.header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}

/* Op mobiel verdwijnt de CTA-knop uit de header; de schakelaar blijft
   staan naast het hamburgermenu, zodat hij altijd bereikbaar is. */
@media (max-width:760px){
  .header-actions{gap:8px;}
}

/* =========================================================
   Taalwisselaar
   Drie korte taalcodes naast elkaar; de actieve taal krijgt de
   merkkleur, de andere twee blijven neutraal tot je erover hovert.
   ========================================================= */
.lang-switch{display:flex;align-items:center;gap:2px;flex:0 0 auto;}
.lang-switch a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 7px;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--slate-500);border-radius:6px;text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.lang-switch a:hover{background:var(--slate-100);color:var(--navy-900);}
.lang-switch a.active{color:var(--brand-600);background:var(--brand-50);}
@media (max-width:760px){
  .lang-switch a{padding:6px 5px;}
}

/* Kleuren zachtjes laten overvloeien bij het omschakelen, maar niet
   voor wie bewegingsbeperking heeft ingesteld. */
@media (prefers-reduced-motion:no-preference){
  body, .site-header, .card, .site-footer, .cta-band, .section--muted{
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
  }
}

/* Het logo bestaat uit donkere letters en verdwijnt daardoor tegen een
   donkere achtergrond. In de footer stond al een witte achtergrond achter
   het logo; in donkere modus krijgt de header (en het dashboardvoorbeeld)
   dezelfde behandeling. */
/* De witte achtergrond achter het logo staat nu in de gedeelde regel
   bovenaan en geldt in beide thema's; hier is niets meer nodig. */

/* =========================================================
   Kaartvulling (optie C)
   De kaarten hadden dezelfde witte kleur als de pagina eronder, waardoor
   het vlak waar de tekst op staat wegviel. Ze krijgen nu een eigen,
   iets getinte vulling met een bijpassende rand.

   Let op: op de rustige secties (--slate-50) blijft het verschil klein.
   Die secties donkerder maken zou links en kleine tekst onder de
   toegankelijkheidsnorm duwen, dus daar doet de rand het werk.

   Het dashboardvoorbeeld houdt bewust witte panelen: dat beeldt een
   softwarescherm uit en moet er niet uitzien als de rest van de site.
   ========================================================= */
:root{
  --card-bg:#f1f5f9;
  --card-border:#dde4ec;
}
[data-theme="dark"]{
  --card-bg:#1e2a49;
  --card-border:#374766;
}

.card,
.article-card,
.myth-card,
.code-card,
.persona-card{
  background:var(--card-bg);
  border-color:var(--card-border);
}

/* De mythekaart heeft twee gekleurde helften; alleen de onderste helft
   erft de kaartvulling, de bovenste houdt haar eigen rode tint. */
.myth-card .reality{background:var(--card-bg);}

/* Vier korte geruststellingen naast elkaar in plaats van onder elkaar.
   Ze zijn te kort voor een volle regel per stuk; op een smal scherm
   vallen ze vanzelf terug naar meerdere regels. */
.hero-points--rij{
  flex-direction:row;
  flex-wrap:wrap;
  column-gap:26px;
  row-gap:12px;
  margin-top:26px;
}
.hero-points--rij li{font-size:15px;}

/* Actieknop onder de indicatieve calculator. De calculator geeft enkel een
   orde van grootte, dus hier staat de stap die tot een echte prijs leidt. */
.calc-actie{margin-top:22px;text-align:center;}
.calc-actie .btn{width:100%;justify-content:center;}
.calc-actie-note{
  margin-top:10px;font-size:12.5px;color:var(--slate-500);
}

/* =========================================================
   Zelftest "Herkent u deze situaties?"
   De tekst beloofde al dat de bezoeker vakjes kon aanvinken, maar er
   viel niets aan te vinken. Dit maakt die belofte waar.

   Bewust echte <input type="checkbox"> met appearance:none in plaats van
   nagebouwde vakjes: zo blijven toetsenbordbediening, focusring en
   schermlezer vanzelf werken.
   ========================================================= */

/* Verborgen voor het oog, wel leesbaar voor een schermlezer. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:root{--vakje-rand:#7d8b9e;}          /* 3,47:1 op wit */
[data-theme="dark"]{--vakje-rand:#6b83ad;}  /* 4,27:1 op het donkere vakje */

.zelftest{border:none;padding:0;margin:0;min-width:0;}
.zelftest-lijst{list-style:none;display:grid;gap:14px;}
.zelftest-lijst label{
  display:flex;gap:12px;align-items:flex-start;
  font-size:15px;color:var(--slate-600);
  cursor:pointer;
}
.zelftest-lijst input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:0 0 auto;margin:2px 0 0;
  border-radius:6px;
  background:var(--white);
  /* Een leeg vakje is alleen aan zijn rand te herkennen, dus die moet 3:1
     halen. Het algemene --field-border zit op 1,23:1 en volstaat hier niet. */
  border:1.5px solid var(--vakje-rand);
  cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease;
}
.zelftest-lijst input[type=checkbox]:hover{border-color:var(--brand-600);}
.zelftest-lijst input[type=checkbox]:checked{
  background-color:var(--brand-50);
  border-color:var(--brand-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}
/* Aangevinkte regel krijgt iets meer nadruk. */
.zelftest-lijst input[type=checkbox]:checked + span{color:var(--navy-900);font-weight:500;}

.zelftest-uitkomst{
  margin-top:32px;padding:24px 26px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
}
.zelftest-tekst{font-size:16px;color:var(--slate-600);margin:0;}
.zelftest-tekst strong{color:var(--navy-900);}
.zelftest-actie{margin-top:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.zelftest-note{font-size:13px;color:var(--slate-500);}

@media (max-width:760px){
  .zelftest-uitkomst{padding:20px;}
  .zelftest-actie .btn{width:100%;justify-content:center;}
}

/* =========================================================
   Iconen bij kaarten en kenmerken
   Een aantal blokken hadden alleen een cijfer, een losse letter of
   niets als visueel anker. Dezelfde lijnstijl als de rest van de site
   (stroke, currentColor) dus geen nieuw iconenpakket nodig — waar
   passend wordt zelfs hetzelfde icoon hergebruikt (bv. het
   schild-vinkje uit het dashboard voor "geen verplichtingen").
   ========================================================= */

/* "Wat maakt ons anders" — icoon boven de titel van elke kaart. */
.card-icon{
  width:40px;height:40px;border-radius:10px;flex:0 0 auto;
  background:var(--brand-50);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.card-icon svg{width:20px;height:20px;}

/* Persona-kaarten: de letter-avatar wordt een icoon passend bij de rol. */
.persona-card .avatar svg{width:21px;height:21px;}

/* Feature-strip onder de hero: het genummerde bolletje krijgt een icoon
   i.p.v. een cijfer. */
.feature-strip .dot svg{width:18px;height:18px;}

/* Mythe/werkelijkheid: klein icoon naast het label voor snel visueel
   onderscheid, zonder dat de kleur alleen het verschil moet dragen.
   display:flex (niet inline-flex) houdt het label net als voorheen op
   een eigen regel boven de quote — anders lopen label en quote-tekst
   aan elkaar vast op dezelfde regel. */
.myth-card .myth .lbl,
.myth-card .reality .lbl{display:flex;align-items:center;gap:6px;}
.myth-card .lbl svg{width:13px;height:13px;flex:0 0 auto;}

/* "Met CIAO Assist"-stappen (01 t/m 06): dit is een volgorde, geen losse
   trefwoorden zoals de andere pill-rijen op deze pagina. Onder elkaar maakt
   dat meteen duidelijk, in plaats van een rij die willekeurig afbreekt. */
.pill-row--stack{flex-direction:column;align-items:flex-start;}

/* =========================================================
   PREVIEW: robotmascotte in de hero
   Puur decoratief, staat los van de dashboardmockup. .dash-mock-wrap is
   al position:sticky, dus die dient als ankerpunt — geen extra wrapper
   nodig.
   - Standaard (desktop, gematigde breedte): zweeft bij de linkeronderhoek
     van de mockup, tussen tekst en dashboard in.
   - Zeer brede schermen (>=1600px, zoals in het gemarkeerde screenshot):
     verschuift naar de lege marge rechts naast de mockup, verticaal
     gecentreerd t.o.v. de kaart — dat is de plek die is aangeduid met
     het blauwe kruis. De drempel van 1600px garandeert genoeg lege
     ruimte (>=220px) zodat de robot nooit buiten het scherm valt.
   - Smalle schermen (mockup valt terug naar position:static): gewoon in
     de normale doorstroom vlak boven het dashboard, kleiner.
   ========================================================= */
.hero-robot{
  position:absolute;
  z-index:3;
  bottom:40px;
  left:-64px;
  width:clamp(185px,17vw,265px);
  pointer-events:none;
}
.hero-robot-video,
.hero-robot-still{
  display:block;
  width:100%;
  height:auto;
}
.hero-robot-still{display:none;}

/* =========================================================
   Live klokje op het borstdisplay
   De positie is nagemeten op het bronbeeld (744x1140): het cijfervak
   ligt op 42,1% van links, 40,8% van boven, 11,9% breed en 3,3% hoog.
   Het laagje dekt de vaste "15:30" uit de video af met de donkere
   schermkleur en zet daar de echte tijd overheen.
   Lettergrootte in cqw (percentage van de robotbreedte) zodat het
   meeschaalt met de robot; daarvoor is .hero-robot een container.
   ========================================================= */
.hero-robot{container-type:inline-size;}

.hero-robot-screen{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.hero-robot-clock{
  position:absolute;
  left:42.1%;
  top:40.8%;
  width:11.9%;
  height:3.3%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#120605;              /* schermkleur, gemeten op het bronbeeld */
  color:#f6c268;                   /* kleur van de originele cijfers */
  font-family:"Inter",system-ui,sans-serif;
  font-weight:700;
  font-size:4.6cqw;
  line-height:1;
  letter-spacing:-0.04em;
  white-space:nowrap;
  overflow:hidden;
}

/* Sprite-animatie (14 losse PNG-frames naast elkaar in 1 bestand) — enkel
   gebruikt op mobiel, zie media query hieronder. Standaard verborgen. */
.hero-robot-sprite{
  display:none;
  width:100%;
  aspect-ratio:120/184;
}

/* Terugval: browser kan de WebM niet afspelen (bv. Safari) of de video
   faalt om een andere reden — toon dan het stilstaande beeld. */
.hero-robot.no-video .hero-robot-video{display:none;}
.hero-robot.no-video .hero-robot-still{display:block;}

/* Desktop: robot ca. 2cm langer maken, breedte ongewijzigd. Een verticale
   rek (scaleY) i.p.v. de breedte/hoogte te herberekenen — geankerd aan de
   onderkant (transform-origin:bottom) zodat de voeten (en de
   contactschaduw hieronder) exact op dezelfde plek blijven staan; enkel
   de bovenkant/het lichaam wordt hoger. */
@media (min-width:981px){
  .hero-robot-video,
  .hero-robot-still,
  /* Het klokkenlaagje krijgt exact dezelfde rek, anders zou het niet meer
     op het display vallen. */
  .hero-robot-screen{
    transform:scaleY(1.22);
    transform-origin:bottom center;
  }
}

/* =========================================================
   Robot boven het dashboard (enkel desktop)
   Hij staat stil: geen vlammen en geen meebewegen met het scrollen.
   Het dashboard zakt met een bovenmarge zo ver omlaag dat de robot er
   volledig boven past in plaats van de kaart te overlappen.
   ========================================================= */
@media (min-width:981px){
  /* Ruimte vrijmaken boven het dashboard voor de robot. Een marge (en geen
     verschuiving) zodat de ruimte ook echt in de lay-out gereserveerd is en
     er niets kan overlappen. */
  .hero-grid--dash > .dash-mock-wrap{
    margin-top:250px;
  }
  .hero-robot{
    /* Horizontaal gecentreerd t.o.v. het dashboard. */
    left:50%;
    right:auto;
    /* Volledig boven de kaart: bottom:100% zet hem met zijn voeten op de
       bovenrand, ongeacht de hoogte van de robot of van het dashboard. */
    top:auto;
    bottom:100%;
    margin-bottom:-6px;   /* voeten net op de rand i.p.v. erboven te zweven */
    transform:translateX(-50%);
    width:clamp(130px,11vw,180px);
  }
  .hero-robot-video,
  .hero-robot-still{
    position:relative;
    z-index:1;
  }

  /* Contactschaduw onder de voeten, zodat de robot op de bovenrand van het
     dashboard lijkt te staan in plaats van erboven te zweven.
     De zolen liggen op 91% van de beeldhoogte; door de verticale rek
     (scaleY 1,22 vanaf de onderkant) komen ze visueel op ongeveer 11% boven
     de onderrand van het element. De schaduw ligt daar net onder, achter de
     robot. */
  .hero-robot::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:9%;
    transform:translateX(-50%);
    width:46%;
    height:12px;
    background:radial-gradient(ellipse at center,
        rgba(15,23,42,.30) 0%,
        rgba(15,23,42,.14) 45%,
        rgba(15,23,42,0) 72%);
    filter:blur(1.5px);
    z-index:0;
    pointer-events:none;
  }
}

@media (max-width:980px){
  /* Mobiel: robot als decoratief accent bij het introductie-badge.
     Maten in vw, overgenomen uit het aangeleverde ontwerp. Transparante
     WebM wordt niet op elk mobiel toestel correct weergegeven, daarom hier
     een sprite-animatie van losse PNG-frames. */
  .hero-grid--dash{position:relative;}
  .dash-mock-wrap{position:relative;}
  .hero-robot{
    position:absolute;
    left:auto;
    top:clamp(-40px,-9vw,-20px);
    bottom:auto;
    right:4vw;
    margin:0;
    transform:none;
    width:clamp(105px,27vw,165px);
    z-index:4;
  }
  .hero-robot-video{display:none;}
  .hero-robot-sprite{
    display:block;
    background-image:url(robot-sprite-v5.png);
    background-repeat:no-repeat;
    background-position:0% 0%;
    background-size:2400% 100%;
    animation:heroRobotSprite 4.5s steps(23) infinite;
  }
}

/* De volledige sprite-strook doorlopen. Bewust de background-position
   SNELKOPPELING i.p.v. background-position-x: die losse eigenschap wordt
   niet door elke mobiele browser geanimeerd, waardoor de robot stil bleef
   staan. */
@keyframes heroRobotSprite{
  from{background-position:0% 0%;}
  to{background-position:100% 0%;}
}

@media (prefers-reduced-motion:reduce){
  .hero-robot-video{display:none;}
  .hero-robot-sprite{display:none;}
  .hero-robot-still{display:block;}
}

/* Koppen waarvan de zinnen bewust onder elkaar moeten staan (bv. de
   prijzenpagina). Blokweergave i.p.v. een harde regelafbreking, zodat de
   kop één samenhangende zin blijft voor voorleessoftware en zoekmachines. */
.kop-regel{display:block;}