.home {
	font-size: 17px;
	line-height: 1.6;
}
.home h1, .home h2, .home h3, .home p, .home figure {
	margin: 0;
}

.home-section {
	padding: clamp(64px, 8vw, 112px) 0;
}
.home-section-tight {
	padding-top: 0;
}
.home-section-muted {
	background: var(--surface);
}

.home-eyebrow {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-green);
}
.home-heading {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}
.home-heading h2 {
	font-weight: 700;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.015em;
}
.home-lead {
	max-width: 520px;
	font-size: 19px;
	color: var(--text-muted);
}

/* Hero */
.home-hero {
	padding: clamp(92px, calc(3.5vw + 60px), 108px) 0 clamp(80px, calc(4.5vw + 40px), 104px);
}
@media only screen and (min-width: 992px) and (min-height: 700px) {
	/* On desktop the hero grows with the screen so the top of "How we work" shows
	   in the first view: 100svh minus the header and the part of that section
	   that should be visible */
	.home-hero {
		display: flex;
		align-items: center;
		min-height: calc(100svh - 84px - 380px);
		/* The screen height sets the space here; padding is only the minimum */
		padding: clamp(24px, 3.5svh, 48px) 0;
	}
}
.home-hero .site-container {
	display: flex;
	flex-wrap: wrap;
	/* Both columns share a height, so the buttons can sit level with the terminal's bottom */
	align-items: stretch;
	gap: 40px 56px;
}
.home-hero-text {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.home-pill {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	background: #EEF6F1;
	color: var(--brand-blue);
	font-size: 14px;
	font-weight: 700;
}
.home-pill-dot {
	/* Same size as the window dots on the terminal below */
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--brand-green);
}
.home-hero h1 {
	/* With the buttons' auto margin, this splits the free space so the title keeps
	   its centred position while the buttons sit at the bottom */
	margin-top: auto;
	font-weight: 700;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.home-hero h1 span {
	color: var(--brand-green);
}
.home-hero-sub {
	max-width: 520px;
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.55;
	color: var(--text-muted);
}
.home-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: auto;
}
.home-text-link {
	color: var(--brand-blue);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-decoration: underline;
	text-decoration-color: var(--brand-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.home-text-link:hover {
	color: var(--brand-green);
}

.home-hero-visual {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 16px;
}
.home-puzzle {
	position: absolute;
	pointer-events: none;
}
.home-code {
	position: relative;
	background: var(--brand-blue);
	border-radius: 20px;
	box-shadow: 0 30px 60px rgba(7, 53, 67, .22);
	overflow: hidden;
}
.home-code-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.home-code-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #2C5A68;
}
.home-code-title {
	margin-left: 10px;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 13px;
	color: #9FB8C0;
}
.home-code pre {
	margin: 0;
	padding: 24px 24px 28px;
	overflow-x: auto;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 14.5px;
	line-height: 1.9;
	color: #D7E4E8;
	white-space: pre;
}
.home-code-accent {
	color: var(--brand-green);
}
.home-code-cursor {
	display: inline-block;
	width: 9px;
	height: 18px;
	background: var(--brand-green);
	vertical-align: -3px;
	animation: home-blink 1.1s steps(1) infinite;
}
@keyframes home-blink {
	50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.home-code-cursor { animation: none; }
}
@media only screen and (max-width: 575px) {
	.home-code pre {
		padding: 20px 16px 24px;
		font-size: 12.5px;
	}
}

/* How we work */
.home-ai {
	padding-top: clamp(56px, 6vw, 88px);
}
.home-ai .site-container {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 5vw, 72px);
}
.home-ai-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.home-ai .home-heading {
	max-width: 900px;
}
.home-ai h2 span {
	color: var(--brand-green);
}
.home-ai .home-heading p {
	max-width: 720px;
	font-size: 19px;
	color: var(--text-muted);
}
.home-ai-puzzle {
	flex: 0 0 auto;
	width: 171px;
	height: auto;
	margin: -8px 16px -8px 0;
	overflow: visible;
}
/* Each piece drifts in from its own direction and clicks into place, the green
   one last; after a pause they all drift apart and the loop starts again */
