<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="ethraeon-surface" content="true">
<meta name="ethraeon-build-sha" content="4428a3b3">
<meta name="ethraeon-build-timestamp" content="2026-05-29T22:18:10Z">
<meta name="ethraeon-head" content="8c277f00f">
<meta name="ethraeon-deployed" content="2026-05-24T15:40:09Z">
<meta name="ethraeon-directive" content="0768">
<meta name="robots" content="index, follow">
<title>ETHRAEON | AGI-class enterprise systems for sovereign intelligence</title>
<meta name="description" content="ETHRAEON builds AGI-class and ASI-class enterprise systems for sovereign intelligence. Build, govern, and operate autonomous intelligence without surrendering control.">
<meta name="description" content="ETHRAEON builds AGI-class and ASI-class enterprise systems for sovereign intelligence. Operate autonomous systems without surrendering control.">
<meta name="author" content="S. Jason Prohaska (ingombrante)">
<meta property="og:title" content="ETHRAEON · Constitutional Runtime">
<meta property="og:description" content="AGI-class and ASI-class enterprise systems for sovereign intelligence.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ethraeon.ai/">
<meta property="og:site_name" content="ETHRAEON">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ETHRAEON · Constitutional Runtime">
<meta name="twitter:description" content="Sovereign runtime infrastructure with constitutional control and evidence-bound operations.">
<meta name="theme-color" content="#06080f">
<link rel="canonical" href="https://ethraeon.ai/">
<link rel="icon" href="/icons/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/icons/favicon.ico" sizes="32x32 16x16">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">

<style>
/* ============================================================================
   ETHRAEON APEX · EUDS PARALLAX v1.3.1 DESIGN SYSTEM
   Constitutional runtime and evidence control layer
   Copyright 2025-2026 S. Jason Prohaska (ingombrante)
   ============================================================================ */

:root {
  /* EUDS Constitutional Palette */
  --void: #06080f;
  --abyss: #0a0e1a;
  --deep: #0e1225;
  --substrate: #141830;
  --surface: #1a1f3a;
  --elevated: #222844;
  --raised: #2a3050;

  --signal-primary: #00d4ff;
  --signal-secondary: #b794f6;
  --signal-tertiary: #d4a843;
  --signal-vital: #10b981;
  --signal-caution: #f59e0b;

  --gold: #d4a843;
  --gold-glow: rgba(212, 168, 67, 0.18);
  --signal-glow: rgba(0, 212, 255, 0.14);

  --text-primary: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.72);
  --text-tertiary: rgba(245, 245, 247, 0.50);
  --text-muted: rgba(245, 245, 247, 0.32);

  /* Glass morphism */
  --glass-bg: rgba(20, 24, 48, 0.55);
  --glass-bg-hover: rgba(26, 31, 58, 0.78);
  --glass-blur: 24px;
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(0, 212, 255, 0.28);
  --glass-border-gold: rgba(212, 168, 67, 0.32);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Type scale (golden ratio derived) */
  --type-xs: 0.75rem;
  --type-sm: 0.875rem;
  --type-base: 1rem;
  --type-lg: 1.125rem;
  --type-xl: 1.4rem;
  --type-2xl: 2.0rem;
  --type-3xl: 2.8rem;
  --type-4xl: 4.0rem;
  --type-hero: clamp(2.8rem, 7vw, 5.6rem);

  /* Spring physics constants */
  --spring-stiffness: 180;
  --spring-damping: 12;
  --spring-mass: 1;

  /* Bio-inspired easing */
  --ease-breath-in: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-breath-out: cubic-bezier(0.25, 0, 0.35, 1);
  --ease-heartbeat: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-growth: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Duration scale */
  --dur-fast: 150ms;
  --dur-natural: 300ms;
  --dur-breath: 600ms;
  --dur-full-breath: 1200ms;
  --dur-contemplative: 2400ms;

  /* Fibonacci spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-5: 20px;
  --space-8: 32px;
  --space-13: 52px;
  --space-21: 84px;
  --space-34: 136px;
  --space-55: 220px;

  /* Layout */
  --container-max: 1280px;
  --container-prose: 68ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--void);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Harmonic field background (CSS-only ROSETTA-inspired resonance) */
