/* shared tokens, buttons, nav, footer, and CTA band live in hera-shared.css */

/* ============================================================
   BLOCK 1 — HERO
   ============================================================ */
.hera-hero{
  padding:88px 0 80px;
  background:
    radial-gradient(1100px 500px at 82% -10%, var(--hera-blue-pale) 0%, transparent 60%),
    var(--hera-surface);
}
.hera-hero .container{
  display:grid;
  grid-template-columns: 1fr;
  max-width:840px;
  text-align:center;
}
.hera-hero .container > *{ margin-left:auto; margin-right:auto; }
.hera-hero h1{
  font-size:clamp(32px, 4.4vw, 52px);
  font-weight:900;
}
.hera-hero h1 .accent{ color: var(--hera-blue-core); }
.hera-hero .lede{
  font-size:18px;
  color: var(--hera-ink-soft);
  max-width:58ch;
  margin-bottom:32px;
}
.hera-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* ============================================================
   BLOCK 2 — CORE PROBLEM (scannable 3-card layout)
   ============================================================ */
.hera-problem{ background: var(--hera-surface-alt); }
.problem-head{ max-width:70ch; margin-bottom:52px; }
.problem-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.problem-card{
  background:#fff; border:1px solid var(--hera-border); border-radius:var(--radius-lg);
  padding:30px 28px; box-shadow: var(--shadow-card);
  border-top:4px solid var(--hera-leak);
}
.problem-tag{
  font-family:var(--font-data); font-weight:700; font-size:11.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--hera-leak);
  margin-bottom:12px;
}
.problem-card h3{ font-size:18px; margin-bottom:10px; }
.problem-card p{ font-size:14.5px; margin-bottom:0; }
.problem-card .stat-inline{
  font-family:var(--font-display); font-weight:900; color:var(--hera-leak);
}
@media (max-width:980px){
  .problem-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   BLOCK 3 — HOW THE AI ENGINE WORKS (numbered pipeline)
   ============================================================ */
.hera-engine-head{ max-width:70ch; margin-bottom:56px; }
.engine-track{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  position:relative;
}
.engine-track::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background: var(--hera-blue-pale); z-index:0;
}
.engine-step{ position:relative; z-index:1; }
.engine-num{
  width:52px; height:52px; border-radius:50%;
  background:#fff; border:2px solid var(--hera-blue-core); color:var(--hera-blue-core);
  font-family:var(--font-data); font-weight:700; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.engine-step h3{ font-size:17px; margin-bottom:8px; }
.engine-step p{ font-size:14.5px; }
@media (max-width:900px){
  .engine-track{ grid-template-columns:1fr; }
  .engine-track::before{ display:none; }
}

/* ============================================================
   BLOCK 4 — NATIVE PARTNER ECOSYSTEM
   ============================================================ */
.hera-partners{ background: var(--hera-surface-alt); }
.partners-head{ max-width:70ch; margin-bottom:48px; }
.partner-group{ margin-bottom:36px; }
.partner-group:last-child{ margin-bottom:0; }
.partner-group-label{
  font-family:var(--font-data); font-weight:700; font-size:12.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--hera-ink-faint);
  margin-bottom:16px;
}
.partner-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.partner-pill{
  background:#fff; border:1px solid var(--hera-border); border-radius:999px;
  padding:9px 18px; font-size:14px; font-weight:500; color:var(--hera-ink);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.partner-pill:hover{ border-color:var(--hera-blue-core); color:var(--hera-blue-core); transform:translateY(-1px); }
.partners-note{
  margin-top:32px; font-size:13.5px; color:var(--hera-ink-faint);
  border-top:1px solid var(--hera-border); padding-top:20px;
}