/**
 * HiFOCUS Modern 2026 — main stylesheet.
 *
 * 1. Design tokens
 * 2. Reset and base
 * 3. Layout
 * 4. Header and navigation
 * 5. Content
 * 6. Footer
 * 7. Utilities and accessibility
 * 8. Responsive
 */

/* -------------------------------------------------- *
 * 1. Design tokens
 * -------------------------------------------------- */

:root {
	--color-bg: #ffffff;
	--color-surface: #f7f8fa;
	--color-border: #e4e7ec;
	--color-text: #101828;
	--color-muted: #667085;
	--color-primary: #1666e8;
	--color-primary-dark: #0f4fb8;
	--color-inverse: #ffffff;
	--color-footer-bg: #0b1220;

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.5rem;
	--fs-2xl: 2rem;
	--fs-3xl: 2.75rem;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 3rem;
	--space-xl: 5rem;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 20px;

	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);

	--container: 1240px;
	--header-height: 76px;
	--transition: 180ms ease;
	/* Duplicated from section 9.1 so the header can ease before that block loads. */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------- *
 * 2. Reset and base
 * -------------------------------------------------- */

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

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

a:hover,
a:focus {
	color: var(--color-primary-dark);
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h1 {
	font-size: var(--fs-3xl);
}

h2 {
	font-size: var(--fs-2xl);
}

h3 {
	font-size: var(--fs-xl);
}

p + p {
	margin-top: var(--space-sm);
}

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

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

/* -------------------------------------------------- *
 * 3. Layout
 * -------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

.section {
	padding-block: var(--space-xl);
}

.site-main {
	min-height: 50vh;
}

/* -------------------------------------------------- *
 * 4. Header and navigation
 * -------------------------------------------------- */

/*
 * The header is fixed and dark. Over the front-page hero it starts fully
 * transparent (.site-header--overlay) and JS adds .is-scrolled past the
 * threshold to fade in the navy glass. On every other template it is opaque
 * from the first paint.
 *
 * Brand tokens (--navy-*, --cyan-*) are declared in section 9.1. They resolve
 * fine here because :root custom properties are not order-dependent.
 */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background-color: var(--navy-900);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out), backdrop-filter 0.35s var(--ease-out);
}

.site-header--overlay {
	background-color: transparent;
	border-bottom-color: transparent;
}

.site-header--overlay.is-scrolled,
.site-header:not(.site-header--overlay) {
	background-color: rgba(6, 11, 24, 0.72);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

/* The mobile panel is opaque, so the transparent overlay state must not
   show through behind it. */
.site-header.is-nav-open {
	background-color: var(--navy-900);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Fixed header removes itself from flow; give the content back its space.
   The hero adds the offset itself (section 9.5) so its gradient runs edge to edge. */
body:not(.home) .site-main {
	padding-top: var(--header-height);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--header-height);
}

/* Scroll progress bar. Width is written by JS as a 0–1 scale factor. */
.site-header__progress {
	position: absolute;
	inset: auto 0 -1px 0;
	height: 2px;
	background-image: var(--gradient-brand);
	transform: scaleX(var(--scroll-progress, 0));
	transform-origin: left;
	opacity: 0;
	transition: opacity var(--transition);
}

.site-header.is-scrolled .site-header__progress,
.site-header:not(.site-header--overlay) .site-header__progress {
	opacity: 1;
}

/* -------------------------------------------------- *
 * 4.1 Brand lockup
 * -------------------------------------------------- */

.site-branding .custom-logo {
	max-height: 42px;
	width: auto;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

/*
 * Theme-bundled master logo (assets/images/branding/).
 *
 * Deliberately carries no filter, opacity, mix-blend-mode or mask: the mark must
 * render in its original colours. Height is capped and width left auto so the
 * source 3:1 ratio is preserved at every breakpoint.
 */
.brand--logo {
	gap: 0;
}

.brand__logo {
	display: block;
	height: 42px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 6px 18px rgba(22, 102, 232, 0.35);
	transition: transform var(--transition), box-shadow var(--transition);
}

.brand__mark svg {
	width: 26px;
	height: 26px;
}

.brand:hover .brand__mark {
	transform: rotate(-6deg) scale(1.06);
	box-shadow: 0 8px 24px rgba(34, 211, 238, 0.45);
}

.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.brand__name {
	color: var(--color-inverse);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.brand__suffix {
	color: rgba(255, 255, 255, 0.52);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

/* -------------------------------------------------- *
 * 4.2 Desktop navigation
 * -------------------------------------------------- */

.main-navigation {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	list-style: none;
	padding: 0;
}

.nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-link {
	position: relative;
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--transition), background-color var(--transition);
}

.nav-link::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.3rem;
	height: 2px;
	border-radius: 2px;
	background-image: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.35s var(--ease-out);
}

.nav-link:hover,
.nav-item:focus-within > .nav-link,
.nav-item.is-open > .nav-link {
	color: var(--color-inverse);
}

.nav-link:hover::after,
.nav-item.is-open > .nav-link::after {
	transform: scaleX(1);
}

.nav-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: -0.5rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.55);
}

.nav-chevron {
	width: 16px;
	height: 16px;
	transition: transform var(--transition);
}

.nav-item:hover .nav-chevron,
.nav-item.is-open .nav-chevron {
	color: var(--cyan-400);
	transform: rotate(180deg);
}

/* -------------------------------------------------- *
 * 4.3 Dropdown panels
 * -------------------------------------------------- */

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	min-width: 290px;
	padding: 0.5rem;
	background-color: rgba(11, 18, 32, 0.96);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out),
		visibility 0.25s;
}

/* Bridges the gap between the trigger and the panel so the pointer can
   travel down without the panel closing mid-move. */
.nav-dropdown::before {
	content: "";
	position: absolute;
	inset: -14px 0 auto 0;
	height: 14px;
}

.nav-item--has-dropdown:hover > .nav-dropdown,
.nav-item--has-dropdown:focus-within > .nav-dropdown,
.nav-item--has-dropdown.is-open > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.nav-dropdown__list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 2px;
}

.nav-dropdown__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.7rem;
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color var(--transition), color var(--transition);
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.07);
	color: var(--color-inverse);
}

.nav-dropdown__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-sm);
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--cyan-400);
	transition: background-color var(--transition), color var(--transition);
}

.nav-dropdown__icon svg {
	width: 18px;
	height: 18px;
}

.nav-dropdown__link:hover .nav-dropdown__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

/* -------------------------------------------------- *
 * 4.4 Header actions
 * -------------------------------------------------- */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-left: var(--space-md);
}

.btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background-color: rgba(37, 211, 102, 0.12);
	border: 1px solid rgba(37, 211, 102, 0.4);
	color: #4ade80;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition),
		transform var(--transition), box-shadow var(--transition);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
	background-color: #25d366;
	border-color: #25d366;
	color: #04250f;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Shown only inside the open mobile panel. */
.btn-whatsapp--mobile {
	display: none;
}

/* -------------------------------------------------- *
 * 4.5 Hamburger
 * -------------------------------------------------- */

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-sm);
	color: var(--color-inverse);
}

.nav-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Scrim behind the mobile panel. */
.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background-color: rgba(6, 11, 24, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.3s var(--ease-out);
}

.nav-overlay.is-visible {
	opacity: 1;
}

/* Locked while the mobile panel is open. */
body.nav-open {
	overflow: hidden;
}

/* -------------------------------------------------- *
 * 4.6 Mobile navigation
 * -------------------------------------------------- */

@media (max-width: 1100px) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-header__actions .btn-whatsapp {
		display: none;
	}

	.btn-whatsapp--mobile {
		display: inline-flex;
		align-self: flex-start;
		margin-top: var(--space-md);
	}

	.main-navigation {
		position: fixed;
		inset: var(--header-height) 0 0 auto;
		z-index: 95;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: min(400px, 88vw);
		margin-left: 0;
		padding: var(--space-md);
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--navy-900);
		border-left: 1px solid rgba(255, 255, 255, 0.08);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.4s var(--ease-out), visibility 0.4s;
	}

	.main-navigation.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.nav-item {
		flex-wrap: wrap;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	.nav-link {
		flex: 1;
		padding: 1rem 0.25rem;
		font-size: 1rem;
	}

	.nav-link::after {
		display: none;
	}

	/* Full-height hit target next to the link. */
	.nav-dropdown-toggle {
		width: 44px;
		height: 44px;
		margin-left: 0;
	}

	/* Accordion: collapsed by height, not by visibility, so it can animate. */
	.nav-dropdown {
		position: static;
		width: 100%;
		min-width: 0;
		max-height: 0;
		padding: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		overflow: hidden;
		transform: none;
		transition: max-height 0.35s var(--ease-out), padding 0.35s var(--ease-out);
	}

	.nav-dropdown::before {
		display: none;
	}

	/* Hover must not open the accordion on touch; only the explicit toggle does. */
	.nav-item--has-dropdown:hover > .nav-dropdown,
	.nav-item--has-dropdown:focus-within > .nav-dropdown {
		max-height: 0;
		transform: none;
	}

	.nav-item--has-dropdown.is-open > .nav-dropdown,
	.nav-item--has-dropdown:focus-within.is-open > .nav-dropdown {
		max-height: 34rem;
		padding-bottom: 0.75rem;
		transform: none;
	}

	.nav-dropdown__link {
		padding-left: 0.25rem;
	}
}

/* -------------------------------------------------- *
 * 5. Content
 * -------------------------------------------------- */

.page-title {
	margin-bottom: var(--space-lg);
}

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-md);
}

.post-card {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.post-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.post-card__body {
	padding: var(--space-md);
}

.post-card__title {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-xs);
}

.post-card__title a {
	color: var(--color-text);
}

.post-card__title a:hover {
	color: var(--color-primary);
}

.post-card__meta {
	color: var(--color-muted);
	font-size: var(--fs-sm);
	margin-bottom: var(--space-sm);
}

.post-card__excerpt {
	color: var(--color-muted);
}

.pagination {
	margin-top: var(--space-lg);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-inverse);
}

/* -------------------------------------------------- *
 * 6. Footer
 * -------------------------------------------------- */

.site-footer {
	position: relative;
	background-color: var(--color-footer-bg);
	color: rgba(255, 255, 255, 0.72);
	padding-block: var(--space-lg);
	margin-top: var(--space-xl);
}

/* Hairline of brand gradient along the top edge, matching the header progress bar. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background-image: var(--gradient-brand);
	opacity: 0.9;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.72);
}

.site-footer a:hover {
	color: var(--color-inverse);
}

/* -------------------------------------------------- *
 * 6.1 Footer columns
 * -------------------------------------------------- */

/*
 * Brand column is given more room than the three link columns. auto-fit with a
 * minmax floor lets the whole grid collapse on its own before the explicit
 * breakpoints below take over.
 */
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col {
	min-width: 0;
}

.footer-col__title {
	margin: 0 0 var(--space-sm);
	color: var(--color-inverse);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.footer-col__desc {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
	max-width: 38ch;
}

/* Brand lockup — mirrors .brand in the header, inverted for the dark ground. */
.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
}

.footer-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.footer-brand__mark svg {
	width: 26px;
	height: 26px;
}

.footer-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.footer-brand__name {
	color: var(--color-inverse);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.footer-brand__suffix {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

/*
 * The logo image in the footer — Customizer upload or theme-bundled master.
 * Constrained so a large file cannot blow out the column. No filter, opacity or
 * blend is applied here either; the mark keeps its original colours.
 */
.footer-brand--image img,
.footer-brand--image .custom-logo,
.footer-brand__logo {
	display: block;
	max-width: 190px;
	max-height: 52px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.footer-tagline {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.5;
	background-image: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* -------------------------------------------------- *
 * 6.2 Footer link lists
 * -------------------------------------------------- */

.footer-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-link {
	position: relative;
	display: inline-block;
	font-size: var(--fs-sm);
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--transition), transform var(--transition);
}

.footer-link:hover,
.footer-link:focus-visible {
	color: var(--color-inverse);
	transform: translateX(3px);
}

/* -------------------------------------------------- *
 * 6.3 Contact column
 * -------------------------------------------------- */

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.footer-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: var(--cyan-400);
}

.footer-contact__icon svg {
	width: 16px;
	height: 16px;
}

.footer-contact__text {
	font-size: var(--fs-sm);
	line-height: 1.6;
	font-style: normal;
	padding-top: 0.28rem;
}

/* Address wraps; the link rows must not pick up the hover nudge mid-wrap. */
address.footer-contact__text {
	max-width: 26ch;
}

/* Scoped under .site-footer to outrank `.site-footer a`, which dims link colour. */
.site-footer .footer-quote {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-md);
	padding: 0.7rem 1.15rem;
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(22, 102, 232, 0.28);
	transition: transform var(--transition), box-shadow var(--transition);
}

.site-footer .footer-quote:hover,
.site-footer .footer-quote:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(22, 102, 232, 0.38);
	color: var(--color-inverse);
}

.footer-quote__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.footer-quote:hover .footer-quote__arrow {
	transform: translateX(3px);
}

/* -------------------------------------------------- *
 * 6.4 Bottom bar
 * -------------------------------------------------- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-top: var(--space-md);
	font-size: var(--fs-sm);
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	list-style: none;
	padding: 0;
}

/* -------------------------------------------------- *
 * 6.5 Footer responsive
 *
 * 1024px: brand spans the full width, the three link columns sit in a row
 * beneath it. 640px: everything stacks to a single column.
 * -------------------------------------------------- */

@media (max-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.footer-col--brand {
		grid-column: 1 / -1;
	}

	.footer-col__desc {
		max-width: 60ch;
	}
}

@media (max-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.site-footer__bottom {
		justify-content: center;
		text-align: center;
	}

	address.footer-contact__text {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.footer-link:hover,
	.footer-link:focus-visible,
	.footer-quote:hover,
	.footer-quote:focus-visible,
	.footer-quote:hover .footer-quote__arrow {
		transform: none;
	}
}

/* -------------------------------------------------- *
 * 7. Utilities and accessibility
 * -------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 200;
	width: auto;
	height: auto;
	clip-path: none;
	padding: var(--space-xs) var(--space-sm);
	background-color: var(--color-bg);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}

/* -------------------------------------------------- *
 * 8. Responsive
 * -------------------------------------------------- */

@media (max-width: 900px) {
	:root {
		--fs-3xl: 2.125rem;
		--fs-2xl: 1.625rem;
		--space-xl: 3rem;
	}

	/* Mobile navigation lives in section 4.6, at the 1100px nav breakpoint. */
}

/* ==================================================================== *
 * 9. HOMEPAGE
 *
 *  9.1  Brand tokens
 *  9.2  Buttons
 *  9.3  Scroll reveal
 *  9.4  Section heads
 *  9.5  Hero
 *  9.6  KPI cards
 *  9.7  Solutions
 *  9.8  Products
 *  9.9  Why HiFOCUS
 *  9.10 CTA
 *  9.11 Homepage responsive
 * ==================================================================== */

/* -------------------------------------------------- *
 * 9.1 Brand tokens
 * -------------------------------------------------- */

:root {
	--navy-900: #060b18;
	--navy-800: #0b1220;
	--navy-700: #111c33;
	--navy-600: #1a2942;
	--blue-500: #1666e8;
	--blue-400: #3b82f6;
	--cyan-400: #22d3ee;
	--cyan-300: #67e8f9;

	--gradient-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--cyan-400) 100%);
	--gradient-text: linear-gradient(100deg, var(--cyan-300) 0%, var(--blue-400) 55%, var(--cyan-400) 100%);

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------- *
 * 9.2 Buttons
 * -------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: transform var(--transition), box-shadow var(--transition),
		background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.btn--primary {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 6px 20px rgba(22, 102, 232, 0.35);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	color: var(--color-inverse);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(34, 211, 238, 0.4);
}

