/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; }

/* === VARIABLES === */
:root {
	/* Colors */
	--color-bg:           #0a0a0a;
	--color-surface:      #111111;
	--color-border:       #1e1e1e;
	--color-border-hover: #2e2e2e;
	--color-accent:       #3b82f6;
	--color-accent-dim:   rgba(59, 130, 246, 0.15);
	--color-accent-glow:  rgba(59, 130, 246, 0.3);
	--color-text:         #f1f5f9;
	--color-text-muted:   #64748b;
	--color-text-faint:   #334155;

	/* Status colors */
	--status-active-bg:   rgba(34, 197, 94, 0.1);
	--status-active-text: #22c55e;
	--status-beta-bg:     rgba(59, 130, 246, 0.1);
	--status-beta-text:   #3b82f6;
	--status-proto-bg:    rgba(245, 158, 11, 0.1);
	--status-proto-text:  #f59e0b;
	--status-soon-bg:     rgba(107, 114, 128, 0.1);
	--status-soon-text:   #6b7280;

	/* Typography */
	--font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

	/* Sizing */
	--radius-card:   8px;
	--radius-btn:    6px;
	--transition:    200ms ease;
	--container-max: 1200px;
	--container-pad: 24px;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
}

/* === TYPOGRAPHY === */
body {
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.6;
	background: var(--color-bg);
	color: var(--color-text);
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-text);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.375rem); }
p  { color: var(--color-text-muted); line-height: 1.7; }

.mono { font-family: var(--font-mono); }

a { color: var(--color-accent); transition: color var(--transition); }
a:hover { color: var(--color-text); }
a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* === LAYOUT === */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-10); }

.section-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-4);
}
.section-heading {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin-bottom: var(--space-4);
}
.section-sub {
	font-size: 1rem;
	color: var(--color-text-muted);
	max-width: 540px;
	margin-bottom: var(--space-7);
}
.section-cta-row {
	margin-top: var(--space-7);
	text-align: center;
}

/* === HEADER & NAV === */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: background-color var(--transition), border-color var(--transition), backdrop-filter var(--transition);
}
.site-header.scrolled {
	background-color: rgba(10, 10, 10, 0.85);
	border-bottom-color: var(--color-border);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}
.site-wordmark, .footer-wordmark {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -0.03em;
	color: var(--color-text);
	transition: opacity var(--transition);
}
.site-wordmark:hover, .footer-wordmark:hover { color: var(--color-text); opacity: 0.8; }
.wordmark-accent { color: var(--color-accent); }
.nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.nav-list a {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-muted);
	transition: color var(--transition);
	position: relative;
	padding-bottom: 2px;
}
.nav-list a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-accent);
	transition: width var(--transition);
	border-radius: 1px;
}
.nav-list a:hover,
.nav-list a.active { color: var(--color-text); }
.nav-list a.active::after,
.nav-list a:hover::after { width: 100%; }
.nav-link-github { opacity: 0.5; }

/* Hamburger */
.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: var(--space-2);
}
.hamburger-bar {
	width: 22px;
	height: 1.5px;
	background: var(--color-text);
	border-radius: 1px;
	transition: transform var(--transition), opacity var(--transition);
}

/* Mobile overlay */
.mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--color-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity var(--transition);
}
.mobile-overlay[hidden] { display: none; }
.mobile-close {
	position: absolute;
	top: 20px;
	right: 24px;
	font-size: 28px;
	color: var(--color-text-muted);
	transition: color var(--transition);
}
.mobile-close:hover { color: var(--color-text); }
.mobile-nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	text-align: center;
}
.mobile-nav a {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-text-muted);
	transition: color var(--transition);
}
.mobile-nav a:hover { color: var(--color-text); }

/* === HERO === */
.hero-section {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding-top: 64px;
}
.hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.hero-glow {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 400px;
	background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
	pointer-events: none;
	z-index: 1;
}
.hero-content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	padding-inline: var(--container-pad);
}
.hero-overline {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-5);
}
.hero-headline {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.05;
	color: var(--color-text);
	margin-bottom: var(--space-5);
}
.hero-sub {
	font-size: clamp(1rem, 2vw, 1.125rem);
	color: var(--color-text-muted);
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: var(--space-7);
	line-height: 1.7;
}
.hero-ctas {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}
.hero-scroll-hint {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
.scroll-line {
	display: block;
	width: 1px;
	height: 48px;
	background: linear-gradient(to bottom, transparent, var(--color-accent));
	margin-inline: auto;
	animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
	0%, 100% { opacity: 0.3; transform: scaleY(1); }
	50%       { opacity: 0.8; transform: scaleY(1.2); }
}

/* === BUTTONS === */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 20px;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius-btn);
	transition: all var(--transition);
	cursor: pointer;
	white-space: nowrap;
}
.btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.btn-primary {
	background: var(--color-accent);
	color: #fff;
	border: 1px solid var(--color-accent);
}
.btn-primary:hover {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
	box-shadow: 0 0 20px var(--color-accent-glow);
}
.btn-ghost {
	background: transparent;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
}
.btn-ghost:hover {
	color: var(--color-text);
	border-color: var(--color-border-hover);
	background: var(--color-surface);
}

