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

/* Custom CSS Variables */
:root {
	--primary-blue: #2563eb;
	--primary-green: #16a34a;
	--secondary-gray: #64748b;
	--light-gray: #f8fafc;
	--dark-gray: #1e293b;
}

/* Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height: 1.6;
	color: var(--dark-gray);
	background-color: white;
}

/* Custom Components */
.btn-primary {
	@apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
}

.btn-secondary {
	@apply bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
}

.btn-outline {
	@apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200;
}

.feature-card {
	@apply bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100;
	/* Ensure equal height cards */
	display: flex;
	flex-direction: column;
}

.testimonial-card {
	@apply bg-white p-6 rounded-xl shadow-lg border border-gray-100;
}

/* Badges */
.badge {
	@apply inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium;
}
.badge-outline-light {
	@apply border border-white/60 text-white/90;
	background-color: rgba(255,255,255,0.08);
}
.badge-outline-dark {
	@apply border border-gray-300 text-gray-700;
	background-color: rgba(255,255,255,0);
}

/* Header Styles */
.header-glass {
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Hero Section */
.hero-gradient {
	background: linear-gradient(135deg, #2563eb 0%, #16a34a 100%);
}

.hero-illustration {
	position: relative;
	border-radius: 1rem;
	background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
	border: 1px solid rgba(255,255,255,0.25);
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	backdrop-filter: blur(6px);
}

.hero-illustration::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 1.1rem;
	background: radial-gradient(800px 200px at 20% 0%, rgba(255,255,255,0.25), transparent 40%),
		radial-gradient(600px 200px at 90% 20%, rgba(255,255,255,0.15), transparent 35%);
	pointer-events: none;
}

.mock-window {
	@apply bg-white rounded-xl overflow-hidden;
}
.mock-window-header {
	@apply flex items-center gap-2 px-4 py-2 bg-gray-100 border-b border-gray-200;
}
.mock-dot { width: 10px; height: 10px; border-radius: 9999px; }
.mock-dot.red { background: #ef4444; }
.mock-dot.amber { background: #f59e0b; }
.mock-dot.green { background: #10b981; }
.mock-content {
	@apply grid grid-cols-1 md:grid-cols-2 gap-4 p-4;
}
.mock-card {
	@apply rounded-lg border border-gray-200 p-4 shadow-sm;
}
.mock-pill { @apply inline-flex items-center gap-2 rounded-full px-2 py-1 text-xs font-medium bg-blue-50 text-blue-700; }
.mock-kpi { @apply text-2xl font-bold text-gray-800; }

/* Feature Icons */
.feature-icon {
	@apply w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl mb-6;
}

.feature-icon-blue {
	@apply bg-blue-600;
}

.feature-icon-green {
	@apply bg-green-600;
}

.feature-icon-purple {
	@apply bg-purple-600;
}

.feature-icon-orange {
	@apply bg-orange-600;
}

/* FAQ Styles */
.faq-item {
	@apply border border-gray-200 rounded-lg mb-4 bg-white shadow-sm;
}

.faq-question {
	@apply w-full text-left p-6 font-semibold text-gray-800 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors duration-200 flex items-center justify-between gap-4;
}

.faq-answer {
	@apply text-gray-600 border-t border-gray-200;
	max-height: 0;
	padding: 0 1.5rem;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
	max-height: 1000px; /* sufficient for content */
	padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.faq-item .chevron { transition: transform 0.25s ease; }
.faq-item.open .chevron { transform: rotate(180deg); }

/* Contact Form */
.form-input {
	@apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.form-textarea {
	@apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-vertical;
}

/* Loading States */
.loading {
	@apply opacity-50 cursor-not-allowed;
}

/* Mobile Menu */
.mobile-menu {
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	background-color: white;
}

.mobile-menu.open {
	transform: translateX(0);
}

.mobile-menu-overlay {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}

.mobile-menu-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

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

.animate-fade-in-up {
	animation: fadeInUp 0.6s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
	.hero-gradient {
		padding: 3rem 1rem;
	}
	
	.feature-card {
		@apply p-6;
	}
	
	.btn-primary,
	.btn-secondary,
	.btn-outline {
		@apply py-3 px-5 text-sm;
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Focus Styles */
.focus-visible:focus {
	@apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Print Styles */
@media print {
	.no-print {
		display: none !important;
	}
}