feat: replace vanilla frontend with React + Vite UI

- New frontend-react/ with React 18 + TypeScript + Tailwind CSS v4
- GridScan WebGL background on hero (Three.js + postprocessing)
- PillNav replaced with RadioNav icon tab bar
- Styled-components buttons: AnalyzeButton, InitiateButton, FileUploadInput
- Purple/black dark theme throughout all pages
- SVG area chart for frame-by-frame analysis
- Neumorphic cards on result page
- React Router with /pricing page
- Remove frontend-vanilla/ and stitch design artifacts

.gitignore

@@ -66,3 +66,5 @@ logs/
 
 # Node
 node_modules/
+frontend-react/dist/
+frontend-react/.vite/

AUTHRIX_CONTEXT.md

@@ -0,0 +1,400 @@
+# AUTHRIX — Complete Project Context
+
+> Give this file to any AI to get full context about the Authrix deepfake detection project.
+
+---
+
+## 1. What Is Authrix?
+
+Authrix is a full-stack AI-powered deepfake detection platform. It analyzes videos and determines whether they are REAL (authentic) or FAKE (AI-generated/manipulated). It uses a multi-agent pipeline combining visual analysis, audio analysis, and metadata scanning.
+
+**Live URL:** https://aarav13-authrix.hf.space  
+**GitHub:** https://github.com/Aarav-bit/Authrix  
+**HuggingFace Space:** https://huggingface.co/spaces/Aarav13/AuthriX  
+**Owner:** Aarav (Aarav13 on HuggingFace, Aarav-bit on GitHub)
+
+---
+
+## 2. Project Structure
+
+```
+E:\DeepFake Detect\
+├── backend/                    ← FastAPI Python backend (the core)
+│   ├── main.py                 ← App entry, routes, middleware, file serving
+│   ├── detector.py             ← Core detection engine (all agents)
+│   ├── audio_detector.py       ← Audio analysis pipeline
+│   ├── auth.py                 ← API key system, tier limits
+│   ├── requirements.txt        ← Python dependencies
+│   └── uploads/                ← Temp video storage (auto-cleaned)
+│
+├── extension/                  ← Chrome/Edge browser extension (MV3)
+│   ├── manifest.json           ← Extension config, permissions
+│   ├── background.js           ← Service worker, tab capture, API calls
+│   ├── content.js              ← Overlay UI injected into pages
+│   ├── offscreen.js            ← MediaRecorder (MV3 requirement)
+│   ├── offscreen.html          ← Offscreen document host
+│   ├── popup.html/js           ← Extension popup UI
+│   └── overlay.css             ← Overlay styles
+│
+├── frontend-vanilla/           ← The ACTIVE website (served by FastAPI)
+│   ├── index.html              ← Main app (cyberpunk dashboard UI)
+│   ├── pricing.html            ← Pricing/business page
+│   └── script.js               ← Frontend JS logic
+│
+├── Dockerfile                  ← Docker build for HuggingFace Spaces
+├── README.md                   ← Full project documentation
+├── BUSINESS_MODEL.md           ← Revenue strategy and pricing
+└── .gitignore
+```
+
+**Note:** `frontend/` (React) exists locally but is NOT deployed — `frontend-vanilla/` is what's live.
+
+---
+
+## 3. Backend — Detection Pipeline
+
+### File: `backend/detector.py`
+
+The core engine. Uses a multi-agent architecture:
+
+#### Agent 0: MetadataAgent
+- Scans first 512KB + last 64KB of video file
+- Looks for C2PA Content Credentials (cryptographic AI signatures)
+- Detects AI tool names: Veo3, Sora, Runway, Pika, Kling, Stability AI, Firefly, etc.
+- **Hard override**: if C2PA found → FAKE regardless of visual model
+- Adds ~50ms, no ML required
+
+#### Agent 1: FrameAnalyzerAgent
+- Extracts 40 frames (20 in fast_mode) uniformly across video duration
+- Resizes to 640×480 for processing
+- `fast_mode=True` for short captures (<30s), `fast_mode=False` for uploads
+
+#### Agent 2: FaceDetectorAgent
+- Uses MediaPipe face detection (confidence threshold: 0.3)
+- Single context for ALL frames (avoids repeated model init — 3× faster)
+- Crops faces with 20% padding, resizes to 224×224
+- Falls back to full-frame analysis if <5 faces detected
+
+#### Agent 3: DecisionAgent (ViT Ensemble)
+- **Model 1:** `dima806/deepfake_vs_real_image_detection` (99.3% accuracy, fake_label="Fake")
+- **Model 2:** `prithivMLmods/Deep-Fake-Detector-v2-Model` (92.1% accuracy, fake_label="Deepfake")
+- Per-crop inference (float32 — float16 breaks CPU inference)
+- Early exit: if Model 1 score > 0.88 or < 0.12, skip Model 2
+- Ensemble: Model1 × 0.55 + Model2 × 0.45
+- Falls back to heuristic analysis if models unavailable
+
+#### Agent 4: ReportGeneratorAgent
+- Base threshold: 0.58 (adaptive: ±0.03–0.07 based on consistency/coverage)
+- C2PA hard override: always FAKE if metadata signals found
+- Audio-visual mismatch detection (face-swap signal)
+- Confidence calibration: maps raw probability to 88–99% display range
+- `_calibrate()`: `distance = abs(prob - 0.5)`, `conf = 0.88 + 0.11 * (distance/0.5)^0.6`
+
+#### Orchestrator: DeepfakeAuthenticator
+```
+analyze(video_path, fast_mode=False):
+  1. Cache check (SHA256 hash of first 1MB + file size)
+  2. MetadataAgent.analyze() — instant C2PA scan
+  3. FrameAnalyzerAgent.extract_frames()
+  4. [PARALLEL] FaceDetectorAgent + AudioAuthenticator (20s timeout)
+  5. DecisionAgent.analyze_frames()
+  6. ReportGeneratorAgent.generate()
+  7. Cache result
+```
+
+### File: `backend/audio_detector.py`
+
+Four-agent audio pipeline:
+- **AudioExtractorAgent**: extracts first 30s of audio via moviepy, converts to 16kHz mono WAV
+- **AudioAnalysisAgent**: librosa heuristics (pitch variance, MFCC delta, spectral flatness, ZCR, silence ratio)
+- **AudioDecisionAgent**: Wav2Vec2 model (`Vansh180/deepfake-audio-wav2vec2`), max 3 chunks (30s)
+- **AudioReportAgent**: combines model + heuristics, detects AV_MISMATCH (face-swap signal)
+
+Audio results: `HUMAN_VOICE`, `AI_VOICE`, `AV_MISMATCH`, `NO_AUDIO`
+
+### File: `backend/main.py`
+
+FastAPI app with these routes:
+- `GET /health` → server status + model info
+- `POST /analyze` → upload video file, returns detection result
+- `POST /analyze-url` → analyze video from URL (uses yt-dlp for YouTube/TikTok/etc.)
+- `GET /` → serves `frontend-vanilla/index.html`
+- `GET /pricing` → serves `frontend-vanilla/pricing.html`
+- `GET /script.js` → serves `frontend-vanilla/script.js`
+- `GET /{filename}` → catch-all for static files
+
+**Key logic in `/analyze`:**
+- Validates file extension (mp4, avi, mov, mkv, webm, wmv)
+- Max file size: 100MB
+- Converts webm/mkv to mp4 via bundled ffmpeg (imageio-ffmpeg) — OpenCV can't decode webm on Windows
+- Auto-detects fast_mode: videos <30s use 20 frames, ≥30s use 40 frames
+- 120s request timeout
+
+### File: `backend/auth.py`
+
+API key system:
+- Keys stored in `backend/api_keys.json`
+- Tiers: free (10/mo), pro (100/mo), business (1000/mo), enterprise/owner (unlimited)
+- `validate_api_key()`, `check_usage_limit()`, `increment_usage()`
+- Owner key: `authrix_vx5b5HqXIEtAuhUJw92p-aU7Ucz34RtWHzpBCzbKqKE` (unlimited)
+
+---
+
+## 4. API Response Format
+
+```json
+{
+  "result": "FAKE",           // "FAKE" or "REAL"
+  "confidence": 94.2,         // 88-99% (calibrated display score)
+  "details": [                // Human-readable explanation bullets
+    "Strong deepfake indicators detected across multiple facial regions",
+    "Inconsistent manipulation across frames (78% flagged)",
+    "Unnatural texture blending detected at facial boundary regions"
+  ],
+  "frame_timeline": [         // Per-frame fake probability
+    {"frame": 0, "fake_pct": 82.1},
+    {"frame": 5, "fake_pct": 79.3}
+  ],
+  "metadata": {
+    "frames_analyzed": 38,
+    "frames_with_faces": 35,
+    "video_duration_sec": 12.4,
+    "video_fps": 30.0,
+    "resolution": "1280x720"
+  },
+  "audio": {
+    "available": true,
+    "result": "HUMAN_VOICE",  // HUMAN_VOICE | AI_VOICE | AV_MISMATCH | NO_AUDIO
+    "confidence": 91.2,
+    "fake_probability": 0.12
+  },
+  "metadata_check": {
+    "ai_generated": false,
+    "c2pa_detected": false,
+    "tool_detected": null
+  },
+  "processing_time_sec": 18.4,
+  "cached": false             // true if returned from cache
+}
+```
+
+---
+
+## 5. Browser Extension
+
+**Version:** 2.2.0 (Manifest V3)  
+**Supported:** Chrome, Edge, Brave
+
+### Architecture (MV3 compliant)
+```
+User clicks popup
+  → popup.js sends START_CAPTURE to background.js
+  → background.js calls tabCapture.getMediaStreamId()
+  → background.js creates offscreen document
+  → offscreen.js gets getUserMedia({chromeMediaSource:'tab'})
+  → offscreen.js records 8 seconds via MediaRecorder (4Mbps)
+  → offscreen.js sends raw byte chunks to background.js
+  → background.js reassembles bytes → Blob → FormData
+  → background.js POSTs to /analyze
+  → background.js sends result to content.js
+  → content.js renders overlay on the page
+```
+
+### Key Files
+- `background.js`: Service worker. Handles tab capture, API calls, offscreen management. `API_BASE` points to HF Space.
+- `offscreen.js`: Records tab stream. Sends raw Uint8Array chunks (not base64 — avoids message size limits).
+- `content.js`: Renders overlay UI. Shows loading steps, result (FAKE/REAL), confidence bar, audio row, metadata.
+- `popup.html/js`: Extension popup. Shows server status, current page info, capture button, URL input, last result.
+- `manifest.json`: Permissions: `tabCapture`, `scripting`, `storage`, `offscreen`, `contextMenus`, `tabs`, `activeTab`.
+
+### API Base URLs
+- **Local dev:** `http://localhost:8000`
+- **Production (HF):** `https://aarav13-authrix.hf.space`
+
+### Context Menu
+- Right-click page → "🔍 Analyze with Authrix" (captures tab stream)
+- Right-click link → "🔗 Analyze video URL with Authrix" (sends URL to /analyze-url)
+
+---
+
+## 6. Frontend (frontend-vanilla/)
+
+Vanilla HTML/CSS/JS — no framework. Served directly by FastAPI.
+
+### `index.html`
+- Cyberpunk-themed dashboard
+- Tailwind CSS (CDN), Space Grotesk font
+- Navigation: Dashboard | Pricing | Agents | Logs | Network
+- Upload zone with drag-and-drop
+- Analysis progress UI with step indicators
+- Results panel with confidence score, frame timeline, details
+- Modals: Agents, Logs, Network
+
+### `pricing.html`
+- Pricing tiers: Free ($0), Pro ($9.99/mo), Business ($49/mo), Enterprise (custom)
+- FAQ section
+- "DEMO VERSION" badge removed — looks production-ready
+- Buttons show alert explaining payment integration coming soon
+
+---
+
+## 7. Deployment
+
+### HuggingFace Spaces (Live)
+- **URL:** https://aarav13-authrix.hf.space
+- **Space:** https://huggingface.co/spaces/Aarav13/AuthriX
+- **Runtime:** Docker (port 7860)
+- **Dockerfile:** Installs system deps, copies backend + frontend-vanilla, installs Python deps, pre-caches HF models at build time
+- **User:** runs as user 1000 (HF requirement)
+- Models are baked into the Docker image — no cold-start download
+
+### Git Remotes
+```
+origin  → https://github.com/Aarav-bit/Authrix.git
+hf      → https://huggingface.co/spaces/Aarav13/AuthriX
+```
+
+### Deploy Commands
+```bash
+# Push to GitHub
+git push origin master
+
+# Push to HuggingFace (triggers rebuild)
+git push hf master:main
+
+# Force push (after history rewrite)
+git push hf master:main --force
+```
+
+### Local Dev
+```bash
+cd backend
+python -m uvicorn main:app --host 0.0.0.0 --port 8000
+# App at http://localhost:8000
+```
+
+---
+
+## 8. Python Dependencies (requirements.txt)
+
+```
+fastapi==0.111.0
+uvicorn[standard]==0.29.0
+python-multipart==0.0.9
+opencv-python-headless==4.9.0.80   # headless for server
+mediapipe==0.10.14
+numpy==1.26.4
+Pillow==10.3.0
+transformers>=4.41.0
+torch>=2.3.0
+torchvision
+torchaudio
+moviepy>=1.0.3
+librosa>=0.10.0
+soundfile>=0.12.1
+imageio-ffmpeg>=0.4.9              # bundled ffmpeg binary
+yt-dlp>=2024.1.0
+httpx>=0.27.0
+stripe>=8.0.0
+```
+
+---
+
+## 9. Known Issues & Decisions
+
+| Issue | Decision |
+|---|---|
+| OpenCV can't decode .webm on Windows | Convert to .mp4 via bundled ffmpeg (imageio-ffmpeg) before analysis |
+| Float16 on CPU produces wrong results | Always use float32 for ViT inference |
+| Batching all 40 crops causes OOM on HF CPU | Per-crop inference with early exit |
+| Audio Wav2Vec2 hangs on long videos | 20s timeout + cap to 3 chunks (30s of audio) |
+| Modern AI video (Veo3, Sora) fools ViT models | C2PA metadata scan as hard override |
+| Extension base64 encoding corrupts large videos | Send raw Uint8Array chunks instead |
+| HF rejects PNG files in git push | Force-add icons with `git add -f`, exclude others via .gitignore |
+| Temporal consistency agent caused false positives | Removed — thresholds too aggressive for real phone videos |
+
+---
+
+## 10. Business Model
+
+### Tiers
+| Tier | Price | Analyses/Month |
+|---|---|---|
+| Free | $0 | 10 |
+| Pro | $9.99/mo | 100 |
+| Business | $49/mo | 1,000 |
+| Enterprise | Custom | Unlimited |
+
+### Revenue Streams
+1. SaaS subscriptions (main)
+2. Pay-per-use API ($0.05–$0.25 per video)
+3. Browser extension premium ($4.99/mo)
+4. B2B enterprise deals ($5K–$50K/mo)
+5. White-label licensing
+6. Consulting & custom model training
+
+### Payment
+- Stripe integration code exists (`backend/stripe_integration.py`) but NOT connected
+- Currently demo-only — buttons show alert
+- Owner API key has unlimited access
+
+---
+
+## 11. Accuracy Notes
+
+- **Works well on:** Face-swap deepfakes, GAN-generated faces, AI voice synthesis, C2PA-signed AI video (Veo3, Sora, Runway)
+- **Limitations:** Modern diffusion-based video (Veo3 without C2PA) can fool the ViT models — they were trained on older GAN-based fakes
+- **Threshold:** 0.58 base (adaptive ±0.03–0.07). Raising reduces false positives on real videos. Lowering catches more deepfakes but increases false positives.
+- **Confidence display:** Always 88–99% (calibrated). Raw model scores of 0.60 → ~92% displayed.
+
+---
+
+## 12. Extension Install (Developer Mode)
+
+1. Open `chrome://extensions`
+2. Enable **Developer Mode** (top-right toggle)
+3. Click **Load unpacked** → select `extension/` folder
+4. Authrix icon appears in toolbar
+5. Make sure backend is running at `http://localhost:8000` (local) or HF Space is live
+
+---
+
+## 13. Quick Reference — Key Variables
+
+| Variable | Location | Value |
+|---|---|---|
+| `API_BASE` | extension/background.js | `https://aarav13-authrix.hf.space` |
+| `API_BASE` | extension/popup.js | `https://aarav13-authrix.hf.space` |
+| `CAPTURE_SEC` | extension/background.js | `8` (seconds to record) |
+| `BASE_THRESHOLD` | backend/detector.py | `0.58` |
+| `MAX_FILE_SIZE_MB` | backend/main.py | `100` |
+| `UPLOAD_DIR` | backend/main.py | `uploads/` |
+| Owner API Key | backend/api_keys.json | `authrix_vx5b5HqXIEtAuhUJw92p-aU7Ucz34RtWHzpBCzbKqKE` |
+| HF Port | Dockerfile | `7860` |
+| Local Port | main.py | `8000` |
+
+---
+
+## 14. How to Make Changes
+
+### Change detection threshold (more/less sensitive)
+Edit `backend/detector.py` → `ReportGeneratorAgent.BASE_THRESHOLD`
+- Higher (e.g. 0.65) = fewer false positives, may miss subtle fakes
+- Lower (e.g. 0.52) = catches more fakes, more false positives on real videos
+
+### Change capture duration
+Edit `extension/background.js` → `CAPTURE_SEC`
+
+### Switch extension between local and production
+Edit `extension/background.js` and `extension/popup.js` → `API_BASE`
+
+### Add a new AI generator signature
+Edit `backend/detector.py` → `MetadataAgent.AI_SIGNATURES` and `AI_TOOL_NAMES`
+
+### Deploy after changes
+```bash
+git add -A
+git commit -m "your message"
+git push origin master        # GitHub
+git push hf master:main       # HuggingFace (triggers rebuild)
+```

frontend-react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend-react/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend-react/eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])

frontend-react/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AUTHRIX AI - Deepfake Detection Engine</title>
+    <meta name="description" content="AI-powered deepfake detection platform. Verify video authenticity in real-time." />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend-react/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "frontend-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.36",
+    "face-api.js": "^0.22.2",
+    "gsap": "^3.15.0",
+    "postprocessing": "^6.39.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "styled-components": "^6.4.1",
+    "three": "^0.184.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "tailwindcss": "^4.2.4",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.10"
+  }
+}

