function ServicePage({ data }) {
  return (
    <main>
      <section style={{ background: "var(--grad-wash)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "64px 24px 48px" }}>
          <div style={{ fontSize: 13, color: "var(--fg-3)", marginBottom: 16 }}>
            <a href="../index.html" style={{ color: "var(--fg-link)", textDecoration: "none" }}>Home</a>
            {" / "}<span>{data.title}</span>
          </div>
          <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--brand-accent-700)", marginBottom: 12 }}>{data.kicker}</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 42, lineHeight: 1.15, margin: "0 0 16px", color: "var(--brand-primary-700)", maxWidth: 760 }}>{data.headline}</h1>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg-2)", maxWidth: 680, margin: 0 }}>{data.intro}</p>
        </div>
      </section>
      <section style={{ background: "var(--bg-2)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 24px" }}>
          <div className="aims-card-grid" style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(data.products.length, 3)}, 1fr)`, gap: 20 }}>
            {data.products.map((p) => <ProductCard key={p.name} {...p} />)}
          </div>
        </div>
      </section>
      {data.feature}
      <CTABand base="../" />
    </main>
  );
}