Spaces:

pollen-robotics
/

reachy_mini_conversation_app

Running

App Files Files Community

apirrone commited on 1 day ago

Commit

68b39e5

1 Parent(s): 008afa8

update landing page

Browse files

Files changed (2) hide show

index.html +105 -255
style.css +254 -279

index.html CHANGED Viewed

@@ -3,278 +3,128 @@
 <head>
 	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<title>Reachy Mini Conversation app</title>
 	<link rel="stylesheet" href="style.css" />
 </head>
 <body>
-	<div class="hero">
-		<div class="hero-content">
-			<div class="app-icon">🤖⚡</div>
-			<h1>Reachy Mini Conversation app</h1>
-			<p class="tagline">Conversationalapp for the Reachy Mini robot combining OpenAI's realtime APIs, vision pipelines, and choreographed motion libraries.</p>
-		</div>
-	</div>
-	<div class="container">
-		<div class="main-card">
-			<div class="app-preview">
-				<div class="preview-image">
-					<div class="camera-feed">🛠️</div>
-				</div>
 			</div>
 		</div>
-		<div class="app-details">
-			<h2>Example Template App</h2>
-			<div class="template-info">
-				<div class="info-box">
-					<h3>🎨 Template Purpose</h3>
-					<p>This is an example landing page for Reachy Mini apps. Feel free to duplicate this template and
-						customize it for your own applications!</p>
 				</div>
-				<div class="info-box">
-					<h3>🚀 Getting Started</h3>
-					<p>Use this template to showcase your Reachy Mini app with a landing page. Simply modify the
-						content, add your app's repository URL, and deploy!</p>
 				</div>
 			</div>
-			<div class="how-to-use">
-				<h3>How to Use This Template</h3>
-				<div class="steps">
-					<div class="step">
-						<span class="step-number">1</span>
-						<div>
-							<h4>Duplicate & Customize</h4>
-							<p>Copy this template and modify the content for your app</p>
-						</div>
-					</div>
-					<div class="step">
-						<span class="step-number">2</span>
-						<div>
-							<h4>Update Repository URL</h4>
-							<p>Change the JavaScript to point to your app's Git repository</p>
-						</div>
-					</div>
-					<div class="step">
-						<span class="step-number">3</span>
-						<div>
-							<h4>Deploy to HF Spaces</h4>
-							<p>Upload your customized version to Hugging Face Spaces</p>
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-	<div class="download-section">
-		<div class="download-card">
-			<h2>Install This App</h2>
-			<p></p>
-			<div class="dashboard-config">
-				<label for="dashboardUrl">Your Reachy Dashboard URL:</label>
-				<input type="url" id="dashboardUrl" value="http://localhost:8000"
-					placeholder="http://your-reachy-ip:8000" />
 			</div>
-			<button id="installBtn" class="install-btn primary">
-				<span class="btn-icon">📥</span>
-				Install Conversation App to Reachy Mini
-			</button>
-			<div id="installStatus" class="install-status"></div>
 		</div>
-	</div>
-	<div class="footer">
 		<p>
-			🤖 Template for Reachy Mini Apps •
-			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
-			<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
-				Apps</a>
 		</p>
