/* Native home — visual parity with former Elementor home */
body.ai-home { overflow-x: clip; margin: 0; }
body.ai-site { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #222; background: #fff; }
body.ai-site a { color: inherit; }
body.ai-site a.shop-cart,
body.ai-site a.shop-cart:visited,
body.ai-site a.shop-cart:hover,
body.ai-site a.shop-cart:active,
body.ai-site a.ai-cart-download,
body.ai-site a.ai-cart-download:visited,
body.ai-site a.ai-cart-download:hover,
body.ai-site a.ai-cart-download:active {
	color: #fff !important;
}
.ai-home-main { margin: 0; padding: 0; }

.ai-hero {
	/* 100vw + scrollbar-gutter shifts the whole page (CLS). Full-bleed via 100% is enough. */
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 48px 0 56px;
	min-height: 420px;
	box-sizing: border-box;
	background-color: #1a1a1a;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/assets/banners/banner-home.jpg");
	background-image: -webkit-image-set(
		url("/assets/banners/banner-home.avif") type("image/avif"),
		url("/assets/banners/banner-home.webp") type("image/webp"),
		url("/assets/banners/banner-home.jpg") type("image/jpeg")
	);
	background-image: image-set(
		url("/assets/banners/banner-home.avif") type("image/avif"),
		url("/assets/banners/banner-home.webp") type("image/webp"),
		url("/assets/banners/banner-home.jpg") type("image/jpeg")
	);
	display: flex;
	align-items: center;
}
.ai-hero-inner {
	width: min(1100px, calc(100% - 48px));
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.ai-hero-title {
	margin: 0;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ai-hero-sub {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 400;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ai-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 0;
	background: #61ce70;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 2px solid transparent;
}
.ai-btn:hover { filter: brightness(0.97); }
.ai-btn--light {
	background: #fff;
	color: #1e293b !important;
	border-color: #fff;
}
.ai-btn--outline {
	background: transparent;
	border-color: #fff;
	color: #fff !important;
}
.ai-btn--on-dark {
	background: rgba(255,255,255,.92);
	color: #1e293b !important;
	border-color: transparent;
}

.ai-feature-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: min(1200px, calc(100% - 32px));
	margin: 16px auto 32px;
	min-height: 260px;
}
.ai-feature-card {
	height: 260px;
	min-height: 260px;
	max-height: 260px;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-color: #334155;
	position: relative;
	contain: strict;
}
.ai-feature-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}
.ai-feature-card-body {
	position: relative;
	z-index: 1;
	padding: 40px;
	color: #fff;
}
.ai-feature-card-body h3 {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.25;
}
.ai-feature-card-body p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.45;
}
.ai-feature-card--catalog {
	background-position: top right;
	background-image: url("/assets/banners/banner-catalog.jpg");
	background-image: -webkit-image-set(
		url("/assets/banners/banner-catalog.avif") type("image/avif"),
		url("/assets/banners/banner-catalog.webp") type("image/webp"),
		url("/assets/banners/banner-catalog.jpg") type("image/jpeg")
	);
	background-image: image-set(
		url("/assets/banners/banner-catalog.avif") type("image/avif"),
		url("/assets/banners/banner-catalog.webp") type("image/webp"),
		url("/assets/banners/banner-catalog.jpg") type("image/jpeg")
	);
}
.ai-feature-card--gen {
	background-image: url("/assets/banners/feature-gen.jpg");
	background-image: -webkit-image-set(
		url("/assets/banners/feature-gen.avif") type("image/avif"),
		url("/assets/banners/feature-gen.webp") type("image/webp"),
		url("/assets/banners/feature-gen.jpg") type("image/jpeg")
	);
	background-image: image-set(
		url("/assets/banners/feature-gen.avif") type("image/avif"),
		url("/assets/banners/feature-gen.webp") type("image/webp"),
		url("/assets/banners/feature-gen.jpg") type("image/jpeg")
	);
}
.ai-feature-card--ideas {
	background-image: url("/assets/banners/feature-ideas.jpg");
	background-image: -webkit-image-set(
		url("/assets/banners/feature-ideas.avif") type("image/avif"),
		url("/assets/banners/feature-ideas.webp") type("image/webp"),
		url("/assets/banners/feature-ideas.jpg") type("image/jpeg")
	);
	background-image: image-set(
		url("/assets/banners/feature-ideas.avif") type("image/avif"),
		url("/assets/banners/feature-ideas.webp") type("image/webp"),
		url("/assets/banners/feature-ideas.jpg") type("image/jpeg")
	);
}

.ai-home-catalog {
	width: 100%;
	max-width: 100%;
	margin: 0 0 40px;
	padding: 32px 0 40px;
	background: #eef6fb;
	box-sizing: border-box;
}
.ai-home-catalog-head,
.ai-home-catalog-list {
	width: min(1200px, calc(100% - 32px));
	margin-left: auto;
	margin-right: auto;
}
.ai-home-catalog-head h2 {
	margin: 0 0 8px;
	font-size: 28px;
	text-align: center;
	color: #1e293b;
}
.ai-divider {
	width: 80px;
	height: 3px;
	margin: 0 auto 24px;
	border: 0;
	background: #1e73be;
}
.ai-home-catalog-list .ai-product-list {
	margin-top: 0;
}

