/* ===== hero.css — phan Hero: avatar, tieu de, go chu, social ===== */
.hero{text-align:center;padding:20px 6px 6px}
.avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 12px 36px rgba(124,92,255,.45);border:3px solid rgba(255,255,255,.25);animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero h1{font-size:28px;font-weight:800;line-height:1.25;margin-bottom:8px}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.typing{font-size:16px;color:var(--sub);min-height:26px;margin-bottom:16px}
.typing .cursor{display:inline-block;width:2px;background:var(--accent2);margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.socials{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.socials a{padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:var(--text);border:1px solid var(--border);background:var(--card);transition:.2s}
.socials a:hover{transform:translateY(-2px)}