/* ============================================================
   3Powers — hero.
   Editorial split: the claim on the left, the run on the right.
   ============================================================ */

.hero {
  background:
    radial-gradient(1100px 520px at 16% -190px, var(--paper) 0%, rgba(252, 251, 248, 0) 68%),
    var(--surface-page);
  border-bottom: 1px solid var(--line);
  padding: var(--space-22) 0 var(--space-26);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-16);
  align-items: center;
}

.hero h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-7);
  max-width: 15ch;
}
.hero h1 em { font-style: italic; color: var(--gold); }

.eyebrow.eyebrow-sub {
  margin-top: calc(var(--space-3) * -1);
  color: var(--text-muted);
}

.hero .lead {
  max-width: 56ch;
  margin: 0 0 var(--space-9);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--text-secondary);
}

.hero-cta { display: grid; gap: var(--space-5); justify-items: start; }
.hero-links { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.hero-links a {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--ink);
  border-bottom: 1px solid var(--gold-bright);
  padding-bottom: 2px;
}
.hero-links a:hover { color: var(--gold); text-decoration: none; }

.hero-meta {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-12) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.hero-meta b { color: var(--ink); font-weight: 600; }

/* ---- the run, as the hero's evidence ---- */
.hero-run { position: relative; }
.hero-run .terminal { box-shadow: 0 30px 74px rgba(33, 28, 22, 0.22); }
.hero-run .terminal-body { min-height: 19em; }
.hero-run-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

@media (max-width: 1040px) {
  .hero { padding-top: var(--space-16); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero h1 { max-width: 20ch; }
}