.text-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-muted);
	transition: color var(--transition);
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}
.text-link:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* === AGENT CARDS === */
.agent-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
.agent-card {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.agent-card:hover {
	transform: translateY(-2px);
	border-color: rgba(59, 130, 246, 0.35);
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.agent-card-link {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-card);
	z-index: 1;
}
.agent-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
}
.agent-icon {
	font-size: 2rem;
	line-height: 1;
	flex-shrink: 0;
}
.agent-card-meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: flex-end;
}
.agent-version {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-text-faint);
	letter-spacing: 0.05em;
}
.agent-version-lg { font-size: 13px; }
.agent-card-title {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0;
}
.agent-card-title a {
	color: var(--color-text);
	position: relative;
	z-index: 2;
	transition: color var(--transition);
}
.agent-card-title a:hover { color: var(--color-accent); }
.agent-card-tagline {
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.5;
	flex-grow: 1;
}
.agent-card-footer {
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}
.agent-card-cta {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	position: relative;
	z-index: 2;
	transition: color var(--transition);
}
.agent-card-cta:hover { color: var(--color-accent); }

/* Status badges */
.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.status-badge-lg { font-size: 13px; padding: 4px 12px; }
.status-active    { background: var(--status-active-bg); color: var(--status-active-text); }
.status-beta      { background: var(--status-beta-bg);   color: var(--status-beta-text);   }
.status-prototype { background: var(--status-proto-bg);  color: var(--status-proto-text);  }
.status-coming-soon { background: var(--status-soon-bg); color: var(--status-soon-text);   }

/* === ARCHIVE === */
.archive-hero {
	padding-top: calc(64px + var(--space-9));
	padding-bottom: var(--space-8);
}
.archive-heading { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-4); }
.archive-sub {
	font-size: 1rem;
	color: var(--color-text-muted);
	max-width: 560px;
}
.filter-row {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-bottom: var(--space-7);
}
.filter-btn {
	padding: 6px 14px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--color-border);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	background: transparent;
	transition: all var(--transition);
	cursor: pointer;
}
.filter-btn:hover {
	color: var(--color-text);
	border-color: var(--color-border-hover);
	background: var(--color-surface);
}
.filter-btn.active {
	background: var(--color-accent-dim);
	border-color: rgba(59, 130, 246, 0.35);
	color: var(--color-accent);
}
.empty-state {
	text-align: center;
	padding-block: var(--space-10);
}
.empty-state-icon { font-size: 3rem; margin-bottom: var(--space-5); }
.empty-state h2 { margin-bottom: var(--space-3); }

/* === SINGLE AGENT === */
.agent-hero {
	position: relative;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding-top: calc(64px + var(--space-9));
	padding-bottom: var(--space-9);
	overflow: hidden;
}
.agent-hero-glow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(to bottom, rgba(59, 130, 246, 0.07) 0%, transparent 100%);
	pointer-events: none;
}
.agent-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}
.agent-hero-icon { font-size: 3.5rem; line-height: 1; }
.agent-hero-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.agent-hero-name {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin-bottom: 0;
}
.agent-hero-tagline {
	font-size: 1.125rem;
	color: var(--color-text-muted);
	max-width: 560px;
}
.agent-body { padding-block: var(--space-9); }
.agent-summary {
	max-width: 680px;
	margin-bottom: var(--space-8);
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
}
.agent-summary p {
	font-size: 1rem;
	color: var(--color-text-muted);
	line-height: 1.75;
}
.agent-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}
.agent-col {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-6);
}
.agent-col-heading {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}
.agent-list { display: flex; flex-direction: column; gap: var(--space-3); }
.agent-list li {
	font-size: 14px;
	color: var(--color-text-muted);
	padding-left: var(--space-4);
	position: relative;
	line-height: 1.5;
}
.agent-list li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-size: 12px;
}
.agent-back { padding-top: var(--space-4); }
.agent-extended-content {
	margin-bottom: var(--space-7);
	color: var(--color-text-muted);
	max-width: 720px;
}

