Write

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sunaiva — AI Memory Platform. Your AI Never Forgets.</title>
  <meta name="description" content="Sunaiva is the memory layer for AI agents. Every conversation remembered, every insight retained, instantly recalled. MCP-native, developer-first." />
  <meta name="keywords" content="ai memory mcp developer, persistent ai memory api, mcp server for ai, voice ai infrastructure, ai memory for claude chatgpt" />
  <meta property="og:title" content="Sunaiva — Your AI Never Forgets" />
  <meta property="og:description" content="The memory layer for AI agents. Every conversation remembered, every insight retained, instantly recalled." />
  <meta property="og:type" content="website" />
  <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@300;400;500;600;700;900&display=swap" rel="stylesheet" />
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <script src="https://unpkg.com/@telnyx/ai-agent-widget@latest/dist/telnyx-ai-agent-widget.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg-primary: #050811;
      --bg-secondary: #080d1a;
      --bg-card: rgba(255,255,255,0.04);
      --bg-card-hover: rgba(255,255,255,0.07);
      --border: rgba(255,255,255,0.08);
      --border-hover: rgba(99,102,241,0.4);
      --text-primary: #f0f4ff;
      --text-secondary: #8892b0;
      --text-muted: #4a5568;
      --accent-blue: #6366f1;
      --accent-purple: #8b5cf6;
      --accent-cyan: #06b6d4;
      --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
      --gradient-subtle: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.1) 100%);
      --glow-blue: rgba(99,102,241,0.3);
      --glow-purple: rgba(139,92,246,0.25);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-xl: 28px;
      --shadow-card: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.05) inset;
      --shadow-glow: 0 0 40px rgba(99,102,241,0.2), 0 4px 24px rgba(0,0,0,0.5);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== SCROLLBAR ===== */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 3px; }

    /* ===== UTILITY ===== */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .gradient-text {
      background: var(--gradient-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      33% { transform: translateY(-18px) rotate(1deg); }
      66% { transform: translateY(-8px) rotate(-1deg); }
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes gradient-shift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes particle-drift {
      0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
      50% { transform: translateY(-30px) translateX(15px) scale(1.1); opacity: 1; }
      100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
    }
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes counter-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
    .reveal-delay-5 { transition-delay: 0.5s; }
    .reveal-delay-6 { transition-delay: 0.6s; }

    /* ===== BUTTONS ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: var(--radius-md);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: all 0.25s ease;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
    }
    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: background 0.25s ease;
    }
    .btn:hover::before { background: rgba(255,255,255,0.08); }

    .btn-primary {
      background: var(--gradient-brand);
      color: #fff;
      box-shadow: 0 4px 20px rgba(99,102,241,0.35);
    }
    .btn-primary:hover {
      box-shadow: 0 6px 30px rgba(99,102,241,0.55);
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      color: var(--text-primary);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover {
      border-color: var(--border-hover);
      background: rgba(99,102,241,0.06);
      transform: translateY(-1px);
    }

    .btn-outline-gradient {
      background: transparent;
      color: var(--text-primary);
      border: 1px solid transparent;
      background-clip: padding-box;
      position: relative;
    }
    .btn-outline-gradient::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: var(--radius-md);
      background: var(--gradient-brand);
      z-index: -1;
    }

    .btn-sm { padding: 8px 18px; font-size: 13px; }
    .btn-lg { padding: 16px 32px; font-size: 16px; border-radius: var(--radius-lg); }

    /* ===== NAVIGATION ===== */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 0 24px;
      transition: all 0.3s ease;
    }
    nav.scrolled {
      background: rgba(5,8,17,0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    }
    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
      text-decoration: none;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
    }
    .nav-links a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 14px;
      border-radius: var(--radius-sm);
      transition: all 0.2s ease;
    }
    .nav-links a:hover {
      color: var(--text-primary);
      background: rgba(255,255,255,0.05);
    }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .nav-signin {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 14px;
      transition: color 0.2s;
    }
    .nav-signin:hover { color: var(--text-primary); }

    /* Mobile nav */
    .nav-mobile-toggle {
      display: none;
      background: none;
      border: 1px solid var(--border);
      color: var(--text-primary);
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 72px;
      left: 0;
      right: 0;
      background: rgba(5,8,17,0.98);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 20px 24px 28px;
      z-index: 99;
      flex-direction: column;
      gap: 4px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      transition: all 0.2s;
    }
    .mobile-menu a:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
    .mobile-menu .btn { margin-top: 8px; width: 100%; justify-content: center; }

    /* ===== HERO ===== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 120px 24px 80px;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    /* Gradient orb */
    .hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }
    .hero-orb-1 {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      animation: pulseGlow 5s ease-in-out infinite;
    }
    .hero-orb-2 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, transparent 70%);
      bottom: -50px;
      right: -100px;
      animation: pulseGlow 7s ease-in-out infinite 1s;
    }
    .hero-orb-3 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%);
      bottom: 0;
      left: -80px;
      animation: pulseGlow 6s ease-in-out infinite 2s;
    }
    /* Grid overlay */
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    }
    /* Floating particles */
    .hero-particles {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .particle {
      position: absolute;
      border-radius: 50%;
      background: var(--gradient-brand);
      opacity: 0.4;
    }
    .p1 { width: 4px; height: 4px; top: 20%; left: 15%; animation: particle-drift 6s ease-in-out infinite; }
    .p2 { width: 6px; height: 6px; top: 40%; left: 80%; animation: particle-drift 8s ease-in-out infinite 1s; }
    .p3 { width: 3px; height: 3px; top: 70%; left: 25%; animation: particle-drift 7s ease-in-out infinite 2s; }
    .p4 { width: 5px; height: 5px; top: 30%; left: 65%; animation: particle-drift 9s ease-in-out infinite 0.5s; }
    .p5 { width: 4px; height: 4px; top: 60%; left: 90%; animation: particle-drift 5s ease-in-out infinite 3s; }
    .p6 { width: 7px; height: 7px; top: 85%; left: 45%; animation: particle-drift 10s ease-in-out infinite 1.5s; }
    .p7 { width: 3px; height: 3px; top: 15%; left: 55%; animation: particle-drift 6.5s ease-in-out infinite 2.5s; }
    .p8 { width: 5px; height: 5px; top: 75%; left: 10%; animation: particle-drift 8.5s ease-in-out infinite 0.8s; }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      width: 100%;
    }
    .hero-left {}
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(99,102,241,0.1);
      border: 1px solid rgba(99,102,241,0.25);
      border-radius: 100px;
      padding: 6px 16px;
      font-size: 12px;
      font-weight: 600;
      color: #a5b4fc;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 28px;
      animation: fadeInUp 0.6s ease both;
    }
    .hero-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #6366f1;
      animation: blink 2s ease-in-out infinite;
    }
    .hero-h1 {
      font-size: clamp(40px, 6vw, 72px);
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -2px;
      margin-bottom: 24px;
      animation: fadeInUp 0.6s ease 0.1s both;
    }
    .hero-sub {
      font-size: 18px;
      line-height: 1.7;
      color: var(--text-secondary);
      margin-bottom: 40px;
      max-width: 520px;
      animation: fadeInUp 0.6s ease 0.2s both;
    }
    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 52px;
      animation: fadeInUp 0.6s ease 0.3s both;
    }
    .hero-stats {
      display: flex;
      gap: 32px;
      animation: fadeInUp 0.6s ease 0.4s both;
    }
    .hero-stat {}
    .hero-stat-value {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .hero-stat-label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .hero-stat-divider {
      width: 1px;
      background: var(--border);
    }

    /* Hero code block */
    .hero-right {
      animation: fadeInUp 0.7s ease 0.2s both;
    }
    .hero-code-window {
      background: rgba(8,13,26,0.9);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-glow);
      backdrop-filter: blur(20px);
      position: relative;
    }
    .hero-code-window::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--gradient-brand);
      opacity: 0.6;
    }
    .code-titlebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.02);
    }
    .code-dots {
      display: flex;
      gap: 7px;
    }
    .code-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
    .code-dot-red { background: #ff5f57; }
    .code-dot-yellow { background: #ffbd2e; }
    .code-dot-green { background: #28ca42; }
    .code-title {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      font-family: 'SF Mono', 'Fira Code', monospace;
    }
    .code-lang {
      font-size: 11px;
      color: var(--accent-blue);
      background: rgba(99,102,241,0.1);
      padding: 2px 8px;
      border-radius: 4px;
      font-family: monospace;
    }
    .code-body {
      padding: 24px;
      font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.8;
    }
    .code-comment { color: #4a5568; }
    .code-keyword { color: #c792ea; }
    .code-string { color: #c3e88d; }
    .code-var { color: #82aaff; }
    .code-func { color: #82aaff; }
    .code-method { color: #f78c6c; }
    .code-number { color: #f78c6c; }
    .code-prop { color: #a5b4fc; }
    .code-line { display: block; }
    .code-indent-1 { padding-left: 20px; }
    .code-indent-2 { padding-left: 40px; }
    .code-cursor {
      display: inline-block;
      width: 2px;
      height: 16px;
      background: #6366f1;
      margin-left: 2px;
      vertical-align: middle;
      animation: blink 1s ease-in-out infinite;
    }

    /* ===== SOCIAL PROOF BAR ===== */
    .social-proof {
      padding: 28px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.015);
      overflow: hidden;
    }
    .social-proof-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .social-proof-label {
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 20px;
    }
    .social-proof-logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;
    }
    .sp-logo {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255,255,255,0.2);
      letter-spacing: -0.3px;
      text-transform: uppercase;
      transition: color 0.3s;
      cursor: default;
      user-select: none;
    }
    .sp-logo:hover { color: rgba(255,255,255,0.4); }

    /* ===== SECTION COMMON ===== */
    section { padding: 100px 0; }
    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--accent-blue);
      margin-bottom: 16px;
    }
    .section-tag::before {
      content: '';
      width: 20px;
      height: 2px;
      background: var(--gradient-brand);
      border-radius: 2px;
    }
    .section-title {
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -1.5px;
      margin-bottom: 20px;
    }
    .section-sub {
      font-size: 17px;
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 600px;
    }
    .section-header { margin-bottom: 64px; }
    .section-header-center { text-align: center; }
    .section-header-center .section-tag { justify-content: center; }
    .section-header-center .section-tag::before { display: none; }
    .section-header-center .section-sub { margin: 0 auto; }

    /* ===== HOW IT WORKS ===== */
    .how-it-works {
      background: var(--bg-secondary);
      position: relative;
      overflow: hidden;
    }
    .how-it-works::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(99,102,241,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      position: relative;
    }
    .steps-grid::before {
      content: '';
      position: absolute;
      top: 60px;
      left: calc(16.67% + 20px);
      right: calc(16.67% + 20px);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(99,102,241,0.4), rgba(139,92,246,0.4), transparent);
    }
    .step-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      position: relative;
      transition: all 0.3s ease;
    }
    .step-card:hover {
      border-color: var(--border-hover);
      background: var(--bg-card-hover);
      transform: translateY(-4px);
      box-shadow: var(--shadow-glow);
    }
    .step-number {
      position: absolute;
      top: -16px;
      left: 32px;
      background: var(--gradient-brand);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 100px;
      letter-spacing: 1px;
    }
    .step-icon {
      width: 56px;
      height: 56px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      position: relative;
    }
    .step-icon-1 { background: rgba(99,102,241,0.15); }
    .step-icon-2 { background: rgba(139,92,246,0.15); }
    .step-icon-3 { background: rgba(6,182,212,0.15); }
    .step-icon svg { width: 28px; height: 28px; }
    .step-icon-1 svg { color: #818cf8; }
    .step-icon-2 svg { color: #a78bfa; }
    .step-icon-3 svg { color: #22d3ee; }
    .step-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.3px;
    }
    .step-desc {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.7;
    }
    .step-code {
      margin-top: 20px;
      background: rgba(0,0,0,0.3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 12px;
      color: #c3e88d;
    }

    /* ===== FEATURES GRID ===== */
    .features-section {
      position: relative;
    }
    .features-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(139,92,246,0.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--gradient-brand);
      transform: scaleX(0);
      transition: transform 0.3s ease;
      transform-origin: left;
    }
    .feature-card:hover {
      border-color: var(--border-hover);
      background: var(--bg-card-hover);
      transform: translateY(-4px);
      box-shadow: var(--shadow-glow);
    }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-icon {
      font-size: 28px;
      margin-bottom: 16px;
      display: block;
    }
    .feature-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 10px;
      letter-spacing: -0.3px;
    }
    .feature-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.65;
    }
    .feature-badge {
      display: inline-block;
      margin-top: 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--accent-blue);
      background: rgba(99,102,241,0.1);
      border: 1px solid rgba(99,102,241,0.2);
      padding: 3px 10px;
      border-radius: 100px;
    }

    /* ===== USE CASES ===== */
    .use-cases { background: var(--bg-secondary); }
    .use-cases-tabs {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 48px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .use-cases-tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
      padding: 14px 24px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-muted);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: all 0.25s ease;
      white-space: nowrap;
      font-family: 'Inter', sans-serif;
    }
    .tab-btn:hover { color: var(--text-secondary); }
    .tab-btn.active {
      color: var(--text-primary);
      border-bottom-color: var(--accent-blue);
    }
    .tab-content { display: none; }
    .tab-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .tab-text-content {}
    .tab-use-tag {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent-purple);
      margin-bottom: 16px;
    }
    .tab-headline {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: -0.8px;
      margin-bottom: 20px;
      line-height: 1.2;
    }
    .tab-body {
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 32px;
    }
    .tab-bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .tab-bullets li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: var(--text-secondary);
    }
    .tab-bullets li::before {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(99,102,241,0.15);
      border: 1px solid rgba(99,102,241,0.3);
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }
    .tab-visual {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 32px;
      min-height: 340px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }
    .tab-visual::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: var(--gradient-subtle);
    }
    .memory-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--radius-md);
      padding: 16px;
      position: relative;
      z-index: 1;
    }
    .memory-card-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent-blue);
      margin-bottom: 6px;
    }
    .memory-card-text {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .memory-card-meta {
      margin-top: 8px;
      font-size: 11px;
      color: var(--text-muted);
      display: flex;
      gap: 12px;
    }
    .memory-score {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #22c55e;
    }
    .memory-score-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
    }

    /* ===== VOICE DEMO ===== */
    .voice-demo {
      background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(6,182,212,0.03) 50%, var(--bg-primary) 100%);
      position: relative;
      overflow: hidden;
    }
    .voice-demo::before {
      content: '';
      position: absolute;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .voice-demo-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .voice-demo-text {}
    .voice-demo-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(6,182,212,0.1);
      border: 1px solid rgba(6,182,212,0.25);
      border-radius: 100px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #22d3ee;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 24px;
    }
    .voice-demo-badge-pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22d3ee;
      animation: blink 1.5s ease-in-out infinite;
    }
    .voice-demo-headline {
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.15;
      margin-bottom: 20px;
    }
    .voice-demo-sub {
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 32px;
    }
    .voice-features {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .voice-feature-item {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 14px;
      color: var(--text-secondary);
    }
    .voice-feature-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: rgba(6,182,212,0.1);
      border: 1px solid rgba(6,182,212,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #22d3ee;
    }
    .voice-widget-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    .voice-widget-frame {
      background: var(--bg-card);
      border: 1px solid rgba(6,182,212,0.2);
      border-radius: var(--radius-xl);
      padding: 40px;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 0 60px rgba(6,182,212,0.08), var(--shadow-card);
      position: relative;
    }
    .voice-widget-frame::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(6,182,212,0.5), transparent);
    }
    .voice-widget-label {
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 24px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .voice-wave {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      height: 48px;
      margin-bottom: 20px;
    }
    .wave-bar {
      width: 4px;
      background: var(--gradient-brand);
      border-radius: 2px;
      animation: wave-bounce 1.2s ease-in-out infinite;
    }
    .wave-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
    .wave-bar:nth-child(2) { height: 35px; animation-delay: 0.1s; }
    .wave-bar:nth-child(3) { height: 48px; animation-delay: 0.2s; }
    .wave-bar:nth-child(4) { height: 40px; animation-delay: 0.3s; }
    .wave-bar:nth-child(5) { height: 28px; animation-delay: 0.4s; }
    .wave-bar:nth-child(6) { height: 45px; animation-delay: 0.15s; }
    .wave-bar:nth-child(7) { height: 32px; animation-delay: 0.25s; }
    .wave-bar:nth-child(8) { height: 20px; animation-delay: 0.35s; }
    @keyframes wave-bounce {
      0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
      50% { transform: scaleY(1); opacity: 1; }
    }
    telnyx-ai-agent {
      width: 100%;
      display: block;
    }

    /* ===== PRICING ===== */
    .pricing-section {
      background: var(--bg-secondary);
      position: relative;
      overflow: hidden;
    }
    .pricing-section::before {
      content: '';
      position: absolute;
      width: 800px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(99,102,241,0.06) 0%, transparent 70%);
      top: 0; left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
      z-index: 1;
    }
    .pricing-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 36px 32px;
      position: relative;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    .pricing-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-glow);
    }
    .pricing-card.featured {
      border-color: rgba(99,102,241,0.4);
      background: rgba(99,102,241,0.06);
    }
    .pricing-card.featured::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--gradient-brand);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .pricing-popular-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient-brand);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 18px;
      border-radius: 100px;
      white-space: nowrap;
      letter-spacing: 0.3px;
    }
    .pricing-tier {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .pricing-price {
      margin-bottom: 8px;
    }
    .pricing-amount {
      font-size: 52px;
      font-weight: 900;
      letter-spacing: -2px;
      line-height: 1;
    }
    .pricing-period {
      font-size: 16px;
      color: var(--text-muted);
      font-weight: 400;
    }
    .pricing-desc {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 28px;
      line-height: 1.5;
      min-height: 42px;
    }
    .pricing-divider {
      height: 1px;
      background: var(--border);
      margin-bottom: 24px;
    }
    .pricing-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
      margin-bottom: 32px;
    }
    .pricing-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--text-secondary);
    }
    .pricing-check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(99,102,241,0.12);
      border: 1px solid rgba(99,102,241,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--accent-blue);
    }
    .pricing-check svg { width: 10px; height: 10px; }
    .pricing-cta { margin-top: auto; }
    .pricing-note {
      text-align: center;
      margin-top: 32px;
      font-size: 13px;
      color: var(--text-muted);
    }
    .pricing-note span { color: var(--accent-blue); font-weight: 600; }

    /* ===== TESTIMONIALS ===== */
    .testimonials-section {}
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .testimonial-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 32px;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .testimonial-card:hover {
      border-color: var(--border-hover);
      background: var(--bg-card-hover);
      transform: translateY(-4px);
      box-shadow: var(--shadow-glow);
    }
    .testimonial-stars {
      display: flex;
      gap: 3px;
      color: #fbbf24;
      font-size: 14px;
    }
    .testimonial-quote {
      font-size: 16px;
      line-height: 1.7;
      color: var(--text-primary);
      font-style: italic;
      flex: 1;
    }
    .testimonial-author { display: flex; align-items: center; gap: 14px; }
    .testimonial-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .avatar-1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
    .avatar-2 { background: linear-gradient(135deg, #06b6d4, #6366f1); }
    .avatar-3 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
    .testimonial-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
    .testimonial-role { font-size: 12px; color: var(--text-muted); }
    .testimonial-metric {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(34,197,94,0.1);
      border: 1px solid rgba(34,197,94,0.2);
      border-radius: 100px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #22c55e;
    }

    /* ===== FINAL CTA ===== */
    .final-cta {
      background: var(--bg-secondary);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .final-cta::before {
      content: '';
      position: absolute;
      width: 700px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .final-cta-inner {
      position: relative;
      z-index: 1;
      max-width: 700px;
      margin: 0 auto;
    }
    .final-cta-eyebrow {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--accent-blue);
      margin-bottom: 24px;
    }
    .final-cta-title {
      font-size: clamp(36px, 5vw, 60px);
      font-weight: 900;
      letter-spacing: -2px;
      line-height: 1.08;
      margin-bottom: 24px;
    }
    .final-cta-sub {
      font-size: 18px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 44px;
    }
    .final-cta-buttons {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }
    .final-cta-note { font-size: 13px; color: var(--text-muted); }
    .final-cta-note span { color: var(--accent-blue); }

    /* ===== FOOTER ===== */
    footer {
      background: var(--bg-primary);
      border-top: 1px solid var(--border);
      padding: 64px 0 32px;
    }
    .footer-inner {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    .footer-brand {}
    .footer-logo {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: 14px;
      display: inline-block;
    }
    .footer-tagline {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 20px;
    }
    .footer-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .footer-badge {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      border: 1px solid var(--border);
      padding: 4px 10px;
      border-radius: 100px;
    }
    .footer-col {}
    .footer-col-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 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-primary); }
    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-copy {
      font-size: 13px;
      color: var(--text-muted);
    }
    .footer-copy a { color: var(--text-muted); text-decoration: none; }
    .footer-copy a:hover { color: var(--text-secondary); }
    .footer-legal {
      display: flex;
      gap: 20px;
    }
    .footer-legal a {
      font-size: 12px;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-legal a:hover { color: var(--text-secondary); }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
      .hero-content { grid-template-columns: 1fr; gap: 48px; }
      .hero-right { order: -1; }
      .hero-h1 { font-size: clamp(36px, 6vw, 56px); }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
      .voice-demo-inner { grid-template-columns: 1fr; gap: 48px; }
      .tab-content.active { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      section { padding: 72px 0; }
      .nav-links, .nav-signin { display: none; }
      .nav-mobile-toggle { display: flex; }
      .steps-grid { grid-template-columns: 1fr; }
      .steps-grid::before { display: none; }
      .features-grid { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .hero-stats { gap: 20px; }
      .hero-stat-value { font-size: 20px; }
      .footer-inner { grid-template-columns: 1fr; gap: 32px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .final-cta-buttons { flex-direction: column; align-items: center; }
      .social-proof-logos { gap: 24px; }
    }
    @media (max-width: 480px) {
      .hero-ctas { flex-direction: column; }
      .hero-ctas .btn { width: 100%; justify-content: center; }
    }
  </style>
</head>
<body>

<!-- ===== NAVIGATION ===== -->
<nav id="main-nav">
  <div class="nav-inner">
    <a href="#" class="nav-logo gradient-text">Sunaiva</a>
    <ul class="nav-links">
      <li><a href="#features">Features</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#demo">Demo</a></li>
      <li><a href="#use-cases">Use Cases</a></li>
    </ul>
    <div class="nav-actions">
      <a href="#" class="nav-signin">Sign In</a>
      <a href="#" class="btn btn-primary btn-sm">Get Started</a>
    </div>
    <button class="nav-mobile-toggle" id="mobile-toggle" aria-label="Toggle menu">
      <i data-lucide="menu" style="width:18px;height:18px;"></i>
    </button>
  </div>
</nav>

<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu">
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
  <a href="#demo">Demo</a>
  <a href="#use-cases">Use Cases</a>
  <a href="#">Sign In</a>
  <a href="#" class="btn btn-primary">Get Started Free</a>
</div>

<!-- ===== HERO ===== -->
<section class="hero" id="hero">
  <div class="hero-bg">
    <div class="hero-orb hero-orb-1"></div>
    <div class="hero-orb hero-orb-2"></div>
    <div class="hero-orb hero-orb-3"></div>
    <div class="hero-grid"></div>
    <div class="hero-particles">
      <div class="particle p1"></div>
      <div class="particle p2"></div>
      <div class="particle p3"></div>
      <div class="particle p4"></div>
      <div class="particle p5"></div>
      <div class="particle p6"></div>
      <div class="particle p7"></div>
      <div class="particle p8"></div>
    </div>
  </div>

  <div class="hero-content">
    <div class="hero-left">
      <div class="hero-badge">
        <span class="hero-badge-dot"></span>
        Now in Public Beta
      </div>
      <h1 class="hero-h1">Give Your AI<br /><span class="gradient-text">Perfect Memory</span></h1>
      <p class="hero-sub">Sunaiva is the memory layer for AI agents. Every conversation remembered, every insight retained, instantly recalled — across every session, forever.</p>
      <div class="hero-ctas">
        <a href="#" class="btn btn-primary btn-lg">
          <i data-lucide="zap" style="width:18px;height:18px;"></i>
          Start Free
        </a>
        <a href="#demo" class="btn btn-ghost btn-lg">
          See How It Works
          <i data-lucide="arrow-right" style="width:18px;height:18px;"></i>
        </a>
      </div>
      <div class="hero-stats">
        <div class="hero-stat">
          <div class="hero-stat-value gradient-text"><100ms</div>
          <div class="hero-stat-label">Recall Latency</div>
        </div>
        <div class="hero-stat-divider"></div>
        <div class="hero-stat">
          <div class="hero-stat-value gradient-text">MCP</div>
          <div class="hero-stat-label">Native Protocol</div>
        </div>
        <div class="hero-stat-divider"></div>
        <div class="hero-stat">
          <div class="hero-stat-value gradient-text">99.9%</div>
          <div class="hero-stat-label">Uptime SLA</div>
        </div>
      </div>
    </div>

    <div class="hero-right">
      <div class="hero-code-window" style="animation: float 8s ease-in-out infinite;">
        <div class="code-titlebar">
          <div class="code-dots">
            <div class="code-dot code-dot-red"></div>
            <div class="code-dot code-dot-yellow"></div>
            <div class="code-dot code-dot-green"></div>
          </div>
          <span class="code-title">sunaiva_connect.py</span>
          <span class="code-lang">Python</span>
        </div>
        <div class="code-body">
          <span class="code-line"><span class="code-comment"># Connect Sunaiva to your AI agent</span></span>
          <span class="code-line"><span class="code-keyword">import</span> <span class="code-var">sunaiva</span></span>
          <span class="code-line"> </span>
          <span class="code-line"><span class="code-comment"># Initialize the memory client</span></span>
          <span class="code-line"><span class="code-var">client</span> <span class="code-keyword">=</span> <span class="code-var">sunaiva</span>.<span class="code-method">Client</span>(</span>
          <span class="code-line code-indent-1"><span class="code-prop">api_key</span><span class="code-keyword">=</span><span class="code-string">"sun_live_••••••••"</span>,</span>
          <span class="code-line code-indent-1"><span class="code-prop">agent_id</span><span class="code-keyword">=</span><span class="code-string">"agent-9c42d3ce"</span></span>
          <span class="code-line">)</span>
          <span class="code-line"> </span>
          <span class="code-line"><span class="code-comment"># Store a memory instantly</span></span>
          <span class="code-line"><span class="code-var">client</span>.<span class="code-method">remember</span>(</span>
          <span class="code-line code-indent-1"><span class="code-prop">content</span><span class="code-keyword">=</span><span class="code-string">"User prefers async updates"</span>,</span>
          <span class="code-line code-indent-1"><span class="code-prop">tags</span><span class="code-keyword">=</span>[<span class="code-string">"preference"</span>, <span class="code-string">"ux"</span>]</span>
          <span class="code-line">)</span>
          <span class="code-line"> </span>
          <span class="code-line"><span class="code-comment"># Recall with semantic search</span></span>
          <span class="code-line"><span class="code-var">memories</span> <span class="code-keyword">=</span> <span class="code-var">client</span>.<span class="code-method">recall</span>(</span>
          <span class="code-line code-indent-1"><span class="code-prop">query</span><span class="code-keyword">=</span><span class="code-string">"user communication style"</span>,</span>
          <span class="code-line code-indent-1"><span class="code-prop">limit</span><span class="code-keyword">=</span><span class="code-number">5</span></span>
          <span class="code-line">)</span>
          <span class="code-line"> </span>
          <span class="code-line"><span class="code-comment"># > 3 memories found in 47ms</span> <span class="code-cursor"></span></span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== SOCIAL PROOF BAR ===== -->
<div class="social-proof">
  <div class="social-proof-inner">
    <div class="social-proof-label">Trusted by AI builders across Australia and beyond</div>
    <div class="social-proof-logos">
      <div class="sp-logo">BuildFlow</div>
      <div class="sp-logo">Nexflow</div>
      <div class="sp-logo">DispatchAI</div>
      <div class="sp-logo">Vortex Labs</div>
      <div class="sp-logo">Meridian Dev</div>
    </div>
  </div>
</div>

<!-- ===== HOW IT WORKS ===== -->
<section class="how-it-works" id="how-it-works">
  <div class="container">
    <div class="section-header section-header-center reveal">
      <div class="section-tag">How It Works</div>
      <h2 class="section-title">From zero to persistent memory <span class="gradient-text">in minutes</span></h2>
      <p class="section-sub">Three steps. One line of code. Your AI goes from amnesia to perfect recall.</p>
    </div>
    <div class="steps-grid">
      <div class="step-card reveal reveal-delay-1">
        <div class="step-number">Step 01</div>
        <div class="step-icon step-icon-1">
          <i data-lucide="plug" style="width:28px;height:28px;color:#818cf8;"></i>
        </div>
        <h3 class="step-title">Connect</h3>
        <p class="step-desc">Add Sunaiva to your AI agent in one line. Drop-in MCP server, REST API, or Python SDK. Works with Claude, GPT-4, Gemini — any agent.</p>
        <div class="step-code">mcp install sunaiva --key sun_live_xxxxx</div>
      </div>
      <div class="step-card reveal reveal-delay-2">
        <div class="step-number">Step 02</div>
        <div class="step-icon step-icon-2">
          <i data-lucide="brain" style="width:28px;height:28px;color:#a78bfa;"></i>
        </div>
        <h3 class="step-title">Remember</h3>
        <p class="step-desc">Every interaction is automatically captured, structured, and indexed. Entities, decisions, preferences — all extracted and persisted in your private vault.</p>
        <div class="step-code">client.remember("User hates popups")</div>
      </div>
      <div class="step-card reveal reveal-delay-3">
        <div class="step-number">Step 03</div>
        <div class="step-icon step-icon-3">
          <i data-lucide="search" style="width:28px;height:28px;color:#22d3ee;"></i>
        </div>
        <h3 class="step-title">Recall</h3>
        <p class="step-desc">Instant semantic search across all stored memories. Your agent retrieves relevant context before every response — sub-100ms, every time.</p>
        <div class="step-code">memories = client.recall("user preferences")</div>
      </div>
    </div>
  </div>
</section>

<!-- ===== FEATURES GRID ===== -->
<section class="features-section" id="features">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-tag">Features</div>
      <h2 class="section-title">Everything your agent needs<br />to <span class="gradient-text">truly remember</span></h2>
      <p class="section-sub">Built for developers who demand speed, privacy, and reliability from their AI infrastructure.</p>
    </div>
    <div class="features-grid">
      <div class="feature-card reveal reveal-delay-1">
        <span class="feature-icon">⚡</span>
        <h3 class="feature-title">Instant Recall</h3>
        <p class="feature-desc">Sub-100ms semantic search across millions of memories. Powered by a vector engine purpose-built for agent workloads — no cold starts, no batch delays.</p>
        <div class="feature-badge">p99 < 100ms</div>
      </div>
      <div class="feature-card reveal reveal-delay-2">
        <span class="feature-icon">🔒</span>
        <h3 class="feature-title">Private by Design</h3>
        <p class="feature-desc">Your data is isolated at the database layer. No cross-tenant queries. No data training on your memories. Exportable, deletable, fully yours.</p>
        <div class="feature-badge">Per-user isolation</div>
      </div>
      <div class="feature-card reveal reveal-delay-3">
        <span class="feature-icon">🤖</span>
        <h3 class="feature-title">MCP Native</h3>
        <p class="feature-desc">First-class Model Context Protocol support. Works out-of-the-box with Claude desktop, Cursor, and any MCP-compatible agent. Ship in minutes, not days.</p>
        <div class="feature-badge">Claude + GPT + Gemini</div>
      </div>
      <div class="feature-card reveal reveal-delay-4">
        <span class="feature-icon">🌐</span>
        <h3 class="feature-title">Cross-Session Memory</h3>
        <p class="feature-desc">Memory persists across every conversation, every device, every session reset. Your agent picks up exactly where it left off — weeks or months later.</p>
        <div class="feature-badge">Unlimited history</div>
      </div>
      <div class="feature-card reveal reveal-delay-5">
        <span class="feature-icon">📊</span>
        <h3 class="feature-title">Memory Analytics</h3>
        <p class="feature-desc">Dashboard visibility into what your AI knows. View memory clusters, usage patterns, top entities. Understand — and audit — your agent's knowledge state.</p>
        <div class="feature-badge">Live dashboard</div>
      </div>
      <div class="feature-card reveal reveal-delay-6">
        <span class="feature-icon">🔧</span>
        <h3 class="feature-title">Developer First</h3>
        <p class="feature-desc">Full REST API with 18 documented endpoints. Webhooks for async events. Python and Node SDKs. OpenAPI spec included. Production-ready from day one.</p>
        <div class="feature-badge">Full API + Webhooks</div>
      </div>
    </div>
  </div>
</section>

<!-- ===== USE CASES ===== -->
<section class="use-cases" id="use-cases">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-tag">Use Cases</div>
      <h2 class="section-title">Built for <span class="gradient-text">every AI workflow</span></h2>
      <p class="section-sub">From voice agents to personal assistants — Sunaiva memory transforms every AI interaction.</p>
    </div>
    <div class="use-cases-tabs reveal">
      <button class="tab-btn active" data-tab="voice">Voice Agents</button>
      <button class="tab-btn" data-tab="service">Customer Service</button>
      <button class="tab-btn" data-tab="personal">Personal AI</button>
    </div>
    <div class="tab-content active" id="tab-voice">
      <div class="tab-text-content">
        <div class="tab-use-tag">Voice Agents</div>
        <h3 class="tab-headline">Never ask the same<br />question twice</h3>
        <p class="tab-body">Voice AI agents with persistent memory feel fundamentally different. They remember the caller's name, their business, last interaction, and stated preferences — before they say a word.</p>
        <ul class="tab-bullets">
          <li>Caller context injected before every conversation starts</li>
          <li>Previous appointments, preferences, and notes recalled instantly</li>
          <li>Conversation outcomes automatically written back to memory</li>
          <li>Integrates with Telnyx, VAPI, and any voice platform</li>
        </ul>
      </div>
      <div class="tab-visual">
        <div class="memory-card">
          <div class="memory-card-tag">Caller Memory — Live</div>
          <div class="memory-card-text">James called about roof leak 3 weeks ago. Prefers morning calls. Has insurance through Allianz. Booked Dave for inspection.</div>
          <div class="memory-card-meta">
            <span>47ms recall</span>
            <span class="memory-score"><span class="memory-score-dot"></span>0.94 relevance</span>
          </div>
        </div>
        <div class="memory-card">
          <div class="memory-card-tag">Previous Interaction</div>
          <div class="memory-card-text">2026-01-15: Quoted $1,400 for full roof reseal. Needs a second quote for insurance claim. Follow up Feb.</div>
          <div class="memory-card-meta">
            <span>23 days ago</span>
            <span class="memory-score"><span class="memory-score-dot"></span>0.89 relevance</span>
          </div>
        </div>
        <div class="memory-card">
          <div class="memory-card-tag">Preference Signal</div>
          <div class="memory-card-text">Explicitly said no to email — SMS or call only. Mentioned "busy mornings" twice. Responds fastest between 2–4pm.</div>
          <div class="memory-card-meta">
            <span>Extracted from 3 calls</span>
            <span class="memory-score"><span class="memory-score-dot"></span>0.96 confidence</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content" id="tab-service">
      <div class="tab-text-content">
        <div class="tab-use-tag">Customer Service</div>
        <h3 class="tab-headline">Every customer<br />remembered perfectly</h3>
        <p class="tab-body">AI support agents that remember every ticket, every resolution, every frustration. No more asking customers to repeat themselves. No more losing context between agents.</p>
        <ul class="tab-bullets">
          <li>Full ticket history accessible in milliseconds at session start</li>
          <li>Automatic escalation triggers based on memory patterns</li>
          <li>Satisfaction signals extracted and stored across interactions</li>
          <li>Works alongside any helpdesk — Zendesk, Intercom, custom</li>
        </ul>
      </div>
      <div class="tab-visual">
        <div class="memory-card">
          <div class="memory-card-tag">Customer Profile — Auto-Generated</div>
          <div class="memory-card-text">Sarah Williams. Enterprise account. 3 open tickets in 30 days. Escalated twice. High churn risk flagged by memory pattern.</div>
          <div class="memory-card-meta">
            <span>Auto-extracted</span>
            <span class="memory-score"><span class="memory-score-dot"></span>Risk: High</span>
          </div>
        </div>
        <div class="memory-card">
          <div class="memory-card-tag">Prior Resolutions</div>
          <div class="memory-card-text">Ticket #4421 resolved Feb 12 — API timeout fix deployed. She mentioned "this is the third time" — note frustration signal for next agent.</div>
          <div class="memory-card-meta">
            <span>11 days ago</span>
            <span class="memory-score"><span class="memory-score-dot"></span>Critical context</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content" id="tab-personal">
      <div class="tab-text-content">
        <div class="tab-use-tag">Personal AI</div>
        <h3 class="tab-headline">Your AI that<br />truly knows you</h3>
        <p class="tab-body">Upload months of Claude, ChatGPT, or Gemini conversations. Sunaiva extracts your preferences, decisions, projects, and context — making every future AI session feel like a continuation.</p>
        <ul class="tab-bullets">
          <li>Upload conversations from any major AI platform</li>
          <li>Decisions, preferences, and facts auto-extracted</li>
          <li>MCP server drops into Claude desktop in 2 minutes</li>
          <li>Every new session starts with full personal context</li>
        </ul>
      </div>
      <div class="tab-visual">
        <div class="memory-card">
          <div class="memory-card-tag">Personal Knowledge — 847 memories</div>
          <div class="memory-card-text">Tech stack: FastAPI + Supabase + Next.js. Avoids Redux. Prefers Tailwind. Uses Vercel for deploys. Side project: IndieHackers tool.</div>
          <div class="memory-card-meta">
            <span>From 6 months of chats</span>
            <span class="memory-score"><span class="memory-score-dot"></span>Always current</span>
          </div>
        </div>
        <div class="memory-card">
          <div class="memory-card-tag">Decision History</div>
          <div class="memory-card-text">Chose PostgreSQL over MongoDB Jan 2026 after Sunaiva research. Rejected Prisma — too much abstraction. Loves raw SQL with psycopg2.</div>
          <div class="memory-card-meta">
            <span>Architecture decision</span>
            <span class="memory-score"><span class="memory-score-dot"></span>High confidence</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== VOICE DEMO ===== -->
<section class="voice-demo" id="demo">
  <div class="container">
    <div class="voice-demo-inner">
      <div class="voice-demo-text reveal">
        <div class="voice-demo-badge">
          <span class="voice-demo-badge-pulse"></span>
          Live Demo — Memory-Enabled Voice Agent
        </div>
        <h2 class="voice-demo-headline">Hear It <span class="gradient-text">In Action</span></h2>
        <p class="voice-demo-sub">Call our AI demo and ask it to remember something — then ask it again. This is what persistent memory feels like in a real voice conversation. No scripts. No pretending.</p>
        <div class="voice-features">
          <div class="voice-feature-item">
            <div class="voice-feature-icon">
              <i data-lucide="mic" style="width:16px;height:16px;"></i>
            </div>
            <span>Speaks naturally — no robotic tone, no caricature</span>
          </div>
          <div class="voice-feature-item">
            <div class="voice-feature-icon">
              <i data-lucide="database" style="width:16px;height:16px;"></i>
            </div>
            <span>Memory persists across every call session</span>
          </div>
          <div class="voice-feature-item">
            <div class="voice-feature-icon">
              <i data-lucide="shield" style="width:16px;height:16px;"></i>
            </div>
            <span>Demo data stays private — isolated per session</span>
          </div>
          <div class="voice-feature-item">
            <div class="voice-feature-icon">
              <i data-lucide="zap" style="width:16px;height:16px;"></i>
            </div>
            <span>Powered by Sunaiva AI infrastructure — Australian-hosted</span>
          </div>
        </div>
      </div>
      <div class="voice-widget-container reveal reveal-delay-2">
        <div class="voice-widget-frame">
          <div class="voice-widget-label">Live Voice Agent Demo</div>
          <div class="voice-wave">
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
          </div>
          <telnyx-ai-agent agent-id="assistant-9c42d3ce-e05a-4e34-8083-c91081917637"></telnyx-ai-agent>
        </div>
        <p style="font-size:12px;color:var(--text-muted);text-align:center;max-width:320px;">Click to connect. Ask the agent to remember something — then test its recall.</p>
      </div>
    </div>
  </div>
</section>

<!-- ===== PRICING ===== -->
<section class="pricing-section" id="pricing">
  <div class="container">
    <div class="section-header section-header-center reveal">
      <div class="section-tag">Pricing</div>
      <h2 class="section-title">Simple pricing.<br /><span class="gradient-text">No surprises.</span></h2>
      <p class="section-sub">Beta pricing active. All plans month-to-month. Cancel anytime. Early adopters lock in their rate forever.</p>
    </div>
    <div class="pricing-grid">
      <!-- Developer -->
      <div class="pricing-card reveal reveal-delay-1">
        <div class="pricing-tier">Developer</div>
        <div class="pricing-price">
          <span class="pricing-amount gradient-text">$49</span><span class="pricing-period">/mo</span>
        </div>
        <p class="pricing-desc">For individual developers and personal AI assistants.</p>
        <div class="pricing-divider"></div>
        <ul class="pricing-features">
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>10,000 memories stored</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>1 AI agent connected</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>REST API + MCP access</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Semantic search</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Basic analytics dashboard</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Email support</li>
        </ul>
        <div class="pricing-cta">
          <a href="#" class="btn btn-ghost" style="width:100%;justify-content:center;">Start Developer Plan</a>
        </div>
      </div>

      <!-- Business — Featured -->
      <div class="pricing-card featured reveal reveal-delay-2">
        <div class="pricing-popular-badge">Most Popular</div>
        <div class="pricing-tier">Business</div>
        <div class="pricing-price">
          <span class="pricing-amount gradient-text">$199</span><span class="pricing-period">/mo</span>
        </div>
        <p class="pricing-desc">For teams and products serving multiple users at scale.</p>
        <div class="pricing-divider"></div>
        <ul class="pricing-features">
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>100,000 memories stored</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>10 AI agents connected</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Full API + Webhooks</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Memory analytics suite</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Priority support</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Team dashboard</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Voice agent integration</li>
        </ul>
        <div class="pricing-cta">
          <a href="#" class="btn btn-primary" style="width:100%;justify-content:center;">Start Business Plan</a>
        </div>
      </div>

      <!-- Enterprise -->
      <div class="pricing-card reveal reveal-delay-3">
        <div class="pricing-tier">Enterprise</div>
        <div class="pricing-price">
          <span class="pricing-amount gradient-text" style="font-size:40px;">Custom</span>
        </div>
        <p class="pricing-desc">Private deployment, unlimited scale, SLA guarantee.</p>
        <div class="pricing-divider"></div>
        <ul class="pricing-features">
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Unlimited memories</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Unlimited agents</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Private infrastructure deployment</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>99.9% SLA guarantee</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Dedicated support line</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Custom integrations</li>
          <li><span class="pricing-check"><i data-lucide="check" style="width:10px;height:10px;"></i></span>Privacy Act compliance docs</li>
        </ul>
        <div class="pricing-cta">
          <a href="mailto:hello@sunaiva.com" class="btn btn-ghost" style="width:100%;justify-content:center;">Talk to Us</a>
        </div>
      </div>
    </div>
    <p class="pricing-note reveal">All plans include a 14-day free trial. Use code <span>BETA50</span> for 50% off — permanently.</p>
  </div>
</section>

<!-- ===== TESTIMONIALS ===== -->
<section class="testimonials-section" id="testimonials">
  <div class="container">
    <div class="section-header section-header-center reveal">
      <div class="section-tag">Testimonials</div>
      <h2 class="section-title">Builders who<br /><span class="gradient-text">ship with Sunaiva</span></h2>
    </div>
    <div class="testimonials-grid">
      <div class="testimonial-card reveal reveal-delay-1">
        <div class="testimonial-stars">★★★★★</div>
        <p class="testimonial-quote">"Sunaiva transformed our support bot. Our agents now have full caller history before a word is spoken. The integration took one afternoon — the impact was immediate."</p>
        <div style="margin-bottom:4px;"><span class="testimonial-metric">40% fewer repeated questions</span></div>
        <div class="testimonial-author">
          <div class="testimonial-avatar avatar-1">MC</div>
          <div>
            <div class="testimonial-name">Marcus Chen</div>
            <div class="testimonial-role">CTO @ BuildFlow</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card reveal reveal-delay-2">
        <div class="testimonial-stars">★★★★★</div>
        <p class="testimonial-quote">"The MCP integration took ten minutes. Memory was instant. Our AI assistant now feels like it genuinely knows each user — not just their current session."</p>
        <div style="margin-bottom:4px;"><span class="testimonial-metric">Ship time: 10 minutes</span></div>
        <div class="testimonial-author">
          <div class="testimonial-avatar avatar-2">SW</div>
          <div>
            <div class="testimonial-name">Sarah Williams</div>
            <div class="testimonial-role">AI Product Lead @ Nexflow</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card reveal reveal-delay-3">
        <div class="testimonial-stars">★★★★★</div>
        <p class="testimonial-quote">"Our agents finally feel like they know our customers. I cannot overstate how much that changes the interaction quality. Sunaiva is now a non-negotiable part of our stack."</p>
        <div style="margin-bottom:4px;"><span class="testimonial-metric">3x customer satisfaction</span></div>
        <div class="testimonial-author">
          <div class="testimonial-avatar avatar-3">JO</div>
          <div>
            <div class="testimonial-name">James Okafor</div>
            <div class="testimonial-role">Founder @ Dispatch AI</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== FINAL CTA ===== -->
<section class="final-cta">
  <div class="container">
    <div class="final-cta-inner reveal">
      <div class="final-cta-eyebrow">Get Started Today</div>
      <h2 class="final-cta-title">Ready to give your AI <span class="gradient-text">perfect memory?</span></h2>
      <p class="final-cta-sub">Join developers building with Sunaiva. Connect your first agent in minutes. Your AI never forgets again.</p>
      <div class="final-cta-buttons">
        <a href="#" class="btn btn-primary btn-lg">
          <i data-lucide="zap" style="width:18px;height:18px;"></i>
          Start Free — No Card Required
        </a>
        <a href="mailto:hello@sunaiva.com" class="btn btn-ghost btn-lg">Talk to a Human</a>
      </div>
      <p class="final-cta-note">14-day free trial • Cancel anytime • Use <span>BETA50</span> for 50% off forever</p>
    </div>
  </div>
</section>

<!-- ===== FOOTER ===== -->
<footer>
  <div class="container">
    <div class="footer-inner">
      <div class="footer-brand">
        <a href="#" class="footer-logo gradient-text">Sunaiva</a>
        <p class="footer-tagline">AI Infrastructure for developers and agencies. Persistent memory. Voice AI. Developer APIs. Australian-built.</p>
        <div class="footer-badges">
          <span class="footer-badge">Australian-Built</span>
          <span class="footer-badge">Privacy Act Compliant</span>
          <span class="footer-badge">MCP-Compatible</span>
          <span class="footer-badge">Beta Pricing Active</span>
        </div>
      </div>
      <div class="footer-col">
        <div class="footer-col-title">Product</div>
        <ul class="footer-links">
          <li><a href="#">AI Memory</a></li>
          <li><a href="#">Voice Bridge</a></li>
          <li><a href="#">API Platform</a></li>
          <li><a href="#">Partner Program</a></li>
          <li><a href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <div class="footer-col-title">Developers</div>
        <ul class="footer-links">
          <li><a href="#">Documentation</a></li>
          <li><a href="#">API Reference</a></li>
          <li><a href="#">MCP Setup Guide</a></li>
          <li><a href="#">Status Page</a></li>
          <li><a href="#">Changelog</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <div class="footer-col-title">Company</div>
        <ul class="footer-links">
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="mailto:hello@sunaiva.com">Contact</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Terms of Service</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p class="footer-copy">© 2026 Sunaiva. A product of <a href="#">AgileAdapt Pty Ltd</a>. Built with Genesis.</p>
      <div class="footer-legal">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms</a>
        <a href="#">API Terms</a>
        <a href="#">Compliance</a>
      </div>
    </div>
  </div>
</footer>

<script>
  // ===== LUCIDE ICONS =====
  lucide.createIcons();

  // ===== NAV SCROLL =====
  const nav = document.getElementById('main-nav');
  window.addEventListener('scroll', () => {
    if (window.scrollY > 20) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
  });

  // ===== MOBILE MENU =====
  const mobileToggle = document.getElementById('mobile-toggle');
  const mobileMenu = document.getElementById('mobile-menu');
  let menuOpen = false;

  mobileToggle.addEventListener('click', () => {
    menuOpen = !menuOpen;
    mobileMenu.classList.toggle('open', menuOpen);
    mobileToggle.innerHTML = menuOpen
      ? '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>'
      : '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>';
  });

  // Close mobile menu on link click
  mobileMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
      menuOpen = false;
      mobileMenu.classList.remove('open');
    });
  });

  // ===== SCROLL REVEAL =====
  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -40px 0px'
  });

  document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));

  // ===== USE CASES TABS =====
  const tabBtns = document.querySelectorAll('.tab-btn');
  const tabContents = document.querySelectorAll('.tab-content');

  tabBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const targetTab = btn.dataset.tab;

      tabBtns.forEach(b => b.classList.remove('active'));
      tabContents.forEach(c => c.classList.remove('active'));

      btn.classList.add('active');
      const target = document.getElementById('tab-' + targetTab);
      if (target) {
        target.classList.add('active');
      }
    });
  });

  // ===== SMOOTH SCROLL FOR NAV LINKS =====
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      const href = this.getAttribute('href');
      if (href === '#' || href === '') return;
      const target = document.querySelector(href);
      if (target) {
        e.preventDefault();
        const navHeight = 72;
        const top = target.getBoundingClientRect().top + window.scrollY - navHeight;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    });
  });

  // ===== PRICING CARD HOVER GLOW =====
  document.querySelectorAll('.pricing-card').forEach(card => {
    card.addEventListener('mousemove', (e) => {
      const rect = card.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width) * 100;
      const y = ((e.clientY - rect.top) / rect.height) * 100;
      card.style.setProperty('--mouse-x', x + '%');
      card.style.setProperty('--mouse-y', y + '%');
    });
  });

  // ===== COUNTER ANIMATION FOR STATS =====
  function animateCounter(el, target, duration, suffix) {
    const start = performance.now();
    const update = (time) => {
      const elapsed = time - start;
      const progress = Math.min(elapsed / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      const current = Math.round(eased * target);
      el.textContent = current + suffix;
      if (progress < 1) requestAnimationFrame(update);
    };
    requestAnimationFrame(update);
  }

  // ===== FEATURE CARD SHINE EFFECT =====
  document.querySelectorAll('.feature-card').forEach(card => {
    card.addEventListener('mousemove', (e) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      card.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(99,102,241,0.06) 0%, rgba(255,255,255,0.04) 60%)`;
    });
    card.addEventListener('mouseleave', () => {
      card.style.background = '';
    });
  });
</script>

</body>
</html>


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/pre_tool_check.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/auto_respawn.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/observability_logger.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/session_heartbeat.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/thinking_block_monitor.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/weekly_usage_tracker.py


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/post_edit_verify.py


File created successfully at: E:\genesis-system\Sunaiva\website\index.html


Now let's write the netlify.toml and DEPLOY.md:


[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[build]
  publish = "."

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Cache-Control = "public, max-age=3600"

[[headers]]
  for = "/index.html"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"


File created successfully at: E:\genesis-system\Sunaiva\website\netlify.toml


# Sunaiva Website — Deployment Instructions

## Status
File built: E:\genesis-system\Sunaiva\website\index.html
Netlify config: E:\genesis-system\Sunaiva\website\netlify.toml

## Deployment Note
No Netlify personal access token was found in MASTER_CREDENTIALS.md or .env.
To deploy via API, follow one of these methods:

---

## Option 1: Netlify CLI (Fastest)

```powershell
# Install Netlify CLI
npm install -g netlify-cli

# Navigate to website folder
cd E:\genesis-system\Sunaiva\website

# Login and deploy
netlify login
netlify deploy --prod --dir .
```

---

## Option 2: Netlify API (Programmatic)

Once you have a Netlify Personal Access Token (from https://app.netlify.com/user/applications):

```python
import requests
import zipfile
import io
import os

NETLIFY_TOKEN = "YOUR_TOKEN_HERE"
SITE_NAME = "sunaiva"  # or your site ID

# Zip the website
zip_buffer = io.BytesIO()
with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zf:
    zf.write(r'E:\genesis-system\Sunaiva\website\index.html', 'index.html')
    zf.write(r'E:\genesis-system\Sunaiva\website\netlify.toml', 'netlify.toml')
zip_buffer.seek(0)

# Deploy
headers = {
    "Authorization": f"Bearer {NETLIFY_TOKEN}",
    "Content-Type": "application/zip"
}
response = requests.post(
    f"https://api.netlify.com/api/v1/sites/{SITE_NAME}/deploys",
    headers=headers,
    data=zip_buffer.read()
)
print(response.json())
```

---

## Option 3: Drag and Drop

1. Go to https://app.netlify.com
2. Log in with Kinan's account
3. Drag the E:\genesis-system\Sunaiva\website\ folder onto the Netlify dashboard
4. Done — live in 30 seconds

---

## Site Files
- index.html — Complete production website (all sections, all styles, all JS)
- netlify.toml — Redirect config for SPA routing + security headers

## Where to Add Netlify Token
Add to E:\genesis-system\Credentials\MASTER_CREDENTIALS.md under a new section:
```
## NETLIFY
- Token: nfp_xxxxxxxxxxxxxxxxxxxx
- Account: kinan@agileadapt.com
```


File created successfully at: E:\genesis-system\Sunaiva\website\DEPLOY.md


Now let's verify the file quality — line count, all sections present, and Telnyx widget embedded:


Bash

Count lines in the HTML file


grep -c "section\|Section" E:/genesis-system/Sunaiva/website/index.html

Count section markers


2173 E:/genesis-system/Sunaiva/website/index.html


grep -i "telnyx-ai-agent\|telnyx.*widget\|assistant-9c42d3ce" E:/genesis-system/Sunaiva/website/index.html | head -5

Verify Telnyx widget is embedded


grep -E "HERO|SOCIAL PROOF|HOW IT WORKS|FEATURES|USE CASES|VOICE DEMO|PRICING|TESTIMONIALS|FINAL CTA|FOOTER|NAVIGATION" E:/genesis-system/Sunaiva/website/index.html | head -20

Verify all 11 required sections are present


Output:
<!-- ===== FEATURES GRID ===== -->
<!-- ===== USE CASES ===== -->
<!-- ===== VOICE DEMO ===== -->
<!-- ===== PRICING ===== -->
<!-- ===== TESTIMONIALS ===== -->


  <script src="https://unpkg.com/@telnyx/ai-agent-widget@latest/dist/telnyx-ai-agent-widget.js"></script>
    telnyx-ai-agent {
          <telnyx-ai-agent agent-id="assistant-9c42d3ce-e05a-4e34-8083-c91081917637"></telnyx-ai-agent>


    /* ===== NAVIGATION ===== */
    /* ===== HERO ===== */
    /* ===== SOCIAL PROOF BAR ===== */
    /* ===== HOW IT WORKS ===== */
    /* ===== FEATURES GRID ===== */
    /* ===== USE CASES ===== */
    /* ===== VOICE DEMO ===== */
    /* ===== PRICING ===== */
    /* ===== TESTIMONIALS ===== */
    /* ===== FINAL CTA ===== */
    /* ===== FOOTER ===== */
<!-- ===== NAVIGATION ===== -->
<!-- ===== HERO ===== -->
<!-- ===== SOCIAL PROOF BAR ===== -->
<!-- ===== HOW IT WORKS ===== -->
<!-- ===== FEATURES GRID ===== -->
<!-- ===== USE CASES ===== -->
<!-- ===== VOICE DEMO ===== -->
<!-- ===== PRICING ===== -->
<!-- ===== TESTIMONIALS ===== -->


grep -E "Inter|lucide|Google Fonts|IntersectionObserver|mobile-menu|tab-btn|reveal" E:/genesis-system/Sunaiva/website/index.html | wc -l

Verify technical requirements are all present


grep -E "Marcus Chen|Sarah Williams|James Okafor|49|199|Custom|BuildFlow|Nexflow|Dispatch" E:/genesis-system/Sunaiva/website/index.html | head -15

Verify pricing tiers and testimonials are present


BuildFlow

Nexflow

DispatchAI

      <button class="tab-btn" data-tab="service">Customer Service</button>

Customer Service

Customer Profile — Auto-Generated

Sarah Williams. Enterprise account. 3 open tickets in 30 days. Escalated twice. High churn risk flagged by memory pattern.

          $49/mo
          $199/mo
          Custom

Custom integrations

Marcus Chen

CTO @ BuildFlow

Sarah Williams

AI Product Lead @ Nexflow


All sections verified. The file is 2,173 lines and passes all quality gates. Let me do a final check on the file size and structure:


List final website directory contents with sizes


total 109
drwxr-xr-x 1 P3 197121     0 Feb 23 20:14 .
drwxr-xr-x 1 P3 197121     0 Feb 23 08:39 ..
-rw-r--r-- 1 P3 197121  1984 Feb 23 20:14 DEPLOY.md
-rw-r--r-- 1 P3 197121 16413 Feb 23 08:44 HOMEPAGE_COPY.md
-rw-r--r-- 1 P3 197121 78116 Feb 23 20:13 index.html
-rw-r--r-- 1 P3 197121   452 Feb 23 20:13 netlify.toml


The Sunaiva website is complete. Here is a full summary of what was built and delivered:

---

## Build Complete — Sunaiva Website

**File:** `E:\genesis-system\Sunaiva\website\index.html`
**Size:** 78 KB / 2,173 lines (well above the 800-line minimum)

### All 11 Sections Delivered

1. **NAV** — Fixed gradient "Sunaiva" logo, Features/Pricing/Demo/Use Cases links, Sign In + "Get Started" CTA. Scrolled state with glass blur effect. Mobile hamburger with slide-out menu.

2. **HERO** — "Give Your AI Perfect Memory" headline with animated gradient text. Three floating orbs, CSS grid background, 8 drifting particles. Live Python code snippet in a floating macOS-style window with syntax highlighting and blinking cursor. Three stat callouts (<100ms / MCP / 99.9%).

3. **SOCIAL PROOF BAR** — "Trusted by AI builders across Australia and beyond" with BuildFlow, Nexflow, DispatchAI, Vortex Labs, Meridian Dev logos.

4. **HOW IT WORKS** — Three numbered step cards (Connect / Remember / Recall) with icons, descriptions, and live code snippet examples per step.

5. **FEATURES GRID** — 6 glass-morphism cards: Instant Recall, Private by Design, MCP Native, Cross-Session Memory, Memory Analytics, Developer First. Hover-activated gradient top border + shine effect.

6. **USE CASES** — 3 tab panels (Voice Agents / Customer Service / Personal AI) with live memory card visuals showing realistic structured memory data.

7. **TELNYX VOICE DEMO** — Animated voice wave bars, full `<telnyx-ai-agent agent-id="assistant-9c42d3ce-e05a-4e34-8083-c91081917637">` widget embedded with the CDN script loaded at page head.

8. **PRICING** — Three tiers ($49 Developer / $199 Business with "Most Popular" badge / Enterprise Custom) with feature checklists and beta discount note.

9. **TESTIMONIALS** — Marcus Chen (CTO @ BuildFlow), Sarah Williams (AI Product Lead @ Nexflow), James Okafor (Founder @ Dispatch AI) with gradient avatars and metric badges.

10. **FINAL CTA** — "Ready to give your AI perfect memory?" with dual CTAs and BETA50 code note.

11. **FOOTER** — 4-column layout, trust badges, full legal footer, "Built with Genesis" credit.

### Technical Requirements Met

- Single self-contained HTML — all CSS in `<style>`, all JS in `<script>`, zero external CSS frameworks
- Google Fonts Inter (300/400/500/600/700/900) via CDN
- Lucide icons via CDN with `lucide.createIcons()` call
- Telnyx widget script loaded + component embedded
- Fully mobile responsive (grid collapses at 1024px and 768px breakpoints)
- Smooth scroll with nav offset
- IntersectionObserver scroll reveal animations with staggered delays
- Animated gradient orbs, particles, floating code window, wave bars

### Deployment

**No Netlify token found** in `MASTER_CREDENTIALS.md` or `.env`. Wrote `DEPLOY.md` at `E:\genesis-system\Sunaiva\website\DEPLOY.md` with three deployment paths:
1. `netlify deploy --prod --dir .` via Netlify CLI
2. Python script using Netlify ZIP deploy API (once token is added to credentials)
3. Drag-and-drop at app.netlify.com

`netlify.toml` is written with the required redirect rule plus security headers.


wsl.exe -e python3 /mnt/e/genesis-system/.claude/hooks/observability_logger.py --event subagent_stop