From 6ad20c8f45ccb50cad3af1939a4f1b895469af75 Mon Sep 17 00:00:00 2001
From: Simon <10131203+gaomeng1900@users.noreply.github.com>
Date: Fri, 27 Feb 2026 21:30:21 +0800
Subject: [PATCH] feat(website): styling

---
 .../website/src/components/ui/magic-card.tsx  |   2 +-
 .../src/pages/home/FeaturesSection.tsx        | 348 +++++++++++-------
 .../website/src/pages/home/HeroSection.tsx    |   4 +-
 .../src/pages/home/ScenariosSection.tsx       |  54 ++-
 4 files changed, 232 insertions(+), 176 deletions(-)

diff --git a/packages/website/src/components/ui/magic-card.tsx b/packages/website/src/components/ui/magic-card.tsx
index b44dcf8..d040937 100644
--- a/packages/website/src/components/ui/magic-card.tsx
+++ b/packages/website/src/components/ui/magic-card.tsx
@@ -85,7 +85,7 @@ export function MagicCard({
           `,
 				}}
 			/>
-			<div className="bg-background absolute inset-px rounded-[inherit]" />
+			<div className="absolute inset-px rounded-[inherit] bg-white dark:bg-neutral-900" />
 			<motion.div
 				className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
 				style={{
diff --git a/packages/website/src/pages/home/FeaturesSection.tsx b/packages/website/src/pages/home/FeaturesSection.tsx
index 58cf94f..0c7a2b4 100644
--- a/packages/website/src/pages/home/FeaturesSection.tsx
+++ b/packages/website/src/pages/home/FeaturesSection.tsx
@@ -1,163 +1,229 @@
 import { Bot, Box, MessageSquare, Shield, Sparkles, Users } from 'lucide-react'
 
 import { BlurFade } from '../../components/ui/blur-fade'
-import { Marquee } from '../../components/ui/marquee'
+import { Highlighter } from '../../components/ui/highlighter'
+import { MagicCard } from '../../components/ui/magic-card'
 import { Particles } from '../../components/ui/particles'
 import { useLanguage } from '../../i18n/context'
 
+// Word-cloud style: each item has a position (%), size, opacity, and color for a scattered look
+const LLM_CLOUD: {
+	name: string
+	color: string
+	x: number
+	y: number
+	size: number
+	opacity: number
+}[] = [
+	{ name: 'OpenAI', color: '#10b981', x: 18, y: 22, size: 1.5, opacity: 1 },
+	{ name: 'Claude', color: '#f97316', x: 62, y: 15, size: 1.35, opacity: 0.95 },
+	{ name: 'Qwen', color: '#8b5cf6', x: 38, y: 50, size: 1.8, opacity: 0.9 },
+	{ name: 'Gemini', color: '#3b82f6', x: 68, y: 48, size: 1.2, opacity: 0.85 },
+	{ name: 'DeepSeek', color: '#06b6d4', x: 10, y: 65, size: 1.1, opacity: 0.8 },
+	{ name: 'Grok', color: '#f43f5e', x: 52, y: 78, size: 1.0, opacity: 0.75 },
+	{ name: 'Ollama', color: '#9ca3af', x: 82, y: 25, size: 1.1, opacity: 0.8 },
+	{ name: 'Kimi', color: '#14b8a6', x: 30, y: 82, size: 0.85, opacity: 0.6 },
+	{ name: 'GLM', color: '#f59e0b', x: 70, y: 72, size: 0.85, opacity: 0.55 },
+	{ name: 'LLaMA', color: '#60a5fa', x: 88, y: 70, size: 0.8, opacity: 0.45 },
+]
+
+const CARD_HEIGHT = 'h-72'
+
 export default function FeaturesSection() {
 	const { isZh } = useLanguage()
 
 	return (
 		<section className="px-6 py-14" aria-labelledby="features-heading">
 			<div className="max-w-6xl mx-auto">
-				<div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[22rem]">
-					{/* Zero Infrastructure (2-col) */}
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[18rem]">
+					{/* Row 1: Zero Infrastructure (2col) + Privacy (1col) */}
 					<BlurFade inView className="col-span-1 md:col-span-2">
-						<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
-							<div className="flex-1 p-8 flex flex-col justify-center">
-								<div className="space-y-3 mb-6">
-									{[
-										'pip install browser-use playwright',
-										'docker run -p 3000:3000 playwright-mcp',
-										'const browser = await chromium.launch()',
-									].map((cmd) => (
-										<div
-											key={cmd}
-											className="flex items-center gap-2.5 font-mono text-sm text-gray-400 dark:text-gray-600 line-through decoration-red-400/40 truncate"
-										>
-											<span className="text-red-400/60 text-xs shrink-0">✗</span>
-											{cmd}
+						<MagicCard
+							className="h-full rounded-2xl"
+							gradientFrom="#3b82f6"
+							gradientTo="#06b6d4"
+							gradientColor="#3b82f6"
+							gradientOpacity={0.15}
+						>
+							<div className={`flex ${CARD_HEIGHT} flex-col`}>
+								<div className="flex-1 p-7 flex flex-col justify-center">
+									<div className="space-y-2.5 mb-5">
+										{[
+											'pip install browser-use playwright',
+											'docker run -p 3000:3000 playwright-mcp',
+											'const browser = await chromium.launch()',
+										].map((cmd) => (
+											<div
+												key={cmd}
+												className="font-mono text-sm text-white-400 dark:text-gray-300 truncate"
+											>
+												<Highlighter
+													action="strike-through"
+													color="#ef4444aa"
+													strokeWidth={1.5}
+													// multiline={false}
+													isView
+												>
+													{cmd}
+												</Highlighter>
+											</div>
+										))}
+									</div>
+									<div className="bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200/60 dark:border-emerald-700/40 rounded-xl px-5 py-3 font-mono text-sm text-emerald-700 dark:text-emerald-400 flex items-center gap-2.5">
+										<span className="text-emerald-500 text-xs shrink-0">✓</span>
+										{'<script src="page-agent.js"></script>'}
+									</div>
+								</div>
+								<div className="px-7 pb-5">
+									<div className="flex items-center gap-2.5 mb-1">
+										<Box className="w-5 h-5 text-blue-500" />
+										<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
+											{isZh ? '零基建集成' : 'Zero Infrastructure'}
+										</h3>
+									</div>
+									<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
+										{isZh
+											? '无需 Python、无头浏览器、服务端部署。一行 script 标签搞定。'
+											: "No Python. No headless browser. No server. One script tag — that's it."}
+									</p>
+								</div>
+							</div>
+						</MagicCard>
+					</BlurFade>
+
+					<BlurFade inView delay={0.1} className="col-span-1">
+						<MagicCard
+							className="h-full rounded-2xl"
+							gradientFrom="#8b5cf6"
+							gradientTo="#a855f7"
+							gradientColor="#8b5cf6"
+							gradientOpacity={0.12}
+						>
+							<div className={`flex ${CARD_HEIGHT} flex-col`}>
+								<div className="flex-1 relative overflow-hidden">
+									<Particles
+										className="absolute inset-0"
+										quantity={40}
+										staticity={50}
+										ease={80}
+										color="#8b5cf6"
+									/>
+									<div className="absolute inset-0 flex items-center justify-center">
+										<div className="w-16 h-16 rounded-2xl bg-purple-500/10 dark:bg-purple-500/20 backdrop-blur-sm flex items-center justify-center ring-1 ring-purple-500/20">
+											<Shield className="w-8 h-8 text-purple-500" strokeWidth={1.5} />
 										</div>
+									</div>
+								</div>
+								<div className="px-6 pb-5">
+									<h3 className="font-semibold text-lg text-gray-900 dark:text-white mb-1">
+										{isZh ? '隐私优先' : 'Privacy by Default'}
+									</h3>
+									<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
+										{isZh
+											? '浏览器内运行，数据完全由你掌控。'
+											: 'Runs in the browser. You control your data, always.'}
+									</p>
+								</div>
+							</div>
+						</MagicCard>
+					</BlurFade>
+
+					{/* Row 2: Human-in-the-Loop (1col) + LLM (2col) */}
+					<BlurFade inView delay={0.15} className="col-span-1">
+						<MagicCard
+							className="h-full rounded-2xl"
+							gradientFrom="#3b82f6"
+							gradientTo="#8b5cf6"
+							gradientColor="#6366f1"
+							gradientOpacity={0.12}
+						>
+							<div className={`flex ${CARD_HEIGHT} flex-col`}>
+								<div className="flex-1 p-5 flex flex-col justify-center max-w-xs mx-auto w-full">
+									<div className="flex gap-2 mb-2.5">
+										<div className="shrink-0 w-6 h-6 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
+											<Bot className="w-3.5 h-3.5 text-purple-600 dark:text-purple-400" />
+										</div>
+										<div className="bg-gray-100 dark:bg-white/10 rounded-2xl rounded-tl-md px-3.5 py-2 text-sm text-gray-700 dark:text-gray-200">
+											{isZh ? '找到 3 条匹配记录。选择哪一条？' : 'Found 3 matches. Which one?'}
+										</div>
+									</div>
+									<div className="flex gap-2 justify-end mb-2.5">
+										<div className="bg-blue-500 rounded-2xl rounded-tr-md px-3.5 py-2 text-sm text-white">
+											{isZh ? '第二条' : 'The second one.'}
+										</div>
+										<div className="shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
+											<Users className="w-3.5 h-3.5 text-blue-600 dark:text-blue-400" />
+										</div>
+									</div>
+									<div className="flex gap-2">
+										<div className="shrink-0 w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-emerald-600 dark:text-emerald-400 text-xs font-bold">
+											✓
+										</div>
+										<div className="bg-gray-100 dark:bg-white/10 rounded-2xl rounded-tl-md px-3.5 py-2 text-sm text-gray-700 dark:text-gray-200">
+											{isZh ? '已选择并提交！' : 'Done! Selected and submitted.'}
+										</div>
+									</div>
+								</div>
+								<div className="px-5 pb-5">
+									<div className="flex items-center gap-2.5 mb-1">
+										<MessageSquare className="w-5 h-5 text-blue-500" />
+										<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
+											{isZh ? '人机协同' : 'Human-in-the-Loop'}
+										</h3>
+									</div>
+									<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
+										{isZh
+											? '内置协作面板，AI 操作前先确认——不是盲目自动化。'
+											: 'Built-in collaborative panel. Agent asks before acting — not blind automation.'}
+									</p>
+								</div>
+							</div>
+						</MagicCard>
+					</BlurFade>
+
+					<BlurFade inView delay={0.2} className="col-span-1 md:col-span-2">
+						<MagicCard
+							className="h-full rounded-2xl"
+							gradientFrom="#f59e0b"
+							gradientTo="#f97316"
+							gradientColor="#f59e0b"
+							gradientOpacity={0.12}
+						>
+							<div className={`flex ${CARD_HEIGHT} flex-col`}>
+								<div className="flex-1 overflow-hidden relative">
+									{LLM_CLOUD.map((item) => (
+										<span
+											key={item.name}
+											className="absolute font-semibold whitespace-nowrap select-none"
+											style={{
+												left: `${item.x}%`,
+												top: `${item.y}%`,
+												fontSize: `${item.size}rem`,
+												color: item.color,
+												opacity: item.opacity,
+												transform: 'translate(-50%, -50%)',
+												textShadow: `0 0 80px ${item.color}99`,
+											}}
+										>
+											{item.name}
+										</span>
 									))}
 								</div>
-								<div className="bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200/60 dark:border-emerald-800/30 rounded-xl px-5 py-3.5 font-mono text-sm text-emerald-700 dark:text-emerald-400 flex items-center gap-2.5">
-									<span className="text-emerald-500 text-xs shrink-0">✓</span>
-									{'<script src="page-agent.js"></script>'}
-								</div>
-							</div>
-							<div className="px-8 pb-6">
-								<div className="flex items-center gap-2.5 mb-1.5">
-									<Box className="w-5 h-5 text-blue-500" />
-									<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
-										{isZh ? '零基建集成' : 'Zero Infrastructure'}
-									</h3>
-								</div>
-								<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-									{isZh
-										? '无需 Python、无头浏览器、服务端部署。一行 script 标签搞定。'
-										: "No Python. No headless browser. No server. One script tag — that's it."}
-								</p>
-							</div>
-						</div>
-					</BlurFade>
-
-					{/* Privacy by Default (1-col) */}
-					<BlurFade inView delay={0.1} className="col-span-1">
-						<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
-							<div className="flex-1 relative overflow-hidden">
-								<Particles
-									className="absolute inset-0"
-									quantity={40}
-									staticity={50}
-									ease={80}
-									color="#8b5cf6"
-								/>
-								<div className="absolute inset-0 flex items-center justify-center">
-									<div className="w-20 h-20 rounded-2xl bg-purple-500/10 dark:bg-purple-500/20 backdrop-blur-sm flex items-center justify-center ring-1 ring-purple-500/20">
-										<Shield className="w-10 h-10 text-purple-500" strokeWidth={1.5} />
+								<div className="px-7 pb-5">
+									<div className="flex items-center gap-2.5 mb-1">
+										<Sparkles className="w-5 h-5 text-amber-500" />
+										<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
+											{isZh ? '兼容多种 LLM' : 'Bring Your Own LLMs'}
+										</h3>
 									</div>
+									<p className="text-sm text-gray-500 dark:text-gray-300 leading-relaxed">
+										{isZh
+											? 'OpenAI、Claude、DeepSeek、Qwen 等，或通过 Ollama 完全离线。'
+											: 'OpenAI, Claude, DeepSeek, Qwen, and more — or fully offline via Ollama.'}
+									</p>
 								</div>
 							</div>
-							<div className="px-6 pb-6">
-								<h3 className="font-semibold text-lg text-gray-900 dark:text-white mb-1.5">
-									{isZh ? '隐私优先' : 'Privacy by Default'}
-								</h3>
-								<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-									{isZh
-										? '浏览器内运行，数据完全由你掌控。'
-										: 'Runs in the browser. You control your data, always.'}
-								</p>
-							</div>
-						</div>
-					</BlurFade>
-
-					{/* Any LLM (1-col) */}
-					<BlurFade inView delay={0.15} className="col-span-1">
-						<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
-							<div className="flex-1 relative overflow-hidden">
-								<Marquee vertical pauseOnHover className="h-full [--duration:25s] [--gap:0.75rem]">
-									{['OpenAI', 'Claude', 'DeepSeek', 'Qwen', 'Gemini', 'GLM', 'Ollama', 'Groq'].map(
-										(name) => (
-											<div
-												key={name}
-												className="mx-auto rounded-full bg-gray-100 dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 ring-1 ring-gray-200/50 dark:ring-white/5"
-											>
-												{name}
-											</div>
-										)
-									)}
-								</Marquee>
-							</div>
-							<div className="px-6 pb-6">
-								<div className="flex items-center gap-2.5 mb-1.5">
-									<Sparkles className="w-5 h-5 text-amber-500" />
-									<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
-										{isZh ? '兼容多种 LLM' : 'Bring Your Own LLMs'}
-									</h3>
-								</div>
-								<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-									{isZh
-										? 'OpenAI、Claude、DeepSeek、Qwen 等，或通过 Ollama 完全离线。'
-										: 'OpenAI, Claude, DeepSeek, Qwen, and more — or fully offline via Ollama.'}
-								</p>
-							</div>
-						</div>
-					</BlurFade>
-
-					{/* Human-in-the-Loop (2-col) */}
-					<BlurFade inView delay={0.2} className="col-span-1 md:col-span-2">
-						<div className="group relative h-full overflow-hidden rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-gray-200/60 dark:border-white/8 [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] hover:shadow-xl transition-all duration-500 flex flex-col">
-							<div className="flex-1 p-8 flex flex-col justify-center max-w-md mx-auto w-full">
-								<div className="flex gap-2.5 mb-3">
-									<div className="shrink-0 w-7 h-7 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
-										<Bot className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-									</div>
-									<div className="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-tl-md px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300">
-										{isZh ? '找到 3 条匹配记录。选择哪一条？' : 'Found 3 matches. Which one?'}
-									</div>
-								</div>
-								<div className="flex gap-2.5 justify-end mb-3">
-									<div className="bg-blue-500 rounded-2xl rounded-tr-md px-4 py-2.5 text-sm text-white">
-										{isZh ? '第二条' : 'The second one.'}
-									</div>
-									<div className="shrink-0 w-7 h-7 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
-										<Users className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-									</div>
-								</div>
-								<div className="flex gap-2.5">
-									<div className="shrink-0 w-7 h-7 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-emerald-600 dark:text-emerald-400 text-xs font-bold">
-										✓
-									</div>
-									<div className="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-tl-md px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300">
-										{isZh ? '已选择并提交！' : 'Done! Selected and submitted.'}
-									</div>
-								</div>
-							</div>
-							<div className="px-8 pb-6">
-								<div className="flex items-center gap-2.5 mb-1.5">
-									<MessageSquare className="w-5 h-5 text-blue-500" />
-									<h3 className="font-semibold text-lg text-gray-900 dark:text-white">
-										{isZh ? '人机协同' : 'Human-in-the-Loop'}
-									</h3>
-								</div>
-								<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-									{isZh
-										? '内置协作面板，AI 操作前先确认——不是盲目自动化。'
-										: 'Built-in collaborative panel. Agent asks before acting — not blind automation.'}
-								</p>
-							</div>
-						</div>
+						</MagicCard>
 					</BlurFade>
 				</div>
 			</div>
diff --git a/packages/website/src/pages/home/HeroSection.tsx b/packages/website/src/pages/home/HeroSection.tsx
index a68cbdb..fd5e381 100644
--- a/packages/website/src/pages/home/HeroSection.tsx
+++ b/packages/website/src/pages/home/HeroSection.tsx
@@ -170,7 +170,7 @@ export default function HeroSection() {
 								<div className="flex border-b border-gray-200 dark:border-gray-700">
 									<button
 										onClick={() => setActiveTab('try')}
-										className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tl-2xl ${
+										className={`cursor-pointer flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tl-2xl ${
 											activeTab === 'try'
 												? 'bg-linear-to-r from-blue-50 to-purple-50 dark:from-blue-900/30 dark:to-purple-900/30 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500'
 												: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
@@ -180,7 +180,7 @@ export default function HeroSection() {
 									</button>
 									<button
 										onClick={() => setActiveTab('other')}
-										className={`flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tr-2xl ${
+										className={`cursor-pointer flex-1 px-4 py-4 text-lg font-medium transition-colors duration-200 rounded-tr-2xl ${
 											activeTab === 'other'
 												? 'bg-linear-to-r from-green-50 to-blue-50 dark:from-green-900/30 dark:to-blue-900/30 text-green-700 dark:text-green-300 border-b-2 border-green-500'
 												: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
diff --git a/packages/website/src/pages/home/ScenariosSection.tsx b/packages/website/src/pages/home/ScenariosSection.tsx
index 2555722..ef4b1b0 100644
--- a/packages/website/src/pages/home/ScenariosSection.tsx
+++ b/packages/website/src/pages/home/ScenariosSection.tsx
@@ -8,10 +8,7 @@ export default function ScenariosSection() {
 	const { isZh } = useLanguage()
 
 	return (
-		<section
-			className="px-6 py-16 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm"
-			aria-labelledby="scenarios-heading"
-		>
+		<section className="px-6 py-16" aria-labelledby="scenarios-heading">
 			<div className="max-w-6xl mx-auto">
 				<BlurFade inView>
 					<div className="text-center mb-12">
@@ -25,9 +22,9 @@ export default function ScenariosSection() {
 				</BlurFade>
 
 				<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-					{/* Scenario 1: SaaS AI Copilot */}
+					{/* SaaS AI Copilot */}
 					<BlurFade inView delay={0.05}>
-						<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-blue-50 to-white dark:from-blue-950/20 dark:to-gray-900 border border-blue-100/80 dark:border-blue-900/30 hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
+						<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-blue-50 to-white dark:from-blue-950/40 dark:to-gray-800 border border-blue-200/80 dark:border-blue-800/50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
 							<div className="p-6 pb-4">
 								<div className="rounded-xl bg-gray-950 p-4 font-mono text-xs leading-6 text-gray-300 overflow-hidden shadow-inner">
 									<div>
@@ -60,7 +57,7 @@ export default function ScenariosSection() {
 										{isZh ? 'SaaS AI 副驾驶' : 'SaaS AI Copilot'}
 									</h3>
 								</div>
-								<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+								<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
 									{isZh
 										? '几小时内为你的产品加上 AI 副驾驶，不需要重写后端。'
 										: 'Ship an AI copilot in your product in hours, not months. No backend rewrite needed.'}
@@ -69,12 +66,12 @@ export default function ScenariosSection() {
 						</div>
 					</BlurFade>
 
-					{/* Scenario 2: Smart Form Filling */}
+					{/* Smart Form Filling */}
 					<BlurFade inView delay={0.1}>
-						<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-amber-50 to-white dark:from-amber-950/20 dark:to-gray-900 border border-amber-100/80 dark:border-amber-900/30 hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
+						<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-amber-50 to-white dark:from-amber-950/40 dark:to-gray-800 border border-amber-200/80 dark:border-amber-800/50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
 							<div className="p-6 pb-4">
-								<div className="rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 shadow-inner space-y-2.5">
-									<div className="flex items-center gap-2 text-xs text-gray-500 bg-amber-50 dark:bg-amber-900/20 rounded-lg px-3 py-2 border border-amber-200/50 dark:border-amber-800/30">
+								<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 shadow-inner space-y-2.5">
+									<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 bg-amber-50 dark:bg-amber-900/30 rounded-lg px-3 py-2 border border-amber-200/50 dark:border-amber-700/40">
 										<span>🪄</span>
 										<span className="italic">
 											{isZh
@@ -83,22 +80,15 @@ export default function ScenariosSection() {
 										</span>
 									</div>
 									{[
-										{
-											label: isZh ? '姓名' : 'Name',
-											value: 'John Smith',
-										},
-										{
-											label: isZh ? '金额' : 'Amount',
-											value: '$342.50',
-										},
-										{
-											label: isZh ? '类目' : 'Category',
-											value: 'Travel',
-										},
+										{ label: isZh ? '姓名' : 'Name', value: 'John Smith' },
+										{ label: isZh ? '金额' : 'Amount', value: '$342.50' },
+										{ label: isZh ? '类目' : 'Category', value: 'Travel' },
 									].map((field) => (
 										<div key={field.label} className="flex items-center gap-2">
-											<span className="text-xs text-gray-400 w-12 shrink-0">{field.label}</span>
-											<div className="flex-1 h-7 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 px-2 flex items-center text-xs text-gray-600 dark:text-gray-300">
+											<span className="text-xs text-gray-400 dark:text-gray-500 w-12 shrink-0">
+												{field.label}
+											</span>
+											<div className="flex-1 h-7 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-600 px-2 flex items-center text-xs text-gray-600 dark:text-gray-300">
 												{field.value}
 											</div>
 											<span className="text-emerald-500 text-xs">✓</span>
@@ -113,7 +103,7 @@ export default function ScenariosSection() {
 										{isZh ? '智能表单填写' : 'Smart Form Filling'}
 									</h3>
 								</div>
-								<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+								<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
 									{isZh
 										? '把 20 次点击变成一句话。ERP、CRM、管理后台的最佳拍档。'
 										: 'Turn 20-click workflows into one sentence. Perfect for ERP, CRM, and admin systems.'}
@@ -122,13 +112,13 @@ export default function ScenariosSection() {
 						</div>
 					</BlurFade>
 
-					{/* Scenario 3: Accessibility */}
+					{/* Accessibility */}
 					<BlurFade inView delay={0.15}>
-						<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-purple-50 to-white dark:from-purple-950/20 dark:to-gray-900 border border-purple-100/80 dark:border-purple-900/30 hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
+						<div className="group relative overflow-hidden rounded-2xl bg-linear-to-b from-purple-50 to-white dark:from-purple-950/40 dark:to-gray-800 border border-purple-200/80 dark:border-purple-800/50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500">
 							<div className="p-6 pb-4 flex flex-col items-center justify-center">
-								<div className="w-full rounded-xl bg-purple-50 dark:bg-purple-900/20 p-5 space-y-3">
+								<div className="w-full rounded-xl bg-purple-50 dark:bg-purple-900/30 p-5 space-y-3">
 									<div className="flex items-center gap-3">
-										<div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-base">
+										<div className="w-8 h-8 rounded-full bg-purple-500/10 dark:bg-purple-500/20 flex items-center justify-center text-base">
 											🎤
 										</div>
 										<div className="text-sm text-purple-700 dark:text-purple-300 italic">
@@ -141,7 +131,7 @@ export default function ScenariosSection() {
 											<div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse [animation-delay:0.2s]"></div>
 											<div className="w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse [animation-delay:0.4s]"></div>
 										</div>
-										<span className="text-xs text-purple-500">
+										<span className="text-xs text-purple-500 dark:text-purple-400">
 											{isZh ? 'AI 正在执行...' : 'AI executing...'}
 										</span>
 									</div>
@@ -157,7 +147,7 @@ export default function ScenariosSection() {
 										{isZh ? '无障碍增强' : 'Accessibility'}
 									</h3>
 								</div>
-								<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+								<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
 									{isZh
 										? '用自然语言让任何网页无障碍。语音指令、屏幕阅读器，零门槛。'
 										: 'Make any web app accessible through natural language. Voice, screen readers, zero barrier.'}