/* ─────────────────────────────────────────────────────────────────────────
   JorTech — hero.css
   Full-height landing hero: badge, photo, name, CTA buttons, stats.
   ───────────────────────────────────────────────────────────────────────── */

.hero-section {
  min-height:      94vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         4rem 2rem;
  position:        relative;
  overflow:        hidden;
}

/* Subtle radial ambient glows */
.hero-section::before {
  content:    "";
  position:   absolute;
  inset:      0;
  z-index:    0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 40%, rgba(88,166,255,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 60%, rgba(63,185,80,.05)  0%, transparent 60%);
}

/* "Available" badge */
.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .5rem;
  background:    rgba(88,166,255,.1);
  border:        1px solid rgba(88,166,255,.3);
  color:         var(--titleColor);
  font-size:     .78rem;
  padding:       .35rem .9rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  position:      relative;
  z-index:       1;
}
.hero-badge::before {
  content:   "●";
  font-size: .5rem;
  color:     var(--accent2);
}

/* Profile photo */
.hero-photo-wrap {
  position:      relative;
  z-index:       1;
  margin-bottom: 1.8rem;
  width:         clamp(140px, 18vw, 180px);
  height:        clamp(140px, 18vw, 180px);
}
.hero-photo {
  width:           100%;
  height:          100%;
  border-radius:   50%;
  object-fit:      cover;
  object-position: top center;
  display:         block;
  box-shadow:      0 0 0 2px #0d1117;
  transition:      box-shadow .3s;
}
.hero-photo:hover {
  box-shadow: 0 0 0 2px #0d1117;
}
/* Gradient ring overlay */
.hero-photo-ring {
  position:   absolute;
  inset:      -5px;
  border-radius: 50%;
  border:     2px solid transparent;
  background: linear-gradient(135deg, var(--titleColor), var(--accent2)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* Name + title */
.hero-name {
  font-size:      clamp(2rem, 5vw, 3rem);
  font-weight:    900;
  letter-spacing: -1px;
  position:       relative;
  z-index:        1;
  margin-bottom:  .2rem;
}
.hero-title {
  font-size:      clamp(.78rem, 1.7vw, .95rem);
  color:          var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin:         .3rem 0 1.5rem;
  position:       relative;
  z-index:        1;
}
.hero-desc {
  max-width:  560px;
  color:      var(--muted);
  font-size:  .95rem;
  margin-bottom: 2.5rem;
  position:   relative;
  z-index:    1;
}

/* Action buttons */
.hero-actions {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  flex-wrap:       wrap;
  position:        relative;
  z-index:         1;
}
.btn-p {
  background:    var(--titleColor);
  color:         #0d1117;
  font-weight:   700;
  padding:       .75rem 1.8rem;
  border-radius: var(--r);
  font-size:     .95rem;
  transition:    background .2s, transform .15s;
}
.btn-p:hover { background: #79c0ff; transform: translateY(-1px); text-decoration: none; }

.btn-s {
  border:        1px solid var(--border);
  color:         var(--text);
  padding:       .75rem 1.8rem;
  border-radius: var(--r);
  font-size:     .95rem;
  transition:    border-color .2s, transform .15s;
}
.btn-s:hover { border-color: var(--titleColor); transform: translateY(-1px); text-decoration: none; }

/* Stats row */
.hero-stats {
  display:     flex;
  gap:         3rem;
  margin-top:  4rem;
  padding-top: 2.5rem;
  border-top:  1px solid var(--border);
  position:    relative;
  z-index:     1;
}
.stat-n { font-size: 2.2rem; font-weight: 700; color: var(--titleColor); }
.stat-l { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 768px) {
  .hero-stats { gap: 1.5rem; }
}