---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Sojorn | The Anti-Surveillance Social Network" description="Social media, de-weaponized. No tracking, no rage-bait algorithms, no data harvesting. Just you, your community, and your data—sovereign and secure.">

	<!-- Coming Soon Banner -->
	<div class="bg-brand-800 text-white text-center py-3 text-sm font-semibold tracking-wide">
		Coming Soon — Join the waitlist below
	</div>

	<!-- Hero Section -->
	<section class="relative overflow-hidden bg-gradient-to-br from-zinc-950 via-zinc-900 to-brand-950">
		<div class="absolute inset-0 opacity-10">
			<div class="absolute top-20 right-10 w-[500px] h-[500px] rounded-full bg-brand-500 blur-[120px]"></div>
			<div class="absolute bottom-0 left-20 w-[300px] h-[300px] rounded-full bg-violet-500 blur-[100px]"></div>
		</div>
		<div class="relative mx-auto max-w-6xl px-6 py-24 md:py-32 lg:py-8">
			<div class="lg:flex lg:items-center lg:gap-16">
				<div class="lg:flex-1">
					<span class="inline-flex items-center rounded-full bg-brand-500/20 border border-brand-500/30 px-4 py-1.5 text-xs font-semibold text-brand-300 mb-6">
						Coming Soon
					</span>
					<h1 class="font-display text-4xl font-bold tracking-tight text-white sm:text-5xl md:text-6xl leading-[1.08]">
						Social Media,<br /><span class="text-brand-400">De-Weaponized.</span>
					</h1>
					<p class="mt-6 text-lg text-zinc-400 leading-relaxed max-w-xl">
						No tracking pixels. No shadow profiles. No algorithms designed to make you angry. Just you, your community, and your data — sovereign and secure.
					</p>
					<p class="mt-4 text-zinc-500 leading-relaxed max-w-xl">
						Sojorn rejects the "attention economy." We have rebuilt social networking from the ground up to serve the user, not the advertiser. With military-grade encryption, anonymous local intelligence, and a creative studio that puts privacy first, Sojorn is where the internet becomes human again.
					</p>
					<div class="mt-2 flex flex-wrap gap-4">
						<a href="/sojorn-beta" class="inline-flex items-center rounded-lg bg-brand-600 px-6 py-3.5 text-sm font-semibold text-white shadow-lg hover:bg-brand-500 transition-colors">
							Join the Beta
						</a>
						<a href="#pillars" class="inline-flex items-center rounded-lg border border-zinc-700 px-6 py-3.5 text-sm font-semibold text-zinc-300 hover:bg-zinc-800 transition-colors">
							Learn More
						</a>
					</div>
				</div>
				<div class="mt-12 lg:mt-0 lg:flex-1">
					<!-- App Screenshot Placeholder -->
					<div class="relative mx-auto max-w-[280px]">
						<div class="rounded-[2.5rem] border-[6px] border-zinc-700 bg-zinc-800 p-2 shadow-2xl shadow-brand-500/10">
							<div class="rounded-[2rem] bg-zinc-900 aspect-[9/19.5] flex items-center justify-center">
								<div class="text-center px-6">
									<img src="/img/sojornlogo.png" alt="Sojorn" class="mx-auto h-16 mb-4 opacity-60" />
									<p class="text-zinc-600 text-xs font-mono">APP SCREENSHOT</p>
									<p class="text-zinc-700 text-[10px] mt-1">Hero / Home Screen</p>
								</div>
							</div>
						</div>
						<div class="absolute -bottom-4 -right-4 w-24 h-24 rounded-2xl bg-brand-600/20 border border-brand-500/30 backdrop-blur-sm flex items-center justify-center">
							<div class="text-center">
								<p class="text-brand-400 text-lg font-bold">E2EE</p>
								<p class="text-brand-500 text-[9px]">Encrypted</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Three Pillars -->
	<section id="pillars" class="py-20 md:py-28 bg-white">
		<div class="mx-auto max-w-6xl px-6">
			<div class="max-w-3xl mx-auto text-center mb-16">
				<p class="text-sm font-semibold uppercase tracking-widest text-brand-600 mb-3">Three Experiences, One Platform</p>
				<h2 class="font-display text-3xl font-bold text-zinc-900 sm:text-4xl">Not one feed — three distinct worlds.</h2>
				<p class="mt-4 text-zinc-600 leading-relaxed">
					Sojorn separates your social life, your entertainment, and your physical safety into three purpose-built experiences.
				</p>
			</div>

			<!-- Pillar 1: Personal -->
			<div class="mb-20">
				<div class="lg:flex lg:items-center lg:gap-16">
					<div class="lg:flex-1 order-2 lg:order-1">
						<!-- App Screenshot Placeholder -->
						<div class="relative mx-auto max-w-[260px]">
							<div class="rounded-[2.5rem] border-[6px] border-zinc-200 bg-zinc-100 p-2 shadow-xl">
								<div class="rounded-[2rem] bg-zinc-50 aspect-[9/19.5] flex items-center justify-center">
									<div class="text-center px-6">
										<div class="w-12 h-12 rounded-full bg-brand-100 flex items-center justify-center mx-auto mb-3">
											<svg class="h-6 w-6 text-brand-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
										</div>
										<p class="text-zinc-400 text-xs font-mono">APP SCREENSHOT</p>
										<p class="text-zinc-500 text-[10px] mt-1">Personal Feed</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="lg:flex-1 order-1 lg:order-2 mb-10 lg:mb-0">
						<span class="inline-flex items-center rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-800 mb-4">Pillar 1</span>
						<h3 class="font-display text-2xl font-bold text-zinc-900 sm:text-3xl">Personal</h3>
						<p class="text-brand-600 font-medium mt-1 mb-4">The Social Core</p>
						<p class="text-zinc-600 leading-relaxed mb-6">
							Stop doom-scrolling. Start connecting. The Personal tab is a curated sanctuary. It displays content strictly from the people and circles you explicitly follow.
						</p>
						<ul class="space-y-4">
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-brand-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-brand-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Human-First Feed</p>
									<p class="text-sm text-zinc-500">Our algorithm works for you, not advertisers. It surfaces content from people you follow without optimizing for outrage, rage-bait, or addictive engagement loops.</p>
								</div>
							</li>
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-brand-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-brand-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Kinetic Threading</p>
									<p class="text-sm text-zinc-500">A revolutionary conversation view that visualizes complex reply chains, making discussions readable and logical.</p>
								</div>
							</li>
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-brand-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-brand-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Chain Quotes</p>
									<p class="text-sm text-zinc-500">Carry the context with you. Our quoting system preserves the history of a conversation, preventing out-of-context manipulation.</p>
								</div>
							</li>
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-brand-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-brand-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Expressive Reactions</p>
									<p class="text-sm text-zinc-500">Move beyond the "Like." Use our custom animated reaction set (Dotto, Blue, Green themes) to express nuance.</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<!-- Pillar 2: Quips -->
			<div class="mb-20">
				<div class="lg:flex lg:items-center lg:gap-16">
					<div class="lg:flex-1 mb-10 lg:mb-0">
						<span class="inline-flex items-center rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-800 mb-4">Pillar 2</span>
						<h3 class="font-display text-2xl font-bold text-zinc-900 sm:text-3xl">Quips</h3>
						<p class="text-violet-600 font-medium mt-1 mb-4">The Creative Studio</p>
						<p class="text-zinc-600 leading-relaxed mb-6">
							Creativity without the spy-ware. Quips offers a full-screen, immersive vertical video experience similar to the giants of the industry, but with one massive difference: we don't harvest your biometrics or behavioral data.
						</p>
						<ul class="space-y-4">
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-violet-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-violet-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Full Creative Suite</p>
									<p class="text-sm text-zinc-500">Record, stitch, and edit videos directly in the app.</p>
								</div>
							</li>
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-violet-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-violet-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Smart Overlays</p>
									<p class="text-sm text-zinc-500">Add text, filters, and metadata layers to tell your story.</p>
								</div>
							</li>
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-violet-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-violet-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Glassmorphic Interface</p>
									<p class="text-sm text-zinc-500">A stunning, modern viewing experience that puts the content front and center.</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="lg:flex-1">
						<!-- App Screenshot Placeholder -->
						<div class="relative mx-auto max-w-[260px]">
							<div class="rounded-[2.5rem] border-[6px] border-zinc-800 bg-zinc-900 p-2 shadow-xl">
								<div class="rounded-[2rem] bg-gradient-to-br from-violet-950 to-zinc-950 aspect-[9/19.5] flex items-center justify-center">
									<div class="text-center px-6">
										<div class="w-12 h-12 rounded-full bg-violet-500/20 flex items-center justify-center mx-auto mb-3">
											<svg class="h-6 w-6 text-violet-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
										</div>
										<p class="text-zinc-500 text-xs font-mono">APP SCREENSHOT</p>
										<p class="text-zinc-600 text-[10px] mt-1">Quips Video Feed</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Pillar 3: Beacons -->
			<div>
				<div class="lg:flex lg:items-center lg:gap-16">
					<div class="lg:flex-1 order-2 lg:order-1">
						<!-- App Screenshot Placeholder -->
						<div class="relative mx-auto max-w-[260px]">
							<div class="rounded-[2.5rem] border-[6px] border-zinc-200 bg-zinc-100 p-2 shadow-xl">
								<div class="rounded-[2rem] bg-gradient-to-br from-emerald-50 to-zinc-50 aspect-[9/19.5] flex items-center justify-center">
									<div class="text-center px-6">
										<div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-3">
											<svg class="h-6 w-6 text-emerald-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
										</div>
										<p class="text-zinc-400 text-xs font-mono">APP SCREENSHOT</p>
										<p class="text-zinc-500 text-[10px] mt-1">Beacons Map View</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="lg:flex-1 order-1 lg:order-2 mb-10 lg:mb-0">
						<span class="inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-800 mb-4">Pillar 3</span>
						<h3 class="font-display text-2xl font-bold text-zinc-900 sm:text-3xl">Beacons</h3>
						<p class="text-emerald-600 font-medium mt-1 mb-4">Local Intelligence</p>
						<p class="text-zinc-600 leading-relaxed mb-6">
							Know your neighborhood. Keep your anonymity. Beacons combine the utility of Citizen with the community aspect of Nextdoor, minus the surveillance and doxxing.
						</p>
						<ul class="space-y-4">
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-emerald-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-emerald-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Geo-Located Intel</p>
									<p class="text-sm text-zinc-500">Drop a Beacon to report incidents, share local tips, or flag resources.</p>
								</div>
							</li>
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-emerald-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-emerald-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">Total Anonymity</p>
									<p class="text-sm text-zinc-500">Beacons are never attached to your public profile. No name, handle, or avatar is displayed. Keep your community safe without exposing your identity.</p>
								</div>
							</li>
							<li class="flex gap-3">
								<div class="flex-shrink-0 mt-1 h-5 w-5 rounded-full bg-emerald-100 flex items-center justify-center">
									<div class="h-2 w-2 rounded-full bg-emerald-600"></div>
								</div>
								<div>
									<p class="font-semibold text-zinc-900 text-sm">The Vouch System</p>
									<p class="text-sm text-zinc-500">Fight misinformation with community consensus. Users "vouch" for the accuracy of a Beacon, elevating trusted intel while suppressing spam.</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Privacy & Data Sovereignty -->
	<section class="py-20 md:py-28 bg-zinc-950 text-white">
		<div class="mx-auto max-w-6xl px-6">
			<div class="max-w-3xl mx-auto text-center mb-16">
				<p class="text-sm font-semibold uppercase tracking-widest text-brand-400 mb-3">Ironclad Privacy</p>
				<h2 class="font-display text-3xl font-bold sm:text-4xl">We don't just promise privacy.<br />We engineered it.</h2>
			</div>

			<div class="grid gap-8 md:grid-cols-3">
				<!-- Zero-Knowledge Encryption -->
				<div class="rounded-2xl border border-zinc-800 bg-zinc-900/60 p-8">
					<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-brand-500/10 mb-5">
						<svg class="h-6 w-6 text-brand-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
					</div>
					<h3 class="text-lg font-semibold mb-3">Zero-Knowledge Encryption</h3>
					<p class="text-sm text-zinc-400 leading-relaxed">
						Your private messages are yours alone. Sojorn uses the Signal Protocol for End-to-End Encryption (E2EE). Keys are generated on your device. We cannot read your messages, and we cannot turn them over to anyone.
					</p>
				</div>

				<!-- Media Sanitization -->
				<div class="rounded-2xl border border-zinc-800 bg-zinc-900/60 p-8">
					<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10 mb-5">
						<svg class="h-6 w-6 text-violet-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
					</div>
					<h3 class="text-lg font-semibold mb-3">Media Sanitization</h3>
					<p class="text-sm text-zinc-400 leading-relaxed mb-4">
						Every photo and video you upload is scrubbed clean. We automatically strip:
					</p>
					<ul class="space-y-2 text-sm text-zinc-500">
						<li class="flex items-center gap-2">
							<svg class="h-4 w-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
							GPS Coordinates
						</li>
						<li class="flex items-center gap-2">
							<svg class="h-4 w-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
							Camera &amp; Lens Metadata
						</li>
						<li class="flex items-center gap-2">
							<svg class="h-4 w-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
							Device Serial Numbers
						</li>
						<li class="flex items-center gap-2">
							<svg class="h-4 w-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
							Timestamps
						</li>
					</ul>
					<p class="text-sm text-zinc-500 mt-3 font-medium">We store pixels and audio. Nothing else.</p>
				</div>

				<!-- Right to Vanish -->
				<div class="rounded-2xl border border-zinc-800 bg-zinc-900/60 p-8">
					<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-red-500/10 mb-5">
						<svg class="h-6 w-6 text-red-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
					</div>
					<h3 class="text-lg font-semibold mb-3">The Right to Vanish</h3>
					<p class="text-sm text-zinc-400 leading-relaxed mb-4">
						We reject the industry standard of "shadow archives."
					</p>
					<ul class="space-y-3 text-sm">
						<li>
							<span class="font-semibold text-zinc-300">Deactivate</span>
							<span class="text-zinc-500"> — Hide your profile.</span>
						</li>
						<li>
							<span class="font-semibold text-zinc-300">Delete</span>
							<span class="text-zinc-500"> — A 14-day grace period, then total destruction.</span>
						</li>
						<li>
							<span class="font-semibold text-red-400">Immediate Destroy</span>
							<span class="text-zinc-500"> — A "kill switch" that instantly and permanently erases all your data from our servers.</span>
						</li>
					</ul>
					<p class="text-sm text-zinc-400 mt-4 font-medium">When you leave, you leave.</p>
				</div>
			</div>
		</div>
	</section>

	<!-- Trust & Safety -->
	<section class="py-20 md:py-28 bg-zinc-50">
		<div class="mx-auto max-w-6xl px-6">
			<div class="lg:flex lg:items-start lg:gap-16">
				<div class="lg:flex-1 mb-12 lg:mb-0">
					<p class="text-sm font-semibold uppercase tracking-widest text-brand-600 mb-3">Trust &amp; Safety</p>
					<h2 class="font-display text-3xl font-bold text-zinc-900 sm:text-4xl">A safe space<br />with a backbone.</h2>
					<p class="mt-6 text-zinc-600 leading-relaxed">
						Sojorn is dedicated to safety and progressive action. We enforce a Zero Tolerance Policy against hate speech, fascism, and verifiable disinformation.
					</p>

					<div class="mt-8 space-y-6">
						<div class="flex gap-4">
							<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-brand-100 flex items-center justify-center">
								<svg class="h-5 w-5 text-brand-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" /></svg>
							</div>
							<div>
								<p class="font-semibold text-zinc-900">Tone Analysis</p>
								<p class="text-sm text-zinc-500">Our tone analysis engine scans public posts to detect toxicity before it spreads. This never touches your E2EE private messages.</p>
							</div>
						</div>
						<div class="flex gap-4">
							<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-amber-100 flex items-center justify-center">
								<svg class="h-5 w-5 text-amber-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>
							</div>
							<div>
								<p class="font-semibold text-zinc-900">The Strike System</p>
								<p class="text-sm text-zinc-500">A transparent system for handling violations with clear rules and consistent enforcement.</p>
							</div>
						</div>
						<div class="flex gap-4">
							<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-emerald-100 flex items-center justify-center">
								<svg class="h-5 w-5 text-emerald-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" /></svg>
							</div>
							<div>
								<p class="font-semibold text-zinc-900">Due Process</p>
								<p class="text-sm text-zinc-500">A built-in Appeals Handler allows you to contest moderation decisions. We believe in fairness, not automated bans without recourse.</p>
							</div>
						</div>
						<div class="flex gap-4">
							<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-zinc-200 flex items-center justify-center">
								<svg class="h-5 w-5 text-zinc-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" /></svg>
							</div>
							<div>
								<p class="font-semibold text-zinc-900">Bot-Free Zone</p>
								<p class="text-sm text-zinc-500">We use Cloudflare Turnstile integration to ensure that every Beacon and Quip comes from a human, not a farm.</p>
							</div>
						</div>
					</div>
				</div>
				<div class="lg:flex-1">
					<!-- App Screenshot Placeholder -->
					<div class="relative mx-auto max-w-[280px]">
						<div class="rounded-[2.5rem] border-[6px] border-zinc-200 bg-zinc-100 p-2 shadow-xl">
							<div class="rounded-[2rem] bg-white aspect-[9/19.5] flex items-center justify-center">
								<div class="text-center px-6">
									<div class="w-12 h-12 rounded-full bg-zinc-100 flex items-center justify-center mx-auto mb-3">
										<svg class="h-6 w-6 text-zinc-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" /></svg>
									</div>
									<p class="text-zinc-400 text-xs font-mono">APP SCREENSHOT</p>
									<p class="text-zinc-500 text-[10px] mt-1">Safety / Moderation UI</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Technical Transparency -->
	<section class="py-20 md:py-28 bg-white">
		<div class="mx-auto max-w-6xl px-6">
			<div class="max-w-3xl mx-auto text-center mb-16">
				<p class="text-sm font-semibold uppercase tracking-widest text-brand-600 mb-3">Under the Hood</p>
				<h2 class="font-display text-3xl font-bold text-zinc-900 sm:text-4xl">Technical Transparency</h2>
			</div>
			<div class="grid gap-6 md:grid-cols-3">
				<div class="rounded-xl border border-zinc-200 p-6 text-center hover:border-brand-200 hover:shadow-md transition-all">
					<div class="flex h-14 w-14 items-center justify-center rounded-xl bg-brand-50 text-brand-700 mx-auto mb-4">
						<svg class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>
					</div>
					<h3 class="font-semibold text-zinc-900 mb-2">Hosted in Germany</h3>
					<p class="text-sm text-zinc-500">Primary servers on Hetzner utilizing EU data protection standards.</p>
				</div>
				<div class="rounded-xl border border-zinc-200 p-6 text-center hover:border-brand-200 hover:shadow-md transition-all">
					<div class="flex h-14 w-14 items-center justify-center rounded-xl bg-brand-50 text-brand-700 mx-auto mb-4">
						<svg class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>
					</div>
					<h3 class="font-semibold text-zinc-900 mb-2">No Third-Party Trackers</h3>
					<p class="text-sm text-zinc-500">No Facebook Pixels. No Google Analytics. No cross-site fingerprinting.</p>
				</div>
				<div class="rounded-xl border border-zinc-200 p-6 text-center hover:border-brand-200 hover:shadow-md transition-all">
					<div class="flex h-14 w-14 items-center justify-center rounded-xl bg-brand-50 text-brand-700 mx-auto mb-4">
						<svg class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>
					</div>
					<h3 class="font-semibold text-zinc-900 mb-2">Open Architecture</h3>
					<p class="text-sm text-zinc-500">Built on a custom Go backend and Flutter frontend for a fast, native experience on iOS, Android, Web, and Windows.</p>
				</div>
			</div>
		</div>
	</section>

	<!-- CTA / Waitlist -->
	<section id="waitlist" class="py-20 md:py-28 bg-gradient-to-br from-brand-900 via-brand-800 to-brand-700">
		<div class="mx-auto max-w-4xl px-6 text-center">
			<img src="/img/sojornlogo.png" alt="Sojorn" class="mx-auto h-20 mb-8 opacity-90" />
			<h2 class="font-display text-3xl font-bold text-white sm:text-4xl">Be Social. Be Safe. Be Sovereign.</h2>
			<p class="mt-4 text-lg text-brand-200 max-w-2xl mx-auto">
				Sojorn is coming soon. Sign up to be notified when we launch and get early access.
			</p>
			<div class="mt-10 flex flex-wrap justify-center gap-4">
				<a href="/sojorn-beta" class="inline-flex items-center gap-2 rounded-lg bg-white px-8 py-3.5 text-sm font-semibold text-brand-900 shadow-lg hover:bg-zinc-100 transition-colors">
					Join the Beta
					<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
				</a>
				<a href="/" class="inline-flex items-center rounded-lg border border-white/30 px-8 py-3.5 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
					Back to MPLS
				</a>
			</div>
		</div>
	</section>

</Layout>