:root {
	--scapder-canvas: #f9f9f9;
	--scapder-paper: #ffffff;
	--scapder-surface: #eeeeee;
	--scapder-surface-raised: #e8e8e8;
	--scapder-surface-dim: #dadada;
	--scapder-ink: #1a1c1c;
	--scapder-ink-soft: #444748;
	--scapder-ink-muted: #646868;
	--scapder-border: #c4c7c7;
	--scapder-border-strong: #1a1c1c;
	--scapder-inverse: #1c1b1b;
	--scapder-inverse-ink: #ffffff;
	--scapder-error: #ba1a1a;
	--container: min(1440px, calc(100vw - 48px));
	--robot-image: url("img/hero/scapder-bg-2k.jpeg");
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--scapder-canvas);
	color: var(--scapder-ink);
	font-family: "Geist Mono", monospace;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

button,
a,
input {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 2px solid var(--scapder-border-strong);
	outline-offset: 4px;
}

.container {
	width: var(--container);
	margin-inline: auto;
}

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	transform: translateY(-150%);
	background: var(--scapder-inverse);
	color: var(--scapder-inverse-ink);
	padding: 10px 14px;
	border-radius: 4px;
	text-decoration: none;
	transition: transform 180ms ease;
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--scapder-canvas) 94%, transparent);
	border-bottom: 1px solid var(--scapder-border);
}

.header-inner {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--scapder-ink);
	text-decoration: none;
}

.brand-name {
	font-weight: 800;
	letter-spacing: -0.06em;
}

.nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav a,
.footer-links a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--scapder-ink-soft);
	text-decoration: none;
	padding: 0 12px;
	font-size: 13px;
	border-radius: 4px;
	transition:
		color 160ms ease,
		background 160ms ease;
}

.nav a:hover,
.footer-links a:hover {
	color: var(--scapder-ink);
	background: var(--scapder-surface);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.language-switch {
	display: inline-flex;
	border: 1px solid var(--scapder-border);
	border-radius: 4px;
	background: var(--scapder-paper);
}

.language-option {
	min-width: 56px;
	min-height: 40px;
	border: 0;
	background: transparent;
	color: var(--scapder-ink-soft);
	cursor: pointer;
}

.language-option.is-active {
	background: var(--scapder-inverse);
	color: var(--scapder-inverse-ink);
}

.hamburger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--scapder-border);
	border-radius: 4px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	background: var(--scapder-paper);
	color: var(--scapder-ink);
}

.hamburger span {
	width: 20px;
	height: 1px;
	background: var(--scapder-ink);
}

.btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 4px;
	padding: 12px 20px;
	border: 1px solid var(--scapder-border-strong);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition:
		background 160ms ease,
		color 160ms ease,
		border-color 160ms ease;
}

.btn-primary {
	background: var(--scapder-inverse);
	color: var(--scapder-inverse-ink);
}

.btn-primary:hover {
	background: #000000;
}

.btn-secondary {
	background: color-mix(in srgb, var(--scapder-paper) 74%, transparent);
	color: var(--scapder-ink);
}

.btn-secondary:hover {
	background: var(--scapder-surface);
}

.hero {
	position: relative;
	min-height: calc(100svh - 72px);
	overflow: hidden;
	background: var(--scapder-inverse);
	color: var(--scapder-inverse-ink);
}

.hero-robot {
	position: absolute;
	inset: 0;
	background-image: var(--robot-image);
	background-size: cover;
	background-position: 42% center;
	filter: grayscale(1) contrast(1.06);
	opacity: 0.82;
}

.hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.72),
		rgba(0, 0, 0, 0.42) 44%,
		rgba(0, 0, 0, 0.12)
	);
}

.hero-content {
	position: relative;
	z-index: 1;
	min-height: calc(100svh - 72px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: end;
	gap: 48px;
	padding-block: 96px 56px;
}

.hero-copy {
	max-width: 860px;
}

.system-line {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.76);
	font-size: clamp(14px, 1.6vw, 18px);
}

h1,
h2,
h3 {
	margin: 0;
	line-height: 1.05;
	letter-spacing: -0.06em;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

h1 {
	font-size: clamp(56px, 10vw, 140px);
	font-weight: 800;
	line-height: 0.9;
	color: var(--scapder-inverse-ink);
	text-shadow:
		2px 2px 10px rgba(0, 0, 0, 0.48),
		0 0 40px rgba(0, 0, 0, 0.28);
}

h2 {
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 750;
}

h3 {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 750;
}

.heading-stack {
	display: grid;
	gap: 0.12em;
}

.heading-sentence {
	display: block;
}

.hero-lead {
	max-width: 700px;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(17px, 1.8vw, 21px);
	line-height: 1.55;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.hero-panel {
	align-self: end;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.32);
	padding: 20px;
}

.hero-panel p {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.84);
	font-weight: 700;
}

