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

landing-pro.tsx74.0 KB · 1454 lines
/**
 * LandingProPage — comprehensive marketing homepage.
 *
 * Design: Stripe/Linear aesthetic — pure white, Inter typography,
 * single indigo accent (#4353c9), generous whitespace. No cyberpunk
 * elements (no gradient text fills, no glowing orbs, no pulsing dots,
 * no ticker animations). Sections alternate #ffffff / #fafafb.
 *
 * Self-contained standalone document (own <html>, own CSS, own fonts)
 * — does NOT use the dark app Layout so the marketing surface stays
 * pristine. CSS scoped under .lp-* to avoid any bleed into the app.
 *
 * Data: accepts publicStats (L4) and liveFeed (L3 demo activity) from
 * the route. Both are optional — page degrades gracefully when absent.
 */

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";

// ─── prop interfaces ───────────────────────────────────────────────

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;
}

// ─── helper: relative time ─────────────────────────────────────────

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`;
}

// ─── 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>{publicStats.weeklyPrsAutoMerged.toLocaleString()}</dt>
                    <dd>PRs auto-merged this week</dd>
                  </div>
                  <div class="lp-hero-stat">
                    <dt>{publicStats.weeklyIssuesBuiltByAi.toLocaleString()}</dt>
                    <dd>issues built by AI</dd>
                  </div>
                  <div class="lp-hero-stat">
                    <dt>{`~${Math.round(publicStats.weeklyHoursSaved)}h`}</dt>
                    <dd>saved by AI this week</dd>
                  </div>
                  <div class="lp-hero-stat">
                    <dt>{publicStats.weeklyDeploysShipped.toLocaleString()}</dt>
                    <dd>deploys shipped</dd>
                  </div>
                </dl>
              )}
            </div>

            {/* Product mock card */}
            <div class="lp-hero-card" aria-hidden="true">
              <div class="lp-hc-bar">
                <span class="lp-hc-dot" /><span class="lp-hc-dot" /><span class="lp-hc-dot" />
                <span class="lp-hc-path">gluecron.com / your-org / api · PR #128</span>
              </div>
              <div class="lp-hc-body">
                <div class="lp-hc-pr-row">
                  <span class="lp-badge lp-badge-merged">Merged</span>
                  <span class="lp-hc-title">Fix race condition in token refresh</span>
                </div>
                <div class="lp-hc-review">
                  <div class="lp-hc-ava">C</div>
                  <div class="lp-hc-rev">
                    <div class="lp-hc-rev-head">Claude review · <em>approved</em></div>
                    <div class="lp-hc-rev-body">
                      Mutex now guards the refresh path. The double-fetch under contention is resolved. Gates green. Auto-merging.
                    </div>
                  </div>
                </div>
                <div class="lp-hc-checks">
                  <span class="lp-check lp-check-ok">✓ gate: security</span>
                  <span class="lp-check lp-check-ok">✓ gate: tests</span>
                  <span class="lp-check lp-check-ok">✓ review: Claude</span>
                  <span class="lp-check lp-check-ok">✓ deploy: live</span>
                </div>
                <div class="lp-hc-meta">
                  Deployed to <code>api.your-org.com</code> · 4.1s · push-to-live
                </div>
              </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, Cursor</span>
            <span class="lp-sep" aria-hidden="true" />
            <span>Free to start</span>
          </div>
        </div>

        {/* ── Live-now autopilot ─────────────────────────────────── */}
        <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">
                <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">
                <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">
                <div class="lp-live-bignum">
                  <span data-livecard-count="reviews" data-tick-target={String(liveReviewCount)}>
                    {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">
                <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 title="Code hosting">
                {["Git Smart HTTP · SSH keys", "Forks · Stars · Topics", "Templates · Mirroring", "Releases · Protected tags", "Push policy rulesets", "Commit signature verify"]}
              </PlatformGroup>
              <PlatformGroup title="Collaboration">
                {["Issues · PRs · Inline review", "Draft PRs · Merge queues", "Discussions · Wikis", "Projects / kanban", "Gists · Reactions", "Mentions · Notifications"]}
              </PlatformGroup>
              <PlatformGroup title="AI suite">
                {["Spec-to-PR from plain English", "AI code review on every PR", "AI auto-merge when gates pass", "PR triage · Issue triage", "Sleep Mode — ships overnight", "AI changelog · AI test stubs"]}
              </PlatformGroup>
              <PlatformGroup 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 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 title="Platform">
                {["Organizations · Teams · Roles", "npm package registry", "Pages / static hosting", "App marketplace", "Protected environments", "Billing · Quotas"]}
              </PlatformGroup>
              <PlatformGroup title="Observability">
                {["DORA metrics dashboard", "Developer velocity", "Repository health score", "Hot files heatmap", "Traffic analytics", "Org insights"]}
              </PlatformGroup>
              <PlatformGroup 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, and continues — you may never see it"
              />
              <PainRow
                problem="AI as a sidebar you talk at"
                fix="Claude has a bot account, makes commits, and 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">

              <AiFeature
                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={[
                  { icon: "●", color: "muted", text: "issue #42 labelled ai:build" },
                  { icon: "↗", color: "brand", text: "branch opened: feat/add-auth-provider" },
                  { icon: "↗", color: "brand", text: "PR #43 created — diff ready for review" },
                  { icon: "✓", color: "green", text: "gates queued — waiting on your approval" },
                ]}
              />

              <AiFeature
                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" }}
                mock={[
                  { icon: "C", color: "brand", text: "Claude review · PR #128" },
                  { icon: "  ", color: "muted", text: "auth.ts:84 — mutex guards refresh path ✓" },
                  { icon: "  ", color: "muted", text: "No security issues found" },
                  { icon: "✓", color: "green", text: "approved — auto-merging" },
                ]}
                reverse
              />

              <AiFeature
                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 of what shipped."
                link={{ href: "/sleep-mode", label: "See Sleep Mode" }}
                mock={[
                  { icon: "✉", color: "brand", text: "Your overnight digest — 9:00 AM" },
                  { icon: "✓", color: "green", text: "3 PRs auto-merged" },
                  { icon: "✓", color: "green", text: "1 feature built from issue #37" },
                  { icon: "✓", color: "green", text: "2 secrets auto-repaired before push" },
                ]}
              />

              <AiFeature
                n="04"
                title="Auto-repair on gate failure"
                body="When a gate fails, auto-repair runs: it 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. You see the problem only if the robot couldn't solve it."
                link={{ href: "/demo", label: "Watch a live repair" }}
                mock={[
                  { icon: "✗", color: "red", text: "gate: tests — 2 failing" },
                  { icon: "↗", color: "brand", text: "auto-repair: reading failure log" },
                  { icon: "↗", color: "brand", text: "patch drafted — +9 −3" },
                  { icon: "✓", color: "green", text: "gates re-run — all 412 passing" },
                ]}
                reverse
              />

            </div>
          </div>
        </section>

        {/* ── Security ───────────────────────────────────────────── */}
        <section class="lp-sec lp-sec-soft" id="security" aria-labelledby="lp-sec-h">
          <div class="lp-wrap">
            <div class="lp-sec-head">
              <div class="lp-kicker">Security</div>
              <h2 id="lp-sec-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, and Gemfile on every push. Critical findings open issues automatically."
              />
              <SecurityCard
                title="Push policy rulesets"
                body="Enforce commit message patterns, block file paths, cap file sizes, and forbid force-pushes — enforced at the HTTP layer, not advisory."
              />
              <SecurityCard
                title="Commit signature verification"
                body="GPG and SSH key registration with Verified badges on every commit. Full OpenPGP packet parsing, SSHSIG support, fingerprint matching."
              />
              <SecurityCard
                title="Enterprise-grade 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>

        {/* ── Developer 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 teaser ─────────────────────────────────────── */}
        <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>

        {/* ── One-command 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? 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" aria-label="One-line install command">
              <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>

        {/* ── Closing CTA ────────────────────────────────────────── */}
        <section class="lp-cta">
          <div class="lp-wrap lp-cta-in">
            <div class="lp-kicker">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-solid lp-btn-xl">
                Create your account
              </a>
              <a href="/import" class="lp-btn lp-btn-outline lp-btn-xl">
                Migrate a repo
              </a>
            </div>
            <div class="lp-cta-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>
          </div>
        </section>

        {/* ── Footer ─────────────────────────────────────────────── */}
        <footer class="lp-footer">
          <div class="lp-wrap lp-footer-in">
            <div class="lp-footer-brand">
              <a href="/" class="lp-logo">
                <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: copyJs }} />
      </body>
    </html>
  );
};

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

const LiveCard: FC<{ title: string; children?: any }> = ({ title, children }) => (
  <article class="lp-live-card">
    <h3 class="lp-live-card-title">{title}</h3>
    {children}
  </article>
);

const PlatformGroup: FC<{ title: string; children: string[] }> = ({ title, children }) => (
  <div class="lp-plat-group">
    <h3 class="lp-plat-title">{title}</h3>
    <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">
    <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>
);

interface MockLine { icon: string; color: "brand" | "green" | "red" | "muted"; text: string; }

const AiFeature: FC<{
  n: string;
  title: string;
  body: string;
  link: { href: string; label: string };
  mock: MockLine[];
  reverse?: boolean;
}> = ({ n, title, body, link, mock, reverse }) => (
  <div class={`lp-ai-feature${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">
      <div class="lp-mock-bar">
        <span class="lp-mock-dot" /><span class="lp-mock-dot" /><span class="lp-mock-dot" />
      </div>
      <div class="lp-mock-body">
        {mock.map((line) => (
          <div class={`lp-mock-line lp-mock-${line.color}`}>
            <span class="lp-mock-icon">{line.icon}</span>
            <span>{line.text}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const SecurityCard: FC<{ title: string; body: string }> = ({ title, body }) => (
  <div class="lp-sec-card">
    <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">
    <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">
    <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${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 copyJs = `
(function(){
  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;
    var text=el.textContent||'';
    navigator.clipboard.writeText(text.trim()).then(function(){
      var orig=btn.textContent;btn.textContent='Copied!';
      setTimeout(function(){btn.textContent=orig;},1500);
    }).catch(function(){});
  });
})();
`;

// Plain-JS poller for the live-now section. Hits the L3 endpoints every 30s.
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=(v instanceof Date)?v.getTime():(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.background='rgba(67,83,201,.06)';setTimeout(function(){n.style.background='';},1200);}
    });
  }
  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){}
})();
`;

// ─── 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-green:   #059669;
  --lp-red:     #dc2626;
  --lp-max:     1200px;
  --lp-r:       10px;
}
*{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}
img{display:block;max-width:100%}

/* ── 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:-.025em;
  color:var(--lp-ink)}
.lp-h2{font-family:'Inter Tight','Inter',sans-serif;font-weight:700;
  font-size:clamp(32px,4.5vw,52px);line-height:1.08;letter-spacing:-.022em;
  color:var(--lp-ink)}
.lp-h2-tight{font-size:clamp(28px,3.5vw,42px)}
.lp-kicker{font-size:13px;font-weight:600;letter-spacing:.06em;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:.88em;
  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:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .12s,box-shadow .2s,background .15s,border-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 6px 18px rgba(10,11,13,.22)}
.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 28px;font-size:17px;border-radius:14px}
.lp-btn-block{width:100%;justify-content:center}

/* ── badge ───────────────────────────────────────────────────────── */
.lp-badge{font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px}
.lp-badge-merged{color:var(--lp-green);background:rgba(5,150,105,.1)}

/* ── nav ─────────────────────────────────────────────────────────── */
.lp-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid transparent;
  transition:border-color .2s,background .2s}
.lp-nav.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:hover{color:var(--lp-ink)}
.lp-logo-mark{width:18px;height:18px;border-radius:6px;background:var(--lp-brand);display:inline-block}
.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;gap:0}
.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:13px;color:var(--lp-muted);margin-top:2px}
@media(max-width:900px){
  .lp-hero-in{grid-template-columns:1fr}
  .lp-hero-card{order:-1}
}

/* ── hero card mock ──────────────────────────────────────────────── */
.lp-hero-card{background:#fff;border:1px solid var(--lp-border);border-radius:16px;
  box-shadow:var(--lp-shadow);overflow:hidden}
.lp-hc-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
  border-bottom:1px solid var(--lp-border);background:var(--lp-soft)}
.lp-hc-dot{width:10px;height:10px;border-radius:50%;background:#d1d5db}
.lp-hc-path{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--lp-muted)}
.lp-hc-body{padding:18px}
.lp-hc-pr-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.lp-hc-title{font-size:14px;font-weight:600;color:var(--lp-ink)}
.lp-hc-review{display:flex;gap:10px;margin-bottom:14px}
.lp-hc-ava{width:30px;height:30px;border-radius:50%;background:var(--lp-brand);
  color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lp-hc-rev{flex:1}
.lp-hc-rev-head{font-size:12.5px;font-weight:600;color:var(--lp-ink-2);margin-bottom:4px}
.lp-hc-rev-head em{color:var(--lp-green);font-style:normal}
.lp-hc-rev-body{font-size:13px;color:var(--lp-ink-2);line-height:1.5}
.lp-hc-checks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lp-check{font-family:'JetBrains Mono',monospace;font-size:12px;padding:3px 8px;
  border-radius:5px;font-weight:500}
.lp-check-ok{color:var(--lp-green);background:rgba(5,150,105,.08)}
.lp-hc-meta{font-size:12px;color:var(--lp-muted);font-family:'JetBrains Mono',monospace}

/* ── 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)}

/* ── 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:10px;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)}
.lp-live-card-title{font-size:13px;font-weight:600;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}
.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-rel{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-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:#7c3aed;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:24px;display:flex;flex-direction:column;gap:12px}
.lp-plat-title{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--lp-brand)}
.lp-plat-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.lp-plat-list li{font-size:13.5px;color:var(--lp-ink-2)}

/* ── pain points ─────────────────────────────────────────────────── */
.lp-pain-table{display:flex;flex-direction:column;gap:0;
  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)}
.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:var(--lp-ink-2)}
.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:13px;font-weight:700;margin-top:2px;flex-shrink:0}
.lp-pain-no{color:var(--lp-red)}
.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:64px}
.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}
/* AI mock terminal */
.lp-ai-mock{background:#fff;border:1px solid var(--lp-border);border-radius:12px;
  overflow:hidden;box-shadow:var(--lp-shadow)}
.lp-mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
  border-bottom:1px solid var(--lp-border);background:var(--lp-soft)}
.lp-mock-dot{width:10px;height:10px;border-radius:50%;background:#d1d5db}
.lp-mock-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.lp-mock-line{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5}
.lp-mock-icon{font-family:'JetBrains Mono',monospace;font-size:12px;
  width:18px;text-align:center;flex-shrink:0;margin-top:1px}
.lp-mock-brand .lp-mock-icon,.lp-mock-brand span{color:var(--lp-brand)}
.lp-mock-green .lp-mock-icon,.lp-mock-green span{color:var(--lp-green)}
.lp-mock-red .lp-mock-icon,.lp-mock-red span{color:var(--lp-red)}
.lp-mock-muted .lp-mock-icon,.lp-mock-muted span{color:var(--lp-muted)}

/* ── 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 .15s,box-shadow .2s}
.lp-sec-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.07),0 20px 40px rgba(0,0,0,.06)}
.lp-sec-card-title{font-size:15px;font-weight:700;color:var(--lp-ink);margin-bottom:10px}
.lp-sec-card-body{font-size:14px;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)}
.lp-team-title{font-size:15px;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:14px;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}
.lp-eco-title{font-size:15px;font-weight:700;color:var(--lp-ink)}
.lp-eco-sub{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--lp-brand)}
.lp-eco-body{font-size:14px;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;
  gap:0;padding:12px 20px;background:var(--lp-soft);
  font-size:13px;font-weight:600;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;
  gap:0;padding:14px 20px;border-bottom:1px solid var(--lp-border);
  font-size:14.5px;align-items:center}
.lp-cmp-row:last-child{border-bottom:0}
.lp-cmp-ours{background:rgba(67,83,201,.025)}
.lp-cmp-feature{color:var(--lp-ink-2)}
.lp-cmp-them{color:var(--lp-muted);font-size:14px}
.lp-cmp-us{color:var(--lp-muted);font-size:14px}
.lp-cmp-us-hl{color:var(--lp-green);font-weight:600}
.lp-compare-foot{margin-top:16px}
@media(max-width:700px){
  .lp-compare-head,.lp-cmp-row{grid-template-columns:1fr 100px 100px}
  .lp-cmp-row{font-size:13px}
}

/* ── 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}
.lp-price-hl{border-color:var(--lp-brand)}
.lp-price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--lp-brand);color:#fff;font-size:12px;font-weight:700;
  padding:4px 12px;border-radius:999px}
.lp-price-tier{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;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:14px;color:var(--lp-muted)}
.lp-price-desc{font-size:14px;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:14px;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 section ─────────────────────────────────────────────── */
.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)}
.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:13px;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)}

/* ── closing CTA ─────────────────────────────────────────────────── */
.lp-cta{padding:96px 0;border-top:1px solid var(--lp-border)}
.lp-cta-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.lp-cta-in .lp-kicker{margin-bottom:16px}
.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:var(--lp-ink);margin-bottom:16px}
.lp-cta-sub{font-size:18px;color:var(--lp-ink-2);max-width:52ch;margin-bottom:32px}
.lp-cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.lp-cta-links{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--lp-muted)}
.lp-cta-links a{color:var(--lp-brand);font-weight:500}
.lp-cta-links span{color:var(--lp-border)}

/* ── footer ──────────────────────────────────────────────────────── */
.lp-footer{border-top:1px solid var(--lp-border);padding:64px 0 0}
.lp-footer-in{display:grid;grid-template-columns:280px 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:14px;color:var(--lp-muted);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:13px;font-weight:700;color:var(--lp-ink);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.lp-footer-col a{font-size:14px;color:var(--lp-muted);transition:color .15s}
.lp-footer-col a:hover{color:var(--lp-ink)}
.lp-footer-bottom{border-top:1px solid var(--lp-border);padding:20px 0}
.lp-footer-bottom-in{display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--lp-muted)}

/* ── nav stuck JS class ──────────────────────────────────────────── */
.lp-nav.lp-stuck{border-bottom-color:var(--lp-border)}
`;