/*
Theme Name: VoxRouter
Theme URI: https://voxrouter.app
Author: Elemental AI Solutions
Author URI: https://elementalai.tech
Description: Dark, technical marketing theme for VoxRouter, a self-hosted voice-agent router. Implements the VoxRouter design system: Space Grotesk / IBM Plex Sans / IBM Plex Mono, a signal-flow hero illustration, fallback-chain and provider visuals, and an operations dashboard aesthetic.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voxrouter
*/

/* ============ Reset & base ============ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--accent: #5B8DEF;
	--flow: running;

	--bg: #0B0D11;
	--surface: #14171D;
	--surface-end: #0E1015;
	--panel: #0F1218;
	--inset: #08090C;
	--band: #0C0E13;

	--success: #6BC98B;
	--warning: #E0A44B;
	--error: #F37070;
	--concept: #B18CFF;

	--text-primary: #E9ECF1;
	--text-secondary: #C8CCD2;
	--text-muted: #9AA0A6;
	--text-body: #B4BAC2;
	--text-faint: #6B7078;

	--border-soft: rgba(255, 255, 255, 0.06);
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.1);

	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'IBM Plex Sans', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--container: 1200px;
	--gutter: 28px;

	--hero-cols: 1.05fr 0.95fr;
	--quickstart-cols: 0.85fr 1.15fr;
	--split-cols: 0.9fr 1.1fr;
	--discovery-cols: 0.95fr 1.05fr;
	--android-cols: 0.8fr 1.2fr;
	--grid-3: repeat(3, 1fr);
	--grid-6: repeat(6, 1fr);
	--span-2: span 2;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	opacity: 0.82;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

button {
	font: inherit;
}

::selection {
	background: rgba(91, 141, 239, 0.3);
}

h1, h2, h3, h4, p, ul, ol, figure {
	margin: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -60px;
	left: 12px;
	z-index: 100;
	background: var(--accent);
	color: var(--inset);
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 12px;
	opacity: 1;
}

/* ============ Keyframes ============ */
@keyframes eq {
	0%, 100% { transform: scaleY(0.28); }
	50% { transform: scaleY(1); }
}
@keyframes dashflow {
	to { background-position: 44px 0; }
}
@keyframes pulseDot {
	0%, 100% { opacity: 0.35; transform: scale(0.85); }
	50% { opacity: 1; transform: scale(1); }
}
@keyframes floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@keyframes glowPulse {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 0.85; }
}
@keyframes ringExpand {
	0% { transform: scale(0.6); opacity: 0.7; }
	100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	:root { --flow: paused; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ============ Layout ============ */
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.band {
	background: var(--band);
	border-top: 1px solid var(--border-soft);
	border-bottom: 1px solid var(--border-soft);
}

main {
	display: block;
	position: relative;
}

/* ============ Buttons ============ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 22px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	font-family: var(--font-body);
	border: 1px solid transparent;
	cursor: pointer;
	line-height: 1.2;
}

.btn-primary {
	background: var(--accent);
	color: var(--inset);
}

.btn-secondary {
	background: var(--surface);
	color: var(--text-primary);
	border-color: var(--border-strong);
}

.btn-small {
	padding: 8px 15px;
	border-radius: 8px;
	font-size: 13.5px;
	gap: 8px;
}

/* ============ Logo mark ============ */
.logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(160deg, var(--surface), var(--bg));
	border: 1px solid var(--border-strong);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	flex: 0 0 auto;
}

.logo-mark__bars {
	display: flex;
	align-items: flex-end;
	gap: 2.5px;
	height: 15px;
}

.logo-mark__bar {
	width: 3px;
	height: 100%;
	border-radius: 2px;
	transform-origin: bottom;
	display: inline-block;
	animation: eq 1.1s ease-in-out infinite;
	animation-play-state: var(--flow);
}

.logo-mark__bar--1 { background: var(--success); }
.logo-mark__bar--2 { background: var(--accent); animation-delay: 0.18s; }
.logo-mark__bar--3 { background: var(--warning); animation-delay: 0.36s; }

.logo-mark--sm {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--surface);
}