.hero-panel dl,
.hero-panel dd {
	margin: 0;
}

.hero-panel div {
	padding-block: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-panel dt {
	color: rgba(255, 255, 255, 0.58);
	font-size: 12px;
}

.hero-panel dd {
	color: var(--scapder-inverse-ink);
	font-size: 14px;
}

.section {
	padding-block: 128px;
}

.section-tight {
	padding-block: 96px;
}

.split-grid {
	display: grid;
	grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1fr);
	gap: clamp(40px, 7vw, 112px);
	align-items: start;
}

.section-heading {
	max-width: 980px;
	margin-bottom: 48px;
}

.section-index {
	margin: 0 0 18px;
	color: var(--scapder-ink-muted);
	font-weight: 800;
	font-size: 13px;
}

.lead,
.section-lead,
.copy-stack p,
.case-card p,
.product-card p,
.capability-list p,
.final-cta p,
.site-footer p {
	color: var(--scapder-ink-soft);
}

.lead,
.section-lead {
	margin: 24px 0 0;
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.6;
}

.copy-stack > p:first-child {
	margin-top: 0;
}

.method-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 32px;
}

.method-grid article,
.case-card,
.product-card,
.capability-list li {
	border: 1px solid var(--scapder-border);
	border-radius: 8px;
	background: var(--scapder-paper);
}

.method-grid article {
	padding: 22px;
}

.method-grid h3 {
	font-size: 18px;
	letter-spacing: -0.04em;
}

.method-grid p {
	margin: 12px 0 0;
	font-size: 14px;
}

.proof-strip {
	background: var(--scapder-inverse);
	color: var(--scapder-inverse-ink);
	border-block: 1px solid var(--scapder-border-strong);
}

.proof-inner {
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.proof-inner span {
	color: rgba(255, 255, 255, 0.62);
	font-size: 13px;
}

.proof-inner ul {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 750;
}

.case-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.case-card {
	min-height: 410px;
	padding: 28px;
	display: flex;
	flex-direction: column;
}

.case-meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--scapder-border);
	color: var(--scapder-ink-muted);
	font-size: 13px;
}

.case-meta span:first-child {
	color: var(--scapder-ink);
	font-weight: 800;
}

.case-card h3 {
	margin-top: 28px;
}

.case-card p {
	margin: 18px 0 28px;
}

.case-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.case-metrics li {
	padding-top: 14px;
	border-top: 1px solid var(--scapder-border);
}

.case-metrics strong,
.case-metrics span {
	display: block;
}

.case-metrics strong {
	font-size: clamp(22px, 2.1vw, 32px);
	line-height: 1;
	letter-spacing: -0.06em;
}

.case-metrics span {
	margin-top: 8px;
	color: var(--scapder-ink-soft);
	font-size: 12px;
}

.section-inverse {
	background: var(--scapder-inverse);
	color: var(--scapder-inverse-ink);
}

.section-inverse .section-index,
.section-inverse .product-category,
.section-inverse .product-card p,
.section-inverse .product-card li {
	color: rgba(255, 255, 255, 0.62);
}

.product-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 16px;
}

.product-card {
	min-height: 420px;
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: #242424;
	border-color: rgba(255, 255, 255, 0.18);
}

.product-card-featured {
	background: var(--scapder-paper);
	color: var(--scapder-ink);
	border-color: var(--scapder-paper);
}

.product-card-link {
	color: inherit;
	text-decoration: none;
	transition:
		border-color 180ms ease,
		transform 180ms ease,
		background-color 180ms ease;
}

.product-card-link:hover,
.product-card-link:focus-visible {
	border-color: var(--scapder-border-strong);
	transform: translateY(-2px);
}

.product-card-link:focus-visible {
	outline: 2px solid var(--scapder-border-strong);
	outline-offset: 2px;
}

.product-card-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-top: 18px;
	border-top: 1px solid currentColor;
	font-size: 13px;
	font-weight: 750;
}

.section-inverse .product-card-featured .product-category,
.section-inverse .product-card-featured p,
.section-inverse .product-card-featured li {
	color: var(--scapder-ink-soft);
}

.product-category {
	margin: 0 0 28px;
	font-size: 13px;
}

.product-card h3 {
	margin-bottom: 18px;
}