.btn--primary:hover .btn__icon {
	transform: translateX(3px);
}

/*
 * Quotation CTA. Inherits the .btn pill; only the gradient differs from
 * --gradient-brand, which runs blue-500 → cyan-400.
 */
.btn--quote {
	background-image: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
	color: var(--color-inverse);
	box-shadow: 0 6px 20px rgba(0, 123, 255, 0.35);
}

.btn--quote:hover,
.btn--quote:focus-visible {
	color: var(--color-inverse);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 212, 255, 0.4);
}

.btn--quote:hover .btn__icon {
	transform: translateX(3px);
}

.btn__icon {
	transition: transform var(--transition);
}

.btn--ghost {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--color-inverse);
	backdrop-filter: blur(6px);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--cyan-400);
	color: var(--color-inverse);
	transform: translateY(-2px);
}

/* -------------------------------------------------- *
 * 9.3 Scroll reveal
 *
 * Elements start hidden ONLY when JS is present to reveal them.
 * The .js-reveal class is set on <html> by main.js, so a no-JS or
 * failed-script visitor still sees all content.
 * -------------------------------------------------- */

.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
	transition-delay: calc(var(--reveal-delay, 0) * 90ms);
	will-change: opacity, transform;
}

.js-reveal [data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

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

/* -------------------------------------------------- *
 * 9.4 Section heads
 * -------------------------------------------------- */

.section-head {
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
	text-align: center;
}

.section-head--left {
	margin-inline: 0;
	text-align: left;
}

.section-head__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-xs);
	color: var(--blue-500);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.section-head__title {
	font-size: clamp(1.75rem, 3.6vw, 2.6rem);
	margin-bottom: var(--space-sm);
}

.section-head__lead {
	color: var(--color-muted);
	font-size: var(--fs-lg);
}

/* -------------------------------------------------- *
 * 9.5 Hero
 * -------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-800);
	color: var(--color-inverse);
	/* Clear the fixed header, which the hero gradient runs underneath. */
	padding-top: calc(clamp(3rem, 7vw, 6rem) + var(--header-height));
	padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 80% at 50% 0%, var(--navy-700) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

/* Perspective grid floor. */
.hero__grid {
	position: absolute;
	inset: auto 0 0;
	height: 55%;
	background-image:
		linear-gradient(rgba(34, 211, 238, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 211, 238, 0.12) 1px, transparent 1px);
	background-size: 48px 48px;
	transform: perspective(340px) rotateX(62deg);
	transform-origin: bottom center;
	mask-image: linear-gradient(to top, #000 0%, transparent 85%);
	-webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
	opacity: 0.7;
}

/* Drifting gradient orbs. */
.hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
	animation: hifocus-drift 18s var(--ease-out) infinite alternate;
}

.hero__orb--1 {
	width: 420px;
	height: 420px;
	top: -120px;
	left: -80px;
	background: radial-gradient(circle, var(--blue-500) 0%, transparent 70%);
}

.hero__orb--2 {
	width: 380px;
	height: 380px;
	top: 40px;
	right: -100px;
	background: radial-gradient(circle, var(--cyan-400) 0%, transparent 70%);
	animation-duration: 22s;
	animation-delay: -6s;
}

.hero__orb--3 {
	width: 300px;
	height: 300px;
	bottom: -60px;
	left: 45%;
	background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
	opacity: 0.35;
	animation-duration: 26s;
	animation-delay: -12s;
}

@keyframes hifocus-drift {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(40px, -30px, 0) scale(1.12);
	}
	100% {
		transform: translate3d(-30px, 25px, 0) scale(0.94);
	}
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-xl) var(--space-lg);
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 1rem;
	margin-bottom: var(--space-md);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-sm);
	font-weight: 500;
	backdrop-filter: blur(6px);
}

.hero__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--cyan-400);
	box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
	animation: hifocus-pulse 2.4s ease-out infinite;
}

@keyframes hifocus-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(34, 211, 238, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
	}
}

.hero__title {
	max-width: 14ch;
	font-size: clamp(2.25rem, 4.4vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.hero__title-accent {
	display: block;
	background-image: var(--gradient-text);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: hifocus-shimmer 6s linear infinite;
}

@keyframes hifocus-shimmer {
	to {
		background-position: 200% center;
	}
}

.hero__lead {
	max-width: 54ch;
	margin-top: var(--space-md);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-lg);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.hero__capabilities {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	list-style: none;
	padding: 0;
	margin-top: var(--space-lg);
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hero__capability {
	position: relative;
}

.hero__capability + .hero__capability::before {
	content: "";
	position: absolute;
	left: calc(var(--space-md) / -2);
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--cyan-400);
	transform: translate(-50%, -50%);
}

/* -------------------------------------------------- *
 * 9.5.1 Hero technology visual
 * -------------------------------------------------- */

.hero__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 30rem;
	/* Written by the pointer-parallax handler in main.js. */
	transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transform-style: preserve-3d;
	transition: transform 0.4s var(--ease-out);
}

.hero__visual-glow {
	position: absolute;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, rgba(22, 102, 232, 0.12) 40%, transparent 68%);
	filter: blur(30px);
	animation: hifocus-breathe 8s ease-in-out infinite;
}

.tech-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
	width: 100%;
	max-width: 30rem;
}

/* Offset the columns so the cluster reads as floating, not as a table. */
.tech-card:nth-child(1) {
	transform: translateY(-1.75rem);
}

.tech-card:nth-child(4) {
	transform: translateY(1.75rem);
}

.tech-card {
	position: relative;
	isolation: isolate;
	padding: var(--space-md) var(--space-sm);
	border-radius: var(--radius-lg);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
	animation: hifocus-float 7s ease-in-out infinite;
	animation-delay: var(--float-delay, 0s);
	/* The nth-child offsets above become the animation's resting point. */
	will-change: transform;
}

/*
 * Gradient border. A 1px gradient pad is masked so only the ring paints:
 * two mask layers, one clipped to the content box, composited with xor so
 * the centre is punched out. Cheaper than an extra wrapper element.
 */
.tech-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(140deg, rgba(34, 211, 238, 0.85) 0%, rgba(22, 102, 232, 0.35) 45%, rgba(255, 255, 255, 0.08) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.6;
}

.tech-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 8px 22px rgba(22, 102, 232, 0.45);
}

.tech-card__icon svg {
	width: 24px;
	height: 24px;
}

.tech-card__title {
	color: var(--color-inverse);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tech-card__status {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.35rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.78rem;
	font-weight: 500;
}

.tech-card__dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--cyan-400);
	box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
	animation: hifocus-pulse 2.4s ease-out infinite;
	animation-delay: var(--float-delay, 0s);
}

/*
 * Float in the Z axis only. The nth-child translateY offsets sit on the
 * element itself, so an animation that also wrote transform would erase
 * them — translate3d on the z-plane is composited and leaves them intact.
 */
@keyframes hifocus-float {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -12px;
	}
}

/* -------------------------------------------------- *
 * 9.6 KPI cards
 * -------------------------------------------------- */

.section--kpi {
	position: relative;
	margin-top: calc(var(--space-lg) * -1);
	padding-top: 0;
	padding-bottom: var(--space-xl);
	z-index: 1;
}

.kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.kpi-card {
	position: relative;
	overflow: hidden;
	padding: var(--space-md);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	text-align: center;
	transition: transform var(--transition), box-shadow var(--transition);
}

.kpi-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background-image: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ease-out);
}

.kpi-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(16, 24, 40, 0.12);
}

.kpi-card:hover::before,
.kpi-card.is-visible::before {
	transform: scaleX(1);
}

.kpi-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: rgba(22, 102, 232, 0.08);
	color: var(--blue-500);
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.kpi-card__icon svg {
	width: 22px;
	height: 22px;
}

.kpi-card:hover .kpi-card__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	transform: translateY(-2px);
}

.kpi-card__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background-image: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Reserve width so the counter animation cannot reflow the card. */
	font-variant-numeric: tabular-nums;
}

.kpi-card__label {
	margin-top: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
}

/* -------------------------------------------------- *
 * 9.6.0 Trusted Technology Partners (brand marquee)
 *
 * The track holds two identical groups. Translating it by -50% moves group two
 * into group one's starting position, so the loop point is invisible. Duration
 * is set by main.js from the measured track width to keep a constant px/sec
 * speed regardless of how many brands exist; the CSS value is the no-JS default.
 * -------------------------------------------------- */

.section--brands {
	background-color: var(--color-surface);
	border-block: 1px solid var(--color-border);
	overflow: hidden;
}

.marquee {
	position: relative;
	/* Full-bleed out of .container so cards run edge to edge. */
	width: 100%;
	overflow: hidden;
	margin-top: var(--space-lg);
	/* Cards lift on hover; don't clip the shadow. */
	padding-block: var(--space-xs);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: hifocus-marquee var(--marquee-duration, 40s) linear infinite;
}

.marquee__group {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	/* The gap must also sit between the two groups, or the seam shows. */
	padding-right: var(--space-md);
	margin: 0;
	list-style: none;
}

@keyframes hifocus-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Pause for pointer users and for anyone tabbing into a card. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

.marquee__item {
	flex: none;
}

.brand-card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 104px;
	padding: var(--space-sm);
	border-radius: var(--radius-lg);
	/*
	 * Opaque white, not a translucent pane: nine of the partner logos are JPEGs
	 * with a baked-in white background, and anything less than pure white leaves
	 * them sitting in a visible pale rectangle. Solid white also drops the
	 * backdrop blur this card used to carry, which was compositing work on every
	 * one of the ~130 cards the marquee paints.
	 */
	background-color: #ffffff;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition),
		border-color var(--transition);
}

.brand-card:hover,
.brand-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 16px 36px rgba(16, 24, 40, 0.12);
}

/*
 * Partner marks are shown exactly as their owners publish them: no filter, no
 * opacity wash, no blend mode. Consistency comes from geometry instead.
 *
 * max-height fills the card's content box (104px card - 2x --space-sm), which is
 * the binding limit for the square sources: nearly every logo here is a wide
 * wordmark centred on a padded 500x500 canvas, so it lands 72px wide.
 *
 * max-width is what keeps a differently-proportioned source in line. A logo
 * cropped tight to its ink would otherwise run the full card width and read as
 * two to three times the weight of its neighbours purely because of how its file
 * was exported. Capping the width lands it inside the same optical range.
 *
 * contain does the rest: every mark keeps its own proportions and none is ever
 * stretched to fill the box.
 */
.brand-card__logo {
	width: auto;
	height: auto;
	max-width: 96px;
	max-height: 72px;
	object-fit: contain;
}

/* Fallback when a brand has no logo uploaded. */
.brand-card--text {
	color: var(--color-text);
}

.brand-card__name {
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	line-height: 1.2;
	background-image: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/*
 * Reduced motion: stop the loop and hand the user a scrollable strip instead,
 * so every brand stays reachable.
 */
@media (prefers-reduced-motion: reduce) {
	.marquee {
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}

	.marquee__track {
		animation: none;
	}

	.marquee__item {
		scroll-snap-align: center;
	}
}

@media (max-width: 640px) {
	.brand-card {
		width: 152px;
		height: 88px;
	}

	/* Card drops to 152x88, so the logo box follows it down in proportion. */
	.brand-card__logo {
		max-width: 80px;
		max-height: 56px;
	}

	.brand-card__name {
		font-size: var(--fs-base);
	}
}

/* -------------------------------------------------- *
 * 9.6.05 Smart Technology Products (WooCommerce showcase)
 * -------------------------------------------------- */

.section--showcase-products {
	background-color: var(--color-bg);
}


/* ---------- Reusable carousel ----------
 *
 * Used by the homepage category carousel and the subcategory carousel on the
 * category archive. --visible is the only number to change per breakpoint: the
 * item width is computed from it, so gaps stay even and cards never straddle
 * the edge.
 *
 * Scrolling is native overflow-x, so it works with a trackpad, a touch swipe,
 * a scrollbar and the arrow buttons alike. main.js only wraps the arrows
 * around at each end.
 */

.carousel {
	--visible: 5;
	--carousel-gap: var(--space-md);
	position: relative;
}

.carousel__track {
	display: flex;
	gap: var(--carousel-gap);
	list-style: none;
	margin: 0;
	/* Breathing room for the card lift and its shadow. */
	padding: 0.5rem 0.25rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	flex: 0 0 calc(
		(100% - (var(--visible) - 1) * var(--carousel-gap)) / var(--visible)
	);
	scroll-snap-align: start;
	display: flex;
}

.carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--color-inverse);
	transform: translateY(-50%);
	transition: background-color var(--transition), border-color var(--transition),
		color var(--transition), transform var(--transition);
}

/* Only shown once JS confirms the track actually overflows. */
.carousel.is-scrollable .carousel__nav {
	display: inline-flex;
}

.carousel__nav:hover,
.carousel__nav:focus-visible {
	background-image: var(--gradient-brand);
	border-color: transparent;
	color: var(--color-inverse);
	transform: translateY(-50%) scale(1.08);
}

.carousel__nav svg {
	width: 20px;
	height: 20px;
}

.carousel__nav--prev {
	left: -1.25rem;
}

.carousel__nav--next {
	right: -1.25rem;
}

/* On the light subcategory band the arrows need the opposite treatment. */
.section--subcats .carousel__nav {
	background-color: var(--color-bg);
	border-color: var(--color-border);
	color: var(--color-text);
	box-shadow: var(--shadow-md);
}

/* ---------- Category cards ---------- */

.section--showcase-products {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
}

.showcase-products__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 60% at 15% 0%, rgba(22, 102, 232, 0.22) 0%, transparent 70%),
		radial-gradient(45% 55% at 85% 100%, rgba(34, 211, 238, 0.16) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.taxo-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-md) var(--space-sm);
	border-radius: var(--radius-lg);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: inherit;
	text-align: center;
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		box-shadow 0.35s var(--ease-out);
}

/* Masked gradient ring — same technique as the hero and module cards. */
.taxo-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(140deg, rgba(34, 211, 238, 0.6) 0%, rgba(22, 102, 232, 0.3) 50%, rgba(255, 255, 255, 0.07) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.55;
	transition: opacity 0.35s var(--ease-out);
}

