---
import Layout from '../../layouts/Layout.astro';
import Footer from '../../components/navigation/Footer.astro';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
	const apps = await getCollection('apps');
	const germanApps = apps.filter((app) => app.slug.endsWith('-de'));
	return germanApps.map((app) => ({
		params: { slug: app.slug.replace('-de', '') },
		props: { app },
	}));
}

const { app } = Astro.props;
const { Content } = await app.render();

// Get all apps for "More Apps" section
const allApps = await getCollection('apps');
const germanApps = allApps.filter((a) => a.slug.endsWith('-de') && a.slug !== app.slug);
const otherApps = germanApps.slice(0, 3);

// Map category to German
const categoryMap = {
	productivity: 'Produktivität',
	creative: 'Kreativ',
	'ai-tools': 'KI-Tools',
	communication: 'Kommunikation',
	analytics: 'Analytik',
};

const categoryLabel = categoryMap[app.data.category] || app.data.category;

// Platform icons
const platforms = [
	{ name: 'iOS', icon: '📱' },
	{ name: 'Android', icon: '🤖' },
	{ name: 'Windows', icon: '🪟' },
	{ name: 'macOS', icon: '🍎' },
	{ name: 'Linux', icon: '🐧' },
	{ name: 'Web', icon: '🌐' },
];

// Trust badges
const trustBadges = [
	{ icon: '🔒', title: 'DSGVO-konform', description: 'EU-Datenschutz' },
	{ icon: '🇩🇪', title: 'Made in Germany', description: 'Deutsche Server' },
	{ icon: '🛡️', title: 'Verschlüsselt', description: 'Ende-zu-Ende' },
	{ icon: '⚡', title: 'Schnell', description: 'Optimiert für Performance' },
];
---

