From d3dd26bd770b3690bb0a14f3cc8c135d18de55df Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Fri, 23 Jan 2026 17:46:41 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(shared-landing-ui):=20add=20ce?=
 =?UTF-8?q?ntralized=20Mana=20pricing=20system?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add unified pricing components for the Mana credit system:
- Central pricing data with plans, packages, and translations
- ManaPricingSection component with billing toggle and trust indicators
- Pricing pages for Chat and ManaDeck landings
- Footer links updated to /pricing pages
---
 .../apps/landing/src/components/Footer.astro  |    2 +-
 .../chat/apps/landing/src/pages/pricing.astro |   23 +
 .../apps/landing/src/components/Footer.astro  |    2 +-
 .../apps/landing/src/pages/pricing.astro      |   23 +
 packages/shared-landing-ui/package.json       |    1 +
 .../shared-landing-ui/src/data/pricing.ts     |  349 ++++++
 packages/shared-landing-ui/src/index.ts       |    5 +
 .../src/sections/ManaPricingSection.astro     | 1066 +++++++++++++++++
 8 files changed, 1469 insertions(+), 2 deletions(-)
 create mode 100644 apps/chat/apps/landing/src/pages/pricing.astro
 create mode 100644 apps/manadeck/apps/landing/src/pages/pricing.astro
 create mode 100644 packages/shared-landing-ui/src/data/pricing.ts
 create mode 100644 packages/shared-landing-ui/src/sections/ManaPricingSection.astro