-	</div>
-	</div>
-	<script>
-		// Get the current Hugging Face Space URL as the repository URL
-		function getCurrentSpaceUrl() {
-			// Get current page URL and convert to repository format
-			const currentUrl = window.location.href;
-			// Remove any trailing slashes and query parameters
-			const cleanUrl = currentUrl.split('?')[0].replace(/\/$/, '');
-			return cleanUrl;
-		}
-		// Parse TOML content to extract project name
-		function parseTomlProjectName(tomlContent) {
-			try {
-				const lines = tomlContent.split('\n');
-				let inProjectSection = false;
-				for (const line of lines) {
-					const trimmedLine = line.trim();
-					// Check if we're entering the [project] section
-					if (trimmedLine === '[project]') {
-						inProjectSection = true;
-						continue;
-					}
-					// Check if we're entering a different section
-					if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
-						inProjectSection = false;
-						continue;
-					}
-					// If we're in the project section, look for the name field
-					if (inProjectSection && trimmedLine.startsWith('name')) {
-						const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
-						if (match) {
-							// Convert to lowercase and replace invalid characters for app naming
-							return match[1].toLowerCase().replace(/[^a-z0-9-_]/g, '-');
-						}
-					}
-				}
-				throw new Error('Project name not found in pyproject.toml');
-			} catch (error) {
-				console.error('Error parsing pyproject.toml:', error);
-				return 'unknown-app';
-			}
-		}
-		// Fetch and parse pyproject.toml from the current space
-		async function getAppNameFromCurrentSpace() {
-			try {
-				// Fetch pyproject.toml from the current space
-				const response = await fetch('./pyproject.toml');
-				if (!response.ok) {
-					throw new Error(`Failed to fetch pyproject.toml: ${response.status}`);
-				}
-				const tomlContent = await response.text();
-				return parseTomlProjectName(tomlContent);
-			} catch (error) {
-				console.error('Error fetching app name from current space:', error);
-				// Fallback to extracting from URL if pyproject.toml is not accessible
-				const url = getCurrentSpaceUrl();
-				const parts = url.split('/');
-				const spaceName = parts[parts.length - 1];
-				return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
-			}
-		}
-		async function installToReachy() {
-			const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
-			const statusDiv = document.getElementById('installStatus');
-			const installBtn = document.getElementById('installBtn');
-			if (!dashboardUrl) {
-				showStatus('error', 'Please enter your Reachy dashboard URL');
-				return;
-			}
-			try {
-				installBtn.disabled = true;
-				installBtn.innerHTML = '<span class="btn-icon">⏳</span>Installing...';
-				showStatus('loading', 'Connecting to your Reachy dashboard...');
-				// Test connection
-				const testResponse = await fetch(`${dashboardUrl}/api/status`, {
-					method: 'GET',
-					mode: 'cors',
-				});
-				if (!testResponse.ok) {
-					throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
-				}
-				showStatus('loading', 'Reading app configuration...');
-				// Get app name from pyproject.toml in current space
-				const appName = await getAppNameFromCurrentSpace();
-				// Get current space URL as repository URL
-				const repoUrl = getCurrentSpaceUrl();
-				showStatus('loading', `Starting installation of "${appName}"...`);
-				// Start installation
-				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
-					method: 'POST',
-					mode: 'cors',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify({
-						url: repoUrl,
-						name: appName
-					})
-				});
-				const result = await installResponse.json();
-				if (installResponse.ok) {
-					showStatus('success', `✅ Installation started for "${appName}"! Check your dashboard for progress.`);
-					setTimeout(() => {
-						showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
-					}, 3000);
-				} else {
-					throw new Error(result.detail || 'Installation failed');
-				}
-			} catch (error) {
-				console.error('Installation error:', error);
-				showStatus('error', `❌ ${error.message}`);
-			} finally {
-				installBtn.disabled = false;
-				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
-			}
-		}
-		function showStatus(type, message) {
-			const statusDiv = document.getElementById('installStatus');
-			statusDiv.className = `install-status ${type}`;
-			statusDiv.textContent = message;
-			statusDiv.style.display = 'block';
-		}
-		function copyToClipboard() {
-			const repoUrl = document.getElementById('repoUrl').textContent;
-			navigator.clipboard.writeText(repoUrl).then(() => {
-				showStatus('success', '📋 Repository URL copied to clipboard!');
-			}).catch(() => {
-				showStatus('error', 'Failed to copy URL. Please copy manually.');
-			});
-		}
-		// Update the displayed repository URL on page load
-		document.addEventListener('DOMContentLoaded', () => {
-			// Auto-detect local dashboard
-			const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-			if (isLocalhost) {
-				document.getElementById('dashboardUrl').value = 'http://localhost:8000';
-			}
-			// Update the repository URL display if element exists
-			const repoUrlElement = document.getElementById('repoUrl');
-			if (repoUrlElement) {
-				repoUrlElement.textContent = getCurrentSpaceUrl();
-			}
-		});
-		// Event listeners
-		document.getElementById('installBtn').addEventListener('click', installToReachy);
-	</script>
 </body>
