:root {
	--brand: #9f8dff;
	--brand-dark: #7e67f2;
	--brand-light: #2b2547;
	--people-brand: #56c78a;
	--people-brand-dark: #3dae73;
	--people-brand-light: #1e3528;
	--people-border: #2c5a42;
	--people-tag-bg: #173424;
	--people-tag-color: #84e0af;
	--surface: #101418;
	--surface-alt: #171d23;
	--border: #2b333d;
	--text: #e9edf2;
	--text-muted: #a2acb8;
	--tag-bg: #252140;
	--tag-color: #c6bfff;
	--shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
	--shadow-hover: 0 10px 34px rgba(73, 138, 255, 0.18);
}

body {
	background: radial-gradient(
		circle at 20% -10%,
		#1d2630 0%,
		#101418 55%,
		#0c1014 100%
	);
	color: var(--text);
}

nav {
	background: rgba(16, 20, 24, 0.95);
	border-bottom-color: var(--border);
}

.nav-links a:hover,
.nav-links a.active {
	color: #ffffff;
}

.hero {
	background: transparent;
}

h1 span {
	color: var(--brand);
}

.hero-stats,
.how-card,
/* .site-card, */
/* .people-card, */
.filter-search {
	background: #18202a;
	border-color: var(--border);
	box-shadow: var(--shadow);
}

/* .site-card {
	background: linear-gradient(180deg, #1b2430 0%, #161d26 100%);
} */

/* .people-card {
	background: linear-gradient(180deg, #1a2721 0%, #152019 100%);
	border-color: var(--people-border);
} */

.how,
.cta-section {
	background: #121920;
	border-color: var(--border);
}
.how {
	border: none;
}

.chip {
	background: #1a212a;
	border-color: var(--border);
	color: var(--text-muted);
}

.chip:hover {
	border-color: var(--brand);
	color: #e6ddff;
}

.chip.active {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

/* .site-card:hover,
.site-cta:hover {
	border-color: var(--brand);
	box-shadow: 0 10px 36px rgba(126, 103, 242, 0.28);
} */

/* .people-card:hover,
.people-cta:hover {
	border-color: var(--people-brand);
	box-shadow: 0 10px 36px rgba(61, 174, 115, 0.28);
} */

.site-tag {
	background: #f4f2ff;
	color: #7a6ed0;
}

.people-tag {
	background: #dbffeb;
	color: #2b8f5a;
}

.site-desc,
.people-desc {
	color: #333;
}
.site-name,
.people-name {
	color: #444;
}
.site-url,
.people-url {
	color: #555;
}
.site-footer {
	border-top-color: #deedff;
}

.people-footer {
	border-top-color: #cdffe5;
}

.site-avatar {
	background: #2a2f3a;
	color: #dbe2ea;
}

.people-avatar {
	background: var(--people-brand-light);
	color: #8ce7b6;
}

.site-cta {
	background: var(--brand);
}

.people-cta {
	background: var(--people-brand);
	color: #08150e;
}

footer {
	background: #090d11;
	color: #8d99a8;
}

.footer-bottom {
	border-top-color: #1a2129;
}
.filter-bar {
	border: 1px solid #2b3b4a;
	border-radius: 36px;
	background: rgba(31, 44, 57, 0.9);
	backdrop-filter: blur(10px);
	max-width: 1200px;
	margin: 16px auto 0;
}