From b4f0d86c1192e828de2a67b2697fa4d1c39ba0af Mon Sep 17 00:00:00 2001 From: Mohammad Faiz Date: Sun, 26 Jul 2026 21:58:34 +0530 Subject: [PATCH] Website --- Docs/templates/NPM_AutoCode_AI.html | 1135 --------------------------- website/index.html | 660 ++++++++++++++++ website/script.js | 556 +++++++++++++ website/style.css | 677 ++++++++++++++++ 4 files changed, 1893 insertions(+), 1135 deletions(-) delete mode 100644 Docs/templates/NPM_AutoCode_AI.html create mode 100644 website/index.html create mode 100644 website/script.js create mode 100644 website/style.css diff --git a/Docs/templates/NPM_AutoCode_AI.html b/Docs/templates/NPM_AutoCode_AI.html deleted file mode 100644 index 0633079..0000000 --- a/Docs/templates/NPM_AutoCode_AI.html +++ /dev/null @@ -1,1135 +0,0 @@ -\ - - - - - -NPM-AutoCode-AI — v3 · NPMAI Ecosystem - - - - - - - -
-
- -
- - - - -
-
-
v3NPMAI Ecosystem · Free & Open Source
-

NPM-AutoCode-AI
turns plain English
into things done.

-

Describe a task. It plans it, writes the code, checks the code, runs it on your machine, and confirms it actually worked — a five-role agent loop, not a chatbot pretending to be one.

-
- ↓ Download v3 — Free - Watch it think → -
-
-
57,000+
Downloads
-
1371
Tools
-
Free
Forever
-
45+
LLMs
-
-
-
-
Every task, five roles
-
Plannerbreaks your task into steps
-
Tool Managerpicks from 100 real tools
-
Coderwrites the Python for each step
-
Auditorchecks it before anything runs
-
Verifierconfirms it actually worked
-
-
scroll to see it run
-
- -
- - -
-
-
Live Demo
-

Pick any task. Watch it run.

-

These are real categories from the tool registry — dev tooling, cloud, business, communication, creative, data, media, and system automation.

-
-
-
-
-
-
NPM-AutoCode-AI — v3
-
MCP LINKED
-
-
-
- -
-
Navigation
-
💬 Agent
-
📋 History
-
🛠 Tools
-
⚙ Settings
-
👤 Founder
-
📖 Docs
-
-
MCP Link Connected
-
-
-
-
Ready0%
-
-
-
-
Hi! Describe any task — I'll plan it, write the code, audit it, run it, and confirm it actually worked. Pick one below to see it live.
-
-
Execution Logs
-
- - - -
-
-
-
-
- - - - - - - - - - - - - - -
-
-
- -
- - -
-
-
MCP Architecture
-

Connect it to Claude or Grok.
No API key required.

-

NPM-AutoCode-AI hosts its own MCP endpoint. Link it once from the app, paste the link into your Claude or Grok connector settings, and the LLM you already talk to becomes the brain — planning, coding, and auditing — while this app is the hands that actually execute on your machine.

-
- -
-
🖥
Your Desktop
executes locally
-
-
🛰
MCP Server(Hosted by NPMAI ECOSYSTEM)
Connect your web browser LLMs to your desktop
-
-
🤖
Claude / Grok and others
thinks, writes, reviews
-
-
- Code + results flow back →← Prompts + tasks flow out -
- -
-
01

Get your link, once

Log in from the app's MCP tab. That's the only time you'll ever need to log in — everything else in the app works without an account.

-
02

Paste it into your connector

Drop the link into Claude or Grok's custom connector settings. From then on, just talk to your normal LLM chat like always.

-
03

Ask for anything

"Clear my Downloads folder," "email my team the report" — the LLM detects it needs a real action and calls into your link automatically.

-
04

It's audited before it runs

Every generated script passes an Auditor review, plus a separate safety check, before it's ever sent to your desktop to execute.

-
05

Runs on your machine, not the cloud

Execution happens locally — your files, your credentials, your machine. The MCP server only ever relays code and results.

-
06

You confirm it, not just the exit code

A Verifier role checks the actual output against the task — not just whether the script ran without crashing.

-
-
- -
- - -
-
-
Capabilities
-

Built to compete.
Free to use.

-

Everything a coding agent should do — on your own machine, with a GUI, for everyone.

-

A System which can automate everything without needed of API_Key.

-

A System by which you can automate your Local Machine from AI Websites like claude.com, grok.com

-
-
-
- 🧠

Five-Role Agent Pipeline

-

Planner, Tool Manager, Coder, Auditor, and Verifier — each with its own job and its own fallback chain. Not a chatbot. A real agent loop.

- Plan → Select → Code → Audit → Execute → Verify -
-
- 🔒

Independent Security Audit

-

Every generated script is reviewed by a separate Auditor role before execution, plus a second non-LLM safety check that can't be talked around.

- Security First -
-
- 🔄

Auto-Debug Loop (12 retries)

-

Execution fails? The agent captures the error, feeds it back to the Coder, and retries with the prior attempt as context — up to 12 times per step.

- Self-Healing -
-
- 📁

Workspace Awareness

-

On first run, the agent scans Desktop, Downloads, Documents, Pictures, Videos, and Music — it knows your files before you type a path.

- Workspace Scanner -
-
- 🔗

MCP Link, Not an API Key

-

Connect Claude or Grok directly from the sidebar. Login happens once, only for this — everything else in the app stays account-free.

- Bring Your Own LLM -
-
- ▶

Real Subprocess Execution

-

Code runs as an actual child process — not exec(). Output streams live to the log panel. Kill any script instantly, mid-run.

- Real Isolation -
-
-
- -
- - -
-
-
Tool Registry
-

1371 Tools. Zero Setup.

-

Every tool below is available automatically. Just describe the task — the agent picks what it needs.

-
-
-
- 🌱 GitTool · commit · branch · rebase - ⭐ GitHubTool · issues · PRs · releases - 🦊 GitLabTool · pipelines · merge requests - 🐳 DockerTool · build · compose · registry - ☁ AWSS3Tool · buckets · presigned URLs - 💳 StripeTool · payments · invoices · payouts - 📧 SMTPAdvancedTool · HTML email · attachments - 📓 NotionAdvancedTool · pages · databases - 🎥 ZoomTool · meetings · recordings - 📞 TwilioTool · SMS · voice · WhatsApp - 🌱 GitTool · commit · branch · rebase - ⭐ GitHubTool · issues · PRs · releases - 🦊 GitLabTool · pipelines · merge requests - 🐳 DockerTool · build · compose · registry - ☁ AWSS3Tool · buckets · presigned URLs - 💳 StripeTool · payments · invoices · payouts - 📧 SMTPAdvancedTool · HTML email · attachments - 📓 NotionAdvancedTool · pages · databases - 🎥 ZoomTool · meetings · recordings - 📞 TwilioTool · SMS · voice · WhatsApp -
-
-
-
- 🖥 TerminalTool · run commands · pipe output - 📦 PackageManagerTool · npm · pip · cargo - 🧩 VSCodeTool · open · edit · extensions - 🛠 MakefileTool · targets · build steps - 🧱 CMakeTool · configure · build · test - 🐞 DebuggerTool · breakpoints · stack traces - 🎙 SpeechAITool · transcribe · diarize · clone - 👁 ComputerVisionTool · detect · classify · OCR - 🎬 FFmpegTool · convert · compress · trim - 🖼 ImageAdvancedTool · resize · batch edit - 🖥 TerminalTool · run commands · pipe output - 📦 PackageManagerTool · npm · pip · cargo - 🧩 VSCodeTool · open · edit · extensions - 🛠 MakefileTool · targets · build steps - 🧱 CMakeTool · configure · build · test - 🐞 DebuggerTool · breakpoints · stack traces - 🎙 SpeechAITool · transcribe · diarize · clone - 👁 ComputerVisionTool · detect · classify · OCR - 🎬 FFmpegTool · convert · compress · trim - 🖼 ImageAdvancedTool · resize · batch edit -
-
-
- -
- - -
-
-
Agent Architecture
-

How the agent thinks

-

Every task moves through these stages in order — each one runs a different role for the right job.

-
-
-
01
🔍
Scan
Reads your file system before anything else
→
-
02
🗺
Plan
Breaks the task into ordered, atomic steps
→
-
03
🧰
Select Tools
Picks exactly what each step needs from the registry
→
-
04
⚡
Generate
Writes real Python for each step
→
-
05
🔒
Audit
Reviewed for anything destructive — BLOCK or ALLOW
→
-
06
▶
Execute
Real subprocess. Streams live. Kill anytime.
→
-
07
✓
Verify
Confirms the task actually completed
-
-
- -
- - -
-
-
The Builder
-

Meet the Founder

