function HpServices({ bg }) {
  const items = [
    { n: "01", t: "Nutra & Supplements", d: "Health, weight-loss, blood-sugar, anti-aging — vetted on EPC, refund profile and compliance before we touch traffic." },
    { n: "02", t: "Digital Products",     d: "Self-help, financial, software offers across ClickBank, Digistore24, Buygoods and Maxweb. Picks based on math, not vibes." },
    { n: "03", t: "Pay-per-Call",         d: "Insurance and high-intent calls via MarketCall, Aragon and Ray. Routed, tracked and quality-scored end-to-end." },
    { n: "04", t: "Creative & Tracking",  d: "Advertorials, VSL hooks, ad angles, postback chains, S2S, anti-fraud. The plumbing that makes scaling profitable." },
  ];
  return (
    <section id="verticals" className="hp-section" style={{ background: bg }}>
      <div className="hp-container">
        <div className="hp-grid hp-grid-services" style={{ marginBottom: 64 }}>
          <div>
            <span className="eyebrow" style={{ borderBottom: "1px solid var(--coral)", paddingBottom: 2 }}>What we do</span>
          </div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.05,
            letterSpacing: "-0.04em", margin: 0, color: "var(--ink)", maxWidth: "22ch",
          }}>
            Three verticals, <span style={{ fontWeight: 200 }}>one machine for scaling offers profitably.</span>
          </h2>
        </div>
        <div className="hp-grid hp-grid-4" style={{ borderTop: "1px solid var(--ink)", paddingTop: 28 }}>
          {items.map(it => (
            <div key={it.n} style={{ display: "flex", flexDirection: "column", gap: 14, paddingTop: 20 }}>
              <span className="eyebrow">{it.n}</span>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 26,
                letterSpacing: "-0.04em", color: "var(--ink)", lineHeight: 1.05,
              }}>{it.t}</div>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 14,
                lineHeight: 1.55, color: "var(--ink-700)", margin: 0, maxWidth: "32ch",
                letterSpacing: "-0.01em",
              }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HpServices = HpServices;