[data-bs-theme=dark] {
	--c-text: 245, 245, 245;
	--c-background: 22, 22, 22;
}

.brand {
	width: 100%;
}

html.is-changing mz-header>.home>img {
	transform: scale(1.25);
	opacity: .75;
}
html.is-leaving mz-header>.home>img {
	transform: scale(1);
	opacity: 1;
}


.bg-gradient-primary {
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}


.have-idea {
	flex: 1;
}

header.hero {
	display: flex;
	align-items: center;
	height: 100vh;
	margin: -5rem -2rem 2rem;
	padding: 5rem 4rem 2rem;
	background: rgb(var(--c-background));
/*	--c1: rgb(var(--c-primary));*/
	--c1: rgb(254, 246, 233);
	--c2: rgb(var(--c-background));
	background:
	radial-gradient(50% 50% at 100% 0,var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
	 var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
	 #0000 96%),
	radial-gradient(50% 50% at 0 100%,var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
	 var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
	 #0000 96%),
	radial-gradient(50% 50%,var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
	 var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
	 #0000 96%),
	radial-gradient(50% 50%,var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
	 var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
	 #0000 96%) 64px 64px;
	background-size: 128px 128px;
	background-color: var(--c1);
	flex: 1;
}

[data-bs-theme=dark] header.hero {
/*	--c1: rgb(var(--c-primary));*/
	--c1: rgb(45, 37, 24);
	--c2: rgb(var(--c-background));
}


header.hero .btn-primary {
/*	background: linear-gradient(45deg, #2193b0, #6dd5ed);*/
	border: none;
}

header.hero .display-2 {
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

header.hero h3.h2 {
	background: linear-gradient(45deg, rgb(var(--c-primary)), rgb(var(--c-secondary)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

section {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 2rem;
	margin: 2rem;
}
section.services>.content {
	display: flex;
	gap: 1rem;
	width: 100%;
	max-width: 1280px;
	padding: 1rem;
	aspect-ratio: 3 / 1;
	border: 1px solid rgb(var(--c-primary), .5);
	border-radius: 3rem;
	background: rgb(var(--c-primary), .25);
}
section.services>.content>.item {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	aspect-ratio: 1;
	background: rgb(var(--c-background));
/*	border: 1px solid rgb(var(--c-primary), .75);*/
	border-radius: 2rem;
	box-shadow: inset 0 4px 4px -2px #0000001f, inset 0 -4px 4px -2px #0000001f, inset 0 0 3px #0000003d, 0 0 0 1px #00000014, 0 7px 12px -7px #1f1c1c26, 0 16px 24px -7px #1f1c1c14;
	overflow: hidden;
}
section.services>.content>.item>.points {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .75rem;
}
section.services>.content>.item>.points>.point {
	display: flex;
	align-items: center;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: .5rem;
	background: rgb(var(--c-primary), .5);
	border-radius: .5rem;

}
section.services>.content>.item>.bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	transition: all 0.25s ease 0.1s;
	z-index: -1;
}
section.services>.content>.item:hover>.bg-image {
	transform: scale(1.25) rotate(3deg);
}
section.services>.content>.item.hover {
	aspect-ratio: 1;
	background: unset;
}
section.services>.content>.item.image {
	background-image: var(--bgi);
	background-position: center;
	background-size: cover;
}
/*section.services>.content>.item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid rgb(var(--c-primary), 1);
	border-radius: 2rem;
	width: 100%;
	box-sizing: border-box;
/*	z-index: -1;*/
}*/

.trend {
/*	aspect-ratio: 1 / 1;*/
}

@media (max-width: 768px) {
	mz-page {
		padding: 1rem;
	}
	header.hero {
		padding: 6rem 1rem 1rem;
	}
	section {
		margin: 2rem 0;
	}
	section.services>.content {
		flex-direction: column;
		aspect-ratio: unset;
	}
	section.services>.content>.item {
		aspect-ratio: unset;
	}
	section.services>.content>.item.image {
		aspect-ratio: 4 / 3;
	}
}