.product-card p {
	margin: 0;
}

.product-card ul {
	display: grid;
	gap: 10px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.product-card li {
	padding-top: 10px;
	border-top: 1px solid currentColor;
	font-size: 13px;
}

.edgesight-grid {
	display: grid;
	grid-template-columns: 0.84fr 1.16fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.flow-list {
	display: grid;
	gap: 8px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: edgeflow;
}

.flow-list li {
	counter-increment: edgeflow;
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	min-height: 56px;
	border: 1px solid var(--scapder-border);
	border-radius: 4px;
	background: var(--scapder-paper);
	padding: 10px 14px;
	color: var(--scapder-ink-soft);
}

.flow-list li::before {
	content: counter(edgeflow, decimal-leading-zero);
	color: var(--scapder-ink);
	font-weight: 800;
}

.media-card {
	border: 1px solid var(--scapder-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--scapder-surface);
}

.media-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
}

.comparison-card {
	border: 1px solid var(--scapder-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--scapder-paper);
}

.comparison-stage {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--scapder-surface);
	--comparison: 50%;
}

.comparison-stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.comparison-overlay {
	clip-path: inset(0 0 0 var(--comparison));
}

.comparison-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--comparison);
	width: 0;
	pointer-events: none;
	transform: translateX(-1px);
	border-left: 2px solid var(--scapder-paper);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.comparison-divider span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--scapder-border-strong);
	border-radius: 999px;
	background: var(--scapder-paper);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}

.comparison-divider span::before,
.comparison-divider span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--scapder-ink);
}

.comparison-divider span::before {
	width: 16px;
	height: 1px;
}

.comparison-divider span::after {
	width: 1px;
	height: 16px;
}

.comparison-controls {
	display: grid;
	gap: 12px;
	padding: 18px 20px 20px;
	background: var(--scapder-paper);
}

.comparison-captions {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 12px;
	color: var(--scapder-ink-muted);
}

.comparison-slider {
	display: grid;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
}

.comparison-slider input {
	width: 100%;
	min-height: 44px;
	accent-color: var(--scapder-border-strong);
	cursor: ew-resize;
}

.comparison-help {
	margin: 0;
	font-size: 12px;
	color: var(--scapder-ink-soft);
}

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 32px;
}

.contact-form {
	display: grid;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--scapder-border);
	border-radius: 8px;
	background: var(--scapder-paper);
}

#contact-form {
	scroll-margin-top: 100px;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.form-grid label {
	display: grid;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--scapder-ink-soft);
}

.form-grid label span {
	color: var(--scapder-ink-soft);
}

.form-grid input,
.form-grid textarea {
	width: 100%;
	min-height: 44px;
	padding: 12px 14px;
	border: 1px solid var(--scapder-border);
	border-radius: 4px;
	background: var(--scapder-canvas);
	color: var(--scapder-ink);
	outline: none;
}

.form-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-consent {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: var(--scapder-ink-soft);
	font-size: 12px;
	font-weight: 400;
}

.contact-consent input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--scapder-border-strong);
}

.form-grid input:focus,
.form-grid textarea:focus {
	border-color: var(--scapder-border-strong);
	box-shadow: inset 0 0 0 1px var(--scapder-border-strong);
}

.form-grid textarea {
	min-height: 140px;
	resize: vertical;
}

.form-message {
	grid-column: 1 / -1;
}

.contact-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.contact-form-actions .btn {
	flex: 1 1 220px;
}

.contact-form-actions .btn:disabled {
	cursor: wait;
	opacity: 0.65;
}

.contact-help {
	margin: 0;
	font-size: 12px;
	color: var(--scapder-ink-muted);
}

.contact-status {
	min-height: 1.6em;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
}

.contact-status:empty {
	display: none;
}

.contact-status[data-type="error"] {
	color: var(--scapder-error);
}

.contact-status[data-type="success"] {
	color: var(--scapder-ink);
}

.capability-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.capability-list li {
	padding: 24px;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 4px 18px;
}

.capability-list span {
	grid-row: span 2;
	color: var(--scapder-ink-muted);
	font-weight: 800;
}

.capability-list strong {
	font-size: 18px;
}

.capability-list p {
	margin: 0;
}

.final-cta {
	background: var(--scapder-surface);
}

.final-cta-inner {
	max-width: 1020px;
}

.final-cta .btn {
	margin-top: 32px;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.team-section {
	padding-block: 96px;
	background: var(--scapder-surface);
	border-block: 1px solid var(--scapder-border);
}

.team-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--scapder-border);
	border-radius: 8px;
	background: var(--scapder-paper);
	overflow: hidden;
}

