Blame · Line-by-line history

`landing.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

landing.tsxBlame1428 lines · 1 contributor

Normal view Raw

2b821b7Claude	1	/**
	2	* Marketing landing page for logged-out visitors.
	3	*
958d26aClaude	4	* Editorial-Technical redesign — 2026.05.
	5	* Hero · trust strip · feature grid · workflow walkthrough ·
	6	* comparison · terminal · pricing teaser · closing CTA.
2b821b7Claude	7	*
958d26aClaude	8	* Pure presentational. Drops into <Layout user={null}>.
	9	* All styles scoped under `.landing-` so they don't bleed into app views.
2b821b7Claude	10	*/
	11
	12	import type { FC } from "hono/jsx";
	13
	14	export interface LandingPageProps {
	15	stats?: {
	16	publicRepos?: number;
	17	users?: number;
	18	};
	19	}
	20
4c47454Claude	21	export const LandingHero: FC<LandingPageProps> = ({ stats } = {}) => {
8e9f1d9Claude	22	const hasStats =
	23	stats &&
	24	((stats.publicRepos !== undefined && stats.publicRepos > 0) \|\|
	25	(stats.users !== undefined && stats.users > 0));
4c47454Claude	26
2b821b7Claude	27	return (
	28	<>
	29	<style>{landingCss}</style>
	30
4c47454Claude	31	<div class="landing-root">
	32	{/* ---------- Hero ---------- */}
	33	<section class="landing-hero">
958d26aClaude	34	<div class="landing-hero-bg" aria-hidden="true">
	35	<div class="landing-hero-blob landing-hero-blob-1" />
	36	<div class="landing-hero-blob landing-hero-blob-2" />
	37	<div class="landing-hero-grid" />
2b821b7Claude	38	</div>
958d26aClaude	39
	40	<div class="landing-hero-inner stagger">
	41	<div class="eyebrow landing-hero-eyebrow">
	42	<span class="landing-hero-pulse" />
	43	v1 · pre-launch · {new Date().getFullYear()}
	44	</div>
	45
	46	<h1 class="landing-hero-title display">
	47	Where software{" "}
	48	<span class="gradient-text">writes itself.</span>
	49	</h1>
	50
	51	<p class="landing-hero-sub">
	52	Gluecron is the operator-tier replacement for GitHub. Push code,
	53	and the platform reviews it, fixes it, ships it. Spec-to-PR. Auto-repair.
	54	Real-time gates. Built for the era when most code is written by AI
	55	and most reviews are too.
	56	</p>
	57
	58	<div class="landing-hero-ctas">
	59	<a href="/register" class="btn btn-primary btn-xl landing-cta-primary">
	60	Start shipping
	61	<span class="landing-cta-arrow" aria-hidden="true">{"→"}</span>
	62	</a>
	63	<a href="/explore" class="btn btn-secondary btn-xl">
	64	Explore repos
	65	</a>
	66	</div>
	67
	68	<p class="landing-hero-caption">
	69	Already have a repo?
	70	<span class="landing-hero-cmd">
	71	<span class="kbd">git</span>
	72	<span class="kbd">remote</span>
	73	<span class="kbd">add</span>
	74	<span class="kbd">gluecron</span>
	75	<span class="landing-hero-arrow">{"→"}</span>
	76	<span class="kbd">git push</span>
	77	</span>
	78	</p>
	79
	80	{hasStats && (
	81	<p class="landing-stats">
	82	{stats!.publicRepos !== undefined && stats!.publicRepos > 0 && (
	83	<span>
	84	<strong>{stats!.publicRepos.toLocaleString()}</strong>
	85	{stats!.publicRepos === 1 ? " repo" : " repos"}
	86	</span>
	87	)}
	88	{stats!.publicRepos !== undefined &&
	89	stats!.publicRepos > 0 &&
	90	stats!.users !== undefined &&
	91	stats!.users > 0 && <span class="landing-stats-sep">·</span>}
	92	{stats!.users !== undefined && stats!.users > 0 && (
	93	<span>
	94	<strong>{stats!.users.toLocaleString()}</strong>
	95	{stats!.users === 1 ? " developer" : " developers"}
	96	</span>
	97	)}
	98	<span class="landing-stats-sep">·</span>
4c47454Claude	99	<span>
958d26aClaude	100	<strong>100%</strong> AI-native
4c47454Claude	101	</span>
958d26aClaude	102	</p>
	103	)}
	104	</div>
c475ee6Claude	105
	106	{/* ---------- Hero product visual: live AI PR review ---------- */}
	107	<div class="landing-hero-visual" aria-hidden="true">
	108	<div class="hero-pr-card">
	109	<div class="hero-pr-header">
	110	<span class="hero-pr-dot" />
	111	<span class="hero-pr-title">
	112	<span class="hero-pr-num">#247</span>
	113	add: stripe checkout flow
	114	</span>
	115	<span class="hero-pr-status">
	116	<span class="hero-pr-status-pulse" />
	117	AI reviewing
	118	</span>
	119	</div>
	120	<div class="hero-pr-body">
	121	<div class="hero-pr-file">
	122	<span class="hero-pr-file-icon">{"●"}</span>
	123	<span class="hero-pr-file-name">src/billing/checkout.ts</span>
	124	<span class="hero-pr-file-stats">
	125	<span class="hero-pr-add">+12</span>
	126	<span class="hero-pr-del">{"−3"}</span>
	127	</span>
	128	</div>
	129	<div class="hero-pr-diff">
	130	<div class="hero-pr-hunk">@@ -42,6 +42,15 @@ export async function checkout(req)</div>
	131	<div class="hero-pr-line-add">+ const session = await stripe.checkout.sessions.create({"{"}</div>
	132	<div class="hero-pr-line-add">+ mode: 'subscription',</div>
	133	<div class="hero-pr-line-add">+ line_items: [{"{"} price: priceId, quantity: 1 {"}"}],</div>
	134	<div class="hero-pr-line-add">+ success_url: `${"$"}{"{"}{"BASE"}{"}"}/done`,</div>
	135	<div class="hero-pr-line-add">+ {"}"});</div>
	136	</div>
	137	</div>
	138	<div class="hero-pr-comment">
	139	<div class="hero-pr-bot-row">
	140	<span class="hero-pr-bot-avatar">{"✨"}</span>
	141	<span class="hero-pr-bot-name">claude-bot</span>
	142	<span class="hero-pr-bot-meta">commented · just now</span>
	143	</div>
	144	<p class="hero-pr-bot-text">
	145	Logic looks correct. One nit:{" "}
	146	<code>success_url</code> should validate session before
	147	redirecting — see{" "}
	148	<span class="hero-pr-bot-link">stripe-docs/refunds</span>.
	149	</p>
	150	</div>
	151	<div class="hero-pr-gates">
	152	<span class="hero-pr-gate hero-pr-gate-pass">
	153	{"✓"} GateTest
	154	</span>
	155	<span class="hero-pr-gate hero-pr-gate-pass">
	156	{"✓"} Secret scan
	157	</span>
	158	<span class="hero-pr-gate hero-pr-gate-pass">
	159	{"✓"} Tests · 1234 pass
	160	</span>
	161	<span class="hero-pr-gate hero-pr-gate-running">
	162	<span class="hero-pr-gate-spin" /> AI Review
	163	</span>
	164	</div>
	165	</div>
	166	{/* Floating accent badges to suggest depth */}
	167	<div class="hero-float hero-float-1">
	168	<span class="hero-float-icon">{"✨"}</span>
	169	spec-to-PR
	170	</div>
	171	<div class="hero-float hero-float-2">
	172	<span class="hero-float-icon">{"⚡"}</span>
	173	auto-repair active
	174	</div>
	175	</div>
958d26aClaude	176	</section>
	177
	178	{/* ---------- Trust strip ---------- */}
	179	<section class="landing-trust">
	180	<p class="landing-trust-label">Built for the new shape of software</p>
	181	<div class="landing-trust-row">
	182	<span class="landing-trust-item">Spec-to-PR</span>
	183	<span class="landing-trust-dot" aria-hidden="true" />
	184	<span class="landing-trust-item">Auto-repair</span>
	185	<span class="landing-trust-dot" aria-hidden="true" />
	186	<span class="landing-trust-item">Live gates</span>
	187	<span class="landing-trust-dot" aria-hidden="true" />
	188	<span class="landing-trust-item">MCP-native</span>
	189	<span class="landing-trust-dot" aria-hidden="true" />
	190	<span class="landing-trust-item">Workflow runner</span>
	191	<span class="landing-trust-dot" aria-hidden="true" />
	192	<span class="landing-trust-item">Self-hosted</span>
	193	</div>
4c47454Claude	194	</section>
	195
	196	{/* ---------- Feature grid ---------- */}
958d26aClaude	197	<section class="landing-section">
	198	<div class="section-header">
	199	<div class="eyebrow">The platform</div>
	200	<h2>An IDE for your repo, not just a host.</h2>
	201	<p>
	202	Gluecron ships the surfaces GitHub charges extra for, and the
	203	ones it never built. AI is a teammate with its own commits, not
	204	a sidebar.
2b821b7Claude	205	</p>
	206	</div>
4c47454Claude	207
958d26aClaude	208	<div class="landing-features stagger">
	209	<FeatureCard
	210	icon={
	211	<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
	212	<path d="M12 3l1.9 4.6L18.5 9l-3.6 3 1 4.8L12 14.5 8.1 16.8l1-4.8L5.5 9l4.6-1.4z" />
	213	</svg>
	214	}
	215	title="AI as a teammate"
	216	desc="Spec-to-PR drafts entire features from plain English. Auto-explain reviews every diff. The AI commits with its own bot account, visible in your history."
	217	/>
	218	<FeatureCard
	219	icon={
	220	<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
	221	<path d="M12 2.5l8 3.5v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5v-6z" />
	222	<path d="M9 12l2 2 4-4" />
	223	</svg>
	224	}
	225	title="Quality gate that learns"
	226	desc="GateTest scans every push. Auto-repair fixes regressions before you see them. Required checks block bad PRs from merging. Your software self-corrects."
	227	/>
	228	<FeatureCard
	229	icon={
	230	<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
	231	<path d="M13 2L4 14h7l-1 8 9-12h-7z" />
	232	</svg>
	233	}
	234	title="Real-time everything"
	235	desc="Live workflow logs over SSE. Live PR review presence. Live deploys you watch happen. No polling, no refresh, no waiting on a CI tab."
	236	/>
	237	<FeatureCard
	238	icon={
	239	<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
	240	<rect x="3" y="3" width="18" height="18" rx="3" />
	241	<path d="M3 9h18M9 21V9" />
	242	</svg>
	243	}
	244	title="Workflow runner"
	245	desc="Drop a yaml in `.gluecron/workflows/` and it runs on every push. Cron triggers, secret substitution, matrix runs, artifacts. No SaaS provider in the loop."
	246	/>
	247	<FeatureCard
	248	icon={
	249	<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
	250	<circle cx="12" cy="12" r="9" />
	251	<path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" />
	252	</svg>
	253	}
	254	title="MCP-native"
	255	desc="Claude, Cursor, Code — they speak Model Context Protocol. Gluecron exposes search, file read, issues, codebase explain as MCP tools by default."
	256	/>
	257	<FeatureCard
	258	icon={
	259	<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
	260	<path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
	261	<path d="M12 7v5l3 2" />
	262	</svg>
	263	}
	264	title="Yours, on your hardware"
	265	desc="Single-binary Bun runtime. Postgres + bare git repos on a volume. Deploy to Fly, Railway, your own VPS. No vendor lock, no surprise bills."
	266	/>
2b821b7Claude	267	</div>
958d26aClaude	268	</section>
2b821b7Claude	269
958d26aClaude	270	{/* ---------- Workflow walkthrough ---------- */}
	271	<section class="landing-section landing-walk">
	272	<div class="section-header">
	273	<div class="eyebrow">How it works</div>
	274	<h2>Push code. Watch it ship.</h2>
	275	<p>
	276	Every push triggers the same pipeline whether the commit came
	277	from you, from CI, or from an AI agent.
4c47454Claude	278	</p>
	279	</div>
958d26aClaude	280
	281	<div class="landing-walk-grid">
	282	<WalkStep n="01" title="Push" desc="git push to gluecron — Smart-HTTP, SSH, or via the web editor." />
	283	<WalkStep n="02" title="Gate" desc="GateTest runs. Secret scanner runs. AI security review posts inline comments." />
	284	<WalkStep n="03" title="Repair" desc="If a gate fails, auto-repair tries to fix it. New commit gets re-gated." />
	285	<WalkStep n="04" title="Ship" desc="Green push to default branch fires deploy webhook. Crontech, Fly, your prod." />
	286	</div>
4c47454Claude	287	</section>
2b821b7Claude	288
4c47454Claude	289	{/* ---------- Terminal block ---------- */}
958d26aClaude	290	<section class="landing-section landing-terminal-section">
	291	<div class="landing-terminal-wrap">
	292	<div class="landing-terminal" role="img" aria-label="Example git push to gluecron with passing gates">
	293	<div class="landing-terminal-chrome">
	294	<span class="landing-terminal-dot landing-terminal-dot-r" />
	295	<span class="landing-terminal-dot landing-terminal-dot-y" />
	296	<span class="landing-terminal-dot landing-terminal-dot-g" />
	297	<span class="landing-terminal-title">~/your-repo — zsh</span>
	298	</div>
	299	<div class="landing-terminal-body">
	300	<div class="landing-term-line">
	301	<span class="landing-term-prompt">$</span>
	302	<span>git remote add gluecron https://gluecron.com/you/your-repo.git</span>
	303	</div>
	304	<div class="landing-term-line">
	305	<span class="landing-term-prompt">$</span>
	306	<span>git push -u gluecron main</span>
	307	</div>
	308	<div class="landing-term-line landing-term-out">
	309	<span class="landing-term-meta">remote:</span>
	310	<span>Resolving deltas… 100% (24/24)</span>
	311	</div>
	312	<div class="landing-term-line landing-term-out landing-term-ok-line">
	313	<span class="landing-term-ok">{"✓"}</span>
	314	<span>pushed to gluecron.com/you/your-repo</span>
	315	</div>
	316	<div class="landing-term-line landing-term-out landing-term-ok-line">
	317	<span class="landing-term-ok">{"✓"}</span>
	318	<span>GateTest passed (12 rules, 0 violations)</span>
	319	</div>
	320	<div class="landing-term-line landing-term-out landing-term-ok-line">
	321	<span class="landing-term-ok">{"✓"}</span>
	322	<span>AI review posted (2 suggestions, 0 blockers)</span>
	323	</div>
	324	<div class="landing-term-line landing-term-out landing-term-ok-line">
	325	<span class="landing-term-ok">{"✓"}</span>
	326	<span>deployed to your-repo.gluecron.com <span class="landing-term-meta">(4.1s)</span></span>
	327	</div>
	328	<div class="landing-term-line landing-term-cursor">
	329	<span class="landing-term-prompt">$</span>
	330	<span class="landing-term-blink">▍</span>
	331	</div>
	332	</div>
4c47454Claude	333	</div>
958d26aClaude	334	</div>
	335	</section>
	336
	337	{/* ---------- Comparison ---------- */}
	338	<section class="landing-section">
	339	<div class="section-header">
	340	<div class="eyebrow">vs the incumbent</div>
	341	<h2>Everything GitHub charges for. And the parts they didn't build.</h2>
	342	</div>
	343
	344	<div class="landing-compare">
	345	<CompareRow feature="Git hosting + Smart-HTTP push" them="✓" us="✓" />
	346	<CompareRow feature="Issues, PRs, code review" them="✓" us="✓" />
	347	<CompareRow feature="Workflow runner (Actions-equivalent)" them="paid minutes" us="self-hosted, unmetered" highlight />
	348	<CompareRow feature="AI code review on every PR" them="Copilot subscription" us="built in" highlight />
	349	<CompareRow feature="Spec-to-PR (NL feature → draft PR)" them="—" us="✓" highlight />
	350	<CompareRow feature="Auto-repair on failed gates" them="—" us="✓" highlight />
	351	<CompareRow feature="Real-time SSE for logs + PRs" them="polling" us="streaming" highlight />
	352	<CompareRow feature="MCP server (Claude / Cursor)" them="—" us="✓" highlight />
	353	<CompareRow feature="Self-host on your own infra" them="enterprise tier" us="single binary" highlight />
	354	<CompareRow feature="Pre-receive policy enforcement" them="rulesets (GHE)" us="✓" />
	355	</div>
	356	</section>
	357
	358	{/* ---------- Pricing teaser ---------- */}
	359	<section class="landing-section">
	360	<div class="section-header">
	361	<div class="eyebrow">Pricing</div>
	362	<h2>Free to start. Honest at scale.</h2>
	363	<p>
	364	Self-hosting is free forever. Hosted plans price the AI calls,
	365	not the seats.
	366	</p>
	367	</div>
	368
	369	<div class="landing-pricing">
	370	<PricingCard
	371	tier="Free"
	372	price="$0"
	373	cadence="forever"
	374	desc="For personal projects + open source. Public + private repos, full AI suite, fair quotas."
	375	features={["Unlimited public repos", "3 private repos", "5K AI calls / mo", "Community support"]}
	376	cta="Start free"
	377	href="/register"
	378	/>
	379	<PricingCard
	380	tier="Pro"
	381	price="$12"
	382	cadence="per user / mo"
	383	desc="For working developers. Lifts every quota, adds priority routing, no Gluecron branding on deploys."
	384	features={["Unlimited private repos", "100K AI calls / mo", "Priority queue", "Custom domains"]}
	385	cta="Go Pro"
	386	href="/settings/billing"
	387	highlight
	388	/>
	389	<PricingCard
	390	tier="Team"
	391	price="Talk to us"
	392	cadence="custom"
	393	desc="For orgs running production on Gluecron. SSO, audit retention, enterprise SLA, on-prem."
	394	features={["SSO + SCIM", "On-prem deploy", "Dedicated capacity", "24/7 incident response"]}
	395	cta="Contact"
	396	href="mailto:hello@gluecron.com"
	397	/>
	398	</div>
	399	</section>
	400
	401	{/* ---------- Closing CTA ---------- */}
	402	<section class="landing-cta-section">
	403	<div class="landing-cta-card">
	404	<div class="landing-cta-bg" aria-hidden="true" />
	405	<div class="eyebrow">Ready when you are</div>
	406	<h2 class="landing-cta-title">
	407	Stop maintaining the platform.<br />
	408	<span class="gradient-text">Start shipping the product.</span>
	409	</h2>
	410	<p class="landing-cta-sub">
	411	Free to start, self-hosted-friendly, MCP-native. Migrate from
	412	GitHub in one click.
	413	</p>
	414	<div class="landing-cta-buttons">
	415	<a href="/register" class="btn btn-primary btn-xl">
	416	Create your account
	417	<span class="landing-cta-arrow" aria-hidden="true">{"→"}</span>
	418	</a>
	419	<a href="/import" class="btn btn-ghost btn-xl">
	420	Migrate a repo
	421	</a>
4c47454Claude	422	</div>
	423	</div>
	424	</section>
	425	</div>
2b821b7Claude	426	</>
	427	);
	428	};
	429
958d26aClaude	430	const FeatureCard: FC<{ icon: any; title: string; desc: string }> = ({
	431	icon,
	432	title,
	433	desc,
	434	}) => (
	435	<div class="landing-feature">
	436	<div class="landing-feature-icon" aria-hidden="true">
	437	{icon}
	438	</div>
	439	<h3 class="landing-feature-title">{title}</h3>
	440	<p class="landing-feature-desc">{desc}</p>
	441	</div>
	442	);
	443
	444	const WalkStep: FC<{ n: string; title: string; desc: string }> = ({
	445	n,
	446	title,
	447	desc,
	448	}) => (
	449	<div class="landing-walk-step">
	450	<div class="landing-walk-num">{n}</div>
	451	<h3 class="landing-walk-title">{title}</h3>
	452	<p class="landing-walk-desc">{desc}</p>
	453	</div>
	454	);
	455
	456	const CompareRow: FC<{
	457	feature: string;
	458	them: string;
	459	us: string;
	460	highlight?: boolean;
	461	}> = ({ feature, them, us, highlight }) => (
	462	<div class={`landing-compare-row${highlight ? " landing-compare-hl" : ""}`}>
	463	<div class="landing-compare-feature">{feature}</div>
	464	<div class="landing-compare-them">{them}</div>
	465	<div class="landing-compare-us">{us === "✓" ? "✓" : us}</div>
	466	</div>
	467	);
	468
	469	const PricingCard: FC<{
	470	tier: string;
	471	price: string;
	472	cadence: string;
	473	desc: string;
	474	features: string[];
	475	cta: string;
	476	href: string;
	477	highlight?: boolean;
	478	}> = ({ tier, price, cadence, desc, features, cta, href, highlight }) => (
	479	<div class={`landing-price-card${highlight ? " landing-price-hl" : ""}`}>
	480	{highlight && <div class="landing-price-badge">Most popular</div>}
	481	<div class="landing-price-tier">{tier}</div>
	482	<div class="landing-price-amount">
	483	<span class="landing-price-num">{price}</span>
	484	<span class="landing-price-cad">{cadence}</span>
	485	</div>
	486	<p class="landing-price-desc">{desc}</p>
	487	<ul class="landing-price-features">
	488	{features.map((f) => (
	489	<li>
	490	<span class="landing-price-check" aria-hidden="true">{"✓"}</span>
	491	{f}
	492	</li>
	493	))}
	494	</ul>
	495	<a
	496	href={href}
	497	class={`btn ${highlight ? "btn-primary" : "btn-secondary"} btn-block landing-price-cta`}
	498	>
	499	{cta}
	500	</a>
	501	</div>
	502	);
	503
4c47454Claude	504	// Backwards-compatible default — web.tsx imports `LandingPage`.
	505	export const LandingPage: FC<LandingPageProps> = (props) => (
	506	<LandingHero {...props} />
2b821b7Claude	507	);
	508
4c47454Claude	509	export default LandingPage;
	510
2b821b7Claude	511	const landingCss = `
958d26aClaude	512	/* ============================================================ */
	513	/* Landing — Editorial-Technical 2026.05 */
	514	/* ============================================================ */
