<section id="pricing" class="section section-alt">
	<div class="container">
		<div class="section-header">
			<div class="eyebrow">TRANSPARENT &amp; SIMPLE</div>
			<h2>Pricing</h2>
			<p>One rate. No subscriptions. Pay only for what you use.</p>
		</div>

		<div class="pricing-card">
			<div class="pricing-badge">PAY AS YOU GO</div>
			
			<div class="pricing-main">
				<div>
					<span class="price">$1</span>
					<span class="price-unit">per million tokens</span>
				</div>
				<p class="pricing-desc">The same low rate whether you're running a 30-minute one-shot or a 200-hour epic.</p>
			</div>

			<div class="pricing-breakdown">
				<div class="breakdown-item">
					<span>Typical hour of rich play</span>
					<span class="breakdown-value">2–6¢</span>
				</div>
				<div class="breakdown-item">
					<span>Full 8-hour campaign session</span>
					<span class="breakdown-value">15–40¢</span>
				</div>
				<div class="breakdown-item">
					<span>Very long detailed story (100k tokens)</span>
					<span class="breakdown-value">$0.10</span>
				</div>
			</div>

			<div class="pricing-note">
				You control model choice in the future (faster/cheaper or more creative).
			</div>

			<a href="/register" class="btn btn-primary large full">Get Started</a>
		</div>
	</div>
</section>

<style>
	/* Pricing specific */
	.pricing-card {
		max-width: 620px;
		margin: 0 auto;
		background: #121218;
		border: 1px solid #2a2a35;
		border-radius: 20px;
		padding: 44px 40px;
		text-align: center;
	}
	.pricing-badge {
		display: inline-block;
		font-size: 12px;
		background: #272733;
		color: #c084fc;
		padding: 3px 13px;
		border-radius: 999px;
		letter-spacing: 1px;
		margin-bottom: 22px;
	}
	.pricing-main {
		margin-bottom: 30px;
	}
	.price {
		font-size: 4.2rem;
		font-weight: 800;
		line-height: 1;
		color: #fff;
	}
	.price-unit {
		display: block;
		font-size: 1.1rem;
		color: #a1a1aa;
		font-weight: 500;
		margin-top: 4px;
	}
	.pricing-desc {
		max-width: 380px;
		margin: 18px auto 0;
		color: #a1a1aa;
	}
	.pricing-breakdown {
		border-top: 1px solid #2a2a35;
		border-bottom: 1px solid #2a2a35;
		padding: 18px 0;
		margin-bottom: 26px;
	}
	.breakdown-item {
		display: flex;
		justify-content: space-between;
		padding: 8px 0;
		font-size: 15px;
		color: #d1d1d6;
	}
	.breakdown-value {
		font-weight: 700;
		color: #c084fc;
	}
	.pricing-note {
		font-size: 13.5px;
		color: #888;
		margin-bottom: 26px;
		line-height: 1.5;
	}
</style>
