:root { --bg:#f5f7fb; --card:#fff; --ink:#0b1020; --muted:#4a5263; --line:#e1e6ef; --accent:#1f56cf; --accent2:#5b8dff; --soft:#eaf0ff; --shadow:0 1px 2px rgba(11,16,32,.05),0 8px 24px rgba(11,16,32,.06);
  --gA:#12a150; --gB:#6aae1f; --gC:#e0a100; --gD:#ea6a14; --gE:#d92d20; --gN:#8a93a6; --ok:#12a150; --warn:#e0a100; --bad:#d92d20; --term:#0b1220; --termfg:#cfe3ff;
  --map-ocean:#0b1628; --radius:16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --bg:#05070d; --card:#0e1320; --ink:#eef2fb; --muted:#a7b0c3; --line:#1c2336; --accent:#5b8dff; --accent2:#7aa2ff; --soft:#121a30; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35); } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); font-weight:600; text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.015em; margin:0 0 .5em; }
h1 { font-size:clamp(28px,5vw,46px); } h2 { font-size:clamp(22px,3vw,28px); } h3 { font-size:17px; }
p { margin:0 0 1em; }
.sr,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip:focus { position:fixed; top:8px; left:8px; background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px; z-index:99; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--accent2); outline-offset:2px; border-radius:6px; }

