swadhin / git-discord-bot public

husteno-o

[email protected]

2026-09-09 12:10:29 +0600 committed NaN years ago

9380184

commit 9380184

4 files changed

+1058 -425

Files

apps

web

src

app.ts +95 -4 index.html +186 -41 styles.css +705 -215 README.md +72 -165

Showing 4 changed files+1058-423

README.md apps/web/src/app.ts apps/web/src/index.html apps/web/src/styles.css

▼README.md

+72-163

@@ -1,240 +1,147 @@
1		-# DevPulse (RavenDev)
	1	+# DevPulse
2	2
3		-DevPulse is a production-grade GitHub power-user platform built specifically for Discord. It eliminates the need for developers to switch back and forth between Discord and browser tabs by providing repository intelligence, pull request reviews and merges, CI/CD monitoring, code investigation, and team turnaround telemetry directly within Discord slash commands and interactive components.
	3	+A Discord bot that brings GitHub workflows into your server. No browser tab switching, no context loss — just slash commands.
4	4
5		-Repository: [email protected]:husteno-o/git-discord-bot.git
6		-Website: Cloudflare Pages (apps/web)
	5	+Repo: [email protected]:husteno-o/git-discord-bot.git
	6	+Landing page: apps/web (deploys to Cloudflare Pages)
7	7
8	8	---
9	9
10		-## Architecture and Core Philosophy
	10	+## What It Actually Does
11	11
12		-DevPulse is built with the principle of zero configuration for public data and zero friction for everyday tasks:
	12	+You run `/repo`, `/pr`, `/code`, or any of the 21 slash commands, and DevPulse talks to GitHub and posts results right in your Discord channel. Public repos work with zero setup. Private repos and write actions (approve, merge, rerun CI) need you to connect your GitHub token via `/connect`.
13	13
14		-1. Zero Connection Required for Public Repositories: Any developer on the server can run repository analysis, code searches, commit inspections, releases, and trending lookups without connecting an account.
15		-2. Encrypted Token Storage: Personal Access Tokens (PATs) used for write actions (approving pull requests, merging, triggering GitHub Actions workflows) are encrypted using AES-256-GCM with per-record initialization vectors and authentication tags. Plaintext credentials are never logged or stored.
16		-3. Native Discord Interface: Interactive buttons, select menus, and visual embed trees allow developers to navigate repository views, trigger merges, and review pull requests without typing lengthy commands.
17		-4. Single Synchronized Runtime: Operates as a pure Discord bot with zero required inbound open ports. An optional Fastify health check server can be toggled via configuration when deploying to platforms that require port binding.
	14	+Tokens are encrypted with AES-256-GCM before they hit the database. Plaintext never gets logged. That's the deal.
	15	+
	16	+The bot runs as a pure Discord client — no inbound ports required. There's an optional Fastify health check if your hosting platform insists on a port binding.
18	17
19	18	---
20	19
21		-## Technology Stack
	20	+## Stack
22	21
23		-- Runtime: Bun 1.4+
24		-- Language: TypeScript 5.7+ (Strict Mode, ESNext)
25		-- Discord API: discord.js v14 with Gateway v10
26		-- Database: Turso (libSQL) with Drizzle ORM
27		-- Caching and Distributed Locks: Upstash Redis with automatic in-memory fallback
28		-- Optional HTTP Engine: Fastify 5
29		-- Code Quality and Formatting: Biome
30		-- Test Suite: Vitest
	22	+- Bun 1.4+
	23	+- TypeScript 5.7 (strict)
	24	+- discord.js v14
	25	+- Turso (libSQL) with Drizzle ORM
	26	+- Upstash Redis (falls back to in-memory)
	27	+- Fastify 5 (optional)
	28	+- Biome, Vitest
31	29
32	30	---
33	31
34		-## Core Feature Areas
35		-
36		-### 1. Repository Intelligence (/repo)
37		-Inspect any public or private repository:
38		-- Overview: Stars, forks, open issues, pull requests, watchers, license, and default branch.
39		-- Health Score: Automated calculation (0 to 100) assessing README existence, license, contributing guide, issue templates, description, topics, and maintenance activity.
40		-- Dependencies: Dependency manifests, package managers, and direct dependency breakdowns.
41		-- Growth: 30-day star velocity and repository expansion rate.
42		-- Interactive Navigation: Direct button controls for switching between Overview, Commits, PRs, Issues, and Releases.
43		-
44		-### 2. Pull Request Power Tools (/pr)
45		-Perform real pull request workflows directly inside Discord:
46		-- View Details: Full metadata, branch targets, author, line additions and deletions (+482 -193), review states, and cycle times.
47		-- Status Checks: Comprehensive CI check runs and commit status results.
48		-- Review Actions: Direct Discord interactive buttons to Approve, Request Changes, or Merge into the target branch.
49		-- Filters: Stale pull requests and pull requests awaiting review.
50		-
51		-### 3. Universal Search (/search)
52		-Search across GitHub using official search qualifiers:
53		-- Code Search: Search source code across files, organizations, and languages.
54		-- Issues and Pull Requests: Filter by status, label, author, assignee, and mentions.
55		-- Repositories: Search by topics, star counts, forks, and updated dates.
56		-- Commits: Find commits by message, hash, author, or committer date.
57		-
58		-### 4. Code Investigation (/code)
59		-Inspect remote codebases without cloning:
60		-- View File: Fetch and render syntax-highlighted code chunks with line numbers.
61		-- Git Blame: Line-by-line attribution showing author, commit hash, commit message, and relative timestamp.
62		-- Commit to PR Link: Resolve any commit SHA back to the associated pull request where it was merged.
63		-
64		-### 5. Lifecycle Timeline (/investigate)
65		-Trace an issue or feature request through its entire development lifecycle:
66		-- Chronological Timeline: Issue Creation -> Commit -> Pull Request -> Code Review -> Merge -> Release Tag.
67		-- Identifies who approved the change, what release it shipped in, and resolution time.
68		-
69		-### 6. Developer Activity and Histograms (/activity)
70		-Track engineering rhythm and repository momentum:
71		-- Activity Visualizer: ASCII daily commit histograms displaying work distribution across Monday through Sunday.
72		-- Churn Analysis: Additions versus deletions ratio to measure refactoring versus new feature volume.
73		-- Personal Telemetry: The /activity me command displays personal contribution velocity.
74		-
75		-### 7. GitHub Trending Radar (/trending)
76		-Discover rising projects and libraries across modern ecosystems:
77		-- Language Filters: TypeScript, Rust, AI and Machine Learning, Bun, Databases, Go, and Python.
78		-- Velocity Metrics: Stars gained in daily, weekly, or monthly periods.
79		-
80		-### 8. GitHub Watchtower (/watch)
81		-Automated event subscriptions delivered to dedicated Discord channels:
82		-- Channel Subscriptions: Listen for releases, new pull requests, opened issues, or security advisories.
83		-- Configurable Routing: Route different event types to specific channels (for example, alerts to #dev-alerts and releases to #announcements).
84		-
85		-### 9. CI/CD Workflow Intelligence (/actions)
86		-Monitor and manage GitHub Actions pipelines:
87		-- Visual Workflow Tree: Render branch and workflow statuses in structured ASCII trees.
88		-- Run History: View recent runs, conclusion status (success, failure, cancelled, in_progress), duration, and triggering actors.
89		-- Control Actions: Rerun failed jobs or cancel running workflows directly from Discord.
90		-
91		-### 10. Security Radar (/security)
92		-Security vulnerability tracking and alert management:
93		-- Dependabot Alerts: Open security vulnerability reports with affected packages, patched versions, and severity tiers.
94		-- Advisory Lookup: Search GitHub Security Advisories and CVE identifiers.
95		-- Real-Time Secret Scanner: Background message monitor that immediately detects leaked API keys, tokens, or database credentials, alerts the author privately with rotation instructions, and offers one-click deletion.
96		-
97		-### 11. Release Management (/release)
98		-Track and draft releases:
99		-- Latest Release: View published tags, assets, download counts, and release notes.
100		-- Tag Comparison: Compare differences and commit counts between tags (for example, v1.2.0...v1.3.0).
101		-- Release Notes Generator: Automatically compiles changelogs from merged pull requests between git tags.
102		-
103		-### 12. Team Intelligence (/team)
104		-Engineering team metrics designed for healthy collaboration:
105		-- Throughput and Velocity: Merged PR volume and average turnaround time.
106		-- Workload Balance: Review distribution across team members to prevent individual burnout.
107		-- Zero Toxicity: Focuses on process improvement, cycle times, and review turnaround rather than arbitrary commit count rankings.
	32	+## Commands
108	33
	34	+Repository Intelligence `/repo` — stars, forks, issues, health score (0–100), dependencies, 30-day growth. Buttons to navigate overview, commits, PRs, issues, releases.
	35	+
	36	+Pull Request Tools `/pr` — metadata, CI status, line diffs. Approve, request changes, or merge from Discord. Filter stale PRs or PRs awaiting review.
	37	+
	38	+Search `/search` — code, issues, PRs, repos, commits using GitHub's search qualifiers.
	39	+
	40	+Code Investigation `/code` — view files with syntax highlighting and line numbers, git blame, resolve a commit SHA back to its PR.
	41	+
	42	+Lifecycle Timeline `/investigate` — trace an issue from creation through commit, PR, review, merge, to release tag.
	43	+
	44	+Activity `/activity` — ASCII commit histograms by day of week, churn analysis (additions vs deletions), personal contribution velocity.
	45	+
	46	+Trending `/trending` — rising projects with language filters (TypeScript, Rust, Go, Python, etc.) and star velocity metrics.
109	47
110		-## Utilities and Convenience Commands
	48	+Watchtower `/watch` — subscribe a channel to releases, new PRs, issues, or security advisories.
111	49
112		-- /home: Morning developer command center showing your active PRs, pending reviews, repository watch alerts, and trending highlights.
113		-- /connect: Securely store your GitHub Personal Access Token encrypted with AES-256-GCM.
114		-- /why: Trace a specific file and line change back through Commit -> PR -> Originating Issue.
115		-- /ask: Deterministic query helper for questions like pull requests waiting for review over 24 hours or frequently modified files.
116		-- /tools: GitHub developer essentials including .gitignore generator, SPDX license viewer, and GitHub platform status.
117		-- /settings: Server defaults, preferred repositories, alert routing, and quiet hours.
118		-- /help: Interactive directory of all available commands grouped by category.
	50	+CI/CD `/actions` — workflow run history, ASCII status trees, rerun failed jobs, cancel running workflows.
	51	+
	52	+Security `/security` — Dependabot alerts, CVE lookups, real-time secret scanning that catches leaked keys in messages and tells the author to rotate them.
	53	+
	54	+Releases `/release` — latest release info, tag comparison, auto-generated changelogs from merged PRs.
	55	+
	56	+Team `/team` — throughput, average PR turnaround, review distribution. No commit-count leaderboards. Process metrics only.
	57	+
	58	+Utilities:
	59	+- `/home` — your morning dashboard: active PRs, pending reviews, watch alerts, trending.
	60	+- `/connect` — store your GitHub PAT, encrypted.
	61	+- `/why` — trace a file+line back through commit, PR, to originating issue.
	62	+- `/ask` — answer questions like "what PRs are waiting for review?" or "which files change most?"
	63	+- `/tools` — .gitignore generator, SPDX license viewer, GitHub status.
	64	+- `/settings` — server defaults, preferred repos, alert routing, quiet hours.
	65	+- `/help` — interactive command directory.
119	66
120	67	---
121	68
122		-## Quick Start Guide
	69	+## Quick Start
123	70
124		-### Prerequisites
125		-- Bun runtime (version 1.4 or higher)
126		-- Discord Application Bot Token with Send Messages, Embed Links, and Use Slash Commands permissions
127		-- (Optional) GitHub Personal Access Token for write operations and private repository access
128		-- (Optional) Turso Database URL and Upstash Redis credentials
	71	+Requirements: Bun 1.4+, a Discord bot application, optionally Turso and Upstash Redis.
129	72
130		-### 1. Clone Repository
131	73	```bash
132	74	git clone [email protected]:husteno-o/git-discord-bot.git
133	75	cd git-discord-bot
134	76	bun install
135		-```
136		-
137		-### 2. Configure Environment
138		-Create your local environment file:
139		-```bash
140	77	cp .env.example .env
141	78	```
142	79
143		-Configure your credentials in `.env`:
	80	+Fill in `.env`:
	81	+
144	82	```env
145	83	NODE_ENV=development
146	84	LOG_LEVEL=info
147	85
148		-# Discord Configuration
149		-DISCORD_TOKEN=your_discord_bot_token_here
150		-DISCORD_CLIENT_ID=your_discord_application_id_here
151		-DISCORD_PUBLIC_KEY=your_discord_public_key_here
	86	+DISCORD_TOKEN=your_bot_token
	87	+DISCORD_CLIENT_ID=your_app_id
	88	+DISCORD_PUBLIC_KEY=your_public_key
152	89
153		-# Database Configuration (Defaults to local file:devpulse.db)
154	90	TURSO_DATABASE_URL=file:devpulse.db
155	91	TURSO_AUTH_TOKEN=
156	92
157		-# Redis Cache (Optional, defaults to in-memory cache)
158	93	UPSTASH_REDIS_REST_URL=
159	94	UPSTASH_REDIS_REST_TOKEN=
160	95
161		-# GitHub Configuration (Optional for public repositories)
162	96	GITHUB_TOKEN=
163	97	```
164	98
165		-### 3. Verify Code Quality and Run Tests
166	99	```bash
167		-# Typecheck all packages
168	100	bun run typecheck
169		-
170		-# Run Biome linter
171	101	bun run lint
172		-
173		-# Run Vitest test suite
174	102	bun run test
175		-
176		-# Compile all workspaces
177	103	bun run build
178		-```
179		-
180		-### 4. Start the Application
181		-```bash
182		-# Start the Discord Bot
183	104	bun run start
184	105	```
185	106
186	107	---
187	108
188		-## Deploying the Landing Page to Cloudflare Pages
189		-
190		-The marketing and documentation landing page is located in the apps/web directory. It is built as an optimized static site ready for deployment on Cloudflare Pages.
	109	+## Landing Page (Cloudflare Pages)
191	110
192		-### Method A: Cloudflare Dashboard Deployment
193		-1. Log in to the Cloudflare dashboard and navigate to Workers & Pages -> Create Application -> Pages -> Connect to Git.
194		-2. Select your repository: husteno-o/git-discord-bot.
195		-3. Set the following build settings:
196		- - Framework preset: None
197		- - Build command: bun run build:web
198		- - Build output directory: apps/web/dist
199		-4. Deploy the site.
	111	+Build the static site:
200	112
201		-### Method B: Wrangler CLI Deployment
202	113	```bash
203		-# Build the static site bundle
204	114	bun run build:web
	115	+```
	116	+
	117	+Then deploy via Wrangler:
205	118
206		-# Deploy directly via Wrangler
	119	+```bash
207	120	bun x wrangler pages deploy apps/web/dist --project-name=devpulse
208	121	```
209	122
	123	+Or connect the repo in the Cloudflare dashboard with build command `bun run build:web` and output directory `apps/web/dist`.
210	124
211		-## Docker Deployment
	125	+---
212	126
213		-To run DevPulse in a containerized environment:
	127	+## Docker
214	128
215	129	```bash
216		-# Build Docker image
217	130	docker build -t devpulse:latest .
218		-
219		-# Run with environment variables
220		-docker run -d \
221		- --name devpulse \
222		- --env-file .env \
223		- devpulse:latest
	131	+docker run -d --name devpulse --env-file .env devpulse:latest
224	132	```
225	133
226		-Alternatively, use Docker Compose:
	134	+Or:
	135	+
227	136	```bash
228	137	docker compose up -d
229	138	```
230	139
231	140	---
232	141
233		-## Security and Compliance
	142	+## Security
234	143
235		-- AES-256-GCM Encryption: Used for all sensitive user credentials stored in the database.
236		-- Zero Secret Logging: Structured logger automatically masks and redacts access tokens, webhooks, and private keys.
237		-- SSRF Guard: Outbound network checks strictly reject loopback, RFC 1918 private IPv4 addresses, and link-local ranges.
238		-- Rate Limiting: Built-in sliding window rate limiter protects against abusive command execution.
	144	+- AES-256-GCM for stored tokens, with per-record IVs and auth tags.
	145	+- Structured logger redacts secrets automatically.
	146	+- SSRF guard blocks loopback, RFC 1918, and link-local addresses on outbound requests.
	147	+- Sliding window rate limiter on commands.
239	148

▼apps/web/src/app.ts

+95-4

@@ -173,7 +173,7 @@ const tabTemplates: Record<string, () => string> = {
173	173	\|-- Turbopack Integration E2E [Passing] (4m 15s)
174	174	\|-- Edge Runtime Compatibility [Passing] (52s)
175	175	\|-- Security Scanning & Audit [Passing] (38s)
176		-\-- Production Bundle Analyzer [Passing] (1m 04s)</div>
	176	+\\-- Production Bundle Analyzer [Passing] (1m 04s)</div>
177	177	<div class="discord-action-row">
178	178	<button class="discord-btn" id="sim-btn-rerun">${icons.sync(14, "#ffffff")} Rerun All Jobs</button>
179	179	<button class="discord-btn discord-btn-danger" id="sim-btn-cancel" disabled>Cancel</button>
@@ -299,7 +299,18 @@ export function renderSimulator() {
299	299
300	300	const renderer = tabTemplates[state.activeTab];
301	301	if (renderer) {
302		- container.innerHTML = renderer();
	302	+ container.style.opacity = "0";
	303	+ container.style.transform = "translateX(12px)";
	304	+ container.style.transition = "opacity 0.15s ease, transform 0.15s ease";
	305	+
	306	+ requestAnimationFrame(() => {
	307	+ container.innerHTML = renderer();
	308	+ requestAnimationFrame(() => {
	309	+ container.style.opacity = "1";
	310	+ container.style.transform = "translateX(0)";
	311	+ });
	312	+ });
	313	+
303	314	attachSimulatorEvents();
304	315	}
305	316	}
@@ -331,7 +342,7 @@ function attachSimulatorEvents() {
331	342	setTimeout(() => {
332	343	state.prStatus = "merged";
333	344	renderSimulator();
334		- }, 500);
	345	+ }, 600);
335	346	});
336	347	}
337	348
@@ -340,7 +351,7 @@ function attachSimulatorEvents() {
340	351	rerunBtn.innerHTML = `${icons.sync(14, "#ffffff")} Dispatching GitHub Actions...`;
341	352	setTimeout(() => {
342	353	rerunBtn.innerHTML = `${icons.check(14, "#3fb950")} Workflows Triggered`;
343		- }, 700);
	354	+ }, 800);
