Commit29924bcunknown_key
feat(landing): world-class light 2030 marketing reboot
feat(landing): world-class light 2030 marketing reboot Replace the public landing with a self-contained, Linear/Vercel-grade light design: sticky blur nav, gradient hero with a product card mock, live stat band, feature grid, the closed-loop walkthrough, a dramatic 2030 vision band, differentiator quote, CTA, and footer. CSS-only entrance motion with reduced-motion + no-JS fallbacks. Rendered directly from / (own DOCTYPE + shell) so it never inherits the dark app Layout. https://claude.ai/code/session_01QKaJBYpD6DGErWHrRVChkf
2 files changed+524−1429924bc108648f29d78f5dd71fea55fdc09ec3d5
2 changed files+524−14
Modifiedsrc/routes/web.tsx+10−14View fileUnifiedSplit
@@ -51,6 +51,7 @@ import { softAuth, requireAuth } from "../middleware/auth";
5151import type { AuthEnv } from "../middleware/auth";
5252import { trackByName } from "../lib/traffic";
5353import { LandingPage, type LandingLiveFeed } from "../views/landing";
54import { Landing2030Page } from "../views/landing-2030";
5455import { computePublicStats, type PublicStats } from "../lib/public-stats";
5556import {
5657 listQueuedAiBuildIssues,
@@ -1716,20 +1717,15 @@ web.get("/", async (c) => {
17161717 liveFeed = null;
17171718 }
17181719
1719 return c.html(
1720 <Layout
1721 user={null}
1722 // Block L10 — SEO + Open Graph for the public landing.
1723 fullTitle="Gluecron — The git host built around Claude"
1724 description="Label an issue. Walk away. Wake up to a merged PR. Gluecron is the AI-native git host with built-in code review, auto-merge, and a Claude-first toolchain."
1725 ogTitle="Gluecron — The git host built around Claude"
1726 ogDescription="Label an issue. Walk away. Wake up to a merged PR. Gluecron is the AI-native git host with built-in code review, auto-merge, and a Claude-first toolchain."
1727 ogType="website"
1728 twitterCard="summary_large_image"
1729 >
1730 <LandingPage stats={stats} publicStats={publicStats} liveFeed={liveFeed} />
1731 </Layout>
1732 );
1720 // 2030 reboot — the public landing is a self-contained light marketing
1721 // document (its own shell + design system), rendered directly so it never
1722 // inherits the dark app Layout. `publicStats` / `liveFeed` remain computed
1723 // above for the legacy LandingPage and other surfaces; the new page uses the
1724 // headline counters from `stats`.
1725 void publicStats;
1726 void liveFeed;
1727 void LandingPage;
1728 return c.html("<!DOCTYPE html>" + String(<Landing2030Page stats={stats} />));
17331729});
17341730
17351731// New repository form
Addedsrc/views/landing-2030.tsx+514−0View fileUnifiedSplit
@@ -0,0 +1,514 @@
1/**
2 * Landing2030 — the public marketing landing page.
3 *
4 * A fully self-contained light HTML document (its own <head>, fonts, and CSS)
5 * rendered directly from the root route, bypassing the dark app Layout so the
6 * marketing surface can be a pristine, Linear/Vercel-grade design without
7 * fighting the application chrome. Theme: white, editorial, "site of the
8 * future" (2030). Entrance motion is CSS-only and degrades to fully-visible
9 * content when JS or animation is unavailable.
10 */
11import type { FC } from "hono/jsx";
12
13export interface Landing2030Props {
14 stats?: { publicRepos?: number; users?: number };
15}
16
17const fmt = (n?: number) => {
18 if (n == null) return "—";
19 if (n >= 1000) return `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k`;
20 return String(n);
21};
22
23/* ---- small stroke icons (inherit currentColor) ---------------------- */
24const IconReview: FC = () => (
25 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
26 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
27 <path d="M12 3l2.2 4.6L19 8.3l-3.4 3.4.8 4.8L12 14.2 7.6 16.5l.8-4.8L5 8.3l4.8-.7z" />
28 </svg>
29);
30const IconMerge: FC = () => (
31 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
32 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
33 <circle cx="6" cy="6" r="2.4" /><circle cx="6" cy="18" r="2.4" />
34 <circle cx="18" cy="9" r="2.4" /><path d="M6 8.4v7.2M8.3 7.2C13 7.6 15.6 9 15.6 9" />
35 </svg>
36);
37const IconGate: FC = () => (
38 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
39 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
40 <path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z" /><path d="M9 12l2 2 4-4" />
41 </svg>
42);
43const IconGit: FC = () => (
44 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
45 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
46 <circle cx="6" cy="6" r="2.4" /><circle cx="6" cy="18" r="2.4" />
47 <circle cx="18" cy="14" r="2.4" /><path d="M6 8.4v7.2M6 14a8 8 0 008-8h1.8" />
48 </svg>
49);
50const IconCI: FC = () => (
51 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
52 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
53 <path d="M12 3a9 9 0 109 9" /><path d="M12 7v5l3 2" /><path d="M21 3v4h-4" />
54 </svg>
55);
56const IconIntel: FC = () => (
57 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
58 stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
59 <path d="M12 3a4 4 0 014 4c1.6.6 2.6 2 2.6 3.8 0 1-.4 2-1 2.7.3.5.4 1.1.4 1.7A3.8 3.8 0 0112 19a3.8 3.8 0 01-6-3.8c0-.6.1-1.2.4-1.7-.6-.7-1-1.7-1-2.7C5.4 9 6.4 7.6 8 7a4 4 0 014-4z" />
60 <path d="M12 3v16" />
61 </svg>
62);
63
64const FEATURES: { icon: FC; title: string; body: string }[] = [
65 { icon: IconReview, title: "Claude code review",
66 body: "Every pull request gets a senior-level review the moment it opens — line-level comments, risk flags, and a verdict, in seconds." },
67 { icon: IconMerge, title: "Merge while you sleep",
68 body: "Gates green and review clean? Gluecron merges autonomously. Label an issue at night, wake to a shipped PR." },
69 { icon: IconGate, title: "Push-time gate enforcement",
70 body: "Security and quality gates run at the moment of push — not minutes later in CI. Bad code never reaches your branch." },
71 { icon: IconGit, title: "Git-native hosting",
72 body: "Full Smart-HTTP git over the wire. Clone, push, fork, and browse — everything you expect from a host, self-owned." },
73 { icon: IconCI, title: "CI that comes built-in",
74 body: "No YAML archaeology. Checks, deploys, and post-receive automation are part of the platform, wired from first push." },
75 { icon: IconIntel, title: "Semantic code intelligence",
76 body: "A vector-indexed understanding of your whole repo powers search, review, and the agents that act on your behalf." },
77];
78
79const STEPS: { n: string; title: string; body: string }[] = [
80 { n: "01", title: "Label an issue", body: "Drop a label on an issue — or just describe what you want. That's the whole input." },
81 { n: "02", title: "Agents go to work", body: "Claude opens a branch, writes the change, and submits a pull request against your gates." },
82 { n: "03", title: "Reviewed & gated", body: "The PR is reviewed line-by-line and run through push-time security and quality gates." },
83 { n: "04", title: "Merged, autonomously", body: "Green across the board? It merges itself and deploys. You wake up to shipped work." },
84];
85
86export const Landing2030Page: FC<Landing2030Props> = ({ stats }) => {
87 const title = "Gluecron — The git host built for 2030";
88 const desc =
89 "Gluecron is the AI-native git host. Claude reviews every pull request, gates run at push time, and clean PRs merge while you sleep. Label an issue, walk away, wake up to a merged PR.";
90 return (
91 <html lang="en">
92 <head>
93 <meta charset="UTF-8" />
94 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
95 <meta name="theme-color" content="#ffffff" />
96 <title>{title}</title>
97 <meta name="description" content={desc} />
98 <meta property="og:title" content={title} />
99 <meta property="og:description" content={desc} />
100 <meta property="og:type" content="website" />
101 <meta name="twitter:card" content="summary_large_image" />
102 <link rel="icon" type="image/svg+xml" href="/icon.svg" />
103 <link rel="preconnect" href="https://fonts.googleapis.com" />
104 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
105 <link
106 rel="stylesheet"
107 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
108 />
109 <style dangerouslySetInnerHTML={{ __html: landing2030Css }} />
110 </head>
111 <body>
112 {/* ---- nav ---- */}
113 <header class="nv" id="nv">
114 <div class="nv-in">
115 <a href="/" class="nv-logo">
116 <span class="nv-mark" aria-hidden="true" />
117 gluecron
118 </a>
119 <nav class="nv-links" aria-label="Primary">
120 <a href="#features">Product</a>
121 <a href="#loop">How it works</a>
122 <a href="/pricing">Pricing</a>
123 <a href="/explore">Explore</a>
124 </nav>
125 <div class="nv-cta">
126 <a href="/login" class="btn btn-ghost">Sign in</a>
127 <a href="/register" class="btn btn-solid">Start building</a>
128 </div>
129 </div>
130 </header>
131
132 {/* ---- hero ---- */}
133 <section class="hero">
134 <div class="hero-glow" aria-hidden="true" />
135 <div class="wrap hero-in">
136 <a href="#loop" class="eyebrow rise" style="--d:0ms">
137 <span class="eyebrow-dot" /> The AI-native git host · built for 2030
138 </a>
139 <h1 class="display rise" style="--d:60ms">
140 The git host built for <span class="grad">2030</span>.
141 </h1>
142 <p class="lede rise" style="--d:120ms">
143 Gluecron hosts your code, reviews every pull request with Claude,
144 enforces gates at push time, and merges clean work while you sleep.
145 Label an issue, walk away, wake up to a merged PR.
146 </p>
147 <div class="hero-actions rise" style="--d:180ms">
148 <a href="/register" class="btn btn-solid btn-lg">Start building →</a>
149 <a href="#loop" class="btn btn-ghost btn-lg">See how it works</a>
150 </div>
151 <div class="hero-trust rise" style="--d:240ms">
152 Self-hosted · Git-native · Claude-first
153 </div>
154
155 {/* product card mock */}
156 <div class="hero-card rise" style="--d:320ms" aria-hidden="true">
157 <div class="hc-bar">
158 <span class="hc-dot" /><span class="hc-dot" /><span class="hc-dot" />
159 <span class="hc-path">gluecron.com / your-org / api · #128</span>
160 </div>
161 <div class="hc-body">
162 <div class="hc-pr">
163 <span class="hc-badge hc-merged">✓ Merged</span>
164 <span class="hc-prtitle">Fix race condition in token refresh</span>
165 </div>
166 <div class="hc-review">
167 <span class="hc-ava">C</span>
168 <div class="hc-rev-body">
169 <div class="hc-rev-head">Claude review · <em>approved</em></div>
170 <div class="hc-rev-text">
171 Mutex now guards the refresh path; the double-fetch under
172 contention is resolved. Gates green. Auto-merging.
173 </div>
174 </div>
175 </div>
176 <div class="hc-checks">
177 <span class="hc-check ok">● gate: security</span>
178 <span class="hc-check ok">● gate: tests</span>
179 <span class="hc-check ok">● review: Claude</span>
180 <span class="hc-check ok">● deploy: live</span>
181 </div>
182 </div>
183 </div>
184 </div>
185 </section>
186
187 {/* ---- stat band ---- */}
188 <section class="stats">
189 <div class="wrap stats-in">
190 <div class="stat"><div class="stat-n">{fmt(stats?.publicRepos)}</div><div class="stat-l">public repositories</div></div>
191 <div class="stat"><div class="stat-n">{fmt(stats?.users)}</div><div class="stat-l">builders onboard</div></div>
192 <div class="stat"><div class="stat-n">< 30s</div><div class="stat-l">to first review</div></div>
193 <div class="stat"><div class="stat-n">24/7</div><div class="stat-l">autonomous merges</div></div>
194 </div>
195 </section>
196
197 {/* ---- features ---- */}
198 <section class="sec" id="features">
199 <div class="wrap">
200 <div class="sec-head">
201 <span class="kicker">The platform</span>
202 <h2 class="h2">Everything GitHub does. Then everything it doesn't.</h2>
203 <p class="sub">A complete git host with code intelligence wired into every step — review, gates, CI, and autonomous merge, native to the platform.</p>
204 </div>
205 <div class="grid">
206 {FEATURES.map((f) => {
207 const Ic = f.icon;
208 return (
209 <div class="card">
210 <div class="card-ic"><Ic /></div>
211 <h3 class="card-t">{f.title}</h3>
212 <p class="card-b">{f.body}</p>
213 </div>
214 );
215 })}
216 </div>
217 </div>
218 </section>
219
220 {/* ---- the loop ---- */}
221 <section class="sec sec-alt" id="loop">
222 <div class="wrap">
223 <div class="sec-head">
224 <span class="kicker">The closed loop</span>
225 <h2 class="h2">From a label to a shipped PR — untouched by you.</h2>
226 <p class="sub">Gluecron closes the loop between intent and production. You set direction; the platform does the round-trip.</p>
227 </div>
228 <div class="loop">
229 {STEPS.map((s, i) => (
230 <div class="step">
231 <div class="step-n">{s.n}</div>
232 <h3 class="step-t">{s.title}</h3>
233 <p class="step-b">{s.body}</p>
234 {i < STEPS.length - 1 && <span class="step-arrow" aria-hidden="true">→</span>}
235 </div>
236 ))}
237 </div>
238 </div>
239 </section>
240
241 {/* ---- 2030 vision band ---- */}
242 <section class="vision">
243 <div class="vision-grid" aria-hidden="true" />
244 <div class="wrap vision-in">
245 <span class="kicker kicker-light">2030</span>
246 <h2 class="vh">By 2030, code reviews itself,<br />gates itself, and ships itself.</h2>
247 <p class="vsub">
248 The era of babysitting pipelines is ending. Gluecron is built for the
249 world that's coming — where engineers set intent and an autonomous
250 platform carries it to production, safely, around the clock. We didn't
251 bolt AI onto a git host. We rebuilt the git host around it.
252 </p>
253 <div class="vstats">
254 <div class="vstat"><b>Autonomous</b><span>review → gate → merge → deploy</span></div>
255 <div class="vstat"><b>Always on</b><span>your repo never sleeps</span></div>
256 <div class="vstat"><b>Self-owned</b><span>your code, your server, your keys</span></div>
257 </div>
258 </div>
259 </section>
260
261 {/* ---- differentiator ---- */}
262 <section class="sec">
263 <div class="wrap quote-wrap">
264 <p class="quote">
265 “GitHub gives you a place to <em>store</em> code.
266 Gluecron gives you a place where code <em>moves on its own.</em>”
267 </p>
268 </div>
269 </section>
270
271 {/* ---- final CTA ---- */}
272 <section class="cta">
273 <div class="wrap cta-in">
274 <h2 class="cta-h">Start building on the future of git.</h2>
275 <p class="cta-sub">Spin up a repository, push a commit, and watch the loop close.</p>
276 <div class="hero-actions">
277 <a href="/register" class="btn btn-solid btn-lg">Create your account →</a>
278 <a href="/explore" class="btn btn-ghost btn-lg">Explore public repos</a>
279 </div>
280 </div>
281 </section>
282
283 {/* ---- footer ---- */}
284 <footer class="ft">
285 <div class="wrap ft-in">
286 <div class="ft-brand">
287 <a href="/" class="nv-logo"><span class="nv-mark" aria-hidden="true" />gluecron</a>
288 <p class="ft-tag">The AI-native git host. Built for 2030.</p>
289 </div>
290 <div class="ft-cols">
291 <div class="ft-col">
292 <h4>Product</h4>
293 <a href="#features">Features</a>
294 <a href="/pricing">Pricing</a>
295 <a href="/explore">Explore</a>
296 </div>
297 <div class="ft-col">
298 <h4>Company</h4>
299 <a href="/about">About</a>
300 <a href="/login">Sign in</a>
301 <a href="/register">Start building</a>
302 </div>
303 <div class="ft-col">
304 <h4>Account</h4>
305 <a href="/login">Log in</a>
306 <a href="/register">Register</a>
307 <a href="/settings">Settings</a>
308 </div>
309 </div>
310 </div>
311 <div class="wrap ft-bottom">
312 <span>© {new Date().getFullYear()} Gluecron</span>
313 <span>Self-hosted · Git-native · Claude-first</span>
314 </div>
315 </footer>
316
317 <script dangerouslySetInnerHTML={{ __html: landing2030Js }} />
318 </body>
319 </html>
320 );
321};
322
323export default Landing2030Page;
324
325const landing2030Js = `
326(function(){
327 var nv = document.getElementById('nv');
328 function onScroll(){ if(!nv) return; nv.classList.toggle('nv-stuck', window.scrollY > 8); }
329 window.addEventListener('scroll', onScroll, {passive:true}); onScroll();
330 // additive scroll-reveal: base state is already visible, this only enhances
331 if ('IntersectionObserver' in window && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){
332 var io = new IntersectionObserver(function(es){
333 es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('seen'); io.unobserve(e.target); } });
334 }, {threshold:0.12});
335 document.querySelectorAll('.card,.step,.stat,.vstat').forEach(function(el){ el.classList.add('reveal'); io.observe(el); });
336 }
337})();
338`;
339
340const landing2030Css = `
341:root{
342 --bg:#ffffff; --bg-soft:#fafafb; --ink:#0a0b0d; --ink-2:#3a3d45;
343 --muted:#676d78; --line:rgba(13,16,23,.08); --line-2:rgba(13,16,23,.12);
344 --brand:#5b5bf6; --brand-2:#7c4dff; --brand-3:#2f6bff;
345 --grad:linear-gradient(100deg,#7c4dff 0%,#5b5bf6 45%,#2f6bff 100%);
346 --radius:16px; --shadow:0 1px 2px rgba(13,16,23,.04),0 12px 32px rgba(13,16,23,.06);
347 --maxw:1140px;
348}
349*{box-sizing:border-box}
350html{scroll-behavior:smooth}
351body{margin:0;background:var(--bg);color:var(--ink);
352 font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
353 font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
354a{color:inherit;text-decoration:none}
355.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
356.display,.h2,.vh,.cta-h{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.02em;font-weight:700}
357.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
358
359/* nav */
360.nv{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(12px);
361 background:rgba(255,255,255,.72);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s}
362.nv-stuck{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(13,16,23,.02)}
363.nv-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px}
364.nv-logo{display:inline-flex;align-items:center;gap:9px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em}
365.nv-mark{width:18px;height:18px;border-radius:6px;background:var(--grad);box-shadow:0 2px 8px rgba(92,91,246,.4);display:inline-block}
366.nv-links{display:flex;gap:26px;margin-left:14px}
367.nv-links a{color:var(--ink-2);font-size:15px;font-weight:500;transition:color .15s}
368.nv-links a:hover{color:var(--ink)}
369.nv-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
370.btn{display:inline-flex;align-items:center;gap:6px;border-radius:10px;font-weight:600;font-size:15px;
371 padding:9px 16px;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s;border:1px solid transparent;white-space:nowrap}
372.btn:hover{transform:translateY(-1px)}
373.btn-solid{background:var(--ink);color:#fff}
374.btn-solid:hover{box-shadow:0 8px 22px rgba(13,16,23,.18)}
375.btn-ghost{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.6)}
376.btn-ghost:hover{border-color:var(--ink);background:#fff}
377.btn-lg{padding:13px 22px;font-size:16px;border-radius:12px}
378
379/* hero */
380.hero{position:relative;overflow:hidden;padding:84px 0 40px;text-align:center}
381.hero-glow{position:absolute;inset:-20% 0 auto 0;height:620px;z-index:0;pointer-events:none;
382 background:radial-gradient(60% 60% at 50% 0%,rgba(124,77,255,.18),transparent 70%),
383 radial-gradient(40% 50% at 75% 10%,rgba(47,107,255,.14),transparent 70%),
384 radial-gradient(40% 50% at 25% 10%,rgba(91,91,246,.12),transparent 70%)}
385.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
386.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);
387 background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;box-shadow:var(--shadow)}
388.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}
389.display{font-size:clamp(40px,7vw,76px);line-height:1.02;margin:26px 0 0;max-width:14ch}
390.lede{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:60ch;margin:22px auto 0;font-weight:450}
391.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
392.hero-trust{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
393
394/* hero card */
395.hero-card{margin:54px auto 0;max-width:760px;width:100%;text-align:left;background:#fff;
396 border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px -30px rgba(13,16,23,.28),var(--shadow);overflow:hidden}
397.hc-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
398.hc-dot{width:11px;height:11px;border-radius:50%;background:#dfe1e6}
399.hc-path{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted)}
400.hc-body{padding:20px}
401.hc-pr{display:flex;align-items:center;gap:12px}
402.hc-badge{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px}
403.hc-merged{background:rgba(91,91,246,.1);color:#5b5bf6}
404.hc-prtitle{font-weight:600;font-size:15.5px}
405.hc-review{display:flex;gap:12px;margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
406.hc-ava{flex:none;width:30px;height:30px;border-radius:8px;background:var(--grad);color:#fff;font-weight:700;
407 display:grid;place-items:center;font-size:14px}
408.hc-rev-head{font-size:13.5px;font-weight:600;color:var(--ink-2)}
409.hc-rev-head em{color:#5b5bf6;font-style:normal}
410.hc-rev-text{font-size:14px;color:var(--muted);margin-top:3px}
411.hc-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
412.hc-check{font-family:'JetBrains Mono',monospace;font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink-2)}
413.hc-check.ok{color:#2c8a52}.hc-check.ok::first-letter{color:#2c8a52}
414
415/* stats */
416.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
417.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 24px}
418.stat{text-align:center}
419.stat-n{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em}
420.stat-l{font-size:13.5px;color:var(--muted);margin-top:4px}
421
422/* sections */
423.sec{padding:92px 0}
424.sec-alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
425.sec-head{max-width:680px;margin:0 auto 52px;text-align:center}
426.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
427 color:#5b5bf6;margin-bottom:14px}
428.h2{font-size:clamp(28px,4.4vw,46px);line-height:1.08;margin:0}
429.sub{color:var(--muted);font-size:18px;margin:16px auto 0;max-width:56ch}
430
431/* feature grid */
432.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
433.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .18s,box-shadow .25s,border-color .2s}
434.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
435.card-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#5b5bf6;
436 background:rgba(91,91,246,.09);border:1px solid rgba(91,91,246,.14);margin-bottom:16px}
437.card-ic svg{width:22px;height:22px}
438.card-t{font-size:18px;font-weight:600;margin:0 0 7px;font-family:'Inter Tight',sans-serif;letter-spacing:-.01em}
439.card-b{color:var(--muted);font-size:15px;margin:0;line-height:1.6}
440
441/* loop */
442.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
443.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
444.step-n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#5b5bf6;margin-bottom:12px}
445.step-t{font-size:17px;font-weight:600;margin:0 0 6px;font-family:'Inter Tight',sans-serif}
446.step-b{color:var(--muted);font-size:14.5px;margin:0}
447.step-arrow{position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--line-2);font-size:20px;z-index:2}
448
449/* vision band */
450.vision{position:relative;overflow:hidden;padding:104px 0;color:#fff;text-align:center;
451 background:radial-gradient(120% 120% at 50% -10%,#2a2350 0%,#15122b 45%,#0a0913 100%)}
452.vision-grid{position:absolute;inset:0;opacity:.5;
453 background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
454 background-size:54px 54px;mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent 75%)}
455.vision-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
456.kicker-light{color:#b7a8ff}
457.vh{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:0;letter-spacing:-.02em}
458.vsub{color:rgba(255,255,255,.74);font-size:18px;max-width:62ch;margin:22px auto 0}
459.vstats{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;margin-top:42px}
460.vstat{display:flex;flex-direction:column;gap:3px}
461.vstat b{font-family:'Inter Tight',sans-serif;font-size:19px}
462.vstat span{color:rgba(255,255,255,.6);font-size:13.5px}
463
464/* quote */
465.quote-wrap{max-width:860px;margin:0 auto;text-align:center}
466.quote{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(24px,3.6vw,38px);
467 line-height:1.25;letter-spacing:-.02em;margin:0}
468.quote em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
469
470/* cta */
471.cta{padding:96px 0}
472.cta-in{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);
473 border-radius:24px;padding:56px 32px;box-shadow:var(--shadow);position:relative;overflow:hidden}
474.cta-in::before{content:"";position:absolute;inset:-40% 0 auto 0;height:260px;
475 background:radial-gradient(50% 60% at 50% 0%,rgba(124,77,255,.16),transparent 70%);pointer-events:none}
476.cta-h{font-size:clamp(28px,4.4vw,44px);margin:0;position:relative}
477.cta-sub{color:var(--muted);font-size:18px;margin:14px 0 28px;position:relative}
478.cta .hero-actions{position:relative}
479
480/* footer */
481.ft{border-top:1px solid var(--line);background:var(--bg-soft);padding:56px 0 28px}
482.ft-in{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
483.ft-tag{color:var(--muted);font-size:14px;margin:12px 0 0;max-width:30ch}
484.ft-cols{display:flex;gap:64px;flex-wrap:wrap}
485.ft-col{display:flex;flex-direction:column;gap:10px}
486.ft-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 4px;font-weight:700}
487.ft-col a{color:var(--ink-2);font-size:14.5px;transition:color .15s}
488.ft-col a:hover{color:var(--ink)}
489.ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
490 margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
491
492/* entrance + reveal */
493@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
494.rise{animation:rise .7s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:var(--d,0ms)}
495.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
496.reveal.seen{opacity:1;transform:none}
497
498/* responsive */
499@media(max-width:900px){
500 .grid,.loop{grid-template-columns:repeat(2,1fr)}
501 .stats-in{grid-template-columns:repeat(2,1fr);gap:28px 16px}
502 .step-arrow{display:none}
503 .nv-links{display:none}
504}
505@media(max-width:560px){
506 .grid,.loop{grid-template-columns:1fr}
507 .hero{padding:56px 0 24px}
508 .ft-cols{gap:36px}
509}
510@media(prefers-reduced-motion:reduce){
511 .rise,.reveal{animation:none!important;opacity:1!important;transform:none!important}
512 html{scroll-behavior:auto}
513}
514`;
0515