-
-
-
-
- Sonu Kumar -
-
-
Sonu Kumar 🇮🇳
-
Founder · NPMAI ECOSYSTEM · Bihar Viral Boy
-
- Age 15 - Bihar, India - Kota, Rajasthan - 434K+ Followers - TEDx Speaker - Allen 100% Scholar -
-
- ⭐ GitHub - 🐍 PyPI - 🎤 TEDx - 📘 FB -
-
-
-
-
4M+
npmai PyPI downloads
-
300K+
npmai-agents downloads
-
433K+
Social followers
-
TEDx
Speaker at 13
-
100%
Allen scholarship
-
10
Research papers
-
-
-
🧒
Age 9
Started Teaching Nursery Kids
While in 4th grade, taught nursery children — planting the seed for education equity.
-
🔥
Age 11 — "Bihar Viral Boy"
Challenged Bihar's Chief Minister
Raised education & liquor ban issues. Went viral nationally. Received support from Cabinet Ministers, Bollywood actors & ALLEN Institute founder.
-
🎤
Age 13
TEDx Speaker
One of India's youngest TEDx speakers — rural education and using tech to bridge India's urban-rural divide.
-
💻
Age 13-15
Founded NPMAI ECOSYSTEM
Self-taught, zero CS background. Built the entire ecosystem on free cloud infrastructure.
-
📄
2026
10 Research Papers Published
Spanning AI/agent architecture, chemistry, mathematics, and constitutional/political science.
-
-
-
-
- -
- - -
-
-
Get Started
-

Download free.
Run instantly.

-

No API keys required to start. No local GPU needed. Unzip and run.

-
-
1

Download ZIP

-
2

Unzip folder

-
3

Run .exe

-
4

Start automating

-
- ↓ For Windows:- Download NPM-AutoCode-AI v3

- ↓ For Linux:- Download NPM-AutoCode-AI v3

- ↓ For Macos:- Download NPM-AutoCode-AI v3 -
Windows · Linux · Macos · Free Forever · Open Source · NPMAI Ecosystem
-
57,000+ downloads — determined as per the LLM requests received on our npmai_LLM server; that's how we identified this figure.
-
-
- -
-
NPM-AutoCode-AI · v3
-
© 2026 NPMAI ECOSYSTEM · Made with ❤️ by Sonu Kumar · Free & Open Source
-
- GitHub - PyPI - Docs - TEDx -
-
- -
- - - - diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..4347481 --- /dev/null +++ b/website/index.html @@ -0,0 +1,660 @@ + + + + + +NPM-AutoCode-AI — v3 · NPMAI Ecosystem + + + + + + + + + + +
+
+
+
+ + v3 · Free & Open Source +
+

+ NPM-AutoCode-AI turns
+ plain English
+ into things done. +

+

Describe a task. It plans it, writes the code, checks the code, runs it on your machine, and confirms it actually worked — a five-role agent loop, not a chatbot pretending to be one.

+
+ + + + + Download v3 — Free + + + Watch it think + + + + +
+
+
0
Downloads
+
100
Tools
+
Free
Forever
+
45+
LLMs
+
+
+
+
Every task, five roles
+
+
+ + + +
+
Planner
Breaks your task into steps
+
+
+
+ + + +
+
Tool Manager
Picks from 100 real tools
+
+
+
+ + + +
+
Coder
Writes the Python for each step
+
+
+
+ + + +
+
Auditor
Checks it before anything runs
+
+
+
+ + + +
+
Verifier
Confirms it actually worked
+
+
+
+
+ Scroll +
+
+
+ +
+ + +
+
+
+
Live Demo
+

Pick any task. Watch it run.

+

Real categories from the tool registry — dev tooling, cloud, business, communication, creative, data, media, and system automation.

+
+
+
+
+
+
NPM-AutoCode-AI — v3
+
MCP LINKED
+
+
+
+ +
+
Navigation
+
+ + + + Agent +
+
+ + + + History +
+
+ + + + Tools +
+
+ + + + Settings +
+
+ + + + Founder +
+
+ + + + Docs +
+
+
+
+ MCP Link Connected +
+
+
+
+
Ready0%
+
+
+
+
Hi! Describe any task — I'll plan it, write the code, audit it, run it, and confirm it actually worked. Pick one below to see it live.
+
+
Execution Logs
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + +
+
+
+
+ +
+ + +
+
+
+
MCP Architecture
+

Connect it to Claude or Grok.
No API key required.

+

NPM-AutoCode-AI hosts its own MCP endpoint. Link it once from the app, paste the link into your Claude or Grok connector settings, and the LLM you already talk to becomes the brain.

+
+ +
+
+
+ +
+
Your Desktop
+
executes locally
+
+
+
+
+ +
+
MCP Server
+
plan · route · verify
+
+
+
+
+ +
+
Claude / Grok
+
thinks, writes, reviews
+
+
+
+ Code + results flow back → + ← Prompts + tasks flow out +
+ +
+
01

Get your link, once

Log in from the app's MCP tab. That's the only time you'll ever need to log in — everything else works without an account.

+
02

Paste it into your connector

Drop the link into Claude or Grok's custom connector settings. From then on, just talk to your normal LLM like always.

+
03

Ask for anything

"Clear my Downloads folder," "email my team the report" — the LLM detects it needs a real action and calls into your link automatically.

+
04

It's audited before it runs

Every generated script passes an Auditor review, plus a separate safety check, before it's sent to your desktop to execute.

+
05

Runs on your machine, not the cloud

Execution happens locally — your files, your credentials, your machine. The MCP server only ever relays code and results.

+
06

You confirm it, not just the exit code

A Verifier role checks the actual output against the task — not just whether the script ran without crashing.

+
+
+
+ +
+ + +
+
+
+
Capabilities
+

Built to compete. Free to use.

+

Everything a coding agent should do — on your own machine, with a GUI, for everyone.

+
+
+
+
+ +
+

Five-Role Agent Pipeline

+

Planner, Tool Manager, Coder, Auditor, and Verifier — each with its own job and fallback chain. A real agent loop, not a chatbot.

+ Plan → Select → Code → Audit → Execute → Verify +
+
+
+ +
+

Independent Security Audit

+

Every generated script is reviewed by a separate Auditor role before execution, plus a second non-LLM safety check that can't be talked around.

+ Security First +
+
+
+ +
+

Auto-Debug Loop (12 retries)

+

Execution fails? The agent captures the error, feeds it back to the Coder, and retries with the prior attempt as context — up to 12 times per step.

+ Self-Healing +
+
+
+ +
+

Workspace Awareness

+

On first run, the agent scans Desktop, Downloads, Documents, Pictures, Videos, and Music — it knows your files before you type a path.

+ Workspace Scanner +
+
+
+ +
+

MCP Link, Not an API Key

+

Connect Claude or Grok directly from the sidebar. Login happens once, only for this — everything else in the app stays account-free.

+ Bring Your Own LLM +
+
+
+ +
+

Real Subprocess Execution

+

Code runs as an actual child process — not exec(). Output streams live to the log panel. Kill any script instantly, mid-run.

+ Real Isolation +
+
+
+
+ +
+ + +
+
+
+
Tool Registry
+

100 Tools. Zero Setup.

+

Every tool below is available automatically. Just describe the task — the agent picks what it needs.

+
+
+
+ GitTool · commit · branch · rebase + GitHubTool · issues · PRs · releases + GitLabTool · pipelines · merge requests + DockerTool · build · compose · registry + AWSS3Tool · buckets · presigned URLs + StripeTool · payments · invoices · payouts + SMTPAdvancedTool · HTML email · attachments + NotionAdvancedTool · pages · databases + ZoomTool · meetings · recordings + TwilioTool · SMS · voice · WhatsApp + + GitTool · commit · branch · rebase + GitHubTool · issues · PRs · releases + GitLabTool · pipelines · merge requests + DockerTool · build · compose · registry + AWSS3Tool · buckets · presigned URLs + StripeTool · payments · invoices · payouts + SMTPAdvancedTool · HTML email · attachments + NotionAdvancedTool · pages · databases + ZoomTool · meetings · recordings + TwilioTool · SMS · voice · WhatsApp +
+
+
+
+ TerminalTool · run commands · pipe output + PackageManagerTool · npm · pip · cargo + VSCodeTool · open · edit · extensions + MakefileTool · targets · build steps + CMakeTool · configure · build · test + DebuggerTool · breakpoints · stack traces + SpeechAITool · transcribe · diarize · clone + ComputerVisionTool · detect · classify · OCR + FFmpegTool · convert · compress · trim + ImageAdvancedTool · resize · batch edit + + TerminalTool · run commands · pipe output + PackageManagerTool · npm · pip · cargo + VSCodeTool · open · edit · extensions + MakefileTool · targets · build steps + CMakeTool · configure · build · test + DebuggerTool · breakpoints · stack traces + SpeechAITool · transcribe · diarize · clone + ComputerVisionTool · detect · classify · OCR + FFmpegTool · convert · compress · trim + ImageAdvancedTool · resize · batch edit +
+
+
+
+ +
+ + +
+
+
+
Agent Architecture
+

How the agent thinks

+

Every task moves through these stages in order — each one runs a different role for the right job.

+
+
+
+
01
+
+
Scan
+
Reads your file system before anything else
+
→
+
+
+
02
+
+
Plan
+
Breaks the task into ordered, atomic steps
+
→
+
+
+
03
+
+
Select Tools
+
Picks exactly what each step needs from the registry
+
→
+
+
+
04
+
+
Generate
+
Writes real Python for each step
+
→
+
+
+
05
+
+
Audit
+
Reviewed for safety — BLOCK or ALLOW
+
→
+
+
+
06
+
+
Execute
+
Real subprocess. Streams live. Kill anytime.
+
→
+
+
+
07
+
+
Verify
+
Confirms the task actually completed
+
+
+
+
+ +
+ + +
+
+
+
The Builder
+