.taxo-card:hover,
.taxo-card:focus-visible {
	transform: translateY(-8px);
	background-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.taxo-card:hover::before,
.taxo-card:focus-visible::before {
	opacity: 1;
}

.taxo-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto var(--space-sm);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--cyan-400);
	transition: transform var(--transition), background-color var(--transition),
		color var(--transition);
}

.taxo-card:hover .taxo-card__media {
	transform: scale(1.06) rotate(-4deg);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.taxo-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taxo-card__icon svg {
	width: 36px;
	height: 36px;
}

/* ---------- Category card: photographic media ----------
 *
 * A real product shot replaces the tinted icon tile. It gets no background and
 * no rotation — those read as chrome around an icon, but as damage around a
 * photograph. The icon variant above is untouched and stays the fallback.
 */

.taxo-card__media--image {
	width: 150px;
	height: 120px;
	border-radius: 0;
	background-color: transparent;
}

/* Undo the icon tile's hover treatment for the photo variant. */
.taxo-card:hover .taxo-card__media--image,
.taxo-card:focus-visible .taxo-card__media--image {
	transform: none;
	background-image: none;
	color: inherit;
}

/* contain + max-* keeps the source ratio inside the fixed 150x120 box. */
.taxo-card__media--image .taxo-card__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.5s var(--ease-out);
}

/* The zoom moves to the image itself. */
.taxo-card:hover .taxo-card__media--image .taxo-card__img,
.taxo-card:focus-visible .taxo-card__media--image .taxo-card__img {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.taxo-card:hover .taxo-card__media--image .taxo-card__img,
	.taxo-card:focus-visible .taxo-card__media--image .taxo-card__img {
		transform: none;
	}
}

.taxo-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.taxo-card__name {
	color: var(--color-inverse);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.taxo-card__count {
	margin-top: 0.25rem;
	color: var(--cyan-400);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.taxo-card__desc {
	margin-top: 0.6rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--fs-sm);
	/* Keep every card the same height regardless of description length. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.taxo-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	/* Pin to the bottom so the CTA aligns across cards. */
	margin-top: auto;
	padding-top: var(--space-md);
	color: var(--cyan-400);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.taxo-card__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.taxo-card:hover .taxo-card__arrow {
	transform: translateX(4px);
}

/* ---------- Compact variant: subcategory chips ---------- */

.section--subcats {
	background-color: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

/*
 * A category with no children renders this band for the back button alone.
 * Full section padding around a single pill leaves a dead stripe, so tighten it.
 */
.section--subcats:not(:has(.carousel)) {
	padding-block: var(--space-md);
}

.section--subcats:not(:has(.carousel)) .section-head {
	margin-bottom: 0;
}

.section--subcats:not(:has(.carousel)) .back-pill {
	margin: 0;
}

.taxo-card--compact {
	flex-direction: row;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.75rem;
	text-align: left;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.taxo-card--compact::before {
	display: none;
}

.taxo-card--compact:hover {
	transform: translateY(-4px);
	background-color: var(--color-bg);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 16px 34px rgba(16, 24, 40, 0.12);
}

.taxo-card--compact .taxo-card__media {
	width: 54px;
	height: 54px;
	margin: 0;
	flex-shrink: 0;
	background-color: rgba(22, 102, 232, 0.08);
	color: var(--blue-500);
}

.taxo-card--compact .taxo-card__icon svg {
	width: 24px;
	height: 24px;
}

.taxo-card--compact .taxo-card__body {
	text-align: left;
}

.taxo-card--compact .taxo-card__name {
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.taxo-card--compact .taxo-card__count {
	color: var(--color-muted);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.72rem;
	font-weight: 500;
}

/*
 * The product type currently being viewed. Colour alone would not carry this
 * for a colour-blind visitor, so the card also gains a ring and the link is
 * marked aria-current="page".
 */
.taxo-card--compact.is-active {
	background-image: var(--gradient-brand);
	border-color: transparent;
	box-shadow: 0 14px 30px rgba(22, 102, 232, 0.35);
}

.taxo-card--compact.is-active .taxo-card__media {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--color-inverse);
}

.taxo-card--compact.is-active .taxo-card__name {
	color: var(--color-inverse);
}

.taxo-card--compact.is-active .taxo-card__count {
	color: rgba(255, 255, 255, 0.8);
}

.taxo-card--compact.is-active:hover {
	background-image: var(--gradient-brand);
	border-color: transparent;
}

/*
 * Back button. Sits in the browsing band between the "Browse by type" eyebrow
 * and the "More in …" heading, on any category that has a parent.
 *
 * That band is the light surface, so this is a frosted white pill with a cyan
 * edge and navy text. Small and left-aligned: it is a wayfinding control, not
 * a call to action, and must not outweigh the heading beneath it.
 */
.back-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	/* Sits between the eyebrow and the h2; keep it tight to both. */
	margin: 0.35rem 0 var(--space-sm);
	padding: 0.45rem 0.95rem 0.45rem 0.7rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(34, 211, 238, 0.55);
	color: var(--navy-800);
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: var(--shadow-sm);
	transition: background-color var(--transition), border-color var(--transition),
		color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.back-pill__arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--blue-500);
	transition: transform var(--transition), color var(--transition);
}

.back-pill:hover,
.back-pill:focus-visible {
	background-color: var(--color-bg);
	border-color: var(--cyan-400);
	color: var(--navy-900);
	box-shadow: 0 10px 24px rgba(34, 211, 238, 0.24);
	transform: translateY(-1px);
}

/* The arrow leads the eye the way it points. */
.back-pill:hover .back-pill__arrow,
.back-pill:focus-visible .back-pill__arrow {
	transform: translateX(-4px);
	color: var(--cyan-400);
}

/* ---------- Category archive hero ---------- */

.taxo-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.taxo-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 20% 0%, rgba(22, 102, 232, 0.3) 0%, transparent 70%),
		radial-gradient(50% 60% at 90% 90%, rgba(34, 211, 238, 0.18) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.taxo-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: var(--space-lg);
}

/* No category image: let the copy run full width. */
.taxo-hero__inner:not(:has(.taxo-hero__visual)) {
	grid-template-columns: 1fr;
	max-width: 60rem;
}

.taxo-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-sm);
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--fs-sm);
}

.taxo-hero__crumbs a {
	color: rgba(255, 255, 255, 0.7);
}

.taxo-hero__crumbs a:hover {
	color: var(--cyan-400);
}

.taxo-hero__crumb-sep {
	color: rgba(255, 255, 255, 0.28);
}

.taxo-hero__crumb-current {
	color: var(--color-inverse);
	font-weight: 600;
}

@media (max-width: 640px) {
	/* A deep trail must not wrap into a ragged block; scroll it instead. */
	.taxo-hero__crumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
		mask-image: linear-gradient(90deg, #000 88%, transparent);
	}

	.taxo-hero__crumbs::-webkit-scrollbar {
		display: none;
	}

	.taxo-hero__crumbs a,
	.taxo-hero__crumb-current {
		white-space: nowrap;
	}
}

.taxo-hero__title {
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.taxo-hero__desc {
	max-width: 58ch;
	margin-top: var(--space-md);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-lg);
}

.taxo-hero__meta {
	margin-top: var(--space-md);
}

.taxo-hero__count {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background-color: rgba(34, 211, 238, 0.12);
	border: 1px solid rgba(34, 211, 238, 0.4);
	color: var(--cyan-300);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.taxo-hero__visual {
	position: relative;
}

.taxo-hero__glow {
	position: absolute;
	z-index: -1;
	inset: 8% -8% 0 -5%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, rgba(22, 102, 232, 0.12) 45%, transparent 70%);
	filter: blur(40px);
	animation: hifocus-breathe 9s ease-in-out infinite;
}

.taxo-hero__frame {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.taxo-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* ---------- Archive product grid ---------- */

.section--taxo-products {
	background-color: var(--color-bg);
}

.product-showcase-empty {
	grid-column: 1 / -1;
	padding: var(--space-lg);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-muted);
	text-align: center;
}

/* ---------- Featured products ----------
 *
 * Sits inside the dark Product Center band, below the category carousel, so
 * these cards are the navy/glass inverse of the light shop cards.
 */

.featured {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.featured__head {
	margin-bottom: var(--space-lg);
}

.featured__title {
	color: var(--color-inverse);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	letter-spacing: -0.02em;
}

.featured__lead {
	margin-top: 0.35rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--fs-sm);
}

.featured-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.featured-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-xl);
	/* Solid white pane on the navy band; the cyan hairline ties it to the brand. */
	background-color: #ffffff;
	border: 1px solid rgba(0, 212, 255, 0.2);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
	transition: transform 0.35s var(--ease-out), border-color var(--transition),
		box-shadow 0.35s var(--ease-out);
}

.featured-card:hover {
	transform: translateY(-8px);
	border-color: rgba(0, 212, 255, 0.45);
	/* The resting shadow, softly deepened. */
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.16);
}

/* Respect a reduced-motion preference: keep the shadow, drop the lift. */
@media (prefers-reduced-motion: reduce) {
	.featured-card:hover {
		transform: none;
	}
}

.featured-card__media {
	position: relative;
	/* Flex centres the shot; the fixed height keeps every card's body aligned. */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	padding: var(--space-sm);
	overflow: hidden;
	/* Light gradient so cut-out product shots sit on a soft, tinted field. */
	background-image: linear-gradient(160deg, #f8fbff 0%, #eef5fc 100%);
}

.featured-card__img {
	/* contain + max-* preserves the source ratio inside the fixed-height area. */
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.5s var(--ease-out);
}

.featured-card:hover .featured-card__img {
	transform: scale(1.06);
}

.featured-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-border);
}

.featured-card__placeholder svg {
	width: 44px;
	height: 44px;
}

/* Sits at the top of the body, above the brand — a cyan/blue gradient pill. */
.featured-card__badge {
	align-self: flex-start;
	max-width: 100%;
	margin-bottom: 0.6rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-image: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
	color: var(--color-inverse);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.featured-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Brand blue, not cyan: cyan on white does not reach a readable contrast. */
.featured-card__brand {
	color: var(--blue-500);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.featured-card__title {
	margin-top: 0.35rem;
	margin-bottom: 0.85rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	/* Two lines maximum; a long product name ellipses rather than reflowing
	   the card and breaking the grid's shared row height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.featured-card__title a {
	color: var(--navy-800);
}

.featured-card__title a:hover {
	color: var(--blue-500);
}

/*
 * Decorative: the title above is the real link. Stretching it over the whole
 * card keeps one link per card rather than three pointing at the same URL.
 */
.featured-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4rem;
	/* auto pushes the pill to the card bottom so uneven titles still align. */
	margin-top: auto;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	background-image: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
	color: var(--color-inverse);
	font-size: var(--fs-sm);
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(0, 123, 255, 0.28);
	transition: box-shadow 0.35s var(--ease-out);
}

.featured-card:hover .featured-card__cta {
	box-shadow: 0 10px 26px rgba(0, 123, 255, 0.45);
}

.featured-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.featured-card__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.featured-card:hover .featured-card__arrow {
	transform: translateX(4px);
}

/* ---------- View All ---------- */

.product-showcase-more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-lg);
}

.btn--outline {
	border-color: var(--color-border);
	color: var(--color-text);
	background-color: var(--color-bg);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background-image: var(--gradient-brand);
	border-color: transparent;
	color: var(--color-inverse);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(22, 102, 232, 0.32);
}

.product-showcase-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.product-showcase {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
		border-color var(--transition);
}

.product-showcase:hover {
	transform: translateY(-8px);
	border-color: rgba(34, 211, 238, 0.45);
	box-shadow: 0 26px 54px rgba(16, 24, 40, 0.14);
}

/* ---------- Media ---------- */

.product-showcase__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--color-surface);
	overflow: hidden;
}

.product-showcase__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.product-showcase:hover .product-showcase__img {
	transform: scale(1.06);
}

.product-showcase__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-border);
}

.product-showcase__placeholder svg {
	width: 48px;
	height: 48px;
}

.product-showcase__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-color: rgba(6, 11, 24, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--color-inverse);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Body ---------- */

.product-showcase__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-sm) var(--space-md) var(--space-md);
}

.product-showcase__brand {
	color: var(--blue-500);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.product-showcase__title {
	margin-top: 0.35rem;
	font-size: var(--fs-base);
	line-height: 1.35;
}

.product-showcase__title a {
	color: var(--color-text);
}

.product-showcase__title a:hover {
	color: var(--color-primary);
}

.product-showcase__desc {
	margin-top: 0.5rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	/* Keep cards on a common height regardless of copy length. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-showcase__actions {
	display: flex;
	gap: 0.5rem;
	/* Pin the buttons to the bottom so they align across the row. */
	margin-top: auto;
	padding-top: var(--space-md);
}

.btn-detail,
.btn-enquire {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.65rem 0.9rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition),
		border-color var(--transition), box-shadow var(--transition);
}

.btn-detail {
	flex: 1;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.product-showcase:hover .btn-detail,
.btn-detail:focus-visible {
	background-image: var(--gradient-brand);
	border-color: transparent;
	color: var(--color-inverse);
	box-shadow: 0 8px 20px rgba(22, 102, 232, 0.3);
}

.btn-enquire {
	border: 1px solid rgba(37, 211, 102, 0.4);
	background-color: rgba(37, 211, 102, 0.1);
	color: #128c3e;
}

.btn-enquire:hover,
.btn-enquire:focus-visible {
	background-color: #25d366;
	border-color: #25d366;
	color: #04250f;
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.32);
}

.btn-enquire__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ---------- Responsive ----------
 *
 * Cards visible per row: 5 desktop, 3 tablet, 2 mobile. The compact
 * subcategory chips are narrower, so they fit one more at each step.
 */

@media (max-width: 1240px) {
	.carousel__nav--prev { left: -0.5rem; }
	.carousel__nav--next { right: -0.5rem; }
}

@media (max-width: 1080px) {
	.product-showcase-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Two per row on tablet. */
	.featured-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.carousel {
		--visible: 3;
	}

	.taxo-hero__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.product-showcase-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Arrows would sit on top of the cards at this width; swipe instead. */
	.carousel.is-scrollable .carousel__nav {
		display: none;
	}

	.carousel__track {
		/* Peek the next card so the strip reads as scrollable. */
		scroll-padding-left: 0.25rem;
	}
}

@media (max-width: 640px) {
	.carousel {
		--visible: 2;
		--carousel-gap: var(--space-sm);
	}

	/* One per row on mobile: the card is image-led and needs the width. */
	.featured-grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

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

	/* Shorter media once the card spans the viewport, so the title stays visible. */
	.featured-card__media {
		height: 180px;
	}

	/* Sticky hover states on touch: keep the card still. */
	.featured-card:hover {
		transform: none;
	}

	.featured-card:hover .featured-card__img {
		transform: none;
	}

	.taxo-card {
		padding: var(--space-sm) 0.75rem;
	}

	.taxo-card__media {
		width: 64px;
		height: 64px;
	}

	/* The photo needs more room than the icon tile, even on a narrow card. */
	.taxo-card__media--image {
		width: 120px;
		height: 96px;
	}

	.taxo-card__icon svg {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 520px) {
	.product-showcase-grid {
		grid-template-columns: 1fr;
	}

	.product-showcase:hover,
	.taxo-card:hover {
		transform: none;
	}

	/* No hover on touch: the primary action must look primary unaided. */
	.btn-detail {
		background-image: var(--gradient-brand);
		border-color: transparent;
		color: var(--color-inverse);
	}
}

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

	.carousel__track {
		scroll-behavior: auto;
	}

	.taxo-hero__glow {
		animation: none;
	}
}