.logo-mark--sm .logo-mark__bars {
	gap: 2px;
	height: 12px;
}

.logo-mark--sm .logo-mark__bar {
	width: 2.5px;
	animation: none;
}

.logo-mark--sm .logo-mark__bar--2 {
	height: 70%;
}

.wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

/* ============ Header / nav ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: rgba(11, 13, 17, 0.72);
	border-bottom: 1px solid var(--border-soft);
}

.site-header__inner {
	padding-top: 14px;
	padding-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand-link {
	display: flex;
	align-items: center;
	gap: 11px;
	color: inherit;
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 13.5px;
	color: var(--text-muted);
}

.nav-link {
	color: inherit;
	white-space: nowrap;
}

.nav-link.is-active {
	color: var(--text-primary);
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-primary);
}

.nav-toggle__bar {
	display: block;
	width: 16px;
	height: 1.5px;
	background: currentColor;
	position: relative;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: currentColor;
}

.nav-toggle__bar::before { top: -5px; }
.nav-toggle__bar::after { top: 5px; }

/* ============ Breadcrumb ============ */
.breadcrumb-row {
	padding-top: 24px;
}

.breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-faint);
}

/* ============ Page intro (subpage heading block) ============ */
.page-intro {
	max-width: 680px;
	margin-bottom: 44px;
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.eyebrow--warning { color: var(--warning); }
.eyebrow--success { color: var(--success); }
.eyebrow--concept { color: var(--concept); }
.eyebrow--muted { color: var(--text-faint); }

.eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	padding: 6px 13px;
}

.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--success);
	flex: 0 0 auto;
}

.dot--live {
	box-shadow: 0 0 10px var(--success);
}

.dot--pulse {
	animation: pulseDot 1.6s ease-in-out infinite;
	animation-play-state: var(--flow);
}

.page-intro h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.06;
	letter-spacing: -0.025em;
	margin-top: 14px;
}

.page-intro p {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--text-muted);
	margin-top: 16px;
}

/* ============ Section rhythm ============ */
.section {
	padding-top: 100px;
	padding-bottom: 100px;
}

.section-tight {
	padding-top: 36px;
	padding-bottom: 40px;
}

/* ============ Code / terminal window ============ */
.code-window {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--border-strong);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.code-window__titlebar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.code-window__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.code-window__dot--red { background: var(--error); }
.code-window__dot--amber { background: var(--warning); }
.code-window__dot--green { background: var(--success); }

.code-window__path {
	margin-left: 10px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
}

.code-window__body {
	background: var(--inset);
	padding: 20px 22px;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.85;
	color: var(--text-secondary);
	overflow-x: auto;
}

.code-window__body .dim { color: var(--text-faint); }
.code-window__body .ok { color: var(--success); }
.code-window__body .warn { color: var(--warning); }
.code-window__body .accent { color: var(--accent); }
.code-window__body .muted { color: var(--text-muted); }
.code-window__body .indent { padding-left: 20px; }
.code-window__body .gap { height: 12px; }

/* ============ Status chips ============ */
.status-chip {
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.status-chip--label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.status-chip--ok {
	background: rgba(107, 201, 139, 0.14);
	color: var(--success);
}

.status-chip--warn {
	background: rgba(224, 164, 75, 0.15);
	color: var(--warning);
}

.status-chip--error {
	background: rgba(243, 112, 112, 0.16);
	color: var(--error);
}

/* ============ CTA band ============ */
.cta-band {
	text-align: center;
	padding-top: 90px;
	padding-bottom: 40px;
}

.cta-band h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.cta-band__actions {
	display: flex;
	justify-content: center;
	gap: 13px;
	margin-top: 26px;
	flex-wrap: wrap;
}

/* ============ Pager ============ */
.pager {
	padding-bottom: 56px;
}

.pager__row {
	display: flex;
	align-items: stretch;
	gap: 16px;
	border-top: 1px solid var(--border);
	padding-top: 28px;
}

.pager__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: inherit;
	min-width: 0;
}

