/* =================== General =================== */
body{
    margin:0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:#eafaf5;
    color:#1a1a1a;
    overflow-x:hidden;
}
.container{ max-width:1100px; margin:0 auto; padding:2rem; }

/* shared section/particles layering */
section{ position:relative; z-index:1; }
.particle-wrapper{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* =================== Header + Navigation =================== */
header{
    background-color:#0f2b22;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    position:relative;
    overflow:hidden;
    padding-bottom:0;
    z-index:0;
}
header .container{
    display:flex; align-items:center; justify-content:space-between;
    padding:.5rem 2rem;
}
/* header particles sit behind header content */
header .particle-wrapper{ z-index:0; }
header .particle-wrapper #tsparticles_header{
    position:absolute; inset:0; width:100%; height:100%; opacity:.45; pointer-events:none;
}

.logo img{ height:200px; width:auto; display:block; margin-left:0; }

nav ul{
    list-style:none; display:flex; align-items:center; gap:1.5rem;
    padding:0; margin:0; justify-content:flex-end; position:relative; z-index:1;
}
nav a{
    display:inline-block; padding:.5rem 1rem; border:2px solid #00ffaa;
    border-radius:6px; color:#fff; text-decoration:none; font-weight:500;
    background:transparent;
    transition:background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
nav a:hover{ background-color:rgba(255,255,255,.7); color:#0f2b22; box-shadow:0 0 10px rgba(0,210,170,.4); }

/* --- Language toggle --- */
.lang-li{ display:flex; align-items:center; }
.lang-switch{ display:inline-flex; align-items:center; position:relative; line-height:0; }
.lang-switch input{
    position:absolute; inset:0; margin:0; z-index:3; cursor:pointer;
    opacity:0; appearance:none; -webkit-appearance:none; background:none; border:0;
}
.lang-track{
    --p:3px;
    position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center;
    width:92px; height:34px; padding:0;
    border:2px solid #00ffaa; border-radius:999px;
    background:rgba(0,255,170,.08);
    transition:box-shadow .2s ease, background-color .2s ease;
}
.lang-switch:hover .lang-track{ box-shadow:0 0 14px rgba(0,255,170,.35); }
.lang-label{
    display:flex; align-items:center; justify-content:center;
    font-size:.78rem; font-weight:700; letter-spacing:.2px;
    color:#b0f2dd; opacity:.55; z-index:2; text-align:center;
}
.lang-thumb{
    position:absolute; top:1px; left:var(--p);
    width:calc(50% - var(--p)*2); height:calc(100% - var(--p)*2);
    border-radius:999px; background:#0f2b22; border:2px solid #00ffaa;
    box-shadow:0 0 10px rgba(0,255,170,.35), inset 0 0 10px rgba(0,255,170,.15);
    transition:left .22s ease;
}
.lang-switch input:not(:checked) + .lang-track .lang-en{ opacity:1; color:#00ffaa; text-shadow:0 0 6px rgba(0,255,170,.6); }
.lang-switch input:checked       + .lang-track .lang-nl{ opacity:1; color:#00ffaa; text-shadow:0 0 6px rgba(0,255,170,.6); }
.lang-switch input:checked + .lang-track .lang-thumb{ left:50%; }

/* --- Hamburger --- */
.hamburger{
    display:none; position:relative; width:38px; height:38px;
    border:1px solid rgba(0,255,170,.6); border-radius:10px;
    background:rgba(0,255,170,.08); cursor:pointer; z-index:3;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
    position:absolute; left:50%; width:20px; height:2px; background:#e8fff8; transform:translateX(-50%); content:"";
}
.hamburger span{ top:50%; transform:translate(-50%,-50%); }
.hamburger span::before{ top:-6px; }
.hamburger span::after { top: 6px; }
header.menu-open .hamburger span{ background:transparent; }
header.menu-open .hamburger span::before{ top:0; transform:translateX(-50%) rotate(45deg); }
header.menu-open .hamburger span::after { top:0; transform:translateX(-50%) rotate(-45deg); }

/* =================== PCB trace divider (top of hero) =================== */
.pcb-over-hero{
    position:absolute; top:-46px; left:0; right:0; height:64px;
    background:transparent; pointer-events:none; z-index:3;
}
.pcb-svg{ width:100%; height:100%; display:block; }
.pcb-trace{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pcb-trace--base{ stroke:rgba(0,255,170,.18); stroke-width:6; }
.pcb-trace--glow{
    stroke:#a24cf1; stroke-width:3; filter:drop-shadow(0 0 4px rgba(0,255,170,.28));
    stroke-dasharray:8 10; animation:pcbFlow 3.2s linear infinite;
}
@keyframes pcbFlow{ to{ stroke-dashoffset:-300; } }
@media (prefers-reduced-motion:reduce){
    .pcb-trace--glow{ animation:none; stroke-dasharray:none; }
}

/* =================== Hero =================== */
.hero{
    position:relative; z-index:2; margin-top:-1px; padding:7rem 2rem 8rem;
    background:
            linear-gradient(to bottom, rgba(0,0,0,.65), rgba(15,43,34,1)),
            url("../images/background-image.png") center/cover no-repeat;
    color:#fff; overflow:visible;
}
.hero .container{ text-align:center; }
.hero h2, .hero .subtitle, .hero .hero-description{ margin-left:auto; margin-right:auto; position:relative; z-index:3; }
.hero h2{ font-size:4rem; margin-bottom:3rem; }
.hero .subtitle{ font-size:2rem; margin-bottom:3rem; }
.hero .hero-description{ max-width:900px; }
.hero .btn{ display:inline-block; margin:0 auto 2rem; }

/* =================== Hero PCB (full-width) =================== */
.hero-pcb-one{
    position:relative;
    width:calc(100% + 4rem);
    margin-left:-2rem; margin-right:-2rem;
    aspect-ratio:1600 / 480; /* matches SVG viewBox */
    margin-top: clamp(24px, 3vw, 68px);
}
.pcb-one-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* copper lines */
.bus-base{ fill:none; stroke:rgba(0,255,170,.28); stroke-width:12; stroke-linecap:round; filter:drop-shadow(0 0 2px rgba(0,0,0,.25)); }
.bus-flow{ fill:none; stroke:url(#pcbOneGrad); stroke-width:6; stroke-linecap:round; stroke-dasharray:16 14; animation:busFlow 5s linear infinite; filter:drop-shadow(0 0 6px rgba(162,76,241,.55)); }
.bus-dots{ fill:none; stroke:#00ffaa; stroke-width:6; stroke-linecap:round; stroke-dasharray:1 26; animation:busDots 5.4s linear infinite; filter:drop-shadow(0 0 8px rgba(0,255,170,.45)); opacity:.95; }
@keyframes busFlow{ to{ stroke-dashoffset:-480; } }
@keyframes busDots{ to{ stroke-dashoffset:-240; } }

/* branches */
.branch-base path{ fill:none; stroke:rgba(0,255,170,.28); stroke-width:12; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 2px rgba(0,0,0,.25)); }
.branch-flow path{ fill:none; stroke:url(#pcbOneGrad); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16 14; animation:busFlow 5s linear infinite; filter:drop-shadow(0 0 6px rgba(162,76,241,.55)); }
.branch-dots path{ fill:none; stroke:#00ffaa; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 26; animation:busDots 5.4s linear infinite; filter:drop-shadow(0 0 8px rgba(0,255,170,.45)); opacity:.95; }

/* vias + labels */
.pcb-one-via, .pcb-one-via-top-text{
    position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
    transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
    border:3px solid #00ffaa; background:radial-gradient(circle, #00ffaa 40%, #003322 100%);
    box-shadow:0 0 14px rgba(0,255,170,.45); cursor:pointer; z-index:3;
    transition:transform .18s ease; will-change:transform, box-shadow; animation:viaGlow 2.4s ease-in-out infinite;
}
.pcb-one-via-no-text{
    position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
    transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
    border:3px solid #00ffaa; background:radial-gradient(circle, #00ffaa 40%, #003322 100%);
    box-shadow:0 0 14px rgba(0,255,170,.45); cursor:pointer; z-index:3; transition:transform .18s ease; will-change:transform, box-shadow;
}
/* labels */
.pcb-one-via::after{
    content:attr(data-line1) "\A" attr(data-line2); white-space:pre-line; position:absolute; top:135%; left:50%; transform:translateX(-50%);
    text-align:center; font-size:1.1rem; font-weight:700; letter-spacing:.3px; line-height:1.35; color:#00ffaa;
    background:rgba(0,255,170,.08); padding:8px 14px; border-radius:10px; box-shadow:0 0 10px rgba(0,255,170,.28);
    width:max-content; max-width:360px; word-break:break-word;
}
.pcb-one-via-top-text::before{
    content:attr(data-line1) "\A" attr(data-line2); white-space:pre-line; position:absolute; bottom:135%; left:50%; transform:translateX(-50%);
    text-align:center; font-size:1.1rem; font-weight:700; letter-spacing:.3px; line-height:1.35; color:#00ffaa;
    background:rgba(0,255,170,.08); padding:8px 14px; border-radius:10px; box-shadow:0 0 10px rgba(0,255,170,.28);
    width:max-content; max-width:360px; word-break:break-word;
}
/* ping ring + hover */
.pcb-one-via::before, .pcb-one-via-top-text::after{
    content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(0,255,170,.85);
    transform:scale(.9); opacity:0; pointer-events:none; animation:pingRing 2.6s ease-out infinite;
}
.pcb-one-via:hover, .pcb-one-via-top-text:hover{ animation:none; transform:translate(-50%, -50%) scale(1.08); }
.pcb-one-via:hover::before, .pcb-one-via-top-text:hover::after{ animation:none; opacity:0; }
/* attention + heartbeat */
@keyframes viaGlow{ 0%,100%{ box-shadow:0 0 14px rgba(0,255,170,.45); } 50%{ box-shadow:0 0 34px rgba(0,255,170,1); } }
@keyframes pingRing{ 0%{ opacity:.9; transform:scale(.9); } 80%,100%{ opacity:0; transform:scale(1.4); } }
.hero-pcb-one .pcb-one-via, .hero-pcb-one .pcb-one-via-top-text{
    animation:viaGlow 2.4s ease-in-out infinite, viaHeartbeat 3.2s ease-in-out infinite;
    transform-origin:center center; overflow:visible;
}
.hero-pcb-one .pcb-one-via::before, .hero-pcb-one .pcb-one-via-top-text::after{
    animation:pingRing 3.2s ease-out infinite; opacity:.9; transform:scale(.9);
}
@keyframes viaHeartbeat{
    0%,100%{ transform:translate(-50%, -50%) scale(1); }
    12%{    transform:translate(-50%, -50%) scale(1.12); }
    24%{    transform:translate(-50%, -50%) scale(1); }
    34%{    transform:translate(-50%, -50%) scale(1.06); }
    44%{    transform:translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion:reduce){
    .pcb-one-via, .pcb-one-via-top-text{ animation:none !important; }
    .pcb-one-via::before, .pcb-one-via-top-text::after{ animation:none !important; }
}

/* keep CTA above lines */
.hero .btn{ margin-top:3.25rem; position:relative; z-index:4; }

/* =================== Services =================== */
.services{ background-color:#0f2b22; padding:4rem 2rem; position:relative; }
.services .particle-wrapper{ z-index:1; }
.services::before{
    content:''; position:absolute; top:-1px; left:0; width:100%; height:300px;
    background:linear-gradient(to bottom, rgba(15,43,34,1), rgba(15,43,34,0));
    z-index:2; pointer-events:none; border:none;
}
.service-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; position:relative; z-index:2; }
.service{
    background:#fff; padding:2rem; text-align:left; border-radius:16px; border:1px solid #cdebe0; color:#0f2b22;
    transition:transform .3s ease, box-shadow .3s ease; width:100%; max-width:200px; min-height:400px;
    display:flex; flex-direction:column; justify-content:flex-start; position:relative; z-index:2;
}
.service img{ width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom:1rem; }
.service:hover{ transform:translateY(-8px); box-shadow:0 8px 25px rgba(0,255,170,.3); border-color:#00ffaa; }
.service-info{ display:flex; align-items:flex-start; gap:.75rem; margin-top:1rem; }
.dot-line{ display:flex; flex-direction:column; align-items:center; width:16px; flex-shrink:0; justify-content:flex-start; min-height:60px; }
.dot-line::before{ content:''; width:8px; height:8px; border-radius:50%; background:#a24cf1; box-shadow:0 0 6px rgba(162,76,241,.5); margin-bottom:4px; }
.dot-line::after{ content:''; flex-grow:1; width:2px; background:linear-gradient(to bottom,#a24cf1,#c08df9); }
.text-content{ display:flex; flex-direction:column; justify-content:flex-start; min-width:0; }
.text-content h3{
    margin:0; font-size:1.2rem; color:#0f2b22; line-height:1.2;
    hyphens:none !important; -webkit-hyphens:none !important; -ms-hyphens:none !important; -moz-hyphens:none !important;
    word-break:break-word; overflow-wrap:anywhere; white-space:normal;
}
.text-content p{
    margin-top:.5rem; font-size:1rem; color:#0f2b22; line-height:1.35;
    hyphens:none !important; -webkit-hyphens:none !important; -ms-hyphens:none !important; -moz-hyphens:none !important;
    word-break:break-word; overflow-wrap:anywhere; white-space:normal;
}

/* =================== Roadmap =================== */
.roadmap-section{ padding:3rem 1rem; background:#0f2b22; text-align:center; position:relative; z-index:0; overflow:hidden; }
.roadmap{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1rem; z-index:3; }
.roadmap-section::before{
    content:''; position:absolute; top:-1px; left:0; width:100%; height:300px;
    background:linear-gradient(to bottom, rgba(15,43,34,1), rgba(15,43,34,0)); z-index:2; pointer-events:none; border:none;
}
.step{ display:flex; flex-direction:column; align-items:center; gap:.4rem; min-width:100px; z-index:4; }
.dot.figure-icon{ width:104px; height:104px; background:#f0f9f6; border-radius:16px; box-shadow:0 0 20px rgba(162,76,241,.5); display:flex; justify-content:center; align-items:center; transition:transform .3s ease, box-shadow .3s ease; }
.dot.figure-icon:hover{ transform:scale(1.05); box-shadow:0 0 24px rgba(162,76,241,.9); }
.dot.figure-icon img, .dot.figure-icon svg{ width:76px; height:76px; object-fit:contain; display:block; }
.label{ font-weight:600; font-size:.95rem; color:#f0f9f6; white-space:nowrap; }
.line{ height:4px; width:60px; background:linear-gradient(to right,#a24cf1,#c08df9); border-radius:1px; position:relative; top:-7px; }

/* =================== Contact =================== */
.contact{ background-color:#0f2b22; padding:4rem 2rem; text-align:center; color:#0f2b22; position:relative; z-index:0; }
.contact h2{ font-size:2.5rem; color:#b0f2dd; margin-bottom:2rem; z-index:0; }
.contact .particle-wrapper{ z-index:0; }
.contact-grid, .contact-form-wrapper{ position:relative; z-index:0; }
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; max-width:900px; margin:0 auto; }
.contact-item{ background:rgba(255,255,255,.9); padding:2rem; border-radius:12px; border:1px solid #cdebe0; box-shadow:0 4px 12px rgba(0,255,170,.15); font-size:1rem; text-align:left; color:#0f2b22; }
.contact-item p{ margin:.5rem 0; font-weight:500; }
.contact-form-wrapper{ display:flex; justify-content:center; align-items:center; margin:2rem auto; padding:1rem; width:100%; }
.contact-form{
    width:100%; border-radius:12px; padding:2rem; max-width:700px; background:#fff; border:1px solid #cdebe0;
    box-shadow:0 4px 12px rgba(0,255,170,.08); opacity:0; transform:translateY(20px); animation:fadeInUp 1s forwards;
}
.contact-form h3{ font-size:1.8rem; color:#0f2b22; text-align:center; margin-bottom:1.5rem; }
.contact-form label{ font-weight:600; display:block; margin-top:1rem; margin-bottom:.25rem; }
.contact-form input, .contact-form textarea{
    width:100%; padding:.75rem; font-size:1rem; border-radius:8px; border:1px solid #d9f3e8; background:#f9fdfc; box-sizing:border-box;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:#00cc99; outline:none; background:#fff; }
.contact-form textarea{ resize:vertical; min-height:150px; }
.contact-form button{
    margin-top:1.5rem; background-color:#00ffaa; color:#0f2b22; padding:.9rem 2rem; font-weight:bold; font-size:1rem; border-radius:8px; border:none; cursor:pointer; transition:.2s ease;
}
.contact-form button:hover{ background-color:#00e6aa; transform:translateY(-1px); }
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } }

/* =================== About / Portfolio =================== */
.about-section{ background-color:#f8fefc; padding:4rem 2rem; color:#1a1a1a; }
.about-text{ max-width:800px; margin:0 auto 3rem auto; text-align:center; font-size:1.2rem; line-height:1.8; background:#ffffff; padding:2rem; border-radius:12px; box-shadow:0 4px 16px rgba(0,255,170,0.1); }
.section-title{ text-align:center; font-size:2rem; color:#007550; margin-bottom:2rem; }
.portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; max-width:1200px; margin:0 auto; }
.portfolio-card{ background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,255,170,0.1); transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; }
.portfolio-card img{ width:100%; height:200px; object-fit:cover; }
.portfolio-info{ padding:1.5rem; flex-grow:1; display:flex; flex-direction:column; justify-content:center; }
.portfolio-info h3{ font-size:1.4rem; color:#0f2b22; margin-bottom:.5rem; }
.portfolio-info p{ font-size:1rem; color:#555555; }
.portfolio-card:hover{ transform:translateY(-6px); box-shadow:0 8px 25px rgba(0,255,170,0.25); }

/* =================== Visual extras =================== */
.glow-band{ height:10px; width:100%; background:radial-gradient(circle, rgba(50, 20, 100, 0.4) 40%, transparent 80%); margin-top:-10px; z-index:3; position:relative; }
.pulse-line{ position:absolute; top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); pointer-events:none; }
.pulse-line::before{
    content:""; position:absolute; left:-30%; width:160%; height:100%;
    background:linear-gradient(90deg, transparent, #c08df9, transparent);
    animation:pulseMove 2s linear infinite; opacity:.8;
}
@keyframes pulseMove{
    0%{ left:-30%; opacity:0; } 10%{ opacity:1; } 50%{ left:50%; opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; }
}

/* =================== Footer =================== */
.site-footer{
    background-color:#0f2b22;
    padding:2rem 2rem;
    color:#b0f2dd;
    font-size:1rem;
    border-top:1px solid rgba(255,255,255,0.05);
}
.footer-container{
    display:flex; justify-content:space-between; align-items:center;
    max-width:1100px; margin:0 auto; flex-wrap:wrap;
}
.footer-left a{ color:#00ffaa; text-decoration:none; font-weight:500; }
.footer-left a:hover{ text-decoration:underline; }
.footer-right{
    --btn-size:56px; --icon-size:30px;
    display:flex; align-items:center; gap:.75rem;
}
.footer-right a{
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--btn-size); height:var(--btn-size);
    border-radius:14px; background:rgba(255,255,255,0.06);
    transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
    text-decoration:none; outline:none;
}
.footer-right a img{
    display:block; width:var(--icon-size); height:var(--icon-size); object-fit:contain;
    filter: drop-shadow(0 0 4px rgba(0,255,170,.25));
}
.footer-right a:hover, .footer-right a:focus-visible{
    transform:translateY(-2px);
    background:rgba(162,76,241,.16);
    box-shadow:0 10px 26px rgba(162,76,241,.38), 0 0 0 1px rgba(162,76,241,.25) inset;
}

/* align email | tagline on one row */
.footer-left{
    display:flex;
    align-items:flex-start;
    gap:10px;
    flex:1 1 auto;
    min-width:260px;
}

/* email style (keeps your existing color, adds nowrap) */
.footer-email{
    color:#00ffaa;
    text-decoration:none;
    font-weight:600;
    white-space:nowrap;
}

/* the "|" separator and tagline */
.footer-sep{ opacity:.6; }
.footer-tagline{ opacity:.95; white-space:nowrap; }


header{ z-index:0 !important; }

/* =================== Mobile (≤600px) =================== */
@media (max-width:600px){
    .container{ padding:1rem; }
    body{ overflow-x:hidden; }

    /* header becomes stacked; logo above hamburger; inline pills hidden */
    header{
        position:relative !important; top:0;
        background:#0f2b22;
        -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        min-height:84px;
    }
    header .container{
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:.5rem; padding:.6rem .8rem;
    }
    .logo{ flex:1 1 auto; display:flex; justify-content:center; }
    .logo img{ height:200px !important; width:auto !important; margin:0 auto; }

    nav{ flex:1 1 auto; min-width:0; }
    nav ul{ display:none !important; }     /* hide desktop pills */
    .hamburger{ display:inline-block; }

    /* dropdown overlay (opens above hero even if header is under it) */
    header.menu-open nav ul{
        display:grid !important;
        position:fixed; left:.75rem; right:.75rem; top:calc(70px + 1.4rem);
        gap:.6rem; margin:0; padding:.75rem; list-style:none;
        background:#0f2b22; border:1px solid rgba(0,255,170,.25);
        border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.35);
        z-index:50;
    }
    header.menu-open nav ul li{ width:100%; }
    header.menu-open nav a{
        display:block; width:100%; text-align:center;
        padding:.7rem .9rem; color:#e8fff8; text-decoration:none;
        background:rgba(0,255,170,.08); border:1px solid rgba(0,255,170,.35); border-radius:10px;
    }
    header.menu-open::after{
        content:""; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45); pointer-events:none;
    }

    /* hero text */
    .hero{ padding:4rem 1rem 5rem; background-position:center; }
    .hero h2{ font-size:2.1rem; margin-bottom:1rem; }
    .hero .subtitle{ font-size:1.15rem; margin-bottom:1rem; }
    .hero .hero-description{ max-width:100%; font-size:.95rem; }

    /* hero PCB: proportional via sizing + tighter labels */
    .hero-pcb-one{
        width:100vw; margin-left:0; margin-right:0; left:50%; transform:translateX(-50%);
        --dot: clamp(16px, 3vmin, 16px);
        --ring: max(1px, .22vmin);
        --lbl:  clamp(8px, 1.1vmin, 6px);
        --padx:.5vmin; --pady:.25vmin;
        .hero-pcb-one{ margin-top: 18px; }
    }
    .pcb-one-via, .pcb-one-via-top-text, .pcb-one-via-no-text{
        width:var(--dot) !important; height:var(--dot) !important; border-width:var(--ring) !important;
        appearance:none; -webkit-appearance:none; padding:0; line-height:0; box-sizing:border-box; aspect-ratio:1 / 1;
    }
    .pcb-one-via::after, .pcb-one-via-top-text::before{
        font-size:var(--lbl); padding:var(--pady) var(--padx); max-width:30vw;
    }
    .hero-pcb-one .pcb-one-via:hover,
    .hero-pcb-one .pcb-one-via-top-text:hover,
    .hero-pcb-one .pcb-one-via-no-text:hover,
    .hero-pcb-one .pcb-one-via:focus-visible,
    .hero-pcb-one .pcb-one-via-top-text:focus-visible,
    .hero-pcb-one .pcb-one-via-no-text:focus-visible{
        transform:translate(-50%, -50%) scale(1.10);
    }
    @keyframes viaGlow{
        0%,100%{ box-shadow:0 0 14px rgba(0,255,170,.45); }
        50%{     box-shadow:0 0 14px rgba(0,255,170,1); }
    }

    /* services stack */
    .services{ padding:3rem 1rem 2rem; }
    .service-grid{ grid-template-columns:1fr; gap:1.25rem; }
    .service{ width:75%; max-width:75%; margin:0 auto; padding:1rem; }
    .service img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

    /* roadmap */
    .roadmap-section{ padding:2rem 1rem; }
    .roadmap{ flex-direction:column; gap:.75rem; }
    .line{ width:2px; height:30px; top:0; background:linear-gradient(to bottom,#a24cf1,#c08df9); }

    /* contact */
    .contact{ padding:3rem 1rem; }
    .contact-grid{ grid-template-columns:1fr; gap:1rem; width:80%; max-width:80%; }
    .contact-item{ padding:1.25rem; }
    .contact-form-wrapper{ max-width:900px; margin:1.5rem auto; padding-left:0; padding-right:0; }
    .contact-form{ padding:1.25rem; box-sizing:border-box; width:80%; max-width:80%; margin:0 auto; }
    .contact-form h3{ font-size:1.35rem; }
    .contact-form input, .contact-form textarea{ padding:.75rem; }

    /* portfolio */
    .portfolio-grid{ grid-template-columns:1fr; }
    .portfolio-card img{ height:160px; }

    /* footer */
    .site-footer{ padding:1.25rem 1rem; font-size:.95rem; }
    .footer-container{ flex-direction:column; text-align:center; gap:1rem; }
    .footer-right{ margin-top:.5rem; }

    /* let header grow to hold the panel; add a little bottom air */
    header.menu-open{ position: relative; z-index: 5; padding-bottom: 12px; }
    header.menu-open::after{ display: none; } /* no dim overlay */

    /* the dropdown panel */
    header.menu-open nav ul{
        position: static;                 /* in normal flow so header resizes */
        width: min(92vw, 560px);
        margin: 12px auto 14px;           /* space below the X and above divider */
        padding: 12px;
        display: grid !important;
        grid-template-columns: 1fr;       /* one column, full width */
        justify-items: stretch;           /* stretch children across the column */
        align-items: stretch;
        gap: 10px;
        box-sizing: border-box;

        /* same look, just slightly more opaque so background lines don’t show through */
        background: rgba(15,43,34,.98);
        border: 1px solid rgba(0,255,170,.25);
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(0,0,0,.30);
    }

    /* make each row fill the panel width */
    header.menu-open nav ul li{ width: 100%; }
    header.menu-open nav a{
        display: block !important;
        width: 90%;
        text-align: center;
        padding: .8rem 1rem;
        background: rgba(0,255,170,.08);
        border: 1px solid rgba(0,255,170,.35);
        border-radius: 12px;
        color: #e8fff8;
        text-decoration: none;
    }

    /* keep the EN/NL switch centered on its own row */
    header.menu-open .lang-li{ display:flex; justify-content:center; width:100%; }


    /* Ensure the panel always fits the viewport; scroll if needed */
    header.menu-open nav ul{
        max-height: calc(100vh - 240px);  /* leaves space for logo + close + safe area */
        overflow: auto;
    }

    /* stack email + tagline vertically on mobile */
    .footer-left{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:4px;
    }

    /* hide the pipe on mobile */
    .footer-sep{ display:none; }

    /* let the tagline wrap + sit under the email */
    .footer-tagline{
        display:block;
        width:100%;
        margin-top:4px;
        font-size:0.95rem;
        opacity:0.9;
        white-space:normal !important;  /* overrides the desktop nowrap */
    }
}

/* ===== Full-bleed header in landscape (iOS-safe) ===== */
@media (orientation: landscape) and (max-width: 1024px){

    /* Paint a background that bleeds to the real viewport edges,
       even if <header> sits inside a centered, max-width wrapper. */
    header{
        position: relative;
        isolation: isolate;            /* keep the bleed behind header content only */
        overflow: visible;             /* don't clip the bleed */
    }
    header::before{
        content: "";
        position: absolute;
        inset: 0;                      /* match header's height */
        /* The box-shadow + clip-path trick expands left/right to 100vmax
           without changing layout width (works reliably on iOS Safari). */
        box-shadow: 0 0 0 100vmax #0f2b22;
        clip-path: inset(0 -100vmax);
        z-index: -1;                   /* sit behind logo/nav/particles */
    }

    /* Ensure the particles canvas actually fills the header bounds. */
    header .particle-wrapper,
    header .particle-wrapper > canvas,
    header .particle-wrapper #tsparticles_header{
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
    }

    /* The PCB divider is already full-width; just prevent any horizontal scroll. */
    html, body{ overflow-x: hidden; }

    .service-grid{
        gap: 4.75rem;              /* was 2rem */
    }



}