:root {
	--bg: #05070d;
	--bg-alt: #0a0e1a;
	--surface: rgba(255, 255, 255, 0.04);
	--surface-border: rgba(255, 255, 255, 0.09);
	--text: #e8ecf6;
	--text-muted: #96a0b8;
	--accent: #5eead4;
	--accent-2: #8b5cf6;
	--radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
	line-height: 1.6;
}

.container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Navbar ---------- */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	background: rgba(5, 7, 13, 0.7);
	border-bottom: 1px solid var(--surface-border);
}

.navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	text-decoration: none;
	font-size: 18px;
}

.brand-mark {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #05070d;
}

.brand-text strong { font-weight: 700; }

.nav-links {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--text); }

.lang-toggle {
	background: var(--surface);
	border: 1px solid var(--surface-border);
	color: var(--text-muted);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-family: 'JetBrains Mono', monospace;
	cursor: pointer;
}

.lang-toggle .active { color: var(--accent); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	padding: 160px 0 96px;
	overflow: hidden;
	text-align: center;
}

.hero-glow {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 600px;
	background: radial-gradient(circle at 50% 0%, rgba(94, 234, 212, 0.25), transparent 60%),
		radial-gradient(circle at 70% 20%, rgba(139, 92, 246, 0.25), transparent 55%);
	filter: blur(30px);
	pointer-events: none;
}

.hero-inner { position: relative; }

.eyebrow {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--surface-border);
	color: var(--accent);
	font-size: 13px;
	font-family: 'JetBrains Mono', monospace;
	margin-bottom: 24px;
}

.hero h1 {
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.15;
	margin: 0 0 20px;
	background: linear-gradient(120deg, #fff, var(--accent) 60%, var(--accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero .lead {
	max-width: 640px;
	margin: 0 auto 48px;
	color: var(--text-muted);
	font-size: 17px;
}

/* ---------- Flow diagram ---------- */
.flow-diagram {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 auto 48px;
}

.flow-node {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--surface-border);
	font-size: 15px;
	min-width: 240px;
	justify-content: center;
}

.flow-node.highlight {
	background: linear-gradient(135deg, rgba(94, 234, 212, 0.15), rgba(139, 92, 246, 0.15));
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 600;
}

.flow-arrow {
	color: var(--text-muted);
	font-size: 18px;
}

.product-pills {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.product-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--surface-border);
	color: var(--text);
	text-decoration: none;
	font-size: 14px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.product-pill i { color: var(--accent); }

.product-pill:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.how-heading {
	margin: 64px 0 8px;
	text-align: center;
	font-size: 24px;
}

.cta {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #05070d;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(94, 234, 212, 0.25);
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }

.section-alt { background: var(--bg-alt); }

.section h2 {
	font-size: clamp(26px, 4vw, 36px);
	margin: 0 0 12px;
	text-align: center;
}

.section-subtitle {
	text-align: center;
	color: var(--text-muted);
	max-width: 620px;
	margin: 0 auto 56px;
}

.pill {
	display: block;
	width: fit-content;
	margin: 0 auto 16px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--surface-border);
	color: var(--accent-2);
	font-size: 12px;
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ---------- Steps ---------- */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.step {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--surface-border);
	border-radius: var(--radius);
	padding: 28px 22px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.step:hover {
	transform: translateY(-4px);
	border-color: var(--accent);
}

.step-index {
	position: absolute;
	top: 16px;
	right: 20px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--text-muted);
	font-size: 13px;
}

.step i {
	font-size: 22px;
	color: var(--accent);
	margin-bottom: 14px;
	display: block;
}

.step h3 { margin: 0 0 8px; font-size: 18px; }

.step p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* ---------- Architecture diagram ---------- */
.architecture {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.arch-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.arch-box {
	background: var(--surface);
	border: 1px solid var(--surface-border);
	border-radius: 10px;
	padding: 12px 18px;
	font-size: 13px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--text-muted);
}

.arch-box strong { color: var(--text); font-size: 14px; }

.arch-hub, .arch-orchestrator, .arch-ai, .arch-portal {
	color: var(--text);
	font-weight: 600;
}

.arch-hub, .arch-orchestrator {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(94, 234, 212, 0.08));
	border-color: var(--accent-2);
	min-width: 240px;
}

.arch-ai, .arch-portal {
	background: linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(139, 92, 246, 0.08));
	border-color: var(--accent);
	min-width: 240px;
}

.arch-arrow {
	color: var(--text-muted);
	font-size: 16px;
}

/* ---------- Waitlist ---------- */
.waitlist { text-align: center; }

.waitlist-form {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	max-width: 480px;
	margin: 0 auto;
}

.waitlist-form input {
	flex: 1;
	min-width: 220px;
	padding: 13px 18px;
	border-radius: 999px;
	border: 1px solid var(--surface-border);
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
}

.waitlist-form input:focus {
	outline: none;
	border-color: var(--accent);
}

.waitlist-form button {
	padding: 13px 26px;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #05070d;
	font-weight: 700;
	cursor: pointer;
}

.waitlist-note {
	margin-top: 18px;
	color: var(--accent);
	font-size: 14px;
}

/* ---------- Footer ---------- */
.footer {
	padding: 28px 0;
	text-align: center;
	color: var(--text-muted);
	font-size: 13px;
	border-top: 1px solid var(--surface-border);
}

.footer-owner {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.7;
}

@media (max-width: 640px) {
	.nav-links { display: none; }
	.hero { padding: 130px 0 72px; }
}