<Layout title={`${app.data.title} - Mana App`}>
	<!-- Hero Section -->
	<section class="app-hero">
		<div class="app-hero-overlay"></div>

		<div class="app-hero-content">
			<div class="app-hero-icon">
				{
					app.data.icon.startsWith('/') ? (
						<img src={app.data.icon} alt={app.data.title} class="icon-image" />
					) : (
						<span class="icon-emoji">{app.data.icon}</span>
					)
				}
			</div>

			<h1 class="app-hero-title">{app.data.title}</h1>
			<p class="app-hero-description">{app.data.description}</p>

			<div class="app-hero-meta">
				{
					app.data.status === 'available' && (
						<span class="status-badge status-available">Verfügbar</span>
					)
				}
				{app.data.status === 'beta' && <span class="status-badge status-beta">Beta</span>}
				{
					app.data.status === 'coming-soon' && (
						<span class="status-badge status-coming">Demnächst</span>
					)
				}
				<span class="category-badge">{categoryLabel}</span>
			</div>

			{
				app.data.status === 'available' && (
					<div class="app-hero-cta">
						<a href="/start" class="btn-start">
							Mit Mana starten
						</a>
						{app.data.website && (
							<a
								href={app.data.website}
								target="_blank"
								rel="noopener noreferrer"
								class="btn-website"
							>
								Website besuchen
							</a>
						)}
					</div>
				)
			}
		</div>
	</section>

	<!-- Main Content with Sidebar -->
	<section class="app-main">
		<div class="app-container">
			<div class="content-wrapper">
				<!-- Main Content Column -->
				<div class="main-content">
					<!-- Features Grid -->
					<div class="section-block">
						<h2 class="section-title">Hauptfunktionen</h2>
						<div class="features-grid">
							{
								app.data.features.slice(0, 6).map((feature, index) => (
									<div class="feature-card">
										<div class="feature-icon">
											<svg
												class="feature-check"
												fill="none"
												stroke="currentColor"
												viewBox="0 0 24 24"
											>
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
													stroke-width="2"
													d="M5 13l4 4L19 7"
												/>
											</svg>
										</div>
										<h3 class="feature-title">{feature}</h3>
									</div>
								))
							}
						</div>
					</div>

					<!-- Detailed Content -->
					<div class="section-block prose-section">
						<article class="prose-content">
							<Content />
						</article>
					</div>

					<!-- Use Cases Section -->
					<div class="section-block use-cases-section">
						<h2 class="section-title">Perfekt für</h2>
						<div class="use-cases-grid">
							<div class="use-case-card">
								<div class="use-case-icon">💼</div>
								<h3 class="use-case-title">Business & Teams</h3>
								<p class="use-case-text">Meeting-Protokolle, Kundengespräche, Team-Collaboration</p>
							</div>
							<div class="use-case-card">
								<div class="use-case-icon">🎓</div>
								<h3 class="use-case-title">Bildung & Forschung</h3>
								<p class="use-case-text">Vorlesungen, Interviews, Forschungsdokumentation</p>
							</div>
							<div class="use-case-card">
								<div class="use-case-icon">🎨</div>
								<h3 class="use-case-title">Kreative & Content</h3>
								<p class="use-case-text">Podcasts, Videos, Journalismus, Content-Erstellung</p>
							</div>
							<div class="use-case-card">
								<div class="use-case-icon">👤</div>
								<h3 class="use-case-title">Persönlich</h3>
								<p class="use-case-text">Notizen, Ideen festhalten, Tagebuch, Erinnerungen</p>
							</div>
						</div>
					</div>

					<!-- Mana Advantage Section -->
					<div class="section-block mana-advantage">
						<div class="advantage-content">
							<div class="advantage-text">
								<h2 class="advantage-title">Der Mana-Vorteil</h2>
								<p class="advantage-description">
									Nutze {app.data.title} flexibel mit Mana-Credits. Keine monatlichen Abos, keine ungenutzten
									Minuten. Zahle nur für das, was du wirklich verwendest.
								</p>
								<ul class="advantage-list">
									<li>
										<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"></path>
										</svg>
										<span>Keine monatlichen Verpflichtungen</span>
									</li>
									<li>
										<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"></path>
										</svg>
										<span>Transparente Abrechnung pro Nutzung</span>
									</li>
									<li>
										<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"></path>
										</svg>
										<span>Perfekt für schwankenden Bedarf</span>
									</li>
									<li>
										<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"></path>
										</svg>
										<span>Ein Account für alle Apps</span>
									</li>
								</ul>
							</div>
							<div class="advantage-visual">
								<div class="cost-comparison">
									<div class="comparison-card traditional">
										<div class="comparison-label">Pay-per-Use</div>
										<div class="comparison-price">6€<span>/Monat</span></div>
										<div class="comparison-note">300 Min (600 Mana)</div>
									</div>
									<div class="comparison-arrow">→</div>
									<div class="comparison-card mana">
										<div class="comparison-label">Mana Stream</div>
										<div class="comparison-price">14,99€<span>/Monat</span></div>
										<div class="comparison-note">750 Min (1.500 Mana)</div>
									</div>
								</div>
								<div class="comparison-note-text">
									* 1 Mana = 1 Cent | Aufnahme = 2 Mana/Min | Kostenlos: 150 Mana/Monat (75 Min)
								</div>
							</div>
						</div>
					</div>

					<!-- Trust & Security -->
					<div class="section-block trust-section">
						<h2 class="section-title">Sicherheit & Vertrauen</h2>
						<div class="trust-grid">
							{
								trustBadges.map((badge) => (
									<div class="trust-badge">
										<div class="trust-icon">{badge.icon}</div>
										<div class="trust-text">
											<div class="trust-title">{badge.title}</div>
											<div class="trust-desc">{badge.description}</div>
										</div>
									</div>
								))
							}
						</div>
					</div>

					<!-- Platform Availability -->
					<div class="section-block platform-section">
						<h2 class="section-title">Überall verfügbar</h2>
						<p class="platform-subtitle">Nutze {app.data.title} auf allen deinen Geräten</p>
						<div class="platform-grid">
							{
								platforms.map((platform) => (
									<div class="platform-card">
										<div class="platform-icon">{platform.icon}</div>
										<div class="platform-name">{platform.name}</div>
									</div>
								))
							}
						</div>
					</div>
				</div>

				<!-- Sticky Sidebar -->
				<aside class="sidebar">
					<!-- Mana Usage Card -->
					<div class="sidebar-card mana-card">
						<h3 class="sidebar-title">Mana-Verbrauch</h3>

						<div class="mana-display">
							<div class="mana-main">
								<div class="mana-value">{app.data.manaUsage.average}</div>
								<div class="mana-label">Mana</div>
							</div>
							<div class="mana-sub">
								pro {
									app.data.manaUsage.unit === 'per-minute'
										? 'Minute'
										: app.data.manaUsage.unit === 'per-request'
											? 'Anfrage'
											: app.data.manaUsage.unit === 'per-image'
												? 'Bild'
												: app.data.manaUsage.unit === 'per-token'
													? 'Token'
													: 'Aktion'
								}
							</div>
						</div>

						<div class="mana-range">
							<div class="mana-range-item">
								<span class="range-label">Min</span>
								<span class="range-value">{app.data.manaUsage.min}</span>
							</div>
							<div class="mana-range-divider"></div>
							<div class="mana-range-item">
								<span class="range-label">Max</span>
								<span class="range-value">{app.data.manaUsage.max}</span>
							</div>
						</div>
					</div>

					<!-- Quick Features -->
					<div class="sidebar-card features-card">
						<h3 class="sidebar-title">Top Features</h3>
						<ul class="quick-features">
							{
								app.data.features.slice(0, 5).map((feature) => (
									<li class="quick-feature">
										<svg class="quick-check" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"
											/>
										</svg>
										<span>{feature}</span>
									</li>
								))
							}
						</ul>
					</div>

					<!-- CTA Card -->
					{
						app.data.status === 'available' && (
							<div class="sidebar-card cta-card">
								<h3 class="cta-title">Jetzt starten</h3>
								<p class="cta-text">Nutze {app.data.title} mit deinen Mana-Credits</p>
								<a href="/start" class="cta-button">
									Mit Mana starten
								</a>
								{app.data.website && (
									<a href={app.data.website} target="_blank" class="cta-link">
										Website besuchen →
									</a>
								)}
							</div>
						)
					}
				</aside>
			</div>
		</div>
	</section>

	<!-- More Apps Section -->
	{
		otherApps.length > 0 && (
			<section class="more-apps-section">
				<div class="more-apps-container">
					<h2 class="more-apps-title">Weitere Apps entdecken</h2>
					<div class="more-apps-grid">
						{otherApps.map((otherApp) => (
							<a href={`/apps/${otherApp.slug.replace('-de', '')}`} class="more-app-card">
								<div class="more-app-icon">
									{otherApp.data.icon.startsWith('/') ? (
										<img src={otherApp.data.icon} alt={otherApp.data.title} class="more-icon-img" />
									) : (
										<span class="more-icon-emoji">{otherApp.data.icon}</span>
									)}
								</div>
								<h3 class="more-app-name">{otherApp.data.title}</h3>
								<p class="more-app-desc">{otherApp.data.description}</p>
							</a>
						))}
					</div>
					<div class="more-apps-cta">
						<a href="/apps" class="btn-all-apps">
							Alle Apps ansehen
						</a>
					</div>
				</div>
			</section>
		)
	}

	<!-- Back Link -->
	<section class="back-section">
		<div class="back-container">
			<a href="/apps" class="back-link">
				<svg class="back-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
				</svg>
				Zurück zur App-Übersicht
			</a>
		</div>
	</section>

	<Footer />
