/* Modern, snel, responsief ontwerp voor Beyond IT Consultancy */
:root{
  --bg:#0b0e14; /* donker blauw/zwart */
  --panel:#121826;
  --primary:#4F46E5; /* indigo */
  --accent:#22D3EE; /* cyan */
  --text:#E5E7EB; /* licht grijs */
  --muted:#94A3B8;
  --success:#10B981;
  --warn:#F59E0B;
  --danger:#EF4444;
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg); color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{color:#7dd3fc}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1.2rem}
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(18,24,38,0.85); border-bottom:1px solid #1f2937;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:0.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem}

.logo {
  height:40px;
  width:auto;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.brand h1{font-size:1.05rem; margin:0}
.menu{display:flex; gap:1rem}
.menu a{padding:.5rem .7rem; border-radius:8px}
.menu a.active,.menu a:hover{background:#0f172a}

.hero{padding:4.5rem 0 3rem; background:radial-gradient(1200px 400px at 20% -10%, rgba(79,70,229,.25), transparent),
  radial-gradient(900px 300px at 80% 0%, rgba(34,211,238,.18), transparent);}
.hero .grid{display:grid; grid-template-columns:1.2fr 1fr; gap:2rem}
.badge{display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); background:#0f172a; border:1px solid #1f2937; border-radius:999px; padding:.35rem .7rem; font-size:.85rem}
.h1{font-size:clamp(1.8rem,3.5vw,3rem); line-height:1.1; margin:.8rem 0}
.lead{color:#cbd5e1; font-size:1.05rem}
.cta{display:flex; gap:.8rem; margin-top:1.2rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:10px; font-weight:600; border:1px solid #3b82f6; background:var(--primary); color:white; box-shadow:0 10px 24px rgba(79,70,229,.35)}
.btn.secondary{background:#0f172a; border-color:#334155; color:#cbd5e1}

.section{padding:3rem 0}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:var(--panel); border:1px solid #1f2937; border-radius:16px; padding:1.2rem}
.card h3{margin:.2rem 0 0.4rem}
.card p{color:#cbd5e1}

.list{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.li{display:flex; gap:.7rem; align-items:flex-start; background:var(--panel); border:1px solid #1f2937; padding:1rem; border-radius:14px}
.li .icon{width:28px; height:28px; border-radius:8px; background:#0f172a; display:flex; align-items:center; justify-content:center; color:#7dd3fc; font-weight:700}

.quote{background:#0f172a; border:1px solid #1f2937; padding:1rem; border-radius:14px; color:#cbd5e1}

footer{border-top:1px solid #1f2937; padding:2rem 0; color:#94a3b8}

/* Responsief */
@media (max-width:960px){
  .hero .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .list{grid-template-columns:1fr}
}