---
// Features section with card grid
---

<section id="features" class="py-24 lg:py-40 bg-gradient-to-b from-background via-card/30 to-background relative overflow-hidden">
	<!-- Enhanced Background decoration -->
	<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-20"></div>
	<div class="gradient-blob bg-primary w-[400px] h-[400px] top-20 left-10 animate-float parallax-slow"></div>
	<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-20 right-10 animate-float parallax-slow" style="animation-delay: 3s"></div>
	<div class="gradient-blob bg-trackeep-blue w-[300px] h-[300px] top-1/2 right-1/4 animate-float parallax-slow" style="animation-delay: 1.5s"></div>
	<div class="gradient-blob bg-trackeep-green w-[250px] h-[250px] bottom-1/3 left-1/4 animate-float parallax-slow" style="animation-delay: 2.5s"></div>
	
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
		<!-- Enhanced Section header with shimmer effects -->
		<div class="text-center mb-24">
			<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary/10 to-trackeep-purple/10 border border-primary/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl hover-lift group cursor-pointer glow-border">
				<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse shadow-glow"></span>
				<span class="text-sm font-semibold text-primary text-shimmer">Powerful Features</span>
				<svg class="w-4 h-4 ml-2 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
				</svg>
			</div>
			<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight animate-fade-in">
				<span class="block">Everything You Need to</span>
				<span class="gradient-text animate-glow text-shadow-glow text-shimmer">Stay Organized</span>
			</h2>
			<p class="text-2xl lg:text-3xl text-muted-foreground max-w-5xl mx-auto leading-relaxed animate-slide-up font-medium" style="animation-delay: 0.1s">
				Trackeep combines powerful features with simplicity, giving you the perfect tool to manage your digital life without compromising on privacy or control.
			</p>
		</div>
		
		<!-- Enhanced Features grid with 3D effects -->
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 stagger-animation">
			<!-- Bookmarks & Links -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.2s">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-primary/20 to-primary/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-primary/30">
						<svg class="w-8 h-8 text-primary group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
						</svg>
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">Smart Bookmarks</h3>
					<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
						Save and categorize web content with intelligent tagging. Access your bookmarks from anywhere with powerful search and filtering.
					</p>
					<div class="flex items-center text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Learn more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
			
			<!-- Task Management -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.3s">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-green/20 to-trackeep-green/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-green border border-trackeep-green/30">
						<svg class="w-8 h-8 text-trackeep-green group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
						</svg>
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-green transition-colors">Task Management</h3>
					<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
						Plan and track your to-dos with intuitive boards. Set priorities, deadlines, and collaborate with your team seamlessly.
					</p>
					<div class="flex items-center text-trackeep-green opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Learn more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
			
			<!-- File Storage -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.4s">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-orange/20 to-trackeep-orange/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-trackeep-orange/30">
						<svg class="w-8 h-8 text-trackeep-orange group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
						</svg>
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-orange transition-colors">File Storage</h3>
					<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
						Upload and organize documents, images, and files. Built-in version control and automatic backup keep your data safe.
					</p>
					<div class="flex items-center text-trackeep-orange opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Learn more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
			
			<!-- AI-Powered -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.5s">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-purple/20 to-trackeep-purple/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-purple border border-trackeep-purple/30">
						<svg class="w-8 h-8 text-trackeep-purple group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
						</svg>
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-purple transition-colors">AI-Powered Insights</h3>
					<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
						Get smart recommendations and automated organization. AI helps you find patterns and optimize your workflow.
					</p>
					<div class="flex items-center text-trackeep-purple opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Learn more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
			
			<!-- Privacy First -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.6s">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-red-500/20 to-red-500/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-red-500/30">
						<svg class="w-8 h-8 text-red-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
						</svg>
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-red-500 transition-colors">Privacy First</h3>
					<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
						Your data stays yours. End-to-end encryption, no tracking, and complete control over your information.
					</p>
					<div class="flex items-center text-red-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Learn more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
			
			<!-- Mobile App -->
			<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.7s">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-blue-500/20 to-blue-500/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-blue-500/30">
						<svg class="w-8 h-8 text-blue-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
						</svg>
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-blue-500 transition-colors">Mobile Apps</h3>
					<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
						Native iOS and Android apps. Sync seamlessly across all your devices and stay productive on the go.
					</p>
					<div class="flex items-center text-blue-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
						<span class="text-base font-semibold mr-2">Learn more</span>
						<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Additional features highlight with enhanced effects -->
		<div class="mt-20 text-center animate-slide-up" style="animation-delay: 0.8s">
			<div class="inline-flex items-center justify-center p-8 rounded-3xl bg-card/50 backdrop-blur-sm border border-border/50 glow-border hover-lift group">
				<div class="text-center">
					<p class="text-xl text-muted-foreground mb-6 font-medium">
						And much more: <span class="text-shimmer">API access, webhooks, integrations, custom workflows</span>, and more
					</p>
					<a href="#docs" class="btn-primary px-10 py-5 text-lg shadow-glow group magnetic-button glow-border">
						Explore All Features
						<svg class="w-6 h-6 ml-3 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
						</svg>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>
