src/views/landing-pro.tsx — ccantynz/Gluecron.com

landing-pro.tsx77.1 KB · 1284 lines
import type { FC } from "hono/jsx";
import type { PublicStats } from "../lib/public-stats";
import type {
  QueuedAiBuildIssue,
  RecentAutoMerge,
  RecentAiReview,
  DemoActivityEntry,
} from "../lib/demo-activity";
import { DEMO_USERNAME } from "../lib/demo-seed";

export interface LandingProLiveFeed {
  queued: QueuedAiBuildIssue[];
  merges: RecentAutoMerge[];
  reviews: RecentAiReview[];
  reviewCount: number;
  feed: DemoActivityEntry[];
}

export interface LandingProProps {
  stats?: { publicRepos?: number; users?: number };
  publicStats?: PublicStats | null;
  liveFeed?: LandingProLiveFeed | null;
}

export function relTime(
  value: string | Date | null | undefined,
  now: number = Date.now()
): string {
  if (value === null || value === undefined) return "just now";
  const t = value instanceof Date ? value.getTime() : new Date(value).getTime();
  if (!Number.isFinite(t)) return "just now";
  const d = now - t;
  if (d < 0) return "just now";
  const s = Math.floor(d / 1000);
  if (s < 60) return "just now";
  const m = Math.floor(s / 60);
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}

// ─── inline SVG icon helper ────────────────────────────────────────

function icon(paths: string, color = "#4353c9", size = 20) {
  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
}

const ICONS: Record<string, string> = {
  code:     icon('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>'),
  fork:     icon('<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="6" y1="9" x2="6" y2="15"/><path d="M18 9V7a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2"/><path d="M18 15a3 3 0 0 0 0-6"/>'),
  ai:       icon('<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>', "#7c3aed"),
  shield:   icon('<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>', "#059669"),
  workflow: icon('<circle cx="12" cy="12" r="3"/><path d="M12 3v3"/><path d="M12 18v3"/><path d="M4.22 4.22l2.12 2.12"/><path d="M17.66 17.66l2.12 2.12"/><path d="M3 12h3"/><path d="M18 12h3"/><path d="M4.22 19.78l2.12-2.12"/><path d="M17.66 6.34l2.12-2.12"/>', "#b45309"),
  grid:     icon('<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>', "#475569"),
  chart:    icon('<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>', "#0891b2"),
  link:     icon('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>', "#dc2626"),
  team:     icon('<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>', "#0d9488"),
};

// ─── page ──────────────────────────────────────────────────────────

