:root {
    --primary: #00ff88; /* Tactical Green */
    --dark: #0a0a0a;
    --gray: #1a1a1a;
}
body { background: var(--dark); color: white; font-family: 'Inter', sans-serif; margin: 0; }
nav { display: flex; justify-content: space-between; padding: 20px 10%; align-items: center; }
.logo { font-weight: bold; font-size: 1.5rem; letter-spacing: 2px; }
.logo span { color: var(--primary); }
ul { list-style: none; display: flex; gap: 30px; }
a { text-decoration: none; color: white; transition: 0.3s; }
.hero { display: flex; height: 90vh; align-items: center; padding: 0 10%; gap: 50px; }
.hero-content { flex: 1; }
.badge { color: var(--primary); font-size: 0.8rem; border: 1px solid var(--primary); padding: 5px 15px; border-radius: 20px; text-transform: uppercase; }
h1 { font-size: 4rem; margin: 20px 0; line-height: 1.1; }
h1 span { color: var(--primary); }
.btn-primary { background: var(--primary); color: black; padding: 15px 35px; font-weight: bold; border-radius: 5px; }
.btn-secondary { border: 1px solid white; padding: 15px 35px; margin-left: 10px; border-radius: 5px; }
.hero-image { flex: 1; position: relative; }
.hero-image img { width: 100%; filter: drop-shadow(0 0 50px rgba(0,255,136,0.2)); }
.glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background: var(--primary); filter: blur(150px); opacity: 0.1; z-index: -1; }