/* Basic Reset */
* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color:#0b0f14;
  color:#e5e7eb;
  line-height:1.6;
  overflow-x:hidden;
}

a {color:#cbd5e1; text-decoration:none; transition: 0.2s;}
a:hover {color:#00ffff;}

.container {max-width:1200px; margin:0 auto; padding:60px 20px;}

header {
  background:rgba(11,15,20,0.95);
  border-bottom:1px solid #1f2933;
  position:sticky;
  top:0;
  z-index:100;
  transition: 0.3s;
}
header:hover {background:rgba(11,15,20,1);}

.header-container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 32px;
  flex-wrap:wrap;
}

.logo {height:50px; cursor:pointer; transition:0.3s;}
.logo:hover {transform:scale(1.05);}

nav a {margin-left:32px; font-size:0.9rem; letter-spacing:0.5px; text-transform:uppercase; transition:0.2s;}
nav a:hover {color:#00ffff; transform:translateY(-2px);}

.hero {
  height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:0 20px;
  background: url("../img/hero2.jpg") center/cover no-repeat fixed;
}

.hero-overlay {
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background: linear-gradient(180deg, rgba(11,15,20,0.7), rgba(11,15,20,0.7));
  z-index:1;
}

.hero-content {position:relative; z-index:2; max-width:800px;}
.hero-content h1 {font-size:3rem; font-weight:500; margin-bottom:20px;}
.hero-content p {font-size:1.2rem; color:#cbd5e1;}

.section h2 {font-size:1.6rem; margin-bottom:24px; letter-spacing:0.5px; text-transform:uppercase; border-bottom:1px solid #1f2933; padding-bottom:8px;}

.section ul {margin-top:16px; list-style:none;}
.section ul li {
  padding:8px 0;
  border-bottom:1px solid #1f2933;
}

.network-visual {
  position:relative;
  height:300px;
  background: url("../img/worldmap.png") center/contain no-repeat;
}

.node {
  position:absolute;
  width:8px;
  height:8px;
  background:#00ffff;
  border-radius:50%;
  animation:pulse 3s infinite;
}

.n1 {top:40%; left:30%;}
.n2 {top:35%; left:55%;}
.n3 {top:55%; left:70%;}
.n4 {top:60%; left:45%;}

@keyframes pulse {
  0% {transform:scale(1); opacity:1;}
  50% {transform:scale(1.5); opacity:0.6;}
  100% {transform:scale(1); opacity:1;}
}

/* Fade-in effect */
.fade-in {opacity:0; transform:translateY(20px); transition: all 0.8s ease-out;}
.fade-in.appear {opacity:1; transform:translateY(0);}

/* Footer */
footer {padding:40px 20px; text-align:center; color:#9ca3af; border-top:1px solid #1f2933; font-size:0.9rem;}
footer a {color:#9ca3af;}
footer a:hover {color:#00ffff;}

/* Responsive */
@media(max-width:768px){
  .hero-content h1 {font-size:2rem;}
  nav a {margin-left:16px; font-size:0.8rem;}
  .hero {height:60vh;}
}

@media(max-width:480px){
  .header-container {flex-direction:column; gap:12px;}
  .hero-content h1 {font-size:1.6rem;}
  .hero-content p {font-size:1rem;}
}
html {
  scroll-padding-top: 80px; /* header hoogte */
}
/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}