/* -------------------------------------------------- *
 * 9.6.1 Complete Technology Solutions
 *
 * A dark band between two light sections. Glass cards need something behind
 * them to refract, so the navy background is doing real work here, not just
 * decoration.
 * -------------------------------------------------- */

.section--technology {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
}

.technology__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 60% at 15% 0%, rgba(22, 102, 232, 0.22) 0%, transparent 70%),
		radial-gradient(45% 55% at 85% 100%, rgba(34, 211, 238, 0.16) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

/* The shared section head is dark-on-light; invert it for this band. */
.section-head--invert .section-head__title {
	color: var(--color-inverse);
}

.section-head--invert .section-head__eyebrow {
	color: var(--cyan-400);
}

.section-head--invert .section-head__lead {
	color: rgba(255, 255, 255, 0.66);
}

.tech-solution-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.tech-solution {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background-color: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		box-shadow 0.35s var(--ease-out);
}

/* Masked gradient ring — same technique as the hero cards (section 9.5.1). */
.tech-solution::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(140deg, rgba(34, 211, 238, 0.5) 0%, rgba(22, 102, 232, 0.25) 50%, rgba(255, 255, 255, 0.06) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.55;
	transition: opacity 0.35s var(--ease-out);
}

.tech-solution:hover {
	transform: translateY(-8px);
	background-color: rgba(255, 255, 255, 0.07);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45);
}

.tech-solution:hover::before {
	opacity: 1;
}

/* Light sweep that follows the lift. */
.tech-solution__sheen {
	position: absolute;
	z-index: -1;
	top: -70%;
	left: 50%;
	width: 160%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.18) 0%, transparent 62%);
	transform: translateX(-50%) scale(0.5);
	opacity: 0;
	transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

.tech-solution:hover .tech-solution__sheen {
	transform: translateX(-50%) scale(1);
	opacity: 1;
}

.tech-solution__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 10px 26px rgba(22, 102, 232, 0.4);
	transition: transform var(--transition), box-shadow var(--transition);
}

.tech-solution__icon svg {
	width: 28px;
	height: 28px;
}

.tech-solution:hover .tech-solution__icon {
	transform: scale(1.08) rotate(-5deg);
	box-shadow: 0 14px 34px rgba(34, 211, 238, 0.5);
}

.tech-solution__title {
	font-size: var(--fs-lg);
	color: var(--color-inverse);
	letter-spacing: -0.02em;
}

.tech-solution__desc {
	margin-top: 0.5rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
}

.tech-solution__list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.tech-solution__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--fs-sm);
}

.tech-solution__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cyan-400);
}

.tech-solution__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	/* Pin to the bottom so links align across cards of unequal height. */
	margin-top: auto;
	padding-top: var(--space-md);
	color: var(--cyan-400);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.tech-solution__link:hover,
.tech-solution__link:focus-visible {
	color: var(--cyan-300);
}

.tech-solution__arrow {
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
}

.tech-solution__link:hover .tech-solution__arrow,
.tech-solution:hover .tech-solution__arrow {
	transform: translateX(4px);
}

/* -------------------------------------------------- *
 * 9.6.2 Business Software Solutions
 *
 * Deliberately the inverse of 9.6.1: light cards on light ground, product-led
 * rather than capability-led. Each card carries its own --accent-a/--accent-b
 * pair (set inline from PHP) so the gradients vary across the grid.
 *
 * The mockups are decorative chrome built from divs and two SVG circles.
 * They animate from empty once the card's reveal observer adds .is-visible.
 * -------------------------------------------------- */

/* ---------- Software Solutions ----------
 *
 * Dark navy band with glass cards, sitting directly after the Product Center.
 * Each card links to its software_solution detail page.
 */

.section--software {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
}

.software__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 15% 0%, rgba(22, 102, 232, 0.25) 0%, transparent 70%),
		radial-gradient(50% 60% at 88% 92%, rgba(34, 211, 238, 0.14) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.software-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.software-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	border-radius: var(--radius-xl);
	border: 1px solid rgba(34, 211, 238, 0.22);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		border-color var(--transition), box-shadow 0.35s var(--ease-out);
}

.software-card:hover,
.software-card:focus-within {
	transform: translateY(-8px);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.software-card:hover,
	.software-card:focus-within {
		transform: none;
	}
}

.software-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--cyan-400);
	transition: background-image var(--transition), color var(--transition);
}

.software-card__icon svg {
	width: 26px;
	height: 26px;
}

.software-card:hover .software-card__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.software-card__title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-inverse);
}

.software-card__desc {
	margin-top: 0.4rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.software-card__list {
	margin: var(--space-sm) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
}

.software-card__list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--fs-sm);
}

.software-card__check {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--cyan-400);
}

.software-card__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4rem;
	/* auto pins the link to the card bottom so uneven copy still aligns. */
	margin-top: auto;
	padding-top: var(--space-sm);
	color: var(--cyan-400);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.software-card__link:hover {
	color: var(--cyan-300);
}

.software-card__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.software-card:hover .software-card__arrow {
	transform: translateX(4px);
}

.software-more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-lg);
}

.saas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.saas-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
		border-color var(--transition);
}

/* Accent hairline across the top, revealed on hover. */
.saas-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: 3px;
	background-image: linear-gradient(90deg, var(--accent-a), var(--accent-b));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease-out);
}

.saas-card:hover {
	transform: translateY(-8px);
	border-color: transparent;
	box-shadow: 0 28px 60px rgba(16, 24, 40, 0.16);
}

.saas-card:hover::before {
	transform: scaleX(1);
}

/*
 * Pointer spotlight. main.js writes --mx/--my as percentages; the gradient
 * is painted here so JS never touches background or transform directly.
 */
.saas-card__spotlight {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		18rem circle at var(--mx, 50%) var(--my, 0%),
		color-mix(in srgb, var(--accent-b) 16%, transparent) 0%,
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.35s var(--ease-out);
}

.saas-card:hover .saas-card__spotlight {
	opacity: 1;
}

/* ---------- Mockup shell ---------- */

.mockup {
	position: relative;
	padding: 0.7rem;
	background: linear-gradient(150deg, var(--accent-a), var(--accent-b));
	border-bottom: 1px solid var(--color-border);
}

.mockup__chrome {
	display: flex;
	gap: 5px;
	margin-bottom: 0.6rem;
	padding-left: 0.15rem;
}

.mockup__chrome span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.45);
}

.mockup__body {
	position: relative;
	height: 116px;
	padding: 0.75rem;
	border-radius: var(--radius-sm);
	background-color: rgba(6, 11, 24, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	overflow: hidden;
}

/* ---------- Variant: table grid ---------- */

.mockup__body--table {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 6px;
}

.mockup__cell {
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.1);
	transition: background-color 0.5s var(--ease-out);
}

.saas-card.is-visible .mockup__cell.is-active {
	background-color: rgba(255, 255, 255, 0.85);
}

/* ---------- Variant: bar chart ---------- */

.mockup__body--bars {
	display: flex;
	align-items: flex-end;
	gap: 7px;
}

.mockup__bar {
	flex: 1;
	height: 0;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35));
	transition: height 0.8s var(--ease-out);
}

.saas-card.is-visible .mockup__bar {
	height: var(--h);
}

.mockup__bar:nth-child(2) { transition-delay: 60ms; }
.mockup__bar:nth-child(3) { transition-delay: 120ms; }
.mockup__bar:nth-child(4) { transition-delay: 180ms; }
.mockup__bar:nth-child(5) { transition-delay: 240ms; }
.mockup__bar:nth-child(6) { transition-delay: 300ms; }

/* ---------- Variant: progress rows ---------- */

.mockup__body--rows {
	display: grid;
	align-content: space-between;
}

.mockup__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mockup__row-label {
	width: 22%;
	height: 6px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.28);
}

.mockup__row-track {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.mockup__row-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.9);
	transition: width 0.9s var(--ease-out);
}

.saas-card.is-visible .mockup__row-fill {
	width: var(--p);
}

.mockup__row:nth-child(2) .mockup__row-fill { transition-delay: 90ms; }
.mockup__row:nth-child(3) .mockup__row-fill { transition-delay: 180ms; }
.mockup__row:nth-child(4) .mockup__row-fill { transition-delay: 270ms; }

/* ---------- Variants: donut and ring ---------- */

.mockup__body--donut,
.mockup__body--ring {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.mockup__donut,
.mockup__ring {
	width: 90px;
	height: 90px;
	flex-shrink: 0;
	/* Start the arc at 12 o'clock. */
	transform: rotate(-90deg);
}

.mockup__donut-track,
.mockup__ring-track,
.mockup__donut-fg,
.mockup__ring-fg {
	fill: none;
	stroke-linecap: round;
}

.mockup__donut-track,
.mockup__ring-track {
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 9;
}

.mockup__donut-fg,
.mockup__ring-fg {
	stroke: rgba(255, 255, 255, 0.92);
	stroke-width: 9;
	stroke-dasharray: var(--dash);
	/* Fully hidden until revealed, then wound back to --offset. */
	stroke-dashoffset: var(--dash);
	transition: stroke-dashoffset 1.1s var(--ease-out);
}

.saas-card.is-visible .mockup__donut-fg,
.saas-card.is-visible .mockup__ring-fg {
	stroke-dashoffset: var(--offset);
}

.mockup__legend,
.mockup__ring-rows {
	display: grid;
	gap: 9px;
	flex: 1;
}

.mockup__legend-row {
	display: flex;
	align-items: center;
}

.mockup__swatch {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.9);
}

.mockup__swatch--alt {
	width: 70%;
	background-color: rgba(255, 255, 255, 0.55);
}

.mockup__swatch--muted {
	width: 45%;
	background-color: rgba(255, 255, 255, 0.28);
}

.mockup__ring-rows span {
	height: 6px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.85);
}

.mockup__ring-rows span:nth-child(2) {
	width: 72%;
	background-color: rgba(255, 255, 255, 0.5);
}

.mockup__ring-rows span:nth-child(3) {
	width: 48%;
	background-color: rgba(255, 255, 255, 0.28);
}

/* ---------- Variant: code lines ---------- */

.mockup__body--code {
	display: grid;
	align-content: space-between;
}

.mockup__line {
	width: 0;
	height: 7px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.8);
	transition: width 0.7s var(--ease-out);
}

.saas-card.is-visible .mockup__line {
	width: var(--w);
}

.mockup__line:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.4);
}

.mockup__line:nth-child(2) { transition-delay: 70ms; }
.mockup__line:nth-child(3) { transition-delay: 140ms; }
.mockup__line:nth-child(4) { transition-delay: 210ms; }
.mockup__line:nth-child(5) { transition-delay: 280ms; }

/*
 * No-JS fallback. The mockups fill in response to .is-visible, which only the
 * reveal observer adds. Without JS the <html> element never gets .js-reveal,
 * so paint every mockup at its final value instead of leaving it empty.
 */
html:not(.js-reveal) .mockup__cell.is-active {
	background-color: rgba(255, 255, 255, 0.85);
}

html:not(.js-reveal) .mockup__bar {
	height: var(--h);
}

html:not(.js-reveal) .mockup__row-fill {
	width: var(--p);
}

html:not(.js-reveal) .mockup__line {
	width: var(--w);
}

html:not(.js-reveal) .mockup__donut-fg,
html:not(.js-reveal) .mockup__ring-fg {
	stroke-dashoffset: var(--offset);
}

/* ---------- Card body ---------- */

.saas-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-md);
}

.saas-card__title {
	font-size: var(--fs-lg);
	letter-spacing: -0.02em;
}

.saas-card__desc {
	margin-top: 0.4rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.saas-card__list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 0.75rem;
	margin-top: var(--space-md);
}

.saas-card__list li {
	position: relative;
	padding-left: 1rem;
	color: var(--color-muted);
	font-size: 0.8rem;
	font-weight: 500;
}

.saas-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-image: linear-gradient(135deg, var(--accent-a), var(--accent-b));
}

.btn-demo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* Pin to the bottom so buttons align across cards of unequal height. */
	margin-top: auto;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 600;
	transition: color var(--transition), border-color var(--transition),
		background-color var(--transition), box-shadow var(--transition);
}

.saas-card:hover .btn-demo {
	background-image: linear-gradient(135deg, var(--accent-a), var(--accent-b));
	border-color: transparent;
	color: var(--color-inverse);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--accent-a) 40%, transparent);
}

.btn-demo:focus-visible {
	border-color: var(--accent-a);
}

.btn-demo__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.saas-card:hover .btn-demo__arrow {
	transform: translateX(4px);
}

/* -------------------------------------------------- *
 * 9.7 Solutions
 * -------------------------------------------------- */

.section--solutions {
	background-color: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

.solution-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.solution-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.solution-card:hover {
	transform: translateY(-6px);
	border-color: rgba(22, 102, 232, 0.35);
	box-shadow: 0 20px 44px rgba(16, 24, 40, 0.12);
}

.solution-card__glow {
	position: absolute;
	z-index: -1;
	top: -60%;
	left: 50%;
	width: 180%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.16) 0%, transparent 60%);
	transform: translateX(-50%) scale(0.4);
	opacity: 0;
	transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

.solution-card:hover .solution-card__glow {
	transform: translateX(-50%) scale(1);
	opacity: 1;
}

.solution-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 6px 18px rgba(22, 102, 232, 0.3);
	transition: transform var(--transition);
}

.solution-card__icon svg {
	width: 26px;
	height: 26px;
}

.solution-card:hover .solution-card__icon {
	transform: scale(1.08) rotate(-4deg);
}

.solution-card__title {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-sm);
}

.solution-card__list {
	list-style: none;
	padding: 0;
	margin-top: auto;
	display: grid;
	gap: 0.6rem;
}

.solution-card__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.solution-card__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cyan-400);
}

/* -------------------------------------------------- *
 * 9.8 Products
 * -------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.product-card {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.product-card:hover {
	transform: translateY(-4px);
	border-color: rgba(34, 211, 238, 0.45);
	box-shadow: 0 16px 36px rgba(16, 24, 40, 0.1);
}

.product-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background-color: rgba(22, 102, 232, 0.08);
	color: var(--blue-500);
	transition: background-color var(--transition), color var(--transition);
}

.product-card__icon svg {
	width: 24px;
	height: 24px;
}

.product-card:hover .product-card__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.product-card__title {
	font-size: var(--fs-base);
	margin-bottom: 0.35rem;
}

.product-card__desc {
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* -------------------------------------------------- *
 * 9.9 Why HiFOCUS
 * -------------------------------------------------- */