.team-card-media {
	aspect-ratio: 3 / 4;
	background: var(--scapder-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--scapder-ink-muted);
}

.team-card-media svg {
	width: 64px;
	height: 64px;
}

.team-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.04);
}

.team-card-body {
	padding: 20px 64px 20px 20px;
	flex: 1;
}

.team-card-name {
	display: block;
	font-size: 16px;
	font-weight: 750;
	color: var(--scapder-ink);
}

.team-card-role {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--scapder-ink-soft);
}

.team-card-link {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--scapder-border);
	border-radius: 4px;
	background: var(--scapder-paper);
	transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.team-card-link:hover,
.team-card-link:focus-visible {
	border-color: var(--scapder-border-strong);
	transform: translateY(-1px);
}

.team-card-link:focus-visible {
	outline: 2px solid var(--scapder-border-strong);
	outline-offset: 2px;
}

.team-card-link img {
	width: 20px;
	height: 20px;
	display: block;
	opacity: 0.9;
}

.site-footer {
	border-top: 1px solid var(--scapder-border);
	padding-block: 42px;
	background: var(--scapder-paper);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	gap: 32px;
}

.site-footer strong {
	display: block;
	font-size: 20px;
	letter-spacing: -0.06em;
}

.site-footer p {
	margin: 8px 0 0;
	font-size: 13px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

@media (max-width: 1120px) {
	.header-cta {
		display: none;
	}

	.hero-content,
	.split-grid,
	.edgesight-grid {
		grid-template-columns: 1fr;
	}

	.hero-panel {
		max-width: 560px;
	}

	.product-grid {
		grid-template-columns: 1fr;
	}

	.product-card {
		min-height: 320px;
	}

	.contact-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	:root {
		--container: min(100vw - 40px, 720px);
	}

	.site-header {
		position: sticky;
	}

	.hamburger {
		display: inline-flex;
	}

	.nav {
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 20px 20px;
		border-bottom: 1px solid var(--scapder-border);
		background: var(--scapder-canvas);
	}

	.nav a {
		justify-content: flex-start;
		border-bottom: 1px solid var(--scapder-border);
		border-radius: 0;
	}

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

	.header-inner {
		gap: 12px;
	}

	.header-actions {
		margin-left: auto;
	}

	.hero-content {
		min-height: calc(100svh - 72px);
		padding-block: 80px 32px;
		align-items: end;
	}

	.hero-robot {
		background-position: 50% center;
	}

	.hero-shade {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42));
	}

	.hero-panel {
		display: none;
	}

	.section,
	.section-tight {
		padding-block: 80px;
	}

	.method-grid,
	.case-list,
	.case-metrics {
		grid-template-columns: 1fr;
	}

	.proof-inner {
		align-items: flex-start;
		flex-direction: column;
		padding-block: 24px;
	}

	.proof-inner ul {
		gap: 10px 18px;
	}

	.case-card {
		min-height: auto;
	}

	.footer-inner {
		flex-direction: column;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	.comparison-captions {
		flex-direction: column;
		gap: 6px;
	}

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

@media (max-width: 520px) {
	:root {
		--container: min(100vw - 32px, 480px);
	}

	.brand-name {
		font-size: 14px;
	}

	.language-option {
		min-width: 48px;
	}

	.hero-actions,
	.footer-links {
		flex-direction: column;
		align-items: stretch;
	}

	.btn {
		width: 100%;
	}

	.case-meta {
		flex-direction: column;
		gap: 6px;
	}

	.capability-list li {
		grid-template-columns: 1fr;
	}

	.capability-list span {
		grid-row: auto;
	}

	.team-grid {
		grid-template-columns: 1fr;
	}

	.contact-details,
	.contact-form,
	.comparison-controls {
		padding: 20px;
	}
}

/* ── Scroll Reveal ── */

.reveal-enabled [data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 280ms ease,
		transform 280ms ease;
}

.reveal-enabled [data-reveal]:where(.is-revealed, .no-motion) {
	opacity: 1;
	transform: translateY(0);
}

/* ── Card Hover Micro-interactions ── */

.case-card,
.product-card,
.team-card,
.method-grid article,
.capability-list li {
	transition:
		border-color 180ms ease,
		transform 180ms ease;
}

.case-card:hover,
.product-card:hover,
.team-card:hover,
.method-grid article:hover,
.capability-list li:hover {
	border-color: var(--scapder-ink);
	transform: translateY(-2px);
}

/* ── Button Active Feedback ── */

.btn:active {
	transform: scale(0.97);
}

/* ── Hero Panel Entrance (CSS-only, respects reduced-motion) ── */

.hero-panel {
	opacity: 0;
	animation: hero-panel-in 320ms ease 500ms forwards;
}

@keyframes hero-panel-in {
	to {
		opacity: 1;
	}
}

/* ── Reduced Motion Override ── */

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-delay: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ── Sentientum detail dialog ─────────────────────────────────────────────
   Opens from the product card, so it borrows that card's dark surface rather
   than the page's off-white. Same tokens, same 4/8px radii, same 160ms motion
   budget as everything else here.
   ------------------------------------------------------------------------ */

/* The card became a <button> when it stopped being a link; these are the
   properties a button does not inherit and a card needs. */
button.product-card-link {
	width: 100%;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.modal[hidden] {
	display: none;
}

.modal {
	position: fixed;
	inset: 0;
	/* Above the sticky site header, which sits at 100. At 50 the header drew
	   on top of the dialog and ate its first rows. Still below the skip link
	   at 1000, which has to outrank everything. */
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 28, 28, 0.72);
	border: 0;
}

.modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(720px, 100%);
	/* The panel scrolls, not the overlay. When the overlay scrolled instead,
	   content taller than the viewport pushed its own top off screen and took
	   the close button with it. `dvh` so mobile browser chrome cannot clip it
	   either; the `vh` line above is the fallback. */
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 40px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	background: #242424;
	color: var(--scapder-inverse-ink);
}