344	355	});
345	356	}
346	357
@@ -362,6 +373,79 @@ function attachSimulatorEvents() {
362	373	}
363	374	}
364	375
	376	+// Scroll reveal observer
	377	+function initScrollReveal() {
	378	+ const reveals = document.querySelectorAll(".reveal");
	379	+ const observer = new IntersectionObserver(
	380	+ (entries) => {
	381	+ for (const entry of entries) {
	382	+ if (entry.isIntersecting) {
	383	+ entry.target.classList.add("visible");
	384	+ observer.unobserve(entry.target);
	385	+ }
	386	+ }
	387	+ },
	388	+ { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
	389	+ );
	390	+
	391	+ for (const el of reveals) {
	392	+ observer.observe(el);
	393	+ }
	394	+}
	395	+
	396	+// Navbar scroll effect
	397	+function initNavbarScroll() {
	398	+ const navbar = document.getElementById("navbar");
	399	+ if (!navbar) return;
	400	+
	401	+ let ticking = false;
	402	+ const onScroll = () => {
	403	+ if (!ticking) {
	404	+ requestAnimationFrame(() => {
	405	+ if (window.scrollY > 10) {
	406	+ navbar.classList.add("scrolled");
	407	+ } else {
	408	+ navbar.classList.remove("scrolled");
	409	+ }
	410	+ ticking = false;
	411	+ });
	412	+ ticking = true;
	413	+ }
	414	+ };
	415	+
	416	+ window.addEventListener("scroll", onScroll, { passive: true });
	417	+}
	418	+
	419	+// Feature card mouse glow tracking
	420	+function initCardGlow() {
	421	+ const cards = document.querySelectorAll<HTMLElement>(".feature-card");
	422	+ for (const card of cards) {
	423	+ card.addEventListener("mousemove", (e) => {
	424	+ const rect = card.getBoundingClientRect();
	425	+ const x = ((e.clientX - rect.left) / rect.width) * 100;
	426	+ const y = ((e.clientY - rect.top) / rect.height) * 100;
	427	+ card.style.setProperty("--mouse-x", `${x}%`);
	428	+ card.style.setProperty("--mouse-y", `${y}%`);
	429	+ });
	430	+ }
	431	+}
	432	+
	433	+// Search input focus effect
	434	+function initSearchInput() {
	435	+ const input = document.getElementById("feature-search-input") as HTMLInputElement \| null;
	436	+ if (!input) return;
	437	+
	438	+ input.addEventListener("focus", () => {
	439	+ input.style.borderColor = "var(--gh-blue-border)";
	440	+ input.style.boxShadow = "0 0 0 3px rgba(88, 166, 255, 0.1)";
	441	+ });
	442	+
	443	+ input.addEventListener("blur", () => {
	444	+ input.style.borderColor = "var(--border-default)";
	445	+ input.style.boxShadow = "none";
	446	+ });
	447	+}
	448	+
365	449	// Initialize on DOM load
366	450	document.addEventListener("DOMContentLoaded", () => {
367	451	// Populate tab button icons dynamically
@@ -407,6 +491,7 @@ document.addEventListener("DOMContentLoaded", () => {
407	491	const text = card.innerText.toLowerCase();
408	492	if (q === "" \|\| text.includes(q)) {
409	493	card.style.display = "flex";
	494	+ card.style.animation = "fadeInUp 0.3s var(--ease-out-expo) both";
410	495	} else {
411	496	card.style.display = "none";
412	497	}
@@ -421,4 +506,10 @@ document.addEventListener("DOMContentLoaded", () => {
421	506	copyText("git clone [email protected]:husteno-o/git-discord-bot.git", clonePill);
422	507	});
423	508	}
	509	+
	510	+ // Initialize scroll-triggered animations
	511	+ initScrollReveal();
	512	+ initNavbarScroll();
	513	+ initCardGlow();
	514	+ initSearchInput();
424	515	});
425	516

▼apps/web/src/index.html

+186-41

@@ -5,7 +5,7 @@
5	5	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6	6	<title>DevPulse — The GitHub Power-User Operating System for Discord</title>
7	7	<meta name="description" content="Eliminate context switching. Review pull requests, merge code, monitor GitHub Actions CI/CD pipelines, and trace lifecycles directly from Discord." />
8		-
	8	+
9	9	<!-- OpenGraph / Social Meta Tags -->
10	10	<meta property="og:type" content="website" />
11	11	<meta property="og:title" content="DevPulse — GitHub Power Tools for Discord" />
@@ -22,9 +22,10 @@
22	22	<div class="bg-grid"></div>
23	23	<div class="ambient-glow-1"></div>
24	24	<div class="ambient-glow-2"></div>
	25	+ <div class="ambient-glow-3"></div>
25	26
26	27	<!-- Navigation -->
27		- <header class="navbar">
	28	+ <header class="navbar" id="navbar">
28	29	<div class="container nav-container">
29	30	<a href="#" class="brand-logo">
30	31	<div class="brand-icon-wrapper">
@@ -39,7 +40,7 @@
39	40	<nav>
40	41	<ul class="nav-links">
41	42	<li><a href="#simulator">Live Simulator</a></li>
42		- <li><a href="#features">12 Core Areas</a></li>
	43	+ <li><a href="#features">21 Commands</a></li>
43	44	<li><a href="#killer-tools">Power Utilities</a></li>
44	45	<li><a href="#architecture">Architecture</a></li>
45	46	<li><a href="#quickstart">Quick Start</a></li>
@@ -63,7 +64,7 @@
63	64	<div class="container">
64	65	<div class="hero-pill">
65	66	<span class="pill-dot"></span>
66		- <span>Dedicated GitHub Power-User Operating System for Discord</span>
	67	+ <span>The GitHub Power-User Operating System for Discord</span>
67	68	</div>
68	69
69	70	<h1 class="hero-title">
@@ -122,7 +123,7 @@
122	123	<!-- Interactive Live Discord / GitHub Simulator -->
123	124	<section class="simulator-section" id="simulator">
124	125	<div class="container">
125		- <div class="simulator-wrapper">
	126	+ <div class="simulator-wrapper reveal">
126	127	<div class="simulator-header">
127	128	<div class="window-dots">
128	129	<span class="window-dot dot-red"></span>
@@ -174,23 +175,23 @@
174	175	</div>
175	176	</section>
176	177
177		- <!-- The 12 Core GitHub Areas -->
	178	+ <!-- The 21 Core Commands -->
178	179	<section class="features-section" id="features">
179	180	<div class="container">
180		- <div class="section-header">
181		- <div class="section-tag">Feature Matrix</div>
182		- <h2 class="section-title">The 12 Core GitHub Power Areas</h2>
	181	+ <div class="section-header reveal">
	182	+ <div class="section-tag">Command Matrix</div>
	183	+ <h2 class="section-title">21 Powerful GitHub Commands</h2>
183	184	<p class="section-desc">
184		- Engineered for developers who want complete control over their GitHub workflow without ever having to leave their team's chat.
	185	+ Engineered for developers who want complete control over their GitHub workflow without ever leaving Discord.
185	186	</p>
186		- <div style="margin-top: 20px;">
187		- <input type="text" id="feature-search-input" placeholder="Search commands, topics (e.g. pr, actions, security)..." style="width: 100%; max-width: 440px; padding: 10px 16px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem;" />
	187	+ <div style="margin-top: 24px;">
	188	+ <input type="text" id="feature-search-input" placeholder="Search commands, topics (e.g. pr, actions, security)..." style="width: 100%; max-width: 460px; padding: 12px 18px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; transition: border-color 0.25s ease, box-shadow 0.25s ease;" />
188	189	</div>
189	190	</div>
190	191
191	192	<div class="features-grid">
192	193	<!-- 1. /repo -->
193		- <div class="feature-card">
	194	+ <div class="feature-card reveal">
194	195	<div class="feature-top">
195	196	<div class="feature-icon-box">
196	197	<svg viewBox="0 0 16 16"><path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25H12v1.5H5.25a.25.25 0 0 1-.25-.25Z"/></svg>
@@ -206,7 +207,7 @@
206	207	</div>
207	208
208	209	<!-- 2. /pr -->
209		- <div class="feature-card">
	210	+ <div class="feature-card reveal">
210	211	<div class="feature-top">
211	212	<div class="feature-icon-box">
212	213	<svg viewBox="0 0 16 16"><path d="M5 3.254V3.25v.004a.75.75 0 1 1 0-.004Zm1.5 0a2.25 2.25 0 1 0-3 2.122V8.75a2.25 2.25 0 0 0 1.5 2.122v.378a2.25 2.25 0 1 0 1.5 0v-.378a2.25 2.25 0 0 0 1.5-2.122V5.376A2.25 2.25 0 0 0 6.5 3.254Z"/></svg>
@@ -222,7 +223,7 @@
222	223	</div>
223	224
224	225	<!-- 3. /search -->
225		- <div class="feature-card">
	226	+ <div class="feature-card reveal">
226	227	<div class="feature-top">
227	228	<div class="feature-icon-box">
228	229	<svg viewBox="0 0 16 16"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/></svg>
@@ -230,7 +231,7 @@
230	231	<span class="feature-command-badge">/search</span>
231	232	</div>
232	233	<h3 class="feature-name">Universal GitHub Search</h3>
233		- <p class="feature-text">Search across GitHub code, issues, PRs, repos, and commits using official qualifiers like `repo:`, `language:`, `is:open`, and `author:`.</p>
	234	+ <p class="feature-text">Search across GitHub code, issues, PRs, repos, and commits using official qualifiers like repo:, language:, is:open, and author:.</p>
234	235	<ul class="feature-bullets">
235	236	<li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Fast multi-type discovery</li>
236	237	<li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Sub-100ms response formatting</li>
@@ -238,7 +239,7 @@
238	239	</div>
239	240
240	241	<!-- 4. /code -->
241		- <div class="feature-card">
	242	+ <div class="feature-card reveal">
242	243	<div class="feature-top">
243	244	<div class="feature-icon-box">
244	245	<svg viewBox="0 0 16 16"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .215-.734.749.749 0 0 1 1.06-.026Zm-6.56 0a.75.75 0 0 1 1.06 0 .749.749 0 0 1 .215.734.749.749 0 0 1-.215.734L2.06 8l3.72 3.72a.749.749 0 0 1-.215.734.749.749 0 0 1-1.06.026L.22 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"/></svg>
@@ -254,7 +255,7 @@
254	255	</div>
255	256
256	257	<!-- 5. /investigate -->
257		- <div class="feature-card">
	258	+ <div class="feature-card reveal">
258	259	<div class="feature-top">
259	260	<div class="feature-icon-box">
260	261	<svg viewBox="0 0 16 16"><path d="M8.75.75V3h5.5a.75.75 0 0 1 0 1.5h-5.5v2.25a.75.75 0 0 1-1.5 0V4.5H1.75a.75.75 0 0 1 0-1.5h5.5V.75a.75.75 0 0 1 1.5 0ZM1.75 10h5.5v2.25a.75.75 0 0 0 1.5 0V11.5h5.5a.75.75 0 0 0 0-1.5h-5.5V7.75a.75.75 0 0 0-1.5 0V10H1.75a.75.75 0 0 0 0 1.5Z"/></svg>
@@ -262,7 +263,7 @@
262	263	<span class="feature-command-badge">/investigate</span>
263	264	</div>
264	265	<h3 class="feature-name">Lifecycle Investigation</h3>
265		- <p class="feature-text">Reconstruct the entire lifecycle of a bug or feature: Originating Issue -> Commits -> Pull Request -> Reviewers -> Merge -> Release Tag.</p>
	266	+ <p class="feature-text">Reconstruct the entire lifecycle of a bug or feature: Originating Issue - Commits - Pull Request - Reviewers - Merge - Release Tag.</p>
266	267	<ul class="feature-bullets">
267	268	<li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Complete chronological timeline</li>
268	269	<li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Identifies approvals and release tags</li>
@@ -270,7 +271,7 @@
270	271	</div>
271	272
272	273	<!-- 6. /activity -->
273		- <div class="feature-card">
	274	+ <div class="feature-card reveal">
274	275	<div class="feature-top">
275	276	<div class="feature-icon-box">
276	277	<svg viewBox="0 0 16 16"><path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 2.53 11.53a.75.75 0 0 1-1.06-1.06l5-5a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.75.75 0 0 1 1.06 1.06Z"/></svg>
@@ -286,7 +287,7 @@
286	287	</div>
287	288
288	289	<!-- 7. /trending -->
289		- <div class="feature-card">
	290	+ <div class="feature-card reveal">
290	291	<div class="feature-top">
291	292	<div class="feature-icon-box">
292	293	<svg viewBox="0 0 16 16"><path d="M9.504.43a1.5 1.5 0 0 1 2.456.963l.006.127.034 1.834a3.5 3.5 0 0 0 1.802 3.03l.158.087 1.488.744a1.5 1.5 0 0 1 .74 1.848l-.053.138-.68 1.487a3.5 3.5 0 0 0-.25 2.186l.06.311.383 1.533a1.5 1.5 0 0 1-1.332 1.848l-.16.009-.434.004a4.5 4.5 0 0 1-4.496-4.32l-.004-.18V8.75a.75.75 0 0 0-1.5 0v3.491a6 6 0 0 0 5.86 5.999l.24.005.434-.004a3 3 0 0 0 2.91-3.693l-.383-1.533a2 2 0 0 1 .143-1.25l.68-1.487a3 3 0 0 0-1.374-3.97l-1.488-.745a2 2 0 0 1-1.03-1.731l-.034-1.835a3 3 0 0 0-4.912-2.18L7.43 2.857a.75.75 0 1 0 1.06 1.06l1.014-.987Z"/></svg>
@@ -302,7 +303,7 @@
302	303	</div>
303	304
304	305	<!-- 8. /watch -->
305		- <div class="feature-card">
	306	+ <div class="feature-card reveal">
306	307	<div class="feature-top">
307	308	<div class="feature-icon-box">
308	309	<svg viewBox="0 0 16 16"><path d="M8 2a6 6 0 0 0-6 6c0 1.77.78 3.36 2 4.47v.78c0 .41.34.75.75.75h6.5c.41 0 .75-.34.75-.75v-.78A5.996 5.996 0 0 0 14 8a6 6 0 0 0-6-6Zm0 1.5a4.5 4.5 0 0 1 4.5 4.5c0 1.4-.64 2.65-1.65 3.48a.75.75 0 0 0-.35.64v.38H5.5v-.38a.75.75 0 0 0-.35-.64A4.485 4.485 0 0 1 3.5 8 4.5 4.5 0 0 1 8 3.5Z"/></svg>
@@ -318,7 +319,7 @@
318	319	</div>
319	320
320	321	<!-- 9. /actions -->
321		- <div class="feature-card">
	322	+ <div class="feature-card reveal">
322	323	<div class="feature-top">
323	324	<div class="feature-icon-box">
324	325	<svg viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"/></svg>
@@ -334,7 +335,7 @@
334	335	</div>
335	336
336	337	<!-- 10. /security -->
337		- <div class="feature-card">
	338	+ <div class="feature-card reveal">
338	339	<div class="feature-top">
339	340	<div class="feature-icon-box">
340	341	<svg viewBox="0 0 16 16"><path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68Z"/></svg>
@@ -350,7 +351,7 @@
350	351	</div>
351	352
352	353	<!-- 11. /release -->
353		- <div class="feature-card">
	354	+ <div class="feature-card reveal">
354	355	<div class="feature-top">
355	356	<div class="feature-icon-box">
356	357	<svg viewBox="0 0 16 16"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/></svg>
@@ -366,7 +367,7 @@
366	367	</div>
367	368
368	369	<!-- 12. /team -->
369		- <div class="feature-card">
	370	+ <div class="feature-card reveal">
370	371	<div class="feature-top">
371	372	<div class="feature-icon-box">
372	373	<svg viewBox="0 0 16 16"><path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4.002 4.002 0 0 0-6.898-2.618.75.75 0 0 1-1.052-.008A3.491 3.491 0 0 1 2 5.5Zm3.5-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8.5 4.5a3 3 0 1 1-5.07 2.217.75.75 0 1 1 1.06-.063 1.5 1.5 0 1 0 2.51-1.154.75.75 0 0 1 1.5 0Z"/></svg>
@@ -380,6 +381,150 @@
380	381	<li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Workload distribution balance</li>
381	382	</ul>
382	383	</div>
	384	+
	385	+ <!-- 13. /home -->
	386	+ <div class="feature-card reveal">
	387	+ <div class="feature-top">
	388	+ <div class="feature-icon-box">
	389	+ <svg viewBox="0 0 16 16"><path d="M6.906.664a1.749 1.749 0 0 1 2.187 0l5.25 4.2c.415.332.657.835.657 1.367v7.019A1.75 1.75 0 0 1 13.25 15h-3.5a.75.75 0 0 1-.75-.75V9H7v5.25a.75.75 0 0 1-.75.75h-3.5A1.75 1.75 0 0 1 1 13.25V6.231c0-.531.242-1.034.657-1.366l5.25-4.2Zm1.25 1.171a.25.25 0 0 0-.312 0l-5.25 4.2a.25.25 0 0 0-.094.196v7.019c0 .138.112.25.25.25H5.5V8.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v5.25h2.75a.25.25 0 0 0 .25-.25V6.23a.25.25 0 0 0-.094-.195Z"/></svg>
	390	+ </div>
	391	+ <span class="feature-command-badge">/home</span>
	392	+ </div>
	393	+ <h3 class="feature-name">Morning Cockpit</h3>
	394	+ <p class="feature-text">Morning command center showing your active PRs, pending reviews, repo watchtower alerts, and rising ecosystem highlights.</p>
	395	+ <ul class="feature-bullets">
	396	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Personalized daily dashboard</li>
	397	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Pending reviews and alerts at a glance</li>
	398	+ </ul>
	399	+ </div>
	400	+
	401	+ <!-- 14. /connect -->
	402	+ <div class="feature-card reveal">
	403	+ <div class="feature-top">
	404	+ <div class="feature-icon-box">
	405	+ <svg viewBox="0 0 16 16"><path d="M6.5 1.75a.25.25 0 0 1 .25-.25h2.5a.25.25 0 0 1 .25.25V3h-3ZM11 3V1.75A1.75 1.75 0 0 0 9.25 0h-2.5A1.75 1.75 0 0 0 5 1.75V3H1.75C.784 3 0 3.784 0 4.75v8.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3Z"/></svg>
	406	+ </div>
	407	+ <span class="feature-command-badge">/connect</span>
	408	+ </div>
	409	+ <h3 class="feature-name">Token Vault</h3>
	410	+ <p class="feature-text">Store GitHub Personal Access Tokens safely with AES-256-GCM encryption. Public repos never require credentials.</p>
	411	+ <ul class="feature-bullets">
	412	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Military-grade AES-256-GCM encryption</li>
	413	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Zero-knowledge token storage</li>
	414	+ </ul>
	415	+ </div>
	416	+
	417	+ <!-- 15. /why -->
	418	+ <div class="feature-card reveal">
	419	+ <div class="feature-top">
	420	+ <div class="feature-icon-box">
	421	+ <svg viewBox="0 0 16 16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 0 1 1.059-.062 1.488 1.488 0 0 1 .494 1.102c0 .546-.3.923-.627 1.258-.293.301-.597.613-.597 1.117a.75.75 0 0 1-1.5 0c0-.987.585-1.59 1.002-2.018.232-.238.472-.484.472-.757a.253.253 0 0 0-.083-.188.27.27 0 0 0-.174-.052c-.176 0-.31.092-.41.228a.75.75 0 0 1-1.135-.628ZM8 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/></svg>
	422	+ </div>
	423	+ <span class="feature-command-badge">/why</span>
	424	+ </div>
	425	+ <h3 class="feature-name">Code Archaeology</h3>
	426	+ <p class="feature-text">Trace any file and line change back through Commit - Pull Request - Originating Issue to answer why a piece of code exists.</p>
	427	+ <ul class="feature-bullets">
	428	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Full lineage tracing</li>
	429	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Context-rich decision history</li>
	430	+ </ul>
	431	+ </div>
	432	+
	433	+ <!-- 16. /ask -->
	434	+ <div class="feature-card reveal">
	435	+ <div class="feature-top">
	436	+ <div class="feature-icon-box">
	437	+ <svg viewBox="0 0 16 16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 1.5 0Z"/></svg>
	438	+ </div>
	439	+ <span class="feature-command-badge">/ask</span>
	440	+ </div>
	441	+ <h3 class="feature-name">Query Engine</h3>
	442	+ <p class="feature-text">Deterministic query helper to answer questions like pull requests waiting for review over 24 hours or frequently modified files.</p>
	443	+ <ul class="feature-bullets">
	444	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Natural language query parsing</li>
	445	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Stale PR and bottleneck detection</li>
	446	+ </ul>
	447	+ </div>
	448	+
	449	+ <!-- 17. /tools -->
	450	+ <div class="feature-card reveal">
	451	+ <div class="feature-top">
	452	+ <div class="feature-icon-box">
	453	+ <svg viewBox="0 0 16 16"><path d="M5.45 4.28A.75.75 0 0 1 6.5 4.5v2.5h3v-2.5a.75.75 0 0 1 1.28-.53l3.5 3.5a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 0 1-1.28-.53V9h-3v2.5a.75.75 0 0 1-1.28.53l-3.5-3.5a.75.75 0 0 1 0-1.06Z"/></svg>
	454	+ </div>
	455	+ <span class="feature-command-badge">/tools</span>
	456	+ </div>
	457	+ <h3 class="feature-name">Dev Essentials</h3>
	458	+ <p class="feature-text">Quick-access developer utilities including JSON formatting, base64 encoding, JWT inspection, hash generation, and timestamp conversion.</p>
	459	+ <ul class="feature-bullets">
	460	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Format, encode, decode utilities</li>
	461	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> JWT and timestamp tools</li>
	462	+ </ul>
	463	+ </div>
	464	+
	465	+ <!-- 18. /settings -->
	466	+ <div class="feature-card reveal">
	467	+ <div class="feature-top">
	468	+ <div class="feature-icon-box">
	469	+ <svg viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"/></svg>
	470	+ </div>
	471	+ <span class="feature-command-badge">/settings</span>
	472	+ </div>
	473	+ <h3 class="feature-name">Server Config</h3>
	474	+ <p class="feature-text">Configure default repositories, notification channels, access controls, and command permissions per Discord server.</p>
	475	+ <ul class="feature-bullets">
	476	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Per-server configuration profiles</li>
	477	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Role-based access controls</li>
	478	+ </ul>
	479	+ </div>
	480	+
	481	+ <!-- 19. /help -->
	482	+ <div class="feature-card reveal">
	483	+ <div class="feature-top">
	484	+ <div class="feature-icon-box">
	485	+ <svg viewBox="0 0 16 16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 1.5 0Z"/></svg>
	486	+ </div>
	487	+ <span class="feature-command-badge">/help</span>
	488	+ </div>
	489	+ <h3 class="feature-name">Command Directory</h3>
	490	+ <p class="feature-text">Interactive help system with command categories, usage examples, argument descriptions, and quick-start guides for new users.</p>
	491	+ <ul class="feature-bullets">
	492	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Categorized command browser</li>
	493	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Usage examples and syntax help</li>
	494	+ </ul>
	495	+ </div>
	496	+
	497	+ <!-- 20. /ai -->
	498	+ <div class="feature-card reveal">
	499	+ <div class="feature-top">
	500	+ <div class="feature-icon-box">
	501	+ <svg viewBox="0 0 16 16"><path d="M5.45 4.28A.75.75 0 0 1 6.5 4.5v2.5h3v-2.5a.75.75 0 0 1 1.28-.53l3.5 3.5a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 0 1-1.28-.53V9h-3v2.5a.75.75 0 0 1-1.28.53l-3.5-3.5a.75.75 0 0 1 0-1.06Z"/></svg>
	502	+ </div>
	503	+ <span class="feature-command-badge">/ai</span>
	504	+ </div>
	505	+ <h3 class="feature-name">AI Code Copilot</h3>
	506	+ <p class="feature-text">AI-powered code explanations, refactoring suggestions, and intelligent summaries of pull requests and issues directly in Discord.</p>
	507	+ <ul class="feature-bullets">
	508	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Intelligent code explanations</li>
	509	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> PR and issue summarization</li>
	510	+ </ul>
	511	+ </div>
	512	+
	513	+ <!-- 21. /code-review -->
	514	+ <div class="feature-card reveal">
	515	+ <div class="feature-top">
	516	+ <div class="feature-icon-box">
	517	+ <svg viewBox="0 0 16 16"><path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68Z"/></svg>
	518	+ </div>
	519	+ <span class="feature-command-badge">/code-review</span>
	520	+ </div>
	521	+ <h3 class="feature-name">Automated PR Review</h3>
	522	+ <p class="feature-text">Automated code review with security analysis, performance suggestions, style enforcement, and best practice recommendations on every pull request.</p>
	523	+ <ul class="feature-bullets">
	524	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Security and performance analysis</li>
	525	+ <li><svg viewBox="0 0 16 16"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg> Style and best practice enforcement</li>
	526	+ </ul>
	527	+ </div>
383	528	</div>
384	529	</div>
385	530	</section>
@@ -387,14 +532,14 @@
387	532	<!-- Killer Features Section -->
388	533	<section class="killer-section" id="killer-tools">
389	534	<div class="container">
390		- <div class="section-header">
	535	+ <div class="section-header reveal">
391	536	<div class="section-tag">High-Impact Utilities</div>
392	537	<h2 class="section-title">Workflow Accelerators</h2>
393	538	<p class="section-desc">Designed to eliminate engineering bottlenecks in seconds.</p>
394	539	</div>
395	540
396	541	<div class="killer-grid">
397		- <div class="killer-card">
	542	+ <div class="killer-card reveal">
398	543	<h4 class="killer-card-title">
399	544	<svg width="18" height="18" viewBox="0 0 16 16" fill="var(--gh-blue)"><path d="M6.906.664a1.749 1.749 0 0 1 2.187 0l5.25 4.2c.415.332.657.835.657 1.367v7.019A1.75 1.75 0 0 1 13.25 15h-3.5a.75.75 0 0 1-.75-.75V9H7v5.25a.75.75 0 0 1-.75.75h-3.5A1.75 1.75 0 0 1 1 13.25V6.231c0-.531.242-1.034.657-1.366l5.25-4.2Zm1.25 1.171a.25.25 0 0 0-.312 0l-5.25 4.2a.25.25 0 0 0-.094.196v7.019c0 .138.112.25.25.25H5.5V8.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v5.25h2.75a.25.25 0 0 0 .25-.25V6.23a.25.25 0 0 0-.094-.195Z"/></svg>
400	545	/home Cockpit
@@ -402,15 +547,15 @@
402	547	<p class="killer-card-desc">Morning command center showing your active PRs, pending reviews, repo watchtower alerts, and rising ecosystem highlights.</p>
403	548	</div>
404	549
405		- <div class="killer-card">
	550	+ <div class="killer-card reveal">
406	551	<h4 class="killer-card-title">
407	552	<svg width="18" height="18" viewBox="0 0 16 16" fill="var(--gh-purple)"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 0 1 1.059-.062 1.488 1.488 0 0 1 .494 1.102c0 .546-.3.923-.627 1.258-.293.301-.597.613-.597 1.117a.75.75 0 0 1-1.5 0c0-.987.585-1.59 1.002-2.018.232-.238.472-.484.472-.757a.253.253 0 0 0-.083-.188.27.27 0 0 0-.174-.052c-.176 0-.31.092-.41.228a.75.75 0 0 1-1.135-.628ZM8 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/></svg>
408	553	/why Archaeology
409	554	</h4>
410		- <p class="killer-card-desc">Trace any file and line change back through Commit -> Pull Request -> Originating Issue to answer why a piece of code exists.</p>
	555	+ <p class="killer-card-desc">Trace any file and line change back through Commit - Pull Request - Originating Issue to answer why a piece of code exists.</p>
411	556	</div>
412	557
413		- <div class="killer-card">
	558	+ <div class="killer-card reveal">
414	559	<h4 class="killer-card-title">
415	560	<svg width="18" height="18" viewBox="0 0 16 16" fill="var(--gh-green)"><path d="M6.5 1.75a.25.25 0 0 1 .25-.25h2.5a.25.25 0 0 1 .25.25V3h-3ZM11 3V1.75A1.75 1.75 0 0 0 9.25 0h-2.5A1.75 1.75 0 0 0 5 1.75V3H1.75C.784 3 0 3.784 0 4.75v8.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3Z"/></svg>
416	561	/connect Vault
@@ -418,7 +563,7 @@
418	563	<p class="killer-card-desc">Store GitHub Personal Access Tokens safely with AES-256-GCM encryption. Public repos never require credentials.</p>
419	564	</div>
420	565
421		- <div class="killer-card">
	566	+ <div class="killer-card reveal">
422	567	<h4 class="killer-card-title">
423	568	<svg width="18" height="18" viewBox="0 0 16 16" fill="var(--gh-amber)"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 1.5 0Z"/></svg>
424	569	/ask Engine
@@ -432,13 +577,13 @@
432	577	<!-- Architecture & Security -->
433	578	<section class="arch-section" id="architecture">
434	579	<div class="container">
435		- <div class="section-header">
	580	+ <div class="section-header reveal">
436	581	<div class="section-tag">Security & Infrastructure</div>
437	582	<h2 class="section-title">Zero-Trust Architecture</h2>
438	583	<p class="section-desc">Engineered for security-conscious teams, open-source communities, and enterprise organizations.</p>
439	584	</div>
440	585
441		- <div class="arch-box">
	586	+ <div class="arch-box reveal">
442	587	<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 12px;">Data Isolation and Security Pipeline</h3>
443	588	<p style="color: var(--text-secondary); font-size: 0.95rem;">
444	589	DevPulse operates as an outbound-only Discord Gateway client with zero inbound open ports required. All token interactions are isolated per user and encrypted at rest.
@@ -476,13 +621,13 @@
476	621	<!-- Quick Start Walkthrough -->
477	622	<section class="install-section" id="quickstart">
478	623	<div class="container">
479		- <div class="section-header">
	624	+ <div class="section-header reveal">
480	625	<div class="section-tag">Self-Hosting & Setup</div>
481	626	<h2 class="section-title">Get Started in Under 3 Minutes</h2>
482	627	<p class="section-desc">Clone the repository, configure your Discord bot token, and launch DevPulse with Bun.</p>
483	628	</div>
484	629
485		- <div class="terminal-box" style="max-width: 800px; margin: 0 auto;">
	630	+ <div class="terminal-box reveal" style="max-width: 800px; margin: 0 auto;">
486	631	<div class="terminal-topbar">
487	632	<div class="window-dots">
488	633	<span class="window-dot dot-red"></span>
@@ -521,11 +666,11 @@
521	666	</div>
522	667
523	668	<!-- Cloudflare Pages Badge -->
524		- <div style="text-align: center; margin-top: 40px;">
525		- <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 12px;">
	669	+ <div class="reveal" style="text-align: center; margin-top: 44px;">
	670	+ <p style="color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 14px;">
526	671	Hosting this landing page on Cloudflare Pages:
527	672	</p>
528		- <div style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 8px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--gh-blue);">
	673	+ <div style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--gh-blue);">