diff --git a/apps/chat/apps/landing/src/components/Footer.astro b/apps/chat/apps/landing/src/components/Footer.astro
index 2db077b3f..b9cc1f666 100644
--- a/apps/chat/apps/landing/src/components/Footer.astro
+++ b/apps/chat/apps/landing/src/components/Footer.astro
@@ -2,7 +2,7 @@
 const footerLinks = {
 	product: [
 		{ href: '#features', label: 'Features' },
-		{ href: '#pricing', label: 'Preise' },
+		{ href: '/pricing', label: 'Preise' },
 		{ href: '#faq', label: 'FAQ' },
 	],
 	legal: [
diff --git a/apps/chat/apps/landing/src/pages/pricing.astro b/apps/chat/apps/landing/src/pages/pricing.astro
new file mode 100644
index 000000000..50d9c75a4
--- /dev/null
+++ b/apps/chat/apps/landing/src/pages/pricing.astro
@@ -0,0 +1,23 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Navigation from '../components/Navigation.astro';
+import Footer from '../components/Footer.astro';
+import ManaPricingSection from '@manacore/shared-landing-ui/sections/ManaPricingSection.astro';
+---
+
+<Layout
+	title="Preise - ManaChat"
+	description="Transparente Preise für ManaChat - Wähle den passenden Mana-Plan für deine KI-Chat-Nutzung."
+>
+	<Navigation />
+
+	<main class="pt-20">
+		<ManaPricingSection
+			showOneTime={true}
+			showTrustIndicators={true}
+			ctaBaseUrl="https://app.manacore.io/register"
+		/>
+	</main>
+
+	<Footer />
+</Layout>
diff --git a/apps/manadeck/apps/landing/src/components/Footer.astro b/apps/manadeck/apps/landing/src/components/Footer.astro
index 7c3bf65c9..da39a1cc2 100644
--- a/apps/manadeck/apps/landing/src/components/Footer.astro
+++ b/apps/manadeck/apps/landing/src/components/Footer.astro
@@ -2,7 +2,7 @@
 const footerLinks = {
 	product: [
 		{ href: '#features', label: 'Features' },
-		{ href: '#pricing', label: 'Preise' },
+		{ href: '/pricing', label: 'Preise' },
 		{ href: '#faq', label: 'FAQ' },
 	],
 	legal: [
diff --git a/apps/manadeck/apps/landing/src/pages/pricing.astro b/apps/manadeck/apps/landing/src/pages/pricing.astro
new file mode 100644
index 000000000..547087506
--- /dev/null
+++ b/apps/manadeck/apps/landing/src/pages/pricing.astro
@@ -0,0 +1,23 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Navigation from '../components/Navigation.astro';
+import Footer from '../components/Footer.astro';
+import ManaPricingSection from '@manacore/shared-landing-ui/sections/ManaPricingSection.astro';
+---
+
+<Layout
+	title="Preise - ManaDeck"
+	description="Transparente Preise für ManaDeck - Wähle den passenden Mana-Plan für deine Karteikarten und Lerndecks."
+>
+	<Navigation />
+
+	<main class="pt-20">
+		<ManaPricingSection
+			showOneTime={true}
+			showTrustIndicators={true}
+			ctaBaseUrl="https://app.manacore.io/register"
+		/>
+	</main>
+
+	<Footer />
+</Layout>
diff --git a/packages/shared-landing-ui/package.json b/packages/shared-landing-ui/package.json
index 57a804564..fcb62a4c1 100644
--- a/packages/shared-landing-ui/package.json
+++ b/packages/shared-landing-ui/package.json
@@ -12,6 +12,7 @@
 		"./templates/*": "./src/templates/*",
 		"./utils": "./src/utils/index.ts",
 		"./i18n": "./src/i18n/index.ts",
+		"./data/pricing": "./src/data/pricing.ts",
 		"./themes": "./src/themes/index.css",
 		"./themes/memoro": "./src/themes/memoro.css",
 		"./themes/manacore": "./src/themes/manacore.css",
diff --git a/packages/shared-landing-ui/src/data/pricing.ts b/packages/shared-landing-ui/src/data/pricing.ts
new file mode 100644
index 000000000..ff31cfe17
--- /dev/null
+++ b/packages/shared-landing-ui/src/data/pricing.ts
@@ -0,0 +1,349 @@
+/**
+ * Centralized Mana Pricing Data
+ *
+ * This file contains all pricing plans and packages for the Mana credit system.
+ * Used across all landing pages for consistent pricing display.
+ */
+
+export interface SubscriptionPlan {
+	id: string;
+	name: string;
+	price: number;
+	priceText: string;
+	monthlyEquivalent?: number;
+	startMana: number;
+	regeneration: number;
+	storage: number;
+	icon: string;
+	popular: boolean;
+	features: string[];
+}
+
+export interface ManaPackage {
+	id: string;
+	name: string;
+	price: number;
+	priceText: string;
+	mana: number;
+	icon: string;
+	pricePerMana: number;
+}
+
+export interface PricingTranslations {
+	// Section headers
+	sectionTitle: string;
+	sectionSubtitle: string;
+	// Billing toggle
+	monthly: string;
+	yearly: string;
+	yearlyDiscount: string;
+	// Card labels
+	startMana: string;
+	regeneration: string;
+	maxStorage: string;
+	manaPerDay: string;
+	manaCredits: string;
+	perMonth: string;
+	perYear: string;
+	perMonthEquivalent: string;
+	free: string;
+	// CTA
+	getStarted: string;
+	selectPlan: string;
+	// One-time section
+	oneTimeTitle: string;
+	oneTimeSubtitle: string;
+	// Trust indicators
+	trustTitle: string;
+	trustSavings: string;
+	trustSavingsDesc: string;
+	trustTeam: string;
+	trustTeamDesc: string;
+	trustControl: string;
+	trustControlDesc: string;
+	trustInstant: string;
+	trustInstantDesc: string;
+}
+
+// Default German translations
+export const defaultPricingTranslations: PricingTranslations = {
+	sectionTitle: 'Transparente Preise für jeden Bedarf',
+	sectionSubtitle:
+		'Wählen Sie zwischen monatlichen Abos mit täglicher Regeneration oder einmaligen Mana-Käufen. Keine versteckten Kosten, keine Mindestlaufzeiten.',
+	monthly: 'Monatlich',
+	yearly: 'Jährlich',
+	yearlyDiscount: '2 Monate gratis',
+	startMana: 'Start-Mana',
+	regeneration: 'Regeneration',
+	maxStorage: 'Max. Speicher',
+	manaPerDay: 'Mana/Tag',
+	manaCredits: 'Mana Credits',
+	perMonth: 'pro Monat',
+	perYear: 'pro Jahr',
+	perMonthEquivalent: '€ pro Monat',
+	free: 'Kostenlos',
+	getStarted: 'Jetzt starten',
+	selectPlan: 'Plan auswählen',
+	oneTimeTitle: 'Einmalige Mana-Käufe',
+	oneTimeSubtitle:
+		'Brauchen Sie sofort mehr Mana? Kaufen Sie Mana-Tränke ohne Abo – perfekt für Projekte oder als Geschenk.',
+	trustTitle: 'Warum Mana das bessere Preismodell ist',
+	trustSavings: 'Bis zu 90% sparen',
+	trustSavingsDesc: 'Gegenüber einzelnen Tool-Abos',
+	trustTeam: 'Team-freundlich',
+	trustTeamDesc: 'Mana teilen im Team möglich',
+	trustControl: 'Volle Kostenkontrolle',
+	trustControlDesc: 'Detaillierte Nutzungsstatistiken',
+	trustInstant: 'Sofort alle Tools',
+	trustInstantDesc: 'Keine Wartezeiten oder Verhandlungen',
+};
+
+// English translations
+export const englishPricingTranslations: PricingTranslations = {
+	sectionTitle: 'Transparent pricing for every need',
+	sectionSubtitle:
+		'Choose between monthly subscriptions with daily regeneration or one-time Mana purchases. No hidden costs, no minimum terms.',
+	monthly: 'Monthly',
+	yearly: 'Yearly',
+	yearlyDiscount: '2 months free',
+	startMana: 'Starting Mana',
+	regeneration: 'Regeneration',
+	maxStorage: 'Max. Storage',
+	manaPerDay: 'Mana/day',
+	manaCredits: 'Mana Credits',
+	perMonth: 'per month',
+	perYear: 'per year',
+	perMonthEquivalent: '€ per month',
+	free: 'Free',
+	getStarted: 'Get started',
+	selectPlan: 'Select plan',
+	oneTimeTitle: 'One-time Mana purchases',
+	oneTimeSubtitle:
+		'Need more Mana right now? Buy Mana potions without a subscription – perfect for projects or as a gift.',
+	trustTitle: 'Why Mana is the better pricing model',
+	trustSavings: 'Save up to 90%',
+	trustSavingsDesc: 'Compared to individual tool subscriptions',
+	trustTeam: 'Team-friendly',
+	trustTeamDesc: 'Share Mana with your team',
+	trustControl: 'Full cost control',
+	trustControlDesc: 'Detailed usage statistics',
+	trustInstant: 'Instant access to all tools',
+	trustInstantDesc: 'No waiting or negotiations',
+};
+
+export const pricingPlans = {
+	monthly: [
+		{
+			id: 'tropfen',
+			name: 'Mana Tropfen',
+			price: 0,
+			priceText: 'Kostenlos',
+			startMana: 150,
+			regeneration: 5,
+			storage: 150,
+			icon: '💧',
+			popular: false,
+			features: ['150 Start-Mana', '5 Mana täglich', '150 Mana Speicher', 'Basis KI-Tools'],
+		},
+		{
+			id: 'kleiner-stream',
+			name: 'Kleiner Stream',
+			price: 5.99,
+			priceText: '5,99€',
+			startMana: 600,
+			regeneration: 20,
+			storage: 600,
+			icon: '🌊',
+			popular: false,
+			features: ['600 Start-Mana', '20 Mana täglich', '600 Mana Speicher', 'Alle Apps verfügbar'],
+		},
+		{
+			id: 'mittlerer-stream',
+			name: 'Mittlerer Stream',
+			price: 14.99,
+			priceText: '14,99€',
+			startMana: 1500,
+			regeneration: 50,
+			storage: 1500,
+			icon: '💫',
+			popular: true,
+			features: ['1.500 Start-Mana', '50 Mana täglich', '1.500 Mana Speicher', 'Priority Support'],
+		},
+		{
+			id: 'grosser-stream',
+			name: 'Großer Stream',
+			price: 29.99,
+			priceText: '29,99€',
+			startMana: 3000,
+			regeneration: 100,
+			storage: 3000,
+			icon: '⭐',
+			popular: false,
+			features: ['3.000 Start-Mana', '100 Mana täglich', '3.000 Mana Speicher', 'Premium Support'],
+		},
+		{
+			id: 'riesiger-stream',
+			name: 'Riesiger Stream',
+			price: 49.99,
+			priceText: '49,99€',
+			startMana: 5000,
+			regeneration: 167,
+			storage: 5000,
+			icon: '🌟',
+			popular: false,
+			features: [
+				'5.000 Start-Mana',
+				'167 Mana täglich',
+				'5.000 Mana Speicher',
+				'Enterprise Features',
+			],
+		},
+	] as SubscriptionPlan[],
+	yearly: [
+		{
+			id: 'tropfen',
+			name: 'Mana Tropfen',
+			price: 0,
+			priceText: 'Kostenlos',
+			monthlyEquivalent: 0,
+			startMana: 150,
+			regeneration: 5,
+			storage: 150,
+			icon: '💧',
+			popular: false,
+			features: ['150 Start-Mana', '5 Mana täglich', '150 Mana Speicher', 'Basis KI-Tools'],
+		},
+		{
+			id: 'kleiner-stream',
+			name: 'Kleiner Stream',
+			price: 59.9,
+			priceText: '59,90€',
+			monthlyEquivalent: 4.99,
+			startMana: 600,
+			regeneration: 20,
+			storage: 600,
+			icon: '🌊',
+			popular: false,
+			features: [
+				'600 Start-Mana',
+				'20 Mana täglich',
+				'600 Mana Speicher',
+				'Alle Apps verfügbar',
+				'✨ 2 Monate gespart',
+			],
+		},
+		{
+			id: 'mittlerer-stream',
+			name: 'Mittlerer Stream',
+			price: 149.9,
+			priceText: '149,90€',
+			monthlyEquivalent: 12.49,
+			startMana: 1500,
+			regeneration: 50,
+			storage: 1500,
+			icon: '💫',
+			popular: true,
+			features: [
+				'1.500 Start-Mana',
+				'50 Mana täglich',
+				'1.500 Mana Speicher',
+				'Priority Support',
+				'✨ 2 Monate gespart',
+			],
+		},
+		{
+			id: 'grosser-stream',
+			name: 'Großer Stream',
+			price: 299.9,
+			priceText: '299,90€',
+			monthlyEquivalent: 24.99,
+			startMana: 3000,
+			regeneration: 100,
+			storage: 3000,
+			icon: '⭐',
+			popular: false,
+			features: [
+				'3.000 Start-Mana',
+				'100 Mana täglich',
+				'3.000 Mana Speicher',
+				'Premium Support',
+				'✨ 2 Monate gespart',
+			],
+		},
+		{
+			id: 'riesiger-stream',
+			name: 'Riesiger Stream',
+			price: 499.9,
+			priceText: '499,90€',
+			monthlyEquivalent: 41.66,
+			startMana: 5000,
+			regeneration: 167,
+			storage: 5000,
+			icon: '🌟',
+			popular: false,
+			features: [
+				'5.000 Start-Mana',
+				'167 Mana täglich',
+				'5.000 Mana Speicher',
+				'Enterprise Features',
+				'✨ 2 Monate gespart',
+			],
+		},
+	] as SubscriptionPlan[],
+	oneTime: [
+		{
+			id: 'small',
+			name: 'Kleiner Mana Trank',
+			price: 4.99,
+			priceText: '4,99€',
+			mana: 350,
+			icon: '🧪',
+			pricePerMana: 0.0143,
+		},
+		{
+			id: 'medium',
+			name: 'Mittlerer Mana Trank',
+			price: 9.99,
+			priceText: '9,99€',
+			mana: 700,
+			icon: '⚗️',
+			pricePerMana: 0.0143,
+		},
+		{
+			id: 'large',
+			name: 'Großer Mana Trank',
+			price: 19.99,
+			priceText: '19,99€',
+			mana: 1400,
+			icon: '🏺',
+			pricePerMana: 0.0143,
+		},
+		{
+			id: 'huge',
+			name: 'Riesiger Mana Trank',
+			price: 39.99,
+			priceText: '39,99€',
+			mana: 2800,
+			icon: '🏛️',
+			pricePerMana: 0.0143,
+		},
+	] as ManaPackage[],
+};
+
+// Helper functions
+export function formatPrice(price: number, locale = 'de-DE'): string {
+	if (price === 0) return locale === 'de-DE' ? 'Kostenlos' : 'Free';
+	return price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+export function formatMana(value: number, locale = 'de-DE'): string {
+	return value.toLocaleString(locale);
+}
+
+export function getMonthlyValue(regenerationPerDay: number, daysInMonth = 30): number {
+	return regenerationPerDay * daysInMonth;
+}
+
+export function getYearlyValue(regenerationPerDay: number): number {
+	return regenerationPerDay * 365;
+}
diff --git a/packages/shared-landing-ui/src/index.ts b/packages/shared-landing-ui/src/index.ts
index 1c50d176b..d2a055d5a 100644
--- a/packages/shared-landing-ui/src/index.ts
+++ b/packages/shared-landing-ui/src/index.ts
@@ -29,6 +29,10 @@
  * import TimelineSection from '@manacore/shared-landing-ui/sections/TimelineSection.astro';
  * import MasonryGridSection from '@manacore/shared-landing-ui/sections/MasonryGridSection.astro';
  * import PrinciplesSection from '@manacore/shared-landing-ui/sections/PrinciplesSection.astro';
+ * import ManaPricingSection from '@manacore/shared-landing-ui/sections/ManaPricingSection.astro';
+ *
+ * // Data
+ * import { pricingPlans, defaultPricingTranslations, englishPricingTranslations } from '@manacore/shared-landing-ui/data/pricing';
  *
  * // Layouts
  * import Footer from '@manacore/shared-landing-ui/layouts/Footer.astro';
@@ -53,3 +57,4 @@
 
 export * from './utils/index';
 export * from './i18n/index';
+export * from './data/pricing';
diff --git a/packages/shared-landing-ui/src/sections/ManaPricingSection.astro b/packages/shared-landing-ui/src/sections/ManaPricingSection.astro
new file mode 100644
index 000000000..89eb15e25
--- /dev/null
+++ b/packages/shared-landing-ui/src/sections/ManaPricingSection.astro
@@ -0,0 +1,1066 @@
+---
+/**
+ * ManaPricingSection - Unified Mana pricing display for all landing pages
+ *
+ * Usage:
+ * ```astro
+ * <ManaPricingSection
+ *   showOneTime={true}
+ *   showTrustIndicators={true}
+ *   ctaBaseUrl="https://app.manacore.io"
+ * />
+ * ```
+ *
+ * Or with custom translations:
+ * ```astro
+ * import { englishPricingTranslations } from '@manacore/shared-landing-ui/data/pricing';
+ * <ManaPricingSection
+ *   translations={englishPricingTranslations}
+ * />
+ * ```
+ */
+
+import {
+	pricingPlans,
+	defaultPricingTranslations,
+	type PricingTranslations,
+} from '../data/pricing';
+
+interface Props {
+	showOneTime?: boolean;
+	showTrustIndicators?: boolean;
+	ctaBaseUrl?: string;
+	translations?: Partial<PricingTranslations>;
+	class?: string;
+}
+
+const {
+	showOneTime = true,
+	showTrustIndicators = true,
+	ctaBaseUrl = '/register',
+	translations: customTranslations = {},
+	class: className = '',
+} = Astro.props;
+
+const t = { ...defaultPricingTranslations, ...customTranslations };
+---
+
+<section class:list={['mana-pricing-section', className]}>
+	<div class="mana-pricing-container">
+		<!-- Header -->
+		<div class="mana-pricing-header">
+			<div class="mana-pricing-icon-wrapper">
+				<svg class="mana-pricing-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					></path>
+				</svg>
+			</div>
+			<h2 class="mana-pricing-title">{t.sectionTitle}</h2>
+			<p class="mana-pricing-subtitle">{t.sectionSubtitle}</p>
+		</div>
+
+		<!-- Billing Toggle -->
+		<div class="mana-billing-toggle-wrapper">
+			<div class="mana-billing-toggle">
+				<button id="mana-monthly-tab" class="mana-billing-tab active" data-billing="monthly">
+					<svg class="mana-billing-tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						></path>
+					</svg>
+					{t.monthly}
+				</button>
+				<button id="mana-yearly-tab" class="mana-billing-tab" data-billing="yearly">
+					<svg class="mana-billing-tab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+					</svg>
+					{t.yearly}
+					<span class="mana-yearly-badge">{t.yearlyDiscount}</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Monthly Plans -->
+		<div id="mana-monthly-plans" class="mana-pricing-content">
+			<div class="mana-pricing-grid mana-pricing-grid-3">
+				{
+					pricingPlans.monthly.slice(0, 3).map((plan) => (
+						<div class:list={['mana-pricing-card', { popular: plan.popular }]}>
+							{plan.popular && <div class="mana-popular-badge">Beliebt</div>}
+							<div class="mana-card-icon">
+								<span>{plan.icon}</span>
+							</div>
+							<h3 class="mana-card-name">{plan.name}</h3>
+							<div class="mana-card-price">
+								<span class="mana-price-value">
+									{plan.price === 0 ? t.free : plan.price.toString().replace('.', ',')}
+								</span>
+								{plan.price > 0 && <span class="mana-price-currency">€</span>}
+							</div>
+							{plan.price > 0 && <p class="mana-price-period">{t.perMonth}</p>}
+
+							<div class="mana-card-stats">
+								<div class="mana-stat mana-stat-blue">
+									<span class="mana-stat-label">{t.startMana}</span>
+									<span class="mana-stat-value">{plan.startMana.toLocaleString('de-DE')}</span>
+								</div>
+								<div class="mana-stat mana-stat-green">
+									<span class="mana-stat-label">{t.regeneration}</span>
+									<span class="mana-stat-value">
+										{plan.regeneration} {t.manaPerDay}
+									</span>
+								</div>
+								<div class="mana-stat mana-stat-purple">
+									<span class="mana-stat-label">{t.maxStorage}</span>
+									<span class="mana-stat-value">{plan.storage.toLocaleString('de-DE')}</span>
+								</div>
+							</div>
+
+							<ul class="mana-card-features">
+								{plan.features.map((feature) => (
+									<li>
+										<svg
+											class="mana-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>
+										{feature}
+									</li>
+								))}
+							</ul>
+
+							<a
+								href={plan.price === 0 ? ctaBaseUrl : `${ctaBaseUrl}?plan=${plan.id}`}
+								class="mana-card-cta"
+							>
+								{plan.price === 0 ? t.getStarted : t.selectPlan}
+							</a>
+						</div>
+					))
+				}
+			</div>
+			{
+				pricingPlans.monthly.length > 3 && (
+					<div class="mana-pricing-grid mana-pricing-grid-2">
+						{pricingPlans.monthly.slice(3).map((plan) => (
+							<div class:list={['mana-pricing-card', { popular: plan.popular }]}>
+								{plan.popular && <div class="mana-popular-badge">Beliebt</div>}
+								<div class="mana-card-icon">
+									<span>{plan.icon}</span>
+								</div>
+								<h3 class="mana-card-name">{plan.name}</h3>
+								<div class="mana-card-price">
+									<span class="mana-price-value">{plan.price.toString().replace('.', ',')}</span>
+									<span class="mana-price-currency">€</span>
+								</div>
+								<p class="mana-price-period">{t.perMonth}</p>
+
+								<div class="mana-card-stats">
+									<div class="mana-stat mana-stat-blue">
+										<span class="mana-stat-label">{t.startMana}</span>
+										<span class="mana-stat-value">{plan.startMana.toLocaleString('de-DE')}</span>
+									</div>
+									<div class="mana-stat mana-stat-green">
+										<span class="mana-stat-label">{t.regeneration}</span>
+										<span class="mana-stat-value">
+											{plan.regeneration} {t.manaPerDay}
+										</span>
+									</div>
+									<div class="mana-stat mana-stat-purple">
+										<span class="mana-stat-label">{t.maxStorage}</span>
+										<span class="mana-stat-value">{plan.storage.toLocaleString('de-DE')}</span>
+									</div>
+								</div>
+
+								<ul class="mana-card-features">
+									{plan.features.map((feature) => (
+										<li>
+											<svg
+												class="mana-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>
+											{feature}
+										</li>
+									))}
+								</ul>
+
+								<a href={`${ctaBaseUrl}?plan=${plan.id}`} class="mana-card-cta">
+									{t.selectPlan}
+								</a>
+							</div>
+						))}
+					</div>
+				)
+			}
+		</div>
+
+		<!-- Yearly Plans -->
+		<div id="mana-yearly-plans" class="mana-pricing-content hidden">
+			<div class="mana-pricing-grid mana-pricing-grid-3">
+				{
+					pricingPlans.yearly.slice(0, 3).map((plan) => (
+						<div class:list={['mana-pricing-card', { popular: plan.popular }]}>
+							{plan.popular && <div class="mana-popular-badge">Beliebt</div>}
+							<div class="mana-card-icon">
+								<span>{plan.icon}</span>
+							</div>
+							<h3 class="mana-card-name">{plan.name}</h3>
+							<div class="mana-card-price">
+								<span class="mana-price-value">
+									{plan.price === 0 ? t.free : plan.price.toString().replace('.', ',')}
+								</span>
+								{plan.price > 0 && <span class="mana-price-currency">€</span>}
+							</div>
+							{plan.price > 0 && <p class="mana-price-period">{t.perYear}</p>}
+							{plan.monthlyEquivalent && plan.monthlyEquivalent > 0 && (
+								<p class="mana-price-equivalent">
+									{plan.monthlyEquivalent.toFixed(2).replace('.', ',')} {t.perMonthEquivalent}
+								</p>
+							)}
+
+							<div class="mana-card-stats">
+								<div class="mana-stat mana-stat-blue">
+									<span class="mana-stat-label">{t.startMana}</span>
+									<span class="mana-stat-value">{plan.startMana.toLocaleString('de-DE')}</span>
+								</div>
+								<div class="mana-stat mana-stat-green">
+									<span class="mana-stat-label">{t.regeneration}</span>
+									<span class="mana-stat-value">
+										{plan.regeneration} {t.manaPerDay}
+									</span>
+								</div>
+								<div class="mana-stat mana-stat-purple">
+									<span class="mana-stat-label">{t.maxStorage}</span>
+									<span class="mana-stat-value">{plan.storage.toLocaleString('de-DE')}</span>
+								</div>
+							</div>
+
+							<ul class="mana-card-features">
+								{plan.features.map((feature) => (
+									<li>
+										<svg
+											class="mana-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>
+										{feature}
+									</li>
+								))}
+							</ul>
+
+							<a
+								href={
+									plan.price === 0 ? ctaBaseUrl : `${ctaBaseUrl}?plan=${plan.id}&billing=yearly`
+								}
+								class="mana-card-cta"
+							>
+								{plan.price === 0 ? t.getStarted : t.selectPlan}
+							</a>
+						</div>
+					))
+				}
+			</div>
+			{
+				pricingPlans.yearly.length > 3 && (
+					<div class="mana-pricing-grid mana-pricing-grid-2">
+						{pricingPlans.yearly.slice(3).map((plan) => (
+							<div class:list={['mana-pricing-card', { popular: plan.popular }]}>
+								{plan.popular && <div class="mana-popular-badge">Beliebt</div>}
+								<div class="mana-card-icon">
+									<span>{plan.icon}</span>
+								</div>
+								<h3 class="mana-card-name">{plan.name}</h3>
+								<div class="mana-card-price">
+									<span class="mana-price-value">{plan.price.toString().replace('.', ',')}</span>
+									<span class="mana-price-currency">€</span>
+								</div>
+								<p class="mana-price-period">{t.perYear}</p>
+								{plan.monthlyEquivalent && (
+									<p class="mana-price-equivalent">
+										{plan.monthlyEquivalent.toFixed(2).replace('.', ',')} {t.perMonthEquivalent}
+									</p>
+								)}
+
+								<div class="mana-card-stats">
+									<div class="mana-stat mana-stat-blue">
+										<span class="mana-stat-label">{t.startMana}</span>
+										<span class="mana-stat-value">{plan.startMana.toLocaleString('de-DE')}</span>
+									</div>
+									<div class="mana-stat mana-stat-green">
+										<span class="mana-stat-label">{t.regeneration}</span>
+										<span class="mana-stat-value">
+											{plan.regeneration} {t.manaPerDay}
+										</span>
+									</div>
+									<div class="mana-stat mana-stat-purple">
+										<span class="mana-stat-label">{t.maxStorage}</span>
+										<span class="mana-stat-value">{plan.storage.toLocaleString('de-DE')}</span>
+									</div>
+								</div>
+
+								<ul class="mana-card-features">
+									{plan.features.map((feature) => (
+										<li>
+											<svg
+												class="mana-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>
+											{feature}
+										</li>
+									))}
+								</ul>
+
+								<a href={`${ctaBaseUrl}?plan=${plan.id}&billing=yearly`} class="mana-card-cta">
+									{t.selectPlan}
+								</a>
+							</div>
+						))}
+					</div>
+				)
+			}
+		</div>
+
+		<!-- One-time Purchases -->
+		{
+			showOneTime && (
+				<div class="mana-onetime-section">
+					<div class="mana-onetime-header">
+						<div class="mana-onetime-icon-wrapper">
+							<svg class="mana-onetime-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+								/>
+							</svg>
+						</div>
+						<h3 class="mana-onetime-title">{t.oneTimeTitle}</h3>
+						<p class="mana-onetime-subtitle">{t.oneTimeSubtitle}</p>
+					</div>
+
+					<div class="mana-pricing-grid mana-pricing-grid-4">
+						{pricingPlans.oneTime.map((pkg) => (
+							<div class="mana-package-card">
+								<div class="mana-package-icon">
+									<span>{pkg.icon}</span>
+								</div>
+								<h4 class="mana-package-name">{pkg.name}</h4>
+								<div class="mana-package-price">
+									<span class="mana-price-value">{pkg.price.toString().replace('.', ',')}</span>
+									<span class="mana-price-currency">€</span>
+								</div>
+								<div class="mana-package-mana">
+									<span class="mana-mana-value">{pkg.mana.toLocaleString('de-DE')}</span>
+									<span class="mana-mana-label">{t.manaCredits}</span>
+								</div>
+								<a href={`${ctaBaseUrl}?package=${pkg.id}`} class="mana-card-cta">
+									{t.selectPlan}
+								</a>
+							</div>
+						))}
+					</div>
+				</div>
+			)
+		}
+
+		<!-- Trust Indicators -->
+		{
+			showTrustIndicators && (
+				<div class="mana-trust-section">
+					<h3 class="mana-trust-title">{t.trustTitle}</h3>
+					<div class="mana-trust-grid">
+						<div class="mana-trust-item">
+							<div class="mana-trust-icon mana-trust-icon-green">
+								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
+									/>
+								</svg>
+							</div>
+							<p class="mana-trust-label">{t.trustSavings}</p>
+							<p class="mana-trust-desc">{t.trustSavingsDesc}</p>
+						</div>
+						<div class="mana-trust-item">
+							<div class="mana-trust-icon mana-trust-icon-blue">
+								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+									/>
+								</svg>
+							</div>
+							<p class="mana-trust-label">{t.trustTeam}</p>
+							<p class="mana-trust-desc">{t.trustTeamDesc}</p>
+						</div>
+						<div class="mana-trust-item">
+							<div class="mana-trust-icon mana-trust-icon-purple">
+								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+									/>
+								</svg>
+							</div>
+							<p class="mana-trust-label">{t.trustControl}</p>
+							<p class="mana-trust-desc">{t.trustControlDesc}</p>
+						</div>
+						<div class="mana-trust-item">
+							<div class="mana-trust-icon mana-trust-icon-orange">
+								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 10V3L4 14h7v7l9-11h-7z"
+									/>
+								</svg>
+							</div>
+							<p class="mana-trust-label">{t.trustInstant}</p>
+							<p class="mana-trust-desc">{t.trustInstantDesc}</p>
+						</div>
+					</div>
+				</div>
+			)
+		}
+	</div>
+</section>
+
+<style>
+	.mana-pricing-section {
+		position: relative;
+		background: linear-gradient(
+			180deg,
+			var(--color-background-page) 0%,
+			var(--color-background-card) 100%
+		);
+		padding: 120px 0;
+		overflow: hidden;
+	}
+
+	.mana-pricing-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 0 24px;
+	}
+
+	/* Header */
+	.mana-pricing-header {
+		text-align: center;
+		margin-bottom: 60px;
+	}
+
+	.mana-pricing-icon-wrapper {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 64px;
+		height: 64px;
+		background: var(--color-primary-glow);
+		border-radius: 16px;
+		margin-bottom: 20px;
+	}
+
+	.mana-pricing-icon {
+		width: 32px;
+		height: 32px;
+		color: var(--color-primary);
+	}
+
+	.mana-pricing-title {
+		font-size: clamp(2rem, 4vw, 2.75rem);
+		font-weight: 800;
+		color: var(--color-text-primary);
+		margin: 0 0 16px 0;
+		line-height: 1.2;
+	}
+
+	.mana-pricing-subtitle {
+		font-size: clamp(1rem, 2vw, 1.25rem);
+		color: var(--color-text-secondary);
+		max-width: 700px;
+		margin: 0 auto;
+		line-height: 1.6;
+	}
+
+	/* Billing Toggle */
+	.mana-billing-toggle-wrapper {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 48px;
+	}
+
+	.mana-billing-toggle {
+		display: inline-flex;
+		background: var(--color-background-card);
+		border: 1px solid var(--color-border);
+		border-radius: 16px;
+		padding: 6px;
+	}
+
+	.mana-billing-tab {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 12px 24px;
+		border: none;
+		border-radius: 12px;
+		font-size: 1rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.3s ease;
+		background: transparent;
+		color: var(--color-text-secondary);
+	}
+
+	.mana-billing-tab:hover {
+		color: var(--color-text-primary);
+	}
+
+	.mana-billing-tab.active {
+		background: var(--color-primary);
+		color: white;
+	}
+
+	.mana-billing-tab-icon {
+		width: 20px;
+		height: 20px;
+	}
+
+	.mana-yearly-badge {
+		font-size: 0.75rem;
+		font-weight: 600;
+		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+		color: white;
+		padding: 4px 10px;
+		border-radius: 20px;
+		margin-left: 8px;
+	}
+
+	/* Pricing Grid */
+	.mana-pricing-content.hidden {
+		display: none;
+	}
+
+	.mana-pricing-grid {
+		display: grid;
+		gap: 24px;
+		margin-bottom: 32px;
+	}
+
+	.mana-pricing-grid-3 {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	.mana-pricing-grid-2 {
+		grid-template-columns: repeat(2, 1fr);
+		max-width: 800px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.mana-pricing-grid-4 {
+		grid-template-columns: repeat(4, 1fr);
+	}
+
+	@media (max-width: 1024px) {
+		.mana-pricing-grid-3,
+		.mana-pricing-grid-4 {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@media (max-width: 640px) {
+		.mana-pricing-grid-3,
+		.mana-pricing-grid-2,
+		.mana-pricing-grid-4 {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	/* Pricing Card */
+	.mana-pricing-card {
+		position: relative;
+		background: var(--color-background-card);
+		border: 1px solid var(--color-border);
+		border-radius: 20px;
+		padding: 32px;
+		text-align: center;
+		transition: all 0.3s ease;
+	}
+
+	.mana-pricing-card:hover {
+		border-color: var(--color-primary);
+		transform: translateY(-4px);
+		box-shadow: 0 12px 40px -12px var(--color-primary-glow);
+	}
+
+	.mana-pricing-card.popular {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 1px var(--color-primary-glow);
+	}
+
+	.mana-popular-badge {
+		position: absolute;
+		top: -12px;
+		left: 50%;
+		transform: translateX(-50%);
+		background: var(--color-primary);
+		color: white;
+		font-size: 0.75rem;
+		font-weight: 600;
+		padding: 6px 16px;
+		border-radius: 20px;
+	}
+
+	.mana-card-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 64px;
+		height: 64px;
+		background: var(--color-primary-glow);
+		border-radius: 16px;
+		margin-bottom: 16px;
+		font-size: 2rem;
+	}
+
+	.mana-card-name {
+		font-size: 1.25rem;
+		font-weight: 700;
+		color: var(--color-text-primary);
+		margin: 0 0 16px 0;
+	}
+
+	.mana-card-price {
+		display: flex;
+		align-items: baseline;
+		justify-content: center;
+		gap: 4px;
+		margin-bottom: 4px;
+	}
+
+	.mana-price-value {
+		font-size: 2.5rem;
+		font-weight: 800;
+		color: var(--color-primary);
+	}
+
+	.mana-price-currency {
+		font-size: 1.5rem;
+		color: var(--color-text-secondary);
+	}
+
+	.mana-price-period {
+		font-size: 0.875rem;
+		color: var(--color-text-muted);
+		margin: 0 0 8px 0;
+	}
+
+	.mana-price-equivalent {
+		font-size: 0.875rem;
+		color: var(--color-text-secondary);
+		margin: 0 0 16px 0;
+	}
+
+	/* Stats */
+	.mana-card-stats {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		margin-bottom: 24px;
+	}
+
+	.mana-stat {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 16px;
+		border-radius: 12px;
+	}
+
+	.mana-stat-blue {
+		background: rgba(59, 130, 246, 0.1);
+	}
+
+	.mana-stat-green {
+		background: rgba(16, 185, 129, 0.1);
+	}
+
+	.mana-stat-purple {
+		background: rgba(139, 92, 246, 0.1);
+	}
+
+	.mana-stat-label {
+		font-size: 0.875rem;
+		color: var(--color-text-secondary);
+	}
+
+	.mana-stat-value {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--color-text-primary);
+	}
+
+	/* Features */
+	.mana-card-features {
+		list-style: none;
+		padding: 0;
+		margin: 0 0 24px 0;
+		text-align: left;
+	}
+
+	.mana-card-features li {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		font-size: 0.9375rem;
+		color: var(--color-text-secondary);
+		margin-bottom: 10px;
+	}
+
+	.mana-feature-check {
+		flex-shrink: 0;
+		width: 18px;
+		height: 18px;
+		color: #10b981;
+		margin-top: 2px;
+	}
+
+	/* CTA Button */
+	.mana-card-cta {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		padding: 14px 24px;
+		border: 2px solid var(--color-border);
+		border-radius: 12px;
+		font-size: 1rem;
+		font-weight: 600;
+		color: var(--color-text-primary);
+		text-decoration: none;
+		transition: all 0.3s ease;
+	}
+
+	.mana-card-cta:hover {
+		border-color: var(--color-primary);
+		background: var(--color-primary-glow);
+		color: var(--color-primary);
+	}
+
+	/* One-time Section */
+	.mana-onetime-section {
+		margin-top: 80px;
+		padding-top: 80px;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.mana-onetime-header {
+		text-align: center;
+		margin-bottom: 48px;
+	}
+
+	.mana-onetime-icon-wrapper {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 64px;
+		height: 64px;
+		background: rgba(139, 92, 246, 0.1);
+		border-radius: 16px;
+		margin-bottom: 20px;
+	}
+
+	.mana-onetime-icon {
+		width: 32px;
+		height: 32px;
+		color: #8b5cf6;
+	}
+
+	.mana-onetime-title {
+		font-size: 1.75rem;
+		font-weight: 700;
+		color: var(--color-text-primary);
+		margin: 0 0 12px 0;
+	}
+
+	.mana-onetime-subtitle {
+		font-size: 1rem;
+		color: var(--color-text-secondary);
+		max-width: 600px;
+		margin: 0 auto;
+	}
+
+	/* Package Card */
+	.mana-package-card {
+		background: var(--color-background-card);
+		border: 1px solid var(--color-border);
+		border-radius: 20px;
+		padding: 32px 24px;
+		text-align: center;
+		transition: all 0.3s ease;
+	}
+
+	.mana-package-card:hover {
+		border-color: #8b5cf6;
+		transform: translateY(-4px);
+		box-shadow: 0 12px 40px -12px rgba(139, 92, 246, 0.3);
+	}
+
+	.mana-package-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 56px;
+		height: 56px;
+		background: rgba(139, 92, 246, 0.1);
+		border-radius: 14px;
+		margin-bottom: 16px;
+		font-size: 1.75rem;
+	}
+
+	.mana-package-name {
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: var(--color-text-primary);
+		margin: 0 0 12px 0;
+	}
+
+	.mana-package-price {
+		display: flex;
+		align-items: baseline;
+		justify-content: center;
+		gap: 4px;
+		margin-bottom: 16px;
+	}
+
+	.mana-package-mana {
+		background: rgba(139, 92, 246, 0.1);
+		border-radius: 12px;
+		padding: 16px;
+		margin-bottom: 20px;
+	}
+
+	.mana-mana-value {
+		display: block;
+		font-size: 2rem;
+		font-weight: 800;
+		color: #8b5cf6;
+	}
+
+	.mana-mana-label {
+		display: block;
+		font-size: 0.875rem;
+		color: var(--color-text-secondary);
+		margin-top: 4px;
+	}
+
+	/* Trust Section */
+	.mana-trust-section {
+		margin-top: 80px;
+		padding-top: 80px;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.mana-trust-title {
+		font-size: 1.5rem;
+		font-weight: 700;
+		color: var(--color-text-primary);
+		text-align: center;
+		margin: 0 0 48px 0;
+	}
+
+	.mana-trust-grid {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 32px;
+	}
+
+	@media (max-width: 768px) {
+		.mana-trust-grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@media (max-width: 480px) {
+		.mana-trust-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.mana-trust-item {
+		text-align: center;
+	}
+
+	.mana-trust-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 56px;
+		height: 56px;
+		border-radius: 14px;
+		margin-bottom: 16px;
+		transition: transform 0.3s ease;
+	}
+
+	.mana-trust-item:hover .mana-trust-icon {
+		transform: scale(1.1);
+	}
+
+	.mana-trust-icon svg {
+		width: 28px;
+		height: 28px;
+	}
+
+	.mana-trust-icon-green {
+		background: rgba(16, 185, 129, 0.1);
+		color: #10b981;
+	}
+
+	.mana-trust-icon-blue {
+		background: rgba(59, 130, 246, 0.1);
+		color: #3b82f6;
+	}
+
+	.mana-trust-icon-purple {
+		background: rgba(139, 92, 246, 0.1);
+		color: #8b5cf6;
+	}
+
+	.mana-trust-icon-orange {
+		background: rgba(249, 115, 22, 0.1);
+		color: #f97316;
+	}
+
+	.mana-trust-label {
+		font-size: 1rem;
+		font-weight: 600;
+		color: var(--color-text-primary);
+		margin: 0 0 8px 0;
+	}
+
+	.mana-trust-desc {
+		font-size: 0.875rem;
+		color: var(--color-text-secondary);
+		margin: 0;
+	}
+
+	/* Responsive */
+	@media (max-width: 768px) {
+		.mana-pricing-section {
+			padding: 80px 0;
+		}
+
+		.mana-billing-tab {
+			padding: 10px 16px;
+			font-size: 0.9375rem;
+		}
+
+		.mana-yearly-badge {
+			display: none;
+		}
+	}
+
+	@media (max-width: 480px) {
+		.mana-pricing-section {
+			padding: 60px 0;
+		}
+
+		.mana-pricing-header {
+			margin-bottom: 40px;
+		}
+
+		.mana-pricing-card {
+			padding: 24px;
+		}
+
+		.mana-card-icon {
+			width: 56px;
+			height: 56px;
+			font-size: 1.75rem;
+		}
+
+		.mana-price-value {
+			font-size: 2rem;
+		}
+	}
+</style>
+
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const monthlyTab = document.getElementById('mana-monthly-tab');
+		const yearlyTab = document.getElementById('mana-yearly-tab');
+		const monthlyPlans = document.getElementById('mana-monthly-plans');
+		const yearlyPlans = document.getElementById('mana-yearly-plans');
+
+		function switchBilling(billing: 'monthly' | 'yearly') {
+			if (billing === 'monthly') {
+				monthlyTab?.classList.add('active');
+				yearlyTab?.classList.remove('active');
+				monthlyPlans?.classList.remove('hidden');
+				yearlyPlans?.classList.add('hidden');
+			} else {
+				yearlyTab?.classList.add('active');
+				monthlyTab?.classList.remove('active');
+				yearlyPlans?.classList.remove('hidden');
+				monthlyPlans?.classList.add('hidden');
+			}
+		}
+
+		monthlyTab?.addEventListener('click', () => switchBilling('monthly'));
+		yearlyTab?.addEventListener('click', () => switchBilling('yearly'));
+	});
+</script>