Meet the Founder

+
+
+
+
+ Sonu Kumar +
+
Sonu Kumar
+
Founder · NPMAI ECOSYSTEM
+
+ Age 15 + Bihar, India + Kota, Rajasthan + 434K+ Followers + TEDx Speaker + Allen 100% Scholar +
+
+ + + GitHub + + + + PyPI + + + + TEDx + + + + FB + +
+
+
4M+
npmai downloads
+
300K+
npmai-agents
+
433K+
Social followers
+
TEDx
Speaker at 13
+
100%
Allen scholarship
+
10
Research papers
+
+
+
+
+
+
+
Age 9
Started Teaching Nursery Kids
While in 4th grade, taught nursery children — planting the seed for education equity.
+
+
+
+
Age 11 — "Bihar Viral Boy"
Challenged Bihar's Chief Minister
Raised education & liquor ban issues. Went viral nationally. Received support from Cabinet Ministers & ALLEN Institute founder.
+
+
+
+
Age 13
TEDx Speaker
One of India's youngest TEDx speakers — rural education and using tech to bridge India's urban-rural divide.
+
+
+
+
Age 14
Launched NPM-AutoCode-AI
Built an open-source AI agent that writes and runs code on your machine. Downloaded 57K+ times across 45+ countries.
+
+
+
+
+
+
+ +
+ + +
+
+
+

Ready to automate anything?

+

Download v3 free. No account required. No API key needed.

+
+
1

Download the zip

+
2

Extract & run

+
3

Connect your LLM

+
4

Start automating