export const LandingProPage: FC<LandingProProps> = ({
  publicStats,
  liveFeed,
} = {}) => {
  const title = "Gluecron — The AI-native git platform";
  const desc =
    "The git platform that does the work. AI code review on every PR, secrets scanned at push, features built from plain-English issues. Self-hosted, git-native, Claude-first.";

  const liveQueued = liveFeed?.queued ?? [];
  const liveMerges = liveFeed?.merges ?? [];
  const liveReviews = liveFeed?.reviews ?? [];
  const liveReviewCount = liveFeed?.reviewCount ?? 0;
  const liveEntries = liveFeed?.feed ?? [];

  return (
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="theme-color" content="#ffffff" />
        <title>{title}</title>
        <meta name="description" content={desc} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={desc} />
        <meta property="og:type" content="website" />
        <meta name="twitter:card" content="summary_large_image" />
        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" />
        <style dangerouslySetInnerHTML={{ __html: css }} />
      </head>
      <body>

        {/* ── Nav ── */}
        <header class="lp-nav" id="lp-nav">
          <div class="lp-nav-in">
            <a href="/" class="lp-logo" aria-label="Gluecron home">
              <span class="lp-logo-mark" aria-hidden="true" />
              gluecron
            </a>
            <nav class="lp-nav-links" aria-label="Primary">
              <a href="#platform">Platform</a>
              <a href="#ai">AI suite</a>
              <a href="#security">Security</a>
              <a href="/pricing">Pricing</a>
              <a href="/explore">Explore</a>
            </nav>
            <div class="lp-nav-ctas">
              <a href="/login" class="lp-btn lp-btn-ghost">Sign in</a>
              <a href="/register" class="lp-btn lp-btn-solid">Start building</a>
            </div>
          </div>
        </header>

        {/* ── Hero ── */}
        <section class="lp-hero">
          <div class="lp-wrap lp-hero-in">
            <div class="lp-hero-text">
              <div class="lp-kicker">The AI-native git platform</div>
              <h1 class="lp-h1">The platform<br />that does the work.</h1>
              <p class="lp-hero-sub">
                AI code review on every PR. Secrets scanned at push.
                Features built from plain-English issues. Gluecron closes
                the loop from spec to deployed code — while you focus on
                what matters.
              </p>
              <div class="lp-hero-ctas">
                <a href="/register" class="lp-btn lp-btn-solid lp-btn-lg">Sign up free</a>
                <a href="/import" class="lp-btn lp-btn-outline lp-btn-lg">Migrate from GitHub</a>
              </div>
              <div class="lp-hero-links">
                <a href="/demo">Try the live demo</a>
                <span aria-hidden="true">·</span>
                <a href="/vs-github">Compare to GitHub</a>
                <span aria-hidden="true">·</span>
                <a href="/pricing">See pricing</a>
              </div>

              {publicStats && (
                <dl class="lp-hero-stats">
                  <div class="lp-hero-stat">
                    <dt
                      class="lp-counter"
                      data-counter-target={String(publicStats.weeklyPrsAutoMerged)}
                    >
                      {publicStats.weeklyPrsAutoMerged.toLocaleString()}
                    </dt>
                    <dd>PRs auto-merged this week</dd>
                  </div>
                  <div class="lp-hero-stat">
                    <dt
                      class="lp-counter"
                      data-counter-target={String(publicStats.weeklyIssuesBuiltByAi)}
                    >
                      {publicStats.weeklyIssuesBuiltByAi.toLocaleString()}
                    </dt>
                    <dd>issues built by AI</dd>
                  </div>
                  <div class="lp-hero-stat">
                    <dt
                      class="lp-counter"
                      data-counter-target={String(Math.round(publicStats.weeklyHoursSaved))}
                      data-counter-suffix="h"
                    >
                      {`~${Math.round(publicStats.weeklyHoursSaved)}h`}
                    </dt>
                    <dd>saved by AI this week</dd>
                  </div>
                  <div class="lp-hero-stat">
                    <dt
                      class="lp-counter"
                      data-counter-target={String(publicStats.weeklyDeploysShipped)}
                    >
                      {publicStats.weeklyDeploysShipped.toLocaleString()}
                    </dt>
                    <dd>deploys shipped</dd>
                  </div>
                </dl>
              )}
            </div>

            {/* Rich PR review mock card */}
            <div class="lp-hero-card" aria-hidden="true">
              <div class="lp-hc-chrome">
                <span class="lp-hc-dot lp-hc-dot-r" />
                <span class="lp-hc-dot lp-hc-dot-y" />
                <span class="lp-hc-dot lp-hc-dot-g" />
                <span class="lp-hc-path">auth/middleware.ts · PR #128 · main</span>
              </div>
              <div class="lp-hc-pr-row">
                <span class="lp-badge lp-badge-merged">Merged</span>
                <span class="lp-hc-pr-title">Harden token validation</span>
              </div>
              <div class="lp-diff">
                <div class="lp-diff-line lp-diff-add">
                  <span class="lp-ln">80</span>
                  <span class="lp-op">+</span>
                  <code><span class="lp-kw">const</span> validateToken = <span class="lp-kw">async</span> (token: <span class="lp-ty">string</span>) =&gt; {"{"}</code>
                </div>
                <div class="lp-diff-line lp-diff-add lp-diff-focus">
                  <span class="lp-ln">81</span>
                  <span class="lp-op">+</span>
                  <code>{"  "}<span class="lp-kw">const</span> hash = <span class="lp-kw">await</span> <span class="lp-fn">sha256</span>(token);</code>
                </div>
                <div class="lp-diff-line lp-diff-add">
                  <span class="lp-ln">82</span>
                  <span class="lp-op">+</span>
                  <code>{"  "}<span class="lp-kw">const</span> user = <span class="lp-kw">await</span> db.<span class="lp-fn">findByHash</span>(hash);</code>
                </div>
                <div class="lp-diff-line lp-diff-add">
                  <span class="lp-ln">83</span>
                  <span class="lp-op">+</span>
                  <code>{"  "}<span class="lp-kw">if</span> (!user) <span class="lp-kw">throw new</span> <span class="lp-ty">AuthError</span>(<span class="lp-str">"invalid"</span>);</code>
                </div>
              </div>
              <div class="lp-inline-comment">
                <div class="lp-ic-ava">C</div>
                <div class="lp-ic-body">
                  <div class="lp-ic-head">Claude <span class="lp-ic-loc">middleware.ts:81</span></div>
                  <div class="lp-ic-text">SHA-256 via Web Crypto — constant-time, no timing-attack surface. Correct approach. ✓</div>
                </div>
              </div>
              <div class="lp-gates">
                <span class="lp-gate lp-gate-ok">✓ Security</span>
                <span class="lp-gate lp-gate-ok">✓ Tests (412)</span>
                <span class="lp-gate lp-gate-ok">✓ Claude review</span>
                <span class="lp-gate lp-gate-spin">⊙ Deploying</span>
              </div>
              <div class="lp-automerge-bar">Auto-merging to main · deploy in ~4s</div>
            </div>
          </div>
        </section>

        {/* ── Trust strip ── */}
        <div class="lp-trust-strip">
          <div class="lp-wrap lp-trust-in">
            <span>Self-hosted on your hardware</span>
            <span class="lp-sep" aria-hidden="true" />
            <span>Git-native · Smart HTTP + SSH</span>
            <span class="lp-sep" aria-hidden="true" />
            <span>Claude-powered AI review</span>
            <span class="lp-sep" aria-hidden="true" />
            <span>MCP-native for Claude Code</span>
            <span class="lp-sep" aria-hidden="true" />
            <span>Free to start</span>
          </div>
        </div>

        {/* ── Impact stat band ── */}
        <div class="lp-impact-band">
          <div class="lp-wrap lp-impact-in">
            <div class="lp-impact-stat lp-reveal">
              <span class="lp-impact-n">2<span class="lp-impact-x">×</span></span>
              <span class="lp-impact-label">faster dev velocity</span>
            </div>
            <div class="lp-impact-sep" aria-hidden="true" />
            <div class="lp-impact-stat lp-reveal">
              <span class="lp-impact-n">100<span class="lp-impact-x">%</span></span>
              <span class="lp-impact-label">audit log coverage</span>
            </div>
            <div class="lp-impact-sep" aria-hidden="true" />
            <div class="lp-impact-stat lp-reveal">
              <span class="lp-impact-n">&lt;30<span class="lp-impact-x">s</span></span>
              <span class="lp-impact-label">AI review latency</span>
            </div>
          </div>
        </div>

        {/* ── Live-now ── */}
        <section class="lp-sec lp-sec-soft" aria-labelledby="lp-live-h">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">
                <span class="lp-live-dot" aria-hidden="true">●</span> Live now
              </div>
              <h2 id="lp-live-h" class="lp-h2">Claude is working on demo repos as you read this.</h2>
              <p class="lp-sub">Real data from the public <code>{DEMO_USERNAME}/*</code> repos. Refreshes every 30 seconds.</p>
            </div>

            <div class="lp-live-grid" data-livenow-grid>
              <LiveCard title="Issues queued for AI" variant="violet">
                <ul class="lp-live-list" data-livecard="queued">
                  {liveQueued.length === 0 ? (
                    <li class="lp-live-empty">Quiet right now.</li>
                  ) : liveQueued.slice(0, 3).map((i) => (
                    <li class="lp-live-row" data-row-id={`queued|${i.repo}|${i.number}`}>
                      <a href={`/${DEMO_USERNAME}/${i.repo}/issues/${i.number}`} class="lp-live-link">
                        <span class="lp-live-num">#{i.number}</span> {i.title}
                      </a>
                      <span class="lp-live-meta">{i.repo}</span>
                    </li>
                  ))}
                </ul>
              </LiveCard>

              <LiveCard title="Recently merged by AI" variant="green">
                <ul class="lp-live-list" data-livecard="merges">
                  {liveMerges.length === 0 ? (
                    <li class="lp-live-empty">No auto-merges in the last 24h.</li>
                  ) : liveMerges.slice(0, 3).map((m) => (
                    <li class="lp-live-row" data-row-id={`merges|${m.repo}|${m.number}`}>
                      <a href={`/${DEMO_USERNAME}/${m.repo}/pulls/${m.number}`} class="lp-live-link">
                        <span class="lp-live-num">#{m.number}</span> {m.title}
                      </a>
                      <span class="lp-live-meta">
                        {m.repo} · <span data-rel={m.mergedAt instanceof Date ? m.mergedAt.toISOString() : String(m.mergedAt)}>{relTime(m.mergedAt)}</span>
                      </span>
                    </li>
                  ))}
                </ul>
              </LiveCard>

              <LiveCard title="AI reviews posted" variant="brand">
                <div class="lp-live-bignum">
                  <span data-livecard-count="reviews">{liveReviewCount}</span>
                  <span class="lp-live-bignum-label">today</span>
                </div>
                <ul class="lp-live-list" data-livecard="reviews">
                  {liveReviews.length === 0 ? (
                    <li class="lp-live-empty">No reviews in the last 24h.</li>
                  ) : liveReviews.slice(0, 2).map((r) => (
                    <li class="lp-live-row" data-row-id={`reviews|${r.repo}|${r.prNumber}`}>
                      <a href={`/${DEMO_USERNAME}/${r.repo}/pulls/${r.prNumber}`} class="lp-live-link">
                        <span class="lp-live-num">#{r.prNumber}</span> {r.commentSnippet}
                      </a>
                      <span class="lp-live-meta">{r.repo}</span>
                    </li>
                  ))}
                </ul>
              </LiveCard>

              <LiveCard title="Activity feed" variant="neutral">
                <ul class="lp-live-list" data-livecard="feed">
                  {liveEntries.length === 0 ? (
                    <li class="lp-live-empty">Quiet right now — check back in a minute.</li>
                  ) : liveEntries.slice(0, 6).map((e) => {
                    const path = e.ref.type === "pr" ? "pulls" : "issues";
                    const kindLabel = e.kind === "auto_merge.merged" ? "auto-merged" : e.kind === "ai_build.dispatched" ? "AI-built" : "AI review";
                    const id = `${e.kind}|${e.repo}|${e.ref.type}|${e.ref.number}`;
                    return (
                      <li class="lp-live-feedrow" data-row-id={id}>
                        <span class={`lp-feed-kind lp-feed-kind-${e.kind.replace(/\./g, "-")}`}>{kindLabel}</span>
                        {" "}<a class="lp-live-link" href={`/${DEMO_USERNAME}/${e.repo}/${path}/${e.ref.number}`}>{e.repo} #{e.ref.number}</a>
                        {" "}<span class="lp-live-rel" data-rel={e.at instanceof Date ? e.at.toISOString() : String(e.at)}>{relTime(e.at)}</span>
                      </li>
                    );
                  })}
                </ul>
              </LiveCard>
            </div>

            <div class="lp-live-cta">
              <a href="/register" class="lp-btn lp-btn-solid">Sign up free</a>
              <a href="/demo" class="lp-text-link">Open the live demo →</a>
            </div>
          </div>
          <script dangerouslySetInnerHTML={{ __html: liveNowJs }} />
        </section>

        {/* ── Platform breadth ── */}
        <section class="lp-sec" id="platform" aria-labelledby="lp-platform-h">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">The platform</div>
              <h2 id="lp-platform-h" class="lp-h2">Everything your team needs.<br />Nothing you don't.</h2>
              <p class="lp-sub">Gluecron ships the surfaces GitHub charges extra for — and the ones it never built. AI is a first-class contributor, not a plugin.</p>
            </div>

            <div class="lp-platform-grid">
              <PlatformGroup icon={ICONS.code} iconColor="#4353c9" title="Code hosting">
                {["Git Smart HTTP · SSH keys", "Forks · Stars · Topics", "Templates · Mirroring", "Releases · Protected tags", "Push policy rulesets", "Commit signature verify"]}
              </PlatformGroup>
              <PlatformGroup icon={ICONS.team} iconColor="#0d9488" title="Collaboration">
                {["Issues · PRs · Inline review", "Draft PRs · Merge queues", "Discussions · Wikis", "Projects / kanban", "Gists · Reactions", "Mentions · Notifications"]}
              </PlatformGroup>
              <PlatformGroup icon={ICONS.ai} iconColor="#7c3aed" title="AI suite">
                {["Spec-to-PR from plain English", "AI code review on every PR", "AI auto-merge when gates pass", "Sleep Mode — ships overnight", "Auto-repair on gate failure", "AI changelog · AI test stubs"]}
              </PlatformGroup>
              <PlatformGroup icon={ICONS.shield} iconColor="#059669" title="Security">
                {["Secret scanner (15 patterns)", "AI semantic security review", "GateTest integration", "Dependency CVE alerts", "2FA · Passkeys · SAML SSO", "Audit log (100% coverage)"]}
              </PlatformGroup>
              <PlatformGroup icon={ICONS.workflow} iconColor="#b45309" title="CI / CD">
                {["Workflow runner (YAML-native)", "Cron triggers · Secrets", "Branch protection · Gates", "Required status checks", "Auto-repair on gate failure", "Protected tags enforcement"]}
              </PlatformGroup>
              <PlatformGroup icon={ICONS.grid} iconColor="#475569" title="Platform">
                {["Organizations · Teams · Roles", "npm package registry", "Pages / static hosting", "App marketplace", "Protected environments", "Billing · Quotas"]}
              </PlatformGroup>
              <PlatformGroup icon={ICONS.chart} iconColor="#0891b2" title="Observability">
                {["DORA metrics dashboard", "Developer velocity", "Repository health score", "Hot files heatmap", "Traffic analytics", "Org insights"]}
              </PlatformGroup>
              <PlatformGroup icon={ICONS.link} iconColor="#dc2626" title="Integrations">
                {["REST API v2 · GraphQL", "MCP server (Claude, Cursor)", "Official CLI · VS Code ext", "Webhooks (HMAC-signed)", "OAuth provider · GitHub Apps", "GitHub import (single + bulk)"]}
              </PlatformGroup>
            </div>
          </div>
        </section>

        {/* ── Developer painkiller ── */}
        <section class="lp-sec lp-sec-soft">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">Why developers switch</div>
              <h2 class="lp-h2">Pain out. Productivity in.</h2>
              <p class="lp-sub">Every friction point in modern development has a specific answer in Gluecron.</p>
            </div>
            <div class="lp-pain-table">
              <PainRow problem="Waiting on CI to queue before a gate runs" fix="Gates fire at the moment of push — before the branch even moves" />
              <PainRow problem="Manual code review as a bottleneck" fix="AI reviews every PR in under 30 seconds, line-level, with risk flags" />
              <PainRow problem="A failed gate halts your whole day" fix="Auto-repair tries to fix it, re-runs the gate, continues — you may never see it" />
              <PainRow problem="AI as a sidebar you talk at" fix="Claude has a bot account, makes commits, appears in your git history like a teammate" />
              <PainRow problem="Platform lock-in and surprise bills" fix="Self-hosted, single Bun binary, git-native — run it on a $6 VPS" />
              <PainRow problem="Dependency CVEs discovered after merge" fix="CVE scanner runs on every push touching a manifest; opens issues automatically" />
            </div>
          </div>
        </section>

        {/* ── AI showcase ── */}
        <section class="lp-sec" id="ai" aria-labelledby="lp-ai-h">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">AI-native, not AI-bolted-on</div>
              <h2 id="lp-ai-h" class="lp-h2">Claude does the work.<br />You stay in control.</h2>
              <p class="lp-sub">Every AI action is attributed, auditable, and reversible. The manual path is always one click away.</p>
            </div>

            <div class="lp-ai-features">
              <AiFeatureCard
                n="01"
                title="Spec-to-PR"
                body="Describe a feature in plain English — or just label an issue ai:build. Claude opens a branch, writes the change, and submits a draft PR against your gates. Spec to PR in under 90 seconds."
                link={{ href: "/demo", label: "Try on a live repo" }}
                mock={
                  <div class="lp-review-mock">
                    <div class="lp-rm-header">
                      <span class="lp-rm-label">Issue #42 · labelled <code>ai:build</code></span>
                      <span class="lp-badge lp-badge-ai">AI</span>
                    </div>
                    <div class="lp-rm-steps">
                      <div class="lp-rm-step lp-rm-done"><span class="lp-rm-icon">✓</span> Branch opened: <code>feat/add-auth-provider</code></div>
                      <div class="lp-rm-step lp-rm-done"><span class="lp-rm-icon">✓</span> Files written: <code>auth/provider.ts</code>, <code>auth/types.ts</code></div>
                      <div class="lp-rm-step lp-rm-active"><span class="lp-rm-icon">⊙</span> PR #43 open — awaiting your review</div>
                    </div>
                    <div class="lp-rm-time">Spec → draft PR in 74s</div>
                  </div>
                }
              />

              <AiFeatureCard
                n="02"
                title="AI code review on every PR"
                body="The moment a PR opens, Claude reviews the diff: line-level comments, security flags, logic issues, and a verdict. Under 30 seconds. Every PR, every time, before a human has to look."
                link={{ href: "/vs-github", label: "Compare to Copilot" }}
                reverse
                mock={
                  <div class="lp-review-mock">
                    <div class="lp-rm-header">
                      <span class="lp-rm-label">PR #128 · Claude review</span>
                      <span class="lp-badge lp-badge-approved">Approved</span>
                    </div>
                    <div class="lp-rm-comment">
                      <div class="lp-rm-ava">C</div>
                      <div class="lp-rm-bubble">
                        <div class="lp-rm-file">auth/middleware.ts:81</div>
                        SHA-256 via Web Crypto — constant-time, no timing-attack surface. Correct approach.
                      </div>
                    </div>
                    <div class="lp-rm-verdict">
                      <span class="lp-rm-v-ok">✓ No security issues · Approved for auto-merge</span>
                    </div>
                    <div class="lp-rm-time">Review posted in 28s</div>
                  </div>
                }
              />

              <AiFeatureCard
                n="03"
                title="Sleep Mode"
                body="Enable Sleep Mode and set your wake-up hour. Gluecron's autopilot works overnight: merging ready PRs, building labelled issues, repairing failed gates, fixing secrets. You wake up to a digest."
                link={{ href: "/sleep-mode", label: "See Sleep Mode" }}
                mock={
                  <div class="lp-review-mock lp-digest-mock">
                    <div class="lp-rm-header">
                      <span class="lp-rm-label">Overnight digest · 9:04 AM</span>
                    </div>
                    <div class="lp-digest-rows">
                      <div class="lp-digest-row"><span class="lp-digest-ok">✓</span> 3 PRs auto-merged to main</div>
                      <div class="lp-digest-row"><span class="lp-digest-ok">✓</span> Issue #37 built and in review</div>
                      <div class="lp-digest-row"><span class="lp-digest-ok">✓</span> 2 secrets auto-repaired before push</div>
                      <div class="lp-digest-row"><span class="lp-digest-ok">✓</span> 1 failing gate repaired, re-run green</div>
                    </div>
                    <div class="lp-rm-time">While you slept · 0 pages sent</div>
                  </div>
                }
              />

              <AiFeatureCard
                n="04"
                title="Auto-repair on gate failure"
                body="When a gate fails, auto-repair reads the failure, drafts a fix, commits it with a bot account, and re-runs the gate. If it can't fix it, it opens an incident issue with a root-cause summary."
                link={{ href: "/demo", label: "Watch a live repair" }}
                reverse
                mock={
                  <div class="lp-review-mock">
                    <div class="lp-rm-header">
                      <span class="lp-rm-label">Gate: tests · 2 failing</span>
                      <span class="lp-badge lp-badge-warn">Repairing</span>
                    </div>
                    <div class="lp-rm-steps">
                      <div class="lp-rm-step lp-rm-done"><span class="lp-rm-icon lp-rm-fail">✗</span> gate:tests — 2 assertions failed</div>
                      <div class="lp-rm-step lp-rm-done"><span class="lp-rm-icon">✓</span> Patch drafted: <code>+9 −3</code></div>
                      <div class="lp-rm-step lp-rm-active"><span class="lp-rm-icon">⊙</span> Re-running gate · 412 passing</div>
                    </div>
                    <div class="lp-rm-verdict">
                      <span class="lp-rm-v-ok">✓ All gates green · Proceeding to merge</span>
                    </div>
                  </div>
                }
              />
            </div>
          </div>
        </section>

        {/* ── Security ── */}
        <section class="lp-sec lp-sec-soft" id="security" aria-labelledby="lp-secsec-h">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">Security</div>
              <h2 id="lp-secsec-h" class="lp-h2">Secure by default at every layer.</h2>
              <p class="lp-sub">Security isn't a settings toggle. On Gluecron it runs automatically on every push, every PR, and every dependency update.</p>
            </div>
            <div class="lp-security-grid">
              <SecurityCard title="Push-time secret scanner" body="15 regex patterns + AI semantic scan runs before the branch moves. AWS keys, GitHub tokens, private keys, database URLs — stopped cold." />
              <SecurityCard title="AI security review" body="Claude reviews every diff for SSRF, SQL injection, XSS, and unsafe deserialization patterns. Line-level findings posted as PR comments." />
              <SecurityCard title="Dependency CVE alerts" body="Scans package.json, go.mod, Cargo.toml, requirements.txt on every push. Critical findings open issues automatically." />
              <SecurityCard title="Push policy rulesets" body="Enforce commit message patterns, block file paths, cap file sizes, forbid force-pushes — enforced at the HTTP layer, not advisory." />
              <SecurityCard title="Commit signature verify" body="GPG and SSH key registration with Verified badges on every commit. Full OpenPGP packet parsing, SSHSIG support." />
              <SecurityCard title="Enterprise auth" body="TOTP 2FA, passkeys (WebAuthn), SAML/OIDC SSO (Okta, Azure AD, Google Workspace), personal access tokens, OAuth provider." />
            </div>
          </div>
        </section>

        {/* ── For teams ── */}
        <section class="lp-sec">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">For teams</div>
              <h2 class="lp-h2">Built for organisations, not just solo developers.</h2>
              <p class="lp-sub">Everything a growing engineering team needs — including the parts enterprise platforms charge separately for.</p>
            </div>
            <div class="lp-teams-grid">
              <TeamCard title="Organizations &amp; teams" items={["Org-owned repositories", "Team-based CODEOWNERS (@org/team)", "Role-based access (read / write / admin)", "Per-repo collaborator invites", "Org-wide secrets manager (AES-256-GCM)"]} />
              <TeamCard title="Enterprise auth" items={["SAML/OIDC SSO (Okta, Azure AD, Google)", "TOTP 2FA + recovery codes", "Passkeys / WebAuthn", "Email-domain allowlists", "Auto-provision on first SSO login"]} />
              <TeamCard title="Compliance &amp; audit" items={["100% audit log coverage", "Per-repo + org-level audit views", "Signed commits with Verified badges", "Protected environments (reviewer-gated)", "DORA metrics for engineering health"]} />
              <TeamCard title="Developer insights" items={["DORA metrics (deploy freq, lead time, MTTR)", "Developer velocity dashboard", "Repository health score (0–100)", "Hot files heatmap (churn-based risk tiers)", "Org-wide green rate and PR activity"]} />
            </div>
          </div>
        </section>

        {/* ── Ecosystem ── */}
        <section class="lp-sec lp-sec-soft">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">Developer ecosystem</div>
              <h2 class="lp-h2">Meet developers where they work.</h2>
            </div>
            <div class="lp-eco-grid">
              <EcoCard title="Official CLI" sub="gluecron repo ls · gluecron issues · gluecron gql" body="A Bun-compiled single binary. Login, repo CRUD, issue listing, GraphQL queries, and server info from your terminal." link="/install" />
              <EcoCard title="VS Code extension" sub="Explain · Semantic search · Generate tests · Open on web" body="Four commands wired to your active Gluecron remote. AI explain-this-file and test generation without leaving the editor." link="/vscode" />
              <EcoCard title="MCP server" sub="Claude Code · Claude Desktop · Cursor" body="Model Context Protocol tools for repo search, file reads, issue and PR management — all natively available to Claude and Cursor." link="/mcp" />
              <EcoCard title="Full API surface" sub="REST v2 · GraphQL · Webhooks" body="A comprehensive REST API v2, a GraphQL mirror, HMAC-signed webhook delivery, and an OAuth 2.0 provider for third-party apps." link="/api" />
            </div>
          </div>
        </section>

        {/* ── Comparison ── */}
        <section class="lp-sec">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">vs the incumbent</div>
              <h2 class="lp-h2">Everything GitHub charges for.<br />And the parts they never built.</h2>
            </div>
            <div class="lp-compare">
              <div class="lp-compare-head" aria-hidden="true">
                <div />
                <div>GitHub</div>
                <div>Gluecron</div>
              </div>
              <CompareRow feature="Git hosting + Smart HTTP push" them="✓" us="✓" />
              <CompareRow feature="Issues, PRs, code review" them="✓" us="✓" />
              <CompareRow feature="Workflow runner" them="Metered minutes" us="Self-hosted, unmetered" ours />
              <CompareRow feature="AI code review on every PR" them="Copilot subscription" us="Built in, always on" ours />
              <CompareRow feature="Spec-to-PR (issue → draft PR)" them="—" us="✓" ours />
              <CompareRow feature="Auto-repair on gate failure" them="—" us="✓" ours />
              <CompareRow feature="Secret scanner on push" them="Paid add-on" us="Built in" ours />
              <CompareRow feature="MCP server (Claude / Cursor)" them="—" us="✓" ours />
              <CompareRow feature="DORA metrics + velocity dashboard" them="Paid add-on" us="Built in" ours />
              <CompareRow feature="Self-host on your own hardware" them="Enterprise tier" us="Single binary, free" ours />
              <CompareRow feature="npm package registry" them="✓" us="✓" />
              <CompareRow feature="Pre-receive policy enforcement" them="GitHub Enterprise" us="✓ on all plans" ours />
            </div>
            <div class="lp-compare-foot">
              <a href="/vs-github" class="lp-text-link">See the full 26-row comparison →</a>
            </div>
          </div>
        </section>

        {/* ── Pricing ── */}
        <section class="lp-sec lp-sec-soft">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">Pricing</div>
              <h2 class="lp-h2">Free to start. Honest at scale.</h2>
              <p class="lp-sub">Self-hosting is free forever. Hosted plans price the AI calls, not the seats. You own your data either way.</p>
            </div>
            <div class="lp-price-grid">
              <PricingCard tier="Free" price="$0" cadence="forever" desc="For personal projects and open source. Public and private repos, full AI suite, fair quotas." features={["Unlimited public repos", "3 private repos", "5K AI calls / month", "Community support"]} cta="Start free" href="/register" />
              <PricingCard tier="Pro" price="$12" cadence="per user / month" desc="For working developers. Lifts every quota, adds priority routing, no Gluecron branding on deploys." features={["Unlimited private repos", "100K AI calls / month", "Priority queue", "Custom domains"]} cta="Go Pro" href="/settings/billing" highlight />
              <PricingCard tier="Team" price="Talk to us" cadence="custom" desc="For orgs running production on Gluecron. SSO, audit retention, enterprise SLA, on-prem." features={["SSO + SCIM", "On-prem deploy", "Dedicated capacity", "24/7 incident response"]} cta="Contact us" href="mailto:hello@gluecron.com" />
            </div>
            <div class="lp-price-foot">
              <a href="/pricing" class="lp-text-link">Full pricing details →</a>
            </div>
          </div>
        </section>

        {/* ── Install ── */}
        <section class="lp-sec">
          <div class="lp-wrap lp-install-wrap">
            <div class="lp-install-text">
              <div class="lp-kicker">One command to start</div>
              <h2 class="lp-h2 lp-h2-tight">Already on GitHub?<br />Migrate in 30 seconds.</h2>
              <p class="lp-sub">Signs you in, mints a PAT, imports your repo, wires the Claude Desktop MCP server, and drops the Gluecron skill files — all in one shot.</p>
              <a href="/import" class="lp-btn lp-btn-solid lp-btn-lg" style="margin-top:20px">Or import a single repo →</a>
            </div>
            <div class="lp-install-terminal">
              <div class="lp-term-bar">
                <span class="lp-term-dot" /><span class="lp-term-dot" /><span class="lp-term-dot" />
                <span class="lp-term-title">Terminal</span>
              </div>
              <div class="lp-term-body">
                <div class="lp-term-line">
                  <span class="lp-term-prompt">$</span>
                  <span id="lp-install-cmd">curl -sSL gluecron.com/install | bash</span>
                  <button type="button" class="lp-copy-btn" data-copy-target="lp-install-cmd" aria-label="Copy install command">Copy</button>
                </div>
                <div class="lp-term-out lp-term-ok">✓ signed in as you@example.com</div>
                <div class="lp-term-out lp-term-ok">✓ PAT created (admin scope)</div>
                <div class="lp-term-out lp-term-ok">✓ your-repo imported from GitHub</div>
                <div class="lp-term-out lp-term-ok">✓ MCP server added to Claude Desktop</div>
                <div class="lp-term-out lp-term-ok">✓ gluecron-pr, gluecron-issue skills ready</div>
              </div>
            </div>
          </div>
        </section>

        {/* ── Dark CTA ── */}
        <section class="lp-cta-dark">
          <div class="lp-wrap lp-cta-in">
            <div class="lp-kicker lp-kicker-dark">Ready when you are</div>
            <h2 class="lp-cta-h">Stop managing the platform.<br />Start shipping the product.</h2>
            <p class="lp-cta-sub">Free to start. Self-hosted-friendly. MCP-native. Migrate from GitHub in one command.</p>
            <div class="lp-cta-btns">
              <a href="/register" class="lp-btn lp-btn-cta-solid lp-btn-xl">Create your account</a>
              <a href="/import" class="lp-btn lp-btn-cta-outline lp-btn-xl">Migrate a repo</a>
            </div>
            <div class="lp-cta-links lp-cta-links-dark">
              <a href="/demo">Try the live demo</a>
              <span aria-hidden="true">·</span>
              <a href="/vs-github">Compare to GitHub</a>
              <span aria-hidden="true">·</span>
              <a href="/pricing">See pricing</a>
            </div>
          </div>
        </section>

        {/* ── Footer ── */}
        <footer class="lp-footer">
          <div class="lp-wrap lp-footer-in">
            <div class="lp-footer-brand">
              <a href="/" class="lp-logo lp-logo-light">
                <span class="lp-logo-mark" aria-hidden="true" />
                gluecron
              </a>
              <p class="lp-footer-tag">The AI-native git platform.<br />Self-hosted, auditable, git-native.</p>
            </div>
            <div class="lp-footer-cols">
              <div class="lp-footer-col">
                <h4>Product</h4>
                <a href="#platform">Features</a>
                <a href="#ai">AI suite</a>
                <a href="#security">Security</a>
                <a href="/pricing">Pricing</a>
                <a href="/vs-github">vs GitHub</a>
                <a href="/sleep-mode">Sleep Mode</a>
              </div>
              <div class="lp-footer-col">
                <h4>Platform</h4>
                <a href="/explore">Explore repos</a>
                <a href="/demo">Live demo</a>
                <a href="/marketplace">Marketplace</a>
                <a href="/install">Install script</a>
                <a href="/api">API docs</a>
                <a href="/mcp">MCP server</a>
              </div>
              <div class="lp-footer-col">
                <h4>Developers</h4>
                <a href="/install">CLI install</a>
                <a href="/vscode">VS Code ext</a>
                <a href="/api/graphql">GraphQL explorer</a>
                <a href="/help">Migration guide</a>
                <a href="/import">Import from GitHub</a>
                <a href="/connect/claude-guide">Claude Code guide</a>
              </div>
              <div class="lp-footer-col">
                <h4>Account</h4>
                <a href="/login">Sign in</a>
                <a href="/register">Register</a>
                <a href="/settings">Settings</a>
                <a href="/settings/billing">Billing</a>
                <a href="/settings/tokens">API tokens</a>
                <a href="/status">Platform status</a>
              </div>
            </div>
          </div>
          <div class="lp-footer-bottom">
            <div class="lp-wrap lp-footer-bottom-in">
              <span>© {new Date().getFullYear()} Gluecron</span>
              <span>Self-hosted · Git-native · Claude-first</span>
            </div>
          </div>
        </footer>

        <script dangerouslySetInnerHTML={{ __html: pageJs }} />
      </body>
    </html>
  );
};