.modal-close {
	/* Sticky rather than absolute: it has to stay reachable while the panel
	   scrolls. Negative offsets pull it back into the panel's padding so it
	   does not add a row of its own. */
	position: sticky;
	top: -8px;
	align-self: flex-end;
	margin: -16px -16px 0 auto;
	flex: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 4px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 160ms ease;
}

.modal-close:hover,
.modal-close:focus-visible {
	border-color: rgba(255, 255, 255, 0.4);
}

.modal-category {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 13px;
}

.modal-panel h2 {
	font-size: 28px;
	text-shadow: none;
}

.modal-lede {
	margin: 16px 0 0;
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.6;
}

.modal-section-label {
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.62);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.modal-steps {
	display: grid;
	gap: 0;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.modal-steps li {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 4px 12px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-steps li:last-child {
	border-bottom: 0;
}

.modal-step-index {
	grid-row: span 2;
	color: rgba(255, 255, 255, 0.42);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.modal-step-name {
	font-weight: 700;
}

.modal-step-copy {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.6;
}

.modal-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 20px 0 0;
}

.modal-facts dt {
	color: rgba(255, 255, 255, 0.62);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

.modal-facts dd {
	margin: 6px 0 0;
	font-size: 26px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.modal-proof-copy {
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.6;
}

.modal-video {
	margin-top: 32px;
}

.modal-video-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
}

.modal-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

.modal-video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: var(--scapder-inverse-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.modal-video-play:hover,
.modal-video-play:focus-visible {
	background: rgba(0, 0, 0, 0.5);
}

.modal-video-play .btn-youtube-mark {
	width: 28px;
}

.modal-video-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* `hidden` alone does not hide these two: the `img` reset above and the play
   button's own `display: flex` both outrank the user-agent `[hidden]` rule.
   Without this, the play overlay survives its own teardown and sits on top of
   the running player, swallowing every click meant for it. */
.modal-video-poster[hidden],
.modal-video-play[hidden] {
	display: none;
}

.modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.modal-actions .btn {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--scapder-inverse-ink);
}

.modal-actions .btn:hover,
.modal-actions .btn:focus-visible {
	border-color: var(--scapder-inverse-ink);
}

.modal-actions .btn-primary {
	background: var(--scapder-inverse-ink);
	border-color: var(--scapder-inverse-ink);
	color: var(--scapder-ink);
}

.btn-youtube-mark {
	width: 20px;
	height: auto;
	flex: none;
}

.modal-note {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 13px;
	line-height: 1.5;
}

.modal-note[hidden] {
	display: none;
}

@media (max-width: 720px) {
	.modal {
		padding: 12px;
	}

	.modal-panel {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		padding: 24px 20px;
	}

	.modal-panel h2 {
		font-size: 24px;
	}

	.modal-steps li {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.modal-step-index {
		grid-row: auto;
	}

	.modal-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.modal-actions .btn {
		width: 100%;
	}

	.modal-video-play {
		gap: 8px;
		font-size: 14px;
	}

	.modal-video-play .btn-youtube-mark {
		width: 22px;
	}
}