/* Arcoscan — 3D-, diepte- en parallax-laag bovenop style.css. Alles respecteert prefers-reduced-motion. */
:root { --gold:#f0b429; --gold2:#ffd479; --cyan:#22d3ee; --accent3:#2a62e0; --edge:#153a94; --glow:rgba(91,141,255,.45); --mx:0; --my:0; --sy:0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --bg:#04060c; --card:#0c111e; --line:#1b2540; --edge:#0b1f5c; } }

/* Achtergrond: diepe gradiënten met lagen die met muis en scroll meebewegen */
body { background:radial-gradient(1200px 700px at 78% -10%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 60%), radial-gradient(900px 600px at 5% 18%, color-mix(in srgb,var(--gold) 9%,transparent), transparent 62%), var(--bg); background-attachment:fixed; }
.bgfx { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bgfx .orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; will-change:transform; }
.bgfx .o1 { width:520px; height:520px; left:62%; top:-120px; background:radial-gradient(circle, var(--accent2), transparent 70%); transform:translate3d(calc(var(--mx) * -34px), calc(var(--sy) * -.06px + var(--my) * -24px), 0); }
.bgfx .o2 { width:420px; height:420px; left:-120px; top:38%; background:radial-gradient(circle, var(--gold), transparent 70%); opacity:.22; transform:translate3d(calc(var(--mx) * 46px), calc(var(--sy) * -.12px + var(--my) * 30px), 0); }
.bgfx .o3 { width:380px; height:380px; right:-80px; top:70%; background:radial-gradient(circle, var(--cyan), transparent 70%); opacity:.2; transform:translate3d(calc(var(--mx) * -24px), calc(var(--sy) * -.18px), 0); }
.bgfx .gridfx { position:absolute; inset:-10%; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; opacity:.28; mask:radial-gradient(ellipse at 50% 20%, #000 0, transparent 70%); transform:perspective(700px) rotateX(58deg) translate3d(calc(var(--mx) * 18px), calc(var(--sy) * -.05px), -120px); transform-origin:50% 0; }

/* Koptekst */
.top { position:sticky; top:0; z-index:20; backdrop-filter:blur(14px) saturate(1.3); background:color-mix(in srgb,var(--bg) 62%,transparent); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.brand .mark { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(240,180,41,.35)); transition:transform .4s cubic-bezier(.2,.8,.2,1); } .brand:hover .mark { transform:rotateY(180deg) scale(1.08); }
.langs { box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); }
.langs button[aria-pressed=true] { background:linear-gradient(180deg,#6b9bff,var(--accent3)); box-shadow:0 2px 0 var(--edge), 0 6px 12px var(--glow); }

/* Hero: 3D-logo, diepte-tekst, parallax */
.hero { perspective:1100px; }
.radar { transform:translate3d(calc(var(--mx) * 14px), calc(var(--sy) * -.1px), 0) rotateX(62deg); transform-origin:50% 60%; opacity:.7; }
.hero-logo { width:120px; height:120px; margin:0 auto 14px; position:relative; z-index:2; transform-style:preserve-3d; animation:floaty 6s ease-in-out infinite; }
.hero-logo img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(240,180,41,.35)); transform:translateZ(40px); }
.hero-logo::after { content:""; position:absolute; left:14%; right:14%; bottom:-22px; height:20px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter:blur(4px); transform:translateZ(-10px); }
@keyframes floaty { 50% { translate:0 -10px; } }
h1 { background:linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb,var(--ink) 55%, var(--accent2))); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--accent) 60%,#000)) drop-shadow(0 2px 0 color-mix(in srgb,var(--accent) 45%,#000)) drop-shadow(0 8px 14px rgba(0,0,0,.35)); transform:translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0); }
.eyebrow { background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 22%,var(--card)), var(--soft)); box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 35%,#000), 0 8px 16px rgba(0,0,0,.2); }
.lead { transform:translate3d(calc(var(--mx) * -3px), 0, 0); }

