index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PolyDepth — Order Book API Access</title>
    <meta
      name="description"
      content="PolyDepth delivers direct order book API access for 5-minute and 15-minute market structure through a $99 monthly subscription."
    />
    <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&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Swap brand name, CTA links, and contact copy with your real SaaS details. -->
    <canvas id="webgl-canvas" aria-hidden="true"></canvas>
    <div class="bg-orbs" aria-hidden="true">
      <span class="orb orb-a"></span>
      <span class="orb orb-b"></span>
      <span class="orb orb-c"></span>
    </div>

    <header class="site-header glass shell">
      <a class="brand" href="#hero" aria-label="PolyDepth home">
        <span class="brand-mark"></span>
        <span class="brand-copy">
          <strong>PolyDepth</strong>
          <small>Order Book Intelligence</small>
        </span>
      </a>

      <nav class="top-nav" aria-label="Primary">
        <a href="#markets">Markets</a>
        <a href="#features">Features</a>
        <a href="#workflow">Workflow</a>
        <a href="#cta">Get Access</a>
      </nav>

      <a class="button ghost desktop-only" data-payment-link href="#cta">Subscribe $99/mo</a>
    </header>

    <main>
      <section class="hero shell" id="hero">
        <div class="hero-copy">
          <div class="eyebrow reveal">
            API access for agentic analysis of 5-minute up/down trading
          </div>
          <h1 class="reveal">
            Build trading agents with <span>order book logic</span>.
          </h1>
          <p class="hero-lede reveal">
            PolyDepth gives you direct API access to the decision layer behind
            <strong>5-minute up/down trades</strong> and <strong>15-minute structure</strong>.
            Format raw depth data seamlessly for <strong>Codex, Claude, and OpenAI</strong> 
            to backtest LLM-driven strategies and train machine learning models.
          </p>

          <div class="hero-actions reveal">
            <a class="button primary" data-payment-link href="#cta">Get API access - $99/mo</a>
            <a class="button secondary" href="#features">Explore the feature map</a>
          </div>

          <p class="hero-note reveal">
            Checkout is handled with Stripe. After payment, we provision your dedicated server and
            send direct access details to the email used during checkout.
          </p>

          <div class="hero-proof reveal">
            <div class="metric glass">
              <span class="metric-value" data-counter="5">0</span>
              <span class="metric-label">minute up/down flow</span>
            </div>
            <div class="metric glass">
              <span class="metric-value" data-counter="15">0</span>
              <span class="metric-label">minute trend context</span>
            </div>
            <div class="metric glass">
              <span class="metric-value" data-counter="2">0</span>
              <span class="metric-label">horizons, one signal stack</span>
            </div>
          </div>
        </div>

        <aside class="signal-board glass reveal" aria-label="Illustrative product snapshot">
          <div class="board-header">
            <div>
              <span class="chip chip-live">Live</span>
              <strong>Cross-horizon signal board</strong>
            </div>
            <span class="board-sync">5m + 15m aligned</span>
          </div>

          <div class="board-grid">
            <div class="board-tile">
              <small>Liquidity shift</small>
              <strong data-live-number="18">+18%</strong>
            </div>
            <div class="board-tile">
              <small>Aggression pulse</small>
              <strong data-live-number="6.2">6.2σ</strong>
            </div>
            <div class="board-tile">
              <small>Absorption shelf</small>
              <strong data-live-number="4.1">4.1x</strong>
            </div>
            <div class="board-tile accent">
              <small>Bias agreement</small>
              <strong data-live-label="0">Long continuation</strong>
            </div>
          </div>

          <div class="mini-chart" aria-hidden="true">
            <span style="--h: 18%"></span>
            <span style="--h: 46%"></span>
            <span style="--h: 30%"></span>
            <span style="--h: 58%"></span>
            <span style="--h: 40%"></span>
            <span style="--h: 74%"></span>
            <span style="--h: 62%"></span>
            <span style="--h: 84%"></span>
            <span style="--h: 68%"></span>
            <span style="--h: 90%"></span>
            <span style="--h: 72%"></span>
            <span style="--h: 78%"></span>
          </div>

          <div class="board-footer">
            <div>
              <small>5m execution</small>
              <strong data-live-label="1">Buy-side sweep velocity</strong>
            </div>
            <div>
              <small>15m structure</small>
              <strong data-live-label="2">Offer absorption intact</strong>
            </div>
          </div>
        </aside>
      </section>

      <section class="strip shell reveal" aria-label="Product positioning highlights">
        <span>Order book depth</span>
        <span>Liquidity imbalance</span>
        <span>Absorption + sweeps</span>
        <span>Dedicated server delivery</span>
        <span>Direct API workflows</span>
      </section>

      <section class="section intro shell" id="story">
        <div class="section-heading reveal">
          <p class="kicker">Machine learning ready</p>
          <h2>Optimized data payloads for LLM context windows.</h2>
          <p>
            PolyDepth is not another crowded dashboard. It is a structured data pipeline that
            compresses complexity into agent-ready context: <em>feed liquidity states, hidden pressure, and 
            structural trends directly into Claude or Codex to build autonomous analysis logic.</em>
          </p>
        </div>

        <div class="value-grid">
          <article class="value-card glass reveal">
            <span class="card-index">01</span>
            <h3>LLM-Native Structures</h3>
            <p>
              Receive cleanly formatted JSON payloads of the order book designed specifically to reduce token bloat for autonomous agents.
            </p>
          </article>
          <article class="value-card glass reveal">
            <span class="card-index">02</span>
            <h3>Automate 5m Up/Down</h3>
            <p>
              Train your agents to identify absorption, intent, and aggression across the critical 5-minute up or down trading windows.
            </p>
          </article>
          <article class="value-card glass reveal">
            <span class="card-index">03</span>
            <h3>Backtest with LLMs</h3>
            <p>
              Pipe historical 15-minute depth data through Codex or Claude to backtest algorithmic logic against past liquidity events.
            </p>
          </article>
        </div>
      </section>

      <section class="section markets shell" id="markets">
        <div class="section-heading reveal">
          <p class="kicker">Multi-horizon Datasets</p>
          <h2>Structure historical and live tick data for algorithmic intake.</h2>
        </div>

        <div class="market-grid">
          <article class="market-card glass reveal">
            <span class="market-tag">5-minute market</span>
            <h3>Tactical execution layer</h3>
            <p>
              Read immediate aggression and execution quality in the moment. Ideal for entries,
              exits, sweep confirmation, spread stress, and short-term imbalance windows.
            </p>
            <ul>
              <li>Micro-imbalance pulses</li>
              <li>Liquidity grabs and sweep velocity</li>
              <li>Fast alerting around pressure shifts</li>
              <li>Execution timing against local structure</li>
            </ul>
          </article>

          <article class="market-card glass feature-card-tall reveal">
            <span class="market-tag">15-minute market</span>
            <h3>Structural context layer</h3>
            <p>
              Surface the slower forces shaping the session: persistent absorption, structural
              liquidity shelves, rotational behavior, and bias stability.
            </p>
            <ul>
              <li>Higher-order liquidity mapping</li>
              <li>Absorption persistence and failure</li>
              <li>Regime shifts, drift, and rotation</li>
              <li>Context filters for tactical setups</li>
            </ul>
          </article>

          <article class="market-card glass reveal">
            <span class="market-tag">Fusion view</span>
            <h3>Cross-horizon confirmation</h3>
            <p>
              Merge the fast and slow layers into a single decision frame so traders can act only
              when timing and structure point in the same direction.
            </p>
            <ul>
              <li>Reduce false positives</li>
              <li>Prioritize cleaner sessions</li>
              <li>Align trigger quality with structural bias</li>
              <li>Explain why a move should continue or fail</li>
            </ul>
          </article>
        </div>
      </section>

      <section class="section features shell" id="features">
        <div class="section-heading reveal">
          <p class="kicker">LLM Feature Set</p>
          <h2>Raw market truth formatted for machine learning models.</h2>
          <p>
            Our infrastructure turns raw depth and execution behavior into data structures tailored 
            for autonomous agent consumption and prompt-level analysis.
          </p>
        </div>

        <div class="feature-grid">
          <article class="feature-card glass reveal">
            <h3>Depth imbalance engine</h3>
            <p>Map bid/ask asymmetry, hidden pressure, and local shelf strength in real time.</p>
          </article>
          <article class="feature-card glass reveal">
            <h3>Absorption + sweep detection</h3>
            <p>Spot failed pushes, aggressive sweeps, and passive defense before price confirms.</p>
          </article>
          <article class="feature-card glass reveal">
            <h3>Ladder replay</h3>
            <p>Reconstruct the sequence behind important moves and review what actually changed.</p>
          </article>
          <article class="feature-card glass reveal">
            <h3>Regime classification</h3>
            <p>Understand whether the market is expanding, rotating, stalling, or transitioning.</p>
          </article>
          <article class="feature-card glass reveal">
            <h3>Alert composer</h3>
            <p>Trigger on multi-condition order flow events instead of brittle single-variable rules.</p>
          </article>
          <article class="feature-card glass reveal">
            <h3>Direct API access</h3>
            <p>Pull structured order book data into your own models, reports, or downstream systems.</p>
          </article>
        </div>
      </section>

      <section class="section workflow shell" id="workflow">
        <div class="section-heading reveal">
          <p class="kicker">Product experience</p>
          <h2>A workflow that feels less like software and more like situational awareness.</h2>
        </div>

        <div class="workflow-layout">
          <div class="workflow-panel glass reveal">
            <div class="panel-top">
              <span class="chip">01 · Investigate</span>
              <strong>Scan depth, liquidity, and pressure</strong>
            </div>
            <div class="panel-body graph-panel">
              <div class="graph-layer layer-a"></div>
              <div class="graph-layer layer-b"></div>
              <div class="graph-grid"></div>
            </div>
          </div>

          <div class="workflow-panel glass reveal">
            <div class="panel-top">
              <span class="chip">02 · Confirm</span>
              <strong>Match 5m timing with 15m context</strong>
            </div>
            <div class="panel-body compare-panel">
              <div class="compare-card">
                <small>5m</small>
                <strong>Aggressive continuation</strong>
                <span>Buy-side lift + localized bid support</span>
              </div>
              <div class="compare-divider"></div>
              <div class="compare-card">
                <small>15m</small>
                <strong>Structural bias intact</strong>
                <span>Offer absorption persists below breakout shelf</span>
              </div>
            </div>
          </div>

          <div class="workflow-panel glass reveal">
            <div class="panel-top">
              <span class="chip">03 · Automate</span>
              <strong>Alert, replay, export</strong>
            </div>
            <div class="panel-body stack-panel">
              <div class="stack-item">
                <span>Alert rules</span>
                <strong>Multi-condition triggers</strong>
              </div>
              <div class="stack-item">
                <span>Replay</span>
                <strong>Sequence-level review</strong>
              </div>
              <div class="stack-item">
                <span>Export</span>
                <strong>Research / API / reporting</strong>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="section audience shell" id="audience">
        <div class="section-heading reveal">
          <p class="kicker">Who it is for</p>
          <h2>Built for AI engineers, not discretionary screen watchers.</h2>
        </div>

        <div class="audience-grid">
          <article class="audience-card glass reveal">
            <h3>AI Engineers</h3>
            <p>Build trading agents with real contextual flow data, abandoning lagging price indicators for high-fidelity order book truth.</p>
          </article>
          <article class="audience-card glass reveal">
            <h3>Machine Learning Researchers</h3>
            <p>Train custom predictive models using dense, structured sequence data from 5-minute up or down pricing shifts.</p>
          </article>
          <article class="audience-card glass reveal">
            <h3>Algorithmic Developers</h3>
            <p>Backtest autonomous strategies by utilizing LLMs like Claude or Codex to read complex historical market pressure.</p>
          </article>
        </div>
      </section>

      <section class="section cta shell" id="cta">
        <div class="cta-card glass reveal">
          <div class="cta-copy">
            <p class="kicker">Direct subscription access</p>
            <h2>Start your $99/month order book data subscription.</h2>
            <p>
              Subscribe through Stripe to unlock direct access to the PolyDepth order book data
              layer. Once payment clears, we provision a dedicated server for your environment and
              send API access details to the email address used at checkout within a few hours.
            </p>
            <div class="cta-meta" aria-label="Subscription details">
              <span>Monthly recurring subscription</span>
              <span>Dedicated server provisioning</span>
              <span>Email delivery within a few hours</span>
            </div>
          </div>
          <div class="pricing-panel">
            <p class="pricing-kicker">PolyDepth API</p>
            <div class="price-line">
              <strong>$99</strong>
              <span>per month</span>
            </div>
            <p class="pricing-copy">
              Direct order book data access optimized for LLM agents to analyze 5-minute up/down trading flows.
            </p>
            <ul class="pricing-list">
              <li>OpenAI, Claude, and Codex ready JSON payloads</li>
              <li>Dedicated server prepared for programmatic access</li>
              <li>API credentials sent to your checkout email</li>
            </ul>
            <div class="cta-actions">
              <a class="button primary" data-payment-link href="#hero">Start subscription</a>
              <a class="button secondary" href="#workflow">See the workflow</a>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="site-footer shell">
      <div>
        <strong>PolyDepth</strong>
        <p>Direct order book API access for 5-minute and 15-minute markets.</p>
      </div>
      <div class="footer-links">
        <a href="#markets">Markets</a>
        <a href="#features">Features</a>
        <a href="#cta">Subscribe</a>
      </div>
    </footer>

    <script src="checkout.js"></script>
    <script src="app.js"></script>
  </body>
</html>