.pager__card--next {
	text-align: right;
	align-items: flex-end;
}

.pager__label {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
}

.pager__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
}

/* ============ Footer ============ */
.site-footer {
	padding-bottom: 64px;
}

.site-footer__row {
	padding-top: 28px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-footer__brand .wordmark {
	font-size: 14px;
	color: var(--text-secondary);
}

.site-footer__domain {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
}

.site-footer__credit {
	margin-top: 18px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-faint);
}

/* ============ Cards grid (Features / Ops) ============ */
.cards-grid {
	display: grid;
	grid-template-columns: var(--grid-3);
	gap: 18px;
}

.card {
	background: linear-gradient(160deg, var(--surface), var(--surface-end));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 26px;
}

.card--span2 {
	grid-column: var(--span-2);
}

.card--row {
	display: flex;
	gap: 22px;
	align-items: center;
}

.card--column {
	display: flex;
	flex-direction: column;
}

.card--accent-tint {
	background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface-end));
	border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--accent) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
	flex: 0 0 auto;
	margin-bottom: 16px;
}

.icon-tile--warning {
	background: rgba(224, 164, 75, 0.14);
	border-color: rgba(224, 164, 75, 0.32);
}

.icon-tile--concept {
	background: rgba(177, 140, 255, 0.12);
	border-color: rgba(177, 140, 255, 0.3);
}

.card h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
	margin-bottom: 8px;
}

.card p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-muted);
}

.card code, .inline-code {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-secondary);
}

.chip-grid {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-muted);
}

.chip-grid span {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--panel);
	border: 1px solid var(--border-soft);
	text-align: center;
}

.mini-eq {
	flex: 0 0 148px;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 92px;
}

.mini-eq span {
	flex: 1;
	height: 100%;
	border-radius: 3px;
	transform-origin: bottom;
	animation: eq 1s ease-in-out infinite;
	animation-play-state: var(--flow);
}

/* ============ Home: hero ============ */
.hero {
	position: relative;
	padding-top: 96px;
	padding-bottom: 72px;
	display: grid;
	grid-template-columns: var(--hero-cols);
	gap: 56px;
	align-items: center;
}

.hero__glow {
	position: absolute;
	top: -80px;
	left: 30%;
	width: 620px;
	height: 620px;
	max-width: 100%;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
	filter: blur(30px);
	pointer-events: none;
	animation: glowPulse 7s ease-in-out infinite;
	animation-play-state: var(--flow);
	z-index: 0;
}

.hero__content {
	position: relative;
	z-index: 1;
}

.hero h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 58px;
	line-height: 1.03;
	letter-spacing: -0.03em;
	margin-top: 22px;
	text-wrap: balance;
}

.hero h1 .accent { color: var(--accent); }

.hero__lede {
	font-size: 18px;
	line-height: 1.6;
	color: var(--text-body);
	max-width: 540px;
	margin-top: 22px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 32px;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 34px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--text-faint);
}

.hero__meta .sep { color: #2A2E37; }

.hero__art {
	position: relative;
	z-index: 1;
}

.signal-flow {
	position: relative;
	background: linear-gradient(165deg, var(--surface), var(--band));
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 26px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.signal-flow__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.signal-flow__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--success);
	text-transform: none;
	letter-spacing: normal;
}

.signal-flow__mic-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.mic-tile {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--accent) 16%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
	flex: 0 0 auto;
}

.mic-tile__ring {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	border: 1px solid var(--accent);
	animation: ringExpand 2.4s ease-out infinite;
	animation-play-state: var(--flow);
}

.eq-bars {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 3px;
	height: 34px;
}

.eq-bars span {
	width: 3px;
	height: 100%;
	border-radius: 2px;
	transform-origin: bottom;
	animation: eq 1.2s ease-in-out infinite;
	animation-play-state: var(--flow);
}

