{% extends "base.html" %}

{% block title %}VLibrary - Digital Library & Book Lending Platform{% endblock %}

{% block content %}
<!-- ============================================================================
     HERO SECTION - Digital Library Theme with Reading Imagery
     ============================================================================ -->
<section class="hero" id="hero">
    <div class="container">
        <div class="hero-content">
            <div class="hero-badge">
                <i class="fas fa-book-reader"></i>
                <span>Your Digital Reading Companion</span>
            </div>
            <h1 class="hero-title">
                Discover, Borrow &<br>
                <span class="text-accent">Read Smarter</span>
            </h1>
            <p class="hero-subtitle">
                Access thousands of digital books, track your reading journey with powerful analytics,
                and join a community of passionate readers. Your next great read is waiting.
            </p>
            <div class="hero-actions">
                <a href="/catalog" class="btn btn-primary btn-lg">
                    <i class="fas fa-compass"></i>
                    Explore Library
                </a>
                <a href="#how-it-works" class="btn btn-outline btn-lg scroll-link">
                    <i class="fas fa-play-circle"></i>
                    How It Works
                </a>
            </div>
            <!-- Quick Stats -->
            <div class="hero-stats">
                <div class="stat-item">
                    <span class="stat-number" data-count="50000">50K+</span>
                    <span class="stat-label">Digital Books</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" data-count="15000">15K+</span>
                    <span class="stat-label">Active Readers</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" data-count="500">500+</span>
                    <span class="stat-label">Collections</span>
                </div>
            </div>
        </div>
        <div class="hero-visual">
            <div class="book-showcase">
                <!-- Floating Book Cards -->
                <div class="book-card book-card-1" style="--delay: 0;">
                    <div class="book-cover">
                        <i class="fas fa-book"></i>
                    </div>
                    <div class="book-spine"></div>
                </div>
                <div class="book-card book-card-2" style="--delay: 1;">
                    <div class="book-cover">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <div class="book-spine"></div>
                </div>
                <div class="book-card book-card-3" style="--delay: 2;">
                    <div class="book-cover">
                        <i class="fas fa-tablet-alt"></i>
                    </div>
                    <div class="book-spine"></div>
                </div>
                <!-- Reading Analytics Floating Card -->
                <div class="analytics-float-card">
                    <div class="analytics-header">
                        <i class="fas fa-chart-line"></i>
                        <span>Reading Progress</span>
                    </div>
                    <div class="analytics-bar">
                        <div class="analytics-fill" style="width: 75%;"></div>
                    </div>
                    <span class="analytics-text">75% Complete</span>
                </div>
            </div>
        </div>
    </div>
    <!-- Decorative Elements -->
    <div class="hero-decoration">
        <div class="floating-icon icon-1"><i class="fas fa-bookmark"></i></div>
        <div class="floating-icon icon-2"><i class="fas fa-glasses"></i></div>
        <div class="floating-icon icon-3"><i class="fas fa-highlighter"></i></div>
        <div class="floating-icon icon-4"><i class="fas fa-coffee"></i></div>
    </div>
</section>

<!-- ============================================================================
     FEATURES SECTION - Digital Lending, Analytics, Collections
     ============================================================================ -->
<section class="section features-section" id="features">
    <div class="container">
        <div class="section-header center">
            <span class="section-badge">Why VLibrary</span>
            <h2>A Complete Digital Reading Experience</h2>
            <p>Everything you need to discover, borrow, and enjoy books in one powerful platform.</p>
        </div>
        <div class="features-grid">
            <!-- Feature 1: Digital Lending -->
            <div class="feature-card" data-aos="fade-up" data-aos-delay="0">
                <div class="feature-icon">
                    <i class="fas fa-cloud-download-alt"></i>
                    <div class="feature-icon-ring"></div>
                </div>
                <h3>Instant Digital Lending</h3>
                <p>Borrow eBooks and audiobooks instantly from anywhere. No late fees, automatic returns, and offline reading support.</p>
                <ul class="feature-list">
                    <li><i class="fas fa-check"></i> Multiple formats (EPUB, PDF, Audiobook)</li>
                    <li><i class="fas fa-check"></i> Read on any device</li>
                    <li><i class="fas fa-check"></i> Sync across all your devices</li>
                </ul>
            </div>

            <!-- Feature 2: Reading Analytics -->
            <div class="feature-card featured" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-badge">Popular</div>
                <div class="feature-icon">
                    <i class="fas fa-chart-pie"></i>
                    <div class="feature-icon-ring"></div>
                </div>
                <h3>Reading Analytics</h3>
                <p>Track your reading habits with detailed analytics. Set goals, monitor progress, and discover insights about your reading journey.</p>
                <ul class="feature-list">
                    <li><i class="fas fa-check"></i> Reading time tracking</li>
                    <li><i class="fas fa-check"></i> Goal setting & achievements</li>
                    <li><i class="fas fa-check"></i> Personalized insights</li>
                </ul>
            </div>

            <!-- Feature 3: Curated Collections -->
            <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-icon">
                    <i class="fas fa-layer-group"></i>
                    <div class="feature-icon-ring"></div>
                </div>
                <h3>Curated Collections</h3>
                <p>Explore expertly curated collections by genre, theme, or reading level. Find your next favorite book effortlessly.</p>
                <ul class="feature-list">
                    <li><i class="fas fa-check"></i> Staff picks & recommendations</li>
                    <li><i class="fas fa-check"></i> Themed reading lists</li>
                    <li><i class="fas fa-check"></i> Community favorites</li>
                </ul>
            </div>
        </div>

        <!-- Additional Features Row -->
        <div class="features-secondary">
            <div class="feature-mini">
                <i class="fas fa-moon"></i>
                <span>Night Mode</span>
            </div>
            <div class="feature-mini">
                <i class="fas fa-font"></i>
                <span>Custom Fonts</span>
            </div>
            <div class="feature-mini">
                <i class="fas fa-bookmark"></i>
                <span>Bookmarks</span>
            </div>
            <div class="feature-mini">
                <i class="fas fa-highlighter"></i>
                <span>Highlights</span>
            </div>
            <div class="feature-mini">
                <i class="fas fa-sticky-note"></i>
                <span>Notes</span>
            </div>
            <div class="feature-mini">
                <i class="fas fa-share-alt"></i>
                <span>Share</span>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================================
     BROWSE BY CATEGORY SECTION
     ============================================================================ -->
<section class="section section-alt" id="categories">
    <div class="container">
        <div class="section-header">
            <div>
                <span class="section-badge">Browse</span>
                <h2>Explore by Genre</h2>
            </div>
            <a href="/catalog" class="btn btn-ghost">
                View All <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="category-grid">
            <a href="/catalog?genre=fiction" class="category-card">
                <div class="category-icon">
                    <i class="fas fa-book-open"></i>
                </div>
                <h3>Fiction</h3>
                <p>Novels, short stories, and literary works that transport you to new worlds.</p>
                <span class="category-count">12,500+ titles</span>
            </a>
            <a href="/catalog?genre=nonfiction" class="category-card">
                <div class="category-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <h3>Non-Fiction</h3>
                <p>Biographies, self-help, science, and real-world knowledge.</p>
                <span class="category-count">8,200+ titles</span>
            </a>
            <a href="/catalog?genre=children" class="category-card">
                <div class="category-icon">
                    <i class="fas fa-child"></i>
                </div>
                <h3>Children & Young Adult</h3>
                <p>Picture books, chapter books, and YA adventures for young readers.</p>
                <span class="category-count">6,800+ titles</span>
            </a>
            <a href="/catalog?genre=audiobooks" class="category-card">
                <div class="category-icon">
                    <i class="fas fa-headphones"></i>
                </div>
                <h3>Audiobooks</h3>
                <p>Listen to professionally narrated books anytime, anywhere.</p>
                <span class="category-count">4,500+ titles</span>
            </a>
        </div>
    </div>
