:root {
	--bg: #05070f;
	--bg-2: #0a1024;
	--blue: #0040c0;
	--blue-bright: #2e6bff;
	--cyan: #21e6ff;
	--red: #ff2740;
	--red-soft: #ff5b6b;
	--grey: #aab2c5;
	--white: #f5f8ff;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Space Grotesk", var(--font-body);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	position: relative;
	min-height: 100dvh;
	overflow-x: hidden;
	background:
		radial-gradient(1200px 800px at 50% -10%, #101a3f 0%, transparent 60%),
		radial-gradient(1000px 700px at 90% 110%, #1a0a1f 0%, transparent 55%),
		var(--bg);
	color: var(--white);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
}

/* ---------- Background layers ---------- */

#neural {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
}

.aurora {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	filter: blur(60px);
	opacity: 0.55;
}

.blob {
	position: absolute;
	width: 48vw;
	height: 48vw;
	border-radius: 50%;
	mix-blend-mode: screen;
	will-change: transform;
}

.blob--blue {
	background: radial-gradient(circle, var(--blue-bright), transparent 65%);
	top: -10%;
	left: -8%;
	animation: drift1 18s ease-in-out infinite;
}

.blob--red {
	background: radial-gradient(circle, var(--red), transparent 65%);
	bottom: -15%;
	right: -10%;
	animation: drift2 21s ease-in-out infinite;
}

.blob--cyan {
	background: radial-gradient(circle, var(--cyan), transparent 60%);
	top: 35%;
	left: 55%;
	width: 32vw;
	height: 32vw;
	opacity: 0.6;
	animation: drift3 30s ease-in-out infinite;
}

@keyframes drift1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25%      { transform: translate(10vw, 8vh) scale(1.12); }
	50%      { transform: translate(4vw, 16vh) scale(1.05); }
	75%      { transform: translate(13vw, 4vh) scale(1.18); }
}
@keyframes drift2 {
	0%, 100% { transform: translate(0, 0) scale(1.05); }
	25%      { transform: translate(-9vw, -6vh) scale(0.95); }
	50%      { transform: translate(-15vw, 5vh) scale(1.1); }
	75%      { transform: translate(-5vw, -11vh) scale(0.98); }
}
@keyframes drift3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-6vw, 7vh) scale(1.2); }
}

.grid-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(120, 150, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 150, 255, 0.05) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: radial-gradient(circle at 50% 45%, black 10%, transparent 72%);
	-webkit-mask-image: radial-gradient(circle at 50% 45%, black 10%, transparent 72%);
}

/* ---------- Content ---------- */

.stage {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: clamp(0.9rem, 2.4vh, 1.8rem);
	padding: 7vh 6vw 4vh;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-display);
	font-size: clamp(0.62rem, 1.1vw, 0.8rem);
	letter-spacing: 0.32em;
	font-weight: 500;
	color: var(--grey);
	padding: 0.55em 1.1em;
	border: 1px solid rgba(120, 150, 255, 0.25);
	border-radius: 999px;
	background: rgba(10, 16, 36, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: riseUp 0.9s 0s ease both, fadeLinear 0.9s 0s linear both; /* row 1 of 6 */
}

.badge__dot {
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
	animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.7); }
}

.logo {
	width: clamp(11em, 17vw, 17em);
	height: auto;
	border-radius: 6px;
	box-shadow: 0 0 40px rgba(46, 107, 255, 0.45);
	animation: riseUp 0.9s 0.3s ease both, fadeLinear 0.9s 0.3s linear both; /* row 2 of 6 */
}

.title {
	margin: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;
	column-gap: clamp(0.5rem, 1.4vw, 1.1rem);
	row-gap: 0.2rem;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.1;
	/* nudge the caption down half a line without moving anything else */
	transform: translateY(0.55em);
	/* row 3 of 6: animate the whole caption in as a single line */
	animation: riseUpTitle 0.9s 0.6s ease both, fadeLinear 0.9s 0.6s linear both;
}

/* keeps the half-line offset while still fading up */
@keyframes riseUpTitle {
	from { transform: translateY(calc(0.55em + 60vh)); }
	to   { transform: translateY(0.55em); }
}

.title .word {
	white-space: nowrap;
}

.title b {
	color: var(--red);
	font-size: clamp(1.1rem, 2.4vw, 2rem);
	font-weight: 700;
	text-shadow: 0 0 14px rgba(255, 39, 64, 0.6), 0 0 30px rgba(255, 39, 64, 0.3);
}

.title .word > span {
	color: var(--grey);
	font-size: clamp(1rem, 2.1vw, 1.8rem);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.one {
	position: relative;
	font-family: var(--font-display);
	font-weight: 700;
	animation: riseUp 0.9s 0.9s ease both, fadeLinear 0.9s 0.9s linear both; /* row 4 of 6 */
}

.one span {
	font-size: clamp(3.4rem, 11vw, 9rem);
	letter-spacing: 0.12em;
	background: linear-gradient(120deg, var(--red) 0%, var(--red-soft) 35%, #ffffff 50%, var(--blue-bright) 70%, var(--cyan) 100%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 26px rgba(255, 39, 64, 0.35));
	animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
	to { background-position: 220% center; }
}

.tagline {
	margin: 0;
	max-width: 30ch;
	color: var(--grey);
	font-size: clamp(0.95rem, 1.8vw, 1.3rem);
	font-weight: 300;
	line-height: 1.5;
	animation: riseUp 0.9s 1.2s ease both, fadeLinear 0.9s 1.2s linear both; /* row 5 of 6 */
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	margin-top: 0.4rem;
	animation: riseUp 0.9s 1.5s ease both, fadeLinear 0.9s 1.5s linear both; /* row 6 of 6 */
}

.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(0.85rem, 1.4vw, 1rem);
	letter-spacing: 0.03em;
	padding: 0.85em 1.7em;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	will-change: transform;
}

.cta--primary {
	color: var(--white);
	background: linear-gradient(120deg, var(--blue) 0%, var(--blue-bright) 55%, var(--cyan) 130%);
	box-shadow: 0 8px 30px rgba(46, 107, 255, 0.45);
}
.cta--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(46, 107, 255, 0.65);
}

.cta--ghost {
	color: var(--white);
	border: 1px solid rgba(170, 178, 197, 0.4);
	background: rgba(10, 16, 36, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.cta--ghost:hover {
	transform: translateY(-2px);
	border-color: var(--cyan);
	box-shadow: 0 0 24px rgba(33, 230, 255, 0.25);
}

.footer {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 0.7rem;
	align-items: center;
	justify-content: center;
	padding: 1.6rem;
	color: rgba(170, 178, 197, 0.6);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}
.footer__sep { opacity: 0.5; }

/* Motion stays eased (nice travel feel); opacity is a separate LINEAR fade so
 * the row is transparent at the bottom and becomes visible evenly as it rises. */
@keyframes riseUp {
	from { transform: translateY(60vh); }
	to   { transform: translateY(0); }
}
@keyframes fadeLinear {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.one span { background-position: 0 center; }
}