.hero { padding-block: clamp(3rem, 9vw, 7rem) clamp(3rem, 8vw, 6rem); }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 6vw, 4rem);
}
.hero-greeting {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent);
  animation: slide-up 0.7s var(--ease) both;
}
.hero-name { font-size: var(--step-4); font-weight: 800; margin-top: 0.9rem; animation: slide-up 0.7s var(--ease) 0.08s both; }
.hero-role { font-size: var(--step-2); font-weight: 600; color: var(--text-muted); margin-top: 0.5rem; animation: slide-up 0.7s var(--ease) 0.16s both; }
.hero-stack { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); margin-top: 1rem; animation: slide-up 0.7s var(--ease) 0.22s both; }
.hero-tagline { font-size: var(--step-1); color: var(--text-muted); max-width: 42ch; margin-top: 1.25rem; animation: slide-up 0.7s var(--ease) 0.28s both; }
.hero-location { font-size: var(--step--1); color: var(--text-faint); margin-top: 1rem; animation: slide-up 0.7s var(--ease) 0.34s both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; animation: slide-up 0.7s var(--ease) 0.4s both; }

.hero-photo { justify-self: center; width: min(100%, 320px); aspect-ratio: 1; animation: slide-up 0.8s var(--ease) 0.2s both; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 3px solid var(--accent);
}

@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-photo { order: -1; width: min(60vw, 220px); }
  .hero-tagline { margin-inline: auto; }
  .hero-actions { justify-content: center; }
}