/* ============================================================
   HERO — above the fold
   ============================================================ */

.hero {
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 75vh;
  border-bottom: 1px solid var(--c-border);
  position: relative;
}

.hero-eyebrow {
  margin-bottom: var(--sp-2);
  animation-delay: 0.05s;
}

.hero-headline {
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
  color: #0d0d0d;
}

.hero-headline .line-inner {
  background: linear-gradient(135deg, #0d0d0d 60%, #1a1a2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0d0d0d;
}

.hero-accent {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-accent); /* fallback */
}

.hero-bio {
  max-width: 48ch;
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--c-ink-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
  animation: fadeUp 0.7s ease 0.5s both;
}

.hero-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.6rem;
  background: var(--c-accent);
  color: var(--c-surface);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: 0.85rem 1.75rem;
  border-radius: 100px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color var(--transition);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.22);
  will-change: transform;
  animation: fadeUp 0.7s ease 0.65s both;
}

.hero-cta:hover {
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35);
}

.hero-cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition);
}

.hero-cta:hover svg {
  transform: translateX(3px);
}

/* Decorative index number */
.hero-index {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  font-family: 'Syne', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-border);
  writing-mode: vertical-rl;
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
  }
  .hero-bio { max-width: 100%; }
}