---
// Custom landing page for Astonish
const title = 'Astonish - A Personal AI Assistant That Learns, Remembers, and Automates';
const description = 'Chat with an AI assistant that uses 74+ tools, remembers everything, works in teams, and automates your workflows. Single Go binary.';
import '../styles/custom.css';
---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:type" content="website" />
  <link rel="icon" type="image/x-icon" href="/astonish/favicon.ico" />
  <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&display=swap" rel="stylesheet">
  <style>
    /* Reset and base */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
    :root {
      --purple-50: #f5f3ff;
      --purple-100: #ede9fe;
      --purple-200: #ddd6fe;
      --purple-300: #c4b5fd;
      --purple-400: #a78bfa;
      --purple-500: #8b5cf6;
      --purple-600: #7c3aed;
      --purple-700: #6d28d9;
      --purple-800: #5b21b6;
      --purple-900: #4c1d95;
      --violet-600: #7c3aed;
      --indigo-600: #4f46e5;
      --slate-50: #f8fafc;
      --slate-100: #f1f5f9;
      --slate-200: #e2e8f0;
      --slate-300: #cbd5e1;
      --slate-400: #94a3b8;
      --slate-500: #64748b;
      --slate-600: #475569;
      --slate-700: #334155;
      --slate-800: #1e293b;
      --slate-900: #0f172a;
      --green-400: #4ade80;
      --green-500: #22c55e;
      --green-600: #16a34a;
      --red-500: #ef4444;
      --yellow-500: #eab308;
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    html {
      height: 100%;
      scroll-padding-top: 60px;
    }

    body {
      font-family: var(--font);
      background: #fafbfe;
      color: #1e293b;
      line-height: 1.6;
      overflow-x: hidden;
      min-height: 100%;
    }

    a { text-decoration: none; color: inherit; }

    /* Navigation */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid var(--slate-200);
    }

    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--slate-900);
    }

    .nav-brand img {
      width: 32px;
      height: 32px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .nav-link {
      color: var(--slate-600);
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-link:hover {
      color: var(--purple-600);
    }

    .nav-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: var(--slate-900);
      color: white;
      border-radius: 8px;
      font-weight: 500;
      transition: background 0.2s;
    }

    .nav-btn:hover {
      background: var(--slate-700);
    }

    .nav-btn svg {
      width: 20px;
      height: 20px;
    }

    /* Hero Section */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6rem 1.5rem 4rem;
      position: relative;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--purple-50) 0%, white 50%, #eef2ff 100%);
    }

    .hero-blob {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.5;
    }

    .hero-blob-1 {
      top: 20%;
      left: 20%;
      background: var(--purple-300);
    }

    .hero-blob-2 {
      bottom: 20%;
      right: 20%;
      background: var(--indigo-600);
      opacity: 0.3;
    }

    .hero-content {
      position: relative;
      z-index: 10;
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: var(--purple-100);
      color: var(--purple-700);
      border-radius: 100px;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 2rem;
    }

    .hero-badge-dot {
      width: 8px;
      height: 8px;
      background: var(--green-500);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .hero-title {
      font-size: clamp(1.5rem, 4.5vw, 3.5rem);
      font-weight: 800;
      color: var(--slate-900);
      line-height: 1.2;
      margin-bottom: 1.5rem;
      white-space: nowrap;
    }

    .hero-title-gradient {
      background: linear-gradient(135deg, var(--purple-600), var(--violet-600), var(--indigo-600));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-subtitle {
      font-size: 1.25rem;
      color: var(--slate-600);
      max-width: 600px;
      margin: 0 auto 2.5rem;
    }

    .hero-subtitle span {
      color: var(--slate-500);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 3rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.875rem 1.5rem;
      border-radius: 10px;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.2s;
    }

    .btn svg {
      width: 20px;
      height: 20px;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
      color: white;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
    }

    .btn-secondary {
      background: white;
      color: var(--slate-700);
      border: 1px solid var(--slate-200);
    }

    .btn-secondary:hover {
      background: var(--slate-50);
      border-color: var(--slate-300);
    }

    /* Terminal */
    .terminal {
      max-width: 600px;
      margin: 0 auto;
      text-align: left;
      background: var(--slate-900);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .terminal-header {
      background: var(--slate-800);
      padding: 0.75rem 1rem;
      display: flex;
      gap: 0.5rem;
    }

    .terminal-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .terminal-dot-red { background: var(--red-500); }
    .terminal-dot-yellow { background: var(--yellow-500); }
    .terminal-dot-green { background: var(--green-500); }

    .terminal-body {
      padding: 1.25rem;
      font-family: var(--font-mono);
      font-size: 0.875rem;
      color: var(--slate-300);
      line-height: 1.7;
      min-height: 300px;
    }

    .terminal-prompt {
      color: var(--green-400);
    }

    .terminal-cmd {
      color: white;
    }

    .terminal-output {
      color: var(--slate-400);
    }

    .terminal-highlight {
      color: var(--purple-400);
    }

    /* Demo Terminal for Story Step */
    .demo-terminal {
      width: 100%;
      text-align: left;
      background: var(--slate-900);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      font-size: 0.75rem;
    }

    .demo-terminal-header {
      background: var(--slate-800);
      padding: 0.5rem 0.75rem;
      display: flex;
      gap: 0.4rem;
    }

    .demo-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .demo-dot-red { background: var(--red-500); }
    .demo-dot-yellow { background: var(--yellow-500); }
    .demo-dot-green { background: var(--green-500); }

    .demo-terminal-body {
      padding: 1rem;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--slate-300);
      line-height: 1.6;
      height: 450px;
      overflow-y: hidden;
    }

    .demo-success { color: var(--green-400); }
    .demo-agent-label { color: var(--yellow-400); font-weight: bold; }
    .demo-agent-text { color: var(--slate-300); }
    .demo-cmd { color: white; }

    .demo-tool-box {
      display: inline-block;
      border: 1px solid var(--slate-600);
      border-radius: 6px;
      margin: 0.3rem 0;
      padding: 0.5rem 0.75rem;
      background: var(--slate-800);
      min-width: 200px;
      max-width: 300px;
      font-size: 0.65rem;
    }

    .demo-tool-box-header {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.3rem;
      padding-bottom: 0.3rem;
      border-bottom: 1px solid var(--slate-600);
    }

    .demo-tool-box-name { color: #fb923c; font-weight: bold; }
    .demo-tool-box-params { color: var(--slate-400); }
    .demo-tool-box-params .param-key { color: #94a3b8; }
    .demo-tool-box-params .param-value { color: #22d3ee; }

    /* Section styles */
    .section {
      padding: 6rem 1.5rem;
      min-height: 100vh;
    }

    .section-alt {
      background: var(--slate-50);
      min-height: 100vh;
    }

    .section-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .section-title {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: 1rem;
    }

    .section-subtitle {
      font-size: 1.125rem;
      color: var(--slate-500);
      max-width: 600px;
      margin: 0 auto;
    }

    /* Code block */
    .code-card {
      background: var(--slate-900);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .code-header {
      padding: 0.75rem 1rem;
      background: var(--slate-800);
      color: var(--slate-400);
      font-family: var(--font-mono);
      font-size: 0.8rem;
    }

    .code-body {
      padding: 1.5rem;
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: var(--slate-300);
      line-height: 1.7;
      overflow-x: auto;
      white-space: pre;
    }

    .code-key { color: var(--purple-400); }
    .code-prop { color: var(--green-400); }
    .code-string { color: #fcd34d; }

    /* Features Grid */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
    }

    .feature-card {
      background: white;
      border-radius: 16px;
      padding: 2rem;
      border: 1px solid var(--slate-200);
      transition: all 0.3s;
    }

    .feature-card:hover {
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
      transform: translateY(-4px);
    }

    .feature-icon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      margin-bottom: 1.25rem;
    }

    .feature-icon-green { background: #dcfce7; }
    .feature-icon-purple { background: var(--purple-100); }
    .feature-icon-blue { background: #dbeafe; }
    .feature-icon-orange { background: #ffedd5; }
    .feature-icon-red { background: #fee2e2; }
    .feature-icon-indigo { background: #e0e7ff; }

    .feature-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: 0.75rem;
    }

    .feature-desc {
      color: var(--slate-500);
      line-height: 1.6;
    }

    /* Comparison Table */
    .comparison-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--slate-200);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
    }

    .comparison-table th,
    .comparison-table td {
      padding: 1rem 1.5rem;
      text-align: left;
    }

    .comparison-table thead {
      background: var(--slate-100);
    }

    .comparison-table th {
      font-weight: 600;
      color: var(--slate-700);
    }

    .comparison-table th:last-child {
      color: var(--purple-600);
    }

    .comparison-table tbody tr {
      border-top: 1px solid var(--slate-200);
    }

    .comparison-table td:first-child {
      font-weight: 500;
      color: var(--slate-800);
    }

    .comparison-table td:nth-child(2) {
      color: var(--slate-500);
    }

    .comparison-table td:last-child {
      color: var(--slate-800);
      font-weight: 500;
    }

    /* Combined Final Section */
    .combined-final-section {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .comparison-part {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 4rem 1.5rem 2rem;
      background: var(--slate-50);
    }

    .cta-part {
      flex: 0 0 auto;
      padding: 3rem 1.5rem;
      background: linear-gradient(135deg, var(--purple-600), var(--violet-600), var(--indigo-600));
      text-align: center;
    }

    .cta-title {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 700;
      color: white;
      margin-bottom: 1rem;
    }

    .cta-subtitle {
      font-size: 1.25rem;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 2.5rem;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .btn-white {
      background: white;
      color: var(--purple-700);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    }

    .btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .btn-ghost {
      background: rgba(255, 255, 255, 0.15);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    /* Footer */
    .footer {
      padding: 3rem 1.5rem;
      background: var(--slate-900);
      color: var(--slate-400);
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: white;
      font-weight: 600;
    }

    .footer-brand img {
      width: 32px;
      height: 32px;
    }

    .footer-links {
      display: flex;
      gap: 1.5rem;
    }

    .footer-link {
      color: var(--slate-400);
      transition: color 0.2s;
    }

    .footer-link:hover {
      color: white;
    }

    .footer-credit {
      font-size: 0.875rem;
    }

    .footer-credit a {
      color: var(--purple-400);
    }

    .footer-credit a:hover {
      color: var(--purple-300);
    }

    /* Scroll Animations */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

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

    .reveal-left {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .reveal-left.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .reveal-right {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .reveal-right.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .reveal-scale {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .reveal-scale.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Staggered delays for feature cards */
    .feature-card:nth-child(1) { transition-delay: 0.1s; }
    .feature-card:nth-child(2) { transition-delay: 0.2s; }
    .feature-card:nth-child(3) { transition-delay: 0.3s; }
    .feature-card:nth-child(4) { transition-delay: 0.4s; }
    .feature-card:nth-child(5) { transition-delay: 0.5s; }
    .feature-card:nth-child(6) { transition-delay: 0.6s; }

    /* Terminal typing animation */
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }

    @keyframes blink {
      0%, 100% { border-color: var(--green-400); }
      50% { border-color: transparent; }
    }

    .terminal-line {
      overflow: hidden;
      white-space: nowrap;
    }

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal-left, .reveal-right, .reveal-scale,
      .feature-card {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav class="nav">
    <div class="nav-inner">
      <a href="/astonish/" class="nav-brand">
        <img src="/astonish/logo.svg" alt="Astonish" />
        Astonish
      </a>
      <div class="nav-links">
        <a href="/astonish/getting-started/introduction/" class="nav-link">Docs</a>
        <a href="https://github.com/schardosin/astonish" class="nav-btn">
          <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
          GitHub
        </a>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-bg">
      <div class="hero-blob hero-blob-1"></div>
      <div class="hero-blob hero-blob-2"></div>
    </div>
    <div class="hero-content">
      <div class="hero-badge">
        <span class="hero-badge-dot"></span>
        74+ Built-in Tools | 15+ AI Providers
      </div>
      
      <h1 class="hero-title">
        Your Personal AI Assistant<br>
        <span class="hero-title-gradient">That Learns and Automates</span>
      </h1>
      
      <p class="hero-subtitle">Chat with an AI that remembers everything, uses real tools, and turns conversations into automations.</p>
      
      <div class="hero-actions">
        <a href="/astonish/getting-started/quick-setup/" class="btn btn-primary">
          Get Started
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
        </a>
        <a href="https://github.com/schardosin/astonish" class="btn btn-secondary">
          <svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
          View on GitHub
        </a>
      </div>

      <!-- Terminal Demo -->
      <div class="terminal">
        <div class="terminal-header">
          <span class="terminal-dot terminal-dot-red"></span>
          <span class="terminal-dot terminal-dot-yellow"></span>
          <span class="terminal-dot terminal-dot-green"></span>
        </div>
        <div class="terminal-body" id="terminal-demo">
          <!-- Content will be injected by JS -->
        </div>
      </div>
    </div>
  </section>

  <!-- The Astonish Experience - Full Viewport Storytelling -->
  <section class="story-section" id="experience">
    <div class="story-header">
      <h2 class="section-title">The Astonish Experience</h2>
      <p class="section-subtitle">From first install to a fully automated personal assistant</p>
    </div>

    <div class="story-slides" id="story-slides">
      <!-- Step 1: Set Up in Minutes -->
      <div class="story-slide active" data-step="1">
        <div class="story-slide-inner">
          <div class="story-visual">
            <div class="story-visual-container">
              <img src="/astonish/images/experience-setup.webp" alt="Studio setup wizard — choose your AI provider and configure in seconds" />
            </div>
          </div>
          <div class="story-text">
            <div class="story-step-badge">
              <span class="step-count">Step 1 of 6</span>
              <span class="step-label">Setup</span>
            </div>
            <h3 class="story-title">Set Up in Minutes</h3>
            <p class="story-description">Open the Studio setup wizard, pick your AI provider, enter your API key, and start the daemon. You're ready to chat.</p>
          </div>
        </div>
      </div>

      <!-- Step 2: Chat With Real Tools -->
      <div class="story-slide" data-step="2">
        <div class="story-slide-inner">
          <div class="story-visual">
            <div class="story-visual-container">
              <img src="/astonish/images/experience-chat.webp" alt="Studio Chat — conversational AI with tool calls for file search, shell commands, and more" />
            </div>
          </div>
          <div class="story-text">
            <div class="story-step-badge">
              <span class="step-count">Step 2 of 6</span>
              <span class="step-label">Chat</span>
            </div>
            <h3 class="story-title">Chat With Real Tools</h3>
            <p class="story-description">Ask your assistant to read files, run shell commands, search the web, manage credentials, or browse websites. 74+ tools are available out of the box.</p>
          </div>
        </div>
      </div>

      <!-- Step 3: It Remembers Everything -->
      <div class="story-slide" data-step="3">
        <div class="story-slide-inner">
          <div class="story-visual">
            <div class="story-visual-container">
              <img src="/astonish/images/experience-memory.webp" alt="Memory recall — the agent uses knowledge from previous sessions automatically" />
            </div>
          </div>
          <div class="story-text">
            <div class="story-step-badge">
              <span class="step-count">Step 3 of 6</span>
              <span class="step-label">Memory</span>
            </div>
            <h3 class="story-title">It Remembers Everything</h3>
            <p class="story-description">Persistent memory across all sessions. Your infrastructure details, preferences, and past solutions are recalled automatically. Never repeat yourself.</p>
          </div>
        </div>
      </div>

      <!-- Step 4: Chat From Anywhere -->
      <div class="story-slide" data-step="4">
        <div class="story-slide-inner">
          <div class="story-visual">
            <div class="story-visual-container">
              <img src="/astonish/images/experience-channels.webp" alt="Telegram integration — chat with your Astonish assistant from your phone" />
            </div>
          </div>
          <div class="story-text">
            <div class="story-step-badge">
              <span class="step-count">Step 4 of 6</span>
              <span class="step-label">Channels</span>
            </div>
            <h3 class="story-title">Chat From Anywhere</h3>
            <p class="story-description">Connect Telegram or Email as communication channels. Chat with your assistant from your phone, get scheduled results, and manage tasks on the go.</p>
          </div>
        </div>
      </div>

      <!-- Step 5: Automate What Works -->
      <div class="story-slide" data-step="5">
        <div class="story-slide-inner">
          <div class="story-visual">
            <div class="story-visual-container">
              <img src="/astonish/images/experience-automate.webp" alt="Studio Flow Editor — visual flow graph distilled from a successful chat session" />
            </div>
          </div>
          <div class="story-text">
            <div class="story-step-badge">
              <span class="step-count">Step 5 of 6</span>
              <span class="step-label">Automate</span>
            </div>
            <h3 class="story-title">Automate What Works</h3>
            <p class="story-description">Had a successful chat session? Distill it into a reusable flow. Schedule it with cron, broadcast results to Telegram, and never do that task manually again.</p>
          </div>
        </div>
      </div>

      <!-- Step 6: Build Agent Teams -->
      <div class="story-slide" data-step="6">
        <div class="story-slide-inner">
          <div class="story-visual">
            <div class="story-visual-container">
              <img src="/astonish/images/experience-fleet.webp" alt="Fleet — multi-agent team with specialized roles collaborating on complex tasks" />
            </div>
          </div>
          <div class="story-text">
            <div class="story-step-badge">
              <span class="step-count">Step 6 of 6</span>
              <span class="step-label">Fleet</span>
            </div>
            <h3 class="story-title">Build Agent Teams</h3>
            <p class="story-description">For complex projects, assemble a fleet of specialized agents. A researcher, a coder, a reviewer -- working together with hub-and-spoke coordination.</p>
          </div>
        </div>
      </div>

    </div>

    <!-- Overlay Navigation Controls -->
    <div class="story-nav-overlay">
      <button class="story-nav-btn story-nav-prev" id="story-prev" aria-label="Previous step" disabled>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </button>
      
      <button class="story-nav-btn story-nav-next" id="story-next" aria-label="Next step">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </button>
    </div>
  </section>

  <!-- Features Section -->
  <section class="section">
    <div class="section-inner">
      <div class="section-header reveal">
        <h2 class="section-title">Why Astonish?</h2>
        <p class="section-subtitle">A personal AI assistant platform, not just another chatbot.</p>
      </div>

      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon feature-icon-purple">
            <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
          </div>
          <h3 class="feature-title">Chat-First Experience</h3>
          <p class="feature-desc">Conversational AI with 74+ real tools. Read files, run commands, search the web, browse pages, manage credentials, send email, and more.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon feature-icon-blue">
            <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.674M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
          </div>
          <h3 class="feature-title">Learns and Remembers</h3>
          <p class="feature-desc">Persistent memory with vector search. Infrastructure details, preferences, and past solutions are recalled automatically across sessions.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon feature-icon-green">
            <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
          </div>
          <h3 class="feature-title">Always-On Daemon</h3>
          <p class="feature-desc">Background service that powers everything. Studio web UI, Telegram and Email channels, scheduled tasks, and fleet coordination -- all from one daemon.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon feature-icon-orange">
            <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
          </div>
          <h3 class="feature-title">Multi-Agent Fleet</h3>
          <p class="feature-desc">Assemble teams of specialized agents for complex projects. A researcher, a coder, a reviewer -- collaborating with hub-and-spoke coordination.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon feature-icon-red">
            <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
          </div>
          <h3 class="feature-title">Flow Distillation</h3>
          <p class="feature-desc">Successful chat session? Distill it into a repeatable YAML flow. Schedule with cron, broadcast results to Telegram, and never do it manually again.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon feature-icon-indigo">
            <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
          </div>
          <h3 class="feature-title">Secure by Default</h3>
          <p class="feature-desc">AES-256-GCM encrypted credential store with 5-layer output redaction. Studio auth. Secrets never reach the LLM context.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Combined Comparison + CTA Section -->
  <section class="combined-final-section">
    <!-- Comparison Part -->
    <div class="comparison-part">
      <div class="section-inner" style="max-width: 1100px;">
        <div class="section-header reveal">
          <h2 class="section-title">How Astonish Compares</h2>
          <p class="section-subtitle">Depth where it matters.</p>
        </div>

        <div class="comparison-card reveal-scale" style="overflow-x: auto;">
          <table class="comparison-table">
            <thead>
              <tr>
                <th>Capability</th>
                <th>OpenClaw</th>
                <th style="color: var(--purple-600);">Astonish</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Sandbox isolation</td>
                <td>Docker; MCP servers run on host</td>
                <td><strong>LXC/Incus; MCP servers inside container</strong></td>
              </tr>
              <tr>
                <td>Credential security</td>
                <td>Env var sanitization + keychain</td>
                <td><strong>AES-256-GCM + redaction + pre-LLM secret scanner</strong></td>
              </tr>
              <tr>
                <td>Memory system</td>
                <td>File-based knowledge (Markdown)</td>
                <td><strong>Hybrid vector + BM25, in-process embeddings</strong></td>
              </tr>
              <tr>
                <td>Browser automation</td>
                <td>Sidecar container + VNC</td>
                <td><strong>go-rod anti-fingerprinting + CDP handoff</strong></td>
              </tr>
              <tr>
                <td>Flow automation</td>
                <td>Not available</td>
                <td><strong>Distill chat to reusable YAML flows</strong></td>
              </tr>
              <tr>
                <td>Deployment</td>
                <td>Node.js monorepo + Docker</td>
                <td><strong>Single Go binary, runs locally</strong></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- CTA Part -->
    <div class="cta-part">
      <h2 class="cta-title">Ready to meet your AI assistant?</h2>
      <p class="cta-subtitle">Install in seconds. Set up in minutes. Chat forever.</p>
      <div class="cta-actions">
        <a href="/astonish/getting-started/quick-setup/" class="btn btn-white">
          Get Started
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
        </a>
        <a href="/astonish/chat/overview/" class="btn btn-ghost">
          Explore Chat Features
        </a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-inner">
      <div class="footer-brand">
        <img src="/astonish/logo.svg" alt="Astonish" />
        Astonish
      </div>
      <div class="footer-links">
        <a href="/astonish/getting-started/introduction/" class="footer-link">Docs</a>
        <a href="https://github.com/schardosin/astonish" class="footer-link">GitHub</a>
        <a href="https://github.com/schardosin/astonish/issues" class="footer-link">Issues</a>
      </div>
      <p class="footer-credit">
        Built with <a href="https://google.github.io/adk-go/">Google ADK</a>
      </p>
    </div>
  </footer>

  <script>
    import gsap from 'gsap';
    
    // Intersection Observer for scroll animations
    document.addEventListener('DOMContentLoaded', () => {
      const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');
      const featuresGrid = document.querySelector('.features-grid');

      const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
      };

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');

            // For features grid, add visible to all children
            if (entry.target.classList.contains('features-grid')) {
              entry.target.querySelectorAll('.feature-card').forEach(card => {
                card.classList.add('reveal');
                card.classList.add('visible');
              });
            }
          }
        });
      }, observerOptions);

      revealElements.forEach(el => observer.observe(el));
      if (featuresGrid) observer.observe(featuresGrid);

      // ===== Hero Terminal Typewriter Effect =====
      const terminalDemo = document.getElementById('terminal-demo');
      
      const heroCommands = [
        { type: 'input', text: 'brew install schardosin/astonish/astonish' },
        { type: 'output', text: '==> Installing astonish...' },
        { type: 'output', text: '==> Installed to /usr/local/bin/astonish' },
        { type: 'input', text: 'astonish setup' },
        { type: 'output', html: '<span class="terminal-highlight">? Select AI provider:</span> OpenAI' },
        { type: 'output', html: '<span class="terminal-highlight">? API key:</span> sk-****' },
        { type: 'output', text: 'Configuration saved.' },
        { type: 'input', text: 'astonish daemon install && astonish daemon start' },
        { type: 'output', html: 'Daemon running at <span class="terminal-highlight">http://localhost:9393</span>' }
      ];

      async function typeWriter(text, element, speed = 30) {
        return new Promise(resolve => {
          let i = 0;
          element.innerHTML = '<span class="prompt">$</span> ';
          const span = document.createElement('span');
          span.className = 'terminal-cmd';
          element.appendChild(span);
          
          const cursor = document.createElement('span');
          cursor.className = 'cursor';
          element.appendChild(cursor);

          function type() {
            if (i < text.length) {
              span.textContent += text.charAt(i);
              i++;
              setTimeout(type, speed);
            } else {
              cursor.remove();
              resolve();
            }
          }
          type();
        });
      }

      async function runHeroTerminalDemo() {
        if (!terminalDemo) return;
        terminalDemo.innerHTML = '';
        
        for (const cmd of heroCommands) {
          const div = document.createElement('div');
          
          if (cmd.type === 'input') {
            div.style.marginBottom = '0.5rem';
            terminalDemo.appendChild(div);
            await typeWriter(cmd.text, div);
          } else {
            div.className = 'terminal-output';
            div.style.marginBottom = '0.2rem';
            if (cmd.html) {
              div.innerHTML = cmd.html;
            } else {
              div.textContent = cmd.text;
            }
            terminalDemo.appendChild(div);
            await new Promise(r => setTimeout(r, 300));
          }
          
          if (cmd.type === 'input') {
            await new Promise(r => setTimeout(r, 600));
          }
        }
      }

      // Start hero terminal demo when it comes into view
      const terminalObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            runHeroTerminalDemo();
            terminalObserver.unobserve(entry.target);
          }
        });
      }, { threshold: 0.5 });
      
      if (terminalDemo) {
        terminalObserver.observe(terminalDemo);
      }

      // ===== Story Section Navigation =====
      const storySlides = document.querySelectorAll('.story-slide');
      const storyPrev = document.getElementById('story-prev');
      const storyNext = document.getElementById('story-next');
      const currentStepSpan = document.getElementById('current-step');
      
      let currentStep = 1;
      const totalSteps = storySlides.length;

      if (totalSteps > 0) {
        let storyAnimating = false;
        
        const slidesArray = gsap.utils.toArray('.story-slide');
        
        // Initial setup - hide all except first
        slidesArray.forEach((slide, i) => {
          if (i === 0) {
            gsap.set(slide, { autoAlpha: 1 });
          } else {
            gsap.set(slide, { autoAlpha: 0 });
          }
        });
        
        function showSlide(targetStep, direction = 1) {
          targetStep = Math.max(1, Math.min(targetStep, totalSteps));
          
          if (storyAnimating) return;
          if (targetStep === currentStep) return;
          
          storyAnimating = true;
          const fromStep = currentStep;
          currentStep = targetStep;
          
          const fromIndex = fromStep - 1;
          const toIndex = targetStep - 1;
          
          const tl = gsap.timeline({
            defaults: { duration: 0.25, ease: "power1.inOut" },
            onComplete: () => {
              storyAnimating = false;
            }
          });
          
          if (fromIndex >= 0 && fromIndex < slidesArray.length) {
            tl.to(slidesArray[fromIndex], { autoAlpha: 0 }, 0);
          }
          
          tl.to(slidesArray[toIndex], { autoAlpha: 1 }, 0);
          
          if (currentStepSpan) currentStepSpan.textContent = targetStep;
          
          if (storyPrev) storyPrev.disabled = targetStep === 1;
          if (storyNext) storyNext.disabled = targetStep === totalSteps;
        }

        if (storyPrev) {
          storyPrev.addEventListener('click', () => {
            if (currentStep > 1 && !storyAnimating) {
              showSlide(currentStep - 1, -1);
            }
          });
        }

        if (storyNext) {
          storyNext.addEventListener('click', () => {
            if (currentStep < totalSteps && !storyAnimating) {
              showSlide(currentStep + 1, 1);
            }
          });
        }

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
          const storySection = document.getElementById('experience');
          if (!storySection) return;
          
          const rect = storySection.getBoundingClientRect();
          const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
          
          if (isVisible && !storyAnimating) {
            if (e.key === 'ArrowLeft' && currentStep > 1) {
              showSlide(currentStep - 1, -1);
            } else if (e.key === 'ArrowRight' && currentStep < totalSteps) {
              showSlide(currentStep + 1, 1);
            }
          }
        });

        // Expose Story Control API for Global Scrollytelling
        window.astonishStory = {
           get currentStep() { return currentStep; },
           get totalSteps() { return totalSteps; },
           get animating() { return storyAnimating; },
           next: () => {
             if (currentStep < totalSteps && !storyAnimating) {
                showSlide(currentStep + 1, 1);
                return true;
             }
             return false;
           },
           prev: () => {
             if (currentStep > 1 && !storyAnimating) {
                showSlide(currentStep - 1, -1);
                return true;
             }
             return false;
           },
           canGoNext: () => currentStep < totalSteps && !storyAnimating,
           canGoPrev: () => currentStep > 1 && !storyAnimating
        };

        // Initialize first slide
        if (currentStepSpan) currentStepSpan.textContent = 1;
      }
    });
  </script>
  <!-- Unified GSAP Natural Scroll -->
  <script>
    import gsap from 'gsap';
    import { ScrollTrigger } from 'gsap/ScrollTrigger';
    import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
    import { Observer } from 'gsap/Observer';
    
    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Observer);

    // Get all sections
    const sections = gsap.utils.toArray('section, .hero, .story-section, .section, .combined-final-section');
    const uniqueSections = [...new Set(sections)];

    if (uniqueSections.length > 0) {
      let currentIndex = 0;
      let animating = false;
      
      function gotoSection(index) {
        if (index < 0 || index >= uniqueSections.length) return;
        if (animating) return;
        
        animating = true;
        currentIndex = index;
        
        const targetSection = uniqueSections[currentIndex];
        const sectionOffset = targetSection.classList.contains('combined-final-section') ? 20 : 60;
        
        gsap.to(window, {
          scrollTo: { y: targetSection, offsetY: sectionOffset, autoKill: false },
          duration: 1.25,
          ease: "power1.inOut",
          onComplete: () => animating = false
        });
      }
      
      function initIndex() {
        const scrollY = window.scrollY + 100;
        for (let i = uniqueSections.length - 1; i >= 0; i--) {
           if (scrollY >= uniqueSections[i].offsetTop) {
             currentIndex = i;
             break;
           }
        }
      }
      
      initIndex();
      
      window.addEventListener('load', () => {
        setTimeout(initIndex, 100);
      });

      Observer.create({
        target: window,
        type: "wheel,touch",
        wheelSpeed: -1,
        onDown: () => {
          if (animating) return;

          const currentSection = uniqueSections[currentIndex];
          const isStory = currentSection && currentSection.classList.contains('story-section');
          
          if (isStory && window.astonishStory) {
            if (window.astonishStory.animating) return;
            
            if (window.astonishStory.canGoPrev()) {
               window.astonishStory.prev();
               animating = true;
               setTimeout(() => animating = false, 1200);
               return;
            }
          }
          
          gotoSection(currentIndex - 1);
        },
        onUp: () => {
          if (animating) return;

          const currentSection = uniqueSections[currentIndex];
          const isStory = currentSection && currentSection.classList.contains('story-section');
          
          if (isStory && window.astonishStory) {
            if (window.astonishStory.animating) return;
            
            if (window.astonishStory.canGoNext()) {
               window.astonishStory.next();
               animating = true;
               setTimeout(() => animating = false, 1200);
               return;
            }
          }
          
          gotoSection(currentIndex + 1);
        },
        tolerance: 10,
        preventDefault: true
      });
      
      // Keyboard support
      document.addEventListener('keydown', (e) => {
         if (animating) return;
         if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') {
            e.preventDefault();
             const currentSection = uniqueSections[currentIndex];
             const isStory = currentSection && currentSection.classList.contains('story-section');
             if (isStory && window.astonishStory && window.astonishStory.canGoNext()) {
                window.astonishStory.next();
                return;
             }
            gotoSection(currentIndex + 1);
         } else if (e.key === 'ArrowUp' || e.key === 'PageUp') {
            e.preventDefault();
             const currentSection = uniqueSections[currentIndex];
             const isStory = currentSection && currentSection.classList.contains('story-section');
             if (isStory && window.astonishStory && window.astonishStory.canGoPrev()) {
                window.astonishStory.prev();
                return;
             }
            gotoSection(currentIndex - 1);
         }
      });
    }
  </script>
</body>
</html>