4c47454Claude	515	.landing-root {
	516	position: relative;
958d26aClaude	517	max-width: 1180px;
4c47454Claude	518	margin: 0 auto;
	519	padding: 0 16px;
958d26aClaude	520	}
	521	.landing-root > section { position: relative; }
	522
	523	/* ---------- Hero ---------- */
	524	.landing-hero {
	525	position: relative;
c475ee6Claude	526	padding: var(--s-16) 0 var(--s-20);
958d26aClaude	527	text-align: center;
4c47454Claude	528	overflow: hidden;
	529	}
c475ee6Claude	530	.landing-hero-blob-1 {
	531	animation: hero-blob-drift-1 18s var(--ease, ease) infinite alternate;
	532	}
	533	.landing-hero-blob-2 {
	534	animation: hero-blob-drift-2 22s var(--ease, ease) infinite alternate;
	535	}
	536	@keyframes hero-blob-drift-1 {
	537	0% { transform: translate(0, 0) scale(1); opacity: 0.55; }
	538	100% { transform: translate(8%, 6%) scale(1.18); opacity: 0.75; }
	539	}
	540	@keyframes hero-blob-drift-2 {
	541	0% { transform: translate(0, 0) scale(1); opacity: 0.40; }
	542	100% { transform: translate(-10%, -4%) scale(1.25); opacity: 0.60; }
	543	}
	544
	545	/* ---------- Hero product visual: live AI PR review card ---------- */
	546	.landing-hero-visual {
	547	position: relative;
	548	max-width: 760px;
	549	margin: var(--s-12) auto 0;
	550	padding: 0 16px;
	551	perspective: 1400px;
	552	z-index: 2;
	553	opacity: 0;
	554	animation: hero-visual-in 700ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 400ms forwards;
	555	}
	556	@keyframes hero-visual-in {
	557	from { opacity: 0; transform: translateY(20px); }
	558	to { opacity: 1; transform: translateY(0); }
	559	}
	560	.hero-pr-card {
	561	position: relative;
	562	background: linear-gradient(180deg, rgba(15,17,26,0.96) 0%, rgba(8,9,15,0.96) 100%);
	563	border: 1px solid var(--border-strong);
	564	border-radius: var(--r-xl);
	565	overflow: hidden;
	566	text-align: left;
	567	box-shadow:
	568	0 30px 80px -20px rgba(0,0,0,0.65),
	569	0 0 0 1px rgba(140,109,255,0.18),
	570	0 0 60px -10px rgba(140,109,255,0.30);
	571	transform: rotateX(2deg) rotateY(-2deg);
	572	transition: transform 600ms var(--ease, ease);
	573	backdrop-filter: blur(12px);
	574	-webkit-backdrop-filter: blur(12px);
	575	}
	576	.landing-hero-visual:hover .hero-pr-card {
	577	transform: rotateX(0deg) rotateY(0deg);
	578	}
	579	.hero-pr-card::before {
	580	content: '';
	581	position: absolute;
	582	inset: 0;
	583	background: linear-gradient(135deg, rgba(140,109,255,0.10), transparent 35%, transparent 65%, rgba(54,197,214,0.08));
	584	pointer-events: none;
	585	}
	586	.hero-pr-header {
	587	display: flex;
	588	align-items: center;
	589	gap: 12px;
	590	padding: 14px 18px;
	591	border-bottom: 1px solid rgba(255,255,255,0.06);
	592	background: rgba(255,255,255,0.025);
	593	font-size: 13px;
	594	}
	595	.hero-pr-dot {
	596	width: 10px; height: 10px;
	597	border-radius: 50%;
	598	background: var(--green);
	599	box-shadow: 0 0 10px rgba(52,211,153,0.6);
	600	flex-shrink: 0;
	601	}
	602	.hero-pr-title {
	603	color: var(--text-strong);
	604	font-weight: 600;
	605	flex: 1;
	606	overflow: hidden;
	607	text-overflow: ellipsis;
	608	white-space: nowrap;
	609	}
	610	.hero-pr-num {
	611	color: var(--text-faint);
	612	font-family: var(--font-mono);
	613	font-weight: 500;
	614	margin-right: 8px;
	615	}
	616	.hero-pr-status {
	617	display: inline-flex;
	618	align-items: center;
	619	gap: 6px;
	620	padding: 3px 10px;
	621	border-radius: var(--r-full);
	622	background: var(--accent-gradient-faint);
	623	border: 1px solid rgba(140,109,255,0.30);
	624	color: var(--accent);
	625	font-family: var(--font-mono);
	626	font-size: 11px;
	627	letter-spacing: 0.04em;
	628	flex-shrink: 0;
	629	}
	630	.hero-pr-status-pulse {
	631	width: 6px; height: 6px;
	632	border-radius: 50%;
	633	background: var(--accent);
	634	box-shadow: 0 0 0 0 rgba(140,109,255,0.6);
	635	animation: hero-pulse 1.6s ease-out infinite;
	636	}
	637	@keyframes hero-pulse {
	638	0% { box-shadow: 0 0 0 0 rgba(140,109,255,0.55); }
	639	70% { box-shadow: 0 0 0 8px rgba(140,109,255,0); }
	640	100% { box-shadow: 0 0 0 0 rgba(140,109,255,0); }
	641	}
	642
	643	.hero-pr-body {
	644	padding: 0;
	645	}
	646	.hero-pr-file {
	647	display: flex;
	648	align-items: center;
	649	gap: 10px;
	650	padding: 10px 18px;
	651	border-bottom: 1px solid rgba(255,255,255,0.05);
	652	font-family: var(--font-mono);
	653	font-size: 12px;
	654	background: rgba(255,255,255,0.012);
	655	}
	656	.hero-pr-file-icon { color: var(--accent-2); }
	657	.hero-pr-file-name { color: var(--text); flex: 1; }
	658	.hero-pr-file-stats { display: inline-flex; gap: 8px; }
	659	.hero-pr-add { color: var(--green); font-weight: 600; }
	660	.hero-pr-del { color: var(--red); font-weight: 600; }
	661
	662	.hero-pr-diff {
	663	padding: 12px 18px;
	664	font-family: var(--font-mono);
	665	font-feature-settings: var(--mono-feat, 'calt');
	666	font-size: 12.5px;
	667	line-height: 1.7;
	668	color: rgba(237,237,242,0.85);
	669	overflow-x: auto;
	670	}
	671	.hero-pr-hunk {
	672	color: rgba(140,109,255,0.85);
	673	background: rgba(140,109,255,0.06);
	674	padding: 2px 8px;
	675	margin: 0 -8px 4px;
	676	border-radius: 4px;
	677	}
	678	.hero-pr-line-add {
	679	background: rgba(52,211,153,0.08);
	680	color: rgba(167,243,208,0.95);
	681	padding: 0 8px;
	682	margin: 0 -8px;
	683	border-left: 2px solid var(--green);
	684	padding-left: 8px;
	685	}
	686
	687	.hero-pr-comment {
	688	margin: 14px 18px;
	689	padding: 14px 16px;
	690	background: linear-gradient(135deg, rgba(140,109,255,0.08), rgba(54,197,214,0.05));
	691	border: 1px solid rgba(140,109,255,0.25);
	692	border-radius: var(--r-md);
	693	}
	694	.hero-pr-bot-row {
	695	display: flex;
	696	align-items: center;
	697	gap: 8px;
	698	margin-bottom: 8px;
	699	font-size: 12px;
	700	}
	701	.hero-pr-bot-avatar {
	702	width: 22px; height: 22px;
	703	display: inline-flex;
	704	align-items: center;
	705	justify-content: center;
	706	border-radius: 50%;
	707	background: var(--accent-gradient);
	708	font-size: 11px;
	709	box-shadow: 0 0 12px rgba(140,109,255,0.40);
	710	}
	711	.hero-pr-bot-name {
	712	color: var(--text-strong);
	713	font-weight: 600;
	714	}
	715	.hero-pr-bot-meta {
	716	color: var(--text-faint);
	717	font-family: var(--font-mono);
	718	}
	719	.hero-pr-bot-text {
	720	color: var(--text);
	721	font-size: 13px;
	722	line-height: 1.55;
	723	margin: 0;
	724	}
	725	.hero-pr-bot-text code {
	726	background: rgba(255,255,255,0.06);
	727	border: 1px solid rgba(255,255,255,0.10);
	728	padding: 1px 6px;
	729	border-radius: 4px;
	730	font-size: 11.5px;
	731	color: var(--accent);
	732	}
	733	.hero-pr-bot-link { color: var(--accent-2); text-decoration: underline; text-decoration-style: dotted; }
	734
	735	.hero-pr-gates {
	736	display: flex;
	737	flex-wrap: wrap;
	738	gap: 6px;
	739	padding: 12px 18px 16px;
	740	border-top: 1px solid rgba(255,255,255,0.06);
	741	background: rgba(255,255,255,0.012);
	742	}
	743	.hero-pr-gate {
	744	display: inline-flex;
	745	align-items: center;
	746	gap: 6px;
	747	padding: 4px 10px;
	748	border-radius: var(--r-full);
	749	font-family: var(--font-mono);
	750	font-size: 11px;
	751	border: 1px solid;
	752	}
	753	.hero-pr-gate-pass {
	754	color: var(--green);
	755	background: rgba(52,211,153,0.08);
	756	border-color: rgba(52,211,153,0.30);
	757	}
	758	.hero-pr-gate-running {
	759	color: var(--accent);
	760	background: var(--accent-gradient-faint);
	761	border-color: rgba(140,109,255,0.40);
	762	}
	763	.hero-pr-gate-spin {
	764	width: 9px; height: 9px;
	765	border: 1.5px solid rgba(140,109,255,0.30);
	766	border-top-color: var(--accent);
	767	border-radius: 50%;
	768	animation: hero-spin 800ms linear infinite;
	769	}
	770	@keyframes hero-spin {
	771	to { transform: rotate(360deg); }
	772	}
	773
	774	/* Floating accent badges around the card */
	775	.hero-float {
	776	position: absolute;
	777	display: inline-flex;
	778	align-items: center;
	779	gap: 6px;
	780	padding: 6px 12px;
	781	background: rgba(15,17,26,0.92);
	782	border: 1px solid rgba(140,109,255,0.35);
	783	border-radius: var(--r-full);
	784	font-family: var(--font-mono);
	785	font-size: 11px;
	786	color: var(--text);
	787	box-shadow: 0 12px 24px -8px rgba(0,0,0,0.5), 0 0 18px -4px rgba(140,109,255,0.30);
	788	backdrop-filter: blur(8px);
	789	-webkit-backdrop-filter: blur(8px);
	790	}
	791	.hero-float-icon { color: var(--accent); }
	792	.hero-float-1 {
	793	top: -14px;
	794	left: -8px;
	795	animation: hero-float-bob-1 5s var(--ease, ease) infinite alternate;
	796	}
	797	.hero-float-2 {
	798	bottom: -14px;
	799	right: -8px;
	800	animation: hero-float-bob-2 6s var(--ease, ease) infinite alternate;
	801	}
	802	@keyframes hero-float-bob-1 {
	803	from { transform: translate(0, 0); }
	804	to { transform: translate(-8px, -10px); }
	805	}
	806	@keyframes hero-float-bob-2 {
	807	from { transform: translate(0, 0); }
	808	to { transform: translate(8px, 8px); }
	809	}
	810
	811	@media (max-width: 720px) {
	812	.landing-hero-visual { padding: 0 8px; }
	813	.hero-pr-card { transform: none; }
	814	.hero-pr-title { font-size: 12px; }
	815	.hero-pr-diff { font-size: 11px; line-height: 1.6; }
	816	.hero-float { display: none; }
	817	}
