Pre-launch — Gluecron is in final validation. Public signups and git hosting for non-owner users open after launch review.
ccantynz/Gluecron.com
CodeIssuesPull RequestsActionsSecurityInsightsSettings
✨ AI
ExplainAsk AIWorkspaceSpec to PRTestsNL SearchDebt MapArchaeology
More
CommitsDiscussionsWikiProjectsReleasesContributorsPulseGatesDeploymentsPipelineAgents
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.

Gluecron.com/src/views/landing.tsx
landing.tsxBlame1416 lines · 1 contributor
Normal viewRaw
2b821b7Claude1/**
2 * Marketing landing page for logged-out visitors.
3 *
958d26aClaude4 * Editorial-Technical redesign — 2026.05.
5 * Hero · trust strip · feature grid · workflow walkthrough ·
6 * comparison · terminal · pricing teaser · closing CTA.
2b821b7Claude7 *
958d26aClaude8 * Pure presentational. Drops into <Layout user={null}>.
9 * All styles scoped under `.landing-` so they don't bleed into app views.
2b821b7Claude10 */
11
12import type { FC } from "hono/jsx";
13
14export interface LandingPageProps {
15 stats?: {
16 publicRepos?: number;
17 users?: number;
18 };
19}
20
4c47454Claude21export const LandingHero: FC<LandingPageProps> = ({ stats } = {}) => {
8e9f1d9Claude22 const hasStats =
23 stats &&
24 ((stats.publicRepos !== undefined && stats.publicRepos > 0) ||
25 (stats.users !== undefined && stats.users > 0));
4c47454Claude26
2b821b7Claude27 return (
28 <>
fa880f2Claude29 <style dangerouslySetInnerHTML={{ __html: landingCss }} />
2b821b7Claude30
4c47454Claude31 <div class="landing-root">
32 {/* ---------- Hero ---------- */}
33 <section class="landing-hero">
958d26aClaude34 <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" />
2b821b7Claude38 </div>
958d26aClaude39
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>
4c47454Claude99 <span>
958d26aClaude100 <strong>100%</strong> AI-native
4c47454Claude101 </span>
958d26aClaude102 </p>
103 )}
104 </div>
c963db5Claude105 </section>
c475ee6Claude106
c963db5Claude107 {/* ---------- Capability strip — uppercase tracked grid (crontech-style) ---------- */}
108 <section class="landing-caps">
109 <div class="landing-caps-grid">
110 <span class="landing-cap">Claude-powered AI</span>
111 <span class="landing-cap">Spec-to-PR</span>
112 <span class="landing-cap">Auto-repair</span>
113 <span class="landing-cap">Real-time gates</span>
114 <span class="landing-cap">MCP-native</span>
115 <span class="landing-cap">Workflow runner</span>
116 <span class="landing-cap">Self-hostable</span>
117 <span class="landing-cap">Branch protection</span>
118 <span class="landing-cap">Bun + Hono</span>
119 <span class="landing-cap">Drizzle + Postgres</span>
120 <span class="landing-cap">JSX server-rendered</span>
121 <span class="landing-cap">Type-safe end to end</span>
c475ee6Claude122 </div>
958d26aClaude123 </section>
124
c963db5Claude125 {/* ---------- Big stat row (crontech-style hero closer) ---------- */}
126 <section class="landing-bigstats">
127 <div class="landing-bigstats-grid">
128 <div class="landing-bigstat">
129 <div class="landing-bigstat-num">Claude-powered</div>
130 <div class="landing-bigstat-label">The best AI, native</div>
131 </div>
132 <div class="landing-bigstat">
133 <div class="landing-bigstat-num">Self-hosted</div>
134 <div class="landing-bigstat-label">On your hardware</div>
135 </div>
136 <div class="landing-bigstat">
137 <div class="landing-bigstat-num">MCP-native</div>
138 <div class="landing-bigstat-label">Claude · Cursor · Code</div>
139 </div>
140 <div class="landing-bigstat">
141 <div class="landing-bigstat-num">Real-time</div>
142 <div class="landing-bigstat-label">SSE everywhere</div>
143 </div>
958d26aClaude144 </div>
4c47454Claude145 </section>
146
147 {/* ---------- Feature grid ---------- */}
958d26aClaude148 <section class="landing-section">
149 <div class="section-header">
150 <div class="eyebrow">The platform</div>
151 <h2>An IDE for your repo, not just a host.</h2>
152 <p>
153 Gluecron ships the surfaces GitHub charges extra for, and the
154 ones it never built. AI is a teammate with its own commits, not
155 a sidebar.
2b821b7Claude156 </p>
157 </div>
4c47454Claude158
958d26aClaude159 <div class="landing-features stagger">
160 <FeatureCard
161 icon={
162 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
163 <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" />
164 </svg>
165 }
166 title="AI as a teammate"
167 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."
168 />
169 <FeatureCard
170 icon={
171 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
172 <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" />
173 <path d="M9 12l2 2 4-4" />
174 </svg>
175 }
176 title="Quality gate that learns"
177 desc="GateTest scans every push. Auto-repair fixes regressions before you see them. Required checks block bad PRs from merging. Your software self-corrects."
178 />
179 <FeatureCard
180 icon={
181 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
182 <path d="M13 2L4 14h7l-1 8 9-12h-7z" />
183 </svg>
184 }
185 title="Real-time everything"
186 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."
187 />
188 <FeatureCard
189 icon={
190 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
191 <rect x="3" y="3" width="18" height="18" rx="3" />
192 <path d="M3 9h18M9 21V9" />
193 </svg>
194 }
195 title="Workflow runner"
196 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."
197 />
198 <FeatureCard
199 icon={
200 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
201 <circle cx="12" cy="12" r="9" />
202 <path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" />
203 </svg>
204 }
205 title="MCP-native"
206 desc="Claude, Cursor, Code — they speak Model Context Protocol. Gluecron exposes search, file read, issues, codebase explain as MCP tools by default."
207 />
208 <FeatureCard
209 icon={
210 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
211 <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
212 <path d="M12 7v5l3 2" />
213 </svg>
214 }
215 title="Yours, on your hardware"
216 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."
217 />
2b821b7Claude218 </div>
958d26aClaude219 </section>
2b821b7Claude220
958d26aClaude221 {/* ---------- Workflow walkthrough ---------- */}
222 <section class="landing-section landing-walk">
223 <div class="section-header">
224 <div class="eyebrow">How it works</div>
225 <h2>Push code. Watch it ship.</h2>
226 <p>
227 Every push triggers the same pipeline whether the commit came
228 from you, from CI, or from an AI agent.
4c47454Claude229 </p>
230 </div>
958d26aClaude231
232 <div class="landing-walk-grid">
233 <WalkStep n="01" title="Push" desc="git push to gluecron — Smart-HTTP, SSH, or via the web editor." />
234 <WalkStep n="02" title="Gate" desc="GateTest runs. Secret scanner runs. AI security review posts inline comments." />
235 <WalkStep n="03" title="Repair" desc="If a gate fails, auto-repair tries to fix it. New commit gets re-gated." />
236 <WalkStep n="04" title="Ship" desc="Green push to default branch fires deploy webhook. Crontech, Fly, your prod." />
237 </div>
4c47454Claude238 </section>
2b821b7Claude239
4c47454Claude240 {/* ---------- Terminal block ---------- */}
958d26aClaude241 <section class="landing-section landing-terminal-section">
242 <div class="landing-terminal-wrap">
243 <div class="landing-terminal" role="img" aria-label="Example git push to gluecron with passing gates">
244 <div class="landing-terminal-chrome">
245 <span class="landing-terminal-dot landing-terminal-dot-r" />
246 <span class="landing-terminal-dot landing-terminal-dot-y" />
247 <span class="landing-terminal-dot landing-terminal-dot-g" />
248 <span class="landing-terminal-title">~/your-repo &mdash; zsh</span>
249 </div>
250 <div class="landing-terminal-body">
251 <div class="landing-term-line">
252 <span class="landing-term-prompt">$</span>
253 <span>git remote add gluecron https://gluecron.com/you/your-repo.git</span>
254 </div>
255 <div class="landing-term-line">
256 <span class="landing-term-prompt">$</span>
257 <span>git push -u gluecron main</span>
258 </div>
259 <div class="landing-term-line landing-term-out">
260 <span class="landing-term-meta">remote:</span>
261 <span>Resolving deltas… 100% (24/24)</span>
262 </div>
263 <div class="landing-term-line landing-term-out landing-term-ok-line">
264 <span class="landing-term-ok">{"✓"}</span>
265 <span>pushed to gluecron.com/you/your-repo</span>
266 </div>
267 <div class="landing-term-line landing-term-out landing-term-ok-line">
268 <span class="landing-term-ok">{"✓"}</span>
269 <span>GateTest passed (12 rules, 0 violations)</span>
270 </div>
271 <div class="landing-term-line landing-term-out landing-term-ok-line">
272 <span class="landing-term-ok">{"✓"}</span>
273 <span>AI review posted (2 suggestions, 0 blockers)</span>
274 </div>
275 <div class="landing-term-line landing-term-out landing-term-ok-line">
276 <span class="landing-term-ok">{"✓"}</span>
277 <span>deployed to your-repo.gluecron.com <span class="landing-term-meta">(4.1s)</span></span>
278 </div>
279 <div class="landing-term-line landing-term-cursor">
280 <span class="landing-term-prompt">$</span>
281 <span class="landing-term-blink">▍</span>
282 </div>
283 </div>
4c47454Claude284 </div>
958d26aClaude285 </div>
286 </section>
287
288 {/* ---------- Comparison ---------- */}
289 <section class="landing-section">
290 <div class="section-header">
291 <div class="eyebrow">vs the incumbent</div>
292 <h2>Everything GitHub charges for. And the parts they didn't build.</h2>
293 </div>
294
295 <div class="landing-compare">
296 <CompareRow feature="Git hosting + Smart-HTTP push" them="✓" us="✓" />
297 <CompareRow feature="Issues, PRs, code review" them="✓" us="✓" />
298 <CompareRow feature="Workflow runner (Actions-equivalent)" them="paid minutes" us="self-hosted, unmetered" highlight />
299 <CompareRow feature="AI code review on every PR" them="Copilot subscription" us="built in" highlight />
300 <CompareRow feature="Spec-to-PR (NL feature → draft PR)" them="—" us="✓" highlight />
301 <CompareRow feature="Auto-repair on failed gates" them="—" us="✓" highlight />
302 <CompareRow feature="Real-time SSE for logs + PRs" them="polling" us="streaming" highlight />
303 <CompareRow feature="MCP server (Claude / Cursor)" them="—" us="✓" highlight />
304 <CompareRow feature="Self-host on your own infra" them="enterprise tier" us="single binary" highlight />
305 <CompareRow feature="Pre-receive policy enforcement" them="rulesets (GHE)" us="✓" />
306 </div>
307 </section>
308
309 {/* ---------- Pricing teaser ---------- */}
310 <section class="landing-section">
311 <div class="section-header">
312 <div class="eyebrow">Pricing</div>
313 <h2>Free to start. Honest at scale.</h2>
314 <p>
315 Self-hosting is free forever. Hosted plans price the AI calls,
316 not the seats.
317 </p>
318 </div>
319
320 <div class="landing-pricing">
321 <PricingCard
322 tier="Free"
323 price="$0"
324 cadence="forever"
325 desc="For personal projects + open source. Public + private repos, full AI suite, fair quotas."
326 features={["Unlimited public repos", "3 private repos", "5K AI calls / mo", "Community support"]}
327 cta="Start free"
328 href="/register"
329 />
330 <PricingCard
331 tier="Pro"
332 price="$12"
333 cadence="per user / mo"
334 desc="For working developers. Lifts every quota, adds priority routing, no Gluecron branding on deploys."
335 features={["Unlimited private repos", "100K AI calls / mo", "Priority queue", "Custom domains"]}
336 cta="Go Pro"
337 href="/settings/billing"
338 highlight
339 />
340 <PricingCard
341 tier="Team"
342 price="Talk to us"
343 cadence="custom"
344 desc="For orgs running production on Gluecron. SSO, audit retention, enterprise SLA, on-prem."
345 features={["SSO + SCIM", "On-prem deploy", "Dedicated capacity", "24/7 incident response"]}
346 cta="Contact"
347 href="mailto:hello@gluecron.com"
348 />
349 </div>
350 </section>
351
352 {/* ---------- Closing CTA ---------- */}
353 <section class="landing-cta-section">
354 <div class="landing-cta-card">
355 <div class="landing-cta-bg" aria-hidden="true" />
356 <div class="eyebrow">Ready when you are</div>
357 <h2 class="landing-cta-title">
358 Stop maintaining the platform.<br />
359 <span class="gradient-text">Start shipping the product.</span>
360 </h2>
361 <p class="landing-cta-sub">
362 Free to start, self-hosted-friendly, MCP-native. Migrate from
363 GitHub in one click.
364 </p>
365 <div class="landing-cta-buttons">
366 <a href="/register" class="btn btn-primary btn-xl">
367 Create your account
368 <span class="landing-cta-arrow" aria-hidden="true">{"→"}</span>
369 </a>
370 <a href="/import" class="btn btn-ghost btn-xl">
371 Migrate a repo
372 </a>
4c47454Claude373 </div>
374 </div>
375 </section>
376 </div>
2b821b7Claude377 </>
378 );
379};
380
958d26aClaude381const FeatureCard: FC<{ icon: any; title: string; desc: string }> = ({
382 icon,
383 title,
384 desc,
385}) => (
386 <div class="landing-feature">
387 <div class="landing-feature-icon" aria-hidden="true">
388 {icon}
389 </div>
390 <h3 class="landing-feature-title">{title}</h3>
391 <p class="landing-feature-desc">{desc}</p>
392 </div>
393);
394
395const WalkStep: FC<{ n: string; title: string; desc: string }> = ({
396 n,
397 title,
398 desc,
399}) => (
400 <div class="landing-walk-step">
401 <div class="landing-walk-num">{n}</div>
402 <h3 class="landing-walk-title">{title}</h3>
403 <p class="landing-walk-desc">{desc}</p>
404 </div>
405);
406
407const CompareRow: FC<{
408 feature: string;
409 them: string;
410 us: string;
411 highlight?: boolean;
412}> = ({ feature, them, us, highlight }) => (
413 <div class={`landing-compare-row${highlight ? " landing-compare-hl" : ""}`}>
414 <div class="landing-compare-feature">{feature}</div>
415 <div class="landing-compare-them">{them}</div>
416 <div class="landing-compare-us">{us === "✓" ? "✓" : us}</div>
417 </div>
418);
419
420const PricingCard: FC<{
421 tier: string;
422 price: string;
423 cadence: string;
424 desc: string;
425 features: string[];
426 cta: string;
427 href: string;
428 highlight?: boolean;
429}> = ({ tier, price, cadence, desc, features, cta, href, highlight }) => (
430 <div class={`landing-price-card${highlight ? " landing-price-hl" : ""}`}>
431 {highlight && <div class="landing-price-badge">Most popular</div>}
432 <div class="landing-price-tier">{tier}</div>
433 <div class="landing-price-amount">
434 <span class="landing-price-num">{price}</span>
435 <span class="landing-price-cad">{cadence}</span>
436 </div>
437 <p class="landing-price-desc">{desc}</p>
438 <ul class="landing-price-features">
439 {features.map((f) => (
440 <li>
441 <span class="landing-price-check" aria-hidden="true">{"✓"}</span>
442 {f}
443 </li>
444 ))}
445 </ul>
446 <a
447 href={href}
448 class={`btn ${highlight ? "btn-primary" : "btn-secondary"} btn-block landing-price-cta`}
449 >
450 {cta}
451 </a>
452 </div>
453);
454
4c47454Claude455// Backwards-compatible default — web.tsx imports `LandingPage`.
456export const LandingPage: FC<LandingPageProps> = (props) => (
457 <LandingHero {...props} />
2b821b7Claude458);
459
4c47454Claude460export default LandingPage;
461
2b821b7Claude462const landingCss = `
958d26aClaude463 /* ============================================================ */
464 /* Landing — Editorial-Technical 2026.05 */
465 /* ============================================================ */
4c47454Claude466 .landing-root {
467 position: relative;
958d26aClaude468 max-width: 1180px;
4c47454Claude469 margin: 0 auto;
470 padding: 0 16px;
958d26aClaude471 }
472 .landing-root > section { position: relative; }
473
474 /* ---------- Hero ---------- */
475 .landing-hero {
476 position: relative;
c475ee6Claude477 padding: var(--s-16) 0 var(--s-20);
958d26aClaude478 text-align: center;
4c47454Claude479 overflow: hidden;
480 }
c475ee6Claude481 .landing-hero-blob-1 {
482 animation: hero-blob-drift-1 18s var(--ease, ease) infinite alternate;
483 }
484 .landing-hero-blob-2 {
485 animation: hero-blob-drift-2 22s var(--ease, ease) infinite alternate;
486 }
487 @keyframes hero-blob-drift-1 {
488 0% { transform: translate(0, 0) scale(1); opacity: 0.55; }
489 100% { transform: translate(8%, 6%) scale(1.18); opacity: 0.75; }
490 }
491 @keyframes hero-blob-drift-2 {
492 0% { transform: translate(0, 0) scale(1); opacity: 0.40; }
493 100% { transform: translate(-10%, -4%) scale(1.25); opacity: 0.60; }
494 }
495
496 /* ---------- Hero product visual: live AI PR review card ---------- */
497 .landing-hero-visual {
498 position: relative;
499 max-width: 760px;
500 margin: var(--s-12) auto 0;
501 padding: 0 16px;
502 perspective: 1400px;
503 z-index: 2;
504 opacity: 0;
505 animation: hero-visual-in 700ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) 400ms forwards;
506 }
507 @keyframes hero-visual-in {
508 from { opacity: 0; transform: translateY(20px); }
509 to { opacity: 1; transform: translateY(0); }
510 }
511 .hero-pr-card {
512 position: relative;
513 background: linear-gradient(180deg, rgba(15,17,26,0.96) 0%, rgba(8,9,15,0.96) 100%);
514 border: 1px solid var(--border-strong);
515 border-radius: var(--r-xl);
516 overflow: hidden;
517 text-align: left;
518 box-shadow:
519 0 30px 80px -20px rgba(0,0,0,0.65),
520 0 0 0 1px rgba(140,109,255,0.18),
521 0 0 60px -10px rgba(140,109,255,0.30);
522 transform: rotateX(2deg) rotateY(-2deg);
523 transition: transform 600ms var(--ease, ease);
524 backdrop-filter: blur(12px);
525 -webkit-backdrop-filter: blur(12px);
526 }
527 .landing-hero-visual:hover .hero-pr-card {
528 transform: rotateX(0deg) rotateY(0deg);
529 }
530 .hero-pr-card::before {
531 content: '';
532 position: absolute;
533 inset: 0;
534 background: linear-gradient(135deg, rgba(140,109,255,0.10), transparent 35%, transparent 65%, rgba(54,197,214,0.08));
535 pointer-events: none;
536 }
537 .hero-pr-header {
538 display: flex;
539 align-items: center;
540 gap: 12px;
541 padding: 14px 18px;
542 border-bottom: 1px solid rgba(255,255,255,0.06);
543 background: rgba(255,255,255,0.025);
544 font-size: 13px;
545 }
546 .hero-pr-dot {
547 width: 10px; height: 10px;
548 border-radius: 50%;
549 background: var(--green);
550 box-shadow: 0 0 10px rgba(52,211,153,0.6);
551 flex-shrink: 0;
552 }
553 .hero-pr-title {
554 color: var(--text-strong);
555 font-weight: 600;
556 flex: 1;
557 overflow: hidden;
558 text-overflow: ellipsis;
559 white-space: nowrap;
560 }
561 .hero-pr-num {
562 color: var(--text-faint);
563 font-family: var(--font-mono);
564 font-weight: 500;
565 margin-right: 8px;
566 }
567 .hero-pr-status {
568 display: inline-flex;
569 align-items: center;
570 gap: 6px;
571 padding: 3px 10px;
572 border-radius: var(--r-full);
573 background: var(--accent-gradient-faint);
574 border: 1px solid rgba(140,109,255,0.30);
575 color: var(--accent);
576 font-family: var(--font-mono);
577 font-size: 11px;
578 letter-spacing: 0.04em;
579 flex-shrink: 0;
580 }
581 .hero-pr-status-pulse {
582 width: 6px; height: 6px;
583 border-radius: 50%;
584 background: var(--accent);
585 box-shadow: 0 0 0 0 rgba(140,109,255,0.6);
586 animation: hero-pulse 1.6s ease-out infinite;
587 }
588 @keyframes hero-pulse {
589 0% { box-shadow: 0 0 0 0 rgba(140,109,255,0.55); }
590 70% { box-shadow: 0 0 0 8px rgba(140,109,255,0); }
591 100% { box-shadow: 0 0 0 0 rgba(140,109,255,0); }
592 }
593
594 .hero-pr-body {
595 padding: 0;
596 }
597 .hero-pr-file {
598 display: flex;
599 align-items: center;
600 gap: 10px;
601 padding: 10px 18px;
602 border-bottom: 1px solid rgba(255,255,255,0.05);
603 font-family: var(--font-mono);
604 font-size: 12px;
605 background: rgba(255,255,255,0.012);
606 }
607 .hero-pr-file-icon { color: var(--accent-2); }
608 .hero-pr-file-name { color: var(--text); flex: 1; }
609 .hero-pr-file-stats { display: inline-flex; gap: 8px; }
610 .hero-pr-add { color: var(--green); font-weight: 600; }
611 .hero-pr-del { color: var(--red); font-weight: 600; }
612
613 .hero-pr-diff {
614 padding: 12px 18px;
615 font-family: var(--font-mono);
616 font-feature-settings: var(--mono-feat, 'calt');
617 font-size: 12.5px;
618 line-height: 1.7;
619 color: rgba(237,237,242,0.85);
620 overflow-x: auto;
621 }
622 .hero-pr-hunk {
623 color: rgba(140,109,255,0.85);
624 background: rgba(140,109,255,0.06);
625 padding: 2px 8px;
626 margin: 0 -8px 4px;
627 border-radius: 4px;
628 }
629 .hero-pr-line-add {
630 background: rgba(52,211,153,0.08);
631 color: rgba(167,243,208,0.95);
632 padding: 0 8px;
633 margin: 0 -8px;
634 border-left: 2px solid var(--green);
635 padding-left: 8px;
636 }
637
638 .hero-pr-comment {
639 margin: 14px 18px;
640 padding: 14px 16px;
641 background: linear-gradient(135deg, rgba(140,109,255,0.08), rgba(54,197,214,0.05));
642 border: 1px solid rgba(140,109,255,0.25);
643 border-radius: var(--r-md);
644 }
645 .hero-pr-bot-row {
646 display: flex;
647 align-items: center;
648 gap: 8px;
649 margin-bottom: 8px;
650 font-size: 12px;
651 }
652 .hero-pr-bot-avatar {
653 width: 22px; height: 22px;
654 display: inline-flex;
655 align-items: center;
656 justify-content: center;
657 border-radius: 50%;
658 background: var(--accent-gradient);
659 font-size: 11px;
660 box-shadow: 0 0 12px rgba(140,109,255,0.40);
661 }
662 .hero-pr-bot-name {
663 color: var(--text-strong);
664 font-weight: 600;
665 }
666 .hero-pr-bot-meta {
667 color: var(--text-faint);
668 font-family: var(--font-mono);
669 }
670 .hero-pr-bot-text {
671 color: var(--text);
672 font-size: 13px;
673 line-height: 1.55;
674 margin: 0;
675 }
676 .hero-pr-bot-text code {
677 background: rgba(255,255,255,0.06);
678 border: 1px solid rgba(255,255,255,0.10);
679 padding: 1px 6px;
680 border-radius: 4px;
681 font-size: 11.5px;
682 color: var(--accent);
683 }
684 .hero-pr-bot-link { color: var(--accent-2); text-decoration: underline; text-decoration-style: dotted; }
685
686 .hero-pr-gates {
687 display: flex;
688 flex-wrap: wrap;
689 gap: 6px;
690 padding: 12px 18px 16px;
691 border-top: 1px solid rgba(255,255,255,0.06);
692 background: rgba(255,255,255,0.012);
693 }
694 .hero-pr-gate {
695 display: inline-flex;
696 align-items: center;
697 gap: 6px;
698 padding: 4px 10px;
699 border-radius: var(--r-full);
700 font-family: var(--font-mono);
701 font-size: 11px;
702 border: 1px solid;
703 }
704 .hero-pr-gate-pass {
705 color: var(--green);
706 background: rgba(52,211,153,0.08);
707 border-color: rgba(52,211,153,0.30);
708 }
709 .hero-pr-gate-running {
710 color: var(--accent);
711 background: var(--accent-gradient-faint);
712 border-color: rgba(140,109,255,0.40);
713 }
714 .hero-pr-gate-spin {
715 width: 9px; height: 9px;
716 border: 1.5px solid rgba(140,109,255,0.30);
717 border-top-color: var(--accent);
718 border-radius: 50%;
719 animation: hero-spin 800ms linear infinite;
720 }
721 @keyframes hero-spin {
722 to { transform: rotate(360deg); }
723 }
724
725 /* Floating accent badges around the card */
726 .hero-float {
727 position: absolute;
728 display: inline-flex;
729 align-items: center;
730 gap: 6px;
731 padding: 6px 12px;
732 background: rgba(15,17,26,0.92);
733 border: 1px solid rgba(140,109,255,0.35);
734 border-radius: var(--r-full);
735 font-family: var(--font-mono);
736 font-size: 11px;
737 color: var(--text);
738 box-shadow: 0 12px 24px -8px rgba(0,0,0,0.5), 0 0 18px -4px rgba(140,109,255,0.30);
739 backdrop-filter: blur(8px);
740 -webkit-backdrop-filter: blur(8px);
741 }
742 .hero-float-icon { color: var(--accent); }
743 .hero-float-1 {
744 top: -14px;
745 left: -8px;
746 animation: hero-float-bob-1 5s var(--ease, ease) infinite alternate;
747 }
748 .hero-float-2 {
749 bottom: -14px;
750 right: -8px;
751 animation: hero-float-bob-2 6s var(--ease, ease) infinite alternate;
752 }
753 @keyframes hero-float-bob-1 {
754 from { transform: translate(0, 0); }
755 to { transform: translate(-8px, -10px); }
756 }
757 @keyframes hero-float-bob-2 {
758 from { transform: translate(0, 0); }
759 to { transform: translate(8px, 8px); }
760 }
761
762 @media (max-width: 720px) {
763 .landing-hero-visual { padding: 0 8px; }
764 .hero-pr-card { transform: none; }
765 .hero-pr-title { font-size: 12px; }
766 .hero-pr-diff { font-size: 11px; line-height: 1.6; }
767 .hero-float { display: none; }
768 }
958d26aClaude769 .landing-hero-bg {
770 position: absolute;
771 inset: -10% -20%;
772 pointer-events: none;
773 z-index: 0;
4c47454Claude774 }
958d26aClaude775 .landing-hero-blob {
776 position: absolute;
777 border-radius: 50%;
778 filter: blur(80px);
779 opacity: 0.55;
780 }
781 .landing-hero-blob-1 {
782 top: -10%;
783 left: 30%;
784 width: 480px;
785 height: 480px;
786 background: radial-gradient(circle, rgba(140,109,255,0.55), transparent 65%);
787 }
788 .landing-hero-blob-2 {
789 top: 10%;
790 left: 50%;
791 width: 380px;
792 height: 380px;
793 background: radial-gradient(circle, rgba(54,197,214,0.40), transparent 65%);
794 }
795 .landing-hero-grid {
4c47454Claude796 position: absolute;
797 inset: 0;
958d26aClaude798 background-image:
799 linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
800 linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
801 background-size: 60px 60px;
802 mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000 0%, transparent 75%);
803 -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000 0%, transparent 75%);
804 }
805 :root[data-theme='light'] .landing-hero-grid {
806 background-image:
807 linear-gradient(to right, rgba(15,16,28,0.06) 1px, transparent 1px),
808 linear-gradient(to bottom, rgba(15,16,28,0.06) 1px, transparent 1px);
4c47454Claude809 }
810
958d26aClaude811 .landing-hero-inner {
812 position: relative;
813 z-index: 1;
814 max-width: 960px;
2b821b7Claude815 margin: 0 auto;
816 }
958d26aClaude817 .landing-hero-eyebrow {
818 margin: 0 auto var(--s-6);
819 color: var(--accent);
820 }
821 .landing-hero-eyebrow::before { display: none; }
822 .landing-hero-pulse {
823 width: 7px;
824 height: 7px;
825 border-radius: 50%;
826 background: var(--accent);
827 box-shadow: 0 0 0 0 rgba(140,109,255,0.6);
828 animation: pulse 1.8s ease-out infinite;
829 flex-shrink: 0;
830 }
831 @keyframes pulse {
832 0% { box-shadow: 0 0 0 0 rgba(140,109,255,0.55); }
833 70% { box-shadow: 0 0 0 10px rgba(140,109,255,0); }
834 100% { box-shadow: 0 0 0 0 rgba(140,109,255,0); }
835 }
836
2b821b7Claude837 .landing-hero-title {
c963db5Claude838 font-size: clamp(48px, 9.5vw, 124px);
839 line-height: 0.96;
840 letter-spacing: -0.045em;
841 font-weight: 700;
842 margin: 0 0 var(--s-7);
958d26aClaude843 color: var(--text-strong);
2b821b7Claude844 }
c963db5Claude845 .landing-hero-title .gradient-text {
846 background-image: linear-gradient(135deg, #a48bff 0%, #8c6dff 50%, #6d4dff 100%);
847 -webkit-background-clip: text;
848 background-clip: text;
849 -webkit-text-fill-color: transparent;
850 color: transparent;
851 }
958d26aClaude852
2b821b7Claude853 .landing-hero-sub {
958d26aClaude854 font-size: clamp(15px, 1.6vw, 19px);
2b821b7Claude855 color: var(--text-muted);
958d26aClaude856 max-width: 680px;
857 margin: 0 auto;
4c47454Claude858 line-height: 1.55;
958d26aClaude859 letter-spacing: -0.005em;
2b821b7Claude860 }
4c47454Claude861
2b821b7Claude862 .landing-hero-ctas {
863 display: flex;
958d26aClaude864 gap: 12px;
2b821b7Claude865 justify-content: center;
866 flex-wrap: wrap;
958d26aClaude867 margin-top: var(--s-10);
2b821b7Claude868 }
958d26aClaude869 .landing-cta-arrow {
870 transition: transform var(--t-base) var(--ease-spring);
871 display: inline-block;
2b821b7Claude872 }
958d26aClaude873 .btn:hover .landing-cta-arrow,
874 .landing-cta-primary:hover .landing-cta-arrow {
875 transform: translateX(4px);
8e9f1d9Claude876 }
2b821b7Claude877
4c47454Claude878 .landing-hero-caption {
958d26aClaude879 margin-top: var(--s-8);
880 font-size: var(--t-sm);
4c47454Claude881 color: var(--text-muted);
958d26aClaude882 display: flex;
883 flex-wrap: wrap;
884 align-items: center;
885 justify-content: center;
886 gap: 12px;
2b821b7Claude887 }
958d26aClaude888 .landing-hero-cmd {
889 display: inline-flex;
890 align-items: center;
891 gap: 4px;
892 padding: 6px 12px;
893 background: var(--bg-elevated);
4c47454Claude894 border: 1px solid var(--border);
958d26aClaude895 border-radius: var(--r-full);
896 box-shadow: var(--elev-1);
897 }
898 .landing-hero-cmd .kbd {
899 border: 0;
900 background: transparent;
901 padding: 0 4px;
902 color: var(--text-muted);
903 font-size: 12px;
904 }
905 .landing-hero-cmd .kbd:nth-last-of-type(1) { color: var(--accent); }
906 .landing-hero-arrow {
907 color: var(--text-faint);
908 font-size: 13px;
909 margin: 0 2px;
2b821b7Claude910 }
4c47454Claude911
912 .landing-stats {
958d26aClaude913 margin-top: var(--s-7);
914 font-family: var(--font-mono);
915 font-size: 12px;
916 color: var(--text-muted);
917 display: flex;
918 align-items: center;
919 justify-content: center;
920 gap: 10px;
921 flex-wrap: wrap;
922 letter-spacing: 0.02em;
923 }
924 .landing-stats strong {
925 color: var(--text-strong);
926 font-weight: 600;
927 font-feature-settings: 'tnum';
928 }
929 .landing-stats-sep { opacity: 0.4; }
930
c963db5Claude931 /* ---------- Capability grid (crontech-style uppercase tracked) ---------- */
932 .landing-caps {
933 margin: var(--s-12) auto var(--s-16);
934 max-width: 1080px;
935 padding: var(--s-7) var(--s-4);
958d26aClaude936 border-top: 1px solid var(--border-subtle);
937 border-bottom: 1px solid var(--border-subtle);
c963db5Claude938 }
939 .landing-caps-grid {
940 display: grid;
941 grid-template-columns: repeat(4, 1fr);
942 gap: 24px 16px;
958d26aClaude943 text-align: center;
944 }
c963db5Claude945 .landing-cap {
958d26aClaude946 font-family: var(--font-mono);
947 font-size: 11px;
c963db5Claude948 font-weight: 600;
958d26aClaude949 text-transform: uppercase;
c963db5Claude950 letter-spacing: 0.16em;
951 color: var(--text-muted);
952 transition: color var(--t-fast) var(--ease);
958d26aClaude953 }
c963db5Claude954 .landing-cap:hover { color: var(--text-strong); }
955 @media (max-width: 800px) {
956 .landing-caps-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
957 }
958 @media (max-width: 480px) {
959 .landing-caps-grid { grid-template-columns: 1fr; }
960 }
961
962 /* ---------- Big stat row (crontech-style hero closer) ---------- */
963 .landing-bigstats {
964 margin: var(--s-10) auto var(--s-20);
965 max-width: 1180px;
966 padding: 0 var(--s-4);
967 }
968 .landing-bigstats-grid {
969 display: grid;
970 grid-template-columns: repeat(4, 1fr);
971 gap: 32px;
972 text-align: left;
958d26aClaude973 }
c963db5Claude974 .landing-bigstat {
975 padding: var(--s-2) 0;
976 }
977 .landing-bigstat-num {
958d26aClaude978 font-family: var(--font-display);
c963db5Claude979 font-size: clamp(28px, 3.5vw, 44px);
980 line-height: 1.05;
981 letter-spacing: -0.03em;
982 font-weight: 700;
983 color: var(--text-strong);
984 margin-bottom: var(--s-2);
985 }
986 .landing-bigstat-label {
987 font-family: var(--font-mono);
988 font-size: 11px;
958d26aClaude989 font-weight: 500;
c963db5Claude990 text-transform: uppercase;
991 letter-spacing: 0.14em;
992 color: var(--text-faint);
2b821b7Claude993 }
c963db5Claude994 @media (max-width: 800px) {
995 .landing-bigstats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
996 }
997 @media (max-width: 480px) {
998 .landing-bigstats-grid { grid-template-columns: 1fr; gap: 24px; }
958d26aClaude999 }
1000
1001 /* ---------- Section base ---------- */
1002 .landing-section { margin: var(--s-20) auto; }
2b821b7Claude1003
4c47454Claude1004 /* ---------- Feature grid ---------- */
1005 .landing-features {
2b821b7Claude1006 display: grid;
1007 grid-template-columns: repeat(3, 1fr);
958d26aClaude1008 gap: 16px;
2b821b7Claude1009 }
1010 .landing-feature {
958d26aClaude1011 background: var(--bg-elevated);
2b821b7Claude1012 border: 1px solid var(--border);
958d26aClaude1013 border-radius: var(--r-lg);
1014 padding: var(--s-7);
1015 position: relative;
1016 overflow: hidden;
1017 isolation: isolate;
1018 transition:
1019 transform var(--t-base) var(--ease-out-quart),
1020 border-color var(--t-base) var(--ease),
1021 box-shadow var(--t-base) var(--ease);
1022 }
1023 .landing-feature::before {
1024 content: '';
1025 position: absolute;
1026 inset: 0;
1027 background: radial-gradient(120% 100% at 0% 0%, rgba(140,109,255,0.08), transparent 55%);
1028 opacity: 0;
1029 transition: opacity var(--t-base) var(--ease);
1030 z-index: -1;
4c47454Claude1031 }
1032 .landing-feature:hover {
958d26aClaude1033 transform: translateY(-3px);
1034 border-color: var(--border-strong);
1035 box-shadow: var(--elev-2);
2b821b7Claude1036 }
958d26aClaude1037 .landing-feature:hover::before { opacity: 1; }
2b821b7Claude1038 .landing-feature-icon {
4c47454Claude1039 display: inline-flex;
1040 align-items: center;
1041 justify-content: center;
958d26aClaude1042 width: 40px;
1043 height: 40px;
1044 border-radius: var(--r);
1045 background: var(--accent-gradient-soft);
1046 color: var(--accent);
1047 margin-bottom: var(--s-4);
1048 border: 1px solid rgba(140,109,255,0.20);
2b821b7Claude1049 }
1050 .landing-feature-title {
958d26aClaude1051 font-family: var(--font-display);
1052 font-size: 19px;
1053 font-weight: 600;
1054 letter-spacing: -0.018em;
1055 margin: 0 0 var(--s-2);
1056 color: var(--text-strong);
2b821b7Claude1057 }
1058 .landing-feature-desc {
958d26aClaude1059 font-size: var(--t-sm);
1060 color: var(--text-muted);
1061 line-height: 1.6;
1062 margin: 0;
1063 }
1064
1065 /* ---------- Walkthrough ---------- */
1066 .landing-walk-grid {
1067 display: grid;
1068 grid-template-columns: repeat(4, 1fr);
1069 gap: 16px;
1070 counter-reset: walk;
1071 }
1072 .landing-walk-step {
1073 position: relative;
1074 padding: var(--s-7) var(--s-6) var(--s-6);
1075 background: var(--bg-elevated);
1076 border: 1px solid var(--border);
1077 border-radius: var(--r-lg);
1078 }
1079 .landing-walk-step::after {
1080 content: '';
1081 position: absolute;
1082 top: 50%;
1083 right: -12px;
1084 width: 12px;
1085 height: 1px;
1086 background: var(--border-strong);
1087 }
1088 .landing-walk-step:last-child::after { display: none; }
1089 .landing-walk-num {
1090 display: inline-block;
1091 font-family: var(--font-mono);
1092 font-size: 11px;
1093 color: var(--accent);
1094 background: var(--accent-gradient-faint);
1095 border: 1px solid rgba(140,109,255,0.30);
1096 padding: 3px 8px;
1097 border-radius: var(--r-full);
1098 letter-spacing: 0.06em;
1099 margin-bottom: var(--s-3);
1100 }
1101 .landing-walk-title {
1102 font-family: var(--font-display);
1103 font-size: 22px;
1104 font-weight: 600;
1105 letter-spacing: -0.022em;
1106 margin: 0 0 var(--s-2);
1107 color: var(--text-strong);
1108 }
1109 .landing-walk-desc {
1110 font-size: var(--t-sm);
2b821b7Claude1111 color: var(--text-muted);
1112 line-height: 1.55;
1113 margin: 0;
1114 }
1115
958d26aClaude1116 /* ---------- Terminal ---------- */
1117 .landing-terminal-section { margin-top: var(--s-16); }
4c47454Claude1118 .landing-terminal-wrap {
1119 display: flex;
2b821b7Claude1120 justify-content: center;
1121 }
4c47454Claude1122 .landing-terminal {
1123 width: 100%;
958d26aClaude1124 max-width: 820px;
1125 background: linear-gradient(180deg, #0a0b12 0%, #06070c 100%);
1126 border: 1px solid var(--border-strong);
1127 border-radius: var(--r-lg);
1128 overflow: hidden;
1129 box-shadow: var(--elev-3), 0 0 60px -10px rgba(140,109,255,0.18);
4c47454Claude1130 text-align: left;
2b821b7Claude1131 }
958d26aClaude1132 :root[data-theme='light'] .landing-terminal {
1133 background: linear-gradient(180deg, #0f111a 0%, #06070c 100%);
1134 }
1135 .landing-terminal-chrome {
1136 display: flex;
1137 align-items: center;
1138 gap: 7px;
1139 padding: 11px 14px;
1140 background: rgba(255,255,255,0.025);
1141 border-bottom: 1px solid rgba(255,255,255,0.06);
1142 position: relative;
1143 }
1144 .landing-terminal-dot {
1145 width: 11px;
1146 height: 11px;
1147 border-radius: 50%;
1148 flex-shrink: 0;
1149 }
1150 .landing-terminal-dot-r { background: #ff5f57; }
1151 .landing-terminal-dot-y { background: #febc2e; }
1152 .landing-terminal-dot-g { background: #28c840; }
1153 .landing-terminal-title {
1154 position: absolute;
1155 left: 50%;
1156 transform: translateX(-50%);
1157 font-family: var(--font-mono);
1158 font-size: 11px;
1159 color: rgba(237,237,242,0.55);
1160 letter-spacing: 0.01em;
1161 }
1162 .landing-terminal-body {
1163 padding: var(--s-6) var(--s-7);
1164 font-family: var(--font-mono);
1165 font-feature-settings: var(--mono-feat);
1166 font-size: 13.5px;
1167 line-height: 1.85;
1168 color: rgba(237,237,242,0.92);
1169 }
4c47454Claude1170 .landing-term-line {
1171 display: flex;
1172 gap: 10px;
1173 white-space: pre-wrap;
1174 word-break: break-all;
2b821b7Claude1175 }
958d26aClaude1176 .landing-term-out { color: rgba(237,237,242,0.7); }
1177 .landing-term-prompt { color: rgba(140,109,255,0.85); user-select: none; flex-shrink: 0; }
1178 .landing-term-meta { color: rgba(237,237,242,0.45); }
1179 .landing-term-ok { color: var(--green); user-select: none; flex-shrink: 0; }
1180 .landing-term-ok-line { color: rgba(237,237,242,0.92); }
1181 .landing-term-cursor { margin-top: 4px; }
1182 .landing-term-blink {
1183 animation: blink 1.05s steps(2) infinite;
1184 color: var(--accent);
1185 }
1186 @keyframes blink { 50% { opacity: 0; } }
1187
1188 /* ---------- Comparison ---------- */
1189 .landing-compare {
1190 max-width: 920px;
1191 margin: 0 auto;
1192 border: 1px solid var(--border);
1193 border-radius: var(--r-lg);
1194 overflow: hidden;
1195 background: var(--bg-elevated);
1196 }
1197 .landing-compare-row {
1198 display: grid;
1199 grid-template-columns: 1fr 180px 180px;
1200 align-items: center;
1201 padding: 14px 20px;
1202 border-bottom: 1px solid var(--border-subtle);
1203 font-size: var(--t-sm);
1204 transition: background var(--t-fast) var(--ease);
1205 }
1206 .landing-compare-row:last-child { border-bottom: none; }
1207 .landing-compare-row:hover { background: var(--bg-hover); }
1208 .landing-compare-feature {
1209 color: var(--text-strong);
1210 font-weight: 500;
1211 }
1212 .landing-compare-them, .landing-compare-us {
1213 text-align: center;
1214 font-family: var(--font-mono);
1215 font-size: 12px;
1216 color: var(--text-muted);
1217 }
1218 .landing-compare-us { color: var(--green); font-weight: 500; }
1219 .landing-compare-hl .landing-compare-us {
1220 color: var(--accent);
1221 font-weight: 600;
2b821b7Claude1222 }
958d26aClaude1223 .landing-compare-hl .landing-compare-feature::after {
1224 content: 'NEW';
1225 margin-left: 8px;
1226 padding: 1px 6px;
1227 border-radius: 4px;
1228 background: var(--accent-gradient-faint);
1229 color: var(--accent);
1230 font-family: var(--font-mono);
1231 font-size: 9px;
1232 letter-spacing: 0.1em;
1233 font-weight: 600;
1234 vertical-align: 1px;
1235 }
1236 @media (max-width: 720px) {
1237 .landing-compare-row { grid-template-columns: 1fr 80px 80px; padding: 12px 14px; }
1238 .landing-compare-hl .landing-compare-feature::after { display: none; }
1239 }
1240
1241 /* ---------- Pricing ---------- */
1242 .landing-pricing {
1243 display: grid;
1244 grid-template-columns: repeat(3, 1fr);
1245 gap: 16px;
1246 max-width: 1080px;
1247 margin: 0 auto;
1248 align-items: stretch;
1249 }
1250 .landing-price-card {
1251 position: relative;
1252 background: var(--bg-elevated);
1253 border: 1px solid var(--border);
1254 border-radius: var(--r-lg);
1255 padding: var(--s-7);
1256 display: flex;
1257 flex-direction: column;
1258 gap: var(--s-4);
1259 transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
1260 }
1261 .landing-price-card:hover {
1262 border-color: var(--border-strong);
1263 transform: translateY(-2px);
1264 }
1265 .landing-price-hl {
1266 border-color: rgba(140,109,255,0.35);
1267 box-shadow: var(--elev-2), 0 0 0 1px rgba(140,109,255,0.25);
1268 background:
1269 linear-gradient(180deg, rgba(140,109,255,0.05), transparent 50%),
1270 var(--bg-elevated);
1271 }
1272 .landing-price-hl:hover { border-color: rgba(140,109,255,0.55); }
1273 .landing-price-badge {
1274 position: absolute;
1275 top: -10px;
1276 left: 50%;
1277 transform: translateX(-50%);
1278 padding: 3px 12px;
1279 background: var(--accent-gradient);
1280 color: #fff;
1281 font-family: var(--font-mono);
1282 font-size: 10px;
1283 letter-spacing: 0.1em;
1284 text-transform: uppercase;
1285 font-weight: 600;
1286 border-radius: var(--r-full);
1287 box-shadow: 0 4px 12px -2px rgba(140,109,255,0.4);
1288 }
1289 .landing-price-tier {
1290 font-family: var(--font-mono);
1291 font-size: 11px;
1292 text-transform: uppercase;
1293 letter-spacing: 0.16em;
1294 color: var(--text-muted);
1295 }
1296 .landing-price-amount {
1297 display: flex;
1298 align-items: baseline;
1299 gap: 8px;
1300 }
1301 .landing-price-num {
1302 font-family: var(--font-display);
1303 font-size: 40px;
1304 font-weight: 600;
1305 letter-spacing: -0.03em;
1306 color: var(--text-strong);
1307 }
1308 .landing-price-cad {
1309 font-size: var(--t-sm);
1310 color: var(--text-faint);
1311 }
1312 .landing-price-desc {
1313 font-size: var(--t-sm);
1314 color: var(--text-muted);
1315 line-height: 1.55;
1316 margin: 0;
1317 }
1318 .landing-price-features {
1319 list-style: none;
1320 padding: 0;
1321 margin: 0;
1322 display: flex;
1323 flex-direction: column;
1324 gap: 8px;
1325 font-size: var(--t-sm);
1326 color: var(--text);
1327 }
1328 .landing-price-features li {
1329 display: flex;
1330 align-items: center;
1331 gap: 9px;
1332 }
1333 .landing-price-check {
1334 color: var(--accent);
1335 font-weight: 600;
4c47454Claude1336 flex-shrink: 0;
2b821b7Claude1337 }
958d26aClaude1338 .landing-price-cta { margin-top: auto; }
1339
1340 /* ---------- Closing CTA ---------- */
1341 .landing-cta-section { margin: var(--s-20) auto var(--s-16); }
1342 .landing-cta-card {
1343 position: relative;
1344 text-align: center;
1345 padding: var(--s-16) var(--s-7);
1346 border: 1px solid var(--border-strong);
1347 border-radius: var(--r-2xl);
1348 background: var(--bg-elevated);
1349 overflow: hidden;
1350 isolation: isolate;
1351 }
1352 .landing-cta-bg {
1353 position: absolute;
1354 inset: 0;
1355 z-index: -1;
1356 background:
1357 radial-gradient(60% 100% at 50% 0%, rgba(140,109,255,0.16), transparent 65%),
1358 radial-gradient(40% 80% at 80% 100%, rgba(54,197,214,0.10), transparent 65%);
1359 }
1360 .landing-cta-card::after {
1361 content: '';
1362 position: absolute;
1363 inset: 0;
1364 z-index: -1;
1365 background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
1366 background-size: 24px 24px;
1367 mask-image: radial-gradient(ellipse at center, #000 0%, transparent 65%);
1368 -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 65%);
1369 opacity: 0.6;
1370 }
1371 :root[data-theme='light'] .landing-cta-card::after {
1372 background-image: radial-gradient(rgba(15,16,28,0.07) 1px, transparent 1px);
1373 }
1374 .landing-cta-card .eyebrow { justify-content: center; }
1375 .landing-cta-title {
1376 font-family: var(--font-display);
1377 font-size: clamp(28px, 4.4vw, 56px);
1378 line-height: 1.05;
1379 letter-spacing: -0.03em;
1380 font-weight: 600;
1381 margin: var(--s-3) 0 var(--s-4);
1382 color: var(--text-strong);
1383 }
1384 .landing-cta-sub {
1385 font-size: var(--t-md);
1386 color: var(--text-muted);
1387 max-width: 560px;
1388 margin: 0 auto var(--s-8);
1389 line-height: 1.55;
1390 }
1391 .landing-cta-buttons {
1392 display: flex;
1393 gap: 12px;
1394 justify-content: center;
1395 flex-wrap: wrap;
1396 }
2b821b7Claude1397
1398 /* ---------- Responsive ---------- */
958d26aClaude1399 @media (max-width: 960px) {
1400 .landing-features { grid-template-columns: repeat(2, 1fr); }
1401 .landing-walk-grid { grid-template-columns: repeat(2, 1fr); }
1402 .landing-walk-step::after { display: none; }
1403 .landing-pricing { grid-template-columns: 1fr; max-width: 480px; }
1404 }
1405 @media (max-width: 640px) {
1406 .landing-hero { padding: var(--s-14) 0 var(--s-10); }
1407 .landing-hero-cmd { flex-wrap: wrap; justify-content: center; }
1408 .landing-hero-ctas { flex-direction: column; align-items: stretch; }
1409 .landing-hero-ctas .btn { width: 100%; justify-content: center; }
1410 .landing-features { grid-template-columns: 1fr; }
1411 .landing-walk-grid { grid-template-columns: 1fr; }
1412 .landing-section { margin: var(--s-12) auto; }
1413 .landing-cta-card { padding: var(--s-10) var(--s-5); }
1414 .landing-cta-buttons .btn { width: 100%; justify-content: center; }
2b821b7Claude1415 }
1416`;