.harmonic-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 14.6% 30%, rgba(0, 212, 255, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 38.2% 70%, rgba(212, 168, 67, 0.040) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 61.8% 25%, rgba(183, 148, 246, 0.035) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 85.4% 65%, rgba(0, 212, 255, 0.040) 0%, transparent 60%),
    var(--void);
  animation: breathe 24s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.92; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* Subtle noise overlay for texture */
.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
}

a { color: var(--signal-primary); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-breath-out); }
a:hover { opacity: 0.82; }

/* === LAYOUT === */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
  position: relative;
  z-index: 10;
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-5); }
}

/* === NAVIGATION === */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  background: rgba(6, 8, 15, 0.72);
  border-bottom: 1px solid var(--glass-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  font-size: var(--type-sm);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.nav-links a {
  color: var(--text-secondary);
  font-weight: 400;
  position: relative;
  padding: var(--space-1) 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--signal-primary);
  transition: width var(--dur-natural) var(--ease-heartbeat);
}

.nav-links a:hover { color: var(--text-primary); opacity: 1; }
.nav-links a:hover::after { width: 100%; }

@media (max-width: 768px) {
  .nav-links { gap: var(--space-5); font-size: var(--type-xs); }
}

@media (max-width: 540px) {
  .nav-links { display: none; }
}

/* === HERO === */
.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-34) var(--space-8) var(--space-21);
  position: relative;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: reveal var(--dur-full-breath) var(--ease-heartbeat) 0.2s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
  color: var(--text-primary);
  max-width: 18ch;
  opacity: 0;
  animation: reveal var(--dur-contemplative) var(--ease-heartbeat) 0.4s forwards;
}

.hero-title .accent {
  background: linear-gradient(135deg, var(--signal-primary), var(--gold) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lede {
  font-family: var(--font-body);
  font-size: var(--type-xl);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
  margin-bottom: var(--space-13);
  opacity: 0;
  animation: reveal var(--dur-contemplative) var(--ease-heartbeat) 0.7s forwards;
}

.hero-cta {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  opacity: 0;
  animation: reveal var(--dur-full-breath) var(--ease-heartbeat) 1.0s forwards;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all var(--dur-natural) var(--ease-spring);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--signal-primary);
  color: var(--void);
  font-weight: 600;
  border-color: var(--signal-primary);
}

.btn-primary:hover {
  background: transparent;
  color: var(--signal-primary);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--signal-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--glass-border-gold);
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--gold-glow);
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === CANON BAR === */
.canon-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-21);
  padding: var(--space-8);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  opacity: 0;
  animation: reveal var(--dur-full-breath) var(--ease-heartbeat) 1.3s forwards;
}

.canon-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.canon-label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.canon-value {
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  color: var(--gold);
  line-height: 1;
}

/* === SECTIONS === */
.section {
  padding: var(--space-55) 0 var(--space-34);
  position: relative;
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--signal-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-8);
  color: var(--text-primary);
  max-width: 22ch;
}

.section-lede {
  font-size: var(--type-lg);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--container-prose);
  margin-bottom: var(--space-21);
}

/* === THESIS PILLARS === */
.thesis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-13);
}

.thesis-card {
  padding: var(--space-8);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  transition: all var(--dur-natural) var(--ease-heartbeat);
}

.thesis-card:hover {
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 48px rgba(0, 212, 255, 0.08);
}

.thesis-number {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--gold);
  letter-spacing: 0.18em;
  margin-bottom: var(--space-3);
}

