/* Clip decorative glows so they can never expand the document box */
.home-hero--section {
	overflow: hidden;
}

/* Lift container above the decorative glows behind it */
.home-hero--container {
	position: relative;
}

.home-hero--display {
	margin-bottom: 40px;
	transition: transform 0.8s ease-out;
}

/* Decorative glows — resting positions set here so first paint matches settled state.
   JS only animates transform (compositor-only, no layout/CLS impact). */
.lwh-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	transition: transform 1.5s ease-out;
}

.lwh-hero-glow--a {
	width: 600px;
	height: 600px;
	left: 20%;
	top: -5%;
	background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
	opacity: 0.08;
}

.lwh-hero-glow--b {
	width: 500px;
	height: 500px;
	right: 12.5%;
	bottom: -5%;
	background: radial-gradient(circle, var(--accent-2) 0%, transparent 60%);
	opacity: 0.06;
}

/* Hero meta row */
.lwh-hero-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 80px;
	font-family: var(--font-mono, monospace);
	font-size: 11px;
	color: var(--fg-3);
}

/* Hero CTA row */
.lwh-hero-cta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: end;
	margin-bottom: 40px;
}

.lwh-hero-cta-row__btns {
	display: flex;
	gap: 14px;
	justify-content: flex-end;
	align-items: center;
}

/* Hero subcopy */
.lwh-hero-sub {
	font-size: 20px;
	line-height: 1.5;
	color: var(--fg-2);
	max-width: 520px;
	text-wrap: pretty;
}

/* Responsive */
@media (max-width: 820px) {
	.lwh-hero-meta {
		flex-direction: column;
		gap: 6px;
		align-items: flex-start;
		margin-bottom: 40px;
	}
	.lwh-hero-cta-row {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.lwh-hero-cta-row__btns {
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.lwh-hero-glow {
		max-width: 80vw;
		max-height: 80vw;
	}
}

@media (max-width: 560px) {
	.lwh-hero-cta-row__btns {
		flex-direction: column;
		align-items: stretch;
	}
	.lwh-hero-cta-row__btns > * {
		width: 100%;
		justify-content: center;
	}
}