// Goldridge landing — editorial refinement of the existing site.
// Keeps Spline 3D centerpiece, Playfair + Helvetica pairing, parchment/onyx palette.
// Exposes: window.Goldridge

const { useState, useEffect, useRef, useMemo } = React;

// ---------- Design tokens (type + spacing scale) ----------
const T = {
  // Type scale — tight, modern, fewer sizes
  h1:     "clamp(2.6rem, 5.6vw, 5.6rem)",   // hero only
  h2:     "clamp(1.75rem, 2.6vw, 2.6rem)",  // section titles
  h3:     "1.25rem",                         // card titles
  lede:   "clamp(1rem, 1.2vw, 1.15rem)",    // subheads
  body:   "0.95rem",
  small:  "0.85rem",
  eyebrow:"10px",
  // Spacing
  sectionGap: 44,
  stackGap:   24,
  cardPad:    "28px",
  heroPad:    "clamp(28px, 3vw, 44px)",
};

// ---------- Palettes ----------
const PALETTES = {
  parchment: {
    name: "Parchment",
    bg:       "#f2ede3",
    surface:  "rgba(255,252,246,0.82)",
    surface2: "rgba(255,254,250,0.82)",
    ink:      "#16110d",
    ink2:     "#2a2017",
    body:     "#3b3025",
    muted:    "#6d5a41",
    muted2:   "#826a47",
    rule:     "rgba(184,155,106,0.5)",
    border:   "rgba(188,165,124,0.35)",
    gold:     "#9e7d3f",
    accent:   "#2a5f63",
    accent2:  "#7a9ea2",
    darkBg:   "#0f0c09",
    darkInk:  "#efe6d7",
    darkMute: "#bfa67b",
    radial:   "radial-gradient(circle at top left, rgba(194,167,102,0.22), transparent 34%), radial-gradient(circle at 78% 24%, rgba(33,55,44,0.2), transparent 28%), linear-gradient(180deg, rgba(255,255,255,0.54), rgba(235,228,214,0.9))",
  },
  bone: {
    name: "Bone",
    bg:       "#f3eee4",
    surface:  "rgba(255,253,248,0.82)",
    surface2: "rgba(255,255,253,0.82)",
    ink:      "#1a1612",
    ink2:     "#2e271f",
    body:     "#453a2c",
    muted:    "#7a6a52",
    muted2:   "#8e7b5e",
    rule:     "rgba(166,144,108,0.45)",
    border:   "rgba(172,152,120,0.3)",
    gold:     "#b69b63",
    darkBg:   "#14110c",
    darkInk:  "#f5ecdc",
    darkMute: "#c9b48a",
    radial:   "radial-gradient(circle at top left, rgba(200,175,118,0.18), transparent 38%), radial-gradient(circle at 76% 26%, rgba(60,72,58,0.14), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.6), rgba(243,238,228,0.92))",
  },
  coolstone: {
    name: "Cool Stone",
    bg:       "#e4e6e3",
    surface:  "rgba(248,249,246,0.78)",
    surface2: "rgba(252,253,250,0.78)",
    ink:      "#12161a",
    ink2:     "#1f262b",
    body:     "#313a40",
    muted:    "#556068",
    muted2:   "#6a7580",
    rule:     "rgba(110,125,138,0.45)",
    border:   "rgba(130,145,158,0.3)",
    gold:     "#7a8a94",
    darkBg:   "#0b0e11",
    darkInk:  "#e6ecf0",
    darkMute: "#9aa7b0",
    radial:   "radial-gradient(circle at top left, rgba(150,172,188,0.22), transparent 34%), radial-gradient(circle at 78% 24%, rgba(80,100,110,0.18), transparent 28%), linear-gradient(180deg, rgba(255,255,255,0.5), rgba(228,230,227,0.92))",
  },
  onyx: {
    name: "Onyx",
    bg:       "#14110c",
    surface:  "rgba(32,26,18,0.72)",
    surface2: "rgba(42,34,24,0.7)",
    ink:      "#f4ecdf",
    ink2:     "#e6dcc9",
    body:     "#cdbea0",
    muted:    "#bfa67b",
    muted2:   "#a38e60",
    rule:     "rgba(158,125,63,0.45)",
    border:   "rgba(158,125,63,0.3)",
    gold:     "#caa462",
    darkBg:   "#0a0806",
    darkInk:  "#f4ecdf",
    darkMute: "#caa462",
    radial:   "radial-gradient(circle at top left, rgba(202,164,98,0.18), transparent 36%), radial-gradient(circle at 78% 24%, rgba(40,60,52,0.22), transparent 30%), linear-gradient(180deg, rgba(30,22,14,0.6), rgba(20,17,12,0.96))",
  },
};

const LAYOUTS = {
  split:    { name: "Split",    label: "Asymmetric split (editorial)" },
  stacked:  { name: "Stacked",  label: "Stacked (centered, vertical)" },
  offaxis:  { name: "Off-axis", label: "3D off-axis backdrop" },
};

const ROLES = {
  center:     "Center stage (right panel)",
  background: "Background (full-bleed)",
  corner:     "Corner vignette (small)",
};

