body {
	font-family:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
		'Ubuntu', sans-serif;
	background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0a 50%);
}

nav {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

nav.scrolled {
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	background: rgba(10, 10, 10, 0.95);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gradient-text {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.btn-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	position: relative;
	overflow: hidden;
}

.btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.2),
		transparent
	);
	transition: left 0.5s;
}

.btn-primary:hover::before {
	left: 100%;
}

.btn-primary:hover {
	box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
	transform: translateY(-2px);
}

.stat-number,
.logo,
.footer-logo {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.feature-icon {
	background: linear-gradient(
		135deg,
		rgba(102, 126, 234, 0.15) 0%,
		rgba(118, 75, 162, 0.15) 100%
	);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.feature-card {
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #667eea, transparent);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.feature-card:hover::before {
	transform: translateX(100%);
}

.stat-card {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.03) 0%,
		rgba(255, 255, 255, 0.01) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
}

.stat-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), transparent);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s;
}

.stat-card:hover::after {
	opacity: 1;
}

.cta-section {
	background: linear-gradient(
		135deg,
		rgba(102, 126, 234, 0.08) 0%,
		rgba(118, 75, 162, 0.08) 100%
	);
	position: relative;
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(102, 126, 234, 0.1),
		transparent 70%
	);
}

.grid-bg {
	background-image:
		linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
	background-size: 50px 50px;
}

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

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

.hero-badge {
	animation:
		fadeInDown 0.8s ease,
		float 3s ease-in-out infinite;
}

.hero h1 {
	animation: fadeInUp 0.8s ease;
}

.hero p {
	animation: fadeInUp 0.8s ease 0.2s backwards;
}

.hero-cta {
	animation: fadeInUp 0.8s ease 0.4s backwards;
}

.section-divider {
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(102, 126, 234, 0.3),
		transparent
	);
	margin: 4rem 0;
}

.animate-in {
	opacity: 1 !important;
	transform: translateY(0) !important;
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}