958d26aClaude	818	.landing-hero-bg {
	819	position: absolute;
	820	inset: -10% -20%;
	821	pointer-events: none;
	822	z-index: 0;
4c47454Claude	823	}
958d26aClaude	824	.landing-hero-blob {
	825	position: absolute;
	826	border-radius: 50%;
	827	filter: blur(80px);
	828	opacity: 0.55;
	829	}
	830	.landing-hero-blob-1 {
	831	top: -10%;
	832	left: 30%;
	833	width: 480px;
	834	height: 480px;
	835	background: radial-gradient(circle, rgba(140,109,255,0.55), transparent 65%);
	836	}
	837	.landing-hero-blob-2 {
	838	top: 10%;
	839	left: 50%;
	840	width: 380px;
	841	height: 380px;
	842	background: radial-gradient(circle, rgba(54,197,214,0.40), transparent 65%);
	843	}
	844	.landing-hero-grid {
4c47454Claude	845	position: absolute;
	846	inset: 0;
958d26aClaude	847	background-image:
	848	linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
	849	linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
	850	background-size: 60px 60px;
	851	mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000 0%, transparent 75%);
	852	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000 0%, transparent 75%);
	853	}
	854	:root[data-theme='light'] .landing-hero-grid {
	855	background-image:
	856	linear-gradient(to right, rgba(15,16,28,0.06) 1px, transparent 1px),
	857	linear-gradient(to bottom, rgba(15,16,28,0.06) 1px, transparent 1px);
4c47454Claude	858	}
	859
