body { margin: 0; font-family: 'Orbitron', sans-serif; background-color: #121212; color: #f0f0f0; }
.header, .footer { background-color: #1e1e1e; padding: 1rem; text-align: center; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; }
.logo { font-size: 1.8rem; color: #78fa4b; }
.nav-links { list-style: none; display: flex; gap: 1rem; padding: 0; }
.nav-links a { color: #f0f0f0; text-decoration: none; }
.hero { position: relative; text-align: center; }
.hero-image { width: 100%; max-height: 400px; object-fit: cover; opacity: 0.35; }
.hero-text { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.hero h1 { font-size: 3rem; margin: 0; color: #78fa4b; }
.btn { background-color: #78fa4b; padding: 0.75rem 1.5rem; text-decoration: none; font-weight: bold; color: #121212; box-shadow: 0 0 10px #78fa4b; }
.highlight { padding: 2rem; text-align: center; }
.highlight ul { list-style: disc; padding-left: 1.5rem; list-style-position: inside; text-align: left; display: inline-block; }
.diagram { padding: 2rem; text-align: center; }
.diagram img { max-width: 80%; border: 2px solid #78fa4b; border-radius: 10px; }