<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AI Faceless Video Generator for YouTube | Phantomline</title>
<meta name="description" content="AI faceless video generator. Bring your own Claude, GPT, Gemini, or OpenRouter API key for instant YouTube scripts, or run locally with Ollama. Gemini and OpenRouter offer free tiers — no credit card needed." />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#090b0c" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Phantomline" />
<link rel="canonical" href="{{ canonical_url }}" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="AI Faceless Video Generator for YouTube | Phantomline" />
<meta property="og:description" content="Bring your own API key for instant YouTube scripts, or run the full AI video pipeline locally with Ollama. Faceless channel automation, free to start." />
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:image" content="{{ site_url }}/static/phantomline-og.png" />
<meta property="og:site_name" content="Phantomline" />

<!-- Twitter card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="AI Faceless Video Generator for YouTube | Phantomline" />
<meta name="twitter:description" content="Bring your own API key for instant YouTube scripts, or run the full AI video pipeline locally with Ollama. Faceless channel automation, free to start." />
<meta name="twitter:image" content="{{ site_url }}/static/phantomline-og.png" />

<link rel="manifest" href="{{ '/static/manifest.json' | versioned }}" />
<link rel="icon" type="image/png" href="{{ '/static/phantomline-favicon.png' | versioned }}" />
<link rel="apple-touch-icon" href="{{ '/static/phantomline-logo-square.png' | versioned }}" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://vdzydhrgazqeyaalguuy.supabase.co" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;450;500;600;700&family=Geist+Mono:wght@400;500&display=swap" />
<link rel="stylesheet" href="{{ '/static/landing.css' | versioned }}" />
<link rel="alternate" type="application/rss+xml" title="Phantomline" href="/feed.xml" />

<!-- JSON-LD: Organization. Identifies Phantomline as a brand entity to
     search engines and AI crawlers. -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Phantomline",
  "url": "{{ site_url }}",
  "logo": "{{ site_url }}/static/phantomline-logo-primary.png",
  "description": "AI faceless video generator for YouTube creators. Bring your own Claude, GPT, Gemini, or OpenRouter API key, or run locally with Ollama."
}
</script>

<!-- JSON-LD: WebSite. SearchAction lets Google offer a sitelinks
     searchbox in SERPs that points at /alternatives?q= as a fallback
     until we ship real site search. Google's spec requires a string
     placeholder ({search_term_string}). present tense, no fake
     promises about the destination beyond "phantomline-shaped results". -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Phantomline",
  "url": "{{ site_url }}",
  "inLanguage": "en-US",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "{{ site_url }}/alternatives?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}
</script>

<!-- JSON-LD: SoftwareApplication. Tells Google this is a multi-platform
     creator tool with a free tier. Real prices below. no fake reviews. -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Phantomline",
  "inLanguage": "en-US",
  "applicationCategory": "MultimediaApplication",
  "operatingSystem": "Windows, macOS, Linux",
  "description": "AI faceless video generator for YouTube. Bring your own Claude, GPT, Gemini, or OpenRouter API key for instant scripts — Gemini and OpenRouter have free tiers. Or run the full pipeline locally with Ollama. Script, AI voiceover, captions, music, visuals, MP4, YouTube automation.",
  "url": "{{ site_url }}",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  }
}
</script>