958d26aClaude	860	.landing-hero-inner {
	861	position: relative;
	862	z-index: 1;
	863	max-width: 960px;
2b821b7Claude	864	margin: 0 auto;
	865	}
958d26aClaude	866	.landing-hero-eyebrow {
	867	margin: 0 auto var(--s-6);
	868	color: var(--accent);
	869	}
	870	.landing-hero-eyebrow::before { display: none; }
	871	.landing-hero-pulse {
	872	width: 7px;
	873	height: 7px;
	874	border-radius: 50%;
	875	background: var(--accent);
	876	box-shadow: 0 0 0 0 rgba(140,109,255,0.6);
	877	animation: pulse 1.8s ease-out infinite;
	878	flex-shrink: 0;
	879	}
	880	@keyframes pulse {
	881	0% { box-shadow: 0 0 0 0 rgba(140,109,255,0.55); }
	882	70% { box-shadow: 0 0 0 10px rgba(140,109,255,0); }
	883	100% { box-shadow: 0 0 0 0 rgba(140,109,255,0); }
	884	}
	885
2b821b7Claude	886	.landing-hero-title {
958d26aClaude	887	font-size: clamp(44px, 8vw, 92px);
	888	line-height: 0.98;
	889	letter-spacing: -0.04em;
4c47454Claude	890	font-weight: 600;
958d26aClaude	891	margin: 0 0 var(--s-6);
	892	color: var(--text-strong);
2b821b7Claude	893	}
958d26aClaude	894
2b821b7Claude	895	.landing-hero-sub {
958d26aClaude	896	font-size: clamp(15px, 1.6vw, 19px);
2b821b7Claude	897	color: var(--text-muted);
958d26aClaude	898	max-width: 680px;
	899	margin: 0 auto;
4c47454Claude	900	line-height: 1.55;
958d26aClaude	901	letter-spacing: -0.005em;
2b821b7Claude	902	}
4c47454Claude	903
2b821b7Claude	904	.landing-hero-ctas {
	905	display: flex;
958d26aClaude	906	gap: 12px;
2b821b7Claude	907	justify-content: center;
	908	flex-wrap: wrap;
958d26aClaude	909	margin-top: var(--s-10);
2b821b7Claude	910	}
958d26aClaude	911	.landing-cta-arrow {
	912	transition: transform var(--t-base) var(--ease-spring);
	913	display: inline-block;
2b821b7Claude	914	}
958d26aClaude	915	.btn:hover .landing-cta-arrow,
	916	.landing-cta-primary:hover .landing-cta-arrow {
	917	transform: translateX(4px);
8e9f1d9Claude	918	}
2b821b7Claude	919
4c47454Claude	920	.landing-hero-caption {
958d26aClaude	921	margin-top: var(--s-8);
	922	font-size: var(--t-sm);
4c47454Claude	923	color: var(--text-muted);
958d26aClaude	924	display: flex;
	925	flex-wrap: wrap;
	926	align-items: center;
	927	justify-content: center;
	928	gap: 12px;
2b821b7Claude	929	}
958d26aClaude	930	.landing-hero-cmd {
	931	display: inline-flex;
	932	align-items: center;
	933	gap: 4px;
	934	padding: 6px 12px;
	935	background: var(--bg-elevated);
4c47454Claude	936	border: 1px solid var(--border);
958d26aClaude	937	border-radius: var(--r-full);
	938	box-shadow: var(--elev-1);
	939	}
	940	.landing-hero-cmd .kbd {
	941	border: 0;
	942	background: transparent;
	943	padding: 0 4px;
	944	color: var(--text-muted);
	945	font-size: 12px;
	946	}
	947	.landing-hero-cmd .kbd:nth-last-of-type(1) { color: var(--accent); }
	948	.landing-hero-arrow {
	949	color: var(--text-faint);
	950	font-size: 13px;
	951	margin: 0 2px;
2b821b7Claude	952	}
4c47454Claude	953
	954	.landing-stats {
958d26aClaude	955	margin-top: var(--s-7);
	956	font-family: var(--font-mono);
	957	font-size: 12px;
	958	color: var(--text-muted);
	959	display: flex;
	960	align-items: center;
	961	justify-content: center;
	962	gap: 10px;
	963	flex-wrap: wrap;
	964	letter-spacing: 0.02em;
	965	}
	966	.landing-stats strong {
	967	color: var(--text-strong);
	968	font-weight: 600;
	969	font-feature-settings: 'tnum';
	970	}
	971	.landing-stats-sep { opacity: 0.4; }
	972
	973	/* ---------- Trust strip ---------- */
	974	.landing-trust {
	975	margin: var(--s-8) auto var(--s-16);
	976	padding: var(--s-7) 0;
	977	border-top: 1px solid var(--border-subtle);
	978	border-bottom: 1px solid var(--border-subtle);
	979	text-align: center;
	980	}
	981	.landing-trust-label {
	982	font-family: var(--font-mono);
	983	font-size: 11px;
	984	text-transform: uppercase;
	985	letter-spacing: 0.18em;
	986	color: var(--text-faint);
	987	margin-bottom: var(--s-4);
	988	}
	989	.landing-trust-row {
	990	display: flex;
	991	align-items: center;
	992	justify-content: center;
	993	gap: 16px;
	994	flex-wrap: wrap;
	995	}
	996	.landing-trust-item {
	997	font-family: var(--font-display);
	998	font-size: 17px;
	999	font-weight: 500;
	1000	letter-spacing: -0.015em;
2b821b7Claude	1001	color: var(--text-muted);
958d26aClaude	1002	transition: color var(--t-fast) var(--ease);
2b821b7Claude	1003	}
958d26aClaude	1004	.landing-trust-item:hover { color: var(--text-strong); }
	1005	.landing-trust-dot {
	1006	width: 4px;
	1007	height: 4px;
	1008	border-radius: 50%;
	1009	background: var(--text-faint);
	1010	opacity: 0.5;
	1011	}
	1012
	1013	/* ---------- Section base ---------- */
	1014	.landing-section { margin: var(--s-20) auto; }
