/* Trimera — single-file landing. React + Tailwind. */
const { useEffect, useRef, useState } = React;

/* ------------------------------------------------------------------ */
/* Icons (inline SVG, stroke-based, lucide-style)                      */
/* ------------------------------------------------------------------ */
const I = ({ d, size = 18, className = "", stroke = 1.6, children }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
       fill="none" stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
    {children || <path d={d} />}
  </svg>
);
const IconShield       = (p) => <I {...p}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></I>;
const IconBook         = (p) => <I {...p}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></I>;
const IconArrowRight   = (p) => <I {...p}><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></I>;
const IconCheck        = (p) => <I {...p}><path d="M20 6L9 17l-5-5"/></I>;
const IconLock         = (p) => <I {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></I>;
const IconDatabase     = (p) => <I {...p}><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></I>;
const IconNetwork      = (p) => <I {...p}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h8M6 8v8M18 8v8M8 18h8"/></I>;
const IconChip         = (p) => <I {...p}><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 9h6v6H9z"/><path d="M3 9h2M3 15h2M19 9h2M19 15h2M9 3v2M15 3v2M9 19v2M15 19v2"/></I>;
const IconLayers       = (p) => <I {...p}><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/><path d="M3 18l9 5 9-5"/></I>;
const IconScale        = (p) => <I {...p}><path d="M12 3v18"/><path d="M3 7h18"/><path d="M6 7l-3 6a4 4 0 0 0 6 0l-3-6z"/><path d="M18 7l-3 6a4 4 0 0 0 6 0l-3-6z"/></I>;
const IconGitBranch    = (p) => <I {...p}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><circle cx="6" cy="18" r="2"/><path d="M6 8v8"/><path d="M18 16v-4a4 4 0 0 0-4-4H8"/></I>;
const IconFingerprint  = (p) => <I {...p}><path d="M12 3a9 9 0 0 0-9 9v1"/><path d="M21 13v-1a9 9 0 0 0-5-8"/><path d="M7 21a10 10 0 0 0 2-5v-4a3 3 0 0 1 6 0v4a10 10 0 0 0 2 5"/><path d="M12 12v5"/></I>;
const IconReceipt      = (p) => <I {...p}><path d="M4 3h16v18l-3-2-3 2-3-2-3 2-3-2-1 2V3z"/><path d="M8 7h8M8 11h8M8 15h5"/></I>;
const IconUsers        = (p) => <I {...p}><circle cx="9" cy="8" r="3"/><path d="M3 21v-1a6 6 0 0 1 12 0v1"/><circle cx="17" cy="9" r="2.5"/><path d="M15 21v-1a5 5 0 0 1 6-4.9"/></I>;
const IconCode         = (p) => <I {...p}><path d="M8 8l-5 4 5 4"/><path d="M16 8l5 4-5 4"/><path d="M14 4l-4 16"/></I>;
const IconCompass      = (p) => <I {...p}><circle cx="12" cy="12" r="9"/><path d="M15 9l-1.5 4.5L9 15l1.5-4.5L15 9z"/></I>;
const IconShieldCheck  = (p) => <I {...p}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></I>;
const IconArchive      = (p) => <I {...p}><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></I>;

/* ------------------------------------------------------------------ */
/* Reveal-on-scroll helper                                             */
/* ------------------------------------------------------------------ */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll("[data-anim]");
    // Initial pass: reveal anything already in (or above) the viewport on mount.
    requestAnimationFrame(() => {
      const vh = window.innerHeight || 800;
      els.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.98) el.classList.add("in");
      });
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0, rootMargin: "0px 0px -5% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ------------------------------------------------------------------ */
/* Nav                                                                  */
/* ------------------------------------------------------------------ */
function Nav() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { href: "#products",     label: "Products" },
    { href: "#architecture", label: "Architecture" },
    { href: "#compliance",   label: "Compliance" },
    { href: "#company",      label: "Company" },
  ];
  return (
    <header className={"fixed top-0 inset-x-0 z-50 transition-all " + (scrolled ? "backdrop-blur-md bg-ink-950/70 border-b border-white/5" : "bg-transparent")}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-2.5 group">
          <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2 L21 7 V17 L12 22 L3 17 V7 Z" fill="none" stroke="#8FA8C3" strokeWidth="1.5"/>
            <path d="M12 2 L21 7 V17 L12 22 Z" fill="rgba(143,168,195,0.10)"/>
            <path d="M12 7 L17 9.5 V14.5 L12 17 L7 14.5 V9.5 Z" fill="none" stroke="#6686A8" strokeWidth="1.2"/>
          </svg>
          <span className="font-serif text-[19px] tracking-tight text-fog-50">Trimera</span>
        </a>

        <nav className="hidden md:flex items-center gap-8 text-[13.5px] text-fog-300">
          {links.map(l => (
            <a key={l.href} href={l.href} className="hover:text-fog-50 transition-colors">{l.label}</a>
          ))}
        </nav>

        <div className="hidden md:flex items-center gap-3">
          <a href="#book" className="group inline-flex items-center gap-2 rounded-md bg-fog-50 text-ink-900 px-4 py-2 text-[13.5px] font-medium hover:bg-white transition-colors">
            Book a call
            <IconArrowRight size={14} className="transition-transform group-hover:translate-x-0.5" />
          </a>
        </div>

        <button className="md:hidden text-fog-200 p-2 -mr-2" onClick={() => setOpen(o => !o)} aria-label="Menu">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            {open
              ? <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>
              : <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>}
          </svg>
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-white/5 bg-ink-950/95 backdrop-blur">
          <div className="px-6 py-5 flex flex-col gap-4">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="text-fog-200 text-[15px]">{l.label}</a>
            ))}
            <a href="#book" onClick={() => setOpen(false)} className="mt-2 inline-flex items-center justify-center gap-2 rounded-md bg-fog-50 text-ink-900 px-4 py-2.5 text-sm font-medium">
              Book a call <IconArrowRight size={14}/>
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */
function HeroDiagram() {
  // Abstract architectural diagram: customer perimeter with two nested products.
  return (
    <svg viewBox="0 0 560 360" className="w-full h-auto" aria-hidden="true">
      <defs>
        <linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#6686A8" stopOpacity="0.35"/>
          <stop offset="1" stopColor="#6686A8" stopOpacity="0.05"/>
        </linearGradient>
        <pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.7" fill="#2A3340"/>
        </pattern>
      </defs>

      {/* outer perimeter — customer VPC */}
      <rect x="20" y="26" width="520" height="308" rx="10" fill="url(#dots)" opacity="0.6"/>
      <rect x="20" y="26" width="520" height="308" rx="10" fill="none" stroke="#3A4453" strokeDasharray="4 4"/>
      <text x="36" y="48" fontFamily="IBM Plex Mono, monospace" fontSize="10.5" fill="#98A0AD" letterSpacing="0.08em">CUSTOMER  VPC / ON-PREMISE</text>

      {/* inner Trimera plane */}
      <rect x="52" y="78" width="456" height="216" rx="8" fill="url(#g1)" stroke="#3B5A7A" strokeOpacity="0.5"/>
      <text x="68" y="98" fontFamily="IBM Plex Mono, monospace" fontSize="10.5" fill="#8FA8C3" letterSpacing="0.08em">TRIMERA  CONTROL  PLANE</text>

      {/* Vault card */}
      <g>
        <rect x="72" y="118" width="200" height="108" rx="6" fill="#0F141B" stroke="#3B5A7A" strokeOpacity="0.6"/>
        <text x="88" y="144" fontFamily="Fraunces, serif" fontSize="18" fill="#F7F8F9">Vault</text>
        <text x="88" y="164" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">decision.log</text>
        <rect x="88" y="178" width="168" height="6" rx="1" fill="#1E2631"/>
        <rect x="88" y="178" width="118" height="6" rx="1" fill="#6686A8"/>
        <rect x="88" y="192" width="168" height="6" rx="1" fill="#1E2631"/>
        <rect x="88" y="192" width="84" height="6" rx="1" fill="#6686A8" opacity="0.7"/>
        <rect x="88" y="206" width="168" height="6" rx="1" fill="#1E2631"/>
        <rect x="88" y="206" width="140" height="6" rx="1" fill="#6686A8" opacity="0.4"/>
      </g>

      {/* Atlas card */}
      <g>
        <rect x="288" y="118" width="200" height="108" rx="6" fill="#0F141B" stroke="#3B5A7A" strokeOpacity="0.6"/>
        <text x="304" y="144" fontFamily="Fraunces, serif" fontSize="18" fill="#F7F8F9">Atlas</text>
        <text x="304" y="164" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">knowledge.graph</text>
        {/* tiny graph */}
        <g stroke="#6686A8" strokeOpacity="0.6" fill="none">
          <line x1="320" y1="190" x2="360" y2="178"/>
          <line x1="360" y1="178" x2="400" y2="198"/>
          <line x1="360" y1="178" x2="390" y2="212"/>
          <line x1="320" y1="190" x2="340" y2="215"/>
          <line x1="400" y1="198" x2="445" y2="190"/>
          <line x1="400" y1="198" x2="430" y2="215"/>
        </g>
        <g fill="#8FA8C3">
          <circle cx="320" cy="190" r="3"/>
          <circle cx="360" cy="178" r="3.5"/>
          <circle cx="400" cy="198" r="3"/>
          <circle cx="340" cy="215" r="2.5"/>
          <circle cx="390" cy="212" r="2.5"/>
          <circle cx="445" cy="190" r="3"/>
          <circle cx="430" cy="215" r="2.5"/>
        </g>
      </g>

      {/* data stores row */}
      <g fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">
        <rect x="72" y="246" width="96" height="32" rx="4" fill="#0F141B" stroke="#2A3340"/>
        <text x="120" y="266" textAnchor="middle">postgres</text>
        <rect x="184" y="246" width="96" height="32" rx="4" fill="#0F141B" stroke="#2A3340"/>
        <text x="232" y="266" textAnchor="middle">neo4j</text>
        <rect x="296" y="246" width="96" height="32" rx="4" fill="#0F141B" stroke="#2A3340"/>
        <text x="344" y="266" textAnchor="middle">redis</text>
        <rect x="408" y="246" width="80" height="32" rx="4" fill="#0F141B" stroke="#2A3340"/>
        <text x="448" y="266" textAnchor="middle">prom/grafana</text>
      </g>

      {/* outbound call */}
      <g>
        <line x1="540" y1="170" x2="556" y2="170" stroke="#3A4453"/>
        <path d="M508 170 L540 170" stroke="#6686A8" strokeDasharray="3 3"/>
        <text x="520" y="162" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#98A0AD">LLM</text>
      </g>
    </svg>
  );
}

