:root{ 
 --bg:#0b1220; 
 --panel:#101a33; 
 --card:#0f1b36; 
 --text:#eaf0ff; 
 --muted:#4fd1c5; 
 --line:rgba(255,255,255,.10); 
 --accent:#4fd1c5; 
 --accent2:#4fd1c5; 
 --shadow: 0 12px 40px rgba(79, 209, 197, .1); 
 --radius:18px; 
 --max:1120px; 
 --pad:18px; 
 --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; 
	 --topbar-h: 66px; 
 } 
 *{box-sizing:border-box} 
 body{ 
 margin:0; font-family:var(--font); 
 background: 
 radial-gradient(1200px 600px at 10% -10%, rgba(79,209,197,.25), transparent 60%), 
 radial-gradient(900px 500px at 100% 0%, rgba(96,165,250,.25), transparent 55%), 
 linear-gradient(180deg, #070b14 0%, var(--bg) 35%, #070b14 100%); 
 color:var(--text); 
 } 
 a{color:inherit; text-decoration:none} 
 .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)} 
 .topbar{ 
 position:sticky; top:0; z-index:100; 
 backdrop-filter: blur(90px); 
 background: rgba(7,11,20,.65); 
 border-bottom: 1px solid var(--line); 
 } 
 .nav{ 
 display:flex; align-items:center; justify-content:space-between; 
 padding:14px 0; 
 } 
 .brand{display:flex; gap:10px; align-items:center} 
 .logo{ 
 width:38px; height:38px; border-radius:12px; 
 } 
 .brand strong{display:block; line-height:1.1} 
 .brand span{display:block; font-size:12px; color:var(--muted); margin-top:2px} 
 .navlinks{display:flex; gap:16px; align-items:center} 
 .navlinks a{font-size:14px; color:var(--muted)} 
 .navlinks a:hover{color:var(--text)} 
 .btn{ 
 display:inline-flex; align-items:center; justify-content:center; 
 gap:10px; 
 padding:11px 14px; 
 border-radius:14px; 
 border:1px solid var(--line); 
 background: rgba(255,255,255,.05); 
 color:var(--text); 
 box-shadow: none; 
 transition: transform .08s ease, background .2s ease, border-color .2s ease; 
 font-weight:600; 
 cursor:pointer; 
 } 
 .btn:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18)} 
 .btn:active{transform: translateY(1px)} 
 .btn.primary{ 
 border: none; 
 background: linear-gradient(135deg, var(--accent), var(--accent2)); 
 color:#071022; 
 box-shadow: 0 12px 35px rgba(79,209,197,.18); 
 } 
 .btn.primary:hover{filter: brightness(1.05)} 
 .btn.small{padding:9px 12px; border-radius:12px; font-size:14px} 
 .burger{display:none} 
 header.hero{ 
 padding:54px 0 26px; 
 } 
 .heroGrid{ 
 display:grid; 
 grid-template-columns: 1fr !important; 
 gap: 22px; 
 align-items:stretch; 
 } 
 .panel{ 
	 padding: 16px !important; 
 background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); 
 border: 1px solid var(--line); 
 border-radius: var(--radius); 
 box-shadow: var(--shadow); 
 overflow:hidden; 
 } 
 .heroMain{padding:26px} 
 .kicker{ 
 display:inline-flex; align-items:center; gap:10px; 
 padding:7px 10px; 
 border:1px solid var(--line); 
 border-radius:999px; 
 color:var(--muted); 
 font-size:13px; 
 background: rgba(255,255,255,.03); 
 } 
 h1{ 
 margin:14px 0 10px; 
 font-size: clamp(30px, 4vw, 46px); 
 line-height:1.05; 
 letter-spacing:-.02em; 
 } 
 .lead{color:var(--muted); font-size:16px; line-height:1.55; max-width:62ch} 
 .heroCtas{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px} 
 .badges{ 
 display:flex; gap:10px; flex-wrap:wrap; 
 margin-top:18px; 
 } 
 .badge{ 
 display:inline-flex; gap:8px; align-items:center; 
 padding:9px 11px; 
 border-radius: 999px; 
 border:1px solid var(--line); 
 background: rgba(255,255,255,.03); 
 color:var(--muted); 
 font-size:13px; 
 } 
 .dot{ 
 width:10px; height:10px; border-radius:999px; 
 background: linear-gradient(135deg, var(--accent), var(--accent2)); 
 box-shadow: 0 8px 18px rgba(79,209,197,.20); 
 } 
 .heroSide{padding:20px} 
 .sideTitle{display:flex; justify-content:space-between; align-items:center; gap:10px} 
 .sideTitle h2{margin:0; font-size:16px} 
 .sideTitle small{color:var(--muted)} 
 .quicklist{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px} 
 .quickitem{ 
 padding:12px; border:1px solid var(--line); 
 border-radius: 16px; 
 background: rgba(255,255,255,.03); 
 } 
 .quickitem strong{display:block; font-size:14px; margin-bottom:4px} 
 .quickitem span{display:block; font-size:13px; color:var(--muted); line-height:1.4} 
 section{padding:22px 0} 
 .sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px} 
 .sectionTitle h2{margin:0; font-size:18px} 
 .sectionTitle p{margin:0; color:var(--muted); font-size:14px} 
 .cards{ 
 display:grid; 
 grid-template-columns: repeat(2, 1fr); 
 gap: 14px; 
 } 
 .card{ 
 display: block;           /* anchor gedraagt zich als blok */
 text-decoration: none;    /* geen underline */
 color: inherit;
 padding:18px; 
 border:1px solid var(--line); 
 border-radius: var(--radius); 
 background: rgba(255,255,255,.03); 
 transition: transform .15s ease, box-shadow .15s ease;
 box-shadow: 0 4px 14px rgba(0,0,0,.15); 
 cursor: pointer;
 } 
 .card h3{margin:0 0 8px; font-size:16px} 
 .card p{margin:0; color:var(--muted); font-size:14px; line-height:1.55} 
