function Security() {
  const items = [
    { num: "01", icon: "phone-call",   title: "Discovery call",  body: "Free 30-minute call. We look at how you win work today and where AI would — and wouldn’t — help. No pitch, no obligation." },
    { num: "02", icon: "compass",      title: "Onboarding",      body: "We sit down with you for a week, map your workflows, and write the spec for the first system. You see exactly what you’re getting before we build." },
    { num: "03", icon: "wrench",       title: "Build",           body: "We build, test, and roll out the system — connected to your tools, trained on your past work, in your voice. Live in 2–6 weeks." },
    { num: "04", icon: "life-buoy",    title: "Ongoing support",  body: "We monitor, fix, and improve. New systems get added as your business changes. Cancel with 30 days’ notice." },
  ];
  return (
    <section className="nx-sec" id="how">
      <div className="nx-sec__inner">
        <div className="nx-sec__head">
          <div className="nx-eyebrow nx-eyebrow--on-dark">How it works</div>
          <h2 className="nx-sec__title">Four steps. No jargon. You stay in control.</h2>
        </div>
        <div className="nx-sec__grid">
          {items.map((it) => (
            <div key={it.title} className="nx-sec__item">
              <div className="nx-sec__icon">
                <i data-lucide={it.icon} strokeWidth="1.75"></i>
              </div>
              <h3 className="nx-sec__h"><span style={{opacity:0.45, marginRight:8}}>{it.num}</span>{it.title}</h3>
              <p className="nx-sec__b">{it.body}</p>
            </div>
          ))}
        </div>
        <div className="nx-sec__foot">
          <a href="#cta" className="nx-link-arrow">Book a discovery call &rarr;</a>
        </div>
      </div>
    </section>
  );
}
window.Security = Security;