.hero-viewport {
	position: relative;
	min-height: clamp(380px, 46vh, 540px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	padding: 1rem 1rem;
	z-index: 1;
	isolation: isolate;
}

.hero-viewport::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10rem;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(10, 14, 39, 0.25) 35%,
		rgba(10, 14, 39, 0.6) 65%,
		rgba(10, 14, 39, 0.9) 85%,
		#0a0e27 100%
	);
	z-index: 10;
	pointer-events: none;
}

.hero-layers {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.space-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 120% 80% at 50% 110%, rgba(34, 197, 94, 0.08), transparent 60%),
		radial-gradient(ellipse 90% 60% at 20% 80%, rgba(56, 189, 248, 0.06), transparent 50%),
		radial-gradient(ellipse 80% 70% at 80% 70%, rgba(139, 92, 246, 0.05), transparent 50%),
		radial-gradient(ellipse at bottom, #0d2137 0%, #060a18 100%);
	z-index: 0;
}

.nebula-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	will-change: transform, opacity;
	mix-blend-mode: screen;
}

.nebula-1 {
	width: 600px; height: 400px;
	top: 10%; left: -5%;
	background: radial-gradient(ellipse, rgba(34, 197, 94, 0.12), transparent 70%);
	animation: nebulaDrift1 25s ease-in-out infinite;
}

.nebula-2 {
	width: 500px; height: 350px;
	bottom: 5%; right: -8%;
	background: radial-gradient(ellipse, rgba(56, 189, 248, 0.09), transparent 70%);
	animation: nebulaDrift2 30s ease-in-out infinite;
}

.nebula-3 {
	width: 400px; height: 300px;
	top: 40%; left: 30%;
	background: radial-gradient(ellipse, rgba(139, 92, 246, 0.07), transparent 70%);
	animation: nebulaDrift3 20s ease-in-out infinite;
}

@keyframes nebulaDrift1 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
	50%      { transform: translate3d(40px, -20px, 0) scale(1.1); opacity: 1; }
}
@keyframes nebulaDrift2 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; }
	50%      { transform: translate3d(-30px, 15px, 0) scale(1.08); opacity: 0.9; }
}
@keyframes nebulaDrift3 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
	50%      { transform: translate3d(20px, 25px, 0) scale(1.12); opacity: 0.8; }
}

.stars-layer {
	position: absolute;
	top: -300px; left: -300px; right: -300px; bottom: -300px;
	will-change: transform;
}

.stars-slow {
	--base-o: 0.45;
	opacity: 0.45;
	background-image:
		radial-gradient(1px 1px at 47% 53%, rgba(255,255,255,0.9), transparent),
		radial-gradient(0.7px 0.7px at 23% 78%, rgba(255,240,220,0.7), transparent),
		radial-gradient(0.9px 0.9px at 71% 29%, rgba(220,230,255,0.6), transparent);
	background-size: 263px 263px, 349px 349px, 197px 197px;
	background-position: 0 0, 80px 140px, 170px 50px;
	animation: starsA 300s linear infinite, twinkle 8s ease-in-out infinite;
}

.stars-medium {
	--base-o: 0.5;
	opacity: 0.5;
	background-image:
		radial-gradient(1.1px 1.1px at 52% 48%, rgba(200,225,255,0.85), transparent),
		radial-gradient(0.8px 0.8px at 78% 68%, rgba(255,255,255,0.65), transparent),
		radial-gradient(0.6px 0.6px at 33% 22%, rgba(180,255,210,0.6), transparent);
	background-size: 311px 311px, 227px 227px, 389px 389px;
	background-position: 60px 20px, 150px 110px, 30px 200px;
	animation: starsB 220s linear infinite, twinkle 6s ease-in-out infinite 2s;
}

.stars-fast {
	--base-o: 0.6;
	opacity: 0.6;
	background-image:
		radial-gradient(1.3px 1.3px at 44% 56%, rgba(255,255,255,0.95), transparent),
		radial-gradient(0.7px 0.7px at 82% 18%, rgba(180,255,200,0.7), transparent),
		radial-gradient(0.9px 0.9px at 19% 73%, rgba(200,210,255,0.6), transparent);
	background-size: 283px 283px, 337px 337px, 199px 199px;
	background-position: 100px 80px, 200px 30px, 40px 160px;
	animation: starsC 160s linear infinite, twinkle 5s ease-in-out infinite 1s;
}

