<section id="features" class="section">
	<div class="container">
		<div class="section-header">
			<div class="eyebrow">BUILT FOR STORYTELLERS</div>
			<h2>Everything you need for unforgettable adventures</h2>
		</div>

		<div class="features-grid">
			<div class="feature">
				<div class="feature-icon">✍️</div>
				<h3>Completely Freeform</h3>
				<p>No parser. No verb menus. Write in full sentences or fragments. The LLM understands nuance, sarcasm, and subtext.</p>
			</div>
			<div class="feature">
				<div class="feature-icon">
					<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
						<path d="M21 5v14c0 1.66-4 3-9 3s-9-1.34-9-3V5"></path>
						<path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"></path>
					</svg>
				</div>
				<h3>Perfect Memory</h3>
				<p>Every detail, promise, secret, and grudge is remembered. The world evolves consistently across hours or weeks of play.</p>
			</div>
			<div class="feature">
				<div class="feature-icon">🌍</div>
				<h3>Any Genre. Any Tone.</h3>
				<p>Grimdark fantasy, cozy mystery, cosmic horror, humorous heist, political intrigue, post-apocalyptic romance. You set the rules.</p>
			</div>
			<div class="feature">
				<div class="feature-icon">
					<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<polyline points="23 4 23 10 17 10"></polyline>
						<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
					</svg>
				</div>
				<h3>Persistent Campaigns</h3>
				<p>Save your progress. Return days later. Pick up exactly where you left off — or start a new timeline from any moment.</p>
			</div>
			<div class="feature">
				<div class="feature-icon">⚔️</div>
				<h3>Real Consequences</h3>
				<p>Actions have weight. Allies remember betrayals. Kingdoms fall because of one choice. The story is truly yours.</p>
			</div>
			<div class="feature">
				<div class="feature-icon">💰</div>
				<h3>Fair Usage Pricing</h3>
				<p>Pay only for the tokens the model uses. No monthly fees. Most players spend less than a cup of coffee per week.</p>
			</div>
		</div>
	</div>
</section>

<style>
	/* Features specific */
	.features-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
	.feature {
		background: #121218;
		border: 1px solid #2a2a35;
		border-radius: 16px;
		padding: 26px 24px;
	}
	.feature-icon {
		font-size: 26px;
		margin-bottom: 14px;
		color: #c084fc;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.feature-icon svg {
		width: 26px;
		height: 26px;
		display: block;
	}
	.feature h3 {
		font-size: 1.1rem;
		margin-bottom: 10px;
	}
	.feature p {
		font-size: 0.95rem;
		color: #a1a1aa;
		margin: 0;
	}

	@media (max-width: 900px) {
		.features-grid {
			grid-template-columns: 1fr 1fr;
		}
	}
	@media (max-width: 700px) {
		.features-grid {
			grid-template-columns: 1fr;
		}
	}
</style>
