<!DOCTYPE html>
<!--
  EUDS APPLE-GRADE PARALLAX MODULE v1.3.1
  ETHRAEON Universal Design System - Foundational Motion Substrate
  
  Copyright 2024-2026 S. Jason Prohaska (ingombrante)
  All Rights Reserved - Schedule A+ Protected
  Patent Pending: Constitutional Motion Governance Architecture
  
  CONSTITUTIONAL COMPLIANCE: VERIFIED
  T5-RIGIDITY: ENFORCED
  FOUNDER'S LAW: OPERATIONAL (not conceptual)
  
  CANONICAL METRICS (Phase 06 RUNA):
  - 70+ Operational Systems across 12 Tiers
  - 16 Filed USPTO Provisional Patents
  - 73 Total Patent Portfolio (73 specs / 16 filed / 9 families)
  - Published Research (open access)
  - ATLAS-C 9-Engine Constellation
  - 71 Ollama AI Models (sovereign)
  - 11+ Active Domains
  
  HUMANITAS ANTE MACHINAM
  
  This module implements:
  - Physics-based motion (spring dynamics, damping, inertia)
  - Fibonacci/Golden Ratio depth scaling
  - Harmonic resonance visualization (per ROSETTA patents)
  - Neurodiversity-optimized motion control
  - Semiotic layer integration (glyph-triggered animation)
  - Constitutional safety barriers (VELKOR integration)
  - Performance-adaptive rendering (GPU/battery/device aware)
  - WCAG 2.1 AA+ accessibility
  - Cross-browser consistency
  - Progressive enhancement (CSS-only fallback)
-->
<html lang="en" data-lang="en" dir="ltr">