// ─── sub-components ────────────────────────────────────────────────

const LiveCard: FC<{ title: string; variant: "violet"|"green"|"brand"|"neutral"; children?: any }> = ({ title, variant, children }) => (
  <article class={`lp-live-card lp-live-card-${variant} lp-reveal`}>
    <h3 class="lp-live-card-title">{title}</h3>
    {children}
  </article>
);

const PlatformGroup: FC<{ icon: string; iconColor: string; title: string; children: string[] }> = ({ icon: iconHtml, title, children }) => (
  <div class="lp-plat-group lp-reveal">
    <div class="lp-plat-header">
      <span class="lp-plat-icon" dangerouslySetInnerHTML={{ __html: iconHtml }} />
      <h3 class="lp-plat-title">{title}</h3>
    </div>
    <ul class="lp-plat-list">
      {children.map((item) => <li>{item}</li>)}
    </ul>
  </div>
);

const PainRow: FC<{ problem: string; fix: string }> = ({ problem, fix }) => (
  <div class="lp-pain-row lp-reveal">
    <div class="lp-pain-problem">
      <span class="lp-pain-icon lp-pain-no" aria-label="Before">✗</span>{problem}
    </div>
    <div class="lp-pain-arrow" aria-hidden="true">→</div>
    <div class="lp-pain-fix">
      <span class="lp-pain-icon lp-pain-yes" aria-label="After">✓</span>{fix}
    </div>
  </div>
);

