/* visdi-home-sections.jsx - VISDI by Minerva - Homepage (all 11 sections)
   Text colour standard: headings #fff · primary body #C4D8EE · secondary #A4BDD4 · never below #8AAEC8 */

const { WheelMark, NavBar, Btn, Eyebrow, HeadlineDivider, Arrow, Icon, CircuitSVG, VineBorder, SiteFooter, STAGE } = window;

/* ── §1 · HERO ─────────────────────────────────────────── */
function HeroSection() {
  return (
    <section data-screen-label="01 - Hero" style={{
      minHeight: "calc(100vh - 66px)", position: "relative", overflow: "hidden",
      background: "linear-gradient(155deg,#0A1426 0%,#0C1830 55%,#080F1C 100%)",
      display: "flex", flexDirection: "column"
    }}>
      <div style={{ flex: 1, display: "flex", alignItems: "center", maxWidth: 1280, margin: "0 auto",
        padding: "72px 80px", width: "100%", gap: 64 }}>
        <div style={{ flex: "1 1 0", maxWidth: 660 }}>
          <h1 style={{ fontSize: 64, fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "0", color: "#fff" }}>
            The AI-ready<br />knowledge for<br />
            <span style={{ color: "var(--minerva-sky)", fontStyle: "italic", fontWeight: 600 }}>regulated life sciences.</span>
          </h1>
          <HeadlineDivider color="var(--minerva-sky)" />
          <p style={{ fontSize: 18, lineHeight: 1.68, color: "#C4D8EE", maxWidth: 540, margin: "0 0 36px" }}>
            The compliant layer between fragmented data and the humans, agents, and robots
            that need to act on it. Queryable. Auditable. Versioned.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 52 }}>
            <Btn href="/knowledge-governance/Start%20Diagnostic.html" accent="var(--minerva-gold)" textColor="#0A1426"
            shadow="0 8px 32px rgba(224,162,48,0.28)">Start a Diagnostic <Arrow /></Btn>
          </div>
          <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <span style={{ width: 30, height: 1, background: "rgba(255,255,255,0.25)", flexShrink: 0 }} />
              <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: "0.20em", whiteSpace: "nowrap",
                color: "rgba(231,239,250,0.60)", textTransform: "uppercase" }}>HUMANS · AI AGENTS · ROBOTS</span>
              <span style={{ width: 30, height: 1, background: "rgba(255,255,255,0.25)", flexShrink: 0 }} />
            </div>
            <span style={{ fontSize: 15, color: "rgba(231,239,250,0.50)", whiteSpace: "nowrap" }}>Knowledge Execution · Compliant AI</span>
          </div>
        </div>
        <div style={{ flex: "0 0 460px", display: "flex", justifyContent: "center",
          alignItems: "center", position: "relative" }}>
          <div style={{ position: "absolute", width: 420, height: 420, borderRadius: "50%",
            background: "radial-gradient(circle,rgba(63,177,229,0.30),transparent 70%)",
            filter: "blur(46px)" }} />
          <img src="assets/hero-gi-hands.png"
          alt="A human hand and a cosmic, star-filled robotic hand cradling a glowing blue orb"
          style={{ position: "relative", zIndex: 1, width: 460, height: "auto", objectFit: "contain",
            WebkitMaskImage: "linear-gradient(to left, transparent 1%, #000 15%), radial-gradient(55% 50% at 100% 100%, transparent 8%, #000 62%), linear-gradient(to right, transparent 2%, #000 42%), radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 92%)",
            WebkitMaskComposite: "source-in",
            maskImage: "linear-gradient(to left, transparent 1%, #000 15%), radial-gradient(55% 50% at 100% 100%, transparent 8%, #000 62%), linear-gradient(to right, transparent 2%, #000 42%), radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 92%)",
            maskComposite: "intersect",
            filter: "drop-shadow(0 12px 40px rgba(0,0,0,0.45))" }} />
        </div>
      </div>
      <div style={{ textAlign: "center", paddingBottom: 28 }}>
        <span style={{ fontSize: 14, color: "rgba(231,239,250,0.72)", letterSpacing: "0.14em", textTransform: "uppercase" }}>scroll</span>
      </div>
    </section>);

}