.home-ai-piece {
	--away: translate(var(--dx), var(--dy)) rotate(var(--r));
	--leave: translate(calc(var(--dx) * .4), calc(var(--dy) * .4)) rotate(calc(var(--r) * .5));
	transform-box: fill-box;
	transform-origin: center;
	animation: 11s cubic-bezier(.33, .1, .25, 1) infinite both;
}
/* All four share one 11s cycle so the loop restarts cleanly: staggered arrivals,
   a pause with the puzzle complete, then they leave together */
.home-ai-piece-1 { --dx: -70px; --dy: -50px; --r: -25deg; animation-name: home-piece-1; }
.home-ai-piece-2 { --dx: 80px; --dy: -60px; --r: 20deg; animation-name: home-piece-2; }
.home-ai-piece-3 { --dx: -60px; --dy: 70px; --r: 15deg; animation-name: home-piece-3; }
.home-ai-piece-4 { --dx: 90px; --dy: 80px; --r: 35deg; animation-name: home-piece-4; }
@keyframes home-piece-1 {
	0% { opacity: 0; transform: var(--away); }
	12%, 76% { opacity: 1; transform: none; }
	88%, 100% { opacity: 0; transform: var(--leave); }
}
@keyframes home-piece-2 {
	0%, 5% { opacity: 0; transform: var(--away); }
	17%, 76% { opacity: 1; transform: none; }
	88%, 100% { opacity: 0; transform: var(--leave); }
}
@keyframes home-piece-3 {
	0%, 10% { opacity: 0; transform: var(--away); }
	22%, 76% { opacity: 1; transform: none; }
	88%, 100% { opacity: 0; transform: var(--leave); }
}
/* The missing piece comes last and overshoots a little before it snaps in */
@keyframes home-piece-4 {
	0%, 18% { opacity: 0; transform: var(--away); }
	27% { opacity: 1; transform: translate(-4px, -4px) rotate(-4deg); }
	31%, 76% { opacity: 1; transform: none; }
	88%, 100% { opacity: 0; transform: var(--leave); }
}
@media (prefers-reduced-motion: reduce) {
	.home-ai-piece {
		animation: none;
	}
}
@media only screen and (max-width: 767px) {
	.home-ai-puzzle {
		display: none;
	}
}
/* The three cards interlock like puzzle pieces: they share their borders, and
   each seam has a round tab bulging from one piece into the next */