.thesis-heading {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.thesis-body {
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: var(--type-base);
}

/* === ESTATE METRICS === */
.estate-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  margin: var(--space-13) 0;
  padding: var(--space-13);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.04), rgba(212, 168, 67, 0.04));
  border: 1px solid var(--glass-border-gold);
  border-radius: 4px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.metric-note {
  font-size: var(--type-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: var(--space-2);
}

/* === SURFACE CARDS === */
.surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-13);
}

.surface-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--dur-natural) var(--ease-heartbeat);
  position: relative;
  overflow: hidden;
}

.surface-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  height: 100%;
  background: var(--signal-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-natural) var(--ease-heartbeat);
}

.surface-card:hover {
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  transform: translateY(-4px);
  opacity: 1;
  box-shadow: 0 16px 64px rgba(0, 212, 255, 0.10);
}

.surface-card:hover::before { transform: scaleY(1); }

.surface-card-label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.surface-card-title {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 400;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.surface-card-desc {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: var(--space-5);
}

.surface-card-arrow {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--signal-primary);
  letter-spacing: 0.10em;
  margin-top: auto;
}

/* === SUBSTRATE === */
.substrate-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin: var(--space-13) 0;
  padding: var(--space-8);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
}

.substrate-row { display: flex; flex-direction: column; gap: var(--space-1); }
.substrate-label { color: var(--text-tertiary); font-size: var(--type-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.substrate-value { color: var(--signal-primary); font-size: var(--type-base); }

/* === FOOTER === */
.footer {
  margin-top: var(--space-55);
  padding: var(--space-21) 0;
  border-top: 1px solid var(--glass-border);
  position: relative;
  z-index: 10;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-13);
}

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; }
}

.footer-brand {
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-tertiary);
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.footer-meta div { margin-bottom: var(--space-1); }

