/* =======================================================
   MutatieVizier - web huisstijl v1.0
   Prefix .mv- voorkomt conflicten met bestaande websites.
   Inter is een voorkeur, geen fontbestand inbegrepen.
   ======================================================= */
:root {
  --mv-navy: #0B2D56;
  --mv-navy-dark: #06264B;
  --mv-blue: #0D6EFD;
  --mv-cyan: #15C6D6;
  --mv-bluegray: #E7EEF6;
  --mv-bg: #F5F9FD;
  --mv-white: #FFFFFF;
  --mv-text: #142D4B;
  --mv-muted: #57708A;
  --mv-border: #D8E4F0;
  --mv-success: #18A77B;
  --mv-warning: #F0A12D;
  --mv-error: #E14D5C;
  --mv-radius-sm: 10px;
  --mv-radius: 16px;
  --mv-radius-xl: 24px;
  --mv-shadow: 0 12px 35px rgba(11, 45, 86, .08);
  --mv-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.mv-app { font-family: var(--mv-font); color: var(--mv-text); background: var(--mv-bg); line-height: 1.5; }
.mv-app *, .mv-app *::before, .mv-app *::after { box-sizing: border-box; }
.mv-app a { color: var(--mv-blue); }
.mv-header { background: var(--mv-navy); color: var(--mv-white); }
.mv-header-inner { max-width: 1200px; margin: auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mv-header-logo { display: block; width: min(260px, 50vw); height: auto; }
.mv-container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.mv-eyebrow { text-transform: uppercase; font-weight: 750; font-size: .74rem; letter-spacing: .11em; color: var(--mv-blue); }
.mv-title { font-weight: 780; line-height: 1.11; letter-spacing: -.035em; font-size: clamp(2rem, 4.5vw, 3.7rem); color: var(--mv-navy); }
.mv-description { color: var(--mv-muted); font-size: 1.05rem; }
.mv-card { background: var(--mv-white); border: 1px solid var(--mv-border); border-radius: var(--mv-radius); padding: 24px; box-shadow: var(--mv-shadow); }
.mv-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--mv-radius-sm); font: 650 1rem/1.3 var(--mv-font); text-decoration: none; cursor: pointer; transition: transform .18s, background .18s; }
.mv-button:hover { transform: translateY(-1px); }
.mv-button:focus-visible, .mv-app a:focus-visible { outline: 3px solid var(--mv-cyan); outline-offset: 3px; }
.mv-button-primary { color: white !important; background: var(--mv-blue); }
.mv-button-primary:hover { background: #075CD9; }
.mv-button-secondary { color: var(--mv-navy) !important; background: white; border-color: var(--mv-border); }
.mv-badge { display: inline-flex; align-items: center; padding: 5px 11px; background: #E8F5FF; border-radius: 999px; font-size: .8rem; color: #0757B7; font-weight: 700; }
.mv-card-heading { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.mv-stat { margin: 0; font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.03em; color: var(--mv-navy); }
.mv-field { width: 100%; border: 1px solid var(--mv-border); background: white; color: var(--mv-text); border-radius: var(--mv-radius-sm); padding: 11px 14px; font: inherit; }
.mv-field:focus { outline: 3px solid #15C6D64D; border-color: var(--mv-blue); }
.mv-dropzone { border: 2px dashed #99B9DD; border-radius: var(--mv-radius-xl); text-align: center; padding: 40px 24px; background: #F9FCFF; }
.mv-progress { height: 8px; border-radius: 999px; background: var(--mv-bluegray); overflow: hidden; }
.mv-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--mv-blue), var(--mv-cyan)); border-radius: inherit; }
.mv-muted { color: var(--mv-muted); }
.mv-section { padding-block: 56px; }
@media (prefers-reduced-motion: reduce) { .mv-button { transition: none; } }
@media (max-width: 640px) { .mv-header-inner { padding: 14px 16px; } .mv-card { padding: 18px; } }