/* === ARCHITECTURE SECTION === */
.arch-section { background: var(--color-bg); }
.arch-flow {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-top: var(--space-7);
}
.arch-node {
	flex: 1;
	text-align: center;
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
}
.arch-connector {
	flex: 0 0 40px;
	height: 1px;
	background: none;
	border-top: 1px dashed var(--color-border);
	margin-top: 52px;
	position: relative;
}
.arch-connector::after {
	content: '';
	position: absolute;
	right: -5px;
	top: -5px;
	width: 8px;
	height: 8px;
	border-top: 1px solid var(--color-text-faint);
	border-right: 1px solid var(--color-text-faint);
	transform: rotate(45deg);
}
.arch-icon {
	font-size: 2rem;
	margin-bottom: var(--space-3);
	display: block;
}
.arch-node-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}
.arch-node-desc {
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* === ABOUT SECTION === */
.about-content { max-width: 640px; }
.about-text p {
	font-size: 1rem;
	color: var(--color-text-muted);
	line-height: 1.8;
	margin-bottom: var(--space-5);
}
.about-text em { color: var(--color-text); font-style: normal; }
.about-manifesto {
	border-left: 2px solid var(--color-accent);
	padding-left: var(--space-5);
	margin-top: var(--space-6);
}
.about-manifesto .mono {
	font-size: 14px;
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* === CTA BANNER === */
.cta-banner-section { padding-block: var(--space-8); }
.cta-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-accent);
	border-radius: var(--radius-card);
	padding: var(--space-7) var(--space-8);
}
.cta-banner-text h2 { margin-bottom: var(--space-2); }
.cta-banner-text p  { color: var(--color-text-muted); margin: 0; }

/* === AGENTS SECTION (homepage) === */
.agents-section { background: var(--color-bg); }

/* === FOOTER === */
.site-footer {
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-8);
}
.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-6);
	padding-bottom: var(--space-8);
}
.footer-tagline {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: var(--space-2);
	max-width: 280px;
}
.footer-nav ul {
	display: flex;
	gap: var(--space-6);
}
.footer-nav a {
	font-size: 13px;
	color: var(--color-text-muted);
	transition: color var(--transition);
}
.footer-nav a:hover { color: var(--color-text); }
.footer-bottom {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-5);
	text-align: center;
}
.footer-bottom p {
	font-size: 12px;
	color: var(--color-text-faint);
	margin: 0;
}

/* === 404 PAGE === */
.not-found-page {
	min-height: calc(100svh - 64px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 64px;
}
.not-found-inner { text-align: center; }
.not-found-code {
	font-family: var(--font-mono);
	font-size: 96px;
	font-weight: 700;
	color: var(--color-border-hover);
	line-height: 1;
	margin-bottom: var(--space-5);
}
.not-found-heading { font-size: 2rem; margin-bottom: var(--space-3); }
.not-found-sub {
	color: var(--color-text-muted);
	margin-bottom: var(--space-7);
}

/* === PAGE CONTENT === */
.page-content { padding-top: calc(64px + var(--space-9)); padding-bottom: var(--space-10); }
.page-title { margin-bottom: var(--space-6); }
.entry-content { color: var(--color-text-muted); line-height: 1.8; max-width: 720px; }
.entry-content p { margin-bottom: var(--space-5); }
.entry-content h2, .entry-content h3 { margin-block: var(--space-6) var(--space-3); }
.no-results { color: var(--color-text-muted); padding-block: var(--space-7); }

/* === UTILITIES === */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
	.agent-columns { grid-template-columns: repeat(2, 1fr); }
	.arch-flow { gap: var(--space-3); }
	.arch-connector { flex: 0 0 20px; }
}

@media (max-width: 768px) {
	:root { --container-pad: 20px; }

	/* Nav */
	.primary-nav { display: none; }
	.hamburger   { display: flex; }

	/* Grids */
	.agent-grid    { grid-template-columns: 1fr; }
	.agent-columns { grid-template-columns: 1fr; }
	.arch-flow     { flex-direction: column; gap: var(--space-4); }
	.arch-connector {
		flex: 0 0 auto;
		width: 1px;
		height: 24px;
		margin: 0 auto;
		border-top: none;
		border-left: 1px dashed var(--color-border);
	}
	.arch-connector::after { display: none; }

	/* CTA banner */
	.cta-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--space-6);
	}

	/* Footer */
	.footer-inner  { flex-direction: column; }
	.footer-nav ul { flex-wrap: wrap; gap: var(--space-4); }

	/* Hero */
	.hero-headline { font-size: 2.5rem; }
	.hero-ctas     { flex-direction: column; align-items: center; }
	.hero-ctas .btn { width: 100%; justify-content: center; max-width: 280px; }
}

@media (max-width: 480px) {
	.section { padding-block: var(--space-9); }
	.hero-section { min-height: 100dvh; }
	.agent-card { padding: var(--space-5); }
	.not-found-code { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.scroll-line { animation: none; }
}