/* ── §2 · MARKET MOMENT - icon cards ───────────────────── */
function MarketMomentSection() {
  const cards = [
  { n: "01", icon: "users", color: "#E0A230", title: "Workforce anxiety",
    body: "Staff fear AI replacing them.\n\nManagers fear losing institutional knowledge that lives in people's heads.\n\nNeither group trusts a tool with no accountability." },
  { n: "02", icon: "scale", color: "#3FB1E5", title: "Regulatory uncertainty",
    body: "There is a lack of knowledge on frameworks for AI-generated work product.\n\nWith no agreed standard to measure against, vendor claims can't be independently verified." },
  { n: "03", icon: "alert-circle", color: "#D20F8C", title: "Operational paralysis",
    body: "Pilots stall.\n\nKnowledge isn't structured or auditable enough.\n\nThe AI budget gets spent but nothing survives inspection." }];

  return (
    <section data-screen-label="02 - Market Moment" style={{ background: "#0E1E34", padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px" }}>
        <div style={{ maxWidth: 700, marginBottom: 60 }}>
          <Eyebrow>The Market Moment</Eyebrow>
          <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 18px", color: "#fff" }}>
            Life science companies don't have<br />an AI problem. They have a knowledge problem.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "#C2D8EC", margin: 0 }}>AI being sold as the answer. Three pressures are present in every regulated industry.

          </p>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
          {cards.map(({ n, icon, color, title, body }) =>
          <div key={n} style={{ background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: "32px 28px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
                <div style={{ width: 66, height: 66, borderRadius: 16,
                background: `${color}18`, border: `1px solid ${color}30`,
                display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={icon} size={38} color={color} strokeWidth={1.8} />
                </div>
                <span style={{ fontSize: 15, fontWeight: 700, color: `${color}`, opacity: 0.60,
                letterSpacing: "0.10em", fontFamily: "var(--wix-text)" }}>{n}</span>
              </div>
              <h3 style={{ fontSize: 21, fontWeight: 700, letterSpacing: "-0.015em", color: "#EEF4FC",
              fontFamily: "var(--wix-display)", margin: "0 0 14px" }}>{title}</h3>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                {body.split("\n\n").map((p, i) =>
            <li key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start",
              fontSize: 17, lineHeight: 1.55, color: "#C2D8EC" }}>
                    <span style={{ flexShrink: 0, width: 6, height: 6, borderRadius: "50%", background: color, marginTop: 8 }} />
                    <span>{p}</span>
                  </li>
            )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── §3 · POSITIONING ───────────────────────────────────── */
function PositioningSection() {
  const xanax = ["Chatbots promising staff cuts", "Sold without method or measurement", "No compliance rubric an auditor accepts", "Buyers who try it get burned "];
  const iv = ["Delivered by a qualified GxP provider", "A documented method", "Measured at every stage, auditable by design", "The human stays in command - and their work gets visibly better"];
  return (
    <section data-screen-label="03 - Positioning" style={{ background: "#0A1422", padding: "100px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(63,177,229,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(63,177,229,0.025) 1px,transparent 1px)", backgroundSize: "56px 56px", pointerEvents: "none" }} />
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px", position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Eyebrow center>The Positioning</Eyebrow>
          <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px auto 18px", color: "#fff", maxWidth: 820 }}>
            Everyone is selling AI as a pill.<br />We deliver it as an therapy.
          </h2>
          <p style={{ fontSize: 18, color: "#C2D8EC", maxWidth: 600, margin: "0 auto", lineHeight: 1.6 }}>Same therapy, different posture - administered by a qualified provider, following actual standards and regulations.

          </p>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 20 }}>
          <div style={{ backgroundColor: "#0A1422", backgroundImage: "linear-gradient(rgba(28,77,161,0.12),rgba(28,77,161,0.12))", border: "1px solid rgba(28,77,161,0.50)",
            borderRadius: "var(--radius-lg)", padding: "36px 32px" }}>
            <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em",
              color: "rgba(108,156,224,0.95)", textTransform: "uppercase", margin: "0 0 22px",
              fontFamily: "var(--wix-text)" }}>The market's AI pill</p>
            <p className="pos-intro" style={{ fontSize: 17, lineHeight: 1.6, color: "#C2D8EC", margin: "0 0 22px" }}>Offer temporary relief: they reduce the anxiety of "falling behind" but don't actually fix the underlying problem and often introduce new ones.

            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {xanax.map((item, i) =>
              <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ color: "rgba(108,156,224,0.95)", flexShrink: 0, lineHeight: 1.5, fontWeight: 700 }}>-</span>
                  <span style={{ fontSize: 17, lineHeight: 1.55, color: "#C2D8EC" }}>{item}</span>
                </div>
              )}
            </div>
          </div>
          <div style={{ backgroundColor: "#0A1422", backgroundImage: "linear-gradient(rgba(63,177,229,0.09),rgba(63,177,229,0.09))", border: "1px solid rgba(63,177,229,0.42)",
            borderRadius: "var(--radius-lg)", padding: "36px 32px" }}>
            <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em",
              color: "rgba(63,177,229,0.85)", textTransform: "uppercase", margin: "0 0 22px",
              fontFamily: "var(--wix-text)" }}>THE MINERVA AI THERAPY</p>
            <p className="pos-intro" style={{ fontSize: 17, lineHeight: 1.6, color: "#C4D8EE", margin: "0 0 22px" }}>A therapy that delivers what the body needs, in a controlled, qualified, monitored way. Not a tool that replaces people, but a method that makes people visibly better at their jobs.

            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {iv.map((item, i) =>
              <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--minerva-sky)", flexShrink: 0, lineHeight: 1.5 }}>✓</span>
                  <span style={{ fontSize: 17, lineHeight: 1.55, color: "#C4D8EE" }}>{item}</span>
                </div>
              )}
            </div>
          </div>
        </div>
        <div style={{ backgroundColor: "#0A1422", backgroundImage: "linear-gradient(rgba(224,162,48,0.09),rgba(224,162,48,0.09))", border: "1px solid rgba(224,162,48,0.42)",
          borderRadius: "var(--radius-lg)", padding: "32px 44px", textAlign: "center" }}>
          <p style={{ fontSize: 20, lineHeight: 1.6, color: "#D8E8F8", fontStyle: "italic",
            fontFamily: "var(--wix-text)", margin: 0 }}>"We make people-AI compliant collaboration possible - so your new AI-enabled intelligence is one you can defend."

          </p>
        </div>
      </div>
    </section>);

}