.footer-attribution {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  line-height: 1.7;
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--dur-contemplative) var(--ease-heartbeat),
              transform var(--dur-contemplative) var(--ease-heartbeat);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-full-breath) var(--ease-heartbeat),
              transform var(--dur-full-breath) var(--ease-heartbeat);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.75s; opacity: 1; transform: translateY(0); }

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .harmonic-field { animation: none; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* === SR-ONLY === */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
</style>
</head>
<body>
<nav class="ethraeon-crossnav" style="background:#06080f;padding:0.75rem 2rem;display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;border-bottom:1px solid #1a1f2e;font-family:Inter,system-ui,sans-serif;font-size:0.875rem;">
  <a href="/" style="color:#d4a843;text-decoration:none;font-weight:600;">ETHRAEON</a>
  <a href="/enterprise/" style="color:#00d4ff;text-decoration:none;">Enterprise</a>
  <a href="/patents/" style="color:#00d4ff;text-decoration:none;">Patents</a>
  <a href="/packages/" style="color:#00d4ff;text-decoration:none;">Packages</a>
  <a href="/investors/" style="color:#00d4ff;text-decoration:none;">Investors</a>
  <a href="/pricing/" style="color:#00d4ff;text-decoration:none;">Pricing</a>
  <a href="/architecture/" style="color:#00d4ff;text-decoration:none;">Architecture</a>
  <a href="/cockpit/" style="color:#00d4ff;text-decoration:none;">Cockpit</a>
  <a href="/workers/" style="color:#00d4ff;text-decoration:none;">Workers</a>
</nav>


<div class="harmonic-field" aria-hidden="true"></div>
<div class="noise" aria-hidden="true"></div>

<a href="#main" class="sr-only">Skip to main content</a>

<nav class="nav" role="navigation" aria-label="Primary">
  <div class="nav-inner">
    <a href="/" class="nav-brand" aria-label="ETHRAEON home">ETHRAEON</a>
    <ul class="nav-links">
      <li><a href="/architecture/">Architecture</a></li>
      <li><a href="/lyra/">Patent Estate</a></li>
      <li><a href="/investors/">Investors</a></li>
      <li><a href="/contact/">Request Briefing</a></li>
      <li><a href="/papers/">Papers</a></li>
    </ul>
  </div>
</nav>

<main id="main">

  <!-- HERO -->
  <section class="hero container">
    <div class="hero-eyebrow">Enterprise Runtime Platform</div>
    <h1 class="hero-title">
      AGI-class enterprise systems for sovereign intelligence.
    </h1>
    <p class="hero-lede">
      Build, govern, and operate autonomous intelligence without surrendering control. Ethraeon connects sovereign runtime infrastructure, constitutional control, substrate intelligence, and evidence-bound deployment into one enterprise operating layer.
    </p>
    <div class="hero-cta">
      <a class="btn btn-primary" href="/architecture/">Explore the System &raquo;</a>
      <a class="btn btn-secondary" href="/papers/">Read the Papers</a>
    </div>

    <div class="canon-bar" role="region" aria-label="Canonical metrics">
      <div class="canon-item">
        <span class="canon-label">Filed</span>
        <span class="canon-value">16</span>
      </div>
      <div class="canon-item">
        <span class="canon-label">Specifications</span>
        <span class="canon-value">73</span>
      </div>
      <div class="canon-item">
        <span class="canon-label">Families</span>
        <span class="canon-value">9</span>
      </div>
      <div class="canon-item">
        <span class="canon-label">Engines</span>
        <span class="canon-value">47</span>
      </div>
      <div class="canon-item">
        <span class="canon-label">Californium</span>
        <span class="canon-value">1.000</span>
      </div>
      <div class="canon-item">
        <span class="canon-label">DSUM</span>
        <span class="canon-value">6.0</span>
      </div>
    </div>
  </section>

  <!-- THESIS -->
  <section class="section container">
    <div class="reveal">
      <div class="section-eyebrow">Thesis</div>
      <h2 class="section-title">What ETHRAEON is, in five sentences.</h2>
      <p class="section-lede">
        Five propositions hold the architecture. They are the signal language. They do not change.
      </p>
    </div>

    <div class="thesis-grid reveal-stagger">
      <article class="thesis-card">
        <div class="thesis-number">01</div>
        <h3 class="thesis-heading">Governed differentiation</h3>
        <p class="thesis-body">The next moat is not access to AI. Access is commodity. The moat is governance of how intelligence is trusted, constrained, evidenced, and used.</p>
      </article>
      <article class="thesis-card">
        <div class="thesis-number">02</div>
        <h3 class="thesis-heading">Constitutional runtime</h3>
        <p class="thesis-body">Not policy documents. Not advisory frameworks. Executable enforcement at the runtime layer, before the model produces output that matters.</p>
      </article>
      <article class="thesis-card">
        <div class="thesis-number">03</div>
        <h3 class="thesis-heading">Evidence control</h3>
        <p class="thesis-body">Immutable evidence chain. Hash-verified. Append-only. Every consequential decision carries an auditable record.</p>
      </article>
      <article class="thesis-card">
        <div class="thesis-number">04</div>
        <h3 class="thesis-heading">Fail-closed by default</h3>
        <p class="thesis-body">When governance verification cannot complete, the system halts. Permission is never assumed. Audit is never deferred. Closure precedes execution.</p>
      </article>
      <article class="thesis-card">
        <div class="thesis-number">05</div>
        <h3 class="thesis-heading">Human-sovereign</h3>
        <p class="thesis-body">Humanitas ante Machinam. The human authority sits above the machine, not beside it. The system protects the scatter without losing control.</p>
      </article>
    </div>
  </section>

  <!-- PATENT ESTATE -->
  <section class="section container">
    <div class="reveal">
      <div class="section-eyebrow">Patent Estate</div>
      <h2 class="section-title">A cathedral of intellectual property under formal assignment.</h2>
      <p class="section-lede">
        Seventy-three specifications. Sixteen filed with the United States Patent and Trademark Office.
        Nine families spanning constitutional governance, deterministic transformation, and evidence integrity.
      </p>
    </div>

    <div class="estate-row reveal">
      <div class="metric">
        <span class="metric-value">16</span>
        <span class="metric-label">Filed · USPTO</span>
        <span class="metric-note">Ruling 1 · irrevocable</span>
      </div>
      <div class="metric">
        <span class="metric-value">73</span>
        <span class="metric-label">Specifications</span>
        <span class="metric-note">Across 9 families</span>
      </div>
      <div class="metric">
        <span class="metric-value">9</span>
        <span class="metric-label">Families · F1-F9</span>
        <span class="metric-note">Constitutional architecture</span>
      </div>
      <div class="metric">
        <span class="metric-value">$883.3M</span>
        <span class="metric-label">RTP · P90 valuation</span>
        <span class="metric-note">IP-specific asset value</span>
      </div>
    </div>

    <div class="reveal">
      <a class="btn btn-secondary" href="/lyra/">Enter the Lyra Chamber &raquo;</a>
    </div>
  </section>

  <!-- SUBSTRATE -->
  <section class="section container">
    <div class="reveal">
      <div class="section-eyebrow">Substrate</div>
      <h2 class="section-title">Forty-seven engines, seven groups, four substrate states.</h2>
      <p class="section-lede">
        KAIROS time-aware governance. CIPHER constitutional memory. ROSETTA harmonic resonance.
        DELTASUM transformation tracking. SOVRIN authority chain. GENESIS generative substrate.
        PRAXIS executive coordination. VESPER signal layer. CDASA constitutional deterministic application.
      </p>
    </div>

    <div class="substrate-meta reveal-stagger">
      <div class="substrate-row">
        <span class="substrate-label">Chain Root</span>
        <span class="substrate-value">687e0c0f</span>
      </div>
      <div class="substrate-row">
        <span class="substrate-label">Forge</span>
        <span class="substrate-value">0768</span>
      </div>
      <div class="substrate-row">
        <span class="substrate-label">Version</span>
        <span class="substrate-value">v4.7</span>
      </div>
      <div class="substrate-row">
        <span class="substrate-label">Layer 6</span>
        <span class="substrate-value">Constitutional runtime</span>
      </div>
      <div class="substrate-row">
        <span class="substrate-label">Governance</span>
        <span class="substrate-value">T5-RIGID</span>
      </div>
      <div class="substrate-row">
        <span class="substrate-label">Default</span>
        <span class="substrate-value">Fail-closed</span>
      </div>
    </div>

    <div class="reveal">
      <a class="btn btn-secondary" href="/architecture/">Architecture map &raquo;</a>
    </div>
  </section>

  <!-- SURFACES -->
  <section class="section container">
    <div class="reveal">
      <div class="section-eyebrow">Estate</div>
      <h2 class="section-title">Navigate the constitutional estate.</h2>
      <p class="section-lede">
        Each surface is a different aperture into the same architecture. Live data. Current canon. No placeholders.
      </p>
    </div>

    <div class="surface-grid reveal-stagger">
      <a class="surface-card" href="/lyra/">
        <div class="surface-card-label">Patent Estate</div>
        <div class="surface-card-title">Lyra Chamber</div>
        <div class="surface-card-desc">Seventy-three specifications across nine families. Navigable by family and filing record.</div>
        <div class="surface-card-arrow">Enter &raquo;</div>
      </a>
      <a class="surface-card" href="/architecture/">
        <div class="surface-card-label">System Map</div>
        <div class="surface-card-title">Architecture</div>
        <div class="surface-card-desc">Forty-seven engines. Substrate state. Cloudflare Workers, Pages, D1, KV, R2. Truthful mixed state visible.</div>
        <div class="surface-card-arrow">Explore &raquo;</div>
      </a>
      <a class="surface-card" href="/investors/">
        <div class="surface-card-label">Capital</div>
        <div class="surface-card-title">Investors</div>
        <div class="surface-card-desc">Investor-facing overview and briefing materials. Request access if needed.</div>
        <div class="surface-card-arrow">Review &raquo;</div>
      </a>
      <a class="surface-card" href="/dataroom/">
        <div class="surface-card-label">Reference</div>
        <div class="surface-card-title">Data Room</div>
        <div class="surface-card-desc">Briefings. Capital overview. Patent overviews. Whitepapers. All current, all branded, all linked.</div>
        <div class="surface-card-arrow">Open &raquo;</div>
      </a>
      <a class="surface-card" href="/cockpit/">
        <div class="surface-card-label">Operations</div>
        <div class="surface-card-title">Cockpit</div>
        <div class="surface-card-desc">Operational monitoring surface. Access controlled.</div>
        <div class="surface-card-arrow">Watch &raquo;</div>
      </a>
      <a class="surface-card" href="/demo/">
        <div class="surface-card-label">Proof</div>
        <div class="surface-card-title">Demonstrations</div>
        <div class="surface-card-desc">CDASA. Mutation. Sovereign. ROSETTA. Live endpoints with real hash, real time, real build SHA.</div>
        <div class="surface-card-arrow">Verify &raquo;</div>
      </a>
      <a class="surface-card" href="/governance-trace/">
        <div class="surface-card-label">Audit</div>
        <div class="surface-card-title">Governance Trace</div>
        <div class="surface-card-desc">Audit aperture and technical trace surface. Public-safe summary, with deeper details on request.</div>
        <div class="surface-card-arrow">Trace &raquo;</div>
      </a>
    </div>
  </section>

  <!-- DEMO PROOF -->
  <section class="section container">
    <div class="reveal">
      <div class="section-eyebrow">Live Proof</div>
      <h2 class="section-title">The system proves itself.</h2>
      <p class="section-lede">
        Five endpoints carry real cryptographic proof hashes regenerated at every Pages build.
        Real SHA-256 over canonical JSON. Real commit SHA. Real timestamps. No placeholders.
      </p>
    </div>

    <div class="surface-grid reveal-stagger">
      <a class="surface-card" href="/api/demo/cdasa.json">
        <div class="surface-card-label">Endpoint</div>
        <div class="surface-card-title">CDASA</div>
        <div class="surface-card-desc">Constitutional Deterministic Application of System Architecture. Live SHA-256 proof.</div>
        <div class="surface-card-arrow">/api/demo/cdasa.json &raquo;</div>
      </a>
      <a class="surface-card" href="/api/demo/mutation.json">
        <div class="surface-card-label">Endpoint</div>
        <div class="surface-card-title">Mutation</div>
        <div class="surface-card-desc">Transform state journaling. Delta-diff. Verifiable mutation trace.</div>
        <div class="surface-card-arrow">/api/demo/mutation.json &raquo;</div>
      </a>
      <a class="surface-card" href="/api/demo/sovereign.json">
        <div class="surface-card-label">Endpoint</div>
        <div class="surface-card-title">Sovereign</div>
        <div class="surface-card-desc">Authority chain proof. SOVRIN attestation envelope.</div>
        <div class="surface-card-arrow">/api/demo/sovereign.json &raquo;</div>
      </a>
      <a class="surface-card" href="/api/demo/rosetta.json">
        <div class="surface-card-label">Endpoint</div>
        <div class="surface-card-title">ROSETTA</div>
        <div class="surface-card-desc">Harmonic resonance frame. Patent family F3 demonstration surface.</div>
        <div class="surface-card-arrow">/api/demo/rosetta.json &raquo;</div>
      </a>
      <a class="surface-card" href="/api/substrate/health.json">
        <div class="surface-card-label">Endpoint</div>
        <div class="surface-card-title">Substrate Health</div>
        <div class="surface-card-desc">Live substrate inventory. Thirteen rows. Mixed state. Truthful disclosure.</div>
        <div class="surface-card-arrow">/api/substrate/health.json &raquo;</div>
      </a>
      <a class="surface-card" href="/build_meta.json">
        <div class="surface-card-label">Endpoint</div>
        <div class="surface-card-title">Build Meta</div>
        <div class="surface-card-desc">Current build manifest. Commit SHA. Build timestamp. Pages deployment ground truth.</div>
        <div class="surface-card-arrow">/build_meta.json &raquo;</div>
      </a>
    </div>
  </section>

</main>

<footer class="footer">
  <div class="container">
    <div class="footer-inner">
      <div>
        <div class="footer-brand">ETHRAEON</div>
        <div class="footer-tagline">Sovereign intelligence infrastructure for enterprise systems.</div>
        <div class="footer-meta">
          <div>Constitutional runtime and evidence control layer</div>
          <div>Ruling 1: 16 filed patents | 73 specifications | 9 families</div>
          <div>Californium 1.000</div>
        </div>
      </div>
      <div>
        <div class="footer-meta" style="font-size: var(--type-sm); color: var(--text-secondary); margin-bottom: var(--space-5);">
          <strong style="color: var(--gold); font-family: var(--font-display); font-size: var(--type-lg); display: block; margin-bottom: var(--space-2);">Founder</strong>
          S. Jason Prohaska (ingombrante)<br>
          <a href="mailto:jason@ethraeon.systems">jason@ethraeon.systems</a><br>
          ORCID 0009-0008-8254-8411
        </div>
        <div class="footer-meta">
          <div>ETHRAEON Systems</div>
          <div>What wishes to live shall rise.</div>
          <div style="margin-top: var(--space-3);"><a href="/legal/">Legal &amp; constitutional terms</a></div>
        </div>
      </div>
    </div>
    <div class="footer-attribution">
      Copyright 2025-2026 S. Jason Prohaska (ingombrante&copy;). All Rights Reserved.<br>
      Schedule A+ Enhanced IP Firewall Protected. Patent Pending.<br>
      Build 8c277f00f &middot; Deployed 2026-05-24T15:39:37Z
    </div>
  </div>
</footer>

<script>
/* ============================================================================
   EUDS PARALLAX MOTION - Apex Reveal Engine
   IntersectionObserver-driven scroll reveals with spring-curve transitions
   ============================================================================ */
(function() {
  'use strict';

  // Respect reduced-motion
  var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reducedMotion) {
    document.querySelectorAll('.reveal, .reveal-stagger').forEach(function(el) {
      el.classList.add('visible');
    });
    return;
  }

  // Reveal observer - triggers when 15% of element enters viewport
  var revealObserver = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        revealObserver.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.15,
    rootMargin: '0px 0px -80px 0px'
  });

  document.querySelectorAll('.reveal, .reveal-stagger').forEach(function(el) {
    revealObserver.observe(el);
  });

  // Subtle scroll-velocity-aware harmonic field intensity
  var field = document.querySelector('.harmonic-field');
  var lastScroll = window.scrollY;
  var ticking = false;

  function updateField() {
    var delta = Math.abs(window.scrollY - lastScroll);
    var intensity = Math.min(1, delta / 100);
    if (field) {
      field.style.opacity = String(0.92 + intensity * 0.05);
    }
    lastScroll = window.scrollY;
    ticking = false;
  }

  window.addEventListener('scroll', function() {
    if (!ticking) {
      window.requestAnimationFrame(updateField);
      ticking = true;
    }
  }, { passive: true });

  // Expose API for future EUDS_PARALLAX integration
  window.EUDS_PARALLAX = window.EUDS_PARALLAX || {};
  window.EUDS_PARALLAX.apex = {
    version: '1.3.1',
    surface: 'apex',
    reveal: revealObserver
  };
})();
</script>

</body>
</html>
