- robotsTxtUrl
- https://metaop.ai/robots.txt
- exists
- true
- rawRobotsTxt
- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Metaop.ai — Be understood</title>
<meta name="description" content="An AI signal intelligence layer for the people in your life. MetaopAI listens, remembers, and surfaces patterns — without rendering verdicts. The missing context layer for AI." />
<meta name="theme-color" content="#0a0a14" />
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png?v=2" />
<link rel="icon" type="image/png" sizes="64x64" href="images/favicon-64.png?v=2" />
<link rel="icon" type="image/png" sizes="192x192" href="images/favicon-192.png?v=2" />
<link rel="apple-touch-icon" href="images/app-icon.png?v=2" />
<!-- Open Graph -->
<meta property="og:title" content="Metaop.ai — Be understood" />
<meta property="og:description" content="An AI signal intelligence layer for the people in your life. We listen, remember, and surface patterns — not verdicts." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://metaop.ai" />
<!-- Fonts: Manrope (body/UI), Instrument Serif (editorial), JetBrains Mono (labels) -->
<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=Manrope:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
/* ─────────────────────────────────────────────────
DESIGN TOKENS
───────────────────────────────────────────────── */
:root {
/* Surface */
--bg: #0b0b14;
--bg-deep: #06060d;
--bg-elevated: #11111e;
--panel: #13131f;
--panel-soft: #181826;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.16);
--border-bright: rgba(167, 139, 250, 0.28);
/* Ink (text) — high-contrast, calibrated for readability */
--ink: #f5f4ff;
--ink-soft: #d8d4f0;
--ink-muted: #a8a4c8;
--ink-dim: #6e6a8e;
/* Brand */
--violet: #a78bfa;
--violet-deep: #8b5cf6;
--cyan: #7dd3fc;
--cyan-deep: #38bdf8;
--grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #38bdf8 100%);
--grad-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.16) 0%, rgba(56, 189, 248, 0.16) 100%);
/* Semantic */
--green: #2db86b;
/* Typography */
--font-display: 'Instrument Serif', Georgia, serif;
--font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Rhythm */
--rad-sm: 8px;
--rad: 12px;
--rad-lg: 18px;
--rad-xl: 24px;
}
/* ─────────────────────────────────────────────────
RESET
───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
/* Soft atmospheric backdrop */
body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 15% -10%, rgba(139, 92, 246, 0.12), transparent 60%),
radial-gradient(ellipse 50% 45% at 90% 20%, rgba(56, 189, 248, 0.08), transparent 60%),
radial-gradient(ellipse 40% 40% at 50% 100%, rgba(139, 92, 246, 0.05), transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Subtle grain */
body::after {
content: "";
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
opacity: 0.025;
pointer-events: none;
z-index: 0;
mix-blend-mode: overlay;
}
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 1;
}
.container.narrow { max-width: 880px; }
.container.wide { max-width: 1400px; }
/* ─────────────────────────────────────────────────
TYPOGRAPHY UTILITIES
───────────────────────────────────────────────── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--violet);
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 28px; height: 1px;
background: var(--violet);
opacity: 0.55;
}
.eyebrow.no-line::before { display: none; }
.eyebrow.dim { color: var(--ink-dim); }
.eyebrow.dim::before { background: var(--ink-dim); }
.section-number {
position: absolute;
top: 56px;
right: 40px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--ink-dim);
z-index: 2;
}
h1, h2, h3, h4 {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--ink);
}
.display-serif {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.05;
}
.display-serif em { font-style: normal; }
/* The gradient text accent — used sparingly */
.grad-text {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ─────────────────────────────────────────────────
NAVIGATION
───────────────────────────────────────────────── */
nav.top {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(11, 11, 20, 0.72);
border-bottom: 1px solid var(--border);
}
nav.top .row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
}
.brand-mark {
height: 32px;
width: auto;
}
.brand-name {
font-family: var(--font-sans);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.02em;
color: var(--ink);
}
.brand-name .dot { color: var(--violet); }
.nav-links {
display: flex;
align-items: center;
gap: 28px;
}
.nav-links a {
color: var(--ink-muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.nav-whitepaper {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--violet);
}
.nav-links a.nav-whitepaper:hover { color: var(--cyan); }
.nav-links a.nav-whitepaper svg {
transition: transform 0.2s;
}
.nav-links a.nav-whitepaper:hover svg {
transform: translate(2px, -2px);
}
.cta-group { display: flex; align-items: center; gap: 10px; }
/* ─────────────────────────────────────────────────
BUTTONS
───────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--rad);
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
white-space: nowrap;
}
.btn-ghost {
color: var(--ink);
background: transparent;
border-color: var(--border-strong);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.24);
}
.btn-primary {
color: white;
background: var(--grad);
box-shadow: 0 8px 28px -10px rgba(139, 92, 246, 0.55);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 16px 40px -10px rgba(139, 92, 246, 0.7);
}
.btn-primary svg { transition: transform 0.25s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-lg { padding: 15px 26px; font-size: 15px; }
/* ─────────────────────────────────────────────────
HERO
───────────────────────────────────────────────── */
section.hero {
position: relative;
padding: 100px 0 80px;
min-height: 88vh;
display: flex;
align-items: center;
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 72px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--violet);
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 8px 14px;
border: 1px solid rgba(167, 139, 250, 0.22);
background: rgba(139, 92, 246, 0.06);
border-radius: 999px;
margin-bottom: 32px;
}
.hero-pill .pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--violet);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.6); }
70% { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0); }
100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}
.hero h1 {
font-size: clamp(2.75rem, 6.5vw, 5.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
margin-bottom: 28px;
color: var(--ink);
}
.hero h1 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
letter-spacing: -0.02em;
}
.hero h1 .grad-text {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.hero .lead {
font-size: 1.18rem;
font-weight: 400;
color: var(--ink-soft);
max-width: 560px;
margin-bottom: 40px;
line-height: 1.55;
}
.hero .lead strong { color: var(--ink); font-weight: 600; }
.hero .cta-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.hero .meta-line {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--ink-dim);
text-transform: uppercase;
}
.hero .meta-line .live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
animation: pulse-green 2.4s infinite;
}
.hero .meta-line .beta-badge {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--violet);
border: 1px solid var(--border-bright);
border-radius: 999px;
padding: 4px 10px;
background: rgba(139, 92, 246, 0.08);
}
@keyframes pulse-green {
0% { box-shadow: 0 0 0 0 rgba(45, 184, 107, 0.5); }
70% { box-shadow: 0 0 0 6px rgba(45, 184, 107, 0); }
100% { box-shadow: 0 0 0 0 rgba(45, 184, 107, 0); }
}
/* ─────────────────────────────────────────────────
HERO ORBITAL — 7 independently rotating rings
Each ring is its own absolutely-positioned square div
centered in the visual. Size cascades inward from 100%
(Signal, outermost) to ~20% (Compound, innermost),
surrounding the M logo at the center.
───────────────────────────────────────────────── */
.hero-visual {
position: relative;
width: 100%;
max-width: 480px;
aspect-ratio: 1;
margin-left: auto;
perspective: 1200px;
}
/* Soft atmospheric backdrop */
.orbit-glow {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(
circle at center,
rgba(167, 139, 250, 0.18) 0%,
rgba(56, 189, 248, 0.06) 40%,
transparent 75%
);
pointer-events: none;
}
/* Generic ring container: positioned with top/left + negative margins so the
transform property is free for pure rotation animation. */
.orbit-ring {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
pointer-events: none;
will-change: transform;
}
.orbit-ring svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Ring text label — sits at the top edge of each ring, counter-rotates to stay readable */
.orbit-label {
position: absolute;
top: 0;
left: 50%;
transform-origin: center 50%;
font-family: var(--font-mono);
font-size: 8.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--violet);
opacity: 0.65;
white-space: nowrap;
padding: 2px 6px;
will-change: transform;
}
/* Per-ring sizing, rotation speed, and direction.
The negative margin equals half the width to center the ring.
Labels counter-rotate at the same speed to stay upright as the ring spins. */
/* Ring 1 — SIGNAL (outermost) */
.orbit-ring.r-signal {
width: 96%; height: 96%;
margin: -48% 0 0 -48%;
animation: spin-cw 90s linear infinite;
animation-delay: 0s;
}
.orbit-ring.r-signal .orbit-label {
color: #a78bfa;
animation: label-ccw 90s linear infinite;
animation-delay: 0s;
}
/* Ring 2 — EVENT */
.orbit-ring.r-event {
width: 80%; height: 80%;
margin: -40% 0 0 -40%;
animation: spin-cw 70s linear infinite;
animation-delay: -12s;
}
.orbit-ring.r-event .orbit-label {
color: #7dd3fc;
animation: label-ccw 70s linear infinite;
animation-delay: -12s;
}
/* Ring 3 — CONTEXT */
.orbit-ring.r-context {
width: 65%; height: 65%;
margin: -32.5% 0 0 -32.5%;
animation: spin-cw 55s linear infinite;
animation-delay: -24s;
}
.orbit-ring.r-context .orbit-label {
color: #a78bfa;
animation: label-ccw 55s linear infinite;
animation-delay: -24s;
}
/* Ring 4 — META-CONTEXT */
.orbit-ring.r-meta {
width: 52%; height: 52%;
margin: -26% 0 0 -26%;
animation: spin-cw 42s linear infinite;
animation-delay: -8s;
}
.orbit-ring.r-meta .orbit-label {
color: #7dd3fc;
animation: label-ccw 42s linear infinite;
animation-delay: -8s;
font-size: 7.5px;
letter-spacing: 0.24em;
}
/* Ring 5 — PATTERN */
.orbit-ring.r-pattern {
width: 41%; height: 41%;
margin: -20.5% 0 0 -20.5%;
animation: spin-cw 32s linear infinite;
animation-delay: -18s;
}
.orbit-ring.r-pattern .orbit-label {
color: #fb923c;
animation: label-ccw 32s linear infinite;
animation-delay: -18s;
font-size: 7.5px;
}
/* Ring 6 — MULTI-PATTERN */
.orbit-ring.r-multi {
width: 32%; height: 32%;
margin: -16% 0 0 -16%;
animation: spin-cw 24s linear infinite;
animation-delay: -5s;
}
.orbit-ring.r-multi .orbit-label {
color: #fb923c;
animation: label-ccw 24s linear infinite;
animation-delay: -5s;
font-size: 7px;
letter-spacing: 0.22em;
}
/* Ring 7 — COMPOUND (innermost, brightest, fastest — synthesizing core) */
.orbit-ring.r-compound {
width: 24%; height: 24%;
margin: -12% 0 0 -12%;
animation: spin-cw 16s linear infinite;
animation-delay: -10s;
}
.orbit-ring.r-compound .orbit-label.compound-label {
color: var(--cyan);
opacity: 0.95;
font-size: 7px;
letter-spacing: 0.22em;
animation: label-ccw 16s linear infinite;
animation-delay: -10s;
text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
/* Pure-rotation keyframes for RINGS — element is centered via top/left + margin,
so we can rotate freely without touching translate. */
@keyframes spin-cw {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spin-ccw {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* Keyframes for LABELS — labels carry a translate offset to sit at the ring's top edge,
and counter-rotate to stay upright. */
@keyframes label-cw {
from { transform: translate(-50%, -110%) rotate(0deg); }
to { transform: translate(-50%, -110%) rotate(360deg); }
}
@keyframes label-ccw {
from { transform: translate(-50%, -110%) rotate(0deg); }
to { transform: translate(-50%, -110%) rotate(-360deg); }
}
/* M logo — anchored at the absolute center, never rotates */
.hero-visual-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16%;
height: auto;
z-index: 10;
filter: drop-shadow(0 4px 18px rgba(139, 92, 246, 0.55));
pointer-events: none;
}
.hero-visual-logo-fallback {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16%;
aspect-ratio: 1;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
background: var(--grad);
border-radius: 12px;
box-shadow: 0 4px 18px rgba(139, 92, 246, 0.55);
pointer-events: none;
}
.hero-visual-logo-fallback span {
font-family: var(--font-sans);
font-weight: 800;
font-size: 1.6rem;
color: white;
letter-spacing: -0.04em;
}
/* Reduced motion — stop spinning */
@media (prefers-reduced-motion: reduce) {
.orbit-ring, .orbit-label { animation: none !important; }
}
.hero-stores {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 24px;
}
.store-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-radius: var(--rad);
border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, 0.02);
color: var(--ink-muted);
transition: all 0.2s;
}
.store-badge:hover {
border-color: rgba(167, 139, 250, 0.25);
background: rgba(167, 139, 250, 0.04);
}
.store-badge .badge-icon { width: 18px; height: 18px; color: var(--ink); }
.store-badge .badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge .badge-soon {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
color: var(--ink-dim);
text-transform: uppercase;
}
.store-badge .badge-name {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
/* ─────────────────────────────────────────────────
SECTION: WHAT IS METAOPAI
(Plain-language explainer)
───────────────────────────────────────────────── */
section.what-is {
position: relative;
padding: 130px 0 110px;
border-top: 1px solid var(--border);
}
.what-is-wrap {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.what-is-wrap .eyebrow { justify-content: center; margin-bottom: 22px; }
.what-is-wrap .eyebrow::before { display: none; }
.what-is-wrap h2 {
font-size: clamp(2rem, 4.4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 30px;
}
.what-is-wrap h2 .serif { font-family: var(--font-display); font-weight: 400; font-style: normal; }
.what-is-body {
font-size: 1.12rem;
color: var(--ink-soft);
line-height: 1.78;
text-align: left;
}
.what-is-body strong { color: var(--ink); font-weight: 600; }
.what-is-body .krl-scopes {
font-family: var(--font-mono);
font-size: 0.95em;
color: var(--violet);
}
.what-is-motto {
margin-top: 34px;
font-family: var(--font-display);
font-size: clamp(1.4rem, 3vw, 1.9rem);
line-height: 1.35;
color: var(--ink);
}
.what-is-motto .grad-text {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Quick "sits in the gap" chips */
.what-is-gaps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 44px;
}
.what-is-gaps .chip {
font-size: 0.9rem;
color: var(--ink-muted);
border: 1px solid var(--border);
border-radius: 999px;
padding: 9px 18px;
background: rgba(255,255,255,0.02);
}
.what-is-gaps .chip strong { color: var(--ink); font-weight: 600; }
/* ─────────────────────────────────────────────────
SECTION: THE CONFIDANT PROBLEM
(Story-first, for non-tech readers)
───────────────────────────────────────────────── */
section.problem {
position: relative;
padding: 140px 0 100px;
border-top: 1px solid var(--border);
}
.problem-intro {
max-width: 780px;
margin-bottom: 80px;
}
.problem-intro .eyebrow { margin-bottom: 28px; }
.problem-intro h2 {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.08;
margin-bottom: 28px;
}
.problem-intro h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
letter-spacing: -0.015em;
}
.problem-intro p {
font-size: 1.18rem;
color: var(--ink-soft);
line-height: 1.6;
max-width: 680px;
}
.problem-intro p + p { margin-top: 20px; }
.options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 80px;
}
.option-card {
position: relative;
padding: 36px 32px;
border: 1px solid var(--border);
border-radius: var(--rad-lg);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
transition: all 0.3s;
}
.option-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
}
.option-card .opt-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--ink-dim);
text-transform: uppercase;
margin-bottom: 20px;
display: block;
}
.option-card h3 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 14px;
}
.option-card .gap {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
color: #ef6464;
text-transform: uppercase;
margin-bottom: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.option-card .gap::before {
content: "";
width: 12px; height: 1px;
background: #ef6464;
opacity: 0.7;
}
.option-card p {
color: var(--ink-muted);
font-size: 0.97rem;
line-height: 1.6;
}
.gap-statement {
max-width: 820px;
padding: 56px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.gap-statement .marker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--violet);
text-transform: uppercase;
margin-bottom: 24px;
display: block;
}
.gap-statement p {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3.2vw, 2.4rem);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink);
}
.gap-statement p em {
font-style: normal;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ─────────────────────────────────────────────────
SECTION: THE EXPERIMENT / HYPOTHESIS
(Bridge to tech audience — exploratory framing)
───────────────────────────────────────────────── */
section.experiment {
position: relative;
padding: 140px 0;
border-top: 1px solid var(--border);
}
.experiment-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 80px;
align-items: start;
}
.experiment-label {
position: sticky;
top: 120px;
}
.experiment-label .eyebrow { margin-bottom: 20px; }
.experiment-label .label-text {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-dim);
letter-spacing: 0.05em;
line-height: 1.7;
}
.experiment-label .label-text .key {
display: block;
color: var(--violet);
margin-bottom: 4px;
}
.experiment-body h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 36px;
}
.experiment-body h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.experiment-body p {
font-size: 1.13rem;
color: var(--ink-soft);
line-height: 1.65;
margin-bottom: 24px;
}
.experiment-body p strong {
color: var(--ink);
font-weight: 600;
}
.experiment-body p:last-child { margin-bottom: 0; }
.hypothesis-card {
margin-top: 48px;
padding: 32px;
border: 1px solid var(--border-bright);
border-radius: var(--rad-lg);
background: linear-gradient(180deg, rgba(139, 92, 246, 0.06), rgba(56, 189, 248, 0.02));
position: relative;
overflow: hidden;
}
.hypothesis-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
}
.hypothesis-card .h-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--violet);
text-transform: uppercase;
margin-bottom: 16px;
display: block;
}
.hypothesis-card p {
font-family: var(--font-display);
font-size: 1.45rem;
line-height: 1.4;
letter-spacing: -0.015em;
color: var(--ink);
font-weight: 400;
margin: 0;
}
.hypothesis-card p em {
font-style: normal;
color: var(--cyan);
}
/* ─────────────────────────────────────────────────
SECTION: HOW IT WORKS (the four-move flow)
───────────────────────────────────────────────── */
section.flow {
position: relative;
padding: 140px 0;
border-top: 1px solid var(--border);
}
.flow-header {
max-width: 780px;
margin-bottom: 72px;
}
.flow-header .eyebrow { margin-bottom: 24px; }
.flow-header h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 20px;
}
.flow-header h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.flow-header p {
font-size: 1.13rem;
color: var(--ink-muted);
line-height: 1.6;
max-width: 640px;
}
.flow-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--rad-lg);
overflow: hidden;
}
.flow-step {
padding: 40px 32px 44px;
background: var(--bg);
position: relative;
transition: background 0.3s;
}
.flow-step:hover { background: var(--panel); }
.flow-step .step-tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--violet);
text-transform: uppercase;
margin-bottom: 24px;
display: block;
}
.flow-step .step-icon {
width: 44px; height: 44px;
border-radius: var(--rad);
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(167, 139, 250, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--violet);
}
.flow-step:nth-child(2) .step-icon { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.25); color: #818cf8; }
.flow-step:nth-child(3) .step-icon { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.25); color: var(--cyan); }
.flow-step:nth-child(4) .step-icon { background: rgba(45, 184, 107, 0.1); border-color: rgba(45, 184, 107, 0.25); color: var(--green); }
.flow-step .step-icon svg { width: 22px; height: 22px; }
.flow-step h3 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 12px;
}
.flow-step p {
color: var(--ink-muted);
font-size: 0.95rem;
line-height: 1.6;
}
/* ─────────────────────────────────────────────────
SECTION: KRL ARCHITECTURE
───────────────────────────────────────────────── */
section.architecture {
position: relative;
padding: 140px 0;
border-top: 1px solid var(--border);
}
.arch-header {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
margin-bottom: 72px;
align-items: end;
}
.arch-header .left .eyebrow { margin-bottom: 24px; }
.arch-header .left h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
}
.arch-header .left h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.arch-header .right p {
font-size: 1.13rem;
color: var(--ink-soft);
line-height: 1.65;
}
.arch-header .right p + p { margin-top: 18px; }
.arch-header .right p strong { color: var(--ink); font-weight: 600; }
.krl-diagram-wrap {
position: relative;
padding: 28px;
border: 1px solid var(--border-strong);
border-radius: var(--rad-xl);
background: rgba(11, 11, 20, 0.6);
box-shadow:
0 24px 60px -20px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.02) inset;
overflow: hidden;
}
.krl-diagram-wrap::before {
content: "";
position: absolute;
top: -1px; left: -1px; right: -1px; height: 2px;
background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
opacity: 0.6;
}
.krl-diagram-wrap img {
width: 100%;
height: auto;
border-radius: var(--rad-lg);
display: block;
}
.krl-caption {
margin-top: 20px;
padding: 0 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--ink-dim);
text-transform: uppercase;
text-align: center;
line-height: 1.7;
}
.krl-caption strong {
color: var(--violet);
font-weight: 500;
}
.krl-deeplink {
margin-top: 28px;
display: flex;
justify-content: center;
}
.krl-deeplink a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 22px;
border-radius: 999px;
border: 1px solid var(--border-bright);
background: rgba(139, 92, 246, 0.06);
color: var(--ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s;
}
.krl-deeplink a:hover {
background: rgba(139, 92, 246, 0.12);
border-color: rgba(167, 139, 250, 0.5);
transform: translateY(-1px);
}
.krl-deeplink a svg {
color: var(--violet);
transition: transform 0.2s;
}
.krl-deeplink a:hover svg {
transform: translate(2px, -2px);
color: var(--cyan);
}
/* ── Explainer figure stack (the cognition-orchestrator diagrams) ── */
.explainers {
margin-top: 96px;
display: flex;
flex-direction: column;
gap: 72px;
}
.explainer {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
.explainer .ex-head {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.explainer .ex-head .eyebrow { justify-content: center; }
.explainer .ex-head .eyebrow::before { display: none; }
.explainer .ex-head h3 {
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.12;
margin: 14px 0 12px;
}
.explainer .ex-head h3 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.explainer .ex-head p {
font-size: 1.04rem;
color: var(--ink-muted);
line-height: 1.62;
}
/* Plain figure — no heavy frame, just a hairline + soft glow so the
on-brand dark graphics blend straight into the page background. */
.figure-plain {
position: relative;
border: 1px solid var(--border);
border-radius: var(--rad-lg);
background: rgba(6, 6, 13, 0.5);
padding: 10px;
overflow: hidden;
}
.figure-plain::before {
content: "";
position: absolute;
top: -1px; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
opacity: 0.4;
}
.figure-plain img {
width: 100%;
height: auto;
border-radius: var(--rad);
display: block;
}
/* Light variant — for the (white-background) composer diagram, framed so it
reads as a deliberate spec panel rather than a broken dark figure. */
.figure-plain.light {
background: #f4f4fa;
border-color: var(--border-strong);
padding: 16px;
box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
}
.figure-plain.light::before { left: 16%; right: 16%; opacity: 0.7; }
/* Intro lead before the runtime-walkthrough figures */
.explainers-intro {
max-width: 760px;
margin: 92px auto 8px;
text-align: center;
}
.explainers-intro .eyebrow { justify-content: center; margin-bottom: 16px; }
.explainers-intro .eyebrow::before { display: none; }
.explainers-intro .explainers-title {
font-size: clamp(1.7rem, 3.4vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.12;
margin-bottom: 14px;
}
.explainers-intro .explainers-title .serif { font-family: var(--font-display); font-weight: 400; font-style: normal; }
.explainers-intro p { color: var(--ink-muted); font-size: 1.05rem; line-height: 1.62; }
/* ── Clean product shot (replaces the old device frame) ── */
.shot {
position: relative;
border-radius: var(--rad-lg);
overflow: hidden;
border: 1px solid var(--border);
background: rgba(6, 6, 13, 0.4);
transition: transform 0.4s, border-color 0.4s;
}
.shot::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--rad-lg);
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
pointer-events: none;
}
.shot:hover {
transform: translateY(-4px);
border-color: var(--border-bright);
}
.shot img {
width: 100%;
height: auto;
display: block;
}
/* ── Security & privacy teaser ── */
section.security-teaser {
position: relative;
padding: 130px 0;
border-top: 1px solid var(--border);
}
.sec-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.sec-left .eyebrow { margin-bottom: 22px; }
.sec-left h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 22px;
}
.sec-left h2 .serif { font-family: var(--font-display); font-style: normal; font-weight: 400; }
.sec-left > p {
font-size: 1.07rem;
color: var(--ink-soft);
line-height: 1.66;
margin-bottom: 18px;
max-width: 520px;
}
.sec-philosophy {
font-family: var(--font-display);
font-size: 1.25rem !important;
color: var(--ink) !important;
line-height: 1.5 !important;
padding-left: 18px;
border-left: 2px solid var(--violet);
margin-bottom: 28px !important;
}
.sec-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: 999px;
border: 1px solid var(--border-bright);
background: rgba(139, 92, 246, 0.06);
color: var(--ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s;
}
.sec-link:hover {
background: rgba(139, 92, 246, 0.12);
border-color: rgba(167, 139, 250, 0.5);
transform: translateY(-1px);
}
.sec-link svg { color: var(--violet); transition: transform 0.2s; }
.sec-link:hover svg { transform: translateX(3px); color: var(--cyan); }
.sec-points { list-style: none; }
.sec-points li {
display: grid;
grid-template-columns: 14px 1fr;
gap: 18px;
align-items: start;
padding: 22px 0;
border-top: 1px solid var(--border);
}
.sec-points li:last-child { border-bottom: 1px solid var(--border); }
.sec-dot {
width: 9px; height: 9px;
margin-top: 8px;
border-radius: 50%;
background: var(--grad);
}
.sec-points strong {
display: block;
color: var(--ink);
font-weight: 600;
font-size: 1.02rem;
margin-bottom: 4px;
}
.sec-points span:not(.sec-dot) {
color: var(--ink-muted);
font-size: 0.95rem;
line-height: 1.55;
}
@media (max-width: 900px) {
.sec-wrap { grid-template-columns: 1fr; gap: 40px; }
}
/* The five layers explainer */
.layers-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-top: 64px;
}
.layer-card {
padding: 28px 22px;
border: 1px solid var(--border);
border-radius: var(--rad);
background: rgba(255, 255, 255, 0.015);
transition: all 0.3s;
position: relative;
}
.layer-card:hover {
border-color: var(--border-strong);
background: rgba(255, 255, 255, 0.03);
}
.layer-card .layer-num {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--ink-dim);
text-transform: uppercase;
margin-bottom: 16px;
display: block;
}
.layer-card h4 {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 8px;
}
.layer-card .stability {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 14px;
display: inline-block;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--border-strong);
}
.layer-card p {
font-size: 0.87rem;
color: var(--ink-muted);
line-height: 1.55;
}
/* Layer-specific accents — flow order: Signal (raw) → Event → Context → Meta-Context → Pattern (emergent) */
.layer-card.l-signal h4 { color: var(--violet); }
.layer-card.l-signal .stability { color: var(--violet); border-color: rgba(167, 139, 250, 0.3); }
.layer-card.l-event h4 { color: #818cf8; }
.layer-card.l-event .stability { color: #818cf8; border-color: rgba(129, 140, 248, 0.3); }
.layer-card.l-context h4 { color: var(--green); }
.layer-card.l-context .stability { color: var(--green); border-color: rgba(45, 184, 107, 0.3); }
.layer-card.l-meta h4 { color: var(--cyan); }
.layer-card.l-meta .stability { color: var(--cyan); border-color: rgba(56, 189, 248, 0.3); }
.layer-card.l-pattern h4 { color: #fb923c; }
.layer-card.l-pattern .stability { color: #fb923c; border-color: rgba(251, 146, 60, 0.3); }
/* ─────────────────────────────────────────────────
SECTION: PATTERNS (the engine, with examples)
───────────────────────────────────────────────── */
section.patterns {
position: relative;
padding: 140px 0;
border-top: 1px solid var(--border);
}
.patterns-header {
max-width: 780px;
margin-bottom: 64px;
}
.patterns-header .eyebrow { margin-bottom: 24px; }
.patterns-header h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 24px;
}
.patterns-header h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.patterns-header p {
font-size: 1.13rem;
color: var(--ink-soft);
line-height: 1.65;
max-width: 660px;
}
.pattern-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 56px;
}
.pattern-side {
padding: 36px 32px;
border-radius: var(--rad-lg);
border: 1px solid var(--border);
position: relative;
}
.pattern-side.signal {
background: linear-gradient(180deg, rgba(139, 92, 246, 0.05), rgba(139, 92, 246, 0));
border-color: rgba(167, 139, 250, 0.2);
}
.pattern-side.verdict {
background: linear-gradient(180deg, rgba(239, 100, 100, 0.04), rgba(239, 100, 100, 0));
border-color: rgba(239, 100, 100, 0.18);
}
.pattern-side .ps-tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.pattern-side.signal .ps-tag { color: var(--violet); }
.pattern-side.verdict .ps-tag { color: #ef6464; }
.pattern-side .ps-tag .check, .pattern-side .ps-tag .x {
width: 16px; height: 16px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
}
.pattern-side.signal .ps-tag .check {
background: rgba(45, 184, 107, 0.15);
color: var(--green);
border: 1px solid rgba(45, 184, 107, 0.3);
}
.pattern-side.verdict .ps-tag .x {
background: rgba(239, 100, 100, 0.15);
color: #ef6464;
border: 1px solid rgba(239, 100, 100, 0.3);
}
.pattern-side .ps-quote {
font-family: var(--font-display);
font-size: 1.3rem;
line-height: 1.4;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 18px;
}
.pattern-side .ps-explain {
color: var(--ink-muted);
font-size: 0.96rem;
line-height: 1.6;
}
/* Pattern output examples grid */
.pattern-examples {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.pattern-ex {
padding: 28px 24px;
border: 1px solid var(--border);
border-radius: var(--rad);
background: rgba(255, 255, 255, 0.015);
transition: all 0.25s;
}
.pattern-ex:hover {
border-color: rgba(167, 139, 250, 0.3);
transform: translateY(-2px);
}
.pattern-ex .ex-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #fb923c;
margin-bottom: 12px;
display: block;
}
.pattern-ex h4 {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.pattern-ex p {
font-size: 0.9rem;
color: var(--ink-muted);
line-height: 1.55;
}
/* ─────────────────────────────────────────────────
SECTION: PRODUCT BUILDING BLOCKS
───────────────────────────────────────────────── */
section.product {
position: relative;
padding: 140px 0;
border-top: 1px solid var(--border);
}
.product-header {
max-width: 780px;
margin-bottom: 72px;
}
.product-header .eyebrow { margin-bottom: 24px; }
.product-header h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 20px;
}
.product-header h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.product-header p {
font-size: 1.13rem;
color: var(--ink-muted);
line-height: 1.6;
}
.product-row {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 72px;
align-items: center;
padding: 48px 0;
border-top: 1px solid var(--border);
}
.product-row.flip {
grid-template-columns: 1.1fr 0.9fr;
}
.product-row.flip .pr-text { order: 2; }
.product-row.flip .pr-visual { order: 1; }
.pr-text .eyebrow { margin-bottom: 22px; }
.pr-text h3 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
margin-bottom: 20px;
}
.pr-text h3 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.pr-text > p {
font-size: 1.07rem;
color: var(--ink-soft);
line-height: 1.65;
margin-bottom: 24px;
max-width: 480px;
}
.pr-text ul {
list-style: none;
}
.pr-text ul li {
position: relative;
padding-left: 24px;
padding-top: 14px;
padding-bottom: 14px;
border-top: 1px solid var(--border);
font-size: 0.96rem;
color: var(--ink-muted);
line-height: 1.55;
}
.pr-text ul li:last-child { border-bottom: 1px solid var(--border); }
.pr-text ul li::before {
content: "";
position: absolute;
left: 0;
top: 22px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--grad);
}
.pr-text ul li strong {
color: var(--ink);
font-weight: 600;
}
.pr-visual {
position: relative;
}
.device-frame {
position: relative;
border-radius: var(--rad-xl);
border: 1px solid var(--border-strong);
padding: 20px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
overflow: hidden;
transition: transform 0.4s;
}
.device-frame::before {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--rad-xl);
padding: 1px;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(56, 189, 248, 0.15), transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.device-frame:hover { transform: translateY(-4px); }
.device-frame img {
width: 100%;
height: auto;
border-radius: var(--rad);
display: block;
}
/* ─────────────────────────────────────────────────
SECTION: PRINCIPLES
───────────────────────────────────────────────── */
section.principles {
position: relative;
padding: 140px 0;
border-top: 1px solid var(--border);
}
.principles-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
align-items: start;
}
.principles-grid .left .eyebrow { margin-bottom: 24px; }
.principles-grid .left h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 24px;
}
.principles-grid .left h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.principles-grid .left p {
font-size: 1.07rem;
color: var(--ink-muted);
line-height: 1.65;
max-width: 400px;
}
.principle {
display: grid;
grid-template-columns: 48px 1fr;
gap: 24px;
padding: 28px 0;
border-top: 1px solid var(--border);
}
.principle:last-child { border-bottom: 1px solid var(--border); }
.principle .p-num {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--violet);
padding-top: 4px;
}
.principle h3 {
font-size: 1.18rem;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.principle p {
color: var(--ink-muted);
font-size: 0.97rem;
line-height: 1.6;
}
.principle p strong { color: var(--ink-soft); font-weight: 600; }
/* ─────────────────────────────────────────────────
SECTION: BEHIND METAOPAI (founder)
───────────────────────────────────────────────── */
section.founder {
position: relative;
padding: 140px 0;
border-top: 1px solid var(--border);
}
.founder-grid {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 88px;
align-items: start;
}
.founder-left {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 36px;
}
.founder-mark {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.18), rgba(56, 189, 248, 0.08) 60%, transparent 80%);
}
.founder-mark img {
width: 96px;
height: 96px;
filter: drop-shadow(0 8px 24px rgba(139, 92, 246, 0.4));
position: relative;
z-index: 2;
}
.founder-mark-ring,
.founder-mark-ring.r2 {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(167, 139, 250, 0.25);
pointer-events: none;
}
.founder-mark-ring {
inset: 12px;
border-style: dashed;
border-color: rgba(167, 139, 250, 0.18);
animation: spin 40s linear infinite;
}
.founder-mark-ring.r2 {
inset: -16px;
border-color: rgba(56, 189, 248, 0.15);
animation: spin 60s linear infinite reverse;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.founder-meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.04em;
line-height: 2;
}
.founder-meta-label {
display: block;
color: var(--violet);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-top: 10px;
margin-bottom: -4px;
opacity: 0.85;
}
.founder-meta-label:first-child { margin-top: 0; }
.founder-right .eyebrow { margin-bottom: 24px; }
.founder-right h2 {
font-size: clamp(1.9rem, 3.8vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.12;
margin-bottom: 32px;
}
.founder-right h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.founder-right p {
font-size: 1.07rem;
color: var(--ink-soft);
line-height: 1.65;
margin-bottom: 22px;
}
.founder-right p strong {
color: var(--ink);
font-weight: 600;
}
.founder-right .founder-lead {
font-size: 1.15rem;
color: var(--ink);
}
.creds-block {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.creds-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--ink-dim);
text-transform: uppercase;
margin-bottom: 20px;
display: block;
}
.creds-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cred {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-muted);
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, 0.02);
transition: all 0.25s;
}
.cred:hover {
color: var(--ink);
border-color: rgba(167, 139, 250, 0.3);
background: rgba(167, 139, 250, 0.05);
}
.cred-strong {
color: var(--ink);
border-color: rgba(167, 139, 250, 0.35);
background: rgba(139, 92, 246, 0.08);
}
.cred-accent {
color: var(--cyan);
border-color: rgba(56, 189, 248, 0.3);
background: rgba(56, 189, 248, 0.06);
}
.founder-actions {
display: flex;
gap: 12px;
margin-top: 32px;
flex-wrap: wrap;
}
.founder-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: white;
background: var(--grad);
box-shadow: 0 8px 24px -10px rgba(139, 92, 246, 0.55);
transition: all 0.25s;
}
.founder-action:hover {
transform: translateY(-1px);
box-shadow: 0 14px 32px -10px rgba(139, 92, 246, 0.7);
}
.founder-action svg { transition: transform 0.2s; }
.founder-action:hover svg { transform: translate(2px, -2px); }
.founder-action.ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--border-strong);
box-shadow: none;
}
.founder-action.ghost:hover {
border-color: rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.04);
}
/* ─────────────────────────────────────────────────
SECTION: WHITEPAPERS (three views)
───────────────────────────────────────────────── */
/* ── Pricing ── */
section.pricing {
padding: 120px 0 100px;
border-top: 1px solid var(--border);
}
section.pricing h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.1;
margin: 0 0 20px;
color: var(--ink);
}
section.pricing h2 .serif {
font-family: var(--serif);
font-weight: 400;
font-style: italic;
color: var(--violet);
}
.pricing-lead {
font-size: 1.1rem;
color: var(--muted);
max-width: 680px;
line-height: 1.65;
margin: 0 0 52px;
}
.pricing-free {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 28px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
margin-bottom: 28px;
flex-wrap: wrap;
}
.pricing-free-left { display: flex; align-items: center; gap: 16px; }
.pricing-free-badge {
background: rgba(132,90,230,.12);
color: var(--violet);
border: 1px solid rgba(132,90,230,.25);
border-radius: 6px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
padding: 4px 10px;
white-space: nowrap;
font-family: var(--mono);
}
.pricing-free-title {
font-size: .95rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 4px;
}
.pricing-free-sub {
font-size: .78rem;
color: var(--muted);
margin: 0;
font-family: var(--mono);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 28px;
}
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } }
.pricing-card {
display: flex;
flex-direction: column;
padding: 30px 26px 26px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
position: relative;
}
.pricing-card-featured {
border-color: rgba(132,90,230,.4);
background: linear-gradient(135deg, rgba(132,90,230,.08) 0%, rgba(56,189,248,.04) 100%);
}
.plan-most-popular {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--violet);
color: #fff;
font-size: .65rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 20px;
white-space: nowrap;
}
.plan-badge {
display: inline-block;
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
padding: 3px 9px;
border-radius: 5px;
margin-bottom: 12px;
font-family: var(--mono);
background: rgba(251,191,36,.15);
color: #f59e0b;
border: 1px solid rgba(251,191,36,.3);
}
.pricing-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 12px;
}
.plan-price {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 8px;
}
.plan-amount {
font-size: 2.1rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -.03em;
}
.plan-period { font-size: .85rem; color: var(--muted); }
.plan-desc {
font-size: .84rem;
color: var(--muted);
margin: 0 0 22px;
line-height: 1.5;
}
.plan-features {
list-style: none;
padding: 0;
margin: 0 0 26px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
}
.plan-features li {
font-size: .86rem;
color: var(--muted);
padding-left: 16px;
position: relative;
line-height: 1.5;
}
.plan-features li::before {
content: '·';
position: absolute;
left: 4px;
color: var(--violet);
font-weight: 700;
}
.plan-features li.plan-burst {
padding-top: 12px;
margin-top: 6px;
border-top: 1px solid var(--border);
}
.plan-features li.plan-burst strong { color: var(--ink); }
.burst-note {
display: block;
font-size: .73rem;
color: var(--muted);
opacity: .65;
margin-top: 3px;
font-family: var(--mono);
}
.plan-cta { width: 100%; text-align: center; justify-content: center; }
.burst-explainer {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 22px 26px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
.burst-explainer-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: rgba(56,189,248,.08);
border: 1px solid rgba(56,189,248,.2);
display: grid;
place-items: center;
color: var(--cyan);
flex-shrink: 0;
}
.burst-explainer-title {
font-size: .84rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 5px;
}
.burst-explainer-body {
font-size: .82rem;
color: var(--muted);
margin: 0;
line-height: 1.6;
}
.burst-explainer-body strong { color: var(--ink); }
@media (max-width: 640px) {
.pricing-free { flex-direction: column; align-items: flex-start; }
.burst-explainer { flex-direction: column; }
}
section.whitepapers {
position: relative;
padding: 120px 0 100px;
border-top: 1px solid var(--border);
}
.whitepapers .section-eyebrow-row {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 28px;
}
.whitepapers h2 {
font-size: clamp(2rem, 4.6vw, 3.4rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
margin-bottom: 22px;
max-width: 800px;
}
.whitepapers h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.whitepapers .wp-lead {
max-width: 680px;
color: var(--ink-soft);
font-size: 1.05rem;
line-height: 1.62;
margin-bottom: 56px;
}
.whitepapers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1100px) {
.whitepapers-grid { grid-template-columns: repeat(2, 1fr); }
}
.wp-card {
position: relative;
display: flex;
flex-direction: column;
padding: 32px 28px 28px;
border: 1px solid var(--border);
border-radius: var(--rad-lg);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.wp-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.04), rgba(255, 255, 255, 0));
}
.wp-card .wp-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--ink-dim);
text-transform: uppercase;
margin-bottom: 18px;
display: block;
}
.wp-card .wp-audience {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--violet);
text-transform: uppercase;
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.wp-card .wp-audience::before {
content: "";
width: 12px; height: 1px;
background: var(--violet);
opacity: 0.7;
}
.wp-card h3 {
font-size: 1.32rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 12px;
}
.wp-card p {
color: var(--ink-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 24px;
flex: 1;
}
.wp-card .wp-meta {
display: flex;
gap: 14px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-dim);
text-transform: uppercase;
margin-bottom: 18px;
}
.wp-card .wp-action {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink);
text-decoration: none;
transition: color 0.2s, gap 0.2s;
}
.wp-card .wp-action svg {
transition: transform 0.2s;
}
.wp-card:hover .wp-action {
color: var(--cyan);
gap: 12px;
}
.wp-card:hover .wp-action svg {
transform: translate(2px, -2px);
}
.wp-card.wp-featured {
border-color: rgba(167, 139, 250, 0.35);
background: linear-gradient(180deg, rgba(167, 139, 250, 0.05), rgba(56, 189, 248, 0.015));
}
.wp-card.wp-featured .wp-audience { color: var(--cyan); }
.wp-card.wp-featured .wp-audience::before { background: var(--cyan); }
/* ─────────────────────────────────────────────────
SECTION: CLOSING / FINAL CTA
───────────────────────────────────────────────── */
section.closing {
position: relative;
padding: 160px 0 140px;
border-top: 1px solid var(--border);
text-align: center;
}
.closing::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80%; max-width: 800px;
height: 280px;
background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.18), transparent 70%);
pointer-events: none;
}
.closing-eyebrow { margin-bottom: 36px; justify-content: center; }
.closing h2 {
font-size: clamp(2.5rem, 6vw, 4.8rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
margin-bottom: 32px;
}
.closing h2 .serif {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.closing p {
max-width: 660px;
margin: 0 auto 24px;
font-size: 1.08rem;
color: var(--ink-soft);
line-height: 1.62;
}
.closing p.closing-lead {
font-size: 1.13rem;
color: var(--ink-soft);
}
.closing p.closing-lead strong {
color: var(--ink);
font-weight: 600;
}
.closing p.closing-sub {
color: var(--ink-muted);
max-width: 580px;
}
.closing p.closing-tagline {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.5vw, 1.85rem);
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--ink);
margin-top: 36px;
margin-bottom: 44px;
max-width: 600px;
}
.closing p.closing-tagline .grad-text {
font-family: var(--font-display);
font-weight: 400;
}
.closing .cta-row {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* ─────────────────────────────────────────────────
FOOTER
───────────────────────────────────────────────── */
footer {
padding: 56px 0 44px;
border-top: 1px solid var(--border);
position: relative;
z-index: 1;
}
footer .footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
padding-bottom: 32px;
margin-bottom: 32px;
border-bottom: 1px solid var(--border);
}
footer .footer-nav a {
font-size: 14px;
color: var(--ink-muted);
text-decoration: none;
transition: color 0.2s;
}
footer .footer-nav a:hover { color: var(--ink); }
footer .contact-row {
display: flex;
justify-content: center;
padding-bottom: 32px;
margin-bottom: 32px;
border-bottom: 1px solid var(--border);
}
footer .email {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: var(--ink-muted);
text-decoration: none;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.015);
transition: all 0.25s;
}
footer .email:hover {
color: var(--ink);
background: rgba(167, 139, 250, 0.07);
border-color: rgba(167, 139, 250, 0.25);
transform: translateY(-1px);
}
footer .email svg {
width: 16px; height: 16px;
color: var(--violet);
}
footer .row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 24px;
align-items: center;
}
footer .copyright {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--ink-dim);
text-transform: uppercase;
}
footer .copyright .accent { color: var(--violet); }
footer .socials {
display: flex;
align-items: center;
gap: 6px;
justify-self: center;
}
footer .socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: var(--rad-sm);
color: var(--ink-dim);
text-decoration: none;
transition: all 0.25s;
border: 1px solid transparent;
}
footer .socials a:hover {
color: var(--violet);
background: rgba(167, 139, 250, 0.08);
border-color: rgba(167, 139, 250, 0.22);
transform: translateY(-1px);
}
footer .socials svg { width: 16px; height: 16px; display: block; }
footer .meta {
display: flex;
align-items: center;
gap: 12px;
justify-self: end;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--ink-dim);
text-transform: uppercase;
}
footer .meta .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
animation: pulse-green 2s infinite;
}
/* ─────────────────────────────────────────────────
REVEAL ANIMATIONS
───────────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.in > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.reveal-stagger.in > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.reveal-stagger.in > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.reveal-stagger.in > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
/* ─────────────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width: 1024px) {
.container { padding: 0 28px; }
.nav-links { display: none; }
.section-number { right: 28px; top: 40px; }
.hero-grid { grid-template-columns: 1fr; gap: 60px; }
.hero-visual { max-width: 360px; margin: 0 auto; }
.options-grid { grid-template-columns: 1fr; gap: 16px; }
.experiment-grid { grid-template-columns: 1fr; gap: 40px; }
.experiment-label { position: static; }
.flow-steps { grid-template-columns: 1fr 1fr; }
.arch-header { grid-template-columns: 1fr; gap: 32px; }
.layers-grid { grid-template-columns: 1fr 1fr; }
.product-row, .product-row.flip {
grid-template-columns: 1fr !important;
gap: 40px;
}
.product-row.flip .pr-text { order: 1; }
.product-row.flip .pr-visual { order: 2; }
.principles-grid { grid-template-columns: 1fr; gap: 40px; }
.founder-grid { grid-template-columns: 1fr; gap: 48px; }
.founder-left { position: static; flex-direction: row; align-items: center; gap: 32px; }
.founder-mark { width: 140px; height: 140px; flex-shrink: 0; }
.founder-mark img { width: 64px; height: 64px; }
.pattern-pair { grid-template-columns: 1fr; }
.pattern-examples { grid-template-columns: 1fr 1fr; }
.whitepapers-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
nav.top .row { padding: 14px 0; gap: 12px; }
.brand-name { font-size: 16px; }
.brand-mark { height: 26px; }
.cta-group .btn-ghost { display: none; } /* hide Login on mobile, in-page CTAs remain */
.cta-group .btn { padding: 9px 14px; font-size: 13px; }
section.hero { padding: 56px 0 40px; min-height: auto; }
.hero h1 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
.hero .lead { font-size: 1.05rem; }
.hero-pill { font-size: 10px; padding: 6px 12px; }
section.problem,
section.experiment,
section.flow,
section.architecture,
section.patterns,
section.product,
section.principles,
section.founder { padding: 88px 0; }
section.whitepapers { padding: 80px 0 60px; }
.whitepapers-grid { grid-template-columns: 1fr; gap: 16px; }
.wp-card { padding: 26px 22px 22px; }
section.closing { padding: 100px 0 80px; }
.flow-steps { grid-template-columns: 1fr; }
.layers-grid { grid-template-columns: 1fr; }
.pattern-examples { grid-template-columns: 1fr; }
.product-row { padding: 32px 0; gap: 32px; }
.btn-lg { padding: 13px 22px; font-size: 14px; }
.principle { grid-template-columns: 36px 1fr; gap: 16px; }
.founder-left { flex-direction: column; align-items: flex-start; gap: 24px; }
.founder-mark { width: 120px; height: 120px; }
.founder-mark img { width: 56px; height: 56px; }
.founder-right h2 { font-size: 1.7rem; }
.gap-statement { padding: 40px 0; }
.gap-statement p { font-size: 1.4rem; }
.hypothesis-card { padding: 24px; }
.hypothesis-card p { font-size: 1.2rem; }
.pattern-side { padding: 28px 22px; }
.pattern-side .ps-quote { font-size: 1.15rem; }
footer .row {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
justify-items: center;
}
footer .meta { justify-self: center; }
.section-number { display: none; }
.krl-diagram-wrap { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition: none !important;
}
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}
</style>
</head>
<body>
<!-- ════════════════════════════════════════════════
NAVIGATION
════════════════════════════════════════════════ -->
<nav class="top">
<div class="container">
<div class="row">
<a class="brand" href="#" aria-label="Metaop.ai — Be understood">
<img src="images/logo-mark.png?v=2" alt="" class="brand-mark" />
<span class="brand-name">Metaop<span class="dot">.</span>ai</span>
</a>
<div class="nav-links">
<a href="#experiment">The approach</a>
<a href="#architecture">How it works</a>
<a href="gallery.html">Product</a>
<a href="security.html">Security</a>
<a href="#pricing">Pricing</a>
<a href="files.html">Files</a>
<a href="#founder">About</a>
<a href="whitepaper-v5.pdf" target="_blank" rel="noopener" class="nav-whitepaper">
Whitepaper
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</a>
</div>
<div class="cta-group">
<a class="btn btn-ghost" href="https://app.metaop.ai/signin">Login</a>
<a class="btn btn-primary" href="https://app.metaop.ai/create-account">
Create account
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
</a>
</div>
</div>
</div>
</nav>
<!-- ════════════════════════════════════════════════
HERO
════════════════════════════════════════════════ -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div class="hero-content reveal">
<span class="hero-pill">
<span class="pulse"></span>
AI Signal Intelligence · Public Beta — Now Open
</span>
<h1>
Be <span class="grad-text">understood.</span><br/>
Operate with <span class="serif">clarity</span>.
</h1>
<p class="lead">
A private intelligence that <strong>listens, remembers, and models context</strong> across the relationships in your life — and surfaces the patterns no one else can see. Not advice. Not verdicts. Just clearer signal.
</p>
<div class="cta-row">
<a class="btn btn-primary btn-lg" href="https://app.metaop.ai/create-account">
Create account
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
</a>
<a class="btn btn-ghost btn-lg" href="#what-is">What is MetaopAI →</a>
</div>
<div class="meta-line">
<span class="live-dot"></span>
<span>Public Beta — now open</span>
<span class="beta-badge">Free to join</span>
</div>
<div class="hero-stores">
<div class="store-badge" aria-label="Coming soon to App Store">
<svg class="badge-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
<div class="badge-text">
<span class="badge-soon">Coming soon</span>
<span class="badge-name">App Store</span>
</div>
</div>
<div class="store-badge" aria-label="Coming soon to Google Play">
<svg class="badge-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 010 1.73l-2.808 1.626L15.21 12l2.488-2.491zM5.864 2.658L16.802 8.99l-2.303 2.303-8.635-8.635z"/></svg>
<div class="badge-text">
<span class="badge-soon">Coming soon</span>
<span class="badge-name">Google Play</span>
</div>
</div>
</div>
</div>
<!-- Orbital visualization — each ring rotates independently -->
<div class="hero-visual reveal">
<!-- Atmospheric backdrop -->
<div class="orbit-glow" aria-hidden="true"></div>
<!--
Ring stack (outer → inner). Each ring is its own absolutely-positioned div
sized as a percentage so they share the same center. The .orbit-ring class
applies independent rotation; nth-child sets size, speed, and direction.
Order:
Ring 1 (outermost) ─ SIGNAL raw, wide net
Ring 2 ─────────── EVENT
Ring 3 ─────────── CONTEXT
Ring 4 ─────────── META-CONTEXT
Ring 5 ─────────── PATTERN
Ring 6 ─────────── MULTI-PATTERN
Ring 7 (innermost) ─ COMPOUND synthesized
Center ────────── M logo
-->
<!-- Ring 1 — SIGNAL -->
<div class="orbit-ring r-signal" aria-hidden="true">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="url(#ringGrad)" stroke-width="0.35" stroke-dasharray="0.6 1.5" opacity="0.5"/>
<circle cx="99" cy="50" r="1.1" fill="#a78bfa"/>
<circle cx="86" cy="22" r="0.8" fill="#7dd3fc"/>
<circle cx="22" cy="84" r="0.8" fill="#a78bfa"/>
<circle cx="6" cy="44" r="1.0" fill="#7dd3fc"/>
<circle cx="38" cy="6" r="0.8" fill="#a78bfa"/>
<circle cx="86" cy="84" r="0.8" fill="#7dd3fc"/>
</svg>
<span class="orbit-label">Signal</span>
</div>
<!-- Ring 2 — EVENT -->
<div class="orbit-ring r-event" aria-hidden="true">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="url(#ringGrad)" stroke-width="0.35" opacity="0.45"/>
<circle cx="99" cy="50" r="0.9" fill="#7dd3fc"/>
<circle cx="20" cy="80" r="0.7" fill="#a78bfa"/>
<circle cx="80" cy="20" r="0.7" fill="#7dd3fc"/>
</svg>
<span class="orbit-label">Event</span>
</div>
<!-- Ring 3 — CONTEXT -->
<div class="orbit-ring r-context" aria-hidden="true">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="url(#ringGrad)" stroke-width="0.35" stroke-dasharray="1.5 1.5" opacity="0.5"/>
<circle cx="50" cy="1" r="0.8" fill="#a78bfa"/>
<circle cx="50" cy="99" r="0.8" fill="#7dd3fc"/>
</svg>
<span class="orbit-label">Context</span>
</div>
<!-- Ring 4 — META-CONTEXT -->
<div class="orbit-ring r-meta" aria-hidden="true">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="url(#ringGrad)" stroke-width="0.35" opacity="0.55"/>
<circle cx="6" cy="50" r="0.8" fill="#7dd3fc"/>
<circle cx="94" cy="50" r="0.8" fill="#a78bfa"/>
</svg>
<span class="orbit-label">Meta-Context</span>
</div>
<!-- Ring 5 — PATTERN -->
<div class="orbit-ring r-pattern" aria-hidden="true">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="url(#ringGrad)" stroke-width="0.4" stroke-dasharray="1 1" opacity="0.6"/>
<circle cx="99" cy="50" r="0.9" fill="#fb923c"/>
<circle cx="1" cy="50" r="0.9" fill="#fb923c"/>
</svg>
<span class="orbit-label">Pattern</span>
</div>
<!-- Ring 6 — MULTI-PATTERN -->
<div class="orbit-ring r-multi" aria-hidden="true">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="url(#ringGrad)" stroke-width="0.45" opacity="0.7"/>
<circle cx="50" cy="1" r="0.9" fill="#fb923c"/>
<circle cx="50" cy="99" r="0.9" fill="#fb923c"/>
</svg>
<span class="orbit-label">Multi-Pattern</span>
</div>
<!-- Ring 7 — COMPOUND (innermost, synthesized, brightest) -->
<div class="orbit-ring r-compound" aria-hidden="true">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="49" fill="none" stroke="url(#ringGradCore)" stroke-width="0.7" opacity="0.95"/>
<circle cx="99" cy="50" r="1.2" fill="#38bdf8"/>
<circle cx="1" cy="50" r="1.2" fill="#8b5cf6"/>
<circle cx="50" cy="1" r="1.2" fill="#a78bfa"/>
<circle cx="50" cy="99" r="1.2" fill="#7dd3fc"/>
</svg>
<span class="orbit-label compound-label">Compound</span>
</div>
<!-- Shared gradient definitions for all ring SVGs -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a78bfa" stop-opacity="0.9"/>
<stop offset="50%" stop-color="#8b5cf6" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#38bdf8" stop-opacity="0.8"/>
</linearGradient>
<linearGradient id="ringGradCore" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#38bdf8"/>
</linearGradient>
</defs>
</svg>
<!-- Centered M logo (with fallback) -->
<img src="images/logof.png?v=2" alt="Metaop.ai" class="hero-visual-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'" />
<div class="hero-visual-logo-fallback" aria-hidden="true">
<span>M</span>
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 01 — THE CONFIDANT PROBLEM
(Story for the masses)
════════════════════════════════════════════════ -->
<!-- ════════════════════════════════════════════════
SECTION 00 — WHAT IS METAOPAI (plain-language explainer)
════════════════════════════════════════════════ -->
<section class="what-is" id="what-is">
<span class="section-number">00 — What is MetaopAI</span>
<div class="container">
<div class="what-is-wrap reveal">
<span class="eyebrow">What is MetaopAI</span>
<h2>A private journal with a <span class="serif">memory that compounds.</span></h2>
<div class="what-is-body">
<p>
MetaopAI is a <strong>private journal paired with an AI signal intelligence engine</strong> that turns your everyday narrations about life — yourself, the people around you, your environments, and your relationships — into structured, persistent signals. Instead of treating entries as disposable chat messages that get lost in context-window collapse, the system extracts behaviors, events, emotional framing, and relationship dynamics, then stores them in a governed Knowledge Representation Layer (KRL) organized across four clear scopes: <span class="krl-scopes">USER, ENTITY, SPACE, and RELATIONSHIP_PAIR</span>.
</p>
<p>
Over time, MetaopAI's <strong>Pattern Engine</strong> correlates these signals to surface meaningful patterns — trust cycles, withdrawal loops, reciprocity shifts, repair-and-relapse rhythms — with evidence, confidence scores, and provenance, never judgment. It sits in the gap between a partner (context but no neutrality), a friend (neutrality but no confidentiality), a therapist (expertise but limited scale), and a general-purpose AI (intelligence but no real memory). The result is <strong>true continuity that compounds for months and years</strong>, so you're finally understood by a system that actually remembers and makes sense of your real life.
</p>
</div>
<p class="what-is-motto">Be <span class="grad-text">understood.</span> Operate with clarity.</p>
<div class="what-is-gaps">
<span class="chip"><strong>Partner</strong> — context, no neutrality</span>
<span class="chip"><strong>Friend</strong> — neutrality, no confidentiality</span>
<span class="chip"><strong>Therapist</strong> — expertise, limited scale</span>
<span class="chip"><strong>General AI</strong> — intelligence, no memory</span>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 01 — THE CONFIDANT PROBLEM
════════════════════════════════════════════════ -->
<section class="problem" id="problem">
<span class="section-number">01 — The problem</span>
<div class="container">
<div class="problem-intro reveal">
<span class="eyebrow">A familiar moment</span>
<h2>
You've been here.<br/>
<span class="serif">Trying to make sense of someone.</span>
</h2>
<p>
A friend who's pulling away. A manager whose tone shifted last month. A partner whose evenings feel a little different lately. You sense something — but you can't quite name it. So you reach out for help.
</p>
<p>
Today, you have four choices. None of them are built for this.
</p>
</div>
<div class="options-grid reveal-stagger">
<div class="option-card">
<span class="opt-num">Option 01 — A partner or spouse</span>
<h3>They love you. They're missing the backstory.</h3>
<span class="gap">The gap · Context tax & well-meaning noise</span>
<p>You start narrating from the beginning — the personalities, the history, the baseline, the deviation from baseline, finally the event itself. By the time you reach the question, half an hour is gone. Their feedback is loving and well-meaning, but it's downstream of a story you had to rebuild from scratch. You walk away supported. Not clearer.</p>
</div>
<div class="option-card">
<span class="opt-num">Option 02 — A friend</span>
<h3>They have an opinion. Or you can't tell them at all.</h3>
<span class="gap">The gap · Bias, exposure, confidentiality</span>
<p>Your friend has their own emotional stake — opinions form, sides get taken, things get repeated. And some situations are simply too sensitive, professional, or close to home to confide in anyone in your circle in the first place.</p>
</div>
<div class="option-card">
<span class="opt-num">Option 03 — A therapist</span>
<h3>Once a week. About you.</h3>
<span class="gap">The gap · Cost & coverage</span>
<p>$150–$300 a session. Once a week if you're lucky. Therapy is built to help you understand <em>your</em> internal experience — not to keep structured memory of every person in your life and the patterns between them.</p>
</div>
<div class="option-card">
<span class="opt-num">Option 04 — An AI chatbot</span>
<h3>Smart. Willing. Amnesiac.</h3>
<span class="gap">The gap · No memory, no patterns</span>
<p>You open ChatGPT or Claude, narrate the whole situation, and get something insightful. Then tomorrow, blank slate. The next event gets analyzed without yesterday's context. Patterns can't compound if memory can't persist.</p>
</div>
</div>
<div class="gap-statement reveal">
<span class="marker">The gap</span>
<p>
The thing you actually want is something <em>that holds your story</em> — that listens carefully, remembers precisely, and tells you what it sees over time. Without bias. Without verdicts. Without forgetting.
</p>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 02 — THE EXPERIMENT / HYPOTHESIS
(Exploratory framing for tech audience)
════════════════════════════════════════════════ -->
<section class="experiment" id="experiment">
<span class="section-number">02 — The approach</span>
<div class="container">
<div class="experiment-grid">
<div class="experiment-label reveal">
<span class="eyebrow">An open experiment</span>
<div class="label-text">
<span class="key">// hypothesis</span>
The bottleneck in AI utility for personal reasoning isn't model capability — it's structured, persistent context.
<br/><br/>
<span class="key">// method</span>
Build a typed, multi-dimensional memory layer (the KRL) and let interpretation emerge from compounded signal over time.
<br/><br/>
<span class="key">// posture</span>
Patterns, not verdicts.<br/>
Probabilistic, not absolute.<br/>
Evolving, not static.
</div>
</div>
<div class="experiment-body reveal">
<h2>
Everyone is scaling models.<br/>
<span class="serif">We're investigating context.</span>
</h2>
<p>
The dominant conversation in AI is about bigger models, better reasoning, longer context windows. All of that matters. But for the kind of dialogue a person actually needs — substantive, accumulating, personally relevant — there's a different question worth asking.
</p>
<p>
<strong>What if the missing layer isn't the model itself, but the way context is structured around it?</strong> What if "memory" alone isn't enough — what's needed is a typed, multi-dimensional state that grows in fidelity, decays appropriately, surfaces contradictions, and compounds raw observation into emergent pattern?
</p>
<p>
MetaopAI is an experiment in that direction. We're not claiming to have solved anything. We're modeling context the way an attentive observer would — and seeing how far that takes us toward AI dialogue that is both more precise and more honest about what it cannot know.
</p>
<div class="hypothesis-card">
<span class="h-label">The compounding bet</span>
<p>
Raw signals are cheap.<br/>
<em>Structured signals over time are not.</em>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 03 — HOW IT WORKS (Four moves)
════════════════════════════════════════════════ -->
<section class="flow" id="flow">
<span class="section-number">03 — Flow</span>
<div class="container">
<div class="flow-header reveal">
<span class="eyebrow">How it works</span>
<h2>
From conversation to <span class="serif">clarity,</span><br/>
in four moves.
</h2>
<p>The product side is simple. You narrate. The system extracts. Patterns surface. You see yourself and the people around you more clearly than you did yesterday.</p>
</div>
<div class="flow-steps reveal-stagger">
<div class="flow-step">
<span class="step-tag">01 · Input</span>
<div class="step-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6"/><path d="M9 17h6"/></svg>
</div>
<h3>Narrate naturally</h3>
<p>Write the way you'd talk to a confidant. No prompts to learn, no structure to follow. Tell the story as it happened.</p>
</div>
<div class="flow-step">
<span class="step-tag">02 · Extract</span>
<div class="step-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 3H2l8 9.46V19l4 2v-8.54z"/></svg>
</div>
<h3>Signals surfaced</h3>
<p>Five parallel extractors identify who, what, where, when, and how — typed observations land in a structured graph.</p>
</div>
<div class="flow-step">
<span class="step-tag">03 · Compound</span>
<div class="step-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><circle cx="5" cy="5" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M7 7l3 3"/><path d="M17 7l-3 3"/><path d="M7 17l3-3"/><path d="M17 17l-3-3"/></svg>
</div>
<h3>Patterns emerge</h3>
<p>Signals reinforce, contradict, decay. Compounded across days and weeks, dynamics become visible that no single conversation could have shown.</p>
</div>
<div class="flow-step">
<span class="step-tag">04 · Insight</span>
<div class="step-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.7c.4.3.7.7.9 1.2L9 18h6l.1-2.1c.2-.5.5-.9.9-1.2A7 7 0 0 0 12 2z"/></svg>
</div>
<h3>Clarity returned</h3>
<p>Patterns named. Sources cited. Alternative readings offered. You stay in the chair — the system shows its work, never renders a verdict.</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 04 — KRL ARCHITECTURE
(The technical core, with the diagram)
════════════════════════════════════════════════ -->
<section class="architecture" id="architecture">
<span class="section-number">04 — Architecture</span>
<div class="container">
<div class="arch-header">
<div class="left reveal">
<span class="eyebrow">The Knowledge Relational Layer</span>
<h2>
Context isn't a window.<br/>
<span class="serif">It's a state that compounds.</span>
</h2>
</div>
<div class="right reveal">
<p>
Under the hood, MetaopAI is built on a typed, multi-dimensional knowledge graph called the <strong>KRL</strong>. Every observation lands in a specific cell — by <strong>subject</strong> (the user, an entity, a space, or a relationship pair) and by <strong>layer</strong> (signal, event, meta-context, context, or pattern).
</p>
<p>
Stable layers are queried first. Volatile layers update on every turn. Patterns are not extracted — they're <strong>computed</strong> across the lower layers, with confidence scores, time-decay, and contradiction detection built in.
</p>
</div>
</div>
<!-- The five layers of the substrate (flow order: Signal → Event → Context → Meta-Context → Pattern) -->
<div class="layers-grid reveal-stagger">
<div class="layer-card l-signal">
<span class="layer-num">Layer 01</span>
<h4>Signals</h4>
<span class="stability">Volatile</span>
<p>Small behavioral observations. Raw, granular, highly volatile. The texture of moment-to-moment interaction.</p>
</div>
<div class="layer-card l-event">
<span class="layer-num">Layer 02</span>
<h4>Events</h4>
<span class="stability">Anchored</span>
<p>Discrete happenings with timestamps. The argument on Tuesday. The promotion in March. Anchors in time.</p>
</div>
<div class="layer-card l-context">
<span class="layer-num">Layer 03</span>
<h4>Context</h4>
<span class="stability">Most stable</span>
<p>Profile facts & identity. Who someone is, what role they play, the stable scaffolding of a relationship.</p>
</div>
<div class="layer-card l-meta">
<span class="layer-num">Layer 04</span>
<h4>Meta-Context</h4>
<span class="stability">Slow-moving</span>
<p>Subjective atmosphere — how a space <em>feels</em>. Emotional environment and interpretive backdrop.</p>
</div>
<div class="layer-card l-pattern">
<span class="layer-num">Layer 05</span>
<h4>Patterns</h4>
<span class="stability">Emergent</span>
<p>Longitudinal interpretations. Computed, not extracted. Reinforced, decayed, reactivated as the lower layers evolve.</p>
</div>
</div>
<div class="krl-deeplink reveal" style="margin-top: 40px;">
<a href="whitepaper-technical.pdf" target="_blank" rel="noopener">
Read the full technical whitepaper
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</a>
</div>
<!-- ── From substrate to answer: a runtime-logical walkthrough ── -->
<div class="explainers-intro reveal">
<span class="eyebrow">From substrate to answer</span>
<h3 class="explainers-title">Five views of the same <span class="serif">system at work.</span></h3>
<p>The substrate above is the memory. Here's how MetaopAI turns it into a response — first the loop, then the runtime brain, the package it hands the model, the map back to the product, and what it all costs.</p>
</div>
<div class="explainers">
<!-- Fig 01 — The Approach (the overview loop) -->
<div class="explainer reveal">
<div class="ex-head">
<span class="eyebrow">01 · The approach</span>
<h3>The brain doesn't live in the window. <span class="serif">It lives in the substrate.</span></h3>
<p>General-purpose AI treats the conversation as memory and pays for it on every turn. MetaopAI inverts this: narration becomes structured cognition, retrieval pulls only what's relevant to <em>this</em> scope, and the model becomes a stateless commodity you can swap without losing continuity.</p>
</div>
<figure class="figure-plain">
<img src="images/diagram-approach.png" alt="The MetaopAI approach: an eight-step loop — narrate, extract, structure into the KRL, recognize patterns, retrieve selectively, compose, respond, then trace and learn. Contrasts the old model (model = brain, conversation = memory, tokens = payment) with the new model (substrate = brain, input = conversation, model = utility)." loading="lazy" />
</figure>
<div class="krl-caption">Fig. 01 — <strong>The key inversion.</strong> Narrate → extract → structure → recognize → retrieve → compose → respond → learn.</div>
</div>
<!-- Fig 02 — The Cognition Orchestrator (the per-turn brain) -->
<div class="explainer reveal">
<div class="ex-head">
<span class="eyebrow">02 · The orchestrator</span>
<h3>A runtime brain that <span class="serif">assembles cognition</span> — not a responder.</h3>
<p>Every turn, the orchestrator resolves the active policy, retrieves scope-correct continuity from the substrate, classifies intent to decide how deep to think, and builds the directives the composer hands to the model. Its most important decisions are often the moments it chooses to do <em>less</em>.</p>
</div>
<figure class="figure-plain">
<img src="images/diagram-orchestrator.png" alt="The Cognition Orchestrator runtime flow: resolve policy, retrieve continuity, include synthetic context if cold-start, classify intent and select depth, build directives and citation rules, then hand off to the route — composer, model, and stream. Includes the cognition substrate, filter stack, and post-turn consistency loop." loading="lazy" />
</figure>
<div class="krl-caption">Fig. 02 — <strong>The Cognition Orchestrator.</strong> Resolve policy → retrieve continuity → select depth → build directives → hand off.</div>
</div>
<!-- Fig 03 — The Composer (what the orchestrator hands the model) -->
<div class="explainer reveal">
<div class="ex-head">
<span class="eyebrow">03 · The composer</span>
<h3>One structured package in. <span class="serif">One grounded answer out.</span></h3>
<p>The composer takes the orchestrator's directives and assembles a single, policy-governed prompt package — scope-correct continuity, session state, fresh external knowledge, safeguards, and the user's prompt. The model unpacks that package, follows the instructions, and answers strictly within those boundaries.</p>
</div>
<figure class="figure-plain light">
<img src="images/diagram-composer.png" alt="What the composer sends to the LLM and how the LLM unpacks it. The composer assembles a structured prompt package from the user prompt, KRL continuity, session cache, external RAG, policies and guardrails, and orchestrator directives. The LLM receives header and routing metadata, system instructions, cognition directives, retrieved continuity, session state, external knowledge, safeguards, the user prompt, and response constraints — then generates a response within those constraints, streamed back through the route layer." loading="lazy" />
</figure>
<div class="krl-caption">Fig. 03 — <strong>The Composer.</strong> Assemble a policy-governed prompt package → the model unpacks it and answers within bounds.</div>
</div>
<!-- Fig 04 — Ontology → Product -->
<div class="explainer reveal">
<div class="ex-head">
<span class="eyebrow">04 · Ontology → product</span>
<h3>Four scopes in the substrate. <span class="serif">Four homes in the product.</span></h3>
<p>The ontology is the product's spine. User, Entity, Space, and Relationship-pair each map cleanly to where you write and where intelligence is surfaced — every scope is a journal, every journal feeds the same substrate, and every analytic reads from the same scope-correct slice.</p>
</div>
<figure class="figure-plain">
<img src="images/diagram-ontology.png" alt="Ontology to UI mapping: the four KRL scopes — User, Entity, Space, and Relationship Pair — each mapped to a UI surface (Profile, Entity page, Space page, Activity and Cross-Space) and a journal type. One coherent map across the product." loading="lazy" />
</figure>
<div class="krl-caption">Fig. 04 — <strong>One coherent map.</strong> Scope-correct, consistent, isolated, unified.</div>
</div>
<!-- Fig 05 — Economics -->
<div class="explainer reveal">
<div class="ex-head">
<span class="eyebrow">05 · The economics</span>
<h3>Linear scales. <span class="serif">Quadratic breaks.</span></h3>
<p>Replaying the whole conversation every turn means cost grows quadratically — it <em>feels</em> exponential as a thread gets long. Keeping context small and scope-correct holds per-turn cost roughly constant, so cost grows linearly with use. The gap widens the longer someone stays.</p>
</div>
<figure class="figure-plain">
<img src="images/diagram-economics-v2.png" alt="MetaOpAI economics: efficient context-scoped architecture keeps per-turn cost linear while traditional chat-replay models scale quadratically. Cost advantage widens with usage depth." loading="lazy" />
</figure>
<div class="krl-caption">Fig. 05 — <strong>Cost over time.</strong> Constant per-turn cost. Lower latency. Higher signal.</div>
</div>
</div>
<div class="krl-deeplink reveal" style="margin-top: 56px;">
<a href="gallery.html">
See the full product tour
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</a>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 05 — PATTERN ENGINE (Signal vs Verdict)
════════════════════════════════════════════════ -->
<section class="patterns" id="patterns">
<span class="section-number">05 — Pattern engine</span>
<div class="container">
<div class="patterns-header reveal">
<span class="eyebrow">The ethical commitment</span>
<h2>
Patterns, <span class="serif">not verdicts.</span>
</h2>
<p>
The hardest design constraint in this product is the one most other AI tools quietly violate. An AI that observes someone's interactions can legitimately surface what it sees. It cannot legitimately render judgment on people it has never met.
</p>
</div>
<div class="pattern-pair reveal-stagger">
<div class="pattern-side signal">
<span class="ps-tag">
<span class="check">✓</span>
What MetaopAI will say
</span>
<p class="ps-quote">
"Mike's response time has stretched in the last month. Previously same-day; now averaging two days. Cited from 7 journal entries between Apr 12 – May 8."
</p>
<p class="ps-explain">A grounded observation. Evidence is cited. The user can audit the trail. The interpretation is theirs to make.</p>
</div>
<div class="pattern-side verdict">
<span class="ps-tag">
<span class="x">✕</span>
What MetaopAI will not say
</span>
<p class="ps-quote">
"Your manager Mike is avoiding you. He probably has a problem with your performance or is being passive-aggressive about the promotion."
</p>
<p class="ps-explain">A verdict. Closes inquiry. Speculates on motive. No AI is qualified to render this kind of judgment about a third party.</p>
</div>
</div>
<div class="patterns-header reveal" style="margin-top: 24px; margin-bottom: 40px;">
<span class="eyebrow dim">Pattern outputs</span>
<h2 style="font-size: clamp(1.5rem, 3vw, 2.2rem);">A few examples of what the engine surfaces.</h2>
</div>
<div class="pattern-examples reveal-stagger">
<div class="pattern-ex">
<span class="ex-tag">Communication drift</span>
<h4>Slow erosion of warmth</h4>
<p>Gradual decrease in responsiveness, warmth, or engagement over time — too gradual to notice in any single conversation.</p>
</div>
<div class="pattern-ex">
<span class="ex-tag">Trust instability</span>
<h4>Contradictions accumulating</h4>
<p>Statements or behaviors that conflict with prior context, surfaced with both observations rather than silently overwritten.</p>
</div>
<div class="pattern-ex">
<span class="ex-tag">Conflict–repair cycle</span>
<h4>Recurrence without resolution</h4>
<p>Conflict followed by repair (or the absence of it). Cycles that repeat suggest something the user already knows but hasn't named.</p>
</div>
<div class="pattern-ex">
<span class="ex-tag">Emotional withdrawal</span>
<h4>Distance becoming default</h4>
<p>Increasing distance, reduced openness, emotional fading — across multiple interaction surfaces with the same entity.</p>
</div>
<div class="pattern-ex">
<span class="ex-tag">Workplace tension</span>
<h4>Environmental stress</h4>
<p>Stressors compounding across people and events within a space, not isolated to any one relationship.</p>
</div>
<div class="pattern-ex">
<span class="ex-tag">Dormant reactivation</span>
<h4>A pattern that came back</h4>
<p>Patterns that fired before, went quiet, and are firing again — framed differently than a first-time observation.</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 06 — PRODUCT BUILDING BLOCKS
════════════════════════════════════════════════ -->
<section class="product" id="product">
<span class="section-number">06 — Inside the app</span>
<div class="container">
<div class="product-header reveal">
<span class="eyebrow">Inside the app</span>
<h2>
Three primitives.<br/>
<span class="serif">Ten ways to ask a question.</span>
</h2>
<p>Spaces organize life. Entities model the people in it. Your profile is the longitudinal portrait of you. Ten distinct chat surfaces — Journal, Mirror, View 360, Predictive, Cross-Space, Entity Narration, Space Analysis, Score Explained, Burst, Observer Signals — query the same underlying context in different voices.</p>
<div class="krl-deeplink" style="justify-content: flex-start; margin-top: 28px;">
<a href="gallery.html">
Take the full product tour
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</a>
</div>
</div>
<div class="product-row reveal">
<div class="pr-text">
<span class="eyebrow">Primitive 01 · Spaces</span>
<h3>Organize life into <span class="serif">spaces.</span></h3>
<p>Family. Work. Friends. School. Romantic. Different contexts have different rules — MetaopAI keeps them separate, and lets intelligence flow between them only when it matters.</p>
<ul>
<li><strong>Contextual separation</strong> — what happens in <em>Work</em> doesn't bleed into <em>Family</em> unless you want it to.</li>
<li><strong>Cross-space correlation</strong> — when patterns repeat across spaces, the system tells you.</li>
<li><strong>Dynamic membership</strong> — entities move between spaces as life rearranges itself.</li>
</ul>
</div>
<div class="pr-visual">
<div class="shot">
<img src="images/ui/spaces.png" alt="MetaopAI Spaces — Work, Friends, Family, and School, each its own context" loading="lazy" />
</div>
</div>
</div>
<div class="product-row flip reveal">
<div class="pr-text">
<span class="eyebrow">Primitive 02 · Entities</span>
<h3>People become <span class="serif">profiles.</span></h3>
<p>Every recurring presence in your life — partner, manager, sibling, coworker, friend — gets modeled as a living entity. Not a contact card. A signal score that evolves with every interaction you describe.</p>
<ul>
<li><strong>Signal scoring</strong> — quantified attention drawn from real interaction patterns over time.</li>
<li><strong>Pattern detection</strong> — recurring dynamics surface automatically, with citations.</li>
<li><strong>Append-only history</strong> — observations are never silently rewritten; contradictions surface for you to clarify.</li>
</ul>
</div>
<div class="pr-visual">
<div class="shot">
<img src="images/ui/alllentites.png" alt="MetaopAI entities — the recurring people in your life, each with an evolving signal score" loading="lazy" />
</div>
</div>
</div>
<div class="product-row reveal">
<div class="pr-text">
<span class="eyebrow">Primitive 03 · You</span>
<h3>The longitudinal <span class="serif">portrait.</span></h3>
<p>Your profile is the shape of you over time — where your attention actually goes, who holds it, how your rhythm shifts when you're under stress. Not a static bio. A living read of how you operate in the world you've built.</p>
<ul>
<li><strong>Time invested</strong> — where your attention goes, ranked across spaces and entities.</li>
<li><strong>Rhythm fingerprint</strong> — typing tempo and pause patterns that shift when something is off.</li>
<li><strong>Trend signals</strong> — declining, watching, trending up. Every relationship has a direction.</li>
</ul>
</div>
<div class="pr-visual">
<div class="shot">
<img src="images/ui/profilebehavior2.png" alt="MetaopAI behavioral signals — rhythm and tendencies that shift when something in your world changes" loading="lazy" />
</div>
</div>
</div>
<div class="product-row reveal">
<div class="pr-text">
<span class="eyebrow">Analytics · KRL Explorer</span>
<h3>The layer beneath the <span class="serif">surface.</span></h3>
<p>Everything the system has ever learned about you and the people around you lives in the KRL — structured, typed, and browsable. KRL Analytics puts a direct window on that substrate: explore the graph of relationships and patterns, trace how any signal formed, and see exactly what the AI knows before it speaks.</p>
<ul>
<li><strong>Pattern graph</strong> — a force-directed map of every entity and relationship, weighted by signal strength and recency.</li>
<li><strong>Formation trace</strong> — step through how any pattern assembled: the signals, the entries, the confidence score at each stage.</li>
<li><strong>Evidence audit</strong> — surface the raw journal lines behind any AI observation. Nothing inferred without a citation.</li>
</ul>
</div>
<div class="pr-visual">
<div class="shot">
<img src="images/ui/krl-explorer.png" alt="MetaOpAI KRL Explorer — browse and inspect every signal, pattern, and entity relationship stored in your Knowledge Representation Layer" loading="lazy" />
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 07 — PRINCIPLES
════════════════════════════════════════════════ -->
<section class="principles" id="principles">
<span class="section-number">07 — Principles</span>
<div class="container">
<div class="principles-grid">
<div class="left reveal">
<span class="eyebrow">Principles</span>
<h2>
Built on <span class="serif">trust,</span><br/>
not on certainty.
</h2>
<p>These are not features. They're commitments — the lines that don't move regardless of what's convenient to ship.</p>
</div>
<div class="right reveal-stagger">
<div class="principle">
<div class="p-num">01</div>
<div>
<h3>Patterns, not verdicts.</h3>
<p>The system surfaces what it observes and shows its work. It does <strong>not</strong> diagnose people, predict motives, or render judgment on anyone in your life. You stay in the chair.</p>
</div>
</div>
<div class="principle">
<div class="p-num">02</div>
<div>
<h3>Probabilistic, not absolute.</h3>
<p>Every interpretation carries a confidence score. Recent observations weigh more than year-old ones. Patterns that go dormant decay; patterns that reactivate are surfaced with appropriate framing.</p>
</div>
</div>
<div class="principle">
<div class="p-num">03</div>
<div>
<h3>Transparent, not authoritarian.</h3>
<p>Every surfaced pattern cites its source signals. You can audit the trail. You can dismiss a pattern. The AI never insists — it offers, and the offering can always be questioned.</p>
</div>
</div>
<div class="principle">
<div class="p-num">04</div>
<div>
<h3>Crisis-aware by design.</h3>
<p>A shared safety module fires before any other reasoning across every chat surface. When the conversation moves into high-stakes territory, the AI bridges you to a human resource — it does not try to be the resource.</p>
</div>
</div>
<div class="principle">
<div class="p-num">05</div>
<div>
<h3>Persistent, not addictive.</h3>
<p>The goal is clarity <em>outside</em> the system — better-handled conversations in your actual life. Not engagement inside an app. We measure success by how capable you feel out there, not by how often you come back.</p>
</div>
</div>
<div class="principle">
<div class="p-num">06</div>
<div>
<h3>Encrypted in transit and at rest.</h3>
<p>Every narration, every signal, every pattern is encrypted. We hold the data you generate to the same standard you hold your private thoughts.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION — SECURITY & PRIVACY (teaser → security.html)
════════════════════════════════════════════════ -->
<section class="security-teaser" id="security">
<span class="section-number">08 — Security & privacy</span>
<div class="container">
<div class="sec-wrap reveal">
<div class="sec-left">
<span class="eyebrow">Security & privacy</span>
<h2>Foundational, <span class="serif">not an afterthought.</span></h2>
<p>
MetaopAI was designed by a security engineer with experience in cloud security infrastructure and AI governance at a global financial firm. Your data lives in a governed cognition substrate built around structured continuity, bounded retrieval, provenance tracking, and access control — designed with GDPR principles from the beginning.
</p>
<p class="sec-philosophy">
Your data belongs to you. Continuity should be transparent. Intelligence should operate with accountability.
</p>
<a class="sec-link" href="security.html">
Read our security & privacy approach
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
</a>
</div>
<ul class="sec-points">
<li><span class="sec-dot"></span><div><strong>Isolated by design</strong><span>A governed substrate with bounded retrieval and access control. Walls between spaces are deliberate.</span></div></li>
<li><span class="sec-dot"></span><div><strong>Provenance & evidence</strong><span>Insights carry confidence and citations. Durable memory is separated from transient session context.</span></div></li>
<li><span class="sec-dot"></span><div><strong>You stay in control</strong><span>Export your substrate, request deletion, and control behavioral-intelligence collection through explicit settings.</span></div></li>
<li><span class="sec-dot"></span><div><strong>Not therapy, not diagnosis</strong><span>We avoid positioning the system as medical analysis. It surfaces patterns — it does not render verdicts.</span></div></li>
</ul>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 09 — BEHIND METAOPAI (founder credibility, no name)
════════════════════════════════════════════════ -->
<section class="founder" id="founder">
<span class="section-number">09 — Behind MetaopAI</span>
<div class="container">
<div class="founder-grid">
<div class="founder-left reveal">
<div class="founder-mark">
<img src="images/logo-mark.png?v=2" alt="" />
<div class="founder-mark-ring"></div>
<div class="founder-mark-ring r2"></div>
</div>
<div class="founder-meta">
<span class="founder-meta-label">// founder</span>
Tony
<span class="founder-meta-label">// based</span>
New York
<span class="founder-meta-label">// status</span>
Pre-launch, in public
</div>
</div>
<div class="founder-right reveal">
<span class="eyebrow">Behind MetaopAI</span>
<h2>
I'm Tony.<br/>
By day, I secure <span class="serif">AI.</span>
</h2>
<p class="founder-lead">
For over a decade, I've worked in security and cloud infrastructure across global financial institutions, helping design and secure systems that support critical platforms and emerging technologies. Over the last several years, that work increasingly shifted toward AI — evaluating enterprise tools, securing deployments, and understanding how context, orchestration, and human behavior shape AI systems in practice.
</p>
<p>
MetaOpAI emerged from a simple observation: most AI systems treat interactions as isolated moments. People don't operate that way. Relationships, decisions, patterns, and behavior are built over time through accumulated context. <strong>MetaOpAI is an exploration of what happens when AI is designed to retain signal across those moments rather than continuously resetting the conversation.</strong>
</p>
<p>
This project remains intentionally small and hands-on. The architecture, safety systems, infrastructure, and underlying design are built with the same principles used in security engineering: deliberate decisions, observable systems, and a bias toward long-term reliability over short-term complexity.
</p>
<p>
The belief behind MetaOpAI is straightforward: <strong>context compounds.</strong> Small signals become patterns, patterns become understanding, and understanding creates clarity.
</p>
<div class="creds-block">
<span class="creds-label">Credentials & background</span>
<div class="creds-grid">
<span class="cred">M.S. Cybersecurity</span>
<span class="cred cred-strong">CISSP</span>
<span class="cred">CompTIA Security+ · CySA+ · PenTest+ · CNSP</span>
<span class="cred cred-strong">Microsoft Azure Security Engineer · AZ-500</span>
<span class="cred">Azure Administrator · AZ-104</span>
<span class="cred">CCNA · Cyber Ops & Routing/Switching</span>
<span class="cred cred-accent">AI security & context engineering practitioner</span>
<span class="cred">A decade-plus in enterprise security engineering</span>
<span class="cred">Financial-services & capital-markets infrastructure</span>
</div>
<div class="founder-actions">
<a href="whitepaper-v5.pdf" target="_blank" rel="noopener" class="founder-action">
Read the whitepaper
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</a>
<a href="/cdn-cgi/l/email-protection#e5969095958a9791a5888091848a95cb848c" class="founder-action ghost">
Get in touch
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 09 — PRICING
════════════════════════════════════════════════ -->
<section class="pricing" id="pricing">
<span class="section-number">09 — Pricing</span>
<div class="container">
<div class="reveal">
<div class="section-eyebrow-row">
<span class="eyebrow">Simple pricing</span>
</div>
<h2>Start free. <span class="serif">Scale when it matters.</span></h2>
<p class="pricing-lead">
Free tier gets you 50,000 tokens a day — enough to journal and track a handful of relationships. Paid plans expand your workspace and daily capacity. Need more headroom in the moment? Burst packs add tokens instantly, no subscription required.
</p>
</div>
<!-- Free tier banner -->
<div class="pricing-free reveal">
<div class="pricing-free-left">
<span class="pricing-free-badge">Free</span>
<div>
<p class="pricing-free-title">Free tier — always available</p>
<p class="pricing-free-sub">50,000 tokens / day · 1 space · 2 entities · Resets 6:00 AM your local time</p>
</div>
</div>
<a class="btn btn-ghost" href="https://app.metaop.ai/create-account">Get started free →</a>
</div>
<!-- Paid plans -->
<div class="pricing-grid reveal-stagger">
<!-- Entry -->
<div class="pricing-card">
<div class="pricing-card-head">
<span class="plan-badge plan-entry">ENTRY</span>
<h3>MetaOp Entry</h3>
<div class="plan-price"><span class="plan-amount">$11.99</span><span class="plan-period">/ month</span></div>
<p class="plan-desc">Light personal use — a handful of relationships.</p>
</div>
<ul class="plan-features">
<li>100,000 tokens / day</li>
<li>5 spaces, 10 entities</li>
<li>All premium features included</li>
<li class="plan-burst">
Burst packs at <strong>50% off</strong> — 100k for <strong>$5.99</strong>, 200k for <strong>$11.99</strong>
<span class="burst-note">(free users pay $11.99 / $29.99)</span>
</li>
</ul>
<a class="btn btn-primary plan-cta" href="https://app.metaop.ai/settings/subscription">Get Entry — $11.99/mo</a>
</div>
<!-- Mid -->
<div class="pricing-card pricing-card-featured">
<div class="plan-most-popular">Most popular</div>
<div class="pricing-card-head">
<span class="plan-badge plan-mid">MID</span>
<h3>MetaOp Mid</h3>
<div class="plan-price"><span class="plan-amount">$22.99</span><span class="plan-period">/ month</span></div>
<p class="plan-desc">Most-used tier — solid coverage across your network.</p>
</div>
<ul class="plan-features">
<li>250,000 tokens / day</li>
<li>10 spaces, 20 entities</li>
<li>All premium features included</li>
<li class="plan-burst">
Burst packs at <strong>50% off</strong> — 100k for <strong>$5.99</strong>, 200k for <strong>$11.99</strong>
<span class="burst-note">(free users pay $11.99 / $29.99)</span>
</li>
</ul>
<a class="btn btn-primary plan-cta" href="https://app.metaop.ai/settings/subscription">Get Mid — $22.99/mo</a>
</div>
<!-- Pro -->
<div class="pricing-card">
<div class="pricing-card-head">
<span class="plan-badge plan-pro">PRO</span>
<h3>MetaOp Pro</h3>
<div class="plan-price"><span class="plan-amount">$44.99</span><span class="plan-period">/ month</span></div>
<p class="plan-desc">Power users — full daily capacity, larger workspace.</p>
</div>
<ul class="plan-features">
<li>500,000 tokens / day</li>
<li>15 spaces, 30 entities</li>
<li>All premium features included</li>
<li class="plan-burst">
Burst packs at <strong>50% off</strong> — 100k for <strong>$5.99</strong>, 200k for <strong>$11.99</strong>
<span class="burst-note">(free users pay $11.99 / $29.99)</span>
</li>
</ul>
<a class="btn btn-primary plan-cta" href="https://app.metaop.ai/settings/subscription">Get Pro — $44.99/mo</a>
</div>
</div><!-- /pricing-grid -->
<!-- Burst explanation -->
<div class="burst-explainer reveal">
<div class="burst-explainer-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</div>
<div>
<p class="burst-explainer-title">About burst packs</p>
<p class="burst-explainer-body">Burst packs are one-time token top-ups that sit on top of your daily quota — no subscription required. Each pack expires <strong>4 hours after purchase</strong>, whether used or not. Free users pay full price ($11.99 / $29.99). Any paid subscriber pays half ($5.99 / $11.99).</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 10 — WHITEPAPERS (three views)
════════════════════════════════════════════════ -->
<section class="whitepapers" id="whitepapers">
<span class="section-number">10 — Read deeper</span>
<div class="container">
<div class="reveal">
<span class="eyebrow">The whitepapers</span>
<h2>Four views. <span class="serif">One product.</span></h2>
<p class="wp-lead">
The complete reference, plus three focused cuts — a product walkthrough, an investor view, and a technical deep-dive. Pick the read that fits.
</p>
</div>
<div class="whitepapers-grid reveal-stagger">
<a href="whitepaper-v5.pdf" target="_blank" rel="noopener" class="wp-card wp-featured">
<span class="wp-num">01 — Unified</span>
<span class="wp-audience">Everyone</span>
<h3>Full Whitepaper</h3>
<p>
The complete merge. Positioning, philosophy, the cognition substrate, the orchestrator, the pattern engine, safety, and economics — the whole picture in one document.
</p>
<div class="wp-meta">
<span>97 pages</span>
<span>PDF</span>
</div>
<span class="wp-action">
Read the full whitepaper
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</span>
</a>
<a href="whitepaper-product.pdf" target="_blank" rel="noopener" class="wp-card">
<span class="wp-num">02 — Focused</span>
<span class="wp-audience">Product & curious readers</span>
<h3>Product View</h3>
<p>
What the product is and how it feels to use. Spaces, entities, the profile, the ten chat surfaces, and the ontology that ties every screen back to one substrate.
</p>
<div class="wp-meta">
<span>45 pages</span>
<span>PDF</span>
</div>
<span class="wp-action">
Read the product view
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</span>
</a>
<a href="whitepaper-investor.pdf" target="_blank" rel="noopener" class="wp-card">
<span class="wp-num">03 — Focused</span>
<span class="wp-audience">Investors & advisors</span>
<h3>Investor View</h3>
<p>
Positioning, defensibility, and the economics of pattern-not-verdict AI. The structural moats, the unit-economics math, and the honest disclosures.
</p>
<div class="wp-meta">
<span>51 pages</span>
<span>PDF</span>
</div>
<span class="wp-action">
Read the investor view
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</span>
</a>
<a href="whitepaper-technical.pdf" target="_blank" rel="noopener" class="wp-card">
<span class="wp-num">04 — Focused</span>
<span class="wp-audience">Engineers & technical readers</span>
<h3>Technical Reference</h3>
<p>
Schema, pipeline, latency profile, eval roadmap, and deployment specifics. The KRL matrix, the extraction pipeline, the orchestrator, and the safety module in implementation detail.
</p>
<div class="wp-meta">
<span>63 pages</span>
<span>PDF</span>
</div>
<span class="wp-action">
Read the technical reference
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</span>
</a>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
SECTION 10 — CLOSING / FINAL CTA
════════════════════════════════════════════════ -->
<section class="closing">
<span class="section-number">11 — Begin</span>
<div class="container narrow">
<div class="reveal">
<span class="eyebrow closing-eyebrow no-line">An open experiment</span>
<h2>
Be <span class="serif">understood.</span>
</h2>
<p class="closing-lead">
MetaopAI is a <strong>probabilistic interpersonal cognition system</strong>. It extracts signals, events, and emotional atmosphere from what you write, structures them in a typed <strong>Knowledge Representation Layer</strong>, models the relationships and spaces in your life as evolving state, and compounds recurring observations into longitudinal patterns — with confidence scoring, contradiction handling, and temporal decay built in.
</p>
<p class="closing-sub">
Not an oracle that claims to know the truth. A contextual interpretation engine that gets sharper the longer you write.
</p>
<p class="closing-tagline">
Confidence over certainty.<br/>
Interpretation over diagnosis.<br/>
<span class="serif grad-text">Patterns, not verdicts.</span>
</p>
<div class="cta-row">
<a class="btn btn-primary btn-lg" href="https://app.metaop.ai/create-account">
Create account
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
</a>
<a class="btn btn-ghost btn-lg" href="whitepaper-v5.pdf" target="_blank" rel="noopener">
Read the whitepaper
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════ -->
<footer>
<div class="container">
<div class="footer-nav">
<a href="index.html#experiment">The approach</a>
<a href="index.html#architecture">How it works</a>
<a href="gallery.html">Product</a>
<a href="security.html">Security & privacy</a>
<a href="index.html#pricing">Pricing</a>
<a href="files.html">Files</a>
<a href="index.html#whitepapers">Whitepapers</a>
<a href="index.html#founder">About</a>
</div>
<div class="contact-row">
<a class="email" href="/cdn-cgi/l/email-protection#99eaece9e9f6ebedd9f4fcedf8f6e9b7f8f0">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="2.5" y="5" width="19" height="14" rx="2.5"/>
<path d="m3 7 9 6 9-6"/>
</svg>
<span class="__cf_email__" data-cfemail="61121411110e1315210c0415000e114f0008">[email protected]</span>
</a>
</div>
<div class="row">
<div class="copyright">© 2026 <span class="accent">MetaopAI</span> — Public Beta · Now Open</div>
<div class="socials">
<a href="https://www.youtube.com/@metaopai" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
<a href="https://www.linkedin.com/company/metaopai/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://www.tiktok.com/@metaopai" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z"/></svg>
</a>
<a href="https://x.com/metaopai" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/></svg>
</a>
</div>
<div class="meta"><span class="dot"></span>System status: live</div>
</div>
</div>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
// Intersection-observer based reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('in');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal, .reveal-stagger').forEach(el => observer.observe(el));
</script>
</body>
</html>