<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Paper Burner X - 开源的、在浏览器中即开即用的 AI 工作站，专为扫除海量的 PDF 文献、复杂的公式和跨语言的障碍。支持前端 Agent 驱动的智能检索、高性能批量处理和完全本地化部署。">
    <title>Paper Burner X - 开源 AI 文献工作站</title>
    <link rel="icon" type="image/svg+xml" href="../../public/pure.svg">
    <!-- Tailwind CSS & 依赖库 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://gcore.jsdelivr.net/npm/iconify-icon@2.0.0/dist/iconify-icon.min.js"></script>
    <!-- GitHub Stars 统一获取模块 -->
    <script src="../../js/utils/github-stars.js"></script>
    <!-- 后端模式未登录门禁（在有后端部署时，直接要求登录） -->
    <script src="/js/boot/backend-gate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        /* 谷歌字体 Inter (更专业、现代) */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
        /* 基础字体设置 */
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        /* 背景渐变 - 更加细腻 */
        .gradient-bg {
            /* background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%); */
            background-color: #F3F6FA; /* 主题背景色 */
        }
        /* 卡片渐变 */
        .gradient-card {
            background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
        }
        /* 通用过渡效果 */
        .transition-all {
            transition: all 0.3s ease;
        }
        /* 文件列表项样式 */
        .file-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            background-color: #f8f9fa;
            margin-bottom: 0.5rem;
            border: 1px solid #e9ecef;
        }
        .file-list-item:last-child {
            margin-bottom: 0;
        }
        /* API Key 输入框样式 */
        textarea.api-key-input {
            min-height: 60px; /* 最小高度 */
            resize: vertical; /* 允许垂直方向调整大小 */
        }
        /* 闪烁提示动画基类 */
        .flash-tip-anim {
            opacity: 0;
            transition: opacity 0.5s;
            will-change: opacity;
        }
        /* 闪烁提示显示状态 */
        .flash-tip-anim.show {
            opacity: 1;
        }
        /* 闪烁提示隐藏状态 */
        .flash-tip-anim.hide {
            opacity: 0;
        }
        /* Skeleton Character Rows */
        .skeleton-bg .skeleton-row {
            border-radius: 8px;
            background: linear-gradient(90deg, #e5e7eb 25%, #f3f6fa 50%, #e5e7eb 75%);
            background-size: 200% 100%;
            animation: shimmer 1.8s infinite linear;
        }
        .skeleton-fake-text {
            color: #d1d5db;
            font-size: 1rem;
            font-family: 'Fira Mono', 'Consolas', monospace;
            font-weight: bold;
            opacity: 0.5;
            letter-spacing: 0.1em;
            animation: shimmer 1.8s infinite linear;
            user-select: none;
        }
        .skeleton-fake-text.text-lg {
            font-size: 1.25rem;
        }

        /* Premium Commercial Gradient Background - 增强纵深感 */
        .ocean-gradient-bg {
            background-color: #FAFBFC;
            background-image:
                radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 50%),
                radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.12) 0px, transparent 50%),
                radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.1) 0px, transparent 50%),
                radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.13) 0px, transparent 50%),
                radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.12) 0px, transparent 50%),
                radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.12) 0px, transparent 50%),
                radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.12) 0px, transparent 50%);
            background-attachment: fixed; /* 视差效果 */
        }

        /* Modern Sticky Header */
        .glass-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
            background: transparent;
        }
        .glass-header.scrolled {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(16px) saturate(180%);
            border-bottom: 1px solid rgba(209, 213, 219, 0.3);
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
        }

        /* Hero Premium Card */
        .hero-premium-card {
          background: rgba(255, 255, 255, 0.7);
          backdrop-filter: blur(20px) saturate(180%);
          border: 1px solid rgba(255, 255, 255, 0.8);
          box-shadow:
            0 20px 60px -12px rgba(50, 50, 93, 0.15),
            0 8px 24px -8px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        /* Hero Carousel */
        .hero-carousel-item {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            transition: opacity 0.6s ease-in-out;
            pointer-events: none;
        }
        .hero-carousel-item.active {
            opacity: 1;
            position: relative;
            pointer-events: auto;
        }

        /* Carousel Indicators */
        .carousel-indicators {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
            margin-top: 2rem;
        }
        .carousel-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(99, 102, 241, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .carousel-indicator.active {
            width: 32px;
            border-radius: 5px;
            background: rgba(99, 102, 241, 0.8);
        }
        .carousel-indicator:hover {
            background: rgba(99, 102, 241, 0.6);
        }

        /* Mobile optimization for carousel indicators */
        @media (max-width: 767px) {
            .carousel-indicators {
                gap: 0.35rem;
                margin-top: 1.5rem;
            }
            .carousel-indicator {
                width: 6px;
                height: 6px;
            }
            .carousel-indicator.active {
                width: 20px;
                border-radius: 3px;
            }
        }
        .stats-badge {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 197, 253, 0.12));
          border: 1px solid rgba(59, 130, 246, 0.2);
          backdrop-filter: blur(10px);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          cursor: default;
        }
        .stats-badge:hover {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 197, 253, 0.2));
          border-color: rgba(59, 130, 246, 0.35);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }
        .stats-badge iconify-icon {
          transition: transform 0.3s ease;
        }
        .stats-badge:hover iconify-icon {
          transform: scale(1.1);
        }

        /* Mobile optimization for badges */
        @media (max-width: 767px) {
          .feature-badges-container {
            display: none !important;
          }
          .hero-carousel-container {
            min-height: 420px !important;
          }
        }

        .select-anim {
          /* 原有文字渐变动画可删除或保留 */
        }
        .select-anim-bg {
          position: relative;
          display: inline-block;
          z-index: 1;
          font-weight: bold;
        }
        .select-anim-bg::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 100%;
          background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
          opacity: 0.2;
          z-index: -1;
          border-radius: 4px;
          transition: none;
          animation: select-bg-sweep 1.8s cubic-bezier(.4,0,.2,1) 1;
        }
        @keyframes select-bg-sweep {
          0%   { width: 0; }
          15%  { width: 0; }
          100% { width: 100%; }
        }
        .feature-card-modern {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            padding: clamp(24px, 3vw, 36px);
            background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFB 100%);
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow:
              0 1px 2px 0 rgba(0, 0, 0, 0.05),
              0 20px 40px -12px rgba(50, 50, 93, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 280px;
        }
        .feature-card-modern::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(59, 130, 246, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .feature-card-modern::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #6366F1, #3B82F6, #06B6D4);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .feature-card-modern:hover {
            transform: translateY(-4px);
            box-shadow:
              0 1px 2px 0 rgba(0, 0, 0, 0.05),
              0 32px 64px -16px rgba(50, 50, 93, 0.15);
            border-color: rgba(99, 102, 241, 0.2);
        }
        .feature-card-modern:hover::before {
            opacity: 1;
        }
        .feature-card-modern:hover::after {
            transform: scaleX(1);
        }
        .feature-card-modern > * {
            position: relative;
            z-index: 1;
        }
        .feature-icon-ring {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: clamp(56px, 4.5vw, 68px);
            height: clamp(56px, 4.5vw, 68px);
            border-radius: 16px;
            background: linear-gradient(135deg, #FFFFFF, #F8FAFB);
            box-shadow:
              0 2px 8px -2px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(226, 232, 240, 0.6);
        }
        .feature-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin-top: 1.1rem;
        }
        .feature-meta span {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.85rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            backdrop-filter: blur(8px);
        }
        .vision-card {
            position: relative;
            padding: clamp(20px, 2.4vw, 32px);
            border-radius: 20px;
            background: linear-gradient(130deg, rgba(243,246,250,0.85), rgba(255,255,255,0.96));
            border: 1px solid rgba(87,130,243,0.12);
            box-shadow: 0 10px 24px rgba(87,130,243,0.14);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            height: 100%;
        }
        .vision-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 28px rgba(87,130,243,0.18);
        }
        .vision-card h3 {
            font-weight: 600;
            letter-spacing: 0.01em;
        }
        .vision-card .vision-meta {
            margin-top: 1.1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }
        .vision-card .vision-meta span {
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            font-size: 0.75rem;
            background: rgba(87,130,243,0.18);
            color: #2f4bb8;
            font-weight: 600;
        }
        .vision-card--mission {
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: clamp(16px, 1.8vw, 24px);
        }
        .vision-card--mission p {
            text-align: left;
        }
        .vision-card--mission .vision-meta {
            justify-content: flex-start;
        }
        .vision-card--upgrade {
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: clamp(16px, 1.8vw, 24px);
        }

        .upgrade-grid {
            display: flex;
            flex-direction: column;
            gap: clamp(12px, 1.2vw, 16px);
            margin-top: 0.75rem;
        }
        .upgrade-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: clamp(14px, 1.6vw, 18px);
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(87,130,243,0.08), rgba(255,255,255,0.98));
            border: 1px solid rgba(87,130,243,0.12);
            box-shadow: 0 10px 24px rgba(87,130,243,0.14);
        }
        .upgrade-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: rgba(87,130,243,0.18);
            color: #2950d6;
        }
        .upgrade-item h4 {
            font-size: 1rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.2rem;
        }
        .upgrade-item p {
            font-size: 0.85rem;
            color: #4b5563;
            line-height: 1.6;
            margin: 0;
        }

        /* Header Elements */
        .header-logo img {
            height: 36px;
            width: auto;
            transition: all 0.3s ease;
        }
        @media (min-width: 768px) {
            .header-logo img { height: 42px; }
        }

        .header-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(99, 102, 241, 0.15);
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 500;
            color: #4338ca;
            box-shadow: 0 2px 6px rgba(99, 102, 241, 0.06);
            transition: all 0.2s ease;
            animation: banner-slide-down 0.5s ease-out forwards;
        }
        .header-pill:hover {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(99, 102, 241, 0.3);
            transform: translateY(1px);
        }
        @keyframes banner-slide-down {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .github-btn-modern {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(31, 41, 55, 0.9); /* Dark background for contrast */
            color: white;
            border-radius: 12px;
            font-size: 0.875rem;
            font-weight: 600;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .github-btn-modern:hover {
            background: rgba(0, 0, 0, 1);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

        /* How it works Section */
        .steps-section {
            position: relative;
            z-index: 1;
        }
        .step-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 24px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        }
        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
            background: rgba(255, 255, 255, 0.8);
        }
        .step-icon-wrapper {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            color: #0ea5e9;
            font-size: 2.5rem;
            position: relative;
        }
        .step-number {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 30px;
            height: 30px;
            background: #3b82f6;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9rem;
            border: 2px solid white;
        }

        /* Mobile optimization for steps */
        @media (max-width: 767px) {
            .step-card {
                padding: 1.5rem;
                display: flex;
                align-items: flex-start;
                text-align: left;
                gap: 1rem;
            }
            .step-icon-wrapper {
                width: 60px;
                height: 60px;
                font-size: 1.8rem;
                margin: 0; /* Reset margin for flex layout */
                flex-shrink: 0;
            }
            .step-card h3 {
                margin-top: 0.5rem;
                margin-bottom: 0.25rem;
            }
        }
    </style>
</head>
<body class="ocean-gradient-bg min-h-screen">

    <!-- ===================== -->
    <!-- Modern Sticky Header -->
    <!-- ===================== -->
    <header id="mainHeader" class="glass-header">
        <!-- Left: Logo -->
        <div class="header-logo flex-shrink-0">
            <img src="../../public/h_with_name.svg" alt="Paper Burner X">
        </div>

        <!-- Center: Update Pill (Optional, can be hidden if needed) -->
        <div id="headerBannerPill" class="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center">
             <div class="header-pill cursor-pointer" onclick="this.style.display='none'">
                <iconify-icon icon="carbon:information-filled" class="text-blue-500" width="16"></iconify-icon>
                <span>📚 全新 Agent 升级，支持多种检索工具</span>
                <iconify-icon icon="carbon:close" class="text-gray-400 hover:text-gray-600 ml-1" width="14"></iconify-icon>
            </div>
        </div>

        <!-- Right: Actions -->
        <div class="flex items-center gap-3 md:gap-4 flex-shrink-0">
            <!-- GitHub Button -->
            <a href="https://github.com/Feather-2/paper-burner" target="_blank" rel="noopener noreferrer" class="github-btn-modern group">
                <iconify-icon icon="carbon:logo-github" width="20"></iconify-icon>
                <span class="hidden sm:inline">Star on GitHub</span>
                <div id="githubStarsTag" class="hidden items-center gap-1 px-2 py-0.5 bg-white/20 rounded-full text-xs font-medium ml-1">
                    <iconify-icon icon="carbon:star-filled" class="text-yellow-400" width="12"></iconify-icon>
                    <span id="githubStarsCount"></span>
                </div>
            </a>
        </div>
    </header>

    <!-- ===================== -->
    <!-- Landing Page Content -->
    <!-- ===================== -->
    <div id="landingPageSection" class="min-h-screen flex flex-col items-center justify-start pt-24 sm:pt-32 p-4 sm:p-8 text-gray-800 relative" style="opacity: 0; transition: opacity 0.5s ease-in-out;">

        <div class="max-w-6xl w-full space-y-16 md:space-y-24 text-center landing-content-container relative z-[2]">

            <!-- Hero Section -->
            <section class="hero-section pt-12 md:pt-16 min-h-[85vh] flex flex-col justify-center">
                <div class="mb-6 md:mb-8 animate-float">
                    <img src="../../public/pure.svg" alt="Paper Burner X Logo" class="w-28 h-28 sm:w-36 sm:h-36 md:w-44 md:h-44 mx-auto drop-shadow-lg">
                </div>

                <!-- Hero Carousel Container -->
                <div class="hero-carousel-container relative" style="min-height: 520px;">

                    <!-- Slide 1: 阅读优先 -->
                    <div class="hero-carousel-item active">
                        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
                            先读懂，再借助 AI<br class="hidden sm:block">
                            <span class="select-anim-bg">让深度阅读与智能辅助完美结合</span>
                        </h1>
                        <p class="text-xs text-gray-500 mb-4 max-w-3xl mx-auto italic">
                            "在学习初期阶段延迟引入 AI 工具，优先促进自我驱动的认知建构。此种模式可在不牺牲工具效率的前提下，最大化长期神经发展与认知自主性（cognitive autonomy）"
                            <a href="https://arxiv.org/pdf/2506.08872v1" target="_blank" class="text-blue-600 hover:underline ml-1">[arXiv:2506.08872]</a>
                        </p>
                        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
                            原译对照阅读、学术公式增强、长文本智能检索，陪你读懂每一篇论文
                        </p>

                        <!-- Feature Badges -->
                        <div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:view" class="inline-block mr-1.5" width="16"></iconify-icon>
                                原译对照
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:rule" class="inline-block mr-1.5" width="16"></iconify-icon>
                                公式增强
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:bot" class="inline-block mr-1.5" width="16"></iconify-icon>
                                长文本 Agent
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:notebook" class="inline-block mr-1.5" width="16"></iconify-icon>
                                标注高亮
                            </div>
                        </div>

                        <!-- CTA Buttons -->
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
                                <iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
                                开始使用
                                <span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
                            </a>
                            <a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
                                <iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
                                了解功能特性
                            </a>
                        </div>
                    </div>

                    <!-- Slide 2: 高效翻译 -->
                    <div class="hero-carousel-item">
                        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
                            专业翻译，也可以很快<br class="hidden sm:block">
                            <span class="select-anim-bg">术语一致、批量处理、自由配置</span>
                        </h1>
                        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
                            不只是翻译，更懂你的专业领域和翻译偏好<br>
                            <span class="text-base text-gray-500">自定义术语库、提示词池、多模型并发，甚至支持整个代码库的翻译</span>
                        </p>

                        <!-- Feature Badges -->
                        <div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:book" class="inline-block mr-1.5" width="16"></iconify-icon>
                                术语库
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:flash" class="inline-block mr-1.5" width="16"></iconify-icon>
                                批量并发
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:settings-adjust" class="inline-block mr-1.5" width="16"></iconify-icon>
                                提示词池
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:code" class="inline-block mr-1.5" width="16"></iconify-icon>
                                GitHub 仓库
                            </div>
                        </div>

                        <!-- CTA Buttons -->
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
                                <iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
                                开始使用
                                <span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
                            </a>
                            <a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
                                <iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
                                了解功能特性
                            </a>
                        </div>
                    </div>

                    <!-- Slide 3: 分享协作 -->
                    <div class="hero-carousel-item">
                        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
                            知识需要流转和分享<br class="hidden sm:block">
                            <span class="select-anim-bg">让阅读成果轻松传递给团队</span>
                        </h1>
                        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
                            从个人阅读到团队协作，一步之遥<br>
                            <span class="text-base text-gray-500">多格式导出、保留文档结构、快速分享，让知识不止于个人</span>
                        </p>

                        <!-- Feature Badges -->
                        <div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:document-export" class="inline-block mr-1.5" width="16"></iconify-icon>
                                多格式导出
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:folder" class="inline-block mr-1.5" width="16"></iconify-icon>
                                保留结构
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:share" class="inline-block mr-1.5" width="16"></iconify-icon>
                                快速分享
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:cloud-offline" class="inline-block mr-1.5" width="16"></iconify-icon>
                                纯浏览器端
                            </div>
                        </div>

                        <!-- CTA Buttons -->
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
                                <iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
                                开始使用
                                <span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
                            </a>
                            <a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
                                <iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
                                了解功能特性
                            </a>
                        </div>
                    </div>

                    <!-- Slide 4: 简单部署 -->
                    <div class="hero-carousel-item">
                        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
                            无需繁琐部署，打开即用<br class="hidden sm:block">
                            <span class="select-anim-bg">你的 API Key，你的数据，你做主</span>
                        </h1>
                        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
                            纯前端项目，无需服务器，无需配置环境<br>
                            <span class="text-base text-gray-500">BYOK（自带密钥）设计，让你安心使用自己的 AI 服务，数据完全掌控</span>
                        </p>

                        <!-- Feature Badges -->
                        <div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:cloud-offline" class="inline-block mr-1.5" width="16"></iconify-icon>
                                纯前端项目
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:license" class="inline-block mr-1.5" width="16"></iconify-icon>
                                BYOK 设计
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:rocket" class="inline-block mr-1.5" width="16"></iconify-icon>
                                开箱即用
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:security" class="inline-block mr-1.5" width="16"></iconify-icon>
                                数据安全
                            </div>
                        </div>

                        <!-- CTA Buttons -->
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
                                <iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
                                开始使用
                                <span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
                            </a>
                            <a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
                                <iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
                                了解功能特性
                            </a>
                        </div>
                    </div>

                    <!-- Slide 5: Agent 智能助手 -->
                    <div class="hero-carousel-item">
                        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-5 md:mb-7 leading-tight tracking-tight hero-title">
                            和学术 Agent 一起<br class="hidden sm:block">
                            <span class="select-anim-bg">点燃你的阅读力！</span>
                        </h1>
                        <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto hero-subtitle leading-relaxed">
                            全新升级的智能 Agent，专为长文本场景深度优化<br>
                            <span class="text-base text-gray-500">内置向量检索、多轮对话、上下文理解，让 AI 真正读懂你的论文</span>
                        </p>

                        <!-- Feature Badges -->
                        <div class="feature-badges-container flex flex-wrap items-center justify-center gap-2.5 mb-10 max-w-4xl mx-auto px-4">
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:upgrade" class="inline-block mr-1.5" width="16"></iconify-icon>
                                Agent 升级
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:search-advanced" class="inline-block mr-1.5" width="16"></iconify-icon>
                                向量检索
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:chat-bot" class="inline-block mr-1.5" width="16"></iconify-icon>
                                多轮对话
                            </div>
                            <div class="stats-badge px-4 py-2.5 rounded-full text-xs md:text-sm font-semibold text-blue-700 whitespace-nowrap">
                                <iconify-icon icon="carbon:network-3" class="inline-block mr-1.5" width="16"></iconify-icon>
                                上下文理解
                            </div>
                        </div>

                        <!-- CTA Buttons -->
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="../../index.html" class="cta-enter-app group relative px-10 py-4 md:px-12 md:py-5 bg-gradient-to-r from-[#6366F1] to-[#3B82F6] text-white rounded-xl hover:from-[#4F46E5] hover:to-[#2563EB] transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-lg md:text-xl font-bold flex items-center shadow-2xl hover:shadow-blue-500/30 transform hover:scale-105">
                                <iconify-icon icon="carbon:launch" class="mr-3 group-hover:translate-x-1 transition-transform" width="28"></iconify-icon>
                                开始使用
                                <span class="ml-2 text-sm font-normal opacity-90">免费无需注册</span>
                            </a>
                            <a href="#features" class="px-8 py-4 bg-white/90 backdrop-blur-sm text-gray-700 border-2 border-gray-200 rounded-xl hover:bg-white hover:border-blue-300 hover:text-blue-600 transition-all text-lg font-semibold flex items-center shadow-md hover:shadow-lg">
                                <iconify-icon icon="carbon:list-checked" class="mr-2" width="24"></iconify-icon>
                                了解功能特性
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Carousel Indicators -->
                <div class="carousel-indicators">
                    <div class="carousel-indicator active" data-slide="0"></div>
                    <div class="carousel-indicator" data-slide="1"></div>
                    <div class="carousel-indicator" data-slide="2"></div>
                    <div class="carousel-indicator" data-slide="3"></div>
                    <div class="carousel-indicator" data-slide="4"></div>
                </div>

                <!-- Social Proof / Stats -->
                <div class="mt-16 grid grid-cols-2 md:grid-cols-5 gap-6 max-w-5xl mx-auto">
                    <div class="text-center group">
                        <div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
                            <iconify-icon icon="carbon:bot" class="text-3xl text-purple-600"></iconify-icon>
                        </div>
                        <div class="text-sm text-gray-700 font-semibold">对话式阅读</div>
                    </div>
                    <div class="text-center group">
                        <div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-orange-50 to-orange-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
                            <iconify-icon icon="carbon:flash" class="text-3xl text-orange-600"></iconify-icon>
                        </div>
                        <div class="text-sm text-gray-700 font-semibold">高速并发翻译</div>
                    </div>
                    <div class="text-center group">
                        <div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
                            <iconify-icon icon="carbon:book" class="text-3xl text-blue-600"></iconify-icon>
                        </div>
                        <div class="text-sm text-gray-700 font-semibold">术语库协同</div>
                    </div>
                    <div class="text-center group">
                        <div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-indigo-50 to-indigo-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
                            <iconify-icon icon="carbon:document-multiple-02" class="text-3xl text-indigo-600"></iconify-icon>
                        </div>
                        <div class="text-sm text-gray-700 font-semibold">多格式支持</div>
                    </div>
                    <div class="text-center group col-span-2 md:col-span-1">
                        <div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center transform transition-transform group-hover:scale-110">
                            <iconify-icon icon="carbon:cloud-offline" class="text-3xl text-green-600"></iconify-icon>
                        </div>
                        <div class="text-sm text-gray-700 font-semibold">本地隐私保护</div>
                    </div>
                </div>

                <!-- Moved and Restyled Tip Paragraph -->
                <p class="text-xs text-gray-500 mt-16 max-w-2xl mx-auto">
                    💡 纯浏览器端运行，无需安装配置，即开即用
                </p>
            </section>

            <!-- How it works Section -->
            <section class="steps-section py-16 md:py-24">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 tracking-tight">
                        只需三步，开启深度阅读
                    </h2>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                        简单直观的工作流，让复杂的文献处理变得轻松自如
                    </p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
                    <!-- Step 1 -->
                    <div class="step-card group">
                        <div class="step-icon-wrapper group-hover:scale-110 transition-transform">
                            <iconify-icon icon="carbon:cloud-upload"></iconify-icon>
                            <div class="step-number">1</div>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">上传文档</h3>
                        <p class="text-gray-600 leading-relaxed">
                            拖拽 PDF、Word 或 Markdown 文件到浏览器。所有处理均在本地完成，安全快速。
                        </p>
                    </div>
                    <!-- Step 2 -->
                    <div class="step-card group">
                        <div class="step-icon-wrapper group-hover:scale-110 transition-transform" style="background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); color: #8b5cf6;">
                            <iconify-icon icon="carbon:data-enrichment"></iconify-icon>
                            <div class="step-number" style="background: #8b5cf6;">2</div>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">智能解析</h3>
                        <p class="text-gray-600 leading-relaxed">
                            AI 自动识别文档结构、提取目录、解析公式和表格，生成精准的对照译文。
                        </p>
                    </div>
                    <!-- Step 3 -->
                    <div class="step-card group">
                        <div class="step-icon-wrapper group-hover:scale-110 transition-transform" style="background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #10b981;">
                            <iconify-icon icon="carbon:chat-bot"></iconify-icon>
                            <div class="step-number" style="background: #10b981;">3</div>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">对话阅读</h3>
                        <p class="text-gray-600 leading-relaxed">
                            在阅读界面与 AI 助手实时对话。划词翻译、深度追问、整理笔记，一气呵成。
                        </p>
                    </div>
                </div>
            </section>

            <!-- Features Section - Updated -->
            <section id="features" class="features-section py-16 md:py-20 bg-white/70 backdrop-blur-md shadow-2xl rounded-3xl p-8 md:p-14">
                <div class="text-center mb-14">
                    <span class="inline-block px-5 py-2.5 bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-700 rounded-full text-sm font-bold mb-5 border border-blue-100">核心功能</span>
                    <h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-5 features-title">
                        让文献阅读更高效的工具
                    </h2>
                    <p class="text-base md:text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
                        从智能对话到翻译管理，覆盖文献阅读的全流程需求
                    </p>
                </div>

                <!-- Bento Grid Layout -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">

                    <!-- Feature 1: Agent (Span 2 cols) -->
                    <article class="feature-card-modern text-left h-full md:col-span-2">
                        <div class="flex flex-col md:flex-row gap-6 h-full">
                            <div class="flex-1">
                                <div class="feature-icon-ring mb-5 text-purple-600">
                                    <iconify-icon icon="carbon:bot" width="32"></iconify-icon>
                                </div>
                                <h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">智能对话式阅读</h3>
                                <p class="text-sm md:text-base text-gray-600 leading-relaxed mb-6">
                                    看不懂某个概念？想快速了解某段内容？直接问 AI 助手。内置多轮对话与长文本检索引擎，支持上下文理解和知识关联，让复杂论文的理解变得轻松自然。
                                </p>
                                <div class="feature-meta">
                                    <span class="bg-purple-50 text-purple-700 border border-purple-200">多轮对话</span>
                                    <span class="bg-purple-50 text-purple-700 border border-purple-200">智能检索</span>
                                    <span class="bg-purple-50 text-purple-700 border border-purple-200">上下文理解</span>
                                </div>
                            </div>
                            <!-- Optional: Add an illustrative image or graphic here for larger cards -->
                            <div class="hidden md:block w-1/3 bg-purple-50/50 rounded-xl border border-purple-100/50"></div>
                        </div>
                    </article>

                    <!-- Feature 3: Config (Span 1 col) - Moved up for Bento effect -->
                    <article class="feature-card-modern text-left h-full md:col-span-1">
                        <div class="feature-icon-ring mb-5 text-blue-600">
                            <iconify-icon icon="carbon:settings-adjust" width="32"></iconify-icon>
                        </div>
                        <h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">灵活的模型配置</h3>
                        <p class="text-sm md:text-base text-gray-600 leading-relaxed mb-4">
                            自由选择 AI 服务商，配置自定义模型端点和 API Key。支持多源轮询和提示词管理，打造专属工作流。
                        </p>
                        <div class="feature-meta mt-auto">
                            <span class="bg-blue-50 text-blue-700 border border-blue-200">BYOK</span>
                            <span class="bg-blue-50 text-blue-700 border border-blue-200">多源轮询</span>
                        </div>
                    </article>

                    <!-- Feature 2: Translation (Span 1 col) -->
                    <article class="feature-card-modern text-left h-full md:col-span-1">
                        <div class="feature-icon-ring mb-5 text-orange-600">
                            <iconify-icon icon="carbon:flash" width="32"></iconify-icon>
                        </div>
                        <h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">高效翻译与术语管理</h3>
                        <p class="text-sm md:text-base text-gray-600 leading-relaxed mb-4">
                            支持多文件并发翻译，配合智能任务队列，长篇论文也能在数十秒内完成。专业术语库协同工作，确保准确性。
                        </p>
                        <div class="feature-meta mt-auto">
                            <span class="bg-orange-50 text-orange-700 border border-orange-200">并发处理</span>
                            <span class="bg-orange-50 text-orange-700 border border-orange-200">术语库</span>
                        </div>
                    </article>

                    <!-- Feature 4: Toolchain (Span 2 cols) -->
                    <article class="feature-card-modern text-left h-full md:col-span-2">
                         <div class="flex flex-col md:flex-row-reverse gap-6 h-full">
                            <div class="flex-1">
                                <div class="feature-icon-ring mb-5 text-indigo-600">
                                    <iconify-icon icon="carbon:document-multiple-02" width="32"></iconify-icon>
                                </div>
                                <h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-3">完整的阅读工具链</h3>
                                <p class="text-sm md:text-base text-gray-600 leading-relaxed mb-6">
                                    原译对照、历史版本、TOC 快速导航、多彩标注笔记，支持 PDF、DOCX、Markdown 等多格式导入导出。一站式满足从阅读到整理的全部需求。
                                </p>
                                <div class="feature-meta">
                                    <span class="bg-indigo-50 text-indigo-700 border border-indigo-200">多格式支持</span>
                                    <span class="bg-indigo-50 text-indigo-700 border border-indigo-200">原译对照</span>
                                    <span class="bg-indigo-50 text-indigo-700 border border-indigo-200">版本管理</span>
                                </div>
                            </div>
                            <!-- Optional: Add an illustrative image or graphic here for larger cards -->
                            <div class="hidden md:block w-1/3 bg-indigo-50/50 rounded-xl border border-indigo-100/50"></div>
                        </div>
                    </article>
                </div>
                <!-- Button for Features Section -->
                <div class="mt-10 text-center">
                    <a href="../../index.html" id="enterOcrFeaturesBtn" class="px-6 py-3 bg-gradient-to-r from-[#2563eb] to-[#38bdf8] text-white rounded-xl hover:from-[#1d4ed8] hover:to-[#0ea5e9] transition-all focus:outline-none focus:ring-4 focus:ring-blue-500/50 text-md font-semibold inline-flex items-center mx-auto shadow-lg hover:shadow-xl transform hover:scale-105">
                        <iconify-icon icon="carbon:rocket" class="mr-2" width="20"></iconify-icon>
                        开始使用 Paper Burner X
                    </a>
                </div>
            </section>

            <!-- Vision & Roadmap Section -->
            <section class="combined-info-section py-12 md:py-16">
                <div class="max-w-5xl mx-auto space-y-10">
                    <div class="text-center">
                        <h2 class="text-3xl md:text-4xl font-semibold text-gray-800 flex items-center justify-center">
                            <iconify-icon icon="carbon:compass" class="mr-3 text-[#5782F3]" width="36"></iconify-icon>
                            愿景与路线
                        </h2>
                        <p class="mt-4 text-sm md:text-base text-gray-500 max-w-2xl mx-auto leading-relaxed">
                            我们持续打磨浏览器端的 Paper Burner X，让文献处理真正做到「即开即用、一步到位」。
                        </p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
                        <article class="vision-card vision-card--mission md:col-span-2">
                            <h3 class="text-xl md:text-2xl text-gray-700 mb-3 flex items-center">
                                <iconify-icon icon="carbon:earth" class="mr-2 text-[#5782F3]" width="24"></iconify-icon>
                                我们的愿景
                            </h3>
                            <p class="text-gray-600 text-sm md:text-base leading-relaxed">
                                我们希望每个研究者都能轻松地阅读和理解文献，把更多时间用在真正重要的研究上。Paper Burner X 集成了智能对话、翻译、术语管理与阅读工具，完全运行在浏览器中，无需安装、配置简单，随时随地都能开始工作。
                            </p>
                            <div class="vision-meta">
                                <span>纯浏览器端</span>
                                <span>开箱即用</span>
                                <span>智能辅助</span>
                                <span>隐私保护</span>
                            </div>
                            <p class="mt-4 text-xs text-gray-400 italic">
                                灵感来自
                                <a href="https://github.com/baoyudu/paper-burner" target="_blank" class="text-[#5782F3] hover:text-blue-600 underline">Paper Burner</a>
                                开源项目，我们在此基础上持续优化迭代<br>
                                OCR功能基于
                                <a href="https://mistral.ai" target="_blank" class="text-[#5782F3] hover:text-blue-600 underline">Mistral OCR</a>
                                ，我们将在此基础上持续适配更多OCR
                            </p>
                        </article>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- <script src="https://unpkg.com/iconify-icon@1.0.7/dist/iconify-icon.min.js"></script> -->
    <script>
      // Landing Page Logic
      (function() {
        var landingPage = document.getElementById('landingPageSection');
        var githubStarsSpan = document.getElementById('githubStars');
        var enterOcrFeaturesBtn = document.getElementById('enterOcrFeaturesBtn');

        // Initialize a global store for stoppable animations (e.g., looping ones)
        window.stoppableLandingPageAnimations = [];

        // Fetch GitHub Stars (使用统一模块)
        var githubStarsTag = document.getElementById('githubStarsTag');
        var githubStarsCount = document.getElementById('githubStarsCount');
        if (githubStarsTag && githubStarsCount && window.GitHubStars) {
            window.GitHubStars.getStars()
                .then(result => {
                    githubStarsCount.textContent = result.formatted;
                    githubStarsTag.classList.remove('hidden');
                    githubStarsTag.classList.add('flex');
                })
                .catch(error => {
                    console.error('[LandingPage] Error fetching GitHub stars:', error);
                });
        }

        // Header Scroll Effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('mainHeader');
            if (window.scrollY > 20) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        function setLandingPageShownAndRedirect(event) {
            event.preventDefault(); // Prevent default link behavior
            localStorage.setItem('paperBurnerLandingPageShown', 'true');
            // Stop any ongoing stoppable animations before redirecting
            if (window.stoppableLandingPageAnimations) {
                window.stoppableLandingPageAnimations.forEach(anim => anim.pause());
            }
            window.location.href = event.currentTarget.href; // Proceed to the link's href
        }

        // Bind click events to all CTA buttons
        var enterAppButtons = document.querySelectorAll('.cta-enter-app');
        enterAppButtons.forEach(function(btn) {
            btn.addEventListener('click', setLandingPageShownAndRedirect);
        });

        if (enterOcrFeaturesBtn) {
            enterOcrFeaturesBtn.addEventListener('click', setLandingPageShownAndRedirect);
        }

        function initLandingPageAnimations() {
            if (!landingPage) return;

            landingPage.style.opacity = '1'; // Fade in landing page

            // Hero Carousel Logic
            var currentSlide = 0;
            var slides = document.querySelectorAll('.hero-carousel-item');
            var indicators = document.querySelectorAll('.carousel-indicator');
            var autoPlayInterval;
            var isFirstCycle = true;  // Track if it's the first cycle
            var cycleCount = 0;       // Count how many slides have been shown

            function showSlide(index) {
                // Remove active class from all slides and indicators
                slides.forEach(function(slide) {
                    slide.classList.remove('active');
                });
                indicators.forEach(function(indicator) {
                    indicator.classList.remove('active');
                });

                // Add active class to current slide and indicator
                slides[index].classList.add('active');
                indicators[index].classList.add('active');
                currentSlide = index;
            }

            function nextSlide() {
                var next = (currentSlide + 1) % slides.length;
                showSlide(next);

                cycleCount++;

                // If we've completed a full cycle (5 slides shown), switch to slow speed
                if (isFirstCycle && cycleCount >= slides.length) {
                    isFirstCycle = false;
                    stopAutoPlay();
                    startAutoPlay(); // Restart with slower speed
                }
            }

            // Auto play with dynamic speed
            function startAutoPlay() {
                var interval = isFirstCycle ? 5000 : 8000; // 5s for first cycle, 8s afterwards
                autoPlayInterval = setInterval(nextSlide, interval);
            }

            function stopAutoPlay() {
                if (autoPlayInterval) {
                    clearInterval(autoPlayInterval);
                }
            }

            // Indicator click events
            indicators.forEach(function(indicator, index) {
                indicator.addEventListener('click', function() {
                    stopAutoPlay();
                    showSlide(index);
                    startAutoPlay(); // Restart auto play after manual selection
                });
            });

            // Start auto play
            startAutoPlay();

            // Pause on hover
            var carouselContainer = document.querySelector('.hero-carousel-container');
            if (carouselContainer) {
                carouselContainer.addEventListener('mouseenter', stopAutoPlay);
                carouselContainer.addEventListener('mouseleave', startAutoPlay);
            }

            // Hero Section Animations (Immediate)
            anime({
                targets: '.hero-title',
                translateY: [20, 0],
                opacity: [0, 1],
                duration: 800,
                easing: 'easeOutExpo',
                delay: 200
            });
            anime({
                targets: '.hero-subtitle',
                translateY: [20, 0],
                opacity: [0, 1],
                duration: 800,
                easing: 'easeOutExpo',
                delay: 400
            });
            anime({
                targets: '.hero-cta',
                translateY: [20, 0],
                opacity: [0, 1],
                duration: 800,
                easing: 'easeOutExpo',
                delay: 600
            });
            const rocketAnimation = anime({
                targets: '.animate-float', // Rocket icon
                translateY: ['-10px', '10px'],
                direction: 'alternate',
                loop: true,
                duration: 2000,
                easing: 'easeInOutSine'
            });
            window.stoppableLandingPageAnimations.push(rocketAnimation); // Add looping animation to stoppable list

            // Intersection Observer options
            const observerOptions = {
                root: null, // relative to document viewport
                rootMargin: '0px',
                threshold: 0.1 // 10% of item is visible
            };

            // Observer for Features Section
            const featuresSection = document.querySelector('.features-section');
            if (featuresSection) {
                const featuresObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            anime({
                                targets: '.features-title',
                                opacity: [0, 1],
                                translateY: [20,0],
                                duration: 800,
                                easing: 'easeOutExpo',
                                delay: 100
                            });
                            // No longer animating .feature-card directly, but its children
                            // observer.unobserve(entry.target); // Unobserve the whole section once title is animated
                        }
                    });
                }, observerOptions);
                featuresObserver.observe(featuresSection);
            }

            // Observer for individual Feature Cards skeleton animation
            document.querySelectorAll('.feature-card').forEach(card => {
                const cardObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const skeleton = entry.target.querySelector('.skeleton-loader');
                            const content = entry.target.querySelector('.actual-content');

                            // Skeleton animation: pulse + fade out
                            const tl = anime.timeline({
                                easing: 'easeOutExpo',
                            });

                            tl.add({
                                targets: skeleton.querySelectorAll('.skeleton-icon, .skeleton-title, .skeleton-line'),
                                opacity: [0.5, 1, 0.5, 1, 0.3], // Pulse effect
                                duration: 700,
                                delay: anime.stagger(50, {from: 'center'})
                            })
                            .add({
                                targets: skeleton,
                                opacity: 0,
                                duration: 400,
                                complete: function() {
                                    skeleton.style.display = 'none'; // Hide skeleton after fade
                                }
                            }, '-=200') // Overlap with previous animation slightly
                            .add({
                                targets: content,
                                opacity: [0, 1],
                                translateY: [10, 0],
                                duration: 500,
                                begin: function(){
                                    content.style.opacity = '0'; // Ensure it starts from 0 if quickly re-intersecting (though unobserve helps)
                                }
                            }, '-=300'); // Start content animation before skeleton fully disappears

                            observer.unobserve(entry.target); // Animate only once per card
                        }
                    });
                }, {...observerOptions, threshold: 0.2}); // Trigger when 20% of card is visible
                cardObserver.observe(card);
            });

            // Observer for About Section
            const aboutSection = document.querySelector('.about-section');
            if (aboutSection) {
                const aboutObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            anime({
                                targets: '.about-card',
                                opacity: [0, 1],
                                translateY: [30, 0],
                                duration: 800,
                                easing: 'easeOutExpo',
                                delay: 200
                            });
                            observer.unobserve(entry.target); // Animate only once
                        }
                    });
                }, observerOptions);
                aboutObserver.observe(aboutSection);
            }
        }
        // Show landing page and initialize animations
        if (landingPage) {
             setTimeout(initLandingPageAnimations, 100); // Delay animations slightly
        }

      })();
    </script>
</body>
</html>