/* ── §4 · THE CATEGORY ──────────────────────────────────── */
function CategorySection() {
  return (
    <section data-screen-label="04 - Category" style={{ background: "#0E1E34", padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px" }}>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <Eyebrow>The Category We Own</Eyebrow>
            <h2 data-animate style={{ fontSize: 60, fontWeight: 700, lineHeight: 1.04, letterSpacing: "-0.02em",
              fontFamily: "var(--baroque-display)", margin: "22px 0 22px", color: "#fff" }}>
              Knowledge<br />Execution
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.68, color: "#C4D8EE", margin: 0 }}>The compliant, AI-ready knowledge layer that sits between fragmented data and the humans, AI agents, and robots that need to act on it.

            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {/* Top layer */}
            <div style={{ background: "rgba(231,239,250,0.09)", border: "1px solid rgba(231,239,250,0.72)",
              borderRadius: "14px 14px 0 0", padding: "22px 28px", textAlign: "center" }}>
              <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em",
                color: "rgba(231,239,250,0.65)", textTransform: "uppercase", margin: "0 0 8px",
                fontFamily: "var(--wix-text)" }}>Acting on knowledge</p>
              <p style={{ fontSize: 18, fontWeight: 700, color: "#E8F0FC", letterSpacing: "0.04em",
                margin: 0, fontFamily: "var(--wix-display)" }}>HUMANS · AI AGENTS · ROBOTS</p>
            </div>
            {/* Arrow */}
            <div style={{ display: "flex", justifyContent: "center", padding: "10px 0", background: "rgba(0,0,0,0.25)" }}>
              <svg width="20" height="28" viewBox="0 0 20 28" fill="none">
                <path d="M10 2v9M6 8l4 4 4-4" stroke="rgba(255,255,255,0.40)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M10 26v-9M6 20l4-4 4 4" stroke="rgba(255,255,255,0.40)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            {/* Middle - VISDI layer */}
            <div className="cat-visdi-box" style={{ background: "linear-gradient(135deg,rgba(28,77,161,0.28),rgba(63,177,229,0.15))",
              border: "1px solid rgba(63,177,229,0.45)", padding: "26px 28px", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0,
                background: "radial-gradient(ellipse at center,rgba(63,177,229,0.09),transparent 70%)",
                pointerEvents: "none" }} />
              <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em",
                color: "var(--minerva-sky)", textTransform: "uppercase", margin: "0 0 8px",
                fontFamily: "var(--wix-text)" }}>Knowledge Execution</p>
              <p style={{ fontSize: 18, fontWeight: 800, color: "#fff", letterSpacing: "-0.01em",
                margin: "0 0 6px", fontFamily: "var(--wix-display)" }}>THE AI-READY KNOWLEDGE LAYER 

              </p>
              <p style={{ fontSize: 15, color: "rgba(63,177,229,0.85)", margin: 0 }}>Queryable · Auditable · Versioned · GxP-Compliant</p>
              <img src="assets/category-packet-cube.png" alt="" aria-hidden="true" className="cat-cube"
              style={{ position: "absolute", right: -68, top: "50%", transform: "translateY(-50%)",
                width: 119, height: 119, objectFit: "contain", pointerEvents: "none", userSelect: "none", zIndex: 3,
                filter: "drop-shadow(0 8px 22px rgba(0,0,0,0.45))" }} />
            </div>
            {/* Arrow */}
            <div style={{ display: "flex", justifyContent: "center", padding: "10px 0", background: "rgba(0,0,0,0.25)" }}>
              <svg width="20" height="28" viewBox="0 0 20 28" fill="none">
                <path d="M10 2v9M6 8l4 4 4-4" stroke="rgba(255,255,255,0.40)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M10 26v-9M6 20l4-4 4 4" stroke="rgba(255,255,255,0.40)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            {/* Bottom layer */}
            <div style={{ background: "rgba(231,239,250,0.05)", border: "1px solid rgba(231,239,250,0.18)",
              borderRadius: "0 0 14px 14px", padding: "22px 28px", textAlign: "center" }}>
              <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em",
                color: "rgba(231,239,250,0.58)", textTransform: "uppercase", margin: "0 0 8px",
                fontFamily: "var(--wix-text)" }}>Fragmented source material</p>
              <p style={{ fontSize: 17, fontWeight: 600, color: "rgba(231,239,250,0.68)",
                letterSpacing: "0.02em", margin: 0, fontFamily: "var(--wix-display)" }}>
                SCATTERED DATA · DOCUMENTS · SME EXPERIENCE
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── §4b · THE VOCABULARY ───────────────────────────────── */
function VocabSection() {
  const terms = [
  { icon: "message-circle", iconImg: "assets/vocab-orb-head.png", color: "#3FB1E5", term: "Mingi", role: "The persona", href: "visdi-mingi.html", linkLabel: "Mingi Details",
    defBullets: ["Minerva General Intelligence.", "The result of compliant integration between humans and AI", "The face of the layer and the platform."] },
  { icon: "package", iconImg: "assets/category-packet-cube.png", color: "#3FB1E5", term: "VISDI", role: "The architectural base",
    defBullets: ["Visual-Digital Knowledge.", "The foundational layer - the architecture everything else is built on."] },
  { icon: "book-open", iconImg: "assets/vocab-ledger.png", imgNudge: 3, color: "#069848", term: "The Ledger", role: "Governance & comms",
    defBullets: ["Traceability and Record keeping", "Activity coordination and recording - with provenance", "Packet traceability and the customer-facing account.", "Auditable and append-only - nothing is ever overwritten."] },
  { icon: "badge", iconImg: "assets/vocab-clv.png", color: "#E0A230", term: "CLV", role: "The validation discipline",
    defBullets: ["Context Language Validation - a governance framework coined by Minerva.", "Validates the context layer - the instructions, documents, and tools an AI depends on - one layer upstream of CSV."] }];

  return (
    <section data-screen-label="04b - Vocabulary" style={{ background: "#0A1422", padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px" }}>
        <div style={{ marginBottom: 56 }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow>The Vocabulary</Eyebrow>
            <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
              fontFamily: "var(--baroque-display)", margin: "22px 0 16px", color: "#fff" }}>
              Four Execution Pillars. Four jobs.<br />None overlapping.
            </h2>
            <p style={{ fontSize: 18, color: "#C2D8EC", lineHeight: 1.6, margin: 0 }}>
              Use these terms precisely - they describe different things and must not be conflated.
            </p>
          </div>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 22 }}>
          {terms.map(({ icon, iconImg, imgNudge, color, term, role, defBullets, wide, href, linkLabel }) =>
          wide ?
          <div key={term} className="vocab-wide" style={{ gridColumn: "1 / -1", background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: "30px 34px",
            display: "flex", alignItems: "center", gap: 34 }}>
                <div style={{ width: 74, height: 74, borderRadius: 20, flexShrink: 0,
              background: `${color}18`, border: `1.5px solid ${color}35`,
              display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {iconImg ?
              <img src={iconImg} alt="" aria-hidden="true" style={{ width: 54, height: 54, objectFit: "contain", transform: imgNudge ? `translateY(${imgNudge}px)` : undefined }} /> :
              <Icon name={icon} size={42} color={color} strokeWidth={1.7} />}
                </div>
                <div className="vocab-wterm" style={{ flexShrink: 0, width: 262 }}>
                  <h3 style={{ fontSize: 26, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
                margin: "0 0 6px", letterSpacing: "-0.02em" }}>{term}</h3>
                  <p className="vocab-wrole" style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase",
                color, margin: 0, fontFamily: "var(--wix-text)", opacity: 0.85, whiteSpace: "nowrap" }}>{role}</p>
                </div>
                <div style={{ width: 2, alignSelf: "stretch", background: `${color}50`, flexShrink: 0 }} />
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexWrap: "wrap", gap: "8px 34px", flex: 1, minWidth: 0 }}>
                  {defBullets.map((b, bi) =>
              <li key={bi} style={{ display: "flex", gap: 10, alignItems: "flex-start",
                fontSize: 17, lineHeight: 1.55, color: "#C2D8EC" }}>
                      <span style={{ flexShrink: 0, width: 6, height: 6, borderRadius: "50%", background: color, marginTop: 8 }} />
                      <span>{b}</span>
                    </li>
              )}
                </ul>
                <a href={href} aria-label={`Go to ${term}`} title={linkLabel}
            style={{ flexShrink: 0, height: 64, padding: "0 22px", borderRadius: 18, alignSelf: "center",
              background: `${color}18`, border: `1.5px solid ${color}55`, color,
              display: href ? "flex" : "none", alignItems: "center", gap: 10, textDecoration: "none",
              fontFamily: "var(--wix-text)", fontSize: 16, fontWeight: 700, whiteSpace: "nowrap",
              transition: "background .2s, border-color .2s, transform .2s" }}
            onMouseEnter={(e) => {e.currentTarget.style.background = `${color}2e`;e.currentTarget.style.transform = "translateY(-2px)";}}
            onMouseLeave={(e) => {e.currentTarget.style.background = `${color}18`;e.currentTarget.style.transform = "none";}}>
                  <span>{linkLabel}</span>
                  <Icon name="arrow-up-right" size={22} color={color} strokeWidth={2} />
                </a>
              </div> :
          <div key={term} style={{ background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: "32px 26px" }}>
              <div style={{ width: 74, height: 74, borderRadius: 20,
              background: `${color}18`, border: `1.5px solid ${color}35`,
              display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 22 }}>
                {iconImg ?
              <img src={iconImg} alt="" aria-hidden="true" style={{ width: 54, height: 54, objectFit: "contain", transform: imgNudge ? `translateY(${imgNudge}px)` : undefined }} /> :
              <Icon name={icon} size={42} color={color} strokeWidth={1.7} />}
              </div>
              <h3 className="vocab-term" style={{ fontSize: 26, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
              margin: "0 0 6px", letterSpacing: "-0.02em" }}>{term}</h3>
              <p className="vocab-role" style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase",
              color, margin: "0 0 16px", fontFamily: "var(--wix-text)", opacity: 0.85 }}>{role}</p>
              <div style={{ width: 32, height: 2, background: `${color}50`, marginBottom: 16 }} />
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                {defBullets.map((b, bi) =>
              <li key={bi} style={{ display: "flex", gap: 10, alignItems: "flex-start",
                fontSize: 17, lineHeight: 1.55, color: "#C2D8EC" }}>
                    <span style={{ flexShrink: 0, width: 6, height: 6, borderRadius: "50%", background: color, marginTop: 8 }} />
                    <span>{b}</span>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 44 }}>
          <Btn href="visdi-method.html" variant="ghost" xstyle={{ whiteSpace: "nowrap" }}>
            The Method <Arrow />
          </Btn>
        </div>
      </div>
    </section>);

}