</section>

<!-- ============================================================================
     HOW IT WORKS SECTION
     ============================================================================ -->
<section class="section" id="how-it-works">
    <div class="container">
        <div class="section-header center">
            <span class="section-badge">Getting Started</span>
            <h2>How It Works</h2>
            <p>Start reading in minutes with our simple borrowing process.</p>
        </div>
        <div class="steps-grid">
            <div class="step-card">
                <div class="step-number">1</div>
                <div class="step-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h3>Discover</h3>
                <p>Browse our extensive catalog of digital books. Use filters, search, or explore curated collections.</p>
            </div>
            <div class="step-connector"></div>
            <div class="step-card">
                <div class="step-number">2</div>
                <div class="step-icon">
                    <i class="fas fa-hand-pointer"></i>
                </div>
                <h3>Borrow</h3>
                <p>Click to borrow instantly. Choose your loan period and format preference.</p>
            </div>
            <div class="step-connector"></div>
            <div class="step-card">
                <div class="step-number">3</div>
                <div class="step-icon">
                    <i class="fas fa-book-reader"></i>
                </div>
                <h3>Read</h3>
                <p>Enjoy on any device with our reader app. Sync progress automatically across devices.</p>
            </div>
            <div class="step-connector"></div>
            <div class="step-card">
                <div class="step-number">4</div>
                <div class="step-icon">
                    <i class="fas fa-chart-bar"></i>
                </div>
                <h3>Track</h3>
                <p>Monitor your reading progress, earn achievements, and discover personalized recommendations.</p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================================
     ANALYTICS SHOWCASE SECTION
     ============================================================================ -->
<section class="section section-alt analytics-section" id="analytics">
    <div class="container">
        <div class="analytics-showcase">
            <div class="analytics-content">
                <span class="section-badge">Reading Analytics</span>
                <h2>Understand Your Reading Habits</h2>
                <p>Get insights into your reading patterns with our powerful analytics dashboard. Track time spent reading, pages completed, and books finished.</p>

                <div class="analytics-features">
                    <div class="analytics-feature">
                        <i class="fas fa-clock"></i>
                        <div>
                            <h4>Time Tracking</h4>
                            <p>See daily, weekly, and monthly reading time</p>
                        </div>
                    </div>
                    <div class="analytics-feature">
                        <i class="fas fa-bullseye"></i>
                        <div>
                            <h4>Reading Goals</h4>
                            <p>Set and achieve your reading targets</p>
                        </div>
                    </div>
                    <div class="analytics-feature">
                        <i class="fas fa-trophy"></i>
                        <div>
                            <h4>Achievements</h4>
                            <p>Earn badges and celebrate milestones</p>
                        </div>
                    </div>
                </div>

                <a href="#" class="btn btn-primary" data-modal-open="loginModal">
                    <i class="fas fa-chart-line"></i>
                    View Your Analytics
                </a>
            </div>
            <div class="analytics-visual">
                <div class="analytics-dashboard">
                    <div class="dashboard-header">
                        <span>Reading Dashboard</span>
                        <div class="dashboard-dots">
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                    <div class="dashboard-content">
                        <div class="dashboard-stat">
                            <div class="stat-circle" data-progress="78">
                                <svg viewBox="0 0 36 36">
                                    <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                    <path class="circle-progress" stroke-dasharray="78, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                </svg>
                                <span>78%</span>
                            </div>
                            <div class="stat-label">Monthly Goal</div>
                        </div>
                        <div class="dashboard-bars">
                            <div class="bar-item">
                                <span class="bar-label">Mon</span>
                                <div class="bar" style="--height: 60%;"></div>
                            </div>
                            <div class="bar-item">
                                <span class="bar-label">Tue</span>
                                <div class="bar" style="--height: 80%;"></div>
                            </div>
                            <div class="bar-item">
                                <span class="bar-label">Wed</span>
                                <div class="bar" style="--height: 45%;"></div>
                            </div>
                            <div class="bar-item">
                                <span class="bar-label">Thu</span>
                                <div class="bar" style="--height: 90%;"></div>
                            </div>
                            <div class="bar-item active">
                                <span class="bar-label">Fri</span>
                                <div class="bar" style="--height: 70%;"></div>
                            </div>
                            <div class="bar-item">
                                <span class="bar-label">Sat</span>
                                <div class="bar" style="--height: 55%;"></div>
                            </div>
                            <div class="bar-item">
                                <span class="bar-label">Sun</span>
                                <div class="bar" style="--height: 100%;"></div>
                            </div>
                        </div>
                        <div class="dashboard-footer">
                            <div class="footer-stat">
                                <i class="fas fa-book"></i>
                                <span>12 Books</span>
                            </div>
                            <div class="footer-stat">
                                <i class="fas fa-clock"></i>
                                <span>48 Hours</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================================
     POPULAR NOW SECTION
     ============================================================================ -->
<section class="section" id="popular">
    <div class="container">
        <div class="section-header">
            <div>
                <span class="section-badge">Trending</span>
                <h2>Popular Right Now</h2>
            </div>
            <a href="/catalog?sort=popular" class="btn btn-ghost">
                See More <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="items-grid" id="popular-items">
            <!-- Populated by JavaScript -->
            <div class="loading-placeholder">
                <div class="skeleton skeleton-card"></div>
                <div class="skeleton skeleton-card"></div>
                <div class="skeleton skeleton-card"></div>
                <div class="skeleton skeleton-card"></div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================================
     TESTIMONIALS SECTION
     ============================================================================ -->
<section class="section section-alt testimonials-section" id="testimonials">
    <div class="container">
        <div class="section-header center">
            <span class="section-badge">Testimonials</span>
            <h2>What Our Readers Say</h2>
            <p>Join thousands of happy readers who have transformed their reading experience.</p>
        </div>
        <div class="testimonials-grid">
            <div class="testimonial-card">
                <div class="testimonial-rating">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p class="testimonial-text">"VLibrary has completely changed how I read. The analytics feature helps me stay motivated and I've read more books this year than ever before!"</p>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <strong>Sarah M.</strong>
                        <span>Avid Reader</span>
                    </div>
                </div>
            </div>
            <div class="testimonial-card featured">
                <div class="testimonial-rating">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p class="testimonial-text">"As a student, having instant access to digital textbooks and research materials has been invaluable. The offline reading feature is a game-changer for my commute."</p>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                    <div class="author-info">
                        <strong>James T.</strong>
                        <span>Graduate Student</span>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-rating">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <p class="testimonial-text">"The curated collections make it so easy to find my next read. I love the personalized recommendations based on my reading history."</p>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="author-info">
                        <strong>Emily R.</strong>
                        <span>Book Club Leader</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================================
     PARTNER LIBRARIES SECTION
     ============================================================================ -->
<section class="section">
    <div class="container">
        <div class="section-header center">
            <span class="section-badge">Network</span>
            <h2>Partner Libraries</h2>
            <p>Access books from our network of participating libraries.</p>
        </div>
        <div class="partners-grid" id="partners-grid">
            <div class="partner-card">
                <i class="fas fa-building-columns"></i>
                <span>Central Library</span>
            </div>
            <div class="partner-card">
                <i class="fas fa-university"></i>
                <span>University Library</span>
            </div>
            <div class="partner-card">
                <i class="fas fa-landmark"></i>
                <span>Community Library</span>
            </div>
            <div class="partner-card">
                <i class="fas fa-school"></i>
                <span>School Library</span>
            </div>
        </div>
        <div class="text-center mt-6">
            <a href="/locations" class="btn btn-outline">
                <i class="fas fa-map-marker-alt"></i>
                Find a Location
            </a>
        </div>
    </div>