.signal-flow__connector {
	height: 20px;
	margin: 0 0 6px 21px;
	width: 3px;
	background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px);
	opacity: 0.55;
}

.signal-flow__stages {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.stage-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 11px;
	background: var(--panel);
	border: 1px solid var(--border-soft);
}

.stage-row__label {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
	width: 64px;
	flex: 0 0 auto;
}

.stage-row__value {
	font-size: 13.5px;
	color: var(--text-secondary);
	flex: 1;
	min-width: 0;
}

.stage-row--accent {
	background: color-mix(in srgb, var(--accent) 12%, var(--panel));
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.stage-row--accent .stage-row__value {
	color: var(--text-primary);
}

.stage-row__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
	flex: 0 0 auto;
}

/* ============ Pipeline strip ============ */
.pipeline-strip {
	padding-top: 26px;
	padding-bottom: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-muted);
}

.pipeline-strip span { color: var(--text-primary); }
.pipeline-strip .arrow { color: var(--accent); }
.pipeline-strip .status-chip { font-size: 13px; padding: 5px 12px; }

/* ============ Explore grid ============ */
.explore-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.explore-card {
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: linear-gradient(160deg, var(--surface), var(--surface-end));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 26px;
	color: inherit;
}

.explore-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.explore-card__arrow { color: var(--text-faint); }

.explore-card h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 19px;
	margin-bottom: 6px;
}

.explore-card p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-muted);
}

.explore-card--concept {
	border: 1px dashed rgba(177, 140, 255, 0.35);
}

.concept-tag {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--concept);
}

/* ============ Quick start ============ */
.quickstart {
	padding-top: 100px;
	padding-bottom: 100px;
	display: grid;
	grid-template-columns: var(--quickstart-cols);
	gap: 56px;
	align-items: center;
}

.quickstart h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin-top: 14px;
}

.quickstart p {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--text-muted);
	margin-top: 18px;
}

.quickstart .btn { margin-top: 26px; }

/* ============ Final CTA ============ */
.final-cta {
	position: relative;
	padding-top: 110px;
	padding-bottom: 64px;
	text-align: center;
}

.final-cta__glow {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 520px;
	max-width: 100%;
	height: 340px;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%);
	filter: blur(30px);
	pointer-events: none;
	animation: glowPulse 7s ease-in-out infinite;
	animation-play-state: var(--flow);
}

.final-cta__inner {
	position: relative;
}

.final-cta h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 46px;
	line-height: 1.06;
	letter-spacing: -0.03em;
	max-width: 720px;
	margin-inline: auto;
	text-wrap: balance;
}

.final-cta p {
	font-size: 17px;
	color: var(--text-muted);
	margin: 18px auto 0;
	max-width: 520px;
}

.final-cta .cta-band__actions { margin-top: 30px; }

/* ============ Legend (Fallback) ============ */
.legend {
	display: flex;
	gap: 20px;
	margin-top: 26px;
	flex-wrap: wrap;
}

.legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text-muted);
}

.legend__item .dot { width: 9px; height: 9px; }

/* ============ Chain card (Fallback) ============ */
.chain-card {
	background: linear-gradient(165deg, var(--surface), var(--band));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.chain-card__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 16px;
}

.chain-step {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 16px;
	border-radius: 12px;
}

.chain-step--error {
	background: rgba(243, 112, 112, 0.07);
	border: 1px solid rgba(243, 112, 112, 0.22);
}

.chain-step--ok {
	background: color-mix(in srgb, var(--accent) 10%, var(--panel));
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.chain-step__index {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-faint);
	width: 22px;
	flex: 0 0 auto;
}

.chain-step__name {
	font-size: 15px;
	color: var(--text-primary);
	font-weight: 500;
	flex: 1;
	min-width: 0;
}

.chain-step__name .dim {
	color: var(--text-faint);
	font-weight: 400;
}

.chain-step__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	white-space: nowrap;
}

.chain-connector {
	height: 16px;
	margin-left: 26px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--warning) 0 4px, transparent 4px 9px);
}

