function Hero() {
  return <section className="hero wrap" style={{ textAlign:"center", paddingTop:60 }}>
    <Eyebrow>{t("hero.eyebrow")}</Eyebrow>
    <h1 className="display hero-h1" style={{ margin:"26px auto 0", maxWidth:"14ch" }}>
      {t("hero.h1a")}<br/>{t("hero.h1b")}<span className="serif-i" style={{ color:"var(--forest)", fontSize:"1.04em" }}>{t("hero.h1emph")}</span>
    </h1>
    <p className="hero-sub" style={{ fontSize:20, lineHeight:1.5, color:"var(--ink-2)", maxWidth:600, margin:"24px auto 0", fontWeight:450 }}>
      {t("hero.sub")}
    </p>
    <div className="hero-cta" style={{ display:"flex", gap:14, justifyContent:"center", marginTop:34, flexWrap:"wrap" }}>
      <Btn href={V2_LINKS.pricing}>{t("cta.startFreeNoCard")}</Btn>
      <Btn variant="ghost" href="#tour"><span style={{ width:22,height:22,borderRadius:"50%",background:"var(--accent-tint)",color:"var(--accent-ink)",display:"grid",placeItems:"center",fontSize:9 }}>▶</span> {t("hero.watchTour")}</Btn>
    </div>
    <div style={{ marginTop:22 }}><TrustBar/></div>
    <div className="hero-stage" style={{ marginTop:54, paddingBottom:90, position:"relative" }}>
      <ProductFrame
        src="landing/v2/images/hero-chart@2x.png"
        mobileSrc="landing/v2/images/hero-chart-mobile@2x.png"
        alt={t("hero.productAlt")} />
      {/* No play overlay here — the VideoBand (#tour) is the single place to watch
          the tour; the hero's "Watch the tour" ghost CTA scrolls there. */}
    </div>
  </section>;
}
Object.assign(window, { Hero });