.section--why {
	background-color: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

.why__inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--space-xl);
	align-items: start;
}

.section--why .section-head {
	margin-bottom: 0;
	position: sticky;
	top: calc(var(--header-height) + var(--space-md));
}

.why-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--space-sm);
}

.why-item {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: transform var(--transition), box-shadow var(--transition);
}

.why-item:hover {
	transform: translateX(6px);
	box-shadow: var(--shadow-md);
}

.why-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--navy-800);
	color: var(--cyan-400);
}

.why-item__icon svg {
	width: 22px;
	height: 22px;
}

.why-item__title {
	font-size: var(--fs-base);
	margin-bottom: 0.35rem;
}

.why-item__desc {
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* -------------------------------------------------- *
 * 9.10 CTA
 * -------------------------------------------------- */

.section--cta {
	padding-bottom: 0;
}

.cta-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 5rem) var(--space-md);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(80% 120% at 50% 0%, var(--navy-700) 0%, transparent 70%),
		linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
	color: var(--color-inverse);
	text-align: center;
}

.cta-panel__glow {
	position: absolute;
	z-index: -1;
	bottom: -55%;
	left: 50%;
	width: 120%;
	aspect-ratio: 2 / 1;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.28) 0%, transparent 62%);
	transform: translateX(-50%);
	animation: hifocus-breathe 9s ease-in-out infinite;
}

@keyframes hifocus-breathe {
	0%,
	100% {
		opacity: 0.55;
		transform: translateX(-50%) scale(1);
	}
	50% {
		opacity: 1;
		transform: translateX(-50%) scale(1.15);
	}
}

.cta-panel__title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	letter-spacing: -0.03em;
}

.cta-panel__lead {
	max-width: 58ch;
	margin-inline: auto;
	margin-top: var(--space-sm);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-lg);
}

.cta-panel__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

/* -------------------------------------------------- *
 * 9.11 Homepage responsive
 * -------------------------------------------------- */

/* Stack the hero before the columns get too narrow to read. */
@media (max-width: 980px) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.hero__content {
		align-items: center;
		text-align: center;
	}

	.hero__title,
	.hero__lead {
		max-width: 100%;
	}

	.hero__actions,
	.hero__capabilities {
		justify-content: center;
	}

	.hero__visual {
		min-height: 0;
		/* Pointer parallax is meaningless on touch; drop the perspective too. */
		transform: none;
	}

	.tech-grid {
		max-width: 34rem;
	}
}

@media (max-width: 1080px) {
	.solution-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

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

	.why__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.section--why .section-head {
		position: static;
	}
}

@media (max-width: 900px) {
	.kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero__orb {
		filter: blur(60px);
	}
}

@media (max-width: 640px) {
	.solution-grid,
	.product-grid,
	.tech-solution-grid,
	.saas-grid {
		grid-template-columns: 1fr;
	}

	/* Hover lift is dead weight on touch and only causes sticky-hover states. */
	.tech-solution:hover,
	.saas-card:hover {
		transform: none;
	}

	/* Touch has no hover, so the Demo button must read as a button unaided. */
	.btn-demo {
		background-image: linear-gradient(135deg, var(--accent-a), var(--accent-b));
		border-color: transparent;
		color: var(--color-inverse);
	}

	/* Keep the four cards two-up; a single column pushes the KPIs off-screen. */
	.tech-grid {
		gap: 0.75rem;
	}

	.tech-card {
		padding: var(--space-sm) 0.75rem;
	}

	/* The stagger offsets waste vertical space once the cards are small. */
	.tech-card:nth-child(1),
	.tech-card:nth-child(4) {
		transform: none;
	}

	.tech-card__icon {
		width: 38px;
		height: 38px;
		margin-bottom: 0.6rem;
	}

	.tech-card__icon svg {
		width: 20px;
		height: 20px;
	}

	.tech-card__status {
		font-size: 0.72rem;
	}

	.hero__actions .btn,
	.cta-panel__actions .btn {
		width: 100%;
	}

	.hero__capabilities {
		gap: var(--space-xs) var(--space-sm);
		letter-spacing: 0.1em;
	}

	.hero__capability + .hero__capability::before {
		left: calc(var(--space-sm) / -2);
	}

	.why-item:hover {
		transform: none;
	}
}

/* Honour reduced-motion for every homepage animation. */
@media (prefers-reduced-motion: reduce) {
	.hero__orb,
	.hero__pulse,
	.hero__title-accent,
	.cta-panel__glow,
	.hero__visual-glow,
	.tech-card,
	.tech-card__dot,
	.pos-hero__glow,
	.device--float,
	.frame--extra {
		animation: none;
	}

	.hero__visual {
		transform: none;
	}

	.kpi-card::before {
		transform: scaleX(1);
	}
}

/* ==================================================================== *
 * 10. WINDOWS RESTAURANT POS  (template-windows-pos.php)
 *
 *  10.1 Hero + device frames
 *  10.2 Showcase sections
 *  10.3 Responsive
 *
 * Every image here is a real 813x508 or 1280x800 application screenshot.
 * The frames set aspect-ratio to match, so a slow image never collapses
 * its own frame — the box is reserved before the file lands.
 * ==================================================================== */

/* -------------------------------------------------- *
 * 10.1 Hero and device frames
 * -------------------------------------------------- */

.pos-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.pos-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 20% 0%, rgba(22, 102, 232, 0.28) 0%, transparent 70%),
		radial-gradient(50% 60% at 90% 90%, rgba(34, 211, 238, 0.18) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.pos-hero__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: var(--space-xl) var(--space-lg);
}

.pos-hero__title {
	max-width: 13ch;
	font-size: clamp(2.1rem, 4vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.pos-hero__lead {
	max-width: 52ch;
	margin-top: var(--space-md);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-lg);
}

.pos-hero__visual {
	position: relative;
	padding-block: var(--space-lg);
}

.pos-hero__glow {
	position: absolute;
	z-index: -1;
	inset: 10% -10% 0 -5%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, rgba(22, 102, 232, 0.12) 45%, transparent 70%);
	filter: blur(40px);
	animation: hifocus-breathe 9s ease-in-out infinite;
}

/* ---------- Shared device chrome ---------- */

.device {
	margin: 0;
}

.device__screen {
	position: relative;
	overflow: hidden;
	background-color: var(--navy-800);
}

.device__screen img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Laptop ---------- */

.device--laptop {
	position: relative;
	z-index: 1;
	width: 100%;
}

.device--laptop .device__screen {
	padding: 10px 10px 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	background-color: #10192b;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}

.device--laptop .device__screen img {
	border-radius: 6px 6px 0 0;
}

/* The wedge under the lid. */
.device--laptop .device__base {
	position: relative;
	height: 14px;
	margin-inline: -6%;
	border-radius: 0 0 12px 12px;
	background: linear-gradient(180deg, #223046 0%, #0e1727 100%);
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
}

/* Trackpad notch. */
.device--laptop .device__base::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 84px;
	height: 5px;
	border-radius: 0 0 6px 6px;
	background-color: rgba(255, 255, 255, 0.16);
	transform: translateX(-50%);
}

/* ---------- POS terminal ---------- */

.device--terminal {
	position: absolute;
	z-index: 2;
	bottom: -0.5rem;
	left: -3rem;
	width: 42%;
}

.device--terminal .device__screen {
	padding: 12px;
	border-radius: var(--radius-md);
	background: linear-gradient(160deg, #253350 0%, #131e33 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.device--terminal .device__screen img {
	border-radius: 4px;
}

.device--terminal .device__stand {
	display: block;
	width: 34%;
	height: 10px;
	margin: 0 auto;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(180deg, #253350 0%, #0d1626 100%);
}

/* ---------- Floating floor-plan card ---------- */

.device--float {
	position: absolute;
	z-index: 3;
	top: 0;
	right: -2rem;
	width: 38%;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid rgba(34, 211, 238, 0.35);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55);
	animation: hifocus-float 7s ease-in-out infinite;
	animation-delay: 1.2s;
}

.device--float .device__screen {
	border-radius: inherit;
}

/* -------------------------------------------------- *
 * 10.2 Showcase sections
 * -------------------------------------------------- */

.showcase {
	position: relative;
	background-color: var(--navy-800);
	color: var(--color-inverse);
	overflow: hidden;
}

/* Hairline between consecutive dark bands. */
.showcase + .showcase {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.showcase:nth-of-type(even) {
	background-color: var(--navy-900);
}

.showcase__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: var(--space-xl);
}

/* Flip the visual to the right without reordering the DOM: content still
   reads heading-then-image for assistive tech. */
.showcase--flip .showcase__media {
	order: 2;
}

.showcase__media {
	position: relative;
	/* Room for the floating secondary frames to overhang. */
	padding: var(--space-sm) var(--space-md) var(--space-lg) var(--space-sm);
}

.showcase__glow {
	position: absolute;
	z-index: 0;
	inset: 15% 5% 5% 5%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(22, 102, 232, 0.3) 0%, rgba(34, 211, 238, 0.12) 45%, transparent 70%);
	filter: blur(48px);
}

/* ---------- Browser frame ---------- */

.frame {
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: #0f1829;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.frame--primary {
	position: relative;
	z-index: 1;
	transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.showcase__media:hover .frame--primary {
	transform: translateY(-6px);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}

.frame__chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.55rem 0.75rem;
	background-color: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.frame__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.22);
}

.frame__dot:first-child { background-color: rgba(255, 96, 92, 0.75); }
.frame__dot:nth-child(2) { background-color: rgba(255, 189, 68, 0.75); }
.frame__dot:nth-child(3) { background-color: rgba(39, 201, 63, 0.7); }

.frame__pill {
	flex: 1;
	margin-left: 0.5rem;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.frame__screen {
	position: relative;
	/* Matches the native screenshot ratio; reserves the box pre-load. */
	aspect-ratio: 813 / 508;
	background-color: var(--navy-800);
}

.frame__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* ---------- Floating secondary frames ---------- */

.frame--extra {
	position: absolute;
	z-index: 2;
	width: 46%;
	border-color: rgba(34, 211, 238, 0.3);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
	animation: hifocus-float 8s ease-in-out infinite;
}

.frame--extra .frame__screen {
	aspect-ratio: 813 / 508;
}

.frame--extra-1 {
	right: -1rem;
	bottom: 1rem;
	animation-delay: 0.6s;
}

/* The third shot tucks behind the second, top-left. */
.frame--extra-2 {
	left: -1.5rem;
	bottom: 5.5rem;
	z-index: 1;
	width: 38%;
	opacity: 0.92;
	animation-delay: 1.8s;
}

.showcase--flip .frame--extra-1 {
	right: auto;
	left: -1rem;
}

.showcase--flip .frame--extra-2 {
	left: auto;
	right: -1.5rem;
}

/* ---------- Showcase copy ---------- */

.showcase__title {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	letter-spacing: -0.03em;
	margin-bottom: var(--space-sm);
}

.showcase__desc {
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--fs-lg);
	max-width: 52ch;
}

.showcase__list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem var(--space-sm);
	margin-top: var(--space-lg);
}

.showcase__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--radius-sm);
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: background-color var(--transition), border-color var(--transition);
}

.showcase__list li:hover {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: rgba(34, 211, 238, 0.35);
}

.showcase__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cyan-400);
}

/* -------------------------------------------------- *
 * 10.3 Responsive
 * -------------------------------------------------- */

@media (max-width: 1100px) {
	.pos-hero__inner,
	.showcase__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	/* Restore source order once stacked, so the heading precedes its image. */
	.showcase--flip .showcase__media {
		order: 0;
	}

	.pos-hero__title,
	.pos-hero__lead {
		max-width: 100%;
	}

	.showcase__media {
		padding-inline: 0;
		max-width: 46rem;
	}
}

@media (max-width: 900px) {
	/* Absolutely-positioned devices overlap badly at narrow widths; lay the
	   hero cluster out as a simple stack instead. */
	.device--terminal,
	.device--float {
		position: static;
		width: 100%;
		margin-top: var(--space-md);
		animation: none;
	}

	.device--terminal .device__stand {
		display: none;
	}

	.pos-hero__visual {
		display: grid;
		gap: var(--space-sm);
	}
}

@media (max-width: 780px) {
	/* Same problem for the floating secondaries: inline them below the
	   primary frame as a two-up strip. */
	.showcase__extras {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
		margin-top: var(--space-sm);
	}

	.frame--extra {
		position: static;
		width: 100%;
		opacity: 1;
		animation: none;
	}

	.showcase__media:hover .frame--primary {
		transform: none;
	}
}

@media (max-width: 560px) {
	.showcase__list {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================== *
 * 11. SOFTWARE SOLUTION PAGES  (single-software_solution.php)
 *
 *  11.1 Bands and hero
 *  11.2 Audience cards
 *  11.3 Module grid
 *  11.4 Feature blocks
 *  11.5 Hardware
 *  11.6 FAQ accordion
 *  11.7 Responsive
 *
 * Content-agnostic: one stylesheet drives every software product page.
 * ==================================================================== */

/* -------------------------------------------------- *
 * 11.1 Bands and hero
 * -------------------------------------------------- */

.sw-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sw-band--light {
	background-color: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

.sw-band--dark {
	background-color: var(--navy-900);
	color: var(--color-inverse);
}

.sw-band__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 60% at 12% 0%, rgba(22, 102, 232, 0.22) 0%, transparent 70%),
		radial-gradient(45% 55% at 88% 100%, rgba(34, 211, 238, 0.16) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.sw-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.sw-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 20% 0%, rgba(22, 102, 232, 0.3) 0%, transparent 70%),
		radial-gradient(50% 60% at 90% 90%, rgba(34, 211, 238, 0.18) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.sw-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-xl) var(--space-lg);
}

/*
 * No featured image: the visual is absent from the DOM entirely, so let the
 * copy take the full width and centre. :has() degrades safely — older browsers
 * simply keep the two-column rule, and the empty column collapses.
 */
.sw-hero__inner:not(:has(.sw-hero__visual)) {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	max-width: 62rem;
}

.sw-hero__inner:not(:has(.sw-hero__visual)) .hero__actions,
.sw-hero__inner:not(:has(.sw-hero__visual)) .hero__capabilities {
	justify-content: center;
}

.sw-hero__title {
	font-size: clamp(2rem, 3.6vw, 3.2rem);
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.sw-hero__lead {
	max-width: 54ch;
	margin-top: var(--space-md);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-lg);
}

.sw-hero__visual {
	position: relative;
}

.sw-hero__glow {
	position: absolute;
	z-index: -1;
	inset: 8% -8% 0 -5%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, rgba(22, 102, 232, 0.12) 45%, transparent 70%);
	filter: blur(40px);
	animation: hifocus-breathe 9s ease-in-out infinite;
}

/* -------------------------------------------------- *
 * 11.2 Audience cards
 * -------------------------------------------------- */

.sw-audience-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-md);
}

.sw-audience {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-md) var(--space-sm);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
		border-color var(--transition);
}