frontend-react/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend-react/src/App.tsx

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import type { AnalysisResult, AppState } from './types';
+import Background from './components/Background';
+import RadioNav from './components/RadioNav';
+import HeroSection from './components/HeroSection';
+import UploadSection from './components/UploadSection';
+import ProcessingSection from './components/ProcessingSection';
+import ResultSection from './components/ResultSection';
+import ErrorSection from './components/ErrorSection';
+import Modal from './components/Modal';
+
+const AGENTS = [
+  { name: 'MetadataAgent',       desc: 'Scans C2PA signatures and AI tool metadata in the first 512KB of the file.' },
+  { name: 'FrameAnalyzerAgent',  desc: 'Extracts up to 40 frames uniformly across the video duration.' },
+  { name: 'FaceDetectorAgent',   desc: 'Uses MediaPipe to detect and crop facial regions with 20% padding.' },
+  { name: 'DecisionAgent (ViT)', desc: 'Ensemble of two ViT models (99.3% + 92.1% accuracy) with early exit.' },
+  { name: 'AudioAuthenticator',  desc: 'Wav2Vec2-based audio analysis with librosa heuristics for AV mismatch.' },
+  { name: 'ReportGeneratorAgent',desc: 'Adaptive threshold + confidence calibration to produce the final verdict.' },
+];
+
+export default function App() {
+  const [state, setState] = useState<AppState>('hero');
+  const [result, setResult] = useState<AnalysisResult | null>(null);
+  const [error, setError]   = useState('');
+  const [modal, setModal]   = useState<string | null>(null);
+
+  async function handleAnalyze(file: File) {
+    setState('processing');
+    const fd = new FormData();
+    fd.append('file', file);
+    try {
+      const res = await fetch('/analyze', { method: 'POST', body: fd });
+      if (!res.ok) {
+        const e = await res.json().catch(() => ({}));
+        throw new Error((e as { detail?: string }).detail || `Server error ${res.status}`);
+      }
+      const data: AnalysisResult = await res.json();
+      setResult(data);
+      setState('result');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Connection to analysis engine failed.');
+      setState('error');
+    }
+  }
+
+  const activeNav =
+    state === 'hero'       ? 'dashboard' :
+    state === 'upload'     ? 'analyze'   :
+    state === 'processing' ? 'analyze'   :
+    state === 'result'     ? 'analyze'   : 'dashboard';
+
+  const handleNav = (id: string) => {
+    if (id === 'dashboard') setState('hero');
+    else if (id === 'analyze') setState('upload');
+    else if (id === 'pricing') window.location.href = '/pricing';
+    else if (id === 'agents') setModal('agents');
+    else if (id === 'settings') setModal('network');
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col relative overflow-x-hidden">
+      <Background />
+
+      <RadioNav active={activeNav} onNavigate={handleNav} />
+
+      {state === 'hero'       && <HeroSection onAnalyze={() => setState('upload')} />}
+      {state === 'upload'     && <UploadSection onAnalyze={handleAnalyze} onBack={() => setState('hero')} />}
+      {state === 'processing' && <ProcessingSection />}
+      {state === 'result'     && result && <ResultSection result={result} onReset={() => setState('upload')} />}
+      {state === 'error'      && <ErrorSection message={error} onRetry={() => setState('upload')} />}
+
+      {/* Agents Modal */}
+      {modal === 'agents' && (
+        <Modal title="Detection Agents" onClose={() => setModal(null)}>
+          <div className="flex flex-col gap-4">
+            {AGENTS.map((ag, i) => (
+              <div key={i} className="flex items-start gap-4 p-4 rounded-lg"
+                style={{ background: 'rgba(30,15,50,0.6)', border: '1px solid rgba(124,58,237,0.2)' }}>
+                <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold"
+                  style={{ background: 'rgba(124,58,237,0.15)', border: '1px solid rgba(168,85,247,0.3)', color: '#a855f7' }}>
+                  {i}
+                </div>
+                <div>
+                  <div className="text-sm font-semibold mb-1" style={{ color: '#c084fc' }}>{ag.name}</div>
+                  <div className="text-xs text-purple-300/50">{ag.desc}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Modal>
+      )}
+
+      {/* Logs Modal */}
+      {modal === 'logs' && (
+        <Modal title="System Logs" onClose={() => setModal(null)}>
+          <div className="rounded-lg p-4 font-mono text-xs space-y-1 max-h-80 overflow-y-auto"
+            style={{ background: 'rgba(8,4,18,0.9)', color: '#a855f7' }}>
+            {[
+              '[BOOT] Authrix AI v2.2.0 initialized',
+              '[SYS] ViT ensemble models loaded',
+              '[SYS] MediaPipe face detector ready',
+              '[SYS] Wav2Vec2 audio model ready',
+              '[SYS] C2PA metadata scanner active',
+              '[NET] FastAPI server listening on :8000',
+              '[AUTH] API key validation enabled',
+              '[CACHE] SHA256 result cache initialized',
+            ].map((line, i) => (
+              <div key={i} className="opacity-70">{line}</div>
+            ))}
+          </div>
+        </Modal>
+      )}
+
+      {/* Network Modal */}
+      {modal === 'network' && (
+        <Modal title="Network Status" onClose={() => setModal(null)}>
+          <div className="grid grid-cols-2 gap-4">
+            {[
+              { label: 'API Endpoint',     value: window.location.origin },
+              { label: 'HF Space',         value: 'aarav13-authrix.hf.space' },
+              { label: 'Max File Size',    value: '100 MB' },
+              { label: 'Request Timeout',  value: '120s' },
+              { label: 'Capture Duration', value: '8s' },
+              { label: 'Cache',            value: 'SHA256 (1MB)' },
+            ].map(({ label, value }) => (
+              <div key={label} className="rounded-lg p-4"
+                style={{ background: 'rgba(20,10,35,0.6)', border: '1px solid rgba(88,28,135,0.25)' }}>
+                <div className="text-[10px] uppercase tracking-widest mb-1 text-purple-500/50">{label}</div>
+                <div className="text-sm font-bold font-mono" style={{ color: '#c084fc' }}>{value}</div>
+              </div>
+            ))}
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}

frontend-react/src/components/AnalyzeButton.tsx

@@ -0,0 +1,133 @@
+import styled from 'styled-components';
+
+interface AnalyzeButtonProps {
+  onClick: () => void;
+}
+
+const StyledWrapper = styled.div`
+  .button {
+    --main-size: 1.1em;
+    --color-text: #ffffff;
+    --color-background: #7c3aed;
+    --color-background-hover: #a855f7;
+    --color-outline: rgba(168, 85, 247, 0.25);
+    --color-shadow: rgba(0, 0, 0, 0.4);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    border: none;
+    border-radius: calc(var(--main-size) * 100);
+    padding: 0.45em 0 0.45em 0.9em;
+    font-family: 'Space Grotesk', 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: var(--main-size);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-text);
+    background: var(--color-background);
+    box-shadow: 0 0 0.3em 0 var(--color-background);
+    transition: 1s;
+  }
+
+  .button:active {
+    transform: scale(0.95);
+  }
+
+  .button:hover {
+    outline: 0.1em solid transparent;
+    outline-offset: 0.2em;
+    box-shadow: 0 0 1.2em 0 var(--color-background);
+    animation: ripple 1s linear infinite, colorize 1s infinite;
+    transition: 0.5s;
+  }
+
+  .button span {
+    margin-right: 0.3em;
+    transition: 0.5s;
+  }
+
+  .button:hover span {
+    text-shadow: 5px 5px 5px var(--color-shadow);
+  }
+
+  .button:active span {
+    text-shadow: none;
+  }
+
+  .button svg {
+    height: 0.8em;
+    fill: var(--color-text);
+    margin-right: -0.16em;
+    position: relative;
+    transition: 0.5s;
+  }
+
+  .button:hover svg {
+    margin-right: 0.66em;
+    transition: 0.5s;
+    filter: drop-shadow(5px 5px 2.5px var(--color-shadow));
+  }
+
+  .button:active svg {
+    filter: none;
+  }
+
+  .button svg polygon:nth-child(1) {
+    transition: 0.4s;
+    transform: translateX(-60%);
+  }
+
+  .button svg polygon:nth-child(2) {
+    transition: 0.5s;
+    transform: translateX(-30%);
+  }
+
+  .button:hover svg polygon:nth-child(1) {
+    transform: translateX(0%);
+    animation: opacity 1s infinite 0.6s;
+  }
+
+  .button:hover svg polygon:nth-child(2) {
+    transform: translateX(0%);
+    animation: opacity 1s infinite 0.4s;
+  }
+
+  .button:hover svg polygon:nth-child(3) {
+    animation: opacity 1s infinite 0.2s;
+  }
+
+  @keyframes opacity {
+    0%   { opacity: 1; }
+    50%  { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes colorize {
+    0%   { background: var(--color-background); }
+    50%  { background: var(--color-background-hover); }
+    100% { background: var(--color-background); }
+  }
+
+  @keyframes ripple {
+    0%   { outline: 0em solid transparent;              outline-offset: -0.1em; }
+    50%  { outline: 0.2em solid var(--color-outline);   outline-offset: 0.2em; }
+    100% { outline: 0.4em solid transparent;            outline-offset: 0.4em; }
+  }
+`;
+
+export default function AnalyzeButton({ onClick }: AnalyzeButtonProps) {
+  return (
+    <StyledWrapper>
+      <button className="button" onClick={onClick}>
+        <span>ANALYZE VIDEO</span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 43">
+          <polygon points="39.58,4.46 44.11,0 66,21.5 44.11,43 39.58,38.54 56.94,21.5" />
+          <polygon points="19.79,4.46 24.32,0 46.21,21.5 24.32,43 19.79,38.54 37.15,21.5" />
+          <polygon points="0,4.46 4.53,0 26.42,21.5 4.53,43 0,38.54 17.36,21.5" />
+        </svg>
+      </button>
+    </StyledWrapper>
+  );
+}

frontend-react/src/components/Background.tsx

@@ -0,0 +1,36 @@
+export default function Background() {
+  return (
+    <div className="fixed inset-0 z-0 pointer-events-none">
+      {/* Subtle scan lines */}
+      <div
+        className="absolute inset-0 opacity-10"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 50%)',
+          backgroundSize: '100% 4px',
+        }}
+      />
+      {/* Technical grid */}
+      <div
+        className="absolute inset-0 opacity-[0.04]"
+        style={{
+          backgroundImage:
+            'linear-gradient(to right,#6d28d9 1px,transparent 1px),linear-gradient(to bottom,#6d28d9 1px,transparent 1px)',
+          backgroundSize: '48px 48px',
+        }}
+      />
+      {/* Ambient purple glow — top right */}
+      <div
+        className="absolute top-0 right-0 w-[700px] h-[700px] rounded-full blur-[140px]"
+        style={{ background: 'rgba(124,58,237,0.07)' }}
+      />
+      {/* Ambient indigo glow — bottom left */}
+      <div
+        className="absolute bottom-0 left-0 w-[500px] h-[500px] rounded-full blur-[120px]"
+        style={{ background: 'rgba(79,46,220,0.06)' }}
+      />
+      {/* Noise */}
+      <div className="absolute inset-0 noise-bg" />
+    </div>
+  );
+}

frontend-react/src/components/ErrorSection.tsx

@@ -0,0 +1,32 @@
+interface ErrorSectionProps {
+  message: string;
+  onRetry: () => void;
+}
+
+export default function ErrorSection({ message, onRetry }: ErrorSectionProps) {
+  return (
+    <section className="relative z-10 flex flex-col items-center justify-center px-6 min-h-screen">
+      <div className="w-full max-w-lg glass-panel rounded-xl p-10 flex flex-col items-center gap-6 text-center glow-border-error">
+        <div className="w-20 h-20 rounded-full bg-[#ffb4ab]/10 border border-[#ffb4ab]/30
+          flex items-center justify-center shadow-[0_0_30px_rgba(255,180,171,0.2)]">
+          <span className="material-symbols-outlined text-[#ffb4ab] text-[40px]">error</span>
+        </div>
+        <div>
+          <h2 className="text-2xl font-semibold text-[#ffb4ab] mb-2">ANALYSIS FAILED</h2>
+          <p className="text-sm text-[#b9cbbc]">{message}</p>
+        </div>
+        <button
+          onClick={onRetry}
+          className="px-8 py-3 bg-[#ffb4ab]/10 border border-[#ffb4ab]/50 text-[#ffb4ab]
+            font-bold text-xs uppercase tracking-wider rounded hover:bg-[#ffb4ab]/20
+            transition-all active:scale-95"
+        >
+          <span className="flex items-center gap-2">
+            <span className="material-symbols-outlined text-[16px]">refresh</span>
+            Try Again
+          </span>
+        </button>
+      </div>
+    </section>
+  );
+}

frontend-react/src/components/FileUploadInput.tsx

@@ -0,0 +1,151 @@
+import styled from 'styled-components';
+
+interface FileUploadInputProps {
+  onFile: (f: File) => void;
+}
+
+const StyledWrapper = styled.div`
+  .container {
+    --transition: 350ms;
+    --folder-W: 120px;
+    --folder-H: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 10px;
+    background: linear-gradient(135deg, #4c1d95, #7c3aed);
+    border-radius: 15px;
+    box-shadow: 0 15px 30px rgba(88, 28, 135, 0.4);
+    height: calc(var(--folder-H) * 1.7);
+    position: relative;
+  }
+
+  .folder {
+    position: absolute;
+    top: -20px;
+    left: calc(50% - 60px);
+    animation: float 2.5s infinite ease-in-out;
+    transition: transform var(--transition) ease;
+  }
+
+  .folder:hover {
+    transform: scale(1.05);
+  }
+
+  .folder .front-side,
+  .folder .back-side {
+    position: absolute;
+    transition: transform var(--transition);
+    transform-origin: bottom center;
+  }
+
+  .folder .back-side::before,
+  .folder .back-side::after {
+    content: "";
+    display: block;
+    background-color: #c084fc;
+    opacity: 0.35;
+    width: var(--folder-W);
+    height: var(--folder-H);
+    position: absolute;
+    transform-origin: bottom center;
+    border-radius: 15px;
+    transition: transform 350ms;
+    z-index: 0;
+  }
+
+  .container:hover .back-side::before {
+    transform: rotateX(-5deg) skewX(5deg);
+  }
+
+  .container:hover .back-side::after {
+    transform: rotateX(-15deg) skewX(12deg);
+  }
+
+  .folder .front-side {
+    z-index: 1;
+  }
+
+  .container:hover .front-side {
+    transform: rotateX(-40deg) skewX(15deg);
+  }
+
+  .folder .tip {
+    background: linear-gradient(135deg, #a855f7, #7c3aed);
+    width: 80px;
+    height: 20px;
+    border-radius: 12px 12px 0 0;
+    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.5);
+    position: absolute;
+    top: -10px;
+    z-index: 2;
+  }
+
+  .folder .cover {
+    background: linear-gradient(135deg, #c084fc, #a855f7);
+    width: var(--folder-W);
+    height: var(--folder-H);
+    box-shadow: 0 15px 30px rgba(88, 28, 135, 0.5);
+    border-radius: 10px;
+  }
+
+  .custom-file-upload {
+    font-size: 1em;
+    font-family: 'Space Grotesk', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #ffffff;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.12);
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    transition: background var(--transition) ease;
+    display: inline-block;
+    width: 100%;
+    padding: 10px 35px;
+    position: relative;
+  }
+
+  .custom-file-upload:hover {
+    background: rgba(255, 255, 255, 0.22);
+  }
+
+  .custom-file-upload input[type="file"] {
+    display: none;
+  }
+
+  @keyframes float {
+    0%   { transform: translateY(0px); }
+    50%  { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+  }
+`;
+
+export default function FileUploadInput({ onFile }: FileUploadInputProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    if (f && f.type.startsWith('video/')) onFile(f);
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="container">
+        <div className="folder">
+          <div className="front-side">
+            <div className="tip" />
+            <div className="cover" />
+          </div>
+          <div className="back-side cover" />
+        </div>
+        <label className="custom-file-upload">
+          <input className="title" type="file" accept="video/*" onChange={handleChange} />
+          Upload a File
+        </label>
+      </div>
+    </StyledWrapper>
+  );
+}

frontend-react/src/components/GridScan.css

@@ -0,0 +1,39 @@
+.gridscan {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.gridscan__preview {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  width: 220px;
+  height: 132px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  background: #000;
+  color: #fff;
+  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  pointer-events: none;
+}
+
+.gridscan__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+.gridscan__badge {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  padding: 2px 6px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+}

frontend-react/src/components/GridScan.d.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'react';
+
+export interface GridScanProps {
+  enableWebcam?: boolean;
+  showPreview?: boolean;
+  modelsPath?: string;
+  sensitivity?: number;
+  lineThickness?: number;
+  linesColor?: string;
+  scanColor?: string;
+  scanOpacity?: number;
+  gridScale?: number;
+  lineStyle?: 'solid' | 'dashed' | 'dotted';
+  lineJitter?: number;
+  scanDirection?: 'forward' | 'backward' | 'pingpong';
+  enablePost?: boolean;
+  bloomIntensity?: number;
+  bloomThreshold?: number;
+  bloomSmoothing?: number;
+  chromaticAberration?: number;
+  noiseIntensity?: number;
+  scanGlow?: number;
+  scanSoftness?: number;
+  scanPhaseTaper?: number;
+  scanDuration?: number;
+  scanDelay?: number;
+  enableGyro?: boolean;
+  scanOnClick?: boolean;
+  snapBackDelay?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export declare const GridScan: (props: GridScanProps) => JSX.Element;
+export default GridScan;

frontend-react/src/components/GridScan.jsx

@@ -0,0 +1,716 @@
+import * as faceapi from 'face-api.js';
+import {
+  BloomEffect,
+  ChromaticAberrationEffect,
+  EffectComposer,
+  EffectPass,
+  RenderPass,
+} from 'postprocessing';
+import { useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import './GridScan.css';
+
+const vert = `varying vec2 vUv;
+void main(){
+  vUv = uv;
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}`;
+
+const frag = `precision highp float;
+uniform vec3 iResolution;
+uniform float iTime;
+uniform vec2 uSkew;
+uniform float uTilt;
+uniform float uYaw;
+uniform float uLineThickness;
+uniform vec3 uLinesColor;
+uniform vec3 uScanColor;
+uniform float uGridScale;
+uniform float uLineStyle;
+uniform float uLineJitter;
+uniform float uScanOpacity;
+uniform float uScanDirection;
+uniform float uNoise;
+uniform float uBloomOpacity;
+uniform float uScanGlow;
+uniform float uScanSoftness;
+uniform float uPhaseTaper;
+uniform float uScanDuration;
+uniform float uScanDelay;
+varying vec2 vUv;
+uniform float uScanStarts[8];
+uniform float uScanCount;
+const int MAX_SCANS = 8;
+
+float smoother01(float a, float b, float x){
+  float t = clamp((x - a) / max(1e-5, (b - a)), 0.0, 1.0);
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord){
+  vec2 p = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
+  vec3 ro = vec3(0.0);
+  vec3 rd = normalize(vec3(p, 2.0));
+  float cR = cos(uTilt), sR = sin(uTilt);
+  rd.xy = mat2(cR, -sR, sR, cR) * rd.xy;
+  float cY = cos(uYaw), sY = sin(uYaw);
+  rd.xz = mat2(cY, -sY, sY, cY) * rd.xz;
+  vec2 skew = clamp(uSkew, vec2(-0.7), vec2(0.7));
+  rd.xy += skew * rd.z;
+  vec3 color = vec3(0.0);
+  float minT = 1e20;
+  float gridScale = max(1e-5, uGridScale);
+  float fadeStrength = 2.0;
+  vec2 gridUV = vec2(0.0);
+  float hitIsY = 1.0;
+  for (int i = 0; i < 4; i++){
+    float isY = float(i < 2);
+    float pos = mix(-0.2, 0.2, float(i)) * isY + mix(-0.5, 0.5, float(i - 2)) * (1.0 - isY);
+    float num = pos - (isY * ro.y + (1.0 - isY) * ro.x);
+    float den = isY * rd.y + (1.0 - isY) * rd.x;
+    float t = num / den;
+    vec3 h = ro + rd * t;
+    float depthBoost = smoothstep(0.0, 3.0, h.z);
+    h.xy += skew * 0.15 * depthBoost;
+    bool use = t > 0.0 && t < minT;
+    gridUV = use ? mix(h.zy, h.xz, isY) / gridScale : gridUV;
+    minT = use ? t : minT;
+    hitIsY = use ? isY : hitIsY;
+  }
+  vec3 hit = ro + rd * minT;
+  float dist = length(hit - ro);
+  float jitterAmt = clamp(uLineJitter, 0.0, 1.0);
+  if (jitterAmt > 0.0) {
+    vec2 j = vec2(
+      sin(gridUV.y * 2.7 + iTime * 1.8),
+      cos(gridUV.x * 2.3 - iTime * 1.6)
+    ) * (0.15 * jitterAmt);
+    gridUV += j;
+  }
+  float fx = fract(gridUV.x);
+  float fy = fract(gridUV.y);
+  float ax = min(fx, 1.0 - fx);
+  float ay = min(fy, 1.0 - fy);
+  float wx = fwidth(gridUV.x);
+  float wy = fwidth(gridUV.y);
+  float halfPx = max(0.0, uLineThickness) * 0.5;
+  float tx = halfPx * wx;
+  float ty = halfPx * wy;
+  float aax = wx;
+  float aay = wy;
+  float lineX = 1.0 - smoothstep(tx, tx + aax, ax);
+  float lineY = 1.0 - smoothstep(ty, ty + aay, ay);
+  if (uLineStyle > 0.5) {
+    float dashRepeat = 4.0;
+    float dashDuty = 0.5;
+    float vy = fract(gridUV.y * dashRepeat);
+    float vx = fract(gridUV.x * dashRepeat);
+    float dashMaskY = step(vy, dashDuty);
+    float dashMaskX = step(vx, dashDuty);
+    if (uLineStyle < 1.5) {
+      lineX *= dashMaskY;
+      lineY *= dashMaskX;
+    } else {
+      float dotRepeat = 6.0;
+      float dotWidth = 0.18;
+      float cy = abs(fract(gridUV.y * dotRepeat) - 0.5);
+      float cx = abs(fract(gridUV.x * dotRepeat) - 0.5);
+      float dotMaskY = 1.0 - smoothstep(dotWidth, dotWidth + fwidth(gridUV.y * dotRepeat), cy);
+      float dotMaskX = 1.0 - smoothstep(dotWidth, dotWidth + fwidth(gridUV.x * dotRepeat), cx);
+      lineX *= dotMaskY;
+      lineY *= dotMaskX;
+    }
+  }
+  float primaryMask = max(lineX, lineY);
+  vec2 gridUV2 = (hitIsY > 0.5 ? hit.xz : hit.zy) / gridScale;
+  if (jitterAmt > 0.0) {
+    vec2 j2 = vec2(
+      cos(gridUV2.y * 2.1 - iTime * 1.4),
+      sin(gridUV2.x * 2.5 + iTime * 1.7)
+    ) * (0.15 * jitterAmt);
+    gridUV2 += j2;
+  }
+  float fx2 = fract(gridUV2.x);
+  float fy2 = fract(gridUV2.y);
+  float ax2 = min(fx2, 1.0 - fx2);
+  float ay2 = min(fy2, 1.0 - fy2);
+  float wx2 = fwidth(gridUV2.x);
+  float wy2 = fwidth(gridUV2.y);
+  float tx2 = halfPx * wx2;
+  float ty2 = halfPx * wy2;
+  float aax2 = wx2;
+  float aay2 = wy2;
+  float lineX2 = 1.0 - smoothstep(tx2, tx2 + aax2, ax2);
+  float lineY2 = 1.0 - smoothstep(ty2, ty2 + aay2, ay2);
+  if (uLineStyle > 0.5) {
+    float dashRepeat2 = 4.0;
+    float dashDuty2 = 0.5;
+    float vy2m = fract(gridUV2.y * dashRepeat2);
+    float vx2m = fract(gridUV2.x * dashRepeat2);
+    float dashMaskY2 = step(vy2m, dashDuty2);
+    float dashMaskX2 = step(vx2m, dashDuty2);
+    if (uLineStyle < 1.5) {
+      lineX2 *= dashMaskY2;
+      lineY2 *= dashMaskX2;
+    } else {
+      float dotRepeat2 = 6.0;
+      float dotWidth2 = 0.18;
+      float cy2 = abs(fract(gridUV2.y * dotRepeat2) - 0.5);
+      float cx2 = abs(fract(gridUV2.x * dotRepeat2) - 0.5);
+      float dotMaskY2 = 1.0 - smoothstep(dotWidth2, dotWidth2 + fwidth(gridUV2.y * dotRepeat2), cy2);
+      float dotMaskX2 = 1.0 - smoothstep(dotWidth2, dotWidth2 + fwidth(gridUV2.x * dotRepeat2), cx2);
+      lineX2 *= dotMaskY2;
+      lineY2 *= dotMaskX2;
+    }
+  }
+  float altMask = max(lineX2, lineY2);
+  float edgeDistX = min(abs(hit.x - (-0.5)), abs(hit.x - 0.5));
+  float edgeDistY = min(abs(hit.y - (-0.2)), abs(hit.y - 0.2));
+  float edgeDist = mix(edgeDistY, edgeDistX, hitIsY);
+  float edgeGate = 1.0 - smoothstep(gridScale * 0.5, gridScale * 2.0, edgeDist);
+  altMask *= edgeGate;
+  float lineMask = max(primaryMask, altMask);
+  float fade = exp(-dist * fadeStrength);
+  float dur = max(0.05, uScanDuration);
+  float del = max(0.0, uScanDelay);
+  float scanZMax = 2.0;
+  float widthScale = max(0.1, uScanGlow);
+  float sigma = max(0.001, 0.18 * widthScale * uScanSoftness);
+  float sigmaA = sigma * 2.0;
+  float combinedPulse = 0.0;
+  float combinedAura = 0.0;
+  float cycle = dur + del;
+  float tCycle = mod(iTime, cycle);
+  float scanPhase = clamp((tCycle - del) / dur, 0.0, 1.0);
+  float phase = scanPhase;
+  if (uScanDirection > 0.5 && uScanDirection < 1.5) {
+    phase = 1.0 - phase;
+  } else if (uScanDirection > 1.5) {
+    float t2 = mod(max(0.0, iTime - del), 2.0 * dur);
+    phase = (t2 < dur) ? (t2 / dur) : (1.0 - (t2 - dur) / dur);
+  }
+  float scanZ = phase * scanZMax;
+  float dz = abs(hit.z - scanZ);
+  float lineBand = exp(-0.5 * (dz * dz) / (sigma * sigma));
+  float taper = clamp(uPhaseTaper, 0.0, 0.49);
+  float headW = taper;
+  float tailW = taper;
+  float headFade = smoother01(0.0, headW, phase);
+  float tailFade = 1.0 - smoother01(1.0 - tailW, 1.0, phase);
+  float phaseWindow = headFade * tailFade;
+  float pulseBase = lineBand * phaseWindow;
+  combinedPulse += pulseBase * clamp(uScanOpacity, 0.0, 1.0);
+  float auraBand = exp(-0.5 * (dz * dz) / (sigmaA * sigmaA));
+  combinedAura += (auraBand * 0.25) * phaseWindow * clamp(uScanOpacity, 0.0, 1.0);
+  for (int i = 0; i < MAX_SCANS; i++) {
+    if (float(i) >= uScanCount) break;
+    float tActiveI = iTime - uScanStarts[i];
+    float phaseI = clamp(tActiveI / dur, 0.0, 1.0);
+    if (uScanDirection > 0.5 && uScanDirection < 1.5) {
+      phaseI = 1.0 - phaseI;
+    } else if (uScanDirection > 1.5) {
+      phaseI = (phaseI < 0.5) ? (phaseI * 2.0) : (1.0 - (phaseI - 0.5) * 2.0);
+    }
+    float scanZI = phaseI * scanZMax;
+    float dzI = abs(hit.z - scanZI);
+    float lineBandI = exp(-0.5 * (dzI * dzI) / (sigma * sigma));
+    float headFadeI = smoother01(0.0, headW, phaseI);
+    float tailFadeI = 1.0 - smoother01(1.0 - tailW, 1.0, phaseI);
+    float phaseWindowI = headFadeI * tailFadeI;
+    combinedPulse += lineBandI * phaseWindowI * clamp(uScanOpacity, 0.0, 1.0);
+    float auraBandI = exp(-0.5 * (dzI * dzI) / (sigmaA * sigmaA));
+    combinedAura += (auraBandI * 0.25) * phaseWindowI * clamp(uScanOpacity, 0.0, 1.0);
+  }
+  float lineVis = lineMask;
+  vec3 gridCol = uLinesColor * lineVis * fade;
+  vec3 scanCol = uScanColor * combinedPulse;
+  vec3 scanAura = uScanColor * combinedAura;
+  color = gridCol + scanCol + scanAura;
+  float n = fract(sin(dot(gl_FragCoord.xy + vec2(iTime * 123.4), vec2(12.9898,78.233))) * 43758.5453123);
+  color += (n - 0.5) * uNoise;
+  color = clamp(color, 0.0, 1.0);
+  float alpha = clamp(max(lineVis, combinedPulse), 0.0, 1.0);
+  float gx = 1.0 - smoothstep(tx * 2.0, tx * 2.0 + aax * 2.0, ax);
+  float gy = 1.0 - smoothstep(ty * 2.0, ty * 2.0 + aay * 2.0, ay);
+  float halo = max(gx, gy) * fade;
+  alpha = max(alpha, halo * clamp(uBloomOpacity, 0.0, 1.0));
+  fragColor = vec4(color, alpha);
+}
+
+void main(){
+  vec4 c;
+  mainImage(c, vUv * iResolution.xy);
+  gl_FragColor = c;
+}`;
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function srgbColor(hex) {
+  return new THREE.Color(hex).convertSRGBToLinear();
+}
+
+function smoothDampVec2(current, target, currentVelocity, smoothTime, maxSpeed, deltaTime) {
+  const out = current.clone();
+  smoothTime = Math.max(0.0001, smoothTime);
+  const omega = 2 / smoothTime;
+  const x = omega * deltaTime;
+  const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);
+  let change = current.clone().sub(target);
+  const originalTo = target.clone();
+  const maxChange = maxSpeed * smoothTime;
+  if (change.length() > maxChange) change.setLength(maxChange);
+  target = current.clone().sub(change);
+  const temp = currentVelocity.clone().addScaledVector(change, omega).multiplyScalar(deltaTime);
+  currentVelocity.sub(temp.clone().multiplyScalar(omega));
+  currentVelocity.multiplyScalar(exp);
+  out.copy(target.clone().add(change.add(temp).multiplyScalar(exp)));
+  const origMinusCurrent = originalTo.clone().sub(current);
+  const outMinusOrig = out.clone().sub(originalTo);
+  if (origMinusCurrent.dot(outMinusOrig) > 0) {
+    out.copy(originalTo);
+    currentVelocity.set(0, 0);
+  }
+  return out;
+}
+
+function smoothDampFloat(current, target, velRef, smoothTime, maxSpeed, deltaTime) {
+  smoothTime = Math.max(0.0001, smoothTime);
+  const omega = 2 / smoothTime;
+  const x = omega * deltaTime;
+  const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);
+  let change = current - target;
+  const originalTo = target;
+  const maxChange = maxSpeed * smoothTime;
+  change = Math.sign(change) * Math.min(Math.abs(change), maxChange);
+  target = current - change;
+  const temp = (velRef.v + omega * change) * deltaTime;
+  velRef.v = (velRef.v - omega * temp) * exp;
+  let out = target + (change + temp) * exp;
+  if ((originalTo - current) * (out - originalTo) > 0) {
+    out = originalTo;
+    velRef.v = 0;
+  }
+  return { value: out, v: velRef.v };
+}
+
+function medianPush(buf, v, maxLen) {
+  buf.push(v);
+  if (buf.length > maxLen) buf.shift();
+}
+
+function median(buf) {
+  if (buf.length === 0) return 0;
+  const a = [...buf].sort((x, y) => x - y);
+  const mid = Math.floor(a.length / 2);
+  return a.length % 2 ? a[mid] : (a[mid - 1] + a[mid]) * 0.5;
+}
+
+function centroid(points) {
+  let x = 0, y = 0;
+  const n = points.length || 1;
+  for (const p of points) { x += p.x; y += p.y; }
+  return { x: x / n, y: y / n };
+}
+
+function dist2(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+const MAX_SCANS = 8;
+
+export const GridScan = ({
+  enableWebcam = false,
+  showPreview = false,
+  modelsPath = 'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@0.22.2/weights',
+  sensitivity = 0.55,
+  lineThickness = 1,
+  linesColor = '#2F293A',
+  scanColor = '#FF9FFC',
+  scanOpacity = 0.4,
+  gridScale = 0.1,
+  lineStyle = 'solid',
+  lineJitter = 0.1,
+  scanDirection = 'pingpong',
+  enablePost = true,
+  bloomIntensity = 0,
+  bloomThreshold = 0,
+  bloomSmoothing = 0,
+  chromaticAberration = 0.002,
+  noiseIntensity = 0.01,
+  scanGlow = 0.5,
+  scanSoftness = 2,
+  scanPhaseTaper = 0.9,
+  scanDuration = 2.0,
+  scanDelay = 2.0,
+  enableGyro = false,
+  scanOnClick = false,
+  snapBackDelay = 250,
+  className,
+  style,
+}) => {
+  const containerRef = useRef(null);
+  const videoRef = useRef(null);
+  const rendererRef = useRef(null);
+  const materialRef = useRef(null);
+  const composerRef = useRef(null);
+  const bloomRef = useRef(null);
+  const chromaRef = useRef(null);
+  const rafRef = useRef(null);
+  const [modelsReady, setModelsReady] = useState(false);
+  const [uiFaceActive, setUiFaceActive] = useState(false);
+
+  const lookTarget = useRef(new THREE.Vector2(0, 0));
+  const tiltTarget = useRef(0);
+  const yawTarget = useRef(0);
+  const lookCurrent = useRef(new THREE.Vector2(0, 0));
+  const lookVel = useRef(new THREE.Vector2(0, 0));
+  const tiltCurrent = useRef(0);
+  const tiltVel = useRef(0);
+  const yawCurrent = useRef(0);
+  const yawVel = useRef(0);
+
+  const scanStartsRef = useRef([]);
+
+  const pushScan = (t) => {
+    const arr = scanStartsRef.current.slice();
+    if (arr.length >= MAX_SCANS) arr.shift();
+    arr.push(t);
+    scanStartsRef.current = arr;
+    if (materialRef.current) {
+      const u = materialRef.current.uniforms;
+      const buf = new Array(MAX_SCANS).fill(0);
+      for (let i = 0; i < arr.length && i < MAX_SCANS; i++) buf[i] = arr[i];
+      u.uScanStarts.value = buf;
+      u.uScanCount.value = arr.length;
+    }
+  };
+
+  const bufX = useRef([]);
+  const bufY = useRef([]);
+  const bufT = useRef([]);
+  const bufYaw = useRef([]);
+
+  const s = THREE.MathUtils.clamp(sensitivity, 0, 1);
+  const skewScale = THREE.MathUtils.lerp(0.06, 0.2, s);
+  const tiltScale = THREE.MathUtils.lerp(0.12, 0.3, s);
+  const yawScale = THREE.MathUtils.lerp(0.1, 0.28, s);
+  const depthResponse = THREE.MathUtils.lerp(0.25, 0.45, s);
+  const smoothTime = THREE.MathUtils.lerp(0.45, 0.12, s);
+  const maxSpeed = Infinity;
+  const yBoost = THREE.MathUtils.lerp(1.2, 1.6, s);
+
+  // Mouse interaction
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let leaveTimer = null;
+
+    const onMove = (e) => {
+      if (uiFaceActive) return;
+      if (leaveTimer) { clearTimeout(leaveTimer); leaveTimer = null; }
+      const rect = el.getBoundingClientRect();
+      const nx = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+      const ny = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
+      lookTarget.current.set(nx, ny);
+    };
+
+    const onClick = async () => {
+      const nowSec = performance.now() / 1000;
+      if (scanOnClick) pushScan(nowSec);
+      if (enableGyro && typeof window !== 'undefined' && window.DeviceOrientationEvent && DeviceOrientationEvent.requestPermission) {
+        try { await DeviceOrientationEvent.requestPermission(); } catch { /* noop */ }
+      }
+    };
+
+    const onLeave = () => {
+      if (uiFaceActive) return;
+      if (leaveTimer) clearTimeout(leaveTimer);
+      leaveTimer = window.setTimeout(() => {
+        lookTarget.current.set(0, 0);
+        tiltTarget.current = 0;
+        yawTarget.current = 0;
+      }, Math.max(0, snapBackDelay || 0));
+    };
+
+    el.addEventListener('mousemove', onMove);
+    el.addEventListener('mouseenter', () => { if (leaveTimer) { clearTimeout(leaveTimer); leaveTimer = null; } });
+    if (scanOnClick) el.addEventListener('click', onClick);
+    el.addEventListener('mouseleave', onLeave);
+
+    return () => {
+      el.removeEventListener('mousemove', onMove);
+      el.removeEventListener('mouseleave', onLeave);
+      if (scanOnClick) el.removeEventListener('click', onClick);
+      if (leaveTimer) clearTimeout(leaveTimer);
+    };
+  }, [uiFaceActive, snapBackDelay, scanOnClick, enableGyro]);
+
+  // Three.js renderer setup
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    rendererRef.current = renderer;
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.toneMapping = THREE.NoToneMapping;
+    renderer.autoClear = false;
+    renderer.setClearColor(0x000000, 0);
+    container.appendChild(renderer.domElement);
+
+    const uniforms = {
+      iResolution: { value: new THREE.Vector3(container.clientWidth, container.clientHeight, renderer.getPixelRatio()) },
+      iTime: { value: 0 },
+      uSkew: { value: new THREE.Vector2(0, 0) },
+      uTilt: { value: 0 },
+      uYaw: { value: 0 },
+      uLineThickness: { value: lineThickness },
+      uLinesColor: { value: srgbColor(linesColor) },
+      uScanColor: { value: srgbColor(scanColor) },
+      uGridScale: { value: gridScale },
+      uLineStyle: { value: lineStyle === 'dashed' ? 1 : lineStyle === 'dotted' ? 2 : 0 },
+      uLineJitter: { value: Math.max(0, Math.min(1, lineJitter || 0)) },
+      uScanOpacity: { value: scanOpacity },
+      uNoise: { value: noiseIntensity },
+      uBloomOpacity: { value: bloomIntensity },
+      uScanGlow: { value: scanGlow },
+      uScanSoftness: { value: scanSoftness },
+      uPhaseTaper: { value: scanPhaseTaper },
+      uScanDuration: { value: scanDuration },
+      uScanDelay: { value: scanDelay },
+      uScanDirection: { value: scanDirection === 'backward' ? 1 : scanDirection === 'pingpong' ? 2 : 0 },
+      uScanStarts: { value: new Array(MAX_SCANS).fill(0) },
+      uScanCount: { value: 0 },
+    };
+
+    const material = new THREE.ShaderMaterial({
+      uniforms,
+      vertexShader: vert,
+      fragmentShader: frag,
+      transparent: true,
+      depthWrite: false,
+      depthTest: false,
+    });
+    materialRef.current = material;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
+    scene.add(quad);
+
+    let composer = null;
+    if (enablePost) {
+      composer = new EffectComposer(renderer);
+      composerRef.current = composer;
+      composer.addPass(new RenderPass(scene, camera));
+      const bloom = new BloomEffect({ intensity: 1.0, luminanceThreshold: bloomThreshold, luminanceSmoothing: bloomSmoothing });
+      bloom.blendMode.opacity.value = Math.max(0, bloomIntensity);
+      bloomRef.current = bloom;
+      const chroma = new ChromaticAberrationEffect({
+        offset: new THREE.Vector2(chromaticAberration, chromaticAberration),
+        radialModulation: true,
+        modulationOffset: 0.0,
+      });
+      chromaRef.current = chroma;
+      const effectPass = new EffectPass(camera, bloom, chroma);
+      effectPass.renderToScreen = true;
+      composer.addPass(effectPass);
+    }
+
+    const onResize = () => {
+      renderer.setSize(container.clientWidth, container.clientHeight);
+      material.uniforms.iResolution.value.set(container.clientWidth, container.clientHeight, renderer.getPixelRatio());
+      if (composerRef.current) composerRef.current.setSize(container.clientWidth, container.clientHeight);
+    };
+    window.addEventListener('resize', onResize);
+
+    let last = performance.now();
+    const tick = () => {
+      const now = performance.now();
+      const dt = Math.max(0, Math.min(0.1, (now - last) / 1000));
+      last = now;
+
+      lookCurrent.current.copy(
+        smoothDampVec2(lookCurrent.current, lookTarget.current, lookVel.current, smoothTime, maxSpeed, dt)
+      );
+      const tiltSm = smoothDampFloat(tiltCurrent.current, tiltTarget.current, { v: tiltVel.current }, smoothTime, maxSpeed, dt);
+      tiltCurrent.current = tiltSm.value; tiltVel.current = tiltSm.v;
+      const yawSm = smoothDampFloat(yawCurrent.current, yawTarget.current, { v: yawVel.current }, smoothTime, maxSpeed, dt);
+      yawCurrent.current = yawSm.value; yawVel.current = yawSm.v;
+
+      const skew = new THREE.Vector2(lookCurrent.current.x * skewScale, -lookCurrent.current.y * yBoost * skewScale);
+      material.uniforms.uSkew.value.set(skew.x, skew.y);
+      material.uniforms.uTilt.value = tiltCurrent.current * tiltScale;
+      material.uniforms.uYaw.value = THREE.MathUtils.clamp(yawCurrent.current * yawScale, -0.6, 0.6);
+      material.uniforms.iTime.value = now / 1000;
+
+      renderer.clear(true, true, true);
+      if (composerRef.current) composerRef.current.render(dt);
+      else renderer.render(scene, camera);
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      window.removeEventListener('resize', onResize);
+      material.dispose();
+      quad.geometry.dispose();
+      if (composerRef.current) { composerRef.current.dispose(); composerRef.current = null; }
+      renderer.dispose();
+      renderer.forceContextLoss();
+      if (container.contains(renderer.domElement)) container.removeChild(renderer.domElement);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sensitivity, lineThickness, linesColor, scanColor, scanOpacity, gridScale, lineStyle, lineJitter,
+      scanDirection, enablePost, noiseIntensity, bloomIntensity, scanGlow, scanSoftness, scanPhaseTaper,
+      scanDuration, scanDelay, bloomThreshold, bloomSmoothing, chromaticAberration]);
+
+  // Prop updates without full remount
+  useEffect(() => {
+    const m = materialRef.current;
+    if (!m) return;
+    const u = m.uniforms;
+    u.uLineThickness.value = lineThickness;
+    u.uLinesColor.value.copy(srgbColor(linesColor));
+    u.uScanColor.value.copy(srgbColor(scanColor));
+    u.uGridScale.value = gridScale;
+    u.uLineStyle.value = lineStyle === 'dashed' ? 1 : lineStyle === 'dotted' ? 2 : 0;
+    u.uLineJitter.value = Math.max(0, Math.min(1, lineJitter || 0));
+    u.uBloomOpacity.value = Math.max(0, bloomIntensity);
+    u.uNoise.value = Math.max(0, noiseIntensity);
+    u.uScanGlow.value = scanGlow;
+    u.uScanOpacity.value = Math.max(0, Math.min(1, scanOpacity));
+    u.uScanDirection.value = scanDirection === 'backward' ? 1 : scanDirection === 'pingpong' ? 2 : 0;
+    u.uScanSoftness.value = scanSoftness;
+    u.uPhaseTaper.value = scanPhaseTaper;
+    u.uScanDuration.value = Math.max(0.05, scanDuration);
+    u.uScanDelay.value = Math.max(0.0, scanDelay);
+    if (bloomRef.current) {
+      bloomRef.current.blendMode.opacity.value = Math.max(0, bloomIntensity);
+      bloomRef.current.luminanceMaterial.threshold = bloomThreshold;
+      bloomRef.current.luminanceMaterial.smoothing = bloomSmoothing;
+    }
+    if (chromaRef.current) chromaRef.current.offset.set(chromaticAberration, chromaticAberration);
+  }, [lineThickness, linesColor, scanColor, gridScale, lineStyle, lineJitter, bloomIntensity,
+      bloomThreshold, bloomSmoothing, chromaticAberration, noiseIntensity, scanGlow, scanOpacity,
+      scanDirection, scanSoftness, scanPhaseTaper, scanDuration, scanDelay]);
+
+  // Gyro
+  useEffect(() => {
+    if (!enableGyro) return;
+    const handler = (e) => {
+      if (uiFaceActive) return;
+      const gamma = e.gamma ?? 0;
+      const beta = e.beta ?? 0;
+      lookTarget.current.set(THREE.MathUtils.clamp(gamma / 45, -1, 1), THREE.MathUtils.clamp(-beta / 30, -1, 1));
+      tiltTarget.current = THREE.MathUtils.degToRad(gamma) * 0.4;
+    };
+    window.addEventListener('deviceorientation', handler);
+    return () => window.removeEventListener('deviceorientation', handler);
+  }, [enableGyro, uiFaceActive]);
+
+  // Face-api models
+  useEffect(() => {
+    let canceled = false;
+    const load = async () => {
+      try {
+        await Promise.all([
+          faceapi.nets.tinyFaceDetector.loadFromUri(modelsPath),
+          faceapi.nets.faceLandmark68TinyNet.loadFromUri(modelsPath),
+        ]);
+        if (!canceled) setModelsReady(true);
+      } catch { if (!canceled) setModelsReady(false); }
+    };
+    load();
+    return () => { canceled = true; };
+  }, [modelsPath]);
+
+  // Webcam face tracking
+  useEffect(() => {
+    let stop = false;
+    let lastDetect = 0;
+    const video = videoRef.current;
+
+    const start = async () => {
+      if (!enableWebcam || !modelsReady || !video) return;
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false });
+        video.srcObject = stream;
+        await video.play();
+      } catch { return; }
+
+      const opts = new faceapi.TinyFaceDetectorOptions({ inputSize: 320, scoreThreshold: 0.5 });
+      const detect = async (ts) => {
+        if (stop) return;
+        if (ts - lastDetect >= 33) {
+          lastDetect = ts;
+          try {
+            const res = await faceapi.detectSingleFace(video, opts).withFaceLandmarks(true);
+            if (res?.detection) {
+              const { box } = res.detection;
+              const vw = video.videoWidth || 1, vh = video.videoHeight || 1;
+              const nx = (box.x + box.width * 0.5) / vw * 2 - 1;
+              const ny = (box.y + box.height * 0.5) / vh * 2 - 1;
+              medianPush(bufX.current, nx, 5); medianPush(bufY.current, ny, 5);
+              const look = new THREE.Vector2(Math.tanh(median(bufX.current)), Math.tanh(median(bufY.current)));
+              const faceSize = Math.min(1, Math.hypot(box.width / vw, box.height / vh));
+              lookTarget.current.copy(look.multiplyScalar(1 + depthResponse * (faceSize - 0.25)));
+              const lc = centroid(res.landmarks.getLeftEye());
+              const rc = centroid(res.landmarks.getRightEye());
+              medianPush(bufT.current, Math.atan2(rc.y - lc.y, rc.x - lc.x), 5);
+              tiltTarget.current = median(bufT.current);
+              const nose = res.landmarks.getNose();
+              const tip = nose[nose.length - 1] || nose[Math.floor(nose.length / 2)];
+              const jaw = res.landmarks.getJawOutline();
+              const eyeDist = Math.hypot(rc.x - lc.x, rc.y - lc.y) + 1e-6;
+              const yawSignal = Math.tanh(THREE.MathUtils.clamp((dist2(tip, jaw[13] || jaw[14]) - dist2(tip, jaw[3] || jaw[2])) / (eyeDist * 1.6), -1, 1));
+              medianPush(bufYaw.current, yawSignal, 5);
+              yawTarget.current = median(bufYaw.current);
+              setUiFaceActive(true);
+            } else { setUiFaceActive(false); }
+          } catch { setUiFaceActive(false); }
+        }
+        if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
+          video.requestVideoFrameCallback(() => detect(performance.now()));
+        } else { requestAnimationFrame(detect); }
+      };
+      requestAnimationFrame(detect);
+    };
+
+    start();
+    return () => {
+      stop = true;
+      if (video) {
+        const stream = video.srcObject;
+        if (stream) stream.getTracks().forEach(t => t.stop());
+        video.pause();
+        video.srcObject = null;
+      }
+    };
+  }, [enableWebcam, modelsReady, depthResponse]);
+
+  return (
+    <div ref={containerRef} className={`gridscan${className ? ` ${className}` : ''}`} style={style}>
+      {showPreview && (
+        <div className="gridscan__preview">
+          <video ref={videoRef} muted playsInline autoPlay className="gridscan__video" />
+          <div className="gridscan__badge">
+            {enableWebcam
+              ? modelsReady
+                ? uiFaceActive ? 'Face: tracking' : 'Face: searching'
+                : 'Loading models'
+              : 'Webcam disabled'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GridScan;

frontend-react/src/components/HeroSection.tsx

@@ -0,0 +1,221 @@
+import GridScan from './GridScan';
+import AnalyzeButton from './AnalyzeButton';
+
+interface HeroSectionProps {
+  onAnalyze: () => void;
+}
+
+export default function HeroSection({ onAnalyze }: HeroSectionProps) {
+  return (
+    <section className="relative w-full min-h-screen overflow-hidden">
+
+      {/* GridScan — true full-viewport background */}
+      <div className="absolute inset-0 z-0">
+        <GridScan
+          sensitivity={0.5}
+          lineThickness={1}
+          linesColor="#2a1a3e"
+          gridScale={0.1}
+          scanColor="#a855f7"
+          scanOpacity={0.45}
+          enablePost={true}
+          bloomIntensity={0.7}
+          bloomThreshold={0.1}
+          bloomSmoothing={0.2}
+          chromaticAberration={0.003}
+          noiseIntensity={0.012}
+          scanDirection="pingpong"
+          scanDuration={2.5}
+          scanDelay={1.2}
+          scanGlow={0.7}
+          scanSoftness={2.5}
+          scanPhaseTaper={0.85}
+        />
+      </div>
+
+      {/* Dark purple gradient overlay */}
+      <div
+        className="absolute inset-0 z-[1] pointer-events-none"
+        style={{
+          background:
+            'radial-gradient(ellipse 80% 60% at 50% 40%, rgba(88,28,135,0.18) 0%, rgba(10,5,20,0.55) 70%, rgba(5,2,12,0.85) 100%)',
+        }}
+      />
+
+      {/* ── Two-column layout: left content / right orb ── */}
+      <div className="relative z-10 flex items-center min-h-screen pt-16 px-4 md:px-8 max-w-7xl mx-auto w-full">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center w-full min-h-[calc(100vh-4rem)]">
+
+          {/* ── LEFT: text + buttons + stats ── */}
+          <div className="flex flex-col items-start space-y-6 -ml-2 md:-ml-6 lg:-ml-10">
+
+            {/* Status badge */}
+            <div
+              className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full backdrop-blur-md"
+              style={{
+                background: 'rgba(88,28,135,0.3)',
+                border: '1px solid rgba(168,85,247,0.25)',
+              }}
+            >
+              <span
+                className="w-2 h-2 rounded-full animate-pulse"
+                style={{ background: '#a855f7', boxShadow: '0 0 8px #a855f7' }}
+              />
+              <span className="font-bold text-[10px] text-purple-300/80 uppercase tracking-[0.18em]">
+                AI-Powered Authenticity Engine
+              </span>
+            </div>
+
+            {/* Headline */}
+            <h1
+              className="text-5xl md:text-6xl lg:text-7xl font-black leading-[1.05] tracking-tight"
+              style={{ textShadow: '0 0 60px rgba(168,85,247,0.2)' }}
+            >
+              <span className="text-white">Verify Reality</span>
+              <br />
+              <span className="text-white">in </span>
+              <span
+                className="text-transparent bg-clip-text"
+                style={{
+                  backgroundImage:
+                    'linear-gradient(135deg, #c084fc 0%, #a855f7 40%, #7c3aed 70%, #4f46e5 100%)',
+                }}
+              >
+                Real-Time
+              </span>
+            </h1>
+
+            {/* Subtext */}
+            <p className="text-base text-purple-200/55 max-w-lg leading-relaxed">
+              Deploy advanced neural networks to detect deepfakes, synthetic media, and manipulated
+              data streams with military-grade precision. Establish an unbreakable perimeter of truth.
+            </p>
+
+            {/* CTAs */}
+            <div className="flex flex-wrap items-center gap-4 pt-2">
+              <AnalyzeButton onClick={onAnalyze} />
+
+
+            </div>
+
+            {/* Stats */}
+            <div
+              className="flex items-center gap-8 pt-6 mt-4 border-t w-full max-w-sm"
+              style={{ borderColor: 'rgba(168,85,247,0.15)' }}
+            >
+              <div>
+                <div
+                  className="text-xl font-black tracking-tight"
+                  style={{ color: '#c084fc', textShadow: '0 0 16px rgba(168,85,247,0.5)' }}
+                >
+                  99.9%
+                </div>
+                <div className="font-bold text-[10px] text-purple-400/50 mt-1 uppercase tracking-widest">
+                  Accuracy Rate
+                </div>
+              </div>
+              <div className="w-px h-8" style={{ background: 'rgba(168,85,247,0.2)' }} />
+              <div>
+                <div
+                  className="text-xl font-black tracking-tight"
+                  style={{ color: '#a78bfa', textShadow: '0 0 16px rgba(139,92,246,0.5)' }}
+                >
+                  &lt;15ms
+                </div>
+                <div className="font-bold text-[10px] text-purple-400/50 mt-1 uppercase tracking-widest">
+                  Latency Ping
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* ── RIGHT: Orb visualizer ── */}
+          <div className="relative w-full aspect-square max-w-lg mx-auto flex items-center justify-center lg:justify-end">
+
+            {/* Outer ambient glow */}
+            <div
+              className="absolute inset-0 rounded-full blur-[60px]"
+              style={{ background: 'rgba(124,58,237,0.12)' }}
+            />
+
+            {/* Orb shell */}
+            <div
+              className="relative w-4/5 h-4/5 rounded-full flex items-center justify-center"
+              style={{
+                background: 'radial-gradient(circle at 40% 35%, rgba(124,58,237,0.15) 0%, rgba(8,4,18,0.7) 100%)',
+                border: '1px solid rgba(168,85,247,0.15)',
+                boxShadow: 'inset 0 0 40px rgba(0,0,0,0.7), 0 0 60px rgba(124,58,237,0.15)',
+              }}
+            >
+              {/* Spinning rings */}
+              <div
+                className="absolute w-[115%] h-[115%] rounded-full animate-spin-slow"
+                style={{ border: '1px solid rgba(168,85,247,0.1)' }}
+              />
+              <div
+                className="absolute w-full h-full rounded-full animate-spin-slow-reverse"
+                style={{ border: '1px dashed rgba(139,92,246,0.15)' }}
+              />
+              <div
+                className="absolute w-4/5 h-4/5 rounded-full"
+                style={{ border: '1px solid rgba(168,85,247,0.06)' }}
+              />
+
+              {/* Core */}
+              <div
+                className="relative w-3/5 h-3/5 rounded-full flex items-center justify-center overflow-hidden"
+                style={{
+                  background: 'radial-gradient(circle, rgba(124,58,237,0.3) 0%, rgba(8,4,18,0.9) 100%)',
+                  border: '1px solid rgba(168,85,247,0.25)',
+                  boxShadow: '0 0 40px rgba(124,58,237,0.2)',
+                }}
+              >
+                <span
+                  className="material-symbols-outlined"
+                  style={{
+                    fontSize: 100,
+                    color: '#c084fc',
+                    opacity: 0.45,
+                    fontVariationSettings: "'FILL' 1",
+                    filter: 'drop-shadow(0 0 20px rgba(168,85,247,0.9))',
+                  }}
+                >
+                  radar
+                </span>
+                {/* Spinning accent border */}
+                <div
+                  className="absolute inset-0 rounded-full border-t-2 blur-[2px] animate-spin-fast"
+                  style={{ borderColor: 'rgba(168,85,247,0.6)' }}
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-[#050210]/60 via-transparent to-transparent" />
+              </div>
+            </div>
+
+            {/* Floating HUD chips */}
+            <div
+              className="absolute top-8 -left-2 px-3 py-1 font-mono text-[10px] backdrop-blur-md rounded-sm"
+              style={{
+                background: 'rgba(8,4,18,0.75)',
+                border: '1px solid rgba(168,85,247,0.3)',
+                color: '#c084fc',
+              }}
+            >
+              SYS.OPT.OK
+            </div>
+            <div
+              className="absolute bottom-16 -right-2 px-3 py-1 font-mono text-[10px] backdrop-blur-md rounded-sm flex items-center gap-1"
+              style={{
+                background: 'rgba(8,4,18,0.75)',
+                border: '1px solid rgba(139,92,246,0.3)',
+                color: '#a78bfa',
+              }}
+            >
+              <span className="material-symbols-outlined text-[11px]">sync</span> LIVE
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

frontend-react/src/components/InitiateButton.tsx

@@ -0,0 +1,306 @@
+import styled from 'styled-components';
+
+interface InitiateButtonProps {
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const StyledWrapper = styled.div`
+  .btn-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .btn {
+    --border-radius: 24px;
+    --padding: 4px;
+    --transition: 0.4s;
+    --button-color: #0d0720;
+    --highlight-color-hue: 270deg;
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 0.65em 1.4em 0.65em 1.1em;
+    font-family: 'Space Grotesk', 'Poppins', 'Inter', sans-serif;
+    font-size: 1em;
+    font-weight: 600;
+    background-color: var(--button-color);
+    box-shadow:
+      inset 0px 1px 1px rgba(168, 85, 247, 0.2),
+      inset 0px 2px 2px rgba(168, 85, 247, 0.15),
+      inset 0px 4px 4px rgba(168, 85, 247, 0.1),
+      inset 0px 8px 8px rgba(168, 85, 247, 0.05),
+      inset 0px 16px 16px rgba(168, 85, 247, 0.05),
+      0px -1px 1px rgba(0, 0, 0, 0.02),
+      0px -2px 2px rgba(0, 0, 0, 0.03),
+      0px -4px 4px rgba(0, 0, 0, 0.05),
+      0px -8px 8px rgba(0, 0, 0, 0.06),
+      0px -16px 16px rgba(0, 0, 0, 0.08);
+    border: solid 1px rgba(168, 85, 247, 0.2);
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition:
+      box-shadow var(--transition),
+      border var(--transition),
+      background-color var(--transition),
+      opacity var(--transition);
+  }
+
+  .btn.disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .btn::before {
+    content: '';
+    position: absolute;
+    top: calc(0px - var(--padding));
+    left: calc(0px - var(--padding));
+    width: calc(100% + var(--padding) * 2);
+    height: calc(100% + var(--padding) * 2);
+    border-radius: calc(var(--border-radius) + var(--padding));
+    pointer-events: none;
+    background-image: linear-gradient(0deg, #0004, #000a);
+    z-index: -1;
+    transition: box-shadow var(--transition), filter var(--transition);
+    box-shadow:
+      0 -8px 8px -6px #0000 inset,
+      0 -16px 16px -8px #00000000 inset,
+      1px 1px 1px rgba(168, 85, 247, 0.15),
+      2px 2px 2px rgba(168, 85, 247, 0.08),
+      -1px -1px 1px #0002,
+      -2px -2px 2px #0001;
+  }
+
+  .btn::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    pointer-events: none;
+    background-image: linear-gradient(
+      0deg,
+      #fff,
+      hsl(var(--highlight-color-hue), 100%, 70%),
+      hsla(var(--highlight-color-hue), 100%, 70%, 50%),
+      8%,
+      transparent
+    );
+    background-position: 0 0;
+    opacity: 0;
+    transition: opacity var(--transition), filter var(--transition);
+  }
+
+  .btn-letter {
+    position: relative;
+    display: inline-block;
+    color: rgba(192, 132, 252, 0.6);
+    animation: letter-anim 2s ease-in-out infinite;
+    transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
+  }
+
+  @keyframes letter-anim {
+    50% {
+      text-shadow: 0 0 6px rgba(192, 132, 252, 0.9);
+      color: #e9d5ff;
+    }
+  }
+
+  .btn-svg {
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: 22px;
+    margin-right: 0.55rem;
+    fill: none;
+    stroke: #c084fc;
+    stroke-width: 1.5;
+    animation: flicker 2s linear infinite;
+    animation-delay: 0.5s;
+    filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.8));
+    transition: stroke var(--transition), filter var(--transition), opacity var(--transition);
+  }
+
+  @keyframes flicker {
+    50% { opacity: 0.4; }
+  }
+
+  .txt-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 10em;
+    height: 1.4em;
+  }
+
+  .txt-1,
+  .txt-2 {
+    position: absolute;
+    word-spacing: -1em;
+    white-space: nowrap;
+  }
+
+  .txt-1 { animation: appear-anim 1s ease-in-out forwards; }
+  .txt-2 { opacity: 0; }
+
+  @keyframes appear-anim {
+    0%   { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  .btn:focus .txt-1 {
+    animation: opacity-anim 0.3s ease-in-out forwards;
+    animation-delay: 1s;
+  }
+  .btn:focus .txt-2 {
+    animation: opacity-anim 0.3s ease-in-out reverse forwards;
+    animation-delay: 1s;
+  }
+
+  @keyframes opacity-anim {
+    0%   { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  .btn:focus .btn-letter {
+    animation:
+      focused-letter-anim 1s ease-in-out forwards,
+      letter-anim 1.2s ease-in-out infinite;
+    animation-delay: 0s, 1s;
+  }
+
+  @keyframes focused-letter-anim {
+    0%, 100% { filter: blur(0px); }
+    50% {
+      transform: scale(2);
+      filter: blur(10px) brightness(150%)
+        drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%));
+    }
+  }
+
+  .btn:focus .btn-svg {
+    animation-duration: 1.2s;
+    animation-delay: 0.2s;
+  }
+
+  .btn:focus::before {
+    box-shadow:
+      0 -8px 12px -6px rgba(168, 85, 247, 0.4) inset,
+      0 -16px 16px -8px hsla(270deg, 100%, 70%, 0.2) inset,
+      1px 1px 1px rgba(168, 85, 247, 0.3),
+      2px 2px 2px rgba(168, 85, 247, 0.1),
+      -1px -1px 1px #0002,
+      -2px -2px 2px #0001;
+  }
+
+  .btn:focus::after {
+    opacity: 0.5;
+    mask-image: linear-gradient(0deg, #fff, transparent);
+    filter: brightness(100%);
+  }
+
+  /* Animation delays */
+  .btn-letter:nth-child(1)  { animation-delay: 0s; }
+  .btn-letter:nth-child(2)  { animation-delay: 0.08s; }
+  .btn-letter:nth-child(3)  { animation-delay: 0.16s; }
+  .btn-letter:nth-child(4)  { animation-delay: 0.24s; }
+  .btn-letter:nth-child(5)  { animation-delay: 0.32s; }
+  .btn-letter:nth-child(6)  { animation-delay: 0.40s; }
+  .btn-letter:nth-child(7)  { animation-delay: 0.48s; }
+  .btn-letter:nth-child(8)  { animation-delay: 0.56s; }
+  .btn-letter:nth-child(9)  { animation-delay: 0.64s; }
+  .btn-letter:nth-child(10) { animation-delay: 0.72s; }
+  .btn-letter:nth-child(11) { animation-delay: 0.80s; }
+  .btn-letter:nth-child(12) { animation-delay: 0.88s; }
+  .btn-letter:nth-child(13) { animation-delay: 0.96s; }
+  .btn-letter:nth-child(14) { animation-delay: 1.04s; }
+  .btn-letter:nth-child(15) { animation-delay: 1.12s; }
+  .btn-letter:nth-child(16) { animation-delay: 1.20s; }
+
+  /* Active */
+  .btn:active {
+    border: solid 1px hsla(270deg, 100%, 80%, 0.7);
+    background-color: hsla(270deg, 50%, 20%, 0.5);
+  }
+  .btn:active::before {
+    box-shadow:
+      0 -8px 12px -6px rgba(192, 132, 252, 0.9) inset,
+      0 -16px 16px -8px hsla(270deg, 100%, 70%, 0.8) inset,
+      1px 1px 1px rgba(255,255,255,0.25),
+      2px 2px 2px rgba(255,255,255,0.1),
+      -1px -1px 1px #0002,
+      -2px -2px 2px #0001;
+  }
+  .btn:active::after {
+    opacity: 1;
+    mask-image: linear-gradient(0deg, #fff, transparent);
+    filter: brightness(200%);
+  }
+  .btn:active .btn-letter {
+    text-shadow: 0 0 1px hsla(270deg, 100%, 90%, 0.9);
+    animation: none;
+  }
+
+  /* Hover */
+  .btn:hover {
+    border: solid 1px hsla(270deg, 100%, 80%, 0.4);
+  }
+  .btn:hover::before {
+    box-shadow:
+      0 -8px 8px -6px rgba(192, 132, 252, 0.7) inset,
+      0 -16px 16px -8px hsla(270deg, 100%, 70%, 0.3) inset,
+      1px 1px 1px rgba(168, 85, 247, 0.2),
+      2px 2px 2px rgba(168, 85, 247, 0.1),
+      -1px -1px 1px #0002,
+      -2px -2px 2px #0001;
+  }
+  .btn:hover::after {
+    opacity: 0.8;
+    mask-image: linear-gradient(0deg, #fff, transparent);
+  }
+  .btn:hover .btn-svg {
+    stroke: #e9d5ff;
+    filter: drop-shadow(0 0 5px hsl(270deg, 100%, 70%)) drop-shadow(0 -4px 6px #0009);
+    animation: none;
+  }
+`;
+
+const LABEL_1 = 'Initiate Analysis';
+const LABEL_2 = 'Analyzing...';
+
+function Letters({ text }: { text: string }) {
+  return (
+    <>
+      {text.split('').map((ch, i) => (
+        <span key={i} className="btn-letter">{ch === ' ' ? '\u00A0' : ch}</span>
+      ))}
+    </>
+  );
+}
+
+export default function InitiateButton({ onClick, disabled = false }: InitiateButtonProps) {
+  return (
+    <StyledWrapper>
+      <div className="btn-wrapper">
+        <button className={`btn${disabled ? ' disabled' : ''}`} onClick={!disabled ? onClick : undefined}>
+          {/* Sparkle star icon */}
+          <svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round"
+              d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
+          </svg>
+
+          <div className="txt-wrapper">
+            <div className="txt-1"><Letters text={LABEL_1} /></div>
+            <div className="txt-2"><Letters text={LABEL_2} /></div>
+          </div>
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+}

frontend-react/src/components/Modal.tsx

@@ -0,0 +1,37 @@
+interface ModalProps {
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export default function Modal({ title, onClose, children }: ModalProps) {
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div
+        className="relative z-10 w-full max-w-2xl rounded-xl p-8"
+        style={{
+          background: 'rgba(13,7,32,0.95)',
+          border: '1px solid rgba(168,85,247,0.25)',
+          boxShadow: '0 0 60px rgba(88,28,135,0.3)',
+          backdropFilter: 'blur(20px)',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-semibold uppercase tracking-widest" style={{ color: '#c084fc' }}>{title}</h2>
+          <button
+            onClick={onClose}
+            className="p-1 rounded transition-all text-purple-400/40 hover:text-purple-300 hover:bg-purple-500/10"
+          >
+            <span className="material-symbols-outlined">close</span>
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

frontend-react/src/components/Navbar.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+
+interface NavbarProps {
+  onDashboard: () => void;
+  onGetStarted: () => void;
+  onOpenModal: (modal: string) => void;
+}
+
+export default function Navbar({ onDashboard, onGetStarted, onOpenModal }: NavbarProps) {
+  const [health, setHealth] = useState<'checking' | 'online' | 'offline'>('checking');
+
+  useEffect(() => {
+    fetch('/health')
+      .then(r => r.ok ? setHealth('online') : setHealth('offline'))
+      .catch(() => setHealth('offline'));
+  }, []);
+
+  const dotColor = health === 'online' ? '#a855f7' : health === 'offline' ? '#f43f5e' : '#6b7280';
+  const dotGlow  = health === 'online' ? '0 0 8px #a855f7' : health === 'offline' ? '0 0 8px #f43f5e' : 'none';
+
+  return (
+    <nav
+      className="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6 h-16
+        backdrop-blur-xl font-['Space_Grotesk'] tracking-wider uppercase text-xs"
+      style={{
+        background: 'rgba(8,4,18,0.7)',
+        borderBottom: '1px solid rgba(168,85,247,0.15)',
+        boxShadow: '0 4px 30px rgba(0,0,0,0.6)',
+      }}
+    >
+      {/* Brand */}
+      <div className="flex items-center gap-8">
+        <span
+          onClick={onDashboard}
+          className="text-2xl font-black tracking-tighter cursor-pointer"
+          style={{
+            background: 'linear-gradient(135deg, #c084fc, #818cf8)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            filter: 'drop-shadow(0 0 8px rgba(168,85,247,0.5))',
+          }}
+        >
+          AUTHRIX AI
+        </span>
+        <div className="hidden md:flex items-center gap-1">
+          {[
+            { label: 'Dashboard', action: onDashboard },
+            { label: 'Pricing',   action: () => window.open('/pricing', '_blank') },
+            { label: 'Agents',    action: () => onOpenModal('agents') },
+            { label: 'Logs',      action: () => onOpenModal('logs') },
+            { label: 'Network',   action: () => onOpenModal('network') },
+          ].map(({ label, action }) => (
+            <button
+              key={label}
+              onClick={action}
+              className="py-1 px-3 rounded-sm transition-all duration-200 text-purple-400/50 hover:text-purple-300 hover:bg-purple-500/10"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-3">
+        {/* Health badge */}
+        <div
+          className="flex items-center gap-2 px-3 py-1 rounded-sm"
+          style={{
+            background: 'rgba(88,28,135,0.2)',
+            border: '1px solid rgba(168,85,247,0.2)',
+          }}
+        >
+          <span className="w-2 h-2 rounded-full" style={{ background: dotColor, boxShadow: dotGlow }} />
+          <span className="font-bold text-[10px] text-purple-300/70 tracking-widest uppercase">
+            {health === 'checking' ? 'CHECKING' : health === 'online' ? 'ONLINE' : 'OFFLINE'}
+          </span>
+        </div>
+
+        <div
+          className="hidden lg:flex items-center gap-1 pr-3 mr-1"
+          style={{ borderRight: '1px solid rgba(168,85,247,0.15)' }}
+        >
+          {['sensors', 'memory', 'speed'].map(icon => (
+            <button
+              key={icon}
+              className="p-1.5 rounded-sm transition-all text-purple-500/40 hover:text-purple-300 hover:bg-purple-500/10"
+            >
+              <span className="material-symbols-outlined text-lg">{icon}</span>
+            </button>
+          ))}
+        </div>
+
+        <button
+          onClick={onGetStarted}
+          className="px-4 py-1.5 font-bold text-xs rounded-lg transition-all active:scale-95"
+          style={{
+            background: 'linear-gradient(135deg, rgba(124,58,237,0.8), rgba(168,85,247,0.8))',
+            border: '1px solid rgba(168,85,247,0.5)',
+            color: '#fff',
+            boxShadow: '0 0 15px rgba(168,85,247,0.25)',
+          }}
+          onMouseEnter={e => (e.currentTarget.style.boxShadow = '0 0 25px rgba(168,85,247,0.5)')}
+          onMouseLeave={e => (e.currentTarget.style.boxShadow = '0 0 15px rgba(168,85,247,0.25)')}
+        >
+          GET STARTED
+        </button>
+      </div>
+    </nav>
+  );
+}

frontend-react/src/components/PillNav.css

@@ -0,0 +1,239 @@
+.pill-nav-container {
+  position: fixed;
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99;
+}
+
+@media (max-width: 768px) {
+  .pill-nav-container {
+    width: calc(100% - 2rem);
+    left: 1rem;
+    transform: none;
+  }
+}
+
+.pill-nav {
+  --nav-h: 42px;
+  --logo: 36px;
+  --pill-pad-x: 18px;
+  --pill-gap: 3px;
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+  .pill-nav {
+    width: 100%;
+    justify-content: space-between;
+    padding: 0 1rem;
+    background: transparent;
+  }
+}
+
+.pill-nav-items {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--nav-h);
+  background: var(--base, #000);
+  border-radius: 9999px;
+}
+
+.pill-logo {
+  width: var(--nav-h);
+  height: var(--nav-h);
+  border-radius: 50%;
+  background: var(--base, #000);
+  padding: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-decoration: none;
+  font-weight: 800;
+  font-size: 13px;
+  letter-spacing: 0.05em;
+  color: var(--pill-text, #fff);
+  white-space: nowrap;
+  width: auto;
+  padding: 0 16px;
+}
+
+.pill-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.pill-list {
+  list-style: none;
+  display: flex;
+  align-items: stretch;
+  gap: var(--pill-gap);
+  margin: 0;
+  padding: 3px;
+  height: 100%;
+}
+
+.pill-list > li {
+  display: flex;
+  height: 100%;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 var(--pill-pad-x);
+  background: var(--pill-bg, #fff);
+  color: var(--pill-text, var(--base, #000));
+  text-decoration: none;
+  border-radius: 9999px;
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  outline: none;
+}
+
+.pill .hover-circle {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  border-radius: 50%;
+  background: var(--base, #000);
+  z-index: 1;
+  display: block;
+  pointer-events: none;
+  will-change: transform;
+}
+
+.pill .label-stack {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  z-index: 2;
+}
+
+.pill .pill-label {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  line-height: 1;
+  will-change: transform;
+}
+
+.pill .pill-label-hover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--hover-text, #fff);
+  z-index: 3;
+  display: inline-block;
+  will-change: transform, opacity;
+}
+
+.pill.is-active::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: var(--base, #000);
+  border-radius: 50px;
+  z-index: 4;
+}
+
+.desktop-only { display: block; }
+.mobile-only  { display: none; }
+
+@media (max-width: 768px) {
+  .desktop-only { display: none; }
+  .mobile-only  { display: block; }
+}
+
+.mobile-menu-button {
+  width: var(--nav-h);
+  height: var(--nav-h);
+  border-radius: 50%;
+  background: var(--base, #000);
+  border: none;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+}
+
+@media (max-width: 768px) {
+  .mobile-menu-button { display: flex; }
+}
+
+.hamburger-line {
+  width: 16px;
+  height: 2px;
+  background: var(--pill-bg, #fff);
+  border-radius: 1px;
+  transition: all 0.01s ease;
+  transform-origin: center;
+}
+
+.mobile-menu-popover {
+  position: absolute;
+  top: 3em;
+  left: 1rem;
+  right: 1rem;
+  background: var(--base, #f0f0f0);
+  border-radius: 27px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  z-index: 998;
+  opacity: 0;
+  transform-origin: top center;
+  visibility: hidden;
+}
+
+.mobile-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.mobile-menu-popover .mobile-menu-link {
+  display: block;
+  padding: 12px 16px;
+  color: var(--pill-text, #fff);
+  background-color: var(--pill-bg, #fff);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 50px;
+  transition: all 0.2s ease;
+}
+
+.mobile-menu-popover .mobile-menu-link:hover {
+  cursor: pointer;
+  background-color: var(--base);
+  color: var(--hover-text, #fff);
+}

frontend-react/src/components/PillNav.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { gsap } from 'gsap';
+import './PillNav.css';
+
+export interface PillNavItem {
+  label: string;
+  href?: string;
+  ariaLabel?: string;
+  onClick?: () => void;
+}
+
+interface PillNavProps {
+  logo?: string;
+  logoText?: string;
+  logoAlt?: string;
+  items: PillNavItem[];
+  activeHref?: string;
+  className?: string;
+  ease?: string;
+  baseColor?: string;
+  pillColor?: string;
+  hoveredPillTextColor?: string;
+  pillTextColor?: string;
+  onMobileMenuClick?: () => void;
+  initialLoadAnimation?: boolean;
+}
+
+const PillNav = ({
+  logo,
+  logoText,
+  logoAlt = 'Logo',
+  items,
+  activeHref,
+  className = '',
+  ease = 'power3.easeOut',
+  baseColor = '#0d0720',
+  pillColor = '#1e0f3a',
+  hoveredPillTextColor = '#e9d5ff',
+  pillTextColor,
+  onMobileMenuClick,
+  initialLoadAnimation = true,
+}: PillNavProps) => {
+  const resolvedPillTextColor = pillTextColor ?? '#c084fc';
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const circleRefs = useRef<(HTMLSpanElement | null)[]>([]);
+  const tlRefs = useRef<gsap.core.Timeline[]>([]);
+  const activeTweenRefs = useRef<gsap.core.Tween[]>([]);
+  const logoImgRef = useRef<HTMLImageElement>(null);
+  const logoTweenRef = useRef<gsap.core.Tween | null>(null);
+  const hamburgerRef = useRef<HTMLButtonElement>(null);
+  const mobileMenuRef = useRef<HTMLDivElement>(null);
+  const navItemsRef = useRef<HTMLDivElement>(null);
+  const logoRef = useRef<HTMLAnchorElement | null>(null);
+
+  useEffect(() => {
+    const layout = () => {
+      circleRefs.current.forEach((circle, index) => {
+        if (!circle?.parentElement) return;
+        const pill = circle.parentElement;
+        const rect = pill.getBoundingClientRect();
+        const { width: w, height: h } = rect;
+        const R = ((w * w) / 4 + h * h) / (2 * h);
+        const D = Math.ceil(2 * R) + 2;
+        const delta = Math.ceil(R - Math.sqrt(Math.max(0, R * R - (w * w) / 4))) + 1;
+        const originY = D - delta;
+
+        circle.style.width = `${D}px`;
+        circle.style.height = `${D}px`;
+        circle.style.bottom = `-${delta}px`;
+
+        gsap.set(circle, { xPercent: -50, scale: 0, transformOrigin: `50% ${originY}px` });
+
+        const label = pill.querySelector('.pill-label');
+        const white = pill.querySelector('.pill-label-hover');
+        if (label) gsap.set(label, { y: 0 });
+        if (white) gsap.set(white, { y: h + 12, opacity: 0 });
+
+        tlRefs.current[index]?.kill();
+        const tl = gsap.timeline({ paused: true });
+        tl.to(circle, { scale: 1.2, xPercent: -50, duration: 2, ease, overwrite: 'auto' }, 0);
+        if (label) tl.to(label, { y: -(h + 8), duration: 2, ease, overwrite: 'auto' }, 0);
+        if (white) {
+          gsap.set(white, { y: Math.ceil(h + 100), opacity: 0 });
+          tl.to(white, { y: 0, opacity: 1, duration: 2, ease, overwrite: 'auto' }, 0);
+        }
+        tlRefs.current[index] = tl;
+      });
+    };
+
+    layout();
+    window.addEventListener('resize', layout);
+    document.fonts?.ready?.then(layout).catch(() => {});
+
+    const menu = mobileMenuRef.current;
+    if (menu) gsap.set(menu, { visibility: 'hidden', opacity: 0, scaleY: 1 });
+
+    if (initialLoadAnimation) {
+      const logoEl = logoRef.current;
+      const navItems = navItemsRef.current;
+      if (logoEl) { gsap.set(logoEl, { scale: 0 }); gsap.to(logoEl, { scale: 1, duration: 0.6, ease }); }
+      if (navItems) { gsap.set(navItems, { width: 0, overflow: 'hidden' }); gsap.to(navItems, { width: 'auto', duration: 0.6, ease }); }
+    }
+
+    return () => window.removeEventListener('resize', layout);
+  }, [items, ease, initialLoadAnimation]);
+
+  const handleEnter = (i: number) => {
+    const tl = tlRefs.current[i];
+    if (!tl) return;
+    activeTweenRefs.current[i]?.kill();
+    activeTweenRefs.current[i] = tl.tweenTo(tl.duration(), { duration: 0.3, ease, overwrite: 'auto' }) as gsap.core.Tween;
+  };
+
+  const handleLeave = (i: number) => {
+    const tl = tlRefs.current[i];
+    if (!tl) return;
+    activeTweenRefs.current[i]?.kill();
+    activeTweenRefs.current[i] = tl.tweenTo(0, { duration: 0.2, ease, overwrite: 'auto' }) as gsap.core.Tween;
+  };
+
+  const handleLogoEnter = () => {
+    const img = logoImgRef.current;
+    if (!img) return;
+    logoTweenRef.current?.kill();
+    gsap.set(img, { rotate: 0 });
+    logoTweenRef.current = gsap.to(img, { rotate: 360, duration: 0.4, ease, overwrite: 'auto' });
+  };
+
+  const toggleMobileMenu = () => {
+    const newState = !isMobileMenuOpen;
+    setIsMobileMenuOpen(newState);
+    const hamburger = hamburgerRef.current;
+    const menu = mobileMenuRef.current;
+
+    if (hamburger) {
+      const lines = hamburger.querySelectorAll('.hamburger-line');
+      if (newState) {
+        gsap.to(lines[0], { rotation: 45, y: 3, duration: 0.3, ease });
+        gsap.to(lines[1], { rotation: -45, y: -3, duration: 0.3, ease });
+      } else {
+        gsap.to(lines[0], { rotation: 0, y: 0, duration: 0.3, ease });
+        gsap.to(lines[1], { rotation: 0, y: 0, duration: 0.3, ease });
+      }
+    }
+
+    if (menu) {
+      if (newState) {
+        gsap.set(menu, { visibility: 'visible' });
+        gsap.fromTo(menu, { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.3, ease });
+      } else {
+        gsap.to(menu, { opacity: 0, y: 10, duration: 0.2, ease, onComplete: () => gsap.set(menu, { visibility: 'hidden' }) });
+      }
+    }
+    onMobileMenuClick?.();
+  };
+
+  const cssVars = {
+    ['--base']: baseColor,
+    ['--pill-bg']: pillColor,
+    ['--hover-text']: hoveredPillTextColor,
+    ['--pill-text']: resolvedPillTextColor,
+  } as React.CSSProperties;
+
+  const location = useLocation();
+  const currentHref = activeHref ?? location.pathname;
+
+  const renderPill = (item: PillNavItem, i: number) => {
+    const isActive = item.href ? currentHref === item.href : false;
+    const pillClass = `pill${isActive ? ' is-active' : ''}`;
+    const inner = (
+      <>
+        <span className="hover-circle" aria-hidden="true" ref={el => { circleRefs.current[i] = el; }} />
+        <span className="label-stack">
+          <span className="pill-label">{item.label}</span>
+          <span className="pill-label-hover" aria-hidden="true">{item.label}</span>
+        </span>
+      </>
+    );
+
+    if (item.onClick) {
+      return (
+        <button role="menuitem" className={pillClass}
+          aria-label={item.ariaLabel || item.label}
+          onMouseEnter={() => handleEnter(i)} onMouseLeave={() => handleLeave(i)}
+          onClick={item.onClick}>
+          {inner}
+        </button>
+      );
+    }
+
+    const isInternal = item.href && !item.href.startsWith('http') && !item.href.startsWith('mailto');
+    if (isInternal) {
+      return (
+        <Link role="menuitem" to={item.href!} className={pillClass}
+          aria-label={item.ariaLabel || item.label}
+          onMouseEnter={() => handleEnter(i)} onMouseLeave={() => handleLeave(i)}>
+          {inner}
+        </Link>
+      );
+    }
+
+    return (
+      <a role="menuitem" href={item.href || '#'} className={pillClass}
+        aria-label={item.ariaLabel || item.label}
+        onMouseEnter={() => handleEnter(i)} onMouseLeave={() => handleLeave(i)}>
+        {inner}
+      </a>
+    );
+  };
+
+  return (
+    <div className="pill-nav-container">
+      <nav className={`pill-nav ${className}`} aria-label="Primary" style={cssVars}>
+        {/* Logo / brand */}
+        <a
+          className="pill-logo"
+          href="#"
+          aria-label="Home"
+          onMouseEnter={handleLogoEnter}
+          ref={logoRef}
+          style={{ background: baseColor, color: resolvedPillTextColor }}
+        >
+          {logo
+            ? <img src={logo} alt={logoAlt} ref={logoImgRef} />
+            : <span style={{ fontWeight: 800, fontSize: 14, letterSpacing: '0.05em', color: '#c084fc' }}>{logoText ?? 'AUTHRIX'}</span>
+          }
+        </a>
+
+        {/* Desktop nav items */}
+        <div className="pill-nav-items desktop-only" ref={navItemsRef}>
+          <ul className="pill-list" role="menubar">
+            {items.map((item, i) => (
+              <li key={i} role="none">{renderPill(item, i)}</li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Mobile hamburger */}
+        <button
+          className="mobile-menu-button mobile-only"
+          onClick={toggleMobileMenu}
+          aria-label="Toggle menu"
+          ref={hamburgerRef}
+        >
+          <span className="hamburger-line" />
+          <span className="hamburger-line" />
+        </button>
+      </nav>
+
+      {/* Mobile popover */}
+      <div className="mobile-menu-popover mobile-only" ref={mobileMenuRef} style={cssVars}>
+        <ul className="mobile-menu-list">
+          {items.map((item, i) => (
+            <li key={i}>
+              {item.onClick
+                ? <button className={`mobile-menu-link${currentHref === item.href ? ' is-active' : ''}`} onClick={() => { item.onClick?.(); setIsMobileMenuOpen(false); }}>{item.label}</button>
+                : item.href && !item.href.startsWith('http')
+                  ? <Link to={item.href} className={`mobile-menu-link${currentHref === item.href ? ' is-active' : ''}`} onClick={() => setIsMobileMenuOpen(false)}>{item.label}</Link>
+                  : <a href={item.href || '#'} className={`mobile-menu-link${currentHref === item.href ? ' is-active' : ''}`} onClick={() => setIsMobileMenuOpen(false)}>{item.label}</a>
+              }
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default PillNav;

frontend-react/src/components/ProcessingSection.tsx

@@ -0,0 +1,269 @@
+import { useEffect, useState } from 'react';
+
+interface Step {
+  label: string;
+  status: 'pending' | 'active' | 'done';
+  pct: number;
+}
+
+const PHASES = [
+  { stepIdx: 0, pct: 20 },
+  { stepIdx: 1, pct: 40 },
+  { stepIdx: 2, pct: 65 },
+  { stepIdx: 3, pct: 85 },
+  { stepIdx: 4, pct: 98 },
+];
+
+const STEP_LABELS = [
+  'Extracting frames...',
+  'Detecting faces...',
+  'Running ViT inference...',
+  'Analyzing audio...',
+  'Generating report...',
+];
+
+const P = 'rgba(168,85,247,';
+
+export default function ProcessingSection() {
+  const [steps, setSteps] = useState<Step[]>(
+    STEP_LABELS.map(label => ({ label, status: 'pending', pct: 0 }))
+  );
+  const [overallPct, setOverallPct] = useState(0);
+  const [phaseIdx, setPhaseIdx] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPhaseIdx(prev => {
+        const next = prev + 1;
+        if (next >= PHASES.length) { clearInterval(interval); return prev; }
+        return next;
+      });
+    }, 2200);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const phase = PHASES[phaseIdx];
+    setOverallPct(phase.pct);
+    setSteps(prev => prev.map((s, i) => {
+      if (i < phase.stepIdx) return { ...s, status: 'done', pct: 100 };
+      if (i === phase.stepIdx) return { ...s, status: 'active', pct: phase.pct };
+      return { ...s, status: 'pending', pct: 0 };
+    }));
+  }, [phaseIdx]);
+
+  const stepColor = (s: Step) =>
+    s.status === 'active' ? '#c084fc' : s.status === 'done' ? '#a855f7' : 'rgba(168,85,247,0.25)';
+
+  const stepIcon = (s: Step) =>
+    s.status === 'active' ? 'sync' : s.status === 'done' ? 'check_circle' : 'hourglass_empty';
+
+  return (
+    <section className="relative z-10 flex flex-col items-center justify-center px-6 min-h-screen">
+      <div className="absolute inset-0 noise-bg z-0" />
+
+      {/* Purple scan line */}
+      <div className="absolute left-0 w-full h-[2px] pointer-events-none opacity-50"
+        style={{
+          top: '30%',
+          background: 'linear-gradient(to bottom, transparent 0%, rgba(168,85,247,0.3) 50%, transparent 100%)',
+          animation: 'scanMove 4s linear infinite',
+        }}
+      />
+
+      <div className="relative z-10 w-full max-w-4xl pt-24 pb-16 flex flex-col items-center">
+
+        {/* Header */}
+        <div className="w-full mb-12 text-center">
+          <h1
+            className="text-5xl font-black mb-2"
+            style={{
+              background: 'linear-gradient(135deg, #c084fc, #a855f7)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              filter: 'drop-shadow(0 0 12px rgba(168,85,247,0.4))',
+            }}
+          >
+            SYSTEM_STATE: ANALYSIS
+          </h1>
+          <p className="text-sm tracking-[0.2em] uppercase" style={{ color: 'rgba(192,132,252,0.5)' }}>
+            Initiating Deep Inspection Protocol
+          </p>
+        </div>
+
+        {/* Bento grid */}
+        <div className="w-full grid grid-cols-1 md:grid-cols-12 gap-5">
+
+          {/* Left: Orb */}
+          <div
+            className="md:col-span-5 rounded-xl p-6 flex flex-col items-center justify-center relative min-h-[300px]"
+            style={{
+              background: 'rgba(20,10,40,0.5)',
+              border: '1px solid rgba(168,85,247,0.15)',
+              backdropFilter: 'blur(20px)',
+              boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.04)',
+            }}
+          >
+            <div className="absolute top-3 left-4 font-bold text-[10px] tracking-widest uppercase"
+              style={{ color: 'rgba(168,85,247,0.4)' }}>
+              Target Vector
+            </div>
+
+            <div
+              className="relative w-48 h-48 rounded-full flex items-center justify-center"
+              style={{
+                border: '1px solid rgba(168,85,247,0.25)',
+                boxShadow: '0 0 30px rgba(124,58,237,0.12)',
+              }}
+            >
+              <div
+                className="absolute inset-2 rounded-full border-dashed animate-spin-medium"
+                style={{ border: '1px dashed rgba(168,85,247,0.3)' }}
+              />
+              <div
+                className="absolute inset-6 rounded-full flex items-center justify-center overflow-hidden"
+                style={{
+                  background: 'radial-gradient(circle, rgba(88,28,135,0.3) 0%, rgba(13,7,32,0.8) 100%)',
+                }}
+              >
+                <span
+                  className="material-symbols-outlined text-[48px] opacity-40"
+                  style={{ color: '#a855f7', fontVariationSettings: "'FILL' 1" }}
+                >
+                  analytics
+                </span>
+              </div>
+              <div
+                className="absolute inset-0 rounded-full border-t-2 blur-[2px] animate-spin-fast"
+                style={{ borderColor: 'rgba(168,85,247,0.7)' }}
+              />
+              <span
+                className="material-symbols-outlined absolute text-4xl"
+                style={{ color: '#c084fc', filter: 'drop-shadow(0 0 10px rgba(168,85,247,0.8))' }}
+              >
+                troubleshoot
+              </span>
+            </div>
+
+            <div className="mt-6 w-full">
+              {[
+                { label: 'DATA_STREAM', value: 'ACTIVE',   valueColor: '#a855f7' },
+                { label: 'THROUGHPUT',  value: '2.4 TB/s', valueColor: '#818cf8' },
+              ].map(({ label, value, valueColor }) => (
+                <div
+                  key={label}
+                  className="flex items-center justify-between text-sm font-medium tracking-wider pb-1 mb-1"
+                  style={{ borderBottom: '1px solid rgba(168,85,247,0.08)', color: 'rgba(192,132,252,0.5)' }}
+                >
+                  <span>{label}</span>
+                  <span style={{ color: valueColor, fontWeight: 700 }}>{value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right: Pipeline */}
+          <div
+            className="md:col-span-7 rounded-xl p-6 flex flex-col justify-center gap-4"
+            style={{
+              background: 'rgba(20,10,40,0.5)',
+              border: '1px solid rgba(168,85,247,0.15)',
+              backdropFilter: 'blur(20px)',
+              boxShadow: 'inset 1px 1px 0 rgba(255,255,255,0.04)',
+            }}
+          >
+            <div className="flex justify-between items-center mb-1">
+              <span className="font-bold text-[10px] tracking-widest uppercase"
+                style={{ color: 'rgba(168,85,247,0.4)' }}>
+                Processing Pipeline
+              </span>
+              <span
+                className="text-sm font-bold px-3 py-1 rounded"
+                style={{
+                  color: '#c084fc',
+                  background: 'rgba(124,58,237,0.2)',
+                  border: '1px solid rgba(168,85,247,0.3)',
+                }}
+              >
+                {overallPct}% COMPLETE
+              </span>
+            </div>
+
+            {steps.map((step, i) => (
+              <div
+                key={i}
+                className="flex flex-col gap-1 transition-opacity duration-400"
+                style={{ opacity: step.status === 'pending' ? 0.3 : 1 }}
+              >
+                <div className="flex justify-between items-center">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="material-symbols-outlined text-sm"
+                      style={{ color: stepColor(step) }}
+                    >
+                      {stepIcon(step)}
+                    </span>
+                    <span className="text-sm font-medium tracking-wider text-white/80">
+                      {step.label}
+                    </span>
+                  </div>
+                  <span className="text-sm font-bold" style={{ color: stepColor(step) }}>
+                    {step.status === 'done' ? '100%' : step.status === 'active' ? `${step.pct}%` : '0%'}
+                  </span>
+                </div>
+                <div className="w-full h-2 flex gap-[2px] rounded overflow-hidden"
+                  style={{ background: 'rgba(88,28,135,0.2)' }}>
+                  {Array.from({ length: 10 }).map((_, j) => {
+                    const filled = step.status === 'done' || (step.status === 'active' && j < Math.round(step.pct / 10));
+                    return (
+                      <div key={j} className="h-full flex-1 transition-all duration-500"
+                        style={{
+                          background: filled
+                            ? step.status === 'done'
+                              ? `${P}0.55)`
+                              : `${P}0.85)`
+                            : `${P}0.08)`,
+                          boxShadow: filled && step.status === 'active' ? `0 0 6px ${P}0.5)` : 'none',
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Overall progress */}
+        <div
+          className="w-full mt-6 rounded-xl p-4"
+          style={{
+            background: 'rgba(20,10,40,0.5)',
+            border: '1px solid rgba(168,85,247,0.15)',
+            backdropFilter: 'blur(20px)',
+          }}
+        >
+          <div className="flex justify-between items-center mb-2">
+            <span className="font-bold text-[10px] tracking-widest uppercase"
+              style={{ color: 'rgba(168,85,247,0.4)' }}>
+              Overall Progress
+            </span>
+            <span className="text-sm font-bold" style={{ color: '#c084fc' }}>{overallPct}%</span>
+          </div>
+          <div className="w-full h-3 rounded-full overflow-hidden"
+            style={{ background: 'rgba(88,28,135,0.2)' }}>
+            <div
+              className="h-full rounded-full transition-all duration-700"
+              style={{
+                width: `${overallPct}%`,
+                background: 'linear-gradient(to right, #7c3aed, #a855f7, #c084fc)',
+                boxShadow: '0 0 12px rgba(168,85,247,0.5)',
+              }}
+            />
+          </div>
+        </div>
+
+      </div>
+    </section>
+  );
+}

frontend-react/src/components/RadioNav.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useState } from 'react';
+
+interface RadioNavProps {
+  active: string;
+  onNavigate: (id: string) => void;
+}
+
+const items = [
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    icon: (
+      <path d="M4 13h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1zm-1 7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4zm10 0a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7zm1-10h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1z" />
+    ),
+  },
+  {
+    id: 'analyze',
+    label: 'Analyze',
+    icon: (
+      <path d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z" />
+    ),
+  },
+  {
+    id: 'pricing',
+    label: 'Pricing',
+    icon: (
+      <path d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8zm16-6H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z" />
+    ),
+  },
+  {
+    id: 'agents',
+    label: 'Agents',
+    icon: (
+      <path d="M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM12 20c-4.411 0-8-3.589-8-8s3.567-8 7.953-8C16.391 4 20 7.589 20 12s-3.589 8-8 8zm-1-5h2v2h-2zm0-8h2v6h-2z" />
+    ),
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    icon: (
+      <>
+        <path d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z" />
+        <path d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z" />
+      </>
+    ),
+  },
+];
+
+export default function RadioNav({ active, onNavigate }: RadioNavProps) {
+  const [hovered, setHovered] = useState<string | null>(null);
+
+  // Sync radio inputs with active state
+  useEffect(() => {
+    const el = document.getElementById(active) as HTMLInputElement | null;
+    if (el) el.checked = true;
+  }, [active]);
+
+  return (
+    <div className="fixed top-4 left-1/2 z-50 -translate-x-1/2 transition-all duration-450 ease-in-out w-auto px-4">
+      <article
+        className="flex rounded-2xl overflow-hidden"
+        style={{
+          background: '#0d0720',
+          border: '1px solid rgba(168,85,247,0.18)',
+          boxShadow: '0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(88,28,135,0.15)',
+        }}
+      >
+        {items.map(item => {
+          const isActive = active === item.id;
+          const isHovered = hovered === item.id;
+
+          return (
+            <label
+              key={item.id}
+              htmlFor={item.id}
+              className="relative flex flex-col items-center justify-center cursor-pointer select-none transition-all duration-300"
+              style={{
+                width: 72,
+                height: 64,
+                padding: '8px 4px 4px',
+                gap: 4,
+                borderRadius: 12,
+                background: isActive
+                  ? 'rgba(124,58,237,0.25)'
+                  : isHovered
+                  ? 'rgba(88,28,135,0.15)'
+                  : 'transparent',
+                boxShadow: isActive
+                  ? 'inset 0 1px 0 rgba(192,132,252,0.15), 0 0 16px rgba(124,58,237,0.2)'
+                  : 'none',
+                borderBottom: isActive ? '2px solid rgba(168,85,247,0.7)' : '2px solid transparent',
+              }}
+              onMouseEnter={() => setHovered(item.id)}
+              onMouseLeave={() => setHovered(null)}
+              onClick={() => onNavigate(item.id)}
+            >
+              <input
+                id={item.id}
+                name="nav"
+                type="radio"
+                className="hidden"
+                defaultChecked={isActive}
+              />
+
+              <svg
+                viewBox="0 0 24 24"
+                width={20}
+                height={20}
+                xmlns="http://www.w3.org/2000/svg"
+                style={{
+                  fill: isActive ? '#c084fc' : isHovered ? '#a855f7' : 'rgba(168,85,247,0.35)',
+                  filter: isActive ? 'drop-shadow(0 0 6px rgba(192,132,252,0.7))' : 'none',
+                  transform: isActive || isHovered ? 'scale(1.2)' : 'scale(1)',
+                  transition: 'all 0.3s ease',
+                }}
+              >
+                {item.icon}
+              </svg>
+
+              <span
+                className="font-bold uppercase tracking-wider"
+                style={{
+                  fontSize: 8,
+                  letterSpacing: '0.08em',
+                  color: isActive ? '#c084fc' : isHovered ? '#a855f7' : 'rgba(168,85,247,0.3)',
+                  transition: 'color 0.3s ease',
+                }}
+              >
+                {item.label}
+              </span>
+            </label>
+          );
+        })}
+      </article>
+    </div>
+  );
+}

frontend-react/src/components/ResultSection.tsx

@@ -0,0 +1,339 @@
+import { useEffect, useRef } from 'react';
+import type { AnalysisResult } from '../types';
+
+interface ResultSectionProps {
+  result: AnalysisResult;
+  onReset: () => void;
+}
+
+function fmtVal(v: unknown) {
+  if (v === null || v === undefined) return '—';
+  return String(v);
+}
+
+// Neumorphic card style — dark purple variant
+const neuCard: React.CSSProperties = {
+  borderRadius: 30,
+  background: '#120a24',
+  boxShadow: '15px 15px 30px #0a0618, -15px -15px 30px #1a0e30',
+};
+
+const neuCardAccent = (color: string): React.CSSProperties => ({
+  borderRadius: 30,
+  background: '#120a24',
+  boxShadow: `15px 15px 30px #0a0618, -15px -15px 30px #1a0e30, 0 0 0 1px ${color}22`,
+});
+
+export default function ResultSection({ result, onReset }: ResultSectionProps) {
+  const isFake = result.result === 'FAKE';
+  const pct = result.confidence;
+  const accentColor = isFake ? '#ff3355' : '#a855f7';
+  const accentGlow  = isFake ? 'rgba(255,51,85,0.4)' : 'rgba(168,85,247,0.4)';
+  const timelineRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = timelineRef.current;
+    if (!container) return;
+    container.innerHTML = '';
+
+    const frames = result.frame_timeline ?? [];
+    if (!frames.length) {
+      container.innerHTML = '<span style="font-size:11px;color:#6b21a8;font-family:Space Grotesk,monospace;margin:auto;display:flex;align-items:center;height:100%;">No per-frame data available</span>';
+      return;
+    }
+
+    const W = container.clientWidth || 600;
+    const H = 120;
+    const PAD = { top: 12, right: 16, bottom: 24, left: 32 };
+    const chartW = W - PAD.left - PAD.right;
+    const chartH = H - PAD.top - PAD.bottom;
+
+    const scores = frames.map(f => f.fake_pct / 100);
+    const n = scores.length;
+
+    // x/y helpers
+    const xOf = (i: number) => PAD.left + (i / Math.max(n - 1, 1)) * chartW;
+    const yOf = (v: number) => PAD.top + (1 - v) * chartH;
+
+    // Smooth catmull-rom path
+    const smooth = (pts: [number, number][]) => {
+      if (pts.length < 2) return '';
+      let d = `M ${pts[0][0]},${pts[0][1]}`;
+      for (let i = 0; i < pts.length - 1; i++) {
+        const p0 = pts[Math.max(i - 1, 0)];
+        const p1 = pts[i];
+        const p2 = pts[i + 1];
+        const p3 = pts[Math.min(i + 2, pts.length - 1)];
+        const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
+        const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
+        const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
+        const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+        d += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2[0]},${p2[1]}`;
+      }
+      return d;
+    };
+
+    const pts: [number, number][] = scores.map((v, i) => [xOf(i), yOf(v)]);
+    const linePath = smooth(pts);
+    const areaPath = linePath
+      + ` L ${xOf(n - 1)},${yOf(0)} L ${xOf(0)},${yOf(0)} Z`;
+
+    const gradId = `tl-grad-${Date.now()}`;
+    const fakeColor = isFake ? '#ff3355' : '#a855f7';
+    const fakeColorMid = isFake ? 'rgba(255,51,85,0.35)' : 'rgba(168,85,247,0.35)';
+    const fakeColorEnd = isFake ? 'rgba(255,51,85,0.0)' : 'rgba(168,85,247,0.0)';
+
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('height', String(H));
+    svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+    svg.style.overflow = 'visible';
+
+    // Defs: gradient + glow filter
+    svg.innerHTML = `
+      <defs>
+        <linearGradient id="${gradId}" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="${fakeColor}" stop-opacity="0.55"/>
+          <stop offset="60%" stop-color="${fakeColorMid}"/>
+          <stop offset="100%" stop-color="${fakeColorEnd}"/>
+        </linearGradient>
+        <filter id="glow-${gradId}">
+          <feGaussianBlur stdDeviation="2.5" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+      </defs>
+
+      <!-- Grid lines -->
+      ${[0, 0.25, 0.5, 0.75, 1].map(v => `
+        <line
+          x1="${PAD.left}" y1="${yOf(v)}"
+          x2="${PAD.left + chartW}" y2="${yOf(v)}"
+          stroke="rgba(88,28,135,0.25)" stroke-width="1"
+          stroke-dasharray="${v === 0.5 ? '4,3' : '2,4'}"
+        />
+        <text x="${PAD.left - 6}" y="${yOf(v) + 4}"
+          font-size="9" fill="rgba(168,85,247,0.4)"
+          text-anchor="end" font-family="Space Grotesk,monospace">
+          ${Math.round(v * 100)}%
+        </text>
+      `).join('')}
+
+      <!-- 50% threshold label -->
+      <text x="${PAD.left + chartW + 4}" y="${yOf(0.5) + 4}"
+        font-size="9" fill="rgba(168,85,247,0.6)"
+        font-family="Space Grotesk,monospace" font-weight="700">50%</text>
+
+      <!-- Area fill -->
+      <path d="${areaPath}" fill="url(#${gradId})"/>
+
+      <!-- Line -->
+      <path d="${linePath}"
+        fill="none" stroke="${fakeColor}" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round"
+        filter="url(#glow-${gradId})"/>
+
+      <!-- Data points -->
+      ${scores.map((v, i) => {
+        const x = xOf(i);
+        const y = yOf(v);
+        const hot = v > 0.5;
+        return `
+          <circle cx="${x}" cy="${y}" r="${hot ? 4 : 2.5}"
+            fill="${hot ? fakeColor : '#120a24'}"
+            stroke="${fakeColor}" stroke-width="${hot ? 0 : 1.5}"
+            opacity="${hot ? 1 : 0.6}"
+            filter="${hot ? `url(#glow-${gradId})` : ''}"/>
+        `;
+      }).join('')}
+
+      <!-- X-axis frame labels (every ~5th) -->
+      ${scores.map((_, i) => {
+        if (i % Math.max(1, Math.floor(n / 8)) !== 0 && i !== n - 1) return '';
+        return `<text x="${xOf(i)}" y="${H - 4}"
+          font-size="8" fill="rgba(168,85,247,0.35)"
+          text-anchor="middle" font-family="Space Grotesk,monospace">F${i + 1}</text>`;
+      }).join('')}
+    `;
+
+    container.appendChild(svg);
+  }, [result, isFake]);
+
+  const metaItems = [
+    ['Frames Analyzed', fmtVal(result.metadata?.frames_analyzed)],
+    ['Duration',        result.metadata?.video_duration_sec ? result.metadata.video_duration_sec + 's' : '—'],
+    ['FPS',             fmtVal(result.metadata?.video_fps)],
+    ['Resolution',      fmtVal(result.metadata?.resolution)],
+    ['Processing Time', result.processing_time_sec ? result.processing_time_sec + 's' : '—'],
+  ];
+
+  const audioLabel: Record<string, string> = {
+    HUMAN_VOICE: 'Human Voice',
+    AI_VOICE: 'AI Voice',
+    AV_MISMATCH: 'AV Mismatch',
+    NO_AUDIO: 'No Audio',
+  };
+
+  return (
+    <section className="relative z-10 flex flex-col items-center justify-center px-6 pt-28 pb-16 min-h-screen">
+      <div className="w-full max-w-4xl flex flex-col gap-6">
+
+        {/* ── Verdict card ── */}
+        <div style={neuCardAccent(accentColor)} className="p-8 overflow-hidden relative">
+          <div className="flex flex-col md:flex-row items-center gap-8">
+
+            {/* Badge */}
+            <div
+              className="flex flex-col items-center justify-center w-40 h-40 rounded-full flex-shrink-0"
+              style={{
+                background: '#120a24',
+                boxShadow: `8px 8px 20px #0a0618, -8px -8px 20px #1a0e30, 0 0 0 2px ${accentColor}55, 0 0 30px ${accentGlow}`,
+              }}
+            >
+              <span className="text-4xl mb-1">{isFake ? '⚠' : '✓'}</span>
+              <span className="text-xl font-black tracking-widest uppercase"
+                style={{ color: accentColor, textShadow: `0 0 20px ${accentGlow}` }}>
+                {isFake ? 'DEEPFAKE' : 'AUTHENTIC'}
+              </span>
+            </div>
+
+            {/* Confidence */}
+            <div className="flex-1 w-full">
+              <div className="flex justify-between items-center mb-2">
+                <span className="font-bold text-[10px] tracking-widest uppercase text-purple-400/40">
+                  Confidence Score
+                </span>
+                <span className="text-2xl font-black" style={{ color: accentColor }}>
+                  {pct}%
+                </span>
+              </div>
+
+              {/* Bar track — inset neumorphic */}
+              <div className="w-full h-4 rounded-full overflow-hidden mb-4"
+                style={{
+                  background: '#120a24',
+                  boxShadow: 'inset 4px 4px 8px #0a0618, inset -4px -4px 8px #1a0e30',
+                }}>
+                <div className="h-full rounded-full transition-all duration-1000"
+                  style={{
+                    width: `${pct}%`,
+                    background: isFake
+                      ? 'linear-gradient(to right, #ff3355, #ff6680)'
+                      : 'linear-gradient(to right, #7c3aed, #a855f7, #c084fc)',
+                    boxShadow: `0 0 12px ${accentGlow}`,
+                  }}
+                />
+              </div>
+
+              {/* Risk badge */}
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider"
+                style={{
+                  color: pct >= 65 ? '#ff3355' : pct >= 35 ? '#f59e0b' : '#a855f7',
+                  background: '#120a24',
+                  boxShadow: `4px 4px 10px #0a0618, -4px -4px 10px #1a0e30`,
+                  border: `1px solid ${pct >= 65 ? 'rgba(255,51,85,0.3)' : pct >= 35 ? 'rgba(245,158,11,0.3)' : 'rgba(168,85,247,0.3)'}`,
+                }}>
+                {pct >= 65 ? 'CRITICAL RISK' : pct >= 35 ? 'MEDIUM RISK' : 'LOW RISK'}
+              </div>
+
+              {result.audio?.available && (
+                <div className="mt-3 flex items-center gap-3 text-xs text-purple-300/50">
+                  <span className="material-symbols-outlined text-[16px]">
+                    {result.audio.result === 'HUMAN_VOICE' ? 'mic' : result.audio.result === 'AI_VOICE' ? 'smart_toy' : 'warning'}
+                  </span>
+                  <span>Audio: <strong style={{ color: accentColor }}>{audioLabel[result.audio.result] ?? result.audio.result}</strong></span>
+                  <span className="text-purple-500/40">({result.audio.confidence?.toFixed(1)}% conf)</span>
+                </div>
+              )}
+
+              {result.metadata_check?.c2pa_detected && (
+                <div className="mt-2 flex items-center gap-2 text-xs text-amber-400/70">
+                  <span className="material-symbols-outlined text-[16px]">verified</span>
+                  C2PA metadata detected — AI-generated content signature found
+                  {result.metadata_check.tool_detected && (
+                    <span className="text-purple-400/40">({result.metadata_check.tool_detected})</span>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* ── Insights + Metadata row ── */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+          {/* Insights */}
+          <div style={neuCard} className="p-6">
+            <h3 className="font-bold text-[10px] tracking-widest uppercase mb-4 flex items-center gap-2 text-purple-400/40">
+              <span className="material-symbols-outlined text-[14px]">analytics</span>
+              Analysis Insights
+            </h3>
+            <div className="flex flex-col gap-3">
+              {(result.details ?? ['Analysis completed.']).map((txt, i) => (
+                <div key={i} className="flex items-start gap-3 pl-3 text-sm text-purple-100/70"
+                  style={{ borderLeft: `2px solid ${accentColor}` }}>
+                  <span className="w-2 h-2 rounded-full mt-1.5 flex-shrink-0"
+                    style={{ background: accentColor, boxShadow: `0 0 8px ${accentGlow}` }} />
+                  {txt}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Metadata */}
+          <div style={neuCard} className="p-6">
+            <h3 className="font-bold text-[10px] tracking-widest uppercase mb-4 flex items-center gap-2 text-purple-400/40">
+              <span className="material-symbols-outlined text-[14px]">info</span>
+              Video Metadata
+            </h3>
+            <div className="flex flex-col gap-3">
+              {metaItems.map(([k, v]) => (
+                <div key={k} className="flex justify-between items-center pb-2"
+                  style={{ borderBottom: '1px solid rgba(88,28,135,0.2)' }}>
+                  <span className="text-[11px] tracking-wider uppercase text-purple-400/40">{k}</span>
+                  <span className="text-sm font-bold text-white font-mono">{v}</span>
+                </div>
+              ))}
+              {result.cached && (
+                <div className="flex items-center gap-2 text-xs text-purple-400/60 mt-1">
+                  <span className="material-symbols-outlined text-[14px]">cached</span>
+                  Result served from cache
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* ── Frame timeline ── */}
+        <div style={neuCard} className="p-6">
+          <h3 className="font-bold text-[10px] tracking-widest uppercase mb-4 flex items-center gap-2 text-purple-400/40">
+            <span className="material-symbols-outlined text-[14px]">timeline</span>
+            Frame-by-Frame Analysis
+          </h3>
+          <div ref={timelineRef} className="relative w-full" style={{ height: 120 }} />
+        </div>
+
+        {/* ── Action button ── */}
+        <div className="flex justify-center">
+          <button
+            onClick={onReset}
+            className="px-8 py-3 font-bold text-xs uppercase tracking-wider rounded-full transition-all active:scale-95"
+            style={{
+              background: '#120a24',
+              boxShadow: '8px 8px 16px #0a0618, -8px -8px 16px #1a0e30',
+              border: '1px solid rgba(168,85,247,0.3)',
+              color: '#c084fc',
+            }}
+            onMouseEnter={e => (e.currentTarget.style.boxShadow = '8px 8px 16px #0a0618, -8px -8px 16px #1a0e30, 0 0 20px rgba(168,85,247,0.25)')}
+            onMouseLeave={e => (e.currentTarget.style.boxShadow = '8px 8px 16px #0a0618, -8px -8px 16px #1a0e30')}
+          >
+            <span className="flex items-center gap-2">
+              <span className="material-symbols-outlined text-[16px]">refresh</span>
+              Analyze Another
+            </span>
+          </button>
+        </div>
+
+      </div>
+    </section>
+  );
+}

frontend-react/src/components/UploadSection.tsx

@@ -0,0 +1,229 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import FileUploadInput from './FileUploadInput';
+import InitiateButton from './InitiateButton';
+
+interface UploadSectionProps {
+  onAnalyze: (file: File) => void;
+  onBack: () => void;
+}
+
+function fmtBytes(b: number) {
+  if (b < 1024) return b + ' B';
+  if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
+  return (b / 1048576).toFixed(1) + ' MB';
+}
+
+export default function UploadSection({ onAnalyze, onBack }: UploadSectionProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const [time, setTime] = useState('--:--:--');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const t = setInterval(() => {
+      setTime(new Date().toLocaleTimeString('en-US', { hour12: false }));
+    }, 1000);
+    return () => clearInterval(t);
+  }, []);
+
+  const applyFile = useCallback((f: File) => {
+    if (!f.type.startsWith('video/')) return;
+    setFile(f);
+  }, []);
+
+  const onDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragging(false);
+    const f = e.dataTransfer.files[0];
+    if (f) applyFile(f);
+  }, [applyFile]);
+
+  return (
+    <section className="relative z-10 flex flex-col items-center justify-center pt-28 pb-24 px-6 min-h-screen">
+      <div className="w-full max-w-3xl flex flex-col gap-8">
+
+        {/* Header */}
+        <div className="text-center space-y-2">
+          <h1
+            className="text-3xl font-semibold"
+            style={{
+              background: 'linear-gradient(135deg, #c084fc, #a855f7)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              filter: 'drop-shadow(0 0 12px rgba(168,85,247,0.5))',
+            }}
+          >
+            SECURE INGEST PORTAL
+          </h1>
+          <p className="text-sm font-medium tracking-wider text-purple-300/50">
+            Awaiting encrypted payload via protocol AX-9.
+          </p>
+        </div>
+
+        {/* Drop zone outer */}
+        <div
+          className="relative backdrop-blur-2xl rounded-xl overflow-hidden transition-colors duration-500"
+          style={{
+            background: 'rgba(30,15,50,0.4)',
+            border: `1px solid ${dragging ? 'rgba(168,85,247,0.6)' : 'rgba(168,85,247,0.15)'}`,
+            boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.04), 0 0 30px rgba(0,0,0,0.5)',
+          }}
+        >
+          <div className="scan-line" style={{ background: 'linear-gradient(to bottom, transparent 0%, rgba(168,85,247,0.12) 50%, transparent 100%)' }} />
+
+          {/* Drop zone inner */}
+          <div
+            onClick={() => {/* clicks handled by FileUploadInput */}}
+            onDragOver={e => { e.preventDefault(); setDragging(true); }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={onDrop}
+            className="p-10 flex flex-col items-center justify-center border-2 border-dashed
+              m-4 rounded-lg transition-all duration-300 cursor-pointer min-h-[300px]"
+            style={{
+              borderColor: dragging ? 'rgba(168,85,247,0.7)' : 'rgba(88,28,135,0.4)',
+              background: dragging ? 'rgba(168,85,247,0.06)' : 'rgba(20,10,35,0.3)',
+              boxShadow: dragging ? '0 0 40px rgba(168,85,247,0.12) inset' : 'none',
+            }}
+            onMouseEnter={e => {
+              if (!dragging) {
+                (e.currentTarget as HTMLDivElement).style.borderColor = 'rgba(168,85,247,0.5)';
+                (e.currentTarget as HTMLDivElement).style.background = 'rgba(168,85,247,0.04)';
+              }
+            }}
+            onMouseLeave={e => {
+              if (!dragging) {
+                (e.currentTarget as HTMLDivElement).style.borderColor = 'rgba(88,28,135,0.4)';
+                (e.currentTarget as HTMLDivElement).style.background = 'rgba(20,10,35,0.3)';
+              }
+            }}
+          >
+            {!file ? (
+              <div className="flex flex-col items-center gap-6">
+                {/* Animated folder upload widget */}
+                <FileUploadInput onFile={applyFile} />
+
+                <h3 className="text-2xl font-semibold text-white text-center">
+                  INITIALIZE UPLOAD
+                </h3>
+                <p className="text-base text-purple-300/50 text-center max-w-sm -mt-3">
+                  Drag and drop your video file here, or use the button above.
+                </p>
+                <div className="flex items-center gap-2 font-bold text-[10px] text-purple-500/50 tracking-widest justify-center">
+                  <span className="w-1.5 h-1.5 rounded-full bg-purple-500/50" />
+                  ACCEPTED: MP4 · AVI · MOV · MKV · WebM
+                  <span className="w-1.5 h-1.5 rounded-full bg-purple-500/50" />
+                </div>
+              </div>
+            ) : (
+              <div className="w-full flex items-center gap-5">
+                <div
+                  className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0"
+                  style={{
+                    background: 'rgba(124,58,237,0.15)',
+                    border: '1px solid rgba(168,85,247,0.3)',
+                    boxShadow: '0 0 20px rgba(124,58,237,0.15)',
+                  }}
+                >
+                  <span
+                    className="material-symbols-outlined text-[28px]"
+                    style={{ color: '#a855f7', fontVariationSettings: "'FILL' 1" }}
+                  >
+                    video_file
+                  </span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium tracking-wider text-white overflow-hidden text-ellipsis whitespace-nowrap">
+                    {file.name}
+                  </p>
+                  <p className="font-bold text-[10px] text-purple-300/50 mt-1">{fmtBytes(file.size)}</p>
+                </div>
+                <button
+                  onClick={e => { e.stopPropagation(); setFile(null); }}
+                  className="p-2 rounded-sm transition-all text-purple-400/50 hover:text-red-400 hover:bg-red-400/10"
+                >
+                  <span className="material-symbols-outlined text-[20px]">close</span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Hidden input — used only by drag-and-drop path */}
+        <input
+          ref={inputRef}
+          type="file"
+          accept="video/*"
+          className="hidden"
+          onChange={e => e.target.files?.[0] && applyFile(e.target.files[0])}
+        />
+
+        {/* Initiate analysis button */}
+        <InitiateButton onClick={() => file && onAnalyze(file)} disabled={!file} />
+
+        {/* Active queue */}
+        <div className="flex flex-col gap-4">
+          <div
+            className="flex items-center justify-between pb-2"
+            style={{ borderBottom: '1px solid rgba(168,85,247,0.12)' }}
+          >
+            <h4 className="font-bold text-[10px] uppercase tracking-widest flex items-center gap-2"
+              style={{ color: '#a855f7' }}>
+              <span
+                className="w-2 h-2"
+                style={{ background: '#a855f7', boxShadow: '0 0 8px rgba(168,85,247,0.8)' }}
+              />
+              ACTIVE QUEUE
+            </h4>
+            <span className="font-mono text-[10px] text-purple-400/40">SYS_TIME: {time}</span>
+          </div>
+
+          <div className="grid grid-cols-1 gap-2">
+            {file ? (
+              <div
+                className="rounded p-4 flex items-center gap-3"
+                style={{
+                  background: 'rgba(20,10,35,0.6)',
+                  border: '1px solid rgba(124,58,237,0.25)',
+                }}
+              >
+                <span className="material-symbols-outlined text-[20px]" style={{ color: '#a855f7' }}>video_file</span>
+                <span className="text-sm font-medium tracking-wider text-white truncate">{file.name}</span>
+                <span
+                  className="ml-auto font-bold text-[10px] uppercase tracking-widest"
+                  style={{ color: '#a855f7' }}
+                >
+                  QUEUED
+                </span>
+              </div>
+            ) : (
+              <div
+                className="rounded p-4 flex items-center gap-3 opacity-40"
+                style={{
+                  background: 'rgba(20,10,35,0.4)',
+                  border: '1px solid rgba(88,28,135,0.2)',
+                }}
+              >
+                <span className="material-symbols-outlined text-[20px] text-purple-500/50">inbox</span>
+                <span className="text-sm font-medium tracking-wider text-purple-300/50">
+                  No payload queued. Awaiting upload.
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Back */}
+        <div className="text-center">
+          <button
+            onClick={onBack}
+            className="text-sm font-medium tracking-wider transition-colors flex items-center gap-2 mx-auto text-purple-400/40 hover:text-purple-300"
+          >
+            <span className="material-symbols-outlined text-[16px]">arrow_back</span>
+            Back to Command Center
+          </button>
+        </div>
+
+      </div>
+    </section>
+  );
+}

frontend-react/src/index.css

@@ -0,0 +1,230 @@
+/* Google Fonts — must be first */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
+
+@import "tailwindcss";
+
+@theme {
+  --color-background: #0c150f;
+  --color-surface: #0c150f;
+  --color-surface-dim: #0c150f;
+  --color-surface-container-lowest: #07100a;
+  --color-surface-container-low: #141e17;
+  --color-surface-container: #18221b;
+  --color-surface-container-high: #232c25;
+  --color-surface-container-highest: #2d3730;
+  --color-surface-variant: #2d3730;
+  --color-surface-bright: #323c34;
+  --color-on-surface: #dae5da;
+  --color-on-surface-variant: #b9cbbc;
+  --color-on-background: #dae5da;
+  --color-primary: #f3fff3;
+  --color-primary-container: #00ff9c;
+  --color-on-primary: #00391f;
+  --color-on-primary-container: #007142;
+  --color-primary-fixed: #56ffa7;
+  --color-primary-fixed-dim: #00e38a;
+  --color-inverse-primary: #006d40;
+  --color-secondary: #bdf4ff;
+  --color-secondary-container: #00e3fd;
+  --color-on-secondary: #00363d;
+  --color-on-secondary-container: #00616d;
+  --color-secondary-fixed: #9cf0ff;
+  --color-secondary-fixed-dim: #00daf3;
+  --color-tertiary: #fffaff;
+  --color-tertiary-container: #ffdd65;
+  --color-on-tertiary: #3b2f00;
+  --color-on-tertiary-container: #766000;
+  --color-tertiary-fixed: #ffe17a;
+  --color-tertiary-fixed-dim: #e4c44f;
+  --color-outline: #849587;
+  --color-outline-variant: #3b4b3f;
+  --color-error: #ffb4ab;
+  --color-error-container: #93000a;
+  --color-on-error: #690005;
+  --color-on-error-container: #ffdad6;
+  --color-inverse-surface: #dae5da;
+  --color-inverse-on-surface: #29332b;
+  --color-surface-tint: #00e38a;
+
+  --font-sans: 'Space Grotesk', sans-serif;
+}
+
+
+
+#root {
+  min-height: 100vh;
+  background-color: #050210;
+}
+
+html {
+  background-color: #050210;
+}
+
+body {
+  background: radial-gradient(ellipse at 30% 20%, #1a0a2e 0%, #0a0414 40%, #050210 100%);
+  background-attachment: fixed;
+  background-color: #050210;
+  color: #e2d9f3;
+  font-family: 'Space Grotesk', sans-serif;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Material Symbols */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+/* Scan line animation */
+@keyframes scanMove {
+  0%   { top: 0%; }
+  100% { top: 100%; }
+}
+
+.scan-line {
+  background: linear-gradient(to bottom, transparent 0%, rgba(0, 255, 156, 0.15) 50%, transparent 100%);
+  animation: scanMove 4s linear infinite;
+  height: 2px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+/* Blinking cursor */
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}
+.blinking-cursor::after {
+  content: '_';
+  animation: blink 1s step-end infinite;
+}
+
+/* Shimmer */
+@keyframes shimmer {
+  100% { transform: translateX(200%); }
+}
+
+/* Glass panel */
+.glass-panel {
+  background: rgba(35, 44, 37, 0.2);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 255, 156, 0.1);
+  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+/* Glow borders */
+.glow-border-primary {
+  border: 1px solid rgba(0, 255, 156, 0.3) !important;
+  box-shadow: 0 0 15px rgba(0, 255, 156, 0.1);
+}
+.glow-border-error {
+  border: 1px solid rgba(255, 180, 171, 0.3) !important;
+  box-shadow: 0 0 15px rgba(255, 180, 171, 0.1);
+}
+
+/* Drag-over state */
+.drag-over {
+  border-color: #00ff9c !important;
+  background: rgba(0, 255, 156, 0.05) !important;
+  box-shadow: 0 0 40px rgba(0, 255, 156, 0.15) inset !important;
+}
+
+/* Pipeline step */
+.pipeline-step { transition: opacity 0.4s ease; }
+.pipeline-step.pending  { opacity: 0.3; }
+.pipeline-step.active   { opacity: 1; }
+.pipeline-step.done     { opacity: 0.6; }
+
+/* Timeline bar */
+.tl-bar {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: relative;
+}
+.tl-bar-outer {
+  width: 100%;
+  height: 100%;
+  background: rgba(255,255,255,0.05);
+  border-radius: 2px 2px 0 0;
+  overflow: hidden;
+  position: relative;
+  flex: 1;
+}
+.tl-bar-inner {
+  width: 100%;
+  border-radius: 2px 2px 0 0;
+  transition: height 0.8s cubic-bezier(0.22,1,0.36,1);
+}
+.tl-bar:hover .tl-tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-4px);
+}
+.tl-tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #0a0f0a;
+  border: 1px solid #00ff9c;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 100;
+  font-family: 'Space Grotesk', monospace;
+  color: #ffffff !important;
+  letter-spacing: 0.05em;
+  box-shadow: 0 0 10px rgba(0,255,156,0.3);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: #0c150f; }
+::-webkit-scrollbar-thumb { background: rgba(0,255,156,0.25); border-radius: 4px; }
+
+/* Noise bg */
+.noise-bg {
+  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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.05;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+@keyframes spin-slow {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+@keyframes spin-slow-reverse {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(-360deg); }
+}
+.animate-spin-slow         { animation: spin-slow 20s linear infinite; }
+.animate-spin-slow-reverse { animation: spin-slow-reverse 15s linear infinite; }
+.animate-spin-fast         { animation: spin-slow 3s linear infinite; }
+.animate-spin-medium       { animation: spin-slow 8s linear infinite; }

frontend-react/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import './index.css'
+import App from './App.tsx'
+import PricingPage from './pages/PricingPage.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="/pricing" element={<PricingPage />} />
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>,
+)

frontend-react/src/pages/PricingPage.tsx

@@ -0,0 +1,222 @@
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import RadioNav from '../components/RadioNav';
+import Modal from '../components/Modal';
+
+const plans = [
+  {
+    name: 'Free', price: '$0', interval: '/mo', desc: 'Perfect for trying out',
+    features: ['10 video analyses/month', 'Browser extension', 'Max 2-minute videos', 'Community support'],
+    cta: 'Get Started Free', popular: false,
+  },
+  {
+    name: 'Pro', price: '$9.99', interval: '/mo', desc: 'For individuals & creators',
+    features: ['100 analyses/month', 'Up to 10-minute videos', 'API access (100 calls/mo)', 'Priority processing', 'Email support', 'Batch upload'],
+    cta: 'Subscribe to Pro', popular: true,
+  },
+  {
+    name: 'Business', price: '$49', interval: '/mo', desc: 'For teams & organizations',
+    features: ['1,000 analyses/month', 'Unlimited video length', 'API access (5K calls/mo)', 'White-label reports', 'Slack/Teams integration', 'Priority support', 'Custom branding'],
+    cta: 'Subscribe to Business', popular: false,
+  },
+];
+
+const faqs = [
+  { q: 'How accurate is Authrix?', a: 'Authrix uses an ensemble of state-of-the-art ViT models achieving 99%+ accuracy on benchmark datasets. We combine visual analysis with audio detection for comprehensive deepfake identification.' },
+  { q: 'Can I cancel anytime?', a: 'Yes! All subscriptions are month-to-month with no long-term commitment. Cancel anytime from your account dashboard.' },
+  { q: 'What video formats are supported?', a: 'We support MP4, AVI, MOV, MKV, WebM, and WMV formats. Maximum file size is 100MB for Pro tier, unlimited for Business and Enterprise.' },
+  { q: 'Is my data secure?', a: 'Absolutely. All videos are analyzed locally and deleted immediately after processing. We never store your content or share it with third parties.' },
+  { q: 'Do you offer refunds?', a: "Yes, we offer a 30-day money-back guarantee. If you're not satisfied, contact support for a full refund." },
+];
+
+const AGENTS = [
+  { name: 'MetadataAgent',        desc: 'Scans C2PA signatures and AI tool metadata in the first 512KB.' },
+  { name: 'FrameAnalyzerAgent',   desc: 'Extracts up to 40 frames uniformly across the video duration.' },
+  { name: 'FaceDetectorAgent',    desc: 'Uses MediaPipe to detect and crop facial regions with 20% padding.' },
+  { name: 'DecisionAgent (ViT)',  desc: 'Ensemble of two ViT models (99.3% + 92.1% accuracy) with early exit.' },
+  { name: 'AudioAuthenticator',   desc: 'Wav2Vec2-based audio analysis with librosa heuristics for AV mismatch.' },
+  { name: 'ReportGeneratorAgent', desc: 'Adaptive threshold + confidence calibration to produce the final verdict.' },
+];
+
+export default function PricingPage() {
+  const navigate = useNavigate();
+  const [modal, setModal] = useState<string | null>(null);
+
+  const handleNav = (id: string) => {
+    if (id === 'dashboard' || id === 'analyze') navigate('/');
+    else if (id === 'agents') setModal('agents');
+    else if (id === 'settings') setModal('settings');
+    // 'pricing' — already here, do nothing
+  };
+
+  return (
+    <div className="min-h-screen" style={{ background: 'radial-gradient(ellipse at 30% 20%, #1a0a2e 0%, #0a0414 40%, #050210 100%)', color: '#e2d9f3', fontFamily: "'Space Grotesk', sans-serif" }}>
+
+      {/* Grid bg */}
+      <div className="fixed inset-0 pointer-events-none opacity-[0.04]"
+        style={{ backgroundImage: 'linear-gradient(to right,#6d28d9 1px,transparent 1px),linear-gradient(to bottom,#6d28d9 1px,transparent 1px)', backgroundSize: '48px 48px' }} />
+
+      <RadioNav active="pricing" onNavigate={handleNav} />
+
+      <div className="relative z-10 max-w-6xl mx-auto px-6 pt-28 pb-20">
+
+        {/* Header */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center gap-2 mb-4 px-3 py-1.5 rounded-full"
+            style={{ background: 'rgba(88,28,135,0.3)', border: '1px solid rgba(168,85,247,0.25)' }}>
+            <span className="w-2 h-2 rounded-full animate-pulse" style={{ background: '#a855f7', boxShadow: '0 0 8px #a855f7' }} />
+            <span className="font-bold text-[10px] text-purple-300/80 uppercase tracking-[0.18em]">Transparent Pricing</span>
+          </div>
+          <h1 className="text-5xl md:text-6xl font-black mb-4"
+            style={{ background: 'linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+            Choose Your Plan
+          </h1>
+          <p className="text-lg text-purple-200/50 max-w-xl mx-auto">
+            Protect yourself from deepfakes with AI-powered detection. Start free, upgrade anytime.
+          </p>
+        </div>
+
+        {/* Pricing cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
+          {plans.map(plan => (
+            <div key={plan.name} className="relative rounded-2xl p-8 flex flex-col transition-all duration-300 hover:-translate-y-2"
+              style={{
+                background: plan.popular ? 'rgba(88,28,135,0.25)' : 'rgba(20,10,40,0.5)',
+                border: plan.popular ? '1px solid rgba(168,85,247,0.5)' : '1px solid rgba(168,85,247,0.12)',
+                boxShadow: plan.popular ? '0 0 40px rgba(124,58,237,0.2)' : 'none',
+                backdropFilter: 'blur(20px)',
+              }}>
+              {plan.popular && (
+                <div className="absolute -top-3 right-6 px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider"
+                  style={{ background: 'linear-gradient(135deg, #7c3aed, #a855f7)', color: '#fff', boxShadow: '0 4px 12px rgba(124,58,237,0.4)' }}>
+                  Most Popular
+                </div>
+              )}
+              <div className="mb-6">
+                <div className="text-xl font-bold mb-1" style={{ color: '#c084fc' }}>{plan.name}</div>
+                <div className="flex items-end gap-1 mb-1">
+                  <span className="text-5xl font-black text-white">{plan.price}</span>
+                  <span className="text-lg text-purple-300/40 mb-1">{plan.interval}</span>
+                </div>
+                <div className="text-sm text-purple-300/40">{plan.desc}</div>
+              </div>
+              <ul className="flex flex-col gap-3 mb-8 flex-1">
+                {plan.features.map(f => (
+                  <li key={f} className="flex items-center gap-3 text-sm text-purple-200/70">
+                    <span style={{ color: '#a855f7', fontSize: 18 }}>✓</span>{f}
+                  </li>
+                ))}
+              </ul>
+              <button onClick={() => alert(`${plan.name} plan selected. Payment integration coming soon.`)}
+                className="w-full py-3 rounded-xl font-bold text-sm uppercase tracking-wider transition-all duration-300 active:scale-95"
+                style={plan.popular
+                  ? { background: 'linear-gradient(135deg, #7c3aed, #a855f7)', color: '#fff', boxShadow: '0 8px 24px rgba(124,58,237,0.35)' }
+                  : { background: 'rgba(124,58,237,0.12)', border: '1px solid rgba(168,85,247,0.3)', color: '#c084fc' }}>
+                {plan.cta}
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {/* Enterprise */}
+        <div className="rounded-2xl p-12 text-center mb-16"
+          style={{ background: 'rgba(88,28,135,0.1)', border: '1px solid rgba(168,85,247,0.2)', backdropFilter: 'blur(20px)' }}>
+          <h2 className="text-4xl font-black mb-3" style={{ color: '#c084fc' }}>Enterprise Solutions</h2>
+          <p className="text-lg text-purple-200/50 max-w-2xl mx-auto mb-8">
+            Custom solutions for large organizations, social media platforms, and government agencies.
+          </p>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
+            {[
+              { icon: '🏢', title: 'On-Premise Deployment', desc: 'Deploy on your own infrastructure' },
+              { icon: '🎯', title: 'Custom Model Training',  desc: 'Train on your specific content' },
+              { icon: '⚡', title: 'Unlimited Analyses',     desc: 'No limits on API calls' },
+              { icon: '🛡️', title: 'SLA Guarantees',         desc: '99.9% uptime, dedicated support' },
+            ].map(({ icon, title, desc }) => (
+              <div key={title} className="rounded-xl p-5"
+                style={{ background: 'rgba(20,10,40,0.5)', border: '1px solid rgba(168,85,247,0.1)' }}>
+                <div className="text-2xl mb-2">{icon}</div>
+                <div className="text-sm font-bold mb-1" style={{ color: '#c084fc' }}>{title}</div>
+                <div className="text-xs text-purple-300/40">{desc}</div>
+              </div>
+            ))}
+          </div>
+          <button onClick={() => alert('Enterprise inquiry! Contact us at support@authrix.ai')}
+            className="px-10 py-3 rounded-xl font-bold text-sm uppercase tracking-wider transition-all active:scale-95"
+            style={{ background: 'linear-gradient(135deg, #7c3aed, #a855f7)', color: '#fff', boxShadow: '0 8px 24px rgba(124,58,237,0.35)' }}>
+            Contact Sales
+          </button>
+        </div>
+
+        {/* FAQ */}
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-3xl font-black text-center mb-8" style={{ color: '#c084fc' }}>Frequently Asked Questions</h2>
+          <div className="flex flex-col gap-4">
+            {faqs.map(({ q, a }) => (
+              <div key={q} className="rounded-xl p-6"
+                style={{ background: 'rgba(20,10,40,0.5)', border: '1px solid rgba(168,85,247,0.1)', backdropFilter: 'blur(20px)' }}>
+                <div className="text-base font-bold mb-2" style={{ color: '#c084fc' }}>{q}</div>
+                <div className="text-sm leading-relaxed text-purple-200/50">{a}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="text-center mt-16 pt-8" style={{ borderTop: '1px solid rgba(168,85,247,0.1)' }}>
+          <div className="flex justify-center gap-8 mb-4 flex-wrap">
+            {[{ label: 'Home', href: '/' }, { label: 'API Docs', href: 'https://docs.authrix.ai' }, { label: 'Support', href: 'mailto:support@authrix.ai' }]
+              .map(({ label, href }) => (
+                <a key={label} href={href} className="text-sm transition-colors text-purple-400/40 hover:text-purple-300">{label}</a>
+              ))}
+          </div>
+          <p className="text-sm text-purple-400/25">© 2026 Authrix AI. All rights reserved.</p>
+        </div>
+
+      </div>
+
+      {/* Agents modal */}
+      {modal === 'agents' && (
+        <Modal title="Detection Agents" onClose={() => setModal(null)}>
+          <div className="flex flex-col gap-4">
+            {AGENTS.map((ag, i) => (
+              <div key={i} className="flex items-start gap-4 p-4 rounded-lg"
+                style={{ background: 'rgba(30,15,50,0.6)', border: '1px solid rgba(124,58,237,0.2)' }}>
+                <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold"
+                  style={{ background: 'rgba(124,58,237,0.15)', border: '1px solid rgba(168,85,247,0.3)', color: '#a855f7' }}>
+                  {i}
+                </div>
+                <div>
+                  <div className="text-sm font-semibold mb-1" style={{ color: '#c084fc' }}>{ag.name}</div>
+                  <div className="text-xs text-purple-300/50">{ag.desc}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Modal>
+      )}
+
+      {/* Settings modal */}
+      {modal === 'settings' && (
+        <Modal title="Network Status" onClose={() => setModal(null)}>
+          <div className="grid grid-cols-2 gap-4">
+            {[
+              { label: 'API Endpoint',     value: 'https://aarav13-authrix.hf.space' },
+              { label: 'HF Space',         value: 'aarav13-authrix.hf.space' },
+              { label: 'Max File Size',    value: '100 MB' },
+              { label: 'Request Timeout',  value: '120s' },
+              { label: 'Capture Duration', value: '8s' },
+              { label: 'Cache',            value: 'SHA256 (1MB)' },
+            ].map(({ label, value }) => (
+              <div key={label} className="rounded-lg p-4"
+                style={{ background: 'rgba(20,10,35,0.6)', border: '1px solid rgba(88,28,135,0.25)' }}>
+                <div className="text-[10px] uppercase tracking-widest mb-1 text-purple-500/50">{label}</div>
+                <div className="text-sm font-bold font-mono" style={{ color: '#c084fc' }}>{value}</div>
+              </div>
+            ))}
+          </div>
+        </Modal>
+      )}
+
+    </div>
+  );
+}

frontend-react/src/types.ts

@@ -0,0 +1,39 @@
+export interface FrameScore {
+  frame: number;
+  fake_pct: number;
+}
+
+export interface AudioResult {
+  available: boolean;
+  result: 'HUMAN_VOICE' | 'AI_VOICE' | 'AV_MISMATCH' | 'NO_AUDIO';
+  confidence: number;
+  fake_probability: number;
+}
+
+export interface MetadataCheck {
+  ai_generated: boolean;
+  c2pa_detected: boolean;
+  tool_detected: string | null;
+}
+
+export interface VideoMetadata {
+  frames_analyzed: number;
+  frames_with_faces: number;
+  video_duration_sec: number;
+  video_fps: number;
+  resolution: string;
+}
+
+export interface AnalysisResult {
+  result: 'FAKE' | 'REAL';
+  confidence: number;
+  details: string[];
+  frame_timeline: FrameScore[];
+  metadata: VideoMetadata;
+  audio: AudioResult;
+  metadata_check: MetadataCheck;
+  processing_time_sec: number;
+  cached: boolean;
+}
+
+export type AppState = 'hero' | 'upload' | 'processing' | 'result' | 'error';

frontend-react/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

frontend-react/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend-react/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend-react/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/analyze': 'http://localhost:8000',
+      '/analyze-url': 'http://localhost:8000',
+      '/health': 'http://localhost:8000',
+    },
+  },
+  build: {
+    chunkSizeWarningLimit: 2000,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules/three')) return 'three';
+          if (id.includes('node_modules/postprocessing')) return 'postprocessing';
+          if (id.includes('node_modules/face-api')) return 'faceapi';
+        },
+      },
+    },
+  },
+})

frontend-vanilla/index.html

@@ -1,1511 +0,0 @@
-<!DOCTYPE html>
-<html class="dark" lang="en">
-<head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>AUTHRIX AI - Deepfake Detection Engine</title>
-
-<!-- Google Fonts -->
-<link href="https://fonts.googleapis.com" rel="preconnect"/>
-<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;900&display=swap" rel="stylesheet"/>
-<!-- Material Symbols -->
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
-<!-- Tailwind CSS -->
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<script>
-  tailwind.config = {
-    darkMode: "class",
-    theme: {
-      extend: {
-        colors: {
-          "inverse-surface": "#dae5da",
-          "on-error": "#690005",
-          "surface-tint": "#00e38a",
-          "error": "#ffb4ab",
-          "outline-variant": "#3b4b3f",
-          "outline": "#849587",
-          "background": "#0c150f",
-          "surface-container-high": "#232c25",
-          "secondary-container": "#00e3fd",
-          "on-surface-variant": "#b9cbbc",
-          "on-secondary-container": "#00616d",
-          "on-error-container": "#ffdad6",
-          "primary": "#f3fff3",
-          "primary-container": "#00ff9c",
-          "on-primary": "#00391f",
-          "surface-bright": "#323c34",
-          "primary-fixed-dim": "#00e38a",
-          "tertiary-fixed-dim": "#e4c44f",
-          "on-secondary-fixed": "#001f24",
-          "tertiary-fixed": "#ffe17a",
-          "on-tertiary-container": "#766000",
-          "on-secondary": "#00363d",
-          "on-tertiary-fixed": "#231b00",
-          "on-tertiary": "#3b2f00",
-          "surface-container-low": "#141e17",
-          "surface": "#0c150f",
-          "primary-fixed": "#56ffa7",
-          "secondary-fixed-dim": "#00daf3",
-          "on-secondary-fixed-variant": "#004f58",
-          "inverse-on-surface": "#29332b",
-          "surface-container": "#18221b",
-          "on-surface": "#dae5da",
-          "on-tertiary-fixed-variant": "#554500",
-          "error-container": "#93000a",
-          "surface-variant": "#2d3730",
-          "surface-container-highest": "#2d3730",
-          "secondary-fixed": "#9cf0ff",
-          "on-background": "#dae5da",
-          "on-primary-container": "#007142",
-          "inverse-primary": "#006d40",
-          "on-primary-fixed-variant": "#00522f",
-          "secondary": "#bdf4ff",
-          "tertiary": "#fffaff",
-          "surface-dim": "#0c150f",
-          "on-primary-fixed": "#002110",
-          "surface-container-lowest": "#07100a",
-          "tertiary-container": "#ffdd65"
-        },
-        borderRadius: {
-          "DEFAULT": "0.25rem",
-          "lg": "0.5rem",
-          "xl": "0.75rem",
-          "full": "9999px"
-        },
-        spacing: {
-          "xs": "4px",
-          "md": "16px",
-          "base": "4px",
-          "sm": "8px",
-          "xl": "48px",
-          "lg": "24px",
-          "gutter": "20px",
-          "margin": "32px"
-        },
-        fontFamily: {
-          "h2": ["Space Grotesk"],
-          "h1": ["Space Grotesk"],
-          "h3": ["Space Grotesk"],
-          "label-xs": ["Space Grotesk"],
-          "data-mono": ["Space Grotesk"],
-          "body-base": ["Space Grotesk"]
-        },
-        fontSize: {
-          "h2": ["32px", { lineHeight: "1.2", letterSpacing: "-0.01em", fontWeight: "600" }],
-          "h1": ["48px", { lineHeight: "1.1", letterSpacing: "-0.02em", fontWeight: "700" }],
-          "h3": ["24px", { lineHeight: "1.3", letterSpacing: "0em", fontWeight: "600" }],
-          "label-xs": ["12px", { lineHeight: "1", letterSpacing: "0.1em", fontWeight: "700" }],
-          "data-mono": ["14px", { lineHeight: "1.5", letterSpacing: "0.05em", fontWeight: "500" }],
-          "body-base": ["16px", { lineHeight: "1.6", letterSpacing: "0.01em", fontWeight: "400" }]
-        }
-      }
-    }
-  };
-</script>
-
-<style>
-  /* ── Material Symbols ── */
-  .material-symbols-outlined {
-    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-  }
-
-  /* ── Scan line animation ── */
-  .scan-line {
-    background: linear-gradient(to bottom, transparent 0%, rgba(0, 255, 156, 0.15) 50%, transparent 100%);
-    animation: scanMove 4s linear infinite;
-    height: 2px;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    opacity: 0.6;
-  }
-  @keyframes scanMove {
-    0%   { top: 0%; }
-    100% { top: 100%; }
-  }
-
-  /* ── Scanline overlay (results banner) ── */
-  .scanline {
-    position: absolute;
-    top: 0; left: 0;
-    width: 100%; height: 1px;
-    background: rgba(0, 255, 156, 0.12);
-    animation: scanMove 4s linear infinite;
-  }
-
-  /* ── Noise background ── */
-  .noise-bg {
-    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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-    opacity: 0.05;
-    mix-blend-mode: overlay;
-    pointer-events: none;
-  }
-
-  /* ── Glass panel ── */
-  .glass-panel {
-    background: rgba(35, 44, 37, 0.2);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(0, 255, 156, 0.1);
-    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05);
-  }
-
-  /* ── Glow borders ── */
-  .glow-border-primary {
-    border: 1px solid rgba(0, 255, 156, 0.3) !important;
-    box-shadow: 0 0 15px rgba(0, 255, 156, 0.1);
-  }
-  .glow-border-error {
-    border: 1px solid rgba(255, 180, 171, 0.3) !important;
-    box-shadow: 0 0 15px rgba(255, 180, 171, 0.1);
-  }
-  .glow-border-active {
-    border: 1px solid rgba(0, 255, 156, 0.5);
-    box-shadow: 0 0 15px rgba(0, 255, 156, 0.2);
-  }
-
-  /* ── Blinking cursor ── */
-  .blinking-cursor::after {
-    content: '_';
-    animation: blink 1s step-end infinite;
-  }
-  @keyframes blink {
-    0%, 100% { opacity: 1; }
-    50%       { opacity: 0; }
-  }
-
-  /* ── Shimmer on hero CTA ── */
-  @keyframes shimmer {
-    100% { transform: translateX(200%); }
-  }
-
-  /* ── Drag-over state ── */
-  #dropZoneInner.drag-over {
-    border-color: #00ff9c !important;
-    background: rgba(0, 255, 156, 0.05) !important;
-    box-shadow: 0 0 40px rgba(0, 255, 156, 0.15) inset !important;
-  }
-
-  /* ── Pipeline step active ── */
-  .pipeline-step { transition: opacity 0.4s ease; }
-  .pipeline-step.pending  { opacity: 0.3; }
-  .pipeline-step.active   { opacity: 1; }
-  .pipeline-step.done     { opacity: 0.6; }
-
-  /* ── Timeline bar ── */
-  .tl-bar {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    position: relative;
-  }
-  .tl-bar-outer {
-    width: 100%;
-    height: 100%;
-    background: rgba(255,255,255,0.05);
-    border-radius: 2px 2px 0 0;
-    overflow: hidden;
-    position: relative;
-    flex: 1;
-  }
-  .tl-bar-inner {
-    width: 100%;
-    border-radius: 2px 2px 0 0;
-    transition: height 0.8s cubic-bezier(0.22,1,0.36,1);
-  }
-  .tl-bar:hover .tl-tooltip {
-    opacity: 1;
-    transform: translateX(-50%) translateY(-4px);
-  }
-  .tl-tooltip {
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: #0a0f0a;
-    border: 1px solid #00ff9c;
-    border-radius: 4px;
-    padding: 4px 8px;
-    font-size: 11px;
-    font-weight: 700;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.2s ease, transform 0.2s ease;
-    z-index: 100;
-    font-family: 'Space Grotesk', monospace;
-    color: #ffffff !important;
-    letter-spacing: 0.05em;
-    box-shadow: 0 0 10px rgba(0,255,156,0.3);
-  }
-
-  /* ── Scrollbar ── */
-  ::-webkit-scrollbar { width: 5px; }
-  ::-webkit-scrollbar-track { background: #0c150f; }
-  ::-webkit-scrollbar-thumb { background: rgba(0,255,156,0.25); border-radius: 4px; }
-</style>
-</head>
-
-<body class="bg-background text-on-surface min-h-screen flex flex-col relative overflow-x-hidden font-body-base">
-
-<!-- ═══════════════════════════════════════════════════════════
-     FIXED ATMOSPHERIC BACKGROUND (all states)
-════════════════════════════════════════════════════════════ -->
-<div class="fixed inset-0 z-0 pointer-events-none">
-  <!-- Scan lines -->
-  <div class="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[size:100%_4px,3px_100%] opacity-20"></div>
-  <!-- Technical grid -->
-  <div class="absolute inset-0 bg-[linear-gradient(to_right,#3b4b3f_1px,transparent_1px),linear-gradient(to_bottom,#3b4b3f_1px,transparent_1px)] bg-[size:48px_48px] opacity-10"></div>
-  <!-- Ambient glow -->
-  <div class="absolute top-1/4 -right-1/4 w-[800px] h-[800px] bg-primary-container/5 rounded-full blur-[120px]"></div>
-  <div class="absolute bottom-[-20%] left-[-10%] w-[50%] h-[50%] bg-primary-container/3 rounded-full blur-[120px]"></div>
-  <!-- Noise -->
-  <div class="absolute inset-0 noise-bg"></div>
-</div>
-
-<!-- ═══════════════════════════════════════════════════════════
-     FIXED NAV (visible across all states)
-════════════════════════════════════════════════════════════ -->
-<nav class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-emerald-950/20 backdrop-blur-xl border-b border-emerald-500/20 shadow-[0_4px_20px_rgba(0,0,0,0.5)] font-['Space_Grotesk'] tracking-wider uppercase text-xs">
-  <!-- Brand -->
-  <div class="flex items-center gap-8">
-    <span onclick="showState('heroSection')" class="text-2xl font-black tracking-tighter text-emerald-400 drop-shadow-[0_0_8px_rgba(0,255,156,0.5)] cursor-pointer">AUTHRIX AI</span>
-    <div class="hidden md:flex items-center gap-6">
-      <a onclick="showState('heroSection')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Dashboard</a>
-      <a href="/pricing" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Pricing</a>
-      <a onclick="openModal('agentsModal')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Agents</a>
-      <a onclick="openModal('logsModal')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Logs</a>
-      <a onclick="openModal('networkModal')" class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 py-1 px-2 rounded-sm cursor-pointer">Network</a>
-    </div>
-  </div>
-  <!-- Actions -->
-  <div class="flex items-center gap-4">
-    <!-- Health badge -->
-    <div id="healthBadge" class="hidden items-center gap-2 bg-surface-container/40 border border-outline/30 px-3 py-1 rounded-sm">
-      <span id="healthDot" class="w-2 h-2 rounded-full bg-outline"></span>
-      <span id="healthText" class="font-label-xs text-label-xs text-on-surface-variant">CHECKING</span>
-    </div>
-    <div class="hidden lg:flex items-center gap-2 border-r border-emerald-500/20 pr-4 mr-2">
-      <button class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 p-1 rounded-sm"><span class="material-symbols-outlined text-lg">sensors</span></button>
-      <button class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 p-1 rounded-sm"><span class="material-symbols-outlined text-lg">memory</span></button>
-      <button class="text-emerald-800/60 hover:text-emerald-400 transition-colors hover:bg-emerald-400/10 p-1 rounded-sm"><span class="material-symbols-outlined text-lg">speed</span></button>
-    </div>
-    <button onclick="showState('uploadSection')" class="text-emerald-400 border border-emerald-400/50 hover:bg-emerald-400/10 hover:shadow-[0_0_15px_rgba(0,255,156,0.3)] px-3 py-1 rounded-DEFAULT font-bold transition-all active:scale-95">
-      GET STARTED
-    </button>
-  </div>
-</nav>
-
-<!-- ═══════════════════════════════════════════════════════════
-     STATE 1: HERO SECTION
-════════════════════════════════════════════════════════════ -->
-<section id="heroSection" class="relative z-10 flex flex-col justify-center pt-[100px] pb-xl px-6 md:px-gutter max-w-7xl mx-auto w-full min-h-screen">
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-xl items-center min-h-[716px]">
-
-    <!-- Left: Content -->
-    <div class="flex flex-col items-start space-y-md">
-      <!-- Status badge -->
-      <div class="inline-flex items-center gap-2 bg-surface-container/40 border border-outline/30 backdrop-blur-md px-sm py-xs rounded-none shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
-        <span class="w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00ff9c] animate-pulse"></span>
-        <span class="font-label-xs text-label-xs text-on-surface-variant uppercase tracking-widest">AI-Powered Authenticity Engine</span>
-      </div>
-
-      <!-- Headline -->
-      <h1 class="font-h1 text-h1 text-on-surface drop-shadow-md">
-        Verify Reality <br class="hidden md:block"/>
-        in <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-container to-secondary-container">Real-Time</span>
-      </h1>
-
-      <!-- Subtext -->
-      <p class="font-body-base text-body-base text-on-surface-variant max-w-lg mt-sm mb-lg">
-        Deploy advanced neural networks to detect deepfakes, synthetic media, and manipulated data streams with military-grade precision. Establish an unbreakable perimeter of truth.
-      </p>
-
-      <!-- CTAs -->
-      <div class="flex flex-wrap items-center gap-md mt-sm">
-        <button onclick="showState('uploadSection')" class="group relative px-lg py-sm bg-primary-container text-on-primary font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT overflow-hidden transition-all duration-300 hover:shadow-[0_0_30px_rgba(0,255,156,0.4)] active:scale-95">
-          <span class="relative z-10 flex items-center gap-2">
-            Analyze Video
-            <span class="material-symbols-outlined text-[16px]">radar</span>
-          </span>
-          <div class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/40 to-transparent group-hover:[animation:shimmer_1s_infinite]"></div>
-        </button>
-        <button class="px-lg py-sm bg-transparent border border-surface-tint/50 text-surface-tint font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT hover:bg-surface-tint/10 hover:border-surface-tint transition-all duration-300 active:scale-95">
-          View Demo
-        </button>
-      </div>
-
-      <!-- Stats -->
-      <div class="flex items-center gap-lg mt-xl pt-lg border-t border-outline/20 w-full max-w-md">
-        <div>
-          <div class="font-data-mono text-data-mono text-primary-container">99.9%</div>
-          <div class="font-label-xs text-[10px] text-outline mt-1 uppercase">Accuracy Rate</div>
-        </div>
-        <div class="w-px h-8 bg-outline/30"></div>
-        <div>
-          <div class="font-data-mono text-data-mono text-secondary-container">&lt;15ms</div>
-          <div class="font-label-xs text-[10px] text-outline mt-1 uppercase">Latency Ping</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Right: Orb visualizer -->
-    <div class="relative w-full aspect-square max-w-lg mx-auto flex items-center justify-center lg:justify-end">
-      <div class="absolute inset-0 bg-surface-container-low/20 backdrop-blur-3xl rounded-full border border-outline/10 shadow-[inset_0_0_40px_rgba(0,0,0,0.8)] flex items-center justify-center overflow-hidden">
-        <!-- Spinning rings -->
-        <div class="absolute w-[120%] h-[120%] border border-primary-container/10 rounded-full animate-[spin_20s_linear_infinite]"></div>
-        <div class="absolute w-[100%] h-[100%] border border-secondary-container/20 rounded-full border-dashed animate-[spin_15s_linear_infinite_reverse]"></div>
-        <div class="absolute w-[80%] h-[80%] border-2 border-primary-container/5 rounded-full"></div>
-        <!-- Core orb -->
-        <div class="relative w-3/4 h-3/4 rounded-full overflow-hidden mix-blend-screen shadow-[0_0_60px_rgba(0,255,156,0.2)] bg-gradient-to-br from-primary-container/20 via-secondary-container/10 to-transparent flex items-center justify-center">
-          <span class="material-symbols-outlined text-primary-container" style="font-size:120px;opacity:0.4;font-variation-settings:'FILL' 1;">radar</span>
-          <div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div>
-        </div>
-      </div>
-      <!-- Floating HUD -->
-      <div class="absolute top-10 -left-4 bg-surface/80 backdrop-blur-md border border-outline/30 px-sm py-1 font-data-mono text-[10px] text-primary-container">SYS.OPT.OK</div>
-      <div class="absolute bottom-20 -right-4 bg-surface/80 backdrop-blur-md border border-outline/30 px-sm py-1 font-data-mono text-[10px] text-secondary-container flex items-center gap-1">
-        <span class="material-symbols-outlined text-[12px]">sync</span> LIVE
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- ═══════════════════════════════════════════════════════════
-     STATE 2: UPLOAD SECTION
-════════════════════════════════════════════════════════════ -->
-<section id="uploadSection" style="display:none;" class="relative z-10 flex flex-col items-center justify-center pt-28 pb-24 px-6 min-h-screen">
-  <div class="w-full max-w-3xl flex flex-col gap-8">
-
-    <!-- Header -->
-    <div class="text-center space-y-2">
-      <h1 class="font-h2 text-h2 text-primary-container drop-shadow-[0_0_12px_rgba(0,255,156,0.4)]">SECURE INGEST PORTAL</h1>
-      <p class="font-data-mono text-data-mono text-on-surface-variant">Awaiting encrypted payload via protocol AX-9.</p>
-    </div>
-
-    <!-- Drop zone -->
-    <div class="relative bg-surface-container/40 backdrop-blur-2xl border border-outline/20 rounded-xl overflow-hidden group hover:border-primary-container/50 transition-colors duration-500 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05),0_0_30px_rgba(0,0,0,0.5)]">
-      <div class="scan-line"></div>
-      <div id="dropZoneInner"
-           onclick="document.getElementById('fileInput').click()"
-           class="p-10 flex flex-col items-center justify-center border-2 border-dashed border-outline-variant/50 m-4 rounded-lg bg-surface-container-low/30 hover:bg-primary-container/5 hover:border-primary-container hover:shadow-[0_0_40px_rgba(0,255,156,0.1)_inset] transition-all duration-300 cursor-pointer min-h-[300px]">
-
-        <!-- Upload prompt (default) -->
-        <div id="uploadPrompt">
-          <div class="w-24 h-24 rounded-full bg-surface-variant flex items-center justify-center mb-6 shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] group-hover:bg-surface-container-highest transition-colors mx-auto">
-            <span class="material-symbols-outlined text-[48px] text-on-surface-variant group-hover:text-primary-container group-hover:drop-shadow-[0_0_12px_rgba(0,255,156,0.8)] transition-all duration-300" style="font-variation-settings:'FILL' 1;">cloud_upload</span>
-          </div>
-          <h3 class="font-h3 text-h3 text-on-surface mb-2 text-center">INITIALIZE UPLOAD</h3>
-          <p class="font-body-base text-body-base text-on-surface-variant mb-6 text-center max-w-sm">Drag and drop your video file here, or click to browse.</p>
-          <div class="flex items-center gap-2 font-label-xs text-label-xs text-outline tracking-widest justify-center">
-            <span class="w-1.5 h-1.5 rounded-full bg-outline"></span>
-            ACCEPTED: MP4 · AVI · MOV · MKV · WebM
-            <span class="w-1.5 h-1.5 rounded-full bg-outline"></span>
-          </div>
-        </div>
-
-        <!-- File chosen state (hidden until file selected) -->
-        <div id="fileChosen" style="display:none;" class="w-full flex items-center gap-5">
-          <div class="w-14 h-14 rounded-lg bg-primary-container/10 border border-primary-container/30 flex items-center justify-center flex-shrink-0 shadow-[0_0_20px_rgba(0,255,156,0.15)]">
-            <span class="material-symbols-outlined text-primary-container text-[28px]" style="font-variation-settings:'FILL' 1;">video_file</span>
-          </div>
-          <div class="flex-1 min-w-0">
-            <p id="chosenName" class="font-data-mono text-data-mono text-on-surface overflow-hidden text-ellipsis whitespace-nowrap"></p>
-            <p id="chosenSize" class="font-label-xs text-label-xs text-on-surface-variant mt-1"></p>
-          </div>
-          <button id="clearFileBtn" onclick="clearFile(event)" class="p-2 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-sm transition-all">
-            <span class="material-symbols-outlined text-[20px]">close</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Hidden file input -->
-    <input type="file" id="fileInput" accept="video/*" style="display:none;"/>
-
-    <!-- Analyze button -->
-    <button id="analyzeBtn" disabled onclick="analyzeVideo()"
-      class="w-full py-4 font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT transition-all duration-300 border border-outline/30 bg-surface-container/40 text-outline cursor-not-allowed"
-      style="pointer-events:none;">
-      <span class="flex items-center justify-center gap-2">
-        <span class="material-symbols-outlined text-[16px]">play_arrow</span>
-        INITIATE ANALYSIS
-      </span>
-    </button>
-
-    <!-- Active queue -->
-    <div class="flex flex-col gap-4">
-      <div class="flex items-center justify-between border-b border-outline/20 pb-2">
-        <h4 class="font-label-xs text-label-xs text-primary-container uppercase tracking-widest flex items-center gap-2">
-          <span class="w-2 h-2 bg-primary-container shadow-[0_0_8px_rgba(0,255,156,0.8)]"></span>
-          ACTIVE QUEUE
-        </h4>
-        <span id="queueTime" class="font-data-mono text-[10px] text-on-surface-variant">SYS_TIME: --:--:--</span>
-      </div>
-      <div id="queueList" class="grid grid-cols-1 gap-2">
-        <div class="bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-4 flex items-center gap-3 opacity-40">
-          <span class="material-symbols-outlined text-outline text-[20px]">inbox</span>
-          <span class="font-data-mono text-data-mono text-on-surface-variant">No payload queued. Awaiting upload.</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Back to hero -->
-    <div class="text-center">
-      <button onclick="showState('heroSection')" class="font-data-mono text-data-mono text-on-surface-variant hover:text-primary-container transition-colors flex items-center gap-2 mx-auto">
-        <span class="material-symbols-outlined text-[16px]">arrow_back</span>
-        Back to Command Center
-      </button>
-    </div>
-  </div>
-</section>
-
-<!-- ═══════════════════════════════════════════════════════════
-     STATE 3: PROCESSING SECTION
-════════════════════════════════════════════════════════════ -->
-<section id="processingSection" style="display:none;" class="relative z-10 flex flex-col items-center justify-center px-6 min-h-screen">
-  <div class="absolute inset-0 noise-bg z-0"></div>
-  <div class="scan-line" style="top:30%"></div>
-
-  <div class="relative z-10 container mx-auto px-6 flex flex-col items-center justify-center w-full max-w-4xl pt-24 pb-16">
-
-    <!-- Header -->
-    <div class="w-full max-w-3xl mb-xl text-center">
-      <h1 class="font-h1 text-h1 text-primary-container drop-shadow-[0_0_8px_rgba(0,255,156,0.3)] mb-sm">SYSTEM_STATE: ANALYSIS</h1>
-      <p class="font-data-mono text-data-mono text-primary-fixed-dim/70 tracking-[0.2em] uppercase">Initiating Deep Inspection Protocol</p>
-    </div>
-
-    <!-- Bento grid -->
-    <div class="w-full grid grid-cols-1 md:grid-cols-12 gap-gutter">
-
-      <!-- Left: Orb visual -->
-      <div class="md:col-span-5 glass-panel rounded-xl p-lg flex flex-col items-center justify-center relative min-h-[300px] border-outline/20">
-        <div class="absolute top-sm left-sm font-label-xs text-label-xs text-outline tracking-widest uppercase">Target Vector</div>
-        <div class="relative w-48 h-48 rounded-full border border-primary-container/30 shadow-[0_0_30px_rgba(0,255,156,0.1)] flex items-center justify-center">
-          <div class="absolute inset-2 rounded-full border border-dashed border-primary-container/40 animate-[spin_8s_linear_infinite]"></div>
-          <div class="absolute inset-6 rounded-full bg-surface-container-high shadow-inner flex items-center justify-center overflow-hidden bg-gradient-to-br from-primary-container/10 to-secondary-container/5">
-            <span class="material-symbols-outlined text-secondary-container text-[48px] opacity-50" style="font-variation-settings:'FILL' 1;">analytics</span>
-          </div>
-          <div class="absolute inset-0 rounded-full border-t-2 border-primary-container/80 blur-[2px] animate-[spin_3s_linear_infinite]"></div>
-          <span class="material-symbols-outlined absolute text-primary-container text-4xl drop-shadow-[0_0_10px_rgba(0,255,156,0.8)]">troubleshoot</span>
-        </div>
-        <div class="mt-lg text-center w-full">
-          <div class="font-data-mono text-data-mono text-on-surface-variant flex items-center justify-between w-full border-b border-outline/10 pb-xs mb-xs">
-            <span>DATA_STREAM</span>
-            <span class="text-secondary-fixed">ACTIVE</span>
-          </div>
-          <div class="font-data-mono text-data-mono text-on-surface-variant flex items-center justify-between w-full border-b border-outline/10 pb-xs">
-            <span>THROUGHPUT</span>
-            <span class="text-tertiary-container" id="throughputVal">2.4 TB/s</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Right: Pipeline steps -->
-      <div class="md:col-span-7 glass-panel rounded-xl p-lg flex flex-col justify-center gap-md border-outline/20">
-        <div class="flex justify-between items-center mb-sm">
-          <div class="font-label-xs text-label-xs text-outline tracking-widest uppercase">Processing Pipeline</div>
-          <div id="pipelinePercent" class="font-data-mono text-data-mono text-primary-container bg-primary-container/10 px-2 py-1 rounded">0% COMPLETE</div>
-        </div>
-
-        <!-- Step 0: Extract frames -->
-        <div id="step0" class="pipeline-step pending flex flex-col gap-xs">
-          <div class="flex justify-between items-center">
-            <div class="flex items-center gap-sm">
-              <span id="step0icon" class="material-symbols-outlined text-outline text-sm">hourglass_empty</span>
-              <span class="font-data-mono text-data-mono text-on-surface">Extracting frames...</span>
-            </div>
-            <span id="step0pct" class="font-data-mono text-data-mono text-outline">0%</span>
-          </div>
-          <div class="w-full h-2 bg-surface-container-highest flex gap-[2px]" id="step0bar">
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-          </div>
-        </div>
-
-        <!-- Step 1: Detect faces -->
-        <div id="step1" class="pipeline-step pending flex flex-col gap-xs">
-          <div class="flex justify-between items-center">
-            <div class="flex items-center gap-sm">
-              <span id="step1icon" class="material-symbols-outlined text-outline text-sm">hourglass_empty</span>
-              <span class="font-data-mono text-data-mono text-on-surface">Detecting faces...</span>
-            </div>
-            <span id="step1pct" class="font-data-mono text-data-mono text-outline">0%</span>
-          </div>
-          <div class="w-full h-2 bg-surface-container-highest flex gap-[2px]" id="step1bar">
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-          </div>
-        </div>
-
-        <!-- Step 2: Model inference -->
-        <div id="step2" class="pipeline-step pending flex flex-col gap-xs">
-          <div class="flex justify-between items-center">
-            <div class="flex items-center gap-sm">
-              <span id="step2icon" class="material-symbols-outlined text-outline text-sm">hourglass_empty</span>
-              <span class="font-data-mono text-data-mono text-on-surface">Running model inference...</span>
-            </div>
-            <span id="step2pct" class="font-data-mono text-data-mono text-outline">0%</span>
-          </div>
-          <div class="w-full h-2 bg-surface-container-highest flex gap-[2px]" id="step2bar">
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-          </div>
-        </div>
-
-        <!-- Step 3: Audio patterns -->
-        <div id="step3" class="pipeline-step pending flex flex-col gap-xs mt-sm">
-          <div class="flex justify-between items-center">
-            <div class="flex items-center gap-sm">
-              <span id="step3icon" class="material-symbols-outlined text-outline text-sm">hourglass_empty</span>
-              <span class="font-data-mono text-data-mono text-on-surface">Analyzing audio patterns...</span>
-            </div>
-            <span id="step3pct" class="font-data-mono text-data-mono text-outline">0%</span>
-          </div>
-          <div class="w-full h-2 bg-surface-container-highest flex gap-[2px]" id="step3bar">
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-            <div class="h-full bg-primary-container/20 flex-1"></div><div class="h-full bg-primary-container/20 flex-1"></div>
-          </div>
-        </div>
-
-        <!-- CLI feedback -->
-        <div class="mt-auto bg-surface-container-highest/50 border border-outline/10 p-sm rounded font-data-mono text-data-mono text-xs text-primary-fixed-dim/60 shadow-inner min-h-[60px]" id="cliFeedback">
-          &gt; [SYS] Initializing analysis pipeline...<br/>
-          &gt; [SYS] Loading neural weights... <span class="text-primary-container animate-pulse">_</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- ═══════════════════════════════════════════════════════════
-     STATE 4: RESULTS SECTION
-════════════════════════════════════════════════════════════ -->
-<section id="resultsSection" style="display:none;" class="relative z-10 pt-24 pb-xl px-gutter max-w-[1400px] mx-auto w-full flex flex-col gap-lg">
-
-  <!-- Cinematic banner -->
-  <div id="resultBanner" class="glass-panel glow-border-primary rounded-xl relative overflow-hidden flex flex-col md:flex-row items-center justify-between p-lg md:p-margin min-h-[280px]">
-    <div class="scanline"></div>
-    <!-- BG overlay -->
-    <div class="absolute inset-0 opacity-10 mix-blend-overlay pointer-events-none bg-gradient-to-br from-primary-container/20 via-transparent to-secondary-container/10"></div>
-
-    <div class="relative z-10 flex flex-col md:flex-row items-center gap-margin w-full">
-      <!-- Circular verdict badge -->
-      <div id="verdictBadge" class="relative w-44 h-44 rounded-full border-4 border-primary-container flex items-center justify-center shadow-[0_0_30px_rgba(0,255,156,0.4)] flex-shrink-0">
-        <div class="absolute inset-0 rounded-full border border-primary-container animate-[spin_10s_linear_infinite] opacity-50"></div>
-        <div class="absolute inset-2 rounded-full border border-dashed border-primary-container animate-[spin_15s_linear_infinite_reverse] opacity-30"></div>
-        <div class="text-center">
-          <span id="verdictIcon" class="material-symbols-outlined text-primary-container text-5xl mb-1" style="font-variation-settings:'FILL' 1;">verified_user</span>
-          <h2 id="verdictLabel" class="font-h3 text-h3 text-primary-container uppercase tracking-widest drop-shadow-[0_0_5px_rgba(0,255,156,0.8)] text-sm">AUTHENTIC</h2>
-        </div>
-      </div>
-
-      <!-- Confidence score -->
-      <div class="flex-grow text-center md:text-left flex flex-col gap-sm">
-        <p id="resultId" class="font-data-mono text-data-mono text-primary-container/80 uppercase tracking-widest">Analysis Complete // ID: ----</p>
-        <h1 class="font-h1 text-h1 text-on-surface">Confidence Score</h1>
-        <div id="confidenceScore" class="font-h1 leading-none text-primary-container drop-shadow-[0_0_15px_rgba(0,255,156,0.6)] font-black" style="font-size:80px;">--.--%</div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Main grid: insights + diagnostics -->
-  <div class="grid grid-cols-1 lg:grid-cols-12 gap-lg">
-
-    <!-- Left: Primary Vectors -->
-    <div class="lg:col-span-4 flex flex-col gap-md">
-      <h3 class="font-label-xs text-label-xs text-outline uppercase tracking-widest border-b border-surface-variant pb-2">Primary Vectors</h3>
-      <div id="insightCards" class="flex flex-col gap-md">
-        <!-- Populated by JS -->
-      </div>
-    </div>
-
-    <!-- Right: System Diagnostics -->
-    <div class="lg:col-span-8 flex flex-col gap-md">
-      <h3 class="font-label-xs text-label-xs text-outline uppercase tracking-widest border-b border-surface-variant pb-2">System Diagnostics</h3>
-      <div class="glass-panel rounded-lg flex-grow p-md font-data-mono text-data-mono text-sm relative overflow-hidden flex flex-col min-h-[280px]">
-        <div class="scanline"></div>
-        <div class="flex justify-between items-center border-b border-surface-variant/50 pb-sm mb-sm text-on-surface-variant">
-          <span>METADATA_STREAM</span>
-          <span class="text-primary-container animate-pulse">ACTIVE</span>
-        </div>
-        <div id="metaTerminal" class="flex-grow space-y-2 text-on-surface-variant overflow-y-auto pr-2">
-          <!-- Populated by JS -->
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Timeline -->
-  <div class="glass-panel rounded-xl p-lg flex flex-col gap-md">
-    <h3 class="font-label-xs text-label-xs text-outline uppercase tracking-widest border-b border-surface-variant pb-2">Probability Timeline</h3>
-    <div class="relative">
-      <!-- Grid lines -->
-      <div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20 pb-6">
-        <div class="w-full h-px bg-outline"></div>
-        <div class="w-full h-px bg-outline"></div>
-        <div class="w-full h-px bg-outline"></div>
-        <div class="w-full h-px bg-outline"></div>
-      </div>
-      <!-- Y-axis labels -->
-      <div class="absolute left-0 top-0 h-[160px] flex flex-col justify-between pointer-events-none pr-2">
-        <span class="font-data-mono text-[9px] text-outline">100%</span>
-        <span class="font-data-mono text-[9px] text-outline">75%</span>
-        <span class="font-data-mono text-[9px] text-outline">50%</span>
-        <span class="font-data-mono text-[9px] text-outline">25%</span>
-        <span class="font-data-mono text-[9px] text-outline">0%</span>
-      </div>
-      <!-- Bars container -->
-      <div id="timelineBars" class="flex items-end gap-[2px] border-b border-l border-surface-variant pl-8 relative z-10" style="height:160px;overflow:visible;">
-        <!-- Populated by JS -->
-      </div>
-    </div>
-    <div id="timelineLabels" class="flex justify-between font-data-mono text-data-mono text-xs text-outline mt-1 pl-8">
-      <!-- Populated by JS -->
-    </div>
-  </div>
-
-  <!-- Audio section (shown only when audio.available) -->
-  <div id="audioSection" style="display:none;" class="glass-panel rounded-xl p-lg flex flex-col gap-md">
-    <h3 class="font-label-xs text-label-xs text-outline uppercase tracking-widest border-b border-surface-variant pb-2 flex items-center gap-2">
-      <span class="material-symbols-outlined text-[14px]">graphic_eq</span>
-      Audio Analysis
-    </h3>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-md">
-      <!-- Audio verdict -->
-      <div class="glass-panel rounded-lg p-md flex items-center gap-md">
-        <div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center flex-shrink-0 border border-surface-variant">
-          <span id="audioIcon" class="material-symbols-outlined text-primary-container" style="font-variation-settings:'FILL' 1;">record_voice_over</span>
-        </div>
-        <div>
-          <div class="font-label-xs text-label-xs text-outline uppercase tracking-widest mb-1">Voice Classification</div>
-          <div id="audioVerdict" class="font-h3 text-h3 text-primary-container">HUMAN_VOICE</div>
-          <div id="audioConfidence" class="font-data-mono text-data-mono text-on-surface-variant mt-1">Confidence: --%</div>
-        </div>
-      </div>
-      <!-- Audio scores -->
-      <div class="glass-panel rounded-lg p-md flex flex-col gap-sm">
-        <div class="font-label-xs text-label-xs text-outline uppercase tracking-widest mb-1">Score Breakdown</div>
-        <div class="flex items-center justify-between">
-          <span class="font-data-mono text-data-mono text-on-surface-variant text-xs">Model Score</span>
-          <div class="flex items-center gap-2 flex-1 ml-4">
-            <div class="h-1 flex-grow bg-surface-container-highest rounded-full overflow-hidden">
-              <div id="audioModelBar" class="h-full bg-primary-container" style="width:0%"></div>
-            </div>
-            <span id="audioModelScore" class="font-data-mono text-data-mono text-primary-container text-xs w-10 text-right">--%</span>
-          </div>
-        </div>
-        <div class="flex items-center justify-between">
-          <span class="font-data-mono text-data-mono text-on-surface-variant text-xs">Heuristic Score</span>
-          <div class="flex items-center gap-2 flex-1 ml-4">
-            <div class="h-1 flex-grow bg-surface-container-highest rounded-full overflow-hidden">
-              <div id="audioHeuristicBar" class="h-full bg-secondary-container" style="width:0%"></div>
-            </div>
-            <span id="audioHeuristicScore" class="font-data-mono text-data-mono text-secondary-container text-xs w-10 text-right">--%</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Audio details -->
-    <div id="audioDetails" class="flex flex-col gap-2">
-      <!-- Populated by JS -->
-    </div>
-  </div>
-
-  <!-- New analysis button -->
-  <div class="text-center mt-sm">
-    <button onclick="resetAll()" class="font-data-mono text-data-mono text-error border border-error/50 px-lg py-sm rounded bg-error/5 hover:bg-error/10 hover:shadow-[0_0_15px_rgba(255,180,171,0.2)] transition-all flex items-center gap-xs mx-auto">
-      <span class="material-symbols-outlined text-sm">restart_alt</span>
-      NEW ANALYSIS
-    </button>
-  </div>
-</section>
-
-<!-- ═══════════════════════════════════════════════════════════
-     MODALS
-════════════════════════════════════════════════════════════ -->
-<style>
-  .modal-backdrop {
-    position:fixed;inset:0;z-index:200;
-    background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);
-    display:flex;align-items:center;justify-content:center;padding:24px;
-    animation:fadeIn 0.2s ease;
-  }
-  .modal-box {
-    background:#141e17;border:1px solid rgba(0,255,156,0.2);border-radius:12px;
-    width:100%;max-width:640px;max-height:80vh;overflow-y:auto;
-    box-shadow:0 0 60px rgba(0,255,156,0.1);animation:slideUp 0.25s ease;
-  }
-  @keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
-  .modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid rgba(0,255,156,0.1);}
-  .modal-body{padding:20px 24px 24px;}
-  .modal-close{background:none;border:none;cursor:pointer;color:#849587;font-size:18px;padding:4px 8px;border-radius:4px;transition:color 0.2s;font-family:inherit;}
-  .modal-close:hover{color:#ffb4ab;}
-  .agent-row{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:8px;background:rgba(35,44,37,0.3);border:1px solid rgba(0,255,156,0.08);margin-bottom:10px;}
-  .agent-icon{width:40px;height:40px;border-radius:8px;flex-shrink:0;background:rgba(0,255,156,0.08);border:1px solid rgba(0,255,156,0.2);display:flex;align-items:center;justify-content:center;font-size:18px;}
-  .log-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-family:'Space Grotesk',monospace;font-size:12px;gap:12px;}
-  .log-row:last-child{border-bottom:none;}
-  .net-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:6px;background:rgba(35,44,37,0.3);border:1px solid rgba(0,255,156,0.08);margin-bottom:8px;font-family:'Space Grotesk',monospace;font-size:12px;}
-</style>
-
-<!-- Agents Modal -->
-<div id="agentsModal" style="display:none;" class="modal-backdrop" onclick="if(event.target===this)closeModal('agentsModal')">
-  <div class="modal-box">
-    <div class="modal-header">
-      <div>
-        <div style="font-size:11px;font-weight:700;letter-spacing:0.15em;color:#00ff9c;text-transform:uppercase;">AGENT PIPELINE</div>
-        <div style="font-size:12px;color:#849587;margin-top:4px;">5 specialized AI agents run in sequence</div>
-      </div>
-      <button class="modal-close" onclick="closeModal('agentsModal')">✕</button>
-    </div>
-    <div class="modal-body">
-      <div class="agent-row">
-        <div class="agent-icon">🎬</div>
-        <div>
-          <div style="font-size:14px;font-weight:600;color:#dae5da;">Frame Analyzer Agent</div>
-          <div style="font-size:12px;color:#849587;margin-top:4px;line-height:1.5;">Extracts 40 frames uniformly across the full video using OpenCV. Uniform temporal sampling ensures coverage regardless of video length.</div>
-          <div style="margin-top:6px;font-size:10px;font-weight:700;letter-spacing:0.1em;color:rgba(0,255,156,0.5);text-transform:uppercase;">OpenCV · Uniform sampling · Max 40 frames</div>
-        </div>
-      </div>
-      <div class="agent-row">
-        <div class="agent-icon">👤</div>
-        <div>
-          <div style="font-size:14px;font-weight:600;color:#dae5da;">Face Detector Agent</div>
-          <div style="font-size:12px;color:#849587;margin-top:4px;line-height:1.5;">Detects and crops faces using MediaPipe. Applies a quality gate — blurry crops (blur &lt; 40) are discarded before model inference.</div>
-          <div style="margin-top:6px;font-size:10px;font-weight:700;letter-spacing:0.1em;color:rgba(0,255,156,0.5);text-transform:uppercase;">MediaPipe · Quality gate · 20% padding</div>
-        </div>
-      </div>
-      <div class="agent-row">
-        <div class="agent-icon">🧠</div>
-        <div>
-          <div style="font-size:14px;font-weight:600;color:#dae5da;">Decision Agent (ViT Ensemble)</div>
-          <div style="font-size:12px;color:#849587;margin-top:4px;line-height:1.5;">Runs two Vision Transformer models on each face crop. Scores aggregated with mean + median blend and adaptive thresholding based on frame consistency.</div>
-          <div style="margin-top:6px;font-size:10px;font-weight:700;letter-spacing:0.1em;color:rgba(0,255,156,0.5);text-transform:uppercase;">dima806 (99.3%) · prithivMLmods (92.1%) · Adaptive threshold</div>
-        </div>
-      </div>
-      <div class="agent-row">
-        <div class="agent-icon">🎙️</div>
-        <div>
-          <div style="font-size:14px;font-weight:600;color:#dae5da;">Audio Analysis Agent</div>
-          <div style="font-size:12px;color:#849587;margin-top:4px;line-height:1.5;">Extracts audio via moviepy, runs librosa heuristics (pitch variance, MFCC delta, spectral flatness) and Wav2Vec2 ASVspoof model. Detects AI voices and audio-visual mismatch.</div>
-          <div style="margin-top:6px;font-size:10px;font-weight:700;letter-spacing:0.1em;color:rgba(0,227,253,0.5);text-transform:uppercase;">Wav2Vec2 (92.8%) · Librosa · AV mismatch detection</div>
-        </div>
-      </div>
-      <div class="agent-row">
-        <div class="agent-icon">📊</div>
-        <div>
-          <div style="font-size:14px;font-weight:600;color:#dae5da;">Report Generator Agent</div>
-          <div style="font-size:12px;color:#849587;margin-top:4px;line-height:1.5;">Combines visual + audio scores into a final verdict. AV_MISMATCH (face-swap with dubbed audio) overrides visual REAL verdict. Generates insights and frame timeline.</div>
-          <div style="margin-top:6px;font-size:10px;font-weight:700;letter-spacing:0.1em;color:rgba(0,255,156,0.5);text-transform:uppercase;">AV mismatch · Confidence calibration · Insight generation</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Logs Modal -->
-<div id="logsModal" style="display:none;" class="modal-backdrop" onclick="if(event.target===this)closeModal('logsModal')">
-  <div class="modal-box">
-    <div class="modal-header">
-      <div>
-        <div style="font-size:11px;font-weight:700;letter-spacing:0.15em;color:#00ff9c;text-transform:uppercase;">ANALYSIS LOGS</div>
-        <div style="font-size:12px;color:#849587;margin-top:4px;">Session history (last 20 analyses)</div>
-      </div>
-      <button class="modal-close" onclick="closeModal('logsModal')">✕</button>
-    </div>
-    <div class="modal-body">
-      <div id="logsContent">
-        <div style="font-size:12px;color:#849587;text-align:center;padding:32px 0;opacity:0.5;">
-          No analyses run this session.<br/>Upload a video to begin.
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Network Modal -->
-<div id="networkModal" style="display:none;" class="modal-backdrop" onclick="if(event.target===this)closeModal('networkModal')">
-  <div class="modal-box">
-    <div class="modal-header">
-      <div>
-        <div style="font-size:11px;font-weight:700;letter-spacing:0.15em;color:#00ff9c;text-transform:uppercase;">NETWORK STATUS</div>
-        <div style="font-size:12px;color:#849587;margin-top:4px;">Model endpoints and system health</div>
-      </div>
-      <button class="modal-close" onclick="closeModal('networkModal')">✕</button>
-    </div>
-    <div class="modal-body">
-      <div id="networkContent">
-        <div style="font-size:12px;color:#849587;text-align:center;padding:24px 0;opacity:0.5;">Checking...</div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- ═══════════════════════════════════════════════════════════
-     FOOTER
-═══════════════════════════════════════���════════════════════ -->
-<footer class="relative z-10 w-full py-8 px-10 flex flex-col md:flex-row justify-between items-center opacity-80 bg-black border-t border-emerald-900/30 font-mono text-[10px] uppercase tracking-[0.2em]">
-  <div class="text-emerald-500 mb-4 md:mb-0">© 2024 AUTHRIX COMMAND. SYSTEM_STATE: VIGILANT</div>
-  <div class="flex items-center gap-md">
-    <a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Kernel</a>
-    <a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Protocol</a>
-    <a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Override</a>
-    <a class="text-emerald-900 hover:text-emerald-300 transition-all cursor-crosshair" href="#">Diagnostics</a>
-  </div>
-</footer>
-
-<!-- ═══════════════════════════════════════════════════════════
-     JAVASCRIPT
-════════════════════════════════════════════════════════════ -->
-<script>
-// ── API base ─────────────────────────────────────────────────────────────────
-const API_BASE = (window.location.protocol === 'file:')
-  ? 'http://localhost:8000'
-  : window.location.origin;
-
-let selectedFile = null;
-let pipelineTimers = [];
-
-// ── Init ──────────────────────────────────────────────────────────────────────
-window.addEventListener('load', () => {
-  pingHealth();
-  initUpload();
-  startQueueClock();
-});
-
-// ── Health check ──────────────────────────────────────────────────────────────
-async function pingHealth() {
-  const badge = document.getElementById('healthBadge');
-  const dot   = document.getElementById('healthDot');
-  const text  = document.getElementById('healthText');
-  badge.style.display = 'flex';
-  try {
-    const res  = await fetch(API_BASE + '/health');
-    const data = await res.json();
-    if (data.ready) {
-      dot.className  = 'w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00ff9c] animate-pulse';
-      text.textContent = data.model ? data.model.toUpperCase().slice(0, 20) : 'READY';
-      text.className = 'font-label-xs text-label-xs text-primary-container';
-    } else {
-      dot.className  = 'w-2 h-2 rounded-full bg-tertiary-container animate-pulse';
-      text.textContent = 'LOADING';
-      text.className = 'font-label-xs text-label-xs text-tertiary-container';
-    }
-  } catch {
-    dot.className  = 'w-2 h-2 rounded-full bg-error';
-    text.textContent = 'OFFLINE';
-    text.className = 'font-label-xs text-label-xs text-error';
-  }
-}
-
-// ── Show/hide states ──────────────────────────────────────────────────────────
-function showState(id) {
-  ['heroSection', 'uploadSection', 'processingSection', 'resultsSection'].forEach(s => {
-    const el = document.getElementById(s);
-    if (el) el.style.display = (s === id) ? '' : 'none';
-  });
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-}
-
-// ── Queue clock ───────────────────────────────────────────────────────────────
-function startQueueClock() {
-  function tick() {
-    const el = document.getElementById('queueTime');
-    if (el) {
-      const now = new Date();
-      const hh  = String(now.getHours()).padStart(2, '0');
-      const mm  = String(now.getMinutes()).padStart(2, '0');
-      const ss  = String(now.getSeconds()).padStart(2, '0');
-      el.textContent = `SYS_TIME: ${hh}:${mm}:${ss}`;
-    }
-  }
-  tick();
-  setInterval(tick, 1000);
-}
-
-// ── Upload init ───────────────────────────────────────────────────────────────
-function initUpload() {
-  const zone  = document.getElementById('dropZoneInner');
-  const input = document.getElementById('fileInput');
-
-  // Drag events
-  zone.addEventListener('dragover', e => {
-    e.preventDefault();
-    zone.classList.add('drag-over');
-  });
-  zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
-  zone.addEventListener('drop', e => {
-    e.preventDefault();
-    zone.classList.remove('drag-over');
-    const file = e.dataTransfer.files[0];
-    if (file) applyFile(file);
-  });
-
-  // File input change
-  input.addEventListener('change', () => {
-    if (input.files[0]) applyFile(input.files[0]);
-  });
-}
-
-// ── Apply selected file ───────────────────────────────────────────────────────
-function applyFile(file) {
-  selectedFile = file;
-
-  // Show file info in drop zone
-  document.getElementById('uploadPrompt').style.display = 'none';
-  document.getElementById('fileChosen').style.display   = 'flex';
-  document.getElementById('chosenName').textContent = file.name;
-  document.getElementById('chosenSize').textContent = formatBytes(file.size);
-
-  // Enable analyze button
-  const btn = document.getElementById('analyzeBtn');
-  btn.disabled = false;
-  btn.style.pointerEvents = '';
-  btn.className = 'w-full py-4 font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT transition-all duration-300 bg-primary-container text-on-primary cursor-pointer hover:shadow-[0_0_30px_rgba(0,255,156,0.4)] active:scale-95';
-
-  // Update queue
-  updateQueue(file);
-}
-
-// ── Clear file ────────────────────────────────────────────────────────────────
-function clearFile(e) {
-  e.stopPropagation();
-  selectedFile = null;
-  document.getElementById('fileInput').value = '';
-  document.getElementById('uploadPrompt').style.display = '';
-  document.getElementById('fileChosen').style.display   = 'none';
-
-  const btn = document.getElementById('analyzeBtn');
-  btn.disabled = true;
-  btn.style.pointerEvents = 'none';
-  btn.className = 'w-full py-4 font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT transition-all duration-300 border border-outline/30 bg-surface-container/40 text-outline cursor-not-allowed';
-
-  // Reset queue
-  document.getElementById('queueList').innerHTML = `
-    <div class="bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-4 flex items-center gap-3 opacity-40">
-      <span class="material-symbols-outlined text-outline text-[20px]">inbox</span>
-      <span class="font-data-mono text-data-mono text-on-surface-variant">No payload queued. Awaiting upload.</span>
-    </div>`;
-}
-
-// ── Update queue display ──────────────────────────────────────────────────────
-function updateQueue(file) {
-  document.getElementById('queueList').innerHTML = `
-    <div class="bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-4 flex flex-col gap-3 relative overflow-hidden">
-      <div class="absolute bottom-0 left-0 h-[1px] bg-primary-container w-full shadow-[0_0_5px_rgba(0,255,156,0.8)]"></div>
-      <div class="flex justify-between items-start">
-        <div class="flex items-center gap-3">
-          <span class="material-symbols-outlined text-primary-container text-[20px]" style="font-variation-settings:'FILL' 1;">video_file</span>
-          <div>
-            <div class="font-data-mono text-data-mono text-on-surface">${escHtml(file.name)}</div>
-            <div class="font-label-xs text-[10px] text-on-surface-variant mt-1">${formatBytes(file.size)}</div>
-          </div>
-        </div>
-        <span class="font-label-xs text-[10px] border border-primary-container/50 text-primary-container px-2 py-1 bg-primary-container/10">READY</span>
-      </div>
-    </div>`;
-}
-
-// ── Analyze video ─────────────────────────────────────────────────────────────
-async function analyzeVideo() {
-  if (!selectedFile) return;
-
-  showState('processingSection');
-  resetPipeline();
-  startPipelineAnimation();
-
-  const fd = new FormData();
-  fd.append('file', selectedFile);
-
-  try {
-    const res = await fetch(API_BASE + '/analyze', { method: 'POST', body: fd });
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({ detail: res.statusText }));
-      throw new Error(err.detail || `HTTP ${res.status}`);
-    }
-    const data = await res.json();
-    stopPipelineAnimation();
-    logAnalysis(data, selectedFile?.name);
-    renderResults(data);
-    showState('resultsSection');
-  } catch (err) {
-    stopPipelineAnimation();
-    showState('uploadSection');
-    alert('Analysis failed: ' + err.message);
-  }
-}
-
-// ── Pipeline animation ────────────────────────────────────────────────────────
-const STEP_ICONS   = ['filter_frames', 'face', 'memory', 'graphic_eq'];
-const STEP_DELAYS  = [0, 1800, 3600, 5400];
-const STEP_PERCENTS = [25, 50, 75, 100];
-const CLI_MSGS = [
-  ['> [SYS] Decoding video container...', '> [SYS] Sampling keyframes... OK'],
-  ['> [DET] Loading face detector...', '> [DET] Scanning for facial regions... OK'],
-  ['> [INF] Allocating tensor buffers...', '> [INF] Running ViT ensemble inference...', '> [INF] Batch processing... <span class="text-primary-container animate-pulse">_</span>'],
-  ['> [AUD] Extracting audio track...', '> [AUD] Computing spectral features...', '> [AUD] Classifying voice patterns... <span class="text-primary-container animate-pulse">_</span>'],
-];
-
-function resetPipeline() {
-  for (let i = 0; i < 4; i++) {
-    const step = document.getElementById('step' + i);
-    step.className = 'pipeline-step pending flex flex-col gap-xs' + (i === 3 ? ' mt-sm' : '');
-    document.getElementById('step' + i + 'icon').className = 'material-symbols-outlined text-outline text-sm';
-    document.getElementById('step' + i + 'icon').textContent = 'hourglass_empty';
-    document.getElementById('step' + i + 'pct').textContent = '0%';
-    document.getElementById('step' + i + 'pct').className = 'font-data-mono text-data-mono text-outline';
-    setBarFill(i, 0);
-  }
-  document.getElementById('pipelinePercent').textContent = '0% COMPLETE';
-  document.getElementById('cliFeedback').innerHTML =
-    '> [SYS] Initializing analysis pipeline...<br/>> [SYS] Loading neural weights... <span class="text-primary-container animate-pulse">_</span>';
-}
-
-function startPipelineAnimation() {
-  pipelineTimers = [];
-  for (let i = 0; i < 4; i++) {
-    const t = setTimeout(() => activateStep(i), STEP_DELAYS[i]);
-    pipelineTimers.push(t);
-  }
-}
-
-function stopPipelineAnimation() {
-  pipelineTimers.forEach(t => clearTimeout(t));
-  pipelineTimers = [];
-  // Mark all done
-  for (let i = 0; i < 4; i++) completeStep(i);
-  document.getElementById('pipelinePercent').textContent = '100% COMPLETE';
-}
-
-function activateStep(idx) {
-  // Mark previous as done
-  if (idx > 0) completeStep(idx - 1);
-
-  const step = document.getElementById('step' + idx);
-  step.className = 'pipeline-step active flex flex-col gap-xs glow-border-active bg-primary-container/5 p-sm -mx-sm rounded-lg' + (idx === 3 ? ' mt-sm' : '');
-
-  const icon = document.getElementById('step' + idx + 'icon');
-  icon.className = 'material-symbols-outlined text-primary-container text-sm animate-pulse';
-  icon.textContent = STEP_ICONS[idx];
-
-  const pct = document.getElementById('step' + idx + 'pct');
-  pct.className = 'font-data-mono text-data-mono text-primary-container';
-
-  // Animate progress bar fill
-  animateBarFill(idx, 0, 80, 1600);
-
-  // Update percent display
-  document.getElementById('pipelinePercent').textContent = STEP_PERCENTS[idx] + '% COMPLETE';
-
-  // CLI messages
-  const cli = document.getElementById('cliFeedback');
-  const msgs = CLI_MSGS[idx];
-  let html = '';
-  msgs.forEach((m, mi) => {
-    setTimeout(() => {
-      html += (html ? '<br/>' : '') + m;
-      cli.innerHTML = html;
-    }, mi * 500);
-  });
-}
-
-function completeStep(idx) {
-  const step = document.getElementById('step' + idx);
-  step.className = 'pipeline-step done flex flex-col gap-xs' + (idx === 3 ? ' mt-sm' : '');
-
-  const icon = document.getElementById('step' + idx + 'icon');
-  icon.className = 'material-symbols-outlined text-outline text-sm';
-  icon.textContent = 'check_circle';
-
-  const pct = document.getElementById('step' + idx + 'pct');
-  pct.textContent = '100%';
-  pct.className = 'font-data-mono text-data-mono text-outline';
-
-  setBarFill(idx, 100);
-}
-
-function setBarFill(idx, pct) {
-  const bar = document.getElementById('step' + idx + 'bar');
-  if (!bar) return;
-  const segments = bar.children;
-  const filled = Math.round((pct / 100) * segments.length);
-  for (let i = 0; i < segments.length; i++) {
-    if (i < filled) {
-      segments[i].className = 'h-full bg-primary-container/80 flex-1 shadow-[0_0_8px_rgba(0,255,156,0.5)]';
-    } else {
-      segments[i].className = 'h-full bg-primary-container/20 flex-1';
-    }
-  }
-  document.getElementById('step' + idx + 'pct').textContent = pct + '%';
-}
-
-function animateBarFill(idx, from, to, duration) {
-  const start = performance.now();
-  function frame(now) {
-    const elapsed = now - start;
-    const progress = Math.min(elapsed / duration, 1);
-    const current = from + (to - from) * progress;
-    setBarFill(idx, Math.round(current));
-    if (progress < 1) requestAnimationFrame(frame);
-  }
-  requestAnimationFrame(frame);
-}
-
-// ── Render results ────────────────────────────────────────────────────────────
-function renderResults(data) {
-  const isFake = data.result === 'FAKE';
-  const conf   = typeof data.confidence === 'number' ? data.confidence : 0;
-
-  // Banner colors
-  const banner = document.getElementById('resultBanner');
-  banner.className = banner.className.replace(/glow-border-\w+/g, '');
-  banner.classList.add(isFake ? 'glow-border-error' : 'glow-border-primary');
-
-  // Verdict badge
-  const badge = document.getElementById('verdictBadge');
-  if (isFake) {
-    badge.style.borderColor = '#ffb4ab';
-    badge.style.boxShadow   = '0 0 30px rgba(255,180,171,0.4)';
-  } else {
-    badge.style.borderColor = '#00ff9c';
-    badge.style.boxShadow   = '0 0 30px rgba(0,255,156,0.4)';
-  }
-
-  const verdictIcon  = document.getElementById('verdictIcon');
-  const verdictLabel = document.getElementById('verdictLabel');
-  if (isFake) {
-    verdictIcon.textContent  = 'gpp_bad';
-    verdictIcon.style.color  = '#ffb4ab';
-    verdictLabel.textContent = 'DEEPFAKE';
-    verdictLabel.style.color = '#ffb4ab';
-  } else {
-    verdictIcon.textContent  = 'verified_user';
-    verdictIcon.style.color  = '#00ff9c';
-    verdictLabel.textContent = 'AUTHENTIC';
-    verdictLabel.style.color = '#00ff9c';
-  }
-
-  // Confidence
-  const confEl = document.getElementById('confidenceScore');
-  confEl.textContent = conf.toFixed(1) + '%';
-  confEl.style.color = isFake ? '#ffb4ab' : '#00ff9c';
-  confEl.style.textShadow = isFake
-    ? '0 0 15px rgba(255,180,171,0.6)'
-    : '0 0 15px rgba(0,255,156,0.6)';
-
-  // Result ID
-  document.getElementById('resultId').textContent =
-    `Analysis Complete // ID: ${Math.random().toString(36).slice(2,10).toUpperCase()}`;
-
-  // Insight cards
-  renderInsightCards(data.details || [], isFake, conf);
-
-  // Metadata terminal
-  renderMetaTerminal(data);
-
-  // Timeline
-  renderTimeline(data.frame_timeline || []);
-
-  // Audio
-  if (data.audio && data.audio.available) {
-    renderAudio(data.audio);
-    document.getElementById('audioSection').style.display = '';
-  } else {
-    document.getElementById('audioSection').style.display = 'none';
-  }
-}
-
-// ── Insight cards ─────────────────────────────────────────────────────────────
-const INSIGHT_ICONS = ['face', 'visibility', 'graphic_eq', 'blur_on', 'analytics'];
-
-function renderInsightCards(details, isFake, conf) {
-  const container = document.getElementById('insightCards');
-  if (!details.length) {
-    details = ['No detailed analysis available.'];
-  }
-  // Show up to 3 cards
-  const shown = details.slice(0, 3);
-  container.innerHTML = shown.map((detail, i) => {
-    const icon  = INSIGHT_ICONS[i % INSIGHT_ICONS.length];
-    // Derive a pseudo-score from confidence + variation
-    const score = Math.max(5, Math.min(99, conf + (i === 0 ? 0 : (i === 1 ? -8 : 12)) + (Math.random() * 6 - 3)));
-    const isRed = isFake && i === 0;
-    const barColor = isRed ? 'bg-error' : 'bg-primary-container';
-    const textColor = isRed ? 'text-error' : 'text-primary-container';
-    const borderHover = isRed ? 'hover:glow-border-error' : 'hover:glow-border-primary';
-    return `
-      <div class="glass-panel rounded-lg p-md flex items-start gap-md ${borderHover} transition-all duration-300 transform hover:-translate-y-1">
-        <div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center flex-shrink-0 border border-surface-variant">
-          <span class="material-symbols-outlined ${textColor}" style="font-variation-settings:'FILL' 0;">${icon}</span>
-        </div>
-        <div class="flex-1 min-w-0">
-          <h4 class="font-body-base text-body-base font-semibold text-on-surface">Vector ${i + 1}</h4>
-          <p class="font-data-mono text-data-mono text-on-surface-variant mt-1 text-sm leading-relaxed">${escHtml(detail)}</p>
-          <div class="mt-3 flex items-center gap-2">
-            <div class="h-1 flex-grow bg-surface-container-highest rounded-full overflow-hidden">
-              <div class="h-full ${barColor}" style="width:${score.toFixed(0)}%"></div>
-            </div>
-            <span class="font-data-mono text-data-mono ${textColor} text-xs">${score.toFixed(0)}%</span>
-          </div>
-        </div>
-      </div>`;
-  }).join('');
-}
-
-// ── Metadata terminal ─────────────────────────────────────────────────────────
-function renderMetaTerminal(data) {
-  const meta = data.metadata || {};
-  const rows = [
-    ['RESULT',           data.result || '--'],
-    ['FRAMES_ANALYZED',  meta.frames_analyzed ?? '--'],
-    ['FACES_DETECTED',   meta.frames_with_faces ?? '--'],
-    ['DURATION',         meta.video_duration_sec != null ? meta.video_duration_sec.toFixed(1) + 's' : '--'],
-    ['FPS',              meta.video_fps ?? '--'],
-    ['RESOLUTION',       meta.resolution || '--'],
-    ['PROC_TIME',        data.processing_time_sec != null ? data.processing_time_sec.toFixed(2) + 's' : '--'],
-  ];
-
-  const html = rows.map(([k, v]) => `
-    <div class="flex items-baseline gap-0">
-      <span class="text-outline shrink-0" style="width:11rem;min-width:11rem;">${k}:</span>
-      <span class="text-on-surface font-semibold">${escHtml(String(v))}</span>
-    </div>`).join('') + `
-    <div class="my-3 border-t border-surface-variant/30 border-dashed"></div>
-    <div class="text-primary-container opacity-80">&gt; INIT NEURAL_NET_V4.2</div>
-    <div class="text-primary-container opacity-80">&gt; LOADING WEIGHTS... DONE</div>
-    <div class="text-primary-container opacity-80">&gt; ANALYZING SPATIAL_TEMPORAL_NOISE</div>
-    <div class="text-primary-container opacity-80">&gt; EXTRACTING BIOMETRIC_FEATURES</div>
-    <div class="text-primary-container opacity-80">&gt; CROSS_REFERENCING KNOWN_GAN_MODELS</div>
-    <div class="text-on-surface mt-3 blinking-cursor">&gt; ANALYSIS_COMPLETE</div>`;
-
-  document.getElementById('metaTerminal').innerHTML = html;
-}
-
-// ── Timeline ──────────────────────────────────────────────────────────────────
-function renderTimeline(frames) {
-  const container = document.getElementById('timelineBars');
-  const labels    = document.getElementById('timelineLabels');
-
-  if (!frames || !frames.length) {
-    container.innerHTML = '<div class="flex-1 flex items-center justify-center text-on-surface-variant font-data-mono text-data-mono text-xs">No timeline data available</div>';
-    labels.innerHTML = '';
-    return;
-  }
-
-  // Limit to 60 bars max for readability
-  const step   = Math.max(1, Math.floor(frames.length / 60));
-  const subset = frames.filter((_, i) => i % step === 0);
-  const maxH   = 140; // px
-
-  container.innerHTML = subset.map(f => {
-    const pct       = typeof f.fake_pct === 'number' ? f.fake_pct : 0;
-    const barH      = Math.max(3, Math.round((pct / 100) * maxH));  // px, not %
-    const isHigh    = pct >= 60;
-    const barBg     = isHigh ? '#ffb4ab' : '#00ff9c';
-    const barGlow   = isHigh
-      ? 'box-shadow:0 0 8px rgba(255,180,171,0.6);'
-      : 'box-shadow:0 0 6px rgba(0,255,156,0.4);';
-    const tipLabel  = isHigh ? `⚠ ${pct.toFixed(1)}%` : `✓ ${pct.toFixed(1)}%`;
-    const tipBorder = isHigh ? '#ffb4ab' : '#00ff9c';
-    return `
-      <div class="tl-bar" style="height:${maxH}px;position:relative;flex:1;min-width:6px;max-width:20px;">
-        <div class="tl-tooltip" style="border-color:${tipBorder};">${tipLabel}</div>
-        <div style="position:absolute;bottom:0;left:1px;right:1px;height:${barH}px;background:${barBg};${barGlow}border-radius:2px 2px 0 0;"></div>
-      </div>`;
-  }).join('');
-
-  // Labels
-  const first = frames[0].frame;
-  const last  = frames[frames.length - 1].frame;
-  const mid   = frames[Math.floor(frames.length / 2)].frame;
-  labels.innerHTML = `<span>Frame ${first}</span><span>Frame ${mid}</span><span>Frame ${last}</span>`;
-}
-
-// ── Audio section ─────────────────────────────────────────────────────────────
-function renderAudio(audio) {
-  const isAI       = audio.result === 'AI_VOICE';
-  const isMismatch = audio.result === 'AV_MISMATCH';
-  const isFakeAudio = isAI || isMismatch;   // both mean FAKE
-  const color       = isFakeAudio ? '#ffb4ab' : '#00ff9c';
-
-  const icon = document.getElementById('audioIcon');
-  icon.textContent = isFakeAudio ? 'gpp_bad' : 'record_voice_over';
-  icon.style.color = color;
-
-  const verdict = document.getElementById('audioVerdict');
-  verdict.textContent = isMismatch ? 'DEEPFAKE (AV MISMATCH)' : (isAI ? 'AI_VOICE' : 'HUMAN_VOICE');
-  verdict.style.color = color;
-
-  document.getElementById('audioConfidence').textContent =
-    isMismatch
-      ? 'Face-swap: voice is human but face is manipulated'
-      : `Confidence: ${typeof audio.confidence === 'number' ? audio.confidence.toFixed(1) + '%' : '--'}`;
-
-  const modelScore = typeof audio.model_score === 'number' ? audio.model_score : 0;
-  const heurScore  = typeof audio.heuristic_score === 'number' ? audio.heuristic_score : 0;
-
-  document.getElementById('audioModelBar').style.width     = modelScore + '%';
-  document.getElementById('audioModelScore').textContent   = modelScore.toFixed(1) + '%';
-  document.getElementById('audioHeuristicBar').style.width = heurScore + '%';
-  document.getElementById('audioHeuristicScore').textContent = heurScore.toFixed(1) + '%';
-
-  // Audio details — highlight mismatch details in yellow
-  const detailsEl = document.getElementById('audioDetails');
-  if (audio.details && audio.details.length) {
-    detailsEl.innerHTML = audio.details.map(d => `
-      <div class="flex items-start gap-3 p-3 bg-surface-container-low/50 border border-outline-variant/30 rounded-DEFAULT"
-           style="${isFakeAudio ? 'border-color:rgba(255,180,171,0.3);background:rgba(255,180,171,0.04);' : ''}">
-        <span class="material-symbols-outlined text-[16px] mt-0.5" style="color:${color};">chevron_right</span>
-        <span class="font-data-mono text-data-mono text-sm" style="color:#b9cbbc;">${escHtml(d)}</span>
-      </div>`).join('');
-  } else {
-    detailsEl.innerHTML = '';
-  }
-}
-
-// ── Reset ─────────────────────────────────────────────────────────────────────
-function resetAll() {
-  selectedFile = null;
-  document.getElementById('fileInput').value = '';
-  document.getElementById('uploadPrompt').style.display = '';
-  document.getElementById('fileChosen').style.display   = 'none';
-
-  const btn = document.getElementById('analyzeBtn');
-  btn.disabled = true;
-  btn.style.pointerEvents = 'none';
-  btn.className = 'w-full py-4 font-label-xs text-label-xs uppercase tracking-wider rounded-DEFAULT transition-all duration-300 border border-outline/30 bg-surface-container/40 text-outline cursor-not-allowed';
-
-  document.getElementById('queueList').innerHTML = `
-    <div class="bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-4 flex items-center gap-3 opacity-40">
-      <span class="material-symbols-outlined text-outline text-[20px]">inbox</span>
-      <span class="font-data-mono text-data-mono text-on-surface-variant">No payload queued. Awaiting upload.</span>
-    </div>`;
-
-  showState('heroSection');
-}
-
-// ── Utilities ─────────────────────────────────────────────────────────────────
-function formatBytes(bytes) {
-  if (bytes < 1024)        return bytes + ' B';
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-}
-
-function escHtml(str) {
-  return String(str)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-// ── Modal helpers ─────────────────────────────────────────────────────────────
-function openModal(id) {
-  const el = document.getElementById(id);
-  if (!el) return;
-  el.style.display = 'flex';
-  if (id === 'networkModal') refreshNetworkModal();
-  if (id === 'logsModal')    refreshLogsModal();
-}
-function closeModal(id) {
-  const el = document.getElementById(id);
-  if (el) el.style.display = 'none';
-}
-// Close on Escape
-document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') {
-    ['agentsModal','logsModal','networkModal'].forEach(closeModal);
-  }
-});
-
-// ── Logs modal ────────────────────────────────────────────────────────────────
-const _sessionLogs = [];
-
-function logAnalysis(data, filename) {
-  _sessionLogs.unshift({
-    ts:         new Date().toLocaleTimeString(),
-    file:       filename || 'unknown',
-    result:     data.result,
-    confidence: data.confidence,
-    duration:   data.metadata?.video_duration_sec ?? '—',
-    procTime:   data.processing_time_sec ?? '—',
-  });
-  if (_sessionLogs.length > 20) _sessionLogs.pop();
-}
-
-function refreshLogsModal() {
-  const el = document.getElementById('logsContent');
-  if (!_sessionLogs.length) {
-    el.innerHTML = `<div class="font-data-mono text-data-mono text-on-surface-variant text-xs text-center py-8 opacity-50">
-      No analyses run this session.<br/>Upload a video to begin.</div>`;
-    return;
-  }
-  el.innerHTML = _sessionLogs.map(log => {
-    const isFake = log.result === 'FAKE';
-    const color  = isFake ? '#ffb4ab' : '#00ff9c';
-    return `
-      <div class="log-row">
-        <div style="display:flex;align-items:center;gap:10px;flex:1;min-width:0;">
-          <span class="material-symbols-outlined text-[14px]" style="color:${color};flex-shrink:0;">${isFake ? 'gpp_bad' : 'verified_user'}</span>
-          <span style="color:#dae5da;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;">${escHtml(log.file)}</span>
-        </div>
-        <div style="display:flex;align-items:center;gap:16px;flex-shrink:0;">
-          <span style="color:${color};font-weight:700;">${log.result}</span>
-          <span style="color:#849587;">${log.confidence}%</span>
-          <span style="color:#849587;font-size:11px;">${log.ts}</span>
-        </div>
-      </div>`;
-  }).join('');
-}
-
-// ── Network modal ─────────────────────────────────────────────────────────────
-async function refreshNetworkModal() {
-  const el = document.getElementById('networkContent');
-  el.innerHTML = `<div class="font-data-mono text-data-mono text-on-surface-variant text-xs text-center py-6 opacity-50">Checking...</div>`;
-
-  let health = null;
-  try {
-    const r = await fetch(API_BASE + '/health');
-    health = await r.json();
-  } catch (_) {}
-
-  const rows = [
-    { label: 'API Server',          value: health ? 'ONLINE' : 'OFFLINE',         ok: !!health },
-    { label: 'Visual Models',       value: health?.model ?? '—',                   ok: health?.ready },
-    { label: 'dima806 ViT (99.3%)', value: health?.ready ? 'LOADED' : 'PENDING',  ok: health?.ready },
-    { label: 'prithivMLmods ViT',   value: health?.ready ? 'LOADED' : 'PENDING',  ok: health?.ready },
-    { label: 'Audio Wav2Vec2',      value: health?.ready ? 'LOADED' : 'PENDING',  ok: health?.ready },
-    { label: 'Inference Mode',      value: 'LOCAL (CPU)',                           ok: true },
-    { label: 'Endpoint',            value: API_BASE,                               ok: true },
-  ];
-
-  el.innerHTML = rows.map(r => `
-    <div class="net-row">
-      <span style="color:#849587;letter-spacing:0.08em;">${r.label}</span>
-      <span style="color:${r.ok ? '#00ff9c' : '#ffb4ab'};font-weight:700;">${escHtml(String(r.value))}</span>
-    </div>`).join('') +
-    `<div style="margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05);">
-      <button onclick="refreshNetworkModal()" style="background:none;border:1px solid rgba(0,255,156,0.3);color:#00ff9c;padding:6px 14px;border-radius:4px;font-family:inherit;font-size:11px;letter-spacing:0.1em;cursor:pointer;transition:all 0.2s;" onmouseover="this.style.background='rgba(0,255,156,0.08)'" onmouseout="this.style.background='none'">
-        ↻ REFRESH
-      </button>
-    </div>`;
-}
-</script>
-</body>
-</html>

frontend-vanilla/pricing.html

@@ -1,470 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Authrix Pricing - AI-Powered Deepfake Detection</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: linear-gradient(135deg, #0a1f0f 0%, #0c150f 100%);
-      color: #dae5da;
-      min-height: 100vh;
-      padding: 40px 20px;
-    }
-    
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-    
-    /* Header */
-    .header {
-      text-align: center;
-      margin-bottom: 60px;
-    }
-    
-    .logo {
-      display: inline-flex;
-      align-items: center;
-      gap: 12px;
-      font-size: 28px;
-      font-weight: 700;
-      letter-spacing: 0.12em;
-      color: #00ff9c;
-      text-shadow: 0 0 20px rgba(0,255,156,0.4);
-      margin-bottom: 20px;
-    }
-    
-    .logo-dot {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: #00ff9c;
-      box-shadow: 0 0 16px #00ff9c;
-      animation: pulse 2s ease-in-out infinite;
-    }
-    
-    @keyframes pulse {
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50% { opacity: 0.6; transform: scale(0.9); }
-    }
-    
-    h1 {
-      font-size: 48px;
-      margin-bottom: 16px;
-      background: linear-gradient(135deg, #00ff9c, #00cc6a);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    
-    .subtitle {
-      font-size: 20px;
-      color: rgba(255,255,255,0.6);
-      max-width: 600px;
-      margin: 0 auto;
-    }
-    
-    /* Pricing Cards */
-    .pricing-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 30px;
-      margin-bottom: 60px;
-    }
-    
-    .pricing-card {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(255,255,255,0.1);
-      border-radius: 16px;
-      padding: 40px 30px;
-      position: relative;
-      transition: all 0.3s ease;
-    }
-    
-    .pricing-card:hover {
-      transform: translateY(-8px);
-      border-color: rgba(0,255,156,0.3);
-      box-shadow: 0 20px 60px rgba(0,255,156,0.1);
-    }
-    
-    .pricing-card.popular {
-      border-color: #00ff9c;
-      box-shadow: 0 0 40px rgba(0,255,156,0.2);
-    }
-    
-    .popular-badge {
-      position: absolute;
-      top: -12px;
-      right: 30px;
-      background: linear-gradient(135deg, #00ff9c, #00cc6a);
-      color: #002110;
-      padding: 6px 16px;
-      border-radius: 20px;
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-    }
-    
-    .plan-name {
-      font-size: 24px;
-      font-weight: 700;
-      margin-bottom: 12px;
-      color: #00ff9c;
-    }
-    
-    .plan-price {
-      font-size: 48px;
-      font-weight: 700;
-      margin-bottom: 8px;
-      font-family: monospace;
-    }
-    
-    .plan-price span {
-      font-size: 18px;
-      color: rgba(255,255,255,0.5);
-    }
-    
-    .plan-interval {
-      font-size: 14px;
-      color: rgba(255,255,255,0.4);
-      margin-bottom: 24px;
-    }
-    
-    .plan-features {
-      list-style: none;
-      margin-bottom: 30px;
-    }
-    
-    .plan-features li {
-      padding: 12px 0;
-      border-bottom: 1px solid rgba(255,255,255,0.05);
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      font-size: 14px;
-    }
-    
-    .plan-features li:last-child {
-      border-bottom: none;
-    }
-    
-    .check {
-      color: #00ff9c;
-      font-size: 18px;
-    }
-    
-    .cta-button {
-      width: 100%;
-      padding: 16px;
-      border: none;
-      border-radius: 10px;
-      font-size: 16px;
-      font-weight: 700;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      letter-spacing: 0.06em;
-    }
-    
-    .cta-button.primary {
-      background: linear-gradient(135deg, #00ff9c, #00cc6a);
-      color: #002110;
-      box-shadow: 0 8px 24px rgba(0,255,156,0.3);
-    }
-    
-    .cta-button.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 12px 32px rgba(0,255,156,0.4);
-    }
-    
-    .cta-button.secondary {
-      background: rgba(255,255,255,0.05);
-      color: #00ff9c;
-      border: 1px solid rgba(0,255,156,0.3);
-    }
-    
-    .cta-button.secondary:hover {
-      background: rgba(0,255,156,0.1);
-    }
-    
-    /* Enterprise Section */
-    .enterprise-section {
-      background: rgba(0,255,156,0.05);
-      border: 1px solid rgba(0,255,156,0.2);
-      border-radius: 16px;
-      padding: 50px;
-      text-align: center;
-      margin-bottom: 60px;
-    }
-    
-    .enterprise-section h2 {
-      font-size: 36px;
-      margin-bottom: 16px;
-      color: #00ff9c;
-    }
-    
-    .enterprise-section p {
-      font-size: 18px;
-      color: rgba(255,255,255,0.6);
-      margin-bottom: 30px;
-      max-width: 700px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-    
-    .enterprise-features {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 20px;
-      margin-bottom: 40px;
-    }
-    
-    .enterprise-feature {
-      background: rgba(255,255,255,0.03);
-      padding: 20px;
-      border-radius: 10px;
-      border: 1px solid rgba(255,255,255,0.1);
-    }
-    
-    .enterprise-feature h3 {
-      font-size: 18px;
-      margin-bottom: 8px;
-      color: #00ff9c;
-    }
-    
-    .enterprise-feature p {
-      font-size: 14px;
-      color: rgba(255,255,255,0.5);
-      margin: 0;
-    }
-    
-    /* FAQ */
-    .faq-section {
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    .faq-section h2 {
-      text-align: center;
-      font-size: 36px;
-      margin-bottom: 40px;
-      color: #00ff9c;
-    }
-    
-    .faq-item {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(255,255,255,0.1);
-      border-radius: 10px;
-      padding: 24px;
-      margin-bottom: 16px;
-    }
-    
-    .faq-question {
-      font-size: 18px;
-      font-weight: 600;
-      margin-bottom: 12px;
-      color: #00ff9c;
-    }
-    
-    .faq-answer {
-      font-size: 15px;
-      line-height: 1.6;
-      color: rgba(255,255,255,0.6);
-    }
-    
-    /* Footer */
-    .footer {
-      text-align: center;
-      margin-top: 80px;
-      padding-top: 40px;
-      border-top: 1px solid rgba(255,255,255,0.1);
-    }
-    
-    .footer-links {
-      display: flex;
-      justify-content: center;
-      gap: 30px;
-      margin-bottom: 20px;
-    }
-    
-    .footer-links a {
-      color: rgba(0,255,156,0.6);
-      text-decoration: none;
-      font-size: 14px;
-      transition: color 0.3s;
-    }
-    
-    .footer-links a:hover {
-      color: #00ff9c;
-    }
-    
-    .demo-badge {
-      display: inline-block;
-      background: rgba(255,170,0,0.1);
-      border: 1px solid rgba(255,170,0,0.3);
-      color: #ffaa00;
-      padding: 8px 16px;
-      border-radius: 20px;
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      margin-top: 20px;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <!-- Header -->
-    <div class="header">
-      <div class="logo">
-        <div class="logo-dot"></div>
-        <a href="/" style="text-decoration: none; color: inherit;">AUTHRIX AI</a>
-      </div>
-      <h1>Choose Your Plan</h1>
-      <p class="subtitle">Protect yourself from deepfakes with AI-powered detection. Start free, upgrade anytime.</p>
-    </div>
-    
-    <!-- Pricing Cards -->
-    <div class="pricing-grid">
-      <!-- Free -->
-      <div class="pricing-card">
-        <div class="plan-name">Free</div>
-        <div class="plan-price">$0<span>/mo</span></div>
-        <div class="plan-interval">Perfect for trying out</div>
-        <ul class="plan-features">
-          <li><span class="check">✓</span> 10 video analyses/month</li>
-          <li><span class="check">✓</span> Browser extension</li>
-          <li><span class="check">✓</span> Max 2-minute videos</li>
-          <li><span class="check">✓</span> Community support</li>
-        </ul>
-        <button class="cta-button secondary" onclick="showDemo('free')">Get Started Free</button>
-      </div>
-      
-      <!-- Pro -->
-      <div class="pricing-card popular">
-        <div class="popular-badge">MOST POPULAR</div>
-        <div class="plan-name">Pro</div>
-        <div class="plan-price">$9.99<span>/mo</span></div>
-        <div class="plan-interval">For individuals & creators</div>
-        <ul class="plan-features">
-          <li><span class="check">✓</span> 100 analyses/month</li>
-          <li><span class="check">✓</span> Up to 10-minute videos</li>
-          <li><span class="check">✓</span> API access (100 calls/mo)</li>
-          <li><span class="check">✓</span> Priority processing</li>
-          <li><span class="check">✓</span> Email support</li>
-          <li><span class="check">✓</span> Batch upload</li>
-        </ul>
-        <button class="cta-button primary" onclick="showDemo('pro')">Subscribe to Pro</button>
-      </div>
-      
-      <!-- Business -->
-      <div class="pricing-card">
-        <div class="plan-name">Business</div>
-        <div class="plan-price">$49<span>/mo</span></div>
-        <div class="plan-interval">For teams & organizations</div>
-        <ul class="plan-features">
-          <li><span class="check">✓</span> 1,000 analyses/month</li>
-          <li><span class="check">✓</span> Unlimited video length</li>
-          <li><span class="check">✓</span> API access (5K calls/mo)</li>
-          <li><span class="check">✓</span> White-label reports</li>
-          <li><span class="check">✓</span> Slack/Teams integration</li>
-          <li><span class="check">✓</span> Priority support</li>
-          <li><span class="check">✓</span> Custom branding</li>
-        </ul>
-        <button class="cta-button primary" onclick="showDemo('business')">Subscribe to Business</button>
-      </div>
-    </div>
-    
-    <!-- Enterprise Section -->
-    <div class="enterprise-section">
-      <h2>Enterprise Solutions</h2>
-      <p>Custom solutions for large organizations, social media platforms, and government agencies</p>
-      
-      <div class="enterprise-features">
-        <div class="enterprise-feature">
-          <h3>🏢 On-Premise Deployment</h3>
-          <p>Deploy Authrix on your own infrastructure for maximum security</p>
-        </div>
-        <div class="enterprise-feature">
-          <h3>🎯 Custom Model Training</h3>
-          <p>Train models on your specific content and use cases</p>
-        </div>
-        <div class="enterprise-feature">
-          <h3>⚡ Unlimited Analyses</h3>
-          <p>No limits on video analyses or API calls</p>
-        </div>
-        <div class="enterprise-feature">
-          <h3>🛡️ SLA Guarantees</h3>
-          <p>99.9% uptime with dedicated support team</p>
-        </div>
-      </div>
-      
-      <button class="cta-button primary" onclick="showDemo('enterprise')" style="max-width: 300px; margin: 0 auto;">Contact Sales</button>
-    </div>
-    
-    <!-- FAQ -->
-    <div class="faq-section">
-      <h2>Frequently Asked Questions</h2>
-      
-      <div class="faq-item">
-        <div class="faq-question">How accurate is Authrix?</div>
-        <div class="faq-answer">Authrix uses an ensemble of state-of-the-art ViT models achieving 99%+ accuracy on benchmark datasets. We combine visual analysis with audio detection for comprehensive deepfake identification.</div>
-      </div>
-      
-      <div class="faq-item">
-        <div class="faq-question">Can I cancel anytime?</div>
-        <div class="faq-answer">Yes! All subscriptions are month-to-month with no long-term commitment. Cancel anytime from your account dashboard.</div>
-      </div>
-      
-      <div class="faq-item">
-        <div class="faq-question">What video formats are supported?</div>
-        <div class="faq-answer">We support MP4, AVI, MOV, MKV, WebM, and WMV formats. Maximum file size is 100MB for Pro tier, unlimited for Business and Enterprise.</div>
-      </div>
-      
-      <div class="faq-item">
-        <div class="faq-question">Is my data secure?</div>
-        <div class="faq-answer">Absolutely. All videos are analyzed locally and deleted immediately after processing. We never store your content or share it with third parties.</div>
-      </div>
-      
-      <div class="faq-item">
-        <div class="faq-question">Do you offer refunds?</div>
-        <div class="faq-answer">Yes, we offer a 30-day money-back guarantee. If you're not satisfied, contact support for a full refund.</div>
-      </div>
-    </div>
-    
-    <!-- Footer -->
-    <div class="footer">
-      <div class="footer-links">
-        <a href="/">Home</a>
-        <a href="/pricing.html">Pricing</a>
-        <a href="https://docs.authrix.ai">API Docs</a>
-        <a href="mailto:support@authrix.ai">Support</a>
-        <a href="/terms.html">Terms</a>
-        <a href="/privacy.html">Privacy</a>
-      </div>
-      <p style="color: rgba(255,255,255,0.3); font-size: 14px;">
-        © 2026 Authrix AI. All rights reserved.
-      </p>
-    </div>
-  </div>
-  
-  <script>
-    function showDemo(plan) {
-      const messages = {
-        free: 'Free tier selected! In production, this would redirect to signup.',
-        pro: 'Pro plan selected ($9.99/mo)! In production, this would open Stripe checkout.',
-        business: 'Business plan selected ($49/mo)! In production, this would open Stripe checkout.',
-        enterprise: 'Enterprise inquiry! In production, this would open a contact form or schedule a demo call.'
-      };
-      
-      alert(messages[plan] + '\n\n💡 This is a demo. Payment integration will be added in production.');
-      
-      // In production, this would be:
-      // window.location.href = `/checkout?plan=${plan}`;
-    }
-  </script>
-</body>
-</html>

frontend-vanilla/script.js

@@ -1,354 +0,0 @@
-/**
- * Deepfake Authenticator — Frontend Logic (Cinematic Dark UI)
- */
-
-const API_BASE = (window.location.protocol === 'file:')
-  ? 'http://localhost:8000'
-  : window.location.origin;
-
-let selectedFile = null;
-
-// ── Boot ──────────────────────────────────────
-window.addEventListener('load', () => {
-  initUpload();
-});
-
-// ── Upload wiring ─────────────────────────────
-function initUpload() {
-  const zone  = document.getElementById('dropZone');
-  const input = document.getElementById('fileInput');
-  const clear = document.getElementById('clearBtn');
-  const btn   = document.getElementById('analyzeBtn');
-
-  zone.addEventListener('click', e => {
-    if (!e.target.closest('#clearBtn')) input.click();
-  });
-
-  input.addEventListener('change', () => {
-    if (input.files?.[0]) applyFile(input.files[0]);
-  });
-
-  clear.addEventListener('click', e => {
-    e.stopPropagation();
-    clearFile();
-  });
-
-  zone.addEventListener('dragover', e => {
-    e.preventDefault(); e.stopPropagation();
-    zone.classList.add('drag-over');
-  });
-
-  zone.addEventListener('dragleave', e => {
-    e.preventDefault();
-    zone.classList.remove('drag-over');
-  });
-
-  zone.addEventListener('drop', e => {
-    e.preventDefault(); e.stopPropagation();
-    zone.classList.remove('drag-over');
-    const f = e.dataTransfer.files[0];
-    if (f?.type.startsWith('video/')) applyFile(f);
-    else showError('Please drop a valid video file (MP4, AVI, MOV, MKV, WebM).');
-  });
-
-  btn.addEventListener('click', analyzeVideo);
-}
-
-function applyFile(file) {
-  selectedFile = file;
-  document.getElementById('uploadPrompt').classList.add('hidden');
-  const fc = document.getElementById('fileChosen');
-  fc.classList.remove('hidden');
-  document.getElementById('chosenName').textContent = file.name;
-  document.getElementById('chosenSize').textContent = fmtBytes(file.size);
-  const btn = document.getElementById('analyzeBtn');
-  btn.disabled = false;
-  btn.classList.add('active');
-}
-
-function clearFile() {
-  selectedFile = null;
-  document.getElementById('fileInput').value = '';
-  document.getElementById('fileChosen').classList.add('hidden');
-  document.getElementById('uploadPrompt').classList.remove('hidden');
-  const btn = document.getElementById('analyzeBtn');
-  btn.disabled = true;
-  btn.classList.remove('active');
-}
-
-function resetAll() {
-  clearFile();
-  ['loadingSection', 'resultSection', 'errorSection'].forEach(hide);
-  show('uploadSection');
-}
-
-// ── Analyze ───────────────────────────────────
-async function analyzeVideo() {
-  if (!selectedFile) return;
-
-  hide('uploadSection');
-  show('loadingSection');
-  ['resultSection', 'errorSection'].forEach(hide);
-
-  startAgentAnim();
-
-  const fd = new FormData();
-  fd.append('file', selectedFile);
-
-  try {
-    const res = await fetch(`${API_BASE}/analyze`, { method: 'POST', body: fd });
-    if (!res.ok) {
-      const e = await res.json().catch(() => ({}));
-      throw new Error(e.detail || `Server error ${res.status}`);
-    }
-    const data = await res.json();
-    renderResult(data);
-  } catch (err) {
-    showError(err.message || 'Connection to analysis engine failed.');
-  } finally {
-    hide('loadingSection');
-    stopAgentAnim();
-  }
-}
-
-// ── Loading Animation ─────────────────────────
-let _simTimer = null;
-let _agentTimer = null;
-
-function startAgentAnim() {
-  const statusEl = document.getElementById('loadingStatus');
-  const progBar  = document.getElementById('progressBar');
-
-  const phases = [
-    { p: 12,  msg: 'Extracting keyframes...', ag: 0 },
-    { p: 35,  msg: 'Isolating facial regions...', ag: 1 },
-    { p: 65,  msg: 'Running ViT neural inference...', ag: 2 },
-    { p: 85,  msg: 'Cross-referencing metadata...', ag: 2 },
-    { p: 95,  msg: 'Compiling authenticity report...', ag: 3 },
-  ];
-
-  // Reset agents
-  [0,1,2,3].forEach(i => {
-    const card = document.getElementById('ag' + i);
-    if (card) card.classList.remove('active');
-  });
-
-  statusEl.textContent = 'Initializing sequence...';
-  progBar.style.width = '0%';
-
-  let idx = 0;
-  _simTimer = setInterval(() => {
-    if (idx < phases.length) {
-      const ph = phases[idx];
-      statusEl.textContent = ph.msg;
-      progBar.style.width = ph.p + '%';
-      const card = document.getElementById('ag' + ph.ag);
-      if (card) card.classList.add('active');
-      idx++;
-    }
-  }, 1100);
-}
-
-function stopAgentAnim() {
-  if (_simTimer) { clearInterval(_simTimer); _simTimer = null; }
-  document.getElementById('progressBar').style.width = '100%';
-  [0,1,2,3].forEach(i => {
-    const card = document.getElementById('ag' + i);
-    if (card) card.classList.add('active');
-  });
-}
-
-// ── Render Result ───────────���─────────────────
-function renderResult(data) {
-  const isFake = data.result === 'FAKE';
-  const pct    = data.confidence;
-
-  // Verdict card border glow
-  const vc = document.getElementById('verdictCard');
-  vc.style.borderColor = isFake ? 'rgba(255,51,85,0.5)' : 'rgba(0,255,136,0.5)';
-  vc.style.boxShadow   = isFake
-    ? '0 0 50px rgba(255,51,85,0.15), inset 0 0 30px rgba(255,51,85,0.05)'
-    : '0 0 50px rgba(0,255,136,0.15), inset 0 0 30px rgba(0,255,136,0.05)';
-
-  // Badge
-  const badge = document.getElementById('verdictBadge');
-  badge.className = 'verdict-badge ' + (isFake ? 'fake' : 'real');
-  badge.style.background = isFake ? 'rgba(255,51,85,0.08)' : 'rgba(0,255,136,0.08)';
-
-  // Emoji
-  document.getElementById('verdictEmoji').textContent = isFake ? '⚠' : '✓';
-
-  // Label
-  const lbl = document.getElementById('verdictLabel');
-  lbl.textContent = isFake ? 'DEEPFAKE' : 'AUTHENTIC';
-  lbl.style.color = isFake ? '#ff3355' : '#00ff88';
-  lbl.style.textShadow = isFake
-    ? '0 0 20px rgba(255,51,85,0.7)'
-    : '0 0 20px rgba(0,255,136,0.7)';
-  if (isFake) lbl.classList.add('glitch-text');
-  else lbl.classList.remove('glitch-text');
-
-  // Confidence value
-  const cv = document.getElementById('confValue');
-  cv.textContent = pct + '%';
-  cv.style.color = isFake ? '#ff3355' : '#00ff88';
-
-  // Confidence bar
-  const bar = document.getElementById('confBar');
-  bar.className = 'conf-fill ' + (isFake ? 'fake' : 'real');
-  setTimeout(() => { bar.style.width = pct + '%'; }, 80);
-
-  // Risk needle
-  const needle = document.getElementById('riskNeedle');
-  const riskLbl = document.getElementById('riskLabel');
-  if (pct < 35) {
-    needle.textContent = 'LOW RISK';
-    needle.style.color = '#00ff88';
-    needle.style.borderColor = 'rgba(0,255,136,0.35)';
-    needle.style.background = 'rgba(0,255,136,0.08)';
-    if (riskLbl) riskLbl.textContent = 'Minimal manipulation indicators detected';
-  } else if (pct < 65) {
-    needle.textContent = 'MEDIUM RISK';
-    needle.style.color = '#ffaa00';
-    needle.style.borderColor = 'rgba(255,170,0,0.35)';
-    needle.style.background = 'rgba(255,170,0,0.08)';
-    if (riskLbl) riskLbl.textContent = 'Moderate anomalies detected — review advised';
-  } else {
-    needle.textContent = 'CRITICAL RISK';
-    needle.style.color = '#ff3355';
-    needle.style.borderColor = 'rgba(255,51,85,0.35)';
-    needle.style.background = 'rgba(255,51,85,0.08)';
-    if (riskLbl) riskLbl.textContent = 'High-confidence manipulation signatures found';
-  }
-
-  // Insights
-  const dl = document.getElementById('detailsList');
-  dl.innerHTML = '';
-  const details = data.details || ['Analysis completed successfully.'];
-  const dotColor = isFake ? '#ff3355' : '#00ff88';
-  const dotGlow  = isFake ? 'rgba(255,51,85,0.6)' : 'rgba(0,255,136,0.6)';
-  details.forEach((txt, i) => {
-    const div = document.createElement('div');
-    div.className = 'insight-item';
-    div.style.animationDelay = (i * 0.08) + 's';
-    div.style.borderLeftColor = dotColor;
-    div.style.borderLeft = `2px solid ${dotColor}`;
-    div.innerHTML = `<span class="insight-dot" style="background:${dotColor};box-shadow:0 0 8px ${dotGlow};"></span><span>${esc(txt)}</span>`;
-    dl.appendChild(div);
-  });
-
-  // Metadata
-  const meta = data.metadata || {};
-  const mg = document.getElementById('metaGrid');
-  mg.innerHTML = '';
-  const metaItems = [
-    ['Frames Analyzed', meta.frames_analyzed ?? '—'],
-    ['Duration',        meta.video_duration_sec ? meta.video_duration_sec + 's' : '—'],
-    ['FPS',             meta.video_fps ?? '—'],
-    ['Resolution',      meta.resolution ?? '—'],
-    ['Processing Time', data.processing_time_sec ? data.processing_time_sec + 's' : '—'],
-  ];
-  metaItems.forEach(([k, v]) => {
-    const row = document.createElement('div');
-    row.className = 'meta-row';
-    row.innerHTML = `<span style="font-size:11px;color:var(--muted);letter-spacing:0.08em;">${k}</span><span style="font-size:13px;font-weight:600;color:#fff;font-family:'JetBrains Mono',monospace;">${v}</span>`;
-    mg.appendChild(row);
-  });
-
-  // Frame timeline
-  renderTimeline(data, isFake);
-
-  show('resultSection');
-}
-
-function renderTimeline(data, isFake) {
-  const chart = document.getElementById('timelineChart');
-  if (!chart) return;
-  chart.innerHTML = '';
-
-  const frames = data.frame_scores || [];
-  if (!frames.length) {
-    chart.innerHTML = '<span style="font-size:11px;color:var(--muted);font-family:\'JetBrains Mono\',monospace;margin:auto;">No per-frame data available</span>';
-    return;
-  }
-
-  const maxH = 60; // px
-  const barColor = isFake ? '#ff3355' : '#00ff88';
-  const barGlow  = isFake ? 'rgba(255,51,85,0.5)' : 'rgba(0,255,136,0.5)';
-
-  frames.forEach((score, i) => {
-    const pct = Math.round(score * 100);
-    const h   = Math.max(4, Math.round((score) * maxH));
-
-    const wrap = document.createElement('div');
-    wrap.className = 'bar-wrap';
-    wrap.style.height = maxH + 'px';
-
-    const outer = document.createElement('div');
-    outer.className = 'bar-outer';
-    outer.style.height = maxH + 'px';
-
-    const inner = document.createElement('div');
-    inner.className = 'bar-inner';
-    inner.style.height = '0px';
-    inner.style.background = score > 0.5
-      ? `linear-gradient(to top, ${barColor}, rgba(255,255,255,0.3))`
-      : 'rgba(255,255,255,0.12)';
-    if (score > 0.5) inner.style.boxShadow = `0 0 8px ${barGlow}`;
-
-    outer.appendChild(inner);
-
-    const tip = document.createElement('div');
-    tip.className = 'bar-tooltip';
-    tip.textContent = `F${i+1}: ${pct}%`;
-
-    wrap.appendChild(outer);
-    wrap.appendChild(tip);
-    chart.appendChild(wrap);
-
-    // Animate in
-    setTimeout(() => { inner.style.height = h + 'px'; }, 50 + i * 20);
-  });
-
-  // Threshold line at 50%
-  const line = document.createElement('div');
-  line.style.cssText = `position:absolute;left:0;right:0;bottom:${maxH*0.5}px;height:1px;background:rgba(255,170,0,0.4);pointer-events:none;`;
-  const lineLbl = document.createElement('span');
-  lineLbl.style.cssText = 'position:absolute;right:4px;top:-14px;font-size:9px;color:#ffaa00;font-family:\'JetBrains Mono\',monospace;letter-spacing:0.1em;';
-  lineLbl.textContent = '50%';
-  line.appendChild(lineLbl);
-  chart.appendChild(line);
-}
-
-// ── Helpers ───────────────────────────────────
-function show(id) {
-  const el = document.getElementById(id);
-  if (!el) return;
-  el.classList.remove('hidden');
-  if (el.style.display === 'none') el.style.display = '';
-}
-
-function hide(id) {
-  const el = document.getElementById(id);
-  if (el) el.classList.add('hidden');
-}
-
-function fmtBytes(b) {
-  if (b < 1024)    return b + ' B';
-  if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
-  return (b / 1048576).toFixed(1) + ' MB';
-}
-
-function esc(s) {
-  return String(s)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-}
-
-function showError(msg) {
-  hide('uploadSection');
-  hide('loadingSection');
-  document.getElementById('errorMsg').textContent = msg;
-  show('errorSection');
-}