.log-block {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 11px;
	background: var(--bg);
	border: 1px solid var(--border-soft);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--text-muted);
}

.log-block--wide {
	background: var(--inset);
	padding: 14px 16px;
	font-size: 11.5px;
	line-height: 1.85;
	word-break: break-word;
}

/* ============ Two-column split (Fallback defaults, Architecture-adjacent) ============ */
.split {
	display: grid;
	grid-template-columns: var(--split-cols);
	gap: 56px;
	align-items: center;
}

.split h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin-top: 14px;
}

.split p {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--text-muted);
	margin-top: 16px;
}

/* ============ Providers: tabs + panel ============ */
.tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.tab-button {
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
	background: var(--surface);
	color: var(--text-muted);
	border: 1px solid var(--border);
}

.tab-button.is-active {
	background: var(--accent);
	color: var(--inset);
	border-color: var(--accent);
}

.provider-panel {
	background: linear-gradient(160deg, var(--surface), var(--surface-end));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 32px;
}

.provider-panel__blurb {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--text-muted);
	margin-bottom: 24px;
	max-width: 640px;
}

.provider-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.provider-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 17px;
	border-radius: 10px;
	background: var(--panel);
	border: 1px solid var(--border);
	font-size: 14.5px;
	color: var(--text-primary);
}

.provider-chip .dot {
	width: 8px;
	height: 8px;
	background: var(--accent);
}

.provider-chip__tag {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
}

/* ============ Discovery / LAN scan ============ */
.discovery {
	display: grid;
	grid-template-columns: var(--discovery-cols);
	gap: 56px;
	align-items: center;
}

.lan-card {
	background: linear-gradient(165deg, var(--surface), var(--band));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lan-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-family: var(--font-mono);
	font-size: 11px;
}

.lan-card__header .label {
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.lan-card__header .found {
	color: var(--success);
}

.lan-card__meta {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.lan-card__meta-item {
	flex: 1;
	padding: 10px 13px;
	border-radius: 9px;
	background: var(--panel);
	border: 1px solid var(--border-soft);
}

.lan-card__meta-item:last-child { flex: initial; }

.lan-card__meta-item .k {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-faint);
	margin-bottom: 3px;
}

.lan-card__meta-item .v {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-primary);
}

.lan-card__results {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.result-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 11px;
	background: rgba(107, 201, 139, 0.07);
	border: 1px solid rgba(107, 201, 139, 0.2);
}

.result-row .dot { width: 7px; height: 7px; }

.result-row__name {
	font-size: 14px;
	color: var(--text-primary);
	font-weight: 500;
	flex: 0 0 auto;
}

.result-row__desc {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-faint);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lan-card__footer {
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-faint);
}

/* ============ Ops: trace widget ============ */
.trace-widget {
	border: 1px solid var(--border-soft);
	border-radius: 11px;
	overflow: hidden;
}

.trace-widget__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	background: var(--panel);
	font-family: var(--font-mono);
	font-size: 12px;
	flex-wrap: wrap;
}

.trace-widget__header .time { color: var(--text-faint); }
.trace-widget__header .kind { color: var(--text-secondary); }
.trace-widget__header .agent { color: var(--text-primary); font-weight: 600; }
.trace-widget__header .duration { margin-left: auto; color: var(--text-faint); }

.trace-widget__stages {
	padding: 6px 14px 12px;
}

.trace-widget__stage {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	font-family: var(--font-mono);
	font-size: 11.5px;
}

.trace-widget__stage .name { color: var(--text-primary); min-width: 64px; }
.trace-widget__stage .detail { color: var(--text-faint); flex: 1; }
.trace-widget__stage .status-ok { color: var(--success); }
.trace-widget__stage .status-warn { color: var(--warning); }
.trace-widget__stage .duration { color: var(--text-faint); width: 48px; text-align: right; }

/* ============ Ops: tray menu ============ */
.tray-menu {
	background: var(--panel);
	border: 1px solid var(--border-soft);
	border-radius: 11px;
	padding: 6px 0;
	font-family: var(--font-mono);
	font-size: 12px;
}

