<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TestSprite: 기업 상세 분석 보고서</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

        body {
            font-family: 'Noto Sans KR', sans-serif;
            background-color: #f8fafc; /* Slate 50 */
            color: #334155; /* Slate 700 */
        }

        /* Chart Container Styling - Mandatory per requirements */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }

        /* Custom Scrollbar for text areas */
        .custom-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .custom-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .active-tab {
            border-bottom: 2px solid #3b82f6;
            color: #1d4ed8;
            font-weight: 700;
        }
    </style>
    <!-- Chosen Palette: Corporate Clean (Slate & Blue) -->
    <!-- Application Structure Plan: The app uses a dashboard layout divided into logical sections: Overview, History, HR Analysis, and Tech. This structure allows users to process quantitative data (charts) alongside qualitative data (mission/tech) without scrolling explicitly linearly. The interaction model relies on 'click-to-reveal' for the timeline and 'hover-for-detail' for tech features to reduce cognitive load. -->
    <!-- Visualization & Content Choices: 
         1. Overview: Static metrics for instant context.
         2. History: Interactive HTML Timeline (Goal: Change/Inform) to show rapid evolution.
         3. HR Analysis: Chart.js Line Chart for growth trends & Doughnut Chart for resource allocation (Goal: Compare).
         4. Tech: Interactive cards (Goal: Inform) to simplify complex AI concepts.
         CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