.sw-audience:hover {
	transform: translateY(-6px);
	border-color: rgba(34, 211, 238, 0.45);
	box-shadow: 0 20px 44px rgba(16, 24, 40, 0.12);
}

.sw-audience__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 8px 22px rgba(22, 102, 232, 0.35);
	transition: transform var(--transition);
}

.sw-audience__icon svg {
	width: 26px;
	height: 26px;
}

.sw-audience:hover .sw-audience__icon {
	transform: scale(1.08) rotate(-5deg);
}

.sw-audience__title {
	font-size: var(--fs-base);
	letter-spacing: -0.01em;
}

.sw-audience__desc {
	margin-top: 0.4rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* -------------------------------------------------- *
 * 11.3 Module grid
 *
 * auto-fit rather than a fixed column count: the module list length varies per
 * product (7 here, 4 or 9 elsewhere) and a fixed grid would strand orphans.
 * -------------------------------------------------- */

.sw-module-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--space-md);
}

.sw-module {
	position: relative;
	isolation: isolate;
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background-color: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition);
}

/* Masked gradient ring, as used on the homepage glass cards. */
.sw-module::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(140deg, rgba(34, 211, 238, 0.5) 0%, rgba(22, 102, 232, 0.25) 50%, rgba(255, 255, 255, 0.06) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.55;
	transition: opacity 0.35s var(--ease-out);
}

.sw-module:hover {
	transform: translateY(-6px);
	background-color: rgba(255, 255, 255, 0.07);
}

.sw-module:hover::before {
	opacity: 1;
}

.sw-module__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 8px 22px rgba(22, 102, 232, 0.4);
}

.sw-module__icon svg {
	width: 24px;
	height: 24px;
}

.sw-module__title {
	color: var(--color-inverse);
	font-size: var(--fs-base);
	letter-spacing: -0.01em;
}

.sw-module__desc {
	margin-top: 0.35rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
}

/* -------------------------------------------------- *
 * 11.4 Feature blocks
 * -------------------------------------------------- */

.sw-feature-list {
	display: grid;
	gap: var(--space-md);
}

.sw-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
	padding: var(--space-lg);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* Alternate which side the bullet list sits on. Visual only — the DOM keeps
   heading before list, so screen readers read them in order. */
.sw-feature:nth-child(even) .sw-feature__intro {
	order: 2;
}

.sw-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 10px 26px rgba(22, 102, 232, 0.35);
}

.sw-feature__icon svg {
	width: 28px;
	height: 28px;
}

.sw-feature__title {
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
}

.sw-feature__desc {
	margin-top: 0.5rem;
	color: var(--color-muted);
	max-width: 46ch;
}

.sw-feature__list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.sw-feature__list li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: border-color var(--transition), transform var(--transition);
}

.sw-feature__list li:hover {
	border-color: rgba(34, 211, 238, 0.5);
	transform: translateX(4px);
}

.sw-feature__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--blue-500);
}

/* -------------------------------------------------- *
 * 11.5 Hardware
 * -------------------------------------------------- */

.sw-hardware-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-md);
}

.sw-hardware {
	text-align: center;
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.35s var(--ease-out), border-color var(--transition);
}

.sw-hardware:hover {
	transform: translateY(-6px);
	border-color: rgba(34, 211, 238, 0.45);
}

.sw-hardware__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: var(--space-sm);
	border-radius: 50%;
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--cyan-400);
	transition: background-color var(--transition), color var(--transition);
}

.sw-hardware:hover .sw-hardware__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.sw-hardware__icon svg {
	width: 28px;
	height: 28px;
}

.sw-hardware__title {
	color: var(--color-inverse);
	font-size: var(--fs-base);
}

.sw-hardware__desc {
	margin-top: 0.35rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--fs-sm);
}

/* -------------------------------------------------- *
 * 11.6 FAQ accordion
 * -------------------------------------------------- */

.sw-faq__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--space-xl);
	align-items: start;
}

.sw-faq__inner .section-head {
	margin-bottom: 0;
	position: sticky;
	top: calc(var(--header-height) + var(--space-md));
}

.sw-faq {
	display: grid;
	gap: 0.75rem;
}

.sw-faq__item {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.sw-faq__item.is-open {
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: var(--shadow-md);
}

.sw-faq__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.sw-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
	padding: 1.1rem var(--space-md);
	background: none;
	border: 0;
	text-align: left;
	color: var(--color-text);
	font-size: var(--fs-base);
	font-weight: 600;
	transition: color var(--transition);
}

.sw-faq__trigger:hover {
	color: var(--color-primary);
}

.sw-faq__chevron {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-muted);
	transition: transform var(--transition), color var(--transition);
}

.sw-faq__trigger[aria-expanded="true"] .sw-faq__chevron {
	transform: rotate(180deg);
	color: var(--cyan-400);
}

/*
 * Panels are open in the markup and collapsed only under .js-faq, which the
 * inline head script sets before first paint. A no-JS visitor therefore reads
 * every answer; a JS visitor never sees them flash open.
 *
 * --panel-height is measured from scrollHeight by main.js, so a long answer
 * cannot clip against a guessed max-height.
 */
.js-faq .sw-faq__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s var(--ease-out);
}

.js-faq .sw-faq__item.is-open .sw-faq__panel {
	max-height: var(--panel-height, 32rem);
}

.sw-faq__panel p {
	padding: 0 var(--space-md) var(--space-md);
	color: var(--color-muted);
}

/* -------------------------------------------------- *
 * 11.7 Responsive
 * -------------------------------------------------- */

@media (max-width: 1100px) {
	.sw-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.sw-hero__inner .hero__actions,
	.sw-hero__inner .hero__capabilities,
	.sw-hero__inner .sw-crumbs {
		justify-content: center;
	}

	.sw-hero__lead {
		max-width: 100%;
	}

	.sw-faq__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.sw-faq__inner .section-head {
		position: static;
	}
}

@media (max-width: 900px) {
	.sw-feature {
		grid-template-columns: 1fr;
		gap: var(--space-md);
		padding: var(--space-md);
	}

	/* Stacked: the heading must always precede its own bullet list. */
	.sw-feature:nth-child(even) .sw-feature__intro {
		order: 0;
	}
}

@media (max-width: 640px) {
	.sw-audience:hover,
	.sw-module:hover,
	.sw-hardware:hover {
		transform: none;
	}

	.sw-feature__list li:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sw-hero__glow {
		animation: none;
	}

	.js-faq .sw-faq__panel {
		transition: none;
	}
}

/* -------------------------------------------------- *
 * Software page: breadcrumb, hero tick list, mockup,
 * overview, benefits, related
 * -------------------------------------------------- */

.sw-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-sm);
}

.sw-crumbs a {
	color: rgba(255, 255, 255, 0.7);
}

.sw-crumbs a:hover {
	color: var(--cyan-400);
}

.sw-crumbs__sep {
	color: rgba(255, 255, 255, 0.3);
}

.sw-crumbs__current {
	color: var(--cyan-400);
	font-weight: 600;
}

/* ---------- Hero tick list ---------- */

.sw-hero__highlights {
	display: grid;
	gap: 0.55rem;
	margin: var(--space-md) 0 0;
	padding: 0;
	list-style: none;
}

.sw-hero__highlights li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-sm);
}

.sw-hero__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cyan-400);
}

/* ---------- Dashboard mockup placeholder ----------
 *
 * Stands in for a missing screenshot. Built from divs so it costs no request
 * and inherits the brand palette rather than shipping a grey stock image.
 */

.sw-mock {
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: 12px;
	/* Fills the frame's reserved 813:508 box rather than declaring its own. */
	width: 100%;
	height: 100%;
	padding: 12px;
	background: linear-gradient(160deg, #0b1220 0%, #111c33 100%);
}

.sw-mock__side {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.04);
}

.sw-mock__logo {
	height: 10px;
	border-radius: 3px;
	background-image: var(--gradient-brand);
}

.sw-mock__nav {
	height: 7px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.12);
}

.sw-mock__main {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 10px;
	min-width: 0;
}

.sw-mock__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.sw-mock__stat {
	height: 26px;
	border-radius: 8px;
	background-color: rgba(34, 211, 238, 0.12);
	border: 1px solid rgba(34, 211, 238, 0.18);
}

.sw-mock__chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.04);
}

.sw-mock__bar {
	flex: 1;
	height: var(--h, 50%);
	border-radius: 4px 4px 0 0;
	background-image: linear-gradient(180deg, var(--cyan-400) 0%, var(--blue-500) 100%);
	opacity: 0.85;
}

/* Heights live here rather than inline on each span. */
.sw-mock__bar:nth-child(1) { --h: 46%; }
.sw-mock__bar:nth-child(2) { --h: 72%; }
.sw-mock__bar:nth-child(3) { --h: 38%; }
.sw-mock__bar:nth-child(4) { --h: 88%; }
.sw-mock__bar:nth-child(5) { --h: 60%; }
.sw-mock__bar:nth-child(6) { --h: 94%; }

.sw-mock__rows {
	display: grid;
	gap: 6px;
}

.sw-mock__row {
	height: 8px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.09);
}

.sw-mock__row:nth-child(2) { width: 78%; }
.sw-mock__row:nth-child(3) { width: 55%; }

/* ---------- Overview ---------- */

.sw-overview .entry-content {
	max-width: 72ch;
	margin-inline: auto;
}

/* ---------- Benefits ---------- */

/*
 * auto-fit, not repeat(4): the software page has four benefits and still fills
 * a row, while the solution page's three technology features fit without
 * leaving an empty fourth column.
 */
.sw-benefit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--space-md);
}

.sw-benefit {
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	border-radius: var(--radius-xl);
	border: 1px solid rgba(34, 211, 238, 0.22);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		border-color var(--transition), box-shadow 0.35s var(--ease-out);
}

.sw-benefit:hover {
	transform: translateY(-8px);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.sw-benefit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--cyan-400);
	transition: background-image var(--transition), color var(--transition);
}

.sw-benefit__icon svg {
	width: 24px;
	height: 24px;
}

.sw-benefit:hover .sw-benefit__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.sw-benefit__title {
	color: var(--color-inverse);
	font-size: 1rem;
	font-weight: 700;
}

.sw-benefit__desc {
	margin-top: 0.4rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* ---------- Related solutions ---------- */

.sw-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.sw-related {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	background-color: var(--color-inverse);
	box-shadow: var(--shadow-md);
	transition: transform 0.35s var(--ease-out), border-color var(--transition),
		box-shadow 0.35s var(--ease-out);
}

.sw-related:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 212, 255, 0.45);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.12);
}

.sw-related__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.sw-related__icon svg {
	width: 24px;
	height: 24px;
}

.sw-related__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.sw-related__title a {
	color: var(--navy-800);
}

.sw-related__title a:hover {
	color: var(--blue-500);
}

/* The title link stretches over the card: one link, whole-card click target. */
.sw-related__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sw-related__desc {
	margin-top: 0.4rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.sw-related__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: var(--space-sm);
	color: var(--blue-500);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.sw-related__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.sw-related:hover .sw-related__arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.sw-benefit:hover,
	.sw-related:hover {
		transform: none;
	}
}

/* ---------- About page ----------
 *
 * Reuses sw-hero, sw-band, sw-benefit, sw-audience, brand-card and cta-panel.
 * Only the tagline, the specialism chips, the timeline and the partner grid
 * are new.
 */

.about-hero__tagline {
	margin-top: var(--space-sm);
	background-image: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ---------- Specialism chips ---------- */

.about-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.about-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background-color: var(--color-inverse);
	box-shadow: var(--shadow-sm);
	color: var(--navy-800);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.about-chip__icon {
	display: flex;
	color: var(--blue-500);
}

.about-chip__icon svg {
	width: 18px;
	height: 18px;
}

/* ---------- Company journey timeline ----------
 *
 * A single rail behind the cards on desktop; the rail moves to the left edge
 * once the steps stack, so the markers still read as one sequence.
 */

.timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rail. Sits behind the markers, spanning the row of dots. */
.timeline::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 8%;
	right: 8%;
	height: 2px;
	background-image: linear-gradient(90deg, transparent 0%, var(--cyan-400) 15%, var(--blue-500) 85%, transparent 100%);
	opacity: 0.5;
}

.timeline__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.timeline__marker {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	margin-bottom: var(--space-md);
	border-radius: 999px;
	background-image: var(--gradient-brand);
	box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.14);
}

.timeline__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-md);
	border-radius: var(--radius-xl);
	border: 1px solid rgba(34, 211, 238, 0.22);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		border-color var(--transition), box-shadow 0.35s var(--ease-out);
}

