<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stoodio - AI that feels human</title>
  <meta name="description"
    content="We build AI systems that work. Custom machine learning, automation, and intelligent products. By Ray Hernandez & Steven Ray.">
  <link rel="stylesheet" href="style.css">
  <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=Instrument+Serif:ital@0;1&family=Roboto+Mono:wght@400;500&display=swap"
    rel="stylesheet">
  <!-- Pixel font for retro UI elements -->
  <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <!-- SEO & Social -->
  <link rel="canonical" href="https://stoodio.com/index.html">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://stoodio.com/index.html">
  <meta property="og:title" content="Stoodio - AI that feels human">
  <meta property="og:description"
    content="We build AI systems that work. Custom machine learning, automation, and intelligent products. By Ray Hernandez & Steven Ray.">
  <meta property="og:image" content="https://stoodio.com/apple-touch-icon.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="https://stoodio.com/index.html">
  <meta name="twitter:title" content="Stoodio - AI that feels human">
  <meta name="twitter:description"
    content="We build AI systems that work. Custom machine learning, automation, and intelligent products. By Ray Hernandez & Steven Ray.">
  <meta name="twitter:image" content="https://stoodio.com/apple-touch-icon.png">

  <!-- Schema.org -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Stoodio",
    "url": "https://stoodio.com",
    "logo": "https://stoodio.com/stoodio-logo.svg",
    "description": "We build AI systems that work. Custom machine learning, automation, and intelligent products.",
    "sameAs": []
  }
  </script>
</head>