@keyframes starsA {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-263px, 197px, 0); }
}
@keyframes starsB {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(227px, 311px, 0); }
}
@keyframes starsC {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(199px, -283px, 0); }
}

@keyframes twinkle {
	0%, 100% { opacity: var(--base-o); }
	50%      { opacity: calc(var(--base-o) + 0.2); }
}

.stars-twinkle-canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero-grid {
	position: absolute;
	inset: 0;
	will-change: transform;
	background-image:
		linear-gradient(rgba(34, 197, 94, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 197, 94, 0.06) 1px, transparent 1px);
	background-size: 60px 60px;
	opacity: 0.5;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, black 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, black 20%, transparent 80%);
	animation: gridPan 35s linear infinite;
	z-index: 1;
}

@keyframes gridPan {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, 60px, 0); }
}

.hero-layers.paused .stars-slow,
.hero-layers.paused .stars-medium,
.hero-layers.paused .stars-fast,
.hero-layers.paused .hero-grid,
.hero-layers.paused .nebula-1,
.hero-layers.paused .nebula-2,
.hero-layers.paused .nebula-3 {
	animation-play-state: paused;
}

/* Occasional digital glitch bursts in the background (composited: transform + opacity only).
   Two layers on different prime-ish cycles so the bursts feel irregular. */
.hero-glitch {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
	mix-blend-mode: screen;
}

/* Ghost copy of the grid, chromatic-shifted, jumps during a burst */
.hero-glitch-a {
	background-image:
		linear-gradient(rgba(34, 197, 94, 0.35) 2px, transparent 2px),
		linear-gradient(90deg, rgba(56, 189, 248, 0.28) 2px, transparent 2px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, black 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, black 20%, transparent 80%);
	animation: heroGlitchA 6.1s steps(1, end) infinite;
}

/* Thin horizontal "corrupted data" bars that flash and shear sideways */
.hero-glitch-b {
	background: repeating-linear-gradient(to bottom,
		transparent 0px, transparent 90px,
		rgba(34, 197, 94, 0.22) 90px, rgba(34, 197, 94, 0.22) 98px,
		transparent 98px, transparent 160px,
		rgba(56, 189, 248, 0.18) 160px, rgba(56, 189, 248, 0.18) 166px,
		transparent 166px, transparent 260px
	);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 85%);
	animation: heroGlitchB 9.7s steps(1, end) infinite;
}