.tray-menu__status {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	color: var(--success);
}

.tray-menu__status .dot { width: 7px; height: 7px; }

.tray-menu__divider {
	height: 1px;
	background: var(--border-soft);
	margin: 4px 0;
}

.tray-menu__item {
	padding: 7px 14px;
	color: var(--text-secondary);
}

/* ============ Ops: diff block ============ */
.diff-block {
	background: var(--panel);
	border: 1px solid var(--border-soft);
	border-radius: 11px;
	padding: 14px;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.9;
}

.diff-block .rm { color: var(--error); }
.diff-block .add { color: var(--success); }
.diff-block .result { margin-top: 8px; color: var(--text-faint); }
.diff-block .result .ok { color: var(--success); }

/* ============ Architecture: node diagram ============ */
.node-diagram {
	display: grid;
	grid-template-columns: var(--grid-6);
	gap: 14px;
}

.node {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 16px;
	border-radius: 14px;
	background: linear-gradient(160deg, var(--surface), var(--surface-end));
	border: 1px solid var(--border);
}

.node--hub {
	background: color-mix(in srgb, var(--accent) 12%, var(--surface));
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.node__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
}

.node__sub {
	font-size: 12px;
	color: var(--text-faint);
	line-height: 1.45;
}

.callout {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--band);
	border: 1px dashed var(--border-strong);
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--text-faint);
	flex-wrap: wrap;
}

.callout .accent { color: var(--accent); }

.callout--concept {
	border-color: rgba(177, 140, 255, 0.35);
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-muted);
}

.callout--concept .mark { color: var(--concept); }

/* ============ Android concept ============ */
.android-layout {
	padding-top: 36px;
	padding-bottom: 60px;
	display: grid;
	grid-template-columns: var(--android-cols);
	gap: 56px;
	align-items: center;
}

.phone-frame-wrap {
	display: flex;
	justify-content: center;
}

.phone-frame {
	width: 320px;
	max-width: 100%;
	aspect-ratio: 356 / 740;
	border-radius: 40px;
	background: #05060A;
	border: 10px solid #05060A;
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.09), 0 30px 80px rgba(0, 0, 0, 0.6);
	position: relative;
	overflow: hidden;
}

.phone-frame::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	background: #2E2E2E;
	border-radius: 50%;
	z-index: 2;
}

.phone-frame__screen {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text-primary);
	font-family: var(--font-body);
	padding: 30px 18px 18px;
}

.phone-frame__brand {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
}

.phone-frame__brand .wordmark {
	font-size: 14.5px;
}

.status-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 13px 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.status-card .dot { width: 8px; height: 8px; }

.status-card__title {
	font-size: 13.5px;
	font-weight: 600;
}

.status-card__meta {
	font-size: 11px;
	color: var(--text-faint);
	font-family: var(--font-mono);
}

.agent-label {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 9px;
	font-family: var(--font-mono);
}

.agent-pills {
	display: flex;
	gap: 7px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.agent-pill {
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 12.5px;
}

.agent-pill.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--inset);
	font-weight: 600;
}

.mic-stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.mic-button-wrap {
	position: relative;
	width: 104px;
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mic-ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(91, 141, 239, 0.35);
	inset: 0;
}

.mic-ring--2 {
	inset: 12px;
	border-color: rgba(91, 141, 239, 0.5);
}

.mic-button {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(91, 141, 239, 0.4);
}

.mic-stage__caption {
	font-size: 12.5px;
	color: var(--text-faint);
}

.toggle-row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.toggle-pill {
	flex: 1;
	text-align: center;
	padding: 8px;
	border-radius: 9px;
	font-size: 11.5px;
	font-weight: 600;
}

.toggle-pill--success {
	background: rgba(107, 201, 139, 0.12);
	border: 1px solid rgba(107, 201, 139, 0.3);
	color: var(--success);
}