const AiFeatureCard: FC<{
  n: string; title: string; body: string;
  link: { href: string; label: string };
  mock: any; reverse?: boolean;
}> = ({ n, title, body, link, mock, reverse }) => (
  <div class={`lp-ai-feature lp-reveal${reverse ? " lp-ai-feature-rev" : ""}`}>
    <div class="lp-ai-text">
      <div class="lp-ai-n">{n}</div>
      <h3 class="lp-ai-title">{title}</h3>
      <p class="lp-ai-body">{body}</p>
      <a href={link.href} class="lp-text-link">{link.label} →</a>
    </div>
    <div class="lp-ai-mock" aria-hidden="true">{mock}</div>
  </div>
);

const SecurityCard: FC<{ title: string; body: string }> = ({ title, body }) => (
  <div class="lp-sec-card lp-reveal">
    <h3 class="lp-sec-card-title">{title}</h3>
    <p class="lp-sec-card-body">{body}</p>
  </div>
);

const TeamCard: FC<{ title: string; items: string[] }> = ({ title, items }) => (
  <div class="lp-team-card lp-reveal">
    <h3 class="lp-team-title">{title}</h3>
    <ul class="lp-team-list">
      {items.map((item) => <li><span aria-hidden="true">✓</span>{item}</li>)}
    </ul>
  </div>
);

