.page-content.axion-home {
	background:
		radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.14), transparent 24rem),
		linear-gradient(180deg, var(--axion-brand) 0%, var(--axion-brand-dark) 58%, var(--axion-brand-darker) 100%);
	color: #fff;
	min-height: 100vh;
	padding: 0;
}

body {
	background: #360437;
	margin: 0;
}

.axion-home .axion-hero {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: 980px;
	min-height: 100vh;
	padding: clamp(2rem, 7vw, 5rem) 1.5rem;
	text-align: center;
}

.axion-home .axion-hero__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	max-width: 760px;
}

.axion-home .axion-logo {
	aspect-ratio: 512 / 120;
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
	height: auto;
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
	max-width: min(84vw, 512px);
	object-fit: contain;
	width: min(84vw, 512px);
}

.axion-home .axion-kicker {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.axion-home h1 {
	color: #fff;
	font-size: clamp(2.6rem, 6vw, 5.5rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.02;
	margin: 0;
	max-width: 780px;
}

.axion-home .axion-copy {
	color: rgba(255, 255, 255, 0.78);
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	line-height: 1.65;
	margin: 1.25rem auto 2.2rem;
	max-width: 660px;
}

.axion-home .axion-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.axion-home .axion-button.ui.button {
	border-radius: 6px;
	font-weight: 700;
	margin: 0;
	min-height: 2.9rem;
}

.axion-home .axion-button.ui.primary.button {
	background: #ffffff;
	color: #360437;
}

.axion-home .axion-button.ui.primary.button:hover {
	background: #f0e7f2;
	color: #270229;
}

.axion-home .axion-button.ui.basic.inverted.button {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
	color: #fff !important;
}

@media (max-width: 860px) {
	.axion-home .axion-hero {
		min-height: auto;
		min-height: 100vh;
	}
}

@media (max-width: 520px) {
	.axion-home .axion-hero {
		padding: 2.25rem 1rem;
	}

	.axion-home .axion-actions,
	.axion-home .axion-actions .ui.button {
		width: 100%;
	}
}
