/* Siligrid — gedeelde stijl.
   Stond tot 10 okt 2026 inline in index.html. Nu een bestand, omdat de site meer dan
   een pagina is en dezelfde zestig regels niet vier keer gekopieerd horen te worden.
   Kleuren en klassen zijn onveranderd overgenomen, zodat het uiterlijk niet verschuift. */

/* Inter, vanaf onze eigen server. SIL Open Font License.
   Stond tot 10 okt 2026 bij Google Fonts; daarmee zag Google het IP-adres van elke
   bezoeker. Voor overheids- en netpartijen is dat een bezwaar, en dat is onze doelgroep. */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/inter-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/inter-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root{
  --bg:#07090f; --panel:#0e131d; --border:#1b2333; --text:#e8ecf3; --dim:#93a0b4;
  --acc:#22d3ee; --acc2:#3b82f6; --acc-soft:rgba(34,211,238,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;
  background-image:
    radial-gradient(900px 500px at 80% -10%, rgba(59,130,246,.14), transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:inherit}

header{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);background:rgba(7,9,15,.72);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;flex-shrink:0}
.brand svg{filter:drop-shadow(0 0 8px rgba(34,211,238,.4))}
.menu{display:flex;align-items:center;gap:22px;font-size:15px}
.menu a{color:var(--dim);text-decoration:none;white-space:nowrap}
.menu a:hover,.menu a[aria-current="page"]{color:var(--acc)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font-weight:600;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-acc{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#04121a}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}

.hero{padding:96px 0 64px;text-align:center}
.hero-l{text-align:left;padding:72px 0 36px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;
  font-size:13px;color:var(--dim);background:var(--panel)}
.pill b{color:var(--acc)}
h1{font-size:clamp(34px,6vw,58px);line-height:1.06;letter-spacing:-.03em;margin:22px 0 16px;font-weight:800}
.hero-l h1{font-size:clamp(30px,5vw,46px)}
h1 .grad{background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16px,2.4vw,20px);color:var(--dim);max-width:620px;margin:0 auto 30px}
.hero-l .lead{margin-left:0}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-l .cta{justify-content:flex-start}

section{padding:56px 0}
.sec-h{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:10px}
h2{font-size:clamp(24px,3.6vw,34px);letter-spacing:-.02em;margin-bottom:8px;font-weight:700}
h3{font-weight:700}
.sub{color:var(--dim);max-width:680px}
p+p{margin-top:12px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px}
.card .ic{width:40px;height:40px;border-radius:11px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc);margin-bottom:14px}
.card h3{font-size:17px;margin-bottom:6px}
.card p{color:var(--dim);font-size:14.5px}
.card-acc{border-color:rgba(34,211,238,.35)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-weight:800;font-size:15px;color:var(--acc);opacity:.9}
.step h3{font-size:16px;margin:8px 0 6px}
.step p{color:var(--dim);font-size:14px}

/* Lijsten met een streep in plaats van een bolletje: rustiger in een donker vlak. */
.lijst{list-style:none;margin-top:16px;display:grid;gap:10px}
.lijst li{position:relative;padding-left:20px;color:var(--dim);font-size:15px}
.lijst li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--acc)}
.lijst li strong{color:var(--text);font-weight:600}

/* Vraag-en-antwoordblokken: wat een grote partij wil nalopen. */
.dl{margin-top:26px;display:grid;gap:0}
.dl>div{border-top:1px solid var(--border);padding:18px 0;display:grid;grid-template-columns:260px 1fr;gap:24px}
.dl>div:last-child{border-bottom:1px solid var(--border)}
.dl dt{font-weight:600;font-size:15.5px}
.dl dd{color:var(--dim);font-size:15px}

.band{background:linear-gradient(135deg,rgba(34,211,238,.10),rgba(59,130,246,.10));border:1px solid var(--border);
  border-radius:20px;padding:40px 28px;text-align:center;margin:20px 0}
.band h2{margin-bottom:8px}
.note{border:1px solid var(--border);border-left:2px solid var(--acc);background:var(--panel);
  border-radius:0 14px 14px 0;padding:18px 20px;margin-top:26px;color:var(--dim);font-size:15px}
.note strong{color:var(--text)}

.kruim{font-size:14px;color:var(--dim);padding-top:26px}
.kruim a{color:var(--dim);text-decoration:none}
.kruim a:hover{color:var(--acc)}

footer{border-top:1px solid var(--border);padding:34px 0;color:var(--dim);font-size:14px;margin-top:20px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}
/* Raakvlak van minstens 44 px hoog: een voettekstlink van 22 px is op een
   telefoon niet te raken zonder te missen. */
.foot-nav{gap:4px 18px}
.foot-nav a{text-decoration:none;display:inline-block;padding:11px 0}
.foot-nav a:hover{color:var(--acc)}

@media(max-width:860px){
  .menu{gap:14px;font-size:14px}
  .dl>div{grid-template-columns:1fr;gap:6px}
}
@media(max-width:760px){
  .grid3,.grid2,.steps{grid-template-columns:1fr}
  .hero{padding:64px 0 40px}
  .nav{height:auto;padding:12px 0;flex-wrap:wrap}
  /* Laten afbreken in plaats van horizontaal schuiven: een menu dat buiten beeld
     doorloopt zonder zichtbare aanwijzing wordt niet gevonden. */
  /* Op een telefoon moet een menu-item met een vinger te raken zijn; tekst van 22 px
     hoog is dat niet. Padding maakt het raakvlak groter zonder de opmaak te veranderen. */
  .menu{order:3;width:100%;flex-wrap:wrap;gap:2px 8px;padding-bottom:2px}
  .menu a{padding:10px 8px;display:inline-block}
  .brand{padding:6px 0}
}

/* --- Chat-assistent (was inline in index.html) --- */
#silAiToggle{position:fixed;bottom:20px;right:20px;z-index:99999;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04121a;border:none;border-radius:28px;padding:12px 18px;
  font:700 15px/1 Inter,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer}
#silAiWidget{position:fixed;bottom:20px;right:20px;z-index:99999;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 40px);
  display:none;flex-direction:column;background:#0e131d;border:1px solid #1b2333;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5);
  font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif}
#silAiHeader{background:#07090f;color:#e8ecf3;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1b2333}
#silAiHeader small{color:#22d3ee;font-size:12px}
#silAiBody{flex:1;overflow-y:auto;padding:14px;background:#0b0f18;display:flex;flex-direction:column;gap:10px}
#silAiBody .msg-assistant,#silAiBody .msg-user{max-width:85%;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.5;white-space:pre-wrap}
#silAiBody .msg-assistant{background:#141a26;color:#e8ecf3;align-self:flex-start;border-bottom-left-radius:4px}
#silAiBody .msg-user{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04121a;align-self:flex-end;border-bottom-right-radius:4px}
#silAiInputContainer{display:flex;gap:8px;padding:10px;border-top:1px solid #1b2333;background:#0e131d}
#silAiInput{flex:1;border:1px solid #1b2333;border-radius:8px;padding:10px 12px;font-size:14px;outline:none;background:#07090f;color:#e8ecf3}
#silAiInputContainer button{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#04121a;border:none;border-radius:8px;padding:0 16px;font-weight:700;cursor:pointer}