.hero { position: relative; min-height: calc(100vh - 60px); display: flex; justify-content: center; align-items: center; padding: 2rem; overflow: hidden; z-index: 1; }
.hero-content { position: relative; z-index: 5; max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.cyber-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(10,10,15,0.9), rgba(10,10,15,0.7)), repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(168,85,247,0.03) 20px, rgba(168,85,247,0.03) 21px), repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,255,255,0.03) 20px, rgba(0,255,255,0.03) 21px); animation: glitch-bg 4s infinite linear; pointer-events: none; }
html.light-mode .cyber-bg { background: linear-gradient(rgba(226,232,240,0.9), rgba(226,232,240,0.7)), repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(168,85,247,0.03) 20px, rgba(168,85,247,0.03) 21px), repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,255,255,0.03) 20px, rgba(0,255,255,0.03) 21px); }
@keyframes glitch-bg { 0% { opacity: 0.3; transform: translate(0); } 10% { opacity: 0.9; transform: translate(-3px, 3px); filter: hue-rotate(20deg); } 20% { opacity: 0.2; transform: translate(3px, -3px); } 30% { opacity: 0.8; transform: translate(-2px, 2px); } 100% { opacity: 0.3; transform: translate(0); } }

.glitch-wrapper { font-size: 5rem; font-weight: 800; margin: 0; letter-spacing: 2px; text-shadow: 0 0 15px rgba(168,85,247,0.5), 0 0 30px rgba(168,85,247,0.3); }
.glitch-text { color: #fff; }
html.light-mode .glitch-text { color: #1e293b; }
.glitch-dot { color: #a855f7; display: inline-block; animation: pop-glitch 1.8s infinite alternate; }
@keyframes pop-glitch { 0% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 10px #a855f7); } 15% { opacity: 0; transform: scale(1.2) rotate(10deg); filter: drop-shadow(0 0 30px #a855f7); } 20% { opacity: 1; transform: scale(0.8) rotate(-5deg); } 25% { opacity: 0; transform: translateY(-5px); } 30% { opacity: 1; transform: translateY(5px); } 40% { opacity: 1; transform: scale(1) rotate(0deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

.typing-container { font-size: 1.8rem; font-weight: 500; color: #a0a0b0; height: 2.5rem; display: flex; align-items: center; }
.typing-cursor { font-weight: 100; color: #fff; animation: blink-cursor 0.8s step-end infinite; margin-left: 2px; }
@keyframes blink-cursor { 50% { opacity: 0; } }
html.light-mode .typing-container { color: #334155; }
html.light-mode .typing-cursor { color: #1e293b; }