/*
 * Agent Circuits — marketing site chrome (landing / strategy / about).
 *
 * The scroll-snap scene deck keeps styles.css; these are the NEW long-form
 * pages: fixed blur nav, footer, buttons, section rhythm, display type, the
 * reveal-on-scroll utility, and the editorial pull-quote. Pairs with
 * tokens.css (loaded first) and site.js (theme + reveal + nav highlight).
 * Product mockups on these pages are built from kit/chat-kit.css and sit on
 * the warm --site-canvas as pure-white cards. Tokens only, both themes.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 4.75rem; /* clear the fixed nav on anchor jumps */
	background: var(--site-canvas);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--site-canvas);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: var(--mkt-text-base);
	line-height: var(--mkt-line-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	cursor: pointer;
}

/* ============================================================ Nav ===== */

.site-nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: 3.75rem;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	/* Product-header blur: a translucent wash of the page over a hairline. */
	background: color-mix(in oklch, var(--background) 55%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: var(--mkt-weight-semibold);
	font-size: var(--mkt-text-base);
	letter-spacing: var(--mkt-tracking-tight);
	color: var(--foreground);
}
.site-brand__mark {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 999px;
	background: var(--primary);
}
.site-brand__word {
	white-space: nowrap;
}

.site-nav__links {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.site-nav__link {
	padding: 0.4rem 0.7rem;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--muted-foreground);
	transition:
		color var(--motion-fast) var(--ease-out-soft),
		background var(--motion-fast) var(--ease-out-soft);
}
.site-nav__link:hover {
	color: var(--foreground);
	background: color-mix(in oklch, var(--accent) 70%, transparent);
}
.site-nav__link[aria-current='page'] {
	color: var(--foreground);
	font-weight: var(--mkt-weight-medium);
}

.site-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: 0.35rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	color: var(--foreground);
	font-size: 0.95rem;
	transition:
		background var(--motion-fast) var(--ease-out-soft),
		transform var(--motion-fast) var(--ease-out-soft);
}
.site-theme-toggle:hover {
	background: var(--accent);
}

/* ======================================================== Sections ==== */

.section {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(4rem, 10vh, 7rem);
}
.section--tight {
	padding-block: clamp(2.5rem, 6vh, 4rem);
}

.kicker {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--mkt-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--mkt-tracking-caps);
	color: var(--muted-foreground);
}

/* Display type — fluid, tight tracking, semibold. */
.display-1 {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: var(--mkt-weight-semibold);
	line-height: var(--mkt-line-tight);
	letter-spacing: var(--mkt-tracking-tight);
	color: var(--foreground);
}
.display-2 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: var(--mkt-weight-semibold);
	line-height: var(--mkt-line-snug);
	letter-spacing: var(--mkt-tracking-tight);
	color: var(--foreground);
}

.lede {
	max-width: 60ch;
	font-size: var(--mkt-text-xl);
	line-height: var(--mkt-line-relaxed);
	color: var(--muted-foreground);
}

/* Editorial pull-quote (strategy page). */
.pull-quote {
	max-width: 32ch;
	font-family: var(--mkt-serif);
	font-style: italic;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	line-height: var(--mkt-line-snug);
	letter-spacing: var(--mkt-tracking-tight);
	color: var(--foreground);
}

/* ========================================================= Buttons ==== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem; /* 10px 18px */
	border-radius: var(--radius-lg);
	border: 1px solid transparent;
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
	transition:
		opacity var(--motion-fast) var(--ease-out-soft),
		background var(--motion-fast) var(--ease-out-soft),
		transform var(--motion-fast) var(--ease-out-soft);
}
.btn--primary {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.btn--primary:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}
.btn--ghost {
	background: transparent;
	color: var(--foreground);
	border-color: var(--border);
}
.btn--ghost:hover {
	background: color-mix(in oklch, var(--accent) 70%, transparent);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover {
		transform: none;
	}
}

/* ==================================================== Reveal-on-scroll = */
/* site.js adds .is-in when the element enters the viewport (once). */

.reveal-up {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-settle) var(--ease-out-soft),
		transform var(--motion-settle) var(--ease-out-soft);
}
.reveal-up.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ========================================================== Footer ==== */

.site-footer {
	border-top: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
	padding-block: clamp(2.5rem, 5vh, 3.5rem);
	padding-inline: clamp(2rem, 5vw, 4rem);
	color: var(--muted-foreground);
	font-size: var(--text-sm);
}
.site-footer__inner {
	max-width: 72rem;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}
.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.site-footer__link:hover {
	color: var(--foreground);
}
/* "Built on Agent Circuits" tagline slot, pushed right. */
.site-footer__built {
	margin-left: auto;
	font-size: var(--text-xs);
}
/* Companies Act registration line — full-width row, bottom right. */
.site-footer__legal {
	flex-basis: 100%;
	margin: 0;
	text-align: right;
	font-size: var(--text-xs);
	color: color-mix(in oklch, var(--muted-foreground) 80%, transparent);
}

@media (max-width: 720px) {
	.site-nav__links {
		gap: 0.1rem;
	}
	.site-nav__link {
		padding: 0.4rem 0.5rem;
	}
	.site-footer__built {
		margin-left: 0;
	}
	.site-footer__legal {
		text-align: left;
	}
}

/* On narrow phones the wordmark yields to the mark so the nav links +
   theme toggle never clip off the right edge (the full nav overflowed to
   ~416px at a 390px viewport). Standard mobile pattern — the dot stands in
   for the brand; the accessible name still lives on the toggle/links. */
@media (max-width: 460px) {
	/* Nav only — the footer has room and reads better with the word. */
	.site-nav .site-brand__word {
		display: none;
	}
}