.hero { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: var(--max-w); margin: 0 auto; padding: 4rem 2rem; text-align: center; } .hero-avatar { display: block; width: 16rem; height: 16rem; margin: 0 auto 1rem; border: 0.25rem solid var(--bg-card); border-radius: 50%; box-shadow: 0 0 0 0.0625rem var(--border); object-fit: cover; } .hero-name { margin-bottom: 0.75rem; color: var(--fg); font-size: 4.5rem; font-weight: 800; letter-spacing: -0.125rem; line-height: 1; } .hero-titles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .hero-title { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.85rem; border: 0.0625rem solid var(--border); border-radius: 6.25rem; background: var(--bg-card); color: var(--fg-secondary); font-size: 0.82rem; font-weight: 500; } .hero-sub { margin: 0 auto; color: var(--fg-secondary); font-size: 1.15rem; font-weight: 300; line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; } .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; } .socials a { color: var(--fg-muted); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.0625rem; text-decoration: none; text-transform: uppercase; transition: color 0.15s; } .socials a:hover { color: var(--green); } @media (max-width: 43.75rem) { .hero { padding: 6rem 1.25rem 3rem; } .hero-avatar { width: 8rem; height: 8rem; margin-bottom: 1.5rem; } .hero-name { font-size: 2.8rem; letter-spacing: -0.0625rem; } }