/* ─── INNER PAGE HERO ───────────────────────────────────────── */
.page-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8rem;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 4rem;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 50%, #2b2db8 100%);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: var(--bg);
  clip-path: polygon(0% 100%, 0% 60%, 5% 40%, 15% 50%, 25% 30%, 35% 50%, 45% 40%, 55% 55%, 65% 35%, 75% 50%, 85% 40%, 95% 52%, 100% 45%, 100% 100%);
  z-index: 2;
}

/* ─── AVATAR ────────────────────────────────────────────────── */
.about-avatar {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  border: 2px solid var(--border2);
  object-fit: cover;
  image-rendering: pixelated;
  box-shadow: 0 0 32px var(--accent-glow), 0 8px 32px rgba(0,0,0,0.4);
  flex-shrink: 0;
  margin-top: 0.5rem;
  transition: box-shadow 0.3s, transform 0.3s;
}
.about-avatar:hover {
  box-shadow: 0 0 48px var(--accent-glow), 0 12px 40px rgba(0,0,0,0.5);
  transform: translateY(-3px);
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero { padding: 7rem 1.5rem 4rem; }
}
@media (max-width: 600px) {
  .about-avatar { width: 100px; height: 100px; }
}