</section>

<!-- ============================================================================
     CTA SECTION - Final Call to Action
     ============================================================================ -->
<section class="section cta-section" id="cta">
    <div class="container">
        <div class="cta-content">
            <h2>Start Your Reading Journey Today</h2>
            <p>Join thousands of readers discovering new books, tracking their progress, and achieving their reading goals.</p>
            <div class="cta-actions">
                <a href="#" class="btn btn-primary btn-lg" data-modal-open="registerModal">
                    <i class="fas fa-book-reader"></i>
                    Get Started Free
                </a>
                <a href="#" class="btn btn-outline btn-lg" data-modal-open="contactModal">
                    <i class="fas fa-question-circle"></i>
                    Ask a Librarian
                </a>
            </div>
            <p class="cta-note">
                <i class="fas fa-check-circle"></i>
                Free with your library card. No credit card required.
            </p>
        </div>
    </div>
</section>
{% endblock %}

{% block styles %}
<style>
/* ============================================================================
   ROOT VARIABLES & BRAND COLORS
   VLibrary Brand: Primary #4F46E5 (Indigo), Secondary #7C3AED (Purple),
   Accent #06B6D4 (Cyan), Background #F8FAFC (Slate-50)
   ============================================================================ */
:root {
    --vl-primary: #4F46E5;
    --vl-primary-dark: #4338CA;
    --vl-secondary: #7C3AED;
    --vl-secondary-dark: #6D28D9;
    --vl-accent: #06B6D4;
    --vl-accent-dark: #0891B2;
    --vl-bg-light: #F8FAFC;
}

/* ============================================================================
   SMOOTH SCROLL BEHAVIOR
   ============================================================================ */
html {
    scroll-behavior: smooth;
}

/* ============================================================================
   SECTION BADGES & HEADERS
   ============================================================================ */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.1));
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vl-primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[data-theme="dark"] .section-badge {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(124, 58, 237, 0.2));
    border-color: rgba(79, 70, 229, 0.3);
    color: #a5b4fc;
}

.section-header.center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.section-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--color-text-primary), var(--vl-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header p {
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ============================================================================
   HERO SECTION - Enhanced with Book/Library Theme
   ============================================================================ */
.hero {
    padding: 5rem 0 6rem;
    background: linear-gradient(135deg, var(--vl-primary) 0%, var(--vl-secondary) 50%, var(--vl-accent) 100%);
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.06) 0%, transparent 30%);
    animation: pulseBackground 10s ease-in-out infinite;
}

@keyframes pulseBackground {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.6s ease both;
}

.hero-badge i {
    color: #fde047;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.6s ease 0.1s both;
}

.hero-title .text-accent {
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 520px;
    line-height: 1.7;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.6s ease 0.2s both;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.6s ease 0.3s both;
}

.hero-actions .btn-primary {
    background: #ffffff;
    color: var(--vl-primary);
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-actions .btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.hero-actions .btn-outline {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 1rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hero-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 3rem;
    animation: fadeInUp 0.6s ease 0.4s both;
}

.stat-item {
    text-align: left;
}

.stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Book Showcase Visual */
.hero-visual {
    position: relative;
    animation: fadeInUp 0.6s ease 0.3s both;
}

.book-showcase {
    position: relative;
    height: 400px;
    perspective: 1000px;
}

.book-card {
    position: absolute;
    width: 140px;
    height: 200px;
    border-radius: 0.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: floatBook 6s ease-in-out infinite;
    transition: all 0.4s ease;
}

.book-card:hover {
    transform: scale(1.05) rotateY(-5deg);
}

.book-card-1 {
    top: 10%;
    left: 10%;
    background: linear-gradient(135deg, #ec4899, #db2777);
    animation-delay: 0s;
    transform: rotateY(-15deg) rotateZ(-5deg);
}

.book-card-2 {
    top: 30%;
    left: 40%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    animation-delay: 2s;
    transform: rotateY(10deg) rotateZ(3deg);
    z-index: 2;
}

.book-card-3 {
    top: 50%;
    left: 15%;
    background: linear-gradient(135deg, #10b981, #059669);
    animation-delay: 4s;
    transform: rotateY(-10deg) rotateZ(-3deg);
}

.book-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

.book-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
}

.book-cover i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
}

.book-spine {
    position: absolute;
    left: -8px;
    top: 0;
    width: 8px;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.25rem 0 0 0.25rem;
}

@keyframes floatBook {
    0%, 100% { transform: translateY(0) rotateY(-10deg); }
    50% { transform: translateY(-15px) rotateY(-15deg); }
}

/* Analytics Floating Card */
.analytics-float-card {
    position: absolute;
    bottom: 10%;
    right: 5%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    animation: floatCard 5s ease-in-out infinite;
    z-index: 10;
    min-width: 180px;
}

[data-theme="dark"] .analytics-float-card {
    background: rgba(30, 30, 40, 0.95);
}

.analytics-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.analytics-header i {
    color: var(--vl-primary);
    font-size: 1rem;
}

.analytics-header span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.analytics-bar {
    height: 8px;
    background: rgba(79, 70, 229, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.analytics-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vl-primary), var(--vl-accent));
    border-radius: 4px;
    animation: fillBar 2s ease-out forwards;
}

@keyframes fillBar {
    from { width: 0; }
}

.analytics-text {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Hero Decorative Floating Icons */
.hero-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    animation: floatIcon 8s ease-in-out infinite;
}

.icon-1 { top: 15%; right: 10%; animation-delay: 0s; }
.icon-2 { top: 60%; right: 25%; animation-delay: 2s; }
.icon-3 { bottom: 20%; left: 5%; animation-delay: 4s; }
.icon-4 { top: 25%; left: 35%; animation-delay: 6s; }

@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

/* ============================================================================
   FEATURES SECTION
   ============================================================================ */
.features-section {
    background: var(--color-bg-primary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 1.5rem;
    padding: 2.5rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vl-primary), var(--vl-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(79, 70, 229, 0.15);
    border-color: var(--vl-primary);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card.featured {
    border-color: var(--vl-primary);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(124, 58, 237, 0.05));
}

.feature-card.featured::before {
    opacity: 1;
}

.feature-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, var(--vl-primary), var(--vl-secondary));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.feature-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, var(--vl-primary), var(--vl-secondary));
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
}

.feature-icon i {
    font-size: 1.75rem;
    color: white;
}

.feature-icon-ring {
    position: absolute;
    inset: -8px;
    border: 2px dashed rgba(79, 70, 229, 0.3);
    border-radius: 1.5rem;
    animation: spinRing 20s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover .feature-icon-ring {
    opacity: 1;
}

@keyframes spinRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.feature-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-text-primary);
}

.feature-card > p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.feature-list i {
    color: var(--vl-accent);
    font-size: 0.85rem;
}

/* Secondary Features Row */
.features-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-default);
}

.feature-mini {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 2rem;
    transition: all 0.3s ease;
}

.feature-mini:hover {
    border-color: var(--vl-primary);
    background: rgba(79, 70, 229, 0.05);
}

.feature-mini i {
    color: var(--vl-primary);
    font-size: 1rem;
}

.feature-mini span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ============================================================================
   CATEGORY CARDS - Enhanced with Book Theme
   ============================================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}

.category-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 1.25rem;
    padding: 2rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-accent), var(--card-accent-light));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-card:hover::before {
    opacity: 1;
}

