/* Self-hosted fonts (latin subset) — served from /assets/fonts, no external requests */
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter.woff2) format('woff2');}
  @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk.woff2) format('woff2');}
  :root{
    /* soft dark base */
    --bg-0:#0c1017;
    --bg-1:#0f141d;
    --bg-2:#131a25;
    --surface: rgba(31,40,55,0.85);   /* semi-dekkend paneel: achtergrond schijnt amper door */
    --surface-2: rgba(40,51,69,0.88);
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);

    /* text */
    --text:#e8eef7;
    --muted:#bcc6d4;
    --faint:#93a0b1;

    /* vibrant accents */
    --accent:#38bdf8;      /* cyan */
    --accent-2:#5b8bff;    /* blue */
    --accent-3:#5b8bff;    /* blauw (was violet) */
    --success:#3ddc84;

    --grad: linear-gradient(120deg,var(--accent),var(--accent-2));
    --radius:16px;
    --radius-sm:12px;
    --shadow: 0 20px 50px -18px rgba(0,0,0,0.75);
    --shadow-glow: 0 0 0 1px rgba(56,189,248,0.25), 0 24px 60px -20px rgba(56,139,248,0.45);
    --ease: cubic-bezier(.22,.9,.32,1);
  }

  *{box-sizing:border-box}
  /* de vaste navbalk is ~71px hoog; zonder deze marge landt een anchor-sprong
     er half achter. scroll-padding-top houdt het doel netjes vrij onder de balk. */
  html{scroll-behavior:smooth; scroll-padding-top:90px}
  html,body{height:100%}
  body{
    margin:0;
    font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background:var(--bg-0);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:"Space Grotesk","Inter",sans-serif; font-weight:600; line-height:1.15; letter-spacing:-0.01em;}
  a{color:inherit}
  ::selection{background:rgba(56,189,248,0.28)}

  /* ---------- BACKGROUND LAYERS ---------- */
  .bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
  .bg::before{ /* rustige, egale donkere basis met één subtiele blauwe gloed bovenaan */
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(1100px 620px at 82% -14%, rgba(56,139,248,0.07), transparent 62%),
      linear-gradient(180deg,var(--bg-0), var(--bg-1) 45%, var(--bg-2));
  }
  /* subtiel tech-grid — transparanter zodat het opgaat in de achtergrond */
  .grid-layer{position:absolute; inset:-2px;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 100% 75% at 50% 28%, #000 55%, transparent 100%);
            mask-image:radial-gradient(ellipse 100% 75% at 50% 28%, #000 55%, transparent 100%);
  }
  #net-canvas{position:absolute; inset:0; opacity:0.7;}

  @media (prefers-reduced-motion: reduce){
    #net-canvas{display:none}
    .reveal{opacity:1 !important; transform:none !important}
  }

  /* ---------- NAVBAR ---------- */
  .nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s var(--ease), backdrop-filter .3s, border-color .3s;
    border-bottom:1px solid transparent;}
  .nav.scrolled{background:rgba(10,14,20,0.72); backdrop-filter:blur(10px) saturate(130%); border-bottom:1px solid var(--border);}
  .nav-inner{max-width:1180px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px;}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; font-family:"Space Grotesk";}
  .brand-logo{width:42px; height:42px; display:grid; place-items:center;}
  .brand-logo img{width:100%; height:100%; object-fit:contain; display:block;}
  .brand span{font-size:16px; letter-spacing:-0.02em;}
  .brand span b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .nav-links{display:flex; align-items:center; gap:6px;}
  .nav-links a{text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; padding:8px 12px; border-radius:9px; transition:color .2s, background .2s;}
  .nav-links a:hover{color:var(--text); background:var(--surface);}
  .nav-cta{display:flex; align-items:center; gap:10px;}
  .menu-toggle{display:none; background:var(--surface); border:1px solid var(--border); color:var(--text); width:42px; height:40px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center;}
  @media (max-width:860px){
    .nav-links{display:none; position:absolute; top:70px; left:14px; right:14px; flex-direction:column; align-items:stretch; padding:10px; gap:4px; background:rgba(12,16,24,0.96); backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);}
    .nav-links.open{display:flex}
    .nav-links a{padding:12px 14px}
    .menu-toggle{display:grid}
    .nav-cta .btn{display:none}
  }

  /* ---------- LAYOUT ---------- */
  .wrap{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 22px 90px;}
  /* het anchor-doel wordt nu centraal via scroll-padding-top op <html> vrijgehouden,
     zodat élk doel (ook niet-<section>) even netjes onder de navbalk landt */
  .section-head{max-width:860px; margin:0 auto 26px;}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); padding:6px 12px; border-radius:999px; background:rgba(56,189,248,0.08); border:1px solid rgba(56,189,248,0.18);}
  h2{font-size:clamp(24px,3.4vw,34px); margin:14px 0 8px;}
  .lead{color:var(--muted); font-size:clamp(15px,1.5vw,17px);}

  /* ---------- BUTTONS ---------- */
  .btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; background:var(--grad); background-size:160% 160%; color:#04121f; border:0; padding:12px 20px; border-radius:11px; font-weight:700; font-size:14.5px; cursor:pointer; box-shadow:0 12px 30px -10px rgba(56,139,248,0.6); transition:transform .25s var(--ease), box-shadow .25s, background-position .5s;}
  .btn:hover{transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(56,139,248,0.75); background-position:100% 0;}
  .btn:active{transform:translateY(0)}
  .btn.ghost{background:var(--surface); color:var(--text); border:1px solid var(--border-strong); box-shadow:none;}
  .btn.ghost:hover{background:var(--surface-2); border-color:var(--accent);}
  .btn.sm{padding:9px 15px; font-size:13.5px;}
  .btn svg{width:17px; height:17px;}

  /* ---------- HERO ---------- */
  .hero{min-height:84vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:118px 12px 48px; gap:22px;}
  .hero-badge{display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); padding:7px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border);}
  .hero-badge .pulse{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(61,220,132,0.6); animation:pulse 2.2s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,0.5)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
  .hero h1{font-size:clamp(34px,6.4vw,66px); margin:0; max-width:30ch;}
  .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .hero .slogan{color:var(--muted); max-width:780px; font-size:clamp(16px,2vw,19px);}
  .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:4px;}
  .hero-meta{display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin-top:20px; color:var(--faint); font-size:13.5px;}
  .hero-meta .m{display:flex; align-items:center; gap:8px;}
  .hero-meta svg{width:16px; height:16px; color:var(--accent);}

  .float-row{display:flex; gap:14px; margin-top:26px; justify-content:center; flex-wrap:wrap;}
  .float-item{width:60px; height:60px; border-radius:15px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--accent); animation:floaty 6s ease-in-out infinite; transition:transform .5s var(--ease), border-color .3s, box-shadow .3s;}
  .float-item:nth-child(2){animation-delay:.8s} .float-item:nth-child(3){animation-delay:1.6s} .float-item:nth-child(4){animation-delay:2.4s}
  .float-item:hover{transform:translateY(-8px); border-color:var(--accent); box-shadow:var(--shadow-glow); color:#fff;}
  .float-item svg{width:26px; height:26px;}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

  /* ---------- STATS ---------- */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px;}
  @media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
  .stat{padding:22px 18px; text-align:center; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);}
  .stat .num{font-family:"Space Grotesk"; font-size:clamp(26px,3.6vw,34px); font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat .lbl{color:var(--muted); font-size:13.5px; margin-top:4px;}

  /* ---------- GENERIC CARD / GLASS ---------- */
  section.block{margin-top:96px; content-visibility:auto; contain-intrinsic-size:auto 620px;}

  /* ---------- BANNER ---------- */
  .banner{position:relative; overflow:hidden; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:22px 24px; border-radius:var(--radius); background:linear-gradient(100deg, rgba(56,139,248,0.14), rgba(91,139,255,0.08)), rgba(15,21,31,0.85); border:1px solid rgba(91,139,255,0.22); margin-top:34px;}
  .banner::after{content:""; position:absolute; inset:0; background:radial-gradient(500px 200px at 90% 0%, rgba(56,189,248,0.18), transparent 70%); pointer-events:none;}
  .banner .left{display:flex; gap:16px; align-items:center; position:relative;}
  .banner .b-icon{width:52px; height:52px; border-radius:13px; display:grid; place-items:center; background:var(--grad); color:#04121f; flex-shrink:0; box-shadow:0 10px 26px -8px rgba(56,139,248,0.6);}
  .banner .b-icon svg{width:26px; height:26px;}
  .banner strong{font-size:16px; display:block;}
  .banner p{margin:2px 0 0; color:var(--muted); font-size:14px;}
  .banner .right{display:flex; gap:12px; align-items:center; position:relative; flex-wrap:wrap;}
  .badge{padding:8px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--muted); font-weight:600; font-size:12.5px;}

  /* ---------- ABOUT ---------- */
  /* Kolommen strekken tot gelijke hoogte; de aside-kaarten verdelen die hoogte
     onderling, zodat de onderrand van beide kolommen op één lijn valt */
  .two-col{display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:stretch;}
  @media (max-width:900px){.two-col{grid-template-columns:1fr}}
  .two-col aside{display:flex; flex-direction:column; gap:14px;}
  /* linkerkolom: tekst boven, kaartjes tegen de onderrand — eindigt gelijk met de aside */
  .two-col > div:first-child{display:flex; flex-direction:column;}
  .two-col .mini-grid{margin-top:auto; padding-top:22px;}
  .about-p{color:var(--muted); font-size:15.5px;}
  .mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px;}
  @media (max-width:560px){.mini-grid{grid-template-columns:1fr}}
  .mini{display:flex; gap:13px; align-items:flex-start; padding:15px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); transition:transform .3s var(--ease), border-color .3s;}
  .mini:hover{transform:translateY(-4px); border-color:var(--border-strong);}
  .mini .m-ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(56,189,248,0.10); color:var(--accent); flex-shrink:0;}
  .mini .m-ico svg{width:22px; height:22px;}
  .mini h4{margin:0 0 3px; font-size:14.5px;}
  .mini p{margin:0; color:var(--faint); font-size:13px;}
  .aside-card{padding:20px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); flex:1;}
  .aside-card strong{display:flex; align-items:center; gap:9px; font-family:"Space Grotesk";}
  .aside-card strong .dot{width:8px; height:8px; border-radius:50%; background:var(--grad);}
  .aside-card p{margin:10px 0 0; color:var(--muted); font-size:13.5px;}

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px;}
  @media (max-width:1000px){.services-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.services-grid{grid-template-columns:1fr}}
  .service{position:relative; padding:24px 22px; border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(180deg, var(--surface), rgba(16,22,32,0.6)); overflow:hidden; transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;}
  .service::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);}
  .service:hover{transform:translateY(-8px); border-color:rgba(56,189,248,0.4); box-shadow:var(--shadow-glow);}
  .service:hover::before{transform:scaleX(1);}
  .sicon{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; background:rgba(56,189,248,0.09); border:1px solid rgba(56,189,248,0.16); color:var(--accent); transition:transform .35s var(--ease);}
  .service:hover .sicon{transform:scale(1.06) rotate(-3deg);}
  .sicon svg{width:28px; height:28px;}
  .service h3{margin:0 0 8px; font-size:17px;}
  .service p{margin:0; color:var(--muted); font-size:14px;}
  .services-note{color:var(--faint); font-size:14px; margin-top:20px; text-align:center;}

  /* ---------- USE CASES ---------- */
  .usecases{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px;}
  @media (max-width:900px){.usecases{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.usecases{grid-template-columns:1fr}}
  .case{padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); transition:transform .3s var(--ease), border-color .3s;}
  .case:hover{transform:translateY(-5px); border-color:var(--border-strong);}
  .case .c-ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(56,189,248,0.10); color:var(--accent); margin-bottom:12px;}
  .case .c-ico svg{width:22px; height:22px;}
  .case strong{font-size:15px; display:block; margin-bottom:5px;}
  .case p{margin:0; color:var(--faint); font-size:13.5px;}

  /* ---------- TRUST / WHY ---------- */
  .trust{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px;}
  @media (max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.trust{grid-template-columns:1fr}}
  /* 3-koloms variant (werkwijze-stappen): gecentreerd, gelijk aan de rest */
  .trust.cols-3{grid-template-columns:repeat(3,1fr); max-width:940px; margin-left:auto; margin-right:auto;}
  @media (max-width:820px){.trust.cols-3{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.trust.cols-3{grid-template-columns:1fr}}
  .trust .item{display:flex; flex-direction:column; gap:12px; padding:22px 20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);}
  .trust .t-ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--grad); color:#04121f;}
  .trust .t-ico svg{width:24px; height:24px;}
  .trust .item b{font-size:15px;}
  .trust .item span{color:var(--muted); font-size:13.5px;}

  /* ---------- REVIEWS ---------- */
  .reviews-wrap{overflow:hidden; position:relative; margin-top:8px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
  .review-track{display:flex; gap:18px; will-change:transform;}
  .review-track.animating{transition:transform .55s var(--ease);}
  .review{min-width:min(420px, 82vw); max-width:440px; padding:26px; border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(180deg, var(--surface), rgba(16,22,32,0.6)); box-shadow:var(--shadow);}
  .review .stars{color:#ffc861; letter-spacing:2px; font-size:15px; margin-bottom:10px;}
  .review p{margin:0 0 16px; font-size:15.5px; color:var(--text);}
  .review .who{display:flex; align-items:center; gap:12px;}
  .review .avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-family:"Space Grotesk"; color:#04121f; background:var(--grad);}
  .review .who small{color:var(--faint); font-size:13px;}
  .review-controls{display:flex; gap:8px; margin-top:20px; justify-content:center;}
  .dot{width:9px; height:9px; border-radius:999px; background:var(--border-strong); cursor:pointer; transition:width .3s, background .3s; border:0; padding:0;}
  .dot.active{width:26px; background:var(--grad);}

  /* ---------- CTA PANEL ---------- */
  .cta-panel{position:relative; overflow:hidden; padding:40px; border-radius:22px; text-align:center; background:linear-gradient(120deg, rgba(56,139,248,0.16), rgba(91,139,255,0.12)), rgba(15,21,31,0.85); border:1px solid rgba(91,139,255,0.24);}
  .cta-panel::after{content:""; position:absolute; inset:0; background:radial-gradient(600px 260px at 50% -20%, rgba(56,189,248,0.22), transparent 70%); pointer-events:none;}
  .cta-panel h2{margin:0 0 10px; position:relative;}
  .cta-panel p{color:var(--muted); max-width:560px; margin:0 auto 22px; position:relative;}
  .cta-panel .cta-row{position:relative;}

  /* ---------- CONTACT ---------- */
  /* Infokaart strekt mee met het formulier; de regels verdelen de hoogte gelijkmatig */
  .contact-grid{display:grid; grid-template-columns:1fr 420px; gap:22px; align-items:stretch;}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
  .form{padding:26px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface);}
  .field{display:flex; flex-direction:column; gap:7px; margin-bottom:15px;}
  .field label{font-size:13px; color:var(--muted); font-weight:500;}
  .field input, .field textarea{background:rgba(0,0,0,0.25); border:1px solid var(--border); padding:12px 14px; border-radius:11px; color:var(--text); outline:none; font-family:inherit; font-size:14.5px; transition:border-color .2s, box-shadow .2s;}
  .field input:focus, .field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,189,248,0.14);}
  .field textarea{min-height:130px; resize:vertical;}
  .form .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
  #send-status{color:var(--success); font-size:13px;}

  .info-card{padding:26px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center;}
  .info-card .map-svg{position:absolute; inset:0; width:100%; height:100%; opacity:0.10; pointer-events:none;}
  .info-line{display:flex; gap:13px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); position:relative; flex:1;}
  .info-line:last-child{border-bottom:0;}
  .info-line .i-ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(56,189,248,0.10); color:var(--accent); flex-shrink:0;}
  .info-line .i-ico svg{width:20px; height:20px;}
  .info-line b{font-size:14.5px;}
  .info-line span{color:var(--muted); font-size:13.5px;}
  .info-line a{color:var(--accent); text-decoration:none;}
  .info-line a:hover{text-decoration:underline;}

  /* ---------- FOOTER ---------- */
  footer{margin-top:80px; padding-top:36px; border-top:1px solid var(--border); position:relative; z-index:2;}
  .footer-inner{max-width:1180px; margin:0 auto; padding:0 22px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
  .footer-inner .muted{color:var(--faint); font-size:13.5px;}
  .socials{display:flex; gap:10px;}
  .socials a{width:42px; height:42px; border-radius:11px; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); transition:transform .25s var(--ease), color .25s, border-color .25s;}
  .socials a:hover{transform:translateY(-3px); color:var(--accent); border-color:var(--accent);}
  .socials svg{width:18px; height:18px;}

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.visible{opacity:1; transform:none;}

  /* ---------- CLICKABLE BLOCKS ---------- */
  [data-goto]{cursor:pointer;}
  [data-goto]:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

  /* ---------- TOAST ---------- */
  .toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(24px); z-index:100;
    display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:12px; max-width:90vw;
    background:rgba(14,19,28,0.92); backdrop-filter:blur(12px); border:1px solid var(--border-strong);
    color:var(--text); font-size:14px; box-shadow:var(--shadow); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast svg{width:18px; height:18px; color:var(--accent); flex-shrink:0;}


  /* ---------- SUBPAGE HELPERS ---------- */
  .page-hero{padding:132px 12px 24px; text-align:center;}
  .page-hero .eyebrow{margin-bottom:14px;}
  .page-hero h1{font-size:clamp(30px,5vw,52px); margin:0 auto; max-width:30ch;}
  .page-hero h1 .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .page-hero .lead{max-width:780px; margin:16px auto 0;}
  .page-section{margin-top:40px;}

  /* ---------- MOBILE PERFORMANCE ---------- */
  @media (max-width:640px){
    .grid-layer{background-size:44px 44px;}
  }

  /* ---------- TERMINAL WINDOW ---------- */
  /* Linux-terminal venster om tekstblokken heen; knopjes lichten op bij hover (klikken doet niets) */
  .terminal{border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:#0a0e15; overflow:hidden; box-shadow:var(--shadow);}
  .term-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,0.045); border-bottom:1px solid var(--border);}
  .term-dot{width:12px; height:12px; border-radius:50%; flex-shrink:0; cursor:default; transition:filter .18s, box-shadow .18s;}
  .term-dot.close{background:#ff5f57; color:#ff5f57;}
  .term-dot.min{background:#febc2e; color:#febc2e;}
  .term-dot.max{background:#28c840; color:#28c840;}
  .term-dot:hover{filter:brightness(1.3); box-shadow:0 0 9px 1px currentColor;}
  .term-title{margin-left:10px; font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace; font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .term-body{padding:20px 22px;}
  .term-body h2{margin-top:0;}
  .term-body .about-p:last-child{margin-bottom:0;}
  .term-cmd{font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace; font-size:13px; color:var(--success); margin:0 0 14px;}
  .term-cmd .prompt{color:var(--accent); margin-right:6px;}
  .term-cursor{display:inline-block; width:8px; height:15px; margin-left:6px; vertical-align:text-bottom; background:var(--success); opacity:0.85; animation:term-blink 1.1s steps(1) infinite;}
  @keyframes term-blink{50%{opacity:0}}
  @media (prefers-reduced-motion: reduce){ .term-cursor{animation:none} }

  /* ---------- CONTACT FORM EXTRA'S ---------- */
  .hp{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden;} /* honeypot: onzichtbaar voor mensen */
  #send-status.error{color:#ff7a70;}

  /* ---------- NAV DROPDOWN (Diensten) ---------- */
  .nav-item.has-drop{position:relative;}
  .nav-drop-toggle{display:inline-flex; align-items:center; gap:5px; background:none; border:0; color:var(--muted); font:inherit; font-size:14px; font-weight:500; padding:8px 12px; border-radius:9px; cursor:pointer; transition:color .2s, background .2s;}
  .nav-drop-toggle:hover, .has-drop.open .nav-drop-toggle{color:var(--text); background:var(--surface);}
  .nav-drop-toggle .caret{width:15px; height:15px; transition:transform .25s var(--ease);}
  .has-drop.open .nav-drop-toggle .caret{transform:rotate(180deg);}
  .nav-drop{position:absolute; top:calc(100% + 8px); left:0; min-width:266px; display:flex; flex-direction:column; gap:2px; padding:8px; background:rgba(12,16,24,0.98); backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility .2s; z-index:60;}
  .has-drop.open .nav-drop, .has-drop:hover .nav-drop{opacity:1; visibility:visible; transform:none;}
  .nav-drop a{padding:10px 12px; border-radius:9px; font-size:14px; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .2s, background .2s;}
  .nav-drop a:hover{color:var(--text); background:var(--surface);}
  @media (max-width:860px){
    .nav-item.has-drop{width:100%;}
    .nav-drop-toggle{width:100%; justify-content:space-between; padding:12px 14px;}
    .nav-drop{position:static; min-width:0; opacity:1; visibility:visible; transform:none; display:none; padding:2px 0 6px 12px; background:transparent; border:0; box-shadow:none; backdrop-filter:none;}
    .has-drop.open .nav-drop{display:flex;}
    .has-drop:hover .nav-drop{visibility:hidden;}   /* geen hover-opening op touch */
    .has-drop.open .nav-drop{visibility:visible;}
  }

  /* ---------- FOOTER NAVIGATIE ---------- */
  .footer-top{max-width:1180px; margin:0 auto; padding:0 22px 32px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:34px;}
  @media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr; gap:28px;}}
  @media (max-width:520px){.footer-top{grid-template-columns:1fr;}}
  .footer-brand .brand{margin-bottom:12px;}
  .footer-brand p{color:var(--faint); font-size:13.5px; max-width:320px; margin:0; line-height:1.6;}
  .footer-col{display:flex; flex-direction:column; gap:10px;}
  .footer-col h4{font-family:"Space Grotesk"; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 4px;}
  .footer-col a, .footer-col span{color:var(--faint); font-size:13.5px; text-decoration:none; transition:color .2s;}
  .footer-col a:hover{color:var(--accent);}
  .footer-inner{border-top:1px solid var(--border); padding-top:22px; margin-top:6px;}

  /* ---------- LEES OOK / GERELATEERDE PAGINA'S ---------- */
  .related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px;}
  @media (max-width:700px){.related-grid{grid-template-columns:1fr;}}
  .related-card{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); text-decoration:none; color:inherit; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;}
  .related-card:hover{transform:translateY(-4px); border-color:rgba(56,189,248,0.4); box-shadow:var(--shadow-glow);}
  .related-card .r-ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(56,189,248,0.09); border:1px solid rgba(56,189,248,0.16); color:var(--accent); flex-shrink:0;}
  .related-card .r-ico svg{width:24px; height:24px;}
  .related-card .r-text{display:flex; flex-direction:column; min-width:0;}
  .related-card b{font-size:15px; font-family:"Space Grotesk";}
  .related-card .r-desc{color:var(--faint); font-size:13px; margin-top:2px;}
  .related-card .r-arrow{margin-left:auto; color:var(--muted); flex-shrink:0; transition:transform .3s var(--ease), color .3s;}
  .related-card .r-arrow svg{width:20px; height:20px; display:block;}
  .related-card:hover .r-arrow{transform:translateX(4px); color:var(--accent);}

  /* =======================================================================
     WEBSITES & WEBAPPLICATIES — showcase-onderdelen
     Alles hieronder hoort bij de webdesign-dienst: de featured-blok op de
     homepage en /pages/websites.html. Elk onderdeel valt netjes terug op een
     statische weergave als de browser iets niet ondersteunt, en staat stil
     bij `prefers-reduced-motion`.
     ======================================================================= */

  /* ---------- 1. VIEW TRANSITIONS (paginawissel zonder witte flits) ----------
     Cross-document: browsers die het kennen wisselen vloeiend tussen pagina's,
     de rest navigeert gewoon zoals altijd.

     TWEE DINGEN GINGEN HIER EERDER MIS, allebei zichtbaar als tekst die even
     over elkaar heen stond zodra je in het menu een dienst aanklikte:

     1. Nav, footer en achtergrond blijven staan tijdens de wissel. Ze stonden
        met `animation:none` op zowel de oude als de nieuwe momentopname, en dan
        schildert de browser die twee de hele overgang lang over elkaar heen.
        Je zag dus het nog openstaande uitklapmenu van de vórige pagina boven op
        de nieuwe. Daarom staat de oude nu op `display:none`: alleen de nieuwe
        blijft over, en die staat er meteen goed.
     2. De oude en de nieuwe pagina vervaagden tegelijk én schoven daarbij langs
        elkaar. Twee keer tekst op nét andere posities leest als dubbelzien. Nu
        gaat de oude eerst weg en komt de nieuwe daarna pas op, zonder
        verschuiving. Juist dat schuiven maakte de dubbele tekst zo opvallend.

     De achtergrond krijgt een eigen naam zodat die tijdens het korte moment
     tussen weg en op gewoon blijft staan. Anders kijk je even tegen niets aan. */
  @view-transition{ navigation:auto; }
  .nav{view-transition-name:site-nav;}
  footer{view-transition-name:site-footer;}
  .bg{view-transition-name:site-bg;}

  @keyframes vt-out{to{opacity:0;}}
  @keyframes vt-in{from{opacity:0;}}
  ::view-transition-old(root){animation:vt-out .12s var(--ease) both;}
  ::view-transition-new(root){animation:vt-in .2s var(--ease) .12s both;}

  /* blijvende onderdelen: oude momentopname weg, nieuwe direct scherp */
  ::view-transition-old(site-nav),
  ::view-transition-old(site-footer),
  ::view-transition-old(site-bg){display:none;}
  ::view-transition-new(site-nav),
  ::view-transition-new(site-footer),
  ::view-transition-new(site-bg){animation:none; mix-blend-mode:normal;}

  @media (prefers-reduced-motion: reduce){
    ::view-transition-old(root), ::view-transition-new(root){animation:none;}
  }

  /* ---------- 2. SCROLL-PROGRESSBALK ----------
     Pure CSS waar scroll-timelines bestaan; anders vult main.js hem. */
  .scroll-progress{position:fixed; top:0; left:0; height:2px; width:100%; z-index:60; transform-origin:0 50%;
    transform:scaleX(var(--sp, 0)); background:var(--grad); box-shadow:0 0 12px rgba(56,189,248,0.5); pointer-events:none;}
  @supports (animation-timeline: scroll()){
    .scroll-progress{animation:sp-grow linear both; animation-timeline:scroll(root block); transform:scaleX(0);}
    @keyframes sp-grow{to{transform:scaleX(1)}}
  }

  /* ---------- 3. SCROLL-DRIVEN REVEALS ----------
     Waar de browser scroll-timelines kent nemen die het over van de
     IntersectionObserver: de animatie loopt dan op de compositor (vloeiender
     op telefoons). Elders blijft de bestaande .reveal/.visible-aanpak staan. */
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      .reveal{animation:reveal-in linear both; animation-timeline:view(); animation-range:entry 8% cover 26%;}
      @keyframes reveal-in{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
    }
  }

  /* ---------- 4. SECTIE-RAIL (actieve sectie in beeld) ---------- */
  .sec-rail{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:14px;
    opacity:0; transition:opacity .4s var(--ease); pointer-events:none;}
  .sec-rail.on{opacity:1; pointer-events:auto;}
  .sec-rail a{position:relative; width:9px; height:9px; border-radius:999px; background:var(--border-strong); text-decoration:none;
    transition:background .3s var(--ease), transform .3s var(--ease);}
  .sec-rail a::after{content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%) translateX(6px);
    white-space:nowrap; font-size:12px; color:var(--muted); background:rgba(12,16,24,0.94); border:1px solid var(--border);
    padding:5px 10px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);}
  .sec-rail a:hover::after{opacity:1; transform:translateY(-50%) translateX(0);}
  .sec-rail a:hover{background:var(--muted);}
  .sec-rail a.active{background:var(--accent); transform:scale(1.35); box-shadow:0 0 0 4px rgba(56,189,248,0.16);}
  @media (max-width:1320px){.sec-rail{display:none}}

  /* ---------- 5. SPOTLIGHT-KAARTEN (glans volgt de cursor) ----------
     main.js schrijft --mx/--my (percentages) op de kaart bij muisbeweging. */
  .spot{position:relative; isolation:isolate;}
  .spot::before{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; opacity:0;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(56,189,248,0.16), transparent 62%);
    transition:opacity .35s var(--ease);}
  .spot::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0; pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(120,200,255,0.75), transparent 60%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    transition:opacity .35s var(--ease);}
  .spot:hover::before, .spot:hover::after{opacity:1;}

  /* ---------- 6. 3D-TILT ----------
     main.js zet --rx/--ry; alleen op apparaten met een echte muis. */
  .tilt{transform-style:preserve-3d; transition:transform .5s var(--ease);}
  .tilt.live{transition:transform .12s linear;
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);}
  .tilt-layer{transform:translateZ(38px);}
  @media (hover:none), (prefers-reduced-motion: reduce){
    .tilt, .tilt.live{transform:none !important;}
  }

  /* ---------- 7. LETTER-VOOR-LETTER KOPPEN ---------- */
  .split .ch{display:inline-block;}
  .split[data-ready] .ch{opacity:0;}
  /* het decodeer-effect op één woord in de hero */
  .decode{font-variant-ligatures:none;}

  /* ---------- 8. LIVE PRESTATIEMETERS ----------
     De cijfers komen uit de Performance API van de bezoeker zelf. */
  .metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px;}
  @media (max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:460px){.metrics{grid-template-columns:1fr}}
  .metric{padding:24px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); text-align:center;}
  .gauge{position:relative; width:104px; height:104px; margin:0 auto 12px;}
  .gauge svg{width:100%; height:100%; transform:rotate(-90deg);}
  .gauge .track{stroke:rgba(255,255,255,0.09);}
  .gauge .bar{stroke:url(#g-grad); stroke-linecap:round; transition:stroke-dashoffset 1.4s var(--ease);}
  .gauge .val{position:absolute; inset:0; display:grid; place-items:center; font-family:"Space Grotesk"; font-weight:700; font-size:19px;}
  .gauge .val small{font-size:11px; font-weight:500; color:var(--faint); display:block; margin-top:-2px;}
  .metric b{font-size:14.5px; display:block;}
  .metric span{color:var(--faint); font-size:12.5px;}
  .metrics-note{color:var(--faint); font-size:13px; text-align:center; margin-top:18px;}
  .metrics-note b{color:var(--muted);}

  /* ---------- 9. ARCHITECTUUR-DIAGRAM (pulsen over de lijnen) ---------- */
  .arch{padding:26px 22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); overflow:hidden;}
  .arch svg{width:100%; height:auto; display:block;}
  .arch .flow{stroke:rgba(120,180,255,0.28); stroke-width:1.6; fill:none;}
  .arch .node-box{fill:rgba(20,28,40,0.9); stroke:var(--border-strong);}
  .arch .node-txt{fill:var(--muted); font-size:11px; font-family:"Inter",sans-serif;}
  .arch .node-lbl{fill:var(--text); font-size:12.5px; font-weight:600; font-family:"Space Grotesk",sans-serif;}
  .arch .pulse-dot{fill:var(--accent); filter:drop-shadow(0 0 6px rgba(56,189,248,0.9));}
  @media (prefers-reduced-motion: reduce){ .arch .pulse-dot{display:none} }

  /* ---------- 10. HORIZONTAAL SCROLLEND PROCES ----------
     De sectie is hoog; de inhoud plakt en schuift zijwaarts mee met de scroll.
     Zonder JS (of met reduced-motion) wordt het gewoon een nette rij kaarten. */
  .hscroll{position:relative;}
  .hscroll-sticky{position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
  .hscroll-track{display:flex; gap:20px; will-change:transform;}
  .hpanel{flex:0 0 min(400px, 82vw); padding:28px 26px; border-radius:var(--radius); background:linear-gradient(180deg, var(--surface), rgba(16,22,32,0.6));
    border:1px solid var(--border); display:flex; flex-direction:column; gap:12px;}
  .hpanel .step{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px;
    background:var(--grad); color:#04121f; font-family:"Space Grotesk"; font-weight:700; font-size:16px;}
  .hpanel h3{margin:0; font-size:19px;}
  .hpanel p{margin:0; color:var(--muted); font-size:14.5px;}
  .hpanel ul{margin:4px 0 0; padding-left:18px; color:var(--faint); font-size:13.5px; line-height:1.8;}
  .hscroll-bar{height:3px; border-radius:999px; background:var(--border); margin:28px auto 0; max-width:280px; overflow:hidden;}
  .hscroll-bar i{display:block; height:100%; width:var(--hp,0%); background:var(--grad); border-radius:999px;}
  .hscroll:not(.js) .hscroll-sticky{position:static; min-height:0;}
  .hscroll:not(.js) .hscroll-track{flex-wrap:wrap; justify-content:center;}
  .hscroll:not(.js) .hscroll-bar{display:none;}
  @media (prefers-reduced-motion: reduce){
    .hscroll-sticky{position:static; min-height:0;}
    .hscroll-track{flex-wrap:wrap; justify-content:center; transform:none !important;}
    .hscroll-bar{display:none;}
  }

  /* ---------- 11. PORTFOLIO-RASTER MET FILTER (FLIP-animatie) ---------- */
  .pf-filters{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 0 22px;}
  .pf-filters button{background:var(--surface); border:1px solid var(--border); color:var(--muted); font:inherit; font-size:13.5px; font-weight:600;
    padding:9px 16px; border-radius:999px; cursor:pointer; transition:color .25s, background .25s, border-color .25s, transform .25s var(--ease);}
  .pf-filters button:hover{color:var(--text); border-color:var(--border-strong); transform:translateY(-2px);}
  .pf-filters button.active{color:#04121f; background:var(--grad); border-color:transparent;}
  .pf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media (max-width:960px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.pf-grid{grid-template-columns:1fr}}
  .pf-card{position:relative; overflow:hidden; padding:22px; border-radius:var(--radius); border:1px solid var(--border);
    background:linear-gradient(180deg, var(--surface), rgba(16,22,32,0.6)); transition:border-color .35s, box-shadow .35s;}
  .pf-card:hover{border-color:rgba(56,189,248,0.4); box-shadow:var(--shadow-glow);}
  .pf-card[hidden]{display:none;}
  .pf-thumb{height:132px; border-radius:var(--radius-sm); border:1px solid var(--border); margin-bottom:16px; position:relative; overflow:hidden;
    background:linear-gradient(140deg, rgba(56,189,248,0.16), rgba(91,139,255,0.06)), #0a0e15;}
  .pf-thumb::after{content:""; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:22px 22px;}
  .pf-thumb .glyph{position:absolute; inset:0; display:grid; place-items:center; color:var(--accent); opacity:.85;}
  .pf-thumb .glyph svg{width:40px; height:40px;}
  .pf-card h3{margin:0 0 6px; font-size:16.5px;}
  .pf-card p{margin:0 0 14px; color:var(--muted); font-size:13.5px;}
  .pf-tags{display:flex; gap:6px; flex-wrap:wrap;}
  .pf-tags span{font-size:11.5px; font-weight:600; color:var(--faint); background:rgba(255,255,255,0.05); border:1px solid var(--border);
    padding:4px 9px; border-radius:999px;}

  /* ---------- 12. BROWSERVENSTER (code links, resultaat rechts) ---------- */
  .browser{border-radius:var(--radius); border:1px solid var(--border-strong); background:#0a0e15; overflow:hidden; box-shadow:var(--shadow);}
  .browser-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,0.045); border-bottom:1px solid var(--border);}
  .browser-bar .term-dot{width:11px; height:11px;}
  .browser-url{flex:1; margin-left:8px; padding:5px 12px; border-radius:999px; background:rgba(0,0,0,0.35); border:1px solid var(--border);
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:7px;}
  .browser-url svg{width:12px; height:12px; color:var(--success); flex-shrink:0;}
  .browser-split{display:grid; grid-template-columns:1fr 1fr; min-height:330px;}
  @media (max-width:760px){.browser-split{grid-template-columns:1fr} .code-pane{max-height:220px}}
  .code-pane{padding:16px 18px; border-right:1px solid var(--border); overflow:auto;
    font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace; font-size:12.5px; line-height:1.75; color:#cbd5e1;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);}
  .code-pane pre{margin:0; white-space:pre-wrap; word-break:break-word;}
  .code-pane .t{color:#7dd3fc;} .code-pane .a{color:#c4b5fd;} .code-pane .s{color:#86efac;} .code-pane .c{color:#64748b;}
  .code-caret{display:inline-block; width:7px; height:14px; background:var(--accent); vertical-align:text-bottom; animation:term-blink 1.1s steps(1) infinite;}
  .result-pane{padding:20px; display:flex; flex-direction:column; gap:12px; background:radial-gradient(600px 300px at 70% -10%, rgba(56,139,248,0.10), transparent 70%);}
  .rp-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; opacity:0; transform:translateY(-6px); transition:opacity .45s var(--ease), transform .45s var(--ease);}
  .rp-nav .logo{display:flex; align-items:center; gap:8px; font-family:"Space Grotesk"; font-weight:700; font-size:13px;}
  .rp-nav .logo i{width:20px; height:20px; border-radius:6px; background:var(--grad); display:block;}
  .rp-nav .links{display:flex; gap:10px;}
  .rp-nav .links i{display:block; width:30px; height:6px; border-radius:999px; background:rgba(255,255,255,0.14);}
  .rp-hero{opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease) .05s, transform .5s var(--ease) .05s;}
  .rp-hero b{display:block; font-family:"Space Grotesk"; font-size:19px; line-height:1.25;}
  .rp-hero p{margin:7px 0 0; color:var(--muted); font-size:12.5px;}
  .rp-btns{display:flex; gap:8px; margin-top:12px;}
  .rp-btns i{display:block; height:26px; border-radius:8px;}
  .rp-btns i:first-child{width:96px; background:var(--grad);}
  .rp-btns i:last-child{width:74px; background:rgba(255,255,255,0.08); border:1px solid var(--border);}
  .rp-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:auto; opacity:0; transform:translateY(12px);
    transition:opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s;}
  .rp-cards i{display:block; height:52px; border-radius:10px; background:rgba(255,255,255,0.05); border:1px solid var(--border);}
  .browser.step-1 .rp-nav, .browser.step-2 .rp-nav, .browser.step-3 .rp-nav{opacity:1; transform:none;}
  .browser.step-2 .rp-hero, .browser.step-3 .rp-hero{opacity:1; transform:none;}
  .browser.step-3 .rp-cards{opacity:1; transform:none;}

  /* featured-blok op de homepage */
  .webdev-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:26px; align-items:center; margin-top:22px;}
  @media (max-width:1000px){.webdev-grid{grid-template-columns:1fr}}
  .webdev-copy h3{margin:0 0 10px; font-size:clamp(20px,2.6vw,27px);}
  .webdev-copy > p{margin:0 0 18px; color:var(--muted); font-size:15.5px;}
  .check-list{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px;}
  .check-list li{display:flex; align-items:flex-start; gap:11px; color:var(--muted); font-size:14.5px;}
  .check-list svg{width:18px; height:18px; color:var(--success); flex-shrink:0; margin-top:3px;}
  /* de vijfde dienstkaart loopt over de volle breedte van het raster */
  .service.wide{grid-column:1 / -1; display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
  .service.wide .sicon{margin-bottom:0;}
  .service.wide .sw-text{flex:1 1 320px; min-width:0;}
  .service.wide .sw-go{display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:700; font-size:14px; white-space:nowrap;}
  .service.wide .sw-go svg{width:17px; height:17px; transition:transform .3s var(--ease);}
  .service.wide:hover .sw-go svg{transform:translateX(4px);}
  .pill-new{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#04121f; background:var(--grad); padding:4px 10px; border-radius:999px; margin-bottom:9px;}

  /* ---------- 13. CONFIGURATOR ---------- */
  .cfg{display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; margin-top:10px;}
  @media (max-width:900px){.cfg{grid-template-columns:1fr}}
  .cfg-panel{padding:26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);}
  .cfg-group{margin-bottom:24px;}
  .cfg-group:last-child{margin-bottom:0;}
  .cfg-group > h4{margin:0 0 4px; font-size:15px;}
  .cfg-group > .hint{margin:0 0 13px; color:var(--faint); font-size:13px;}
  .cfg-opts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  @media (max-width:560px){.cfg-opts{grid-template-columns:1fr}}
  .cfg-opt{position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px 15px; border-radius:var(--radius-sm);
    background:rgba(0,0,0,0.22); border:1px solid var(--border); cursor:pointer; transition:border-color .25s, background .25s, transform .25s var(--ease);}
  .cfg-opt:hover{transform:translateY(-2px); border-color:var(--border-strong);}
  .cfg-opt input{position:absolute; opacity:0; width:0; height:0;}
  .cfg-opt .mark{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--border-strong); flex-shrink:0; margin-top:2px;
    display:grid; place-items:center; transition:background .25s, border-color .25s;}
  .cfg-opt input[type="radio"] ~ .mark{border-radius:50%;}
  .cfg-opt .mark svg{width:12px; height:12px; color:#04121f; opacity:0; transition:opacity .2s;}
  .cfg-opt:has(input:checked){border-color:var(--accent); background:rgba(56,189,248,0.08);}
  .cfg-opt:has(input:checked) .mark{background:var(--grad); border-color:transparent;}
  .cfg-opt:has(input:checked) .mark svg{opacity:1;}
  .cfg-opt:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
  .cfg-opt b{display:block; font-size:14px;}
  .cfg-opt span{color:var(--faint); font-size:12.5px;}
  .cfg-range{display:flex; align-items:center; gap:16px;}
  .cfg-range input[type="range"]{flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:999px; background:var(--border-strong); outline:none;}
  .cfg-range input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--grad);
    cursor:pointer; box-shadow:0 4px 14px -3px rgba(56,139,248,0.8); transition:transform .2s var(--ease);}
  .cfg-range input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);}
  .cfg-range input[type="range"]::-moz-range-thumb{width:20px; height:20px; border:0; border-radius:50%; background:#38bdf8; cursor:pointer;}
  .cfg-range output{font-family:"Space Grotesk"; font-weight:700; font-size:17px; min-width:74px; text-align:right;}
  .cfg-summary{position:sticky; top:96px; padding:26px; border-radius:var(--radius); border:1px solid rgba(91,139,255,0.24);
    background:linear-gradient(120deg, rgba(56,139,248,0.14), rgba(91,139,255,0.08)), rgba(15,21,31,0.9);}
  .cfg-summary h4{margin:0 0 4px; font-size:15px;}
  .cfg-price{font-family:"Space Grotesk"; font-weight:700; font-size:clamp(30px,4vw,40px); background:var(--grad);
    -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.2; margin:10px 0 2px;}
  .cfg-price-note{color:var(--faint); font-size:12.5px; margin:0 0 18px;}
  .cfg-lines{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13.5px;}
  .cfg-lines li{display:flex; justify-content:space-between; gap:12px; color:var(--muted); padding-bottom:8px; border-bottom:1px solid var(--border);}
  .cfg-lines li:last-child{border-bottom:0;}
  .cfg-lines li span:last-child{color:var(--text); font-weight:600; white-space:nowrap;}
  .cfg-summary .btn{width:100%; justify-content:center;}
  .cfg-disclaimer{color:var(--faint); font-size:12px; margin:14px 0 0; line-height:1.55;}

  /* ---------- 14. PAKKETKAARTEN + schakelaar ---------- */
  .pkg-switch{display:inline-flex; align-items:center; gap:4px; padding:5px; border-radius:999px; background:var(--surface);
    border:1px solid var(--border); margin:0 auto 26px; position:relative;}
  .pkg-switch button{position:relative; z-index:2; background:none; border:0; color:var(--muted); font:inherit; font-size:13.5px; font-weight:600;
    padding:9px 20px; border-radius:999px; cursor:pointer; transition:color .3s var(--ease);}
  .pkg-switch button.active{color:#04121f;}
  .pkg-switch .thumb{position:absolute; z-index:1; top:5px; bottom:5px; border-radius:999px; background:var(--grad);
    transition:left .38s var(--ease), width .38s var(--ease);}
  .pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media (max-width:900px){.pkg-grid{grid-template-columns:1fr; max-width:460px; margin:0 auto;}}
  .pkg{position:relative; display:flex; flex-direction:column; padding:28px 24px; border-radius:var(--radius); border:1px solid var(--border);
    background:linear-gradient(180deg, var(--surface), rgba(16,22,32,0.6)); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;}
  .pkg:hover{transform:translateY(-6px); border-color:rgba(56,189,248,0.4); box-shadow:var(--shadow-glow);}
  .pkg.featured{border-color:rgba(56,189,248,0.45); box-shadow:var(--shadow-glow);}
  .pkg .tag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:#04121f; background:var(--grad); padding:4px 12px; border-radius:999px; white-space:nowrap;}
  .pkg h3{margin:0 0 5px; font-size:18px;}
  .pkg .sub{color:var(--faint); font-size:13px; margin:0 0 16px;}
  .pkg .amount{font-family:"Space Grotesk"; font-weight:700; font-size:34px; line-height:1.1;}
  .pkg .amount small{font-size:13px; font-weight:500; color:var(--faint); font-family:"Inter",sans-serif;}
  .pkg .from{color:var(--faint); font-size:12.5px; margin:2px 0 20px;}
  .pkg ul{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--muted);}
  .pkg ul li{display:flex; gap:10px; align-items:flex-start;}
  .pkg ul svg{width:16px; height:16px; color:var(--accent); flex-shrink:0; margin-top:3px;}
  .pkg .btn{margin-top:auto; justify-content:center;}

  /* ---------- 15. COMMANDOPALET (Ctrl/⌘ + K) ----------
     De opmaak wordt door main.js aangemaakt, zodat elke pagina hem krijgt. */
  .cmdk{position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; padding:14vh 18px 18px;
    background:rgba(6,9,14,0.62); backdrop-filter:blur(6px); opacity:0; transition:opacity .22s var(--ease);}
  .cmdk.open{display:flex;}
  .cmdk.show{opacity:1;}
  .cmdk-box{width:min(560px,100%); border-radius:16px; border:1px solid var(--border-strong); background:rgba(13,18,27,0.97);
    box-shadow:var(--shadow); overflow:hidden; transform:translateY(-12px) scale(.985); transition:transform .26s var(--ease);}
  .cmdk.show .cmdk-box{transform:none;}
  .cmdk-head{display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--border);}
  .cmdk-head svg{width:18px; height:18px; color:var(--accent); flex-shrink:0;}
  .cmdk-head input{flex:1; background:none; border:0; outline:none; color:var(--text); font-family:inherit; font-size:15.5px;}
  .cmdk-head input::placeholder{color:var(--faint);}
  .cmdk-head kbd{font-family:ui-monospace,Consolas,monospace; font-size:11px; color:var(--faint); border:1px solid var(--border);
    border-radius:6px; padding:3px 7px; background:rgba(255,255,255,0.04);}
  .cmdk-list{max-height:46vh; overflow:auto; padding:8px;}
  .cmdk-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 13px; border-radius:10px; border:0;
    background:none; color:var(--muted); font:inherit; font-size:14px; text-decoration:none; cursor:pointer;}
  .cmdk-item .ico{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(56,189,248,0.10);
    color:var(--accent); flex-shrink:0;}
  .cmdk-item .ico svg{width:17px; height:17px;}
  .cmdk-item .txt{min-width:0;}
  .cmdk-item b{display:block; color:var(--text); font-size:14px; font-weight:600;}
  .cmdk-item small{color:var(--faint); font-size:12.5px;}
  .cmdk-item.sel{background:var(--surface-2); color:var(--text);}
  .cmdk-item.sel .ico{background:var(--grad); color:#04121f;}
  .cmdk-empty{padding:26px 16px; text-align:center; color:var(--faint); font-size:13.5px;}
  .cmdk-foot{display:flex; gap:16px; padding:11px 18px; border-top:1px solid var(--border); color:var(--faint); font-size:12px;}
  .cmdk-foot span{display:flex; align-items:center; gap:6px;}
  /* In rust een compacte ronde knop die binnen de paginamarge past, zodat hij
     de inhoud niet overlapt. Bij hover of toetsfocus schuift de volledige hint
     open. Halfdoorzichtig in rust, volledig zichtbaar zodra je hem aanwijst. */
  .cmdk-hint{position:fixed; right:18px; bottom:18px; z-index:45; display:inline-flex; align-items:center; gap:0; padding:9px;
    border-radius:999px; background:rgba(13,18,27,0.42); backdrop-filter:blur(10px); border:1px solid var(--border); color:var(--faint);
    font-size:12.5px; line-height:1; cursor:pointer; opacity:0; transform:translateY(10px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), color .25s, border-color .25s, background-color .25s, gap .3s var(--ease), padding .3s var(--ease);}
  .cmdk-hint.on{opacity:.5; transform:none;}
  .cmdk-hint:hover, .cmdk-hint:focus-visible{opacity:1; color:var(--text); border-color:var(--accent);
    background:rgba(13,18,27,0.92); gap:8px; padding:9px 14px 9px 12px;}
  .cmdk-hint .ico{width:17px; height:17px; flex-shrink:0;}
  .cmdk-hint kbd{font-family:ui-monospace,Consolas,monospace; font-size:11px; border:1px solid var(--border); border-radius:5px; padding:2px 6px; margin-right:4px;}
  /* het label klapt open via max-width, zodat de knop soepel meegroeit */
  .cmdk-hint .lbl{display:inline-flex; align-items:center; max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
    transition:max-width .32s var(--ease), opacity .22s var(--ease);}
  .cmdk-hint:hover .lbl, .cmdk-hint:focus-visible .lbl{max-width:190px; opacity:1;}
  @media (max-width:860px){.cmdk-hint{display:none}}
  @media (prefers-reduced-motion: reduce){
    .cmdk-hint, .cmdk-hint .lbl{transition:opacity .2s, color .2s, border-color .2s, background-color .2s;}
  }

  /* ---------- 16. KLEINE HELPERS ---------- */
  .stack-row{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:22px;}
  .stack-row .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--surface);
    border:1px solid var(--border); color:var(--muted); font-size:13px; transition:transform .25s var(--ease), border-color .25s, color .25s;}
  .stack-row .chip:hover{transform:translateY(-3px); border-color:var(--accent); color:var(--text);}
  .stack-row .chip svg{width:15px; height:15px; color:var(--accent);}

  /* =======================================================================
     NETWERKTEST — controleert of advertentie- en trackerdomeinen bereikbaar
     zijn vanaf dit apparaat. Opmaak hoort bij pages/netwerktest.html en
     assets/js/netwerktest.js.
     ======================================================================= */

  :root{
    --danger:#ff6b63;
    --warn:#ffb03a;
  }

  /* ---------- startpaneel ---------- */
  .nt-panel{position:relative; overflow:hidden; padding:32px; border-radius:22px; text-align:center;
    background:linear-gradient(120deg, rgba(56,139,248,0.16), rgba(91,139,255,0.12)), rgba(15,21,31,0.88);
    border:1px solid rgba(91,139,255,0.24);}
  .nt-panel::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(600px 260px at 50% -20%, rgba(56,189,248,0.22), transparent 70%);}
  .nt-panel > *{position:relative;}
  .nt-panel h2{margin:0 0 10px;}
  .nt-panel > p{color:var(--muted); max-width:620px; margin:0 auto 22px;}
  .nt-start{font-size:16px; padding:15px 30px;}
  .nt-privacy{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-top:22px;
    color:var(--faint); font-size:13px;}
  .nt-privacy span{display:inline-flex; align-items:center; gap:7px;}
  .nt-privacy svg{width:15px; height:15px; color:var(--success); flex-shrink:0;}

  /* ---------- voortgang ---------- */
  .nt-progress{max-width:560px; margin:24px auto 0; display:none;}
  .nt-progress.on{display:block;}
  .nt-bar{height:6px; border-radius:999px; background:rgba(255,255,255,0.09); overflow:hidden;}
  .nt-bar i{display:block; height:100%; width:0; border-radius:999px; background:var(--grad);
    transition:width .25s linear;}
  .nt-progress .lbl{display:flex; justify-content:space-between; gap:14px; margin-top:10px;
    color:var(--faint); font-size:12.5px; font-family:ui-monospace,Consolas,monospace;}
  .nt-progress .lbl b{color:var(--muted); font-weight:600;}

  /* ---------- waarschuwing (geen verbinding / test onbetrouwbaar) ---------- */
  .nt-warning{display:none; gap:13px; align-items:flex-start; max-width:640px; margin:22px auto 0; padding:16px 18px;
    border-radius:var(--radius-sm); background:rgba(255,176,58,0.08); border:1px solid rgba(255,176,58,0.32);
    text-align:left; color:var(--muted); font-size:13.5px;}
  .nt-warning.on{display:flex;}
  .nt-warning svg{width:19px; height:19px; color:var(--warn); flex-shrink:0; margin-top:2px;}
  .nt-warning b{display:block; color:var(--text); margin-bottom:3px;}

  /* ---------- de twee scores ---------- */
  .nt-scores{display:none; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px;}
  .nt-scores.on{display:grid;}
  @media (max-width:760px){.nt-scores{grid-template-columns:1fr}}
  .score-card{position:relative; padding:28px 24px; border-radius:var(--radius); border:1px solid var(--border);
    background:linear-gradient(180deg, var(--surface), rgba(16,22,32,0.6)); text-align:center;}
  .score-card.primary{border-color:rgba(56,189,248,0.35); box-shadow:var(--shadow-glow);}
  .score-card .kind{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:16px;}
  .score-card .kind svg{width:15px; height:15px;}
  .gauge.lg{width:168px; height:168px; margin-bottom:16px;}
  .gauge.lg .val{font-size:38px;}
  .gauge.lg .val small{font-size:12px; margin-top:0;}
  .gauge .bar.good{stroke:var(--success);} .gauge .bar.mid{stroke:var(--warn);} .gauge .bar.bad{stroke:var(--danger);}

  /* ---------- gloed om de ring ----------
     Géén drop-shadow op de <circle>: een SVG knipt alles buiten zijn viewBox
     weg, en omdat de ring al tot aan de rand loopt sneed dat de gloed er
     kaarsrecht af. Je zag dan een vierkant om de meter staan.
     Dit is in plaats daarvan een ronde gloed áchter de ring, opgebouwd uit een
     radiaal verloop dat naar transparant uitloopt. Zo is er nergens een rand
     die abrupt kan stoppen, ongeacht de grootte van het blok. */
  .score-card .gauge{position:relative; isolation:isolate;}
  .score-card .gauge::before{
    content:""; position:absolute; inset:-16%; z-index:-1; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle closest-side,
      transparent 48%, var(--glow, transparent) 70%, transparent 92%);
    filter:blur(9px);
    opacity:0; transform:scale(.94);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .score-card.done .gauge::before{opacity:1; transform:none;}
  .score-card.band-good{--glow:rgba(61,220,132,0.55);}
  .score-card.band-mid {--glow:rgba(255,176,58,0.50);}
  .score-card.band-bad {--glow:rgba(255,107,99,0.50);}
  .gauge .val{transform-origin:50% 50%;}
  @media (prefers-reduced-motion: reduce){
    .score-card .gauge::before{transition:none;}
  }
  .score-card h3{margin:0 0 6px; font-size:18px;}
  .score-card .verdict{margin:0; color:var(--muted); font-size:14px;}
  .score-card .counts{margin:14px 0 0; color:var(--faint); font-size:13px;
    font-family:ui-monospace,Consolas,monospace;}
  .score-card .counts b{color:var(--text);}

  /* ---------- categorieën ---------- */
  .nt-results{display:none; margin-top:22px;}
  .nt-results.on{display:block;}
  .nt-cats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:960px){.nt-cats{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.nt-cats{grid-template-columns:1fr}}
  .nt-cat{padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);}
  .nt-cat .head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
  .nt-cat .c-ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
    background:rgba(56,189,248,0.10); color:var(--accent); flex-shrink:0;}
  .nt-cat .c-ico svg{width:20px; height:20px;}
  .nt-cat b{font-size:15px; display:block;}
  .nt-cat .sub{color:var(--faint); font-size:12.5px;}
  .nt-cat .ratio{margin-left:auto; font-family:"Space Grotesk"; font-weight:700; font-size:17px;}
  .nt-cat .ratio.good{color:var(--success);} .nt-cat .ratio.mid{color:var(--warn);} .nt-cat .ratio.bad{color:var(--danger);}
  .nt-cat .track{height:5px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden;}
  .nt-cat .track i{display:block; height:100%; width:0; border-radius:999px; background:var(--success);
    transition:width .8s var(--ease);}
  .nt-cat .track i.mid{background:var(--warn);} .nt-cat .track i.bad{background:var(--danger);}
  .nt-cat details{margin-top:14px;}
  .nt-cat summary{cursor:pointer; color:var(--muted); font-size:13px; list-style:none; display:flex;
    align-items:center; gap:7px; transition:color .2s;}
  .nt-cat summary::-webkit-details-marker{display:none;}
  .nt-cat summary::before{content:""; width:7px; height:7px; border-right:1.6px solid currentColor;
    border-bottom:1.6px solid currentColor; transform:rotate(-45deg); transition:transform .25s var(--ease);}
  .nt-cat details[open] summary::before{transform:rotate(45deg);}
  .nt-cat summary:hover{color:var(--text);}
  .nt-hosts{list-style:none; margin:12px 0 0; padding:0; max-height:260px; overflow:auto;
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12px;}
  .nt-hosts li{display:flex; align-items:center; gap:9px; padding:5px 0; border-bottom:1px solid var(--border);
    color:var(--faint); word-break:break-all;}
  .nt-hosts li:last-child{border-bottom:0;}
  .nt-hosts .pip{width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--faint);}
  .nt-hosts li.blocked .pip{background:var(--success);}
  .nt-hosts li.open .pip{background:var(--danger);}
  .nt-hosts li.timeout .pip{background:var(--warn);}
  .nt-hosts li.open{color:var(--muted);}
  .nt-hosts .state{margin-left:auto; flex-shrink:0; font-size:11px; white-space:nowrap;}
  .nt-hosts li.blocked .state{color:var(--success);}
  .nt-hosts li.open .state{color:var(--danger);}
  .nt-hosts li.timeout .state{color:var(--warn);}

  /* ---------- controlegroep ----------
     Staat bovenaan de uitslag: bereikbare controledomeinen bewijzen dat de
     meting werkt, en dat een score van 100% dus echt 100% is. */
  .nt-control{margin-bottom:18px; padding:20px 22px; border-radius:var(--radius); border:1px solid var(--border);
    background:var(--surface);}
  .nt-control.ok{border-color:rgba(61,220,132,0.34); background:rgba(61,220,132,0.06);}
  .nt-control.partial{border-color:rgba(255,176,58,0.34); background:rgba(255,176,58,0.06);}
  .nt-control.fail{border-color:rgba(255,107,99,0.36); background:rgba(255,107,99,0.06);}
  .nt-control .head{display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;}
  .nt-control .c-ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;}
  .nt-control .c-ico svg{width:21px; height:21px;}
  .nt-control.ok .c-ico{background:rgba(61,220,132,0.14); color:var(--success);}
  .nt-control.partial .c-ico{background:rgba(255,176,58,0.14); color:var(--warn);}
  .nt-control.fail .c-ico{background:rgba(255,107,99,0.14); color:var(--danger);}
  .nt-control b{display:block; font-size:15px; margin-bottom:2px;}
  .nt-control .sub{color:var(--muted); font-size:13.5px; display:block;}
  .nt-control .nt-hosts{max-height:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0 22px;}

  .nt-note{margin:12px 0 0; color:var(--faint); font-size:12px; line-height:1.5;}

  /* ---------- browsertests ---------- */
  .nt-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .nt-checks li{display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:var(--muted); text-align:left;}
  .nt-checks .pip{width:9px; height:9px; border-radius:50%; background:var(--faint); flex-shrink:0; margin-top:5px;}
  .nt-checks li.blocked .pip{background:var(--success);}
  .nt-checks li.open .pip{background:var(--danger);}
  .nt-checks small{display:block; color:var(--faint); font-size:12px;}

  /* ---------- advies ---------- */
  .nt-advice{display:none; margin-top:22px; padding:26px; border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--border);}
  .nt-advice.on{display:block;}
  .nt-advice h3{margin:0 0 6px; font-size:19px;}
  .nt-advice > p{margin:0 0 18px; color:var(--muted); font-size:14.5px;}
  .nt-advice ul{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px;}
  .nt-advice li{display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:14px;}
  .nt-advice li svg{width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:3px;}
  .nt-actions{display:flex; gap:10px; flex-wrap:wrap;}

  /* twee even brede kolommen — als klasse en niet inline, anders wint het
     van de mobiele regel hierboven en blijven het op een telefoon twee
     onleesbaar smalle kolommen */
  .two-col.even{grid-template-columns:1fr 1fr;}
  @media (max-width:900px){ .two-col.even{grid-template-columns:1fr;} }

  /* het onzichtbare doelwit voor de cosmetische test */
  .nt-bait{position:absolute; left:-9999px; top:0; width:300px; height:250px;}

  /* ---------- banner-knop die de test opent ---------- */
  .banner .right .btn{white-space:nowrap;}