/* === BASE === */
html {
	scrollbar-gutter: stable;
	scroll-padding-top: 96px;
}

body {
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
}

/* Text selection — dark theme (default) */
::selection {
	background-color: #b2e5cb;
	color: #333333;
}

/* Text selection — light theme */
[data-theme='light'] ::selection {
	background-color: #b2e5cb;
	color: #333333;
}

::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #050505;
}
::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 4px;
}

/* === COMPONENTS === */
.glass-panel {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-pro {
	background: rgba(34, 197, 94, 0.08);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(34, 197, 94, 0.35);
}

.title-gradient {
	background: linear-gradient(135deg, #ffffff 0%, #86efac 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-glow {
	background: radial-gradient(
		circle at center,
		rgba(34, 197, 94, 0.15) 0%,
		rgba(0, 0, 0, 0) 70%
	);
}

.reveal {
	opacity: 0;
	transform: translateY(30px) scale(0.98);
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	filter: blur(10px);
}

.reveal.active {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}



@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
	.reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* === MEGA MENU POSITIONING === */
/* Centering relative to the main nav container ensures the menu never goes off-screen and looks balanced */
nav .max-w-7xl {
	position: relative !important;
}

/* We make the trigger groups static so the mega-menu positions itself against the max-w-7xl container instead */
nav .group.relative {
	position: static !important;
}

.mega-menu {
	opacity: 0;
	visibility: hidden;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 100;
	max-width: calc(100vw - 2rem);
}

.group:hover .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

#theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #64748b;
	background: transparent;
	transition: all 0.2s ease;
}

#theme-toggle:hover {
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

#scroll-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 50;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
	backdrop-filter: blur(8px);
}

#scroll-to-top.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

#scroll-to-top:hover {
	background: rgba(34, 197, 94, 0.12);
	border-color: rgba(34, 197, 94, 0.35);
	color: #4ade80;
}

.logo-wordmark {
	fill: #f1f5f9;
	transition: fill 0.3s ease;
}

/* === MEGA MENU CONSISTENCY === */

/* Normalize both menus: same corner radius, padding, and item gap */
nav .mega-menu > div {
	border-radius: 1rem !important;
	padding: 1.25rem !important;
	gap: 0.75rem !important;
	background-color: #0a0a0b !important;
	backdrop-filter: none !important;
}

/* Light mode: proper floating card instead of transparent panel */
[data-theme='light'] nav .mega-menu > div {
	background-color: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.09) !important;
	box-shadow:
		0 8px 28px rgba(0, 0, 0, 0.09),
		0 2px 8px rgba(0, 0, 0, 0.05) !important;
	backdrop-filter: none !important;
}