.card:hover, .card:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  outline: none;
}
.card:focus-visible {
  outline: 2px solid #66afe9;   /* toetsenbord-focus zichtbaar */
  outline-offset: 3px;
}

/* Hover-effect (desktop) */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  }
}

/* Tap-effect (mobiel) */
@media (hover: none) {
  .card:active {
    transform: scale(0.97);
    background: #2a2a2a;
  }
}

/* Toetsenbord-focus */
.card:focus-visible {
  outline: 3px solid #66afe9;
  outline-offset: 4px;
}

 .split{ 
 display:grid; 
 grid-template-columns: 1fr !important; 
 gap: 14px; 
 align-items:stretch; 
 } 
 .steps{display:grid; gap:10px; margin-top:12px} 
 .step{ 
 display:flex; gap:12px; align-items:flex-start; 
 padding:12px; border:1px solid var(--line); 
 border-radius: 16px; background: rgba(255,255,255,.03); 
 } 
 .step .nr{ 
 min-width:26px; height:26px; border-radius:9px; 
 display:flex; align-items:center; justify-content:center; 
 background: rgba(96,165,250,.14); 
 border: 1px solid rgba(96,165,250,.25); 
 color: var(--text); 
 font-weight:800; font-size:13px; 
 } 
 .step strong{display:block; font-size:14px} 
 .step span{display:block; color:var(--muted); font-size:13px; line-height:1.4} 
 form{ 
 display:grid; gap:10px; margin-top:12px; 
 } 
 .row{display:grid; grid-template-columns: 1fr 1fr; gap:10px} 
 input, textarea, select{ 
 width:100%; 
 padding:12px 12px; 
 border-radius: 14px; 
 border:1px solid var(--line); 
 background: rgba(7,11,20,.55); 
 color: var(--text); 
 outline:none; 
 } 
 textarea{min-height:120px; resize:vertical} 
 input::placeholder, textarea::placeholder{color: rgba(183,195,230,.7)} 
 .fineprint{color:var(--muted); font-size:12px; line-height:1.45} 
 footer{ 
 padding:26px 0 36px; 
 border-top:1px solid var(--line); 
 color:var(--muted); 
 } 
 .foot{ 
 display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center 
 } 
 .foot a{color:var(--muted)} 
 .foot a:hover{color:var(--text)} 
/* Overlay achter het dropdown-menu */ 
.mobileOverlay{ 
 display: none; 
} 
@media (max-width: 780px){ 
 .navlinks{display:none} 
 .burger{display:inline-flex} 
 /* Overlay die de rest dimt en klik-buiten opvangt */ 
 .mobileOverlay{ 
 position: fixed; 
 inset: 0; 
 background: rgba(7,11,20,.45); 
 backdrop-filter: blur(4px); 
 z-index: 49; /* net onder het menu zelf */ 
 display: none; 
 } 
 .mobileOverlay.show{display:block} 
 /* Het dropdown-menu zelf, los van de topbar */ 
 .mobileMenu{ 
 position: fixed; 
 left: 0; 
 right: 0; 
 top: var(--topbar-h); /* direct onder de topbar */ 
 z-index: 50; /* boven overlay */ 
 display: block; /* niet via display togglen i.v.m. animatie */ 
 max-height: 0; 
 overflow: hidden; 
 /* stijl van panel */ 
 background: rgba(7, 11, 20, 0.85); 
 border: 1px solid var(--line); 
 border-radius: 0 0 var(--radius) var(--radius); 
 box-shadow: 0 18px 50px rgba(0,0,0,.35); 
 /* animatie */ 
 opacity: 0; 
 transform: translateY(-6px); 
 transition: max-height .28s ease, opacity .2s ease, transform .2s ease; 
 padding: 0; /* padding pas zetten als open is */ 
 } 
 /* Inhoud van het menu */ 
 .mobileMenuInner{ 
 padding: 12px var(--pad) 14px; 
 } 
 .mobileMenuInner a{ 
 display:block; 
 padding:10px 0; 
 color:var(--muted); 
 } 
 .mobileMenuInner a:hover{color:var(--text)} 
 .mobileMenuInner .btn{width:100%} 
 /* Open-stand */ 
 .mobileMenu.show{ 
 max-height: 280px; /* genoeg voor je items; pas aan indien nodig */ 
 opacity: 1; 
 transform: translateY(0); 
 padding-top: 6px; /* subtiel */ 
 padding-bottom: 10px; 
 } 
} 
.logo{ 
display:flex; 
align-items:center; 
justify-content:center; 
height:50px; 
} 
.logo img{ 
height:50px; 
width:auto; 
display:block;
}