<head>
  <meta name="ethraeon-surface" content="true">
  <meta name="ethraeon-build-sha" content="9067334a8">
  <meta name="ethraeon-build-timestamp" content="2026-05-26T19:21:50Z">
  <meta name="ethraeon-canonical-framing"
    content="ETHRAEON :: constitutional runtime and evidence control layer for AI systems :: 16 filed with USPTO :: 73 specifications :: 9 families :: above AGI above ASI quantum enterprise throne singular">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ETHRAEON - Humanity Before the Machine</title>
  <meta name="description"
    content="ETHRAEON Universal Design System - Apple-Grade Parallax Module with Constitutional Motion Governance">
  <meta name="author" content="S. Jason Prohaska (ingombrante)">
  <meta property="og:title" content="ETHRAEON | Humanity Before the Machine">
  <meta property="og:description"
    content="constitutional runtime and evidence control layer. 73 patent specifications. 76+ AGI-class systems. T5-RIGID enforcement.">
  <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">
  <meta name="twitter:title" content="ETHRAEON | Humanity Before the Machine">
  <link rel="canonical" href="https://ethraeon.ai/">

  <!-- Preload critical fonts -->
  <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+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display&family=JetBrains+Mono:wght@300;400;500&display=swap"
    rel="stylesheet">

  <style>
    /* ============================================================================
   EUDS PARALLAX MODULE - CSS FOUNDATION
   Constitutional Design Tokens + Physics Constants + Fibonacci Scale
   ============================================================================ */

    /* --- MATHEMATICAL CONSTANTS (Fibonacci / Golden Ratio) --- */
    :root {
      /* Golden Ratio */
      --phi: 1.6180339887;
      --phi-inv: 0.6180339887;
      --phi-sq: 2.6180339887;

      /* Fibonacci Sequence (normalized to design scale) */
      --fib-1: 1;
      --fib-2: 1;
      --fib-3: 2;
      --fib-5: 3;
      --fib-8: 5;
      --fib-13: 8;
      --fib-21: 13;
      --fib-34: 21;
      --fib-55: 34;
      --fib-89: 55;

      /* Fibonacci Spacing Scale (px, derived from 8pt base * Fibonacci ratios) */
      --fib-space-1: 4px;
      /* 8 * 0.5 */
      --fib-space-2: 8px;
      /* 8 * 1 */
      --fib-space-3: 12px;
      /* 8 * 1.5 */
      --fib-space-5: 20px;
      /* 8 * 2.5 */
      --fib-space-8: 32px;
      /* 8 * 4 */
      --fib-space-13: 52px;
      /* 8 * 6.5 */
      --fib-space-21: 84px;
      /* 8 * 10.5 */
      --fib-space-34: 136px;
      /* 8 * 17 */
      --fib-space-55: 220px;
      /* 8 * 27.5 */
      --fib-space-89: 356px;
      /* 8 * 44.5 */

      /* --- PHYSICS ENGINE CONSTANTS --- */
      --spring-stiffness: 180;
      /* N/m - default spring constant */
      --spring-damping: 12;
      /* Ns/m - critical damping coefficient */
      --spring-mass: 1;
      /* kg - virtual mass */
      --gravity: 9.81;
      /* m/s^2 */
      --friction-coefficient: 0.15;
      /* kinetic friction */
      --inertia-decay: 0.94;
      /* momentum decay per frame */
      --velocity-threshold: 0.001;
      /* px/ms - minimum velocity before stop */

      /* --- PARALLAX DEPTH LAYERS (Golden Ratio Scaled) --- */
      --depth-background: 0.15;
      /* Deepest, slowest */
      --depth-far: 0.30;
      /* phi^-3 scaled */
      --depth-mid-far: 0.48;
      /* phi^-2 scaled */
      --depth-mid: 0.62;
      /* phi^-1 (inverse golden ratio) */
      --depth-mid-near: 0.76;
      /* 1 - phi^-2 */
      --depth-near: 0.88;
      /* Near foreground */
      --depth-foreground: 1.0;
      /* Direct scroll speed */
      --depth-overlay: 1.15;
      /* Faster than scroll (parallax forward) */

      /* Perspective for 3D depth */
      --perspective-distance: 1200px;
      --perspective-origin-x: 50%;
      --perspective-origin-y: 40%;
      /* Slightly above center - more natural */

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

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

      /* Harmonic accent colors (derived from light spectrum / ROSETTA resonance) */
      --harmonic-root: #00d4ff;
      /* 480nm wavelength analog */
      --harmonic-third: #7c6aef;
      /* Major third interval */
      --harmonic-fifth: #c084fc;
      /* Perfect fifth interval */
      --harmonic-octave: #f472b6;
      /* Octave harmonic */
      --harmonic-gold: #d4a574;
      /* Golden frequency */

      /* Glass morphism */
      --glass-bg: rgba(20, 24, 48, 0.65);
      --glass-bg-hover: rgba(26, 31, 58, 0.80);
      --glass-blur: 24px;
      --glass-border: rgba(255, 255, 255, 0.08);
      --glass-border-hover: rgba(0, 212, 255, 0.15);
      --glass-glow: 0 0 40px rgba(0, 212, 255, 0.06);

      /* --- TYPOGRAPHY (Harmonic Scale) --- */
      --font-display: 'DM Serif Display', Georgia, serif;
      --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

      /* Type scale based on golden ratio multiplier */
      --type-xs: 0.75rem;
      --type-sm: 0.875rem;
      --type-base: 1rem;
      --type-lg: 1.125rem;
      --type-xl: calc(1rem * var(--phi));
      /* ~1.618rem */
      --type-2xl: calc(1rem * var(--phi-sq));
      /* ~2.618rem */
      --type-3xl: calc(1rem * var(--phi) * var(--phi));
      /* ~2.618rem */
      --type-4xl: calc(1rem * var(--phi) * var(--phi-sq));
      /* ~4.236rem */
      --type-hero: clamp(2.5rem, 6vw, 5rem);

      /* --- MOTION TOKENS --- */
      /* Organic easing (bio-inspired) */
      --ease-breath-in: cubic-bezier(0.45, 0, 0.55, 1);
      /* Inhale */
      --ease-breath-out: cubic-bezier(0.25, 0, 0.35, 1);
      /* Exhale */
      --ease-heartbeat: cubic-bezier(0.22, 1, 0.36, 1);
      /* Systolic */
      --ease-growth: cubic-bezier(0.34, 1.56, 0.64, 1);
      /* Natural overshoot */
      --ease-decay: cubic-bezier(0.55, 0, 1, 0.45);
      /* Natural decay */
      --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
      /* Spring bounce */
      --ease-gravity: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      /* Gravitational fall */

      /* Duration scale (aligned to human perception thresholds) */
      --dur-instant: 50ms;
      /* Below perception */
      --dur-fast: 150ms;
      /* Perceived as instant */
      --dur-natural: 300ms;
      /* Natural response */
      --dur-breath: 600ms;
      /* One half-breath */
      --dur-full-breath: 1200ms;
      /* Full breath cycle */
      --dur-contemplative: 2400ms;
      /* Reflective pace */
      --dur-meditative: 4800ms;
      /* Deep observation */

      /* --- Z-INDEX DEPTH ARCHITECTURE --- */
      --z-void: -100;
      --z-background: 0;
      --z-far: 10;
      --z-mid-far: 20;
      --z-mid: 30;
      --z-mid-near: 40;
      --z-near: 50;
      --z-foreground: 60;
      --z-overlay: 70;
      --z-interface: 100;
      --z-header: 200;
      --z-modal: 500;
      --z-notification: 800;
      --z-apex: 1000;
      /* APEX SACRED - highest z */

      /* --- NEURODIVERSITY MOTION CONTROL --- */
      --motion-intensity: 1;
      /* 0 = none, 0.5 = reduced, 1 = full */
      --motion-speed: 1;
      /* Multiplier for durations */
      --motion-complexity: 1;
      /* 0 = simple, 1 = full complexity */
      --motion-rotation: 1;
      /* 0 = no rotation (vestibular safe) */

      /* --- PERFORMANCE BUDGET --- */
      --target-fps: 60;
      --frame-budget: 16.67ms;
      /* 1000ms / 60fps */
      --paint-budget: 10ms;
      /* Leave headroom for compositing */
      --max-active-layers: 12;
      /* GPU memory constraint */

      /* --- BREAKPOINTS --- */
      --bp-xs: 320px;
      --bp-sm: 640px;
      --bp-md: 768px;
      --bp-lg: 1024px;
      --bp-xl: 1280px;
      --bp-2xl: 1536px;
      --bp-ultra: 2560px;
    }

    /* ============================================================================
   ACCESSIBILITY: REDUCED MOTION
   Respects prefers-reduced-motion at system level
   Granular control via data-motion-level attribute
   ============================================================================ */

    @media (prefers-reduced-motion: reduce) {
      :root {
        --motion-intensity: 0;
        --motion-speed: 0;
        --motion-complexity: 0;
        --motion-rotation: 0;
      }

      .parallax-layer {
        transform: none !important;
        transition: opacity 200ms ease !important;
      }

      .parallax-container {
        perspective: none !important;
      }
    }

    /* Granular motion control levels */
    [data-motion-level="none"] {
      --motion-intensity: 0;
      --motion-speed: 0;
      --motion-complexity: 0;
      --motion-rotation: 0;
    }

    [data-motion-level="minimal"] {
      --motion-intensity: 0.25;
      --motion-speed: 1.5;
      --motion-complexity: 0.2;
      --motion-rotation: 0;
    }

    [data-motion-level="reduced"] {
      --motion-intensity: 0.5;
      --motion-speed: 1.2;
      --motion-complexity: 0.5;
      --motion-rotation: 0.3;
    }

    [data-motion-level="full"] {
      --motion-intensity: 1;
      --motion-speed: 1;
      --motion-complexity: 1;
      --motion-rotation: 1;
    }

    /* ============================================================================
   PARALLAX CONTAINER - Primary Layout Structure
   ============================================================================ */

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

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: 'kern' 1, 'liga' 1;
    }

    body {
      font-family: var(--font-body);
      background: var(--void);
      color: rgba(255, 255, 255, 0.88);
      line-height: 1.618;
      /* Golden ratio */
      overflow-x: hidden;
      min-height: 100vh;
    }

    .parallax-viewport {
      position: relative;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .parallax-container {
      position: relative;
      perspective: var(--perspective-distance);
      perspective-origin: var(--perspective-origin-x) var(--perspective-origin-y);
      transform-style: preserve-3d;
    }

    /* ============================================================================
   PARALLAX DEPTH LAYERS
   Golden-ratio scaled depth with blur/opacity gradients
   ============================================================================ */

    .parallax-layer {
      position: absolute;
      inset: 0;
      will-change: transform;
      backface-visibility: hidden;
      transform: translateZ(0);
      /* Force GPU layer */
    }

    .parallax-layer--background {
      z-index: var(--z-background);
      --layer-depth: var(--depth-background);
      --layer-blur: 4px;
      --layer-opacity: 0.4;
    }

    .parallax-layer--far {
      z-index: var(--z-far);
      --layer-depth: var(--depth-far);
      --layer-blur: 2px;
      --layer-opacity: 0.6;
    }

    .parallax-layer--mid-far {
      z-index: var(--z-mid-far);
      --layer-depth: var(--depth-mid-far);
      --layer-blur: 1px;
      --layer-opacity: 0.75;
    }

    .parallax-layer--mid {
      z-index: var(--z-mid);
      --layer-depth: var(--depth-mid);
      --layer-blur: 0px;
      --layer-opacity: 0.88;
    }

    .parallax-layer--mid-near {
      z-index: var(--z-mid-near);
      --layer-depth: var(--depth-mid-near);
      --layer-blur: 0px;
      --layer-opacity: 0.94;
    }

    .parallax-layer--near {
      z-index: var(--z-near);
      --layer-depth: var(--depth-near);
      --layer-blur: 0px;
      --layer-opacity: 1;
    }

    .parallax-layer--foreground {
      z-index: var(--z-foreground);
      --layer-depth: var(--depth-foreground);
      --layer-blur: 0px;
      --layer-opacity: 1;
    }

    .parallax-layer--overlay {
      z-index: var(--z-overlay);
      --layer-depth: var(--depth-overlay);
      --layer-blur: 0px;
      --layer-opacity: 1;
    }

    /* ============================================================================
   PARALLAX SECTIONS - Scroll-triggered content areas
   ============================================================================ */

    .parallax-section {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: var(--fib-space-34) var(--fib-space-13);
      overflow: hidden;
    }

    .parallax-section::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: opacity var(--dur-breath) var(--ease-breath-out);
    }

    .parallax-section[data-visible="true"]::before {
      opacity: 1;
    }

    /* ============================================================================
   HARMONIC FIELD - Background resonance visualization
   Per ROSETTA patent: resonance-driven meaning generation
   ============================================================================ */

    .harmonic-field {
      position: fixed;
      inset: 0;
      z-index: var(--z-void);
      pointer-events: none;
      overflow: hidden;
    }

    .harmonic-field__canvas {
      width: 100%;
      height: 100%;
    }

    /* CSS-only harmonic field fallback (no JS) */
    .harmonic-field--css {
      background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(183, 148, 246, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 215, 0, 0.015) 0%, transparent 50%);
      animation: harmonicPulse var(--dur-meditative) var(--ease-breath-in) infinite alternate;
    }

    @keyframes harmonicPulse {
      0% {
        background:
          radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
          radial-gradient(ellipse at 80% 20%, rgba(183, 148, 246, 0.02) 0%, transparent 50%),
          radial-gradient(ellipse at 50% 80%, rgba(255, 215, 0, 0.015) 0%, transparent 50%);
      }

      100% {
        background:
          radial-gradient(ellipse at 30% 40%, rgba(0, 212, 255, 0.04) 0%, transparent 55%),
          radial-gradient(ellipse at 70% 30%, rgba(183, 148, 246, 0.03) 0%, transparent 55%),
          radial-gradient(ellipse at 45% 75%, rgba(255, 215, 0, 0.02) 0%, transparent 55%);
      }
    }

    /* Fractal grain texture overlay */
    .harmonic-field__grain {
      position: absolute;
      inset: 0;
      opacity: 0.035;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 256px 256px;
    }

    /* ============================================================================
   SCROLL-REVEAL ANIMATIONS
   IntersectionObserver-driven, respects motion preferences
   ============================================================================ */

    .reveal {
      opacity: 1;
      transform: translateY(calc(40px * var(--motion-intensity)));
      transition:
        opacity calc(var(--dur-breath) * var(--motion-speed)) var(--ease-heartbeat),
        transform calc(var(--dur-breath) * var(--motion-speed)) var(--ease-heartbeat);
    }

    .reveal[data-visible="true"] {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal--scale {
      opacity: 1;
      transform: scale(calc(1 - 0.05 * var(--motion-intensity)));
    }

    .reveal--scale[data-visible="true"] {
      opacity: 1;
      transform: scale(1);
    }

    .reveal--left {
      opacity: 1;
      transform: translateX(calc(-60px * var(--motion-intensity)));
    }

    .reveal--left[data-visible="true"] {
      opacity: 1;
      transform: translateX(0);
    }

    .reveal--right {
      opacity: 1;
      transform: translateX(calc(60px * var(--motion-intensity)));
    }

    .reveal--right[data-visible="true"] {
      opacity: 1;
      transform: translateX(0);
    }

    /* Stagger children */
    .reveal-stagger>* {
      opacity: 0;
      transform: translateY(calc(30px * var(--motion-intensity)));
      transition:
        opacity calc(var(--dur-breath) * var(--motion-speed)) var(--ease-heartbeat),
        transform calc(var(--dur-breath) * var(--motion-speed)) var(--ease-heartbeat);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(1) {
      transition-delay: 0ms;
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(2) {
      transition-delay: 80ms;
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(3) {
      transition-delay: 160ms;
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(4) {
      transition-delay: 240ms;
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(5) {
      transition-delay: 320ms;
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(6) {
      transition-delay: 400ms;
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(7) {
      transition-delay: 480ms;
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-stagger[data-visible="true"]>*:nth-child(8) {
      transition-delay: 560ms;
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================================
   GLASS MORPHISM COMPONENTS (Constitutional Design Language)
   ============================================================================ */

    .glass-panel {
      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: 16px;
      box-shadow: var(--glass-glow);
      transition:
        border-color var(--dur-natural) var(--ease-breath-out),
        box-shadow var(--dur-natural) var(--ease-breath-out),
        background var(--dur-natural) var(--ease-breath-out);
    }

    .glass-panel:hover {
      border-color: var(--glass-border-hover);
      background: var(--glass-bg-hover);
      box-shadow: 0 0 60px rgba(0, 212, 255, 0.08);
    }

    /* ============================================================================
   SEMIOTIC SIGIL ANIMATIONS
   Per ROSETTA: Symbol-meaning bridge architecture
   Glyphs: triangle-up (trace), alchemical-earth, delta, sigma, omega
   ============================================================================ */

    .sigil {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      color: var(--harmonic-root);
      opacity: 0.7;
      transition:
        opacity var(--dur-natural) var(--ease-breath-out),
        color var(--dur-natural) var(--ease-breath-out),
        text-shadow var(--dur-natural) var(--ease-breath-out);
    }

    .sigil:hover,
    .sigil[data-resonant="true"] {
      opacity: 1;
      text-shadow: 0 0 20px currentColor;
    }

    .sigil--trace {
      color: var(--harmonic-root);
    }

    .sigil--delta {
      color: var(--harmonic-third);
    }

    .sigil--sigma {
      color: var(--harmonic-fifth);
    }

    .sigil--omega {
      color: var(--harmonic-octave);
    }

    .sigil--earth {
      color: var(--harmonic-gold);
    }

    /* Sigil activation animation */
    @keyframes sigilActivate {
      0% {
        opacity: 0.5;
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
      }

      50% {
        opacity: 1;
        transform: scale(calc(1 + 0.15 * var(--motion-intensity)));
        text-shadow: 0 0 30px currentColor;
      }

      100% {
        opacity: 0.8;
        transform: scale(1);
        text-shadow: 0 0 12px currentColor;
      }
    }

    .sigil[data-activating="true"] {
      animation: sigilActivate calc(var(--dur-full-breath) * var(--motion-speed)) var(--ease-heartbeat) forwards;
    }

    /* ============================================================================
   DEMONSTRATION LAYOUT
   Showcases all parallax capabilities in operational state
   ============================================================================ */

    /* --- HEADER (APEX SACRED) --- */
    .apex-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: var(--z-apex);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--fib-space-5) var(--fib-space-13);
      background: rgba(6, 8, 15, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .apex-logo {
      font-family: var(--font-display);
      font-size: var(--type-lg);
      color: var(--signal-primary);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
    }

    .apex-nav {
      display: flex;
      gap: var(--fib-space-8);
      align-items: center;
    }

    .apex-nav__link {
      font-family: var(--font-body);
      font-size: var(--type-sm);
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: color var(--dur-fast) var(--ease-breath-out);
      position: relative;
    }

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

    .apex-nav__link:hover {
      color: rgba(255, 255, 255, 0.95);
    }

    .apex-nav__link:hover::after {
      width: 100%;
    }

    .apex-nav__cta {
      font-family: var(--font-body);
      font-size: var(--type-xs);
      font-weight: 600;
      color: var(--void);
      background: var(--signal-primary);
      padding: 8px 20px;
      border-radius: 6px;
      text-decoration: none;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition:
        background var(--dur-fast) var(--ease-breath-out),
        transform var(--dur-fast) var(--ease-spring);
    }

    .apex-nav__cta:hover {
      background: #33ddff;
      transform: translateY(-1px);
    }

    /* --- HERO SECTION --- */
    .section-hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      padding-top: 80px;
    }

    .hero__pre {
      font-family: var(--font-mono);
      font-size: var(--type-xs);
      font-weight: 400;
      color: var(--signal-primary);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      margin-bottom: var(--fib-space-8);
      opacity: 0.8;
    }

    .hero__title {
      font-family: var(--font-display);
      font-size: var(--type-hero);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.95);
      line-height: 1.1;
      max-width: 14ch;
      margin-bottom: var(--fib-space-8);
    }

    .hero__subtitle {
      font-family: var(--font-body);
      font-size: var(--type-lg);
      font-weight: 300;
      color: rgba(255, 255, 255, 0.55);
      max-width: 48ch;
      line-height: var(--phi);
      margin-bottom: var(--fib-space-13);
    }

    .hero__sigils {
      display: flex;
      gap: var(--fib-space-8);
      font-size: var(--type-xl);
    }

    /* Scroll indicator */
    .scroll-indicator {
      position: absolute;
      bottom: var(--fib-space-13);
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--fib-space-3);
      opacity: 0.4;
      animation: scrollHint 2s var(--ease-breath-in) infinite;
    }

    .scroll-indicator__line {
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, transparent, var(--signal-primary));
    }

    .scroll-indicator__text {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--signal-primary);
    }

    @keyframes scrollHint {

      0%,
      100% {
        opacity: 0.4;
        transform: translateX(-50%) translateY(0);
      }

      50% {
        opacity: 0.7;
        transform: translateX(-50%) translateY(8px);
      }
    }

    /* --- CONTENT SECTIONS --- */
    .section-content {
      min-height: 100vh;
      padding: var(--fib-space-55) var(--fib-space-13);
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 1400px;
      margin: 0 auto;
    }

    .section-content__label {
      font-family: var(--font-mono);
      font-size: var(--type-xs);
      color: var(--signal-primary);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      margin-bottom: var(--fib-space-5);
      opacity: 0.7;
    }

    .section-content__heading {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4vw, 3.2rem);
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.2;
      max-width: 20ch;
      margin-bottom: var(--fib-space-8);
    }

    .section-content__body {
      font-size: var(--type-base);
      color: rgba(255, 255, 255, 0.55);
      max-width: 60ch;
      line-height: var(--phi);
      margin-bottom: var(--fib-space-13);
    }

    /* --- METRICS GRID (Golden Ratio Layout) --- */
    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--fib-space-8);
      width: 100%;
      max-width: 1200px;
    }

    .metric-card {
      padding: var(--fib-space-8);
    }

    .metric-card__value {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--signal-primary);
      line-height: 1.1;
      margin-bottom: var(--fib-space-3);
    }

    .metric-card__label {
      font-family: var(--font-body);
      font-size: var(--type-sm);
      color: rgba(255, 255, 255, 0.5);
      font-weight: 400;
    }

    .metric-card__detail {
      font-family: var(--font-mono);
      font-size: var(--type-xs);
      color: rgba(255, 255, 255, 0.3);
      margin-top: var(--fib-space-3);
    }

    /* --- SYSTEMS GRID --- */
    .systems-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--fib-space-5);
      width: 100%;
      max-width: 1200px;
    }

    .system-badge {
      padding: var(--fib-space-5) var(--fib-space-5);
      display: flex;
      align-items: center;
      gap: var(--fib-space-3);
      font-family: var(--font-mono);
      font-size: var(--type-xs);
    }

    .system-badge__status {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .system-badge__status--live {
      background: var(--signal-vital);
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    }

    .system-badge__status--operational {
      background: var(--signal-primary);
      box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
    }

    .system-badge__name {
      color: rgba(255, 255, 255, 0.75);
      letter-spacing: 0.05em;
    }

    .system-badge__version {
      color: rgba(255, 255, 255, 0.3);
      margin-left: auto;
    }

    /* --- DEPTH VISUALIZATION --- */
    .depth-demo {
      position: relative;
      width: 100%;
      max-width: 900px;
      height: 500px;
      margin: var(--fib-space-13) auto;
      border-radius: 16px;
      overflow: hidden;
      background: var(--abyss);
    }

    .depth-demo__layer {
      position: absolute;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: var(--type-xs);
      color: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.06);
      transition: transform calc(var(--dur-breath) * var(--motion-speed)) var(--ease-spring);
    }

    /* --- MOTION CONTROL PANEL --- */
    .motion-control {
      position: fixed;
      bottom: var(--fib-space-8);
      right: var(--fib-space-8);
      z-index: var(--z-interface);
      padding: var(--fib-space-5);
      min-width: 220px;
    }

    .motion-control__title {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: var(--fib-space-3);
    }

    .motion-control__option {
      display: flex;
      align-items: center;
      gap: var(--fib-space-3);
      padding: 6px 0;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: var(--type-xs);
      color: rgba(255, 255, 255, 0.55);
      transition: color var(--dur-fast) ease;
    }

    .motion-control__option:hover {
      color: rgba(255, 255, 255, 0.85);
    }

    .motion-control__radio {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color var(--dur-fast) ease;
    }

    .motion-control__radio[data-active="true"] {
      border-color: var(--signal-primary);
    }

    .motion-control__radio[data-active="true"]::after {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--signal-primary);
    }

    /* --- PERFORMANCE MONITOR --- */
    .perf-monitor {
      position: fixed;
      top: 80px;
      left: var(--fib-space-5);
      z-index: var(--z-interface);
      font-family: var(--font-mono);
      font-size: 10px;
      color: rgba(255, 255, 255, 0.3);
      pointer-events: none;
      display: none;
    }

    .perf-monitor[data-visible="true"] {
      display: block;
    }

    .perf-monitor__fps {
      color: var(--signal-vital);
    }

    /* --- FOOTER (APEX SACRED) --- */
    .apex-footer {
      position: relative;
      z-index: var(--z-interface);
      padding: var(--fib-space-13) var(--fib-space-13);
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      background: rgba(6, 8, 15, 0.95);
    }

    .apex-footer__inner {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--fib-space-5);
    }

    .apex-footer__legal {
      font-family: var(--font-mono);
      font-size: 10px;
      color: rgba(255, 255, 255, 0.3);
      letter-spacing: 0.05em;
    }

    .apex-footer__links {
      display: flex;
      gap: var(--fib-space-8);
    }

    .apex-footer__link {
      font-family: var(--font-mono);
      font-size: 10px;
      color: rgba(255, 255, 255, 0.3);
      text-decoration: none;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: color var(--dur-fast) ease;
    }

    .apex-footer__link:hover {
      color: var(--signal-primary);
    }

    /* ============================================================================
   RESPONSIVE PARALLAX INTENSITY
   Adapts motion complexity to device capability
   ============================================================================ */

    @media (max-width: 768px) {
      :root {
        --motion-intensity: 0.6;
        --motion-complexity: 0.5;
        --perspective-distance: 800px;
        --max-active-layers: 6;
      }

      .apex-header {
        padding: var(--fib-space-3) var(--fib-space-5);
      }

      .apex-nav {
        gap: var(--fib-space-5);
      }

      .apex-nav__link {
        display: none;
      }

      .parallax-section {
        padding: var(--fib-space-21) var(--fib-space-5);
      }

      .section-content {
        padding: var(--fib-space-34) var(--fib-space-5);
      }

      .motion-control {
        bottom: var(--fib-space-3);
        right: var(--fib-space-3);
        min-width: 180px;
      }

      .depth-demo {
        height: 300px;
      }
    }

    @media (max-width: 480px) {
      :root {
        --motion-intensity: 0.4;
        --motion-complexity: 0.3;
        --motion-rotation: 0;
        --max-active-layers: 4;
      }
    }

    /* Battery saver detection via prefers-reduced-data (emerging) */
    @media (prefers-reduced-data: reduce) {
      :root {
        --motion-intensity: 0.3;
        --motion-complexity: 0.2;
      }

      .harmonic-field__grain {
        display: none;
      }
    }

    /* High contrast mode */
    @media (prefers-contrast: high) {
      .glass-panel {
        background: rgba(20, 24, 48, 0.95);
        border-color: rgba(255, 255, 255, 0.3);
      }
    }

    /* HDR display optimization */
    @media (dynamic-range: high) {
      :root {
        --signal-primary: color(display-p3 0 0.83 1);
        --signal-secondary: color(display-p3 0.72 0.58 0.96);
        --signal-tertiary: color(display-p3 1 0.84 0);
      }
    }

    /* ============================================================================
   FOCUS MANAGEMENT (Accessibility)
   ============================================================================ */

    :focus-visible {
      outline: 2px solid var(--signal-primary);
      outline-offset: 3px;
    }

    /* Skip link */
    .skip-link {
      position: absolute;
      top: -100%;
      left: var(--fib-space-5);
      z-index: 9999;
      background: var(--signal-primary);
      color: var(--void);
      padding: var(--fib-space-3) var(--fib-space-5);
      font-family: var(--font-body);
      font-size: var(--type-sm);
      font-weight: 600;
      text-decoration: none;
      border-radius: 4px;
    }

    .skip-link:focus {
      top: var(--fib-space-3);
    }

    /* Screen reader 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-width: 0;
    }
  </style>
</head>

<body data-motion-level="full">

  <nav class="ethraeon-crossnav" style="background:#06080f;padding:0.75rem 2rem;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;border-bottom:1px solid #1a1f2e;font-family:Inter,system-ui,sans-serif;font-size:0.85rem;">
  <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="/products/" style="color:#00d4ff;text-decoration:none;">Products</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="/research/" style="color:#00d4ff;text-decoration:none;">Research</a>
  <a href="/cockpit/" style="color:#00d4ff;text-decoration:none;">Cockpit</a>
  <a href="/scl/" style="color:#00d4ff;text-decoration:none;">SCL</a>
</nav>


  <!-- Skip Navigation (Accessibility) -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Harmonic Resonance Field (Background) -->
  <div class="harmonic-field harmonic-field--css" aria-hidden="true">
    <canvas class="harmonic-field__canvas" id="harmonicCanvas"></canvas>
    <div class="harmonic-field__grain"></div>
  </div>

  <!-- APEX HEADER (Sacred - z-index supreme) -->
  <header class="apex-header" role="banner">
    <a href="/" class="apex-logo" aria-label="ETHRAEON Home">ETHRAEON</a>
    <nav class="apex-nav" role="navigation" aria-label="Primary navigation">
      <a href="/enterprise/" class="apex-nav__link">Enterprise</a>
      <a href="/patents/" class="apex-nav__link">Patents</a>
      <a href="/packages/" class="apex-nav__link">Packages</a>
      <a href="/investors/" class="apex-nav__link">Investors</a>
      <a href="/pricing/" class="apex-nav__link">Pricing</a>
      <a href="/architecture/" class="apex-nav__link">Architecture</a>
      <a href="/cockpit/" class="apex-nav__cta">Cockpit</a>
    </nav>
  </header>

  <!-- Performance Monitor (dev mode) -->
  <div class="perf-monitor" id="perfMonitor" aria-hidden="true">
    <div>FPS: <span class="perf-monitor__fps" id="fpsCounter">60</span></div>
    <div>Layers: <span id="layerCount">0</span></div>
    <div>Scroll: <span id="scrollVelocity">0</span>px/s</div>
  </div>

  <!-- MAIN CONTENT -->
  <main id="main-content">

    <!-- SECTION 0: Hero -->
    <section class="parallax-section section-hero" data-parallax-section="0" aria-label="Hero">
      <div class="reveal" data-reveal>
        <p class="hero__pre" data-i18n="hero.pre">One principle.</p>
      </div>
      <div class="reveal" data-reveal data-delay="100">
        <h1 class="hero__title" data-i18n="hero.title">Humanity Before the Machine</h1>
      </div>
      <div class="reveal" data-reveal data-delay="200">
        <p class="hero__subtitle" data-i18n="hero.subtitle">Every decision an AI makes, must have a person leading it.
          We built the architecture that delivers on that promise, at scale. Welcome to ETHRAEON.</p>
      </div>
      <div class="reveal hero__sigils" data-reveal data-delay="350" aria-label="Constitutional sigils">
        <span class="sigil sigil--trace" data-sigil="trace" title="Trace - continuity and memory">&#x27C1;</span>
        <span class="sigil sigil--earth" data-sigil="earth" title="Earth - grounding and manifestation">&#x1F704;</span>
        <span class="sigil sigil--delta" data-sigil="delta" title="Delta - transformation">&#x0394;</span>
        <span class="sigil sigil--sigma" data-sigil="sigma" title="Sigma - integration">&#x03A3;</span>
        <span class="sigil sigil--omega" data-sigil="omega" title="Omega - completion">&#x03A9;</span>
      </div>
      <div class="scroll-indicator" aria-hidden="true">
        <div class="scroll-indicator__line"></div>
        <span class="scroll-indicator__text">Scroll</span>
      </div>
    </section>

    <!-- SECTION 1: What We Built -->
    <section class="parallax-section" data-parallax-section="1" aria-label="What we built">
      <div class="section-content">
        <div class="reveal" data-reveal>
          <span class="section-content__label" data-i18n="built.label">What We Built</span>
          <h2 class="section-content__heading" data-i18n="built.heading">Safe AI for all deployments.</h2>
          <p class="section-content__body" data-i18n="built.body">Non-destructive implementations at scale. Vendor
            agnostic. Over seventy-six AGI-class systems that govern how AI behaves. Seventy-three patent applications
            filed. Thirty-three academic papers published. Get in touch to learn more. All questions welcome. We are
            here to anchor safe expansion, architecture first, for all sectors, for generations to come.</p>
        </div>
        <div class="metrics-grid reveal-stagger" data-reveal>
          <div class="metric-card glass-panel">
            <div class="metric-card__value">76+</div>
            <div class="metric-card__label" data-i18n="built.metric1.label">Live Systems</div>
            <div class="metric-card__detail" data-i18n="built.metric1.detail">Deployed and running</div>
          </div>
          <div class="metric-card glass-panel">
            <div class="metric-card__value">73</div>
            <div class="metric-card__label" data-i18n="built.metric2.label">Patents</div>
            <div class="metric-card__detail" data-i18n="built.metric2.detail">16 filed with the USPTO</div>
          </div>
          <div class="metric-card glass-panel">
            <div class="metric-card__value">13</div>
            <div class="metric-card__label" data-i18n="built.metric3.label">Languages</div>
            <div class="metric-card__detail" data-i18n="built.metric3.detail">UNESCO accessibility standard</div>
          </div>
          <div class="metric-card glass-panel">
            <div class="metric-card__value">Open</div>
            <div class="metric-card__label" data-i18n="built.metric4.label">Research</div>
            <div class="metric-card__detail" data-i18n="built.metric4.detail">Explore the work</div>
          </div>
        </div>
      </div>
    </section>

    <!-- SECTION 2: System Atlas -->
    <section class="parallax-section" data-parallax-section="2" aria-label="System atlas">
      <div class="section-content">
        <div class="reveal" data-reveal>
          <span class="section-content__label" data-i18n="atlas.label">The Architecture</span>
          <h2 class="section-content__heading" data-i18n="atlas.heading">Architecture first. For generations to come.
          </h2>
          <p class="section-content__body" data-i18n="atlas.body">Every engine below keeps AI accountable. Memory
            systems that remember context. Safety barriers that know when to stop. Governance you can see, not just
            governance you're told about. Vendor agnostic. Sector agnostic. Built to scale.</p>
        </div>
        <div class="systems-grid reveal-stagger" data-reveal>
          <!-- TIER 1: Core Engines -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--live"></span>
            <span class="system-badge__name">TRACELET</span>
            <span class="system-badge__version">1.1.0+EDG</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--live"></span>
            <span class="system-badge__name">DELTASUM</span>
            <span class="system-badge__version">3.0.1</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">KAIROS</span>
            <span class="system-badge__version">1.0.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--live"></span>
            <span class="system-badge__name">EDG</span>
            <span class="system-badge__version">1.0.0</span>
          </div>
          <!-- TIER 2: Trinity -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">GENESIS</span>
            <span class="system-badge__version">3.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">GENTHOS</span>
            <span class="system-badge__version">3.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">PRAXIS-CC</span>
            <span class="system-badge__version">3.0</span>
          </div>
          <!-- TIER 3: Intelligence -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">ARCANUM</span>
            <span class="system-badge__version">2.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">NEXUS</span>
            <span class="system-badge__version">1.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">LYRA</span>
            <span class="system-badge__version">1.0</span>
          </div>
          <!-- TIER 4: Memory & Conscience -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">SYLION</span>
            <span class="system-badge__version">1.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">CONSCIENCE</span>
            <span class="system-badge__version">1.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">CIPHER</span>
            <span class="system-badge__version">2.5</span>
          </div>
          <!-- TIER 5: Safety & Governance -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">VELKOR</span>
            <span class="system-badge__version">1.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">SOVRIN</span>
            <span class="system-badge__version">1.0</span>
          </div>
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">ROSETTA</span>
            <span class="system-badge__version">1.0</span>
          </div>
          <!-- TIER 6: Foundation Modules M1-M19 -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--live"></span>
            <span class="system-badge__name">M1–M19</span>
            <span class="system-badge__version">19 modules</span>
          </div>
          <!-- TIER 7: Companion Protocols -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">CP-Series</span>
            <span class="system-badge__version">20+ protocols</span>
          </div>
          <!-- TIER 8: Enterprise & Agents -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--operational"></span>
            <span class="system-badge__name">AGENTS</span>
            <span class="system-badge__version">10+ deployed</span>
          </div>
          <!-- TIER 9: Patents -->
          <div class="system-badge glass-panel">
            <span class="system-badge__status system-badge__status--live"></span>
            <span class="system-badge__name">PATENTS</span>
            <span class="system-badge__version">16 filed / 73 total</span>
          </div>
        </div>
      </div>
    </section>

    <!-- SECTION 3: Depth Architecture Demo -->
    <section class="parallax-section" data-parallax-section="3" aria-label="Parallax depth architecture">
      <div class="section-content">
        <div class="reveal" data-reveal>
          <span class="section-content__label" data-i18n="motion.label">How It Feels</span>
          <h2 class="section-content__heading" data-i18n="motion.heading">Motion that respects how you see.</h2>
          <p class="section-content__body" data-i18n="motion.body">Eight layers of depth, each moving at a different
            speed - fast in the foreground, slow in the distance. The same way your eyes perceive the real world. Scroll
            down. You'll feel the difference.</p>
        </div>
        <div class="depth-demo reveal" data-reveal id="depthDemo" role="img"
          aria-label="Interactive parallax depth layer demonstration">
          <!-- Depth layers populated by JS -->
        </div>
      </div>
    </section>

    <!-- SECTION 4: Constitutional Governance -->
    <section class="parallax-section" data-parallax-section="4" aria-label="Constitutional governance">
      <div class="section-content">
        <div class="reveal" data-reveal>
          <span class="section-content__label" data-i18n="govern.label">The Rules</span>
          <h2 class="section-content__heading" data-i18n="govern.heading">Five rules that never bend.</h2>
          <p class="section-content__body" data-i18n="govern.body">AI doesn't get to decide on its own. It doesn't
            escalate without permission. It doesn't change what you wrote. It doesn't rewrite its own constraints. And
            when something is unclear, it stops and asks a person. That's not a feature - it's the foundation.</p>
        </div>
        <div class="metrics-grid reveal-stagger" data-reveal>
          <div class="metric-card glass-panel">
            <div class="metric-card__value" style="color: var(--harmonic-root)">Stop</div>
            <div class="metric-card__label" data-i18n="govern.card1.label">Full Halt</div>
            <div class="metric-card__detail" data-i18n="govern.card1.detail">A person reviews before anything continues
            </div>
          </div>
          <div class="metric-card glass-panel">
            <div class="metric-card__value" style="color: var(--harmonic-third)">Alert</div>
            <div class="metric-card__label" data-i18n="govern.card2.label">Flag It</div>
            <div class="metric-card__detail" data-i18n="govern.card2.detail">Something needs attention - you'll know
            </div>
          </div>
          <div class="metric-card glass-panel">
            <div class="metric-card__value" style="color: var(--harmonic-fifth)">Block</div>
            <div class="metric-card__label" data-i18n="govern.card3.label">Not Without Approval</div>
            <div class="metric-card__detail" data-i18n="govern.card3.detail">The system waits for you</div>
          </div>
          <div class="metric-card glass-panel">
            <div class="metric-card__value" style="color: var(--harmonic-gold)">Guide</div>
            <div class="metric-card__label" data-i18n="govern.card4.label">Suggestions &amp; Standards</div>
            <div class="metric-card__detail" data-i18n="govern.card4.detail">Best practices, always your call</div>
          </div>
        </div>
      </div>
    </section>

    <!-- SECTION 5: Value -->
    <section class="parallax-section" data-parallax-section="5" aria-label="Value">
      <div class="section-content">
        <div class="reveal" data-reveal>
          <span class="section-content__label" data-i18n="value.label">The Value</span>
          <h2 class="section-content__heading" data-i18n="value.heading">Two layers. One protected asset.</h2>
          <p class="section-content__body" data-i18n="value.body">We separate what's available for partnership from what
            defines the company. Investment terms live in one layer. The architecture, the patents, the research -
            that's another. They never cross. Value only goes up.</p>
        </div>
        <div class="metrics-grid reveal-stagger" data-reveal>
          <div class="metric-card glass-panel">
            <div class="metric-card__value" style="font-size: clamp(1.5rem, 3vw, 2.2rem);">Partnership</div>
            <div class="metric-card__label" data-i18n="value.card1.label">Investment Layer</div>
            <div class="metric-card__detail" data-i18n="value.card1.detail">Terms, notes, and deal structure</div>
          </div>
          <div class="metric-card glass-panel">
            <div class="metric-card__value" style="font-size: clamp(1.5rem, 3vw, 2.2rem);">Protected</div>
            <div class="metric-card__label" data-i18n="value.card2.label">IP Layer</div>
            <div class="metric-card__detail" data-i18n="value.card2.detail">The full architecture, patents, and research
            </div>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- CTA: Contact -->
  <section class="parallax-section section-cta" aria-label="Get in touch">
    <div class="section-content" style="text-align: center;">
      <div class="reveal" data-reveal>
        <h2 class="section-content__heading" data-i18n="cta.heading" style="max-width: 48rem; margin: 0 auto;">All
          questions welcome.</h2>
        <p class="section-content__body" data-i18n="cta.body" style="max-width: 40rem; margin: 1.5rem auto 2.5rem;">We
          are here to anchor safe expansion, architecture first, for all sectors, for generations to come. Get in touch
          to learn more.</p>
        <a href="mailto:jason@ethraeon.systems" class="cta-button glass-panel" data-i18n="cta.button"
          onmouseover="this.style.borderColor='rgba(255,255,255,0.35)'"
          onmouseout="this.style.borderColor='rgba(255,255,255,0.15)'">Get in Touch</a>
      </div>
    </div>
  </section>

  <section class="parallax-section" data-parallax-section="6" aria-label="Explore the estate">
    <div class="section-content">
      <div class="reveal" data-reveal>
        <span class="section-content__label">Explore</span>
        <h2 class="section-content__heading">The ETHRAEON Estate</h2>
        <p class="section-content__body">Every surface below is live, source-backed, and constitutionally governed.</p>
      </div>
      <div class="card-grid reveal" data-reveal
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 52px;">
        <a href="/patents/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Patent Estate</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">73 specifications. 9 families. 16 filed with
            USPTO.</p>
        </a>
        <a href="/enterprise/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Enterprise</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">Constitutional runtime for regulated industries.
          </p>
        </a>
        <a href="/packages/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Packages</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">Investor, legal, valuation, SAFE, and patent
            packages.</p>
        </a>
        <a href="/investors/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Investors</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">Capital formation and the SAFE instrument
            framework.</p>
        </a>
        <a href="/pricing/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Pricing</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">Professional, Enterprise, Sovereign,
            Humanitarian tiers.</p>
        </a>
        <a href="/architecture/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Architecture</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">47 engines. Sovereign metal. VPS substrates.</p>
        </a>
        <a href="/cockpit/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Cockpit</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">Operational command and FORGE 0768 state.</p>
        </a>
        <a href="/workers/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Workers</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">Cloudflare Worker fleet. Billing, webhooks,
            governance.</p>
        </a>
        <a href="/stakeholders/" class="card glass-panel" style="text-decoration: none; display: block;">
          <h3 style="font-family: var(--font-display); color: var(--gold); margin-bottom: 0.5rem;">Stakeholders</h3>
          <p style="color: var(--signal-primary); font-size: 0.875rem;">Network and personalized engagement surfaces.
          </p>
        </a>
      </div>
    </div>
  </section>

  <!-- APEX FOOTER (Sacred) -->
<!-- Motion Preference Control (Neurodiversity) -->
  <div class="motion-control glass-panel" role="radiogroup" aria-label="Motion intensity preference" id="motionControl">
    <div class="motion-control__title">Motion</div>
    <label class="motion-control__option" data-motion="full">
      <span class="motion-control__radio" data-active="true" role="radio" aria-checked="true" tabindex="0"></span>
      Full
    </label>
    <label class="motion-control__option" data-motion="reduced">
      <span class="motion-control__radio" data-active="false" role="radio" aria-checked="false" tabindex="0"></span>
      Reduced
    </label>
    <label class="motion-control__option" data-motion="minimal">
      <span class="motion-control__radio" data-active="false" role="radio" aria-checked="false" tabindex="0"></span>
      Minimal
    </label>
    <label class="motion-control__option" data-motion="none">
      <span class="motion-control__radio" data-active="false" role="radio" aria-checked="false" tabindex="0"></span>
      None
    </label>
  </div>

  <!-- Language Selection (UNESCO i18n A11y - 13 languages) -->
  <div class="lang-control glass-panel" role="listbox" aria-label="Language selection" id="langControl" style="
  position: fixed; bottom: 5rem; right: 1.5rem; z-index: 900;
  padding: 0.5rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.25rem;
  max-width: 10rem; opacity: 0.7; transition: opacity 0.3s;
" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.7'">
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('en')" role="option" aria-label="English"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">EN</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('uk')" role="option" aria-label="Українська"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">UK</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('fr')" role="option" aria-label="Français"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">FR</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('de')" role="option" aria-label="Deutsch"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">DE</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('it')" role="option" aria-label="Italiano"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">IT</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('es')" role="option" aria-label="Español"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">ES</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('pt')" role="option" aria-label="Português"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">PT</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('ja')" role="option" aria-label="日本語"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">JA</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('zh')" role="option" aria-label="中文"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">ZH</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('ar')" role="option" aria-label="العربية"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">AR</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('hi')" role="option" aria-label="हिन्दी"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">HI</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('sw')" role="option" aria-label="Kiswahili"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">SW</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('ko')" role="option" aria-label="한국어"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">KO</button>
    <button onclick="EUDS_PARALLAX.i18n.setLanguage('he')" role="option" aria-label="עברית"
      style="all:unset;cursor:pointer;padding:0.15rem 0.35rem;border-radius:0.25rem;font-size:0.65rem;opacity:0.8;transition:opacity 0.2s"
      onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'" dir="rtl">HE</button>
  </div>

  <!-- ARIA live region for dynamic content announcements -->
  <div class="sr-only" role="status" aria-live="polite" id="ariaStatus"></div>

  <script>
    /* ============================================================================
       EUDS PARALLAX ENGINE v1.0.0
       Constitutional Motion Substrate - Physics + Fibonacci + Harmonic Resonance
       
       Copyright 2024-2026 S. Jason Prohaska (ingombrante)
       Schedule A+ Protected | Patent Pending
       ============================================================================ */

    (function () {
      'use strict';

      // =========================================================================
      // CONFIGURATION (Constitutional Constants)
      // =========================================================================

      const CONFIG = Object.freeze({
        PHI: 1.6180339887,
        PHI_INV: 0.6180339887,

        SPRING: Object.freeze({
          STIFFNESS: 180,
          DAMPING: 12,
          MASS: 1,
          PRECISION: 0.001
        }),

        PARALLAX: Object.freeze({
          LAYERS: [
            { id: 'background', depth: 0.15, blur: 4, opacity: 0.4 },
            { id: 'far', depth: 0.30, blur: 2, opacity: 0.6 },
            { id: 'mid-far', depth: 0.48, blur: 1, opacity: 0.75 },
            { id: 'mid', depth: 0.618, blur: 0, opacity: 0.88 },
            { id: 'mid-near', depth: 0.76, blur: 0, opacity: 0.94 },
            { id: 'near', depth: 0.88, blur: 0, opacity: 1 },
            { id: 'foreground', depth: 1.0, blur: 0, opacity: 1 },
            { id: 'overlay', depth: 1.15, blur: 0, opacity: 1 }
          ]
        }),

        PERFORMANCE: Object.freeze({
          TARGET_FPS: 60,
          FRAME_BUDGET: 16.67,
          MIN_FPS_THRESHOLD: 30,
          DEGRADE_THRESHOLD: 3, // consecutive low frames before degradation
          RECOVERY_FRAMES: 60
        }),

        VELKOR: Object.freeze({
          // VELKOR safety barriers for motion
          MAX_VELOCITY: 5000,        // px/s - seizure risk threshold
          MAX_FLASH_RATE: 3,         // Hz - WCAG 2.3.1 (three flashes)
          MAX_ROTATION_SPEED: 90,    // deg/s - vestibular safety
          COGNITIVE_LOAD_MAX: 0.8    // 0-1 scale
        })
      });

      // =========================================================================
      // PHYSICS ENGINE - Spring Dynamics + Inertia + Damping
      // =========================================================================

      class SpringPhysics {
        constructor(config = {}) {
          this.stiffness = config.stiffness || CONFIG.SPRING.STIFFNESS;
          this.damping = config.damping || CONFIG.SPRING.DAMPING;
          this.mass = config.mass || CONFIG.SPRING.MASS;
          this.precision = config.precision || CONFIG.SPRING.PRECISION;

          this.position = 0;
          this.velocity = 0;
          this.target = 0;
          this.atRest = true;
        }

        setTarget(target) {
          this.target = target;
          this.atRest = false;
        }

        step(dt) {
          if (this.atRest) return this.position;

          // Spring force: F = -k * (x - target)
          const displacement = this.position - this.target;
          const springForce = -this.stiffness * displacement;

          // Damping force: F = -c * v
          const dampingForce = -this.damping * this.velocity;

          // Newton: F = ma => a = F/m
          const acceleration = (springForce + dampingForce) / this.mass;

          // Velocity Verlet integration (more stable than Euler)
          this.velocity += acceleration * dt;
          this.position += this.velocity * dt;

          // Rest detection
          if (Math.abs(this.velocity) < this.precision &&
            Math.abs(displacement) < this.precision) {
            this.position = this.target;
            this.velocity = 0;
            this.atRest = true;
          }

          return this.position;
        }
      }

      // Inertia tracker for scroll momentum
      class InertiaTracker {
        constructor() {
          this.samples = [];
          this.maxSamples = 5;
        }

        addSample(position, time) {
          this.samples.push({ position, time });
          if (this.samples.length > this.maxSamples) {
            this.samples.shift();
          }
        }

        getVelocity() {
          if (this.samples.length < 2) return 0;
          const first = this.samples[0];
          const last = this.samples[this.samples.length - 1];
          const dt = (last.time - first.time) / 1000; // seconds
          if (dt === 0) return 0;
          return (last.position - first.position) / dt;
        }

        getDirection() {
          const v = this.getVelocity();
          if (v > 0) return 'down';
          if (v < 0) return 'up';
          return 'static';
        }

        reset() {
          this.samples = [];
        }
      }

      // =========================================================================
      // SCROLL PARALLAX CONTROLLER
      // =========================================================================

      class ParallaxController {
        constructor() {
          this.springs = new Map();
          this.inertia = new InertiaTracker();
          this.scrollY = 0;
          this.lastScrollY = 0;
          this.scrollVelocity = 0;
          this.viewportHeight = window.innerHeight;
          this.documentHeight = document.documentElement.scrollHeight;
          this.motionIntensity = 1;
          this.isRunning = false;
          this.frameId = null;
          this.lastFrameTime = 0;

          // Performance monitoring
          this.frameCount = 0;
          this.fpsAccumulator = 0;
          this.currentFps = 60;
          this.lowFrameCount = 0;
          this.degraded = false;

          // Elements cache
          this.sections = [];
          this.revealElements = [];
          this.sigils = [];
          this.depthLayers = [];

          this._init();
        }

        _init() {
          this._cacheElements();
          this._setupSprings();
          this._setupObservers();
          this._setupEventListeners();
          this._setupDepthDemo();
          this._setupMotionControl();
          this._checkReducedMotion();
          this._start();
        }

        _cacheElements() {
          this.sections = Array.from(document.querySelectorAll('[data-parallax-section]'));
          this.revealElements = Array.from(document.querySelectorAll('[data-reveal]'));
          this.sigils = Array.from(document.querySelectorAll('[data-sigil]'));
        }

        _setupSprings() {
          // One spring per parallax section for smooth scroll interpolation
          this.sections.forEach((section, i) => {
            this.springs.set(`section-${i}`, new SpringPhysics({
              stiffness: 120 + (i * 15),  // Stiffer for foreground
              damping: 14,
              mass: 1
            }));
          });

          // Master scroll spring
          this.springs.set('scroll', new SpringPhysics({
            stiffness: 200,
            damping: 18,
            mass: 0.8
          }));
        }

        _setupObservers() {
          // IntersectionObserver for reveal animations
          const revealObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
              if (entry.isIntersecting) {
                const delay = entry.target.dataset.delay || 0;
                setTimeout(() => {
                  entry.target.setAttribute('data-visible', 'true');
                }, parseInt(delay));
              }
            });
          }, {
            threshold: 0.15,
            rootMargin: '0px 0px -50px 0px'
          });

          this.revealElements.forEach(el => revealObserver.observe(el));

          // Section visibility observer
          const sectionObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
              entry.target.setAttribute('data-visible', entry.isIntersecting ? 'true' : 'false');

              // Activate sigils when hero section visible
              if (entry.target.dataset.parallaxSection === '0' && entry.isIntersecting) {
                this._activateSigils();
              }
            });
          }, {
            threshold: 0.3
          });

          this.sections.forEach(s => sectionObserver.observe(s));
        }

        _setupEventListeners() {
          // Scroll tracking
          let scrollTicking = false;
          window.addEventListener('scroll', () => {
            if (!scrollTicking) {
              scrollTicking = true;
              this.scrollY = window.pageYOffset || document.documentElement.scrollTop;
              this.inertia.addSample(this.scrollY, performance.now());
              scrollTicking = false;
            }
          }, { passive: true });

          // Resize handling
          let resizeTimer;
          window.addEventListener('resize', () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
              this.viewportHeight = window.innerHeight;
              this.documentHeight = document.documentElement.scrollHeight;
            }, 200);
          }, { passive: true });

          // Keyboard accessibility for parallax sections
          document.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
              // Ensure focus is visible in parallax context
              document.body.classList.add('keyboard-nav');
            }
          });

          document.addEventListener('mousedown', () => {
            document.body.classList.remove('keyboard-nav');
          });
        }

        _setupDepthDemo() {
          const container = document.getElementById('depthDemo');
          if (!container) return;

          const colors = [
            'rgba(0, 212, 255, 0.08)',
            'rgba(0, 212, 255, 0.10)',
            'rgba(183, 148, 246, 0.08)',
            'rgba(0, 212, 255, 0.12)',
            'rgba(183, 148, 246, 0.10)',
            'rgba(255, 215, 0, 0.06)',
            'rgba(0, 212, 255, 0.15)',
            'rgba(183, 148, 246, 0.12)'
          ];

          CONFIG.PARALLAX.LAYERS.forEach((layer, i) => {
            const el = document.createElement('div');
            el.className = 'depth-demo__layer';
            el.style.cssText = `
          background: ${colors[i]};
          width: ${50 + i * 8}%;
          height: ${30 + i * 6}%;
          left: ${25 - i * 4}%;
          top: ${35 - i * 3}%;
          filter: blur(${layer.blur}px);
          opacity: ${layer.opacity};
        `;
            el.textContent = `${layer.id} (${layer.depth})`;
            el.dataset.layerDepth = layer.depth;
            container.appendChild(el);
            this.depthLayers.push({ el, depth: layer.depth });
          });
        }

        _setupMotionControl() {
          const control = document.getElementById('motionControl');
          if (!control) return;

          control.querySelectorAll('.motion-control__option').forEach(option => {
            option.addEventListener('click', () => {
              const level = option.dataset.motion;
              document.body.setAttribute('data-motion-level', level);

              // Update radio states
              control.querySelectorAll('.motion-control__radio').forEach(r => {
                r.setAttribute('data-active', 'false');
                r.setAttribute('aria-checked', 'false');
              });
              option.querySelector('.motion-control__radio').setAttribute('data-active', 'true');
              option.querySelector('.motion-control__radio').setAttribute('aria-checked', 'true');

              // Update motion intensity
              const intensityMap = { full: 1, reduced: 0.5, minimal: 0.25, none: 0 };
              this.motionIntensity = intensityMap[level] || 1;

              // ARIA announcement
              const status = document.getElementById('ariaStatus');
              if (status) {
                status.textContent = `Motion intensity set to ${level}`;
              }
            });

            // Keyboard support
            option.addEventListener('keydown', (e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                option.click();
              }
            });
          });
        }

        _checkReducedMotion() {
          const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
          if (mq.matches) {
            this.motionIntensity = 0;
            document.body.setAttribute('data-motion-level', 'none');

            // Update radio UI
            const control = document.getElementById('motionControl');
            if (control) {
              control.querySelectorAll('.motion-control__radio').forEach(r => {
                r.setAttribute('data-active', 'false');
                r.setAttribute('aria-checked', 'false');
              });
              const noneOption = control.querySelector('[data-motion="none"] .motion-control__radio');
              if (noneOption) {
                noneOption.setAttribute('data-active', 'true');
                noneOption.setAttribute('aria-checked', 'true');
              }
            }
          }

          mq.addEventListener('change', (e) => {
            if (e.matches) {
              this.motionIntensity = 0;
              document.body.setAttribute('data-motion-level', 'none');
            }
          });
        }

        _activateSigils() {
          this.sigils.forEach((sigil, i) => {
            setTimeout(() => {
              sigil.setAttribute('data-activating', 'true');
              setTimeout(() => {
                sigil.setAttribute('data-resonant', 'true');
                sigil.removeAttribute('data-activating');
              }, 1200);
            }, i * 200);
          });
        }

        // =========================================================================
        // ANIMATION LOOP
        // =========================================================================

        _start() {
          if (this.isRunning) return;
          this.isRunning = true;
          this.lastFrameTime = performance.now();
          this._tick();
        }

        _tick() {
          const now = performance.now();
          const dt = Math.min((now - this.lastFrameTime) / 1000, 0.064); // Cap at ~15fps
          this.lastFrameTime = now;

          // Performance tracking
          this._trackPerformance(dt);

          // Update scroll spring
          const scrollSpring = this.springs.get('scroll');
          scrollSpring.setTarget(this.scrollY);
          const smoothScroll = scrollSpring.step(dt);

          // Calculate scroll velocity (VELKOR safety check)
          this.scrollVelocity = this.inertia.getVelocity();
          const safeVelocity = Math.min(
            Math.abs(this.scrollVelocity),
            CONFIG.VELKOR.MAX_VELOCITY
          );

          // Update parallax layers in depth demo
          if (this.motionIntensity > 0) {
            this._updateDepthLayers(smoothScroll, dt);
            this._updateSectionParallax(smoothScroll, dt);
          }

          // Update performance display
          this._updatePerfMonitor();

          this.lastScrollY = this.scrollY;
          this.frameId = requestAnimationFrame(() => this._tick());
        }

        _updateDepthLayers(scrollPos, dt) {
          const container = document.getElementById('depthDemo');
          if (!container) return;

          const rect = container.getBoundingClientRect();
          const viewportCenter = this.viewportHeight / 2;
          const containerCenter = rect.top + rect.height / 2;
          const offset = (containerCenter - viewportCenter) / this.viewportHeight;

          this.depthLayers.forEach(({ el, depth }) => {
            const parallaxOffset = offset * (1 - depth) * 80 * this.motionIntensity;
            el.style.transform = `translateY(${parallaxOffset}px)`;
          });
        }

        _updateSectionParallax(scrollPos, dt) {
          this.sections.forEach((section, i) => {
            const rect = section.getBoundingClientRect();
            const progress = 1 - (rect.top / this.viewportHeight);

            // Apply subtle parallax to section backgrounds
            if (progress > -0.5 && progress < 1.5) {
              const intensity = 30 * this.motionIntensity;
              const yOffset = (progress - 0.5) * intensity;

              // Use spring for smooth interpolation
              const spring = this.springs.get(`section-${i}`);
              if (spring) {
                spring.setTarget(yOffset);
                const smoothY = spring.step(dt);
                section.style.setProperty('--parallax-y', `${smoothY}px`);
              }
            }
          });
        }

        _trackPerformance(dt) {
          this.frameCount++;
          this.fpsAccumulator += dt;

          if (this.fpsAccumulator >= 1) {
            this.currentFps = Math.round(this.frameCount / this.fpsAccumulator);
            this.frameCount = 0;
            this.fpsAccumulator = 0;

            // Performance degradation detection
            if (this.currentFps < CONFIG.PERFORMANCE.MIN_FPS_THRESHOLD) {
              this.lowFrameCount++;
              if (this.lowFrameCount >= CONFIG.PERFORMANCE.DEGRADE_THRESHOLD && !this.degraded) {
                this._degrade();
              }
            } else {
              this.lowFrameCount = 0;
            }
          }
        }

        _degrade() {
          this.degraded = true;
          this.motionIntensity = Math.max(0.3, this.motionIntensity * 0.5);
          console.warn('[EUDS Parallax] Performance degradation detected. Reducing motion intensity.');

          // Announce to screen readers
          const status = document.getElementById('ariaStatus');
          if (status) {
            status.textContent = 'Motion effects reduced for performance optimization';
          }
        }

        _updatePerfMonitor() {
          const monitor = document.getElementById('perfMonitor');
          if (!monitor) return;

          const fpsEl = document.getElementById('fpsCounter');
          const layerEl = document.getElementById('layerCount');
          const velEl = document.getElementById('scrollVelocity');

          if (fpsEl) fpsEl.textContent = this.currentFps;
          if (layerEl) layerEl.textContent = this.depthLayers.length;
          if (velEl) velEl.textContent = Math.round(this.scrollVelocity);
        }

        destroy() {
          this.isRunning = false;
          if (this.frameId) {
            cancelAnimationFrame(this.frameId);
          }
        }
      }

      // =========================================================================
      // HARMONIC CANVAS - Resonance Field Visualization
      // Per ROSETTA patent: Physics-based harmonic substrate
      // =========================================================================

      class HarmonicField {
        constructor(canvas) {
          this.canvas = canvas;
          this.ctx = canvas.getContext('2d');
          this.width = 0;
          this.height = 0;
          this.time = 0;
          this.nodes = [];
          this.isActive = true;

          this._resize();
          this._initNodes();
          this._bind();
        }

        _resize() {
          const dpr = Math.min(window.devicePixelRatio || 1, 2);
          this.width = window.innerWidth;
          this.height = window.innerHeight;
          this.canvas.width = this.width * dpr;
          this.canvas.height = this.height * dpr;
          this.canvas.style.width = this.width + 'px';
          this.canvas.style.height = this.height + 'px';
          this.ctx.scale(dpr, dpr);
        }

        _initNodes() {
          // Create harmonic nodes at Fibonacci-spaced positions
          const count = 5;
          this.nodes = [];

          for (let i = 0; i < count; i++) {
            const fibRatio = [0.146, 0.236, 0.382, 0.618, 0.854][i]; // Fibonacci ratios
            this.nodes.push({
              x: this.width * fibRatio,
              y: this.height * (0.3 + i * 0.12),
              radius: 150 + i * 80,
              frequency: 0.0003 + i * 0.0001,  // Hz
              phase: i * Math.PI * CONFIG.PHI_INV,
              color: [
                [0, 212, 255],    // harmonic-root
                [124, 106, 239],  // harmonic-third
                [192, 132, 252],  // harmonic-fifth
                [244, 114, 182],  // harmonic-octave
                [212, 165, 116]   // harmonic-gold
              ][i],
              amplitude: 0.02 + i * 0.005
            });
          }
        }

        _bind() {
          window.addEventListener('resize', () => {
            this._resize();
            this._initNodes();
          }, { passive: true });
        }

        render(timestamp) {
          if (!this.isActive) return;

          this.time = timestamp;
          this.ctx.clearRect(0, 0, this.width, this.height);

          // Render each harmonic node as a soft radial gradient with oscillation
          this.nodes.forEach(node => {
            const breathX = Math.sin(timestamp * node.frequency + node.phase) * 30;
            const breathY = Math.cos(timestamp * node.frequency * CONFIG.PHI_INV + node.phase) * 20;
            const pulseRadius = node.radius + Math.sin(timestamp * node.frequency * 2) * 20;
            const alpha = node.amplitude + Math.sin(timestamp * node.frequency * 0.5) * 0.008;

            const gradient = this.ctx.createRadialGradient(
              node.x + breathX, node.y + breathY, 0,
              node.x + breathX, node.y + breathY, pulseRadius
            );

            const [r, g, b] = node.color;
            gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${alpha})`);
            gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${alpha * 0.4})`);
            gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);

            this.ctx.fillStyle = gradient;
            this.ctx.fillRect(0, 0, this.width, this.height);
          });
        }
      }

      // =========================================================================
      // INITIALIZATION
      // =========================================================================

      let parallaxController;
      let harmonicField;

      function init() {
        // Initialize parallax controller
        parallaxController = new ParallaxController();

        // Initialize harmonic canvas
        const canvas = document.getElementById('harmonicCanvas');
        if (canvas) {
          harmonicField = new HarmonicField(canvas);

          // Render loop for harmonic field (separate from parallax for independence)
          function renderHarmonic(timestamp) {
            harmonicField.render(timestamp);
            requestAnimationFrame(renderHarmonic);
          }
          requestAnimationFrame(renderHarmonic);
        }

        // Dev mode: show perf monitor with keyboard shortcut
        document.addEventListener('keydown', (e) => {
          if (e.key === 'p' && e.ctrlKey && e.shiftKey) {
            const monitor = document.getElementById('perfMonitor');
            if (monitor) {
              const visible = monitor.getAttribute('data-visible') === 'true';
              monitor.setAttribute('data-visible', (!visible).toString());
            }
          }
        });
      }

      // Wait for DOM
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
      } else {
        init();
      }

      // Expose for external integration
      window.EUDS_PARALLAX = {
        VERSION: '1.3.0',
        CONFIG,
        getController: () => parallaxController,
        getHarmonicField: () => harmonicField,
        SpringPhysics,
        InertiaTracker
      };

      // ===========================================================================
      // UNESCO i18n A11y DYNAMIC LANGUAGE ENGINE
      // 13 languages - Ukrainian (purposeful, not Russian)
      // Supports RTL (Arabic, Hebrew), CJK, Latin, Cyrillic, Devanagari
      // ===========================================================================

      const I18N_STRINGS = {
        en: {
          'hero.pre': 'One principle.',
          'hero.title': 'Humanity Before the Machine',
          'hero.subtitle': 'Every decision an AI makes, must have a person leading it. We built the architecture that delivers on that promise, at scale. Welcome to ETHRAEON.',
          'built.label': 'What We Built',
          'built.heading': 'Safe AI for all deployments.',
          'built.body': 'Non-destructive implementations at scale. Vendor agnostic. Over seventy-six AGI-class systems that govern how AI behaves. Seventy-three patent applications filed. Thirty-three academic papers published. Get in touch to learn more. All questions welcome. We are here to anchor safe expansion, architecture first, for all sectors, for generations to come.',
          'built.metric1.label': 'Live Systems', 'built.metric1.detail': 'Deployed and running',
          'built.metric2.label': 'Patents', 'built.metric2.detail': '16 filed with the USPTO',
          'built.metric3.label': 'Languages', 'built.metric3.detail': 'UNESCO accessibility standard',
          'built.metric4.label': 'Research', 'built.metric4.detail': 'Explore the work',
          'atlas.label': 'The Architecture',
          'atlas.heading': 'Architecture first. For generations to come.',
          'atlas.body': 'Every engine below keeps AI accountable. Memory systems that remember context. Safety barriers that know when to stop. Governance you can see, not just governance you\u2019re told about. Vendor agnostic. Sector agnostic. Built to scale.',
          'motion.label': 'How It Feels',
          'motion.heading': 'Motion that respects how you see.',
          'motion.body': 'Eight layers of depth, each moving at a different speed \u2014 fast in the foreground, slow in the distance. The same way your eyes perceive the real world. Scroll down. You\u2019ll feel the difference.',
          'govern.label': 'The Rules',
          'govern.heading': 'Five rules that never bend.',
          'govern.body': 'AI doesn\u2019t get to decide on its own. It doesn\u2019t escalate without permission. It doesn\u2019t change what you wrote. It doesn\u2019t rewrite its own constraints. And when something is unclear, it stops and asks a person. That\u2019s not a feature \u2014 it\u2019s the foundation.',
          'govern.card1.label': 'Full Halt', 'govern.card1.detail': 'A person reviews before anything continues',
          'govern.card2.label': 'Flag It', 'govern.card2.detail': 'Something needs attention \u2014 you\u2019ll know',
          'govern.card3.label': 'Not Without Approval', 'govern.card3.detail': 'The system waits for you',
          'govern.card4.label': 'Suggestions & Standards', 'govern.card4.detail': 'Best practices, always your call',
          'value.label': 'The Value',
          'value.heading': 'Two layers. One protected asset.',
          'value.body': 'We separate what\u2019s available for partnership from what defines the company. Investment terms live in one layer. The architecture, the patents, the research \u2014 that\u2019s another. They never cross. Value only goes up.',
          'value.card1.label': 'Investment Layer', 'value.card1.detail': 'Terms, notes, and deal structure',
          'value.card2.label': 'IP Layer', 'value.card2.detail': 'The full architecture, patents, and research',
          'cta.heading': 'All questions welcome.',
          'cta.body': 'We are here to anchor safe expansion, architecture first, for all sectors, for generations to come. Get in touch to learn more.',
          'cta.button': 'Get in Touch'
        },
        uk: {
          'hero.pre': 'Один принцип.',
          'hero.title': '\u041B\u044E\u0434\u0438\u043D\u0430 \u043F\u043E\u043D\u0430\u0434 \u043C\u0430\u0448\u0438\u043D\u043E\u044E',
          'hero.subtitle': 'Кожне рішення, яке приймає ШІ, повинна очолювати людина. Ми створили архітектуру, що забезпечує цю обіцянку, у масштабі. Ласкаво просимо до ETHRAEON.',
          'built.label': '\u0429\u043E \u043C\u0438 \u0441\u0442\u0432\u043E\u0440\u0438\u043B\u0438',
          'built.heading': 'Безпечний ШІ для всіх впроваджень.',
          'built.body': 'Неруйнівні впровадження у масштабі. Незалежність від постачальника. Понад сімдесят систем класу AGI, що керують поведінкою ШІ. Зв’яжіться з нами. Всі питання вітаються. Ми тут, щоб закласти безпечне розширення, архітектура насамперед, для всіх секторів, для майбутніх поколінь.',
          'built.metric1.label': '\u0421\u0438\u0441\u0442\u0435\u043C\u0438', 'built.metric1.detail': '\u0420\u043E\u0437\u0433\u043E\u0440\u043D\u0443\u0442\u043E \u0442\u0430 \u043F\u0440\u0430\u0446\u044E\u0454',
          'built.metric2.label': '\u041F\u0430\u0442\u0435\u043D\u0442\u0438', 'built.metric2.detail': '15 \u043F\u043E\u0434\u0430\u043D\u043E \u0434\u043E USPTO',
          'built.metric3.label': '\u041C\u043E\u0432\u0438', 'built.metric3.detail': '\u0421\u0442\u0430\u043D\u0434\u0430\u0440\u0442 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E\u0441\u0442\u0456 \u042E\u041D\u0415\u0421\u041A\u041E',
          'built.metric4.label': '\u0414\u043E\u0441\u043B\u0456\u0434\u0436\u0435\u043D\u043D\u044F', 'built.metric4.detail': '\u0414\u043E\u0441\u043B\u0456\u0434\u0438\u0442\u0438 \u0440\u043E\u0431\u043E\u0442\u0443',
          'atlas.label': '\u0410\u0440\u0445\u0456\u0442\u0435\u043A\u0442\u0443\u0440\u0430',
          'atlas.heading': 'Архітектура насамперед. Для майбутніх поколінь.',
          'atlas.body': 'Кожен рушій нижче забезпечує підзвітність ШІ. Системи пам’яті. Бар’єри безпеки. Керування, яке можна побачити. Незалежність від постачальника та сектора. Створено для масштабування.',
          'motion.label': '\u042F\u043A \u0446\u0435 \u0432\u0456\u0434\u0447\u0443\u0432\u0430\u0454\u0442\u044C\u0441\u044F',
          'motion.heading': '\u0420\u0443\u0445, \u0449\u043E \u043F\u043E\u0432\u0430\u0436\u0430\u0454 \u0432\u0430\u0448 \u0437\u0456\u0440.',
          'motion.body': '\u0412\u0456\u0441\u0456\u043C \u0448\u0430\u0440\u0456\u0432 \u0433\u043B\u0438\u0431\u0438\u043D\u0438, \u043A\u043E\u0436\u0435\u043D \u0440\u0443\u0445\u0430\u0454\u0442\u044C\u0441\u044F \u0437 \u0440\u0456\u0437\u043D\u043E\u044E \u0448\u0432\u0438\u0434\u043A\u0456\u0441\u0442\u044E. \u041F\u0440\u043E\u043A\u0440\u0443\u0442\u0456\u0442\u044C \u0432\u043D\u0438\u0437. \u0412\u0438 \u0432\u0456\u0434\u0447\u0443\u0454\u0442\u0435 \u0440\u0456\u0437\u043D\u0438\u0446\u044E.',
          'govern.label': '\u041F\u0440\u0430\u0432\u0438\u043B\u0430',
          'govern.heading': '\u041F\u2019\u044F\u0442\u044C \u043F\u0440\u0430\u0432\u0438\u043B, \u044F\u043A\u0456 \u043D\u0456\u043A\u043E\u043B\u0438 \u043D\u0435 \u0437\u043C\u0456\u043D\u044E\u044E\u0442\u044C\u0441\u044F.',
          'govern.body': '\u0428\u0406 \u043D\u0435 \u0432\u0438\u0440\u0456\u0448\u0443\u0454 \u0441\u0430\u043C\u043E\u0441\u0442\u0456\u0439\u043D\u043E. \u041D\u0435 \u0435\u0441\u043A\u0430\u043B\u0443\u0454 \u0431\u0435\u0437 \u0434\u043E\u0437\u0432\u043E\u043B\u0443. \u041D\u0435 \u0437\u043C\u0456\u043D\u044E\u0454 \u043D\u0430\u043F\u0438\u0441\u0430\u043D\u0435 \u0432\u0430\u043C\u0438. \u041D\u0435 \u043F\u0435\u0440\u0435\u043F\u0438\u0441\u0443\u0454 \u0432\u043B\u0430\u0441\u043D\u0456 \u043E\u0431\u043C\u0435\u0436\u0435\u043D\u043D\u044F. \u041A\u043E\u043B\u0438 \u0449\u043E\u0441\u044C \u043D\u0435\u0437\u0440\u043E\u0437\u0443\u043C\u0456\u043B\u043E \u2014 \u0437\u0443\u043F\u0438\u043D\u044F\u0454\u0442\u044C\u0441\u044F \u0456 \u043F\u0438\u0442\u0430\u0454.',
          'govern.card1.label': '\u041F\u043E\u0432\u043D\u0430 \u0437\u0443\u043F\u0438\u043D\u043A\u0430', 'govern.card1.detail': '\u041B\u044E\u0434\u0438\u043D\u0430 \u043F\u0435\u0440\u0435\u0432\u0456\u0440\u044F\u0454 \u043F\u0435\u0440\u0435\u0434 \u043F\u0440\u043E\u0434\u043E\u0432\u0436\u0435\u043D\u043D\u044F\u043C',
          'govern.card2.label': '\u0421\u0438\u0433\u043D\u0430\u043B', 'govern.card2.detail': '\u0429\u043E\u0441\u044C \u043F\u043E\u0442\u0440\u0435\u0431\u0443\u0454 \u0443\u0432\u0430\u0433\u0438',
          'govern.card3.label': '\u041D\u0435 \u0431\u0435\u0437 \u0437\u0433\u043E\u0434\u0438', 'govern.card3.detail': '\u0421\u0438\u0441\u0442\u0435\u043C\u0430 \u0447\u0435\u043A\u0430\u0454 \u043D\u0430 \u0432\u0430\u0441',
          'govern.card4.label': '\u0420\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0430\u0446\u0456\u0457', 'govern.card4.detail': '\u041D\u0430\u0439\u043A\u0440\u0430\u0449\u0456 \u043F\u0440\u0430\u043A\u0442\u0438\u043A\u0438, \u0437\u0430\u0432\u0436\u0434\u0438 \u0432\u0430\u0448 \u0432\u0438\u0431\u0456\u0440',
          'value.label': '\u0426\u0456\u043D\u043D\u0456\u0441\u0442\u044C',
          'value.heading': '\u0414\u0432\u0430 \u0440\u0456\u0432\u043D\u0456. \u041E\u0434\u0438\u043D \u0437\u0430\u0445\u0438\u0449\u0435\u043D\u0438\u0439 \u0430\u043A\u0442\u0438\u0432.',
          'value.body': '\u041C\u0438 \u0440\u043E\u0437\u0434\u0456\u043B\u044F\u0454\u043C\u043E \u0442\u0435, \u0449\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E \u0434\u043B\u044F \u043F\u0430\u0440\u0442\u043D\u0435\u0440\u0441\u0442\u0432\u0430, \u0432\u0456\u0434 \u0442\u043E\u0433\u043E, \u0449\u043E \u0432\u0438\u0437\u043D\u0430\u0447\u0430\u0454 \u043A\u043E\u043C\u043F\u0430\u043D\u0456\u044E. \u0412\u043E\u043D\u0438 \u043D\u0456\u043A\u043E\u043B\u0438 \u043D\u0435 \u043F\u0435\u0440\u0435\u0442\u0438\u043D\u0430\u044E\u0442\u044C\u0441\u044F.',
          'value.card1.label': '\u0406\u043D\u0432\u0435\u0441\u0442\u0438\u0446\u0456\u0439\u043D\u0438\u0439 \u0440\u0456\u0432\u0435\u043D\u044C', 'value.card1.detail': '\u0423\u043C\u043E\u0432\u0438 \u0442\u0430 \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u0430 \u0443\u0433\u043E\u0434',
          'value.card2.label': '\u0420\u0456\u0432\u0435\u043D\u044C IP', 'value.card2.detail': '\u041F\u043E\u0432\u043D\u0430 \u0430\u0440\u0445\u0456\u0442\u0435\u043A\u0442\u0443\u0440\u0430, \u043F\u0430\u0442\u0435\u043D\u0442\u0438 \u0442\u0430 \u0434\u043E\u0441\u043B\u0456\u0434\u0436\u0435\u043D\u043D\u044F',
          'cta.heading': 'Всі питання вітаються.',
          'cta.body': 'Ми тут, щоб закласти безпечне розширення, архітектура насамперед, для всіх секторів, для майбутніх поколінь. Зв’яжіться з нами.',
          'cta.button': 'Зв’язатися'
        },
        fr: {
          'hero.pre': 'Un principe.',
          'hero.title': 'L\u2019Humain avant la machine',
          'hero.subtitle': 'Chaque décision prise par une IA doit être dirigée par une personne. Nous avons construit l’architecture qui tient cette promesse, à grande échelle. Bienvenue chez ETHRAEON.',
          'built.label': 'Ce que nous avons construit',
          'built.heading': 'IA sûre pour tous les déploiements.',
          'built.body': 'Implémentations non destructives à grande échelle. Indépendant des fournisseurs. Plus de soixante-dix systèmes de classe AGI qui gouvernent le comportement de l’IA. Contactez-nous. Toutes les questions sont les bienvenues. Nous ancrons l’expansion sûre, l’architecture d’abord, pour tous les secteurs, pour les générations à venir.',
          'atlas.heading': 'L’architecture d’abord. Pour les générations à venir.',
          'govern.label': 'Les r\u00E8gles', 'govern.heading': 'Cinq r\u00E8gles qui ne fl\u00E9chissent jamais.',
          'value.label': 'La valeur', 'value.heading': 'Deux couches. Un actif prot\u00E9g\u00E9.',
          'cta.heading': 'Toutes les questions sont les bienvenues.',
          'cta.body': 'Nous ancrons l’expansion sûre, l’architecture d’abord, pour tous les secteurs, pour les générations à venir. Contactez-nous.',
          'cta.button': 'Nous contacter'
        },
        de: {
          'hero.pre': 'Ein Prinzip.',
          'hero.title': 'Der Mensch vor der Maschine',
          'hero.subtitle': 'Jede Entscheidung, die eine KI trifft, muss von einem Menschen geleitet werden. Wir haben die Architektur gebaut, die dieses Versprechen einlöst, in großem Maßstab. Willkommen bei ETHRAEON.',
          'built.label': 'Was wir gebaut haben',
          'built.heading': 'Sichere KI für alle Einsätze.',
          'atlas.heading': 'Architektur zuerst. Für kommende Generationen.',
          'govern.label': 'Die Regeln', 'govern.heading': 'F\u00FCnf Regeln, die sich nie \u00E4ndern.',
          'value.label': 'Der Wert', 'value.heading': 'Zwei Ebenen. Ein gesch\u00FCtztes Gut.',
          'cta.heading': 'Alle Fragen sind willkommen.',
          'cta.body': 'Wir verankern sichere Expansion, Architektur zuerst, für alle Branchen, für kommende Generationen. Kontaktieren Sie uns.',
          'cta.button': 'Kontakt aufnehmen'
        },
        it: {
          'hero.pre': 'Un principio.',
          'hero.title': 'L\u2019Umanit\u00E0 prima della macchina',
          'hero.subtitle': 'Ogni decisione presa da un’IA deve avere una persona che la guida. Abbiamo costruito l’architettura che mantiene questa promessa, su larga scala. Benvenuti in ETHRAEON.',
          'built.label': 'Cosa abbiamo costruito',
          'built.heading': 'IA sicura per ogni implementazione.',
          'atlas.heading': 'Architettura prima di tutto. Per le generazioni a venire.',
          'govern.label': 'Le regole', 'govern.heading': 'Cinque regole che non si piegano mai.',
          'value.label': 'Il valore', 'value.heading': 'Due livelli. Un asset protetto.',
          'cta.heading': 'Tutte le domande sono benvenute.',
          'cta.body': 'Siamo qui per ancorare l’espansione sicura, architettura prima di tutto, per tutti i settori, per le generazioni a venire. Contattateci.',
          'cta.button': 'Contattaci'
        },
        es: {
          'hero.pre': 'Un principio.',
          'hero.title': 'La humanidad antes que la m\u00E1quina',
          'hero.subtitle': 'Cada decisión que toma una IA debe tener a una persona dirigiéndola. Construimos la arquitectura que cumple esa promesa, a escala. Bienvenidos a ETHRAEON.',
          'built.label': 'Lo que construimos',
          'built.heading': 'IA segura para todas las implementaciones.',
          'atlas.heading': 'Arquitectura primero. Para las generaciones venideras.',
          'govern.label': 'Las reglas', 'govern.heading': 'Cinco reglas que nunca se doblan.',
          'value.label': 'El valor', 'value.heading': 'Dos capas. Un activo protegido.',
          'cta.heading': 'Todas las preguntas son bienvenidas.',
          'cta.body': 'Estamos aquí para anclar la expansión segura, arquitectura primero, para todos los sectores, para las generaciones venideras. Contáctenos.',
          'cta.button': 'Contáctenos'
        },
        pt: {
          'hero.pre': 'Um princípio.',
          'hero.title': 'A humanidade antes da m\u00E1quina',
          'hero.subtitle': 'Cada decisão que uma IA toma deve ter uma pessoa liderando. Construímos a arquitetura que cumpre essa promessa, em escala. Bem-vindos ao ETHRAEON.',
          'built.label': 'O que constru\u00EDmos',
          'built.heading': 'IA segura para todas as implantações.',
          'atlas.heading': 'Arquitetura primeiro. Para as gerações futuras.',
          'govern.label': 'As regras', 'govern.heading': 'Cinco regras que nunca cedem.',
          'value.label': 'O valor', 'value.heading': 'Duas camadas. Um ativo protegido.',
          'cta.heading': 'Todas as perguntas são bem-vindas.',
          'cta.body': 'Estamos aqui para ancorar a expansão segura, arquitetura primeiro, para todos os setores, para as gerações futuras. Entre em contato.',
          'cta.button': 'Entrar em Contato'
        },
        ja: {
          'hero.pre': 'ひとつの原則。',
          'hero.title': '\u6A5F\u68B0\u3088\u308A\u4EBA\u9593\u3092',
          'hero.subtitle': 'AIが下すすべての判断には、人が先導していなければならない。その約束を大規模に実現するアーキテクチャを構築しました。ETHRAEONへようこそ。',
          'built.label': '\u69CB\u7BC9\u3057\u305F\u3082\u306E',
          'built.heading': 'すべての展開に安全なAIを。',
          'atlas.heading': 'アーキテクチャ・ファースト。次世代のために。',
          'govern.label': '\u30EB\u30FC\u30EB', 'govern.heading': '\u6C7A\u3057\u3066\u66F2\u304C\u3089\u306A\u3044\u4E94\u3064\u306E\u898F\u5247\u3002',
          'value.label': '\u4FA1\u5024', 'value.heading': '\u4E8C\u3064\u306E\u5C64\u3002\u4E00\u3064\u306E\u4FDD\u8B77\u8CC7\u7523\u3002',
          'cta.heading': 'すべてのご質問を歓迎します。',
          'cta.body': 'アーキテクチャ・ファースト、すべてのセクターのために、次世代のために。お気軽にお問い合わせください。',
          'cta.button': 'お問い合わせ'
        },
        zh: {
          'hero.pre': '一个原则。',
          'hero.title': '\u4EBA\u7C7B\u5148\u4E8E\u673A\u5668',
          'hero.subtitle': 'AI做出的每一个决策，都必须由人来主导。我们构建了在规模化实现这一承诺的架构。欢迎来到ETHRAEON。',
          'built.label': '\u6211\u4EEC\u7684\u6784\u5EFA',
          'built.heading': '适用于所有部署的安全AI。',
          'atlas.heading': '架构优先。惠及世代。',
          'govern.label': '\u89C4\u5219', 'govern.heading': '\u4E94\u6761\u6C38\u4E0D\u52A8\u6447\u7684\u89C4\u5219\u3002',
          'value.label': '\u4EF7\u503C', 'value.heading': '\u4E24\u5C42\u3002\u4E00\u4E2A\u53D7\u4FDD\u62A4\u8D44\u4EA7\u3002',
          'cta.heading': '所有问题都受欢迎。',
          'cta.body': '架构优先，覆盖所有行业，惠及世代。欢迎联系我们。',
          'cta.button': '联系我们'
        },
        ar: {
          'hero.pre': 'مبدأ واحد.',
          'hero.title': '\u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064A\u0629 \u0642\u0628\u0644 \u0627\u0644\u0622\u0644\u0629',
          'hero.subtitle': 'كل قرار يتخذه الذكاء الاصطناعي يجب أن يقوده إنسان. بنينا البنية التي تفي بهذا الوعد، على نطاق واسع. مرحبًا بكم في ETHRAEON.',
          'built.label': '\u0645\u0627 \u0628\u0646\u064A\u0646\u0627\u0647',
          'built.heading': 'ذكاء اصطناعي آمن لجميع عمليات النشر.',
          'atlas.heading': 'البنية أولاً. للأجيال القادمة.',
          'govern.label': '\u0627\u0644\u0642\u0648\u0627\u0639\u062F', 'govern.heading': '\u062E\u0645\u0633 \u0642\u0648\u0627\u0639\u062F \u0644\u0627 \u062A\u0646\u062D\u0646\u064A \u0623\u0628\u062F\u064B\u0627.',
          'value.label': '\u0627\u0644\u0642\u064A\u0645\u0629', 'value.heading': '\u0637\u0628\u0642\u062A\u0627\u0646. \u0623\u0635\u0644 \u0648\u0627\u062D\u062F \u0645\u062D\u0645\u064A.',
          'cta.heading': 'جميع الأسئلة مرحب بها.',
          'cta.body': 'نحن هنا لترسيخ التوسع الآمن، البنية أولاً، لجميع القطاعات، للأجيال القادمة. تواصلوا معنا.',
          'cta.button': 'تواصلوا معنا'
        },
        hi: {
          'hero.pre': 'एक सिद्धांत।',
          'hero.title': '\u092E\u0936\u0940\u0928 \u0938\u0947 \u092A\u0939\u0932\u0947 \u092E\u093E\u0928\u0935\u0924\u093E',
          'hero.subtitle': 'AI का हर निर्णय एक व्यक्ति के नेतृत्व में होना चाहिए। हमने वह आर्किटेक्चर बनाया है जो इस वादे को बड़े पैमाने पर पूरा करता है। ETHRAEON में आपका स्वागत है।',
          'built.label': '\u0939\u092E\u0928\u0947 \u0915\u094D\u092F\u093E \u092C\u0928\u093E\u092F\u093E',
          'built.heading': 'सभी परिनियोजनों के लिए सुरक्षित AI।',
          'atlas.heading': 'आर्किटेक्चर पहले। आने वाली पीढ़ियों के लिए।',
          'govern.label': '\u0928\u093F\u092F\u092E', 'govern.heading': '\u092A\u093E\u0901\u091A \u0928\u093F\u092F\u092E \u091C\u094B \u0915\u092D\u0940 \u0928\u0939\u0940\u0902 \u092C\u0926\u0932\u0924\u0947\u0964',
          'value.label': '\u092E\u0942\u0932\u094D\u092F', 'value.heading': '\u0926\u094B \u092A\u0930\u0924\u0947\u0902\u0964 \u090F\u0915 \u0938\u0941\u0930\u0915\u094D\u0937\u093F\u0924 \u0938\u0902\u092A\u0924\u094D\u0924\u093F\u0964',
          'cta.heading': 'सभी प्रश्नों का स्वागत है।',
          'cta.body': 'हम सुरक्षित विस्तार को स्थापित करने के लिए हैं, आर्किटेक्चर पहले, सभी क्षेत्रों के लिए, आने वाली पीढ़ियों के लिए। संपर्क करें।',
          'cta.button': 'संपर्क करें'
        },
        sw: {
          'hero.pre': 'Kanuni moja.',
          'hero.title': 'Ubinadamu kabla ya mashine',
          'hero.subtitle': 'Kila uamuzi unaofanywa na AI lazima uongozwe na mtu. Tulijenga usanifu unaotimiza ahadi hiyo, kwa kiwango kikubwa. Karibu ETHRAEON.',
          'built.label': 'Tulichojenga',
          'built.heading': 'AI salama kwa utekelezaji wote.',
          'atlas.heading': 'Usanifu kwanza. Kwa vizazi vijavyo.',
          'govern.label': 'Sheria', 'govern.heading': 'Sheria tano ambazo hazibadiliki.',
          'value.label': 'Thamani', 'value.heading': 'Tabaka mbili. Mali moja iliyolindwa.',
          'cta.heading': 'Maswali yote yanakaribishwa.',
          'cta.body': 'Tuko hapa kusimika upanuzi salama, usanifu kwanza, kwa sekta zote, kwa vizazi vijavyo. Wasiliana nasi.',
          'cta.button': 'Wasiliana Nasi'
        },
        ko: {
          'hero.pre': '하나의 원칙.',
          'hero.title': '\uAE30\uACC4\uBCF4\uB2E4 \uC778\uB958\uAC00 \uBA3C\uC800',
          'hero.subtitle': 'AI가 내리는 모든 결정에는 사람이 이끌어야 합니다. 그 약속을 대규모로 이행하는 아키텍처를 구축했습니다. ETHRAEON에 오신 것을 환영합니다.',
          'built.label': '\uC6B0\uB9AC\uAC00 \uB9CC\uB4E0 \uAC83',
          'built.heading': '모든 배포를 위한 안전한 AI.',
          'atlas.heading': '아키텍처 우선. 다음 세대를 위해.',
          'govern.label': '\uADDC\uCE59', 'govern.heading': '\uACB0\uCF54 \uAD7D\uD788\uC9C0 \uC54A\uB294 \uB2E4\uC12F \uADDC\uCE59.',
          'value.label': '\uAC00\uCE58', 'value.heading': '\uB450 \uACC4\uCE35. \uD558\uB098\uC758 \uBCF4\uD638 \uC790\uC0B0.',
          'cta.heading': '모든 질문을 환영합니다.',
          'cta.body': '아키텍처 우선, 모든 분야, 다음 세대를 위한 안전한 확장을 정착시키기 위해 여기 있습니다. 문의해 주세요.',
          'cta.button': '문의하기'
        },
        he: {
          'hero.pre': 'עיקרון אחד.',
          'hero.title': '\u05D0\u05E0\u05D5\u05E9\u05D5\u05EA \u05DC\u05E4\u05E0\u05D9 \u05D4\u05DE\u05DB\u05D5\u05E0\u05D4',
          'hero.subtitle': 'כל החלטה שבינה מלאכותית מקבלת חייבת להיות בהובלת אדם. בנינו את הארכיטקטורה שמממשת את ההבטחה הזו, בקנה מידה. ברוכים הבאים ל-ETHRAEON.',
          'built.label': '\u05DE\u05D4 \u05E9\u05D1\u05E0\u05D9\u05E0\u05D5',
          'built.heading': 'בינה מלאכותית בטוחה לכל הפריסות.',
          'atlas.heading': 'ארכיטקטורה קודמת. לדורות הבאים.',
          'govern.label': '\u05D4\u05DB\u05DC\u05DC\u05D9\u05DD', 'govern.heading': '\u05D7\u05DE\u05D9\u05E9\u05D4 \u05DB\u05DC\u05DC\u05D9\u05DD \u05E9\u05DC\u05E2\u05D5\u05DC\u05DD \u05DC\u05D0 \u05E0\u05DB\u05E0\u05E2\u05D9\u05DD.',
          'value.label': '\u05E2\u05E8\u05DA', 'value.heading': '\u05E9\u05EA\u05D9 \u05E9\u05DB\u05D1\u05D5\u05EA. \u05E0\u05DB\u05E1 \u05D0\u05D7\u05D3 \u05DE\u05D5\u05D2\u05DF.'
        }
      };

      // RTL languages
      const RTL_LANGS = ['ar', 'he'];

      // Language switcher engine
      function setLanguage(lang) {
        const strings = I18N_STRINGS[lang];
        if (!strings) return;

        // Set direction
        const dir = RTL_LANGS.includes(lang) ? 'rtl' : 'ltr';
        document.documentElement.setAttribute('lang', lang);
        document.documentElement.setAttribute('data-lang', lang);
        document.documentElement.setAttribute('dir', dir);

        // Apply strings with graceful fallback to English
        document.querySelectorAll('[data-i18n]').forEach(el => {
          const key = el.getAttribute('data-i18n');
          const text = strings[key] || I18N_STRINGS.en[key];
          if (text) el.textContent = text;
        });

        // Announce to screen readers
        const status = document.getElementById('ariaStatus');
        if (status) {
          const langNames = {
            en: 'English', uk: '\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430', fr: 'Fran\u00E7ais',
            de: 'Deutsch', it: 'Italiano', es: 'Espa\u00F1ol', pt: 'Portugu\u00EAs',
            ja: '\u65E5\u672C\u8A9E', zh: '\u4E2D\u6587', ar: '\u0627\u0644\u0639\u0631\u0628\u064A\u0629',
            hi: '\u0939\u093F\u0928\u094D\u0926\u0940', sw: 'Kiswahili', ko: '\uD55C\uAD6D\uC5B4', he: '\u05E2\u05D1\u05E8\u05D9\u05EA'
          };
          status.textContent = 'Language changed to ' + (langNames[lang] || lang);
        }

        // Persist preference
        try { localStorage.setItem('euds-lang', lang); } catch (e) { }
      }

      // Expose i18n API
      window.EUDS_PARALLAX.i18n = {
        setLanguage,
        getLanguage: () => document.documentElement.getAttribute('data-lang') || 'en',
        getSupportedLanguages: () => Object.keys(I18N_STRINGS),
        getStrings: (lang) => I18N_STRINGS[lang] || I18N_STRINGS.en
      };

      // Restore saved language preference
      try {
        const saved = localStorage.getItem('euds-lang');
        if (saved && I18N_STRINGS[saved]) {
          if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function () {
              setLanguage(saved);
            });
          } else {
            setLanguage(saved);
          }
        }
      } catch (e) { }

  </script>