.ai-promo {
	width: 100%;
	max-width: 100%;
	margin: 0 0 32px;
	padding: 72px 24px;
	box-sizing: border-box;
	/* Prefer top of photo so head stays in frame; height keeps shoulders */
	min-height: clamp(360px, 36vw, 520px);
	display: flex;
	align-items: center;
	background-color: #6b7280;
	background-position: right 12%;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/assets/banners/feature-promo.jpg");
	background-image: -webkit-image-set(
		url("/assets/banners/feature-promo.avif") type("image/avif"),
		url("/assets/banners/feature-promo.webp") type("image/webp"),
		url("/assets/banners/feature-promo.jpg") type("image/jpeg")
	);
	background-image: image-set(
		url("/assets/banners/feature-promo.avif") type("image/avif"),
		url("/assets/banners/feature-promo.webp") type("image/webp"),
		url("/assets/banners/feature-promo.jpg") type("image/jpeg")
	);
	color: #fff;
}
.ai-promo-inner {
	width: min(720px, 100%);
	margin: 0 auto;
	text-align: left;
}
.ai-promo-kicker { margin: 0 0 8px; font-size: 16px; }
.ai-promo h2 { margin: 0 0 12px; font-size: 32px; line-height: 1.2; }
.ai-promo-text { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.ai-promo-note { margin: 0 0 16px; font-size: 15px; opacity: .95; }

.ai-benefits {
	width: min(1200px, calc(100% - 32px));
	margin: 0 auto 48px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	text-align: center;
}
.ai-benefit img,
.ai-benefit-icon { margin: 0 auto 12px; display: block; }
.ai-benefit-icon { color: #61ce70; }
.ai-benefit h3 { margin: 0 0 8px; font-size: 18px; }
.ai-benefit p { margin: 0; font-size: 14px; line-height: 1.45; color: #555; }

@media (max-width: 1024px) {
	.ai-feature-cards { grid-template-columns: 1fr; min-height: 812px; }
	.ai-home-catalog-list ul.ai-product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ai-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Narrow viewports: cropped + resized feature cards (not full desktop assets). */
	.ai-feature-card--catalog {
		background-position: center;
		background-image: url("/assets/banners/banner-catalog-m.jpg");
		background-image: -webkit-image-set(
			url("/assets/banners/banner-catalog-m.avif") type("image/avif"),
			url("/assets/banners/banner-catalog-m.webp") type("image/webp"),
			url("/assets/banners/banner-catalog-m.jpg") type("image/jpeg")
		);
		background-image: image-set(
			url("/assets/banners/banner-catalog-m.avif") type("image/avif"),
			url("/assets/banners/banner-catalog-m.webp") type("image/webp"),
			url("/assets/banners/banner-catalog-m.jpg") type("image/jpeg")
		);
	}
	.ai-feature-card--gen {
		background-image: url("/assets/banners/feature-gen-m.jpg");
		background-image: -webkit-image-set(
			url("/assets/banners/feature-gen-m.avif") type("image/avif"),
			url("/assets/banners/feature-gen-m.webp") type("image/webp"),
			url("/assets/banners/feature-gen-m.jpg") type("image/jpeg")
		);
		background-image: image-set(
			url("/assets/banners/feature-gen-m.avif") type("image/avif"),
			url("/assets/banners/feature-gen-m.webp") type("image/webp"),
			url("/assets/banners/feature-gen-m.jpg") type("image/jpeg")
		);
	}
	.ai-feature-card--ideas {
		background-image: url("/assets/banners/feature-ideas-m.jpg");
		background-image: -webkit-image-set(
			url("/assets/banners/feature-ideas-m.avif") type("image/avif"),
			url("/assets/banners/feature-ideas-m.webp") type("image/webp"),
			url("/assets/banners/feature-ideas-m.jpg") type("image/jpeg")
		);
		background-image: image-set(
			url("/assets/banners/feature-ideas-m.avif") type("image/avif"),
			url("/assets/banners/feature-ideas-m.webp") type("image/webp"),
			url("/assets/banners/feature-ideas-m.jpg") type("image/jpeg")
		);
	}
}
@media (max-width: 768px) {
	.ai-hero {
		background-image: url("/assets/banners/banner-home-m.jpg");
		background-image: -webkit-image-set(
			url("/assets/banners/banner-home-m.avif") type("image/avif"),
			url("/assets/banners/banner-home-m.webp") type("image/webp"),
			url("/assets/banners/banner-home-m.jpg") type("image/jpeg")
		);
		background-image: image-set(
			url("/assets/banners/banner-home-m.avif") type("image/avif"),
			url("/assets/banners/banner-home-m.webp") type("image/webp"),
			url("/assets/banners/banner-home-m.jpg") type("image/jpeg")
		);
	}
	.ai-promo {
		background-position: center 12%;
		background-image: url("/assets/banners/feature-promo-m.jpg");
		background-image: -webkit-image-set(
			url("/assets/banners/feature-promo-m.avif") type("image/avif"),
			url("/assets/banners/feature-promo-m.webp") type("image/webp"),
			url("/assets/banners/feature-promo-m.jpg") type("image/jpeg")
		);
		background-image: image-set(
			url("/assets/banners/feature-promo-m.avif") type("image/avif"),
			url("/assets/banners/feature-promo-m.webp") type("image/webp"),
			url("/assets/banners/feature-promo-m.jpg") type("image/jpeg")
		);
	}
}
@media (max-width: 640px) {
	.ai-promo {
		min-height: clamp(320px, 72vw, 420px);
		padding: 52px 20px;
	}
	.ai-hero {
		min-height: 460px;
		padding: 56px 0 48px;
		justify-content: center;
	}
	.ai-hero-inner {
		width: calc(100% - 32px);
		align-items: center;
		text-align: center;
	}
	.ai-hero-title { font-size: 28px; }
	.ai-hero-sub { font-size: 18px; }
	.ai-hero-actions {
		width: 100%;
		justify-content: center;
	}
	.ai-hero-actions .ai-btn { flex: 1 1 auto; max-width: 48%; }
	.ai-home-catalog-list .ai-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ai-benefits { grid-template-columns: 1fr; }
	.ai-feature-card-body { padding: 24px; }
}