-</html>

 <head>
 	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Reachy Mini Conversation App</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="style.css" />
 </head>
 <body>
+	<header class="hero">
+		<div class="topline">
+			<div class="brand">
+				<span class="logo">🤖</span>
+				<span class="brand-name">Reachy Mini</span>
 			</div>
+			<div class="pill">Realtime voice · Vision aware · Expressive motion</div>
 		</div>
+		<div class="hero-grid">
+			<div class="hero-copy">
+				<p class="eyebrow">Conversation App</p>
+				<h1>Talk, see, and move together.</h1>
+				<p class="lede">
+					A friendly, camera-aware companion for Reachy Mini. Chat out loud, watch it follow faces, dance, or react with recorded emotions—all while streaming transcripts in a clean web UI.
+				</p>
+				<div class="hero-actions">
+					<a class="btn primary" href="#highlights">Explore features</a>
+					<a class="btn ghost" href="#story">See how it feels</a>
 				</div>
+				<div class="hero-badges">
+					<span>Low-latency voice loop</span>
+					<span>Camera insights on demand</span>
+					<span>Choreographed dances & emotions</span>
+					<span>Personality profiles via web UI</span>
 				</div>
 			</div>
+			<div class="hero-visual">
+				<div class="glass-card">
+					<img src="docs/assets/reachy_mini_dance.gif" alt="Reachy Mini dancing" class="hero-gif">
+					<p class="caption">Reachy Mini can move, dance, and emote while holding a natural conversation.</p>
 				</div>
 			</div>
 		</div>
+	</header>
+	<section id="highlights" class="section features">
+		<div class="section-header">
+			<p class="eyebrow">What’s inside</p>
+			<h2>All-in-one conversational layer for your robot</h2>
+			<p class="intro">
+				The app blends realtime speech, vision, and motion so Reachy Mini feels present. Use it on hardware or in simulation with the Gradio web interface.
+			</p>
+		</div>
+		<div class="feature-grid">
+			<div class="feature-card">
+				<span class="icon">🎤</span>
+				<h3>Natural voice chat</h3>
+				<p>Talk freely and get fast, high-quality replies powered by OpenAI’s realtime models.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">🎥</span>
+				<h3>Vision-aware replies</h3>
+				<p>Ask the camera tool to see what’s in front, track a face, or keep attention on whoever is speaking.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">💃</span>
+				<h3>Expressive motion</h3>
+				<p>Queue dances, play recorded emotions, or add gentle wobble while Reachy listens and talks.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">🧠</span>
+				<h3>Personalities on demand</h3>
+				<p>Switch conversation styles through profiles and decide which tools (dance, camera, tracking) each persona can use.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">🖥️</span>
+				<h3>Web UI with live transcripts</h3>
+				<p>Open the Gradio interface to read the dialogue, toggle tools, and watch responses as they stream.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">🌐</span>
+				<h3>Ready for your setup</h3>
+				<p>Works with wired or wireless Reachy Mini, and can run vision locally or through the default cloud model.</p>
+			</div>
+		</div>
+	</section>
+	<section id="story" class="section story">
+		<div class="story-grid">
+			<div class="story-card">
+				<p class="eyebrow">How it feels</p>
+				<h3>From hello to helpful in seconds</h3>
+				<ul class="story-list">
+					<li><span>👋</span> Say “Hey Reachy” and start chatting—no extra setup in the moment.</li>
+					<li><span>👀</span> Ask what it sees; it can peek through the camera or keep focus on your face.</li>
+					<li><span>🎭</span> Trigger emotions or dance breaks to keep the conversation lively.</li>
+					<li><span>📝</span> Follow along with live transcripts in the web UI or run audio-only from the console.</li>
+				</ul>
+			</div>
+			<div class="story-card secondary">
+				<p class="eyebrow">Where it shines</p>
+				<h3>Great for demos, teaching, and playful exploration</h3>
+				<p class="story-text">
+					Show off how Reachy Mini listens, responds, and moves in sync. Whether you’re guiding a class, hosting a booth, or experimenting at home, the app keeps the robot expressive without juggling scripts or joystick controls.
+				</p>
+				<div class="chips">
+					<span class="chip">Live conversation</span>
+					<span class="chip">Face tracking</span>
+					<span class="chip">Camera tool</span>
+					<span class="chip">Dance library</span>
+					<span class="chip">Profiles & tools</span>
+				</div>
 			</div>
 		</div>
