#hero {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding: 8rem 3rem 6rem; max-width: 1200px; margin: 0 auto;
    position: relative; z-index: 10;
}

.hero-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; opacity: 0; animation: fadeUp 0.7s 0.2s forwards; }
.hero-eyebrow-line { width: 40px; height: 1px; background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.hero-eyebrow-text { font-family: 'Orbitron', monospace; font-size: 0.7rem; letter-spacing: 4px; color: var(--blue); text-transform: uppercase; }

.hero-name { font-family: 'Orbitron', monospace; font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 900; line-height: 1.05; color: var(--text-bright); letter-spacing: -1px; opacity: 0; animation: fadeUp 0.7s 0.4s forwards; }
.hero-name .line2 { color: transparent; -webkit-text-stroke: 1px rgba(0,180,255,0.6); }

.hero-role { margin-top: 1.5rem; font-family: 'Orbitron', monospace; font-size: 0.85rem; letter-spacing: 3px; color: var(--dim); opacity: 0; animation: fadeUp 0.7s 0.6s forwards; }
.hero-role .highlight { color: var(--blue); text-shadow: 0 0 10px var(--blue); }

.hero-typed { margin-top: 0.5rem; font-family: 'Orbitron', monospace; font-size: 0.75rem; letter-spacing: 2px; color: var(--dim); height: 1.4em; opacity: 0; animation: fadeUp 0.7s 0.7s forwards; }
.hero-typed .t { color: var(--cyan); }
.hero-cursor { display: inline-block; width: 8px; height: 1em; background: var(--cyan); vertical-align: middle; animation: blink 0.9s infinite; }

.hero-desc { max-width: 520px; margin-top: 2.5rem; font-size: 1.05rem; line-height: 1.8; color: var(--text); opacity: 0; animation: fadeUp 0.7s 0.8s forwards; }
.hero-desc strong { color: var(--blue); font-weight: 500; }

.hero-cta { display: flex; gap: 1rem; margin-top: 3rem; opacity: 0; animation: fadeUp 0.7s 1.0s forwards; }

.hero-cards { display: flex; gap: 1.5rem; margin-top: 5rem; opacity: 0; animation: fadeUp 0.7s 1.2s forwards; }
.hero-card { flex: 1; background: var(--surface); border: 1px solid var(--border); padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: relative; overflow: hidden; }
.hero-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.hc-icon { font-size: 1.6rem; }
.hc-num { font-family: 'Orbitron', monospace; font-size: 1.5rem; font-weight: 700; color: var(--blue); }
.hc-label { font-size: 0.75rem; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }

@media (max-width: 768px) { #hero { padding: 7rem 1.5rem 4rem; } .hero-cards { flex-direction: column; } .hero-cta { flex-direction: column; } }