body {
  margin:0;
  font-family: Arial, sans-serif;
  background: radial-gradient(circle at center, #031c30, #000);
  color:white;
  overflow:hidden;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px;
  background:#000c;
  position:relative;
  z-index:2;
}

.logo {
  height:70px;
}

nav a {
  color:#00ffd5;
  margin:0 10px;
  text-decoration:none;
}

.hero {
  text-align:center;
  padding:120px 20px;
  position:relative;
  z-index:2;
}

.hero h1 {
  font-size:3em;
}

.hero h2 {
  color:#00ffd5;
}

.modules {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  padding:40px;
  position:relative;
  z-index:2;
}

.modules div {
  border:1px solid #00ffd5;
  padding:20px;
  border-radius:10px;
  background:rgba(0,255,213,0.05);
  text-align:center;
}

footer {
  text-align:center;
  padding:20px;
  background:#000c;
  position:relative;
  z-index:2;
}

body::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: linear-gradient(rgba(0,255,213,0.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,255,213,0.08) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: moveGrid 20s linear infinite;
}

@keyframes moveGrid {
  from {transform: translate(0,0);}
  to {transform: translate(-50px,-50px);}
}