.category-card:hover {
    transform: translateY(-8px);
    border-color: var(--card-accent);
    box-shadow: 0 20px 40px var(--card-shadow);
}

/* Category-specific colors */
.category-card:nth-child(1) {
    --card-accent: var(--vl-primary);
    --card-accent-light: #818cf8;
    --card-shadow: rgba(79, 70, 229, 0.2);
}

.category-card:nth-child(2) {
    --card-accent: var(--vl-secondary);
    --card-accent-light: #a78bfa;
    --card-shadow: rgba(124, 58, 237, 0.2);
}

.category-card:nth-child(3) {
    --card-accent: #ec4899;
    --card-accent-light: #f472b6;
    --card-shadow: rgba(236, 72, 153, 0.2);
}

.category-card:nth-child(4) {
    --card-accent: var(--vl-accent);
    --card-accent-light: #22d3ee;
    --card-shadow: rgba(6, 182, 212, 0.2);
}

.category-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: all 0.4s ease;
    position: relative;
}

.category-card:nth-child(1) .category-icon {
    background: linear-gradient(135deg, var(--vl-primary), #6366f1);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.category-card:nth-child(2) .category-icon {
    background: linear-gradient(135deg, var(--vl-secondary), #8b5cf6);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.category-card:nth-child(3) .category-icon {
    background: linear-gradient(135deg, #ec4899, #db2777);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3);
}

.category-card:nth-child(4) .category-icon {
    background: linear-gradient(135deg, var(--vl-accent), #0891b2);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
}

.category-card:hover .category-icon {
    transform: scale(1.1) rotate(-5deg);
}

.category-icon i {
    font-size: 1.75rem;
    color: white;
}

.category-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.category-card:hover h3 {
    color: var(--card-accent);
}

.category-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.category-count {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: rgba(79, 70, 229, 0.1);
    color: var(--vl-primary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 1rem;
}

[data-theme="dark"] .category-count {
    background: rgba(129, 140, 248, 0.2);
    color: #a5b4fc;
}

/* ============================================================================
   HOW IT WORKS STEPS - Enhanced with Connecting Lines
   ============================================================================ */
.steps-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    position: relative;
    flex-wrap: wrap;
}

.step-connector {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--vl-primary), var(--vl-accent));
    margin-top: 4.5rem;
    border-radius: 2px;
    opacity: 0.5;
}

@media (max-width: 1024px) {
    .step-connector {
        display: none;
    }
}

.step-card {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem;
    flex: 0 1 220px;
}

.step-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 2.25rem;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    z-index: 2;
    box-shadow: 0 4px 15px var(--step-shadow);
}

.step-card:nth-child(1) .step-number {
    background: linear-gradient(135deg, var(--vl-primary), #6366f1);
    --step-shadow: rgba(79, 70, 229, 0.4);
}

.step-card:nth-child(3) .step-number {
    background: linear-gradient(135deg, var(--vl-secondary), #8b5cf6);
    --step-shadow: rgba(124, 58, 237, 0.4);
}

.step-card:nth-child(5) .step-number {
    background: linear-gradient(135deg, var(--vl-accent), #0891b2);
    --step-shadow: rgba(6, 182, 212, 0.4);
}

.step-card:nth-child(7) .step-number {
    background: linear-gradient(135deg, #10b981, #059669);
    --step-shadow: rgba(16, 185, 129, 0.4);
}

.step-icon {
    width: 5.5rem;
    height: 5.5rem;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border-default);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.step-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed var(--step-border);
    opacity: 0;
    transition: all 0.4s ease;
}

.step-card:nth-child(1) .step-icon { --step-border: var(--vl-primary); }
.step-card:nth-child(3) .step-icon { --step-border: var(--vl-secondary); }
.step-card:nth-child(5) .step-icon { --step-border: var(--vl-accent); }
.step-card:nth-child(7) .step-icon { --step-border: #10b981; }

.step-card:hover .step-icon::after {
    opacity: 1;
    animation: spinBorder 8s linear infinite;
}

@keyframes spinBorder {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.step-card:hover .step-icon {
    transform: scale(1.1);
    border-color: var(--step-border);
    box-shadow: 0 10px 30px var(--step-shadow, rgba(0, 0, 0, 0.1));
}

.step-icon i {
    font-size: 2rem;
    transition: all 0.4s ease;
}

.step-card:nth-child(1) .step-icon i { color: var(--vl-primary); }
.step-card:nth-child(3) .step-icon i { color: var(--vl-secondary); }
.step-card:nth-child(5) .step-icon i { color: var(--vl-accent); }
.step-card:nth-child(7) .step-icon i { color: #10b981; }

.step-card:hover .step-icon i {
    transform: scale(1.15);
}

.step-card h3 {
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.step-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================================================
   ANALYTICS SHOWCASE SECTION
   ============================================================================ */
.analytics-section {
    overflow: hidden;
}

.analytics-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.analytics-content h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.analytics-content > p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.analytics-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.analytics-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.analytics-feature i {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--vl-primary), var(--vl-secondary));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.analytics-feature h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.analytics-feature p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Analytics Dashboard Visual */
.analytics-dashboard {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease;
}

.analytics-dashboard:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 70px rgba(79, 70, 229, 0.2);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-default);
}

.dashboard-header span {
    font-weight: 600;
    color: var(--color-text-primary);
}

.dashboard-dots {
    display: flex;
    gap: 0.4rem;
}

.dashboard-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dashboard-dots span:nth-child(1) { background: #ef4444; }
.dashboard-dots span:nth-child(2) { background: #fbbf24; }
.dashboard-dots span:nth-child(3) { background: #22c55e; }

.dashboard-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-circle {
    position: relative;
    width: 100px;
    height: 100px;
}

.stat-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: var(--color-border-default);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke: var(--vl-primary);
    animation: drawCircle 1.5s ease-out forwards;
}

@keyframes drawCircle {
    from { stroke-dasharray: 0, 100; }
}

.stat-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.dashboard-stat .stat-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.dashboard-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100px;
    gap: 0.5rem;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.bar-label {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.bar {
    width: 100%;
    height: var(--height);
    background: linear-gradient(180deg, var(--vl-primary), var(--vl-secondary));
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.bar-item.active .bar {
    opacity: 1;
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
}

.bar-item:hover .bar {
    opacity: 1;
    transform: scaleY(1.05);
}

.dashboard-footer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-default);
}

.footer-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.footer-stat i {
    color: var(--vl-primary);
}

/* ============================================================================
   TESTIMONIALS SECTION
   ============================================================================ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.4s ease;
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--vl-primary);
    opacity: 0.1;
    line-height: 1;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(79, 70, 229, 0.1);
    border-color: var(--vl-primary);
}

.testimonial-card.featured {
    border-color: var(--vl-primary);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(124, 58, 237, 0.05));
}

.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.testimonial-rating i {
    color: #fbbf24;
    font-size: 0.9rem;
}

.testimonial-text {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--vl-primary), var(--vl-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.author-info strong {
    display: block;
    color: var(--color-text-primary);
    font-weight: 600;
}

.author-info span {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ============================================================================
   PARTNERS SECTION
   ============================================================================ */
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.partner-card {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-default);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--vl-primary);
}

.partner-card i {
    font-size: 1.5rem;
    color: var(--vl-primary);
}

.partner-card span {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ============================================================================
   CTA SECTION
   ============================================================================ */
.cta-section {
    background: linear-gradient(135deg, var(--vl-primary) 0%, var(--vl-secondary) 50%, var(--vl-accent) 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
    animation: shimmerCta 15s linear infinite;
}

@keyframes shimmerCta {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    color: white;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 800;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    background: none;
    -webkit-text-fill-color: white;
}

.cta-content > p {
    opacity: 0.95;
    margin-bottom: 2rem;
    font-size: 1.15rem;
    line-height: 1.7;
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.cta-section .btn-primary {
    background: white;
    color: var(--vl-primary);
    font-weight: 600;
    padding: 1rem 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-section .btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.cta-section .btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    font-weight: 600;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
}

.cta-section .btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.cta-note i {
    color: #86efac;
}

/* ============================================================================
   ITEMS GRID
   ============================================================================ */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.75rem;
}

/* ============================================================================
   LOADING SKELETON
   ============================================================================ */
.loading-placeholder {
    display: contents;
}

.skeleton {
    background: var(--color-bg-tertiary);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.skeleton-card {
    height: 280px;
}

/* ============================================================================
   LIGHT MODE ADJUSTMENTS
   ============================================================================ */
[data-theme="light"] .hero {
    background: linear-gradient(135deg, var(--vl-primary) 0%, var(--vl-secondary) 50%, var(--vl-accent) 100%);
}

[data-theme="light"] .category-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .testimonial-card {
    background: var(--color-bg-secondary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .step-icon {
    background: var(--color-bg-secondary);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */
@media (max-width: 1024px) {
    .analytics-showcase {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .analytics-visual {
        order: -1;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 3rem 0 4rem;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
        font-size: 1.05rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        order: -1;
    }

    .book-showcase {
        height: 280px;
        max-width: 320px;
        margin: 0 auto;
    }

    .book-card {
        width: 100px;
        height: 140px;
    }

    .book-card-1 { left: 5%; top: 15%; }
    .book-card-2 { left: 35%; top: 25%; }
    .book-card-3 { left: 10%; top: 50%; }

    .analytics-float-card {
        right: 0;
        bottom: 5%;
        min-width: 150px;
        padding: 1rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .cta-content h2 {
        font-size: 1.75rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        flex-direction: column;
        align-items: center;
    }

    .step-card {
        max-width: 300px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .floating-icon {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .stat-item {
        text-align: center;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .features-secondary {
        gap: 0.75rem;
    }

    .feature-mini {
        padding: 0.5rem 1rem;
    }
}

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

/* Scroll Animation Triggers */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================================
   MODAL SYSTEM STYLES
   ============================================================================ */

/* Body state when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay.closing {
    opacity: 0;
}

/* Modal Container */
.modal-container {
    background: var(--color-bg-primary);
    border-radius: 1.5rem;
    width: 100%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

.modal-overlay.closing .modal-container {
    transform: scale(0.9) translateY(20px);
}

.modal-container.modal-lg {
    max-width: 600px;
}

.modal-container.modal-xl {
    max-width: 800px;
}

/* Modal Header */
.modal-header {
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--color-border-default);
}

.modal-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--vl-primary), var(--vl-secondary));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}

.modal-icon i {
    font-size: 1.75rem;
    color: white;
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.modal-header p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: var(--color-bg-tertiary);
    border-radius: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: rotate(90deg);
}

/* Modal Body */
.modal-body {
    padding: 1.5rem 2rem 2rem;
}

/* Modal Form Styles */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 1rem;
    color: var(--color-text-tertiary);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.input-wrapper input,
.input-wrapper select,
.modal-form textarea {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border-default);
    border-radius: 0.75rem;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

.input-wrapper.input-lg input {
    padding: 1rem 3.5rem 1rem 2.75rem;
    font-size: 1.05rem;
}

.modal-form textarea {
    padding-left: 1rem;
    resize: vertical;
    min-height: 100px;
}

.modal-form select {
    padding-left: 1rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.modal-form textarea:focus {
    outline: none;
    border-color: var(--vl-primary);
    background: var(--color-bg-secondary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.input-wrapper input:focus + i,
.input-wrapper:focus-within i {
    color: var(--vl-primary);
}

/* Password Toggle Button */
.password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--color-text-tertiary);
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: var(--vl-primary);
}

/* Search Submit Button */
.search-submit-btn {
    position: absolute;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--vl-primary), var(--vl-secondary));
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.search-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

/* Form Options Row */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Custom Checkbox */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.checkbox-wrapper input {
    display: none;
}

.checkmark {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border-default);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-wrapper input:checked + .checkmark {
    background: var(--vl-primary);
    border-color: var(--vl-primary);
}

.checkbox-wrapper input:checked + .checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: white;
}

.checkbox-wrapper a {
    color: var(--vl-primary);
    text-decoration: none;
}

.checkbox-wrapper a:hover {
    text-decoration: underline;
}

/* Forgot Link */
.forgot-link {
    font-size: 0.9rem;
    color: var(--vl-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-link:hover {
    color: var(--vl-secondary);
    text-decoration: underline;
}

/* Password Requirements */
.password-requirements {
    padding: 0.75rem 1rem;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 0.5rem;
    border-left: 3px solid var(--vl-primary);
}

.password-requirements p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.password-requirements i {
    color: var(--vl-primary);
}

/* Button Block */
.btn-block {
    width: 100%;
    justify-content: center;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.5rem;
}

/* Modal Divider */
.modal-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.modal-divider::before,
.modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-default);
}

.modal-divider span {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Modal Footer Links */
.modal-footer-links {
    text-align: center;
}

.modal-footer-links p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.modal-footer-links a {
    color: var(--vl-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.modal-footer-links a:hover {
    color: var(--vl-secondary);
    text-decoration: underline;
}

/* Search Filters */
.search-filters {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-default);
}

.search-filters h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-filters h4 i {
    color: var(--vl-primary);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 480px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }
}

/* Search Tags */
.search-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.tag-label {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    margin-right: 0.25rem;
}

.search-tag {
    padding: 0.5rem 1rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-default);
    border-radius: 2rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-tag:hover {
    background: rgba(79, 70, 229, 0.1);
    border-color: var(--vl-primary);
    color: var(--vl-primary);
}

/* Search Results */
.search-results {
    margin-top: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
}

/* Contact Options */
.contact-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.contact-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border-default);
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.contact-option:hover {
    border-color: var(--vl-primary);
    background: rgba(79, 70, 229, 0.05);
    transform: translateY(-2px);
}

.contact-option i {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--vl-primary), var(--vl-secondary));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.contact-option span {
    font-weight: 600;
    color: var(--color-text-primary);
}

.contact-option small {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}

/* ============================================================================
   TOAST NOTIFICATION STYLES
   ============================================================================ */
.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg-primary);
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--toast-color);
    min-width: 320px;
    max-width: 420px;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.active {
    transform: translateX(0);
    opacity: 1;
}

.toast.dismissing {
    transform: translateX(120%);
    opacity: 0;
}

.toast-success {
    --toast-color: #10b981;
}

.toast-error {
    --toast-color: #ef4444;
}

.toast-warning {
    --toast-color: #f59e0b;
}

.toast-info {
    --toast-color: var(--vl-primary);
}

.toast-icon {
    width: 2rem;
    height: 2rem;
    background: var(--toast-color);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-icon i {
    color: white;
    font-size: 0.9rem;
}

.toast-content {
    flex: 1;
}

.toast-content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--color-text-tertiary);
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.toast-close:hover {
    color: var(--color-text-primary);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
}

.toast-progress-bar {
    height: 100%;
    background: var(--toast-color);
    animation: toastProgress linear forwards;
    transform-origin: left;
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Toast Responsive */
@media (max-width: 480px) {
    .toast-container {
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
    }

    .toast {
        min-width: auto;
        max-width: none;
        transform: translateY(120%);
    }

    .toast.active {
        transform: translateY(0);
    }

    .toast.dismissing {
        transform: translateY(120%);
    }
}

/* ============================================================================
   DARK MODE MODAL ADJUSTMENTS
   ============================================================================ */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .modal-container {
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .toast {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .input-wrapper input,
[data-theme="dark"] .input-wrapper select,
[data-theme="dark"] .modal-form textarea {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .input-wrapper input:focus,
[data-theme="dark"] .input-wrapper select:focus,
[data-theme="dark"] .modal-form textarea:focus {
    background: var(--color-bg-secondary);
}

/* ============================================================================
   MODAL RESPONSIVE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 480px) {
    .modal-container {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
        border-radius: 1.25rem;
    }

    .modal-header {
        padding: 1.5rem 1.5rem 1.25rem;
    }

    .modal-body {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .modal-icon {
        width: 3.5rem;
        height: 3.5rem;
    }

    .modal-icon i {
        font-size: 1.5rem;
    }

    .modal-header h2 {
        font-size: 1.25rem;
    }

    .contact-options {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block scripts %}
<!-- ============================================================================
     MODAL HTML COMPONENTS
     ============================================================================ -->

<!-- Login Modal -->
<div class="modal-overlay" id="loginModal" role="dialog" aria-modal="true" aria-labelledby="loginModalTitle">
    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-icon">
                <i class="fas fa-book-reader"></i>
            </div>
            <h2 id="loginModalTitle">Welcome Back</h2>
            <p>Sign in to access your library account</p>
            <button class="modal-close" data-modal-close aria-label="Close modal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <form id="loginForm" class="modal-form">
                <div class="form-group">
                    <label for="loginEmail">Library Card Number or Email</label>
                    <div class="input-wrapper">
                        <i class="fas fa-id-card"></i>
                        <input type="text" id="loginEmail" name="email" placeholder="Enter card number or email" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="loginPassword">Password</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="loginPassword" name="password" placeholder="Enter your password" required>
                        <button type="button" class="password-toggle" aria-label="Toggle password visibility">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="form-options">
                    <label class="checkbox-wrapper">
                        <input type="checkbox" name="remember">
                        <span class="checkmark"></span>
                        Remember me
                    </label>
                    <a href="#" class="forgot-link">Forgot Password?</a>
                </div>
                <button type="submit" class="btn btn-primary btn-block">
                    <i class="fas fa-sign-in-alt"></i>
                    Sign In
                </button>
            </form>
            <div class="modal-divider">
                <span>or</span>
            </div>
            <div class="modal-footer-links">
                <p>Don't have an account? <a href="#" data-modal-open="registerModal" data-modal-close>Register Now</a></p>
            </div>
        </div>
    </div>
</div>

<!-- Register Modal -->
<div class="modal-overlay" id="registerModal" role="dialog" aria-modal="true" aria-labelledby="registerModalTitle">
    <div class="modal-container modal-lg">
        <div class="modal-header">
            <div class="modal-icon">
                <i class="fas fa-user-plus"></i>
            </div>
            <h2 id="registerModalTitle">Create Your Account</h2>
            <p>Join VLibrary and start your reading journey</p>
            <button class="modal-close" data-modal-close aria-label="Close modal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <form id="registerForm" class="modal-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="regFirstName">First Name</label>
                        <div class="input-wrapper">
                            <i class="fas fa-user"></i>
                            <input type="text" id="regFirstName" name="firstName" placeholder="First name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="regLastName">Last Name</label>
                        <div class="input-wrapper">
                            <i class="fas fa-user"></i>
                            <input type="text" id="regLastName" name="lastName" placeholder="Last name" required>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="regEmail">Email Address</label>
                    <div class="input-wrapper">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="regEmail" name="email" placeholder="your@email.com" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="regPhone">Phone Number (Optional)</label>
                    <div class="input-wrapper">
                        <i class="fas fa-phone"></i>
                        <input type="tel" id="regPhone" name="phone" placeholder="(555) 123-4567">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="regPassword">Password</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="regPassword" name="password" placeholder="Create password" required minlength="8">
                            <button type="button" class="password-toggle" aria-label="Toggle password visibility">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="regConfirmPassword">Confirm Password</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="regConfirmPassword" name="confirmPassword" placeholder="Confirm password" required>
                        </div>
                    </div>
                </div>
                <div class="password-requirements">
                    <p><i class="fas fa-info-circle"></i> Password must be at least 8 characters</p>
                </div>
                <div class="form-group">
                    <label class="checkbox-wrapper">
                        <input type="checkbox" name="terms" required>
                        <span class="checkmark"></span>
                        I agree to the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>
                    </label>
                </div>
                <button type="submit" class="btn btn-primary btn-block">
                    <i class="fas fa-user-plus"></i>
                    Create Account
                </button>
            </form>
            <div class="modal-divider">
                <span>or</span>
            </div>
            <div class="modal-footer-links">
                <p>Already have an account? <a href="#" data-modal-open="loginModal" data-modal-close>Sign In</a></p>
            </div>
        </div>
    </div>
</div>

<!-- Book Search Modal -->
<div class="modal-overlay" id="searchModal" role="dialog" aria-modal="true" aria-labelledby="searchModalTitle">
    <div class="modal-container modal-lg">
        <div class="modal-header">
            <div class="modal-icon">
                <i class="fas fa-search"></i>
            </div>
            <h2 id="searchModalTitle">Search Library</h2>
            <p>Find your next great read</p>
            <button class="modal-close" data-modal-close aria-label="Close modal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <form id="searchForm" class="modal-form">
                <div class="form-group search-main">
                    <div class="input-wrapper input-lg">
                        <i class="fas fa-search"></i>
                        <input type="text" id="searchQuery" name="query" placeholder="Search by title, author, ISBN..." autofocus>
                        <button type="submit" class="search-submit-btn">
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>

                <div class="search-filters">
                    <h4><i class="fas fa-filter"></i> Filters</h4>
                    <div class="filter-grid">
                        <div class="form-group">
                            <label for="filterGenre">Genre</label>
                            <select id="filterGenre" name="genre">
                                <option value="">All Genres</option>
                                <option value="fiction">Fiction</option>
                                <option value="nonfiction">Non-Fiction</option>
                                <option value="mystery">Mystery & Thriller</option>
                                <option value="romance">Romance</option>
                                <option value="scifi">Science Fiction</option>
                                <option value="fantasy">Fantasy</option>
                                <option value="biography">Biography</option>
                                <option value="history">History</option>
                                <option value="children">Children</option>
                                <option value="ya">Young Adult</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="filterAuthor">Author</label>
                            <div class="input-wrapper">
                                <i class="fas fa-pen-fancy"></i>
                                <input type="text" id="filterAuthor" name="author" placeholder="Author name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="filterFormat">Format</label>
                            <select id="filterFormat" name="format">
                                <option value="">All Formats</option>
                                <option value="ebook">eBook</option>
                                <option value="audiobook">Audiobook</option>
                                <option value="physical">Physical Book</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="filterAvailability">Availability</label>
                            <select id="filterAvailability" name="availability">
                                <option value="">All</option>
                                <option value="available">Available Now</option>
                                <option value="soon">Coming Soon</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="search-tags">
                    <span class="tag-label">Popular:</span>
                    <button type="button" class="search-tag" data-search="new releases">New Releases</button>
                    <button type="button" class="search-tag" data-search="bestsellers">Bestsellers</button>
                    <button type="button" class="search-tag" data-search="award winners">Award Winners</button>
                    <button type="button" class="search-tag" data-search="staff picks">Staff Picks</button>
                </div>
            </form>

            <div id="searchResults" class="search-results">
                <!-- Results populated by JavaScript -->
            </div>
        </div>
    </div>
</div>

<!-- Contact Librarian Modal -->
<div class="modal-overlay" id="contactModal" role="dialog" aria-modal="true" aria-labelledby="contactModalTitle">
    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-icon">
                <i class="fas fa-headset"></i>
            </div>
            <h2 id="contactModalTitle">Contact a Librarian</h2>
            <p>We're here to help with your questions</p>
            <button class="modal-close" data-modal-close aria-label="Close modal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="contact-options">
                <a href="tel:+1234567890" class="contact-option">
                    <i class="fas fa-phone"></i>
                    <span>Call Us</span>
                    <small>(123) 456-7890</small>
                </a>
                <a href="#" class="contact-option" data-action="chat">
                    <i class="fas fa-comments"></i>
                    <span>Live Chat</span>
                    <small>Available 9am-5pm</small>
                </a>
            </div>

            <div class="modal-divider">
                <span>or send a message</span>
            </div>

            <form id="contactForm" class="modal-form">
                <div class="form-group">
                    <label for="contactName">Your Name</label>
                    <div class="input-wrapper">
                        <i class="fas fa-user"></i>
                        <input type="text" id="contactName" name="name" placeholder="Full name" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="contactEmail">Email Address</label>
                    <div class="input-wrapper">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="contactEmail" name="email" placeholder="your@email.com" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="contactSubject">Subject</label>
                    <select id="contactSubject" name="subject" required>
                        <option value="">Select a topic</option>
                        <option value="account">Account Help</option>
                        <option value="borrowing">Borrowing Questions</option>
                        <option value="recommendations">Book Recommendations</option>
                        <option value="technical">Technical Support</option>
                        <option value="feedback">Feedback</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="contactMessage">Message</label>
                    <textarea id="contactMessage" name="message" rows="4" placeholder="How can we help you?" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary btn-block">
                    <i class="fas fa-paper-plane"></i>
                    Send Message
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Toast Notification Container -->
<div id="toastContainer" class="toast-container" aria-live="polite" aria-atomic="true"></div>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    // ========================================================================
    // MODAL SYSTEM - Open/Close with Animations, Accessibility, Focus Trap
    // ========================================================================
    const ModalSystem = {
        activeModal: null,
        previousFocus: null,
        focusableElements: 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',

        init() {
            // Modal open triggers
            document.querySelectorAll('[data-modal-open]').forEach(trigger => {
                trigger.addEventListener('click', (e) => {
                    e.preventDefault();
                    const modalId = trigger.dataset.modalOpen;
                    this.open(modalId);
                });
            });

            // Modal close triggers
            document.querySelectorAll('[data-modal-close]').forEach(trigger => {
                trigger.addEventListener('click', (e) => {
                    if (!trigger.dataset.modalOpen) {
                        e.preventDefault();
                    }
                    this.close();
                });
            });

            // Backdrop click to close
            document.querySelectorAll('.modal-overlay').forEach(overlay => {
                overlay.addEventListener('click', (e) => {
                    if (e.target === overlay) {
                        this.close();
                    }
                });
            });

            // Escape key to close
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && this.activeModal) {
                    this.close();
                }
            });

            // Connect existing buttons to modals
            this.connectButtons();
        },

        connectButtons() {
            // Connect login buttons
            document.querySelectorAll('a[href="/login"], a[href="/signin"], .login-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.open('loginModal');
                });
            });

            // Connect register buttons
            document.querySelectorAll('a[href="/register"], a[href="/signup"], .register-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.open('registerModal');
                });
            });

            // Connect search elements
            document.querySelectorAll('.search-trigger, [data-action="search"]').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.open('searchModal');
                });
            });

            // Connect contact elements
            document.querySelectorAll('.contact-trigger, [data-action="contact"]').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.open('contactModal');
                });
            });

            // Keyboard shortcut for search (Ctrl/Cmd + K)
            document.addEventListener('keydown', (e) => {
                if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                    e.preventDefault();
                    this.open('searchModal');
                }
            });
        },

        open(modalId) {
            const modal = document.getElementById(modalId);
            if (!modal) return;

            // Store current focus
            this.previousFocus = document.activeElement;

            // Close any open modal first
            if (this.activeModal) {
                this.close(true);
            }

            // Open modal
            this.activeModal = modal;
            modal.classList.add('active');
            document.body.classList.add('modal-open');

            // Focus first focusable element
            setTimeout(() => {
                const firstFocusable = modal.querySelector(this.focusableElements);
                if (firstFocusable) firstFocusable.focus();
            }, 100);

            // Setup focus trap
            this.setupFocusTrap(modal);
        },

        close(immediate = false) {
            if (!this.activeModal) return;

            const modal = this.activeModal;

            if (immediate) {
                modal.classList.remove('active');
                document.body.classList.remove('modal-open');
                this.activeModal = null;
            } else {
                modal.classList.add('closing');

                setTimeout(() => {
                    modal.classList.remove('active', 'closing');
                    document.body.classList.remove('modal-open');
                    this.activeModal = null;

                    // Restore focus
                    if (this.previousFocus) {
                        this.previousFocus.focus();
                    }
                }, 300);
            }
        },

        setupFocusTrap(modal) {
            const focusables = modal.querySelectorAll(this.focusableElements);
            const firstFocusable = focusables[0];
            const lastFocusable = focusables[focusables.length - 1];

            modal.addEventListener('keydown', (e) => {
                if (e.key !== 'Tab') return;

                if (e.shiftKey) {
                    if (document.activeElement === firstFocusable) {
                        e.preventDefault();
                        lastFocusable.focus();
                    }
                } else {
                    if (document.activeElement === lastFocusable) {
                        e.preventDefault();
                        firstFocusable.focus();
                    }
                }
            });
        }
    };

    // Initialize Modal System
    ModalSystem.init();

    // Expose to window for external use
    window.VLModal = ModalSystem;

    // ========================================================================
    // TOAST NOTIFICATION SYSTEM
    // ========================================================================
    const ToastSystem = {
        container: null,
        queue: [],
        maxVisible: 3,

        init() {
            this.container = document.getElementById('toastContainer');
            if (!this.container) {
                this.container = document.createElement('div');
                this.container.id = 'toastContainer';
                this.container.className = 'toast-container';
                this.container.setAttribute('aria-live', 'polite');
                this.container.setAttribute('aria-atomic', 'true');
                document.body.appendChild(this.container);
            }
        },

        show(message, type = 'info', duration = 4000) {
            if (!this.container) this.init();

            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;

            const icons = {
                success: 'fa-check-circle',
                error: 'fa-exclamation-circle',
                warning: 'fa-exclamation-triangle',
                info: 'fa-info-circle'
            };

            toast.innerHTML = `
                <div class="toast-icon">
                    <i class="fas ${icons[type] || icons.info}"></i>
                </div>
                <div class="toast-content">
                    <p>${message}</p>
                </div>
                <button class="toast-close" aria-label="Close notification">
                    <i class="fas fa-times"></i>
                </button>
                <div class="toast-progress">
                    <div class="toast-progress-bar" style="animation-duration: ${duration}ms;"></div>
                </div>
            `;

            // Close button handler
            toast.querySelector('.toast-close').addEventListener('click', () => {
                this.dismiss(toast);
            });

            this.container.appendChild(toast);

            // Trigger animation
            requestAnimationFrame(() => {
                toast.classList.add('active');
            });

            // Auto dismiss
            setTimeout(() => {
                this.dismiss(toast);
            }, duration);

            return toast;
        },

        dismiss(toast) {
            if (!toast || toast.classList.contains('dismissing')) return;

            toast.classList.add('dismissing');
            toast.classList.remove('active');

            setTimeout(() => {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 300);
        },

        success(message, duration) {
            return this.show(message, 'success', duration);
        },

        error(message, duration) {
            return this.show(message, 'error', duration);
        },

        warning(message, duration) {
            return this.show(message, 'warning', duration);
        },

        info(message, duration) {
            return this.show(message, 'info', duration);
        }
    };

    // Initialize Toast System
    ToastSystem.init();

    // Expose to window
    window.VLToast = ToastSystem;

    // ========================================================================
    // FORM HANDLERS
    // ========================================================================

    // Login Form
    const loginForm = document.getElementById('loginForm');
    if (loginForm) {
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const submitBtn = loginForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
            submitBtn.disabled = true;

            try {
                // Simulate API call - replace with actual API
                await new Promise(resolve => setTimeout(resolve, 1500));

                VLToast.success('Welcome back! Redirecting...');
                VLModal.close();

                // Redirect or update UI
                setTimeout(() => {
                    window.location.href = '/dashboard';
                }, 1000);
            } catch (error) {
                VLToast.error('Login failed. Please check your credentials.');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }
        });
    }

    // Register Form
    const registerForm = document.getElementById('registerForm');
    if (registerForm) {
        registerForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const submitBtn = registerForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            // Validate passwords match
            const password = document.getElementById('regPassword').value;
            const confirmPassword = document.getElementById('regConfirmPassword').value;

            if (password !== confirmPassword) {
                VLToast.error('Passwords do not match.');
                return;
            }

            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Account...';
            submitBtn.disabled = true;

            try {
                await new Promise(resolve => setTimeout(resolve, 1500));

                VLToast.success('Account created successfully! Please check your email to verify.');
                VLModal.close();

                setTimeout(() => {
                    VLModal.open('loginModal');
                }, 500);
            } catch (error) {
                VLToast.error('Registration failed. Please try again.');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }
        });
    }

    // Contact Form
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
            submitBtn.disabled = true;

            try {
                await new Promise(resolve => setTimeout(resolve, 1500));

                VLToast.success('Message sent! A librarian will respond within 24 hours.');
                VLModal.close();
                contactForm.reset();
            } catch (error) {
                VLToast.error('Failed to send message. Please try again.');
            } finally {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }
        });
    }

    // Search Form
    const searchForm = document.getElementById('searchForm');
    if (searchForm) {
        searchForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const query = document.getElementById('searchQuery').value;
            const genre = document.getElementById('filterGenre').value;
            const format = document.getElementById('filterFormat').value;
            const availability = document.getElementById('filterAvailability').value;

            // Build query string
            const params = new URLSearchParams();
            if (query) params.append('q', query);
            if (genre) params.append('genre', genre);
            if (format) params.append('format', format);
            if (availability) params.append('availability', availability);

            window.location.href = `/catalog?${params.toString()}`;
        });

        // Quick search tags
        document.querySelectorAll('.search-tag').forEach(tag => {
            tag.addEventListener('click', () => {
                document.getElementById('searchQuery').value = tag.dataset.search;
                searchForm.dispatchEvent(new Event('submit'));
            });
        });
    }

    // Password toggle
    document.querySelectorAll('.password-toggle').forEach(toggle => {
        toggle.addEventListener('click', function() {
            const input = this.parentElement.querySelector('input');
            const icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });

    // ========================================================================
    // MOBILE MENU TOGGLE
    // ========================================================================
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle, .hamburger, [data-action="toggle-menu"]');
    const mobileNav = document.querySelector('.mobile-nav, .nav-mobile, .nav-menu');

    if (mobileMenuToggle && mobileNav) {
        mobileMenuToggle.addEventListener('click', () => {
            mobileMenuToggle.classList.toggle('active');
            mobileNav.classList.toggle('active');
            document.body.classList.toggle('menu-open');
        });

        // Close on link click
        mobileNav.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenuToggle.classList.remove('active');
                mobileNav.classList.remove('active');
                document.body.classList.remove('menu-open');
            });
        });
    }

    // ========================================================================
    // SMOOTH SCROLL FOR ANCHOR LINKS
    // ========================================================================
    document.querySelectorAll('a[href^="#"], .scroll-link').forEach(link => {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (href && href.startsWith('#')) {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });
    });

    // ========================================================================
    // INTERSECTION OBSERVER FOR SCROLL ANIMATIONS
    // ========================================================================
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('aos-animate');
            }
        });
    }, observerOptions);

    document.querySelectorAll('[data-aos]').forEach(el => {
        observer.observe(el);
    });

    // ========================================================================
    // ANIMATE STATS NUMBERS ON SCROLL
    // ========================================================================
    const statsObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateStats(entry.target);
                statsObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    document.querySelectorAll('.hero-stats').forEach(el => {
        statsObserver.observe(el);
    });

    function animateStats(container) {
        container.querySelectorAll('.stat-number').forEach(stat => {
            const target = parseInt(stat.dataset.count) || 0;
            const suffix = stat.textContent.replace(/[0-9,]/g, '');
            let current = 0;
            const increment = Math.ceil(target / 50);
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    current = target;
                    clearInterval(timer);
                }
                stat.textContent = current.toLocaleString() + suffix;
            }, 30);
        });
    }

    // ========================================================================
    // LOAD POPULAR ITEMS
    // ========================================================================
    try {
        const response = await api.get('/api/v1/items?sort=popular&limit=4');
        if (response.items && response.items.length) {
            const grid = document.getElementById('popular-items');
            grid.innerHTML = response.items.map(item => `
                <article class="item-card">
                    <a href="/items/${item.id}" class="item-card-link">
                        <div class="item-image">
                            <img src="${item.photo_url || '/static/images/placeholder.svg'}" alt="${escapeHtml(item.name)}" loading="lazy">
                            <span class="item-badge badge-${item.item_type.toLowerCase()}">${item.item_type}</span>
                        </div>
                        <div class="item-details">
                            <h3 class="item-name">${escapeHtml(item.name)}</h3>
                            <p class="item-meta">
                                <span class="item-credits">${item.credits} credit${item.credits !== 1 ? 's' : ''}</span>
                                <span class="item-availability ${item.available ? 'available' : 'unavailable'}">
                                    ${item.available ? 'Available' : 'On Loan'}
                                </span>
                            </p>
                        </div>
                    </a>
                </article>
            `).join('');
        }
    } catch (err) {
        console.log('Could not load popular items');
        document.querySelector('#popular-items .loading-placeholder')?.remove();
    }

    // ========================================================================
    // PARALLAX EFFECT FOR HERO DECORATIONS
    // ========================================================================
    const heroDecorations = document.querySelectorAll('.floating-icon');

    if (heroDecorations.length && window.innerWidth > 768) {
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            heroDecorations.forEach((icon, index) => {
                const speed = 0.1 + (index * 0.05);
                icon.style.transform = `translateY(${scrolled * speed}px)`;
            });
        });
    }

    // ========================================================================
    // ANALYTICS BAR CHART ANIMATION
    // ========================================================================
    const barsObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.querySelectorAll('.bar').forEach((bar, index) => {
                    setTimeout(() => {
                        bar.style.transform = 'scaleY(1)';
                    }, index * 100);
                });
                barsObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.3 });

    const dashboardBars = document.querySelector('.dashboard-bars');
    if (dashboardBars) {
        // Set initial state
        dashboardBars.querySelectorAll('.bar').forEach(bar => {
            bar.style.transformOrigin = 'bottom';
            bar.style.transform = 'scaleY(0)';
            bar.style.transition = 'transform 0.5s ease-out';
        });
        barsObserver.observe(dashboardBars);
    }
});
</script>
{% endblock %}