/* ── §5 · THE METHOD - icon stages ──────────────────────── */
function MethodSection() {
  const stages = [
  { n: "01", icon: "eye", name: "Visualize", desc: "Map how people actually work - in detail, visually, end to end.", color: "#4A86E8" },
  { n: "02", icon: "layout-grid", name: "Structure", desc: "Organize fragmented data into coherent, related information.", color: "#4A86E8" },
  { n: "03", icon: "database", name: "Digitalize", desc: "Make it machine-legible: structured, connected, searchable.", color: "#4A86E8" },
  { icon: "shield-check", name: "Verification", gate: "Trust Gate", desc: "Nothing becomes knowledge until a human signs off.", color: "#E0A230" },
  { n: "04", icon: "network", name: "Knowledge-Enable", desc: "Verified information becomes executable knowledge - for humans, agents, and robots.", color: "#069348" },
  { n: "05", icon: "zap", name: "Execute", desc: "Apply verified knowledge to transform reality, under human supervision.", color: "#04975e" },
  { icon: "activity", name: "Monitoring", gate: "Performance Gate", desc: "Monitor, measure, and adjust compliant execution over time.", color: "#58499c" }];

  return (
    <section data-screen-label="05 - The Method" style={{ background: "#0C1A2C", padding: "100px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px", position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 52 }}>
          <div>
            <Eyebrow>The Minerva Way</Eyebrow>
            <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
              fontFamily: "var(--baroque-display)", margin: "22px 0 0", color: "#fff" }}>
              Five stages, two gates of<br />knowledge transformation.
            </h2>
          </div>
          <Btn href="/home/" variant="ghost" xstyle={{ whiteSpace: "nowrap" }}>
            Explore the full method <Arrow />
          </Btn>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: 12 }}>
          {stages.map(({ n, icon, name, desc, color, gate }) =>
          <div key={name} style={{ minWidth: 0, backgroundColor: "#0C1A2C", backgroundImage: "linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05))",
            border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)",
            padding: "20px 12px", borderTop: `3px solid ${color}` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 14 }}>
                <div style={{ width: 38, height: 38, borderRadius: 11,
                background: `${color}18`, border: `1px solid ${color}35`,
                display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={icon} size={26} color={color} strokeWidth={1.8} />
                </div>
                <span style={{ fontSize: 12, fontWeight: 900, color, fontFamily: "var(--wix-text)",
                letterSpacing: "0.04em" }}>{gate ? "◆" : n}</span>
              </div>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: "#EEF4FC",
              fontFamily: "var(--wix-display)", margin: 0, letterSpacing: "-0.01em", overflowWrap: "anywhere" }}>{name}</h3>
              {gate && <span style={{ display: "inline-block", fontSize: 9, fontWeight: 700, letterSpacing: "0.02em",
              textTransform: "uppercase", color, marginTop: 8, fontFamily: "var(--wix-text)", whiteSpace: "normal" }}>{gate}</span>}
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── §6 · HOW IT WORKS - icon points ───────────────────── */
function EngineSection() {
  const pts = [
  { n: "01", icon: "package", accent: "var(--minerva-sky)", title: "Everything is a knowledge packet", body: "The atomic unit - small, self-contained, machine-legible. A work-instruction step, a daily update, a decision rationale. Only packets, all the way down." },
  { n: "02", icon: "message-circle", accent: "var(--minerva-sky)", title: "Everything communicated is recorded.", body: "The model infers the packet type from natural language, then asks only for what's missing. Old way: schema fixed before the work is understood. New way: The Ledger." },
  { n: "03", icon: "shield-check", accent: "var(--minerva-gold)", title: "Nothing becomes knowledge until a human verifies it", body: "The Trust gate. The model's output is always a candidate. A human confirms - then it becomes knowledge. Auditable by design, defensible in inspection.", highlight: true },
  { n: "04", icon: "layers", accent: "var(--minerva-sky)", title: "Packets compound", body: "Related packets cluster. Enough of them trigger an assembly event - a work instruction - which faces its own release gate one altitude up." },
  { n: "05", icon: "git-merge", accent: "var(--minerva-sky)", title: "One audited source of truth, many views", body: "The same truth projects on demand. Every projection traceable. Nothing is ever overwritten. Provenance by design, not by discipline." },
  { n: "06", icon: "activity", accent: "var(--minerva-gold)", title: "Monitored and re-verified over time", body: "Execution is measured continuously. Drift, ambiguity, and stale context trigger a new cycle - so every turn of the loop raises the floor for the next.", highlight: true }];

  return (
    <section data-screen-label="06 - How It Works" style={{ background: "#0E1E34", padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px" }}>
        <div style={{ maxWidth: 560, marginBottom: 56 }}>
          <Eyebrow color="var(--minerva-sky)">How it works</Eyebrow>
          <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 0", color: "#fff" }}>The engine, condensed.</h2>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {pts.map(({ n, icon, accent, title, body, highlight }, i) =>
          <div key={n} style={{
            background: highlight ? "rgba(224,162,48,0.07)" : "rgba(255,255,255,0.04)",
            border: highlight ? "1px solid rgba(224,162,48,0.42)" : "1px solid rgba(255,255,255,0.10)",
            borderRadius: "var(--radius-lg)", padding: "28px 28px"
          }}>
              <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 14 }}>
                <div style={{ width: 50, height: 50, borderRadius: 12,
                background: highlight ? "rgba(224,162,48,0.14)" : "rgba(63,177,229,0.12)",
                border: `1px solid ${highlight ? "rgba(224,162,48,0.32)" : "rgba(63,177,229,0.25)"}`,
                display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={icon} size={42} color={accent} strokeWidth={1.8} />
                </div>
                <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.14em",
                color: highlight ? "rgba(224,162,48,0.85)" : "rgba(63,177,229,0.75)",
                fontFamily: "var(--wix-text)" }}>{n}</span>
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 700, color: "#EEF4FC",
              fontFamily: "var(--wix-display)", margin: 0, letterSpacing: "-0.01em" }}>{title}</h3>
            </div>
          )}
        </div>
        <div style={{ marginTop: 32, textAlign: "center" }}>
          <Btn href="visdi-method.html" variant="ghost">Full engine walkthrough <Arrow /></Btn>
        </div>
      </div>
    </section>);

}