const EcoCard: FC<{ title: string; sub: string; body: string; link: string }> = ({ title, sub, body, link }) => (
  <div class="lp-eco-card lp-reveal">
    <h3 class="lp-eco-title">{title}</h3>
    <div class="lp-eco-sub">{sub}</div>
    <p class="lp-eco-body">{body}</p>
    <a href={link} class="lp-text-link">Learn more →</a>
  </div>
);

const CompareRow: FC<{ feature: string; them: string; us: string; ours?: boolean }> = ({ feature, them, us, ours }) => (
  <div class={`lp-cmp-row${ours ? " lp-cmp-ours" : ""}`}>
    <div class="lp-cmp-feature">{feature}</div>
    <div class="lp-cmp-them">{them}</div>
    <div class={`lp-cmp-us${ours ? " lp-cmp-us-hl" : ""}`}>{us}</div>
  </div>
);

const PricingCard: FC<{
  tier: string; price: string; cadence: string; desc: string;
  features: string[]; cta: string; href: string; highlight?: boolean;
}> = ({ tier, price, cadence, desc, features, cta, href, highlight }) => (
  <div class={`lp-price-card lp-reveal${highlight ? " lp-price-hl" : ""}`}>
    {highlight && <div class="lp-price-badge">Most popular</div>}
    <div class="lp-price-tier">{tier}</div>
    <div class="lp-price-amount">
      <span class="lp-price-num">{price}</span>
      <span class="lp-price-cad">{cadence}</span>
    </div>
    <p class="lp-price-desc">{desc}</p>
    <ul class="lp-price-features">
      {features.map((f) => <li><span aria-hidden="true">✓</span>{f}</li>)}
    </ul>
    <a href={href} class={`lp-btn ${highlight ? "lp-btn-solid" : "lp-btn-outline"} lp-btn-block`}>{cta}</a>
  </div>
);

// ─── JavaScript ────────────────────────────────────────────────────

const liveNowJs = `
(function(){
try{
  var DEMO=${JSON.stringify(DEMO_USERNAME)};
  var INTERVAL=30000;
  function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}
  function rel(v){
    if(v==null) return 'just now';
    var t=(typeof v==='number'?v:new Date(v).getTime());
    if(!isFinite(t)) return 'just now';
    var d=Date.now()-t;if(d<0) return 'just now';
    var s=Math.floor(d/1000);if(s<60) return 'just now';
    var m=Math.floor(s/60);if(m<60) return m+'m ago';
    var h=Math.floor(m/60);if(h<24) return h+'h ago';
    return Math.floor(h/24)+'d ago';
  }
  function diffMount(ul,newHtml){
    if(!ul) return;
    var prev={};
    ul.querySelectorAll('[data-row-id]').forEach(function(n){prev[n.getAttribute('data-row-id')]=true;});
    ul.innerHTML=newHtml;
    ul.querySelectorAll('[data-row-id]').forEach(function(n){
      if(!prev[n.getAttribute('data-row-id')]){
        n.style.transition='none';n.style.background='rgba(67,83,201,.07)';
        setTimeout(function(){n.style.transition='background .8s';n.style.background='';},50);
      }
    });
  }
  function pollQueued(){fetch('/api/v2/demo/queued',{credentials:'omit'}).then(function(r){return r.json();}).then(function(d){var ul=document.querySelector('[data-livecard="queued"]');if(!ul) return;var items=(d&&d.items)||[];if(!items.length){ul.innerHTML='<li class="lp-live-empty">Quiet right now.</li>';return;}diffMount(ul,items.slice(0,3).map(function(i){var id='queued|'+i.repo+'|'+i.number;return'<li class="lp-live-row" data-row-id="'+esc(id)+'"><a href="/'+esc(DEMO)+'/'+esc(i.repo)+'/issues/'+i.number+'" class="lp-live-link"><span class="lp-live-num">#'+i.number+'</span> '+esc(i.title)+'</a><span class="lp-live-meta">'+esc(i.repo)+'</span></li>';}).join(''));}).catch(function(){});}
  function pollMerges(){fetch('/api/v2/demo/merges',{credentials:'omit'}).then(function(r){return r.json();}).then(function(d){var ul=document.querySelector('[data-livecard="merges"]');if(!ul) return;var items=(d&&d.items)||[];if(!items.length){ul.innerHTML='<li class="lp-live-empty">No auto-merges in the last 24h.</li>';return;}diffMount(ul,items.slice(0,3).map(function(m){var id='merges|'+m.repo+'|'+m.number;return'<li class="lp-live-row" data-row-id="'+esc(id)+'"><a href="/'+esc(DEMO)+'/'+esc(m.repo)+'/pulls/'+m.number+'" class="lp-live-link"><span class="lp-live-num">#'+m.number+'</span> '+esc(m.title)+'</a><span class="lp-live-meta">'+esc(m.repo)+' <span data-rel="'+esc(m.mergedAt)+'">'+esc(rel(m.mergedAt))+'</span></span></li>';}).join(''));}).catch(function(){});}
  function pollReviews(){fetch('/api/v2/demo/reviews',{credentials:'omit'}).then(function(r){return r.json();}).then(function(d){var ul=document.querySelector('[data-livecard="reviews"]');if(!ul) return;var cnt=document.querySelector('[data-livecard-count="reviews"]');if(cnt&&typeof d.count==='number') cnt.textContent=d.count;var items=(d&&d.items)||[];if(!items.length){ul.innerHTML='<li class="lp-live-empty">No reviews in the last 24h.</li>';return;}diffMount(ul,items.slice(0,2).map(function(r){var id='reviews|'+r.repo+'|'+r.prNumber;return'<li class="lp-live-row" data-row-id="'+esc(id)+'"><a href="/'+esc(DEMO)+'/'+esc(r.repo)+'/pulls/'+r.prNumber+'" class="lp-live-link"><span class="lp-live-num">#'+r.prNumber+'</span> '+esc(r.commentSnippet)+'</a><span class="lp-live-meta">'+esc(r.repo)+'</span></li>';}).join(''));}).catch(function(){});}
  function pollFeed(){fetch('/api/v2/demo/activity',{credentials:'omit'}).then(function(r){return r.json();}).then(function(d){var ul=document.querySelector('[data-livecard="feed"]');if(!ul) return;var entries=(d&&d.entries)||[];if(!entries.length){ul.innerHTML='<li class="lp-live-empty">Quiet right now.</li>';return;}diffMount(ul,entries.slice(0,6).map(function(e){var path=(e.ref&&e.ref.type==='pr')?'pulls':'issues';var num=(e.ref&&e.ref.number)||0;var label=e.kind==='auto_merge.merged'?'auto-merged':e.kind==='ai_build.dispatched'?'AI-built':'AI review';var kc=String(e.kind||'').replace(/\\./g,'-');var id=e.kind+'|'+e.repo+'|'+(e.ref&&e.ref.type)+'|'+num;return'<li class="lp-live-feedrow" data-row-id="'+esc(id)+'"><span class="lp-feed-kind lp-feed-kind-'+esc(kc)+'">'+esc(label)+'</span> <a class="lp-live-link" href="/'+esc(DEMO)+'/'+esc(e.repo)+'/'+path+'/'+num+'">'+esc(e.repo)+' #'+num+'</a> <span data-rel="'+esc(e.at)+'">'+esc(rel(e.at))+'</span></li>';}).join(''));}).catch(function(){});}
  function refreshRel(){document.querySelectorAll('[data-rel]').forEach(function(el){el.textContent=rel(el.getAttribute('data-rel'));});}
  function tick(){pollQueued();pollMerges();pollReviews();pollFeed();}
  setInterval(tick,INTERVAL);setInterval(refreshRel,60000);
}catch(err){}
})();
`;