.timeline__item:hover .timeline__card {
	transform: translateY(-6px);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.timeline__year {
	color: var(--cyan-400);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.timeline__title {
	margin-top: 0.35rem;
	color: var(--color-inverse);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
}

.timeline__desc {
	margin-top: 0.4rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* ---------- Technology partners ---------- */

.partner-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

@media (max-width: 860px) {
	.timeline {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	/* Rail runs down the left gutter once the steps stack. */
	.timeline::before {
		top: 12px;
		bottom: 12px;
		left: 11px;
		right: auto;
		width: 2px;
		height: auto;
		background-image: linear-gradient(180deg, var(--cyan-400) 0%, var(--blue-500) 100%);
	}

	.timeline__item {
		display: grid;
		grid-template-columns: 24px 1fr;
		align-items: start;
		gap: var(--space-sm);
		text-align: left;
	}

	.timeline__marker {
		margin-bottom: 0;
	}
}

/* ---------- CPT archives: software + projects ----------
 *
 * Both replace the index.php fallback. Everything is scoped under
 * .software-archive / .project-archive so no other surface is affected.
 */

.archive-empty {
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/*
 * Pagination sits on a navy band here; the shared rule paints it in dark ink
 * on dark ground. Lift the colours and centre the row.
 */
.software-archive .pagination .nav-links,
.project-archive .pagination .nav-links {
	justify-content: center;
}

.software-archive .pagination .page-numbers,
.project-archive .pagination .page-numbers {
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.75);
}

.software-archive .pagination .page-numbers.current,
.software-archive .pagination .page-numbers:hover,
.project-archive .pagination .page-numbers.current,
.project-archive .pagination .page-numbers:hover {
	background-image: var(--gradient-brand);
	background-color: transparent;
	border-color: transparent;
	color: var(--color-inverse);
}

/* The archive's icon tile is filled, not tinted — it reads as the page's motif. */
.software-archive .software-card__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

/* ---------- Project archive: large case-study cards ---------- */

.project-archive-grid {
	display: grid;
	gap: var(--space-lg);
}

.project-feature {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: stretch;
	border-radius: var(--radius-xl);
	border: 1px solid rgba(34, 211, 238, 0.22);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		border-color var(--transition), box-shadow 0.35s var(--ease-out);
}

.project-feature:hover,
.project-feature:focus-within {
	transform: translateY(-8px);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

/* Alternate the image side so a long list does not read as a ladder. */
.project-feature:nth-child(even) .project-feature__media {
	order: 2;
}

.project-feature__media {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 320px;
	background-color: var(--navy-700);
}

.project-feature__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.project-feature:hover .project-feature__img {
	transform: scale(1.05);
}

.project-feature__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.25);
}

.project-feature__placeholder svg {
	width: 56px;
	height: 56px;
}

.project-feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-lg);
}

.project-feature__badge {
	max-width: 100%;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project-feature__title {
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.project-feature__title a {
	color: var(--color-inverse);
}

.project-feature__title a:hover {
	color: var(--cyan-400);
}

/* The title link covers the card: one link, one click target. */
.project-feature__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.project-feature__desc {
	margin-top: 0.6rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
	line-height: 1.65;
}

.project-feature__label {
	margin-top: var(--space-md);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.project-feature__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.project-feature__tags li {
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, 0.28);
	background-color: rgba(34, 211, 238, 0.08);
	color: var(--cyan-300);
	font-size: 0.72rem;
	font-weight: 600;
}

.project-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: var(--space-md);
	color: var(--cyan-400);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.project-feature__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.project-feature:hover .project-feature__arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.project-feature:hover,
	.project-feature:focus-within {
		transform: none;
	}
}

@media (max-width: 900px) {
	.project-feature {
		grid-template-columns: 1fr;
	}

	/* Image always on top once stacked; the alternating order would bury it. */
	.project-feature:nth-child(even) .project-feature__media {
		order: 0;
	}

	.project-feature__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.project-feature__body {
		padding: var(--space-md);
	}
}

/* ---------- Solutions page ----------
 *
 * The template reuses existing components wholesale. The one adjustment:
 * .section--kpi carries a negative top margin so it overlaps the homepage
 * hero. Here it follows a full band, so the overlap is cancelled.
 */

.solutions-page .section--kpi {
	margin-top: 0;
	padding-top: var(--space-xl);
}

/* ---------- Solution category cards ----------
 *
 * Two-up rather than the four-up .software-card: each carries a five-item
 * service list and a solid button, so it needs the width. Same glass, radius,
 * cyan ring and lift as the rest of the dark bands.
 */

.solution-hub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

.solution-hub {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--space-lg);
	border-radius: var(--radius-xl);
	border: 1px solid rgba(34, 211, 238, 0.22);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		border-color var(--transition), box-shadow 0.35s var(--ease-out);
}

/* A soft cyan wash that warms the card's top-left on hover. */
.solution-hub__sheen {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(60% 60% at 0% 0%, rgba(34, 211, 238, 0.16) 0%, transparent 70%);
	transition: opacity 0.35s var(--ease-out);
}

.solution-hub:hover,
.solution-hub:focus-within {
	transform: translateY(-8px);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.solution-hub:hover .solution-hub__sheen,
.solution-hub:focus-within .solution-hub__sheen {
	opacity: 1;
}

.solution-hub__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--cyan-400);
	transition: background-image var(--transition), color var(--transition);
}

.solution-hub__icon svg {
	width: 30px;
	height: 30px;
}

.solution-hub:hover .solution-hub__icon {
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.solution-hub__title {
	color: var(--color-inverse);
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.solution-hub__desc {
	margin-top: 0.5rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
	line-height: 1.65;
}

.solution-hub__list {
	display: grid;
	gap: 0.55rem;
	margin: var(--space-md) 0 var(--space-md);
	padding: 0;
	list-style: none;
}

.solution-hub__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-sm);
}

.solution-hub__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cyan-400);
}

/* auto pins the button to the card bottom so uneven lists still align. */
.solution-hub__btn {
	align-self: flex-start;
	margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
	.solution-hub:hover,
	.solution-hub:focus-within {
		transform: none;
	}
}

@media (max-width: 860px) {
	.solution-hub-grid {
		grid-template-columns: 1fr;
	}

	.solution-hub {
		padding: var(--space-md);
	}
}

/* ---------- Contact page ----------
 *
 * Reuses sw-hero, sw-band, sw-benefit, cta-panel and btn-enquire. New here:
 * the detail cards, the form controls, the status notice and the map.
 */

.contact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-md);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	background-color: var(--color-inverse);
	box-shadow: var(--shadow-md);
	transition: transform 0.35s var(--ease-out), border-color var(--transition),
		box-shadow 0.35s var(--ease-out);
}

.contact-card:hover {
	transform: translateY(-6px);
	border-color: rgba(0, 212, 255, 0.45);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.12);
}

.contact-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.contact-card__icon svg {
	width: 24px;
	height: 24px;
}

.contact-card__label {
	color: var(--color-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.contact-card__value {
	margin-top: 0.3rem;
	color: var(--navy-800);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

a.contact-card__value:hover {
	color: var(--blue-500);
}

/* The address is a stack of lines, not a link. */
.contact-card__value--address {
	display: flex;
	flex-direction: column;
	font-style: normal;
	font-weight: 500;
}

/* ---------- Inquiry cards ---------- */

/* The title link covers the whole glass card: one link, one click target. */
.inquiry-card {
	position: relative;
}

.inquiry-card .sw-benefit__title a {
	color: inherit;
}

.inquiry-card .sw-benefit__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.inquiry-card:hover .sw-benefit__title a {
	color: var(--cyan-400);
}

/* ---------- Contact form ---------- */

.contact-form-wrap {
	max-width: 56rem;
}

.contact-form {
	padding: var(--space-lg);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	background-color: var(--color-inverse);
	box-shadow: var(--shadow-md);
}

.contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.field--full {
	grid-column: 1 / -1;
}

.field__label {
	color: var(--navy-800);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.field__required {
	color: var(--blue-500);
}

.field__input {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-sm);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.field__input::placeholder {
	color: var(--color-muted);
}

.field__input:focus {
	outline: none;
	border-color: var(--cyan-400);
	box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
}

.field__input--area {
	resize: vertical;
	min-height: 8rem;
}

/* Honeypot: off-screen, not display:none — some bots skip hidden inputs. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-md) 0 0;
}

.contact-form__note {
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* ---------- Submission status ---------- */

.form-notice {
	margin-bottom: var(--space-md);
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.form-notice--success {
	border-color: rgba(34, 211, 238, 0.4);
	background-color: rgba(34, 211, 238, 0.1);
	color: #0b5566;
}

.form-notice--error {
	border-color: rgba(220, 38, 38, 0.35);
	background-color: rgba(220, 38, 38, 0.08);
	color: #991b1b;
}

/* ---------- Map ---------- */

.map-frame {
	overflow: hidden;
	border-radius: var(--radius-xl);
	border: 1px solid rgba(34, 211, 238, 0.22);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
	line-height: 0;
}

.map-frame__iframe {
	display: block;
	width: 100%;
	height: 440px;
	border: 0;
}

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

@media (max-width: 1080px) {
	.contact-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.contact-grid,
	.contact-form__grid {
		grid-template-columns: 1fr;
	}

	.contact-form {
		padding: var(--space-md);
	}

	.map-frame__iframe {
		height: 320px;
	}
}

/* ---------- Phone stack & business hours ----------
 *
 * Two extra shapes for the contact cards: a stack of phone links and the
 * opening-hours list. Both sit on the same .contact-card as the single-value
 * cards, so the card chrome is inherited untouched.
 */

.contact-card__list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.3rem;
}

.contact-card__list a {
	color: var(--navy-800);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.contact-card__list a:hover {
	color: var(--blue-500);
}

.contact-hours {
	display: grid;
	gap: 0.4rem;
	width: 100%;
	margin: 0.3rem 0 0;
}

.contact-hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.contact-hours__day {
	color: var(--color-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.contact-hours__time {
	margin: 0;
	color: var(--navy-800);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-align: right;
}

.contact-hours__time--closed {
	color: var(--color-muted);
}

/* ---------- FAQ accordion ----------
 *
 * Native <details>/<summary>, styled to match the glass cards. Lives on the
 * light band, so the chrome is white cards rather than navy glass.
 */

.faq {
	display: grid;
	gap: var(--space-sm);
	max-width: 52rem;
	margin-inline: auto;
}

.faq__item {
	overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background-color: var(--color-inverse);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.faq__item[open] {
	border-color: rgba(34, 211, 238, 0.45);
	box-shadow: var(--shadow-md);
}

.faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	cursor: pointer;
	list-style: none;
	color: var(--navy-800);
	font-size: 1.05rem;
	font-weight: 700;
	transition: color var(--transition);
}

.faq__summary::-webkit-details-marker {
	display: none;
}

.faq__summary:hover {
	color: var(--blue-500);
}

.faq__chevron {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--blue-500);
	transition: transform 0.3s var(--ease-out);
}

.faq__item[open] .faq__chevron {
	transform: rotate(180deg);
}

.faq__answer {
	padding: 0 1.4rem 1.3rem;
	color: var(--color-muted);
	font-size: var(--fs-base);
	line-height: 1.7;
}

.faq__answer p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.faq__item,
	.faq__chevron {
		transition: none;
	}
}

/* ---------- Projects ----------
 *
 * Homepage band and the project detail page. Glass cards on navy, matching the
 * software and solution pages.
 */

.section--projects {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
}

.projects__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 85% 0%, rgba(22, 102, 232, 0.25) 0%, transparent 70%),
		radial-gradient(50% 60% at 12% 92%, rgba(34, 211, 238, 0.14) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.project-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-xl);
	border: 1px solid rgba(34, 211, 238, 0.22);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 0.35s var(--ease-out), background-color var(--transition),
		border-color var(--transition), box-shadow 0.35s var(--ease-out);
}

.project-card:hover,
.project-card:focus-within {
	transform: translateY(-8px);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.45);
}

.project-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--navy-700);
}

.project-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.project-card:hover .project-card__img {
	transform: scale(1.06);
}

.project-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.25);
}

.project-card__placeholder svg {
	width: 44px;
	height: 44px;
}

.project-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-md);
}

.project-card__badge {
	align-self: flex-start;
	max-width: 100%;
	margin-bottom: 0.6rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project-card__title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
}

.project-card__title a {
	color: var(--color-inverse);
}

.project-card__title a:hover {
	color: var(--cyan-400);
}

/* The title link stretches over the card: one link, whole-card click target. */
.project-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.project-card__desc {
	margin-top: 0.4rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.project-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: var(--space-sm);
	color: var(--cyan-400);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.project-card__arrow {
	width: 17px;
	height: 17px;
	transition: transform var(--transition);
}

.project-card:hover .project-card__arrow {
	transform: translateX(4px);
}

/* ---------- Project detail: information cards ---------- */

.project-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-md);
}

.project-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-md);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	background-color: var(--color-inverse);
	box-shadow: var(--shadow-md);
}

.project-info__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
}

.project-info__icon svg {
	width: 24px;
	height: 24px;
}

.project-info__label {
	color: var(--color-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.project-info__value {
	margin-top: 0.3rem;
	color: var(--navy-800);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

/* ---------- Project detail: gallery ---------- */

.project-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.project-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
}

.project-gallery__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

.project-gallery__item:hover .project-gallery__img {
	transform: scale(1.05);
}

/*
 * Prose on a navy band. .entry-content is authored for light backgrounds, so
 * the colours are lifted rather than the whole block restyled.
 */
.entry-content--invert,
.entry-content--invert p {
	color: rgba(255, 255, 255, 0.72);
}

.entry-content--invert h1,
.entry-content--invert h2,
.entry-content--invert h3,
.entry-content--invert h4,
.entry-content--invert strong {
	color: var(--color-inverse);
}

.entry-content--invert a {
	color: var(--cyan-400);
}

/* Separates a category-card row from the product row above it. */
.sol-product-grid--stacked {
	margin-top: var(--space-lg);
}

@media (prefers-reduced-motion: reduce) {
	.project-card:hover,
	.project-card:focus-within {
		transform: none;
	}
}

@media (max-width: 1080px) {
	.project-grid,
	.project-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.project-grid,
	.project-gallery {
		grid-template-columns: 1fr;
	}
}

/* ---------- Solution page: related product categories ----------
 *
 * Reuses .taxo-card from the homepage carousel. A solution usually maps to one
 * or two categories, so the tracks are capped and centred rather than stretched
 * across the full row.
 */

.sol-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
	justify-content: center;
	gap: var(--space-md);
}

/* ---------- Software page responsive ---------- */

@media (max-width: 1080px) {
	.sw-benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

@media (max-width: 720px) {
	.sw-benefit-grid,
	.sw-related-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================== *
 * 12. WOOCOMMERCE
 *
 *  12.1 Shop page
 *  12.2 Product card additions (specs)
 *  12.3 Single product: gallery + summary
 *  12.4 Single product: tabs
 *  12.5 Related + pagination
 *  12.6 Responsive
 *
 * WooCommerce's own stylesheets are dequeued in functions.php, so every rule
 * a WooCommerce surface needs must live here.
 * ==================================================================== */

/* -------------------------------------------------- *
 * 12.1 Shop page
 * -------------------------------------------------- */

.shop-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
}

.shop-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 50% 0%, rgba(22, 102, 232, 0.3) 0%, transparent 70%),
		radial-gradient(50% 60% at 85% 100%, rgba(34, 211, 238, 0.18) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.shop-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shop-hero__title {
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.shop-hero__lead {
	max-width: 54ch;
	margin-top: var(--space-sm);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-lg);
}

.section--shop-cats {
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

/* Light-ground arrow treatment, as on the subcategory band. */
.carousel--light .carousel__nav {
	background-color: var(--color-bg);
	border-color: var(--color-border);
	color: var(--color-text);
	box-shadow: var(--shadow-md);
}

.section--shop-products {
	background-color: var(--color-bg);
}

/* Result count and ordering sit on one line above the grid. */
.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}

.shop-toolbar__title {
	flex: 1;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
}

.woocommerce-result-count {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.woocommerce-ordering select,
.woocommerce-ordering .orderby {
	padding: 0.6rem 2rem 0.6rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	cursor: pointer;
	/* Native arrow varies wildly across platforms; supply our own. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 7.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 16px;
	transition: border-color var(--transition);
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
	border-color: var(--blue-500);
}

/* WooCommerce prints a store notice we keep, but it must not look default. */
.woocommerce-store-notice,
.woocommerce-message,
.woocommerce-info {
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
	border: 1px solid rgba(34, 211, 238, 0.4);
	border-radius: var(--radius-md);
	background-color: rgba(34, 211, 238, 0.08);
	color: var(--color-text);
	font-size: var(--fs-sm);
	list-style: none;
}

/* -------------------------------------------------- *
 * 12.2 Product card: key specifications
 * -------------------------------------------------- */

.product-showcase__specs {
	display: grid;
	gap: 0.3rem;
	margin: var(--space-sm) 0 0;
	padding-top: var(--space-sm);
	border-top: 1px dashed var(--color-border);
}

.product-showcase__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.76rem;
}

.product-showcase__spec dt {
	flex-shrink: 0;
	color: var(--color-muted);
	font-weight: 500;
}

.product-showcase__spec dd {
	margin: 0;
	color: var(--color-text);
	font-weight: 600;
	text-align: right;
	/* Long attribute values must not push the card wider. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------------------- *
 * 12.3 Single product: gallery and summary
 * -------------------------------------------------- */

.product-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-900);
	color: var(--color-inverse);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.product-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 20% 0%, rgba(22, 102, 232, 0.28) 0%, transparent 70%),
		radial-gradient(50% 60% at 90% 90%, rgba(34, 211, 238, 0.16) 0%, transparent 70%),
		linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

.product-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: var(--space-xl);
}

/* ---------- Gallery ---------- */

.product-gallery__stage {
	position: relative;
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
	/* Reserve the box before the image lands. */
	aspect-ratio: 1 / 1;
}

.product-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Cross-fade when a thumbnail swaps the source. */
	transition: opacity 0.25s var(--ease-out);
}