529	674	<span>Deploy Output: <strong>apps/web/dist</strong> • Build Command: <strong>bun run build:web</strong></span>
530	675	</div>
531	676	</div>
@@ -537,11 +682,11 @@
537	682	<div class="container">
538	683	<div class="footer-grid">
539	684	<div>
540		- <div class="brand-logo" style="margin-bottom: 8px;">
	685	+ <div class="brand-logo" style="margin-bottom: 10px;">
541	686	<div class="brand-icon-wrapper" style="width: 30px; height: 30px;">
542	687	<svg viewBox="0 0 16 16"><path d="M5 3.254V3.25v.004a.75.75 0 1 1 0-.004Zm1.5 0a2.25 2.25 0 1 0-3 2.122V8.75a2.25 2.25 0 0 0 1.5 2.122v.378a2.25 2.25 0 1 0 1.5 0v-.378a2.25 2.25 0 0 0 1.5-2.122V5.376A2.25 2.25 0 0 0 6.5 3.254Z"/></svg>
543	688	</div>
544		- <span style="font-size: 1.1rem;">DevPulse</span>
	689	+ <span style="font-size: 1.05rem;">DevPulse</span>
545	690	</div>
546	691	<p class="footer-col-desc">
547	692	The GitHub Power-User Operating System for Discord. Never leave Discord for your daily GitHub workflow.
548	693