// ---------- Spline loader ----------
function SplineCanvas({ scene, className, style }) {
  const ref = useRef(null);
  const [loaded, setLoaded] = useState(false);
  const [err, setErr] = useState(null);

  useEffect(() => {
    let disposed = false;
    let app = null;

    (async () => {
      try {
        // Hide dynamic import from Babel transpilation using Function constructor
        const dynamicImport = new Function("u", "return import(u)");
        const mod = await dynamicImport("https://unpkg.com/@splinetool/runtime@1.9.28/build/runtime.js");
        if (disposed) return;
        const { Application } = mod;
        const canvas = ref.current;
        // Cap device pixel ratio to reduce GPU load on high-DPI screens
        try {
          const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
          const w = canvas.clientWidth || 600;
          const h = canvas.clientHeight || 600;
          canvas.width = Math.floor(w * dpr);
          canvas.height = Math.floor(h * dpr);
        } catch (_) {}
        app = new Application(canvas);
        await app.load(scene);
        if (!disposed) setLoaded(true);
      } catch (e) {
        console.warn("[spline] failed", e);
        if (!disposed) setErr(e?.message || "failed");
      }
    })();

    return () => {
      disposed = true;
      try { app && app.dispose && app.dispose(); } catch (_) {}
    };
  }, [scene]);

  return (
    <div className={className} style={{ position: "relative", width: "100%", height: "100%", ...style }}>
      <canvas ref={ref} style={{ display: "block", width: "100%", height: "100%", outline: "none" }} />
      {!loaded && !err && (
        <div style={{
          position: "absolute", inset: 0, display: "grid", placeItems: "center",
          fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace)",
          fontSize: 10, letterSpacing: "0.35em", textTransform: "uppercase",
          color: "rgba(212,193,161,0.55)"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span className="gr-loader" />
            loading scene
          </div>
        </div>
      )}
      {err && (
        <div style={{
          position: "absolute", inset: 0, display: "grid", placeItems: "center",
          fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
          fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase",
          color: "rgba(212,193,161,0.5)", textAlign: "center", padding: 24
        }}>
          scene unavailable — placeholder
        </div>
      )}
    </div>
  );
}

// ---------- Content (from the repo, unchanged) ----------
const PRINCIPLES = [
  "Performance-first",
  "Signal before sentiment",
  "Long-horizon discipline",
  "Calm under volatility",
];

const SYSTEM_NOTES = [
  {
    label: "Research posture",
    title: "Built like a private capital intelligence studio.",
    body: "We present with restraint: selective inputs, measured outputs, and a visual language closer to a rare publication than a trading dashboard or enterprise AI demo.",
  },
  {
    label: "Operating system",
    title: "One modelling stack. Two products.",
    body: "Our AI agents and trading desk run on shared infrastructure — the same features, risk engine, and evaluation loop. Capital informs the agents; the agents sharpen capital.",
  },
  {
    label: "Institutional attitude",
    title: "Confidence without theatre.",
    body: "No loud charts, no demo videos, no growth-hack tropes. Intelligence, systems thinking, and capital gravity conveyed through composition alone.",
  },
];

const ATMOSPHERE = [
  {
    eyebrow: "Signal",
    heading: "Measured, not noisy — in capital and in code.",
    text: "Both the trading desk and the AI agents are built to act rarely and act well. Fewer positions, fewer tokens, higher conviction.",
  },
  {
    eyebrow: "Presence",
    heading: "A machine-age object at the center of the firm.",
    text: "The 3D form is a symbol, not a product visual. It gives Goldridge memory and signals that the firm is engineered — across trading and AI alike.",
  },
  {
    eyebrow: "Tone",
    heading: "Technological edge with luxury restraint.",
    text: "Goldridge reads as a firm that values process, discretion, and endurance — whether the output is a return stream or an agent's action.",
  },
];

const STRATEGIES = [
  {
    tier: "I",
    name: "Accessible solutions",
    scale: "Retail · Any capital size",
    body: "The entry surface into Goldridge's financial stack. Curated exposure to our systematic strategies with transparent execution — same signals, smaller size.",
  },
  {
    tier: "II",
    name: "Managed systematic portfolios",
    scale: "Private · Qualified capital",
    body: "Discretionary overlays on top of systematic models. Sized for family offices and founders seeking calm, compounded exposure.",
  },
  {
    tier: "III",
    name: "Institutional mandates",
    scale: "Institutional · Allocator-grade",
    body: "Full-stack deployment across multi-strategy books, including bespoke AI agent integrations for allocator workflows.",
  },
];

const ACCESS_TIERS = [
  { band: "Entry",         range: "From USD 1,000",      note: "Accessible solutions" },
  { band: "Private",       range: "From USD 250,000",    note: "Managed portfolio" },
  { band: "Institutional", range: "From USD 10M",        note: "Mandates + AI agents" },
];

const DIVISIONS = [
  {
    num: "01",
    name: "Algorithmic Trading",
    tag: "Core specialty",
    body: "Systematic strategies across FX, indices, and crypto. From accessible financial solutions to $100M+ institutional mandates — same models, different surfaces.",
  },
  {
    num: "02",
    name: "AI Agents",
    tag: "Product",
    body: "Proprietary AI agents for research, execution, and enterprise workflows. Built on the same modelling stack that powers our trading desk — now productised for partners and clients.",
  },
  {
    num: "03",
    name: "Ventures",
    tag: "Principal",
    body: "Selective investment into early-stage systems, AI infrastructure, and quant talent. Long-horizon positions, taken once, held through cycles.",
  },
  {
    num: "04",
    name: "Research",
    tag: "Intelligence",
    body: "Internal studio producing private memos, regime notes, and model research. Circulated to partners, never published as marketing.",
  },
];

// ---------- Main component ----------
function Goldridge({ palette = "parchment", layout = "split", role = "center", cursor = true, showTweaks = false, onTweak } = {}) {
  const P = PALETTES[palette] || PALETTES.parchment;
  const heroRef = useRef(null);
  const [mouse, setMouse] = useState(null);
  const rafRef = useRef(null);

  const onMove = (e) => {
    if (!cursor) return;
    const r = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - r.left;
    const y = e.clientY - r.top;
    if (rafRef.current) return;
    rafRef.current = requestAnimationFrame(() => {
      setMouse({ x, y });
      rafRef.current = null;
    });
  };

  const wrapStyle = {
    position: "relative",
    overflow: "hidden",
    background: P.bg,
    color: P.ink,
    "--gr-ink": P.ink,
    "--gr-body": P.body,
    "--gr-muted": P.muted,
    "--gr-border": P.border,
    "--gr-gold": P.gold,
  };

  // Roles control how Spline is integrated
  const splineBlock = (
    <SceneFrame P={P} role={role}>
      <SplineCanvas
        scene="./scene.splinecode"
        style={{
          transform: role === "background" ? "scale(1.15)" : "scale(1.08)",
          transformOrigin: "center",
        }}
      />
    </SceneFrame>
  );

  return (
    <div style={wrapStyle} onMouseMove={onMove} data-screen-label="Goldridge Landing">
      {/* atmospheric wash */}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none", background: P.radial }} />
      <div style={{ position: "absolute", left: 0, right: 0, top: 0, height: 1, pointerEvents: "none",
        background: `linear-gradient(to right, transparent, ${P.gold}, transparent)` }} />

      {/* Background role: render scene behind everything */}
      {role === "background" && (
        <div style={{ position: "absolute", inset: 0, zIndex: 0, opacity: 0.55, filter: "saturate(0.9)" }}>
          {splineBlock}
          <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, ${P.bg}80, ${P.bg}ee)` }} />
        </div>
      )}

      <Header P={P} />

      <main style={{
        position: "relative", zIndex: 10, margin: "0 auto", width: "100%", maxWidth: 1600,
        padding: "0 clamp(16px, 3vw, 40px) clamp(24px, 4vw, 44px)",
      }}>
        <Hero
          P={P}
          layout={layout}
          role={role}
          splineBlock={splineBlock}
          mouse={cursor ? mouse : null}
          heroRef={heroRef}
        />

        <ScanDivider P={P} />

        <div id="divisions"><DivisionsSection P={P} /></div>

        <TonalBand P={P} tone="kraft">
          <PrinciplesBand P={P} />
        </TonalBand>

        <div id="ai-agents"><AITechnology P={P} /></div>

        <ScanDivider P={P} />

        <BrandPostureRow P={P} />

        <div id="trading"><StrategiesSection P={P} /></div>

        <TonalBand P={P} tone="kraft" pad="clamp(72px, 9vw, 120px)">
          <PullQuote P={P} />
        </TonalBand>

        <AccessPerformance P={P} />

        <OperatingNotes P={P} />

        <div id="access"><CTABlock P={P} /></div>

        <Footer P={P} />
      </main>

      {showTweaks && (
        <TweaksPanel P={P} palette={palette} layout={layout} role={role} cursor={cursor} onTweak={onTweak} />
      )}

      <style>{`
        .gr-loader {
          width: 10px; height: 10px; border-radius: 50%;
          border: 1.5px solid ${P.gold}44;
          border-top-color: ${P.gold};
          animation: gr-spin 1s linear infinite;
          display: inline-block;
        }
        @keyframes gr-spin { to { transform: rotate(360deg); } }
        .gr-grid {
          background-size: 40px 40px;
          background-image:
            linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
          animation: gr-grid-move 8s linear infinite;
        }
        @keyframes gr-grid-move { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }

        /* Scan dividers & dark band hairlines */
        .gr-scan-travel {
          animation: gr-scan-travel 7s linear infinite;
        }
        @keyframes gr-scan-travel {
          0%   { transform: translateX(-20%); opacity: 0; }
          10%  { opacity: 1; }
          90%  { opacity: 1; }
          100% { transform: translateX(560%); opacity: 0; }
        }
        .gr-scan-top, .gr-scan-bot {
          background-size: 200% 100%;
          animation: gr-scan-shimmer 12s linear infinite;
        }
        .gr-scan-bot { animation-delay: -6s; }
        @keyframes gr-scan-shimmer {
          0%   { background-position: -100% 0; }
          100% { background-position: 100% 0; }
        }

        @media (max-width: 900px) {
          .gr-hero-meta { grid-template-columns: 1fr !important; }
        }

        @media (prefers-reduced-motion: reduce) {
          .gr-grid, .gr-pulse, .gr-scan-travel, .gr-scan-top, .gr-scan-bot { animation: none !important; }
        }
        .gr-btn-primary:hover { transform: translateY(-1px); }
        .gr-link:hover { color: var(--gr-ink); }
        .gr-posture-card:hover {
          transform: translateY(-2px);
          border-color: ${P.gold} !important;
          background: ${P.surface2} !important;
        }
      `}</style>
    </div>
  );
}

// ---------- Header ----------
function Header({ P }) {
  const cell = {
    fontSize: 10, letterSpacing: "0.35em", textTransform: "uppercase",
    color: P.muted, fontFamily: "Helvetica Neue, Arial, sans-serif",
  };
  const navItem = { ...cell, cursor: "pointer", transition: "color 200ms" };
  const navItems = ["Divisions", "AI Agents", "Trading", "Access"];
  const navTargets = { "Divisions": "divisions", "AI Agents": "ai-agents", "Trading": "trading", "Access": "access" };
  const scrollToId = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <header style={{
      position: "relative", zIndex: 30, margin: "0 auto", width: "100%", maxWidth: 1600,
      display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 32,
      padding: "clamp(12px,2vw,20px) clamp(20px,3vw,40px)",
    }}>
      <div style={{ ...cell, display: "flex", alignItems: "center", gap: 10, color: P.ink }}>
        <GoldridgeMark P={P} />
        <span>Goldridge</span>
      </div>
      <nav style={{ display: "flex", justifyContent: "center", gap: 32 }} className="gr-nav">
        {navItems.map((n) => (
          <a key={n} style={navItem} href={"#" + navTargets[n]} onClick={(e) => { e.preventDefault(); scrollToId(navTargets[n]); }} onMouseEnter={(e) => e.target.style.color = P.ink} onMouseLeave={(e) => e.target.style.color = P.muted}>{n}</a>
        ))}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <span style={{ ...cell, display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "#58a37a" }} className="gr-pulse" />
          <span style={{ fontFamily: "ui-monospace, Consolas, monospace", letterSpacing: "0.1em", fontSize: 10 }}>LIVE</span>
        </span>
        <button onClick={() => scrollToId("access")} style={{
          ...cell, color: P.ink,
          background: "none", border: `1px solid ${P.border}`,
          borderRadius: 999, padding: "8px 14px", cursor: "pointer",
        }}>Request access</button>
      </div>
      <style>{`
        @media (max-width: 860px) { .gr-nav { display: none !important; } }
      `}</style>
    </header>
  );
}

function GoldridgeMark({ P }) {
  return (
    <img
      src="goldridge-mark.png"
      alt="Goldridge Technology"
      width="32"
      height="27"
      style={{ height: 28, width: "auto", display: "block", objectFit: "contain" }}
    />
  );
}

// ---------- Signal ticker (live algorithmic feed feel) ----------
function SignalTicker({ P }) {
  const signals = [
    { pair: "USD/JPY",  sig: "LONG",  conf: "94.2" },
    { pair: "HSI",      sig: "HEDGE", conf: "88.7" },
    { pair: "NDX",      sig: "LONG",  conf: "91.4" },
    { pair: "SPX",      sig: "FLAT",  conf: "82.1" },
    { pair: "EUR/USD",  sig: "SHORT", conf: "89.6" },
    { pair: "XAU",      sig: "LONG",  conf: "93.8" },
    { pair: "BTC",      sig: "HEDGE", conf: "87.2" },
  ];
  const row = [...signals, ...signals];
  return (
    <div style={{
      border: `1px solid ${P.border}`, borderRadius: 18,
      background: P.surface2, overflow: "hidden",
    }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "10px 16px", borderBottom: `1px solid ${P.border}`,
        fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: P.muted,
      }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "#58a37a", boxShadow: "0 0 8px #58a37a" }} className="gr-pulse" />
          Live signals
        </span>
        <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace" }}>v4.2 · 14:32 HKT</span>
      </div>
      <div style={{ padding: "12px 0", overflow: "hidden", position: "relative" }}>
        <div style={{ display: "flex", gap: 32, animation: "gr-ticker 28s linear infinite", whiteSpace: "nowrap", paddingLeft: 16 }}>
          {row.map((s, i) => (
            <div key={i} style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
              fontSize: 12, color: P.ink2,
            }}>
              <span style={{ color: P.muted, fontSize: 10, letterSpacing: "0.2em" }}>{s.pair}</span>
              <span style={{
                padding: "2px 8px", borderRadius: 4, fontSize: 10, letterSpacing: "0.14em",
                color: s.sig === "LONG" ? "#3f7d56" : s.sig === "SHORT" ? "#a84536" : P.muted,
                background: s.sig === "LONG" ? "rgba(88,163,122,0.14)" : s.sig === "SHORT" ? "rgba(168,69,54,0.12)" : P.surface,
                border: `1px solid ${P.border}`,
              }}>{s.sig}</span>
              <span style={{ color: P.muted2 }}>{s.conf}%</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes gr-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes gr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
        .gr-pulse { animation: gr-pulse 1.6s ease-in-out infinite; }
      `}</style>
    </div>
  );
}

// ---------- Firm snapshot mini-panel (sits next to SignalTicker in hero) ----------
function LiveMetrics({ P }) {
  const stats = [
    { label: "Live models",    value: "14",    sub: "7 prod · 7 shadow" },
    { label: "Sharpe (TTM)",   value: "2.31",  sub: "since 2024" },
    { label: "Markets",        value: "HK·SG·TYO", sub: "Asia book" },
    { label: "Research cadence", value: "Weekly", sub: "signal review" },
  ];
  return (
    <div style={{
      border: `1px solid ${P.border}`, borderRadius: 18,
      background: P.surface2, overflow: "hidden",
      display: "flex", flexDirection: "column",
    }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "10px 16px", borderBottom: `1px solid ${P.border}`,
        fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: P.muted,
      }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: P.gold }} />
          Firm snapshot
        </span>
        <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace" }}>Q2 · 2026</span>
      </div>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        flex: 1,
      }}>
        {stats.map((s, i) => (
          <div key={s.label} style={{
            padding: "14px 16px",
            borderRight: i % 2 === 0 ? `1px solid ${P.border}` : "none",
            borderBottom: i < 2 ? `1px solid ${P.border}` : "none",
            display: "flex", flexDirection: "column", gap: 4, minWidth: 0,
          }}>
            <span style={{
              fontSize: 9, letterSpacing: "0.28em", textTransform: "uppercase", color: P.muted,
            }}>{s.label}</span>
            <span style={{
              fontFamily: `"Playfair Display", serif`, fontWeight: 500,
              fontSize: "1.5rem", lineHeight: 1, color: P.ink, letterSpacing: "-0.01em",
              whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
            }}>{s.value}</span>
            <span style={{
              fontSize: 10, color: P.muted2 || P.muted, fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
            }}>{s.sub}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- AI Technology section (animated flow diagram) ----------
function AITechnology({ P }) {
  const accent = P.accent || "#2a5f63";
  return (
    <section style={{ marginTop: T.sectionGap }}>
      <SectionHeader P={P} eyebrow="Technology" index="§ 03" />
      <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 40, alignItems: "end" }} className="gr-ai-head">
        <h2 style={{
          fontFamily: `"Playfair Display", serif`, fontWeight: 500,
          fontSize: T.h2, lineHeight: 1.02, letterSpacing: "-0.025em",
          color: P.ink, margin: 0,
        }}>
          Two products, <em style={{ color: accent, fontWeight: 400 }}>one signal loop.</em>
        </h2>
        <p style={{ color: P.body, lineHeight: 1.65, fontSize: T.body, maxWidth: 420, margin: 0 }}>
          Market data, research, and execution flow through the same loop that trains our agents and shapes our capital.
        </p>
      </div>

      <div style={{
        marginTop: 28,
        borderRadius: 22,
        border: `1px solid ${P.border}`,
        background: `radial-gradient(circle at 30% 40%, ${P.gold}11, transparent 50%), radial-gradient(circle at 80% 60%, ${accent}18, transparent 55%), ${P.surface}`,
        padding: "32px clamp(20px, 3vw, 44px)",
        position: "relative", overflow: "hidden",
      }}>
        <svg viewBox="0 0 1200 360" style={{ width: "100%", height: "auto", display: "block" }} aria-hidden>
          <defs>
            <linearGradient id="gr-flow" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor={P.gold} stopOpacity="0" />
              <stop offset="50%" stopColor={P.gold} stopOpacity="0.9" />
              <stop offset="100%" stopColor={P.gold} stopOpacity="0" />
            </linearGradient>
            <linearGradient id="gr-flow2" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor={accent} stopOpacity="0" />
              <stop offset="50%" stopColor={accent} stopOpacity="0.8" />
              <stop offset="100%" stopColor={accent} stopOpacity="0" />
            </linearGradient>
            <radialGradient id="gr-core2" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor={P.gold} stopOpacity="0.35" />
              <stop offset="100%" stopColor={P.gold} stopOpacity="0" />
            </radialGradient>
          </defs>

          {/* background grid */}
          <g stroke={P.rule} strokeOpacity="0.3" strokeWidth="0.5">
            {[60, 120, 180, 240, 300].map((y) => <line key={y} x1="40" x2="1160" y1={y} y2={y} strokeDasharray="2 6" />)}
          </g>

          {/* INPUTS (left stack) */}
          <g fontFamily="Helvetica Neue, Arial" fontSize="11" fill={P.muted}>
            <text x="40" y="40" letterSpacing="3">INPUTS</text>
          </g>
          {[
            { y: 80,  label: "Market microstructure", sub: "Tick · Cross-asset" },
            { y: 140, label: "Alt data", sub: "Flows · Positioning" },
            { y: 200, label: "Research corpus", sub: "Internal memos" },
            { y: 260, label: "Client intents", sub: "Agent calls" },
          ].map((n) => (
            <g key={n.label}>
              <rect x="40" y={n.y} width="200" height="40" rx="4" fill={P.surface2} stroke={P.border} />
              <circle cx="58" cy={n.y + 20} r="3" fill={P.gold} />
              <text x="70" y={n.y + 18} fontFamily="Playfair Display, serif" fontSize="13" fill={P.ink}>{n.label}</text>
              <text x="70" y={n.y + 32} fontFamily="ui-monospace, Consolas, monospace" fontSize="9" fill={P.muted} letterSpacing="1">{n.sub}</text>
            </g>
          ))}

          {/* CORE (middle) */}
          <circle cx="600" cy="180" r="130" fill="url(#gr-core2)" />
          <circle cx="600" cy="180" r="82" fill="none" stroke={P.gold} strokeOpacity="0.5" strokeDasharray="3 5">
            <animateTransform attributeName="transform" type="rotate" from="0 600 180" to="360 600 180" dur="60s" repeatCount="indefinite" />
          </circle>
          <circle cx="600" cy="180" r="58" fill={P.darkBg} />
          <text x="600" y="175" textAnchor="middle" fontFamily="Playfair Display, serif" fontStyle="italic" fontSize="16" fill={P.darkInk}>Modelling</text>
          <text x="600" y="192" textAnchor="middle" fontFamily="Playfair Display, serif" fontStyle="italic" fontSize="16" fill={P.gold}>core</text>

          {/* orbit dots */}
          {[0, 72, 144, 216, 288].map((a, i) => {
            const rad = (a * Math.PI) / 180;
            return <circle key={i} cx={600 + Math.cos(rad) * 82} cy={180 + Math.sin(rad) * 82} r="3" fill={P.gold} />;
          })}

          {/* flow connectors input→core */}
          <g stroke={P.gold} strokeOpacity="0.35" strokeWidth="1" fill="none">
            <path d="M 240 100 Q 420 100 520 160" />
            <path d="M 240 160 Q 420 160 520 180" />
            <path d="M 240 220 Q 420 220 520 200" />
            <path d="M 240 280 Q 420 280 520 220" />
          </g>

          {/* animated traveling dots on inputs */}
          {[100, 160, 220, 280].map((y, i) => (
            <circle key={i} r="2.5" fill={P.gold}>
              <animateMotion dur={`${3 + i * 0.7}s`} repeatCount="indefinite" path={
                y === 100 ? "M 240 100 Q 420 100 520 160" :
                y === 160 ? "M 240 160 Q 420 160 520 180" :
                y === 220 ? "M 240 220 Q 420 220 520 200" :
                            "M 240 280 Q 420 280 520 220"
              } />
            </circle>
          ))}

          {/* OUTPUTS (right stack) */}
          <g fontFamily="Helvetica Neue, Arial" fontSize="11" fill={P.muted}>
            <text x="1160" y="40" letterSpacing="3" textAnchor="end">OUTPUTS</text>
          </g>
          {[
            { y: 90,  label: "AI Agents", sub: "<8ms decisions", hue: accent },
            { y: 170, label: "Trading desk", sub: "24/7 execution", hue: P.gold },
            { y: 250, label: "Research memos", sub: "Private briefings", hue: accent },
          ].map((n) => (
            <g key={n.label}>
              <rect x="960" y={n.y} width="200" height="44" rx="4" fill={P.surface2} stroke={n.hue} strokeOpacity="0.6" />
              <rect x="960" y={n.y} width="3" height="44" fill={n.hue} />
              <text x="976" y={n.y + 20} fontFamily="Playfair Display, serif" fontSize="14" fill={P.ink}>{n.label}</text>
              <text x="976" y={n.y + 34} fontFamily="ui-monospace, Consolas, monospace" fontSize="9" fill={P.muted} letterSpacing="1">{n.sub}</text>
            </g>
          ))}

          {/* flow connectors core→output */}
          <g stroke={accent} strokeOpacity="0.4" strokeWidth="1" fill="none">
            <path d="M 680 160 Q 820 120 960 112" />
            <path d="M 680 180 Q 820 180 960 192" />
            <path d="M 680 200 Q 820 240 960 272" />
          </g>
          {[0, 1, 2].map((i) => {
            const paths = [
              "M 680 160 Q 820 120 960 112",
              "M 680 180 Q 820 180 960 192",
              "M 680 200 Q 820 240 960 272",
            ];
            return (
              <circle key={i} r="2.5" fill={i === 1 ? P.gold : accent}>
                <animateMotion dur={`${2.8 + i * 0.6}s`} repeatCount="indefinite" path={paths[i]} />
              </circle>
            );
          })}

          {/* feedback loop */}
          <path d="M 960 300 Q 600 340 240 300" stroke={P.gold} strokeOpacity="0.25" strokeDasharray="2 4" fill="none" />
          <text x="600" y="335" textAnchor="middle" fontFamily="ui-monospace, Consolas, monospace" fontSize="9" fill={P.muted} letterSpacing="3">FEEDBACK · EVALUATION · RETRAIN</text>
        </svg>

        {/* Stats strip below diagram */}
        <div style={{
          marginTop: 24, paddingTop: 20, borderTop: `1px solid ${P.rule}`,
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16,
        }} className="gr-tech-stats">
          {[
            { stat: "2,400+", label: "Features per decision" },
            { stat: "<8ms",   label: "Median agent latency" },
            { stat: "24/7",   label: "Continuous evaluation" },
            { stat: "Shared", label: "Core across products" },
          ].map((s) => (
            <div key={s.label}>
              <div style={{ fontFamily: `"Playfair Display", serif`, fontWeight: 500, fontSize: "1.6rem", lineHeight: 1, color: P.ink }}>{s.stat}</div>
              <div style={{ marginTop: 6, fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: P.muted }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .gr-ai-head { grid-template-columns: 1fr !important; gap: 16px !important; }
          .gr-tech-stats { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- Scene frame ----------
function SceneFrame({ P, role, children }) {
  const isCorner = role === "corner";
  const isBg = role === "background";
  return (
    <div style={{
      position: "relative", overflow: "hidden",
      borderRadius: isBg ? 0 : isCorner ? 18 : 44,
      border: isBg ? "none" : `1px solid ${P.border}`,
      background: "#0f0c09",
      boxShadow: isBg ? "none" : "0 40px 120px rgba(29,21,12,0.32)",
      height: "100%", width: "100%",
    }}>
      <div style={{ position: "absolute", inset: 0, background:
        "radial-gradient(circle at 22% 18%, rgba(218,183,106,0.2), transparent 22%), radial-gradient(circle at 72% 26%, rgba(88,124,99,0.16), transparent 28%), linear-gradient(180deg, rgba(255,255,255,0.04), transparent 26%)"
      }} />
      <div className="gr-grid" style={{ position: "absolute", inset: 0, opacity: 0.18, animationDuration: "20s" }} />
      {!isCorner && !isBg && (
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 20,
          display: "flex", alignItems: "flex-end", justifyContent: "space-between",
          padding: "0 28px 24px",
          fontSize: 10, letterSpacing: "0.34em", textTransform: "uppercase",
          color: "rgba(212,193,161,0.7)", fontFamily: "Helvetica Neue, Arial, sans-serif",
        }}>
          <span>Machine-age object</span>
          <span>· 01</span>
        </div>
      )}
      <div style={{ position: "relative", zIndex: 10, width: "100%", height: "100%" }}>
        {children}
      </div>
      {!isBg && (
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 100, pointerEvents: "none",
          background: "linear-gradient(to top, #0f0c09, rgba(15,12,9,0.55), transparent)" }} />
      )}
    </div>
  );
}

// ---------- Hero (v2: simplified, 3 moves only) ----------
function Hero({ P, layout, role, splineBlock, mouse, heroRef }) {
  const eyebrow = { display: "flex", alignItems: "center", gap: 12, fontSize: 11, letterSpacing: "0.34em", textTransform: "uppercase", color: P.muted };
  const rule = { height: 1, width: 48, background: P.gold };

  const copy = (
    <div style={{ position: "relative", display: "flex", flexDirection: "column", height: "100%" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>

        <h1 style={{
          maxWidth: "100%",
          fontFamily: `"Playfair Display", "EB Garamond", Georgia, serif`,
          fontWeight: 500,
          fontSize: T.h1,
          lineHeight: 0.94, letterSpacing: "-0.035em",
          color: P.ink, margin: "0", textWrap: "balance",
        }}>
          A diversified firm<br/><em style={{ color: P.gold, fontWeight: 400 }}>building AI agents</em> and algorithmic trading.
        </h1>

        <p style={{
          marginTop: 22, maxWidth: 540,
          fontSize: T.lede, fontWeight: 400, lineHeight: 1.55,
          color: P.ink2, textWrap: "pretty",
        }}>
          Goldridge is a multi-arm capital and technology firm. We build proprietary
          AI agents and run institutional-grade algorithmic strategies — the same
          modelling stack, deployed as products and as capital.
        </p>

        {/* Live signal strip */}
        <div style={{ marginTop: 36 }}>
          <SignalTicker P={P} />
        </div>

        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 20, marginTop: 32 }}>
          <button className="gr-btn-primary" style={{
            display: "inline-flex", alignItems: "center", gap: 12,
            borderRadius: 999, background: P.ink, color: P.bg === "#14110c" ? P.bg : "#f7f1e7",
            padding: "14px 26px", border: "none",
            fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", cursor: "pointer",
            transition: "transform 300ms ease",
          }}>
            Request access
            <Arrow />
          </button>
          <button style={{
            display: "inline-flex", alignItems: "center", gap: 10, background: "none", border: `1px solid ${P.border}`,
            color: P.muted, cursor: "pointer", borderRadius: 999, padding: "13px 22px",
            fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase",
          }}>
            Watch the system
            <Chevron />
          </button>
        </div>
      </div>
    </div>
  );

  // Hero container shared style
  const panelStyle = {
    position: "relative", overflow: "hidden",
    borderRadius: 32,
    border: `1px solid ${P.border}`,
    background: P.surface,
    padding: T.heroPad,
    boxShadow: "0 20px 60px rgba(76,55,24,0.06)",
    backdropFilter: "blur(4px)",
    display: "flex", flexDirection: "column",
  };

  const sceneWrap = {
    position: "relative",
    borderRadius: 32,
    overflow: "hidden",
    minHeight: "min(72vh, 640px)",
  };

  // Cursor spotlight (copy panel only) — throttled, no transform animation
  const spotlight = mouse ? (
    <div style={{
      position: "absolute", pointerEvents: "none", display: "block",
      width: 320, height: 320, borderRadius: "50%",
      background: P.gold, opacity: 0.1, filter: "blur(60px)",
      left: mouse.x - 160, top: mouse.y - 160,
      willChange: "left, top",
    }} />
  ) : null;

  if (layout === "stacked") {
    return (
      <section ref={heroRef} style={{ display: "grid", gap: 18, padding: "16px 0 32px" }}>
        <div style={{ ...sceneWrap, minHeight: "min(56vh, 560px)" }}>
          {role !== "background" ? splineBlock : <div style={{ height: "100%" }} />}
        </div>
        <div style={panelStyle}>
          {spotlight}
          {copy}
        </div>
      </section>
    );
  }

  if (layout === "offaxis") {
    return (
      <section ref={heroRef} style={{ position: "relative", padding: "16px 0 32px" }}>
        {role !== "background" && (
          <div style={{ position: "absolute", inset: 0, zIndex: 0, opacity: 0.75, mixBlendMode: "normal" }}>
            <div style={{ ...sceneWrap, height: "100%" }}>{splineBlock}</div>
          </div>
        )}
        <div style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,0.4fr)", gap: 18 }}>
          <div style={panelStyle}>
            {spotlight}
            {copy}
          </div>
          <div />
        </div>
      </section>
    );
  }

  // split (default) — v4: scene stretches full hero height, overflows right edge
  return (
    <section ref={heroRef} style={{
      position: "relative",
      display: "grid",
      gridTemplateColumns: "minmax(0,1.35fr) minmax(0,0.65fr)",
      gap: 24,
      padding: "16px 0 48px",
      alignItems: "stretch",
    }} className="gr-hero-grid">
      <div style={{ ...panelStyle, display: "flex", flexDirection: "column" }}>
        {spotlight}
        {copy}
      </div>
      <div style={{
        position: "relative",
        borderRadius: 32,
        overflow: "hidden",
        width: "calc(100% + clamp(16px, 3vw, 40px))",
        height: "100%",
        minHeight: "min(68vh, 620px)",
        alignSelf: "stretch",
        marginRight: "calc(-1 * clamp(16px, 3vw, 40px))",
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
      }}>
        {role === "background" ? <div style={{ height: "100%", background: P.bg, border: `1px solid ${P.border}`, borderRadius: "inherit" }} /> : splineBlock}
      </div>
      <style>{`
        @media (max-width: 860px) {
          .gr-hero-grid {
            grid-template-columns: 1fr !important;
            min-height: auto !important;
          }
          .gr-hero-grid > :last-child {
            width: 100% !important;
            margin-right: 0 !important;
            aspect-ratio: 3 / 4;
            height: auto !important;
            border-radius: 28px !important;
            order: -1;
          }
        }
        @media (max-width: 560px) {
          .gr-hero-grid > :last-child {
            aspect-ratio: 4 / 5;
          }
        }
      `}</style>
    </section>
  );
}

// ---------- Divisions ----------
function DivisionsSection({ P }) {
  return (
    <section style={{ marginTop: T.sectionGap }}>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 40, alignItems: "end",
      }} className="gr-div-head">
        <div>
          <SectionHeader P={P} eyebrow="Divisions" index="§ 01" />
          <h2 style={{
            marginTop: 14, fontFamily: `"Playfair Display", serif`, fontWeight: 500,
            fontSize: T.h2, lineHeight: 1.04, letterSpacing: "-0.03em", color: P.ink,
          }}>
            Two products,<br/><em style={{ color: P.gold, fontWeight: 400 }}>one operating discipline.</em>
          </h2>
        </div>
        <p style={{ color: P.body, lineHeight: 1.65, fontSize: T.body, margin: 0, maxWidth: 520 }}>
          Goldridge operates as a diversified capital and technology firm. Algorithmic
          trading and AI agents share one modelling stack — alongside principal investment
          and an internal research practice, each reinforcing the others.
        </p>
      </div>

      <div style={{
        marginTop: 32,
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
        border: `1px solid ${P.rule}`, borderRadius: 2,
        background: P.surface,
      }} className="gr-div-grid">
        {DIVISIONS.map((d, i) => (
          <article key={d.num} style={{
            padding: "28px 22px",
            borderLeft: i === 0 ? "none" : `1px solid ${P.rule}`,
            display: "flex", flexDirection: "column", gap: 14,
            minHeight: 240,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{
                fontFamily: "ui-monospace, Consolas, monospace",
                fontSize: 11, letterSpacing: "0.15em", color: P.gold,
              }}>{d.num}</span>
              <span style={{
                fontSize: 9, letterSpacing: "0.28em", textTransform: "uppercase", color: P.muted2,
              }}>{d.tag}</span>
            </div>
            <h3 style={{
              margin: 0,
              fontFamily: `"Playfair Display", serif`, fontWeight: 500,
              fontSize: "1.25rem", lineHeight: 1.1, letterSpacing: "-0.02em", color: P.ink,
            }}>{d.name}</h3>
            <p style={{ margin: 0, color: P.body, lineHeight: 1.55, fontSize: T.small }}>{d.body}</p>
          </article>
        ))}
      </div>

      <style>{`
        @media (max-width: 980px) {
          .gr-div-head { grid-template-columns: 1fr !important; gap: 18px !important; }
          .gr-div-grid { grid-template-columns: 1fr 1fr !important; }
          .gr-div-grid > article:nth-child(3) { border-left: none !important; border-top: 1px solid ${P.rule} !important; }
          .gr-div-grid > article:nth-child(4) { border-top: 1px solid ${P.rule} !important; }
        }
        @media (max-width: 620px) {
          .gr-div-grid { grid-template-columns: 1fr !important; }
          .gr-div-grid > article { border-left: none !important; border-top: 1px solid ${P.rule} !important; }
          .gr-div-grid > article:first-child { border-top: none !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- Principles (v4: modern 2×2 feature grid) ----------
function PrinciplesBand({ P, tone = "light" }) {
  const dark = tone === "dark";
  const gold     = dark ? "#caa462" : P.gold;
  const goldSoft = (dark ? "#caa462" : P.gold) + "55";
  const goldWash = (dark ? "#caa462" : P.gold) + "1a";
  const ink      = dark ? "#f4ecdf" : P.ink;
  const muted    = dark ? "#bfa67b" : P.muted;
  const body     = dark ? "#cdbea0" : P.body;
  const rule     = dark ? "rgba(202,164,98,0.28)" : P.rule;
  const surface  = dark ? "rgba(30,24,16,0.55)" : P.surface;
  const surface2 = dark ? "rgba(42,34,22,0.55)" : P.surface2;
  const bgBase   = dark ? "#0d0a07" : P.bg;

  const cards = [
    {
      k: "Systematic",
      tag: "Process",
      v: "Models first, intuition second. Every position is the output of a process, never a prediction dressed up as one.",
      diagram: (
        <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid meet" style={{ width: "100%", height: "100%", display: "block" }}>
          <defs>
            <linearGradient id="pr4-sys-beam" x1="0" x2="1" y1="0" y2="0">
              <stop offset="0%" stopColor={gold} stopOpacity="0" />
              <stop offset="50%" stopColor={gold} />
              <stop offset="100%" stopColor={gold} stopOpacity="0" />
            </linearGradient>
          </defs>
          {[40, 75, 110, 145].map((y, i) => (
            <g key={i}>
              <rect x="18" y={y - 10} width="70" height="20" rx="2" fill="none" stroke={goldSoft} strokeWidth="1" />
              <line x1="10" x2="18" y1={y} y2={y} stroke={muted} strokeOpacity="0.4" strokeWidth="1" />
              <text x="26" y={y + 3.5} fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="1.5">
                {["PRICE","VOL","FLOW","MACRO"][i]}
              </text>
              <line x1="88" x2="135" y1={y} y2="100" stroke={goldSoft} strokeWidth="0.8" />
              <circle r="2.2" fill={gold}>
                <animateMotion dur={`${2.2 + i * 0.3}s`} repeatCount="indefinite" begin={`${-i * 0.4}s`} path={`M 88 ${y} L 135 100`} />
              </circle>
            </g>
          ))}
          <rect x="135" y="70" width="70" height="60" rx="3" fill={P.darkBg} stroke={gold} strokeWidth="1" />
          <text x="170" y="96" textAnchor="middle" fontFamily="Playfair Display, serif" fontStyle="italic" fontSize="16" fill={gold}>model</text>
          <text x="170" y="114" textAnchor="middle" fontFamily="ui-monospace, Consolas, monospace" fontSize="8" fill={P.darkMute} letterSpacing="2">ƒ(x)</text>
          <line x1="205" y1="100" x2="300" y2="100" stroke="url(#pr4-sys-beam)" strokeWidth="2" />
          <polygon points="295,94 305,100 295,106" fill={gold} />
          <text x="302" y="85" textAnchor="end" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="2">DECISION</text>
        </svg>
      ),
    },
    {
      k: "Selective",
      tag: "Conviction",
      v: "Signal over sentiment. We trade fewer ideas with more conviction, leaving noise at the door.",
      diagram: (
        <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid meet" style={{ width: "100%", height: "100%", display: "block" }}>
          {Array.from({ length: 72 }).map((_, i) => {
            const cx = 14 + (i % 9) * 14;
            const cy = 28 + Math.floor(i / 9) * 20;
            const isKept = i === 19 || i === 38 || i === 56;
            return (
              <circle key={i} cx={cx} cy={cy} r={isKept ? 4 : 2}
                fill={isKept ? gold : muted}
                fillOpacity={isKept ? 1 : 0.22}>
                {!isKept && (
                  <animate attributeName="opacity" values="0.12;0.32;0.12" dur={`${3 + (i % 5)}s`} repeatCount="indefinite" begin={`${-i * 0.08}s`} />
                )}
                {isKept && (
                  <animate attributeName="r" values="3.5;5;3.5" dur="2.4s" repeatCount="indefinite" />
                )}
              </circle>
            );
          })}
          <line x1="158" y1="20" x2="158" y2="180" stroke={gold} strokeDasharray="3 4" strokeOpacity="0.55" strokeWidth="1" />
          <text x="158" y="14" textAnchor="middle" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="3">FILTER</text>
          {[{y:56,i:0},{y:100,i:1},{y:144,i:2}].map(({y,i}) => (
            <g key={i}>
              <line x1="180" y1={y} x2="296" y2={y} stroke={gold} strokeWidth="2" />
              <circle cx="180" cy={y} r="3.5" fill={gold} />
              <circle cx="296" cy={y} r="4" fill={bgBase} stroke={gold} strokeWidth="1.5" />
              <circle cx="296" cy={y} r="4" fill="none" stroke={gold} strokeOpacity="0.6">
                <animate attributeName="r" values="4;9;4" dur="2.6s" repeatCount="indefinite" begin={`${-i * 0.6}s`} />
                <animate attributeName="opacity" values="0.6;0;0.6" dur="2.6s" repeatCount="indefinite" begin={`${-i * 0.6}s`} />
              </circle>
            </g>
          ))}
          <text x="296" y="186" textAnchor="end" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="2">3 IDEAS</text>
        </svg>
      ),
    },
    {
      k: "Patient",
      tag: "Horizon",
      v: "Cycles, not quarters. The compounding happens where most firms stop paying attention.",
      diagram: (
        <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid meet" style={{ width: "100%", height: "100%", display: "block" }}>
          <defs>
            <linearGradient id="pr4-pat-fill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={gold} stopOpacity="0.3" />
              <stop offset="100%" stopColor={gold} stopOpacity="0" />
            </linearGradient>
          </defs>
          {Array.from({ length: 16 }).map((_, i) => (
            <line key={i} x1={20 + i * 18} x2={20 + i * 18} y1="150" y2="164" stroke={muted} strokeOpacity="0.25" strokeWidth="1" />
          ))}
          <line x1="20" x2="302" y1="164" y2="164" stroke={rule} strokeWidth="1" />
          <text x="20" y="180" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="2">Q1</text>
          <text x="302" y="180" textAnchor="end" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="2">Q16</text>
          <path d="M 20 140 Q 90 132 150 110 T 302 30 L 302 164 L 20 164 Z" fill="url(#pr4-pat-fill)" />
          <path d="M 20 140 Q 90 132 150 110 T 302 30" stroke={gold} strokeWidth="2" fill="none" strokeLinecap="round" />
          <circle r="4.5" fill={gold}>
            <animateMotion dur="12s" repeatCount="indefinite" path="M 20 140 Q 90 132 150 110 T 302 30" />
          </circle>
          <circle r="12" fill="none" stroke={gold} strokeOpacity="0.4" strokeWidth="1">
            <animateMotion dur="12s" repeatCount="indefinite" path="M 20 140 Q 90 132 150 110 T 302 30" />
            <animate attributeName="r" values="6;18;6" dur="3s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.45;0;0.45" dur="3s" repeatCount="indefinite" />
          </circle>
          <text x="302" y="22" textAnchor="end" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="2">COMPOUND</text>
        </svg>
      ),
    },
    {
      k: "Calm",
      tag: "Risk",
      v: "Discipline under volatility. Drawdowns are budgeted, not surprised.",
      diagram: (
        <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid meet" style={{ width: "100%", height: "100%", display: "block" }}>
          <path d="M 14 100 L 32 36 L 50 148 L 70 54 L 90 132 L 112 44 L 134 140 L 156 52 L 178 126 L 200 40 L 222 144 L 244 56 L 266 122 L 288 46 L 306 140"
            stroke={muted} strokeOpacity="0.3" strokeWidth="1.2" fill="none" strokeLinejoin="round" />
          <rect x="14" y="80" width="292" height="40" fill={goldWash} />
          <line x1="14" x2="306" y1="80" y2="80" stroke={gold} strokeDasharray="3 3" strokeOpacity="0.55" strokeWidth="1" />
          <line x1="14" x2="306" y1="120" y2="120" stroke={gold} strokeDasharray="3 3" strokeOpacity="0.55" strokeWidth="1" />
          <text x="306" y="74" textAnchor="end" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="2">+ CAP</text>
          <text x="306" y="136" textAnchor="end" fontSize="9" fill={muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="2">− FLOOR</text>
          <path d="M 14 102 Q 60 98 110 104 T 210 100 T 306 102" stroke={gold} strokeWidth="2.2" fill="none" strokeLinecap="round" />
          <circle cx="160" cy="101" r="5" fill={gold}>
            <animate attributeName="r" values="4;8;4" dur="3.2s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="1;0.4;1" dur="3.2s" repeatCount="indefinite" />
          </circle>
          <circle cx="160" cy="101" r="10" fill="none" stroke={gold} strokeOpacity="0.3">
            <animate attributeName="r" values="6;16;6" dur="3.2s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.4;0;0.4" dur="3.2s" repeatCount="indefinite" />
          </circle>
        </svg>
      ),
    },
  ];

  return (
    <section style={{ margin: `${T.sectionGap}px 0`, position: "relative" }}>
      {/* Header row */}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "end",
        marginBottom: 36,
      }} className="gr-pr-head">
        <div>
          <SectionHeader P={P} eyebrow="Principles" index="§ 02" />
          <h2 style={{
            marginTop: 14, fontFamily: `"Playfair Display", serif`, fontWeight: 500,
            fontSize: T.h2, lineHeight: 1.02, letterSpacing: "-0.025em",
            color: ink, maxWidth: 720,
          }}>
            Four postures <em style={{ color: gold, fontWeight: 400 }}>that hold the firm together.</em>
          </h2>
        </div>
        <div style={{
          fontSize: T.eyebrow, letterSpacing: "0.28em", textTransform: "uppercase",
          color: muted, paddingBottom: 6,
        }}>
          04 · operating axioms
        </div>
      </div>

      {/* 2×2 grid */}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1,
        background: rule, border: `1px solid ${rule}`,
      }} className="gr-pr-grid">
        {cards.map((c, i) => (
          <article key={c.k} className="gr-pr-card" style={{
            background: surface, padding: 28,
            display: "grid", gridTemplateRows: "auto 1fr auto", gap: 18,
            minHeight: 340, position: "relative",
          }}>
            {/* top meta */}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                <span style={{
                  fontFamily: `"Playfair Display", serif`, fontStyle: "italic", fontWeight: 400,
                  fontSize: "2rem", lineHeight: 1, color: gold,
                }}>{String(i + 1).padStart(2, "0")}</span>
                <h3 style={{
                  margin: 0, fontFamily: `"Playfair Display", serif`, fontWeight: 500,
                  fontSize: "1.55rem", letterSpacing: "-0.02em", color: ink,
                }}>{c.k}</h3>
              </div>
              <span style={{
                fontSize: 9, letterSpacing: "0.28em", textTransform: "uppercase", color: muted,
              }}>{c.tag}</span>
            </div>

            {/* diagram */}
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "center",
              minHeight: 180, padding: "4px 0",
            }}>
              {c.diagram}
            </div>

            {/* body copy */}
            <p style={{
              margin: 0, color: body, fontSize: T.body, lineHeight: 1.6,
              borderTop: `1px solid ${rule}`, paddingTop: 16,
            }}>{c.v}</p>
          </article>
        ))}
      </div>

      <style>{`
        .gr-pr-card { transition: background 300ms ease; }
        .gr-pr-card:hover { background: ${surface2}; }
        @media (max-width: 900px) {
          .gr-pr-head { grid-template-columns: 1fr !important; }
          .gr-pr-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- Brand posture row ----------
function BrandPostureRow({ P }) {
  return (
    <section style={{
      marginTop: T.sectionGap,
      display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 24,
    }} className="gr-posture">
      <div style={{
        borderRadius: 24, border: `1px solid ${P.border}`, background: P.surface,
        padding: "32px",
      }}>
        <div style={{ fontSize: T.eyebrow, letterSpacing: "0.34em", textTransform: "uppercase", color: P.muted }}>
          Brand posture
        </div>
        <p style={{
          marginTop: 14, maxWidth: 520,
          fontFamily: `"Playfair Display", serif`, fontWeight: 500,
          fontSize: T.h2, lineHeight: 1.05, letterSpacing: "-0.025em",
          color: P.ink,
        }}>
          Two products. One firm. Never overexplained.
        </p>
        <p style={{ marginTop: 14, maxWidth: 520, color: P.body, lineHeight: 1.65, fontSize: T.body }}>
          AI agents and systematic trading sit under the same brand because they share the same discipline — models, risk, and quiet conviction. The site is meant to convey that before anyone reads a second paragraph.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="gr-atm">
        {ATMOSPHERE.map((a) => (
          <article key={a.eyebrow} style={{
            borderRadius: 18, border: `1px solid ${P.border}`, background: P.surface2,
            padding: "22px",
          }}>
            <div style={{ fontSize: T.eyebrow, letterSpacing: "0.34em", textTransform: "uppercase", color: P.muted2 }}>
              {a.eyebrow}
            </div>
            <h2 style={{
              marginTop: 12, fontFamily: `"Playfair Display", serif`, fontWeight: 500,
              fontSize: "1.15rem", lineHeight: 1.15, letterSpacing: "-0.015em", color: P.ink,
            }}>{a.heading}</h2>
            <p style={{ marginTop: 10, color: P.body, lineHeight: 1.65, fontSize: T.small }}>{a.text}</p>
          </article>
        ))}
      </div>

      <style>{`
        @media (max-width: 980px) {
          .gr-posture { grid-template-columns: 1fr !important; }
          .gr-atm { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- Strategies (v2: stair-stepped hierarchy) ----------
function StrategiesSection({ P }) {
  // Sizes stair-step UP — Tier I smallest, Tier III dominant (but tighter)
  const sizes = [
    { display: "1.8rem", title: "1.1rem", padding: "22px 24px", bg: P.surface,  emphasis: false },
    { display: "2.4rem", title: "1.3rem", padding: "28px 28px", bg: P.surface2, emphasis: false },
    { display: "3.4rem", title: "1.7rem", padding: "36px 32px", bg: P.darkBg,   emphasis: true  },
  ];
  return (
    <section style={{ marginTop: T.sectionGap }}>
      <SectionHeader P={P} eyebrow="Strategies" index="§ 04" />
      <h2 style={{
        marginTop: 14, maxWidth: 820,
        fontFamily: `"Playfair Display", serif`, fontWeight: 500,
        fontSize: T.h2, lineHeight: 1.02, letterSpacing: "-0.025em",
        color: P.ink,
      }}>
        One system, <em style={{ color: P.gold, fontWeight: 400 }}>three surfaces.</em>
      </h2>
      <p style={{ marginTop: 12, maxWidth: 520, color: P.body, lineHeight: 1.65, fontSize: T.body }}>
        From copy trading to institutional mandates — and AI agents that run alongside them. Same research, different surfaces.
      </p>

      <div style={{ marginTop: 32, display: "grid", gap: 14 }}>
        {STRATEGIES.map((s, i) => {
          const sz = sizes[i];
          const ink = sz.emphasis ? P.darkInk : P.ink;
          const body = sz.emphasis ? P.darkMute : P.body;
          const muted = sz.emphasis ? P.darkMute : P.muted2;
          return (
            <article key={s.tier} style={{
              display: "grid", gridTemplateColumns: "1fr 1.4fr 180px", gap: 24,
              alignItems: "center", padding: sz.padding,
              borderRadius: 18, border: sz.emphasis ? "none" : `1px solid ${P.border}`,
              background: sz.bg, color: ink,
            }} className="gr-strat-row">
              <div>
                <div style={{ fontSize: 10, letterSpacing: "0.34em", textTransform: "uppercase", color: muted }}>
                  Tier {s.tier} · {s.scale.split(" · ")[0]}
                </div>
                <div style={{
                  marginTop: 16, fontFamily: `"Playfair Display", serif`, fontWeight: 500,
                  fontSize: sz.display, lineHeight: 0.9, letterSpacing: "-0.04em", color: ink,
                }}>
                  {s.tier}
                </div>
                <div style={{
                  marginTop: 12, fontFamily: `"Playfair Display", serif`, fontWeight: 500,
                  fontSize: sz.title, letterSpacing: "-0.02em", color: ink,
                }}>{s.name}</div>
              </div>
              <p style={{ color: body, lineHeight: 1.7, fontSize: sz.emphasis ? "1.05rem" : "0.97rem", margin: 0, maxWidth: 480 }}>
                {s.body}
              </p>
              <div style={{ textAlign: "right" }}>
                <span style={{
                  display: "inline-flex", alignItems: "center", gap: 10,
                  fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: sz.emphasis ? P.gold : P.muted,
                  cursor: "pointer",
                }}>
                  Request access <Arrow small />
                </span>
              </div>
            </article>
          );
        })}
      </div>

      <style>{`
        @media (max-width: 900px) {
          .gr-strat-row { grid-template-columns: 1fr !important; gap: 16px !important; padding: 28px !important; }
          .gr-strat-row > :last-child { text-align: left !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- System architecture diagram ----------
function OperatingNotes({ P }) {
  return (
    <section style={{ marginTop: T.sectionGap }}>
      <div style={{
        borderRadius: 24, background: P.darkBg, color: P.darkInk,
        padding: "36px clamp(24px,3vw,40px)",
        border: `1px solid rgba(28,20,13,0.12)`,
        position: "relative", overflow: "hidden",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div style={{ fontSize: T.eyebrow, letterSpacing: "0.34em", textTransform: "uppercase", color: P.darkMute }}>
            System architecture
          </div>
          <div style={{ fontFamily: "ui-monospace, Consolas, monospace", fontSize: 10, letterSpacing: "0.1em", color: P.darkMute }}>
            § 05 · One stack
          </div>
        </div>

        <h3 style={{
          marginTop: 14, marginBottom: 0,
          fontFamily: `"Playfair Display", serif`, fontWeight: 500,
          fontSize: T.h2, lineHeight: 1.05, letterSpacing: "-0.025em", color: P.darkInk,
          maxWidth: 620,
        }}>
          One modelling core. <em style={{ color: P.gold, fontWeight: 400 }}>Two product surfaces.</em>
        </h3>

        {/* Diagram */}
        <div style={{ marginTop: 36 }}>
          <svg viewBox="0 0 1000 340" style={{ width: "100%", height: "auto", display: "block" }} aria-hidden>
            <defs>
              <linearGradient id="gr-core" x1="0" x2="1" y1="0" y2="1">
                <stop offset="0%" stopColor={P.gold} stopOpacity="0.25" />
                <stop offset="100%" stopColor={P.gold} stopOpacity="0.06" />
              </linearGradient>
            </defs>
            {/* connectors */}
            <g stroke={P.gold} strokeOpacity="0.45" strokeWidth="1" fill="none">
              <path d="M 260 170 L 430 90" />
              <path d="M 260 170 L 430 170" />
              <path d="M 260 170 L 430 250" />
              <path d="M 570 90 L 740 90" />
              <path d="M 570 170 L 740 170" />
              <path d="M 570 250 L 740 250" />
            </g>
            {/* dots on connectors */}
            {[[430,90],[430,170],[430,250],[570,90],[570,170],[570,250],[740,90],[740,170],[740,250]].map(([x,y],i)=>(
              <circle key={i} cx={x} cy={y} r="2.5" fill={P.gold} />
            ))}
            {/* Core box */}
            <rect x="70" y="110" width="190" height="120" rx="8" fill="url(#gr-core)" stroke={P.gold} strokeOpacity="0.7" />
            <text x="165" y="160" textAnchor="middle" fill={P.darkInk} fontFamily="Playfair Display, serif" fontSize="18" fontStyle="italic">Modelling core</text>
            <text x="165" y="186" textAnchor="middle" fill={P.darkMute} fontFamily="ui-monospace, Consolas, monospace" fontSize="10" letterSpacing="2">SHARED · 24/7</text>
            {/* Layer labels */}
            <text x="500" y="60" textAnchor="middle" fill={P.darkMute} fontFamily="Helvetica Neue, Arial" fontSize="10" letterSpacing="3">LAYER</text>
            <text x="810" y="60" textAnchor="middle" fill={P.darkMute} fontFamily="Helvetica Neue, Arial" fontSize="10" letterSpacing="3">SURFACE</text>
            {/* Middle layer boxes */}
            {[
              { y: 74, label: "Signal models", sub: "2,400+ features" },
              { y: 154, label: "Agent runtime", sub: "<8ms decisions" },
              { y: 234, label: "Risk engine", sub: "Regime-aware" },
            ].map((l) => (
              <g key={l.label}>
                <rect x="430" y={l.y} width="140" height="32" rx="4" fill="none" stroke={P.gold} strokeOpacity="0.5" />
                <text x="500" y={l.y + 14} textAnchor="middle" fill={P.darkInk} fontFamily="Playfair Display, serif" fontSize="13">{l.label}</text>
                <text x="500" y={l.y + 26} textAnchor="middle" fill={P.darkMute} fontFamily="ui-monospace, Consolas, monospace" fontSize="9">{l.sub}</text>
              </g>
            ))}
            {/* Right surfaces */}
            {[
              { y: 74, label: "Trading desk", sub: "Capital" },
              { y: 154, label: "AI Agents", sub: "Product" },
              { y: 234, label: "Research", sub: "Intelligence" },
            ].map((l) => (
              <g key={l.label}>
                <rect x="740" y={l.y} width="170" height="32" rx="4" fill={P.gold} fillOpacity="0.12" stroke={P.gold} strokeOpacity="0.6" />
                <text x="825" y={l.y + 14} textAnchor="middle" fill={P.darkInk} fontFamily="Playfair Display, serif" fontSize="13">{l.label}</text>
                <text x="825" y={l.y + 26} textAnchor="middle" fill={P.darkMute} fontFamily="ui-monospace, Consolas, monospace" fontSize="9" letterSpacing="1">{l.sub}</text>
              </g>
            ))}
            {/* baseline */}
            <line x1="70" y1="300" x2="930" y2="300" stroke={P.gold} strokeOpacity="0.2" strokeDasharray="2 4" />
            <text x="70" y="320" fill={P.darkMute} fontFamily="ui-monospace, Consolas, monospace" fontSize="9" letterSpacing="2">FEATURES → DECISIONS → OUTCOMES</text>
            <text x="930" y="320" textAnchor="end" fill={P.darkMute} fontFamily="ui-monospace, Consolas, monospace" fontSize="9" letterSpacing="2">GOLDRIDGE · HK / SG / TYO</text>
          </svg>
        </div>
      </div>
    </section>
  );
}

// ---------- Access / Performance posture (diagrammatic) ----------
function AccessPerformance({ P }) {
  const accent = P.accent || "#2a5f63";
  return (
    <section style={{
      marginTop: T.sectionGap,
      display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 24,
      alignItems: "start",
    }} className="gr-ap">
      {/* LEFT — Capital deployment allocation diagram */}
      <div style={{
        borderRadius: 24, border: `1px solid ${P.border}`, background: P.surface,
        padding: "32px", position: "relative", overflow: "hidden",
      }}>
        <SectionHeader P={P} eyebrow="Capital deployment" index="§ 06" />
        <h3 style={{
          marginTop: 12,
          fontFamily: `"Playfair Display", serif`, fontWeight: 500,
          fontSize: "1.4rem", lineHeight: 1.1, letterSpacing: "-0.02em", color: P.ink,
        }}>
          How the book is <em style={{ color: accent, fontWeight: 400 }}>shaped.</em>
        </h3>

        <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "170px 1fr", gap: 20, alignItems: "center" }}>
          {/* Donut */}
          <svg viewBox="0 0 160 160" style={{ width: "100%", height: "auto" }}>
            <defs>
              <linearGradient id="gr-donut-a" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor={P.gold} stopOpacity="0.9" />
                <stop offset="100%" stopColor={P.gold} stopOpacity="0.55" />
              </linearGradient>
              <linearGradient id="gr-donut-b" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor={accent} stopOpacity="0.9" />
                <stop offset="100%" stopColor={accent} stopOpacity="0.55" />
              </linearGradient>
            </defs>
            {/* Segments (values: 45, 30, 15, 10) with small gaps */}
            {(() => {
              const cx = 80, cy = 80, r = 58, sw = 18;
              const parts = [
                { p: 0.45, color: "url(#gr-donut-a)" },
                { p: 0.30, color: "url(#gr-donut-b)" },
                { p: 0.15, color: P.gold + "aa" },
                { p: 0.10, color: accent + "aa" },
              ];
              const C = 2 * Math.PI * r;
              let offset = 0;
              return parts.map((seg, i) => {
                const len = seg.p * C - 3;
                const el = (
                  <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={seg.color}
                    strokeWidth={sw} strokeDasharray={`${len} ${C - len}`} strokeDashoffset={-offset}
                    transform={`rotate(-90 ${cx} ${cy})`} />
                );
                offset += seg.p * C;
                return el;
              });
            })()}
            <text x="80" y="76" textAnchor="middle" fontFamily="Playfair Display, serif" fontSize="16" fill={P.ink}>Book</text>
            <text x="80" y="94" textAnchor="middle" fontFamily="ui-monospace, Consolas, monospace" fontSize="9" fill={P.muted} letterSpacing="2">BY MANDATE</text>
          </svg>

          {/* Legend */}
          <div style={{ display: "grid", gap: 10 }}>
            {[
              { color: P.gold,   label: "Systematic macro",   pct: "45%" },
              { color: accent,   label: "Cross-asset stat arb", pct: "30%" },
              { color: P.gold + "aa", label: "Agent-driven exec", pct: "15%" },
              { color: accent + "aa", label: "Strategic reserve", pct: "10%" },
            ].map((l) => (
              <div key={l.label} style={{ display: "grid", gridTemplateColumns: "10px 1fr auto", alignItems: "center", gap: 10 }}>
                <span style={{ width: 10, height: 10, borderRadius: 2, background: l.color }} />
                <span style={{ fontSize: 12, color: P.ink, fontFamily: "Playfair Display, serif" }}>{l.label}</span>
                <span style={{ fontSize: 11, color: P.muted, fontFamily: "ui-monospace, Consolas, monospace", letterSpacing: "1px" }}>{l.pct}</span>
              </div>
            ))}
          </div>
        </div>

        <p style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${P.rule}`, color: P.body, fontSize: T.small, lineHeight: 1.65 }}>
          Allocations shift by regime signal. What stays constant is discretion and drawdown discipline.
        </p>
      </div>

      {/* RIGHT — Regime/drawdown chart diagram */}
      <div style={{
        borderRadius: 24, border: `1px solid ${P.border}`, background: P.surface2,
        padding: "32px", position: "relative", overflow: "hidden",
      }}>
        <SectionHeader P={P} eyebrow="Performance posture" index="§ 07" />
        <h3 style={{
          marginTop: 12,
          fontFamily: `"Playfair Display", serif`, fontWeight: 500,
          fontSize: "1.4rem", lineHeight: 1.1, letterSpacing: "-0.02em", color: P.ink,
        }}>
          Cycles, <em style={{ color: accent, fontWeight: 400 }}>not quarters.</em>
        </h3>

        <svg viewBox="0 0 420 180" style={{ marginTop: 18, width: "100%", height: "auto" }}>
          <defs>
            <linearGradient id="gr-perf-a" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={P.gold} stopOpacity="0.35" />
              <stop offset="100%" stopColor={P.gold} stopOpacity="0" />
            </linearGradient>
          </defs>
          {/* grid */}
          {[30, 70, 110, 150].map((y) => <line key={y} x1="20" x2="400" y1={y} y2={y} stroke={P.rule} strokeOpacity="0.4" strokeDasharray="2 4" />)}
          {/* regime band markers */}
          <rect x="20" y="20" width="100" height="140" fill={accent} fillOpacity="0.05" />
          <rect x="220" y="20" width="80" height="140" fill={P.gold} fillOpacity="0.05" />
          <text x="70"  y="35" textAnchor="middle" fontSize="8" letterSpacing="2" fill={P.muted} fontFamily="ui-monospace, Consolas, monospace">LOW VOL</text>
          <text x="170" y="35" textAnchor="middle" fontSize="8" letterSpacing="2" fill={P.muted} fontFamily="ui-monospace, Consolas, monospace">TRANSITION</text>
          <text x="260" y="35" textAnchor="middle" fontSize="8" letterSpacing="2" fill={P.muted} fontFamily="ui-monospace, Consolas, monospace">STRESS</text>
          <text x="360" y="35" textAnchor="middle" fontSize="8" letterSpacing="2" fill={P.muted} fontFamily="ui-monospace, Consolas, monospace">RECOVERY</text>

          {/* compounding curve (smoothed upward) */}
          <path d="M 20 130 Q 70 120 120 108 T 220 82 Q 260 92 300 76 T 400 48 L 400 160 L 20 160 Z" fill="url(#gr-perf-a)" />
          <path d="M 20 130 Q 70 120 120 108 T 220 82 Q 260 92 300 76 T 400 48" stroke={P.gold} strokeWidth="1.5" fill="none" />

          {/* drawdown budget band (constant line) */}
          <line x1="20" y1="150" x2="400" y2="150" stroke={accent} strokeOpacity="0.6" strokeDasharray="4 3" />
          <text x="400" y="147" textAnchor="end" fontSize="8" letterSpacing="2" fill={accent} fontFamily="ui-monospace, Consolas, monospace">DRAWDOWN BUDGET</text>

          {/* marker dots */}
          {[[120,108],[220,82],[300,76],[400,48]].map(([x,y],i)=>(
            <g key={i}>
              <circle cx={x} cy={y} r="4" fill={P.bg} stroke={P.gold} strokeWidth="1.5" />
              <circle cx={x} cy={y} r="1.5" fill={P.gold} />
            </g>
          ))}
        </svg>

        <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }} className="gr-postures">
          {[
            {
              label: "Regime-aware exposure",
              sub: "Shift by signal, not calendar",
              stat: "4 regimes",
              // animated bar chart with highlighted active regime
              svg: (
                <svg viewBox="0 0 120 60" style={{ width: "100%", height: 64 }}>
                  <defs>
                    <linearGradient id="pst-bar-g" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor={P.gold} stopOpacity="0.95" />
                      <stop offset="100%" stopColor={P.gold} stopOpacity="0.3" />
                    </linearGradient>
                    <linearGradient id="pst-bar-t" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor={accent} stopOpacity="0.95" />
                      <stop offset="100%" stopColor={accent} stopOpacity="0.3" />
                    </linearGradient>
                  </defs>
                  {/* axis */}
                  <line x1="6" x2="114" y1="52" y2="52" stroke={P.rule} />
                  {[
                    { x: 10, h: 34, lbl: "LV",   active: false, col: "t" },
                    { x: 34, h: 18, lbl: "TR",   active: false, col: "t" },
                    { x: 58, h: 12, lbl: "STR",  active: true,  col: "g" },
                    { x: 82, h: 26, lbl: "REC",  active: false, col: "g" },
                  ].map((b, i) => (
                    <g key={i}>
                      <rect x={b.x} y={52 - b.h} width="20" height={b.h} rx="1"
                        fill={b.col === "g" ? "url(#pst-bar-g)" : "url(#pst-bar-t)"}>
                        <animate attributeName="height" values={`${b.h};${b.h - 4};${b.h}`} dur={`${4 + i * 0.7}s`} repeatCount="indefinite" />
                        <animate attributeName="y" values={`${52-b.h};${52-b.h+4};${52-b.h}`} dur={`${4 + i * 0.7}s`} repeatCount="indefinite" />
                      </rect>
                      {b.active && (
                        <rect x={b.x - 2} y={52 - b.h - 2} width="24" height={b.h + 4} rx="2" fill="none" stroke={P.ink} strokeDasharray="2 2" strokeOpacity="0.6" />
                      )}
                      <text x={b.x + 10} y="59" textAnchor="middle" fontSize="5" fill={P.muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="0.5">{b.lbl}</text>
                    </g>
                  ))}
                  <text x="114" y="10" textAnchor="end" fontSize="5" fill={accent} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="1">● ACTIVE</text>
                </svg>
              ),
            },
            {
              label: "Drawdown-budgeted sizing",
              sub: "Position capped by risk floor",
              stat: "−8% cap",
              // equity path above dashed floor, with animated tracker
              svg: (
                <svg viewBox="0 0 120 60" style={{ width: "100%", height: 64 }}>
                  <defs>
                    <linearGradient id="pst-eq" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor={P.gold} stopOpacity="0.3" />
                      <stop offset="100%" stopColor={P.gold} stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  {/* floor */}
                  <line x1="4" x2="116" y1="44" y2="44" stroke={accent} strokeDasharray="3 2" strokeOpacity="0.7" />
                  <text x="116" y="41" textAnchor="end" fontSize="5" fill={accent} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="1">BUDGET FLOOR</text>
                  {/* filled area */}
                  <path d="M 4 26 Q 22 20 36 30 T 70 28 Q 82 38 92 32 T 116 18 L 116 50 L 4 50 Z" fill="url(#pst-eq)" />
                  {/* path */}
                  <path d="M 4 26 Q 22 20 36 30 T 70 28 Q 82 38 92 32 T 116 18"
                    stroke={P.gold} strokeWidth="1.3" fill="none" />
                  {/* pulse tracker */}
                  <circle r="3" fill={P.gold}>
                    <animateMotion dur="6s" repeatCount="indefinite" path="M 4 26 Q 22 20 36 30 T 70 28 Q 82 38 92 32 T 116 18" />
                    <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite" />
                  </circle>
                  <circle r="6" fill="none" stroke={P.gold} strokeOpacity="0.5">
                    <animateMotion dur="6s" repeatCount="indefinite" path="M 4 26 Q 22 20 36 30 T 70 28 Q 82 38 92 32 T 116 18" />
                    <animate attributeName="r" values="4;10;4" dur="2s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.5;0;0.5" dur="2s" repeatCount="indefinite" />
                  </circle>
                </svg>
              ),
            },
            {
              label: "Cross-cycle consistency",
              sub: "Compounding through regimes",
              stat: "12 yr track",
              // staircase compounding with regime shading
              svg: (
                <svg viewBox="0 0 120 60" style={{ width: "100%", height: 64 }}>
                  {/* regime bands */}
                  <rect x="4"  y="4" width="30" height="52" fill={accent} fillOpacity="0.07" />
                  <rect x="64" y="4" width="26" height="52" fill={P.gold} fillOpacity="0.07" />
                  {/* baseline */}
                  <line x1="4" x2="116" y1="52" y2="52" stroke={P.rule} />
                  {/* stair curve */}
                  <polyline
                    points="4,48 18,42 24,44 38,36 50,38 62,30 74,32 86,24 98,26 112,14"
                    stroke={P.gold} strokeWidth="1.5" fill="none" />
                  {/* checkpoint dots */}
                  {[[18,42],[38,36],[62,30],[86,24],[112,14]].map(([x,y],i)=>(
                    <g key={i}>
                      <circle cx={x} cy={y} r="2.5" fill={P.bg} stroke={accent} strokeWidth="1.2">
                        <animate attributeName="r" values="2.5;3.5;2.5" dur={`${2 + i * 0.4}s`} repeatCount="indefinite" />
                      </circle>
                      <circle cx={x} cy={y} r="1" fill={accent} />
                    </g>
                  ))}
                  <text x="4"  y="12" fontSize="5" fill={P.muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="1">'13</text>
                  <text x="112" y="12" textAnchor="end" fontSize="5" fill={P.gold} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="1">'25</text>
                </svg>
              ),
            },
            {
              label: "Liquidity discipline",
              sub: "Exit-time budget per book",
              stat: "<5 days",
              // filling bars with ticker
              svg: (
                <svg viewBox="0 0 120 60" style={{ width: "100%", height: 64 }}>
                  {[
                    { y: 8,  w: 92, label: "FX",    tgt: "T+1", col: P.gold },
                    { y: 24, w: 66, label: "INDEX", tgt: "T+2", col: accent },
                    { y: 40, w: 42, label: "CRYPT", tgt: "T+4", col: P.gold },
                  ].map((r, i) => (
                    <g key={i}>
                      <text x="4" y={r.y + 7} fontSize="5" fill={P.muted} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="0.5">{r.label}</text>
                      <rect x="26" y={r.y} width="88" height="8" fill={P.rule} fillOpacity="0.35" rx="1" />
                      <rect x="26" y={r.y} width={r.w} height="8" fill={r.col} fillOpacity="0.8" rx="1">
                        <animate attributeName="width" values={`${r.w - 4};${r.w};${r.w - 4}`} dur={`${3 + i}s`} repeatCount="indefinite" />
                      </rect>
                      <text x="114" y={r.y + 7} textAnchor="end" fontSize="5" fill={P.ink} fontFamily="ui-monospace, Consolas, monospace" letterSpacing="0.5">{r.tgt}</text>
                    </g>
                  ))}
                </svg>
              ),
            },
          ].map((p, i) => (
            <div key={p.label} className="gr-posture-card" style={{
              border: `1px solid ${P.rule}`, borderRadius: 14, padding: "14px 16px",
              background: P.surface, display: "grid", gap: 10,
              transition: "transform 300ms ease, border-color 300ms ease, background 300ms ease",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span style={{ fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase", color: accent, fontFamily: "ui-monospace, Consolas, monospace", fontWeight: 600 }}>{`0${i + 1} · ${p.stat}`}</span>
                <span style={{ fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: P.muted2 }}>{p.sub}</span>
              </div>
              {p.svg}
              <div style={{
                fontFamily: `"Playfair Display", serif`, fontSize: 14, color: P.ink,
                letterSpacing: "-0.01em", lineHeight: 1.2,
              }}>{p.label}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .gr-ap { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 560px) {
          .gr-postures { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ---------- CTA block (above footer) ----------
function CTABlock({ P }) {
  const accent = P.accent || "#2a5f63";
  return (
    <section style={{ marginTop: T.sectionGap }}>
      <div className="gr-cta" style={{
        position: "relative", overflow: "hidden",
        borderRadius: 28,
        background: P.darkBg,
        color: P.darkInk,
        padding: "clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px)",
        display: "grid",
        gridTemplateColumns: "1.2fr 0.8fr",
        gap: "clamp(24px, 4vw, 56px)",
        alignItems: "center",
      }}>
        {/* Ambient glow + animated grid */}
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: `radial-gradient(60% 80% at 20% 40%, ${P.gold}22, transparent 60%),
                       radial-gradient(50% 70% at 85% 70%, ${accent}26, transparent 60%)`,
        }} />
        <svg viewBox="0 0 800 400" preserveAspectRatio="none" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          opacity: 0.15, pointerEvents: "none",
        }}>
          <defs>
            <pattern id="cta-grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke={P.gold} strokeOpacity="0.4" strokeWidth="0.5" />
            </pattern>
          </defs>
          <rect width="800" height="400" fill="url(#cta-grid)" />
        </svg>

        {/* Left: heading + copy */}
        <div style={{ position: "relative", zIndex: 2 }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontSize: 10, letterSpacing: "0.34em", textTransform: "uppercase",
            color: P.gold, fontFamily: "ui-monospace, Consolas, monospace",
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "#58a37a", boxShadow: "0 0 10px #58a37a" }} className="gr-pulse" />
            Accepting partners · 2026 Q2
          </div>
          <h2 style={{
            marginTop: 22, marginBottom: 0,
            fontFamily: `"Playfair Display", serif`, fontWeight: 500,
            fontSize: "clamp(2rem, 4vw, 3.4rem)", lineHeight: 1.02,
            letterSpacing: "-0.03em", color: P.darkInk, maxWidth: 640,
          }}>
            Begin a conversation with <em style={{ color: P.gold, fontWeight: 400 }}>Goldridge.</em>
          </h2>
          <p style={{
            marginTop: 20, maxWidth: 520, fontSize: "1.05rem",
            lineHeight: 1.6, color: P.darkMute,
          }}>
            Introductions are taken under mandate. Share your capital band and horizon — we'll respond with the appropriate surface.
          </p>

          <div style={{ marginTop: 30, display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14 }}>
            <button className="gr-cta-btn" style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              borderRadius: 999, background: P.gold, color: P.darkBg,
              padding: "15px 28px", border: "none",
              fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase",
              cursor: "pointer", fontWeight: 600,
              position: "relative", overflow: "hidden",
              transition: "transform 300ms ease, box-shadow 300ms ease",
            }}>
              <span style={{ position: "relative", zIndex: 2 }}>Request access</span>
              <span className="gr-cta-arrow" style={{ position: "relative", zIndex: 2, display: "inline-flex", transition: "transform 300ms ease" }}>
                <Arrow />
              </span>
            </button>
            <button style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              background: "transparent", border: `1px solid ${P.gold}55`,
              color: P.darkInk, cursor: "pointer", borderRadius: 999,
              padding: "14px 24px",
              fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase",
            }}>
              Schedule a briefing
              <Chevron />
            </button>
          </div>
        </div>

        {/* Right: stats / flow diagram */}
        <div style={{ position: "relative", zIndex: 2 }} className="gr-cta-viz">
          <svg viewBox="0 0 320 260" style={{ width: "100%", height: "auto", display: "block" }} aria-hidden>
            <defs>
              <radialGradient id="cta-core" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor={P.gold} stopOpacity="0.5" />
                <stop offset="100%" stopColor={P.gold} stopOpacity="0" />
              </radialGradient>
            </defs>
            {/* orbits */}
            {[60, 90, 120].map((r, i) => (
              <circle key={i} cx="160" cy="130" r={r} fill="none"
                stroke={P.gold} strokeOpacity={0.15 + i * 0.05}
                strokeDasharray={i === 1 ? "2 4" : undefined}>
                {i === 1 && (
                  <animateTransform attributeName="transform" type="rotate"
                    from="0 160 130" to="360 160 130" dur="40s" repeatCount="indefinite" />
                )}
              </circle>
            ))}
            {/* glow */}
            <circle cx="160" cy="130" r="50" fill="url(#cta-core)" />
            {/* core */}
            <circle cx="160" cy="130" r="30" fill={P.darkBg} stroke={P.gold} strokeOpacity="0.7" />
            <text x="160" y="127" textAnchor="middle" fontFamily="Playfair Display, serif" fontStyle="italic" fontSize="11" fill={P.darkInk}>Goldridge</text>
            <text x="160" y="140" textAnchor="middle" fontFamily="ui-monospace, Consolas, monospace" fontSize="7" fill={P.gold} letterSpacing="2">HK · SG · TYO</text>

            {/* orbiting nodes */}
            {[
              { label: "PARTNERS",  ang: 0,   r: 90 },
              { label: "CAPITAL",   ang: 90,  r: 90 },
              { label: "AGENTS",    ang: 180, r: 90 },
              { label: "RESEARCH",  ang: 270, r: 90 },
            ].map((n, i) => {
              const rad = (n.ang * Math.PI) / 180;
              const x = 160 + Math.cos(rad) * n.r;
              const y = 130 + Math.sin(rad) * n.r;
              return (
                <g key={n.label}>
                  <circle cx={x} cy={y} r="4" fill={P.gold}>
                    <animate attributeName="opacity" values="0.4;1;0.4" dur={`${3 + i * 0.5}s`} repeatCount="indefinite" />
                  </circle>
                  <circle cx={x} cy={y} r="8" fill="none" stroke={P.gold} strokeOpacity="0.3">
                    <animate attributeName="r" values="6;14;6" dur={`${3 + i * 0.5}s`} repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.4;0;0.4" dur={`${3 + i * 0.5}s`} repeatCount="indefinite" />
                  </circle>
                  <text
                    x={x + (n.ang === 0 ? 12 : n.ang === 180 ? -12 : 0)}
                    y={y + (n.ang === 90 ? 20 : n.ang === 270 ? -10 : 3)}
                    textAnchor={n.ang === 180 ? "end" : n.ang === 0 ? "start" : "middle"}
                    fontFamily="ui-monospace, Consolas, monospace" fontSize="8"
                    fill={accent} letterSpacing="2">{n.label}</text>
                </g>
              );
            })}

            {/* traveling particles along inner orbit */}
            {[0, 0.25, 0.5, 0.75].map((t, i) => (
              <circle key={i} r="2" fill={P.gold}>
                <animateMotion dur="10s" repeatCount="indefinite" begin={`${-t * 10}s`}
                  path="M 160 70 A 60 60 0 1 1 159.9 70" />
              </circle>
            ))}
          </svg>
        </div>
      </div>

      <style>{`
        .gr-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(158,125,63,0.35); }
        .gr-cta-btn:hover .gr-cta-arrow { transform: translateX(6px); }
        @media (max-width: 860px) {
          .gr-cta { grid-template-columns: 1fr !important; }
          .gr-cta-viz { max-width: 320px; margin: 0 auto; }
        }
      `}</style>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ P }) {
  return (
    <footer style={{
      marginTop: "clamp(24px,3vw,48px)",
      display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "clamp(12px,2vw,24px)",
      borderTop: `1px solid ${P.rule}`,
      padding: "24px 0 10px",
      fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase", color: P.muted,
    }} className="gr-footer">
      <div>Goldridge · Est. 2025</div>
      <div style={{ textAlign: "center" }}>AI · Capital · Research</div>
      <div style={{ textAlign: "right" }}>Hong Kong · Singapore · Tokyo</div>
      <style>{`
        @media (max-width: 700px) {
          .gr-footer { grid-template-columns: 1fr !important; text-align: left !important; gap: 8px !important; }
          .gr-footer > div { text-align: left !important; }
        }
      `}</style>
    </footer>
  );
}

// ---------- Tonal band (cream rhythm — two cream tones, no dark sections) ----------
function TonalBand({ P, tone = "kraft", children, pad = "clamp(56px, 7vw, 96px)" }) {
  // Derive a kraft (slightly darker/warmer) cream from palette — works across parchment, bone, coolstone, onyx
  const kraftMap = {
    "#f2ede3": "#e8dfc9", // parchment → warmer kraft
    "#f3eee4": "#ebe2cc", // bone → kraft
    "#e4e6e3": "#d6dad5", // coolstone → dim stone
    "#14110c": "#1c1712", // onyx → slightly lifted onyx
  };
  const bandBg = tone === "kraft" ? (kraftMap[P.bg] || P.surface2) : P.bg;
  const borderTone = P.rule;
  return (
    <div style={{
      position: "relative",
      marginLeft: "calc(50% - 50vw)",
      marginRight: "calc(50% - 50vw)",
      background: bandBg,
      overflow: "hidden",
      padding: `${pad} 0`,
      borderTop: `1px solid ${borderTone}`,
      borderBottom: `1px solid ${borderTone}`,
    }}>
      <div aria-hidden style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(to right, transparent, ${P.gold}66, transparent)`,
      }}>
        <span className="gr-scan-travel" style={{
          position: "absolute", top: "-1px", left: 0, width: "20%", height: 2,
          background: `linear-gradient(to right, transparent, ${P.gold}, transparent)`,
        }} />
      </div>
      <div aria-hidden style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(to right, transparent, ${P.gold}44, transparent)`,
      }} />
      <div style={{
        position: "relative", zIndex: 1,
        margin: "0 auto", width: "100%", maxWidth: 1600,
        padding: "0 clamp(16px, 3vw, 40px)",
      }}>
        {children}
      </div>
    </div>
  );
}

// ---------- Dark band wrapper (kept but no longer used in main composition) ----------
// Full-bleed onyx surface with subtle grain texture. Top/bottom scan-lines animate in on view.
// accent: 'gold' (default) or 'oxblood' — injects a single editorial tone.
function DarkBand({ P, children, accent = "gold", pad = "clamp(56px, 7vw, 96px)" }) {
  const isOx = accent === "oxblood";
  const accentColor = isOx ? "#7a2430" : P.gold;
  const accentGlow  = isOx ? "#9a3040" : P.gold;
  return (
    <div style={{
      position: "relative",
      // Break out of the max-width container on both sides
      marginLeft: "calc(50% - 50vw)",
      marginRight: "calc(50% - 50vw)",
      background: "#0d0a07",
      color: "#f4ecdf",
      overflow: "hidden",
      padding: `${pad} 0`,
      // soft gradient wash
      backgroundImage: `radial-gradient(60% 80% at 20% 10%, ${accentGlow}1a, transparent 50%), radial-gradient(50% 70% at 85% 90%, ${isOx ? "#4a1520" : "#2a1f14"}33, transparent 60%)`,
    }}>
      {/* Grain layer */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.35,
        mixBlendMode: "overlay",
        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
      }} />
      {/* Scan line top */}
      <div aria-hidden className="gr-scan-top" style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(to right, transparent, ${accentColor}, transparent)`,
      }} />
      {/* Scan line bottom */}
      <div aria-hidden className="gr-scan-bot" style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(to right, transparent, ${accentColor}99, transparent)`,
      }} />
      {/* Inner content — centered to the same max-width as main */}
      <div style={{
        position: "relative", zIndex: 1,
        margin: "0 auto", width: "100%", maxWidth: 1600,
        padding: "0 clamp(16px, 3vw, 40px)",
      }}>
        {children}
      </div>
    </div>
  );
}

// ---------- Scan divider between cream sections ----------
function ScanDivider({ P }) {
  return (
    <div aria-hidden style={{
      position: "relative",
      height: 1,
      margin: `clamp(48px, 6vw, 80px) 0`,
      background: `linear-gradient(to right, transparent, ${P.gold}66, transparent)`,
    }}>
      <span className="gr-scan-travel" style={{
        position: "absolute", top: "-1px", left: 0, width: "18%", height: 3,
        background: `linear-gradient(to right, transparent, ${P.gold}, transparent)`,
        filter: "blur(0.5px)",
      }} />
    </div>
  );
}

// ---------- Pull quote (editorial moment on kraft band) ----------
function PullQuote({ P }) {
  const gold    = P.gold;
  const goldSoft= P.gold + "55";
  const ink     = P.ink;
  const muted   = P.muted;
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 40, alignItems: "center",
      maxWidth: 1100, margin: "0 auto",
    }} className="gr-pq">
      {/* Left marker */}
      <div style={{
        fontFamily: "ui-monospace, Consolas, monospace",
        fontSize: 10, letterSpacing: "0.36em", textTransform: "uppercase",
        color: muted, writingMode: "vertical-rl", transform: "rotate(180deg)",
      }}>
        § Intermission · Doctrine
      </div>

      {/* Quote */}
      <blockquote style={{ margin: 0, padding: 0 }}>
        <div aria-hidden style={{
          fontFamily: `"Playfair Display", serif`, fontStyle: "italic",
          fontSize: "clamp(3rem, 7vw, 6rem)", color: goldSoft, lineHeight: 0.6,
          marginBottom: "-0.3em",
        }}>“</div>
        <p style={{
          margin: 0, fontFamily: `"Playfair Display", serif`, fontWeight: 400,
          fontSize: "clamp(1.5rem, 2.6vw, 2.4rem)", lineHeight: 1.2, letterSpacing: "-0.02em",
          color: ink,
        }}>
          The market pays for <em style={{ color: gold, fontWeight: 400 }}>patience</em> and
          <em style={{ color: gold, fontWeight: 400 }}> process</em> — two things most firms
          <span style={{ color: muted }}> trade away before lunch.</span>
        </p>
        <div style={{
          marginTop: 26, display: "flex", alignItems: "center", gap: 14,
          fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase",
          color: muted, fontFamily: "ui-monospace, Consolas, monospace",
        }}>
          <span style={{ width: 36, height: 1, background: goldSoft }} />
          Goldridge · Internal memo № 014
        </div>
      </blockquote>

      {/* Right gauge */}
      <svg viewBox="0 0 120 120" style={{ width: 110, height: 110 }}>
        <circle cx="60" cy="60" r="48" fill="none" stroke={goldSoft} strokeWidth="1" />
        <circle cx="60" cy="60" r="48" fill="none" stroke={gold} strokeWidth="1.5"
          strokeDasharray="226 302" transform="rotate(-90 60 60)" />
        <circle cx="60" cy="60" r="3" fill={gold}>
          <animate attributeName="r" values="2.5;4;2.5" dur="3s" repeatCount="indefinite" />
        </circle>
        <text x="60" y="56" textAnchor="middle" fontFamily="Playfair Display, serif" fontStyle="italic" fontSize="14" fill={ink}>hold</text>
        <text x="60" y="72" textAnchor="middle" fontFamily="ui-monospace, Consolas, monospace" fontSize="7" fill={muted} letterSpacing="2">THRU CYCLE</text>
      </svg>

      <style>{`
        @media (max-width: 800px) {
          .gr-pq { grid-template-columns: 1fr !important; gap: 20px !important; }
          .gr-pq > :first-child { writing-mode: horizontal-tb !important; transform: none !important; }
          .gr-pq > :last-child { justify-self: start; }
        }
      `}</style>
    </div>
  );
}

// ---------- Small primitives ----------
function SectionHeader({ P, eyebrow, index }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      fontSize: 11, letterSpacing: "0.34em", textTransform: "uppercase", color: P.muted,
    }}>
      <span>{eyebrow}</span>
      <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace", letterSpacing: "0.1em" }}>{index}</span>
    </div>
  );
}

function Arrow({ small }) {
  const s = small ? 12 : 16;
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  );
}

function Chevron() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}

// ---------- Tweaks Panel ----------
function TweaksPanel({ P, palette, layout, role, cursor, onTweak }) {
  const paletteOrder = ["parchment", "bone", "coolstone", "onyx"];
  const layoutOrder = ["split", "stacked", "offaxis"];
  const roleOrder = ["center", "background", "corner"];

  const row = { display: "grid", gap: 8, marginBottom: 14 };
  const label = { fontSize: 10, letterSpacing: "0.28em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" };
  const chips = { display: "flex", flexWrap: "wrap", gap: 6 };
  const chip = (active) => ({
    padding: "6px 10px", borderRadius: 999,
    border: `1px solid ${active ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.18)"}`,
    background: active ? "rgba(255,255,255,0.12)" : "transparent",
    color: active ? "#fff" : "rgba(255,255,255,0.75)",
    fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase",
    cursor: "pointer", fontFamily: "Helvetica Neue, Arial, sans-serif",
  });

  return (
    <div style={{
      position: "fixed", right: 16, bottom: 16, zIndex: 1000,
      width: 260,
      background: "rgba(15,12,9,0.92)",
      backdropFilter: "blur(12px)",
      color: "#f4ecdf",
      border: "1px solid rgba(202,164,98,0.35)",
      borderRadius: 16,
      padding: 16,
      fontFamily: "Helvetica Neue, Arial, sans-serif",
      boxShadow: "0 25px 60px rgba(0,0,0,0.45)",
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 10, letterSpacing: "0.34em", textTransform: "uppercase",
        color: "#caa462", marginBottom: 14,
      }}>
        <span>Tweaks</span>
        <span>Goldridge</span>
      </div>

      <div style={row}>
        <div style={label}>Color tone</div>
        <div style={chips}>
          {paletteOrder.map((p) => (
            <button key={p} style={chip(p === palette)} onClick={() => onTweak?.({ palette: p })}>
              {PALETTES[p].name}
            </button>
          ))}
        </div>
      </div>

      <div style={row}>
        <div style={label}>Layout</div>
        <div style={chips}>
          {layoutOrder.map((l) => (
            <button key={l} style={chip(l === layout)} onClick={() => onTweak?.({ layout: l })}>
              {LAYOUTS[l].name}
            </button>
          ))}
        </div>
      </div>

      <div style={row}>
        <div style={label}>3D role</div>
        <div style={chips}>
          {roleOrder.map((r) => (
            <button key={r} style={chip(r === role)} onClick={() => onTweak?.({ role: r })}>
              {r}
            </button>
          ))}
        </div>
      </div>

      <div style={row}>
        <div style={label}>Cursor effect</div>
        <div style={chips}>
          <button style={chip(cursor)} onClick={() => onTweak?.({ cursor: true })}>On</button>
          <button style={chip(!cursor)} onClick={() => onTweak?.({ cursor: false })}>Off</button>
        </div>
      </div>
    </div>
  );
}

// Expose
window.Goldridge = Goldridge;
window.GoldridgePALETTES = PALETTES;