Spaces:

bithal26
/

DeepFake-Detector-UI

Build error

App Files Files Community

bithal26 commited on 14 days ago

Commit

74bddaf

verified ·

1 Parent(s): 1f2a723

Delete deepfake-detector.html

Browse files

Files changed (1) hide show

deepfake-detector.html +0 -1829

deepfake-detector.html DELETED Viewed

@@ -1,1829 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>VERIDEX — Deepfake Detection Intelligence</title>
-<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg: #030508;
-    --bg2: #070c12;
-    --panel: rgba(8, 18, 30, 0.85);
-    --border: rgba(0, 210, 255, 0.12);
-    --border-bright: rgba(0, 210, 255, 0.45);
-    --cyan: #00d2ff;
-    --cyan-dim: rgba(0, 210, 255, 0.6);
-    --red: #ff2d55;
-    --green: #00ff88;
-    --amber: #ffb800;
-    --text: #e8f4ff;
-    --text-dim: rgba(232, 244, 255, 0.5);
-    --text-faint: rgba(232, 244, 255, 0.25);
-    --glow-cyan: 0 0 20px rgba(0, 210, 255, 0.35), 0 0 60px rgba(0, 210, 255, 0.1);
-    --glow-red: 0 0 20px rgba(255, 45, 85, 0.4);
-    --glow-green: 0 0 20px rgba(0, 255, 136, 0.35);
-  }
-  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  html { scroll-behavior: smooth; }
-  body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: 'Syne', sans-serif;
-    overflow-x: hidden;
-    cursor: crosshair;
-  }
-  /* ── NOISE OVERLAY ── */
-  body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
-    pointer-events: none;
-    z-index: 9999;
-    opacity: 0.4;
-  }
-  /* ── SCANLINES ── */
-  body::after {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
-    pointer-events: none;
-    z-index: 9998;
-  }
-  /* ── GRID BG ── */
-  .grid-bg {
-    position: fixed;
-    inset: 0;
-    background-image:
-      linear-gradient(rgba(0,210,255,0.03) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(0,210,255,0.03) 1px, transparent 1px);
-    background-size: 60px 60px;
-    pointer-events: none;
-    z-index: 0;
-  }
-  /* ── AMBIENT GLOW ── */
-  .ambient {
-    position: fixed;
-    border-radius: 50%;
-    filter: blur(120px);
-    pointer-events: none;
-    z-index: 0;
-    opacity: 0.18;
-  }
-  .ambient-1 { width: 600px; height: 600px; background: var(--cyan); top: -200px; left: -100px; animation: drift1 20s ease-in-out infinite; }
-  .ambient-2 { width: 500px; height: 500px; background: var(--red); bottom: -200px; right: -100px; animation: drift2 25s ease-in-out infinite; }
-  .ambient-3 { width: 400px; height: 400px; background: #5500ff; top: 40%; left: 40%; animation: drift3 30s ease-in-out infinite; opacity: 0.1; }
-  @keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
-  @keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-80px)} }
-  @keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-40px)} }
-  /* ── NAV ── */
-  nav {
-    position: fixed;
-    top: 0; left: 0; right: 0;
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 48px;
-    background: rgba(3, 5, 8, 0.7);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
-  }
-  .nav-logo {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  .logo-mark {
-    width: 36px; height: 36px;
-    border: 1.5px solid var(--cyan);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: var(--glow-cyan);
-    position: relative;
-    overflow: hidden;
-  }
-  .logo-mark::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(135deg, rgba(0,210,255,0.15), transparent);
-  }
-  .logo-mark svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 2; }
-  .logo-text {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 22px;
-    letter-spacing: 4px;
-    color: var(--text);
-  }
-  .logo-text span { color: var(--cyan); }
-  .nav-links {
-    display: flex;
-    gap: 36px;
-    list-style: none;
-  }
-  .nav-links a {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--text-dim);
-    text-decoration: none;
-    transition: color 0.2s;
-    position: relative;
-  }
-  .nav-links a::after {
-    content: '';
-    position: absolute;
-    bottom: -4px; left: 0; right: 0;
-    height: 1px;
-    background: var(--cyan);
-    transform: scaleX(0);
-    transition: transform 0.2s;
-  }
-  .nav-links a:hover { color: var(--cyan); }
-  .nav-links a:hover::after { transform: scaleX(1); }
-  .nav-cta {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--bg);
-    background: var(--cyan);
-    padding: 10px 24px;
-    border: none;
-    cursor: pointer;
-    font-weight: 500;
-    transition: all 0.2s;
-    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
-  }
-  .nav-cta:hover { box-shadow: var(--glow-cyan); transform: translateY(-1px); }
-  /* ── HERO ── */
-  .hero {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 120px 48px 80px;
-    position: relative;
-    z-index: 1;
-  }
-  .hero-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    color: var(--cyan);
-    border: 1px solid var(--border-bright);
-    padding: 6px 16px;
-    border-radius: 2px;
-    margin-bottom: 32px;
-    animation: fadeUp 0.8s ease both;
-    background: rgba(0, 210, 255, 0.05);
-  }
-  .hero-badge::before {
-    content: '';
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    background: var(--green);
-    box-shadow: 0 0 8px var(--green);
-    animation: pulse 2s ease-in-out infinite;
-  }
-  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
-  .hero-title {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: clamp(72px, 10vw, 140px);
-    line-height: 0.9;
-    letter-spacing: 2px;
-    animation: fadeUp 0.8s 0.1s ease both;
-    position: relative;
-  }
-  .hero-title .line1 { display: block; color: var(--text); }
-  .hero-title .line2 {
-    display: block;
-    color: transparent;
-    -webkit-text-stroke: 1px rgba(0, 210, 255, 0.5);
-    position: relative;
-  }
-  .hero-title .line2::after {
-    content: attr(data-text);
-    position: absolute;
-    left: 0; top: 0;
-    color: var(--cyan);
-    clip-path: polygon(0 0, 30% 0, 30% 100%, 0 100%);
-    animation: scanReveal 4s ease-in-out infinite;
-  }
-  @keyframes scanReveal {
-    0%   { clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); }
-    40%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
-    60%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
-    100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
-  }
-  .hero-sub {
-    max-width: 580px;
-    font-size: 16px;
-    line-height: 1.7;
-    color: var(--text-dim);
-    margin: 28px auto 48px;
-    animation: fadeUp 0.8s 0.2s ease both;
-  }
-  .hero-actions {
-    display: flex;
-    gap: 16px;
-    animation: fadeUp 0.8s 0.3s ease both;
-  }
-  .btn-primary {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    padding: 16px 36px;
-    background: var(--cyan);
-    color: var(--bg);
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    font-weight: 600;
-    border: none;
-    cursor: pointer;
-    transition: all 0.25s;
-    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
-  }
-  .btn-primary:hover { box-shadow: var(--glow-cyan); transform: translateY(-2px) scale(1.02); }
-  .btn-secondary {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    padding: 16px 36px;
-    background: transparent;
-    color: var(--text-dim);
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    border: 1px solid var(--border-bright);
-    cursor: pointer;
-    transition: all 0.25s;
-  }
-  .btn-secondary:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(0,210,255,0.05); }
-  .hero-stats {
-    display: flex;
-    gap: 0;
-    margin-top: 80px;
-    border: 1px solid var(--border);
-    animation: fadeUp 0.8s 0.4s ease both;
-  }
-  .stat {
-    padding: 24px 48px;
-    border-right: 1px solid var(--border);
-    text-align: left;
-    position: relative;
-    overflow: hidden;
-  }
-  .stat:last-child { border-right: none; }
-  .stat::before {
-    content: '';
-    position: absolute;
-    bottom: 0; left: 0; right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
-    animation: shimmer 3s ease-in-out infinite;
-    opacity: 0.4;
-  }
-  @keyframes shimmer { 0%,100%{opacity:0.2} 50%{opacity:0.8} }
-  .stat-number {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 44px;
-    color: var(--cyan);
-    line-height: 1;
-    text-shadow: var(--glow-cyan);
-  }
-  .stat-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    margin-top: 4px;
-  }
-  @keyframes fadeUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }
-  /* ── UPLOAD SECTION ── */
-  .section {
-    position: relative;
-    z-index: 1;
-    padding: 100px 48px;
-    max-width: 1400px;
-    margin: 0 auto;
-  }
-  .section-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 4px;
-    text-transform: uppercase;
-    color: var(--cyan);
-    margin-bottom: 12px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  .section-label::before {
-    content: '';
-    width: 32px; height: 1px;
-    background: var(--cyan);
-    box-shadow: var(--glow-cyan);
-  }
-  .section-title {
-    font-family: 'Syne', sans-serif;
-    font-size: clamp(32px, 4vw, 52px);
-    font-weight: 800;
-    line-height: 1.1;
-    margin-bottom: 16px;
-  }
-  .section-title em { font-style: normal; color: var(--cyan); }
-  .section-sub {
-    color: var(--text-dim);
-    font-size: 15px;
-    line-height: 1.7;
-    max-width: 480px;
-    margin-bottom: 48px;
-  }
-  /* ── UPLOAD ZONE ── */
-  .upload-layout {
-    display: grid;
-    grid-template-columns: 1fr 380px;
-    gap: 24px;
-    align-items: start;
-  }
-  .upload-zone {
-    border: 1px dashed var(--border-bright);
-    border-radius: 4px;
-    padding: 80px 40px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.3s;
-    position: relative;
-    overflow: hidden;
-    background: var(--panel);
-    backdrop-filter: blur(20px);
-    min-height: 380px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  .upload-zone::before {
-    content: '';
-    position: absolute;
-    top: 0; left: -100%;
-    width: 200%; height: 2px;
-    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
-    animation: scanLine 4s ease-in-out infinite;
-  }
-  @keyframes scanLine {
-    0% { top: 0; opacity: 0; }
-    10% { opacity: 1; }
-    90% { opacity: 1; }
-    100% { top: 100%; opacity: 0; }
-  }
-  .upload-zone:hover {
-    border-color: var(--cyan);
-    background: rgba(0, 210, 255, 0.03);
-    box-shadow: inset 0 0 40px rgba(0,210,255,0.05);
-  }
-  .upload-zone.dragging {
-    border-color: var(--cyan);
-    background: rgba(0, 210, 255, 0.08);
-    box-shadow: 0 0 40px rgba(0,210,255,0.2), inset 0 0 40px rgba(0,210,255,0.05);
-  }
-  .upload-icon {
-    width: 72px; height: 72px;
-    border: 1px solid var(--border-bright);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 24px;
-    position: relative;
-    transition: all 0.3s;
-  }
-  .upload-icon::before {
-    content: '';
-    position: absolute;
-    inset: -6px;
-    border-radius: 50%;
-    border: 1px solid transparent;
-    border-top-color: var(--cyan);
-    animation: spin 3s linear infinite;
-    opacity: 0.4;
-  }
-  @keyframes spin { to { transform: rotate(360deg); } }
-  .upload-zone:hover .upload-icon { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
-  .upload-icon svg { width: 28px; height: 28px; stroke: var(--cyan); fill: none; stroke-width: 1.5; }
-  .upload-title {
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 8px;
-  }
-  .upload-desc {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 1px;
-    color: var(--text-dim);
-    margin-bottom: 24px;
-    line-height: 1.7;
-  }
-  .upload-formats {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  .format-tag {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 1.5px;
-    padding: 4px 10px;
-    border: 1px solid var(--border);
-    color: var(--text-faint);
-    text-transform: uppercase;
-  }
-  input[type="file"] { display: none; }
-  /* ── ANALYSIS PANEL ── */
-  .analysis-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-  .panel-card {
-    background: var(--panel);
-    border: 1px solid var(--border);
-    backdrop-filter: blur(20px);
-    padding: 24px;
-    position: relative;
-    overflow: hidden;
-    transition: border-color 0.3s;
-  }
-  .panel-card::after {
-    content: '';
-    position: absolute;
-    top: 0; left: 0;
-    width: 3px; height: 100%;
-    background: var(--cyan);
-    box-shadow: var(--glow-cyan);
-    opacity: 0.6;
-  }
-  .panel-card:hover { border-color: var(--border-bright); }
-  .card-title {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    color: var(--cyan);
-    margin-bottom: 16px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .card-title .dot {
-    width: 5px; height: 5px;
-    border-radius: 50%;
-    background: var(--cyan);
-    box-shadow: 0 0 8px var(--cyan);
-  }
-  /* ── RESULT DISPLAY ── */
-  .result-display {
-    text-align: center;
-    padding: 8px 0;
-  }
-  .result-score {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 72px;
-    line-height: 1;
-    color: var(--green);
-    text-shadow: var(--glow-green);
-    transition: all 0.5s;
-  }
-  .result-score.fake { color: var(--red); text-shadow: var(--glow-red); }
-  .result-score.uncertain { color: var(--amber); }
-  .result-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    color: var(--text-dim);
-    margin-top: 4px;
-  }
-  /* ── PROGRESS BARS ── */
-  .metric-row {
-    margin-bottom: 14px;
-  }
-  .metric-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 6px;
-  }
-  .metric-name {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-    color: var(--text-dim);
-  }
-  .metric-value {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    color: var(--cyan);
-  }
-  .metric-bar {
-    height: 3px;
-    background: rgba(255,255,255,0.06);
-    border-radius: 0;
-    overflow: hidden;
-    position: relative;
-  }
-  .metric-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--cyan), rgba(0,210,255,0.4));
-    transition: width 1s ease;
-    position: relative;
-  }
-  .metric-fill::after {
-    content: '';
-    position: absolute;
-    right: 0; top: -2px;
-    width: 1px; height: 7px;
-    background: var(--cyan);
-    box-shadow: 0 0 6px var(--cyan);
-  }
-  /* ── HOW IT WORKS ── */
-  .how-section {
-    padding: 100px 48px;
-    max-width: 1400px;
-    margin: 0 auto;
-    position: relative;
-    z-index: 1;
-  }
-  .how-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 2px;
-    margin-top: 60px;
-  }
-  .how-step {
-    background: var(--panel);
-    border: 1px solid var(--border);
-    padding: 40px 32px;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s;
-    backdrop-filter: blur(20px);
-  }
-  .how-step::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
-    opacity: 0;
-    transition: opacity 0.3s;
-  }
-  .how-step:hover { border-color: var(--border-bright); transform: translateY(-4px); }
-  .how-step:hover::before { opacity: 1; }
-  .step-number {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 72px;
-    color: rgba(0, 210, 255, 0.08);
-    line-height: 1;
-    margin-bottom: 20px;
-    transition: color 0.3s;
-  }
-  .how-step:hover .step-number { color: rgba(0, 210, 255, 0.15); }
-  .step-icon {
-    width: 48px; height: 48px;
-    border: 1px solid var(--border-bright);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-    transition: all 0.3s;
-  }
-  .how-step:hover .step-icon { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
-  .step-icon svg { width: 22px; height: 22px; stroke: var(--cyan); fill: none; stroke-width: 1.5; }
-  .step-title {
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-  .step-desc {
-    font-size: 13px;
-    line-height: 1.7;
-    color: var(--text-dim);
-  }
-  /* ── FEATURES ── */
-  .features-section {
-    padding: 100px 48px;
-    max-width: 1400px;
-    margin: 0 auto;
-    position: relative;
-    z-index: 1;
-  }
-  .features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 2px;
-    margin-top: 60px;
-  }
-  .feature-card {
-    background: var(--panel);
-    border: 1px solid var(--border);
-    padding: 36px;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s;
-    backdrop-filter: blur(20px);
-    cursor: default;
-  }
-  .feature-card::after {
-    content: '';
-    position: absolute;
-    bottom: 0; left: 0; right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
-    transform: scaleX(0);
-    transition: transform 0.4s;
-  }
-  .feature-card:hover { border-color: rgba(0, 210, 255, 0.25); background: rgba(0, 210, 255, 0.03); }
-  .feature-card:hover::after { transform: scaleX(1); }
-  .feature-icon {
-    width: 44px; height: 44px;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 210, 255, 0.08);
-    border: 1px solid var(--border-bright);
-    transition: all 0.3s;
-  }
-  .feature-card:hover .feature-icon { background: rgba(0, 210, 255, 0.15); box-shadow: var(--glow-cyan); }
-  .feature-icon svg { width: 20px; height: 20px; stroke: var(--cyan); fill: none; stroke-width: 1.5; }
-  .feature-title {
-    font-size: 16px;
-    font-weight: 700;
-    margin-bottom: 10px;
-  }
-  .feature-desc {
-    font-size: 13px;
-    line-height: 1.7;
-    color: var(--text-dim);
-  }
-  /* ── TECH STACK ── */
-  .tech-section {
-    padding: 60px 48px;
-    max-width: 1400px;
-    margin: 0 auto;
-    position: relative;
-    z-index: 1;
-  }
-  .tech-strip {
-    border: 1px solid var(--border);
-    display: flex;
-    align-items: stretch;
-    overflow: hidden;
-    background: var(--panel);
-    backdrop-filter: blur(20px);
-  }
-  .tech-label-box {
-    padding: 20px 28px;
-    border-right: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    background: rgba(0,210,255,0.05);
-    white-space: nowrap;
-  }
-  .tech-items {
-    display: flex;
-    overflow: hidden;
-    flex: 1;
-    position: relative;
-  }
-  .tech-items::before, .tech-items::after {
-    content: '';
-    position: absolute;
-    top: 0; bottom: 0;
-    width: 60px;
-    z-index: 2;
-    pointer-events: none;
-  }
-  .tech-items::before { left: 0; background: linear-gradient(90deg, rgba(8,18,30,0.9), transparent); }
-  .tech-items::after  { right: 0; background: linear-gradient(-90deg, rgba(8,18,30,0.9), transparent); }
-  .tech-scroll {
-    display: flex;
-    gap: 0;
-    animation: techScroll 20s linear infinite;
-    width: max-content;
-  }
-  @keyframes techScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
-  .tech-item {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--text-dim);
-    padding: 20px 32px;
-    border-right: 1px solid var(--border);
-    white-space: nowrap;
-    transition: color 0.2s;
-  }
-  .tech-item:hover { color: var(--cyan); }
-  /* ── REPORT SECTION ── */
-  .report-section {
-    padding: 100px 48px;
-    max-width: 1400px;
-    margin: 0 auto;
-    position: relative;
-    z-index: 1;
-  }
-  .report-layout {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2px;
-    margin-top: 60px;
-  }
-  .report-card {
-    background: var(--panel);
-    border: 1px solid var(--border);
-    padding: 40px;
-    backdrop-filter: blur(20px);
-  }
-  .report-card.accent {
-    background: rgba(0, 210, 255, 0.04);
-    border-color: rgba(0,210,255,0.2);
-  }
-  .forensic-list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    margin-top: 20px;
-  }
-  .forensic-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 14px 16px;
-    border: 1px solid var(--border);
-    transition: all 0.2s;
-  }
-  .forensic-item:hover { border-color: var(--border-bright); background: rgba(0,210,255,0.03); }
-  .forensic-icon {
-    width: 32px; height: 32px;
-    border: 1px solid var(--border-bright);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-  .forensic-icon svg { width: 14px; height: 14px; stroke: var(--cyan); fill: none; stroke-width: 2; }
-  .forensic-name {
-    font-size: 13px;
-    font-weight: 600;
-    flex: 1;
-  }
-  .forensic-status {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 9px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    padding: 3px 8px;
-  }
-  .forensic-status.pass { color: var(--green); border: 1px solid rgba(0,255,136,0.3); background: rgba(0,255,136,0.05); }
-  .forensic-status.alert { color: var(--red); border: 1px solid rgba(255,45,85,0.3); background: rgba(255,45,85,0.05); }
-  .forensic-status.warn { color: var(--amber); border: 1px solid rgba(255,184,0,0.3); background: rgba(255,184,0,0.05); }
-  /* ── FOOTER ── */
-  footer {
-    position: relative;
-    z-index: 1;
-    padding: 48px;
-    border-top: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: rgba(3, 5, 8, 0.5);
-  }
-  .footer-logo {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 24px;
-    letter-spacing: 4px;
-    color: var(--text);
-  }
-  .footer-logo span { color: var(--cyan); }
-  .footer-copy {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 2px;
-    color: var(--text-faint);
-    text-transform: uppercase;
-  }
-  .footer-links {
-    display: flex;
-    gap: 24px;
-    list-style: none;
-  }
-  .footer-links a {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    text-decoration: none;
-    transition: color 0.2s;
-  }
-  .footer-links a:hover { color: var(--cyan); }
-  /* ── MODAL / ANALYZING ── */
-  .analyze-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(3, 5, 8, 0.95);
-    backdrop-filter: blur(20px);
-    z-index: 200;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 32px;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s;
-  }
-  .analyze-overlay.visible { opacity: 1; pointer-events: all; }
-  .analyze-scanner {
-    width: 200px; height: 200px;
-    position: relative;
-    border: 1px solid var(--border-bright);
-  }
-  .analyze-scanner::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 2px;
-    background: var(--cyan);
-    box-shadow: 0 0 12px var(--cyan), 0 0 40px rgba(0,210,255,0.4);
-    animation: scannerLine 2s ease-in-out infinite;
-  }
-  @keyframes scannerLine {
-    0%   { top: 0; }
-    50%  { top: calc(100% - 2px); }
-    100% { top: 0; }
-  }
-  .scanner-corner {
-    position: absolute;
-    width: 16px; height: 16px;
-    border-color: var(--cyan);
-    border-style: solid;
-  }
-  .scanner-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
-  .scanner-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
-  .scanner-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
-  .scanner-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
-  .analyze-text {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    letter-spacing: 4px;
-    text-transform: uppercase;
-    color: var(--cyan);
-    text-align: center;
-  }
-  .analyze-progress-bar {
-    width: 300px;
-    height: 2px;
-    background: rgba(255,255,255,0.06);
-    position: relative;
-    overflow: hidden;
-  }
-  .analyze-fill {
-    height: 100%;
-    background: var(--cyan);
-    box-shadow: var(--glow-cyan);
-    animation: loadBar 3s ease forwards;
-  }
-  @keyframes loadBar { from { width: 0%; } to { width: 100%; } }
-  .analyze-steps {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 300px;
-  }
-  .a-step {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 2px;
-    color: var(--text-faint);
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    transition: color 0.3s;
-  }
-  .a-step.active { color: var(--cyan); }
-  .a-step.done { color: var(--green); }
-  .a-step-dot {
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    background: currentColor;
-    flex-shrink: 0;
-  }
-  /* ── RESULT MODAL ── */
-  .result-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(3, 5, 8, 0.9);
-    backdrop-filter: blur(20px);
-    z-index: 200;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s;
-  }
-  .result-overlay.visible { opacity: 1; pointer-events: all; }
-  .result-modal {
-    width: 90%;
-    max-width: 800px;
-    background: var(--bg2);
-    border: 1px solid var(--border-bright);
-    padding: 48px;
-    position: relative;
-    animation: modalIn 0.4s ease both;
-  }
-  @keyframes modalIn { from { opacity:0; transform: scale(0.95) translateY(20px); } to { opacity:1; transform: scale(1) translateY(0); } }
-  .result-modal::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--red), var(--cyan));
-  }
-  .modal-close {
-    position: absolute;
-    top: 20px; right: 20px;
-    background: none;
-    border: 1px solid var(--border);
-    color: var(--text-dim);
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 2px;
-    padding: 6px 12px;
-    cursor: pointer;
-    transition: all 0.2s;
-    text-transform: uppercase;
-  }
-  .modal-close:hover { border-color: var(--red); color: var(--red); }
-  .modal-verdict {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    margin-bottom: 40px;
-    padding-bottom: 40px;
-    border-bottom: 1px solid var(--border);
-  }
-  .verdict-score {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 100px;
-    line-height: 1;
-    color: var(--red);
-    text-shadow: var(--glow-red);
-    flex-shrink: 0;
-  }
-  .verdict-info {}
-  .verdict-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    margin-bottom: 6px;
-  }
-  .verdict-title {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 48px;
-    line-height: 1;
-    color: var(--red);
-    margin-bottom: 12px;
-  }
-  .verdict-title.authentic { color: var(--green); }
-  .verdict-desc {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--text-dim);
-  }
-  .modal-metrics {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 16px;
-    margin-bottom: 32px;
-  }
-  .modal-metric {
-    border: 1px solid var(--border);
-    padding: 20px;
-    text-align: center;
-  }
-  .modal-metric-val {
-    font-family: 'Bebas Neue', sans-serif;
-    font-size: 36px;
-    color: var(--cyan);
-  }
-  .modal-metric-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 9px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--text-faint);
-    margin-top: 4px;
-  }
-  .modal-footer-actions {
-    display: flex;
-    gap: 12px;
-    justify-content: flex-end;
-  }
-  .btn-download {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--cyan);
-    background: transparent;
-    border: 1px solid var(--border-bright);
-    padding: 10px 24px;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  .btn-download:hover { background: rgba(0,210,255,0.08); }
-  .btn-new-scan {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: var(--bg);
-    background: var(--cyan);
-    border: none;
-    padding: 10px 24px;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  .btn-new-scan:hover { box-shadow: var(--glow-cyan); }
-  /* ── RESPONSIVE ── */
-  @media (max-width: 900px) {
-    nav { padding: 16px 24px; }
-    .nav-links { display: none; }
-    .hero { padding: 100px 24px 60px; }
-    .hero-stats { flex-direction: column; }
-    .stat { border-right: none; border-bottom: 1px solid var(--border); }
-    .upload-layout { grid-template-columns: 1fr; }
-    .how-grid { grid-template-columns: 1fr 1fr; }
-    .features-grid { grid-template-columns: 1fr 1fr; }
-    .report-layout { grid-template-columns: 1fr; }
-    .section, .how-section, .features-section, .report-section, .tech-section { padding: 60px 24px; }
-    footer { flex-direction: column; gap: 24px; text-align: center; }
-  }
-</style>
-</head>
-<body>
-<div class="grid-bg"></div>
-<div class="ambient ambient-1"></div>
-<div class="ambient ambient-2"></div>
-<div class="ambient ambient-3"></div>
-<!-- NAV -->
-<nav>
-  <div class="nav-logo">
-    <div class="logo-mark">
-      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/><path d="M5.64 5.64l2.12 2.12M16.24 16.24l2.12 2.12M5.64 18.36l2.12-2.12M16.24 7.76l2.12-2.12"/></svg>
-    </div>
-    <span class="logo-text">VERI<span>DEX</span></span>
-  </div>
-  <ul class="nav-links">
-    <li><a href="#detect">Detect</a></li>
-    <li><a href="#how">How It Works</a></li>
-    <li><a href="#features">Technology</a></li>
-    <li><a href="#forensics">Forensics</a></li>
-    <li><a href="#api">API</a></li>
-  </ul>
-  <button class="nav-cta">Get API Access</button>
-</nav>
-<!-- HERO -->
-<section class="hero">
-  <div class="hero-badge">
-    <span>Live System Online</span>
-    — Neural Detection Engine v4.2
-  </div>
-  <h1 class="hero-title">
-    <span class="line1">Unmask the</span>
-    <span class="line2" data-text="Invisible Lie">Invisible Lie</span>
-  </h1>
-  <p class="hero-sub">Military-grade deepfake detection powered by multi-modal neural forensics. Analyze faces, voices, and pixel artifacts in seconds.</p>
-  <div class="hero-actions">
-    <button class="btn-primary" onclick="document.getElementById('detect').scrollIntoView({behavior:'smooth'})">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-      Scan a Video
-    </button>
-    <button class="btn-secondary">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
-      See Demo
-    </button>
-  </div>
-  <div class="hero-stats">
-    <div class="stat">
-      <div class="stat-number">99.4<span style="font-size:24px;color:var(--text-dim)">%</span></div>
-      <div class="stat-label">Detection Accuracy</div>
-    </div>
-    <div class="stat">
-      <div class="stat-number">2.1<span style="font-size:24px;color:var(--text-dim)">s</span></div>
-      <div class="stat-label">Avg. Scan Time</div>
-    </div>
-    <div class="stat">
-      <div class="stat-number">47M+</div>
-      <div class="stat-label">Videos Scanned</div>
-    </div>
-    <div class="stat">
-      <div class="stat-number">12</div>
-      <div class="stat-label">AI Models Used</div>
-    </div>
-  </div>
-</section>
-<!-- UPLOAD / DETECT -->
-<section class="section" id="detect">
-  <div class="section-label">Detection Engine</div>
-  <h2 class="section-title">Upload & <em>Analyze</em></h2>
-  <p class="section-sub">Drop any video or image file. Our ensemble of 12 specialized neural networks will dissect every frame.</p>
-  <div class="upload-layout">
-    <div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileInput').click()" ondragover="event.preventDefault();this.classList.add('dragging')" ondragleave="this.classList.remove('dragging')" ondrop="handleDrop(event)">
-      <div class="upload-icon">
-        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-      </div>
-      <h3 class="upload-title">Drop your file here</h3>
-      <p class="upload-desc">Drag & drop or click to browse<br>Max file size: 2GB</p>
-      <div class="upload-formats">
-        <span class="format-tag">MP4</span>
-        <span class="format-tag">MOV</span>
-        <span class="format-tag">AVI</span>
-        <span class="format-tag">WebM</span>
-        <span class="format-tag">JPG</span>
-        <span class="format-tag">PNG</span>
-      </div>
-      <input type="file" id="fileInput" accept="video/*,image/*" onchange="startAnalysis(this.files[0])">
-    </div>
-    <div class="analysis-panel">
-      <div class="panel-card">
-        <div class="card-title"><span class="dot"></span>Authenticity Score</div>
-        <div class="result-display">
-          <div class="result-score" id="authScore">—</div>
-          <div class="result-label">Awaiting Analysis</div>
-        </div>
-      </div>
-      <div class="panel-card">
-        <div class="card-title"><span class="dot"></span>Forensic Signals</div>
-        <div class="metric-row">
-          <div class="metric-header">
-            <span class="metric-name">Face Consistency</span>
-            <span class="metric-value" id="m1">—</span>
-          </div>
-          <div class="metric-bar"><div class="metric-fill" id="b1" style="width:0%"></div></div>
-        </div>
-        <div class="metric-row">
-          <div class="metric-header">
-            <span class="metric-name">Temporal Artifacts</span>
-            <span class="metric-value" id="m2">—</span>
-          </div>
-          <div class="metric-bar"><div class="metric-fill" id="b2" style="width:0%"></div></div>
-        </div>
-        <div class="metric-row">
-          <div class="metric-header">
-            <span class="metric-name">GAN Fingerprint</span>
-            <span class="metric-value" id="m3">—</span>
-          </div>
-          <div class="metric-bar"><div class="metric-fill" id="b3" style="width:0%"></div></div>
-        </div>
-        <div class="metric-row">
-          <div class="metric-header">
-            <span class="metric-name">Blending Seams</span>
-            <span class="metric-value" id="m4">—</span>
-          </div>
-          <div class="metric-bar"><div class="metric-fill" id="b4" style="width:0%"></div></div>
-        </div>
-        <div class="metric-row">
-          <div class="metric-header">
-            <span class="metric-name">Noise Consistency</span>
-            <span class="metric-value" id="m5">—</span>
-          </div>
-          <div class="metric-bar"><div class="metric-fill" id="b5" style="width:0%"></div></div>
-        </div>
-      </div>
-      <div class="panel-card">
-        <div class="card-title"><span class="dot"></span>System Status</div>
-        <div style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);line-height:2;letter-spacing:1px;" id="statusLog">
-          <div>› System ready</div>
-          <div>› 12 models loaded</div>
-          <div>› GPU: NVIDIA A100 online</div>
-          <div style="color:var(--cyan)">› Awaiting input...</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- HOW IT WORKS -->
-<section class="how-section" id="how">
-  <div class="section-label">Process</div>
-  <h2 class="section-title">How It <em>Works</em></h2>
-  <div class="how-grid">
-    <div class="how-step">
-      <div class="step-number">01</div>
-      <div class="step-icon">
-        <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-      </div>
-      <h3 class="step-title">Ingest & Extract</h3>
-      <p class="step-desc">Video is decoded frame-by-frame at full resolution. Faces, audio tracks, and metadata are extracted and queued for parallel analysis.</p>
-    </div>
-    <div class="how-step">
-      <div class="step-number">02</div>
-      <div class="step-icon">
-        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
-      </div>
-      <h3 class="step-title">Spatial Analysis</h3>
-      <p class="step-desc">12 convolutional neural networks simultaneously scan for blending artifacts, edge inconsistencies, and GAN-specific frequency signatures.</p>
-    </div>
-    <div class="how-step">
-      <div class="step-number">03</div>
-      <div class="step-icon">
-        <svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
-      </div>
-      <h3 class="step-title">Temporal Coherence</h3>
-      <p class="step-desc">Optical flow analysis detects unnatural motion patterns between frames — a signature of many AI-generation models that fail to maintain temporal consistency.</p>
-    </div>
-    <div class="how-step">
-      <div class="step-number">04</div>
-      <div class="step-icon">
-        <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-      </div>
-      <h3 class="step-title">Ensemble Verdict</h3>
-      <p class="step-desc">Results from all models are aggregated using Bayesian fusion, producing a confidence-weighted final score with full forensic breakdown.</p>
-    </div>
-  </div>
-</section>
-<!-- FEATURES -->
-<section class="features-section" id="features">
-  <div class="section-label">Technology</div>
-  <h2 class="section-title">Detection <em>Capabilities</em></h2>
-  <div class="features-grid">
-    <div class="feature-card">
-      <div class="feature-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/></svg></div>
-      <h3 class="feature-title">Face Swap Detection</h3>
-      <p class="feature-desc">Detects FaceSwap, DeepFaceLab, SimSwap, and commercial apps. Analyzes 68 facial landmarks for geometric inconsistencies.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div>
-      <h3 class="feature-title">Voice Cloning Analysis</h3>
-      <p class="feature-desc">Spectral fingerprinting identifies AI-synthesized voices from ElevenLabs, VALL-E, and other neural TTS systems with 97.8% accuracy.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div>
-      <h3 class="feature-title">Lip Sync Verification</h3>
-      <p class="feature-desc">Cross-modal analysis of audio-visual alignment detects synthetic dubbing and emotional incongruence in manipulated content.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg></div>
-      <h3 class="feature-title">GAN Frequency Analysis</h3>
-      <p class="feature-desc">DCT and Fourier transform analysis reveals invisible artifacts left in the frequency domain by generative adversarial networks.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
-      <h3 class="feature-title">Metadata Forensics</h3>
-      <p class="feature-desc">Deep EXIF analysis, compression artifact profiling, and camera model fingerprinting to verify provenance and chain of custody.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon"><svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
-      <h3 class="feature-title">Confidence Scoring</h3>
-      <p class="feature-desc">Bayesian ensemble fusion of 12 models generates uncertainty-quantified confidence intervals. Never just a binary yes/no.</p>
-    </div>
-  </div>
-</section>
-<!-- TECH STRIP -->
-<section class="tech-section">
-  <div class="tech-strip">
-    <div class="tech-label-box">
-      <span style="font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)">Powered By</span>
-    </div>
-    <div class="tech-items">
-      <div class="tech-scroll">
-        <span class="tech-item">PyTorch</span>
-        <span class="tech-item">EfficientNet-B7</span>
-        <span class="tech-item">CLIP</span>
-        <span class="tech-item">Xception</span>
-        <span class="tech-item">ONNX Runtime</span>
-        <span class="tech-item">OpenCV</span>
-        <span class="tech-item">Dlib</span>
-        <span class="tech-item">NVIDIA A100</span>
-        <span class="tech-item">ViT-Large</span>
-        <span class="tech-item">FaceForensics++</span>
-        <span class="tech-item">DFDC Dataset</span>
-        <span class="tech-item">PyTorch</span>
-        <span class="tech-item">EfficientNet-B7</span>
-        <span class="tech-item">CLIP</span>
-        <span class="tech-item">Xception</span>
-        <span class="tech-item">ONNX Runtime</span>
-        <span class="tech-item">OpenCV</span>
-        <span class="tech-item">Dlib</span>
-        <span class="tech-item">NVIDIA A100</span>
-        <span class="tech-item">ViT-Large</span>
-        <span class="tech-item">FaceForensics++</span>
-        <span class="tech-item">DFDC Dataset</span>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- FORENSICS -->
-<section class="report-section" id="forensics">
-  <div class="section-label">Forensic Report</div>
-  <h2 class="section-title">Full <em>Transparency</em></h2>
-  <p class="section-sub">Every analysis produces a detailed forensic report with explainable AI breakdowns — not just a score.</p>
-  <div class="report-layout">
-    <div class="report-card accent">
-      <div class="card-title"><span class="dot"></span>Sample Analysis Report</div>
-      <div style="margin-top:8px">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
-          <div>
-            <div style="font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--text-faint);text-transform:uppercase">File</div>
-            <div style="font-size:14px;font-weight:600;margin-top:4px">interview_clip_03.mp4</div>
-          </div>
-          <div style="text-align:right">
-            <div style="font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--red);text-shadow:var(--glow-red);line-height:1">87%</div>
-            <div style="font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--red);text-transform:uppercase">Fake Probability</div>
-          </div>
-        </div>
-        <ul class="forensic-list">
-          <li class="forensic-item">
-            <div class="forensic-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/></svg></div>
-            <span class="forensic-name">Facial Landmark Deviation</span>
-            <span class="forensic-status alert">Anomaly</span>
-          </li>
-          <li class="forensic-item">
-            <div class="forensic-icon"><svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
-            <span class="forensic-name">Temporal Consistency</span>
-            <span class="forensic-status alert">Fail</span>
-          </li>
-          <li class="forensic-item">
-            <div class="forensic-icon"><svg viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg></div>
-            <span class="forensic-name">GAN Frequency Signature</span>
-            <span class="forensic-status alert">Detected</span>
-          </li>
-          <li class="forensic-item">
-            <div class="forensic-icon"><svg viewBox="0 0 24 24"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div>
-            <span class="forensic-name">Audio-Visual Sync</span>
-            <span class="forensic-status warn">Mismatch</span>
-          </li>
-          <li class="forensic-item">
-            <div class="forensic-icon"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
-            <span class="forensic-name">Metadata Integrity</span>
-            <span class="forensic-status pass">Pass</span>
-          </li>
-          <li class="forensic-item">
-            <div class="forensic-icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg></div>
-            <span class="forensic-name">Compression Artifacts</span>
-            <span class="forensic-status pass">Normal</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px">
-      <div class="report-card" style="flex:1">
-        <div class="card-title"><span class="dot"></span>Model Confidence Breakdown</div>
-        <div style="margin-top:16px">
-          <div class="metric-row">
-            <div class="metric-header"><span class="metric-name">EfficientNet Ensemble</span><span class="metric-value">92%</span></div>
-            <div class="metric-bar"><div class="metric-fill" style="width:92%;background:linear-gradient(90deg,var(--red),rgba(255,45,85,0.4))"></div></div>
-          </div>
-          <div class="metric-row">
-            <div class="metric-header"><span class="metric-name">Xception Network</span><span class="metric-value">88%</span></div>
-            <div class="metric-bar"><div class="metric-fill" style="width:88%;background:linear-gradient(90deg,var(--red),rgba(255,45,85,0.4))"></div></div>
-          </div>
-          <div class="metric-row">
-            <div class="metric-header"><span class="metric-name">Vision Transformer</span><span class="metric-value">84%</span></div>
-            <div class="metric-bar"><div class="metric-fill" style="width:84%;background:linear-gradient(90deg,var(--amber),rgba(255,184,0,0.4))"></div></div>
-          </div>
-          <div class="metric-row">
-            <div class="metric-header"><span class="metric-name">Frequency Analyzer</span><span class="metric-value">91%</span></div>
-            <div class="metric-bar"><div class="metric-fill" style="width:91%;background:linear-gradient(90deg,var(--red),rgba(255,45,85,0.4))"></div></div>
-          </div>
-          <div class="metric-row">
-            <div class="metric-header"><span class="metric-name">Temporal Network</span><span class="metric-value">79%</span></div>
-            <div class="metric-bar"><div class="metric-fill" style="width:79%;background:linear-gradient(90deg,var(--amber),rgba(255,184,0,0.4))"></div></div>
-          </div>
-        </div>
-      </div>
-      <div class="report-card">
-        <div class="card-title"><span class="dot"></span>Export Options</div>
-        <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap">
-          <button class="btn-download">PDF Report</button>
-          <button class="btn-download">JSON Data</button>
-          <button class="btn-download">CSV Export</button>
-          <button class="btn-new-scan">New Scan</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- FOOTER -->
-<footer>
-  <div class="footer-logo">VERI<span>DEX</span></div>
-  <div class="footer-copy">© 2025 Veridex Intelligence · All Rights Reserved</div>
-  <ul class="footer-links">
-    <li><a href="#">Privacy</a></li>
-    <li><a href="#">Terms</a></li>
-    <li><a href="#">API Docs</a></li>
-    <li><a href="#">Contact</a></li>
-  </ul>
-</footer>
-<!-- ANALYZING OVERLAY -->
-<div class="analyze-overlay" id="analyzeOverlay">
-  <div class="analyze-scanner">
-    <div class="scanner-corner tl"></div>
-    <div class="scanner-corner tr"></div>
-    <div class="scanner-corner bl"></div>
-    <div class="scanner-corner br"></div>
-  </div>
-  <div class="analyze-text" id="analyzeText">Initializing Neural Networks...</div>
-  <div class="analyze-progress-bar"><div class="analyze-fill" id="analyzeFill"></div></div>
-  <div class="analyze-steps" id="analyzeSteps">
-    <div class="a-step" id="step1"><div class="a-step-dot"></div>Decoding video frames</div>
-    <div class="a-step" id="step2"><div class="a-step-dot"></div>Extracting facial landmarks</div>
-    <div class="a-step" id="step3"><div class="a-step-dot"></div>Running ensemble models</div>
-    <div class="a-step" id="step4"><div class="a-step-dot"></div>Frequency domain analysis</div>
-    <div class="a-step" id="step5"><div class="a-step-dot"></div>Temporal coherence check</div>
-    <div class="a-step" id="step6"><div class="a-step-dot"></div>Generating forensic report</div>
-  </div>
-</div>
-<!-- RESULT OVERLAY -->
-<div class="result-overlay" id="resultOverlay">
-  <div class="result-modal">
-    <button class="modal-close" onclick="closeResult()">✕ Close</button>
-    <div class="modal-verdict">
-      <div class="verdict-score" id="modalScore">87%</div>
-      <div class="verdict-info">
-        <div class="verdict-label">Analysis Complete</div>
-        <div class="verdict-title" id="modalVerdict">DEEPFAKE DETECTED</div>
-        <p class="verdict-desc" id="modalDesc">High confidence manipulation detected. Multiple forensic signals indicate AI-generated face swap using DeepFaceLab or similar toolchain. Temporal artifacts present in frames 42–87.</p>
-      </div>
-    </div>
-    <div class="modal-metrics">
-      <div class="modal-metric">
-        <div class="modal-metric-val" id="mm1">94%</div>
-        <div class="modal-metric-label">Face Anomaly</div>
-      </div>
-      <div class="modal-metric">
-        <div class="modal-metric-val" id="mm2">87%</div>
-        <div class="modal-metric-label">GAN Signature</div>
-      </div>
-      <div class="modal-metric">
-        <div class="modal-metric-val" id="mm3">2.1s</div>
-        <div class="modal-metric-label">Scan Duration</div>
-      </div>
-    </div>
-    <div class="modal-footer-actions">
-      <button class="btn-download" onclick="closeResult()">Download Report</button>
-      <button class="btn-new-scan" onclick="closeResult()">New Scan</button>
-    </div>
-  </div>
-</div>
-<script>
-  // ── UPLOAD INTERACTION ──
-  function handleDrop(e) {
-    e.preventDefault();
-    document.getElementById('uploadZone').classList.remove('dragging');
-    const file = e.dataTransfer.files[0];
-    if (file) startAnalysis(file);
-  }
-  function startAnalysis(file) {
-    if (!file) return;
-    showAnalyzing(file);
-  }
-  function showAnalyzing(file) {
-    const overlay = document.getElementById('analyzeOverlay');
-    overlay.classList.add('visible');
-    const steps = ['step1','step2','step3','step4','step5','step6'];
-    const labels = [
-      'Decoding video frames...',
-      'Extracting facial landmarks...',
-      'Running 12 neural models...',
-      'Frequency domain analysis...',
-      'Temporal coherence check...',
-      'Generating forensic report...'
-    ];
-    let currentStep = 0;
-    const interval = setInterval(() => {
-      if (currentStep > 0) {
-        document.getElementById(steps[currentStep - 1]).className = 'a-step done';
-      }
-      if (currentStep < steps.length) {
-        document.getElementById(steps[currentStep]).className = 'a-step active';
-        document.getElementById('analyzeText').textContent = labels[currentStep];
-        currentStep++;
-      } else {
-        clearInterval(interval);
-        setTimeout(() => {
-          overlay.classList.remove('visible');
-          // reset steps
-          steps.forEach(s => document.getElementById(s).className = 'a-step');
-          showResult(file);
-          updateMetrics();
-        }, 600);
-      }
-    }, 480);
-  }
-  function updateMetrics() {
-    const metrics = [
-      { id: 'm1', bar: 'b1', val: Math.floor(Math.random()*30+65) },
-      { id: 'm2', bar: 'b2', val: Math.floor(Math.random()*30+55) },
-      { id: 'm3', bar: 'b3', val: Math.floor(Math.random()*30+60) },
-      { id: 'm4', bar: 'b4', val: Math.floor(Math.random()*40+40) },
-      { id: 'm5', bar: 'b5', val: Math.floor(Math.random()*30+50) },
-    ];
-    const overall = Math.floor(metrics.reduce((a,m) => a+m.val, 0) / metrics.length);
-    const scoreEl = document.getElementById('authScore');
-    scoreEl.textContent = overall + '%';
-    scoreEl.className = 'result-score ' + (overall > 65 ? 'fake' : overall > 40 ? 'uncertain' : '');
-    metrics.forEach(m => {
-      document.getElementById(m.id).textContent = m.val + '%';
-      document.getElementById(m.bar).style.width = m.val + '%';
-    });
-  }
-  function showResult(file) {
-    const isFake = Math.random() > 0.4;
-    const score = isFake ? Math.floor(Math.random()*25+65) : Math.floor(Math.random()*25+5);
-    const overlay = document.getElementById('resultOverlay');
-    document.getElementById('modalScore').textContent = score + '%';
-    document.getElementById('modalScore').style.color = isFake ? 'var(--red)' : 'var(--green)';
-    document.getElementById('modalVerdict').textContent = isFake ? 'DEEPFAKE DETECTED' : 'AUTHENTIC CONTENT';
-    document.getElementById('modalVerdict').className = 'verdict-title ' + (isFake ? '' : 'authentic');
-    document.getElementById('modalDesc').textContent = isFake
-      ? `High confidence manipulation detected in "${file.name}". Multiple forensic signals indicate AI-generated face swap. Temporal artifacts present across multiple frames.`
-      : `No significant manipulation detected in "${file.name}". All forensic signals within normal parameters. Content appears to be authentic original media.`;
-    document.getElementById('mm1').textContent = Math.floor(Math.random()*20 + (isFake?75:5)) + '%';
-    document.getElementById('mm2').textContent = Math.floor(Math.random()*20 + (isFake?70:3)) + '%';
-    overlay.classList.add('visible');
-  }
-  function closeResult() {
-    document.getElementById('resultOverlay').classList.remove('visible');
-  }
-  // Close result on overlay click
-  document.getElementById('resultOverlay').addEventListener('click', function(e) {
-    if (e.target === this) closeResult();
-  });
-  // ── COUNTER ANIMATION ──
-  function animateCounters() {
-    document.querySelectorAll('.stat-number').forEach(el => {
-      const text = el.textContent;
-      const num = parseFloat(text);
-      if (isNaN(num)) return;
-      const suffix = text.replace(/[\d.]/g, '');
-      let start = 0;
-      const duration = 2000;
-      const startTime = performance.now();
-      function update(now) {
-        const elapsed = now - startTime;
-        const progress = Math.min(elapsed / duration, 1);
-        const eased = 1 - Math.pow(1 - progress, 3);
-        const current = start + (num - start) * eased;
-        el.firstChild.textContent = (num % 1 !== 0 ? current.toFixed(1) : Math.floor(current)) + suffix;
-        if (progress < 1) requestAnimationFrame(update);
-      }
-      el.firstChild && requestAnimationFrame(update);
-    });
-  }
-  // Intersection observer for animations
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach(e => {
-      if (e.isIntersecting) {
-        e.target.style.opacity = '1';
-        e.target.style.transform = 'translateY(0)';
-      }
-    });
-  }, { threshold: 0.1 });
-  document.querySelectorAll('.how-step, .feature-card, .report-card').forEach(el => {
-    el.style.opacity = '0';
-    el.style.transform = 'translateY(24px)';
-    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease, border-color 0.3s';
-    observer.observe(el);
-  });
-  setTimeout(animateCounters, 500);
-</script>
-</body>
-</html>