/* Button Components */
.btn {
    @apply px-6 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center
    shadow-sm hover:shadow-md transform hover:-translate-y-0.5;
}

.btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-indigo-600 text-white 
    hover:from-purple-700 hover:to-indigo-700 shadow-lg hover:shadow-xl;
}

.btn-ghost {
    @apply bg-transparent text-gray-700 hover:text-purple-600 hover:bg-purple-50;
}

.btn-outline {
    @apply border-2 border-purple-600 text-purple-600 hover:bg-purple-50 
    hover:shadow-lg transition-all duration-300;
}

.btn-lg {
    @apply px-10 py-4 text-lg font-bold;
}

/* Custom Base Styles */
.documind-container {
    @apply min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50;
}

/* Navigation Styles */
.nav-container {
    @apply bg-white/80 backdrop-blur-md border-b border-gray-200/50 sticky top-0 z-50;
}

.nav-content {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.nav-wrapper {
    @apply flex justify-between h-16 items-center;
}

.logo-container {
    @apply flex items-center space-x-3 cursor-pointer;
}

.logo-text {
    @apply text-2xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 
    bg-clip-text text-transparent group-hover:from-purple-700 group-hover:to-indigo-700 
    transition-all duration-300;
}

.nav-links {
    @apply flex items-center space-x-6;
}

/* Hero Section Styles */
.hero-section {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center;
}

.hero-content {
    @apply relative;
}

.hero-title {
    @apply text-6xl md:text-7xl font-extrabold mb-8 leading-tight;
    background: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hero-description {
    @apply text-xl md:text-2xl text-gray-600 mb-12 max-w-4xl mx-auto leading-relaxed;
}

.hero-buttons {
    @apply flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6;
}

/* Features Section Styles */
.features-section {
    @apply py-24 bg-gradient-to-b from-white to-gray-50/50;
}

.features-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.features-title {
    @apply text-4xl md:text-5xl font-bold text-center mb-4;
    background: linear-gradient(135deg, #1f2937 0%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-subtitle {
    @apply text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto;
}

.features-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12;
}

/* Enhanced Feature Card Styles */
.feature-card {
    @apply bg-white p-8 rounded-2xl shadow-lg border border-gray-100
    hover:shadow-2xl hover:border-purple-200 transition-all duration-500
    transform hover:-translate-y-2;
}

.feature-icon {
    @apply mb-6 w-16 h-16 bg-gradient-to-br from-purple-100 to-indigo-100 
    rounded-2xl flex items-center justify-center transition-transform duration-300;
}

.feature-card:hover .feature-icon {
    @apply scale-110;
}

.feature-title {
    @apply text-2xl font-bold text-gray-900 mb-4 transition-colors duration-300;
}

.feature-card:hover .feature-title {
    @apply text-purple-600;
}

.feature-description {
    @apply text-gray-600 leading-relaxed text-lg;
}

/* Enhanced Benefits Section Styles */
.benefits-section {
    @apply py-24 bg-gradient-to-br from-slate-900 via-purple-900 to-indigo-900 
    relative overflow-hidden;
}

.benefits-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" style="stop-color:rgba(168,85,247,0.1)"/><stop offset="100%" style="stop-color:rgba(168,85,247,0)"/></radialGradient></defs><circle cx="250" cy="250" r="200" fill="url(%23a)"/><circle cx="750" cy="750" r="300" fill="url(%23a)"/></svg>');
    opacity: 0.3;
}

.benefits-grid {
    @apply relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 
    grid grid-cols-1 lg:grid-cols-2 gap-16 items-center;
}

.benefits-content {
    @apply space-y-8;
}

.benefits-title {
    @apply text-4xl md:text-5xl font-bold text-white mb-6 leading-tight;
}

.benefits-subtitle {
    @apply text-xl text-gray-300 mb-8 leading-relaxed;
}

.benefits-list {
    @apply space-y-6;
}

.benefit-item {
    @apply flex items-start space-x-4 p-4 rounded-xl 
    bg-white/5 backdrop-blur-sm border border-white/10
    hover:bg-white/10 transition-all duration-300;
}

.benefit-icon {
    @apply w-6 h-6 text-green-400 mt-1 flex-shrink-0;
}

.benefit-content {
    @apply space-y-2;
}

.benefit-title {
    @apply text-lg font-semibold text-white;
}

.benefit-text {
    @apply text-gray-300 leading-relaxed;
}

/* Enhanced Demo Container Styles */
.demo-container {
    @apply relative;
}

.demo-card {
    @apply bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20
    shadow-2xl hover:bg-white/15 transition-all duration-500;
}

.demo-header {
    @apply text-center mb-8;
}

.demo-title {
    @apply text-2xl font-bold text-white mb-4;
}

.demo-description {
    @apply text-gray-300 leading-relaxed;
}

.demo-visual {
    @apply bg-gradient-to-br from-purple-500/20 to-indigo-500/20 
    rounded-xl h-64 flex items-center justify-center border border-white/10;
}

.demo-placeholder {
    @apply text-white/60 text-lg font-medium;
}

.stats-grid {
    @apply grid grid-cols-3 gap-6 mt-8;
}

.stat-item {
    @apply text-center;
}

.stat-number {
    @apply text-3xl font-bold text-white mb-2;
}

.stat-label {
    @apply text-sm text-gray-300 uppercase tracking-wide;
}

/* CTA Section */
.cta-section {
    @apply py-20 bg-gradient-to-r from-purple-600 to-indigo-600;
}

.cta-container {
    @apply max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8;
}

.cta-title {
    @apply text-4xl md:text-5xl font-bold text-white mb-6;
}

.cta-description {
    @apply text-xl text-purple-100 mb-8 max-w-2xl mx-auto;
}

.cta-buttons {
    @apply flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6;
}

/* Icon Styles */
.icon-purple {
    @apply w-8 h-8 text-purple-600 transition-colors duration-300;
}

.feature-card:hover .icon-purple {
    @apply text-purple-700;
}

.icon-check {
    @apply w-6 h-6 text-green-400;
}

.icon-hero {
    @apply w-12 h-12 text-purple-600;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.slide-up {
    animation: slideUp 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        @apply text-4xl;
    }
    
    .hero-description {
        @apply text-lg;
    }
    
    .benefits-grid {
        @apply grid-cols-1 gap-8;
    }
    
    .features-grid {
        @apply gap-6;
    }
}