@keyframes heroGlitchA {
	0%, 21%   { opacity: 0; transform: translate3d(0, 0, 0); }
	21.5%     { opacity: 1; transform: translate3d(-18px, 6px, 0); }
	22.3%     { opacity: 0.5; transform: translate3d(14px, -4px, 0); }
	23.1%     { opacity: 1; transform: translate3d(-8px, 2px, 0); }
	23.9%     { opacity: 0.7; transform: translate3d(11px, -6px, 0); }
	24.7%     { opacity: 0; transform: translate3d(0, 0, 0); }
	53%       { opacity: 0; }
	53.5%     { opacity: 0.6; transform: translate3d(9px, -3px, 0); }
	54.3%     { opacity: 0; transform: translate3d(0, 0, 0); }
	80%       { opacity: 0; }
	80.5%     { opacity: 0.9; transform: translate3d(16px, -6px, 0); }
	81.3%     { opacity: 0.45; transform: translate3d(-12px, 4px, 0); }
	82.1%     { opacity: 1; transform: translate3d(6px, -2px, 0); }
	82.9%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes heroGlitchB {
	0%, 32%   { opacity: 0; transform: translate3d(0, 0, 0); }
	32.4%     { opacity: 1; transform: translate3d(30px, 0, 0); }
	33.1%     { opacity: 0.45; transform: translate3d(-24px, 3px, 0); }
	33.8%     { opacity: 1; transform: translate3d(12px, 0, 0); }
	34.5%     { opacity: 0.6; transform: translate3d(-18px, -2px, 0); }
	35.2%     { opacity: 0; transform: translate3d(0, 0, 0); }
	62%       { opacity: 0; }
	62.4%     { opacity: 0.7; transform: translate3d(-16px, 0, 0); }
	63.1%     { opacity: 0; transform: translate3d(0, 0, 0); }
	87%       { opacity: 0; }
	87.4%     { opacity: 0.9; transform: translate3d(-28px, 0, 0); }
	88.1%     { opacity: 0.4; transform: translate3d(20px, 2px, 0); }
	88.8%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

.hero-content {
	position: relative;
	z-index: 5;
	color: #e6eef0;
	max-width: 750px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero-content h1 {
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	line-height: 1.05;
	margin: 0 0 0.35rem 0;
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.025em;
	text-shadow:
		0 0 60px rgba(34, 197, 94, 0.25),
		0 2px 12px rgba(0, 0, 0, 0.4);
}

.hero-content .lead {
	color: #cbd5e1;
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	margin-bottom: 2rem;
	line-height: 1.6;
}

.hero-ctas {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.hero-primary {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	color: #fff;
	border: none;
	padding: 1rem 2.25rem;
	border-radius: 0;
	font-weight: 700;
	font-size: 1.05rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	box-shadow:
		0 0 0 1px rgba(34, 197, 94, 0.25),
		0 8px 30px rgba(34, 197, 94, 0.35),
		0 0 80px rgba(34, 197, 94, 0.15);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.hero-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
	transform: translate3d(-100%, 0, 0);
	animation: btnShimmer 4.2s ease-in-out infinite 2s;
	pointer-events: none;
}

@keyframes btnShimmer {
	0%   { transform: translate3d(-100%, 0, 0); }
	25%  { transform: translate3d(120%, 0, 0); }
	100% { transform: translate3d(120%, 0, 0); }
}

.hero-primary:hover {
	color: #fff;
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 0 0 1px rgba(34, 197, 94, 0.4),
		0 16px 50px rgba(34, 197, 94, 0.45),
		0 0 100px rgba(34, 197, 94, 0.2);
}

.hero-primary:focus-visible {
	outline: 2px solid #22c55e;
	outline-offset: 3px;
}

.hero-primary svg {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-primary:hover svg {
	transform: translateX(5px);
}

.hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.6rem;
	border-radius: 0;
	color: rgba(229, 231, 235, 0.95);
	background: rgba(17, 24, 39, 0.5);
	border: 1px solid rgba(148, 163, 184, 0.25);
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	transition:
		transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.25s ease,
		background 0.25s ease,
		color 0.25s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.hero-secondary:hover {
	transform: translateY(-2px);
	color: #e6ffe8;
	border-color: rgba(34, 197, 94, 0.45);
	background: rgba(20, 40, 30, 0.55);
}
.hero-secondary:focus-visible {
	outline: 2px solid #22c55e;
	outline-offset: 3px;
}

@media (max-width: 1189px) {
	.hero-viewport {
		min-height: auto;
		padding: 3rem 1rem 2rem;
	}
	.nebula-1 { width: 350px; height: 250px; filter: blur(60px); }
	.nebula-2 { width: 300px; height: 200px; filter: blur(60px); }
	.nebula-3 { width: 250px; height: 180px; filter: blur(50px); }
}

@media (max-width: 768px) {
	.hero-ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 0.8rem;
		width: 100%;
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
	.hero-primary,
	.hero-secondary {
		justify-content: center;
		width: 100%;
		padding: 1.15rem 2rem;
		font-size: 1.05rem;
	}
}

.hero-layers.paused .hero-glitch {
	animation-play-state: paused;
	/* !important beats the keyframe value, so a mid-burst freeze never stays visible */
	opacity: 0 !important;
}

/* Scroll pause also stops the CTA shimmer (class set by the hero scroll handler) */
.hero-viewport.hero-anim-paused .hero-primary::before {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.stars-slow,
	.stars-medium,
	.stars-fast,
	.hero-grid,
	.nebula-1,
	.nebula-2,
	.nebula-3 {
		animation: none !important;
	}
	.hero-glitch {
		display: none !important;
	}
	.stars-twinkle-canvas {
		display: none !important;
	}
	.hero-primary,
	.hero-primary::before {
		animation: none !important;
		transition: none !important;
	}
}