/* ── HERO ── */
#hero {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding-top:80px;
}

.grid-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 55%, rgba(0,200,255,.05) 0%, transparent 70%);
}
.grid-bg::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(90,110,160,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,110,160,.07) 1px, transparent 1px);
  background-size:56px 56px;
}

.hero-content {
  position:relative; z-index:2;
  text-align:center;
  animation:fadeUp .9s ease both;
}

.hero-avatar {
  width:120px; height:120px; border-radius:50%;
  border:3px solid var(--accent);
  box-shadow:0 0 30px rgba(245,197,24,.3), 0 0 60px rgba(245,197,24,.08);
  margin:0 auto 24px;
  background:#1e2d45;
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; overflow:hidden;
}
.hero-avatar img { width:100%; height:100%; object-fit:cover; padding: 4px; border-radius: 100%; }

.hero-name {
  font-family:'Orbitron', monospace;
  font-size:clamp(1.4rem, 5vw, 2.8rem);
  font-weight:900; letter-spacing:.06em; margin-bottom:16px;
}

.hero-sub {
  font-size:1rem; color:var(--muted);
  max-width:460px; margin:0 auto 32px; line-height:1.75;
  padding: 0.1vh 4vh;
}

.hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* Walking figures */
.hero-figs {
  position:absolute; bottom: -1px; left:0; right:0;
  display:flex; justify-content:space-between;
  padding:0 60px; pointer-events:none;
}
.fig { max-width: 25%; max-height: 25%; opacity:.22; }
.fig-l { animation:walkR 3s ease-in-out forwards; margin-top: auto;  }
.fig-r { animation:walkL 3s ease-in-out forwards; margin-top: auto;}

@media(max-width:768px){
  .hero-figs{display: none;}
}
@media(min-width:769px) and (max-width:1200px){
  .hero-figs{display: none;}
  .hero-avatar{width: 200px;height: 200px;border:5px solid var(--accent);}
}