:root {
    --bg-color: #050505;
    --matrix-green: #0f0;
    --neon-cyan: #0ff;
    --neon-purple: #b026ff;
    --text-main: #fff;
    --glass-bg: rgba(15, 15, 15, 0.4);
    --glass-border: rgba(255, 255, 255, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; background-color: var(--bg-color); color: var(--text-main); font-family: 'Outfit', sans-serif; overflow: hidden; }

/* 3D Container */
#webgl-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* Typography */
.hacker-font { font-family: 'Space Mono', monospace; }
.fullscreen-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.flex-center { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.hidden { display: none !important; opacity: 0; pointer-events: none; }

/* Glassmorphism Panels */
.glass-panel {
    background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border); padding: 3rem; border-radius: 20px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}
.glass-panel-large {
    background: var(--glass-bg); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--neon-cyan); padding: 4rem; border-radius: 20px; max-width: 800px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.2); animation: slow-pulse-border 4s infinite alternate;
}

.cyber-button {
    background: transparent; color: var(--neon-cyan); font-family: 'Space Mono', monospace;
    font-size: 1.2rem; padding: 1rem 2rem; border: 2px solid var(--neon-cyan); border-radius: 5px;
    cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; margin-top: 2rem;
}
.cyber-button:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 20px var(--neon-cyan); }

.glitch-text { font-size: 3rem; font-weight: 700; color: white; text-shadow: 2px 2px var(--neon-purple), -2px -2px var(--neon-cyan); margin-bottom: 1rem; }
.subtitle { font-size: 1.2rem; color: #ccc; font-weight: 300; }

.subliminal-text-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; width: 100%; pointer-events: none; }
#dynamic-text { font-size: 4rem; color: var(--neon-cyan); text-shadow: 0 0 20px var(--neon-purple); letter-spacing: 5px; text-transform: uppercase; opacity: 0; transition: opacity 0.5s ease; }

.brand-icon { width: 150px; height: auto; margin-bottom: 2rem; }
.gradient-text { font-size: 4rem; font-weight: 700; background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
.brand-subtitle { font-family: 'Space Mono', monospace; font-size: 1.5rem; color: var(--neon-cyan); margin-bottom: 2rem; text-transform: uppercase; }
.brand-description { font-size: 1.2rem; line-height: 1.6; color: #ddd; }

.float-animation { animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }
@keyframes slow-pulse-border { 0% { border-color: rgba(0, 255, 255, 0.2); box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); } 100% { border-color: rgba(176, 38, 255, 0.6); box-shadow: 0 0 50px rgba(176, 38, 255, 0.3); } }