.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px max(16px,calc(50vw - 560px)); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none !important; }
.brand b { display:block; font-size:18px; letter-spacing:-.01em; } .brand small { display:block; color:var(--muted); font-size:12px; font-weight:500; margin-top:-3px; }
.langs { display:flex; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px; }
.langs button { border:0; background:none; color:var(--muted); font:600 13px inherit; padding:6px 12px; border-radius:999px; cursor:pointer; }
.langs button[aria-pressed=true] { background:var(--accent); color:#fff; }

main { padding:0 16px 40px; max-width:1120px; margin:0 auto; }
.view { animation:fade .25s ease; } @keyframes fade { from { opacity:0; transform:translateY(6px); } }
.narrow { max-width:680px; margin:0 auto; }

/* Hero */
.hero { position:relative; text-align:center; padding:48px 12px 28px; overflow:hidden; }
.hero > *:not(.radar) { position:relative; z-index:1; }
.eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--soft); padding:5px 12px; border-radius:999px; }
.lead { color:var(--muted); font-size:18px; max-width:640px; margin:0 auto 1.4em; }
.radar { position:absolute; inset:-40px 0 auto; margin:auto; width:560px; max-width:100%; aspect-ratio:1; opacity:.55; pointer-events:none; }
.radar i { position:absolute; inset:0; margin:auto; border:1px solid var(--line); border-radius:50%; } .radar i:nth-child(1){ width:100%; height:100%; } .radar i:nth-child(2){ width:66%; height:66%; } .radar i:nth-child(3){ width:33%; height:33%; }
.radar b { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 300deg, color-mix(in srgb,var(--accent) 35%,transparent) 360deg); animation:spin 6s linear infinite; mask:radial-gradient(circle, transparent 0, #000 1px); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar b,.sweep,.view { animation:none !important; } }
.bar { display:flex; gap:8px; max-width:620px; margin:0 auto 10px; background:var(--card); padding:8px; border-radius:18px; box-shadow:var(--shadow); border:1px solid var(--line); }
.bar input { flex:1; min-width:0; border:0; background:none; color:var(--ink); font:500 19px inherit; padding:10px 14px; outline:none; }
.btn { border:1px solid var(--line); background:var(--card); color:var(--ink); font:600 15px inherit; padding:12px 20px; border-radius:12px; cursor:pointer; transition:.15s; }
.btn:hover { border-color:var(--accent); } .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .btn.primary:hover { filter:brightness(1.08); } .btn:disabled { opacity:.55; cursor:wait; }
.link { background:none; border:0; color:var(--accent); font:600 15px inherit; cursor:pointer; padding:6px 0; }
.micro { font-size:13px; color:var(--muted); } .err { color:var(--bad); font-weight:600; margin:8px 0; }

.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; } @media (max-width:760px) { .two { grid-template-columns:1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.pick h2 { font-size:22px; } .pick .btn { margin-top:6px; }
.pill { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:var(--soft); color:var(--accent); padding:4px 10px; border-radius:999px; margin-bottom:10px; } .pill.gold { background:#fff3d6; color:#8a5a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .pill.gold { background:#2b2108; color:#ffd479; } }
.ticks { list-style:none; padding:0; margin:0 0 6px; } .ticks li { position:relative; padding-left:26px; margin:6px 0; color:var(--muted); }
.ticks li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }
.how { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; } @media (max-width:760px) { .how { grid-template-columns:1fr; } }
.how div { display:flex; gap:12px; } .how span { flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; } .how p { margin:0; color:var(--muted); }
.support { text-align:center; margin:22px 0 6px; }
.bmc-btn { display:inline-flex; align-items:center; gap:8px; min-width:210px; height:60px; padding:0 24px; box-sizing:border-box; border-radius:12px; background:#5F7FFF; color:#fff; font:bold 24px/27px Arial,sans-serif; white-space:nowrap; text-decoration:none !important; }
.bmc-btn:hover { filter:brightness(1.08); }
.bmc-btn img { flex:none; width:auto; height:29px; }

/* Formulieren */
.form { display:grid; gap:10px; margin-bottom:16px; } .form label { font-weight:600; font-size:14px; }
.form input[type=text],.form input[type=email] { border:1px solid var(--line); background:var(--bg); color:var(--ink); font:500 17px inherit; padding:12px 14px; border-radius:12px; }
.form .check { display:flex; gap:10px; align-items:flex-start; font-weight:500; } .form .check input { margin-top:5px; width:18px; height:18px; flex:none; }
.codebox { letter-spacing:.5em; font:700 28px ui-monospace,Menlo,monospace !important; text-align:center; }
.steps { list-style:none; display:flex; gap:8px; padding:0; margin:0 0 18px; } .steps li { flex:1; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; font-weight:600; padding:8px 10px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.steps b { width:24px; height:24px; border-radius:50%; background:var(--line); display:grid; place-items:center; font-size:12px; } .steps li.on { color:var(--ink); border-color:var(--accent); } .steps li.on b,.steps li.done b { background:var(--accent); color:#fff; } .steps li.done b::after { content:""; }
.back { margin-bottom:4px; } .safe summary { cursor:pointer; font-weight:700; } .safe .ticks { margin-top:10px; }

/* Voortgang */
.run { text-align:center; padding-top:30px; }
.scanner { position:relative; width:150px; height:150px; margin:0 auto 10px; } .scanner svg { width:100%; height:100%; transform:rotate(-90deg); }
.scanner .ring { fill:none; stroke:var(--line); stroke-width:7; } .scanner .arc { fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset .6s ease; }
.scanner .sweep { transform-origin:60px 60px; animation:spin 2.2s linear infinite; stroke:var(--accent2); stroke-width:2; opacity:.6; } .scanner b { position:absolute; inset:0; display:grid; place-items:center; font-size:28px; }
.stepper { list-style:none; padding:0; margin:16px 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.stepper li { font-size:13px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted); } .stepper li.on { border-color:var(--accent); color:var(--accent); } .stepper li.done { background:var(--soft); color:var(--ok); border-color:transparent; } .stepper li.done::before { content:"✓ "; }
.live { text-align:left; } .live summary { cursor:pointer; font-weight:700; }
.term { background:var(--term); color:var(--termfg); font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace; padding:14px; border-radius:12px; max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word; margin:10px 0 0; }
.term .l-warn { color:#ffd479; } .term .l-err { color:#ff8c82; } .term .l-ok { color:#7ee2a8; } .term .t { color:#6b7a99; } .term .m { color:#8fb4ff; }

/* Resultaat */
.rhead { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; }
@media (max-width:640px) { .rhead { grid-template-columns:1fr; text-align:center; justify-items:center; } }
.gauge { position:relative; width:170px; height:170px; } .gauge svg { width:100%; height:100%; transform:rotate(-90deg); } .gauge .bg { fill:none; stroke:var(--line); stroke-width:12; } .gauge .fg { fill:none; stroke-width:12; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.gauge .g { position:absolute; inset:0; display:grid; place-content:center; text-align:center; } .gauge .g b { font-size:58px; line-height:1; } .gauge .g small { color:var(--muted); font-weight:600; }
.gA { color:var(--gA); } .gB { color:var(--gB); } .gC { color:var(--gC); } .gD { color:var(--gD); } .gE { color:var(--gE); } .gN { color:var(--gN); }
.bgA { background:var(--gA); } .bgB { background:var(--gB); } .bgC { background:var(--gC); } .bgD { background:var(--gD); } .bgE { background:var(--gE); } .bgN { background:var(--gN); }
.domain { font-size:clamp(22px,4vw,32px); word-break:break-all; } .verdict { font-size:19px; margin:4px 0 12px; }
.tabs { display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px; margin:18px 0 6px; }
.tabs button { border:0; background:none; color:var(--muted); font:700 15px inherit; padding:9px 22px; border-radius:999px; cursor:pointer; } .tabs button[aria-selected=true] { background:var(--accent); color:#fff; }
.tools { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 0; } .tools .btn { padding:8px 14px; font-size:14px; }
.notice { background:var(--soft); border-left:4px solid var(--accent); padding:12px 16px; border-radius:10px; font-size:14px; color:var(--muted); margin:14px 0; }
.sect { margin:26px 0 10px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .sect h2 { margin:0; font-size:22px; } .sect small { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.cat { display:flex; flex-direction:column; gap:8px; padding:16px; } .cat .row { display:flex; align-items:center; gap:12px; } .cat .ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--soft); font-size:22px; } .cat h3 { margin:0; font-size:16px; } .cat .gr { margin-left:auto; font-weight:800; font-size:22px; }
.meter { height:8px; border-radius:99px; background:var(--line); overflow:hidden; } .meter i { display:block; height:100%; border-radius:99px; }
.cat p { margin:0; color:var(--muted); font-size:14px; }
.key { display:grid; gap:10px; } .key .it { display:flex; gap:12px; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); } .sev { flex:none; width:12px; border-radius:6px; } .it h3 { margin:0 0 2px; font-size:16px; } .it p { margin:0; color:var(--muted); font-size:14px; }
.sv-crit { background:var(--gE); } .sv-high { background:var(--gD); } .sv-med { background:var(--gC); } .sv-low { background:var(--accent2); } .sv-info { background:var(--gN); } .sv-good { background:var(--gA); }
.badge { display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:99px; color:#fff; vertical-align:middle; }
.two-c { align-items:start; display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:820px) { .two-c { grid-template-columns:1fr; } }
.chart svg { width:100%; height:auto; display:block; } .chart .ax { stroke:var(--line); fill:none; } .chart .lab { fill:var(--muted); font-size:11px; } .chart .poly { fill:color-mix(in srgb,var(--accent) 22%,transparent); stroke:var(--accent); stroke-width:2; } .chart .dot { fill:var(--accent); }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--muted); margin-top:8px; } .legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }

/* Kaart (uit Arcad) */
.mapcard { padding:0; overflow:hidden; background:var(--map-ocean); border-color:#1b2433; } .map svg { display:block; width:100%; height:auto; background:#060b16; } .map .space { fill:#0b1628; } .map .earth { filter:saturate(1.05) brightness(.85) contrast(1.05); }
.map .land { fill:#5eead4; fill-opacity:0; stroke:rgba(255,255,255,.22); stroke-width:.5px; vector-effect:non-scaling-stroke; } .map .land.hot { fill-opacity:.18; } .map .land.home { fill:#ffd479; fill-opacity:.28; stroke:rgba(255,212,121,.8); }
.map .arc { fill:none; stroke-width:calc(2px * var(--z,1)); opacity:.55; } .map .flow { fill:none; stroke-width:calc(2.4px * var(--z,1)); stroke-dasharray:calc(6px * var(--z,1)) calc(18px * var(--z,1)); animation:flow 1.6s linear infinite; } @keyframes flow { to { stroke-dashoffset:-24; } }
.map .core { r:calc(5px * var(--z,1)); } .map .halo { r:calc(11px * var(--z,1)); opacity:.25; animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity:.08; } } .map text { font-size:calc(9px * var(--z,1)); font-weight:600; font-family:-apple-system,Arial,sans-serif; fill:#e9f0ff; paint-order:stroke; stroke:#060b16; stroke-width:2px; }

.maplegend { padding:10px 14px; background:var(--card); display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); } .maplegend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; }
.donut { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .donut svg { width:140px; height:140px; flex:none; }

/* Poorten (ShieldsUP-stijl) */
.ports { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }
.port { border-radius:12px; padding:10px 8px; text-align:center; border:1px solid var(--line); background:var(--card); font-size:12px; } .port b { display:block; font-size:18px; } .port span { display:block; color:var(--muted); }
.port.stealth { border-color:color-mix(in srgb,var(--ok) 60%,var(--line)); background:color-mix(in srgb,var(--ok) 12%,var(--card)); } .port.closed { border-color:color-mix(in srgb,var(--warn) 55%,var(--line)); background:color-mix(in srgb,var(--warn) 10%,var(--card)); } .port.open { border-color:var(--bad); background:color-mix(in srgb,var(--bad) 14%,var(--card)); } .port.open.expected { border-color:var(--gN); background:color-mix(in srgb,var(--gN) 12%,var(--card)); }
.port.open b { color:var(--bad); } .port.open.expected b { color:var(--ink); }
.psum { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .psum span { padding:6px 12px; border-radius:99px; font-weight:700; font-size:14px; background:var(--card); border:1px solid var(--line); }

/* Todo */
.todo { counter-reset:t; display:grid; gap:10px; } .todo .it { counter-increment:t; position:relative; padding-left:54px; } .todo .it::before { content:counter(t); position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; }
.todo .fix { color:var(--ink); font-weight:600; font-size:14px; margin-top:4px; }

/* Advanced */
.adv h3 { margin:22px 0 8px; } .filters { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; } .filters button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:99px; padding:5px 12px; font:600 13px inherit; cursor:pointer; } .filters button[aria-pressed=true] { background:var(--accent); border-color:var(--accent); color:#fff; }
table.t { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .t th,.t td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; } .t th { background:var(--soft); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .t tr:last-child td { border-bottom:0; }
.t td.mono,.mono { font:12.5px ui-monospace,Menlo,Consolas,monospace; word-break:break-all; } .scroll { overflow-x:auto; }
.fd { border:1px solid var(--line); border-radius:12px; margin:8px 0; background:var(--card); } .fd summary { display:flex; gap:10px; align-items:center; padding:10px 14px; cursor:pointer; font-weight:600; list-style:none; } .fd summary::-webkit-details-marker { display:none; } .fd .body { padding:0 14px 14px; color:var(--muted); font-size:14px; } .fd pre { background:var(--term); color:var(--termfg); padding:10px; border-radius:8px; overflow:auto; font:12px/1.5 ui-monospace,Menlo,monospace; white-space:pre-wrap; word-break:break-all; margin:8px 0; }
.kv { display:grid; grid-template-columns:170px 1fr; gap:4px 14px; font-size:14px; } .kv dt { color:var(--muted); } .kv dd { margin:0; word-break:break-all; } @media (max-width:560px) { .kv { grid-template-columns:1fr; } }
.foot { max-width:1120px; margin:20px auto 40px; padding:0 16px; color:var(--muted); font-size:13px; text-align:center; }
.legal { max-width:760px; margin:20px auto; padding:0 16px; } .legal section[lang] { display:none; } .legal section.on { display:block; }
@media print { .top,.tabs,.tools,.langs,.foot nav,#v-run,.filters { display:none !important; } body { background:#fff; } .card { box-shadow:none; } .adv-only[hidden] { display:block !important; } }
.chk { list-style:none; padding:0; margin:6px 0; } .chk li { padding:3px 0; font-size:14.5px; color:var(--muted); } .chk li.y { color:var(--ink); } .chk li.y::first-letter { color:var(--ok); font-weight:800; } .chk li.n::first-letter { color:var(--bad); font-weight:800; }
.chk.two { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .sub { font-size:14px; margin:16px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.meter.tl { height:12px; } .cta { margin-top:24px; text-align:center; background:var(--soft); } .cta .btn { margin-top:6px; }
.todo .it .sev { display:none; } .key .it .sev { min-height:36px; } .cat .meter i, .meter i { min-width:0; transition:width .9s cubic-bezier(.2,.8,.2,1); }
.legend i.dyn, .legend i { width:10px; height:10px; }
.legal h1 { font-size:30px; } .legal h2 { font-size:20px; margin-top:1.4em; }
@media (max-width:560px) { .chk.two { grid-template-columns:1fr; } .bar { flex-direction:column; } .bar .btn { width:100%; } }
.rhead { position:relative; overflow:hidden; } .rhead > *:not(.shot) { position:relative; z-index:1; }
.shot { position:absolute; inset:0; z-index:0; } .shot img { width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.6; } .shot::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb,var(--card) 94%,transparent) 0%, color-mix(in srgb,var(--card) 72%,transparent) 45%, color-mix(in srgb,var(--card) 18%,transparent) 100%); }
.locked { list-style:none; padding:0; margin:12px auto 14px; max-width:560px; text-align:left; } .locked li { padding:6px 0; border-bottom:1px solid var(--line); } .locked li:last-child { border-bottom:0; } .locked .micro { display:block; margin-left:26px; } .locked .lock { display:inline-block; width:22px; }
.rate { display:flex; align-items:center; gap:14px; margin:6px 0 10px; } .rate b { font-size:44px; line-height:1; } .stars { color:#f5b301; letter-spacing:2px; font-size:18px; }
blockquote { margin:10px 0; padding:8px 12px; border-left:3px solid var(--line); background:var(--bg); border-radius:0 10px 10px 0; } blockquote p { margin:4px 0 0; font-size:14px; color:var(--muted); }
.map { position:relative; } .map svg { touch-action:none; cursor:grab; } .map svg.grabbing { cursor:grabbing; }
.map .arc, .map .flow { fill:none !important; }
.map .cl circle { fill:rgba(255,255,255,.75); r:calc(1.6px * var(--z,1) * 2); } .map .cl text { font-size:calc(7px * var(--z,1) * 1.5); font-weight:500; fill:#dbe7ff; paint-order:stroke; stroke:#060b16; stroke-width:calc(2.4px * var(--z,1)); opacity:.9; }
.map .plabel { font-size:calc(9px * var(--z,1) * 1.5); font-weight:700; }
.mapctl { position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:6px; z-index:3; } .mapctl button { width:34px; height:34px; padding:0; border-radius:10px; font:700 17px/1 inherit; }

.map .cl.cap text { font-weight:700; fill:#fff; } .map .plabel { font-size:calc(10px * var(--z,1) * 1.5) !important; font-weight:800 !important; fill:#fff; }

/* Alleen Belgische IP-adressen */
.geo-card { max-width:760px; margin:18px auto; border-left:5px solid #f5c518 !important; }
.geo-card h2 { margin:0 0 8px; font-size:1.2rem; }
.geo-card p { margin:0; line-height:1.55; }