+	</section>
+	<footer class="footer">
 		<p>
+			Reachy Mini Conversation App by <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener">Pollen Robotics</a>.
+			Explore more apps on <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank" rel="noopener">Hugging Face Spaces</a>.
 		</p>
+	</footer>
 </body>
+</html>

style.css CHANGED Viewed

@@ -1,3 +1,17 @@
 * {
 	margin: 0;
 	padding: 0;
@@ -5,407 +19,368 @@
 }
 body {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-	line-height: 1.6;
-	color: #333;
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 	min-height: 100vh;
 }
-.hero {
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	color: white;
-	padding: 4rem 2rem;
-	text-align: center;
 }
-.hero-content {
-	max-width: 800px;
-	margin: 0 auto;
 }
-.app-icon {
-	font-size: 4rem;
-	margin-bottom: 1rem;
-	display: inline-block;
 }
-.hero h1 {
-	font-size: 3rem;
-	font-weight: 700;
-	margin-bottom: 1rem;
-	background: linear-gradient(45deg, #fff, #f0f9ff);
-	background-clip: text;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
 }
-.tagline {
-	font-size: 1.25rem;
-	opacity: 0.9;
-	max-width: 600px;
-	margin: 0 auto;
 }
-.container {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 0 2rem;
-	position: relative;
-	z-index: 2;
 }
-.main-card {
-	background: white;
-	border-radius: 20px;
-	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-	margin-top: -2rem;
-	overflow: hidden;
-	margin-bottom: 3rem;
 }
-.app-preview {
-	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
-	padding: 3rem;
-	color: white;
-	text-align: center;
-	position: relative;
 }
-.preview-image {
-	background: #000;
-	border-radius: 15px;
-	padding: 2rem;
-	max-width: 500px;
 	margin: 0 auto;
 	position: relative;
-	overflow: hidden;
 }
-.camera-feed {
-	font-size: 4rem;
 	margin-bottom: 1rem;
-	opacity: 0.7;
 }
-.detection-overlay {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 100%;
 }
-.bbox {
-	background: rgba(34, 197, 94, 0.9);
-	color: white;
-	padding: 0.5rem 1rem;
-	border-radius: 8px;
-	font-size: 0.9rem;
-	font-weight: 600;
-	margin: 0.5rem;
 	display: inline-block;
-	border: 2px solid #22c55e;
-}
-.app-details {
-	padding: 3rem;
 }
-.app-details h2 {
-	font-size: 2rem;
-	color: #1e293b;
-	margin-bottom: 2rem;
-	text-align: center;
 }
-.template-info {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 2rem;
-	margin-bottom: 3rem;
 }
-.info-box {
-	background: #f0f9ff;
-	border: 2px solid #e0f2fe;
 	border-radius: 12px;
-	padding: 2rem;
-}
-.info-box h3 {
-	color: #0c4a6e;
-	margin-bottom: 1rem;
-	font-size: 1.2rem;
 }
-.info-box p {
-	color: #0369a1;
-	line-height: 1.6;
 }
-.how-to-use {
-	background: #fefce8;
-	border: 2px solid #fde047;
-	border-radius: 12px;
-	padding: 2rem;
-	margin-top: 3rem;
 }
-.how-to-use h3 {
-	color: #a16207;
-	margin-bottom: 1.5rem;
-	font-size: 1.3rem;
-	text-align: center;
 }
-.steps {
-	display: flex;
-	flex-direction: column;
-	gap: 1.5rem;
 }
-.step {
-	display: flex;
-	align-items: flex-start;
-	gap: 1rem;
 }
-.step-number {
-	background: #eab308;
-	color: white;
-	width: 2rem;
-	height: 2rem;
-	border-radius: 50%;
 	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: bold;
-	flex-shrink: 0;
 }
-.step h4 {
-	color: #a16207;
-	margin-bottom: 0.5rem;
-	font-size: 1.1rem;
 }
-.step p {
-	color: #ca8a04;
 }
-.download-card {
-	background: white;
-	border-radius: 20px;
-	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-	padding: 3rem;
-	text-align: center;
 }
-.download-card h2 {
-	font-size: 2rem;
-	color: #1e293b;
-	margin-bottom: 1rem;
 }
-.download-card>p {
-	color: #64748b;
-	font-size: 1.1rem;
-	margin-bottom: 2rem;
 }
-.dashboard-config {
-	margin-bottom: 2rem;
-	text-align: left;
-	max-width: 400px;
-	margin-left: auto;
-	margin-right: auto;
 }
-.dashboard-config label {
-	display: block;
-	color: #374151;
-	font-weight: 600;
 	margin-bottom: 0.5rem;
 }
-.dashboard-config input {
-	width: 100%;
-	padding: 0.75rem 1rem;
-	border: 2px solid #e5e7eb;
-	border-radius: 8px;
-	font-size: 0.95rem;
-	transition: border-color 0.2s;
 }
-.dashboard-config input:focus {
-	outline: none;
-	border-color: #667eea;
 }
-.install-btn {
-	background: linear-gradient(135deg, #667eea, #764ba2);
-	color: white;
-	border: none;
-	padding: 1.25rem 3rem;
 	border-radius: 16px;
-	font-size: 1.2rem;
-	font-weight: 700;
-	cursor: pointer;
-	transition: all 0.3s ease;
-	display: inline-flex;
-	align-items: center;
-	gap: 0.75rem;
-	margin-bottom: 2rem;
-	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
-.install-btn:hover:not(:disabled) {
-	transform: translateY(-3px);
-	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
 }
-.install-btn:disabled {
-	opacity: 0.7;
-	cursor: not-allowed;
-	transform: none;
-}
-.manual-option {
-	background: #f8fafc;
 	border-radius: 12px;
-	padding: 2rem;
-	margin-top: 2rem;
 }
-.manual-option h3 {
-	color: #1e293b;
-	margin-bottom: 1rem;
-	font-size: 1.2rem;
 }
-.manual-option>p {
-	color: #64748b;
-	margin-bottom: 1rem;
 }
-.btn-icon {
-	font-size: 1.1rem;
 }
-.install-status {
-	padding: 1rem;
-	border-radius: 8px;
-	font-size: 0.9rem;
-	text-align: center;
-	display: none;
-	margin-top: 1rem;
 }
-.install-status.success {
-	background: #dcfce7;
-	color: #166534;
-	border: 1px solid #bbf7d0;
 }
-.install-status.error {
-	background: #fef2f2;
-	color: #dc2626;
-	border: 1px solid #fecaca;
 }
-.install-status.loading {
-	background: #dbeafe;
-	color: #1d4ed8;
-	border: 1px solid #bfdbfe;
 }
-.install-status.info {
-	background: #e0f2fe;
-	color: #0369a1;
-	border: 1px solid #7dd3fc;
 }
-.manual-install {
-	background: #1f2937;
-	border-radius: 8px;
-	padding: 1rem;
-	margin-bottom: 1rem;
 	display: flex;
-	align-items: center;
-	gap: 1rem;
-}
-.manual-install code {
-	color: #10b981;
-	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-	font-size: 0.85rem;
-	flex: 1;
-	overflow-x: auto;
 }
-.copy-btn {
-	background: #374151;
-	color: white;
-	border: none;
-	padding: 0.5rem 1rem;
-	border-radius: 6px;
-	font-size: 0.8rem;
-	cursor: pointer;
-	transition: background-color 0.2s;
 }
-.copy-btn:hover {
-	background: #4b5563;
 }
-.manual-steps {
-	color: #6b7280;
 	font-size: 0.9rem;
-	line-height: 1.8;
 }
 .footer {
 	text-align: center;
-	padding: 2rem;
-	color: white;
-	opacity: 0.8;
 }
 .footer a {
-	color: white;
-	text-decoration: none;
-	font-weight: 600;
 }
 .footer a:hover {
-	text-decoration: underline;
 }
-/* Responsive Design */
 @media (max-width: 768px) {
 	.hero {
-		padding: 2rem 1rem;
 	}
-	.hero h1 {
-		font-size: 2rem;
 	}
-	.container {
-		padding: 0 1rem;
 	}
-	.app-details,
-	.download-card {
-		padding: 2rem;
 	}
-	.features-grid {
-		grid-template-columns: 1fr;
 	}
-	.download-options {
-		grid-template-columns: 1fr;
-	}
-}

+:root {
+	--bg: #060c1d;
+	--panel: #0c172b;
+	--glass: rgba(17, 27, 48, 0.7);
+	--card: rgba(255, 255, 255, 0.04);
+	--accent: #7af5c4;
+	--accent-2: #f6c452;
+	--text: #e8edf7;
+	--muted: #9fb3ce;
+	--border: rgba(255, 255, 255, 0.08);
+	--shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
+	font-family: "Space Grotesk", "Manrope", system-ui, -apple-system, sans-serif;
+}
 * {
 	margin: 0;
 	padding: 0;
 }
 body {
+	background: radial-gradient(circle at 20% 20%, rgba(122, 245, 196, 0.12), transparent 30%),
+		radial-gradient(circle at 80% 0%, rgba(246, 196, 82, 0.14), transparent 32%),
+		radial-gradient(circle at 50% 70%, rgba(124, 142, 255, 0.1), transparent 30%),
+		var(--bg);
+	color: var(--text);
 	min-height: 100vh;
+	line-height: 1.6;
+	padding-bottom: 3rem;
 }
+a {
+	color: inherit;
+	text-decoration: none;
 }
+.hero {
+	padding: 3.5rem clamp(1.5rem, 3vw, 3rem) 2.5rem;
+	position: relative;
+	overflow: hidden;
 }
+.hero::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(120deg, rgba(122, 245, 196, 0.12), rgba(246, 196, 82, 0.08), transparent);
+	pointer-events: none;
 }
+.topline {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	max-width: 1200px;
+	margin: 0 auto 2rem;
+	position: relative;
+	z-index: 2;
 }
+.brand {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-weight: 700;
+	letter-spacing: 0.5px;
+	color: var(--text);
 }
+.logo {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.2rem;
+	height: 2.2rem;
+	border-radius: 10px;
+	background: linear-gradient(145deg, rgba(122, 245, 196, 0.15), rgba(124, 142, 255, 0.15));
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
 }
+.brand-name {
+	font-size: 1.1rem;
 }
+.pill {
+	background: rgba(255, 255, 255, 0.06);
+	border: 1px solid var(--border);
+	padding: 0.6rem 1rem;
+	border-radius: 999px;
+	color: var(--muted);
+	font-size: 0.9rem;
+	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
 }
+.hero-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	gap: clamp(1.5rem, 2.5vw, 2.5rem);
+	max-width: 1200px;
 	margin: 0 auto;
 	position: relative;
+	z-index: 2;
+	align-items: center;
 }
+.hero-copy h1 {
+	font-size: clamp(2.6rem, 4vw, 3.6rem);
 	margin-bottom: 1rem;
+	line-height: 1.1;
+	letter-spacing: -0.5px;
 }
+.eyebrow {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-size: 0.8rem;
+	color: var(--muted);
+	margin-bottom: 0.75rem;
 }
+.eyebrow::before {
+	content: "";
 	display: inline-block;
+	width: 24px;
+	height: 2px;
+	background: linear-gradient(90deg, var(--accent), var(--accent-2));
+	border-radius: 999px;
 }
+.lede {
+	font-size: 1.1rem;
+	color: var(--muted);
+	max-width: 620px;
 }
+.hero-actions {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	margin: 1.6rem 0 1.2rem;
+	flex-wrap: wrap;
 }
+.btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.6rem;
+	padding: 0.85rem 1.4rem;
 	border-radius: 12px;
+	font-weight: 700;
+	border: 1px solid transparent;
+	cursor: pointer;
+	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }
+.btn.primary {
+	background: linear-gradient(135deg, #7af5c4, #7c8eff);
+	color: #0a0f1f;
+	box-shadow: 0 15px 30px rgba(122, 245, 196, 0.25);
 }
+.btn.primary:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 25px 45px rgba(122, 245, 196, 0.35);
 }
