.page-home {
	--hero-img-h: calc((100vw - 2 * var(--gutter)) * .4545);

	.hero2 { padding-block: 1rem 3rem; }

	.hero2-frame {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 1.5rem;
		min-height: 380px;
		padding: 2.4rem 2rem 2.4rem 3rem;
		border-radius: 18px;
		overflow: hidden;
		color: #fff;
		background:
			linear-gradient(90deg, rgb(5 8 7 / 92%) 0%, rgb(5 8 7 / 70%) 38%, rgb(5 8 7 / 0%) 70%),
			url("../../img/hero/hero.webp") right center / cover no-repeat,
			var(--deep);
	}

	.hero2-text { align-self: center; }

	.hero2-title { margin: 0 0 1rem; color: rgb(255 255 255 / 86%); font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
	.hero2-title span { color: #2fb864; }
	.hero2-title::after { content: ""; display: block; width: 4rem; height: 4px; margin-top: 1rem; border-radius: 999px; background: var(--green); }

	.hero2-sub { max-width: 42ch; margin-bottom: 1.4rem; color: rgb(255 255 255 / 72%); font-size: 1.15rem; }

	.hero2-search { display: flex; align-items: center; height: 42px; border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
	.hero2-search:focus-within { outline: 3px solid var(--green); }
	.hero2-search-label { display: flex; align-items: center; align-self: stretch; padding: 0 .85rem 0 1rem; border-right: 1px solid var(--rule); color: var(--ink); font-size: .9rem; font-weight: 700; cursor: text; }
	.hero2-search input { flex: 1; min-width: 0; height: 100%; padding: 0 13px; border: 0; outline: none; color: var(--ink); }
	.hero2-search input::placeholder { color: #8a8f8a; opacity: 1; }
	.hero2-search button { display: grid; place-items: center; width: 3.3rem; height: 100%; border: 0; background: var(--green); cursor: pointer; }
	.hero2-search button:hover { background: var(--green-strong); }
	.hero2-search button svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }

	.hero2-usps { display: flex; justify-content: center; align-self: start; gap: .75rem; }
	.hero2-usps li { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border: 1px solid rgb(34 197 94 / 55%); border-radius: 12px; background: rgb(6 10 8 / 78%); backdrop-filter: blur(6px); }
	.hero2-usps svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: rgb(255 255 255 / 86%); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
	.hero2-usps span { display: grid; color: rgb(255 255 255 / 62%); font-size: .74rem; line-height: 1.35; white-space: nowrap; }
	.hero2-usps strong { color: rgb(255 255 255 / 86%); font-size: .84rem; }

	@media (max-width: 1100px) {
		.hero2-frame { grid-template-columns: minmax(0, 1fr); padding: 2rem; }
		.hero2-usps { display: grid; grid-template-columns: repeat(3, 1fr); order: 2; }
		.hero2-usps span { white-space: normal; }
	}

	@media (max-width: 900px) {
		.hero2-frame {
			background:
				linear-gradient(180deg, rgb(5 8 7 / 70%) 0%, rgb(5 8 7 / 45%) 55%, rgb(5 8 7 / 20%) 100%),
				url("../../img/hero/hero-1000.webp") 72% center / cover no-repeat,
				var(--deep);
		}
	}

	@media (max-width: 640px) {
		.hero2-frame {
			gap: 1.25rem;
			min-height: 0;
			padding: calc(45.45% - 1rem) 1.25rem 1.5rem;
			background:
				linear-gradient(180deg, rgb(5 8 7 / 0%) 0, rgb(5 8 7 / 0%) calc(var(--hero-img-h) * .55), var(--deep) var(--hero-img-h)),
				image-set(url("../../img/hero/hero-mobile-800.webp") 1x, url("../../img/hero/hero-mobile-1600.webp") 2x) center top / 100% auto no-repeat,
				var(--deep);
		}
		.hero2-title { font-size: 2.1rem; }
		.hero2-sub { margin-bottom: 1.1rem; font-size: 1rem; }
		.hero2-usps { grid-template-columns: 1fr; }
		.hero2-usps li { padding: .65rem .8rem; }
	}

	@media (max-width: 380px) {
		.hero2-search-label { padding: 0 .6rem 0 .75rem; font-size: .82rem; }
	}
}