function Hero() {
  return (
    <section id="top" className="relative overflow-hidden">
      <div className="absolute inset-0 grid-bg pointer-events-none" />
      <div className="absolute inset-0 hero-vignette pointer-events-none" />
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />

      <div className="relative max-w-[1240px] mx-auto px-6 lg:px-10 pt-36 lg:pt-44 pb-24 lg:pb-32">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-7" data-anim>
            <h1 className="serif-tight text-fog-50 text-[44px] sm:text-[56px] lg:text-[72px]">
              Evidence, not trust,<br/>
              for <em className="not-italic text-accent-300">regulated</em> AI.
            </h1>

            <p className="mt-7 text-fog-300 text-[17px] lg:text-[18px] leading-relaxed max-w-[620px]">
              Trimera is the sovereign memory and audit layer for AI systems in European regulated industries.
              Every decision is logged with cryptographic chain of custody; every answer is grounded in your own knowledge graph. No readable data ever leaves your infrastructure.
            </p>

            <div className="mt-9 flex flex-wrap items-center gap-4">
              <a href="#book" className="group inline-flex items-center gap-2 rounded-md bg-fog-50 text-ink-900 px-5 py-3 text-[14px] font-medium hover:bg-white transition-colors">
                Book a call
                <IconArrowRight size={15} className="transition-transform group-hover:translate-x-0.5" />
              </a>
              <a href="#architecture" className="group inline-flex items-center gap-2 text-fog-200 hover:text-fog-50 px-2 py-3 text-[14px]">
                Read the architecture
                <IconArrowRight size={14} className="transition-transform group-hover:translate-x-0.5 opacity-70" />
              </a>
            </div>

            <div className="mt-14 grid grid-cols-3 gap-8 max-w-[520px]">
              {[
                { k: "Article 12", v: "Decision logging, by design" },
                { k: "On premise", v: "Customer VPC, no egress" },
                { k: "Tamper evident", v: "Hash chained audit trail" },
              ].map(x => (
                <div key={x.k}>
                  <div className="font-mono text-[10.5px] tracking-[0.08em] text-fog-500 uppercase">{x.k}</div>
                  <div className="mt-1.5 text-[13.5px] text-fog-200 leading-snug">{x.v}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="lg:col-span-5" data-anim>
            <div className="relative rounded-xl border border-white/10 bg-ink-900/70 backdrop-blur p-5 shadow-[0_40px_100px_-40px_rgba(102,134,168,0.25)]">
              <div className="flex items-center justify-between pb-3 border-b border-white/5">
                <div className="flex items-center gap-2 font-mono text-[11px] text-fog-400 tracking-wider uppercase">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400/80"></span>
                  sovereign perimeter
                </div>
                <div className="font-mono text-[10.5px] text-fog-500">v3.4</div>
              </div>
              <div className="pt-4">
                <HeroDiagram />
              </div>
              <div className="mt-3 pt-3 border-t border-white/5 font-mono text-[10.5px] text-fog-500 leading-relaxed">
                Readable data remains inside the customer boundary. The only outbound call is a narrow, policy scoped LLM invocation that carries no customer payload.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 pb-10">
        <div className="rule w-full opacity-60" />
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Problem                                                              */
/* ------------------------------------------------------------------ */
function Problem() {
  const items = [
    {
      kicker: "01 — The regulator",
      title: "AI under regulation needs evidence, not trust.",
      body: "The EU AI Act, GDPR, DORA, and NIS2 all converge on the same obligation: show, in retrievable detail, what your systems decided and why. Screenshots and anecdotes are not an audit.",
    },
    {
      kicker: "02 — The vendor problem",
      title: "Most AI tooling routes your data through somebody else's cloud.",
      body: "For a bank, an insurer, or a hospital operating under EU law, that is a non starter. Contractual promises do not substitute for an architectural boundary.",
    },
    {
      kicker: "03 — The knowledge problem",
      title: "Institutional memory is trapped in documents nobody can query.",
      body: "Policies, contracts, clinical guidelines, regulatory filings; answers exist but cannot be cited. Stateless retrieval starts from zero on every question.",
    },
  ];
  return (
    <section className="relative py-28 lg:py-36">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="flex items-end justify-between flex-wrap gap-8 mb-14" data-anim>
          <div className="max-w-2xl">
            <div className="font-mono text-[11px] tracking-[0.12em] text-fog-500 uppercase">The problem</div>
            <h2 className="serif-tight text-fog-50 mt-4 text-[36px] lg:text-[48px] leading-[1.02]">
              Regulated AI has three unsolved obligations. Current tools address none of them together.
            </h2>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-px bg-white/5 rounded-lg overflow-hidden border border-white/5">
          {items.map((it) => (
            <div key={it.kicker} className="bg-ink-950 p-8 lg:p-10" data-anim>
              <div className="font-mono text-[11px] tracking-[0.08em] text-accent-300 uppercase">{it.kicker}</div>
              <h3 className="serif-tight mt-5 text-fog-50 text-[22px] lg:text-[24px] leading-[1.15]">{it.title}</h3>
              <p className="mt-4 text-fog-400 text-[14.5px] leading-relaxed">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Products                                                             */
/* ------------------------------------------------------------------ */
function ProductCard({ eyebrow, name, tagline, bullets, icon: Icon }) {
  return (
    <div className="group relative rounded-xl border border-white/10 bg-gradient-to-b from-ink-900 to-ink-950 p-8 lg:p-10 hover:border-white/20 transition-colors" data-anim>
      <div className="flex items-center justify-between">
        <div className="font-mono text-[11px] tracking-[0.12em] text-accent-300 uppercase">{eyebrow}</div>
        <div className="w-10 h-10 rounded-md border border-white/10 flex items-center justify-center text-accent-300">
          <Icon size={18} />
        </div>
      </div>

      <div className="mt-8">
        <div className="flex items-baseline gap-3">
          <span className="font-serif text-[12px] text-fog-500">Trimera</span>
          <h3 className="serif-tight text-fog-50 text-[40px] lg:text-[48px]">{name}</h3>
        </div>
        <p className="mt-3 text-fog-300 text-[15.5px] max-w-[46ch] leading-relaxed">{tagline}</p>
      </div>

      <ul className="mt-8 space-y-4 border-t border-white/5 pt-6">
        {bullets.map((b) => (
          <li key={b.t} className="flex gap-4">
            <div className="mt-0.5 w-5 h-5 rounded flex items-center justify-center text-accent-300 bg-accent/10 flex-none">
              <IconCheck size={13} />
            </div>
            <div>
              <div className="text-fog-100 text-[14.5px] font-medium">{b.t}</div>
              <div className="text-fog-400 text-[13.5px] leading-relaxed mt-0.5">{b.d}</div>
            </div>
          </li>
        ))}
      </ul>

      <a href="#book" className="mt-8 inline-flex items-center gap-1.5 text-fog-200 hover:text-fog-50 text-[13.5px] group/link">
        Learn more
        <IconArrowRight size={13} className="opacity-70 transition-transform group-hover/link:translate-x-0.5" />
      </a>
    </div>
  );
}

function Products() {
  return (
    <section id="products" className="relative py-28 lg:py-36 border-t border-white/5">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="max-w-2xl mb-14" data-anim>
          <div className="font-mono text-[11px] tracking-[0.12em] text-fog-500 uppercase">Products</div>
          <h2 className="serif-tight text-fog-50 mt-4 text-[36px] lg:text-[48px] leading-[1.02]">
            Two products. One sovereign architecture.
          </h2>
          <p className="mt-5 text-fog-400 text-[15.5px] max-w-[58ch] leading-relaxed">
            Vault and Atlas sell separately and compound together. Same SDK, same deployment, same security review.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-6">
          <ProductCard
            eyebrow="01 · Audit"
            name="Vault"
            icon={IconShieldCheck}
            tagline="The AI flight recorder. Every decision your AI systems make, captured with the evidence a regulator will actually ask for."
            bullets={[
              { t: "Article 12 decision logging",  d: "Inputs, model version, outcome, confidence, human override, timestamp; structured for post market monitoring." },
              { t: "Cryptographic chain of custody", d: "Hash linked, tamper evident log. Exports are verifiable by a regulator without trusting Trimera." },
              { t: "Cost and retrieval attribution", d: "Every token, every retrieved passage, every tool call, accounted for per decision and per system." },
            ]}
          />
          <ProductCard
            eyebrow="02 · Memory"
            name="Atlas"
            icon={IconLayers}
            tagline="A persistent knowledge graph over your institution's own documents. Retrieval that cites its sources and remembers what changed."
            bullets={[
              { t: "Entity and relationship graph", d: "Policies, contracts, and regulatory filings modelled as entities, facts, and temporal relationships, not flat chunks." },
              { t: "Versioning and provenance",     d: "Every answer cites the exact clause in the exact document version that was in force at the time of the query." },
              { t: "Identity aware access",          d: "Permissions inherited from your IdP (Entra, Okta, Keycloak). Users see only what policy permits." },
            ]}
          />
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Architecture                                                         */
/* ------------------------------------------------------------------ */
function ArchitectureDiagram() {
  return (
    <svg viewBox="0 0 960 480" className="w-full h-auto">
      <defs>
        <pattern id="arch-dots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill="#1E2631"/>
        </pattern>
        <linearGradient id="arch-inner" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#13202E" stopOpacity="0.95"/>
          <stop offset="1" stopColor="#0F141B" stopOpacity="1"/>
        </linearGradient>
      </defs>

      {/* Background grid */}
      <rect x="0" y="0" width="960" height="480" fill="url(#arch-dots)" opacity="0.5"/>

      {/* Customer perimeter */}
      <rect x="24" y="36" width="760" height="420" rx="12" fill="#0B1118" stroke="#3A4453" strokeDasharray="5 4"/>
      <g fontFamily="IBM Plex Mono, monospace" fontSize="11" fill="#8FA8C3" letterSpacing="0.1em">
        <text x="44" y="62">CUSTOMER  VPC  /  ON-PREMISE  CLUSTER</text>
      </g>

      {/* Identity provider */}
      <g>
        <rect x="56" y="92" width="180" height="58" rx="6" fill="#101821" stroke="#2A3340"/>
        <text x="72" y="116" fontFamily="IBM Plex Sans, sans-serif" fontSize="13" fill="#F7F8F9">Identity provider</text>
        <text x="72" y="134" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">Entra · Okta · Keycloak</text>
      </g>

      {/* Applications */}
      <g>
        <rect x="56" y="172" width="180" height="58" rx="6" fill="#101821" stroke="#2A3340"/>
        <text x="72" y="196" fontFamily="IBM Plex Sans, sans-serif" fontSize="13" fill="#F7F8F9">Internal apps · agents</text>
        <text x="72" y="214" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">SDK / REST</text>
      </g>

      {/* Documents */}
      <g>
        <rect x="56" y="252" width="180" height="58" rx="6" fill="#101821" stroke="#2A3340"/>
        <text x="72" y="276" fontFamily="IBM Plex Sans, sans-serif" fontSize="13" fill="#F7F8F9">Document sources</text>
        <text x="72" y="294" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">SharePoint · S3 · Confluence</text>
      </g>

      {/* Trimera plane */}
      <rect x="268" y="92" width="484" height="264" rx="10" fill="url(#arch-inner)" stroke="#3B5A7A" strokeOpacity="0.55"/>
      <text x="284" y="114" fontFamily="IBM Plex Mono, monospace" fontSize="11" fill="#8FA8C3" letterSpacing="0.1em">TRIMERA</text>

      {/* Vault box */}
      <g>
        <rect x="296" y="134" width="206" height="92" rx="6" fill="#0C141C" stroke="#3B5A7A" strokeOpacity="0.7"/>
        <text x="312" y="158" fontFamily="Fraunces, serif" fontSize="18" fill="#F7F8F9">Vault</text>
        <text x="312" y="180" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#8FA8C3">decision_log · chain_of_custody</text>
        <text x="312" y="198" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">exports.article12(...)</text>
        <text x="312" y="214" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">retention.ttl = 10y</text>
      </g>

      {/* Atlas box */}
      <g>
        <rect x="518" y="134" width="206" height="92" rx="6" fill="#0C141C" stroke="#3B5A7A" strokeOpacity="0.7"/>
        <text x="534" y="158" fontFamily="Fraunces, serif" fontSize="18" fill="#F7F8F9">Atlas</text>
        <text x="534" y="180" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#8FA8C3">knowledge_graph · provenance</text>
        <text x="534" y="198" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">retrieve(question, as_of)</text>
        <text x="534" y="214" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">acl.resolve(subject)</text>
      </g>

      {/* Datastore row */}
      <g fontFamily="IBM Plex Mono, monospace" fontSize="10.5" fill="#98A0AD">
        {["postgres","neo4j","redis","prometheus","grafana"].map((label, i) => (
          <g key={label}>
            <rect x={296 + i*90} y="246" width="82" height="38" rx="4" fill="#0A1118" stroke="#24303E"/>
            <text x={296 + i*90 + 41} y="270" textAnchor="middle">{label}</text>
          </g>
        ))}
      </g>

      <text x="296" y="312" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#6C7684">no customer data leaves this region</text>

      {/* Connections customer -> Trimera */}
      <g stroke="#3B5A7A" strokeOpacity="0.6" strokeWidth="1.1">
        <path d="M236 121 C 260 121, 268 156, 296 156" fill="none"/>
        <path d="M236 201 C 260 201, 268 180, 296 180" fill="none"/>
        <path d="M236 281 C 270 281, 500 230, 518 200" fill="none"/>
      </g>

      {/* Outbound LLM */}
      <g>
        <line x1="784" y1="180" x2="860" y2="180" stroke="#6686A8" strokeDasharray="4 4"/>
        <rect x="816" y="148" width="120" height="58" rx="6" fill="#101821" stroke="#2A3340"/>
        <text x="832" y="172" fontFamily="IBM Plex Sans, sans-serif" fontSize="13" fill="#F7F8F9">LLM provider</text>
        <text x="832" y="190" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">prompt only · no payload</text>
      </g>
      <text x="790" y="170" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#6C7684">egress</text>

      {/* Export to regulator (internal) */}
      <g>
        <rect x="56" y="332" width="180" height="58" rx="6" fill="#101821" stroke="#2A3340"/>
        <text x="72" y="356" fontFamily="IBM Plex Sans, sans-serif" fontSize="13" fill="#F7F8F9">Compliance console</text>
        <text x="72" y="374" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#98A0AD">audit.export(range)</text>
      </g>
      <path d="M236 361 C 260 361, 270 300, 296 300" fill="none" stroke="#3B5A7A" strokeOpacity="0.55"/>
    </svg>
  );
}

function Architecture() {
  const points = [
    { t: "Readable data stays inside", d: "Documents, decisions, and retrieved passages are persisted only in databases that you operate." },
    { t: "Narrow, policy scoped egress", d: "The only outbound call is a model invocation with redacted context. No customer payload, no training data sharing." },
    { t: "Identity from your IdP",       d: "Access is resolved against your existing Entra, Okta, or Keycloak. Trimera has no user directory of its own." },
    { t: "Ships in your cluster",        d: "Helm chart on Kubernetes, Docker on a bare host, or an air gapped installer for the hardest environments." },
  ];
  return (
    <section id="architecture" className="relative py-28 lg:py-36 border-t border-white/5 bg-[#080C12]">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-14">
          <div className="lg:col-span-4" data-anim>
            <div className="font-mono text-[11px] tracking-[0.12em] text-fog-500 uppercase">Architecture</div>
            <h2 className="serif-tight text-fog-50 mt-4 text-[36px] lg:text-[46px] leading-[1.02]">
              Sovereignty,<br/>enforced by architecture.
            </h2>
            <p className="mt-5 text-fog-400 text-[15px] leading-relaxed">
              Trimera runs entirely inside your perimeter. The boundary is not a promise in a data processing agreement; it is the shape of the system.
            </p>

            <ul className="mt-8 space-y-5">
              {points.map((p) => (
                <li key={p.t} className="border-l border-white/10 pl-4">
                  <div className="text-fog-100 text-[14.5px] font-medium">{p.t}</div>
                  <div className="text-fog-400 text-[13.5px] leading-relaxed mt-1">{p.d}</div>
                </li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-8" data-anim>
            <div className="rounded-xl border border-white/10 bg-ink-950/60 p-4 lg:p-6">
              <ArchitectureDiagram />
            </div>
            <div className="mt-4 font-mono text-[11px] text-fog-500 leading-relaxed max-w-[70ch]">
              Readable data never crosses the customer boundary. Model calls carry a redacted prompt and return text; they do not see your documents, your decisions, or your identities.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Compliance                                                           */
/* ------------------------------------------------------------------ */
function Compliance() {
  const items = [
    { k: "EU AI Act · Article 12", d: "Automatic event recording for high risk AI systems, with traceability built for post market monitoring and regulator inspection." },
    { k: "GDPR",                   d: "Data minimisation and purpose limitation by architecture. No readable personal data is processed outside your controlled environment." },
    { k: "DORA",                   d: "Operational resilience for financial entities: structured incident evidence, ICT third party risk isolation, and testable recovery." },
    { k: "NIS2",                   d: "Supply chain and incident obligations for essential and important entities, supported by auditable, on premise logging." },
    { k: "ISO 27001 alignment",    d: "Control objectives for access, logging, cryptography, and change management mapped to the Trimera deployment." },
  ];
  return (
    <section id="compliance" className="relative py-28 lg:py-36 border-t border-white/5">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="max-w-2xl mb-14" data-anim>
          <div className="font-mono text-[11px] tracking-[0.12em] text-fog-500 uppercase">Compliance</div>
          <h2 className="serif-tight text-fog-50 mt-4 text-[36px] lg:text-[48px] leading-[1.02]">
            Frameworks Trimera was built against.
          </h2>
          <p className="mt-5 text-fog-400 text-[15.5px] max-w-[58ch] leading-relaxed">
            Not badges on a footer. Each framework maps to concrete product behaviour.
          </p>
        </div>

        <ol className="divide-y divide-white/5 border-y border-white/5">
          {items.map((it, i) => (
            <li key={it.k} className="grid grid-cols-12 gap-6 py-6 items-start" data-anim>
              <div className="col-span-12 md:col-span-1 font-mono text-[11px] text-fog-500 pt-1">{String(i + 1).padStart(2, "0")}</div>
              <div className="col-span-12 md:col-span-4 font-serif text-fog-50 text-[20px] leading-tight">{it.k}</div>
              <div className="col-span-12 md:col-span-7 text-fog-400 text-[14.5px] leading-relaxed">{it.d}</div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Personas                                                             */
/* ------------------------------------------------------------------ */
function Personas() {
  const people = [
    {
      role: "Head of AI Governance",
      icon: IconScale,
      lines: [
        "A regulator ready log of every AI decision, with cited evidence and exportable audit packages.",
        "A defensible answer to Article 12, DORA, and GDPR in one place, rather than a spreadsheet and hope.",
      ],
    },
    {
      role: "CISO",
      icon: IconShield,
      lines: [
        "No readable data leaves the perimeter. No third party processor to negotiate, no new egress path to defend.",
        "Identity, access, and logging that plug into your existing IdP and SIEM without a parallel directory.",
      ],
    },
    {
      role: "Head of Engineering",
      icon: IconCode,
      lines: [
        "An SDK that feels like Postgres and Redis, not a black box. Helm chart, metrics, OpenTelemetry, real docs.",
        "A retrieval layer with provenance and versioning, so teams stop rebuilding stateless RAG for every use case.",
      ],
    },
  ];
  return (
    <section id="company" className="relative py-28 lg:py-36 border-t border-white/5 bg-[#080C12]">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="max-w-2xl mb-14" data-anim>
          <div className="font-mono text-[11px] tracking-[0.12em] text-fog-500 uppercase">Who it is for</div>
          <h2 className="serif-tight text-fog-50 mt-4 text-[36px] lg:text-[48px] leading-[1.02]">
            Three people across one desk.
          </h2>
        </div>

        <div className="grid md:grid-cols-3 gap-6">
          {people.map(({ role, icon: Icon, lines }) => (
            <div key={role} className="rounded-xl border border-white/10 bg-ink-900/40 p-7 lg:p-8" data-anim>
              <div className="w-10 h-10 rounded-md border border-white/10 flex items-center justify-center text-accent-300">
                <Icon size={18}/>
              </div>
              <h3 className="serif-tight mt-6 text-fog-50 text-[24px]">{role}</h3>
              <ul className="mt-5 space-y-3">
                {lines.map((l, i) => (
                  <li key={i} className="text-fog-400 text-[14px] leading-relaxed flex gap-3">
                    <span className="text-accent-300 mt-2 w-1 h-1 rounded-full bg-accent-300 flex-none" />
                    {l}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Final CTA                                                            */
/* ------------------------------------------------------------------ */
function FinalCTA() {
  return (
    <section id="book" className="relative py-28 lg:py-36 border-t border-white/5">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-[#101A26] to-[#0A0E14] px-8 lg:px-16 py-16 lg:py-24" data-anim>
          <div className="absolute inset-0 grid-bg opacity-60 pointer-events-none"/>
          <div className="absolute -top-20 -right-20 w-[380px] h-[380px] rounded-full bg-accent/20 blur-3xl pointer-events-none"/>

          <div className="relative max-w-[780px]">
            <div className="font-mono text-[11px] tracking-[0.12em] text-accent-300 uppercase">Qualified buyers only</div>
            <h2 className="serif-tight text-fog-50 mt-5 text-[40px] lg:text-[60px] leading-[1.0]">
              Thirty minutes with the people who will build it with you.
            </h2>
            <p className="mt-6 text-fog-300 text-[16px] leading-relaxed max-w-[620px]">
              If you operate AI under the EU AI Act, GDPR, DORA, or NIS2 and you need an audit and memory layer that stays inside your perimeter, we should talk. No sales engineer theatre.
            </p>
            <div className="mt-9 flex flex-wrap items-center gap-4">
              <a href="#book" className="group inline-flex items-center gap-2 rounded-md bg-fog-50 text-ink-900 px-5 py-3 text-[14px] font-medium hover:bg-white transition-colors">
                Book a call
                <IconArrowRight size={15} className="transition-transform group-hover:translate-x-0.5" />
              </a>
              <a href="#architecture" className="text-fog-300 hover:text-fog-50 text-[14px]">Or re read the architecture</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */
function Footer() {
  return (
    <footer className="border-t border-white/5">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 py-14 lg:py-16 grid md:grid-cols-12 gap-10">
        <div className="md:col-span-5">
          <div className="flex items-center gap-2.5">
            <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 2 L21 7 V17 L12 22 L3 17 V7 Z" fill="none" stroke="#8FA8C3" strokeWidth="1.5"/>
              <path d="M12 7 L17 9.5 V14.5 L12 17 L7 14.5 V9.5 Z" fill="none" stroke="#6686A8" strokeWidth="1.2"/>
            </svg>
            <span className="font-serif text-[19px] text-fog-50">Trimera</span>
          </div>
          <p className="mt-4 text-fog-400 text-[13.5px] leading-relaxed max-w-[42ch]">
            Sovereign AI memory and audit for European regulated enterprises. Built in Europe, deployed in your perimeter.
          </p>
          <div className="mt-6 font-mono text-[11.5px] text-fog-500 leading-relaxed">
            hello@trimera.eu
          </div>
        </div>

        <div className="md:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
          <div>
            <div className="font-mono text-[10.5px] tracking-[0.12em] text-fog-500 uppercase mb-3">Product</div>
            <ul className="space-y-2 text-[13.5px]">
              <li><a className="text-fog-300 hover:text-fog-50" href="#products">Vault</a></li>
              <li><a className="text-fog-300 hover:text-fog-50" href="#products">Atlas</a></li>
              <li><a className="text-fog-300 hover:text-fog-50" href="#architecture">Architecture</a></li>
            </ul>
          </div>
          <div>
            <div className="font-mono text-[10.5px] tracking-[0.12em] text-fog-500 uppercase mb-3">Company</div>
            <ul className="space-y-2 text-[13.5px]">
              <li><a className="text-fog-300 hover:text-fog-50" href="#company">About</a></li>
              <li><a className="text-fog-300 hover:text-fog-50" href="#compliance">Compliance</a></li>
              <li><a className="text-fog-300 hover:text-fog-50" href="#book">Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="font-mono text-[10.5px] tracking-[0.12em] text-fog-500 uppercase mb-3">Trust</div>
            <ul className="space-y-2 text-[13.5px]">
              <li><a className="text-fog-300 hover:text-fog-50" href="#">Privacy</a></li>
              <li><a className="text-fog-300 hover:text-fog-50" href="#">Security</a></li>
              <li><a className="text-fog-300 hover:text-fog-50" href="#">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div className="border-t border-white/5">
        <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-14 flex items-center justify-between">
          <div className="font-mono text-[11px] text-fog-500">© 2026 Trimera. All rights reserved.</div>
          <div className="font-mono text-[11px] text-fog-500">EU · NL · DE · AT</div>
        </div>
      </div>
    </footer>
  );
}

/* ------------------------------------------------------------------ */
/* App                                                                  */
/* ------------------------------------------------------------------ */
function App() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Products />
        <Architecture />
        <Compliance />
        <Personas />
        <FinalCTA />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