/* Knoppen: ingedrukt-gevoel met een zichtbare rand, glans en schaduw */
.btn { position:relative; background:linear-gradient(180deg, color-mix(in srgb,var(--card) 90%,#fff), color-mix(in srgb,var(--card) 88%,#000)); border:1px solid color-mix(in srgb,var(--line) 80%,#fff); border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 color-mix(in srgb,var(--line) 60%,#000), 0 10px 18px rgba(0,0,0,.28); transition:transform .12s ease, box-shadow .12s ease, filter .2s; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.btn:hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 0 color-mix(in srgb,var(--line) 60%,#000), 0 16px 26px rgba(0,0,0,.34); border-color:var(--accent); }
.btn:active { transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 color-mix(in srgb,var(--line) 60%,#000), 0 3px 6px rgba(0,0,0,.3); }
.btn.primary { background:linear-gradient(180deg, #78a5ff 0%, var(--accent) 45%, var(--accent3) 100%); border-color:var(--edge); color:#fff; text-shadow:0 1px 0 rgba(0,0,30,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 5px 0 var(--edge), 0 12px 22px var(--glow); }
.btn.primary:hover { filter:brightness(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 7px 0 var(--edge), 0 18px 30px var(--glow); }
.btn.primary:active { box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 var(--edge), 0 4px 8px var(--glow); }
.btn:disabled { transform:none; }
.bar { transform-style:preserve-3d; box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 22px 50px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent); transition:box-shadow .3s; } .bar:focus-within { box-shadow:0 22px 60px rgba(0,0,0,.45), 0 0 0 2px var(--accent), 0 0 40px var(--glow); }
.tabs button[aria-selected=true] { background:linear-gradient(180deg,#78a5ff,var(--accent3)); box-shadow:0 3px 0 var(--edge), 0 8px 14px var(--glow); }

/* Kaarten met diepte en kantel-effect */
.card { background:linear-gradient(160deg, color-mix(in srgb,var(--card) 94%,#fff), var(--card) 40%); border:1px solid color-mix(in srgb,var(--line) 85%,#fff); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.28); }
.tilt { transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .18s ease-out, box-shadow .2s; transform-style:preserve-3d; will-change:transform; position:relative; }
.tilt.tilting { transition:transform .05s linear; box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.tilt::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .2s; background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 45%); }
.tilt.tilting::after { opacity:1; }
.hero-logo.tilt::after { display:none; }
.cat .ico { background:linear-gradient(145deg, color-mix(in srgb,var(--accent) 30%,var(--soft)), var(--soft)); box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 30%,#000), 0 8px 14px rgba(0,0,0,.3); transform:translateZ(24px); }
.cat h3, .cat .gr { transform:translateZ(18px); }

/* Resultaatkop: score met gloed en een extrusie-effect, screenshot met parallax */
.gauge .fg { filter:drop-shadow(0 0 7px currentColor); } .gauge { filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.gauge .g b { text-shadow:0 1px 0 rgba(0,0,0,.4), 0 2px 0 rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.3), 0 4px 0 rgba(0,0,0,.25), 0 6px 0 rgba(0,0,0,.18), 0 14px 22px rgba(0,0,0,.5), 0 0 28px currentColor; }
.shot img { transform:translate3d(0, calc(var(--sy) * .08px), 0) scale(1.12); }
.domain { text-shadow:0 2px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.4); }
.verdict { text-shadow:0 1px 0 rgba(0,0,0,.4); }
.sect h2 { text-shadow:0 2px 0 rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.25); position:relative; } .sect h2::after { content:""; position:absolute; left:0; bottom:-6px; width:46px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--accent2),var(--gold)); box-shadow:0 2px 10px var(--glow); }
.pill { box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 30%,#000), 0 6px 12px rgba(0,0,0,.2); } .pill.gold { background:linear-gradient(180deg,#ffe29a,#f0b429); color:#4a3000; box-shadow:0 2px 0 #9b6b00, 0 6px 12px rgba(240,180,41,.3); }

/* Statistiek: KPI-tegels, ernstverdeling, staafgrafiek, snelheidsmeter */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0 6px; }
.kpi { padding:16px 18px; position:relative; overflow:hidden; } .kpi::before { content:""; position:absolute; inset:auto -20% -60% auto; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, var(--k,var(--accent)), transparent 70%); opacity:.22; }
.kpi b { display:block; font-size:38px; line-height:1.05; letter-spacing:-.02em; color:var(--k,var(--ink)); text-shadow:0 2px 0 rgba(0,0,0,.35), 0 10px 22px color-mix(in srgb,var(--k,var(--accent)) 45%,transparent); transform:translateZ(26px); }
.kpi span { color:var(--muted); font-size:13px; font-weight:600; } .kpi.k-red { --k:var(--gE); } .kpi.k-green { --k:var(--gA); } .kpi.k-blue { --k:var(--accent2); } .kpi.k-gold { --k:var(--gold); }
.statgrid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; margin-top:14px; align-items:start; } @media (max-width:820px) { .statgrid { grid-template-columns:1fr; } }
.stack { display:flex; height:22px; border-radius:99px; overflow:hidden; background:var(--line); box-shadow:inset 0 2px 4px rgba(0,0,0,.4); margin:10px 0 12px; } .stack i { display:block; height:100%; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset -1px 0 0 rgba(0,0,0,.25); transition:width 1s cubic-bezier(.2,.8,.2,1); width:0; }
.svlegend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--muted); } .svlegend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; } .svlegend b { color:var(--ink); }
.bars { display:grid; gap:9px; margin-top:8px; } .brow { display:grid; grid-template-columns:150px 1fr 38px; gap:10px; align-items:center; font-size:13px; } .brow .nm { color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .brow .v { text-align:right; font-weight:800; }
.brow .track { height:14px; border-radius:99px; background:var(--line); box-shadow:inset 0 2px 3px rgba(0,0,0,.4); overflow:hidden; } .brow .track i { display:block; height:100%; width:0; border-radius:99px; transition:width 1s cubic-bezier(.2,.8,.2,1); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px currentColor; }
@media (max-width:480px) { .brow { grid-template-columns:100px 1fr 34px; } }
.bgA { background:linear-gradient(180deg,#34d27b,var(--gA)); color:var(--gA); } .bgB { background:linear-gradient(180deg,#9ad84a,var(--gB)); color:var(--gB); } .bgC { background:linear-gradient(180deg,#ffd04d,var(--gC)); color:var(--gC); } .bgD { background:linear-gradient(180deg,#ff9a55,var(--gD)); color:var(--gD); } .bgE { background:linear-gradient(180deg,#ff6a5e,var(--gE)); color:var(--gE); } .bgN { background:linear-gradient(180deg,#a7b0c3,var(--gN)); color:var(--gN); }
.meter i, .cat .meter i { box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 10px currentColor; }
.speedo { text-align:center; } .speedo svg { width:100%; max-width:260px; height:auto; } .speedo .num { font-size:26px; font-weight:800; fill:var(--ink); } .speedo .u { font-size:11px; fill:var(--muted); } .speedo .needle { transition:transform 1.2s cubic-bezier(.2,.8,.2,1); transform-origin:100px 100px; }

/* Onthulling bij scrollen */
.rv { opacity:0; transform:translateY(28px) scale(.985); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .rv.in { opacity:1; transform:none; }
.port { transition:transform .15s, box-shadow .15s; } .port:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 18px rgba(0,0,0,.35); z-index:2; position:relative; }
.key .it, .todo .it { transition:transform .15s; } .key .it:hover, .todo .it:hover { transform:translateX(4px); }

/* Footer in Arcolos-stijl met watermerk */
.foot { max-width:none; margin:50px 0 0; padding:56px 16px 34px; text-align:left; background:#000; border-top:1px solid #1c1d20; position:relative; overflow:hidden; color:#a7adb5; font-size:14px; }
.foot .wrap { position:relative; z-index:1; max-width:1120px; margin:0 auto; }
.foot-watermark { position:absolute; right:-30px; bottom:-40px; width:320px; height:320px; object-fit:contain; opacity:.24; pointer-events:none; z-index:0; transform:translate3d(0, calc(var(--sy) * -.015px), 0); }
.foot-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; margin-bottom:40px; }
.foot-brand { max-width:340px; } .foot .brand { color:#fff; margin-bottom:14px; } .foot .brand span { font-weight:800; font-size:20px; letter-spacing:.01em; } .foot-brand p { color:#d3d7dd; font-size:14px; margin:0; }
.foot-cols { display:flex; gap:60px; flex-wrap:wrap; } .foot-col h4 { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#a7adb5; margin:0 0 14px; }
.foot-col a { display:block; color:#d3d7dd; font-size:14px; padding:5px 0; font-weight:500; transition:color .2s, transform .2s; } .foot-col a:hover { color:#fff; text-decoration:none; transform:translateX(4px); }
.foot-vzw { color:#a7adb5; font-size:13px; line-height:1.6; max-width:680px; margin:0 0 10px; } .foot-credits { color:#7d8590; max-width:680px; }
.foot-bottom { border-top:1px solid #1c1d20; padding-top:24px; margin-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#a7adb5; } .foot-bottom a { color:#a7adb5; font-weight:500; } .foot-bottom a:hover { color:#fff; text-decoration:none; } .foot-legal { display:flex; flex-wrap:wrap; gap:6px 24px; }

@media (prefers-reduced-motion: reduce) { .hero-logo { animation:none; } .tilt,.rv,.bgfx .orb,.bgfx .gridfx,.radar,h1,.lead,.shot img,.foot-watermark { transform:none !important; transition:none !important; } .rv { opacity:1; } }
@media (hover:none), (pointer:coarse) { .tilt { transform:none !important; } }
@media print { .bgfx,.foot-watermark,.hero-logo { display:none !important; } .tilt { transform:none !important; } h1 { color:#000; -webkit-text-fill-color:#000; filter:none; } }

.meter i { width:0; } .donutbox svg { width:130px; height:130px; flex:none; } .donut { gap:14px; }
.kpi.tilt::before { pointer-events:none; }

.foot-why { max-width:760px; margin:8px 0 18px; padding:16px 20px; border-left:4px solid var(--gold); border-radius:0 14px 14px 0; background:linear-gradient(90deg, rgba(240,180,41,.09), rgba(255,255,255,.02)); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.foot-why h4 { margin:0 0 8px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold2); }
.foot-why p { margin:0 0 9px; font-size:13.5px; line-height:1.6; color:#c3c9d3; } .foot-why .why-adv { margin:0; color:#fff; font-weight:600; }

/* ===== Glas-effect (glassmorphism): doorzichtige tegels met blur ===== */
:root { --glass:rgba(255,255,255,.62); --glass2:rgba(255,255,255,.4); --glassline:rgba(255,255,255,.7); --glassshadow:0 8px 32px rgba(31,86,207,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --glass:rgba(20,28,48,.46); --glass2:rgba(255,255,255,.05); --glassline:rgba(255,255,255,.14); --glassshadow:0 10px 40px rgba(0,0,0,.45); } }
.card:not(.mapcard), .bar, .langs, .tabs, .port, .steps li, .fd, .notice { background:linear-gradient(145deg, var(--glass2), var(--glass)) !important; -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); border:1px solid var(--glassline) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04), var(--glassshadow) !important; }
.port.stealth { background:linear-gradient(145deg, rgba(18,161,80,.22), rgba(18,161,80,.08)) !important; } .port.closed { background:linear-gradient(145deg, rgba(224,161,0,.22), rgba(224,161,0,.08)) !important; } .port.open { background:linear-gradient(145deg, rgba(217,45,32,.3), rgba(217,45,32,.1)) !important; } .port.open.expected { background:linear-gradient(145deg, rgba(138,147,166,.25), rgba(138,147,166,.08)) !important; }
.tilt { transform-style:flat !important; }
.cat .ico, .cat h3, .cat .gr, .kpi b { transform:none !important; }
.kpi::before { opacity:.3; }
.stack, .brow .track, .meter { background:rgba(255,255,255,.1) !important; box-shadow:inset 0 2px 4px rgba(0,0,0,.25) !important; }

/* Score-icoon als glazen schijf; de gloed volgt de ring (geen wit blok meer) */
.gauge { filter:none !important; width:176px; height:176px; padding:0; }
.gauge::before { content:""; position:absolute; inset:-6px; border-radius:50%; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), rgba(255,255,255,.06) 55%, rgba(255,255,255,.02)); -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6); border:1px solid rgba(255,255,255,.3); box-shadow:inset 0 2px 6px rgba(255,255,255,.25), inset 0 -10px 24px rgba(0,0,0,.18), 0 16px 34px rgba(0,0,0,.35); }
.gauge svg { position:relative; z-index:1; } .gauge .g { z-index:2; }
.gauge .bg { stroke:rgba(255,255,255,.14); }
.gauge .fg { filter:none !important; }
.gauge.gA .fg { filter:drop-shadow(0 0 7px rgba(18,161,80,.9)) !important; } .gauge.gB .fg { filter:drop-shadow(0 0 7px rgba(106,174,31,.9)) !important; } .gauge.gC .fg { filter:drop-shadow(0 0 7px rgba(224,161,0,.9)) !important; } .gauge.gD .fg { filter:drop-shadow(0 0 7px rgba(234,106,20,.9)) !important; } .gauge.gE .fg { filter:drop-shadow(0 0 7px rgba(217,45,32,.9)) !important; } .gauge.gN .fg { filter:drop-shadow(0 0 7px rgba(138,147,166,.8)) !important; }
.shot img { opacity:.75; } .shot::after { background:linear-gradient(90deg, color-mix(in srgb,var(--card) 70%,transparent) 0%, color-mix(in srgb,var(--card) 40%,transparent) 45%, transparent 100%) !important; }

/* Footer: uitgelijnd met de inhoud (zelfde breedte) en in een raster */
.foot { padding:56px 16px 34px; } .foot .wrap { max-width:1088px; padding:0; }
.foot-top { display:grid; grid-template-columns:1.5fr 2.5fr; gap:40px; align-items:start; } .foot-cols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
@media (max-width:820px) { .foot-top { grid-template-columns:1fr; } .foot-cols { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px) { .foot-cols { grid-template-columns:1fr; } }
.foot-vzw, .foot-credits { max-width:none; }
.foot-why { max-width:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 28px; padding:20px 24px; } .foot-why h4 { grid-column:1 / -1; } .foot-why p { margin:0; } .foot-why .why-adv { grid-column:1 / -1; margin-top:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1); }
@media (max-width:820px) { .foot-why { grid-template-columns:1fr; } .foot-why p { margin-bottom:8px; } }
.foot-bottom { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; } .foot-bottom > :first-child { justify-self:start; } .foot-bottom > :last-child { justify-self:end; } .foot-legal { justify-content:center; }
@media (max-width:700px) { .foot-bottom { grid-template-columns:1fr; } .foot-bottom > * { justify-self:start !important; } .foot-legal { justify-content:flex-start; } }
.shot img { opacity:.5 !important; filter:saturate(1.1); } .shot::after { background:linear-gradient(90deg, color-mix(in srgb,var(--card) 92%,transparent) 0%, color-mix(in srgb,var(--card) 78%,transparent) 50%, color-mix(in srgb,var(--card) 25%,transparent) 100%) !important; }
.rhead { padding:26px 28px; gap:30px; }

/* Radar tijdens de scan (blauw met de kleuren van het Arcolos-schild) */
.radarscan { position:relative; width:min(320px, 80vw); aspect-ratio:1; margin:6px auto 10px; filter:drop-shadow(0 22px 34px rgba(0,0,0,.5)); }
.rs-prog { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); z-index:3; } .rs-prog .ring { fill:none; stroke:rgba(255,255,255,.08); stroke-width:2.2; } .rs-prog .arc { fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset .6s ease; filter:drop-shadow(0 0 4px rgba(240,180,41,.8)); }
.rs-disc { position:absolute; inset:7.5%; border-radius:50%; overflow:hidden; background:#030a1e; border:5px solid transparent; background-clip:padding-box; box-shadow:0 0 0 3px #aebbd6, 0 0 0 7px #4d5b78, 0 0 0 9px #cfd8ea, inset 0 0 40px rgba(0,0,0,.8), 0 0 40px rgba(31,86,207,.45); }
.rs-map { position:absolute; inset:0; width:100%; height:100%; }
.rs-sweep { position:absolute; inset:-1%; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 286deg, rgba(31,86,207,.12) 286deg, rgba(91,141,255,.38) 330deg, rgba(240,180,41,.8) 359deg, transparent 360deg); mix-blend-mode:screen; animation:rsSpin 3.2s linear infinite; }
.rs-sweep::after { content:""; position:absolute; left:calc(50% - 1px); top:0; width:2px; height:50%; background:linear-gradient(180deg, #ffd479, rgba(255,212,121,0)); box-shadow:0 0 12px 1px rgba(240,180,41,.7); }
@keyframes rsSpin { to { transform:rotate(360deg); } }
.rs-blips { position:absolute; inset:0; } .blip { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#8fb4ff; box-shadow:0 0 14px 4px rgba(91,141,255,.8); animation:blip 2.6s ease-out forwards; } .blip.b-ok { background:#ffd479; box-shadow:0 0 14px 4px rgba(240,180,41,.8); } .blip.b-warn { background:#ffb347; box-shadow:0 0 14px 4px rgba(255,140,40,.8); } .blip.b-err { background:#ff6a5e; box-shadow:0 0 14px 4px rgba(217,45,32,.8); }
@keyframes blip { 0% { transform:scale(.3); opacity:1; } 25% { transform:scale(1.2); opacity:1; } 100% { transform:scale(2.4); opacity:0; } }
.rs-glass { position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse 80% 45% at 50% 6%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(0,0,0,.45) 100%); }
#run-pct { position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); z-index:4; padding:3px 12px; border-radius:99px; font-size:15px; font-weight:800; background:rgba(10,20,40,.85); border:1px solid rgba(255,255,255,.2); color:#ffd479; }
.mapctl button { background:rgba(8,16,34,.78) !important; color:#fff; border:1px solid rgba(255,255,255,.25) !important; backdrop-filter:blur(8px); box-shadow:0 4px 10px rgba(0,0,0,.4) !important; } .mapctl button:hover { border-color:var(--gold) !important; }
@media (prefers-reduced-motion: reduce) { .rs-sweep { animation:none; } }

#run-pct { bottom:auto !important; transform:translate(-50%, -50%) !important; left:50%; top:6.7%; min-width:46px; text-align:center; padding:2px 8px; font-size:13px; transition:left .6s ease, top .6s ease; box-shadow:0 0 0 2px rgba(240,180,41,.55), 0 4px 12px rgba(0,0,0,.5); }
.rs-prog .ring { stroke:rgba(255,255,255,.1); } .rs-prog .arc { transition:stroke-dashoffset .6s ease, stroke .5s ease; }
.radarscan.done .rs-prog .arc { stroke:var(--accent2); filter:drop-shadow(0 0 6px rgba(91,141,255,.9)); } .radarscan.done .rs-disc { box-shadow:0 0 0 3px #aebbd6, 0 0 0 7px #3d5fb4, 0 0 0 9px #cfd8ea, inset 0 0 40px rgba(0,0,0,.8), 0 0 50px rgba(91,141,255,.65); } .radarscan.done #run-pct { display:none; }
.radarscan.done .rs-sweep { animation-duration:1.2s; }
/* Percentage zonder omlijning: enkel goudkleurige tekst met een donkere rand voor de leesbaarheid */
#run-pct { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; min-width:0 !important; font-size:15px; color:#ffd479; text-shadow:0 0 3px #030a1e, 0 0 3px #030a1e, 0 0 8px #030a1e, 0 0 10px rgba(240,180,41,.6); }

.chart .rlab { fill:var(--ink); font-size:12px; font-weight:700; paint-order:stroke; stroke:rgba(0,0,0,.35); stroke-width:3px; } .chart .rval { font-size:15px; font-weight:800; paint-order:stroke; stroke:rgba(0,0,0,.4); stroke-width:3px; }
.chart svg { filter:drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.zonelegend { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--muted); margin-top:6px; } .zonelegend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle; }

/* Kaart: hoger, met icoon-badges in dezelfde kleuren als de legende */
.mapcard .map { height:clamp(420px, 50vw, 600px); } .mapcard .map svg { width:100%; height:100%; }
.map .arc.k-web, .map .flow.k-web { stroke:#2fd38a; } .map .arc.k-mail, .map .flow.k-mail { stroke:#aab4c6; } .map .arc.k-dns, .map .flow.k-dns { stroke:#ffd479; } .map .arc.k-third, .map .flow.k-third { stroke:#ff7aa8; } .map .arc.k-home { stroke:#ff9a3c; }
.map .bdg circle { stroke:#fff; stroke-width:calc(1.6px * var(--z,1) * 1.5); filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.map .bdg.k-web circle { fill:#2fd38a; } .map .bdg.k-mail circle { fill:#8e9ab0; } .map .bdg.k-dns circle { fill:#f0b429; } .map .bdg.k-third circle { fill:#ff7aa8; } .map .bdg.k-home circle { fill:#ff9a3c; }
.map text.em { stroke:none !important; fill:#fff !important; paint-order:normal; font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif; pointer-events:none; }
.maplegend { background:rgba(8,16,34,.85) !important; backdrop-filter:blur(10px); gap:8px 18px; } .maplegend span { display:inline-flex; align-items:center; gap:7px; color:#dbe7ff; }
.lg-ic { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-style:normal; font-size:12px; line-height:1; border:1.5px solid rgba(255,255,255,.85); box-shadow:0 2px 6px rgba(0,0,0,.4); margin:0 !important; vertical-align:middle; }
.maplegend i.dyn { margin-right:0; }
.chk .lg-ic { margin-right:4px !important; }
.maplegend i.lg-ic, .chk .lg-ic { width:22px; height:22px; margin:0 !important; font-size:12px; }
.two-c > .card.mapcard { grid-column:1 / -1; } .two-c > .card:has(> .donut) { grid-column:1 / -1; } .two-c > .card:has(> .donut) .chk { columns:2; column-gap:30px; } @media (max-width:700px) { .two-c > .card:has(> .donut) .chk { columns:1; } }
.mapcard .map { height:clamp(380px, 46vw, 560px); }

.map .bdg circle, .map text.em { display:none; }
.ico-svg { vertical-align:middle; margin-right:6px; flex:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); } .maplegend .ico-svg { margin-right:0; } .chk li .ico-svg { margin-right:6px; }
.map .arc.k-web, .map .flow.k-web { stroke:#2fd38a; } .map .arc.k-mail, .map .flow.k-mail { stroke:#b4bccb; } .map .arc.k-dns, .map .flow.k-dns { stroke:#ffd02e; }

.nf { color:var(--gE); font-weight:600; } .kv a { word-break:break-all; }
/* Kaartlabels: dunne, ronde, doorzichtige rand i.p.v. een zware zwarte omlijning (geen kaders over de pictogrammen) */
.map svg text.plabel, .map svg .cl text, .map svg text { stroke:rgba(3,8,20,.7); stroke-width:calc(1.6px * var(--z,1) * 1.5); stroke-linejoin:round; stroke-linecap:round; paint-order:stroke; }
.map svg text.em { stroke:none; }

.rundetail { min-height:1.5em; margin:-8px 0 10px; color:var(--gold2); font-size:14px; font-weight:600; text-shadow:0 1px 0 rgba(0,0,0,.4); word-break:break-all; }

/* KPI-tegels als knoppen + oplichtende blokken */
button.kpi { text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%; } button.kpi:focus-visible { outline:3px solid var(--accent2); outline-offset:2px; }
.kpi[aria-pressed=true] { scale:1.06; border-color:var(--k) !important; box-shadow:0 0 0 2px var(--k), 0 0 36px color-mix(in srgb,var(--k) 55%,transparent) !important; }
.hl, .dim { transition:scale .25s cubic-bezier(.2,.8,.2,1), opacity .25s, box-shadow .25s, border-color .25s, filter .25s; }
.dim { opacity:.42 !important; filter:saturate(.6); }
.hl { scale:1.045; opacity:1; z-index:2; position:relative; }
.hl-risk { border-color:var(--gE) !important; box-shadow:0 0 0 2px var(--gE), 0 0 34px rgba(217,45,32,.55) !important; background-image:linear-gradient(145deg, rgba(217,45,32,.2), rgba(217,45,32,.05)) !important; }
.hl-attention { border-color:var(--gC) !important; box-shadow:0 0 0 2px var(--gC), 0 0 34px rgba(224,161,0,.5) !important; background-image:linear-gradient(145deg, rgba(224,161,0,.2), rgba(224,161,0,.05)) !important; }
.hl-ok { border-color:var(--gA) !important; box-shadow:0 0 0 2px var(--gA), 0 0 34px rgba(18,161,80,.5) !important; background-image:linear-gradient(145deg, rgba(18,161,80,.2), rgba(18,161,80,.05)) !important; }
.grp-panel { margin:14px 0 4px; padding:16px 18px; border-radius:var(--radius); border:2px solid transparent; } .grp-panel[hidden] { display:none; } .grp-panel .grp-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .grp-panel h3 { margin:0; }
.grp-panel .it.hl { scale:1; }
@media (prefers-reduced-motion: reduce) { .hl, .kpi[aria-pressed=true] { scale:none; } }

.hl-all, .hl-cats { border-color:var(--accent2) !important; box-shadow:0 0 0 2px var(--accent2), 0 0 34px rgba(91,141,255,.5) !important; background-image:linear-gradient(145deg, rgba(91,141,255,.2), rgba(91,141,255,.05)) !important; }
.catlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; } .catchip { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); } .catchip b { flex:1; font-size:14px; } .catchip .ico { font-size:18px; } .catchip span:last-child { font-weight:800; }
.card[data-cats].hl { scale:1.02; }

/* ===== Oplichten als glas: geen omlijning, maar een doorzichtig getint vlak met blur, inwendige glans en een zachte 3D-gloed ===== */
.hl-risk { --hc:217,45,32; } .hl-attention { --hc:224,161,0; } .hl-ok { --hc:18,161,80; } .hl-all, .hl-cats { --hc:91,141,255; }
.hl, .grp-panel[class*="hl-"] {
  border:1px solid rgba(var(--hc), .22) !important;
  background:linear-gradient(150deg, rgba(var(--hc), .30) 0%, rgba(var(--hc), .12) 55%, rgba(255,255,255,.06) 100%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -14px 26px rgba(var(--hc), .14), 0 18px 40px rgba(var(--hc), .34), 0 3px 8px rgba(0,0,0,.35) !important;
}
.hl { translate:0 -4px; scale:1.03; }
.hl::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%); mix-blend-mode:soft-light; }
.grp-panel[class*="hl-"] { border-radius:20px; padding:18px 20px; }
.grp-panel .it.hl { translate:none; scale:1; background:linear-gradient(150deg, rgba(var(--hc), .22), rgba(var(--hc), .06)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(var(--hc), .22) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.grp-panel .it.hl::before { display:none; }
.kpi[aria-pressed=true] { scale:1.05; translate:0 -4px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--k) 36%, transparent), color-mix(in srgb, var(--k) 12%, transparent) 60%, rgba(255,255,255,.06)) !important;
  border:1px solid color-mix(in srgb, var(--k) 30%, transparent) !important; -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -14px 26px color-mix(in srgb, var(--k) 16%, transparent), 0 18px 40px color-mix(in srgb, var(--k) 42%, transparent), 0 3px 8px rgba(0,0,0,.35) !important; }
@media (prefers-reduced-motion: reduce) { .hl, .kpi[aria-pressed=true] { translate:none; } }

/* ===== Alle tegels als echt glas (donker thema): lichte doorzichtige tint, blur, glanslijn en zachte schaduw ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .card:not(.mapcard):not(.hl):not(.grp-panel):not(.kpi),
  :root:not([data-theme=light]) .port:not(.stealth):not(.closed):not(.open),
  :root:not([data-theme=light]) .catchip, :root:not([data-theme=light]) .steps li {
    background:linear-gradient(150deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.06) 48%, rgba(255,255,255,.03) 100%) !important;
    border:1px solid rgba(255,255,255,.2) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -14px 24px rgba(255,255,255,.025), 0 16px 36px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.25) !important;
  }
  :root:not([data-theme=light]) .kpi:not([aria-pressed=true]) {
    background:linear-gradient(150deg, color-mix(in srgb, var(--k, #5b8dff) 30%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--k, #5b8dff) 11%, rgba(255,255,255,.03)) 55%, rgba(255,255,255,.05) 100%) !important;
    border:1px solid color-mix(in srgb, var(--k, #5b8dff) 34%, rgba(255,255,255,.14)) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -14px 24px color-mix(in srgb, var(--k, #5b8dff) 10%, transparent), 0 16px 36px color-mix(in srgb, var(--k, #5b8dff) 22%, rgba(0,0,0,.34)), 0 2px 6px rgba(0,0,0,.25) !important;
  }
  :root:not([data-theme=light]) .kpi::before { opacity:.4; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .key .it:not(.hl), :root:not([data-theme=light]) .todo .it:not(.hl) {
    background:linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.055) 50%, rgba(255,255,255,.03) 100%) !important; border:1px solid rgba(255,255,255,.18) !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 12px 28px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.22) !important;
  }
}

/* Categoriekaarten: glas in de kleur van de uitkomst (groen = in orde, geel = aandacht, rood = ernstig) */
.cat[data-state=ok] { --k:var(--gA); } .cat[data-state=attention] { --k:var(--gC); } .cat[data-state=risk] { --k:var(--gE); }
.card.cat[data-state]:not(.hl):not(.mapcard):not(.grp-panel):not(.kpi) {
  background:linear-gradient(150deg, color-mix(in srgb, var(--k) 30%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--k) 11%, rgba(255,255,255,.03)) 55%, rgba(255,255,255,.05) 100%) !important;
  border:1px solid color-mix(in srgb, var(--k) 34%, rgba(255,255,255,.14)) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -14px 24px color-mix(in srgb, var(--k) 10%, transparent), 0 16px 36px color-mix(in srgb, var(--k) 22%, rgba(0,0,0,.34)), 0 2px 6px rgba(0,0,0,.25) !important;
}
:root:not([data-theme=light]) .card.cat[data-state]:not(.hl):not(.mapcard):not(.grp-panel):not(.kpi) { background:linear-gradient(150deg, color-mix(in srgb, var(--k) 30%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--k) 11%, rgba(255,255,255,.03)) 55%, rgba(255,255,255,.05) 100%) !important; border:1px solid color-mix(in srgb, var(--k) 34%, rgba(255,255,255,.14)) !important; }

/* Blokken onder “Het belangrijkste in het kort” en “Wat kan je best doen”: glas in de kleur van de ernst */
.it[data-sev=crit] { --k:var(--gE); } .it[data-sev=high] { --k:var(--gD); } .it[data-sev=med] { --k:var(--gC); } .it[data-sev=low] { --k:var(--accent2); } .it[data-sev=info] { --k:var(--gN); } .it[data-sev=good] { --k:var(--gA); }
.key .it[data-sev]:not(.hl), .todo .it[data-sev]:not(.hl), :root:not([data-theme=light]) .key .it[data-sev]:not(.hl), :root:not([data-theme=light]) .todo .it[data-sev]:not(.hl) {
  background:linear-gradient(150deg, color-mix(in srgb, var(--k) 28%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--k) 10%, rgba(255,255,255,.03)) 55%, rgba(255,255,255,.05) 100%) !important;
  border:1px solid color-mix(in srgb, var(--k) 32%, rgba(255,255,255,.14)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -12px 22px color-mix(in srgb, var(--k) 9%, transparent), 0 12px 28px color-mix(in srgb, var(--k) 20%, rgba(0,0,0,.3)), 0 2px 5px rgba(0,0,0,.22) !important;
}

/* Kleuren per ernst in lijn met de tegels: ernstig = rood/oranje, aandacht = geel (middel) en lichtgeel (laag) */
.sv-low { background:#f7d56b !important; } .it[data-sev=low] { --k:#f7d56b; }

/* Klikbare locaties onder de kaart + oplichtend pictogram op de kaart */
.placebtn { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:6px; width:100%; padding:5px 8px; margin:1px -8px; border-radius:10px; cursor:pointer; color:var(--muted); font-size:14.5px; transition:background .2s, box-shadow .2s, transform .15s; } .placebtn.off { cursor:default; }
.placebtn:hover { background:rgba(255,255,255,.1); transform:translateX(3px); color:var(--ink); } .placebtn:focus-visible { outline:2px solid var(--accent2); }
.placebtn.active { color:var(--ink); background:linear-gradient(150deg, rgba(91,141,255,.32), rgba(91,141,255,.1)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(91,141,255,.3); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.map svg.has-lit .pnode:not(.lit) { opacity:.3; transition:opacity .3s; } .map svg.has-lit .arc, .map svg.has-lit .flow { opacity:.25; }

/* Zachter dimmen + sluitknop */
.dim { opacity:.62 !important; filter:saturate(.75); }
.grp-close { all:unset; box-sizing:border-box; margin-left:auto; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; cursor:pointer; font-size:22px; line-height:1; color:var(--ink); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); } .grp-close:hover { background:rgba(255,255,255,.25); } .grp-close:focus-visible { outline:2px solid var(--accent2); }

/* Bevindingenlijst (Advanced): glas in de kleur van de ernst */
.fd[data-sev=crit] { --k:var(--gE); } .fd[data-sev=high] { --k:var(--gD); } .fd[data-sev=med] { --k:var(--gC); } .fd[data-sev=low] { --k:#f7d56b; } .fd[data-sev=info] { --k:var(--gN); } .fd[data-sev=good] { --k:var(--gA); }
.fd[data-sev] {
  background:linear-gradient(150deg, color-mix(in srgb, var(--k) 26%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, var(--k) 9%, rgba(255,255,255,.03)) 55%, rgba(255,255,255,.05) 100%) !important;
  border:1px solid color-mix(in srgb, var(--k) 32%, rgba(255,255,255,.14)) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 20px color-mix(in srgb, var(--k) 8%, transparent), 0 10px 24px color-mix(in srgb, var(--k) 18%, rgba(0,0,0,.28)) !important;
}
.fd[data-sev] summary { padding:12px 16px; } .fd[data-sev][open] { box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 16px 34px color-mix(in srgb, var(--k) 30%, rgba(0,0,0,.3)) !important; }