:root {
	--wave-blue: #0077be;
	--wave-cyan: #00bcd4;
	--wave-dark: #004c6d;
	--gradient-start: #0077be;
	--gradient-end: #00bcd4;
}

body {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero {
	background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	position: relative;
	overflow: hidden;
	padding: 5rem 0 !important;
	box-shadow: 0 10px 40px rgba(0, 119, 190, 0.3);
}

	.hero::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
		animation: waves 15s ease-in-out infinite;
	}

@keyframes waves {
	0%, 100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-20px);
	}
}

.hero h1, .hero p {
	position: relative;
	z-index: 1;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.hero h1 {
	animation: fadeInDown 1s ease-out;
}

.hero p {
	animation: fadeInUp 1s ease-out 0.3s both;
}

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

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.feature-card {
	border: none;
	border-radius: 20px;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	background: white;
	overflow: hidden;
	position: relative;
}

	.feature-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 5px;
		background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
		transform: scaleX(0);
		transition: transform 0.4s ease;
	}

	.feature-card:hover {
		transform: translateY(-15px) scale(1.02);
		box-shadow: 0 20px 60px rgba(0, 119, 190, 0.25) !important;
	}

		.feature-card:hover::before {
			transform: scaleX(1);
		}

.feature-icon {
	font-size: 3.5rem;
	transition: all 0.4s ease;
	display: inline-block;
}

.feature-card:hover .feature-icon {
	transform: scale(1.2) rotate(5deg);
}

.btn {
	border-radius: 50px;
	padding: 12px 30px;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

	.btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		transform: translate(-50%, -50%);
		transition: width 0.6s, height 0.6s;
	}

	.btn:hover::before {
		width: 300px;
		height: 300px;
	}

	.btn:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}

.coming-soon {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 20px;
	animation: pulse 2s ease-in-out infinite;
}

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

	50% {
		transform: scale(1.02);
	}
}

.coming-soon .badge {
	font-size: 0.9rem;
	padding: 8px 20px;
	border-radius: 50px;
	animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

.card-body {
	padding: 2rem;
}

.card-title {
	font-weight: 700;
	margin-bottom: 1rem;
	color: #2c3e50;
}

.card-text {
	color: #555;
	line-height: 1.6;
}

.coming-soon .card-title,
.coming-soon .card-text {
	color: white;
}

section {
	animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.hero {
		padding: 3rem 0 !important;
	}

	.feature-icon {
		font-size: 2.5rem;
	}
}