Hugging Face's logo

Spaces:
pyfvw
/
deepsite-project-9if0a
Running

App Files Community
deepsite-project-9if0a / index.html
pyfvw's picture
pyfvw
Initial DeepSite commit
6a2c082 verified
Raw
History Blame Contribute Delete
64.9 kB
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ReUnion - Marc Places | Intelligence Report</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/lucide@latest"></script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
 tailwind.config = {
 theme: {
 extend: {
 fontFamily: {
 sans: ['Inter', 'sans-serif'],
 },
 colors: {
 background: '#0a0a0a',
 surface: 'rgba(255, 255, 255, 0.03)',
 border: 'rgba(255, 255, 255, 0.08)',
 'text-primary': '#ffffff',
 'text-secondary': '#9ca3af',
 'text-tertiary': '#6b7280',
 success: '#4ade80',
 warning: '#fbbf24',
 },
 boxShadow: {
 'glass': '0 8px 32px rgba(0, 0, 0, 0.37)',
 'glow': '0 0 40px rgba(255, 75, 75, 0.3)',
 },
 backdropBlur: {
 'glass': '20px',
 }
 }
 }
 }
 </script>
<style>
 body {
 background-color: #0a0a0a;
 color: #ffffff;
 font-family: 'Inter', sans-serif;
 }
