{"$schema":"https://ui.artbloom.tech/schema/registry-item.json","name":"slate","type":"registry:page","title":"Slate","description":"A dark, product-led SaaS showcase whose hero is a live DOM-built app surface — a self-moving cursor and an autonomous agent walking an issue through its statuses in real time — backed by scroll-linked kanban, roadmap and diff captures. No image assets; reduced-motion respected.","author":"@artbloom","dependencies":[],"registryDependencies":[],"files":[{"path":"app/slate/page.tsx","target":"app/slate/page.tsx","content":"\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\n\n/**\n * Slate — a product-led dark showcase for a planning / issue-tracking SaaS.\n *\n * The whole page is built to Linear-tier polish, and the thesis is that the\n * product markets itself by *working* in front of you: the hero is a live,\n * DOM-built app surface (no screenshots, no photography) with a cursor that\n * moves on its own and an autonomous agent that picks up an issue and walks it\n * through its statuses in real time. Everything else — the bento pillars, the\n * alternating feature captures, the changelog, the marquee — stays quiet so the\n * one live moment lands. All motion is gated on prefers-reduced-motion.\n *\n * Deliberate against the tells: the base is a cool near-black (never a\n * brown-tinted black), the single chrome accent is one calm blue (status\n * colours are muted and live only inside the simulated product), there are no\n * tracked-uppercase eyebrows, no middle-dot metas, no em-dash fragment labels,\n * no decorative 01/02/03 numbering, no glassmorphism, and no arrow glyphs on\n * links. Monospace is used only where it is real product data.\n */\n\ntype Status = \"backlog\" | \"todo\" | \"inprogress\" | \"inreview\" | \"done\"\n\nconst STATUS_LABEL: Record = {\n backlog: \"Backlog\",\n todo: \"Todo\",\n inprogress: \"In Progress\",\n inreview: \"In Review\",\n done: \"Done\",\n}\n\ntype Priority = \"urgent\" | \"high\" | \"medium\" | \"low\"\n\ntype Issue = {\n id: string\n title: string\n status: Status\n priority: Priority\n who: string\n hue: number\n label?: { text: string; tone: \"blue\" | \"violet\" | \"green\" | \"amber\" }\n}\n\n/** The issue list rendered inside the hero's live product surface. */\nconst HERO_ISSUES: Issue[] = [\n { id: \"SLT-241\", title: \"Cursor jumps when a card crosses two columns\", status: \"inprogress\", priority: \"high\", who: \"Mara Ito\", hue: 210, label: { text: \"board\", tone: \"blue\" } },\n { id: \"SLT-238\", title: \"Realtime session drops silently on reconnect\", status: \"inreview\", priority: \"urgent\", who: \"Dev Rao\", hue: 280, label: { text: \"sync\", tone: \"violet\" } },\n { id: \"SLT-236\", title: \"Auto-triage inbound reports from the inbox\", status: \"todo\", priority: \"medium\", who: \"Agent\", hue: 150 },\n { id: \"SLT-233\", title: \"Migrate workspace settings to the new schema\", status: \"todo\", priority: \"low\", who: \"Lena Fox\", hue: 30 },\n { id: \"SLT-229\", title: \"Quick-switcher should rank by recency\", status: \"backlog\", priority: \"medium\", who: \"Sam Ojo\", hue: 340, label: { text: \"keyboard\", tone: \"green\" } },\n { id: \"SLT-224\", title: \"Export a project timeline as a shareable link\", status: \"backlog\", priority: \"low\", who: \"Mara Ito\", hue: 210 },\n]\n\n/** The agent target row walks these statuses on a loop. */\nconst AGENT_FLOW: Status[] = [\"todo\", \"inprogress\", \"inreview\", \"done\"]\nconst AGENT_ROW = \"SLT-236\"\n\nconst CYCLE_WORDS = [\"ship\", \"plan\", \"track\"]\n\n/** Reveal children once, when they scroll into view. Reduced-motion shows instantly. */\nfunction useReveal() {\n const ref = useRef(null)\n const [shown, setShown] = useState(false)\n useEffect(() => {\n const node = ref.current\n if (!node) return\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n setShown(true)\n return\n }\n const io = new IntersectionObserver(\n ([e]) => {\n if (e.isIntersecting) {\n setShown(true)\n io.disconnect()\n }\n },\n { threshold: 0.2 },\n )\n io.observe(node)\n return () => io.disconnect()\n }, [])\n return [ref, shown] as const\n}\n\n/** A gentle position-based parallax for a panel. Returns 0 under reduced-motion. */\nfunction useParallax(strength = 0.06) {\n const ref = useRef(null)\n const [y, setY] = useState(0)\n useEffect(() => {\n const node = ref.current\n if (!node) return\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return\n let raf = 0\n const onScroll = () => {\n if (raf) return\n raf = requestAnimationFrame(() => {\n const r = node.getBoundingClientRect()\n const delta = r.top + r.height / 2 - window.innerHeight / 2\n setY(-delta * strength)\n raf = 0\n })\n }\n window.addEventListener(\"scroll\", onScroll, { passive: true })\n onScroll()\n return () => {\n window.removeEventListener(\"scroll\", onScroll)\n if (raf) cancelAnimationFrame(raf)\n }\n }, [strength])\n return [ref, y] as const\n}\n\n/** Count from 0 to target once `shown` turns true. */\nfunction useCountUp(target: number, shown: boolean, dur = 1500) {\n const [n, setN] = useState(0)\n useEffect(() => {\n if (!shown) return\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n setN(target)\n return\n }\n let raf = 0\n const start = performance.now()\n const tick = (t: number) => {\n const p = Math.min(1, (t - start) / dur)\n const eased = 1 - Math.pow(1 - p, 3)\n setN(Math.round(target * eased))\n if (p < 1) raf = requestAnimationFrame(tick)\n }\n raf = requestAnimationFrame(tick)\n return () => cancelAnimationFrame(raf)\n }, [target, shown, dur])\n return n\n}\n\nfunction Avatar({ name, hue, size = 22 }: { name: string; hue: number; size?: number }) {\n const initials =\n name === \"Agent\"\n ? \"◆\"\n : name\n .split(\" \")\n .map((w) => w[0])\n .slice(0, 2)\n .join(\"\")\n return (\n \n {initials}\n \n )\n}\n\nfunction StatusDot({ s }: { s: Status }) {\n return \n}\n\nfunction PriorityIcon({ level }: { level: Priority }) {\n if (level === \"urgent\") {\n return \n }\n const lit = level === \"high\" ? 3 : level === \"medium\" ? 2 : 1\n return (\n \n {[0, 1, 2].map((i) => (\n \n ))}\n \n )\n}\n\nconst LOGOS = [\"Heliary\", \"Quanta\", \"Fathom\", \"Lumen\", \"Basis\", \"Orbital\", \"Verge\"]\n\nfunction LogoStrip() {\n return (\n
\n

The teams shipping fastest already run on Slate

\n
\n {LOGOS.map((name) => (\n \n \n {name}\n \n ))}\n
\n
\n )\n}\n\nfunction Sparkline({ shown }: { shown: boolean }) {\n const d =\n \"M0,62 L25,54 L50,58 L75,44 L100,48 L125,34 L150,40 L175,26 L200,30 L225,20 L250,24 L275,13 L300,9\"\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ToggleRow() {\n const [done, setDone] = useState(false)\n useEffect(() => {\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n setDone(true)\n return\n }\n const id = setInterval(() => setDone((d) => !d), 1900)\n return () => clearInterval(id)\n }, [])\n return (\n
\n
\n \n \n \n \n \n Update the changelog draft\n
\n
\n E\n marks it {done ? \"done\" : \"open\"}\n
\n
\n )\n}\n\nfunction Pillars() {\n const [ref, shown] = useReveal()\n const triaged = useCountUp(1284, shown)\n return (\n
\n
\n

Fast is a feature

\n

\n The parts of the day that used to be overhead — syncing, triaging, closing out — Slate\n takes care of, so momentum is the default state, not something you have to protect.\n

\n
\n
\n
\n
\n

Everything stays in sync

\n

\n Every change lands for everyone the instant it happens. No refresh, no two people\n overwriting a status, no board that is stale the moment someone else touches it.\n

\n
\n
\n \n Updates delivered in the last minute\n
\n
\n
\n
\n {triaged.toLocaleString()}\n reports triaged by agents this week\n
\n

\n Slate reads what comes in, tags it, and routes it to the right team before you open your\n laptop.\n

\n
\n
\n

Built for the keyboard

\n \n

\n Create, assign, and close without reaching for the mouse. The actions you repeat are a\n single key away.\n

\n
\n
\n
\n )\n}\n\nfunction BoardPanel() {\n return (\n
\n
\n
Todo2
\n

Rework the onboarding checklist

SLT-251MI
\n

Empty states for the roadmap view

SLT-248LF
\n
\n
\n
In Progress1
\n
\n

Drag a card and the board reflows live

\n
SLT-244DR
\n
\n
\n
\n
\n
Done2
\n

Ship keyboard-driven quick switcher

SLT-239SO
\n

Real-time presence on every view

SLT-235MI
\n
\n
\n )\n}\n\nconst ROADMAP = [\n { name: \"Realtime sync v2\", team: \"Core\", start: 0, span: 5, tone: \"blue\" },\n { name: \"Agent auto-triage\", team: \"Core\", start: 3, span: 6, tone: \"violet\" },\n { name: \"Roadmap sharing\", team: \"Web\", start: 6, span: 4, tone: \"green\" },\n { name: \"Mobile offline mode\", team: \"Mobile\", start: 8, span: 4, tone: \"amber\" },\n]\n\nfunction RoadmapPanel() {\n return (\n
\n
\n Q1\n
JanFebMar
\n
\n
\n \n {ROADMAP.map((r) => (\n
\n
{r.name}{r.team}
\n
\n \n
\n
\n ))}\n
\n
\n )\n}\n\nconst DIFF = [\n { n: 41, t: \"context\", s: \" function assignee(issue: Issue) {\" },\n { n: 42, t: \"del\", s: \" return issue.owner ?? null\" },\n { n: 42, t: \"add\", s: \" if (issue.status === 'triage')\" },\n { n: 43, t: \"add\", s: \" return agents.pick(issue)\" },\n { n: 44, t: \"add\", s: \" return issue.owner ?? null\" },\n { n: 45, t: \"context\", s: \" }\" },\n]\n\nfunction DiffPanel() {\n return (\n
\n
\n lib/triage.ts\n +3 -1\n
\n
\n {DIFF.map((l, i) => (\n
\n {l.n}\n {l.t === \"add\" ? \"+\" : l.t === \"del\" ? \"-\" : \" \"}\n {l.s}\n
\n ))}\n
\n
\n DR\n
Dev RaoNice — this hands new reports straight to the agent. Approving.
\n
\n
\n )\n}\n\nconst FEATURES = [\n {\n id: \"features\",\n kicker: \"Boards\",\n h: \"A board that keeps up with the room\",\n p: \"Drag a card and everyone watching sees it move in the same instant. Slate reflows the columns live, keeps counts honest, and never asks a second person to refresh before they trust what they are looking at.\",\n panel: ,\n flip: false,\n parallax: 0.05,\n },\n {\n id: \"roadmap\",\n kicker: \"Roadmaps\",\n h: \"Plans your team can actually read\",\n p: \"Every initiative sits on one timeline with the team that owns it and the weeks it spans. Change a date and the roadmap, the board, and the issues underneath it all agree — because they were never separate views to begin with.\",\n panel: ,\n flip: true,\n parallax: 0.07,\n },\n {\n id: \"reviews\",\n kicker: \"Reviews\",\n h: \"Review where the work already lives\",\n p: \"Pull requests, diffs, and the conversation around them sit next to the issue they close. Approve a change and the issue moves itself — no tab-hopping, no copy-pasting a link into a status update nobody reads.\",\n panel: ,\n flip: false,\n parallax: 0.05,\n },\n]\n\nfunction FeatureSection({ f }: { f: (typeof FEATURES)[number] }) {\n const [ref, shown] = useReveal()\n const [pRef, y] = useParallax(f.parallax)\n return (\n
\n
\n {f.kicker}\n

{f.h}

\n

{f.p}

\n
\n
\n \n {f.panel}\n
\n
\n \n )\n}\n\nconst CHANGELOG = [\n { date: \"Sep 18\", version: \"v2.14\", title: \"Agents can now close issues\", body: \"When a linked pull request merges, the assigned agent moves the issue to Done and posts the summary in the thread.\" },\n { date: \"Sep 9\", version: \"v2.13\", title: \"Roadmap sharing links\", body: \"Share a read-only roadmap with anyone. Dates and status stay live; nothing else about the workspace is exposed.\" },\n { date: \"Aug 28\", version: \"v2.12\", title: \"Faster quick switcher\", body: \"The command menu now ranks by what you touched most recently, so the thing you want is almost always the first result.\" },\n]\n\nfunction Changelog() {\n const [ref, shown] = useReveal()\n return (\n
\n
\n

Shipped recently

\n

\n We ship most weeks, and we write down what changed. Here is the last little while.\n

\n
\n
\n {CHANGELOG.map((c, i) => (\n
\n
\n {c.date}\n {c.version}\n
\n
\n

{c.title}

\n

{c.body}

\n
\n
\n ))}\n
\n
\n )\n}\n\nconst QUOTES = [\n { q: \"We turned off three other tools the week we moved to Slate. Nothing else kept up with how we actually work.\", who: \"Priya Nadel\", role: \"VP Engineering, Quanta\", hue: 280 },\n { q: \"The agents quietly clear our triage queue overnight. I stopped dreading Monday mornings.\", who: \"Tom Ackerman\", role: \"Eng Lead, Fathom\", hue: 210 },\n { q: \"It is the first planning tool the whole team opens without being told to. That never happens.\", who: \"Sofia Reyes\", role: \"Head of Product, Lumen\", hue: 150 },\n { q: \"Real-time actually means real-time here. Two of us edit the same board and it just works.\", who: \"Marcus Bell\", role: \"CTO, Basis\", hue: 30 },\n { q: \"Reviews live next to the issue now. Our status meetings got shorter and then mostly disappeared.\", who: \"Ada Owusu\", role: \"Staff Engineer, Orbital\", hue: 340 },\n]\n\nfunction StatBand() {\n const [ref, shown] = useReveal()\n const teams = useCountUp(12000, shown, 1800)\n return (\n
\n {teams.toLocaleString()}+\n product teams plan their week in Slate\n
\n )\n}\n\nfunction Testimonials() {\n const loop = [...QUOTES, ...QUOTES]\n return (\n
\n \n
\n
\n {loop.map((t, i) => (\n
\n
{t.q}
\n
\n \n \n {t.who}\n {t.role}\n \n
\n
\n ))}\n
\n
\n
\n )\n}\n\nconst TRUST = [\n { h: \"SOC 2 Type II\", p: \"Audited annually, report available under NDA.\" },\n { h: \"99.98% uptime\", p: \"Measured over the last twelve months, status page public.\" },\n { h: \"Encrypted throughout\", p: \"TLS in transit, AES-256 at rest, on every plan.\" },\n { h: \"SSO and SCIM\", p: \"SAML sign-in and directory sync on the team plan.\" },\n]\n\nfunction Trust() {\n return (\n
\n
\n {TRUST.map((t) => (\n
\n

{t.h}

\n

{t.p}

\n
\n ))}\n
\n
\n )\n}\n\nfunction FinalCTA() {\n return (\n
\n
\n
\n

Get your team on the same page

\n

\n Start free with your whole team today. Move a project over in an afternoon and see how much\n quieter the week gets.\n

\n \n

Free for teams up to ten. No card to start.

\n
\n
\n )\n}\n\nexport default function Slate() {\n const [scrolled, setScrolled] = useState(false)\n const [word, setWord] = useState(0)\n const [agentPhase, setAgentPhase] = useState(0)\n\n const appRef = useRef(null)\n const cursorRef = useRef(null)\n\n // nav shade on scroll + cycling hero verb + agent status walk\n useEffect(() => {\n const reduced = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n\n let raf = 0\n const onScroll = () => {\n if (raf) return\n raf = requestAnimationFrame(() => {\n setScrolled(window.scrollY > 8)\n raf = 0\n })\n }\n window.addEventListener(\"scroll\", onScroll, { passive: true })\n onScroll()\n\n let wordId: ReturnType | undefined\n let agentId: ReturnType | undefined\n if (reduced) {\n setAgentPhase(AGENT_FLOW.length - 1) // resting = resolved\n } else {\n wordId = setInterval(() => setWord((w) => (w + 1) % CYCLE_WORDS.length), 2200)\n agentId = setInterval(() => setAgentPhase((p) => (p + 1) % AGENT_FLOW.length), 2600)\n }\n\n return () => {\n window.removeEventListener(\"scroll\", onScroll)\n if (raf) cancelAnimationFrame(raf)\n if (wordId) clearInterval(wordId)\n if (agentId) clearInterval(agentId)\n }\n }, [])\n\n // self-moving cursor over the hero app surface\n useEffect(() => {\n const cur = cursorRef.current\n const app = appRef.current\n if (!cur || !app) return\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n cur.style.opacity = \"0\"\n return\n }\n const pts = [\n [0.66, 0.16],\n [0.4, 0.52],\n [0.72, 0.6],\n [0.52, 0.78],\n [0.66, 0.16],\n ]\n const seg = 1700\n const pause = 520\n const step = seg + pause\n const cycle = pts.length - 1\n const start = performance.now()\n const ease = (t: number) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2)\n let raf = 0\n const loop = (now: number) => {\n const rect = app.getBoundingClientRect()\n let e = (now - start) % (cycle * step)\n let i = 0\n while (e > step) {\n e -= step\n i++\n }\n const localT = Math.min(1, e / seg)\n const a = pts[i]\n const b = pts[i + 1]\n const k = ease(localT)\n const x = (a[0] + (b[0] - a[0]) * k) * rect.width\n const y = (a[1] + (b[1] - a[1]) * k) * rect.height\n cur.style.transform = `translate3d(${x}px, ${y}px, 0)`\n raf = requestAnimationFrame(loop)\n }\n raf = requestAnimationFrame(loop)\n return () => cancelAnimationFrame(raf)\n }, [])\n\n const agentStatus = AGENT_FLOW[agentPhase]\n const agentWorking = agentStatus === \"inprogress\" || agentStatus === \"inreview\"\n\n return (\n
\n \n\n
\n \n \n Slate\n \n \n \n
\n\n {/* HERO — copy over a large, self-driving product surface */}\n
\n
\n
\n\n
\n \n \n Slate Agents is live\n \n

\n The fastest way to{\" \"}\n \n \n {CYCLE_WORDS[word]}\n \n {\" \"}\n software.\n

\n

\n Slate is the issue tracker and planner built for how fast good teams actually move.\n Keyboard-first, real-time to the millisecond, and quietly automated so you spend the day\n building instead of updating tickets.\n

\n \n

Free for small teams. No card to start.

\n
\n\n {/* the live, DOM-built app surface */}\n
\n
\n \n \n \n Agent\n
\n\n \n\n
\n
\n
\n Active issues\n {HERO_ISSUES.length}\n
\n
\n \n \n Live\n \n Priority\n Assignee\n
\n
\n
    \n {HERO_ISSUES.map((it) => {\n const isAgent = it.id === AGENT_ROW\n const status = isAgent ? agentStatus : it.status\n const active = isAgent && agentWorking\n return (\n
  • \n \n \n {it.id}\n {it.title}\n {isAgent && agentWorking && Agent}\n {it.label && {it.label.text}}\n {STATUS_LABEL[status]}\n \n
    • \n )\n })}\n
\n
\n
\n
\n\n \n \n\n
\n {FEATURES.map((f) => (\n \n ))}\n
\n\n \n \n \n \n\n \n
\n )\n}\n\nconst css = `\n.slate-root {\n --bg: #0b0d10;\n --bg-2: #0e1116;\n --panel: #14171c;\n --panel-2: #191d24;\n --raise: #1e232b;\n --frost: #e6e9ef;\n --muted: #8b93a3;\n --dim: #5c6472;\n --blue: #5b8def;\n --blue-2: #7aa2f2;\n --violet: #9b8cf0;\n --line: rgba(255, 255, 255, 0.08);\n --line-2: rgba(255, 255, 255, 0.05);\n --ok: #4ea373;\n --warn: #d9a441;\n --urgent: #e5687a;\n --radius: 14px;\n background: var(--bg);\n color: var(--frost);\n font-family: var(--font-geist), system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n line-height: 1.6;\n overflow-x: hidden;\n}\n.slate-root *,\n.slate-root *::before,\n.slate-root *::after { box-sizing: border-box; }\n.slate-root a { color: inherit; text-decoration: none; }\n.slate-root :focus-visible {\n outline: 2px solid var(--blue);\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/* shared buttons */\n.sl-btn {\n display: inline-flex; align-items: center; justify-content: center;\n background: var(--blue); color: #05070c; font-weight: 600; font-size: 0.95rem;\n padding: 0.7rem 1.25rem; border-radius: 9px; border: 1px solid transparent;\n transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s, background 0.2s;\n}\n.sl-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(91,141,239,0.7); background: var(--blue-2); }\n.sl-btn-sm { padding: 0.5rem 0.9rem; font-size: 0.88rem; border-radius: 8px; }\n.sl-ghost {\n display: inline-flex; align-items: center; justify-content: center;\n color: var(--frost); font-weight: 500; font-size: 0.95rem;\n padding: 0.7rem 1.2rem; border-radius: 9px; border: 1px solid var(--line);\n background: rgba(255,255,255,0.02); transition: border-color 0.3s, background 0.3s, transform 0.35s;\n}\n.sl-ghost:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); transform: translateY(-2px); }\n.sl-ghost-sm { padding: 0.5rem 0.85rem; font-size: 0.88rem; border-radius: 8px; }\n\n.sl-brand {\n display: inline-flex; align-items: center; gap: 0.5rem;\n font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; color: var(--frost);\n}\n.sl-brand-mark {\n width: 18px; height: 18px; border-radius: 6px;\n background: linear-gradient(150deg, var(--blue), var(--violet));\n box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);\n}\n\n/* NAV */\n.sl-nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 60;\n display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;\n padding: 0.95rem clamp(1.1rem, 4vw, 2.6rem);\n border-bottom: 1px solid transparent; transition: background 0.3s, border-color 0.3s;\n}\n.sl-nav.is-scrolled { background: rgba(11,13,16,0.92); border-bottom-color: var(--line); }\n.sl-nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }\n.sl-nav-links a { color: var(--muted); font-size: 0.92rem; transition: color 0.25s; }\n.sl-nav-links a:hover { color: var(--frost); }\n.sl-nav-cta { display: flex; align-items: center; gap: 0.6rem; }\n@media (max-width: 860px) { .sl-nav-links { display: none; } }\n@media (max-width: 560px) { .sl-nav-cta .sl-ghost-sm { display: none; } }\n\n/* HERO */\n.sl-hero { position: relative; padding: clamp(6.5rem, 12vw, 9rem) clamp(1.1rem, 4vw, 2.6rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }\n.sl-hero-glow {\n position: absolute; top: -12%; left: 50%; transform: translateX(-50%);\n width: min(1100px, 120vw); height: 620px; pointer-events: none;\n background:\n radial-gradient(closest-side, rgba(91,141,239,0.16), transparent 70%),\n radial-gradient(closest-side, rgba(155,124,240,0.12), transparent 72%);\n background-position: 30% 20%, 72% 30%; background-repeat: no-repeat;\n background-size: 70% 90%, 60% 80%;\n}\n.sl-hero-grid {\n position: absolute; inset: 0; pointer-events: none; opacity: 0.5;\n background-image:\n linear-gradient(var(--line-2) 1px, transparent 1px),\n linear-gradient(90deg, var(--line-2) 1px, transparent 1px);\n background-size: 44px 44px;\n -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 8%, #000 25%, transparent 75%);\n mask-image: radial-gradient(ellipse 80% 60% at 50% 8%, #000 25%, transparent 75%);\n}\n.sl-hero-copy { position: relative; max-width: 44rem; margin: 0 auto; text-align: center; }\n.sl-pill {\n display: inline-flex; align-items: center; gap: 0.5rem;\n padding: 0.34rem 0.75rem 0.34rem 0.6rem; border-radius: 999px;\n border: 1px solid var(--line); background: rgba(255,255,255,0.03);\n color: var(--muted); font-size: 0.82rem;\n}\n.sl-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(91,141,239,0.18); }\n.sl-title {\n font-size: clamp(2.5rem, 6.4vw, 4.7rem); line-height: 1.02; letter-spacing: -0.035em;\n font-weight: 600; margin: 1.3rem 0 0;\n}\n.sl-flip-wrap {\n display: inline-flex; overflow: hidden; vertical-align: bottom;\n color: var(--blue-2);\n}\n.sl-flip { display: inline-block; animation: slFlip 0.5s cubic-bezier(0.16,1,0.3,1); }\n@keyframes slFlip { from { transform: translateY(0.9em); opacity: 0; } to { transform: none; opacity: 1; } }\n.sl-lede {\n color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.22rem);\n max-width: 36rem; margin: 1.35rem auto 0;\n}\n.sl-hero-actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.9rem; flex-wrap: wrap; }\n.sl-hero-note { color: var(--dim); font-size: 0.85rem; margin: 1rem 0 0; }\n\n/* APP SURFACE */\n.sl-app {\n position: relative; max-width: 1080px; margin: clamp(2.6rem, 6vw, 4.5rem) auto 0;\n display: grid; grid-template-columns: 216px 1fr;\n background: var(--panel); border: 1px solid var(--line); border-radius: 16px;\n overflow: hidden; min-height: 430px;\n box-shadow: 0 40px 120px -50px rgba(0,0,0,0.9), 0 2px 0 0 rgba(255,255,255,0.04) inset;\n}\n.sl-app-cursor { position: absolute; top: 0; left: 0; z-index: 20; pointer-events: none; will-change: transform; }\n.sl-app-cursor svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }\n.sl-app-cursor-tag {\n position: absolute; left: 14px; top: 16px; white-space: nowrap;\n background: var(--blue); color: #05070c; font-size: 0.66rem; font-weight: 700;\n padding: 0.1rem 0.4rem; border-radius: 5px;\n}\n\n/* sidebar */\n.sl-side { border-right: 1px solid var(--line); background: var(--bg-2); padding: 0.85rem 0.7rem; display: flex; flex-direction: column; gap: 1.1rem; }\n.sl-ws { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 8px; }\n.sl-ws-mark { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(150deg, var(--blue), var(--violet)); }\n.sl-ws-name { font-weight: 600; font-size: 0.9rem; }\n.sl-ws-caret { color: var(--dim); margin-left: auto; }\n.sl-nav-list { display: flex; flex-direction: column; gap: 0.1rem; }\n.sl-nav-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: 7px; color: var(--muted); font-size: 0.86rem; }\n.sl-nav-item.is-current { background: rgba(255,255,255,0.05); color: var(--frost); }\n.sl-ni-count { margin-left: auto; font-size: 0.72rem; color: var(--dim); background: rgba(255,255,255,0.06); padding: 0.02rem 0.35rem; border-radius: 5px; }\n.sl-ni-ico { width: 15px; height: 15px; border-radius: 4px; border: 1.4px solid currentColor; opacity: 0.8; }\n.sl-ni-inbox { border-radius: 4px; }\n.sl-ni-mine { border-radius: 50%; }\n.sl-ni-views { border-radius: 3px; border-style: dashed; }\n.sl-side-group { display: flex; flex-direction: column; gap: 0.1rem; }\n.sl-side-label { font-size: 0.72rem; color: var(--dim); padding: 0.2rem 0.5rem 0.4rem; }\n.sl-team { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem; border-radius: 7px; color: var(--muted); font-size: 0.85rem; }\n.sl-team.is-current { color: var(--frost); }\n.sl-team-dot { width: 8px; height: 8px; border-radius: 3px; }\n\n/* main */\n.sl-main { min-width: 0; }\n.sl-main-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); }\n.sl-view-title { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.95rem; }\n.sl-view-count { font-size: 0.75rem; color: var(--dim); background: rgba(255,255,255,0.06); padding: 0.05rem 0.4rem; border-radius: 6px; }\n.sl-main-tools { display: flex; align-items: center; gap: 0.5rem; }\n.sl-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--ok); }\n.sl-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(78,163,115,0.5); animation: slPulse 2.4s ease-out infinite; }\n@keyframes slPulse { 0% { box-shadow: 0 0 0 0 rgba(78,163,115,0.5); } 70% { box-shadow: 0 0 0 7px rgba(78,163,115,0); } 100% { box-shadow: 0 0 0 0 rgba(78,163,115,0); } }\n.sl-chip { font-size: 0.76rem; color: var(--muted); border: 1px solid var(--line); padding: 0.2rem 0.55rem; border-radius: 7px; }\n@media (max-width: 640px) { .sl-chip { display: none; } }\n\n.sl-issues { list-style: none; margin: 0; padding: 0; }\n.sl-issue {\n display: flex; align-items: center; gap: 0.7rem; padding: 0.66rem 1.1rem;\n border-bottom: 1px solid var(--line-2); transition: background 0.3s;\n}\n.sl-issue:hover { background: rgba(255,255,255,0.02); }\n.sl-issue.is-active { background: rgba(91,141,239,0.08); box-shadow: inset 2px 0 0 0 var(--blue); }\n.sl-issue-id { font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 0.76rem; color: var(--dim); flex: 0 0 auto; width: 3.6rem; }\n.sl-issue-title { font-size: 0.88rem; color: var(--frost); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.sl-issue-status { font-size: 0.76rem; color: var(--muted); flex: 0 0 auto; width: 5.5rem; text-align: right; }\n@media (max-width: 720px) { .sl-issue-status { display: none; } }\n\n.sl-agent-chip {\n font-size: 0.68rem; font-weight: 600; color: var(--blue-2); flex: 0 0 auto;\n background: rgba(91,141,239,0.14); border: 1px solid rgba(91,141,239,0.3);\n padding: 0.08rem 0.4rem; border-radius: 6px; animation: slFadeIn 0.4s ease;\n}\n@keyframes slFadeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }\n.sl-tag { font-size: 0.7rem; flex: 0 0 auto; padding: 0.08rem 0.45rem; border-radius: 6px; border: 1px solid var(--line); }\n.sl-tag-blue { color: var(--blue-2); border-color: rgba(91,141,239,0.3); }\n.sl-tag-violet { color: var(--violet); border-color: rgba(155,124,240,0.3); }\n.sl-tag-green { color: var(--ok); border-color: rgba(78,163,115,0.3); }\n.sl-tag-amber { color: var(--warn); border-color: rgba(217,164,65,0.3); }\n@media (max-width: 720px) { .sl-tag { display: none; } }\n\n.sl-ava { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; flex: 0 0 auto; }\n\n/* status dots */\n.sl-sd { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; }\n.sl-sd-backlog { border: 1.6px dashed var(--dim); }\n.sl-sd-todo { border: 1.6px solid var(--muted); }\n.sl-sd-inprogress { border: 1.6px solid var(--warn); background: conic-gradient(var(--warn) 55%, transparent 0); }\n.sl-sd-inreview { border: 1.6px solid var(--blue); background: conic-gradient(var(--blue) 82%, transparent 0); }\n.sl-sd-done { background: var(--ok); border: 1.6px solid var(--ok); }\n\n/* priority */\n.sl-pri { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; flex: 0 0 auto; width: 13px; justify-content: center; }\n.sl-pri i { width: 3px; background: var(--dim); border-radius: 1px; opacity: 0.55; }\n.sl-pri i:nth-child(1) { height: 5px; }\n.sl-pri i:nth-child(2) { height: 8px; }\n.sl-pri i:nth-child(3) { height: 11px; }\n.sl-pri i.on { background: var(--muted); opacity: 1; }\n.sl-pri-urgent { width: 13px; height: 13px; border-radius: 3px; background: var(--urgent); box-shadow: 0 0 0 3px rgba(229,104,122,0.16); }\n\n@media (max-width: 720px) {\n .sl-app { grid-template-columns: 1fr; }\n .sl-side { display: none; }\n}\n\n/* honour reduced motion everywhere as a safety net */\n@media (prefers-reduced-motion: reduce) {\n .slate-root *, .slate-root *::before, .slate-root *::after {\n animation-duration: 0.001ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.001ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* LOGO STRIP */\n.sl-logos { max-width: 1080px; margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.1rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem); text-align: center; }\n.sl-logos-cap { color: var(--dim); font-size: 0.9rem; margin: 0 0 1.8rem; }\n.sl-logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.4rem, 4vw, 3.2rem); }\n.sl-logo {\n display: inline-flex; align-items: center; gap: 0.5rem;\n font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em;\n color: var(--muted); opacity: 0.5; filter: grayscale(1);\n transition: opacity 0.3s, color 0.3s, filter 0.3s;\n}\n.sl-logo:hover { opacity: 1; color: var(--frost); filter: none; }\n.sl-logo-mark { width: 15px; height: 15px; border-radius: 5px; border: 2px solid currentColor; }\n.sl-logo:nth-child(2) .sl-logo-mark { border-radius: 50%; }\n.sl-logo:nth-child(3) .sl-logo-mark { transform: rotate(45deg); border-radius: 3px; }\n.sl-logo:nth-child(5) .sl-logo-mark { border-radius: 50% 50% 50% 3px; }\n.sl-logo:nth-child(6) .sl-logo-mark { border-style: dashed; }\n\n/* SECTION SCAFFOLD */\n.sl-sec { max-width: 1080px; margin: 0 auto; padding: clamp(4rem, 9vw, 7.5rem) clamp(1.1rem, 4vw, 2.6rem); }\n.sl-sec-head { max-width: 40rem; margin: 0 0 clamp(2.2rem, 5vw, 3.4rem); }\n.sl-h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; margin: 0; }\n.sl-sec-lede { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); margin: 1rem 0 0; }\n\n/* BENTO */\n.sl-bento { display: grid; grid-template-columns: 1.55fr 1fr; grid-auto-rows: 1fr; gap: 1rem; }\n.sl-tile {\n background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);\n padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;\n opacity: 0; transform: translateY(20px);\n transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), border-color 0.3s;\n}\n.sl-tile.is-shown { opacity: 1; transform: none; }\n.sl-tile:hover { border-color: rgba(255,255,255,0.16); }\n.sl-tile-lg { grid-row: span 2; justify-content: space-between; }\n.sl-tile-top { display: flex; flex-direction: column; gap: 0.7rem; }\n.sl-tile-h { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }\n.sl-tile-p { color: var(--muted); font-size: 0.92rem; margin: 0; }\n\n.sl-spark-wrap { margin-top: auto; }\n.sl-spark { display: block; width: 100%; height: 96px; }\n.sl-spark-line { transition: stroke-dashoffset 1.7s cubic-bezier(0.4,0,0.2,1); }\n.sl-spark-area { transition: opacity 1s ease 0.5s; }\n.sl-spark-tip { transition: opacity 0.4s ease 1.5s; }\n.sl-spark-cap { display: block; color: var(--dim); font-size: 0.78rem; margin-top: 0.5rem; }\n\n.sl-stat { display: flex; flex-direction: column; gap: 0.15rem; }\n.sl-stat-n { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }\n.sl-stat-l { color: var(--muted); font-size: 0.85rem; }\n\n.sl-toggle { display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; }\n.sl-toggle-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; }\n.sl-toggle-box {\n width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--dim); color: transparent;\n display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;\n transition: background 0.3s, border-color 0.3s, color 0.3s;\n}\n.sl-toggle-row.is-done .sl-toggle-box { background: var(--ok); border-color: var(--ok); color: #05070c; }\n.sl-toggle-label { font-size: 0.85rem; transition: color 0.3s; }\n.sl-toggle-row.is-done .sl-toggle-label { color: var(--dim); text-decoration: line-through; }\n.sl-keys { display: flex; align-items: center; gap: 0.5rem; color: var(--dim); font-size: 0.78rem; }\n.sl-keys kbd {\n font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 0.72rem;\n background: var(--raise); border: 1px solid var(--line); border-bottom-width: 2px;\n border-radius: 5px; padding: 0.05rem 0.4rem; color: var(--frost);\n}\n@media (max-width: 720px) { .sl-bento { grid-template-columns: 1fr; } .sl-tile-lg { grid-row: auto; } }\n\n/* FEATURE SECTIONS */\n.sl-feats { border-top: 1px solid var(--line); }\n.sl-feat {\n max-width: 1080px; margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) clamp(1.1rem, 4vw, 2.6rem);\n display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;\n}\n.sl-feat.is-flip .sl-feat-copy { order: 2; }\n.sl-kicker { display: inline-block; color: var(--blue-2); font-size: 0.9rem; font-weight: 500; margin-bottom: 0.9rem; }\n.sl-feat-copy { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }\n.sl-feat-copy.is-shown { opacity: 1; transform: none; }\n.sl-feat-copy .sl-sec-lede { margin-top: 1rem; }\n.sl-feat-panel-wrap { position: relative; }\n.sl-feat-panel {\n position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);\n padding: 1rem; box-shadow: 0 30px 80px -50px rgba(0,0,0,0.8);\n opacity: 0; transition: opacity 0.8s ease;\n}\n.sl-feat-panel.is-shown { opacity: 1; }\n@media (max-width: 820px) {\n .sl-feat { grid-template-columns: 1fr; gap: 1.8rem; }\n .sl-feat.is-flip .sl-feat-copy { order: 0; }\n}\n\n/* board */\n.sl-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }\n.sl-col { display: flex; flex-direction: column; gap: 0.55rem; }\n.sl-col-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--muted); padding: 0.1rem 0.2rem 0.4rem; }\n.sl-col-n { margin-left: auto; color: var(--dim); }\n.sl-bcard { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 0.6rem 0.65rem; display: flex; flex-direction: column; gap: 0.5rem; }\n.sl-bcard p { margin: 0; font-size: 0.8rem; line-height: 1.35; }\n.sl-bcard-f { display: flex; align-items: center; justify-content: space-between; }\n.sl-bcard.is-muted { opacity: 0.55; }\n.sl-bcard.is-drag {\n border-color: rgba(91,141,239,0.55); box-shadow: 0 16px 34px -14px rgba(0,0,0,0.8);\n transform: rotate(-1.6deg) translateY(-3px); cursor: grabbing;\n}\n.sl-drop { height: 46px; border: 1.6px dashed var(--line); border-radius: 9px; background: rgba(91,141,239,0.05); }\n\n/* roadmap */\n.sl-road { display: flex; flex-direction: column; gap: 0.7rem; }\n.sl-road-head { display: flex; align-items: center; gap: 1rem; font-size: 0.78rem; color: var(--muted); padding-left: 38%; }\n.sl-road-months { display: flex; flex: 1; justify-content: space-between; }\n.sl-road-body { position: relative; display: flex; flex-direction: column; gap: 0.55rem; }\n.sl-road-now { position: absolute; top: -0.2rem; bottom: 0; width: 1px; background: var(--urgent); opacity: 0.6; z-index: 2; }\n.sl-road-now::before { content: \"\"; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--urgent); }\n.sl-road-row { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: 0.6rem; }\n.sl-road-label { display: flex; flex-direction: column; min-width: 0; }\n.sl-road-name { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sl-road-team { font-size: 0.72rem; color: var(--dim); }\n.sl-road-track { position: relative; height: 22px; background: var(--bg-2); border-radius: 6px; }\n.sl-road-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; }\n.sl-bar-blue { background: linear-gradient(90deg, rgba(91,141,239,0.85), rgba(91,141,239,0.5)); }\n.sl-bar-violet { background: linear-gradient(90deg, rgba(155,124,240,0.85), rgba(155,124,240,0.5)); }\n.sl-bar-green { background: linear-gradient(90deg, rgba(78,163,115,0.85), rgba(78,163,115,0.5)); }\n.sl-bar-amber { background: linear-gradient(90deg, rgba(217,164,65,0.85), rgba(217,164,65,0.5)); }\n\n/* diff */\n.sl-diff { font-family: var(--font-geist-mono), ui-monospace, monospace; }\n.sl-diff-head { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.5rem 0.7rem; font-size: 0.78rem; color: var(--muted); }\n.sl-diff-file { color: var(--frost); }\n.sl-plus { color: var(--ok); }\n.sl-minus { color: var(--urgent); }\n.sl-diff-body { background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }\n.sl-diff-line { display: flex; align-items: center; font-size: 0.76rem; line-height: 1.9; }\n.sl-diff-line code { font-family: inherit; white-space: pre; }\n.sl-diff-n { width: 2.2rem; text-align: right; padding-right: 0.7rem; color: var(--dim); flex: 0 0 auto; }\n.sl-diff-sign { width: 1rem; text-align: center; flex: 0 0 auto; color: var(--dim); }\n.sl-dl-add { background: rgba(78,163,115,0.12); }\n.sl-dl-add code, .sl-dl-add .sl-diff-sign { color: #8fd3ac; }\n.sl-dl-del { background: rgba(229,104,122,0.12); }\n.sl-dl-del code, .sl-dl-del .sl-diff-sign { color: #f0a4b0; }\n.sl-dl-context code { color: var(--muted); }\n.sl-diff-comment { display: flex; gap: 0.6rem; margin-top: 0.8rem; font-family: var(--font-geist), sans-serif; }\n.sl-diff-bubble { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 0.55rem 0.7rem; font-size: 0.82rem; color: var(--muted); }\n.sl-diff-author { display: block; color: var(--frost); font-weight: 600; font-size: 0.8rem; margin-bottom: 0.15rem; }\n\n/* CHANGELOG */\n.sl-change { border-top: 1px solid var(--line); }\n.sl-change-list { display: flex; flex-direction: column; }\n.sl-change-item {\n display: grid; grid-template-columns: 8rem 1fr; gap: clamp(1rem, 3vw, 2.4rem);\n padding: 1.6rem 0; border-top: 1px solid var(--line-2);\n opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);\n}\n.sl-change-item:first-child { border-top: none; }\n.sl-change-item.is-shown { opacity: 1; transform: none; }\n.sl-change-meta { display: flex; flex-direction: column; gap: 0.4rem; }\n.sl-change-date { color: var(--muted); font-size: 0.85rem; }\n.sl-change-ver { font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 0.74rem; color: var(--blue-2); border: 1px solid rgba(91,141,239,0.3); border-radius: 6px; padding: 0.05rem 0.4rem; width: fit-content; }\n.sl-change-title { font-size: 1.12rem; font-weight: 600; margin: 0 0 0.4rem; letter-spacing: -0.01em; }\n.sl-change-body p { color: var(--muted); font-size: 0.95rem; margin: 0; max-width: 42rem; }\n@media (max-width: 620px) { .sl-change-item { grid-template-columns: 1fr; gap: 0.6rem; } .sl-change-meta { flex-direction: row; align-items: center; } }\n\n/* TESTIMONIALS */\n.sl-quotes { padding: clamp(4rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--line); overflow: hidden; }\n.sl-statband { text-align: center; max-width: 1080px; margin: 0 auto clamp(2.6rem, 5vw, 3.6rem); padding: 0 clamp(1.1rem, 4vw, 2.6rem); display: flex; flex-direction: column; gap: 0.4rem; }\n.sl-statband-n { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }\n.sl-statband-l { color: var(--muted); font-size: 1rem; }\n.sl-marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }\n.sl-marquee-track { display: flex; gap: 1rem; width: max-content; animation: slMarquee 48s linear infinite; }\n.sl-marquee:hover .sl-marquee-track { animation-play-state: paused; }\n@keyframes slMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n.sl-quote { flex: 0 0 clamp(20rem, 30vw, 24rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; }\n.sl-quote blockquote { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--frost); }\n.sl-quote figcaption { display: flex; align-items: center; gap: 0.65rem; }\n.sl-quote-who { display: block; font-size: 0.88rem; font-weight: 600; }\n.sl-quote-role { display: block; font-size: 0.8rem; color: var(--dim); }\n\n/* TRUST */\n.sl-trust { max-width: 1080px; margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.1rem, 4vw, 2.6rem); border-top: 1px solid var(--line); }\n.sl-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); }\n.sl-trust-item { display: flex; flex-direction: column; gap: 0.4rem; }\n.sl-trust-h { font-size: 1.02rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }\n.sl-trust-item p { color: var(--muted); font-size: 0.88rem; margin: 0; }\n@media (max-width: 760px) { .sl-trust-grid { grid-template-columns: 1fr 1fr; } }\n@media (max-width: 440px) { .sl-trust-grid { grid-template-columns: 1fr; } }\n\n/* FINAL CTA */\n.sl-final { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) clamp(1.1rem, 4vw, 2.6rem); text-align: center; overflow: hidden; }\n.sl-final-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(91,141,239,0.2), transparent 70%); }\n.sl-final-inner { position: relative; max-width: 40rem; margin: 0 auto; }\n.sl-final-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; margin: 0; }\n.sl-final-lede { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); margin: 1.2rem auto 2rem; max-width: 34rem; }\n.sl-final .sl-hero-actions { justify-content: center; }\n\n/* FOOTER */\n.sl-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(3rem, 6vw, 4.5rem) clamp(1.1rem, 4vw, 2.6rem) 2.2rem; }\n.sl-foot-top { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 2fr; gap: clamp(2rem, 5vw, 4rem); }\n.sl-foot-brand .sl-brand { margin-bottom: 0.9rem; }\n.sl-foot-tag { color: var(--muted); font-size: 0.92rem; max-width: 20rem; margin: 0; }\n.sl-foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }\n.sl-foot-col { display: flex; flex-direction: column; gap: 0.6rem; }\n.sl-foot-h { font-size: 0.82rem; color: var(--frost); font-weight: 600; margin-bottom: 0.15rem; }\n.sl-foot-col a { color: var(--muted); font-size: 0.88rem; transition: color 0.25s; }\n.sl-foot-col a:hover { color: var(--frost); }\n.sl-foot-fine { max-width: 1080px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--dim); font-size: 0.82rem; }\n@media (max-width: 760px) { .sl-foot-top { grid-template-columns: 1fr; gap: 2rem; } .sl-foot-cols { grid-template-columns: 1fr 1fr; } }\n\n/* @@APPEND@@ */\n`\n","type":"registry:page"}],"meta":{"kind":"templates","categories":["landing"],"docs":"https://ui.artbloom.tech/artbloom/templates/slate"}}