/* Light mode: more visible item hover (3% was invisible on white) */
[data-theme='light'] nav .mega-menu a:hover {
	background-color: rgba(0, 0, 0, 0.05) !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Light mode: nav trigger text + chevron stay dark on hover */
[data-theme='light'] nav button.hover\:text-white:hover,
[data-theme='light'] nav button.hover\:text-white:hover svg {
	color: #0f172a !important;
}

/* === PRICING TOGGLE (index + pricing pages) === */
.toggle-pill {
	background: #fff1;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 4px;
	display: inline-flex;
	gap: 4px;
}

.toggle-btn {
	padding: 6px 18px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s;
	color: #64748b;
}

.toggle-btn.active {
	background: rgba(34, 197, 94, 0.2);
	color: #4ade80;
	border: 1px solid rgba(34, 197, 94, 0.4);
}

/* === MOCKUP SURFACE SYSTEM (feature pages) === */
.mockup-frame {
	background: #1c1c1e;
}

.mockup-surface {
	background: #141417;
}

.relative.group:has(.mockup-frame) {
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.relative.group:has(.mockup-frame):hover {
	transform: translateY(-4px);
}

.data-row {
	border-radius: 6px;
	padding: 4px 6px;
	margin: 0 -6px;
	transition: background 0.15s ease;
}

.data-row:hover {
	background: rgba(255, 255, 255, 0.05);
}

/* === FORM COMPONENTS === */
.form-input {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	width: 100%;
	outline: none;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
	font-family: 'Inter', sans-serif;
}

.form-input::placeholder {
	color: #64748b;
}

.form-input:focus {
	border-color: rgba(34, 197, 94, 0.5);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

select.form-input option {
	background: #0a0a0b;
	color: #fff;
}

.form-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: #94a3b8;
	margin-bottom: 6px;
}

/* === LIGHT MODE === */
[data-theme='light'] body {
	background-color: #f8fafc !important;
	color: #475569 !important;
}

[data-theme='light'] nav {
	background-color: rgba(248, 250, 252, 0.92) !important;
	border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme='light'] #mobile-menu {
	background-color: #f8fafc !important;
}

[data-theme='light'] .glass-panel {
	background: rgba(0, 0, 0, 0.025) !important;
	border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme='light'] .glass-panel-pro {
	background: rgba(34, 197, 94, 0.06) !important;
	border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme='light'] footer {
	background-color: #f1f5f9 !important;
	border-top-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme='light'] .text-white {
	color: #0f172a !important;
}
[data-theme='light'] .hover\:text-white:hover {
	color: #0f172a !important;
}
[data-theme='light'] .text-slate-200 {
	color: #334155 !important;
}
[data-theme='light'] .text-slate-300 {
	color: #475569 !important;
}
[data-theme='light'] .text-slate-400 {
	color: #64748b !important;
}
[data-theme='light'] .text-slate-500 {
	color: #64748b !important;
}
[data-theme='light'] .text-slate-600 {
	color: #94a3b8 !important;
}
[data-theme='light'] .text-green-300 {
	color: #16a34a !important;
}
[data-theme='light'] .text-green-400 {
	color: #15803d !important;
}

[data-theme='light'] .logo-wordmark {
	fill: #0f172a !important;
}

[data-theme='light'] .title-gradient {
	background: linear-gradient(135deg, #0f172a 0%, #16a34a 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

/* Opacity system for light mode - ensures white text utilities are readable */
[data-theme='light'] .text-white\/5 { color: rgba(15, 23, 42, 0.05) !important; }
[data-theme='light'] .text-white\/10 { color: rgba(15, 23, 42, 0.12) !important; }
[data-theme='light'] .text-white\/20 { color: rgba(15, 23, 42, 0.2) !important; }
[data-theme='light'] .text-white\/30 { color: rgba(15, 23, 42, 0.3) !important; }
[data-theme='light'] .text-white\/40 { color: rgba(15, 23, 42, 0.4) !important; }
[data-theme='light'] .text-white\/50 { color: rgba(15, 23, 42, 0.5) !important; }
[data-theme='light'] .text-white\/60 { color: rgba(15, 23, 42, 0.6) !important; }
[data-theme='light'] .text-white\/70 { color: rgba(15, 23, 42, 0.7) !important; }
[data-theme='light'] .text-white\/80 { color: rgba(15, 23, 42, 0.8) !important; }
[data-theme='light'] .text-white\/90 { color: rgba(15, 23, 42, 0.9) !important; }

/* Mockup specific fixes for light mode */
[data-theme='light'] .bg-\[\#262D31\] { 
	background-color: #f1f5f9 !important; 
	border: 1px solid rgba(0,0,0,0.05) !important;
}
[data-theme='light'] .text-zinc-300 { color: #475569 !important; }
[data-theme='light'] .text-white\/80 { color: #475569 !important; }
[data-theme='light'] .text-white\/90 { color: #1e293b !important; }

/* Group hover fix for legacy components in light mode (e.g. Approach page numbers) */
[data-theme='light'] .group:hover .group-hover\:text-green-500\/20 {
	color: rgba(22, 163, 74, 0.3) !important;
}

[data-theme='light'] .hero-glow {
	background: radial-gradient(
		circle at center,
		rgba(34, 197, 94, 0.1) 0%,
		transparent 70%
	) !important;
}

[data-theme='light'] ::-webkit-scrollbar-track {
	background: #f1f5f9;
}
[data-theme='light'] ::-webkit-scrollbar-thumb {
	background: #cbd5e1;
}
[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

[data-theme='light'] #theme-toggle {
	border-color: rgba(0, 0, 0, 0.12);
	color: #64748b;
}

[data-theme='light'] #theme-toggle:hover {
	border-color: rgba(0, 0, 0, 0.2);
	color: #0f172a;
}



[data-theme='light'] .bg-white\/5,
[data-theme='light'] .bg-white\/\[0\.05\] {
	background-color: rgba(0, 0, 0, 0.04) !important;
}

[data-theme='light'] details > summary {
	color: #0f172a;
}
[data-theme='light'] details {
	border-color: rgba(0, 0, 0, 0.07) !important;
}

/* Background overrides */
[data-theme='light'] .bg-\[\#050507\] {
	background-color: #f1f5f9 !important;
}
[data-theme='light'] .bg-\[\#030304\] {
	background-color: #f8fafc !important;
}
[data-theme='light'] .bg-\[\#020203\] {
	background-color: #f1f5f9 !important;
}
[data-theme='light'] .bg-\[\#0A0A0B\]\/95 {
	background-color: rgba(255, 255, 255, 0.98) !important;
}
[data-theme='light'] .bg-\[\#0e0e11\] {
	background-color: #ffffff !important;
}
[data-theme='light'] .bg-\[\#0B0C10\] {
	background-color: #f1f5f9 !important;
}
[data-theme='light'] .bg-\[\#18181b\] {
	background-color: #f8fafc !important;
}
[data-theme='light'] .bg-\[\#030304\]\/80 {
	background-color: rgba(248, 250, 252, 0.92) !important;
}

/* CTA buttons (bg-white text-black) — inverts to dark button in light mode so it stays visible */
[data-theme='light'] .bg-white.text-black {
	background-color: #0f172a !important;
	color: #ffffff !important;
}
[data-theme='light'] .bg-white.text-black:hover {
	background-color: #1e293b !important;
}

/* Border overrides */
[data-theme='light'] .border-white\/5 {
	border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme='light'] .border-white\/10 {
	border-color: rgba(0, 0, 0, 0.1) !important;
}
[data-theme='light'] .border-white\/20 {
	border-color: rgba(0, 0, 0, 0.15) !important;
}
[data-theme='light'] .hover\:border-white\/5:hover {
	border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme='light'] .hover\:border-white\/20:hover {
	border-color: rgba(0, 0, 0, 0.15) !important;
}
[data-theme='light'] .border-slate-600 {
	border-color: #94a3b8 !important;
}

/* Ring overrides */
[data-theme='light'] .ring-white\/5 {
	--tw-ring-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme='light'] .ring-white\/10 {
	--tw-ring-color: rgba(0, 0, 0, 0.08) !important;
}

/* White-alpha background overrides — sections/cards disappear on light bg without these */
[data-theme='light'] .bg-white\/\[0\.01\] {
	background-color: rgba(0, 0, 0, 0.015) !important;
}
[data-theme='light'] .bg-white\/\[0\.03\] {
	background-color: rgba(0, 0, 0, 0.03) !important;
}
[data-theme='light'] .bg-white\/\[0\.04\] {
	background-color: rgba(0, 0, 0, 0.04) !important;
}
[data-theme='light'] .bg-white\/\[0\.06\] {
	background-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme='light'] .bg-white\/\[0\.07\] {
	background-color: rgba(0, 0, 0, 0.07) !important;
}

/* White-alpha border overrides — invisible on light bg without these */
[data-theme='light'] .border-white\/\[0\.05\] {
	border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme='light'] .border-white\/\[0\.07\] {
	border-color: rgba(0, 0, 0, 0.09) !important;
}
[data-theme='light'] .border-white\/\[0\.08\] {
	border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Accent text — light-safe darker versions so they're readable on white bg */
[data-theme='light'] .text-blue-400 {
	color: #1d4ed8 !important;
}
[data-theme='light'] .text-purple-400 {
	color: #7c3aed !important;
}
[data-theme='light'] .text-orange-400 {
	color: #c2410c !important;
}
[data-theme='light'] .text-yellow-400 {
	color: #92400e !important;
}
[data-theme='light'] .text-red-400 {
	color: #b91c1c !important;
}

/* Hover background overrides */
[data-theme='light'] .hover\:bg-white\/\[0\.03\]:hover {
	background-color: rgba(0, 0, 0, 0.05) !important;
}
[data-theme='light'] .hover\:bg-white\/\[0\.04\]:hover,
[data-theme='light'] .hover\:bg-white\/\[0\.05\]:hover {
	background-color: rgba(0, 0, 0, 0.05) !important;
}
[data-theme='light'] .hover\:bg-white\/10:hover,
[data-theme='light'] .group-hover\:bg-white\/10 {
	background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Toggle light mode */
[data-theme='light'] .toggle-pill {
	background: rgba(0, 0, 0, 0.04) !important;
	border-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme='light'] .toggle-btn {
	color: #64748b !important;
}

[data-theme='light'] .toggle-btn.active {
	background: rgba(34, 197, 94, 0.12) !important;
	color: #16a34a !important;
	border-color: rgba(34, 197, 94, 0.35) !important;
}

/* Mockup surface light mode */
[data-theme='light'] .mockup-frame {
	background: #f0f0f0 !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme='light'] .mockup-surface {
	background: #fafafa !important;
	border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme='light'] .mockup-frame .text-white\/90,
[data-theme='light'] .mockup-surface .text-white\/90 {
	color: #1e293b !important;
}

[data-theme='light'] .mockup-frame .text-white\/80,
[data-theme='light'] .mockup-surface .text-white\/80 {
	color: #334155 !important;
}

[data-theme='light'] .mockup-frame .text-white\/70,
[data-theme='light'] .mockup-surface .text-white\/70 {
	color: #475569 !important;
}

[data-theme='light'] .mockup-frame .text-white\/60,
[data-theme='light'] .mockup-surface .text-white\/60 {
	color: #475569 !important;
}

[data-theme='light'] .mockup-frame .text-white\/50,
[data-theme='light'] .mockup-surface .text-white\/50 {
	color: #64748b !important;
}

[data-theme='light'] .mockup-frame .text-white\/40,
[data-theme='light'] .mockup-surface .text-white\/40 {
	color: #94a3b8 !important;
}

[data-theme='light'] .mockup-frame .text-white\/30,
[data-theme='light'] .mockup-surface .text-white\/30 {
	color: #94a3b8 !important;
}

[data-theme='light'] .mockup-frame .text-white\/20,
[data-theme='light'] .mockup-surface .text-white\/20 {
	color: #cbd5e1 !important;
}

[data-theme='light'] .mockup-frame .border-white\/5,
[data-theme='light'] .mockup-surface .border-white\/5 {
	border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme='light'] .mockup-frame .border-white\/10,
[data-theme='light'] .mockup-surface .border-white\/10 {
	border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme='light'] .mockup-frame .bg-white\/5,
[data-theme='light'] .mockup-surface .bg-white\/5 {
	background-color: rgba(0, 0, 0, 0.04) !important;
}

[data-theme='light'] .mockup-frame .bg-white\/\[0\.02\],
[data-theme='light'] .mockup-surface .bg-white\/\[0\.02\] {
	background-color: rgba(0, 0, 0, 0.02) !important;
}

[data-theme='light'] .mockup-frame .text-\[7px\],
[data-theme='light'] .mockup-surface .text-\[7px\] {
	font-size: 9px !important;
}

[data-theme='light'] .mockup-frame .text-\[8px\],
[data-theme='light'] .mockup-surface .text-\[8px\] {
	font-size: 10px !important;
}

[data-theme='light'] .mockup-frame .text-\[9px\],
[data-theme='light'] .mockup-surface .text-\[9px\] {
	font-size: 10px !important;
}

[data-theme='light'] .data-row:hover {
	background: rgba(0, 0, 0, 0.04) !important;
}

/* Form light mode */
[data-theme='light'] .form-input {
	background: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.15) !important;
	color: #1e293b !important;
}

[data-theme='light'] .form-input::placeholder {
	color: #94a3b8 !important;
}

[data-theme='light'] .form-input:focus {
	border-color: rgba(34, 197, 94, 0.5) !important;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

[data-theme='light'] select.form-input option {
	background: #ffffff !important;
	color: #1e293b !important;
}

[data-theme='light'] .form-label {
	color: #475569 !important;
}

[data-theme='light'] .form-input:disabled,
[data-theme='light'] .form-input[disabled] {
	background: #f1f5f9 !important;
	color: #94a3b8 !important;
}

/* === TOC LINKS (privacy-policy, terms) === */
.toc-link {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
	padding: 6px 10px;
	border-radius: 6px;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
	margin-bottom: 1px;
}

.toc-link:hover {
	color: #cbd5e1;
	background: rgba(255, 255, 255, 0.04);
}

.toc-link.active-toc {
	color: #4ade80;
	border-left-color: #4ade80;
	background: rgba(74, 222, 128, 0.06);
	font-weight: 500;
}

[data-theme='light'] .toc-link {
	color: #94a3b8;
}

[data-theme='light'] .toc-link:hover {
	color: #334155;
	background: rgba(0, 0, 0, 0.04);
}

[data-theme='light'] .toc-link.active-toc {
	color: #16a34a;
	border-left-color: #16a34a;
	background: rgba(22, 163, 74, 0.07);
}

/* === PROSE CONTENT (privacy-policy, terms) === */
.prose-content {
	color: #94a3b8;
	font-size: 14px;
	line-height: 1.75;
}

.prose-content section {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.prose-content section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.prose-content h2 {
	font-size: 16px;
	font-weight: 600;
	color: #f1f5f9;
	margin-bottom: 12px;
	margin-top: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prose-content h3 {
	font-size: 13px;
	font-weight: 600;
	color: #cbd5e1;
	margin-top: 20px;
	margin-bottom: 8px;
	letter-spacing: 0.01em;
}

.prose-content p {
	margin-bottom: 12px;
	color: #94a3b8;
}

.prose-content p:last-child {
	margin-bottom: 0;
}

.prose-content ul {
	list-style: disc;
	padding-left: 20px;
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prose-content ul li {
	color: #94a3b8;
	padding-left: 4px;
}

.prose-content ul li::marker {
	color: #4ade80;
}

.prose-content strong {
	color: #e2e8f0;
	font-weight: 600;
}

.prose-content a {
	color: #4ade80;
	text-decoration: none;
	transition: color 0.2s ease;
}

.prose-content a:hover {
	color: #86efac;
	text-decoration: underline;
}

[data-theme='light'] .prose-content {
	color: #475569;
}

[data-theme='light'] .prose-content section {
	border-bottom-color: rgba(0, 0, 0, 0.07);
}

[data-theme='light'] .prose-content h2 {
	color: #0f172a;
	border-bottom-color: rgba(0, 0, 0, 0.07);
}

[data-theme='light'] .prose-content h3 {
	color: #1e293b;
}

[data-theme='light'] .prose-content p,
[data-theme='light'] .prose-content ul li {
	color: #475569;
}

[data-theme='light'] .prose-content ul li::marker {
	color: #16a34a;
}

[data-theme='light'] .prose-content strong {
	color: #1e293b;
}

[data-theme='light'] .prose-content a {
	color: #16a34a;
}

[data-theme='light'] .prose-content a:hover {
	color: #15803d;
}

/* === MARQUEE ANIMATION === */
@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.animate-marquee {
	animation: marquee 80s linear infinite;
	will-change: transform;
}

.animate-marquee:hover {
	animation-play-state: paused;
	cursor: pointer;
}

/* === SECURITY CONCENTRIC CIRCLE ANIMATIONS === */
@keyframes ripple-out {
	0% {
		transform: scale(0.85);
		opacity: 0.9;
	}
	70% {
		opacity: 0.15;
	}
	100% {
		transform: scale(1.35);
		opacity: 0;
	}
}

.center-circle {
	animation: ripple-out 2.4s ease-out infinite 0s;
}

.center-circle--2 {
	animation: ripple-out 2.4s ease-out infinite 0.8s;
}

.center-circle--3 {
	animation: ripple-out 2.4s ease-out infinite 1.6s;
}

/* "How it Works" section: hide the dark gradient overlay in light mode */
[data-theme='light'] #demo > .absolute.inset-0 {
	display: none !important;
}

/* Security section: match the ring color to the light page background */
[data-theme='light'] .ring-\[\#020215\] {
	--tw-ring-color: #f8fafc !important;
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 767px) {
	/* Prevent horizontal overflow from wide fixed elements */
	section {
		overflow-x: hidden;
	}

	/* Nav horizontal padding reduction on very small screens */
	nav .max-w-7xl {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Feature cards: full-width badges don't need to shrink weirdly */
	.feat-panel [class*="rounded-full"][class*="px-2.5"] {
		font-size: 9px;
	}

	/* Stakeholder cards: reduce padding on mobile */
	#stakeholders .grid > div {
		padding: 1.5rem;
	}

	/* Trust marquee: slightly smaller text on mobile */
	.animate-marquee span[class*="text-lg"] {
		font-size: 0.875rem;
	}

	/* Footer: reduce py-20 to something tighter */
	footer {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	/* CTA subtitle: reduce line spacing on mobile */
	#join p.text-lg {
		font-size: 0.9375rem;
	}

	/* Stats section: reduce text size slightly */
	.text-4xl.font-medium {
		font-size: 2rem;
	}
}