2b821b7Claude	1015
4c47454Claude	1016	/* ---------- Feature grid ---------- */
	1017	.landing-features {
2b821b7Claude	1018	display: grid;
	1019	grid-template-columns: repeat(3, 1fr);
958d26aClaude	1020	gap: 16px;
2b821b7Claude	1021	}
	1022	.landing-feature {
958d26aClaude	1023	background: var(--bg-elevated);
2b821b7Claude	1024	border: 1px solid var(--border);
958d26aClaude	1025	border-radius: var(--r-lg);
	1026	padding: var(--s-7);
	1027	position: relative;
	1028	overflow: hidden;
	1029	isolation: isolate;
	1030	transition:
	1031	transform var(--t-base) var(--ease-out-quart),
	1032	border-color var(--t-base) var(--ease),
	1033	box-shadow var(--t-base) var(--ease);
	1034	}
	1035	.landing-feature::before {
	1036	content: '';
	1037	position: absolute;
	1038	inset: 0;
	1039	background: radial-gradient(120% 100% at 0% 0%, rgba(140,109,255,0.08), transparent 55%);
	1040	opacity: 0;
	1041	transition: opacity var(--t-base) var(--ease);
	1042	z-index: -1;
4c47454Claude	1043	}
	1044	.landing-feature:hover {
958d26aClaude	1045	transform: translateY(-3px);
	1046	border-color: var(--border-strong);
	1047	box-shadow: var(--elev-2);
2b821b7Claude	1048	}
958d26aClaude	1049	.landing-feature:hover::before { opacity: 1; }
2b821b7Claude	1050	.landing-feature-icon {
4c47454Claude	1051	display: inline-flex;
	1052	align-items: center;
	1053	justify-content: center;
958d26aClaude	1054	width: 40px;
	1055	height: 40px;
	1056	border-radius: var(--r);
	1057	background: var(--accent-gradient-soft);
	1058	color: var(--accent);
	1059	margin-bottom: var(--s-4);
	1060	border: 1px solid rgba(140,109,255,0.20);
2b821b7Claude	1061	}
	1062	.landing-feature-title {
958d26aClaude	1063	font-family: var(--font-display);
	1064	font-size: 19px;
	1065	font-weight: 600;
	1066	letter-spacing: -0.018em;
	1067	margin: 0 0 var(--s-2);
	1068	color: var(--text-strong);
2b821b7Claude	1069	}
	1070	.landing-feature-desc {
958d26aClaude	1071	font-size: var(--t-sm);
	1072	color: var(--text-muted);
	1073	line-height: 1.6;
	1074	margin: 0;
	1075	}
	1076
	1077	/* ---------- Walkthrough ---------- */
	1078	.landing-walk-grid {
	1079	display: grid;
	1080	grid-template-columns: repeat(4, 1fr);
	1081	gap: 16px;
	1082	counter-reset: walk;
	1083	}
	1084	.landing-walk-step {
	1085	position: relative;
	1086	padding: var(--s-7) var(--s-6) var(--s-6);
	1087	background: var(--bg-elevated);
	1088	border: 1px solid var(--border);
	1089	border-radius: var(--r-lg);
	1090	}
	1091	.landing-walk-step::after {
	1092	content: '';
	1093	position: absolute;
	1094	top: 50%;
	1095	right: -12px;
	1096	width: 12px;
	1097	height: 1px;
	1098	background: var(--border-strong);
	1099	}
	1100	.landing-walk-step:last-child::after { display: none; }
	1101	.landing-walk-num {
	1102	display: inline-block;
	1103	font-family: var(--font-mono);
	1104	font-size: 11px;
	1105	color: var(--accent);
	1106	background: var(--accent-gradient-faint);
	1107	border: 1px solid rgba(140,109,255,0.30);
	1108	padding: 3px 8px;
	1109	border-radius: var(--r-full);
	1110	letter-spacing: 0.06em;
	1111	margin-bottom: var(--s-3);
	1112	}
	1113	.landing-walk-title {
	1114	font-family: var(--font-display);
	1115	font-size: 22px;
	1116	font-weight: 600;
	1117	letter-spacing: -0.022em;
	1118	margin: 0 0 var(--s-2);
	1119	color: var(--text-strong);
	1120	}
	1121	.landing-walk-desc {
	1122	font-size: var(--t-sm);
2b821b7Claude	1123	color: var(--text-muted);
	1124	line-height: 1.55;
	1125	margin: 0;
	1126	}
	1127