const pageJs = `
(function(){
/* ── copy button ── */
document.addEventListener('click',function(e){
  var btn=e.target.closest('[data-copy-target]');
  if(!btn) return;
  var el=document.getElementById(btn.getAttribute('data-copy-target'));
  if(!el) return;
  navigator.clipboard.writeText(el.textContent.trim()).then(function(){
    var o=btn.textContent;btn.textContent='Copied!';
    setTimeout(function(){btn.textContent=o;},1500);
  }).catch(function(){});
});

/* ── scroll reveal ── */
try{
  var obs=new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){e.target.classList.add('lp-visible');obs.unobserve(e.target);}
    });
  },{threshold:0.08,rootMargin:'0px 0px -40px 0px'});
  document.querySelectorAll('.lp-reveal').forEach(function(el){obs.observe(el);});
}catch(err){}

/* ── counter animation ── */
try{
  function animCount(el,target,dur){
    var start=performance.now();
    var suffix=el.getAttribute('data-counter-suffix')||'';
    function step(now){
      var p=Math.min((now-start)/dur,1);
      var ease=1-Math.pow(1-p,3);
      var v=Math.round(ease*target);
      el.textContent=(v>=1000?(v/1000).toFixed(v>=10000?0:1)+'k':String(v))+suffix;
      if(p<1) requestAnimationFrame(step);
      else el.textContent=target>=1000?(target/1000).toFixed(target>=10000?0:1)+'k'+suffix:String(target)+suffix;
    }
    requestAnimationFrame(step);
  }
  var cObs=new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){
        var t=parseInt(e.target.getAttribute('data-counter-target')||'0',10);
        if(t>0) animCount(e.target,t,1200);
        cObs.unobserve(e.target);
      }
    });
  },{threshold:0.5});
  document.querySelectorAll('[data-counter-target]').forEach(function(el){cObs.observe(el);});
}catch(err){}

/* ── nav scroll class ── */
try{
  var nav=document.getElementById('lp-nav');
  window.addEventListener('scroll',function(){
    nav&&nav.classList.toggle('lp-stuck',window.scrollY>20);
  },{passive:true});
}catch(err){}
})();
`;

// ─── CSS ───────────────────────────────────────────────────────────

