@layer components {
	/* ========== SITE HEADER ========== */
	.site-header {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 100;
	}

	.site-header__inner {
		background: rgb(255 255 255 / .84);
		backdrop-filter: blur(20px) saturate(160%);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		border-block-end: 1px solid var(--color-border);
		transition: box-shadow .3s ease;
	}

	.site-header.is-scrolled .site-header__inner {
		box-shadow: 0 14px 34px -20px rgb(13 95 146 / .28);
	}

	.site-header__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		height: var(--header-height);
		transition: height .3s ease;
	}

	.site-header.is-scrolled .site-header__row {
		height: var(--header-height-small);
	}

	.site-header__brand {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
	}

	.site-header__brand img,
	.site-header__brand svg {
		max-height: 42px;
		width: auto;
	}

	.site-header__logo-text {
		font-weight: 900;
		font-size: 1.5rem;
		color: var(--color-text);
	}

	.site-header__menu {
		display: flex;
		align-items: center;
		gap: .25rem;
		list-style: none;
	}

	.site-header__menu a {
		display: inline-flex;
		padding: .65rem 1rem;
		border-radius: var(--radius-pill);
		color: var(--color-muted);
		font-size: .9rem;
		font-weight: 600;
		transition: color .25s ease, background-color .25s ease;
	}

	.site-header__menu a:hover {
		background: var(--color-surface-soft);
		color: var(--color-primary-dark);
	}

	.site-header__actions {
		display: flex;
		align-items: center;
		gap: .625rem;
	}

	.site-header__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		min-height: 46px;
		padding-inline: 1.25rem;
		border-radius: var(--radius-pill);
		background: var(--gradient-primary);
		color: #fff;
		font-weight: 800;
		font-size: .9rem;
		box-shadow: 0 10px 24px -10px rgb(27 135 197 / .55);
	}

	.site-header__toggle {
		display: none;
		width: 46px;
		height: 46px;
		border-radius: 14px;
		background: var(--color-surface-soft);
		place-items: center;
	}

	.site-header__toggle span {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 99px;
		background: var(--color-text);
		transition: transform .3s ease, opacity .3s ease;
	}

	.site-header__toggle span + span {
		margin-block-start: 4px;
	}

	.site-header__toggle.is-open span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.site-header__toggle.is-open span:nth-child(2) {
		opacity: 0;
	}

	.site-header__toggle.is-open span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* ========== MOBILE MENU ========== */
	.mobile-menu {
		position: fixed;
		inset: 0;
		z-index: 99;
		display: none;
		padding: 96px 6% calc(28px + env(safe-area-inset-bottom));
		background: rgb(255 255 255 / .97);
		backdrop-filter: blur(20px);
		overflow: auto;
	}

	.mobile-menu.is-open {
		display: block;
		animation: mobileMenuIn .35s cubic-bezier(.2,.8,.2,1);
	}

	@keyframes mobileMenuIn {
		from {
			opacity: 0;
			transform: translateY(-14px);
		}
	}

	.mobile-menu__list {
		list-style: none;
	}

	.mobile-menu__list a,
	.mobile-menu__cta {
		display: flex;
		align-items: center;
		min-height: 58px;
		border-block-end: 1px solid var(--color-border);
		font-size: 1.1rem;
		font-weight: 700;
	}

	.mobile-menu__cta {
		justify-content: center;
		margin-block-start: 1.5rem;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--gradient-primary);
		color: #fff;
		box-shadow: 0 16px 34px -14px rgb(27 135 197 / .6);
	}

	/* ========== MOBILE ACTIONS ========== */
	.mobile-actions {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 98;
		display: none;
		grid-template-columns: 1fr 1fr;
		gap: .625rem;
		padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
		background: rgb(255 255 255 / .92);
		backdrop-filter: blur(18px);
		border-block-start: 1px solid var(--color-border);
	}

	.mobile-actions__link {
		width: 100%;
		min-height: 48px;
		padding-inline: .75rem;
		font-size: .9rem;
	}

	/* ========== HERO ========== */
	.hero {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		display: flex;
		align-items: center;
		padding-block: 170px 90px;
	}

	.hero__grid {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 3.75rem;
		align-items: center;
	}

	.hero__badge {
		display: inline-flex;
		align-items: center;
		gap: .625rem;
		margin-block-end: 1.75rem;
		padding: .5rem 1rem .5rem .75rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		background: #fff;
		color: var(--color-muted);
		font-size: .82rem;
		box-shadow: var(--shadow-sm);
	}

	.hero__badge-dot {
		width: .5rem;
		height: .5rem;
		border-radius: 50%;
		background: var(--color-success);
		box-shadow: 0 0 10px rgb(22 163 74 / .6);
		animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {
		50% {
			opacity: .4;
		}
	}

	.hero__title {
		margin-block-end: 1.5rem;
		color: var(--color-text);
		font-size: clamp(2.625rem, 7vw, 5.75rem);
		font-weight: 900;
		line-height: .98;
		letter-spacing: -.04em;
	}

	.hero__lead {
		max-width: 35rem;
		margin-block-end: 2.375rem;
		font-size: clamp(1rem, 1.5vw, 1.2rem);
	}

	.hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: .875rem;
		margin-block-end: 3rem;
	}

	.hero__stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.125rem;
		max-width: 32.5rem;
	}

	.hero__stat-value {
		font-size: clamp(1.625rem, 3vw, 2.25rem);
		font-weight: 900;
		letter-spacing: -.03em;
	}

	.hero__stat-label {
		margin-block-start: .125rem;
		font-size: .82rem;
		color: var(--color-muted);
	}

	@media (max-width: 960px) {
		.site-header__nav {
			display: none;
		}

		.site-header__cta-text {
			display: none;
		}

		.site-header__toggle {
			display: grid;
		}

		.hero {
			min-height: auto;
			padding-block: 150px 80px;
		}

		.hero__grid {
			grid-template-columns: 1fr;
			gap: 3.75rem;
		}
	}

	@media (max-width: 640px) {
		:root {
			--gutter: 6vw;
			--header-height: 64px;
			--header-height-small: 56px;
		}

		body {
			padding-block-end: 86px;
		}

		.mobile-actions {
			display: grid;
		}

		.hero {
			padding-block: 116px 88px;
		}

		.hero__title {
			font-size: clamp(2.5rem, 11vw, 3.375rem);
		}

		.hero__lead {
			font-size: 1rem;
			line-height: 1.65;
		}

		.hero__actions {
			flex-direction: column;
		}

		.hero__actions .c-button {
			width: 100%;
		}

		.hero__stats {
			gap: 1rem;
		}

		.hero__stat-value {
			font-size: 1.875rem;
		}

		.hero__stat-label {
			font-size: .75rem;
		}
	}
}