+.btn.ghost {
+	background: rgba(255, 255, 255, 0.05);
+	border-color: var(--border);
+	color: var(--text);
 }
+.btn.ghost:hover {
+	border-color: rgba(255, 255, 255, 0.3);
+	transform: translateY(-2px);
 }
+.btn.wide {
+	width: 100%;
+	justify-content: center;
 }
+.hero-badges {
 	display: flex;
+	flex-wrap: wrap;
+	gap: 0.6rem;
+	color: var(--muted);
+	font-size: 0.9rem;
 }
+.hero-badges span {
+	padding: 0.5rem 0.8rem;
+	border-radius: 10px;
+	border: 1px solid var(--border);
+	background: rgba(255, 255, 255, 0.04);
 }
+.hero-visual .glass-card {
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid var(--border);
+	border-radius: 18px;
+	padding: 1.2rem;
+	box-shadow: var(--shadow);
+	backdrop-filter: blur(10px);
 }
+.hero-gif {
+	width: 100%;
+	display: block;
+	border-radius: 14px;
+	border: 1px solid var(--border);
+	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
 }
+.caption {
+	margin-top: 0.75rem;
+	color: var(--muted);
+	font-size: 0.95rem;
 }
+.section {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
 }
+.section-header {
+	text-align: center;
+	max-width: 780px;
+	margin: 0 auto 2rem;
 }