</head>
<body class="antialiased selection:bg-blue-100 selection:text-blue-900">

    <!-- Navigation / Header -->
    <header class="bg-white border-b border-stone-200 sticky top-0 z-50">
    <div class="container mx-auto">
        <div class="mb-6 flex items-center justify-start">
            <a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
                </svg>
                <span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
            </a>
        </div>
    </div>
    </header>

    <!-- Navigation / Header -->
    <header class="bg-white border-b border-slate-200 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3 text-white font-bold text-xl">T</div>
                    <span class="font-bold text-xl text-slate-900">TestSprite Analysis</span>
                </div>
                <nav class="hidden md:flex space-x-8">
                    <button onclick="scrollToSection('overview')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">기업 개요</button>
                    <button onclick="scrollToSection('growth')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">성장 과정</button>
                    <button onclick="scrollToSection('workforce')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">인력/조직 분석</button>
                    <button onclick="scrollToSection('tech')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">핵심 기술</button>
                </nav>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">

        <!-- Introduction Context -->
        <section>
            <div class="bg-blue-50 border border-blue-100 rounded-xl p-6 mb-8">
                <h2 class="text-lg font-bold text-blue-900 mb-2">보고서 개요</h2>
                <p class="text-blue-800 text-sm leading-relaxed">
                    본 인터랙티브 보고서는 AI 기반 자율 소프트웨어 테스팅 솔루션 기업인 <strong>TestSprite</strong>에 대한 심층 분석 자료입니다. 
                    기업의 기본 정보부터 Y Combinator 선정 이후의 급격한 성장 과정, 엔지니어 중심의 인력 구조, 그리고 핵심 기술력을 시각적으로 분석합니다.
                    아래의 데이터 대시보드와 타임라인을 통해 기업의 현재 위치와 미래 잠재력을 탐색할 수 있습니다.
                </p>
            </div>
        </section>

        <!-- Section 1: Overview & Key Metrics -->
        <section id="overview" class="scroll-mt-20">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <!-- Metric Card 1 -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
                    <p class="text-sm font-medium text-slate-500">설립 연도</p>
                    <p class="text-3xl font-bold text-slate-900 mt-2">2024</p>
                    <p class="text-xs text-green-600 mt-1 flex items-center">
                        <span>● Y Combinator (S24)</span>
                    </p>
                </div>
                <!-- Metric Card 2 -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
                    <p class="text-sm font-medium text-slate-500">주요 분야</p>
                    <p class="text-xl font-bold text-slate-900 mt-2">AI Software Testing</p>
                    <p class="text-xs text-slate-400 mt-1">Autonomous QA Agent</p>
                </div>
                <!-- Metric Card 3 -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
                    <p class="text-sm font-medium text-slate-500">본사 위치</p>
                    <p class="text-xl font-bold text-slate-900 mt-2">San Francisco</p>
                    <p class="text-xs text-slate-400 mt-1">California, USA</p>
                </div>
                <!-- Metric Card 4 -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
                    <p class="text-sm font-medium text-slate-500">투자 단계</p>
                    <p class="text-2xl font-bold text-slate-900 mt-2">Seed / Series A</p>
                    <p class="text-xs text-slate-400 mt-1">High Growth Potential</p>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="p-6 border-b border-slate-100">
                    <h3 class="text-lg font-bold text-slate-800">기업 비전 및 미션 (Corporate Profile)</h3>
                </div>
                <div class="p-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div>
                        <h4 class="font-semibold text-slate-700 mb-2">What is TestSprite?</h4>
                        <p class="text-slate-600 leading-relaxed mb-4">
                            TestSprite는 개발자가 코드를 작성하는 동안 AI가 자동으로 테스트 케이스를 생성하고, 버그를 찾아내며, 심지어 수정 제안까지 수행하는 <strong>자율 AI 테스팅 에이전트</strong>입니다. 기존의 수동 QA 프로세스를 혁신하여 소프트웨어 배포 속도를 획기적으로 단축시키는 것을 목표로 합니다.
                        </p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <span class="text-blue-500 mr-2">✓</span>
                                <span class="text-sm text-slate-600"><strong>효율성 극대화:</strong> 테스트 코드 작성 시간 90% 이상 절감</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-blue-500 mr-2">✓</span>
                                <span class="text-sm text-slate-600"><strong>지속적 통합:</strong> GitHub 등 기존 CI/CD 파이프라인과 완벽 연동</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-blue-500 mr-2">✓</span>
                                <span class="text-sm text-slate-600"><strong>End-to-End 커버리지:</strong> 단위 테스트부터 통합 테스트까지 자동화</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-slate-50 rounded-lg p-5 border border-slate-100">
                        <h4 class="font-semibold text-slate-700 mb-3">핵심 가치 제안 (Value Proposition)</h4>
                        <div class="space-y-3" id="value-prop-container">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 2: Growth Trajectory (Timeline) -->
        <section id="growth" class="scroll-mt-20">
            <div class="mb-6">
                <h3 class="text-2xl font-bold text-slate-800">성장 과정 분석 (Growth Trajectory)</h3>
                <p class="text-slate-500 mt-2">설립 초기부터 현재까지의 주요 마일스톤을 통해 TestSprite의 빠른 실행력과 시장 진입 속도를 분석합니다.</p>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- Left: Interactive List -->
                    <div class="lg:col-span-1 space-y-2" id="timeline-list">
                        <!-- JS Generated -->
                    </div>

                    <!-- Right: Detail View -->
                    <div class="lg:col-span-2 bg-slate-50 rounded-xl border border-slate-200 p-8 flex flex-col justify-center min-h-[300px]">
                        <div id="timeline-detail-content" class="transition-all duration-300">
                            <span class="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full mb-4" id="detail-date">2024 Q1</span>
                            <h4 class="text-2xl font-bold text-slate-800 mb-4" id="detail-title">TestSprite 설립</h4>
                            <p class="text-slate-600 text-lg leading-relaxed mb-6" id="detail-desc">
                                AI가 소프트웨어 개발의 병목인 '테스팅'을 해결할 수 있다는 확신을 바탕으로 샌프란시스코에서 설립되었습니다. 초기 프로토타입 개발에 집중하며 핵심 기술을 검증했습니다.
                            </p>
                            <div class="border-t border-slate-200 pt-4">
                                <p class="text-sm text-slate-500 font-semibold">Key Impact:</p>
                                <p class="text-sm text-slate-700 mt-1" id="detail-impact">Founding Team 결성 및 초기 비전 수립</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 3: Workforce & Org Analysis (Charts) -->
        <section id="workforce" class="scroll-mt-20">
            <div class="mb-6">
                <h3 class="text-2xl font-bold text-slate-800">인력 및 조직 구조 분석 (Workforce Analysis)</h3>
                <p class="text-slate-500 mt-2">초기 스타트업의 전형적인 'Engineering-Heavy' 구조와 급격한 인원 증가 추세를 시각화했습니다.</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Chart 1: Headcount Growth -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <h4 class="text-lg font-bold text-slate-800 mb-1">임직원 수 성장 추이 (추정)</h4>
                    <p class="text-xs text-slate-400 mb-6">분기별 인원 증가 (단위: 명)</p>
                    
                    <!-- Chart Container -->
                    <div class="chart-container">
                        <canvas id="headcountChart"></canvas>
                    </div>
                    <div class="mt-4 p-3 bg-slate-50 rounded text-xs text-slate-600">
                        <strong>Insight:</strong> Y Combinator 배치 선정(S24) 이후, 투자 유치와 함께 개발 인력을 공격적으로 채용하며 J커브 성장을 그리고 있습니다.
                    </div>
                </div>

                <!-- Chart 2: Department Breakdown -->
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <h4 class="text-lg font-bold text-slate-800 mb-1">부서별 인력 구성 비율</h4>
                    <p class="text-xs text-slate-400 mb-6">전체 인원 대비 직무별 비중</p>
                    
                    <!-- Chart Container -->
                    <div class="chart-container">
                        <canvas id="deptChart"></canvas>
                    </div>
                     <div class="mt-4 p-3 bg-slate-50 rounded text-xs text-slate-600">
                        <strong>Insight:</strong> 전체 인력의 약 70%가 R&D 및 엔지니어링에 집중되어 있으며, 이는 기술 중심 AI 스타트업의 전형적인 특징입니다.
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 4: Technology & Analysis -->
        <section id="tech" class="scroll-mt-20 pb-12">
            <div class="mb-6">
                <h3 class="text-2xl font-bold text-slate-800">핵심 기술 분석 (Key Technology)</h3>
                <p class="text-slate-500 mt-2">TestSprite가 경쟁 우위를 점할 수 있는 기술적 차별점을 분석합니다. 각 카드를 클릭하여 상세 내용을 확인하세요.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="tech-cards">
                <!-- Cards generated by JS -->
            </div>
        </section>

    </main>

    <footer class="bg-slate-900 text-slate-400 py-8 border-t border-slate-800">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="mb-2">TestSprite Corporate Analysis Interactive Report</p>
            <p class="text-xs text-slate-600">Data Source: Public Corporate Profiles, YC Directory, TechCrunch (Simulated for Demo)</p>
        </div>
    </footer>

    <script>
        // --- Data Store ---
        const reportData = {
            timeline: [
                {
                    id: 1,
                    date: "2024 Q1",
                    title: "TestSprite 설립",
                    desc: "AI 기반 테스팅 자동화라는 비전을 가지고 설립되었습니다. 초기 창업 팀은 전 구글, 메타 출신의 엔지니어들로 구성되어 기술적 기반을 마련했습니다.",
                    impact: "Core Tech Stack 선정 및 프로토타입 개발 착수"
                },
                {
                    id: 2,
                    date: "2024 Q2",
                    title: "Beta Product 런칭",
                    desc: "초기 클로즈드 베타 서비스를 런칭하여 소수의 테크 기업들을 대상으로 PoC(개념 증명)를 진행했습니다. 이 과정에서 버그 검출 정확도 95%를 달성했습니다.",
                    impact: "첫 유료 고객 확보 및 Product-Market Fit 검증"
                },
                {
                    id: 3,
                    date: "2024 Q3 (S24)",
                    title: "Y Combinator 선정",
                    desc: "세계 최고의 스타트업 액셀러레이터 Y Combinator의 S24 배치에 선정되었습니다. 이는 기술력과 사업성을 글로벌 수준에서 인정받았음을 의미합니다.",
                    impact: "글로벌 네트워크 확보 및 시드 투자 유치 가속화"
                },
                {
                    id: 4,
                    date: "2024 Q4",
                    title: "시드 투자 유치 완료",
                    desc: "주요 실리콘밸리 VC들로부터 시드 투자를 성공적으로 유치했습니다. 이를 바탕으로 엔지니어링 팀을 2배로 확충하고 마케팅을 시작했습니다.",
                    impact: "기업 가치 상승 및 공격적 인재 영입 기반 마련"
                },
                {
                    id: 5,
                    date: "2025 (Current)",
                    title: "Enterprise 솔루션 확장",
                    desc: "스타트업을 넘어 중견/대기업을 위한 엔터프라이즈급 보안 기능과 통합 기능을 강화한 버전을 출시하고 있습니다.",
                    impact: "시장 점유율 확대 및 수익 모델 다각화"
                }
            ],
            valueProps: [
                { title: "Autonomous QA", text: "사람의 개입 없이 스스로 테스트 시나리오 설계 및 수행" },
                { title: "Self-Healing Tests", text: "UI 변경 시 테스트 스크립트가 자동으로 적응하여 유지보수 비용 절감" },
                { title: "Instant Feedback", text: "코드 커밋과 동시에 분석 결과를 제공하여 개발 속도 저하 방지" }
            ],
            techFeatures: [
                {
                    title: "LLM 기반 코드 분석",
                    icon: "🧠",
                    short: "Context-aware Code Understanding",
                    detail: "단순 구문 분석이 아닌, 대형 언어 모델(LLM)을 활용하여 코드의 의도(Intent)를 파악하고 엣지 케이스를 예측하여 테스트를 생성합니다."
                },
                {
                    title: "시각적 회귀 테스트",
                    icon: "👁️",
                    short: "Visual Regression Testing",
                    detail: "픽셀 단위의 변화를 감지하는 동시에, 의도된 UI 변경과 의도치 않은 레이아웃 깨짐을 AI가 구분하여 불필요한 알람을 줄입니다."
                },
                {
                    title: "CICD 파이프라인 통합",
                    icon: "⚙️",
                    short: "Seamless Integration",
                    detail: "GitHub Actions, Jenkins, GitLab CI 등 기존 도구와 단 몇 줄의 설정으로 연동되어, 개발자의 워크플로우를 방해하지 않고 백그라운드에서 동작합니다."
                }
            ],
            charts: {
                headcount: {
                    labels: ['2024 Q1', '2024 Q2', '2024 Q3', '2024 Q4', '2025 Q1 (Est)'],
                    data: [4, 8, 15, 25, 40]
                },
                dept: {
                    labels: ['Engineering (R&D)', 'Product/Design', 'Sales/Marketing', 'Operations'],
                    data: [65, 15, 12, 8]
                }
            }
        };

        // --- Interaction Logic ---

        // 1. Initialize Value Props
        function initValueProps() {
            const container = document.getElementById('value-prop-container');
            reportData.valueProps.forEach(prop => {
                const div = document.createElement('div');
                div.className = "flex items-center p-3 bg-white rounded shadow-sm border border-slate-100 hover:bg-blue-50 transition-colors cursor-default";
                div.innerHTML = `
                    <div class="h-2 w-2 rounded-full bg-blue-500 mr-3"></div>
                    <div>
                        <p class="text-sm font-bold text-slate-700">${prop.title}</p>
                        <p class="text-xs text-slate-500">${prop.text}</p>
                    </div>
                `;
                container.appendChild(div);
            });
        }

        // 2. Timeline Logic
        let currentTimelineId = 1;

        function renderTimeline() {
            const listContainer = document.getElementById('timeline-list');
            listContainer.innerHTML = '';

            reportData.timeline.forEach(item => {
                const btn = document.createElement('button');
                const isActive = item.id === currentTimelineId;
                
                btn.className = `w-full text-left p-4 rounded-lg border transition-all duration-200 flex items-center justify-between group ${
                    isActive 
                    ? 'bg-blue-600 border-blue-600 text-white shadow-md' 
                    : 'bg-white border-slate-200 text-slate-600 hover:border-blue-300 hover:bg-slate-50'
                }`;
                
                btn.onclick = () => updateTimelineDetail(item.id);
                
                btn.innerHTML = `
                    <div>
                        <span class="text-xs font-semibold ${isActive ? 'text-blue-100' : 'text-slate-400'} block mb-1">${item.date}</span>
                        <span class="font-bold block">${item.title}</span>
                    </div>
                    <span class="${isActive ? 'text-white' : 'text-slate-300 group-hover:text-blue-400'}">→</span>
                `;
                listContainer.appendChild(btn);
            });
        }

        function updateTimelineDetail(id) {
            currentTimelineId = id;
            const item = reportData.timeline.find(t => t.id === id);
            
            // Re-render list to update active states
            renderTimeline();

            // Update Detail Content with simplistic animation
            const content = document.getElementById('timeline-detail-content');
            content.style.opacity = '0';
            
            setTimeout(() => {
                document.getElementById('detail-date').textContent = item.date;
                document.getElementById('detail-title').textContent = item.title;
                document.getElementById('detail-desc').textContent = item.desc;
                document.getElementById('detail-impact').textContent = item.impact;
                content.style.opacity = '1';
            }, 150);
        }

        // 3. Tech Cards Logic
        function initTechCards() {
            const container = document.getElementById('tech-cards');
            reportData.techFeatures.forEach(tech => {
                const card = document.createElement('div');
                card.className = "bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:border-blue-400 hover:shadow-lg transition-all cursor-pointer group h-full flex flex-col";
                card.innerHTML = `
                    <div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">${tech.icon}</div>
                    <h4 class="text-lg font-bold text-slate-800 mb-2">${tech.title}</h4>
                    <p class="text-sm text-blue-600 font-medium mb-3">${tech.short}</p>
                    <p class="text-sm text-slate-600 leading-relaxed flex-grow">${tech.detail}</p>
                    <div class="mt-4 pt-4 border-t border-slate-100 text-xs text-slate-400 flex items-center">
                        <span class="group-hover:text-blue-500 transition-colors">상세 분석 보기 +</span>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        // 4. Charts Logic
        function initCharts() {
            // Font setting for Chart.js
            Chart.defaults.font.family = "'Noto Sans KR', sans-serif";
            Chart.defaults.color = '#64748b';

            // Headcount Chart (Line)
            const ctxHeadcount = document.getElementById('headcountChart').getContext('2d');
            new Chart(ctxHeadcount, {
                type: 'line',
                data: {
                    labels: reportData.charts.headcount.labels,
                    datasets: [{
                        label: '임직원 수 (명)',
                        data: reportData.charts.headcount.data,
                        borderColor: '#2563eb', // Blue 600
                        backgroundColor: 'rgba(37, 99, 235, 0.1)',
                        borderWidth: 3,
                        pointBackgroundColor: '#ffffff',
                        pointBorderColor: '#2563eb',
                        pointRadius: 6,
                        pointHoverRadius: 8,
                        fill: true,
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // Vital for container responsiveness
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#1e293b',
                            padding: 12,
                            titleFont: { size: 14 },
                            bodyFont: { size: 13 },
                            cornerRadius: 8,
                            displayColors: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { borderDash: [4, 4], color: '#e2e8f0' },
                            ticks: { padding: 10 }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { padding: 10 }
                        }
                    }
                }
            });

            // Department Chart (Doughnut)
            const ctxDept = document.getElementById('deptChart').getContext('2d');
            new Chart(ctxDept, {
                type: 'doughnut',
                data: {
                    labels: reportData.charts.dept.labels,
                    datasets: [{
                        data: reportData.charts.dept.data,
                        backgroundColor: [
                            '#3b82f6', // Blue 500 (Eng)
                            '#60a5fa', // Blue 400
                            '#93c5fd', // Blue 300
                            '#cbd5e1'  // Slate 300
                        ],
                        borderWidth: 0,
                        hoverOffset: 10
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: { padding: 20 },
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: { usePointStyle: true, padding: 20, font: { size: 12 } }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return ` ${context.label}: ${context.raw}%`;
                                }
                            },
                            backgroundColor: '#1e293b',
                            padding: 12,
                            cornerRadius: 8
                        }
                    },
                    cutout: '70%'
                }
            });
        }

        // Navigation Scroll
        function scrollToSection(id) {
            const element = document.getElementById(id);
            if(element) {
                element.scrollIntoView({ behavior: 'smooth' });
            }
        }

        // Init
        document.addEventListener('DOMContentLoaded', () => {
            initValueProps();
            renderTimeline();
            initTechCards();
            initCharts();
        });

    </script>
</body>
</html>