const css = `
/* ── tokens ── */
:root{
  --lp-brand:#4353c9;--lp-brand-h:#3848b6;
  --lp-bg:#ffffff;--lp-soft:#fafafb;
  --lp-ink:#0a0b0d;--lp-ink-2:#3a3d45;--lp-muted:#6b7280;
  --lp-border:rgba(0,0,0,.08);
  --lp-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.06);
  --lp-shadow-lg:0 4px 12px rgba(0,0,0,.07),0 24px 48px rgba(0,0,0,.09);
  --lp-green:#059669;--lp-red:#dc2626;--lp-violet:#7c3aed;--lp-amber:#b45309;
  --lp-max:1200px;--lp-r:10px;
  --lp-navy:#0a0d1a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--lp-bg);color:var(--lp-ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
a{color:inherit;text-decoration:none}

/* ── scroll reveal ── */
.lp-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.lp-reveal.lp-visible{opacity:1;transform:none}

/* ── layout ── */
.lp-wrap{max-width:var(--lp-max);margin:0 auto;padding:0 24px}
.lp-sec{padding:96px 0}
.lp-sec-soft{background:var(--lp-soft)}

/* ── typography ── */
.lp-h1{font-family:'Inter Tight','Inter',sans-serif;font-weight:800;font-size:clamp(42px,6.5vw,76px);line-height:1.02;letter-spacing:-.03em;color:var(--lp-ink)}
.lp-h2{font-family:'Inter Tight','Inter',sans-serif;font-weight:700;font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.022em;color:var(--lp-ink)}
.lp-h2-tight{font-size:clamp(26px,3.2vw,40px)}
.lp-kicker{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--lp-brand);margin-bottom:12px}
.lp-sub{font-size:18px;color:var(--lp-ink-2);line-height:1.65;max-width:60ch}
.lp-text-link{color:var(--lp-brand);font-size:15px;font-weight:500}
.lp-text-link:hover{color:var(--lp-brand-h);text-decoration:underline}
code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;background:rgba(0,0,0,.05);padding:2px 5px;border-radius:4px}

/* ── buttons ── */
.lp-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-weight:600;font-size:15px;border-radius:var(--lp-r);padding:10px 18px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,background .15s,border-color .15s,color .15s;white-space:nowrap}
.lp-btn:hover{transform:translateY(-1px)}
.lp-btn-solid{background:var(--lp-ink);color:#fff;border-color:var(--lp-ink)}
.lp-btn-solid:hover{box-shadow:0 8px 24px rgba(10,11,13,.25)}
.lp-btn-outline{color:var(--lp-ink);border-color:rgba(0,0,0,.2)}
.lp-btn-outline:hover{border-color:var(--lp-ink);background:rgba(0,0,0,.03)}
.lp-btn-ghost{color:var(--lp-ink-2);border-color:var(--lp-border)}
.lp-btn-ghost:hover{color:var(--lp-ink);border-color:rgba(0,0,0,.2)}
.lp-btn-lg{padding:13px 22px;font-size:16px;border-radius:12px}
.lp-btn-xl{padding:15px 30px;font-size:17px;border-radius:14px}
.lp-btn-block{width:100%;justify-content:center}
/* dark section buttons */
.lp-btn-cta-solid{background:#fff;color:var(--lp-navy);border-color:#fff}
.lp-btn-cta-solid:hover{background:#f1f5f9;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.lp-btn-cta-outline{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.28)}
.lp-btn-cta-outline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}

/* ── badges ── */
.lp-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px}
.lp-badge-merged{color:var(--lp-green);background:rgba(5,150,105,.1)}
.lp-badge-approved{color:var(--lp-green);background:rgba(5,150,105,.1)}
.lp-badge-ai{color:var(--lp-violet);background:rgba(124,58,237,.1)}
.lp-badge-warn{color:var(--lp-amber);background:rgba(180,83,9,.1)}

/* ── nav ── */
.lp-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .2s}
.lp-nav.lp-stuck{border-bottom-color:var(--lp-border)}
.lp-nav-in{max-width:var(--lp-max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
.lp-logo{display:inline-flex;align-items:center;gap:9px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--lp-ink)}
.lp-logo-light{color:rgba(255,255,255,.9)}
.lp-logo-mark{width:18px;height:18px;border-radius:6px;background:var(--lp-brand);display:inline-block;flex-shrink:0}
.lp-nav-links{display:flex;gap:24px;margin-left:10px}
.lp-nav-links a{font-size:15px;font-weight:500;color:var(--lp-ink-2);transition:color .15s}
.lp-nav-links a:hover{color:var(--lp-ink)}
.lp-nav-ctas{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(max-width:720px){.lp-nav-links{display:none}.lp-nav-ctas .lp-btn-ghost{display:none}}

/* ── hero ── */
.lp-hero{padding:80px 0 60px;border-bottom:1px solid var(--lp-border)}
.lp-hero-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.lp-hero-text{display:flex;flex-direction:column}
.lp-hero-text .lp-kicker{margin-bottom:16px}
.lp-hero-sub{font-size:18px;color:var(--lp-ink-2);line-height:1.65;margin:20px 0 0}
.lp-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.lp-hero-links{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:14px;color:var(--lp-muted)}
.lp-hero-links a{color:var(--lp-brand);font-weight:500}
.lp-hero-links span{color:var(--lp-border)}
.lp-hero-stats{display:flex;gap:28px;margin-top:32px;padding-top:24px;border-top:1px solid var(--lp-border);list-style:none;flex-wrap:wrap}
.lp-hero-stat dt{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:22px;color:var(--lp-ink);letter-spacing:-.01em}
.lp-hero-stat dd{font-size:12.5px;color:var(--lp-muted);margin-top:2px}
@media(max-width:900px){.lp-hero-in{grid-template-columns:1fr}.lp-hero-card{order:-1}}

/* ── hero PR mock card ── */
.lp-hero-card{background:#fff;border:1px solid var(--lp-border);border-radius:16px;box-shadow:var(--lp-shadow-lg);overflow:hidden;font-size:13px}
.lp-hc-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--lp-soft);border-bottom:1px solid var(--lp-border)}
.lp-hc-dot{width:11px;height:11px;border-radius:50%}
.lp-hc-dot-r{background:#ff5f57}
.lp-hc-dot-y{background:#ffbd2e}
.lp-hc-dot-g{background:#28c840}
.lp-hc-path{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--lp-muted)}
.lp-hc-pr-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--lp-border)}
.lp-hc-pr-title{font-size:13.5px;font-weight:600;color:var(--lp-ink)}
/* diff */
.lp-diff{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:#fafafa;border-bottom:1px solid var(--lp-border)}
.lp-diff-line{display:flex;align-items:baseline;gap:0;line-height:1.7;padding:0 0}
.lp-diff-add{background:rgba(5,150,105,.07)}
.lp-diff-focus{background:rgba(5,150,105,.13)}
.lp-ln{width:36px;text-align:right;color:#9ca3af;padding-right:8px;user-select:none;font-size:11px}
.lp-op{width:16px;text-align:center;color:var(--lp-green);font-weight:700;flex-shrink:0}
.lp-diff-line code{font-family:'JetBrains Mono',monospace;font-size:12px;background:none;padding:0;color:#1f2937}
.lp-kw{color:#7c3aed;font-style:italic}
.lp-ty{color:#059669}
.lp-fn{color:#2563eb}
.lp-str{color:#d97706}
/* inline comment */
.lp-inline-comment{display:flex;gap:10px;padding:12px 16px;background:rgba(67,83,201,.04);border-bottom:1px solid rgba(67,83,201,.12)}
.lp-ic-ava{width:26px;height:26px;border-radius:50%;background:var(--lp-brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.lp-ic-head{font-size:12px;font-weight:600;color:var(--lp-ink-2);margin-bottom:3px}
.lp-ic-loc{color:var(--lp-brand);font-family:'JetBrains Mono',monospace;font-size:11px}
.lp-ic-text{font-size:13px;color:var(--lp-ink-2);line-height:1.5}
/* gates */
.lp-gates{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--lp-border)}
.lp-gate{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px}
.lp-gate-ok{color:var(--lp-green);background:rgba(5,150,105,.09)}
.lp-gate-spin{color:var(--lp-brand);background:rgba(67,83,201,.09)}
/* auto-merge banner */
.lp-automerge-bar{background:var(--lp-brand);color:#fff;font-size:12px;font-weight:600;text-align:center;padding:8px;letter-spacing:.01em}

/* ── trust strip ── */
.lp-trust-strip{border-bottom:1px solid var(--lp-border);padding:14px 0;background:var(--lp-soft)}
.lp-trust-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px;font-weight:500;color:var(--lp-muted);justify-content:center}
.lp-sep{width:1px;height:14px;background:var(--lp-border)}

/* ── impact band ── */
.lp-impact-band{padding:52px 0;border-bottom:1px solid var(--lp-border)}
.lp-impact-in{display:flex;align-items:center;justify-content:center;gap:0}
.lp-impact-stat{text-align:center;padding:0 60px;display:flex;flex-direction:column;align-items:center;gap:6px}
.lp-impact-n{font-family:'Inter Tight',sans-serif;font-size:clamp(40px,6vw,68px);font-weight:800;color:var(--lp-ink);letter-spacing:-.03em;line-height:1}
.lp-impact-x{color:var(--lp-brand);font-size:.7em}
.lp-impact-label{font-size:13.5px;color:var(--lp-muted);font-weight:500}
.lp-impact-sep{width:1px;height:64px;background:var(--lp-border);flex-shrink:0}
@media(max-width:600px){.lp-impact-in{flex-direction:column;gap:32px}.lp-impact-sep{width:64px;height:1px}.lp-impact-stat{padding:0}}

/* ── section header ── */
.lp-sec-head{max-width:680px;margin-bottom:52px}
.lp-sec-head .lp-h2{margin:8px 0 16px}

/* ── live-now ── */
.lp-live-dot{color:var(--lp-brand);font-size:9px;margin-right:4px}
.lp-live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
@media(max-width:1000px){.lp-live-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lp-live-grid{grid-template-columns:1fr}}
.lp-live-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:20px;box-shadow:var(--lp-shadow);border-left:3px solid transparent;transition:transform .18s,box-shadow .2s}
.lp-live-card:hover{transform:translateY(-2px);box-shadow:var(--lp-shadow-lg)}
.lp-live-card-violet{border-left-color:rgba(124,58,237,.4);background:rgba(124,58,237,.02)}
.lp-live-card-green{border-left-color:rgba(5,150,105,.4);background:rgba(5,150,105,.02)}
.lp-live-card-brand{border-left-color:rgba(67,83,201,.4);background:rgba(67,83,201,.02)}
.lp-live-card-neutral{border-left-color:var(--lp-border)}
.lp-live-card-title{font-size:12.5px;font-weight:700;color:var(--lp-ink-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.lp-live-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.lp-live-empty{font-size:13.5px;color:var(--lp-muted)}
.lp-live-row{display:flex;flex-direction:column;gap:3px;transition:background .3s}
.lp-live-link{font-size:13.5px;color:var(--lp-ink);font-weight:500;line-height:1.4}
.lp-live-link:hover{color:var(--lp-brand)}
.lp-live-num{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--lp-muted)}
.lp-live-meta{font-size:12px;color:var(--lp-muted)}
.lp-live-bignum{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.lp-live-bignum span:first-child{font-family:'Inter Tight',sans-serif;font-size:32px;font-weight:700;color:var(--lp-ink)}
.lp-live-bignum-label{font-size:13.5px;color:var(--lp-muted)}
.lp-live-feedrow{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-size:13px;line-height:1.5}
.lp-live-rel{color:var(--lp-muted)}
.lp-feed-kind{font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:4px}
.lp-feed-kind-auto_merge-merged{color:var(--lp-green);background:rgba(5,150,105,.09)}
.lp-feed-kind-ai_build-dispatched{color:var(--lp-brand);background:rgba(67,83,201,.09)}
.lp-feed-kind-ai_review-posted{color:var(--lp-violet);background:rgba(124,58,237,.09)}
.lp-live-cta{display:flex;align-items:center;gap:16px}

/* ── platform grid ── */
.lp-platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;background:var(--lp-border)}
@media(max-width:900px){.lp-platform-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.lp-platform-grid{grid-template-columns:1fr}}
.lp-plat-group{background:#fff;padding:22px;display:flex;flex-direction:column;gap:12px;transition:background .15s}
.lp-plat-group:hover{background:#fafbff}
.lp-plat-header{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.lp-plat-icon{display:flex;flex-shrink:0}
.lp-plat-icon svg{display:block}
.lp-plat-title{font-size:13px;font-weight:700;color:var(--lp-ink)}
.lp-plat-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.lp-plat-list li{font-size:13px;color:var(--lp-ink-2)}

/* ── pain table ── */
.lp-pain-table{display:flex;flex-direction:column;border:1px solid var(--lp-border);border-radius:14px;overflow:hidden}
.lp-pain-row{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--lp-border);transition:background .15s}
.lp-pain-row:last-child{border-bottom:0}
.lp-pain-row:hover{background:var(--lp-soft)}
.lp-pain-problem{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#6b7280}
.lp-pain-fix{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--lp-ink);font-weight:500}
.lp-pain-arrow{font-size:18px;color:var(--lp-muted);text-align:center}
.lp-pain-icon{font-size:12.5px;font-weight:700;margin-top:3px;flex-shrink:0}
.lp-pain-no{color:#b91c1c}
.lp-pain-yes{color:var(--lp-green)}
@media(max-width:700px){.lp-pain-row{grid-template-columns:1fr;gap:8px}.lp-pain-arrow{display:none}}

/* ── AI features ── */
.lp-ai-features{display:flex;flex-direction:column;gap:72px}
.lp-ai-feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.lp-ai-feature-rev{direction:rtl}
.lp-ai-feature-rev>*{direction:ltr}
@media(max-width:800px){.lp-ai-feature,.lp-ai-feature-rev{grid-template-columns:1fr;direction:ltr}}
.lp-ai-n{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:var(--lp-muted);margin-bottom:10px;letter-spacing:.04em}
.lp-ai-title{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.12;letter-spacing:-.018em;color:var(--lp-ink);margin-bottom:14px}
.lp-ai-body{font-size:16px;color:var(--lp-ink-2);line-height:1.65;margin-bottom:18px}
.lp-ai-mock{background:#fff;border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;box-shadow:var(--lp-shadow-lg)}
/* review mock */
.lp-review-mock{display:flex;flex-direction:column;gap:0;font-size:13.5px}
.lp-rm-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--lp-border);background:var(--lp-soft)}
.lp-rm-label{font-size:12.5px;font-weight:600;color:var(--lp-ink-2)}
.lp-rm-steps{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.lp-rm-step{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--lp-ink-2);line-height:1.45}
.lp-rm-icon{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--lp-green);flex-shrink:0;width:14px}
.lp-rm-fail{color:var(--lp-red)}
.lp-rm-done{opacity:.7}
.lp-rm-active{color:var(--lp-ink);font-weight:500}
.lp-rm-time{padding:8px 16px;font-size:11.5px;color:var(--lp-muted);border-top:1px solid var(--lp-border);font-family:'JetBrains Mono',monospace}
.lp-rm-comment{display:flex;gap:10px;padding:12px 16px;background:rgba(67,83,201,.03)}
.lp-rm-ava{width:28px;height:28px;border-radius:50%;background:var(--lp-brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.lp-rm-bubble{flex:1;font-size:13px;color:var(--lp-ink-2);line-height:1.5}
.lp-rm-file{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--lp-brand);margin-bottom:4px}
.lp-rm-verdict{padding:10px 16px;border-top:1px solid var(--lp-border)}
.lp-rm-v-ok{font-size:13px;font-weight:600;color:var(--lp-green)}
/* digest mock */
.lp-digest-rows{padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.lp-digest-row{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--lp-ink-2)}
.lp-digest-ok{color:var(--lp-green);font-weight:700;flex-shrink:0}

/* ── security cards ── */
.lp-security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.lp-security-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lp-security-grid{grid-template-columns:1fr}}
.lp-sec-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);transition:transform .18s,box-shadow .2s}
.lp-sec-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
.lp-sec-card-title{font-size:15px;font-weight:700;color:var(--lp-ink);margin-bottom:10px}
.lp-sec-card-body{font-size:13.5px;color:var(--lp-ink-2);line-height:1.6}

/* ── teams ── */
.lp-teams-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.lp-teams-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lp-teams-grid{grid-template-columns:1fr}}
.lp-team-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);transition:transform .18s,box-shadow .2s}
.lp-team-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
.lp-team-title{font-size:14.5px;font-weight:700;color:var(--lp-ink);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--lp-border)}
.lp-team-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.lp-team-list li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--lp-ink-2);line-height:1.4}
.lp-team-list li span{color:var(--lp-green);font-size:12px;margin-top:2px;flex-shrink:0}

/* ── ecosystem ── */
.lp-eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.lp-eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.lp-eco-grid{grid-template-columns:1fr}}
.lp-eco-card{background:#fff;border:1px solid var(--lp-border);border-radius:var(--lp-r);padding:24px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .2s}
.lp-eco-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
.lp-eco-title{font-size:15px;font-weight:700;color:var(--lp-ink)}
.lp-eco-sub{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--lp-brand)}
.lp-eco-body{font-size:13.5px;color:var(--lp-ink-2);line-height:1.6;flex:1}

/* ── comparison ── */
.lp-compare{border:1px solid var(--lp-border);border-radius:14px;overflow:hidden}
.lp-compare-head{display:grid;grid-template-columns:1fr 160px 160px;padding:12px 20px;background:var(--lp-soft);font-size:12.5px;font-weight:700;color:var(--lp-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--lp-border)}
.lp-cmp-row{display:grid;grid-template-columns:1fr 160px 160px;padding:14px 20px;border-bottom:1px solid var(--lp-border);font-size:14px;align-items:center;transition:background .15s}
.lp-cmp-row:last-child{border-bottom:0}
.lp-cmp-ours{background:rgba(67,83,201,.025)}
.lp-cmp-ours:hover{background:rgba(67,83,201,.04)}
.lp-cmp-feature{color:var(--lp-ink-2)}
.lp-cmp-them{color:var(--lp-muted);font-size:13.5px}
.lp-cmp-us{color:var(--lp-muted);font-size:13.5px}
.lp-cmp-us-hl{color:var(--lp-green);font-weight:700}
.lp-compare-foot{margin-top:16px}
@media(max-width:700px){.lp-compare-head,.lp-cmp-row{grid-template-columns:1fr 90px 90px;font-size:12.5px}}

/* ── pricing ── */
.lp-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:800px){.lp-price-grid{grid-template-columns:1fr}}
.lp-price-card{background:#fff;border:1px solid var(--lp-border);border-radius:14px;padding:28px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;gap:0;position:relative;transition:transform .18s,box-shadow .2s}
.lp-price-card:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow-lg)}
.lp-price-hl{border-color:var(--lp-brand);box-shadow:0 0 0 1px var(--lp-brand),var(--lp-shadow)}
.lp-price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--lp-brand);color:#fff;font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:999px}
.lp-price-tier{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--lp-brand);margin-bottom:12px}
.lp-price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
.lp-price-num{font-family:'Inter Tight',sans-serif;font-size:36px;font-weight:800;color:var(--lp-ink);letter-spacing:-.02em}
.lp-price-cad{font-size:13.5px;color:var(--lp-muted)}
.lp-price-desc{font-size:13.5px;color:var(--lp-ink-2);line-height:1.6;margin-bottom:20px}
.lp-price-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:24px;flex:1}
.lp-price-features li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--lp-ink-2)}
.lp-price-features li span{color:var(--lp-green);font-size:12px;margin-top:2px}
.lp-price-foot{margin-top:16px}

/* ── install ── */
.lp-install-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:800px){.lp-install-wrap{grid-template-columns:1fr}}
.lp-install-text{display:flex;flex-direction:column}
.lp-install-text .lp-kicker{margin-bottom:16px}
.lp-install-terminal{background:#fff;border:1px solid var(--lp-border);border-radius:14px;overflow:hidden;box-shadow:var(--lp-shadow-lg)}
.lp-term-bar{display:flex;align-items:center;gap:6px;padding:10px 16px;background:var(--lp-soft);border-bottom:1px solid var(--lp-border)}
.lp-term-dot{width:10px;height:10px;border-radius:50%;background:#d1d5db}
.lp-term-title{margin-left:8px;font-size:12px;color:var(--lp-muted);font-family:'JetBrains Mono',monospace}
.lp-term-body{padding:16px;display:flex;flex-direction:column;gap:8px}
.lp-term-line{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px}
.lp-term-prompt{color:var(--lp-brand);font-weight:500}
.lp-term-out{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--lp-muted);padding-left:20px}
.lp-term-ok{color:var(--lp-green)}
.lp-copy-btn{margin-left:auto;font-size:12px;font-family:'Inter',sans-serif;font-weight:600;padding:4px 10px;border:1px solid var(--lp-border);border-radius:6px;background:#fff;color:var(--lp-ink-2);cursor:pointer;transition:background .15s,color .15s}
.lp-copy-btn:hover{background:var(--lp-soft);color:var(--lp-ink)}

/* ── dark CTA ── */
.lp-cta-dark{background:var(--lp-navy);padding:96px 0;border-top:1px solid rgba(255,255,255,.06)}
.lp-cta-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.lp-kicker-dark{color:rgba(163,178,238,.9)}
.lp-cta-h{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.025em;color:#fff;margin:12px 0 18px}
.lp-cta-sub{font-size:18px;color:rgba(255,255,255,.65);max-width:52ch;margin-bottom:36px}
.lp-cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.lp-cta-links-dark{display:flex;gap:12px;align-items:center;font-size:14px}
.lp-cta-links-dark a{color:rgba(163,178,238,.85);font-weight:500}
.lp-cta-links-dark a:hover{color:#fff}
.lp-cta-links-dark span{color:rgba(255,255,255,.2)}

/* ── footer ── */
.lp-footer{background:var(--lp-navy);border-top:1px solid rgba(255,255,255,.07);padding:64px 0 0}
.lp-footer-in{display:grid;grid-template-columns:260px 1fr;gap:64px;margin-bottom:48px}
@media(max-width:800px){.lp-footer-in{grid-template-columns:1fr;gap:32px}}
.lp-footer-brand{display:flex;flex-direction:column;gap:12px}
.lp-footer-tag{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.6}
.lp-footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media(max-width:700px){.lp-footer-cols{grid-template-columns:repeat(2,1fr)}}
.lp-footer-col{display:flex;flex-direction:column;gap:10px}
.lp-footer-col h4{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.lp-footer-col a{font-size:13.5px;color:rgba(255,255,255,.45);transition:color .15s}
.lp-footer-col a:hover{color:rgba(255,255,255,.9)}
.lp-footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:20px 0}
.lp-footer-bottom-in{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.3)}
`;