.home-puzzle-grid {
	--seam: #C9DAD2;
	--tab: 52px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-feature {
	position: relative;
	background: #fff;
	border: 1px solid var(--seam);
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.home-feature + .home-feature {
	margin-left: -1px;
}
.home-feature:first-child {
	border-radius: 20px 0 0 20px;
}
.home-feature:last-child {
	border-radius: 0 20px 20px 0;
}
.home-feature-tab {
	position: absolute;
	z-index: 2;
	top: 50%;
	width: var(--tab);
	height: var(--tab);
	margin-top: calc(var(--tab) / -2);
	border: 1px solid var(--seam);
	border-radius: 50%;
	background: #fff;
	pointer-events: none;
}
/* Tab sticking out of the right edge (only the outer half shows, covering the seam) */
.home-feature-tab-right {
	right: calc(var(--tab) / -2);
	clip-path: inset(-1px -1px -1px calc(var(--tab) / 2 - 1px));
}
/* Tab sticking out of the left edge */
.home-feature-tab-left {
	left: calc(var(--tab) / -2);
	clip-path: inset(-1px calc(var(--tab) / 2 - 1px) -1px -1px);
}
@media only screen and (max-width: 899px) {
	.home-puzzle-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.home-feature + .home-feature {
		margin: -1px 0 0;
	}
	.home-feature:first-child {
		border-radius: 20px 20px 0 0;
	}
	.home-feature:last-child {
		border-radius: 0 0 20px 20px;
	}
	/* Stacked pieces join top to bottom instead */
	.home-feature-tab {
		top: auto;
		left: 50%;
		right: auto;
		margin: 0 0 0 calc(var(--tab) / -2);
	}
	.home-feature-tab-right {
		bottom: calc(var(--tab) / -2);
		clip-path: inset(calc(var(--tab) / 2 - 1px) -1px -1px -1px);
	}
	.home-feature-tab-left {
		top: calc(var(--tab) / -2);
		clip-path: inset(-1px -1px calc(var(--tab) / 2 - 1px) -1px);
	}
}
.home-feature-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #E2F5E7;
	color: var(--brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-feature h3 {
	font-weight: 600;
	font-size: 21px;
}
.home-feature p {
	color: var(--text-muted);
}

/* Services */
.home-services .site-container {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 64px;
}
.home-services .home-heading {
	flex: 1 1 300px;
	min-width: 0;
}
.home-service-list {
	flex: 2 1 560px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--border);
}
.home-service {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 32px;
	padding: 28px 0;
	border-top: 1px solid var(--border);
}
.home-service h3 {
	flex: 0 0 280px;
	font-weight: 600;
	font-size: 22px;
}
.home-service p {
	flex: 1 1 260px;
	color: var(--text-muted);
}

/* Clients */
.home-clients .site-container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.home-clients h2 .home-amp {
	font-weight: 500;
	color: var(--brand-green);
}
.home-client-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}
.home-client {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border: 2px solid var(--border);
	border-radius: 20px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.home-client:hover {
	color: inherit;
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(7, 53, 67, .10);
}
.home-client-logo {
	height: 56px;
	display: flex;
	align-items: center;
}
.home-client-logo img {
	width: auto;
	transition: filter 300ms ease, opacity 300ms ease;
}
/* Logos stay grey until the card is hovered or focused. Only on devices that can
   hover, so touch screens always see them in colour */
@media (hover: hover) {
	.home-client-logo img {
		filter: grayscale(1);
		opacity: .7;
	}
	.home-client:hover .home-client-logo img,
	.home-client:focus-visible .home-client-logo img {
		filter: none;
		opacity: 1;
	}
}
.home-client h3 {
	margin-top: 8px;
	font-weight: 600;
	font-size: 19px;
}
.home-client p {
	flex-grow: 1;
	font-size: 16px;
	color: var(--text-muted);
}
.home-client-link {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--brand-green);
}
.home-client:hover .home-client-link {
	color: var(--brand-blue);
}
@media only screen and (max-width: 767px) {
	/* On phones the clients become a swipeable row; the next card peeks in at the edge */
	.home-client-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: clamp(16px, 4vw, 40px);
		/* Run edge to edge, keeping the first card in line with the heading */
		margin: -8px calc(-1 * clamp(16px, 4vw, 40px));
		padding: 8px clamp(16px, 4vw, 40px);
		scrollbar-width: none;
	}
	.home-client-grid::-webkit-scrollbar {
		display: none;
	}
	.home-client {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}
	.home-client:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Products */
.home-products .site-container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.home-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.home-product {
	background: var(--surface);
	border-radius: 28px;
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.home-product img {
	height: 40px;
	width: auto;
}
.home-product .site-btn {
	margin-top: auto;
}
/* The empty slot for the next product, drawn like the missing puzzle piece */
.home-product-new {
	background: transparent;
	border: 2px dashed var(--brand-green);
	color: inherit;
	text-decoration: none;
	transition: background-color 200ms ease;
}
.home-product-new:hover {
	background: var(--surface);
	color: inherit;
}
.home-product-new h3 {
	font-weight: 600;
	font-size: 24px;
}
.home-product-link {
	margin-top: auto;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--brand-green);
}
.home-product-new:hover .home-product-link {
	color: var(--brand-blue);
}
@media only screen and (max-width: 767px) {
	.home-product-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* About */
.home-about .site-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 64px;
}
.home-about .home-heading {
	flex: 1 1 420px;
	min-width: 0;
}
.home-facts {
	flex: 1 1 420px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
}
.home-fact {
	border-top: 3px solid var(--brand-green);
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.home-fact strong {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.3;
	color: var(--brand-blue);
}
.home-fact span {
	font-size: 15px;
	color: var(--text-muted);
}

/* Call to action */
.home-cta {
	position: relative;
	overflow: hidden;
	background: var(--brand-blue);
	border-radius: 28px;
	padding: clamp(40px, 6vw, 80px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.home-cta-puzzle {
	right: -40px;
	bottom: -70px;
	opacity: 0.35;
}
.home-cta-text {
	position: relative;
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.home-cta h2 {
	font-weight: 700;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: #fff;
}
.home-cta h2 span {
	color: var(--brand-green);
}
.home-cta p {
	font-size: 18px;
	color: #C5D6DB;
}
.home-cta .site-btn {
	position: relative;
}