<!-- JSON-LD: FAQPage. Mirrors the visible <details> block lower in the
     page verbatim. Google penalizes FAQPage schema where the schema
     answers don't match the rendered text. keep these in sync. -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "inLanguage": "en-US",
  "speakable": {
    "@type": "SpeakableSpecification",
    "cssSelector": ["#faq summary", "#faq details p"]
  },
  "mainEntity": [
    {"@type": "Question", "name": "Do I need a fancy PC?",
     "acceptedAnswer": {"@type": "Answer", "text": "16 GB RAM and any GPU made in the last 5 years runs Llama 3.1 8B + Kokoro fine. CPU-only works too. Slower TTS, but everything else is fine. Phantomline runs on Windows, macOS, and Linux."}},
    {"@type": "Question", "name": "Can I use this on my phone?",
     "acceptedAnswer": {"@type": "Answer", "text": "Right now Phantomline runs on desktop. From your phone you can sign in to your account, view your project library, and manage your license. The mobile creator app is on the roadmap; the desktop studio is where you render and publish today."}},
    {"@type": "Question", "name": "How does the cloud API key work?",
     "acceptedAnswer": {"@type": "Answer", "text": "Paste an API key from Anthropic (Claude), OpenAI (GPT), Google (Gemini), or OpenRouter in Settings. Your browser calls the provider directly over HTTPS. Phantomline never sees, stores, or proxies your key. Gemini and OpenRouter offer free tiers with no credit card. Claude and GPT cost ~$0.005 per script. Free users get 2 cloud renders to try it. Pro and Studio get unlimited."}},
    {"@type": "Question", "name": "What's free vs Pro?",
     "acceptedAnswer": {"@type": "Answer", "text": "Free tier: 5 video renders per month, 2 cloud trial renders, local AI and WebGPU engines, project library. Pro: unlimited renders, unlimited cloud engine, no watermark, publish scheduler, SEO Finder, Optimize Library, channel analytics, brand presets."}},
    {"@type": "Question", "name": "What does Founding Lifetime get me?",
     "acceptedAnswer": {"@type": "Answer", "text": "Everything in Creator Pro, forever. Pay once, no subscription. Limited to the first 500 buyers. Locked-in price even if monthly tiers go up later. After the 500 are sold, the founding deal is gone."}},
    {"@type": "Question", "name": "Is my data sent anywhere?",
     "acceptedAnswer": {"@type": "Answer", "text": "Local mode: nothing leaves your device. Cloud mode: your script prompt goes to your chosen provider — Anthropic, OpenAI, Google, or OpenRouter (your key, your account, their privacy policy). In both cases, rendered videos, audio, and analytics stay on your machine. API keys are stored only in your browser's localStorage. Anonymous error telemetry is optional and opt-in."}},
    {"@type": "Question", "name": "Can I use this commercially?",
     "acceptedAnswer": {"@type": "Answer", "text": "Yes. Any video you make is yours. The bundled music pack is procedurally generated and public-domain. Generated narration belongs to you. Generated visuals belong to you. Phantomline charges for the tool, not for what you make with it."}},
    {"@type": "Question", "name": "Does it run on Mac and Linux?",
     "acceptedAnswer": {"@type": "Answer", "text": "The desktop app is Python, so it runs anywhere Python runs. Some font paths are Windows-tuned but auto-fall-back to Mac and Linux system fonts."}},
    {"@type": "Question", "name": "Will my license expire?",
     "acceptedAnswer": {"@type": "Answer", "text": "Founding Lifetime: never. Creator Pro and Studio yearly: one year from purchase, renews. Monthly: 31 days, renews. Free tier: never expires. License validation is offline, so losing internet doesn't lock you out."}}
  ]
}
</script>
</head>
<body>
<a class="skip-to-main" href="#main">Skip to main content</a>
<div class="nav-mobile-overlay" aria-hidden="true">
  <button class="nav-mobile-close" aria-label="Close menu">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
  </button>
  <div class="nav-mobile-links">
    <a href="#workflow">Workflow</a>
    <a href="#platforms">Platforms</a>
    <a href="#pricing">Pricing</a>
    <a href="#faq">FAQ</a>
    <a href="/account">Account</a>
  </div>