958d26aClaude	1128	/* ---------- Terminal ---------- */
	1129	.landing-terminal-section { margin-top: var(--s-16); }
4c47454Claude	1130	.landing-terminal-wrap {
	1131	display: flex;
2b821b7Claude	1132	justify-content: center;
	1133	}
4c47454Claude	1134	.landing-terminal {
	1135	width: 100%;
958d26aClaude	1136	max-width: 820px;
	1137	background: linear-gradient(180deg, #0a0b12 0%, #06070c 100%);
	1138	border: 1px solid var(--border-strong);
	1139	border-radius: var(--r-lg);
	1140	overflow: hidden;
	1141	box-shadow: var(--elev-3), 0 0 60px -10px rgba(140,109,255,0.18);
4c47454Claude	1142	text-align: left;
2b821b7Claude	1143	}
958d26aClaude	1144	:root[data-theme='light'] .landing-terminal {
	1145	background: linear-gradient(180deg, #0f111a 0%, #06070c 100%);
	1146	}
	1147	.landing-terminal-chrome {
	1148	display: flex;
	1149	align-items: center;
	1150	gap: 7px;
	1151	padding: 11px 14px;
	1152	background: rgba(255,255,255,0.025);
	1153	border-bottom: 1px solid rgba(255,255,255,0.06);
	1154	position: relative;
	1155	}
	1156	.landing-terminal-dot {
	1157	width: 11px;
	1158	height: 11px;
	1159	border-radius: 50%;
	1160	flex-shrink: 0;
	1161	}
	1162	.landing-terminal-dot-r { background: #ff5f57; }
	1163	.landing-terminal-dot-y { background: #febc2e; }
	1164	.landing-terminal-dot-g { background: #28c840; }
	1165	.landing-terminal-title {
	1166	position: absolute;
	1167	left: 50%;
	1168	transform: translateX(-50%);
	1169	font-family: var(--font-mono);
	1170	font-size: 11px;
	1171	color: rgba(237,237,242,0.55);
	1172	letter-spacing: 0.01em;
	1173	}
	1174	.landing-terminal-body {
	1175	padding: var(--s-6) var(--s-7);
	1176	font-family: var(--font-mono);
	1177	font-feature-settings: var(--mono-feat);
	1178	font-size: 13.5px;
	1179	line-height: 1.85;
	1180	color: rgba(237,237,242,0.92);
	1181	}
4c47454Claude	1182	.landing-term-line {
	1183	display: flex;
	1184	gap: 10px;
	1185	white-space: pre-wrap;
	1186	word-break: break-all;
2b821b7Claude	1187	}
958d26aClaude	1188	.landing-term-out { color: rgba(237,237,242,0.7); }
	1189	.landing-term-prompt { color: rgba(140,109,255,0.85); user-select: none; flex-shrink: 0; }
	1190	.landing-term-meta { color: rgba(237,237,242,0.45); }
	1191	.landing-term-ok { color: var(--green); user-select: none; flex-shrink: 0; }
	1192	.landing-term-ok-line { color: rgba(237,237,242,0.92); }
	1193	.landing-term-cursor { margin-top: 4px; }
	1194	.landing-term-blink {
	1195	animation: blink 1.05s steps(2) infinite;
	1196	color: var(--accent);
	1197	}
	1198	@keyframes blink { 50% { opacity: 0; } }
	1199
	1200	/* ---------- Comparison ---------- */
	1201	.landing-compare {
	1202	max-width: 920px;
	1203	margin: 0 auto;
	1204	border: 1px solid var(--border);
	1205	border-radius: var(--r-lg);
	1206	overflow: hidden;
	1207	background: var(--bg-elevated);
	1208	}
	1209	.landing-compare-row {
	1210	display: grid;
	1211	grid-template-columns: 1fr 180px 180px;
	1212	align-items: center;
	1213	padding: 14px 20px;
	1214	border-bottom: 1px solid var(--border-subtle);
	1215	font-size: var(--t-sm);
	1216	transition: background var(--t-fast) var(--ease);
	1217	}
	1218	.landing-compare-row:last-child { border-bottom: none; }
	1219	.landing-compare-row:hover { background: var(--bg-hover); }
	1220	.landing-compare-feature {
	1221	color: var(--text-strong);
	1222	font-weight: 500;
	1223	}
	1224	.landing-compare-them, .landing-compare-us {
	1225	text-align: center;
	1226	font-family: var(--font-mono);
	1227	font-size: 12px;
	1228	color: var(--text-muted);
	1229	}
	1230	.landing-compare-us { color: var(--green); font-weight: 500; }
	1231	.landing-compare-hl .landing-compare-us {
	1232	color: var(--accent);
	1233	font-weight: 600;
2b821b7Claude	1234	}
958d26aClaude	1235	.landing-compare-hl .landing-compare-feature::after {
	1236	content: 'NEW';
	1237	margin-left: 8px;
	1238	padding: 1px 6px;
	1239	border-radius: 4px;
	1240	background: var(--accent-gradient-faint);
	1241	color: var(--accent);
	1242	font-family: var(--font-mono);
	1243	font-size: 9px;
	1244	letter-spacing: 0.1em;
	1245	font-weight: 600;
	1246	vertical-align: 1px;
	1247	}
	1248	@media (max-width: 720px) {
	1249	.landing-compare-row { grid-template-columns: 1fr 80px 80px; padding: 12px 14px; }
	1250	.landing-compare-hl .landing-compare-feature::after { display: none; }
	1251	}
	1252
	1253	/* ---------- Pricing ---------- */
	1254	.landing-pricing {
	1255	display: grid;
	1256	grid-template-columns: repeat(3, 1fr);
	1257	gap: 16px;
	1258	max-width: 1080px;
	1259	margin: 0 auto;
	1260	align-items: stretch;
	1261	}
	1262	.landing-price-card {
	1263	position: relative;
	1264	background: var(--bg-elevated);
	1265	border: 1px solid var(--border);
	1266	border-radius: var(--r-lg);
	1267	padding: var(--s-7);
	1268	display: flex;
	1269	flex-direction: column;
	1270	gap: var(--s-4);
	1271	transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	1272	}
	1273	.landing-price-card:hover {
	1274	border-color: var(--border-strong);
	1275	transform: translateY(-2px);
	1276	}
	1277	.landing-price-hl {
	1278	border-color: rgba(140,109,255,0.35);
	1279	box-shadow: var(--elev-2), 0 0 0 1px rgba(140,109,255,0.25);
	1280	background:
	1281	linear-gradient(180deg, rgba(140,109,255,0.05), transparent 50%),
	1282	var(--bg-elevated);
	1283	}
	1284	.landing-price-hl:hover { border-color: rgba(140,109,255,0.55); }
	1285	.landing-price-badge {
	1286	position: absolute;
	1287	top: -10px;
	1288	left: 50%;
	1289	transform: translateX(-50%);
	1290	padding: 3px 12px;
	1291	background: var(--accent-gradient);
	1292	color: #fff;
	1293	font-family: var(--font-mono);
	1294	font-size: 10px;
	1295	letter-spacing: 0.1em;
	1296	text-transform: uppercase;
	1297	font-weight: 600;
	1298	border-radius: var(--r-full);
	1299	box-shadow: 0 4px 12px -2px rgba(140,109,255,0.4);
	1300	}
	1301	.landing-price-tier {
	1302	font-family: var(--font-mono);
	1303	font-size: 11px;
	1304	text-transform: uppercase;
	1305	letter-spacing: 0.16em;
	1306	color: var(--text-muted);
	1307	}
	1308	.landing-price-amount {
	1309	display: flex;
	1310	align-items: baseline;
	1311	gap: 8px;
	1312	}
	1313	.landing-price-num {
	1314	font-family: var(--font-display);
	1315	font-size: 40px;
	1316	font-weight: 600;
	1317	letter-spacing: -0.03em;
	1318	color: var(--text-strong);
	1319	}
	1320	.landing-price-cad {
	1321	font-size: var(--t-sm);
	1322	color: var(--text-faint);
	1323	}
	1324	.landing-price-desc {
	1325	font-size: var(--t-sm);
	1326	color: var(--text-muted);
	1327	line-height: 1.55;
	1328	margin: 0;
	1329	}
	1330	.landing-price-features {
	1331	list-style: none;
	1332	padding: 0;
	1333	margin: 0;
	1334	display: flex;
	1335	flex-direction: column;
	1336	gap: 8px;
	1337	font-size: var(--t-sm);
	1338	color: var(--text);
	1339	}
	1340	.landing-price-features li {
	1341	display: flex;
	1342	align-items: center;
	1343	gap: 9px;
	1344	}
	1345	.landing-price-check {
	1346	color: var(--accent);
	1347	font-weight: 600;
4c47454Claude	1348	flex-shrink: 0;
2b821b7Claude	1349	}
958d26aClaude	1350	.landing-price-cta { margin-top: auto; }
	1351
	1352	/* ---------- Closing CTA ---------- */
	1353	.landing-cta-section { margin: var(--s-20) auto var(--s-16); }
	1354	.landing-cta-card {
	1355	position: relative;
	1356	text-align: center;
	1357	padding: var(--s-16) var(--s-7);
	1358	border: 1px solid var(--border-strong);
	1359	border-radius: var(--r-2xl);
	1360	background: var(--bg-elevated);
	1361	overflow: hidden;
	1362	isolation: isolate;
	1363	}
	1364	.landing-cta-bg {
	1365	position: absolute;
	1366	inset: 0;
	1367	z-index: -1;
	1368	background:
	1369	radial-gradient(60% 100% at 50% 0%, rgba(140,109,255,0.16), transparent 65%),
	1370	radial-gradient(40% 80% at 80% 100%, rgba(54,197,214,0.10), transparent 65%);
	1371	}
	1372	.landing-cta-card::after {
	1373	content: '';
	1374	position: absolute;
	1375	inset: 0;
	1376	z-index: -1;
	1377	background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
	1378	background-size: 24px 24px;
	1379	mask-image: radial-gradient(ellipse at center, #000 0%, transparent 65%);
	1380	-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 65%);
	1381	opacity: 0.6;
	1382	}
	1383	:root[data-theme='light'] .landing-cta-card::after {
	1384	background-image: radial-gradient(rgba(15,16,28,0.07) 1px, transparent 1px);
	1385	}
	1386	.landing-cta-card .eyebrow { justify-content: center; }
	1387	.landing-cta-title {
	1388	font-family: var(--font-display);
	1389	font-size: clamp(28px, 4.4vw, 56px);
	1390	line-height: 1.05;
	1391	letter-spacing: -0.03em;
	1392	font-weight: 600;
	1393	margin: var(--s-3) 0 var(--s-4);
	1394	color: var(--text-strong);
	1395	}
	1396	.landing-cta-sub {
	1397	font-size: var(--t-md);
	1398	color: var(--text-muted);
	1399	max-width: 560px;
	1400	margin: 0 auto var(--s-8);
	1401	line-height: 1.55;
	1402	}
	1403	.landing-cta-buttons {
	1404	display: flex;
	1405	gap: 12px;
	1406	justify-content: center;
	1407	flex-wrap: wrap;
	1408	}
2b821b7Claude	1409
	1410	/* ---------- Responsive ---------- */
958d26aClaude	1411	@media (max-width: 960px) {
	1412	.landing-features { grid-template-columns: repeat(2, 1fr); }
	1413	.landing-walk-grid { grid-template-columns: repeat(2, 1fr); }
	1414	.landing-walk-step::after { display: none; }
	1415	.landing-pricing { grid-template-columns: 1fr; max-width: 480px; }
	1416	}
	1417	@media (max-width: 640px) {
	1418	.landing-hero { padding: var(--s-14) 0 var(--s-10); }
	1419	.landing-hero-cmd { flex-wrap: wrap; justify-content: center; }
	1420	.landing-hero-ctas { flex-direction: column; align-items: stretch; }
	1421	.landing-hero-ctas .btn { width: 100%; justify-content: center; }
	1422	.landing-features { grid-template-columns: 1fr; }
	1423	.landing-walk-grid { grid-template-columns: 1fr; }
	1424	.landing-section { margin: var(--s-12) auto; }
	1425	.landing-cta-card { padding: var(--s-10) var(--s-5); }
	1426	.landing-cta-buttons .btn { width: 100%; justify-content: center; }
2b821b7Claude	1427	}
	1428	`;