:root {
    --neon: #7cfc00;
    --dark: #0f0f0f;
    --gray: #1a1a1a;
    --text: #e0e0e0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background-color: var(--dark); 
    color: var(--text); 
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
}

#geometric-bg { position: fixed; top: 0; left: 0; z-index: -1; opacity: 0.4; }

nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 30px 10%; position: absolute; width: 100%;
}
.logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -1px; }
.logo span { color: var(--neon); }
.links a { text-decoration: none; color: #fff; margin-left: 30px; font-size: 0.9rem; font-weight: 500; }
.btn-nav { background: var(--neon); color: #000 !important; padding: 10px 20px; border-radius: 5px; }

.hero {
    height: 100vh; display: flex; align-items: center; padding: 0 10%;
    gap: 50px;
}
.hero-content { flex: 1; }
.tagline { color: var(--neon); text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; }
h1 { font-size: 5rem; line-height: 0.9; margin: 20px 0; }
h1 span { color: var(--neon); }

.hero-visual { flex: 1; display: flex; justify-content: flex-end; }
.featured-card {
    background: var(--gray); padding: 15px; border-radius: 20px;
    border: 1px solid #333; transform: rotate(3deg); transition: 0.5s;
}
.featured-card:hover { transform: rotate(0deg) scale(1.05); border-color: var(--neon); }
.featured-card img { width: 400px; border-radius: 10px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.item { background: var(--gray); padding: 20px; border-radius: 15px; border: 1px solid #222; }
.item img { width: 100%; border-radius: 10px; margin-bottom: 15px; opacity: 0.7; }
.item:hover img { opacity: 1; }

.btn-green { background: var(--neon); color: #000; padding: 15px 30px; text-decoration: none; font-weight: 700; border-radius: 4px; }
.btn-outline { border: 1px solid #444; color: #fff; padding: 15px 30px; text-decoration: none; margin-left: 15px; border-radius: 4px; }