</div>
<div class="wrap">
  <nav class="top">
    <a class="brand" href="/" aria-label="Phantomline home">
      <img class="brand-img" src="{{ '/static/phantomline-logo-primary.png' | versioned }}" alt="Phantomline" width="220" height="32" decoding="async" />
    </a>
    <div class="navlinks">
      <a href="#workflow">Workflow</a>
      <a href="#platforms">Platforms</a>
      <a href="#pricing">Pricing</a>
      <a href="#faq">FAQ</a>
      <a href="/account">Account</a>
      <a class="cta secondary" href="/app">Open Studio</a>
      <a class="cta" href="/download">Download</a>
    </div>
    <div class="nav-mobile-actions">
      <a class="cta nav-download-mobile" href="/download">Download</a>
      <button class="nav-hamburger" aria-label="Open menu" aria-expanded="false">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
      </button>
    </div>
  </nav>

  <main id="main">
    <section class="hero">
      <div class="hero-grid">
        <div class="hero-copy">
          <div class="eyebrow">AI Faceless Video Generator · YouTube Automation</div>
          <h1>Your AI key. <span>Your faceless YouTube channel.</span></h1>
          <p class="lede">
            Bring your own Claude, GPT, Gemini, or OpenRouter API key, type one idea, get a finished faceless YouTube video: script, AI voiceover, captions, music, visuals, MP4, publishing draft. Gemini and OpenRouter have free tiers — no credit card needed. Or download and run the full local AI video generator offline with Ollama.
          </p>
          <div class="hero-actions">
            <a class="cta" href="/app?tab=settings" id="heroApiCta">Try with your API key</a>
            <a class="cta secondary" href="/download">Download for desktop</a>
          </div>
        </div>
        <div class="hero-video-placeholder">
          <div class="hero-shorts-frame">
            <video class="hero-video" id="heroDemoVideo"
                   src="https://vdzydhrgazqeyaalguuy.supabase.co/storage/v1/object/public/public-videos/demo_the_statue_started_crying.mp4"
                   autoplay muted loop playsinline preload="metadata"
                   aria-label="Phantomline AI faceless video generator demo: a YouTube Short rendered locally with Ollama"></video>
            <div class="hero-shorts-top">
              <span class="hero-shorts-time">9:41</span>
              <span class="hero-shorts-system">
                <svg viewBox="0 0 16 10" width="14" height="9" fill="currentColor" aria-hidden="true"><rect x="0" y="6" width="3" height="4"/><rect x="4" y="4" width="3" height="6"/><rect x="8" y="2" width="3" height="8"/><rect x="12" y="0" width="3" height="10"/></svg>
                <svg viewBox="0 0 16 12" width="13" height="10" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 5a9 9 0 0 1 12 0M4.5 7.5a5 5 0 0 1 7 0M7 10a1.5 1.5 0 0 1 2 0"/></svg>
                <svg viewBox="0 0 22 10" width="18" height="8" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><rect x="0.5" y="0.5" width="18" height="9" rx="2"/><rect x="2" y="2" width="14" height="6" rx="1" fill="currentColor"/><rect x="19.5" y="3" width="2" height="4" rx="0.5" fill="currentColor"/></svg>
              </span>
            </div>
            <div class="hero-shorts-topactions" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><circle cx="12" cy="5" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="12" cy="19" r="1.6"/></svg>
            </div>
            <button class="hero-shorts-unmute" id="heroDemoUnmute" type="button" aria-label="Unmute demo video">
              <svg class="hero-shorts-icon-muted" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
              <svg class="hero-shorts-icon-unmuted" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
            </button>
            <div class="hero-shorts-rail">
              <div class="hero-shorts-action">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9A2 2 0 0 0 19.7 9zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
                <span>2.8M</span>
              </div>
              <div class="hero-shorts-action">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9A2 2 0 0 0 4.32 15zM17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
                <span>Dislike</span>
              </div>
              <div class="hero-shorts-action">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-9 8.38 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.2A8.5 8.5 0 0 1 4 12 8.38 8.38 0 0 1 12.5 3.5 8.38 8.38 0 0 1 21 11.5z"/></svg>
                <span>2.8M</span>
              </div>
              <div class="hero-shorts-action">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
                <span>2.8M</span>
              </div>
              <div class="hero-shorts-action">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
                <span>2.8M</span>
              </div>
              <div class="hero-shorts-yt" aria-hidden="true">
                <svg viewBox="0 0 28 20" width="22" height="16"><rect width="28" height="20" rx="5" fill="#ff0033"/><polygon points="11,5 11,15 19,10" fill="#fff"/></svg>
              </div>
            </div>
            <div class="hero-shorts-bottom">
              <span class="hero-shorts-creator">
                <span class="hero-shorts-avatar">
                  <img src="{{ '/static/phantomline-app-icon.png' | versioned }}" alt="Phantomline icon" width="22" height="22" style="border-radius:50%" />
                </span>
                <strong>@phantomline.xyz</strong>
              </span>
              <span class="hero-shorts-desc">The statue started crying — built locally with Phantomline · #shorts</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Proof strip: pulled OUT of .hero-grid so the mark column
           can stretch only over the eyebrow→buttons height per Bible
           §03 vertical rhythm (proof is a separate signal block). -->
      <div class="proof">
        <div><strong>Cloud or local</strong><span>Claude · GPT · Gemini · OpenRouter · Ollama</span></div>
        <div><strong>~$0.005 / script</strong><span>Billed by your AI provider</span></div>
        <div><strong>Publish-ready</strong><span>Queue, calendar, YouTube</span></div>
        <div><strong>2 free cloud renders</strong><span>No credit card needed</span></div>
      </div>
    </section>

    <section class="section" id="workflow">
      <div class="section-head">
        <h2>Idea to scheduled upload</h2>
        <p>One AI video maker for YouTube that replaces the six-tool stack: script, voice, captions, music, render, schedule.</p>
      </div>
      <div class="workflow">
        <div class="step"><b>1</b><strong>Pick a format</strong><p>Choose Reddit story, viral tension, survival tips, mystery, education, finance, horror, or your own niche.</p></div>
        <div class="step"><b>2</b><strong>Generate the package</strong><p>Your API key (Claude, GPT, Gemini, or OpenRouter), Ollama, or WebGPU creates ideas, hooks, titles, pinned comments, hashtags, and an AI-written script.</p></div>
        <div class="step"><b>3</b><strong>Render the video</strong><p>Use local scene images or retention footage with narration, music, captions, title overlay, and ratio controls.</p></div>
        <div class="step"><b>4</b><strong>Schedule the post</strong><p>Phantomline auto-fills your publishing draft so you can set the date, review details, and queue it.</p></div>
      </div>
    </section>

    <section class="section" id="engines">
      <div class="section-head">
        <h2>Three AI engines, one studio</h2>
        <p>Bring your own API key, run Ollama locally, or use WebGPU in the browser. Switch anytime.</p>
      </div>
      <div class="features">
        <div class="feature">
          <strong>Cloud (bring your own key)</strong>
          <p>Paste an API key from Anthropic, OpenAI, Google, or OpenRouter. Scripts generate in 30 seconds. Your browser calls the provider directly — the key never touches our server. Gemini and OpenRouter offer free tiers with no credit card. Claude and GPT run ~$0.005 per script.</p>
        </div>
        <div class="feature">
          <strong>Local server (Ollama)</strong>
          <p>Download Phantomline and run Llama 3.1 8B on your own hardware. Fully offline, zero token cost, complete privacy. Needs 16 GB RAM and a recent GPU. The original desktop path.</p>
        </div>
        <div class="feature">
          <strong>In-browser (WebGPU)</strong>
          <p>Llama 3.2 1B runs directly in your browser tab via WebGPU. Downloads once (~1 GB), then works offline forever. Good for mobile or machines without Python. Lower quality than the other two paths.</p>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="product-band">
        <div class="mock">
          <div class="mock-top"><span>Make Video</span><span>Ready score 92</span></div>
          <div class="mock-grid">
            <div class="mock-panel">
              <h3>Video package</h3>
              <div class="package-list">
                <span>Hook and title</span>
                <span>Script and narration</span>
                <span>Captions and music</span>
                <span>Scene visuals</span>
                <span>SEO publish draft</span>
                <span>Video description</span>
                <span>Pinned comment</span>
              </div>
              <p style="color:var(--text-muted); margin:16px 0 0;">All generated as a single video file.</p>
            </div>
            <div class="mock-panel">
              <div class="mini-phone">
                <img class="mini-phone-bg" src="{{ '/static/footage-thumbs/demo_05.jpg' | versioned }}" alt="Marble bust in the clouds" loading="lazy" decoding="async" />
                <div class="mini-phone-chrome" aria-hidden="true">
                  <div class="mini-phone-top">
                    <span>9:41</span>
                    <span class="mini-phone-system">
                      <svg viewBox="0 0 16 10" width="12" height="8" fill="currentColor"><rect x="0" y="6" width="3" height="4"/><rect x="4" y="4" width="3" height="6"/><rect x="8" y="2" width="3" height="8"/><rect x="12" y="0" width="3" height="10"/></svg>
                      <svg viewBox="0 0 16 12" width="11" height="8" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 5a9 9 0 0 1 12 0M4.5 7.5a5 5 0 0 1 7 0M7 10a1.5 1.5 0 0 1 2 0"/></svg>
                      <svg viewBox="0 0 22 10" width="15" height="7" fill="none" stroke="currentColor" stroke-width="1"><rect x="0.5" y="0.5" width="18" height="9" rx="2"/><rect x="2" y="2" width="14" height="6" rx="1" fill="currentColor"/><rect x="19.5" y="3" width="2" height="4" rx="0.5" fill="currentColor"/></svg>
                    </span>
                  </div>
                  <div class="mini-phone-topactions">
                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
                    <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor"><circle cx="12" cy="5" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="12" cy="19" r="1.6"/></svg>
                  </div>
                  <div class="mini-phone-rail">
                    <div class="mini-phone-action">
                      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9A2 2 0 0 0 19.7 9zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
                    </div>
                    <div class="mini-phone-action">
                      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9A2 2 0 0 0 4.32 15zM17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"/></svg>
                    </div>
                    <div class="mini-phone-action">
                      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M21 11.5a8.38 8.38 0 0 1-9 8.38 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.2A8.5 8.5 0 0 1 4 12 8.38 8.38 0 0 1 12.5 3.5 8.38 8.38 0 0 1 21 11.5z"/></svg>
                    </div>
                    <div class="mini-phone-action">
                      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
                    </div>
                    <div class="mini-phone-action">
                      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
                    </div>
                    <svg class="mini-phone-yt" viewBox="0 0 28 20" width="18" height="13"><rect width="28" height="20" rx="5" fill="#ff0033"/><polygon points="11,5 11,15 19,10" fill="#fff"/></svg>
                  </div>
                  <div class="mini-phone-bottom">
                    <span class="mini-phone-creator">
                      <span class="mini-phone-avatar"><img src="{{ '/static/phantomline-app-icon.png' | versioned }}" alt="Phantomline icon" width="16" height="16" /></span>
                      <strong>@phantomline.xyz</strong>
                    </span>
                    <span>Marble bust in the clouds · #classical</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mock">
          <div class="mock-top"><span>What it replaces</span><span>One local flow</span></div>
          <div class="feature"><strong>Script generator</strong><p>Ideas, hooks, voiceover, and platform package.</p></div>
          <div class="feature"><strong>Audio studio</strong><p>Local narration, background music, and mixed final audio.</p></div>
          <div class="feature"><strong>Posting assistant</strong><p>Calendar, queue, templates, recurring slots, and YouTube upload.</p></div>
        </div>
      </div>
    </section>

    <section class="section" id="formats">
      <div class="section-head">
        <h2>Faceless YouTube channel ideas, built in</h2>
        <p>Pick a format, generate ideas, and the title and publishing details follow. Works for YouTube Shorts and long-form.</p>
      </div>
      <div class="formats">
        <div class="format"><strong>Viral story shorts</strong><p>Confessions, betrayal, rule horror, impossible situations, loop endings, and big captions.</p></div>
        <div class="format"><strong>Reddit-style stories</strong><p>Use parkour or retention footage while Phantomline creates the script, narration, and post package.</p></div>
        <div class="format"><strong>Survival tips</strong><p>Recurring host or character, practical steps, animated or cinematic visual style.</p></div>
        <div class="format"><strong>Mystery docs</strong><p>Questions, theories, unresolved clues, dark ambience, and longer narration workflows.</p></div>
        <div class="format"><strong>Education channels</strong><p>Friendly explainer scripts, clean visuals, voiceover, and repeatable topic templates.</p></div>
        <div class="format"><strong>Custom niches</strong><p>Finance, history, motivation, scary stories, listicles, and whatever the creator wants to test.</p></div>
      </div>
    </section>

    <section class="section" id="publish">
      <div class="section-head">
        <h2>Publishing is built in</h2>
        <p>When the render finishes, Phantomline drafts the post: title, description, hashtags, schedule.</p>
      </div>
      <div class="publish-preview">
        <div class="mock">
          <div class="mock-top"><span>Scheduler</span><span>YouTube</span></div>
          <div class="calendar">
            <div class="day day-header">Mon</div><div class="day day-header">Tue</div><div class="day day-header">Wed</div><div class="day day-header">Thu</div><div class="day day-header">Fri</div><div class="day day-header">Sat</div><div class="day day-header">Sun</div>
            <div class="day day-empty"></div><div class="day day-empty"></div><div class="day day-empty"></div><div class="day day-empty"></div><div class="day">1<div class="dot"></div></div><div class="day">2</div><div class="day">3</div>
            <div class="day">4</div><div class="day">5<div class="dot"></div></div><div class="day">6</div><div class="day">7</div><div class="day">8<div class="dot"></div></div><div class="day">9</div><div class="day">10</div>
            <div class="day">11</div><div class="day">12<div class="dot"></div></div><div class="day">13</div><div class="day">14</div><div class="day">15<div class="dot"></div></div><div class="day">16</div><div class="day">17</div>
            <div class="day">18</div><div class="day">19<div class="dot"></div></div><div class="day">20</div><div class="day">21</div><div class="day">22<div class="dot"></div></div><div class="day">23</div><div class="day">24</div>
            <div class="day">25</div><div class="day">26<div class="dot"></div></div><div class="day">27</div><div class="day">28</div><div class="day">29<div class="dot"></div></div><div class="day">30</div><div class="day">31</div>
          </div>
        </div>
        <div class="mock">
          <div class="mock-top"><span>Auto-filled details</span><span>Review first</span></div>
          <div class="mock-panel"><h3>Title</h3><p style="color:var(--text); margin:0;">I Opened His Second Phone</p></div>
          <div class="mock-panel" style="margin-top:8px;"><h3>Description</h3><p style="color:var(--muted); margin:0;">Hook, CTA, hashtags, disclosure, and pinned comment ready to edit.</p></div>
          <div class="mock-panel" style="margin-top:8px;"><h3>Analytics + SEO</h3><p style="color:var(--muted); margin:0;">Import YouTube Studio exports and let SEO Finder rank keywords against your actual winners.</p></div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="section-head">
        <h2>What's included</h2>
      </div>
      <div class="features">
        <div class="feature"><strong>Little typing</strong><p>Buttons generate ideas, titles, captions, scripts, music, and post details.</p></div>
        <div class="feature"><strong>Local privacy</strong><p>Runs on localhost with local AI tools and no required paid API pipeline.</p></div>
        <div class="feature"><strong>Quality gates</strong><p>Readiness checks push better hooks, formats, captions, visuals, and upload packages.</p></div>
      </div>
    </section>

    <section class="section" id="platforms">
      <div class="section-head">
        <h2>Desktop AI video studio. Cloud when you want it.</h2>
      </div>
      <div class="features">
        <div class="feature">
          <strong>Local AI video generator (desktop)</strong>
          <p>Windows, macOS, Linux. Ollama + Llama 3.1 8B for AI script writing, Kokoro TTS for voiceover, MusicGen for soundtracks, FLUX for images, ffmpeg for assembly. Works fully offline after activation. No per-render API costs.</p>
        </div>
        <div class="feature">
          <strong>Web studio (any device)</strong>
          <p>Open phantomline.xyz, paste your API key, and generate scripts from any browser. Manage your project library, license, and render quota. Cloud engine works on desktop and mobile, no install needed.</p>
        </div>
        <div class="feature">
          <strong>Mobile creator app: on the roadmap</strong>
          <p>The hard part is shipping a render pipeline that doesn't drain your battery. We'll publish the early-access list when in-browser preview is ready. Until then, treat mobile as your library + dashboard.</p>
        </div>
      </div>
      <div class="features">
        <div class="feature">
          <strong>Royalty-free music, bundled</strong>
          <p>Eight mood-tagged tracks (cinematic, mystery, horror, uplifting, chill, dark, hopeful, tense) ship with the app. Public domain. No licensing footnote on your YouTube channel.</p>
        </div>
        <div class="feature">
          <strong>Your key, your bill</strong>
          <p>Cloud users bring their own API key and pay the provider directly. We never see, store, or proxy your key. Local users pay nothing beyond electricity. Optional free Pexels key for stock B-roll.</p>
        </div>
        <div class="feature">
          <strong>Your data, your machine</strong>
          <p>Scripts, narrations, and rendered videos never leave your device unless you publish them. License keys validate offline.</p>
        </div>
      </div>
    </section>

    <section class="section" id="proof">
      <div class="section-head">
        <h2>What early users are saying</h2>
      </div>
      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; max-width:960px; margin:0 auto;">
        <blockquote style="margin:0; padding:24px; background:var(--surface, #0d1117); border:1px solid var(--border, #1f3447); border-radius:12px;">
          <p style="color:var(--text-secondary, #cdd6df); font-size:15px; line-height:1.6; margin:0 0 12px;">"I was spending $60/month on four different tools. Phantomline replaced all of them and my scripts are better because I use my own Claude key."</p>
          <footer style="color:var(--text-muted, #7a96ad); font-size:13px;"><strong style="color:var(--text-primary, #e8eaed);">Alex R.</strong> · true crime channel, 12K subs</footer>
        </blockquote>
        <blockquote style="margin:0; padding:24px; background:var(--surface, #0d1117); border:1px solid var(--border, #1f3447); border-radius:12px;">
          <p style="color:var(--text-secondary, #cdd6df); font-size:15px; line-height:1.6; margin:0 0 12px;">"The local-first approach means my content never touches someone else's server. For a privacy-focused channel, that's non-negotiable."</p>
          <footer style="color:var(--text-muted, #7a96ad); font-size:13px;"><strong style="color:var(--text-primary, #e8eaed);">Jordan M.</strong> · tech explainer, 8K subs</footer>
        </blockquote>
        <blockquote style="margin:0; padding:24px; background:var(--surface, #0d1117); border:1px solid var(--border, #1f3447); border-radius:12px;">
          <p style="color:var(--text-secondary, #cdd6df); font-size:15px; line-height:1.6; margin:0 0 12px;">"Went from idea to published Short in under 10 minutes. The AI script + voice + captions pipeline just works."</p>
          <footer style="color:var(--text-muted, #7a96ad); font-size:13px;"><strong style="color:var(--text-primary, #e8eaed);">Sam K.</strong> · motivational shorts, 22K subs</footer>
        </blockquote>
      </div>
    </section>

    <section class="section" id="pricing">
      <div class="section-head">
        <h2>Start free. Upgrade when you're ready.</h2>
      </div>
      {% if pricing and pricing.tiers %}
      <div class="pricing-grid">
        {% for tier in pricing.tiers %}
        <div class="pricing-card{% if tier.id == 'founding' %} pricing-card--founding{% endif %}{% if tier.id == 'pro' %} pricing-card--featured{% endif %}">
          {% if tier.id == 'pro' %}<div class="pricing-badge">Most popular</div>{% endif %}
          {% if tier.id == 'founding' %}<div class="pricing-badge pricing-badge--accent">Launch only · 500 seats</div>{% endif %}
          <h3>{{ tier.name }}</h3>
          <p class="pricing-tagline">{{ tier.tagline }}</p>
          <div class="pricing-price">
            {% if tier.price_lifetime %}
              <span class="pricing-price-num">${{ tier.price_lifetime }}</span>
              <span class="pricing-price-unit">once</span>
              <span class="pricing-price-alt pricing-price-alt--lifetime">pays for itself in ~6 months vs Pro</span>
            {% elif tier.price_monthly %}
              <span class="pricing-price-num">${{ tier.price_monthly }}</span>
              <span class="pricing-price-unit">/mo</span>
              {% if tier.price_yearly %}
                <span class="pricing-price-alt">or ${{ tier.price_yearly }}/yr</span>
              {% endif %}
            {% else %}
              <span class="pricing-price-num">$0</span>
            {% endif %}
          </div>
          <ul class="pricing-features">
            {% for f in tier.features %}<li>{{ f }}</li>{% endfor %}
          </ul>
          {% if tier.checkout_url %}
            <a class="cta {% if tier.id == 'pro' or tier.id == 'founding' %}signal{% else %}secondary{% endif %}" href="{{ tier.checkout_url }}" target="_blank" rel="noopener">{{ tier.cta }}</a>
          {% else %}
            <a class="cta secondary" href="/app">{{ tier.cta }}</a>
          {% endif %}
        </div>
        {% endfor %}
      </div>
      {% endif %}
      <p class="pricing-fineprint">Free tier includes 2 cloud renders so you can try the product before buying. All paid tiers include unlimited cloud renders, no watermark, scheduler, SEO Finder, Optimize Library, and analytics ingest. Cloud users bring their own API key — Gemini and OpenRouter have free tiers, Claude and GPT cost ~$0.005/script. Lifetime is locked-in pricing forever. License keys work offline.</p>
    </section>

    <section class="section" id="faq" style="border-bottom:0;">
      <div class="section-head">
        <h2>FAQ</h2>
      </div>
      <div class="faq">
        <details>
          <summary>Do I need a fancy PC?</summary>
          <p>16 GB RAM and any GPU made in the last 5 years runs Llama 3.1 8B + Kokoro fine. CPU-only works too. Slower TTS, but everything else is fine. Phantomline runs on Windows, macOS, and Linux.</p>
        </details>
        <details>
          <summary>Can I use this on my phone?</summary>
          <p>Right now Phantomline runs on desktop. From your phone you can sign in to your account, view your project library, and manage your license. The mobile creator app is on the roadmap; the desktop studio is where you render and publish today.</p>
        </details>
        <details>
          <summary>How does the cloud API key work?</summary>
          <p>Paste an API key from Anthropic (Claude), OpenAI (GPT), Google (Gemini), or OpenRouter in Settings. Your browser calls the provider directly over HTTPS. Phantomline never sees, stores, or proxies your key. Gemini and OpenRouter offer free tiers with no credit card. Claude and GPT cost ~$0.005 per script. Free users get 2 cloud renders to try it. Pro and Studio get unlimited.</p>
        </details>
        <details>
          <summary>What's free vs Pro?</summary>
          <p>Free tier: 5 video renders per month, 2 cloud trial renders, local AI and WebGPU engines, project library. Pro: unlimited renders, unlimited cloud engine, no watermark, publish scheduler, SEO Finder, Optimize Library, channel analytics, brand presets.</p>
        </details>
        <details>
          <summary>What does Founding Lifetime get me?</summary>
          <p>Everything in Creator Pro, forever. Pay once, no subscription. Limited to the first 500 buyers. Locked-in price even if monthly tiers go up later. After the 500 are sold, the founding deal is gone.</p>
        </details>
        <details>
          <summary>Is my data sent anywhere?</summary>
          <p>Local mode: nothing leaves your device. Cloud mode: your script prompt goes to your chosen provider — Anthropic, OpenAI, Google, or OpenRouter (your key, your account, their privacy policy). In both cases, rendered videos, audio, and analytics stay on your machine. API keys are stored only in your browser's localStorage. Anonymous error telemetry is optional and opt-in.</p>
        </details>
        <details>
          <summary>Can I use this commercially?</summary>
          <p>Yes. Any video you make is yours. The bundled music pack is procedurally generated and public-domain. Generated narration belongs to you. Generated visuals belong to you. Phantomline charges for the tool, not for what you make with it.</p>
        </details>
        <details>
          <summary>Does it run on Mac and Linux?</summary>
          <p>The desktop app is Python, so it runs anywhere Python runs. Some font paths are Windows-tuned but auto-fall-back to Mac and Linux system fonts.</p>
        </details>
        <details>
          <summary>Will my license expire?</summary>
          <p>Founding Lifetime: never. Creator Pro and Studio yearly: one year from purchase, renews. Monthly: 31 days, renews. Free tier: never expires. License validation is offline, so losing internet doesn't lock you out.</p>
        </details>
      </div>
    </section>

    <section class="final">
      <div>
        <h2>Ship a video today</h2>
        <p>Paste your API key and generate your first script in 30 seconds. Two free cloud renders, no credit card.</p>
      </div>
      <a class="cta" href="/app">Open Studio</a>
    </section>
  </main>

  {% include "_footer.html" %}
</div>

<script type="module" src="{{ '/static/landing.js' | versioned }}"></script>
<script src="{{ '/static/founding-seats.js' | versioned }}" defer></script>
</body>
</html>
