/* ═══════════════════════════════
   HERO.CSS
═══════════════════════════════ */
#hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 64px 80px;
  position: relative; z-index: 2;
  overflow: hidden;
}

/* Giant Name Block */
.hero-name-block { margin-bottom: 20px; line-height: 0.88; }

.giant-line {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  line-height: 0.88;
  position: relative;
}
.giant-line.line-sudip {
  font-size: clamp(6rem, 16vw, 18rem);
  background: var(--grad); background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 5s ease infinite;
}
.giant-line.line-kumar {
  font-size: clamp(3.5rem, 9.5vw, 10.5rem);
  color: var(--text-main);
}
.giant-line.line-sah {
  font-size: clamp(5rem, 13vw, 14.5rem);
  -webkit-text-stroke: 2px rgba(124,58,237,0.35);
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="light"] .giant-line.line-sah {
  -webkit-text-stroke: 2px rgba(124,58,237,0.25);
}

/* Hero meta row */
.hero-meta {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; margin-bottom: 44px;
}
.hero-role {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text-mid); font-weight: 400;
}
.hero-role strong { color: var(--p1); font-weight: 700; }
.meta-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gb2); }
.avail-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #059669; padding: 7px 16px; border-radius: 99px;
  background: rgba(5,150,105,0.1);
  border: 1px solid rgba(5,150,105,0.25);
}
.avail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #059669; box-shadow: 0 0 8px #059669;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { opacity: 1; box-shadow: 0 0 8px #059669; }
  50% { opacity: 0.5; box-shadow: 0 0 18px #059669; }
}

/* Hero lower grid */
.hero-lower {
  display: grid; grid-template-columns: 1fr 380px; gap: 50px;
  align-items: start;
  perspective: 1000px;
}
.hero-desc {
  font-size: 1.15rem; color: var(--text-mid);
  line-height: 1.9; font-weight: 400; margin-bottom: 38px;
  max-width: 600px;
}
.hero-desc strong { color: var(--text-main); font-weight: 700; }

.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero side card */
.hero-side-card {
  border-radius: var(--radius-lg); padding: 30px;
  position: relative;
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: var(--transition), transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: cardFloat 8s ease-in-out infinite;
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0px) rotateY(0deg); }
  50% { transform: translateY(-2px) rotateY(1deg); }
}
.hero-side-card:hover {
  animation: none;
  transform: rotateY(5deg) rotateX(-2deg) translateY(-5px) scale(1.02);
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.06), 0 15px 40px rgba(124,58,237,0.25);
}
.hero-side-card::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px); z-index: -1;
  background: linear-gradient(135deg,
    rgba(124,58,237,0.3), rgba(37,99,235,0.15), rgba(219,39,119,0.2));
  opacity: 0.8;
}
.hero-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero-card-avatar {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.04em;
  color: #fff; box-shadow: 0 6px 18px rgba(124,58,237,0.45);
}
.hero-card-name { font-size: 1rem; font-weight: 800; color: var(--text-main); }
.hero-card-role { font-size: 0.72rem; color: var(--p1); font-weight: 600; margin-top: 2px; }
.hero-card-divider { height: 1px; background: var(--gb); margin-bottom: 18px; }
.hero-card-bar-row { margin-bottom: 12px; }
.hero-card-label {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.hero-card-track { height: 5px; border-radius: 99px; background: rgba(124,58,237,0.1); overflow: hidden; }
.hero-card-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  width: 0; transition: width 1.6s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(124,58,237,0.45);
}
.hero-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.hero-card-stat {
  border-radius: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--gb);
}
.hero-card-stat-number {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.04em;
  background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; line-height: 1;
}
.hero-card-stat-label {
  font-family: var(--font-mono); font-size: 0.58rem;
  color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px;
}
.hero-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hero-card-tag {
  padding: 4px 10px; border-radius: 99px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.05em; background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.22); color: var(--p1);
}

@media (max-width: 1100px) {
  .hero-lower { grid-template-columns: 1fr; }
  .hero-side-card { display: none; }
}
@media (max-width: 768px) {
  #hero { padding: 100px 22px 60px; }
  .giant-line.line-sudip { font-size: clamp(4.5rem, 18vw, 9rem); }
  .giant-line.line-kumar { font-size: clamp(2.5rem, 10vw, 6rem); }
  .giant-line.line-sah { font-size: clamp(3.5rem, 14vw, 7.5rem); }
  .hero-desc { font-size: 1rem; }
}