.toggle-pill--accent {
	background: rgba(91, 141, 239, 0.12);
	border: 1px solid rgba(91, 141, 239, 0.3);
	color: var(--accent);
}

.last-turn {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-faint);
	text-align: center;
}

.feature-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 30px;
}

.feature-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.feature-row .icon-tile {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	margin-bottom: 0;
}

.feature-row h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16.5px;
	margin-bottom: 4px;
}

.feature-row p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-muted);
}

/* ============ Generic page content (fallback templates) ============ */
.entry-content {
	max-width: 760px;
	padding-top: 40px;
	padding-bottom: 100px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-body);
}

.entry-content h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 40px;
	letter-spacing: -0.02em;
	margin-bottom: 24px;
	color: var(--text-primary);
}

.entry-content h2, .entry-content h3 {
	font-family: var(--font-display);
	color: var(--text-primary);
	margin-top: 32px;
	margin-bottom: 12px;
}

.entry-content p, .entry-content ul, .entry-content ol {
	margin-bottom: 16px;
}

.entry-content a {
	text-decoration: underline;
}

.not-found {
	padding-top: 80px;
	padding-bottom: 120px;
	text-align: center;
}

.not-found h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 42px;
	letter-spacing: -0.02em;
}

.not-found p {
	font-size: 16px;
	color: var(--text-muted);
	margin-top: 14px;
}

.not-found .btn { margin-top: 26px; }

/* ============ Responsive ============ */
@media (max-width: 980px) {
	:root {
		--hero-cols: 1fr;
		--quickstart-cols: 1fr;
		--split-cols: 1fr;
		--discovery-cols: 1fr;
		--android-cols: 1fr;
	}

	.hero { padding-top: 64px; padding-bottom: 48px; gap: 48px; }
	.hero h1 { font-size: 42px; }
	.hero__glow { left: 50%; transform: translateX(-50%); }

	.quickstart, .split, .discovery { gap: 40px; }

	.android-layout { gap: 40px; padding-top: 24px; }

	.final-cta h2 { font-size: 36px; }
}

@media (max-width: 900px) {
	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		background: var(--bg);
		border-bottom: 1px solid var(--border-soft);
		padding: 10px 28px 20px;
		display: none;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	}

	.primary-nav.is-open {
		display: flex;
	}

	.primary-nav a {
		padding: 11px 0;
		border-bottom: 1px solid var(--border-soft);
	}

	.primary-nav a:last-child {
		border-bottom: none;
		margin-top: 10px;
	}

	.nav-toggle {
		display: inline-flex;
	}
}

@media (max-width: 860px) {
	:root {
		--grid-3: repeat(2, 1fr);
		--grid-6: repeat(3, 1fr);
	}

	.page-intro h1 { font-size: 36px; }
	.page-intro { margin-bottom: 32px; }

	.node-diagram { row-gap: 14px; }
}

@media (max-width: 700px) {
	.container { padding-left: 20px; padding-right: 20px; }

	.hero h1 { font-size: 34px; }
	.hero__lede { font-size: 16px; }

	.quickstart h2, .split h2 { font-size: 28px; }
	.final-cta h2 { font-size: 28px; }
	.cta-band h2 { font-size: 26px; }

	.signal-flow { padding: 20px; }

	.card--row {
		flex-direction: column;
		align-items: stretch;
	}

	.mini-eq {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 18px;
	}

	.chip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	:root {
		--grid-3: 1fr;
		--grid-6: repeat(2, 1fr);
	}

	.card--span2 { grid-column: span 1; }

	.pipeline-strip { font-size: 12px; }

	.pager__row { flex-direction: column; }
	.pager__card--next { text-align: left; align-items: flex-start; }

	.site-footer__row { justify-content: flex-start; }

	.discovery .lan-card { order: 0; }
}

@media (max-width: 480px) {
	.hero h1 { font-size: 28px; }
	.page-intro h1 { font-size: 28px; }
	.eyebrow-pill { font-size: 11px; padding: 5px 11px; }
	.btn { padding: 12px 18px; font-size: 14px; }
}