</html>
<footer style="background:rgba(10,10,30,0.95);border-top:1px solid rgba(212,168,67,0.3);padding:3rem 2rem;margin-top:4rem;font-family:Inter,system-ui,sans-serif;color:#b8b4af;">
  <div style="max-width:1200px;margin:0 auto;">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem;">
      <div>
        <p style="color:#d4a843;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;">Core</p>
        <a href="https://ethraeon.ai" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">ethraeon.ai</a>
        <a href="https://ethraeon.systems" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">ethraeon.systems</a>
        <a href="https://ethraeon.com" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">ethraeon.com</a>
      </div>
      <div>
        <p style="color:#d4a843;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;">Constellation</p>
        <a href="https://genthos.systems" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Genthos</a>
        <a href="https://sovrin.systems" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Sovrin</a>
        <a href="https://orbitalframework.org" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Orbital</a>
        <a href="https://genesisfoundation.systems" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Genesis</a>
        <a href="https://arcanumtech.io" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Arcanum</a>
        <a href="https://kairossystem.com" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">KAIROS</a>
        <a href="https://hfos.systems" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">HF_OS</a>
        <a href="https://velcoria.org" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">VELCORIA</a>
        <a href="https://ingombrante.com" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">ingombrante</a>
      </div>
      <div>
        <p style="color:#d4a843;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;">Products</p>
        <a href="/products/challenge-board.html" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Challenge Board</a>
        <a href="/products/color-vision-pro.html" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Color Vision Pro</a>
        <a href="/products/decision-trace.html" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Decision Trace</a>
        <a href="/products/democratic-ai.html" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Democratic AI</a>
        <a href="/rylins-faith/" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Rylin's Faith</a>
      </div>
      <div>
        <p style="color:#d4a843;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;">Research</p>
        <a href="/research/agi/" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">AGI Research</a>
        <a href="/papers/" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Papers (33)</a>
        <a href="/scl/" style="display:block;color:#b8b4af;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">SCL</a>
        <a href="mailto:jason@ethraeon.systems" style="display:block;color:#d4a843;text-decoration:none;margin-bottom:0.4rem;font-size:0.875rem;">Contact</a>
      </div>
    </div>
    <div style="text-align:center;padding-top:1.5rem;border-top:1px solid rgba(212,168,67,0.15);">
      <p style="font-size:0.75rem;">&copy; S. Jason Prohaska (ingombrante&copy;) 2024-2026. All Rights Reserved.</p>
      <p style="font-size:0.7rem;">Schedule A+ Enhanced IP Firewall Protected. | ORCID: 0009-0008-8254-8411</p>
      <p style="font-size:0.7rem;">687e0c0f | FORGE 0768 | DSUM 6.0 | Humanitas ante Machinam.</p>
    </div>
  </div>
</footer>