+.section-header h2 {
+	font-size: clamp(2rem, 3vw, 2.6rem);
 	margin-bottom: 0.5rem;
 }
+.intro {
+	color: var(--muted);
+	font-size: 1.05rem;
 }
+.feature-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	gap: 1rem;
 }
+.feature-card {
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid var(--border);
 	border-radius: 16px;
+	padding: 1.25rem;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
+.feature-card:hover {
+	transform: translateY(-4px);
+	border-color: rgba(122, 245, 196, 0.3);
+	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
 }
+.feature-card .icon {
+	width: 48px;
+	height: 48px;
 	border-radius: 12px;
+	display: grid;
+	place-items: center;
+	background: rgba(122, 245, 196, 0.14);
+	margin-bottom: 0.8rem;
+	font-size: 1.4rem;
 }
+.feature-card h3 {
+	margin-bottom: 0.35rem;
 }
+.feature-card p {
+	color: var(--muted);
 }
+.story {
+	padding-top: 1rem;
 }
+.story-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 1rem;
 }
+.story-card {
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid var(--border);
+	border-radius: 18px;
+	padding: 1.5rem;
+	box-shadow: var(--shadow);
 }
+.story-card.secondary {
+	background: linear-gradient(145deg, rgba(124, 142, 255, 0.08), rgba(122, 245, 196, 0.06));
 }