/* ── §7 · PRODUCT LINE ──────────────────────────────────── */
function ProductsSection() {
  const prods = [
  { stage: STAGE.diagnose, name: "VISDI Know", sub: "Minerva Diagnostic", dur: "4–6 weeks", pos: "The front door.", body: "Knowledge map + AI-readiness gap report for one domain. ROI projection. Recommended build scope. A paid deliverable from day one.", href: "visdi-know.html", cta: "Start with Diagnose" },
  { stage: STAGE.connect, name: "VISDI Connect", sub: "Minerva Connect", dur: "3–6 months", pos: "The build engagement.", body: "Build the AI-ready knowledge layer for the diagnosed domain. Visualizations, structured base, governance, first AI skills.", href: "visdi-connect.html", cta: "Explore Connect" },
  { stage: STAGE.operate, name: "VISDI Operate", sub: "Minerva Operate", dur: "Ongoing · 12-mo", pos: "The recurring improvement.", body: "Maintain, govern, and expand the layer. Quarterly governance and expansion releases. Knowledge compounds - so does value.", href: "visdi-operate.html", cta: "Explore Operate" }];

  return (
    <section data-screen-label="07 - Product Line" style={{ background: "#0C1A2C", padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px" }}>
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <Eyebrow center color="var(--minerva-sky)">The Product Line</Eyebrow>
          <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px auto 16px", color: "#fff", maxWidth: 680 }}>
            Every customer enters<br />through a Diagnostic.
          </h2>
          <p style={{ fontSize: 18, color: "#C2D8EC", maxWidth: 620, margin: "0 auto", lineHeight: 1.6 }}>
            Graduates to Connect and stays through Operate - or exits cleanly, with the Diagnostic as a paid deliverable. One journey, three pillars, compounding value.
          </p>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
          {prods.map(({ stage, name, sub, dur, pos, body, href, cta }) =>
          <a key={name} href={href} style={{ display: "flex", flexDirection: "column",
            background: stage.bg, border: `1px solid ${stage.border}`,
            borderRadius: "var(--radius-lg)", overflow: "hidden", textDecoration: "none" }}>
              <div style={{ height: 3, background: stage.color }} />
              <div style={{ padding: "28px 28px 32px", flex: 1, display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
                  <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.12em",
                  color: stage.color, textTransform: "uppercase", fontFamily: "var(--wix-text)" }}>{sub}</span>
                  <span style={{ fontSize: 14, color: "rgba(231,239,250,0.50)",
                  background: "rgba(255,255,255,0.07)", padding: "3px 10px", borderRadius: 4 }}>{dur}</span>
                </div>
                <h3 style={{ fontSize: 28, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
                margin: "0 0 6px", letterSpacing: "-0.02em", display: "none" }}>{name}</h3>
                <p style={{ fontSize: 16, fontWeight: 700, color: stage.color, margin: "0 0 14px" }}>{pos}</p>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: "#C2D8EC", margin: "0 0 24px", flex: 1 }}>{body}</p>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 16,
                fontWeight: 700, color: stage.color, fontFamily: "var(--wix-text)" }}>
                  {cta} <Arrow />
                </div>
              </div>
            </a>
          )}
        </div>
        <p style={{ textAlign: "center", marginTop: 28, fontSize: 15, color: "rgba(231,239,250,0.45)" }}>
          15 years of proof beneath the claim.{" "}
          <a href="https://minervakrm.com" style={{ color: "rgba(231,239,250,0.65)",
            textDecoration: "underline", textUnderlineOffset: 3 }}>See Minerva's classic capabilities ↗</a>
        </p>
      </div>
    </section>);

}

