<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Opkit — the AI management tool for artists running their own show</title>
  <meta name="description" content="Opkit is a crew of AI agents that handle advances, settlements, fans, and the boring spine of the industry — so you can focus your energy where you want to: on the music. Built to empower independent artists." />
  <link rel="canonical" href="https://opkit.ai/" />
  <meta property="og:url" content="https://opkit.ai/" />
  <meta property="og:title" content="Opkit" />
  <meta property="og:description" content="The AI management tool for artists running their own show." />
  <meta property="og:type" content="website" />
  <meta name="theme-color" content="#0a0a0a" />
  <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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0a0a0a;
      --bg-2: #131313;
      --ink: #f4f4f2;
      --ink-dim: #8a8a86;
      --ink-faint: #4a4a48;
      --accent: #1fc1e7;
      --line: #1f1f1f;
      --maxw: 880px;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(ellipse at top, rgba(31,193,231,0.08), transparent 60%),
        var(--bg);
    }
    .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 48px 32px 64px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 96px;
    }
    .wordmark {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.02em;
      color: var(--ink);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .wordmark::before {
      content: "";
      display: inline-block;
      width: 10px; height: 10px;
      background: var(--accent);
      border-radius: 2px;
    }
    .nav-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--ink-dim);
      letter-spacing: 0.04em;
    }
    .hero h1 {
      font-size: clamp(36px, 6vw, 64px);
      line-height: 1.05;
      letter-spacing: -0.03em;
      font-weight: 600;
      margin: 0 0 28px;
      max-width: 14ch;
    }
    .hero h1 .accent { color: var(--accent); }
    .hero p.lede {
      font-size: 19px;
      line-height: 1.55;
      color: var(--ink-dim);
      max-width: 52ch;
      margin: 0 0 56px;
    }
    .signup {
      display: flex;
      gap: 8px;
      max-width: 460px;
      margin-bottom: 12px;
    }
    .signup input[type="email"] {
      flex: 1;
      background: var(--bg-2);
      border: 1px solid var(--line);
      color: var(--ink);
      padding: 14px 16px;
      font-family: inherit;
      font-size: 15px;
      border-radius: 6px;
      outline: none;
      transition: border-color 0.15s;
    }
    .signup input[type="email"]:focus { border-color: var(--accent); }
    .signup input[type="email"]::placeholder { color: var(--ink-faint); }
    .signup button {
      background: var(--accent);
      color: #0a0a0a;
      border: none;
      padding: 14px 22px;
      font-family: inherit;
      font-weight: 600;
      font-size: 15px;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 0.1s, background 0.15s;
    }
    .signup button:hover { background: #3dd2f0; }
    .signup button:active { transform: scale(0.98); }
    .signup button:disabled {
      background: #2a2a2a;
      color: var(--ink-dim);
      cursor: default;
    }
    .honeypot {
      position: absolute;
      left: -9999px;
      width: 1px; height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .signup-note {
      font-size: 13px;
      color: var(--ink-faint);
      margin: 0 0 96px;
      min-height: 20px;
    }
    .signup-note.error { color: #1fc1e7; }
    .signup-note.success { color: var(--ink-dim); }

    .crew-section {
      border-top: 1px solid var(--line);
      padding-top: 56px;
    }
    .section-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 28px;
    }
    .crew-section h2 {
      font-size: 28px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin: 0 0 40px;
      max-width: 30ch;
      line-height: 1.25;
    }
    .crew {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 20px;
      margin-bottom: 48px;
    }
    .agent {
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 22px 22px 24px;
      transition: border-color 0.2s, transform 0.2s;
    }
    .agent:hover {
      border-color: #2c2c2c;
      transform: translateY(-2px);
    }
    .agent .row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .agent .name {
      font-size: 19px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .agent .role {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
    }
    .agent .desc {
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-dim);
      margin: 0;
    }
    .agent.coming { opacity: 0.55; }
    .agent.coming .role::after {
      content: " · soon";
      color: var(--accent);
    }
    h3 {
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
      margin: 32px 0 16px;
      letter-spacing: -0.01em;
    }
    footer {
      border-top: 1px solid var(--line);
      padding: 28px 32px;
      max-width: var(--maxw);
      margin: 0 auto;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
    }
    footer a { color: var(--ink-dim); text-decoration: none; }
    footer a:hover { color: var(--ink); }

    @media (max-width: 600px) {
      .wrap { padding: 32px 22px 48px; }
      header { margin-bottom: 64px; }
      .signup { flex-direction: column; }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <a href="/" class="wordmark">opkit</a>
      <span class="nav-tag">v0 · private beta soon</span>
    </header>

    <section class="hero">
      <h1>The AI management tool for artists running their <span class="accent">own show</span>.</h1>
      <p class="lede">
        Opkit is a crew of AI agents that handle advances, settlements, fans, and the boring spine of the industry — so you can focus your energy where you want to: on the music. Built to empower independent artists.
      </p>

      <form id="signup-form" class="signup" novalidate>
        <input type="email" name="email" placeholder="your@email.com" required autocomplete="email" />
        <!-- Honeypot: bots fill this, humans don't see it -->
        <input type="text" name="website" class="honeypot" tabindex="-1" autocomplete="off" />
        <button type="submit">get early access</button>
      </form>
      <p id="signup-note" class="signup-note">No spam. One email when the private beta opens.</p>
    </section>

    <section class="crew-section">
      <div class="section-label">The Crew</div>
      <h2>The team every independent artist wishes they had.</h2>

      <h3>Core — shipping first</h3>
      <div class="crew">
        <div class="agent">
          <div class="row"><span class="name">Michael</span><span class="role">manager</span></div>
          <p class="desc">Keeps your shows on the rails — from booked to paid. The one you talk to first.</p>
        </div>
        <div class="agent">
          <div class="row"><span class="name">Drew</span><span class="role">production · advance</span></div>
          <p class="desc">Gets every venue ready before you walk in the door. Riders, tech, load-in, day-of.</p>
        </div>
        <div class="agent">
          <div class="row"><span class="name">Cash</span><span class="role">money</span></div>
          <p class="desc">Settlement, splits, invoices, the long view of what you're owed and what you've been paid.</p>
        </div>
        <div class="agent">
          <div class="row"><span class="name">Ember</span><span class="role">fans · list</span></div>
          <p class="desc">Keeps the fire going between shows. Mailing list, guest list, the people who keep coming back.</p>
        </div>
      </div>

      <h3>Coming next</h3>
      <div class="crew">
        <div class="agent coming">
          <div class="row"><span class="name">Hunter</span><span class="role">booking</span></div>
          <p class="desc">Finds the next show before the current one ends. Outreach, pitches, venue CRM.</p>
        </div>
        <div class="agent coming">
          <div class="row"><span class="name">Iris</span><span class="role">press · promo</span></div>
          <p class="desc">Tells the world the show is happening. Announces, EPK, playlist pitches.</p>
        </div>
        <div class="agent coming">
          <div class="row"><span class="name">Echo</span><span class="role">social</span></div>
          <p class="desc">The voice in the room every day. Captions, posts, replies, the steady drumbeat.</p>
        </div>
      </div>

      <h3>Studio Pack — add-on</h3>
      <div class="crew">
        <div class="agent coming">
          <div class="row"><span class="name">Kris</span><span class="role">visual director</span></div>
          <p class="desc">Music video concepts, artwork direction, photo direction. The art director on the team.</p>
        </div>
      </div>
    </section>
  </div>

  <footer>
    <span>opkit · 2026</span>
    <a href="mailto:hello@opkit.ai">hello@opkit.ai</a>
    <a href="https://shadowcasterstudios.com" rel="noopener">Site by Shadow Caster Studios</a>
  </footer>

  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    // ⚠️  Paste your deployed Worker URL here after running `wrangler deploy`.
    // Either the workers.dev URL, or a custom route like https://opkit.ai/api/signup
    const SIGNUP_ENDPOINT = "https://opkit-signup.7430.workers.dev";

    const form = document.getElementById("signup-form");
    const note = document.getElementById("signup-note");
    const emailInput = form.querySelector('input[name="email"]');
    const button = form.querySelector("button");

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      const email = emailInput.value.trim();
      const website = form.querySelector('input[name="website"]').value;

      if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        note.textContent = "That doesn't look like a valid email.";
        note.className = "signup-note error";
        return;
      }

      button.disabled = true;
      button.textContent = "sending...";
      note.textContent = "";
      note.className = "signup-note";

      try {
        const res = await fetch(SIGNUP_ENDPOINT, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email, website }),
        });
        const data = await res.json().catch(() => ({}));

        if (res.ok && data.ok) {
          button.textContent = "you're on the list";
          emailInput.disabled = true;
          note.textContent = "Thanks. We'll be in touch when the beta opens.";
          note.className = "signup-note success";
        } else {
          throw new Error(data.error || "something went wrong");
        }
      } catch (err) {
        button.disabled = false;
        button.textContent = "get early access";
        note.textContent = "Couldn't sign you up. Try again in a moment?";
        note.className = "signup-note error";
      }
    });
  </script>
</body>
</html>
