:root{
  --bg:#0A0E15; --bg2:#0F1520; --card:#131A26; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --ink:#F2F6FC; --soft:#AEB8C6; --muted:#6E7889; --blue:#2E7BFF; --blue2:#4FB0FF; --amber:#F5A623; --green:#22D48C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; line-height:1.1; margin:0; letter-spacing:-0.02em}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
img{display:block; max-width:100%}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.grad{background:linear-gradient(92deg,var(--blue2),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
.kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue2)}

/* header */
.hd{position:sticky; top:0; z-index:50; background:rgba(10,14,21,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:3px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.02em; color:#fff}
.brand .hb{width:1.7em; height:1.1em; overflow:visible}
.brand .hb polyline{fill:none; stroke:var(--blue2); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; transform-box:fill-box; transform-origin:center; animation:beat 1.8s ease-in-out infinite}
.brand .bl{color:var(--blue2)}
@keyframes beat{0%,55%,100%{transform:scaleY(1)}62%{transform:scaleY(1.4)}70%{transform:scaleY(.84)}78%{transform:scaleY(1.12)}86%{transform:scaleY(1)}}
.nav{display:flex; align-items:center; gap:28px}
.nav a{font-size:14.5px; color:var(--soft); font-weight:500}
.nav a:hover,.nav a.active{color:#fff}
.hd-cta{display:flex; align-items:center; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; border-radius:12px; padding:12px 22px; transition:transform .12s,filter .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--blue),#1E63E6); color:#fff; box-shadow:0 8px 24px rgba(46,123,255,.35)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{color:#fff; font-weight:600; font-size:14.5px}
.btn-line{border:1px solid var(--line2); background:rgba(255,255,255,.03); color:#fff; font-weight:600; font-size:15px; border-radius:12px; padding:12px 22px}
.btn-line:hover{border-color:#fff}
@media(max-width:860px){.nav{display:none}}

/* hero */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line)}
.hero .bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0}
.hero .veil{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,11,17,.94) 0%, rgba(8,11,17,.78) 45%, rgba(8,11,17,.45) 100%), linear-gradient(0deg, rgba(8,11,17,.9), rgba(8,11,17,.2))}
.hero .in{position:relative; z-index:2; padding:70px 0}
.pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid var(--line2); color:#DCE6F5; font-size:13px; font-weight:600; padding:7px 14px; border-radius:30px; margin-bottom:24px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 0 4px rgba(34,212,140,.2)}
.hero h1{font-size:clamp(36px,6vw,62px); font-weight:700; max-width:16ch; margin-bottom:20px; color:#fff}
.hero .lead{font-size:19px; color:var(--soft); max-width:52ch; margin:0 0 30px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-cta .btn,.hero-cta .btn-line{padding:14px 26px; font-size:16px}
.trust{display:flex; flex-wrap:wrap; gap:26px; margin-top:30px; font-size:14px; color:var(--soft)}
.trust b{color:#fff}

/* search */
.search{display:flex; gap:8px; background:rgba(19,26,38,.9); border:1px solid var(--line2); border-radius:16px; padding:8px; max-width:540px; margin-top:6px}
.search .f{flex:1; display:flex; align-items:center; gap:9px; padding:0 12px; min-width:0}
.search .f+.f{border-left:1px solid var(--line)}
.search .f i{font-family:'IBM Plex Mono'; color:var(--muted); font-style:normal}
.search input{border:none; outline:none; font-family:inherit; font-size:15px; width:100%; background:transparent; color:#fff}
.search input::placeholder{color:var(--muted)}
.search .go{background:var(--blue); color:#fff; border-radius:12px; padding:0 22px; font-weight:600; font-size:15px}

/* sections */
.section{padding:84px 0}
.head{max-width:660px; margin:0 auto 46px; text-align:center}
.head .kicker{display:block; margin-bottom:14px}
.head h2{font-size:clamp(28px,4vw,40px); font-weight:700; margin-bottom:14px; color:#fff}
.head p{font-size:17px; color:var(--soft); margin:0}

/* gewerk image cards */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tile{position:relative; height:220px; border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s}
.tile:hover img{transform:scale(1.06)}
.tile .ov{position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,11,17,.92) 8%, rgba(8,11,17,.25) 60%, rgba(8,11,17,.5))}
.tile .lb{position:absolute; left:18px; right:18px; bottom:16px; z-index:2}
.tile .lb h3{color:#fff; font-size:19px; margin-bottom:2px}
.tile .lb span{font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--blue2)}

/* slideshow */
.slideshow{position:relative; height:440px; border-radius:22px; overflow:hidden; border:1px solid var(--line)}
.slideshow .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; animation:fade 20s infinite}
.slideshow .slide:nth-child(1){animation-delay:0s}
.slideshow .slide:nth-child(2){animation-delay:5s}
.slideshow .slide:nth-child(3){animation-delay:10s}
.slideshow .slide:nth-child(4){animation-delay:15s}
@keyframes fade{0%{opacity:0}3%{opacity:1}22%{opacity:1}27%{opacity:0}100%{opacity:0}}
.slideshow .cap{position:absolute; left:24px; bottom:22px; z-index:3; background:rgba(8,11,17,.7); backdrop-filter:blur(6px); border:1px solid var(--line2); border-radius:12px; padding:12px 16px}
.slideshow .cap b{color:#fff; font-family:'Space Grotesk'; font-size:15px}
.slideshow .cap span{color:var(--soft); font-size:13px}
.slideshow .veil2{position:absolute; inset:0; z-index:2; background:linear-gradient(0deg, rgba(8,11,17,.6), transparent 45%)}

/* jobs */
.jobs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.job{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; transition:transform .15s,border-color .15s}
.job:hover{transform:translateY(-3px); border-color:var(--line2)}
.job-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.tag{font-size:12px; font-weight:600; padding:4px 11px; border-radius:20px; background:rgba(46,123,255,.16); color:var(--blue2)}
.tag.a{background:rgba(245,166,35,.16); color:var(--amber)}
.tag.g{background:rgba(34,212,140,.16); color:var(--green)}
.vf{font-size:12px; color:var(--green); font-weight:500}
.job h3{font-size:16.5px; font-weight:600; font-family:'Space Grotesk'; margin-bottom:14px; color:#fff; line-height:1.3}
.spec{border-top:1px dashed var(--line2); padding-top:12px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px}
.spec dt{color:var(--muted); text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; padding-top:2px}
.spec dd{margin:0; font-family:'IBM Plex Mono'; font-size:13px; color:var(--soft)}
.center{text-align:center; margin-top:34px}

/* feature band */
.band{position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); min-height:420px; display:flex; align-items:center}
.band .bg{position:absolute; inset:0; background-size:cover; background-position:center}
.band .veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,11,17,.95) 0%, rgba(8,11,17,.8) 46%, rgba(8,11,17,.35))}
.band .in{position:relative; z-index:2; padding:48px 44px; max-width:560px}
.band h2{color:#fff; font-size:32px; margin-bottom:18px}
.band ul{list-style:none; margin:0 0 26px; padding:0}
.band li{display:flex; gap:11px; color:var(--soft); font-size:15.5px; padding:9px 0}
.band li b{color:#fff}
.band li .ck{color:var(--green)}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px}
.stat .n{font-family:'Space Grotesk'; font-weight:700; font-size:32px; color:#fff}
.stat .n.g{color:var(--green)}
.stat .l{font-size:13.5px; color:var(--soft); margin-top:2px}

/* how */
.how{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.how-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:32px}
.how-card .num{font-family:'IBM Plex Mono'; font-size:13px; color:var(--blue2); margin-bottom:16px}
.how-card.g .num{color:var(--green)}
.how-card h3{color:#fff; font-size:21px; margin-bottom:16px}
.how-card ol{margin:0 0 24px; padding:0; list-style:none; counter-reset:s}
.how-card li{counter-increment:s; padding:11px 0 11px 40px; position:relative; color:var(--soft); font-size:15px; border-top:1px solid var(--line)}
.how-card li:first-child{border-top:none}
.how-card li::before{content:counter(s); position:absolute; left:0; top:10px; width:26px; height:26px; border-radius:8px; background:rgba(46,123,255,.16); color:var(--blue2); font-family:'IBM Plex Mono'; font-size:12px; display:grid; place-items:center}
.how-card.g li::before{background:rgba(34,212,140,.16); color:var(--green)}

/* cta */
.cta{position:relative; overflow:hidden; border-radius:24px; border:1px solid var(--line2); padding:60px 40px; text-align:center; background:radial-gradient(ellipse at 50% -20%, rgba(46,123,255,.35), transparent 60%), var(--card)}
.cta h2{color:#fff; font-size:clamp(28px,4vw,38px); margin-bottom:14px}
.cta p{color:var(--soft); font-size:17px; margin:0 auto 26px; max-width:46ch}

/* page hero (subpages) */
.phero{position:relative; min-height:44vh; display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line)}
.phero .bg{position:absolute; inset:0; background-size:cover; background-position:center}
.phero .veil{position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,11,17,.96), rgba(8,11,17,.5))}
.phero .in{position:relative; z-index:2; padding:48px 0 40px}
.phero h1{color:#fff; font-size:clamp(30px,5vw,48px); margin-bottom:10px}
.phero p{color:var(--soft); font-size:17px; max-width:56ch; margin:0}
.crumb{position:relative; z-index:2; padding-top:22px; font-size:13px; color:var(--muted)}
.crumb a:hover{color:var(--blue2)}

/* footer */
.ft{border-top:1px solid var(--line); padding:52px 0 32px; margin-top:20px; background:var(--bg2)}
.ft-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px}
.ft .brand{margin-bottom:14px}
.ft p{font-size:14px; color:var(--soft); max-width:32ch; margin:0}
.ft b{font-size:13px; display:block; margin-bottom:12px; color:#fff}
.ft a{display:block; font-size:14px; color:var(--soft); padding:4px 0}
.ft a:hover{color:var(--blue2)}
.ft-bottom{border-top:1px solid var(--line); margin-top:36px; padding-top:22px; font-size:13px; color:var(--muted)}

@media(max-width:900px){
  .tiles,.jobs{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr}
  .band .in{max-width:none} .how{grid-template-columns:1fr} .ft-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.fbadge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:600;color:var(--green);background:rgba(34,212,140,.14);border:1px solid rgba(34,212,140,.3);border-radius:20px;padding:4px 11px}

.wp-lang{display:flex;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:3px;margin-right:6px}
.wp-lang button{font-family:inherit;font-size:12px;font-weight:600;color:var(--soft);background:none;border:none;padding:5px 9px;border-radius:16px;cursor:pointer}
.wp-lang button.on{background:var(--blue);color:#fff}