/* ===== BASIS ===== */
:root{
  --bg:#1f1f1f;
  --panel:#2b2b2b;
  --dark:#111;
  --red:#e30613;
  --text:#ffffff;
  --muted:#d8d8d8;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat', sans-serif;
}

.container{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

/* ===== HEADER / NAV (GE CENTREERD) ===== */
header{
  background:var(--bg);
  border-bottom:2px solid var(--red);
  padding:18px 0;
}

.navbar{
  display:flex;
  justify-content:center;  /* <-- echt midden */
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

.navbar a{
  color:var(--red);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
  font-size:15px;
  padding:8px 6px;
}

.navbar a:hover{
  color:#fff;
}

/* ===== BANNER ===== */
.banner{
  position:relative;
  height:520px;
  background:url("images/banner.jpg") center/cover no-repeat;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45); /* banner blijft zichtbaar */
}

.bannerInner{
  position:relative;
  z-index:2;
  width:90%;
  max-width:1100px;
  padding-top:55px; /* ruimte voor logo overlay */
}

/* Logo OVER banner */
.logoOverlay{
  position:absolute;
  top:28px;               /* over de banner heen */
  left:50%;
  transform:translateX(-50%);
  width:140px;            /* kleiner logo */
  height:auto;
  z-index:3;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.65));
}

/* Titel en slogan */
.bannerTitle{
  margin:0 0 14px;
  font-size:52px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.bannerSub{
  margin:0 0 22px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Knop */
.button{
  display:inline-block;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  padding:14px 26px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  border:2px solid var(--red);
}

.button:hover{
  filter:brightness(1.05);
}

/* ===== SECTIES ===== */
.section{
  padding:60px 0;
}

.card{
  background:var(--panel);
  border:1px solid #3a3a3a;
  padding:28px;
}

.card h2{
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.card ul{
  margin:10px 0 0 18px;
  line-height:1.9;
}

/* ===== FOOTER ===== */
footer{
  background:var(--dark);
  border-top:1px solid #333;
  padding:22px 0;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

footer a{
  color:#fff;
  text-decoration:none;
}

footer a:hover{
  color:var(--red);
}

/* ===== RESPONSIVE ===== */
@media (max-width:700px){
  .banner{ height:480px; }
  .bannerTitle{ font-size:38px; }
  .logoOverlay{ width:120px; top:22px; }
  .navbar{ gap:16px; }
  .navbar a{ font-size:14px; }
}