/* ── §8 · CUSTOMER JOURNEY ──────────────────────────────── */
function JourneySection() {
  const steps = [
  { stage: STAGE.diagnose, n: "01", label: "Diagnose", product: "VISDI Know", dur: "4–6 weeks", href: "visdi-know.html", body: "Map the domain. Size the gap. Prove the ROI. The Diagnostic is a paid deliverable - value from day one, exit or continue." },
  { stage: STAGE.connect, n: "02", label: "Build", product: "VISDI Connect", dur: "3–6 months", href: "visdi-connect.html", body: "Stand up the AI-ready knowledge layer. Structured. Governed. Machine-legible. Built to survive an audit from day one." },
  { stage: STAGE.operate, n: "03", label: "Run", product: "VISDI Operate", dur: "Ongoing", href: "visdi-operate.html", body: "Govern and expand as knowledge compounds. The layer grows; the value grows. Land small, prove value, expand." }];

  return (
    <section data-screen-label="08 - Journey" style={{ background: "#0E1E34", padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px" }}>
        <div style={{ maxWidth: 640, marginBottom: 60 }}>
          <Eyebrow>The Customer Journey</Eyebrow>
          <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 18px", color: "#fff" }}>
            Every customer enters<br />through a Diagnostic.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "#C2D8EC", margin: 0 }}>
            Graduates to Connect and stays through Operate - or exits cleanly, with the Diagnostic as a paid deliverable. One journey, three pillars, compounding value.
          </p>
        </div>
        <div data-stagger style={{ display: "flex", alignItems: "stretch", gap: 0 }}>
          {steps.map(({ stage, n, label, product, dur, href, body }, i) =>
          <React.Fragment key={n}>
              {i > 0 &&
            <div style={{ display: "flex", alignItems: "center", padding: "0 2px", flexShrink: 0 }}>
                  <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                    <path d="M4 11h14M11 5l6 6-6 6" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
            }
              <a href={href} style={{ flex: 1, display: "flex", flexDirection: "column",
              background: "rgba(255,255,255,0.04)", border: `1px solid ${stage.border}`,
              borderRadius: "var(--radius-lg)", padding: "32px 28px", textDecoration: "none" }}>
                <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 22 }}>
                  <div style={{ width: 44, height: 44, borderRadius: "50%", background: stage.bg,
                  border: `1.5px solid ${stage.border}`, display: "flex", alignItems: "center",
                  justifyContent: "center", flexShrink: 0 }}>
                    <span style={{ fontSize: 15, fontWeight: 900, color: stage.color }}>{n}</span>
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: "0.10em",
                    color: stage.color, textTransform: "uppercase", fontFamily: "var(--wix-text)" }}>{label}</div>
                    <div style={{ fontSize: 14, color: "rgba(231,239,250,0.50)", marginTop: 2 }}>
                      {product} · {dur}
                    </div>
                  </div>
                </div>
                <p style={{ fontSize: 17, lineHeight: 1.65, color: "#C2D8EC", margin: "0 0 20px", flex: 1 }}>{body}</p>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 15,
                fontWeight: 700, color: stage.color }}>Learn more <Arrow /></div>
              </a>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

