/* 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:#080b11;
    --bg-1:#0b0f16;
    --bg-2:#0e131c;
    --surface: rgba(21,28,40,0.82);   /* semi-dekkend paneel: achtergrond schijnt amper door */
    --surface-2: rgba(28,36,50,0.86);
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);

    /* text */
    --text:#e8eef7;
    --muted:#95a3b6;
    --faint:#6c7a8d;

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

    --grad: linear-gradient(120deg,var(--accent),var(--accent-2) 55%,var(--accent-3));
    --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}
  html{scroll-behavior:smooth}
  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{ /* base radial glow */
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(1200px 700px at 78% -8%, rgba(91,139,255,0.16), transparent 60%),
      radial-gradient(1000px 620px at 8% 12%, rgba(160,107,255,0.12), transparent 55%),
      radial-gradient(900px 700px at 50% 108%, rgba(56,189,248,0.10), transparent 60%),
      linear-gradient(180deg,var(--bg-0), var(--bg-1) 40%, var(--bg-2));
  }
  /* subtle tech grid */
  .grid-layer{position:absolute; inset:-2px;
    background-image:
      linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:radial-gradient(ellipse 100% 70% at 50% 30%, #000 55%, transparent 100%);
            mask-image:radial-gradient(ellipse 100% 70% at 50% 30%, #000 55%, transparent 100%);
  }
  /* drifting aurora blobs */
  .orb{position:absolute; border-radius:50%; filter:blur(54px); opacity:0.5; will-change:transform; transform:translateZ(0);}
  .orb.a{width:520px; height:520px; top:-140px; right:-80px; background:radial-gradient(circle at 30% 30%, rgba(91,139,255,0.55), transparent 70%); animation:drift1 26s ease-in-out infinite;}
  .orb.b{width:460px; height:460px; bottom:-160px; left:-100px; background:radial-gradient(circle at 40% 40%, rgba(160,107,255,0.45), transparent 70%); animation:drift2 32s ease-in-out infinite;}
  .orb.c{width:420px; height:420px; top:38%; left:44%; background:radial-gradient(circle at 50% 50%, rgba(56,189,248,0.30), transparent 70%); animation:drift3 30s ease-in-out infinite;}
  @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,50px)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,-40px)}}
  @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,-50px) scale(1.08)}}
  #net-canvas{position:absolute; inset:0; opacity:0.9;}

  @media (prefers-reduced-motion: reduce){
    .orb{animation:none !important}
    #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:38px; height:38px; border-radius:10px; padding:5px; background:var(--grad); display:grid; place-items:center; box-shadow:0 8px 22px -6px rgba(56,139,248,0.6);}
  .brand-logo img{max-width:100%; max-height:100%; border-radius:6px; 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;}
  section{scroll-margin-top:90px;}
  .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;}
  .hero h1 .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(160,107,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(160,107,255,0.10); color:var(--accent-3); 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}}
  .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(160,107,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){
    .orb{display:none;}           /* grote blurs zijn duur op mobiele GPU's */
    .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} }