.gradient-text {
 background: linear-gradient(135deg, #ff4b4b 0%, #ff8c42 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
.gradient-border {
 position: relative;
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid rgba(255, 255, 255, 0.08);
 }
.gradient-border::before {
 content: '';
 position: absolute;
 inset: -1px;
 border-radius: inherit;
 padding: 1px;
 background: linear-gradient(135deg, #ff4b4b 0%, #ff8c42 100%);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 opacity: 0;
 transition: opacity 0.3s ease;
 }
.gradient-border:hover::before {
 opacity: 1;
 }
.glass-card {
 background: rgba(255, 255, 255, 0.03);
 backdrop-filter: blur(20px);
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
 }
.premium-button {
 background: linear-gradient(135deg, #ff4b4b 0%, #ff8c42 100%);
 box-shadow: 0 4px 24px rgba(255, 75, 75, 0.4);
 transition: all 0.3s ease;
 }
.premium-button:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 32px rgba(255, 75, 75, 0.5);
 }
.metric-pill {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.1);
 transition: all 0.3s ease;
 }
.metric-pill:hover {
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 75, 75, 0.3);
 }
.evidence-card {
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
.evidence-card:hover {
 transform: translateY(-4px) scale(1.02);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
 }
.evidence-card:hover .evidence-image {
 transform: scale(1.05);
 }
.evidence-image {
 transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
.status-badge {
 background: rgba(74, 222, 128, 0.1);
 border: 1px solid rgba(74, 222, 128, 0.2);
 color: #4ade80;
 }
.uncertain-badge {
 background: rgba(251, 191, 36, 0.1);
 border: 1px solid rgba(251, 191, 36, 0.2);
 color: #fbbf24;
 }
.radial-glow {
 background: radial-gradient(circle at 50% 0%, rgba(255, 75, 75, 0.15) 0%, transparent 50%);
 }
.check-icon {
 color: #4ade80;
 }
.question-icon {
 color: #fbbf24;
 }
/* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 }
::-webkit-scrollbar-track {
 background: rgba(255, 255, 255, 0.02);
 }
::-webkit-scrollbar-thumb {
 background: rgba(255, 255, 255, 0.1);
 border-radius: 4px;
 }
::-webkit-scrollbar-thumb:hover {
 background: rgba(255, 255, 255, 0.2);
 }
.animate-fade-in {
 animation: fadeIn 0.8s ease-out forwards;
 opacity: 0;
 }
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
.stagger-1 { animation-delay: 0.1s; }
 .stagger-2 { animation-delay: 0.2s; }
 .stagger-3 { animation-delay: 0.3s; }
 .stagger-4 { animation-delay: 0.4s; }
 </style>
</head>
<body class="antialiased overflow-x-hidden">
<!-- Navigation -->
 <nav class="fixed top-0 left-0 right-0 z-50 glass-card border-b border-white/5 backdrop-blur-xl">
 <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
 <div class="flex items-center gap-3">
 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-[#ff4b4b] to-[#ff8c42] flex items-center justify-center">
 <i data-lucide="scan-face" class="w-5 h-5 text-white"></i>
 </div>
 <span class="text-xl font-bold tracking-tight">ReUnion</span>
 </div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-400">
 <a href="#" class="hover:text-white transition-colors">Try Demo</a>
 <a href="#" class="hover:text-white transition-colors">Pricing</a>
 <a href="#" class="hover:text-white transition-colors">API</a>
 </div>
<button class="premium-button px-5 py-2 rounded-full text-sm font-semibold text-white flex items-center gap-2">
 <i data-lucide="search" class="w-4 h-4"></i>
 New Search
 </button>
 </div>
 </nav>
<!-- Main Content -->
 <main class="pt-24 pb-20 radial-glow min-h-screen">
<!-- Hero Section -->
 <section class="max-w-7xl mx-auto px-6 mb-12 animate-fade-in">
 <div class="glass-card rounded-3xl p-8 md:p-12 relative overflow-hidden">
 <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-[#ff4b4b]/10 to-transparent rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
<div class="relative grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
 <!-- Profile Image -->
 <div class="lg:col-span-3 flex justify-center lg:justify-start">
 <div class="relative">
 <div class="w-40 h-40 md:w-48 md:h-48 rounded-3xl overflow-hidden border-2 border-white/10 shadow-2xl">
 <img src="http://static.photos/people/400x400/42" alt="Marc Places" class="w-full h-full object-cover">
 </div>
 <div class="absolute -bottom-3 -right-3 w-12 h-12 rounded-full bg-[#0a0a0a] border border-white/10 flex items-center justify-center">
 <i data-lucide="check-circle-2" class="w-6 h-6 text-success"></i>
 </div>
 </div>
 </div>
<!-- Identity Info -->
 <div class="lg:col-span-6 text-center lg:text-left">
 <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full status-badge text-xs font-semibold uppercase tracking-wider mb-4">
 <span class="w-1.5 h-1.5 rounded-full bg-success animate-pulse"></span>
 Potential Match Found
 </div>
<h1 class="text-4xl md:text-6xl font-bold tracking-tight mb-3 leading-tight">
 Marc <span class="gradient-text">Places</span>
 </h1>
<p class="text-text-secondary text-lg mb-6 max-w-2xl">
 High-confidence profile match detected across multiple platforms
 </p>
<!-- Confidence Pills -->
 <div class="flex flex-wrap justify-center lg:justify-start gap-3 mb-6">
 <div class="metric-pill px-4 py-2 rounded-full flex items-center gap-2 text-sm">
 <i data-lucide="shield-check" class="w-4 h-4 text-success"></i>
 <span class="font-semibold text-white">90%</span>
 <span class="text-text-secondary">Match Confidence</span>
 </div>
 <div class="metric-pill px-4 py-2 rounded-full flex items-center gap-2 text-sm">
 <i data-lucide="layers" class="w-4 h-4 text-[#ff8c42]"></i>
 <span class="font-semibold text-white">10</span>
 <span class="text-text-secondary">Results Found</span>
 </div>
 <div class="metric-pill px-4 py-2 rounded-full flex items-center gap-2 text-sm">
 <i data-lucide="globe" class="w-4 h-4 text-blue-400"></i>
 <span class="font-semibold text-white">3</span>
 <span class="text-text-secondary">Platforms Matched</span>
 </div>
 <div class="metric-pill px-4 py-2 rounded-full flex items-center gap-2 text-sm">
 <i data-lucide="database" class="w-4 h-4 text-purple-400"></i>
 <span class="font-semibold text-white">High</span>
 <span class="text-text-secondary">Data Quality</span>
 </div>
 </div>
<p class="text-text-secondary text-sm max-w-xl leading-relaxed">
 Athlete and coach active across Instagram, YouTube, and TikTok, associated with endurance challenges, travel, and sports coaching.
 </p>
 </div>
<!-- Actions -->
 <div class="lg:col-span-3 flex flex-col gap-3">
 <button class="premium-button w-full py-3 rounded-xl font-semibold text-white flex items-center justify-center gap-2">
 <span>View Full Profile</span>
 <i data-lucide="arrow-right" class="w-4 h-4"></i>
 </button>
 <button class="glass-card hover:bg-white/5 w-full py-3 rounded-xl font-medium text-white border border-white/10 transition-all flex items-center justify-center gap-2">
 <i data-lucide="download" class="w-4 h-4"></i>
 <span>Export Report</span>
 </button>
 <button class="text-text-secondary hover:text-white text-sm font-medium py-2 transition-colors flex items-center justify-center gap-2">
 <i data-lucide="refresh-cw" class="w-4 h-4"></i>
 Start New Search
 </button>
 </div>
 </div>
 </div>
 </section>
<!-- Quick Metrics Strip -->
 <section class="max-w-7xl mx-auto px-6 mb-12 animate-fade-in stagger-1">
 <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
 <div class="glass-card rounded-2xl p-4 flex flex-col items-center text-center hover:border-[#ff4b4b]/30 transition-colors">
 <div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center mb-2">
 <i data-lucide="target" class="w-5 h-5 text-[#ff4b4b]"></i>
 </div>
 <div class="text-2xl font-bold text-white">85</div>
 <div class="text-xs text-text-secondary uppercase tracking-wider">Avg Score</div>
 </div>
<div class="glass-card rounded-2xl p-4 flex flex-col items-center text-center hover:border-success/30 transition-colors">
 <div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center mb-2">
 <i data-lucide="percent" class="w-5 h-5 text-success"></i>
 </div>
 <div class="text-2xl font-bold text-white">90%</div>
 <div class="text-xs text-text-secondary uppercase tracking-wider">Confidence</div>
 </div>
<div class="glass-card rounded-2xl p-4 flex flex-col items-center text-center hover:border-blue-400/30 transition-colors">
 <div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center mb-2">
 <i data-lucide="share-2" class="w-5 h-5 text-blue-400"></i>
 </div>
 <div class="text-sm font-bold text-white mt-1">IG, YT, TT</div>
 <div class="text-xs text-text-secondary uppercase tracking-wider">Platforms</div>
 </div>
<div class="glass-card rounded-2xl p-4 flex flex-col items-center text-center hover:border-purple-400/30 transition-colors">
 <div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center mb-2">
 <i data-lucide="zap" class="w-5 h-5 text-purple-400"></i>
 </div>
 <div class="text-lg font-bold text-white">Strong</div>
 <div class="text-xs text-text-secondary uppercase tracking-wider">Evidence</div>
 </div>
<div class="glass-card rounded-2xl p-4 flex flex-col items-center text-center hover:border-warning/30 transition-colors">
 <div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center mb-2">
 <i data-lucide="alert-circle" class="w-5 h-5 text-warning"></i>
 </div>
 <div class="text-lg font-bold text-white">Low</div>
 <div class="text-xs text-text-secondary uppercase tracking-wider">Missing Fields</div>
 </div>
 </div>
 </section>
<!-- Structured Profile Overview -->
 <section class="max-w-7xl mx-auto px-6 mb-12 animate-fade-in stagger-2">
 <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
 <i data-lucide="user-circle" class="w-6 h-6 text-[#ff8c42]"></i>
 Profile Overview
 </h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Identity Card -->
 <div class="glass-card rounded-2xl p-6 gradient-border group">
 <div class="flex items-center gap-3 mb-4">
 <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center">
 <i data-lucide="fingerprint" class="w-5 h-5 text-blue-400"></i>
 </div>
 <h3 class="font-semibold text-lg">Identity</h3>
 </div>
 <div class="space-y-3">
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-1">Full Name</div>
 <div class="text-white font-medium">Marc Places</div>
 </div>
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-1">Bio</div>
 <div class="text-text-secondary text-sm leading-relaxed">Nageur et coureur engagé dans des défis sportifs et des causes sociales.</div>
 </div>
 <div class="flex items-center gap-2 pt-2">
 <div class="status-badge px-2 py-1 rounded text-xs font-medium">90% Confidence</div>
 </div>
 </div>
 </div>
<!-- Professional Card -->
 <div class="glass-card rounded-2xl p-6 gradient-border group">
 <div class="flex items-center gap-3 mb-4">
 <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center">
 <i data-lucide="briefcase" class="w-5 h-5 text-emerald-400"></i>
 </div>
 <h3 class="font-semibold text-lg">Professional</h3>
 </div>
 <div class="space-y-3">
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-1">Role</div>
 <div class="text-white font-medium">Coach sportif</div>
 </div>
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-1">Company</div>
 <div class="text-white font-medium">Coaching by Marc Places</div>
 </div>
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-1">Sector</div>
 <div class="text-text-secondary text-sm">Sport</div>
 </div>
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-1">Skills</div>
 <div class="flex flex-wrap gap-2 mt-1">
 <span class="px-2 py-1 bg-white/5 rounded text-xs text-text-secondary border border-white/5">coaching</span>
 <span class="px-2 py-1 bg-white/5 rounded text-xs text-text-secondary border border-white/5">natation</span>
 <span class="px-2 py-1 bg-white/5 rounded text-xs text-text-secondary border border-white/5">course</span>
 </div>
 </div>
 </div>
 </div>
<!-- Social Presence Card -->
 <div class="glass-card rounded-2xl p-6 gradient-border group">
 <div class="flex items-center gap-3 mb-4">
 <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center">
 <i data-lucide="at-sign" class="w-5 h-5 text-pink-400"></i>
 </div>
 <h3 class="font-semibold text-lg">Social Presence</h3>
 </div>
 <div class="space-y-3">
 <div class="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
 <div class="flex items-center gap-2">
 <i data-lucide="instagram" class="w-4 h-4 text-pink-400"></i>
 <span class="text-sm text-white">@marcplaces</span>
 </div>
 <i data-lucide="external-link" class="w-3 h-3 text-text-tertiary"></i>
 </div>
 <div class="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
 <div class="flex items-center gap-2">
 <i data-lucide="youtube" class="w-4 h-4 text-red-500"></i>
 <span class="text-sm text-white">@marcplaces</span>
 </div>
 <i data-lucide="external-link" class="w-3 h-3 text-text-tertiary"></i>
 </div>
 <div class="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
 <div class="flex items-center gap-2">
 <i data-lucide="music-2" class="w-4 h-4 text-cyan-400"></i>
 <span class="text-sm text-white">@marcplaces</span>
 </div>
 <i data-lucide="external-link" class="w-3 h-3 text-text-tertiary"></i>
 </div>
 <div class="pt-2 text-xs text-text-tertiary flex items-center gap-1">
 <i data-lucide="check-circle" class="w-3 h-3 text-success"></i>
 Consistent username across platforms
 </div>
 </div>
 </div>
<!-- Sports & Interests Card -->
 <div class="glass-card rounded-2xl p-6 gradient-border group">
 <div class="flex items-center gap-3 mb-4">
 <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center">
 <i data-lucide="activity" class="w-5 h-5 text-orange-400"></i>
 </div>
 <h3 class="font-semibold text-lg">Sports & Interests</h3>
 </div>
 <div class="space-y-4">
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-2">Sports</div>
 <div class="flex flex-wrap gap-2">
 <span class="px-3 py-1.5 bg-white/5 rounded-full text-xs text-white border border-white/10 flex items-center gap-1">
 <i data-lucide="waves" class="w-3 h-3"></i> natation
 </span>
 <span class="px-3 py-1.5 bg-white/5 rounded-full text-xs text-white border border-white/10 flex items-center gap-1">
 <i data-lucide="footprints" class="w-3 h-3"></i> course
 </span>
 <span class="px-3 py-1.5 bg-white/5 rounded-full text-xs text-white border border-white/10 flex items-center gap-1">
 <i data-lucide="dumbbell" class="w-3 h-3"></i> musculation
 </span>
 </div>
 </div>
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-2">Hobbies</div>
 <div class="flex flex-wrap gap-2">
 <span class="px-3 py-1.5 bg-white/5 rounded-full text-xs text-text-secondary border border-white/5">voyage</span>
 <span class="px-3 py-1.5 bg-white/5 rounded-full text-xs text-text-secondary border border-white/5">boxe</span>
 <span class="px-3 py-1.5 bg-white/5 rounded-full text-xs text-text-secondary border border-white/5">fitness</span>
 </div>
 </div>
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-2">Lifestyle Tags</div>
 <div class="flex gap-2">
 <span class="px-2 py-1 rounded bg-[#ff4b4b]/10 text-[#ff8c42] text-xs border border-[#ff4b4b]/20">sportif</span>
 <span class="px-2 py-1 rounded bg-blue-500/10 text-blue-400 text-xs border border-blue-500/20">voyageur</span>
 </div>
 </div>
 </div>
 </div>
<!-- Location & Languages Card -->
 <div class="glass-card rounded-2xl p-6 gradient-border group">
 <div class="flex items-center gap-3 mb-4">
 <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center">
 <i data-lucide="map-pin" class="w-5 h-5 text-cyan-400"></i>
 </div>
 <h3 class="font-semibold text-lg">Location</h3>
 </div>
 <div class="space-y-3">
 <div class="p-3 rounded-xl bg-white/5 border border-white/5">
 <div class="flex items-center gap-2 mb-1">
 <i data-lucide="eye" class="w-3 h-3 text-warning"></i>
 <span class="text-xs text-warning uppercase tracking-wider">Recently Observed</span>
 </div>
 <div class="text-white font-medium">Dubai</div>
 <div class="text-text-secondary text-sm">United Arab Emirates</div>
 </div>
 <div>
 <div class="text-xs text-text-tertiary uppercase tracking-wider mb-2">Languages</div>
 <div class="flex gap-2">
 <span class="px-3 py-1 rounded-lg bg-white/5 border border-white/10 text-sm text-text-secondary">français</span>
 <span class="px-3 py-1 rounded-lg bg-white/5 border border-white/10 text-sm text-text-secondary">anglais</span>
 </div>
 </div>
 <div class="text-xs text-text-tertiary pt-2 border-t border-white/5">
 * Location based on recent activity patterns
 </div>
 </div>
 </div>
<!-- Notable Facts Card -->
 <div class="glass-card rounded-2xl p-6 gradient-border group">
 <div class="flex items-center gap-3 mb-4">
 <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
 <i data-lucide="star" class="w-5 h-5 text-purple-400"></i>
 </div>
 <h3 class="font-semibold text-lg">Notable Facts</h3>
 </div>
 <div class="space-y-3">
 <div class="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/5">
 <i data-lucide="waves" class="w-4 h-4 text-cyan-400 mt-0.5"></i>
 <div>
 <div class="text-sm text-white font-medium">Traversée du lac d'Annecy</div>
 <div class="text-xs text-text-tertiary">Endurance swimming</div>
 </div>
 </div>
 <div class="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/5">
 <i data-lucide="heart-handshake" class="w-4 h-4 text-pink-400 mt-0.5"></i>
 <div>
 <div class="text-sm text-white font-medium">10km UNICEF</div>
 <div class="text-xs text-text-tertiary">Charity run participation</div>
 </div>
 </div>
 <div class="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/5">
 <i data-lucide="plane" class="w-4 h-4 text-blue-400 mt-0.5"></i>
 <div>
 <div class="text-sm text-white font-medium">Travel Activity</div>
 <div class="text-xs text-text-tertiary">Dubai, Thailand</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Confidence and Uncertainty Panel -->
 <section class="max-w-7xl mx-auto px-6 mb-12 animate-fade-in stagger-3">
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
 <!-- Confirmed Signals -->
 <div class="glass-card rounded-2xl p-6 border-l-4 border-l-success">
 <div class="flex items-center gap-3 mb-6">
 <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center">
 <i data-lucide="shield-check" class="w-6 h-6 text-success"></i>
 </div>
 <div>
 <h3 class="font-semibold text-lg text-white">Confirmed Signals</h3>
 <p class="text-sm text-text-secondary">High reliability indicators</p>
 </div>
 </div>
<div class="space-y-4">
 <div class="flex items-start gap-3">
 <i data-lucide="check-circle-2" class="w-5 h-5 text-success mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Name Consistency</div>
 <div class="text-text-tertiary text-sm">"Marc Places" appears consistently across all matched sources</div>
 </div>
 </div>
 <div class="flex items-start gap-3">
 <i data-lucide="check-circle-2" class="w-5 h-5 text-success mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Username Pattern</div>
 <div class="text-text-tertiary text-sm">@marcplaces handle identical on Instagram, YouTube, and TikTok</div>
 </div>
 </div>
 <div class="flex items-start gap-3">
 <i data-lucide="check-circle-2" class="w-5 h-5 text-success mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Content Coherence</div>
 <div class="text-text-tertiary text-sm">Strong sports/coaching thematic pattern detected</div>
 </div>
 </div>
 <div class="flex items-start gap-3">
 <i data-lucide="check-circle-2" class="w-5 h-5 text-success mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Visual Correlation</div>
 <div class="text-text-tertiary text-sm">Multiple matching visual sources with high similarity scores</div>
 </div>
 </div>
 </div>
 </div>
<!-- To Be Confirmed -->
 <div class="glass-card rounded-2xl p-6 border-l-4 border-l-warning">
 <div class="flex items-center gap-3 mb-6">
 <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
 <i data-lucide="help-circle" class="w-6 h-6 text-warning"></i>
 </div>
 <div>
 <h3 class="font-semibold text-lg text-white">To Be Confirmed</h3>
 <p class="text-sm text-text-secondary">Insufficient or uncertain data</p>
 </div>
 </div>
<div class="space-y-4">
 <div class="flex items-start gap-3">
 <i data-lucide="minus-circle" class="w-5 h-5 text-warning mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Age Range</div>
 <div class="text-text-tertiary text-sm">No reliable date of birth or age indicators found</div>
 </div>
 </div>
 <div class="flex items-start gap-3">
 <i data-lucide="minus-circle" class="w-5 h-5 text-warning mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Primary Residence</div>
 <div class="text-text-tertiary text-sm">Dubai observed recently, but permanent residence unconfirmed</div>
 </div>
 </div>
 <div class="flex items-start gap-3">
 <i data-lucide="minus-circle" class="w-5 h-5 text-warning mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Audience Size</div>
 <div class="text-text-tertiary text-sm">Followers count estimates unavailable or inconsistent</div>
 </div>
 </div>
 <div class="flex items-start gap-3">
 <i data-lucide="minus-circle" class="w-5 h-5 text-warning mt-0.5 shrink-0"></i>
 <div>
 <div class="text-white font-medium text-sm">Formal Credentials</div>
 <div class="text-text-tertiary text-sm">Certifications and formal education not verified</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Evidence Gallery -->
 <section class="max-w-7xl mx-auto px-6 mb-12 animate-fade-in stagger-3">
 <div class="flex items-center justify-between mb-6">
 <h2 class="text-2xl font-bold flex items-center gap-3">
 <i data-lucide="image" class="w-6 h-6 text-[#ff8c42]"></i>
 Evidence Gallery
 </h2>
 <div class="flex items-center gap-2 text-sm text-text-secondary">
 <span>Top 6 matches</span>
 <div class="w-px h-4 bg-white/10"></div>
 <button class="text-white hover:text-[#ff8c42] transition-colors flex items-center gap-1">
 View All <i data-lucide="arrow-right" class="w-4 h-4"></i>
 </button>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Evidence Card 1 -->
 <div class="evidence-card glass-card rounded-2xl overflow-hidden group cursor-pointer">
 <div class="relative aspect-video overflow-hidden">
 <img src="http://static.photos/sport/640x360/101" alt="Evidence 1" class="evidence-image w-full h-full object-cover">
 <div class="absolute top-3 right-3 bg-black/80 backdrop-blur-md px-2 py-1 rounded-lg border border-white/10">
 <span class="text-success font-bold text-sm">90</span>
 <span class="text-text-tertiary text-xs">/100</span>
 </div>
 <div class="absolute top-3 left-3 bg-pink-500/90 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white flex items-center gap-1">
 <i data-lucide="instagram" class="w-3 h-3"></i> Instagram
 </div>
 </div>
 <div class="p-4">
 <div class="flex items-center gap-2 mb-2">
 <span class="px-2 py-0.5 rounded bg-white/5 text-text-secondary text-xs border border-white/5">Post</span>
 <span class="text-text-tertiary text-xs">@marcplaces</span>
 </div>
 <h4 class="text-white font-medium text-sm mb-3 line-clamp-2">Morning training session in Dubai Marina before the heat...</h4>
 <button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-medium text-text-secondary hover:text-white transition-all flex items-center justify-center gap-2">
 Open Source <i data-lucide="external-link" class="w-3 h-3"></i>
 </button>
 </div>
 </div>
<!-- Evidence Card 2 -->
 <div class="evidence-card glass-card rounded-2xl overflow-hidden group cursor-pointer">
 <div class="relative aspect-video overflow-hidden">
 <img src="http://static.photos/sport/640x360/102" alt="Evidence 2" class="evidence-image w-full h-full object-cover">
 <div class="absolute top-3 right-3 bg-black/80 backdrop-blur-md px-2 py-1 rounded-lg border border-white/10">
 <span class="text-success font-bold text-sm">90</span>
 <span class="text-text-tertiary text-xs">/100</span>
 </div>
 <div class="absolute top-3 left-3 bg-red-500/90 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white flex items-center gap-1">
 <i data-lucide="youtube" class="w-3 h-3"></i> YouTube
 </div>
 </div>
 <div class="p-4">
 <div class="flex items-center gap-2 mb-2">
 <span class="px-2 py-0.5 rounded bg-white/5 text-text-secondary text-xs border border-white/5">Short</span>
 <span class="text-text-tertiary text-xs">@marcplaces</span>
 </div>
 <h4 class="text-white font-medium text-sm mb-3 line-clamp-2">Quick tips for open water swimming beginners...</h4>
 <button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-medium text-text-secondary hover:text-white transition-all flex items-center justify-center gap-2">
 Open Source <i data-lucide="external-link" class="w-3 h-3"></i>
 </button>
 </div>
 </div>
<!-- Evidence Card 3 -->
 <div class="evidence-card glass-card rounded-2xl overflow-hidden group cursor-pointer">
 <div class="relative aspect-video overflow-hidden">
 <img src="http://static.photos/travel/640x360/103" alt="Evidence 3" class="evidence-image w-full h-full object-cover">
 <div class="absolute top-3 right-3 bg-black/80 backdrop-blur-md px-2 py-1 rounded-lg border border-white/10">
 <span class="text-success font-bold text-sm">89</span>
 <span class="text-text-tertiary text-xs">/100</span>
 </div>
 <div class="absolute top-3 left-3 bg-pink-500/90 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white flex items-center gap-1">
 <i data-lucide="instagram" class="w-3 h-3"></i> Instagram
 </div>
 </div>
 <div class="p-4">
 <div class="flex items-center gap-2 mb-2">
 <span class="px-2 py-0.5 rounded bg-white/5 text-text-secondary text-xs border border-white/5">Post</span>
 <span class="text-text-tertiary text-xs">@marcplaces</span>
 </div>
 <h4 class="text-white font-medium text-sm mb-3 line-clamp-2">Exploring Thailand's hidden beaches and training routes...</h4>
 <button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-medium text-text-secondary hover:text-white transition-all flex items-center justify-center gap-2">
 Open Source <i data-lucide="external-link" class="w-3 h-3"></i>
 </button>
 </div>
 </div>
<!-- Evidence Card 4 -->
 <div class="evidence-card glass-card rounded-2xl overflow-hidden group cursor-pointer">
 <div class="relative aspect-video overflow-hidden">
 <img src="http://static.photos/fitness/640x360/104" alt="Evidence 4" class="evidence-image w-full h-full object-cover">
 <div class="absolute top-3 right-3 bg-black/80 backdrop-blur-md px-2 py-1 rounded-lg border border-white/10">
 <span class="text-warning font-bold text-sm">85</span>
 <span class="text-text-tertiary text-xs">/100</span>
 </div>
 <div class="absolute top-3 left-3 bg-pink-500/90 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white flex items-center gap-1">
 <i data-lucide="instagram" class="w-3 h-3"></i> Instagram
 </div>
 </div>
 <div class="p-4">
 <div class="flex items-center gap-2 mb-2">
 <span class="px-2 py-0.5 rounded bg-white/5 text-text-secondary text-xs border border-white/5">Post</span>
 <span class="text-text-tertiary text-xs">@marcplaces</span>
 </div>
 <h4 class="text-white font-medium text-sm mb-3 line-clamp-2">Boxing session with coach today. Working on endurance...</h4>
 <button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-medium text-text-secondary hover:text-white transition-all flex items-center justify-center gap-2">
 Open Source <i data-lucide="external-link" class="w-3 h-3"></i>
 </button>
 </div>
 </div>
<!-- Evidence Card 5 -->
 <div class="evidence-card glass-card rounded-2xl overflow-hidden group cursor-pointer">
 <div class="relative aspect-video overflow-hidden">
 <img src="http://static.photos/outdoor/640x360/105" alt="Evidence 5" class="evidence-image w-full h-full object-cover">
 <div class="absolute top-3 right-3 bg-black/80 backdrop-blur-md px-2 py-1 rounded-lg border border-white/10">
 <span class="text-warning font-bold text-sm">85</span>
 <span class="text-text-tertiary text-xs">/100</span>
 </div>
 <div class="absolute top-3 left-3 bg-cyan-500/90 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white flex items-center gap-1">
 <i data-lucide="music-2" class="w-3 h-3"></i> TikTok
 </div>
 </div>
 <div class="p-4">
 <div class="flex items-center gap-2 mb-2">
 <span class="px-2 py-0.5 rounded bg-white/5 text-text-secondary text-xs border border-white/5">Video</span>
 <span class="text-text-tertiary text-xs">@marcplaces</span>
 </div>
 <h4 class="text-white font-medium text-sm mb-3 line-clamp-2">POV: You're training for a marathon in Dubai heat...</h4>
 <button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-medium text-text-secondary hover:text-white transition-all flex items-center justify-center gap-2">
 Open Source <i data-lucide="external-link" class="w-3 h-3"></i>
 </button>
 </div>
 </div>
<!-- Evidence Card 6 -->
 <div class="evidence-card glass-card rounded-2xl overflow-hidden group cursor-pointer">
 <div class="relative aspect-video overflow-hidden">
 <img src="http://static.photos/sport/640x360/106" alt="Evidence 6" class="evidence-image w-full h-full object-cover">
 <div class="absolute top-3 right-3 bg-black/80 backdrop-blur-md px-2 py-1 rounded-lg border border-white/10">
 <span class="text-text-secondary font-bold text-sm">83</span>
 <span class="text-text-tertiary text-xs">/100</span>
 </div>
 <div class="absolute top-3 left-3 bg-pink-500/90 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white flex items-center gap-1">
 <i data-lucide="instagram" class="w-3 h-3"></i> Instagram
 </div>
 </div>
 <div class="p-4">
 <div class="flex items-center gap-2 mb-2">
 <span class="px-2 py-0.5 rounded bg-white/5 text-text-secondary text-xs border border-white/5">Reel</span>
 <span class="text-text-tertiary text-xs">@marcplaces</span>
 </div>
 <h4 class="text-white font-medium text-sm mb-3 line-clamp-2">Lac d'Annecy crossing complete! 4 hours of pure...</h4>
 <button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs font-medium text-text-secondary hover:text-white transition-all flex items-center justify-center gap-2">
 Open Source <i data-lucide="external-link" class="w-3 h-3"></i>
 </button>
 </div>
 </div>
 </div>
 </section>
<!-- Expanded Evidence Details -->
 <section class="max-w-7xl mx-auto px-6 mb-12 animate-fade-in stagger-4">
 <div class="glass-card rounded-2xl p-6">
 <h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
 <i data-lucide="list" class="w-5 h-5 text-text-secondary"></i>
 Detailed Source Analysis
 </h3>
<div class="overflow-x-auto">
 <table class="w-full text-left border-collapse">
 <thead>
 <tr class="border-b border-white/10 text-text-tertiary text-xs uppercase tracking-wider">
 <th class="pb-3 font-medium">Rank</th>
 <th class="pb-3 font-medium">Score</th>
 <th class="pb-3 font-medium">Platform</th>
 <th class="pb-3 font-medium">Type</th>
 <th class="pb-3 font-medium">Source</th>
 <th class="pb-3 font-medium">Metadata</th>
 <th class="pb-3 font-medium text-right">Action</th>
 </tr>
 </thead>
 <tbody class="text-sm">
 <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
 <td class="py-4 text-white font-medium">1</td>
 <td class="py-4"><span class="text-success font-semibold">90</span></td>
 <td class="py-4"><span class="flex items-center gap-2 text-text-secondary"><i data-lucide="instagram" class="w-4 h-4 text-pink-400"></i> Instagram</span></td>
 <td class="py-4 text-text-secondary">Post</td>
 <td class="py-4 text-white">instagram.com/p/Cx...</td>
 <td class="py-4"><span class="px-2 py-1 rounded bg-success/10 text-success text-xs border border-success/20">oEmbed</span></td>
 <td class="py-4 text-right"><button class="text-[#ff8c42] hover:text-[#ff4b4b] text-xs font-medium">View →</button></td>
 </tr>
 <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
 <td class="py-4 text-white font-medium">2</td>
 <td class="py-4"><span class="text-success font-semibold">90</span></td>
 <td class="py-4"><span class="flex items-center gap-2 text-text-secondary"><i data-lucide="youtube" class="w-4 h-4 text-red-500"></i> YouTube</span></td>
 <td class="py-4 text-text-secondary">Short</td>
 <td class="py-4 text-white">youtube.com/shorts/...</td>
 <td class="py-4"><span class="px-2 py-1 rounded bg-success/10 text-success text-xs border border-success/20">API</span></td>
 <td class="py-4 text-right"><button class="text-[#ff8c42] hover:text-[#ff4b4b] text-xs font-medium">View →</button></td>
 </tr>
 <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
 <td class="py-4 text-white font-medium">3</td>
 <td class="py-4"><span class="text-success font-semibold">89</span></td>
 <td class="py-4"><span class="flex items-center gap-2 text-text-secondary"><i data-lucide="instagram" class="w-4 h-4 text-pink-400"></i> Instagram</span></td>
 <td class="py-4 text-text-secondary">Post</td>
 <td class="py-4 text-white">instagram.com/p/Cw...</td>
 <td class="py-4"><span class="px-2 py-1 rounded bg-warning/10 text-warning text-xs border border-warning/20">Scraped</span></td>
 <td class="py-4 text-right"><button class="text-[#ff8c42] hover:text-[#ff4b4b] text-xs font-medium">View →</button></td>
 </tr>
 <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
 <td class="py-4 text-white font-medium">4</td>
 <td class="py-4"><span class="text-warning font-semibold">85</span></td>
 <td class="py-4"><span class="flex items-center gap-2 text-text-secondary"><i data-lucide="instagram" class="w-4 h-4 text-pink-400"></i> Instagram</span></td>
 <td class="py-4 text-text-secondary">Post</td>
 <td class="py-4 text-white">instagram.com/p/Cv...</td>
 <td class="py-4"><span class="px-2 py-1 rounded bg-success/10 text-success text-xs border border-success/20">oEmbed</span></td>
 <td class="py-4 text-right"><button class="text-[#ff8c42] hover:text-[#ff4b4b] text-xs font-medium">View →</button></td>
 </tr>
 <tr class="hover:bg-white/5 transition-colors">
 <td class="py-4 text-white font-medium">5</td>
 <td class="py-4"><span class="text-warning font-semibold">85</span></td>
 <td class="py-4"><span class="flex items-center gap-2 text-text-secondary"><i data-lucide="music-2" class="w-4 h-4 text-cyan-400"></i> TikTok</span></td>
 <td class="py-4 text-text-secondary">Video</td>
 <td class="py-4 text-white">tiktok.com/@marc...</td>
 <td class="py-4"><span class="px-2 py-1 rounded bg-warning/10 text-warning text-xs border border-warning/20">Scraped</span></td>
 <td class="py-4 text-right"><button class="text-[#ff8c42] hover:text-[#ff4b4b] text-xs font-medium">View →</button></td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </section>
<!-- Data Quality Card -->
 <section class="max-w-7xl mx-auto px-6 mb-12 animate-fade-in stagger-4">
 <div class="glass-card rounded-2xl p-8 relative overflow-hidden">
 <div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-[#ff4b4b]/10 to-transparent rounded-full blur-3xl"></div>
<div class="relative grid grid-cols-1 lg:grid-cols-3 gap-8">
 <div class="lg:col-span-1">
 <div class="flex items-center gap-3 mb-4">
 <div class="w-12 h-12 rounded-full bg-gradient-to-br from-[#ff4b4b]/20 to-[#ff8c42]/20 flex items-center justify-center border border-[#ff4b4b]/20">
 <i data-lucide="brain-circuit" class="w-6 h-6 text-[#ff8c42]"></i>
 </div>
 <div>
 <h3 class="font-semibold text-lg">Data Quality Analysis</h3>
 <p class="text-sm text-text-secondary">AI Confidence Assessment</p>
 </div>
 </div>
<div class="flex items-end gap-2 mb-2">
 <span class="text-6xl font-bold gradient-text">90</span>
 <span class="text-text-secondary mb-2">/100</span>
 </div>
 <p class="text-text-secondary text-sm leading-relaxed">
 Information appears coherent and verifiable across multiple independent sources with high correlation confidence.
 </p>
 </div>
<div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <div class="flex items-center gap-2 mb-4 text-success">
 <i data-lucide="check-circle-2" class="w-5 h-5"></i>
 <span class="font-semibold">Found Fields</span>
 <span class="text-xs bg-success/10 px-2 py-0.5 rounded-full border border-success/20">14</span>
 </div>
 <div class="flex flex-wrap gap-2">
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">first name</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">last name</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">bio</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">city</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">country</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">sports</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">instagram</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">youtube</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">hobbies</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">languages</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">lifestyle tags</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">job title</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">company</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-secondary">sector</span>
 </div>
 </div>
<div>
 <div class="flex items-center gap-2 mb-4 text-warning">
 <i data-lucide="minus-circle" class="w-5 h-5"></i>
 <span class="font-semibold">Missing Fields</span>
 <span class="text-xs bg-warning/10 px-2 py-0.5 rounded-full border border-warning/20">5</span>
 </div>
 <div class="flex flex-wrap gap-2">
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-tertiary line-through opacity-60">age range</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-tertiary line-through opacity-60">followers</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-tertiary line-through opacity-60">education</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-tertiary line-through opacity-60">certifications</span>
 <span class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-text-tertiary line-through opacity-60">career path</span>
 </div>
 <div class="mt-4 p-3 rounded-lg bg-warning/5 border border-warning/10">
 <p class="text-xs text-warning flex items-start gap-2">
 <i data-lucide="alert-triangle" class="w-4 h-4 shrink-0 mt-0.5"></i>
 <span>Missing demographic data may limit profile completeness for certain use cases.</span>
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer Actions -->
 <section class="max-w-7xl mx-auto px-6 animate-fade-in stagger-4">
 <div class="glass-card rounded-2xl p-8 text-center">
 <div class="flex flex-col md:flex-row items-center justify-center gap-4 mb-6">
 <button class="premium-button px-8 py-3 rounded-xl font-semibold text-white flex items-center gap-2">
 <i data-lucide="file-down" class="w-5 h-5"></i>
 Export PDF Report
 </button>
 <button class="glass-card px-8 py-3 rounded-xl font-medium text-white border border-white/10 hover:bg-white/5 transition-all flex items-center gap-2">
 <i data-lucide="refresh-cw" class="w-5 h-5"></i>
 Run Another Search
 </button>
 <button class="glass-card px-8 py-3 rounded-xl font-medium text-white border border-white/10 hover:bg-white/5 transition-all flex items-center gap-2">
 <i data-lucide="link" class="w-5 h-5"></i>
 Review Source Links
 </button>
 </div>
<div class="pt-6 border-t border-white/10">
 <p class="text-xs text-text-tertiary max-w-2xl mx-auto leading-relaxed">
 AI-generated profile synthesis based on publicly available web evidence.
Confidence scores reflect correlation strength, not absolute verification.
Always cross-reference critical information through official channels.
 </p>
 <div class="flex items-center justify-center gap-4 mt-4 text-xs text-text-tertiary">
 <a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
 <span>•</span>
 <a href="#" class="hover:text-white transition-colors">Terms of Service</a>
 <span>•</span>
 <a href="#" class="hover:text-white transition-colors">Data Sources</a>
 <span>•</span>
 <span>Report ID: RU-2024-8842</span>
 </div>
 </div>
 </div>
 </section>
</main>
<script>
 // Initialize Lucide icons
 lucide.createIcons();
// Add smooth scroll behavior for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
 const target = document.querySelector(this.getAttribute('href'));
 if (target) {
 target.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 });
 });
// Add intersection observer for fade-in animations on scroll
 const observerOptions = {
 threshold: 0.1,
 rootMargin: '0px 0px -50px 0px'
 };
const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.style.opacity = '1';
 entry.target.style.transform = 'translateY(0)';
 }
 });
 }, observerOptions);
// Observe all glass cards for subtle fade-in effect
 document.querySelectorAll('.glass-card').forEach((card, index) => {
 if (!card.classList.contains('animate-fade-in')) {
 card.style.opacity = '0';
 card.style.transform = 'translateY(20px)';
 card.style.transition = `all 0.6s ease-out ${index * 0.05}s`;
 observer.observe(card);
 }
 });
 </script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html>