npm - @jaimevalasek/aioson - Versions diffs - 1.30.1 → 1.33.1 - Mend

@jaimevalasek/aioson 1.30.1 → 1.33.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/docs/design-previews/cognitive-core-ui-website.html CHANGED Viewed

@@ -1,1009 +1,190 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>SynapseAI — AI Platform Landing / Cognitive Core UI Preview</title>
-<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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-<style>
-  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  :root {
-    --bg: #0B0F15;
-    --surface: #111827;
-    --elevated: #1A2332;
-    --border: rgba(255,255,255,0.06);
-    --border-accent: rgba(34,211,238,0.30);
-    --accent: #22D3EE;
-    --accent-dim: rgba(34,211,238,0.12);
-    --accent-glow: 0 0 40px rgba(34,211,238,0.12);
-    --text-heading: #F9FAFB;
-    --text-body: #E5E7EB;
-    --text-secondary: #9CA3AF;
-    --text-muted: #6B7280;
-    --void: #060910;
-  }
-  html { scroll-behavior: smooth; }
-  body {
-    font-family: 'Inter', sans-serif;
-    font-size: 15px;
-    line-height: 1.6;
-    color: var(--text-body);
-    background: var(--bg);
-  }
-  /* ── NAV ── */
-  nav {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    background: rgba(11,15,21,0.92);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--border);
-    padding: 0 40px;
-    height: 64px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .nav-logo {
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--text-heading);
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    letter-spacing: -0.02em;
-  }
-  .nav-logo-mark {
-    width: 30px;
-    height: 30px;
-    background: var(--accent);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 800;
-    color: #0B0F15;
-    box-shadow: 0 0 16px rgba(34,211,238,0.4);
-  }
-  .live-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background: var(--accent);
-    box-shadow: 0 0 8px rgba(34,211,238,0.8);
-    animation: pulse 2s ease-in-out infinite;
-  }
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
-  }
-  .nav-links {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    list-style: none;
-  }
-  .nav-links a {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: color 0.2s;
-  }
-  .nav-links a:hover { color: var(--text-heading); }
-  .btn-teal {
-    font-family: 'Inter', sans-serif;
-    font-size: 14px;
-    font-weight: 600;
-    color: #0B0F15;
-    background: var(--accent);
-    border: none;
-    border-radius: 6px;
-    padding: 9px 20px;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-  /* ── SECTIONS ── */
-  section { padding: 96px 40px; }
-  .container { max-width: 1140px; margin: 0 auto; }
-  /* ── HERO ── */
-  .hero {
-    padding: 100px 40px 0;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-  }
-  .hero::before {
-    content: '';
-    position: absolute;
-    top: -200px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 800px;
-    height: 600px;
-    background: radial-gradient(ellipse, rgba(34,211,238,0.07) 0%, transparent 70%);
-    pointer-events: none;
-  }
-  .mono-overline {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--accent);
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 28px;
-    border: 1px solid var(--border-accent);
-    padding: 5px 14px;
-    border-radius: 999px;
-    background: rgba(34,211,238,0.06);
-  }
-  .hero h1 {
-    font-size: 56px;
-    font-weight: 800;
-    color: var(--text-heading);
-    line-height: 1.08;
-    letter-spacing: -0.03em;
-    max-width: 800px;
-    margin: 0 auto 24px;
-  }
-  .hero h1 span {
-    color: var(--accent);
-  }
-  .hero-sub {
-    font-size: 18px;
-    color: var(--text-secondary);
-    max-width: 560px;
-    margin: 0 auto 44px;
-    line-height: 1.65;
-  }
-  .hero-ctas {
-    display: flex;
-    gap: 14px;
-    justify-content: center;
-    margin-bottom: 72px;
-  }
-  .btn-teal-lg {
-    font-family: 'Inter', sans-serif;
-    font-size: 15px;
-    font-weight: 600;
-    color: #0B0F15;
-    background: var(--accent);
-    border: none;
-    border-radius: 6px;
-    padding: 13px 28px;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .btn-ghost-dark-lg {
-    font-family: 'Inter', sans-serif;
-    font-size: 15px;
-    font-weight: 500;
-    color: var(--text-secondary);
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 13px 28px;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    transition: border-color 0.2s, color 0.2s;
-  }
-  .btn-ghost-dark-lg:hover {
-    border-color: rgba(255,255,255,0.2);
-    color: var(--text-heading);
-  }
-  /* Graph mock */
-  .graph-mock {
-    max-width: 900px;
-    margin: 0 auto;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 32px;
-    position: relative;
-  }
-  .graph-mock-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 32px;
-  }
-  .graph-mock-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-heading);
-  }
-  .graph-mock-meta {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    color: var(--text-muted);
-    display: flex;
-    gap: 16px;
-  }
-  .graph-meta-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-  .graph-meta-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-  }
-  .graph-bars {
-    display: flex;
-    align-items: flex-end;
-    gap: 6px;
-    height: 140px;
-    padding-bottom: 1px;
-    border-bottom: 1px solid var(--border);
-    position: relative;
-  }
-  .graph-bar-wrap {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    height: 100%;
-    gap: 3px;
-  }
-  .graph-bar {
-    border-radius: 3px 3px 0 0;
-    background: linear-gradient(180deg, var(--accent) 0%, rgba(34,211,238,0.3) 100%);
-    transition: opacity 0.2s;
-  }
-  .graph-bar-secondary {
-    border-radius: 3px 3px 0 0;
-    background: rgba(34,211,238,0.15);
-  }
-  .graph-gridlines {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    pointer-events: none;
-  }
-  .graph-gridline {
-    border-top: 1px dashed rgba(255,255,255,0.04);
-    width: 100%;
-  }
-  .graph-x-labels {
-    display: flex;
-    gap: 6px;
-    margin-top: 10px;
-  }
-  .graph-x-label {
-    flex: 1;
-    text-align: center;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 9px;
-    color: var(--text-muted);
-  }
-  /* ── STATS ROW ── */
-  .stats-section {
-    padding: 48px 40px;
-    background: var(--bg);
-  }
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    max-width: 1140px;
-    margin: 0 auto;
-  }
-  .stat-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 32px;
-    position: relative;
-  }
-  .stat-mono-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    margin-bottom: 12px;
-  }
-  .stat-value {
-    font-size: 38px;
-    font-weight: 800;
-    color: var(--accent);
-    letter-spacing: -0.03em;
-    line-height: 1;
-    margin-bottom: 6px;
-  }
-  .stat-desc {
-    font-size: 13px;
-    color: var(--text-secondary);
-  }
-  /* ── ARCHITECTURE ── */
-  .arch-section { background: var(--bg); }
-  .section-label-mono {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--accent);
-    display: block;
-    margin-bottom: 16px;
-  }
-  .section-heading {
-    font-size: 38px;
-    font-weight: 800;
-    color: var(--text-heading);
-    letter-spacing: -0.03em;
-    margin-bottom: 14px;
-    line-height: 1.15;
-  }
-  .section-sub {
-    font-size: 16px;
-    color: var(--text-secondary);
-    max-width: 480px;
-    margin-bottom: 56px;
-    line-height: 1.65;
-  }
-  .arch-diagram {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 48px 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
-    position: relative;
-  }
-  .arch-node {
-    background: var(--elevated);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 24px 32px;
-    text-align: center;
-    min-width: 180px;
-    position: relative;
-  }
-  .arch-node.accent-node {
-    border-color: var(--border-accent);
-    box-shadow: var(--accent-glow);
-  }
-  .arch-node-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    margin: 0 auto 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-  }
-  .arch-node-icon.teal { background: rgba(34,211,238,0.15); }
-  .arch-node-icon.dim { background: rgba(255,255,255,0.06); }
-  .arch-node-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    margin-bottom: 6px;
-  }
-  .arch-node-name {
-    font-size: 15px;
-    font-weight: 700;
-    color: var(--text-heading);
-    margin-bottom: 4px;
-  }
-  .arch-node-sub {
-    font-size: 12px;
-    color: var(--text-muted);
-  }
-  .arch-connector {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    min-width: 80px;
-  }
-  .arch-line {
-    width: 100%;
-    height: 1px;
-    background: linear-gradient(90deg, var(--border-accent), rgba(34,211,238,0.6), var(--border-accent));
-    position: relative;
-  }
-  .arch-arrow {
-    font-size: 12px;
-    color: var(--accent);
-  }
-  .arch-flow-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 9px;
-    color: var(--text-muted);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
-  /* ── FEATURES ── */
-  .features-dark { background: var(--surface); }
-  .features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-  }
-  .feature-card-dark {
-    background: var(--elevated);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 32px;
-    position: relative;
-    transition: border-color 0.2s;
-  }
-  .feature-card-dark:hover { border-color: rgba(255,255,255,0.12); }
-  .feature-card-dark.glow {
-    border-color: var(--border-accent);
-    box-shadow: var(--accent-glow);
-  }
-  .feature-icon-circle {
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    background: rgba(34,211,238,0.12);
-    border: 1px solid rgba(34,211,238,0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    margin-bottom: 20px;
-  }
-  .feature-card-dark .card-mono-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    margin-bottom: 8px;
-  }
-  .feature-card-dark h3 {
-    font-size: 16px;
-    font-weight: 700;
-    color: var(--text-heading);
-    margin-bottom: 10px;
-    letter-spacing: -0.01em;
-  }
-  .feature-card-dark p {
-    font-size: 14px;
-    color: var(--text-secondary);
-    line-height: 1.6;
-  }
-  /* ── TESTIMONIAL ── */
-  .testimonial-dark { background: var(--bg); }
-  .testimonial-card-dark {
-    max-width: 760px;
-    margin: 0 auto;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 52px 56px;
-    position: relative;
-  }
-  .quote-mark {
-    font-family: Georgia, serif;
-    font-size: 80px;
-    line-height: 0.6;
-    color: var(--accent);
-    opacity: 0.4;
-    margin-bottom: 24px;
-    display: block;
-  }
-  .testimonial-quote-dark {
-    font-family: Georgia, serif;
-    font-size: 20px;
-    font-style: italic;
-    color: var(--text-body);
-    line-height: 1.65;
-    margin-bottom: 32px;
-  }
-  .testimonial-author-dark {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-  }
-  .author-avatar-dark {
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    background: rgba(34,211,238,0.15);
-    border: 1px solid var(--border-accent);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
-    font-size: 14px;
-    color: var(--accent);
-    flex-shrink: 0;
-  }
-  .author-name-dark {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text-heading);
-    margin-bottom: 3px;
-  }
-  .author-role-dark {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    color: var(--text-muted);
-  }
-  /* ── CTA ── */
-  .cta-dark {
-    background: linear-gradient(135deg, #0B0F15 0%, #0d1e24 50%, #0B0F15 100%);
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    padding: 96px 40px;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-  }
-  .cta-dark::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 700px;
-    height: 400px;
-    background: radial-gradient(ellipse, rgba(34,211,238,0.09) 0%, transparent 70%);
-    pointer-events: none;
-  }
-  .cta-dark h2 {
-    font-size: 44px;
-    font-weight: 800;
-    color: var(--text-heading);
-    letter-spacing: -0.03em;
-    margin-bottom: 16px;
-    position: relative;
-  }
-  .cta-dark p {
-    font-size: 17px;
-    color: var(--text-secondary);
-    margin-bottom: 40px;
-    position: relative;
-  }
-  /* ── FOOTER ── */
-  footer {
-    background: var(--void);
-    padding: 60px 40px 32px;
-  }
-  .footer-inner {
-    max-width: 1140px;
-    margin: 0 auto;
-  }
-  .footer-grid {
-    display: grid;
-    grid-template-columns: 1.6fr 1fr 1fr 1fr;
-    gap: 48px;
-    margin-bottom: 48px;
-  }
-  .footer-brand p {
-    font-size: 13px;
-    color: var(--text-muted);
-    margin-top: 14px;
-    line-height: 1.65;
-    max-width: 240px;
-  }
-  .footer-col-heading {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    margin-bottom: 18px;
-  }
-  .footer-links { list-style: none; }
-  .footer-links li { margin-bottom: 10px; }
-  .footer-links a {
-    font-size: 14px;
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: color 0.2s;
-  }
-  .footer-links a:hover { color: var(--text-heading); }
-  .footer-bottom {
-    border-top: 1px solid var(--border);
-    padding-top: 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .footer-bottom-mono {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    color: var(--text-muted);
-  }
-  .footer-accent { color: var(--accent); }
-  .text-center { text-align: center; }
-  .mb-48 { margin-bottom: 48px; }
-</style>
-</head>
-<body>
-<!-- NAV -->
-<nav>
-  <a href="#" class="nav-logo">
-    <div class="nav-logo-mark">S</div>
-    SynapseAI
-    <div class="live-dot"></div>
-  </a>
-  <ul class="nav-links">
-    <li><a href="#">Platform</a></li>
-    <li><a href="#">Developers</a></li>
-    <li><a href="#">Enterprise</a></li>
-    <li><a href="#">Pricing</a></li>
-  </ul>
-  <a href="#" class="btn-teal">Start building →</a>
-</nav>
-<!-- HERO -->
-<div class="hero">
-  <div class="container" style="padding:0;">
-    <div class="mono-overline">
-      <div class="live-dot"></div>
-      AI Operations Platform
-    </div>
-    <h1>The <span>cognitive core</span> for enterprise AI.</h1>
-    <p class="hero-sub">Orchestrate AI agents, pipelines, and operations at scale. Real-time intelligence. Zero guesswork.</p>
-    <div class="hero-ctas">
-      <a href="#" class="btn-teal-lg">Deploy now →</a>
-      <a href="#" class="btn-ghost-dark-lg">Read the docs</a>
-    </div>
-    <!-- Graph mock -->
-    <div class="graph-mock">
-      <div class="graph-mock-header">
-        <span class="graph-mock-title">Operations Throughput — Last 24h</span>
-        <div class="graph-mock-meta">
-          <span class="graph-meta-item">
-            <span class="graph-meta-dot" style="background:var(--accent);box-shadow:0 0 6px rgba(34,211,238,0.6)"></span>
-            Processed
-          </span>
-          <span class="graph-meta-item">
-            <span class="graph-meta-dot" style="background:rgba(34,211,238,0.25)"></span>
-            Queued
-          </span>
-          <span style="color:var(--accent)">↑ 18.4% vs yesterday</span>
-        </div>
-      </div>
-      <div class="graph-bars">
-        <div class="graph-gridlines">
-          <div class="graph-gridline"></div>
-          <div class="graph-gridline"></div>
-          <div class="graph-gridline"></div>
-          <div class="graph-gridline"></div>
-        </div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:55%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:20%"></div><div class="graph-bar" style="height:62%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:25%"></div><div class="graph-bar" style="height:48%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:15%"></div><div class="graph-bar" style="height:71%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:22%"></div><div class="graph-bar" style="height:59%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:18%"></div><div class="graph-bar" style="height:80%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:28%"></div><div class="graph-bar" style="height:66%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:35%"></div><div class="graph-bar" style="height:72%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:24%"></div><div class="graph-bar" style="height:58%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:88%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:18%"></div><div class="graph-bar" style="height:76%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:22%"></div><div class="graph-bar" style="height:92%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:14%"></div><div class="graph-bar" style="height:84%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:26%"></div><div class="graph-bar" style="height:70%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:32%"></div><div class="graph-bar" style="height:95%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:20%"></div><div class="graph-bar" style="height:78%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:28%"></div><div class="graph-bar" style="height:63%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:16%"></div><div class="graph-bar" style="height:100%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:24%"></div><div class="graph-bar" style="height:87%"></div></div>
-        <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:73%"></div></div>
-      </div>
-      <div class="graph-x-labels">
-        <span class="graph-x-label">00:00</span>
-        <span class="graph-x-label">02:00</span>
-        <span class="graph-x-label">04:00</span>
-        <span class="graph-x-label">06:00</span>
-        <span class="graph-x-label">08:00</span>
-        <span class="graph-x-label">10:00</span>
-        <span class="graph-x-label">12:00</span>
-        <span class="graph-x-label">14:00</span>
-        <span class="graph-x-label">16:00</span>
-        <span class="graph-x-label">18:00</span>
-        <span class="graph-x-label">20:00</span>
-        <span class="graph-x-label">22:00</span>
-        <span class="graph-x-label">now</span>
-        <span class="graph-x-label"></span>
-        <span class="graph-x-label"></span>
-        <span class="graph-x-label"></span>
-        <span class="graph-x-label"></span>
-        <span class="graph-x-label"></span>
-        <span class="graph-x-label"></span>
-        <span class="graph-x-label"></span>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- STATS -->
-<div class="stats-section">
-  <div class="stats-grid">
-    <div class="stat-card">
-      <div class="stat-mono-label">Total operations</div>
-      <div class="stat-value">2.4B+</div>
-      <div class="stat-desc">Operations orchestrated this quarter across all customers</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-mono-label">Model accuracy</div>
-      <div class="stat-value">98.7%</div>
-      <div class="stat-desc">Average intent resolution accuracy across all pipelines</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-mono-label">Response latency</div>
-      <div class="stat-value">&lt; 50ms</div>
-      <div class="stat-desc">P99 end-to-end latency for production agent calls</div>
-    </div>
-  </div>
-</div>
-<!-- ARCHITECTURE -->
-<section class="arch-section">
-  <div class="container">
-    <span class="section-label-mono">How it works</span>
-    <h2 class="section-heading">Purpose-built orchestration<br>for AI at scale.</h2>
-    <p class="section-sub">SynapseAI connects your models, agents, and outputs through a unified orchestration layer — with full observability at every step.</p>
-    <div class="arch-diagram">
-      <div class="arch-node">
-        <div class="arch-node-icon dim">🤖</div>
-        <div class="arch-node-label">Layer 1</div>
-        <div class="arch-node-name">AI Agents</div>
-        <div class="arch-node-sub">GPT-4 · Claude · Custom</div>
-      </div>
-      <div class="arch-connector">
-        <div class="arch-flow-label">route</div>
-        <div class="arch-line"></div>
-        <div class="arch-arrow">→</div>
-      </div>
-      <div class="arch-node accent-node">
-        <div class="arch-node-icon teal">⚡</div>
-        <div class="arch-node-label">Core Layer</div>
-        <div class="arch-node-name">Orchestrator</div>
-        <div class="arch-node-sub">SynapseAI Engine</div>
-      </div>
-      <div class="arch-connector">
-        <div class="arch-flow-label">emit</div>
-        <div class="arch-line"></div>
-        <div class="arch-arrow">→</div>
-      </div>
-      <div class="arch-node">
-        <div class="arch-node-icon dim">📤</div>
-        <div class="arch-node-label">Layer 3</div>
-        <div class="arch-node-name">Output</div>
-        <div class="arch-node-sub">APIs · Webhooks · Store</div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- FEATURES -->
-<section class="features-dark">
-  <div class="container">
-    <div class="text-center mb-48">
-      <span class="section-label-mono">Features</span>
-      <h2 class="section-heading">Built for cognitive workloads.</h2>
-    </div>
-    <div class="features-grid">
-      <div class="feature-card-dark glow">
-        <div class="feature-icon-circle">🧠</div>
-        <div class="card-mono-label">Intelligence</div>
-        <h3>Multi-Model Routing</h3>
-        <p>Route requests to the optimal model based on cost, latency, and capability. Automatic fallbacks included.</p>
-      </div>
-      <div class="feature-card-dark">
-        <div class="feature-icon-circle">🔁</div>
-        <div class="card-mono-label">Orchestration</div>
-        <h3>Pipeline Composer</h3>
-        <p>Build complex agent pipelines with branching, retries, and parallel execution — no infrastructure to manage.</p>
-      </div>
-      <div class="feature-card-dark">
-        <div class="feature-icon-circle">📡</div>
-        <div class="card-mono-label">Observability</div>
-        <h3>Real-Time Tracing</h3>
-        <p>Full span-level visibility into every agent call, token, and decision. Debug production AI like a pro.</p>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- TESTIMONIAL -->
-<section class="testimonial-dark">
-  <div class="container">
-    <div class="testimonial-card-dark">
-      <span class="quote-mark">"</span>
-      <p class="testimonial-quote-dark">SynapseAI replaced three different tools we were stitching together. The orchestration engine is genuinely remarkable — we went from prototype to production in 11 days, and the latency improvements were immediate.</p>
-      <div class="testimonial-author-dark">
-        <div class="author-avatar-dark">TR</div>
-        <div>
-          <div class="author-name-dark">Thomas Reinhardt</div>
-          <div class="author-role-dark">VP Engineering @ Meridian Labs</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- CTA -->
-<div class="cta-dark">
-  <div class="container">
-    <h2>Deploy your cognitive core today.</h2>
-    <p>Start with the free tier. Scale to billions of operations. No commitment required.</p>
-    <a href="#" class="btn-teal-lg">Get started — it's free →</a>
-  </div>
-</div>
-<!-- FOOTER -->
-<footer>
-  <div class="footer-inner">
-    <div class="footer-grid">
-      <div class="footer-brand">
-        <a href="#" class="nav-logo">
-          <div class="nav-logo-mark">S</div>
-          SynapseAI
-        </a>
-        <p>The orchestration layer for production AI — built for teams who move fast and need to trust their systems.</p>
-      </div>
-      <div>
-        <div class="footer-col-heading">Platform</div>
-        <ul class="footer-links">
-          <li><a href="#">Orchestration</a></li>
-          <li><a href="#">Model Router</a></li>
-          <li><a href="#">Pipeline Builder</a></li>
-          <li><a href="#">Observability</a></li>
-        </ul>
-      </div>
-      <div>
-        <div class="footer-col-heading">Developers</div>
-        <ul class="footer-links">
-          <li><a href="#">Documentation</a></li>
-          <li><a href="#">API Reference</a></li>
-          <li><a href="#">SDKs</a></li>
-          <li><a href="#">Status</a></li>
-        </ul>
-      </div>
-      <div>
-        <div class="footer-col-heading">Company</div>
-        <ul class="footer-links">
-          <li><a href="#">About</a></li>
-          <li><a href="#">Blog</a></li>
-          <li><a href="#">Careers</a></li>
-          <li><a href="#">Security</a></li>
-        </ul>
-      </div>
-    </div>
-    <div class="footer-bottom">
-      <span class="footer-bottom-mono">© 2024 <span class="footer-accent">SynapseAI</span>, Inc. All rights reserved.</span>
-      <span class="footer-bottom-mono">Cognitive Core UI — Design Skill Preview</span>
-    </div>
-  </div>
-</footer>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nexus Command Cloud - Cognitive Core Website Preview</title>
+  <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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="cognitive-core-ui-preview.css" />
+</head>
+<body>
+  <div class="cc-page">
+    <header class="landing-nav">
+      <a class="brand" href="index.html">
+        <span class="brand-mark">N</span>
+        <span class="brand-copy">
+          <span class="brand-name">Nexus Command Cloud</span>
+          <span class="brand-sub cc-mono">AI operations platform</span>
+        </span>
+      </a>
+      <nav class="landing-links" aria-label="Website navigation">
+        <a href="#platform">Platform</a>
+        <a href="#signals">Signals</a>
+        <a href="#security">Security</a>
+      </nav>
+      <a class="primary-button" href="cognitive-core-ui.html">Open cockpit</a>
+    </header>
+    <main>
+      <section class="landing-hero">
+        <div class="hero-product-scene" aria-hidden="true">
+          <div class="scene-panel">
+            <div class="scene-header">Zones</div>
+            <div class="panel-body">
+              <div class="queue-list">
+                <div class="queue-row"><div class="row-title">Production</div><span class="tag green">Stable</span></div>
+                <div class="queue-row"><div class="row-title">Staging</div><span class="tag cyan">Synced</span></div>
+                <div class="queue-row"><div class="row-title">Research</div><span class="tag amber">Guarded</span></div>
+              </div>
+            </div>
+          </div>
+          <div class="scene-panel scene-main">
+            <div class="scene-header">Agent throughput</div>
+            <div class="scene-grid">
+              <div class="scene-bar" style="height:38%"></div>
+              <div class="scene-bar" style="height:54%"></div>
+              <div class="scene-bar" style="height:72%"></div>
+              <div class="scene-bar" style="height:61%"></div>
+              <div class="scene-bar" style="height:88%"></div>
+              <div class="scene-bar" style="height:66%"></div>
+              <div class="scene-bar" style="height:92%"></div>
+              <div class="scene-bar" style="height:78%"></div>
+              <div class="scene-bar" style="height:69%"></div>
+              <div class="scene-bar" style="height:83%"></div>
+            </div>
+            <div class="scene-footer">
+              <div class="scene-stat">
+                <div class="metric-label">P95</div>
+                <div class="metric-value">118ms</div>
+              </div>
+              <div class="scene-stat">
+                <div class="metric-label">Uptime</div>
+                <div class="metric-value">99.99%</div>
+              </div>
+              <div class="scene-stat">
+                <div class="metric-label">Agents</div>
+                <div class="metric-value">42</div>
+              </div>
+            </div>
+          </div>
+          <div class="scene-panel">
+            <div class="scene-header">Live trace</div>
+            <div class="panel-body">
+              <div class="timeline">
+                <div class="timeline-item"><span class="timeline-pin"></span><div><div class="timeline-title">Gate passed</div><div class="timeline-time">14:31</div></div></div>
+                <div class="timeline-item"><span class="timeline-pin" style="background:var(--cc-violet)"></span><div><div class="timeline-title">Route changed</div><div class="timeline-time">14:28</div></div></div>
+                <div class="timeline-item"><span class="timeline-pin" style="background:var(--cc-green)"></span><div><div class="timeline-title">Budget synced</div><div class="timeline-time">14:22</div></div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="hero-copy">
+          <div class="eyebrow">Cognitive operations, live</div>
+          <h1>Nexus Command Cloud</h1>
+          <p>Control AI agents, model routes, budgets, and production risk from one dense, readable command plane.</p>
+          <div class="hero-actions">
+            <a class="primary-button" href="cognitive-core-ui.html">View product</a>
+            <a class="ghost-button" href="#platform">Explore platform</a>
+          </div>
+        </div>
+      </section>
+      <section class="landing-section" id="platform">
+        <div class="section-inner">
+          <div class="eyebrow">Platform map</div>
+          <h2 class="section-heading">Built for teams running AI systems under real pressure.</h2>
+          <p class="section-copy">The visual system keeps operational density high while preserving hierarchy, spacing, and responsive safety.</p>
+          <div class="feature-grid">
+            <article class="feature-panel">
+              <div class="mini-metric">01</div>
+              <h3>Agent orchestration</h3>
+              <p>Route work across specialized agents with clear status, confidence, and fallback paths.</p>
+            </article>
+            <article class="feature-panel">
+              <div class="mini-metric">02</div>
+              <h3>Budget intelligence</h3>
+              <p>Expose cost pressure and model spend without burying operators in finance screens.</p>
+            </article>
+            <article class="feature-panel">
+              <div class="mini-metric">03</div>
+              <h3>Traceable decisions</h3>
+              <p>Show who routed what, which gate passed, and what changed in the runtime state.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section class="landing-section" id="signals">
+        <div class="section-inner content-grid">
+          <article class="content-panel">
+            <div class="panel-header">
+              <div>
+                <h2 class="panel-title">Signal quality</h2>
+                <p class="panel-subtitle">A product screenshot-style module, not a decorative abstract block.</p>
+              </div>
+              <span class="tag cyan">Live</span>
+            </div>
+            <div class="panel-body">
+              <div class="signal-chart inset-panel">
+                <div class="chart-bars" aria-hidden="true">
+                  <div class="bar" style="height:44%"></div>
+                  <div class="bar secondary" style="height:58%"></div>
+                  <div class="bar" style="height:71%"></div>
+                  <div class="bar" style="height:63%"></div>
+                  <div class="bar secondary" style="height:49%"></div>
+                  <div class="bar" style="height:82%"></div>
+                  <div class="bar" style="height:76%"></div>
+                  <div class="bar secondary" style="height:61%"></div>
+                  <div class="bar" style="height:88%"></div>
+                  <div class="bar" style="height:69%"></div>
+                  <div class="bar secondary" style="height:53%"></div>
+                  <div class="bar" style="height:94%"></div>
+                  <div class="bar" style="height:73%"></div>
+                  <div class="bar secondary" style="height:57%"></div>
+                  <div class="bar" style="height:86%"></div>
+                  <div class="bar" style="height:79%"></div>
+                </div>
+                <div class="chart-legend">
+                  <span class="legend-item"><span class="legend-dot"></span> Decisions</span>
+                  <span class="legend-item"><span class="legend-dot violet"></span> Reviews</span>
+                </div>
+              </div>
+            </div>
+          </article>
+          <aside class="content-panel" id="security">
+            <div class="panel-header">
+              <div>
+                <h2 class="panel-title">Security posture</h2>
+                <p class="panel-subtitle">Policies stay visible in the primary product surface.</p>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div class="queue-list">
+                <div class="queue-row">
+                  <div class="row-top"><span class="row-title">Human approval gates</span><span class="tag green">On</span></div>
+                  <div class="row-meta">Required for deploy, budget, and data export operations.</div>
+                </div>
+                <div class="queue-row">
+                  <div class="row-top"><span class="row-title">Model fallback policy</span><span class="tag cyan">Synced</span></div>
+                  <div class="row-meta">Fallbacks are locked to approved providers.</div>
+                </div>
+                <div class="queue-row">
+                  <div class="row-top"><span class="row-title">Eval drift threshold</span><span class="tag amber">Tight</span></div>
+                  <div class="row-meta">Alerting at 2.5% regression against baseline.</div>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </main>
+  </div>
+</body>
+</html>