/* ── §9 · WHO IT'S FOR - role icons ─────────────────────── */
function WhoSection() {
  const auds = [
  { icon: "clipboard-check", color: "#E0A230", role: "Quality & Investigations",
    pain: "Investigation backlog, repeat deviations, CAPA databases nobody trusts to query, knowledge locked in retiring SMEs.",
    fear: "The next audit - and the vendor promising CAPA automation no quality engineer will sign." },
  { icon: "activity", color: "#3FB1E5", role: "Manufacturing Science and Operations",
    pain: "Tech transfers that lose the reasoning, tribal process knowledge, work instructions that can't instruct a machine.",
    fear: "Scaling AI onto a process whose logic was never written down to begin with." },
  { icon: "network", color: "#04975e", role: "Digital Transformation & Data",
    pain: "AI pilots that stall because the knowledge isn't legible to the model - and isn't legible to the auditor either.",
    fear: "Spending the AI budget and having nothing that survives a regulated inspection." }];

  return (
    <section data-screen-label="09 - Who It's For" style={{ background: "#0C1A2C", padding: "100px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px", position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 640, marginBottom: 60 }}>
          <Eyebrow>Who It's For</Eyebrow>
          <h2 data-animate style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 18px", color: "#fff" }}>
            Three buyers,<br />one shared fear.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "#C2D8EC", margin: 0 }}>Each audience has a named operational pain and a named concern of the AI being sold to them. Minerva answers both.

          </p>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
          {auds.map(({ icon, role, pain, fear, color }) =>
          <div key={role} style={{ backgroundColor: "#0C1A2C", backgroundImage: `linear-gradient(${color}0F,${color}0F)`,
            border: `1px solid ${color}3D`, borderRadius: "var(--radius-lg)", padding: "32px 28px" }}>
              <div style={{ width: 64, height: 64, borderRadius: 16,
              background: `${color}18`, border: `1px solid ${color}38`,
              display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <Icon name={icon} size={36} color={color} strokeWidth={1.6} />
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 700, color: "#EEF4FC",
              fontFamily: "var(--wix-display)", margin: "0 0 22px", letterSpacing: "-0.01em" }}>{role}</h3>
              <div style={{ marginBottom: 18 }}>
                <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.12em",
                color: color, textTransform: "uppercase", margin: "0 0 8px",
                fontFamily: "var(--wix-text)" }}>The pain</p>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: "#C2D8EC", margin: 0 }}>{pain}</p>
              </div>
              <div>
                <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.12em",
                color: color, textTransform: "uppercase", margin: "0 0 8px",
                fontFamily: "var(--wix-text)" }}>The fear</p>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: "#C2D8EC", margin: 0 }}>{fear}</p>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 32, textAlign: "center" }}>
          <Btn href="visdi-products.html" variant="ghost">Full audience breakdown <Arrow /></Btn>
        </div>
      </div>
    </section>);

}