<body>
  <!-- Texture overlay -->
  <div class="texture" aria-hidden="true"></div>

  <!-- Blueprint grid background -->
  <div class="blueprint-grid" aria-hidden="true"></div>

  <!-- Corner brackets -->
  <div class="corner-bracket top-left" aria-hidden="true"></div>
  <div class="corner-bracket top-right" aria-hidden="true"></div>
  <div class="corner-bracket bottom-left" aria-hidden="true"></div>
  <div class="corner-bracket bottom-right" aria-hidden="true"></div>

  <!-- Edge markers -->
  <div class="edge-marker left" aria-hidden="true">
    <span>001</span>
    <span>002</span>
    <span>003</span>
  </div>

  <!-- Theme toggle -->
  <button class="theme-toggle" aria-label="Toggle dark mode" onclick="toggleTheme()">
    <span class="sun">○</span>
    <span class="moon">●</span>
  </button>

  <main>
    <!-- Hero -->
    <header class="hero">
      <div class="hero-content">
        <img src="stoodio-logo.svg" alt="Stoodio" class="hero-logo">
        <h1>
          We build <em>AI</em> that<br>
          doesn't feel like AI.<span class="cursor">_</span>
        </h1>
        <p class="lede">
          From fine-tuned models to automated workflows to seamless integrations - we build software that's smart,
          polished, and actually ships.
        </p>
      </div>
      <div class="scroll-hint mono">
        <span class="blink">▼</span> scroll
      </div>
    </header>

    <!-- Philosophy -->
    <section class="section philosophy">
      <div class="section-inner">
        <p class="mono label fade-in">001 / PHILOSOPHY</p>
        <blockquote class="fade-in fade-in-delay-1">
          Most AI projects fail because they're built by people who love technology more than they love solving
          problems.
        </blockquote>
        <p class="attribution fade-in fade-in-delay-2">- We're the opposite.</p>
      </div>
    </section>

    <!-- What we do -->
    <section class="section what-we-do">
      <div class="section-inner">
        <p class="mono label fade-in">002 / WHAT WE DO</p>
        <h2 class="section-headline fade-in fade-in-delay-1">AI that actually ships.</h2>
        <p class="section-intro fade-in fade-in-delay-2">From prototype to production. From "we should try AI" to
          systems your team relies on daily. We build the practical stuff.</p>

        <div class="services-grid">
          <div class="service fade-in fade-in-delay-1">
            <h3>AI Product Development</h3>
            <p>LLM-powered applications that solve real problems. Document processors that actually understand
              documents. Chatbots your customers won't hate. We build AI features that feel native, not bolted on.</p>
          </div>
          <div class="service fade-in fade-in-delay-2">
            <h3>Web & Native Applications</h3>
            <p>Full-stack development from database to deploy. Modern web apps, macOS utilities, Chrome extensions,
              mobile-ready interfaces. Clean code that other developers can actually maintain.</p>
          </div>
          <div class="service fade-in fade-in-delay-3">
            <h3>AI Integration & APIs</h3>
            <p>Connecting AI to your existing systems. RAG pipelines that retrieve what matters. APIs your team will
              enjoy using. We plug intelligence into Salesforce, legacy systems, whatever you're running.</p>
          </div>
          <div class="service fade-in fade-in-delay-4">
            <h3>AI Strategy & Consulting</h3>
            <p>Practical guidance for teams figuring out AI. Which use cases actually make sense. How to estimate costs
              before they spiral. When to build versus buy. Honest answers, not hype.</p>
          </div>
          <div class="service fade-in fade-in-delay-5">
            <h3>Prototypes & POCs</h3>
            <p>Test ideas before betting the roadmap. Working prototypes in days, not quarters. Rapid iteration to find
              what works. Kill bad ideas early or prove the winners fast.</p>
          </div>
          <div class="service fade-in fade-in-delay-6">
            <h3>Design Systems & Brand</h3>
            <p>Visual identity that signals technical competence. Marketing sites that convert. Component libraries
              built for scale. Design that makes your product feel considered, not cobbled together.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- How we work -->
    <section class="section how-we-work">
      <div class="section-inner">
        <p class="mono label">003 / HOW WE WORK</p>
        <h2 class="section-headline">Not your typical AI vendor.</h2>

        <div class="process-list">
          <div class="process-item">
            <span class="process-number">01</span>
            <div class="process-content">
              <h3>We start with the problem, not the technology</h3>
              <p>Most AI projects fail because someone fell in love with a solution before understanding the problem. We
                spend time in your world first. What's the actual pain? What would success look like? Only then do we
                talk about models and algorithms.</p>
            </div>
          </div>
          <div class="process-item">
            <span class="process-number">02</span>
            <div class="process-content">
              <h3>We prove it works before we scale it</h3>
              <p>Small, fast experiments. Real data. Measurable outcomes. We'll know in weeks, not months, whether the
                approach is sound. If it's not, we pivot. If it is, we build for production.</p>
            </div>
          </div>
          <div class="process-item">
            <span class="process-number">03</span>
            <div class="process-content">
              <h3>We build to last, not to demo</h3>
              <p>Demo-ware is easy. Production systems that handle edge cases, scale under load, and don't break at 3am
                - that's the hard part. That's what we do. You get something you can actually rely on.</p>
            </div>
          </div>
          <div class="process-item">
            <span class="process-number">04</span>
            <div class="process-content">
              <h3>We transfer knowledge, not just code</h3>
              <p>When we leave, your team should be smarter. We document everything. We train your people. We don't
                create dependencies - we create capabilities.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- The work -->
    <section class="section work" id="case-studies">
      <div class="section-inner">
        <p class="mono label fade-in">004 / PROOF</p>
        <h2 class="section-headline fade-in fade-in-delay-1">Case Studies</h2>

        <div class="case-teasers">
          <a href="memory-vault.html" class="case-teaser fade-in fade-in-delay-2">
            <span class="mono teaser-number">001</span>
            <h3>Memory Vault</h3>
            <p>Three tiers of context that follow you across every AI platform.</p>
          </a>

          <a href="keeper.html" class="case-teaser fade-in fade-in-delay-3">
            <span class="mono teaser-number">002</span>
            <h3>Keeper</h3>
            <p>Churn prediction and insights for small businesses on Square, Clover, and more.</p>
          </a>

          <a href="ai-report.html" class="case-teaser fade-in fade-in-delay-4">
            <span class="mono teaser-number">003</span>
            <h3>The AI Report</h3>
            <p>AI news filtered to only the stories that matter. Built for us, open to all.</p>
          </a>

          <a href="text-to-notes.html" class="case-teaser fade-in fade-in-delay-5">
            <span class="mono teaser-number">004</span>
            <h3>Text to Notes</h3>
            <p>Text your thoughts to a number. Get organized insights when you need them.</p>
          </a>

          <a href="dev-pulse.html" class="case-teaser fade-in fade-in-delay-6">
            <span class="mono teaser-number">005</span>
            <h3>Dev Pulse</h3>
            <p>See what your AI-powered dev team is actually shipping. No code reading required.</p>
          </a>

          <a href="autonomous-fund.html" class="case-teaser fade-in fade-in-delay-6">
            <span class="mono teaser-number">006</span>
            <h3>The Fund</h3>
            <p>An autonomous hedge fund run by AI agents. Real money. Real debates. Currently down 20%.</p>
          </a>
        </div>
      </div>
    </section>

    <!-- Contact -->
    <section class="section contact">
      <div class="section-inner">
        <p class="mono label fade-in">005 / LET'S TALK</p>
        <h2 class="fade-in fade-in-delay-1">Got a problem<br>worth solving?</h2>
        <a href="contact.html" class="cta-button fade-in fade-in-delay-2">Start a conversation</a>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <pre class="ascii" aria-hidden="true">
    _____ _____ _____ _____ ____  _____ _____
   |   __|_   _|     |     |    \|     |     |
   |__   | | | |  |  |  |  |  |  |-   -|  |  |
   |_____| |_| |_____|_____|____/|_____|_____|
      </pre>
      <p class="mono">&copy; 2025 Stoodio. Built with care.</p>
    </footer>
  </main>

  <!-- Enter overlay - unlocks audio -->
  <div class="enter-overlay" id="enterOverlay">
    <button class="enter-button" id="enterButton" style="visibility: hidden;">
      <span class="enter-text">ENTER</span>
      <span class="enter-hint">click to initialize</span>
    </button>
  </div>

  <!-- Boot sequence overlay -->
  <div class="boot-sequence" id="bootSequence" style="display: none;">
    <div class="boot-text" style="visibility: hidden;">
      <span class="boot-line" data-delay="0">STOODIO OS v2.0</span>
      <span class="boot-line" data-delay="300">════════════════════════════════</span>
      <span class="boot-line" data-delay="600"></span>
      <span class="boot-line" data-delay="800">INITIALIZING CORE SYSTEMS</span>
      <span class="boot-line progress-line" data-delay="1000" data-duration="1200">
        <span class="progress-label">NEURAL NETWORKS</span>
        <span class="progress-status">[----------]</span>
      </span>
      <span class="boot-line progress-line" data-delay="2400" data-duration="1000">
        <span class="progress-label">DESIGN PATTERNS</span>
        <span class="progress-status">[----------]</span>
      </span>
      <span class="boot-line progress-line" data-delay="3600" data-duration="800">
        <span class="progress-label">HUMAN CALIBRATION</span>
        <span class="progress-status">[----------]</span>
      </span>
      <span class="boot-line" data-delay="4800"></span>
      <span class="boot-line" data-delay="5000">▸ 50 YEARS COMBINED EXPERIENCE</span>
      <span class="boot-line" data-delay="5400">▸ LATEST AI MODELS INTEGRATED</span>
      <span class="boot-line" data-delay="5800"></span>
      <span class="boot-line confirm-line" data-delay="6200">
        <span class="checkbox">☐</span> ALL SYSTEMS NOMINAL
      </span>
      <span class="boot-line ready-line" data-delay="7000">█ READY</span>
    </div>
  </div>

  <script>
    // Retro sound generator
    const RetroSound = {
      ctx: null,

      init() {
        this.ctx = new (window.AudioContext || window.webkitAudioContext)();
        // Resume immediately after user click
        if (this.ctx.state === 'suspended') {
          this.ctx.resume();
        }
      },

      beep(freq = 800, duration = 0.05, type = 'square', volume = 0.1) {
        if (!this.ctx || this.ctx.state === 'suspended') return;
        const osc = this.ctx.createOscillator();
        const gain = this.ctx.createGain();
        osc.type = type;
        osc.frequency.value = freq;
        gain.gain.value = volume;
        gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + duration);
        osc.connect(gain);
        gain.connect(this.ctx.destination);
        osc.start();
        osc.stop(this.ctx.currentTime + duration);
      },

      // UI sounds
      tick() { this.beep(1200, 0.02, 'square', 0.03); },
      hover() { this.beep(800, 0.015, 'square', 0.02); },
      click() { this.beep(600, 0.03, 'square', 0.04); },
      confirm() {
        this.beep(880, 0.1, 'square', 0.08);
        setTimeout(() => this.beep(1320, 0.15, 'square', 0.08), 100);
      },
      progress() { this.beep(400 + Math.random() * 200, 0.015, 'square', 0.02); },
      startup() {
        // Modem/startup sound sequence
        let t = 0;
        for (let i = 0; i < 8; i++) {
          setTimeout(() => this.beep(200 + i * 100, 0.08, 'sawtooth', 0.04), t);
          t += 60;
        }
        setTimeout(() => this.beep(1000, 0.3, 'sine', 0.06), t);
      },
      ready() {
        this.beep(523, 0.1, 'square', 0.1);
        setTimeout(() => this.beep(659, 0.1, 'square', 0.1), 100);
        setTimeout(() => this.beep(784, 0.2, 'square', 0.1), 200);
      }
    };

    // Add hover/click sounds to interactive elements
    function initUISounds() {
      const interactiveElements = document.querySelectorAll('a, button, .case-teaser, .chat-option');

      interactiveElements.forEach(el => {
        el.addEventListener('mouseenter', () => RetroSound.hover());
        el.addEventListener('click', () => RetroSound.click());
      });
    }

    // Main initialization
    (function () {
      const navEntry = performance.getEntriesByType('navigation')[0];
      const navType = navEntry ? navEntry.type : 'navigate';
      const hasVisited = sessionStorage.getItem('visited');

      const isBackForward = navType === 'back_forward';
      const isReturningNavigate = navType === 'navigate' && hasVisited;

      const skipBoot = new URLSearchParams(window.location.search).has('noboot') ||
        isBackForward ||
        isReturningNavigate;

      const enterOverlay = document.getElementById('enterOverlay');
      const enterButton = document.getElementById('enterButton');
      const boot = document.getElementById('bootSequence');
      const bootText = boot.querySelector('.boot-text');
      const lines = boot.querySelectorAll('.boot-line');

      if (skipBoot) {
        // Skip everything, go straight to site
        enterOverlay.style.display = 'none';
        boot.style.display = 'none';
        // Still init sounds for hover/click
        RetroSound.init();
        initUISounds();
        return;
      }

      // Wait for fonts before showing enter button
      document.fonts.ready.then(() => {
        enterButton.style.visibility = 'visible';
      });

      // Handle enter button click
      enterButton.addEventListener('click', () => {
        // Initialize and unlock audio
        RetroSound.init();

        // Hide enter overlay
        enterOverlay.classList.add('hidden');
        setTimeout(() => enterOverlay.style.display = 'none', 300);

        // Show boot sequence
        boot.style.display = 'flex';

        // Mark as visited
        sessionStorage.setItem('visited', 'true');

        // Wait for fonts then start boot
        document.fonts.ready.then(() => {
          bootText.style.visibility = 'visible';
          startBoot();
        });
      });

      function startBoot() {
        // Start the startup sound immediately
        setTimeout(() => RetroSound.startup(), 100);

        lines.forEach((line) => {
          const delay = parseInt(line.dataset.delay);

          setTimeout(() => {
            line.classList.add('visible');

            // Handle progress bars
            if (line.classList.contains('progress-line')) {
              const duration = parseInt(line.dataset.duration) || 1000;
              const statusEl = line.querySelector('.progress-status');
              const steps = 10;
              const stepTime = duration / steps;

              for (let i = 0; i <= steps; i++) {
                setTimeout(() => {
                  const filled = '='.repeat(i);
                  const empty = '-'.repeat(steps - i);
                  statusEl.textContent = '[' + filled + empty + ']';
                  if (i < steps) RetroSound.progress();
                  if (i === steps) {
                    statusEl.textContent = '[' + filled + '] OK';
                    statusEl.classList.add('complete');
                    RetroSound.tick();
                  }
                }, stepTime * i);
              }
            }

            // Handle checkbox confirmation
            if (line.classList.contains('confirm-line')) {
              const checkbox = line.querySelector('.checkbox');
              setTimeout(() => {
                checkbox.textContent = '☑';
                checkbox.classList.add('checked');
                RetroSound.confirm();
              }, 400);
            }

            // Handle ready line
            if (line.classList.contains('ready-line')) {
              RetroSound.ready();
            }

            // Regular line tick sound
            if (!line.classList.contains('progress-line')) {
              RetroSound.tick();
            }
          }, delay);
        });

        // Fade out boot screen
        setTimeout(() => {
          boot.classList.add('fade-out');
        }, 8000);

        setTimeout(() => {
          boot.style.display = 'none';
          // Init UI sounds after boot completes
          initUISounds();
        }, 8600);
      }
    })();

    // Theme toggle
    function toggleTheme() {
      document.documentElement.classList.toggle('light');
      localStorage.setItem('theme',
        document.documentElement.classList.contains('light') ? 'light' : 'dark'
      );
    }

    // Restore theme
    if (localStorage.getItem('theme') === 'light') {
      document.documentElement.classList.add('light');
    }

    // Scroll animations
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

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

          // Counter animation for stats
          if (entry.target.querySelector('.stat-number[data-count]')) {
            const counter = entry.target.querySelector('.stat-number');
            animateCounter(counter);
          }
        }
      });
    }, observerOptions);

    document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));

    // Counter animation
    function animateCounter(el) {
      const target = parseInt(el.dataset.count);
      const prefix = el.dataset.prefix || '';
      const suffix = el.dataset.suffix || '%';
      const duration = 2000;
      const start = performance.now();

      function update(now) {
        const elapsed = now - start;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
        const current = Math.floor(eased * target);
        el.textContent = prefix + current + suffix;

        if (progress < 1) {
          requestAnimationFrame(update);
        }
      }
      requestAnimationFrame(update);
    }
  </script>
</body>

</html>