:root {
	/* Cursor + tilt state (updated by app.js) */
	--mx: 50%;
	--my: 50%;
	--rx: 0deg;
	--ry: 0deg;

	/* Dark theme (default) */
	--bg: #0a0e1a;
	--bg-2: #06090f;
	--text: #e9eefc;
	--muted: #a4b3d0;

	--card-bg: rgba(255, 255, 255, 0.045);
	--card-border: rgba(255, 255, 255, 0.1);
	--card-hi: rgba(255, 255, 255, 0.16);
	--shadow: rgba(2, 6, 23, 0.6);

	/* Accent ramp: indigo -> violet -> cyan */
	--i1: #6366f1;
	--i2: #8b5cf6;
	--i3: #22d3ee;
	--grad: linear-gradient(120deg, var(--i1), var(--i2) 42%, var(--i3));

	--spot: rgba(99, 102, 241, 0.2);
	--grid-line: rgba(255, 255, 255, 0.045);
	--chip-bg: rgba(255, 255, 255, 0.05);
	--eyebrow-bg: rgba(99, 102, 241, 0.15);
	--eyebrow-bd: rgba(139, 92, 246, 0.4);
	--focus: rgba(139, 92, 246, 0.65);
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #eef1fb;
		--bg-2: #e4eafb;
		--text: #0b1020;
		--muted: #475569;

		--card-bg: rgba(255, 255, 255, 0.62);
		--card-border: rgba(15, 23, 42, 0.08);
		--card-hi: rgba(255, 255, 255, 0.9);
		--shadow: rgba(30, 41, 90, 0.2);

		--i1: #4f46e5;
		--i2: #7c3aed;
		--i3: #0891b2;

		--spot: rgba(79, 70, 229, 0.16);
		--grid-line: rgba(15, 23, 42, 0.05);
		--chip-bg: rgba(15, 23, 42, 0.04);
		--eyebrow-bg: rgba(79, 70, 229, 0.1);
		--eyebrow-bd: rgba(124, 58, 237, 0.32);
		--focus: rgba(79, 70, 229, 0.55);
	}
}

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	overflow-x: hidden;
	color: var(--text);
	font-family:
		Inter,
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: grid;
	place-items: center;
	background:
		radial-gradient(
			1100px 760px at 50% -12%,
			color-mix(in srgb, var(--i2) 16%, transparent),
			transparent 60%
		),
		linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* ---------- Background layers ---------- */
.bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(
		circle at 50% 42%,
		#000 0%,
		transparent 72%
	);
	mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}

.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(72px);
	opacity: 0.42;
	will-change: transform;
}
.blob-1 {
	width: 560px;
	height: 560px;
	left: 6%;
	top: -130px;
	background: radial-gradient(circle at 30% 30%, var(--i1), transparent 66%);
	animation: float-1 17s ease-in-out infinite;
}
.blob-2 {
	width: 520px;
	height: 520px;
	right: 2%;
	bottom: -150px;
	background: radial-gradient(circle at 70% 70%, var(--i3), transparent 66%);
	animation: float-2 21s ease-in-out infinite;
}
.blob-3 {
	width: 440px;
	height: 440px;
	left: 50%;
	top: 40%;
	opacity: 0.28;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 50%, var(--i2), transparent 66%);
	animation: float-3 25s ease-in-out infinite;
}

@keyframes float-1 {
	50% {
		transform: translate(46px, 64px) scale(1.08);
	}
}
@keyframes float-2 {
	50% {
		transform: translate(-54px, -44px) scale(1.07);
	}
}
@keyframes float-3 {
	50% {
		transform: translateX(-50%) translateY(-34px) scale(1.1);
	}
}

/* Cursor-following glow */
.spotlight {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		420px 420px at var(--mx) var(--my),
		var(--spot),
		transparent 70%
	);
	transition: background 0.12s ease-out;
}

/* ---------- Scene + 3D card ---------- */
.scene {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
	padding: 40px 22px;
	perspective: 1100px;
	animation: enter 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes enter {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card {
	position: relative;
	text-align: center;
	padding: 46px 40px 40px;
	border-radius: 28px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow:
		0 34px 80px -22px var(--shadow),
		inset 0 1px 0 0 var(--card-hi);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Moving light sweep across the glass */
.card-sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(
		600px 280px at var(--mx) 0%,
		color-mix(in srgb, var(--card-hi) 70%, transparent),
		transparent 60%
	);
	opacity: 0.7;
	transform: translateZ(1px);
}

/* Depth layering — children pop as the card tilts */
.logo,
.eyebrow,
.title,
.desc {
	position: relative;
}
.logo {
	transform: translateZ(46px);
}
.eyebrow {
	transform: translateZ(38px);
}
.title {
	transform: translateZ(52px);
}
.desc {
	transform: translateZ(26px);
}

.logo {
	width: 66px;
	height: 66px;
	margin: 0 auto 20px;
	border-radius: 18px;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 23px;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--grad);
	box-shadow: 0 14px 32px -8px color-mix(in srgb, var(--i1) 55%, transparent);
}

.eyebrow {
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.title {
	margin: 14px 0 0;
	font-size: clamp(28px, 4.6vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--text);
}

.desc {
	margin: 18px auto 0;
	max-width: 50ch;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.62;
}

.foot {
	margin-top: 24px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 0.02em;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 6px;
}

@media (max-width: 540px) {
	.card {
		padding: 38px 24px 32px;
		border-radius: 24px;
	}
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
	}
	.card,
	.spotlight {
		transition: none !important;
	}
	.card {
		transform: none !important;
	}
}