+.story-card h3 {
+	margin-bottom: 0.8rem;
 }
+.story-list {
+	list-style: none;
+	display: grid;
+	gap: 0.7rem;
+	color: var(--muted);
+	font-size: 0.98rem;
 }
+.story-list li {
 	display: flex;
+	gap: 0.7rem;
+	align-items: flex-start;
 }
+.story-text {
+	color: var(--muted);
+	line-height: 1.7;
+	margin-bottom: 1rem;
 }
+.chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
 }
+.chip {
+	padding: 0.45rem 0.8rem;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.2);
+	border: 1px solid var(--border);
+	color: var(--text);
 	font-size: 0.9rem;
 }
 .footer {
 	text-align: center;
+	color: var(--muted);
+	padding: 2rem 1.5rem 0;
 }
 .footer a {
+	color: var(--text);
+	border-bottom: 1px solid transparent;
 }
 .footer a:hover {
+	border-color: rgba(255, 255, 255, 0.5);
 }
 @media (max-width: 768px) {
 	.hero {
+		padding-top: 2.5rem;
 	}
+	.topline {
+		flex-direction: column;
+		gap: 0.8rem;
+		align-items: flex-start;
 	}
+	.hero-actions {
+		width: 100%;
 	}
+	.btn {
+		width: 100%;
+		justify-content: center;
 	}
+	.hero-badges {
+		gap: 0.4rem;
 	}
+}