@layer pages {
	.haf-home {
		overflow: clip;
		padding-block: 0;
	}

	.haf-home-fallback-header {
		padding-block: clamp(var(--haf-space-7), 8vw, var(--haf-space-9));
	}

	.haf-home-section {
		position: relative;
		padding-block: clamp(var(--haf-space-7), 8vw, var(--haf-space-9));
	}

	.haf-home-section--light {
		background: var(--haf-color-base);
	}

	.haf-home-section--soft {
		background: var(--haf-color-surface);
	}

	.haf-home-section--dark {
		background: var(--haf-color-ink);
		color: #dce8eb;
	}

	.haf-home-section--dark :where(h1, h2, h3) {
		color: var(--haf-color-base) !important;
	}

	.haf-home-section--dark .haf-home-section__header p {
		color: #c1d0d4;
	}

	.haf-home-section__header {
		display: grid;
		max-width: 48rem;
		gap: var(--haf-space-3);
		margin-block-end: clamp(var(--haf-space-6), 5vw, var(--haf-space-8));
	}

	.haf-home-section__header h2,
	.haf-home-contact h2 {
		margin: 0;
		font-size: var(--haf-font-size-2xl);
		letter-spacing: -0.025em;
	}

	.haf-home-section__header h2::before {
		display: block;
		width: 3rem;
		height: 0.2rem;
		margin-block-end: var(--haf-space-4);
		background: var(--haf-color-accent);
		content: "";
	}

	.haf-home-section__header p {
		max-width: 42rem;
		margin: 0;
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-lg);
	}

	.haf-home-section--soft .haf-home-section__header p {
		color: var(--haf-color-text);
	}

	.haf-home-section__action {
		display: flex;
		justify-content: center;
		margin-block-start: var(--haf-space-7);
	}

	.haf-home-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--haf-space-5);
	}

	.haf-home-product,
	.haf-home-store,
	.haf-home-article {
		height: 100%;
		transition: transform var(--haf-transition-base), border-color var(--haf-transition-fast), box-shadow var(--haf-transition-base);
	}

	.haf-home-card__body {
		display: flex;
		min-width: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--haf-space-3);
	}

	.haf-home-card__body :where(h3, p) {
		margin: 0;
	}

	.haf-home-card__body h3 {
		font-size: var(--haf-font-size-lg);
	}

	.haf-home-card__body h3 a {
		color: inherit;
		text-decoration: none;
	}

	.haf-home-card__body p {
		color: var(--haf-color-muted);
	}

	.haf-home-card__media {
		display: block;
	}

	.haf-home-card__media img {
		transition: transform 600ms ease;
	}

	.haf-home-card__link {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		gap: var(--haf-space-2);
		margin-block-start: auto;
		color: var(--haf-color-primary);
		font-weight: 700;
		text-decoration: none;
	}

	.haf-home-card__link .haf-icon {
		transition: transform var(--haf-transition-fast);
	}

	body:is(.home, .front-page) .haf-site-header {
		position: absolute;
		inset: 0 0 auto;
		border-block-end-color: transparent;
		background: transparent;
		box-shadow: none;
	}

	body:is(.home, .front-page).admin-bar .haf-site-header {
		inset-block-start: 32px;
	}

	body:is(.home, .front-page) .haf-site-header__inner {
		min-height: var(--haf-header-height);
	}

	body:is(.home, .front-page) .haf-site-title,
	body:is(.home, .front-page) .haf-menu a,
	body:is(.home, .front-page) .haf-submenu-toggle {
		color: var(--haf-color-base) !important;
		text-shadow: 0 1px 0 rgb(0 0 0 / 36%);
	}

	body:is(.home, .front-page) .haf-menu a:hover,
	body:is(.home, .front-page) .haf-menu a:focus-visible,
	body:is(.home, .front-page) .haf-submenu-toggle:hover,
	body:is(.home, .front-page) .haf-submenu-toggle:focus-visible,
	body:is(.home, .front-page) .haf-menu .current-menu-item > a,
	body:is(.home, .front-page) .haf-menu .current_page_item > a {
		color: var(--haf-color-accent-contrast) !important;
	}

	body:is(.home, .front-page) .haf-submenu-toggle:where(:hover, :focus-visible) {
		background: transparent;
	}

	body:is(.home, .front-page) .haf-menu-toggle {
		border-color: rgb(255 255 255 / 42%);
		background: rgb(8 18 22 / 56%);
		color: var(--haf-color-base);
	}

	.haf-home-hero {
		isolation: isolate;
		min-height: 100vh;
		min-height: 100svh;
		overflow: hidden;
		background: #0d171d;
		color: var(--haf-color-base);
	}

	.haf-home-hero::after {
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(to bottom, rgb(6 14 18 / 68%) 0%, rgb(6 14 18 / 20%) 28%, rgb(6 14 18 / 42%) 68%, rgb(6 14 18 / 72%) 100%),
			radial-gradient(circle at 50% 46%, rgb(9 25 31 / 8%) 0%, rgb(6 14 18 / 48%) 78%);
		content: "";
		pointer-events: none;
	}

	.haf-home-hero__grid {
		display: grid;
		min-height: inherit;
		place-items: center;
		padding-block: calc(var(--haf-header-height) + var(--haf-space-7)) var(--haf-space-8);
	}

	.haf-home-hero__content {
		position: relative;
		z-index: 2;
		display: grid;
		width: min(100%, 64rem);
		justify-items: center;
		gap: clamp(var(--haf-space-3), 2.4vw, var(--haf-space-5));
		margin-inline: auto;
		text-align: center;
	}

	.haf-home-hero__tag {
		width: fit-content;
		margin: 0;
		padding: 0.35rem 0.8rem;
		border: 1px solid rgb(var(--haf-color-accent-rgb) / 64%);
		border-radius: var(--haf-radius-pill);
		background: rgb(122 12 30 / 50%);
		color: var(--haf-color-accent-contrast);
		font-size: var(--haf-font-size-sm);
		font-weight: 700;
		letter-spacing: 0.04em;
	}

	.haf-home-hero h1 {
		max-width: min(100%, 12em);
		margin: 0;
		color: var(--haf-color-base) !important;
		font-size: clamp(2.35rem, 6.2vw, 5rem);
		letter-spacing: -0.045em;
		line-height: 1.06;
		word-break: keep-all;
		overflow-wrap: normal;
		text-wrap: balance;
		text-shadow: 0 0.08em 0.28em rgb(0 0 0 / 48%);
	}

	.haf-home-hero__summary {
		max-width: 48rem;
		margin: 0;
		color: #edf3f5;
		font-size: clamp(1rem, 1.1vw + 0.75rem, 1.45rem);
		text-shadow: 0 1px 0 rgb(0 0 0 / 52%);
	}

	.haf-home-hero__actions,
	.haf-home-contact__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-3);
	}

	.haf-home-hero__actions {
		justify-content: center;
		margin-block-start: var(--haf-space-2);
	}

	.haf-home-hero__actions .haf-button,
	.haf-home-contact__actions .haf-button {
		min-width: min(100%, 10rem);
	}

	.haf-home-hero__actions .haf-button {
		min-width: 14rem;
		min-height: 3.75rem;
	}

	.haf-home-hero__actions .haf-button--secondary {
		border-color: rgb(255 255 255 / 84%);
		background: rgb(6 14 18 / 24%);
		color: var(--haf-color-base) !important;
	}

	.haf-home-hero__actions .haf-button--secondary:hover {
		border-color: var(--haf-color-accent);
			background: rgb(var(--haf-color-primary-rgb) / 42%);
		color: var(--haf-color-base) !important;
	}

	.haf-home-hero__visual {
		position: absolute;
		inset: 0;
		z-index: -2;
		overflow: hidden;
		background: #0d171d;
	}

	.haf-home-hero__visual :where(img, video),
	.haf-home-hero__fallback {
		width: 100%;
		height: 100%;
	}

	.haf-home-hero__slides {
		position: absolute;
		inset: 0;
	}

	.haf-home-hero__slide {
		position: absolute;
		inset: 0;
		display: block;
		opacity: 0;
		transform: scale(1.025);
		transition: opacity 820ms ease, transform 5200ms ease;
		pointer-events: none;
	}

	.haf-home-hero__slide.is-active {
		opacity: 1;
		transform: scale(1);
	}

	.haf-home-hero__visual :where(img, video) {
		object-fit: cover;
		object-position: center;
	}

	.haf-home-hero__video {
		position: absolute;
		inset: 0;
	}

	.haf-home-hero__fallback {
		background:
			linear-gradient(118deg, transparent 0 48%, rgb(var(--haf-color-primary-rgb) / 16%) 48.2%, transparent 48.6% 100%),
			repeating-linear-gradient(90deg, rgb(var(--haf-color-accent-rgb) / 8%) 0 1px, transparent 1px 7rem),
			linear-gradient(145deg, #0d171d 0%, #18272f 52%, #0d171d 100%);
	}

	.haf-home-product-carousel {
		display: grid;
		gap: var(--haf-space-4);
		min-width: 0;
	}

	.haf-home-product-carousel__viewport {
		min-width: 0;
		overflow: hidden;
	}

	.haf-home-product-carousel__track {
		display: flex;
		min-width: 100%;
		transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.haf-home-product {
		flex: 0 0 100%;
		display: grid;
		grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr);
		height: auto;
		min-width: 0;
	}

	.haf-home-product__media {
		display: grid;
		width: 100%;
		min-width: 0;
		min-height: clamp(20rem, 32vw, 28rem);
		place-items: center;
		background: linear-gradient(145deg, var(--haf-color-surface-strong), var(--haf-color-surface));
	}

	.haf-home-product__media > img {
		object-fit: contain;
		object-position: center;
		padding: clamp(var(--haf-space-5), 5vw, var(--haf-space-8));
	}

	.haf-home-product__media > .haf-media--placeholder {
		width: 100%;
		height: 100%;
		min-height: 0;
		background: transparent;
	}

	.haf-home-product-carousel .haf-carousel__controls {
		justify-content: center;
	}

	.haf-home-product__model {
		color: var(--haf-color-muted);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: var(--haf-font-size-sm);
		font-weight: 700;
	}

	.haf-home-product__specs {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1px;
		overflow: hidden;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-border);
	}

	.haf-home-product__specs div {
		min-width: 0;
		padding: var(--haf-space-3);
		background: var(--haf-color-surface);
	}

	.haf-home-product__specs :where(dt, dd) {
		margin: 0;
	}

	.haf-home-product__specs dt {
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-xs);
	}

	.haf-home-product__specs dd {
		color: var(--haf-color-ink);
		font-weight: 750;
	}

	.haf-home-advantages::after {
		position: absolute;
		inset: 0;
			background: radial-gradient(circle at 85% 20%, rgb(var(--haf-color-accent-rgb) / 12%), transparent 28rem);
		content: "";
		pointer-events: none;
	}

	.haf-home-advantages > .haf-container {
		position: relative;
		z-index: 1;
	}

	.haf-home-advantage {
		position: relative;
		display: grid;
		align-content: start;
		gap: var(--haf-space-3);
		min-width: 0;
		padding: var(--haf-space-5);
		border-block-start: 1px solid rgb(255 255 255 / 18%);
	}

	.haf-home-advantage__number {
		position: absolute;
		top: var(--haf-space-3);
		right: var(--haf-space-3);
		color: rgb(255 255 255 / 28%);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: var(--haf-font-size-sm);
	}

	.haf-home-advantage__icon {
		display: grid;
		width: 3rem;
		height: 3rem;
		place-items: center;
		border: 1px solid rgb(var(--haf-color-accent-rgb) / 40%);
		border-radius: var(--haf-radius-md);
		background: rgb(var(--haf-color-primary-rgb) / 22%);
		color: var(--haf-color-accent);
	}

	/* Keep the Lucide marks optically consistent with the 48px icon tile. */
	.haf-home-advantage__icon .haf-icon {
		width: 1.5rem;
		height: 1.5rem;
		color: var(--haf-color-accent-contrast);
		stroke-width: 1.75;
	}

	.haf-home-advantage :where(h3, p) {
		margin: 0;
	}

	.haf-home-advantage > p:not(.haf-home-advantage__metric) {
		color: #b9c9cd;
	}

	.haf-home-advantage__metric {
		display: flex;
		align-items: baseline;
		gap: var(--haf-space-2);
		color: var(--haf-color-base);
		font-size: var(--haf-font-size-xl);
		font-weight: 800;
	}

	.haf-home-advantage__metric small {
		color: #b9c9cd;
		font-size: var(--haf-font-size-sm);
	}

	/* Service exhibition board: a directory and a single active stage replace the card grid. */
	.haf-service-board {
		display: grid;
		gap: clamp(var(--haf-space-5), 5vw, var(--haf-space-8));
	}

	.haf-service-board__index,
	.haf-service-board__stages {
		min-width: 0;
	}

	.haf-service-board__eyebrow,
	.haf-case-proof__eyebrow {
		margin: 0 0 var(--haf-space-4);
		color: var(--haf-color-primary);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: var(--haf-font-size-xs);
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.haf-service-board__toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--haf-space-3);
		margin-block-end: var(--haf-space-4);
	}

	.haf-service-board__toolbar .haf-service-board__eyebrow {
		margin: 0;
	}

	.haf-service-board__list {
		display: grid;
		margin: 0;
		padding: 0;
		border-block-start: 1px solid var(--haf-color-border);
		list-style: none;
	}

	.haf-service-board__item {
		min-width: 0;
		border-block-end: 1px solid var(--haf-color-border);
	}

	.haf-service-board__selector {
		display: grid;
		grid-template-columns: 2rem minmax(0, 1fr) auto;
		align-items: start;
		gap: var(--haf-space-3);
		min-height: 5.5rem;
		padding: var(--haf-space-4) 0;
		color: var(--haf-color-ink);
		text-decoration: none;
		transition: color var(--haf-transition-fast), padding var(--haf-transition-fast), background var(--haf-transition-fast);
	}

	.haf-service-board__selector:focus-visible {
		outline: 2px solid var(--haf-color-accent);
		outline-offset: 0.25rem;
	}

	.haf-service-board__selector.is-active,
	.haf-service-board__selector:hover {
		color: var(--haf-color-primary);
	}

	.haf-service-board__selector.is-active {
		padding-inline: var(--haf-space-3);
		background: rgb(var(--haf-color-accent-rgb) / 8%);
	}

	.haf-service-board__number {
		padding-block-start: 0.15rem;
		color: var(--haf-color-muted);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: var(--haf-font-size-xs);
		font-weight: 800;
	}

	.haf-service-board__selector.is-active .haf-service-board__number {
		color: var(--haf-color-primary);
	}

	.haf-service-board__selector-copy {
		display: grid;
		gap: 0.35rem;
		min-width: 0;
	}

	.haf-service-board__selector-copy strong {
		color: var(--haf-color-ink);
		font-size: var(--haf-font-size-lg);
		line-height: 1.25;
	}

	.haf-service-board__selector-copy small {
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-xs);
		font-weight: 750;
	}

	.haf-service-board__selector-copy > span {
		display: -webkit-box;
		overflow: hidden;
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-sm);
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.haf-service-board__arrow {
		display: grid;
		width: 2rem;
		height: 2rem;
		place-items: center;
		margin-block-start: 0.1rem;
		border: 1px solid var(--haf-color-border);
		border-radius: 50%;
		color: var(--haf-color-muted);
		transition: color var(--haf-transition-fast), border-color var(--haf-transition-fast), transform var(--haf-transition-fast);
	}

	.haf-service-board__selector.is-active .haf-service-board__arrow,
	.haf-service-board__selector:hover .haf-service-board__arrow {
		border-color: var(--haf-color-accent);
		color: var(--haf-color-primary);
		transform: translateX(0.15rem);
	}

	.haf-service-board__stage {
		overflow: hidden;
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-ink);
		color: var(--haf-color-base);
		box-shadow: var(--haf-shadow-md);
	}

	.haf-service-board__stage-link {
		display: grid;
		grid-template-rows: minmax(15rem, 1fr) auto;
		min-height: 100%;
		color: inherit;
		text-decoration: none;
	}

	.haf-service-board__stage-link:focus-visible {
		outline: 3px solid var(--haf-color-focus-contrast);
		outline-offset: -3px;
	}

	@keyframes haf-service-stage-enter {
		from {
			opacity: 0.15;
			transform: translateY(0.75rem);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.haf-service-board__stage.is-switching .haf-service-board__stage-link {
		animation: haf-service-stage-enter 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.haf-service-board__stage[hidden] {
		display: none;
	}

	.haf-service-board__media {
		display: block;
		position: relative;
		min-height: 15rem;
		overflow: hidden;
		background: linear-gradient(145deg, #243d44 0%, #0d171d 100%);
	}

	.haf-service-board__media::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 45%, rgb(6 14 18 / 52%) 100%);
		content: "";
		pointer-events: none;
	}

	.haf-service-board__media > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 700ms ease;
	}

	.haf-service-board__media-empty,
	.haf-case-proof__media-empty {
		display: grid;
		width: 100%;
		height: 100%;
		place-items: center;
		align-content: center;
		gap: var(--haf-space-2);
		padding: var(--haf-space-4);
		color: #b9c9cd;
		font-size: var(--haf-font-size-sm);
		text-align: center;
	}

	.haf-service-board__media-empty .haf-icon,
	.haf-case-proof__media-empty .haf-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.haf-service-board__content {
		display: grid;
		gap: var(--haf-space-4);
		padding: clamp(var(--haf-space-5), 5vw, var(--haf-space-7));
	}

	.haf-service-board__kicker {
		margin: 0;
		color: var(--haf-color-accent-contrast);
		font-size: var(--haf-font-size-sm);
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.haf-service-board__content h3,
	.haf-service-board__summary {
		margin: 0;
	}

	.haf-service-board__content h3 {
		max-width: 12em;
		color: var(--haf-color-base) !important;
		font-size: clamp(2rem, 4.5vw, 4.6rem);
		letter-spacing: -0.05em;
		line-height: 1.05;
		text-wrap: balance;
	}

	.haf-service-board__summary {
		max-width: 38rem;
		color: #c5d4d7;
		font-size: var(--haf-font-size-lg);
		line-height: 1.75;
	}

	.haf-service-board__content .haf-button {
		justify-self: start;
	}

	.haf-service-board__facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1px;
		margin: var(--haf-space-2) 0 0;
		border-block-start: 1px solid rgb(255 255 255 / 18%);
		/* Keep an unfilled grid cell in the same visual state as the fact cells. */
		background: var(--haf-color-ink);
	}

	.haf-service-board__facts > div {
		min-width: 0;
		padding: var(--haf-space-3) var(--haf-space-4);
		background: var(--haf-color-ink);
	}

	.haf-service-board__facts :where(dt, dd) {
		margin: 0;
	}

	.haf-service-board__facts dt {
		color: var(--haf-color-accent-contrast);
		font-size: var(--haf-font-size-xs);
	}

	.haf-service-board__facts dd {
		margin-block-start: 0.35rem;
		color: var(--haf-color-base);
		font-size: var(--haf-font-size-sm);
		font-weight: 700;
	}

	/* Proof band: case rows stay editorial and connected, without turning each case into a card. */
	.haf-case-proof {
		display: grid;
		gap: clamp(var(--haf-space-6), 5vw, var(--haf-space-8));
		padding: 0;
		color: var(--haf-color-ink);
	}

	.haf-case-proof__lead {
		display: grid;
		align-content: start;
		gap: var(--haf-space-4);
	}

	.haf-case-proof__eyebrow {
		margin-block-end: 0;
		color: var(--haf-color-primary);
	}

	.haf-case-proof__statement,
	.haf-case-proof__note {
		max-width: 28rem;
		margin: 0;
	}

	.haf-case-proof__statement {
		font-size: clamp(1.35rem, 2.2vw, 2rem);
		font-weight: 750;
		letter-spacing: -0.025em;
		line-height: 1.35;
	}

	.haf-case-proof__note {
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-sm);
	}

	.haf-case-proof__rule {
		width: min(100%, 7rem);
		height: 2px;
		background: var(--haf-color-accent);
	}

	.haf-case-proof__carousel {
		display: grid;
		gap: var(--haf-space-4);
		min-width: 0;
	}

	.haf-case-proof__viewport {
		min-width: 0;
		overflow: hidden;
		border-block-start: 1px solid var(--haf-color-border);
	}

	.haf-case-proof__list {
		display: flex;
		min-width: 100%;
		transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.haf-case-proof__row {
		flex: 0 0 100%;
		display: grid;
		grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
		align-items: center;
		gap: var(--haf-space-4);
		min-width: 0;
		padding-block: var(--haf-space-5);
		border-block-end: 1px solid var(--haf-color-border);
		transition: background var(--haf-transition-fast);
	}

	.haf-case-proof__media {
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-surface);
	}

	.haf-case-proof__media > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 600ms ease;
	}

	.haf-case-proof__media-empty {
		color: var(--haf-color-muted);
	}

	.haf-case-proof__content {
		display: grid;
		gap: var(--haf-space-2);
		min-width: 0;
	}

	.haf-case-proof__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0.65rem;
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-xs);
	}

	.haf-case-proof__meta span + span::before {
		margin-inline-end: 0.65rem;
		color: var(--haf-color-border);
		content: "/";
	}

	.haf-case-proof__content h3 {
		margin: 0;
		font-size: clamp(1.35rem, 2.1vw, 1.85rem);
	}

	.haf-case-proof__content h3 a {
		color: var(--haf-color-ink);
		text-decoration: none;
	}

	.haf-case-proof__link {
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		width: fit-content;
		margin-block-start: 0.35rem;
		color: var(--haf-color-primary);
		font-size: var(--haf-font-size-sm);
		font-weight: 750;
		text-decoration: none;
	}

	.haf-case-proof__link .haf-icon {
		transition: transform var(--haf-transition-fast);
	}

	.haf-carousel__controls,
	.haf-case-proof__controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: var(--haf-space-3);
	}

	.haf-rotation-toggle {
		display: inline-grid;
		width: 2.75rem;
		height: 2.75rem;
		flex: 0 0 auto;
		place-items: center;
		padding: 0;
		border: 1px solid var(--haf-color-border);
		border-radius: 50%;
		background: var(--haf-color-base);
		color: var(--haf-color-primary);
		cursor: pointer;
	}

	.haf-rotation-toggle:hover {
		border-color: var(--haf-color-primary);
		background: var(--haf-color-primary-soft);
	}

	.haf-rotation-toggle__play,
	.haf-rotation-toggle__pause {
		grid-area: 1 / 1;
	}

	.haf-rotation-toggle__play,
	.haf-rotation-toggle[aria-pressed="true"] .haf-rotation-toggle__pause {
		display: none;
	}

	.haf-rotation-toggle[aria-pressed="true"] .haf-rotation-toggle__play {
		display: inline-flex;
	}

	.haf-rotation-toggle .haf-icon {
		width: 1rem;
		height: 1rem;
	}

	.haf-carousel__dots,
	.haf-case-proof__dots {
		display: flex;
		align-items: center;
		gap: var(--haf-space-2);
	}

	.haf-carousel__dot,
	.haf-case-proof__dot {
		display: grid;
		width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		place-items: center;
		border: 0;
		background: transparent;
		color: var(--haf-color-primary);
		cursor: pointer;
	}

	.haf-carousel__dot::before,
	.haf-case-proof__dot::before {
		content: "";
		width: 0.55rem;
		height: 0.55rem;
		border: 1px solid var(--haf-color-control-border);
		border-radius: var(--haf-radius-pill);
		transition: width var(--haf-transition-fast), background var(--haf-transition-fast), border-color var(--haf-transition-fast);
	}

	.haf-carousel__dot.is-active::before,
	.haf-case-proof__dot.is-active::before {
		width: 1.25rem;
		border-color: var(--haf-color-primary);
		background: var(--haf-color-primary);
	}

	.haf-carousel__dot:hover::before,
	.haf-carousel__dot:focus-visible::before,
	.haf-case-proof__dot:hover::before,
	.haf-case-proof__dot:focus-visible::before {
		border-color: var(--haf-color-primary);
	}

	.haf-carousel__dot:focus-visible,
	.haf-case-proof__dot:focus-visible {
		outline: 3px solid var(--haf-color-focus-contrast);
		outline-offset: 2px;
	}

	.haf-home-process__list {
		position: relative;
		display: grid;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.haf-home-process__list::before {
		position: absolute;
		top: 1.5rem;
		bottom: 1.5rem;
		left: 1.5rem;
		width: 1px;
		transform-origin: top;
		background: var(--haf-color-border);
		content: "";
	}

	.haf-home-process__list li {
		position: relative;
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: var(--haf-space-4);
		padding-block: var(--haf-space-4);
	}

	.haf-home-process__number {
		z-index: 1;
		display: grid;
		width: 3rem;
		height: 3rem;
		place-items: center;
		border: 1px solid var(--haf-color-accent);
		border-radius: 50%;
		background: var(--haf-color-base);
		color: var(--haf-color-primary);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-weight: 800;
	}

	.haf-home-process__list :where(h3, p) {
		margin: 0;
	}

	.haf-home-process__list p {
		margin-block-start: var(--haf-space-2);
		color: var(--haf-color-muted);
	}

	.haf-home-store__details {
		display: grid;
		gap: var(--haf-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.haf-home-store__details li {
		display: flex;
		align-items: flex-start;
		min-width: 0;
		gap: var(--haf-space-2);
		color: var(--haf-color-muted);
	}

	.haf-home-store__details a {
		overflow-wrap: anywhere;
	}

	.haf-home-credential {
		display: grid;
		min-width: 0;
		align-content: start;
		gap: var(--haf-space-3);
		padding: var(--haf-space-5);
		border: 1px solid rgb(255 255 255 / 15%);
		border-radius: var(--haf-radius-lg);
		background: rgb(255 255 255 / 5%);
	}

	.haf-home-credential__media {
		display: grid;
		min-height: 8rem;
		place-items: center;
		padding: var(--haf-space-4);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-base);
	}

	.haf-home-credential__media :where(img, .haf-media--placeholder) {
		width: 100%;
		max-height: 8rem;
		object-fit: contain;
	}

	.haf-home-credential :where(h3, p) {
		margin: 0;
	}

	.haf-home-credential p {
		color: #bdcdd1;
	}

	.haf-home-testimonial {
		position: relative;
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: var(--haf-space-4);
		padding: var(--haf-space-6);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
	}

	.haf-home-testimonial__quote {
		position: absolute;
		top: var(--haf-space-3);
		right: var(--haf-space-5);
		color: var(--haf-color-primary-soft);
		font-family: Georgia, serif;
		font-size: 5rem;
		line-height: 1;
	}

	.haf-home-testimonial blockquote {
		position: relative;
		z-index: 1;
		margin: 0;
		font-size: var(--haf-font-size-lg);
	}

	.haf-home-testimonial footer {
		display: grid;
		gap: var(--haf-space-1);
		margin-block-start: auto;
	}

	.haf-home-testimonial footer :where(span, small) {
		color: var(--haf-color-muted);
	}

	.haf-home-testimonial details summary {
		min-height: 2.75rem;
		color: var(--haf-color-primary);
		font-weight: 700;
		cursor: pointer;
	}

	.haf-home-article__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--haf-space-2) var(--haf-space-3);
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-sm);
	}

	.haf-home-faq__layout {
		max-width: 62rem;
	}

	.haf-faq {
		border-block-start: 1px solid var(--haf-color-border);
	}

	.haf-faq__item {
		border-block-end: 1px solid var(--haf-color-border);
	}

	.haf-faq__item h3 {
		margin: 0;
	}

	.haf-faq__item button {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		gap: var(--haf-space-4);
		padding: var(--haf-space-5) 0;
		border: 0;
		background: transparent;
		color: var(--haf-color-ink);
		font-weight: 750;
		text-align: left;
		cursor: pointer;
	}

	.haf-faq__item button .haf-icon {
		transition: transform var(--haf-transition-fast);
	}

	.haf-faq__item button[aria-expanded="true"] .haf-icon {
		transform: rotate(90deg);
	}

	.haf-faq__panel {
		padding-block: 0 var(--haf-space-5);
		overflow: hidden;
	}

	.haf-faq__panel > :first-child {
		margin-block-start: 0;
	}

	.haf-home-contact {
		overflow: hidden;
		padding-block: clamp(var(--haf-space-5), 4vw, var(--haf-space-7));
	}

	.haf-home-contact.haf-home-section--dark {
			background:
				radial-gradient(circle at 90% 10%, rgb(var(--haf-color-accent-rgb) / 18%), transparent 26rem),
			var(--haf-color-ink);
	}

	.haf-home-contact__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(var(--haf-space-5), 5vw, var(--haf-space-8));
		align-items: center;
	}

	.haf-home-contact__content {
		display: grid;
		gap: var(--haf-space-4);
	}

	.haf-home-contact__content > :where(h2, p) {
		margin: 0;
	}

	.haf-home-contact__content > p {
		max-width: 44rem;
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-lg);
	}

	.haf-home-contact.haf-home-section--dark .haf-home-contact__content > p {
		color: #c4d2d5;
	}

	.haf-home-contact__address {
		display: flex;
		align-items: flex-start;
		gap: var(--haf-space-2);
	}

	.haf-home-contact__privacy {
		font-size: var(--haf-font-size-sm) !important;
	}

	.haf-home-contact__aside {
		display: grid;
		gap: var(--haf-space-4);
		padding: var(--haf-space-4);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-base);
	}

	.haf-home-contact.haf-home-section--dark .haf-home-contact__aside {
		border-color: rgb(255 255 255 / 16%);
		background: rgb(255 255 255 / 6%);
	}

	.haf-home-contact__wechat {
		display: grid;
		gap: var(--haf-space-3);
	}

	.haf-home-contact__wechat :where(h3, p) {
		margin: 0;
	}

	.haf-home-contact__wechat img {
		width: 7rem;
		height: 7rem;
		padding: var(--haf-space-2);
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-base);
		object-fit: contain;
	}

	.haf-home-contact__store-link {
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		color: var(--haf-color-primary);
		font-weight: 700;
		text-decoration: none;
	}

	.haf-home-contact.haf-home-section--dark .haf-home-contact__store-link {
		color: var(--haf-color-accent-contrast);
	}

	.haf-home-section--admin-empty {
		padding-block: var(--haf-space-5);
	}

	.haf-home-animations-ready [data-reveal] {
		transform: translate3d(0, 1.25rem, 0);
		opacity: 0;
		transition: opacity 620ms ease var(--haf-reveal-delay, 0ms), transform 620ms ease var(--haf-reveal-delay, 0ms);
	}

	.haf-home-animations-ready [data-reveal="scale"] {
		transform: scale(0.98);
	}

	.haf-home-animations-ready [data-reveal].is-visible {
		transform: none;
		opacity: 1;
	}

	.haf-home-animations-ready [data-haf-hero-content] > *,
	.haf-home-animations-ready [data-haf-hero-visual] {
		transform: translate3d(0, 1rem, 0);
		opacity: 0;
		transition: opacity 600ms ease, transform 600ms ease;
	}

	.haf-home-animations-ready [data-haf-hero-content] > :nth-child(2) {
		transition-delay: 80ms;
	}

	.haf-home-animations-ready [data-haf-hero-content] > :nth-child(3) {
		transition-delay: 160ms;
	}

	.haf-home-animations-ready [data-haf-hero-content] > :nth-child(4),
	.haf-home-animations-ready [data-haf-hero-visual] {
		transition-delay: 240ms;
	}

	.haf-home-animations-ready .is-home-visible [data-haf-hero-content] > *,
	.haf-home-animations-ready .is-home-visible [data-haf-hero-visual] {
		transform: none;
		opacity: 1;
	}

	.haf-home-animations-ready [data-haf-process]::before {
		transform: scaleY(0);
		transition: transform 900ms ease;
	}

	.haf-home-animations-ready [data-haf-process].is-visible::before {
		transform: scaleY(1);
	}

	@media (hover: hover) and (pointer: fine) {
		.haf-home-product:hover,
		.haf-home-store:hover,
		.haf-home-article:hover {
			transform: translateY(-0.25rem);
			border-color: var(--haf-color-accent);
			box-shadow: var(--haf-shadow-md);
		}

		.haf-home-card__media:hover img {
			transform: scale(1.045);
		}

		.haf-home-card__link:hover .haf-icon,
		.haf-home-contact__store-link:hover .haf-icon,
		.haf-case-proof__link:hover .haf-icon {
			transform: translateX(0.2rem);
		}

		.haf-service-board__stage-link:hover .haf-service-board__media > img,
		.haf-service-board__media:hover > img,
		.haf-case-proof__media:hover > img {
			transform: scale(1.045);
		}
	}

	@media (min-width: 40rem) {
		.haf-home-grid--advantages,
		.haf-home-grid--stores,
		.haf-home-grid--credentials,
		.haf-home-grid--testimonials,
		.haf-home-grid--articles {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	}

	@media (min-width: 48rem) {
		body:is(.home, .front-page) .haf-menu--primary .sub-menu {
			border-color: rgb(255 255 255 / 18%);
			background: rgb(8 18 22 / 94%);
			box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 32%);
		}

		.haf-home-process__list {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.haf-home-process__list::before {
			top: 2.5rem;
			right: calc(25% - 1.5rem);
			bottom: auto;
			left: 1.5rem;
			width: auto;
			height: 1px;
			transform-origin: left;
			background: var(--haf-color-border);
		}

		.haf-home-process__list li {
			grid-template-columns: minmax(0, 1fr);
			padding-inline-end: var(--haf-space-5);
		}

		.haf-home-animations-ready [data-haf-process]::before {
			transform: scaleX(0);
			transition: transform 900ms ease;
		}

		.haf-home-animations-ready [data-haf-process].is-visible::before {
			transform: scaleX(1);
		}

		.haf-case-proof__row {
			grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
			gap: var(--haf-space-5);
		}
	}

	@media (min-width: 64rem) {
		.haf-service-board {
			grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.65fr);
			align-items: start;
		}

		.haf-service-board__index {
			position: sticky;
			top: calc(var(--haf-header-height) + var(--haf-space-5));
		}

		.haf-service-board__stage-link {
			grid-template-rows: minmax(20rem, 27rem) auto;
		}

		.haf-case-proof__row {
			grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
		}

		.haf-case-proof {
			grid-template-columns: minmax(14rem, 0.68fr) minmax(0, 1.7fr);
			align-items: start;
		}

		.haf-home-contact__grid {
			grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
		}

		.haf-home-grid--advantages {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.haf-home-grid--stores,
		.haf-home-grid--testimonials,
		.haf-home-grid--articles {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.haf-home-grid--credentials {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	@media (max-width: 47.99rem) {
		body:is(.home, .front-page).admin-bar .haf-site-header {
			inset-block-start: 46px;
		}

		body:is(.home, .front-page) .haf-primary-nav {
			padding: var(--haf-space-3);
			border: 1px solid rgb(255 255 255 / 16%);
			border-radius: var(--haf-radius-md);
			background: rgb(8 18 22);
			box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 32%);
		}

		.haf-home-hero {
			min-height: 100vh;
			min-height: 100svh;
		}

		.haf-home-hero__grid {
			padding-block: calc(var(--haf-header-height) + var(--haf-space-7)) calc(var(--haf-space-8) + 2rem);
		}

		.haf-home-hero__content {
			gap: var(--haf-space-4);
		}

		.haf-home-hero__actions {
			width: min(100%, 24rem);
			flex-direction: column;
		}

		.haf-home-hero__actions .haf-button,
		.haf-home-contact__actions .haf-button {
			flex: 1 1 9rem;
		}

		.haf-home-hero__actions .haf-button {
			width: 100%;
			flex-basis: auto;
		}

		.haf-home-hero__video {
			display: none;
		}

		.haf-home-product {
			grid-template-columns: minmax(0, 1fr);
		}

		.haf-home-product__media {
			min-height: clamp(14rem, 70vw, 19rem);
		}

		.haf-service-board__selector-copy > span {
			display: none;
		}

		.haf-service-board__facts {
			grid-template-columns: minmax(0, 1fr);
		}

		.haf-case-proof__row {
			grid-template-columns: 8rem minmax(0, 1fr);
			gap: var(--haf-space-3);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.haf-home-animations-ready [data-reveal],
		.haf-home-animations-ready [data-haf-hero-content] > *,
		.haf-home-animations-ready [data-haf-hero-visual],
		.haf-home-animations-ready [data-haf-process]::before {
			transform: none !important;
			opacity: 1 !important;
			transition: none !important;
		}

		.haf-home-card__media img,
		.haf-service-board__media > img,
		.haf-case-proof__media > img,
		.haf-home-product-carousel__track,
		.haf-case-proof__list,
		.haf-faq__item button .haf-icon {
			transition: none;
		}

		.haf-service-board__stage.is-switching .haf-service-board__stage-link {
			animation: none;
		}
	}
}
/* 修复首页首屏在手机端横向溢出 */
@media (max-width: 47.99rem) {
	.haf-home-hero__content {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.haf-home-hero h1 {
		width: 100%;
		max-width: 100%;
		font-size: clamp(2rem, 10vw, 2.85rem);
		line-height: 1.12;
		letter-spacing: -0.035em;
		word-break: normal;
		overflow-wrap: anywhere;
		text-wrap: balance;
	}

	.haf-home-hero__summary {
		width: 100%;
		max-width: 32rem;
		overflow-wrap: anywhere;
	}

	.haf-home-hero__actions {
		width: min(100%, 24rem);
		max-width: 100%;
	}

	.haf-home-hero__actions .haf-button {
		width: 100%;
		min-width: 0;
	}
}