:root {
	--ember: #667eea;
	--lagoon: #2aa3a6;
	--sand: #e2e6f5;
	--sky: #d5dced;
}

.text-gradient {
	color: var(--ember);
	background: linear-gradient(120deg, #0f172a, #2aa3a6, var(--ember));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.text-gradient {
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.bg-grid {
	background-image:
		linear-gradient(to right, rgba(102, 126, 234, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(102, 126, 234, 0.08) 1px, transparent 1px);
	background-size: 42px 42px;
}

.glass-card {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(148, 163, 184, 0.25);
	box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(18px);
}

.card-hover {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
}

.details-reset summary {
	list-style: none;
}

.details-reset summary::-webkit-details-marker {
	display: none;
}

.details-reset .details-icon {
	transition: transform 0.2s ease;
}

.details-reset[open] .details-icon {
	transform: rotate(45deg);
}

.range-ember {
	accent-color: var(--ember);
}

.animate-fade-up {
	animation: fade-up 0.9s ease-out both;
}

.animate-fade-up-delay-1 {
	animation: fade-up 0.9s ease-out 0.2s both;
}

.animate-fade-up-delay-2 {
	animation: fade-up 0.9s ease-out 0.4s both;
}

.animate-float {
	animation: float 8s ease-in-out infinite;
}

.animate-float-slow {
	animation: float 12s ease-in-out infinite;
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-16px);
	}
}