.product-gallery.is-swapping .product-gallery__image {
	opacity: 0;
}

.product-gallery__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-border);
}

.product-gallery__placeholder svg {
	width: 72px;
	height: 72px;
}

.product-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--space-sm);
}

.product-gallery__thumb {
	position: relative;
	width: 76px;
	height: 76px;
	padding: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.9);
	border: 2px solid transparent;
	opacity: 0.65;
	transition: opacity var(--transition), border-color var(--transition),
		transform var(--transition);
}

.product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-gallery__thumb:hover,
.product-gallery__thumb:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}

.product-gallery__thumb.is-active {
	opacity: 1;
	border-color: var(--cyan-400);
}

/* ---------- Summary ---------- */

.product-summary__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-sm);
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--fs-sm);
}

.product-summary__crumbs a {
	color: rgba(255, 255, 255, 0.7);
}

.product-summary__crumbs a:hover {
	color: var(--cyan-400);
}

.product-summary__crumb-sep {
	color: rgba(255, 255, 255, 0.3);
}

/* The current page: cyan, and the only unlinked crumb. */
.product-summary__crumb-current {
	color: var(--cyan-400);
	font-weight: 600;
}

/* ---------- Summary meta ---------- */

.product-summary__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-sm);
	font-size: var(--fs-sm);
}

.product-summary__meta-label {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.product-summary__meta-value {
	color: var(--cyan-400);
	font-weight: 600;
}

.product-summary__meta-value:hover {
	color: var(--cyan-300);
}

.product-summary__brand {
	color: var(--cyan-400);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.product-summary__title {
	margin-top: 0.4rem;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.product-summary__excerpt {
	margin-top: var(--space-md);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-lg);
}

.product-summary__features {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	margin-top: var(--space-md);
}

.product-summary__features li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-sm);
}

.product-summary__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cyan-400);
}

.product-summary__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.btn-enquire--lg {
	padding: 0.9rem 1.6rem;
	font-size: var(--fs-sm);
	background-color: rgba(37, 211, 102, 0.12);
	border-color: rgba(37, 211, 102, 0.45);
	color: #4ade80;
}

.btn-enquire--lg:hover,
.btn-enquire--lg:focus-visible {
	background-color: #25d366;
	border-color: #25d366;
	color: #04250f;
	transform: translateY(-2px);
}

.product-summary__note {
	margin-top: var(--space-md);
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--fs-sm);
}

/* -------------------------------------------------- *
 * 12.4 Single product: tabs
 * -------------------------------------------------- */

.section--product-tabs {
	background-color: var(--color-surface);
	border-block: 1px solid var(--color-border);
}

.tabs__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	overflow-x: auto;
	scrollbar-width: none;
	margin-bottom: var(--space-lg);
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--color-border);
}

.tabs__list::-webkit-scrollbar {
	display: none;
}

.tabs__tab {
	position: relative;
	flex: none;
	padding: 0.85rem 1.4rem;
	background: none;
	border: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--transition);
}

.tabs__tab::after {
	content: "";
	position: absolute;
	left: 1.4rem;
	right: 1.4rem;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background-image: var(--gradient-brand);
	transform: scaleX(0);
	transition: transform 0.3s var(--ease-out);
}

.tabs__tab:hover {
	color: var(--color-text);
}

.tabs__tab.is-active {
	color: var(--color-text);
}

.tabs__tab.is-active::after {
	transform: scaleX(1);
}

.tabs__panel[hidden] {
	display: none;
}

.tabs__panel {
	animation: hifocus-tab-in 0.35s var(--ease-out) both;
}

@keyframes hifocus-tab-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.tabs__panel:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

/* ---------- Specifications table ---------- *
 *
 * Stays a real <table>: two columns, a <thead> for the column names, and a
 * <th scope="row"> per spec so each value is announced with its label.
 *
 * border-radius on a table cannot clip its own cells, so the rounding and the
 * shadow live on a wrapper. Values are rendered from product attributes; no
 * spec text appears in this stylesheet.
 */

.spec-table-wrap {
	background-color: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.spec-table {
	width: 100%;
	border-collapse: collapse;
	/* Honour the column widths below rather than sizing to content. */
	table-layout: fixed;
}

/* ---------- Header ---------- */

/* Shorter than the data rows: the header is a label, not content. */
.spec-table thead th {
	padding: 10px 20px;
	background-image: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
	color: #ffffff;
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: left;
	letter-spacing: 0.01em;
}

/*
 * With table-layout: fixed the column widths come from the first row — the
 * thead — so they must be declared here. Widths on the tbody cells alone
 * would be ignored.
 */
.spec-table thead th:first-child {
	width: 35%;
}

.spec-table thead th:last-child {
	width: 65%;
}

/* ---------- Cells ---------- */

.spec-table th,
.spec-table td {
	padding: 14px 20px;
	text-align: left;
	font-size: var(--fs-sm);
	vertical-align: top;
	/* Long unbroken values (model codes, URLs) must not widen the column. */
	overflow-wrap: anywhere;
}

.spec-table tbody th,
.spec-table tbody td {
	border-bottom: 1px solid #edf2f7;
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Specification column. */
.spec-table tbody th {
	width: 35%;
	color: #07142f;
	font-weight: 700;
}

/* Details column. */
.spec-table tbody td {
	width: 65%;
	color: #334155;
	font-weight: 400;
}

/* ---------- Zebra striping and hover ---------- */

.spec-table tbody tr:nth-child(even) {
	background-color: #f5fbff;
}

.spec-table tbody tr {
	transition: background-color var(--transition);
}

.spec-table tbody tr:hover {
	background-color: #eef9ff;
}

/* ---------- Legacy tables authored in the product description ----------
 *
 * Same visual result, different source markup. These tables have no <thead>:
 * the header is the first <tr> of <th> inside <tbody>, and each label is a
 * <td><strong>, not a <th>. hifocus_restyle_product_tables() strips their
 * inline styles and adds these classes at render time.
 */

.spec-table--legacy tbody tr:first-child th {
	padding: 14px 20px;
	background-image: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
	color: #ffffff;
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: left;
	border-bottom: 0;
}

/* Column widths come from the first row under table-layout: fixed. */
.spec-table--legacy tbody tr:first-child th:first-child {
	width: 35%;
}

.spec-table--legacy tbody tr:first-child th:last-child {
	width: 65%;
}

/* The header row must not pick up the zebra or hover treatment. */
.spec-table--legacy tbody tr:first-child,
.spec-table--legacy tbody tr:first-child:hover {
	background-color: transparent;
}

/* Data rows: label left, value right. Striping counts from the header row, so
   offset it by one to keep the first data row unshaded. */
.spec-table--legacy tbody tr:nth-child(odd):not(:first-child) {
	background-color: #f5fbff;
}

.spec-table--legacy tbody tr:nth-child(even) {
	background-color: transparent;
}

.spec-table--legacy tbody tr:not(:first-child):hover {
	background-color: #eef9ff;
}

.spec-table--legacy tbody td {
	padding: 14px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #edf2f7;
	overflow-wrap: anywhere;
}

.spec-table--legacy tbody td:first-child,
.spec-table--legacy tbody td:first-child strong {
	width: 35%;
	color: #07142f;
	font-weight: 700;
}

.spec-table--legacy tbody td:last-child {
	width: 65%;
	color: #334155;
	font-weight: 400;
}

.spec-table--legacy tbody tr:last-child td {
	border-bottom: 0;
}

/* The description heading sits above the table, not inside the wrapper. */
.entry-content .spec-table-wrap {
	margin-top: var(--space-md);
}

/* ---------- Mobile: stack each row ----------
 *
 * The two columns are too narrow to read side by side on a phone. Each row
 * becomes a stacked label/value pair, with the column name reinstated from the
 * data-label attribute since the visual <thead> is hidden.
 */

@media (max-width: 640px) {
	.spec-table,
	.spec-table tbody,
	.spec-table tbody tr,
	.spec-table tbody th,
	.spec-table tbody td {
		display: block;
		width: 100%;
	}

	/* Hidden visually; the row headers still carry the semantics. */
	.spec-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.spec-table tbody tr {
		padding: 0.35rem 0;
		border-bottom: 1px solid #edf2f7;
	}

	.spec-table tbody tr:last-child {
		border-bottom: 0;
	}

	.spec-table tbody th,
	.spec-table tbody td {
		border-bottom: 0;
		padding: 6px 20px;
	}

	.spec-table tbody th {
		padding-top: 14px;
	}

	.spec-table tbody td {
		padding-bottom: 14px;
	}

	/* Reinstate the column name above the value. */
	.spec-table tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: #64748b;
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/*
	 * Legacy tables have no data-label and no thead. Their header row is the
	 * first <tr>, which carries no information once the rows are stacked —
	 * the label cell is right there — so hide it.
	 */
	.spec-table--legacy tbody tr:first-child {
		display: none;
	}

	.spec-table--legacy tbody tr {
		display: block;
		padding: 0.35rem 0;
		border-bottom: 1px solid #edf2f7;
	}

	.spec-table--legacy tbody tr:last-child {
		border-bottom: 0;
	}

	.spec-table--legacy tbody td {
		display: block;
		width: 100%;
		border-bottom: 0;
		padding: 6px 20px;
	}

	.spec-table--legacy tbody td:first-child {
		width: 100%;
		padding-top: 14px;
	}

	.spec-table--legacy tbody td:last-child {
		padding-bottom: 14px;
	}
}

/* ---------- Features grid ---------- */

.feature-grid {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.75rem;
}

.feature-grid li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.9rem 1rem;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: border-color var(--transition);
}

.feature-grid li:hover {
	border-color: rgba(34, 211, 238, 0.5);
}

.feature-grid__check {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--blue-500);
}

/* ---------- Downloads ---------- */

.download-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.download-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-weight: 600;
	transition: border-color var(--transition), transform var(--transition);
}

.download-list__item:hover {
	border-color: rgba(34, 211, 238, 0.5);
	transform: translateX(4px);
}

.download-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background-color: rgba(22, 102, 232, 0.08);
	color: var(--blue-500);
}

.download-list__icon svg {
	width: 20px;
	height: 20px;
}

.download-list__name {
	flex: 1;
	font-size: var(--fs-sm);
}

.download-list__arrow {
	width: 20px;
	height: 20px;
	color: var(--color-muted);
}

/* -------------------------------------------------- *
 * 12.5 Related products and pagination
 * -------------------------------------------------- */

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

.section--related:empty,
.related.products:empty {
	display: none;
}

.related.products > h2,
.up-sells > h2 {
	margin-bottom: var(--space-lg);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	letter-spacing: -0.02em;
}

.woocommerce-pagination {
	margin-top: var(--space-lg);
}

/*
 * paginate_links() prints class="page-numbers" on the <ul> as well as on every
 * control, so the button rules below are scoped to `li .page-numbers`. Left
 * unscoped they also match the list, which then beats `.woocommerce-pagination
 * ul` on specificity and renders the whole strip inside one 42px bordered box.
 */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	list-style: none;
}

.woocommerce-pagination li {
	margin: 0;
	border: 0;
}

.woocommerce-pagination li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.65rem;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background-color: var(--color-inverse);
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition),
		border-color var(--transition), box-shadow var(--transition);
}

/*
 * Hover is restricted to real anchors: the current page and the ellipsis are
 * <span>s, and neither should react to the pointer. rgba() rather than a token
 * because --color-primary (#1666e8) has no pre-mixed tint in the palette.
 */
.woocommerce-pagination li a.page-numbers:hover {
	background-color: rgba(22, 102, 232, 0.07);
	border-color: rgba(22, 102, 232, 0.38);
	color: var(--color-primary);
}

.woocommerce-pagination li a.page-numbers:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Current page reads as outlined, not as a solid brand block. */
.woocommerce-pagination li .page-numbers.current {
	background-color: rgba(22, 102, 232, 0.06);
	border-color: var(--color-primary);
	color: var(--color-primary);
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
	cursor: default;
}

/* Prev/next sit quieter than the numbers until hovered. */
.woocommerce-pagination li .page-numbers.prev,
.woocommerce-pagination li .page-numbers.next {
	padding-inline: 0.9rem;
	color: var(--color-muted);
}

/* The ellipsis is a label, not a control. */
.woocommerce-pagination li .page-numbers.dots {
	min-width: 1.5rem;
	padding-inline: 0.25rem;
	border-color: transparent;
	background-color: transparent;
	color: var(--color-muted);
	letter-spacing: 0.06em;
	box-shadow: none;
	cursor: default;
}

/*
 * Defensive only: WooCommerce omits prev/next at the ends rather than emitting
 * a disabled control, so this matches nothing today. It is here so a disabled
 * state degrades correctly if a plugin or a later template renders one.
 */
.woocommerce-pagination li .page-numbers[aria-disabled="true"],
.woocommerce-pagination li .page-numbers.disabled {
	background-color: var(--color-inverse);
	border-color: var(--color-border);
	color: var(--color-muted);
	opacity: 0.45;
	box-shadow: none;
	pointer-events: none;
	cursor: default;
}

@media (max-width: 560px) {
	.woocommerce-pagination ul.page-numbers {
		gap: 0.375rem;
	}

	.woocommerce-pagination li .page-numbers {
		min-width: 38px;
		height: 38px;
		padding-inline: 0.45rem;
		font-size: 0.875rem;
	}

	.woocommerce-pagination li .page-numbers.prev,
	.woocommerce-pagination li .page-numbers.next {
		padding-inline: 0.65rem;
	}
}

/* -------------------------------------------------- *
 * 12.6 Responsive
 *
 * Product grid: 4 desktop / 2 tablet / 1 mobile.
 * -------------------------------------------------- */

@media (max-width: 1100px) {
	.product-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.product-gallery__stage {
		max-width: 34rem;
	}
}

@media (max-width: 860px) {
	.shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.shop-toolbar__title {
		flex: none;
	}
}

@media (max-width: 640px) {
	.product-gallery__thumb {
		width: 60px;
		height: 60px;
	}

	.product-summary__actions .btn,
	.product-summary__actions .btn-enquire {
		width: 100%;
		justify-content: center;
	}

	.spec-table th {
		width: 44%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tabs__panel {
		animation: none;
	}

	.product-gallery__image {
		transition: none;
	}

	.download-list__item:hover {
		transform: none;
	}
}