+
+ + + + + Download v3 — Free + +
ZIP · 85MB · Windows / macOS / Linux
+
+
+
+ + + + + + + diff --git a/website/script.js b/website/script.js new file mode 100644 index 0000000..bc53bef --- /dev/null +++ b/website/script.js @@ -0,0 +1,556 @@ +// ── Theme ── +(function() { + const stored = localStorage.getItem('theme'); + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + const theme = stored || (prefersDark ? 'dark' : 'light'); + document.documentElement.setAttribute('data-theme', theme); +})(); + +function toggleTheme() { + const current = document.documentElement.getAttribute('data-theme'); + const next = current === 'dark' ? 'light' : 'dark'; + document.documentElement.setAttribute('data-theme', next); + localStorage.setItem('theme', next); +} + +// ── Reveal on scroll ── +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); +}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }); + +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); +}); + +// ── Counter Animation ── +function animateCounter(el, target, suffix = '') { + const isFormatted = typeof target === 'string' && target.includes('+'); + const num = parseInt(target); + let current = 0; + const step = Math.max(1, Math.floor(num / 60)); + const timer = setInterval(() => { + current += step; + if (current >= num) { + current = num; + clearInterval(timer); + } + el.textContent = (isFormatted ? current.toLocaleString() + '+' : current.toLocaleString()) + suffix; + }, 20); +} + +const counterObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const el = entry.target; + const target = el.getAttribute('data-count'); + if (target) { + const suffix = el.getAttribute('data-suffix') || ''; + animateCounter(el, target, suffix); + } + counterObserver.unobserve(el); + } + }); +}, { threshold: 0.5 }); + +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('[data-count]').forEach(el => counterObserver.observe(el)); +}); + +// ── Demo Simulator ── +const demoData = { + tasks: [ + { + label: 'Plot CSV chart', + steps: [ + { log: 'Scanning workspace for CSV files...', pct: 8 }, + { log: 'Found: sales_data.csv (2.4MB)', pct: 15 }, + { log: 'Planning: load, parse, aggregate, plot', pct: 22 }, + { log: 'Tool selected: PandasTool, MatplotlibTool', pct: 30 }, + { log: 'Writing Python script...', pct: 42 }, + { log: 'Auditor: reviewing for destructive ops', pct: 55 }, + { log: 'Auditor: ALLOW — safe operations only', pct: 65 }, + { log: 'Executing: python plot_csv.py', pct: 78 }, + { log: 'Output: chart saved to chart_output.png', pct: 90 }, + { log: 'Verifier: checking output exists & matches task', pct: 96 }, + { log: '✓ Task complete. Chart generated successfully.', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Plot a chart from my CSV file' }, + { role: 'agent', text: 'I\'ll analyze your CSV and generate a chart. Let me start by scanning for CSV files in your workspace.' }, + { role: 'agent', text: 'Found sales_data.csv with columns: Date, Product, Revenue, Quantity. I\'ll aggregate revenue by month and plot a bar chart.' }, + { role: 'agent', text: 'Script generated (42 lines). Auditor has reviewed and approved it. No destructive operations detected.' }, + { role: 'agent', text: '✓ Done! Chart saved to chart_output.png — a clean bar chart of monthly revenue with proper labels.' }, + ] + }, + { + label: 'Rename 100 files', + steps: [ + { log: 'Scanning target directory...', pct: 6 }, + { log: 'Found 127 files matching pattern', pct: 14 }, + { log: 'Planning: bulk rename with prefix "invoice_"', pct: 24 }, + { log: 'Tool selected: FileSystemTool, BatchRenameTool', pct: 33 }, + { log: 'Writing Python rename script...', pct: 44 }, + { log: 'Auditor: reviewing for data loss risk', pct: 56 }, + { log: 'Auditor: ALLOW — reversible naming pattern', pct: 65 }, + { log: 'Executing: python batch_rename.py', pct: 76 }, + { log: 'Renamed 100/100 files in 0.8s', pct: 88 }, + { log: 'Verifier: checking all files renamed correctly', pct: 95 }, + { log: '✓ 100 files renamed. invoice_001.pdf → invoice_100.pdf', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Rename all PDFs numerically' }, + { role: 'agent', text: 'Scanning your Documents folder for PDF files...' }, + { role: 'agent', text: 'Found 100 PDF files. I\'ll rename them as invoice_001.pdf through invoice_100.pdf.' }, + { role: 'agent', text: 'Script ready. Auditor has reviewed and approved it.' }, + { role: 'agent', text: '✓ All 100 files renamed successfully in under a second!' }, + ] + }, + { + label: 'Scrape → Excel', + steps: [ + { log: 'Planning web scrape task...', pct: 5 }, + { log: 'Tool selected: RequestsTool, BeautifulSoupTool', pct: 15 }, + { log: 'Writing Python scraper...', pct: 28 }, + { log: 'Auditor: reviewing external requests', pct: 40 }, + { log: 'Auditor: ALLOW — read-only HTTP GET', pct: 50 }, + { log: 'Executing: python scrape_to_excel.py', pct: 62 }, + { log: 'Fetched 200 records from target page', pct: 75 }, + { log: 'Writing to Excel with formatting...', pct: 85 }, + { log: 'Verifier: checking Excel file integrity', pct: 94 }, + { log: '✓ Data saved to scrape_results.xlsx', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Scrape website data to Excel' }, + { role: 'agent', text: 'I\'ll build a scraper that extracts data and saves it as a formatted Excel file.' }, + { role: 'agent', text: 'Target URL is accessible. Extracting table data from the page...' }, + { role: 'agent', text: '200 records extracted. Writing to Excel with auto-sized columns and headers.' }, + { role: 'agent', text: '✓ Done! scrape_results.xlsx is ready with 200 records.' }, + ] + }, + { + label: 'Bulk email from CSV', + steps: [ + { log: 'Scanning for CSV with email contacts...', pct: 7 }, + { log: 'Found: contacts.csv (53 recipients)', pct: 16 }, + { log: 'Planning: read CSV, compose, send via SMTP', pct: 26 }, + { log: 'Tool selected: SMTPAdvancedTool, CSVTool', pct: 35 }, + { log: 'Writing Python email script...', pct: 46 }, + { log: 'Auditor: reviewing for sensitive data exposure', pct: 57 }, + { log: 'Auditor: ALLOW — no sensitive fields in CSV', pct: 66 }, + { log: 'Executing: python bulk_email.py', pct: 77 }, + { log: 'Sent: 53/53 emails delivered', pct: 88 }, + { log: 'Verifier: checking delivery reports', pct: 95 }, + { log: '✓ All 53 emails sent successfully.', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Send bulk emails from CSV' }, + { role: 'agent', text: 'Reading your contacts.csv to prepare the email campaign...' }, + { role: 'agent', text: 'Found 53 recipients with Name, Email, Company columns.' }, + { role: 'agent', text: 'Script ready. Auditor approved. Sending personalized emails now...' }, + { role: 'agent', text: '✓ All 53 emails sent and delivered successfully!' }, + ] + }, + { + label: 'Open a GitHub issue', + steps: [ + { log: 'Checking GitHub authentication...', pct: 8 }, + { log: 'Authenticated as @user', pct: 18 }, + { log: 'Plan: repo lookup, issue create with labels', pct: 28 }, + { log: 'Tool selected: GitHubTool', pct: 36 }, + { log: 'Writing Python script...', pct: 46 }, + { log: 'Auditor: reviewing repo write access', pct: 56 }, + { log: 'Auditor: ALLOW — issue creation only', pct: 64 }, + { log: 'Executing: python create_issue.py', pct: 74 }, + { log: 'Issue #42 created in target repo', pct: 86 }, + { log: 'Verifier: confirming issue exists via API', pct: 94 }, + { log: '✓ Issue opened: github.com/org/repo/issues/42', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'File a GitHub issue about bug' }, + { role: 'agent', text: 'Connecting to GitHub API... Authenticated successfully.' }, + { role: 'agent', text: 'I\'ve written a detailed bug report with reproduction steps, expected vs actual behavior, and environment info.' }, + { role: 'agent', text: 'Auditor has reviewed — safe. Creating the issue now...' }, + { role: 'agent', text: '✓ Issue #42 created with bug label and priority: medium.' }, + ] + }, + { + label: 'Zip & sort PDFs', + steps: [ + { log: 'Scanning Documents/PDFs...', pct: 6 }, + { log: 'Found 45 PDF files in 3 folders', pct: 16 }, + { log: 'Plan: sort by date, zip with folders', pct: 26 }, + { log: 'Tool selected: ZipTool, FileSystemTool', pct: 34 }, + { log: 'Writing Python archiver...', pct: 44 }, + { log: 'Auditor: reviewing file organization safety', pct: 54 }, + { log: 'Auditor: ALLOW — non-destructive archiving', pct: 62 }, + { log: 'Executing: python archive_pdfs.py', pct: 72 }, + { log: 'Created: PDFs_Archive_2024.zip (128MB)', pct: 84 }, + { log: 'Verifier: checking archive integrity', pct: 94 }, + { log: '✓ 45 PDFs sorted & archived.', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Zip and organize my PDFs' }, + { role: 'agent', text: 'Scanning your Documents folder for PDF files scattered across directories...' }, + { role: 'agent', text: 'Found 45 PDFs. I\'ll sort them by date and create a well-organized archive.' }, + { role: 'agent', text: 'Archive created. Auditor verified no files were deleted — only copied.' }, + { role: 'agent', text: '✓ PDFs_Archive_2024.zip ready with 45 files sorted into folders.' }, + ] + }, + { + label: 'List S3 objects', + steps: [ + { log: 'Checking AWS credentials...', pct: 6 }, + { log: 'AWS credentials valid', pct: 16 }, + { log: 'Plan: list buckets, enumerate objects', pct: 26 }, + { log: 'Tool selected: AWSS3Tool', pct: 34 }, + { log: 'Writing Python S3 script...', pct: 44 }, + { log: 'Auditor: reviewing S3 read operations', pct: 54 }, + { log: 'Auditor: ALLOW — read-only S3 operations', pct: 62 }, + { log: 'Executing: python list_s3_objects.py', pct: 72 }, + { log: 'Bucket: my-app-data — 1,240 objects', pct: 84 }, + { log: 'Verifier: confirming object list matches count', pct: 94 }, + { log: '✓ S3 inventory complete. 1,240 objects across 3 buckets.', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Show my S3 bucket contents' }, + { role: 'agent', text: 'Authenticating with AWS... Credentials verified successfully.' }, + { role: 'agent', text: 'Found 3 buckets. Listing objects in the primary bucket now.' }, + { role: 'agent', text: 'Script complete. Auditor confirmed read-only access only.' }, + { role: 'agent', text: '✓ my-app-data: 1,240 objects, 3.2GB total across 12 prefixes.' }, + ] + }, + { + label: 'Rebuild Docker image', + steps: [ + { log: 'Checking Docker daemon...', pct: 5 }, + { log: 'Docker daemon running (v24.0.7)', pct: 14 }, + { log: 'Plan: Dockerfile found, rebuild with no-cache', pct: 24 }, + { log: 'Tool selected: DockerTool', pct: 33 }, + { log: 'Writing Docker build script...', pct: 44 }, + { log: 'Auditor: reviewing Dockerfile safety', pct: 54 }, + { log: 'Auditor: ALLOW — standard build', pct: 62 }, + { log: 'Executing: docker build --no-cache -t app:latest', pct: 74 }, + { log: 'Build successful (12 stages, 38s)', pct: 86 }, + { log: 'Verifier: confirming image exists & runs', pct: 94 }, + { log: '✓ Docker image rebuilt: app:latest (428MB)', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Rebuild my Docker image' }, + { role: 'agent', text: 'Checking Docker environment... Daemon is running with Docker v24.0.7.' }, + { role: 'agent', text: 'Found Dockerfile with 12 stages. I\'ll do a clean rebuild with --no-cache.' }, + { role: 'agent', text: 'Auditor reviewed the Dockerfile — no security concerns.' }, + { role: 'agent', text: '✓ Build complete in 38s. Image: app:latest (428MB). Container starts successfully.' }, + ] + }, + { + label: 'Pull Stripe payouts', + steps: [ + { log: 'Verifying Stripe API key...', pct: 7 }, + { log: 'Stripe API connected (mode: live)', pct: 17 }, + { log: 'Plan: query payouts, format as table', pct: 27 }, + { log: 'Tool selected: StripeTool', pct: 36 }, + { log: 'Writing Python Stripe script...', pct: 46 }, + { log: 'Auditor: reviewing financial data access', pct: 56 }, + { log: 'Auditor: ALLOW — read-only payouts', pct: 64 }, + { log: 'Executing: python fetch_payouts.py', pct: 76 }, + { log: 'Fetched 24 payouts ($48,230 total)', pct: 86 }, + { log: 'Verifier: reconciling payout totals', pct: 94 }, + { log: '✓ Payout report saved: stripe_payouts_2024.csv', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Get my Stripe payout history' }, + { role: 'agent', text: 'Connecting to Stripe API... Authenticated successfully.' }, + { role: 'agent', text: 'I\'ll fetch all payouts from the last 90 days and format them into a clean report.' }, + { role: 'agent', text: 'Auditor confirmed read-only access to payouts endpoint.' }, + { role: 'agent', text: '✓ 24 payouts totaling $48,230 saved to stripe_payouts_2024.csv.' }, + ] + }, + { + label: 'Log a Notion entry', + steps: [ + { log: 'Authenticating with Notion API...', pct: 7 }, + { log: 'Notion integration connected', pct: 16 }, + { log: 'Plan: create page in Tasks database', pct: 26 }, + { log: 'Tool selected: NotionAdvancedTool', pct: 35 }, + { log: 'Writing Python Notion script...', pct: 46 }, + { log: 'Auditor: reviewing database write scope', pct: 56 }, + { log: 'Auditor: ALLOW — single page creation', pct: 64 }, + { log: 'Executing: python notion_entry.py', pct: 74 }, + { log: 'Page created in Tasks database', pct: 86 }, + { log: 'Verifier: confirming page exists via API', pct: 94 }, + { log: '✓ Notion entry added to Tasks database.', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Add a task to Notion' }, + { role: 'agent', text: 'Connecting to Notion via API... Integration is active.' }, + { role: 'agent', text: 'I\'ll create a new page in your Tasks database with title, status, and priority.' }, + { role: 'agent', text: 'Auditor approved the write operation. Creating the entry now...' }, + { role: 'agent', text: '✓ New task "Q4 Review" added to Notion Tasks database.' }, + ] + }, + { + label: 'Compress a video', + steps: [ + { log: 'Scanning for video files...', pct: 6 }, + { log: 'Found: demo_recording.mp4 (1.2GB)', pct: 16 }, + { log: 'Plan: compress with H.264, target 100MB', pct: 26 }, + { log: 'Tool selected: FFmpegTool', pct: 34 }, + { log: 'Writing FFmpeg command...', pct: 44 }, + { log: 'Auditor: reviewing file modification safety', pct: 54 }, + { log: 'Auditor: ALLOW — creates new compressed file', pct: 62 }, + { log: 'Executing: ffmpeg -i demo_recording.mp4 ...', pct: 74 }, + { log: 'Compressed: 1.2GB → 86MB (93% reduction)', pct: 86 }, + { log: 'Verifier: checking output quality & size', pct: 94 }, + { log: '✓ Video compressed: demo_recording_compressed.mp4 (86MB)', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Compress my video file' }, + { role: 'agent', text: 'Searching for large video files in your workspace... Found demo_recording.mp4 at 1.2GB.' }, + { role: 'agent', text: 'I\'ll use H.264 encoding with CRF 23 to balance quality and size.' }, + { role: 'agent', text: 'Auditor confirmed the operation creates a new file — original is untouched.' }, + { role: 'agent', text: '✓ Compressed from 1.2GB to 86MB with excellent quality retention!' }, + ] + }, + { + label: 'Batch-resize photos', + steps: [ + { log: 'Scanning Pictures folder...', pct: 6 }, + { log: 'Found 48 images (JPEG, PNG)', pct: 16 }, + { log: 'Plan: resize to 1920px wide, maintain aspect', pct: 26 }, + { log: 'Tool selected: ImageAdvancedTool', pct: 34 }, + { log: 'Writing Python Pillow script...', pct: 44 }, + { log: 'Auditor: reviewing for data safety', pct: 54 }, + { log: 'Auditor: ALLOW — creates resized copies', pct: 62 }, + { log: 'Executing: python batch_resize.py', pct: 74 }, + { log: 'Resized 48/48 images in 2.3s', pct: 86 }, + { log: 'Verifier: checking output dimensions', pct: 94 }, + { log: '✓ 48 photos resized to 1920px wide.', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Resize all my photos' }, + { role: 'agent', text: 'Scanning Pictures folder for images... Found 48 photos.' }, + { role: 'agent', text: 'I\'ll resize all to 1920px wide, preserving aspect ratio and EXIF data.' }, + { role: 'agent', text: 'Auditor approved — creates copies, originals remain untouched.' }, + { role: 'agent', text: '✓ 48 photos resized in 2.3 seconds. Sharp and clean.' }, + ] + }, + { + label: 'Deploy via SSH', + steps: [ + { log: 'Checking SSH configuration...', pct: 6 }, + { log: 'SSH key loaded: ed25519', pct: 16 }, + { log: 'Plan: rsync files, restart service', pct: 26 }, + { log: 'Tool selected: TerminalTool, SSH utils', pct: 34 }, + { log: 'Writing deployment script...', pct: 44 }, + { log: 'Auditor: reviewing SSH + command safety', pct: 54 }, + { log: 'Auditor: ALLOW — known host, standard deploy', pct: 64 }, + { log: 'Executing: rsync -avz ./dist/ server:/app/', pct: 76 }, + { log: 'Deployed: 124 files, 0 conflicts', pct: 86 }, + { log: 'Verifier: confirming service is running', pct: 94 }, + { log: '✓ Deployment complete. Service restarted.', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Deploy my app to server' }, + { role: 'agent', text: 'Checking SSH connection to production server... Connected via ed25519 key.' }, + { role: 'agent', text: 'I\'ll rsync the dist folder and restart the service with zero downtime.' }, + { role: 'agent', text: 'Auditor approved the deployment script — safe commands only.' }, + { role: 'agent', text: '✓ 124 files deployed. Service restarted successfully.' }, + ] + }, + { + label: 'Transcribe voice memo', + steps: [ + { log: 'Scanning for audio files...', pct: 6 }, + { log: 'Found: meeting_notes.m4a (14min)', pct: 16 }, + { log: 'Plan: transcribe with speaker diarization', pct: 26 }, + { log: 'Tool selected: SpeechAITool', pct: 34 }, + { log: 'Writing Python transcription script...', pct: 44 }, + { log: 'Auditor: reviewing audio processing safety', pct: 54 }, + { log: 'Auditor: ALLOW — local processing', pct: 62 }, + { log: 'Executing: python transcribe.py', pct: 74 }, + { log: 'Transcribed: 14min audio → 2,400 words', pct: 86 }, + { log: 'Verifier: checking transcript accuracy', pct: 94 }, + { log: '✓ Transcript saved: meeting_notes_transcript.txt', pct: 100 }, + ], + messages: [ + { role: 'user', text: 'Transcribe this voice memo' }, + { role: 'agent', text: 'Found meeting_notes.m4a — 14 minutes. I\'ll use Whisper for transcription with speaker labels.' }, + { role: 'agent', text: 'Audio is clear. Processing locally for privacy.' }, + { role: 'agent', text: 'Auditor confirmed local-only processing. No data leaves your machine.' }, + { role: 'agent', text: '✓ 2,400 words transcribed with 3 speaker labels. Saved as text file.' }, + ] + }, + ], + currentTask: null, + running: false, + timeoutId: null, +}; + +function selectChip(index, btn) { + document.querySelectorAll('.tool-chip').forEach(c => c.classList.remove('active')); + btn.classList.add('active'); + demoData.currentTask = index; + document.getElementById('demo-input').value = demoData.tasks[index].label; +} + +function runDemo() { + if (demoData.running) return; + const index = demoData.currentTask; + if (index === null || index === undefined) { + const chips = document.querySelectorAll('.tool-chip'); + if (chips.length > 0) { + chips[0].classList.add('active'); + demoData.currentTask = 0; + document.getElementById('demo-input').value = demoData.tasks[0].label; + } + } + + const taskIndex = demoData.currentTask; + if (taskIndex === null || taskIndex === undefined) return; + + const task = demoData.tasks[taskIndex]; + demoData.running = true; + + document.getElementById('demo-run-btn').disabled = true; + document.getElementById('demo-run-btn').textContent = '■ Running...'; + + const chat = document.getElementById('demo-chat'); + const log = document.getElementById('demo-log'); + const prog = document.getElementById('demo-prog'); + const pct = document.getElementById('demo-pct'); + const status = document.getElementById('demo-status'); + + chat.innerHTML = ''; + log.innerHTML = '
Execution Logs
'; + prog.style.width = '0%'; + pct.textContent = '0%'; + status.textContent = 'Starting...'; + + let msgIdx = 0; + let stepIdx = 0; + + function addLog(text) { + const line = document.createElement('div'); + line.className = 'app-log-line'; + line.textContent = `> ${text}`; + log.appendChild(line); + log.scrollTop = log.scrollHeight; + } + + function addMessage(role, text) { + const bubble = document.createElement('div'); + bubble.className = `chat-bubble ${role}`; + bubble.innerHTML = `
${text}
`; + chat.appendChild(bubble); + chat.scrollTop = chat.scrollHeight; + } + + function showThinking() { + const div = document.createElement('div'); + div.className = 'chat-thinking'; + div.id = 'thinking-el'; + div.innerHTML = '
'; + chat.appendChild(div); + chat.scrollTop = chat.scrollHeight; + } + + function hideThinking() { + const el = document.getElementById('thinking-el'); + if (el) el.remove(); + } + + addMessage('user', task.messages[0].text); + msgIdx = 1; + showThinking(); + + function nextStep() { + if (stepIdx >= task.steps.length) { + status.textContent = 'Complete'; + demoData.running = false; + document.getElementById('demo-run-btn').disabled = false; + document.getElementById('demo-run-btn').innerHTML = ' Run'; + return; +} + + const step = task.steps[stepIdx]; + addLog(step.log); + prog.style.width = step.pct + '%'; + pct.textContent = step.pct + '%'; + status.textContent = step.log.substring(0, 45) + (step.log.length > 45 ? '...' : ''); + + const milestones = [25, 50, 75, 100]; + while (msgIdx < task.messages.length) { + const nextMs = milestones[msgIdx - 1]; + if (nextMs !== undefined && step.pct >= nextMs) { + if (step.pct >= 100) hideThinking(); + addMessage('agent', task.messages[msgIdx].text); + msgIdx++; + } else { + break; + } + } + + stepIdx++; + + const delay = step.pct >= 100 ? 1200 : (step.pct > 80 ? 900 : 600); + demoData.timeoutId = setTimeout(nextStep, delay); + } + + setTimeout(nextStep, 800); +} + +function killDemo() { + if (demoData.timeoutId) { + clearTimeout(demoData.timeoutId); + demoData.timeoutId = null; + } + demoData.running = false; + hideThinking(); + document.getElementById('demo-run-btn').disabled = false; + document.getElementById('demo-run-btn').innerHTML = ' Run'; + document.getElementById('demo-status').textContent = 'Killed'; + const log = document.getElementById('demo-log'); + const line = document.createElement('div'); + line.className = 'app-log-line'; + line.textContent = '! Execution terminated by user'; + line.style.color = 'var(--rose)'; + log.appendChild(line); +} + +// ── Mobile menu ── +document.addEventListener('DOMContentLoaded', () => { + const btn = document.querySelector('.mobile-menu-btn'); + const links = document.querySelector('.nav-links'); + if (btn && links) { + btn.addEventListener('click', () => { + const isOpen = links.style.display === 'flex'; + links.style.display = isOpen ? '' : 'flex'; + if (!isOpen) { + links.style.flexDirection = 'column'; + links.style.position = 'fixed'; + links.style.top = '64px'; + links.style.left = '0'; + links.style.right = '0'; + links.style.background = 'var(--nav-bg)'; + links.style.backdropFilter = 'blur(20px)'; + links.style.padding = '20px 24px'; + links.style.borderBottom = '1px solid var(--border)'; + links.style.gap = '20px'; + } + }); + } +}); + +// ── Input enter key ── +document.addEventListener('DOMContentLoaded', () => { + const input = document.getElementById('demo-input'); + if (input) { + input.addEventListener('keydown', (e) => { + if (e.key === 'Enter') runDemo(); + }); + } +}); diff --git a/website/style.css b/website/style.css new file mode 100644 index 0000000..842546b --- /dev/null +++ b/website/style.css @@ -0,0 +1,677 @@ +/* ── CSS Variables / Theme ── */ +:root { + --primary: #6366F1; + --primary-hover: #4F46E5; + --primary-light: rgba(99, 102, 241, 0.1); + --accent: #10B981; + --accent-hover: #059669; + --accent-light: rgba(16, 185, 129, 0.1); + --cyan: #06B6D4; + --violet: #8B5CF6; + --rose: #F43F5E; + --amber: #F59E0B; + --sky: #0EA5E9; + --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; + --radius: 12px; + --radius-lg: 20px; + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); + --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); + --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05); + --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05); + --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +[data-theme="light"] { + --bg: #FFFFFF; + --bg-secondary: #F8FAFC; + --bg-tertiary: #F1F5F9; + --bg-elevated: #FFFFFF; + --text-primary: #0F172A; + --text-secondary: #475569; + --text-tertiary: #94A3B8; + --border: #E2E8F0; + --border-hover: #CBD5E1; + --nav-bg: rgba(255,255,255,0.8); + --card-bg: #FFFFFF; + --card-border: rgba(0,0,0,0.06); + --code-bg: #F8FAFC; + --overlay: rgba(0,0,0,0.03); + --gradient-hero: linear-gradient(135deg, #EEF2FF 0%, #ECFDF5 50%, #F0F9FF 100%); + --gradient-primary: linear-gradient(135deg, var(--primary), var(--violet)); + --gradient-accent: linear-gradient(135deg, var(--accent), var(--cyan)); +} + +[data-theme="dark"] { + --bg: #0B1121; + --bg-secondary: #0F172A; + --bg-tertiary: #1E293B; + --bg-elevated: #1A2332; + --text-primary: #F1F5F9; + --text-secondary: #94A3B8; + --text-tertiary: #64748B; + --border: #1E293B; + --border-hover: #334155; + --nav-bg: rgba(11,17,33,0.85); + --card-bg: #0F172A; + --card-border: rgba(255,255,255,0.05); + --code-bg: #1E293B; + --overlay: rgba(255,255,255,0.03); + --gradient-hero: linear-gradient(135deg, #0F172A 0%, #0B1121 50%, #0F172A 100%); + --gradient-primary: linear-gradient(135deg, var(--primary), var(--violet)); + --gradient-accent: linear-gradient(135deg, var(--accent), var(--cyan)); +} + +/* ── Reset ── */ +*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} +html{scroll-behavior:smooth;scroll-padding-top:80px;} +body{ + font-family:var(--font-sans); + background:var(--bg); + color:var(--text-primary); + line-height:1.65; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; + transition:background var(--transition),color var(--transition); +} +img{max-width:100%;display:block;} +a{color:inherit;text-decoration:none;} +button{border:none;background:none;cursor:pointer;font:inherit;color:inherit;} +input{font:inherit;color:inherit;} +ul,ol{list-style:none;} + +::-webkit-scrollbar{width:6px;} +::-webkit-scrollbar-track{background:var(--bg);} +::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:3px;} +::-webkit-scrollbar-thumb:hover{background:var(--text-secondary);} + +::selection{background:var(--primary);color:#fff;} + +/* ── Utilities ── */ +.container{max-width:1200px;margin:0 auto;padding:0 24px;} + +.section{padding:100px 0;position:relative;} +.section-header{text-align:center;margin-bottom:64px;} +.section-eyebrow{ + display:inline-flex;align-items:center;gap:8px; + font-family:var(--font-mono);font-size:11px;font-weight:600; + text-transform:uppercase;letter-spacing:0.12em; + color:var(--primary);margin-bottom:16px; +} +.section-eyebrow::before,.section-eyebrow::after{ + content:'';width:24px;height:1px;background:var(--primary);opacity:0.4; +} +.section-title{ + font-size:clamp(1.8rem,3.5vw,2.8rem); + font-weight:700;letter-spacing:-0.03em;line-height:1.15; + margin-bottom:16px; +} +.section-desc{ + font-size:15px;color:var(--text-secondary); + max-width:560px;margin:0 auto;line-height:1.75; +} + +.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);} + +/* ── Reveal animation ── */ +.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease;} +.reveal.visible{opacity:1;transform:translateY(0);} +.reveal-d1{transition-delay:0.1s;} +.reveal-d2{transition-delay:0.2s;} +.reveal-d3{transition-delay:0.3s;} + +/* ── NAV ── */ +nav{ + position:fixed;top:0;left:0;right:0;z-index:1000; + background:var(--nav-bg); + backdrop-filter:blur(20px) saturate(1.5); + border-bottom:1px solid var(--border); + transition:background var(--transition),border-color var(--transition); +} +.nav-inner{ + display:flex;align-items:center;justify-content:space-between; + height:64px;max-width:1200px;margin:0 auto;padding:0 24px; +} +.nav-logo{ + display:flex;align-items:center;gap:10px; + font-weight:700;font-size:15px; + color:var(--text-primary); +} +.nav-logo svg{width:22px;height:22px;} +.nav-logo-accent{color:var(--primary);} +.nav-links{display:flex;align-items:center;gap:32px;} +.nav-links a{ + font-size:13px;font-weight:500;color:var(--text-secondary); + transition:color var(--transition);position:relative; +} +.nav-links a::after{ + content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px; + background:var(--primary);transition:width 0.3s;border-radius:1px; +} +.nav-links a:hover{color:var(--text-primary);} +.nav-links a:hover::after{width:100%;} +.nav-right{display:flex;align-items:center;gap:12px;} + +/* Theme Toggle */ +.theme-toggle{ + width:38px;height:38px;border-radius:10px; + display:flex;align-items:center;justify-content:center; + background:var(--bg-tertiary);border:1px solid var(--border); + transition:all var(--transition);color:var(--text-secondary); +} +.theme-toggle:hover{ + background:var(--bg);border-color:var(--border-hover);color:var(--text-primary); +} +.theme-toggle svg{width:18px;height:18px;} +.theme-toggle .sun-icon{display:none;} +.theme-toggle .moon-icon{display:block;} +[data-theme="dark"] .theme-toggle .sun-icon{display:block;} +[data-theme="dark"] .theme-toggle .moon-icon{display:none;} + +.nav-cta{ + display:inline-flex;align-items:center;gap:8px; + background:var(--primary);color:#fff; + padding:8px 18px;border-radius:8px; + font-size:13px;font-weight:600; + transition:all var(--transition); + box-shadow:0 1px 3px rgba(99,102,241,0.3); +} +.nav-cta:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,0.4);} + +.mobile-menu-btn{display:none;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border);} + +/* ── HERO ── */ +#hero{ + min-height:100vh;display:flex;align-items:center; + padding:100px 0 60px;position:relative;overflow:hidden; +} +#hero::before{ + content:'';position:absolute;inset:0; + background:var(--gradient-hero); + pointer-events:none; +} +.hero-grid{ + display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; + position:relative;z-index:1; +} +.hero-version{ + display:inline-flex;align-items:center;gap:8px; + font-family:var(--font-mono);font-size:12px; + padding:6px 14px;border-radius:20px; + background:var(--primary-light);color:var(--primary); + border:1px solid rgba(99,102,241,0.2); + margin-bottom:24px;font-weight:600; +} +.hero-version-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:hero-pulse 2s ease-in-out infinite;} +@keyframes hero-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}} +.hero-title{ + font-size:clamp(2.2rem,4.8vw,3.8rem); + font-weight:700;letter-spacing:-0.03em;line-height:1.08; + margin-bottom:20px; +} +.hero-title .grad{ + background:var(--gradient-primary); + -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; +} +.hero-sub{ + font-size:clamp(0.95rem,1.4vw,1.1rem); + color:var(--text-secondary);max-width:520px;line-height:1.8; + margin-bottom:32px; +} +.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;} +.btn-primary{ + display:inline-flex;align-items:center;gap:8px; + background:var(--primary);color:#fff; + padding:14px 28px;border-radius:var(--radius); + font-weight:600;font-size:14px; + transition:all var(--transition); + box-shadow:0 4px 14px rgba(99,102,241,0.35); +} +.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,0.45);} +.btn-secondary{ + display:inline-flex;align-items:center;gap:8px; + background:var(--bg-tertiary);color:var(--text-primary); + padding:14px 28px;border-radius:var(--radius); + font-weight:600;font-size:14px; + border:1px solid var(--border); + transition:all var(--transition); +} +.btn-secondary:hover{background:var(--bg-elevated);border-color:var(--border-hover);transform:translateY(-2px);} + +.hero-stats{ + display:grid;grid-template-columns:repeat(4,1fr);gap:0; + border:1px solid var(--border);border-radius:var(--radius-lg); + overflow:hidden;max-width:560px; + background:var(--card-bg); +} +.hero-stat{ + padding:20px 12px;text-align:center; + border-right:1px solid var(--border);transition:background var(--transition); +} +.hero-stat:last-child{border-right:none;} +.hero-stat:hover{background:var(--overlay);} +.hero-stat-num{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:var(--primary);margin-bottom:4px;} +.hero-stat-lbl{font-size:10px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.05em;} + +/* Hero Right */ +.hero-right{padding-left:20px;border-left:1px solid var(--border);} +.hero-right-label{ + font-family:var(--font-mono);font-size:10px;font-weight:600; + color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.14em; + margin-bottom:20px; +} +.hero-role{display:flex;gap:14px;padding:12px 0;position:relative;} +.hero-role:not(:last-child){border-bottom:1px solid var(--border);} +.hero-role-icon{ + width:36px;height:36px;border-radius:10px;flex-shrink:0; + display:flex;align-items:center;justify-content:center; + background:var(--primary-light);color:var(--primary); +} +.hero-role-icon svg{width:18px;height:18px;} + +.hero-role-name{font-size:13px;font-weight:600;color:var(--text-primary);} +.hero-role-desc{font-size:12px;color:var(--text-secondary);} + +.scroll-indicator{ + position:absolute;bottom:28px;left:50%;transform:translateX(-50%); + display:flex;flex-direction:column;align-items:center;gap:8px; + color:var(--text-tertiary);font-family:var(--font-mono);font-size:10px; + letter-spacing:0.1em;text-transform:uppercase; + animation:scroll-bounce 2s ease-in-out infinite; +} +@keyframes scroll-bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}} +.scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,var(--text-tertiary),transparent);} + +/* ── DEMO ── */ +#demo{background:var(--bg-secondary);} +.demo-center{display:flex;flex-direction:column;align-items:center;gap:24px;} +.app-frame{ + width:100%;max-width:880px; + background:var(--card-bg);border:1px solid var(--border); + border-radius:var(--radius-lg);overflow:hidden; + box-shadow:var(--shadow-xl); +} +.app-tb{ + display:flex;align-items:center;gap:14px; + padding:12px 20px; + background:var(--bg-secondary);border-bottom:1px solid var(--border); +} +.tb-dots{display:flex;gap:6px;} +.tb-dot{width:10px;height:10px;border-radius:50%;} +.td-r{background:#FF5F56;} .td-y{background:#FFBD2E;} .td-g{background:#28C940;} +.tb-title{flex:1;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);} +.tb-badge{ + font-family:var(--font-mono);font-size:9px;font-weight:600; + padding:3px 10px;border-radius:4px; + background:var(--accent-light);color:var(--accent); + border:1px solid rgba(16,185,129,0.25); +} +.app-body{display:grid;grid-template-columns:200px 1fr;min-height:460px;} +.app-sidebar{ + background:var(--bg-secondary);border-right:1px solid var(--border); + padding:16px 0;display:flex;flex-direction:column; +} +.app-sidebar-logo{ + padding:0 16px 14px;font-family:var(--font-mono);font-size:11px;font-weight:700; + color:var(--primary);display:flex;align-items:center;gap:8px; +} +.app-sidebar-sep{height:1px;background:var(--border);margin-bottom:8px;} +.app-sidebar-label{ + padding:8px 16px 4px;font-family:var(--font-mono); + font-size:9px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.1em; +} +.app-nav-item{ + display:flex;align-items:center;gap:10px; + padding:9px 16px;font-size:12px;color:var(--text-secondary); + border-left:2px solid transparent;cursor:pointer;transition:all var(--transition); +} +.app-nav-item.active{color:var(--primary);border-left-color:var(--primary);background:var(--primary-light);} +.app-nav-item:hover:not(.active){color:var(--text-primary);background:var(--overlay);} +.app-sidebar-spacer{flex:1;} +.app-mcp{ + margin:0 12px 12px;padding:8px 12px; + background:var(--accent-light);border:1px solid rgba(16,185,129,0.2); + border-radius:8px;font-family:var(--font-mono);font-size:9px;font-weight:600; + color:var(--accent);display:flex;align-items:center;gap:8px; +} +.app-mcp-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;} + +.app-main{display:flex;flex-direction:column;} +.app-prog-wrap{padding:6px 18px;background:var(--bg-secondary);border-bottom:1px solid var(--border);} +.app-prog-row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--text-tertiary);margin-bottom:5px;} +.app-prog-track{height:3px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;} +.app-prog-fill{ + height:100%;border-radius:2px; + background:var(--gradient-primary); + width:0%;transition:width 0.6s cubic-bezier(0.4,0,0.2,1); + position:relative;overflow:hidden; +} +.app-prog-fill::after{ + content:'';position:absolute;top:0;left:-100%;width:100%;height:100%; + background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); + animation:shimmer 2s infinite; +} +@keyframes shimmer{to{left:200%;}} + +.app-chat{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:10px;max-height:300px;} +.chat-bubble{display:flex;max-width:85%;animation:bubble-in 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;} +@keyframes bubble-in{from{opacity:0;transform:translateY(8px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}} +.chat-bubble.user{margin-left:auto;flex-direction:row-reverse;} +.chat-bubble-text{padding:10px 14px;border-radius:12px;font-size:12.5px;line-height:1.6;} +.chat-bubble.agent .chat-bubble-text{ + background:var(--bg-tertiary);border:1px solid var(--border); + border-top-left-radius:3px;color:var(--text-primary); +} +.chat-bubble.user .chat-bubble-text{ + background:var(--primary-light);border:1px solid rgba(99,102,241,0.2); + border-top-right-radius:3px;color:var(--text-primary); +} +.chat-thinking{display:flex;gap:5px;padding:10px 14px;align-items:center;} +.chat-thinking-dot{width:5px;height:5px;border-radius:50%;background:var(--primary);animation:think 1.2s ease-in-out infinite;} +.chat-thinking-dot:nth-child(2){animation-delay:0.2s;} +.chat-thinking-dot:nth-child(3){animation-delay:0.4s;} +@keyframes think{0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);}} + +.app-log{ + border-top:1px solid var(--border);padding:10px 18px; + overflow-y:auto;max-height:100px; + background:var(--bg-secondary); +} +.app-log-header{ + font-family:var(--font-mono);font-size:9px;font-weight:600; + color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em; + margin-bottom:6px;display:flex;align-items:center;gap:6px; +} +.app-log-line{ + font-family:var(--font-mono);font-size:10px;padding:2px 0;line-height:1.5; + opacity:0;animation:log-appear 0.3s ease forwards; +} +@keyframes log-appear{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:translateX(0);}} +.app-input-bar{ + padding:12px 18px;border-top:1px solid var(--border); + display:flex;gap:10px;align-items:center; + background:var(--bg-secondary); +} +.app-input-field{ + flex:1;background:var(--bg-tertiary);border:1px solid var(--border); + border-radius:8px;padding:10px 14px;font-size:13px; + color:var(--text-primary);transition:all var(--transition); + font-family:var(--font-sans); +} +.app-input-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);} +.app-input-field::placeholder{color:var(--text-tertiary);} +.app-run{ + display:flex;align-items:center;gap:6px; + background:var(--primary);color:#fff;border:none; + border-radius:8px;padding:10px 18px;font-size:12px;font-weight:600; + transition:all var(--transition);font-family:var(--font-sans); +} +.app-run:hover{background:var(--primary-hover);} +.app-kill{ + display:flex;align-items:center;gap:6px; + background:rgba(244,63,94,0.1);color:var(--rose); + border:1px solid rgba(244,63,94,0.3);border-radius:8px; + padding:10px 14px;font-size:11px;font-family:var(--font-mono); + transition:all var(--transition); +} +.app-kill:hover{background:rgba(244,63,94,0.15);} + +.chip-bank{ + display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:880px; +} +.tool-chip{ + display:inline-flex;align-items:center;gap:6px; + padding:8px 14px;border-radius:20px;white-space:nowrap; + font-size:11.5px;font-weight:500; + border:1px solid var(--border); + background:var(--card-bg);color:var(--text-secondary); + transition:all var(--transition);cursor:pointer; +} +.tool-chip:hover{color:var(--primary);border-color:rgba(99,102,241,0.3);background:var(--primary-light);} +.tool-chip.active{color:var(--primary);border-color:var(--primary);background:var(--primary-light);} +.tool-chip svg{width:14px;height:14px;flex-shrink:0;} + +/* ── FEATURES ── */ +#features{background:var(--bg);} +.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;} +.feat-card{ + background:var(--card-bg);border:1px solid var(--border); + border-radius:var(--radius-lg);padding:32px 28px; + position:relative;overflow:hidden; + transition:all 0.3s cubic-bezier(0.23,1,0.32,1); +} +.feat-card::before{ + content:'';position:absolute;top:0;left:0;right:0;height:2px; + background:var(--card-accent,var(--primary)); + transform:scaleX(0);transition:transform 0.4s; + transform-origin:left; +} +.feat-card:hover{transform:translateY(-6px);border-color:var(--border-hover);box-shadow:var(--shadow-lg);} +.feat-card:hover::before{transform:scaleX(1);} +.feat-icon{ + width:44px;height:44px;border-radius:12px; + display:flex;align-items:center;justify-content:center; + background:var(--primary-light);color:var(--primary); + margin-bottom:18px;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); +} +.feat-card:hover .feat-icon{transform:scale(1.1) rotate(-3deg);} +.feat-icon svg{width:22px;height:22px;} +.feat-card h3{font-size:17px;font-weight:600;margin-bottom:10px;letter-spacing:-0.02em;} +.feat-card p{font-size:13px;color:var(--text-secondary);line-height:1.75;} +.feat-tag{ + display:inline-block;margin-top:14px; + font-family:var(--font-mono);font-size:9.5px;font-weight:600; + letter-spacing:0.05em;text-transform:uppercase; + padding:4px 10px;border-radius:5px; + background:var(--primary-light);color:var(--primary); + border:1px solid rgba(99,102,241,0.2); +} + +/* ── TOOL REGISTRY ── */ +#tools{background:var(--bg-secondary);} +.tools-marquee-wrap{overflow:hidden;margin-bottom:12px;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);} +.tools-marquee{display:flex;gap:12px;animation:marquee 35s linear infinite;width:max-content;} +.tools-marquee2{animation-direction:reverse;animation-duration:28s;} +@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} +.tools-marquee .tool-chip{cursor:default;} +.tools-marquee .tool-chip:hover{color:var(--text-secondary);border-color:var(--border);background:var(--card-bg);} + +/* ── ARCHITECTURE ── */ +#architecture{background:var(--bg);} +.relay{ + display:grid;grid-template-columns:1fr auto 1fr auto 1fr; + align-items:center;max-width:900px;margin:0 auto 50px;gap:8px; +} +.relay-node{ + background:var(--card-bg);border:1px solid var(--border); + border-radius:var(--radius-lg);padding:24px 20px;text-align:center; + transition:all var(--transition); +} +.relay-node:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md);} +.relay-node-icon{width:40px;height:40px;margin:0 auto 10px;border-radius:10px;display:flex;align-items:center;justify-content:center;} +.relay-node-icon.desktop{background:var(--primary-light);color:var(--primary);} +.relay-node-icon.mcp{background:var(--accent-light);color:var(--accent);} +.relay-node-icon.llm{background:rgba(139,92,246,0.1);color:var(--violet);} +.relay-node-icon svg{width:20px;height:20px;} +.relay-node-title{font-size:14px;font-weight:700;margin-bottom:4px;} +.relay-node-sub{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);} +.relay-link{position:relative;height:2px;width:100%;min-width:32px;background:var(--border);overflow:visible;} +.relay-link::before{ + content:'';position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px; + border-radius:50%;background:var(--primary); + animation:travel 2s linear infinite; +} +.relay-link.rev::before{animation-direction:reverse;background:var(--accent);} +@keyframes travel{0%{left:0;}100%{left:calc(100% - 8px);}} +.relay-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--text-tertiary);margin-top:8px;} + +.arch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;} +.arch-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 22px;transition:all var(--transition);} +.arch-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-md);} +.arch-card-step{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--primary);margin-bottom:8px;} +.arch-card h4{font-size:14.5px;font-weight:600;margin-bottom:8px;} +.arch-card p{font-size:12.5px;color:var(--text-secondary);line-height:1.7;} + +/* ── PIPELINE ── */ +#pipeline{background:var(--bg-secondary);} +.pipeline-grid{display:flex;align-items:stretch;gap:0;max-width:1000px;margin:0 auto;flex-wrap:wrap;justify-content:center;} +.pipe-step{ + flex:1;min-width:130px;max-width:160px; + background:var(--card-bg);border:1px solid var(--border); + border-radius:var(--radius);padding:24px 14px;text-align:center; + position:relative;transition:all 0.3s; + margin:0 5px;} +.pipe-step:hover{background:var(--bg-tertiary);border-color:var(--border-hover);transform:translateY(-6px);box-shadow:var(--shadow-md);} +.pipe-num{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-tertiary);margin-bottom:10px;} +.pipe-icon svg{width:28px;height:28px;display:block;margin:0 auto 8px;} +.pipe-icon{color:var(--primary);} +.pipe-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:5px;} +.pipe-desc{font-size:10.5px;color:var(--text-secondary);line-height:1.6;} +.pipe-arrow{ + position:absolute;right:-10px;top:50%;transform:translateY(-50%); + color:var(--border);z-index:1;font-size:14px; +} +.pipe-step:last-child .pipe-arrow{display:none;} + +/* ── FOUNDER ── */ +#founder{background:var(--bg);} +.founder-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start;} +.founder-avatar-wrap{position:relative;margin-bottom:24px;display:inline-block;} +.founder-avatar{ + width:160px;height:160px;border-radius:20px; + object-fit:cover;border:2px solid rgba(99,102,241,0.3); + box-shadow:0 0 0 5px rgba(99,102,241,0.06),0 0 40px rgba(99,102,241,0.15); + display:block; +} +.founder-name{font-size:24px;font-weight:700;letter-spacing:-0.03em;margin-bottom:4px;} +.founder-role{font-family:var(--font-mono);font-size:10.5px;color:var(--primary);letter-spacing:0.08em;margin-bottom:14px;} +.founder-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;} +.f-badge{ + font-size:10.5px;padding:5px 12px;border-radius:16px; + border:1px solid var(--border);color:var(--text-secondary); + background:var(--bg-secondary);transition:all var(--transition); +} +.f-badge:hover{border-color:rgba(99,102,241,0.3);color:var(--primary);} +.founder-links{display:flex;gap:10px;flex-wrap:wrap;} +.f-link{ + display:inline-flex;align-items:center;gap:6px; + padding:8px 14px;border-radius:8px;font-size:11.5px; + border:1px solid var(--border);color:var(--text-secondary); + transition:all var(--transition);background:var(--card-bg); +} +.f-link:hover{border-color:rgba(99,102,241,0.4);color:var(--primary);background:var(--primary-light);} + +.founder-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;} +.f-stat{ + background:var(--card-bg);border:1px solid var(--border); + border-radius:var(--radius);padding:16px;text-align:center; + transition:all var(--transition); +} +.f-stat:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:var(--shadow-sm);} +.f-stat-num{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--primary);margin-bottom:3px;} +.f-stat-lbl{font-size:9.5px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.04em;} + +.timeline{display:flex;flex-direction:column;} +.tl-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);transition:all var(--transition);} +.tl-item:last-child{border-bottom:none;} +.tl-item:hover{padding-left:6px;} +.tl-icon{ + width:32px;height:32px;border-radius:10px;flex-shrink:0; + display:flex;align-items:center;justify-content:center; + background:var(--primary-light);color:var(--primary); + margin-top:2px;transition:all var(--transition); +} +.tl-icon svg{width:16px;height:16px;} +.tl-item:hover .tl-icon{background:var(--primary);color:#fff;} +.tl-age{font-family:var(--font-mono);font-size:9.5px;font-weight:600;color:var(--primary);margin-bottom:3px;} +.tl-title{font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:3px;} +.tl-desc{font-size:11.5px;color:var(--text-secondary);line-height:1.7;} + +/* ── DOWNLOAD ── */ +#download{background:var(--bg-secondary);text-align:center;} +.cta-box{ + max-width:680px;margin:0 auto; + background:var(--card-bg);border:1px solid var(--border); + border-radius:28px;padding:64px 44px; + position:relative;overflow:hidden; +} +.cta-box::before{ + content:'';position:absolute;top:0;left:0;right:0;height:2px; + background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent); +} +.cta-box::after{ + content:'';position:absolute;width:400px;height:400px;border-radius:50%; + top:-120px;left:50%;transform:translateX(-50%); + background:radial-gradient(circle,rgba(99,102,241,0.05),transparent 70%); + pointer-events:none; +} +.cta-box h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-0.03em;margin-bottom:12px;position:relative;} +.cta-box p{color:var(--text-secondary);font-size:14.5px;margin-bottom:32px;position:relative;} +.dl-steps{display:flex;justify-content:center;gap:0;margin-bottom:32px;flex-wrap:wrap;position:relative;} +.dl-step{padding:0 24px;text-align:center;position:relative;} +.dl-step:not(:last-child)::after{content:'→';position:absolute;right:-8px;top:14px;color:var(--text-tertiary);font-size:13px;} +.dl-step-n{ + width:30px;height:30px;border-radius:50%; + background:var(--primary-light);border:1px solid rgba(99,102,241,0.3); + display:flex;align-items:center;justify-content:center; + margin:0 auto 6px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--primary); +} +.dl-step p{font-size:11.5px;color:var(--text-secondary);} +.btn-download{ + display:inline-flex;align-items:center;gap:12px; + background:var(--gradient-primary);color:#fff; + font-weight:600;font-size:15.5px; + padding:18px 40px;border-radius:14px; + transition:all var(--transition); + box-shadow:0 4px 24px rgba(99,102,241,0.35); + position:relative; +} +.btn-download:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 32px rgba(99,102,241,0.45);} +.dl-note{margin-top:16px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-tertiary);position:relative;} + +/* ── FOOTER ── */ +footer{ + padding:40px 24px;border-top:1px solid var(--border); + background:var(--bg-secondary); +} +.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;} +.footer-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;} +.footer-brand svg{width:18px;height:18px;} +.footer-brand-accent{color:var(--primary);} +.footer-mid{font-size:12px;color:var(--text-tertiary);} +.footer-links{display:flex;gap:20px;} +.footer-links a{font-size:12px;color:var(--text-tertiary);transition:color var(--transition);display:flex;align-items:center;gap:6px;} +.footer-links a:hover{color:var(--text-primary);} + +/* ── RESPONSIVE ── */ +@media(max-width:1024px){ + .hero-grid{grid-template-columns:1fr;gap:40px;} + .hero-right{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:24px;} + .app-body{grid-template-columns:1fr;} + .app-sidebar{display:none;} + .founder-grid{grid-template-columns:1fr;gap:32px;} + .relay{grid-template-columns:1fr;gap:12px;} + .relay-link{width:2px;height:24px;margin:0 auto;} + .relay-link::before{left:50%;top:0;margin-left:-4px;animation:travelv 2s linear infinite;} + @keyframes travelv{0%{top:0;}100%{top:calc(100% - 8px);}} +} +@media(max-width:768px){ + .nav-links{display:none;} + .mobile-menu-btn{display:flex;} + .section{padding:72px 0;} + .hero-stats{grid-template-columns:repeat(2,1fr);} + .pipeline-grid{flex-direction:column;align-items:center;gap:10px;} + .pipe-step{max-width:300px;width:100%;margin:0;} + .pipe-arrow{display:none;} + .founder-stats{grid-template-columns:repeat(2,1fr);} + .cta-box{padding:40px 20px;border-radius:20px;} + .dl-steps{gap:12px;} + .dl-step:not(:last-child)::after{display:none;} + .features-grid{grid-template-columns:1fr;} +} +@media(max-width:480px){ + .container{padding:0 16px;} + .hero-stats{grid-template-columns:1fr;} + .hero-stat{border-right:none;border-bottom:1px solid var(--border);} + .hero-stat:last-child{border-bottom:none;} +}