@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
	font-family: 'Poppins', sans-serif;
	background: linear-gradient(120deg, #f0f4ff, #e6e6ff);
	min-height: 100vh;
}

.glass-effect {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.gradient-bg {
	background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
}

.pinterest-bg {
	background: linear-gradient(135deg, #E60023, #A50A19, #700F16);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
}

.facebook-bg {
	background: linear-gradient(135deg, #1877F2, #0E5CAD, #09428C);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
}

.youtube-bg {
	background: linear-gradient(135deg, #FF0000, #CC0000, #990000);
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.clip-path-hero {
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.platform-icon {
	transition: all 0.3s ease;
	filter: grayscale(50%);
}

.platform-icon:hover {
	transform: scale(1.1);
	filter: grayscale(0%);
}

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

.step-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.step-card:hover::before {
	opacity: 0.1;
}

.feature-card {
	transition: all 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-5px);
}

.navbar {
	transition: all 0.3s ease;
}

.navbar.scrolled {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.download-input {
	transition: all 0.3s ease;
}

.download-input:focus {
\tbox-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.page {
	display: none;
	animation: fadeIn 0.5s ease forwards;
}

.page.active {
	display: block;
}

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

.admin-sidebar {
	min-height: calc(100vh - 70px);
}

.admin-card {
	transition: all 0.3s ease;
}

.admin-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.blog-card {
	transition: all 0.3s ease;
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.nav-platform {
	position: relative;
	padding: 0.5rem 1rem;
	transition: all 0.3s ease;
}

.nav-platform::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: currentColor;
	transition: width 0.3s ease;
}

.nav-platform:hover::after {
	width: 100%;
}

.platform-header {
	background-size: 200% 200%;
	animation: gradient 15s ease infinite;
}