▼apps/web/src/styles.css

+705-215

@@ -1,6 +1,6 @@
1	1	/* ==============================================================================
2		- DevPulse - GitHub Power-User Discord Platform Theme
3		- GitHub Dark High-End Developer Styling
	2	+ DevPulse — Premium GitHub Discord Bot Landing Page
	3	+ Dark theme with smooth animations and micro-interactions
4	4	============================================================================== */
5	5
6	6	:root {
@@ -48,6 +48,10 @@
48	48	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
49	49	--shadow-glow-green: 0 0 30px rgba(46, 160, 67, 0.25);
50	50	--shadow-glow-blue: 0 0 30px rgba(88, 166, 255, 0.2);
	51	+ --shadow-glow-purple: 0 0 30px rgba(163, 113, 247, 0.2);
	52	+
	53	+ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	54	+ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
51	55	}
52	56
53	57	* {
@@ -69,87 +73,260 @@ body {
69	73	overflow-x: hidden;
70	74	position: relative;
71	75	-webkit-font-smoothing: antialiased;
	76	+ -moz-osx-font-smoothing: grayscale;
72	77	}
73	78
74		-/* Background grid effect */
	79	+/* ==============================================================================
	80	+ Background Effects
	81	+ ============================================================================== */
	82	+
75	83	.bg-grid {
76	84	position: fixed;
77	85	top: 0;
78	86	left: 0;
79	87	right: 0;
80	88	bottom: 0;
81		- background-image: linear-gradient(to right, rgba(48, 54, 61, 0.1) 1px, transparent 1px),
82		- linear-gradient(to bottom, rgba(48, 54, 61, 0.1) 1px, transparent 1px);
83		- background-size: 40px 40px;
	89	+ background-image: linear-gradient(to right, rgba(48, 54, 61, 0.06) 1px, transparent 1px),
	90	+ linear-gradient(to bottom, rgba(48, 54, 61, 0.06) 1px, transparent 1px);
	91	+ background-size: 48px 48px;
84	92	pointer-events: none;
85	93	z-index: -2;
	94	+ mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
	95	+ -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
86	96	}
87	97
88		-/* Ambient glow spheres */
89	98	.ambient-glow-1 {
90	99	position: fixed;
91		- top: -100px;
92		- left: 20%;
	100	+ top: -150px;
	101	+ left: 15%;
	102	+ width: 700px;
	103	+ height: 700px;
	104	+ border-radius: 50%;
	105	+ background: radial-gradient(circle, rgba(46, 160, 67, 0.1) 0%, rgba(13, 17, 23, 0) 70%);
	106	+ filter: blur(100px);
	107	+ pointer-events: none;
	108	+ z-index: -1;
	109	+ animation: floatGlow 20s var(--ease-in-out) infinite alternate;
	110	+}
	111	+
	112	+.ambient-glow-2 {
	113	+ position: fixed;
	114	+ top: 500px;
	115	+ right: 10%;
93	116	width: 600px;
94	117	height: 600px;
95	118	border-radius: 50%;
96		- background: radial-gradient(circle, rgba(46, 160, 67, 0.12) 0%, rgba(13, 17, 23, 0) 70%);
97		- filter: blur(80px);
	119	+ background: radial-gradient(circle, rgba(88, 166, 255, 0.08) 0%, rgba(13, 17, 23, 0) 70%);
	120	+ filter: blur(100px);
98	121	pointer-events: none;
99	122	z-index: -1;
100		- animation: floatGlow 14s ease-in-out infinite alternate;
	123	+ animation: floatGlow 25s var(--ease-in-out) infinite alternate-reverse;
101	124	}
102	125
103		-.ambient-glow-2 {
	126	+.ambient-glow-3 {
104	127	position: fixed;
105		- top: 400px;
106		- right: 15%;
	128	+ bottom: -100px;
	129	+ left: 50%;
107	130	width: 500px;
108	131	height: 500px;
109	132	border-radius: 50%;
110		- background: radial-gradient(circle, rgba(88, 166, 255, 0.1) 0%, rgba(13, 17, 23, 0) 70%);
111		- filter: blur(80px);
	133	+ background: radial-gradient(circle, rgba(163, 113, 247, 0.06) 0%, rgba(13, 17, 23, 0) 70%);
	134	+ filter: blur(100px);
112	135	pointer-events: none;
113	136	z-index: -1;
114		- animation: floatGlow 18s ease-in-out infinite alternate-reverse;
	137	+ animation: floatGlow 22s var(--ease-in-out) infinite alternate;
115	138	}
116	139
	140	+/* ==============================================================================
	141	+ Keyframe Animations
	142	+ ============================================================================== */
	143	+
117	144	@keyframes floatGlow {
118	145	0% {
119	146	transform: translate(0, 0) scale(1);
	147	+ opacity: 0.8;
	148	+ }
	149	+ 33% {
	150	+ transform: translate(30px, -20px) scale(1.05);
	151	+ opacity: 1;
	152	+ }
	153	+ 66% {
	154	+ transform: translate(-20px, 30px) scale(0.95);
	155	+ opacity: 0.9;
	156	+ }
	157	+ 100% {
	158	+ transform: translate(10px, -10px) scale(1.02);
	159	+ opacity: 0.8;
	160	+ }
	161	+}
	162	+
	163	+@keyframes pulseDot {
	164	+ 0% {
	165	+ transform: scale(0.95);
	166	+ opacity: 0.7;
	167	+ box-shadow: 0 0 6px var(--gh-green);
	168	+ }
	169	+ 50% {
	170	+ transform: scale(1.3);
	171	+ opacity: 1;
	172	+ box-shadow: 0 0 14px var(--gh-green);
	173	+ }
	174	+ 100% {
	175	+ transform: scale(0.95);
	176	+ opacity: 0.7;
	177	+ box-shadow: 0 0 6px var(--gh-green);
	178	+ }
	179	+}
	180	+
	181	+@keyframes shimmer {
	182	+ 0% {
	183	+ background-position: -200% center;
	184	+ }
	185	+ 100% {
	186	+ background-position: 200% center;
	187	+ }
	188	+}
	189	+
	190	+@keyframes fadeInUp {
	191	+ 0% {
	192	+ opacity: 0;
	193	+ transform: translateY(30px);
	194	+ }
	195	+ 100% {
	196	+ opacity: 1;
	197	+ transform: translateY(0);
	198	+ }
	199	+}
	200	+
	201	+@keyframes fadeIn {
	202	+ 0% {
	203	+ opacity: 0;
	204	+ }
	205	+ 100% {
	206	+ opacity: 1;
	207	+ }
	208	+}
	209	+
	210	+@keyframes slideIn {
	211	+ 0% {
	212	+ opacity: 0;
	213	+ transform: translateX(20px);
	214	+ }
	215	+ 100% {
	216	+ opacity: 1;
	217	+ transform: translateX(0);
	218	+ }
	219	+}
	220	+
	221	+@keyframes slideUp {
	222	+ 0% {
	223	+ opacity: 0;
	224	+ transform: translateY(12px);
	225	+ }
	226	+ 100% {
	227	+ opacity: 1;
	228	+ transform: translateY(0);
	229	+ }
	230	+}
	231	+
	232	+@keyframes typing {
	233	+ 0% {
	234	+ opacity: 0;
	235	+ transform: translateX(-4px);
120	236	}
121	237	50% {
122		- transform: translate(40px, -30px) scale(1.1);
	238	+ opacity: 1;
123	239	}
124	240	100% {
125		- transform: translate(-30px, 40px) scale(0.95);
	241	+ opacity: 1;
	242	+ transform: translateX(0);
	243	+ }
	244	+}
	245	+
	246	+@keyframes breathe {
	247	+ 0%, 100% {
	248	+ opacity: 0.6;
	249	+ transform: scale(1);
	250	+ }
	251	+ 50% {
	252	+ opacity: 1;
	253	+ transform: scale(1.02);
126	254	}
127	255	}
128	256
129		-/* Container */
	257	+@keyframes borderGlow {
	258	+ 0%, 100% {
	259	+ border-color: var(--border-default);
	260	+ }
	261	+ 50% {
	262	+ border-color: var(--border-glow);
	263	+ }
	264	+}
	265	+
	266	+@keyframes scaleIn {
	267	+ 0% {
	268	+ opacity: 0;
	269	+ transform: scale(0.92);
	270	+ }
	271	+ 100% {
	272	+ opacity: 1;
	273	+ transform: scale(1);
	274	+ }
	275	+}
	276	+
	277	+/* Scroll reveal utility */
	278	+.reveal {
	279	+ opacity: 0;
	280	+ transform: translateY(30px);
	281	+ transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
	282	+}
	283	+
	284	+.reveal.visible {
	285	+ opacity: 1;
	286	+ transform: translateY(0);
	287	+}
	288	+
	289	+.reveal-delay-1 { transition-delay: 0.1s; }
	290	+.reveal-delay-2 { transition-delay: 0.2s; }
	291	+.reveal-delay-3 { transition-delay: 0.3s; }
	292	+.reveal-delay-4 { transition-delay: 0.4s; }
	293	+.reveal-delay-5 { transition-delay: 0.5s; }
	294	+
	295	+/* ==============================================================================
	296	+ Container & Layout
	297	+ ============================================================================== */
	298	+
130	299	.container {
131	300	max-width: 1200px;
132	301	margin: 0 auto;
133	302	padding: 0 24px;
134	303	}
135	304
136		-/* Navigation */
	305	+/* ==============================================================================
	306	+ Navigation
	307	+ ============================================================================== */
	308	+
137	309	.navbar {
138	310	position: sticky;
139	311	top: 0;
140	312	z-index: 100;
141		- background-color: rgba(13, 17, 23, 0.85);
142		- backdrop-filter: blur(12px);
143		- -webkit-backdrop-filter: blur(12px);
144		- border-bottom: 1px solid var(--border-muted);
145		- transition: border-color 0.2s ease;
	313	+ background-color: rgba(13, 17, 23, 0.8);
	314	+ backdrop-filter: blur(16px);
	315	+ -webkit-backdrop-filter: blur(16px);
	316	+ border-bottom: 1px solid transparent;
	317	+ transition: border-color 0.3s ease, background-color 0.3s ease;
	318	+}
	319	+
	320	+.navbar.scrolled {
	321	+ border-bottom-color: var(--border-muted);
	322	+ background-color: rgba(13, 17, 23, 0.92);
146	323	}
147	324
148	325	.nav-container {
149	326	display: flex;
150	327	align-items: center;
151	328	justify-content: space-between;
152		- height: 70px;
	329	+ height: 68px;
153	330	}
154	331
155	332	.brand-logo {
@@ -159,8 +336,13 @@ body {
159	336	text-decoration: none;
160	337	color: var(--text-primary);
161	338	font-weight: 700;
162		- font-size: 1.25rem;
	339	+ font-size: 1.2rem;
163	340	letter-spacing: -0.5px;
	341	+ transition: opacity 0.2s ease;
	342	+}
	343	+
	344	+.brand-logo:hover {
	345	+ opacity: 0.85;
164	346	}
165	347
166	348	.brand-icon-wrapper {
@@ -168,16 +350,22 @@ body {
168	350	display: flex;
169	351	align-items: center;
170	352	justify-content: center;
171		- width: 38px;
172		- height: 38px;
	353	+ width: 36px;
	354	+ height: 36px;
173	355	background: linear-gradient(135deg, #238636 0%, #1f6feb 100%);
174		- border-radius: 8px;
175		- box-shadow: 0 0 16px rgba(46, 160, 67, 0.4);
	356	+ border-radius: 10px;
	357	+ box-shadow: 0 0 20px rgba(46, 160, 67, 0.3);
	358	+ transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out-expo);
	359	+}
	360	+
	361	+.brand-icon-wrapper:hover {
	362	+ box-shadow: 0 0 28px rgba(46, 160, 67, 0.5);
	363	+ transform: scale(1.05);
176	364	}
177	365
178	366	.brand-icon-wrapper svg {
179		- width: 22px;
180		- height: 22px;
	367	+ width: 20px;
	368	+ height: 20px;
181	369	fill: #ffffff;
182	370	}
183	371
@@ -186,7 +374,7 @@ body {
186	374	}
187	375
188	376	.brand-tag {
189		- font-size: 0.7rem;
	377	+ font-size: 0.65rem;
190	378	text-transform: uppercase;
191	379	font-weight: 600;
192	380	padding: 2px 6px;
@@ -194,7 +382,7 @@ body {
194	382	background: var(--gh-green-subtle);
195	383	color: var(--gh-green-hover);
196	384	border: 1px solid var(--gh-green-border);
197		- margin-left: 4px;
	385	+ margin-left: 2px;
198	386	letter-spacing: 0.5px;
199	387	}
200	388
@@ -208,15 +396,31 @@ body {
208	396	.nav-links a {
209	397	color: var(--text-secondary);
210	398	text-decoration: none;
211		- font-size: 0.92rem;
	399	+ font-size: 0.88rem;
212	400	font-weight: 500;
213	401	transition: color 0.2s ease;
	402	+ position: relative;
	403	+}
	404	+
	405	+.nav-links a::after {
	406	+ content: "";
	407	+ position: absolute;
	408	+ bottom: -4px;
	409	+ left: 0;
	410	+ width: 0;
	411	+ height: 1.5px;
	412	+ background: var(--gh-blue);
	413	+ transition: width 0.25s var(--ease-out-expo);
214	414	}
215	415
216	416	.nav-links a:hover {
217	417	color: var(--text-primary);
218	418	}
219	419
	420	+.nav-links a:hover::after {
	421	+ width: 100%;
	422	+}
	423	+
220	424	.nav-actions {
221	425	display: flex;
222	426	align-items: center;
@@ -230,15 +434,30 @@ body {
230	434	justify-content: center;
231	435	gap: 8px;
232	436	padding: 8px 16px;
233		- border-radius: 6px;
234		- font-size: 0.9rem;
	437	+ border-radius: 8px;
	438	+ font-size: 0.88rem;
235	439	font-weight: 600;
236	440	text-decoration: none;
237	441	cursor: pointer;
238		- transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	442	+ transition: all 0.25s var(--ease-out-expo);
239	443	border: 1px solid transparent;
240	444	font-family: inherit;
241	445	white-space: nowrap;
	446	+ position: relative;
	447	+ overflow: hidden;
	448	+}
	449	+
	450	+.btn::after {
	451	+ content: "";
	452	+ position: absolute;
	453	+ inset: 0;
	454	+ background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
	455	+ opacity: 0;
	456	+ transition: opacity 0.3s ease;
	457	+}
	458	+
	459	+.btn:hover::after {
	460	+ opacity: 1;
242	461	}
243	462
244	463	.btn-sm {
@@ -247,21 +466,21 @@ body {
247	466	}
248	467
249	468	.btn-lg {
250		- padding: 12px 24px;
251		- font-size: 1.05rem;
	469	+ padding: 14px 28px;
	470	+ font-size: 1rem;
252	471	}
253	472
254	473	.btn-primary {
255	474	background-color: var(--gh-green);
256	475	color: #ffffff;
257	476	border-color: rgba(240, 246, 252, 0.1);
258		- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	477	+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
259	478	}
260	479
261	480	.btn-primary:hover {
262	481	background-color: var(--gh-green-hover);
263	482	box-shadow: var(--shadow-glow-green);
264		- transform: translateY(-1px);
	483	+ transform: translateY(-2px);
265	484	}
266	485
267	486	.btn-secondary {
@@ -273,7 +492,7 @@ body {
273	492	.btn-secondary:hover {
274	493	background-color: var(--bg-surface-hover);
275	494	border-color: var(--text-secondary);
276		- transform: translateY(-1px);
	495	+ transform: translateY(-2px);
277	496	}
278	497
279	498	.btn-discord {
@@ -283,8 +502,8 @@ body {
283	502
284	503	.btn-discord:hover {
285	504	background-color: var(--discord-blurple-hover);
286		- box-shadow: 0 0 20px rgba(88, 101, 242, 0.4);
287		- transform: translateY(-1px);
	505	+ box-shadow: 0 0 24px rgba(88, 101, 242, 0.4);
	506	+ transform: translateY(-2px);
288	507	}
289	508
290	509	.btn-github {
@@ -296,6 +515,7 @@ body {
296	515	.btn-github:hover {
297	516	background-color: #30363d;
298	517	border-color: #8b949e;
	518	+ transform: translateY(-2px);
299	519	}
300	520
301	521	/* Mobile Toggle */
@@ -308,9 +528,12 @@ body {
308	528	padding: 4px;
309	529	}
310	530
311		-/* Hero Section */
	531	+/* ==============================================================================
	532	+ Hero Section
	533	+ ============================================================================== */
	534	+
312	535	.hero-section {
313		- padding: 90px 0 60px;
	536	+ padding: 100px 0 70px;
314	537	text-align: center;
315	538	position: relative;
316	539	}
@@ -319,15 +542,16 @@ body {
319	542	display: inline-flex;
320	543	align-items: center;
321	544	gap: 8px;
322		- padding: 6px 14px;
323		- background: rgba(33, 38, 45, 0.8);
	545	+ padding: 6px 16px;
	546	+ background: rgba(33, 38, 45, 0.7);
324	547	border: 1px solid var(--border-default);
325	548	border-radius: 9999px;
326	549	font-size: 0.82rem;
327	550	font-weight: 500;
328	551	color: var(--text-secondary);
329		- margin-bottom: 24px;
330		- backdrop-filter: blur(8px);
	552	+ margin-bottom: 28px;
	553	+ backdrop-filter: blur(12px);
	554	+ animation: fadeInUp 0.6s var(--ease-out-expo) both;
331	555	}
332	556
333	557	.pill-dot {
@@ -335,49 +559,38 @@ body {
335	559	height: 8px;
336	560	border-radius: 50%;
337	561	background-color: var(--gh-green);
338		- box-shadow: 0 0 8px var(--gh-green);
339		- animation: pulseDot 2s infinite;
340		-}
341		-
342		-@keyframes pulseDot {
343		- 0% {
344		- transform: scale(0.95);
345		- opacity: 0.8;
346		- }
347		- 50% {
348		- transform: scale(1.2);
349		- opacity: 1;
350		- }
351		- 100% {
352		- transform: scale(0.95);
353		- opacity: 0.8;
354		- }
	562	+ animation: pulseDot 2.5s ease-in-out infinite;
355	563	}
356	564
357	565	.hero-title {
358		- font-size: clamp(2.5rem, 6vw, 4.2rem);
	566	+ font-size: clamp(2.8rem, 6.5vw, 4.5rem);
359	567	font-weight: 800;
360		- line-height: 1.15;
361		- letter-spacing: -1.5px;
362		- margin-bottom: 24px;
	568	+ line-height: 1.1;
	569	+ letter-spacing: -2px;
	570	+ margin-bottom: 28px;
363	571	max-width: 900px;
364	572	margin-left: auto;
365	573	margin-right: auto;
	574	+ animation: fadeInUp 0.7s var(--ease-out-expo) 0.1s both;
366	575	}
367	576
368	577	.hero-title-gradient {
369		- background: linear-gradient(135deg, #ffffff 30%, #58a6ff 70%, #a371f7 100%);
	578	+ background: linear-gradient(135deg, #ffffff 0%, #58a6ff 40%, #a371f7 70%, #58a6ff 100%);
	579	+ background-size: 200% auto;
370	580	-webkit-background-clip: text;
371	581	-webkit-text-fill-color: transparent;
	582	+ background-clip: text;
	583	+ animation: shimmer 4s linear infinite;
372	584	}
373	585
374	586	.hero-subtitle {
375		- font-size: clamp(1.05rem, 2vw, 1.25rem);
	587	+ font-size: clamp(1rem, 2vw, 1.2rem);
376	588	color: var(--text-secondary);
377		- max-width: 720px;
378		- margin: 0 auto 36px;
	589	+ max-width: 680px;
	590	+ margin: 0 auto 40px;
379	591	font-weight: 400;
380		- line-height: 1.6;
	592	+ line-height: 1.7;
	593	+ animation: fadeInUp 0.7s var(--ease-out-expo) 0.2s both;
381	594	}
382	595
383	596	.hero-actions {
@@ -386,7 +599,8 @@ body {
386	599	justify-content: center;
387	600	gap: 16px;
388	601	flex-wrap: wrap;
389		- margin-bottom: 32px;
	602	+ margin-bottom: 36px;
	603	+ animation: fadeInUp 0.7s var(--ease-out-expo) 0.3s both;
390	604	}
391	605
392	606	.clone-pill {
@@ -395,17 +609,19 @@ body {
395	609	background: var(--bg-surface);
396	610	border: 1px solid var(--border-default);
397	611	border-radius: 8px;
398		- padding: 6px 12px;
	612	+ padding: 8px 14px;
399	613	font-family: var(--font-mono);
400		- font-size: 0.85rem;
	614	+ font-size: 0.82rem;
401	615	color: var(--gh-blue);
402	616	cursor: pointer;
403		- transition: all 0.2s ease;
	617	+ transition: all 0.25s var(--ease-out-expo);
404	618	}
405	619
406	620	.clone-pill:hover {
407	621	border-color: var(--gh-blue);
408	622	background: var(--bg-surface-hover);
	623	+ box-shadow: 0 0 16px rgba(88, 166, 255, 0.15);
	624	+ transform: translateY(-1px);
409	625	}
410	626
411	627	.clone-pill svg {
@@ -423,17 +639,23 @@ body {
423	639	display: flex;
424	640	align-items: center;
425	641	justify-content: center;
426		- gap: 24px;
	642	+ gap: 28px;
427	643	flex-wrap: wrap;
428		- padding-top: 20px;
	644	+ padding-top: 16px;
	645	+ animation: fadeInUp 0.7s var(--ease-out-expo) 0.4s both;
429	646	}
430	647
431	648	.hero-badge-item {
432	649	display: flex;
433	650	align-items: center;
434	651	gap: 6px;
435		- font-size: 0.85rem;
	652	+ font-size: 0.82rem;
436	653	color: var(--text-muted);
	654	+ transition: color 0.2s ease;
	655	+}
	656	+
	657	+.hero-badge-item:hover {
	658	+ color: var(--text-secondary);
437	659	}
438	660
439	661	.hero-badge-item svg {
@@ -445,25 +667,31 @@ body {
445	667	/* ==============================================================================
446	668	Interactive Simulator Section
447	669	============================================================================== */
	670	+
448	671	.simulator-section {
449		- padding: 40px 0 80px;
	672	+ padding: 50px 0 90px;
450	673	}
451	674
452	675	.simulator-wrapper {
453	676	background: var(--bg-surface);
454	677	border: 1px solid var(--border-default);
455		- border-radius: 12px;
456		- box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.4);
	678	+ border-radius: 16px;
	679	+ box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 0, 0, 0.3);
457	680	overflow: hidden;
458	681	max-width: 1050px;
459	682	margin: 0 auto;
	683	+ transition: border-color 0.3s ease;
	684	+}
	685	+
	686	+.simulator-wrapper:hover {
	687	+ border-color: rgba(56, 139, 253, 0.2);
460	688	}
461	689
462	690	.simulator-header {
463	691	display: flex;
464	692	align-items: center;
465	693	justify-content: space-between;
466		- padding: 12px 20px;
	694	+ padding: 14px 20px;
467	695	background: var(--bg-canvas-subtle);
468	696	border-bottom: 1px solid var(--border-default);
469	697	}
@@ -477,20 +705,19 @@ body {
477	705	width: 12px;
478	706	height: 12px;
479	707	border-radius: 50%;
	708	+ transition: opacity 0.2s ease;
480	709	}
481	710
482		-.dot-red {
483		- background-color: #ff5f56;
484		-}
485		-.dot-yellow {
486		- background-color: #ffbd2e;
487		-}
488		-.dot-green {
489		- background-color: #27c93f;
	711	+.window-dots:hover .window-dot {
	712	+ opacity: 0.7;
490	713	}
491	714
	715	+.dot-red { background-color: #ff5f56; }
	716	+.dot-yellow { background-color: #ffbd2e; }
	717	+.dot-green { background-color: #27c93f; }
	718	+
492	719	.simulator-title {
493		- font-size: 0.85rem;
	720	+ font-size: 0.82rem;
494	721	font-family: var(--font-mono);
495	722	color: var(--text-secondary);
496	723	display: flex;
@@ -505,18 +732,19 @@ body {
505	732
506	733	.telemetry-pill {
507	734	font-family: var(--font-mono);
508		- font-size: 0.72rem;
	735	+ font-size: 0.7rem;
509	736	color: var(--gh-green-hover);
510	737	background: var(--gh-green-subtle);
511	738	border: 1px solid var(--gh-green-border);
512		- padding: 2px 8px;
	739	+ padding: 3px 10px;
513	740	border-radius: 9999px;
514	741	letter-spacing: 0.3px;
	742	+ animation: breathe 3s ease-in-out infinite;
515	743	}
516	744
517	745	.simulator-tabs {
518	746	display: flex;
519		- gap: 4px;
	747	+ gap: 2px;
520	748	padding: 8px 16px;
521	749	background: var(--bg-surface);
522	750	border-bottom: 1px solid var(--border-muted);
@@ -529,19 +757,34 @@ body {
529	757	border: 1px solid transparent;
530	758	color: var(--text-secondary);
531	759	padding: 8px 14px;
532		- border-radius: 6px;
	760	+ border-radius: 8px;
533	761	font-family: var(--font-mono);
534		- font-size: 0.82rem;
	762	+ font-size: 0.8rem;
535	763	cursor: pointer;
536	764	white-space: nowrap;
537		- transition: all 0.15s ease;
	765	+ transition: all 0.2s var(--ease-out-expo);
538	766	display: flex;
539	767	align-items: center;
540	768	gap: 8px;
	769	+ position: relative;
	770	+}
	771	+
	772	+.sim-tab-btn::after {
	773	+ content: "";
	774	+ position: absolute;
	775	+ bottom: -1px;
	776	+ left: 50%;
	777	+ transform: translateX(-50%);
	778	+ width: 0;
	779	+ height: 2px;
	780	+ background: var(--gh-blue);
	781	+ border-radius: 1px;
	782	+ transition: width 0.25s var(--ease-out-expo);
541	783	}
542	784
543	785	.sim-tab-btn svg {
544	786	flex-shrink: 0;
	787	+ transition: transform 0.2s ease;
545	788	}
546	789
547	790	.sim-tab-btn:hover {
@@ -549,6 +792,10 @@ body {
549	792	color: var(--text-primary);
550	793	}
551	794
	795	+.sim-tab-btn:hover svg {
	796	+ transform: scale(1.1);
	797	+}
	798	+
552	799	.sim-tab-btn.active {
553	800	background: var(--bg-surface-active);
554	801	color: var(--gh-blue);
@@ -556,10 +803,20 @@ body {
556	803	font-weight: 600;
557	804	}
558	805
	806	+.sim-tab-btn.active::after {
	807	+ width: 60%;
	808	+}
	809	+
559	810	.simulator-body {
560		- padding: 24px;
561		- min-height: 440px;
	811	+ padding: 28px;
	812	+ min-height: 460px;
562	813	background: var(--discord-dark);
	814	+ position: relative;
	815	+}
	816	+
	817	+/* Tab content animation */
	818	+.simulator-body > div {
	819	+ animation: slideIn 0.35s var(--ease-out-expo) both;
563	820	}
564	821
565	822	/* Discord Simulated Message */
@@ -578,7 +835,12 @@ body {
578	835	align-items: center;
579	836	justify-content: center;
580	837	flex-shrink: 0;
581		- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	838	+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	839	+ transition: transform 0.3s var(--ease-out-expo);
	840	+}
	841	+
	842	+.discord-avatar:hover {
	843	+ transform: scale(1.1) rotate(5deg);
582	844	}
583	845
584	846	.discord-avatar svg {
@@ -589,6 +851,7 @@ body {
589	851
590	852	.discord-content {
591	853	flex-grow: 1;
	854	+ min-width: 0;
592	855	}
593	856
594	857	.discord-header {
@@ -606,102 +869,110 @@ body {
606	869	.bot-tag {
607	870	background: var(--discord-blurple);
608	871	color: #ffffff;
609		- font-size: 0.65rem;
	872	+ font-size: 0.62rem;
610	873	font-weight: 700;
611		- padding: 1px 4px;
	874	+ padding: 1px 5px;
612	875	border-radius: 3px;
613	876	text-transform: uppercase;
	877	+ letter-spacing: 0.3px;
614	878	}
615	879
616	880	.message-time {
617		- font-size: 0.75rem;
	881	+ font-size: 0.72rem;
618	882	color: var(--text-muted);
619	883	}
620	884
621	885	.command-echo {
622	886	font-family: var(--font-mono);
623		- font-size: 0.8rem;
	887	+ font-size: 0.78rem;
624	888	color: var(--gh-blue);
625		- margin-bottom: 8px;
	889	+ margin-bottom: 10px;
	890	+ opacity: 0;
	891	+ animation: typing 0.4s ease-out 0.15s forwards;
626	892	}
627	893
628	894	/* Discord Embed */
629	895	.discord-embed {
630	896	background: var(--discord-embed-bg);
631	897	border-left: 4px solid var(--gh-green);
632		- border-radius: 4px;
633		- padding: 16px;
	898	+ border-radius: 4px 8px 8px 4px;
	899	+ padding: 18px;
634	900	max-width: 650px;
635	901	box-shadow: var(--shadow-sm);
636		- transition: border-color 0.2s ease;
	902	+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
	903	+}
	904	+
	905	+.discord-embed:hover {
	906	+ box-shadow: var(--shadow-md);
637	907	}
638	908
639	909	.embed-author {
640	910	display: flex;
641	911	align-items: center;
642	912	gap: 8px;
643		- font-size: 0.8rem;
	913	+ font-size: 0.78rem;
644	914	font-weight: 600;
645	915	color: var(--text-secondary);
646		- margin-bottom: 6px;
	916	+ margin-bottom: 8px;
647	917	}
648	918
649	919	.embed-title {
650	920	font-size: 1.05rem;
651	921	font-weight: 700;
652	922	color: var(--text-primary);
653		- margin-bottom: 8px;
	923	+ margin-bottom: 10px;
654	924	display: flex;
655	925	align-items: center;
656	926	gap: 8px;
657	927	}
658	928
659	929	.embed-desc {
660		- font-size: 0.88rem;
	930	+ font-size: 0.86rem;
661	931	color: var(--text-secondary);
662		- margin-bottom: 14px;
	932	+ margin-bottom: 16px;
663	933	white-space: pre-line;
	934	+ line-height: 1.6;
664	935	}
665	936
666	937	.embed-grid {
667	938	display: grid;
668	939	grid-template-columns: repeat(2, 1fr);
669		- gap: 12px;
670		- margin-bottom: 14px;
	940	+ gap: 14px;
	941	+ margin-bottom: 16px;
671	942	}
672	943
673	944	.embed-field-name {
674		- font-size: 0.75rem;
	945	+ font-size: 0.72rem;
675	946	text-transform: uppercase;
676	947	letter-spacing: 0.5px;
677	948	color: var(--text-muted);
678	949	font-weight: 700;
679		- margin-bottom: 2px;
	950	+ margin-bottom: 3px;
680	951	}
681	952
682	953	.embed-field-value {
683		- font-size: 0.9rem;
	954	+ font-size: 0.88rem;
684	955	color: var(--text-primary);
685	956	font-family: var(--font-mono);
686	957	}
687	958
688	959	.embed-code-block {
689	960	background: #111214;
690		- border-radius: 4px;
691		- padding: 10px 12px;
	961	+ border-radius: 6px;
	962	+ padding: 12px 14px;
692	963	font-family: var(--font-mono);
693		- font-size: 0.82rem;
	964	+ font-size: 0.8rem;
694	965	color: #dbdee1;
695	966	overflow-x: auto;
696		- margin: 10px 0;
697		- border: 1px solid rgba(255, 255, 255, 0.05);
698		- line-height: 1.45;
	967	+ margin: 12px 0;
	968	+ border: 1px solid rgba(255, 255, 255, 0.04);
	969	+ line-height: 1.5;
699	970	}
700	971
701	972	.discord-action-row {
702	973	display: flex;
703	974	gap: 8px;
704		- margin-top: 14px;
	975	+ margin-top: 16px;
705	976	flex-wrap: wrap;
706	977	}
707	978
@@ -712,17 +983,22 @@ body {
712	983	background: #4e5058;
713	984	color: #ffffff;
714	985	border: none;
715		- padding: 6px 14px;
716		- border-radius: 4px;
717		- font-size: 0.82rem;
	986	+ padding: 7px 14px;
	987	+ border-radius: 6px;
	988	+ font-size: 0.8rem;
718	989	font-weight: 600;
719	990	cursor: pointer;
720		- transition: all 0.15s ease;
	991	+ transition: all 0.2s var(--ease-out-expo);
721	992	font-family: inherit;
722	993	}
723	994
724	995	.discord-btn:hover {
725	996	background: #6d6f78;
	997	+ transform: translateY(-1px);
	998	+}
	999	+
	1000	+.discord-btn:active {
	1001	+ transform: translateY(0);
726	1002	}
727	1003
728	1004	.discord-btn-primary {
@@ -730,6 +1006,7 @@ body {
730	1006	}
731	1007	.discord-btn-primary:hover {
732	1008	background: var(--discord-blurple-hover);
	1009	+ box-shadow: 0 0 12px rgba(88, 101, 242, 0.3);
733	1010	}
734	1011
735	1012	.discord-btn-success {
@@ -737,6 +1014,7 @@ body {
737	1014	}
738	1015	.discord-btn-success:hover {
739	1016	background: var(--gh-green-hover);
	1017	+ box-shadow: 0 0 12px rgba(46, 160, 67, 0.3);
740	1018	}
741	1019
742	1020	.discord-btn-danger {
@@ -747,19 +1025,24 @@ body {
747	1025	}
748	1026
749	1027	.discord-btn-disabled {
750		- opacity: 0.5;
	1028	+ opacity: 0.4;
751	1029	cursor: not-allowed;
752	1030	}
	1031	+.discord-btn-disabled:hover {
	1032	+ transform: none;
	1033	+ box-shadow: none;
	1034	+}
753	1035
754	1036	/* Status Badges inside simulator */
755	1037	.status-tag {
756	1038	display: inline-flex;
757	1039	align-items: center;
758	1040	gap: 4px;
759		- padding: 2px 8px;
	1041	+ padding: 3px 10px;
760	1042	border-radius: 12px;
761		- font-size: 0.75rem;
	1043	+ font-size: 0.72rem;
762	1044	font-weight: 600;
	1045	+ transition: all 0.2s ease;
763	1046	}
764	1047
765	1048	.status-tag-green {
@@ -781,27 +1064,28 @@ body {
781	1064	}
782	1065
783	1066	/* ==============================================================================
784		- 12 Core Features Section
	1067	+ Features Section — 21 Commands
785	1068	============================================================================== */
	1069	+
786	1070	.features-section {
787		- padding: 80px 0;
	1071	+ padding: 90px 0;
788	1072	position: relative;
789	1073	}
790	1074
791	1075	.section-header {
792	1076	text-align: center;
793	1077	max-width: 700px;
794		- margin: 0 auto 50px;
	1078	+ margin: 0 auto 56px;
795	1079	}
796	1080
797	1081	.section-tag {
798	1082	font-family: var(--font-mono);
799		- font-size: 0.8rem;
	1083	+ font-size: 0.78rem;
800	1084	color: var(--gh-green);
801	1085	text-transform: uppercase;
802		- letter-spacing: 1px;
	1086	+ letter-spacing: 1.5px;
803	1087	font-weight: 600;
804		- margin-bottom: 8px;
	1088	+ margin-bottom: 10px;
805	1089	}
806	1090
807	1091	.section-title {
@@ -809,25 +1093,27 @@ body {
809	1093	font-weight: 800;
810	1094	letter-spacing: -1px;
811	1095	margin-bottom: 16px;
	1096	+ line-height: 1.2;
812	1097	}
813	1098
814	1099	.section-desc {
815	1100	color: var(--text-secondary);
816	1101	font-size: 1.05rem;
	1102	+ line-height: 1.6;
817	1103	}
818	1104
819	1105	.features-grid {
820	1106	display: grid;
821		- grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
822		- gap: 24px;
	1107	+ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	1108	+ gap: 20px;
823	1109	}
824	1110
825	1111	.feature-card {
826	1112	background: var(--bg-surface);
827	1113	border: 1px solid var(--border-default);
828		- border-radius: 10px;
829		- padding: 24px;
830		- transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	1114	+ border-radius: 12px;
	1115	+ padding: 26px;
	1116	+ transition: all 0.35s var(--ease-out-expo);
831	1117	position: relative;
832	1118	overflow: hidden;
833	1119	display: flex;
@@ -841,84 +1127,123 @@ body {
841	1127	left: 0;
842	1128	right: 0;
843	1129	height: 2px;
844		- background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
	1130	+ background: linear-gradient(90deg, transparent, var(--gh-blue), var(--gh-purple), transparent);
	1131	+ opacity: 0;
	1132	+ transform: translateX(-100%);
	1133	+ transition: opacity 0.4s ease, transform 0.6s var(--ease-out-expo);
	1134	+}
	1135	+
	1136	+.feature-card::after {
	1137	+ content: "";
	1138	+ position: absolute;
	1139	+ inset: 0;
	1140	+ background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(88, 166, 255, 0.06) 0%, transparent 50%);
845	1141	opacity: 0;
846	1142	transition: opacity 0.3s ease;
	1143	+ pointer-events: none;
847	1144	}
848	1145
849	1146	.feature-card:hover {
850		- border-color: var(--border-glow);
851		- transform: translateY(-4px);
852		- box-shadow: var(--shadow-md);
	1147	+ border-color: rgba(88, 166, 255, 0.3);
	1148	+ transform: translateY(-6px);
	1149	+ box-shadow: var(--shadow-md), 0 0 40px rgba(88, 166, 255, 0.08);
853	1150	}
854	1151
855	1152	.feature-card:hover::before {
856	1153	opacity: 1;
	1154	+ transform: translateX(0);
	1155	+}
	1156	+
	1157	+.feature-card:hover::after {
	1158	+ opacity: 1;
857	1159	}
858	1160
859	1161	.feature-top {
860	1162	display: flex;
861	1163	align-items: center;
862	1164	justify-content: space-between;
863		- margin-bottom: 16px;
	1165	+ margin-bottom: 18px;
864	1166	}
865	1167
866	1168	.feature-icon-box {
867	1169	width: 44px;
868	1170	height: 44px;
869		- border-radius: 8px;
	1171	+ border-radius: 10px;
870	1172	background: var(--bg-surface-active);
871	1173	border: 1px solid var(--border-muted);
872	1174	display: flex;
873	1175	align-items: center;
874	1176	justify-content: center;
	1177	+ transition: all 0.3s var(--ease-out-expo);
	1178	+}
	1179	+
	1180	+.feature-card:hover .feature-icon-box {
	1181	+ border-color: var(--gh-blue-border);
	1182	+ box-shadow: 0 0 16px rgba(88, 166, 255, 0.15);
875	1183	}
876	1184
877	1185	.feature-icon-box svg {
878	1186	width: 22px;
879	1187	height: 22px;
880	1188	fill: var(--gh-blue);
	1189	+ transition: transform 0.3s var(--ease-out-expo);
	1190	+}
	1191	+
	1192	+.feature-card:hover .feature-icon-box svg {
	1193	+ transform: scale(1.1);
881	1194	}
882	1195
883	1196	.feature-command-badge {
884	1197	font-family: var(--font-mono);
885		- font-size: 0.78rem;
886		- padding: 3px 8px;
	1198	+ font-size: 0.75rem;
	1199	+ padding: 4px 10px;
887	1200	background: var(--bg-canvas);
888	1201	border: 1px solid var(--border-muted);
889	1202	border-radius: 6px;
890	1203	color: var(--gh-green);
891	1204	font-weight: 600;
	1205	+ transition: all 0.25s ease;
	1206	+}
	1207	+
	1208	+.feature-card:hover .feature-command-badge {
	1209	+ border-color: var(--gh-green-border);
	1210	+ background: var(--gh-green-subtle);
892	1211	}
893	1212
894	1213	.feature-name {
895		- font-size: 1.2rem;
	1214	+ font-size: 1.15rem;
896	1215	font-weight: 700;
897	1216	margin-bottom: 10px;
898	1217	color: var(--text-primary);
	1218	+ letter-spacing: -0.3px;
899	1219	}
900	1220
901	1221	.feature-text {
902		- font-size: 0.92rem;
	1222	+ font-size: 0.88rem;
903	1223	color: var(--text-secondary);
904		- line-height: 1.55;
	1224	+ line-height: 1.6;
905	1225	margin-bottom: 16px;
906	1226	flex-grow: 1;
907	1227	}
908	1228
909	1229	.feature-bullets {
910	1230	list-style: none;
911		- font-size: 0.84rem;
	1231	+ font-size: 0.82rem;
912	1232	color: var(--text-muted);
913	1233	display: flex;
914	1234	flex-direction: column;
915		- gap: 6px;
	1235	+ gap: 7px;
916	1236	}
917	1237
918	1238	.feature-bullets li {
919	1239	display: flex;
920	1240	align-items: flex-start;
921	1241	gap: 8px;
	1242	+ transition: color 0.2s ease;
	1243	+}
	1244	+
	1245	+.feature-card:hover .feature-bullets li {
	1246	+ color: var(--text-secondary);
922	1247	}
923	1248
924	1249	.feature-bullets li svg {
@@ -926,17 +1251,30 @@ body {
926	1251	height: 14px;
927	1252	fill: var(--gh-blue);
928	1253	flex-shrink: 0;
929		- margin-top: 3px;
	1254	+ margin-top: 2px;
930	1255	}
931	1256
932	1257	/* ==============================================================================
933		- Killer Feature Highlights (Home, Connect, Why, Ask)
	1258	+ Killer Feature Highlights
934	1259	============================================================================== */
	1260	+
935	1261	.killer-section {
936		- padding: 80px 0;
937		- background: linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-canvas-subtle) 100%);
	1262	+ padding: 90px 0;
	1263	+ background: linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-canvas-subtle) 50%, var(--bg-canvas) 100%);
938	1264	border-top: 1px solid var(--border-muted);
939	1265	border-bottom: 1px solid var(--border-muted);
	1266	+ position: relative;
	1267	+}
	1268	+
	1269	+.killer-section::before {
	1270	+ content: "";
	1271	+ position: absolute;
	1272	+ top: 0;
	1273	+ left: 0;
	1274	+ right: 0;
	1275	+ height: 1px;
	1276	+ background: linear-gradient(90deg, transparent, var(--gh-blue-border), var(--gh-purple-border), transparent);
	1277	+ opacity: 0.5;
940	1278	}
941	1279
942	1280	.killer-grid {
@@ -948,114 +1286,152 @@ body {
948	1286	.killer-card {
949	1287	background: var(--bg-surface);
950	1288	border: 1px solid var(--border-default);
951		- border-radius: 8px;
952		- padding: 20px;
	1289	+ border-radius: 12px;
	1290	+ padding: 24px;
	1291	+ transition: all 0.35s var(--ease-out-expo);
	1292	+ position: relative;
	1293	+ overflow: hidden;
	1294	+}
	1295	+
	1296	+.killer-card:hover {
	1297	+ border-color: var(--gh-purple-border);
	1298	+ transform: translateY(-4px);
	1299	+ box-shadow: var(--shadow-md), var(--shadow-glow-purple);
953	1300	}
954	1301
955	1302	.killer-card-title {
956		- font-size: 1.1rem;
	1303	+ font-size: 1.05rem;
957	1304	font-weight: 700;
958		- margin-bottom: 8px;
	1305	+ margin-bottom: 10px;
959	1306	display: flex;
960	1307	align-items: center;
961		- gap: 8px;
	1308	+ gap: 10px;
962	1309	color: var(--text-primary);
963	1310	}
964	1311
965	1312	.killer-card-desc {
966		- font-size: 0.88rem;
	1313	+ font-size: 0.86rem;
967	1314	color: var(--text-secondary);
968		- line-height: 1.5;
	1315	+ line-height: 1.6;
969	1316	}
970	1317
971	1318	/* ==============================================================================
972	1319	Architecture & Security
973	1320	============================================================================== */
	1321	+
974	1322	.arch-section {
975		- padding: 80px 0;
	1323	+ padding: 90px 0;
976	1324	}
977	1325
978	1326	.arch-box {
979	1327	background: var(--bg-surface);
980	1328	border: 1px solid var(--border-default);
981		- border-radius: 12px;
982		- padding: 36px;
	1329	+ border-radius: 16px;
	1330	+ padding: 40px;
983	1331	margin-bottom: 40px;
	1332	+ transition: border-color 0.3s ease;
	1333	+}
	1334	+
	1335	+.arch-box:hover {
	1336	+ border-color: rgba(56, 139, 253, 0.2);
984	1337	}
985	1338
986	1339	.arch-flow-grid {
987	1340	display: grid;
988	1341	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
989	1342	gap: 20px;
990		- margin-top: 28px;
	1343	+ margin-top: 32px;
991	1344	}
992	1345
993	1346	.arch-flow-step {
994	1347	background: var(--bg-canvas);
995	1348	border: 1px solid var(--border-muted);
996		- border-radius: 8px;
997		- padding: 16px;
	1349	+ border-radius: 10px;
	1350	+ padding: 20px;
998	1351	position: relative;
	1352	+ transition: all 0.3s var(--ease-out-expo);
	1353	+}
	1354	+
	1355	+.arch-flow-step:hover {
	1356	+ border-color: var(--gh-blue-border);
	1357	+ transform: translateY(-3px);
	1358	+ box-shadow: var(--shadow-md);
999	1359	}
1000	1360
1001	1361	.step-num {
1002	1362	display: inline-block;
1003	1363	font-family: var(--font-mono);
1004		- font-size: 0.75rem;
	1364	+ font-size: 0.72rem;
1005	1365	background: var(--gh-blue-subtle);
1006	1366	color: var(--gh-blue);
1007	1367	border: 1px solid var(--gh-blue-border);
1008	1368	border-radius: 4px;
1009		- padding: 2px 6px;
1010		- margin-bottom: 8px;
	1369	+ padding: 2px 8px;
	1370	+ margin-bottom: 10px;
	1371	+ letter-spacing: 0.5px;
1011	1372	}
1012	1373
1013	1374	.step-title {
1014		- font-size: 0.98rem;
	1375	+ font-size: 0.95rem;
1015	1376	font-weight: 700;
1016	1377	margin-bottom: 6px;
1017	1378	}
1018	1379
1019	1380	.step-desc {
1020		- font-size: 0.84rem;
	1381	+ font-size: 0.82rem;
1021	1382	color: var(--text-secondary);
	1383	+ line-height: 1.5;
1022	1384	}
1023	1385
1024	1386	/* Quick Start Terminal Walkthrough */
1025	1387	.install-section {
1026		- padding: 60px 0 90px;
	1388	+ padding: 70px 0 100px;
1027	1389	}
1028	1390
1029	1391	.terminal-box {
1030	1392	background: #0d1117;
1031	1393	border: 1px solid var(--border-default);
1032		- border-radius: 8px;
	1394	+ border-radius: 12px;
1033	1395	overflow: hidden;
1034	1396	box-shadow: var(--shadow-md);
1035		- margin-top: 24px;
	1397	+ margin-top: 28px;
	1398	+ transition: border-color 0.3s ease;
	1399	+}
	1400	+
	1401	+.terminal-box:hover {
	1402	+ border-color: rgba(56, 139, 253, 0.2);
1036	1403	}
1037	1404
1038	1405	.terminal-topbar {
1039	1406	display: flex;
1040	1407	align-items: center;
1041	1408	justify-content: space-between;
1042		- padding: 10px 16px;
	1409	+ padding: 12px 18px;
1043	1410	background: #161b22;
1044	1411	border-bottom: 1px solid var(--border-default);
1045	1412	}
1046	1413
1047	1414	.terminal-content {
1048		- padding: 20px;
	1415	+ padding: 24px;
1049	1416	font-family: var(--font-mono);
1050		- font-size: 0.9rem;
1051		- line-height: 1.7;
	1417	+ font-size: 0.88rem;
	1418	+ line-height: 1.8;
1052	1419	}
1053	1420
1054	1421	.terminal-line {
1055	1422	display: flex;
1056	1423	align-items: center;
1057	1424	justify-content: space-between;
1058		- margin-bottom: 12px;
	1425	+ margin-bottom: 14px;
	1426	+ transition: background 0.2s ease;
	1427	+ padding: 2px 4px;
	1428	+ border-radius: 4px;
	1429	+ margin-left: -4px;
	1430	+ margin-right: -4px;
	1431	+}
	1432	+
	1433	+.terminal-line:hover {
	1434	+ background: rgba(255, 255, 255, 0.02);
1059	1435	}
1060	1436
1061	1437	.terminal-cmd {
@@ -1065,7 +1441,7 @@ body {
1065	1441	.terminal-comment {
1066	1442	color: var(--text-muted);
1067	1443	font-style: italic;
1068		- font-size: 0.82rem;
	1444	+ font-size: 0.8rem;
1069	1445	}
1070	1446
1071	1447	.terminal-copy-btn {
@@ -1073,9 +1449,9 @@ body {
1073	1449	border: none;
1074	1450	color: var(--text-muted);
1075	1451	cursor: pointer;
1076		- padding: 4px;
1077		- border-radius: 4px;
1078		- transition: color 0.15s ease;
	1452	+ padding: 6px;
	1453	+ border-radius: 6px;
	1454	+ transition: all 0.2s ease;
1079	1455	}
1080	1456
1081	1457	.terminal-copy-btn:hover {
@@ -1083,67 +1459,89 @@ body {
1083	1459	background: var(--bg-surface-active);
1084	1460	}
1085	1461
1086		-/* Footer */
	1462	+/* ==============================================================================
	1463	+ Footer
	1464	+ ============================================================================== */
	1465	+
1087	1466	.footer {
1088	1467	border-top: 1px solid var(--border-muted);
1089	1468	background: var(--bg-canvas-subtle);
1090		- padding: 60px 0 30px;
	1469	+ padding: 64px 0 32px;
	1470	+ position: relative;
	1471	+}
	1472	+
	1473	+.footer::before {
	1474	+ content: "";
	1475	+ position: absolute;
	1476	+ top: 0;
	1477	+ left: 0;
	1478	+ right: 0;
	1479	+ height: 1px;
	1480	+ background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
	1481	+ opacity: 0.3;
1091	1482	}
1092	1483
1093	1484	.footer-grid {
1094	1485	display: grid;
1095	1486	grid-template-columns: 2fr 1fr 1fr 1fr;
1096	1487	gap: 40px;
1097		- margin-bottom: 40px;
	1488	+ margin-bottom: 44px;
1098	1489	}
1099	1490
1100	1491	.footer-col-desc {
1101	1492	color: var(--text-secondary);
1102		- font-size: 0.88rem;
1103		- margin-top: 12px;
	1493	+ font-size: 0.86rem;
	1494	+ margin-top: 14px;
1104	1495	max-width: 320px;
	1496	+ line-height: 1.6;
1105	1497	}
1106	1498
1107	1499	.footer-col-title {
1108		- font-size: 0.9rem;
	1500	+ font-size: 0.82rem;
1109	1501	font-weight: 700;
1110	1502	text-transform: uppercase;
1111		- letter-spacing: 0.5px;
	1503	+ letter-spacing: 0.8px;
1112	1504	color: var(--text-primary);
1113		- margin-bottom: 16px;
	1505	+ margin-bottom: 18px;
1114	1506	}
1115	1507
1116	1508	.footer-col-links {
1117	1509	list-style: none;
1118	1510	display: flex;
1119	1511	flex-direction: column;
1120		- gap: 10px;
	1512	+ gap: 12px;
1121	1513	}
1122	1514
1123	1515	.footer-col-links a {
1124	1516	color: var(--text-secondary);
1125	1517	text-decoration: none;
1126		- font-size: 0.88rem;
1127		- transition: color 0.15s ease;
	1518	+ font-size: 0.86rem;
	1519	+ transition: all 0.2s ease;
	1520	+ position: relative;
	1521	+ display: inline-block;
1128	1522	}
1129	1523
1130	1524	.footer-col-links a:hover {
1131	1525	color: var(--gh-blue);
	1526	+ transform: translateX(3px);
1132	1527	}
1133	1528
1134	1529	.footer-bottom {
1135		- padding-top: 24px;
	1530	+ padding-top: 28px;
1136	1531	border-top: 1px solid var(--border-muted);
1137	1532	display: flex;
1138	1533	align-items: center;
1139	1534	justify-content: space-between;
1140		- font-size: 0.82rem;
	1535	+ font-size: 0.8rem;
1141	1536	color: var(--text-muted);
1142	1537	flex-wrap: wrap;
1143		- gap: 12px;
	1538	+ gap: 14px;
1144	1539	}
1145	1540
1146		-/* Responsive */
	1541	+/* ==============================================================================
	1542	+ Responsive Design
	1543	+ ============================================================================== */
	1544	+
1147	1545	@media (max-width: 900px) {
1148	1546	.nav-links {
1149	1547	display: none;
@@ -1154,16 +1552,108 @@ body {
1154	1552	.footer-grid {
1155	1553	grid-template-columns: 1fr 1fr;
1156	1554	}
	1555	+ .arch-box {
	1556	+ padding: 28px;
	1557	+ }
1157	1558	}
1158	1559
1159		-@media (max-width: 600px) {
	1560	+@media (max-width: 640px) {
	1561	+ .hero-section {
	1562	+ padding: 70px 0 50px;
	1563	+ }
1160	1564	.features-grid {
1161	1565	grid-template-columns: 1fr;
1162	1566	}
1163	1567	.footer-grid {
1164	1568	grid-template-columns: 1fr;
	1569	+ gap: 28px;
1165	1570	}
1166	1571	.embed-grid {
1167	1572	grid-template-columns: 1fr;
1168	1573	}
	1574	+ .hero-badges {
	1575	+ gap: 16px;
	1576	+ }
	1577	+ .simulator-body {
	1578	+ padding: 18px;
	1579	+ }
	1580	+ .arch-box {
	1581	+ padding: 20px;
	1582	+ }
	1583	+ .killer-grid {
	1584	+ grid-template-columns: 1fr;
	1585	+ }
	1586	+}
	1587	+
	1588	+@media (max-width: 480px) {
	1589	+ .hero-title {
	1590	+ letter-spacing: -1px;
	1591	+ }
	1592	+ .hero-actions {
	1593	+ flex-direction: column;
	1594	+ width: 100%;
	1595	+ padding: 0 16px;
	1596	+ }
	1597	+ .hero-actions .btn {
	1598	+ width: 100%;
	1599	+ }
	1600	+ .clone-pill {
	1601	+ font-size: 0.75rem;
	1602	+ padding: 6px 10px;
	1603	+ }
	1604	+ .discord-message {
	1605	+ gap: 12px;
	1606	+ }
	1607	+ .discord-avatar {
	1608	+ width: 36px;
	1609	+ height: 36px;
	1610	+ }
	1611	+}
	1612	+
	1613	+/* ==============================================================================
	1614	+ Utility & Polish
	1615	+ ============================================================================== */
	1616	+
	1617	+::selection {
	1618	+ background: rgba(88, 166, 255, 0.3);
	1619	+ color: #ffffff;
	1620	+}
	1621	+
	1622	+/* Scrollbar styling */
	1623	+::-webkit-scrollbar {
	1624	+ width: 8px;
	1625	+ height: 8px;
	1626	+}
	1627	+
	1628	+::-webkit-scrollbar-track {
	1629	+ background: var(--bg-canvas);
	1630	+}
	1631	+
	1632	+::-webkit-scrollbar-thumb {
	1633	+ background: var(--border-default);
	1634	+ border-radius: 4px;
	1635	+}
	1636	+
	1637	+::-webkit-scrollbar-thumb:hover {
	1638	+ background: var(--text-muted);
	1639	+}
	1640	+
	1641	+/* Focus visible for accessibility */
	1642	+:focus-visible {
	1643	+ outline: 2px solid var(--gh-blue);
	1644	+ outline-offset: 2px;
	1645	+ border-radius: 4px;
	1646	+}
	1647	+
	1648	+/* Reduced motion */
	1649	+@media (prefers-reduced-motion: reduce) {
	1650	+ , ::before, *::after {
	1651	+ animation-duration: 0.01ms !important;
	1652	+ animation-iteration-count: 1 !important;
	1653	+ transition-duration: 0.01ms !important;
	1654	+ }
	1655	+ .reveal {
	1656	+ opacity: 1;
	1657	+ transform: none;
	1658	+ }
1169	1659	}
1170	1660