{% extends "base.html" %}

{% block title %}Resume Parser — AI-Powered Hiring Intelligence{% endblock %}

{% block extra_head %}
<style>
    .hero-glow {
        background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(102, 126, 234, 0.25), transparent);
    }
    .dark .hero-glow {
        background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(118, 75, 162, 0.35), transparent);
    }
    .feature-icon {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(240, 147, 251, 0.15) 100%);
    }
    .dark .feature-icon {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(240, 147, 251, 0.2) 100%);
    }
    .step-number {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    }
    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    }
    .btn-primary:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }
    .grid-pattern {
        background-image:
            linear-gradient(rgba(102, 126, 234, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(102, 126, 234, 0.04) 1px, transparent 1px);
        background-size: 48px 48px;
    }
    .dark .grid-pattern {
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .ai-pulse-ring {
        background: conic-gradient(from 180deg at 50% 50%, #667eea, #764ba2, #f093fb, #667eea);
        opacity: 0.15;
    }
    .ai-tag {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(240, 147, 251, 0.12) 100%);
    }
</style>
{% endblock %}

{% block content %}
<!-- Nav -->
<nav class="fixed top-0 left-0 right-0 z-50 border-b border-white/10 dark:border-white/5 bg-white/70 dark:bg-midnight-dark/80 backdrop-blur-md">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
        <a href="/" class="flex items-center gap-2.5 group">
            <img src="/static/favicon.svg" alt="" class="w-8 h-8 rounded-lg shadow-sm group-hover:scale-105 transition-transform" width="32" height="32">
            <span class="font-display text-xl font-bold text-gradient">Resume Parser</span>
        </a>
        <div class="flex items-center gap-2 sm:gap-4">
            <button onclick="toggleTheme()" class="flex items-center justify-center w-10 h-10 rounded-full glass-card border border-glass-border hover:scale-105 transition-transform" aria-label="Toggle theme">
                <i data-lucide="moon" class="w-4 h-4 dark:hidden"></i>
                <i data-lucide="sun" class="w-4 h-4 hidden dark:block"></i>
            </button>
            <a href="#ai" class="hidden md:inline-flex px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
                AI capabilities
            </a>
            <a href="/login" class="hidden sm:inline-flex px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
                Sign in
            </a>
            <a href="/login" class="btn-primary inline-flex items-center gap-2 px-4 sm:px-5 py-2.5 rounded-full text-sm font-semibold text-white shadow-lg shadow-purple-500/25 transition-all">
                Get started
                <i data-lucide="arrow-right" class="w-4 h-4"></i>
            </a>
        </div>
    </div>
</nav>

<!-- Hero -->
<section class="relative min-h-screen flex flex-col justify-center pt-24 pb-20 overflow-hidden grid-pattern hero-glow">
    <div class="absolute top-32 -left-20 w-72 h-72 rounded-full bg-purple-400/20 dark:bg-purple-600/10 blur-3xl float-animation pointer-events-none"></div>
    <div class="absolute bottom-20 -right-16 w-96 h-96 rounded-full bg-pink-400/15 dark:bg-pink-600/10 blur-3xl float-animation pointer-events-none" style="animation-delay: -3s;"></div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center relative z-10">
        <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass-card border border-glass-border text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-400 mb-8">
            <i data-lucide="sparkles" class="w-3.5 h-3.5 text-purple-500"></i>
            AI-powered resume intelligence
        </div>

        <h1 class="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6">
            <span class="text-gradient">Parse, rank,</span><br>
            <span class="text-gray-900 dark:text-white">and hire smarter</span>
        </h1>

        <p class="max-w-2xl mx-auto text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-10 leading-relaxed">
            Large language models read every resume like a senior recruiter—extracting skills, experience, and fit scores automatically. Stop manual copy-paste and let AI build your shortlist.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
            <a href="/login" class="btn-primary inline-flex items-center justify-center gap-2 w-full sm:w-auto px-8 py-4 rounded-full text-base font-semibold text-white shadow-xl shadow-purple-500/30 transition-all">
                <i data-lucide="log-in" class="w-5 h-5"></i>
                Sign in to dashboard
            </a>
            <a href="#ai" class="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-8 py-4 rounded-full text-base font-semibold glass-card border border-glass-border text-gray-700 dark:text-gray-200 hover:scale-[1.02] transition-transform">
                <i data-lucide="brain" class="w-5 h-5"></i>
                Explore AI
            </a>
        </div>

        <!-- Stats -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
            <div class="glass-card rounded-2xl p-5 border border-glass-border shadow-elevated">
                <div class="text-2xl sm:text-3xl font-bold text-gradient mb-1">AI</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">Structured parsing</div>
            </div>
            <div class="glass-card rounded-2xl p-5 border border-glass-border shadow-elevated">
                <div class="text-2xl sm:text-3xl font-bold text-gradient mb-1">JD</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role matching</div>
            </div>
            <div class="glass-card rounded-2xl p-5 border border-glass-border shadow-elevated">
                <div class="text-2xl sm:text-3xl font-bold text-gradient mb-1">50+</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">Bulk uploads</div>
            </div>
            <div class="glass-card rounded-2xl p-5 border border-glass-border shadow-elevated">
                <div class="text-2xl sm:text-3xl font-bold text-gradient mb-1">PDF</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">DOCX &amp; TXT</div>
            </div>
        </div>
    </div>
</section>

<!-- Features -->
<section id="features" class="py-24 relative">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="text-center mb-16">
            <h2 class="font-display text-3xl sm:text-4xl font-bold text-gradient mb-4">Everything you need to screen faster</h2>
            <p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">
                Built for recruiting teams who need accurate extraction, searchable records, and intelligent ranking—all in one secure workspace.
            </p>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <article class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated hover:scale-[1.02] transition-transform group">
                <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <i data-lucide="file-search" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">Smart resume parsing</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    Upload PDF, DOCX, or plain text. AI extracts contact info, skills, experience, education, certifications, and more into structured JSON.
                </p>
            </article>

            <article class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated hover:scale-[1.02] transition-transform group">
                <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <i data-lucide="target" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">JD matching &amp; ranking</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    Paste a job description or role title. Rank your entire candidate library against requirements with AI-powered match scores.
                </p>
            </article>

            <article class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated hover:scale-[1.02] transition-transform group">
                <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <i data-lucide="upload-cloud" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">Bulk import</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    Process dozens of resumes at once. Background jobs handle large batches so your team can focus on shortlisting, not data entry.
                </p>
            </article>

            <article class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated hover:scale-[1.02] transition-transform group">
                <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <i data-lucide="database" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">Central resume library</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    Search, filter, and open full candidate profiles. Every parsed field is stored and searchable in your private database.
                </p>
            </article>

            <article class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated hover:scale-[1.02] transition-transform group">
                <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <i data-lucide="layout-dashboard" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">Unified dashboard</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    Parser, intelligence, listings, and account settings in one SPA-style workspace—no context switching between tools.
                </p>
            </article>

            <article class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated hover:scale-[1.02] transition-transform group">
                <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                    <i data-lucide="shield-check" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">Secure &amp; role-based</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    JWT authentication, admin controls, and per-user access. Manage team accounts and keep hiring data in-house.
                </p>
            </article>
        </div>
    </div>
</section>

<!-- AI Section -->
<section id="ai" class="py-24 relative overflow-hidden">
    <div class="absolute inset-0 ai-pulse-ring pointer-events-none"></div>
    <div class="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
        <div class="text-center mb-14">
            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full ai-tag border border-glass-border text-xs font-semibold uppercase tracking-wider text-purple-700 dark:text-purple-300 mb-6">
                <i data-lucide="cpu" class="w-3.5 h-3.5"></i>
                Powered by OpenAI
            </div>
            <h2 class="font-display text-3xl sm:text-4xl font-bold text-gradient mb-4">AI that understands resumes</h2>
            <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed">
                Our engine uses GPT models to turn unstructured CV text into recruiter-ready data—then scores every candidate against your job description with human-like reasoning, not keyword matching alone.
            </p>
        </div>

        <!-- AI pipeline -->
        <div class="glass-card rounded-3xl p-8 sm:p-10 border border-glass-border shadow-elevated mb-12">
            <h3 class="text-center text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-8">AI processing pipeline</h3>
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="file-text" class="w-7 h-7 text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <p class="font-semibold text-sm mb-1">1. Extract text</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">PDF, DOCX &amp; TXT converted to clean text</p>
                </div>
                <div class="text-center">
                    <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="bot" class="w-7 h-7 text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <p class="font-semibold text-sm mb-1">2. LLM parse</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">GPT structures fields into JSON</p>
                </div>
                <div class="text-center">
                    <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="brain-circuit" class="w-7 h-7 text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <p class="font-semibold text-sm mb-1">3. Semantic match</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Role identity &amp; skills vs. JD</p>
                </div>
                <div class="text-center">
                    <div class="feature-icon w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="list-ordered" class="w-7 h-7 text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <p class="font-semibold text-sm mb-1">4. Ranked shortlist</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Scores, pitches &amp; gap analysis</p>
                </div>
            </div>
        </div>

        <div class="grid lg:grid-cols-2 gap-8 mb-12">
            <!-- What AI extracts -->
            <div class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated">
                <div class="flex items-center gap-3 mb-6">
                    <div class="feature-icon w-10 h-10 rounded-xl flex items-center justify-center">
                        <i data-lucide="scan-text" class="w-5 h-5 text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold">Intelligent extraction</h3>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
                    The AI reads each resume holistically—detecting whether the document is actually a CV, then pulling structured data even from messy layouts, tables, and bullet lists.
                </p>
                <ul class="grid grid-cols-2 gap-2 text-sm">
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> Name &amp; contact</li>
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> Work experience</li>
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> Skills &amp; projects</li>
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> Education</li>
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> Certifications</li>
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> Languages</li>
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> LinkedIn &amp; GitHub</li>
                    <li class="flex items-center gap-2 text-gray-700 dark:text-gray-300"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-500 shrink-0"></i> Professional summary</li>
                </ul>
            </div>

            <!-- AI matching -->
            <div class="glass-card rounded-2xl p-8 border border-glass-border shadow-elevated">
                <div class="flex items-center gap-3 mb-6">
                    <div class="feature-icon w-10 h-10 rounded-xl flex items-center justify-center">
                        <i data-lucide="gauge" class="w-5 h-5 text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold">AI candidate ranking</h3>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
                    Paste a job description or role title. The model acts as an expert technical recruiter—evaluating primary job identity, skill overlap, and role fit, not just keyword hits.
                </p>
                <div class="space-y-4">
                    <div class="flex gap-4 p-4 rounded-xl ai-tag border border-glass-border">
                        <div class="text-2xl font-bold text-gradient shrink-0">0–100</div>
                        <div>
                            <p class="font-semibold text-sm">Match score</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Penalizes wrong role identity (e.g. tester vs. developer) even when skills overlap</p>
                        </div>
                    </div>
                    <div class="flex gap-4 p-4 rounded-xl ai-tag border border-glass-border">
                        <i data-lucide="message-square-quote" class="w-6 h-6 text-purple-500 shrink-0 mt-0.5"></i>
                        <div>
                            <p class="font-semibold text-sm">AI pitch</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Two-sentence recruiter summary per candidate explaining fit</p>
                        </div>
                    </div>
                    <div class="flex gap-4 p-4 rounded-xl ai-tag border border-glass-border">
                        <i data-lucide="alert-circle" class="w-6 h-6 text-purple-500 shrink-0 mt-0.5"></i>
                        <div>
                            <p class="font-semibold text-sm">Skill gap analysis</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Lists missing skills so you know what to probe in interviews</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI vs manual -->
        <div class="grid md:grid-cols-2 gap-6">
            <div class="rounded-2xl p-6 border border-red-200/50 dark:border-red-900/30 bg-red-50/50 dark:bg-red-950/20">
                <h4 class="font-semibold text-red-800 dark:text-red-300 mb-4 flex items-center gap-2">
                    <i data-lucide="x-circle" class="w-5 h-5"></i>
                    Manual screening
                </h4>
                <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li>• Hours reading PDFs one by one</li>
                    <li>• Inconsistent notes across recruiters</li>
                    <li>• Keyword search misses context</li>
                    <li>• No standardized fit scoring</li>
                </ul>
            </div>
            <div class="rounded-2xl p-6 border border-purple-200/50 dark:border-purple-800/30 bg-purple-50/50 dark:bg-purple-950/20">
                <h4 class="font-semibold text-purple-800 dark:text-purple-300 mb-4 flex items-center gap-2">
                    <i data-lucide="sparkles" class="w-5 h-5"></i>
                    AI-powered workflow
                </h4>
                <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li>• Bulk-parse 50+ resumes in one batch</li>
                    <li>• Structured JSON stored in your DB</li>
                    <li>• Semantic understanding of roles &amp; skills</li>
                    <li>• Ranked shortlists with explainable scores</li>
                </ul>
            </div>
        </div>

        <p class="text-center text-xs text-gray-500 dark:text-gray-500 mt-8 max-w-xl mx-auto">
            AI responses use structured JSON output for reliable parsing. Your data stays in your private database—models process text only when you upload or run a match.
        </p>
    </div>
</section>

<!-- How it works -->
<section id="how-it-works" class="py-24 bg-white/50 dark:bg-midnight-light/30 border-y border-glass-border">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="text-center mb-16">
            <h2 class="font-display text-3xl sm:text-4xl font-bold text-gradient mb-4">How it works</h2>
            <p class="text-gray-600 dark:text-gray-400">From upload to shortlist in three steps</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8 md:gap-12">
            <div class="text-center">
                <div class="step-number w-14 h-14 rounded-2xl flex items-center justify-center text-white text-xl font-bold mx-auto mb-6 shadow-lg shadow-purple-500/30">1</div>
                <h3 class="text-lg font-semibold mb-2">Upload resumes</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    Drag and drop single files or run a bulk import. Supported formats include PDF, DOCX, and TXT up to 10&nbsp;MB each.
                </p>
            </div>
            <div class="text-center">
                <div class="step-number w-14 h-14 rounded-2xl flex items-center justify-center text-white text-xl font-bold mx-auto mb-6 shadow-lg shadow-purple-500/30">2</div>
                <h3 class="text-lg font-semibold mb-2">GPT extracts structure</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    OpenAI reads the full resume context and returns validated JSON—skills, experience, projects, education—ready for search and matching.
                </p>
            </div>
            <div class="text-center">
                <div class="step-number w-14 h-14 rounded-2xl flex items-center justify-center text-white text-xl font-bold mx-auto mb-6 shadow-lg shadow-purple-500/30">3</div>
                <h3 class="text-lg font-semibold mb-2">AI ranks your shortlist</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    The intelligence engine scores every candidate against your JD—surfacing match %, AI pitches, and missing skills so you interview the right people first.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-24">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <div class="glass-card rounded-3xl p-10 sm:p-14 text-center border border-glass-border shadow-elevated relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-pink-500/5 pointer-events-none"></div>
            <div class="relative z-10">
                <h2 class="font-display text-3xl sm:text-4xl font-bold text-gradient mb-4">Ready to streamline hiring?</h2>
                <p class="text-gray-600 dark:text-gray-400 mb-8 max-w-lg mx-auto">
                    Put AI to work on your next hiring round—upload resumes, run JD matching, and get a ranked shortlist in minutes.
                </p>
                <a href="/login" class="btn-primary inline-flex items-center gap-2 px-8 py-4 rounded-full text-base font-semibold text-white shadow-xl shadow-purple-500/30 transition-all">
                    <i data-lucide="rocket" class="w-5 h-5"></i>
                    Open dashboard
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="border-t border-glass-border py-10">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-2">
            <img src="/static/favicon.svg" alt="" class="w-6 h-6 rounded" width="24" height="24">
            <span class="text-sm text-gray-500 dark:text-gray-400">Resume Parser &mdash; In-house hiring intelligence</span>
        </div>
        <div class="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
            <a href="/login" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Sign in</a>
            <a href="/docs" target="_blank" rel="noopener" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">API docs</a>
        </div>
    </div>
</footer>
{% endblock %}