/* ── §10 · WHY MINERVA (full — folded in from the standalone Why page) ── */
function WhySection() {
  const pillars = [
  { n: "01", title: "Built in public", color: "var(--minerva-gold)",
    body: "Minerva runs its own methodology in the open, publishing the build as founder doctrine.\n\nThe decision to apply VISDI to Minerva's own knowledge operations before selling it externally was deliberate: the company becomes its own first reference architecture.\n\nThis is non-fakeable proof. A vendor can claim their method works. A firm that runs on it - visibly, in a regulated environment, with the same audit requirements its clients face - cannot fake the evidence." },
  { n: "02", title: "Compliant by construction", color: "var(--minerva-sky)",
    body: "Minerva operates under the same GxP obligations its clients do.\n\nThe Trust gate is not a client-facing feature - it is how Minerva's own knowledge enters the Ledger. Every packet that governs how Minerva works was verified by a qualified person before it counted.\n\nThis means the compliance posture of VISDI is lived, not described. When Minerva says the output is defensible to an auditor, that statement is backed by internal practice." }];

  return (
    <section data-screen-label="10 - Why General Intelligence" style={{ background: "#0A1422", padding: "100px 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px" }}>
        <div style={{ maxWidth: 680, marginBottom: 52 }}>
          <Eyebrow>Why General Intelligence · Why Now</Eyebrow>
          <h2 data-animate style={{ fontSize: 46, fontWeight: 700, lineHeight: 1.16, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 18px", color: "#fff" }}>
            The most credible proof of a method<br />is a firm that runs on it.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "#C8DAEC", margin: 0, maxWidth: 640 }}>
            Minerva doesn't only advise clients on regulated AI - it applies the same methodology to its own operations, in the same regulatory environment.
          </p>
        </div>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, marginBottom: 28 }}>
          {pillars.map(({ n, title, color, body }) =>
          <div key={n} style={{ background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: "44px 40px" }}>
              <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.12em",
              color: `${color}`, opacity: 0.60, fontFamily: "var(--wix-text)" }}>{n}</span>
              <h3 style={{ fontSize: 28, fontWeight: 800, color: "#EEF4FC",
              fontFamily: "var(--wix-display)", margin: "14px 0 20px", letterSpacing: "-0.02em" }}>{title}</h3>
              {body.split("\n\n").map((p, i, arr) =>
            <p key={i} style={{ fontSize: 17, lineHeight: 1.72, color: "#C2D8EC",
              margin: i < arr.length - 1 ? "0 0 16px" : 0 }}>{p}</p>
            )}
            </div>
          )}
        </div>

        {/* Capability bridge — 15 years of proof */}
        <div style={{ background: "rgba(63,177,229,0.05)", border: "1px solid rgba(63,177,229,0.18)",
          borderRadius: "var(--radius-lg)", padding: "36px 40px", display: "grid",
          gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center" }}>
          <div>
            <p style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase",
              color: "rgba(63,177,229,0.55)", margin: "0 0 12px", fontFamily: "var(--wix-text)" }}>15 years of proof</p>
            <p style={{ fontSize: 18, lineHeight: 1.68, color: "#D2E3F2", margin: 0 }}>
              Minerva has been operating in GxP environments since 2009. Quality Systems, Investigations, Risk Management, Digitalization, Visualizations - the seven capabilities that VISDI reorganizes are not new. The method that makes them AI-ready is.
            </p>
          </div>
          <Btn href="https://minervakrm.com" variant="ghost" xstyle={{ whiteSpace: "nowrap" }}>
            Classic capabilities ↗
          </Btn>
        </div>
      </div>
    </section>);

}

/* ── §11 · CLOSING ──────────────────────────────────────── */
function ClosingSection() {
  return (
    <section data-screen-label="11 - Closing" style={{
      background: "linear-gradient(180deg,#0C1A2C 0%,#0F2040 100%)",
      padding: "120px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: "50%", left: "50%",
        transform: "translate(-50%,-50%)", opacity: 0.05, pointerEvents: "none" }}>
        <WheelMark width={900} />
      </div>
      <div style={{ maxWidth: 860, margin: "0 auto", padding: "0 80px",
        textAlign: "center", position: "relative" }}>
        <p style={{ fontSize: 15, fontWeight: 700, letterSpacing: "0.18em",
          color: "rgba(224,162,48,0.70)", textTransform: "uppercase", marginBottom: 28,
          fontFamily: "var(--wix-text)" }}>The Through-line</p>
        <h2 data-animate style={{ fontSize: 44, fontWeight: 700, lineHeight: 1.26, letterSpacing: "-0.015em",
          fontFamily: "var(--baroque-display)", color: "#fff", margin: "0 0 26px" }}>Structure the input, and the same machine that instructs humans, AI agents, and robots builds the auditable knowledge layer.

        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.8, color: "#C2D8EC", margin: "0 0 52px" }}>
          Capture how people work · infer the packet · verify at the gate · let packets compound · project on demand.
        </p>
        <div style={{ display: "flex", justifyContent: "center", gap: 16 }}>
          <Btn href="/knowledge-governance/Start%20Diagnostic.html" accent="var(--minerva-gold)" textColor="#0A1426"
          shadow="0 8px 32px rgba(224,162,48,0.28)" xstyle={{ fontSize: 18, padding: "14px 28px" }}>
            Start a Diagnostic <Arrow />
          </Btn>
        </div>
        <div style={{ marginTop: 52, display: "flex", alignItems: "center",
          justifyContent: "center", gap: 18 }}>
          <span style={{ width: 44, height: 2, background: "var(--minerva-gold)" }} />
          <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: "0.28em",
            color: "var(--minerva-gold)", fontFamily: "var(--wix-text)" }}>
            FASTER&nbsp;&nbsp;SMARTER&nbsp;&nbsp;BETTER
          </span>
          <span style={{ width: 44, height: 2, background: "var(--minerva-gold)" }} />
        </div>
      </div>
    </section>);

}

/* ── Root homepage ──────────────────────────────────────── */
function VISDIHomepage() {
  return (
    <div>
      <NavBar page="home" />
      <HeroSection />
      <MarketMomentSection />
      <PositioningSection />
      <VocabSection />
      <WhySection />
      <ClosingSection />
      <SiteFooter />
    </div>);

}

Object.assign(window, { VISDIHomepage });