.grid-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(var(--border-color) 1px, transparent 1px), 
                      linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -1;
    opacity: 0.1;
}

nav {
    position: fixed; top: 0; width: 100%; height: 80px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 50px; background: rgba(5, 6, 8, 0.8);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color);
    z-index: 100;
}

.logo { 
    font-weight: 700;
    letter-spacing: 4px; 
    color: var(--neon-cyan); 
    font-family: 'JetBrains Mono'; 
    font-size: 2rem; }

.nav-links { 
    display: flex; 
    gap: 30px; 
}
.nav-links button {
    background: none; 
    border: none; 
    color: #888;
    font-family: 'JetBrains Mono'; 
    font-size: 1.2rem; 
    cursor: pointer;
    transition: 0.3s;
}
.nav-links button.active { 
    color: var(--neon-cyan); 
    text-shadow: 0 0 10px var(--neon-cyan); }
.nav-links button:hover { 
    color: color-mix(in srgb, var(--neon-cyan), transparent 40%); 
    text-shadow: 0 0 10px color-mix(in srgb, var(--neon-cyan), transparent 40%); 
}

.viewport { 
    width: 300vw; 
    height: 100vh; 
    display: flex; 
    transition: transform var(--transition); 
}
.page { 
    min-width: 100vw; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding-top: 80px; 
}

.hero-content { 
    text-align: center; 
    max-width: 800px; 
}
.hero-content h1 { 
    font-size: 3rem; 
    margin: 0; 
    text-transform: uppercase; 
    letter-spacing: -2px; 
}
.hero-content p { 
    font-size: 1.5rem; 
}
.scan-line { 
    width: 100px; 
    height: 2px; 
    background: var(--neon-cyan); 
    margin: 0px auto; 
    box-shadow: 0 0 15px var(--neon-cyan); 
}

.app-shell { 
    width: 90%; 
    max-width: 1000px; 
    height: 550px; 
    background: var(--panel-bg); 
    border: 1px solid var(--border-color); 
    display: grid; 
    grid-template-columns: 250px 1fr; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8); 
}
.sidebar { 
    border-right: 1px solid var(--border-color); 
    padding: 30px 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
.nav-item { 
    background: none; 
    border: 1px solid transparent; 
    color: #555; 
    padding: 12px; 
    text-align: left; 
    font-family: 'JetBrains Mono'; 
    font-size: 0.7rem; 
    cursor: pointer; 
}
.nav-item.active { 
    border: 1px solid var(--neon-cyan); 
    color: var(--neon-cyan); 
}
.tab-pane { 
    display: none; 
}
.tab-pane.active { 
    display: block; 
    animation: fadeIn 0.5s ease; 
}
@keyframes fadeIn { 
    from { 
        opacity: 0; 
    } 
    to { 
        opacity: 1; 
    } 
}