:root{
  --bg:#0b0b0c; --fg:#f5f5f5; --muted:#a6a6a6; --line:#1a1a1a; --acc:#7df9ff;
  --max:1200px; --pad:24px;
  --radius:10px; --speed:180ms; --shadow:0 0 0 1px var(--line) inset;
  --display: clamp(40px, 8vw, 80px);
  --h2: clamp(28px, 4vw, 40px);
  --lead: clamp(16px, 2vw, 20px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  background:var(--bg); color:var(--fg); line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.muted{color:var(--muted)}
.eyebrow{letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-size:12px; margin:0 0 12px}
.display{font-size:var(--display); line-height:1.05; margin:0 0 16px; letter-spacing:-.01em}
.lead{font-size:var(--lead); color:#cfcfcf; max-width:800px}
h2{font-size:var(--h2); margin:0 0 8px}
h3{font-size:22px; margin:0 0 6px}
h4{font-size:18px; margin:0 0 6px}
.plain{list-style:none; padding:0; margin:0}
.btn{display:inline-block; padding:12px 16px; background:#ffffff10; color:var(--fg); border:1px solid #ffffff20; border-radius:8px; transition:all var(--speed) ease; backdrop-filter:saturate(120%) blur(2px)}
.btn:hover{background:#ffffff18; transform:translateY(-1px)}
.btn--ghost{background:transparent; border-color:#ffffff30}
.btn--light{background:#f7f7f7; color:#0b0b0c; border-color:#f7f7f7}
.btn--light:hover{background:#fff}

.section{padding:80px 0; border-top:1px solid var(--line)}
.section--tight{padding:56px 0}
.section__head{display:flex; align-items:flex-end; gap:16px; justify-content:space-between; margin:0 0 24px}

.grid{display:grid; gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards{display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{padding:20px; border-radius:12px; background:#0e0e10; box-shadow:var(--shadow); transition:transform var(--speed), background var(--speed), border-color var(--speed)}
.card:hover{transform:translateY(-2px); background:#101013}
.card--link{border:1px solid #ffffff12}
.card--link:hover{border-color:#ffffff28}
.person{display:flex; gap:16px; align-items:center}
.person .avatar{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#222,#111)}

.list-keys{list-style:none; padding:0; margin:0; border-left:1px solid var(--line)}
.list-keys li{padding:12px 0 12px 16px; border-bottom:1px solid var(--line)}
.list-keys li span{font-feature-settings:"tnum" on, "lnum" on; font-variant-numeric:tabular-nums; color:#8e8e8e; margin-right:8px}

/* ===== NAV ===== */
.nav{position:sticky; top:0; z-index:100; backdrop-filter:saturate(120%) blur(6px); background:color-mix(in oklab, #0b0b0c 70%, transparent); border-bottom:1px solid #000; transition:background var(--speed)}
.nav.scrolled{background:#0d0d0f}
.nav__inner{max-width:var(--max); margin:0 auto; padding:14px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:12px}
.nav__brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.2px}
.nav__brand img{filter:grayscale(100%) brightness(1.2)}
.nav__links{display:flex; gap:18px; align-items:center}
.nav__links a{color:#e6e6e6; opacity:.9}
.nav__links a:hover{opacity:1}
.nav__menu{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav__menu span{display:block; width:22px; height:2px; background:#ddd; margin:4px 0}

/* ===== HERO ===== */
.hero{position:relative; padding:140px 0 80px; overflow:hidden}
.hero__cta{display:flex; gap:12px; margin-top:18px}
.accent-underline{background:linear-gradient(180deg,transparent 75%,#7df9ff40 75%); padding:0 .1em}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.orb{position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(40px); opacity:.22}
.orb--1{background:radial-gradient(circle at 30% 30%,#7df9ff,transparent 60%); top:-120px; left:-120px}
.orb--2{background:radial-gradient(circle at 70% 40%,#8a7dff,transparent 60%); bottom:-160px; right:-100px}
.orb--3{background:radial-gradient(circle at 50% 80%,#00ffa3,transparent 60%); top:40%; left:55%}
.scanline{position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,#ffffff25,transparent)}

/* ===== LOGOS ===== */
.logos{display:flex; gap:40px; align-items:center; flex-wrap:wrap; opacity:.9; filter:grayscale(100%) contrast(1.1)}
.logos img{height:40px; width:auto}

/* === Team cards with text socials === */
.person {
  display:flex; gap:16px; align-items:center; padding:20px;
  border-radius:12px; background:#0e0e10;
  box-shadow:var(--shadow); transition:background var(--speed);
}
.person:hover { background:#101013; }
.person .avatar {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#222,#111);
}
.person h4 { margin:0 0 4px; }
.person .muted { margin:0 0 10px; font-size:14px; }

.socials--text {
  display:flex; flex-direction:column; gap:6px;
}
.socials--text a {
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--muted);
  transition:color var(--speed), transform var(--speed);
}
.socials--text a:hover {
  color:var(--acc);
  transform:translateX(2px);
}
.socials--text img {
  width:16px; height:16px;
  filter:invert(1) grayscale(1) brightness(1.3);
  opacity:.9;
}
.socials--text a:hover img { filter:none; opacity:1; }

/* ===== FOOTER ===== */
.posts{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
.post{padding:16px 0; border-top:1px solid var(--line)}
.post__meta{color:#9b9b9b; font-size:12px; letter-spacing:.04em; text-transform:uppercase}

.cta__box{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; border-radius:12px; background:linear-gradient(180deg,#0f0f12,#0c0c0d); box-shadow:var(--shadow); border:1px solid #ffffff12}
.cta__box h3{margin:0}

.site-footer{padding:40px 0 32px; border-top:1px solid var(--line); background:#0a0a0b}
.footer__grid{display:grid; gap:24px; grid-template-columns:2fr 1fr 1.2fr; align-items:start}
.footer__bottom{margin-top:20px; display:flex; justify-content:space-between; color:#a5a5a5}

/* ===== Portfolio cards met logo ===== */
.card--withlogo{position:relative; padding-top:64px}
.card__logo{
  position:absolute; top:16px; left:16px;
  width:40px; height:40px; object-fit:contain;
  padding:6px; border-radius:10px; background:#0b0b0c; box-shadow:0 0 0 1px #ffffff14 inset;
  filter:grayscale(100%) contrast(1.05) brightness(1.1); opacity:.95;
  transition:transform 180ms ease, opacity 180ms ease;
}
.card__logo--mono{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#e8e8e8; background:#111;
  position:absolute; top:16px; left:16px; width:40px; height:40px; border-radius:10px;
}
.card:hover .card__logo{transform:scale(1.05); opacity:1}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .grid--2{grid-template-columns:1fr}
  .cards, .cards--grid2, .cards--grid3{grid-template-columns:1fr}
  .section{padding:64px 0}
  .hero{padding:120px 0 64px}
  .cta__box{flex-direction:column; align-items:flex-start}

  /* mobile nav drawer */
  .nav__menu{display:block; z-index:300}
  .nav__links{
    display:none;
    position:fixed; inset:0 0 0 auto;
    width:min(88vw,340px); background:#0c0c0e;
    border-left:1px solid var(--line);
    padding:80px 24px 24px;
    flex-direction:column; align-items:flex-start; gap:18px; z-index:200;
  }
  .nav.nav--open .nav__links{display:flex}
  .nav.nav--open::after{
    content:''; position:fixed; inset:0;
    background:rgba(0,0,0,.45); z-index:150;
  }
  .nav__links a{font-size:18px; padding:8px 6px}
}
body.no-scroll{overflow:hidden}

a,button{min-height:44px}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}