</Layout>

<style>
	/* Hero Section */
	.app-hero {
		position: relative;
		min-height: 60vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
		padding: calc(var(--grid-unit) * 4) 0 calc(var(--grid-unit) * 3) 0;
		overflow: hidden;
	}

	.app-hero-overlay {
		position: absolute;
		inset: 0;
		background:
			radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
			radial-gradient(circle at 70% 60%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
		pointer-events: none;
	}

	.app-hero-content {
		position: relative;
		z-index: 10;
		text-align: center;
		max-width: 900px;
		padding: 0 calc(var(--grid-unit) * 2);
		margin: 0 auto;
	}

	.app-hero-icon {
		width: 120px;
		height: 120px;
		margin: 0 auto calc(var(--grid-unit) * 1) auto;
		border-radius: 24px;
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(59, 130, 246, 0.2);
		backdrop-filter: blur(10px);
	}

	.icon-image {
		width: 80px;
		height: 80px;
		object-fit: contain;
	}

	.icon-emoji {
		font-size: 4rem;
	}

	.app-hero-title {
		font-size: clamp(2.5rem, 5vw, 3.5rem);
		font-weight: 800;
		color: #f8fafc;
		margin: 0 0 calc(var(--grid-unit) * 0.75) 0;
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	.app-hero-description {
		font-size: clamp(1.125rem, 2vw, 1.375rem);
		line-height: 1.6;
		color: #cbd5e1;
		margin: 0 0 calc(var(--grid-unit) * 1) 0;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	.app-hero-meta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: calc(var(--grid-unit) * 0.5);
		margin-bottom: calc(var(--grid-unit) * 1.5);
		flex-wrap: wrap;
	}

	.status-badge,
	.category-badge {
		padding: calc(var(--grid-unit) * 0.2) calc(var(--grid-unit) * 0.5);
		border-radius: 20px;
		font-size: 0.875rem;
		font-weight: 600;
	}

	.status-available {
		background: rgba(34, 197, 94, 0.15);
		color: #4ade80;
		border: 1px solid rgba(34, 197, 94, 0.3);
	}

	.status-beta {
		background: rgba(234, 179, 8, 0.15);
		color: #facc15;
		border: 1px solid rgba(234, 179, 8, 0.3);
	}

	.status-coming {
		background: rgba(148, 163, 184, 0.15);
		color: #94a3b8;
		border: 1px solid rgba(148, 163, 184, 0.3);
	}

	.category-badge {
		background: rgba(59, 130, 246, 0.15);
		color: #60a5fa;
		border: 1px solid rgba(59, 130, 246, 0.3);
	}

	.app-hero-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: calc(var(--grid-unit) * 0.5);
		flex-wrap: wrap;
	}

	.btn-start,
	.btn-website {
		padding: 0 calc(var(--grid-unit) * 1);
		height: calc(var(--grid-unit) * 1.25);
		font-size: 1.125rem;
		font-weight: 600;
		border-radius: 12px;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
	}

	.btn-start {
		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
		color: white;
		box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
		border: none;
	}

	.btn-start:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
	}

	.btn-website {
		background: rgba(248, 250, 252, 0.1);
		color: #f8fafc;
		border: 2px solid rgba(248, 250, 252, 0.2);
		backdrop-filter: blur(10px);
	}

	.btn-website:hover {
		background: rgba(248, 250, 252, 0.15);
	}

	/* Main Content Area */
	.app-main {
		background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
		padding: calc(var(--grid-unit) * 3) 0;
	}

	.app-container {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 calc(var(--grid-unit) * 2);
	}

	.content-wrapper {
		display: grid;
		grid-template-columns: 1fr 380px;
		gap: calc(var(--grid-unit) * 2);
		align-items: start;
	}

	.main-content {
		min-width: 0;
	}

	.section-block {
		margin-bottom: calc(var(--grid-unit) * 3);
	}

	.section-title {
		font-size: clamp(1.75rem, 3vw, 2.25rem);
		font-weight: 800;
		color: #f8fafc;
		margin: 0 0 calc(var(--grid-unit) * 1.25) 0;
		line-height: 1.2;
	}

	/* Features Grid */
	.features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: calc(var(--grid-unit) * 0.75);
	}

	.feature-card {
		background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
		border: 1px solid rgba(248, 250, 252, 0.1);
		border-radius: 16px;
		padding: calc(var(--grid-unit) * 0.75);
		display: flex;
		align-items: flex-start;
		gap: calc(var(--grid-unit) * 0.5);
		transition: all 0.3s ease;
	}

	.feature-card:hover {
		border-color: rgba(59, 130, 246, 0.3);
		transform: translateY(-2px);
	}

	.feature-icon {
		width: 40px;
		height: 40px;
		background: rgba(59, 130, 246, 0.15);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.feature-check {
		width: 24px;
		height: 24px;
		color: #60a5fa;
	}

	.feature-title {
		font-size: 1rem;
		font-weight: 600;
		color: #f8fafc;
		margin: 0;
		line-height: 1.4;
		margin-top: 8px;
	}

	/* Prose Content */
	.prose-section {
		background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.5) 100%);
		border: 1px solid rgba(248, 250, 252, 0.08);
		border-radius: 20px;
		padding: calc(var(--grid-unit) * 1.5);
	}

	.prose-content {
		color: #e2e8f0;
		line-height: 1.7;
	}

	.prose-content :global(h2) {
		color: #f8fafc;
		font-size: 1.75rem;
		font-weight: 700;
		margin-top: calc(var(--grid-unit) * 1.25);
		margin-bottom: calc(var(--grid-unit) * 0.6);
		line-height: 1.2;
	}

	.prose-content :global(h2:first-child) {
		margin-top: 0;
	}

	.prose-content :global(h3) {
		color: #f1f5f9;
		font-size: 1.375rem;
		font-weight: 600;
		margin-top: var(--grid-unit);
		margin-bottom: calc(var(--grid-unit) * 0.5);
	}

	.prose-content :global(p) {
		margin-bottom: calc(var(--grid-unit) * 0.6);
		color: #cbd5e1;
	}

	.prose-content :global(ul),
	.prose-content :global(ol) {
		margin-bottom: calc(var(--grid-unit) * 0.6);
		padding-left: calc(var(--grid-unit) * 0.75);
	}

	.prose-content :global(li) {
		margin-bottom: calc(var(--grid-unit) * 0.25);
		color: #cbd5e1;
	}

	.prose-content :global(strong) {
		color: #f8fafc;
		font-weight: 600;
	}

	.prose-content :global(a) {
		color: #60a5fa;
		text-decoration: underline;
	}

	/* Use Cases */
	.use-cases-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: calc(var(--grid-unit) * 0.75);
	}

	.use-case-card {
		background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
		border: 1px solid rgba(248, 250, 252, 0.1);
		border-radius: 16px;
		padding: calc(var(--grid-unit) * 1);
		text-align: center;
		transition: all 0.3s ease;
	}

	.use-case-card:hover {
		border-color: rgba(59, 130, 246, 0.3);
		transform: translateY(-4px);
	}

	.use-case-icon {
		font-size: 3rem;
		margin-bottom: calc(var(--grid-unit) * 0.5);
	}

	.use-case-title {
		font-size: 1.125rem;
		font-weight: 700;
		color: #f8fafc;
		margin: 0 0 calc(var(--grid-unit) * 0.3) 0;
	}

	.use-case-text {
		font-size: 0.9375rem;
		color: #94a3b8;
		margin: 0;
		line-height: 1.5;
	}

	/* Mana Advantage */
	.mana-advantage {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
		border: 1px solid rgba(59, 130, 246, 0.2);
		border-radius: 20px;
		padding: calc(var(--grid-unit) * 2);
	}

	.advantage-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(var(--grid-unit) * 2);
		align-items: center;
	}

	.advantage-title {
		font-size: 2rem;
		font-weight: 800;
		color: #f8fafc;
		margin: 0 0 calc(var(--grid-unit) * 0.5) 0;
	}

	.advantage-description {
		font-size: 1.125rem;
		color: #cbd5e1;
		margin: 0 0 calc(var(--grid-unit) * 1) 0;
		line-height: 1.6;
	}

	.advantage-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.advantage-list li {
		display: flex;
		align-items: center;
		gap: calc(var(--grid-unit) * 0.3);
		margin-bottom: calc(var(--grid-unit) * 0.4);
		color: #e2e8f0;
		font-size: 1rem;
	}

	.check-icon {
		width: 20px;
		height: 20px;
		color: #4ade80;
		flex-shrink: 0;
	}

	.cost-comparison {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: calc(var(--grid-unit) * 0.75);
	}

	.comparison-card {
		flex: 1;
		background: rgba(15, 23, 42, 0.8);
		border-radius: 16px;
		padding: calc(var(--grid-unit) * 1);
		text-align: center;
		border: 2px solid rgba(248, 250, 252, 0.1);
	}

	.comparison-card.mana {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
		border-color: rgba(59, 130, 246, 0.4);
	}

	.comparison-label {
		font-size: 0.875rem;
		color: #94a3b8;
		margin-bottom: calc(var(--grid-unit) * 0.3);
	}

	.comparison-card.mana .comparison-label {
		color: #60a5fa;
		font-weight: 600;
	}

	.comparison-price {
		font-size: 2.5rem;
		font-weight: 800;
		color: #f8fafc;
		line-height: 1;
	}

	.comparison-card.mana .comparison-price {
		color: #60a5fa;
	}

	.comparison-price span {
		font-size: 1.25rem;
		font-weight: 500;
		color: #94a3b8;
	}

	.comparison-note {
		font-size: 0.8125rem;
		color: #64748b;
		margin-top: calc(var(--grid-unit) * 0.3);
	}

	.comparison-arrow {
		font-size: 2rem;
		color: #60a5fa;
		flex-shrink: 0;
	}

	.comparison-note-text {
		margin-top: calc(var(--grid-unit) * 0.75);
		text-align: center;
		font-size: 0.8125rem;
		color: #64748b;
		font-style: italic;
	}

	/* Trust Badges */
	.trust-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: calc(var(--grid-unit) * 0.75);
	}

	.trust-badge {
		display: flex;
		align-items: center;
		gap: calc(var(--grid-unit) * 0.5);
		background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
		border: 1px solid rgba(248, 250, 252, 0.1);
		border-radius: 12px;
		padding: calc(var(--grid-unit) * 0.75);
	}

	.trust-icon {
		font-size: 2rem;
		flex-shrink: 0;
	}

	.trust-title {
		font-size: 1rem;
		font-weight: 600;
		color: #f8fafc;
		margin-bottom: 2px;
	}

	.trust-desc {
		font-size: 0.8125rem;
		color: #94a3b8;
	}

	/* Platform Grid */
	.platform-subtitle {
		font-size: 1.125rem;
		color: #94a3b8;
		margin: 0 0 calc(var(--grid-unit) * 1.25) 0;
	}

	.platform-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: calc(var(--grid-unit) * 0.75);
	}

	.platform-card {
		background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
		border: 1px solid rgba(248, 250, 252, 0.1);
		border-radius: 12px;
		padding: calc(var(--grid-unit) * 0.75);
		text-align: center;
		transition: all 0.3s ease;
	}

	.platform-card:hover {
		border-color: rgba(59, 130, 246, 0.3);
		transform: translateY(-2px);
	}

	.platform-icon {
		font-size: 2.5rem;
		margin-bottom: calc(var(--grid-unit) * 0.3);
	}

	.platform-name {
		font-size: 0.9375rem;
		font-weight: 600;
		color: #cbd5e1;
	}

	/* Sidebar */
	.sidebar {
		position: sticky;
		top: calc(var(--grid-unit) * 2);
	}

	.sidebar-card {
		background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
		border: 1px solid rgba(248, 250, 252, 0.1);
		border-radius: 20px;
		padding: calc(var(--grid-unit) * 1);
		margin-bottom: calc(var(--grid-unit) * 1);
		backdrop-filter: blur(10px);
	}

	.sidebar-title {
		font-size: 1.125rem;
		font-weight: 700;
		color: #f8fafc;
		margin: 0 0 calc(var(--grid-unit) * 0.75) 0;
	}

	/* Mana Card */
	.mana-card {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
		border-color: rgba(59, 130, 246, 0.3);
	}

	.mana-display {
		text-align: center;
		padding: calc(var(--grid-unit) * 1) 0;
		border-bottom: 1px solid rgba(248, 250, 252, 0.1);
		margin-bottom: calc(var(--grid-unit) * 0.75);
	}

	.mana-value {
		font-size: 3.5rem;
		font-weight: 800;
		color: #60a5fa;
		line-height: 1;
	}

	.mana-label {
		font-size: 1.25rem;
		color: #93c5fd;
		font-weight: 600;
		margin-top: calc(var(--grid-unit) * 0.2);
	}

	.mana-sub {
		font-size: 0.9375rem;
		color: #94a3b8;
		margin-top: calc(var(--grid-unit) * 0.3);
	}

	.mana-range {
		display: flex;
		align-items: center;
		gap: calc(var(--grid-unit) * 0.5);
	}

	.mana-range-item {
		flex: 1;
		text-align: center;
	}

	.range-label {
		display: block;
		font-size: 0.75rem;
		color: #64748b;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-bottom: calc(var(--grid-unit) * 0.1);
	}

	.range-value {
		display: block;
		font-size: 1.5rem;
		font-weight: 700;
		color: #cbd5e1;
	}

	.mana-range-divider {
		width: 1px;
		height: 30px;
		background: rgba(248, 250, 252, 0.1);
	}

	/* Quick Features */
	.quick-features {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.quick-feature {
		display: flex;
		align-items: flex-start;
		gap: calc(var(--grid-unit) * 0.3);
		padding: calc(var(--grid-unit) * 0.3) 0;
		color: #cbd5e1;
		font-size: 0.9375rem;
		line-height: 1.4;
	}

	.quick-check {
		width: 18px;
		height: 18px;
		color: #4ade80;
		flex-shrink: 0;
		margin-top: 2px;
	}

	/* CTA Card */
	.cta-card {
		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
		border-color: rgba(59, 130, 246, 0.3);
	}

	.cta-title {
		font-size: 1.25rem;
		font-weight: 700;
		color: white;
		margin: 0 0 calc(var(--grid-unit) * 0.3) 0;
	}

	.cta-text {
		color: rgba(255, 255, 255, 0.9);
		font-size: 0.9375rem;
		margin: 0 0 calc(var(--grid-unit) * 0.75) 0;
		line-height: 1.5;
	}

	.cta-button {
		display: block;
		width: 100%;
		padding: calc(var(--grid-unit) * 0.4);
		background: white;
		color: #2563eb;
		font-weight: 600;
		font-size: 1rem;
		border-radius: 10px;
		text-decoration: none;
		text-align: center;
		transition: all 0.3s ease;
	}

	.cta-button:hover {
		background: #f1f5f9;
		transform: translateY(-2px);
	}

	.cta-link {
		display: block;
		text-align: center;
		color: rgba(255, 255, 255, 0.8);
		font-size: 0.875rem;
		margin-top: calc(var(--grid-unit) * 0.5);
		text-decoration: none;
		transition: color 0.2s;
	}

	.cta-link:hover {
		color: white;
	}

	/* More Apps Section */
	.more-apps-section {
		background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
		padding: calc(var(--grid-unit) * 3) 0;
	}

	.more-apps-container {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 calc(var(--grid-unit) * 2);
	}

	.more-apps-title {
		font-size: clamp(1.75rem, 3vw, 2.25rem);
		font-weight: 800;
		color: #f8fafc;
		text-align: center;
		margin: 0 0 calc(var(--grid-unit) * 2) 0;
	}

	.more-apps-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: calc(var(--grid-unit) * 1);
		margin-bottom: calc(var(--grid-unit) * 2);
	}

	.more-app-card {
		background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
		border: 1px solid rgba(248, 250, 252, 0.1);
		border-radius: 16px;
		padding: calc(var(--grid-unit) * 1.25);
		text-decoration: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		transition: all 0.3s ease;
	}

	.more-app-card:hover {
		border-color: rgba(59, 130, 246, 0.3);
		transform: translateY(-4px);
	}

	.more-app-icon {
		width: 80px;
		height: 80px;
		background: rgba(59, 130, 246, 0.1);
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: calc(var(--grid-unit) * 0.75);
	}

	.more-icon-img {
		width: 60px;
		height: 60px;
		object-fit: contain;
	}

	.more-icon-emoji {
		font-size: 2.5rem;
	}

	.more-app-name {
		font-size: 1.25rem;
		font-weight: 700;
		color: #f8fafc;
		margin: 0 0 calc(var(--grid-unit) * 0.3) 0;
	}

	.more-app-desc {
		font-size: 0.9375rem;
		color: #94a3b8;
		margin: 0;
		line-height: 1.5;
	}

	.more-apps-cta {
		text-align: center;
	}

	.btn-all-apps {
		display: inline-block;
		padding: 0 calc(var(--grid-unit) * 1.5);
		height: calc(var(--grid-unit) * 1.25);
		background: rgba(59, 130, 246, 0.15);
		color: #60a5fa;
		border: 1px solid rgba(59, 130, 246, 0.3);
		border-radius: 12px;
		font-weight: 600;
		font-size: 1.0625rem;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.btn-all-apps:hover {
		background: rgba(59, 130, 246, 0.25);
		border-color: rgba(59, 130, 246, 0.5);
	}

	/* Back Section */
	.back-section {
		background: #0f172a;
		padding: calc(var(--grid-unit) * 1.5) 0;
	}

	.back-container {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 calc(var(--grid-unit) * 2);
	}

	.back-link {
		display: inline-flex;
		align-items: center;
		gap: calc(var(--grid-unit) * 0.3);
		color: #94a3b8;
		text-decoration: none;
		font-size: 0.9375rem;
		transition: all 0.3s ease;
	}

	.back-link:hover {
		color: #cbd5e1;
	}

	.back-arrow {
		width: 20px;
		height: 20px;
		transition: transform 0.3s ease;
	}

	.back-link:hover .back-arrow {
		transform: translateX(-4px);
	}

	/* Responsive */
	@media (max-width: 1200px) {
		.advantage-content {
			grid-template-columns: 1fr;
		}

		.advantage-visual {
			order: -1;
		}
	}

	@media (max-width: 1024px) {
		.content-wrapper {
			grid-template-columns: 1fr;
		}

		.sidebar {
			position: static;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: calc(var(--grid-unit) * 1);
		}
	}

	@media (max-width: 768px) {
		.app-hero {
			padding: calc(var(--grid-unit) * 3) 0 calc(var(--grid-unit) * 2) 0;
		}

		.app-hero-icon {
			width: 100px;
			height: 100px;
		}

		.icon-emoji {
			font-size: 3rem;
		}

		.icon-image {
			width: 60px;
			height: 60px;
		}

		.app-hero-cta {
			flex-direction: column;
			width: 100%;
		}

		.btn-start,
		.btn-website {
			width: 100%;
		}

		.app-main {
			padding: calc(var(--grid-unit) * 2) 0;
		}

		.app-container {
			padding: 0 calc(var(--grid-unit) * 1);
		}

		.features-grid {
			grid-template-columns: 1fr;
		}

		.use-cases-grid {
			grid-template-columns: 1fr;
		}

		.cost-comparison {
			flex-direction: column;
		}

		.comparison-arrow {
			transform: rotate(90deg);
		}

		.platform-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		.sidebar {
			grid-template-columns: 1fr;
		}

		.more-apps-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 640px) {
		.app-hero-content {
			padding: 0 calc(var(--grid-unit) * 1);
		}

		.app-container {
			padding: 0 calc(var(--grid-unit) * 0.75);
		}

		.section-block {
			margin-bottom: calc(var(--grid-unit) * 2);
		}

		.prose-section {
			padding: var(--grid-unit);
		}

		.mana-advantage {
			padding: calc(var(--grid-unit) * 1.25);
		}

		.trust-grid {
			grid-template-columns: 1fr;
		}
	}
</style>
